diff --git a/.yarn/cache/@babel-runtime-npm-7.18.3-1883c70fa6-db8526226a.zip b/.yarn/cache/@babel-runtime-npm-7.18.9-28ca6b5f61-36dd736bab.zip
similarity index 96%
rename from .yarn/cache/@babel-runtime-npm-7.18.3-1883c70fa6-db8526226a.zip
rename to .yarn/cache/@babel-runtime-npm-7.18.9-28ca6b5f61-36dd736bab.zip
index 53f78dfd2571..d90a2c493ad0 100644
Binary files a/.yarn/cache/@babel-runtime-npm-7.18.3-1883c70fa6-db8526226a.zip and b/.yarn/cache/@babel-runtime-npm-7.18.9-28ca6b5f61-36dd736bab.zip differ
diff --git a/.yarn/cache/@carbon-feature-flags-npm-0.7.0-7f192756d6-f16348fa78.zip b/.yarn/cache/@carbon-feature-flags-npm-0.7.0-7f192756d6-f16348fa78.zip
new file mode 100644
index 000000000000..827d6b62ea33
Binary files /dev/null and b/.yarn/cache/@carbon-feature-flags-npm-0.7.0-7f192756d6-f16348fa78.zip differ
diff --git a/.yarn/cache/@carbon-icons-react-npm-10.49.0-38655169d3-dd3aec2718.zip b/.yarn/cache/@carbon-icons-react-npm-10.49.0-38655169d3-dd3aec2718.zip
new file mode 100644
index 000000000000..0180c6fafde3
Binary files /dev/null and b/.yarn/cache/@carbon-icons-react-npm-10.49.0-38655169d3-dd3aec2718.zip differ
diff --git a/.yarn/cache/@carbon-layout-npm-10.37.1-eeb184f33f-baabf7e70e.zip b/.yarn/cache/@carbon-layout-npm-10.37.1-eeb184f33f-baabf7e70e.zip
new file mode 100644
index 000000000000..8949a8085822
Binary files /dev/null and b/.yarn/cache/@carbon-layout-npm-10.37.1-eeb184f33f-baabf7e70e.zip differ
diff --git a/.yarn/cache/carbon-components-npm-10.58.0-a89302e587-25dbc8c509.zip b/.yarn/cache/carbon-components-npm-10.58.0-a89302e587-25dbc8c509.zip
new file mode 100644
index 000000000000..4b1489464042
Binary files /dev/null and b/.yarn/cache/carbon-components-npm-10.58.0-a89302e587-25dbc8c509.zip differ
diff --git a/.yarn/cache/carbon-components-react-npm-7.59.0-3db1ba9c08-7762d139df.zip b/.yarn/cache/carbon-components-react-npm-7.59.0-3db1ba9c08-7762d139df.zip
new file mode 100644
index 000000000000..b414cbef2852
Binary files /dev/null and b/.yarn/cache/carbon-components-react-npm-7.59.0-3db1ba9c08-7762d139df.zip differ
diff --git a/.yarn/cache/carbon-icons-npm-7.0.7-a0d95b025d-ecb87c4f09.zip b/.yarn/cache/carbon-icons-npm-7.0.7-a0d95b025d-ecb87c4f09.zip
new file mode 100644
index 000000000000..72077c74eca9
Binary files /dev/null and b/.yarn/cache/carbon-icons-npm-7.0.7-a0d95b025d-ecb87c4f09.zip differ
diff --git a/.yarn/cache/flatpickr-npm-4.6.1-c1e46c3700-66ea82084a.zip b/.yarn/cache/flatpickr-npm-4.6.1-c1e46c3700-66ea82084a.zip
new file mode 100644
index 000000000000..87e71b95398e
Binary files /dev/null and b/.yarn/cache/flatpickr-npm-4.6.1-c1e46c3700-66ea82084a.zip differ
diff --git a/.yarn/cache/warning-npm-3.0.0-125973e5cc-c9f99a1280.zip b/.yarn/cache/warning-npm-3.0.0-125973e5cc-c9f99a1280.zip
new file mode 100644
index 000000000000..d978759093c4
Binary files /dev/null and b/.yarn/cache/warning-npm-3.0.0-125973e5cc-c9f99a1280.zip differ
diff --git a/examples/incremental-migration/.gitignore b/examples/incremental-migration/.gitignore
new file mode 100644
index 000000000000..55175ef867e0
--- /dev/null
+++ b/examples/incremental-migration/.gitignore
@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
diff --git a/examples/incremental-migration/README.md b/examples/incremental-migration/README.md
new file mode 100644
index 000000000000..e7463f722ee6
--- /dev/null
+++ b/examples/incremental-migration/README.md
@@ -0,0 +1,73 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with
+[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Incremental migration
+
+We have recently released a new version, v11, of our component library and a
+common question we receive is if users can adopt v11 incrementally and the
+answer is yes! If the burden of migrating to v11 is too big to take on all at
+once, but there are features of our latest release you want to take advantage
+of, it is likely that you can pull in just the parts you are wanting to use
+while keeping the rest of your Carbon usage the same.
+
+This example illustrates how v11 and v10 work together.
+
+## Getting Started
+
+First, run `yarn` or `npm install` and then run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result.
+
+You can start editing the page by modifying `pages/index.js`. The page
+auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on
+[http://localhost:3000/api/hello](http://localhost:3000/api/hello). This
+endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are
+treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead
+of React pages.
+
+## Sass
+
+First and foremost, if you want to use v11 styles in any capacity, you'll have
+to migrate to use `dart-sass`. `node-sass` has been deprecated and we migrated
+to `dart-sass` in v11. For more information about migrating, visit our docs
+[here](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#changing-from-node-sass-to-sass).
+
+## V10 and V11
+
+This example is mainly v10, but it takes advantage of the new Stack component
+from v11 and uses v11's StructuredList component 🎉. StructuredList had a major
+accessibilty revamp in v11 that you might want to use and this examples shows
+you how.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+ features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out
+[the Next.js GitHub repository](https://github.com/vercel/next.js/) - your
+feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the
+[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
+from the creators of Next.js.
+
+Check out our
+[Next.js deployment documentation](https://nextjs.org/docs/deployment) for more
+details.
diff --git a/examples/incremental-migration/next.config.js b/examples/incremental-migration/next.config.js
new file mode 100644
index 000000000000..91ef62f0db59
--- /dev/null
+++ b/examples/incremental-migration/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ reactStrictMode: true,
+};
+
+module.exports = nextConfig;
diff --git a/examples/incremental-migration/package.json b/examples/incremental-migration/package.json
new file mode 100644
index 000000000000..0471281834b6
--- /dev/null
+++ b/examples/incremental-migration/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "incremental-migration",
+ "private": true,
+ "version": "0.12.0",
+ "scripts": {
+ "build": "next build",
+ "dev": "next dev",
+ "lint": "next lint",
+ "start": "next start"
+ },
+ "dependencies": {
+ "@carbon/icons-react": "10.49.0",
+ "@carbon/react": "^1.12.0",
+ "carbon-components": "^10.57.0",
+ "carbon-components-react": "^7.57.0",
+ "carbon-icons": "^7.0.7",
+ "next": "12.1.4",
+ "react": "18.0.0",
+ "react-dom": "18.0.0"
+ },
+ "devDependencies": {
+ "eslint": "8.12.0",
+ "eslint-config-next": "12.1.4",
+ "sass": "^1.51.0"
+ }
+}
diff --git a/examples/incremental-migration/public/favicon.ico b/examples/incremental-migration/public/favicon.ico
new file mode 100644
index 000000000000..718d6fea4835
Binary files /dev/null and b/examples/incremental-migration/public/favicon.ico differ
diff --git a/examples/incremental-migration/public/vercel.svg b/examples/incremental-migration/public/vercel.svg
new file mode 100644
index 000000000000..fbf0e25a651c
--- /dev/null
+++ b/examples/incremental-migration/public/vercel.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/examples/incremental-migration/src/pages/_app.js b/examples/incremental-migration/src/pages/_app.js
new file mode 100644
index 000000000000..2733aee210bf
--- /dev/null
+++ b/examples/incremental-migration/src/pages/_app.js
@@ -0,0 +1,9 @@
+import '../scss/styles.scss';
+import React from 'react';
+
+// eslint-disable-next-line react/prop-types
+function MyApp({ Component, pageProps }) {
+ return ;
+}
+
+export default MyApp;
diff --git a/examples/incremental-migration/src/pages/index.js b/examples/incremental-migration/src/pages/index.js
new file mode 100644
index 000000000000..3686aa7170ca
--- /dev/null
+++ b/examples/incremental-migration/src/pages/index.js
@@ -0,0 +1,186 @@
+import React from 'react';
+import {
+ Button,
+ Content,
+ Header,
+ SkipToContent,
+ HeaderName,
+ Toggle,
+ NumberInput,
+ RadioButtonGroup,
+ RadioButton,
+ Search,
+ Select,
+ SelectItem,
+ TextInput,
+ TextArea,
+} from 'carbon-components-react';
+import {
+ StructuredListBody,
+ StructuredListWrapper,
+ StructuredListHead,
+ StructuredListRow,
+ StructuredListCell,
+ Stack,
+} from '@carbon/react';
+import Head from 'next/head';
+import styles from '../scss/Home.module.css';
+
+export default function Home() {
+ const numberInputProps = {
+ className: 'some-class',
+ id: 'number-input-1',
+ label: 'Number Input',
+ min: 0,
+ max: 100,
+ value: 50,
+ step: 10,
+ };
+
+ const toggleProps = {
+ className: 'some-class',
+ };
+
+ const radioProps = {
+ className: 'some-class',
+ };
+
+ const searchProps = {
+ className: 'some-class',
+ };
+
+ const selectProps = {
+ className: 'some-class',
+ };
+
+ const TextInputProps = {
+ className: 'some-class',
+ id: 'test2',
+ labelText: 'Text Input label',
+ placeholder: 'Placeholder text',
+ };
+
+ const textareaProps = {
+ labelText: 'Text Area label',
+ className: 'some-class',
+ placeholder: 'Placeholder text',
+ id: 'test5',
+ cols: 50,
+ rows: 4,
+ };
+
+ const buttonEvents = {
+ className: 'some-class',
+ };
+
+ return (
+
+
+ Create Next App
+
+
+
+
+
+
+
+ [Platform]
+
+
+
+
+
+
+ {}}
+ name="radio-button-group"
+ defaultSelected="default-selected">
+
+
+
+
+
+
+
+
+ ColumnA
+ ColumnB
+ ColumnC
+
+
+
+
+ Row 1
+ Row 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+ dui magna, finibus id tortor sed, aliquet bibendum augue.
+ Aenean posuere sem vel euismod dignissim. Nulla ut cursus
+ dolor. Pellentesque vulputate nisl a porttitor interdum.
+
+
+
+ Row 2
+ Row 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+ dui magna, finibus id tortor sed, aliquet bibendum augue.
+ Aenean posuere sem vel euismod dignissim. Nulla ut cursus
+ dolor. Pellentesque vulputate nisl a porttitor interdum.
+
+
+
+
+
+
+
+
+