From ba48fa668a5a66e5ba33259c268c51fe1e51b121 Mon Sep 17 00:00:00 2001
From: Ignacio Becerra <i1becerr@ucsd.edu>
Date: Tue, 19 Dec 2023 20:31:57 -0800
Subject: [PATCH] chore(examples): replacing component examples for stackblitz
 (#11151)

* chore(examples): rename directory to stackblitz

* chore(examples): replace the cds to c4d in styles

* chore(examples): last fixes

* chore(docs): ....more

* docs(examples): replace to stackblitz links

* chore(examples): remove sandbox files

* docs(examples): renamed cds to c4d

* fix(toc): updating scss import

* fix(readme): use main instead of cwc-v2

* fix(pagination): updating docs

---------

Co-authored-by: Jeff Chew <jeff.chew@gmail.com>
---
 .../carbon-web-components/docs/form-story.mdx |  2 +-
 .../docs/styling-story.mdx                    |  4 +-
 .../docs/welcome-story.mdx                    |  4 +-
 .../components/accordion/accordion-story.mdx  |  4 +-
 .../breadcrumb/breadcrumb-story.mdx           |  4 +-
 .../src/components/button/button-story.mdx    |  4 +-
 .../components/checkbox/checkbox-story.mdx    |  4 +-
 .../code-snippet/code-snippet-story.mdx       |  4 +-
 .../components/combo-box/combo-box-story.mdx  |  4 +-
 .../content-switcher-story.mdx                |  4 +-
 .../copy-button/copy-button-story.mdx         |  4 +-
 .../components/copy-button/copy-button.mdx    | 43 ++++++++++++++
 .../data-table/stories/data-table-story.mdx   |  4 +-
 .../date-picker/date-picker-story.mdx         |  4 +-
 .../components/dropdown/dropdown-story.mdx    |  4 +-
 .../file-uploader/file-uploader-story.mdx     |  4 +-
 .../form-group/form-group-story.mdx           |  4 +-
 .../icon-button/icon-button-story.mdx         |  4 +-
 .../inline-loading/inline-loading-story.mdx   |  4 +-
 .../src/components/layer/layer-story.mdx      |  4 +-
 .../src/components/link/link-story.mdx        |  4 +-
 .../src/components/link/link.mdx              | 57 +++++++++++++++++++
 .../src/components/list/list-story.mdx        |  4 +-
 .../src/components/loading/loading-story.mdx  |  4 +-
 .../src/components/modal/modal-story.mdx      |  4 +-
 .../multi-select/multi-select-story.mdx       |  4 +-
 .../notification/notification-story.mdx       |  4 +-
 .../number-input/number-input-story.mdx       |  4 +-
 .../overflow-menu/overflow-menu-story.mdx     |  4 +-
 .../pagination/pagination-story.mdx           |  8 +--
 .../src/components/popover/popover-story.mdx  |  4 +-
 .../progress-bar/progress-bar-story.mdx       |  4 +-
 .../progress-indicator-story.mdx              |  4 +-
 .../radio-button/radio-button-story.mdx       |  4 +-
 .../src/components/search/search-story.mdx    |  4 +-
 .../src/components/select/select-story.mdx    |  4 +-
 .../skeleton-placeholder-story.mdx            |  4 +-
 .../skeleton-text/skeleton-text-story.mdx     |  4 +-
 .../skip-to-content/skip-to-content-story.mdx |  4 +-
 .../src/components/slider/slider-story.mdx    |  4 +-
 .../src/components/slug/slug-story.mdx        |  4 +-
 .../src/components/stack/stack-story.mdx      |  4 +-
 .../structured-list/structured-list-story.mdx |  4 +-
 .../src/components/tabs/tabs-story.mdx        |  4 +-
 .../src/components/tag/tag-story.mdx          |  4 +-
 .../text-input/text-input-story.mdx           |  4 +-
 .../components/textarea/textarea-story.mdx    |  4 +-
 .../src/components/tile/tile-story.mdx        |  4 +-
 .../components/toggle-tip/toggletip-story.mdx |  4 +-
 .../src/components/toggle/toggle-story.mdx    |  4 +-
 .../src/components/tooltip/tooltip-story.mdx  |  4 +-
 .../components/ui-shell/ui-shell-story.mdx    |  4 +-
 52 files changed, 200 insertions(+), 102 deletions(-)
 create mode 100644 web-components/packages/carbon-web-components/src/components/copy-button/copy-button.mdx
 create mode 100644 web-components/packages/carbon-web-components/src/components/link/link.mdx

diff --git a/web-components/packages/carbon-web-components/docs/form-story.mdx b/web-components/packages/carbon-web-components/docs/form-story.mdx
index 8586730a2465..a8e438f6ceec 100644
--- a/web-components/packages/carbon-web-components/docs/form-story.mdx
+++ b/web-components/packages/carbon-web-components/docs/form-story.mdx
@@ -30,7 +30,7 @@ button.addEventListener('click', () => {
 ```
 
 <iframe
-  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"
+  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/web-components/packages/carbon-web-components/docs/styling-story.mdx b/web-components/packages/carbon-web-components/docs/styling-story.mdx
index 395df4cbbc3e..9bd1711e9b78 100644
--- a/web-components/packages/carbon-web-components/docs/styling-story.mdx
+++ b/web-components/packages/carbon-web-components/docs/styling-story.mdx
@@ -25,7 +25,7 @@ Changes to CSS Custom Properties of the Carbon theme are reflected in the color
 scheme of `@carbon/web-components` components:
 
 <iframe
-  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"
+  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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',
@@ -108,7 +108,7 @@ class MyDropdown extends CDSDropdown {
 ```
 
 <iframe
-  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"
+  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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',
diff --git a/web-components/packages/carbon-web-components/docs/welcome-story.mdx b/web-components/packages/carbon-web-components/docs/welcome-story.mdx
index 75f89b869ca1..381cb33d3eb3 100644
--- a/web-components/packages/carbon-web-components/docs/welcome-story.mdx
+++ b/web-components/packages/carbon-web-components/docs/welcome-story.mdx
@@ -46,10 +46,10 @@ yarn add @carbon/web-components
 
 ### 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:
+Our example at [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic) shows the most basic usage:
 
 <iframe
-  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"
+  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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"
diff --git a/web-components/packages/carbon-web-components/src/components/accordion/accordion-story.mdx b/web-components/packages/carbon-web-components/src/components/accordion/accordion-story.mdx
index bab2e07081de..3f47a2848824 100644
--- a/web-components/packages/carbon-web-components/src/components/accordion/accordion-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/accordion)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx
index 04d657f65da4..c3549fca95c2 100644
--- a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb)
 
 ## Getting started
 
diff --git a/web-components/packages/carbon-web-components/src/components/button/button-story.mdx b/web-components/packages/carbon-web-components/src/components/button/button-story.mdx
index ee690e0f93db..ced97e7d257d 100644
--- a/web-components/packages/carbon-web-components/src/components/button/button-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/button/button-story.mdx
@@ -5,10 +5,10 @@ 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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/button)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/button)
 
 ## Overview
 
diff --git a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx
index a6a4e487c734..ce79993f0189 100644
--- a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx
index fc6fa250f2a2..1247586531dd 100644
--- a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
index 604910fda4fd..3776c67f9581 100644
--- a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
@@ -4,10 +4,10 @@ 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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box)
 
 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.
diff --git a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx
index 5fc64fc0d7b0..a0ece21be66d 100644
--- a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx
index b3f034ecf80b..5983c9a2889e 100644
--- a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx
@@ -4,10 +4,10 @@ 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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.mdx b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.mdx
new file mode 100644
index 000000000000..418c11990d06
--- /dev/null
+++ b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.mdx
@@ -0,0 +1,43 @@
+import { ArgsTable, Description, Meta } from '@storybook/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as CopyButtonStories from './copy-button.stories';
+
+<Meta of={CopyButtonStories} /> 
+
+# Copy button
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/main/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
+`<cds-copy-button>` and interact with the clipboard.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/copy-button/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['copy-button'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-copy-button feedback="Copied!" feedback-timeout="2000">
+  Copy to Clipboard
+</cds-copy-button>
+```
+
+## `<cds-copy-button>` attributes and properties
+
+<ArgsTable of="cds-copy-button" />
+
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx
index 475315717824..42e3ed4a574a 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx
@@ -4,10 +4,10 @@ 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)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/data-table)
+[![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/main/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:
diff --git a/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-story.mdx b/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-story.mdx
index 1c0d254148f3..7806eead98e7 100644
--- a/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx b/web-components/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx
index fc028cd3791c..cd21534e593c 100644
--- a/web-components/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx
index 4a982ad96c29..1ee870133cf4 100644
--- a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/form-group/form-group-story.mdx b/web-components/packages/carbon-web-components/src/components/form-group/form-group-story.mdx
index 158b22bbd8fa..148e3f9d9027 100644
--- a/web-components/packages/carbon-web-components/src/components/form-group/form-group-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/form-group/form-group-story.mdx
@@ -4,10 +4,10 @@ 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)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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)
+[![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/main/packages/carbon-web-components/examples/codesandbox/basic/components/form-group)
 
 ## Getting started
 
diff --git a/web-components/packages/carbon-web-components/src/components/icon-button/icon-button-story.mdx b/web-components/packages/carbon-web-components/src/components/icon-button/icon-button-story.mdx
index ce433b524c7b..43af4aa49e3a 100644
--- a/web-components/packages/carbon-web-components/src/components/icon-button/icon-button-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/icon-button/icon-button-story.mdx
@@ -4,10 +4,10 @@ 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)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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)
+[![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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx b/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx
index 6d5b18cc9881..ba91423b8495 100644
--- a/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/layer/layer-story.mdx b/web-components/packages/carbon-web-components/src/components/layer/layer-story.mdx
index 96763e02c0c4..0d09fa7c2cdb 100644
--- a/web-components/packages/carbon-web-components/src/components/layer/layer-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/layer/layer-story.mdx
@@ -4,10 +4,10 @@ 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)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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)
+[![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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/link/link-story.mdx b/web-components/packages/carbon-web-components/src/components/link/link-story.mdx
index fb27eaab2d23..6ea479f8b22a 100644
--- a/web-components/packages/carbon-web-components/src/components/link/link-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/link/link-story.mdx
@@ -4,10 +4,10 @@ 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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/link)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/link)
 
 Represents a link. Provided for convenience purpose, you can alternatively use
 `<a class="cds--link">` with Carbon style in place in light DOM.
diff --git a/web-components/packages/carbon-web-components/src/components/link/link.mdx b/web-components/packages/carbon-web-components/src/components/link/link.mdx
new file mode 100644
index 000000000000..0e71e1bdf6db
--- /dev/null
+++ b/web-components/packages/carbon-web-components/src/components/link/link.mdx
@@ -0,0 +1,57 @@
+import { ArgsTable, Description, Meta } from '@storybook/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as LinkStories from './link.stories';
+
+<Meta of={LinkStories} /> 
+
+# Link
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/link)
+
+Represents a link. Provided for convenience purpose, you can alternatively use
+`<a class="cds--link">` with Carbon style in place in light DOM.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/list/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['list'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-link href="https://www.ibm.com"> Link </cds-link>
+```
+
+## Paired with icon
+
+Import the desired icon and incorporate with the link text:
+
+```javascript
+import Download16 from '@carbon/web-components/es/icons/download/16';
+
+function App() {
+  return html`<cds-link href="https://www.ibm.com">
+    Download ${Download16({ slot: 'icon' })}</cds-link
+  >`;
+}
+```
+
+## `<cds-link>` attributes and properties
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-link disabled>`) and `false` means not setting the attribute (e.g.
+`<cds-link>` without `disabled` attribute).
+
+<ArgsTable of="cds-link" />
\ No newline at end of file
diff --git a/web-components/packages/carbon-web-components/src/components/list/list-story.mdx b/web-components/packages/carbon-web-components/src/components/list/list-story.mdx
index 3cd288bfd543..09922b081f01 100644
--- a/web-components/packages/carbon-web-components/src/components/list/list-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/list)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/list)
 
 ## Getting started
 
diff --git a/web-components/packages/carbon-web-components/src/components/loading/loading-story.mdx b/web-components/packages/carbon-web-components/src/components/loading/loading-story.mdx
index 314864d18063..a04633152da0 100644
--- a/web-components/packages/carbon-web-components/src/components/loading/loading-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/loading)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-story.mdx b/web-components/packages/carbon-web-components/src/components/modal/modal-story.mdx
index 0c9094d3f152..5ec7c56e90ac 100644
--- a/web-components/packages/carbon-web-components/src/components/modal/modal-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/modal/modal-story.mdx
@@ -4,10 +4,10 @@ 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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/modal)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/multi-select/multi-select-story.mdx b/web-components/packages/carbon-web-components/src/components/multi-select/multi-select-story.mdx
index 214cff12324f..ae58a885d27f 100644
--- a/web-components/packages/carbon-web-components/src/components/multi-select/multi-select-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select)
 
 Multi select is used when user needs to select multiple options from a dropdown.
 
diff --git a/web-components/packages/carbon-web-components/src/components/notification/notification-story.mdx b/web-components/packages/carbon-web-components/src/components/notification/notification-story.mdx
index 35bf339f5f4d..6b25d9293fc5 100644
--- a/web-components/packages/carbon-web-components/src/components/notification/notification-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/notification)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/notification)
 
 Notifications are messages that communicate information to the user.
 
diff --git a/web-components/packages/carbon-web-components/src/components/number-input/number-input-story.mdx b/web-components/packages/carbon-web-components/src/components/number-input/number-input-story.mdx
index 68d27e53c7a8..3297488e3e40 100644
--- a/web-components/packages/carbon-web-components/src/components/number-input/number-input-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx b/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx
index 947cdadf3473..84d0f1699a74 100644
--- a/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/pagination/pagination-story.mdx b/web-components/packages/carbon-web-components/src/components/pagination/pagination-story.mdx
index c1b6db78a886..054da8e00d56 100644
--- a/web-components/packages/carbon-web-components/src/components/pagination/pagination-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/pagination/pagination-story.mdx
@@ -4,10 +4,10 @@ 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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/pagination)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/pagination)
 
 The pagination component is used to switch through multiple pages of items, when
 only a maximum number of items can be displayed per page. Can be used in
@@ -29,14 +29,12 @@ import '@carbon/web-components/es/components/pagination/index.js';
 ### HTML
 
 ```html
-<cds-pagination page-size="10" total="100">
-  <cds-select>
+<cds-pagination page-size="10" total-items="100">
       <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>
 ```
 
diff --git a/web-components/packages/carbon-web-components/src/components/popover/popover-story.mdx b/web-components/packages/carbon-web-components/src/components/popover/popover-story.mdx
index e24c43e9dc3c..506cb2876ca7 100644
--- a/web-components/packages/carbon-web-components/src/components/popover/popover-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/popover/popover-story.mdx
@@ -4,10 +4,10 @@ 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)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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)
+[![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/main/packages/carbon-web-components/examples/codesandbox/basic/components/popover)
 
 Popover is a layer that pops up over all other elements on a page
 
diff --git a/web-components/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.mdx b/web-components/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.mdx
index 632b3ca519e7..1a1df0495f09 100644
--- a/web-components/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.mdx
@@ -4,10 +4,10 @@ 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)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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)
+[![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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx
index 7933f759aa1a..352572a2b1ac 100644
--- a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx
index b22fffa5a79c..0772971a2929 100644
--- a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/search/search-story.mdx b/web-components/packages/carbon-web-components/src/components/search/search-story.mdx
index 597fede009db..3dae24878694 100644
--- a/web-components/packages/carbon-web-components/src/components/search/search-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/search)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/select/select-story.mdx b/web-components/packages/carbon-web-components/src/components/select/select-story.mdx
index 803781cff8f2..1a0c16e5a283 100644
--- a/web-components/packages/carbon-web-components/src/components/select/select-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/select)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx
index fd20b71bd69f..f260ceb4416f 100644
--- a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder)
 
 ## Getting started
 
diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx
index 43f6a3eaa8a3..8f0eb3c14298 100644
--- a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text)
 
 ## Getting started
 
diff --git a/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx b/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx
index 710ab8e873ad..bd64411b0d72 100644
--- a/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/slider/slider-story.mdx b/web-components/packages/carbon-web-components/src/components/slider/slider-story.mdx
index bb4fcbba3a8e..b24d47293536 100644
--- a/web-components/packages/carbon-web-components/src/components/slider/slider-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/slider)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug-story.mdx b/web-components/packages/carbon-web-components/src/components/slug/slug-story.mdx
index 271473966a0c..e674394eb58c 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/slug/slug-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Slug
 
 > 💡 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/slug)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/packages/carbon-web-components/examples/codesandbox/basic/components/slug)
 > 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/slug)
+[![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/main/packages/carbon-web-components/examples/codesandbox/basic/components/slug)
 
 The slug is a component alerting the user of generated AI content.
 
diff --git a/web-components/packages/carbon-web-components/src/components/stack/stack-story.mdx b/web-components/packages/carbon-web-components/src/components/stack/stack-story.mdx
index 86dfa58f69f5..33dffc1f9eb3 100644
--- a/web-components/packages/carbon-web-components/src/components/stack/stack-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/stack/stack-story.mdx
@@ -4,10 +4,10 @@ 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)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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)
+[![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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx
index 25e3f49beded..ffc2075ece20 100644
--- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list)
 
 Structured Lists group content that is similar or related, such as terms or
 definitions.
diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.mdx b/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.mdx
index 2b304db54be2..7145c6134ca3 100644
--- a/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tabs)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/tabs)
 
 Tabs are used to quickly navigate between views within the same context.
 
diff --git a/web-components/packages/carbon-web-components/src/components/tag/tag-story.mdx b/web-components/packages/carbon-web-components/src/components/tag/tag-story.mdx
index 489266c98596..4fdf810ec60e 100644
--- a/web-components/packages/carbon-web-components/src/components/tag/tag-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tag)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/text-input/text-input-story.mdx b/web-components/packages/carbon-web-components/src/components/text-input/text-input-story.mdx
index c5bdb662805e..2f42fc25daf9 100644
--- a/web-components/packages/carbon-web-components/src/components/text-input/text-input-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/text-input/text-input-story.mdx
@@ -4,10 +4,10 @@ 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)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/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/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
diff --git a/web-components/packages/carbon-web-components/src/components/textarea/textarea-story.mdx b/web-components/packages/carbon-web-components/src/components/textarea/textarea-story.mdx
index e8d230d9ea09..89eb7ad16eaa 100644
--- a/web-components/packages/carbon-web-components/src/components/textarea/textarea-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/textarea)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/tile/tile-story.mdx b/web-components/packages/carbon-web-components/src/components/tile/tile-story.mdx
index df8063794a9d..f76c07b63875 100644
--- a/web-components/packages/carbon-web-components/src/components/tile/tile-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tile)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx
index 9803ed7a39eb..b25a9df76d79 100644
--- a/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx
@@ -4,10 +4,10 @@ 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)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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)
+[![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/main/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.
diff --git a/web-components/packages/carbon-web-components/src/components/toggle/toggle-story.mdx b/web-components/packages/carbon-web-components/src/components/toggle/toggle-story.mdx
index 30d45b6ed81f..df54046ca85c 100644
--- a/web-components/packages/carbon-web-components/src/components/toggle/toggle-story.mdx
+++ b/web-components/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/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/toggle)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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/feat/cwc-v2/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/main/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
diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx
index 6803d261f396..5171d61b8a32 100644
--- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx
@@ -4,10 +4,10 @@ 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)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/main/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)
+[![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/main/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
 
 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
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx b/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx
index 9a6de32251a6..2d75ecb3a34c 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx
+++ b/web-components/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/feat/cwc-v2/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/main/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/feat/cwc-v2/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/main/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell)
 
 UI Shell in Carbon Design System consists of several component groups.