diff --git a/gatsby-node.js b/gatsby-node.js
index a944273c66e..dc00de62dd4 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -66,4 +66,9 @@ exports.createPages = ({ actions }) => {
     toPath: '/developing/vue-tutorial/overview',
     isPermanent: true,
   });
+  createRedirect({
+    fromPath: '/guidelines/typography/styling-strategies',
+    toPath: '/guidelines/typography/style-strategies', 
+    isPermanent: true,
+  });
 };
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 56487e5547d..a2c3e568e40 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const onRenderBody = ({ setHeadComponents }) => {
+export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
   const script = `
   if(!window) window = {};
   window.idaPageIsSPA = true;
@@ -20,7 +20,7 @@ export const onRenderBody = ({ setHeadComponents }) => {
     },
   }`;
 
-  return setHeadComponents([
+  setHeadComponents([
     <meta key="image" name="image" content={'/ogimage.png'} />,
     <meta
       key="og:url"
@@ -68,6 +68,9 @@ export const onRenderBody = ({ setHeadComponents }) => {
       key="fathom"
       defer
     />,
+  ]);
+
+  setPostBodyComponents([
     <script key="digital-data" dangerouslySetInnerHTML={{ __html: script }} />,
     <script
       defer
diff --git a/package.json b/package.json
index 3252c03a4a3..62e27460e98 100644
--- a/package.json
+++ b/package.json
@@ -40,11 +40,11 @@
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@carbon/charts-react": "0.55.0",
-    "@carbon/elements": "^11.10.0-rc.0",
-    "@carbon/icons-react": "^11.8.0-rc.0",
-    "@carbon/pictograms": "^12.6.0-rc.0",
-    "@carbon/pictograms-react": "^11.32.0-rc.0",
-    "@carbon/react": "^1.13.0-rc.0",
+    "@carbon/elements": "^11.12.0",
+    "@carbon/icons-react": "^11.10.0",
+    "@carbon/pictograms": "^12.7.0",
+    "@carbon/pictograms-react": "^11.33.0",
+    "@carbon/react": "^1.15.0",
     "@loadable/component": "^5.15.2",
     "@slack/web-api": "^5.11.0",
     "babel-preset-env": "^1.7.0",
@@ -57,7 +57,7 @@
     "gatsby": "^4.9.2",
     "gatsby-image": "^3.7.1",
     "gatsby-plugin-image": "^2.9.0",
-    "gatsby-theme-carbon": "^3.0.0-next.12",
+    "gatsby-theme-carbon": "^3.0.0-next.13",
     "lodash-es": "^4.17.15",
     "markdown-it": "^12.3.2",
     "nanoid": "^2.1.11",
diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
new file mode 100644
index 00000000000..986aad8f240
--- /dev/null
+++ b/src/components/Banner/Banner.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+
+import {
+  banner,
+  bannerText,
+  bannerHeading,
+  bannerDetails,
+  buttonBanner,
+} from './Banner.module.scss';
+
+const Banner = () => {
+  return (
+    <div aria-label="banner" className={banner}>
+      <p className={bannerText}>
+        <strong className={bannerHeading}>
+          A new web experience is coming!
+        </strong>
+        <span className={bannerDetails}>
+          The v1 Carbon platform is now available in public beta.
+        </span>
+      </p>
+      <Button
+        href="https://next.carbondesignsystem.com"
+        className={buttonBanner}
+        kind="ghost"
+        renderIcon={ArrowRight}>
+        Try the Carbon Platform
+      </Button>
+    </div>
+  );
+};
+
+export default Banner;
diff --git a/src/components/Banner/Banner.module.scss b/src/components/Banner/Banner.module.scss
new file mode 100644
index 00000000000..b03337c721f
--- /dev/null
+++ b/src/components/Banner/Banner.module.scss
@@ -0,0 +1,56 @@
+// position header, left nav and content with banner
+.banner + :global(.cds--header),
+.banner + header + nav + div[class*='leftNavWrapper'],
+.banner + header + nav + div + span + div + #main-content {
+  top: rem(48px);
+}
+
+// banner styles
+.banner {
+  position: fixed;
+  top: 0;
+  z-index: 99999;
+  display: flex;
+  width: 100%;
+  height: rem(48px);
+  justify-content: space-between;
+
+  background: $blue-70;
+  color: $text-on-color;
+}
+
+.banner-text {
+  display: none;
+
+  @include breakpoint('md') {
+    @include type-style('body-short-01');
+
+    display: block;
+    padding: rem(15px) 0 0 $spacing-05;
+  }
+}
+
+.banner-details {
+  display: none;
+
+  @include breakpoint('lg') {
+    display: inline;
+    padding-left: $spacing-03;
+  }
+}
+
+// override carbon button styles
+.banner :global(.cds--btn--ghost).button-banner {
+  width: 100%;
+  max-width: 100%;
+  color: $text-on-color;
+
+  @include breakpoint('md') {
+    width: auto;
+  }
+
+  &:hover {
+    background: $blue-70-hover;
+    color: $text-on-color;
+  }
+}
diff --git a/src/components/Banner/index.js b/src/components/Banner/index.js
new file mode 100644
index 00000000000..b0c13faa0a9
--- /dev/null
+++ b/src/components/Banner/index.js
@@ -0,0 +1,3 @@
+import Banner from './Banner';
+
+export default Banner;
diff --git a/src/components/TypesetStyle/typeset-style.scss b/src/components/TypesetStyle/typeset-style.scss
index 61285c4f718..25031407e9d 100644
--- a/src/components/TypesetStyle/typeset-style.scss
+++ b/src/components/TypesetStyle/typeset-style.scss
@@ -83,9 +83,14 @@
 .cds--typeset-style-controls-sticky {
   align-items: center;
   background-color: $white-0;
+  box-sizing: content-box;
+  position: sticky;
   width: auto;
   z-index: 2;
-  box-sizing: content-box;
+
+  @include breakpoint('md') {
+    flex-wrap: nowrap;
+  }
 }
 
 .cds--typeset-style-controls-sticky-stuck {
@@ -119,22 +124,14 @@
 }
 
 .cds--typeset-style-breakpoint-controls {
-  height: 3rem;
   align-items: center;
   display: flex;
+  height: 3rem;
   overflow-x: auto;
-  white-space: nowrap;
   padding-left: $spacing-05;
   padding-right: 0;
+  white-space: nowrap;
   width: 100%;
-
-  @include breakpoint('md') {
-    width: 62.5%;
-  }
-
-  @include breakpoint('lg') {
-    width: 50%;
-  }
 }
 
 .cds--typeset-style-screen-width-label {
@@ -147,21 +144,16 @@
   height: 3rem;
   border-top: 1px solid $gray-20;
   border-bottom: 1px solid $gray-20;
-  padding-left: $spacing-05;
-  padding-right: $spacing-05;
   display: grid;
   grid-template-columns: auto 1fr auto;
+  padding-left: $spacing-05;
+  padding-right: $spacing-05;
   width: 100%;
 
   @include breakpoint('md') {
     border-top: none;
     border-bottom: none;
     border-left: 1px solid $gray-20;
-    width: 37.5%;
-  }
-
-  @include breakpoint('lg') {
-    width: 50%;
   }
 }
 
diff --git a/src/data/docgen/react-docgen.json b/src/data/docgen/react-docgen.json
index 81cb01cef89..346309fd6eb 100644
--- a/src/data/docgen/react-docgen.json
+++ b/src/data/docgen/react-docgen.json
@@ -4702,6 +4702,82 @@
     }
   },
   "PrimaryButton": { "description": "", "displayName": "PrimaryButton" },
+  "ProgressBar": {
+    "description": "",
+    "displayName": "ProgressBar",
+    "methods": [],
+    "props": {
+      "className": {
+        "type": { "name": "string" },
+        "required": false,
+        "description": "Additional CSS class names."
+      },
+      "helperText": {
+        "type": { "name": "string" },
+        "required": false,
+        "description": "The current progress as a textual representation."
+      },
+      "hideLabel": {
+        "type": { "name": "bool" },
+        "required": false,
+        "description": "Whether the label should be visually hidden."
+      },
+      "label": {
+        "type": { "name": "string" },
+        "required": true,
+        "description": "A label describing the progress bar."
+      },
+      "max": {
+        "type": { "name": "number" },
+        "required": false,
+        "description": "The maximum value.",
+        "defaultValue": { "value": "100", "computed": false }
+      },
+      "size": {
+        "type": {
+          "name": "enum",
+          "value": [
+            { "value": "'small'", "computed": false },
+            { "value": "'big'", "computed": false }
+          ]
+        },
+        "required": false,
+        "description": "Specify the size of the ProgressBar.",
+        "defaultValue": { "value": "'big'", "computed": false }
+      },
+      "status": {
+        "type": {
+          "name": "enum",
+          "value": [
+            { "value": "'active'", "computed": false },
+            { "value": "'finished'", "computed": false },
+            { "value": "'error'", "computed": false }
+          ]
+        },
+        "required": false,
+        "description": "Specify the status.",
+        "defaultValue": { "value": "'active'", "computed": false }
+      },
+      "type": {
+        "type": {
+          "name": "enum",
+          "value": [
+            { "value": "'default'", "computed": false },
+            { "value": "'inline'", "computed": false },
+            { "value": "'indented'", "computed": false }
+          ]
+        },
+        "required": false,
+        "description": "Defines the alignment variant of the progress bar.",
+        "defaultValue": { "value": "'default'", "computed": false }
+      },
+      "value": {
+        "type": { "name": "number" },
+        "required": false,
+        "description": "The current value."
+      }
+    }
+  },
   "ProgressIndicator": {
     "description": "",
     "displayName": "ProgressIndicator",
diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml
index 92b15dbb03d..f0f02fd58b4 100644
--- a/src/data/nav-items.yaml
+++ b/src/data/nav-items.yaml
@@ -6,8 +6,6 @@
       path: /all-about-carbon/who-uses-carbon/
     - title: The Carbon ecosystem
       path: /all-about-carbon/the-carbon-ecosystem/
-    - title: The Carbon team
-      path: /all-about-carbon/the-team/
     - title: Partners
       path: /all-about-carbon/partners/
     - title: Releases
@@ -114,6 +112,8 @@
       path: /components/checkbox/usage/
     - title: Code snippet
       path: /components/code-snippet/usage/
+    - title: Contained list
+      path: /components/contained-list/usage/
     - title: Content switcher
       path: /components/content-switcher/usage/
     - title: Data table
diff --git a/src/gatsby-theme-carbon/components/Footer/index.js b/src/gatsby-theme-carbon/components/Footer/index.js
index abb4d03a1d2..40bab246785 100644
--- a/src/gatsby-theme-carbon/components/Footer/index.js
+++ b/src/gatsby-theme-carbon/components/Footer/index.js
@@ -40,6 +40,7 @@ const links = {
     },
     { href: 'https://www.ibm.com/privacy', linkText: 'Privacy' },
     { href: 'https://www.ibm.com/legal', linkText: 'Terms of use' },
+    { href: 'https://www.ibm.com/able', linkText: 'Accessibility' },
     { href: 'https://www.ibm.com/', linkText: 'IBM.com' },
   ],
   secondCol: [
diff --git a/src/gatsby-theme-carbon/components/Layout.js b/src/gatsby-theme-carbon/components/Layout.js
index bc2836d668a..7804d80765f 100644
--- a/src/gatsby-theme-carbon/components/Layout.js
+++ b/src/gatsby-theme-carbon/components/Layout.js
@@ -7,6 +7,7 @@ import Header from 'gatsby-theme-carbon/src/components/Header';
 import Switcher from 'gatsby-theme-carbon/src/components/Switcher';
 import Footer from 'gatsby-theme-carbon/src/components/Footer';
 import Container from 'gatsby-theme-carbon/src/components/Container';
+import Banner from '../../components/Banner';
 
 import 'gatsby-theme-carbon/src/styles/index.scss';
 import { layout } from '../../styles/Layout.module.scss';
@@ -43,6 +44,7 @@ const Layout = ({
         pageDescription={pageDescription}
         pageKeywords={pageKeywords}
       />
+      {homepage && <Banner />}
       <Header />
       <Switcher />
       <LeftNav homepage={homepage} is404Page={is404} theme={theme} />
diff --git a/src/pages/all-about-carbon/images/ecosystem/carbon-for-ibm-product.svg b/src/pages/all-about-carbon/images/ecosystem/carbon-for-ibm-product.svg
new file mode 100644
index 00000000000..0cea7cf5671
--- /dev/null
+++ b/src/pages/all-about-carbon/images/ecosystem/carbon-for-ibm-product.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+</style>
+<path d="M22.509,12.689l-6-3.55C16.352,9.046,16.176,9,16,9s-0.352,0.046-0.509,0.14l-6,3.55C9.187,12.869,9,13.196,9,13.55v6.9
+	c0,0.354,0.187,0.681,0.491,0.86l6,3.55C15.648,24.954,15.824,25,16,25s0.352-0.046,0.509-0.14l6-3.55
+	C22.813,21.131,23,20.804,23,20.45v-6.9C23,13.196,22.813,12.869,22.509,12.689z M21,19.88l-5,2.958l-5-2.958v-5.76l5-2.958l5,2.958
+	V19.88z"/>
+<path d="M6,20.184V11.07l6.2-3.664l-1.017-1.722L4.491,9.639C4.187,9.819,4,10.146,4,10.5v9.684C2.839,20.598,2,21.698,2,23
+	c0,1.654,1.346,3,3,3s3-1.346,3-3C8,21.698,7.161,20.598,6,20.184z M5,24c-0.551,0-1-0.448-1-1s0.449-1,1-1s1,0.448,1,1
+	S5.551,24,5,24z"/>
+<path d="M27,20c-1.654,0-3,1.346-3,3c0,0.353,0.072,0.687,0.185,1.002L16,28.838l-6.404-3.784l-1.017,1.722l6.912,4.084
+	C15.648,30.954,15.824,31,16,31s0.352-0.046,0.509-0.139l8.96-5.295C25.919,25.835,26.439,26,27,26c1.654,0,3-1.346,3-3
+	S28.654,20,27,20z M27,24c-0.551,0-1-0.448-1-1s0.449-1,1-1s1,0.448,1,1S27.551,24,27,24z"/>
+<path d="M16,7c0.731,0,1.392-0.273,1.913-0.708L26,11.071V18h2v-7.5c0-0.354-0.187-0.681-0.491-0.861l-8.567-5.062
+	C18.978,4.39,19,4.198,19,4c0-1.654-1.346-3-3-3s-3,1.346-3,3S14.346,7,16,7z M16,3c0.551,0,1,0.448,1,1s-0.449,1-1,1s-1-0.448-1-1
+	S15.449,3,16,3z"/>
+<rect id="_x3C_Transparent_Rectangle_x3E__589_" class="st0" width="32" height="32"/>
+</svg>
diff --git a/src/pages/all-about-carbon/images/ecosystem/crop-growth.svg b/src/pages/all-about-carbon/images/ecosystem/crop-growth.svg
new file mode 100644
index 00000000000..79a9eb613d3
--- /dev/null
+++ b/src/pages/all-about-carbon/images/ecosystem/crop-growth.svg
@@ -0,0 +1,11 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <path d="M26,13a4.0045,4.0045,0,0,0,4-4V6H27a3.979,3.979,0,0,0-2.7468,1.1064A6.0041,6.0041,0,0,0,19,4H16V7a6.0066,6.0066,0,0,0,6,6h1V26H11V21h1a4.0045,4.0045,0,0,0,4-4V14H13a3.979,3.979,0,0,0-2.7468,1.1064A6.0041,6.0041,0,0,0,5,12H2v3a6.0066,6.0066,0,0,0,6,6H9v5H2v2H30V26H25V13Zm-1-3a2.002,2.002,0,0,1,2-2h1V9a2.002,2.002,0,0,1-2,2H25ZM11,18a2.002,2.002,0,0,1,2-2h1v1a2.002,2.002,0,0,1-2,2H11ZM9,19H8a4.0045,4.0045,0,0,1-4-4V14H5a4.0045,4.0045,0,0,1,4,4Zm14-8H22a4.0045,4.0045,0,0,1-4-4V6h1a4.0045,4.0045,0,0,1,4,4Z" transform="translate(0 0)"/>
+  <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/>
+</svg>
diff --git a/src/pages/all-about-carbon/partners.mdx b/src/pages/all-about-carbon/partners.mdx
index 8fcd520f79e..f44502cb10f 100644
--- a/src/pages/all-about-carbon/partners.mdx
+++ b/src/pages/all-about-carbon/partners.mdx
@@ -68,108 +68,12 @@ priorities.
 The steering committee engages our respective networks of collaborators and
 resources to consume, contribute to, and innovate Carbon. We feed a virtuous
 cycle in which Carbon advocacy grows by freeing Designers and Developers to
-focus on higher level solutions, which they contribute back into Carbon.  This
+focus on higher level solutions, which they contribute back into Carbon. This
 increases the internal and external eminence of Carbon Design System and IBM.
 
 </Column>
 </Row>
 
-### The people
-
-<Row>
-
-<Profile name="Sophia Levens" title="Executive Director of Design, IBM Sterling; Chair, Steering committee">
-
-![Sophia Levens headshot](/images/team/levens_sophia.png)
-
-</Profile>
-<Profile name="Mike Abbink" title="IBM Distinguished Designer, Carbon">
-
-![Mike Abbink headshot](/images/team/abbink_mike.png)
-
-</Profile>
-<Profile name="Cameron Calder" title="IBM Design Principal, IBM Cloud and Cognitive Software">
-
-![Cameron Calder headshot](/images/team/calder_cameron.png)
-
-</Profile>
-<Profile name="Robin Cannon" title="Global Director of Design Systems, IBM iX">
-
-![Robin Cannon headshot](/images/team/cannon_robin.png)
-
-</Profile>
-<Profile name="Linda Carotenuto" title="Product Manager, Digital Design Squad, Carbon for IBM.com">
-
-![Linda Carotenuto headshot](/images/team/carotenuto_linda.png)
-
-</Profile>
-<Profile name="Jeff Chew" title="Senior Experience Technology Manager, IBM Cloud and Cognitive Software">
-
-![Jeff Chew headshot](/images/team/chew_jeff.png)
-
-</Profile>
-<Profile name="Patrick Clough" title="Design System Enablement Lead, CIO Design, Finance and Operations">
-
-![Patrick Clough headshot](/images/team/clough_patrick.png)
-
-</Profile>
-<Profile name="Shawn Hoglund" title="Experience Lead, CHQ Digital Marketing">
-
-![Shawn Hoglund headshot](/images/team/hoglund_shawn.png)
-
-</Profile>
-<Profile name="David Levinson" title="IBM Design Principal, IBM Cloud and Cognitive Software">
-
-![David Levinson headshot](/images/team/levinson_david.png)
-
-</Profile>
-<Profile name="Alison Joseph" title="Development Manager, Carbon">
-
-![Alison Joseph headshot](/images/team/joseph_alison.png)
-
-</Profile>
-<Profile name="Justin Pomeroy" title="IBM Cloud Kubernetes Service UI">
-
-![Justin Pomeroy headshot](/images/team/pomeroy_justin.png)
-
-</Profile>
-<Profile name="Matt Rosno" title="Product Manager, Carbon">
-
-![Matt Rosno headshot](/images/team/rosno_matt.png)
-
-</Profile>
-<Profile name="Jeannie Servaas" title="IBM Design Principal, Carbon">
-
-![Jeannie Servaas headshot](/images/team/servaas_jean.png)
-
-</Profile>
-<Profile name="JD Speer" title="Design Lead, IBM Storage">
-
-![JD Speer headshot](/images/team/speer_jd.png)
-
-</Profile>
-<Profile name="Marko Thorhauer" title="Executive Creative Director, IBM Design Principal, IBM iX">
-
-![Marko Thorhauer headshot](/images/team/thorhauer_marko.png)
-
-</Profile>
-<Profile name="Diana Tran" title="Visual Design Practice Lead, IBM Sterling">
-
-![Diana Tran headshot](/images/team/tran_diana.png)
-
-</Profile>
-<Profile name="Garrett Vorbeck" title="Front-end Developer, IBM Systems">
-
-![Garrett Vorbeck headshot](/images/team/vorbeck_garrett.png)
-
-</Profile>
-<Profile name="Cathy Zee-Poor" title="Creative Director for IBM Z Systems">
-
-![Cathy Zee-Poor headshot](/images/team/zee-poor_cathy.png)
-
-</Profile>
-</Row>
-
 ## Advisory board
 
 The Carbon advisory board is comprised of executives across the company who
@@ -185,54 +89,3 @@ allocation to support Carbon's work.
   of design standards, guidance, and excellence with business impact.
 - Provide the steering committee with feedback on business needs, to facilitate
   a Carbon roadmap that meets those needs.
-
-### The people
-
-<Row>
-
-<Profile name="Mike Abbink" title="Executive Creative Director, Design, IBM Distinguished Designer">
-
-![Mike Abbink headshot](/images/team/abbink_mike.png)
-
-</Profile>
-<Profile name="Katrina Alcorn" title="General Manager of Design, Cloud and Cognitive Software">
-
-![Katrina Alcorn headshot](/images/team/alcorn_katrina.png)
-
-</Profile>
-<Profile name="Sarah Brooks" title="Director, Design, Design Program Office, IBM Distinguished Designer">
-
-![Sarah Brooks headshot](/images/team/brooks_sarah.png)
-
-</Profile>
-<Profile name="Haidy Francis" title="Design Executive, IBM Security">
-
-![Haidy Francis headshot](/images/team/francis_haidy.png)
-
-</Profile>
-<Profile name="Marc Johlic" title="Product Manager, IBM Accessibility">
-
-![Marc Johlic headshot](/images/team/johlic_marc.png)
-
-</Profile>
-<Profile name="Craig Moser" title="Vice President of Design and Usability, AI Applications">
-
-![Craig Moser headshot](/images/team/moser_craig.png)
-
-</Profile>
-<Profile name="Nigel Prentice" title="Design Director, Digital Growth and Commerce">
-
-![Nigel Prentice headshot](/images/team/prentice_nigel.png)
-
-</Profile>
-<Profile name="Shani Sandy" title="Executive Design Practice Leader, Director IBM Z">
-
-![Shani Sandy headshot](/images/team/sandy_shani.png)
-
-</Profile>
-<Profile name="Billy Seabrook" title="Global Chief Creative Officer, IBM iX">
-
-![Billy Seabrook headshot](/images/team/seabrook_billy.png)
-
-</Profile>
-</Row>
diff --git a/src/pages/all-about-carbon/the-carbon-ecosystem.mdx b/src/pages/all-about-carbon/the-carbon-ecosystem.mdx
index 2753e17f1f8..036c655751f 100755
--- a/src/pages/all-about-carbon/the-carbon-ecosystem.mdx
+++ b/src/pages/all-about-carbon/the-carbon-ecosystem.mdx
@@ -97,32 +97,22 @@ _This content is accessible to IBMers only._
 <Row className="resource-card-group">
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-    subTitle="AI Applications Design"
-    href="https://pages.github.ibm.com/ai-applications/design/"
+    subTitle="Sustainability Software Design"
+    href="https://pages.github.ibm.com/ai-applications/design/ai-apps-pal/about"
     >
 
-![IoT icon](images/ecosystem/watson.svg)
+![Crop growth icon - 2 growing plants](images/ecosystem/crop-growth.svg)
 
   </ResourceCard>
 
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-    subTitle="Carbon for Cloud & Cognitive"
+    subTitle="Carbon for IBM Products"
     href="https://pages.github.ibm.com/cdai-design/pal/"
     >
 
-![Data icon](images/ecosystem/ibm-cloud.svg)
-
-  </ResourceCard>
-</Column>
-<Column colLg={4} colMd={4} noGutterSm>
-  <ResourceCard
-    subTitle="Cloud Pattern and Asset Library"
-    href="https://pages.github.ibm.com/ibmcloud/pal/"
-    >
-
-![Cloud icon](images/ecosystem/ibm-cloud.svg)
+![Carbon for IBM products icon](images/ecosystem/carbon-for-ibm-product.svg)
 
   </ResourceCard>
 </Column>
diff --git a/src/pages/all-about-carbon/the-team.mdx b/src/pages/all-about-carbon/the-team.mdx
deleted file mode 100644
index 198015b6ab9..00000000000
--- a/src/pages/all-about-carbon/the-team.mdx
+++ /dev/null
@@ -1,151 +0,0 @@
----
-title: The Carbon team
-description:
-  Carbon’s designers, developers, and writers provide teams with universal
-  assets—elements, components, patterns, and code—and the guidance for how to
-  design and build with them.
----
-
-<PageDescription>
-
-Carbon’s designers, developers, and writers provide teams with universal
-assets—elements, components, patterns, and code—and the guidance for how to
-design and build with them.
-
-</PageDescription>
-
-## Design system
-
-<Row>
-<Profile name="Abbey Hart" title="Front-end Developer">
-
-![Abbey Hart headshot](/images/team/abbey_hart.png)
-
-</Profile>
-<Profile name="Alessandra Davila" title="Front-end Developer">
-
-![Alessandra Davila headshot](/images/team/davila_ale.png)
-
-</Profile>
-<Profile name="Alison Joseph" title="Development Manager">
-
-![Alison Joseph headshot](/images/team/joseph_alison.png)
-
-</Profile>
-<Profile name="Andrea Cardona" title="Front-end Developer">
-
-![Andrea Cardona headshot](/images/team/cardona_andrea.png)
-
-</Profile>
-<Profile name="Anna Gonzales" title="Senior Visual Designer">
-
-![Anna Gonzales headshot](/images/team/gonzales_anna.png)
-
-</Profile>
-<Profile name="D.A. Kahn" title="Front-end Developer, Accessibility Advocate">
-
-![DA Kahn headshot](/images/team/kahn_da.png)
-
-</Profile>
-<Profile name="Francine Lucca" title="Front-end Developer">
-
-![Francine Lucca headshot](/images/team/lucca_francine.png)
-
-</Profile>
-<Profile name="Jeannie Servaas" title="IBM Design Principal">
-
-![Jeannie Servaas headshot](/images/team/servaas_jean.png)
-
-</Profile>
-<Profile name="John Bister" title="Motion Designer">
-
-![John Bister headshot](/images/team/bister_john.png)
-
-</Profile>
-<Profile name="Josh Black" title="Software Developer, Technical Lead">
-
-![Josh Black headshot](/images/team/black_josh.png)
-
-</Profile>
-<Profile name="Joe Harvey" title="Full-stack Developer">
-
-![Joe Harvey headshot](/images/team/harvey_joe.png)
-
-</Profile>
-<Profile name="Josefina Mancilla"  title="Front-end Developer">
-
-![Josefina Mancilla headshot](/images/team/mancilla_josefina.png)
-
-</Profile>
-<Profile name="Lauren Rice" title="Visual Designer">
-
-![Lauren Rice headshot](/images/team/rice_lauren.png)
-
-</Profile>
-<Profile name="Matt Rosno" title="Product Manager">
-
-![Matt Rosno headshot](/images/team/rosno_matt.png)
-
-</Profile>
-<Profile name="Scott Strubberg" title="Development Manager">
-
-![Scott Strubberg headshot](/images/team/strubberg_scott.png)
-
-</Profile>
-<Profile name="Taylor Jones" title="Software Developer">
-
-![Taylor Jones headshot](/images/team/jones_taylor.png)
-
-</Profile>
-<Profile name="Thy Do" title="Visual Designer">
-
-![Thy Do headshot](/images/team/do_thy.png)
-
-</Profile>
-<Profile name="TJ Egan" title="Front-end Developer">
-
-![TJ Egan headshot](/images/team/egan_tj.png)
-
-</Profile>
-<Profile name="Tracey King" title="Senior Visual Designer">
-
-![Tracey King headshot](/images/team/king_tracey.png)
-
-</Profile>
-</Row>
-
-## Data visualization
-
-<Row>
-<Profile name="Cal Smith" title="Angular Technical Lead">
-
-![Cal Smith headshot](/images/team/smith_cal.png)
-
-</Profile>
-<Profile name="Dean Williams" title="Senior Development Manager">
-
-![Dean Williams headshot](/images/team/williams_dean.png)
-
-</Profile>
-<Profile name="Eliad Moosavi" title="Senior Software Developer, Technical Lead">
-
-![Eliad Moosavi headshot](/images/team/moosavi_eliad.png)
-
-</Profile>
-<Profile name="Natasha Decoste" title="Software Developer">
-
-![Natasha Decoste headshot](/images/team/decoste_natasha.png)
-
-</Profile>
-
-<Profile name="Nina Li" title="Project Manager">
-
-![Nina Li headshot](/images/team/li_nina.png)
-
-</Profile>
-<Profile name="Zvonimir Fras" title="Software Developer">
-
-![Zvonimir Fras headshot](/images/team/fras_zvonimir.png)
-
-</Profile>
-</Row>
diff --git a/src/pages/all-about-carbon/who-uses-carbon.mdx b/src/pages/all-about-carbon/who-uses-carbon.mdx
index f9bddb49961..0f9d1e9874d 100755
--- a/src/pages/all-about-carbon/who-uses-carbon.mdx
+++ b/src/pages/all-about-carbon/who-uses-carbon.mdx
@@ -135,8 +135,7 @@ Here are some ways developers can begin engaging with Carbon.
 - Check out a tutorial in your framework of choice
   ([React](/developing/react-tutorial/overview/),
   [Angular](/developing/angular-tutorial/overview/) or
-  [Vue](/developing/vue-tutorial/overview/)) and get your Developer Essentials
-  badge.
+  [Vue](/developing/vue-tutorial/overview/)).
 
 #### Get the tools
 
diff --git a/src/pages/case-studies/ibm-commerce-platform.mdx b/src/pages/case-studies/ibm-commerce-platform.mdx
index 570f362da5d..da8a55b2820 100755
--- a/src/pages/case-studies/ibm-commerce-platform.mdx
+++ b/src/pages/case-studies/ibm-commerce-platform.mdx
@@ -322,7 +322,7 @@ raised by 5% which has led to a large increase in orders and revenue.
 
 ## Next steps
 
-The Commerce Team is currently working on improvements experience of their
+The Commerce Team is currently working on improving the experience of their
 configuration page. The next round of visual design improvements will focus on
 better aligning their interface with the
 [Carbon for IBM.com](https://www.ibm.com/standards/web/carbon-for-ibm-dotcom//)
diff --git a/src/pages/community/domain-guidance.mdx b/src/pages/community/domain-guidance.mdx
index 40ef4a3e780..a533ff87d50 100755
--- a/src/pages/community/domain-guidance.mdx
+++ b/src/pages/community/domain-guidance.mdx
@@ -33,32 +33,22 @@ _This content is accessible to IBMers only._
 <Row className="resource-card-group">
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-    subTitle="AI Applications Design"
-    href="https://pages.github.ibm.com/ai-applications/design/"
+    subTitle="Sustainability Software Design"
+    href="https://pages.github.ibm.com/ai-applications/design/ai-apps-pal/about"
     >
 
-![IoT icon](images/watson.svg)
+![Crop growth icon - 2 growing plants](images/crop-growth.svg)
 
   </ResourceCard>
 
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-    subTitle="Carbon for Cloud & Cognitive"
+    subTitle="Carbon for IBM Products"
     href="https://pages.github.ibm.com/cdai-design/pal/"
     >
 
-![Data icon](images/ibm-cloud.svg)
-
-  </ResourceCard>
-</Column>
-<Column colLg={4} colMd={4} noGutterSm>
-  <ResourceCard
-    subTitle="Cloud Pattern and Asset Library"
-    href="https://pages.github.ibm.com/ibmcloud/pal/"
-    >
-
-![Cloud icon](images/ibm-cloud.svg)
+![Carbon for IBM products icon](images/carbon-for-ibm-product.svg)
 
   </ResourceCard>
 </Column>
diff --git a/src/pages/community/images/carbon-for-ibm-product.svg b/src/pages/community/images/carbon-for-ibm-product.svg
new file mode 100644
index 00000000000..0cea7cf5671
--- /dev/null
+++ b/src/pages/community/images/carbon-for-ibm-product.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+</style>
+<path d="M22.509,12.689l-6-3.55C16.352,9.046,16.176,9,16,9s-0.352,0.046-0.509,0.14l-6,3.55C9.187,12.869,9,13.196,9,13.55v6.9
+	c0,0.354,0.187,0.681,0.491,0.86l6,3.55C15.648,24.954,15.824,25,16,25s0.352-0.046,0.509-0.14l6-3.55
+	C22.813,21.131,23,20.804,23,20.45v-6.9C23,13.196,22.813,12.869,22.509,12.689z M21,19.88l-5,2.958l-5-2.958v-5.76l5-2.958l5,2.958
+	V19.88z"/>
+<path d="M6,20.184V11.07l6.2-3.664l-1.017-1.722L4.491,9.639C4.187,9.819,4,10.146,4,10.5v9.684C2.839,20.598,2,21.698,2,23
+	c0,1.654,1.346,3,3,3s3-1.346,3-3C8,21.698,7.161,20.598,6,20.184z M5,24c-0.551,0-1-0.448-1-1s0.449-1,1-1s1,0.448,1,1
+	S5.551,24,5,24z"/>
+<path d="M27,20c-1.654,0-3,1.346-3,3c0,0.353,0.072,0.687,0.185,1.002L16,28.838l-6.404-3.784l-1.017,1.722l6.912,4.084
+	C15.648,30.954,15.824,31,16,31s0.352-0.046,0.509-0.139l8.96-5.295C25.919,25.835,26.439,26,27,26c1.654,0,3-1.346,3-3
+	S28.654,20,27,20z M27,24c-0.551,0-1-0.448-1-1s0.449-1,1-1s1,0.448,1,1S27.551,24,27,24z"/>
+<path d="M16,7c0.731,0,1.392-0.273,1.913-0.708L26,11.071V18h2v-7.5c0-0.354-0.187-0.681-0.491-0.861l-8.567-5.062
+	C18.978,4.39,19,4.198,19,4c0-1.654-1.346-3-3-3s-3,1.346-3,3S14.346,7,16,7z M16,3c0.551,0,1,0.448,1,1s-0.449,1-1,1s-1-0.448-1-1
+	S15.449,3,16,3z"/>
+<rect id="_x3C_Transparent_Rectangle_x3E__589_" class="st0" width="32" height="32"/>
+</svg>
diff --git a/src/pages/community/images/crop-growth.svg b/src/pages/community/images/crop-growth.svg
new file mode 100644
index 00000000000..79a9eb613d3
--- /dev/null
+++ b/src/pages/community/images/crop-growth.svg
@@ -0,0 +1,11 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <path d="M26,13a4.0045,4.0045,0,0,0,4-4V6H27a3.979,3.979,0,0,0-2.7468,1.1064A6.0041,6.0041,0,0,0,19,4H16V7a6.0066,6.0066,0,0,0,6,6h1V26H11V21h1a4.0045,4.0045,0,0,0,4-4V14H13a3.979,3.979,0,0,0-2.7468,1.1064A6.0041,6.0041,0,0,0,5,12H2v3a6.0066,6.0066,0,0,0,6,6H9v5H2v2H30V26H25V13Zm-1-3a2.002,2.002,0,0,1,2-2h1V9a2.002,2.002,0,0,1-2,2H25ZM11,18a2.002,2.002,0,0,1,2-2h1v1a2.002,2.002,0,0,1-2,2H11ZM9,19H8a4.0045,4.0045,0,0,1-4-4V14H5a4.0045,4.0045,0,0,1,4,4Zm14-8H22a4.0045,4.0045,0,0,1-4-4V6h1a4.0045,4.0045,0,0,1,4,4Z" transform="translate(0 0)"/>
+  <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/>
+</svg>
diff --git a/src/pages/components/UI-shell-header/accessibility.mdx b/src/pages/components/UI-shell-header/accessibility.mdx
index 2a02551b68c..7b160117048 100644
--- a/src/pages/components/UI-shell-header/accessibility.mdx
+++ b/src/pages/components/UI-shell-header/accessibility.mdx
@@ -19,93 +19,128 @@ import {
 
 <PageDescription>
 
-The UI shell React Carbon component has been tested against the latest
-[W3C Web Content Accessibility Guidelines (WCAG) 2.1 Level A and AA success criteria](https://www.w3.org/TR/WCAG21/)
-and violations have been identified as high priority issues. This document will
-be updated when these accessibility issues are resolved.
+Design annotations are needed for specific instances shown below, but for the
+standard UI shell header component, Carbon already incorporates accessibility.
 
 </PageDescription>
 
 <AnchorLinks>
-  <AnchorLink>Accessibility considerations</AnchorLink>
-  <AnchorLink>Resources</AnchorLink>
-  <AnchorLink>Accessibility testing</AnchorLink>
+
+<AnchorLink>What Carbon provides</AnchorLink>
+<AnchorLink>Design recommendations</AnchorLink>
+<AnchorLink>Development considerations</AnchorLink>
+
 </AnchorLinks>
 
-## Accessibility considerations
-
-1. Accessible Carbon components should be used to create the content that
-   displays within the UI shell.
-2. Labels should be clear and concise.
-3. Titles should be unique and clearly describe the content on the page.
-4. Avoid very long menu option names to facilitate understandability and
-   perceivability.
-5. Do not use the same word or phrase at the beginning of a set of menu items.
-6. Use a unique `id` for each menu item.
-
-## Resources
-
-- [IBM Accessibility Requirements](https://www.ibm.com/able/requirements/requirements/):
-  - [1.3.1 Info and Relationships](https://www.ibm.com/able/requirements/requirements/#1_3_1)
-    (WCAG Success Criteria
-    [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships))
-  - [1.3.2 Meaningful Sequence](https://www.ibm.com/able/requirements/requirements/#1_3_2)
-    (WCAG Success Criteria
-    [1.3.2](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence))
-  - [2.1.1 Keyboard](https://www.ibm.com/able/requirements/requirements/#2_1_1)
-    (WCAG Success Criteria
-    [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard))
-  - [2.4.3 Focus Order](https://www.ibm.com/able/requirements/requirements/#2_4_3)
-    (WCAG Success Criteria
-    [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order))
-  - [2.4.6 Headings and Labels](https://www.ibm.com/able/requirements/requirements/#2_4_6)
-    (WCAG Success Criteria
-    [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels))
-  - [2.4.7 Focus Visible](https://www.ibm.com/able/requirements/requirements/#2_4_7)
-    (WCAG Success Criteria
-    [2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible))
-  - [4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
-    (WCAG Success Criteria
-    [4.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html))
-
-## Accessibility testing
-
-Automated, manual and screen reader accessibility verification test has been
-performed on the UI shell React Carbon component.
-[WCAG 2.1 Level A and AA success criteria](https://www.w3.org/TR/WCAG21/) issues
-have been identified and the list of open accessibility violations is available
-in the Carbon component GitHub repository.
-
-### Automated test
+## What Carbon provides
+
+The Carbon header bakes in keyboard interaction, including a
+skip-to-main-content mechanism. Carbon also supports assistive technologies such
+as screen readers by setting labeling and page structure.
+
+### Keyboard interaction
+
+Each element in the header can be reached by the `Tab` key. A "Skip to main
+content" link appears when a keyboard user first tabs into the page. Links and
+icons are activated by `Enter`. Icons can also be activated by `Space`.
+
+<Row>
+<Column colLg={8}>
+
+![example of header keyboard interaction](images/header-accessibility-1.png)
+
+<Caption>
+  Pressing the Tab key reveals a 'Skip to main' link and then moves between
+  other header elements.
+</Caption>
+
+</Column>
+</Row>
+
+### Regions
+
+<Row>
+<Column colLg={8}>
+
+![example of header keyboard interaction](images/header-accessibility-2.png)
+
+<Caption>
+  Carbon applies a header region around the whole UI shell header.
+</Caption>
+
+</Column>
+</Row>
+
+### Labeling
+
+Carbon provides default names for each icon-only button in the header, and these
+names are revealed on hover or focus. Interactions for some header components
+are covered under other component topics such as
+[search](/components/search/usage),
+[notifications](/components/notifications/usage), and the
+[UI shell right panel switcher](components/UI-shell-right-panel/usage/#switcher).
+
+<Row>
+<Column colLg={8}>
+
+![annotation showing search, help, notification and app switcher icons](images/header-accessibility-3.png)
+
+<Caption>
+  Carbon provides default names for its icon-only components and reveals them on
+  hover or focus.
+</Caption>
+
+</Column>
+</Row>
+
+## Design recommendations
+
+For every product, there should be a one-time design exercise to annotate the UI
+shell keyboard interaction. This is an important step to carry out, since header
+functionality and component names vary significantly between products, even
+though they appear similar until interacted with. Annotating expected behavior
+increases consistent implementation. Where the product does not deviate from the
+standard Carbon implementation, it can merely be annotated that the behaviour
+matches what is in the 'How Carbon works' section.
 
 <Row>
-  <Column noGutterSm>
-    <StructuredListWrapper>
-      <StructuredListHead>
-        <StructuredListRow head>
-          <StructuredListCell head>
-            Automated test environment
-          </StructuredListCell>
-          <StructuredListCell head>Results</StructuredListCell>
-        </StructuredListRow>
-      </StructuredListHead>
-      <StructuredListBody>
-        <StructuredListRow>
-          <StructuredListCell>
-            - macOS Mojave version 10.14.2 with VoiceOver
-            <br />
-            - Chrome version 77.0.3865.90
-            <br />
-            - Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM
-            Accessibility WCAG 2.1 Sept. 2019 Ruleset
-            <br />- Carbon React version 7.7.1
-          </StructuredListCell>
-          <StructuredListCell>
-            <strong>DAP test:</strong>
-            <br />- No violations
-          </StructuredListCell>
-        </StructuredListRow>
-      </StructuredListBody>
-    </StructuredListWrapper>
-  </Column>
+<Column colLg={8}>
+
+![Annotated header region stating 'Header functionality, roles and names match Carbon defaults'](images/header-accessibility-4.png)
+
+<Caption>
+  Annotate the header, even if your design matches the default Carbon UI shell
+  header behavior.
+</Caption>
+
+</Column>
 </Row>
+
+Once a product-specific header annotation exists, individual product pages only
+need to annotate the header if something differs.
+
+Where the header deviates from the default Carbon behavior or labeling, it
+should be annotated. Such annotations could call out different labels for icons
+or indicate interaction changes such as keyboard navigation.
+
+<Row>
+<Column colLg={8}>
+
+![an annotation stating the search bar is persistently expanded](images/header-accessibility-5.png)
+
+<Caption>
+  Annotate if the design modifies the default keyboard or component interaction.
+</Caption>
+
+</Column>
+</Row>
+
+## Development considerations
+
+Keep these considerations in mind if you are modifying Carbon or creating a
+custom component.
+
+- Carbon uses the HTML 5 `header` component instead of an ARIA landmark to set
+  the region.
+- Carbon includes the "Skip to main content" link as the first item on the page
+  with a `tabindex="0"`, but hides it through CSS until it receives focus.
diff --git a/src/pages/components/UI-shell-header/images/header-accessibility-1.png b/src/pages/components/UI-shell-header/images/header-accessibility-1.png
new file mode 100644
index 00000000000..06f130bc743
Binary files /dev/null and b/src/pages/components/UI-shell-header/images/header-accessibility-1.png differ
diff --git a/src/pages/components/UI-shell-header/images/header-accessibility-2.png b/src/pages/components/UI-shell-header/images/header-accessibility-2.png
new file mode 100644
index 00000000000..bd4f6af04de
Binary files /dev/null and b/src/pages/components/UI-shell-header/images/header-accessibility-2.png differ
diff --git a/src/pages/components/UI-shell-header/images/header-accessibility-3.png b/src/pages/components/UI-shell-header/images/header-accessibility-3.png
new file mode 100644
index 00000000000..2ae89c5cf76
Binary files /dev/null and b/src/pages/components/UI-shell-header/images/header-accessibility-3.png differ
diff --git a/src/pages/components/UI-shell-header/images/header-accessibility-4.png b/src/pages/components/UI-shell-header/images/header-accessibility-4.png
new file mode 100644
index 00000000000..37fb8805ba6
Binary files /dev/null and b/src/pages/components/UI-shell-header/images/header-accessibility-4.png differ
diff --git a/src/pages/components/UI-shell-header/images/header-accessibility-5.png b/src/pages/components/UI-shell-header/images/header-accessibility-5.png
new file mode 100644
index 00000000000..9659b47e1c2
Binary files /dev/null and b/src/pages/components/UI-shell-header/images/header-accessibility-5.png differ
diff --git a/src/pages/components/accordion/images/accordion-accessibility-3.png b/src/pages/components/accordion/images/accordion-accessibility-3.png
index f143fae7e1e..58666df7665 100644
Binary files a/src/pages/components/accordion/images/accordion-accessibility-3.png and b/src/pages/components/accordion/images/accordion-accessibility-3.png differ
diff --git a/src/pages/components/accordion/images/accordion-accessibility-4.png b/src/pages/components/accordion/images/accordion-accessibility-4.png
index 87b06deae57..3ffd606aced 100644
Binary files a/src/pages/components/accordion/images/accordion-accessibility-4.png and b/src/pages/components/accordion/images/accordion-accessibility-4.png differ
diff --git a/src/pages/components/accordion/images/accordion-click-target.png b/src/pages/components/accordion/images/accordion-click-target.png
index 33a8e28d882..067ac445192 100644
Binary files a/src/pages/components/accordion/images/accordion-click-target.png and b/src/pages/components/accordion/images/accordion-click-target.png differ
diff --git a/src/pages/components/accordion/images/accordion-flush-spec.png b/src/pages/components/accordion/images/accordion-flush-spec.png
new file mode 100644
index 00000000000..3cb14b98336
Binary files /dev/null and b/src/pages/components/accordion/images/accordion-flush-spec.png differ
diff --git a/src/pages/components/accordion/images/accordion-flush.png b/src/pages/components/accordion/images/accordion-flush.png
new file mode 100644
index 00000000000..4dc3648c38d
Binary files /dev/null and b/src/pages/components/accordion/images/accordion-flush.png differ
diff --git a/src/pages/components/accordion/images/accordion-placement-1.png b/src/pages/components/accordion/images/accordion-placement-1.png
index 1157011d186..fb016efaec2 100644
Binary files a/src/pages/components/accordion/images/accordion-placement-1.png and b/src/pages/components/accordion/images/accordion-placement-1.png differ
diff --git a/src/pages/components/accordion/images/accordion-style-1.png b/src/pages/components/accordion/images/accordion-style-1.png
index 6288b399b5d..6c684c56d1a 100644
Binary files a/src/pages/components/accordion/images/accordion-style-1.png and b/src/pages/components/accordion/images/accordion-style-1.png differ
diff --git a/src/pages/components/accordion/images/accordion-style-2.png b/src/pages/components/accordion/images/accordion-style-2.png
index 5897b520d67..d0dbbf3871e 100644
Binary files a/src/pages/components/accordion/images/accordion-style-2.png and b/src/pages/components/accordion/images/accordion-style-2.png differ
diff --git a/src/pages/components/accordion/images/accordion-style-3.png b/src/pages/components/accordion/images/accordion-style-3.png
index 3135900e8d9..0d1d2860452 100644
Binary files a/src/pages/components/accordion/images/accordion-style-3.png and b/src/pages/components/accordion/images/accordion-style-3.png differ
diff --git a/src/pages/components/accordion/images/accordion-style-4.png b/src/pages/components/accordion/images/accordion-style-4.png
new file mode 100644
index 00000000000..a0c242be868
Binary files /dev/null and b/src/pages/components/accordion/images/accordion-style-4.png differ
diff --git a/src/pages/components/accordion/images/accordion-style-5.png b/src/pages/components/accordion/images/accordion-style-5.png
new file mode 100644
index 00000000000..bf852937ac3
Binary files /dev/null and b/src/pages/components/accordion/images/accordion-style-5.png differ
diff --git a/src/pages/components/accordion/images/accordion-style-6.png b/src/pages/components/accordion/images/accordion-style-6.png
new file mode 100644
index 00000000000..5cf7f604d15
Binary files /dev/null and b/src/pages/components/accordion/images/accordion-style-6.png differ
diff --git a/src/pages/components/accordion/images/accordion-style-7.png b/src/pages/components/accordion/images/accordion-style-7.png
new file mode 100644
index 00000000000..e5408a913af
Binary files /dev/null and b/src/pages/components/accordion/images/accordion-style-7.png differ
diff --git a/src/pages/components/accordion/style.mdx b/src/pages/components/accordion/style.mdx
index bc32233540c..dea02068bf3 100755
--- a/src/pages/components/accordion/style.mdx
+++ b/src/pages/components/accordion/style.mdx
@@ -21,24 +21,36 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Interactive states
 
-| Element | State    | Property   | Color token         |
-| ------- | -------- | ---------- | ------------------- |
-| Header  | Hover    | background | `$background-hover` |
-|         | Focus    | border     | `$focus`            |
-|         | Disabled | border-top | `$border-subtle`    |
-| Title   | Disabled | background | `$text-disabled`    |
-| Icon    | Disabled | fill       | `$icon-disabled`    |
+| Element | State    | Property   | Color token      |
+| ------- | -------- | ---------- | ---------------- |
+| Header  | Hover    | background | `$layer-hover`   |
+|         | Focus    | border     | `$focus`         |
+|         | Disabled | border-top | `$border-subtle` |
+| Title   | Disabled | background | `$text-disabled` |
+| Icon    | Disabled | fill       | `$icon-disabled` |
 
 <Row>
 <Column colLg={12}>
 
-![accordion interactive states](images/accordion-style-2.png)
+<Tabs>
+
+<Tab label="Default">
+
+![default accordion alignment interactive states](images/accordion-style-2.png)
+
+</Tab>
+
+<Tab label="Flush">
+
+![flush accordion alignment interactive states](images/accordion-style-3.png)
+
+</Tab>
+
+</Tabs>
 
 </Column>
 </Row>
 
-<Caption>Examples of enabled, hover, focus, and disabled states</Caption>
-
 ## Typography
 
 All accordion titles are set in sentence case. See the accordion
@@ -54,27 +66,80 @@ All accordion titles are set in sentence case. See the accordion
 There is no max-height for an open panel but an accordion may
 [scroll](/components/accordion/usage#scrolling-content) if constrained by
 vertical space. The width of an accordion varies based on the content, layout,
-and page design. The icon used in the header is a `chevron`.
+and page design. The icon used in the header is a `chevron`. The accordion has
+an indented default alignment but can also be set to have a flush alignment.
+
+### Default alignment
 
 | Element | Property       | px/rem   | Spacing token |
 | ------- | -------------- | -------- | ------------- |
 | Header  | height         | 40 / 2.5 | –             |
 | Item    | border-top     | 1        | –             |
-| Icon    | size           | 16 / 1   | –             |
-|         | padding-right  | 16 / 1   | `$spacing-05` |
 | Title   | margin-left    | 16 / 1   | `$spacing-05` |
-| Panel   | padding-right  | 25%      | –             |
-|         | padding-top    | 8 / 0.5  | `$spacing-03` |
+| Panel   | padding-top    | 8 / 0.5  | `$spacing-03` |
+|         | padding-bottom | 24 / 1.5 | `$spacing-06` |
+|         | padding-right  | 25%      | –             |
 |         | padding-left   | 16 / 1   | `$spacing-05` |
+| Icon    | size           | 16 / 1   | –             |
+|         | padding-right  | 16 / 1   | `$spacing-05` |
+
+<div className="image--fixed">
+
+![Structure measurements for default accordion alignment](images/accordion-style-4.png)
+
+</div>
+
+<Caption>
+  Structure measurements for default accordion alignment. | px / rem
+</Caption>
+
+<br />
+
+<div className="image--fixed">
+
+![Spacing measurements for default accordion alignment](images/accordion-style-5.png)
+
+</div>
+
+<Caption>
+  Spacing measurements for default accordion alignment. | px / rem
+</Caption>
+
+### Flush alignment
+
+| Element | Property       | px/rem   | Spacing token |
+| ------- | -------------- | -------- | ------------- |
+| Header  | height         | 40 / 2.5 | –             |
+| Item    | border-top     | 1        | –             |
+| Title   | margin-left    | 0        | –             |
+| Panel   | padding-top    | 8 / 0.5  | `$spacing-03` |
 |         | padding-bottom | 24 / 1.5 | `$spacing-06` |
+|         | padding-right  | 25%      | –             |
+|         | padding-left   | 0        | –             |
+| Icon    | size           | 16 / 1   | –             |
+|         | padding-right  | 0        | –             |
+
+<div className="image--fixed">
+
+![Structure measurements for flush accordion alignment](images/accordion-style-6.png)
+
+</div>
+
+<Caption>
+  Structure measurements for flush accordion alignment. | px / rem
+</Caption>
+
+<br />
 
 <div className="image--fixed">
 
-![Structure and spacing measurements for accordion](images/accordion-style-3.png)
+![Spacing measurements for flush accordion alignment](images/accordion-style-7.png)
 
 </div>
 
-<Caption>Structure and spacing measurements for accordion | px / rem</Caption>
+<Caption>
+  Spacing measurements for flush accordion alignment. | px / rem
+</Caption>
 
 ### Margin right
 
diff --git a/src/pages/components/accordion/usage.mdx b/src/pages/components/accordion/usage.mdx
index dfcb596cd67..7e2a6e17f3c 100755
--- a/src/pages/components/accordion/usage.mdx
+++ b/src/pages/components/accordion/usage.mdx
@@ -20,6 +20,7 @@ associated sections of content.
 <AnchorLink>Formatting</AnchorLink>
 <AnchorLink>Content</AnchorLink>
 <AnchorLink>Behaviors</AnchorLink>
+<AnchorLink>Modifiers</AnchorLink>
 <AnchorLink>Related</AnchorLink>
 <AnchorLink>References</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
@@ -38,7 +39,7 @@ user not noticing or reading all of the included content. If a user is likely to
 read all of the content then don't use an accordion as it adds the burden of an
 extra click; instead use a full scrolling page with normal headers.
 
-### When to use:
+### When to use
 
 - To organize related information.
 - To shorten pages and reduce scrolling when content is not crucial to read in
@@ -147,8 +148,12 @@ such as a side panel or tile.
 
 #### Grid placement
 
-When placing an accordion on the 2x Grid the indented title aligns to the grid
-columns and the top and bottom borders hang in the gutter.
+When placing an accordion on the 2x Grid with its default alignment, the
+indented title and content align to the grid columns, and the top and bottom
+borders hang into the gutter. However, the accordion can be modified to have a
+[flush alignment](https://carbondesignsystem.com/components/accordion/usage#modifiers)
+where the titles and content are instead flush aligned with the top and bottom
+borders having 0px padding.
 
 <Row>
 <Column colLg={8}>
@@ -246,6 +251,35 @@ Users can trigger a state change by pressing `Enter` or `Space` while the header
 area has focus. For additional keyboard interactions, see the
 [accessibility tab](/components/accordion/accessibility#keyboard-interactions).
 
+## Modifiers
+
+#### Flush alignment
+
+Use flush alignment when designing within smaller spaces on a page such as side
+panels or sidebars to achieve better text alignment with other content. Flush
+alignment is also used to help avoid converging rule lines between components
+that are close to each other on a page.
+
+<Row>
+<Column colLg={8}>
+
+![accordion flush alignment](images/accordion-flush.png)
+
+</Column>
+</Row>
+
+Flush alignment places the row title and chevron icons with 0px padding, keeping
+them flush to the rule dividers. For hover and focus interactive states, the
+left and right padding receives an additional 16px padding.
+
+<Row>
+<Column colLg={8}>
+
+![accordion flush alignment spec](images/accordion-flush-spec.png)
+
+</Column>
+</Row>
+
 ## Related
 
 The following components are additional ways to organize content. Consider the
@@ -257,7 +291,7 @@ very short content might do better in a structured list.
 - [Progress indicator](/components/progress-indicator/usage)
 - [Structured list](/components/structured-list/usage)
 - [Tabs](/components/tabs/usage)
-- Tree view
+- [Tree view](/components/tree-view/usage)
 
 ## References
 
diff --git a/src/pages/components/breadcrumb/usage.mdx b/src/pages/components/breadcrumb/usage.mdx
index 8a109cc837e..771a93dd60c 100755
--- a/src/pages/components/breadcrumb/usage.mdx
+++ b/src/pages/components/breadcrumb/usage.mdx
@@ -81,13 +81,15 @@ type used should be consistent across a product.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}
-  >{`
+  >
+    {`
 <Breadcrumb noTrailingSlash>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
   <BreadcrumbItem href="/">Breadcrumb 2</BreadcrumbItem>
   <BreadcrumbItem isCurrentPage href="/">Breadcrumb 3</BreadcrumbItem>
 </Breadcrumb>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="breadcrumb"
     links={{
@@ -99,13 +101,15 @@ type used should be consistent across a product.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}
-  >{`
+  >
+    {`
 <Breadcrumb>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
   <BreadcrumbItem href="/">Breadcrumb 2</BreadcrumbItem>
   <BreadcrumbItem href="/">Breadcrumb 3</BreadcrumbItem>
 </Breadcrumb>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx
index 20fd6f21a1d..b65668316a0 100755
--- a/src/pages/components/button/usage.mdx
+++ b/src/pages/components/button/usage.mdx
@@ -113,9 +113,11 @@ import { Add } from '@carbon/react/icons';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}
-  >{`
+  >
+    {`
       <Button>Button</Button>
-    `}</ComponentVariant>
+    `}
+  </ComponentVariant>
   <ComponentVariant
     id="button-with-icon"
     knobs={{
@@ -130,9 +132,11 @@ import { Add } from '@carbon/react/icons';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}
-  >{`
+  >
+    {`
       <Button renderIcon={Add}>Button</Button>
-    `}</ComponentVariant>
+    `}
+  </ComponentVariant>
   <ComponentVariant
     id="icon-only"
     knobs={{}}
@@ -145,11 +149,13 @@ import { Add } from '@carbon/react/icons';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
     }}
-  >{`
+  >
+    {`
      <IconButton align='top' label='Icon button' className='cds--btn--icon-only'>
        <Add size={16}/>
      </IconButton>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/checkbox/usage.mdx b/src/pages/components/checkbox/usage.mdx
index cb2abe854ad..df8cbe9f26f 100755
--- a/src/pages/components/checkbox/usage.mdx
+++ b/src/pages/components/checkbox/usage.mdx
@@ -109,13 +109,15 @@ set whereas radio buttons allow the user to select only one option.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default',
     }}
-  >{`
+  >
+    {`
 <fieldset className="cds--fieldset">
   <legend className="cds--label">Checkbox heading</legend>
   <Checkbox labelText="Checkbox label" id="checked" />
   <Checkbox labelText="Checkbox label" id="checked-2" />
 </fieldset>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/code-snippet/code.mdx b/src/pages/components/code-snippet/code.mdx
index c61cd4355ef..bd96fff8581 100755
--- a/src/pages/components/code-snippet/code.mdx
+++ b/src/pages/components/code-snippet/code.mdx
@@ -113,11 +113,13 @@ import {
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
     }}
-  >{`
+  >
+    {`
       <CodeSnippet type="multi">
       {\`${codeSnippet}\`}
       </CodeSnippet>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="code-snippet-inline"
     knobs={{ CodeSnippet: ['disabled'] }}
diff --git a/src/pages/components/code-snippet/usage.mdx b/src/pages/components/code-snippet/usage.mdx
index 16b6a0ec0a7..f7a188344b7 100644
--- a/src/pages/components/code-snippet/usage.mdx
+++ b/src/pages/components/code-snippet/usage.mdx
@@ -89,9 +89,11 @@ length use cases—inline, single line, and multi-line.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line',
     }}
-  >{`
+  >
+    {`
     <CodeSnippet type="single">${codeSnippetSingle}</CodeSnippet>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="code-snippet-multi"
     knobs={{ CodeSnippet: ['light'] }}
@@ -104,11 +106,13 @@ length use cases—inline, single line, and multi-line.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
     }}
-  >{`
+  >
+    {`
     <CodeSnippet type="multi">
     {\`${codeSnippet}\`}
     </CodeSnippet>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="code-snippet-inline"
     knobs={{ CodeSnippet: ['light'] }}
@@ -121,9 +125,11 @@ length use cases—inline, single line, and multi-line.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--inline',
     }}
-  >{`
+  >
+    {`
     <CodeSnippet type="inline">${codeSnippetSingle}</CodeSnippet>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/contained-list/accessibility.mdx b/src/pages/components/contained-list/accessibility.mdx
new file mode 100644
index 00000000000..7fc2e6635fd
--- /dev/null
+++ b/src/pages/components/contained-list/accessibility.mdx
@@ -0,0 +1,26 @@
+---
+title: Contained list
+description:
+  Contained lists group content that is similar or related and can contain
+  read-only or interactive information.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+<PageDescription>
+
+Design annotations are needed for specific instances shown below, but for the
+standard accordion component, Carbon already incorporates accessibility.
+
+</PageDescription>
+
+<InlineNotification>
+
+This page is underdevelopment. Please check back later for updates.
+
+</InlineNotification>
+
+<AnchorLinks>
+  <AnchorLink>What Carbon provides</AnchorLink>
+  <AnchorLink>Design recommendations</AnchorLink>
+  <AnchorLink>Development considerations</AnchorLink>
+</AnchorLinks>
diff --git a/src/pages/components/contained-list/code.mdx b/src/pages/components/contained-list/code.mdx
new file mode 100644
index 00000000000..a3a5baaa1a7
--- /dev/null
+++ b/src/pages/components/contained-list/code.mdx
@@ -0,0 +1,32 @@
+---
+title: Contained list
+description:
+  Contained lists group content that is similar or related and can contain
+  read-only or interactive information.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+<PageDescription>
+
+Preview the contained list component with the React live demo. For detailed code
+usage documentation, see the Storybooks for each framework below.
+
+</PageDescription>
+
+## Documentation
+
+<InlineNotification>
+
+**Coming soon:** The storybook code for contained list is underdevelopment and
+will be available soon.
+
+</InlineNotification>
+
+## Live demo
+
+<InlineNotification>
+
+**Coming soon:** The live demo for contained list is underdevelopment and will
+be available soon.
+
+</InlineNotification>
diff --git a/src/pages/components/contained-list/images/contained-list-style-1.png b/src/pages/components/contained-list/images/contained-list-style-1.png
new file mode 100644
index 00000000000..bf68eef2d1f
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-style-1.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-style-2.png b/src/pages/components/contained-list/images/contained-list-style-2.png
new file mode 100644
index 00000000000..781b2713697
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-style-2.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-style-3.png b/src/pages/components/contained-list/images/contained-list-style-3.png
new file mode 100644
index 00000000000..ce68fc6c6bc
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-style-3.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-style-4.png b/src/pages/components/contained-list/images/contained-list-style-4.png
new file mode 100644
index 00000000000..1aa5ee7ede9
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-style-4.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-style-5.png b/src/pages/components/contained-list/images/contained-list-style-5.png
new file mode 100644
index 00000000000..94e9f919a79
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-style-5.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-style-6.png b/src/pages/components/contained-list/images/contained-list-style-6.png
new file mode 100644
index 00000000000..986789dfd25
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-style-6.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-style-7.png b/src/pages/components/contained-list/images/contained-list-style-7.png
new file mode 100644
index 00000000000..dbdba305954
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-style-7.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-style-8.png b/src/pages/components/contained-list/images/contained-list-style-8.png
new file mode 100644
index 00000000000..83bb92de7f2
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-style-8.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-usage-1.png b/src/pages/components/contained-list/images/contained-list-usage-1.png
new file mode 100644
index 00000000000..ea5a037082b
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-usage-1.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-usage-10.png b/src/pages/components/contained-list/images/contained-list-usage-10.png
new file mode 100644
index 00000000000..f45dc8fd252
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-usage-10.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-usage-11.png b/src/pages/components/contained-list/images/contained-list-usage-11.png
new file mode 100644
index 00000000000..5948979f73c
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-usage-11.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-usage-2.png b/src/pages/components/contained-list/images/contained-list-usage-2.png
new file mode 100644
index 00000000000..5208cf4ea2f
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-usage-2.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-usage-3.png b/src/pages/components/contained-list/images/contained-list-usage-3.png
new file mode 100644
index 00000000000..ae21e79629f
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-usage-3.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-usage-4.png b/src/pages/components/contained-list/images/contained-list-usage-4.png
new file mode 100644
index 00000000000..3300fa97fe1
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-usage-4.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-usage-5.png b/src/pages/components/contained-list/images/contained-list-usage-5.png
new file mode 100644
index 00000000000..acb16606c7d
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-usage-5.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-usage-6.png b/src/pages/components/contained-list/images/contained-list-usage-6.png
new file mode 100644
index 00000000000..eb4cec4ecbe
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-usage-6.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-usage-7.png b/src/pages/components/contained-list/images/contained-list-usage-7.png
new file mode 100644
index 00000000000..7c1a3fda024
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-usage-7.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-usage-8.png b/src/pages/components/contained-list/images/contained-list-usage-8.png
new file mode 100644
index 00000000000..5a616f48232
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-usage-8.png differ
diff --git a/src/pages/components/contained-list/images/contained-list-usage-9.png b/src/pages/components/contained-list/images/contained-list-usage-9.png
new file mode 100644
index 00000000000..105f608bca3
Binary files /dev/null and b/src/pages/components/contained-list/images/contained-list-usage-9.png differ
diff --git a/src/pages/components/contained-list/style.mdx b/src/pages/components/contained-list/style.mdx
new file mode 100644
index 00000000000..0e8ded20e4b
--- /dev/null
+++ b/src/pages/components/contained-list/style.mdx
@@ -0,0 +1,153 @@
+---
+title: Contained list
+description:
+  Contained lists group content that is similar or related and can contain
+  read-only or interactive information.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+## Color
+
+| Element          | Property         | Color token        |
+| ---------------- | ---------------- | ------------------ |
+| Title: on page   | text color       | `$text-primary`    |
+|                  | background-color | `$background`      |
+| Title: disclosed | text color       | `$text-secondary`  |
+|                  | background-color | `$layer`\*         |
+| Item             | text color       | `$text-primary`    |
+|                  | background-color | transparent        |
+| Icon (optional)  | svg              | `$icon-primary`    |
+| Row divider      | border-bottom    | `$border-subtle`\* |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+![Enabled states for contained list variants](images/contained-list-style-1.png)
+
+</Column>
+</Row>
+
+<Caption>Example of enabled states for contained list variants.</Caption>
+
+### Interactive states
+
+| Element  | Property         | Color token        |
+| -------- | ---------------- | ------------------ |
+| Hover    | background-color | `$layer-hover`\*   |
+| Focus    | border           | `$focus`           |
+| Active   | background-color | `$layer-active`\*  |
+| Disabled | text color       | `$text-disabled`   |
+|          | border           | `$border-disabled` |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<Row>
+<Column colLg={12}>
+
+![States for contained list item rows](images/contained-list-style-2.png)
+
+</Column>
+</Row>
+
+<Caption>Example of states for contained list item rows.</Caption>
+
+<br />
+
+<Row>
+<Column colLg={12}>
+
+![States for contained list inline actions](images/contained-list-style-3.png)
+
+</Column>
+</Row>
+
+<Caption>Example of states for contained list inline actions.</Caption>
+
+## Typography
+
+All contained list text should be set in sentence case, with only the first word
+in a phrase and any proper nouns capitalized.
+
+| Element          | Font-size (px/rem) | Font-weight    | Type token            |
+| ---------------- | ------------------ | -------------- | --------------------- |
+| Title: on page   | 14 / 0.875         | SemiBold / 600 | `$heading-compact-01` |
+| Title: disclosed | 12 / 0.75          | Regular / 400  | `$label-01`           |
+| Item             | 14 / 0.875         | Regular / 400  | `$body-01`            |
+
+## Structure
+
+| Element           | Property                    | px / rem | Spacing token |
+| ----------------- | --------------------------- | -------- | ------------- |
+| Header: on page   | height                      | 32 / 2   | `$spacing-07` |
+|                   | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| Header: disclosed | height                      | 48 / 3   | `$spacing-09` |
+|                   | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| Item              | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| Icon (optional)   | height, width               | 16 / 1   | —             |
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for the on page list variant.](images/contained-list-style-4.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for the on page list variant. | px / rem
+</Caption>
+
+<br />
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for the disclosed list variant.](images/contained-list-style-5.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for the disclosed list variant. | px / rem
+</Caption>
+
+<br />
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for height and width of row content.](images/contained-list-style-6.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for height and width of row content. | px /
+  rem
+</Caption>
+
+<br />
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for padding and rule alignment.](images/contained-list-style-7.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for padding and rule alignment. | px / rem
+</Caption>
+
+<br />
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for inline actions.](images/contained-list-style-8.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for inline actions. | px / rem
+</Caption>
diff --git a/src/pages/components/contained-list/usage.mdx b/src/pages/components/contained-list/usage.mdx
new file mode 100644
index 00000000000..8869fea0eb1
--- /dev/null
+++ b/src/pages/components/contained-list/usage.mdx
@@ -0,0 +1,274 @@
+---
+title: Contained list
+description:
+  Contained lists group content that is similar or related and can contain
+  read-only or interactive information.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+<PageDescription>
+
+Contained lists group content that is similar or related and can contain
+read-only or interactive information.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Overview</AnchorLink>
+<AnchorLink>Live demo</AnchorLink>
+<AnchorLink>Formatting</AnchorLink>
+<AnchorLink>Content</AnchorLink>
+<AnchorLink>On page list</AnchorLink>
+<AnchorLink>Disclosed list</AnchorLink>
+<AnchorLink>Modifiers</AnchorLink>
+<AnchorLink>Related</AnchorLink>
+<AnchorLink>Feedback</AnchorLink>
+
+</AnchorLinks>
+
+## Overview
+
+Contained lists are commonly used inside of containers like cards, sidebars, and
+disclosure situations. These lists have one header column of information with
+multiple list item rows. Contained lists help you organize related content
+within smaller spaces within a user interface and allow you to include inline
+actions and interactive elements.
+
+<Row>
+<Column colLg={8}>
+
+![Contained list variants](images/contained-list-usage-1.png)
+
+</Column>
+</Row>
+
+### When to use
+
+- Use on a page inside of small spaces or in disclosure situations.
+- Use when including interactive elements or inline actions in a list.
+- To logically group items that follow the same content structure.
+
+### When not to use
+
+- Do not use if the list content needs to be nested more than one level deep and
+  becomes overly complex and lengthy. For these situations, use the
+  [data table](https://carbondesignsystem.com/components/data-table/usage/)
+  component instead.
+- Do not use if the list needs to contain multiple column headers, instead use
+  the
+  [structured list](https://carbondesignsystem.com/components/structured-list/usage/)
+  component.
+
+### Variants
+
+| Variant                           | Purpose                                                                                                                                                |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [On page list](#on-page-list)     | Use this variant when placing the list in a persistent context like the main area in the user interface, such as on a card or in a sidebar.            |
+| [Disclosed list](#disclosed-list) | Use this variant when the list is shown within a temporary context, for example within a popover or layer that is elevated by a drop shadow or border. |
+
+## Live demo
+
+<InlineNotification>
+
+**Coming soon:** The live demo for contained list is underdevelopment and will
+be available soon.
+
+</InlineNotification>
+
+## Formatting
+
+### Anatomy
+
+Contained lists are made up of a list header, list title, list item rows, and
+optional interactive elements.
+
+<Row>
+<Column colLg={8}>
+
+![Contained list anatomy](images/contained-list-usage-2.png)
+
+</Column>
+</Row>
+
+1. **List header:** Area to group the succeeding list items.
+2. **List title:** Descriptive name for the group of list items.
+3. **List item:** The content with in a list item row.
+4. **Interactive element** (optional): An element that you can interact with or
+   treat as an inline action, such as links, icons, and toggles.
+
+### Sizing
+
+#### List header area
+
+The list header height is always fixed. The on page variant style list header
+has a height of 48px. The disclosed variant style list header has a height of
+32px.
+
+<Row>
+<Column colLg={8}>
+
+![Contained list header height](images/contained-list-usage-3.png)
+
+</Column>
+</Row>
+
+#### List item row
+
+List item row heights can vary based on the amount of content in each row. The
+content in each row is flexible. By default, each list item row height is 48px
+for one line of content.
+
+<Row>
+<Column colLg={8}>
+
+![Contained list row height](images/contained-list-usage-4.png)
+
+</Column>
+</Row>
+
+### Alignment
+
+Contained lists can have multiple sections and stack on top of each other. When
+stacking multiple on page lists, there should be 16px padding ($spacing-05)
+between each list. When stacking multiple disclosed lists, stack them to be
+flush with 0px padding between each other.
+
+<Row>
+<Column colLg={8}>
+
+![Contained list alignment](images/contained-list-usage-5.png)
+
+</Column>
+</Row>
+
+### Scrolling
+
+Contained list header areas can be sticky and fixed in place while the list item
+rows scroll underneath. This functionality is optional depending on the use
+case.
+
+<Row>
+<Column colLg={8}>
+
+![Contained list scrolling](images/contained-list-usage-6.png)
+
+</Column>
+</Row>
+
+## Content
+
+### Main elements
+
+#### List title
+
+- A list title is a descriptive name for the group of list items.
+- List titles should be short and clear, ranging from one to three words to
+  describe the list group.
+- Use sentence-case capitalization.
+
+#### List item
+
+- List item text can vary but the structure of the content should be similar per
+  row in the same contained list.
+- List item text can have multiple lines of concise content, but should not
+  contain multiple paragraphs of lengthy information.
+- Use sentence-case capitalization.
+
+## On page list
+
+Use the on page list variant when placing the list on the general page of a user
+interface. On page lists typically appear in smaller spaces, like in a card or
+sidebars. The on page list styling has no visible background header with fixed
+information. If there are scrolling capabitlies, the header will remain sticky
+and have a background layer to differentiate it from the list item rows
+scrolling beneath it.
+
+### Placement
+
+On page lists should span the entire width of the container they are placed
+within to make the best use of space and to achieve vertical type alignment with
+other text and components on the page.
+
+<Row>
+<Column colLg={8}>
+
+![Contained list on page variant in context image](images/contained-list-usage-7.png)
+
+</Column>
+</Row>
+
+## Disclosed list
+
+Use the disclosed list variant when placing the list within a temporary context,
+like a popover or disclosure, which is typically accompanied by an enclosed
+border or drop shadow. The disclosed list styling has a background layer
+underneath the header. Each header has a smaller height than the on page list
+styling to take up less real estate in the smaller and scrollable spaces it
+usually appears in.
+
+### Placement
+
+Disclosed lists should span the entire width of the container they are placed
+within to make the best use of space.
+
+<Row>
+<Column colLg={8}>
+
+![Contained list disclosed variant in context image](images/contained-list-usage-8.png)
+
+</Column>
+</Row>
+
+## Modifiers
+
+### Inline actions
+
+Contained lists can include inline actions, such as closing or dismissing row
+items in the list.
+
+<Row>
+<Column colLg={8}>
+
+![Contained list inline actions](images/contained-list-usage-9.png)
+
+</Column>
+</Row>
+
+### Interactive elements
+
+Contained lists can have interactive elements in headers and rows, such as
+links, icon buttons, and toggles.
+
+<Row>
+<Column colLg={8}>
+
+![Contained list interactive elements](images/contained-list-usage-10.png)
+
+</Column>
+</Row>
+
+### Clickable rows
+
+Contained lists support clickable rows as an optional feature.
+
+<Row>
+<Column colLg={8}>
+
+![Contained list clickable rows](images/contained-list-usage-11.png)
+
+</Column>
+</Row>
+
+## Related
+
+- [Accordion](https://carbondesignsystem.com/components/accordion/usage/)
+- [Data table](https://carbondesignsystem.com/components/data-table/usage/)
+- [List](https://carbondesignsystem.com/components/list/usage/)
+- [Structured list](https://carbondesignsystem.com/components/structured-list/usage/)
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and
+leaving any other comments on
+[GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).
diff --git a/src/pages/components/content-switcher/usage.mdx b/src/pages/components/content-switcher/usage.mdx
index a5e172873a1..00e51db12e6 100755
--- a/src/pages/components/content-switcher/usage.mdx
+++ b/src/pages/components/content-switcher/usage.mdx
@@ -87,13 +87,15 @@ binary decision.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default',
     }}
-  >{`
+  >
+    {`
 <ContentSwitcher onChange={console.log}>
   <Switch name={'first'} text='First section' />
   <Switch name={'second'} text='Second section' />
   <Switch name={'third'} text='Third section' />
 </ContentSwitcher>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/date-picker/usage.mdx b/src/pages/components/date-picker/usage.mdx
index 206e54aa1de..6c07312f562 100755
--- a/src/pages/components/date-picker/usage.mdx
+++ b/src/pages/components/date-picker/usage.mdx
@@ -86,7 +86,8 @@ You can customize the time picker's format depending on location or need.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
     }}
-  >{`
+  >
+    {`
     <DatePicker dateFormat="m/d/Y" datePickerType="simple">
       <DatePickerInput
         id="date-picker-default-id"
@@ -95,7 +96,8 @@ You can customize the time picker's format depending on location or need.
         type="text"
       />
     </DatePicker>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="single-calendar"
     knobs={{
@@ -111,7 +113,8 @@ You can customize the time picker's format depending on location or need.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--single-with-calendar',
     }}
-  >{`
+  >
+    {`
     <DatePicker dateFormat="m/d/Y" datePickerType="single">
       <DatePickerInput
         id="date-picker-calendar-id"
@@ -120,7 +123,8 @@ You can customize the time picker's format depending on location or need.
         type="text"
       />
     </DatePicker>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="range-calendar"
     knobs={{
@@ -136,7 +140,8 @@ You can customize the time picker's format depending on location or need.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--range-with-calendar',
     }}
-  >{`
+  >
+    {`
     <DatePicker dateFormat="m/d/Y" datePickerType="range">
       <DatePickerInput
         id="date-picker-range-start"
@@ -151,7 +156,8 @@ You can customize the time picker's format depending on location or need.
         type="text"
       />
     </DatePicker>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="time-picker"
     knobs={{
@@ -166,7 +172,8 @@ You can customize the time picker's format depending on location or need.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
     }}
-  >{`
+  >
+    {`
     <TimePicker id="time-picker">
       <TimePickerSelect id="time-picker-select-1">
         <SelectItem value="AM" text="AM" />
@@ -177,7 +184,8 @@ You can customize the time picker's format depending on location or need.
         <SelectItem value="Time zone 2" text="Time zone 2" />
       </TimePickerSelect>
     </TimePicker>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/dropdown/code.mdx b/src/pages/components/dropdown/code.mdx
index b8f272ff5e1..ae53d3f85bf 100755
--- a/src/pages/components/dropdown/code.mdx
+++ b/src/pages/components/dropdown/code.mdx
@@ -97,7 +97,8 @@ documentation, see the Storybooks for each framework below.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <Dropdown
           ariaLabel="Dropdown"
@@ -107,7 +108,8 @@ documentation, see the Storybooks for each framework below.
           titleText="Dropdown title"
         />
       </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="combo-box"
     knobs={{
@@ -122,7 +124,8 @@ documentation, see the Storybooks for each framework below.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-combo-box--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <ComboBox
           ariaLabel="ComboBox"
@@ -132,7 +135,8 @@ documentation, see the Storybooks for each framework below.
           titleText="Combo box title"
         />
       </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="multiselect"
     knobs={{
@@ -147,7 +151,8 @@ documentation, see the Storybooks for each framework below.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <MultiSelect
           ariaLabel="MultiSelect"
@@ -157,7 +162,8 @@ documentation, see the Storybooks for each framework below.
           titleText="Multiselect title"
         />
       </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="filter-multiselect"
     knobs={{ FilterableMultiSelect: ['size', 'disabled', 'invalid', 'warn'] }}
@@ -170,7 +176,8 @@ documentation, see the Storybooks for each framework below.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <FilterableMultiSelect
           ariaLabel="Filterable MultiSelect"
@@ -180,7 +187,8 @@ documentation, see the Storybooks for each framework below.
           titleText="Filterable multiselect title"
         />
       </div>
- `}</ComponentVariant>
+ `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Sample data
diff --git a/src/pages/components/dropdown/usage.mdx b/src/pages/components/dropdown/usage.mdx
index 08f639183a6..21ab0928fa7 100755
--- a/src/pages/components/dropdown/usage.mdx
+++ b/src/pages/components/dropdown/usage.mdx
@@ -104,7 +104,8 @@ functionality—dropdown, multiselect, and combo box.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <Dropdown
           ariaLabel="Dropdown"
@@ -114,7 +115,8 @@ functionality—dropdown, multiselect, and combo box.
           titleText="Dropdown title"
         />
       </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="combo-box"
     knobs={{
@@ -129,7 +131,8 @@ functionality—dropdown, multiselect, and combo box.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-combo-box--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <ComboBox
           ariaLabel="ComboBox"
@@ -139,7 +142,8 @@ functionality—dropdown, multiselect, and combo box.
           titleText="Combo box title"
         />
       </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="multiselect"
     knobs={{
@@ -154,7 +158,8 @@ functionality—dropdown, multiselect, and combo box.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <MultiSelect
           ariaLabel="MultiSelect"
@@ -164,7 +169,8 @@ functionality—dropdown, multiselect, and combo box.
           titleText="Multiselect title"
         />
       </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="filter-multiselect"
     knobs={{ FilterableMultiSelect: ['size', 'disabled', 'invalid', 'warn'] }}
@@ -177,7 +183,8 @@ functionality—dropdown, multiselect, and combo box.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <FilterableMultiSelect
           ariaLabel="Filterable MultiSelect"
@@ -187,7 +194,8 @@ functionality—dropdown, multiselect, and combo box.
           titleText="Filterable multiselect title"
         />
       </div>
- `}</ComponentVariant>
+ `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/file-uploader/usage.mdx b/src/pages/components/file-uploader/usage.mdx
index 89c2315e4f9..a287d12285e 100755
--- a/src/pages/components/file-uploader/usage.mdx
+++ b/src/pages/components/file-uploader/usage.mdx
@@ -84,7 +84,8 @@ file uploader.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}
-  >{`
+  >
+    {`
       <div className="cds--file__container">
         <FileUploader
           accept={[
@@ -99,7 +100,8 @@ file uploader.
           labelTitle="Upload"
         />
       </div>
-    `}</ComponentVariant>
+    `}
+  </ComponentVariant>
   <ComponentVariant
     id="drag-and-drop"
     knobs={{
@@ -114,7 +116,8 @@ file uploader.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}
-  >{`
+  >
+    {`
       <div className="cds--file__container">
         <strong className='cds--file--label'>Account photo</strong>
         <p className='cds--label-description'>
@@ -129,7 +132,8 @@ file uploader.
           tabIndex={0}
         />
       </div>
-    `}</ComponentVariant>
+    `}
+  </ComponentVariant>
   <ComponentVariant
     id="upload-states"
     knobs={{
@@ -144,11 +148,13 @@ file uploader.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}
-  >{`
+  >
+    {`
       <div className="cds--file__container">
         <FileUploaderItem name='color.jpg' errorSubject='File size exceeds limits' errorBody='500 kb max file size. Select a new file and try again.'/>
       </div>
-    `}</ComponentVariant>
+    `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/form/usage.mdx b/src/pages/components/form/usage.mdx
index 56718a9f73d..07b5ea09a6e 100755
--- a/src/pages/components/form/usage.mdx
+++ b/src/pages/components/form/usage.mdx
@@ -63,7 +63,8 @@ do you gain by collecting this information?
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-input--form-item',
     }}
-  >{`
+  >
+    {`
   <Form>
   <Stack gap={7}>
     <TextInput
@@ -110,7 +111,8 @@ do you gain by collecting this information?
   </Button>
   </Stack>
 </Form>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/inline-loading/usage.mdx b/src/pages/components/inline-loading/usage.mdx
index 78f9fa37c7c..18b75d096b0 100755
--- a/src/pages/components/inline-loading/usage.mdx
+++ b/src/pages/components/inline-loading/usage.mdx
@@ -72,9 +72,11 @@ table, after a primary or secondary button click, or even in a modal.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-inline-loading--default',
     }}
-  >{`
+  >
+    {`
     <InlineLoading description="Loading..." />
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/link/usage.mdx b/src/pages/components/link/usage.mdx
index 8ec18a013ef..1ac9c3b0036 100755
--- a/src/pages/components/link/usage.mdx
+++ b/src/pages/components/link/usage.mdx
@@ -79,9 +79,11 @@ be used for navigational actions.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-link--default',
     }}
-  >{`
+  >
+    {`
   <Link href="#">Link</Link>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/list/usage.mdx b/src/pages/components/list/usage.mdx
index 8ddff62b6bf..a51cee597e6 100755
--- a/src/pages/components/list/usage.mdx
+++ b/src/pages/components/list/usage.mdx
@@ -58,7 +58,8 @@ between list items.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-list--ordered',
     }}
-  >{`
+  >
+    {`
     <OrderedList>
       <ListItem>
         Ordered list level 1
@@ -81,7 +82,8 @@ between list items.
         Ordered list level 1
       </ListItem>
     </OrderedList>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="unordered"
     links={{
@@ -93,7 +95,8 @@ between list items.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-list--unordered',
     }}
-  >{`
+  >
+    {`
       <UnorderedList>
         <ListItem>
           Unordered list level 1
@@ -116,7 +119,8 @@ between list items.
           Unordered list level 1
         </ListItem>
       </UnorderedList>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Variants
diff --git a/src/pages/components/loading/usage.mdx b/src/pages/components/loading/usage.mdx
index dfce9ba2f03..0dd8530b2a4 100755
--- a/src/pages/components/loading/usage.mdx
+++ b/src/pages/components/loading/usage.mdx
@@ -54,11 +54,13 @@ three seconds.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-loading--default',
     }}
-  >{`
+  >
+    {`
     <Loading
       description="Active loading indicator" withOverlay={false}
     />
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx
index ec8259fef36..e16d0a02908 100755
--- a/src/pages/components/modal/usage.mdx
+++ b/src/pages/components/modal/usage.mdx
@@ -127,7 +127,8 @@ destructive or irreversible then use a transactional danger modal.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-modal--default',
     }}
-  >{`
+  >
+    {`
     <ModalWrapper
       hasScrollingContent
       size="sm"
@@ -162,7 +163,8 @@ destructive or irreversible then use a transactional danger modal.
         </p>
       </>
     </ModalWrapper>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="with-one-button"
     links={{
@@ -174,7 +176,8 @@ destructive or irreversible then use a transactional danger modal.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-modal--single-button',
     }}
-  >{`
+  >
+    {`
     <ModalWrapper
       buttonTriggerText="Launch modal"
       modalHeading="Modal heading"
@@ -183,7 +186,8 @@ destructive or irreversible then use a transactional danger modal.
     >
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
     </ModalWrapper>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="with-three-buttons"
     links={{
@@ -195,7 +199,8 @@ destructive or irreversible then use a transactional danger modal.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-modal--three-buttons',
     }}
-  >{`
+  >
+    {`
     <ModalWrapper
       buttonTriggerText="Launch modal"
       modalHeading="Modal heading"
@@ -215,7 +220,8 @@ destructive or irreversible then use a transactional danger modal.
     >
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
     </ModalWrapper>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/notification/usage.mdx b/src/pages/components/notification/usage.mdx
index fda61f5df87..66c15179f3f 100755
--- a/src/pages/components/notification/usage.mdx
+++ b/src/pages/components/notification/usage.mdx
@@ -91,7 +91,8 @@ although some product teams also support banners and notification centers.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--toast',
     }}
-  >{`
+  >
+    {`
     <div>
       <ToastNotification
         caption="00:00:00 AM"
@@ -101,7 +102,8 @@ although some product teams also support banners and notification centers.
         title="Notification title"
       />
     </div>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="inline"
     knobs={{
@@ -116,7 +118,8 @@ although some product teams also support banners and notification centers.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--inline',
     }}
-  >{`
+  >
+    {`
   <div>
     <InlineNotification
       kind="info"
@@ -126,7 +129,8 @@ although some product teams also support banners and notification centers.
       title="Notification title"
     />
   </div>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/number-input/usage.mdx b/src/pages/components/number-input/usage.mdx
index b7b96e909ef..96d5b8e9eb4 100755
--- a/src/pages/components/number-input/usage.mdx
+++ b/src/pages/components/number-input/usage.mdx
@@ -52,7 +52,8 @@ or decrease an incremental value.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
     }}
-  >{`
+  >
+    {`
     <NumberInput
       helperText="Optional helper text"
       id="tj-input"
@@ -63,7 +64,8 @@ or decrease an incremental value.
       step={10}
       value={50}
     />
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="mobile-number-input"
     links={{
@@ -75,7 +77,8 @@ or decrease an incremental value.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
     }}
-  >{`
+  >
+    {`
         <NumberInput
           isMobile
           helperText="Optional helper text"
@@ -87,7 +90,8 @@ or decrease an incremental value.
           step={10}
           value={50}
         />
-    `}</ComponentVariant>
+    `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/overflow-menu/usage.mdx b/src/pages/components/overflow-menu/usage.mdx
index a0ca4d90771..59435d60661 100755
--- a/src/pages/components/overflow-menu/usage.mdx
+++ b/src/pages/components/overflow-menu/usage.mdx
@@ -51,7 +51,8 @@ there is a space constraint.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-overflow-menu--default',
     }}
-  >{`
+  >
+    {`
     <OverflowMenu
       data-floating-menu-container
       selectorPrimaryFocus={'.optionOne'}
@@ -68,7 +69,8 @@ there is a space constraint.
       <OverflowMenuItem itemText="Option 3" />
       <OverflowMenuItem itemText="Option 4" hasDivider/>
     </OverflowMenu>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/pagination/usage.mdx b/src/pages/components/pagination/usage.mdx
index 7ec6b273edf..0a69391daf7 100755
--- a/src/pages/components/pagination/usage.mdx
+++ b/src/pages/components/pagination/usage.mdx
@@ -58,7 +58,8 @@ The default number displayed will vary depending on the context.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-pagination--default',
     }}
-  >{`
+  >
+    {`
   <div style={{width: '800px'}}>
     <Pagination
       backwardText="Previous page"
@@ -77,7 +78,8 @@ The default number displayed will vary depending on the context.
       totalItems={103}
     />
   </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Best practices
diff --git a/src/pages/components/progress-bar/ComponentDemo.js b/src/pages/components/progress-bar/ComponentDemo.js
new file mode 100644
index 00000000000..74906951cee
--- /dev/null
+++ b/src/pages/components/progress-bar/ComponentDemo.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import ComponentDemo from '../../../components/ComponentDemo';
+import ComponentVariant from '../../../components/ComponentDemo/ComponentVariant';
+
+const components = [
+  {
+    id: 'determinate',
+    label: 'Determinate',
+  },
+  {
+    id: 'indeterminate',
+    label: 'Indeterminate',
+  },
+];
+
+const knobs = {
+  ProgressBar: ['hideLabel', 'size', 'status', 'type'],
+};
+
+const links = {
+  React:
+    'https://react.carbondesignsystem.com/?path=/story/components-progressbar--playground',
+};
+
+function PopoverComponentDemo() {
+  return (
+    <ComponentDemo
+      components={components}
+    >
+      <ComponentVariant id="determinate" knobs={knobs} links={links}>
+        {`
+<div style={{ width: '75%' }}>
+  <ProgressBar
+    label="Progress bar label"
+    helperText="Optional helper text"
+    value={75}
+  />
+</div>
+        `}
+      </ComponentVariant>
+      <ComponentVariant id="indeterminate" knobs={knobs} links={links}>
+        {`
+<div style={{ width: '75%' }}>
+  <ProgressBar
+    label="Progress bar label"
+    helperText="Optional helper text"
+  />
+</div>
+        `}
+      </ComponentVariant>
+    </ComponentDemo>
+  );
+}
+
+export default PopoverComponentDemo;
diff --git a/src/pages/components/progress-bar/code.mdx b/src/pages/components/progress-bar/code.mdx
index 1ad83adb6fa..ce42ae6a365 100644
--- a/src/pages/components/progress-bar/code.mdx
+++ b/src/pages/components/progress-bar/code.mdx
@@ -6,6 +6,8 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+import ProgressBarComponentDemo from './ComponentDemo';
+
 <PageDescription>
 
 Preview the progress bar component with the React live demo. For detailed code
@@ -25,3 +27,7 @@ usage documentation, see the Storybooks for each framework below.
   </ResourceCard>
 </Column>
 </Row>
+
+## Live demo
+
+<ProgressBarComponentDemo />
diff --git a/src/pages/components/progress-bar/usage.mdx b/src/pages/components/progress-bar/usage.mdx
index fcfcc651a0b..babc7f5e027 100644
--- a/src/pages/components/progress-bar/usage.mdx
+++ b/src/pages/components/progress-bar/usage.mdx
@@ -6,6 +6,8 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+import ProgressBarComponentDemo from './ComponentDemo';
+
 import localVideo from './videos/progress-bar-usage-4.mp4';
 import localPoster from './images/progress-bar-usage-4.png';
 
@@ -35,6 +37,7 @@ long a user will be waiting.
 <AnchorLinks>
 
 <AnchorLink>Overview</AnchorLink>
+<AnchorLink>Live demo</AnchorLink>
 <AnchorLink>Variants</AnchorLink>
 <AnchorLink>Formatting</AnchorLink>
 <AnchorLink>Content</AnchorLink>
@@ -62,6 +65,10 @@ how long a process will take, or if a request is being executed.
 </Column>
 </Row>
 
+## Live demo
+
+<ProgressBarComponentDemo />
+
 #### When to use
 
 - For a long operation or a process that can take a considerable or unknown
diff --git a/src/pages/components/progress-indicator/usage.mdx b/src/pages/components/progress-indicator/usage.mdx
index f3700eb5f33..aec8baca524 100755
--- a/src/pages/components/progress-indicator/usage.mdx
+++ b/src/pages/components/progress-indicator/usage.mdx
@@ -52,7 +52,8 @@ percentage of completeness as each task is completed.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-progress-indicator--default',
     }}
-  >{`
+  >
+    {`
     <div className="some-container">
       <ProgressIndicator>
         <ProgressStep
@@ -83,7 +84,8 @@ percentage of completeness as each task is completed.
         />
       </ProgressIndicator>
     </div>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Best practices
diff --git a/src/pages/components/radio-button/usage.mdx b/src/pages/components/radio-button/usage.mdx
index 9034deb5c5c..e022c0bfef8 100755
--- a/src/pages/components/radio-button/usage.mdx
+++ b/src/pages/components/radio-button/usage.mdx
@@ -95,7 +95,8 @@ checkboxes allow the user to select multiple items.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-radio-button--default',
     }}
-  >{`
+  >
+    {`
   <FormGroup
   legendText="Radio button heading"
 >
@@ -122,7 +123,8 @@ checkboxes allow the user to select multiple items.
     />
   </RadioButtonGroup>
 </FormGroup>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/search/usage.mdx b/src/pages/components/search/usage.mdx
index 4145ef5a1ff..72faeb498a4 100755
--- a/src/pages/components/search/usage.mdx
+++ b/src/pages/components/search/usage.mdx
@@ -51,12 +51,14 @@ to aid the user in finding content.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-search--default',
     }}
-  >{`
+  >
+    {`
 <Search
   id="search-1"
   placeHolderText="Search"
 />
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Variants
diff --git a/src/pages/components/select/usage.mdx b/src/pages/components/select/usage.mdx
index 79f9e94298f..f466fef61b7 100755
--- a/src/pages/components/select/usage.mdx
+++ b/src/pages/components/select/usage.mdx
@@ -68,7 +68,8 @@ while the dropdown component can be styled as needed.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-select--default',
     }}
-  >{`
+  >
+    {`
 <Select
   defaultValue="placeholder-item"
   helperText="Optional helper text"
@@ -105,7 +106,8 @@ while the dropdown component can be styled as needed.
     />
   </SelectItemGroup>
 </Select>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Variants
diff --git a/src/pages/components/slider/usage.mdx b/src/pages/components/slider/usage.mdx
index 82d2d6f8ba6..2c589426e61 100755
--- a/src/pages/components/slider/usage.mdx
+++ b/src/pages/components/slider/usage.mdx
@@ -67,7 +67,8 @@ value range.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-slider--default',
     }}
-  >{`
+  >
+    {`
   <div className="some-container">
 <Slider
   ariaLabelInput="Label for slider value"
@@ -80,7 +81,8 @@ value range.
   value={50}
 />
 </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Interactions
diff --git a/src/pages/components/structured-list/usage.mdx b/src/pages/components/structured-list/usage.mdx
index 922ce23f5f8..e311b4df684 100755
--- a/src/pages/components/structured-list/usage.mdx
+++ b/src/pages/components/structured-list/usage.mdx
@@ -81,7 +81,8 @@ import { CheckmarkFilled } from '@carbon/icons-react';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
     }}
-  >{`
+  >
+    {`
     <StructuredListWrapper ariaLabel="Structured list">
       <StructuredListHead>
         <StructuredListRow
@@ -124,7 +125,8 @@ import { CheckmarkFilled } from '@carbon/icons-react';
         </StructuredListRow>
       </StructuredListBody>
     </StructuredListWrapper>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="select-structured-list"
     links={{
@@ -136,7 +138,8 @@ import { CheckmarkFilled } from '@carbon/icons-react';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
     }}
-  >{`
+  >
+    {`
     <StructuredListWrapper selection ariaLabel="Structured list">
       <StructuredListHead>
         <StructuredListRow
@@ -231,7 +234,8 @@ import { CheckmarkFilled } from '@carbon/icons-react';
         </StructuredListRow>
       </StructuredListBody>
     </StructuredListWrapper>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/tabs/usage.mdx b/src/pages/components/tabs/usage.mdx
index 19962a8ec8c..cfadb9b5f77 100755
--- a/src/pages/components/tabs/usage.mdx
+++ b/src/pages/components/tabs/usage.mdx
@@ -130,7 +130,8 @@ such as modals, cards, or side panels.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tabs--default',
     }}
-  >{`
+  >
+    {`
 <div style={{ width: '50%' }}>
   <Tabs>
     <TabList aria-label="List of tabs" contained>
@@ -153,7 +154,8 @@ such as modals, cards, or side panels.
     </TabPanels>
   </Tabs>
 </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/tag/usage.mdx b/src/pages/components/tag/usage.mdx
index 894fa1b0bf1..5a4dbdcb53a 100755
--- a/src/pages/components/tag/usage.mdx
+++ b/src/pages/components/tag/usage.mdx
@@ -74,7 +74,8 @@ that particular category.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tag--default',
     }}
-  >{`
+  >
+    {`
   <>
 <Tag type="red" title="Clear Filter"> Red </Tag>
 <Tag type="magenta" title="Clear Filter"> Magenta </Tag>
@@ -87,7 +88,8 @@ that particular category.
 <Tag type="cool-gray" title="Clear Filter"> Cool gray </Tag>
 <Tag type="warm-gray" title="Clear Filter"> Warm gray </Tag>
 </>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Feedback
diff --git a/src/pages/components/text-input/usage.mdx b/src/pages/components/text-input/usage.mdx
index 4f9b165c961..ae496194a01 100755
--- a/src/pages/components/text-input/usage.mdx
+++ b/src/pages/components/text-input/usage.mdx
@@ -95,7 +95,8 @@ longer, multi-line entries.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
     }}
-  >{`
+  >
+    {`
     <div>
       <TextInput
         helperText="Optional helper text"
@@ -105,7 +106,8 @@ longer, multi-line entries.
         placeholder="Optional placeholder text"
       />
     </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="password-input"
     links={{
@@ -117,7 +119,8 @@ longer, multi-line entries.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
     }}
-  >{`
+  >
+    {`
     <div>
     <TextInput.PasswordInput
       helperText="Optional helper text"
@@ -129,7 +132,8 @@ longer, multi-line entries.
       showPasswordLabel="Show password"
     />
     </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="text-area"
     knobs={{
@@ -144,7 +148,8 @@ longer, multi-line entries.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-textarea--default',
     }}
-  >{`
+  >
+    {`
     <div>
     <TextArea
       cols={50}
@@ -156,7 +161,8 @@ longer, multi-line entries.
       rows={4}
     />
     </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Text input
diff --git a/src/pages/components/tile/usage.mdx b/src/pages/components/tile/usage.mdx
index c860a09d97a..36c05d5094a 100755
--- a/src/pages/components/tile/usage.mdx
+++ b/src/pages/components/tile/usage.mdx
@@ -108,11 +108,13 @@ modules. Here are some common use cases for when to use tiles:
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tile--default',
     }}
-  >{`
+  >
+    {`
     <Tile>
       Default tile
     </Tile>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="clickable-tile"
     knobs={{
@@ -127,13 +129,15 @@ modules. Here are some common use cases for when to use tiles:
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tile--clickable',
     }}
-  >{`
+  >
+    {`
     <ClickableTile
       href="#"
     >
       Clickable tile
     </ClickableTile>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="radio-tile"
     knobs={{
@@ -148,7 +152,8 @@ modules. Here are some common use cases for when to use tiles:
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tile--single-selectable',
     }}
-  >{`
+  >
+    {`
     <TileGroup
       defaultSelected="default-selected"
       legend="Radio tile group"
@@ -179,7 +184,8 @@ modules. Here are some common use cases for when to use tiles:
         Radio tile
       </RadioTile>
     </TileGroup>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="selectable-tile"
     knobs={{
@@ -194,7 +200,8 @@ modules. Here are some common use cases for when to use tiles:
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tile--single-selectable',
     }}
-  >{`
+  >
+    {`
     <div
       aria-label="selectable tiles"
       role="group"
@@ -227,7 +234,8 @@ modules. Here are some common use cases for when to use tiles:
         Multiselect tile
       </SelectableTile>
     </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="expandable-tile"
     knobs={{
@@ -242,7 +250,8 @@ modules. Here are some common use cases for when to use tiles:
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tile--expandable',
     }}
-  >{`
+  >
+    {`
     <ExpandableTile
       tabIndex={0}
       tileCollapsedIconText="Interact to Expand tile"
@@ -261,7 +270,8 @@ modules. Here are some common use cases for when to use tiles:
         </div>
       </TileBelowTheFoldContent>
     </ExpandableTile>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Tile variants
diff --git a/src/pages/components/toggle/usage.mdx b/src/pages/components/toggle/usage.mdx
index ee2ae078db4..aedd383b1fe 100755
--- a/src/pages/components/toggle/usage.mdx
+++ b/src/pages/components/toggle/usage.mdx
@@ -62,14 +62,16 @@ user “flips the switch”. They are commonly used for “on/off” switches.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
     }}
-  >{`
+  >
+    {`
     <Toggle
       aria-label="toggle button"
       defaultToggled
       id="toggle-1"
       labelText="Label text"
     />
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="small-toggle"
     links={{
@@ -81,14 +83,16 @@ user “flips the switch”. They are commonly used for “on/off” switches.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
     }}
-  >{`
+  >
+    {`
     <ToggleSmall
       aria-label="toggle button"
       defaultToggled
       id="toggle-2"
       labelText="Label text"
     />
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Content
diff --git a/src/pages/components/toggletip/usage.mdx b/src/pages/components/toggletip/usage.mdx
index abb9e6eca72..cb0e0a8067e 100644
--- a/src/pages/components/toggletip/usage.mdx
+++ b/src/pages/components/toggletip/usage.mdx
@@ -117,7 +117,8 @@ import { Information } from '@carbon/icons-react';
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-toggletip--default',
     }}
-  >{`
+  >
+    {`
     <Toggletip>
       <ToggletipButton label="Additional information">
         <Information />
@@ -126,7 +127,8 @@ import { Information } from '@carbon/icons-react';
         <p>Custom content here</p>
       </ToggletipContent>
     </Toggletip>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ### Anatomy
diff --git a/src/pages/components/tooltip/usage.mdx b/src/pages/components/tooltip/usage.mdx
index 2b97da17e0d..82ab582f9e9 100755
--- a/src/pages/components/tooltip/usage.mdx
+++ b/src/pages/components/tooltip/usage.mdx
@@ -179,7 +179,8 @@ import { Information } from '@carbon/react/icons';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--default',
     }}
-  >{`
+  >
+    {`
     <Tooltip
       align="bottom"
       label="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."
@@ -190,7 +191,8 @@ import { Information } from '@carbon/react/icons';
         <Information />
       </button>
     </Tooltip>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="definition-tooltip"
     knobs={{
@@ -205,13 +207,15 @@ import { Information } from '@carbon/react/icons';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--definition',
     }}
-  >{`
+  >
+    {`
     <DefinitionTooltip
       definition="Brief description of the dotted, underlined word above."
     >
       Definition Tooltip
     </DefinitionTooltip>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/designing/get-started.mdx b/src/pages/designing/get-started.mdx
index b84fe0cd21b..445bfef1b8a 100644
--- a/src/pages/designing/get-started.mdx
+++ b/src/pages/designing/get-started.mdx
@@ -38,14 +38,14 @@ as ensuring consistency between design assets and code.
 Head on over to the [Design kits](/designing/kits/sketch) section and follow the
 install instructions to get set up.
 
-| Design tool  | Carbon version                                                    | Status                         | Maintainer          |
-| ------------ | ----------------------------------------------------------------- | ------------------------------ | ------------------- |
-| **Figma**    | [v11](https://carbondesignsystem.com/designing/kits/figma)        | Beta available – _IBMers only_ | Carbon Figma Guild  |
-|              | [v10](https://v10.carbondesignsystem.com/designing/kits/figma)    | Available – _limited supportt_ | Carbon Figma Guild  |
-| **Sketch**   | [v11](https://carbondesignsystem.com/designing/kits/sketch)       | Available                      | Carbon Sketch Guild |
-|              | [v10](https://v10.carbondesignsystem.com/designing/kits/sketch)   | Available – _limited support_  | Carbon core team    |
-| **Adobe XD** | [v11](https://carbondesignsystem.com/designing/kits/adobe-xd)     | Available                      | Carbon core team    |
-|              | [v10](https://v10.carbondesignsystem.com/designing/kits/adobe-xd) | Available – _limited support_  | Carbon core team    |
+| Design tool  | Carbon version                                                    | Status                        | Maintainer          |
+| ------------ | ----------------------------------------------------------------- | ----------------------------- | ------------------- |
+| **Figma**    | [v11](https://carbondesignsystem.com/designing/kits/figma)        | Available                     | Carbon Figma Guild  |
+|              | [v10](https://v10.carbondesignsystem.com/designing/kits/figma)    | Available – _limited support_ | Carbon Figma Guild  |
+| **Sketch**   | [v11](https://carbondesignsystem.com/designing/kits/sketch)       | Available                     | Carbon Sketch Guild |
+|              | [v10](https://v10.carbondesignsystem.com/designing/kits/sketch)   | Available – _limited support_ | Carbon core team    |
+| **Adobe XD** | [v11](https://carbondesignsystem.com/designing/kits/adobe-xd)     | Available                     | Carbon core team    |
+|              | [v10](https://v10.carbondesignsystem.com/designing/kits/adobe-xd) | Available – _limited support_ | Carbon core team    |
 
 ### Additional design assets
 
diff --git a/src/pages/designing/kits/figma.mdx b/src/pages/designing/kits/figma.mdx
index f1103380a90..58df16e692f 100644
--- a/src/pages/designing/kits/figma.mdx
+++ b/src/pages/designing/kits/figma.mdx
@@ -15,12 +15,10 @@ contains all resources you need to get started.
 
 <InlineNotification>
 
-**V11 (Beta) themes now available!** All themes for the v11 libraries are now
-available to IBMers internal users. The v11 libraries are marked as BETA as we
-continue to optimize the libraries. In the coming weeks, some components may
-receive breaking changes due to these enhancements. We will release the v11
-libraries externally after stabilizing changes and enhancements (expected
-release by the end of Q3 2022).
+**v11 themes are now available!** All themes for the v11 libraries are available
+to IBM's internal users and the public community. We have leveraged Figmas
+latest features in this release which may result in breaking changes to some of
+our components.
 
 </InlineNotification>
 
@@ -47,7 +45,10 @@ libraries.
 
 There are four Carbon v11 theme libraries, two light (White and Gray 10) and two
 dark (Gray 90 and Gray 100). Each theme lives in its own Figma library. You can
-turn on as many libraries as you’d like.
+turn on as many libraries as you’d like. The v11 theme libraries are now
+available to IBM’s internal users and the public community. We have leveraged
+Figmas latest features in this release which may result in breaking changes to
+some of our components.
 
 Inside of a design file, navigate to the **Main menu** panel in the top left of
 the toolbar (A). Open the menu and select **Libraries** from the list (B).
@@ -61,8 +62,8 @@ the toolbar (A). Open the menu and select **Libraries** from the list (B).
 </Row>
 
 Then in the Libraries modal that appears, find the team called
-`[NEW] IBM Design Systems` (C) and switch the toggle beside a themed library,
-for example the `(v11 BETA) White theme - Carbon Design System` to on (D).
+`IBM Design Systems` (C) and switch the toggle beside a themed library, for
+example the `(v11) White Theme - Carbon Design System` to on (D).
 
 <Row>
 <Column colLg={8}>
@@ -74,37 +75,7 @@ for example the `(v11 BETA) White theme - Carbon Design System` to on (D).
 
 <br />
 
-To preview the Carbon v11 Beta White theme library and v11 Text styles library,
-visit these view-only links.
-
-<Row className="resource-card-group">
-<Column colMd={4} colLg={4} noGutterSm>
-  <ResourceCard
-    onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
-    subTitle="v11 Beta White theme"
-    href="https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11-BETA)-White-Theme---Carbon-Design-System?node-id=58%3A2763"
-    actionIcon="launch">
-
-![Figma icon](/images/figma.svg)
-
-  </ResourceCard>
-</Column>
-<Column colMd={4} colLg={4} noGutterSm>
-  <ResourceCard
-    onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
-    subTitle="v11 Text styles"
-    href="https://www.figma.com/file/rK06GY6bvEfokuzrFGdtWB/(v11)-Text-Styles---IBM-Design-Language?node-id=129%3A2"
-    actionIcon="launch">
-
-![Figma icon](/images/figma.svg)
-
-  </ResourceCard>
-</Column>
-</Row>
-
-<br />
-
-To preview the four Carbon v11 theme libraries, visit the following view-only
+To preview the four v11 Carbon theme libraries, visit the following view-only
 links. To access the v10 Figma libraries, see
 [v10 Design Kits](https://v10.carbondesignsystem.com/designing/kits/figma).
 
@@ -113,7 +84,7 @@ links. To access the v10 Figma libraries, see
   <ResourceCard
     onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
     subTitle="v11 White theme"
-    href="https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11-BETA)-White-Theme---Carbon-Design-System"
+    href="https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-White-Theme---Carbon-Design-System"
     actionIcon="launch">
 
 ![Figma icon](/images/figma.svg)
@@ -124,7 +95,7 @@ links. To access the v10 Figma libraries, see
   <ResourceCard
     onClick={() => fathom.trackGoal('T7D1HJ3L', 0)}
     subTitle="v11 Gray 10 theme"
-    href="https://www.figma.com/file/0sd447WTcazDI6Dq9tjXOe/(v11-BETA)-Gray-10-Theme---Carbon-Design-System"
+    href="https://www.figma.com/file/0sd447WTcazDI6Dq9tjXOe/(v11)-Gray-10-Theme---Carbon-Design-System"
     actionIcon="launch">
 
 ![Figma icon](/images/figma.svg)
@@ -135,7 +106,7 @@ links. To access the v10 Figma libraries, see
   <ResourceCard
     onClick={() => fathom.trackGoal('LYFJTPDE', 0)}
     subTitle="v11 Gray 90 theme"
-    href="https://www.figma.com/file/fH8rkv1VUTw5pvFDvO1kPO/(v11-BETA)-Gray-90-Theme---Carbon-Design-System"
+    href="https://www.figma.com/file/fH8rkv1VUTw5pvFDvO1kPO/(v11)-Gray-90-Theme---Carbon-Design-System"
     actionIcon="launch">
 
 ![Figma icon](/images/figma.svg)
@@ -146,7 +117,7 @@ links. To access the v10 Figma libraries, see
   <ResourceCard
     onClick={() => fathom.trackGoal('3XH0SIBJ', 0)}
     subTitle="v11 Gray 100 theme"
-    href="https://www.figma.com/file/XhRIHF6qGiJQaJ5eOSSBRm/(v11-BETA)-Gray-100-Theme---Carbon-Design-System"
+    href="https://www.figma.com/file/XhRIHF6qGiJQaJ5eOSSBRm/(v11)-Gray-100-Theme---Carbon-Design-System"
     actionIcon="launch">
 
 ![Figma icon](/images/figma.svg)
@@ -157,12 +128,13 @@ links. To access the v10 Figma libraries, see
 
 <br />
 
-#### 3. Turn on the other IBM Design Language libraries 
+#### 3. Turn on IBM Design Language libraries 
 
-Under the same team `[NEW] IBM Design Systems` you can also turn on the
-following libraries or visit these view-only links.
+Under the same team `IBM Design Systems` you can also turn on the following IBM
+Design Language libraries or visit these view-only links.
 
 - Color styles - IBM Design Language
+- Hover color styles - IBM Design Language
 - Text styles - IBM Design Language
 - Icons - IBM Design Language
 - Pictograms - IBM Design Language
@@ -175,6 +147,17 @@ following libraries or visit these view-only links.
     href="https://www.figma.com/file/Gvwx2RnAZzDKTjVuC5xOlO/Color-Styles---IBM-Design-Language?node-id=129%3A2"
     actionIcon="launch">
 
+![Figma icon](/images/figma.svg)
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+  <ResourceCard
+    onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
+    subTitle="v11 Hover color styles"
+    href="https://www.figma.com/file/hWnMvyDNQ5r4pyACeKNf39/(v11)-Hover-Color-Styles---IBM-Design-Language"
+    actionIcon="launch">
+
 ![Figma icon](/images/figma.svg)
 
   </ResourceCard>
@@ -216,27 +199,18 @@ following libraries or visit these view-only links.
 
 ## External users
 
-<InlineNotification>
-
-**V10 only:** At the moment, external non-IBM users only have access to the v10
-libraries. The v11 libraries will be published once they are stable and include
-all optimizations and enhancements. Approximate delievery date is end of
-Q3 2022.
-
-</InlineNotification>
-
 ### Get the libraries
 
 #### 1. Sign into Figma
 
 #### 2. Get the theme libraries
 
-There are four Carbon v10 theme libraries, two light (White and Gray 10) and two
+There are four Carbon v11 theme libraries, two light (White and Gray 10) and two
 dark (Gray 90 and Gray 100). Each theme lives in its own Figma library. You can
-turn on as many libraries as you’d like.
-
-If you are using Carbon v11, the v11 theme libraries will be available in Figma
-at the end of July 2022 to the public community.
+turn on as many libraries as you’d like. The v11 theme libraries are now
+available to IBM’s internal users and the public community. We have leveraged
+Figmas latest features in this release which may result in breaking changes to
+some of our components.
 
 Navigate to the **Community** tab in the left side panel (A).
 
@@ -273,16 +247,14 @@ See the Carbon Design System libraries that are available.
 
 #### 4. Publish as a library to your workspace
 
-<br />
-
-To preview the four Carbon v10 theme libraries, visit these view-only links.
+To preview the four Carbon v11 theme libraries, visit these view-only links.
 
 <Row className="resource-card-group">
 <Column colMd={4} colLg={4} noGutterSm>
   <ResourceCard
     onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
-    subTitle="v10 White theme"
-    href="https://www.figma.com/community/file/1127112416656936951"
+    subTitle="v11 White theme"
+    href="https://www.figma.com/community/file/1157761560874207208"
     actionIcon="launch">
 
 ![Figma icon](/images/figma.svg)
@@ -292,8 +264,8 @@ To preview the four Carbon v10 theme libraries, visit these view-only links.
 <Column colMd={4} colLg={4} noGutterSm>
   <ResourceCard
     onClick={() => fathom.trackGoal('T7D1HJ3L', 0)}
-    subTitle="v10 Gray 10 theme"
-    href="https://www.figma.com/community/file/1127112675346599928"
+    subTitle="v11 Gray 10 theme"
+    href="https://www.figma.com/community/file/1157763433354586090"
     actionIcon="launch">
 
 ![Figma icon](/images/figma.svg)
@@ -303,8 +275,8 @@ To preview the four Carbon v10 theme libraries, visit these view-only links.
 <Column colMd={4} colLg={4} noGutterSm>
   <ResourceCard
     onClick={() => fathom.trackGoal('LYFJTPDE', 0)}
-    subTitle="v10 Gray 90 theme"
-    href="https://www.figma.com/community/file/1127116371239304194"
+    subTitle="v11 Gray 90 theme"
+    href="https://www.figma.com/community/file/1157763622355802091"
     actionIcon="launch">
 
 ![Figma icon](/images/figma.svg)
@@ -314,8 +286,8 @@ To preview the four Carbon v10 theme libraries, visit these view-only links.
 <Column colMd={4} colLg={4} noGutterSm>
   <ResourceCard
     onClick={() => fathom.trackGoal('3XH0SIBJ', 0)}
-    subTitle="v10 Gray 100 theme"
-    href="https://www.figma.com/community/file/1127118528177925123"
+    subTitle="v11 Gray 100 theme"
+    href="https://www.figma.com/community/file/1157763881353486317"
     actionIcon="launch">
 
 ![Figma icon](/images/figma.svg)
@@ -327,7 +299,7 @@ To preview the four Carbon v10 theme libraries, visit these view-only links.
 #### 3. Bring in additional colors and icons
 
 Use these additional IBM Design Language libraries to have access to color
-styles, text styles, icons, and pictograms.
+styles, hover color styles, text styles, icons, and pictograms.
 
 <Row className="resource-card-group">
 <Column colMd={4} colLg={4} noGutterSm>
@@ -337,6 +309,17 @@ styles, text styles, icons, and pictograms.
     href="https://www.figma.com/community/file/1089055766693968230"
     actionIcon="launch">
 
+![Figma icon](/images/figma.svg)
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+  <ResourceCard
+    onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
+    subTitle="v11 Hover color styles"
+    href="https://www.figma.com/community/file/1157767268366811122"
+    actionIcon="launch">
+
 ![Figma icon](/images/figma.svg)
 
   </ResourceCard>
@@ -344,8 +327,8 @@ styles, text styles, icons, and pictograms.
 <Column colMd={4} colLg={4} noGutterSm>
   <ResourceCard
     onClick={() => fathom.trackGoal('T7D1HJ3L', 0)}
-    subTitle="v10 Text styles"
-    href="https://www.figma.com/community/file/1089053953312384353"
+    subTitle="v11 Text styles"
+    href="https://www.figma.com/community/file/1127113732861637625"
     actionIcon="launch">
 
 ![Figma icon](/images/figma.svg)
@@ -380,7 +363,7 @@ styles, text styles, icons, and pictograms.
 
 ### Components
 
-Included in the library are all 32 of the Carbon components and their variants.
+Included in the library are all 40 of the Carbon components and their variants.
 To insert a component, go to the **Asset** panel and find the component you
 would like to use. Drag it from the asset panel onto the canvas.
 
@@ -403,17 +386,18 @@ The Carbon color tokens are surfaced in Figma using styles. To apply a color
 style, select an object then in the **Styles** menu you can select a style from
 the Carbon theme libraries or the IBM Design Language libraries. In addition to
 applying color styles to objects, you can also apply Color styles to Text
-layers.
+layers. In addition to the Color style library, we have created a Hover color
+styles library to incorporate specific hover colors per color grade.
 
 To learn more about applying color styles in Figma, see the
 [Figma docs](https://help.figma.com/hc/en-us/articles/360040316193).
 
 ### Text styles
 
-To apply a text style, select a text layer then in the properties panel select
-the text style from either the v10 or v11 Text styles - IBM Design Language
-library depending on which version you are on. Use color styles to change the
-color of a text style.
+To apply a text style, select a text layer, then in the properties panel, choose
+a text style from the '(v11) Text styles - IBM Design Language' library
+depending on which version you are on. Use color styles to change the color of a
+text style.
 
 To learn more about applying text styles in Figma, see the
 [Figma docs](https://help.figma.com/hc/en-us/articles/360039957034-Create-and-Apply-Text-Styles#apply).
diff --git a/src/pages/designing/kits/images/kit-figma-2.png b/src/pages/designing/kits/images/kit-figma-2.png
index d6b4adce3a8..7760ef04f94 100644
Binary files a/src/pages/designing/kits/images/kit-figma-2.png and b/src/pages/designing/kits/images/kit-figma-2.png differ
diff --git a/src/pages/designing/kits/images/kit-figma-5.png b/src/pages/designing/kits/images/kit-figma-5.png
index 89e1b07ad11..92378c6ee1c 100644
Binary files a/src/pages/designing/kits/images/kit-figma-5.png and b/src/pages/designing/kits/images/kit-figma-5.png differ
diff --git a/src/pages/developing/angular-tutorial/wrapping-up.mdx b/src/pages/developing/angular-tutorial/wrapping-up.mdx
index 491459de926..71d23db734f 100644
--- a/src/pages/developing/angular-tutorial/wrapping-up.mdx
+++ b/src/pages/developing/angular-tutorial/wrapping-up.mdx
@@ -10,88 +10,8 @@ tabs:
 <PageDescription>
 
 Thanks for completing our tutorial and helping us improve it along the way. If
-you want to show the world your new skills, you can apply for an IBM Digital
-Badge.
+you want to show the world your new skills, you can share your deployed
+application and showcase the five pull requests you have completed with the
+green `status: approved` label.
 
 </PageDescription>
-
-<AnchorLinks>
-
-<AnchorLink>Application form</AnchorLink>
-<AnchorLink>Badge information</AnchorLink>
-
-</AnchorLinks>
-
-## Application form
-
-Once you complete all five steps of the tutorial, you can apply for an
-[IBM Digital Badge](https://badges.carbondesignsystem.com). These badges are
-available to anybody who completes the tutorial, not just IBM employees.
-
-<Row>
-<Column colLg={8}>
-
-![](/images/carbon-badge.png)
-
-<Caption>IBM Digital Badge</Caption>
-
-</Column>
-</Row>
-
-## Badge information
-
-For more information about the IBM Carbon Design System Developer Essentials -
-Angular badge, see the
-[Acclaim](https://www.youracclaim.com/org/ibm/badge/ibm-carbon-design-system-developer-essentials-angular)
-site.
-
-### Badge process
-
-This badge demonstrates knowledge about Carbon's Angular components. To earn the
-badge:
-
-1. Complete steps 1 through 5 of the Carbon Angular tutorial:
-   - Step 1. [Installing Carbon](/developing/angular-tutorial/step-1)
-   - Step 2. [Building pages](/developing/angular-tutorial/step-2)
-   - Step 3. [Using APIs](/developing/angular-tutorial/step-3)
-   - Step 4. [Creating components](/developing/angular-tutorial/step-4)
-   - Step 5. [Deploying to IBM Cloud](/developing/angular-tutorial/step-5)
-2. Have approved pull requests for steps 1 through 5 in the
-   [carbon-tutorial-angular repository](https://github.com/carbon-design-system/carbon-tutorial-angular).
-3. Apply for the IBM Digital Badge by completing the
-   [form and survey](https://badges.carbondesignsystem.com/).
-
-<InlineNotification>
-
-**Note:** To quickly find your submitted PRs, you can
-[filter by author](https://github.com/carbon-design-system/carbon-tutorial-angular/pulls?utf8=%E2%9C%93&q=author%3Ausername)
-(e.g. `author:${username}`).
-
-</InlineNotification>
-
-### FAQ and help
-
-Badge issuer contact: matt.rosno@ibm.com.
-
-For questions related to your Acclaim badge earner account and profile, as well
-as issues related to claiming your badge after receiving a notification, go to
-[http://support.youracclaim.com](http://support.youracclaim.com) for account
-issues.
-
-### Privacy statement
-
-NOTICE: IBM leverages the services of Credly's Acclaim platform, a 3rd party
-data processor authorized by IBM and located in the United States, to assist in
-the administration of the IBM Digital Badge program. In order to issue you an
-IBM Digital Badge, your personal information (name, email address, and badge
-earned) will be shared with the Credly's Acclaim platform. You will receive an
-email notification from Acclaim with instructions for claiming the badge. Your
-personal information is used to issue your badge and for program reporting and
-operational purposes. It will be handled in a manner consistent with IBM privacy
-practices. The IBM Privacy Statement can be viewed here:
-[https://www.ibm.com/privacy/us/en/](https://www.ibm.com/privacy/us/en/). IBM
-employees can view the IBM Internal Privacy Statement here:
-[https://w3.ibm.com/w3publisher/w3-privacy-notice](https://w3.ibm.com/w3publisher/w3-privacy-notice).
-
-To apply for the IBM Digital Badge, please complete the
-[form and survey](https://badges.carbondesignsystem.com).
diff --git a/src/pages/developing/frameworks/svelte.mdx b/src/pages/developing/frameworks/svelte.mdx
index 2eec751790a..c85bdd775e3 100644
--- a/src/pages/developing/frameworks/svelte.mdx
+++ b/src/pages/developing/frameworks/svelte.mdx
@@ -40,7 +40,7 @@ support, contact the
   <Column colLg={4} colMd={4} noGutterSm>
     <ResourceCard
       subTitle="Carbon Components Svelte"
-      href="https://github.com/IBM/carbon-components-svelte"
+      href="https://github.com/carbon-design-system/carbon-components-svelte"
     >
       <MdxIcon name="github" />
     </ResourceCard>
@@ -48,7 +48,7 @@ support, contact the
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
       subTitle="Carbon Icons Svelte"
-      href="https://github.com/IBM/carbon-icons-svelte"
+      href="https://github.com/carbon-design-system/carbon-icons-svelte"
     >
       <MdxIcon name="github" />
     </ResourceCard>
@@ -56,38 +56,29 @@ support, contact the
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
       subTitle="Carbon Pictograms Svelte"
-      href="https://github.com/IBM/carbon-pictograms-svelte"
+      href="https://github.com/carbon-design-system/carbon-pictograms-svelte"
+    >
+      <MdxIcon name="github" />
+    </ResourceCard>
+  </Column>
+  <Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="Carbon Charts Svelte"
+      href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
+    >
+      <MdxIcon name="github" />
+    </ResourceCard>
+  </Column>
+  <Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="Carbon Preprocess Svelte"
+      href="https://github.com/carbon-design-system/carbon-preprocess-svelte"
     >
       <MdxIcon name="github" />
     </ResourceCard>
   </Column>
 </Row>
 
-## Install
-
-Install `carbon-components-svelte` as a development dependency.
-
-```bash
-yarn add -D carbon-components-svelte
-# OR
-npm i -D carbon-components-svelte
-```
-
-The quickest way to get started is to customize a template from the
-[examples](https://github.com/IBM/carbon-components-svelte/tree/master/examples/)
-folder.
-
-Example set-ups demonstrate usage with popular application bundlers and
-frameworks. They feature a mix of Single-page Applications (SPA), Server-side
-rendering (SSR) and statically exported approaches.
-
-- **[examples/rollup](https://github.com/IBM/carbon-components-svelte/tree/master/examples/rollup/)**:
-  SPA bundled using [Rollup](https://github.com/rollup/rollup)
-- **[examples/sapper](https://github.com/IBM/carbon-components-svelte/tree/master/examples/sapper/)**:
-  SSR + static export using [Sapper](https://github.com/sveltejs/sapper)
-- **[examples/webpack](https://github.com/IBM/carbon-components-svelte/tree/master/examples/webpack/)**:
-  SPA bundled with [webpack](https://github.com/webpack/webpack)
-
 ## Development
 
 Please refer to the
diff --git a/src/pages/developing/get-started.mdx b/src/pages/developing/get-started.mdx
index 2bcacf0ff9f..d0b853dc471 100644
--- a/src/pages/developing/get-started.mdx
+++ b/src/pages/developing/get-started.mdx
@@ -39,12 +39,11 @@ as well as our GitHub repos and Storybooks for your framework of choice.
 
 ## Additional guidance
 
-### Take a tutorial, earn a badge
+### Take a tutorial
 
 We offer tutorials in Angular, React, and Vue to guide you in creating an app
 with the Carbon Design System. We’ll teach you the ins and outs of using Carbon
-components, and introduce web development best practices along the way. Everyone
-who completes the tutorial will earn an IBM digital badge.
+components, and introduce web development best practices along the way.
 
 <Row className="resource-card-group">
 <Column colLg={4} colMd={4} noGutterSm>
diff --git a/src/pages/developing/react-tutorial/faq.mdx b/src/pages/developing/react-tutorial/faq.mdx
index eb5e3908c80..2db1ce72f1e 100644
--- a/src/pages/developing/react-tutorial/faq.mdx
+++ b/src/pages/developing/react-tutorial/faq.mdx
@@ -58,20 +58,16 @@ tabs:
   `#carbon-react` or tag `@carbon-design-system/developers` in a comment on your
   PR for help.
 
-### When will I get the badge?
+### How can I show others my completion status?
 
-- After you've completed the tutorial, as well as the form and badge survey
-  mentioned
-  [here](https://carbondesignsystem.com/developing/react-tutorial/wrapping-up#badge-process),
-  our badge issuer will approve your badge. This is a manual job done by one
-  person. Please be patient if it takes a while to review as we have lots of
-  people go thru our tutorial badging process.
+- Proof of your completion of the tutorial can be seen by filtering the PR list
+  to show your five PRs with the `status: approved` label.
 
-- Badge issuer contact: matt.rosno@ibm.com.
+- You can filter the pull request list to show only pull requests authored by
+  your username. Replace `YOURUSERNAMEHERE` with your username in the following
+  link:
 
-- For questions related to your Acclaim badge earner account and profile, as
-  well as issues related to claiming your badge after receiving a notification,
-  go to http://support.youracclaim.com for account issues.
+  - https://github.com/carbon-design-system/carbon-tutorial/pulls?q=author%3AYOURUSERNAMEHERE
 
 ### Other troubleshooting tips
 
diff --git a/src/pages/developing/react-tutorial/step-5.mdx b/src/pages/developing/react-tutorial/step-5.mdx
index 68866bce6ef..377edbf0930 100644
--- a/src/pages/developing/react-tutorial/step-5.mdx
+++ b/src/pages/developing/react-tutorial/step-5.mdx
@@ -110,60 +110,6 @@ Before we get started,
 [create an IBM Cloud account](https://cloud.ibm.com/registration) if you don't
 already have one, as we'll be deploying there in a bit.
 
-## Optimize Sass
-
-So far we've been developing in a, well, development environment where static
-asset optimization hasn't been a priority. If you reference `/src/index.scss`,
-you'll see one `@import` that is pulling in Carbon's full Sass build.
-
-```scss path=src/index.scss
-$feature-flags: (
-  grid-columns-16: true,
-);
-
-@import 'carbon-components/scss/globals/scss/styles.scss';
-```
-
-To give you an idea of what's all included, open up
-`node_modules/carbon-components/scss/globals/scss/styles.scss`. You'll see
-imports for components like accordion, slider, tooltip, etc. Since we aren't
-using those components, let's exclude them from our built stylesheets. Keeping
-the `$feature-flags` Sass map, replace the `styles.scss` import with:
-
-```scss path=src/index.scss
-// Feature flags
-$css--font-face: true;
-$css--plex: true;
-
-// Global styles
-@import 'carbon-components/scss/globals/scss/css--font-face';
-@import 'carbon-components/scss/globals/grid/grid';
-
-// Carbon components
-@import 'carbon-components/scss/components/breadcrumb/breadcrumb';
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/components/data-table/data-table';
-@import 'carbon-components/scss/components/link/link';
-@import 'carbon-components/scss/components/pagination/pagination';
-@import 'carbon-components/scss/components/tabs/tabs';
-@import 'carbon-components/scss/components/ui-shell/ui-shell';
-```
-
-In comparing to the included `carbon-components/scss/globals/scss/styles.scss`,
-you may be asking what happened to importing `_vars.scss`, `_colors.scss`,
-`_theme.scss`, etc.?
-
-Many of those global Sass partials get imported through the components. For
-example, open
-`node_modules/carbon-components/scss/components/button/_button.scss` to see its
-dependencies. No harm in importing them as
-`carbon-components/scss/globals/scss/styles.scss` does, but for simplicity here,
-we'll let the components pull them in.
-
-You can read more about optimizing Carbon's Sass in the
-[Carbon Design System publication](https://medium.com/carbondesign/minimal-css-with-carbon-b0c089ccfa71)
-on Medium.
-
 ## Build for production
 
 Before we deploy our app, we need to create an optimized production build with
diff --git a/src/pages/developing/react-tutorial/wrapping-up.mdx b/src/pages/developing/react-tutorial/wrapping-up.mdx
index 67838b9581f..f3b92f8502b 100644
--- a/src/pages/developing/react-tutorial/wrapping-up.mdx
+++ b/src/pages/developing/react-tutorial/wrapping-up.mdx
@@ -19,88 +19,8 @@ tabs:
 <PageDescription>
 
 Thanks for completing our tutorial and helping us improve it along the way. If
-you want to show the world your new skills, you can apply for an IBM Digital
-Badge.
+you want to show the world your new skills, you can share your deployed
+application and showcase the five pull requests you have completed with the
+green `status: approved` label.
 
 </PageDescription>
-
-<AnchorLinks>
-
-<AnchorLink>Application form</AnchorLink>
-<AnchorLink>Badge information</AnchorLink>
-
-</AnchorLinks>
-
-## Application form
-
-Once you complete all five steps of the tutorial, you can apply for an
-[IBM Digital Badge](https://badges.carbondesignsystem.com). These badges are
-available to anybody who completes the tutorial, not just IBM employees.
-
-<Row>
-<Column colLg={8}>
-
-![](/images/carbon-badge.png)
-
-<Caption>IBM Digital Badge</Caption>
-
-</Column>
-</Row>
-
-## Badge information
-
-For more information about the IBM Carbon Design System Developer Essentials -
-React badge, see the
-[Acclaim](https://www.youracclaim.com/org/ibm/badge/ibm-carbon-design-system-developer-essentials-react)
-site.
-
-### Badge process
-
-This badge demonstrates knowledge about Carbon's React components. To earn the
-badge:
-
-1. Complete steps 1 through 5 of the Carbon React tutorial:
-   - Step 1. [Installing Carbon](/developing/react-tutorial/step-1)
-   - Step 2. [Building pages](/developing/react-tutorial/step-2)
-   - Step 3. [Using APIs](/developing/react-tutorial/step-3)
-   - Step 4. [Creating components](/developing/react-tutorial/step-4)
-   - Step 5. [Deploying to IBM Cloud](/developing/react-tutorial/step-5)
-2. Have approved pull requests for steps 1 through 5 in the
-   [carbon-tutorial repository](https://github.com/carbon-design-system/carbon-tutorial).
-3. Apply for the IBM Digital Badge by completing the
-   [form and survey](https://badges.carbondesignsystem.com/).
-
-<InlineNotification>
-
-**Note:** To quickly find your submitted PRs, you can
-[filter by author](https://github.com/carbon-design-system/carbon-tutorial/pulls?utf8=%E2%9C%93&q=author%3Ausername)
-(e.g. `author:${username}`).
-
-</InlineNotification>
-
-### FAQ and help
-
-Badge issuer contact: matt.rosno@ibm.com.
-
-For questions related to your Acclaim badge earner account and profile, as well
-as issues related to claiming your badge after receiving a notification, go to
-[http://support.youracclaim.com](http://support.youracclaim.com) for account
-issues.
-
-### Privacy statement
-
-NOTICE: IBM leverages the services of Credly's Acclaim platform, a 3rd party
-data processor authorized by IBM and located in the United States, to assist in
-the administration of the IBM Digital Badge program. In order to issue you an
-IBM Digital Badge, your personal information (name, email address, and badge
-earned) will be shared with the Credly's Acclaim platform. You will receive an
-email notification from Acclaim with instructions for claiming the badge. Your
-personal information is used to issue your badge and for program reporting and
-operational purposes. It will be handled in a manner consistent with IBM privacy
-practices. The IBM Privacy Statement can be viewed here:
-[https://www.ibm.com/privacy/us/en/](https://www.ibm.com/privacy/us/en/). IBM
-employees can view the IBM Internal Privacy Statement here:
-[https://w3.ibm.com/w3publisher/w3-privacy-notice](https://w3.ibm.com/w3publisher/w3-privacy-notice).
-
-To apply for the IBM Digital Badge, please complete the
-[form and survey](https://badges.carbondesignsystem.com).
diff --git a/src/pages/developing/vue-tutorial/wrapping-up.mdx b/src/pages/developing/vue-tutorial/wrapping-up.mdx
index 184d7d1ed29..6ec21851d16 100644
--- a/src/pages/developing/vue-tutorial/wrapping-up.mdx
+++ b/src/pages/developing/vue-tutorial/wrapping-up.mdx
@@ -10,8 +10,9 @@ tabs:
 <PageDescription>
 
 Thanks for completing our tutorial and helping us improve it along the way. If
-you want to show the world your new skills, you can apply for an IBM Digital
-Badge.
+you want to show the world your new skills, you can share your deployed
+application and showcase the five pull requests you have completed with the
+green `status: approved` label.
 
 </PageDescription>
 
diff --git a/src/pages/guidelines/2x-grid/implementation.mdx b/src/pages/guidelines/2x-grid/implementation.mdx
index fa38493cf05..142afd8a5bc 100644
--- a/src/pages/guidelines/2x-grid/implementation.mdx
+++ b/src/pages/guidelines/2x-grid/implementation.mdx
@@ -15,8 +15,8 @@ with five default breakpoints and dozens of predefined classes.
 
 <InlineNotification>
 
-If you’re using `@carbon/styles` or `@carbon/react` there’s no reason to install
-the grid package separately. See our [get started](/developing/get-started/)
+If you're using `@carbon/react`, you probably don't need need to install the
+grid package separately. See our [Carbon React](/developing/frameworks/react/)
 guide to start building.
 
 </InlineNotification>
@@ -30,6 +30,7 @@ guide to start building.
 <AnchorLink>Incorporating the shell</AnchorLink>
 <AnchorLink>Alignments</AnchorLink>
 <AnchorLink>Techniques</AnchorLink>
+<AnchorLink>API & Helpers</AnchorLink>
 <AnchorLink>Resources</AnchorLink>
 
 </AnchorLinks>
@@ -1343,6 +1344,39 @@ Image size can change ratios when the breakpoint changes.
   </DoDont>
 </DoDontRow>
 
+## API & Helpers
+
+There are many ways to make the 2x Grid work for your application using our API.
+The example below illustrates removing visibility of a given component based on
+the maximum width of the `md` breakpoint.
+
+```css
+.component {
+  display: inline;
+
+  /* applies styles inside mixin on md breakpoint or below, like max-width */
+  @include carbon--breakpoint-down('md') {
+    display: none;
+  }
+}
+```
+
+In addition, you can also use Helpers to control what is being displayed on the
+screen at a given breakpoint.
+
+```css
+@use '@carbon/styles/scss/utilities/helper-classes';
+
+.my-class {
+  @include helper-classes.hide-at-sm();
+}
+```
+
+Checkout the [resources](#resources) section for links to
+[the helpers on storybook](https://react.carbondesignsystem.com/?path=/story/helpers-hideatbreakpoint--hide-at-breakpoint)
+and the full
+[API list on Github](https://github.com/carbon-design-system/carbon/blob/main/packages/grid/docs/sass.md#api).
+
 ## Resources
 
 <Row className="resource-card-group">
@@ -1374,6 +1408,26 @@ Image size can change ratios when the breakpoint changes.
 
 <MdxIcon name="bee" />
 
+  </ResourceCard>
+  </Column>
+  <Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="Carbon grid docs API"
+      href="https://github.com/carbon-design-system/carbon/blob/main/packages/grid/docs/sass.md#api"
+    >
+
+<MdxIcon name="github" />
+
+  </ResourceCard>
+  </Column>
+  <Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="Hide at Breakpoint Helpers on Storybook"
+      href="https://react.carbondesignsystem.com/?path=/story/helpers-hideatbreakpoint--hide-at-breakpoint"
+    >
+
+<MdxIcon name="storybook" />
+
   </ResourceCard>
   </Column>
 </Row>
diff --git a/src/pages/guidelines/color/code.mdx b/src/pages/guidelines/color/code.mdx
index f8dff8e2621..fee1ca98022 100644
--- a/src/pages/guidelines/color/code.mdx
+++ b/src/pages/guidelines/color/code.mdx
@@ -15,9 +15,9 @@ consistent application of color.
 
 <InlineNotification>
 
-If you’re using `@carbon/react` there’s no reason to install the color package
-separately. See our [get started](/get-started/develop/react) guide to start
-building.
+If you're using `@carbon/react`, you probably don't need need to install the
+color package separately. See our [Carbon React](/developing/frameworks/react/)
+guide to start building.
 
 </InlineNotification>
 
diff --git a/src/pages/guidelines/color/implementation.mdx b/src/pages/guidelines/color/implementation.mdx
index 492fc6dfbda..e225131b8bd 100644
--- a/src/pages/guidelines/color/implementation.mdx
+++ b/src/pages/guidelines/color/implementation.mdx
@@ -322,7 +322,7 @@ level, the last level corresponding to the 03 layer set tokens. By default,
 tokens use the 01 layer set tokens in the first layer.
 
 For more guidance on the layer component, go to the
-[Storybook](https://carbon-react-next.netlify.app/?path=/docs/components-layer--default).
+[Storybook](https://react.carbondesignsystem.com/?path=/docs/components-layer--default#layer).
 
 ```css Layer component
 <Layer>
@@ -456,7 +456,7 @@ a page. It is most often used to implement inline theming in order to specify
 what theme a section of the page should render with.
 
 For more guidance on the theme component, go to the
-[Storybook](https://carbon-react-next.netlify.app/?path=/docs/components-theme--default).
+[Storybook](https://react.carbondesignsystem.com/?path=/docs/components-theme--default#theme).
 
 ```css Theme component
 <Theme theme="g100">
@@ -586,7 +586,7 @@ theme contrast between elements in different modes is also allowed. It is very
 common for products to have side panels or UI shell elements be high contrast in
 light mode but low contrast in dark mode. These relationships can be mapped in
 code using the the
-[theme component](https://carbon-react-next.netlify.app/?path=/docs/components-theme--default).
+[theme component](https://react.carbondesignsystem.com/?path=/docs/components-theme--default).
 Note that smaller components built with an inverse tokens (like tooltip) should
 remain high contrast when switching modes.
 
diff --git a/src/pages/guidelines/content/overview.mdx b/src/pages/guidelines/content/overview.mdx
index 559d2cd94bf..768e5218b7e 100755
--- a/src/pages/guidelines/content/overview.mdx
+++ b/src/pages/guidelines/content/overview.mdx
@@ -108,8 +108,8 @@ Further guidance can be found in the
 
 If there's something you need and cannot find, or if you need clarification
 about a particular use case, you can ask questions in the
-[Carbon Slack channel](#carbon-design-system), open a Github issue, or connect
-with us in one of our
+[Carbon Slack channel](https://ibm-studios.slack.com/messages/C0M053VPT/), open
+a Github issue, or connect with us in one of our
 [meetups](https://www.carbondesignsystem.com/whats-happening/meetups).
 
 ## References
diff --git a/src/pages/guidelines/content/writing-style.mdx b/src/pages/guidelines/content/writing-style.mdx
index ce2d6034ec4..334f04bc0e2 100755
--- a/src/pages/guidelines/content/writing-style.mdx
+++ b/src/pages/guidelines/content/writing-style.mdx
@@ -310,7 +310,7 @@ everyday language, not jargon. And choose short words to make the reading
 faster, rather than long impressive-sounding words. Put the thesaurus away!
 
 IBM Style offers more guidelines on
-[conversational style](https://www-03preprod.ibm.com/support/knowledgecenter/ibm_style/conversational-style.html).
+[conversational style](<[https://www-03preprod.ibm.com/support/knowledgecenter/ibm_style/conversational-style.html](https://ibmdocs-test.mybluemix.net/docs/en/ibm-style?topic=medium-conversational-style)>).
 
 ### Formal versus casual tone
 
@@ -444,7 +444,7 @@ user will benefit from knowing why IBM is asking for this information. Example:
 Avoid third-person pronouns that are gender specific.
 
 For more detailed guidance about pronouns, refer to the
-[Pronouns](https://www-03preprod.ibm.com/support/knowledgecenter/ibm_style/pronouns.html)
+[Pronouns](https://ibmdocs-test.mybluemix.net/docs/en/ibm-style?topic=grammar-pronouns)
 topic in IBM Style.
 
 ## Active and passive voice
diff --git a/src/pages/guidelines/icons/code.mdx b/src/pages/guidelines/icons/code.mdx
index cd71e60efb4..4ae9ef78823 100644
--- a/src/pages/guidelines/icons/code.mdx
+++ b/src/pages/guidelines/icons/code.mdx
@@ -59,8 +59,7 @@ size `16`. You can change the size of the icon by adding the `size` prop:
 ```
 
 _Note: if you would like to find the import path for an icon, you can reference
-our
-[Icon Library](https://www.carbondesignsystem.com/guidelines/iconography/library)_
+our [Icon Library](https://www.carbondesignsystem.com/guidelines/icons/library)_
 
 ### Icon fill
 
diff --git a/src/pages/guidelines/motion/code.mdx b/src/pages/guidelines/motion/code.mdx
index b1f1eddb4ee..ea197d843ec 100644
--- a/src/pages/guidelines/motion/code.mdx
+++ b/src/pages/guidelines/motion/code.mdx
@@ -16,9 +16,9 @@ across digital experiences.
 
 <InlineNotification>
 
-If you’re using `@carbon/react` there’s no reason to install the motion package
-separately. See our [get started](/get-started/develop/react) guide to start
-building.
+If you're using `@carbon/react`, you probably don't need need to install the
+motion package separately. See our [Carbon React](/developing/frameworks/react/)
+guide to start building.
 
 </InlineNotification>
 
diff --git a/src/pages/guidelines/spacing/code.mdx b/src/pages/guidelines/spacing/code.mdx
index ec1afdafd24..481dc24f792 100644
--- a/src/pages/guidelines/spacing/code.mdx
+++ b/src/pages/guidelines/spacing/code.mdx
@@ -20,9 +20,9 @@ spacing and alignment.
 
 <InlineNotification>
 
-If you’re using `@carbon/react` there’s no reason to install the layout package
-separately. See our [get started](/get-started/develop/react) guide to start
-building.
+If you're using `@carbon/react`, you probably don't need need to install the
+layout package separately. See our [Carbon React](/developing/frameworks/react/)
+guide to start building.
 
 </InlineNotification>
 
diff --git a/src/pages/guidelines/themes/code.mdx b/src/pages/guidelines/themes/code.mdx
index 5aada190809..8c1f583da34 100644
--- a/src/pages/guidelines/themes/code.mdx
+++ b/src/pages/guidelines/themes/code.mdx
@@ -17,16 +17,15 @@ Use the themes package to customize your product while maintaining consistency.
 
 <InlineNotification>
 
-If you’re using `@carbon/react` there’s no reason to install the themes package
-separately. See our [get started](/get-started/develop/react) guide to start
-building.
+If you're using `@carbon/react`, you probably don't need need to install the
+themes package separately. See our [Carbon React](/developing/frameworks/react/)
+guide to start building.
 
 </InlineNotification>
 
 <AnchorLinks>
 
-<AnchorLink>Get started</AnchorLink>
-<AnchorLink>Usage</AnchorLink>
+<AnchorLink>Get started</AnchorLink> <AnchorLink>Usage</AnchorLink>
 <AnchorLink>Resources</AnchorLink>
 
 </AnchorLinks>
@@ -52,11 +51,10 @@ yarn add @carbon/themes
 You can use `@carbon/themes` in JavaScript or Sass by including this package in
 your project. By default, `@carbon/themes` provides a set of color tokens that
 are pre-defined for a specific theme. Currently, we offer the following color
-themes: white, gray 10, gray 90, gray 100 .
+themes: white, gray 10, gray 90, gray 100.
 
 You can preview all of the token values for this on the
-[Carbon Design System website](https://www.carbondesignsystem.com/guidelines/color/usage)
-.
+[color guidelines](/guidelines/color/usage) page.
 
 ### Sass
 
@@ -64,57 +62,67 @@ If your project is using Sass, you can include this package and the
 corresponding default theme by writing the following in your Sass file:
 
 ```scss
-@import '@carbon/themes/scss/themes';
-```
-
-By default, the white theme will be initialized. If you would like to include
-another theme, you can do so by calling our mixin. For example:
-
-```scss
-@import '@carbon/themes/scss/themes';
+@use '@carbon/themes';
 
-// Use the gray 10 theme
-@include theme($theme--g10);
+.my-component {
+  // Use tokens from the theme, this will map to a CSS Custom Property
+  color: themes.$token-01;
+}
 
-// Use the gray 90 theme
-@include theme($theme--g90);
+:root {
+  // Emit CSS Custom Properties for the current theme
+  @include themes.theme();
+}
 
-// Use the gray 100 theme
-@include theme($theme--g100);
+// Get the value of a specific token
+$custom-variable: rgba(themes.get('token-01'), 0.25);
 ```
 
-Alternatively, you can set the global theme variable then call the mixin without
-passing in a theme name.
+By default, the white theme will be initialized. If you would like to include
+another theme, you can do so by configuring the sass module using `with`. For
+example:
 
 ```scss
-@import '@carbon/themes/scss/themes';
-
-$theme: $theme--g10;
-
-// Use the gray 10 theme
-@include theme();
+@use '@carbon/themes/scss/themes' as *;
+@use '@carbon/themes' with ($theme: $g100);
 ```
 
-Inline theming can be done by using the mixin. For example:
+Inline theming of theme switching can be done by using the mixin. For example:
 
 ```scss
-@import '@carbon/themes/scss/themes';
+@use '@carbon/themes/scss/themes' as *;
+@use '@carbon/themes';
+
+:root {
+  @include themes.theme($white);
+}
 
-// Use the default white theme here
+[data-carbon-theme='g10'] {
+  @include themes.theme($g10);
+}
 
-.my-dark-theme {
-  @include theme($theme--g90) {
-    // Use the dark theme here
-  }
+[data-carbon-theme='g90'] {
+  @include themes.theme($g90);
 }
 
-.my-darker-theme {
-  @include theme($theme--g100) {
-    // Use the darker theme here
-  }
+[data-carbon-theme='g100'] {
+  @include themes.theme($g100);
 }
 ```
 
+Themes can also be extended with your own custom tokens:
+
+```scss
+@use '@carbon/themes/scss/themes';
+@use '@carbon/themes' with
+  (
+    $fallback: themes.$g100,
+    $theme: (
+      token-01: #000000,
+    )
+  );
+```
+
 ### JavaScript
 
 If you're looking to use these themes in JavaScript, we export a variety of
@@ -143,7 +151,7 @@ import {
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
       subTitle="Carbon theme package"
-      href="https://github.com/carbon-design-system/carbon/blob/v10/packages/themes"
+      href="https://github.com/carbon-design-system/carbon/tree/main/packages/themes"
     >
 
 <MdxIcon name="bee" />
diff --git a/src/pages/guidelines/themes/overview.mdx b/src/pages/guidelines/themes/overview.mdx
index 8e176a205f6..e0116ddbe78 100755
--- a/src/pages/guidelines/themes/overview.mdx
+++ b/src/pages/guidelines/themes/overview.mdx
@@ -45,32 +45,15 @@ individual components.
 ### Default theme
 
 Carbon provides four themes as shown in the
-[color usage](/guidelines/color/usage) page. When `carbon-components` is
-downloaded and installed, the components are preset to use the default (White)
-theme.
+[color usage](/guidelines/color/usage) page. When `@carbon/react` is downloaded
+and installed, the components are preset to use the default (White) theme.
 
 To use the Gray 10, Gray 90, or Gray 100 theme as your default instead of White,
-set the `$theme` variable to one of the available theme maps (`$theme--g10`,
-`$theme--g90`, `$theme--g100`) and then include your normal components in your
-Sass build. These need to be imported before the main Carbon styles.
+configure the sass module usign `with`.
 
 ```scss
-@import '@carbon/themes/scss/themes';
-
-// Use the gray 10 theme
-$theme: $theme--g10;
-@include theme();
-
-// Use the gray 90 theme
-$theme: $theme--g90;
-@include theme();
-
-// Use the gray 100 theme
-$theme: $theme--g100;
-@include theme();
-
-// import Carbon styles here
-@import 'carbon-components/scss/globals/scss/styles.scss';
+@use '@carbon/react/scss/themes';
+@use '@carbon/react/scss/theme' with ($theme: themes.$g100);
 ```
 
 ## Customizing a theme
@@ -78,131 +61,21 @@ $theme: $theme--g100;
 The default theme acts as a starting point; from there designers and developers
 can define how their own components and styles deviate from the default.
 Altering one, some, or all of the default token values will result in a new
-theme. The developer then packages those new values into a new theme SCSS
-stylesheet which will replace the values of the default theme.
-
-<Title>
-  1. Create a theme mixin that effectively mimics this structure, but changes up
-  values as needed:
-</Title>
+theme. The developer configures these new values by configuring the sass module
+using `with` which can replace the values of the default theme or add new custom
+tokens as well.
 
 ```scss
-$theme--white: (
-  // Background
-  background: #ffffff,
-  background-active: #c6c6c6,
-  background-hover: #e5e5e5,
-  background-selected: #e0e0e0,
-  background-selected-hover: #cacaca,
-  background-inverse: #393939,
-  background-inverse-hover: #4c4c4c,
-  background-brand: #0f62fe,
-
-  // Layer
-  layer: #f4f4f4,
-  layer-active: #c6c6c6,
-  layer-hover: #e5e5e5,
-  layer-selected: #e0e0e0,
-  layer-selected-hover: #cacaca,
-  layer-selected-inverse: #161616,
-  layer-selected-disabled: #8d8d8d,
-  layer-accent: #e0e0e0,
-  layer-accent-active: #a8a8a8,
-  layer-accent-hover: #d1d1d1,
-  layer-disabled: #f4f4f4,
-
-  // Field
-  field: #f4f4f4,
-  field-hover: #e5e5e5,
-  field-disabled: #f4f4f4,
-
-  // Interactive
-  interactive: #0f62fe,
-
-  // Border
-  border-subtle: #e0e0e0,
-  border-subtle-selected: #c6c6c6,
-  border-strong: #8d8d8d,
-  border-inverse: #161616,
-  border-interactive: #0f62fe,
-  border-disabled: #f4f4f4,
-
-  // Text
-  text-primary: #161616,
-  text-secondary: #525252,
-  text-placeholder: #a8a8a8,
-  text-helper: #6f6f6f,
-  text-on-color: #ffffff,
-  text-inverse: #ffffff,
-  text-disabled: #c6c6c6,
-  text-on-color-disabled: #8d8d8d,
-
-  //Link
-  link-primary: #0f62fe,
-  link-primary-hover: #0043ce,
-  link-secondary: #0043ce,
-  link-visited: #8a3ffc,
-  link-inverse: #78a9ff,
-
-  //Icon
-  icon-primary: #161616,
-  icon-secondary: #525252,
-  icon-on-color: #ffffff,
-  icon-inverse: #ffffff,
-  icon-disabled: #c6c6c6,
-  icon-on-color-disabled: #8d8d8d,
-
-  // Support
-  support-error: #da1e28,
-  support-success: #198038,
-  support-warning: #f1c21b,
-  support-info: #0043ce,
-  support-error-inverse: #fa4d56,
-  support-success-inverse: #42be65,
-  support-warning-inverse: #f1c21b,
-  support-info-inverse: #4589ff,
-
-  // Misc.
-  overlay: rgba(22, 22, 22, 0.5),
-  toggle-off: #8d8d8d,
-
-  // Button
-  button-primary: #0f62fe,
-  button-primary-active: #002d9c,
-  button-primary-hover: #0353e9,
-  button-secondary: #393939,
-  button-secondary-active: #6f6f6f,
-  button-secondary-hover: #4c4c4c,
-  button-tertiary: #0f62fe,
-  button-tertiary-active: #002d9c,
-  button-tertiary-hover: #0353e9,
-  button-danger-primary: #da1e28,
-  button-danger-secondary: #da1e28,
-  button-danger-active: #750e13,
-  button-danger-hover: #b81921,
-  button-disabled: #c6c6c6,
-
-// Focus
-  focus-inset: #ffffff,
-  focus-inverse: #ffffff,
-
-// Skeleton
-  skeleton-background: #e5e5e5,
-  skeleton-element: #c6c6c6,
+@use '@carbon/react/scss/theme' with
+  (
+    $theme: (
+      background: #e2e2e2,
+      text-primary: #ffffff,
+      custom-token-01: #000000,
+    )
+  );
 ```
 
-<Title> 2. Name the mixin: </Title>
-
-i.e., `$my-theme`
-
-<Title> 3. Include this in your SCSS, before importing components, etc.:</Title>
-
-`@include my-theme();`
-
-Alternatively, for relatively minor changes to an existing theme, a developer
-can make changes on a per-token basis. For example, after importing an existing
-Carbon theme, she could just set something like `$interactive: hotpink;`.
-
 ## Tokens
 
 With tokens, the code only needs to be changed in one place to see the effect
@@ -221,6 +94,14 @@ There are several token categories:
 - Typography
 - Global
 
+The full list of tokens available can be found in the source of the
+`@carbon/themes` package per theme for
+[white](https://github.com/carbon-design-system/carbon/blob/main/packages/themes/src/white.js),
+[g10](<(https://github.com/carbon-design-system/carbon/blob/main/packages/themes/src/g10.js)>),
+[g90](https://github.com/carbon-design-system/carbon/blob/main/packages/themes/src/g90.js),
+and
+[g100](https://github.com/carbon-design-system/carbon/blob/main/packages/themes/src/g100.js).
+
 ### Color
 
 Each theme is assigned universal color variables, which are determined by common
@@ -228,100 +109,6 @@ roles and usage. This allows for uniform color application across themes while
 maintaining full styling flexibility. For more information, see the
 [color](/guidelines/color/overview) page.
 
-```scss
-$theme--white: (
-  // Background
-  background: #ffffff,
-  background-active: #c6c6c6,
-  background-hover: #e5e5e5,
-  background-selected: #e0e0e0,
-  background-selected-hover: #cacaca,
-  background-inverse: #393939,
-  background-inverse-hover: #4c4c4c,
-  background-brand: #0f62fe,
-  // Layer
-  layer: #f4f4f4,
-  layer-active: #c6c6c6,
-  layer-hover: #e5e5e5,
-  layer-selected: #e0e0e0,
-  layer-selected-hover: #cacaca,
-  layer-selected-inverse: #161616,
-  layer-selected-disabled: #8d8d8d,
-  layer-accent: #e0e0e0,
-  layer-accent-active: #a8a8a8,
-  layer-accent-hover: #d1d1d1,
-  layer-disabled: #f4f4f4,
-  // Field
-  field: #f4f4f4,
-  field-hover: #e5e5e5,
-  field-disabled: #f4f4f4,
-  // Interactive
-  interactive: #0f62fe,
-  // Border
-  border-subtle: #e0e0e0,
-  border-subtle-selected: #c6c6c6,
-  border-strong: #8d8d8d,
-  border-inverse: #161616,
-  border-interactive: #0f62fe,
-  border-disabled: #f4f4f4,
-  // Text
-  text-primary: #161616,
-  text-secondary: #525252,
-  text-placeholder: #a8a8a8,
-  text-helper: #6f6f6f,
-  text-on-color: #ffffff,
-  text-inverse: #ffffff,
-  text-disabled: #c6c6c6,
-  text-on-color-disabled: #8d8d8d,
-  //Link
-  link-primary: #0f62fe,
-  link-primary-hover: #0043ce,
-  link-secondary: #0043ce,
-  link-visited: #8a3ffc,
-  link-inverse: #78a9ff,
-  //Icon
-  icon-primary: #161616,
-  icon-secondary: #525252,
-  icon-on-color: #ffffff,
-  icon-inverse: #ffffff,
-  icon-disabled: #c6c6c6,
-  icon-on-color-disabled: #8d8d8d,
-  // Support
-  support-error: #da1e28,
-  support-success: #198038,
-  support-warning: #f1c21b,
-  support-info: #0043ce,
-  support-error-inverse: #fa4d56,
-  support-success-inverse: #42be65,
-  support-warning-inverse: #f1c21b,
-  support-info-inverse: #4589ff,
-  // Misc.
-  overlay: rgba(22, 22, 22, 0.5),
-  toggle-off: #8d8d8d,
-  // Button
-  button-primary: #0f62fe,
-  button-primary-active: #002d9c,
-  button-primary-hover: #0353e9,
-  button-secondary: #393939,
-  button-secondary-active: #6f6f6f,
-  button-secondary-hover: #4c4c4c,
-  button-tertiary: #0f62fe,
-  button-tertiary-active: #002d9c,
-  button-tertiary-hover: #0353e9,
-  button-danger-primary: #da1e28,
-  button-danger-secondary: #da1e28,
-  button-danger-active: #750e13,
-  button-danger-hover: #b81921,
-  button-disabled: #c6c6c6,
-  // Focus
-  focus-inset: #ffffff,
-  focus-inverse: #ffffff,
-  // Skeleton
-  skeleton-background: #e5e5e5,
-  skeleton-element: #c6c6c6
-);
-```
-
 ### Spacing
 
 Use the spacing scale when building individual components. It includes small
@@ -329,22 +116,6 @@ increments needed to create appropriate spatial relationships for detail-level
 designs. For more information, see the [spacing](/guidelines/spacing/overview/)
 page.
 
-```scss
-  $spacing-01: 0.125rem,
-  $spacing-02: 0.25rem,
-  $spacing-03: 0.5rem,
-  $spacing-04: 0.75rem,
-  $spacing-05: 1rem,
-  $spacing-06: 1.5rem,
-  $spacing-07: 2rem,
-  $spacing-08: 2.5rem,
-  $spacing-09: 3rem,
-  $spacing-10: 4rem,
-  $spacing-11: 5rem,
-  $spacing-12: 6rem,
-  $spacing-13: 10rem,
-```
-
 ### Typography
 
 Typography has four categories of type styles (universal, productive, editorial,
@@ -353,491 +124,12 @@ both within components and across layouts. Type tokens are determined by their
 role across the system. For more information, see the
 [typography](/guidelines/typography/overview/) page.
 
-```scss
-// Universal
-$caption-01: (
-  font-family: font-family('sans'),
-  font-size: type-scale(1),
-  font-weight: font-weight('regular'),
-  line-height: rem(16px),
-  letter-spacing: 0.32px,
-) !default;
-
-$label-01: (
-  font-family: font-family('sans'),
-  font-size: type-scale(1),
-  font-weight: font-weight('regular'),
-  line-height: rem(16px),
-  letter-spacing: 0.32px,
-) !default;
-
-$helper-text-01: (
-  font-family: font-family('sans'),
-  font-size: type-scale(1),
-  font-style: italic,
-  line-height: rem(16px),
-  letter-spacing: 0.32px,
-) !default;
-
-$body-short-01: (
-  font-family: font-family('sans'),
-  font-size: type-scale(2),
-  font-weight: font-weight('regular'),
-  line-height: rem(18px),
-  letter-spacing: 0.16px,
-) !default;
-
-$body-long-01: (
-  font-family: font-family('sans'),
-  font-size: type-scale(2),
-  font-weight: font-weight('regular'),
-  line-height: rem(20px),
-  letter-spacing: 0.16px,
-) !default;
-
-$body-short-02: (
-  font-family: font-family('sans'),
-  font-size: type-scale(3),
-  font-weight: font-weight('regular'),
-  line-height: rem(22px),
-  letter-spacing: 0,
-) !default;
-
-$body-long-02: (
-  font-family: font-family('sans'),
-  font-size: type-scale(3),
-  font-weight: font-weight('regular'),
-  line-height: rem(24px),
-  letter-spacing: 0,
-) !default;
-
-$code-01: (
-  font-family: font-family('mono'),
-  font-size: type-scale(1),
-  font-weight: font-weight('regular'),
-  line-height: rem(16px),
-  letter-spacing: 0.32px,
-) !default;
-
-$code-02: (
-  font-family: font-family('mono'),
-  font-size: type-scale(2),
-  font-weight: font-weight('regular'),
-  line-height: rem(20px),
-  letter-spacing: 0.32px,
-) !default;
-
-$heading-01: (
-  font-family: font-family('sans'),
-  font-size: type-scale(2),
-  font-weight: font-weight('semibold'),
-  line-height: rem(18px),
-  letter-spacing: 0.16px,
-) !default;
-
-$heading-02: (
-  font-family: font-family('sans'),
-  font-size: type-scale(3),
-  font-weight: font-weight('semibold'),
-  line-height: rem(22px),
-  letter-spacing: 0,
-) !default;
-```
-
-```scss
-// Productive
-$productive-heading-03: (
-  font-family: font-family('sans'),
-  font-size: type-scale(5),
-  font-weight: font-weight('regular'),
-  line-height: rem(26px),
-  letter-spacing: 0,
-) !default;
-
-$productive-heading-04: (
-  font-family: font-family('sans'),
-  font-size: type-scale(7),
-  font-weight: font-weight('regular'),
-  line-height: rem(36px),
-  letter-spacing: 0,
-) !default;
-
-$productive-heading-05: (
-  font-family: font-family('sans'),
-  font-size: type-scale(8),
-  font-weight: font-weight('regular'),
-  line-height: rem(40px),
-  letter-spacing: 0,
-) !default;
-```
-
-```scss
-// Expressive
-$expressive-heading-03: (
-  font-family: font-family('sans'),
-  font-size: type-scale(5),
-  font-weight: font-weight('regular'),
-  line-height: 130%,
-  letter-spacing: 0,
-  breakpoints: (
-    xlg: (
-      font-size: type-scale(5),
-      line-height: 125%,
-    ),
-    max: (
-      font-size: type-scale(6),
-    ),
-  ),
-) !default;
-
-$expressive-heading-04: (
-  font-family: font-family('sans'),
-  font-size: type-scale(7),
-  font-weight: font-weight('regular'),
-  line-height: 129%,
-  letter-spacing: 0,
-  breakpoints: (
-    xlg: (
-      font-size: type-scale(7),
-      line-height: 125%,
-    ),
-    max: (
-      font-size: type-scale(8),
-    ),
-  ),
-) !default;
-
-$expressive-heading-05: (
-  font-family: font-family('sans'),
-  font-size: type-scale(8),
-  font-weight: font-weight('regular'),
-  line-height: 125%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: type-scale(9),
-      line-height: 122%,
-    ),
-    lg: (
-      font-size: type-scale(10),
-      line-height: 119%,
-    ),
-    xlg: (
-      font-size: type-scale(11),
-      line-height: 117%,
-    ),
-    max: (
-      font-size: type-scale(13),
-    ),
-  ),
-) !default;
-
-$expressive-heading-06: (
-  font-family: font-family('sans'),
-  font-size: type-scale(8),
-  font-weight: font-weight('semibold'),
-  line-height: 125%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: type-scale(9),
-      line-height: 122%,
-    ),
-    lg: (
-      font-size: type-scale(10),
-      line-height: 119%,
-    ),
-    xlg: (
-      font-size: type-scale(11),
-      line-height: 117%,
-    ),
-    max: (
-      font-size: type-scale(13),
-    ),
-  ),
-) !default;
-
-$expressive-paragraph-01: (
-  font-family: font-family('sans'),
-  font-size: type-scale(6),
-  font-weight: font-weight('light'),
-  line-height: 125%,
-  letter-spacing: 0,
-  breakpoints: (
-    lg: (
-      font-size: type-scale(7),
-      line-height: 129%,
-    ),
-    max: (
-      font-size: type-scale(8),
-      line-height: 125%,
-    ),
-  ),
-);
-```
-
-```scss
-// Additional styles
-$quotation-01: (
-  font-family: font-family('serif'),
-  font-size: type-scale(5),
-  font-weight: font-weight('regular'),
-  line-height: 130%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: type-scale(5),
-    ),
-    lg: (
-      font-size: type-scale(6),
-      line-height: 125%,
-    ),
-    xlg: (
-      font-size: type-scale(7),
-      line-height: 129%,
-    ),
-    max: (
-      font-size: type-scale(8),
-      line-height: 125%,
-    ),
-  ),
-) !default;
-
-$quotation-02: (
-  font-family: font-family('serif'),
-  font-size: type-scale(8),
-  font-weight: font-weight('light'),
-  line-height: 125%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: type-scale(9),
-      line-height: 122%,
-    ),
-    lg: (
-      font-size: type-scale(10),
-      line-height: 119%,
-    ),
-    xlg: (
-      font-size: type-scale(11),
-      line-height: 117%,
-    ),
-    max: (
-      font-size: type-scale(13),
-    ),
-  ),
-) !default;
-
-$display-01: (
-  font-family: font-family('sans'),
-  font-size: type-scale(10),
-  font-weight: font-weight('light'),
-  line-height: 119%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: type-scale(10),
-    ),
-    lg: (
-      font-size: type-scale(12),
-    ),
-    xlg: (
-      font-size: type-scale(13),
-      line-height: 117%,
-    ),
-    max: (
-      font-size: type-scale(15),
-      line-height: 113%,
-    ),
-  ),
-) !default;
-
-$display-02: (
-  font-family: font-family('sans'),
-  font-size: type-scale(10),
-  font-weight: font-weight('semibold'),
-  line-height: 119%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: type-scale(10),
-    ),
-    lg: (
-      font-size: type-scale(12),
-    ),
-    xlg: (
-      font-size: type-scale(13),
-      line-height: 116%,
-    ),
-    max: (
-      font-size: type-scale(15),
-      line-height: 113%,
-    ),
-  ),
-) !default;
-
-$display-03: (
-  font-family: font-family('sans'),
-  font-size: type-scale(10),
-  font-weight: font-weight('light'),
-  line-height: 119%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: type-scale(14),
-      line-height: 115%,
-    ),
-    lg: (
-      font-size: type-scale(17),
-      line-height: 111%,
-      letter-spacing: -0.64px,
-    ),
-    xlg: (
-      font-size: type-scale(20),
-      line-height: 107%,
-      letter-spacing: -0.64px,
-    ),
-    max: (
-      font-size: type-scale(23),
-      line-height: 105%,
-      letter-spacing: -0.96px,
-    ),
-  ),
-) !default;
-
-$display-04: (
-  font-family: font-family('sans'),
-  font-size: type-scale(10),
-  font-weight: font-weight('semibold'),
-  line-height: 119%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: type-scale(14),
-      line-height: 115%,
-    ),
-    lg: (
-      font-size: type-scale(17),
-      line-height: 111%,
-      letter-spacing: -0.64px,
-    ),
-    xlg: (
-      font-size: type-scale(20),
-      line-height: 107%,
-      letter-spacing: -0.64px,
-    ),
-    max: (
-      font-size: type-scale(23),
-      line-height: 105%,
-      letter-spacing: -0.96px,
-    ),
-  ),
-) !default;
-```
-
 ### Global
 
 The other categories are global and component-specific variables. These control
-more general styling of components, such as layer usage or border width.
-
-```scss
-// Global
-$input-border: 1px solid transparent !default !global;
-$input-label-weight: 400 !default !global;
-$disabled: $disabled-02 !default !global;
-$disabled-background-color: $disabled-01 !default !global;
-$focus: $ibm-color__blue-60 !default !global;
-
-// Link
-$link-visited: $ibm-color__purple-60 !default !global;
-$link-inverse-color: #6ea6ff !default !global;
-
-// Tooltip
-$tooltip-background-color: $inverse-02 !default !global;
-
-// Button Theme Variables
-$button-font-weight: 400 !default !global;
-$button-font-size: 0.875rem !default !global;
-$button-border-radius: 0 !default !global;
-$button-height: 48px !default !global;
-$button-padding: 0.875rem 15px !default !global;
-$button-padding-sm: 0.375rem 15px !default !global;
-$button-padding-lg: $spacing-04 !default !global;
-$button-border-width: 1px !default !global;
-$button-outline-width: 3px !default !global;
-$button-outline-offset: -5px !default !global;
-$button-outline: 1px solid $ibm-color__white-0 !default !global;
-
-// Accordion (Reverse)
-$accordion-flex-direction: row-reverse !default !global;
-$accordion-justify-content: flex-start !default !global;
-$accordion-arrow-margin: 0 $spacing-05 0 0 !default !global;
-$accordion-title-margin: 0 0 0 $spacing-05 !default !global;
-$accordion-content-padding: 0 0 0 $spacing-05 !default !global;
-
-// Card
-$card-text-align: center !default !global;
-$card-flex-align: center !default !global;
-
-// Checkbox
-$checkbox-border-width: 2px !default !global;
-
-// Code Snippet
-$snippet-background-color: $ui-01 !default !global;
-$snippet-border-color: $ui-03 !default !global;
-
-// Content Switcher
-$content-switcher-border-radius: 0px !default !global;
-$content-switcher-option-border: 1px solid $brand-01 !default !global;
-$content-switcher-divider: $ui-03 !default !global;
-
-// Data Table
-$data-table-heading-transform: uppercase !default !global;
-$data-table-heading-border-bottom: 1px solid $brand-01 !default !global;
-$data-table-row-height: 2rem !default !global;
-$data-table-zebra-color: #fcfcfc !default !global;
-$data-table-column-hover: $hover-selected-ui !default !global;
-
-// Date Picker
-$date-picker-in-range-background-color: $ibm-color__blue-20 !default !global;
-
-// Modal
-$modal-border-top: $brand-01 4px solid !default !global;
-$modal-footer-background-color: $ui-03 !default !global;
-
-// Notification
-$notification-info-background-color: $ibm-color__blue-10 !default !global;
-$notification-error-background-color: $ibm-color__red-10 !default !global;
-$notification-warning-background-color: rgba(#fdd13a, 0.15) !default !global;
-$notification-success-background-color: $ibm-color__green-10 !default !global;
-
-// Progress Indicator
-$progress-indicator-bar-width: 1px inset transparent !default !global;
-$progress-indicator-stroke-width: 5 !default !global;
-$progress-indicator-line-offset: 0.625rem !default !global;
-
-//Code Snippet
-$copy-active: $active-ui !default !global;
-$copy-btn-feedback: $ibm-color__gray-80 !default !global;
-
-// Radio Button
-$radio-border-width: 1px !default !global;
-
-// Structured Theme Variables
-$structured-list-padding: 2rem !default !global;
-$structured-list-text-transform: none !default !global;
-
-// Slider
-
-// Tab
-$tab-underline-color: 3px solid $ibm-color__gray-30 !default !global;
-$tab-underline-color-hover: 3px solid $ibm-color__gray-60 !default !global;
-$tab-text-disabled: $ibm-color__gray-30 !default !global;
-$tab-underline-disabled: 3px solid $ibm-color__gray-10 !default !global;
-
-// Skeleton Loading
-$skeleton: rgba($color__blue-51, 0.1) !default !global;
-```
+more general styling of components, such as layer usage or border width. The
+full list of tokens available can be found in
+[the source of the `@carbon/themes` package](https://github.com/carbon-design-system/carbon/blob/main/packages/themes/src/white.js).
 
 ## Theming applied
 
diff --git a/src/pages/guidelines/typography/code.mdx b/src/pages/guidelines/typography/code.mdx
index 65abb0f32a3..90290d03b8f 100644
--- a/src/pages/guidelines/typography/code.mdx
+++ b/src/pages/guidelines/typography/code.mdx
@@ -7,7 +7,7 @@ title: Typography
 description:
   Typography can help create clear hierarchies, organize information, and guide
   users through a product or experience.
-tabs: ['Overview', 'Styling strategies', 'Type sets', 'Code']
+tabs: ['Overview', 'Style strategies', 'Type sets', 'Code']
 ---
 
 <PageDescription>
@@ -20,9 +20,9 @@ IBM Plex and create effective typography across your products more easily.
 
 <InlineNotification>
 
-If you’re using @carbon/react there’s no reason to install the type package
-separately. See our [get started](/get-started/develop/react) guide to start
-building.
+If you're using `@carbon/react`, you probably don't need need to install the
+type package separately. See our [Carbon React](/developing/frameworks/react/)
+guide to start building.
 
 </InlineNotification>
 
diff --git a/src/pages/guidelines/typography/overview.mdx b/src/pages/guidelines/typography/overview.mdx
index 767a6057d92..ca1f92d6fa0 100644
--- a/src/pages/guidelines/typography/overview.mdx
+++ b/src/pages/guidelines/typography/overview.mdx
@@ -8,7 +8,7 @@ title: Typography
 description:
   Typography can help create clear hierarchies, organize information, and guide
   users through a product or experience.
-tabs: ['Overview', 'Styling strategies', 'Type sets', 'Code']
+tabs: ['Overview', 'Style strategies', 'Type sets', 'Code']
 ---
 
 import TypeScaleTable from '../../../../src/components/TypeScaleTable';
@@ -51,7 +51,7 @@ The productive styles work together to support the hierarchy of information and
 set user expectations. On the other hand, the larger expressive type styles
 allow for a more dramatic, graphic use of type in editorial and marketing
 design. These type styles are excellent for long form reading and scanning, but
-would be distracting for use in product.
+would be distracting if used in product.
 
 Within **Body styles** and **Utility styles**, the same set of styles are
 offered. Productive styles are named with a suffix of `-01` and expressive style
@@ -63,7 +63,7 @@ headings are responsive and the type styles change size at different
 breakpoints.
 
 For more detail, see
-[Styling strategies](/guidelines/typography/styling-strategies/) and
+[Style strategies](/guidelines/typography/style-strategies/) and
 [Type sets](/guidelines/typography/type-sets/).
 
 ## Typeface: IBM Plex
@@ -134,8 +134,8 @@ long text.
 ### Italic
 
 Each weight has an italic style, which should only be used when you need to
-emphasize certain words in a sentence (titles of works, technical terms, names
-of devices, and captions).
+emphasize certain words in a sentence (i.e., titles of works, technical terms,
+names of devices, and captions).
 
 <TypeWeight type="italic" />
 
diff --git a/src/pages/guidelines/typography/styling-strategies.mdx b/src/pages/guidelines/typography/style-strategies.mdx
similarity index 98%
rename from src/pages/guidelines/typography/styling-strategies.mdx
rename to src/pages/guidelines/typography/style-strategies.mdx
index 392ffeafcf5..1197c7da2a5 100644
--- a/src/pages/guidelines/typography/styling-strategies.mdx
+++ b/src/pages/guidelines/typography/style-strategies.mdx
@@ -6,7 +6,7 @@ title: Typography
 description:
   Carbon provides designers with two type sets that support productive and
   expressive experiences.
-tabs: ['Overview', 'Styling strategies', 'Type sets', 'Code']
+tabs: ['Overview', 'Style strategies', 'Type sets', 'Code']
 ---
 
 <PageDescription>
@@ -129,7 +129,7 @@ facilitate focus.
 
 ### Using productive moments within IBM.com pages
 
-Here are some of the places the Dotcom team use productive moments:
+Here are some of the places the Dotcom team uses productive moments:
 
 - The global masthead mega menu
 - IBM.com search
diff --git a/src/pages/guidelines/typography/type-sets.mdx b/src/pages/guidelines/typography/type-sets.mdx
index c4579cf2dba..5eb00230a24 100644
--- a/src/pages/guidelines/typography/type-sets.mdx
+++ b/src/pages/guidelines/typography/type-sets.mdx
@@ -8,7 +8,7 @@ title: Typography
 description:
   The productive and expressive type sets support designers creating for a full
   range of user needs and activities across product and web pages.
-tabs: ['Overview', 'Styling strategies', 'Type sets', 'Code']
+tabs: ['Overview', 'Style strategies', 'Type sets', 'Code']
 ---
 
 import TypesetStyle from 'components/TypesetStyle';
@@ -50,7 +50,7 @@ Carbon uses type tokens to manage typography, and these tokens sit within two
 type sets. The productive and expressive type sets support designers creating
 for a full range of user needs and activities across product and web pages. To
 understand when to use styles from each set, see
-[Styling strategies](/guidelines/typography/styling-strategies).
+[Style strategies](/guidelines/typography/style-strategies).
 
 #### Base type sizes
 
@@ -74,18 +74,18 @@ nature of the pages.
   density of information housed inside containers for space efficiency, and in
   these situations fixed type styles are a must.
 
-- The expressive type set has two fixed headings, for use where smaller headings
-  are needed. The remaining headings are _fluid_. Web pages need to be able to
-  flex and work at different breakpoints, and the fluid heading styles change
-  size at different breakpoints, and can extrapolate/stretch in between sizes
-  for smooth transitions.
+- The expressive type set has two fixed headings that are to be used where
+  smaller headings are needed. The remaining headings are _fluid_. Web pages
+  need to be able to flex and work at different breakpoints, and the fluid
+  heading styles change size at different breakpoints, and can
+  extrapolate/stretch in between sizes for smooth transitions.
 
 ## Utility styles
 
-The utility styles are for use with productive and expressive moments and
-include styles for code snippets, labels for captions and helper text, as well
-as legal copy. Productive styles have a suffix of `-01` and expressive styles
-have a suffix of `-02`.
+The utility styles are used with productive and expressive moments and include
+styles for code snippets, labels for captions and helper text, as well as legal
+copy. Productive styles have a suffix of `-01` and expressive styles have a
+suffix of `-02`.
 
 <TypesetStyle typesets="smallStyle" />
 
@@ -116,7 +116,7 @@ styles change size at different breakpoints.
 Do not use these styles inside a container. They may be used in product pages
 where text sits outside of a container, and a blend of expressive and productive
 type styles is desired for hierarchy and distinction. For more information, see
-[Styling strategies](/guidelines/typography/styling-strategies).
+[Style strategies](/guidelines/typography/style-strategies).
 
 <TypesetStyle typesets="fluidHeadings" breakpointControls={true} />
 
@@ -125,7 +125,7 @@ type styles is desired for hierarchy and distinction. For more information, see
 The callout and display styles are part of the expressive set and being fluid,
 they will adjust at different breakpoints. Do not use these styles inside a
 container. For guidance about using display styles, see
-[Styling strategies](/guidelines/typography/styling-strategies#expressive-use-cases).
+[Style strategies](/guidelines/typography/style-strategies#expressive-use-cases).
 
 <TypesetStyle typesets="fluidCallouts,fluidDisplay" breakpointControls={true} />
 
diff --git a/src/pages/help/contact-us/index.mdx b/src/pages/help/contact-us/index.mdx
index 2e96f4d36db..89f86c21492 100755
--- a/src/pages/help/contact-us/index.mdx
+++ b/src/pages/help/contact-us/index.mdx
@@ -58,6 +58,7 @@ GitHub issue.
 #### Code issues
 
 - [@carbon/react](https://github.com/carbon-design-system/carbon/issues/new/choose)
+- [carbon-web-components](https://github.com/carbon-design-system/carbon-web-components/issues/new)
 - [carbon-components-angular](https://github.com/IBM/carbon-components-angular/issues/new)
 - [carbon-components-vanilla](https://github.com/carbon-design-system/carbon/issues/new/choose)
 - [carbon-components-vue](https://github.com/carbon-design-system/carbon-components-vue/issues/new)
@@ -92,8 +93,8 @@ For designer questions:
 [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/)
 
 For developer questions:
-[#carbon-components](https://ibm-studios.slack.com/messages/C046Y0YUD/),
-[#carbon-react](https://ibm-studios.slack.com/messages/C2K6RFJ1G/)
+[#carbon-react](https://ibm-studios.slack.com/messages/C2K6RFJ1G/),
+[#carbon-web-components](https://ibm-studios.slack.com/archives/CL83LMKSA)
 
 ### Email
 
diff --git a/src/pages/migrating/guide/design.mdx b/src/pages/migrating/guide/design.mdx
index 2f51b8edccc..f281238818c 100644
--- a/src/pages/migrating/guide/design.mdx
+++ b/src/pages/migrating/guide/design.mdx
@@ -30,23 +30,42 @@ accessibility, collaboration, and efficiency for users.
 
 ### What's new
 
-- Added new color tokens
-- Introduced layering models: layer set tokens and contextual layer tokens
+- Added new color tokens.
+- Introduced layering models: layer set tokens and contextual layer tokens.
 
 ### What's changed
 
-- Updated existing color token names to better reflect their usage
-- Updated layer styles with new color tokens
-- Updated text styles with new token names
-- Removal of `light` variants (in favor of new layer and contextual token sets)
+- Updated existing color token names to better reflect their usage.
+- Updated layer styles with new color tokens.
+- Updated text styles with new token names.
+- Removal of `light` variants (in favor of new layer and contextual token sets).
 
 ### Kit migration
 
-| Design tool                          | V11                            | Migration strategy                                                                                                                                                                                                                                                                                                     |
-| ------------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Figma](/designing/kits/figma)       | Beta available – _IBMers only_ | The v11 Figma updates are available as new libraries. Teams need to swap out assets from v10 to v11 assets. The v10 Figma files will not receive a continuous update and will remain permanently on v10. Expected external release at then end of Q3 2022.                                                             |
-| [Sketch](/designing/kits/sketch)     | Update available               | The same Sketch Cloud libraries that were used in v10 have been updated to include the v11 changes. Do not accept the library update until you are ready to work in v11. There are new [v10](https://v10.carbondesignsystem.com/designing/kits/sketch#get-the-kit) libraries available for teams that still need them. |
-| [Adobe XD](/designing/kits/adobe-xd) | Partial update available       | Some of the v11 changes have been made in the XD files. It is yet to be determined when all the other changes will be added.                                                                                                                                                                                           |
+| Design tool                          | v11                      | Migration strategy                                                                                                                                                                                                                                                                                                     |
+| ------------------------------------ | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Figma](/designing/kits/figma)       | Update available         | The v11 Figma updates are available as new libraries. Teams need to swap out assets from v10 to v11 assets to migrate. The v10 Figma files will not receive a continuous update and will remain permanently on v10.                                                                                                    |
+| [Sketch](/designing/kits/sketch)     | Update available         | The same Sketch Cloud libraries that were used in v10 have been updated to include the v11 changes. Do not accept the library update until you are ready to work in v11. There are new [v10](https://v10.carbondesignsystem.com/designing/kits/sketch#get-the-kit) libraries available for teams that still need them. |
+| [Adobe XD](/designing/kits/adobe-xd) | Partial update available | Some of the v11 changes have been made in the XD files. It is yet to be determined when all the other changes will be added.                                                                                                                                                                                           |
+
+#### Figma
+
+Migration to the new v11 Carbon libraries will be a manual process from v10.
+Here are some steps of how to migrate your Text and Color styles from v10 to
+v11.
+
+1. Swap the library from v10 to v11.
+2. Open the library panel and select the `v10` library.
+3. Click the `Swap library` button.
+4. Take a screenshot of the styles that didn't swap.
+5. Visit the `v11` Text or Color styles file in `IBM Design Systems`.
+6. Duplicate the file and move it to your team's space.
+7. Rename the duplicate file to a temporary name.
+8. Change the names of the text or color styles that didn't swap in Step 5 to
+   match the name and organization of v10.
+9. Swap to this temporary library.
+10. Update the names back to v11 and swap to the actual v11 library.
+11. Check nested components for text style overrides.
 
 ## Components
 
diff --git a/src/pages/migrating/guide/overview.mdx b/src/pages/migrating/guide/overview.mdx
index 1ce697b017f..5dc98ae873b 100644
--- a/src/pages/migrating/guide/overview.mdx
+++ b/src/pages/migrating/guide/overview.mdx
@@ -81,7 +81,7 @@ The One with the Cool Stuff.
 <Row className="resource-card-group">
 <Column colMd={4} colLg={4} noGutterSm>
   <ResourceCard
-    subTitle="Carbon and IDL weekly design playback: Carbon v11 release"
+    subTitle="Carbon and IDL bi-weekly design playback: Carbon v11 release"
     href="https://ec.yourlearning.ibm.com/w3/playback/10263311"
     actionIcon="launch"
     >
@@ -154,19 +154,26 @@ To learn more about the new type tokens in v11, check out our
 If you're curious about specific changes to tokens, take a look at our
 [v11 Migration Docs](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#type-tokens).
 
-### Design Kits
+### Design kits
+
+#### Sketch
 
 All v11 changes - including type and color token name updates - have been made
 in our Sketch kits. The same Sketch Cloud libraries that were used in v10 have
 been updated to include the v11 changes. The v11 update is available like any
 other Sketch library update. We recommend that you do not accept the library
-update until you are ready to work with v11.
-
-The v11 update for Figma is not yet available. We are waiting to make the v11
-updates after some additional v10 enhancements have been completed. Like with
-Sketch, the same libraries used for v10 will be the same libraries used for v11.
-The targeted release date for Figma is the end of April. Along with the v11
-release, we will also be releasing the Figma kits to the open community.
+update until you are ready to work with v11. We have created separate v10
+libraries due to team migration preferences. If you are still on v10, migrate to
+the v11 libraries when you are ready to do so.
+
+#### Figma
+
+All v11 theme libaries are now available in Figma to IBM's internal users and
+the public community. We have leveraged Figmas latest features in this release
+which may result in breaking changes to some of our components. Like with
+Sketch, we have separate v11 and v10 libraries due to team migration
+preferences. If you are still on v10, migrate to the v11 libraries when you are
+ready to do so.
 
 ### New packages
 
diff --git a/src/pages/whats-happening/meetups/index.mdx b/src/pages/whats-happening/meetups/index.mdx
index 2b7eeca2d74..3d96c820361 100644
--- a/src/pages/whats-happening/meetups/index.mdx
+++ b/src/pages/whats-happening/meetups/index.mdx
@@ -7,7 +7,7 @@ description:
 ---
 
 import { Button } from '@carbon/react';
-import { ArrowRight } from '@carbon/icons-react';
+import { ArrowRight, Launch } from '@carbon/icons-react';
 
 <PageDescription>
 
@@ -39,7 +39,7 @@ along to see other work in progress and learn that way.
 <Row>
   <Button
     kind="tertiary"
-    renderIcon={ArrowRight}
+    renderIcon={Launch}
     href="https://ec.yourlearning.ibm.com/w3/series/10163237"
   >
     Subscribe
@@ -58,7 +58,7 @@ along to see other work in progress and learn that way.
 
 <h2>
   Data visualization weekly playbacks
-  <span>Wednesdays, 10am–11am Central</span>
+  <span>Wednesdays, 11am–12pm Central</span>
 </h2>
 
 _For IBMers only:_ Are you designing a product with data visualization needs?
@@ -87,22 +87,21 @@ requirements, and determine next steps on requested components or functionality.
 <Column colLg={7} colMd={5}>
 
 <h2>
-  Carbon Insiders
-  <span>First Thursdays, 9am–10am Central</span>
+  Carbon Office Hours
+
 </h2>
 
-_For IBMers only:_ A monthly meeting for teams building on top of Carbon to
-discuss best practices, identify areas of reuse, and bring up things the Carbon
-team can do to make their jobs easier. This group helps out with Carbon's
-release cycles to detect breaking changes.
+A once a sprint meeting for teams building with Carbon to ask questions, learn
+about best practices, and bring up things the Carbon team can do to make their
+jobs easier.
 
 <Row>
   <Button
     kind="tertiary"
-    renderIcon={ArrowRight}
-    onClick={() => (window.location.href = 'mailto:carbon@us.ibm.com')}
+    renderIcon={Launch}
+    href="https://ec.yourlearning.ibm.com/w3/series/10289694?layout=grid"
   >
-    Email us
+    Subscribe
   </Button>
 </Row>
 
diff --git a/yarn.lock b/yarn.lock
index c579bc776e2..6bfc19dad41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1061,13 +1061,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.16.7", "@babel/runtime@^7.9.1":
-  version "7.17.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
-  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/runtime@^7.18.3":
   version "7.18.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
@@ -1075,6 +1068,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.9.1":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.12.7", "@babel/template@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
@@ -1154,80 +1154,58 @@
   resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.29.0.tgz#92b1f8822a0ca07d23daba12d360f90debcc3d26"
   integrity sha512-Ga20vVFGrhEgALIVZoWbcooWOVnx7Ox8GbRWlZDEAe6JUbz6ynDKiq3td7GtFVk0ELRCIV8gVu3F/PfssyhwQA==
 
-"@carbon/colors@^11.1.0":
-  version "11.1.0"
-  resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.1.0.tgz#8f3f1d0c06781298668af0e54155d5754e8f08f6"
-  integrity sha512-06VIETXyOgZRNkrZBG+scq5r2souu1klJntSvKaiuDCCgWa3zvMEx0PSGmlnQbj8fCMJlUYx6fUHq6WD9h84pQ==
-
-"@carbon/colors@^11.5.0-rc.0":
-  version "11.5.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.5.0-rc.0.tgz#8f96ac9d909c41fa5fffd622389f23087d4f16aa"
-  integrity sha512-RZX9JqPQTH6/j/laf+JADO8aQsIIBAb41worbYPfiXXEVhf3r3jZiH5oqPF7JBbZTma4rrPZA9LPwtn8JSxiwQ==
-
-"@carbon/elements@^11.10.0-rc.0":
-  version "11.10.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/elements/-/elements-11.10.0-rc.0.tgz#6474ec6a3719adf698d58860cc9a2cc8c4801571"
-  integrity sha512-vwMtgipd8EbDVmXaT+TbaLgZ+nWHC6GV3koE8aaIEVIupWAOOdd6nGyGNfLCsfKKFW1Ccs74garXH8fX7FCJGg==
-  dependencies:
-    "@carbon/colors" "^11.5.0-rc.0"
-    "@carbon/grid" "^11.6.0-rc.0"
-    "@carbon/icons" "^11.8.0-rc.0"
-    "@carbon/layout" "^11.6.0-rc.0"
-    "@carbon/motion" "^11.4.0-rc.0"
-    "@carbon/themes" "^11.9.0-rc.0"
-    "@carbon/type" "^11.9.0-rc.0"
-
-"@carbon/elements@^11.2.0":
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/@carbon/elements/-/elements-11.2.0.tgz#6cfdfcd74598730f7832a0dafe97ebd18042f976"
-  integrity sha512-hL3QgWis+OfqLB23Ny1Uj0+lJIaaxoUzKFWf+bVLfCCAgUCfbZ0I4Pmyi3L/E2rkGIURvBSyIneh4ulnEDr+gg==
-  dependencies:
-    "@carbon/colors" "^11.1.0"
-    "@carbon/grid" "^11.1.0"
-    "@carbon/icons" "^11.2.0"
-    "@carbon/layout" "^11.1.0"
-    "@carbon/motion" "^11.0.0"
-    "@carbon/themes" "^11.2.0"
-    "@carbon/type" "^11.2.0"
-
-"@carbon/feature-flags@^0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@carbon/feature-flags/-/feature-flags-0.7.0.tgz#fe8068b482439ae7af519ccdbf627f31373bb646"
-  integrity sha512-nxVvnSMC6Ia/xn0j02FHPATfB/Iv6nnkZAQ6GrEdPLivSF1T2oaTvgawUsXBO8RBX7wQBq5l7uW8qH/0WfjIFw==
-
-"@carbon/feature-flags@^0.9.0-rc.0":
-  version "0.9.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/feature-flags/-/feature-flags-0.9.0-rc.0.tgz#31f5418737d88e979215affc956dff45a5000933"
-  integrity sha512-EF16XCqMjmHIPU+3J0xQJpxpNFnu7nETZO2IgCtlXPQRPIREEKjc62cO4gP8omNfrXX4kVpOdINuBGWl4tMNbg==
+"@carbon/colors@^11.6.0":
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.6.0.tgz#fe6f806c20fa4ad60eaeb2d9700c5de684d37b05"
+  integrity sha512-LE3aaQvRVR9zI2ao4+SHP8vfEaXtfffq4wXHvbPwoTK+I3Db745XuNWeWxC3Rte2uNPS9sjeEyCid2Q0wY/tSw==
 
-"@carbon/grid@^11.1.0":
-  version "11.1.0"
-  resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.1.0.tgz#6ffec0466c09f91fbfeca45de237e8e8dc2d5fba"
-  integrity sha512-AS78yH03bEqBysxRQ/zujAJTE69NLBsNezDiECUFf+VAS6hJQi0LSDxuuo6HOKQpLqUANj4d6eZdcnrIuw/Z5A==
-  dependencies:
-    "@carbon/layout" "^11.1.0"
+"@carbon/elements@^11.12.0":
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/@carbon/elements/-/elements-11.12.0.tgz#e0697d918c18bdcb18372094ee507d8ecbe0da2a"
+  integrity sha512-XmVgvhvV/NdKuQhbHj1YeZLF4ral7Atk7xkCNKzasoRY7DDnj5HtlanWAGJhxutmpK1pKdlL/tQlxSd5KFAShQ==
+  dependencies:
+    "@carbon/colors" "^11.6.0"
+    "@carbon/grid" "^11.7.0"
+    "@carbon/icons" "^11.10.0"
+    "@carbon/layout" "^11.7.0"
+    "@carbon/motion" "^11.5.0"
+    "@carbon/themes" "^11.10.0"
+    "@carbon/type" "^11.10.0"
+
+"@carbon/elements@^11.8.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@carbon/elements/-/elements-11.11.0.tgz#41ea7fa8d9390e852e539535263d7893fa712869"
+  integrity sha512-pJIjl+YRM7Jc4UmRbuknpzBGeDo6zoPwIiUBursLs/O88HUSbIsQLMOjeEOqZpIrwO0BnvujhVxFEG/ZVW13jg==
+  dependencies:
+    "@carbon/colors" "^11.6.0"
+    "@carbon/grid" "^11.7.0"
+    "@carbon/icons" "^11.9.0"
+    "@carbon/layout" "^11.7.0"
+    "@carbon/motion" "^11.5.0"
+    "@carbon/themes" "^11.10.0"
+    "@carbon/type" "^11.10.0"
+
+"@carbon/feature-flags@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@carbon/feature-flags/-/feature-flags-0.9.0.tgz#13ad061bf7977d65326b35ff87d70419f6132587"
+  integrity sha512-uNCRkxsNwLdJVNwQ5S5vrLAm4yawWzhFBwyP9EgXVmRzJH85Aim+miC+QNjRXntJDYhZYDuLABTeb3VD692ypA==
 
-"@carbon/grid@^11.6.0-rc.0":
-  version "11.6.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.6.0-rc.0.tgz#95d29b42f6ed46500e900258202c03321f75658c"
-  integrity sha512-erkFWojhTVFl2f8hg8gt5N5hLGglByQCsKTH/2sqPKdFPYJdv/FdwLBCdT+6sOqdoNlDkQ5a7fRnFARChdeUkA==
+"@carbon/grid@^11.5.0", "@carbon/grid@^11.7.0":
+  version "11.7.0"
+  resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.7.0.tgz#ea9e151074287a573c5231dc9920d21b1e975aca"
+  integrity sha512-OCDXQNSPVOoBQN08Qn5wo2WpKRGRm/kEBo6ZTl2NoDCl21mcYJZ0IDbKPTukixJB1sUNDUlnrpwMoaznPj48dw==
   dependencies:
-    "@carbon/layout" "^11.6.0-rc.0"
+    "@carbon/layout" "^11.7.0"
 
 "@carbon/icon-helpers@^10.25.0":
   version "10.25.0"
   resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.25.0.tgz#bfe2465e165bb78477c77494610552064fcab09f"
   integrity sha512-jvDUKz3NLopiDf7BROLDAT4NoswMpeXg4+ulbkLlFHdgY3v7gaxT/MJ7f9DZeEIiYUBhQSjTmcB3agIIO1jOdw==
 
-"@carbon/icon-helpers@^10.29.0":
-  version "10.29.0"
-  resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.29.0.tgz#686bc5a337bec6d8fb482655f4564f3376452a35"
-  integrity sha512-QlYdeL97klhqahsayK6uEDPtr7imU4bdaudWPVZojg+7Uio3WNzb5iUNLkWA5zRLvP4xgcjSpbdDX2sT3CgL2A==
-
-"@carbon/icon-helpers@^10.33.0-rc.0":
-  version "10.33.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.33.0-rc.0.tgz#391e753af818a48479c1d7f6c20caf8100136f3a"
-  integrity sha512-B11sBZqpTUK9dMw4UwdTAuVHNxlk7L+V0VYAosAgm1UB+3w7wpY8jbeDh+IzVRJwbabsNDt0LFDGobkczq1bHA==
+"@carbon/icon-helpers@^10.34.0":
+  version "10.34.0"
+  resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.34.0.tgz#04b2957d07e0a98bb66c97c6b71430a955243887"
+  integrity sha512-Ov9EBc1tR/DDrMI0pN1drj2jb27ISmYFBLdDji+aivVJkLPy8R/jikJOsOBgIq2kUjQJYNN199k2acHKjZdYIg==
 
 "@carbon/icons-react@^10.32.0":
   version "10.42.0"
@@ -1238,89 +1216,70 @@
     "@carbon/telemetry" "0.0.0-alpha.6"
     prop-types "^15.7.2"
 
-"@carbon/icons-react@^11.2.0":
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/@carbon/icons-react/-/icons-react-11.2.0.tgz#4197ea9a9db9aa0ebb0b572c2807a7db4962fbeb"
-  integrity sha512-Q8SEn6o3oC45TcwAf/A4jgaz6P69I2LMgXEC9YAawj8am13PoQJyi03JfmJpQ++FF/hPpbImCQYnJSFxebzzZw==
+"@carbon/icons-react@^11.10.0":
+  version "11.10.0"
+  resolved "https://registry.yarnpkg.com/@carbon/icons-react/-/icons-react-11.10.0.tgz#2508768cd2ebf6ff64a713d19b52de6ee4cd060c"
+  integrity sha512-807RWTfbvVzmsDg2DJ4FjwYNbJSgkrEd1Ui8I07YheJVb3sbYGGZMG7aCS0qXVlrQOhB2hggtxSW1w9NksUXNA==
   dependencies:
-    "@carbon/icon-helpers" "^10.29.0"
+    "@carbon/icon-helpers" "^10.34.0"
     "@carbon/telemetry" "0.1.0"
     prop-types "^15.7.2"
 
-"@carbon/icons-react@^11.8.0-rc.0":
-  version "11.8.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/icons-react/-/icons-react-11.8.0-rc.0.tgz#30a58f88be89ed1733e3431bfb04efd166a3bda8"
-  integrity sha512-m2FhwPPpnaHW3vaCSbJakDmvPmlYX14P71tHNRPyXdsb4IeMlgaTDv8oLArIk2SMHnSWa8qqp4wPjvIdVjnMLA==
+"@carbon/icons-react@^11.9.0":
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/@carbon/icons-react/-/icons-react-11.9.0.tgz#9f74e041f3d5c0382ce35c43fa8b86d71db71484"
+  integrity sha512-T8itc4VMRPWeDjt48WXME63INhYswixMTFiJ+9qN95o2k/+L3/RCJeg1E5zUS2RXJXeZ+vqpEhNqhZ3uTmwB5g==
   dependencies:
-    "@carbon/icon-helpers" "^10.33.0-rc.0"
+    "@carbon/icon-helpers" "^10.34.0"
     "@carbon/telemetry" "0.1.0"
     prop-types "^15.7.2"
 
-"@carbon/icons@^11.2.0":
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-11.2.0.tgz#d04f94adc26216e556084259031ee3fb3087389b"
-  integrity sha512-Ib0AUPwCXgDcotPwfb9eu23OBDEtmBbgKEF+RwMMlZEidLTR7DGl0Bvi0iAs1ciJjFO0+4qaxlnMcAJmBgWdYA==
-
-"@carbon/icons@^11.8.0-rc.0":
-  version "11.8.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-11.8.0-rc.0.tgz#4746bcf561a4945fb47649b3b1372766a3c1444f"
-  integrity sha512-TMWi8afhmbKMMRFrz5p7OoUTGyoHVSw67zqwZTk84fYGLjODUTSTOqG2bpjKfWtkWxPRuxzNcjUayYILh6AVMA==
-
-"@carbon/layout@^11.1.0":
-  version "11.1.0"
-  resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.1.0.tgz#7a2072495761b1c59ebfde4271166397d18ba2f5"
-  integrity sha512-aryW3p8nr4xjPtr8uN5oheV9ymtVf6SCYgSkDhCPFSIK8UZt1SCUMobaMVRi3stKTm/7B9WzC27T9nKGz336aA==
-
-"@carbon/layout@^11.6.0-rc.0":
-  version "11.6.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.6.0-rc.0.tgz#704e5a373a626e889466815c2fd4a7dd53af0061"
-  integrity sha512-bQQO/+q5/b1qCAnLy4+JXkDVHJhtWfcJ3gpNTAjdr7bYc98ySIauZT/Sw3Fgk2xM/nvpS/3IERaRs5hCu3FBVA==
-
-"@carbon/motion@^11.0.0":
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.0.0.tgz#2a6e4175ac0a29e9b9a9a83750deae46a0eeedb3"
-  integrity sha512-3KYZJEALeYq99EF/LyIbfa8NvkWeZAeAjlqlYGmCCs8rDihaX97NQ4QgfMT9kwzjD/3sEjV5CTmvI2CJJw0RfA==
-
-"@carbon/motion@^11.4.0-rc.0":
-  version "11.4.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.4.0-rc.0.tgz#7b138143627322af517a42defe1938ff260d31b6"
-  integrity sha512-gbm7rNlnkX6+sgznqFzLqcmTTR3QCeRXP3eQkJCl8QDgz2eC8P7qB3yihx3wAvtOeAyqpGXtMy+uEb77f0ji4A==
-
-"@carbon/pictograms-react@^11.26.2":
-  version "11.26.2"
-  resolved "https://registry.yarnpkg.com/@carbon/pictograms-react/-/pictograms-react-11.26.2.tgz#e5d6f469c01c507543d1d90736c28a2d7cfff29a"
-  integrity sha512-c09HgoJAW52j59um3luS1JaSXZC1tC5c5TBcnvGaLjH0LZ5e3jgRvGqF+LyJ3nAxpX9vzJaHGYv5Fh6vhX+sHg==
-  dependencies:
-    "@carbon/icon-helpers" "^10.29.0"
-    "@carbon/telemetry" "0.1.0"
-    prop-types "^15.7.2"
+"@carbon/icons@^11.10.0":
+  version "11.10.0"
+  resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-11.10.0.tgz#01bd205db95b33e21518a54331f025e944085344"
+  integrity sha512-NUKXGZ5Yi184mvAs9q1sPt0ns2qXOF6dK4DG4mMHq5RgJRjq5diLHIm1t49SIwjF4X8b3KSehmrK7N9H6bf1Zg==
+
+"@carbon/icons@^11.9.0":
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-11.9.0.tgz#61ef4094554c060849167fbb495d6d26a928a22e"
+  integrity sha512-4quGKGaShUtKDfvK3b2wPv/6PMSf8EF1pz0W1+69MIWxyrT7W8kE/jHHhiqtwBoBc8bvARr+ivHSLievt9xbiA==
 
-"@carbon/pictograms-react@^11.32.0-rc.0":
-  version "11.32.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/pictograms-react/-/pictograms-react-11.32.0-rc.0.tgz#79d74811f76c1f77ec1eefdaa415c286b6899379"
-  integrity sha512-oohd6iEDtxkvyU3e/YIAn9z2IsP7L+HNqXVGcF3qxiHUp+dwLGOv/NWqbmq9DJoyKVyDG36PdYeOZGmsIMOWaQ==
+"@carbon/layout@^11.7.0":
+  version "11.7.0"
+  resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.7.0.tgz#55689dd65a36c33bf40c668e240252fd08c240f4"
+  integrity sha512-p4YQvW8U5Go0Tz1PZZgllGSPmoq8xBB5PHByuHiAjzwGclxPsBmY6Ea7tftINFW8VlcjDcampyT8VfZXhP2lFg==
+
+"@carbon/motion@^11.5.0":
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.5.0.tgz#f54c0eb3298e3ea88bda789f02b4c5ef22a0a8d4"
+  integrity sha512-5QEALh+xZzICdgVLanSpiDfBTErzVgEze/xUKs7ZdSbd6p1FaDKDGvCmj9RCsaz/CMVHIWo65MshIglSWX5Xvw==
+
+"@carbon/pictograms-react@^11.30.0", "@carbon/pictograms-react@^11.33.0":
+  version "11.33.0"
+  resolved "https://registry.yarnpkg.com/@carbon/pictograms-react/-/pictograms-react-11.33.0.tgz#c76af66ee808e928f0872f698a45fe4a8ca7c4d8"
+  integrity sha512-GI5V5X/AZCw+Zd2EQdBsEkoYX6QGqL44HUKUOZ1RANxc1Hh2UOXIG7SV0DVOIYPlv+m3FFhaAF77zR/LO+dC5A==
   dependencies:
-    "@carbon/icon-helpers" "^10.33.0-rc.0"
+    "@carbon/icon-helpers" "^10.34.0"
     "@carbon/telemetry" "0.1.0"
     prop-types "^15.7.2"
 
-"@carbon/pictograms@^12.6.0-rc.0":
-  version "12.6.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/pictograms/-/pictograms-12.6.0-rc.0.tgz#8bcdefffa9ddef2fd6c4e6486be467131d786ebe"
-  integrity sha512-1+Us+eKkuVfc8SLYjhud1pMpYH+UXzs3U9+FrOEcTSDbD421pgpvDVenqIRQ+/n/RE3cxWcvqmiM6MizDKIIzw==
+"@carbon/pictograms@^12.7.0":
+  version "12.7.0"
+  resolved "https://registry.yarnpkg.com/@carbon/pictograms/-/pictograms-12.7.0.tgz#efaba2b8f3c10a69cff47d2cb8b6a3506fd6915d"
+  integrity sha512-FmuAXhIb+hYuSiRczPRo8TFI74HxpIc+ek7v02uj1SfPYIU8HwmtlDJHJqeHEKfUAs4FYRsJzAr2eyaquF+Sfw==
 
-"@carbon/react@^1.13.0-rc.0":
-  version "1.13.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/react/-/react-1.13.0-rc.0.tgz#42aa2562543e080bcaf63fcd9fc64caa278afd8c"
-  integrity sha512-UZONIArW5uyq53k99QqlTAhnVhPu7UNXO0MITsW5s7p+0zKdWzu9XOVnMYBSsCfIvYNJhXF9DCgXnuegdNXd9w==
+"@carbon/react@^1.11.0":
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/@carbon/react/-/react-1.14.0.tgz#9e61393aad05d465830d56a87b076555f760112a"
+  integrity sha512-pLJqayUDVFOGt8cYXaFcRKB9kouy6WKMb2cqx5divBsCiGXH0hM/pntjIc3DeI3PYIwWvYiSdcxrLLA9cwrZCg==
   dependencies:
     "@babel/runtime" "^7.18.3"
-    "@carbon/feature-flags" "^0.9.0-rc.0"
-    "@carbon/icons-react" "^11.8.0-rc.0"
-    "@carbon/layout" "^11.6.0-rc.0"
-    "@carbon/styles" "^1.13.0-rc.0"
+    "@carbon/feature-flags" "^0.9.0"
+    "@carbon/icons-react" "^11.9.0"
+    "@carbon/layout" "^11.7.0"
+    "@carbon/styles" "^1.14.0"
     "@carbon/telemetry" "0.1.0"
-    classnames "2.3.1"
+    classnames "2.3.2"
     copy-to-clipboard "^3.3.1"
     downshift "5.2.1"
     flatpickr "4.6.9"
@@ -1336,18 +1295,18 @@
     wicg-inert "^3.1.1"
     window-or-global "^1.0.1"
 
-"@carbon/react@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@carbon/react/-/react-1.2.0.tgz#276db8dd1addbfec256ca4065e51c05a3aeca189"
-  integrity sha512-A0qxC1eeFyv7h5yQ4gO0RqT4vTllYzQAQm396dqBIVdSdHZCsyF03TrTN5ioi1e765pVg/xo8jjrkdF9XnJuLw==
-  dependencies:
-    "@babel/runtime" "^7.16.7"
-    "@carbon/feature-flags" "^0.7.0"
-    "@carbon/icons-react" "^11.2.0"
-    "@carbon/layout" "^11.1.0"
-    "@carbon/styles" "^1.2.0"
+"@carbon/react@^1.15.0":
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/@carbon/react/-/react-1.15.0.tgz#c0c0bfb80274cc76752d2162064817b734cabc27"
+  integrity sha512-P8P4aKmmV2ki9oHG+Vcydw9/IzaeFzyFiDP+97J2CzX/U0MVMviieQkaXUGP1Kst826qvLqkRBuKgfsmy3w+ww==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@carbon/feature-flags" "^0.9.0"
+    "@carbon/icons-react" "^11.10.0"
+    "@carbon/layout" "^11.7.0"
+    "@carbon/styles" "^1.15.0"
     "@carbon/telemetry" "0.1.0"
-    classnames "2.3.1"
+    classnames "2.3.2"
     copy-to-clipboard "^3.3.1"
     downshift "5.2.1"
     flatpickr "4.6.9"
@@ -1363,32 +1322,32 @@
     wicg-inert "^3.1.1"
     window-or-global "^1.0.1"
 
-"@carbon/styles@^1.13.0-rc.0":
-  version "1.13.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.13.0-rc.0.tgz#41c3779f61ec66a2a5b669528889f55227fb66d7"
-  integrity sha512-DcIBpXryRf/2ogS6YZFXIvhBQ+gKjHYhmbthFW5Vo4BnV9iAy5aEFEblVSvHVcJJq2+RtwMcIQPKg6QCuz4wlA==
-  dependencies:
-    "@carbon/colors" "^11.5.0-rc.0"
-    "@carbon/feature-flags" "^0.9.0-rc.0"
-    "@carbon/grid" "^11.6.0-rc.0"
-    "@carbon/layout" "^11.6.0-rc.0"
-    "@carbon/motion" "^11.4.0-rc.0"
-    "@carbon/themes" "^11.9.0-rc.0"
-    "@carbon/type" "^11.9.0-rc.0"
+"@carbon/styles@^1.14.0":
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.14.0.tgz#49da334671cf9b6ab9d466f7502182fc6cf27527"
+  integrity sha512-OotnJLQYDOM+Ap2G/NdF1xMXBHxT2mA688hYk8fKVXl9Ym+JuuVNcfi7nLfsdx4fwHCe4sT4M4aZNMpQThkP8w==
+  dependencies:
+    "@carbon/colors" "^11.6.0"
+    "@carbon/feature-flags" "^0.9.0"
+    "@carbon/grid" "^11.7.0"
+    "@carbon/layout" "^11.7.0"
+    "@carbon/motion" "^11.5.0"
+    "@carbon/themes" "^11.10.0"
+    "@carbon/type" "^11.10.0"
     "@ibm/plex" "6.0.0-next.6"
 
-"@carbon/styles@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.2.0.tgz#b5169f0ead075b2722168386887a309fe2978c50"
-  integrity sha512-Mjayurl0usqnSN/4LDKgQg2eU2XouyUPvmSdaZdAGT9RCnRa5sQsSCAwh90Ctg3e1GwswVYcMynWcGDFpWxpbQ==
-  dependencies:
-    "@carbon/colors" "^11.1.0"
-    "@carbon/feature-flags" "^0.7.0"
-    "@carbon/grid" "^11.1.0"
-    "@carbon/layout" "^11.1.0"
-    "@carbon/motion" "^11.0.0"
-    "@carbon/themes" "^11.2.0"
-    "@carbon/type" "^11.2.0"
+"@carbon/styles@^1.15.0":
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.15.0.tgz#dff61ee40ff89606fc05d77ca0c890301ece6e07"
+  integrity sha512-qyNG95iMHkrz9p0GsTFneVN8nJoPv5z06TVxiFpwGjJXFvlx8ygG+QO1gBkSPFJmOjtA4ejeS38elH2wrQfOBQ==
+  dependencies:
+    "@carbon/colors" "^11.6.0"
+    "@carbon/feature-flags" "^0.9.0"
+    "@carbon/grid" "^11.7.0"
+    "@carbon/layout" "^11.7.0"
+    "@carbon/motion" "^11.5.0"
+    "@carbon/themes" "^11.10.0"
+    "@carbon/type" "^11.10.0"
     "@ibm/plex" "6.0.0-next.6"
 
 "@carbon/telemetry@0.0.0-alpha.6":
@@ -1412,39 +1371,23 @@
   resolved "https://registry.yarnpkg.com/@carbon/telemetry/-/telemetry-0.1.0.tgz#57b331cd5a855b4abbf55457456da8211624d879"
   integrity sha512-kNWt0bkgPwGW0i5h7HFuljbKRXPvIhsKbB+1tEURAYLXoJg9iJLF1eGvWN5iVoFCS2zje4GR3OGOsvvKVe7Hlg==
 
-"@carbon/themes@^11.2.0":
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-11.2.0.tgz#86786737946d8a7ea35cff1b2ca767f2f0c88c16"
-  integrity sha512-dhZwbAoHl47MEdSYSr1S2vq/DYef9djNR/XU9QpbsyuKXvsHwxJti6+hdIKQc9DxQ+jtpCsGYxLeAKu8I8q6XA==
+"@carbon/themes@^11.10.0", "@carbon/themes@^11.7.0":
+  version "11.10.0"
+  resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-11.10.0.tgz#73326e523af11fe7275bfd3b0b37a06b97e91cf5"
+  integrity sha512-KdYurybYbI3yo1cYo74RojITfptsRoaXJW6N3FThF+0gv9YnbQlWNsMYwipZa4SwsKAe/0nw/C9yyPiY3/6FuA==
   dependencies:
-    "@carbon/colors" "^11.1.0"
-    "@carbon/layout" "^11.1.0"
-    "@carbon/type" "^11.2.0"
-    color "^3.1.2"
+    "@carbon/colors" "^11.6.0"
+    "@carbon/layout" "^11.7.0"
+    "@carbon/type" "^11.10.0"
+    color "^4.0.0"
 
-"@carbon/themes@^11.9.0-rc.0":
-  version "11.9.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-11.9.0-rc.0.tgz#79a14b16d6f7c6b260c681743e64c0069125d76c"
-  integrity sha512-yzNpDJxF5FzvFWQ/r9zMrUJYZDpwm4GMXCN3AevCJ1bTWzZPrvWBVoykiaybzq+6/OO2cQKTZzfa6O7/KbNTcQ==
+"@carbon/type@^11.10.0":
+  version "11.10.0"
+  resolved "https://registry.yarnpkg.com/@carbon/type/-/type-11.10.0.tgz#aeceeda9a4ad69009974b53c0969bd7a98ae1a33"
+  integrity sha512-LjhhJchI0Vpnmq2IkNtHy7HIW/WjiOEVXH+bDKf0Laay0EQtwxagQSI41W2+0dNtcK4zJBKjfm1uorsxmR5/Qw==
   dependencies:
-    "@carbon/colors" "^11.5.0-rc.0"
-    "@carbon/layout" "^11.6.0-rc.0"
-    "@carbon/type" "^11.9.0-rc.0"
-    color "^3.1.2"
-
-"@carbon/type@^11.2.0":
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/@carbon/type/-/type-11.2.0.tgz#631d307078eb5d82ac507756f4dd009d81a395b4"
-  integrity sha512-CRv2VA5MyGTYa4WUxUfLal6DVfaWpZCwnvfQr4RgT0qPD3uuGfP6DFoQ7YFnZFVnCZtcsMPJuqzcHiAJFR5jvQ==
-  dependencies:
-    "@carbon/grid" "^11.1.0"
-
-"@carbon/type@^11.9.0-rc.0":
-  version "11.9.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@carbon/type/-/type-11.9.0-rc.0.tgz#9feaf6c3352e69f2cc44103e489368be0a6fed8f"
-  integrity sha512-AmqbBtVWJiuCxD3AsBHbG4TgMhs80fYn6vEVYQtYyih4hXEENgqeLCtBMV1/eaoaR5TGnPCCG/5to4JwhDak/A==
-  dependencies:
-    "@carbon/grid" "^11.6.0-rc.0"
+    "@carbon/grid" "^11.7.0"
+    "@carbon/layout" "^11.7.0"
 
 "@carbon/utils-position@1.1.1":
   version "1.1.1"
@@ -1503,6 +1446,13 @@
     "@parcel/plugin" "2.3.1"
     gatsby-core-utils "^3.8.2"
 
+"@gatsbyjs/potrace@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@gatsbyjs/potrace/-/potrace-2.3.0.tgz#0ac22fb56a02ebc64ce55e4666c4b741cbf27377"
+  integrity sha512-72szhSY/4tPiPPOzq15CG6LW0s9FuWQ86gkLSUvBNoF0s+jsEdRaZmATYNjiY2Skg//EuyPLEqUQnXKXME0szg==
+  dependencies:
+    jimp-compact "^0.16.1-2"
+
 "@gatsbyjs/reach-router@^1.3.6":
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/@gatsbyjs/reach-router/-/reach-router-1.3.6.tgz#4e8225836959be247890b66f21a3198a0589e34d"
@@ -2088,6 +2038,36 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@lmdb/lmdb-darwin-arm64@2.5.3":
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-2.5.3.tgz#c423b068165df18da57a81dce5c95f98c6ab9265"
+  integrity sha512-RXwGZ/0eCqtCY8FLTM/koR60w+MXyvBUpToXiIyjOcBnC81tAlTUHrRUavCEWPI9zc9VgvpK3+cbumPyR8BSuA==
+
+"@lmdb/lmdb-darwin-x64@2.5.3":
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-2.5.3.tgz#dde76e65595b34a17289a63f770a8aee13a85a9b"
+  integrity sha512-337dNzh5yCdNCTk8kPfoU7jR3otibSlPDGW0vKZT97rKnQMb9tNdto3RtWoGPsQ8hKmlRZpojOJtmwjncq1MoA==
+
+"@lmdb/lmdb-linux-arm64@2.5.3":
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-2.5.3.tgz#d98f32383d37a058e6c51b7ffd665c2c2f91c285"
+  integrity sha512-VJw60Mdgb4n+L0fO1PqfB0C7TyEQolJAC8qpqvG3JoQwvyOv6LH7Ib/WE3wxEW9nuHmVz9jkK7lk5HfWWgoO1Q==
+
+"@lmdb/lmdb-linux-arm@2.5.3":
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-2.5.3.tgz#6251143d7b470e126b0b0fc17ae64c6680e268b2"
+  integrity sha512-mU2HFJDGwECkoD9dHQEfeTG5mp8hNS2BCfwoiOpVPMeapjYpQz9Uw3FkUjRZ4dGHWKbin40oWHuL0bk2bCx+Sg==
+
+"@lmdb/lmdb-linux-x64@2.5.3":
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-2.5.3.tgz#ef3a9793391ab4a68379e753943c9055fd0f5bf3"
+  integrity sha512-qaReO5aV8griBDsBr8uBF/faO3ieGjY1RY4p8JvTL6Mu1ylLrTVvOONqKFlNaCwrmUjWw5jnf7VafxDAeQHTow==
+
+"@lmdb/lmdb-win32-x64@2.5.3":
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-2.5.3.tgz#c72e8b6faae31d925d23a6db0379cc3fe0216fdd"
+  integrity sha512-cK+Elf3RjEzrm3SerAhrFWL5oQAsZSJ/LmjL1joIpTfEP1etJJ9CTRvdaV6XLYAxaEkfdhk/9hOvHLbR9yIhCA==
+
 "@loadable/babel-plugin@^5.12.0":
   version "5.13.2"
   resolved "https://registry.yarnpkg.com/@loadable/babel-plugin/-/babel-plugin-5.13.2.tgz#373cddc64ee5437814f7dca1c1b6a7b2c1665a9f"
@@ -3068,6 +3048,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/sharp@^0.30.5":
+  version "0.30.5"
+  resolved "https://registry.yarnpkg.com/@types/sharp/-/sharp-0.30.5.tgz#d75d91f7acf5260525aeae229845046dcff6d17a"
+  integrity sha512-EhO29617AIBqxoVtpd1qdBanWpspk/kD2B6qTFRJ31Q23Rdf+DNU1xlHSwtqvwq1vgOqBwq1i38SX+HGCymIQg==
+  dependencies:
+    "@types/node" "*"
+
 "@types/tmp@^0.0.33":
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.33.tgz#1073c4bc824754ae3d10cfab88ab0237ba964e4d"
@@ -3769,6 +3756,11 @@ async@^3.2.3:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9"
   integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==
 
+async@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
+  integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -5068,7 +5060,7 @@ cheerio@^1.0.0-rc.10:
     parse5-htmlparser2-tree-adapter "^6.0.1"
     tslib "^2.2.0"
 
-"chokidar@>=3.0.0 <4.0.0":
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -5128,7 +5120,12 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.3.1, classnames@^2.2.6:
+classnames@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
+classnames@^2.2.6:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -5335,7 +5332,7 @@ color-string@^1.6.0, color-string@^1.9.0:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.1.2, color@^3.1.3:
+color@^3.1.3:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
   integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
@@ -5343,7 +5340,7 @@ color@^3.1.2, color@^3.1.3:
     color-convert "^1.9.3"
     color-string "^1.6.0"
 
-color@^4.2.3:
+color@^4.0.0, color@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
   integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
@@ -5640,6 +5637,11 @@ core-js@^3.17.2, core-js@^3.18.3:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.19.1.tgz#f6f173cae23e73a7d88fa23b6e9da329276c6641"
   integrity sha512-Tnc7E9iKd/b/ff7GFbhwPVzJzPztGrChB8X8GLqoYGdEOG8IpLnK1xPyo3ZoO3HsK6TodJS58VGPOxA+hLHQMg==
 
+core-js@^3.22.3:
+  version "3.25.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.25.5.tgz#e86f651a2ca8a0237a5f064c2fe56cef89646e27"
+  integrity sha512-nbm6eZSjm+ZuBQxCUPQKQCoUEfFOXjUZ8dTTyikyKaWrTYmAVbykQfwsKE5dBK88u3QCkCrzsx/PPlKfhsvgpw==
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -6352,6 +6354,13 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3
   dependencies:
     ms "2.1.2"
 
+debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -7747,6 +7756,15 @@ file-type@^16.5.3:
     strtok3 "^6.2.4"
     token-types "^4.1.1"
 
+file-type@^16.5.4:
+  version "16.5.4"
+  resolved "https://registry.yarnpkg.com/file-type/-/file-type-16.5.4.tgz#474fb4f704bee427681f98dd390058a172a6c2fd"
+  integrity sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw==
+  dependencies:
+    readable-web-to-node-stream "^3.0.0"
+    strtok3 "^6.2.4"
+    token-types "^4.1.1"
+
 file-type@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/file-type/-/file-type-9.0.0.tgz#a68d5ad07f486414dfb2c8866f73161946714a18"
@@ -8033,6 +8051,15 @@ fs-extra@^10.0.0:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
+fs-extra@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs-extra@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
@@ -8160,6 +8187,27 @@ gatsby-cli@^4.9.0:
     yoga-layout-prebuilt "^1.10.0"
     yurnalist "^2.1.0"
 
+gatsby-core-utils@^3.20.0, gatsby-core-utils@^3.24.0:
+  version "3.24.0"
+  resolved "https://registry.yarnpkg.com/gatsby-core-utils/-/gatsby-core-utils-3.24.0.tgz#0e757bac28ad953a929046138403b3663b733cf7"
+  integrity sha512-P4tbcYOJ1DSYKRP4gIAR9Xta/d/AzjmsK2C6PzX7sNcGnviDKtAIoeV9sE0kNXOqBfUCez25zmAi2cq8NlaxKw==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    ci-info "2.0.0"
+    configstore "^5.0.1"
+    fastq "^1.13.0"
+    file-type "^16.5.3"
+    fs-extra "^10.1.0"
+    got "^11.8.5"
+    import-from "^4.0.0"
+    lmdb "2.5.3"
+    lock "^1.1.0"
+    node-object-hash "^2.3.10"
+    proper-lockfile "^4.1.2"
+    resolve-from "^5.0.0"
+    tmp "^0.2.1"
+    xdg-basedir "^4.0.0"
+
 gatsby-core-utils@^3.8.2, gatsby-core-utils@^3.9.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/gatsby-core-utils/-/gatsby-core-utils-3.9.0.tgz#7be5969622e44c4475cb14f1ac64b49a4072ab6c"
@@ -8252,10 +8300,10 @@ gatsby-parcel-config@^0.0.1:
     "@parcel/transformer-raw" "^2.3.1"
     "@parcel/transformer-react-refresh-wrap" "^2.3.1"
 
-gatsby-plugin-catch-links@^4.9.0:
-  version "4.9.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-4.9.0.tgz#99e5ac3802fcc832b27f18012d3048fc041f0cf1"
-  integrity sha512-Eq5yxHiObwcU4yJUYUGCiDFSyJbkZ286YsG4awZHEBE8zSu36rQWE9A0aUxavRswyAk2yaa4oVQtUqhFyzeIAQ==
+gatsby-plugin-catch-links@^4.21.0:
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-4.24.0.tgz#6e797ad57153ec0b98109aa62f1fed5f73debe94"
+  integrity sha512-jUs+r8MEr6RdHuYe3EnMVeHe1Oddkjzv/2KBqnWQhv6UOGshDyJUe965tfXMGJImr716fwm2zAc9tgcUF7Ya5A==
   dependencies:
     "@babel/runtime" "^7.15.4"
     escape-string-regexp "^1.0.5"
@@ -8297,6 +8345,17 @@ gatsby-plugin-lunr@^1.5.2:
     lunr "^2.3.6"
     lunr-languages "^1.1.0"
 
+gatsby-plugin-manifest@^4.21.0:
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-4.24.0.tgz#ad537b48f9fb8e7c93234945a4889ecf3c099f66"
+  integrity sha512-xlpJMNALNozeC0lIspQQZw68qi4pE1nhgPfsLiUtAc5CLihm2LNbGLAKcYHCXwudRHo5Hvp6Xi4VOwtMkRKwmQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    gatsby-core-utils "^3.24.0"
+    gatsby-plugin-utils "^3.18.0"
+    semver "^7.3.7"
+    sharp "^0.30.7"
+
 gatsby-plugin-manifest@^4.9.0:
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-4.9.0.tgz#ddfd6e8d8597df7bdef07d527b08430508837ecb"
@@ -8308,10 +8367,10 @@ gatsby-plugin-manifest@^4.9.0:
     semver "^7.3.5"
     sharp "^0.30.1"
 
-gatsby-plugin-mdx@^3.9.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-mdx/-/gatsby-plugin-mdx-3.9.0.tgz#6c385bbaf6f609b667f355daeea65f54017e2c40"
-  integrity sha512-W5P9cMTVlWRC8p9dX3MCm7WdmBi05SK4nW4t260kIaD3mJKGNqJjx0cqXwNyNpX5C/Zju+mGqv7vy3od0a3CYQ==
+gatsby-plugin-mdx@3.20.0:
+  version "3.20.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-mdx/-/gatsby-plugin-mdx-3.20.0.tgz#0dff5bc2812fa9ed5aa4e1ecf660d9bc5bc1abfa"
+  integrity sha512-v2cFqe1g8lmM745q2DUoqWca0MT/tX++jykBDqpsLDswushpJgUfZeJ8OhSFgBZIfuVk1LoDi5yf4iWfz/UTwQ==
   dependencies:
     "@babel/core" "^7.15.5"
     "@babel/generator" "^7.15.4"
@@ -8323,13 +8382,13 @@ gatsby-plugin-mdx@^3.9.0:
     "@babel/types" "^7.15.4"
     camelcase-css "^2.0.1"
     change-case "^3.1.0"
-    core-js "^3.17.2"
+    core-js "^3.22.3"
     dataloader "^1.4.0"
     debug "^4.3.1"
     escape-string-regexp "^1.0.5"
     eval "^0.1.4"
-    fs-extra "^10.0.0"
-    gatsby-core-utils "^3.9.0"
+    fs-extra "^10.1.0"
+    gatsby-core-utils "^3.20.0"
     gray-matter "^4.0.2"
     json5 "^2.1.3"
     loader-utils "^1.4.0"
@@ -8359,15 +8418,15 @@ gatsby-plugin-meta-redirect@^1.1.1:
   dependencies:
     fs-extra "^7.0.0"
 
-gatsby-plugin-offline@^5.9.0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-offline/-/gatsby-plugin-offline-5.9.0.tgz#99edd91d166061164929aef3a259709318b47e4d"
-  integrity sha512-jJQj4SuGKNYF45Cng05zGyxeqeMIUINZhD+9xRjPkQ+M2x0Fsgl/Yk2uwzm+9CGWdD05dBZw36asf7WB/bxzhg==
+gatsby-plugin-offline@^5.21.0:
+  version "5.24.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-offline/-/gatsby-plugin-offline-5.24.0.tgz#f866ffa9e138395e3d8dd675801087f3da781561"
+  integrity sha512-NiTLxlFOQSpBz7ZXYEtQB1GQOGoO9Xzg/COUkGXoCKlVW84EzXLRiyc01lZcdBk125maE3L8ZAqsql2k8smxLA==
   dependencies:
     "@babel/runtime" "^7.15.4"
     cheerio "^1.0.0-rc.10"
-    gatsby-core-utils "^3.9.0"
-    glob "^7.2.0"
+    gatsby-core-utils "^3.24.0"
+    glob "^7.2.3"
     idb-keyval "^3.2.0"
     lodash "^4.17.21"
     workbox-build "^4.3.1"
@@ -8389,10 +8448,10 @@ gatsby-plugin-page-creator@^4.9.0:
     globby "^11.0.4"
     lodash "^4.17.21"
 
-gatsby-plugin-react-helmet@^5.9.0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-5.9.0.tgz#6ac992628f99451ec72d8ceeae11f456f7409366"
-  integrity sha512-TpPxg0Cl+zH34P9rVzKW+o6ejC6fZpvZMZ4Gs/zZ4uFswSJo6hwj/teUjB1rGAytPE+d6w9cZ2IP1gEM2RR9Ig==
+gatsby-plugin-react-helmet@^5.21.0:
+  version "5.24.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-5.24.0.tgz#8c9cf8e93e184c87ee9e605467c735c7eb02b821"
+  integrity sha512-SU/SrWsbEFLQhuzDXucYlQ4O5pTdpOdxw07xIRwyFfxFzGml/9f62h2dTtUJOIXP1mYfl31bw7eCbGlc8QzF5w==
   dependencies:
     "@babel/runtime" "^7.15.4"
 
@@ -8401,16 +8460,16 @@ gatsby-plugin-remove-serviceworker@^1.0.0:
   resolved "https://registry.yarnpkg.com/gatsby-plugin-remove-serviceworker/-/gatsby-plugin-remove-serviceworker-1.0.0.tgz#9fb433bc8bd766e14e1d3711c4ac6f051e1dff7c"
   integrity sha1-n7QzvIvXZuFOHTcRxKxvBR4d/3w=
 
-gatsby-plugin-sass-resources@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-sass-resources/-/gatsby-plugin-sass-resources-2.0.0.tgz#56151bff98905c281bbb7f84a7c8f3320fd3f1ba"
-  integrity sha512-qck+/PxacnRNfpNKong+4Dsi+/IgOsFaMneJnA49nGj8+cE9vFeTUKwqhvRqAQmpJQ15zALju7flJ1hXhckZgA==
+gatsby-plugin-sass-resources@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sass-resources/-/gatsby-plugin-sass-resources-3.0.1.tgz#381c9052f61fb2c1ad177394583babded23b4052"
+  integrity sha512-C332NqMOd6z0q7F02OmL/Bl7BoJyD73vcfpF22M+qVy3TE9ugL94Pcdpki8s5TUSwJgqgs9qkTuLD+jDphMsWw==
   dependencies:
     "@babel/runtime" "^7.0.0"
     sass-resources-loader "^1.3.3"
-    webpack "^4.0.0"
+    webpack "^5.0.0"
 
-gatsby-plugin-sass@^5.9.0:
+gatsby-plugin-sass@5.9:
   version "5.9.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-sass/-/gatsby-plugin-sass-5.9.0.tgz#bd1e392bda23e9f6519d9bf189f4b8d5daa25422"
   integrity sha512-yxl6g9KXNriOfJQN3Ra1tZragPXq6bXYY8AsrzBfsuUkYUU75ReWVtFljVSXYp/7/tpA4mvXwniBcWqrNSdHnA==
@@ -8419,6 +8478,27 @@ gatsby-plugin-sass@^5.9.0:
     resolve-url-loader "^3.1.4"
     sass-loader "^10.1.1"
 
+gatsby-plugin-sharp@^4.21.0:
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-4.24.0.tgz#30fa66295105096b476371dfb36062c1dc7456db"
+  integrity sha512-wVs8F9zLeiLf02yLi8vjse1vqSrZsx2u3RsMhoSv1bEinyaI5bcoLZ7mMJCsEeZe2G9mvNrPi4Ymhh/YzgxYCg==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@gatsbyjs/potrace" "^2.3.0"
+    async "^3.2.4"
+    bluebird "^3.7.2"
+    debug "^4.3.4"
+    filenamify "^4.3.0"
+    fs-extra "^10.1.0"
+    gatsby-core-utils "^3.24.0"
+    gatsby-plugin-utils "^3.18.0"
+    lodash "^4.17.21"
+    mini-svg-data-uri "^1.4.4"
+    probe-image-size "^7.2.3"
+    semver "^7.3.7"
+    sharp "^0.30.7"
+    svgo "^2.8.0"
+
 gatsby-plugin-sharp@^4.9.0:
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-4.9.0.tgz#c1370d00d55e025d2e5d1d9b3017865ea9d890c7"
@@ -8467,6 +8547,24 @@ gatsby-plugin-typescript@^4.9.0:
     "@babel/runtime" "^7.15.4"
     babel-plugin-remove-graphql-queries "^4.9.0"
 
+gatsby-plugin-utils@^3.18.0:
+  version "3.18.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-utils/-/gatsby-plugin-utils-3.18.0.tgz#898e9416e3d4fa25195e9ca50d17a5435dfe91a3"
+  integrity sha512-3c2iHYV93+zV8AfUhpWSuU0Bd5sgNDaUMkBYNuJAWrUqUfJY4i+QAD/H4Hvie8dhdGrX6QRWEyKo1k5gV+jERQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@gatsbyjs/potrace" "^2.3.0"
+    fastq "^1.13.0"
+    fs-extra "^10.1.0"
+    gatsby-core-utils "^3.24.0"
+    gatsby-sharp "^0.18.0"
+    graphql-compose "^9.0.7"
+    import-from "^4.0.0"
+    joi "^17.4.2"
+    mime "^3.0.0"
+    mini-svg-data-uri "^1.4.4"
+    svgo "^2.8.0"
+
 gatsby-plugin-utils@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-utils/-/gatsby-plugin-utils-3.3.0.tgz#f37dac15f381acf876eaef94636d41f7671b0604"
@@ -8483,20 +8581,37 @@ gatsby-react-router-scroll@^5.9.0:
     "@babel/runtime" "^7.15.4"
     prop-types "^15.7.2"
 
-gatsby-remark-copy-linked-files@^5.9.0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-5.9.0.tgz#ab9a1419e00f03cdd720ef6d2443124876ba0257"
-  integrity sha512-Dvli4hqncwsLtXM59rrxVQuP4mcV1hBl82i089Kgge0AYiTX1u1arniePemaNyfsNCSn9OUaF5zgbceR5deOjA==
+gatsby-remark-copy-linked-files@^5.21.0:
+  version "5.24.0"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-5.24.0.tgz#d2d5f7dce3908687c9519b0e2e309b4b1223a401"
+  integrity sha512-Dvs3IznwKifcrTOH/bFo+Ee7OZpQz41hJD6HxHs97KRKQnScYWTDXDw45rGnBgrh7QeZEsFQLsdHxqUDSK+35g==
   dependencies:
     "@babel/runtime" "^7.15.4"
     cheerio "^1.0.0-rc.10"
-    fs-extra "^10.0.0"
+    fs-extra "^10.1.0"
     is-relative-url "^3.0.0"
     lodash "^4.17.21"
     path-is-inside "^1.0.2"
-    probe-image-size "^6.0.0"
+    probe-image-size "^7.2.3"
     unist-util-visit "^2.0.3"
 
+gatsby-remark-images@^6.21.0:
+  version "6.24.0"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-6.24.0.tgz#e9d9058eee58548a33a2b514d92538b0dd59443b"
+  integrity sha512-NnKoPn9jo7ZQ3PqyCChmRlyfAahhNVDcO/I1+oyMocIKL1+GmTR00WkGLCzuw5rFIdCU9YkqJ8ouhAgb9DPWew==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@gatsbyjs/potrace" "^2.3.0"
+    chalk "^4.1.2"
+    cheerio "^1.0.0-rc.10"
+    gatsby-core-utils "^3.24.0"
+    is-relative-url "^3.0.0"
+    lodash "^4.17.21"
+    mdast-util-definitions "^4.0.0"
+    query-string "^6.14.1"
+    unist-util-select "^3.0.4"
+    unist-util-visit-parents "^3.1.1"
+
 gatsby-remark-images@^6.9.0:
   version "6.9.0"
   resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-6.9.0.tgz#53872d8440285b3d2b0f5e073753236639f32578"
@@ -8514,10 +8629,10 @@ gatsby-remark-images@^6.9.0:
     unist-util-select "^3.0.4"
     unist-util-visit-parents "^3.1.1"
 
-gatsby-remark-responsive-iframe@^5.9.0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-responsive-iframe/-/gatsby-remark-responsive-iframe-5.9.0.tgz#5216513433087daf660465e20f37a2f65705373f"
-  integrity sha512-2E8E4aIb9YViCHME7QV6PRyixvIxsDPYcPHU6MES31nguJfiCtq9wiIDxCGxrhb3wae8VWpZzvEfyZykVnvQXg==
+gatsby-remark-responsive-iframe@^5.21.0:
+  version "5.24.0"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-responsive-iframe/-/gatsby-remark-responsive-iframe-5.24.0.tgz#85fc92dd5935533834cbaa18acdf99438af4253e"
+  integrity sha512-gfLeeRol5Y35vuSxwVr9nRwGylZQmty4BmwzFJJkUwdUa0lI1P8X0Nhu9OY4WEnzLF4aeTMDUECnfsVzXi0/Tw==
   dependencies:
     "@babel/runtime" "^7.15.4"
     cheerio "^1.0.0-rc.10"
@@ -8525,17 +8640,17 @@ gatsby-remark-responsive-iframe@^5.9.0:
     lodash "^4.17.21"
     unist-util-visit "^2.0.3"
 
-gatsby-remark-smartypants@^5.9.0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-smartypants/-/gatsby-remark-smartypants-5.9.0.tgz#38be174debce71a3c98577a2008c689b7d09ae6e"
-  integrity sha512-d8Z16JjWH7ymcqc+/D3eSu84hGQNCw5JacxR1r9Kn8Fy7pAsnfLVM/bTCnq/jBkSnqux2VwoehSYrvQTNmipNA==
+gatsby-remark-smartypants@^5.21.0:
+  version "5.24.0"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-smartypants/-/gatsby-remark-smartypants-5.24.0.tgz#dbf6bb31b910795ebed819c40534e90210a8f529"
+  integrity sha512-WOCwY8k+3as/ebrUR/7ePR3wrkIgS5xP1v/YIRalcv1vyk9JSfzws/P9pYeBdXsnsery/UWMFE7AIsLKqsOdQg==
   dependencies:
     "@babel/runtime" "^7.15.4"
     retext "^7.0.1"
     retext-smartypants "^4.0.0"
     unist-util-visit "^2.0.3"
 
-gatsby-remark-unwrap-images@^1.0.1:
+gatsby-remark-unwrap-images@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/gatsby-remark-unwrap-images/-/gatsby-remark-unwrap-images-1.0.2.tgz#8fb9f8dd1a69a5ac819c050b282835e4317470a9"
   integrity sha512-kOatDaz6EcYJn6oEx97pim0JkzuN1epacmHuKP9kL7r3+y1dzvNQjrJMtmDZTqC6Q8LhXD2rrFhsYS3SerTHhw==
@@ -8543,6 +8658,14 @@ gatsby-remark-unwrap-images@^1.0.1:
     unist-util-remove "^1.0.1"
     unist-util-visit "^1.4.0"
 
+gatsby-sharp@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/gatsby-sharp/-/gatsby-sharp-0.18.0.tgz#bee4bbae079917afec20d005c9aee75ce7fd0755"
+  integrity sha512-tnGWupSZc4y3UgcAR2ENma9WGBYkCdPFy5XrTgAmqjfxw6JDcJz+H3ikHz9SuUgQyMnlv2QdossHwdUBcVeVGw==
+  dependencies:
+    "@types/sharp" "^0.30.5"
+    sharp "^0.30.7"
+
 gatsby-sharp@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/gatsby-sharp/-/gatsby-sharp-0.3.0.tgz#9c101a25a6c568dc6f39f9e752441366e71bd4f0"
@@ -8551,6 +8674,22 @@ gatsby-sharp@^0.3.0:
     "@types/sharp" "^0.29.5"
     sharp "^0.30.1"
 
+gatsby-source-filesystem@^4.21.1:
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-4.24.0.tgz#628d438e8f208af075db680b5bce0ed957fd4ffb"
+  integrity sha512-oTjjVmAcU83pR9SUW6x6u4PjHAcs1Szg/WfBYGBBxrH7mjm3UA34mb3KtYQSrYsC3maCxfTKn6CJ11F+2/4NRg==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    chokidar "^3.5.3"
+    file-type "^16.5.4"
+    fs-extra "^10.1.0"
+    gatsby-core-utils "^3.24.0"
+    md5-file "^5.0.0"
+    mime "^2.5.2"
+    pretty-bytes "^5.4.1"
+    valid-url "^1.0.9"
+    xstate "4.32.1"
+
 gatsby-source-filesystem@^4.9.0:
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-4.9.0.tgz#8cf6f3f67cc97f8a75e284814f444a0eea3263e6"
@@ -8596,17 +8735,17 @@ gatsby-telemetry@^3.9.0:
     lodash "^4.17.21"
     node-fetch "^2.6.7"
 
-gatsby-theme-carbon@^3.0.0-next.12:
-  version "3.0.0-next.12"
-  resolved "https://registry.yarnpkg.com/gatsby-theme-carbon/-/gatsby-theme-carbon-3.0.0-next.12.tgz#3c746a0f7665d7de0d9c1f1fbb0cafc2f32a754d"
-  integrity sha512-JGkROl083KQOS1LRmMRYt1V68DI5p9fisOCllXYbS8iZO4LV3/IXXHx72WTGZjn+njzp8N3FSUBUwn+NCjmUnQ==
+gatsby-theme-carbon@^3.0.0-next.13:
+  version "3.0.0-next.13"
+  resolved "https://registry.yarnpkg.com/gatsby-theme-carbon/-/gatsby-theme-carbon-3.0.0-next.13.tgz#2a367e9ddd0d4ebe445ec844adec91d381e422b2"
+  integrity sha512-8SXyd/vcsoYDX5+588gygULUd97B7GSjS5bvS/kUyZt1ia3BzmPltSq+QdbRIvvBgDlYet+CuXbSvizlAWiE9w==
   dependencies:
     "@babel/core" "^7.14.6"
-    "@carbon/elements" "^11.2.0"
-    "@carbon/grid" "^11.1.0"
-    "@carbon/pictograms-react" "^11.26.2"
-    "@carbon/react" "^1.2.0"
-    "@carbon/themes" "^11.2.0"
+    "@carbon/elements" "^11.8.0"
+    "@carbon/grid" "^11.5.0"
+    "@carbon/pictograms-react" "^11.30.0"
+    "@carbon/react" "^1.11.0"
+    "@carbon/themes" "^11.7.0"
     "@mdx-js/mdx" "^1.5.5"
     "@mdx-js/react" "^1.5.5"
     "@reach/router" "^1.2.1"
@@ -8615,23 +8754,23 @@ gatsby-theme-carbon@^3.0.0-next.12:
     classnames "^2.2.6"
     copy-to-clipboard "^3.2.0"
     focus-trap-react "^8.4.2"
-    gatsby-plugin-catch-links "^4.9.0"
+    gatsby-plugin-catch-links "^4.21.0"
     gatsby-plugin-lunr "^1.5.2"
-    gatsby-plugin-manifest "^4.9.0"
-    gatsby-plugin-mdx "^3.9.0"
-    gatsby-plugin-offline "^5.9.0"
-    gatsby-plugin-react-helmet "^5.9.0"
-    gatsby-plugin-sass "^5.9.0"
-    gatsby-plugin-sass-resources "^2.0.0"
-    gatsby-plugin-sharp "^4.9.0"
-    gatsby-remark-copy-linked-files "^5.9.0"
-    gatsby-remark-images "^6.9.0"
-    gatsby-remark-responsive-iframe "^5.9.0"
-    gatsby-remark-smartypants "^5.9.0"
-    gatsby-remark-unwrap-images "^1.0.1"
-    gatsby-source-filesystem "^4.9.0"
+    gatsby-plugin-manifest "^4.21.0"
+    gatsby-plugin-mdx "3.20.0"
+    gatsby-plugin-offline "^5.21.0"
+    gatsby-plugin-react-helmet "^5.21.0"
+    gatsby-plugin-sass "5.9"
+    gatsby-plugin-sass-resources "^3.0.1"
+    gatsby-plugin-sharp "^4.21.0"
+    gatsby-remark-copy-linked-files "^5.21.0"
+    gatsby-remark-images "^6.21.0"
+    gatsby-remark-responsive-iframe "^5.21.0"
+    gatsby-remark-smartypants "^5.21.0"
+    gatsby-remark-unwrap-images "^1.0.2"
+    gatsby-source-filesystem "^4.21.1"
     gatsby-source-medium-feed "^1.0.6"
-    gatsby-transformer-yaml "^4.9.0"
+    gatsby-transformer-yaml "^4.21.0"
     lodash.startcase "^4.4.0"
     lodash.throttle "^4.1.1"
     mkdirp "^1.0.3"
@@ -8660,10 +8799,10 @@ gatsby-transformer-sharp@^4.9.0:
     semver "^7.3.5"
     sharp "^0.30.1"
 
-gatsby-transformer-yaml@^4.9.0:
-  version "4.9.0"
-  resolved "https://registry.yarnpkg.com/gatsby-transformer-yaml/-/gatsby-transformer-yaml-4.9.0.tgz#644bba1f5e8a8628b8f2aa67f8f48b1b2ee1e391"
-  integrity sha512-nEEn/cM4ZizfUHFlGh0+j9YcfryMZGhfW1QHsX3c6mkw7ZUkpoA6rI8n2rKxfBWDbMBeCiDtIbEB+Scx57krUQ==
+gatsby-transformer-yaml@^4.21.0:
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/gatsby-transformer-yaml/-/gatsby-transformer-yaml-4.24.0.tgz#295ae3677e4fa02c2c20059ae08fbb6ae5133ae8"
+  integrity sha512-ahYMFVvDMDGtw7plexB3Ut0lxn/2sozYv7B7k9kQmKFycU4a5zRKmo+YY6DR3Z5te653bqxc/Jonh3+DAtwzFg==
   dependencies:
     "@babel/runtime" "^7.15.4"
     js-yaml "^3.14.1"
@@ -8999,7 +9138,7 @@ glob@7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.2.0:
+glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.2.0, glob@^7.2.3:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -9175,6 +9314,23 @@ got@^11.8.3:
     p-cancelable "^2.0.0"
     responselike "^2.0.0"
 
+got@^11.8.5:
+  version "11.8.5"
+  resolved "https://registry.yarnpkg.com/got/-/got-11.8.5.tgz#ce77d045136de56e8f024bebb82ea349bc730046"
+  integrity sha512-o0Je4NvQObAuZPHLFoRSkdG2lTgtcynqymzg2Vupdx6PorhaT5MCbIyXG6d4D94kk8ZG57QeosgdiqfJWhEhlQ==
+  dependencies:
+    "@sindresorhus/is" "^4.0.0"
+    "@szmarczak/http-timer" "^4.0.5"
+    "@types/cacheable-request" "^6.0.1"
+    "@types/responselike" "^1.0.0"
+    cacheable-lookup "^5.0.3"
+    cacheable-request "^7.0.2"
+    decompress-response "^6.0.0"
+    http2-wrapper "^1.0.0-beta.5.2"
+    lowercase-keys "^2.0.0"
+    p-cancelable "^2.0.0"
+    responselike "^2.0.0"
+
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -10478,6 +10634,11 @@ jest-worker@^27.3.1, jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+jimp-compact@^0.16.1-2:
+  version "0.16.1-2"
+  resolved "https://registry.yarnpkg.com/jimp-compact/-/jimp-compact-0.16.1-2.tgz#a82ff9a5a81f15a4b61b5e2e50fae6a43305e5a9"
+  integrity sha512-b2A3rRT1TITzqmaO70U2/uunCh43BQVq7BfRwGPkD5xj8/WZsR3sPTy9DENt+dNZGsel3zBEm1UtYegUxjZW7A==
+
 jimp@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/jimp/-/jimp-0.14.0.tgz#fde55f69bdb918c1b01ac633d89a25853af85625"
@@ -10781,6 +10942,24 @@ listr2@^3.12.2:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
+lmdb@2.5.3:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-2.5.3.tgz#cac845a8576ef0fd2dcc279faab6fdb383f07463"
+  integrity sha512-iBA0cb13CobBSoGJLfZgnrykLlfJipDAnvtf+YwIqqzBEsTeQYsXrHaSBkaHd5wCWeabwrNvhjZoFMUrlo+eLw==
+  dependencies:
+    msgpackr "^1.5.4"
+    node-addon-api "^4.3.0"
+    node-gyp-build-optional-packages "5.0.3"
+    ordered-binary "^1.2.4"
+    weak-lru-cache "^1.2.2"
+  optionalDependencies:
+    "@lmdb/lmdb-darwin-arm64" "2.5.3"
+    "@lmdb/lmdb-darwin-x64" "2.5.3"
+    "@lmdb/lmdb-linux-arm" "2.5.3"
+    "@lmdb/lmdb-linux-arm64" "2.5.3"
+    "@lmdb/lmdb-linux-x64" "2.5.3"
+    "@lmdb/lmdb-win32-x64" "2.5.3"
+
 lmdb@^2.0.2, lmdb@^2.1.7:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-2.2.3.tgz#713ffa515c31e042808abf364b4aa0feaeaf6360"
@@ -11478,6 +11657,11 @@ mime@^2.4.4, mime@^2.4.6, mime@^2.5.2:
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
   integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
 
+mime@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
+  integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
+
 mimer@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimer/-/mimer-1.1.0.tgz#2cb67f7093998e772a0e62c090f77daa1b8a2dbe"
@@ -11529,6 +11713,11 @@ mini-svg-data-uri@^1.4.3:
   resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.3.tgz#43177b2e93766ba338931a3e2a84a3dfd3a222b8"
   integrity sha512-gSfqpMRC8IxghvMcxzzmMnWpXAChSA+vy4cia33RgerMS8Fex95akUyQZPbxJJmeBGiGmK7n/1OpUX8ksRjIdA==
 
+mini-svg-data-uri@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimatch@3.0.4, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -11834,6 +12023,11 @@ node-addon-api@^3.2.1:
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.2.1.tgz#81325e0a2117789c0128dab65e7e38f07ceba161"
   integrity sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==
 
+node-addon-api@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-4.3.0.tgz#52a1a0b475193e0928e98e0426a0d1254782b77f"
+  integrity sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ==
+
 node-addon-api@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-5.0.0.tgz#7d7e6f9ef89043befdb20c1989c905ebde18c501"
@@ -11867,6 +12061,11 @@ node-fetch@^2.6.6, node-fetch@^2.6.7:
   dependencies:
     whatwg-url "^5.0.0"
 
+node-gyp-build-optional-packages@5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.0.3.tgz#92a89d400352c44ad3975010368072b41ad66c17"
+  integrity sha512-k75jcVzk5wnnc/FMxsf4udAoTEUv2jY3ycfdSd3yWu6Cnd1oee6/CfZJApyscA4FJOmdoixWwiwOyf16RzD5JA==
+
 node-gyp-build@^4.2.3, node-gyp-build@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.3.0.tgz#9f256b03e5826150be39c764bf51e993946d71a3"
@@ -13052,7 +13251,7 @@ potrace@^2.1.8:
   dependencies:
     jimp "^0.14.0"
 
-prebuild-install@^7.1.0:
+prebuild-install@^7.1.0, prebuild-install@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
   integrity sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==
@@ -13144,6 +13343,15 @@ probe-image-size@^6.0.0:
     needle "^2.5.2"
     stream-parser "~0.3.1"
 
+probe-image-size@^7.2.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/probe-image-size/-/probe-image-size-7.2.3.tgz#d49c64be540ec8edea538f6f585f65a9b3ab4309"
+  integrity sha512-HubhG4Rb2UH8YtV4ba0Vp5bQ7L78RTONYu/ujmCu5nBI8wGv24s4E9xSKBi0N1MowRpxk76pFCpJtW0KPzOK0w==
+  dependencies:
+    lodash.merge "^4.6.2"
+    needle "^2.5.2"
+    stream-parser "~0.3.1"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -14484,6 +14692,20 @@ sharp@^0.30.1:
     tar-fs "^2.1.1"
     tunnel-agent "^0.6.0"
 
+sharp@^0.30.7:
+  version "0.30.7"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.7.tgz#7862bda98804fdd1f0d5659c85e3324b90d94c7c"
+  integrity sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==
+  dependencies:
+    color "^4.2.3"
+    detect-libc "^2.0.1"
+    node-addon-api "^5.0.0"
+    prebuild-install "^7.1.1"
+    semver "^7.3.7"
+    simple-get "^4.0.1"
+    tar-fs "^2.1.1"
+    tunnel-agent "^0.6.0"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -15282,7 +15504,7 @@ svgo@1.3.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-svgo@^2.7.0:
+svgo@^2.7.0, svgo@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
   integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
@@ -16494,7 +16716,7 @@ webpack-virtual-modules@^0.3.2:
   dependencies:
     debug "^3.0.0"
 
-webpack@^4.0.0, webpack@^5.59.0, webpack@^5.61.0:
+webpack@^5.0.0, webpack@^5.59.0, webpack@^5.61.0:
   version "5.62.1"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.62.1.tgz#06f09b56a7b1bb13ed5137ad4b118358a90c9505"
   integrity sha512-jNLtnWChS2CMZ7vqWtztv0G6fYB5hz11Zsadp5tE7e4/66zVDj7/KUeQZOsOl8Hz5KrLJH1h2eIDl6AnlyE12Q==
@@ -16870,6 +17092,11 @@ xss@^1.0.6:
     commander "^2.20.3"
     cssfilter "0.0.10"
 
+xstate@4.32.1:
+  version "4.32.1"
+  resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.32.1.tgz#1a09c808a66072938861a3b4acc5b38460244b70"
+  integrity sha512-QYUd+3GkXZ8i6qdixnOn28bL3EvA++LONYL/EMWwKlFSh/hiLndJ8YTnz77FDs+JUXcwU7NZJg7qoezoRHc4GQ==
+
 xstate@^4.26.0, xstate@^4.26.1:
   version "4.30.3"
   resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.30.3.tgz#e1b81bad0bb669b4411294961f286a338d52d8f0"