diff --git a/.storybook/main.js b/.storybook/main.js
index 7dbb1d398f..3a2be1e3f7 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -3,9 +3,12 @@ const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
 
 const modulesPath = path.resolve(__dirname, '../modules');
 const getSpecifications = require('../modules/docs/utils/get-specifications');
+const {createDocProgram} = require('../modules/docs/docgen/createDocProgram');
 
 const processDocs = process.env.SKIP_DOCGEN !== 'true';
 
+const Doc = createDocProgram();
+
 module.exports = {
   stories: [
     '../modules/docs/mdx/**/*.mdx',
@@ -64,8 +67,18 @@ module.exports = {
         include: [modulesPath],
         exclude: /examples|stories|spec|codemod|docs/,
         loaders: [
+          // loaders are run in reverse order. style-transform-loader needs to be done first
           {
             loader: path.resolve(__dirname, 'symbol-doc-loader'),
+            options: {
+              Doc,
+            },
+          },
+          {
+            loader: path.resolve(__dirname, 'style-transform-loader'),
+            options: {
+              Doc,
+            },
           },
         ],
         enforce: 'pre',
diff --git a/.storybook/routes.js b/.storybook/routes.js
index a79057bd52..f0dfd354fe 100644
--- a/.storybook/routes.js
+++ b/.storybook/routes.js
@@ -12,7 +12,7 @@ const routes = {
   '/components/buttons/segmented-control/': 'preview-segmented-control--basic',
   '/components/containers/card/': 'components-containers-card--basic',
   '/components/containers/side-panel/': 'preview-side-panel--basic',
-  '/components/containers/table/': 'preview-table--basic',
+  '/components/containers/table/': 'components-containers-table--basic',
   '/components/containers/tabs/': 'components-containers-tabs--basic',
   '/components/indicators/banner/': 'components-indicators-banner--basic',
   '/components/indicators/loading-dots/': 'components-indicators-loading-dots--basic',
@@ -20,7 +20,7 @@ const routes = {
   '/components/indicators/status-indicator/': 'preview-status-indicator--basic',
   '/components/inputs/checkbox/': 'components-inputs-checkbox--basic',
   '/components/inputs/color-input/': 'components-inputs-color-picker-color-input--basic',
-  '/components/inputs/form-field/': 'components-inputs-form-field--basic',
+  '/components/inputs/form-field/': 'preview-inputs-form-field--basic',
   '/components/inputs/radio/': 'components-inputs-radio--basic',
   '/components/inputs/select/': 'components-inputs-select--basic',
   '/components/inputs/switch/': 'components-inputs-switch--basic',
diff --git a/.storybook/style-transform-loader.js b/.storybook/style-transform-loader.js
new file mode 100644
index 0000000000..77b499a6cb
--- /dev/null
+++ b/.storybook/style-transform-loader.js
@@ -0,0 +1,33 @@
+// @ts-check
+const {getOptions} = require('loader-utils');
+const {transform} = require('@workday/canvas-kit-styling-transform/testing');
+
+/** @typedef {import('webpack').loader.Loader} Loader */
+/** @typedef {import('webpack').loader.LoaderContext} LoaderContext */
+
+// Tracks files that have been processed. If a file is already processed, it
+// means the file has been updated and we need to update the Typescript program
+// so the changes are reflected in our doc output. If we don't update the TS
+// program, the docs will be processed with the outdated cache of the file
+// contents.
+const filesProcessedMap = new Map();
+
+/**
+ * @this {LoaderContext}
+ * @param {Parameters<Loader>[0]} source
+ */
+function styleTransformLoader(source) {
+  const {
+    /** @type {any} */
+    Doc,
+  } = getOptions(this);
+
+  if (filesProcessedMap.has(this.resourcePath)) {
+    Doc.update();
+  }
+  filesProcessedMap.set(this.resourcePath, true);
+
+  return transform(Doc.program, this.resourcePath);
+}
+
+module.exports = styleTransformLoader;
diff --git a/.storybook/symbol-doc-loader.js b/.storybook/symbol-doc-loader.js
index c0a2f37c85..9c0b39a1c3 100644
--- a/.storybook/symbol-doc-loader.js
+++ b/.storybook/symbol-doc-loader.js
@@ -1,32 +1,23 @@
 // @ts-check
-const {createDocProgram} = require('../modules/docs/docgen/createDocProgram');
 const routes = require('./routes');
+const {getOptions} = require('loader-utils');
 
 const routeKeys = Object.keys(routes);
 
-// Tracks files that have been processed. If a file is already processed, it
-// means the file has been updated and we need to update the Typescript program
-// so the changes are reflected in our doc output. If we don't update the TS
-// program, the docs will be processed with the outdated cache of the file
-// contents.
-const filesProcessedMap = new Map();
-
 /** @typedef {import('webpack').loader.Loader} Loader */
 /** @typedef {import('webpack').loader.LoaderContext} LoaderContext */
 
-let {parser, update} = createDocProgram();
-
 /**
  * @this {LoaderContext}
  * @param {Parameters<Loader>[0]} source
  */
 function symbolDocLoader(source) {
-  if (filesProcessedMap.has(this.resourcePath)) {
-    parser = update();
-  }
-  filesProcessedMap.set(this.resourcePath, true);
+  const {
+    /** @type {any} */
+    Doc,
+  } = getOptions(this);
 
-  const docs = parser.getExportedSymbols(this.resourcePath);
+  const docs = Doc.parser.getExportedSymbols(this.resourcePath);
 
   return (
     source +
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f7a59a65dd..fa820666da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,24 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Components
 
 - fix: Handle empty stack ref in useAssistiveHideSiblings ([#2920](https://github.com/Workday/canvas-kit/pull/2920)) ([@NicholasBoll](https://github.com/NicholasBoll))
+## [v11.1.10](https://github.com/Workday/canvas-kit/releases/tag/v11.1.10) (2024-09-16)
+
+
+
+
+## [v11.1.9](https://github.com/Workday/canvas-kit/releases/tag/v11.1.9) (2024-09-16)
+
+### Documentation, examples
+
+- docs: Fixing NotificationBadge storybook example ([#2903](https://github.com/Workday/canvas-kit/pull/2903)) ([@williamjstanton](https://github.com/williamjstanton), William Stanton)
+
+
+## [v11.1.8](https://github.com/Workday/canvas-kit/releases/tag/v11.1.8) (2024-09-06)
+
+### Components
+
+- fix: Updated ButtonColors interface to deprecated focusRing from focus ([#2906](https://github.com/Workday/canvas-kit/pull/2906)) ([@josh-bagwell](https://github.com/josh-bagwell))
+  Deprecated the use of focusRing within focus in the colors prop on buttons as this does not work with our current styling methods. Added support for boxShadowInner and boxShadowOuter within focus in colors prop.
 
 
 ## [v10.3.59](https://github.com/Workday/canvas-kit/releases/tag/v10.3.59) (2024-09-06)
@@ -16,6 +34,26 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 - fix: Updated ButtonColors interface to deprecated focusRing from focus ([#2906](https://github.com/Workday/canvas-kit/pull/2906)) ([@josh-bagwell](https://github.com/josh-bagwell))
   Deprecated the use of focusRing within focus in the colors prop on buttons as this does not work with our current styling methods. Added support for boxShadowInner and boxShadowOuter within focus in colors prop.
+## [v11.1.7](https://github.com/Workday/canvas-kit/releases/tag/v11.1.7) (2024-08-29)
+
+### Accessibility
+
+- fix(color-picker): Add support for a11y labels on color swatches  ([#2894](https://github.com/Workday/canvas-kit/pull/2894)) ([@wooksauce](https://github.com/wooksauce), Kiwook Kwon)
+
+
+## [v11.1.6](https://github.com/Workday/canvas-kit/releases/tag/v11.1.6) (2024-08-27)
+
+### Components
+
+- fix: Make overflow items inert ([#2886](https://github.com/Workday/canvas-kit/pull/2886)) ([@NicholasBoll](https://github.com/NicholasBoll), manuel.carrera)
+- fix(select): Forward ref to Select input ([#2892](https://github.com/Workday/canvas-kit/pull/2892)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+
+### Infrastructure
+
+- fix: Enable styling compat mode to ensure proper style merging ([#2890](https://github.com/Workday/canvas-kit/pull/2890)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+  We're seeing style merging issues when using createStyles or createStencil. It only happens when every style override of the element uses these utilities and @emotion/react or @emotion/styled is not used on the same element. These utilities rely on module execution order and we're having a few reports where modules are possibly executing out of order. In order to allow everyone to use createStyles and createStencil without worrying about style merge issues, we're going to enable compat mode all the time. We'll look into possible out-of-order execution issues in the future and plan to re-enable full static mode (for better performance) once we know why this is happening and have a proper workaround.
+  
+  For more information, please read our [discussion](https://github.com/Workday/canvas-kit/discussions/2893)
 
 
 ## [v10.3.58](https://github.com/Workday/canvas-kit/releases/tag/v10.3.58) (2024-08-27)
@@ -40,6 +78,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
   We're seeing style merging issues when using createStyles or createStencil. It only happens when every style override of the element uses these utilities and @emotion/react or @emotion/styled is not used on the same element. These utilities rely on module execution order and we're having a few reports where modules are possibly executing out of order. In order to allow everyone to use createStyles and createStencil without worrying about style merge issues, we're going to enable compat mode all the time. We'll look into possible out-of-order execution issues in the future and plan to re-enable full static mode (for better performance) once we know why this is happening and have a proper workaround.
   
   For more information, please read our [discussion](https://github.com/Workday/canvas-kit/discussions/2893)
+## [v11.1.5](https://github.com/Workday/canvas-kit/releases/tag/v11.1.5) (2024-08-23)
+
+### Components
+
+- fix(combobox): Show selected state when multiple is enabled ([#2882](https://github.com/Workday/canvas-kit/pull/2882)) ([@NicholasBoll](https://github.com/NicholasBoll))
 
 
 ## [v10.3.55](https://github.com/Workday/canvas-kit/releases/tag/v10.3.55) (2024-08-22)
@@ -47,6 +90,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Components
 
 - fix(combobox): Show selected state when multiple is enabled ([#2882](https://github.com/Workday/canvas-kit/pull/2882)) ([@NicholasBoll](https://github.com/NicholasBoll))
+## [v11.1.4](https://github.com/Workday/canvas-kit/releases/tag/v11.1.4) (2024-08-21)
+
+### Documentation
+
+- docs: Update CanvasProvider info on install page ([#2878](https://github.com/Workday/canvas-kit/pull/2878)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@alanbsmith](https://github.com/alanbsmith))
 
 
 ## [v10.3.54](https://github.com/Workday/canvas-kit/releases/tag/v10.3.54) (2024-08-21)
@@ -54,6 +102,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Documentation
 
 - docs: Update CanvasProvider info on install page ([#2878](https://github.com/Workday/canvas-kit/pull/2878)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@alanbsmith](https://github.com/alanbsmith))
+## [v11.1.3](https://github.com/Workday/canvas-kit/releases/tag/v11.1.3) (2024-08-20)
+
+### Components
+
+- fix: Update select to trigger onChange ([#2874](https://github.com/Workday/canvas-kit/pull/2874)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
 
 
 ## [v10.3.53](https://github.com/Workday/canvas-kit/releases/tag/v10.3.53) (2024-08-20)
@@ -61,6 +114,16 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Components
 
 - fix: Update select to trigger onChange ([#2874](https://github.com/Workday/canvas-kit/pull/2874)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+## [v11.1.2](https://github.com/Workday/canvas-kit/releases/tag/v11.1.2) (2024-08-20)
+
+
+
+
+## [v11.1.1](https://github.com/Workday/canvas-kit/releases/tag/v11.1.1) (2024-08-20)
+
+### Components
+
+- fix(select): Clicking the input closes the menu ([#2869](https://github.com/Workday/canvas-kit/pull/2869)) ([@NicholasBoll](https://github.com/NicholasBoll))
 
 
 ## [v10.3.52](https://github.com/Workday/canvas-kit/releases/tag/v10.3.52) (2024-08-14)
@@ -68,6 +131,23 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Components
 
 - fix(select): Clicking the input closes the menu ([#2869](https://github.com/Workday/canvas-kit/pull/2869)) ([@NicholasBoll](https://github.com/NicholasBoll))
+## [v11.1.0](https://github.com/Workday/canvas-kit/releases/tag/v11.1.0) (2024-08-14)
+
+
+
+
+## [v11.0.27](https://github.com/Workday/canvas-kit/releases/tag/v11.0.27) (2024-08-12)
+
+### Components
+
+- fix(Checkbox): Remove console warning ([#2863](https://github.com/Workday/canvas-kit/pull/2863)) ([@thunguyen19](https://github.com/thunguyen19))
+
+
+## [v11.0.26](https://github.com/Workday/canvas-kit/releases/tag/v11.0.26) (2024-08-05)
+
+### Accessibility
+
+- fix: Set aria-modal to false for better accessibility ([#2855](https://github.com/Workday/canvas-kit/pull/2855)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
 
 
 ## [v10.3.51](https://github.com/Workday/canvas-kit/releases/tag/v10.3.51) (2024-08-05)
@@ -75,6 +155,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Accessibility
 
 - fix: Set aria-modal to false for better accessibility ([#2855](https://github.com/Workday/canvas-kit/pull/2855)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+## [v11.0.25](https://github.com/Workday/canvas-kit/releases/tag/v11.0.25) (2024-08-05)
+
+### Components
+
+- fix(combobox): Use correct state for aria-selected ([#2849](https://github.com/Workday/canvas-kit/pull/2849)) ([@NicholasBoll](https://github.com/NicholasBoll))
+  This change fixes `aria-selected` in `Combobox.Menu.Item` components, but this does change the visuals of what is considered "selected". If you have any visual tests that have a screenshot of a selected state, the visual regression will have to be updated. The same is true for DOM-based snapshot tests. `aria-selected="true"` will now be added when an item is selected and not just when the virtual cursor is on the item. If your snapshot captures this DOM state, the snapshot will have to be updated.
 
 
 ## [v10.3.50](https://github.com/Workday/canvas-kit/releases/tag/v10.3.50) (2024-08-05)
@@ -83,6 +169,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 - fix(combobox): Use correct state for aria-selected ([#2849](https://github.com/Workday/canvas-kit/pull/2849)) ([@NicholasBoll](https://github.com/NicholasBoll))
   This change fixes `aria-selected` in `Combobox.Menu.Item` components, but this does change the visuals of what is considered "selected". If you have any visual tests that have a screenshot of a selected state, the visual regression will have to be updated. The same is true for DOM-based snapshot tests. `aria-selected="true"` will now be added when an item is selected and not just when the virtual cursor is on the item. If your snapshot captures this DOM state, the snapshot will have to be updated.
+## [v11.0.24](https://github.com/Workday/canvas-kit/releases/tag/v11.0.24) (2024-08-05)
+
+### Components
+
+- fix(SearchForm): Suppress forwarding props warning ([#2850](https://github.com/Workday/canvas-kit/pull/2850)) ([@thunguyen19](https://github.com/thunguyen19), Thu Nguyen)
+
+
+## [v11.0.23](https://github.com/Workday/canvas-kit/releases/tag/v11.0.23) (2024-07-30)
+
+### Components
+
+- fix: Support marginTop and marginBottom on ListBox ([#2844](https://github.com/Workday/canvas-kit/pull/2844)) ([@NicholasBoll](https://github.com/NicholasBoll))
 
 
 ## [v10.3.49](https://github.com/Workday/canvas-kit/releases/tag/v10.3.49) (2024-07-29)
@@ -92,16 +190,40 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - fix: Support marginTop and marginBottom on ListBox ([#2844](https://github.com/Workday/canvas-kit/pull/2844)) ([@NicholasBoll](https://github.com/NicholasBoll))
 
 
+## [v11.0.22](https://github.com/Workday/canvas-kit/releases/tag/v11.0.22) (2024-07-29)
+
+### Documentation
+
+- docs: Fix stencil docs typo ([#2847](https://github.com/Workday/canvas-kit/pull/2847)) ([@alanbsmith](https://github.com/alanbsmith))
+
+
+## [v10.3.48](https://github.com/Workday/canvas-kit/releases/tag/v10.3.48) (2024-07-24)
+## [v11.0.21](https://github.com/Workday/canvas-kit/releases/tag/v11.0.21) (2024-07-24)
+
+### Documentation
+
+- fix: Fix Popup ExternalWindow example import ([#2841](https://github.com/Workday/canvas-kit/pull/2841)) ([@jamesfan](https://github.com/jamesfan))
+
+
 ## [v10.3.48](https://github.com/Workday/canvas-kit/releases/tag/v10.3.48) (2024-07-24)
 
 ### Documentation
 
 - fix: Fix Popup ExternalWindow example import ([#2841](https://github.com/Workday/canvas-kit/pull/2841)) ([@jamesfan](https://github.com/jamesfan))
+## [v11.0.20](https://github.com/Workday/canvas-kit/releases/tag/v11.0.20) (2024-07-22)
+
+
 
 
 ## [v10.3.47](https://github.com/Workday/canvas-kit/releases/tag/v10.3.47) (2024-07-22)
 
 
+## [v11.0.19](https://github.com/Workday/canvas-kit/releases/tag/v11.0.19) (2024-07-19)
+
+### Components
+
+- fix(avatar): Lazy load avatar images ([#2834](https://github.com/Workday/canvas-kit/pull/2834)) ([@NicholasBoll](https://github.com/NicholasBoll))
+- fix: Popups render in the target's window ([#2829](https://github.com/Workday/canvas-kit/pull/2829)) ([@NicholasBoll](https://github.com/NicholasBoll), [@mannycarrera4](https://github.com/mannycarrera4))
 
 
 ## [v10.3.46](https://github.com/Workday/canvas-kit/releases/tag/v10.3.46) (2024-07-19)
@@ -116,6 +238,32 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Components
 
 - fix(avatar): Lazy load avatar images ([#2834](https://github.com/Workday/canvas-kit/pull/2834)) ([@NicholasBoll](https://github.com/NicholasBoll))
+## [v11.0.18](https://github.com/Workday/canvas-kit/releases/tag/v11.0.18) (2024-07-18)
+
+### Components
+
+- fix(avatar): Lazy load avatar images ([#2833](https://github.com/Workday/canvas-kit/pull/2833)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+
+## [v11.0.17](https://github.com/Workday/canvas-kit/releases/tag/v11.0.17) (2024-07-17)
+
+### Documentation
+
+- docs: Fixing and updating the AriaLiveRegion storybook examples ([#2818](https://github.com/Workday/canvas-kit/pull/2818)) ([@williamjstanton](https://github.com/williamjstanton), William Stanton, [@mannycarrera4](https://github.com/mannycarrera4), [@josh-bagwell](https://github.com/josh-bagwell), manuel.carrera)
+
+
+## [v11.0.16](https://github.com/Workday/canvas-kit/releases/tag/v11.0.16) (2024-07-17)
+
+### Infrastructure
+
+- chore: SNYK Security upgrade markdown-to-jsx from 6.11.4 to 7.2.0 ([#2826](https://github.com/Workday/canvas-kit/pull/2826)) ([@mannycarrera4](https://github.com/mannycarrera4), [@snyk-bot](https://github.com/snyk-bot), manuel.carrera)
+
+
+## [v11.0.15](https://github.com/Workday/canvas-kit/releases/tag/v11.0.15) (2024-07-11)
+
+### Components
+
+- fix(select): Add conditional for Select in React.StrictMode ([#2822](https://github.com/Workday/canvas-kit/pull/2822)) ([@NicholasBoll](https://github.com/NicholasBoll))
 
 
 ## [v10.3.44](https://github.com/Workday/canvas-kit/releases/tag/v10.3.44) (2024-07-10)
@@ -123,6 +271,44 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Components
 
 - fix(select): Add conditional for Select in React.StrictMode ([#2822](https://github.com/Workday/canvas-kit/pull/2822)) ([@NicholasBoll](https://github.com/NicholasBoll))
+## [v11.0.14](https://github.com/Workday/canvas-kit/releases/tag/v11.0.14) (2024-07-10)
+
+### Components
+
+- fix: Upgrade vulnerable packages for security ([#2812](https://github.com/Workday/canvas-kit/pull/2812)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+
+
+## [v11.0.13](https://github.com/Workday/canvas-kit/releases/tag/v11.0.13) (2024-07-09)
+
+### Components
+
+- fix: Prevent style-only props from being forwarded to elements ([#2819](https://github.com/Workday/canvas-kit/pull/2819)) ([@wainokray-ho](https://github.com/wainokray-ho))
+
+
+## [v11.0.12](https://github.com/Workday/canvas-kit/releases/tag/v11.0.12) (2024-07-08)
+
+### Components
+
+- fix: Fix backwards compatibility with colors prop for buttons ([#2816](https://github.com/Workday/canvas-kit/pull/2816)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+
+### Infrastructure
+
+- fix: Revert jscodeshift version ([#2813](https://github.com/Workday/canvas-kit/pull/2813)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+
+
+## [v11.0.11](https://github.com/Workday/canvas-kit/releases/tag/v11.0.11) (2024-06-26)
+
+### Infrastructure
+
+- chore: Update SNYK deps to non vulnerable versions ([#2784](https://github.com/Workday/canvas-kit/pull/2784)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+  Fix some security issues found by SNYK in our codemod package.
+
+
+## [v11.0.10](https://github.com/Workday/canvas-kit/releases/tag/v11.0.10) (2024-06-26)
+
+### Components
+
+- fix: Grow Prop Fix for Buttons ([#2790](https://github.com/Workday/canvas-kit/pull/2790)) ([@josh-bagwell](https://github.com/josh-bagwell), [@mannycarrera4](https://github.com/mannycarrera4))
 
 
 ## [v10.3.43](https://github.com/Workday/canvas-kit/releases/tag/v10.3.43) (2024-06-25)
@@ -130,6 +316,35 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Components
 
 - fix: Grow Prop Fix for Buttons ([#2790](https://github.com/Workday/canvas-kit/pull/2790)) ([@josh-bagwell](https://github.com/josh-bagwell), [@mannycarrera4](https://github.com/mannycarrera4))
+## [v11.0.9](https://github.com/Workday/canvas-kit/releases/tag/v11.0.9) (2024-06-24)
+
+### Documentation
+
+- docs: Add v10 to versions table ([#2792](https://github.com/Workday/canvas-kit/pull/2792)) ([@sheelah](https://github.com/sheelah), Sheelah Brennan)
+
+
+## [v11.0.8](https://github.com/Workday/canvas-kit/releases/tag/v11.0.8) (2024-06-18)
+
+
+
+
+## [v11.0.7](https://github.com/Workday/canvas-kit/releases/tag/v11.0.7) (2024-06-17)
+
+### Documentation
+
+- chore: Add robust example in storybook for ToolbarDropdown button ([#2782](https://github.com/Workday/canvas-kit/pull/2782)) ([@NehaAhujaa](https://github.com/NehaAhujaa), Neha Ahuja)
+
+### Infrastructure
+
+- fix: Delete unused folder ([#2771](https://github.com/Workday/canvas-kit/pull/2771)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+
+
+## [v11.0.6](https://github.com/Workday/canvas-kit/releases/tag/v11.0.6) (2024-06-10)
+
+### Components
+
+- fix: Prevent undefined from overriding model defaultConfig ([#2766](https://github.com/Workday/canvas-kit/pull/2766)) ([@NicholasBoll](https://github.com/NicholasBoll))
+- fix(select): Update aria-haspopup to 'menu' ([#2760](https://github.com/Workday/canvas-kit/pull/2760)) ([@NicholasBoll](https://github.com/NicholasBoll))
 
 
 ## [v10.3.42](https://github.com/Workday/canvas-kit/releases/tag/v10.3.42) (2024-06-10)
@@ -144,6 +359,131 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Components
 
 - fix: Prevent undefined from overriding model defaultConfig ([#2766](https://github.com/Workday/canvas-kit/pull/2766)) ([@NicholasBoll](https://github.com/NicholasBoll))
+## [v11.0.5](https://github.com/Workday/canvas-kit/releases/tag/v11.0.5) (2024-06-10)
+
+### Components
+
+- fix: Fix backwards compatibility for hover state colors in System Icon ([#2764](https://github.com/Workday/canvas-kit/pull/2764)) ([@RayRedGoose](https://github.com/RayRedGoose))
+
+
+## [v11.0.4](https://github.com/Workday/canvas-kit/releases/tag/v11.0.4) (2024-06-10)
+
+### Dependencies
+
+- chore: Updated Canvas Tokens Web Dependency to version 2.0.0 ([#2762](https://github.com/Workday/canvas-kit/pull/2762)) ([@josh-bagwell](https://github.com/josh-bagwell))
+
+
+## [v11.0.3](https://github.com/Workday/canvas-kit/releases/tag/v11.0.3) (2024-05-28)
+
+### Components
+
+- chore: Updated mergeStyles to accept grid styleprops  ([#2759](https://github.com/Workday/canvas-kit/pull/2759)) ([@josh-bagwell](https://github.com/josh-bagwell))
+
+
+## [v11.0.2](https://github.com/Workday/canvas-kit/releases/tag/v11.0.2) (2024-05-28)
+
+### Documentation
+
+- docs: Update v11 upgrade guide ([@alanbsmith](https://github.com/alanbsmith))
+
+
+## [v11.0.1](https://github.com/Workday/canvas-kit/releases/tag/v11.0.1) (2024-05-24)
+
+### Documentation
+
+- fix: Add explicit info about tokens ([#2754](https://github.com/Workday/canvas-kit/pull/2754)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@josh-bagwell](https://github.com/josh-bagwell))
+
+
+## [v11.0.0](https://github.com/Workday/canvas-kit/releases/tag/v11.0.0) (2024-05-22)
+
+### BREAKING CHANGES
+
+- [#2472](https://github.com/Workday/canvas-kit/pull/2472) - The prop `hasError` for Preview components `FormField`, `TexInput` and `TextArea` have been renamed to `error` and accepts  the values: `"error" | "alert" | undefined`
+- [#2546](https://github.com/Workday/canvas-kit/pull/2546) There may be slight visual changes.
+- [#2567](https://github.com/Workday/canvas-kit/pull/2567) There may be slight visual changes.
+- [#2583](https://github.com/Workday/canvas-kit/pull/2583) There may be slight visual changes.
+- [#2600](https://github.com/Workday/canvas-kit/pull/2600) - `rowState` no longer exists.
+  - The component is now a compound component with access to lower level elements.
+- [#2615](https://github.com/Workday/canvas-kit/pull/2615) Impacts only internal Canvas Kit code. `Icon` component has been removed and no longer used.
+- [#2697](https://github.com/Workday/canvas-kit/pull/2697) Adds `box-sizing: border-box` to all stencils. If your stencil did not add this style already, it may change the way `width` works for the component. Our intent is to make all elements use border box layouts to make width calculations more predictable. This change may change the way your component works if you use the `width` style property.
+
+### <a href="https://camo.githubusercontent.com/1551452433f17e7cb88cbb052252a70d73e7078ce660fdf88d5285443fc0ac6a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f72656c656173655f63617465676f72792d436f6d706f6e656e74732d626c7565" rel="nofollow"><img src="https://camo.githubusercontent.com/1551452433f17e7cb88cbb052252a70d73e7078ce660fdf88d5285443fc0ac6a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f72656c656173655f63617465676f72792d436f6d706f6e656e74732d626c7565" alt="category" style="max-width: 100%;"></a>
+
+- chore: Refactor StatusIndicator component ([#2620](https://github.com/Workday/canvas-kit/pull/2620)) ([@harshanarisetty](https://github.com/harshanarisetty))
+  `StatusIndicator` now uses [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and our [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
+  The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
+  identically as it did in previous versions.
+
+### <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/1551452433f17e7cb88cbb052252a70d73e7078ce660fdf88d5285443fc0ac6a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f72656c656173655f63617465676f72792d436f6d706f6e656e74732d626c7565"><img src="https://camo.githubusercontent.com/1551452433f17e7cb88cbb052252a70d73e7078ce660fdf88d5285443fc0ac6a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f72656c656173655f63617465676f72792d436f6d706f6e656e74732d626c7565" alt="category" data-canonical-src="https://img.shields.io/badge/release_category-Components-blue" style="max-width: 100%;"></a>
+
+- feat(loading-dots): Use static styling utilities ([#2540](https://github.com/Workday/canvas-kit/pull/2540)) ([@harshanarisetty](https://github.com/harshanarisetty))
+
+### Components
+
+- chore: Update CountBadge styles ([#2442](https://github.com/Workday/canvas-kit/pull/2442)) ([@alanbsmith](https://github.com/alanbsmith), manuel.carrera)
+- feat: Update FormField Preview API to support different inputs ([#2472](https://github.com/Workday/canvas-kit/pull/2472)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@RayRedGoose](https://github.com/RayRedGoose))
+  - `TextInput` from Preview has been deprecated. Please use `FormField` from Preview.
+  - `TextArea` from Preview has been deprecated. Please use `FormField` from Preview.
+  - `FormField` from Main has been deprecated. Please use `FormField` from Preview.
+  - `orientation` prop defaults to `vertical` and is no longer required.
+  - `FormField.Input` can be used by any `input`
+  - `FormField` does **not** support the `useFieldSet` prop that the `FormField` in [Main](#main)
+    does. In order to achieve the same behavior, set the `as` prop on the `FormField` element to
+    `fieldset` and the `as` prop of `FormField.Label` to `legend`
+- feat: Text style refactoring ([#2455](https://github.com/Workday/canvas-kit/pull/2455)) ([@RayRedGoose](https://github.com/RayRedGoose), [@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+  Text related components have been refactored to support the new `cs` prop and v10 styling utilities. Type level components,`Title`, `Heading`, `BodyText` and `Subtext`, as well as `Text` and `LabelText` updated to use the new system level tokens via CSS variables from the CanvasProvider. `LabelText` has been deprecated.
+- chore: Refactor Card Styles ([#2471](https://github.com/Workday/canvas-kit/pull/2471)) ([@alanbsmith](https://github.com/alanbsmith), [@RayRedGoose](https://github.com/RayRedGoose))
+- feat: Component Style Updates from Audit ([#2485](https://github.com/Workday/canvas-kit/pull/2485)) ([@josh-bagwell](https://github.com/josh-bagwell), [@mannycarrera4](https://github.com/mannycarrera4))
+  Style updates will have minor visual changes.
+- chore: Bump canvas-kit-styling version ([@alanbsmith](https://github.com/alanbsmith))
+- chore: Bump canvas kit styling ([@](https://github.com/))
+- fix: Update testing to use preview formfield ([@](https://github.com/))
+- test: Add inverse variant visual tests ([#2544](https://github.com/Workday/canvas-kit/pull/2544)) ([@RayRedGoose](https://github.com/RayRedGoose))
+- chore: Refactor FormField in Preview to use new styling utilities and tokens ([#2541](https://github.com/Workday/canvas-kit/pull/2541)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+  Update FormField in Preview to use our new styling utilities and tokens.
+- chore: Radio Styles Refactor ([#2546](https://github.com/Workday/canvas-kit/pull/2546)) ([@josh-bagwell](https://github.com/josh-bagwell))
+  `Radio` and `RadioGroup` now use Canvas Tokens and our new styling utilities. The component now supports the `cs` prop, but otherwise the API has not changed. It should behave identically as it did in previous versions however, there may be some slight visual changes.
+- chore: Refactor Checkbox styles ([#2542](https://github.com/Workday/canvas-kit/pull/2542)) ([@RayRedGoose](https://github.com/RayRedGoose), [@mannycarrera4](https://github.com/mannycarrera4), [@alanbsmith](https://github.com/alanbsmith))
+  `Checkbox` now uses Canvas Tokens and our new styling utilities. The component now supports the `cs` prop, but otherwise the API has not changed. It should behave identically as it did in previous versions.
+- chore: Table(Preview) Styles Refactor ([#2567](https://github.com/Workday/canvas-kit/pull/2567)) ([@josh-bagwell](https://github.com/josh-bagwell))
+  Table now uses Canvas Tokens and our new styling utilities. The component now supports the cs prop, but otherwise the API has not changed. It should behave identically as it did in previous versions however, there may be some slight visual changes.
+- fix: Fix build script on css packages ([@NicholasBoll](https://github.com/NicholasBoll))
+- chore: Switch Styles Refactor ([#2583](https://github.com/Workday/canvas-kit/pull/2583)) ([@josh-bagwell](https://github.com/josh-bagwell))
+  Switch now uses Canvas Tokens and our new styling utilities. The component now supports the cs prop, but otherwise the API has not changed. It should behave identically as it did in previous versions however, there may be some slight visual changes.
+- chore: Updated Radio(Preview) & Table(Preview) with createStencil ([#2585](https://github.com/Workday/canvas-kit/pull/2585)) ([@josh-bagwell](https://github.com/josh-bagwell))
+- chore: Table Promotion from preview ([#2600](https://github.com/Workday/canvas-kit/pull/2600)) ([@josh-bagwell](https://github.com/josh-bagwell))
+  We've promoted the compound `Table` component from Preview to Main. This compound component API allows for more flexibility and access to lower level elements.
+- feat: Add support for stencil extension ([#2612](https://github.com/Workday/canvas-kit/pull/2612)) ([@NicholasBoll](https://github.com/NicholasBoll))
+- chore: Refactor Select and Combobox to use new styling utilities and tokens ([#2570](https://github.com/Workday/canvas-kit/pull/2570)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@josh-bagwell](https://github.com/josh-bagwell), [@RayRedGoose](https://github.com/RayRedGoose))
+- chore: Refactor icon components ([#2615](https://github.com/Workday/canvas-kit/pull/2615)) ([@RayRedGoose](https://github.com/RayRedGoose), [@alanbsmith](https://github.com/alanbsmith), [@NicholasBoll](https://github.com/NicholasBoll), [@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+  Icon components, `Svg`, `SystemIcon`, `AccentIcon`, `AppletIcon`, `Graphic` now uses Canvas Tokens 
+  and new styling utilities. Components now supports the `cs` prop instead `styles`, but otherwise the API has not changed. It should behave similar as it did in previous versions.
+- chore: Update Text to use system tokens ([#2659](https://github.com/Workday/canvas-kit/pull/2659)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@RayRedGoose](https://github.com/RayRedGoose))
+  Update our Text components to use our system tokens.
+- fix: Make variable names safe for Emotion ([#2687](https://github.com/Workday/canvas-kit/pull/2687)) ([@NicholasBoll](https://github.com/NicholasBoll))
+- chore: Update Card color tokens ([#2682](https://github.com/Workday/canvas-kit/pull/2682)) ([@alanbsmith](https://github.com/alanbsmith))
+- chore: Update FormField and Select to use system colors ([#2685](https://github.com/Workday/canvas-kit/pull/2685)) ([@RayRedGoose](https://github.com/RayRedGoose))
+- chore: Update checkbox to use system color tokens ([#2683](https://github.com/Workday/canvas-kit/pull/2683)) ([@RayRedGoose](https://github.com/RayRedGoose))
+- feat: Add box-sizing:border-box automatically to all stencils ([#2697](https://github.com/Workday/canvas-kit/pull/2697)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+### Documentation
+
+- fix: Update usage of deprecated form field across examples ([#2491](https://github.com/Workday/canvas-kit/pull/2491)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@RayRedGoose](https://github.com/RayRedGoose))
+- fix: Update upgrade guide for 11 ([#2678](https://github.com/Workday/canvas-kit/pull/2678)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+- ci: Fix SymbolDoc ([#2696](https://github.com/Workday/canvas-kit/pull/2696)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+### Infrastructure
+
+- feat: Add initial v11 setup ([#2476](https://github.com/Workday/canvas-kit/pull/2476)) ([@RayRedGoose](https://github.com/RayRedGoose))
+- ci: Fix missing dependency ([@NicholasBoll](https://github.com/NicholasBoll))
+- feat: Generate CSS kits from React kits ([#2578](https://github.com/Workday/canvas-kit/pull/2578)) ([@NicholasBoll](https://github.com/NicholasBoll))
+- feat: Add per-module prefix ([#2582](https://github.com/Workday/canvas-kit/pull/2582)) ([@NicholasBoll](https://github.com/NicholasBoll))
+- chore: Bump canvas-tokens-web ([#2681](https://github.com/Workday/canvas-kit/pull/2681)) ([@alanbsmith](https://github.com/alanbsmith))
+- ci: Run style transform in Storybook ([#2677](https://github.com/Workday/canvas-kit/pull/2677)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+### Styling
+
+- fix(styling): Fix variables in stencil config ([#2624](https://github.com/Workday/canvas-kit/pull/2624)) ([@NicholasBoll](https://github.com/NicholasBoll))
 
 
 ## [v10.3.40](https://github.com/Workday/canvas-kit/releases/tag/v10.3.40) (2024-05-17)
diff --git a/cypress/integration/RadioPreview.spec.ts b/cypress/integration/RadioPreview.spec.ts
index 2d19457d51..55f1b89e93 100644
--- a/cypress/integration/RadioPreview.spec.ts
+++ b/cypress/integration/RadioPreview.spec.ts
@@ -68,7 +68,7 @@ describe('Radio Preview', () => {
     });
 
     it(`the "Deep dish" radio button should have an aria-describedby`, () => {
-      cy.findByLabelText('Deep dish').should('have.attr', 'aria-describedby', 'hint-alert');
+      cy.findByLabelText('Deep dish').should('have.attr', 'aria-describedby', 'hint-hint-alert');
     });
   });
 });
diff --git a/lerna.json b/lerna.json
index 1ec9070876..af5712dce9 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "10.3.60",
+  "version": "11.1.10",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {
diff --git a/modules/codemod/index.js b/modules/codemod/index.js
index 25bb957c32..f52a5ab1d6 100755
--- a/modules/codemod/index.js
+++ b/modules/codemod/index.js
@@ -4,7 +4,13 @@
 const {spawn} = require('child_process');
 const chalk = require('chalk');
 
-const {_: commands, path, ignoreConfig, ignorePattern, verbose} = require('yargs')
+const {
+  _: commands,
+  path,
+  ignoreConfig,
+  ignorePattern,
+  verbose,
+} = require('yargs')
   .scriptName('canvas-kit-codemod')
   .usage(chalk.bold.blueBright('$0 <transform> [path]'))
   .options({
@@ -61,6 +67,13 @@ const {_: commands, path, ignoreConfig, ignorePattern, verbose} = require('yargs
       describe: chalk.gray('The path to execute the transform in (recursively).'),
     });
   })
+  .command('v11 [path]', chalk.gray('Canvas Kit v10 > v11 upgrade transform'), yargs => {
+    yargs.positional('path', {
+      type: 'string',
+      default: '.',
+      describe: chalk.gray('The path to execute the transform in (recursively).'),
+    });
+  })
   .demandCommand(1, chalk.red.bold('You must provide a transform to apply.'))
   .strictCommands()
   .fail((msg, err, yargs) => {
@@ -84,9 +97,10 @@ const ignoreConfigArg = ignoreConfig ? `--ignore-config=${ignoreConfig}` : '';
 console.log(ignorePattern);
 
 console.log(chalk.blueBright(`\nApplying ${transform} transform to '${path}'\n`));
-const args = `-t ${__dirname}/dist/es6/${transform} ${path} --parser tsx --extensions js,jsx,ts,tsx ${ignoreConfigArg} --ignore-pattern=${ignorePattern} --verbose=${verbose}`.split(
-  ' '
-);
+const args =
+  `-t ${__dirname}/dist/es6/${transform} ${path} --parser tsx --extensions js,jsx,ts,tsx ${ignoreConfigArg} --ignore-pattern=${ignorePattern} --verbose=${verbose}`.split(
+    ' '
+  );
 
 const proc = spawn(`jscodeshift`, args);
 
diff --git a/modules/codemod/lib/v11/index.ts b/modules/codemod/lib/v11/index.ts
new file mode 100644
index 0000000000..f0816f548d
--- /dev/null
+++ b/modules/codemod/lib/v11/index.ts
@@ -0,0 +1,16 @@
+import {Transform} from 'jscodeshift';
+
+import renameHasErrorPreview from './renameHasErrorPreview';
+import replaceStylesIconProp from './replaceStylesIconProp';
+
+const transform: Transform = (file, api, options) => {
+  // These will run in order. If your transform depends on others, place yours after dependent transforms
+  const fixes = [
+    // add codemods here
+    renameHasErrorPreview,
+    replaceStylesIconProp,
+  ];
+  return fixes.reduce((source, fix) => fix({...file, source}, api, options) as string, file.source);
+};
+
+export default transform;
diff --git a/modules/codemod/lib/v11/renameHasErrorPreview.ts b/modules/codemod/lib/v11/renameHasErrorPreview.ts
new file mode 100644
index 0000000000..85da0fc357
--- /dev/null
+++ b/modules/codemod/lib/v11/renameHasErrorPreview.ts
@@ -0,0 +1,66 @@
+import {API, FileInfo, Options, JSXOpeningElement, JSXIdentifier} from 'jscodeshift';
+import {hasImportSpecifiers} from '../v6/utils';
+import {getImportRenameMap} from './utils/getImportRenameMap';
+const textInputPackage = '@workday/canvas-kit-preview-react/text-input';
+const textAreaPackage = '@workday/canvas-kit-preview-react/text-area';
+const formFieldPackage = '@workday/canvas-kit-preview-react/form-field';
+const packages = [textInputPackage, textAreaPackage, formFieldPackage];
+const packageImports = ['TextInput', 'FormField', 'TextArea'];
+
+export default function transformer(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+
+  const root = j(file.source);
+
+  // exit if the named imports aren't found
+  if (!hasImportSpecifiers(api, root, packages, packageImports)) {
+    return file.source;
+  }
+
+  // getImportRenameMap utility will tell us if the file containsCanvasImports
+  // and give us an importMap to track what identifiers we need to update
+  const {importMap, styledMap} = getImportRenameMap(j, root, '@workday/canvas-kit-preview-react');
+
+  root
+    .find(j.JSXOpeningElement, (value: JSXOpeningElement) => {
+      const isCorrectImport = Object.entries(importMap).some(
+        ([original, imported]) =>
+          imported === (value.name as JSXIdentifier).name && packageImports.includes(original)
+      );
+
+      const isCorrectStyled = Object.entries(styledMap).some(
+        ([original, styled]) =>
+          styled === (value.name as JSXIdentifier).name && packageImports.includes(original)
+      );
+
+      return isCorrectImport || isCorrectStyled;
+    })
+    .forEach(nodePath => {
+      nodePath.node.attributes?.forEach(attr => {
+        if (attr.type === 'JSXAttribute') {
+          if (attr.name.name === 'hasError') {
+            attr.name.name = 'error';
+            if (attr.value && attr.value.type === 'JSXExpressionContainer') {
+              const value = attr.value.expression as any;
+
+              if (value.type === 'BooleanLiteral') {
+                if (value.value) {
+                  attr.value = j.stringLiteral('error');
+                } else {
+                  attr.value = j.jsxExpressionContainer(j.identifier('undefined'));
+                }
+              } else if (value.type === 'Identifier') {
+                attr.value.expression = j.conditionalExpression(
+                  j.identifier(value.name),
+                  j.stringLiteral('error'),
+                  j.identifier('undefined')
+                );
+              }
+            }
+          }
+        }
+      });
+    });
+
+  return root.toSource();
+}
diff --git a/modules/codemod/lib/v11/replaceStylesIconProp.ts b/modules/codemod/lib/v11/replaceStylesIconProp.ts
new file mode 100644
index 0000000000..b95b63d8f9
--- /dev/null
+++ b/modules/codemod/lib/v11/replaceStylesIconProp.ts
@@ -0,0 +1,52 @@
+import {API, FileInfo, Options, JSXOpeningElement, JSXIdentifier} from 'jscodeshift';
+import {hasImportSpecifiers} from '../v6/utils';
+import {getImportRenameMap} from './utils/getImportRenameMap';
+
+const packages = ['@workday/canvas-kit-react', '@workday/canvas-kit-react/icon'];
+const packageImports = ['Svg', 'SystemIcon', 'AccentIcon'];
+
+export default function transformer(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+
+  const root = j(file.source);
+
+  // exit if the named imports aren't found
+  if (!hasImportSpecifiers(api, root, packages, packageImports)) {
+    return file.source;
+  }
+
+  // getImportRenameMap utility will tell us if the file containsCanvasImports
+  // and give us an importMap to track what identifiers we need to update
+  const {importMap, styledMap} = getImportRenameMap(
+    j,
+    root,
+    '@workday/canvas-kit-react',
+    '@workday/canvas-kit-react/icon'
+  );
+
+  root
+    .find(j.JSXOpeningElement, (value: JSXOpeningElement) => {
+      const isCorrectImport = Object.entries(importMap).some(
+        ([original, imported]) =>
+          imported === (value.name as JSXIdentifier).name && packageImports.includes(original)
+      );
+
+      const isCorrectStyled = Object.entries(styledMap).some(
+        ([original, styled]) =>
+          styled === (value.name as JSXIdentifier).name && packageImports.includes(original)
+      );
+
+      return isCorrectImport || isCorrectStyled;
+    })
+    .forEach(nodePath => {
+      nodePath.node.attributes?.forEach(attr => {
+        if (attr.type === 'JSXAttribute') {
+          if (attr.name.name === 'styles') {
+            attr.name.name = 'cs';
+          }
+        }
+      });
+    });
+
+  return root.toSource();
+}
diff --git a/modules/codemod/lib/v11/spec/expectTransformFactory.ts b/modules/codemod/lib/v11/spec/expectTransformFactory.ts
new file mode 100644
index 0000000000..d2ec7424b0
--- /dev/null
+++ b/modules/codemod/lib/v11/spec/expectTransformFactory.ts
@@ -0,0 +1,6 @@
+import {runInlineTest} from 'jscodeshift/dist/testUtils';
+
+export const expectTransformFactory =
+  (fn: Function) => (input: string, expected: string, options?: Record<string, any>) => {
+    return runInlineTest(fn, options, {source: input}, expected, {parser: 'tsx'});
+  };
diff --git a/modules/codemod/lib/v11/spec/renameHasErrorPreview.spec.ts b/modules/codemod/lib/v11/spec/renameHasErrorPreview.spec.ts
new file mode 100644
index 0000000000..ced898fc02
--- /dev/null
+++ b/modules/codemod/lib/v11/spec/renameHasErrorPreview.spec.ts
@@ -0,0 +1,177 @@
+import {expectTransformFactory} from './expectTransformFactory';
+import transform from '../renameHasErrorPreview';
+import {stripIndent} from 'common-tags';
+
+const expectTransform = expectTransformFactory(transform);
+
+describe('renameHasError', () => {
+  it('should not change non-canvas imports', () => {
+    const input = stripIndent`
+            import {TextInput} from '@workday/any-other-package'
+            import {TextArea} from './text-area'
+            import {FormField} from 'any-other-package'
+            <>
+                <TextInput hasError={true} />
+                <TextArea hasError={true} />
+                <FormField hasError={true} />
+            </>
+        `;
+
+    const expected = stripIndent`
+            import {TextInput} from '@workday/any-other-package'
+            import {TextArea} from './text-area'
+            import {FormField} from 'any-other-package'
+            <>
+                <TextInput hasError={true} />
+                <TextArea hasError={true} />
+                <FormField hasError={true} />
+            </>
+        `;
+    expectTransform(input, expected);
+  });
+
+  it('should rename hasError to error and set the value to "error" for FormField, TextInput and TextArea', () => {
+    const input = stripIndent`
+        import {TextInput} from '@workday/canvas-kit-preview-react/text-input'
+        import {TextArea} from '@workday/canvas-kit-preview-react/text-area'
+        import {FormField} from '@workday/canvas-kit-preview-react/form-field'
+        <>
+            <TextInput hasError={true} />
+            <TextArea hasError={true} />
+            <FormField hasError={true} />
+        </>
+    `;
+
+    const expected = stripIndent`
+        import {TextInput} from '@workday/canvas-kit-preview-react/text-input'
+        import {TextArea} from '@workday/canvas-kit-preview-react/text-area'
+        import {FormField} from '@workday/canvas-kit-preview-react/form-field'
+        <>
+            <TextInput error="error" />
+            <TextArea error="error" />
+            <FormField error="error" />
+        </>
+    `;
+    expectTransform(input, expected);
+  });
+  it('should rename rename hasError to error and handle ternary with variable', () => {
+    const input = stripIndent`
+        import {TextInput} from '@workday/canvas-kit-preview-react/text-input'
+        const myBool = true;
+        <>
+            <TextInput hasError={myBool} />
+        </>
+    `;
+
+    const expected = stripIndent`
+        import {TextInput} from '@workday/canvas-kit-preview-react/text-input'
+        const myBool = true;
+        <>
+            <TextInput error={myBool ? "error" : undefined} />
+        </>
+    `;
+    expectTransform(input, expected);
+  });
+  it('should change main package canvas imports', () => {
+    const input = stripIndent`
+        import {TextInput, TextArea, FormField} from '@workday/canvas-kit-preview-react'
+        <>
+            <TextInput hasError={true} />
+            <TextArea hasError={true} />
+            <FormField hasError={true} />
+        </>
+    `;
+
+    const expected = stripIndent`
+        import {TextInput, TextArea, FormField} from '@workday/canvas-kit-preview-react'
+        <>
+            <TextInput error="error" />
+            <TextArea error="error" />
+            <FormField error="error" />
+        </>
+    `;
+    expectTransform(input, expected);
+  });
+
+  it('should change renamed FormField', () => {
+    const input = stripIndent`
+        import {TextInput as CanvasTextInput} from '@workday/canvas-kit-preview-react/text-input'
+        import {TextArea as CanvasTextArea} from '@workday/canvas-kit-preview-react/text-area'
+        import {FormField as CanvasForm} from '@workday/canvas-kit-preview-react/form-field'
+        
+        <>
+            <CanvasTextInput hasError={true} />
+            <CanvasTextArea hasError={true} />
+            <CanvasForm hasError={true} />
+        </>
+    `;
+
+    const expected = stripIndent`
+        import {TextInput as CanvasTextInput} from '@workday/canvas-kit-preview-react/text-input'
+        import {TextArea as CanvasTextArea} from '@workday/canvas-kit-preview-react/text-area'
+        import {FormField as CanvasForm} from '@workday/canvas-kit-preview-react/form-field'
+        
+        <>
+            <CanvasTextInput error="error" />
+            <CanvasTextArea error="error" />
+            <CanvasForm error="error" />
+        </>
+    `;
+    expectTransform(input, expected);
+  });
+
+  it('should change styled FormField', () => {
+    const input = stripIndent`
+        import {FormField} from '@workday/canvas-kit-preview-react/form-field'
+        const StyledForm = styled(FormField)({color: "#000"});
+        <StyledForm hasError={true} />
+    `;
+
+    const expected = stripIndent`
+        import {FormField} from '@workday/canvas-kit-preview-react/form-field'
+        const StyledForm = styled(FormField)({color: "#000"});
+        <StyledForm error="error" />
+    `;
+    expectTransform(input, expected);
+  });
+
+  it('should rename rename hasError to error and handle ternary with variable', () => {
+    const input = stripIndent`
+        import {TextInput} from '@workday/canvas-kit-preview-react/text-input'
+        const myBool = true;
+        <>
+            <TextInput hasError={myBool} />
+        </>
+    `;
+
+    const expected = stripIndent`
+        import {TextInput} from '@workday/canvas-kit-preview-react/text-input'
+        const myBool = true;
+        <>
+            <TextInput error={myBool ? "error" : undefined} />
+        </>
+    `;
+    expectTransform(input, expected);
+  });
+
+  it('should not rename hasError prop for other components', () => {
+    const input = stripIndent`
+        import {TextInput, MyOtherComponent} from '@workday/canvas-kit-preview-react'
+        const myBool = true;
+        <>
+            <MyOtherComponent hasError={true} />
+            <TextInput hasError={myBool} />
+        </>
+    `;
+
+    const expected = stripIndent`
+        import {TextInput, MyOtherComponent} from '@workday/canvas-kit-preview-react'
+        const myBool = true;
+        <>
+            <MyOtherComponent hasError={true} />
+            <TextInput error={myBool ? "error" : undefined} />
+        </>
+    `;
+    expectTransform(input, expected);
+  });
+});
diff --git a/modules/codemod/lib/v11/spec/replaceStylesIconProp.spec.ts b/modules/codemod/lib/v11/spec/replaceStylesIconProp.spec.ts
new file mode 100644
index 0000000000..b796ab508c
--- /dev/null
+++ b/modules/codemod/lib/v11/spec/replaceStylesIconProp.spec.ts
@@ -0,0 +1,138 @@
+import {expectTransformFactory} from './expectTransformFactory';
+import transform from '../replaceStylesIconProp';
+import {stripIndent} from 'common-tags';
+
+const expectTransform = expectTransformFactory(transform);
+
+describe('replaceStylesIconProp', () => {
+  it('should not change non-canvas imports', () => {
+    const input = stripIndent`
+            import {Svg} from '@workday/any-other-package';
+            import {SystemIcon} from './any-icon-package';
+            import {AccentIcon} from 'any-other-package';
+
+            <>
+                <Svg styles={{padding: '1rem'}} />
+                <SystemIcon styles={{padding: '1rem'}} />
+                <AccentIcon styles={{padding: '1rem'}} />
+            </>
+        `;
+
+    const expected = stripIndent`
+            import {Svg} from '@workday/any-other-package';
+            import {SystemIcon} from './any-icon-package';
+            import {AccentIcon} from 'any-other-package';
+
+            <>
+                <Svg styles={{padding: '1rem'}} />
+                <SystemIcon styles={{padding: '1rem'}} />
+                <AccentIcon styles={{padding: '1rem'}} />
+            </>
+        `;
+    expectTransform(input, expected);
+  });
+
+  it('should rename styles to cs for Svg, SystemIcon, AccentIcon exported from the icon package', () => {
+    const input = stripIndent`
+        import {Svg, SystemIcon, AccentIcon} from '@workday/canvas-kit-react/icon'
+
+        <>
+            <Svg styles={{padding: '1rem'}} />
+            <SystemIcon styles={{padding: '1rem'}} />
+            <AccentIcon styles={{padding: '1rem'}} />
+        </>
+    `;
+
+    const expected = stripIndent`
+        import {Svg, SystemIcon, AccentIcon} from '@workday/canvas-kit-react/icon'
+
+        <>
+            <Svg cs={{padding: '1rem'}} />
+            <SystemIcon cs={{padding: '1rem'}} />
+            <AccentIcon cs={{padding: '1rem'}} />
+        </>
+    `;
+    expectTransform(input, expected);
+  });
+
+  it('should rename styles to cs for Svg, SystemIcon, AccentIcon exported from the main package', () => {
+    const input = stripIndent`
+        import {Svg, SystemIcon, AccentIcon} from '@workday/canvas-kit-react'
+
+        <>
+            <Svg styles={{padding: '1rem'}} />
+            <SystemIcon styles={{padding: '1rem'}} />
+            <AccentIcon styles={{padding: '1rem'}} />
+        </>
+    `;
+
+    const expected = stripIndent`
+        import {Svg, SystemIcon, AccentIcon} from '@workday/canvas-kit-react'
+
+        <>
+            <Svg cs={{padding: '1rem'}} />
+            <SystemIcon cs={{padding: '1rem'}} />
+            <AccentIcon cs={{padding: '1rem'}} />
+        </>
+    `;
+    expectTransform(input, expected);
+  });
+
+  it('should handle value as variable', () => {
+    const input = stripIndent`
+        import {Svg, SystemIcon, AccentIcon} from '@workday/canvas-kit-react/icon';
+
+        <>
+            <Svg styles={iconStyles} />
+            <SystemIcon styles={iconStyles} />
+            <AccentIcon styles={iconStyles} />
+        </>
+    `;
+
+    const expected = stripIndent`
+        import {Svg, SystemIcon, AccentIcon} from '@workday/canvas-kit-react/icon';
+
+        <>
+            <Svg cs={iconStyles} />
+            <SystemIcon cs={iconStyles} />
+            <AccentIcon cs={iconStyles} />
+        </>
+    `;
+
+    expectTransform(input, expected);
+  });
+
+  it('should rename styles to cs for styled component exported from the icon package', () => {
+    const input = stripIndent`
+        import {Svg} from '@workday/canvas-kit-react/icon';
+
+        const StyledSvg = styled(Svg)({});
+
+        <StyledSvg styles={{padding: '1rem'}} />
+    `;
+
+    const expected = stripIndent`
+        import {Svg} from '@workday/canvas-kit-react/icon';
+
+        const StyledSvg = styled(Svg)({});
+
+        <StyledSvg cs={{padding: '1rem'}} />
+    `;
+    expectTransform(input, expected);
+  });
+
+  it('should rename styles to cs for renamed components exported from the icon package', () => {
+    const input = stripIndent`
+        import {Svg as CanvasSvg} from '@workday/canvas-kit-react/icon';
+
+        <CanvasSvg styles={{padding: '1rem'}} />
+    `;
+
+    const expected = stripIndent`
+        import {Svg as CanvasSvg} from '@workday/canvas-kit-react/icon';
+
+        <CanvasSvg cs={{padding: '1rem'}} />
+    `;
+    expectTransform(input, expected);
+  });
+});
diff --git a/modules/codemod/lib/v11/utils/getImportRenameMap.ts b/modules/codemod/lib/v11/utils/getImportRenameMap.ts
new file mode 100644
index 0000000000..df0286fe2b
--- /dev/null
+++ b/modules/codemod/lib/v11/utils/getImportRenameMap.ts
@@ -0,0 +1,65 @@
+import {Collection, JSCodeshift, CallExpression} from 'jscodeshift';
+
+export function getImportRenameMap(
+  j: JSCodeshift,
+  root: Collection<any>,
+  mainPackage = '@workday/canvas-kit-react',
+  packageName = ''
+) {
+  let containsCanvasImports = false;
+
+  // build import name remapping - in case someone renamed imports...
+  // i.e. `import { IconButton as StyledIconButton } ...`
+  const importMap: Record<string, string> = {};
+  const styledMap: Record<string, string> = {};
+  root.find(j.ImportDeclaration, node => {
+    // imports our module
+    const value = node.source.value;
+    if (
+      typeof value === 'string' &&
+      (value === mainPackage || value.startsWith(mainPackage) || value === packageName)
+    ) {
+      containsCanvasImports = true;
+      (node.specifiers || []).forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier') {
+          if (!specifier.local || specifier.local.name === specifier.imported.name) {
+            importMap[specifier.imported.name] = specifier.imported.name;
+          } else {
+            importMap[specifier.imported.name] = specifier.local.name;
+          }
+        }
+      });
+    }
+    return false;
+  });
+
+  root
+    .find(j.CallExpression, (node: CallExpression) => {
+      if (
+        node.callee.type === 'Identifier' &&
+        node.callee.name === 'styled' &&
+        node.arguments[0].type === 'Identifier'
+      ) {
+        return true;
+      }
+      return false;
+    })
+    .forEach(nodePath => {
+      // const StyledName = styled(OriginalName)({})
+      // const StyledName = styled(OriginalName)`` // Tagged template
+      if (
+        (nodePath.parent.value.type === 'CallExpression' ||
+          nodePath.parent.value.type === 'TaggedTemplateExpression') &&
+        nodePath.parent.parent.value.type === 'VariableDeclarator' &&
+        nodePath.parent.parent.value.id.type === 'Identifier'
+      ) {
+        const styledName = nodePath.parent.parent.value.id.name;
+
+        if (nodePath.value.arguments[0].type === 'Identifier') {
+          styledMap[nodePath.value.arguments[0].name] = styledName;
+        }
+      }
+    });
+
+  return {containsCanvasImports, importMap, styledMap};
+}
diff --git a/modules/codemod/lib/v6/utils/index.ts b/modules/codemod/lib/v6/utils/index.ts
index e409ca54f4..953d1f8728 100644
--- a/modules/codemod/lib/v6/utils/index.ts
+++ b/modules/codemod/lib/v6/utils/index.ts
@@ -136,10 +136,7 @@ export function hasImportSpecifiers(
 
     // Extract the main package(s) from the import, and test specifiers against that package
     const mainPackage = (typeof packageName === 'string' ? [packageName] : packageName).map(s =>
-      s
-        .split('/')
-        .slice(0, -1)
-        .join('/')
+      s.split('/').slice(0, -1).join('/')
     );
     if (mainPackage.includes(value as string)) {
       return !!(nodePath.specifiers || []).find(specifier => {
@@ -168,10 +165,7 @@ export function renameImports(
     return root;
   }
 
-  const mainPackage = packageName
-    .split('/')
-    .slice(0, -1)
-    .join('/');
+  const mainPackage = packageName.split('/').slice(0, -1).join('/');
 
   // Transform import statements
   // e.g. import { CookieBanner, CookieBannerProps } from '@workday/canvas-kit-react';
diff --git a/modules/codemod/package.json b/modules/codemod/package.json
index f9d1817e04..ec9228e1b7 100644
--- a/modules/codemod/package.json
+++ b/modules/codemod/package.json
@@ -2,7 +2,7 @@
   "name": "@workday/canvas-kit-codemod",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
-  "version": "10.3.60",
+  "version": "11.1.10",
   "description": "A collection of codemods for use on Workday Canvas Kit packages.",
   "main": "dist/es6/index.js",
   "sideEffects": false,
diff --git a/modules/css/.gitignore b/modules/css/.gitignore
new file mode 100644
index 0000000000..eedb1cddd4
--- /dev/null
+++ b/modules/css/.gitignore
@@ -0,0 +1,2 @@
+
+*.css
diff --git a/modules/preview-react/table/LICENSE b/modules/css/LICENSE
similarity index 100%
rename from modules/preview-react/table/LICENSE
rename to modules/css/LICENSE
diff --git a/modules/css/README.md b/modules/css/README.md
new file mode 100644
index 0000000000..406d268713
--- /dev/null
+++ b/modules/css/README.md
@@ -0,0 +1,4 @@
+# Canvas Kit CSS
+
+The bundle package containing all modules of the Canvas Kit CSS. The contents are auto-generated
+from the Canvas Kit React source code.
diff --git a/modules/css/package.json b/modules/css/package.json
new file mode 100644
index 0000000000..014ea24a42
--- /dev/null
+++ b/modules/css/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@workday/canvas-kit-css",
+  "version": "11.1.10",
+  "description": "The parent module that contains all Workday Canvas Kit CSS components",
+  "author": "Workday, Inc. (https://www.workday.com)",
+  "license": "Apache-2.0",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/workday/canvas-kit.git",
+    "directory": "modules/css"
+  },
+  "files": [
+    "*/package.json",
+    "*.css"
+  ],
+  "scripts": {
+    "clean": "rimraf *.css",
+    "build": "node ../../utils/update-css-package-version.js"
+  },
+  "keywords": [
+    "canvas",
+    "canvas-kit",
+    "css",
+    "components",
+    "workday"
+  ]
+}
diff --git a/modules/docs/docgen/createDocProgram.js b/modules/docs/docgen/createDocProgram.js
index 95d1fe9c9b..b2eb28e1b2 100644
--- a/modules/docs/docgen/createDocProgram.js
+++ b/modules/docs/docgen/createDocProgram.js
@@ -117,8 +117,9 @@ function createDocProgram() {
   let program = ts.createProgram(files, tsConfig);
   let parser = new DocParser(program, plugins);
 
-  return {
+  const Doc = {
     parser,
+    program,
     update() {
       files = getFiles(path, config);
       // Update the program to force Typescript to reprocess our changed files. I
@@ -126,12 +127,14 @@ function createDocProgram() {
       // a way to tell Typescript to incrementally update only the changed file.
       // Typescript only supports "incremental" via building and type-checking
       // where I only want a program - I don't need to type check or emit...
-      program = ts.createProgram(files, tsConfig, undefined, program);
-      parser = new DocParser(program, plugins);
+      Doc.program = ts.createProgram(files, tsConfig, undefined, program);
+      Doc.parser = new DocParser(program, plugins);
 
-      return parser;
+      return Doc.parser;
     },
   };
+
+  return Doc;
 }
 
 module.exports.createDocProgram = createDocProgram;
diff --git a/modules/docs/docgen/spec/createProgramFromSource.ts b/modules/docs/docgen/spec/createProgramFromSource.ts
index d915e22e56..2a9b2bd048 100644
--- a/modules/docs/docgen/spec/createProgramFromSource.ts
+++ b/modules/docs/docgen/spec/createProgramFromSource.ts
@@ -42,13 +42,13 @@ export function createProgramFromSource(...args: any[]) {
         (name.startsWith('lib')
           ? ts.createSourceFile(
               name,
-              ts.sys.readFile(`node_modules/typescript/lib/${name}`),
+              ts.sys.readFile(`node_modules/typescript/lib/${name}`)!,
               languageVersion
             )
           : name === 'node_modules/react.ts'
           ? ts.createSourceFile(
               name,
-              ts.sys.readFile(`node_modules/@types/react/index.d.ts`),
+              ts.sys.readFile(`node_modules/@types/react/index.d.ts`)!,
               languageVersion
             )
           : defaultCompilerHost.getSourceFile(name, languageVersion))
diff --git a/modules/docs/lib/Specifications.tsx b/modules/docs/lib/Specifications.tsx
index a3458b3333..df4e4223ba 100644
--- a/modules/docs/lib/Specifications.tsx
+++ b/modules/docs/lib/Specifications.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 import React from 'react';
 import {toId} from '@storybook/csf';
-import {Table, TableRow} from '@workday/canvas-kit-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {Hyperlink} from '@workday/canvas-kit-react/button';
 
 import {specifications, SpecDescribe, SpecIt} from './specs';
@@ -85,35 +85,37 @@ export const Specifications = ({file, name}: SpecificationsProps) => {
 
     const [, first, kind, name, last] = matches;
 
-    return <>
-      {first.replace(/given /i, '')}
-      <Hyperlink
-        href={`${storybookBaseUrl}?path=/story/${toId(
-          kind,
-          name.replace('DefaultStory', 'Default Story')
-        )}`}
-      >
-        {name.replace('DefaultStory', 'Default')}
-      </Hyperlink>
-      {last}
-    </>;
+    return (
+      <>
+        {first.replace(/given /i, '')}
+        <Hyperlink
+          href={`${storybookBaseUrl}?path=/story/${toId(
+            kind,
+            name.replace('DefaultStory', 'Default Story')
+          )}`}
+        >
+          {name.replace('DefaultStory', 'Default')}
+        </Hyperlink>
+        {last}
+      </>
+    );
   };
 
   return block.type === 'describe' ? (
     <>
       <Table>
-        <thead>
-          <TableRow header={true}>
-            <th>Given</th>
-            <th>When</th>
-            <th>Then</th>
-          </TableRow>
-        </thead>
-        <tbody>
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>Given</Table.Header>
+            <Table.Header>When</Table.Header>
+            <Table.Header>Then</Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
           {block.children.reduce(createTableRows, []).map((row, index) => (
-            <TableRow key={index}>
-              <td>{renderGiven(row.given[0])}</td>
-              <td>
+            <Table.Row key={index}>
+              <Table.Cell>{renderGiven(row.given[0])}</Table.Cell>
+              <Table.Cell>
                 <ul>
                   {row.when.map((item, index) => (
                     <li key={index}>
@@ -121,17 +123,17 @@ export const Specifications = ({file, name}: SpecificationsProps) => {
                     </li>
                   ))}
                 </ul>
-              </td>
-              <td>
+              </Table.Cell>
+              <Table.Cell>
                 <ul>
                   {row.then.map((item, index) => (
                     <li key={index}>{(item.indexOf('should') === 0 ? 'it ' : '') + item}</li>
                   ))}
                 </ul>
-              </td>
-            </TableRow>
+              </Table.Cell>
+            </Table.Row>
           ))}
-        </tbody>
+        </Table.Body>
       </Table>
       Source:{' '}
       <Hyperlink href={`${githubUrl}blob/${githubBranch}/cypress/integration/${file}`}>
diff --git a/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx
new file mode 100644
index 0000000000..19a4d17927
--- /dev/null
+++ b/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx
@@ -0,0 +1,997 @@
+import {Meta} from '@storybook/addon-docs';
+import {Table} from '@workday/canvas-kit-react/table';
+import {base, brand, system} from '@workday/canvas-tokens-web';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+<Meta title="Guides/Upgrade Guides/v11.0" />
+
+# Canvas Kit 11.0 Upgrade Guide
+
+This guide contains an overview of the changes in Canvas Kit v11. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
+any questions.
+
+## Why You Should Upgrade
+
+Canvas Kit v11 is transitioning into a
+[new way of styling](https://github.com/Workday/canvas-kit/discussions/2265). Theming and building
+an in sync Canvas Kit CSS has been at the top of our minds. We've started using our new
+[Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
+package to take advantage of
+[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) and
+provide semantic tokens that can translate to theming components.
+
+A note to the reader:
+
+- While we still support our old tokens from `@workday/canvas-kit-react/tokens` in v11, you must
+  install our new tokens from `@workday/canvas-tokens-web`. You can find more info in our
+  [docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
+- In this release, we've introduced a
+  [new styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-stencil).
+  This shouldn't effect the way you currently style your components. Because we're moving away from
+  Emotion, support for style props will eventually be removed, however, this API provide backwards
+  compatability. If you want to slowly move off of Emotion as well, you can start styling components
+  via the `cs` prop or our new styling utilities.
+
+## Table of contents
+
+- [Canvas Tokens](#canvas-tokens)
+- [Codemod](#codemod)
+- [Deprecations](#deprecations)
+  - [Form Field (Main)](#form-field-main)
+  - [Label Text](#label-text)
+  - [Text Area (Preview)](#text-area-preview)
+  - [Text Input (Preview)](#text-input-preview)
+- [Removals](#removals)
+  - [Status Indicator (Preview) Utilities](#status-indicator-preview-utilities)
+- [Component Style Updates](#component-style-updates)
+- [Component Updates](#component-updates)
+  - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+  - [CountBadge](#count-badge)
+  - [Form Field Preview](#form-field-preview)
+  - [Icons](#icons)
+  - [Status Indicator (Preview)](#status-indicator-preview)
+  - [Table](#table)
+  - [Text](#text)
+- [Style Utility Updates](#style-utility-updates)
+  - [createStencil](#createstencil)
+- [Troubleshooting](#troubleshooting)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+  - [Labs](#labs)
+
+## Canvas Tokens
+
+In v11, all the components listed in this guide have started using our new
+[Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
+In v10, we provided token fallbacks so that a component would not be missing a token/value if the tokens were not defined. In v11 you must add `@workday/canvas-tokens-web` to ensure our
+components are properly styled and the variables are defined. For more information on installing and
+using, please reference our tokens
+[docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
+
+## Codemod
+
+We've provided a [codemod](https://github.com/Workday/canvas-kit/tree/master/modules/codemod) to
+automatically update your code to work with most of the breaking changes in v11. **Breaking changes
+handled by the codemod are marked with 🤖 in the Upgrade Guide.**
+
+A codemod is a script that makes programmatic transformations on your codebase by traversing the
+[AST](https://www.codeshiftcommunity.com/docs/understanding-asts), identifying patterns, and making
+prescribed changes. This greatly decreases opportunities for error and reduces the number of manual
+updates, which allows you to focus on changes that need your attention. **We highly recommend you
+use the codemod for these reasons.**
+
+If you're new to running codemods or if it's been a minute since you've used one, there are a few
+things you'll want to keep in mind.
+
+- Our codemods are meant to be run sequentially. For example, if you're using v8 of Canvas Kit,
+  you'll need to run the v9 codemod before you run v11.
+- The codemod will update your code to be compatible with the specified version, but it will **not**
+  remove outdated dependencies or upgrade dependencies to the latest version. You'll need to upgrade
+  dependencies on your own.
+  - We recommend upgrading dependencies before running the codemod.
+  - Always review your `package.json` files to make sure your dependency versions look correct.
+- The codemod will not handle every breaking change in v11. You will likely need to make some manual
+  changes to be compatible. Use our Upgrade Guide as a checklist.
+- Codemods are not bulletproof.
+  - Conduct a thorough PR and QA review of all changes to ensure no regressions were introduced.
+  - As a safety precaution, we recommend committing the changes from the codemod as a single
+    isolated commit (separate from other changes) so you can roll back more easily if necessary.
+
+We're here to help! Automatic changes to your codebase can feel scary. You can always reach out to
+our team. We'd be very happy to walk you through the process to set you up for success.
+
+### Instructions
+
+The easiest way to run our codemod is to use `npx` in your terminal.
+
+```sh
+npx @workday/canvas-kit-codemod v11 [path]
+```
+
+Be sure to provide specific directories that need to be updated via the `[path]` argument. This
+decreases the amount of AST the codemod needs to traverse and reduces the chances of the script
+having an error. For example, if your source code lives in `src/`, use `src/` as your `[path]`. Or,
+if you have a monorepo with three packages using Canvas Kit, provide those specific packages as your
+`[path]`.
+
+Alternatively, if you're unable to run the codemod successfully using `npx`, you can install the
+codemod package as a dev dependency, run it with `yarn`, and then remove the package after you're
+finished.
+
+```sh
+yarn add @workday/canvas-kit-codemod --dev
+yarn canvas-kit-codemod v11 [path]
+yarn remove @workday/canvas-kit-codemod
+```
+
+> **Note**: The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
+> manually edit other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter
+> after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
+> your project conventions.
+
+## Deprecations
+
+We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove
+in a future major release. This signals consumers to migrate to a more stable alternative before the
+deprecated code is removed.
+
+### Form Field Main
+
+**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
+
+We've deprecated `FormField` in [Main](#main). Please use
+[`FormField`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic) in
+[Preivew](#preview) instead.
+
+---
+
+### Label Text
+
+**PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
+
+We've deprecated `LabelText` in [Main](#main). Please use
+[`FormField.Label`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic)
+in [Preview](#preview) in context of a `FormField` instead.
+
+```tsx
+//v10
+import {LabelText} from '@workday/canvas-kit-react/text';
+
+<form>
+  <LabelText>Pizza</LabelText>
+  <input type="text" />
+</form>;
+
+//v11
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+<FormField>
+  <FormField.Label>First Name</FormField.Label>
+  <FormField.Input as={TextInput} value={value} onChange={e => console.log(e)} />
+</FormField>;
+```
+
+If you still want to use a `label` element outside of the context of a form, you can use our `Text`
+component instead.
+
+---
+
+### Text Area Preview
+
+**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
+
+We've deprecated `TextArea` from [Preview](#preview). Please use
+[`FormField`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic) in
+[Preview](#preview) with `TextArea` in [Main](#main) instead.
+
+---
+
+### Text Input Preview
+
+**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
+
+We've deprecated `TextInput` from [Preview](#preview). Please use
+[`FormField`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic) in
+[Preview](#preview) with `TextInput` in [Main](#main) instead.
+
+The following model hooks have also been deprecated:
+
+- `useTextInputModel`
+- `useTextInputField`
+
+## Removals
+
+### Status Indicator (Preview) Utilities
+
+**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2700)
+
+As part of the styling refactor, we've removed the following exports that were primarily used to
+style the component:
+
+- `useStatusIndicatorModel`
+- `useStatusIndicator`
+- `statusIndicatorColors`
+- `useStatusIndicatorIcon`.
+
+**There should be no developer impact.**
+
+---
+
+## Component Style Updates
+
+<StatusIndicator variant="red" emphasis="low">
+  <StatusIndicator.Label>Visual Breaking Change</StatusIndicator.Label>
+</StatusIndicator>
+
+**PR:** [#2485](https://github.com/Workday/canvas-kit/pull/2485)
+
+The following changes address visual discrepancies between our design spec files and code. These
+changes **should not** impact the layout or behavior of a component.
+
+Components affected:
+
+- `Checkbox`
+- `DeleteButton`
+- `Radio`
+- `SecondaryButton`
+- `StatusIndicator`
+- `Switch`
+- `Table`
+- `TertiaryButton`
+- `TextArea`
+- `TextInput`
+
+<Table>
+  <Table.Head>
+    <Table.Row>
+      <Table.Header scope="col">Component</Table.Header>
+      <Table.Header scope="col">Variant</Table.Header>
+      <Table.Header scope="col">psuedo Class</Table.Header>
+      <Table.Header scope="col">Property</Table.Header>
+      <Table.Header scope="col">v10 Value</Table.Header>
+      <Table.Header scope="col">v11 Value</Table.Header>
+    </Table.Row>
+  </Table.Head>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>Checkbox</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>disabled</Table.Cell>
+      <Table.Cell>borderColor</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
+        licorice100
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>Checkbox</Table.Cell>
+      <Table.Cell>Inverse</Table.Cell>
+      <Table.Cell>disabled</Table.Cell>
+      <Table.Cell>borderColor</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
+        licorice100
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>DeleteButton</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>disabled</Table.Cell>
+      <Table.Cell>backgroundColor</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(brand.error.light)}}>error.light</Table.Cell>
+      <Table.Cell cs={{backgroundColor: 'rgba(222,46,33,0.4)'}}>error.base</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>DeleteButton</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>disabled</Table.Cell>
+      <Table.Cell>opacity</Table.Cell>
+      <Table.Cell>1</Table.Cell>
+      <Table.Cell>0.4</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>Radio</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>disabled</Table.Cell>
+      <Table.Cell>borderColor</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
+        licorice100
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>SecondaryButton</Table.Cell>
+      <Table.Cell>Inverse</Table.Cell>
+      <Table.Cell>focus</Table.Cell>
+      <Table.Cell>border</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.blackPepper400), backgroundColor: cssVar(base.soap400)}}>
+        soap400
+      </Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.blackPepper400), backgroundColor: 'transparent'}}>
+        transparent
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>SecondaryButton</Table.Cell>
+      <Table.Cell>Inverse</Table.Cell>
+      <Table.Cell>focus</Table.Cell>
+      <Table.Cell>boxShdaow (Inner Color)</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
+        blackPepper500
+      </Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
+        blackPepper400
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>SecondaryButton</Table.Cell>
+      <Table.Cell>Inverse</Table.Cell>
+      <Table.Cell>focus</Table.Cell>
+      <Table.Cell>color</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
+        blackPepper500
+      </Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
+        blackPepper400
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>SecondaryButton (Icon)</Table.Cell>
+      <Table.Cell>Inverse</Table.Cell>
+      <Table.Cell>focus</Table.Cell>
+      <Table.Cell>fill</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
+        blackPepper500
+      </Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
+        blackPepper400
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>StatusIndicator (Preview)</Table.Cell>
+      <Table.Cell>transparent</Table.Cell>
+      <Table.Cell></Table.Cell>
+      <Table.Cell>backgroundColor</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
+        blackPepper600
+      </Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(system.color.bg.translucent), color: cssVar(base.frenchVanilla100)}}>
+        rgba(0,0,0,.84)
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>StatusIndicator (Preview)</Table.Cell>
+      <Table.Cell>transparent</Table.Cell>
+      <Table.Cell></Table.Cell>
+      <Table.Cell>opacity</Table.Cell>
+      <Table.Cell >0.85</Table.Cell>
+      <Table.Cell>
+        Removed
+      </Table.Cell>
+    </Table.Row>
+		<Table.Row>
+      <Table.Cell>Switch</Table.Cell>
+      <Table.Cell>Checked and Disabled</Table.Cell>
+      <Table.Cell></Table.Cell>
+      <Table.Cell>backgroundColor, opacity</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(base.blueberry200)}}>blueberry200</Table.Cell>
+      <Table.Cell cs={{backgroundColor: 'rgba(8,117,225,.3)'}}>
+        backgroundColor: brand.primary.base
+				opacity: system.opacity.disabled
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>Table (Header)</Table.Cell>
+      <Table.Cell />
+      <Table.Cell />
+      <Table.Cell>borderColor</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(base.soap400)}}>soap400</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(base.soap500)}}>soap500</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>TertiaryButton</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>hover</Table.Cell>
+      <Table.Cell>backgroundColor</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(base.soap200)}}>soap200</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(base.soap300)}}>soap300</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>TertiaryButton</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>active</Table.Cell>
+      <Table.Cell>backgroundColor</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(base.soap300)}}>soap300</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(base.soap400)}}>soap400</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>TertiaryButton</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>active</Table.Cell>
+      <Table.Cell>color</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(brand.primary.dark)}}>
+        primary.dark
+      </Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(brand.primary.darkest)}}>
+        primary.darkest
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>TertiaryButton</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>disabled</Table.Cell>
+      <Table.Cell>borderColor</Table.Cell>
+      <Table.Cell backgroundColor="frenchVanilla100">frenchVanilla100</Table.Cell>
+      <Table.Cell cs={{backgroundColor: 'transparent'}}>transparent</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>TertiaryButton (Icon Only)</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>focus</Table.Cell>
+      <Table.Cell>fill</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
+        blackPepper500
+      </Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
+        blackPepper400
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>TertiaryButton (Icon Only)</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>hover</Table.Cell>
+      <Table.Cell>fill</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
+        blackPepper500
+      </Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
+        blackPepper400
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>TextArea</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>disabled</Table.Cell>
+      <Table.Cell>borderColor</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
+        licorice100
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>TextInput</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>disabled</Table.Cell>
+      <Table.Cell>borderColor</Table.Cell>
+      <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
+      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
+        licorice100
+      </Table.Cell>
+    </Table.Row>
+
+  </Table.Body>
+</Table>
+
+> **Note:** If you use a visual regression tool, you'll need to update your tests to match the new
+> visual changes.
+
+## Component Updates
+
+### Styling API and CSS Tokens
+
+**PRs:** [#2666](https://github.com/Workday/canvas-kit/pull/2666),
+[#2471](https://github.com/Workday/canvas-kit/pull/2471),
+[#2542](https://github.com/Workday/canvas-kit/pull/2542),
+[#2570](https://github.com/Workday/canvas-kit/pull/2570),
+[#2442](https://github.com/Workday/canvas-kit/pull/2442),
+[#2472](https://github.com/Workday/canvas-kit/pull/2472),
+[#2685](https://github.com/Workday/canvas-kit/pull/2685),
+[#2615](https://github.com/Workday/canvas-kit/pull/2615),
+[#2699](https://github.com/Workday/canvas-kit/pull/2699),
+[#2546](https://github.com/Workday/canvas-kit/pull/2546),
+[#2570](https://github.com/Workday/canvas-kit/pull/2570),
+[#2620](https://github.com/Workday/canvas-kit/pull/2620),
+[#2583](https://github.com/Workday/canvas-kit/pull/2583),
+[#2567](https://github.com/Workday/canvas-kit/pull/2567),
+[#2455](https://github.com/Workday/canvas-kit/pull/2455),
+[#2709](https://github.com/Workday/canvas-kit/pull/2709)
+
+Several components have been refactored to use our new
+[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
+[styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
+The React interface **has not changed**, but CSS variables are now used for dynamic properties.
+
+The following components are affected:
+
+- `AccentIcon`
+- `AppletIcon`
+- `Card`
+- `CheckBox`
+- `Combobox`
+- `CountBadge`
+- `FormField (Preview)`
+- `DeleteButton`
+- `Graphic`
+- `LoadingDots`
+- `PrimaryButton`
+- `SecondaryButton`
+- `Radio (Preview)`
+- `Select`
+- `StatusIndicator`
+- `Svg`
+- `Switch`
+- `SystemIconCircle`
+- `SystemIcon`
+- `Table`
+- `TertiaryButton`
+- `Text`
+
+> **Note:** These components also support our new `cs` prop for styling. Learn more about styling
+> with `cs` in our
+> [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
+
+### Count Badge
+
+<StatusIndicator variant="red" emphasis="low">
+  <StatusIndicator.Label>Breaking Change</StatusIndicator.Label>
+</StatusIndicator>
+
+**PR:** [#2709](https://github.com/Workday/canvas-kit/pull/2709)
+
+- `default` has been removed from the `variant` type and is now the default for styles.
+
+We also removed the `default` variant and consolidated those styles into the badge's base styles.
+This will not be a breaking change for most users. However, if you have a `CountBadge` with an
+explicit `default` variant, you'll see a TypeScript error. To resolve this, simply remove the
+variant prop.
+
+```tsx
+// Before (v10)
+<CountBadge variant="default" count={10} />
+
+// After (v11)
+<CountBadge count={10} />
+```
+
+### Form Field (Preview)
+
+<div style={{display: 'inline-flex', gap: '.5rem'}}>
+  <StatusIndicator variant="red" emphasis="low">
+    <StatusIndicator.Label>Breaking Change</StatusIndicator.Label>
+  </StatusIndicator>
+  <StatusIndicator variant="green" emphasis="low">
+    <StatusIndicator.Label>🤖 Codemod Available</StatusIndicator.Label>
+  </StatusIndicator>
+</div>
+
+**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
+[#2746](https://github.com/Workday/canvas-kit/pull/274)
+
+`FormField` in [Preview](#preview) is a compound component and we intend to promote it in a future
+version to replace the `FormField` in [Main](#main). Because of this, we've refactored how errors
+are applied to `FormField` in [Preview](#preview) in order to match the API from the `FormField` in
+[Main](#main).
+
+- `hasError` prop has been renamed to `error`. **This is a breaking change**
+- `error` accepts `"error" | "alert" | ""` instead of a boolean value.
+- `orientation` prop defaults to `vertical` and is no longer required.
+- `FormField.Input` can be used by any of our inputs including `Select`, `TextInput`, `TextArea`,
+  `RadioGroup`, `Switch` and `Checkbox`.
+- `FormField` does **not** support the `useFieldSet` prop that the `FormField` in [Main](#main)
+  does. In order to achieve the same behavior, set the `as` prop on the `FormField` element to
+  `fieldset` and the `as` prop of `FormField.Label` to `legend`.
+- The required asterisk is now a pseudo element. While the asterisk was never read out loud by
+  screen readers, Testing Library required it in the `*ByLabelText` query. `*ByRole` uses the w3c
+  [accessible name calculation specification](https://www.w3.org/TR/accname-1.2/), but
+  `*ByLabelText` uses
+  [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). Additional
+  information: https://github.com/testing-library/dom-testing-library/issues/929
+
+  v10:
+
+  ```ts
+  screen.getByLabelText('Email*'); // Email is a required field and asterisk is included in name
+  screen.getByRole('textbox', {name: 'Email'}); // correctly ignores the `*`
+  ```
+
+  v11:
+
+  ```ts
+  screen.getByLabelText('Email');
+  screen.getByRole('textbox', {name: 'Email'});
+  ```
+
+```tsx
+// v10 FormField in Preview
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+<FormField orientation="vertical" hasError={true}>
+  <FormField.Label>Password</FormField.Label>
+  <FormField.Input as={TextInput} type="password" value={value} onChange={handleChange} />
+  <FormField.Hint>Must Contain a number and a capital letter</FormField.Hint>
+</FormField>;
+
+// v11
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+<FormField error="error">
+  <FormField.Label>Password</FormField.Label>
+  <FormField.Container>
+    <FormField.Input as={TextInput} type="password" value={value} onChange={handleChange} />
+    <FormField.Hint>Must Contain a number and a capital letter</FormField.Hint>
+  </FormField.Container>
+</FormField>;
+```
+
+🤖 The codemod will handle the change of `hasError` to `error` for you automatically. You may need
+to check your logic to make sure it sets the appropaite value to the prop.
+
+> **Note:** If you use your own custom `input` you will need to handle the styling for error and
+> alert states.
+
+### Icons
+
+<div style={{display: 'inline-flex', gap: '.5rem'}}>
+  <StatusIndicator variant="red" emphasis="low">
+    <StatusIndicator.Label>Breaking Change</StatusIndicator.Label>
+  </StatusIndicator>
+  <StatusIndicator variant="green" emphasis="low">
+    <StatusIndicator.Label>🤖 Codemod Available</StatusIndicator.Label>
+  </StatusIndicator>
+</div>
+
+`styles` prop has been removed. If you still need to style an Icon component, please use the `cs`
+prop.
+
+> **Note:** Passing a token name to a style prop will not be supported in a future major version.
+> Please use our
+> [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
+> instead.
+
+```tsx
+// This will no longer be supported in a future major version
+<SystemIcon color="blueberry400" />;
+
+// Use new tokens instead.
+import {base} from '@workday/canvas-tokens-web';
+<SystemIcon color={base.blueberry400} />;
+```
+
+🤖 The codemod will handle the change of renaming `styles` to `cs` for you automatically.
+
+#### AccentIcon
+
+- `AccentIconStyles` prop has been deprecated and will be merged with `AccentIconProps` in a future
+  version.
+- `accentIconStyles` has been deprecated and will be removed in a future version as a part of
+  implementation of stencils and new tokens. Consider using `accentIconStencil` to get styles or
+  class name.
+- `AccentIcon` supports `size` and `color` css variables, along with `size` and `color` props. Both
+  ways are supported:
+
+```tsx
+// set size or color by props
+<AccentIcon color={base.blueberry100} size={24} />;
+
+// set size or color by css vars
+import {accentIconStencil} from '@workday/canvas-kit-react/icon';
+
+const MyComponent = StyledRadioButton('div')({
+  [accentIconStencil.vars.color]: base.berrySmoothie100,
+  [accentIconStencil.vars.size]: '2rem',
+});
+
+<MyComponent>
+  <AccentIcon icon={myIcon} />
+</MyComponent>;
+```
+
+#### AppletIcon
+
+- `AppletIconStyles` prop has been deprecated and will be merged with `AppletIconProps` in a future
+  version.
+- `appletIconStyles` has been deprecated and will be removed in a future version as a part of
+  implementation of stencils and new tokens. Consider using `appletIconStencil` to get styles or
+  class name.
+- `AppletIcon` supports `size`, `color200`, `color300`, `color400` and `color500` css variables,
+  along with `size` and `color` props. Both ways are supported:
+
+```tsx
+// set size or color by props
+<AppletIcon color="blueberry" size={240} />;
+
+// set size or color by css vars
+import {appletIconStencil} from '@workday/canvas-kit-react/icon';
+
+const MyComponent = StyledRadioButton('div')({
+  [appletIconStencil.vars.size]: '2rem',
+  [appletIconStencil.vars.color200]: base.berrySmoothie200,
+  [appletIconStencil.vars.color300]: base.berrySmoothie300,
+  [appletIconStencil.vars.color400]: base.berrySmoothie400,
+  [appletIconStencil.vars.color500]: base.berrySmoothie500,
+});
+
+<MyComponent>
+  <AppletIcon icon={myIcon} />
+</MyComponent>;
+```
+
+#### Graphic
+
+- `GraphicStyles` prop has been deprecated and will be merged with `GraphicProps` in a future
+  version.
+- `graphicStyles` has been deprecated and will be removed in a future version as a part of
+  implementation of stencils and new tokens. Consider using `graphicStencil` to get styles or class
+  name.
+
+#### Icon
+
+This change only impacts internal Canvas Kit code. `Icon` component has been removed and is no
+longer used to build our icons. It has been replaced by our `Svg` component. Most of our icons now
+extend styles from `svgStencil`.
+
+#### SystemIcon
+
+- `SystemIconStyles` has been deprecated and will be removed in a future version as a part of
+  implementation of stencils and new tokens. Consider using `systemIconStencil` to get styles or
+  class name.
+
+- `accentHover` is deprecated and will be removed in a future version. Please use the following when
+  overriding styles:
+
+```tsx
+'&:hover': {
+  [systemIconStencil.vars.accent]: desiredAccentHoverColor
+}
+```
+
+- `backgroundHover` is deprecated and will be removed in a future version. Please use the following
+  when overriding styles:
+
+```tsx
+'&:hover': {
+  [systemIconStencil.vars.background]: desiredBackgroundHoverColor
+}
+```
+
+- `fillHover` is deprecated and will be removed in a future version. Please use the following when
+  overriding styles:
+
+```tsx
+'&:hover': {
+  [systemIconStencil.vars.fill]: desiredFillHoverColor
+}
+```
+
+- `fill` is deprecated and will be removed in a future version. Please use `color` and specify
+  `accent` color if you want `accent` to be different from `color`.
+
+```tsx
+'&:hover': {
+  [systemIconStencil.vars.fill]: desiredFillHoverColor
+}
+```
+
+- `systemIconStyles` has been deprecated and will be removed in a future version as a part of
+  implementation of stencils and new tokens. Consider using `systemIconStencil` to get styles or
+  class name.
+
+- `SystemIcon` supports `size`, `color`, `accentColor` and `background` css variables, along with
+  props. Both ways are supported:
+
+```tsx
+// set size or color by props
+<SystemIcon color={base.blueberry100} size={24} />;
+
+// set size or color by css vars
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+
+const MyComponent = StyledRadioButton('div')({
+  [accentIconStencil.vars.size]: '2rem',
+  [systemIconStencil.vars.color]: base.berrySmoothie400,
+  [systemIconStencil.vars.background]: base.frenchVanilla100,
+  // on hover:
+  '&:hover': {
+    [systemIconStencil.vars.color]: base.berrySmoothie500,
+    [systemIconStencil.vars.background]: 'transparent',
+  },
+});
+
+<MyComponent>
+  <SystemIcon icon={myIcon} />
+</MyComponent>;
+```
+
+### Status Indicator (Preview)
+
+<StatusIndicator variant="red" emphasis="low">
+  <StatusIndicator.Label>Visual Breaking Change</StatusIndicator.Label>
+</StatusIndicator>
+
+**PR:** [#2620](https://github.com/Workday/canvas-kit/pull/2620)
+
+The `transparent` variant now uses `system.color.bg.translucent` which is a background color of
+black with an opacity of `0.84`.
+
+**There should be no developer impact and the visual changes are safe to accept**.
+
+### Switch
+
+<StatusIndicator variant="red" emphasis="low">
+  <StatusIndicator.Label>Visual Breaking Change</StatusIndicator.Label>
+</StatusIndicator>
+
+**PR:** [#2583](https://github.com/Workday/canvas-kit/pull/2583)
+
+Switch no longer uses `blueberry200` which was part of our theme object
+`theme.palette.primary.light` for the background color to indicate a Switch that is checked and
+disabled. Now, it uses `blueberry400` or `brand.base.primary` with an opacity of `0.4` for checked
+and disabled.
+
+**There should be no developer impact and the visual changes are safe to accept**.
+
+### Table
+
+**PR:** [#2600](https://github.com/Workday/canvas-kit/pull/2600)
+
+<StatusIndicator variant="red" emphasis="low">
+  <StatusIndicator.Label>Breaking Change</StatusIndicator.Label>
+</StatusIndicator>
+
+We've promoted `Table` from [Preview](#preview) to [Main](#main). It replaces the `Table` that was
+previously in [Main](#main) (for reference, see
+[`Table`](https://d2krrudi3mmzzw.cloudfront.net/v9/?path=/story/components-containers-table--basic)
+in [Main](#main) from v9).
+
+`Table` is a
+[compound component](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--page)
+which provides a flexible API and access to its internals via its subcomponents.
+
+> **Note**: `rowState` prop is no longer a part of the `Table` component.
+
+In v10, the `Table` component in [Main](#main) only exposed a `Table` and `TableRow` component to
+build tables.
+
+In v11, `Table` now exposes every subcomponent of a semantic HTML
+[Table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table). While more verbose, it
+provides more flexibility for customization.
+
+```tsx
+// v10
+import {Table, TableRow} from '@workday/canvas-kit-react/table';
+
+<Table>
+  <thead>
+    <TableRow header={true}>
+      <th>Header Text</th>
+    </TableRow>
+  </thead>
+  <tbody>
+    <TableRow>
+      <td>Cell Text</td>
+    </TableRow>
+  </tbody>
+</Table>;
+
+// v11
+import {Table} from '@workday/canvas-kit-react/table';
+
+<Table>
+  <Table.Head>
+    <Table.Row>
+      <Table.Header>Header Text</Table.Header>
+    </Table.Row>
+  </Table.Head>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>Cell Text</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table>;
+```
+
+Please refer to the
+[Table examples](https://workday.github.io/canvas-kit/?path=/story/components-containers-table--basic)
+for how to implement new tables.
+
+> **Note:** If you were using the [Preview](#preview) `Table` compound component, then you will need
+> to update your import from `@workday/canvas-kit-preview-react/table` to
+> `@workday/canvas-kit-react/table`. This change is **not** handled by the codemod.
+
+### Text
+
+**PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
+
+- `Text` no longer extends the `Box` component, however, it still supports Emotion `styled` and
+  style props.
+- Type level components: `Title`, `Heading`, `BodyText` and `Subtext` remain unchanged.
+
+## Style Utility Updates
+
+### `createStencil`
+
+**PR:** [#2697](https://github.com/Workday/canvas-kit/pull/2697)
+
+<StatusIndicator variant="red" emphasis="low">
+  <StatusIndicator.Label>Breaking Change</StatusIndicator.Label>
+</StatusIndicator>
+
+Stencils were updated to automatically add `box-sizing: border-box` to all stencils. If your stencil
+did not add this style already, it may change the way `width` works for the component. Our intent is
+to make all elements use border box layouts to make width calculations more predictable. This change
+may change the way your component works if you use the `width` style property.
+
+> **Note:** This is only a breaking change if you were using `createStencil` to apply margin and
+> padding without box-sizing. For reference, view box-sizing
+> [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing).
+
+## Troubleshooting
+
+### My Styles Seem Broken?
+
+Our components are reliant on our new Canvas Tokens Web package. Be sure you install
+`@workday/canvas-tokens-web`. For more information, reference our
+[Getting Started docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
+for this package.
+
+### Did You Upgrade All Canvas Kit Related Packages?
+
+In order for all the packages to work in harmony, you must upgrade all Canvas Kit packages to the
+same version that you're using, including:
+
+- `@workday/canvas-kit-react`
+- `@workday/canvas-kit-preview-react`
+- `@workday/canvas-kit-labs-react`
+- `@workday/canvas-kit-styling`
+- `@workday/canvas-kit-react-fonts`
+- `@workday/canvas-kit-docs`
+
+## Glossary
+
+### Main
+
+Our Main package of Canvas Kit tokens, components, and utilities at `@workday/canvas-kit-react` has
+undergone a full design and a11y review and is approved for use in product.
+
+Breaking changes to code in Main will only occur during major version updates and will always be
+communicated in advance and accompanied by migration strategies.
+
+---
+
+### Preview
+
+Our Preview package of Canvas Kit tokens, components, and utilities at
+`@workday/canvas-kit-preview-react` has undergone a full design and a11y review and is approved for
+use in product, but may not be up to the high code standards upheld in the [Main](#main) package.
+Preview is analagous to code in beta.
+
+Breaking changes are unlikely, but possible, and can be deployed to Preview at any time without
+triggering a major version update, though such changes will be communicated in advance and
+accompanied by migration strategies.
+
+Generally speaking, our goal is to eventually promote code from Preview to [Main](#main).
+Occasionally, a component with the same name will exist in both [Main](#main) and Preview (for
+example, see Segmented Control in [Preview](/components/buttons/segmented-control/) and
+[Main](https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/components-buttons-segmented-control--basic)).
+In these cases, Preview serves as a staging ground for an improved version of the component with a
+different API. The component in [Main](#main) will eventually be replaced with the one in Preview.
+
+---
+
+### Labs
+
+Our Labs package of Canvas Kit tokens, components, and utilities at `@workday/canvas-kit-labs-react`
+has **not** undergone a full design and a11y review. Labs serves as an incubator space for new and
+experimental code and is analagous to code in alpha.
+
+Breaking changes can be deployed to Labs at any time without triggering a major version update and
+may not be subject to the same rigor in communcation and migration strategies reserved for breaking
+changes in [Preview](#preview) and [Main](#main). import { opacity } from
+"@workday/canvas-tokens-web/dist/es6/system"
diff --git a/modules/docs/mdx/versionsTable.tsx b/modules/docs/mdx/versionsTable.tsx
index 755a9f963f..924e6b2300 100644
--- a/modules/docs/mdx/versionsTable.tsx
+++ b/modules/docs/mdx/versionsTable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import {Table, StatusIndicator, StatusIndicatorVariant} from '@workday/canvas-kit-preview-react';
+import {Table} from '@workday/canvas-kit-react';
+import {StatusIndicator, StatusIndicatorVariant} from '@workday/canvas-kit-preview-react';
 // @ts-ignore: Cannot find module error
 import {version} from '../../../lerna.json';
 
@@ -8,6 +9,10 @@ const allVersions = [
   {
     versionNumber: version, // This will always be the current major version
     documentation: 'https://github.com/Workday/canvas-kit',
+  },
+    {
+    versionNumber: 10,
+    documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v10/?path=/docs/welcome--page',
   },
   {
     versionNumber: 9, // This is support, update this when we release v11
diff --git a/modules/docs/package.json b/modules/docs/package.json
index c006c8d439..0f0ca366c9 100644
--- a/modules/docs/package.json
+++ b/modules/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "10.3.60",
+  "version": "11.1.10",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,13 +44,13 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^10.3.60",
-    "@workday/canvas-kit-preview-react": "^10.3.60",
-    "@workday/canvas-kit-react": "^10.3.60",
-    "@workday/canvas-kit-styling": "^10.3.60",
+    "@workday/canvas-kit-labs-react": "^11.1.10",
+    "@workday/canvas-kit-preview-react": "^11.1.10",
+    "@workday/canvas-kit-react": "^11.1.10",
+    "@workday/canvas-kit-styling": "^11.1.10",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^1.0.0",
-    "markdown-to-jsx": "^6.10.3",
+    "@workday/canvas-tokens-web": "^2.0.0",
+    "markdown-to-jsx": "^7.2.0",
     "ts-node": "^10.9.1"
   },
   "devDependencies": {
diff --git a/modules/docs/tsconfig.json b/modules/docs/tsconfig.json
index a9a1c7ad24..8dc347da5c 100644
--- a/modules/docs/tsconfig.json
+++ b/modules/docs/tsconfig.json
@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "exclude": ["node_modules", "ts-tmp", "dist", "**/spec", "**/fixtures", "stories"]
+  "exclude": ["node_modules", "ts-tmp", "dist", "**/spec", "**/fixtures", "**/stories"]
 }
diff --git a/modules/labs-css/LICENSE b/modules/labs-css/LICENSE
new file mode 100644
index 0000000000..2bb61ad23f
--- /dev/null
+++ b/modules/labs-css/LICENSE
@@ -0,0 +1,126 @@
+Apache License, Version 2.0 Apache License Version 2.0, January 2004
+
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and
+   distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the
+   copyright owner or entity authorized by the copyright owner that is granting the License. "Legal
+   Entity" shall mean the union of the acting entity and all other entities that control, are
+   controlled by, or are under common control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the direction or management of such
+   entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an
+   individual or Legal Entity exercising permissions granted by this License. "Source" form shall
+   mean the preferred form for making modifications, including but not limited to software source
+   code, documentation source, and configuration files. "Object" form shall mean any form resulting
+   from mechanical transformation or translation of a Source form, including but not limited to
+   compiled object code, generated documentation, and conversions to other media types. "Work" shall
+   mean the work of authorship, whether in Source or Object form, made available under the License,
+   as indicated by a copyright notice that is included in or attached to the work (an example is
+   provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or
+   Object form, that is based on (or derived from) the Work and for which the editorial revisions,
+   annotations, elaborations, or other modifications represent, as a whole, an original work of
+   authorship. For the purposes of this License, Derivative Works shall not include works that
+   remain separable from, or merely link (or bind by name) to the interfaces of, the Work and
+   Derivative Works thereof. "Contribution" shall mean any work of authorship, including the
+   original version of the Work and any modifications or additions to that Work or Derivative Works
+   thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright
+   owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner.
+   For the purposes of this definition, "submitted" means any form of electronic, verbal, or written
+   communication sent to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems, and issue tracking
+   systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and
+   improving the Work, but excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean
+   Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by
+   Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor
+   hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform,
+   sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor
+   hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made, use, offer to sell, sell,
+   import, and otherwise transfer the Work, where such license applies only to those patent claims
+   licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or
+   by combination of their Contribution(s) with the Work to which such Contribution(s) was
+   submitted. If You institute patent litigation against any entity (including a cross-claim or
+   counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work
+   constitutes direct or contributory patent infringement, then any patent licenses granted to You
+   under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof
+   in any medium, with or without modifications, and in Source or Object form, provided that You
+   meet the following conditions: You must give any other recipients of the Work or Derivative Works
+   a copy of this License; and You must cause any modified files to carry prominent notices stating
+   that You changed the files; and You must retain, in the Source form of any Derivative Works that
+   You distribute, all copyright, patent, trademark, and attribution notices from the Source form of
+   the Work, excluding those notices that do not pertain to any part of the Derivative Works; and If
+   the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works
+   that You distribute must include a readable copy of the attribution notices contained within such
+   NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in
+   at least one of the following places: within a NOTICE text file distributed as part of the
+   Derivative Works; within the Source form or documentation, if provided along with the Derivative
+   Works; or, within a display generated by the Derivative Works, if and wherever such third-party
+   notices normally appear. The contents of the NOTICE file are for informational purposes only and
+   do not modify the License. You may add Your own attribution notices within Derivative Works that
+   You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such
+   additional attribution notices cannot be construed as modifying the License. You may add Your own
+   copyright statement to Your modifications and may provide additional or different license terms
+   and conditions for use, reproduction, or distribution of Your modifications, or for any such
+   Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work
+   otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution
+   intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms
+   and conditions of this License, without any additional terms or conditions. Notwithstanding the
+   above, nothing herein shall supersede or modify the terms of any separate license agreement you
+   may have executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names, trademarks, service
+   marks, or product names of the Licensor, except as required for reasonable and customary use in
+   describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor
+   provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT
+   WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation,
+   any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or
+   redistributing the Work and assume any risks associated with Your exercise of permissions under
+   this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in tort (including
+   negligence), contract, or otherwise, unless required by applicable law (such as deliberate and
+   grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for
+   damages, including any direct, indirect, special, incidental, or consequential damages of any
+   character arising as a result of this License or out of the use or inability to use the Work
+   (including but not limited to damages for loss of goodwill, work stoppage, computer failure or
+   malfunction, or any and all other commercial damages or losses), even if such Contributor has
+   been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works
+   thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty,
+   indemnity, or other liability obligations and/or rights consistent with this License. However, in
+   accepting such obligations, You may act only on Your own behalf and on Your sole responsibility,
+   not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each
+   Contributor harmless for any liability incurred by, or claims asserted against, such Contributor
+   by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+©2020. Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of
+Workday, Inc. All other brand and product names are trademarks or registered trademarks of their
+respective holders.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.
diff --git a/modules/labs-css/README.md b/modules/labs-css/README.md
new file mode 100644
index 0000000000..164c74de50
--- /dev/null
+++ b/modules/labs-css/README.md
@@ -0,0 +1,4 @@
+# Canvas Kit Labs CSS
+
+The bundle package containing all modules of the Canvas Kit Labs CSS. The contents are
+auto-generated from the Canvas Kit Labs React source code.
diff --git a/modules/labs-css/package.json b/modules/labs-css/package.json
new file mode 100644
index 0000000000..6eab8a129d
--- /dev/null
+++ b/modules/labs-css/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@workday/canvas-kit-labs-css",
+  "version": "11.1.10",
+  "description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
+  "author": "Workday, Inc. (https://www.workday.com)",
+  "license": "Apache-2.0",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/workday/canvas-kit.git",
+    "directory": "modules/labs-css"
+  },
+  "files": [
+    "*/package.json",
+    "*.css"
+  ],
+  "scripts": {
+    "clean": "rimraf *.css",
+    "build": "node ../../utils/update-css-package-version.js"
+  },
+  "keywords": [
+    "canvas",
+    "canvas-kit",
+    "css",
+    "components",
+    "workday"
+  ]
+}
diff --git a/modules/labs-react/combobox/lib/Combobox.tsx b/modules/labs-react/combobox/lib/Combobox.tsx
index 014658836d..e5c4830691 100644
--- a/modules/labs-react/combobox/lib/Combobox.tsx
+++ b/modules/labs-react/combobox/lib/Combobox.tsx
@@ -6,6 +6,7 @@ import {
   styled,
   useIsRTL,
   useUniqueId,
+  filterOutProps,
 } from '@workday/canvas-kit-react/common';
 import {space, commonColors, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {Card} from '@workday/canvas-kit-react/card';
@@ -112,7 +113,9 @@ const MenuContainer = styled(Card)({
   overflow: 'hidden',
 });
 
-const ResetButton = styled(TertiaryButton)<{shouldShow: boolean}>(
+const ResetButton = styled(TertiaryButton, {
+  shouldForwardProp: filterOutProps(['shouldShow']),
+})<{shouldShow: boolean}>(
   {
     position: 'absolute',
     margin: `auto ${space.xxxs}`,
@@ -355,7 +358,7 @@ export const Combobox = ({
     const autoCompleteItemCount = interactiveAutocompleteItems.length;
     const firstItem = 0;
     const lastItem = autoCompleteItemCount - 1;
-    let nextIndex = null;
+    let nextIndex: number | null = null;
 
     setIsOpened(true);
 
diff --git a/modules/labs-react/expandable/lib/ExpandableIcon.tsx b/modules/labs-react/expandable/lib/ExpandableIcon.tsx
index bdba32f76a..dbba3d35c8 100644
--- a/modules/labs-react/expandable/lib/ExpandableIcon.tsx
+++ b/modules/labs-react/expandable/lib/ExpandableIcon.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {
   createSubcomponent,
   ExtractProps,
+  filterOutProps,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
@@ -29,7 +30,9 @@ export interface ExpandableIconProps extends Omit<ExtractProps<typeof SystemIcon
   iconPosition?: IconPositions;
 }
 
-const StyledEndIcon = styled(SystemIcon)<{visible: boolean} & StyledType>(
+const StyledEndIcon = styled(SystemIcon, {
+  shouldForwardProp: filterOutProps(['visible']),
+})<{visible: boolean} & StyledType>(
   {
     marginLeft: 'auto',
   },
@@ -41,7 +44,9 @@ const StyledEndIcon = styled(SystemIcon)<{visible: boolean} & StyledType>(
   })
 );
 
-const StyledStartIcon = styled(SystemIcon)<{visible: boolean} & StyledType>(
+const StyledStartIcon = styled(SystemIcon, {
+  shouldForwardProp: filterOutProps(['visible']),
+})<{visible: boolean} & StyledType>(
   {
     margin: `0 ${space.xxs} 0 0`,
     padding: space.xxxs,
diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json
index 76323bf007..c9a2a6ffb0 100644
--- a/modules/labs-react/package.json
+++ b/modules/labs-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "10.3.60",
+  "version": "11.1.10",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,7 +46,7 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^10.3.60",
+    "@workday/canvas-kit-react": "^11.1.10",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
diff --git a/modules/labs-react/search-form/lib/SearchForm.tsx b/modules/labs-react/search-form/lib/SearchForm.tsx
index 4316898506..441a3f65ab 100644
--- a/modules/labs-react/search-form/lib/SearchForm.tsx
+++ b/modules/labs-react/search-form/lib/SearchForm.tsx
@@ -1,7 +1,12 @@
 import * as React from 'react';
 import {CSSObject} from '@emotion/styled';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
-import {GrowthBehavior, styled, generateUniqueId} from '@workday/canvas-kit-react/common';
+import {
+  GrowthBehavior,
+  styled,
+  generateUniqueId,
+  filterOutProps,
+} from '@workday/canvas-kit-react/common';
 import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {searchIcon, xIcon} from '@workday/canvas-system-icons-web';
 import {FormField, FormFieldLabelPosition} from '@workday/canvas-kit-react/form-field';
@@ -172,9 +177,9 @@ const SearchCombobox = styled(Combobox)({
   width: `100%`,
 });
 
-const SearchIcon = styled(TertiaryButton)<
-  Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}
->(({isCollapsed, isHidden}) => {
+const SearchIcon = styled(TertiaryButton, {
+  shouldForwardProp: filterOutProps(['isHidden', 'isCollapsed']),
+})<Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}>(({isCollapsed, isHidden}) => {
   return {
     position: `absolute`,
     margin: isCollapsed ? `auto ${space.xxs}` : `auto ${space.xxxs}`,
@@ -187,28 +192,30 @@ const SearchIcon = styled(TertiaryButton)<
   };
 });
 
-const CloseButton = styled(TertiaryButton)<
-  Pick<SearchFormProps, 'isCollapsed'> & Pick<SearchFormState, 'showForm'>
->(({isCollapsed, showForm}) => {
-  const collapseStyles: CSSObject =
-    isCollapsed && showForm
-      ? {
-          display: 'inline-block',
-        }
-      : {
-          display: 'none',
-        };
+const CloseButton = styled(TertiaryButton, {
+  shouldForwardProp: filterOutProps(['isCollapsed', 'showForm']),
+})<Pick<SearchFormProps, 'isCollapsed'> & Pick<SearchFormState, 'showForm'>>(
+  ({isCollapsed, showForm}) => {
+    const collapseStyles: CSSObject =
+      isCollapsed && showForm
+        ? {
+            display: 'inline-block',
+          }
+        : {
+            display: 'none',
+          };
 
-  return {
-    position: `absolute`,
-    top: 0,
-    bottom: 0,
-    right: 0,
-    margin: `auto ${space.xxs}`,
-    zIndex: 3,
-    ...collapseStyles,
-  };
-});
+    return {
+      position: `absolute`,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      margin: `auto ${space.xxs}`,
+      zIndex: 3,
+      ...collapseStyles,
+    };
+  }
+);
 
 const SearchField = styled(FormField)<
   Pick<SearchFormProps, 'isCollapsed' | 'grow' | 'height'> & Pick<SearchFormState, 'showForm'>
diff --git a/modules/popup-stack/package.json b/modules/popup-stack/package.json
index 268703112c..4ba17b4506 100644
--- a/modules/popup-stack/package.json
+++ b/modules/popup-stack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-popup-stack",
-  "version": "10.3.60",
+  "version": "11.1.10",
   "description": "Stack for managing popup UIs to coordinate global concerns like escape key handling and rendering order",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/preview-css/.gitignore b/modules/preview-css/.gitignore
new file mode 100644
index 0000000000..eedb1cddd4
--- /dev/null
+++ b/modules/preview-css/.gitignore
@@ -0,0 +1,2 @@
+
+*.css
diff --git a/modules/preview-css/LICENSE b/modules/preview-css/LICENSE
new file mode 100644
index 0000000000..2bb61ad23f
--- /dev/null
+++ b/modules/preview-css/LICENSE
@@ -0,0 +1,126 @@
+Apache License, Version 2.0 Apache License Version 2.0, January 2004
+
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and
+   distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the
+   copyright owner or entity authorized by the copyright owner that is granting the License. "Legal
+   Entity" shall mean the union of the acting entity and all other entities that control, are
+   controlled by, or are under common control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the direction or management of such
+   entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an
+   individual or Legal Entity exercising permissions granted by this License. "Source" form shall
+   mean the preferred form for making modifications, including but not limited to software source
+   code, documentation source, and configuration files. "Object" form shall mean any form resulting
+   from mechanical transformation or translation of a Source form, including but not limited to
+   compiled object code, generated documentation, and conversions to other media types. "Work" shall
+   mean the work of authorship, whether in Source or Object form, made available under the License,
+   as indicated by a copyright notice that is included in or attached to the work (an example is
+   provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or
+   Object form, that is based on (or derived from) the Work and for which the editorial revisions,
+   annotations, elaborations, or other modifications represent, as a whole, an original work of
+   authorship. For the purposes of this License, Derivative Works shall not include works that
+   remain separable from, or merely link (or bind by name) to the interfaces of, the Work and
+   Derivative Works thereof. "Contribution" shall mean any work of authorship, including the
+   original version of the Work and any modifications or additions to that Work or Derivative Works
+   thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright
+   owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner.
+   For the purposes of this definition, "submitted" means any form of electronic, verbal, or written
+   communication sent to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems, and issue tracking
+   systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and
+   improving the Work, but excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean
+   Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by
+   Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor
+   hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform,
+   sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor
+   hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made, use, offer to sell, sell,
+   import, and otherwise transfer the Work, where such license applies only to those patent claims
+   licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or
+   by combination of their Contribution(s) with the Work to which such Contribution(s) was
+   submitted. If You institute patent litigation against any entity (including a cross-claim or
+   counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work
+   constitutes direct or contributory patent infringement, then any patent licenses granted to You
+   under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof
+   in any medium, with or without modifications, and in Source or Object form, provided that You
+   meet the following conditions: You must give any other recipients of the Work or Derivative Works
+   a copy of this License; and You must cause any modified files to carry prominent notices stating
+   that You changed the files; and You must retain, in the Source form of any Derivative Works that
+   You distribute, all copyright, patent, trademark, and attribution notices from the Source form of
+   the Work, excluding those notices that do not pertain to any part of the Derivative Works; and If
+   the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works
+   that You distribute must include a readable copy of the attribution notices contained within such
+   NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in
+   at least one of the following places: within a NOTICE text file distributed as part of the
+   Derivative Works; within the Source form or documentation, if provided along with the Derivative
+   Works; or, within a display generated by the Derivative Works, if and wherever such third-party
+   notices normally appear. The contents of the NOTICE file are for informational purposes only and
+   do not modify the License. You may add Your own attribution notices within Derivative Works that
+   You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such
+   additional attribution notices cannot be construed as modifying the License. You may add Your own
+   copyright statement to Your modifications and may provide additional or different license terms
+   and conditions for use, reproduction, or distribution of Your modifications, or for any such
+   Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work
+   otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution
+   intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms
+   and conditions of this License, without any additional terms or conditions. Notwithstanding the
+   above, nothing herein shall supersede or modify the terms of any separate license agreement you
+   may have executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names, trademarks, service
+   marks, or product names of the Licensor, except as required for reasonable and customary use in
+   describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor
+   provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT
+   WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation,
+   any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or
+   redistributing the Work and assume any risks associated with Your exercise of permissions under
+   this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in tort (including
+   negligence), contract, or otherwise, unless required by applicable law (such as deliberate and
+   grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for
+   damages, including any direct, indirect, special, incidental, or consequential damages of any
+   character arising as a result of this License or out of the use or inability to use the Work
+   (including but not limited to damages for loss of goodwill, work stoppage, computer failure or
+   malfunction, or any and all other commercial damages or losses), even if such Contributor has
+   been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works
+   thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty,
+   indemnity, or other liability obligations and/or rights consistent with this License. However, in
+   accepting such obligations, You may act only on Your own behalf and on Your sole responsibility,
+   not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each
+   Contributor harmless for any liability incurred by, or claims asserted against, such Contributor
+   by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+©2020. Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of
+Workday, Inc. All other brand and product names are trademarks or registered trademarks of their
+respective holders.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.
diff --git a/modules/preview-css/README.md b/modules/preview-css/README.md
new file mode 100644
index 0000000000..5f674fc9b8
--- /dev/null
+++ b/modules/preview-css/README.md
@@ -0,0 +1,4 @@
+# Canvas Kit Preview CSS
+
+The bundle package containing all modules of the Canvas Kit Preview CSS. The contents are
+auto-generated from the Canvas Kit Preview React source code.
diff --git a/modules/preview-css/package.json b/modules/preview-css/package.json
new file mode 100644
index 0000000000..cb965ac2a4
--- /dev/null
+++ b/modules/preview-css/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@workday/canvas-kit-preview-css",
+  "version": "11.1.10",
+  "description": "The parent module that contains all Workday Canvas Kit Preview CSS components",
+  "author": "Workday, Inc. (https://www.workday.com)",
+  "license": "Apache-2.0",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/workday/canvas-kit.git",
+    "directory": "modules/preview-css"
+  },
+  "files": [
+    "*/package.json",
+    "*.css"
+  ],
+  "scripts": {
+    "clean": "rimraf *.css",
+    "build": "node ../../utils/update-css-package-version.js"
+  },
+  "keywords": [
+    "canvas",
+    "canvas-kit",
+    "css",
+    "components",
+    "workday"
+  ]
+}
diff --git a/modules/preview-react/_examples/stories/examples/TextInputWithFormik.tsx b/modules/preview-react/_examples/stories/examples/TextInputWithFormik.tsx
index 61ea7eb0e1..cbeb000be0 100644
--- a/modules/preview-react/_examples/stories/examples/TextInputWithFormik.tsx
+++ b/modules/preview-react/_examples/stories/examples/TextInputWithFormik.tsx
@@ -20,12 +20,8 @@ const emailRequired = 'Email is required';
 const passwordRequired = 'Password is required';
 
 const validationSchema: SchemaOf<LoginSchema> = object({
-  email: string()
-    .email('Enter a valid email')
-    .required(emailRequired),
-  password: string()
-    .min(passwordMinimum, passwordHint)
-    .required(passwordRequired),
+  email: string().email('Enter a valid email').required(emailRequired),
+  password: string().min(passwordMinimum, passwordHint).required(passwordRequired),
 });
 
 export const TextInputWithFormik = () => {
@@ -54,7 +50,7 @@ export const TextInputWithFormik = () => {
         <TextInput
           orientation="vertical"
           isRequired={true}
-          hasError={formik.touched.email && !!formik.errors.email}
+          error={formik.touched.email && !!formik.errors.email ? 'error' : undefined}
         >
           <TextInput.Label>Email</TextInput.Label>
           <TextInput.Field
@@ -70,7 +66,7 @@ export const TextInputWithFormik = () => {
         <TextInput
           orientation="vertical"
           id={passwordId}
-          hasError={formik.touched.password && !!formik.errors.password}
+          error={formik.touched.password && !!formik.errors.password ? 'error' : undefined}
           isRequired={true}
         >
           <TextInput.Label>Password</TextInput.Label>
diff --git a/modules/preview-react/_examples/stories/examples/TextInputWithReactHookForm.tsx b/modules/preview-react/_examples/stories/examples/TextInputWithReactHookForm.tsx
index b473fcd5e5..3b68c5af2d 100644
--- a/modules/preview-react/_examples/stories/examples/TextInputWithReactHookForm.tsx
+++ b/modules/preview-react/_examples/stories/examples/TextInputWithReactHookForm.tsx
@@ -96,11 +96,14 @@ export const TextInputWithReactHookForm = () => {
     passwordCallbackRef(ref);
     passwordRef.current = ref;
   };
-
   return (
     <form onSubmit={onSubmit} action="." noValidate={true}>
       <Flex gap="xs" flexDirection="column" alignItems="flex-start">
-        <FormField orientation="vertical" isRequired={true} hasError={!!errors.role}>
+        <FormField
+          orientation="vertical"
+          isRequired={true}
+          error={!!errors.role ? 'error' : undefined}
+        >
           <Select items={options} getTextValue={item => item.label}>
             <FormField.Label>What is your role?</FormField.Label>
             <FormField.Input as={Select.Input} {...register('role')} width="280px" />
@@ -116,7 +119,11 @@ export const TextInputWithReactHookForm = () => {
             <FormField.Hint>{errors.role?.message}</FormField.Hint>
           </Select>
         </FormField>
-        <TextInput orientation="vertical" isRequired={true} hasError={!!errors.email}>
+        <TextInput
+          orientation="vertical"
+          isRequired={true}
+          error={!!errors.email ? 'error' : undefined}
+        >
           <TextInput.Label>Email</TextInput.Label>
           <TextInput.Field
             {...register('email')}
@@ -129,7 +136,7 @@ export const TextInputWithReactHookForm = () => {
           orientation="vertical"
           id={passwordId}
           isRequired={true}
-          hasError={!!errors.password}
+          error={!!errors.password ? 'error' : undefined}
         >
           <TextInput.Label>Password</TextInput.Label>
           <Flex gap="xxs">
diff --git a/modules/preview-react/color-picker/lib/ColorPicker.tsx b/modules/preview-react/color-picker/lib/ColorPicker.tsx
index a24bb85cf7..8434dd8140 100644
--- a/modules/preview-react/color-picker/lib/ColorPicker.tsx
+++ b/modules/preview-react/color-picker/lib/ColorPicker.tsx
@@ -3,11 +3,11 @@ import {checkIcon} from '@workday/canvas-system-icons-web';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import * as React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import styled from '@emotion/styled';
 
 import {ResetButton} from './parts/ColorReset';
-import {SwatchBook} from './parts/SwatchBook';
+import {SwatchBook, SwatchBookColorObject} from './parts/SwatchBook';
 
 export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -21,7 +21,7 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The array of colors to be rendered in the swatchbook.
    */
-  colorSet?: string[];
+  colorSet?: string[] | SwatchBookColorObject[];
   /**
    * If true, render an input for entering a custom hex color.
    * @default false
@@ -149,13 +149,19 @@ const HexColorInput = styled(ColorInput)({
   width: '168px',
 });
 
-const isCustomColor = (colors: string[], hexCode?: string) => {
+const isCustomColor = (colors: (string | SwatchBookColorObject)[], hexCode?: string) => {
   if (!hexCode) {
     return false;
   }
 
   const lowercaseHex = hexCode.toLowerCase();
-  return !colors.includes(lowercaseHex);
+  return !colors.some((color: string | SwatchBookColorObject) => {
+    if (typeof color === 'string') {
+      return color.toLowerCase() === lowercaseHex;
+    } else {
+      return color.value.toLowerCase() === lowercaseHex;
+    }
+  });
 };
 
 export const ColorPicker = ({
@@ -204,8 +210,10 @@ export const ColorPicker = ({
       <SwatchBook colors={colorSet} onSelect={onColorChange} value={value} />
       {showCustomHexInput && (
         <ColorInputWrapper onSubmit={onSubmit}>
-          <ColorInputAndLabel label={customHexInputLabel}>
-            <HexColorInput
+          <ColorInputAndLabel>
+            <FormField.Label>{customHexInputLabel}</FormField.Label>
+            <FormField.Input
+              as={HexColorInput}
               onChange={onCustomHexChange}
               onValidColorChange={onValidCustomHexChange}
               value={customHexValue}
diff --git a/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx b/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx
index 62800c5a8a..89c221c7eb 100644
--- a/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx
+++ b/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx
@@ -4,8 +4,13 @@ import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {focusRing, mouseFocusBehavior} from '@workday/canvas-kit-react/common';
 import {ColorSwatch} from '@workday/canvas-kit-react/color-picker';
 
+export interface SwatchBookColorObject {
+  value: string;
+  label: string;
+}
+
 export interface SwatchBookProps {
-  colors: string[];
+  colors: (string | SwatchBookColorObject)[];
   value?: string;
   onSelect: (color: string) => void;
 }
@@ -58,26 +63,33 @@ const Container = styled('div')({
   margin: `0px -${space.xxs} -${space.xxs} 0px`,
 });
 
-export const SwatchBook = ({colors, value, onSelect}: SwatchBookProps) => (
-  <Container>
-    {colors.map((color, index) => {
-      const isSelected = value ? color.toLowerCase() === value.toLowerCase() : false;
+export const SwatchBook = ({colors, value, onSelect}: SwatchBookProps) => {
+  return (
+    <Container>
+      {colors.map((color: string | SwatchBookColorObject, index: number) => {
+        const hexCode = typeof color === 'object' ? color.value : color;
+        const label = typeof color === 'object' ? color.label : color;
+        const isSelected = value ? hexCode.toLowerCase() === value.toLowerCase() : false;
 
-      const handleClick = () => onSelect(color);
-      const handleKeyDown = (event: React.KeyboardEvent) =>
-        (event.key === 'Enter' || event.key === ' ') && onSelect(color);
+        const handleClick = () => onSelect(hexCode);
+        const handleKeyDown = (event: React.KeyboardEvent) =>
+          (event.key === 'Enter' || event.key === ' ') && onSelect(hexCode);
 
-      return (
-        <SwatchContainer
-          key={index + '-' + color}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-          tabIndex={0}
-          isSelected={isSelected}
-        >
-          <ColorSwatch color={color} showCheck={isSelected} />
-        </SwatchContainer>
-      );
-    })}
-  </Container>
-);
+        return (
+          <SwatchContainer
+            key={index + '-' + color}
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+            tabIndex={0}
+            isSelected={isSelected}
+            role="button"
+            aria-label={label}
+            aria-selected={isSelected}
+          >
+            <ColorSwatch color={hexCode} showCheck={isSelected} />
+          </SwatchContainer>
+        );
+      })}
+    </Container>
+  );
+};
diff --git a/modules/preview-react/color-picker/spec/ColorPicker.spec.tsx b/modules/preview-react/color-picker/spec/ColorPicker.spec.tsx
index 2cf595f5e7..e3b88e2181 100644
--- a/modules/preview-react/color-picker/spec/ColorPicker.spec.tsx
+++ b/modules/preview-react/color-picker/spec/ColorPicker.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {fireEvent, render} from '@testing-library/react';
+import {fireEvent, render, screen} from '@testing-library/react';
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {ColorPicker, ColorPickerProps} from '@workday/canvas-kit-preview-react/color-picker';
 
@@ -49,6 +49,18 @@ describe('Color Picker', () => {
 
       expect(getByRole('textbox')).not.toBeNull();
     });
+
+    it('should work with color objects', () => {
+      const {getByRole} = renderColorPicker({
+        colorSet: [
+          {label: 'Cinnamon', value: colors.cinnamon200},
+          {label: 'Blueberry', value: colors.blueberry400},
+        ],
+        showCustomHexInput: true,
+      });
+
+      expect(getByRole('textbox')).not.toBeNull();
+    });
   });
 
   describe('reset button', () => {
@@ -87,4 +99,31 @@ describe('Color Picker', () => {
       });
     });
   });
+  describe('accessibility', () => {
+    it('should have correct aria attributes', () => {
+      renderColorPicker({value: colors.blueberry400});
+      const swatchCinnamon = screen.getByRole('button', {name: /#fcc9c5/});
+      const swatchBlueberry = screen.getByRole('button', {name: /#0875e1/});
+
+      expect(swatchCinnamon).toHaveAttribute('aria-selected', 'false');
+      expect(swatchBlueberry).toHaveAttribute('aria-selected', 'true');
+
+      expect(swatchCinnamon.getAttribute('aria-label')).toBe('#fcc9c5');
+      expect(swatchBlueberry.getAttribute('aria-label')).toBe('#0875e1');
+    });
+    it('should use color labels when provided', () => {
+      renderColorPicker({
+        colorSet: [
+          {label: 'Cinnamon', value: colors.cinnamon200},
+          {label: 'Blueberry', value: colors.blueberry400},
+        ],
+        value: colors.cinnamon200,
+      });
+      const swatchCinnamon = screen.getByRole('button', {name: /Cinnamon/});
+      const swatchBlueberry = screen.getByRole('button', {name: /Blueberry/});
+
+      expect(swatchCinnamon.getAttribute('aria-label')).toBe('Cinnamon');
+      expect(swatchBlueberry.getAttribute('aria-label')).toBe('Blueberry');
+    });
+  });
 });
diff --git a/modules/preview-react/divider/LICENSE b/modules/preview-react/divider/LICENSE
new file mode 100644
index 0000000000..10966086f1
--- /dev/null
+++ b/modules/preview-react/divider/LICENSE
@@ -0,0 +1,52 @@
+Apache License, Version 2.0 Apache License Version 2.0, January 2004
+
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License.
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License.
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution.
+You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+You must give any other recipients of the Work or Derivative Works a copy of this License; and You must cause any modified files to carry prominent notices stating that You changed the files; and You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions.
+Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+
+6. Trademarks.
+This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty.
+Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability.
+In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability.
+While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+©2021 Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
+
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
diff --git a/modules/preview-react/divider/README.md b/modules/preview-react/divider/README.md
new file mode 100644
index 0000000000..ccdf924c06
--- /dev/null
+++ b/modules/preview-react/divider/README.md
@@ -0,0 +1,11 @@
+
+# Canvas Kit Divider
+
+<a href="https://github.com/Workday/canvas-kit/tree/master/modules/preview-react/README.md">
+  <img src="https://img.shields.io/badge/PREVIEW-beta-blueviolet" alt="PREVIEW: Beta" />
+</a>  This component is work in progress and currently in prerelease.
+
+A divider to segment and visually organize content
+
+View the [documentation for Divider](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)
+on Storybook.
diff --git a/modules/preview-react/divider/index.ts b/modules/preview-react/divider/index.ts
new file mode 100644
index 0000000000..fa2b087ab5
--- /dev/null
+++ b/modules/preview-react/divider/index.ts
@@ -0,0 +1 @@
+export * from './lib/Divider';
diff --git a/modules/preview-react/divider/lib/Divider.tsx b/modules/preview-react/divider/lib/Divider.tsx
new file mode 100644
index 0000000000..d201186c5a
--- /dev/null
+++ b/modules/preview-react/divider/lib/Divider.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {
+  createStencil,
+  handleCsProp,
+  CSProps,
+  calc,
+  cssVar,
+  px2rem,
+} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export const dividerStencil = createStencil({
+  vars: {
+    space: cssVar(system.space.x4),
+  },
+  base: ({space}) => {
+    return {
+      display: 'block',
+      height: px2rem(1),
+      border: 'none',
+      borderTop: `1px solid ${system.color.border.divider}`,
+      margin: `${calc.divide(space, 2)} 0`,
+    };
+  },
+});
+
+export interface DividerProps extends CSProps {
+  /**
+   * Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.
+   * E.g. `space="2rem"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.
+   * @default `system.space.x4` (1rem)
+   */
+  space?: string;
+}
+
+/**
+ * # Divider
+ * A divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.
+ *
+ * [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)
+ *
+ * The `space` prop will equally apply top and bottom margin styles.
+ * In the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@workday/canvas-kit-preview-react/divider';
+ * import {system} from '@workday/canvas-tokens-web';
+ *
+ * <Divider space={system.space.x2} />
+ *
+ * ```
+ */
+export const Divider = createComponent('hr')({
+  displayName: 'Divider',
+  Component: ({space, ...elemProps}: DividerProps, ref, Element) => (
+    <Element ref={ref} {...handleCsProp(elemProps, dividerStencil({space}))} />
+  ),
+});
diff --git a/modules/preview-react/divider/spec/SSR.spec.tsx b/modules/preview-react/divider/spec/SSR.spec.tsx
new file mode 100644
index 0000000000..415048b4c0
--- /dev/null
+++ b/modules/preview-react/divider/spec/SSR.spec.tsx
@@ -0,0 +1,13 @@
+/**
+ * @jest-environment node
+ */
+import React from 'react';
+import {renderToString} from 'react-dom/server';
+import {Divider} from '../';
+
+describe('Divider', () => {
+  it('should render on a server without crashing', () => {
+    const ssrRender = () => renderToString(<Divider />);
+    expect(ssrRender).not.toThrow();
+  });
+});
diff --git a/modules/preview-react/table/spec/tsconfig.json b/modules/preview-react/divider/spec/tsconfig.json
similarity index 98%
rename from modules/preview-react/table/spec/tsconfig.json
rename to modules/preview-react/divider/spec/tsconfig.json
index e7f236e49a..d079d9f251 100644
--- a/modules/preview-react/table/spec/tsconfig.json
+++ b/modules/preview-react/divider/spec/tsconfig.json
@@ -1,3 +1,4 @@
+
 {
   "extends": "../../../../tsconfig.spec.json"
 }
diff --git a/modules/preview-react/divider/stories/Divider.stories.mdx b/modules/preview-react/divider/stories/Divider.stories.mdx
new file mode 100644
index 0000000000..4f3dcbe11d
--- /dev/null
+++ b/modules/preview-react/divider/stories/Divider.stories.mdx
@@ -0,0 +1,38 @@
+
+import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import {Basic} from './examples/Basic';
+import {CustomSpace} from './examples/CustomSpace';
+
+<Meta title="Preview/Divider" component={Divider} />
+
+# Divider
+
+A `Divider` segments and visually organizes content.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+Use a `Divider` to separate content and create visual hierarchy. Typically they are used between paragraph sections to indicate a break or shift in content. However, they can also be used as decorative elements to provide greater emphasis and visual hierarchy.
+
+### Basic Example
+
+By default, `Divider` renders a `<hr>` (horizontal rule) element with `0.5rem` of margin on top and bottom. The `space` prop allows you to adjust the vertical margin evenly. In the example below, the `Divider`s provide a subtle deliniation between each profile card without being as visually prominent as a `Card`. The `space` is adjusted to `0.25rem` which applied `0.125rem` to the top and bottom margin.
+
+<ExampleCodeBlock code={Basic} />
+
+### Custom Space
+
+You might also want to apply custom space to `Divider` where the top and bottom margin are not equal. The best way to achieve this is with `createStyles` and the `cs` property. In the example below, the `Divider` is applied as a decorative element to add emphasis to the section heading. Custom styles are defined in the `createStyles` function outside the component and are passed to `Divider`'s `cs` prop. These styles remove the top margin and set the bottom margin to `1rem`.
+
+<ExampleCodeBlock code={CustomSpace} />
+
+## Component API
+
+<SymbolDoc name="Divider" hideDescription />
diff --git a/modules/preview-react/divider/stories/examples/Basic.tsx b/modules/preview-react/divider/stories/examples/Basic.tsx
new file mode 100644
index 0000000000..df1fd32eb2
--- /dev/null
+++ b/modules/preview-react/divider/stories/examples/Basic.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+const sectionStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.space.x4,
+  maxWidth: '40rem',
+});
+
+export const Basic = () => {
+  const lastIndex = maintainerList.length - 1;
+  return (
+    <section className={sectionStyles}>
+      {maintainerList.map((maintainerData, index) => (
+        <>
+          <ProfileCard {...maintainerData} />
+          {index !== lastIndex && <Divider space={system.space.x1} />}
+        </>
+      ))}
+    </section>
+  );
+};
+
+const maintainerList = [
+  {
+    id: '44883293',
+    name: 'Josh Bagwell',
+    bio: 'Software Development Engineer',
+  },
+  {
+    id: '338257',
+    name: 'Nicholas Boll',
+    bio: 'Principal Software Development Engineer',
+  },
+  {
+    id: '7966550',
+    name: 'Manuel Carrera',
+    bio: 'Sr. Software Development Engineer',
+  },
+  {
+    id: '146020',
+    name: 'James Fan',
+    bio: 'Sr. Software Development Engineer',
+  },
+  {
+    id: '48605821',
+    name: 'Raisa Primerova',
+    bio: 'Software Development Engineer',
+  },
+  {
+    id: '4818182',
+    name: 'Alan Smith',
+    bio: 'Principal Software Development Engineer',
+  },
+];
+
+const profileCardStyles = createStyles({
+  display: 'grid',
+  gridGap: '0.5rem',
+  gridTemplateColumns: '5rem 1fr',
+  gridTemplateRows: '1fr 1fr',
+});
+
+const profileCardAvatarStyles = createStyles({
+  gridColumn: '1',
+  gridRow: '1 / 3',
+});
+
+const profileCardHeadingStyles = createStyles({
+  ...system.type.body.large,
+  fontWeight: system.fontWeight.bold,
+  gridColumn: '2/3',
+  gridRow: '1',
+  margin: 0,
+});
+
+const profileCardBodyStyles = createStyles({
+  ...system.type.body.small,
+  gridColumn: '2',
+  gridRow: '2',
+  margin: 0,
+});
+
+interface ProfileCardProps {
+  id: string;
+  name: string;
+  bio: string;
+}
+
+const ProfileCard = ({id, name, bio}: ProfileCardProps) => (
+  <div className={profileCardStyles}>
+    <Avatar
+      size={Avatar.Size.xl}
+      url={`https://avatars.githubusercontent.com/u/${id}?v=4`}
+      altText={`${name}'s avatar`}
+      className={profileCardAvatarStyles}
+    />
+    <h3 className={profileCardHeadingStyles}>{name}</h3>
+    <p className={profileCardBodyStyles}>{bio}</p>
+  </div>
+);
diff --git a/modules/preview-react/divider/stories/examples/CustomSpace.tsx b/modules/preview-react/divider/stories/examples/CustomSpace.tsx
new file mode 100644
index 0000000000..8752c01fd1
--- /dev/null
+++ b/modules/preview-react/divider/stories/examples/CustomSpace.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const headingStyles = createStyles({
+  ...system.type.body.large,
+  fontWeight: system.fontWeight.bold,
+  margin: 0,
+});
+
+const bodyStyles = createStyles({
+  ...system.type.body.small,
+  margin: 0,
+});
+
+const customDividerSpace = createStyles({
+  margin: `0 0 ${system.space.x4}`,
+});
+
+export const CustomSpace = () => {
+  return (
+    <section>
+      <h3 className={headingStyles}>Quote of the Day</h3>
+      <Divider cs={customDividerSpace} />
+      <p className={bodyStyles}>
+        "It is not our differences that divide us. It is our inability to recognize, accept, and
+        celebrate those differences." – Audre Lorde
+      </p>
+    </section>
+  );
+};
diff --git a/modules/preview-react/table/stories/tsconfig.json b/modules/preview-react/divider/stories/tsconfig.json
similarity index 98%
rename from modules/preview-react/table/stories/tsconfig.json
rename to modules/preview-react/divider/stories/tsconfig.json
index 4fb6aa9472..721d5175e2 100644
--- a/modules/preview-react/table/stories/tsconfig.json
+++ b/modules/preview-react/divider/stories/tsconfig.json
@@ -1,3 +1,4 @@
+
 {
   "extends": "../../../../tsconfig.stories.json"
 }
diff --git a/modules/preview-react/divider/stories/visual-testing/stories_Divider.tsx b/modules/preview-react/divider/stories/visual-testing/stories_Divider.tsx
new file mode 100644
index 0000000000..b0f0d0a038
--- /dev/null
+++ b/modules/preview-react/divider/stories/visual-testing/stories_Divider.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import {StaticStates, ComponentStatesTable} from '@workday/canvas-kit-react/testing';
+import {withSnapshotsEnabled} from '../../../../../utils/storybook';
+
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import {system} from '@workday/canvas-tokens-web';
+
+export default withSnapshotsEnabled({
+  title: 'Testing/Preview/Divider',
+  component: Divider,
+});
+
+export const DividerStates = () => {
+  return (
+    <StaticStates>
+      <ComponentStatesTable
+        columnProps={[{label: 'Default', props: {}}]}
+        rowProps={[
+          {
+            label: 'Default Space',
+            props: {},
+          },
+          {
+            label: 'Custom Space',
+            props: {space: system.space.x8},
+          },
+        ]}
+      >
+        {props => {
+          return (
+            <div>
+              <h3 style={{margin: 0}}>Quote of the Day</h3>
+              <Divider {...props} />
+              <p style={{margin: 0}}>
+                "It is not our differences that divide us. It is our inability to recognize, accept,
+                and celebrate those differences." – Audre Lorde
+              </p>
+            </div>
+          );
+        }}
+      </ComponentStatesTable>
+    </StaticStates>
+  );
+};
diff --git a/modules/preview-react/form-field/index.ts b/modules/preview-react/form-field/index.ts
index 47fb19e0c2..bf873ef0ea 100644
--- a/modules/preview-react/form-field/index.ts
+++ b/modules/preview-react/form-field/index.ts
@@ -1,2 +1,6 @@
 export * from './lib/FormField';
 export * from './lib/hooks/';
+export {formFieldStencil} from './lib/formFieldStencil';
+export {formFieldContainerStencil} from './lib/FormFieldContainer';
+export {formFieldHintStencil} from './lib/FormFieldHint';
+export {formFieldLabelStencil} from './lib/FormFieldLabel';
diff --git a/modules/preview-react/form-field/lib/FormField.tsx b/modules/preview-react/form-field/lib/FormField.tsx
index 286e15169d..8d3415c40c 100644
--- a/modules/preview-react/form-field/lib/FormField.tsx
+++ b/modules/preview-react/form-field/lib/FormField.tsx
@@ -1,38 +1,114 @@
 import React from 'react';
 
-import {createContainer} from '@workday/canvas-kit-react/common';
-import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {createContainer, GrowthBehavior} from '@workday/canvas-kit-react/common';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 
-import {useFormFieldModel, useFormFieldOrientation} from './hooks';
+import {useFormFieldModel} from './hooks';
 import {FormFieldInput} from './FormFieldInput';
 import {FormFieldLabel} from './FormFieldLabel';
 import {FormFieldHint} from './FormFieldHint';
+import {FormFieldContainer} from './FormFieldContainer';
+import {formFieldStencil} from './formFieldStencil';
 
-export interface FormFieldProps extends FlexProps {
-  /**
-   * Children of the Text Input. Should contain a `<FormField.Input>`, a `<FormField.Label>` and an optional `<FormField.Hint>`
-   */
-  children: React.ReactNode;
+export interface FormFieldProps extends FlexProps, GrowthBehavior {
   /**
    * The direction the child elements should stack
+   * @default vertical
    */
-  orientation: 'vertical' | 'horizontal';
+  orientation?: 'vertical' | 'horizontal';
+  children: React.ReactNode;
 }
 
+/**
+ * Use `FormField` to wrap input components to make them accessible. You can customize the field
+ * by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.
+ *
+ * ```tsx
+ * <FormField>
+ *    <FormField.Label>First Name</FormField.Label>
+ *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+ *  </FormField>
+ * ```
+ *
+ * @stencil formFieldStencil
+ */
 export const FormField = createContainer('div')({
   displayName: 'FormField',
   modelHook: useFormFieldModel,
   subComponents: {
+    /**
+     * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
+     * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
+     *
+     * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
+     *
+     * ```tsx
+     *  <FormField id='my-unique-id'>
+     *    <FormField.Label>My Label Text</FormField.Label>
+     *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
+     *  <FormField>
+     * ```
+     */
     Input: FormFieldInput,
+    /**
+     * `FormField.Label` will render a `label` element that has a matching `id` to the `FormField.Input`.
+     *
+     * ```tsx
+     * <FormField>
+     *    <FormField.Label>First Name</FormField.Label>
+     *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+     *  </FormField>
+     * ```
+     *
+     * @stencil formFieldLabelStencil
+     */
     Label: FormFieldLabel,
+    /**
+     * `FormField.Hint` will render any additional information you want to provide to the `FormField.Input`. If you
+     * set the `orientation` prop to `horizontal` you should use `FormField.Container` to properly align the hint with your `FormField.Input`.
+     *
+     * ```tsx
+     * <FormField>
+     *    <FormField.Label>First Name</FormField.Label>
+     *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+     *    <FormField.Hint>This is your hint text</FormField.Hint>
+     *  </FormField>
+     * ```
+     *
+     * @stencil formFieldHintStencil
+     */
     Hint: FormFieldHint,
+    /**
+     * `FormField.Container` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..
+     *
+     * ```tsx
+     * <FormField orientation="horizontal">
+     *    <FormField.Label>First Name</FormField.Label>
+     *    <FormField.Container>
+     *      <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
+     *      <FormField.Hint>This is your hint text</FormField.Hint>
+     *    </FormField.Container>
+     *  </FormField>
+     * ```
+     *
+     * @stencil formFieldContainerStencil
+     */
+    Container: FormFieldContainer,
   },
-})<FormFieldProps>(({children, orientation, ...elemProps}, Element) => {
-  const layoutProps = useFormFieldOrientation(orientation);
-
+})<FormFieldProps>(({children, grow, orientation, ...elemProps}, Element, model) => {
   return (
-    <Flex as={Element} {...layoutProps} {...elemProps}>
+    <Element
+      {...mergeStyles(
+        elemProps,
+        formFieldStencil({
+          grow,
+          orientation,
+          error: model.state.error,
+          required: model.state.isRequired,
+        })
+      )}
+    >
       {children}
-    </Flex>
+    </Element>
   );
 });
diff --git a/modules/preview-react/form-field/lib/FormFieldContainer.tsx b/modules/preview-react/form-field/lib/FormFieldContainer.tsx
new file mode 100644
index 0000000000..ad49192ae0
--- /dev/null
+++ b/modules/preview-react/form-field/lib/FormFieldContainer.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {handleCsProp, CSProps, createStencil} from '@workday/canvas-kit-styling';
+
+import {useFormFieldModel} from './hooks';
+
+export const formFieldContainerStencil = createStencil({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+});
+
+export const FormFieldContainer = createSubcomponent('div')({
+  displayName: 'FormField.Container',
+  modelHook: useFormFieldModel,
+})<CSProps>((elemProps, Element, model) => {
+  return (
+    <Element
+      data-width="ck-formfield-width"
+      {...handleCsProp(elemProps, formFieldContainerStencil())}
+    />
+  );
+});
diff --git a/modules/preview-react/form-field/lib/FormFieldHint.tsx b/modules/preview-react/form-field/lib/FormFieldHint.tsx
index f9837b2269..e753891365 100644
--- a/modules/preview-react/form-field/lib/FormFieldHint.tsx
+++ b/modules/preview-react/form-field/lib/FormFieldHint.tsx
@@ -1,33 +1,41 @@
 import React from 'react';
-import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
-import {space} from '@workday/canvas-kit-react/tokens';
+
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {system, brand} from '@workday/canvas-tokens-web';
+import {createStencil, parentModifier} from '@workday/canvas-kit-styling';
+import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {useFormFieldHint, useFormFieldModel} from './hooks';
-import {Subtext} from '@workday/canvas-kit-react/text';
+import {formFieldStencil} from './formFieldStencil';
+
+export const formFieldHintStencil = createStencil({
+  extends: textStencil,
+  base: {
+    margin: `${system.space.x2} ${system.space.zero} ${system.space.zero}`,
+
+    [parentModifier(formFieldStencil.modifiers.error.error)]: {
+      color: brand.error.base,
+    },
+  },
+  defaultModifiers: {
+    typeLevel: 'subtext.medium',
+  },
+});
 
 export const FormFieldHint = createSubcomponent('p')({
   displayName: 'FormField.Hint',
   modelHook: useFormFieldModel,
   elemPropsHook: useFormFieldHint,
-})<Omit<ExtractProps<typeof Subtext, never>, 'size'>>(
-  ({children, ...elemProps}, Element, model) => {
-    const theme = useTheme();
-
-    if (!children) {
-      // If there is no hint text just skip rendering
-      return null;
-    }
-
-    return (
-      <Subtext
-        as={Element}
-        size="medium"
-        color={model.state.hasError ? theme.canvas.palette.error.main : undefined}
-        marginY={space.xxs}
-        {...elemProps}
-      >
-        {children}
-      </Subtext>
-    );
+})<ExtractProps<typeof Text, never>>(({children, typeLevel, variant, ...elemProps}, Element) => {
+  if (!children) {
+    // If there is no hint text just skip rendering
+    return null;
   }
-);
+
+  return (
+    <Element {...mergeStyles(elemProps, formFieldHintStencil({typeLevel, variant}))}>
+      {children}
+    </Element>
+  );
+});
diff --git a/modules/preview-react/form-field/lib/FormFieldInput.tsx b/modules/preview-react/form-field/lib/FormFieldInput.tsx
index 2808503d01..69de3dcf7c 100644
--- a/modules/preview-react/form-field/lib/FormFieldInput.tsx
+++ b/modules/preview-react/form-field/lib/FormFieldInput.tsx
@@ -10,5 +10,5 @@ export const FormFieldInput = createSubcomponent('input')({
   modelHook: useFormFieldModel,
   elemPropsHook: useFormFieldInput,
 })<ExtractProps<typeof Box, never>>((elemProps, Element) => {
-  return <Box as={Element} {...elemProps} />;
+  return <Box data-width="ck-formfield-width" as={Element} {...elemProps} />;
 });
diff --git a/modules/preview-react/form-field/lib/FormFieldLabel.tsx b/modules/preview-react/form-field/lib/FormFieldLabel.tsx
index 3c4d619541..42c01551da 100644
--- a/modules/preview-react/form-field/lib/FormFieldLabel.tsx
+++ b/modules/preview-react/form-field/lib/FormFieldLabel.tsx
@@ -1,46 +1,69 @@
 import React from 'react';
 
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {type, space} from '@workday/canvas-kit-react/tokens';
-import {LabelText, Text} from '@workday/canvas-kit-react/text';
+import {createStencil, parentModifier, px2rem} from '@workday/canvas-kit-styling';
+import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {brand, system} from '@workday/canvas-tokens-web';
+
 import {useFormFieldLabel, useFormFieldModel} from './hooks';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {brand} from '@workday/canvas-tokens-web';
+import {formFieldStencil} from './formFieldStencil';
 
-export interface FormFieldLabelProps extends ExtractProps<typeof LabelText, never> {
+export interface FormFieldLabelProps
+  extends FlexProps,
+    Omit<ExtractProps<typeof Text, never>, 'display'> {
   /**
    * The text of the label.
    */
   children: React.ReactNode;
 }
 
-const labelStyles = createStyles({
-  fontWeight: type.properties.fontWeights.medium,
-  minWidth: '180px',
-});
+export const formFieldLabelStencil = createStencil({
+  extends: textStencil,
+  // @ts-ignore Still weird about CSS variables
+  base: {
+    fontWeight: system.fontWeight.medium,
+    color: system.color.text.default,
+    paddingInlineStart: system.space.zero,
+    marginBottom: system.space.x1,
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: px2rem(180),
+
+    // asterisk
+    [parentModifier(formFieldStencil.modifiers.required.true)]: {
+      '&::after': {
+        content: '"*"',
+        fontSize: system.fontSize.body.large,
+        fontWeight: system.fontWeight.normal,
+        color: brand.error.base,
+        textDecoration: 'unset',
+        marginInlineStart: system.space.x1,
+      },
+    },
 
-const asteriskStyles = createStyles({
-  marginInlineStart: space.xxxs,
-  fontSize: type.properties.fontSizes[20],
-  fontWeight: type.properties.fontWeights.regular,
-  textDecoration: 'unset',
-  color: brand.error.base,
+    // orientation modifier from parent FormField
+    [parentModifier(formFieldStencil.modifiers.orientation.horizontal)]: {
+      float: 'left',
+      maxHeight: system.space.x10,
+    },
+    [parentModifier(formFieldStencil.modifiers.orientation.vertical)]: {
+      width: '100%',
+    },
+  },
+  defaultModifiers: {
+    typeLevel: 'subtext.large',
+  },
 });
 
-export const FormFieldLabel = createSubcomponent(LabelText)({
+export const FormFieldLabel = createSubcomponent('label')({
   displayName: 'FormField.Label',
   modelHook: useFormFieldModel,
   elemPropsHook: useFormFieldLabel,
-})<FormFieldLabelProps>(({children, ...elemProps}, Element, model) => {
+})<FormFieldLabelProps>(({children, typeLevel, variant, ...elemProps}, Element) => {
   return (
-    <LabelText as={Element} {...mergeStyles(elemProps, [labelStyles])}>
+    <Element {...mergeStyles(elemProps, formFieldLabelStencil({typeLevel, variant}))}>
       {children}
-      {model.state.isRequired && (
-        <Text cs={asteriskStyles} aria-hidden="true">
-          *
-        </Text>
-      )}
-    </LabelText>
+    </Element>
   );
 });
diff --git a/modules/preview-react/form-field/lib/formFieldStencil.ts b/modules/preview-react/form-field/lib/formFieldStencil.ts
new file mode 100644
index 0000000000..bdd9c2ce44
--- /dev/null
+++ b/modules/preview-react/form-field/lib/formFieldStencil.ts
@@ -0,0 +1,42 @@
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export const formFieldStencil = createStencil({
+  base: {
+    display: 'flex',
+    border: 'none',
+    padding: system.space.zero,
+    margin: `${system.space.zero} ${system.space.zero} ${system.space.x6}`,
+  },
+  modifiers: {
+    grow: {
+      true: {
+        width: '100%',
+        '[data-width="ck-formfield-width"]': {
+          width: '100%',
+        },
+      },
+    },
+    orientation: {
+      horizontal: {
+        flexDirection: 'row',
+        gap: system.space.x8,
+      },
+      vertical: {
+        flexDirection: 'column',
+        gap: system.space.x1,
+        alignItems: 'flex-start',
+      },
+    },
+    required: {
+      true: {},
+    },
+    error: {
+      error: {},
+      alert: {},
+    },
+  },
+  defaultModifiers: {
+    orientation: 'vertical',
+  },
+});
diff --git a/modules/preview-react/form-field/lib/hooks/useFormFieldInput.tsx b/modules/preview-react/form-field/lib/hooks/useFormFieldInput.tsx
index 165bbfcdae..e1e021b73d 100644
--- a/modules/preview-react/form-field/lib/hooks/useFormFieldInput.tsx
+++ b/modules/preview-react/form-field/lib/hooks/useFormFieldInput.tsx
@@ -8,8 +8,9 @@ import {useFormFieldModel} from './useFormFieldModel';
 export const useFormFieldInput = createElemPropsHook(useFormFieldModel)(({state}) => {
   return {
     required: state.isRequired ? true : undefined,
-    'aria-invalid': state.hasError ? true : undefined,
+    'aria-invalid': state.error === 'error' ? true : undefined,
     'aria-describedby': state.id ? `hint-${state.id}` : undefined,
     id: state.id ? `input-${state.id}` : undefined,
+    error: state.error,
   };
 });
diff --git a/modules/preview-react/form-field/lib/hooks/useFormFieldModel.tsx b/modules/preview-react/form-field/lib/hooks/useFormFieldModel.tsx
index 4e16967a9d..814fdd4dbc 100644
--- a/modules/preview-react/form-field/lib/hooks/useFormFieldModel.tsx
+++ b/modules/preview-react/form-field/lib/hooks/useFormFieldModel.tsx
@@ -3,10 +3,11 @@ import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
 export const useFormFieldModel = createModelHook({
   defaultConfig: {
     /**
-     * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
-     * `required` set to true, and usually some subcomponents will have a error color applied.
+     * Optional flag to denote if this field has an error or warning to display.
+     * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+     * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
      */
-    hasError: false,
+    error: undefined as undefined | 'error' | 'alert',
     /**
      * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
      * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
diff --git a/modules/preview-react/form-field/lib/hooks/useFormFieldOrientation.tsx b/modules/preview-react/form-field/lib/hooks/useFormFieldOrientation.tsx
index 940fad2b9e..69105d3217 100644
--- a/modules/preview-react/form-field/lib/hooks/useFormFieldOrientation.tsx
+++ b/modules/preview-react/form-field/lib/hooks/useFormFieldOrientation.tsx
@@ -3,6 +3,8 @@ import {space} from '@workday/canvas-kit-react/tokens';
 
 /**
  * Adds the necessary layout props to a `FormField` component.
+ *
+ * @deprecated
  */
 export const useFormFieldOrientation = (orientation: 'horizontal' | 'vertical') => {
   let layoutProps: {
@@ -15,7 +17,7 @@ export const useFormFieldOrientation = (orientation: 'horizontal' | 'vertical')
     layoutProps = {
       flexDirection: 'row',
       gap: space.l,
-      alignItems: 'center',
+      alignItems: undefined,
     };
   } else {
     layoutProps = {
diff --git a/modules/preview-react/form-field/stories/FormField.stories.mdx b/modules/preview-react/form-field/stories/FormField.stories.mdx
index 24e8c4b297..fc235c0d21 100644
--- a/modules/preview-react/form-field/stories/FormField.stories.mdx
+++ b/modules/preview-react/form-field/stories/FormField.stories.mdx
@@ -1,16 +1,28 @@
-import {Specifications} from '@workday/canvas-kit-docs';
+import {Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
+import {Basic} from './examples/Basic';
+import {Alert} from './examples/Alert';
+import {Error} from './examples/Error';
+import {Disabled} from './examples/Disabled';
+import {LabelPositionHorizontal} from './examples/LabelPositionHorizontal';
+import {RefForwarding} from './examples/RefForwarding';
+import {Required} from './examples/Required';
 import {Custom} from './examples/Custom';
-import {WithSelect} from './examples/Select';
+import {CustomId} from './examples/CustomId';
+import {AllFields} from './examples/AllFields';
+import {Hint} from './examples/Hint';
+import {FieldSet} from './examples/FieldSet';
+import {Grow} from './examples/Grow';
+import {ThemedError} from './examples/ThemedErrors';
 
 <Meta title="Preview/Inputs/Form Field" component={FormField} />
 
 # Canvas Kit Form Field
 
-FormField allows users to wrap input components to make them accessible. You usually won't want to
-use FormField directly but instead should use the specific component you need, e.g. `TextInput`.
+FormField allows users to wrap input components to make them accessible. You can customize the field
+by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input`.
 
 ## Installation
 
@@ -20,7 +32,84 @@ yarn add @workday/canvas-kit-preview-react
 
 ## Usage
 
-### Customizing With Behavior Hooks Example
+### Basic
+
+Form Field should be used in tandem with most Canvas Kit input components to ensure they meet
+accessibility standards. The orientation of the label by default is `vertical`.
+
+<ExampleCodeBlock code={Basic} />
+
+### Error States
+
+Set the `error` prop of the Form Field or define it in the model to indicate it has an error.
+`error` accepts the following values:
+
+`"error" | "alert" | undefined`
+
+### Alert
+
+Use the alert state when a value is valid but there is additional information.
+
+<ExampleCodeBlock code={Alert} />
+
+### Error
+
+Use the error state when the value is no longer valid.
+
+<ExampleCodeBlock code={Error} />
+
+### Disabled
+
+Set the `disabled` prop of `FormField.Input` to prevent users from interacting with it.
+
+<ExampleCodeBlock code={Disabled} />
+
+### Hint
+
+Use `FormField.Hint` to display a short message below the input component and `FormField.Container`
+to ensure proper alignment.
+
+<ExampleCodeBlock code={Hint} />
+
+### Label Position Horizontal
+
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`.
+
+<ExampleCodeBlock code={LabelPositionHorizontal} />
+
+### Grow
+
+Set the `grow` prop of the Form Field to `true` to configure it (including the wrapped input
+component) to expand to the width of its container.
+
+**Note: This Prop is deprecated and will be removed in a future major version.**
+
+<ExampleCodeBlock code={Grow} />
+
+### Ref Forwarding
+
+If you need full customization you can use the `FormField` behavior hooks to build your own
+solution. It is also easy it work with custom components or third party libraries and get the CKR
+accessibility guarantees by using the `as` prop.
+
+<ExampleCodeBlock code={RefForwarding} />
+
+### Required
+
+Set the `isRequired` prop of the Form Field to `true` to indicate that the field is required. Labels
+for required fields are suffixed by a red asterisk.
+
+<ExampleCodeBlock code={Required} />
+
+### Field Set
+
+Set the `as` prop of the `FormField` to `fieldset` and the `as` prop of the `FormField.Label` to
+`legend` when using `RadioGroup` to ensure proper accessbility.
+
+<ExampleCodeBlock code={FieldSet} />
+
+### Custom
 
 If you need full customization you can use the `FormField` behavior hooks to build your own
 solution. It is also easy it work with custom components or third party libraries and get the CKR
@@ -28,13 +117,34 @@ accessibility guarantees by using the `as` prop.
 
 <ExampleCodeBlock code={Custom} />
 
-### Use with Select
+### Custom id
+
+Form Field will automatically generate an HTML `id` for its input element to link it to the
+correponding label. Alternatively, you may set the `id` prop of the Form Field to specify a custom
+`id` for the input element. The `id` will be appended by `input-${your-unique-id}`.
+
+<ExampleCodeBlock code={CustomId} />
+
+### All Fields
+
+Form Field should allow you to use it with all `inputs` including `Select`, `TextInput`, `Checkbox`,
+`TextArea`, `Switch`, and `RadioGroup`.
+
+<ExampleCodeBlock code={AllFields} />
+
+### Themed Errors
+
+You can theme your error rings by wrapping an input in a `CanvasProvider` and defining
+`focusOutline` and `error` properties on the `theme`.
+
+<ExampleCodeBlock code={ThemedError} />
+
+### Custom Styles
+
+Form Field and its subcomponents support custom styling via the `cs` prop. For more information,
+check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
 
-For some custom inputs, such as Canvas Kit's `Select`, you won't be able to reliably cast the
-`FormField.Input` with the `as` prop. Instead you'll want to use `FormField`'s hooks for the
-implementation. In the example below, we're using the `useFormFieldModel` hook to hoist the model
-and providing it to the `useFormFieldInput` behavior hook. Then we pass the model to the `FormField`
-component and the input props to `Select`. This connects `Select` to the `FormField` components and
-provides it with all the accessible attributes it needs.
+## Component API
 
-<ExampleCodeBlock code={WithSelect} />
+<SymbolDoc name="FormField" fileName="/preview-react/" />
diff --git a/modules/preview-react/form-field/stories/examples/Alert.tsx b/modules/preview-react/form-field/stories/examples/Alert.tsx
new file mode 100644
index 0000000000..fc8561cbe0
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/Alert.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export const Alert = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex>
+      <FormField error="alert">
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Container>
+          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+          <FormField.Hint>Cannot contain numbers</FormField.Hint>
+        </FormField.Container>
+      </FormField>
+    </Flex>
+  );
+};
diff --git a/modules/preview-react/form-field/stories/examples/AllFields.tsx b/modules/preview-react/form-field/stories/examples/AllFields.tsx
new file mode 100644
index 0000000000..6251291a48
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/AllFields.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
+import {Checkbox} from '@workday/canvas-kit-react/checkbox';
+import {Select} from '@workday/canvas-kit-react/select';
+import {TextArea} from '@workday/canvas-kit-react/text-area';
+import {Switch} from '@workday/canvas-kit-react/switch';
+import {calc, createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+  gap: calc.subtract(system.space.x6, system.space.x1),
+  padding: calc.subtract(system.space.x10, system.space.x1),
+  borderRadius: system.space.x1,
+});
+
+export const AllFields = () => {
+  return (
+    <Flex cs={parentContainerStyles}>
+      <FormField grow>
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Input as={TextInput} />
+      </FormField>
+
+      <FormField isRequired={true} error="alert" grow>
+        <FormField.Label>Email</FormField.Label>
+        <FormField.Container>
+          <FormField.Input as={TextInput} />
+          <FormField.Hint>Hint text for your input</FormField.Hint>
+        </FormField.Container>
+      </FormField>
+      <FormField grow>
+        <FormField.Label>Text Area Label</FormField.Label>
+        <FormField.Input as={TextArea} />
+      </FormField>
+      <FormField error="error" grow>
+        <FormField.Label>Choose a Crust</FormField.Label>
+        <Select items={['Pizza', 'Cheeseburger', 'Fries']}>
+          <FormField.Input as={Select.Input} />
+          <Select.Popper>
+            <Select.Card>
+              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+            </Select.Card>
+          </Select.Popper>
+        </Select>
+      </FormField>
+      <FormField as="fieldset" isRequired={true} error={'error'} orientation="horizontal" grow>
+        <FormField.Label as="legend">Radio Group Legend</FormField.Label>
+        <FormField.Container>
+          <FormField.Input as={RadioGroup}>
+            <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
+            <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
+            <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
+            <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
+            <RadioGroup.RadioButton value="butter">
+              Butter - the best thing to put on bread
+            </RadioGroup.RadioButton>
+          </FormField.Input>
+          <FormField.Hint>Error Message</FormField.Hint>
+        </FormField.Container>
+      </FormField>
+      <FormField as="fieldset" grow>
+        <FormField.Label as="legend">Checkbox Legend</FormField.Label>
+        <FormField.Input checked={true} as={Checkbox} label="Checkbox Label" />
+        <FormField.Input checked={false} as={Checkbox} label="Thin Crust" />
+        <FormField.Input checked={false} as={Checkbox} label="Extra Cheese" />
+      </FormField>
+
+      <FormField orientation="horizontal" grow>
+        <FormField.Label>Switch Label</FormField.Label>
+        <FormField.Input as={Switch} />
+      </FormField>
+    </Flex>
+  );
+};
diff --git a/modules/preview-react/form-field/stories/examples/Basic.tsx b/modules/preview-react/form-field/stories/examples/Basic.tsx
new file mode 100644
index 0000000000..5825203b8a
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/Basic.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+export const Basic = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex>
+      <FormField>
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+      </FormField>
+    </Flex>
+  );
+};
diff --git a/modules/preview-react/form-field/stories/examples/Custom.tsx b/modules/preview-react/form-field/stories/examples/Custom.tsx
index 92dbcd9218..be540db3a8 100644
--- a/modules/preview-react/form-field/stories/examples/Custom.tsx
+++ b/modules/preview-react/form-field/stories/examples/Custom.tsx
@@ -4,7 +4,7 @@ import {
   useFormFieldInput,
   useFormFieldLabel,
   useFormFieldModel,
-  useFormFieldOrientation,
+  formFieldStencil,
 } from '@workday/canvas-kit-preview-react/form-field';
 import {useModelContext} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
@@ -44,10 +44,8 @@ export const Custom = () => {
 
   const model = useFormFieldModel({isRequired: true});
 
-  const layoutProps = useFormFieldOrientation('vertical');
-
   return (
-    <Flex {...layoutProps}>
+    <Flex cs={formFieldStencil({orientation: 'horizontal'})}>
       <Label model={model}>My Custom Field</Label>
       <Input model={model} value={value} onChange={handleChange} />
       <Hint model={model}>You can be anything</Hint>
diff --git a/modules/preview-react/form-field/stories/examples/CustomId.tsx b/modules/preview-react/form-field/stories/examples/CustomId.tsx
new file mode 100644
index 0000000000..c5ac5e3e0c
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/CustomId.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+export const CustomId = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex>
+      <FormField id="first-name">
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+      </FormField>
+    </Flex>
+  );
+};
diff --git a/modules/preview-react/form-field/stories/examples/Disabled.tsx b/modules/preview-react/form-field/stories/examples/Disabled.tsx
new file mode 100644
index 0000000000..433f670854
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/Disabled.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export const Disabled = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex>
+      <FormField>
+        <FormField.Label>Email</FormField.Label>
+        <FormField.Input as={TextInput} value={value} disabled onChange={handleChange} />
+      </FormField>
+    </Flex>
+  );
+};
diff --git a/modules/preview-react/form-field/stories/examples/Error.tsx b/modules/preview-react/form-field/stories/examples/Error.tsx
new file mode 100644
index 0000000000..b2f9344828
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/Error.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export const Error = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex>
+      <FormField error="error">
+        <FormField.Label>Password</FormField.Label>
+        <FormField.Container>
+          <FormField.Input as={TextInput} type="password" value={value} onChange={handleChange} />
+          <FormField.Hint>Must Contain a number and a capital letter</FormField.Hint>
+        </FormField.Container>
+      </FormField>
+    </Flex>
+  );
+};
diff --git a/modules/preview-react/form-field/stories/examples/FieldSet.tsx b/modules/preview-react/form-field/stories/examples/FieldSet.tsx
new file mode 100644
index 0000000000..c82bd9683a
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/FieldSet.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
+
+export const FieldSet = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Radio Group Legend</FormField.Label>
+        <FormField.Input as={RadioGroup} onChange={handleChange} value={value}>
+          <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
+          <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
+          <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
+          <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
+          <RadioGroup.RadioButton value="butter">
+            Butter - the best thing to put on bread
+          </RadioGroup.RadioButton>
+        </FormField.Input>
+      </FormField>
+    </Flex>
+  );
+};
diff --git a/modules/preview-react/form-field/stories/examples/Grow.tsx b/modules/preview-react/form-field/stories/examples/Grow.tsx
new file mode 100644
index 0000000000..5ed74db114
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/Grow.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+export const Grow = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex>
+      <FormField grow>
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+      </FormField>
+    </Flex>
+  );
+};
diff --git a/modules/preview-react/form-field/stories/examples/Hint.tsx b/modules/preview-react/form-field/stories/examples/Hint.tsx
new file mode 100644
index 0000000000..13a2dd015a
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/Hint.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export const Hint = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex>
+      <FormField orientation="horizontal">
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Container>
+          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+          <FormField.Hint>Cannot contain numbers</FormField.Hint>
+        </FormField.Container>
+      </FormField>
+    </Flex>
+  );
+};
diff --git a/modules/preview-react/form-field/stories/examples/LabelPositionHorizontal.tsx b/modules/preview-react/form-field/stories/examples/LabelPositionHorizontal.tsx
new file mode 100644
index 0000000000..d5d70c4417
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/LabelPositionHorizontal.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+
+export const LabelPositionHorizontal = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <FormField orientation="horizontal">
+      <FormField.Label>Email</FormField.Label>
+      <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/form-field/stories/examples/RefForwarding.tsx b/modules/preview-react/form-field/stories/examples/RefForwarding.tsx
new file mode 100644
index 0000000000..e8be6a685f
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/RefForwarding.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {changeFocus} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x1,
+  alignItems: 'flex-start',
+  flexDirection: 'column',
+});
+
+export const RefForwarding = () => {
+  const [value, setValue] = React.useState('');
+  const ref = React.useRef(null);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const handleClick = () => {
+    changeFocus(ref.current);
+  };
+
+  return (
+    <Flex cs={parentContainerStyles}>
+      <FormField>
+        <FormField.Label>Email</FormField.Label>
+        <FormField.Input as={TextInput} onChange={handleChange} value={value} ref={ref} />
+      </FormField>
+      <SecondaryButton onClick={handleClick}>Focus Text Input</SecondaryButton>
+    </Flex>
+  );
+};
diff --git a/modules/preview-react/form-field/stories/examples/Required.tsx b/modules/preview-react/form-field/stories/examples/Required.tsx
new file mode 100644
index 0000000000..7241147906
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/Required.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+
+export const Required = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <FormField isRequired={true}>
+      <FormField.Label>Email</FormField.Label>
+      <FormField.Input
+        as={TextInput}
+        placeholder="your@gmail.com"
+        onChange={handleChange}
+        value={value}
+      />
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/form-field/stories/examples/Select.tsx b/modules/preview-react/form-field/stories/examples/Select.tsx
deleted file mode 100644
index 285b65ac5a..0000000000
--- a/modules/preview-react/form-field/stories/examples/Select.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-import {
-  FormField,
-  useFormFieldInput,
-  useFormFieldModel,
-} from '@workday/canvas-kit-preview-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-
-export const WithSelect = () => {
-  const [selected, setSelected] = React.useState(wineList[0].value);
-  // Hoist the FormField model so we can pass it to `useFormFieldInput`
-  const model = useFormFieldModel({isRequired: true});
-  // Get all the FormField-related input props to pass to `Select`
-  const formFieldInputProps = useFormFieldInput(model);
-
-  return (
-    <FormField orientation="vertical" model={model}>
-      <FormField.Label>Choose a wine</FormField.Label>
-      <Select
-        options={wineList}
-        value={selected}
-        onChange={event => setSelected(event.currentTarget.value)}
-        {...formFieldInputProps}
-      />
-      <FormField.Hint>When in doubt, go with the Chianti.</FormField.Hint>
-    </FormField>
-  );
-};
-
-export const wineList = [
-  {label: 'Beaujolais', value: 'beaujolais'},
-  {label: 'Bordeaux', value: 'bordeaux'},
-  {label: 'Cabernet Sauvignon', value: 'cabernet sauvignon'},
-  {label: 'Champagne', value: 'champagne'},
-  {label: 'Chardonnay', value: 'chardonnay'},
-  {label: 'Chianti', value: 'chianti'},
-  {label: 'Malbec', value: 'malbec'},
-  {label: 'Merlot', value: 'merlot'},
-  {label: 'Pinot Grigio', value: 'pinot grigio'},
-  {label: 'Pinot Gris', value: 'pinot gris'},
-  {label: 'Pinot Noir', value: 'pinot noir'},
-  {label: 'Primitivo', value: 'primitivo'},
-  {label: 'Prosecco', value: 'prosecco'},
-  {label: 'Riesling', value: 'riesling'},
-  {label: 'Rioja', value: 'rioja'},
-  {label: 'Rosé', value: 'rosé'},
-  {label: 'Sauvignon Blanc', value: 'sauvignon blanc'},
-  {label: 'Syrah', value: 'syrah'},
-  {label: 'Zinfandel', value: 'zinfandel'},
-];
diff --git a/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx b/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx
new file mode 100644
index 0000000000..5a4ecc0ef4
--- /dev/null
+++ b/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const formFieldHintStyles = createStyles({
+  paddingTop: system.space.x2,
+});
+
+export const ThemedError = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        common: {
+          focusOutline: colors.grapeSoda300,
+        },
+        error: {
+          main: colors.islandPunch400,
+        },
+      },
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <FormField error={!value ? 'error' : undefined} isRequired={true} orientation="vertical">
+        <FormField.Label>Email</FormField.Label>
+        <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+        <FormField.Hint cs={formFieldHintStyles}>
+          {!value && 'Please enter an email.'}
+        </FormField.Hint>
+      </FormField>
+    </CanvasProvider>
+  );
+};
diff --git a/modules/preview-react/index.ts b/modules/preview-react/index.ts
index 8ff135f4ca..d0a5f54083 100644
--- a/modules/preview-react/index.ts
+++ b/modules/preview-react/index.ts
@@ -1,13 +1,13 @@
 export * from './color-picker';
+export * from './divider';
 export * from './form-field';
 export * from './loading-sparkles';
 export * from './menu';
 export * from './pill';
+export * from './radio';
 export * from './segmented-control';
 export * from './select';
 export * from './side-panel';
 export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
-export * from './radio';
-export * from './table';
diff --git a/modules/preview-react/menu/stories/Menu.stories.mdx b/modules/preview-react/menu/stories/Menu.stories.mdx
index 9f489705b0..7bb494c90f 100644
--- a/modules/preview-react/menu/stories/Menu.stories.mdx
+++ b/modules/preview-react/menu/stories/Menu.stories.mdx
@@ -1,5 +1,6 @@
 import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import {DeprecatedMenu, DeprecatedMenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import {Basic} from './examples/Basic';
 import {ContextMenu} from './examples/ContextMenu';
@@ -10,7 +11,15 @@ import {ManyItems} from './examples/ManyItems';
 
 <Meta title="Preview/Menu" component={DeprecatedMenu} />
 
-# Canvas Kit Menu (deprecated)
+# Canvas Kit Menu
+
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
+
+`Menu` in Preview been deprecated and will be removed in a future major version. Please use
+[Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic)
+instead.
 
 `DeprecatedMenu` displays a list of options when triggered by an action or UI element like an icon
 or button.
diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json
index 1219b76369..03e0e67277 100644
--- a/modules/preview-react/package.json
+++ b/modules/preview-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "10.3.60",
+  "version": "11.1.10",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,13 +44,12 @@
     "react": ">=16.14"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.1.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^10.3.60",
-    "@workday/canvas-kit-styling": "^10.3.60",
+    "@workday/canvas-kit-react": "^11.1.10",
+    "@workday/canvas-kit-styling": "^11.1.10",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^1.0.0",
+    "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8"
   },
   "devDependencies": {
diff --git a/modules/preview-react/pill/lib/Pill.tsx b/modules/preview-react/pill/lib/Pill.tsx
index d44f2ebd61..64423575a3 100644
--- a/modules/preview-react/pill/lib/Pill.tsx
+++ b/modules/preview-react/pill/lib/Pill.tsx
@@ -1,17 +1,10 @@
 import React from 'react';
-import {CSSObject} from '@emotion/react';
 
-import {BaseButton, buttonVars} from '@workday/canvas-kit-react/button';
-import {
-  createContainer,
-  focusRing,
-  mouseFocusBehavior,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
+import {BaseButton, buttonStencil} from '@workday/canvas-kit-react/button';
+import {createContainer, focusRing, styled, StyledType} from '@workday/canvas-kit-react/common';
 import {BoxProps, boxStyleFn, Flex} from '@workday/canvas-kit-react/layout';
 import {borderRadius, colors, space, type} from '@workday/canvas-kit-react/tokens';
-import {handleCsProp, CSProps} from '@workday/canvas-kit-styling';
+import {handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
 
 import {usePillModel} from './usePillModel';
 
@@ -20,6 +13,7 @@ import {PillIconButton} from './PillIconButton';
 import {PillCount} from './PillCount';
 import {PillAvatar} from './PillAvatar';
 import {PillLabel} from './PillLabel';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 
 export interface PillProps extends BoxProps {
   /**
@@ -29,79 +23,85 @@ export interface PillProps extends BoxProps {
   variant?: 'default' | 'readOnly' | 'removable';
 }
 
-const pillBaseStyles: CSSObject = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  borderRadius: borderRadius.m,
-  flexShrink: 0,
-  ...type.levels.subtext.large,
-  color: colors.blackPepper400,
-  boxShadow: 'none',
-  outline: 'none',
-  fontWeight: type.properties.fontWeights.medium,
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-  width: 'fit-content',
-  padding: `2px ${space.xxs}`,
-  height: space.m,
-  position: 'relative',
-};
-
-const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
+const StyledBasePill = styled(BaseButton)<StyledType & PillProps>(
   {
-    ...pillBaseStyles,
-
-    '&:focus': {
+    display: 'inline-flex',
+    alignItems: 'center',
+    borderRadius: borderRadius.m,
+    flexShrink: 0,
+    ...type.levels.subtext.large,
+    color: colors.blackPepper400,
+    boxShadow: 'none',
+    outline: 'none',
+    fontWeight: type.properties.fontWeights.medium,
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    width: 'fit-content',
+    padding: `2px ${space.xxs}`,
+    height: space.m,
+    position: 'relative',
+    'span[data-count="ck-pill-count"]': {
+      borderTop: `${px2rem(1)} solid transparent`,
+      borderBottom: `${px2rem(1)} solid transparent`,
+      borderRight: `${px2rem(1)} solid transparent`,
+    },
+    [buttonStencil.vars.background]: colors.soap300,
+    [buttonStencil.vars.border]: colors.licorice200,
+    [buttonStencil.vars.label]: colors.blackPepper400,
+    [systemIconStencil.vars.color]: colors.licorice200,
+    // This style ensures the removable button icon changes when you hover over the pill and not just the removable PillButton
+    button: {
+      [systemIconStencil.vars.color]: colors.licorice200,
+    },
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.background]: colors.soap300,
+      [buttonStencil.vars.border]: colors.blueberry400,
+      [buttonStencil.vars.label]: colors.blackPepper400,
+      [systemIconStencil.vars.color]: colors.licorice500,
+      button: {
+        [systemIconStencil.vars.color]: colors.licorice500,
+      },
       'span[data-count="ck-pill-count"]': {
-        borderTop: `1px solid ${colors.blueberry400}`,
-        borderBottom: `1px solid ${colors.blueberry400}`,
-        borderRight: `1px solid ${colors.blueberry400}`,
+        borderColor: colors.blueberry400,
+      },
+    },
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: colors.soap400,
+      [buttonStencil.vars.border]: colors.licorice400,
+      [buttonStencil.vars.label]: colors.blackPepper400,
+      [systemIconStencil.vars.color]: colors.licorice500,
+      button: {
+        [systemIconStencil.vars.color]: colors.licorice500,
       },
     },
-    '&:active, &:active:hover, &:active:focus': {
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: colors.soap500,
+      [buttonStencil.vars.border]: colors.licorice500,
+      [buttonStencil.vars.label]: colors.blackPepper400,
+      [systemIconStencil.vars.color]: colors.licorice500,
+      button: {
+        [buttonStencil.vars.background]: colors.soap500,
+        [systemIconStencil.vars.color]: colors.licorice500,
+      },
       'span[data-count="ck-pill-count"]': {
         backgroundColor: colors.soap600,
-        border: 'none',
+        borderColor: 'transparent',
       },
     },
-
-    ...mouseFocusBehavior({
-      '&:focus': {
-        'span[data-count="ck-pill-count"]': {
-          border: 'none',
-        },
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: colors.soap100,
+      [buttonStencil.vars.border]: colors.licorice100,
+      [buttonStencil.vars.label]: colors.licorice100,
+      [buttonStencil.vars.opacity]: '1',
+      [systemIconStencil.vars.color]: colors.licorice100,
+      button: {
+        [systemIconStencil.vars.color]: colors.licorice100,
       },
-    }),
-    // Default Styles
-    [buttonVars.default.background]: colors.soap300,
-    [buttonVars.default.border]: colors.licorice200,
-    [buttonVars.default.label]: colors.blackPepper400,
-    [buttonVars.default.icon]: colors.licorice200,
-    // Hover Styles
-    [buttonVars.hover.background]: colors.soap400,
-    [buttonVars.hover.border]: colors.licorice400,
-    [buttonVars.hover.label]: colors.blackPepper400,
-    [buttonVars.hover.icon]: colors.licorice500,
-    // Focus Styles
-    [buttonVars.focus.background]: colors.soap300,
-    [buttonVars.focus.border]: colors.blueberry400,
-    [buttonVars.focus.label]: colors.blackPepper400,
-    [buttonVars.focus.icon]: colors.licorice500,
-    // Active Styles
-    [buttonVars.active.background]: colors.soap500,
-    [buttonVars.active.border]: colors.licorice500,
-    [buttonVars.active.label]: colors.blackPepper400,
-    [buttonVars.active.icon]: colors.licorice500,
-    // Disabled Styles
-    [buttonVars.disabled.background]: colors.soap100,
-    [buttonVars.disabled.border]: colors.licorice100,
-    [buttonVars.disabled.label]: colors.licorice100,
-    [buttonVars.disabled.opacity]: '1',
-    [buttonVars.disabled.icon]: colors.licorice100,
+    },
   },
 
   ({variant}) => ({
-    '&:focus, &:focus-visible': {
+    '&:focus-visible, &.focus': {
       borderColor: variant === 'removable' ? undefined : colors.blueberry400,
       ...focusRing({
         width: 0,
@@ -115,45 +115,60 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
   boxStyleFn
 );
 
-const StyledNonInteractivePill = styled(StyledBasePill)<StyledType & CSProps>({
-  [buttonVars.default.background]: colors.soap300,
-  [buttonVars.default.border]: colors.licorice200,
-  [buttonVars.default.label]: colors.blackPepper400,
+const StyledRemoveablePill = styled(StyledBasePill)<StyledType & CSProps>({
+  [buttonStencil.vars.background]: colors.soap300,
+  [buttonStencil.vars.border]: colors.licorice200,
+  [buttonStencil.vars.label]: colors.blackPepper400,
+  [systemIconStencil.vars.backgroundColor]: colors.soap100,
 
-  [buttonVars.hover.background]: colors.soap300,
-  [buttonVars.hover.border]: colors.licorice200,
-  [buttonVars.hover.label]: colors.blackPepper400,
+  '&:focus-visible, &.focus': {
+    [buttonStencil.vars.background]: colors.soap300,
+    [buttonStencil.vars.border]: colors.licorice200,
+    [buttonStencil.vars.label]: colors.blackPepper400,
+    [systemIconStencil.vars.backgroundColor]: colors.soap300,
+    boxShadow: 'none',
+  },
 
-  [buttonVars.focus.background]: colors.soap300,
-  [buttonVars.focus.border]: colors.licorice200,
-  [buttonVars.focus.label]: colors.blackPepper400,
+  '&:hover, &.hover': {
+    [buttonStencil.vars.background]: colors.soap300,
+    [buttonStencil.vars.border]: colors.licorice200,
+    [buttonStencil.vars.label]: colors.blackPepper400,
+    [systemIconStencil.vars.backgroundColor]: colors.soap300,
+  },
 
-  [buttonVars.active.background]: colors.soap500,
-  [buttonVars.active.border]: colors.licorice500,
-  [buttonVars.active.label]: colors.blackPepper400,
+  '&:active, &.active': {
+    [buttonStencil.vars.background]: colors.soap500,
+    [buttonStencil.vars.border]: colors.licorice500,
+    [buttonStencil.vars.label]: colors.blackPepper400,
+    [systemIconStencil.vars.backgroundColor]: colors.soap500,
+  },
 
-  [buttonVars.disabled.background]: colors.soap100,
-  [buttonVars.disabled.label]: colors.licorice100,
-  [buttonVars.disabled.border]: colors.licorice100,
+  '&:disabled, &.disabled': {
+    [buttonStencil.vars.background]: colors.soap100,
+    [buttonStencil.vars.label]: colors.licorice100,
+    [buttonStencil.vars.border]: colors.licorice100,
+    [systemIconStencil.vars.backgroundColor]: colors.soap100,
+  },
   cursor: 'default',
   overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
   position: 'relative',
-  '&:focus-visibile, &.focus': {
-    ...focusRing({
-      width: 0,
-      innerColor: 'transparent',
-      outerColor: 'transparent',
-    }),
-  },
 });
 
-const StyledReadOnlyPill = styled(StyledNonInteractivePill)<StyledType>({
-  [buttonVars.default.background]: 'transparent',
-  [buttonVars.hover.background]: 'transparent',
-  [buttonVars.focus.background]: 'transparent',
-  [buttonVars.active.background]: 'transparent',
-  [buttonVars.disabled.background]: 'transparent',
-  border: `1px solid ${colors.licorice200}`,
+const StyledReadOnlyPill = styled(StyledRemoveablePill)<StyledType>({
+  [buttonStencil.vars.background]: 'transparent',
+  '&:hover, &.hover': {
+    [buttonStencil.vars.background]: 'transparent',
+  },
+  '&:focus-visible, &.focus': {
+    [buttonStencil.vars.background]: 'transparent',
+  },
+  '&:active, &.active': {
+    [buttonStencil.vars.background]: 'transparent',
+  },
+  '&:disabled, &.disabled': {
+    [buttonStencil.vars.background]: 'transparent',
+  },
+  border: `${px2rem(1)} solid ${colors.licorice200}`,
 });
 
 /**
@@ -294,7 +309,7 @@ export const Pill = createContainer('button')({
         </StyledBasePill>
       )}
       {variant === 'removable' && (
-        <StyledNonInteractivePill
+        <StyledRemoveablePill
           as={Element !== 'button' ? Element : 'span'}
           variant={variant}
           type={undefined}
@@ -308,7 +323,7 @@ export const Pill = createContainer('button')({
               return <Flex.Item key={index}>{child}</Flex.Item>;
             })}
           </Flex>
-        </StyledNonInteractivePill>
+        </StyledRemoveablePill>
       )}
     </>
   );
diff --git a/modules/preview-react/pill/lib/PillIconButton.tsx b/modules/preview-react/pill/lib/PillIconButton.tsx
index 5b6adc2790..ec5229de75 100644
--- a/modules/preview-react/pill/lib/PillIconButton.tsx
+++ b/modules/preview-react/pill/lib/PillIconButton.tsx
@@ -7,7 +7,7 @@ import {usePillModel} from './usePillModel';
 import {xSmallIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
-import {BaseButton, buttonVars} from '@workday/canvas-kit-react/button';
+import {BaseButton, buttonStencil} from '@workday/canvas-kit-react/button';
 
 export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
   /**
@@ -26,6 +26,9 @@ const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
   marginInlineEnd: '-7px', // visually pull in the pill to the right size
   marginInlineStart: `-2px`, // visually create space between label and the button
   overflow: 'visible',
+  [buttonStencil.vars.background]: colors.soap300,
+  [buttonStencil.vars.border]: 'transparent',
+  [buttonStencil.vars.label]: colors.blackPepper400,
   '::after': {
     content: '""',
     height: space.l,
@@ -36,31 +39,33 @@ const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
     margin: 0,
     pointerEvents: 'all',
   },
-  '&.focus, &:focus-visible': {
+
+  '&:focus-visible, &.focus': {
     ...focusRing({
       innerColor: 'transparent',
     }),
+    [buttonStencil.vars.background]: colors.soap300,
+    [buttonStencil.vars.border]: 'transparent',
+    [buttonStencil.vars.label]: colors.blackPepper400,
   },
-  [buttonVars.default.background]: colors.soap300,
-  [buttonVars.default.border]: 'transparent',
-  [buttonVars.default.label]: colors.blackPepper400,
-
-  [buttonVars.hover.background]: colors.soap300,
-  [buttonVars.hover.border]: 'transparent',
-  [buttonVars.hover.label]: colors.blackPepper400,
 
-  [buttonVars.focus.background]: colors.soap300,
-  [buttonVars.focus.border]: 'transparent',
-  [buttonVars.focus.label]: colors.blackPepper400,
+  '&:hover, &.hover': {
+    [buttonStencil.vars.background]: colors.soap300,
+    [buttonStencil.vars.border]: 'transparent',
+    [buttonStencil.vars.label]: colors.blackPepper400,
+  },
 
-  [buttonVars.active.background]: colors.soap500,
-  [buttonVars.active.border]: 'transparent',
-  [buttonVars.active.label]: colors.blackPepper400,
+  '&:active, &.active': {
+    [buttonStencil.vars.background]: colors.soap500,
+    [buttonStencil.vars.border]: 'transparent',
+    [buttonStencil.vars.label]: colors.blackPepper400,
+  },
 
-  [buttonVars.disabled.background]: colors.soap100,
-  [buttonVars.disabled.label]: colors.licorice100,
-  [buttonVars.disabled.border]: 'transparent',
-  [buttonVars.disabled.icon]: colors.licorice100,
+  '&:disabled, &.disabled': {
+    [buttonStencil.vars.background]: colors.soap100,
+    [buttonStencil.vars.label]: colors.licorice100,
+    [buttonStencil.vars.border]: 'transparent',
+  },
 });
 
 export const PillIconButton = createSubcomponent('button')({
diff --git a/modules/preview-react/radio/lib/RadioGroup.tsx b/modules/preview-react/radio/lib/RadioGroup.tsx
index 4d2fb048e6..a8f327e669 100644
--- a/modules/preview-react/radio/lib/RadioGroup.tsx
+++ b/modules/preview-react/radio/lib/RadioGroup.tsx
@@ -1,24 +1,47 @@
 import React from 'react';
-import {
-  createContainer,
-  Themeable,
-  ErrorType,
-  getErrorColors,
-  ExtractProps,
-} from '@workday/canvas-kit-react/common';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {createContainer, Themeable, ErrorType} from '@workday/canvas-kit-react/common';
 import {useRadioModel} from './hooks/useRadioModel';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {RadioLabel} from './RadioLabel';
 import {RadioButton} from './RadioButton';
+import {createStencil, CSProps, calc, px2rem} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
 
-export interface RadioGroupProps extends Themeable, ExtractProps<typeof Flex, never> {
+export interface RadioGroupProps extends Themeable, CSProps, FlexProps {
   /**
    * The type of error associated with the RadioGroup (if applicable).
    */
   error?: ErrorType;
 }
 
+/**
+ * Styles for RadioGroup
+ */
+const radioGroupStencil = createStencil({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: system.shape.x1,
+    gap: system.space.x2,
+    padding: `${px2rem(10)} ${system.space.x3} ${system.space.x2}`,
+    margin: `${calc.negate(system.space.x1)} ${calc.negate(system.space.x3)}`,
+    transition: '100ms box-shadow',
+    width: 'fit-content',
+  },
+  modifiers: {
+    error: {
+      error: {
+        boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.error.base}`,
+      },
+      alert: {
+        boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.alert.darkest}, inset 0 0 0 ${px2rem(3)} ${
+          brand.alert.base
+        }`,
+      },
+    },
+  },
+});
+
 /**
  * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
  *
@@ -29,13 +52,13 @@ export interface RadioGroupProps extends Themeable, ExtractProps<typeof Flex, ne
  * </RadioGroup>
  * ```
  */
-export const RadioGroup = createContainer(Flex)({
+export const RadioGroup = createContainer('div')({
   displayName: 'RadioGroup',
   modelHook: useRadioModel,
   subComponents: {
     /**
-     * `RadioGroup.Radio` renders an `<input type="radio" />` and its associated `<label>` (using `children` as the label's contents).
-     * This component should satisfy most use cases; use `RadioGroup.Label` if you require more flexibility.
+     * `RadioGroup.RadioButton` renders an `<input type="radio" />` and its associated `<label>` (using `children` as the label's contents).
+     * This component should satisfy most use cases; use `RadioGroup.Label` and its sub components if you require more flexibility.
      *
      * ```tsx
      * <RadioGroup name="pizza-crust" value="thin">
@@ -60,35 +83,6 @@ export const RadioGroup = createContainer(Flex)({
      */
     Label: RadioLabel,
   },
-})<RadioGroupProps>(({children, error, theme, ...elemProps}, Element, model) => {
-  const errorColors = getErrorColors(error, theme);
-  return (
-    <Flex
-      as={Element}
-      boxSizing="border-box"
-      flexDirection="column"
-      borderRadius="m"
-      paddingTop="10px"
-      paddingBottom="8px"
-      paddingX="xs"
-      gap="xxs"
-      marginY={`-${space.xxxs}`}
-      transition="100ms box-shadow"
-      marginX={`-${space.xs}`}
-      width="fit-content"
-      style={
-        error !== undefined
-          ? {
-              boxShadow:
-                errorColors.outer !== errorColors.inner
-                  ? `inset 0 0 0 1px ${errorColors.outer}, inset 0 0 0 3px ${errorColors.inner}`
-                  : `inset 0 0 0 2px ${errorColors.inner}`,
-            }
-          : undefined
-      }
-      {...elemProps}
-    >
-      {children}
-    </Flex>
-  );
+})<RadioGroupProps>(({children, error, theme, ...elemProps}, Element) => {
+  return <Element {...mergeStyles(elemProps, radioGroupStencil({error}))}>{children}</Element>;
 });
diff --git a/modules/preview-react/radio/lib/RadioLabel.tsx b/modules/preview-react/radio/lib/RadioLabel.tsx
index ee4f6ede6c..c3254493b0 100644
--- a/modules/preview-react/radio/lib/RadioLabel.tsx
+++ b/modules/preview-react/radio/lib/RadioLabel.tsx
@@ -2,9 +2,11 @@ import React from 'react';
 
 import {Themeable, createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {useRadioModel} from './hooks/useRadioModel';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {RadioInput} from './RadioInput';
 import {RadioText} from './RadioText';
+import {createStencil, CSProps} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 interface RadioLabelContextInterface {
   disabled?: boolean | undefined;
@@ -13,6 +15,7 @@ interface RadioLabelContextInterface {
 }
 export interface RadioLabelProps
   extends Themeable,
+    CSProps,
     ExtractProps<typeof Flex, never>,
     RadioLabelContextInterface {
   /**
@@ -21,6 +24,15 @@ export interface RadioLabelProps
   children?: React.ReactNode;
 }
 
+const radioLabelStencil = createStencil({
+  base: {
+    alignItems: 'flex-start',
+    minHeight: system.space.x6,
+    position: 'relative',
+    gap: system.space.x3,
+  },
+});
+
 export const RadioLabelContext = React.createContext({} as RadioLabelContextInterface);
 
 export const RadioLabel = createSubcomponent('label')({
@@ -54,17 +66,10 @@ export const RadioLabel = createSubcomponent('label')({
      */
     Text: RadioText,
   },
-})<RadioLabelProps>(({children, variant, disabled, value, ...elemProps}, Element, model) => {
+})<RadioLabelProps>(({children, variant, disabled, value, ...elemProps}, Element) => {
   return (
     <RadioLabelContext.Provider value={{variant, disabled}}>
-      <Flex
-        as={Element}
-        alignItems="flex-start"
-        minHeight="m"
-        position="relative"
-        gap="xs"
-        {...elemProps}
-      >
+      <Flex as={Element} {...mergeStyles(elemProps, radioLabelStencil({variant}))}>
         {children}
       </Flex>
     </RadioLabelContext.Provider>
diff --git a/modules/preview-react/radio/lib/RadioText.tsx b/modules/preview-react/radio/lib/RadioText.tsx
index 1a8d442e68..3ede961394 100644
--- a/modules/preview-react/radio/lib/RadioText.tsx
+++ b/modules/preview-react/radio/lib/RadioText.tsx
@@ -1,32 +1,50 @@
 import React from 'react';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {inputColors, colors} from '@workday/canvas-kit-react/tokens';
 import {useRadioModel} from './hooks/useRadioModel';
 import {RadioLabelContext} from './RadioLabel';
-import {Text} from '@workday/canvas-kit-react/text';
+import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+
+const radioTextStencil = createStencil({
+  extends: textStencil,
+  base: {
+    cursor: 'pointer',
+  },
+  modifiers: {
+    variant: {
+      inverse: {
+        color: system.color.text.inverse,
+      },
+    },
+    disabled: {
+      true: {
+        cursor: 'default',
+        color: system.color.text.disabled,
+      },
+    },
+  },
+  compound: [
+    {
+      modifiers: {variant: 'inverse', disabled: true},
+      styles: {
+        color: system.color.text.inverse,
+        opacity: system.opacity.disabled,
+      },
+    },
+  ],
+  defaultModifiers: {
+    typeLevel: 'subtext.large',
+  },
+});
 
 export const RadioText = createSubcomponent('span')({
   displayName: 'RadioButton.Text',
   modelHook: useRadioModel,
 })(({children, ...elemProps}: ExtractProps<typeof Text>, Element) => {
-  const {disabled, variant} = React.useContext(RadioLabelContext);
-  const inverse = variant === 'inverse';
+  const {variant, disabled} = React.useContext(RadioLabelContext);
   return (
-    <Text
-      as={Element}
-      style={{
-        cursor: !disabled ? 'pointer' : undefined,
-        opacity: disabled && inverse ? '.4' : '1',
-        color: inverse
-          ? colors.frenchVanilla100
-          : disabled
-          ? inputColors.disabled.text
-          : elemProps.color,
-      }}
-      typeLevel="subtext.large"
-      {...elemProps}
-    >
-      {children}
-    </Text>
+    <Element {...mergeStyles(elemProps, radioTextStencil({variant, disabled}))}>{children}</Element>
   );
 });
diff --git a/modules/preview-react/radio/lib/StyledRadioButton.tsx b/modules/preview-react/radio/lib/StyledRadioButton.tsx
index 9abce04f8a..ef912b4123 100644
--- a/modules/preview-react/radio/lib/StyledRadioButton.tsx
+++ b/modules/preview-react/radio/lib/StyledRadioButton.tsx
@@ -1,153 +1,227 @@
 import React from 'react';
+
 import {
-  styled,
   StyledType,
   focusRing,
-  mouseFocusBehavior,
   createComponent,
   ExtractProps,
-  Themeable,
 } from '@workday/canvas-kit-react/common';
-import {colors, inputColors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
 
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
-import isPropValid from '@emotion/is-prop-valid';
+import {Box, Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {CSProps, calc, createStencil, px2rem, handleCsProp} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+
+import {RadioLabelContext} from './RadioLabel';
 
 const radioWidth = 18;
 const radioHeight = 18;
 
-export interface StyledRadioButtonProps extends ExtractProps<typeof Box, 'input'>, Themeable {
+export interface StyledRadioButtonProps extends CSProps {
   variant?: 'inverse' | undefined;
 }
 
-const StyledRadioInput = styled(Box.as('input'))<StyledRadioButtonProps & StyledType>(
-  {
-    '&:focus, &:active': {
+const radioInputStencil = createStencil({
+  base: {
+    cursor: 'pointer',
+    height: px2rem(radioHeight),
+    width: px2rem(radioWidth),
+    borderRadius: system.shape.round,
+    position: 'absolute',
+    margin: system.space.zero,
+    '&:focus-visible, &.focus, &:active': {
       outline: 'transparent',
     },
-  },
-  ({
-    disabled,
-    variant,
-    theme: {
-      canvas: {
-        palette: {
-          primary: themePrimary,
-          common: {focusOutline: themeFocusOutline},
-        },
+    '&:disabled, &.disabled': {
+      cursor: 'auto',
+      '+ .cnvs-radio-check': {
+        borderColor: system.color.border.input.disabled,
+        backgroundColor: system.color.bg.alt.softer,
+      },
+      '&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check': {
+        borderColor: system.color.border.input.disabled,
+      },
+      // This creates the inner circle when the Radio is checked.
+      // The backgroundColor represents the dot in the middle of the radio.
+      // The borderColor represents the border around the middle dot of the radio.
+      '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
+        backgroundColor: brand.primary.accent, // inner circle background color
+        border: `${px2rem(5)} solid ${brand.primary.base}`, // inner circle border color
       },
     },
-  }) => ({
-    cursor: !disabled ? 'pointer' : undefined,
-    opacity: disabled && variant === 'inverse' ? '.4' : '1',
-    height: '18px',
-    width: '18px',
 
     // Circle element styles the radio as checked or unchecked
     '+ .cnvs-radio-check': {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
-      backgroundColor: disabled ? inputColors.disabled.background : colors.frenchVanilla100,
-      borderRadius: '999px',
+      backgroundColor: system.color.bg.default,
+      borderRadius: system.shape.round,
       boxSizing: 'border-box',
-      border: `1px solid`,
-      borderColor: disabled
-        ? inputColors.disabled.border
-        : variant === 'inverse'
-        ? colors.soap300
-        : inputColors.border,
-      height: '18px',
-      width: '18px',
+      border: `${px2rem(1)} solid ${system.color.border.input.default}`,
+      height: px2rem(radioHeight),
+      width: px2rem(radioWidth),
       justifyContent: 'center',
       pointerEvents: 'none',
       position: 'absolute',
       transition: 'border 200ms ease, background 200ms',
-      opacity: disabled && variant === 'inverse' ? '.4' : '1',
+      opacity: system.opacity.full,
     },
 
-    '&:hover + .cnvs-radio-check': {
-      borderColor: disabled
-        ? inputColors.disabled.border
-        : variant === 'inverse'
-        ? colors.soap300
-        : colors.licorice500,
+    '&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check': {
+      borderColor: system.color.border.input.strong,
     },
 
-    '&:focus + .cnvs-radio-check': {
-      borderColor: disabled
-        ? inputColors.disabled.border
-        : variant === 'inverse'
-        ? colors.soap300
-        : colors.blueberry400,
-    },
-
-    '&:checked + .cnvs-radio-check': {
-      backgroundColor: variant === 'inverse' ? themePrimary.main : themePrimary.contrast, // inner circle color
-      border: `5px solid`, // this creates the inner circle
-      borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main, // outer circle color
-    },
-
-    '&:focus + .cnvs-radio-check, &:focus:hover + .cnvs-radio-check': {
-      outline: 'transparent',
-
+    '&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check': {
+      borderColor: system.color.border.primary.default,
       ...focusRing({
-        width: variant === 'inverse' ? 2 : 1,
+        width: 1,
         separation: 0,
         animate: false,
-        innerColor: variant === 'inverse' ? colors.blackPepper400 : colors.frenchVanilla100,
-        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        innerColor: system.color.border.inverse,
+        outerColor: brand.common.focusOutline,
       }),
     },
 
-    '&:focus:checked + .cnvs-radio-check, &:focus:hover:checked + .cnvs-radio-check': {
+    '&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check': {
       outline: 'transparent',
-      ...focusRing({
-        width: 2,
-        separation: 2,
-        animate: false,
-        innerColor: variant === 'inverse' ? colors.blackPepper400 : colors.frenchVanilla100,
-        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
-      }),
+    },
+    // This creates the inner circle when the Radio is checked.
+    // The backgroundColor represents the dot in the middle of the radio.
+    // The borderColor represents the border around the middle dot of the radio.
+    '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
+      backgroundColor: brand.primary.accent, // inner circle background color
+      border: `${px2rem(5)} solid ${brand.primary.base}`, // inner circle border color
     },
 
-    ...mouseFocusBehavior({
-      '&:focus + .cnvs-radio-check, &:focus:hover + .cnvs-radio-check, &:focus:active + .cnvs-radio-check, &:focus:hover:checked + .cnvs-radio-check, &:focus:active:checked + .cnvs-radio-check':
-        {
-          ...focusRing({
-            width: 0,
-            outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
-          }),
+    '&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check':
+      {
+        outline: 'transparent',
+        ...focusRing({
+          width: 2,
+          separation: 2,
+          animate: false,
+          innerColor: system.color.border.inverse,
+          outerColor: brand.common.focusOutline,
+        }),
+      },
+  },
+  modifiers: {
+    variant: {
+      inverse: {
+        '+ .cnvs-radio-check': {
+          backgroundColor: system.color.bg.alt.softer,
+          borderColor: system.color.border.input.inverse,
         },
-    }),
-  })
-);
-
-const RadioInputWrapper = styled(Flex, {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'disabled' && prop !== 'variant',
-})<Pick<StyledRadioButtonProps, 'variant' | 'disabled'>>(
-  {
+        '&:disabled, &.disabled': {
+          opacity: system.opacity.disabled,
+          '+ .cnvs-radio-check': {
+            backgroundColor: system.color.bg.alt.softer,
+            borderColor: system.color.border.input.disabled,
+            opacity: system.opacity.disabled,
+          },
+          // This creates the inner circle when the Radio is checked.
+          // The backgroundColor represents the dot in the middle of the radio.
+          // The borderColor represents the border around the middle dot of the radio.
+          '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
+            backgroundColor: brand.primary.base, // inner circle background color
+            borderColor: system.color.border.inverse, // inner circle border color
+          },
+        },
+        '&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check': {
+          borderColor: system.color.border.input.inverse,
+        },
+        '&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check': {
+          borderColor: system.color.border.input.inverse,
+        },
+        // This creates the inner circle when the Radio is checked.
+        // The backgroundColor represents the dot in the middle of the radio.
+        // The borderColor represents the border around the middle dot of the radio.
+        '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
+          backgroundColor: brand.primary.base, // inner circle background color
+          borderColor: system.color.border.inverse, // inner circle border color
+        },
+        '&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check':
+          {
+            ...focusRing({
+              width: 2,
+              separation: 0,
+              innerColor: system.color.border.contrast.default,
+              outerColor: system.color.border.inverse,
+            }),
+          },
+        '&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check':
+          {
+            ...focusRing({
+              width: 2,
+              separation: 2,
+              innerColor: system.color.border.contrast.default,
+              outerColor: system.color.border.inverse,
+            }),
+          },
+      },
+    },
+  },
+});
+
+const StyledRadioInput = createComponent('input')<StyledRadioButtonProps & StyledType>({
+  displayName: 'StyledRadioInput',
+  Component: ({children, variant, ...elemProps}: StyledRadioButtonProps, ref, Element) => {
+    return <Element ref={ref} {...mergeStyles(elemProps, radioInputStencil({variant}))} />;
+  },
+});
+
+const radioInputWrapperStyles = createStencil({
+  base: {
+    height: px2rem(radioHeight),
+    width: px2rem(radioWidth),
+    flex: '0 0 auto',
     // Hover Ripple element
     '::before': {
       content: "''",
-      borderRadius: borderRadius.circle,
-      height: radioHeight,
+      position: 'absolute',
+      borderRadius: system.shape.round,
+      height: px2rem(radioHeight),
       transition: 'box-shadow 150ms ease-out',
-      width: radioWidth,
+      width: px2rem(radioWidth),
       pointerEvents: 'none',
+      opacity: system.opacity.full,
+    },
+    '&:hover:before, &.hover:before': {
+      boxShadow: `0 0 0 ${calc.subtract(system.space.x2, px2rem(1))} ${system.color.bg.alt.soft}`,
     },
   },
-  ({variant, disabled}) => ({
-    '::before': {
-      opacity: variant === 'inverse' ? '0.4' : '1',
+  modifiers: {
+    variant: {
+      inverse: {
+        '::before': {
+          opacity: system.opacity.disabled,
+        },
+      },
     },
-    '&:hover:before': {
-      boxShadow: !disabled
-        ? `0 0 0 calc((${space.l} - ${radioWidth}px) / 2) ${colors.soap200}`
-        : undefined,
+    disabled: {
+      true: {
+        '&:hover:before, &.hover:before': {
+          boxShadow: 'none',
+          cursor: 'auto',
+        },
+      },
     },
-  })
-);
+  },
+});
+
+const RadioInputWrapper = createComponent(Flex)<
+  Pick<StyledRadioButtonProps, 'disabled' | 'variant'>
+>({
+  displayName: 'RadioInputWrapper',
+  Component: ({children, variant, ...elemProps}: StyledRadioButtonProps, ref, Element) => {
+    const {disabled} = React.useContext(RadioLabelContext);
+    return (
+      <Element ref={ref} {...handleCsProp(elemProps, radioInputWrapperStyles({variant, disabled}))}>
+        {children}
+      </Element>
+    );
+  },
+});
 
 export interface StyledRadioButtonProps extends ExtractProps<typeof Box, 'input'> {
   variant?: 'inverse' | undefined;
@@ -165,27 +239,17 @@ export const StyledRadioButton = createComponent('input')({
     Element
   ) => {
     return (
-      <RadioInputWrapper
-        height="18px"
-        width="18px"
-        flex="0 0 auto"
-        className={className}
-        variant={variant}
-        disabled={disabled}
-      >
+      <RadioInputWrapper className={className} variant={variant} disabled={disabled}>
         <StyledRadioInput
-          borderRadius="circle"
-          position="absolute"
-          margin="zero"
           as={Element}
-          type="radio"
           ref={ref}
+          type="radio"
           className={className}
           variant={variant}
           disabled={disabled}
           {...elemProps}
         />
-        <span className="cnvs-radio-check"></span>
+        <span className="cnvs-radio-check" />
       </RadioInputWrapper>
     );
   },
diff --git a/modules/preview-react/radio/stories/Radio.stories.mdx b/modules/preview-react/radio/stories/Radio.stories.mdx
index 9ff40720e3..1fcd68e00e 100644
--- a/modules/preview-react/radio/stories/Radio.stories.mdx
+++ b/modules/preview-react/radio/stories/Radio.stories.mdx
@@ -75,11 +75,8 @@ It will forward `ref` to its underlying `<input type="radio">` element.
 
 ### Label Position
 
-Set the `labelPosition` prop of the wrapping `FormField` to designate the position of the label
-relative to the `RadioGroup`. `labelPosition` accepts the following values:
-
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`.
 
 <ExampleCodeBlock code={LabelPosition} />
 
@@ -142,6 +139,12 @@ Using a form library like [React Hook Form](https://www.react-hook-form.com/) is
 Reference this [CodeSandbox](https://codesandbox.io/s/radio-preview-with-react-hook-form-stn5vr) on
 how to use `RadioGroup` with React Hook Form.
 
+### Custom Styles
+
+Radio and its subcomponents support custom styling via the `cs` prop. For more information, check
+our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="RadioGroup" fileName="/preview-react/" />
diff --git a/modules/preview-react/radio/stories/examples/Alert.tsx b/modules/preview-react/radio/stories/examples/Alert.tsx
index 5fbf5ac47c..5421a8beda 100644
--- a/modules/preview-react/radio/stories/examples/Alert.tsx
+++ b/modules/preview-react/radio/stories/examples/Alert.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export const Alert = () => {
@@ -13,24 +13,15 @@ export const Alert = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="Deep dish is an extra $2.99."
-      label="Choose Your Pizza Crust"
-      useFieldset={true}
-    >
-      <RadioGroup
-        name="crust-alert"
-        onChange={handleChange}
-        value={value}
-        aria-describedby="hint-alert"
-      >
+    <FormField error="alert" id="hint-alert" as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name="crust-alert" onChange={handleChange} value={value}>
         <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </RadioGroup>
+      </FormField.Input>
+      <FormField.Hint>Deep dish is an extra $2.99.</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/preview-react/radio/stories/examples/Basic.tsx b/modules/preview-react/radio/stories/examples/Basic.tsx
index 64b1ce0d18..7082faa43a 100644
--- a/modules/preview-react/radio/stories/examples/Basic.tsx
+++ b/modules/preview-react/radio/stories/examples/Basic.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const formfieldInputStyles = createStyles({
+  width: px2rem(200),
+});
 
 export const Basic = () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -15,8 +20,15 @@ export const Basic = () => {
 
   return (
     <Flex flexDirection="column">
-      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-        <RadioGroup name="pizza-crust" onChange={handleChange} width="200px" value={value}>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+        <FormField.Input
+          cs={formfieldInputStyles}
+          as={RadioGroup}
+          name="pizza-crust"
+          onChange={handleChange}
+          value={value}
+        >
           <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
           <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
           <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
@@ -24,7 +36,7 @@ export const Basic = () => {
           <RadioGroup.RadioButton value="custom">
             Butter - the best thing to put on bread
           </RadioGroup.RadioButton>
-        </RadioGroup>
+        </FormField.Input>
       </FormField>
       Value selected: {value}
     </Flex>
diff --git a/modules/preview-react/radio/stories/examples/Custom.tsx b/modules/preview-react/radio/stories/examples/Custom.tsx
index ce5a57d253..7910f9e901 100644
--- a/modules/preview-react/radio/stories/examples/Custom.tsx
+++ b/modules/preview-react/radio/stories/examples/Custom.tsx
@@ -1,7 +1,18 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  formfieldInputStyles: createStyles({
+    width: px2rem(200),
+  }),
+  radioGroupLabelTextStyles: createStyles({
+    color: base.berrySmoothie400,
+  }),
+};
 
 export const Custom = () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -15,21 +26,34 @@ export const Custom = () => {
 
   return (
     <Flex flexDirection="column">
-      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-        <RadioGroup name="pizza-crust-custom" onChange={handleChange} width="200px" value={value}>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+        <FormField.Input
+          as={RadioGroup}
+          name="pizza-crust-custom"
+          onChange={handleChange}
+          cs={styleOverrides.formfieldInputStyles}
+          value={value}
+        >
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="deep-dish" />
-            <RadioGroup.Label.Text color="berrySmoothie400">Deep dish</RadioGroup.Label.Text>
+            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+              Deep dish
+            </RadioGroup.Label.Text>
           </RadioGroup.Label>
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="gluten-free" />
-            <RadioGroup.Label.Text color="berrySmoothie400">Gluten free</RadioGroup.Label.Text>
+            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+              Gluten free
+            </RadioGroup.Label.Text>
           </RadioGroup.Label>
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="cauliflower" />
-            <RadioGroup.Label.Text color="berrySmoothie400">Cauliflower</RadioGroup.Label.Text>
+            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+              Cauliflower
+            </RadioGroup.Label.Text>
           </RadioGroup.Label>
-        </RadioGroup>
+        </FormField.Input>
       </FormField>
       Value selected: {value}
     </Flex>
diff --git a/modules/preview-react/radio/stories/examples/Disabled.tsx b/modules/preview-react/radio/stories/examples/Disabled.tsx
index 273a760319..dc7fe5af8b 100644
--- a/modules/preview-react/radio/stories/examples/Disabled.tsx
+++ b/modules/preview-react/radio/stories/examples/Disabled.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export const Disabled = () => {
@@ -12,15 +12,16 @@ export const Disabled = () => {
     }
   };
   return (
-    <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-      <RadioGroup name="crust-disabled" onChange={handleChange} value={value}>
+    <FormField as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name="crust-disabled" onChange={handleChange} value={value}>
         <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
         <RadioGroup.RadioButton disabled value="gluten-free">
           Gluten free (sold out)
         </RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };
diff --git a/modules/preview-react/radio/stories/examples/Error.tsx b/modules/preview-react/radio/stories/examples/Error.tsx
index 44c1b81b4a..2260d84a85 100644
--- a/modules/preview-react/radio/stories/examples/Error.tsx
+++ b/modules/preview-react/radio/stories/examples/Error.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export const Error = () => {
@@ -13,19 +13,15 @@ export const Error = () => {
   };
 
   return (
-    <FormField
-      label="Choose Your Pizza Crust"
-      useFieldset={true}
-      error={FormField.ErrorType.Error}
-      hintId="error"
-      hintText="Deep dish is currently sold out."
-    >
-      <RadioGroup name="crust-error" onChange={handleChange} value={value} aria-describedby="error">
+    <FormField error="error" as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name="crust-error" onChange={handleChange} value={value}>
         <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </RadioGroup>
+      </FormField.Input>
+      <FormField.Hint>Deep dish is currently sold out.</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/preview-react/radio/stories/examples/Inverse.tsx b/modules/preview-react/radio/stories/examples/Inverse.tsx
index 1370a2c346..2587803a99 100644
--- a/modules/preview-react/radio/stories/examples/Inverse.tsx
+++ b/modules/preview-react/radio/stories/examples/Inverse.tsx
@@ -1,15 +1,21 @@
 import React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {styled} from '@workday/canvas-kit-react/common';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const StyledFormField = styled(FormField)({
-  legend: {
-    color: colors.frenchVanilla100,
-  },
-});
+const styleOverrides = {
+  containerStyles: createStyles({
+    backgroundColor: system.color.bg.primary.default,
+    padding: system.space.x4,
+  }),
+  formFieldStyles: createStyles({
+    legend: {
+      color: system.color.text.inverse,
+    },
+  }),
+};
 
 export const Inverse = () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -22,13 +28,10 @@ export const Inverse = () => {
   };
 
   return (
-    <Box backgroundColor="blueberry400" padding="s">
-      <StyledFormField
-        label="Choose Your Pizza Crust"
-        labelPosition={FormField.LabelPosition.Top}
-        useFieldset={true}
-      >
-        <RadioGroup name="crust-inverse" onChange={handleChange} value={value}>
+    <Box cs={styleOverrides.containerStyles}>
+      <FormField cs={styleOverrides.formFieldStyles} as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+        <FormField.Input as={RadioGroup} name="crust-inverse" onChange={handleChange} value={value}>
           <RadioGroup.RadioButton variant="inverse" value="deep-dish">
             Deep dish
           </RadioGroup.RadioButton>
@@ -41,8 +44,8 @@ export const Inverse = () => {
           <RadioGroup.RadioButton variant="inverse" value="cauliflower">
             Cauliflower
           </RadioGroup.RadioButton>
-        </RadioGroup>
-      </StyledFormField>
+        </FormField.Input>
+      </FormField>
     </Box>
   );
 };
diff --git a/modules/preview-react/radio/stories/examples/LabelPosition.tsx b/modules/preview-react/radio/stories/examples/LabelPosition.tsx
index 4e0be1f5a6..68ab50e34b 100644
--- a/modules/preview-react/radio/stories/examples/LabelPosition.tsx
+++ b/modules/preview-react/radio/stories/examples/LabelPosition.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export const LabelPosition = () => {
@@ -12,17 +12,14 @@ export const LabelPosition = () => {
     }
   };
   return (
-    <FormField
-      label="Choose Your Pizza Crust"
-      labelPosition={FormField.LabelPosition.Left}
-      useFieldset={true}
-    >
-      <RadioGroup name="crust-label" onChange={handleChange} value={value}>
+    <FormField orientation="horizontal" as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name="crust-label" onChange={handleChange} value={value}>
         <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };
diff --git a/modules/preview-react/radio/stories/examples/NoValue.tsx b/modules/preview-react/radio/stories/examples/NoValue.tsx
index 590753e05a..3e6aa54bf2 100644
--- a/modules/preview-react/radio/stories/examples/NoValue.tsx
+++ b/modules/preview-react/radio/stories/examples/NoValue.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export const NoValue = () => {
@@ -12,17 +12,14 @@ export const NoValue = () => {
     }
   };
   return (
-    <FormField
-      label="Choose Your Pizza Crust"
-      labelPosition={FormField.LabelPosition.Top}
-      useFieldset={true}
-    >
-      <RadioGroup name="crust-no-value" onChange={handleChange} value={value}>
+    <FormField as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name="crust-no-value" onChange={handleChange} value={value}>
         <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };
diff --git a/modules/preview-react/radio/stories/examples/RefForwarding.tsx b/modules/preview-react/radio/stories/examples/RefForwarding.tsx
index c8b0e47355..645134fcfc 100644
--- a/modules/preview-react/radio/stories/examples/RefForwarding.tsx
+++ b/modules/preview-react/radio/stories/examples/RefForwarding.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export const RefForwarding = () => {
@@ -20,15 +20,16 @@ export const RefForwarding = () => {
 
   return (
     <>
-      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-        <RadioGroup name="crust-ref" onChange={handleChange} value={value}>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+        <FormField.Input as={RadioGroup} name="crust-ref" onChange={handleChange} value={value}>
           <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
           <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
           <RadioGroup.RadioButton value="gluten-free" ref={glutenFreeRef}>
             Gluten free
           </RadioGroup.RadioButton>
           <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-        </RadioGroup>
+        </FormField.Input>
       </FormField>
       <PrimaryButton onClick={handleClick}>Select Gluten Free</PrimaryButton>
     </>
diff --git a/modules/preview-react/radio/stories/examples/Required.tsx b/modules/preview-react/radio/stories/examples/Required.tsx
index 0bb0a285e3..075b7f8434 100644
--- a/modules/preview-react/radio/stories/examples/Required.tsx
+++ b/modules/preview-react/radio/stories/examples/Required.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export const Required = () => {
@@ -12,14 +12,10 @@ export const Required = () => {
     }
   };
   return (
-    <FormField
-      label="Choose Your Pizza Crust"
-      required={true}
-      useFieldset={true}
-      hintText="You must choose a crust"
-      hintId="choose-crust"
-    >
-      <RadioGroup
+    <FormField isRequired={true} as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input
+        as={RadioGroup}
         name="crust-required"
         onChange={handleChange}
         value={value}
@@ -29,7 +25,8 @@ export const Required = () => {
         <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </RadioGroup>
+      </FormField.Input>
+      <FormField.Hint>You must choose a crust</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/preview-react/radio/stories/examples/StandaloneRadio.tsx b/modules/preview-react/radio/stories/examples/StandaloneRadio.tsx
index 20d69db7fb..45623b09b6 100644
--- a/modules/preview-react/radio/stories/examples/StandaloneRadio.tsx
+++ b/modules/preview-react/radio/stories/examples/StandaloneRadio.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {StyledRadioButton} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -15,10 +15,12 @@ export const StandaloneRadio = () => {
 
   return (
     <Flex flexDirection="column">
-      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
         <Flex gap="m">
           <Flex as="label" gap="xs">
-            <StyledRadioButton
+            <FormField.Input
+              as={StyledRadioButton}
               onChange={handleChange}
               value="deep-dish"
               name="pizza-crust-standalone"
@@ -27,7 +29,8 @@ export const StandaloneRadio = () => {
             Deep dish
           </Flex>
           <Flex as="label" gap="xs">
-            <StyledRadioButton
+            <FormField.Input
+              as={StyledRadioButton}
               onChange={handleChange}
               value="gluten-free"
               checked={value === 'gluten-free'}
diff --git a/modules/preview-react/radio/stories/stories_VisualTesting.tsx b/modules/preview-react/radio/stories/stories_VisualTesting.tsx
index cac58bbaa0..2b5c5d3a2e 100644
--- a/modules/preview-react/radio/stories/stories_VisualTesting.tsx
+++ b/modules/preview-react/radio/stories/stories_VisualTesting.tsx
@@ -6,7 +6,7 @@ import {
   permutateProps,
 } from '@workday/canvas-kit-react/testing';
 import {withSnapshotsEnabled, customColorTheme} from '../../../../utils/storybook';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 const hintText = 'Helpful text goes here.';
@@ -18,7 +18,7 @@ export default withSnapshotsEnabled({
 });
 
 const testGroup = (
-  <RadioGroup name="contact" value={'email'}>
+  <FormField.Input as={RadioGroup} name="contact" value={'email'}>
     <RadioGroup.RadioButton id="1" value="email">
       Email
     </RadioGroup.RadioButton>
@@ -31,7 +31,7 @@ const testGroup = (
     <RadioGroup.RadioButton id="4" value="mail">
       "Mail (US Postal Service aka USPS), a longer than normal label"
     </RadioGroup.RadioButton>
-  </RadioGroup>
+  </FormField.Input>
 );
 
 export const RadioStates = () => {
@@ -93,14 +93,14 @@ export const RadioStates = () => {
           rowProps={permutateProps({
             error: [
               {value: undefined, label: 'No Error'},
-              {value: FormField.ErrorType.Alert, label: 'Alert'},
-              {value: FormField.ErrorType.Error, label: 'Error'},
+              {value: 'alert', label: 'Alert'},
+              {value: 'error', label: 'Error'},
             ],
           })}
           columnProps={[
             {
               label: 'Left Label',
-              props: {label: 'Contact', labelPosition: FormField.LabelPosition.Left},
+              props: {label: 'Contact', labelPosition: 'horizontal'},
             },
             {
               label: 'Top Label',
@@ -110,12 +110,18 @@ export const RadioStates = () => {
         >
           {props => (
             <FormField
-              useFieldset={true}
-              hintText={typeof props.error !== 'undefined' ? hintText : undefined}
-              hintId={hintId}
-              {...props}
+              as="fieldset"
+              id={hintId}
+              orientation={props.labelPosition}
+              error={props.error}
             >
-              {testGroup}
+              <FormField.Label as="legend">{props.label}</FormField.Label>
+              <FormField.Container>
+                {testGroup}
+                <FormField.Hint>
+                  {typeof props.error !== 'undefined' ? hintText : undefined}
+                </FormField.Hint>
+              </FormField.Container>
             </FormField>
           )}
         </ComponentStatesTable>
@@ -126,8 +132,8 @@ export const RadioStates = () => {
           rowProps={permutateProps({
             error: [
               {value: undefined, label: 'No Error'},
-              {value: FormField.ErrorType.Alert, label: 'Alert'},
-              {value: FormField.ErrorType.Error, label: 'Error'},
+              {value: 'alert', label: 'Alert'},
+              {value: 'error', label: 'Error'},
             ],
           })}
           columnProps={[
@@ -139,29 +145,40 @@ export const RadioStates = () => {
         >
           {props => (
             <FormField
-              useFieldset={true}
-              hintText={typeof props.error !== 'undefined' ? hintText : undefined}
-              hintId={hintId}
-              {...props}
+              as="fieldset"
+              id={hintId}
+              orientation={props.labelPosition}
+              error={props.error}
             >
-              {testGroup}
+              <FormField.Label as="legend">{props.label}</FormField.Label>
+              <FormField.Container>
+                {testGroup}
+                <FormField.Hint>
+                  {typeof props.error !== 'undefined' ? hintText : undefined}
+                </FormField.Hint>
+              </FormField.Container>
             </FormField>
           )}
         </ComponentStatesTable>
       </StaticStates>
       <h3>RadioGroup (wrapping)</h3>
       <div style={{maxWidth: 480}}>
-        <FormField
-          label="Really long label. Really long label. Really long label. Really long label. Really long label. Really long label."
-          labelPosition={FormField.LabelPosition.Left}
-          useFieldset={true}
-        >
-          {testGroup}
+        <FormField orientation="horizontal" as="fieldset">
+          <FormField.Label as="legend">
+            Really long label. Really long label. Really long label. Really long label. Really long
+            label. Really long label.
+          </FormField.Label>
+          <FormField.Container>{testGroup}</FormField.Container>
         </FormField>
-        <FormField
-          label="Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label."
-          useFieldset={true}
-        >
+        <FormField as="fieldset">
+          <FormField.Label as="legend">
+            Really long label. Really long label. Really long label. Really long label. Really long
+            label. Really long label. Really long label. Really long label. Really long label.
+            Really long label. Really long label. Really long label. Really long label. Really long
+            label. Really long label. Really long label. Really long label. Really long label.
+            Really long label. Really long label. Really long label. Really long label. Really long
+            label. Really long label. Really long label. Really long label.
+          </FormField.Label>
           {testGroup}
         </FormField>
       </div>
diff --git a/modules/preview-react/status-indicator/index.ts b/modules/preview-react/status-indicator/index.ts
index d7f98bd7a1..cec6fcf8a0 100644
--- a/modules/preview-react/status-indicator/index.ts
+++ b/modules/preview-react/status-indicator/index.ts
@@ -1,3 +1 @@
-export * from './lib/StatusIndicator';
-export * from './lib/hooks/useStatusIndicatorModel';
-export {useStatusIndicatorIcon} from './lib/StatusIndicatorIcon';
+export {StatusIndicator, StatusIndicatorProps, StatusIndicatorVariant} from './lib/StatusIndicator';
diff --git a/modules/preview-react/status-indicator/lib/StatusIndicator.tsx b/modules/preview-react/status-indicator/lib/StatusIndicator.tsx
index f0ad4f0c17..d486cfd7f8 100644
--- a/modules/preview-react/status-indicator/lib/StatusIndicator.tsx
+++ b/modules/preview-react/status-indicator/lib/StatusIndicator.tsx
@@ -1,25 +1,118 @@
 import React from 'react';
 
-import {ExtractProps, createContainer, createElemPropsHook} from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {StatusIndicatorIcon, statusIndicatorColors} from './StatusIndicatorIcon';
+import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {StatusIndicatorIcon} from './StatusIndicatorIcon';
 import {StatusIndicatorLabel} from './StatusIndicatorLabel';
-import {useStatusIndicatorModel} from './hooks';
+
+export type StatusIndicatorVariant = 'gray' | 'orange' | 'blue' | 'green' | 'red' | 'transparent';
 
 export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never> {
+  /**
+   * Defines the emphasis of the `StatusIndicator`.
+   * `high` emphasis will create more contrast between the background and text colors.
+   * `low` emphasis will create less contrast between the background and text colors.
+   * @default 'low'
+   */
+  emphasis?: 'high' | 'low';
+  /**
+   * Defines the color of the `StatusIndicator`.
+   * @default 'gray'
+   */
+  variant?: StatusIndicatorVariant;
   /**
    * Children of the `StatusIndicator`. Can contain a `StatusIndicator.Label` and optionally a `StatusIndicator.Icon`.
    */
   children: React.ReactNode;
 }
 
-export const useStatusIndicator = createElemPropsHook(useStatusIndicatorModel)(({state}) => {
-  const colors = statusIndicatorColors[state.variant][state.emphasis];
-  return {
-    opacity: state.variant === 'transparent' ? '0.85' : undefined,
-    color: colors.text,
-    background: colors.background,
-  };
+const statusIndicatorStencil = createStencil({
+  base: {
+    display: 'inline-flex',
+    gap: system.space.x1,
+    maxWidth: px2rem(200),
+    alignItems: 'center',
+    borderRadius: system.shape.half,
+    height: px2rem(20),
+    padding: `${system.space.zero} ${system.space.x1}`,
+  },
+  modifiers: {
+    gray: {
+      high: {
+        color: system.color.static.white,
+        [systemIconStencil.vars.color]: system.color.static.white,
+        background: system.color.static.gray.default,
+      },
+      low: {
+        color: system.color.static.gray.strong,
+        [systemIconStencil.vars.color]: system.color.static.gray.strong,
+        background: system.color.static.gray.soft,
+      },
+    },
+    orange: {
+      high: {
+        color: system.color.static.gray.stronger,
+        [systemIconStencil.vars.color]: system.color.static.gray.stronger,
+        background: system.color.static.orange.default,
+      },
+      low: {
+        color: system.color.static.gold.stronger,
+        [systemIconStencil.vars.color]: system.color.static.gold.stronger,
+        background: system.color.static.orange.soft,
+      },
+    },
+    blue: {
+      high: {
+        color: system.color.static.white,
+        [systemIconStencil.vars.color]: system.color.static.white,
+        background: system.color.static.blue.default,
+      },
+      low: {
+        color: system.color.static.blue.strong,
+        [systemIconStencil.vars.color]: system.color.static.blue.strong,
+        background: system.color.static.blue.soft,
+      },
+    },
+    green: {
+      high: {
+        color: system.color.static.white,
+        [systemIconStencil.vars.color]: system.color.static.white,
+        background: system.color.static.green.strong,
+      },
+      low: {
+        color: system.color.static.green.strong,
+        [systemIconStencil.vars.color]: system.color.static.green.strong,
+        background: system.color.static.green.soft,
+      },
+    },
+    red: {
+      high: {
+        color: system.color.static.white,
+        [systemIconStencil.vars.color]: system.color.static.white,
+        background: system.color.static.red.default,
+      },
+      low: {
+        color: system.color.static.red.strong,
+        [systemIconStencil.vars.color]: system.color.static.red.strong,
+        background: system.color.static.red.soft,
+      },
+    },
+    transparent: {
+      high: {
+        color: system.color.static.white,
+        [systemIconStencil.vars.color]: system.color.static.white,
+        background: system.color.bg.translucent,
+      },
+      low: {
+        color: system.color.static.white,
+        [systemIconStencil.vars.color]: system.color.static.white,
+        background: system.color.bg.translucent,
+      },
+    },
+  },
 });
 
 /**
@@ -32,10 +125,8 @@ export const useStatusIndicator = createElemPropsHook(useStatusIndicatorModel)((
  * </StatusIndicator>
  * ```
  */
-export const StatusIndicator = createContainer('div')({
+export const StatusIndicator = createComponent('div')({
   displayName: 'StatusIndicator',
-  modelHook: useStatusIndicatorModel,
-  elemPropsHook: useStatusIndicator,
   subComponents: {
     /**
      * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
@@ -56,20 +147,15 @@ export const StatusIndicator = createContainer('div')({
      */
     Icon: StatusIndicatorIcon,
   },
-})<StatusIndicatorProps>(({children, ...elemProps}, Element, model) => {
-  return (
-    <Flex
-      gap="xxxs"
-      as={Element}
-      maxWidth={200}
-      paddingX="xxxs"
-      display="inline-flex"
-      alignItems="center"
-      height={20}
-      borderRadius="s"
-      {...elemProps}
-    >
-      {children}
-    </Flex>
-  );
+  Component: (
+    {emphasis = 'low', variant = 'gray', children, ...elemProps}: StatusIndicatorProps,
+    ref,
+    Element
+  ) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, statusIndicatorStencil({[variant]: emphasis}))}>
+        {children}
+      </Element>
+    );
+  },
 });
diff --git a/modules/preview-react/status-indicator/lib/StatusIndicatorIcon.tsx b/modules/preview-react/status-indicator/lib/StatusIndicatorIcon.tsx
index 0e786bf7f9..f30db4c2c1 100644
--- a/modules/preview-react/status-indicator/lib/StatusIndicatorIcon.tsx
+++ b/modules/preview-react/status-indicator/lib/StatusIndicatorIcon.tsx
@@ -1,88 +1,13 @@
 import React from 'react';
 
-import {createElemPropsHook, createSubcomponent} from '@workday/canvas-kit-react/common';
-
+import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
-import {useStatusIndicatorModel} from './hooks';
 
 export interface StatusIndicatorIconProps extends SystemIconProps {}
 
-import {colors} from '@workday/canvas-kit-react/tokens';
-
-export const statusIndicatorColors = {
-  gray: {
-    high: {
-      text: colors.frenchVanilla100,
-      background: colors.licorice300,
-    },
-    low: {
-      text: colors.licorice400,
-      background: colors.soap300,
-    },
-  },
-  orange: {
-    high: {
-      text: colors.licorice500,
-      background: colors.cantaloupe400,
-    },
-    low: {
-      text: colors.toastedMarshmallow600,
-      background: colors.cantaloupe100,
-    },
-  },
-  blue: {
-    high: {
-      text: colors.frenchVanilla100,
-      background: colors.blueberry400,
-    },
-    low: {
-      text: colors.blueberry500,
-      background: colors.blueberry100,
-    },
-  },
-  green: {
-    high: {
-      text: colors.frenchVanilla100,
-      background: colors.greenApple600,
-    },
-    low: {
-      text: colors.greenApple600,
-      background: colors.greenApple100,
-    },
+export const StatusIndicatorIcon = createComponent('span')({
+  displayName: 'StatusIndicatorIcon',
+  Component: (elemProps: SystemIconProps, ref, Element) => {
+    return <SystemIcon as={Element} ref={ref} size={20} role="img" {...elemProps} />;
   },
-  red: {
-    high: {
-      text: colors.frenchVanilla100,
-      background: colors.cinnamon500,
-    },
-    low: {
-      text: colors.cinnamon600,
-      background: colors.cinnamon100,
-    },
-  },
-  transparent: {
-    high: {
-      text: colors.frenchVanilla100,
-      background: colors.blackPepper600,
-    },
-    low: {
-      text: colors.frenchVanilla100,
-      background: colors.blackPepper600,
-    },
-  },
-};
-
-export const useStatusIndicatorIcon = createElemPropsHook(useStatusIndicatorModel)(({state}) => {
-  const colors = statusIndicatorColors[state.variant][state.emphasis];
-  return {
-    color: colors.text,
-    colorHover: colors.text,
-  };
-});
-
-export const StatusIndicatorIcon = createSubcomponent('span')({
-  modelHook: useStatusIndicatorModel,
-  elemPropsHook: useStatusIndicatorIcon,
-})<StatusIndicatorIconProps>((elemProps, Element, model) => {
-  return <SystemIcon as={Element} size={20} role="img" {...elemProps} />;
 });
diff --git a/modules/preview-react/status-indicator/lib/StatusIndicatorLabel.tsx b/modules/preview-react/status-indicator/lib/StatusIndicatorLabel.tsx
index 750ca38bcd..2948c66b37 100644
--- a/modules/preview-react/status-indicator/lib/StatusIndicatorLabel.tsx
+++ b/modules/preview-react/status-indicator/lib/StatusIndicatorLabel.tsx
@@ -1,28 +1,33 @@
 import React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {Text, TextProps} from '@workday/canvas-kit-react/text';
+import {TextProps, textStencil} from '@workday/canvas-kit-react/text';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface StatusIndicatorLabelProps extends TextProps {}
 
+const statusIndicatorLabelStencil = createStencil({
+  extends: textStencil,
+  base: {
+    fontWeight: system.fontWeight.bold,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    textTransform: 'capitalize',
+    color: 'inherit',
+  },
+  defaultModifiers: {typeLevel: 'subtext.large'},
+});
+
 export const StatusIndicatorLabel = createComponent('span')({
   displayName: 'StatusIndicator.Label',
   Component: ({children, ...elemProps}: StatusIndicatorLabelProps, ref, Element) => {
     return (
-      <Text
-        whiteSpace="nowrap"
-        overflow="hidden"
-        textOverflow="ellipsis"
-        typeLevel="subtext.large"
-        fontWeight="bold"
-        textTransform="capitalize"
-        ref={ref}
-        color="inherit"
-        as={Element}
-        {...elemProps}
-      >
+      <Element ref={ref} {...mergeStyles(elemProps, statusIndicatorLabelStencil())}>
         {children}
-      </Text>
+      </Element>
     );
   },
 });
diff --git a/modules/preview-react/status-indicator/lib/hooks/index.ts b/modules/preview-react/status-indicator/lib/hooks/index.ts
deleted file mode 100644
index 698efcf1e5..0000000000
--- a/modules/preview-react/status-indicator/lib/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useStatusIndicatorModel';
diff --git a/modules/preview-react/status-indicator/lib/hooks/useStatusIndicatorModel.tsx b/modules/preview-react/status-indicator/lib/hooks/useStatusIndicatorModel.tsx
deleted file mode 100644
index 040349b314..0000000000
--- a/modules/preview-react/status-indicator/lib/hooks/useStatusIndicatorModel.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {createModelHook} from '@workday/canvas-kit-react/common';
-
-export type StatusIndicatorVariant = 'gray' | 'orange' | 'blue' | 'green' | 'red' | 'transparent';
-
-export type StatusIndicatorEmphasis = 'high' | 'low';
-
-export const useStatusIndicatorModel = createModelHook({
-  defaultConfig: {
-    /**
-     * Defines the emphasis of the `StatusIndicator`.
-     * `high` emphasis will create more contrast between the background and text colors.
-     * `low` emphasis will create less contrast between the background and text colors.
-     * @default 'low'
-     */
-
-    emphasis: 'low' as StatusIndicatorEmphasis,
-    /**
-     * Defines the color of the `StatusIndicator`.
-     * @default 'gray'
-     */
-    variant: 'gray' as StatusIndicatorVariant,
-  },
-})(config => {
-  const state = {
-    ...config,
-  };
-
-  return {state, events: {}};
-});
diff --git a/modules/preview-react/status-indicator/stories/StatusIndicator.stories.mdx b/modules/preview-react/status-indicator/stories/StatusIndicator.stories.mdx
index 71f72581a6..0e17d3610f 100644
--- a/modules/preview-react/status-indicator/stories/StatusIndicator.stories.mdx
+++ b/modules/preview-react/status-indicator/stories/StatusIndicator.stories.mdx
@@ -73,6 +73,12 @@ The background color dictated by the `variant` will be dark or light based on th
 
 <ExampleCodeBlock code={Variants} />
 
+### Custom Styles
+
+Status Indicator and its subcomponents support custom styling via the `cs` prop. For more
+information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="StatusIndicator" fileName="/preview-react/" />
diff --git a/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx b/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx
index 7a1774afb0..4baedca4a9 100644
--- a/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx
+++ b/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx
@@ -3,10 +3,16 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+});
 
 export const Emphasis = () => {
   return (
-    <Flex gap="s">
+    <Flex cs={parentContainerStyles}>
       <StatusIndicator emphasis="high">
         <StatusIndicator.Icon icon={uploadCloudIcon} />
         <StatusIndicator.Label>High Emphasis</StatusIndicator.Label>
diff --git a/modules/preview-react/status-indicator/stories/examples/Icon.tsx b/modules/preview-react/status-indicator/stories/examples/Icon.tsx
index 8c79898e11..84f599f862 100644
--- a/modules/preview-react/status-indicator/stories/examples/Icon.tsx
+++ b/modules/preview-react/status-indicator/stories/examples/Icon.tsx
@@ -3,10 +3,16 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+});
 
 export const Icon = () => {
   return (
-    <Flex gap="s">
+    <Flex cs={parentContainerStyles}>
       <StatusIndicator>
         <StatusIndicator.Icon aria-label="unpublished" icon={uploadCloudIcon} />
         <StatusIndicator.Label>Unpublished</StatusIndicator.Label>
diff --git a/modules/preview-react/status-indicator/stories/examples/Overflow.tsx b/modules/preview-react/status-indicator/stories/examples/Overflow.tsx
index 4e299015ac..9704e43beb 100644
--- a/modules/preview-react/status-indicator/stories/examples/Overflow.tsx
+++ b/modules/preview-react/status-indicator/stories/examples/Overflow.tsx
@@ -3,11 +3,17 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {calc, createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const statusIndicatorStyles = createStyles({
+  maxWidth: calc.add(system.space.x20, system.space.x4),
+});
 
 export const Overflow = () => {
   return (
     <OverflowTooltip>
-      <StatusIndicator tabIndex={0} maxWidth={100}>
+      <StatusIndicator tabIndex={0} cs={statusIndicatorStyles}>
         <StatusIndicator.Icon icon={uploadCloudIcon} />
         <StatusIndicator.Label>
           Your workbook is currently in process of saving
diff --git a/modules/preview-react/status-indicator/stories/examples/Variants.tsx b/modules/preview-react/status-indicator/stories/examples/Variants.tsx
index 962a6b5c0c..1c52e9eeaa 100644
--- a/modules/preview-react/status-indicator/stories/examples/Variants.tsx
+++ b/modules/preview-react/status-indicator/stories/examples/Variants.tsx
@@ -3,11 +3,23 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  parentContainerStyles: createStyles({
+    gap: system.space.x4,
+    flexDirection: 'column',
+  }),
+  innerContainerStyles: createStyles({
+    gap: system.space.x4,
+  }),
+};
 
 export const Variants = () => {
   return (
-    <Flex gap="s" flexDirection="column">
-      <Flex gap="s">
+    <Flex cs={styleOverrides.parentContainerStyles}>
+      <Flex cs={styleOverrides.innerContainerStyles}>
         <StatusIndicator>
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
           <StatusIndicator.Icon icon={uploadCloudIcon} />
@@ -33,7 +45,7 @@ export const Variants = () => {
           <StatusIndicator.Icon icon={uploadCloudIcon} />
         </StatusIndicator>
       </Flex>
-      <Flex gap="s">
+      <Flex cs={styleOverrides.innerContainerStyles}>
         <StatusIndicator emphasis="high">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
           <StatusIndicator.Icon icon={uploadCloudIcon} />
diff --git a/modules/preview-react/table/README.md b/modules/preview-react/table/README.md
deleted file mode 100644
index 6e3be9c4f7..0000000000
--- a/modules/preview-react/table/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Canvas Kit Table
-
-View the
-[documentation for Table](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) on
-Storybook.
diff --git a/modules/preview-react/table/index.ts b/modules/preview-react/table/index.ts
deleted file mode 100644
index 7610fbd92f..0000000000
--- a/modules/preview-react/table/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './lib/Table';
diff --git a/modules/preview-react/table/lib/Table.tsx b/modules/preview-react/table/lib/Table.tsx
deleted file mode 100644
index a255974e2d..0000000000
--- a/modules/preview-react/table/lib/Table.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-import React from 'react';
-import {GridProps, Grid} from '@workday/canvas-kit-react/layout';
-import {type, colors} from '@workday/canvas-kit-react/tokens';
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {TableHead} from './TableHead';
-import {TableBody} from './TableBody';
-import {TableRow} from './TableRow';
-import {TableHeader} from './TableHeader';
-import {TableCell} from './TableCell';
-import {TableFooter} from './TableFooter';
-import {TableCaption} from './TableCaption';
-
-/**
- * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
- *
- *
- * ```tsx
-import {Table} from '@workday/canvas-kit-preview-react/table';
-
-export default function App() {
-  return (
-    <Table>
-      <Table.Caption>Table Caption</Table.Caption>
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>Table Header</Table.Header>
-          <Table.Header>Table Header</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Header>Table Header</Table.Header>
-          <Table.Header>Table Header</Table.Header>
-        </Table.Row>
-        <Table.Row>
-          <Table.Header>Table Header</Table.Header>
-          <Table.Cell>Table Data Cell</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Header>Table Header</Table.Header>
-          <Table.Cell>Table Data Cell</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-      <Table.Footer>
-        <Table.Row>
-          <Table.Header>Table Header</Table.Header>
-          <Table.Cell>Table Data Cell</Table.Cell>
-        </Table.Row>
-      </Table.Footer>
-    </Table>
-  );
-}
-```
- */
-export const Table = createComponent('table')({
-  displayName: 'Table',
-  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
-    return (
-      <Grid
-        as={Element}
-        ref={ref}
-        border={`1px solid ${colors.soap500}`}
-        borderRadius="l"
-        overflow="auto"
-        {...type.levels.subtext.large}
-        {...elemProps}
-      >
-        {children}
-      </Grid>
-    );
-  },
-  subComponents: {
-    /**
-     * `Table.Caption` renders a [caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) element.
-     *
-     *
-     * ```tsx
-      import {Table} from '@workday/canvas-kit-preview-react/table';
-
-      export default function App() {
-        return (
-          <Table>
-            <Table.Caption>Table Caption</Table.Caption>
-            <Table.Body>
-              <Table.Row>
-                <Table.Header>Table Header</Table.Header>
-                <Table.Cell>Table Cell</Table.Cell>
-              </Table.Row>
-            </Table.Body>
-          </Table>
-        );
-      }
-      ```
-    */
-    Caption: TableCaption,
-    /**
-    * `Table.Head` renders a [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) element.
-    *
-    *
-    * ```tsx
-    import {Table} from '@workday/canvas-kit-preview-react/table';
-
-    export default function App() {
-      return (
-        <Table>
-          <Table.Head>
-            <Table.Row>
-              <Table.Header>Table Header</Table.Header>
-              <Table.Cell>Table Cell</Table.Cell>
-            </Table.Row>
-          </Table.Head>
-        </Table>
-      );
-    }
-    ```
-    */
-    Head: TableHead,
-    /**
-     * `Table.Body` renders a [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) element.
-     *
-     *
-     * ```tsx
-    import {Table} from '@workday/canvas-kit-preview-react/table';
-
-    export default function App() {
-      return (
-        <Table>
-          <Table.Body>
-            <Table.Row>
-              <Table.Header>Table Header</Table.Header>
-              <Table.Cell>Table Cell</Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
-      );
-    }
-    ```
-    */
-    Body: TableBody,
-    /**
-     * `Table.Row` renders a [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) element.
-     *
-     * **Note**: `Table.Row` is built on [Grid](/docs/components-layout-grid--basic). It will look for
-     * how many children are there and if those children are valid React Elements. This will adjust the
-     * amount of columns automatically using the `gridTemplateColumns` style prop and the width of the
-     * columns is also set using a `minmax` function in the `gridTemplateColumns` style prop. If a user
-     * would like to adjust this, it can be overwritten on `Table.Row`. See the example below for how to
-     * overwrite `gridTemplateColumns`.
-     *
-     *
-     * ```tsx
-    import {Table} from '@workday/canvas-kit-preview-react/table';
-
-    export default function App() {
-      return (
-        <Table>
-          <Table.Head>
-            <Table.Row gridTemplateColumns="repeat(4, minmax(100px, 1fr))">
-              <Table.Header>Table Header</Table.Header>
-              <Table.Cell>Table Cell</Table.Cell>
-            </Table.Row>
-          </Table.Head>
-        </Table>
-      );
-    }
-    ```
-    */
-    Row: TableRow,
-    /**
-    * `Table.Header` renders a [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) element.
-    *
-    *
-    * ```tsx
-    import {Table} from '@workday/canvas-kit-preview-react/table';
-
-    export default function App() {
-      return (
-        <Table>
-          <Table.Head>
-            <Table.Row>
-              <Table.Header>Table Header</Table.Header>
-              <Table.Cell>Table Cell</Table.Cell>
-            </Table.Row>
-          </Table.Head>
-        </Table>
-      );
-    }
-    ```
-    */
-    Header: TableHeader,
-    /**
-    * `Table.Cell` renders a [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) element.
-    *
-    *
-    * ```tsx
-    import {Table} from '@workday/canvas-kit-preview-react/table';
-
-    export default function App() {
-      return (
-        <Table>
-          <Table.Body>
-            <Table.Row>
-              <Table.Header>Table Header</Table.Header>
-              <Table.Cell>Table Cell</Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
-      );
-    }
-    ```
-    */
-    Cell: TableCell,
-    /**
-    * `Table.Footer` renders a [tfoot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) element.
-    *
-    *
-    * ```tsx
-    import {Table} from '@workday/canvas-kit-preview-react/table';
-
-    export default function App() {
-      return (
-        <Table>
-          <Table.Footer>
-            <Table.Row>
-              <Table.Header>Table Header</Table.Header>
-              <Table.Cell>Table Cell</Table.Cell>
-            </Table.Row>
-          </Table.Footer>
-        </Table>
-      );
-    }
-    ```
-    */
-    Footer: TableFooter,
-  },
-});
diff --git a/modules/preview-react/table/lib/TableBody.tsx b/modules/preview-react/table/lib/TableBody.tsx
deleted file mode 100644
index 1f1a0043a5..0000000000
--- a/modules/preview-react/table/lib/TableBody.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
-import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
-
-const StyledBody = styled(Grid.as('tbody'))<StyledType>({
-  'tr:last-of-type td': {
-    borderBottom: 'none',
-  },
-  'tr:last-of-type th': {
-    borderBottom: 'none',
-  },
-  'tr:first-of-type td': {
-    borderTop: 'none',
-  },
-  'tr:first-of-type th': {
-    borderTop: 'none',
-  },
-  'td:last-of-type': {
-    borderRight: 'none',
-  },
-  'td:first-of-type': {
-    borderLeft: 'none',
-  },
-});
-
-export const TableBody = createComponent('tbody')({
-  displayName: 'Table.Body',
-  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
-    return (
-      <StyledBody as={Element} ref={ref} {...elemProps}>
-        {children}
-      </StyledBody>
-    );
-  },
-});
diff --git a/modules/preview-react/table/lib/TableCaption.tsx b/modules/preview-react/table/lib/TableCaption.tsx
deleted file mode 100644
index b84a2536f3..0000000000
--- a/modules/preview-react/table/lib/TableCaption.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {FlexProps, Flex} from '@workday/canvas-kit-react/layout';
-import {createComponent} from '@workday/canvas-kit-react/common';
-
-export const TableCaption = createComponent('caption')({
-  displayName: 'Table.Caption',
-  Component: ({children, ...elemProps}: FlexProps, ref, Element) => {
-    return (
-      <Flex
-        as={Element}
-        ref={ref}
-        borderBottom={`1px solid ${colors.soap500}`}
-        paddingY="xxs"
-        paddingX="s"
-        {...elemProps}
-      >
-        {children}
-      </Flex>
-    );
-  },
-});
diff --git a/modules/preview-react/table/lib/TableCell.tsx b/modules/preview-react/table/lib/TableCell.tsx
deleted file mode 100644
index 8588ab159c..0000000000
--- a/modules/preview-react/table/lib/TableCell.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {createComponent} from '@workday/canvas-kit-react/common';
-
-export const TableCell = createComponent('td')({
-  displayName: 'Table.Cell',
-  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
-    return (
-      <Grid
-        as={Element}
-        ref={ref}
-        alignItems="center"
-        backgroundColor="frenchVanilla100"
-        borderBottom={`1px solid ${colors.soap400}`}
-        gridTemplateColumns="1fr"
-        justifyContent="start"
-        minHeight="56px"
-        paddingY="xxs"
-        paddingX="s"
-        wordBreak="break-word"
-        {...elemProps}
-      >
-        {children}
-      </Grid>
-    );
-  },
-});
diff --git a/modules/preview-react/table/lib/TableFooter.tsx b/modules/preview-react/table/lib/TableFooter.tsx
deleted file mode 100644
index 2ac57661d9..0000000000
--- a/modules/preview-react/table/lib/TableFooter.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
-import {createComponent} from '@workday/canvas-kit-react/common';
-
-export const TableFooter = createComponent('tfoot')({
-  displayName: 'Table.Footer',
-  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
-    return (
-      <Grid as={Element} ref={ref} {...elemProps}>
-        {children}
-      </Grid>
-    );
-  },
-});
diff --git a/modules/preview-react/table/lib/TableHead.tsx b/modules/preview-react/table/lib/TableHead.tsx
deleted file mode 100644
index 3d838e749a..0000000000
--- a/modules/preview-react/table/lib/TableHead.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import {GridProps, Grid} from '@workday/canvas-kit-react/layout';
-import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
-
-const StyledHead = styled(Grid.as('thead'))<StyledType>({
-  'th:last-of-type': {
-    borderRight: 'none',
-  },
-  'th:first-of-type': {
-    borderLeft: 'none',
-  },
-});
-
-export const TableHead = createComponent('thead')({
-  displayName: 'Table.Head',
-  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
-    return (
-      <StyledHead as={Element} ref={ref} backgroundColor="soap100" minHeight="48px" {...elemProps}>
-        {children}
-      </StyledHead>
-    );
-  },
-});
diff --git a/modules/preview-react/table/lib/TableHeader.tsx b/modules/preview-react/table/lib/TableHeader.tsx
deleted file mode 100644
index b7c2b55037..0000000000
--- a/modules/preview-react/table/lib/TableHeader.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {createComponent} from '@workday/canvas-kit-react/common';
-
-export const TableHeader = createComponent('th')({
-  displayName: 'Table.Header',
-  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
-    return (
-      <Grid
-        as={Element}
-        ref={ref}
-        alignItems="center"
-        backgroundColor="frenchVanilla100"
-        borderBottom={`1px solid ${colors.soap400}`}
-        justifyContent="start"
-        minHeight="56px"
-        paddingY="xxs"
-        paddingX="s"
-        wordBreak="break-word"
-        fontWeight="medium"
-        {...elemProps}
-      >
-        {children}
-      </Grid>
-    );
-  },
-});
diff --git a/modules/preview-react/table/lib/TableRow.tsx b/modules/preview-react/table/lib/TableRow.tsx
deleted file mode 100644
index 7b8e3ed44b..0000000000
--- a/modules/preview-react/table/lib/TableRow.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {GridProps, Grid} from '@workday/canvas-kit-react/layout';
-import {createComponent} from '@workday/canvas-kit-react/common';
-
-export const TableRow = createComponent('tr')({
-  displayName: 'Table.Row',
-  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
-    const validChildren = (children: React.ReactNode) => {
-      return React.Children.toArray(children).filter(child =>
-        React.isValidElement(child)
-      ) as React.ReactElement[];
-    };
-    const childrenArray = validChildren(children).length;
-    return (
-      <Grid
-        as={Element}
-        ref={ref}
-        gridAutoFlow="column"
-        gridTemplateColumns={`repeat(${childrenArray}, minmax(10rem, 1fr))`}
-        {...elemProps}
-      >
-        {children}
-      </Grid>
-    );
-  },
-});
diff --git a/modules/preview-react/table/stories/Table.stories.mdx b/modules/preview-react/table/stories/Table.stories.mdx
deleted file mode 100644
index ba0346c793..0000000000
--- a/modules/preview-react/table/stories/Table.stories.mdx
+++ /dev/null
@@ -1,67 +0,0 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-import {Table} from '@workday/canvas-kit-preview-react/table';
-// Examples
-import {Basic} from './examples/Basic';
-import {BasicWithHeading} from './examples/BasicWithHeading';
-import {FixedColumn} from './examples/FixedColumn';
-import {RightToLeft} from './examples/RightToLeft';
-
-<Meta title="Preview/Table" component={Table} />
-
-# Canvas Kit Table
-
-`Table` is a simple styled compound component that renders a
-[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to
-present information in a two-dimensional table comprised of rows and columns of cells containing
-data.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-preview-react
-```
-
-## Usage
-
-### Basic Example
-
-Users may not want to use a `caption` so they can import [Heading](/components/text/heading/) or
-[Text](/components/text/text/) instead. This will give the user more flexibility around the
-customization of the title/heading of their table.
-
-<ExampleCodeBlock code={BasicWithHeading} />
-
-### Right to Left
-
-Table supports right-to-left languages when specified in the CanvasProvider theme.
-
-<ExampleCodeBlock code={RightToLeft} />
-
-### Example with Caption
-
-Users are free to use a `caption` instead of a heading. A `caption` is not required but it is good
-for
-[accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#accessibility_concerns)
-purposes.
-
-<ExampleCodeBlock code={Basic} />
-
-### Fixed Column
-
-Users may add styles to the `Table.Header` to render a fixed column. The example below assigns a
-`width` to the `Table` to guarantee the fixed column is triggered, but you are free to omit the
-`width` if you would only like the fixed column to be triggered if necessary.
-
-<ExampleCodeBlock code={FixedColumn} />
-
-### Advanced
-
-You can also find several advanced Table examples in our Storybook Examples section.
-
-- [Expandable Rows](/docs/examples-tables-advanced--expandable-rows)
-- [Selectable Rows ](/docs/examples-tables-advanced--selectable-rows)
-- [Sortable Column Headers](/docs/examples-tables-advanced--sortable-column-headers)
-
-## Component API
-
-<SymbolDoc name="Table" fileName="/preview-react/" />
diff --git a/modules/preview-react/table/stories/examples/Basic.tsx b/modules/preview-react/table/stories/examples/Basic.tsx
deleted file mode 100644
index 3e88b6847d..0000000000
--- a/modules/preview-react/table/stories/examples/Basic.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-
-import {Table} from '@workday/canvas-kit-preview-react/table';
-
-export const Basic = () => {
-  return (
-    <Table>
-      <Table.Caption>Coffee Drinks and Sizes</Table.Caption>
-      <Table.Head>
-        <Table.Row>
-          <Table.Header scope="col" backgroundColor="soap100">Drink</Table.Header>
-          <Table.Header scope="col" backgroundColor="soap100">Size</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>Espresso</Table.Cell>
-          <Table.Cell>1 oz</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Macchiato</Table.Cell>
-          <Table.Cell>2 oz Espresso</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Cortado</Table.Cell>
-          <Table.Cell>2 oz Espresso, 1 oz Foamed Milk</Table.Cell>
-        </Table.Row>
-        <Table.Row></Table.Row>
-        <Table.Row>
-          <Table.Cell>Cappuccino</Table.Cell>
-          <Table.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  );
-};
diff --git a/modules/preview-react/table/stories/stories_visualTesting.tsx b/modules/preview-react/table/stories/stories_visualTesting.tsx
deleted file mode 100644
index 5425faa5f9..0000000000
--- a/modules/preview-react/table/stories/stories_visualTesting.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React from 'react';
-
-import {StaticStates} from '@workday/canvas-kit-react/testing';
-
-import {withSnapshotsEnabled} from '../../../../utils/storybook';
-
-// unreleased path
-import {Table} from '@workday/canvas-kit-preview-react/table';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {Heading} from '@workday/canvas-kit-react/text';
-import {colors} from '@workday/canvas-kit-react/tokens';
-
-export default {
-  title: 'Testing/Preview/Table',
-  component: Table,
-};
-
-const Standard = () => (
-  <Table>
-    <Table.Caption>Table Caption</Table.Caption>
-    <Table.Head>
-      <Table.Row>
-        <Table.Header>Table Header</Table.Header>
-        <Table.Header>Table Header</Table.Header>
-      </Table.Row>
-    </Table.Head>
-    <Table.Body>
-      <Table.Row>
-        <Table.Header>Table Header</Table.Header>
-        <Table.Header>Table Header</Table.Header>
-      </Table.Row>
-      <Table.Row>
-        <Table.Header>Table Header</Table.Header>
-        <Table.Cell>Table Data Cell</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Header>Table Header</Table.Header>
-        <Table.Cell>Table Data Cell</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-    <Table.Footer>
-      <Table.Row>
-        <Table.Header>Table Header</Table.Header>
-        <Table.Cell>Table Data Cell</Table.Cell>
-      </Table.Row>
-    </Table.Footer>
-  </Table>
-);
-
-const exampleData = [
-  {
-    header: 'Example Header',
-    cell: 'Example Cell',
-  },
-  {
-    header: 'Example Header',
-    cell: 'Example Cell',
-  },
-  {
-    header: 'Example Header',
-    cell: 'Example Cell',
-  },
-  {
-    header: 'Example Header',
-    cell: 'Example Cell',
-  },
-];
-
-const FixedColumn = () => (
-  <>
-    <Heading size="small">Table Heading</Heading>
-    <Table>
-      <Table.Head>
-        <Table.Row>
-          <Table.Header
-            position="sticky"
-            left="0"
-            backgroundColor="soap100"
-            borderRight={`1px solid ${colors.soap400}`}
-          >
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-          <Table.Header borderRight={`1px solid ${colors.soap400}`} backgroundColor="soap100">
-            Header
-          </Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        {exampleData.map(item => (
-          <>
-            <Table.Row>
-              <Table.Header
-                position="sticky"
-                left="0"
-                backgroundColor="soap100"
-                borderRight={`1px solid ${colors.soap400}`}
-              >
-                {item.header}
-              </Table.Header>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-              <Table.Cell borderRight={`1px solid ${colors.soap400}`}>{item.cell}</Table.Cell>
-            </Table.Row>
-          </>
-        ))}
-      </Table.Body>
-    </Table>
-  </>
-);
-
-export const TableStates = withSnapshotsEnabled(() => {
-  return (
-    <StaticStates>
-      <Flex gap="xs" flexDirection="column">
-        <div>
-          <h3>Standard</h3>
-          <Standard />
-        </div>
-        <div>
-          <h3>Fixed Column with Heading</h3>
-          <FixedColumn />
-        </div>
-      </Flex>
-    </StaticStates>
-  );
-});
diff --git a/modules/preview-react/text-area/lib/TextArea.tsx b/modules/preview-react/text-area/lib/TextArea.tsx
index 81e40d7c43..dc35a5a696 100644
--- a/modules/preview-react/text-area/lib/TextArea.tsx
+++ b/modules/preview-react/text-area/lib/TextArea.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {
-  FormField,
-  useFormFieldModel,
-  useFormFieldOrientation,
-} from '@workday/canvas-kit-preview-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {FormField, formFieldStencil} from '@workday/canvas-kit-preview-react/form-field';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {TextAreaField} from './TextAreaField';
-
+import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
+/**
+ * @deprecated ⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
+ */
 export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
   /**
    * Children of the Text Input. Should contain a `<TextArea.Field>`, a `<TextArea.Label>` and an optional `<TextArea.Hint>`
@@ -17,20 +16,32 @@ export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
   children: React.ReactNode;
 }
 
+/**
+ * @stencil formFieldStencil
+ * @deprecated ⚠️ `TextArea` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ */
 export const TextArea = createContainer('div')({
   displayName: 'TextArea',
-  modelHook: useFormFieldModel,
+  modelHook: useTextInputModel,
   subComponents: {
     Field: TextAreaField,
     Label: FormField.Label,
     Hint: FormField.Hint,
   },
-})<TextAreaProps>(({children, orientation, ...elemProps}, Element) => {
-  const layoutProps = useFormFieldOrientation(orientation);
-
+})<TextAreaProps>(({children, grow, orientation, ...elemProps}, Element, model) => {
   return (
-    <Flex as={Element} {...layoutProps} {...elemProps}>
+    <Element
+      {...mergeStyles(
+        elemProps,
+        formFieldStencil({
+          grow,
+          orientation,
+          error: model.state.error,
+          required: model.state.isRequired,
+        })
+      )}
+    >
       {children}
-    </Flex>
+    </Element>
   );
 });
diff --git a/modules/preview-react/text-area/lib/TextAreaField.tsx b/modules/preview-react/text-area/lib/TextAreaField.tsx
index 04e1609c23..22e4110e20 100644
--- a/modules/preview-react/text-area/lib/TextAreaField.tsx
+++ b/modules/preview-react/text-area/lib/TextAreaField.tsx
@@ -4,6 +4,7 @@ import {jsx} from '@emotion/react';
 
 import {
   borderRadius,
+  colors,
   CSSProperties,
   inputColors,
   space,
@@ -35,7 +36,7 @@ const baseStyles: CSSProperties = {
   },
   '&:disabled': {
     backgroundColor: inputColors.disabled.background,
-    borderColor: inputColors.disabled.border,
+    borderColor: colors.licorice100,
     color: inputColors.disabled.text,
     '&::placeholder': {
       color: inputColors.disabled.text,
@@ -43,6 +44,9 @@ const baseStyles: CSSProperties = {
   },
 };
 
+/**
+ * @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
+ */
 export const TextAreaField = createSubcomponent('textarea')({
   displayName: 'TextArea.Field',
   modelHook: useTextInputModel,
@@ -50,14 +54,15 @@ export const TextAreaField = createSubcomponent('textarea')({
   const theme = useTheme();
   const errorRing = useThemedRing('error');
 
-  const focusStyles = model.state.hasError
-    ? errorRing
-    : {
-        '&:focus:not([disabled])': {
-          borderColor: theme.canvas.palette.common.focusOutline,
-          boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-        },
-      };
+  const focusStyles =
+    model.state.error === 'error'
+      ? errorRing
+      : {
+          '&:focus:not([disabled])': {
+            borderColor: theme.canvas.palette.common.focusOutline,
+            boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
+          },
+        };
 
   return (
     <FormField.Input
diff --git a/modules/preview-react/text-area/stories/TextArea.stories.mdx b/modules/preview-react/text-area/stories/TextArea.stories.mdx
index a3cf6c853b..8ef98a0a55 100644
--- a/modules/preview-react/text-area/stories/TextArea.stories.mdx
+++ b/modules/preview-react/text-area/stories/TextArea.stories.mdx
@@ -1,6 +1,7 @@
 import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import {Alert} from './examples/Alert';
 import {Basic} from './examples/Basic';
@@ -19,6 +20,14 @@ import {ResizeConstraints} from './examples/ResizeConstraints';
 
 # Canvas Kit Text Area
 
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
+
+`TextArea` in Preview has been deprecated and will be removed in a future major version. Please use
+[`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic)
+instead.
+
 TextArea's allow users to enter and edit multiple lines of text.
 
 [> Workday Design Reference](https://design.workday.com/components/inputs/text-area)
diff --git a/modules/preview-react/text-area/stories/examples/Error.tsx b/modules/preview-react/text-area/stories/examples/Error.tsx
index 69fcaa8843..963e0d905c 100644
--- a/modules/preview-react/text-area/stories/examples/Error.tsx
+++ b/modules/preview-react/text-area/stories/examples/Error.tsx
@@ -31,7 +31,7 @@ export const Error = () => {
   };
 
   return (
-    <TextArea hasError={hasError} orientation="vertical">
+    <TextArea error={hasError ? 'error' : undefined} orientation="vertical">
       <TextArea.Label>A three letter word</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
       <TextArea.Hint paddingTop={space.xxs}>{hint}</TextArea.Hint>
diff --git a/modules/preview-react/text-input/lib/TextInput.tsx b/modules/preview-react/text-input/lib/TextInput.tsx
index 8f3b7c03d8..106f4ef5d3 100644
--- a/modules/preview-react/text-input/lib/TextInput.tsx
+++ b/modules/preview-react/text-input/lib/TextInput.tsx
@@ -4,19 +4,25 @@ import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
 import {
   FormField,
   useFormFieldModel,
-  useFormFieldOrientation,
+  formFieldStencil,
 } from '@workday/canvas-kit-preview-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {TextInputField} from './TextInputField';
 
+/**
+ * @deprecated ⚠️ `TextInputProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ */
 export interface TextInputProps extends ExtractProps<typeof FormField, never> {
   /**
    * Children of the Text Input. Should contain a `<TextInput.Field>`, a `<TextInput.Label>` and an optional `<TextInput.Hint>`
    */
   children: React.ReactNode;
 }
-
+/**
+ * @stencil formFieldStencil
+ * @deprecated ⚠️ `TextInput` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ */
 export const TextInput = createContainer('div')({
   displayName: 'TextInput',
   modelHook: useFormFieldModel,
@@ -25,12 +31,22 @@ export const TextInput = createContainer('div')({
     Label: FormField.Label,
     Hint: FormField.Hint,
   },
-})<ExtractProps<typeof FormField, never>>(({children, orientation, ...elemProps}, Element) => {
-  const layoutProps = useFormFieldOrientation(orientation);
-
-  return (
-    <Flex as={Element} {...layoutProps} {...elemProps}>
-      {children}
-    </Flex>
-  );
-});
+})<ExtractProps<typeof FormField, never>>(
+  ({children, orientation, grow, ...elemProps}, Element, model) => {
+    return (
+      <Element
+        {...mergeStyles(
+          elemProps,
+          formFieldStencil({
+            grow,
+            orientation,
+            error: model.state.error,
+            required: model.state.isRequired,
+          })
+        )}
+      >
+        {children}
+      </Element>
+    );
+  }
+);
diff --git a/modules/preview-react/text-input/lib/TextInputField.tsx b/modules/preview-react/text-input/lib/TextInputField.tsx
index 186cdb3cc6..836e9073cf 100644
--- a/modules/preview-react/text-input/lib/TextInputField.tsx
+++ b/modules/preview-react/text-input/lib/TextInputField.tsx
@@ -4,6 +4,7 @@ import {jsx} from '@emotion/react';
 
 import {
   borderRadius,
+  colors,
   CSSProperties,
   inputColors,
   space,
@@ -15,9 +16,9 @@ import {
   useTheme,
   useThemedRing,
 } from '@workday/canvas-kit-react/common';
-import {FormField, useFormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
-import {useTextInputField} from './hooks';
+import {useTextInputField, useTextInputModel} from './hooks';
 
 const baseStyles: CSSProperties = {
   transition: '0.2s box-shadow, 0.2s border-color',
@@ -32,7 +33,7 @@ const baseStyles: CSSProperties = {
   },
   '&:disabled': {
     backgroundColor: inputColors.disabled.background,
-    borderColor: inputColors.disabled.border,
+    borderColor: colors.licorice100,
     color: inputColors.disabled.text,
     '&::placeholder': {
       color: inputColors.disabled.text,
@@ -43,22 +44,26 @@ const baseStyles: CSSProperties = {
   },
 };
 
+/**
+ * @deprecated ⚠️ `TextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ */
 export const TextInputField = createSubcomponent('input')({
   displayName: 'TextInput.Field',
-  modelHook: useFormFieldModel,
+  modelHook: useTextInputModel,
   elemPropsHook: useTextInputField,
 })<ExtractProps<typeof FormField.Input, never>>((elemProps, Element, model) => {
   const theme = useTheme();
   const errorRing = useThemedRing('error');
 
-  const focusStyles = model.state.hasError
-    ? errorRing
-    : {
-        '&:focus:not([disabled])': {
-          borderColor: theme.canvas.palette.common.focusOutline,
-          boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-        },
-      };
+  const focusStyles =
+    model.state.error === 'error'
+      ? errorRing
+      : {
+          '&:focus:not([disabled])': {
+            borderColor: theme.canvas.palette.common.focusOutline,
+            boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
+          },
+        };
 
   return (
     <FormField.Input
diff --git a/modules/preview-react/text-input/lib/hooks/useTextInputField.tsx b/modules/preview-react/text-input/lib/hooks/useTextInputField.tsx
index a7f0e250f7..08774043a4 100644
--- a/modules/preview-react/text-input/lib/hooks/useTextInputField.tsx
+++ b/modules/preview-react/text-input/lib/hooks/useTextInputField.tsx
@@ -3,6 +3,8 @@ import {useTextInputModel} from './useTextInputModel';
 
 /**
  * Adds the necessary props to a `Field` component. Used by the TextInput.Field subcomponent.
+ *
+ * @deprecated ⚠️ `useTextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
  */
 export const useTextInputField = createElemPropsHook(useTextInputModel)(() => {
   return {
diff --git a/modules/preview-react/text-input/lib/hooks/useTextInputModel.ts b/modules/preview-react/text-input/lib/hooks/useTextInputModel.ts
index 6204c2ebba..71b6ae682b 100644
--- a/modules/preview-react/text-input/lib/hooks/useTextInputModel.ts
+++ b/modules/preview-react/text-input/lib/hooks/useTextInputModel.ts
@@ -1,4 +1,6 @@
 import {useFormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
 
-/** @deprecated ⚠️ `useTextInputModel` is deprecated and will be removed in a future major version. Please use `useFormFieldModel` instead. */
+/**
+ * @deprecated ⚠️ `useTextInputModel` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ */
 export const useTextInputModel = useFormFieldModel;
diff --git a/modules/preview-react/text-input/spec/TextInput.spec.tsx b/modules/preview-react/text-input/spec/TextInput.spec.tsx
index 122aec4b70..0f0881bd3a 100644
--- a/modules/preview-react/text-input/spec/TextInput.spec.tsx
+++ b/modules/preview-react/text-input/spec/TextInput.spec.tsx
@@ -79,18 +79,6 @@ describe('Text Input', () => {
     });
   });
 
-  describe('when rendered as required', () => {
-    it('should add an asterisk to the label to indicate that it is required', () => {
-      const {getByText} = render(
-        <TextInput orientation="vertical" isRequired={true}>
-          <TextInput.Label>Test</TextInput.Label>
-        </TextInput>
-      );
-
-      expect(getByText('*')).toHaveAttribute('aria-hidden', 'true');
-    });
-  });
-
   describe('when rendered a hint id', () => {
     it('the input and hint text should have matching ids for accessibility', () => {
       const hintId = 'hintId';
@@ -127,7 +115,7 @@ describe('Text Input', () => {
   describe('when rendered with an error', () => {
     it('the input should have aria-invalid for accessibility', () => {
       const {container} = render(
-        <TextInput orientation="vertical" hasError={true}>
+        <TextInput orientation="vertical" error="error">
           <TextInput.Field />
         </TextInput>
       );
@@ -142,7 +130,7 @@ describe('Text Input', () => {
           <TextInput.Field />
         </TextInput>
       );
-      const uniqueId = container.querySelector('input').getAttribute('id');
+      const uniqueId = container.querySelector('input')!.getAttribute('id');
       expect(container.querySelector('input')).toHaveAttribute('id', uniqueId);
     });
   });
diff --git a/modules/preview-react/text-input/stories/TextInput.stories.mdx b/modules/preview-react/text-input/stories/TextInput.stories.mdx
index 6d9e71457e..38d26e029c 100644
--- a/modules/preview-react/text-input/stories/TextInput.stories.mdx
+++ b/modules/preview-react/text-input/stories/TextInput.stories.mdx
@@ -1,6 +1,7 @@
 import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import {Basic} from './examples/Basic';
 import {Disabled} from './examples/Disabled';
@@ -23,6 +24,14 @@ import {Alert} from './examples/Alert';
 
 # Canvas Kit Text Input
 
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
+
+`TextInput` in Preview has been deprecated and will be removed in a future major version. Please use
+[`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic)
+instead.
+
 Text Inputs allow users to enter words or characters without styling.
 
 [> Workday Design Reference](https://design.workday.com/components/inputs/text-input)
@@ -69,8 +78,9 @@ of the immutiblity.
 
 ### Hidden
 
-Set `TextInput.Field`'s `type` prop to
-`hidden` to completly hide a field while still submitting its value, often used for things like security tokens. Note: You will likely need to manually set`aria-describedby={undefined}`and`id={undefined}`
+Set `TextInput.Field`'s `type` prop to `hidden` to completly hide a field while still submitting its
+value, often used for things like security tokens. Note: You will likely need to manually
+set`aria-describedby={undefined}`and`id={undefined}`
 
 <ExampleCodeBlock code={Hidden} />
 
diff --git a/modules/preview-react/text-input/stories/examples/Error.tsx b/modules/preview-react/text-input/stories/examples/Error.tsx
index 8eab5cc2cb..30272f62b2 100644
--- a/modules/preview-react/text-input/stories/examples/Error.tsx
+++ b/modules/preview-react/text-input/stories/examples/Error.tsx
@@ -31,7 +31,7 @@ export const Error = () => {
   };
 
   return (
-    <TextInput hasError={hasError} orientation="vertical">
+    <TextInput error={hasError ? 'error' : undefined} orientation="vertical">
       <TextInput.Label>A three letter word</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
       <TextInput.Hint paddingTop={space.xxs}>{hint}</TextInput.Hint>
diff --git a/modules/preview-react/text-input/stories/examples/ThemedError.tsx b/modules/preview-react/text-input/stories/examples/ThemedError.tsx
index 57cb16a578..cde446b5b5 100644
--- a/modules/preview-react/text-input/stories/examples/ThemedError.tsx
+++ b/modules/preview-react/text-input/stories/examples/ThemedError.tsx
@@ -25,7 +25,7 @@ export const ThemedError = () => {
 
   return (
     <CanvasProvider theme={theme}>
-      <TextInput hasError={!value} isRequired={true} orientation="vertical">
+      <TextInput error={!value ? 'error' : undefined} isRequired={true} orientation="vertical">
         <TextInput.Label>Email</TextInput.Label>
         <TextInput.Field onChange={handleChange} value={value} />
         <TextInput.Hint paddingTop={space.xxs}>{!value && 'Please enter an email.'}</TextInput.Hint>
diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json
index 93f7685132..6327c5f8ee 100644
--- a/modules/react-fonts/package.json
+++ b/modules/react-fonts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react-fonts",
-  "version": "10.3.60",
+  "version": "11.1.10",
   "description": "Fonts for canvas-kit-react",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
index 446b9881f4..47289a1600 100644
--- a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
+++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
@@ -1,9 +1,8 @@
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
-import {FilterListWithLiveStatus} from './examples/common/FilterListWithLiveStatus';
-import {VisibleLiveRegion} from './examples/common/VisibleLiveRegion';
-import {HiddenLiveRegion} from './examples/common/HiddenLiveRegion';
-import {TextInputWithLiveError} from './examples/common/TextInputWithLiveError';
-import {IconButtonsWithLiveBadges} from './examples/common/IconButtonsWithLiveBadges';
+import {FilterListWithLiveStatus} from './examples/AriaLiveRegions/FilterListWithLiveStatus';
+import {VisibleLiveRegion} from './examples/AriaLiveRegions/VisibleLiveRegion';
+import {HiddenLiveRegion} from './examples/AriaLiveRegions/HiddenLiveRegion';
+import {TextInputWithLiveError} from './examples/AriaLiveRegions/TextInputWithLiveError';
 
 <Meta title="Examples/AriaLiveRegion" component={AriaLiveRegion} />
 
@@ -57,7 +56,7 @@ experience when moving the keyboard focus to a new element on screen isn't feasi
 
 In this example, a live region is applied to a short UI text describing the number of items shown in
 the list. As you type characters into the input, listen for the screen reader to automatically
-describe how many items in the list or shown.
+describe how many items in the list are shown.
 
 <ExampleCodeBlock code={FilterListWithLiveStatus} />
 
@@ -73,4 +72,9 @@ of error conditions. As forms increase in complexity, live regions on each error
 increasingly distracting and disruptive to the experience, especially if users are trying to first
 understand the information that is required of them to complete the task.
 
+**Note:** The `<AriaLiveRegion>` component is used inside of the `Hint` to ensure the live
+region remains in the browser DOM at all times. The `Hint` is only rendered in the DOM when it
+contains content, so it will not work reliably as a live region for screen readers using the
+`as={AriaLiveRegion}` prop.
+
 <ExampleCodeBlock code={TextInputWithLiveError} />
diff --git a/modules/preview-react/_examples/stories/TablesAdvanced.stories.mdx b/modules/react/_examples/stories/TablesAdvanced.stories.mdx
similarity index 98%
rename from modules/preview-react/_examples/stories/TablesAdvanced.stories.mdx
rename to modules/react/_examples/stories/TablesAdvanced.stories.mdx
index b6da0f922a..ff035c094e 100644
--- a/modules/preview-react/_examples/stories/TablesAdvanced.stories.mdx
+++ b/modules/react/_examples/stories/TablesAdvanced.stories.mdx
@@ -1,4 +1,4 @@
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 
 import {SelectableRows} from './examples/Table/WithSelectableRows';
 import {ExpandableRows} from './examples/Table/WithExpandableRows';
diff --git a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx b/modules/react/_examples/stories/examples/AriaLiveRegions/FilterListWithLiveStatus.tsx
similarity index 70%
rename from modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
rename to modules/react/_examples/stories/examples/AriaLiveRegions/FilterListWithLiveStatus.tsx
index 2568bfdf48..1961a83348 100644
--- a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
+++ b/modules/react/_examples/stories/examples/AriaLiveRegions/FilterListWithLiveStatus.tsx
@@ -1,10 +1,12 @@
 import React, {useState} from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {BodyText, Heading} from '@workday/canvas-kit-react/text';
+
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {system, base} from '@workday/canvas-tokens-web';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {createStyles, cssVar, px2rem} from '@workday/canvas-kit-styling';
 
 const fruits = [
   'Apples',
@@ -23,13 +25,19 @@ const liveRegionStyle = createStyles({
   padding: system.space.x2,
 });
 
-const listStyles = {paddingLeft: '0px'};
+const listStyles = createStyles({
+  paddingLeft: system.space.zero,
+});
 
 const listItemStyles = createStyles({
   listStyle: 'none',
   paddingLeft: system.space.zero,
 });
 
+const flexStyles = createStyles({
+  gap: system.space.x4,
+});
+
 let filteredFruits = fruits;
 
 export const FilterListWithLiveStatus = () => {
@@ -41,7 +49,7 @@ export const FilterListWithLiveStatus = () => {
 
   return (
     <>
-      <Flex gap="1rem">
+      <Flex cs={flexStyles}>
         <Heading size="small">Fruits</Heading>
         <AriaLiveRegion>
           <BodyText size="small" cs={liveRegionStyle}>
@@ -49,11 +57,11 @@ export const FilterListWithLiveStatus = () => {
           </BodyText>
         </AriaLiveRegion>
       </Flex>
-      <TextInput orientation="vertical">
-        <TextInput.Label>Filter Items:</TextInput.Label>
-        <TextInput.Field value={filter} onChange={handleFilter} />
-      </TextInput>
-      <ul style={listStyles}>
+      <FormField>
+        <FormField.Label>Filter Items:</FormField.Label>
+        <FormField.Input as={TextInput} value={filter} onChange={handleFilter} />
+      </FormField>
+      <ul className={listStyles}>
         {filteredFruits.map(i => (
           <BodyText size="small" as="li" cs={listItemStyles} key={i}>
             {i}
diff --git a/modules/react/_examples/stories/examples/AriaLiveRegions/HiddenLiveRegion.tsx b/modules/react/_examples/stories/examples/AriaLiveRegions/HiddenLiveRegion.tsx
new file mode 100644
index 0000000000..60bffad5fd
--- /dev/null
+++ b/modules/react/_examples/stories/examples/AriaLiveRegions/HiddenLiveRegion.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+let liveRegionStr = '';
+
+const flexStyles = createStyles({
+  gap: system.space.x4,
+  alignItems: 'center',
+});
+
+export const HiddenLiveRegion = () => {
+  const [message, setMessage] = React.useState('');
+
+  function handleChange(e) {
+    setMessage(e.target.value);
+  }
+
+  function handleSendMessage(e) {
+    e.preventDefault();
+    liveRegionStr = message;
+    setMessage('');
+  }
+
+  return (
+    <>
+      <Flex as="form" aria-label="Hidden Live Region" onSubmit={handleSendMessage} cs={flexStyles}>
+        <FormField>
+          <FormField.Label>Type your message:</FormField.Label>
+          <FormField.Input as={TextInput} onChange={handleChange} value={message} />
+        </FormField>
+        <PrimaryButton type="submit">Send Message</PrimaryButton>
+      </Flex>
+      <AriaLiveRegion>
+        <Text as={AccessibleHide}>{liveRegionStr}</Text>
+      </AriaLiveRegion>
+    </>
+  );
+};
diff --git a/modules/react/_examples/stories/examples/AriaLiveRegions/TextInputWithLiveError.tsx b/modules/react/_examples/stories/examples/AriaLiveRegions/TextInputWithLiveError.tsx
new file mode 100644
index 0000000000..7b1e41e3f1
--- /dev/null
+++ b/modules/react/_examples/stories/examples/AriaLiveRegions/TextInputWithLiveError.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const hintStyles = createStyles({
+  height: system.space.x6,
+});
+export const TextInputWithLiveError = () => {
+  const errMsg = 'Error: First name is required.';
+  const [hasError, setHasError] = React.useState('no');
+  const inputRef = React.useRef(null);
+  const handleBlur = e => setHasError(e.target.value.trim().length === 0 ? 'error' : 'no');
+  const handleSubmit = () => hasError && changeFocus(inputRef.current);
+
+  return (
+    <>
+      <FormField error={hasError === 'error' ? 'error' : undefined} isRequired={true}>
+        <FormField.Label>First Name:</FormField.Label>
+        <FormField.Input as={TextInput} onBlur={handleBlur} ref={inputRef} />
+        <FormField.Hint cs={hintStyles}>
+          <AriaLiveRegion>{hasError === 'error' && errMsg}</AriaLiveRegion>
+        </FormField.Hint>
+      </FormField>
+      <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
+    </>
+  );
+};
diff --git a/modules/react/_examples/stories/examples/AriaLiveRegions/VisibleLiveRegion.tsx b/modules/react/_examples/stories/examples/AriaLiveRegions/VisibleLiveRegion.tsx
new file mode 100644
index 0000000000..56af4e08ec
--- /dev/null
+++ b/modules/react/_examples/stories/examples/AriaLiveRegions/VisibleLiveRegion.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {system, base} from '@workday/canvas-tokens-web';
+import {createStyles, px2rem, calc} from '@workday/canvas-kit-styling';
+
+const liveRegionStyle = createStyles({
+  border: `${px2rem(1)} solid ${system.color.border.caution.default}`,
+  backgroundColor: system.color.bg.caution.default,
+  padding: system.space.x4,
+  display: 'block',
+  marginBlockStart: system.space.x4,
+  marginBlockEnd: system.space.x4,
+  width: calc.multiply(system.space.x16, 7),
+});
+
+const flexGapStyles = createStyles({
+  gap: system.space.x4,
+  alignItems: 'center',
+});
+
+let liveRegionStr = 'This is an ARIA Live Region!';
+
+export const VisibleLiveRegion = () => {
+  const [message, setMessage] = React.useState('');
+
+  function handleChange(e) {
+    setMessage(e.target.value);
+  }
+
+  function handleSendMessage(e) {
+    e.preventDefault();
+    liveRegionStr = message;
+    setMessage('');
+  }
+
+  return (
+    <>
+      <AriaLiveRegion>
+        <Text cs={liveRegionStyle}>{liveRegionStr}</Text>
+      </AriaLiveRegion>
+      <Flex
+        as="form"
+        aria-label="Visible Live Region"
+        onSubmit={handleSendMessage}
+        cs={flexGapStyles}
+      >
+        <FormField>
+          <FormField.Label>Type your message:</FormField.Label>
+          <FormField.Input as={TextInput} onChange={handleChange} value={message} />
+        </FormField>
+        <PrimaryButton type="submit">Send Message</PrimaryButton>
+      </Flex>
+    </>
+  );
+};
diff --git a/modules/preview-react/_examples/stories/examples/Table/WithExpandableRows.tsx b/modules/react/_examples/stories/examples/Table/WithExpandableRows.tsx
similarity index 98%
rename from modules/preview-react/_examples/stories/examples/Table/WithExpandableRows.tsx
rename to modules/react/_examples/stories/examples/Table/WithExpandableRows.tsx
index 35afd8481e..4b41d3e6c5 100644
--- a/modules/preview-react/_examples/stories/examples/Table/WithExpandableRows.tsx
+++ b/modules/react/_examples/stories/examples/Table/WithExpandableRows.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {createComponent, generateUniqueId} from '@workday/canvas-kit-react/common';
 import {Heading, Subtext} from '@workday/canvas-kit-react/text';
diff --git a/modules/preview-react/_examples/stories/examples/Table/WithSelectableRows.tsx b/modules/react/_examples/stories/examples/Table/WithSelectableRows.tsx
similarity index 98%
rename from modules/preview-react/_examples/stories/examples/Table/WithSelectableRows.tsx
rename to modules/react/_examples/stories/examples/Table/WithSelectableRows.tsx
index 85435f52de..a22dfa884a 100644
--- a/modules/preview-react/_examples/stories/examples/Table/WithSelectableRows.tsx
+++ b/modules/react/_examples/stories/examples/Table/WithSelectableRows.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {createComponent, generateUniqueId} from '@workday/canvas-kit-react/common';
diff --git a/modules/preview-react/_examples/stories/examples/Table/WithSortableColumnHeaders.tsx b/modules/react/_examples/stories/examples/Table/WithSortableColumnHeaders.tsx
similarity index 99%
rename from modules/preview-react/_examples/stories/examples/Table/WithSortableColumnHeaders.tsx
rename to modules/react/_examples/stories/examples/Table/WithSortableColumnHeaders.tsx
index 76d118939f..0b74d8b5c6 100644
--- a/modules/preview-react/_examples/stories/examples/Table/WithSortableColumnHeaders.tsx
+++ b/modules/react/_examples/stories/examples/Table/WithSortableColumnHeaders.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Text} from '@workday/canvas-kit-react/text';
diff --git a/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx b/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx
deleted file mode 100644
index 355a621546..0000000000
--- a/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {AriaLiveRegion, AccessibleHide} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {system} from '@workday/canvas-tokens-web';
-
-export const HiddenLiveRegion = () => {
-  const [message, setMessage] = useState('This is an ARIA Live Region!');
-  const inputRef = useRef();
-  function handleSendMessage() {
-    setMessage(inputRef.current.value);
-    inputRef.current.value = '';
-  }
-
-  return (
-    <>
-      <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <TextInput orientation="vertical">
-          <TextInput.Label>Type your message:</TextInput.Label>
-          <TextInput.Field ref={inputRef} />
-        </TextInput>
-        <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
-      </Flex>
-      <AriaLiveRegion>
-        <AccessibleHide>{message}</AccessibleHide>
-      </AriaLiveRegion>
-    </>
-  );
-};
diff --git a/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx b/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
deleted file mode 100644
index 4f326d7660..0000000000
--- a/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, {useState} from 'react';
-import {AccessibleHide, AriaLiveRegion, useUniqueId} from '@workday/canvas-kit-react/common';
-import {notificationsIcon, inboxIcon, assistantIcon} from '@workday/canvas-system-icons-web';
-import {space} from '@workday/canvas-kit-react/tokens';
-import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {CountBadge} from '@workday/canvas-kit-react/badge';
-
-const MyTasksLiveBadge = ({cnt}) => {
-  // use tooltip to assign name,
-  // use AriaLiveRegion inside button,
-  // assign name to live region referencing the button,
-  // use BadgeCount inside live region,
-  // use AccessibleHide to create invisible word "new" after badge
-  // use aria-describedby on button, referencing live region container to set description
-  // Safari + VO => not working at all
-  // JAWS 2024 + Chrome / Edge => works as expected :)
-  // NVDA + Chrome / Edge => works as expected :)
-  // Firefox => isn't announcing description on focus, only announces "X New" live (missing button name)
-  const badgeID = useUniqueId();
-  const myTasksID = useUniqueId();
-
-  return (
-    <Tooltip title="My Tasks">
-      <TertiaryButton icon={inboxIcon} id={myTasksID} aria-describedby={badgeID}>
-        <AriaLiveRegion id={badgeID} aria-labelledby={myTasksID}>
-          <CountBadge count={cnt} />
-          <AccessibleHide>New</AccessibleHide>
-        </AriaLiveRegion>
-      </TertiaryButton>
-    </Tooltip>
-  );
-};
-
-// use AriaLiveRegion around the button,
-// use Tooltip to assign the name of the button,
-// make sure Tooltip title string includes count value
-// Chrome + VO => Announces name "notifications X new" and innerText 'X'
-// Safari + VO => Works as expected :)
-// JAWS 2024 => Announces full button name twice (previous state, then new state)
-// JAWS 2024 + Firefox => Works as expected :)
-// NVDA (All Browsers) => Atomic property isn't working, only announcing number change, announces twice
-const NotificationsLiveBadge = ({cnt}) => (
-  <AriaLiveRegion>
-    <Tooltip title={`Notifications ${cnt} new`}>
-      <TertiaryButton icon={notificationsIcon}>
-        <CountBadge count={cnt} />
-      </TertiaryButton>
-    </Tooltip>
-  </AriaLiveRegion>
-);
-
-const AssistantLiveBadge = ({cnt}) => {
-  // use AriaLiveRegion around the button
-  // use muted type Tooltip (avoid using aria-label to name button)
-  // use AccessibleHide inside of button to compose name
-  // Chrome + VO => announces twice
-  // Safari + VO => works as expected :)
-  const lbl = 'Workday Assistant';
-
-  return (
-    <AriaLiveRegion>
-      <Tooltip title={lbl} type="muted">
-        <TertiaryButton icon={assistantIcon}>
-          <AccessibleHide>{lbl}</AccessibleHide>
-          <CountBadge count={cnt} />
-          <AccessibleHide>New</AccessibleHide>
-        </TertiaryButton>
-      </Tooltip>
-    </AriaLiveRegion>
-  );
-};
-
-export const IconButtonsWithLiveBadges = () => {
-  const [counter, setCounter] = useState(0);
-  const [notifications, setNotifications] = useState(0);
-  const [assistant, setAssistant] = useState(0);
-
-  const handleAddTask = () => setCounter(prev => prev + 1);
-  const handleAddNotification = () => setNotifications(prev => prev + 1);
-  const handleAssistant = () => setAssistant(prev => prev + 1);
-
-  return (
-    <>
-      <Flex padding={space.s} gap={space.s} as="header">
-        <AssistantLiveBadge cnt={assistant} />
-        <NotificationsLiveBadge cnt={notifications} />
-        <MyTasksLiveBadge cnt={counter} />
-      </Flex>
-      <Flex padding={space.s} gap={space.s} as="main">
-        <SecondaryButton onClick={handleAssistant}>Add a Message</SecondaryButton>
-        <SecondaryButton onClick={handleAddNotification}>Add a Notification</SecondaryButton>
-        <SecondaryButton onClick={handleAddTask}>Add an item to My Tasks</SecondaryButton>
-      </Flex>
-    </>
-  );
-};
diff --git a/modules/react/_examples/stories/examples/common/TextInputWithLiveError.tsx b/modules/react/_examples/stories/examples/common/TextInputWithLiveError.tsx
deleted file mode 100644
index fb50e44385..0000000000
--- a/modules/react/_examples/stories/examples/common/TextInputWithLiveError.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-
-export const TextInputWithLiveError = () => {
-  const errMsg = 'Error: First name is required.';
-  const [hasError, setHasError] = useState(false);
-  const inputRef = useRef();
-  const handleBlur = e => setHasError(e.target.value.trim().length === 0);
-  const handleSubmit = () => hasError && changeFocus(inputRef.current);
-
-  return (
-    <>
-      <TextInput orientation="vertical" hasError={hasError} isRequired={true}>
-        <TextInput.Label>First Name:</TextInput.Label>
-        <TextInput.Field onBlur={handleBlur} ref={inputRef} />
-        <TextInput.Hint height={'16px'}>
-          <AriaLiveRegion>{hasError && errMsg}</AriaLiveRegion>
-        </TextInput.Hint>
-      </TextInput>
-      <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
-    </>
-  );
-};
diff --git a/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx b/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx
deleted file mode 100644
index 0ec7bee9f5..0000000000
--- a/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
-import {system, base} from '@workday/canvas-tokens-web';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-
-const liveRegionStyle = createStyles({
-  border: `${px2rem(1)} solid ${base.cantaloupe400}`,
-  backgroundColor: base.cantaloupe100,
-  padding: system.space.x4,
-  display: 'block',
-  margin: system.space.x4 + ' 0',
-});
-
-export const VisibleLiveRegion = () => {
-  const [message, setMessage] = useState('This is an ARIA Live Region!');
-  const inputRef = useRef();
-  function handleSendMessage() {
-    setMessage(inputRef.current.value);
-    inputRef.current.value = '';
-  }
-
-  return (
-    <>
-      <AriaLiveRegion>
-        <Text cs={liveRegionStyle}>{message}</Text>
-      </AriaLiveRegion>
-      <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <TextInput orientation="vertical">
-          <TextInput.Label>Type your message:</TextInput.Label>
-          <TextInput.Field ref={inputRef} />
-        </TextInput>
-        <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
-      </Flex>
-    </>
-  );
-};
diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index c6d2e1d093..5988f251b5 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
-import {styled, focusRing, hideMouseFocus} from '@workday/canvas-kit-react/common';
+import {styled, focusRing, hideMouseFocus, filterOutProps} from '@workday/canvas-kit-react/common';
 import isPropValid from '@emotion/is-prop-valid';
 import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
 import {SystemIconCircle, SystemIconCircleSize} from '@workday/canvas-kit-react/icon';
@@ -106,7 +106,9 @@ const StyledStack = styled('span')<Pick<AvatarProps, 'size'>>(
   })
 );
 
-const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
+const StyledIcon = styled(SystemIconCircle, {
+  shouldForwardProp: filterOutProps(['isImageLoaded']),
+})<{isImageLoaded: boolean}>(
   {
     transition: fadeTransition,
   },
@@ -115,7 +117,9 @@ const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
   })
 );
 
-const StyledImage = styled('img')<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
+const StyledImage = styled('img', {
+  shouldForwardProp: filterOutProps(['isLoaded', 'objectFit']),
+})<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
   {
     width: '100%',
     height: '100%',
diff --git a/modules/react/badge/lib/CountBadge.tsx b/modules/react/badge/lib/CountBadge.tsx
index 71b059d85b..b9aabcdfa4 100644
--- a/modules/react/badge/lib/CountBadge.tsx
+++ b/modules/react/badge/lib/CountBadge.tsx
@@ -1,66 +1,81 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/react';
-import styled from '@emotion/styled';
-import {borderRadius, colors, fontFamily} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {handleCsProp, CSProps, createStencil, px2rem, keyframes} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-export interface CountBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  count?: number;
-  limit?: number;
-  variant?: 'default' | 'inverse';
-}
-
-const variants = {
-  default: {
-    background: colors.cinnamon500,
-    color: colors.frenchVanilla100,
-    textShadow: '0 0 1px rgba(0,0,0, 0.35)',
+const grow = keyframes({
+  from: {
+    transform: 'scale(0.85)',
   },
-  inverse: {
-    background: colors.frenchVanilla100,
-    boxShadow: '0 1px 2px rgba(0,0,0, 0.25)',
-    color: colors.blueberry400,
+  to: {
+    transform: 'scale(1.0)',
   },
-};
-
-const grow = keyframes`
-  from {
-    transform: scale(0.85);
-  }
+});
 
-  to {
-    transform: scale(1.0);
-  }
-`;
+export interface CountBadgeProps extends CSProps {
+  /**
+   * Sets the count displayed in the badge
+   *
+   * @default 0
+   */
+  count?: number;
+  /**
+   * Sets the maximum count to display before formatting the number.
+   * E.g. Given a count of `100` and a limit of `100`, the badge would display `99+`.
+   *
+   * @default 1000
+   */
+  limit?: number;
+  /**
+   * Sets the variant of the Count Badge
+   */
+  variant?: 'inverse';
+}
 
-const Container = styled('span')<CountBadgeProps>(
-  {
+// .cnvs-count-badge
+const countBadgeStencil = createStencil({
+  base: {
     alignItems: 'center',
     animation: `${grow} 0.2s ease`,
-    borderRadius: borderRadius.circle,
-    boxSizing: 'border-box',
+    background: system.color.static.red.default,
+    borderRadius: system.shape.round,
+    color: system.color.text.inverse,
     display: 'inline-flex',
-    fontFamily,
-    fontSize: '12px',
-    fontWeight: 700,
-    height: '20px',
+    fontFamily: system.fontFamily.default,
+    fontSize: system.fontSize.subtext.medium,
+    fontWeight: system.fontWeight.bold,
+    height: px2rem(20),
     justifyContent: 'center',
-    lineHeight: '20px',
-    minWidth: '20px',
-    padding: '0 6.5px',
+    lineHeight: px2rem(20),
+    minWidth: px2rem(20),
+    padding: `0 ${px2rem(6.5)}`,
+    textShadow: `0 0 ${px2rem(1)} rgba(0,0,0, 0.35)`,
   },
-  ({variant = 'default'}) => ({
-    ...variants[variant],
-  })
-);
-
-export const CountBadge = (props: CountBadgeProps) => {
-  const {variant = 'default', count = 0, limit = 1000, ...elemProps} = props;
+  modifiers: {
+    variant: {
+      // .cnvs-count-badge--variant-inverse
+      inverse: {
+        background: system.color.bg.default,
+        boxShadow: `0 ${px2rem(1)} ${px2rem(2)} rgba(0,0,0, 0.25)`,
+        color: system.color.text.primary.default,
+        textShadow: 'none',
+      },
+    },
+  },
+});
 
-  const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
+/**
+ * `CountBadge` provides a quantity-based summary with dynamic values.
+ */
+export const CountBadge = createComponent('span')({
+  displayName: 'CountBadge',
+  Component: ({count = 0, limit = 1000, variant, ...elemProps}: CountBadgeProps, ref, Element) => {
+    const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
 
-  return (
-    <Container variant={variant} {...elemProps}>
-      {formattedCount}
-    </Container>
-  );
-};
+    return (
+      <Element ref={ref} {...handleCsProp(elemProps, [countBadgeStencil({variant})])}>
+        {formattedCount}
+      </Element>
+    );
+  },
+});
diff --git a/modules/react/badge/spec/CountBadge.spec.tsx b/modules/react/badge/spec/CountBadge.spec.tsx
index 1fdc37a023..3d53434b08 100644
--- a/modules/react/badge/spec/CountBadge.spec.tsx
+++ b/modules/react/badge/spec/CountBadge.spec.tsx
@@ -4,6 +4,8 @@ import {CountBadge, CountBadgeProps} from '../index';
 const context = describe;
 
 describe('CountBadge', () => {
+  verifyComponent(CountBadge, {});
+
   const renderCountBadge = (props = {} as Partial<CountBadgeProps>) => {
     return render(<CountBadge {...props} />);
   };
diff --git a/modules/react/badge/stories/CountBadge.stories.mdx b/modules/react/badge/stories/CountBadge.stories.mdx
new file mode 100644
index 0000000000..3684815382
--- /dev/null
+++ b/modules/react/badge/stories/CountBadge.stories.mdx
@@ -0,0 +1,70 @@
+import {SymbolDoc} from '@workday/canvas-kit-docs';
+
+import {CountBadge} from '@workday/canvas-kit-react/badge';
+
+import {Basic} from './examples/Basic';
+import {CustomLimit} from './examples/CustomLimit';
+import {NotificationBadge} from './examples/NotificationBadge';
+
+<Meta title="Components/Indicators/CountBadge" component={CountBadge} />
+
+# Canvas Kit Count Badge
+
+`CountBadge` provides a quantity-based summary with dynamic values.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+The following section provides examples for common use cases. Please be sure to also read the
+Accessibility section below.
+
+### Basic
+
+In the example below, we're rendering a basic `CountBadge` with its `default` and `inverse`
+variants. The `inverse` variant is intended for darker backgrounds to create more contrast.
+
+<ExampleCodeBlock code={Basic} />
+
+### Custom Limit
+
+By default, `CountBadge`'s limit is set to `1000`. Once the count reaches the limit, the badge will
+format the number: `1000` becomes `999+`. The default limit is largely arbitrary and intended to
+prevent unexpected overflow. You should choose a limit based on your specific use case and consider
+the user's experience. For example, someone looking for a new job finds there are `99+` new
+opportunities. Or perhaps someone returns from extended leave and is overwhelmed by `999+` unread
+messages on their first day back.
+
+<ExampleCodeBlock code={CustomLimit} />
+
+### Notification Badge
+
+Notifications are a major use case for `CountBadge`. When the `CountBadge` value is updated in
+real-time, screen readers must be supported with an `AriaLiveRegion` that will automatically
+describe the change in the number of notifications. If the web app only updates `CountBadge` as part
+of another screen update, then this use of `AriaLiveRegion` is unnecessary and not recommended.
+
+#### Notes on accessibility for the example below
+
+- `Tooltip` is set on the `SecondaryButton` automatically applying the `aria-label` to the button.
+- `aria-describedby` property is conditionally set on the `SecondaryButton` when greater than zero
+  referencing a unique `id` for the `CountBadge` value .
+- `AriaLiveRegion` is used around the `CountBadge`, enabling screen readers to monitor changes in
+  value.
+- `aria-label` string is conditionally set on `AriaLiveRegion` when greater than zero, describing
+  "New notification"
+
+<ExampleCodeBlock code={NotificationBadge} />
+
+### Custom Styles
+
+Count Badge supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
+## Component API
+
+<SymbolDoc name="CountBadge" fileName="/react/" />
diff --git a/modules/react/badge/stories/examples/Basic.tsx b/modules/react/badge/stories/examples/Basic.tsx
new file mode 100644
index 0000000000..3f010cb2fb
--- /dev/null
+++ b/modules/react/badge/stories/examples/Basic.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {CountBadge} from '@workday/canvas-kit-react/badge';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const defaultBackground = createStyles({
+  boxSizing: 'border-box',
+  backgroundColor: base.frenchVanilla100,
+  padding: system.space.x4,
+});
+
+const inverseBackground = createStyles({
+  boxSizing: 'border-box',
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+});
+
+export function Basic() {
+  return (
+    <div className={containerStyles}>
+      <div className={defaultBackground}>
+        <CountBadge count={427} />
+      </div>
+      <div className={inverseBackground}>
+        <CountBadge count={427} variant="inverse" />
+      </div>
+    </div>
+  );
+}
diff --git a/modules/react/badge/stories/examples/CustomLimit.tsx b/modules/react/badge/stories/examples/CustomLimit.tsx
new file mode 100644
index 0000000000..2af0d29021
--- /dev/null
+++ b/modules/react/badge/stories/examples/CustomLimit.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import {CountBadge} from '@workday/canvas-kit-react/badge';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+
+import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const columnStyles = createStyles({
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.space.x4,
+});
+
+const controls = createStyles({
+  boxSizing: 'border-box',
+  borderBottom: `solid 1px ${cssVar(base.soap400)}`,
+  display: 'flex',
+  gap: system.space.x1,
+  padding: system.space.x1,
+});
+
+const defaultBackground = createStyles({
+  boxSizing: 'border-box',
+  backgroundColor: base.frenchVanilla100,
+  padding: system.space.x4,
+});
+
+const inverseBackground = createStyles({
+  boxSizing: 'border-box',
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+});
+
+const initialCount = 1;
+
+export function CustomLimit() {
+  const [count, setCount] = React.useState(initialCount);
+
+  return (
+    <div className={columnStyles}>
+      <div className={controls}>
+        <TertiaryButton size="small" onClick={() => setCount(count + 1)}>
+          Increment
+        </TertiaryButton>
+        <TertiaryButton size="small" onClick={() => setCount(initialCount)}>
+          Reset
+        </TertiaryButton>
+      </div>
+      <div className={defaultBackground}>
+        <CountBadge count={count} limit={10} />
+      </div>
+      <div className={inverseBackground}>
+        <CountBadge count={count} limit={10} variant="inverse" />
+      </div>
+    </div>
+  );
+}
diff --git a/modules/react/badge/stories/examples/NotificationBadge.tsx b/modules/react/badge/stories/examples/NotificationBadge.tsx
new file mode 100644
index 0000000000..a5135d1a92
--- /dev/null
+++ b/modules/react/badge/stories/examples/NotificationBadge.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import {CountBadge} from '@workday/canvas-kit-react/badge';
+import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {AriaLiveRegion, useUniqueId} from '@workday/canvas-kit-react/common';
+import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {notificationsIcon} from '@workday/canvas-system-icons-web';
+import {base, system} from '@workday/canvas-tokens-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+function negate(value: string, fallback?: string) {
+  return `calc(${cssVar(value, fallback)} * -1)`;
+}
+
+const container = createStyles({
+  boxSizing: 'border-box',
+  flexDirection: 'column',
+  gap: system.space.x4,
+});
+
+const controls = createStyles({
+  boxSizing: 'border-box',
+  gap: system.space.x2,
+  padding: system.space.x1,
+});
+
+const notificationContainerStyles = createStyles({
+  boxSizing: 'border-box',
+  position: 'relative',
+});
+
+const countBadgeStyles = createStyles({
+  boxSizing: 'border-box',
+  position: 'absolute',
+  top: negate(system.space.x1),
+  insetInlineEnd: negate(system.space.x1),
+});
+
+// Testing notes (Aug. 30, 2024):
+// Windows 11
+// JAWS 2024 + Chrome / Edge: "New notifications" once, then only the count change "2"
+// JAWS 2024 + FF: "New notifications" once, then describes nothing
+// NVDA + Chrome / Edge: Consistently describes "{X} New notifications"
+// NVDA + FF: Consistently describes count value only "{X}"
+// macOS v14.6.1
+// VoiceOver + Chrome / Safari: Consistently describes "New notifications {X}"
+export function NotificationBadge() {
+  const [count, setCount] = React.useState(4);
+  const badgeID = useUniqueId();
+
+  return (
+    <Flex cs={container}>
+      <Flex cs={controls}>
+        <TertiaryButton size="small" onClick={() => setCount(count + 1)}>
+          Add Notification
+        </TertiaryButton>
+        <TertiaryButton size="small" onClick={() => setCount(0)}>
+          Clear
+        </TertiaryButton>
+      </Flex>
+      <Flex>
+        <span className={notificationContainerStyles}>
+          <Tooltip title="Notifications">
+            <SecondaryButton
+              size="medium"
+              icon={notificationsIcon}
+              aria-describedby={!!count ? badgeID : undefined}
+            />
+          </Tooltip>
+          <AriaLiveRegion aria-label={!!count ? 'New notifications' : undefined}>
+            {!!count && <CountBadge id={badgeID} count={count} limit={100} cs={countBadgeStyles} />}
+          </AriaLiveRegion>
+        </span>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/modules/react/badge/stories/stories.tsx b/modules/react/badge/stories/stories.tsx
deleted file mode 100644
index 220beb90ca..0000000000
--- a/modules/react/badge/stories/stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-
-import {CountBadge} from '../index';
-
-export default {
-  title: 'Components/Indicators/Badge',
-  component: CountBadge,
-  parameters: {ReadmePath: 'react/badge'},
-  argTypes: {
-    count: {
-      control: {type: 'number'},
-    },
-    limit: {
-      control: {type: 'number'},
-    },
-    variant: {
-      options: ['default', 'inverse'],
-      control: {type: 'select'},
-    },
-  },
-};
-
-const Template = props => <CountBadge count={1} {...props} />;
-
-export const Default = Template.bind({});
-(Default as any).args = {
-  count: 1,
-};
-
-export const Inverse = Template.bind({});
-(Inverse as any).args = {
-  count: 1,
-  variant: 'inverse',
-};
-
-export const CustomLimit = Template.bind({});
-(CustomLimit as any).args = {
-  count: 100,
-  limit: 100,
-};
diff --git a/modules/react/breadcrumbs/lib/BreadcrumbsItem.tsx b/modules/react/breadcrumbs/lib/BreadcrumbsItem.tsx
index 92f41b2615..8e9874a331 100644
--- a/modules/react/breadcrumbs/lib/BreadcrumbsItem.tsx
+++ b/modules/react/breadcrumbs/lib/BreadcrumbsItem.tsx
@@ -49,7 +49,7 @@ export const BreadcrumbsItem = createSubcomponent('li')({
         height={space.l}
         width={space.l}
         shouldMirror={useIsRTL()}
-        styles={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
+        cs={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
         aria-hidden
       />
     </Flex>
diff --git a/modules/react/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx b/modules/react/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx
index 6316cac931..a827eaed2c 100644
--- a/modules/react/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx
+++ b/modules/react/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx
@@ -50,7 +50,7 @@ export const BreadcrumbsOverflowButton = createSubcomponent('button')({
         height={space.l}
         width={space.l}
         shouldMirror={useIsRTL()}
-        styles={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
+        cs={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
         aria-hidden
       />
     </Flex>
diff --git a/modules/react/button/lib/BaseButton.tsx b/modules/react/button/lib/BaseButton.tsx
index 70d0aa3149..2f79c83570 100644
--- a/modules/react/button/lib/BaseButton.tsx
+++ b/modules/react/button/lib/BaseButton.tsx
@@ -4,12 +4,12 @@ import {ButtonLabelIcon} from '../lib/parts/ButtonLabelIcon';
 import {ButtonLabel} from '../lib/parts/ButtonLabel';
 
 import {createComponent, GrowthBehavior, focusRing} from '@workday/canvas-kit-react/common';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {createStyles, createVars, cssVar, createModifiers} from '@workday/canvas-kit-styling';
-import {SystemIconProps} from '@workday/canvas-kit-react/icon';
-import {base, brand, system} from '@workday/canvas-tokens-web';
+import {cssVar, createStencil, px2rem, createVars, calc} from '@workday/canvas-kit-styling';
+import {SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {brand, system} from '@workday/canvas-tokens-web';
 import {ButtonColors, ButtonSizes, IconPositions} from './types';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBehavior {
   /**
@@ -25,7 +25,7 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
   size?: ButtonSizes;
   /**
    * The icon of the Button.
-   * Note: not displayed at `small` size
+   * Note: Not displayed at `small` size
    */
   icon?: CanvasSystemIcon;
   /**
@@ -56,9 +56,9 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
 export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {}
 
 /**
- * Temporary css variables to be used across all Buttons.
+ * The purpose of this object is for the `colors` prop - to provide backwards compatibility with how we allowed color overrides in Emotion.
  */
-export const buttonVars = {
+export const buttonColorPropVars = {
   default: createVars(
     'background',
     'border',
@@ -69,7 +69,7 @@ export const buttonVars = {
     'opacity',
     'borderRadius'
   ),
-  hover: createVars(
+  focus: createVars(
     'background',
     'border',
     'boxShadowInner',
@@ -79,7 +79,7 @@ export const buttonVars = {
     'opacity',
     'borderRadius'
   ),
-  active: createVars(
+  hover: createVars(
     'background',
     'border',
     'boxShadowInner',
@@ -89,7 +89,7 @@ export const buttonVars = {
     'opacity',
     'borderRadius'
   ),
-  focus: createVars(
+  active: createVars(
     'background',
     'border',
     'boxShadowInner',
@@ -114,191 +114,266 @@ export const buttonVars = {
 /**
  * Base styles for Buttons.
  */
-const baseButtonStyles = createStyles({
-  fontFamily: '"Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif',
-  fontSize: '0.875rem',
-  lineHeight: 'normal',
-  letterSpacing: '0.015rem',
-  fontWeight: 'bold',
-  backgroundColor: cssVar(buttonVars.default.background, 'transparent'),
-  color: cssVar(buttonVars.default.label, base.blackPepper400),
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  gap: system.space.x2,
-  borderColor: cssVar(buttonVars.default.border, 'transparent'),
-  cursor: 'pointer',
-  display: 'inline-flex',
-  boxShadow: 'none',
-  alignItems: 'center',
-  justifyContent: 'center',
-  boxSizing: 'border-box',
-  outline: '2px transparent',
-  whiteSpace: 'nowrap',
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-  borderRadius: cssVar(buttonVars.default.borderRadius, system.shape.round),
-  position: 'relative',
-  verticalAlign: 'middle',
-  overflow: 'hidden',
-  transition:
-    'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
-  '&:disabled, &:disabled:active, &.disabled': {
-    cursor: 'default',
-    boxShadow: 'none',
-    opacity: cssVar(buttonVars.disabled.opacity, '1'),
-  },
-  '& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
-    transitionDuration: '40ms',
-    fill: cssVar(buttonVars.default.icon, base.blackPepper400),
-  },
-  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-    fill: cssVar(buttonVars.default.icon, base.blackPepper400),
+export const buttonStencil = createStencil({
+  vars: {
+    background: '',
+    border: '',
+    boxShadowInner: '',
+    boxShadowOuter: '',
+    label: '',
+    opacity: '',
+    borderRadius: '',
   },
-  '&:focus-visible, &.focus': {
-    backgroundColor: cssVar(buttonVars.focus.background, 'transparent'),
-    borderColor: cssVar(buttonVars.focus.border, 'transparent'),
-    color: cssVar(buttonVars.focus.label, base.blackPepper400),
-    '& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
-      fill: cssVar(buttonVars.focus.icon, base.blackPepper400),
+  base: ({background, border, boxShadowInner, boxShadowOuter, label, opacity, borderRadius}) => ({
+    // Default Styles
+    fontFamily: '"Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif',
+    fontSize: '0.875rem',
+    lineHeight: 'normal',
+    letterSpacing: '0.015rem',
+    fontWeight: system.fontWeight.bold,
+    backgroundColor: cssVar(
+      buttonColorPropVars.default.background,
+      cssVar(background, 'transparent')
+    ),
+    color: cssVar(buttonColorPropVars.default.label, cssVar(label, system.color.fg.strong)),
+    borderWidth: px2rem(1),
+    borderStyle: 'solid',
+    gap: system.space.x2,
+    borderColor: cssVar(buttonColorPropVars.default.border, cssVar(border, 'transparent')),
+    cursor: 'pointer',
+    display: 'inline-flex',
+    boxShadow: 'none',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    outline: `${px2rem(2)} transparent`,
+    whiteSpace: 'nowrap',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    borderRadius: cssVar(
+      buttonColorPropVars.default.borderRadius,
+      cssVar(borderRadius, system.shape.round)
+    ),
+    position: 'relative',
+    verticalAlign: 'middle',
+    overflow: 'hidden',
+    [systemIconStencil.vars.color]: cssVar(
+      buttonColorPropVars.default.icon,
+      system.color.fg.strong
+    ),
+    transition:
+      'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
+    '&:disabled, &:disabled:active, &.disabled': {
+      cursor: 'default',
+      boxShadow: 'none',
+      opacity: cssVar(buttonColorPropVars.default.opacity, cssVar(opacity, system.opacity.full)),
     },
-    ...focusRing({
-      width: 2,
-      separation: 2,
-      innerColor: cssVar(buttonVars.focus.boxShadowInner, base.frenchVanilla100),
-      outerColor: cssVar(buttonVars.focus.boxShadowOuter, brand.primary.base),
-    }),
-  },
-  '&:hover, &.hover': {
-    backgroundColor: cssVar(buttonVars.hover.background, base.blackPepper500),
-    borderColor: cssVar(buttonVars.hover.border, 'transparent'),
-    color: cssVar(buttonVars.hover.label, base.blackPepper500),
-    '& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
-      fill: cssVar(buttonVars.hover.icon, base.blackPepper500),
+    // Focus Styles
+    '&:focus-visible, &.focus': {
+      backgroundColor: cssVar(
+        buttonColorPropVars.focus.background,
+        cssVar(background, 'transparent')
+      ),
+      borderColor: cssVar(buttonColorPropVars.focus.border, cssVar(border, 'transparent')),
+      color: cssVar(buttonColorPropVars.focus.label, cssVar(label, system.color.fg.strong)),
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.focus.icon,
+        system.color.fg.strong
+      ),
+      ...focusRing({
+        width: 2,
+        separation: 2,
+        innerColor: cssVar(
+          buttonColorPropVars.focus.boxShadowInner,
+          cssVar(boxShadowInner, system.color.border.inverse)
+        ),
+        outerColor: cssVar(
+          buttonColorPropVars.focus.boxShadowOuter,
+          cssVar(boxShadowOuter, brand.primary.base)
+        ),
+      }),
     },
-  },
-  '&:hover:active': {transitionDuration: '40ms'},
-  '&:active, &.active': {
-    backgroundColor: cssVar(buttonVars.active.background, 'transparent'),
-    borderColor: cssVar(buttonVars.active.border, 'transparent'),
-    color: cssVar(buttonVars.active.label, base.blackPepper400),
-    '& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
-      fill: cssVar(buttonVars.active.icon, base.blackPepper400),
+    // Hover Styles
+    '&:hover, &.hover': {
+      backgroundColor: cssVar(
+        buttonColorPropVars.hover.background,
+        cssVar(background, system.color.bg.contrast.strong)
+      ),
+      borderColor: cssVar(buttonColorPropVars.hover.border, cssVar(border, 'transparent')),
+      color: cssVar(buttonColorPropVars.hover.label, cssVar(label, system.color.fg.stronger)),
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.hover.icon,
+        system.color.fg.stronger
+      ),
     },
-  },
-  '&:disabled, &.disabled': {
-    backgroundColor: cssVar(buttonVars.disabled.background, 'transparent'),
-    borderColor: cssVar(buttonVars.disabled.border, 'transparent'),
-    color: cssVar(buttonVars.disabled.label, base.blackPepper400),
-    '& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
-      fill: cssVar(buttonVars.disabled.icon, base.blackPepper400),
+    '&:hover:active': {transitionDuration: '40ms'},
+    // Active Styles
+    '&:active, &.active': {
+      backgroundColor: cssVar(
+        buttonColorPropVars.active.background,
+        cssVar(background, 'transparent')
+      ),
+      borderColor: cssVar(buttonColorPropVars.active.border, cssVar(border, 'transparent')),
+      color: cssVar(buttonColorPropVars.active.label, cssVar(label, system.color.fg.strong)),
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.active.icon,
+        system.color.fg.strong
+      ),
+    },
+    // Disabled Styles
+    '&:disabled, &.disabled': {
+      backgroundColor: cssVar(
+        buttonColorPropVars.disabled.background,
+        cssVar(background, 'transparent')
+      ),
+      borderColor: cssVar(buttonColorPropVars.disabled.border, cssVar(border, 'transparent')),
+      color: cssVar(buttonColorPropVars.disabled.label, cssVar(label, system.color.fg.strong)),
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.disabled.icon,
+        system.color.fg.strong
+      ),
+    },
+  }),
+  modifiers: {
+    /**
+     * Button modifiers that will overwrite the base styles of Buttons.
+     * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
+     * - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
+     * within a button or if there is only an icon and no text.
+     */
+    size: {
+      large: {
+        ...system.type.body.small,
+        fontWeight: system.fontWeight.bold,
+        height: px2rem(48),
+        paddingInline: system.space.x8,
+        minWidth: px2rem(112),
+      },
+      medium: {
+        ...system.type.subtext.large,
+        fontWeight: system.fontWeight.bold,
+        minWidth: px2rem(96),
+        paddingInline: system.space.x6,
+        height: system.space.x10,
+      },
+      small: {
+        ...system.type.subtext.large,
+        fontWeight: system.fontWeight.bold,
+        height: system.space.x8,
+        minWidth: system.space.x20,
+        paddingInline: system.space.x4,
+        gap: system.space.x1,
+      },
+      extraSmall: {
+        ...system.type.subtext.medium,
+        fontWeight: system.fontWeight.bold,
+        height: system.space.x6,
+        minWidth: 'auto',
+        paddingInline: system.space.x3,
+        gap: system.space.x1,
+      },
+    },
+    grow: {
+      true: {
+        width: '100%',
+        maxWidth: '100%',
+      },
+    },
+    // IconPosition Styles
+    iconPosition: {
+      only: {padding: system.space.zero},
+      start: {},
+      end: {},
     },
   },
+  // Compound Modifier Styles
+  compound: [
+    {
+      modifiers: {size: 'large', iconPosition: 'only'},
+      styles: {
+        minWidth: calc.multiply(system.space.x4, 3),
+      },
+    },
+    {
+      modifiers: {size: 'large', iconPosition: 'start'},
+      styles: {
+        paddingInlineStart: system.space.x6,
+        paddingInlineEnd: system.space.x8,
+      },
+    },
+    {
+      modifiers: {size: 'large', iconPosition: 'end'},
+      styles: {
+        paddingInlineStart: system.space.x8,
+        paddingInlineEnd: system.space.x6,
+      },
+    },
+    {
+      modifiers: {size: 'medium', iconPosition: 'only'},
+      styles: {
+        minWidth: system.space.x10,
+      },
+    },
+    {
+      modifiers: {size: 'medium', iconPosition: 'start'},
+      styles: {
+        paddingInlineStart: calc.multiply(system.space.x1, 5),
+        paddingInlineEnd: system.space.x6,
+      },
+    },
+    {
+      modifiers: {size: 'medium', iconPosition: 'end'},
+      styles: {
+        paddingInlineStart: system.space.x6,
+        paddingInlineEnd: calc.multiply(system.space.x1, 5),
+      },
+    },
+    {
+      modifiers: {size: 'small', iconPosition: 'only'},
+      styles: {
+        minWidth: system.space.x8,
+      },
+    },
+    {
+      modifiers: {size: 'small', iconPosition: 'start'},
+      styles: {
+        paddingInlineStart: system.space.x3,
+        paddingInlineEnd: system.space.x4,
+      },
+    },
+    {
+      modifiers: {size: 'small', iconPosition: 'end'},
+      styles: {
+        paddingInlineStart: system.space.x4,
+        paddingInlineEnd: system.space.x3,
+      },
+    },
+    {
+      modifiers: {size: 'extraSmall', iconPosition: 'only'},
+      styles: {
+        minWidth: system.space.x6,
+      },
+    },
+    {
+      modifiers: {size: 'extraSmall', iconPosition: 'start'},
+      styles: {
+        paddingInlineStart: system.space.x2,
+        paddingInlineEnd: system.space.x3,
+      },
+    },
+    {
+      modifiers: {size: 'extraSmall', iconPosition: 'end'},
+      styles: {
+        paddingInlineStart: system.space.x3,
+        paddingInlineEnd: system.space.x2,
+      },
+    },
+  ],
 });
 
 /**
- * Button modifiers that will overwrite the base styles of Buttons.
- * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
- * - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
- * within a button or if there is only an icon and no text.
- */
-export const buttonModifiers = createModifiers({
-  size: {
-    large: createStyles({
-      fontSize: system.space.x4,
-      lineHeight: system.space.x6,
-      letterSpacing: '0.01rem',
-      height: '48px',
-      paddingInline: system.space.x8,
-      minWidth: '112px',
-    }),
-    medium: createStyles({
-      fontSize: '0.875rem',
-      letterSpacing: '0.015rem',
-      minWidth: '96px',
-      paddingInline: system.space.x6,
-      height: system.space.x10,
-    }),
-    small: createStyles({
-      fontSize: '0.875rem',
-      letterSpacing: '0.015rem',
-      height: system.space.x8,
-      minWidth: system.space.x20,
-      paddingInline: system.space.x4,
-      gap: system.space.x1,
-    }),
-    extraSmall: createStyles({
-      fontSize: '0.75rem',
-      lineHeight: system.space.x4,
-      letterSpacing: '0.02rem',
-      height: system.space.x6,
-      minWidth: 'auto',
-      paddingInline: system.space.x3,
-      gap: system.space.x1,
-    }),
-  },
-  grow: {
-    true: createStyles({
-      width: '100%',
-      maxWidth: '100%',
-    }),
-  },
-  iconPosition: {
-    largeOnly: createStyles({
-      padding: '0',
-      minWidth: `calc(${system.space.x4} * 3)`,
-    }),
-    largeStart: createStyles({
-      paddingInlineStart: system.space.x6,
-      paddingInlineEnd: system.space.x8,
-    }),
-    largeEnd: createStyles({
-      paddingInlineStart: system.space.x8,
-      paddingInlineEnd: system.space.x6,
-    }),
-    mediumOnly: createStyles({padding: '0', minWidth: system.space.x10}),
-    mediumStart: createStyles({
-      paddingInlineStart: `calc(${system.space.x1} * 5)`,
-      paddingInlineEnd: system.space.x6,
-    }),
-    mediumEnd: createStyles({
-      paddingInlineStart: system.space.x6,
-      paddingInlineEnd: `calc(${system.space.x1} * 5)`,
-    }),
-    smallOnly: createStyles({padding: '0', minWidth: system.space.x8}),
-    smallStart: createStyles({
-      paddingInlineStart: system.space.x3,
-      paddingInlineEnd: system.space.x4,
-    }),
-    smallEnd: createStyles({
-      paddingInlineStart: system.space.x4,
-      paddingInlineEnd: system.space.x3,
-    }),
-    extraSmallOnly: createStyles({padding: '0', minWidth: system.space.x6}),
-    extraSmallStart: createStyles({
-      paddingInlineStart: system.space.x2,
-      paddingInlineEnd: system.space.x3,
-    }),
-    extraSmallEnd: createStyles({
-      paddingInlineStart: system.space.x3,
-      paddingInlineEnd: system.space.x2,
-    }),
-  },
-});
-
-export function capitalize(string: string = '') {
-  return string.charAt(0).toUpperCase() + string.substring(1);
-}
-
-export function getIconPosition(
-  size?: keyof typeof buttonModifiers.size,
-  iconPosition?: IconPositions,
-  children?: React.ReactNode
-): keyof typeof buttonModifiers.iconPosition {
-  return `${size}${capitalize(iconPosition)}` as keyof typeof buttonModifiers.iconPosition;
-}
-
-/**
- * The base button which all other buttons are built.
+ * The base button which which is the foundation of all Button variants (`PrimaryButton`,
+ * `SecondaryButton`, `TertiaryButton`, `DeleteButton`, `ToolbarIconButton` and `ToolbarDropdownButton`).
  */
 export const BaseButton = createComponent('button')({
   displayName: 'BaseButton',
@@ -322,17 +397,12 @@ export const BaseButton = createComponent('button')({
         ref={ref}
         type="button"
         {...mergeStyles(elemProps, [
-          baseButtonStyles,
-          buttonModifiers({
-            size: size,
-            grow: grow,
-            iconPosition: getIconPosition(size, iconPosition, children),
-          }),
-          buttonVars.default(colors?.default || {}),
-          buttonVars.focus(colors?.focus || {}),
-          buttonVars.hover(colors?.hover || {}),
-          buttonVars.active(colors?.active || {}),
-          buttonVars.disabled(colors?.disabled || {}),
+          buttonStencil({size, iconPosition, grow}),
+          buttonColorPropVars.default(colors?.default || {}),
+          buttonColorPropVars.focus(colors?.focus || {}),
+          buttonColorPropVars.hover(colors?.hover || {}),
+          buttonColorPropVars.active(colors?.active || {}),
+          buttonColorPropVars.disabled(colors?.disabled || {}),
         ])}
       >
         {children}
diff --git a/modules/react/button/lib/Button.tsx b/modules/react/button/lib/Button.tsx
index 859b663522..cb7e181572 100644
--- a/modules/react/button/lib/Button.tsx
+++ b/modules/react/button/lib/Button.tsx
@@ -56,10 +56,7 @@ export const Button = createComponent('button')({
         )}
         {children && <BaseButton.Label>{children}</BaseButton.Label>}
 
-        {icon && baseIconPosition === 'only' && (
-          <BaseButton.Icon size={size} icon={icon} shouldMirrorIcon={shouldMirrorIcon} />
-        )}
-        {icon && baseIconPosition === 'end' && (
+        {icon && baseIconPosition && ['only', 'end'].includes(baseIconPosition) && (
           <BaseButton.Icon size={size} icon={icon} shouldMirrorIcon={shouldMirrorIcon} />
         )}
       </BaseButton>
diff --git a/modules/react/button/lib/DeleteButton.tsx b/modules/react/button/lib/DeleteButton.tsx
index 777e40e11d..ccb362544d 100644
--- a/modules/react/button/lib/DeleteButton.tsx
+++ b/modules/react/button/lib/DeleteButton.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 
-import {buttonVars} from './BaseButton';
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {base, brand, system} from '@workday/canvas-tokens-web';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -14,50 +15,54 @@ import {Button, ButtonProps} from './Button';
  */
 export interface DeleteButtonProps extends ButtonProps {}
 
-const deleteStyles = createStyles({
-  [buttonVars.default.background]: brand.error.base,
-  [buttonVars.default.border]: 'transparent',
-  [buttonVars.default.borderRadius]: system.shape.round,
-  [buttonVars.default.label]: brand.error.accent,
-  [buttonVars.default.icon]: brand.error.accent,
-  '&:hover, &.hover': {
-    [buttonVars.hover.background]: brand.error.dark,
-    [buttonVars.hover.border]: 'transparent',
-    [buttonVars.hover.label]: brand.error.accent,
-    [buttonVars.hover.icon]: brand.error.accent,
-  },
-  '&:focus-visible, &.focus': {
-    [buttonVars.focus.background]: brand.error.base,
-    [buttonVars.focus.border]: 'transparent',
-    [buttonVars.focus.label]: brand.error.accent,
-    [buttonVars.focus.icon]: brand.error.accent,
-    [buttonVars.focus.boxShadowInner]: base.frenchVanilla100,
-    [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
-  },
-  '&:active, &.active': {
-    [buttonVars.active.background]: brand.error.darkest,
-    [buttonVars.active.border]: 'transparent',
-    [buttonVars.active.label]: brand.error.accent,
-    [buttonVars.active.icon]: brand.error.accent,
-  },
-  '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
-    [buttonVars.disabled.background]: brand.error.light,
-    [buttonVars.disabled.label]: brand.error.accent,
-    [buttonVars.disabled.icon]: brand.error.accent,
-    opacity: 1,
+const deleteButtonStencil = createStencil({
+  extends: buttonStencil,
+  base: {
+    // Base Styles
+    [buttonStencil.vars.background]: brand.error.base,
+    [buttonStencil.vars.borderRadius]: system.shape.round,
+    [buttonStencil.vars.label]: brand.error.accent,
+    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.error.accent),
+    // Focus Styles
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.background]: brand.error.base,
+      [buttonStencil.vars.label]: brand.error.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, brand.error.accent),
+      [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
+      [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
+    },
+    // Hover Styles
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: brand.error.dark,
+      [buttonStencil.vars.label]: brand.error.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.error.accent),
+    },
+    // Active Styles
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: brand.error.darkest,
+      [buttonStencil.vars.label]: brand.error.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.error.accent),
+    },
+    // Disabled Styles
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: brand.error.base,
+      [buttonStencil.vars.label]: brand.error.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, brand.error.accent),
+      [buttonStencil.vars.opacity]: system.opacity.disabled,
+    },
   },
 });
 
 /**
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
  * have significant consequences. They commonly appear in confirmation dialogs as the final
- * confirmation before deleting.
+ * confirmation before being deleted.
  */
 export const DeleteButton = createComponent('button')({
   displayName: 'DeleteButton',
-  Component: ({children, size, ...elemProps}: DeleteButtonProps, ref, Element) => {
+  Component: ({children, ...elemProps}: DeleteButtonProps, ref, Element) => {
     return (
-      <Button as={Element} ref={ref} size={size} {...mergeStyles(elemProps, [deleteStyles])}>
+      <Button as={Element} ref={ref} {...mergeStyles(elemProps, deleteButtonStencil())}>
         {children}
       </Button>
     );
diff --git a/modules/react/button/lib/ExternalHyperlink.tsx b/modules/react/button/lib/ExternalHyperlink.tsx
index d598aea772..eb5ebd3bdc 100644
--- a/modules/react/button/lib/ExternalHyperlink.tsx
+++ b/modules/react/button/lib/ExternalHyperlink.tsx
@@ -51,7 +51,7 @@ export const ExternalHyperlink = createComponent('a')({
         role="img"
         aria-label={iconLabel}
         size={iconSize}
-        styles={{['& svg']: {minWidth: minIconSize, minHeight: minIconSize}}}
+        cs={{'& svg': {minWidth: minIconSize, minHeight: minIconSize}}}
       />
     </Anchor>
   ),
diff --git a/modules/react/button/lib/PrimaryButton.tsx b/modules/react/button/lib/PrimaryButton.tsx
index 1f5b29a642..30d6755ac1 100644
--- a/modules/react/button/lib/PrimaryButton.tsx
+++ b/modules/react/button/lib/PrimaryButton.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 
-import {buttonVars} from './BaseButton';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {createStyles, createModifiers} from '@workday/canvas-kit-styling';
-import {base, brand, system} from '@workday/canvas-tokens-web';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {Button, ButtonProps} from './Button';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -19,65 +20,96 @@ export interface PrimaryButtonProps extends ButtonProps {
   variant?: 'inverse';
 }
 
-const primaryStyles = createStyles({
-  // Default Styles
-  [buttonVars.default.background]: brand.primary.base,
-  [buttonVars.default.border]: 'transparent',
-  [buttonVars.default.borderRadius]: system.shape.round,
-  [buttonVars.default.label]: brand.primary.accent,
-  [buttonVars.default.icon]: brand.primary.accent,
-  // Hover Styles
-  [buttonVars.hover.background]: brand.primary.dark,
-  [buttonVars.hover.border]: 'transparent',
-  [buttonVars.hover.label]: brand.primary.accent,
-  [buttonVars.hover.icon]: brand.primary.accent,
-  // Focus Styles
-  [buttonVars.focus.background]: brand.primary.base,
-  [buttonVars.focus.border]: 'transparent',
-  [buttonVars.focus.label]: brand.primary.accent,
-  [buttonVars.focus.icon]: brand.primary.accent,
-  [buttonVars.focus.boxShadowInner]: base.frenchVanilla100,
-  [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
-  // Active Styles
-  [buttonVars.active.background]: brand.primary.darkest,
-  [buttonVars.active.border]: 'transparent',
-  [buttonVars.active.label]: brand.primary.accent,
-  [buttonVars.active.icon]: brand.primary.accent,
-  // Disabled Styles
-  [buttonVars.disabled.background]: brand.primary.base,
-  [buttonVars.disabled.border]: 'transparent',
-  [buttonVars.disabled.label]: brand.primary.accent,
-  [buttonVars.disabled.opacity]: '0.4',
-  [buttonVars.disabled.icon]: brand.primary.accent,
-});
-
-export const primaryButtonModifiers = createModifiers({
-  variant: {
-    inverse: createStyles({
-      // Default Styles
-      [buttonVars.default.background]: base.frenchVanilla100,
-      [buttonVars.default.borderRadius]: system.shape.round,
-      [buttonVars.default.label]: base.blackPepper400,
-      [buttonVars.default.icon]: base.blackPepper400,
-      // Hover Styles
-      [buttonVars.hover.background]: base.soap300,
-      [buttonVars.hover.label]: base.blackPepper500,
-      [buttonVars.hover.icon]: base.blackPepper500,
-      // Focus Styles
-      [buttonVars.focus.background]: base.frenchVanilla100,
-      [buttonVars.focus.label]: base.blackPepper400,
-      [buttonVars.focus.icon]: base.blackPepper400,
-      [buttonVars.focus.boxShadowInner]: base.blackPepper400,
-      [buttonVars.focus.boxShadowOuter]: base.frenchVanilla100,
-      // Active Styles
-      [buttonVars.active.background]: base.soap400,
-      [buttonVars.active.label]: base.blackPepper500,
-      [buttonVars.active.icon]: base.blackPepper500,
-      // Disabled Styles
-      [buttonVars.disabled.background]: base.frenchVanilla100,
-      [buttonVars.disabled.label]: base.blackPepper400,
-      [buttonVars.disabled.icon]: base.blackPepper400,
-    }),
+const primaryButtonStencil = createStencil({
+  extends: buttonStencil,
+  base: {
+    // Base Styles
+    [buttonStencil.vars.background]: brand.primary.base,
+    [buttonStencil.vars.borderRadius]: system.shape.round,
+    [buttonStencil.vars.label]: brand.primary.accent,
+    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.primary.accent),
+    // Focus Styles
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.background]: brand.primary.base,
+      [buttonStencil.vars.label]: brand.primary.accent,
+      [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
+      [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, brand.primary.accent),
+    },
+    // Hover Styles
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: brand.primary.dark,
+      [buttonStencil.vars.label]: brand.primary.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.primary.accent),
+    },
+    // Active Styles
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: brand.primary.darkest,
+      [buttonStencil.vars.label]: brand.primary.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.primary.accent),
+    },
+    // Disabled Styles
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: brand.primary.base,
+      [buttonStencil.vars.label]: brand.primary.accent,
+      [buttonStencil.vars.opacity]: system.opacity.disabled,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.disabled.icon,
+        brand.primary.accent
+      ),
+    },
+  },
+  modifiers: {
+    variant: {
+      // Inverse Styles
+      inverse: {
+        [buttonStencil.vars.background]: system.color.bg.default,
+        [buttonStencil.vars.borderRadius]: system.shape.round,
+        [buttonStencil.vars.label]: system.color.fg.strong,
+        [systemIconStencil.vars.color]: cssVar(
+          buttonColorPropVars.default.icon,
+          system.color.fg.strong
+        ),
+        // Focus Styles
+        '&:focus-visible, &.focus': {
+          [buttonStencil.vars.background]: system.color.bg.default,
+          [buttonStencil.vars.label]: system.color.fg.strong,
+          [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
+          [buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.focus.icon,
+            system.color.fg.strong
+          ),
+        },
+        // Hover Styles
+        '&:hover, &.hover': {
+          [buttonStencil.vars.background]: system.color.bg.alt.default,
+          [buttonStencil.vars.label]: system.color.fg.stronger,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.hover.icon,
+            system.color.fg.stronger
+          ),
+        },
+        // Active Styles
+        '&:active, &.active': {
+          [buttonStencil.vars.background]: system.color.bg.alt.strong,
+          [buttonStencil.vars.label]: system.color.fg.stronger,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.active.icon,
+            system.color.fg.stronger
+          ),
+        },
+        // Disabled Styles
+        '&:disabled, &.disabled': {
+          [buttonStencil.vars.background]: system.color.bg.default,
+          [buttonStencil.vars.label]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.disabled.icon,
+            system.color.fg.strong
+          ),
+        },
+      },
+    },
   },
 });
 
@@ -85,11 +117,7 @@ export const PrimaryButton = createComponent('button')({
   displayName: 'PrimaryButton',
   Component: ({children, variant, ...elemProps}: PrimaryButtonProps, ref, Element) => {
     return (
-      <Button
-        as={Element}
-        ref={ref}
-        {...mergeStyles(elemProps, [primaryStyles, primaryButtonModifiers({variant: variant})])}
-      >
+      <Button as={Element} ref={ref} {...mergeStyles(elemProps, primaryButtonStencil({variant}))}>
         {children}
       </Button>
     );
diff --git a/modules/react/button/lib/SecondaryButton.tsx b/modules/react/button/lib/SecondaryButton.tsx
index ad199a6baf..988e1d2bc5 100644
--- a/modules/react/button/lib/SecondaryButton.tsx
+++ b/modules/react/button/lib/SecondaryButton.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 
-import {buttonVars} from './BaseButton';
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {createStyles, createModifiers} from '@workday/canvas-kit-styling';
-import {base, brand, system} from '@workday/canvas-tokens-web';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -19,69 +20,111 @@ export interface SecondaryButtonProps extends ButtonProps {
   variant?: 'inverse';
 }
 
-const secondaryStyles = createStyles({
-  // Default Styles
-  [buttonVars.default.background]: 'transparent',
-  [buttonVars.default.border]: base.blackPepper400,
-  [buttonVars.default.borderRadius]: system.shape.round,
-  [buttonVars.default.label]: base.blackPepper400,
-  [buttonVars.default.icon]: base.blackPepper400,
-  // Hover Styles
-  [buttonVars.hover.background]: base.blackPepper400,
-  [buttonVars.hover.border]: base.blackPepper400,
-  [buttonVars.hover.label]: brand.primary.accent,
-  [buttonVars.hover.icon]: brand.primary.accent,
-  // Focus Styles
-  [buttonVars.focus.background]: 'transparent',
-  [buttonVars.focus.border]: base.blackPepper400,
-  [buttonVars.focus.label]: base.blackPepper400,
-  [buttonVars.focus.icon]: base.blackPepper400,
-  [buttonVars.focus.boxShadowInner]: base.frenchVanilla100,
-  [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
-  // Active Styles
-  [buttonVars.active.background]: base.blackPepper500,
-  [buttonVars.active.border]: base.blackPepper500,
-  [buttonVars.active.label]: brand.primary.accent,
-  [buttonVars.active.icon]: brand.primary.accent,
-  // Disabled Styles
-  [buttonVars.disabled.background]: 'transparent',
-  [buttonVars.disabled.border]: base.blackPepper400,
-  [buttonVars.disabled.label]: base.blackPepper400,
-  [buttonVars.disabled.opacity]: '0.4',
-  [buttonVars.disabled.icon]: base.blackPepper400,
-});
-
-export const secondaryButtonModifiers = createModifiers({
-  variant: {
-    inverse: createStyles({
-      // Default Styles
-      [buttonVars.default.background]: 'transparent',
-      [buttonVars.default.border]: base.frenchVanilla100,
-      [buttonVars.default.label]: base.frenchVanilla100,
-      [buttonVars.default.icon]: base.frenchVanilla100,
-      // Hover Styles
-      [buttonVars.hover.background]: base.soap300,
-      [buttonVars.hover.border]: base.soap300,
-      [buttonVars.hover.label]: base.blackPepper500,
-      [buttonVars.hover.icon]: base.blackPepper500,
-      // Focus Styles
-      [buttonVars.focus.background]: base.frenchVanilla100,
-      [buttonVars.focus.border]: base.frenchVanilla100,
-      [buttonVars.focus.label]: base.blackPepper500,
-      [buttonVars.focus.icon]: base.blackPepper500,
-      [buttonVars.focus.boxShadowInner]: base.blackPepper500,
-      [buttonVars.focus.boxShadowOuter]: base.frenchVanilla100,
-      // Active Styles
-      [buttonVars.active.background]: base.soap400,
-      [buttonVars.active.border]: base.soap400,
-      [buttonVars.active.label]: base.blackPepper500,
-      [buttonVars.active.icon]: base.blackPepper500,
-      // Disabled Styles
-      [buttonVars.disabled.background]: 'transparent',
-      [buttonVars.disabled.border]: base.frenchVanilla100,
-      [buttonVars.disabled.label]: base.frenchVanilla100,
-      [buttonVars.disabled.icon]: base.frenchVanilla100,
-    }),
+const secondaryButtonStencil = createStencil({
+  extends: buttonStencil,
+  base: {
+    // Base Styles
+    [buttonStencil.vars.background]: 'transparent',
+    [buttonStencil.vars.border]: system.color.border.contrast.default,
+    [buttonStencil.vars.borderRadius]: system.shape.round,
+    [buttonStencil.vars.label]: system.color.fg.strong,
+    [systemIconStencil.vars.color]: cssVar(
+      buttonColorPropVars.default.icon,
+      system.color.fg.strong
+    ),
+    // Focus Styles
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.background]: 'transparent',
+      [buttonStencil.vars.border]: system.color.border.contrast.default,
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
+      [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.focus.icon,
+        system.color.fg.strong
+      ),
+    },
+    // Hover Styles
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: system.color.bg.contrast.default,
+      [buttonStencil.vars.border]: system.color.border.contrast.default,
+      [buttonStencil.vars.label]: brand.primary.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.primary.accent),
+    },
+    // Active Styles
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: system.color.bg.contrast.strong,
+      [buttonStencil.vars.border]: system.color.border.contrast.strong,
+      [buttonStencil.vars.label]: brand.primary.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.primary.accent),
+    },
+    // Disabled Styles
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: 'transparent',
+      [buttonStencil.vars.border]: system.color.border.contrast.default,
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      [buttonStencil.vars.opacity]: system.opacity.disabled,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.disabled.icon,
+        system.color.fg.strong
+      ),
+    },
+  },
+  modifiers: {
+    variant: {
+      inverse: {
+        // Default Styles
+        [buttonStencil.vars.background]: 'transparent',
+        [buttonStencil.vars.border]: system.color.border.inverse,
+        [buttonStencil.vars.label]: system.color.fg.inverse,
+        [systemIconStencil.vars.color]: cssVar(
+          buttonColorPropVars.default.icon,
+          system.color.fg.inverse
+        ),
+        // Focus Styles
+        '&:focus-visible, &.focus': {
+          [buttonStencil.vars.background]: system.color.bg.default,
+          [buttonStencil.vars.border]: 'transparent',
+          [buttonStencil.vars.label]: system.color.fg.strong,
+          [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
+          [buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.focus.icon,
+            system.color.fg.strong
+          ),
+        },
+        // Hover Styles
+        '&:hover, &.hover': {
+          [buttonStencil.vars.background]: system.color.bg.alt.default,
+          [buttonStencil.vars.border]: 'transparent',
+          [buttonStencil.vars.label]: system.color.fg.stronger,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.hover.icon,
+            system.color.fg.stronger
+          ),
+        },
+        // Active Styles
+        '&:active, &.active': {
+          [buttonStencil.vars.background]: system.color.bg.alt.strong,
+          [buttonStencil.vars.border]: 'transparent',
+          [buttonStencil.vars.label]: system.color.fg.stronger,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.active.icon,
+            system.color.fg.stronger
+          ),
+        },
+        // Disabled Styles
+        '&:disabled, &.disabled': {
+          [buttonStencil.vars.background]: 'transparent',
+          [buttonStencil.vars.border]: system.color.border.inverse,
+          [buttonStencil.vars.label]: system.color.fg.inverse,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.disabled.icon,
+            system.color.fg.inverse
+          ),
+        },
+      },
+    },
   },
 });
 
@@ -89,11 +132,7 @@ export const SecondaryButton = createComponent('button')({
   displayName: 'SecondaryButton',
   Component: ({children, variant, ...elemProps}: SecondaryButtonProps, ref, Element) => {
     return (
-      <Button
-        as={Element}
-        ref={ref}
-        {...mergeStyles(elemProps, [secondaryStyles, secondaryButtonModifiers({variant: variant})])}
-      >
+      <Button as={Element} ref={ref} {...mergeStyles(elemProps, secondaryButtonStencil({variant}))}>
         {children}
       </Button>
     );
diff --git a/modules/react/button/lib/TertiaryButton.tsx b/modules/react/button/lib/TertiaryButton.tsx
index 6f11d01474..504c91fcfb 100644
--- a/modules/react/button/lib/TertiaryButton.tsx
+++ b/modules/react/button/lib/TertiaryButton.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
-import {buttonVars, getIconPosition} from './BaseButton';
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {createStyles, createModifiers} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {system, brand, base} from '@workday/canvas-tokens-web';
-import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
+import {calc, createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {system, brand} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -21,125 +21,264 @@ export interface TertiaryButtonProps extends ButtonProps {
   isThemeable?: boolean;
 }
 
-const tertiaryStyles = createStyles({
-  paddingInline: system.space.x2,
-  minWidth: 'auto',
-  textDecoration: 'underline',
-  border: 0,
-  // Default Styles
-  [buttonVars.default.background]: 'transparent',
-  [buttonVars.default.border]: 'transparent',
-  [buttonVars.default.borderRadius]: system.shape.x1,
-  [buttonVars.default.label]: brand.primary.base,
-  [buttonVars.default.icon]: base.blackPepper400,
-  // Hover Styles
-  [buttonVars.hover.background]: base.soap200,
-  [buttonVars.hover.border]: 'transparent',
-  [buttonVars.hover.label]: brand.primary.dark,
-  [buttonVars.hover.icon]: base.blackPepper500,
-  // Focus Styles
-  [buttonVars.focus.background]: 'transparent',
-  [buttonVars.focus.border]: 'transparent',
-  [buttonVars.focus.label]: brand.primary.base,
-  [buttonVars.focus.icon]: base.blackPepper500,
-  [buttonVars.focus.boxShadowInner]: brand.common.focusOutline,
-  [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
-  // Active Styles
-  [buttonVars.active.background]: base.soap300,
-  [buttonVars.active.border]: 'transparent',
-  [buttonVars.active.label]: brand.primary.dark,
-  [buttonVars.active.icon]: base.blackPepper500,
-  // Disabled Styles
-  [buttonVars.disabled.background]: 'transparent',
-  [buttonVars.disabled.border]: base.frenchVanilla100,
-  [buttonVars.disabled.label]: brand.primary.base,
-  [buttonVars.disabled.icon]: base.blackPepper400,
-  [buttonVars.disabled.opacity]: '0.4',
-
-  '&:focus-visible, &.focus': {
-    ...focusRing({
-      width: 2,
-      separation: 0,
-      innerColor: base.frenchVanilla100,
-      outerColor: brand.common.focusOutline,
-    }),
-  },
-});
-
-export const tertiaryButtonModifiers = createModifiers({
-  isThemeable: {
-    true: createStyles({
-      [buttonVars.default.icon]: brand.primary.base,
-      [buttonVars.hover.icon]: brand.primary.dark,
-      [buttonVars.focus.icon]: brand.primary.base,
-      [buttonVars.active.icon]: brand.primary.dark,
-      [buttonVars.disabled.icon]: brand.primary.base,
-    }),
+const tertiaryButtonStencil = createStencil({
+  extends: buttonStencil,
+  // Base Styles
+  base: {
+    paddingInline: system.space.x2,
+    minWidth: 'auto',
+    textDecoration: 'underline',
+    border: system.space.zero,
+    [buttonStencil.vars.background]: 'transparent',
+    [buttonStencil.vars.borderRadius]: system.shape.x1,
+    [buttonStencil.vars.label]: brand.primary.base,
+    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.primary.base),
+    // Focus Styles
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.background]: 'transparent',
+      [buttonStencil.vars.label]: brand.primary.base,
+      [buttonStencil.vars.boxShadowInner]: brand.common.focusOutline,
+      [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, brand.primary.base),
+      ...focusRing({
+        width: 2,
+        separation: 0,
+        innerColor: system.color.border.inverse,
+        outerColor: brand.common.focusOutline,
+      }),
+    },
+    // Hover Styles
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: system.color.bg.alt.default,
+      [buttonStencil.vars.label]: brand.primary.dark,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.primary.dark),
+    },
+    // Active Styles
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: system.color.bg.alt.strong,
+      [buttonStencil.vars.label]: brand.primary.darkest,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.active.icon,
+        brand.primary.darkest
+      ),
+    },
+    // Disabled Styles
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: 'transparent',
+      [buttonStencil.vars.label]: brand.primary.base,
+      [buttonStencil.vars.opacity]: system.opacity.disabled,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.primary.base),
+    },
   },
-  variant: {
-    inverse: createStyles({
-      // Default Styles
-      [buttonVars.default.background]: 'transparent',
-      [buttonVars.default.border]: 'transparent',
-      [buttonVars.default.label]: base.frenchVanilla100,
-      [buttonVars.default.icon]: base.frenchVanilla100,
-      // Hover Styles
-      [buttonVars.hover.background]: base.frenchVanilla100,
-      [buttonVars.hover.border]: 'transparent',
-      [buttonVars.hover.label]: base.blackPepper400,
-      [buttonVars.hover.icon]: base.blackPepper400,
-      // Focus Styles
-      [buttonVars.focus.background]: base.frenchVanilla100,
-      [buttonVars.focus.border]: 'transparent',
-      [buttonVars.focus.label]: base.blackPepper400,
-      [buttonVars.focus.icon]: base.blackPepper400,
-      // Active Styles
-      [buttonVars.active.background]: base.soap200,
-      [buttonVars.active.border]: 'transparent',
-      [buttonVars.active.label]: base.blackPepper400,
-      [buttonVars.active.icon]: base.blackPepper400,
-      // Disabled Styles
-      [buttonVars.disabled.background]: 'transparent',
-      [buttonVars.disabled.border]: base.frenchVanilla100,
-      [buttonVars.disabled.label]: base.frenchVanilla100,
-      [buttonVars.disabled.icon]: base.frenchVanilla100,
+  modifiers: {
+    // IconPosition Styles
+    iconPosition: {
+      only: {
+        padding: 0,
+        borderRadius: system.shape.round,
+        [systemIconStencil.vars.color]: cssVar(
+          buttonColorPropVars.default.icon,
+          system.color.fg.strong
+        ),
+        '&:focus-visible, &.focus': {
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.focus.icon,
+            system.color.fg.strong
+          ),
+        },
+        '&:hover, &.hover': {
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.hover.icon,
+            system.color.fg.strong
+          ),
+        },
+        '&:active, &.active': {
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.active.icon,
+            system.color.fg.strong
+          ),
+        },
+        '&:disabled, &.disabled': {
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.disabled.icon,
+            system.color.fg.strong
+          ),
+        },
+      },
+      start: {},
+      end: {},
+    },
+    isThemeable: {
+      true: {
+        [systemIconStencil.vars.color]: cssVar(
+          buttonColorPropVars.default.icon,
+          brand.primary.base
+        ),
 
-      '&:focus-visible, &.focus': {
-        ...focusRing({
-          inset: 'inner',
-          width: 2,
-          separation: 2,
-          innerColor: base.blackPepper400,
-          outerColor: base.frenchVanilla100,
-        }),
+        '&:focus-visible, &.focus': {
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.focus.icon,
+            brand.primary.base
+          ),
+        },
+        '&:hover, &.hover': {
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.hover.icon,
+            brand.primary.dark
+          ),
+        },
+        '&:active, &.active': {
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.active.icon,
+            brand.primary.darkest
+          ),
+        },
+        '&:disabled, &.disabled': {
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.disabled.icon,
+            brand.primary.base
+          ),
+        },
       },
-    }),
-  },
-  iconPosition: {
-    largeOnly: createStyles({
-      borderRadius: borderRadius.circle,
-      padding: '0',
-      minWidth: `calc(${system.space.x4} * 3)`,
-    }),
-    largeStart: createStyles({
-      paddingInlineStart: space.xxs,
-      paddingInlineEnd: space.xs,
-    }),
-    largeEnd: createStyles({paddingInlineStart: space.xs, paddingInlineEnd: space.xxs}),
-    mediumOnly: createStyles({padding: '0', minWidth: space.xl, borderRadius: borderRadius.circle}),
-    mediumStart: createStyles({paddingInlineStart: space.xxs, paddingInlineEnd: space.xs}),
-    mediumEnd: createStyles({paddingInlineStart: space.xs, paddingInlineEnd: space.xxs}),
-    smallOnly: createStyles({padding: '0', minWidth: space.l, borderRadius: borderRadius.circle}),
-    smallStart: createStyles({paddingInlineStart: space.xxs, paddingInlineEnd: space.xs}),
-    smallEnd: createStyles({paddingInlineStart: space.xs, paddingInlineEnd: space.xxs}),
-    extraSmallOnly: createStyles({
-      padding: '0',
-      minWidth: space.m,
-      borderRadius: borderRadius.circle,
-    }),
-    extraSmallStart: createStyles({paddingInlineStart: space.xxxs, paddingInlineEnd: space.xxs}),
-    extraSmallEnd: createStyles({paddingInlineStart: space.xxs, paddingInlineEnd: space.xxxs}),
+    },
+    variant: {
+      // Inverse Styles
+      inverse: {
+        [buttonStencil.vars.background]: 'transparent',
+        [buttonStencil.vars.label]: system.color.fg.inverse,
+        [systemIconStencil.vars.color]: cssVar(
+          buttonColorPropVars.default.icon,
+          system.color.fg.inverse
+        ),
+        // Focus Styles
+        '&:focus-visible, &.focus': {
+          [buttonStencil.vars.background]: system.color.bg.default,
+          [buttonStencil.vars.label]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.focus.icon,
+            system.color.fg.strong
+          ),
+          ...focusRing({
+            inset: 'inner',
+            width: 2,
+            separation: 2,
+            innerColor: system.color.border.contrast.default,
+            outerColor: system.color.border.inverse,
+          }),
+        },
+        // Hover Styles
+        '&:hover, &.hover': {
+          [buttonStencil.vars.background]: system.color.bg.default,
+          [buttonStencil.vars.label]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.hover.icon,
+            system.color.fg.strong
+          ),
+        },
+        // Active Styles
+        '&:active, &.active': {
+          [buttonStencil.vars.background]: system.color.bg.alt.soft,
+          [buttonStencil.vars.label]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.active.icon,
+            system.color.fg.strong
+          ),
+        },
+        // Disabled Styles
+        '&:disabled, &.disabled': {
+          [buttonStencil.vars.background]: 'transparent',
+          [buttonStencil.vars.label]: system.color.fg.inverse,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.disabled.icon,
+            system.color.fg.inverse
+          ),
+        },
+      },
+    },
   },
+  // Compound Modifier Styles
+  compound: [
+    {
+      modifiers: {size: 'large', iconPosition: 'only'},
+      styles: {
+        minWidth: calc.multiply(system.space.x4, 3),
+      },
+    },
+    {
+      modifiers: {size: 'large', iconPosition: 'start'},
+      styles: {
+        paddingInlineStart: system.space.x2,
+        paddingInlineEnd: system.space.x3,
+      },
+    },
+    {
+      modifiers: {size: 'large', iconPosition: 'end'},
+      styles: {
+        paddingInlineStart: system.space.x3,
+        paddingInlineEnd: system.space.x2,
+      },
+    },
+    {
+      modifiers: {size: 'medium', iconPosition: 'only'},
+      styles: {
+        minWidth: system.space.x10,
+      },
+    },
+    {
+      modifiers: {size: 'medium', iconPosition: 'start'},
+      styles: {
+        paddingInlineStart: system.space.x2,
+        paddingInlineEnd: system.space.x3,
+      },
+    },
+    {
+      modifiers: {size: 'medium', iconPosition: 'end'},
+      styles: {
+        paddingInlineStart: system.space.x3,
+        paddingInlineEnd: system.space.x2,
+      },
+    },
+    {
+      modifiers: {size: 'small', iconPosition: 'only'},
+      styles: {
+        minWidth: system.space.x8,
+      },
+    },
+    {
+      modifiers: {size: 'small', iconPosition: 'start'},
+      styles: {
+        paddingInlineStart: system.space.x2,
+        paddingInlineEnd: system.space.x3,
+      },
+    },
+    {
+      modifiers: {size: 'small', iconPosition: 'end'},
+      styles: {
+        paddingInlineStart: system.space.x3,
+        paddingInlineEnd: system.space.x2,
+      },
+    },
+    {
+      modifiers: {size: 'extraSmall', iconPosition: 'only'},
+      styles: {
+        minWidth: system.space.x6,
+      },
+    },
+    {
+      modifiers: {size: 'extraSmall', iconPosition: 'start'},
+      styles: {
+        paddingInlineStart: system.space.x1,
+        paddingInlineEnd: system.space.x2,
+      },
+    },
+    {
+      modifiers: {size: 'extraSmall', iconPosition: 'end'},
+      styles: {
+        paddingInlineStart: system.space.x2,
+        paddingInlineEnd: system.space.x1,
+      },
+    },
+  ],
 });
 
 export const TertiaryButton = createComponent('button')({
@@ -148,8 +287,8 @@ export const TertiaryButton = createComponent('button')({
     {
       children,
       icon,
-      size = 'medium',
       isThemeable,
+      size = 'medium',
       variant,
       iconPosition,
       ...elemProps
@@ -170,16 +309,17 @@ export const TertiaryButton = createComponent('button')({
         as={Element}
         ref={ref}
         icon={icon}
-        iconPosition={iconPosition}
         size={size}
-        {...mergeStyles(elemProps, [
-          tertiaryStyles,
-          tertiaryButtonModifiers({
+        iconPosition={iconPosition}
+        {...mergeStyles(
+          elemProps,
+          tertiaryButtonStencil({
+            variant,
+            size,
             isThemeable: (isThemeable || baseIconPosition !== 'only') as any,
-            variant: variant,
-            iconPosition: getIconPosition(size, baseIconPosition),
-          }),
-        ])}
+            iconPosition: baseIconPosition,
+          })
+        )}
       >
         {children}
       </Button>
diff --git a/modules/react/button/spec/Button.spec.tsx b/modules/react/button/spec/Button.spec.tsx
index 389719342d..e40a586374 100644
--- a/modules/react/button/spec/Button.spec.tsx
+++ b/modules/react/button/spec/Button.spec.tsx
@@ -10,15 +10,17 @@ import {
 import {render, fireEvent} from '@testing-library/react';
 import {ElementComponent} from '@workday/canvas-kit-react/common';
 
-([
-  PrimaryButton,
-  SecondaryButton,
-  TertiaryButton,
-  DeleteButton,
-  DeprecatedButton,
-  // We need to cast as `any` and cast as a specific button because TS will complain about no call signatures...
-] as any[]).forEach((ButtonComponent: ElementComponent<'button', ButtonProps>) => {
-  describe(ButtonComponent.displayName, () => {
+(
+  [
+    PrimaryButton,
+    SecondaryButton,
+    TertiaryButton,
+    DeleteButton,
+    DeprecatedButton,
+    // We need to cast as `any` and cast as a specific button because TS will complain about no call signatures...
+  ] as any[]
+).forEach((ButtonComponent: ElementComponent<'button', ButtonProps>) => {
+  describe(ButtonComponent.displayName!, () => {
     const cb = jest.fn();
     afterEach(() => {
       cb.mockReset();
@@ -66,7 +68,7 @@ import {ElementComponent} from '@workday/canvas-kit-react/common';
 
     describe('when rendered with a button ref', () => {
       it('should set the ref to the checkbox input element', () => {
-        const ref = {current: null};
+        const ref = {current: null as null | HTMLButtonElement};
 
         render(<ButtonComponent ref={ref} />);
 
diff --git a/modules/react/button/stories/button/Button.stories.mdx b/modules/react/button/stories/button/Button.stories.mdx
index c85c41c45b..ebca766c18 100644
--- a/modules/react/button/stories/button/Button.stories.mdx
+++ b/modules/react/button/stories/button/Button.stories.mdx
@@ -80,10 +80,9 @@ The example below shows the use of the `grow` prop on different variants of butt
 
 ### Custom Styles
 
-We understand that there are instances in which consumers might need to adjust styles for specific
-use cases. All of our buttons extend our lower level base button props which extends style
-properties that come from `Box`. Below are some examples in which you can overwrite styles for all
-of our buttons. Please use this sparingly and try to adhere to the design system.
+All of our buttons support custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page)
+or view the example below.
 
 <ExampleCodeBlock code={CustomStyles} />
 
diff --git a/modules/react/button/stories/button/examples/CustomStyles.tsx b/modules/react/button/stories/button/examples/CustomStyles.tsx
index 495429c3f7..187591397a 100644
--- a/modules/react/button/stories/button/examples/CustomStyles.tsx
+++ b/modules/react/button/stories/button/examples/CustomStyles.tsx
@@ -1,88 +1,78 @@
 import React from 'react';
 
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {buttonStencil, PrimaryButton, PrimaryButtonProps} from '@workday/canvas-kit-react/button';
 import {Grid} from '@workday/canvas-kit-react/layout';
-import {plusIcon, caretDownIcon} from '@workday/canvas-system-icons-web';
-import {space, colors} from '@workday/canvas-kit-react/tokens';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
-import styled from '@emotion/styled';
-import {createStyles} from '@workday/canvas-kit-styling';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {createStencil, createStyles, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const getDropdownColors = () => {
-  return {
-    default: {
-      background: colors.berrySmoothie400,
-      icon: colors.frenchVanilla100,
-      label: colors.frenchVanilla100,
+const myButtonStencil = createStencil({
+  base: {
+    [buttonStencil.vars.background]: system.color.static.green.soft,
+    [buttonStencil.vars.label]: system.color.static.green.strong,
+    [systemIconStencil.vars.color]: system.color.static.green.strong,
+    [buttonStencil.vars.borderRadius]: system.shape.half,
+    border: `${px2rem(3)} solid transparent`,
+    '&:focus-visible': {
+      [buttonStencil.vars.background]: system.color.static.green.strong,
+      [buttonStencil.vars.boxShadowInner]: system.color.static.green.soft,
+      [buttonStencil.vars.boxShadowOuter]: system.color.static.green.strong,
     },
-    hover: {
-      background: colors.berrySmoothie500,
-      label: colors.frenchVanilla100,
+    '&:hover': {
+      [buttonStencil.vars.background]: system.color.static.green.default,
+      border: `${px2rem(3)} dotted ${system.color.static.green.strong}`,
+      [systemIconStencil.vars.color]: system.color.static.green.strong,
     },
-    active: {},
-    focus: {
-      boxShadowInner: colors.berrySmoothie200,
-      boxShadowOuter: colors.berrySmoothie400,
+    '&:active': {
+      [buttonStencil.vars.background]: system.color.static.green.strong,
+      [buttonStencil.vars.label]: system.color.fg.inverse,
+      [systemIconStencil.vars.color]: system.color.fg.inverse,
     },
-    disabled: {},
-  };
-};
+  },
+});
 
-const StyledPrimaryButton = styled(PrimaryButton)({
-  height: space.l,
-  fontStyle: 'italic',
+const MyCustomButton = createComponent('button')({
+  Component: ({children, ...elemProps}: PrimaryButtonProps, ref, Element) => (
+    <PrimaryButton as={Element} ref={ref} {...handleCsProp(elemProps, myButtonStencil())}>
+      {children}
+    </PrimaryButton>
+  ),
 });
 
-const customStyles = createStyles({
-  height: space.l,
-  fontStyle: 'italic',
+const myCustomStyles = createStyles({
+  padding: system.space.x4,
+  textTransform: 'uppercase',
 });
 
-const customColorTheme = {
-  palette: {
-    primary: {
-      main: 'purple',
-      contrast: 'turquoise',
-    },
-    alert: {
-      main: 'coral',
-    },
-    error: {
-      main: 'crimson',
-    },
-    success: {
-      main: 'aquamarine',
-    },
-    neutral: {
-      main: 'gray',
-    },
-    common: {
-      focusOutline: 'turquoise',
-    },
+const customColors = {
+  default: {
+    background: system.color.static.orange.soft,
+    icon: system.color.static.orange.strong,
+    label: system.color.static.orange.strong,
+  },
+  hover: {
+    background: system.color.static.orange.default,
+    icon: system.color.static.orange.strong,
+  },
+  active: {
+    background: system.color.static.orange.strong,
   },
+  focus: {
+    background: system.color.static.orange.strong,
+    boxShadowInner: system.color.static.orange.soft,
+    boxShadowOuter: system.color.static.orange.strong,
+  },
+  disabled: {},
 };
 
 export const CustomStyles = () => (
-  <Grid gridGap="s" padding="s" gridTemplateColumns="repeat(auto-fit, minmax(240px, 1fr))">
-    <PrimaryButton
-      padding={space.l}
-      border="3px dotted red"
-      backgroundColor="cyan"
-      color={colors.blackPepper400}
-    >
-      Styled with style properties
-    </PrimaryButton>
-    <PrimaryButton colors={getDropdownColors()} icon={plusIcon} iconPosition="start">
-      Styled with colors prop
-    </PrimaryButton>
-    <StyledPrimaryButton icon={caretDownIcon} iconPosition="end">
-      Overwrite styles with emotion
-    </StyledPrimaryButton>
-    <PrimaryButton cs={customStyles} icon={caretDownIcon} iconPosition="end">
-      Overwrite styles with createStyles
+  <Grid cs={{gap: px2rem(4), gridTemplateColumns: 'repeat(3, 1fr)', alignItems: 'center'}}>
+    <MyCustomButton icon={plusIcon}>Styling Override Via Stencil Variables</MyCustomButton>
+    <PrimaryButton cs={myCustomStyles}>Style Override Via Create Styles</PrimaryButton>
+    <PrimaryButton icon={plusIcon} colors={customColors}>
+      Styling Override Via Colors Prop
     </PrimaryButton>
-    <CanvasProvider theme={{canvas: customColorTheme}}>
-      <PrimaryButton>Custom Theme</PrimaryButton>
-    </CanvasProvider>
   </Grid>
 );
diff --git a/modules/react/button/stories/button/examples/Delete.tsx b/modules/react/button/stories/button/examples/Delete.tsx
index 1d11e34ed8..0d71a82204 100644
--- a/modules/react/button/stories/button/examples/Delete.tsx
+++ b/modules/react/button/stories/button/examples/Delete.tsx
@@ -3,9 +3,16 @@ import React from 'react';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {trashIcon} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Delete = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <DeleteButton>Delete</DeleteButton>
     <DeleteButton icon={trashIcon} iconPosition="start">
       Delete
diff --git a/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx b/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx
index 7ee9aef6f0..77717e73b8 100644
--- a/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx
+++ b/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx
@@ -2,9 +2,16 @@ import React from 'react';
 
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  backgroundColor: system.color.bg.primary.default,
+  padding: system.space.x4,
+});
 
 export const ExternalLinkInverse = () => (
-  <Box backgroundColor="blueberry400" padding="s">
+  <Box cs={parentContainerStyles}>
     <ExternalHyperlink href="https://workday.com" variant="inverse">
       Hyperlink
     </ExternalHyperlink>
diff --git a/modules/react/button/stories/button/examples/HyperlinkInverse.tsx b/modules/react/button/stories/button/examples/HyperlinkInverse.tsx
index af0790264a..2e23875b11 100644
--- a/modules/react/button/stories/button/examples/HyperlinkInverse.tsx
+++ b/modules/react/button/stories/button/examples/HyperlinkInverse.tsx
@@ -2,9 +2,16 @@ import React from 'react';
 
 import {Hyperlink} from '@workday/canvas-kit-react/button';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  backgroundColor: system.color.bg.primary.default,
+  padding: system.space.x4,
+});
 
 export const LinkInverse = () => (
-  <Box backgroundColor="blueberry400" padding="s">
+  <Box cs={parentContainerStyles}>
     <Hyperlink href="#hyperlink" variant="inverse">
       Hyperlink
     </Hyperlink>
diff --git a/modules/react/button/stories/button/examples/Primary.tsx b/modules/react/button/stories/button/examples/Primary.tsx
index ede4ef219f..f7597c68d0 100644
--- a/modules/react/button/stories/button/examples/Primary.tsx
+++ b/modules/react/button/stories/button/examples/Primary.tsx
@@ -7,9 +7,16 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Primary = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <PrimaryButton>Primary</PrimaryButton>
     <PrimaryButton icon={plusIcon} iconPosition="start">
       Primary
diff --git a/modules/react/button/stories/button/examples/PrimaryInverse.tsx b/modules/react/button/stories/button/examples/PrimaryInverse.tsx
index c0589600b7..e8c25a4f76 100644
--- a/modules/react/button/stories/button/examples/PrimaryInverse.tsx
+++ b/modules/react/button/stories/button/examples/PrimaryInverse.tsx
@@ -7,9 +7,17 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  backgroundColor: system.color.bg.primary.default,
+  padding: system.space.x4,
+});
 
 export const PrimaryInverse = () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <PrimaryButton variant="inverse">Primary</PrimaryButton>
     <PrimaryButton icon={plusIcon} iconPosition="start" variant="inverse">
       Primary
diff --git a/modules/react/button/stories/button/examples/Secondary.tsx b/modules/react/button/stories/button/examples/Secondary.tsx
index cdeafc8c8c..466454826a 100644
--- a/modules/react/button/stories/button/examples/Secondary.tsx
+++ b/modules/react/button/stories/button/examples/Secondary.tsx
@@ -7,9 +7,16 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Secondary = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <SecondaryButton>Secondary</SecondaryButton>
     <SecondaryButton icon={plusIcon} iconPosition="start">
       Secondary
diff --git a/modules/react/button/stories/button/examples/SecondaryInverse.tsx b/modules/react/button/stories/button/examples/SecondaryInverse.tsx
index 4fa8bbc4fd..882471fa74 100644
--- a/modules/react/button/stories/button/examples/SecondaryInverse.tsx
+++ b/modules/react/button/stories/button/examples/SecondaryInverse.tsx
@@ -7,9 +7,17 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+  backgroundColor: system.color.bg.primary.default,
+});
 
 export const SecondaryInverse = () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <SecondaryButton variant="inverse">Secondary</SecondaryButton>
     <SecondaryButton icon={plusIcon} variant="inverse">
       Secondary
diff --git a/modules/react/button/stories/button/examples/Tertiary.tsx b/modules/react/button/stories/button/examples/Tertiary.tsx
index 40504b4dfd..f2f8c3e7c2 100644
--- a/modules/react/button/stories/button/examples/Tertiary.tsx
+++ b/modules/react/button/stories/button/examples/Tertiary.tsx
@@ -7,9 +7,16 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Tertiary = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <TertiaryButton>Tertiary</TertiaryButton>
     <TertiaryButton icon={plusIcon} iconPosition="start">
       Tertiary
diff --git a/modules/react/button/stories/button/examples/TertiaryInverse.tsx b/modules/react/button/stories/button/examples/TertiaryInverse.tsx
index d82dfc0e80..1cbbce4610 100644
--- a/modules/react/button/stories/button/examples/TertiaryInverse.tsx
+++ b/modules/react/button/stories/button/examples/TertiaryInverse.tsx
@@ -5,12 +5,19 @@ import {Flex} from '@workday/canvas-kit-react/layout';
 import {
   plusIcon,
   relatedActionsVerticalIcon,
-  arrowRightIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+  backgroundColor: system.color.bg.primary.default,
+});
 
 export const TertiaryInverse = () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <TertiaryButton variant="inverse">Tertiary</TertiaryButton>
     <TertiaryButton icon={plusIcon} iconPosition="start" variant="inverse">
       Tertiary
diff --git a/modules/react/button/stories/stories_ToolbarButtons.tsx b/modules/react/button/stories/stories_ToolbarButtons.tsx
index 0694feb767..e3de77dfa0 100644
--- a/modules/react/button/stories/stories_ToolbarButtons.tsx
+++ b/modules/react/button/stories/stories_ToolbarButtons.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
-import {activityStreamIcon, paragraphIcon} from '@workday/canvas-system-icons-web';
-
+import {activityStreamIcon, paragraphIcon, zoominIcon} from '@workday/canvas-system-icons-web';
 import {ToolbarIconButton, ToolbarDropdownButton} from '@workday/canvas-kit-react/button';
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const customElementStyles = {
   margin: '0 16px 0 8px',
@@ -43,4 +44,47 @@ storiesOf('Components/Buttons/Toolbar', module)
         <div style={customElementStyles}>Normal</div>
       </ToolbarDropdownButton>
     </div>
+  ))
+  .add('Toolbar Dropdown Button with Menu', () => (
+    <div className="story">
+      <h3>Toolbar Dropdown Button with Menu</h3>
+      <Menu>
+        <Tooltip title="Expand">
+          <Menu.Target
+            as={ToolbarDropdownButton}
+            icon={zoominIcon}
+            onClick={() => {
+              console.log('Expand icon clicked');
+            }}
+          ></Menu.Target>
+        </Tooltip>
+        <Menu.Popper>
+          <Menu.Card>
+            <Menu.List>
+              <Menu.Item
+                onClick={() => {
+                  console.log('Expand All clicked');
+                }}
+              >
+                Expand All
+              </Menu.Item>
+              <Menu.Item
+                onClick={() => {
+                  console.log('Expand to Leaf Level clicked');
+                }}
+              >
+                Expand to Leaf Level
+              </Menu.Item>
+              <Menu.Item
+                onClick={() => {
+                  console.log('Expand to nth Level clicked');
+                }}
+              >
+                Expand to nth Level
+              </Menu.Item>
+            </Menu.List>
+          </Menu.Card>
+        </Menu.Popper>
+      </Menu>
+    </div>
   ));
diff --git a/modules/react/button/stories/visual-testing/stories_ColorsOverride.tsx b/modules/react/button/stories/visual-testing/stories_ColorsOverride.tsx
new file mode 100644
index 0000000000..921334e4d4
--- /dev/null
+++ b/modules/react/button/stories/visual-testing/stories_ColorsOverride.tsx
@@ -0,0 +1,75 @@
+import {CSSObject} from '@emotion/react';
+import React from 'react';
+import {PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {
+  ComponentStatesTable,
+  permutateProps,
+  StaticStates,
+} from '@workday/canvas-kit-react/testing';
+import {withSnapshotsEnabled, customColorTheme} from '../../../../../utils/storybook';
+import {
+  PrimaryButton,
+  SecondaryButton,
+  TertiaryButton,
+  DeleteButton,
+  ToolbarDropdownButton,
+  ToolbarIconButton,
+} from '@workday/canvas-kit-react/button';
+import {stateTableColumnProps} from './utils';
+import {playCircleIcon} from '@workday/canvas-system-icons-web';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export default withSnapshotsEnabled({
+  title: 'Testing/Buttons/Button/Color Overrides',
+});
+
+const ColorOverrideContainer = props => {
+  return (
+    <Flex flexDirection="column" gap="m" alignItems="center">
+      {props.children}
+    </Flex>
+  );
+};
+
+const ColorOverrideStates = (props: {theme?: PartialEmotionCanvasTheme}) => (
+  <StaticStates theme={props.theme}>
+    <ComponentStatesTable
+      rowProps={permutateProps(
+        {
+          size: [{value: 'medium', label: 'Medium'}],
+          icon: [
+            {value: undefined, label: ''},
+            // We don't need a label here, because `iconPosition` provides it
+            {value: playCircleIcon, label: ''},
+          ],
+          iconPosition: [{value: 'start', label: '& Icon Start'}],
+        },
+        // Filter out permutations where `iconPosition` is provided and not `icon`, and vice versa
+        props => (props.iconPosition && props.icon) || (!props.icon && !props.iconPosition)
+      )}
+      columnProps={stateTableColumnProps}
+    >
+      {props => (
+        <>
+          <ColorOverrideContainer>
+            <PrimaryButton {...props}>Test</PrimaryButton>
+
+            <SecondaryButton {...props}>Test</SecondaryButton>
+
+            <TertiaryButton {...props}>Test</TertiaryButton>
+
+            <DeleteButton {...props}>Test</DeleteButton>
+
+            <ToolbarDropdownButton icon={playCircleIcon} {...props} />
+
+            <ToolbarIconButton icon={playCircleIcon} {...props} />
+          </ColorOverrideContainer>
+        </>
+      )}
+    </ComponentStatesTable>
+  </StaticStates>
+);
+
+export const ColorOverrideThemedStates = () => (
+  <ColorOverrideStates theme={{canvas: customColorTheme}} />
+);
diff --git a/modules/react/button/stories/visual-testing/stories_ExternalHyperlink.tsx b/modules/react/button/stories/visual-testing/stories_ExternalHyperlink.tsx
index ac6a1527c2..09f04c8920 100644
--- a/modules/react/button/stories/visual-testing/stories_ExternalHyperlink.tsx
+++ b/modules/react/button/stories/visual-testing/stories_ExternalHyperlink.tsx
@@ -43,7 +43,7 @@ export const ExternalHyperlinkStates = () => (
       >
         {(props: any) => (
           <Container blue={props.variant === 'inverse'}>
-            <Subtext as="span" size="large" color="#000" variant={props.variant}>
+            <Subtext as="span" size="large" variant={props.variant}>
               Here's a <ExternalHyperlink {...props}>Link</ExternalHyperlink> to something
             </Subtext>
           </Container>
diff --git a/modules/react/card/index.ts b/modules/react/card/index.ts
index 1c18f4a67f..8caf4a8959 100644
--- a/modules/react/card/index.ts
+++ b/modules/react/card/index.ts
@@ -1 +1,3 @@
-export {Card} from './lib/Card';
+export {Card, cardStencil} from './lib/Card';
+export {cardHeadingStencil} from './lib/CardHeading';
+export {cardBodyStencil} from './lib/CardBody';
diff --git a/modules/react/card/lib/Card.tsx b/modules/react/card/lib/Card.tsx
index 188f9c6328..ed4f8514d8 100644
--- a/modules/react/card/lib/Card.tsx
+++ b/modules/react/card/lib/Card.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 
-import {colors} from '@workday/canvas-kit-react/tokens';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {mergeStyles, BoxProps} from '@workday/canvas-kit-react/layout';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {CardHeading} from './CardHeading';
 import {CardBody} from './CardBody';
@@ -14,6 +15,17 @@ export interface CardProps extends BoxProps {
   children?: React.ReactNode;
 }
 
+// .cnvs-card
+export const cardStencil = createStencil({
+  base: {
+    boxShadow: system.depth[1],
+    padding: system.space.x8,
+    backgroundColor: system.color.bg.default,
+    border: `${px2rem(1)} solid ${system.color.border.container}`,
+    borderRadius: system.shape.x2,
+  },
+});
+
 /**
  * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
  * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
@@ -30,18 +42,9 @@ export const Card = createComponent('div')({
   displayName: 'Card',
   Component: ({children, ...elemProps}: CardProps, ref, Element) => {
     return (
-      <Box
-        ref={ref}
-        as={Element}
-        depth={1}
-        padding="l"
-        backgroundColor="frenchVanilla100"
-        border={`1px solid ${colors.soap500}`}
-        borderRadius="l"
-        {...elemProps}
-      >
+      <Element ref={ref} {...mergeStyles(elemProps, cardStencil())}>
         {children}
-      </Box>
+      </Element>
     );
   },
   subComponents: {
diff --git a/modules/react/card/lib/CardBody.tsx b/modules/react/card/lib/CardBody.tsx
index 11536da687..6b4a820157 100644
--- a/modules/react/card/lib/CardBody.tsx
+++ b/modules/react/card/lib/CardBody.tsx
@@ -1,15 +1,26 @@
 import * as React from 'react';
-import {type} from '@workday/canvas-kit-react/tokens';
+
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {textStencil} from '@workday/canvas-kit-react/text';
+import {createStencil} from '@workday/canvas-kit-styling';
+
+export interface CardBodyProps extends BoxProps {}
+
+// .cnvs-card-body
+export const cardBodyStencil = createStencil({
+  extends: textStencil,
+  base: {},
+  defaultModifiers: {typeLevel: 'subtext.large'},
+});
 
 export const CardBody = createComponent('div')({
   displayName: 'Card.Body',
-  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
+  Component: ({children, ...elemProps}: CardBodyProps, ref, Element) => {
     return (
-      <Box ref={ref} as={Element} {...type.levels.subtext.large} {...elemProps}>
+      <Element ref={ref} {...mergeStyles(elemProps, cardBodyStencil())}>
         {children}
-      </Box>
+      </Element>
     );
   },
 });
diff --git a/modules/react/card/lib/CardHeading.tsx b/modules/react/card/lib/CardHeading.tsx
index 051482e820..7ec73ca3d4 100644
--- a/modules/react/card/lib/CardHeading.tsx
+++ b/modules/react/card/lib/CardHeading.tsx
@@ -1,32 +1,38 @@
 import * as React from 'react';
+
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {BoxProps} from '@workday/canvas-kit-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {textStencil} from '@workday/canvas-kit-react/text';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface CardHeadingProps extends BoxProps {
   /**
    * The id of the Card heading. Tie this to an `aria-labelledby` for accessibility.
    */
   id?: string;
-
   children?: React.ReactNode;
 }
 
+// .cnvs-card-heading
+export const cardHeadingStencil = createStencil({
+  extends: textStencil,
+  base: {
+    color: system.color.text.strong,
+    fontWeight: system.fontWeight.bold,
+    marginBottom: system.space.x6,
+    marginTop: system.space.zero,
+  },
+  defaultModifiers: {typeLevel: 'body.large'},
+});
+
 export const CardHeading = createComponent('h3')({
   displayName: 'Card.Heading',
   Component: ({children, ...elemProps}: CardHeadingProps, ref, Element) => {
     return (
-      <Text
-        ref={ref}
-        typeLevel="body.large"
-        fontWeight="bold"
-        marginBottom="m"
-        marginTop={0}
-        as={Element}
-        {...elemProps}
-      >
+      <Element ref={ref} {...mergeStyles(elemProps, cardHeadingStencil())}>
         {children}
-      </Text>
+      </Element>
     );
   },
 });
diff --git a/modules/react/card/stories/card.stories.mdx b/modules/react/card/stories/card.stories.mdx
index e553934622..76d9544b8d 100644
--- a/modules/react/card/stories/card.stories.mdx
+++ b/modules/react/card/stories/card.stories.mdx
@@ -3,8 +3,8 @@ import {SymbolDoc} from '@workday/canvas-kit-docs';
 import {Card} from '@workday/canvas-kit-react/card';
 
 import {Basic} from './examples/Basic';
-import {Depth} from './examples/Depth';
-import {Padding} from './examples/Padding';
+import {WithCustomStyles} from './examples/CustomStyles';
+import {WithStencils} from './examples/Stencils';
 
 <Meta title="Components/Containers/Card" component={Card} />
 
@@ -27,30 +27,24 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Card includes a container `Card` component and the following subcomponents: `Card.Body` and
-`Card.Heading`.
+`Card` includes a container component and `Card.Body` and `Card.Heading` subcomponents.
 
 <ExampleCodeBlock code={Basic} />
 
-### Depth
+### Custom Styles
 
-`Card` extends from `Box` so it supports all of
-[Box's style props](/components/layout/box/#style-props). This includes `depth`, which changes the
-Card's perceived "height" above the page surface by adjusting its box shadow. `Card` has a default
-depth of `1`.
+Card and its subcomponents support custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
 
-Here's an example of a `Card` with a increased `depth` of `2`.
+<ExampleCodeBlock code={WithCustomStyles} />
 
-<ExampleCodeBlock code={Depth} />
+## Stencils
 
-### Padding
+You can also use `Card` stencils to extend styles for your own custom components. This allows you to
+compose styles without using components directly. In the example below, we're extending `Card`
+stencils to create a custom `MenuCard` component.
 
-Set the `padding` prop of the `Card` (again, supported via `Box`) to adjust its padding. Card has a
-default padding of `l`.
-
-Here's an example of a `Card` with a reduced padding of `xs`.
-
-<ExampleCodeBlock code={Padding} />
+<ExampleCodeBlock code={WithStencils} />
 
 ## Component API
 
diff --git a/modules/react/card/stories/examples/CustomStyles.tsx b/modules/react/card/stories/examples/CustomStyles.tsx
new file mode 100644
index 0000000000..772000dc7a
--- /dev/null
+++ b/modules/react/card/stories/examples/CustomStyles.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import {Card} from '@workday/canvas-kit-react/card';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const customCardStyles = createStyles({
+  boxShadow: system.depth[2],
+  maxWidth: px2rem(320),
+  padding: system.space.x3,
+});
+
+export const WithCustomStyles = () => (
+  <Card cs={customCardStyles}>
+    <Card.Heading>Canvas Supreme</Card.Heading>
+    <Card.Body>
+      Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms, onions,
+      and oregano.
+    </Card.Body>
+  </Card>
+);
diff --git a/modules/react/card/stories/examples/Depth.tsx b/modules/react/card/stories/examples/Depth.tsx
deleted file mode 100644
index 2701ca03b2..0000000000
--- a/modules/react/card/stories/examples/Depth.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import {Card} from '@workday/canvas-kit-react/card';
-
-export const Depth = () => {
-  return (
-    <Card depth={2}>
-      <Card.Heading>Canvas Supreme</Card.Heading>
-      <Card.Body>
-        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
-        onions, and oregano.
-      </Card.Body>
-    </Card>
-  );
-};
diff --git a/modules/react/card/stories/examples/Padding.tsx b/modules/react/card/stories/examples/Padding.tsx
deleted file mode 100644
index 79301f06ae..0000000000
--- a/modules/react/card/stories/examples/Padding.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import {Card} from '@workday/canvas-kit-react/card';
-
-export const Padding = () => {
-  return (
-    <Card padding="xs">
-      <Card.Heading>Canvas Supreme</Card.Heading>
-      <Card.Body>
-        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
-        onions, and oregano.
-      </Card.Body>
-    </Card>
-  );
-};
diff --git a/modules/react/card/stories/examples/Stencils.tsx b/modules/react/card/stories/examples/Stencils.tsx
new file mode 100644
index 0000000000..de203ddfd5
--- /dev/null
+++ b/modules/react/card/stories/examples/Stencils.tsx
@@ -0,0 +1,106 @@
+import * as React from 'react';
+import {cardStencil, cardBodyStencil, cardHeadingStencil} from '@workday/canvas-kit-react/card';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, px2rem, CSProps, handleCsProp} from '@workday/canvas-kit-styling';
+import {system, brand} from '@workday/canvas-tokens-web';
+
+const menuCardStencil = createStencil({
+  extends: cardStencil,
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: system.space.zero,
+    maxWidth: px2rem(320),
+  },
+});
+
+const menuCardHeroStencil = createStencil({
+  base: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    background: brand.gradient.primary,
+    aspectRatio: '1',
+    maxHeight: px2rem(80),
+    padding: system.space.x2,
+    borderRadius: `${system.shape.x2} ${system.shape.x2} 0 0`,
+  },
+});
+
+const MenuCardHero = createComponent('div')({
+  displayName: 'MenuCard.Hero',
+  Component: (elemProps: CSProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, menuCardHeroStencil())} />;
+  },
+});
+
+const menuCardContentStencil = createStencil({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: system.space.x2,
+    padding: system.space.x2,
+  },
+});
+
+const MenuCardContent = createComponent('div')({
+  displayName: 'MenuCard.Content',
+  Component: (elemProps: CSProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, menuCardContentStencil())} />;
+  },
+});
+
+const menuCardHeadingStencil = createStencil({
+  extends: cardHeadingStencil,
+  base: {
+    color: brand.primary.accent,
+    margin: system.space.zero,
+  },
+});
+
+const MenuCardHeading = createComponent('h3')({
+  displayName: 'MenuCard.Heading',
+  Component: (elemProps: CSProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, menuCardHeadingStencil())} />;
+  },
+});
+
+const menuCardTextStencil = createStencil({
+  extends: cardBodyStencil,
+  base: {
+    margin: 0,
+  },
+});
+
+const MenuCardText = createComponent('p')({
+  displayName: 'MenuCard.Text',
+  Component: (elemProps: CSProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, menuCardTextStencil())} />;
+  },
+});
+
+const MenuCard = createComponent('div')({
+  displayName: 'MenuCard',
+  Component: (elemProps: CSProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, menuCardStencil())} />;
+  },
+  subComponents: {
+    Content: MenuCardContent,
+    Heading: MenuCardHeading,
+    Hero: MenuCardHero,
+    Text: MenuCardText,
+  },
+});
+
+export const WithStencils = () => (
+  <MenuCard>
+    <MenuCard.Hero>
+      <MenuCard.Heading>Sausage Pizza</MenuCard.Heading>
+    </MenuCard.Hero>
+    <MenuCard.Content>
+      <MenuCard.Text>
+        Red sauce, homemade seasoned sausage, mushrooms, red bell peppers, rosemary, cheese.
+      </MenuCard.Text>
+      <MenuCard.Text></MenuCard.Text>
+    </MenuCard.Content>
+  </MenuCard>
+);
diff --git a/modules/react/checkbox/lib/CheckBackground.tsx b/modules/react/checkbox/lib/CheckBackground.tsx
new file mode 100644
index 0000000000..daaba1bfd2
--- /dev/null
+++ b/modules/react/checkbox/lib/CheckBackground.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import {createComponent, ErrorType} from '@workday/canvas-kit-react/common';
+import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+
+interface CheckBackgroundProps {
+  children: React.ReactNode;
+  error?: ErrorType;
+}
+
+export const checkboxBackgroundStencil = createStencil({
+  vars: {
+    errorRingColorInner: '',
+    errorRingColorOuter: '',
+  },
+  base: {
+    alignItems: 'center',
+    backgroundColor: system.color.bg.default,
+    borderRadius: system.shape.half,
+    display: 'flex',
+    height: calc.add(system.space.x4, px2rem(2)),
+    justifyContent: 'center',
+    padding: `${system.space.zero} ${calc.divide(system.space.x1, 2)}`,
+    pointerEvents: 'none',
+    position: 'absolute',
+    transition: 'border 200ms ease, background 200ms',
+    width: calc.add(system.space.x4, px2rem(2)),
+    border: `${px2rem(1)} solid ${system.color.border.input.default}`,
+  },
+  modifiers: {
+    error: {
+      error: ({errorRingColorInner, errorRingColorOuter}) => ({
+        [errorRingColorInner]: brand.error.base,
+        [errorRingColorOuter]: 'transparent',
+      }),
+      alert: ({errorRingColorInner, errorRingColorOuter}) => ({
+        [errorRingColorInner]: brand.alert.base,
+        [errorRingColorOuter]: brand.alert.darkest,
+      }),
+    },
+  },
+});
+
+export const CheckBackground = createComponent('div')({
+  displayName: 'CheckBackground',
+  Component: ({error, children}: CheckBackgroundProps) => {
+    return <div {...checkboxBackgroundStencil({error})}>{children}</div>;
+  },
+});
diff --git a/modules/react/checkbox/lib/Checkbox.tsx b/modules/react/checkbox/lib/Checkbox.tsx
index 9cfa2389b3..0a78bbe2dd 100644
--- a/modules/react/checkbox/lib/Checkbox.tsx
+++ b/modules/react/checkbox/lib/Checkbox.tsx
@@ -1,326 +1,22 @@
 import * as React from 'react';
 import {
   createComponent,
-  StyledType,
   ErrorType,
   useUniqueId,
-  focusRing,
-  mouseFocusBehavior,
-  getErrorColors,
-  styled,
-  useTheme,
-  Themeable,
   useLocalRef,
 } from '@workday/canvas-kit-react/common';
-import {borderRadius, colors, inputColors, space} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {checkSmallIcon} from '@workday/canvas-system-icons-web';
-import {LabelText} from '@workday/canvas-kit-react/text';
-
-export interface CheckboxProps extends Themeable {
-  /**
-   * If true, set the Checkbox to the checked state.
-   * @default false
-   */
-  checked?: boolean;
-  /**
-   * If true, set the Checkbox to the disabled state.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * The HTML `id` of the underlying checkbox input element. This is required if `label` is defined as a non-empty string.
-   * @default {useUniqueId}
-   */
-  id?: string;
-  /**
-   * The text of the Checkbox label.
-   * @default ''
-   */
-  label?: string;
-  /**
-   * The function called when the Checkbox state changes.
-   */
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  /**
-   * The value of the Checkbox.
-   */
-  value?: string;
-  /**
-   * The type of error associated with the Checkbox (if applicable).
-   */
-  error?: ErrorType;
-  /**
-   * If true, set the Checkbox to an indeterminate state. Use this on a Checkbox with nested child Checkboxes to denote that some (but not all) child Checkboxes are checked.
-   * @default false
-   */
-  indeterminate?: boolean;
-  /**
-   * The variant for the checkbox
-   */
-  variant?: 'inverse' | undefined;
-}
-
-const CheckboxContainer = styled('div')({
-  display: 'flex',
-  alignItems: 'center',
-  minHeight: space.m,
-  position: 'relative',
-});
-
-/**
- * Using a wrapper prevents the browser default behavior of trigging
- * :hover on the checkbox when you hover on it's corresponding label.
- * This stops the ripple from showing when you hover on the label.
- */
-const CheckboxInputWrapper = styled('div')<Pick<CheckboxProps, 'disabled'>>({
-  display: 'flex',
-  height: `calc(${space.s} + 2px)`,
-  minWidth: `calc(${space.s} + 2px)`,
-  marginTop: '3px',
-  alignSelf: 'flex-start',
-});
-
-const CheckboxRipple = styled('span')<Pick<CheckboxProps, 'disabled' | 'variant'>>(
-  {
-    borderRadius: borderRadius.circle,
-    boxShadow: `0 0 0 0 ${colors.soap200}`,
-    height: `calc(${space.s} + 2px)`,
-    transition: 'box-shadow 150ms ease-out',
-    width: `calc(${space.s} + 2px)`,
-    position: 'absolute',
-    pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
-  },
-  ({variant}) => ({
-    opacity: variant === 'inverse' ? '0.4' : '1',
-  })
-);
-
-/**
- * Note: `~ div:first-of-type` refers to `CheckboxBackground`
- * and was easier to use than a component selector in this case.
- */
-const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
-  ({
-    theme: {
-      canvas: {
-        palette: {
-          primary: themePrimary,
-          common: {focusOutline: themeFocusOutline},
-        },
-      },
-    },
-    variant,
-  }) => ({
-    borderRadius: borderRadius.s,
-    width: space.m,
-    height: space.m,
-    margin: 0,
-    marginTop: '-3px',
-    marginLeft: '-3px',
-    position: 'absolute',
-    opacity: 0,
-
-    '&:not(:disabled)': {
-      cursor: 'pointer',
-    },
-
-    // States
-    '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active':
-      {
-        '~ div:first-of-type': {
-          borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
-        },
-      },
-    '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
-      borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
-      backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
-    },
-    '&:disabled ~ div:first-of-type': {
-      borderColor: inputColors.disabled.border,
-      backgroundColor: variant === 'inverse' ? colors.soap300 : inputColors.disabled.background,
-      opacity: variant === 'inverse' ? '.4' : '1',
-    },
-    '&:disabled:checked ~ div:first-of-type, &:disabled:indeterminate ~ div:first-of-type': {
-      borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
-      backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
-    },
-
-    // Focus
-    '&:focus, &:active': {
-      outline: 'none',
-    },
-    '&:focus ~ div:first-of-type': {
-      borderColor: variant === 'inverse' ? colors.blackPepper400 : themePrimary.main,
-      borderWidth: '2px',
-      boxShadow: 'none',
-      ...focusRing({
-        width: variant === 'inverse' ? 2 : 0,
-        separation: 0,
-        animate: false,
-        innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
-        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
-      }),
-    },
-    '&:checked:focus ~ div:first-of-type, &:indeterminate:focus ~ div:first-of-type': {
-      ...focusRing({
-        width: 2,
-        separation: 2,
-        animate: false,
-        innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
-        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
-      }),
-      borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
-      borderWidth: '2px',
-      '& span': {
-        marginLeft: '-7px',
-      },
-    },
-    ...mouseFocusBehavior({
-      '&:focus ~ div:first-of-type': {
-        border:
-          variant === 'inverse'
-            ? `1px solid ${colors.soap300}`
-            : `1px solid ${inputColors.hoverBorder}`,
-        boxShadow: 'none',
-        '& span': {
-          marginLeft: '-6px',
-        },
-      },
-      '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
-        borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
-      },
-      '&:disabled:checked ~ div:first-of-type, &:disabled:indeterminate ~ div:first-of-type': {
-        borderColor: themePrimary.light,
-        backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
-      },
-    }),
-  }),
-  ({disabled}) => ({
-    '&:hover ~ span:first-of-type': {
-      boxShadow: disabled
-        ? undefined
-        : `0 0 0 calc((${space.l} - (${space.s} + 2px)) / 2) ${colors.soap200}`,
-    },
-  }),
-  ({theme, error, variant}) => {
-    const errorColors = getErrorColors(error, theme);
-
-    if (errorColors.outer === errorColors.inner) {
-      errorColors.outer = 'transparent';
-    }
-
-    const errorStyles = {
-      '& ~ div:first-of-type': {
-        border:
-          variant === 'inverse' ? `1px solid ${colors.soap300}` : `1px solid ${errorColors.inner}`,
-        boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
-      },
-      '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active':
-        {
-          '~ div:first-of-type': {
-            borderColor: variant === 'inverse' ? `1px solid ${colors.soap300}` : errorColors.inner,
-          },
-        },
-      '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
-        borderColor: variant === 'inverse' ? colors.soap300 : theme.canvas.palette.primary.main,
-        boxShadow: `
-              0 0 0 2px ${colors.frenchVanilla100},
-              0 0 0 4px ${errorColors.inner},
-              0 0 0 5px ${errorColors.outer}`,
-      },
-    };
-    return {
-      // Error rings take precedence over focus
-      ...mouseFocusBehavior({
-        ...errorStyles,
-        '&:not(:checked):not(:indeterminate):focus ~ div:first-of-type': {
-          border: `1px solid ${errorColors.inner}`,
-          boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
-        },
-      }),
-      ...errorStyles,
-    };
-  }
-);
-
-const CheckboxBackground = styled('div')<CheckboxProps>(
-  {
-    alignItems: 'center',
-    backgroundColor: colors.frenchVanilla100,
-    borderRadius: borderRadius.s,
-    boxSizing: 'border-box',
-    display: 'flex',
-    height: `calc(${space.s} + 2px)`,
-    justifyContent: 'center',
-    padding: '0px 2px',
-    pointerEvents: 'none',
-    position: 'absolute',
-    transition: 'border 200ms ease, background 200ms',
-    width: `calc(${space.s} + 2px)`,
-  },
-  ({variant}) => ({
-    border: `1px solid ${variant === 'inverse' ? colors.soap300 : inputColors.border}`,
-  })
-);
-
-const CheckboxCheck = styled('div')<Pick<CheckboxProps, 'checked' | 'indeterminate'>>(
-  {
-    display: 'flex',
-    flexDirection: 'column',
-    // When using align-items: center on a flex container in the column direction,
-    // the contents of flex item, if too big, will overflow their container in IE 10-11.
-    // max-width: 100%; is a workaround
-    // https://github.com/philipwalton/flexbugs#flexbug-2
-    maxWidth: '100%',
-    pointerEvents: 'none',
-    transition: 'transform 200ms ease, opacity 200ms ease',
-    span: {
-      // This is necessary because we're using max-width: 100% in the CheckboxCheck container
-      // in order for the Checkbox to render properly on IE 11
-      marginLeft: '-6px',
-      transition: 'margin 200ms ease',
-    },
-  },
-  ({checked, indeterminate}) => ({
-    opacity: checked || indeterminate ? 1 : 0,
-    transform: checked || indeterminate ? 'scale(1)' : 'scale(0.5)',
-  })
-);
-
-const IndeterminateBox = styled('div')<CheckboxProps>(
-  {
-    width: '10px',
-    height: '2px',
-  },
-  ({theme, variant}) => ({
-    backgroundColor:
-      variant === 'inverse'
-        ? theme.canvas.palette.primary.main
-        : theme.canvas.palette.primary.contrast,
-  })
-);
+import {CheckboxRipple} from './CheckboxRipple';
+import {CheckboxContainer} from './CheckboxContainer';
+import {CheckboxCheck} from './CheckboxCheck';
+import {CheckboxInput, CheckboxProps} from './CheckboxInput';
 
 export const Checkbox = createComponent('input')({
   displayName: 'Checkbox',
-  Component: (
-    {
-      checked = false,
-      label = '',
-      // TODO: Fix useTheme and make it a real hook
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      theme = useTheme(),
-      id,
-      disabled,
-      indeterminate,
-      variant,
-      ...elemProps
-    }: CheckboxProps,
-    ref,
-    Element
-  ) => {
+  Component: ({id, label = '', ...elemProps}: CheckboxProps, ref, Element) => {
+    const {checked = false, disabled, error, indeterminate, variant} = elemProps;
     const inputId = useUniqueId(id);
     const {localRef, elementRef} = useLocalRef(ref);
+
     React.useEffect(() => {
       if (typeof indeterminate === 'boolean' && localRef.current) {
         localRef.current.indeterminate = indeterminate;
@@ -328,48 +24,15 @@ export const Checkbox = createComponent('input')({
     }, [indeterminate, localRef]);
 
     return (
-      <CheckboxContainer>
-        <CheckboxInputWrapper disabled={disabled}>
-          <CheckboxInput
-            as={Element}
-            checked={checked}
-            disabled={disabled}
-            id={inputId}
-            ref={elementRef}
-            type="checkbox"
-            variant={variant}
-            aria-checked={indeterminate ? 'mixed' : checked}
-            {...elemProps}
-          />
-          <CheckboxRipple variant={variant} />
-          <CheckboxBackground variant={variant} checked={checked} disabled={disabled}>
-            <CheckboxCheck checked={checked} indeterminate={indeterminate}>
-              {indeterminate ? (
-                <IndeterminateBox variant={variant} />
-              ) : checked ? (
-                <SystemIcon
-                  icon={checkSmallIcon}
-                  color={
-                    variant === 'inverse'
-                      ? theme.canvas.palette.primary.main
-                      : theme.canvas.palette.primary.contrast
-                  }
-                />
-              ) : null}
-            </CheckboxCheck>
-          </CheckboxBackground>
-        </CheckboxInputWrapper>
-        {label && (
-          <LabelText
-            htmlFor={inputId}
-            disabled={disabled}
-            variant={variant}
-            paddingInlineStart={space.xs}
-            cursor="pointer"
-          >
-            {label}
-          </LabelText>
-        )}
+      <CheckboxContainer label={label} disabled={disabled} id={inputId} variant={variant}>
+        <CheckboxInput as={Element} id={inputId} ref={elementRef} {...elemProps} />
+        <CheckboxRipple />
+        <CheckboxCheck
+          variant={variant}
+          checked={checked}
+          indeterminate={indeterminate}
+          error={error}
+        />
       </CheckboxContainer>
     );
   },
@@ -377,3 +40,5 @@ export const Checkbox = createComponent('input')({
     ErrorType,
   },
 });
+
+export {CheckboxProps};
diff --git a/modules/react/checkbox/lib/CheckboxCheck.tsx b/modules/react/checkbox/lib/CheckboxCheck.tsx
new file mode 100644
index 0000000000..ebfc737593
--- /dev/null
+++ b/modules/react/checkbox/lib/CheckboxCheck.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import {ErrorType, createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, calc, px2rem} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {checkSmallIcon} from '@workday/canvas-system-icons-web';
+import {CheckBackground} from './CheckBackground';
+
+interface CheckboxCheckProps {
+  checked: boolean;
+  error?: ErrorType;
+  indeterminate?: boolean;
+  variant?: 'inverse';
+}
+
+const checkboxCheckStencil = createStencil({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    maxWidth: '100%',
+    pointerEvents: 'none',
+    transition: 'transform 200ms ease, opacity 200ms ease',
+    span: {
+      marginInlineStart: calc.negate(px2rem(6)),
+      transition: 'margin 200ms ease',
+    },
+    opacity: system.opacity.zero,
+    transform: 'scale(0.5)',
+  },
+  modifiers: {
+    checked: {
+      true: {
+        [systemIconStencil.vars.color]: brand.primary.accent,
+        opacity: system.opacity.full,
+        transform: 'scale(1)',
+      },
+    },
+    indeterminate: {
+      true: {
+        opacity: system.opacity.full,
+        transform: 'scale(1)',
+      },
+    },
+    variant: {
+      inverse: {
+        [systemIconStencil.vars.color]: brand.primary.base,
+        '& > div': {
+          backgroundColor: brand.primary.base,
+        },
+      },
+    },
+  },
+});
+
+const indeterminateBoxStencil = createStencil({
+  base: {
+    width: px2rem(10),
+    height: calc.divide(system.space.x1, 2),
+    backgroundColor: brand.primary.accent,
+  },
+});
+
+export const CheckboxCheck = createComponent('div')({
+  displayName: 'CheckboxCheck',
+  Component: ({checked, error, indeterminate, variant}: CheckboxCheckProps) => {
+    return (
+      <CheckBackground error={error}>
+        <div {...checkboxCheckStencil({checked, indeterminate, variant})}>
+          {indeterminate ? (
+            <div {...indeterminateBoxStencil()} />
+          ) : (
+            checked && <SystemIcon icon={checkSmallIcon} />
+          )}
+        </div>
+      </CheckBackground>
+    );
+  },
+});
diff --git a/modules/react/checkbox/lib/CheckboxContainer.tsx b/modules/react/checkbox/lib/CheckboxContainer.tsx
new file mode 100644
index 0000000000..d67181cc50
--- /dev/null
+++ b/modules/react/checkbox/lib/CheckboxContainer.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {CSProps, calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {LabelText} from '@workday/canvas-kit-react/text';
+
+interface CheckboxContainerProps extends CSProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+  id: string;
+  label: string;
+  variant?: 'inverse';
+}
+
+const checkboxContainerStencil = createStencil({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: system.space.x6,
+    position: 'relative',
+    /**
+     * Using a wrapper prevents the browser default behavior of trigging
+     * :hover on the checkbox when you hover on it's corresponding label.
+     * This stops the ripple from showing when you hover on the label.
+     */
+    '&>div': {
+      display: 'flex',
+      height: calc.add(system.space.x4, px2rem(2)),
+      minWidth: calc.add(system.space.x4, px2rem(2)),
+      marginTop: px2rem(3),
+      alignSelf: 'flex-start',
+    },
+    '& > label': {
+      paddingInlineStart: system.space.x3,
+    },
+  },
+});
+
+export const CheckboxContainer = createComponent('div')({
+  displayName: 'CheckboxContainer',
+  Component: ({children, disabled, id, label, variant}: CheckboxContainerProps) => {
+    return (
+      <div {...checkboxContainerStencil()}>
+        <div>{children}</div>
+        {label && (
+          <LabelText
+            htmlFor={id}
+            disabled={disabled}
+            variant={variant}
+            style={{cursor: disabled ? 'default' : 'pointer'}}
+          >
+            {label}
+          </LabelText>
+        )}
+      </div>
+    );
+  },
+});
diff --git a/modules/react/checkbox/lib/CheckboxInput.tsx b/modules/react/checkbox/lib/CheckboxInput.tsx
new file mode 100644
index 0000000000..5ad88ef6cb
--- /dev/null
+++ b/modules/react/checkbox/lib/CheckboxInput.tsx
@@ -0,0 +1,238 @@
+import * as React from 'react';
+import {createComponent, focusRing, ErrorType} from '@workday/canvas-kit-react/common';
+
+import {calc, createStencil, handleCsProp, px2rem, CSProps} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+import {checkboxBackgroundStencil} from './CheckBackground';
+
+export interface CheckboxProps extends CSProps {
+  /**
+   * If true, set the Checkbox to the checked state.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, set the Checkbox to the disabled state.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The type of error associated with the Checkbox (if applicable).
+   */
+  error?: ErrorType;
+  /**
+   * The HTML `id` of the underlying checkbox input element. This is required if `label` is defined as a non-empty string.
+   * @default {useUniqueId}
+   */
+  id?: string;
+  /**
+   * If true, set the Checkbox to an indeterminate state. Use this on a Checkbox with nested child Checkboxes to denote that some (but not all) child Checkboxes are checked.
+   * @default false
+   */
+  indeterminate?: boolean;
+  /**
+   * The text of the Checkbox label.
+   * @default ''
+   */
+  label?: string;
+  /**
+   * The function called when the Checkbox state changes.
+   */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * The value of the Checkbox.
+   */
+  value?: string;
+  /**
+   * The variant for the checkbox
+   */
+  variant?: 'inverse' | undefined;
+}
+
+const checkboxInputStencil = createStencil({
+  base: {
+    borderRadius: system.shape.half,
+    width: system.space.x6,
+    height: system.space.x6,
+    margin: system.space.zero,
+    marginTop: calc.negate(px2rem(3)),
+    marginInlineStart: calc.negate(px2rem(3)),
+    position: 'absolute',
+    opacity: system.opacity.zero,
+
+    '&:not(:disabled)': {
+      cursor: 'pointer',
+    },
+
+    '&:where(:hover,.hover) ~ span:first-of-type': {
+      boxShadow: `0 0 0 ${px2rem(7)} ${system.color.bg.alt.soft}`,
+    },
+
+    // Disabled State
+    '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+      {
+        borderColor: system.color.border.input.strong,
+      },
+    '&:where(:checked, :indeterminate) ~ div:first-of-type': {
+      borderColor: brand.primary.base,
+      backgroundColor: brand.primary.base,
+    },
+    '&:disabled ~ div:first-of-type': {
+      borderColor: system.color.border.input.disabled,
+      backgroundColor: system.color.bg.alt.softer,
+      opacity: system.opacity.full,
+    },
+    '&:disabled:where(:checked, :indeterminate) ~ div:first-of-type': {
+      borderColor: brand.primary.light,
+      backgroundColor: brand.primary.light,
+    },
+
+    // Focus State
+    '&:where(:focus-visible, :active, .focus, .active)': {
+      outline: 'none',
+    },
+    '&:where(:focus-visible, .focus) ~ div:first-of-type': {
+      borderColor: brand.primary.base,
+      borderWidth: px2rem(2),
+      boxShadow: 'none',
+      ...focusRing({
+        width: 0,
+        separation: 0,
+        animate: false,
+      }),
+    },
+    '&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus':
+      {
+        '& ~ div:first-of-type': {
+          ...focusRing({
+            width: 2,
+            separation: 2,
+            animate: false,
+            outerColor: brand.common.focusOutline,
+          }),
+          borderColor: brand.primary.base,
+          borderWidth: px2rem(2),
+          span: {
+            marginInlineStart: calc.negate(px2rem(7)),
+          },
+        },
+      },
+  },
+  modifiers: {
+    variant: {
+      inverse: {
+        '& ~ span:first-of-type': {
+          opacity: system.opacity.disabled,
+        },
+
+        '& ~ div:first-of-type': {
+          borderColor: system.color.border.input.inverse,
+        },
+
+        // Disabled State for inverse variant
+        '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+          {
+            borderColor: system.color.border.input.inverse,
+          },
+        '&:where(:checked, :indeterminate) ~ div:first-of-type': {
+          borderColor: system.color.border.input.inverse,
+          backgroundColor: system.color.bg.default,
+        },
+        '&:disabled ~ div:first-of-type': {
+          backgroundColor: system.color.bg.alt.default,
+          opacity: system.opacity.disabled,
+        },
+        '&:disabled:where(:checked, :indeterminate) ~ div:first-of-type': {
+          borderColor: system.color.border.input.inverse,
+          backgroundColor: system.color.bg.default,
+        },
+
+        // Focus state for inverse variant
+        '&:where(:focus-visible, .focus) ~ div:first-of-type': {
+          borderColor: system.color.border.contrast.default,
+          ...focusRing({
+            width: 2,
+            separation: 0,
+            animate: false,
+            innerColor: system.color.border.contrast.default,
+            outerColor: system.color.border.inverse,
+          }),
+        },
+        '&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus':
+          {
+            '& ~ div:first-of-type': {
+              ...focusRing({
+                width: 2,
+                separation: 2,
+                animate: false,
+                innerColor: system.color.border.contrast.default,
+                outerColor: system.color.border.inverse,
+              }),
+              borderColor: system.color.border.inverse,
+            },
+          },
+      },
+    },
+    disabled: {
+      true: {
+        '&:where(:hover, .hover) ~ span:first-of-type': {
+          boxShadow: 'none',
+        },
+      },
+    },
+    error: {
+      true: {
+        '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
+          borderColor: checkboxBackgroundStencil.vars.errorRingColorInner,
+          boxShadow: `
+            0 0 0 ${px2rem(1)} ${checkboxBackgroundStencil.vars.errorRingColorInner},
+            0 0 0 ${px2rem(2)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`,
+        },
+        '&:where(:checked, :indeterminate) ~ div:first-of-type': {
+          borderColor: 'transparent',
+          boxShadow: `
+            0 0 0 ${px2rem(2)} ${system.color.border.inverse},
+            0 0 0 ${px2rem(4)} ${checkboxBackgroundStencil.vars.errorRingColorInner},
+            0 0 0 ${px2rem(5)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`,
+        },
+        '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+          {
+            borderColor: checkboxBackgroundStencil.vars.errorRingColorInner,
+          },
+      },
+    },
+  },
+  compound: [
+    {
+      modifiers: {variant: 'inverse', error: true},
+      styles: {
+        '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
+          border: `${px2rem(1)} solid ${system.color.border.input.inverse}`,
+        },
+        '&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+          {
+            borderColor: system.color.border.input.inverse,
+          },
+        '&:where(:checked, :indeterminate) ~ div:first-of-type': {
+          borderColor: system.color.border.input.inverse,
+        },
+      },
+    },
+  ],
+});
+
+export const CheckboxInput = createComponent('input')({
+  displayName: 'CheckboxInput',
+  Component: ({variant, error, indeterminate, ...elemProps}: CheckboxProps, ref, Element) => {
+    const {checked, disabled} = elemProps;
+
+    return (
+      <Element
+        type="checkbox"
+        ref={ref}
+        aria-checked={indeterminate ? 'mixed' : checked}
+        {...handleCsProp(elemProps, checkboxInputStencil({variant, disabled, error: !!error}))}
+      />
+    );
+  },
+});
diff --git a/modules/react/checkbox/lib/CheckboxRipple.tsx b/modules/react/checkbox/lib/CheckboxRipple.tsx
new file mode 100644
index 0000000000..cbf6e5b394
--- /dev/null
+++ b/modules/react/checkbox/lib/CheckboxRipple.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const checkboxRippleStencil = createStencil({
+  base: {
+    borderRadius: system.shape.round,
+    boxShadow: 'none',
+    height: calc.add(system.space.x4, px2rem(2)),
+    width: calc.add(system.space.x4, px2rem(2)),
+    transition: 'box-shadow 150ms ease-out',
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+});
+
+export const CheckboxRipple = createComponent('span')({
+  displayName: 'CheckboxRipple',
+  Component: elemProps => {
+    return <span {...checkboxRippleStencil()} />;
+  },
+});
diff --git a/modules/react/checkbox/stories/Checkbox.stories.mdx b/modules/react/checkbox/stories/Checkbox.stories.mdx
index e7a6f15228..46e84a9e41 100644
--- a/modules/react/checkbox/stories/Checkbox.stories.mdx
+++ b/modules/react/checkbox/stories/Checkbox.stories.mdx
@@ -1,6 +1,7 @@
 import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import {Checkbox} from '@workday/canvas-kit-react/checkbox/lib/Checkbox.tsx';
+import {InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {Alert} from './examples/Alert';
 import {Basic} from './examples/Basic';
@@ -29,6 +30,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 Checkbox may be used on its own without [Form Field](/components/inputs/form-field/) since it
@@ -67,13 +80,10 @@ Checkbox supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html
 
 <ExampleCodeBlock code={RefForwarding} />
 
-### Label Position
-
-If Form Field is being used, set its `labelPosition` prop to designate the position of the label
-relative to the Checkbox. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`.
 
 <ExampleCodeBlock code={LabelPosition} />
 
@@ -103,6 +113,11 @@ or `Checkbox.ErrorType.Error` if Form Field is not being used.
 
 <ExampleCodeBlock code={Error} />
 
+### Custom Styles
+
+Checkbox supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Checkbox" fileName="/react/" />
diff --git a/modules/react/checkbox/stories/examples/Alert.tsx b/modules/react/checkbox/stories/examples/Alert.tsx
index 3b4682551d..97c38da533 100644
--- a/modules/react/checkbox/stories/examples/Alert.tsx
+++ b/modules/react/checkbox/stories/examples/Alert.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
 export const Alert = () => {
   const [checked, setChecked] = React.useState(false);
@@ -10,12 +10,16 @@ export const Alert = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="You must agree to the terms before proceeding"
-    >
-      <Checkbox checked={checked} label="I agree to the terms" onChange={handleChange} />
+    <FormField error="alert" orientation="horizontal">
+      <FormField.Container>
+        <FormField.Input
+          as={Checkbox}
+          checked={checked}
+          label="I agree to the terms"
+          onChange={handleChange}
+        />
+        <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>
+      </FormField.Container>
     </FormField>
   );
 };
diff --git a/modules/react/checkbox/stories/examples/Error.tsx b/modules/react/checkbox/stories/examples/Error.tsx
index d42861a4ce..80c1fb63b8 100644
--- a/modules/react/checkbox/stories/examples/Error.tsx
+++ b/modules/react/checkbox/stories/examples/Error.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
 export const Error = () => {
   const [checked, setChecked] = React.useState(false);
@@ -10,12 +10,16 @@ export const Error = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Error}
-      hintId="hint-error"
-      hintText="You must agree to the terms before proceeding"
-    >
-      <Checkbox checked={checked} label="I agree to the terms" onChange={handleChange} />
+    <FormField error="error" orientation="horizontal">
+      <FormField.Container>
+        <FormField.Input
+          as={Checkbox}
+          checked={checked}
+          label="I agree to the terms"
+          onChange={handleChange}
+        />
+        <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>
+      </FormField.Container>
     </FormField>
   );
 };
diff --git a/modules/react/checkbox/stories/examples/Indeterminate.tsx b/modules/react/checkbox/stories/examples/Indeterminate.tsx
index 27e776b163..042d0c90fe 100644
--- a/modules/react/checkbox/stories/examples/Indeterminate.tsx
+++ b/modules/react/checkbox/stories/examples/Indeterminate.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = createStyles({
+  marginInlineLeft: system.space.x8,
+  marginTop: system.space.x2,
+});
 
 export const Indeterminate = () => {
   const [pizzaChecked, setPizzaChecked] = React.useState(false);
@@ -58,7 +65,7 @@ export const Indeterminate = () => {
         label="Supreme Pizza Toppings"
         onChange={handlePizzaChange}
       />
-      <Box marginLeft="l" marginTop="xxs">
+      <Box cs={styleOverrides}>
         {toppings.map((topping, index) => (
           <Checkbox
             checked={topping.checked}
diff --git a/modules/react/checkbox/stories/examples/Inverse.tsx b/modules/react/checkbox/stories/examples/Inverse.tsx
index 339994f8d3..33c29d4261 100644
--- a/modules/react/checkbox/stories/examples/Inverse.tsx
+++ b/modules/react/checkbox/stories/examples/Inverse.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = createStyles({
+  gap: system.space.x4,
+  backgroundColor: system.color.bg.primary.default,
+  padding: system.space.x4,
+});
 
 export const Inverse = () => {
   const [checked, setChecked] = React.useState(false);
@@ -10,7 +18,7 @@ export const Inverse = () => {
   };
 
   return (
-    <Flex gap="s" backgroundColor="blueberry400" padding="s">
+    <Flex cs={styleOverrides}>
       <Checkbox
         variant="inverse"
         checked={checked}
diff --git a/modules/react/checkbox/stories/examples/LabelPosition.tsx b/modules/react/checkbox/stories/examples/LabelPosition.tsx
index 995d2d43f1..71e196f765 100644
--- a/modules/react/checkbox/stories/examples/LabelPosition.tsx
+++ b/modules/react/checkbox/stories/examples/LabelPosition.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
 export const LabelPosition = () => {
   const [checked, setChecked] = React.useState(false);
@@ -10,8 +10,14 @@ export const LabelPosition = () => {
   };
 
   return (
-    <FormField label="Terms" labelPosition={FormField.LabelPosition.Left}>
-      <Checkbox checked={checked} label="I agree to the terms" onChange={handleChange} />
+    <FormField orientation="horizontal">
+      <FormField.Label>Terms</FormField.Label>
+      <FormField.Input
+        as={Checkbox}
+        checked={checked}
+        label="I agree to the terms"
+        onChange={handleChange}
+      />
     </FormField>
   );
 };
diff --git a/modules/react/checkbox/stories/examples/Required.tsx b/modules/react/checkbox/stories/examples/Required.tsx
index c091198cc7..c81a3929d7 100644
--- a/modules/react/checkbox/stories/examples/Required.tsx
+++ b/modules/react/checkbox/stories/examples/Required.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
 export const Required = () => {
   const [checked, setChecked] = React.useState(false);
@@ -10,8 +10,14 @@ export const Required = () => {
   };
 
   return (
-    <FormField label="Terms" required={true}>
-      <Checkbox checked={checked} label="I agree to the terms" onChange={handleChange} />
+    <FormField isRequired={true}>
+      <FormField.Label>Terms</FormField.Label>
+      <FormField.Input
+        as={Checkbox}
+        checked={checked}
+        label="I agree to the terms"
+        onChange={handleChange}
+      />
     </FormField>
   );
 };
diff --git a/modules/react/collection/lib/ListBox.tsx b/modules/react/collection/lib/ListBox.tsx
index 8f953d6b2a..7c3cac06fd 100644
--- a/modules/react/collection/lib/ListBox.tsx
+++ b/modules/react/collection/lib/ListBox.tsx
@@ -3,15 +3,16 @@ import {
   createContainer,
   createElemPropsHook,
   createSubcomponent,
-  ExtractProps,
 } from '@workday/canvas-kit-react/common';
-import {Box, Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useListModel} from './useListModel';
 import {useListRenderItems} from './useListRenderItem';
 import {useListItemRegister} from './useListItemRegister';
 
-export interface ListBoxProps<T = any> extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
+export interface ListBoxProps<T = any> extends Omit<FlexProps, 'children'> {
   children?: React.ReactNode | ((item: T, index: number) => React.ReactNode);
   /**
    * Set the margin top of the list box. You must use this prop and not style any other way. The
@@ -37,8 +38,8 @@ export const ListBoxItem = createSubcomponent('li')({
   displayName: 'Item',
   modelHook: useListModel,
   elemPropsHook: useListItemRegister,
-})<ExtractProps<typeof Flex, never>>((elemProps, Element) => {
-  return <Box as={Element} {...elemProps} />;
+})<FlexProps>((elemProps, Element) => {
+  return <Element {...mergeStyles(elemProps)} />;
 });
 
 export const useListBox = createElemPropsHook(useListModel)(model => {
@@ -50,6 +51,29 @@ export const useListBox = createElemPropsHook(useListModel)(model => {
   };
 });
 
+const listBoxContainerStencil = createStencil({
+  base: {},
+  modifiers: {
+    orientation: {
+      vertical: {
+        overflowY: 'auto',
+      },
+      horizontal: {
+        overflowY: undefined,
+      },
+    },
+  },
+});
+
+const listBoxStencil = createStencil({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: system.space.zero,
+    marginBottom: system.space.zero,
+  },
+});
+
 /**
  * The `ListBox` component that offers vertical rendering of a collection in the form of a
  * 2-dimension list. It supports virtualization, rendering only visible items in the DOM while also
@@ -84,23 +108,31 @@ export const ListBox = createContainer('ul')({
     Item: ListBoxItem,
   },
 })<ListBoxProps>(
-  ({height, maxHeight, marginTop, marginBottom, marginY, ...elemProps}, Element, model) => {
-    // We're moving `marginY` to the container to not interfere with the virtualization size. We set
+  (
+    {height, maxHeight, marginY, marginBottom, overflowY, marginTop, ...elemProps},
+    Element,
+    model
+  ) => {
+    // We're removing `marginY, marginBottom, overflowY, marginTo` from elemProps and applying them to the container as to not interfere with the virtualization size. We set
     // the `marginY` on the Flex to `0` to avoid inaccurate scrollbars
-
-    // TODO figure out what style props should go to which `Box`
     return (
-      <Box
+      <div
         ref={model.state.containerRef}
-        marginTop={marginTop ?? marginY}
-        marginBottom={marginBottom ?? marginY}
-        maxHeight={maxHeight}
-        overflowY={model.state.orientation === 'vertical' ? 'auto' : undefined}
+        {...handleCsProp(
+          {
+            style: {
+              maxHeight,
+              marginBottom: marginBottom ?? marginY,
+              marginTop: marginTop ?? marginY,
+            },
+          },
+          listBoxContainerStencil({orientation: model.state.orientation})
+        )}
       >
-        <Flex as={Element} flexDirection="column" {...elemProps} marginY={0}>
+        <Element {...mergeStyles(elemProps, listBoxStencil())}>
           {useListRenderItems(model, elemProps.children)}
-        </Flex>
-      </Box>
+        </Element>
+      </div>
     );
   }
 );
diff --git a/modules/react/collection/spec/useCursorModel.spec.tsx b/modules/react/collection/spec/useCursorModel.spec.tsx
index 8a9607dcf6..7178351cd7 100644
--- a/modules/react/collection/spec/useCursorModel.spec.tsx
+++ b/modules/react/collection/spec/useCursorModel.spec.tsx
@@ -26,8 +26,8 @@ type CursorListState = ReturnType<typeof useCursorListModel>['state'];
 const createState = (input: Partial<CursorListState>): CursorListState => {
   return {
     nonInteractiveIds: [],
-    ...(input as CursorListState),
-  };
+    ...input,
+  } as CursorListState;
 };
 
 const createItem = (id, index) => ({id, index, value: id, textValue: id});
diff --git a/modules/react/color-picker/stories/color-input/ColorInput.stories.mdx b/modules/react/color-picker/stories/color-input/ColorInput.stories.mdx
index d6fcd8aaac..ea7dd68057 100644
--- a/modules/react/color-picker/stories/color-input/ColorInput.stories.mdx
+++ b/modules/react/color-picker/stories/color-input/ColorInput.stories.mdx
@@ -1,6 +1,7 @@
 import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {Alert} from './examples/Alert';
 import {Basic} from './examples/Basic';
@@ -29,6 +30,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 Color Input should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
@@ -74,13 +87,10 @@ the width of its container.
 
 The `grow` prop may also be applied directly to the Color Input if Form Field is not being used.
 
-### Label Position
-
-Set the `labelPosition` prop of the wrapping Form Field to designate the position of the label
-relative to the Color Input. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`.
 
 <ExampleCodeBlock code={LabelPosition} />
 
diff --git a/modules/react/color-picker/stories/color-input/examples/Alert.tsx b/modules/react/color-picker/stories/color-input/examples/Alert.tsx
index b86d78d548..e367d2b9f8 100644
--- a/modules/react/color-picker/stories/color-input/examples/Alert.tsx
+++ b/modules/react/color-picker/stories/color-input/examples/Alert.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export const Alert = () => {
@@ -10,13 +10,10 @@ export const Alert = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="Please select a background color."
-      label="Background Color"
-    >
-      <ColorInput onChange={handleChange} value={value} />
+    <FormField error="alert">
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+      <FormField.Hint>Please select a background color.</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/react/color-picker/stories/color-input/examples/Basic.tsx b/modules/react/color-picker/stories/color-input/examples/Basic.tsx
index 89a7a39abb..d7d3935702 100644
--- a/modules/react/color-picker/stories/color-input/examples/Basic.tsx
+++ b/modules/react/color-picker/stories/color-input/examples/Basic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export const Basic = () => {
@@ -10,8 +10,9 @@ export const Basic = () => {
   };
 
   return (
-    <FormField label="Background Color">
-      <ColorInput onChange={handleChange} value={value} />
+    <FormField>
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/color-picker/stories/color-input/examples/Checked.tsx b/modules/react/color-picker/stories/color-input/examples/Checked.tsx
index 794428af0c..571400360e 100644
--- a/modules/react/color-picker/stories/color-input/examples/Checked.tsx
+++ b/modules/react/color-picker/stories/color-input/examples/Checked.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export const Checked = () => {
@@ -10,8 +10,9 @@ export const Checked = () => {
   };
 
   return (
-    <FormField label="Background Color">
-      <ColorInput onChange={handleChange} showCheck={true} value={value} />
+    <FormField>
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} onChange={handleChange} showCheck={true} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/color-picker/stories/color-input/examples/Disabled.tsx b/modules/react/color-picker/stories/color-input/examples/Disabled.tsx
index b14d4c9073..7bd3bec589 100644
--- a/modules/react/color-picker/stories/color-input/examples/Disabled.tsx
+++ b/modules/react/color-picker/stories/color-input/examples/Disabled.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export const Disabled = () => {
@@ -10,8 +10,9 @@ export const Disabled = () => {
   };
 
   return (
-    <FormField label="Background Color">
-      <ColorInput disabled onChange={handleChange} value={value} />
+    <FormField>
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} disabled onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/color-picker/stories/color-input/examples/Error.tsx b/modules/react/color-picker/stories/color-input/examples/Error.tsx
index cc3ea3b32c..fe5a8c2dbd 100644
--- a/modules/react/color-picker/stories/color-input/examples/Error.tsx
+++ b/modules/react/color-picker/stories/color-input/examples/Error.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export const Error = () => {
@@ -10,13 +10,10 @@ export const Error = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Error}
-      hintId="hint-error"
-      hintText="Please select a background color."
-      label="Background Color"
-    >
-      <ColorInput onChange={handleChange} value={value} />
+    <FormField error="error">
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+      <FormField.Hint>Please select a background color.</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/react/color-picker/stories/color-input/examples/Grow.tsx b/modules/react/color-picker/stories/color-input/examples/Grow.tsx
index 07c0f24016..3698816035 100644
--- a/modules/react/color-picker/stories/color-input/examples/Grow.tsx
+++ b/modules/react/color-picker/stories/color-input/examples/Grow.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export const Grow = () => {
@@ -10,8 +10,9 @@ export const Grow = () => {
   };
 
   return (
-    <FormField grow={true} label="Background Color">
-      <ColorInput onChange={handleChange} value={value} />
+    <FormField cs={{width: '100%'}}>
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input cs={{width: '100%'}} as={ColorInput} onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/color-picker/stories/color-input/examples/LabelPosition.tsx b/modules/react/color-picker/stories/color-input/examples/LabelPosition.tsx
index f7fe42114d..78bff23fe4 100644
--- a/modules/react/color-picker/stories/color-input/examples/LabelPosition.tsx
+++ b/modules/react/color-picker/stories/color-input/examples/LabelPosition.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export const LabelPosition = () => {
@@ -10,8 +10,9 @@ export const LabelPosition = () => {
   };
 
   return (
-    <FormField label="Background Color" labelPosition={FormField.LabelPosition.Left}>
-      <ColorInput onChange={handleChange} value={value} />
+    <FormField orientation="horizontal">
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/color-picker/stories/color-input/examples/RefForwarding.tsx b/modules/react/color-picker/stories/color-input/examples/RefForwarding.tsx
index 6e77b81afc..c7ac7b4f34 100644
--- a/modules/react/color-picker/stories/color-input/examples/RefForwarding.tsx
+++ b/modules/react/color-picker/stories/color-input/examples/RefForwarding.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export const RefForwarding = () => {
@@ -17,8 +17,9 @@ export const RefForwarding = () => {
 
   return (
     <>
-      <FormField label="Background Color">
-        <ColorInput onChange={handleChange} ref={ref} value={value} />
+      <FormField>
+        <FormField.Label>Background Color</FormField.Label>
+        <FormField.Input as={ColorInput} onChange={handleChange} ref={ref} value={value} />
       </FormField>
       <PrimaryButton onClick={handleClick}>Focus Color Input</PrimaryButton>
     </>
diff --git a/modules/react/color-picker/stories/color-input/examples/Required.tsx b/modules/react/color-picker/stories/color-input/examples/Required.tsx
index 65a25b70d6..65bc7ad3a8 100644
--- a/modules/react/color-picker/stories/color-input/examples/Required.tsx
+++ b/modules/react/color-picker/stories/color-input/examples/Required.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export const Required = () => {
@@ -10,8 +10,9 @@ export const Required = () => {
   };
 
   return (
-    <FormField label="Background Color" required={true}>
-      <ColorInput onChange={handleChange} value={value} />
+    <FormField isRequired={true}>
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/color-picker/stories/color-input/examples/ValidColorChange.tsx b/modules/react/color-picker/stories/color-input/examples/ValidColorChange.tsx
index c17b60bfa7..e109e023d6 100644
--- a/modules/react/color-picker/stories/color-input/examples/ValidColorChange.tsx
+++ b/modules/react/color-picker/stories/color-input/examples/ValidColorChange.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 import {type} from '@workday/canvas-kit-react/tokens';
 
@@ -17,8 +17,10 @@ export const ValidColorChange = () => {
 
   return (
     <>
-      <FormField label="Background Color">
-        <ColorInput
+      <FormField>
+        <FormField.Label>Background Color</FormField.Label>
+        <FormField.Input
+          as={ColorInput}
           onChange={handleChange}
           onValidColorChange={handleValidColorChange}
           value={value}
diff --git a/modules/react/color-picker/stories/color-preview/ColorPreview.stories.mdx b/modules/react/color-picker/stories/color-preview/ColorPreview.stories.mdx
index 4ba08008d5..7a9d868837 100644
--- a/modules/react/color-picker/stories/color-preview/ColorPreview.stories.mdx
+++ b/modules/react/color-picker/stories/color-preview/ColorPreview.stories.mdx
@@ -1,6 +1,7 @@
 import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
+import {InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {Basic} from './examples/Basic';
 import {LabelPosition} from './examples/LabelPosition';
@@ -22,6 +23,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 <ExampleCodeBlock code={Basic} />
@@ -33,13 +46,10 @@ forward `ref` to its underlying `<input type="text">` element.
 
 <ExampleCodeBlock code={RefForwarding} />
 
-### Label Position
-
-If Form Field is being used, set its `labelPosition` prop to designate the position of the label
-relative to the Color Preview. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`.
 
 <ExampleCodeBlock code={LabelPosition} />
 
diff --git a/modules/react/color-picker/stories/color-preview/examples/LabelPosition.tsx b/modules/react/color-picker/stories/color-preview/examples/LabelPosition.tsx
index 52731076b4..716f51dbb6 100644
--- a/modules/react/color-picker/stories/color-preview/examples/LabelPosition.tsx
+++ b/modules/react/color-picker/stories/color-preview/examples/LabelPosition.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
 
 export const LabelPosition = () => {
   return (
-    <FormField label="Background Color" labelPosition={FormField.LabelPosition.Left}>
-      <ColorPreview value="#00ffcc" />
+    <FormField orientation="horizontal">
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Input as={ColorPreview} value="#00ffcc" />
     </FormField>
   );
 };
diff --git a/modules/react/color-picker/stories/color-preview/examples/RefForwarding.tsx b/modules/react/color-picker/stories/color-preview/examples/RefForwarding.tsx
index 5e869386a4..2d098dcd71 100644
--- a/modules/react/color-picker/stories/color-preview/examples/RefForwarding.tsx
+++ b/modules/react/color-picker/stories/color-preview/examples/RefForwarding.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
 import {type} from '@workday/canvas-kit-react/tokens';
 
@@ -14,8 +14,9 @@ export const RefForwarding = () => {
 
   return (
     <>
-      <FormField label="Background Color">
-        <ColorPreview ref={ref} value="#00ffcc" />
+      <FormField>
+        <FormField.Label>Background Color</FormField.Label>
+        <FormField.Input as={ColorPreview} ref={ref} value="#00ffcc" />
       </FormField>
       <p style={type.levels.subtext.large}>Width of Color Preview: {width}</p>
       <PrimaryButton onClick={handleClick}>Calculate Width of Color Preview</PrimaryButton>
diff --git a/modules/react/combobox/lib/ComboboxMenuItem.tsx b/modules/react/combobox/lib/ComboboxMenuItem.tsx
index 400e9f3565..884dae321d 100644
--- a/modules/react/combobox/lib/ComboboxMenuItem.tsx
+++ b/modules/react/combobox/lib/ComboboxMenuItem.tsx
@@ -4,7 +4,7 @@ import {
   composeHooks,
   createElemPropsHook,
   createSubcomponent,
-  styled,
+  ExtractProps,
 } from '@workday/canvas-kit-react/common';
 import {StyledMenuItem, useMenuModel} from '@workday/canvas-kit-react/menu';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
@@ -16,10 +16,11 @@ import {
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
 
 import {useComboboxModel} from './hooks/useComboboxModel';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
-export interface ComboboxMenuItemProps {
-  children: React.ReactNode;
-}
+export interface ComboboxMenuItemProps extends ExtractProps<typeof StyledMenuItem, never> {}
 
 /**
  * This hook sets up accessibility and behavior of a {@link ComboboxMenuItem Combobox.Menu.Item}
@@ -58,17 +59,34 @@ export const useComboboxMenuItem = composeHooks(
   useListItemRegister,
   useListItemAllowChildStrings
 );
+const comboboxMenuItemIconStencil = createStencil({
+  base: {
+    alignSelf: 'start',
+  },
+});
+
+export const ComboboxMenuItemIcon = createSubcomponent('span')({
+  modelHook: useComboboxModel,
+})<ExtractProps<typeof SystemIcon>>((elemProps, Element) => {
+  return <SystemIcon as={Element} {...mergeStyles(elemProps, comboboxMenuItemIconStencil())} />;
+});
+
+const comboboxMenuItemStencil = createStencil({
+  base: {
+    minHeight: system.space.x10,
+  },
+});
 
 export const ComboboxMenuItem = createSubcomponent('li')({
   modelHook: useComboboxModel,
   elemPropsHook: useComboboxMenuItem,
   subComponents: {
-    Icon: styled(SystemIcon)({alignSelf: 'start'}),
+    Icon: ComboboxMenuItemIcon,
   },
 })<ComboboxMenuItemProps>(({children, ...elemProps}, Element) => {
   return (
     <OverflowTooltip placement="left">
-      <StyledMenuItem minHeight="xl" as={Element} {...(elemProps as any)}>
+      <StyledMenuItem as={Element} {...mergeStyles(elemProps, comboboxMenuItemStencil())}>
         {children}
       </StyledMenuItem>
     </OverflowTooltip>
diff --git a/modules/react/combobox/lib/ComboboxMenuList.tsx b/modules/react/combobox/lib/ComboboxMenuList.tsx
index 5498dfc095..6b6fca5818 100644
--- a/modules/react/combobox/lib/ComboboxMenuList.tsx
+++ b/modules/react/combobox/lib/ComboboxMenuList.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 
-import {commonColors} from '@workday/canvas-kit-react/tokens';
 import {createElemPropsHook, createSubcomponent} from '@workday/canvas-kit-react/common';
-import {useMenuModel} from '@workday/canvas-kit-react/menu';
+import {useMenuModel, menuListStencil} from '@workday/canvas-kit-react/menu';
 import {ListBox, ListBoxProps} from '@workday/canvas-kit-react/collection';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useComboboxModel} from './hooks/useComboboxModel';
+import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
 
 export interface ComboboxMenuListProps<T = any> extends ListBoxProps<T> {}
 
@@ -19,10 +20,14 @@ export const useComboboxMenuList = createElemPropsHook(useMenuModel)(model => {
     role: 'listbox',
     'aria-labelledby': model.state.id,
     id: `${model.state.id}-list`,
-    flexDirection: model.state.orientation === 'vertical' ? 'column' : 'row',
   } as const;
 });
 
+const comboboxMenuListStencil = createStencil({
+  base: {},
+  extends: menuListStencil,
+});
+
 export const ComboboxMenuList = createSubcomponent('ul')({
   modelHook: useComboboxModel,
   elemPropsHook: useComboboxMenuList,
@@ -31,13 +36,8 @@ export const ComboboxMenuList = createSubcomponent('ul')({
     <ListBox
       as={Element}
       model={model}
-      background={commonColors.background}
-      borderRadius="zero"
-      padding="zero"
-      marginY="xxs"
-      gap="zero"
-      overflowY="auto"
-      {...elemProps}
+      marginY={cssVar(system.space.x2)}
+      {...handleCsProp(elemProps, comboboxMenuListStencil({orientation: model.state.orientation}))}
     >
       {children}
     </ListBox>
diff --git a/modules/react/combobox/stories/Combobox.stories.mdx b/modules/react/combobox/stories/Combobox.stories.mdx
index 999b3345da..810e7ce89e 100644
--- a/modules/react/combobox/stories/Combobox.stories.mdx
+++ b/modules/react/combobox/stories/Combobox.stories.mdx
@@ -39,6 +39,12 @@ communicating with a server.
 
 <ExampleCodeBlock code={Autocomplete} />
 
+### Custom Styles
+
+Combobox and its subcomponents support custom styling via the `cs` prop. For more information, check
+our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Combobox" fileName="/react/" hideDescription />
diff --git a/modules/react/combobox/stories/examples/Autocomplete.tsx b/modules/react/combobox/stories/examples/Autocomplete.tsx
index e5908aaffa..165a9ef0b9 100644
--- a/modules/react/combobox/stories/examples/Autocomplete.tsx
+++ b/modules/react/combobox/stories/examples/Autocomplete.tsx
@@ -17,6 +17,8 @@ import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
 const fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];
@@ -44,6 +46,20 @@ const AutoCompleteInput = createSubcomponent(TextInput)({
   return <Combobox.Input as={Element} {...elemProps} />;
 });
 
+const styleOverrides = {
+  inputGroupInner: createStyles({
+    width: px2rem(20),
+    transition: 'opacity 100ms ease',
+  }),
+  loadingDots: createStyles({
+    display: 'flex',
+    transform: 'scale(0.3)',
+  }),
+  comboboxMenuList: createStyles({
+    maxHeight: px2rem(200),
+  }),
+};
+
 export const Autocomplete = () => {
   const {model, loader} = useComboboxLoader(
     {
@@ -89,18 +105,18 @@ export const Autocomplete = () => {
   );
 
   return (
-    <FormField orientation="horizontal" hasError isRequired>
+    <FormField orientation="horizontal" isRequired>
       <FormField.Label>Fruit</FormField.Label>
       <Combobox model={model} onChange={event => console.log('input', event.currentTarget.value)}>
         <InputGroup>
           <InputGroup.Input as={FormField.Input.as(AutoCompleteInput)} />
           <InputGroup.InnerEnd
+            cs={styleOverrides.inputGroupInner}
             pointerEvents="none"
-            style={{opacity: loader.isLoading ? 1 : 0, transition: 'opacity 100ms ease'}}
-            width={20}
+            style={{opacity: loader.isLoading ? system.opacity.full : system.opacity.zero}}
             data-loading={loader.isLoading}
           >
-            <LoadingDots style={{display: 'flex', transform: 'scale(0.3)'}} />
+            <LoadingDots cs={styleOverrides.loadingDots} />
           </InputGroup.InnerEnd>
           <InputGroup.InnerEnd>
             <InputGroup.ClearButton data-testid="clear" />
@@ -112,7 +128,7 @@ export const Autocomplete = () => {
               <StyledMenuItem as="span">No Results Found</StyledMenuItem>
             )}
             {model.state.items.length > 0 && (
-              <Combobox.Menu.List maxHeight={200}>
+              <Combobox.Menu.List cs={styleOverrides.comboboxMenuList}>
                 {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
               </Combobox.Menu.List>
             )}
diff --git a/modules/react/common/lib/theming/index.ts b/modules/react/common/lib/theming/index.ts
index 270b2a1f58..474cb63b37 100644
--- a/modules/react/common/lib/theming/index.ts
+++ b/modules/react/common/lib/theming/index.ts
@@ -1,7 +1,7 @@
 export * from './breakpoints';
 export {createCanvasTheme} from './createCanvasTheme';
 export * from './types';
-export {default as styled, StyleRewriteFn} from './styled';
+export {default as styled, StyleRewriteFn, filterOutProps} from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useThemedRing';
diff --git a/modules/react/common/lib/theming/styled.ts b/modules/react/common/lib/theming/styled.ts
index 28b41a9d41..1212ebcd87 100644
--- a/modules/react/common/lib/theming/styled.ts
+++ b/modules/react/common/lib/theming/styled.ts
@@ -6,32 +6,39 @@ import rtlCSSJS from 'rtl-css-js';
 
 const noop = (styles: any) => styles;
 
+interface ThemingStyledOptions {
+  shouldForwardProp?: (prop: any) => boolean;
+}
+
+export const filterOutProps = (omittedProps: string[]) => {
+  return (prop: string) => !omittedProps.includes(prop);
+};
+
 // Pulled from https://github.com/emotion-js/emotion/blob/master/packages/styled-base/src/utils.js#L6 (not exported)
 type Interpolations = Array<any>;
 export type StyleRewriteFn = (obj?: CSSProperties) => CSSProperties | undefined;
 
-function styled<Props>(node: any) {
+function styled<Props>(node: any, options?: ThemingStyledOptions) {
   return (...args: Interpolation<Props>[]) => {
     const newArgs: Interpolations = args.map(
-      interpolation => (
-        props: Props & {theme: EmotionCanvasTheme & {_styleRewriteFn?: StyleRewriteFn}}
-      ) => {
-        props.theme = useTheme(props.theme);
-        const direction = props.theme.canvas.direction;
-        const maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
-        const maybeConvert = props.theme._styleRewriteFn || noop;
-        try {
-          if (typeof interpolation === 'function') {
-            return maybeFlip(maybeConvert(interpolation(props)) as CSSObject);
+      interpolation =>
+        (props: Props & {theme: EmotionCanvasTheme & {_styleRewriteFn?: StyleRewriteFn}}) => {
+          props.theme = useTheme(props.theme);
+          const direction = props.theme.canvas.direction;
+          const maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
+          const maybeConvert = props.theme._styleRewriteFn || noop;
+          try {
+            if (typeof interpolation === 'function') {
+              return maybeFlip(maybeConvert(interpolation(props)) as CSSObject);
+            }
+            return maybeFlip(maybeConvert(interpolation) as CSSObject);
+          } catch (e) {
+            return maybeConvert(interpolation);
           }
-          return maybeFlip(maybeConvert(interpolation) as CSSObject);
-        } catch (e) {
-          return maybeConvert(interpolation);
         }
-      }
     );
 
-    return emotionStyled(node)(newArgs);
+    return emotionStyled(node, options)(newArgs);
   };
 }
 
diff --git a/modules/react/common/lib/types.ts b/modules/react/common/lib/types.ts
index b45dad4889..214cb1e35d 100644
--- a/modules/react/common/lib/types.ts
+++ b/modules/react/common/lib/types.ts
@@ -20,8 +20,8 @@ export interface TransformOrigin {
  * Error types
  */
 export enum ErrorType {
-  Error,
-  Alert,
+  Error = 'error',
+  Alert = 'alert',
 }
 
 /**
diff --git a/modules/react/common/spec/components.spec.tsx b/modules/react/common/spec/components.spec.tsx
index 4a79de69b6..29f21040f2 100644
--- a/modules/react/common/spec/components.spec.tsx
+++ b/modules/react/common/spec/components.spec.tsx
@@ -239,7 +239,9 @@ describe('createHook', () => {
 
     const props = hook(emptyModel, {bar: 'baz'}, {current: divElement});
 
-    expectTypeOf(props).toEqualTypeOf<{foo: string} & {bar: string} & {ref: React.Ref<unknown>}>();
+    expectTypeOf(props).toEqualTypeOf<
+      {foo: string} & {bar: string} & {ref: React.Ref<unknown> | undefined}
+    >();
     expect(props).toEqual({foo: 'bar', bar: 'baz', ref: {current: divElement}});
   });
 
@@ -289,7 +291,7 @@ describe('createHook', () => {
 describe('useForkRef', () => {
   it('should set the current value of the second ref if the first ref is undefined', () => {
     const ref1 = undefined;
-    const ref2 = {current: null};
+    const ref2 = {current: 'foo'};
 
     const ref = useForkRef(ref1, ref2);
 
@@ -299,7 +301,7 @@ describe('useForkRef', () => {
   });
 
   it('should set the current value of the first ref if the second ref is undefined', () => {
-    const ref1 = {current: null};
+    const ref1 = {current: 'foo'};
     const ref2 = undefined;
 
     const ref = useForkRef(ref1, ref2);
@@ -310,8 +312,8 @@ describe('useForkRef', () => {
   });
 
   it('should set the current value of both refs if both refs are RefObjects', () => {
-    const ref1 = {current: null};
-    const ref2 = {current: null};
+    const ref1 = {current: 'ref1'};
+    const ref2 = {current: 'ref2'};
 
     const ref = useForkRef(ref1, ref2);
 
@@ -449,8 +451,9 @@ describe('composeHooks', () => {
     // This test is covering all previous tests, but with more hooks.
     // This test should only fail if the implementation doesn't handle more than 2 hooks
     const model = {state: {foo: 'bar'}, events: {}};
-    const hooks = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(number => (myModel, props) =>
-      mergeProps({id: number, foo: number, [`hook${number}`]: model.state.foo}, props)
+    const hooks = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(
+      number => (myModel, props) =>
+        mergeProps({id: number, foo: number, [`hook${number}`]: model.state.foo}, props)
     );
 
     const props = (composeHooks as any).apply(null, hooks as any)(myModel, {foo: 'baz'}, null);
diff --git a/modules/react/common/spec/mergeProps.spec.tsx b/modules/react/common/spec/mergeProps.spec.tsx
index e77954c20f..8a7781dbf9 100644
--- a/modules/react/common/spec/mergeProps.spec.tsx
+++ b/modules/react/common/spec/mergeProps.spec.tsx
@@ -71,9 +71,7 @@ describe('mergeProps', () => {
     const target = {
       onClick: targetSpy,
     };
-    const source = {
-      onClick: undefined,
-    };
+    const source = {};
 
     const mergedProps = mergeProps(target, source);
     mergedProps.onClick({event: 'foo'});
diff --git a/modules/react/common/stories/examples/ResponsiveStyles.tsx b/modules/react/common/stories/examples/ResponsiveStyles.tsx
index e0f9fad451..4fcbebfd11 100644
--- a/modules/react/common/stories/examples/ResponsiveStyles.tsx
+++ b/modules/react/common/stories/examples/ResponsiveStyles.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import {Box, Grid, Flex} from '@workday/canvas-kit-react/layout';
 import {Text} from '@workday/canvas-kit-react/text';
 import {useResponsiveContainerStyles, useResizeObserver} from '@workday/canvas-kit-react/common';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 
 const HeadingText = ({children, ...props}) => (
@@ -84,9 +84,10 @@ export const ResponsiveContainer = () => {
 
   return (
     <Box ref={ref} width={contWidth}>
-      <FormField label={'Container Size'}>
+      <FormField>
+        <FormField.Label>Container Size</FormField.Label>
         <Select items={['1024px', '768px', '320px']} initialSelectedIds={['1024px']}>
-          <Select.Input onChange={handleChange} />
+          <FormField.Input as={Select.Input} onChange={handleChange} />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
diff --git a/modules/react/dialog/stories/examples/Basic.tsx b/modules/react/dialog/stories/examples/Basic.tsx
index 9125eaf20e..3061eb5752 100644
--- a/modules/react/dialog/stories/examples/Basic.tsx
+++ b/modules/react/dialog/stories/examples/Basic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Dialog} from '@workday/canvas-kit-react/dialog';
@@ -23,8 +23,9 @@ export const Basic = () => {
           <Dialog.CloseIcon aria-label="Close" />
           <Dialog.Heading paddingTop="m">Sign Up for 15% Off Your Next Order</Dialog.Heading>
           <Dialog.Body>
-            <FormField label="Email">
-              <TextInput onChange={handleChange} value={value} />
+            <FormField>
+              <FormField.Label>Email</FormField.Label>
+              <FormField.Input as={TextInput} onChange={handleChange} value={value} />
             </FormField>
           </Dialog.Body>
           <Flex gap="s" padding="xxs" marginTop="xxs">
diff --git a/modules/react/dialog/stories/examples/Focus.tsx b/modules/react/dialog/stories/examples/Focus.tsx
index 3434e1655c..94c65ad3e3 100644
--- a/modules/react/dialog/stories/examples/Focus.tsx
+++ b/modules/react/dialog/stories/examples/Focus.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Dialog} from '@workday/canvas-kit-react/dialog';
@@ -25,8 +25,9 @@ export const Focus = () => {
             <Dialog.CloseIcon aria-label="Close" />
             <Dialog.Heading paddingTop="m">Sign Up for 15% Off Your Next Order</Dialog.Heading>
             <Dialog.Body>
-              <FormField label="Email">
-                <TextInput onChange={handleChange} value={value} />
+              <FormField>
+                <FormField.Label>Email</FormField.Label>
+                <FormField.Input as={TextInput} onChange={handleChange} value={value} />
               </FormField>
             </Dialog.Body>
             <Flex gap="s" padding="xxs" marginTop="xxs">
diff --git a/modules/react/form-field/lib/FormField.tsx b/modules/react/form-field/lib/FormField.tsx
index 0c45913898..7f3961c796 100644
--- a/modules/react/form-field/lib/FormField.tsx
+++ b/modules/react/form-field/lib/FormField.tsx
@@ -10,7 +10,9 @@ import {
 import {Hint} from './Hint';
 import {Label} from './Label';
 import {FormFieldLabelPosition, FormFieldLabelPositionBehavior} from './types';
-
+/**
+ * @deprecated ⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ */
 export interface FormFieldProps
   extends Themeable,
     React.HTMLAttributes<HTMLDivElement>,
@@ -136,7 +138,9 @@ const FormFieldInputContainer = styled('div')<GrowthBehavior & FormFieldLabelPos
     };
   }
 );
-
+/**
+ * @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ */
 export class FormField extends React.Component<React.PropsWithChildren<FormFieldProps>> {
   static LabelPosition = FormFieldLabelPosition;
   static ErrorType = ErrorType;
diff --git a/modules/react/form-field/lib/Hint.tsx b/modules/react/form-field/lib/Hint.tsx
index eebf26dfe8..dfdda67276 100644
--- a/modules/react/form-field/lib/Hint.tsx
+++ b/modules/react/form-field/lib/Hint.tsx
@@ -2,7 +2,9 @@ import * as React from 'react';
 import {ErrorType, Themeable, styled} from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';
 import {Subtext, Text} from '@workday/canvas-kit-react/text';
-
+/**
+ * @deprecated ⚠️ `HintProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ */
 export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * The type of error associated with the Hint (if applicable).
@@ -23,7 +25,9 @@ export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraph
 const Message = styled(Subtext)<Pick<HintProps, 'error'>>(
   ({error, theme}) => error === ErrorType.Error && {color: theme.canvas.palette.error.main}
 );
-
+/**
+ * @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ */
 class Hint extends React.Component<HintProps> {
   static ErrorType = ErrorType;
 
diff --git a/modules/react/form-field/lib/Label.tsx b/modules/react/form-field/lib/Label.tsx
index 28b1770ac4..cb093cebdb 100644
--- a/modules/react/form-field/lib/Label.tsx
+++ b/modules/react/form-field/lib/Label.tsx
@@ -2,7 +2,9 @@ import * as React from 'react';
 import {colors, space, type} from '@workday/canvas-kit-react/tokens';
 import {accessibleHide as accessibleHideCSS, styled} from '@workday/canvas-kit-react/common';
 import {FormFieldLabelPosition, FormFieldLabelPositionBehavior} from './types';
-
+/**
+ * @deprecated ⚠️ `LabelProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ */
 export interface LabelProps extends FormFieldLabelPositionBehavior {
   /**
    * The position of the Label.
@@ -87,7 +89,9 @@ const LegendComponent = styled('legend')<LabelProps>(...labelStyles, ({labelPosi
 });
 
 const LabelComponent = styled('label')<LabelProps>(...labelStyles);
-
+/**
+ * @deprecated ⚠️ `Label` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ */
 class Label extends React.Component<React.PropsWithChildren<LabelProps>> {
   static Position = FormFieldLabelPosition;
 
diff --git a/modules/react/form-field/lib/types.ts b/modules/react/form-field/lib/types.ts
index 1141cf6965..aea9b117d1 100644
--- a/modules/react/form-field/lib/types.ts
+++ b/modules/react/form-field/lib/types.ts
@@ -1,12 +1,17 @@
 /**
+ *
  * The position of the FormField label (Top vs Left vs Hidden).
+ *
+ * @deprecated ⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
  */
 export enum FormFieldLabelPosition {
   Top,
   Left,
   Hidden,
 }
-
+/**
+ * @deprecated ⚠️ `FormFieldLabelPositionBehavior` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ */
 export interface FormFieldLabelPositionBehavior {
   labelPosition?: FormFieldLabelPosition;
 }
diff --git a/modules/react/form-field/spec/FormField.spec.tsx b/modules/react/form-field/spec/FormField.spec.tsx
index 94777112a2..6f4a31ad7d 100644
--- a/modules/react/form-field/spec/FormField.spec.tsx
+++ b/modules/react/form-field/spec/FormField.spec.tsx
@@ -137,7 +137,7 @@ describe('FormField', () => {
           <input type="text" />
         </FormField>
       );
-      const uniqueId = container.querySelector('input').getAttribute('id');
+      const uniqueId = container.querySelector('input')!.getAttribute('id');
       expect(container.querySelector('input')).toHaveAttribute('id', uniqueId);
     });
   });
diff --git a/modules/react/form-field/stories/FormField.stories.mdx b/modules/react/form-field/stories/FormField.stories.mdx
index eb3dd59086..30bdda31e1 100644
--- a/modules/react/form-field/stories/FormField.stories.mdx
+++ b/modules/react/form-field/stories/FormField.stories.mdx
@@ -13,11 +13,20 @@ import {Grow} from './examples/Grow.tsx';
 import {Hint} from './examples/Hint.tsx';
 import {LabelPosition} from './examples/LabelPosition.tsx';
 import {Required} from './examples/Required.tsx';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 <Meta title="Components/Inputs/Form Field" component={FormField} />
 
 # Canvas Kit Form Field
 
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
+
+`FormField` in Main has been deprecated and will be removed in a future major version. Please use
+[`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic)
+instead.
+
 Form Field allows users to wrap input components to make them accessible and adds complementary
 labels and error messages.
 
diff --git a/modules/react/form-field/stories/examples/Basic.tsx b/modules/react/form-field/stories/examples/Basic.tsx
index be6857a19c..b4aa9dc2ba 100644
--- a/modules/react/form-field/stories/examples/Basic.tsx
+++ b/modules/react/form-field/stories/examples/Basic.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormFieldLabelPosition} from '../../lib/types';
 
 export const Basic = () => {
   const [value, setValue] = React.useState('');
diff --git a/modules/react/form-field/stories/visual-testing/stories_Checkbox.tsx b/modules/react/form-field/stories/visual-testing/stories_Checkbox.tsx
index 8c67f80ab5..569e147df3 100644
--- a/modules/react/form-field/stories/visual-testing/stories_Checkbox.tsx
+++ b/modules/react/form-field/stories/visual-testing/stories_Checkbox.tsx
@@ -87,6 +87,11 @@ export const InverseCheckboxStates = () => (
             {value: true, label: 'Indeterminate'},
             {value: false, label: ''},
           ],
+          error: [
+            {value: undefined, label: ''},
+            {value: Checkbox.ErrorType.Alert, label: 'Alert'},
+            {value: Checkbox.ErrorType.Error, label: 'Error'},
+          ],
         },
         props => {
           if (props.indeterminate && !props.checked) {
diff --git a/modules/react/form-field/stories/visual-testing/stories_ColorInput.tsx b/modules/react/form-field/stories/visual-testing/stories_ColorInput.tsx
index 225bb96e35..82dd97f120 100644
--- a/modules/react/form-field/stories/visual-testing/stories_ColorInput.tsx
+++ b/modules/react/form-field/stories/visual-testing/stories_ColorInput.tsx
@@ -8,7 +8,7 @@ import {
 import {withSnapshotsEnabled, customColorTheme} from '../../../../../utils/storybook';
 
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
 export default withSnapshotsEnabled({
   title: 'Testing/Inputs/Color Picker/Color Input',
@@ -34,8 +34,8 @@ export const ColorInputStates = () => (
           ],
           error: [
             {value: undefined, label: ''},
-            {value: FormField.ErrorType.Alert, label: 'Alert'},
-            {value: FormField.ErrorType.Error, label: 'Error'},
+            {value: 'alert', label: 'Alert'},
+            {value: 'error', label: 'Error'},
           ],
         },
         props => {
@@ -71,7 +71,11 @@ export const ColorInputStates = () => (
         }
       )}
     >
-      {props => <ColorInput {...props} />}
+      {props => (
+        <FormField error={props.error}>
+          <FormField.Input as={ColorInput} {...props} />
+        </FormField>
+      )}
     </ComponentStatesTable>
   </StaticStates>
 );
diff --git a/modules/react/form-field/stories/visual-testing/stories_Radio.tsx b/modules/react/form-field/stories/visual-testing/stories_Radio.tsx
index c8d67c9554..753dfab5ea 100644
--- a/modules/react/form-field/stories/visual-testing/stories_Radio.tsx
+++ b/modules/react/form-field/stories/visual-testing/stories_Radio.tsx
@@ -8,10 +8,7 @@ import {
 import {withSnapshotsEnabled, customColorTheme} from '../../../../../utils/storybook';
 
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-
-const hintText = 'Helpful text goes here.';
-const hintId = 'error-desc-id';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
 export default withSnapshotsEnabled({
   title: 'Testing/Inputs/Radio',
@@ -19,7 +16,7 @@ export default withSnapshotsEnabled({
 });
 
 const testGroup = (
-  <RadioGroup name="contact" value={'email'}>
+  <FormField.Input as={RadioGroup} name="contact" value={'email'}>
     <Radio id="1" value="email" label="E-mail" />
     <Radio id="2" value="phone" label="Phone" />
     <Radio id="3" value="fax" label="Fax (disabled)" disabled={true} />
@@ -28,7 +25,7 @@ const testGroup = (
       value="mail"
       label="Mail (US Postal Service aka USPS), a longer than normal label"
     />
-  </RadioGroup>
+  </FormField.Input>
 );
 
 export const RadioStates = () => (
@@ -81,14 +78,14 @@ export const RadioStates = () => (
         rowProps={permutateProps({
           error: [
             {value: undefined, label: 'No Error'},
-            {value: FormField.ErrorType.Alert, label: 'Alert'},
-            {value: FormField.ErrorType.Error, label: 'Error'},
+            {value: 'alert', label: 'Alert'},
+            {value: 'error', label: 'Error'},
           ],
         })}
         columnProps={[
           {
             label: 'Left Label',
-            props: {label: 'Contact', labelPosition: FormField.LabelPosition.Left},
+            props: {label: 'Contact', orientation: 'horizontal'},
           },
           {
             label: 'Top Label',
@@ -97,13 +94,19 @@ export const RadioStates = () => (
         ]}
       >
         {props => (
-          <FormField
-            useFieldset={true}
-            hintText={typeof props.error !== 'undefined' ? hintText : undefined}
-            hintId={hintId}
-            {...props}
-          >
-            {testGroup}
+          <FormField as="fieldset" {...props}>
+            <FormField.Label>{props.label}</FormField.Label>
+            {props.orientation === 'horizontal' ? (
+              <FormField.Container>
+                {testGroup}
+                {props.error && <FormField.Hint>hintText</FormField.Hint>}
+              </FormField.Container>
+            ) : (
+              <>
+                {testGroup}
+                {props.error && <FormField.Hint>hintText</FormField.Hint>}
+              </>
+            )}
           </FormField>
         )}
       </ComponentStatesTable>
@@ -114,8 +117,8 @@ export const RadioStates = () => (
         rowProps={permutateProps({
           error: [
             {value: undefined, label: 'No Error'},
-            {value: FormField.ErrorType.Alert, label: 'Alert'},
-            {value: FormField.ErrorType.Error, label: 'Error'},
+            {value: 'alert', label: 'Alert'},
+            {value: 'error', label: 'Error'},
           ],
         })}
         columnProps={[
@@ -126,13 +129,15 @@ export const RadioStates = () => (
         ]}
       >
         {props => (
-          <FormField
-            useFieldset={true}
-            hintText={typeof props.error !== 'undefined' ? hintText : undefined}
-            hintId={hintId}
-            {...props}
-          >
+          <FormField as="fieldset" {...props} cs={{width: props.grow ? '100%' : undefined}}>
+            <FormField.Label>{props.label}</FormField.Label>
             {testGroup}
+            {props.orientation === 'horizontal' && (
+              <FormField.Container>
+                {testGroup} {props.error && <FormField.Hint>hintText</FormField.Hint>}
+              </FormField.Container>
+            )}
+            {props.error && <FormField.Hint>hintText</FormField.Hint>}
           </FormField>
         )}
       </ComponentStatesTable>
@@ -140,17 +145,22 @@ export const RadioStates = () => (
 
     <h3>RadioGroup (wrapping)</h3>
     <div style={{maxWidth: 480}}>
-      <FormField
-        label="Really long label. Really long label. Really long label. Really long label. Really long label. Really long label."
-        labelPosition={FormField.LabelPosition.Left}
-        useFieldset={true}
-      >
+      <FormField orientation="horizontal" as="fieldset">
+        <FormField.Label as="legend">
+          Really long label. Really long label. Really long label. Really long label. Really long
+          label. Really long label.
+        </FormField.Label>
         {testGroup}
       </FormField>
-      <FormField
-        label="Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label."
-        useFieldset={true}
-      >
+      <FormField as="fieldset">
+        <FormField.Label as="legend">
+          Really long label. Really long label. Really long label. Really long label. Really long
+          label. Really long label. Really long label. Really long label. Really long label. Really
+          long label. Really long label. Really long label. Really long label. Really long label.
+          Really long label. Really long label. Really long label. Really long label. Really long
+          label. Really long label. Really long label. Really long label. Really long label. Really
+          long label. Really long label. Really long label.
+        </FormField.Label>
         {testGroup}
       </FormField>
     </div>
diff --git a/modules/react/icon/index.ts b/modules/react/icon/index.ts
index 5a4b4ca346..af3173fe90 100644
--- a/modules/react/icon/index.ts
+++ b/modules/react/icon/index.ts
@@ -3,4 +3,4 @@ export * from './lib/AppletIcon';
 export * from './lib/SystemIcon';
 export * from './lib/SystemIconCircle';
 export * from './lib/Graphic';
-export * from './lib/Svg';
+export {Svg, SvgProps, svgStencil} from './lib/Svg';
diff --git a/modules/react/icon/lib/AccentIcon.tsx b/modules/react/icon/lib/AccentIcon.tsx
index cbe5498c4b..394cef9120 100644
--- a/modules/react/icon/lib/AccentIcon.tsx
+++ b/modules/react/icon/lib/AccentIcon.tsx
@@ -2,24 +2,30 @@ import * as React from 'react';
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasAccentIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
-import {Icon, IconProps} from './Icon';
 import {createComponent, getColor} from '@workday/canvas-kit-react/common';
 import {SystemPropValues} from '@workday/canvas-kit-react/layout';
+import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+import {Svg, SvgProps, svgStencil, transformColorNameToToken} from './Svg';
 
+/**
+ * @deprecated Interface `AccentIconStyles` will be removed in a future version. All props will be moved inside `AccentIconProps`. Consider to use the new tokens set to set `color` prop: `color={base.blueberry500}`.
+ */
 export interface AccentIconStyles {
   /**
    * The fill color of the AccentIcon.
-   * @default colors.blueberry500
+   * @default base.blueberry500
    */
   color?: SystemPropValues['color'];
   /**
-   * If true, set the background fill of the AccentIcon to `transparent`. If false, set the background fill of the AccentIcon to `colors.frenchVanilla100`.
+   * If true, set the background fill of the AccentIcon to `transparent`.
+   * If false, set the background fill of the AccentIcon to `base.frenchVanilla100`.
    * @default false
    */
   transparent?: boolean;
 }
 
-export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src' | 'type'> {
+export interface AccentIconProps extends AccentIconStyles, Omit<SvgProps, 'src' | 'type'> {
   /**
    *  The icon to display from `@workday/canvas-accent-icons-web`.
    */
@@ -31,6 +37,9 @@ export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src'
   size?: number;
 }
 
+/**
+ * @deprecated `accentIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `accentIconStencil` instead.
+ */
 export const accentIconStyles = ({
   color = colors.blueberry500,
   transparent = false,
@@ -43,23 +52,52 @@ export const accentIconStyles = ({
   },
 });
 
+export const accentIconStencil = createStencil({
+  extends: svgStencil,
+  vars: {
+    color: '',
+  },
+  base: ({color, size}) => ({
+    [size]: px2rem(56),
+    '& .color-500': {
+      fill: cssVar(color, base.blueberry500),
+    },
+    '& .french-vanilla-100': {
+      fill: base.frenchVanilla100,
+    },
+  }),
+  modifiers: {
+    transparent: {
+      true: {
+        '& .french-vanilla-100': {
+          fill: 'transparent',
+        },
+      },
+    },
+  },
+});
+
 export const AccentIcon = createComponent('span')({
   displayName: 'AccentIcon',
   Component: (
-    {transparent = false, size = 56, icon, color, shouldMirror, ...elemProps}: AccentIconProps,
+    {transparent, size, icon, color, shouldMirror, ...elemProps}: AccentIconProps,
     ref,
     Element
   ) => {
     return (
-      <Icon
+      <Svg
         src={icon}
         type={CanvasIconTypes.Accent}
-        styles={accentIconStyles({color, transparent})}
-        size={size}
         as={Element}
         ref={ref}
-        shouldMirror={shouldMirror}
-        {...elemProps}
+        {...handleCsProp(elemProps, [
+          accentIconStencil({
+            color: transformColorNameToToken(color),
+            size: typeof size === 'number' ? px2rem(size) : undefined,
+            shouldMirror,
+            transparent,
+          }),
+        ])}
       />
     );
   },
diff --git a/modules/react/icon/lib/AppletIcon.tsx b/modules/react/icon/lib/AppletIcon.tsx
index 0832b165b6..bf7b761544 100644
--- a/modules/react/icon/lib/AppletIcon.tsx
+++ b/modules/react/icon/lib/AppletIcon.tsx
@@ -2,9 +2,14 @@ import * as React from 'react';
 import {colors, BrandingColor, CanvasColor} from '@workday/canvas-kit-react/tokens';
 import {CanvasAppletIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
-import {Icon, IconProps} from './Icon';
+import {Svg, SvgProps, svgStencil} from './Svg';
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {handleCsProp, createStencil, px2rem, cssVar} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
 
+/**
+ * @deprecated Interface `AppletIconStyles` will be removed in a future version. All props will be moved inside `AppletIconProps`.
+ */
 export interface AppletIconStyles {
   /**
    * The icon color hue. Must use a member of the `AppletIcon.Colors` static enum.
@@ -13,6 +18,9 @@ export interface AppletIconStyles {
   color?: BrandingColor;
 }
 
+/**
+ * @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead.
+ */
 export const appletIconStyles = ({
   color = BrandingColor.Blueberry,
 }: AppletIconStyles): CSSObject => {
@@ -55,7 +63,7 @@ export const appletIconStyles = ({
   };
 };
 
-export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'shouldMirror'> {
+export interface AppletIconProps extends AppletIconStyles, Pick<SvgProps, 'shouldMirror' | 'cs'> {
   /**
    * The icon to display from `@workday/canvas-applet-icons-web`.
    */
@@ -67,23 +75,56 @@ export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'shou
   size?: number;
 }
 
+export const appletIconStencil = createStencil({
+  extends: svgStencil,
+  vars: {
+    color200: '',
+    color300: '',
+    color400: '',
+    color500: '',
+  },
+  base: ({color200, color300, color400, color500, size}) => ({
+    [size]: px2rem(92),
+    '& .color-100': {
+      fill: base.frenchVanilla100,
+    },
+    '& .color-200': {
+      fill: cssVar(color200, base.blueberry200),
+    },
+    '& .color-300': {
+      fill: cssVar(color300, base.blueberry300),
+    },
+    '& .color-400': {
+      fill: cssVar(color400, base.blueberry400),
+    },
+    '& .color-400-alpha-20': {
+      fill: cssVar(color400, base.blueberry400),
+    },
+    '& .color-500': {
+      fill: cssVar(color500, base.blueberry400),
+    },
+  }),
+});
+
 export const AppletIcon = createComponent('span')({
   displayName: 'AppletIcon',
-  Component: (
-    {size = 92, icon, color, shouldMirror, ...elemProps}: AppletIconProps,
-    ref,
-    Element
-  ) => {
+  Component: ({size, icon, color, ...elemProps}: AppletIconProps, ref, Element) => {
+    const colors = color && {
+      color200: base[`${color}200` as const],
+      color300: base[`${color}300` as const],
+      color400: base[`${color}400` as const],
+      color500: base[`${color}500` as const],
+    };
+
     return (
-      <Icon
+      <Svg
         src={icon}
         type={CanvasIconTypes.Applet}
-        styles={appletIconStyles({color})}
         as={Element}
-        size={size}
         ref={ref}
-        shouldMirror={shouldMirror}
-        {...elemProps}
+        {...handleCsProp(elemProps, [
+          appletIconStencil({...colors, size: size ? px2rem(size) : undefined}),
+        ])}
       />
     );
   },
diff --git a/modules/react/icon/lib/Graphic.tsx b/modules/react/icon/lib/Graphic.tsx
index 7e578f0c6f..6e9e4a73e5 100644
--- a/modules/react/icon/lib/Graphic.tsx
+++ b/modules/react/icon/lib/Graphic.tsx
@@ -1,9 +1,13 @@
 import * as React from 'react';
 import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
-import {Svg, SvgProps} from './Svg';
+import {Svg, SvgProps, svgStencil} from './Svg';
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 
+/**
+ * @deprecated Interface `GraphicStyles` will be removed in a future version. `grow` prop will be moved inside `GraphicProps`.
+ */
 export interface GraphicStyles {
   /**
    * The width of the Graphic in `px`. The Graphic's `width` takes precedence over its `height` in order to preserve its proportions.
@@ -22,13 +26,16 @@ export interface GraphicStyles {
   grow?: boolean;
 }
 
-export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'shouldMirror'> {
+export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'shouldMirror' | 'cs'> {
   /**
    * The graphic to display from `@workday/canvas-graphics-web`.
    */
   src: CanvasGraphic;
 }
 
+/**
+ * @deprecated `graphicStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `graphicStencil` instead.
+ */
 export const graphicStyles = ({width, height, grow}: GraphicStyles): CSSObject => {
   if (grow) {
     return {
@@ -59,22 +66,35 @@ export const graphicStyles = ({width, height, grow}: GraphicStyles): CSSObject =
   return {};
 };
 
+export const graphicStencil = createStencil({
+  extends: svgStencil,
+  base: {},
+  modifiers: {
+    grow: {
+      true: {
+        width: '100%',
+        [svgStencil.vars.width]: '100%',
+      },
+    },
+  },
+});
+
 export const Graphic = createComponent('span')({
   displayName: 'Graphic',
-  Component: (
-    {grow = false, src, width, height, shouldMirror, ...elemProps}: GraphicProps,
-    ref,
-    Element
-  ) => {
+  Component: ({grow, width, height, ...elemProps}: GraphicProps, ref, Element) => {
     return (
       <Svg
-        src={src}
-        styles={graphicStyles({width, height, grow})}
         type={CanvasIconTypes.Graphic}
         as={Element}
         ref={ref}
-        shouldMirror={shouldMirror}
-        {...elemProps}
+        {...handleCsProp(
+          elemProps,
+          graphicStencil({
+            grow,
+            width: typeof width === 'number' ? px2rem(width) : width,
+            height: typeof height === 'number' ? px2rem(height) : height,
+          })
+        )}
       />
     );
   },
diff --git a/modules/react/icon/lib/Icon.tsx b/modules/react/icon/lib/Icon.tsx
deleted file mode 100644
index 0589a1ba9a..0000000000
--- a/modules/react/icon/lib/Icon.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-import {CSSObject} from '@emotion/styled';
-import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import {Svg, SvgProps} from './Svg';
-import {createComponent} from '@workday/canvas-kit-react/common';
-
-export interface IconProps extends SvgProps {
-  src: CanvasIcon;
-  size?: number | string;
-  type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
-}
-
-export const Icon = createComponent('span')({
-  displayName: 'Icon',
-  Component: ({src, size, styles, type, shouldMirror, ...elemProps}: IconProps, ref, Element) => {
-    const iconStyles: CSSObject = {...styles};
-
-    if (size) {
-      iconStyles['& svg'] = {
-        ...((iconStyles['& svg'] as CSSObject) ?? {}),
-        width: size,
-        height: size,
-      };
-    }
-
-    return (
-      <Svg
-        src={src}
-        type={type}
-        shouldMirror={shouldMirror}
-        as={Element}
-        {...elemProps}
-        ref={ref}
-        styles={iconStyles}
-      />
-    );
-  },
-});
diff --git a/modules/react/icon/lib/Svg.tsx b/modules/react/icon/lib/Svg.tsx
index f86d5dca35..24062968e1 100644
--- a/modules/react/icon/lib/Svg.tsx
+++ b/modules/react/icon/lib/Svg.tsx
@@ -1,13 +1,13 @@
-import {CSSObject} from '@emotion/styled';
 import * as React from 'react';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {validateIconType} from './utils';
-import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
 
 export interface SvgProps extends BoxProps {
   src: CanvasIcon;
-  styles?: CSSObject;
   type: CanvasIconTypes;
   /**
    * If set to `true`, transform the SVG's x-axis to mirror the graphic
@@ -16,22 +16,48 @@ export interface SvgProps extends BoxProps {
   shouldMirror?: boolean;
 }
 
-const StyledIconSpan = styled(Box.as('span'))<
-  StyledType & Pick<SvgProps, 'shouldMirror' | 'styles'>
->(
-  {
+export const svgStencil = createStencil({
+  vars: {
+    /** sets width of svg element */
+    width: '',
+    /** sets height of svg element */
+    height: '',
+    /** sets width and height of svg element */
+    size: '',
+  },
+  base: ({width, height, size}) => ({
     display: 'inline-block',
-    '> svg': {display: 'block'},
+    '> svg': {
+      display: 'block',
+      width: cssVar(width, size),
+      height: cssVar(height, size),
+    },
+  }),
+  modifiers: {
+    shouldMirror: {
+      true: {
+        transform: 'scaleX(-1)',
+      },
+    },
   },
-  ({shouldMirror, styles}) => ({
-    ...styles,
-    transform: shouldMirror ? 'scaleX(-1)' : undefined,
-  })
-);
+});
+
+/** @deprecated */
+export const transformColorNameToToken = (color?: string) => {
+  if (color && color in base) {
+    return cssVar(base[color as keyof typeof base]);
+  }
+
+  if (color?.startsWith('--')) {
+    return cssVar(color);
+  }
+
+  return color;
+};
 
 export const Svg = createComponent('span')({
   displayName: 'Svg',
-  Component: ({src, type, ...elemProps}: SvgProps, ref, Element) => {
+  Component: ({shouldMirror, src, type, ...elemProps}: SvgProps, ref, Element) => {
     try {
       validateIconType(src, type);
     } catch (e) {
@@ -40,11 +66,10 @@ export const Svg = createComponent('span')({
     }
 
     return (
-      <StyledIconSpan
-        as={Element}
-        dangerouslySetInnerHTML={{__html: src.svg}}
-        {...elemProps}
+      <Element
         ref={ref}
+        dangerouslySetInnerHTML={{__html: src.svg}}
+        {...mergeStyles(elemProps, svgStencil({shouldMirror}))}
       />
     );
   },
diff --git a/modules/react/icon/lib/SystemIcon.tsx b/modules/react/icon/lib/SystemIcon.tsx
index 43f7c491bd..f722fba6b3 100644
--- a/modules/react/icon/lib/SystemIcon.tsx
+++ b/modules/react/icon/lib/SystemIcon.tsx
@@ -2,52 +2,81 @@ import * as React from 'react';
 import {iconColors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
-import {Icon, IconProps} from './Icon';
 import {createComponent, getColor} from '@workday/canvas-kit-react/common';
-import {SystemPropValues} from '@workday/canvas-kit-react/layout';
+import {cssVar, createStencil, handleCsProp, px2rem, createVars} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+import {Svg, SvgProps, svgStencil, transformColorNameToToken} from './Svg';
 
+/**
+ * @deprecated Interface `SystemIconStyles` will be removed in a future version. `accent`, `color`, background props will be moved inside `GraphicProps`.
+ */
 export interface SystemIconStyles {
   /**
    * The accent color of the SystemIcon. This overrides `color`.
    */
-  accent?: SystemPropValues['color'];
+  accent?: string;
   /**
    * The accent color of the SystemIcon on hover. This overrides `colorHover`.
+   * @deprecated `accentHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * ```tsx
+   * '&:hover': {
+   *   [systemIconStencil.vars.accent]: desiredAccentHoverColor
+   * }
+   * ```
    */
-  accentHover?: SystemPropValues['color'];
+  accentHover?: string;
   /**
    * The background color of the SystemIcon.
    * @default transparent
    */
-  background?: SystemPropValues['color'];
+  background?: string;
   /**
    * The background color of the SystemIcon on hover.
    * @default transparent
+   * @deprecated `backgroundHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * ```tsx
+   * '&:hover': {
+   *   [systemIconStencil.vars.background]: desiredBackgroundHoverColor
+   * }
+   * ```
    */
-  backgroundHover?: SystemPropValues['color'];
+  backgroundHover?: string;
   /**
-   * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
-   * @default iconColors.standard
+   * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overwritten by `accent` and `fill`.
+   * @default base.licorice200
    */
-  color?: SystemPropValues['color'];
+  color?: string;
   /**
-   * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
-   * @default iconColors.hover
+   * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overwritten by `accentHover` and `fillHover`.
+   * @default base.licorice200
+   * @deprecated `colorHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * ```tsx
+   * '&:hover': {
+   *   [systemIconStencil.vars.color]: desiredColorHoverColor
+   * }
+   * ```
    */
-  colorHover?: SystemPropValues['color'];
+  colorHover?: string;
   /**
    * The fill color of the SystemIcon. This overrides `color`.
+   * @deprecated `fill` is deprecated and will be removed in a future version. Please use `color` and specify `accent` color if you want `accent` to be different from `color`.
    */
-  fill?: SystemPropValues['color'];
+  fill?: string;
   /**
    * The fill color of the SystemIcon on hover. This overrides `colorHover`.
+   * @deprecated `fillHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * ```tsx
+   * '&:hover': {
+   *   [systemIconStencil.vars.fill]: desiredFillHoverColor
+   * }
+   * ```
    */
-  fillHover?: SystemPropValues['color'];
+  fillHover?: string;
 }
 
 export interface SystemIconProps
   extends SystemIconStyles,
-    Omit<IconProps, 'src' | 'fill' | 'type'> {
+    Omit<SvgProps, 'src' | 'type' | 'fill' | 'background' | 'color'> {
   /**
    * The icon to display from `@workday/canvas-system-icons-web`.
    */
@@ -55,9 +84,18 @@ export interface SystemIconProps
   /**
    * The size of the SystemIcon in `px`.
    */
-  size?: number | string | undefined;
+  size?: number | string;
 }
 
+/**
+ * @deprecated This style utility function is deprecated and will be removed in a future version. We'll track usage over time to prevent unnecessary burden on upgrading. Most of the time, this function is used in conjunction with styling `SystemIcon`. There are a few ways to override the colors used in `SystemIcon`.
+ * - Pass props directly to the `SystemIcon` component: `<SystemIcon color={color} {...etc} />
+ * - Style overrides using the `systemIconStencil`:
+ *   ```tsx
+ *   // styling container
+ *
+ *   ```
+ */
 export const systemIconStyles = ({
   accent,
   accentHover,
@@ -88,47 +126,108 @@ export const systemIconStyles = ({
   },
 });
 
+/**
+ * @deprecated These variables are being used for backward compatibility with existing hover props. Please use the following instead:
+ * ```tsx
+ * '&:hover': {
+ *   [systemIconStencil.vars.color]: desiredHoverColor
+ * }
+ * ```
+ */
+const deprecatedSystemIconVars = createVars(
+  'colorHover',
+  'fillHover',
+  'accentHover',
+  'backgroundHover'
+);
+
+export const systemIconStencil = createStencil({
+  extends: svgStencil,
+  vars: {
+    /**
+     * This will set the icon's color (both `.wd-icon-fill` and `.wd-icon-accent` SVG layers). Most
+     * of the time, this is the only color you need to change. Icons also have an accent layer. If you
+     * wish to change the accent layer independently, also set the `accentColor` variable
+     */
+    color: '',
+    accentColor: '',
+    backgroundColor: 'transparent',
+  },
+  base: ({accentColor, backgroundColor, color}) => ({
+    [backgroundColor]: 'transparent',
+    '& .wd-icon-fill': {
+      fill: cssVar(color, base.licorice200),
+    },
+    '& .wd-icon-accent, & .wd-icon-accent2': {
+      fill: cssVar(accentColor, cssVar(color, base.licorice200)),
+    },
+    '& .wd-icon-background': {
+      fill: backgroundColor,
+    },
+    // will be removed eventually
+    '&:where(:hover, .hover) .wd-icon-fill': {
+      fill: cssVar(
+        deprecatedSystemIconVars.fillHover,
+        cssVar(deprecatedSystemIconVars.colorHover, cssVar(color, base.licorice200))
+      ),
+    },
+    '&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2': {
+      fill: cssVar(
+        deprecatedSystemIconVars.accentHover,
+        cssVar(
+          deprecatedSystemIconVars.colorHover,
+          cssVar(accentColor, cssVar(color, base.licorice200))
+        )
+      ),
+    },
+    '&:where(:hover, .hover) .wd-icon-background': {
+      fill: cssVar(deprecatedSystemIconVars.backgroundHover, backgroundColor),
+    },
+  }),
+});
+
 export const SystemIcon = createComponent('span')({
   displayName: 'SystemIcon',
   Component: (
     {
-      background = 'transparent',
-      backgroundHover = 'transparent',
-      color = iconColors.standard,
-      colorHover = iconColors.hover,
+      size,
+      background,
+      backgroundHover,
+      color,
+      colorHover,
       icon,
       accent,
       accentHover,
       fill,
       fillHover,
-      size,
-      shouldMirror,
       ...elemProps
     }: SystemIconProps,
     ref,
     Element
   ) => {
-    const style = systemIconStyles({
-      accent,
-      accentHover,
-      background,
-      backgroundHover,
-      color,
-      colorHover,
-      fill,
-      fillHover,
-    });
-
     return (
-      <Icon
+      <Svg
+        as={Element}
         src={icon}
         type={CanvasIconTypes.System}
-        size={size}
-        as={Element}
-        shouldMirror={shouldMirror}
         ref={ref}
-        styles={style}
-        {...elemProps}
+        {...handleCsProp(elemProps, [
+          systemIconStencil({
+            size: typeof size === 'number' ? px2rem(size) : size,
+            color: transformColorNameToToken(fill || color),
+            accentColor: transformColorNameToToken(accent || color),
+            backgroundColor: transformColorNameToToken(background),
+          }),
+          {
+            [deprecatedSystemIconVars.colorHover]:
+              colorHover && transformColorNameToToken(colorHover),
+            [deprecatedSystemIconVars.fillHover]: fillHover && transformColorNameToToken(fillHover),
+            [deprecatedSystemIconVars.accentHover]:
+              accentHover && transformColorNameToToken(accentHover),
+            [deprecatedSystemIconVars.backgroundHover]:
+              backgroundHover && transformColorNameToToken(backgroundHover),
+          },
+        ])}
       />
     );
   },
diff --git a/modules/react/icon/lib/SystemIconCircle.tsx b/modules/react/icon/lib/SystemIconCircle.tsx
index 3011eda30e..7511be78ba 100644
--- a/modules/react/icon/lib/SystemIconCircle.tsx
+++ b/modules/react/icon/lib/SystemIconCircle.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
-import {colors, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon, SystemIconProps} from './SystemIcon';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {SystemIcon, SystemIconProps, systemIconStencil} from './SystemIcon';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createComponent, getColor, pickForegroundColor} from '@workday/canvas-kit-react/common';
-import {SystemPropValues} from '@workday/canvas-kit-react/layout';
+import {createComponent, pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+import {transformColorNameToToken} from './Svg';
 
 export enum SystemIconCircleSize {
   xs = 16,
@@ -19,9 +19,9 @@ export enum SystemIconCircleSize {
 export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
   /**
    * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
-   * @default colors.soap300
+   * @default base.soap300
    */
-  background?: SystemPropValues['color'];
+  background?: string;
   /**
    * The icon to display from `@workday/canvas-accent-icons-web`.
    */
@@ -33,60 +33,54 @@ export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirr
   size?: SystemIconCircleSize | number;
 }
 
-const Container = styled('div', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<Pick<SystemIconCircleProps, 'background' | 'size'>>(
-  {
+const systemIconCircleStencil = createStencil({
+  vars: {
+    containerSize: '',
+    backgroundColor: '',
+    iconColor: '',
+  },
+  base: ({backgroundColor, containerSize, iconColor}) => ({
+    background: cssVar(backgroundColor, base.soap200),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 0,
-    border: 0,
-    borderRadius: borderRadius.circle,
-    boxSizing: 'border-box',
+    padding: system.space.zero,
+    border: 'none',
+    borderRadius: system.shape.round,
     overflow: 'hidden',
+    width: cssVar(containerSize, system.space.x10),
+    height: cssVar(containerSize, system.space.x10),
+    [systemIconStencil.vars.size]: calc.multiply(cssVar(containerSize, system.space.x10), 0.625),
+    [systemIconStencil.vars.color]: iconColor,
     '& img': {
       width: '100%',
       height: '100%',
     },
-  },
-  ({background}) => ({
-    background: getColor(background),
   }),
-  ({size}) => ({
-    width: size,
-    height: size,
-  })
-);
+});
 
 export const SystemIconCircle = createComponent('span')({
   displayName: 'SystemIconCircle',
-  Component: (
-    {
-      background = colors.soap200,
-      size = SystemIconCircleSize.l,
-      icon,
+  Component: ({background, size, icon, shouldMirror}: SystemIconCircleProps, ref, Element) => {
+    // `pickForegroundColor` hasn't support to use css variables to generate foregroundColor
+    const backgroundFallback =
+      background && !background.startsWith('--') ? background : colors.soap200;
+    const iconColor = pickForegroundColor(
+      backgroundFallback,
+      'rgba(0,0,0,0.65)',
+      colors.frenchVanilla100
+    );
 
-      shouldMirror,
-      ...elemProps
-    }: SystemIconCircleProps,
-    ref,
-    Element
-  ) => {
-    const iconColor = pickForegroundColor(background, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
-    const iconSize = size * 0.625;
     return (
-      <Container background={background} size={size} {...elemProps}>
-        <SystemIcon
-          icon={icon}
-          color={iconColor}
-          colorHover={iconColor}
-          as={Element}
-          size={iconSize}
-          ref={ref}
-          shouldMirror={shouldMirror}
-        />
-      </Container>
+      <div
+        {...systemIconCircleStencil({
+          containerSize: typeof size === 'number' ? px2rem(size) : size,
+          backgroundColor: transformColorNameToToken(background),
+          iconColor,
+        })}
+      >
+        <SystemIcon as={Element} ref={ref} icon={icon} shouldMirror={shouldMirror} />
+      </div>
     );
   },
 });
diff --git a/modules/react/icon/spec/Icon.spec.tsx b/modules/react/icon/spec/Icon.spec.tsx
deleted file mode 100644
index 30142c08aa..0000000000
--- a/modules/react/icon/spec/Icon.spec.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react';
-import {render} from '@testing-library/react';
-import {Icon} from '../lib/Icon';
-import {CanvasIconTypes} from '@workday/design-assets-types';
-import {shieldIcon} from '@workday/canvas-accent-icons-web';
-
-describe('Icon component', () => {
-  test('SVG is set in innerHTML', () => {
-    const {container} = render(<Icon src={shieldIcon} type={CanvasIconTypes.Accent} styles={{}} />);
-    expect(container.querySelector('svg')).toBeTruthy();
-  });
-});
diff --git a/modules/react/icon/stories/examples/AccentIconList.tsx b/modules/react/icon/stories/examples/AccentIconList.tsx
index 20cf7c5fe2..06dfa1b238 100644
--- a/modules/react/icon/stories/examples/AccentIconList.tsx
+++ b/modules/react/icon/stories/examples/AccentIconList.tsx
@@ -3,11 +3,31 @@ import * as CanvasAccenttIcons from '@workday/canvas-accent-icons-web';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasAccenttIcons);
 
 const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAccenttIcons');
 
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.space.x6,
+  }),
+  iconGroupContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  individualIconContainer: createStyles({
+    alignItems: 'center',
+    width: `max(${px2rem(320)},20%)`,
+    flexDirection: 'row',
+    gap: system.space.x3,
+    padding: system.space.x3,
+  }),
+};
+
 export const AccentIconList = () => {
   const [value, setValue] = React.useState('');
 
@@ -16,9 +36,9 @@ export const AccentIconList = () => {
   };
 
   return (
-    <Flex flexDirection="column" alignItems="center" gap="m">
+    <Flex cs={styleOverrides.parentContainer}>
       <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
-      <Flex flexWrap="wrap">
+      <Flex cs={styleOverrides.iconGroupContainer}>
         {allIcons
           .filter(icon => {
             if (value === '') {
@@ -29,14 +49,7 @@ export const AccentIconList = () => {
           })
           .map((singleIcon, index) => {
             return (
-              <Flex
-                alignItems="center"
-                width={'max(320px,20%)'}
-                flexDirection="row"
-                gap="xs"
-                padding="xs"
-                key={index}
-              >
+              <Flex cs={styleOverrides.individualIconContainer} key={index}>
                 <Box>
                   <AccentIcon icon={CanvasAccenttIcons[singleIcon]} />
                 </Box>
diff --git a/modules/react/icon/stories/examples/AppletIconList.tsx b/modules/react/icon/stories/examples/AppletIconList.tsx
index f8cac5d872..16b3f3624a 100644
--- a/modules/react/icon/stories/examples/AppletIconList.tsx
+++ b/modules/react/icon/stories/examples/AppletIconList.tsx
@@ -3,11 +3,31 @@ import * as CanvasAppletIcons from '@workday/canvas-applet-icons-web';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {AppletIcon} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasAppletIcons);
 
 const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAppletIcons');
 
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.space.x6,
+  }),
+  iconGroupContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  individualIconContainer: createStyles({
+    alignItems: 'center',
+    width: `max(${px2rem(320)},20%)`,
+    flexDirection: 'row',
+    gap: system.space.x3,
+    padding: system.space.x3,
+  }),
+};
+
 export const AppletIconList = () => {
   const [value, setValue] = React.useState('');
 
@@ -16,9 +36,9 @@ export const AppletIconList = () => {
   };
 
   return (
-    <Flex flexDirection="column" alignItems="center" gap="m">
+    <Flex cs={styleOverrides.parentContainer}>
       <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
-      <Flex flexWrap="wrap">
+      <Flex cs={styleOverrides.iconGroupContainer}>
         {allIcons
           .filter(icon => {
             if (value === '') {
@@ -29,14 +49,7 @@ export const AppletIconList = () => {
           })
           .map((singleIcon, index) => {
             return (
-              <Flex
-                alignItems="center"
-                width={'max(320px,20%)'}
-                flexDirection="row"
-                gap="xs"
-                padding="xs"
-                key={index}
-              >
+              <Flex cs={styleOverrides.individualIconContainer} key={index}>
                 <Box>
                   <AppletIcon icon={CanvasAppletIcons[singleIcon]} />
                 </Box>
diff --git a/modules/react/icon/stories/examples/IconList.tsx b/modules/react/icon/stories/examples/IconList.tsx
index 041383a6cd..f7cc6265a2 100644
--- a/modules/react/icon/stories/examples/IconList.tsx
+++ b/modules/react/icon/stories/examples/IconList.tsx
@@ -3,10 +3,31 @@ import * as CanvasIcons from '@workday/canvas-system-icons-web';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasIcons);
 
 const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasSystemIcons');
+
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.space.x6,
+  }),
+  firstChildContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  secondChildContainer: createStyles({
+    alignItems: 'center',
+    width: `max(320px,20%)`,
+    flexDirection: 'row',
+    gap: system.space.x3,
+    padding: system.space.x3,
+  }),
+};
+
 export const SystemIconList = () => {
   const [value, setValue] = React.useState('');
 
@@ -15,9 +36,9 @@ export const SystemIconList = () => {
   };
 
   return (
-    <Flex flexDirection="column" alignItems="center" gap="m">
+    <Flex cs={styleOverrides.parentContainer}>
       <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
-      <Flex flexWrap="wrap">
+      <Flex cs={styleOverrides.firstChildContainer}>
         {allIcons
           .filter(icon => {
             if (value === '') {
@@ -28,14 +49,7 @@ export const SystemIconList = () => {
           })
           .map((singleIcon, index) => {
             return (
-              <Flex
-                alignItems="center"
-                width={'max(320px,20%)'}
-                flexDirection="row"
-                gap="xs"
-                padding="xs"
-                key={index}
-              >
+              <Flex cs={styleOverrides.secondChildContainer} key={index}>
                 <Box>
                   <SystemIcon icon={CanvasIcons[singleIcon]} />
                 </Box>
diff --git a/modules/react/icon/stories/examples/Overview.tsx b/modules/react/icon/stories/examples/Overview.tsx
index 7df20a200b..3a4c389fce 100644
--- a/modules/react/icon/stories/examples/Overview.tsx
+++ b/modules/react/icon/stories/examples/Overview.tsx
@@ -8,22 +8,34 @@ import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
 
 import {AccentIcon, AppletIcon, SystemIcon, SystemIconCircle, Graphic} from '../../index';
 import {activityStreamIcon} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const graphicExample: CanvasGraphic = {
   name: 'badgeAchievement',
   type: CanvasIconTypes.Graphic,
-  svg:
-    '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" class="wd-graphic wd-graphic-badge-achievement" focusable="false" role="presentation" viewBox="0 0 50 50"><g fill="none" fill-rule="nonzero" class="wd-icon-container"><circle cx="25" cy="25" r="25" fill="#FFC943"/><path fill="#FF7A45" d="M17 12h23l-4.373 7.5L40 27H17z"/><path fill="#656464" d="M15 12h2v31h-2z"/><circle cx="16" cy="11.5" r="1.5" fill="#656464"/></g></svg>',
+  svg: '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" class="wd-graphic wd-graphic-badge-achievement" focusable="false" role="presentation" viewBox="0 0 50 50"><g fill="none" fill-rule="nonzero" class="wd-icon-container"><circle cx="25" cy="25" r="25" fill="#FFC943"/><path fill="#FF7A45" d="M17 12h23l-4.373 7.5L40 27H17z"/><path fill="#656464" d="M15 12h2v31h-2z"/><circle cx="16" cy="11.5" r="1.5" fill="#656464"/></g></svg>',
   filename: 'wd-graphic-badge-achievement.svg',
   category: '',
   tags: [],
 };
 
+const styleOverrides = {
+  container: createStyles({
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: system.space.x4,
+  }),
+  systemIconStyles: createStyles({
+    background: base.berrySmoothie100,
+  }),
+};
+
 export const Overview = () => (
-  <Flex flexDirection="row" alignItems="center" gap="s">
+  <Flex cs={styleOverrides.container}>
     <AccentIcon icon={shieldIcon} />
     <AppletIcon icon={benefitsIcon} />
-    <SystemIcon icon={activityStreamIcon} />
+    <SystemIcon icon={activityStreamIcon} cs={styleOverrides.systemIconStyles} />
     <SystemIconCircle icon={activityStreamIcon} />
     <Graphic src={graphicExample} />
   </Flex>
diff --git a/modules/react/icon/stories/stories.tsx b/modules/react/icon/stories/stories.tsx
index 303ae2eb79..59c3281f39 100644
--- a/modules/react/icon/stories/stories.tsx
+++ b/modules/react/icon/stories/stories.tsx
@@ -8,11 +8,12 @@ import {colors} from '@workday/canvas-kit-react/tokens';
 import {AccentIcon, AppletIcon, SystemIcon, SystemIconCircle, Graphic} from '../index';
 import {activityStreamIcon} from '@workday/canvas-system-icons-web';
 
+import {base} from '@workday/canvas-tokens-web';
+
 const graphicExample: CanvasGraphic = {
   name: 'badgeAchievement',
   type: CanvasIconTypes.Graphic,
-  svg:
-    '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" class="wd-graphic wd-graphic-badge-achievement" focusable="false" role="presentation" viewBox="0 0 50 50"><g fill="none" fill-rule="nonzero" class="wd-icon-container"><circle cx="25" cy="25" r="25" fill="#FFC943"/><path fill="#FF7A45" d="M17 12h23l-4.373 7.5L40 27H17z"/><path fill="#656464" d="M15 12h2v31h-2z"/><circle cx="16" cy="11.5" r="1.5" fill="#656464"/></g></svg>',
+  svg: '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" class="wd-graphic wd-graphic-badge-achievement" focusable="false" role="presentation" viewBox="0 0 50 50"><g fill="none" fill-rule="nonzero" class="wd-icon-container"><circle cx="25" cy="25" r="25" fill="#FFC943"/><path fill="#FF7A45" d="M17 12h23l-4.373 7.5L40 27H17z"/><path fill="#656464" d="M15 12h2v31h-2z"/><circle cx="16" cy="11.5" r="1.5" fill="#656464"/></g></svg>',
   filename: 'wd-graphic-badge-achievement.svg',
   category: '',
   tags: [],
@@ -57,40 +58,46 @@ storiesOf('Tokens/Icon', module)
   .add('System Icon', () => (
     <div className="story">
       <SystemIcon icon={activityStreamIcon} />
-      <SystemIcon icon={activityStreamIcon} color={colors.blueberry500} />
+      <SystemIcon icon={activityStreamIcon} color={base.berrySmoothie400} />
+      <SystemIcon
+        icon={activityStreamIcon}
+        color={base.berrySmoothie400}
+        colorHover={base.berrySmoothie600}
+      />
       <SystemIcon
         className="custom-class"
         icon={activityStreamIcon}
-        accent={colors.frenchVanilla100}
-        fill={colors.blueberry500}
-        background={colors.blueberry500}
+        accent={base.frenchVanilla100}
+        fill={base.blueberry500}
+        background={base.blueberry500}
       />
       <br />
-      <SystemIcon icon={activityStreamIcon} colorHover={colors.cinnamon300} />
+      <SystemIcon icon={activityStreamIcon} colorHover={base.cinnamon300} />
       <SystemIcon
         icon={activityStreamIcon}
-        color={colors.blueberry500}
-        fillHover={colors.chiliMango200}
-        accentHover={colors.chiliMango400}
+        color={base.blueberry500}
+        fillHover={base.chiliMango200}
+        accentHover={base.chiliMango400}
       />
       <SystemIcon
         className="custom-class"
         icon={activityStreamIcon}
-        accent={colors.frenchVanilla100}
-        fill={colors.blueberry500}
-        background={colors.blueberry500}
-        fillHover={colors.cantaloupe500}
-        accentHover={colors.frenchVanilla100}
-        backgroundHover={colors.cantaloupe500}
+        accent={base.frenchVanilla100}
+        fill={base.blueberry500}
+        background={base.blueberry500}
+        fillHover={base.cantaloupe500}
+        accentHover={base.frenchVanilla100}
+        backgroundHover={base.cantaloupe500}
       />
       <br />
       <SystemIcon icon={activityStreamIcon} size={48} />
       <SystemIconCircle icon={activityStreamIcon} />
       <SystemIconCircle icon={activityStreamIcon} shouldMirror={true} />
-      <SystemIconCircle icon={activityStreamIcon} background={colors.blueberry400} />
+      <SystemIconCircle icon={activityStreamIcon} size={120} shouldMirror={true} />
+      <SystemIconCircle icon={activityStreamIcon} background={base.blueberry400} />
       <SystemIconCircle
         icon={activityStreamIcon}
-        background={colors.blueberry400}
+        background={base.blueberry400}
         shouldMirror={true}
       />
     </div>
@@ -102,11 +109,11 @@ storiesOf('Tokens/Icon', module)
     <div className="story">
       <Graphic src={graphicExample} />
       <br />
-      <Graphic src={graphicExample} width={80} />
+      <Graphic src={graphicExample} width={120} />
       <div style={{width: 100}}>
         <Graphic src={graphicExample} grow={true} />
       </div>
-      <div style={{width: 100}}>
+      <div style={{width: 400}}>
         <Graphic src={graphicExample} grow={true} shouldMirror={true} />
       </div>
     </div>
diff --git a/modules/react/icon/stories/stories.visualTesting.tsx b/modules/react/icon/stories/stories.visualTesting.tsx
new file mode 100644
index 0000000000..c832f1c733
--- /dev/null
+++ b/modules/react/icon/stories/stories.visualTesting.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import {ComponentStatesTable, StaticStates} from '@workday/canvas-kit-react/testing';
+import {withSnapshotsEnabled} from '../../../../utils/storybook';
+
+import {base} from '@workday/canvas-tokens-web';
+import {activityStreamIcon} from '@workday/canvas-system-icons-web';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+
+export default withSnapshotsEnabled({
+  title: 'Testing/Icon',
+  component: SystemIcon,
+});
+
+export const SystemIconStates = () => (
+  <StaticStates>
+    <ComponentStatesTable
+      rowProps={[
+        {
+          label: 'Default',
+          props: {},
+        },
+        {
+          label: 'color',
+          props: {color: base.cinnamon300},
+        },
+        {
+          label: 'color + colorHover',
+          props: {color: base.cinnamon300, colorHover: base.cinnamon600},
+        },
+        {
+          label: 'fill',
+          props: {fill: base.grapeSoda300},
+        },
+        {
+          label: 'fill + fillHover',
+          props: {fill: base.grapeSoda300, fillHover: base.grapeSoda600},
+        },
+        {
+          label: 'color + colorHover + fill + fillHover',
+          props: {
+            color: base.cinnamon300,
+            colorHover: base.cinnamon600,
+            fill: base.grapeSoda300,
+            fillHover: base.grapeSoda600,
+          },
+        },
+        {
+          label: 'accent',
+          props: {accent: base.greenApple300},
+        },
+        {
+          label: 'accent + accentHover',
+          props: {accent: base.greenApple300, accentHover: base.greenApple600},
+        },
+        {
+          label: 'color + colorHover + accent + accentHover',
+          props: {
+            color: base.cinnamon300,
+            colorHover: base.cinnamon600,
+            accent: base.greenApple300,
+            accentHover: base.greenApple600,
+          },
+        },
+        {
+          label: 'fillColor + fillHover + accent + accentHover',
+          props: {
+            fill: base.grapeSoda300,
+            fillHover: base.grapeSoda600,
+            accent: base.greenApple300,
+            accentHover: base.greenApple600,
+          },
+        },
+        {
+          label: 'color + colorHover + fillColor + fillHover + accent + accentHover',
+          props: {
+            color: base.cinnamon300,
+            colorHover: base.cinnamon600,
+            fill: base.grapeSoda300,
+            fillHover: base.grapeSoda600,
+            accent: base.greenApple300,
+            accentHover: base.greenApple600,
+          },
+        },
+        {
+          label: 'background',
+          props: {background: base.frenchVanilla400},
+        },
+        {
+          label: 'background + backgroundHover',
+          props: {background: base.frenchVanilla400, backgroundHover: base.frenchVanilla600},
+        },
+      ]}
+      columnProps={[
+        {
+          label: 'Default',
+          props: {},
+        },
+        {
+          label: 'Hover',
+          props: {className: 'hover'},
+        },
+      ]}
+    >
+      {props => <SystemIcon icon={activityStreamIcon} {...props} />}
+    </ComponentStatesTable>
+  </StaticStates>
+);
diff --git a/modules/react/layout/lib/utils/mergeStyles.ts b/modules/react/layout/lib/utils/mergeStyles.ts
index 7250c45b17..616e5a6a4f 100644
--- a/modules/react/layout/lib/utils/mergeStyles.ts
+++ b/modules/react/layout/lib/utils/mergeStyles.ts
@@ -4,7 +4,9 @@ import {backgroundStyleFnConfigs} from './background';
 import {borderStyleFnConfigs} from './border';
 import {colorStyleFnConfigs} from './color';
 import {depthStyleFnConfigs} from './depth';
+import {flex, flexStyleFnConfigs} from './flex';
 import {flexItemStyleFnConfigs} from './flexItem';
+import {grid, gridStyleFnConfigs} from './grid';
 import {gridItemStyleFnConfigs} from './gridItem';
 import {layoutStyleFnConfigs} from './layout';
 import {otherStyleFnConfigs} from './other';
@@ -19,7 +21,9 @@ const stylePropHash = [
   ...borderStyleFnConfigs,
   ...colorStyleFnConfigs,
   ...depthStyleFnConfigs,
+  ...flexStyleFnConfigs,
   ...flexItemStyleFnConfigs,
+  ...gridStyleFnConfigs,
   ...gridItemStyleFnConfigs,
   ...layoutStyleFnConfigs,
   ...otherStyleFnConfigs,
@@ -72,10 +76,10 @@ export function mergeStyles<T extends {}>(
 
   let styles = {};
 
-  // We have style props. We need to create style and merge with our `csToProps` to get the correct
-  // merging order for styles
+  // We have style props currently and we will need to create style and merge with our `csToProps` to get the correct
+  // merging order for styles. This includes box, flex and grid styles.
   if (shouldRuntimeMergeStyles) {
-    styles = boxStyleFn(styleProps);
+    styles = {...boxStyleFn(styleProps), ...flex(styleProps), ...grid(styleProps)};
   }
 
   return handleCsProp(elemProps, [localCs, styles]) as Omit<T, 'cs' | keyof CommonStyleProps>;
diff --git a/modules/react/loading-dots/lib/LoadingDots.tsx b/modules/react/loading-dots/lib/LoadingDots.tsx
index 44fddfb33b..03953df3e8 100644
--- a/modules/react/loading-dots/lib/LoadingDots.tsx
+++ b/modules/react/loading-dots/lib/LoadingDots.tsx
@@ -1,73 +1,76 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/react';
-import {canvas, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {styled} from '@workday/canvas-kit-react/common';
+import {system} from '@workday/canvas-tokens-web';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {handleCsProp, keyframes, CSProps, createStencil, calc} from '@workday/canvas-kit-styling';
 
 /**
  * Keyframe for the dots loading animation.
  */
-const keyframesLoading = keyframes`
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-}
-  40% {
-    transform: scale(1);
-}`;
-
-type LoadingDotProps = {
-  /**
-   * The animation delay of the LoadingDots (in ms).
-   */
-  animationDelay: number;
-};
+const keyframesLoading = keyframes({
+  '0%, 80%, 100%': {
+    transform: 'scale(0)',
+  },
+  '40%': {
+    transform: 'scale(1)',
+  },
+});
 
-/**
- * The actual loading dot div.
- */
-const LoadingAnimationDot = styled('div')<LoadingDotProps>(
-  {
-    backgroundColor: canvas.colors.soap400,
-    width: canvas.space.s,
-    height: canvas.space.s,
-    fontSize: '0px',
-    borderRadius: borderRadius.circle,
+const singleLoadingDotStencil = createStencil({
+  vars: {
+    animationDurationMs: '40ms',
+  },
+  base: ({animationDurationMs}) => ({
+    backgroundColor: system.color.bg.alt.strong,
+    width: system.space.x4,
+    height: system.space.x4,
+    fontSize: system.space.zero,
+    borderRadius: system.shape.round,
     transform: 'scale(0)',
     display: 'inline-block',
-    marginRight: canvas.space.xxs,
     animationName: keyframesLoading,
-    animationDuration: '1400ms',
+    animationDuration: calc.multiply(animationDurationMs, 35),
     animationIterationCount: 'infinite',
     animationTimingFunction: 'ease-in-out',
     animationFillMode: 'both',
-    '&:last-child': {
-      marginRight: 0,
+    '&:nth-child(1)': {
+      animationDelay: '0ms',
     },
-  },
-  ({animationDelay}) => ({
-    animationDelay: animationDelay + 'ms',
-  })
-);
+    '&:nth-child(2)': {
+      animationDelay: calc.multiply(animationDurationMs, 4),
+    },
+    '&:nth-child(3)': {
+      animationDelay: calc.multiply(animationDurationMs, 8),
+    },
+  }),
+});
+
+/**
+ * The actual loading dot div.
+ */
+const LoadingAnimationDot = () => <div {...singleLoadingDotStencil()} />;
 
 /**
  * A simple container for the loading dots.
  */
-const Container = styled('div')({
-  display: 'inline-block',
+const loadingDotsStencil = createStencil({
+  base: {
+    display: 'inline-flex',
+    gap: system.space.x2,
+  },
 });
 
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.
  */
-export function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>) {
-  const {...elemProps} = props;
-
-  return (
-    <Container {...elemProps}>
-      <LoadingAnimationDot animationDelay={0} />
-      <LoadingAnimationDot animationDelay={160} />
-      <LoadingAnimationDot animationDelay={320} />
-    </Container>
-  );
-}
+export const LoadingDots = createComponent('div')({
+  displayName: 'LoadingDots',
+  Component: (elemProps: CSProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...handleCsProp(elemProps, loadingDotsStencil())}>
+        <LoadingAnimationDot />
+        <LoadingAnimationDot />
+        <LoadingAnimationDot />
+      </Element>
+    );
+  },
+});
diff --git a/modules/react/loading-dots/stories/LoadingDots.stories.mdx b/modules/react/loading-dots/stories/LoadingDots.stories.mdx
index 617054a41b..fe9100e28b 100644
--- a/modules/react/loading-dots/stories/LoadingDots.stories.mdx
+++ b/modules/react/loading-dots/stories/LoadingDots.stories.mdx
@@ -29,6 +29,11 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={RTL} />
 
+### Custom Styles
+
+Loading Dots supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ### Adding screen reader support to loading animations
 
 Sometimes, letting users know when content has finished loading is just as important as asking users
diff --git a/modules/react/loading-dots/stories/examples/Accessible.tsx b/modules/react/loading-dots/stories/examples/Accessible.tsx
index 5583647cd6..375138aa21 100644
--- a/modules/react/loading-dots/stories/examples/Accessible.tsx
+++ b/modules/react/loading-dots/stories/examples/Accessible.tsx
@@ -3,13 +3,18 @@ import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 import {base, system} from '@workday/canvas-tokens-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
 
-const loadingStyles = createStyles({
-  backgroundColor: base.licorice300,
-  padding: system.space.x3,
-});
+const styleOverrides = {
+  parentContainer: createStyles({
+    gap: system.space.x4,
+  }),
+  loadingStyles: createStyles({
+    backgroundColor: system.color.bg.muted.default,
+    padding: system.space.x3,
+  }),
+};
 
 export const Accessible = () => {
   const [loadingState, setLoadingState] = React.useState('idle');
@@ -31,11 +36,11 @@ export const Accessible = () => {
   };
 
   return (
-    <Flex gap={cssVar(system.space.x4)}>
+    <Flex cs={styleOverrides.parentContainer}>
       <SecondaryButton onClick={handleLoad}>Start</SecondaryButton>
       <AriaLiveRegion aria-label="Loading">
         {loadingState === 'loading' && (
-          <LoadingDots className={loadingStyles} role="img" aria-label="Please wait..." />
+          <LoadingDots cs={styleOverrides.loadingStyles} role="img" aria-label="Please wait..." />
         )}
         {loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}
       </AriaLiveRegion>
diff --git a/modules/react/menu/index.ts b/modules/react/menu/index.ts
index b792f53a52..5d1f978591 100644
--- a/modules/react/menu/index.ts
+++ b/modules/react/menu/index.ts
@@ -3,6 +3,6 @@ export {Menu} from './lib/Menu';
 
 export {useMenuCard} from './lib/MenuCard';
 export {useMenuItem, StyledMenuItem, MenuItemProps} from './lib/MenuItem';
-export {useMenuList} from './lib/MenuList';
+export {useMenuList, menuListStencil} from './lib/MenuList';
 export {useMenuPopper} from './lib/MenuPopper';
 export {useMenuTarget, useMenuTargetContext} from './lib/MenuTarget';
diff --git a/modules/react/menu/lib/MenuCard.tsx b/modules/react/menu/lib/MenuCard.tsx
index eb1a7ab4b6..72ee3a6244 100644
--- a/modules/react/menu/lib/MenuCard.tsx
+++ b/modules/react/menu/lib/MenuCard.tsx
@@ -1,46 +1,47 @@
 import * as React from 'react';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space, type} from '@workday/canvas-kit-react/tokens';
+
 import {
-  styled,
-  TransformOrigin,
   createSubcomponent,
-  StyledType,
   ExtractProps,
   createElemPropsHook,
 } from '@workday/canvas-kit-react/common';
 import {getTransformFromPlacement} from '@workday/canvas-kit-react/popup';
+import {system, base} from '@workday/canvas-tokens-web';
 
 import {useMenuModel} from './useMenuModel';
+import {createStencil, calc, px2rem} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface MenuCardProps extends ExtractProps<typeof Card, never> {
   children?: React.ReactNode;
 }
 
-const StyledCard = styled(Card)<
-  StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(
-  type.levels.subtext.large,
-  {
+export const menuCardStencil = createStencil({
+  vars: {
+    minWidth: px2rem(1),
+    transformOriginVertical: 'top',
+    transformOriginHorizontal: 'left',
+  },
+  base: ({transformOriginVertical, transformOriginHorizontal, minWidth}) => ({
+    ...system.type.subtext.large,
+    color: base.blackPepper300,
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-  },
-  ({transformOrigin}) => {
-    if (transformOrigin == null) {
-      return {};
-    }
-    return {
-      transition: `transform ease-out 150ms`,
-      transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
-      // Allow overriding of animation in special cases
-      '.wd-no-animation &': {
-        animation: 'none',
-      },
-    };
-  }
-);
+    transition: `transform ease-out 150ms`,
+    padding: system.space.zero,
+    maxWidth: calc.subtract('100vw', system.space.x8),
+    boxShadow: system.depth[3],
+    minWidth: minWidth,
+    transformOrigin: `${transformOriginVertical} ${transformOriginHorizontal}`,
+    // Allow overriding of animation in special cases
+    '.wd-no-animation &': {
+      animation: 'none',
+    },
+  }),
+});
 
 export const useMenuCard = createElemPropsHook(useMenuModel)(() => {
   return {};
@@ -50,21 +51,24 @@ export const MenuCard = createSubcomponent('div')({
   displayName: 'Menu.Card',
   modelHook: useMenuModel,
   elemPropsHook: useMenuCard,
-})<MenuCardProps>((elemProps, Element, model) => {
+})<MenuCardProps>(({minWidth, ...elemProps}, Element, model) => {
   const transformOrigin = React.useMemo(() => {
     return getTransformFromPlacement(model.state.placement || 'bottom');
   }, [model.state.placement]);
 
   return (
-    <StyledCard
+    <Card
       as={Element}
-      maxWidth={`calc(100vw - ${space.l})`}
-      transformOrigin={transformOrigin}
-      padding="zero"
-      depth={3}
-      {...elemProps}
+      {...mergeStyles(
+        elemProps,
+        menuCardStencil({
+          minWidth: typeof minWidth === 'number' ? px2rem(minWidth as number) : minWidth,
+          transformOriginVertical: transformOrigin.vertical,
+          transformOriginHorizontal: transformOrigin.horizontal,
+        })
+      )}
     >
       {elemProps.children}
-    </StyledCard>
+    </Card>
   );
 });
diff --git a/modules/react/menu/lib/MenuList.tsx b/modules/react/menu/lib/MenuList.tsx
index 193079240d..79cf428f24 100644
--- a/modules/react/menu/lib/MenuList.tsx
+++ b/modules/react/menu/lib/MenuList.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import {commonColors} from '@workday/canvas-kit-react/tokens';
 import {
   createSubcomponent,
   createElemPropsHook,
@@ -11,6 +10,8 @@ import {ListBox, ListProps} from '@workday/canvas-kit-react/collection';
 import {useReturnFocus, useFocusRedirect} from '@workday/canvas-kit-react/popup';
 
 import {useMenuModel} from './useMenuModel';
+import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 export interface MenuListProps<T = any>
   extends Omit<ExtractProps<typeof ListBox, never>, 'children'> {
@@ -31,6 +32,25 @@ export const useMenuList = composeHooks(
   useFocusRedirect
 );
 
+export const menuListStencil = createStencil({
+  base: {
+    background: base.frenchVanilla100,
+    borderRadius: system.shape.zero,
+    padding: system.space.zero,
+    gap: system.space.zero,
+  },
+  modifiers: {
+    orientation: {
+      vertical: {
+        flexDirection: 'column',
+      },
+      horizontal: {
+        flexDirection: 'row',
+      },
+    },
+  },
+});
+
 export const MenuList = createSubcomponent('div')({
   displayName: 'Menu.List',
   modelHook: useMenuModel,
@@ -40,14 +60,8 @@ export const MenuList = createSubcomponent('div')({
     <ListBox
       as={Element}
       model={model}
-      background={commonColors.background}
-      borderRadius="zero"
-      padding="zero"
-      marginY="xxs"
-      gap="zero"
-      overflowY="auto"
-      flexDirection={model.state.orientation === 'vertical' ? 'column' : 'row'}
-      {...elemProps}
+      marginY={cssVar(system.space.x2)}
+      {...handleCsProp(elemProps, menuListStencil({orientation: model.state.orientation}))}
     >
       {children}
     </ListBox>
diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx
index 705b030e49..036a17c84c 100644
--- a/modules/react/modal/stories/examples/CustomFocus.tsx
+++ b/modules/react/modal/stories/examples/CustomFocus.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
@@ -29,8 +29,14 @@ export const CustomFocus = () => {
             <Box as="p" id={longDescID} marginTop={0} marginBottom="m">
               Enter your initials to acknowledge the license.
             </Box>
-            <FormField label="Initials" style={{marginBottom: 0}}>
-              <TextInput ref={ref} value={value} onChange={e => setValue(e.currentTarget.value)} />
+            <FormField cs={{marginBottom: 0}}>
+              <FormField.Label>Initials</FormField.Label>
+              <FormField.Input
+                as={TextInput}
+                ref={ref}
+                value={value}
+                onChange={e => setValue(e.currentTarget.value)}
+              />
             </FormField>
           </Modal.Body>
           <Flex gap="s" padding="xxs" marginTop="xxs">
diff --git a/modules/react/modal/stories/examples/FormModal.tsx b/modules/react/modal/stories/examples/FormModal.tsx
index 46dd55bd4d..f373da5ac8 100644
--- a/modules/react/modal/stories/examples/FormModal.tsx
+++ b/modules/react/modal/stories/examples/FormModal.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {plusIcon} from '@workday/canvas-system-icons-web';
 
@@ -32,11 +32,13 @@ export const FormModal = () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>New User</Modal.Heading>
           <Modal.Body>
-            <FormField label="First Name">
-              <TextInput name="first" />
+            <FormField>
+              <FormField.Label>First Name</FormField.Label>
+              <FormField.Input as={TextInput} name="first" />
             </FormField>
-            <FormField label="Last Name">
-              <TextInput name="last" />
+            <FormField>
+              <FormField.Label>Last Name</FormField.Label>
+              <FormField.Input as={TextInput} name="last" />
             </FormField>
           </Modal.Body>
           <Flex gap="s" padding="xxs" marginTop="xxs">
diff --git a/modules/react/modal/stories/examples/ReturnFocus.tsx b/modules/react/modal/stories/examples/ReturnFocus.tsx
index 478a41fb4f..8989d0cc87 100644
--- a/modules/react/modal/stories/examples/ReturnFocus.tsx
+++ b/modules/react/modal/stories/examples/ReturnFocus.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 
@@ -18,8 +18,10 @@ export const ReturnFocus = () => {
 
   return (
     <Modal model={model}>
-      <FormField label="Choose an option">
-        <Select
+      <FormField>
+        <FormField.Label>Choose an option</FormField.Label>
+        <FormField.Input
+          as={Select}
           ref={ref}
           options={['', 'Delete', 'Two']}
           value={value}
@@ -32,7 +34,7 @@ export const ReturnFocus = () => {
               setValue(e.currentTarget.value);
             }
           }}
-        ></Select>
+        />
       </FormField>
       <Modal.Overlay>
         <Modal.Card>
diff --git a/modules/react/package.json b/modules/react/package.json
index 20ee054277..dba5809092 100644
--- a/modules/react/package.json
+++ b/modules/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.3.60",
+  "version": "11.1.10",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,14 +49,13 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^10.3.60",
-    "@workday/canvas-kit-styling": "^10.3.60",
+    "@workday/canvas-kit-popup-stack": "^11.1.10",
+    "@workday/canvas-kit-styling": "^11.1.10",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^1.0.0",
+    "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
     "csstype": "^3.0.2",
-    "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
     "react-virtual": "^2.10.4",
     "resize-observer-polyfill": "^1.5.1",
diff --git a/modules/react/pagination/lib/Pagination/GoTo/Label.tsx b/modules/react/pagination/lib/Pagination/GoTo/Label.tsx
index 53ddebf390..19b483c162 100644
--- a/modules/react/pagination/lib/Pagination/GoTo/Label.tsx
+++ b/modules/react/pagination/lib/Pagination/GoTo/Label.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {PaginationModel} from '../types';
-import {LabelText} from '@workday/canvas-kit-react/text';
+import {Subtext} from '@workday/canvas-kit-react/text';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {PaginationContext} from '../usePaginationModel';
 
@@ -16,16 +16,16 @@ export const GoToLabel = createComponent('label')({
   Component({children, ...elemProps}: GoToLabelProps, ref, Element) {
     const model = React.useContext(PaginationContext);
     return (
-      <LabelText
+      <Subtext
         ref={ref}
         as={Element}
-        typeLevel="subtext.medium"
+        size="medium"
         variant="hint"
         whiteSpace="nowrap"
         {...elemProps}
       >
         {typeof children === 'function' ? children(model) : children}
-      </LabelText>
+      </Subtext>
     );
   },
 });
diff --git a/modules/react/popup/stories/stories_testing.tsx b/modules/react/popup/stories/stories_testing.tsx
index e7ae10a56e..1e346619f9 100644
--- a/modules/react/popup/stories/stories_testing.tsx
+++ b/modules/react/popup/stories/stories_testing.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {DeleteButton, SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
 import {useMount} from '@workday/canvas-kit-react/common';
@@ -351,9 +351,10 @@ export const ComboboxWithinPopup = () => {
           <Popup.CloseIcon aria-label="Close" />
           <Popup.Heading>Popup With Combobox</Popup.Heading>
           <Popup.Body>
-            <FormField label="Choose Your Food">
+            <FormField orientation="vertical">
+              <FormField.Label>Choose Your Food</FormField.Label>
               <Combobox items={['Pizza', 'Cheeseburger', 'Fries', 'Hot Dog']}>
-                <Combobox.Input as={TextInput} />
+                <FormField.Input as={Combobox.Input} />
                 <Combobox.Menu.Popper>
                   <Combobox.Menu.Card>
                     <Combobox.Menu.List>
@@ -387,8 +388,9 @@ export const ReturnFocusTest = () => {
         <p style={{marginBottom: 400}}>Scroll down</p>
         <p>Scroll right and click on the button</p>
         <Popup model={model}>
-          <FormField inputId="return-focus-text-input" label="Name" style={{marginLeft: 400}}>
-            <TextInput />
+          <FormField id="return-focus-text-input" cs={{marginLeft: 400}}>
+            <FormField.Label>Name</FormField.Label>
+            <FormField.Input as={TextInput} />
           </FormField>
           <Popup.Target style={{marginBottom: 400, marginLeft: 410}} data-testid="target">
             Open Popup
@@ -408,7 +410,7 @@ export const ReturnFocusTest = () => {
                       data-testid="focus-text-input-link"
                       onClick={() => {
                         model.events.hide();
-                        document.getElementById('return-focus-text-input').focus();
+                        document.getElementById('input-return-focus-text-input').focus();
                       }}
                     >
                       You click this link
diff --git a/modules/react/radio/lib/Radio.tsx b/modules/react/radio/lib/Radio.tsx
index 40be5e1023..47783eb083 100644
--- a/modules/react/radio/lib/Radio.tsx
+++ b/modules/react/radio/lib/Radio.tsx
@@ -230,7 +230,7 @@ const RadioBackground = styled('div')<RadioProps>(
         ? colors.soap300
         : themePrimary.main
       : disabled
-      ? inputColors.disabled.border
+      ? colors.licorice100
       : variant === 'inverse'
       ? colors.soap300
       : inputColors.border,
diff --git a/modules/react/radio/stories/Radio.stories.mdx b/modules/react/radio/stories/Radio.stories.mdx
index 1b0a85102b..d72e308b8f 100644
--- a/modules/react/radio/stories/Radio.stories.mdx
+++ b/modules/react/radio/stories/Radio.stories.mdx
@@ -1,4 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 
@@ -28,6 +28,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 Radio Buttons are intended to be grouped together using a Radio Group.
@@ -39,7 +51,9 @@ Radio Group should be used in tandem with [Form Field](/components/inputs/form-f
 
 ### Disabled
 
-Set the `disabled` prop of the Radio Button to prevent users from interacting with it. Be careful not to disable a pre-selected Radio Button, this will block keyboard access from the entire Radio Group. 
+Set the `disabled` prop of the Radio Button to prevent users from interacting with it. Be careful
+not to disable a pre-selected Radio Button, this will block keyboard access from the entire Radio
+Group.
 
 <ExampleCodeBlock code={Disabled} />
 
@@ -63,13 +77,10 @@ forward `ref` to its underlying `<input type="radio">` element.
 
 <ExampleCodeBlock code={RefForwarding} />
 
-### Label Position
-
-Set the `labelPosition` prop of the wrapping Form Field to designate the position of the label
-relative to the Radio Group. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`.
 
 <ExampleCodeBlock code={LabelPosition} />
 
diff --git a/modules/react/radio/stories/examples/Alert.tsx b/modules/react/radio/stories/examples/Alert.tsx
index 358a359c85..c23703a654 100644
--- a/modules/react/radio/stories/examples/Alert.tsx
+++ b/modules/react/radio/stories/examples/Alert.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -11,19 +11,15 @@ export const Alert = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="Deep dish is an extra $2.99"
-      label="Choose Your Pizza Crust"
-      useFieldset={true}
-    >
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField error="alert" as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
-      </RadioGroup>
+      </FormField.Input>
+      <FormField.Hint>Deep dish is an extra $2.99</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/react/radio/stories/examples/Basic.tsx b/modules/react/radio/stories/examples/Basic.tsx
index ac45430af9..790b53f474 100644
--- a/modules/react/radio/stories/examples/Basic.tsx
+++ b/modules/react/radio/stories/examples/Basic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';
@@ -12,14 +12,15 @@ export const Basic = () => {
   };
 
   return (
-    <FormField label="Choose Your Pizza Crust" useFieldset={true} style={{width: space.xl}}>
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField as="fieldset" cs={{width: space.xl}}>
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
         <Radio label="Butter - the best thing to put on bread" value="butter" />
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };
diff --git a/modules/react/radio/stories/examples/Disabled.tsx b/modules/react/radio/stories/examples/Disabled.tsx
index 4566450296..b631d66532 100644
--- a/modules/react/radio/stories/examples/Disabled.tsx
+++ b/modules/react/radio/stories/examples/Disabled.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -11,13 +11,14 @@ export const Disabled = () => {
   };
 
   return (
-    <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio disabled={true} label="Gluten free (sold out)" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };
diff --git a/modules/react/radio/stories/examples/Error.tsx b/modules/react/radio/stories/examples/Error.tsx
index 0ddfe26f3f..b5d8c8adc2 100644
--- a/modules/react/radio/stories/examples/Error.tsx
+++ b/modules/react/radio/stories/examples/Error.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -11,19 +11,15 @@ export const Error = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Error}
-      hintId="hint-error"
-      hintText="Deep dish is currently sold out."
-      label="Choose Your Pizza Crust"
-      useFieldset={true}
-    >
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField error="error" as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
-      </RadioGroup>
+      </FormField.Input>
+      <FormField.Hint>Deep dish is currently sold out</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/react/radio/stories/examples/LabelPosition.tsx b/modules/react/radio/stories/examples/LabelPosition.tsx
index 428fca1929..e8817943cb 100644
--- a/modules/react/radio/stories/examples/LabelPosition.tsx
+++ b/modules/react/radio/stories/examples/LabelPosition.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -11,17 +11,14 @@ export const LabelPosition = () => {
   };
 
   return (
-    <FormField
-      label="Choose Your Pizza Crust"
-      labelPosition={FormField.LabelPosition.Left}
-      useFieldset={true}
-    >
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField orientation="horizontal" as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };
diff --git a/modules/react/radio/stories/examples/NoValue.tsx b/modules/react/radio/stories/examples/NoValue.tsx
index 041804bac1..4a7c6d8d40 100644
--- a/modules/react/radio/stories/examples/NoValue.tsx
+++ b/modules/react/radio/stories/examples/NoValue.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {Subtext} from '@workday/canvas-kit-react/text';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
@@ -13,13 +13,14 @@ export const NoValue = () => {
 
   return (
     <>
-      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-        <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+        <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
           <Radio label="Deep dish" />
           <Radio label="Thin" />
           <Radio label="Gluten free" />
           <Radio label="Cauliflower" />
-        </RadioGroup>
+        </FormField.Input>
       </FormField>
       <Subtext size="large">Value: {value}</Subtext>
     </>
diff --git a/modules/react/radio/stories/examples/RefForwarding.tsx b/modules/react/radio/stories/examples/RefForwarding.tsx
index 01d1328e7e..87558b1d1f 100644
--- a/modules/react/radio/stories/examples/RefForwarding.tsx
+++ b/modules/react/radio/stories/examples/RefForwarding.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -18,13 +18,14 @@ export const RefForwarding = () => {
 
   return (
     <>
-      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-        <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+        <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
           <Radio label="Deep dish" value="deep-dish" />
           <Radio label="Thin" value="thin" />
           <Radio label="Gluten free" ref={glutenFreeRef} value="gluten-free" />
           <Radio label="Cauliflower" value="cauliflower" />
-        </RadioGroup>
+        </FormField.Input>
       </FormField>
       <PrimaryButton onClick={handleClick}>Select Gluten Free</PrimaryButton>
     </>
diff --git a/modules/react/radio/stories/examples/Required.tsx b/modules/react/radio/stories/examples/Required.tsx
index b9b500739b..0a200b2bac 100644
--- a/modules/react/radio/stories/examples/Required.tsx
+++ b/modules/react/radio/stories/examples/Required.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -11,13 +11,14 @@ export const Required = () => {
   };
 
   return (
-    <FormField label="Choose Your Pizza Crust" required={true} useFieldset={true}>
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField isRequired={true} as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };
diff --git a/modules/react/select/lib/Select.tsx b/modules/react/select/lib/Select.tsx
index f728d5da3b..1519a1abd5 100644
--- a/modules/react/select/lib/Select.tsx
+++ b/modules/react/select/lib/Select.tsx
@@ -1,21 +1,21 @@
 import React from 'react';
-import {
-  createSubcomponent,
-  ExtractProps,
-  createContainer,
-  Themeable,
-} from '@workday/canvas-kit-react/common';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {Combobox} from '@workday/canvas-kit-react/combobox';
-
+import {createStencil, createStyles, CSProps, px2rem} from '@workday/canvas-kit-styling';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
-import {useSelectModel} from './hooks/useSelectModel';
 import {useSelectCard} from './hooks/useSelectCard';
 import {useSelectInput} from './hooks/useSelectInput';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createStyles, CSProps} from '@workday/canvas-kit-styling';
+import {useSelectModel} from './hooks/useSelectModel';
+import {
+  createSubcomponent,
+  ExtractProps,
+  createContainer,
+  Themeable,
+} from '@workday/canvas-kit-react/common';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface SelectInputProps extends ExtractProps<typeof TextInput>, CSProps {
   /**
@@ -26,23 +26,34 @@ export interface SelectInputProps extends ExtractProps<typeof TextInput>, CSProp
   inputStartIcon?: CanvasSystemIcon;
 }
 
-const selectInputStyles = createStyles({
-  caretColor: 'transparent',
-  cursor: 'default',
-  '&::selection': {
-    backgroundColor: 'transparent',
+const selectInputStencil = createStencil({
+  base: {
+    caretColor: 'transparent',
+    cursor: 'default',
+    '&::selection': {
+      backgroundColor: 'transparent',
+    },
   },
 });
 
-const hiddenSelectStyles = createStyles({
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  opacity: 0,
-  cursor: 'default',
-  pointerEvents: 'none',
+const selectIconsStencil = createStencil({
+  base: {
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+});
+
+const hiddenSelectInputStencil = createStencil({
+  base: {
+    position: 'absolute',
+    top: system.space.zero,
+    bottom: system.space.zero,
+    left: system.space.zero,
+    right: system.space.zero,
+    opacity: system.opacity.zero,
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
 });
 
 export const SelectInput = createSubcomponent(TextInput)({
@@ -56,6 +67,7 @@ export const SelectInput = createSubcomponent(TextInput)({
       error,
       textInputProps,
       disabled,
+      width,
       ref,
       onChange,
       onInput,
@@ -67,9 +79,9 @@ export const SelectInput = createSubcomponent(TextInput)({
     model
   ) => {
     return (
-      <InputGroup>
+      <InputGroup data-width="ck-formfield-width">
         {inputStartIcon && model.state.selectedIds.length > 0 && (
-          <InputGroup.InnerStart pointerEvents="none">
+          <InputGroup.InnerStart {...selectIconsStencil()}>
             <SystemIcon icon={inputStartIcon} />
           </InputGroup.InnerStart>
         )}
@@ -77,7 +89,6 @@ export const SelectInput = createSubcomponent(TextInput)({
         <InputGroup.Input
           error={error}
           disabled={disabled}
-          className={hiddenSelectStyles}
           tabIndex={-1}
           aria-hidden={true}
           onChange={onChange}
@@ -85,6 +96,7 @@ export const SelectInput = createSubcomponent(TextInput)({
           value={value}
           name={name}
           ref={ref}
+          {...hiddenSelectInputStencil()}
         />
         {/* Visual input */}
         <InputGroup.Input
@@ -93,9 +105,9 @@ export const SelectInput = createSubcomponent(TextInput)({
           placeholder={placeholder}
           error={error}
           {...textInputProps}
-          {...mergeStyles(elemProps, [selectInputStyles])}
+          {...mergeStyles(elemProps, selectInputStencil())}
         />
-        <InputGroup.InnerEnd position="absolute" pointerEvents="none">
+        <InputGroup.InnerEnd {...selectIconsStencil()}>
           <SystemIcon icon={caretDownSmallIcon} />
         </InputGroup.InnerEnd>
       </InputGroup>
@@ -116,12 +128,16 @@ export const SelectItem = createSubcomponent('li')({
   );
 });
 
+const selectCardStyles = createStyles({
+  maxHeight: px2rem(300),
+});
+
 export const SelectCard = createSubcomponent('div')({
   modelHook: useSelectModel,
   elemPropsHook: useSelectCard,
 })<ExtractProps<typeof Combobox.Menu.Card>>(({children, ...elemProps}, Element) => {
   return (
-    <Combobox.Menu.Card maxHeight={300} as={Element} {...elemProps}>
+    <Combobox.Menu.Card as={Element} {...mergeStyles(elemProps, selectCardStyles)}>
       {children}
     </Combobox.Menu.Card>
   );
diff --git a/modules/react/select/stories/Select.stories.mdx b/modules/react/select/stories/Select.stories.mdx
index 9dfa579936..e86beb9c1b 100644
--- a/modules/react/select/stories/Select.stories.mdx
+++ b/modules/react/select/stories/Select.stories.mdx
@@ -1,5 +1,5 @@
 import {Meta} from '@storybook/addon-docs';
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {Select} from '@workday/canvas-kit-react/select';
 
@@ -36,6 +36,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 `Select` supports a
@@ -85,13 +97,10 @@ properties by default for keyboard navigation and selected the `id` based on the
 
 <ExampleCodeBlock code={HoistedModel} />
 
-### Label Position
-
-Set the `labelPosition` prop of the wrapping `FormField` to designate the position of the label
-relative to the `Select`. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`.
 
 <ExampleCodeBlock code={LabelPosition} />
 
@@ -226,9 +235,9 @@ properties of `id` or `text`. Using these helper functions sets the `serverId` t
 
 ### Complex
 
-When registering items in an array of objects, it's common to have the text that is displayed to the user be
-different than an id. In this example, `serverId` and `label` properties need to be remapped to
-`id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties
+When registering items in an array of objects, it's common to have the text that is displayed to the
+user be different than an id. In this example, `serverId` and `label` properties need to be remapped
+to `id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties
 `text` and `id`, there would be no need for this.
 
 <ExampleCodeBlock code={Complex} />
@@ -254,10 +263,10 @@ const items = [
 
 - `getId`: This is an optional function to return the id of an item. If not provided, the default
   function will return the `id` property from the object of each item. If you did not provide
-  `items`, do not override this function. Instead provide static
-  items via JSX. the list will create an internal array of items where `id` is the only property and
-  the default `getId` will return the desired result. **Note: If your array of objects has a
-  different property for `id`, like `serverId`, use this function to set the id.**
+  `items`, do not override this function. Instead provide static items via JSX. the list will create
+  an internal array of items where `id` is the only property and the default `getId` will return the
+  desired result. **Note: If your array of objects has a different property for `id`, like
+  `serverId`, use this function to set the id.**
 
   ```tsx
   const options = [{text: 'Pizza', serverId: 'pizza-1'}, {text: 'Cheeseburger', serverId: 'cheeseburger'}]
@@ -293,6 +302,12 @@ const items = [
   </Select>
   ```
 
+### Custom Styles
+
+Select and its subcomponents support custom styling via the `cs` prop. For more information, check
+our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Select" fileName="/react/" />
diff --git a/modules/react/select/stories/examples/Alert.tsx b/modules/react/select/stories/examples/Alert.tsx
index 67545def55..b1ecd30947 100644
--- a/modules/react/select/stories/examples/Alert.tsx
+++ b/modules/react/select/stories/examples/Alert.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -19,19 +24,17 @@ export const Alert = () => {
     setValue(event.target.value);
   };
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options}>
-        <FormField
-          error={FormField.ErrorType.Alert}
-          hintText="Please choose a form of contact."
-          label="Contact"
-        >
-          <Select.Input onChange={e => handleChange(e)} id="alert-select" />
+        <FormField error="alert">
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} id="alert-select" />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
+          <FormField.Hint>Please choose a form of contact.</FormField.Hint>
         </FormField>
       </Select>
       Selected value: {value}
diff --git a/modules/react/select/stories/examples/Basic.tsx b/modules/react/select/stories/examples/Basic.tsx
index c24fe930f2..099b70e939 100644
--- a/modules/react/select/stories/examples/Basic.tsx
+++ b/modules/react/select/stories/examples/Basic.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,10 +25,11 @@ export const Basic = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options}>
-        <FormField label="Contact">
-          <Select.Input onChange={handleChange} />
+        <FormField>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} onChange={handleChange} />
           <Select.Popper>
             <Select.Card>
               <Select.List>
diff --git a/modules/react/select/stories/examples/Complex.tsx b/modules/react/select/stories/examples/Complex.tsx
index 5072374d2e..84789ebe5f 100644
--- a/modules/react/select/stories/examples/Complex.tsx
+++ b/modules/react/select/stories/examples/Complex.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   {serverId: 'email', label: 'E-mail'},
@@ -21,14 +26,15 @@ export const Complex = () => {
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setId(event.target.value);
-    setValue(options.find(item => item.serverId === event.target.value).label);
+    setValue(options.find(item => item.serverId === event.target.value)!.label);
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>
-        <FormField label="Contact">
-          <Select.Input onChange={e => handleChange(e)} />
+        <FormField>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>
diff --git a/modules/react/select/stories/examples/Disabled.tsx b/modules/react/select/stories/examples/Disabled.tsx
index db317b9c9c..9fe70b1cd9 100644
--- a/modules/react/select/stories/examples/Disabled.tsx
+++ b/modules/react/select/stories/examples/Disabled.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,10 +25,11 @@ export const Disabled = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
-        <FormField label="Contact">
-          <Select.Input disabled onChange={e => handleChange(e)} />
+        <FormField>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} disabled onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>
diff --git a/modules/react/select/stories/examples/DisabledOption.tsx b/modules/react/select/stories/examples/DisabledOption.tsx
index 5322758d5b..2c4582a720 100644
--- a/modules/react/select/stories/examples/DisabledOption.tsx
+++ b/modules/react/select/stories/examples/DisabledOption.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,10 +25,11 @@ export const DisabledOptions = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} nonInteractiveIds={['Fax (disabled)', 'Mobile Phone']}>
-        <FormField label="Contact">
-          <Select.Input onChange={e => handleChange(e)} />
+        <FormField>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>
diff --git a/modules/react/select/stories/examples/Error.tsx b/modules/react/select/stories/examples/Error.tsx
index 641b072440..5a5678395d 100644
--- a/modules/react/select/stories/examples/Error.tsx
+++ b/modules/react/select/stories/examples/Error.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -19,14 +24,11 @@ export const Error = () => {
     setValue(event.target.value);
   };
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
-        <FormField
-          error={FormField.ErrorType.Error}
-          hintText="Fax is disabled. Please choose a different option."
-          label="Contact"
-        >
-          <Select.Input onChange={e => handleChange(e)} />
+        <FormField error="error">
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>
@@ -38,6 +40,7 @@ export const Error = () => {
               </Select.List>
             </Select.Card>
           </Select.Popper>
+          <FormField.Hint>Fax is disabled. Please choose a different option.</FormField.Hint>
         </FormField>
       </Select>
       Selected Value: {value}
diff --git a/modules/react/select/stories/examples/FetchingDynamicItems.tsx b/modules/react/select/stories/examples/FetchingDynamicItems.tsx
index ea10fa3815..aa4ecf4940 100644
--- a/modules/react/select/stories/examples/FetchingDynamicItems.tsx
+++ b/modules/react/select/stories/examples/FetchingDynamicItems.tsx
@@ -4,6 +4,12 @@ import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {useMount} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+  maxWidth: px2rem(300),
+});
 
 const movieListItems = [
   {
@@ -68,7 +74,7 @@ export const FetchingDynamicItems = () => {
   });
 
   return (
-    <Flex flexDirection="column" maxWidth={300}>
+    <Flex cs={parentContainerStyles}>
       <Select model={model}>
         <FormField label="Choose a Film">
           <Select.Input
diff --git a/modules/react/select/stories/examples/Grow.tsx b/modules/react/select/stories/examples/Grow.tsx
index 690ea21b2a..faf89a654d 100644
--- a/modules/react/select/stories/examples/Grow.tsx
+++ b/modules/react/select/stories/examples/Grow.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -20,8 +20,9 @@ export const Grow = () => {
   return (
     <Flex>
       <Select model={model}>
-        <FormField label="Contact" grow>
-          <Select.Input />
+        <FormField grow>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input grow as={Select.Input} />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
diff --git a/modules/react/select/stories/examples/HoistedModel.tsx b/modules/react/select/stories/examples/HoistedModel.tsx
index 619f08a187..03756dd06d 100644
--- a/modules/react/select/stories/examples/HoistedModel.tsx
+++ b/modules/react/select/stories/examples/HoistedModel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {BodyText} from '@workday/canvas-kit-react/text';
 
@@ -21,8 +21,9 @@ export const HoistedModel = () => {
   return (
     <>
       <Select model={model}>
-        <FormField label="Contact">
-          <Select.Input />
+        <FormField>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>
diff --git a/modules/react/select/stories/examples/InitialSelectedItem.tsx b/modules/react/select/stories/examples/InitialSelectedItem.tsx
index 3a887d287c..b9584e213d 100644
--- a/modules/react/select/stories/examples/InitialSelectedItem.tsx
+++ b/modules/react/select/stories/examples/InitialSelectedItem.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   {
@@ -37,7 +42,7 @@ export const InitialSelectedItem = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select
         items={options}
         initialSelectedIds={['da594226446c11de98360015c5e6daf6']}
diff --git a/modules/react/select/stories/examples/LabelPosition.tsx b/modules/react/select/stories/examples/LabelPosition.tsx
index d1269d982b..384211603f 100644
--- a/modules/react/select/stories/examples/LabelPosition.tsx
+++ b/modules/react/select/stories/examples/LabelPosition.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -20,8 +20,9 @@ export const LabelPosition = () => {
   return (
     <Flex>
       <Select model={model}>
-        <FormField label="Contact" labelPosition={FormField.LabelPosition.Left}>
-          <Select.Input />
+        <FormField orientation="horizontal">
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
diff --git a/modules/react/select/stories/examples/MenuHeight.tsx b/modules/react/select/stories/examples/MenuHeight.tsx
index faf2eeebb4..7d634fd95a 100644
--- a/modules/react/select/stories/examples/MenuHeight.tsx
+++ b/modules/react/select/stories/examples/MenuHeight.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const selectCardStyles = createStyles({
+  maxHeight: px2rem(200),
+});
 
 const cities = [
   'Atlanta (United States)',
@@ -38,11 +43,12 @@ const cities = [
 export const MenuHeight = () => {
   return (
     <Box>
-      <FormField label="Choose a City">
+      <FormField>
+        <FormField.Label>Choose a City</FormField.Label>
         <Select items={cities}>
-          <Select.Input />
+          <FormField.Input as={Select.Input} />
           <Select.Popper>
-            <Select.Card maxHeight={200}>
+            <Select.Card cs={selectCardStyles}>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
diff --git a/modules/react/select/stories/examples/Placeholder.tsx b/modules/react/select/stories/examples/Placeholder.tsx
index f1387f751f..0624370cf8 100644
--- a/modules/react/select/stories/examples/Placeholder.tsx
+++ b/modules/react/select/stories/examples/Placeholder.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export const Placeholder = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options}>
         <FormField label="Contact">
           <Select.Input placeholder="Make a Selection" onChange={e => handleChange(e)} />
diff --git a/modules/react/select/stories/examples/RefForwarding.tsx b/modules/react/select/stories/examples/RefForwarding.tsx
index 54fd949488..e784f8f6d0 100644
--- a/modules/react/select/stories/examples/RefForwarding.tsx
+++ b/modules/react/select/stories/examples/RefForwarding.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 
 const options = [
@@ -14,7 +14,7 @@ const options = [
 
 export const RefForwarding = () => {
   const [value, setValue] = React.useState('medium');
-  const ref = React.useRef<HTMLInputElement>(null);
+  const ref = React.useRef(null);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
@@ -29,16 +29,17 @@ export const RefForwarding = () => {
 
   return (
     <>
-      <Select items={options}>
-        <FormField label="Contact">
-          <Select.Input ref={ref} onChange={e => handleChange(e)} />
+      <FormField>
+        <Select items={options}>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} ref={ref} onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
-        </FormField>
-      </Select>
+        </Select>
+      </FormField>
       <PrimaryButton onClick={handleClick}>Focus Select</PrimaryButton>
     </>
   );
diff --git a/modules/react/select/stories/examples/Required.tsx b/modules/react/select/stories/examples/Required.tsx
index 299a386b62..ddc12909ed 100644
--- a/modules/react/select/stories/examples/Required.tsx
+++ b/modules/react/select/stories/examples/Required.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,17 +25,18 @@ export const Required = () => {
   };
 
   return (
-    <Flex flexDirection="column">
-      <Select items={options}>
-        <FormField label="Contact" required>
-          <Select.Input onChange={e => handleChange(e)} />
+    <Flex cs={parentContainerStyles}>
+      <FormField isRequired>
+        <Select items={options}>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
-        </FormField>
-      </Select>
+        </Select>
+      </FormField>
       Selected Value: {value}
     </Flex>
   );
diff --git a/modules/react/select/stories/examples/WithIcons.tsx b/modules/react/select/stories/examples/WithIcons.tsx
index 4a6d949227..e69aa0b0f5 100644
--- a/modules/react/select/stories/examples/WithIcons.tsx
+++ b/modules/react/select/stories/examples/WithIcons.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {
@@ -8,6 +8,16 @@ import {
   uploadCloudIcon,
   userIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const styleOverrides = {
+  formfieldInputStyles: createStyles({
+    width: px2rem(300),
+  }),
+  selectCardStyles: createStyles({
+    maxHeight: px2rem(200),
+  }),
+};
 
 const customOptions = [
   {text: 'Activity Stream', id: 'activity-stream', icon: activityStreamIcon},
@@ -23,11 +33,16 @@ export const WithIcons = () => {
   const selectedItem = model.navigation.getItem(model.state.selectedIds[0], model);
   return (
     <Flex>
-      <Select model={model}>
-        <FormField label="Contact">
-          <Select.Input width="300px" inputStartIcon={selectedItem.value.icon} />
+      <FormField>
+        <Select model={model}>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input
+            as={Select.Input}
+            cs={styleOverrides.formfieldInputStyles}
+            inputStartIcon={selectedItem.value.icon}
+          />
           <Select.Popper>
-            <Select.Card maxHeight="200px">
+            <Select.Card cs={styleOverrides.selectCardStyles}>
               {model.state.items.length > 0 && (
                 <Select.List>
                   {item => (
@@ -40,8 +55,8 @@ export const WithIcons = () => {
               )}
             </Select.Card>
           </Select.Popper>
-        </FormField>
-      </Select>
+        </Select>
+      </FormField>
     </Flex>
   );
 };
diff --git a/modules/react/select/stories/stories_VisualTesting.tsx b/modules/react/select/stories/stories_VisualTesting.tsx
index 0bad26f8a5..637211a33a 100644
--- a/modules/react/select/stories/stories_VisualTesting.tsx
+++ b/modules/react/select/stories/stories_VisualTesting.tsx
@@ -6,7 +6,7 @@ import {
   StaticStates,
 } from '@workday/canvas-kit-react/testing';
 import {withSnapshotsEnabled, customColorTheme} from '../../../../utils/storybook';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
 import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 
@@ -39,8 +39,8 @@ export const SelectStates = () => {
       <ComponentStatesTable
         rowProps={[
           {label: 'Default', props: {}},
-          {label: 'Alert', props: {error: FormField.ErrorType.Alert}},
-          {label: 'Error', props: {error: FormField.ErrorType.Error}},
+          {label: 'Alert', props: {error: 'alert'}},
+          {label: 'Error', props: {error: 'error'}},
         ]}
         columnProps={permutateProps(
           {
@@ -63,9 +63,10 @@ export const SelectStates = () => {
         )}
       >
         {props => (
-          <FormField label="Contact">
+          <FormField>
+            <FormField.Label>Contact</FormField.Label>
             <Select model={model}>
-              <Select.Input {...props} id="contact-select" />
+              <FormField.Input as={Select.Input} {...props} id="contact-select" />
               <Select.Popper>
                 <Select.Card maxHeight="200px">
                   {model.state.items.length > 0 && (
@@ -100,15 +101,16 @@ export const SelectOpenMenuStates = () => {
       <ComponentStatesTable
         rowProps={[
           {label: 'Default', props: {}},
-          {label: 'Alert', props: {error: FormField.ErrorType.Alert}},
-          {label: 'Error', props: {error: FormField.ErrorType.Error}},
+          {label: 'Alert', props: {error: 'alert'}},
+          {label: 'Error', props: {error: 'error'}},
         ]}
         columnProps={[{label: 'Default', props: {}}]}
       >
         {props => (
-          <FormField label="Contact" style={{marginBottom: '250px'}}>
+          <FormField cs={{marginBottom: '250px'}}>
+            <FormField.Label>Contact</FormField.Label>
             <Select model={model}>
-              <Select.Input {...props} id="contact-select" />
+              <FormField.Input as={Select.Input} {...props} id="contact-select" />
               <Select.Popper>
                 <Select.Card maxHeight="200px">
                   {!!model.state.items.length && (
diff --git a/modules/react/skeleton/lib/parts/skeletonText.tsx b/modules/react/skeleton/lib/parts/skeletonText.tsx
index fe360adbe6..744ccc5c5f 100644
--- a/modules/react/skeleton/lib/parts/skeletonText.tsx
+++ b/modules/react/skeleton/lib/parts/skeletonText.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 
-import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {createComponent, filterOutProps, StyledType} from '@workday/canvas-kit-react/common';
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 
 const TextContainer = styled('div')<StyledType>({
@@ -21,7 +21,9 @@ export interface SkeletonTextProps {
   backgroundColor?: string;
 }
 
-const Line = styled('div')<
+const Line = styled('div', {
+  shouldForwardProp: filterOutProps(['backgroundColor', 'width']),
+})<
   {
     backgroundColor: string;
     width: number | string;
diff --git a/modules/react/skeleton/stories/examples/Simulation.tsx b/modules/react/skeleton/stories/examples/Simulation.tsx
index 411bf341a5..43800def24 100644
--- a/modules/react/skeleton/stories/examples/Simulation.tsx
+++ b/modules/react/skeleton/stories/examples/Simulation.tsx
@@ -3,7 +3,7 @@ import {keyframes} from '@emotion/react';
 
 import {Card} from '@workday/canvas-kit-react/card';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {SystemIconCircle} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
@@ -64,11 +64,13 @@ export const Simulation = () => {
   return (
     <Box>
       <Box marginBottom="l">
-        <FormField label="Load Time" labelPosition={FormField.LabelPosition.Left}>
-          <TextInput onChange={onChangeLoadTime} value={loadTime} />
+        <FormField orientation="horizontal">
+          <FormField.Label>Load Time</FormField.Label>
+          <FormField.Input as={TextInput} onChange={onChangeLoadTime} value={loadTime} />
         </FormField>
-        <FormField label="Loading" labelPosition={FormField.LabelPosition.Left}>
-          <Checkbox checked={loading} onChange={onChangeLoading} />
+        <FormField orientation="horizontal">
+          <FormField.Label>Loading</FormField.Label>
+          <FormField.Input as={Checkbox} checked={loading} onChange={onChangeLoading} />
         </FormField>
         <SecondaryButton onClick={resetTimeout}>Simulate Loading</SecondaryButton>
       </Box>
diff --git a/modules/react/status-indicator/stories/StatusIndicator.stories.mdx b/modules/react/status-indicator/stories/StatusIndicator.stories.mdx
index c4c8b62d0d..78faa905cc 100644
--- a/modules/react/status-indicator/stories/StatusIndicator.stories.mdx
+++ b/modules/react/status-indicator/stories/StatusIndicator.stories.mdx
@@ -1,6 +1,7 @@
 import {SymbolDoc} from '@workday/canvas-kit-docs';
 
 import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
+import {StatusIndicator as PreviewStatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import {Basic} from './examples/Basic';
 import {Icon} from './examples/Icon';
@@ -11,6 +12,15 @@ import {MaxWidth} from './examples/MaxWidth';
 
 # Canvas Kit Status Indicator
 
+<PreviewStatusIndicator variant="red">
+  <PreviewStatusIndicator.Label>Deprecated</PreviewStatusIndicator.Label>
+</PreviewStatusIndicator>
+
+`StatusIndicator` in Main has been deprecated and will be removed in a future major version. Please
+use
+[`StatusIndicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic)
+in Preview instead.
+
 Status Indicators help the user quickly identify the status of a task, action, or page element.
 
 [> Workday Design Reference](https://design.workday.com/components/indicators/status-indicators)
diff --git a/modules/react/switch/lib/Switch.tsx b/modules/react/switch/lib/Switch.tsx
index d34e3af925..dadc6a69de 100644
--- a/modules/react/switch/lib/Switch.tsx
+++ b/modules/react/switch/lib/Switch.tsx
@@ -1,18 +1,10 @@
 import * as React from 'react';
-import {
-  createComponent,
-  StyledType,
-  ErrorType,
-  focusRing,
-  mouseFocusBehavior,
-  getErrorColors,
-  styled,
-  Themeable,
-  useUniqueId,
-} from '@workday/canvas-kit-react/common';
-import {borderRadius, colors, depth, space} from '@workday/canvas-kit-react/tokens';
+import {createComponent, ErrorType, focusRing, useUniqueId} from '@workday/canvas-kit-react/common';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '../../layout';
 
-export interface SwitchProps extends Themeable {
+export interface SwitchProps {
   /**
    * If true, set the Switch to the on state.
    * @default false
@@ -42,123 +34,141 @@ export interface SwitchProps extends Themeable {
   error?: ErrorType;
 }
 
-const circleSize = space.xs;
-const switchWidth = space.l;
-const switchHeight = space.s;
-const switchTapArea = space.l;
-const translateLength = space.s;
-
-const SwitchContainer = styled('div')({
-  position: 'relative',
-  height: space.m,
-  width: switchTapArea,
+const switchContainerStencil = createStencil({
+  base: {
+    position: 'relative',
+    height: system.space.x6,
+    width: system.space.x8,
+  },
 });
 
-const SwitchInput = styled('input')<SwitchProps & StyledType>(
-  {
-    position: 'absolute',
-    height: space.m,
-    width: switchTapArea,
-    margin: 0,
-    marginLeft: space.xxxs,
-    borderRadius: borderRadius.circle,
-    opacity: 0,
-    display: 'block',
+const SwitchContainer = createComponent('div')({
+  displayName: 'SwitchContainer',
+  Component: ({children, ...elemProps}, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, switchContainerStencil())}>
+        {children}
+      </Element>
+    );
   },
-  ({disabled}) => ({
-    cursor: disabled ? 'not-allowed' : 'pointer',
-  }),
-  ({error, theme}) => {
-    const errorColors = getErrorColors(error, theme);
-
-    if (errorColors.outer === errorColors.inner) {
-      errorColors.outer = 'transparent';
-    }
+});
 
-    const styles = {
-      '&:focus': {
-        outline: 'none',
+const switchInputStencil = createStencil({
+  base: {
+    display: 'flex',
+    position: 'absolute',
+    height: system.space.x6,
+    width: system.space.x8,
+    margin: system.space.zero,
+    marginLeft: system.space.x1,
+    borderRadius: system.shape.round,
+    opacity: '0',
+    cursor: 'pointer',
+    '&:checked, &.checked': {
+      '& ~ div:first-of-type': {
+        backgroundColor: brand.primary.base,
+      },
+      '&:disabled, &.disabled': {
         '& ~ div:first-of-type': {
-          ...focusRing({separation: 2, animate: false}, theme),
+          opacity: system.opacity.disabled,
         },
       },
+    },
+    '&:disabled, &.disabled': {
+      cursor: 'not-allowed',
       '& ~ div:first-of-type': {
-        boxShadow: `
-          0 0 0 2px ${colors.frenchVanilla100},
-          0 0 0 4px ${errorColors.inner},
-          0 0 0 5px ${errorColors.outer}`,
+        opacity: system.opacity.disabled,
       },
-      '&:focus ~ div:first-of-type': {
-        ...focusRing({separation: 2, animate: false}, theme),
+    },
+    '&:focus-visible, &:focus, &.focus': {
+      outline: 'none',
+      '& ~ div:first-of-type': {
+        ...focusRing({separation: 2, animate: false}),
       },
-    };
-    return {
-      ...styles,
-      // Error rings take precedence over focus
-      ...mouseFocusBehavior({
-        ...styles,
-        '&:focus ~ div:first-of-type, &:active ~ div:first-of-type': {
+    },
+  },
+  modifiers: {
+    error: {
+      error: {
+        '& ~ div:first-of-type': {
           boxShadow: `
-            0 0 0 2px ${colors.frenchVanilla100},
-            0 0 0 4px ${errorColors.inner},
-            0 0 0 5px ${errorColors.outer}`,
+              0 0 0 ${px2rem(2)} ${system.color.border.inverse},
+              0 0 0 ${system.space.x1} ${brand.error.base},
+              0 0 0 ${px2rem(5)} transparent`,
         },
-      }),
-    };
-  }
-);
+      },
+      alert: {
+        '& ~ div:first-of-type': {
+          boxShadow: `
+          0 0 0 ${px2rem(2)} ${system.color.border.inverse},
+          0 0 0 ${system.space.x1} ${brand.alert.base},
+          0 0 0 ${px2rem(5)} ${brand.alert.darkest}`,
+        },
+      },
+    },
+  },
+});
+
+const SwitchInput = createComponent('input')<SwitchProps>({
+  displayName: 'SwitchInput',
+  Component: ({error, ...elemProps}, ref, Element) => {
+    return <Element ref={ref} {...mergeStyles(elemProps, switchInputStencil({error}))} />;
+  },
+});
 
-const SwitchBackground = styled('div')<Pick<SwitchProps, 'checked' | 'disabled'>>(
-  {
-    boxSizing: 'border-box',
+const switchBackgroundStencil = createStencil({
+  base: {
     position: 'absolute',
     display: 'flex',
     alignItems: 'center',
     pointerEvents: 'none',
-    marginTop: space.xxxs,
-    width: switchWidth,
-    height: switchHeight,
-    borderRadius: borderRadius.circle,
-    padding: '0px 2px',
+    marginTop: system.space.x1,
+    width: system.space.x8,
+    height: system.space.x4,
+    borderRadius: system.shape.round,
+    padding: `${system.space.zero} ${px2rem(2)}`,
     transition: 'background-color 200ms ease',
+    backgroundColor: system.color.bg.muted.soft,
   },
-  ({
-    checked,
-    disabled,
-    theme: {
-      canvas: {
-        palette: {primary: themePrimary},
-      },
-    },
-  }) => {
-    if (checked) {
-      return {
-        backgroundColor: disabled ? themePrimary.light : themePrimary.main,
-      };
-    } else {
-      return {
-        backgroundColor: disabled ? colors.soap400 : colors.licorice200,
-      };
-    }
-  }
-);
+});
 
-const SwitchCircle = styled('div')<Pick<SwitchProps, 'checked' | 'theme'>>(
-  {
-    width: circleSize,
-    height: circleSize,
-    borderRadius: borderRadius.circle,
-    ...depth[1],
+const SwitchBackground = createComponent('div')({
+  displayName: 'SwitchBackground',
+  Component: ({children, ...elemProps}, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, switchBackgroundStencil())}>
+        {children}
+      </Element>
+    );
+  },
+});
+
+const switchCircleStencil = createStencil({
+  base: {
+    width: system.space.x3,
+    height: system.space.x3,
+    borderRadius: system.shape.round,
+    boxShadow: system.depth[1],
     transition: 'transform 150ms ease',
     pointerEvents: 'none',
+    backgroundColor: brand.primary.accent,
+    transform: `translateX(${system.space.zero})`,
+  },
+  modifiers: {
+    checked: {
+      true: {
+        transform: `translateX(${system.space.x4})`,
+      },
+    },
   },
-  ({theme}) => ({
-    backgroundColor: theme.canvas.palette.primary.contrast,
-  }),
-  ({checked}) => ({
-    transform: checked ? `translateX(${translateLength})` : 'translateX(0)',
-  })
-);
+});
+
+const SwitchCircle = createComponent('div')<Pick<SwitchProps, 'checked'>>({
+  displayName: 'SwitchCircle',
+  Component: ({checked, ...elemProps}, ref, Element) => {
+    return <Element ref={ref} {...mergeStyles(elemProps, switchCircleStencil({checked}))} />;
+  },
+});
 
 export const Switch = createComponent('input')({
   displayName: 'Switch',
@@ -182,7 +192,7 @@ export const Switch = createComponent('input')({
           value={value}
           {...elemProps}
         />
-        <SwitchBackground checked={checked} disabled={disabled}>
+        <SwitchBackground>
           <SwitchCircle checked={checked} />
         </SwitchBackground>
       </SwitchContainer>
diff --git a/modules/react/switch/stories/Switch.stories.mdx b/modules/react/switch/stories/Switch.stories.mdx
index 04f96f804f..270f90d705 100644
--- a/modules/react/switch/stories/Switch.stories.mdx
+++ b/modules/react/switch/stories/Switch.stories.mdx
@@ -1,4 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {Switch} from '@workday/canvas-kit-react/switch';
 
@@ -25,6 +25,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 Switch should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
@@ -45,13 +57,10 @@ Switch supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html).
 
 <ExampleCodeBlock code={RefForwarding} />
 
-### Label Position
-
-Set the `labelPosition` prop of the wrapping Form Field to designate the position of the label
-relative to the Switch. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`.
 
 <ExampleCodeBlock code={LabelPosition} />
 
@@ -73,6 +82,11 @@ The `error` prop may be applied directly to the Switch with a value of `Switch.E
 
 <ExampleCodeBlock code={Error} />
 
+### Custom Styles
+
+Switch supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Switch" fileName="/react/" />
diff --git a/modules/react/switch/stories/examples/Alert.tsx b/modules/react/switch/stories/examples/Alert.tsx
index 1fdcd045c5..82a46a8767 100644
--- a/modules/react/switch/stories/examples/Alert.tsx
+++ b/modules/react/switch/stories/examples/Alert.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 
 export const Alert = () => {
@@ -10,13 +10,10 @@ export const Alert = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="We were unable to activate Dark Mode."
-      label="Dark Mode"
-    >
-      <Switch checked={checked} onChange={handleChange} />
+    <FormField error="alert">
+      <FormField.Label>Dark Mode</FormField.Label>
+      <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+      <FormField.Hint>We were unable to activate Dark Mode.</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/react/switch/stories/examples/Basic.tsx b/modules/react/switch/stories/examples/Basic.tsx
index 725eb1d2b8..6f0bb4b2f4 100644
--- a/modules/react/switch/stories/examples/Basic.tsx
+++ b/modules/react/switch/stories/examples/Basic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 
 export const Basic = () => {
@@ -10,8 +10,9 @@ export const Basic = () => {
   };
 
   return (
-    <FormField label="Dark Mode">
-      <Switch checked={checked} onChange={handleChange} />
+    <FormField>
+      <FormField.Label>Dark Mode</FormField.Label>
+      <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
     </FormField>
   );
 };
diff --git a/modules/react/switch/stories/examples/Disabled.tsx b/modules/react/switch/stories/examples/Disabled.tsx
index a8270f1192..104917604a 100644
--- a/modules/react/switch/stories/examples/Disabled.tsx
+++ b/modules/react/switch/stories/examples/Disabled.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 
 export const Disabled = () => {
@@ -10,8 +10,9 @@ export const Disabled = () => {
   };
 
   return (
-    <FormField label="Dark Mode">
-      <Switch checked={checked} disabled onChange={handleChange} />
+    <FormField>
+      <FormField.Label>Dark Mode</FormField.Label>
+      <FormField.Input disabled as={Switch} checked={checked} onChange={handleChange} />
     </FormField>
   );
 };
diff --git a/modules/react/switch/stories/examples/Error.tsx b/modules/react/switch/stories/examples/Error.tsx
index cb8d90b110..7f670648ce 100644
--- a/modules/react/switch/stories/examples/Error.tsx
+++ b/modules/react/switch/stories/examples/Error.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 
 export const Error = () => {
@@ -10,13 +10,10 @@ export const Error = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Error}
-      hintId="hint-error"
-      hintText="We were unable to activate Dark Mode."
-      label="Dark Mode"
-    >
-      <Switch checked={checked} onChange={handleChange} />
+    <FormField error="error">
+      <FormField.Label>Dark Mode</FormField.Label>
+      <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+      <FormField.Hint>We were unable to activate Dark Mode.</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/react/switch/stories/examples/LabelPosition.tsx b/modules/react/switch/stories/examples/LabelPosition.tsx
index acf048f52a..3b509c5197 100644
--- a/modules/react/switch/stories/examples/LabelPosition.tsx
+++ b/modules/react/switch/stories/examples/LabelPosition.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 
 export const LabelPosition = () => {
@@ -10,8 +10,9 @@ export const LabelPosition = () => {
   };
 
   return (
-    <FormField label="Dark Mode" labelPosition={FormField.LabelPosition.Left}>
-      <Switch checked={checked} onChange={handleChange} />
+    <FormField orientation="horizontal">
+      <FormField.Label>Dark Mode</FormField.Label>
+      <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
     </FormField>
   );
 };
diff --git a/modules/react/switch/stories/examples/RefForwarding.tsx b/modules/react/switch/stories/examples/RefForwarding.tsx
index acd6e5a575..d7861d4996 100644
--- a/modules/react/switch/stories/examples/RefForwarding.tsx
+++ b/modules/react/switch/stories/examples/RefForwarding.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Switch} from '@workday/canvas-kit-react/switch';
 
 export const RefForwarding = () => {
@@ -17,8 +17,9 @@ export const RefForwarding = () => {
 
   return (
     <>
-      <FormField label="Dark Mode">
-        <Switch checked={checked} onChange={handleChange} ref={ref} />
+      <FormField>
+        <FormField.Label>Dark Mode</FormField.Label>
+        <FormField.Input as={Switch} checked={checked} ref={ref} onChange={handleChange} />
       </FormField>
       <PrimaryButton onClick={handleClick}>Focus Switch</PrimaryButton>
     </>
diff --git a/modules/react/table/LICENSE b/modules/react/table/LICENSE
new file mode 100644
index 0000000000..5bcbbab3b9
--- /dev/null
+++ b/modules/react/table/LICENSE
@@ -0,0 +1,51 @@
+Apache License, Version 2.0 Apache License Version 2.0, January 2004
+
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License.
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License.
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution.
+You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+You must give any other recipients of the Work or Derivative Works a copy of this License; and You must cause any modified files to carry prominent notices stating that You changed the files; and You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions.
+Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+
+6. Trademarks.
+This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty.
+Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability.
+In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability.
+While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+©2020. Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
diff --git a/modules/react/table/index.ts b/modules/react/table/index.ts
index 6616a6b288..7610fbd92f 100644
--- a/modules/react/table/index.ts
+++ b/modules/react/table/index.ts
@@ -1,2 +1 @@
 export * from './lib/Table';
-export * from './lib/TableRow';
diff --git a/modules/react/table/lib/Table.tsx b/modules/react/table/lib/Table.tsx
index d147d6617b..68e6e23520 100644
--- a/modules/react/table/lib/Table.tsx
+++ b/modules/react/table/lib/Table.tsx
@@ -1,28 +1,240 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import {colors, type} from '@workday/canvas-kit-react/tokens';
-
-export const borderWidth = 1;
-export const borderColor = colors.soap400;
-export const cellBorder = `${borderWidth}px solid ${borderColor}`;
-
-const TableComponent = styled('table')(type.levels.subtext.large, {
-  width: '100%',
-  border: cellBorder,
-  borderSpacing: 0,
-  textAlign: 'left',
-  thead: {
-    borderSpacing: 0,
+import React from 'react';
+import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {TableHead} from './TableHead';
+import {TableBody} from './TableBody';
+import {TableRow} from './TableRow';
+import {TableHeader} from './TableHeader';
+import {TableCell} from './TableCell';
+import {TableFooter} from './TableFooter';
+import {TableCaption} from './TableCaption';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const tableStencil = createStencil({
+  base: {
+    ...system.type.subtext.large,
+    display: 'grid',
+    border: `${px2rem(1)} solid ${system.color.border.container}`,
+    borderRadius: system.shape.x2,
+    overflow: 'auto',
+    color: system.color.text.default,
   },
 });
 
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
- */
-export class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
-  public render() {
-    const {children, ...elemProps} = this.props;
+ * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
+ *
+ *
+ * ```tsx
+import {Table} from '@workday/canvas-kit-react/table';
 
-    return <TableComponent {...elemProps}>{children}</TableComponent>;
-  }
+export default function App() {
+  return (
+    <Table>
+      <Table.Caption>Table Caption</Table.Caption>
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Header>Table Header</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Header>Table Header</Table.Header>
+        </Table.Row>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Cell>Table Data Cell</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Cell>Table Data Cell</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+      <Table.Footer>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Cell>Table Data Cell</Table.Cell>
+        </Table.Row>
+      </Table.Footer>
+    </Table>
+  );
 }
+```
+ */
+export const Table = createComponent('table')({
+  displayName: 'Table',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, tableStencil())}>
+        {children}
+      </Element>
+    );
+  },
+  subComponents: {
+    /**
+     * `Table.Caption` renders a [caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) element.
+     *
+     *
+     * ```tsx
+      import {Table} from '@workday/canvas-kit-react/table';
+
+      export default function App() {
+        return (
+          <Table>
+            <Table.Caption>Table Caption</Table.Caption>
+            <Table.Body>
+              <Table.Row>
+                <Table.Header>Table Header</Table.Header>
+                <Table.Cell>Table Cell</Table.Cell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        );
+      }
+      ```
+    */
+    Caption: TableCaption,
+    /**
+    * `Table.Head` renders a [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Head>
+        </Table>
+      );
+    }
+    ```
+    */
+    Head: TableHead,
+    /**
+     * `Table.Body` renders a [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) element.
+     *
+     *
+     * ```tsx
+    import {Table} from '@workday/canvas-kit-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Body>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      );
+    }
+    ```
+    */
+    Body: TableBody,
+    /**
+     * `Table.Row` renders a [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) element.
+     *
+     * **Note**: `Table.Row` is built on [Grid](/docs/components-layout-grid--basic). It will look for
+     * how many children are there and if those children are valid React Elements. This will adjust the
+     * amount of columns automatically using the `gridTemplateColumns` style prop and the width of the
+     * columns is also set using a `minmax` function in the `gridTemplateColumns` style prop. If a user
+     * would like to adjust this, it can be overwritten on `Table.Row`. See the example below for how to
+     * overwrite `gridTemplateColumns`.
+     *
+     *
+     * ```tsx
+    import {Table} from '@workday/canvas-kit-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Head>
+            <Table.Row gridTemplateColumns="repeat(4, minmax(100px, 1fr))">
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Head>
+        </Table>
+      );
+    }
+    ```
+    */
+    Row: TableRow,
+    /**
+    * `Table.Header` renders a [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Head>
+        </Table>
+      );
+    }
+    ```
+    */
+    Header: TableHeader,
+    /**
+    * `Table.Cell` renders a [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Body>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      );
+    }
+    ```
+    */
+    Cell: TableCell,
+    /**
+    * `Table.Footer` renders a [tfoot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Footer>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Footer>
+        </Table>
+      );
+    }
+    ```
+    */
+    Footer: TableFooter,
+  },
+});
diff --git a/modules/react/table/lib/TableBody.tsx b/modules/react/table/lib/TableBody.tsx
new file mode 100644
index 0000000000..81925c4ba8
--- /dev/null
+++ b/modules/react/table/lib/TableBody.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil} from '@workday/canvas-kit-styling';
+
+const tableBodyStencil = createStencil({
+  base: {
+    display: 'grid',
+    'tr ': {
+      '&:last-of-type': {
+        'td, th': {
+          borderBottom: 'none',
+        },
+      },
+      '&:first-of-type': {
+        'td, th': {
+          borderTop: 'none',
+        },
+      },
+    },
+    'td ': {
+      '&:last-of-type': {
+        borderInlineEnd: 'none',
+      },
+      '&:first-of-type': {
+        borderInlineStart: 'none',
+      },
+    },
+  },
+});
+
+export const TableBody = createComponent('tbody')({
+  displayName: 'Table.Body',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, tableBodyStencil())}>
+        {children}
+      </Element>
+    );
+  },
+});
diff --git a/modules/react/table/lib/TableCaption.tsx b/modules/react/table/lib/TableCaption.tsx
new file mode 100644
index 0000000000..8fc9b6b2eb
--- /dev/null
+++ b/modules/react/table/lib/TableCaption.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const tableCaptionStencil = createStencil({
+  base: {
+    display: 'flex',
+    borderBottom: `${px2rem(1)} solid ${system.color.border.container}`,
+    padding: `${system.space.x2} ${system.space.x4}`,
+  },
+});
+
+export const TableCaption = createComponent('caption')({
+  displayName: 'Table.Caption',
+  Component: ({children, ...elemProps}: FlexProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, tableCaptionStencil())}>
+        {children}
+      </Element>
+    );
+  },
+});
diff --git a/modules/react/table/lib/TableCell.tsx b/modules/react/table/lib/TableCell.tsx
new file mode 100644
index 0000000000..113e5d177e
--- /dev/null
+++ b/modules/react/table/lib/TableCell.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const tableCellStencil = createStencil({
+  base: {
+    display: 'grid',
+    alignItems: 'center',
+    backgroundColor: system.color.bg.default,
+    borderBottom: `${px2rem(1)} solid ${system.color.border.divider}`,
+    gridTemplateColumns: '1fr',
+    justifyContent: 'start',
+    minHeight: '3.5rem',
+    padding: `${system.space.x2} ${system.space.x4}`,
+    wordBreak: 'break-word',
+  },
+});
+
+export const TableCell = createComponent('td')({
+  displayName: 'Table.Cell',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, tableCellStencil())}>
+        {children}
+      </Element>
+    );
+  },
+});
diff --git a/modules/react/table/lib/TableFooter.tsx b/modules/react/table/lib/TableFooter.tsx
new file mode 100644
index 0000000000..97d00e6e42
--- /dev/null
+++ b/modules/react/table/lib/TableFooter.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil} from '@workday/canvas-kit-styling';
+
+const tableFooterStencil = createStencil({
+  base: {
+    display: 'grid',
+  },
+});
+
+export const TableFooter = createComponent('tfoot')({
+  displayName: 'Table.Footer',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, tableFooterStencil())}>
+        {children}
+      </Element>
+    );
+  },
+});
diff --git a/modules/react/table/lib/TableHead.tsx b/modules/react/table/lib/TableHead.tsx
new file mode 100644
index 0000000000..9f4d553830
--- /dev/null
+++ b/modules/react/table/lib/TableHead.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {calc, createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const tableHeadStencil = createStencil({
+  base: {
+    display: 'grid',
+    backgroundColor: system.color.bg.alt.softer,
+    minHeight: calc.subtract(system.space.x16, system.space.x4),
+    'th ': {
+      '&:first-of-type': {
+        borderInlineStart: 'none',
+      },
+      '&:last-of-type': {
+        borderInlineEnd: 'none',
+      },
+    },
+  },
+});
+
+export const TableHead = createComponent('thead')({
+  displayName: 'Table.Head',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, tableHeadStencil())}>
+        {children}
+      </Element>
+    );
+  },
+});
diff --git a/modules/react/table/lib/TableHeader.tsx b/modules/react/table/lib/TableHeader.tsx
new file mode 100644
index 0000000000..b990aad4f7
--- /dev/null
+++ b/modules/react/table/lib/TableHeader.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const tableHeaderStencil = createStencil({
+  base: {
+    display: 'grid',
+    alignItems: 'center',
+    backgroundColor: system.color.bg.default,
+    borderBottom: `${px2rem(1)} solid ${system.color.border.divider}`,
+    justifyContent: 'start',
+    minHeight: calc.subtract(system.space.x16, system.space.x2),
+    padding: `${system.space.x2} ${system.space.x4}`,
+    wordBreak: 'break-word',
+    fontWeight: system.fontWeight.medium,
+  },
+});
+
+export const TableHeader = createComponent('th')({
+  displayName: 'Table.Header',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, tableHeaderStencil())}>
+        {children}
+      </Element>
+    );
+  },
+});
diff --git a/modules/react/table/lib/TableRow.tsx b/modules/react/table/lib/TableRow.tsx
index 81aeb1594e..69111f7c0e 100644
--- a/modules/react/table/lib/TableRow.tsx
+++ b/modules/react/table/lib/TableRow.tsx
@@ -1,220 +1,40 @@
-import * as React from 'react';
-import styled, {CSSObject} from '@emotion/styled';
-import {rgba} from 'polished';
-import {colors, space, statusColors} from '@workday/canvas-kit-react/tokens';
-import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
-import {borderColor, borderWidth, cellBorder} from './Table';
-
-/**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
- */
-export enum TableRowState {
-  Error,
-  Alert,
-  InputError,
-  InputAlert,
-  Hover,
-  Selected,
-}
-
-/**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
- */
-export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
-  /**
-   * The state of the TableRow. Accepts `Error`, `Alert`, `InputError`, `InputAlert`, `Hover`, or `Selected`.
-   */
-  state?: TableRowState;
-
-  /**
-   * If true, render the TableRow with header elements.
-   * @default false
-   */
-  header?: boolean;
-}
-
-const errorColor = statusColors.error;
-const errorColorLight = colors.cinnamon200;
-const alertColor = statusColors.warning;
-const alertColorLight = colors.cantaloupe200;
-
-function makeColoredRow(_bgColor: string, _borderColor: string): CSSObject {
-  return {
-    backgroundColor: _bgColor,
-    position: 'relative',
-
-    // Bottom border
-    '&:before, &:after': {
-      position: 'absolute',
-      left: 0,
-      top: -borderWidth,
-      content: '""',
-      width: `calc(100% + ${borderWidth}px)`,
-      height: borderWidth,
-      backgroundColor: _borderColor,
-    },
-
-    '&:after': {
-      top: 'auto',
-      bottom: -borderWidth,
-    },
-
-    '&:first-of-type': {
-      boxShadow: `inset ${borderWidth}px 0 0 ${_borderColor}`,
-    },
-
-    '&:last-child': {
-      boxShadow: `inset -${borderWidth}px 0 0 ${_borderColor}`,
-      '&:before, &:after': {
-        width: '100%',
-      },
-    },
-  };
-}
-
-function makeColoredRowStyle(_bgColor: string, _borderColor: string): CSSObject {
-  const lightenedBg = rgba(_bgColor, 0.2);
-  return {
-    'th, td': [
-      makeColoredRow(lightenedBg, _bgColor),
-      {
-        borderLeftColor: _borderColor,
-        borderRightColor: _borderColor,
-      },
-    ],
-    '&:hover': {
-      'th, td': {
-        backgroundColor: lightenedBg,
-      },
-    },
-  };
-}
-
-function makeBorderlessStyle(_bgColor: string): CSSObject {
-  return {
-    'th, td': {
-      backgroundColor: rgba(_bgColor, 0.2),
-    },
-  };
-}
-
-const StyledTableRow = styled('tr')<TableRowProps>(
-  {
-    'th, td': {
-      backgroundColor: colors.frenchVanilla100,
-      padding: `${space.xs} ${space.xxs}`,
-      fontSize: 13,
-      borderRight: cellBorder,
-      borderBottom: cellBorder,
-      height: `calc(${space.xl} + ${space.xxs})`,
-      boxSizing: 'border-box',
-      transition: 'background-color 0.2s',
-    },
-    td: {
-      '&:last-child': {
-        borderRight: 'none',
-      },
-    },
-    th: {
-      height: space.xxl,
-      '&:last-child': {
-        borderRight: 'none',
-      },
-    },
-    '&:last-child': {
-      'th, td': {
-        borderBottom: 'none',
-      },
-    },
+import React from 'react';
+import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, createVars} from '@workday/canvas-kit-styling';
+
+const childrenVars = createVars('cellNumber');
+
+// Styles for rows including dynamic sizing for amount of cells within a row
+const tableRowStencil = createStencil({
+  base: {
+    display: 'grid',
+    gridAutoFlow: 'column',
+    gridTemplateColumns: `repeat(${childrenVars.cellNumber}, minmax(10rem, 1fr))`,
   },
-  ({header}) =>
-    header && {
-      '&:last-child': {
-        'th, td': {
-          borderBottom: '1px solid transparent',
-        },
-      },
-      'th, td': {
-        position: 'relative',
-        backgroundColor: colors.frenchVanilla100,
-        verticalAlign: 'middle', // Bottom border
-        '&:after': {
-          position: 'absolute',
-          left: 0,
-          bottom: -borderWidth,
-          content: '""',
-          width: `calc(100% + ${borderWidth}px)`,
-          height: borderWidth,
-          backgroundColor: borderColor,
-        },
-        '&:last-child': {
-          '&:after': {
-            width: '100%',
-          },
-        },
-      },
-    },
-  ({state}) => {
-    switch (state) {
-      case TableRowState.InputError:
-        return makeBorderlessStyle(errorColor);
-      case TableRowState.Error:
-        return makeColoredRowStyle(errorColor, errorColorLight);
-      case TableRowState.InputAlert:
-        return makeBorderlessStyle(alertColor);
-      case TableRowState.Alert:
-        return makeColoredRowStyle(alertColor, alertColorLight);
-      case TableRowState.Selected:
-        return {
-          'th, td': [
-            makeColoredRow(colors.blueberry100, colors.blueberry500),
-            {
-              '&:after': {
-                zIndex: 2,
-              },
-            },
-          ],
-        };
-      default:
-        return {
-          '&:hover': {
-            'th, td': {
-              backgroundColor: colors.soap300,
-            },
-          },
-          '&:focus': {
-            outline: 'none',
-            'th, td': [
-              makeColoredRow(colors.blueberry100, colors.blueberry500),
-              {
-                '&:after': {
-                  zIndex: 2,
-                },
-              },
-            ],
-          },
-        };
-    }
-  }
-);
+});
 
-/**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
- */
 export const TableRow = createComponent('tr')({
-  displayName: 'TableRow',
-  Component: (
-    {state, header, children, ...elemProps}: TableRowProps & StyledType,
-    ref,
-    Element
-  ) => {
+  displayName: 'Table.Row',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    // This calculates the amount of valid React children cells within the row and will update the gridTemplateColumns style property with that amount of cells within the row
+    const validChildren = (children: React.ReactNode) => {
+      return React.Children.toArray(children).filter(child =>
+        React.isValidElement(child)
+      ) as React.ReactElement[];
+    };
+    /**
+     * This is the calculated amount of valid React children
+     */
+    const childrenArray = validChildren(children).length;
+
     return (
-      <StyledTableRow as={Element} ref={ref} state={state} header={header} {...elemProps}>
+      <Element
+        ref={ref}
+        {...mergeStyles(elemProps, [tableRowStencil(), {[childrenVars.cellNumber]: childrenArray}])}
+      >
         {children}
-      </StyledTableRow>
+      </Element>
     );
   },
-  subComponents: {
-    State: TableRowState,
-  },
 });
diff --git a/modules/preview-react/table/spec/SSR.spec.tsx b/modules/react/table/spec/SSR.spec.tsx
similarity index 100%
rename from modules/preview-react/table/spec/SSR.spec.tsx
rename to modules/react/table/spec/SSR.spec.tsx
diff --git a/modules/react/table/spec/Table.spec.tsx b/modules/react/table/spec/Table.spec.tsx
deleted file mode 100644
index e91a056deb..0000000000
--- a/modules/react/table/spec/Table.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import {screen, render} from '@testing-library/react';
-
-import {Table} from '../lib/Table';
-
-describe('Table', () => {
-  it('should apply a custom class', () => {
-    const customClassName = 'custom-class-name';
-    const testProps = {
-      className: customClassName,
-    };
-    render(<Table {...testProps} />);
-
-    expect(screen.getByRole('table')).toHaveClass(customClassName);
-  });
-
-  it('should spread extra props', () => {
-    render(<Table data-propspread="test" />);
-
-    expect(screen.getByRole('table')).toHaveAttribute('data-propspread', 'test');
-  });
-});
diff --git a/modules/react/table/spec/TableRow.spec.tsx b/modules/react/table/spec/TableRow.spec.tsx
deleted file mode 100644
index 8a70fb8b40..0000000000
--- a/modules/react/table/spec/TableRow.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import {screen, render} from '@testing-library/react';
-
-import {TableRow} from '../lib/TableRow';
-
-describe('TableRow', () => {
-  it('should apply a custom class', () => {
-    const customClassName = 'custom-class-name';
-    const testProps = {
-      className: customClassName,
-    };
-    render(<TableRow {...testProps} />);
-
-    expect(screen.getByRole('row')).toHaveClass(customClassName);
-  });
-
-  it('should spread extra props', () => {
-    render(<TableRow data-propspread="test" />);
-
-    expect(screen.getByRole('row')).toHaveAttribute('data-propspread', 'test');
-  });
-});
diff --git a/modules/react/table/stories/Table.stories.mdx b/modules/react/table/stories/Table.stories.mdx
index 5ead106318..6d9dff0f9b 100644
--- a/modules/react/table/stories/Table.stories.mdx
+++ b/modules/react/table/stories/Table.stories.mdx
@@ -1,18 +1,19 @@
 import {SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {Table, TableRow} from '@workday/canvas-kit-react/table';
-
+import {Table} from '@workday/canvas-kit-react/table';
+// Examples
 import {Basic} from './examples/Basic';
-import {RowHeader} from './examples/RowHeader';
-import {RowStates} from './examples/RowStates';
+import {BasicWithHeading} from './examples/BasicWithHeading';
+import {FixedColumn} from './examples/FixedColumn';
+import {RightToLeft} from './examples/RightToLeft';
 
 <Meta title="Components/Containers/Table" component={Table} />
 
 # Canvas Kit Table
 
-Tables are an efficient way of displaying sets of repeating data with the same structure.
-
-[> Workday Design Reference](https://design.workday.com/components/containers/tables)
+`Table` is a simple styled compound component that renders a
+[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to
+present information in a two-dimensional table comprised of rows and columns of cells containing
+data.
 
 ## Installation
 
@@ -24,76 +25,49 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Table includes a container `Table` component and a `TableRow` component. `Table` is a simple wrapper
-of the `<table>` element with Canvas styles. `TableRow` wraps `<tr>` and supports additional props
-to customize the style of the row.
+Users may not want to use a `caption` so they can import [Heading](/components/text/heading/) or
+[Text](/components/text/text/) instead. This will give the user more flexibility around the
+customization of the title/heading of their table.
 
-Use `Table` and `TableRow` in conjunction with the standard `<thead>` and `<tbody>` elements to
-create your Table.
+<ExampleCodeBlock code={BasicWithHeading} />
 
-<ExampleCodeBlock code={Basic} />
+### Right to Left
 
-## Component API
+Table supports right-to-left languages when specified in the CanvasProvider theme.
 
-### Table
-
-`Table` is a simple wrapper of the `<table>` element with Canvas styles. Use it as you would a
-standard `<table>` element.
-
-```tsx
-<Table>
-  <thead>
-    <TableRow header={true}>
-      <th>ID</th>
-      <th>Name</th>
-      ...
-    </TableRow>
-  </thead>
-  <tbody>
-    <TableRow>
-      <td>1</td>
-      <td>Aidan Brown</td>
-      ...
-    </TableRow>
-    ...
-  </tbody>
-</Table>
-```
+<ExampleCodeBlock code={RightToLeft} />
+
+### Example with Caption
 
-#### Props
+Users are free to use a `caption` instead of a heading. A `caption` is not required but it is good
+for
+[accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#accessibility_concerns)
+purposes.
 
-`Table` does not have any documented props. Undocumented props are spread to its underlying
-`<table>` element.
+<ExampleCodeBlock code={Basic} />
 
-### TableRow
+### Fixed Column
 
-`TableRow` wraps `<tr>` and supports additional props to customize the style of the row. Use it as
-you would a standard `<tr>` element.
+Users may add styles to the `Table.Header` to render a fixed column. The example below assigns a
+`width` to the `Table` to guarantee the fixed column is triggered, but you are free to omit the
+`width` if you would only like the fixed column to be triggered if necessary.
 
-Set the `header` prop of the `TableRow` to designate whether or not it contains header elements.
+<ExampleCodeBlock code={FixedColumn} />
 
-<ExampleCodeBlock code={RowHeader} />
+### Advanced
 
-Set the `state` prop of the `TableRow` to display it using one of several different visual states.
-`state` accepts the following values:
+You can also find several advanced Table examples in our Storybook Examples section.
 
-- `TableRow.State.Selected`
-- `TableRow.State.Alert`
-- `TableRow.State.InputAlert`
-- `TableRow.State.Error`
-- `TableRow.State.InputError`
+- [Expandable Rows](/docs/examples-tables-advanced--expandable-rows)
+- [Selectable Rows ](/docs/examples-tables-advanced--selectable-rows)
+- [Sortable Column Headers](/docs/examples-tables-advanced--sortable-column-headers)
 
-| State                       | Purpose                                                                |
-| --------------------------- | ---------------------------------------------------------------------- |
-| `TableRow.State.Alert`      | When there is an issue with the entire row as a whole.                 |
-| `TableRow.State.InputAlert` | When there are issues with one or more (but not all) cells in the row. |
-| `TableRow.State.Error`      | When there is an error with the entire row as a whole.                 |
-| `TableRow.State.InputError` | When there are errors with one or more (but not all) cells in the row. |
-| `TableRow.State.Selected`   | Indicates the selected row to the user.                                |
+### Custom Styles
 
-<ExampleCodeBlock code={RowStates} />
+Table and its subcomponents support custom styling via the `cs` prop. For more information, check
+our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
 
-`InputAlert` and `InputError` are identical to the `Alert` and `Error` states, respectively, except
-they lack a darkened border around the row.
+## Component API
 
-<SymbolDoc name="TableRow" fileName="/react/" />
+<SymbolDoc name="Table" fileName="/react/" />
diff --git a/modules/react/table/stories/examples/Basic.tsx b/modules/react/table/stories/examples/Basic.tsx
index f049a9e077..c2344a6a4a 100644
--- a/modules/react/table/stories/examples/Basic.tsx
+++ b/modules/react/table/stories/examples/Basic.tsx
@@ -1,35 +1,46 @@
 import React from 'react';
-import {Table, TableRow} from '@workday/canvas-kit-react/table';
 
-const columns = ['ID', 'Name', 'Position', 'Location'];
+import {Table} from '@workday/canvas-kit-react/table';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const rows = [
-  [1, 'Aidan Brown', 'Product Manager', 'San Francisco, CA'],
-  [2, 'Betty Chen', 'Product Designer', 'San Francisco, CA'],
-  [3, 'Helen Gonzalez', 'Application Developer', 'Portland, OR'],
-  [4, 'Timothy May', 'VP, Product Development', 'San Francisco, CA'],
-  [5, 'John Hours', 'Product Manager', 'New York, New York'],
-];
+const tableHeaderStyles = createStyles({
+  backgroundColor: system.color.bg.alt.softer,
+});
 
 export const Basic = () => {
   return (
     <Table>
-      <thead>
-        <TableRow header={true}>
-          {columns.map((col, i) => (
-            <th key={i}>{col}</th>
-          ))}
-        </TableRow>
-      </thead>
-      <tbody>
-        {rows.map((row, i) => (
-          <TableRow key={i}>
-            {row.map((cell, j) => (
-              <td key={j}>{cell}</td>
-            ))}
-          </TableRow>
-        ))}
-      </tbody>
+      <Table.Caption>Coffee Drinks and Sizes</Table.Caption>
+      <Table.Head>
+        <Table.Row>
+          <Table.Header scope="col" cs={tableHeaderStyles}>
+            Drink
+          </Table.Header>
+          <Table.Header scope="col" cs={tableHeaderStyles}>
+            Size
+          </Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>Espresso</Table.Cell>
+          <Table.Cell>1 oz</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Macchiato</Table.Cell>
+          <Table.Cell>2 oz Espresso</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Cortado</Table.Cell>
+          <Table.Cell>2 oz Espresso, 1 oz Foamed Milk</Table.Cell>
+        </Table.Row>
+        <Table.Row></Table.Row>
+        <Table.Row>
+          <Table.Cell>Cappuccino</Table.Cell>
+          <Table.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</Table.Cell>
+        </Table.Row>
+      </Table.Body>
     </Table>
   );
 };
diff --git a/modules/preview-react/table/stories/examples/BasicWithHeading.tsx b/modules/react/table/stories/examples/BasicWithHeading.tsx
similarity index 55%
rename from modules/preview-react/table/stories/examples/BasicWithHeading.tsx
rename to modules/react/table/stories/examples/BasicWithHeading.tsx
index fb6a7a7e9b..c396bbcf5a 100644
--- a/modules/preview-react/table/stories/examples/BasicWithHeading.tsx
+++ b/modules/react/table/stories/examples/BasicWithHeading.tsx
@@ -1,22 +1,37 @@
 import React from 'react';
 
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  parentContainerStyles: createStyles({
+    marginBottom: system.space.x4,
+  }),
+  tableHeaderStyles: createStyles({
+    backgroundColor: system.color.bg.alt.softer,
+  }),
+};
 
 export const BasicWithHeading = () => {
   const headingID = useUniqueId();
-  
+
   return (
     <>
-      <Heading as="h3" id={headingID} size="small" marginBottom="s">
+      <Heading as="h3" id={headingID} size="small" cs={styleOverrides.parentContainerStyles}>
         Pizza Toppings
       </Heading>
       <Table aria-labelledby={headingID}>
         <Table.Head>
           <Table.Row>
-            <Table.Header scope="col" backgroundColor="soap100">Toppings</Table.Header>
-            <Table.Header scope="col" backgroundColor="soap100">Amount</Table.Header>
+            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
+              Toppings
+            </Table.Header>
+            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
+              Amount
+            </Table.Header>
           </Table.Row>
         </Table.Head>
         <Table.Body>
diff --git a/modules/preview-react/table/stories/examples/FixedColumn.tsx b/modules/react/table/stories/examples/FixedColumn.tsx
similarity index 67%
rename from modules/preview-react/table/stories/examples/FixedColumn.tsx
rename to modules/react/table/stories/examples/FixedColumn.tsx
index 495cfa8b3f..ab8706e0bc 100644
--- a/modules/preview-react/table/stories/examples/FixedColumn.tsx
+++ b/modules/react/table/stories/examples/FixedColumn.tsx
@@ -1,15 +1,31 @@
 import React from 'react';
 
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
-import {colors} from '@workday/canvas-kit-react/tokens';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  parentContainerStyles: createStyles({
+    marginBottom: system.space.x4,
+  }),
+  tableStyles: createStyles({
+    width: px2rem(690),
+  }),
+  tableHeaderStyles: createStyles({
+    position: 'sticky',
+    left: system.space.zero,
+    backgroundColor: system.color.bg.alt.softer,
+    borderRight: `2px solid ${system.color.border.divider}`,
+  }),
+};
 
 export const FixedColumn = () => {
   const headingID = useUniqueId();
   const exampleData = [
     {
-      brand: 'Porsche',
+      make: 'Porsche',
       model: '992 911 GT3',
       year: '2022',
       price: 'Starts at $160,000',
@@ -20,7 +36,7 @@ export const FixedColumn = () => {
       curbWeight: '3,164 lbs',
     },
     {
-      brand: 'BMW',
+      make: 'BMW',
       model: 'M5 Competition',
       year: '2018',
       price: 'Starts at $105,000',
@@ -31,18 +47,18 @@ export const FixedColumn = () => {
       curbWeight: '4,345 lbs',
     },
     {
-      brand: 'Audi',
-      model: 'R8',
-      year: '2022',
-      price: 'Starts at $148,000',
-      engine: '5.2L V10',
-      transmission: 'Automatic',
-      horsepower: '562hp',
-      torque: '408 lb-ft',
-      curbWeight: '3,594 lbs',
+      make: 'Alfa Romeo',
+      model: '1750 GTV',
+      year: '1970',
+      price: '$30,000 - $55,000',
+      engine: '1.75L Inline 4',
+      transmission: 'Manual',
+      horsepower: '122hp',
+      torque: '137 lb-ft',
+      curbWeight: '2,140 lbs',
     },
     {
-      brand: 'Lotus',
+      make: 'Lotus',
       model: 'Emira',
       year: '2023',
       price: 'Starts at $78,000',
@@ -53,7 +69,7 @@ export const FixedColumn = () => {
       curbWeight: '3520 lbs',
     },
     {
-      brand: 'Toyota',
+      make: 'Toyota',
       model: 'Supra',
       year: '1998',
       price: '$40,000 - $80,000',
@@ -64,7 +80,7 @@ export const FixedColumn = () => {
       curbWeight: '3,599 lbs',
     },
     {
-      brand: 'Nissan',
+      make: 'Nissan',
       model: 'Skyline GT-R',
       year: '1994',
       price: '$45,000 - $90,000',
@@ -77,20 +93,14 @@ export const FixedColumn = () => {
   ];
   return (
     <>
-      <Heading as="h3" id={headingID} size="small" marginBottom="s">
+      <Heading as="h3" id={headingID} size="small" cs={styleOverrides.parentContainerStyles}>
         Performance Car Specs
       </Heading>
-      <Table width={690} aria-labelledby={headingID} tabIndex={0}>
+      <Table cs={styleOverrides.tableStyles} aria-labelledby={headingID} tabIndex={0}>
         <Table.Head>
           <Table.Row>
-            <Table.Header
-              scope="col"
-              position="sticky"
-              left="0"
-              backgroundColor="soap100"
-              borderRight={`2px solid ${colors.soap400}`}
-            >
-              Brand
+            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
+              Make
             </Table.Header>
             <Table.Header scope="col">Model</Table.Header>
             <Table.Header scope="col">Year</Table.Header>
@@ -99,21 +109,15 @@ export const FixedColumn = () => {
             <Table.Header scope="col">Transmission</Table.Header>
             <Table.Header scope="col">Horsepower</Table.Header>
             <Table.Header scope="col">Torque</Table.Header>
-            <Table.Header scope="col">Tires</Table.Header>
+            <Table.Header scope="col">Curb Weight</Table.Header>
           </Table.Row>
         </Table.Head>
         <Table.Body>
           {exampleData.map(item => (
             <>
               <Table.Row>
-                <Table.Header
-                  scope="row"
-                  position="sticky"
-                  left="0"
-                  backgroundColor="soap100"
-                  borderRight={`2px solid ${colors.soap400}`}
-                >
-                  {item.brand}
+                <Table.Header scope="row" cs={styleOverrides.tableHeaderStyles}>
+                  {item.make}
                 </Table.Header>
                 <Table.Cell>{item.model}</Table.Cell>
                 <Table.Cell>{item.year}</Table.Cell>
diff --git a/modules/preview-react/table/stories/examples/RightToLeft.tsx b/modules/react/table/stories/examples/RightToLeft.tsx
similarity index 73%
rename from modules/preview-react/table/stories/examples/RightToLeft.tsx
rename to modules/react/table/stories/examples/RightToLeft.tsx
index 43708c3458..19cca47775 100644
--- a/modules/preview-react/table/stories/examples/RightToLeft.tsx
+++ b/modules/react/table/stories/examples/RightToLeft.tsx
@@ -1,7 +1,13 @@
 import React from 'react';
 
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const tableHeaderStyles = createStyles({
+  backgroundColor: system.color.bg.alt.softer,
+});
 
 export const RightToLeft = () => {
   return (
@@ -10,10 +16,10 @@ export const RightToLeft = () => {
         <Table.Caption>משקאות קפה וגדלים</Table.Caption>
         <Table.Head>
           <Table.Row>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={tableHeaderStyles}>
               מַשׁקֶה
             </Table.Header>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={tableHeaderStyles}>
               גודל
             </Table.Header>
           </Table.Row>
diff --git a/modules/react/table/stories/examples/RowHeader.tsx b/modules/react/table/stories/examples/RowHeader.tsx
deleted file mode 100644
index 9545317e1b..0000000000
--- a/modules/react/table/stories/examples/RowHeader.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import {Table, TableRow} from '@workday/canvas-kit-react/table';
-
-export const RowHeader = () => {
-  return (
-    <Table>
-      <thead>
-        <TableRow header={true}>
-          <th>ID</th>
-          <th>Name</th>
-          <th>Position</th>
-          <th>Location</th>
-        </TableRow>
-      </thead>
-      <tbody>
-        <TableRow>
-          <td>1</td>
-          <td>Aidan Brown</td>
-          <td>Product Manager</td>
-          <td>San Francisco, CA</td>
-        </TableRow>
-      </tbody>
-    </Table>
-  );
-};
diff --git a/modules/react/table/stories/examples/RowStates.tsx b/modules/react/table/stories/examples/RowStates.tsx
deleted file mode 100644
index d74f9ec4e6..0000000000
--- a/modules/react/table/stories/examples/RowStates.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import {Table, TableRow} from '@workday/canvas-kit-react/table';
-
-const columns = ['ID', 'Name', 'Position', 'Location'];
-
-const rows = [
-  {
-    data: [1, 'Aidan Brown', 'Product Manager', 'San Francisco, CA'],
-    state: undefined,
-  },
-  {
-    data: [2, 'Betty Chen', 'Product Designer', 'San Francisco, CA'],
-    state: TableRow.State.Selected,
-  },
-  {
-    data: [3, 'Helen Gonzalez', 'Application Developer', 'Portland, OR'],
-    state: TableRow.State.Alert,
-  },
-  {
-    data: [4, 'Timothy May', 'VP, Product Development', 'San Francisco, CA'],
-    state: TableRow.State.InputAlert,
-  },
-  {
-    data: [5, 'John Hours', 'Product Manager', 'New York, New York'],
-    state: TableRow.State.Error,
-  },
-  {
-    data: [6, 'Leslie Lang', 'Software Architect', 'New York, New York'],
-    state: TableRow.State.InputError,
-  },
-];
-
-export const RowStates = () => {
-  return (
-    <Table>
-      <thead>
-        <TableRow header={true}>
-          {columns.map((col, i) => (
-            <th key={i}>{col}</th>
-          ))}
-        </TableRow>
-      </thead>
-      <tbody>
-        {rows.map((row, i) => (
-          <TableRow key={i} state={row.state}>
-            {row.data.map((cell, j) => (
-              <td key={j}>{cell}</td>
-            ))}
-          </TableRow>
-        ))}
-      </tbody>
-    </Table>
-  );
-};
diff --git a/modules/react/table/stories/stories_visualTesting.tsx b/modules/react/table/stories/stories_visualTesting.tsx
new file mode 100644
index 0000000000..f3dea662cb
--- /dev/null
+++ b/modules/react/table/stories/stories_visualTesting.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+
+import {StaticStates} from '@workday/canvas-kit-react/testing';
+
+import {withSnapshotsEnabled} from '../../../../utils/storybook';
+
+// unreleased path
+import {Table} from '@workday/canvas-kit-react/table';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Heading} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+
+export default {
+  title: 'Testing/Containers/Table',
+  component: Table,
+};
+
+const Standard = () => (
+  <Table>
+    <Table.Caption>Table Caption</Table.Caption>
+    <Table.Head>
+      <Table.Row>
+        <Table.Header>Table Header</Table.Header>
+        <Table.Header>Table Header</Table.Header>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+      <Table.Row>
+        <Table.Header>Table Header</Table.Header>
+        <Table.Header>Table Header</Table.Header>
+      </Table.Row>
+      <Table.Row>
+        <Table.Header>Table Header</Table.Header>
+        <Table.Cell>Table Data Cell</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Header>Table Header</Table.Header>
+        <Table.Cell>Table Data Cell</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+    <Table.Footer>
+      <Table.Row>
+        <Table.Header>Table Header</Table.Header>
+        <Table.Cell>Table Data Cell</Table.Cell>
+      </Table.Row>
+    </Table.Footer>
+  </Table>
+);
+
+const exampleData = [
+  {
+    header: 'Example Header',
+    cell: 'Example Cell',
+  },
+  {
+    header: 'Example Header',
+    cell: 'Example Cell',
+  },
+  {
+    header: 'Example Header',
+    cell: 'Example Cell',
+  },
+  {
+    header: 'Example Header',
+    cell: 'Example Cell',
+  },
+];
+
+const tableHeaderStencil = createStencil({
+  base: {
+    backgroundColor: system.color.bg.alt.softer,
+    borderRight: `${px2rem(1)} solid ${system.color.border.divider}`,
+  },
+  modifiers: {
+    variant: {
+      sticky: {
+        position: 'sticky',
+        left: system.space.zero,
+        zIndex: 2,
+      },
+    },
+  },
+});
+
+const FixedColumn = () => (
+  <>
+    <Heading size="small">Table Heading</Heading>
+    <Table>
+      <Table.Head>
+        <Table.Row>
+          <Table.Header {...tableHeaderStencil({variant: 'sticky'})}>Header</Table.Header>
+          {Array.from({length: 7}).map((_, i) => (
+            <Table.Header key={i} {...tableHeaderStencil()}>
+              Header
+            </Table.Header>
+          ))}
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {exampleData.map(item => (
+          <>
+            <Table.Row>
+              <Table.Header {...tableHeaderStencil({variant: 'sticky'})}>
+                {item.header}
+              </Table.Header>
+              {Array.from({length: 7}).map((_, i) => (
+                <Table.Cell key={i} {...tableHeaderStencil()}>
+                  {item.cell}
+                </Table.Cell>
+              ))}
+            </Table.Row>
+          </>
+        ))}
+      </Table.Body>
+    </Table>
+  </>
+);
+
+export const TableStates = withSnapshotsEnabled(() => {
+  return (
+    <StaticStates>
+      <Flex gap="xs" flexDirection="column">
+        <div>
+          <h3>Standard</h3>
+          <Standard />
+        </div>
+        <div>
+          <h3>Fixed Column with Heading</h3>
+          <FixedColumn />
+        </div>
+      </Flex>
+    </StaticStates>
+  );
+});
diff --git a/modules/react/tabs/lib/TabsItem.tsx b/modules/react/tabs/lib/TabsItem.tsx
index f0c0e93519..0e48e9d26c 100644
--- a/modules/react/tabs/lib/TabsItem.tsx
+++ b/modules/react/tabs/lib/TabsItem.tsx
@@ -17,7 +17,7 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {Box, FlexProps} from '@workday/canvas-kit-react/layout';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {
   useListItemRegister,
   useListItemRovingFocus,
@@ -104,9 +104,8 @@ export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItem
     '&:hover, &:focus': {
       backgroundColor: colors.soap200,
       color: colors.blackPepper400,
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: iconColors.hover,
-      },
+
+      [systemIconStencil.vars.color]: iconColors.hover,
     },
 
     '&:focus': {
@@ -116,24 +115,18 @@ export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItem
 
     '&:disabled, &[aria-disabled]': {
       color: colors.licorice100,
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: iconColors.disabled,
-      },
+      [systemIconStencil.vars.color]: iconColors.disabled,
       '&:hover': {
         cursor: 'auto',
         backgroundColor: `transparent`,
-        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-          fill: iconColors.disabled,
-        },
+        [systemIconStencil.vars.color]: iconColors.disabled,
       },
     },
 
     '&[aria-selected=true]': {
       color: theme.canvas.palette.primary.main,
       cursor: 'default',
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: theme.canvas.palette.primary.main,
-      },
+      [systemIconStencil.vars.color]: theme.canvas.palette.primary.main,
       '&:after': {
         position: 'absolute',
         height: space.xxxs,
diff --git a/modules/react/tabs/lib/TabsList.tsx b/modules/react/tabs/lib/TabsList.tsx
index 8d56966fbf..d2b96898c4 100644
--- a/modules/react/tabs/lib/TabsList.tsx
+++ b/modules/react/tabs/lib/TabsList.tsx
@@ -9,6 +9,7 @@ import {
   useModalityType,
   styled,
   StyledType,
+  filterOutProps,
 } from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {
@@ -45,7 +46,9 @@ export const useTabsList = composeHooks(
   useListResetCursorOnBlur
 );
 
-const StyledStack = styled(Flex)<StyledType & {maskImage?: string}>(({maskImage}) => ({
+const StyledStack = styled(Flex, {
+  shouldForwardProp: filterOutProps(['maskImage']),
+})<StyledType & {maskImage?: string}>(({maskImage}) => ({
   maskImage: maskImage,
 }));
 
@@ -84,7 +87,7 @@ export const useTouchDirection = () => {
 
   React.useEffect(() => {
     let prevXPos = window.pageXOffset;
-    const handleTouchMove = function(e: TouchEvent) {
+    const handleTouchMove = function (e: TouchEvent) {
       const currXPos = e.touches[0].clientX;
       setIsDragging(true);
       if (currXPos > prevXPos) {
@@ -95,7 +98,7 @@ export const useTouchDirection = () => {
       prevXPos = currXPos;
       e.preventDefault();
     };
-    const handleDragEnd = function() {
+    const handleDragEnd = function () {
       setIsDragging(false);
     };
     window.addEventListener('touchmove', handleTouchMove);
diff --git a/modules/react/text-area/stories/TextArea.stories.mdx b/modules/react/text-area/stories/TextArea.stories.mdx
index 382e2de5f2..3804f46599 100644
--- a/modules/react/text-area/stories/TextArea.stories.mdx
+++ b/modules/react/text-area/stories/TextArea.stories.mdx
@@ -1,4 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
@@ -29,6 +29,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 Text Area should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
@@ -70,20 +82,15 @@ accepts the following values:
 
 ### Grow
 
-Set the `grow` prop of the wrapping Form Field to `true` to configure the Text Area to expand to the
-width of its container.
+Set the `grow` prop of the Text Area to `true` to configure the Text Area to expand to the width of
+its container.
 
 <ExampleCodeBlock code={Grow} />
 
-The `grow` prop may also be applied directly to the Text Area if Form Field is not being used.
-
-### Label Position
-
-Set the `labelPosition` prop of the wrapping Form Field to designate the position of the label
-relative to the Text Area. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`.
 
 <ExampleCodeBlock code={LabelPosition} />
 
diff --git a/modules/react/text-area/stories/examples/Alert.tsx b/modules/react/text-area/stories/examples/Alert.tsx
index 9570bfc7c1..20d337a3c2 100644
--- a/modules/react/text-area/stories/examples/Alert.tsx
+++ b/modules/react/text-area/stories/examples/Alert.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export const Alert = () => {
@@ -10,13 +10,10 @@ export const Alert = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="Please enter your review."
-      label="Leave a Review"
-    >
-      <TextArea onChange={handleChange} value={value} />
+    <FormField error="alert">
+      <FormField.Label>Please enter your review.</FormField.Label>
+      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+      <FormField.Hint>Please enter your review.</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/react/text-area/stories/examples/Basic.tsx b/modules/react/text-area/stories/examples/Basic.tsx
index fd238330d6..9b063e8af1 100644
--- a/modules/react/text-area/stories/examples/Basic.tsx
+++ b/modules/react/text-area/stories/examples/Basic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export const Basic = () => {
@@ -10,8 +10,9 @@ export const Basic = () => {
   };
 
   return (
-    <FormField label="Leave a Review">
-      <TextArea onChange={handleChange} value={value} />
+    <FormField>
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/text-area/stories/examples/Disabled.tsx b/modules/react/text-area/stories/examples/Disabled.tsx
index 4a227d07c7..5bffb0cde5 100644
--- a/modules/react/text-area/stories/examples/Disabled.tsx
+++ b/modules/react/text-area/stories/examples/Disabled.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export const Disabled = () => {
@@ -10,8 +10,9 @@ export const Disabled = () => {
   };
 
   return (
-    <FormField label="Leave a Review">
-      <TextArea disabled onChange={handleChange} value={value} />
+    <FormField>
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input as={TextArea} disabled onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/text-area/stories/examples/Error.tsx b/modules/react/text-area/stories/examples/Error.tsx
index c9a9ee3c9e..72da7becbd 100644
--- a/modules/react/text-area/stories/examples/Error.tsx
+++ b/modules/react/text-area/stories/examples/Error.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export const Error = () => {
@@ -10,13 +10,10 @@ export const Error = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Error}
-      hintId="hint-error"
-      hintText="Please enter your review."
-      label="Leave a Review"
-    >
-      <TextArea onChange={handleChange} value={value} />
+    <FormField error="error">
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+      <FormField.Hint>Please enter your review.</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/react/text-area/stories/examples/Grow.tsx b/modules/react/text-area/stories/examples/Grow.tsx
index f439498e16..d07fd0df30 100644
--- a/modules/react/text-area/stories/examples/Grow.tsx
+++ b/modules/react/text-area/stories/examples/Grow.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export const Grow = () => {
@@ -10,8 +10,9 @@ export const Grow = () => {
   };
 
   return (
-    <FormField grow={true} label="Leave a Review">
-      <TextArea onChange={handleChange} value={value} />
+    <FormField>
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input as={TextArea} grow onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/text-area/stories/examples/LabelPosition.tsx b/modules/react/text-area/stories/examples/LabelPosition.tsx
index 2eb488e182..081d9f557a 100644
--- a/modules/react/text-area/stories/examples/LabelPosition.tsx
+++ b/modules/react/text-area/stories/examples/LabelPosition.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export const LabelPosition = () => {
@@ -10,8 +10,9 @@ export const LabelPosition = () => {
   };
 
   return (
-    <FormField label="Leave a Review" labelPosition={FormField.LabelPosition.Left}>
-      <TextArea onChange={handleChange} value={value} />
+    <FormField orientation="horizontal">
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/text-area/stories/examples/Placeholder.tsx b/modules/react/text-area/stories/examples/Placeholder.tsx
index 4adc4e4a50..5d212b1a04 100644
--- a/modules/react/text-area/stories/examples/Placeholder.tsx
+++ b/modules/react/text-area/stories/examples/Placeholder.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export const Placeholder = () => {
@@ -10,8 +10,14 @@ export const Placeholder = () => {
   };
 
   return (
-    <FormField label="Leave a Review">
-      <TextArea onChange={handleChange} placeholder="Let us know how we did!" value={value} />
+    <FormField>
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input
+        as={TextArea}
+        onChange={handleChange}
+        placeholder="Let us know how we did!"
+        value={value}
+      />
     </FormField>
   );
 };
diff --git a/modules/react/text-area/stories/examples/RefForwarding.tsx b/modules/react/text-area/stories/examples/RefForwarding.tsx
index aafa108a89..fe6a56571d 100644
--- a/modules/react/text-area/stories/examples/RefForwarding.tsx
+++ b/modules/react/text-area/stories/examples/RefForwarding.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export const RefForwarding = () => {
@@ -17,8 +17,9 @@ export const RefForwarding = () => {
 
   return (
     <>
-      <FormField label="Leave a Review">
-        <TextArea onChange={handleChange} ref={ref} value={value} />
+      <FormField>
+        <FormField.Label>Leave a Review</FormField.Label>
+        <FormField.Input as={TextArea} onChange={handleChange} ref={ref} value={value} />
       </FormField>
       <PrimaryButton onClick={handleClick}>Focus Text Area</PrimaryButton>
     </>
diff --git a/modules/react/text-area/stories/examples/Required.tsx b/modules/react/text-area/stories/examples/Required.tsx
index becaec59fe..8555cd196c 100644
--- a/modules/react/text-area/stories/examples/Required.tsx
+++ b/modules/react/text-area/stories/examples/Required.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export const Required = () => {
@@ -10,8 +10,9 @@ export const Required = () => {
   };
 
   return (
-    <FormField label="Leave a Review" required={true}>
-      <TextArea onChange={handleChange} value={value} />
+    <FormField isRequired={true}>
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/text-area/stories/examples/ResizeConstraints.tsx b/modules/react/text-area/stories/examples/ResizeConstraints.tsx
index e595c0b1d0..833853f8d2 100644
--- a/modules/react/text-area/stories/examples/ResizeConstraints.tsx
+++ b/modules/react/text-area/stories/examples/ResizeConstraints.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export const ResizeConstraints = () => {
@@ -10,8 +10,14 @@ export const ResizeConstraints = () => {
   };
 
   return (
-    <FormField label="Leave a Review">
-      <TextArea onChange={handleChange} resize={TextArea.ResizeDirection.Vertical} value={value} />
+    <FormField>
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input
+        as={TextArea}
+        onChange={handleChange}
+        resize={TextArea.ResizeDirection.Vertical}
+        value={value}
+      />
     </FormField>
   );
 };
diff --git a/modules/react/text-input/stories/TextInput.stories.mdx b/modules/react/text-input/stories/TextInput.stories.mdx
index 0ed0d6c9e2..74f2e751e0 100644
--- a/modules/react/text-input/stories/TextInput.stories.mdx
+++ b/modules/react/text-input/stories/TextInput.stories.mdx
@@ -1,4 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
@@ -29,6 +29,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 Text Input should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
@@ -65,13 +77,10 @@ the width of its container.
 
 The `grow` prop may also be applied directly to the Text Input if Form Field is not being used.
 
-### Label Position
-
-Set the `labelPosition` prop of the wrapping Form Field to designate the position of the label
-relative to the Text Input. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`.
 
 <ExampleCodeBlock code={LabelPosition} />
 
diff --git a/modules/react/text-input/stories/examples/Alert.tsx b/modules/react/text-input/stories/examples/Alert.tsx
index 4eee129351..026f9d5d3f 100644
--- a/modules/react/text-input/stories/examples/Alert.tsx
+++ b/modules/react/text-input/stories/examples/Alert.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export const Alert = () => {
@@ -10,13 +10,10 @@ export const Alert = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="Please enter a valid email."
-      label="Email"
-    >
-      <TextInput onChange={handleChange} value={value} />
+    <FormField error="alert">
+      <FormField.Label>Email</FormField.Label>
+      <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+      <FormField.Hint>Please enter a valid email.</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/react/text-input/stories/examples/Basic.tsx b/modules/react/text-input/stories/examples/Basic.tsx
index 59671eb067..2d363b3b91 100644
--- a/modules/react/text-input/stories/examples/Basic.tsx
+++ b/modules/react/text-input/stories/examples/Basic.tsx
@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import {css, jsx} from '@emotion/react';
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export const Basic = () => {
@@ -13,8 +13,9 @@ export const Basic = () => {
   };
 
   return (
-    <FormField label="Email">
-      <TextInput onChange={handleChange} value={value} />
+    <FormField>
+      <FormField.Label>Email</FormField.Label>
+      <FormField.Input as={TextInput} onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/text-input/stories/examples/Disabled.tsx b/modules/react/text-input/stories/examples/Disabled.tsx
index 06959d6215..f92b43acdc 100644
--- a/modules/react/text-input/stories/examples/Disabled.tsx
+++ b/modules/react/text-input/stories/examples/Disabled.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export const Disabled = () => {
@@ -10,8 +10,9 @@ export const Disabled = () => {
   };
 
   return (
-    <FormField label="Email">
-      <TextInput disabled onChange={handleChange} value={value} />
+    <FormField>
+      <FormField.Label>Email</FormField.Label>
+      <FormField.Input as={TextInput} disabled onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/text-input/stories/examples/Error.tsx b/modules/react/text-input/stories/examples/Error.tsx
index fb711c470e..41de428ac2 100644
--- a/modules/react/text-input/stories/examples/Error.tsx
+++ b/modules/react/text-input/stories/examples/Error.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export const Error = () => {
@@ -10,13 +10,10 @@ export const Error = () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Error}
-      hintId="hint-error"
-      hintText="Please enter a valid email."
-      label="Email"
-    >
-      <TextInput onChange={handleChange} value={value} />
+    <FormField error="error">
+      <FormField.Label>Email</FormField.Label>
+      <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+      <FormField.Hint>Please enter a valid email.</FormField.Hint>
     </FormField>
   );
 };
diff --git a/modules/react/text-input/stories/examples/Grow.tsx b/modules/react/text-input/stories/examples/Grow.tsx
index b6301546e4..a66f027b19 100644
--- a/modules/react/text-input/stories/examples/Grow.tsx
+++ b/modules/react/text-input/stories/examples/Grow.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export const Grow = () => {
@@ -10,8 +10,9 @@ export const Grow = () => {
   };
 
   return (
-    <FormField grow={true} label="Street Address">
-      <TextInput onChange={handleChange} value={value} />
+    <FormField width="100%">
+      <FormField.Label>Street Address</FormField.Label>
+      <FormField.Input width="100%" as={TextInput} onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/text-input/stories/examples/Icons.tsx b/modules/react/text-input/stories/examples/Icons.tsx
index c3585e0628..eb43f9d9ac 100644
--- a/modules/react/text-input/stories/examples/Icons.tsx
+++ b/modules/react/text-input/stories/examples/Icons.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 
 import {mailIcon} from '@workday/canvas-system-icons-web';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {InputGroup} from '@workday/canvas-kit-react/text-input';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 
 export const Icons = () => {
   return (
-    <FormField label="Email">
+    <FormField>
+      <FormField.Label>Email</FormField.Label>
       <InputGroupFormFieldForwarder />
     </FormField>
   );
@@ -16,7 +17,7 @@ export const Icons = () => {
 // create a prop forwarding component for FormField to forward to
 const InputGroupFormFieldForwarder = (props: {}) => {
   return (
-    <InputGroup width={280}>
+    <FormField.Input as={InputGroup} width={280}>
       <InputGroup.InnerStart pointerEvents="none">
         <SystemIcon icon={mailIcon} size="small" />
       </InputGroup.InnerStart>
@@ -24,6 +25,6 @@ const InputGroupFormFieldForwarder = (props: {}) => {
       <InputGroup.InnerEnd>
         <InputGroup.ClearButton />
       </InputGroup.InnerEnd>
-    </InputGroup>
+    </FormField.Input>
   );
 };
diff --git a/modules/react/text-input/stories/examples/LabelPosition.tsx b/modules/react/text-input/stories/examples/LabelPosition.tsx
index 4fe4a16e9c..6bfb9104b8 100644
--- a/modules/react/text-input/stories/examples/LabelPosition.tsx
+++ b/modules/react/text-input/stories/examples/LabelPosition.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export const LabelPosition = () => {
@@ -10,8 +10,9 @@ export const LabelPosition = () => {
   };
 
   return (
-    <FormField label="Email" labelPosition={FormField.LabelPosition.Left}>
-      <TextInput onChange={handleChange} value={value} />
+    <FormField orientation="horizontal">
+      <FormField.Label>Email</FormField.Label>
+      <FormField.Input as={TextInput} onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/text-input/stories/examples/Placeholder.tsx b/modules/react/text-input/stories/examples/Placeholder.tsx
index b8d4db908b..419fd3234f 100644
--- a/modules/react/text-input/stories/examples/Placeholder.tsx
+++ b/modules/react/text-input/stories/examples/Placeholder.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export const Placeholder = () => {
@@ -10,8 +10,14 @@ export const Placeholder = () => {
   };
 
   return (
-    <FormField label="Email">
-      <TextInput onChange={handleChange} placeholder="user@email.com" value={value} />
+    <FormField>
+      <FormField.Label>Email</FormField.Label>
+      <FormField.Input
+        as={TextInput}
+        onChange={handleChange}
+        placeholder="user@email.com"
+        value={value}
+      />
     </FormField>
   );
 };
diff --git a/modules/react/text-input/stories/examples/RefForwarding.tsx b/modules/react/text-input/stories/examples/RefForwarding.tsx
index a3605355e7..e1c89aca8d 100644
--- a/modules/react/text-input/stories/examples/RefForwarding.tsx
+++ b/modules/react/text-input/stories/examples/RefForwarding.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export const RefForwarding = () => {
@@ -17,8 +17,9 @@ export const RefForwarding = () => {
 
   return (
     <>
-      <FormField label="Email">
-        <TextInput onChange={handleChange} ref={ref} value={value} />
+      <FormField>
+        <FormField.Label>Email</FormField.Label>
+        <FormField.Input as={TextInput} onChange={handleChange} ref={ref} value={value} />
       </FormField>
       <PrimaryButton onClick={handleClick}>Focus Text Input</PrimaryButton>
     </>
diff --git a/modules/react/text-input/stories/examples/Required.tsx b/modules/react/text-input/stories/examples/Required.tsx
index 4544c46643..4de028aa93 100644
--- a/modules/react/text-input/stories/examples/Required.tsx
+++ b/modules/react/text-input/stories/examples/Required.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export const Required = () => {
@@ -10,8 +10,9 @@ export const Required = () => {
   };
 
   return (
-    <FormField label="Email" required={true}>
-      <TextInput onChange={handleChange} value={value} />
+    <FormField isRequired={true}>
+      <FormField.Label>Email</FormField.Label>
+      <FormField.Input as={TextInput} onChange={handleChange} value={value} />
     </FormField>
   );
 };
diff --git a/modules/react/text/lib/LabelText.tsx b/modules/react/text/lib/LabelText.tsx
index bfbbe24e8b..c5ee9a9daa 100644
--- a/modules/react/text/lib/LabelText.tsx
+++ b/modules/react/text/lib/LabelText.tsx
@@ -1,18 +1,66 @@
 import * as React from 'react';
-import {Property} from 'csstype';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {Text, TextProps} from './Text';
-import {inputColors} from '@workday/canvas-kit-react/tokens';
+import {system} from '@workday/canvas-tokens-web';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {textStencil} from './Text';
 
-export interface TypeLabelProps extends TextProps {
-  cursor?: Property.Cursor;
+/**
+ * @deprecated ⚠️ `TypeLabelProps` has been deprecated and will be removed in a future major version.
+ */
+export interface TypeLabelProps extends BoxProps {
+  typeLevel?: `${keyof typeof system.type}.${'large' | 'medium' | 'small'}`;
+  /**
+   * Disabled state as a boolean
+   *
+   * ```tsx
+   * <LabelText disabled={true}>Error text</LabelText>
+   * ```
+   */
   disabled?: boolean;
+  /**
+   * Type variant token names: `error`, `hint` or `inverse`.
+   *
+   * ```tsx
+   * <LabelText variant="error">Error text</LabelText>
+   * ```
+   */
+  variant?: 'error' | 'hint' | 'inverse';
 }
 
+const labelTextStencil = createStencil({
+  extends: textStencil,
+  base: {
+    ...system.type.subtext.large,
+    color: system.color.text.default,
+  },
+  modifiers: {
+    disabled: {
+      true: {
+        cursor: 'default',
+        color: system.color.text.disabled,
+      },
+    },
+    variant: {
+      inverse: {color: system.color.text.inverse},
+      error: {color: system.color.text.critical.default},
+      hint: {color: system.color.text.hint},
+    },
+  },
+  compound: [
+    {
+      modifiers: {variant: 'inverse', disabled: true},
+      styles: {
+        opacity: system.opacity.disabled,
+        color: system.color.text.inverse,
+      },
+    },
+  ],
+});
+
 /**
- * This component is intended to be used for labeling input fields. It's built on top of the
- * {@link Text} component, so it has access to all `TextProps`. By default, it renders a semantic
- * `label` element.
+ * This component is intended to be used for labeling input fields.
+ * By default, it renders a semantic `label` element.
  *
  * It also uses the `subtext.large` typeLevel by default:
  * - font-size: 14px (0.875rem)
@@ -25,20 +73,16 @@ export interface TypeLabelProps extends TextProps {
  *   <LabelText>Input Label Text</LabelText>
  * );
  * ```
+ *
+ * @deprecated ⚠️ `LabelText` has been deprecated and will be removed in a future major version. Please use [FormField.Label](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic) from Preview instead.
  */
 export const LabelText = createComponent('label')({
   displayName: 'Label',
-  Component: ({cursor, disabled, variant, ...elemProps}: TypeLabelProps, ref, Element) => {
+  Component: ({disabled, typeLevel, variant, ...elemProps}: TypeLabelProps, ref, Element) => {
     return (
-      <Text
+      <Element
         ref={ref}
-        as={Element}
-        typeLevel="subtext.large"
-        color={disabled && variant !== 'inverse' ? inputColors.disabled.text : undefined}
-        cursor={cursor && !disabled ? cursor : 'default'}
-        opacity={disabled && variant === 'inverse' ? '.4' : '1'}
-        variant={variant}
-        {...elemProps}
+        {...mergeStyles(elemProps, labelTextStencil({variant, disabled, typeLevel}))}
       />
     );
   },
diff --git a/modules/react/text/lib/Text.tsx b/modules/react/text/lib/Text.tsx
index d5f19355ac..1f420147ae 100644
--- a/modules/react/text/lib/Text.tsx
+++ b/modules/react/text/lib/Text.tsx
@@ -1,8 +1,11 @@
 import * as React from 'react';
+import {system} from '@workday/canvas-tokens-web';
 import {createComponent} from '@workday/canvas-kit-react/common';
-// type changes no need
-import {type, CanvasTypeHierarchy, CanvasTypeVariants} from '@workday/canvas-kit-react/tokens';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles, BoxProps} from '@workday/canvas-kit-react/layout';
+
+type TypeSize = 'large' | 'medium' | 'small';
+type TokenName = `${keyof typeof system.type}.${TypeSize}`;
 
 export interface TextProps extends BoxProps {
   /**
@@ -12,65 +15,89 @@ export interface TextProps extends BoxProps {
    * ```tsx
    * <Text typeLevel="body.small">Small body text</Text>
    * ```
-  */
-  typeLevel?: `${keyof CanvasTypeHierarchy}.${'large'|'medium'|'small'}`;
+   */
+  typeLevel?: TokenName;
   /**
    * Type variant token names: `error`, `hint` or `inverse`.
    *
    * ```tsx
    * <Text variant="error" typeLevel="subtext.large">Error text</Text>
    * ```
-  */
-  variant?: keyof CanvasTypeVariants;
+   */
+  variant?: 'error' | 'hint' | 'inverse';
 }
 
-/**
- * Function returns updated props by token and variant values
-*/
-const validateProps = ({typeLevel, variant, ...props}: TextProps) => {
-  let updatedProps: any = props;
-  const tokenPropNames = [
-    'color',
-    'fontFamily',
-    'fontSize',
-    'fontWeight',
-    'letterSpacing',
-    'lineHeight',
-  ];
-
-  /*
-  If token provided it updates undefined values of token styles:
-  `fontFamily`, `fontSize`, `lineHeight`, `fontWeight`, `color`
-  by replacing them by token value
-  */
-  if (typeLevel) {
-    const [level, size] = typeLevel.split('.') as [
-      keyof CanvasTypeHierarchy,
-      'large' | 'medium' | 'small'
-    ];
-    const tokenProps = type.levels[level][size];
-
-    tokenPropNames.forEach(item => {
-      if (!props[item as keyof typeof props]) {
-        updatedProps[item] = tokenProps[item as keyof typeof tokenProps];
-      }
-    });
-  }
-
-  // If variant provided it updates color value by variant color
-  if (variant) {
-    updatedProps = {...updatedProps, ...type.variants[variant]};
-  }
-
-  return updatedProps;
-};
+export const textStencil = createStencil({
+  base: {},
+  modifiers: {
+    typeLevel: {
+      // Title level styles
+      'title.large': {
+        ...system.type.title.large,
+        color: system.color.text.strong,
+      },
+      'title.medium': {
+        ...system.type.title.medium,
+        color: system.color.text.strong,
+      },
+      'title.small': {
+        ...system.type.title.small,
+        color: system.color.text.strong,
+      },
+      // Heading level styles
+      'heading.large': {
+        ...system.type.heading.large,
+        color: system.color.text.strong,
+      },
+      'heading.medium': {
+        ...system.type.heading.medium,
+        color: system.color.text.strong,
+      },
+      'heading.small': {
+        ...system.type.heading.small,
+        color: system.color.text.strong,
+      },
+      // Body level styles
+      'body.large': {
+        ...system.type.body.large,
+        color: system.color.text.default,
+      },
+      'body.medium': {
+        ...system.type.body.medium,
+        color: system.color.text.default,
+      },
+      'body.small': {
+        ...system.type.body.small,
+        color: system.color.text.default,
+      },
+      // Subtext level styles
+      'subtext.large': {
+        ...system.type.subtext.large,
+        color: system.color.text.default,
+      },
+      'subtext.medium': {
+        ...system.type.subtext.medium,
+        color: system.color.text.default,
+      },
+      'subtext.small': {
+        ...system.type.subtext.small,
+        color: system.color.text.default,
+      },
+    },
+    variant: {
+      error: {color: system.color.text.critical.default},
+      hint: {color: system.color.text.hint},
+      inverse: {color: system.color.text.inverse},
+    },
+  },
+});
 
 /**
- * This is a generic base component intended to render any text. It's built on top of the
- * {@link Box} component. It also has `typeLevel` and `variant` style props that simplify navigating
- * our type hierarchy and using [Canvas type
- * tokens](https://canvas.workday.com/tokens/type#type-styles). By default, it renders a semantic
- * `span` element, but you can adjust this as needed with the `as` prop.
+ * This is a generic base component intended to render any text.
+ * It has `typeLevel` and `variant` style props that simplify navigating
+ * our type hierarchy and using [Canvas type tokens](https://canvas.workday.com/tokens/type#type-styles).
+ * By default, it renders a semantic `span` element,
+ * but you can adjust this as needed with the `as` prop.
  *
  * The type hierarchy is organized into four levels, which correspond to our [Canvas type
  * levels](https://canvas.workday.com/tokens/type#type-styles).
@@ -95,12 +122,14 @@ const validateProps = ({typeLevel, variant, ...props}: TextProps) => {
  *   </Text>
  * );
  * ```
-*/
+ */
 export const Text = createComponent('span')({
   displayName: 'Text',
-  Component: ({children, ...elemProps}: TextProps, ref, Element) => (
-    <Box ref={ref} as={Element} {...validateProps(elemProps)}>
-      {children}
-    </Box>
-  ),
+  Component: ({children, typeLevel, variant, ...elemProps}: TextProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, textStencil({typeLevel, variant}))}>
+        {children}
+      </Element>
+    );
+  },
 });
diff --git a/modules/react/text/lib/TypeLevelComponents.tsx b/modules/react/text/lib/TypeLevelComponents.tsx
index a7b55036e1..68063db36e 100644
--- a/modules/react/text/lib/TypeLevelComponents.tsx
+++ b/modules/react/text/lib/TypeLevelComponents.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {Text, TextProps} from './Text';
+import {TextProps, textStencil} from './Text';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
+
+type Size = 'large' | 'medium' | 'small';
 
 /**
  * Prop interface for type level specific components:
@@ -10,9 +14,14 @@ export interface TypeLevelProps extends Omit<TextProps, 'typeLevel'> {
   /**
    * Each type level has three sizes: `large`, `medium`, and `small`.
    */
-  size: 'large' | 'medium' | 'small';
+  size: Size;
 }
 
+const subtextStencil = createStencil({
+  extends: textStencil,
+  base: {},
+});
+
 /**
  * This component is intended to be used for small subtext content or in tight spaces.
  * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
@@ -39,12 +48,17 @@ export interface TypeLevelProps extends Omit<TextProps, 'typeLevel'> {
  */
 export const Subtext = createComponent('p')({
   displayName: 'Subtext',
-  Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
+  Component: ({size, variant, ...elemProps}: TypeLevelProps, ref, Element) => {
     const typeLevel = `subtext.${size}` as TextProps['typeLevel'];
-    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...elemProps} />;
+    return <Element ref={ref} {...mergeStyles(elemProps, subtextStencil({typeLevel, variant}))} />;
   },
 });
 
+const bodyTextStencil = createStencil({
+  extends: textStencil,
+  base: {},
+});
+
 /**
  * This component is intended to be used for standard body text.
  * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
@@ -71,12 +85,17 @@ export const Subtext = createComponent('p')({
  */
 export const BodyText = createComponent('p')({
   displayName: 'BodyText',
-  Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
+  Component: ({size, variant, ...elemProps}: TypeLevelProps, ref, Element) => {
     const typeLevel = `body.${size}` as TextProps['typeLevel'];
-    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...elemProps} />;
+    return <Element ref={ref} {...mergeStyles(elemProps, bodyTextStencil({typeLevel, variant}))} />;
   },
 });
 
+const headingStencil = createStencil({
+  extends: textStencil,
+  base: {},
+});
+
 /**
  * This component is intended to be used for headings and large text.
  * By default, it renders a semantic `h2` element, but you can adjust this as needed with the `as` prop.
@@ -103,12 +122,17 @@ export const BodyText = createComponent('p')({
  */
 export const Heading = createComponent('h2')({
   displayName: 'Heading',
-  Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
+  Component: ({size, variant, ...elemProps}: TypeLevelProps, ref, Element) => {
     const typeLevel = `heading.${size}` as TextProps['typeLevel'];
-    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...elemProps} />;
+    return <Element ref={ref} {...mergeStyles(elemProps, headingStencil({typeLevel, variant}))} />;
   },
 });
 
+const titleStencil = createStencil({
+  extends: textStencil,
+  base: {},
+});
+
 /**
  * This component is intended to be used large page titles.
  * By default, it renders a semantic `h1` element, but you can adjust this as needed with the `as` prop.
@@ -135,8 +159,8 @@ export const Heading = createComponent('h2')({
  */
 export const Title = createComponent('h1')({
   displayName: 'Title',
-  Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
+  Component: ({size, variant, ...elemProps}: TypeLevelProps, ref, Element) => {
     const typeLevel = `title.${size}` as TextProps['typeLevel'];
-    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...elemProps} />;
+    return <Element ref={ref} {...mergeStyles(elemProps, titleStencil({typeLevel, variant}))} />;
   },
 });
diff --git a/modules/react/text/stories/BodyText.stories.mdx b/modules/react/text/stories/BodyText.stories.mdx
index 22cc533b88..c58f40eae1 100644
--- a/modules/react/text/stories/BodyText.stories.mdx
+++ b/modules/react/text/stories/BodyText.stories.mdx
@@ -29,6 +29,11 @@ You may override the rendered element using the `as` prop.
 
 <ExampleCodeBlock code={Basic} />
 
+### Custom Styles
+
+Body Text supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="BodyText" fileName="/react/" />
diff --git a/modules/react/text/stories/Heading.stories.mdx b/modules/react/text/stories/Heading.stories.mdx
index 215e1587fd..f5765dde3b 100644
--- a/modules/react/text/stories/Heading.stories.mdx
+++ b/modules/react/text/stories/Heading.stories.mdx
@@ -29,6 +29,11 @@ according to the [Canvas type hierarchy](/tokens/type/#type-styles).
 
 <ExampleCodeBlock code={Basic} />
 
+### Custom Styles
+
+Heading supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Heading" fileName="/react/text/" />
diff --git a/modules/react/text/stories/LabelText.stories.mdx b/modules/react/text/stories/LabelText.stories.mdx
index 8df2691312..8897b6a265 100644
--- a/modules/react/text/stories/LabelText.stories.mdx
+++ b/modules/react/text/stories/LabelText.stories.mdx
@@ -1,4 +1,5 @@
 import {SymbolDoc} from '@workday/canvas-kit-docs';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import {Basic} from './examples/LabelText/Basic';
 import {Cursor} from './examples/LabelText/Cursor';
@@ -8,6 +9,14 @@ import {Disabled} from './examples/LabelText/Disabled';
 
 # Canvas Kit Label Text
 
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
+
+`LabelText` has been deprecated and will be removed in a future major version. Please use
+[FormField.Label](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic)
+from Preview instead.
+
 `LabelText` provides a simple way to render a label with built-in support for Canvas type tokens.
 
 ## Installation
@@ -20,7 +29,8 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-`LabelText` is built on top of [`Text`](/components/text/text/) and renders a `<label>` element.
+`LabelText` renders a `<label>` element. This component is deprecated in favor of `FormField.Label`
+since it should be used in tandem with form elements.
 
 <ExampleCodeBlock code={Basic} />
 
diff --git a/modules/react/text/stories/Subtext.stories.mdx b/modules/react/text/stories/Subtext.stories.mdx
index a469cbf661..092749db9f 100644
--- a/modules/react/text/stories/Subtext.stories.mdx
+++ b/modules/react/text/stories/Subtext.stories.mdx
@@ -29,6 +29,11 @@ You may override the rendered element using the `as` prop.
 
 <ExampleCodeBlock code={Basic} />
 
+### Custom Styles
+
+Subtext supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Subtext" fileName="/react/text/" />
diff --git a/modules/react/text/stories/Text.stories.mdx b/modules/react/text/stories/Text.stories.mdx
index fdd7bae600..95e4ff4245 100644
--- a/modules/react/text/stories/Text.stories.mdx
+++ b/modules/react/text/stories/Text.stories.mdx
@@ -44,6 +44,11 @@ understanding of the text being rendered.
 
 <ExampleCodeBlock code={Variant} />
 
+### Custom Styles
+
+Text supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Text" fileName="/react/" />
diff --git a/modules/react/text/stories/Title.stories.mdx b/modules/react/text/stories/Title.stories.mdx
index 60a5fb6e85..515f9fb113 100644
--- a/modules/react/text/stories/Title.stories.mdx
+++ b/modules/react/text/stories/Title.stories.mdx
@@ -29,6 +29,11 @@ You may override the rendered element using the `as` prop.
 
 <ExampleCodeBlock code={Basic} />
 
+### Custom Styles
+
+Title supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
 ## Component API
 
 <SymbolDoc name="Title" filePath="/react/text/" />
diff --git a/modules/react/text/stories/examples/LabelText/Disabled.tsx b/modules/react/text/stories/examples/LabelText/Disabled.tsx
index 2af3676eab..aec3c5fe9c 100644
--- a/modules/react/text/stories/examples/LabelText/Disabled.tsx
+++ b/modules/react/text/stories/examples/LabelText/Disabled.tsx
@@ -1,4 +1,24 @@
 import React from 'react';
 import {LabelText} from '@workday/canvas-kit-react/text';
 
-export const Disabled = () => <LabelText disabled>Disabled Label</LabelText>;
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const inverseBackground = createStyles({
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+  marginTop: system.space.x4,
+});
+
+export const Disabled = () => {
+  return (
+    <div>
+      <LabelText disabled>Disabled Label</LabelText>
+      <div className={inverseBackground}>
+        <LabelText disabled variant="inverse">
+          Disabled Inverse Label
+        </LabelText>
+      </div>
+    </div>
+  );
+};
diff --git a/modules/react/text/stories/stories_VisualTesting.tsx b/modules/react/text/stories/stories_VisualTesting.tsx
index df49718706..3d79aec7bd 100644
--- a/modules/react/text/stories/stories_VisualTesting.tsx
+++ b/modules/react/text/stories/stories_VisualTesting.tsx
@@ -4,11 +4,17 @@ import {colors} from '@workday/canvas-kit-react/tokens';
 import {withSnapshotsEnabled} from '../../../../utils/storybook';
 import {BodyText, Heading, LabelText, Subtext, Text, Title} from '../';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
 
-type TypeStateProp = {size: 'small' | 'medium' | 'large'};
+type TypeStateProp = {size: 'small' | 'medium' | 'large'; variant?: 'error' | 'hint' | 'inverse'};
+
+const inverseBackground = createStyles({
+  backgroundColor: base.blueberry400,
+});
 
 export default withSnapshotsEnabled({
-  title: 'Testing/Containers/Text',
+  title: 'Testing/Text',
   component: Text,
 });
 
@@ -108,12 +114,28 @@ export const TitleStates = () => (
       ]}
       columnProps={[
         {
-          label: 'Examples',
+          label: 'Default',
           props: {},
         },
+        {
+          label: 'Hint variant',
+          props: {variant: 'hint'},
+        },
+        {
+          label: 'Error variant',
+          props: {variant: 'error'},
+        },
+        {
+          label: 'Inverse variant',
+          props: {variant: 'inverse'},
+        },
       ]}
     >
-      {(props: TypeStateProp) => <Title {...props}>Lorem ipsum title.</Title>}
+      {(props: TypeStateProp) => (
+        <Box className={props.variant === 'inverse' ? inverseBackground : ''}>
+          <Title {...props}>Lorem ipsum title.</Title>
+        </Box>
+      )}
     </ComponentStatesTable>
   </StaticStates>
 );
@@ -131,9 +153,25 @@ export const HeadingStates = () => (
           label: 'Examples',
           props: {},
         },
+        {
+          label: 'Hint variant',
+          props: {variant: 'hint'},
+        },
+        {
+          label: 'Error variant',
+          props: {variant: 'error'},
+        },
+        {
+          label: 'Inverse variant',
+          props: {variant: 'inverse'},
+        },
       ]}
     >
-      {(props: TypeStateProp) => <Heading {...props}>Lorem ipsum title.</Heading>}
+      {(props: TypeStateProp) => (
+        <Box className={props.variant === 'inverse' ? inverseBackground : ''}>
+          <Heading {...props}>Lorem ipsum title.</Heading>
+        </Box>
+      )}
     </ComponentStatesTable>
   </StaticStates>
 );
@@ -151,9 +189,25 @@ export const SubtextStates = () => (
           label: 'Examples',
           props: {},
         },
+        {
+          label: 'Hint variant',
+          props: {variant: 'hint'},
+        },
+        {
+          label: 'Error variant',
+          props: {variant: 'error'},
+        },
+        {
+          label: 'Inverse variant',
+          props: {variant: 'inverse'},
+        },
       ]}
     >
-      {(props: TypeStateProp) => <Subtext {...props}>Lorem ipsum title.</Subtext>}
+      {(props: TypeStateProp) => (
+        <Box className={props.variant === 'inverse' ? inverseBackground : ''}>
+          <Subtext {...props}>Lorem ipsum title.</Subtext>
+        </Box>
+      )}
     </ComponentStatesTable>
   </StaticStates>
 );
@@ -171,9 +225,25 @@ export const BodyTextStates = () => (
           label: 'Examples',
           props: {},
         },
+        {
+          label: 'Hint variant',
+          props: {variant: 'hint'},
+        },
+        {
+          label: 'Error variant',
+          props: {variant: 'error'},
+        },
+        {
+          label: 'Inverse variant',
+          props: {variant: 'inverse'},
+        },
       ]}
     >
-      {(props: TypeStateProp) => <BodyText {...props}>Lorem ipsum title.</BodyText>}
+      {(props: TypeStateProp) => (
+        <Box className={props.variant === 'inverse' ? inverseBackground : ''}>
+          <BodyText {...props}>Lorem ipsum title.</BodyText>
+        </Box>
+      )}
     </ComponentStatesTable>
   </StaticStates>
 );
@@ -190,9 +260,25 @@ export const LabelStates = () => (
           label: 'Examples',
           props: {},
         },
+        {
+          label: 'Hint variant',
+          props: {variant: 'hint'},
+        },
+        {
+          label: 'Error variant',
+          props: {variant: 'error'},
+        },
+        {
+          label: 'Inverse variant',
+          props: {variant: 'inverse'},
+        },
       ]}
     >
-      {(props: TypeStateProp) => <LabelText {...props}>Lorem ipsum title.</LabelText>}
+      {(props: TypeStateProp) => (
+        <Box className={props.variant === 'inverse' ? inverseBackground : ''}>
+          <LabelText {...props}>Lorem ipsum title.</LabelText>
+        </Box>
+      )}
     </ComponentStatesTable>
   </StaticStates>
 );
diff --git a/modules/styling-transform/index.ts b/modules/styling-transform/index.ts
index bf01f81081..016d1eb6c0 100644
--- a/modules/styling-transform/index.ts
+++ b/modules/styling-transform/index.ts
@@ -5,6 +5,8 @@ export {parseObjectToStaticValue} from './lib/utils/parseObjectToStaticValue';
 export {createObjectTransform} from './lib/createObjectTransform';
 export {createPropertyTransform} from './lib/createPropertyTransform';
 export {styleTransformer};
+export {withDefaultContext} from './lib/styleTransform';
+export {getClassName} from './lib/utils/handleCreateStencil';
 
 // be compatible with ttypescript which expects a default export
 export default styleTransformer;
diff --git a/modules/styling-transform/lib/styleTransform.ts b/modules/styling-transform/lib/styleTransform.ts
index efe410aa08..f9a164cfb0 100644
--- a/modules/styling-transform/lib/styleTransform.ts
+++ b/modules/styling-transform/lib/styleTransform.ts
@@ -12,6 +12,7 @@ import {handleCssVar} from './utils/handleCssVar';
 import {Config, NodeTransformer, ObjectTransform, TransformerContext} from './utils/types';
 import {handleKeyframes} from './utils/handleKeyframes';
 import {handleInjectGlobal} from './utils/handleInjectGlobal';
+import {handleParentModifier} from './utils/handleParentModifier';
 
 export type NestedStyleObject = {[key: string]: string | NestedStyleObject};
 
@@ -20,9 +21,10 @@ export interface StyleTransformerOptions extends TransformerContext {
   transformers?: NodeTransformer[];
 }
 
-let vars: TransformerContext['variables'] = {};
-let keyframes: TransformerContext['keyframes'] = {};
+let vars: TransformerContext['names'] = {};
+let extractedNames: TransformerContext['extractedNames'] = {};
 let styles: TransformerContext['styles'] = {};
+let cache: TransformerContext['cache'] = {};
 let loadedFallbacks = false;
 let configLoaded = false;
 let config: Config = {};
@@ -32,8 +34,9 @@ let config: Config = {};
  */
 export function _reset() {
   vars = {};
+  extractedNames = {};
   styles = {};
-  keyframes = {};
+  cache = {};
   loadedFallbacks = false;
 }
 
@@ -50,7 +53,7 @@ const defaultTransformers = [
 
 export default function styleTransformer(
   program: ts.Program,
-  options?: Partial<StyleTransformerOptions>
+  {fallbackFiles = [], ...options}: Partial<StyleTransformerOptions> = {}
 ): ts.TransformerFactory<ts.SourceFile> {
   if (!configLoaded) {
     const configPath = getConfig(program.getCurrentDirectory());
@@ -63,14 +66,10 @@ export default function styleTransformer(
     configLoaded = true;
   }
 
-  const {
-    variables,
-    fallbackFiles = [],
-    transformers = defaultTransformers,
-    ...transformContext
-  } = withDefaultContext(program.getTypeChecker(), {...config, ...options});
-
-  const transform = handleTransformers(transformers);
+  const {names, ...transformContext} = withDefaultContext(program.getTypeChecker(), {
+    ...config,
+    ...options,
+  });
 
   if (!loadedFallbacks) {
     const files = fallbackFiles
@@ -87,8 +86,10 @@ export default function styleTransformer(
     const fallbackVars = getVariablesFromFiles(files);
     console.log(`Found ${Object.keys(fallbackVars).length} variables.`);
 
-    // eslint-disable-next-line no-param-reassign
-    vars = {...variables, ...fallbackVars};
+    // eslint-disable-next-line guard-for-in
+    for (const key in fallbackVars) {
+      names[key] = fallbackVars[key];
+    }
     loadedFallbacks = true;
   }
 
@@ -96,28 +97,23 @@ export default function styleTransformer(
     const visit: ts.Visitor = node => {
       if (!transformContext.fileName) {
         transformContext.fileName = node.getSourceFile()?.fileName;
+        transformContext.prefix = transformContext.getPrefix(transformContext.fileName);
+      }
+
+      if (
+        ts.isSourceFile(node) &&
+        node.fileName !== 'test.ts' &&
+        transformContext.styles[transformContext.getFileName(node.fileName)] &&
+        transformContext.extractCSS
+      ) {
+        ts.sys.writeFile(
+          transformContext.getFileName(transformContext.getFileName(node.fileName)),
+          (transformContext.styles[transformContext.getFileName(node.fileName)] || []).join('\n')
+        );
       }
 
-      // disable for v10
-      // if (
-      //   ts.isSourceFile(node) &&
-      //   node.fileName !== 'test.ts' &&
-      //   transformContext.styles[transformContext.getFileName(node.fileName)]
-      // ) {
-      //   console.log(
-      //     'sourceFile:',
-      //     node.fileName,
-      //     '->',
-      //     transformContext.getFileName(node.fileName)
-      //   );
-      //   ts.sys.writeFile(
-      //     transformContext.getFileName(transformContext.getFileName(node.fileName)),
-      //     (transformContext.styles[transformContext.getFileName(node.fileName)] || []).join('\n')
-      //   );
-      // }
-
-      const newNode = transform(node, {
-        variables: vars,
+      const newNode = transformContext.transform(node, {
+        names,
         ...transformContext,
       });
 
@@ -128,23 +124,27 @@ export default function styleTransformer(
   };
 }
 
-export function withDefaultContext<T extends TransformerContext>(
+export function withDefaultContext(
   checker: ts.TypeChecker,
-  input: Partial<T> = {}
-): T {
+  {transformers, ...input}: Partial<StyleTransformerOptions> = {}
+): TransformerContext {
   return {
     prefix: 'css',
-    variables: {},
+    getPrefix: path => input.prefix || 'css',
+    names: vars,
+    extractedNames,
     styles,
-    keyframes,
+    cache,
     checker,
+    extractCSS: false,
     getFileName: path => path.replace(/\.tsx?/, '.css'),
     objectTransforms: [] as ObjectTransform[],
+    transform: handleTransformers(transformers || defaultTransformers),
     ...input,
-    propertyTransforms: [handleCalc, handlePx2Rem, handleCssVar].concat(
+    propertyTransforms: [handleCalc, handlePx2Rem, handleCssVar, handleParentModifier].concat(
       input.propertyTransforms || []
     ),
-  } as T;
+  } as TransformerContext;
 }
 
 /**
@@ -164,7 +164,7 @@ export function transform(
   return printer.printFile(
     ts
       .transform(source, [styleTransformer(program, options)])
-      .transformed.find(s => s.fileName === fileName) || source
+      .transformed.find(s => s.fileName === source.fileName) || source
   );
 }
 
diff --git a/modules/styling-transform/lib/utils/createStyleObjectNode.ts b/modules/styling-transform/lib/utils/createStyleObjectNode.ts
index a559bfc0e3..88d7e0c0d7 100644
--- a/modules/styling-transform/lib/utils/createStyleObjectNode.ts
+++ b/modules/styling-transform/lib/utils/createStyleObjectNode.ts
@@ -5,7 +5,8 @@ import {serialize, compile} from 'stylis';
 import {generateUniqueId} from '@workday/canvas-kit-styling';
 
 import {prettyStringify} from './stylisFns';
-import {NestedStyleObject} from './types';
+import {NestedStyleObject, TransformerContext} from './types';
+import {getHash} from './getHash';
 
 /**
  * Creates an AST node representation of the passed in `styleObj`, but in the format of `{name:
@@ -46,6 +47,49 @@ export function compileCSS(input: string): string {
   return serialize(compile(input), prettyStringify);
 }
 
-export function serializeStyles(input: NestedStyleObject | string) {
-  return serializedStylesEmotion([input]);
+/**
+ * Serialize styles and put them to style output. The styles will be serialized via Emotion. Returns
+ * the serialized styles.
+ * @param node
+ * @param input
+ * @param template The template for creating styles for static CSS. There are two placeholders: `%n`
+ * represents the hash name while `%s` represents the string styles.
+ * @param context
+ * @returns
+ */
+export function serializeStyles(
+  node: ts.Node,
+  input: NestedStyleObject | string,
+  template: string,
+  context: TransformerContext
+) {
+  const {getFileName, styles, cache, names, extractedNames} = context;
+  const fileName = getFileName(node.getSourceFile().fileName);
+  const hash = getHash(node, context);
+  const serialized = {...serializedStylesEmotion([input]), name: hash} as ReturnType<
+    typeof serializedStylesEmotion
+  >;
+
+  if (!cache[hash]) {
+    const styleOutput = compileCSS(
+      template.replace('%s', serialized.styles).replace('%n', serialized.name)
+    );
+
+    let extractedStyleOutput = styleOutput;
+
+    for (const key in names) {
+      if (extractedNames[names[key]]) {
+        // @ts-ignore replaceAll was added in es2021, but our lib versions don't go past es2019. replaceAll is available in node 15+
+        extractedStyleOutput = extractedStyleOutput.replaceAll(
+          names[key],
+          extractedNames[names[key]]
+        );
+      }
+    }
+    styles[fileName] = styles[fileName] || [];
+    styles[fileName].push(extractedStyleOutput);
+    cache[hash] = styleOutput;
+  }
+
+  return serialized;
 }
diff --git a/modules/styling-transform/lib/utils/getFallbackVariable.ts b/modules/styling-transform/lib/utils/getFallbackVariable.ts
index 75fd7fcfe0..984e7b99f7 100644
--- a/modules/styling-transform/lib/utils/getFallbackVariable.ts
+++ b/modules/styling-transform/lib/utils/getFallbackVariable.ts
@@ -1,15 +1,15 @@
 /**
  * Looks for a variable value that doesn't include a fallback and automatically adds one if found in
- * the current cache of variables. This allows fallbacks to be automatically included in
- * environments without the variables defined. This is most useful for Storybook or other sandboxes
- * that may not have CSS Variables defined. The fallbacks will allow the UI to look correct without
- * additional setup. Fallbacks come from the `fallbackFiles` transform configuration.
+ * the current cache of names. This allows fallbacks to be automatically included in environments
+ * without the names defined. This is most useful for Storybook or other sandboxes that may not have
+ * CSS Variables defined. The fallbacks will allow the UI to look correct without additional setup.
+ * Fallbacks come from the `fallbackFiles` transform configuration.
  */
 export function getFallbackVariable(
   variableName: string,
-  variables: Record<string, string>
+  names: Record<string, string>
 ): string | undefined {
-  const variable = variableName.includes('var(') ? variableName : variables[variableName];
+  const variable = variableName.includes('var(') ? variableName : names[variableName];
   if (variable && variable.includes('var(')) {
     return variable.replace(
       /(var\(([A-Za-z0-9\-_]+)\))/,
@@ -18,9 +18,9 @@ export function getFallbackVariable(
         /** the full match of the first group "var(--var-name)" */ varMatch,
         /** the variable name  - match of the second group "--var-name" */ cssVarName
       ) => {
-        const value = variables[cssVarName];
+        const value = names[cssVarName];
         if (value && value.startsWith('var')) {
-          return getFallbackVariable(value, variables);
+          return getFallbackVariable(value, names);
         }
         return value || varMatch;
       }
diff --git a/modules/styling-transform/lib/utils/getHash.ts b/modules/styling-transform/lib/utils/getHash.ts
new file mode 100644
index 0000000000..2512c564d2
--- /dev/null
+++ b/modules/styling-transform/lib/utils/getHash.ts
@@ -0,0 +1,13 @@
+import ts from 'typescript';
+import crypto from 'node:crypto';
+
+import {TransformerContext} from './types';
+
+export function getHash(node: ts.Node, context: TransformerContext) {
+  const fileName = context.getFileName(node.getSourceFile().fileName);
+  return crypto
+    .createHash('md5')
+    .update(fileName + node.pos) // file name + position should be unique and repeatable
+    .digest('hex')
+    .substring(0, 6);
+}
diff --git a/modules/styling-transform/lib/utils/getVarName.ts b/modules/styling-transform/lib/utils/getVarName.ts
index 9ed3a9c2b8..3d0a57c69b 100644
--- a/modules/styling-transform/lib/utils/getVarName.ts
+++ b/modules/styling-transform/lib/utils/getVarName.ts
@@ -17,7 +17,7 @@ import ts from 'typescript';
 export function getVarName(node: ts.Node, parts: string[] = []): string {
   // base case. Join all the parts
   if (!node.parent || node.kind === ts.SyntaxKind.VariableStatement) {
-    return parts.join('-');
+    return parts.join('.');
   }
 
   // Any node with a `name` property that is an identifier can add to the var name
diff --git a/modules/styling-transform/lib/utils/handleCreateStencil.ts b/modules/styling-transform/lib/utils/handleCreateStencil.ts
index 1a0e29d033..7b7ed4f558 100644
--- a/modules/styling-transform/lib/utils/handleCreateStencil.ts
+++ b/modules/styling-transform/lib/utils/handleCreateStencil.ts
@@ -3,18 +3,18 @@ import ts from 'typescript';
 import {slugify} from '@workday/canvas-kit-styling';
 
 import {getVarName} from './getVarName';
-import {makeEmotionSafe} from './makeEmotionSafe';
 import {parseObjectToStaticValue} from './parseObjectToStaticValue';
-import {compileCSS, createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
-import {parseNodeToStaticValue} from './parseNodeToStaticValue';
+import {createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
+import {getValueFromAliasedSymbol, parseNodeToStaticValue} from './parseNodeToStaticValue';
 import {NestedStyleObject, NodeTransformer, TransformerContext} from './types';
 import {isImportedFromStyling} from './isImportedFromStyling';
+import {getHash} from './getHash';
 
 /**
  * Handle all arguments of the CallExpression `createStencil()`
  */
 export const handleCreateStencil: NodeTransformer = (node, context) => {
-  const {checker, prefix, variables, getFileName} = context;
+  const {checker, names, extractedNames} = context;
   /**
    * This will match whenever a `createStencil()` call expression is encountered. It will loop
    * over all the config to extract variables and styles.
@@ -26,33 +26,47 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
     node.expression.text === 'createStencil' &&
     isImportedFromStyling(node.expression, checker)
   ) {
-    const fileName = getFileName(node.expression.getSourceFile()?.fileName);
     const config = node.arguments[0];
 
-    /**
-     * Stencils can define variables that are used in style object functions. Inside those
-     * functions, the full variable name is not used, but rather destructured. We'll create
-     * temporary local variables for these style object functions.
-     *
-     * For example:
-     * ```ts
-     * const myStencil = createStencil({
-     *   vars: { color: 'red' },
-     *   base: ({color}) => ({
-     *     color: color
-     *   })
-     * })
-     * ```
-     */
-    const tempVariables: Record<string, string> = {};
     // We need to keep track of stencil variables and values to automatically merge into the base
     // styles
     const stencilVariables: Record<string, string> = {};
 
     // Stencil name is the variable name
-    const stencilName = slugify(getVarName(node.expression)).replace('-stencil', '');
+    const stencilName = getVarName(node.expression);
+    const stencilHash = getHash(node, context);
 
     if (ts.isObjectLiteralExpression(config)) {
+      config.properties.forEach(property => {
+        if (
+          ts.isPropertyAssignment(property) &&
+          property.name &&
+          ts.isIdentifier(property.name) &&
+          property.name.text === 'extends' &&
+          ts.isIdentifier(property.initializer)
+        ) {
+          const className = getClassName(property.initializer.text, context);
+          const extendsStencilName = property.initializer.text;
+
+          if (
+            !Object.values(context.styles).some(fileStyles => {
+              return fileStyles.some(rule => rule.includes(`.${className}`));
+            })
+          ) {
+            // Process the extended stencil since those styles haven't been processed yet
+            getValueFromAliasedSymbol(property.initializer, '', context);
+          }
+
+          // attach all variables from extends stencil
+          Object.keys(names).forEach(key => {
+            if (key.startsWith(`${extendsStencilName}.`)) {
+              // We want to copy a new entry into variables that is the extended stencil with the same variable name as the base variable name
+              names[key.replace(extendsStencilName, stencilName)] = names[key];
+            }
+          });
+        }
+      });
+
       // get variables first
       const varsConfig = config.properties.find(property => {
         return (
@@ -63,27 +77,34 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
         );
       }) as ts.PropertyAssignment | undefined;
 
-      function extractVariables(node: ts.Node): any {
+      function extractNames(node: ts.Node): any {
         if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name)) {
           if (ts.isObjectLiteralExpression(node.initializer)) {
-            return node.initializer.properties.map(extractVariables);
+            return node.initializer.properties.map(extractNames);
           }
 
-          const varName = `${stencilName}-${makeEmotionSafe(node.name.text)}`;
-          const varValue = `--${prefix}-${varName}`;
-          variables[`${varName}`] = varValue;
+          const varName = getVarName(node.name);
+          const varValue = `--${getClassName(varName, context)}`;
+          names[varName] = `--${node.name.text}-${slugify(stencilName).replace(
+            '-stencil',
+            ''
+          )}-${stencilHash}`;
 
-          variables[makeEmotionSafe(node.name.text)] = varValue;
-          tempVariables[makeEmotionSafe(node.name.text)] = varValue;
+          names[node.name.text] = names[varName];
+          extractedNames[names[varName]] = varValue;
 
           // Evaluate the variable defaults
-          stencilVariables[varValue] = parseNodeToStaticValue(node.initializer, context).toString();
+          const value = parseNodeToStaticValue(node.initializer, context).toString();
+          if (value) {
+            // Only add the stencil variable if there's a value. An empty string means no default.
+            stencilVariables[names[varName]] = value;
+          }
         }
       }
 
       if (varsConfig && ts.isObjectLiteralExpression(varsConfig.initializer)) {
         varsConfig.initializer.properties.forEach(variable => {
-          extractVariables(variable);
+          extractNames(variable);
         });
       }
 
@@ -91,16 +112,17 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
         if (property.name && ts.isIdentifier(property.name)) {
           // base config object
           if (property.name.text === 'base') {
-            const styleObj = parseStyleBlock(property, context);
+            const styleObj = parseStyleBlock(property, context, stencilName);
 
             if (styleObj) {
               const initializer = createStyleReplacementNode(
+                property,
                 {
                   ...stencilVariables,
+                  boxSizing: 'border-box',
                   ...styleObj,
                 },
-                getClassName(property.name, context),
-                fileName,
+                getClassName(getVarName(property.name), context),
                 context
               );
 
@@ -122,25 +144,38 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
                 property.initializer,
                 property.initializer.properties.map(modifierProperty => {
                   if (
+                    ts.isPropertyAssignment(modifierProperty) &&
                     modifierProperty.name &&
                     ts.isIdentifier(modifierProperty.name) &&
-                    ts.isPropertyAssignment(modifierProperty) &&
                     ts.isObjectLiteralExpression(modifierProperty.initializer)
                   ) {
                     // modifier value
                     return ts.factory.updatePropertyAssignment(
                       modifierProperty,
-                      property.name,
+                      modifierProperty.name,
                       ts.factory.updateObjectLiteralExpression(
                         modifierProperty.initializer,
                         modifierProperty.initializer.properties.map(modifier => {
-                          const styleObj = parseStyleBlock(modifier, context);
-
-                          if (styleObj && modifier.name && Object.keys(styleObj).length) {
+                          const styleObj = parseStyleBlock(
+                            modifier,
+                            context,
+                            getClassName(stencilName, context)
+                          );
+
+                          if (styleObj && modifier.name) {
+                            const stencilClassName = getClassName(stencilName, context);
+                            const fullModifierName = getClassName(
+                              getVarName(modifier.name),
+                              context
+                            );
+                            const className = `${stencilClassName}.${fullModifierName.replace(
+                              `${stencilClassName}--`,
+                              ''
+                            )}`;
                             const initializer = createStyleReplacementNode(
+                              modifier,
                               styleObj,
-                              getClassName(modifier.name, context),
-                              fileName,
+                              className,
                               context
                             );
                             return updateStyleProperty(modifier, initializer);
@@ -185,6 +220,8 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
                   if (ts.isObjectLiteralExpression(element)) {
                     const selectors: string[] = [];
 
+                    selectors.push(`.${getClassName(stencilName, context)}`);
+
                     return ts.factory.updateObjectLiteralExpression(
                       element,
                       element.properties.map((compoundProperty, index, compoundProperties) => {
@@ -214,10 +251,17 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
                         ) {
                           compoundProperty.initializer.properties.forEach(modifier => {
                             if (ts.isPropertyAssignment(modifier)) {
-                              let className = `.${getClassName(modifier.initializer, context)}`;
+                              let className = '';
+                              if (ts.isIdentifier(modifier.name)) {
+                                className = slugify(modifier.name.text);
+                              }
+
+                              // The initializer should either be the `true` keyword or a string
+                              // literal. We don't add `-true` to the name.
                               if (ts.isStringLiteral(modifier.initializer)) {
                                 className += `-${modifier.initializer.text}`;
                               }
+
                               selectors.push(className);
                             }
                           });
@@ -230,10 +274,9 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
                           ts.isIdentifier(compoundProperty.name) &&
                           compoundProperty.name.text === 'styles'
                         ) {
-                          const styleObj = parseStyleBlock(compoundProperty, context);
+                          const styleObj = parseStyleBlock(compoundProperty, context, stencilName);
 
                           if (styleObj) {
-                            const serialized = serializeStyles(styleObj);
                             // We need to inject compound style selectors into a file. We'll compound the
                             // selectors with multiple class names. This will increase specificity of compound
                             // selectors. This will be harder to override and we don't increase specificity in
@@ -241,16 +284,13 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
                             // isn't known to anyone. It seems unreasonable to expect CSS users to remember to
                             // add compound modifier class names. We'll make it so it is easier to author
                             // components in CSS and let them sort the specificity issues.
+                            const serialized = serializeStyles(
+                              compoundProperty,
+                              styleObj,
+                              `${selectors.join('.')}{%s}`,
+                              context
+                            );
 
-                            if (serialized) {
-                              const {styles} = context;
-
-                              const styleOutput = compileCSS(
-                                `${selectors.join('')}{${serialized.styles}}`
-                              );
-                              styles[fileName] = styles[fileName] || [];
-                              styles[fileName].push(styleOutput);
-                            }
                             const initializer = createStyleObjectNode(
                               serialized.styles,
                               serialized.name
@@ -275,15 +315,11 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
         return property;
       });
 
-      // remove all our temp variables
-      // eslint-disable-next-line guard-for-in
-      for (const key in tempVariables) {
-        delete variables[key];
-      }
-
       return ts.factory.updateCallExpression(node, node.expression, undefined, [
         ts.factory.updateObjectLiteralExpression(config, configProperties),
-        ts.factory.createStringLiteral(stencilName),
+        ts.factory.createStringLiteral(
+          `${slugify(stencilName).replace('-stencil', '')}-${stencilHash}`
+        ),
       ]);
     }
   }
@@ -297,18 +333,25 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
  */
 function parseStyleBlock(
   property: ts.ObjectLiteralElementLike,
-  context: TransformerContext
+  context: TransformerContext,
+  stencilName: string
 ): NestedStyleObject | undefined {
   let styleObj: NestedStyleObject | undefined;
   if (ts.isPropertyAssignment(property)) {
     if (ts.isObjectLiteralExpression(property.initializer)) {
-      styleObj = parseObjectToStaticValue(property.initializer, context);
+      styleObj = parseObjectToStaticValue(property.initializer, {
+        ...context,
+        nameScope: `${stencilName}.`,
+      });
     }
 
     if (isFunctionLikeDeclaration(property.initializer)) {
       const returnNode = getReturnStatement(property.initializer);
       if (returnNode) {
-        styleObj = parseObjectToStaticValue(returnNode, context);
+        styleObj = parseObjectToStaticValue(returnNode, {
+          ...context,
+          nameScope: `${stencilName}.`,
+        });
       }
     }
   }
@@ -316,7 +359,10 @@ function parseStyleBlock(
   if (isFunctionLikeDeclaration(property)) {
     const returnNode = getReturnStatement(property);
     if (returnNode) {
-      styleObj = parseObjectToStaticValue(returnNode, context);
+      styleObj = parseObjectToStaticValue(returnNode, {
+        ...context,
+        nameScope: `${stencilName}.`,
+      });
     }
   }
 
@@ -350,23 +396,27 @@ function isFunctionLikeDeclaration(node: ts.Node): node is ts.FunctionLikeDeclar
 }
 
 function createStyleReplacementNode(
+  node: ts.Node,
   styleObj: NestedStyleObject,
   className: string,
-  fileName: string,
-  {styles}: TransformerContext
+  context: TransformerContext
 ) {
-  const serialized = serializeStyles(styleObj);
-  const styleOutput = compileCSS(`.${className}{${serialized.styles}}`);
-  styles[fileName] = styles[fileName] || [];
-  styles[fileName].push(styleOutput);
+  const {names, extractedNames} = context;
+  const serialized = serializeStyles(node, styleObj, `.${className}{%s}`, context);
+
+  const varName = getVarName(node);
+  const value = `css-${serialized.name}`;
+  names[varName] = value;
+  extractedNames[value] = getClassName(varName, context);
 
   return createStyleObjectNode(serialized.styles, serialized.name);
 }
 
-function getClassName(node: ts.Node, {prefix}: TransformerContext): string {
+export function getClassName(name: string, {prefix}: TransformerContext): string {
   return (
     `${prefix}-` +
-    slugify(getVarName(node))
+    slugify(name)
+      .replace('-vars', '')
       .replace('-stencil', '')
       .replace('-base', '')
       .replace('-modifiers', '-')
diff --git a/modules/styling-transform/lib/utils/handleCreateStyles.ts b/modules/styling-transform/lib/utils/handleCreateStyles.ts
index 166d3ecceb..e733b7b677 100644
--- a/modules/styling-transform/lib/utils/handleCreateStyles.ts
+++ b/modules/styling-transform/lib/utils/handleCreateStyles.ts
@@ -1,14 +1,14 @@
 import ts from 'typescript';
 
 import {parseObjectToStaticValue, parseStyleObjFromType} from './parseObjectToStaticValue';
-import {compileCSS, createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
+import {createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
 import {NestedStyleObject, NodeTransformer, TransformerContext} from './types';
 import {isImportedFromStyling} from './isImportedFromStyling';
 import {getVarName} from './getVarName';
 import {slugify} from '@workday/canvas-kit-styling';
 
 export const handleCreateStyles: NodeTransformer = (node, context) => {
-  const {checker, prefix, getFileName} = context;
+  const {checker, prefix} = context;
   /**
    * Check if the node is a call expression that looks like:
    *
@@ -54,12 +54,11 @@ export const handleCreateStyles: NodeTransformer = (node, context) => {
       .replace('-true', '')}`;
 
     const newArguments = [...node.arguments].map(arg => {
-      const fileName = getFileName(node.expression.getSourceFile().fileName);
       // An `ObjectLiteralExpression` is an object like `{foo:'bar'}`:
       // https://ts-ast-viewer.com/#code/MYewdgzgLgBFCmBbADjAvDA3gKBjAZiCAFwwDkARgIYBOZ2AvkA
       if (ts.isObjectLiteralExpression(arg)) {
         const styleObj = parseObjectToStaticValue(arg, context);
-        return createStyleReplacementNode(styleObj, cssClassName, fileName, context);
+        return createStyleReplacementNode(node, styleObj, cssClassName, context);
       }
       // An Identifier is a variable. It could come from anywhere - imports, earlier
       // assignments, etc. The easiest thing to do is to ask the TypeScript type checker what
@@ -75,7 +74,7 @@ export const handleCreateStyles: NodeTransformer = (node, context) => {
         // The type must be a object
         const styleObj = parseStyleObjFromType(type, context);
 
-        return createStyleReplacementNode(styleObj, cssClassName, fileName, context);
+        return createStyleReplacementNode(node, styleObj, cssClassName, context);
       }
       return arg;
     });
@@ -87,15 +86,12 @@ export const handleCreateStyles: NodeTransformer = (node, context) => {
 };
 
 function createStyleReplacementNode(
+  node: ts.Node,
   styleObj: NestedStyleObject,
   className: string,
-  fileName: string,
-  {styles}: TransformerContext
+  context: TransformerContext
 ) {
-  const serialized = serializeStyles(styleObj);
-  const styleOutput = compileCSS(`.${className}{${serialized.styles}}`);
-  styles[fileName] = styles[fileName] || [];
-  styles[fileName].push(styleOutput);
+  const serialized = serializeStyles(node, styleObj, `.${className}{%s}`, context);
 
   return createStyleObjectNode(serialized.styles, serialized.name);
 }
diff --git a/modules/styling-transform/lib/utils/handleCreateVars.ts b/modules/styling-transform/lib/utils/handleCreateVars.ts
index ebca7c5238..311239efd4 100644
--- a/modules/styling-transform/lib/utils/handleCreateVars.ts
+++ b/modules/styling-transform/lib/utils/handleCreateVars.ts
@@ -3,10 +3,10 @@ import ts from 'typescript';
 import {slugify} from '@workday/canvas-kit-styling';
 
 import {getVarName} from './getVarName';
-import {makeEmotionSafe} from './makeEmotionSafe';
-import {NodeTransformer} from './types';
+import {NodeTransformer, TransformerContext} from './types';
+import {getHash} from './getHash';
 
-export const handleCreateVars: NodeTransformer = (node, {prefix, variables}) => {
+export const handleCreateVars: NodeTransformer = (node, context) => {
   /**
    * This will create a variable
    */
@@ -15,14 +15,7 @@ export const handleCreateVars: NodeTransformer = (node, {prefix, variables}) =>
     ts.isIdentifier(node.expression) &&
     node.expression.text === 'createVars'
   ) {
-    const id = slugify(getVarName(node)).replace('-vars', '');
-    const vars = node.arguments
-      .map(arg => ts.isStringLiteral(arg) && arg.text)
-      .filter(Boolean) as string[];
-
-    vars.forEach(v => {
-      variables[`${id}-${makeEmotionSafe(v)}`] = `--${prefix}-${id}-${makeEmotionSafe(v)}`;
-    });
+    const {id, vars} = addNames(node, context);
 
     return ts.factory.updateCallExpression(
       node,
@@ -33,7 +26,7 @@ export const handleCreateVars: NodeTransformer = (node, {prefix, variables}) =>
           [
             ts.factory.createPropertyAssignment(
               ts.factory.createIdentifier('id'),
-              ts.factory.createStringLiteral(`${prefix}-${id}`)
+              ts.factory.createStringLiteral(id)
             ),
             ts.factory.createPropertyAssignment(
               ts.factory.createIdentifier('args'),
@@ -49,5 +42,49 @@ export const handleCreateVars: NodeTransformer = (node, {prefix, variables}) =>
     );
   }
 
+  /**
+   * Check to see if this node is an ObjectLiteralExpression with properties with `createVars`
+   * values.
+   *
+   * ```ts
+   * const foo = {
+   *   bar: createVars('color')
+   * }
+   * ```
+   *
+   * This happens when names are imported from other files. We don't need to transform this, but
+   * we'll need to add names for property parsing.
+   */
+  if (ts.isObjectLiteralExpression(node)) {
+    node.properties.forEach(property => {
+      if (
+        ts.isPropertyAssignment(property) &&
+        ts.isCallExpression(property.initializer) &&
+        ts.isIdentifier(property.initializer.expression) &&
+        property.initializer.expression.text === 'createVars'
+      ) {
+        addNames(property.initializer, context);
+      }
+    });
+  }
+
   return;
 };
+
+function addNames(node: ts.CallExpression, context: TransformerContext) {
+  const {prefix, names, extractedNames} = context;
+  const hash = getHash(node, context);
+
+  const varNamePrefix = getVarName(node);
+  const vars = node.arguments
+    .map(arg => ts.isStringLiteral(arg) && arg.text)
+    .filter(Boolean) as string[];
+
+  vars.forEach(v => {
+    const varName = `${varNamePrefix}.${v}`;
+    names[varName] = `--${v}-${hash}`;
+    extractedNames[names[varName]] = `--${prefix}-${slugify(varName).replace('-vars', '')}`;
+  });
+
+  return {id: hash, vars};
+}
diff --git a/modules/styling-transform/lib/utils/handleCssVar.ts b/modules/styling-transform/lib/utils/handleCssVar.ts
index b8abb35abe..18e2c16d76 100644
--- a/modules/styling-transform/lib/utils/handleCssVar.ts
+++ b/modules/styling-transform/lib/utils/handleCssVar.ts
@@ -12,7 +12,7 @@ export const handleCssVar = createPropertyTransform((node, context) => {
   ) {
     const args = node.arguments.map(arg => parseNodeToStaticValue(arg, context));
 
-    return cssVar(args[0] as string, (args[1] as string) || context.variables[args[0]]);
+    return cssVar(args[0] as string, (args[1] as string) || context.names[args[0]]);
   }
 
   return;
diff --git a/modules/styling-transform/lib/utils/handleInjectGlobal.ts b/modules/styling-transform/lib/utils/handleInjectGlobal.ts
index 8444521b8e..95d665d470 100644
--- a/modules/styling-transform/lib/utils/handleInjectGlobal.ts
+++ b/modules/styling-transform/lib/utils/handleInjectGlobal.ts
@@ -2,12 +2,12 @@ import ts from 'typescript';
 
 import {isImportedFromStyling} from './isImportedFromStyling';
 import {parseObjectToStaticValue} from './parseObjectToStaticValue';
-import {compileCSS, createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
+import {createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
 import {NestedStyleObject, NodeTransformer, TransformerContext} from './types';
 import {parseNodeToStaticValue} from './parseNodeToStaticValue';
 
 export const handleInjectGlobal: NodeTransformer = (node, context) => {
-  const {checker, getFileName} = context;
+  const {checker} = context;
 
   if (
     ts.isTaggedTemplateExpression(node) &&
@@ -15,11 +15,10 @@ export const handleInjectGlobal: NodeTransformer = (node, context) => {
     node.tag.text === 'injectGlobal' &&
     isImportedFromStyling(node.tag, checker)
   ) {
-    const fileName = getFileName(node.getSourceFile()?.fileName || context.fileName);
-    const styleObj = parseNodeToStaticValue(node.template, context).toString(); //?
+    const styleObj = parseNodeToStaticValue(node.template, context).toString();
 
     return ts.factory.createCallExpression(node.tag, undefined, [
-      createStyleReplacementNode(styleObj, fileName, context),
+      createStyleReplacementNode(node, styleObj, context),
     ]);
   }
 
@@ -30,11 +29,10 @@ export const handleInjectGlobal: NodeTransformer = (node, context) => {
     isImportedFromStyling(node.expression, checker)
   ) {
     if (ts.isObjectLiteralExpression(node.arguments[0])) {
-      const fileName = getFileName(node.expression.getSourceFile()?.fileName || context.fileName);
       const styleObj = parseObjectToStaticValue(node.arguments[0], context);
 
       return ts.factory.updateCallExpression(node, node.expression, undefined, [
-        createStyleReplacementNode(styleObj, fileName, context),
+        createStyleReplacementNode(node, styleObj, context),
       ]);
     }
   }
@@ -43,14 +41,11 @@ export const handleInjectGlobal: NodeTransformer = (node, context) => {
 };
 
 function createStyleReplacementNode(
+  node: ts.Node,
   styleObj: NestedStyleObject | string,
-  fileName: string,
-  {styles}: TransformerContext
+  context: TransformerContext
 ) {
-  const serialized = serializeStyles(styleObj); //?
-  const styleOutput = compileCSS(serialized.styles);
-  styles[fileName] = styles[fileName] || [];
-  styles[fileName].push(styleOutput);
+  const serialized = serializeStyles(node, styleObj, '%s', context);
 
   return createStyleObjectNode(serialized.styles, serialized.name);
 }
diff --git a/modules/styling-transform/lib/utils/handleKeyframes.ts b/modules/styling-transform/lib/utils/handleKeyframes.ts
index 50c03045d0..fbe9962031 100644
--- a/modules/styling-transform/lib/utils/handleKeyframes.ts
+++ b/modules/styling-transform/lib/utils/handleKeyframes.ts
@@ -3,12 +3,12 @@ import ts from 'typescript';
 import {NestedStyleObject, NodeTransformer, TransformerContext} from './types';
 import {parseNodeToStaticValue} from './parseNodeToStaticValue';
 import {getVarName} from './getVarName';
-import {compileCSS, createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
+import {createStyleObjectNode, serializeStyles} from './createStyleObjectNode';
 import {isImportedFromStyling} from './isImportedFromStyling';
 import {parseObjectToStaticValue} from './parseObjectToStaticValue';
 
 export const handleKeyframes: NodeTransformer = (node, context) => {
-  const {checker, getFileName} = context;
+  const {checker} = context;
   // keyframes`css`
   if (
     ts.isTaggedTemplateExpression(node) &&
@@ -16,13 +16,12 @@ export const handleKeyframes: NodeTransformer = (node, context) => {
     node.tag.text === 'keyframes' &&
     isImportedFromStyling(node.tag, checker)
   ) {
-    const fileName = getFileName(node.getSourceFile()?.fileName || context.fileName);
     // parseNodeToStaticValue can parse templates. Pass it through there to get a single static string
     const styleObj = parseNodeToStaticValue(node.template, context).toString();
     const identifierName = getVarName(node);
 
     return ts.factory.createCallExpression(node.tag, undefined, [
-      createStyleReplacementNode(styleObj, identifierName, fileName, context),
+      createStyleReplacementNode(node, styleObj, identifierName, context),
     ]);
   }
 
@@ -34,12 +33,11 @@ export const handleKeyframes: NodeTransformer = (node, context) => {
     isImportedFromStyling(node.expression, checker)
   ) {
     if (ts.isObjectLiteralExpression(node.arguments[0])) {
-      const fileName = getFileName(node.expression.getSourceFile()?.fileName || context.fileName);
       const styleObj = parseObjectToStaticValue(node.arguments[0], context);
       const identifierName = getVarName(node);
 
       return ts.factory.updateCallExpression(node, node.expression, undefined, [
-        createStyleReplacementNode(styleObj, identifierName, fileName, context),
+        createStyleReplacementNode(node, styleObj, identifierName, context),
       ]);
     }
   }
@@ -48,18 +46,15 @@ export const handleKeyframes: NodeTransformer = (node, context) => {
 };
 
 function createStyleReplacementNode(
+  node: ts.Node,
   styleObj: NestedStyleObject | string,
   identifierName: string,
-  fileName: string,
-  {styles, keyframes}: TransformerContext
+  context: TransformerContext
 ) {
-  const serialized = serializeStyles(styleObj);
+  const serialized = serializeStyles(node, styleObj, `@keyframes animation-%n{%s}`, context);
   const animationName = `animation-${serialized.name}`;
-  const styleOutput = compileCSS(`@keyframes ${animationName}{${serialized.styles}}`);
-  styles[fileName] = styles[fileName] || [];
-  styles[fileName].push(styleOutput);
 
-  keyframes[identifierName] = animationName;
+  context.names[identifierName] = animationName;
 
   return createStyleObjectNode(serialized.styles, serialized.name);
 }
diff --git a/modules/styling-transform/lib/utils/handleParentModifier.ts b/modules/styling-transform/lib/utils/handleParentModifier.ts
new file mode 100644
index 0000000000..4de8cea075
--- /dev/null
+++ b/modules/styling-transform/lib/utils/handleParentModifier.ts
@@ -0,0 +1,29 @@
+import ts from 'typescript';
+
+import {parentModifier} from '@workday/canvas-kit-styling';
+import {createPropertyTransform} from '../createPropertyTransform';
+import {parseNodeToStaticValue} from './parseNodeToStaticValue';
+
+export const handleParentModifier = createPropertyTransform((node, context) => {
+  const {names, extractedNames} = context;
+
+  if (
+    ts.isComputedPropertyName(node) &&
+    ts.isCallExpression(node.expression) &&
+    ts.isIdentifier(node.expression.expression) &&
+    node.expression.expression.text === 'parentModifier'
+  ) {
+    const args = node.expression.arguments.map(arg => parseNodeToStaticValue(arg, context));
+    const hash = args[0].toString().replace('css-', 'm');
+
+    // add a mapping from `css-{hash}` to `{hash}` for extraction string replacement
+    names[args[0]] = hash;
+
+    // map the `{hash}` to the extracted CSS class name
+    extractedNames[hash] = extractedNames[args[0]];
+
+    return parentModifier(args[0].toString());
+  }
+
+  return;
+});
diff --git a/modules/styling-transform/lib/utils/injectStyles.ts b/modules/styling-transform/lib/utils/injectStyles.ts
new file mode 100644
index 0000000000..7753107f4b
--- /dev/null
+++ b/modules/styling-transform/lib/utils/injectStyles.ts
@@ -0,0 +1,14 @@
+import {TransformerContext} from './types';
+
+export function injectStyles(
+  {styles, cache}: TransformerContext,
+  fileName: string,
+  hash: string,
+  styleOutput: string
+) {
+  if (!cache[hash]) {
+    styles[fileName] = styles[fileName] || [];
+    styles[fileName].push(styleOutput);
+    cache[hash] = styleOutput;
+  }
+}
diff --git a/modules/styling-transform/lib/utils/makeEmotionSafe.ts b/modules/styling-transform/lib/utils/makeEmotionSafe.ts
deleted file mode 100644
index 0d18ccbcdb..0000000000
--- a/modules/styling-transform/lib/utils/makeEmotionSafe.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Util function to fix an issue with Emotion by
- * appending `EmotionIssue#3066` to end of css variable
- * See issue: [#3066](https://github.com/emotion-js/emotion/issues/3066)
- */
-export function makeEmotionSafe(key: string): string {
-  if (key.endsWith('label')) {
-    return `${key}-emotion-safe`;
-  }
-  return key;
-}
diff --git a/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts b/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts
index cc5c95b1e6..e4bc76aaf3 100644
--- a/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts
+++ b/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts
@@ -2,7 +2,6 @@ import ts from 'typescript';
 
 import {slugify} from '@workday/canvas-kit-styling';
 
-import {makeEmotionSafe} from './makeEmotionSafe';
 import {getErrorMessage} from './getErrorMessage';
 import {TransformerContext} from './types';
 
@@ -19,7 +18,7 @@ export function parseNodeToStaticValue(
   node: ts.Node,
   context: TransformerContext
 ): string | number {
-  const {checker, variables, keyframes} = context;
+  const {checker} = context;
 
   const value = handlePropertyTransforms(node, context);
   if (value) {
@@ -45,37 +44,48 @@ export function parseNodeToStaticValue(
 
   // a.b
   if (ts.isPropertyAccessExpression(node)) {
-    const varName = getCSSVariableKey(getPropertyAccessExpressionText(node));
+    getPropertyAccessExpressionText(node);
+    const varName = getPropertyAccessExpressionText(node);
 
-    if (variables[varName]) {
-      return variables[varName];
-    }
+    const value =
+      getValueFromProcessedNodes(varName, context) ||
+      getValueFromAliasedSymbol(node, varName, context);
 
-    if (keyframes[varName]) {
-      return keyframes[varName];
+    if (value) {
+      return value;
     }
   }
 
   if (ts.isComputedPropertyName(node) && ts.isIdentifier(node.expression)) {
     const varName = node.expression.text;
 
-    if (variables[varName]) {
-      return variables[varName];
+    const value =
+      getValueFromProcessedNodes(varName, context) ||
+      getValueFromAliasedSymbol(node, varName, context);
+
+    if (value) {
+      return value;
     }
   }
+
   // [a.b]
   if (ts.isComputedPropertyName(node) && ts.isPropertyAccessExpression(node.expression)) {
-    const varName = getCSSVariableKey(getPropertyAccessExpressionText(node.expression));
+    const varName = getPropertyAccessExpressionText(node.expression);
 
-    if (variables[varName]) {
-      return variables[varName];
-    }
+    const value =
+      getValueFromProcessedNodes(varName, context) ||
+      getValueFromAliasedSymbol(node, varName, context);
 
-    if (keyframes[varName]) {
-      return keyframes[varName];
+    if (value) {
+      return value;
     }
   }
 
+  // [`${a.b} &`]
+  if (ts.isComputedPropertyName(node) && ts.isTemplateExpression(node.expression)) {
+    return getStyleValueFromTemplateExpression(node.expression, context);
+  }
+
   /**
    * ```ts
    * `border 1px ${myVars.colors.border}`
@@ -90,12 +100,12 @@ export function parseNodeToStaticValue(
    * moving on. This typically happens in stencils.
    */
   if (ts.isIdentifier(node)) {
-    if (variables[node.text]) {
-      return variables[node.text];
-    }
+    const value =
+      getValueFromProcessedNodes(node.text, context) ||
+      getValueFromAliasedSymbol(node, node.text, context);
 
-    if (keyframes[node.text]) {
-      return keyframes[node.text];
+    if (value) {
+      return value;
     }
   }
 
@@ -149,7 +159,7 @@ function parseTypeToStaticValue(type: ts.Type): string | number | void {
 
 function getCSSVariableKey(text: string): string {
   const [id, name] = getVariableNameParts(text);
-  return `${slugify(id)}-${makeEmotionSafe(name)}`;
+  return `${slugify(id)}-${name}`;
 }
 
 /**
@@ -160,10 +170,6 @@ function getCSSVariableKey(text: string): string {
 function getPropertyAccessExpressionText(node: ts.PropertyAccessExpression): string {
   if (ts.isIdentifier(node.name)) {
     if (ts.isIdentifier(node.expression)) {
-      if (node.name.text === 'vars') {
-        // skip vars in name for stencil generated variables
-        return `${node.expression.text}`;
-      }
       return `${node.expression.text}.${node.name.text}`;
     }
     if (ts.isPropertyAccessExpression(node.expression)) {
@@ -179,7 +185,7 @@ function getVariableNameParts(input: string): [string, string] {
   // grab the last item in the array. This will also mutate the array, removing the last item
   const variable = parts.pop()!;
 
-  return [parts.join('.').replace(/(vars|stencil|styles)/i, ''), variable];
+  return [parts.join('.'), variable];
 }
 
 /**
@@ -212,3 +218,71 @@ function getStyleValueFromTemplateExpression(
 
   return '';
 }
+
+/**
+ * Get a value from an aliased symbol, if it exists. An aliased symbol comes from
+ */
+export function getValueFromAliasedSymbol(
+  node: ts.Node,
+  varName: string,
+  context: TransformerContext
+): string | void {
+  const {checker, transform} = context;
+  let symbolNode: ts.Node | undefined;
+
+  if (ts.isIdentifier(node)) {
+    // base case is the node is an identifier
+    symbolNode = node;
+  }
+
+  if (ts.isPropertyAccessExpression(node) && ts.isIdentifier(node.name)) {
+    return getValueFromAliasedSymbol(node.expression, varName, context);
+  }
+
+  if (ts.isComputedPropertyName(node)) {
+    return getValueFromAliasedSymbol(node.expression, varName, context);
+  }
+
+  if (symbolNode) {
+    const symbol = checker.getSymbolAtLocation(symbolNode);
+    let declaration: ts.Declaration | undefined;
+
+    if (symbol?.valueDeclaration) {
+      // If the symbol has a value declaration, we'll use that declaration
+      declaration = symbol.valueDeclaration;
+    } else if (symbol && symbol.getFlags() & ts.SymbolFlags.Alias) {
+      // If the symbol does not have a value declaration, we'll check if there's a aliased symbol
+      // linking to the value declaration.
+      declaration = checker.getAliasedSymbol(symbol).valueDeclaration;
+    }
+    // If there is an aliased symbol and it is a variable declaration, try to resolve the
+    if (declaration && hasExpression(declaration)) {
+      if (declaration.initializer) {
+        // Update the `prefix` to the alias declaration's source file.
+        const aliasFileContext = {
+          ...context,
+          prefix: context.getPrefix(declaration.getSourceFile().fileName),
+        };
+        transform(declaration.initializer, aliasFileContext);
+
+        return getValueFromProcessedNodes(varName, aliasFileContext);
+      }
+    }
+  }
+}
+
+function getValueFromProcessedNodes(varName: string, context: TransformerContext): string | void {
+  const {names} = context;
+
+  if (names[varName]) {
+    return names[varName];
+  }
+
+  if (context.nameScope && names[`${context.nameScope}${varName}`]) {
+    return names[`${context.nameScope}${varName}`];
+  }
+}
+
+function hasExpression(node: ts.Node): node is ts.Node & {initializer: ts.Expression} {
+  return 'initializer' in node;
+}
diff --git a/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts b/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts
index 7e307a1b0b..af4ed5fb28 100644
--- a/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts
+++ b/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts
@@ -30,7 +30,7 @@ function wrapStyleObj(styleObj: NestedStyleObject, context: TransformerContext):
         styleObj[key] = wrapStyleObj(value, context);
       }
       if (typeof value === 'string') {
-        styleObj[key] = maybeWrapCSSVariables(value, context.variables);
+        styleObj[key] = maybeWrapCSSVariables(value, context.names);
       }
     }
   }
@@ -105,12 +105,20 @@ function parsePropertyToStaticValue(node: ts.Node, context: TransformerContext):
     }
   }
 
+  // { name }
+  if (ts.isShorthandPropertyAssignment(node)) {
+    const key = node.name.text;
+
+    styleObj[key] = parseNodeToStaticValue(node.name, context).toString() || '';
+
+    return styleObj;
+  }
+
   // { ...value }
   if (ts.isSpreadAssignment(node)) {
     // Spread assignments are a bit complicated to use the AST to figure out, so we'll ask the
     // TypeScript type checker.
     const type = context.checker.getTypeAtLocation(node.expression);
-    context.checker.typeToString(type);
     return parseStyleObjFromType(type, context);
   }
 
@@ -157,7 +165,7 @@ export function parseStyleObjFromType(type: ts.Type, context: TransformerContext
  */
 export function maybeWrapCSSVariables(
   input: string | number,
-  variables: Record<string, string>
+  names: Record<string, string>
 ): string | number {
   if (typeof input === 'number') {
     return input;
@@ -173,9 +181,9 @@ export function maybeWrapCSSVariables(
       }
 
       // find a possible fallback
-      const fallbackVariable = getFallbackVariable(variable, variables);
+      const fallbackVariable = getFallbackVariable(variable, names);
       const fallback = fallbackVariable
-        ? `, ${maybeWrapCSSVariables(fallbackVariable, variables)}`
+        ? `, ${maybeWrapCSSVariables(fallbackVariable, names)}`
         : '';
 
       // if this a var wrapper without a fallback
diff --git a/modules/styling-transform/lib/utils/types.ts b/modules/styling-transform/lib/utils/types.ts
index 2af2b8045c..3f01f35a6f 100644
--- a/modules/styling-transform/lib/utils/types.ts
+++ b/modules/styling-transform/lib/utils/types.ts
@@ -3,13 +3,77 @@ import ts from 'typescript';
 export type TransformerContext = {
   checker: ts.TypeChecker;
   prefix: string;
-  variables: Record<string, string>;
-  keyframes: Record<string, string>;
+  getPrefix: (path: string) => string;
+  /**
+   * Name and value pairs for things that cannot be statically resolved via the type system. The
+   * name is resolved via `getPropertyAccessExpressionText` and the value can be anything. It should
+   * be whatever you want the runtime value to be, which is usually a hash. For example:
+   *
+   * ```ts
+   * const myVars = createVars('color');
+   *
+   * color: myVars.color
+   * ```
+   *
+   * The type of `myVars.color` is `string`, but both in runtime and transpile time, the
+   * `myVars.color` is resolved to a hard value. The `names` cache is a lookup to that value. The
+   * `names` cache does not track the AST of `color`, so `const {color} = myVars` will not work. The
+   * key comes from `getPropertyAccessExpressionText` which replaces `.` with `-`.
+   */
+  names: Record<string, string>;
+  /**
+   * Extracted names is a mapping from `names` to a value that will be output to CSS. If you add an
+   * entry to `names`, add an entry to `extractedNames` where the `key` of `extractedNames` is the
+   * `value` of `names`.
+   *
+   * For example:
+   * ```ts
+   * // names
+   * { "myVars.foo": "--css-12345" },
+   * // extractedNames
+   * { "--css-12345": "--css-my-vars-foo" }
+   * ```
+   *
+   * The value in `names` will be used for transformation of TypeScript files into JavaScript files.
+   * The `extractedNames` will be used for the output CSS files.
+   */
+  extractedNames: Record<string, string>;
+  /**
+   * Variable scoping allows for a variable lookup to match a predefined scope. For example, in
+   * stencils, the `base` config can take a function with the locally defined variable names.
+   *
+   * ```ts
+   * const myStencil = createStencil({
+   *   vars: {color: 'red'},
+   *   base({color}) {
+   *     return {
+   *       [color]: 'blue'
+   *     }
+   *   }
+   * })
+   * ```
+   *
+   * In this case, a name lookup would fail because there's no global name named `color`. There's a
+   * global name named `my-color` which is the fully-qualified name. The stencil parser will add
+   * `my-` as a name scoping when processing style attributes for name lookup purposes.
+   */
+  nameScope?: string;
+  /**
+   * All styles will be collected here. These styles will then be flushed out to CSS files according
+   * to the `getFileName` function.
+   */
   styles: StylesOutput;
+  /**
+   * The cache is for idempotent style inserts. Styles are hashed based on file name and position in
+   * the file.
+   */
+  cache: Record<string, string>;
   getFileName: (path: string) => string;
   objectTransforms: ObjectTransform[];
   propertyTransforms: PropertyTransform[];
   fileName: string;
+  transform: NodeTransformer;
+  extractCSS: boolean;
 };
 
 export type NestedStyleObject = {[key: string]: number | string | NestedStyleObject};
@@ -102,6 +166,14 @@ export interface Config {
    * return new AST.
    */
   additionalTransforms?: NodeTransformer[];
+
+  /**
+   * Should the CSS be statically extracted into CSS files? If `true`, CSS files will be created
+   * according to the `getFileName` configuration. If `getFileName` is not defined, a CSS file will
+   * be created with the same name as the source file with a `.css` extension.
+   */
+  extractCSS?: boolean;
+
   /**
    * This will be called every time a style or keyframe needs to be injected into extracted style
    * files. By default, the file name will be the current file with the `.tsx` replaced with a
@@ -120,7 +192,20 @@ export interface Config {
    */
   objectTransforms?: ObjectTransform[];
 
+  /**
+   * Property transforms take an AST node that represents a style property value and turn it into a
+   * static string. The transform is static and will generate a CSS style string for injection
+   * directly into the browser (or CSS file). A string is the only valid return type. Returning
+   * `void` instructs the transform to move on to other transforms. Returning a string will
+   * short-circuit other property transforms or the default property transform.
+   */
   propertyTransforms?: PropertyTransform[];
+
+  /**
+   * Optional function for getting a prefix given a file path. This is useful if you want to have a
+   * different prefix for each module in a monorepo.
+   */
+  getPrefix?: (path: string) => string;
 }
 
 export type ObjectTransform = (
diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json
index 8d178ddc95..64f6fbdd5c 100644
--- a/modules/styling-transform/package.json
+++ b/modules/styling-transform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-styling-transform",
-  "version": "10.3.60",
+  "version": "11.1.10",
   "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -34,7 +34,8 @@
   ],
   "dependencies": {
     "@emotion/serialize": "^1.0.2",
-    "@workday/canvas-kit-styling": "^10.3.60",
+    "@workday/canvas-kit-styling": "^11.1.10",
+    "@workday/canvas-tokens-web": "^2.0.0",
     "stylis": "4.0.13",
     "typescript": "4.2"
   },
diff --git a/modules/styling-transform/spec/createProgramFromSource.ts b/modules/styling-transform/spec/createProgramFromSource.ts
index 5f58a0db2d..54682c6ca6 100644
--- a/modules/styling-transform/spec/createProgramFromSource.ts
+++ b/modules/styling-transform/spec/createProgramFromSource.ts
@@ -35,6 +35,12 @@ export function cssVar(input: string): string;
 export function createStyles(...args: any[]): string;
 `;
 
+function getLocalFileName(sources: {filename: string}[], name: string): string | undefined {
+  return sources.find(
+    file => file.filename === name.replace(path.resolve(__dirname, '../../..') + '/', '')
+  )?.filename;
+}
+
 export function createProgramFromSource(source: string): ts.Program;
 export function createProgramFromSource(filename: string, source: string): ts.Program;
 export function createProgramFromSource(sources: {filename: string; source: string}[]): ts.Program;
@@ -65,7 +71,8 @@ export function createProgramFromSource(...args: any[]) {
   const customCompilerHost: ts.CompilerHost = {
     getSourceFile: (name, languageVersion) => {
       // Get the file from our mock list, but read source lib files
-      const mockedFile = sourceFiles.find(s => s.fileName === name);
+      const mockedFile = sourceFiles.find(s => s.fileName === getLocalFileName(sources, name));
+
       if (mockedFile) {
         return mockedFile;
       }
@@ -73,7 +80,7 @@ export function createProgramFromSource(...args: any[]) {
       if (name.startsWith('lib')) {
         return ts.createSourceFile(
           name,
-          ts.sys.readFile(`node_modules/typescript/lib/${name}`),
+          ts.sys.readFile(`node_modules/typescript/lib/${name}`)!,
           languageVersion
         );
       }
@@ -96,7 +103,10 @@ export function createProgramFromSource(...args: any[]) {
     getDirectories: path => ts.sys.getDirectories(path),
     // This should be kept up to date with getSourceFile()
     fileExists: fileName => {
-      return !!sourceFiles.find(s => s.fileName === fileName) || ts.sys.fileExists(fileName);
+      return (
+        sourceFiles.some(s => s.fileName === getLocalFileName(sources, fileName)) ||
+        ts.sys.fileExists(fileName)
+      );
     },
     readFile: fileName => ts.sys.readFile(fileName),
   };
diff --git a/modules/styling-transform/spec/findNodes.ts b/modules/styling-transform/spec/findNodes.ts
index 57c4f2d5d4..3ec1e15176 100644
--- a/modules/styling-transform/spec/findNodes.ts
+++ b/modules/styling-transform/spec/findNodes.ts
@@ -25,7 +25,10 @@ export function findNodes<N extends (node: ts.Node) => boolean>(
   node.forEachChild(child => {
     // The AST doesn't have parent nodes, but they are required for testing purposes.
     (child as any).parent = node;
-    nodes.push(...findNodes(child, name, predicate));
+    const childNodes = findNodes(child, name, predicate);
+    if (childNodes) {
+      nodes.push(...childNodes);
+    }
   });
 
   return nodes as any;
diff --git a/modules/styling-transform/spec/utils/getErrorMessage.spec.ts b/modules/styling-transform/spec/utils/getErrorMessage.spec.ts
index ddc6090169..2a1eddec1b 100644
--- a/modules/styling-transform/spec/utils/getErrorMessage.spec.ts
+++ b/modules/styling-transform/spec/utils/getErrorMessage.spec.ts
@@ -14,8 +14,8 @@ describe('getErrorMessage', () => {
       };
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'baz', ts.isIdentifier)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, 'baz', ts.isIdentifier)![0];
 
     const ctx = withDefaultContext(program.getTypeChecker(), {});
 
diff --git a/modules/styling-transform/spec/utils/getVarName.spec.ts b/modules/styling-transform/spec/utils/getVarName.spec.ts
index 5e0a82d57d..b67510a1e2 100644
--- a/modules/styling-transform/spec/utils/getVarName.spec.ts
+++ b/modules/styling-transform/spec/utils/getVarName.spec.ts
@@ -11,9 +11,9 @@ describe('getVarName', () => {
       const foo = 'bar';
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
+    const sourceFile = program.getSourceFile('test.ts')!;
 
-    const node = findNodes(sourceFile, 'foo', ts.isVariableDeclaration)[0];
+    const node = findNodes(sourceFile, 'foo', ts.isVariableDeclaration)![0];
 
     expect(getVarName(node)).toEqual('foo');
   });
@@ -28,11 +28,11 @@ describe('getVarName', () => {
       };
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
+    const sourceFile = program.getSourceFile('test.ts')!;
 
-    const node = findNodes(sourceFile, 'baz', ts.isPropertyAssignment)[0];
+    const node = findNodes(sourceFile, 'baz', ts.isPropertyAssignment)![0];
 
-    expect(getVarName(node)).toEqual('foo-bar-baz');
+    expect(getVarName(node)).toEqual('foo.bar.baz');
   });
 
   it('should get the correct CSS variable name of a nested PropertyAssignment with functions', () => {
@@ -45,11 +45,11 @@ describe('getVarName', () => {
       });
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
+    const sourceFile = program.getSourceFile('test.ts')!;
 
-    const node = findNodes(sourceFile, 'baz', ts.isPropertyAssignment)[0];
+    const node = findNodes(sourceFile, 'baz', ts.isPropertyAssignment)![0];
 
-    expect(getVarName(node)).toEqual('foo-bar-baz');
+    expect(getVarName(node)).toEqual('foo.bar.baz');
   });
 
   it('should get the correct CSS variable name of a nested PropertyAssignment with functions', () => {
@@ -62,10 +62,10 @@ describe('getVarName', () => {
       };
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
+    const sourceFile = program.getSourceFile('test.ts')!;
 
-    const node = findNodes(sourceFile, 'baz', ts.isPropertyAssignment)[0];
+    const node = findNodes(sourceFile, 'baz', ts.isPropertyAssignment)![0];
 
-    expect(getVarName(node.name)).toEqual('foo-bar-baz');
+    expect(getVarName(node.name)).toEqual('foo.bar.baz');
   });
 });
diff --git a/modules/styling-transform/spec/utils/handleCalc.spec.ts b/modules/styling-transform/spec/utils/handleCalc.spec.ts
index 2cbf657b3d..542d4a48e9 100644
--- a/modules/styling-transform/spec/utils/handleCalc.spec.ts
+++ b/modules/styling-transform/spec/utils/handleCalc.spec.ts
@@ -15,8 +15,8 @@ describe('handleCalc', () => {
       calc.add('20px', '2rem')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(node, withDefaultContext(program.getTypeChecker()));
 
@@ -30,8 +30,8 @@ describe('handleCalc', () => {
       calc.add(foo, '2rem')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(node, withDefaultContext(program.getTypeChecker()));
 
@@ -43,13 +43,13 @@ describe('handleCalc', () => {
       calc.add(myVars.foo, '2rem')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'my-foo': '--foo'},
+        names: {'myVars.foo': '--foo'},
       })
     );
 
@@ -61,8 +61,8 @@ describe('handleCalc', () => {
       calc.subtract('20px', '2rem')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(node, withDefaultContext(program.getTypeChecker()));
 
@@ -76,8 +76,8 @@ describe('handleCalc', () => {
       calc.subtract(foo, '2rem')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(node, withDefaultContext(program.getTypeChecker()));
 
@@ -89,13 +89,13 @@ describe('handleCalc', () => {
       calc.subtract(myVars.foo, '2rem')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'my-foo': '--foo'},
+        names: {'myVars.foo': '--foo'},
       })
     );
 
@@ -107,8 +107,8 @@ describe('handleCalc', () => {
       calc.multiply('20px', '2')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(node, withDefaultContext(program.getTypeChecker()));
 
@@ -122,8 +122,8 @@ describe('handleCalc', () => {
       calc.multiply(foo, '2')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(node, withDefaultContext(program.getTypeChecker()));
 
@@ -135,13 +135,13 @@ describe('handleCalc', () => {
       calc.multiply(myVars.foo, '2')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'my-foo': '--foo'},
+        names: {'myVars.foo': '--foo'},
       })
     );
 
@@ -153,8 +153,8 @@ describe('handleCalc', () => {
       calc.divide('20px', '2')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(node, withDefaultContext(program.getTypeChecker()));
 
@@ -168,8 +168,8 @@ describe('handleCalc', () => {
       calc.divide(foo, '2')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(node, withDefaultContext(program.getTypeChecker()));
 
@@ -181,13 +181,13 @@ describe('handleCalc', () => {
       calc.divide(myVars.foo, '2')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'my-foo': '--foo'},
+        names: {'myVars.foo': '--foo'},
       })
     );
 
@@ -199,8 +199,8 @@ describe('handleCalc', () => {
       calc.negate('20px')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(node, withDefaultContext(program.getTypeChecker()));
 
@@ -214,8 +214,8 @@ describe('handleCalc', () => {
       calc.negate(foo)
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(node, withDefaultContext(program.getTypeChecker()));
 
@@ -227,13 +227,13 @@ describe('handleCalc', () => {
       calc.negate(myVars.foo)
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isCallExpression)![0];
 
     const result = handleCalc(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'my-foo': '--foo'},
+        names: {'myVars.foo': '--foo'},
       })
     );
 
diff --git a/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts b/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts
index 1904ce2c6d..3d71e360f2 100644
--- a/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts
+++ b/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts
@@ -4,345 +4,1231 @@ import {findNodes} from '../findNodes';
 import {createProgramFromSource} from '../createProgramFromSource';
 
 import {handleCreateStencil} from '../../lib/utils/handleCreateStencil';
-import {transform, withDefaultContext} from '../../lib/styleTransform';
+import {transform, withDefaultContext, _reset} from '../../lib/styleTransform';
 import {compileCSS} from '../../lib/utils/createStyleObjectNode';
 
+function getFile<K extends string, T extends Record<K, any>>(styles: T, name: string): T[K] | void {
+  for (const style in styles) {
+    if (style.includes(name)) {
+      // @ts-ignore
+      return styles[style];
+    }
+  }
+}
+
 describe('handleCreateStencil', () => {
-  it('should add a variable to the cache when the arguments are strings', () => {
-    const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
-
-      const buttonStencil = createStencil({
-        base: {
-          fontSize: '12px'
-        }
-      })
-    `);
+  describe('creating stencils', () => {
+    beforeEach(() => {
+      _reset();
+    });
 
-    const result = transform(program, 'test.ts');
+    it('should add a variable to the cache when the arguments are strings', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
 
-    expect(result).toContain('}, "button")');
-  });
+        const buttonStencil = createStencil({
+          base: {
+            fontSize: '12px'
+          }
+        })
+      `);
 
-  it('should add a variable to the cache when the arguments are strings', () => {
-    const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
+      const result = transform(program, 'test.ts');
 
-      const buttonStencil = createStencil({
-        vars: {
-          color: 'red'
-        }
-      })
-    `);
+      expect(result).toMatch(/}, "button-[a-z0-9]+"\)/);
+    });
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const variables: Record<string, string> = {};
+    it('should add a variable to the cache when the arguments are strings', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
 
-    const node = findNodes(sourceFile, 'createStencil', ts.isCallExpression)[0];
+        const buttonStencil = createStencil({
+          vars: {
+            color: 'red'
+          }
+        })
+      `);
+      const names = {};
+      const extractedNames = {};
 
-    handleCreateStencil(
-      node,
-      withDefaultContext(program.getTypeChecker(), {
-        variables,
-      })
-    );
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {
+          names,
+          extractedNames,
+        })
+      );
 
-    expect(variables).toHaveProperty('button-color', '--css-button-color');
-  });
+      expect(names).toHaveProperty(
+        ['buttonStencil.vars.color'],
+        expect.stringMatching(/--color-button-[a-z0-9]+/)
+      );
+      expect(extractedNames).toHaveProperty(
+        names['buttonStencil.vars.color'],
+        '--css-button-color'
+      );
 
-  it('should parse base styles into statically optimized versions', () => {
-    const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
+      // ID of the variable and the stencil should be the same
+      expect(result).toContain(`${names['buttonStencil.vars.color'].replace('--color-', '')}`);
+    });
 
-      const buttonStencil = createStencil({
-        base: {
-          padding: 10
-        }
-      })
-    `);
+    it('should add box-sizing to all stencils', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
 
-    const result = transform(program, 'test.ts');
+        const buttonStencil = createStencil({
+          base: {}
+        })
+      `);
 
-    expect(result).toContain('styles: "padding:10px;"');
-  });
+      const result = transform(program, 'test.ts');
 
-  it('should handle parsing variables in base styles', () => {
-    const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
+      expect(result).toContain('styles: "box-sizing:border-box;"');
+    });
 
-      const buttonStencil = createStencil({
-        vars: {
-          color: 'red'
-        },
-        base: {padding: 12}
-      })
-    `);
+    it('should parse base styles into statically optimized versions', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
 
-    const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+        const buttonStencil = createStencil({
+          base: {
+            padding: 10
+          }
+        })
+      `);
 
-    expect(result).toContain('styles: "--css-button-color:red;padding:12px;"');
-  });
+      const result = transform(program, 'test.ts');
+
+      expect(result).toContain('styles: "box-sizing:border-box;padding:10px;"');
+    });
 
-  it('should handle dynamic key with stencil variables', () => {
-    const program = createProgramFromSource(`
-    import {createStencil} from '@workday/canvas-kit-styling';
+    it('should handle parsing variables in base styles', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
 
-    const buttonStencil = createStencil({
-      vars: {
-        color: ''
-      },
-      base: {
-        [color]: 'red'
-      }
-    })
-  `);
+        const buttonStencil = createStencil({
+          vars: {
+            color: 'red'
+          },
+          base: {padding: 12}
+        })
+      `);
 
-    const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+      const names = {};
+      const styles = {};
 
-    expect(result).toContain('styles: "--css-button-color:red;"');
-  });
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
 
-  it('should handle dynamic key with stencil variables for nested key', () => {
-    const program = createProgramFromSource(`
-    import {createStencil} from '@workday/canvas-kit-styling';
+      expect(result).toContain(
+        `styles: "${names['buttonStencil.vars.color']}:red;box-sizing:border-box;padding:12px;"`
+      );
 
-    const systemIconStencil = createStencil({
-      vars: {
-        size: '2rem',
-      },
-      base: {}
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(`.css-button {
+          --css-button-color: red;
+          box-sizing: border-box;
+          padding: 12px;
+        }`)
+      );
     });
 
-    const buttonStencil = createStencil({
-      base: {
-        [systemIconStencil.vars.size]: '1rem',
-      }
-    })
-  `);
+    it('should handle dynamic key with stencil variables', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+        const buttonStencil = createStencil({
+          vars: {
+            color: ''
+          },
+          base: {
+            [color]: 'red'
+          }
+        })
+      `);
 
-    const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+      const names = {};
+      const styles = {};
 
-    expect(result).toContain('styles: "--css-system-icon-size:1rem;"');
-  });
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
 
-  it('should handle parsing variables in base styles via an ArrowFunction and ParenthesizedExpression', () => {
-    const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
+      expect(result).toContain(
+        `styles: "box-sizing:border-box;${names['buttonStencil.vars.color']}:red;"`
+      );
 
-      const buttonStencil = createStencil({
-        vars: {
-          color: 'red'
-        },
-        base: ({color}) => ({
-          color: color,
-          padding: 12
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button { box-sizing: border-box; --css-button-color: red; }')
+      );
+    });
+
+    it('should not parse variables in the base styles if the value is an empty string', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+
+        const buttonStencil = createStencil({
+          vars: {
+            color: ''
+          },
+          base: {
+            [color]: 'red'
+          }
+          base: {padding: 12}
         })
-      })
-    `);
+      `);
 
-    const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+      const names = {};
+      const styles = {};
 
-    expect(result).toContain('--css-button-color:red;');
-    expect(result).toContain('color:var(--css-button-color);');
-    expect(result).toContain('padding:12px;');
-  });
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
 
-  it('should handle parsing variables in base styles via an ArrowFunction and ReturnStatement', () => {
-    const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
+      expect(result).toContain(
+        `styles: "box-sizing:border-box;${names['buttonStencil.vars.color']}:red;"`
+      );
 
-      const buttonStencil = createStencil({
-        vars: {
-          color: 'red'
-        },
-        base: ({color}) => {
-          return {
-            color: color,
-            padding: 12
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button { box-sizing: border-box; --css-button-color: red; }')
+      );
+    });
+
+    it('should handle dynamic key with stencil variables for nested key', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+        const systemIconStencil = createStencil({
+          vars: {
+            size: '2rem',
+          },
+          base: {}
+        });
+        const buttonStencil = createStencil({
+          base: {
+            [systemIconStencil.vars.size]: '1rem',
           }
-        }
-      })
-    `);
+        })
+      `);
 
-    const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+      const names = {};
+      const styles = {};
 
-    expect(result).toContain('--css-button-color:red;');
-    expect(result).toContain('color:var(--css-button-color);');
-    expect(result).toContain('padding:12px;');
-  });
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
 
-  it('should handle parsing variables in base styles via a MethodDeclaration', () => {
-    const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
+      expect(result).toContain(
+        `styles: "box-sizing:border-box;${names['systemIconStencil.vars.size']}:1rem;"`
+      );
 
-      const buttonStencil = createStencil({
-        vars: {
-          color: 'red'
-        },
-        base({color}) {
-          return {
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button { box-sizing: border-box; --css-system-icon-size: 1rem; }')
+      );
+    });
+
+    it('should handle parsing variables in base styles via an ArrowFunction and ParenthesizedExpression', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+
+        const buttonStencil = createStencil({
+          vars: {
+            color: 'red'
+          },
+          base: ({color}) => ({
             color: color,
             padding: 12
+          })
+        })
+      `);
+
+      const names = {};
+      const styles = {};
+
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+
+      expect(result).toContain(
+        `${names['buttonStencil.vars.color']}:red;box-sizing:border-box;color:var(${names['buttonStencil.vars.color']});padding:12px;`
+      );
+
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(`.css-button {
+          --css-button-color: red;
+          box-sizing: border-box;
+          color: var(--css-button-color);
+          padding: 12px;
+        }`)
+      );
+    });
+
+    it('should handle parsing variables in base styles via an ArrowFunction and ReturnStatement', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+
+        const buttonStencil = createStencil({
+          vars: {
+            color: 'red'
+          },
+          base: ({color}) => {
+            return {
+              color: color,
+              padding: 12
+            }
           }
-        }
-      })
-    `);
+        })
+      `);
 
-    const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+      const names = {};
+      const styles = {};
 
-    expect(result).toContain('--css-button-color:red;');
-    expect(result).toContain('color:var(--css-button-color);');
-    expect(result).toContain('padding:12px;');
-  });
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
 
-  it('should handle parsing modifiers with ObjectLiteralExpressions', () => {
-    const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
+      expect(result).toContain(
+        `${names['buttonStencil.vars.color']}:red;box-sizing:border-box;color:var(${names['buttonStencil.vars.color']});padding:12px;`
+      );
 
-      const buttonStencil = createStencil({
-        vars: {
-          color: 'red'
-        },
-        base: {},
-        modifiers: {
-          size: {
-            large: {padding: 20},
-            small: {padding: 10}
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(`.css-button {
+          --css-button-color: red;
+          box-sizing: border-box;
+          color: var(--css-button-color);
+          padding: 12px;
+        }`)
+      );
+    });
+
+    it('should handle parsing variables in base styles via a MethodDeclaration', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+
+        const buttonStencil = createStencil({
+          vars: {
+            color: 'red'
+          },
+          base({color}) {
+            return {
+              color: color,
+              padding: 12
+            }
           }
-        }
-      })
-    `);
+        })
+      `);
 
-    const result = transform(program, 'test.ts', withDefaultContext(program.getTypeChecker()));
+      const names = {};
+      const styles = {};
 
-    expect(result).toMatch(/large: { name: "[0-9a-z]+", styles: "padding:20px;" }/);
-    expect(result).toMatch(/small: { name: "[0-9a-z]+", styles: "padding:10px;" }/);
-  });
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
 
-  it('should handle parsing modifiers with ObjectLiteralExpressions', () => {
-    const program = createProgramFromSource(`
-      import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+      expect(result).toContain(
+        `${names['buttonStencil.vars.color']}:red;box-sizing:border-box;color:var(${names['buttonStencil.vars.color']});padding:12px;`
+      );
 
-      const buttonStencil = createStencil({
-        vars: {
-          color: 'red'
-        },
-        base: {},
-        modifiers: {
-          size: {
-            large: {
-              padding: px2rem(5),
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(`.css-button {
+          --css-button-color: red;
+          box-sizing: border-box;
+          color: var(--css-button-color);
+          padding: 12px;
+        }`)
+      );
+    });
+
+    it('should handle parsing variables in base styles via a MethodDeclaration with a ShorthandPropertyAssignment', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+
+        const buttonStencil = createStencil({
+          vars: {
+            color: 'red'
+          },
+          base({color}) {
+            return {
+              color,
+              padding: 12
+            }
+          }
+        })
+      `);
+
+      const names = {};
+      const styles = {};
+
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+
+      expect(result).toContain(
+        `${names['buttonStencil.vars.color']}:red;box-sizing:border-box;color:var(${names['buttonStencil.vars.color']});padding:12px;`
+      );
+
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(`.css-button {
+          --css-button-color: red;
+          box-sizing: border-box;
+          color: var(--css-button-color);
+          padding: 12px;
+        }`)
+      );
+    });
+
+    it('should handle parsing modifiers with ObjectLiteralExpressions', () => {
+      const program = createProgramFromSource(`
+        import {createStencil, parentModifier} from '@workday/canvas-kit-styling';
+
+        const buttonStencil = createStencil({
+          vars: {
+            color: 'red'
+          },
+          base: {},
+          modifiers: {
+            size: {
+              large: {padding: 20},
+              small: {padding: 10}
+            }
+          }
+        })
+
+        const childStencil = createStencil({
+          base: {
+            [parentModifier(buttonStencil.modifiers.size.large)]: {
+              color: 'blue',
+            }
+          }
+        })
+      `);
+
+      const styles = {};
+      const names = {};
+      const extractedNames = {};
+
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names, extractedNames})
+      );
+
+      expect(result).toMatch(/large: { name: "[0-9a-z]+", styles: "padding:20px;" }/);
+      expect(result).toMatch(/small: { name: "[0-9a-z]+", styles: "padding:10px;" }/);
+
+      // runtime selector
+      expect(result).toContain(
+        `.${names['buttonStencil.modifiers.size.large'].replace(
+          'css-',
+          'm'
+        )} :where(&){color:blue;}`
+      );
+
+      // extracted selector
+      expect(getFile(styles, 'test.css')).toContainEqual(
+        compileCSS(`
+          .css-child {
+            box-sizing: border-box;
+          }
+          .css-button--size-large :where(.css-child) {
+            color: blue;
+          }
+      `)
+      );
+    });
+
+    it('should handle parsing modifiers with ObjectLiteralExpressions', () => {
+      const program = createProgramFromSource(`
+        import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+
+        const buttonStencil = createStencil({
+          vars: {
+            color: 'red'
+          },
+          base: {},
+          modifiers: {
+            size: {
+              large: {
+                padding: px2rem(5),
+              },
+              small: {}
+            }
+          }
+        })
+      `);
+
+      const styles = {};
+
+      transform(program, 'test.ts', withDefaultContext(program.getTypeChecker(), {styles}));
+
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button{--css-button-color: red;box-sizing:border-box;}')
+      );
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button.size-large{padding: 0.3125rem;}')
+      );
+    });
+
+    it('should add to extracted styles', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+
+        const buttonStencil = createStencil({
+          vars: {
+            color: 'red'
+          },
+          base({color}) {
+            return {
+              color: color
+            }
+          },
+          modifiers: {
+            size: {
+              large: {padding: 30},
+              small: {padding: 10}
+            },
+            inverse: {
+              true: {
+                color: 'while'
+              }
+            }
+          },
+          compound: [
+            {
+              modifiers: { size: 'large', inverse: true},
+              styles: { padding: 40 }
+            }
+          ]
+        })
+      `);
+
+      const styles = {};
+      const sourceFile = program.getSourceFile('test.ts')!;
+      const node = findNodes(sourceFile, 'createStencil', ts.isCallExpression)![0];
+
+      handleCreateStencil(node, withDefaultContext(program.getTypeChecker(), {styles}));
+
+      // base
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(
+          '.css-button{--css-button-color:red;box-sizing:border-box;color:var(--css-button-color);}'
+        )
+      );
+
+      // modifiers
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button.size-large{padding:30px;}')
+      );
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button.size-small{padding:10px;}')
+      );
+      expect(styles['test.css']).toContainEqual(compileCSS('.css-button.inverse{color:while;}'));
+
+      // compound
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button.size-large.inverse{padding:40px;}')
+      );
+    });
+
+    it('should handle string literal keys', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+
+        const buttonStencil = createStencil({
+          vars: {
+            color: 'red'
+          },
+          base({color}) {
+            return {
+              color: color
+            }
+          },
+          modifiers: {
+            size: {
+              'title.large': {fontSize: '--title-large'},
+              'title.small': {fontSize: '--title-small'}
             },
-            small: {}
           }
-        }
-      })
-    `);
+        })
+      `);
 
-    const styles = {};
+      const styles = {};
+      const sourceFile = program.getSourceFile('test.ts')!;
+      const node = findNodes(sourceFile, 'createStencil', ts.isCallExpression)![0];
 
-    transform(program, 'test.ts', withDefaultContext(program.getTypeChecker(), {styles}));
+      handleCreateStencil(node, withDefaultContext(program.getTypeChecker(), {styles}));
 
-    expect(styles['test.css']).toContainEqual(compileCSS('.css-button{--css-button-color: red;}'));
-    expect(styles['test.css']).toContainEqual(
-      compileCSS('.css-button--size-large{padding: 0.3125rem;}')
-    );
+      // base
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(
+          '.css-button{--css-button-color:red;box-sizing:border-box;color:var(--css-button-color);}'
+        )
+      );
+
+      // modifiers
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button.size-title-large{font-size:var(--title-large);}')
+      );
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button.size-title-small{font-size:var(--title-small);}')
+      );
+    });
+
+    it('should handle the "label" var name, making it safe for Emotion', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+
+        const buttonStencil = createStencil({
+          vars: {
+            label: 'red'
+          },
+          base({label}) {
+            return {
+              color: label
+            }
+          },
+          modifiers: {
+            size: {
+              'title.large': {fontSize: '--title-large'},
+              'title.small': {fontSize: '--title-small'}
+            },
+          }
+        })
+      `);
+
+      const styles = {};
+      const sourceFile = program.getSourceFile('test.ts')!;
+      const node = findNodes(sourceFile, 'createStencil', ts.isCallExpression)![0];
+
+      handleCreateStencil(node, withDefaultContext(program.getTypeChecker(), {styles}));
+
+      // base
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(
+          '.css-button{--css-button-label:red;box-sizing:border-box;color:var(--css-button-label);}'
+        )
+      );
+
+      // modifiers
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button.size-title-large{font-size:var(--title-large);}')
+      );
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-button.size-title-small{font-size:var(--title-small);}')
+      );
+    });
   });
 
-  it('should add to extracted styles', () => {
-    const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
+  describe('when importing variables from another stencil', () => {
+    let program: ts.Program;
+    const names = {};
+    const styles = {};
+    let result = '';
+
+    beforeAll(() => {
+      program = createProgramFromSource([
+        {
+          filename: 'test.ts',
+          source: `
+          import {createStencil} from '@workday/canvas-kit-styling';
+          import {baseStencil} from './base';
 
-      const buttonStencil = createStencil({
-        vars: {
-          color: 'red'
+          const extendedStencil = createStencil({
+            base: {
+              [baseStencil.vars.color]: 'blue'
+            },
+          })
+        `,
         },
-        base({color}) {
-          return {
-            color: color
-          }
+        {
+          filename: 'base.ts',
+          source: `
+          import {createStencil} from '@workday/canvas-kit-styling';
+
+          export const baseStencil = createStencil({
+            vars: {
+              color: 'red',
+            },
+            base: {},
+          });
+        `,
         },
-        modifiers: {
-          size: {
-            large: {padding: 30},
-            small: {padding: 10}
-          },
-          inverse: {
-            true: {
-              color: 'while'
+      ]);
+
+      result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+    });
+
+    it('should apply the correct variable name to the styles', () => {
+      expect(result).toMatch(
+        `styles: "box-sizing:border-box;${names['baseStencil.vars.color']}:blue;`
+      );
+    });
+
+    it('should inject the correct variable name to the CSS output', () => {
+      expect(getFile(styles, 'test.css')).toContainEqual(
+        compileCSS('.css-extended { box-sizing:border-box;--css-base-color: blue; }')
+      );
+    });
+  });
+
+  describe('when referencing modifiers from another stencil', () => {
+    it('should resolve the CSS class name', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+
+        const containerStencil = createStencil({
+          base: {},
+          modifiers: {
+            size: {
+              large: {},
+              small: {}
             }
           }
-        },
-        compound: [
-          {
-            modifiers: { size: 'large', inverse: true},
-            styles: { padding: 40 }
+        });
+
+        const childStencil = createStencil({
+          base: {
+            [\`.\${containerStencil.modifiers.size.large\} &\`]: {
+              padding: 10
+            }
           }
-        ]
-      })
-    `);
+        })
+      `);
+
+      const names = {};
+      const styles = {};
+
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+
+      expect(result).toContain(
+        `styles: "box-sizing:border-box;.${names['containerStencil.modifiers.size.large']} &{padding:10px;}`
+      );
 
+      expect(getFile(styles, 'test.css')).toContainEqual(
+        compileCSS(`
+          .css-child {box-sizing: border-box; }
+          .css-container--size-large .css-child { padding: 10px; }
+        `)
+      );
+    });
+  });
+
+  describe('when importing from a stencil that was extended from another stencil', () => {
+    let program: ts.Program;
+    const names = {};
     const styles = {};
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'createStencil', ts.isCallExpression)[0];
+    let result = '';
+
+    beforeAll(() => {
+      program = createProgramFromSource([
+        {
+          filename: 'test.ts',
+          source: `
+            import {createStencil} from '@workday/canvas-kit-styling';
+            import {extendedStencil} from './extended';
+
+            const finalStencil = createStencil({
+              base: {
+                [extendedStencil.vars.color]: 'purple',
+              },
+            })
+          `,
+        },
+        {
+          filename: 'extended.ts',
+          source: `
+            import {createStencil} from '@workday/canvas-kit-styling';
+
+            import {baseStencil} from './base';
 
-    handleCreateStencil(node, withDefaultContext(program.getTypeChecker(), {styles}));
+            export const extendedStencil = createStencil({
+              extends: baseStencil,
+              vars: {
+                extendedColor: 'blue'
+              },
+              base({color}) {
+                return {
+                  [color]: 'purple',
+                }
+              }
+            })
+          `,
+        },
+        {
+          filename: 'base.ts',
+          source: `
+            import {createStencil} from '@workday/canvas-kit-styling';
+
+            export const baseStencil = createStencil({
+              vars: {
+                color: 'red',
+              },
+              base: {
+                padding: 5
+              },
+            });
+          `,
+        },
+      ]);
+
+      result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+    });
+
+    it('should apply the correct variable name to the styles', () => {
+      expect(result).toContain(
+        `styles: "box-sizing:border-box;${names['baseStencil.vars.color']}:purple;`
+      );
+    });
+
+    it('should inject the correct variable name to the CSS output', () => {
+      expect(getFile(styles, 'test.css')).toContainEqual(
+        compileCSS('.css-final { box-sizing:border-box;--css-base-color: purple; }')
+      );
+    });
+
+    it('when a preprocessed file is transformed should apply the correct variable name to the styles', () => {
+      result = transform(
+        program,
+        'extended.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+
+      expect(result).toContain(
+        `styles: "${names['extendedStencil.vars.extendedColor']}:blue;box-sizing:border-box;${names['baseStencil.vars.color']}:purple;`
+      );
+    });
 
-    // base
-    expect(styles['test.css']).toContainEqual(
-      compileCSS('.css-button{--css-button-color:red;color:var(--css-button-color);}')
+    it('should inject the correct variable name to the CSS output', () => {
+      getFile(styles, 'extended.css');
+      expect(getFile(styles, 'extended.css')).toContainEqual(
+        compileCSS(
+          '.css-extended { --css-extended-extended-color: blue; box-sizing:border-box; --css-base-color: purple; }'
+        )
+      );
+    });
+  });
+
+  it('should handle CSS variables imported from a stencil that was extended from another stencil', () => {
+    _reset();
+    const names = {};
+    const styles = {};
+    const program = createProgramFromSource([
+      {
+        filename: 'test.ts',
+        source: `
+          import {createStencil} from '@workday/canvas-kit-styling';
+          import {extendedStencil} from './extended';
+
+          const finalStencil = createStencil({
+            base: {
+              [extendedStencil.vars.color]: 'purple',
+            },
+          })
+        `,
+      },
+      {
+        filename: 'extended.ts',
+        source: `
+          import {createStencil} from '@workday/canvas-kit-styling';
+
+          import {baseStencil} from './base';
+
+          export const extendedStencil = createStencil({
+            extends: baseStencil,
+            vars: {
+              extendedColor: 'blue'
+            },
+            base({color}) {
+              return {
+                [color]: 'blue'
+              }
+            }
+          })
+        `,
+      },
+      {
+        filename: 'base.ts',
+        source: `
+          import {createStencil} from '@workday/canvas-kit-styling';
+
+          export const baseStencil = createStencil({
+            vars: {
+              color: 'red',
+            },
+            base: {
+              padding: 5
+            },
+          });
+        `,
+      },
+    ]);
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {styles, names})
     );
 
-    // modifiers
-    expect(styles['test.css']).toContainEqual(compileCSS('.css-button--size-large{padding:30px;}'));
-    expect(styles['test.css']).toContainEqual(compileCSS('.css-button--size-small{padding:10px;}'));
-    expect(styles['test.css']).toContainEqual(compileCSS('.css-button--inverse{color:while;}'));
+    expect(result).toContain(
+      `styles: "box-sizing:border-box;${names['baseStencil.vars.color']}:purple;"`
+    );
 
-    // compound
-    expect(styles['test.css']).toContainEqual(
-      compileCSS('.css-button--size-large.css-button--inverse{padding:40px;}')
+    expect(getFile(styles, 'test.css')).toContainEqual(
+      compileCSS('.css-final {box-sizing:border-box;--css-base-color: purple;}')
     );
   });
 
-  it('should handle string literal keys', () => {
-    const program = createProgramFromSource(`
-      import {createStencil} from '@workday/canvas-kit-styling';
+  it('should use the correct prefix in extended stencils when the base stencil is from another prefix', () => {
+    _reset();
+    const names = {};
+    const styles = {};
+    const program = createProgramFromSource([
+      {
+        filename: 'test.ts',
+        source: `
+          import {createStencil} from '@workday/canvas-kit-styling';
 
-      const buttonStencil = createStencil({
-        vars: {
-          color: 'red'
-        },
-        base({color}) {
-          return {
-            color: color
-          }
-        },
-        modifiers: {
-          size: {
-            'title.large': {fontSize: '--title-large'},
-            'title.small': {fontSize: '--title-small'}
-          },
-        }
-      })
-    `);
+          import {baseStencil} from './base';
 
-    const styles = {};
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'createStencil', ts.isCallExpression)[0];
+          export const extendedStencil = createStencil({
+            extends: baseStencil,
+            vars: {
+              extendedColor: 'blue'
+            },
+            base({color}) {
+              return {
+                [color]: 'blue'
+              }
+            }
+          })
+        `,
+      },
+      {
+        filename: 'base.ts',
+        source: `
+          import {createStencil} from '@workday/canvas-kit-styling';
 
-    handleCreateStencil(node, withDefaultContext(program.getTypeChecker(), {styles}));
+          export const baseStencil = createStencil({
+            vars: {
+              color: 'red',
+            },
+            base: {
+              padding: 5
+            },
+          });
+
+          const test = createStencil({
+            vars: {
+              foo: 'bar'
+            }
+          }, 'base-base')
+        `,
+      },
+    ]);
 
-    // base
-    expect(styles['test.css']).toContainEqual(
-      compileCSS('.css-button{--css-button-color:red;color:var(--css-button-color);}')
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {
+        styles,
+        names,
+        getPrefix: p => (p.includes('base') ? 'base' : 'css'),
+      })
     );
 
-    // modifiers
-    expect(styles['test.css']).toContainEqual(
-      compileCSS('.css-button--size-title-large{font-size:var(--title-large);}')
+    expect(result).toContain(
+      `styles: "${names['extendedStencil.vars.extendedColor']}:blue;box-sizing:border-box;${names['baseStencil.vars.color']}:blue;"`
     );
-    expect(styles['test.css']).toContainEqual(
-      compileCSS('.css-button--size-title-small{font-size:var(--title-small);}')
+
+    expect(getFile(styles, 'test.css')).toContainEqual(
+      compileCSS(
+        '.css-extended {--css-extended-extended-color:blue;box-sizing:border-box;--base-base-color:blue;}'
+      )
     );
   });
+
+  describe('extended stencil', () => {
+    let program: ts.Program;
+    const styles = {};
+
+    beforeAll(() => {
+      _reset();
+      program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+
+        const baseStencil = createStencil({
+          vars: {
+            color: 'red',
+          },
+          base: {
+            padding: 5
+          },
+          modifiers: {
+            iconPosition: {
+              start: {
+                paddingInlineStart: 5
+              },
+              end: {
+                paddingInlineEnd: 5
+              }
+            },
+            size: {
+              large: {
+                padding: 15
+              },
+            },
+          },
+          compound: [
+            {
+              modifiers: {size: 'large', iconPosition: 'start'},
+              styles: {
+                paddingInlineStart: 10
+              }
+            }
+          ],
+        });
+
+        const extendedStencil = createStencil({
+          extends: baseStencil,
+          vars: {
+            background: 'blue',
+          },
+          base: {
+
+          },
+          modifiers: {
+            iconPosition: {
+              start: {
+                paddingInlineState: 0
+              },
+              end: {
+                paddingInlineEnd: 0
+              }
+            },
+            extra: {
+              true: {
+                margin: 5
+              },
+            },
+          },
+          compound: [
+            {
+              modifiers: {
+                size: 'large',
+                iconPosition: 'start',
+                extra: true
+              },
+              styles: {
+                margin: 10,
+                paddingInlineStart: 5
+              }
+            }
+          ],
+        });
+      `);
+
+      transform(program, 'test.ts', withDefaultContext(program.getTypeChecker(), {styles}));
+    });
+
+    it('should extract base styles', () => {
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-base {--css-base-color: red; box-sizing:border-box; padding: 5px;}')
+      );
+    });
+
+    it('should extract a base modifier style', () => {
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-base.icon-position-start { padding-inline-start: 5px;}')
+      );
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-base.icon-position-end { padding-inline-end: 5px;}')
+      );
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-base.size-large { padding: 15px;}')
+      );
+    });
+
+    it('should extract a base compound modifier style', () => {
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-base.size-large.icon-position-start { padding-inline-start: 10px;}')
+      );
+    });
+
+    it('should extract an extended base style', () => {
+      expect(styles['test.css']).toContainEqual(
+        compileCSS('.css-extended { --css-extended-background: blue; box-sizing:border-box; }')
+      );
+    });
+
+    it('should extract an extended modifier style', () => {
+      expect(styles['test.css']).toContainEqual(compileCSS('.css-extended.extra { margin: 5px;}'));
+    });
+
+    it('should extract an extended compound modifier with base modifier names and extended modifier names', () => {
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(
+          '.css-extended.size-large.icon-position-start.extra {margin: 10px; padding-inline-start: 5px;}'
+        )
+      );
+    });
+  });
+
+  describe('extending a stencil from another file', () => {
+    let program: ts.Program;
+    const styles = {};
+
+    beforeAll(() => {
+      program = createProgramFromSource([
+        {
+          filename: 'test.ts',
+          source: `
+            import {createStencil} from '@workday/canvas-kit-styling';
+            import {baseStencil} from './base';
+
+            const extendedStencil = createStencil({
+              extends: baseStencil,
+              vars: {
+                background: 'blue',
+              },
+              base: {
+
+              },
+              modifiers: {
+                extra: {
+                  true: {
+                    margin: 5
+                  },
+                },
+              },
+              compound: [
+                {
+                  modifiers: {
+                    size: 'large',
+                    iconPosition: 'start',
+                    extra: true
+                  },
+                  styles: {
+                    margin: 10,
+                    paddingInlineStart: 5
+                  }
+                }
+              ],
+            })
+          `,
+        },
+        {
+          filename: 'base.ts',
+          source: `
+            import {createStencil} from '@workday/canvas-kit-styling';
+
+            export const baseStencil = createStencil({
+              vars: {
+                color: 'red',
+              },
+              base: {
+                padding: 5
+              },
+              modifiers: {
+                iconPosition: {
+                  start: {
+                    paddingInlineStart: 5
+                  },
+                  end: {
+                    paddingInlineEnd: 5
+                  }
+                },
+                size: {
+                  large: {
+                    padding: 15
+                  },
+                },
+              },
+              compound: [
+                {
+                  modifiers: {size: 'large', iconPosition: 'start'},
+                  styles: {
+                    paddingInlineStart: 10
+                  }
+                }
+              ],
+            });
+          `,
+        },
+      ]);
+
+      transform(program, 'test.ts', withDefaultContext(program.getTypeChecker(), {styles}));
+    });
+
+    it('should extract base styles', () => {
+      expect(getFile(styles, 'base.css')).toContainEqual(
+        compileCSS('.css-base {--css-base-color: red; box-sizing:border-box; padding: 5px;}')
+      );
+    });
+
+    it('should extract a base modifier style', () => {
+      expect(getFile(styles, 'base.css')).toContainEqual(
+        compileCSS('.css-base.icon-position-start { padding-inline-start: 5px;}')
+      );
+      expect(getFile(styles, 'base.css')).toContainEqual(
+        compileCSS('.css-base.icon-position-end { padding-inline-end: 5px;}')
+      );
+      expect(getFile(styles, 'base.css')).toContainEqual(
+        compileCSS('.css-base.size-large { padding: 15px;}')
+      );
+    });
+
+    it('should extract a base compound modifier style', () => {
+      expect(getFile(styles, 'base.css')).toContainEqual(
+        compileCSS('.css-base.size-large.icon-position-start { padding-inline-start: 10px;}')
+      );
+    });
+
+    it('should extract an extended base style', () => {
+      expect(getFile(styles, 'test.css')).toContainEqual(
+        compileCSS('.css-extended { --css-extended-background: blue; box-sizing:border-box; }')
+      );
+    });
+
+    it('should extract an extended modifier style', () => {
+      expect(getFile(styles, 'test.css')).toContainEqual(
+        compileCSS('.css-extended.extra { margin: 5px;}')
+      );
+    });
+
+    it('should extract an extended compound modifier with base modifier names and extended modifier names', () => {
+      expect(getFile(styles, 'test.css')).toContainEqual(
+        compileCSS(
+          '.css-extended.size-large.icon-position-start.extra {margin: 10px; padding-inline-start: 5px;}'
+        )
+      );
+    });
+  });
 });
diff --git a/modules/styling-transform/spec/utils/handleCreateStyles.spec.ts b/modules/styling-transform/spec/utils/handleCreateStyles.spec.ts
index e2e62ae208..17c43eed44 100644
--- a/modules/styling-transform/spec/utils/handleCreateStyles.spec.ts
+++ b/modules/styling-transform/spec/utils/handleCreateStyles.spec.ts
@@ -261,9 +261,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
-    expect(result).toContain('background-color:var(--cnvs-my-color);');
+    expect(result).toContain(`background-color:var(${names['myVars.color']});`);
   });
 
   it('should handle cssVar call expressions referencing nested variables', () => {
@@ -279,9 +285,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
 
-    expect(result).toContain('background-color:var(--cnvs-my-colors-background);');
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(`background-color:var(${names['myVars.colors.background']});`);
   });
 
   it('should handle css vars even without the cssVar call expressions referencing static variables', () => {
@@ -313,9 +325,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
 
-    expect(result).toContain('background-color:var(--cnvs-my-colors-background);');
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(`background-color:var(${names['myVars.colors.background']});`);
   });
 
   it('should handle ComputedPropertyName that are static', () => {
@@ -347,9 +365,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
 
-    expect(result).toContain('--cnvs-my-color:red;');
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(`${names['myVars.color']}:red;`);
   });
 
   it('should slugify ComputedPropertyName with capital letters that is a variable created with createVars', () => {
@@ -363,9 +387,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
-    expect(result).toContain('--cnvs-my-hoverColor:red;');
+    expect(result).toContain(`${names['myVars.hoverColor']}:red;`);
   });
 
   it('should slugify cssVars with capital letters that is a variable created with createVars', () => {
@@ -379,9 +409,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
-    expect(result).toContain('background-color:var(--cnvs-my-hoverColor);');
+    expect(result).toContain(`background-color:var(${names['myVars.hoverColor']});`);
   });
 
   it('should handle ComputedPropertyName that is a variable created with createVars inside an object', () => {
@@ -397,9 +433,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
-    expect(result).toContain('--cnvs-my-hover-color:red;');
+    expect(result).toContain(`${names['myVars.hover.color']}:red;`);
   });
 
   it('should handle fallback call expressions referencing static variables', () => {
@@ -413,9 +455,15 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
-    expect(result).toContain('background-color:var(--cnvs-my-color, red);');
+    expect(result).toContain(`background-color:var(${names['myVars.color']}, red);`);
   });
 
   it('should handle fallback call expressions referencing other variables', () => {
@@ -429,9 +477,17 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
 
-    expect(result).toContain('background-color:var(--cnvs-my-color, var(--cnvs-my-background));');
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(
+      `background-color:var(${names['myVars.color']}, var(${names['myVars.background']}));`
+    );
   });
 
   it('should handle fallback variables if provided', () => {
@@ -443,7 +499,7 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts', {variables: {'--var-1': 'red'}});
+    const result = transform(program, 'test.ts', {names: {'--var-1': 'red'}});
 
     expect(result).toContain('background-color:var(--var-1, red);');
   });
@@ -508,10 +564,16 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
     expect(result).toContain('css-12345');
-    expect(result).toContain('border:1px solid var(--cnvs-my-borderColor);');
+    expect(result).toContain(`border:1px solid var(${names['myVars.borderColor']});`);
   });
 
   it('should handle template stings with multiple spans', () => {
@@ -525,30 +587,20 @@ describe('createStyles', () => {
       })
     `);
 
-    const result = transform(program, 'test.ts');
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
 
     expect(result).toContain('css-12345');
     expect(result).toContain(
-      'box-shadow:var(--cnvs-my-boxShadowInner) 0px 0px 0px 2px, var(--cnvs-my-boxShadowOuter) 0px 0px 0px 4px'
+      `box-shadow:var(${names['myVars.boxShadowInner']}) 0px 0px 0px 2px, var(${names['myVars.boxShadowOuter']}) 0px 0px 0px 4px`
     );
   });
 
-  it('should make variables safe for Emotion', () => {
-    const program = createProgramFromSource(`
-      import {createStyles, createVars} from '@workday/canvas-kit-styling';
-
-      const myVars = createVars('label')
-
-      const styles = createStyles({
-        color: myVars.label
-      })
-    `);
-
-    const result = transform(program, 'test.ts');
-
-    expect(result).toContain('color:var(--cnvs-my-label-emotion-safe)');
-  });
-
   it('should handle multiple arguments with an identifier of a type of an object literal', () => {
     const program = createProgramFromSource(`
       import {createStyles} from '@workday/canvas-kit-styling';
@@ -595,8 +647,8 @@ describe('createStyles', () => {
     `);
 
     const styles = {};
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'createStyles', ts.isCallExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, 'createStyles', ts.isCallExpression)![0];
 
     handleCreateStyles(node, withDefaultContext(program.getTypeChecker(), {styles}));
 
@@ -606,4 +658,140 @@ describe('createStyles', () => {
       )
     );
   });
+
+  it('should process variable properties from another file if processing is out of order', () => {
+    const program = createProgramFromSource([
+      {
+        filename: 'test.ts',
+        source: `
+          import {createStyles, createVars} from '@workday/canvas-kit-styling';
+          import { sourceVars } from './vars';
+
+          const myStyles = createStyles({
+            color: sourceVars.foo
+          })
+        `,
+      },
+      {
+        filename: 'vars.ts',
+        source: `
+          import {createVars} from '@workday/canvas-kit-styling';
+
+          export const sourceVars = createVars('foo', 'bar');
+        `,
+      },
+    ]);
+
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(`styles: "color:var(${names['sourceVars.foo']})`);
+  });
+
+  it('should process variable keys from another file if processing is out of order', () => {
+    const program = createProgramFromSource([
+      {
+        filename: 'test.ts',
+        source: `
+          import {createStyles, createVars} from '@workday/canvas-kit-styling';
+          import { sourceVars } from './vars';
+
+          const myStyles = createStyles({
+            [sourceVars.foo]: 'red'
+          })
+        `,
+      },
+      {
+        filename: 'vars.ts',
+        source: `
+          import {createVars} from '@workday/canvas-kit-styling';
+
+          export const sourceVars = createVars('foo', 'bar');
+        `,
+      },
+    ]);
+
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(`styles: "${names['sourceVars.foo']}:red;`);
+  });
+
+  it('should process nested variable properties from another file if processing is out of order', () => {
+    const program = createProgramFromSource([
+      {
+        filename: 'test.ts',
+        source: `
+          import {createStyles, createVars} from '@workday/canvas-kit-styling';
+          import { sourceVars } from './vars';
+
+          const myStyles = createStyles({
+            color: sourceVars.default.foo
+          })
+        `,
+      },
+      {
+        filename: 'vars.ts',
+        source: `
+          import {createVars} from '@workday/canvas-kit-styling';
+
+          export const sourceVars = {default: createVars('foo', 'bar')};
+        `,
+      },
+    ]);
+
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(`styles: "color:var(${names['sourceVars.default.foo']})`);
+  });
+
+  it('should process nested variable keys from another file if processing is out of order', () => {
+    const program = createProgramFromSource([
+      {
+        filename: 'test.ts',
+        source: `
+          import {createStyles, createVars} from '@workday/canvas-kit-styling';
+          import { sourceVars } from './vars';
+
+          const myStyles = createStyles({
+            [sourceVars.default.foo]: 'red'
+          })
+        `,
+      },
+      {
+        filename: 'vars.ts',
+        source: `
+          import {createVars} from '@workday/canvas-kit-styling';
+
+          export const sourceVars = {default: createVars('foo', 'bar')};
+        `,
+      },
+    ]);
+
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {names})
+    );
+
+    expect(result).toContain(`styles: "${names['sourceVars.default.foo']}:red;`);
+  });
 });
diff --git a/modules/styling-transform/spec/utils/handleCreateVars.spec.ts b/modules/styling-transform/spec/utils/handleCreateVars.spec.ts
index 4b16bec927..d2823b9aa7 100644
--- a/modules/styling-transform/spec/utils/handleCreateVars.spec.ts
+++ b/modules/styling-transform/spec/utils/handleCreateVars.spec.ts
@@ -4,49 +4,119 @@ import {findNodes} from '../findNodes';
 import {createProgramFromSource} from '../createProgramFromSource';
 
 import {handleCreateVars} from '../../lib/utils/handleCreateVars';
-import {withDefaultContext} from '../../lib/styleTransform';
+import {transform, withDefaultContext} from '../../lib/styleTransform';
 
 describe('handleCreateVars', () => {
   it('should add a variable to the cache when the arguments are strings', () => {
     const program = createProgramFromSource(`
-      const myVars = createVars('color', 'background')
+      const myVars = createVars('color', 'backgroundColor')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const variables: Record<string, string> = {};
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const names = {};
+    const extractedNames = {};
 
-    const node = findNodes(sourceFile, 'createVars', ts.isCallExpression)[0];
+    const node = findNodes(sourceFile, 'createVars', ts.isCallExpression)![0];
 
     handleCreateVars(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables,
+        names,
+        extractedNames,
       })
     );
 
-    expect(variables).toHaveProperty('my-color', '--css-my-color');
-    expect(variables).toHaveProperty('my-background', '--css-my-background');
+    expect(names).toHaveProperty(['myVars.color'], expect.stringMatching(/--color-[a-z0-9]+/));
+    expect(names).toHaveProperty(
+      ['myVars.backgroundColor'],
+      expect.stringMatching(/--backgroundColor-[a-z0-9]+/)
+    );
+
+    expect(extractedNames).toHaveProperty(names['myVars.color'], '--css-my-color');
+    expect(extractedNames).toHaveProperty(
+      names['myVars.backgroundColor'],
+      '--css-my-background-color'
+    );
+  });
+
+  it('should transform variables to use an id and args for static typing of dependencies', () => {
+    const program = createProgramFromSource(`
+      const myVars = createVars('color', 'background')
+    `);
+
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {
+        names,
+      })
+    );
+
+    expect(result).toContain(
+      `const myVars = createVars({ id: "${names['myVars.color'].replace(
+        '--color-',
+        ''
+      )}", args: ["color", "background"] })`
+    );
   });
 
   it('should add nested variables to the cache when the arguments are strings', () => {
     const program = createProgramFromSource(`
       const myVars = {
-        foo: createVars('color')
+        foo: createVars('color', 'backgroundColor')
       }
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const variables: Record<string, string> = {};
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const names = {};
+    const extractedNames = {};
 
-    const node = findNodes(sourceFile, 'createVars', ts.isCallExpression)[0];
+    const node = findNodes(sourceFile, 'createVars', ts.isCallExpression)![0];
 
     handleCreateVars(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables,
+        names,
+        extractedNames,
+      })
+    );
+    expect(names).toHaveProperty(['myVars.foo.color'], expect.stringMatching(/--color-[a-z0-9]+/));
+    expect(names).toHaveProperty(
+      ['myVars.foo.backgroundColor'],
+      expect.stringMatching(/--backgroundColor-[a-z0-9]+/)
+    );
+
+    expect(extractedNames).toHaveProperty(names['myVars.foo.color'], '--css-my-foo-color');
+    expect(extractedNames).toHaveProperty(
+      names['myVars.foo.backgroundColor'],
+      '--css-my-foo-background-color'
+    );
+  });
+
+  it('should transform nested variables to use an id and args for static typing of dependencies', () => {
+    const program = createProgramFromSource(`
+      const myVars = {
+        foo: createVars('color')
+      }
+    `);
+
+    const names = {};
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {
+        names,
       })
     );
 
-    expect(variables).toHaveProperty('my-foo-color', '--css-my-foo-color');
+    expect(result).toContain(
+      `foo: createVars({ id: "${names['myVars.foo.color'].replace(
+        '--color-',
+        ''
+      )}", args: ["color"] })`
+    );
   });
 });
diff --git a/modules/styling-transform/spec/utils/handleCssVar.spec.ts b/modules/styling-transform/spec/utils/handleCssVar.spec.ts
index c97d0b0c8d..52e5835211 100644
--- a/modules/styling-transform/spec/utils/handleCssVar.spec.ts
+++ b/modules/styling-transform/spec/utils/handleCssVar.spec.ts
@@ -13,8 +13,8 @@ describe('handleCssVar', () => {
       cssVar('--some-var')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'cssVar')[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, 'cssVar')![0];
 
     const result = handleCssVar(node, withDefaultContext(program.getTypeChecker()));
 
@@ -28,8 +28,8 @@ describe('handleCssVar', () => {
       cssVar(someVar)
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'cssVar')[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, 'cssVar')![0];
 
     const result = handleCssVar(node, withDefaultContext(program.getTypeChecker()));
 
@@ -41,8 +41,8 @@ describe('handleCssVar', () => {
       cssVar('--some-var', '--fallback')
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'cssVar')[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, 'cssVar')![0];
 
     const result = handleCssVar(node, withDefaultContext(program.getTypeChecker()));
 
@@ -54,8 +54,8 @@ describe('handleCssVar', () => {
       cssVar('--some-var', cssVar('--fallback', 'red'))
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'cssVar')[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, 'cssVar')![0];
 
     const result = handleCssVar(node, withDefaultContext(program.getTypeChecker()));
 
@@ -67,13 +67,13 @@ describe('handleCssVar', () => {
       cssVar('--some-var'))
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'cssVar')[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, 'cssVar')![0];
 
     const result = handleCssVar(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'--some-var': 'red'},
+        names: {'--some-var': 'red'},
       })
     );
 
diff --git a/modules/styling-transform/spec/utils/handleInjectGlobal.spec.ts b/modules/styling-transform/spec/utils/handleInjectGlobal.spec.ts
index 0b5163e177..0cc1d0a6f9 100644
--- a/modules/styling-transform/spec/utils/handleInjectGlobal.spec.ts
+++ b/modules/styling-transform/spec/utils/handleInjectGlobal.spec.ts
@@ -3,9 +3,14 @@ import {
   withDefaultContext,
   transform,
 } from '@workday/canvas-kit-styling-transform/testing';
+import {_reset} from '../../lib/styleTransform';
 import {compileCSS} from '../../lib/utils/createStyleObjectNode';
 
 describe('handleInjectGlobal', () => {
+  beforeEach(() => {
+    _reset();
+  });
+
   it('should transform an object using injectGlobal', () => {
     const program = createProgramFromSource(`
       import {injectGlobal} from '@workday/canvas-kit-styling';
diff --git a/modules/styling-transform/spec/utils/handleKeyframes.spec.ts b/modules/styling-transform/spec/utils/handleKeyframes.spec.ts
index d9eb1c265e..b6e0e7c24c 100644
--- a/modules/styling-transform/spec/utils/handleKeyframes.spec.ts
+++ b/modules/styling-transform/spec/utils/handleKeyframes.spec.ts
@@ -37,21 +37,18 @@ describe('handleKeyframes', () => {
       const buttonAnimation = keyframes\`\`
     `);
 
-    const keyframes = {};
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isTaggedTemplateExpression)[0];
+    const names = {};
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isTaggedTemplateExpression)![0];
 
     handleKeyframes(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        keyframes,
+        names,
       })
     );
 
-    expect(keyframes).toHaveProperty(
-      'buttonAnimation',
-      expect.stringMatching(/animation-[a-z0-9]+/)
-    );
+    expect(names).toHaveProperty('buttonAnimation', expect.stringMatching(/animation-[a-z0-9]+/));
   });
 
   it('should transform CallExpression', () => {
@@ -90,15 +87,17 @@ describe('handleKeyframes', () => {
     `);
 
     const styles = {};
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'keyframes', ts.isCallExpression)[0];
+    const names = {};
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, 'keyframes', ts.isCallExpression)![0];
 
-    handleKeyframes(node, withDefaultContext(program.getTypeChecker(), {styles}));
+    handleKeyframes(node, withDefaultContext(program.getTypeChecker(), {styles, names}));
 
     expect(styles['test.css']).toContainEqual(
       expect.stringMatching(
         /@keyframes animation-[a-z0-9]+\s+{\s+from\s+{\s+transform: scale\(0.85\);\s+}\s+to\s+{\s+transform: scale\(1.0\);\s+}\s+}/
       )
     );
+    expect(names).toHaveProperty('buttonAnimation', expect.stringMatching(/animation-[a-z0-9]+/));
   });
 });
diff --git a/modules/styling-transform/spec/utils/handleParentModifier.spec.ts b/modules/styling-transform/spec/utils/handleParentModifier.spec.ts
new file mode 100644
index 0000000000..a6cdc837ed
--- /dev/null
+++ b/modules/styling-transform/spec/utils/handleParentModifier.spec.ts
@@ -0,0 +1,82 @@
+import ts from 'typescript';
+
+import {createProgramFromSource} from '../createProgramFromSource';
+
+import {transform, withDefaultContext, _reset} from '../../lib/styleTransform';
+import {compileCSS} from '../../lib/utils/createStyleObjectNode';
+
+describe('handleParentModifier', () => {
+  let program: ts.Program;
+  let result: string;
+
+  const styles = {};
+  const names = {};
+  const extractedNames = {};
+
+  beforeAll(() => {
+    _reset();
+    program = createProgramFromSource(`
+      import {createStencil, parentModifier} from '@workday/canvas-kit-styling';
+
+      const buttonStencil = createStencil({
+        vars: {
+          color: 'red'
+        },
+        base: {},
+        modifiers: {
+          size: {
+            large: {padding: 20},
+            small: {padding: 10}
+          }
+        }
+      })
+
+      const childStencil = createStencil({
+        base: {
+          [parentModifier(buttonStencil.modifiers.size.large)]: {
+            color: 'blue',
+          }
+        }
+      })
+    `);
+
+    result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {styles, names, extractedNames})
+    );
+  });
+
+  it('should add a mapping from the CSS class name to the hash to the names cache', () => {
+    expect(names).toHaveProperty(
+      names['buttonStencil.modifiers.size.large'],
+      names['buttonStencil.modifiers.size.large'].replace('css-', 'm')
+    );
+  });
+
+  it('should add a mapping from the hash to the extracted CSS class name to the extractedNames cache', () => {
+    expect(extractedNames).toHaveProperty(
+      names['buttonStencil.modifiers.size.large'].replace('css-', 'm'),
+      'css-button--size-large'
+    );
+  });
+
+  it('should transform the runtime to include a selector with only the hash', () => {
+    expect(result).toContain(
+      `.${names['buttonStencil.modifiers.size.large'].replace('css-', 'm')} :where(&){color:blue;}`
+    );
+  });
+
+  it('should extract CSS to include the fully qualified modifier name', () => {
+    expect(styles['test.css']).toContainEqual(
+      compileCSS(`
+          .css-child {
+            box-sizing: border-box;
+          }
+          .css-button--size-large :where(.css-child) {
+            color: blue;
+          }
+      `)
+    );
+  });
+});
diff --git a/modules/styling-transform/spec/utils/handlePx2Rem.spec.ts b/modules/styling-transform/spec/utils/handlePx2Rem.spec.ts
index fe7d16b450..dc9b8718ec 100644
--- a/modules/styling-transform/spec/utils/handlePx2Rem.spec.ts
+++ b/modules/styling-transform/spec/utils/handlePx2Rem.spec.ts
@@ -13,8 +13,8 @@ describe('handlePx2Rem', () => {
       px2rem(20)
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'px2rem')[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, 'px2rem')![0];
 
     const result = handlePx2Rem(node, withDefaultContext(program.getTypeChecker()));
 
@@ -26,8 +26,8 @@ describe('handlePx2Rem', () => {
       px2rem(20, 10)
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'px2rem')[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, 'px2rem')![0];
 
     const result = handlePx2Rem(node, withDefaultContext(program.getTypeChecker()));
 
diff --git a/modules/styling-transform/spec/utils/parseNodeToStaticValue.spec.ts b/modules/styling-transform/spec/utils/parseNodeToStaticValue.spec.ts
index 4bda937a55..d78998fc61 100644
--- a/modules/styling-transform/spec/utils/parseNodeToStaticValue.spec.ts
+++ b/modules/styling-transform/spec/utils/parseNodeToStaticValue.spec.ts
@@ -12,8 +12,8 @@ describe('parseNodeToStaticValue', () => {
       'foo'
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isStringLiteral)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isStringLiteral)![0];
 
     expect(parseNodeToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual(
       'foo'
@@ -25,8 +25,8 @@ describe('parseNodeToStaticValue', () => {
       12
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isNumericLiteral)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isNumericLiteral)![0];
 
     expect(parseNodeToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual(12);
   });
@@ -36,8 +36,8 @@ describe('parseNodeToStaticValue', () => {
       const foo = 'bar';
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isIdentifier)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isIdentifier)![0];
 
     expect(parseNodeToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual(
       'bar'
@@ -49,8 +49,8 @@ describe('parseNodeToStaticValue', () => {
       const foo = 12;
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isIdentifier)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isIdentifier)![0];
 
     expect(parseNodeToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual(12);
   });
@@ -62,8 +62,8 @@ describe('parseNodeToStaticValue', () => {
       foo.bar
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isPropertyAccessExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isPropertyAccessExpression)![0];
 
     expect(parseNodeToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual(
       'baz'
@@ -77,8 +77,8 @@ describe('parseNodeToStaticValue', () => {
       foo.bar.baz
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isPropertyAccessExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isPropertyAccessExpression)![0];
 
     expect(parseNodeToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual(12);
   });
@@ -88,15 +88,15 @@ describe('parseNodeToStaticValue', () => {
       foo.bar
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isPropertyAccessExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isPropertyAccessExpression)![0];
 
     expect(
       parseNodeToStaticValue(
         node,
         withDefaultContext(program.getTypeChecker(), {
-          variables: {
-            'foo-bar': '--css-foo-bar',
+          names: {
+            'foo.bar': '--css-foo-bar',
           },
         })
       )
@@ -110,8 +110,8 @@ describe('parseNodeToStaticValue', () => {
       foo[1]
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isElementAccessExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isElementAccessExpression)![0];
 
     expect(parseNodeToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual(
       '12px'
@@ -125,8 +125,8 @@ describe('parseNodeToStaticValue', () => {
       foo[0]
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isElementAccessExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isElementAccessExpression)![0];
 
     expect(parseNodeToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual(
       '12px'
@@ -140,15 +140,37 @@ describe('parseNodeToStaticValue', () => {
       }
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isComputedPropertyName)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isComputedPropertyName)![0];
 
     expect(
       parseNodeToStaticValue(
         node,
         withDefaultContext(program.getTypeChecker(), {
-          variables: {
-            'foo-bar': '--css-foo-bar',
+          names: {
+            'foo.bar': '--css-foo-bar',
+          },
+        })
+      )
+    ).toEqual('--css-foo-bar');
+  });
+
+  it('should return the string value of a ComputedPropertyName around a TemplateStringLiteral of a variable', () => {
+    const program = createProgramFromSource(`
+      const temp = {
+        [\`\${foo.bar\}\`]: 'baz'
+      }
+    `);
+
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isComputedPropertyName)![0];
+
+    expect(
+      parseNodeToStaticValue(
+        node,
+        withDefaultContext(program.getTypeChecker(), {
+          names: {
+            'foo.bar': '--css-foo-bar',
           },
         })
       )
@@ -164,8 +186,8 @@ describe('parseNodeToStaticValue', () => {
       }
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isComputedPropertyName)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isComputedPropertyName)![0];
 
     expect(parseNodeToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual(
       '--bar'
@@ -177,14 +199,14 @@ describe('parseNodeToStaticValue', () => {
       \`\${myAnimation} 1s ease\`
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isTemplateExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isTemplateExpression)![0];
 
     expect(
       parseNodeToStaticValue(
         node,
         withDefaultContext(program.getTypeChecker(), {
-          keyframes: {myAnimation: 'animation-abc123'},
+          names: {myAnimation: 'animation-abc123'},
         })
       )
     ).toEqual('animation-abc123 1s ease');
diff --git a/modules/styling-transform/spec/utils/parseObjectToStaticValue.spec.ts b/modules/styling-transform/spec/utils/parseObjectToStaticValue.spec.ts
index 6af2ea03a4..7327180d06 100644
--- a/modules/styling-transform/spec/utils/parseObjectToStaticValue.spec.ts
+++ b/modules/styling-transform/spec/utils/parseObjectToStaticValue.spec.ts
@@ -75,8 +75,8 @@ describe('parseObjectToStaticValue', () => {
       }
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)![0];
 
     expect(parseObjectToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual({
       bar: '12px',
@@ -92,8 +92,8 @@ describe('parseObjectToStaticValue', () => {
       }
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)![0];
 
     expect(parseObjectToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual({
       '&:hover': {
@@ -113,8 +113,8 @@ describe('parseObjectToStaticValue', () => {
       const bar = { ...foo }
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)[2];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)![2];
 
     expect(parseObjectToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual({
       '&:hover': {
@@ -132,8 +132,8 @@ describe('parseObjectToStaticValue', () => {
       const bar = { ...foo }
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)[1];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)![1];
 
     expect(parseObjectToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual({
       color: 'var(--var-color)',
@@ -151,8 +151,8 @@ describe('parseObjectToStaticValue', () => {
       const bar = { ...foo }
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)[2];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)![2];
 
     expect(parseObjectToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual({
       '&:hover': {
@@ -161,6 +161,26 @@ describe('parseObjectToStaticValue', () => {
     });
   });
 
+  it('should handle a ShorthandPropertyAssignment when the Identifier is a known name', () => {
+    const program = createProgramFromSource(`
+      const foo = {
+        margin,
+      }
+    `);
+
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)![0];
+
+    expect(
+      parseObjectToStaticValue(
+        node,
+        withDefaultContext(program.getTypeChecker(), {names: {margin: '12px'}})
+      )
+    ).toEqual({
+      margin: '12px',
+    });
+  });
+
   it('should return the result of the spread operator with a call expression that can return a statically analyzed return', () => {
     const program = createProgramFromSource(`
       const makeFontSize = <T extends string>(input: T): { fontSize: T} => {
@@ -174,8 +194,8 @@ describe('parseObjectToStaticValue', () => {
       }
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)[1];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)![1];
 
     expect(parseObjectToStaticValue(node, withDefaultContext(program.getTypeChecker()))).toEqual({
       fontSize: '12px',
@@ -189,14 +209,14 @@ describe('parseObjectToStaticValue', () => {
       }
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)![0];
 
     expect(
       parseObjectToStaticValue(
         node,
         withDefaultContext(program.getTypeChecker(), {
-          variables: {
+          names: {
             '--fallback': '12px',
           },
         })
@@ -213,14 +233,14 @@ describe('parseObjectToStaticValue', () => {
       }
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)![0];
 
     expect(
       parseObjectToStaticValue(
         node,
         withDefaultContext(program.getTypeChecker(), {
-          variables: {
+          names: {
             '--fallback': '12px',
           },
         })
diff --git a/modules/styling/lib/cs.ts b/modules/styling/lib/cs.ts
index ff80877b7b..154d92226f 100644
--- a/modules/styling/lib/cs.ts
+++ b/modules/styling/lib/cs.ts
@@ -32,6 +32,8 @@ export type StyleProps =
 // We can remove this when CSSType supports CSS custom properties
 type CastStyleProps = Exclude<StyleProps, CSSObjectWithVars> | CSSObject;
 
+type DefaultedVarsShape = Record<string, string> | Record<string, Record<string, string>>;
+
 /**
  * Wrap all unwrapped CSS Variables. For example, `{padding: '--foo'}` will be replaced with
  * `{padding: 'var(--foo)'}`. It also works on variables in the middle of the property.
@@ -91,9 +93,9 @@ export type CS = string | Record<string, string>;
  *
  * // optimizer rewrites the code
  * const myVars = createVars<'color', 'myVars'>('color')
- * // type is now `{color: "--myVars-color"}`
+ * // type is now `{color: "--color-myVars"}`
  *
- * myVars.color // type is `--myVars-color`
+ * myVars.color // type is `--color-myVars`
  * ```
  *
  * This is so optimized variables can be used directly by the static parser downstream. The variable
@@ -102,7 +104,7 @@ export type CS = string | Record<string, string>;
 export type CsVarsMap<T extends string, ID extends string | never> = [ID] extends [never]
   ? Record<T, string>
   : // map type. If the ID is known from the style optimizer, use static keys using string template literals instead of `string`
-    {[K in T]: `--${ID}-${MakeEmotionSafe<K>}`};
+    {[K in T]: `--${K}-${ID}`};
 
 export type CsVars<T extends string, ID extends string | never> = CsVarsMap<T, ID> & {
   (input: Partial<Record<T, string>>): Record<T, string>;
@@ -115,7 +117,7 @@ export type CsVars<T extends string, ID extends string | never> = CsVarsMap<T, I
  * const myVars = createVars('color')
  *
  * const myStyles = createStyles({
- *   color: cssVar(myVars.color) // color: 'var(--{hash}-color)'
+ *   color: cssVar(myVars.color) // color: 'var(--color-{hash})'
  * })
  * ```
  *
@@ -123,7 +125,7 @@ export type CsVars<T extends string, ID extends string | never> = CsVarsMap<T, I
  * expect a CSS variable isn't defined.
  * ```ts
  * const myStyles = createStyles({
- *   color: cssVar(myVars.color, 'red') // color: 'var(--{hash}-color, red)'
+ *   color: cssVar(myVars.color, 'red') // color: 'var(--color-{hash}, red)'
  * })
  * ```
  *
@@ -137,18 +139,6 @@ export function cssVar(input: string, fallback?: string) {
     : `var(${input})`;
 }
 
-/**
- * Util function to fix an issue with Emotion by
- * appending `EmotionIssue#3066` to end of css variable
- * See issue: [#3066](https://github.com/emotion-js/emotion/issues/3066)
- */
-const makeEmotionSafe = (key: string): string => {
-  if (key.endsWith('label')) {
-    return `${key}-emotion-safe`;
-  }
-  return key;
-};
-
 /**
  * Create temporary CSS variables to use in components. The CSS variable names will
  * be unique at runtime to avoid collisions. The return value is a function and a
@@ -160,14 +150,14 @@ const makeEmotionSafe = (key: string): string => {
  * const myVars = createVars('color', 'background')
  *
  * // 'color' is a typed property. The type is `string`
- * console.log(myVars.color) // `'var(--{hash}-color)'`
+ * console.log(myVars.color) // `'var(--color-{hash})'`
  *
  * // 'color' is a typed property. The type is `string?`
  * // The returned object can be assigned to the `style` property of an element
- * console.log(myVars({ color: 'red' })) //  `{'--{hash}-color': 'red'}`
+ * console.log(myVars({ color: 'red' })) //  `{'--color-{hash}': 'red'}`
  *
  * const div = document.createElement('div')
- * div.style = myVars({ color: 'red' }) // <div style="--{hash}-color: red;" />
+ * div.style = myVars({ color: 'red' }) // <div style="--color-{hash}: red;" />
  * ```
  */
 
@@ -176,14 +166,13 @@ export function createVars<T extends string, ID extends string>(input: {
   args: T[];
 }): CsVars<T, ID>;
 export function createVars<T extends string>(...args: T[]): CsVars<T, never>;
-export function createVars<
-  T extends Record<string, string> | Record<string, Record<string, string>>,
-  ID extends string = never
->(input: T, id?: ID): DefaultedVars<T, ID>;
-export function createVars<
-  T extends string | Record<string, string> | Record<string, Record<string, string>>,
-  ID extends string
->(...args: T[]): any {
+export function createVars<T extends DefaultedVarsShape, ID extends string = never>(
+  input: T,
+  id?: ID
+): DefaultedVars<T, ID>;
+export function createVars<T extends string | DefaultedVarsShape, ID extends string>(
+  ...args: T[]
+): any {
   const arg0 = args[0];
   if (typeof arg0 === 'object' && !(arg0 as any).id) {
     // this is a defaulted var
@@ -205,37 +194,58 @@ export function createVars<
 
   args.forEach(key => {
     // @ts-ignore
-    result[key] = `--${id}-${makeEmotionSafe(key)}`;
+    result[key] = `--${key}-${id}`;
   }, {});
 
   return result;
 }
 
-type MakeEmotionSafe<T extends string> = T extends `${infer S}label` ? `${S}label-emotion-safe` : T;
-
 // Type to create CSS Variable names based on JS names and ID
-type CSSVarName<ID extends string, Name> = `--${ID}-${MakeEmotionSafe<ToString<Name>>}`;
+type CSSVarName<ID extends string, Name> = `--${ToString<Name>}-${ID}`;
 
 /**
- * For custom themes that do not overwrite every default.
+ * For custom themes that do not overwrite every default. This is the type given to stencil
+ * functions where everything is optional.
  */
 type OptionalVars<T> = {
   [P in keyof T]?: T[P] extends string ? string : OptionalVars<T[P]>; // coerce CSS Variables to a string to allow any overrides in the function
 };
 
+/**
+ * Vars passed to style config functions. The values will always be strings.
+ */
+type RequiredVars<T> = {
+  [P in keyof T]: T[P] extends string ? string : RequiredVars<T[P]>; // coerce CSS Variables to a string to allow any overrides in the function
+};
+
 type ToString<T> = string & T;
 
-export type DefaultedVarsMap<
-  T extends Record<string, string> | Record<string, Record<string, string>>,
+/**
+ * Maps JS var names to CSS variable names
+ *
+ * ```ts
+ * // ID unknown
+ * DefaultedVarsMapToCSSVarNames<{foo: 'red'}, never> = Record<'foo', string>
+ * // ID unknown, nested
+ * DefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}> = Record<'foo', Record<'bar', string>>
+ *
+ * // ID known
+ * DefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}, 'my-id'> = { foo: '--red-my-id' }
+ * // ID known, nested
+ * DefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}, 'my-id'> = { foo: { bar: '--red-my-id' }}
+ * ```
+ */
+export type DefaultedVarsMapToCSSVarNames<
+  V extends DefaultedVarsShape,
   ID extends string | never
 > = [ID] extends [never]
-  ? T extends Record<string, string>
-    ? Record<keyof T, string>
-    : {[K in keyof T]: Record<keyof T[K], string>}
+  ? V extends Record<string, string>
+    ? {[K in keyof V]: V[K]}
+    : {[K in keyof V]: {[K2 in keyof V[K]]: V[K][K2]}}
   : // map type. If the ID is known from the style optimizer, use static keys using string template literals instead of `string`
     {
-      [K in keyof T]: T[K] extends Record<string, string>
-        ? DefaultedVarsMap<T[K], `${ID}-${ToString<K>}`> // TypeScript doesn't know K is a string here and will throw an error, so we have to coerce it
+      [K in keyof V]: V[K] extends Record<string, string>
+        ? {[K2 in keyof V[K]]: CSSVarName<`${ToString<K2>}-${ID}`, K>} //DefaultedVarsMapToCSSVarNames<V[K], `${ToString<K>}-${ID}`> // TypeScript doesn't know K is a string here and will throw an error, so we have to coerce it
         : CSSVarName<ID, K>;
     };
 
@@ -247,18 +257,51 @@ type ExtractValue<T, K> = K extends keyof T
     : never
   : never;
 
-type DefaultedVars<
-  T extends Record<string, string> | Record<string, Record<string, string>>,
-  ID extends string
-> = DefaultedVarsMap<T, ID> & {
-  (input: OptionalVars<T>): Record<string, string>;
+/**
+ * Maps CSS var names to defaulted values if possible. If no ID is provided, TypeScript won't know
+ * the CSS var name and will return `Record<string, string>`. If the ID is known, a full mapping
+ * will be returned.
+ *
+ * ```ts
+ * // ID known
+ * DefaultedVarsMap<{foo: 'red'}, 'my-id'> = { '--foo-my-id': 'red' }
+ * // ID known, nested
+ * DefaultedVarsMap<{foo: { bar: 'red' }}, 'my-id'> = { foo: { '--bar-my-id': 'red' }}
+ * ```
+ */
+export type DefaultedVarsMap<V extends DefaultedVarsShape, ID extends string> = {
   $$defaults: [ID] extends [never] // test if `ID` extends `never`.
     ? Record<string, string> // it does. It means we don't know the ID and`Record<string, string>` is as accurate as we can get
-    : T extends Record<string, string> // it does not. ID is a string and we need to test what the structure looks like
+    : V extends Record<string, string> // it does not. ID is a string and we need to test what the structure looks like
     ? {
-        [K in keyof T as CSSVarName<ID, K>]: T[K]; // The variables are a simple flat object with string values
+        [K in keyof V as CSSVarName<ID, K>]: V[K]; // The variables are a simple flat object with string values
       }
-    : {[K in FlattenObjectKeys<T> as CSSVarName<ID, K>]: ExtractValue<T, K>};
+    : {[K in FlattenObjectKeys<V> as CSSVarName<ID, K>]: ExtractValue<V, K>};
+};
+
+type DefaultedVars<V extends DefaultedVarsShape, ID extends string> = DefaultedVarsMapToCSSVarNames<
+  V,
+  ID
+> &
+  DefaultedVarsMap<V, ID> &
+  DefaultVarsFn<V>;
+
+type StencilDefaultVars<
+  V extends DefaultedVarsShape,
+  E extends BaseStencil<any, any, any, any> = never,
+  ID extends string = never
+> = [E] extends [never]
+  ? DefaultedVars<V, ID>
+  : E extends BaseStencil<any, infer VE, any, infer IDE>
+  ? DefaultedVarsMapToCSSVarNames<VE, IDE> &
+      DefaultedVarsMap<VE, IDE> &
+      DefaultedVarsMapToCSSVarNames<V, ID> &
+      DefaultedVarsMap<V, ID> &
+      DefaultVarsFn<V>
+  : never;
+
+type DefaultVarsFn<V extends DefaultedVarsShape> = {
+  (input: OptionalVars<V>): Record<string, string>;
 };
 
 type FlattenObjectKeys<T extends Record<string, any>, K = keyof T> = K extends string
@@ -267,10 +310,10 @@ type FlattenObjectKeys<T extends Record<string, any>, K = keyof T> = K extends s
     : `${ToString<K>}`
   : never;
 
-export function createDefaultedVars<
-  T extends Record<string, string> | Record<string, Record<string, string>>,
-  ID extends string = never
->(input: T, id?: ID): DefaultedVars<T, ID> {
+export function createDefaultedVars<T extends DefaultedVarsShape, ID extends string = never>(
+  input: T,
+  id?: ID
+): DefaultedVars<T, ID> {
   const localId = id || generateUniqueId();
 
   const result: DefaultedVars<{}, string> = input => {
@@ -302,7 +345,7 @@ export function createDefaultedVars<
   // eslint-disable-next-line guard-for-in
   for (const key in input) {
     if (typeof input[key] === 'string') {
-      const cssVarName = `--${localId}-${makeEmotionSafe(key)}`;
+      const cssVarName = `--${key}-${localId}`;
       (result as any)[key] = cssVarName;
       (result as any).$$defaults[cssVarName] = input[key];
     }
@@ -310,7 +353,7 @@ export function createDefaultedVars<
       (result as any)[key] = {};
       for (const subKey in input[key]) {
         if (typeof input[key][subKey] === 'string') {
-          const cssVarName = `--${localId}-${key}-${makeEmotionSafe(subKey)}`;
+          const cssVarName = `--${key}-${subKey}-${localId}`;
           (result as any)[key][subKey] = cssVarName;
           (result as any).$$defaults[cssVarName] = input[key][subKey];
         }
@@ -333,8 +376,9 @@ type ModifierValues<T extends ModifierConfig> = {
   [P in keyof T]: MaybeBoolean<keyof T[P]>;
 };
 
-export type ModifierReturn<T extends ModifierConfig> = T &
-  ((modifiers: Partial<ModifierValues<T>>) => string);
+type ModifierFn<T extends ModifierConfig> = (modifiers: Partial<ModifierValues<T>>) => string;
+
+export type ModifierReturn<T extends ModifierConfig> = T & ModifierFn<T>;
 
 /**
  * Creates a modifier function that takes in a modifier config and will return a CSS class name that
@@ -413,8 +457,8 @@ export function createCompoundModifiers<M extends ModifierConfig>(
    */
   modifiers: ModifierReturn<M>,
   compound: CompoundModifier<M>[]
-): ModifierReturn<M> {
-  return (modifiers => {
+): ModifierFn<M> {
+  return modifiers => {
     return combineClassNames(
       compound.map(compoundModifier => {
         const match = Object.keys(compoundModifier.modifiers).reduce(
@@ -432,7 +476,7 @@ export function createCompoundModifiers<M extends ModifierConfig>(
         return '';
       })
     );
-  }) as ModifierReturn<M>;
+  };
 }
 
 function isCsPropsReturn(input: {}): input is CsToPropsReturn {
@@ -457,7 +501,7 @@ export type CsToPropsReturn = {className?: string; style?: CSSObjectWithVars};
  * - `string` - it represents a CSS class name
  * - `undefined` - there is no value. This is provided for convenience for developers to not have to
  *   filter out undefined
- * - `{--{hash}-{varName}: {value}}` - a `Map` of CSS variable to values
+ * - `{--{varName}-{hash}: {value}}` - a `Map` of CSS variable to values
  * - `{style: ..., className: ...}` an object already returned by another `csToProps` function call
  *   (for nesting)
  * - An array containing any of the above. This will recurse over each entry to produce a single,
@@ -589,6 +633,7 @@ export function createStyles(
 
       // If we were called with a {name, styles} object, it must be optimized. We'll shortcut here
       if (typeof input === 'object' && input.name) {
+        createStylesCache[`${instance.cache.key}-${input.name}`] = true;
         return instance.css(input as CastStyleProps);
       }
 
@@ -744,14 +789,24 @@ export function handleCsProp<
   } as Omit<T, 'cs'>;
 }
 
-type StylesReturn<V extends Record<string, string> | Record<string, Record<string, string>> = {}> =
+type StylesReturn<
+  V extends DefaultedVarsShape = {},
+  E extends BaseStencil<any, any, any, any> = never
+> =
   | SerializedStyles
   | CSSObjectWithVars
-  | ((vars: OptionalVars<V>) => SerializedStyles | CSSObjectWithVars);
+  | ((
+      vars: [E] extends [never]
+        ? RequiredVars<V>
+        : [E] extends [BaseStencil<any, infer VE, any, any>]
+        ? RequiredVars<VE & V>
+        : never
+    ) => SerializedStyles | CSSObjectWithVars);
 
 export type StencilModifierConfig<
-  V extends Record<string, string> | Record<string, Record<string, string>> = {}
-> = Record<string, Record<string, StylesReturn<V>>>;
+  V extends DefaultedVarsShape = {},
+  E extends BaseStencil<any, any, any, any> = never
+> = Record<string, Record<string, StylesReturn<V, E>>>;
 
 export type StencilCompoundConfig<M> = {
   modifiers: {[K in keyof M]?: MaybeBoolean<keyof M[K]>};
@@ -759,8 +814,8 @@ export type StencilCompoundConfig<M> = {
 };
 
 type ModifierValuesStencil<
-  M extends StencilModifierConfig,
-  V extends Record<string, string> | Record<string, Record<string, string>> = {}
+  M extends StencilModifierConfig<any, any>,
+  V extends DefaultedVarsShape = {}
 > = {
   [P in keyof M]?: P extends keyof V
     ? MaybeBoolean<keyof M[P]> | (string & {}) // If both modifiers and variables define the same key, the value can be either a modifier or a string
@@ -768,15 +823,83 @@ type ModifierValuesStencil<
 };
 
 export interface StencilConfig<
-  M extends Record<string, Record<string, StylesReturn<V>>>,
-  V extends Record<string, string> | Record<string, Record<string, string>> = {},
+  M extends Record<string, Record<string, StylesReturn<V, E>>>,
+  V extends DefaultedVarsShape = {},
+  E extends BaseStencil<any, any, any, any> = never,
   ID extends string | never = never
 > {
+  /**
+   * A Stencil can extend another stencil. Styles are not copied from one stencil to another, but
+   * rather the class name generated for each stencil will be included in the stencil output. For
+   * example:
+   *
+   * ```ts
+   * const baseStencil = createStencil({
+   *   base: {padding: 5}
+   * });
+   * const extendingStencil = createStencil({
+   *   extends: baseStencil,
+   *   base: {margin: 5}
+   * });
+   * ```
+   *
+   * In this example, `extendingStencil` does not have a base style that includes `padding`, but
+   * calling the stencil will return both style classes created:
+   *
+   * ```ts
+   * extendingStencil() // {className: 'css-{base} css-{extending}'}
+   * ```
+   *
+   * Notice when the stencil is called, it will return the CSS class name of each stencil.
+   *
+   * An extending stencil can use a `compound` modifier that includes references to the base stencil
+   * modifiers. For runtime, each compound modifier has a unique class name. The static CSS
+   * extraction will use the base modifier name in the selector.
+   */
+  extends?: E;
+  /**
+   * A stencil can support CSS variables. Since CSS variables cascade by default, variables are
+   * defined with defaults. These defaults are added automatically to the `base` styles to prevent
+   * CSS variables defined higher in the DOM tree from cascading into a component.
+   *
+   * ```ts
+   * const buttonStencil = createStencil({
+   *   vars: {color: 'red'},
+   *   base: {padding: 5}
+   * })
+   * ```
+   *
+   * ```css
+   * .css-button {
+   *   --css-button-color: red;
+   *   padding: 5px;
+   * }
+   * ```
+   *
+   * Access to variables in `base` and `modifiers` is done via a function wrapper that gives
+   * all variables.
+   *
+   * ```ts
+   * const buttonStencil = createStyles({
+   *   vars: {color: 'red'},
+   *   base({color}) {
+   *     return {color: color}
+   *   }
+   * })
+   * ```
+   *
+   * ```css
+   * .css-button {
+   *   --color-button: red;
+   *   color: var(--color-button);
+   * }
+   * ```
+   */
   vars?: V;
   /**
    * Base styles. These styles will always be returned when the stencil is called
    */
-  base: StylesReturn<V>;
+  base: StylesReturn<V, E>;
   /**
    * Stencil modifiers. The styles of a modifier are returned if the stencil is called with a
    * modifier key that matches the modifier value. For example:
@@ -844,36 +967,70 @@ export interface StencilConfig<
    * // {padding: 10px; paddingInlineStart: 5px;}
    * ```
    */
-  compound?: StencilCompoundConfig<M>[];
+  compound?: ([E] extends [never]
+    ? StencilCompoundConfig<M>
+    : E extends BaseStencil<infer ME, any, any, any>
+    ? StencilCompoundConfig<ME & M>
+    : never)[];
   /**
    * Modifiers are optional. If you need a modifier to always be defined, a default modifier value
    * will be used when a modifier is `undefined`
    */
-  defaultModifiers?: {[K in keyof M]?: keyof M[K]};
+  defaultModifiers?: [E] extends [never]
+    ? StencilDefaultModifierReturn<M>
+    : E extends BaseStencil<infer ME, any, any, any>
+    ? StencilDefaultModifierReturn<M & ME>
+    : undefined;
 }
 
-type StencilModifierReturn<
-  M extends StencilModifierConfig<V>,
-  V extends Record<string, string> | Record<string, Record<string, string>>
-> = {[K1 in keyof M]: {[K2 in keyof M[K1]]: string}};
+type StencilModifierReturn<M extends StencilModifierConfig<V>, V extends DefaultedVarsShape> = {
+  [K1 in keyof M]: {[K2 in keyof M[K1]]: string};
+};
+
+type StencilDefaultModifierReturn<M> = {
+  [K1 in keyof M]?: keyof M[K1];
+};
 
-export type Stencil<
+export interface BaseStencil<
   M extends StencilModifierConfig<V>,
-  V extends Record<string, string> | Record<string, Record<string, string>>,
+  V extends DefaultedVarsShape,
+  E extends BaseStencil<any, any, any, any> = never,
   ID extends string = never
-> = {
-  (modifiers?: ModifierValuesStencil<M, V> & VariableValuesStencil<V>): {
+> {
+  __extends?: E;
+  __vars: V;
+  __modifiers: M;
+  __id: ID;
+}
+
+export interface Stencil<
+  M extends StencilModifierConfig<V, E>,
+  V extends DefaultedVarsShape,
+  E extends BaseStencil<any, any, any, any> = never,
+  ID extends string = never
+> extends BaseStencil<M, V, E, ID> {
+  (
+    // If this stencil extends another stencil, merge the inputs
+    options?: [E] extends [never]
+      ? ModifierValuesStencil<M, V> & VariableValuesStencil<V>
+      : E extends BaseStencil<infer ME, infer VE, any, any>
+      ? ModifierValuesStencil<ME & M> & VariableValuesStencil<VE & V>
+      : never
+  ): {
     className: string;
     style?: Record<string, string>;
   };
-  vars: DefaultedVars<V, ID>;
+  vars: StencilDefaultVars<V, E, ID>;
   base: string;
-  modifiers: StencilModifierReturn<M, V>;
-};
+  modifiers: [E] extends [BaseStencil<infer ME, infer VE, any, any>]
+    ? StencilModifierReturn<ME & M, VE & V>
+    : StencilModifierReturn<M, V>;
+  defaultModifiers: [E] extends [BaseStencil<infer ME, any, any, any>]
+    ? StencilDefaultModifierReturn<ME & M>
+    : StencilDefaultModifierReturn<M>;
+}
 
-type VariableValuesStencil<
-  V extends Record<string, string> | Record<string, Record<string, string>>
-> = V extends Record<string, string>
+type VariableValuesStencil<V extends DefaultedVarsShape> = V extends Record<string, string>
   ? {[K in keyof V]?: string}
   : {[K1 in keyof V]?: {[K2 in keyof V[K1]]: string}};
 
@@ -897,22 +1054,54 @@ function combineClassNames(input: (string | undefined)[]): string {
     .join(' ');
 }
 
+/**
+ * This function is used in conjunction with Stencils to get a selector to match the current element
+ * and a parent modifier. The selector will match a parent element with a modifier applied and the current
+ * element. It should be used on the `base` config of a Stencil.
+ *
+ * ```ts
+ * const childStencil = createStencil({
+ *   base: {
+ *     // base styles
+ *     [parentModifier(parentStencil.modifiers.size.large)]: {
+ *       // maybe adjust padding of this element
+ *     }
+ *   }
+ * })
+ * ```
+ */
+export function parentModifier(value: string) {
+  return `.${value.replace('css-', 'm')} :where(&)`;
+}
+
 /**
  * Creates a reuseable Stencil for styling elements. It takes vars, base styles, modifiers, and
  * compound modifiers.
  */
 export function createStencil<
   M extends StencilModifierConfig<V>,
-  V extends Record<string, string> | Record<string, Record<string, string>> = {},
+  V extends DefaultedVarsShape = {},
+  E extends BaseStencil<any, any, any, any> = never, // use BaseStencil to avoid infinite loops
   ID extends string = never
->(config: StencilConfig<M, V, ID>, id?: ID): Stencil<M, V, ID> {
+>(config: StencilConfig<M, V, E, ID>, id?: ID): Stencil<M, V, E, ID> {
   const {vars, base, modifiers, compound, defaultModifiers} = config;
-  const _vars = createDefaultedVars(vars || {}, id);
+  const composes = config.extends as unknown as Stencil<any, any> | undefined;
+  const _vars = createDefaultedVars(vars || {}, id) as any; // The return type is conditional and TypeScript doesn't like that here
+
+  // combine the vars keys together
+  Object.keys(composes?.vars || {}).forEach(key => {
+    if (key !== '$$defaults') {
+      // @ts-ignore
+      _vars[key] = composes?.vars[key];
+    }
+  });
   const _base = createStyles({
     ..._vars.$$defaults,
+    boxSizing: 'border-box',
     ...(typeof base === 'function' ? base(_vars) : base),
   });
 
+  const composesModifier = composes?.modifiers || (() => '');
   const _modifiers = modifiers
     ? createModifiers(
         Object.keys(modifiers).reduce((result, key) => {
@@ -923,6 +1112,7 @@ export function createStencil<
             result[modifierKey] = createStyles(
               typeof modifier === 'function' ? modifier(_vars) : modifier
             );
+
             return result;
           }, {});
 
@@ -930,6 +1120,26 @@ export function createStencil<
         }, {})
       )
     : () => '';
+
+  Object.keys(composesModifier).forEach(modifier => {
+    // @ts-ignore
+    Object.keys(composesModifier[modifier]).forEach(value => {
+      // @ts-ignore
+      if (!_modifiers[modifier]) {
+        // @ts-ignore
+        _modifiers[modifier] = {};
+      }
+
+      // @ts-ignore
+      _modifiers[modifier][value] = combineClassNames([
+        // @ts-ignore
+        composesModifier[modifier][value],
+        // @ts-ignore
+        _modifiers[modifier][value],
+      ]);
+    });
+  });
+
   const _compound = compound
     ? createCompoundModifiers<{}>(
         // @ts-ignore modifiers are different in a stencil than in createModifiers. The difference is createModifiers expects each value to be a `string` and stencils expects `StyleProps`. Casting is gnarly, so we'll ignore instead
@@ -943,21 +1153,40 @@ export function createStencil<
       )
     : () => '';
 
-  const stencil: Stencil<M, V, ID> = input => {
-    const inputModifiers = {...defaultModifiers, ...input};
+  const stencil: Stencil<M, V, E, ID> = ((input: Record<string, string>) => {
+    const inputModifiers = {...composes?.defaultModifiers, ...defaultModifiers};
+    // Only override defaults if a value is defined
+    for (const key in input) {
+      if (input[key]) {
+        // @ts-ignore
+        inputModifiers[key] = input[key];
+      }
+    }
+    const composesReturn = composes?.(inputModifiers as any);
+    const modifierClasses = _modifiers(inputModifiers);
     return {
       className: combineClassNames([
+        composesReturn?.className,
         _base,
-        modifiers ? _modifiers(inputModifiers) : '',
+        modifierClasses,
+        // For compat mode, we need to add inert class names of modifiers where the `css-` prefix is
+        // removed. For example, `css-base css-mod-1` will become `css-base css-mod-1 mod-1`. The
+        // modifier class without the prefix will be ignored by the Emotion CSS `cx` function and
+        // will remain for the `parentModifier` function to still select on. We decided to add these
+        // inert class names instead of adding `data-m-*` attributes because the output DOM looks
+        // much cleaner and it saves bytes on the bundled output.
+        modifierClasses.replace(/css-/g, 'm'),
         compound ? _compound(inputModifiers) : '',
       ]),
-      style: _vars(input || {}),
+      style: {...composesReturn?.style, ..._vars(input || {})},
     };
-  };
+  }) as any;
 
-  stencil.vars = _vars as DefaultedVars<V, ID>;
-  stencil.base = _base;
-  stencil.modifiers = _modifiers as any as StencilModifierReturn<M, V>;
+  stencil.vars = _vars;
+  stencil.base = combineClassNames([composes?.base, _base]);
+  stencil.modifiers = _modifiers as any; // The return type is conditional and TypeScript doesn't like that here
+  stencil.defaultModifiers = {...composes?.defaultModifiers, ...defaultModifiers} as any;
+  stencil.__extends = composes as any; // The return type is conditional and TypeScript doesn't like that here
 
   return stencil;
 }
diff --git a/modules/styling/lib/px2rem.ts b/modules/styling/lib/px2rem.ts
index 55400b0ebb..957c7c217d 100644
--- a/modules/styling/lib/px2rem.ts
+++ b/modules/styling/lib/px2rem.ts
@@ -6,6 +6,6 @@
  * // returns '0.125rem'
  * ```
  */
-export function px2rem(px: number, base = 16) {
+export function px2rem(px: number, base = 16): string {
   return `${px / base}rem`;
 }
diff --git a/modules/styling/package.json b/modules/styling/package.json
index 3b047156d8..66116a369e 100644
--- a/modules/styling/package.json
+++ b/modules/styling/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-styling",
-  "version": "10.3.60",
+  "version": "11.1.10",
   "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -53,8 +53,9 @@
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.0.2",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^10.3.60",
-    "@workday/canvas-tokens-web": "^1.0.0",
+    "@workday/canvas-kit-react": "^11.1.10",
+    "@workday/canvas-tokens-web": "^2.0.0",
+    "@workday/canvas-system-icons-web": "^3.0.0",
     "typescript": "4.2"
   }
 }
diff --git a/modules/styling/spec/cs.spec.tsx b/modules/styling/spec/cs.spec.tsx
index e7d4f419fb..ec01e87cf7 100644
--- a/modules/styling/spec/cs.spec.tsx
+++ b/modules/styling/spec/cs.spec.tsx
@@ -32,12 +32,12 @@ const CacheWrapper = props => <CacheProvider value={cache} {...props} />;
 const render: typeof rtlRender = (ui, options) =>
   rtlRender(ui, {wrapper: CacheWrapper, ...options});
 
-describe('createStyles', () => {
+describe('cs', () => {
   describe('createStyles', () => {
     it('should accept an object of CSS Properties', () => {
       type Input = Exclude<
         Parameters<typeof createStyles>[0],
-        string | number | boolean | SerializedStyles
+        string | number | boolean | SerializedStyles | undefined
       >;
       type PositionProperty = Input['position'];
       const temp: PositionProperty = 'absolute';
@@ -138,7 +138,7 @@ describe('createStyles', () => {
     it('should create an object with a key of the "color"', () => {
       const myVars = createVars('color');
 
-      expect(myVars).toHaveProperty('color', expect.stringMatching(/--.+-color/));
+      expect(myVars).toHaveProperty('color', expect.stringMatching(/--color-.+/));
     });
 
     it('should return a type object with keys matching each input', () => {
@@ -165,16 +165,9 @@ describe('createStyles', () => {
       expect(myVars({color: '--my-var'})).toHaveProperty(myVars.color, 'var(--my-var)');
     });
 
-    it('should make types Emotion safe when ID is known', () => {
-      const myVars = createVars({id: 'foo', args: ['label']});
-
-      type Input = (typeof myVars)['label'];
-      expectTypeOf<Input>().toMatchTypeOf<'--foo-label-emotion-safe'>();
-    });
-
     it('should type optimized style functions correctly so they can be consumed by other repositories', () => {
       const vars = createVars({id: 'foo', args: ['one']});
-      expectTypeOf(vars.one).toMatchTypeOf<'--foo-one'>();
+      expectTypeOf(vars.one).toMatchTypeOf<'--one-foo'>();
     });
 
     it('should handle an object configuration', () => {
@@ -205,9 +198,9 @@ describe('createStyles', () => {
         'foo'
       );
 
-      expect(myVars.color).toEqual('--foo-color');
+      expect(myVars.color).toEqual('--color-foo');
 
-      expectTypeOf(myVars.color).toEqualTypeOf<'--foo-color'>();
+      expectTypeOf(myVars.color).toEqualTypeOf<'--color-foo'>();
     });
 
     it('should pass the optional ID to each default', () => {
@@ -218,10 +211,10 @@ describe('createStyles', () => {
         'foo'
       );
 
-      expect(myVars.$$defaults).toHaveProperty('--foo-color', 'red');
+      expect(myVars.$$defaults).toHaveProperty('--color-foo', 'red');
 
       expectTypeOf(myVars.$$defaults).toEqualTypeOf<{
-        '--foo-color': 'red';
+        '--color-foo': 'red';
       }>();
     });
 
@@ -238,12 +231,12 @@ describe('createStyles', () => {
       expect(myVars).toHaveProperty('default');
       expect(myVars.default).toHaveProperty(
         'color',
-        expect.stringMatching(/--[a-z0-9]+-default-color/)
+        expect.stringMatching(/--default-color-[a-z0-9]+/)
       );
       expect(myVars).toHaveProperty('hover');
       expect(myVars.hover).toHaveProperty(
         'color',
-        expect.stringMatching(/--[a-z0-9]+-hover-color/)
+        expect.stringMatching(/--hover-color-[a-z0-9]+/)
       );
 
       expectTypeOf(myVars).toHaveProperty('default');
@@ -284,16 +277,16 @@ describe('createStyles', () => {
         },
         'foo'
       );
-
+      // BigO2023
       expect(myVars).toHaveProperty('default');
-      expect(myVars.default).toHaveProperty('color', expect.stringMatching('--foo-default-color'));
+      expect(myVars.default).toHaveProperty('color', expect.stringMatching('--default-color-foo'));
       expect(myVars).toHaveProperty('hover');
-      expect(myVars.hover).toHaveProperty('color', expect.stringMatching('--foo-hover-color'));
+      expect(myVars.hover).toHaveProperty('color', expect.stringMatching('--hover-color-foo'));
 
       expectTypeOf(myVars).toHaveProperty('default');
-      expectTypeOf(myVars.default).toEqualTypeOf<{color: '--foo-default-color'}>();
+      expectTypeOf(myVars.default).toEqualTypeOf<{color: '--default-color-foo'}>();
       expectTypeOf(myVars).toHaveProperty('hover');
-      expectTypeOf(myVars.hover).toEqualTypeOf<{color: '--foo-hover-color'}>();
+      expectTypeOf(myVars.hover).toEqualTypeOf<{color: '--hover-color-foo'}>();
     });
 
     it('should use the optional ID with nested variables in $$defaults', () => {
@@ -311,15 +304,15 @@ describe('createStyles', () => {
       );
 
       expect(myVars).toHaveProperty('$$defaults');
-      expect(myVars.$$defaults).toHaveProperty('--foo-default-color', 'blue');
-      expect(myVars.$$defaults).toHaveProperty('--foo-default-background', 'white');
-      expect(myVars.$$defaults).toHaveProperty('--foo-hover-color', 'red');
+      expect(myVars.$$defaults).toHaveProperty('--default-color-foo', 'blue');
+      expect(myVars.$$defaults).toHaveProperty('--default-background-foo', 'white');
+      expect(myVars.$$defaults).toHaveProperty('--hover-color-foo', 'red');
 
       expectTypeOf(myVars).toHaveProperty('$$defaults');
       expectTypeOf(myVars.$$defaults).toEqualTypeOf<{
-        '--foo-default-color': 'blue';
-        '--foo-default-background': 'white';
-        '--foo-hover-color': 'red';
+        '--default-color-foo': 'blue';
+        '--default-background-foo': 'white';
+        '--hover-color-foo': 'red';
       }>();
     });
   });
@@ -536,7 +529,18 @@ describe('createStyles', () => {
 
       expect(screen.getByTestId('test1')).toHaveStyle({padding: '10px'});
       expect(screen.getByTestId('test2')).toHaveStyle({padding: '20px'});
-      expect(myStencil({size: 'large'}).className.split(' ')).toHaveLength(2);
+
+      expect(myStencil({size: 'large'}).className).toContain(myStencil.base);
+      expect(myStencil({size: 'large'}).className).toContain(myStencil.modifiers.size.large);
+
+      // type signature of stencil call expression
+      type Arg = Parameters<typeof myStencil>[0];
+      expectTypeOf<Arg>().toMatchTypeOf<
+        | undefined
+        | {
+            size?: 'large';
+          }
+      >();
     });
 
     it('should set the `modifiers` property with the className of the modifier', () => {
@@ -575,11 +579,30 @@ describe('createStyles', () => {
         },
       });
 
-      expect(myStencil({position: 'start', size: 'large'}).className).toEqual(
+      expect(myStencil({position: 'start', size: 'large'}).className).toContain(
         `${myStencil.base} ${myStencil.modifiers.size.large} ${myStencil.modifiers.position.start}`
       );
     });
 
+    it('should add the hash of the modifier to the className to handle parentModifier selectors in compat mode', () => {
+      const myStencil = createStencil({
+        base: {},
+        modifiers: {
+          size: {
+            large: {},
+          },
+        },
+      });
+
+      const {className} = myStencil({size: 'large'});
+
+      expect(className).toEqual(
+        `${myStencil.base} ${
+          myStencil.modifiers.size.large
+        } ${myStencil.modifiers.size.large.replace('css-', 'm')}`
+      );
+    });
+
     it('should default modifiers if no modifier override is passed', () => {
       const myStencil = createStencil({
         base: {
@@ -651,7 +674,13 @@ describe('createStyles', () => {
       });
 
       // 4 class names - base, size, position, size-position
-      expect(myStencil({size: 'large', position: 'start'}).className.split(' ')).toHaveLength(4);
+      expect(myStencil({size: 'large', position: 'start'}).className.split(' ')).toHaveLength(6); // 4 + 2 modifier hashes
+      const {className} = myStencil({size: 'large', position: 'start'});
+
+      expect(className).toContain(myStencil.base);
+      expect(className).toContain(myStencil.modifiers.size.large);
+      expect(className).toContain(myStencil.modifiers.position.start);
+      // we don't have access to the compound modifier class name
     });
 
     it('should return access to variables for use in other components', () => {
@@ -666,7 +695,7 @@ describe('createStyles', () => {
       expectTypeOf(myStencil.vars).toHaveProperty('color');
       expectTypeOf(myStencil.vars.color).toEqualTypeOf<string>();
 
-      expect(myStencil).toHaveProperty('vars.color', expect.stringMatching(/--[a-z0-9]+-color/));
+      expect(myStencil).toHaveProperty('vars.color', expect.stringMatching(/--color-[a-z0-9]+/));
     });
 
     it('should coerce a variable input to a type of string', () => {
@@ -677,9 +706,9 @@ describe('createStyles', () => {
         base: {},
       });
 
-      type Options = Parameters<typeof myStencil>[0];
+      type Options = Exclude<Parameters<typeof myStencil>[0], undefined>;
 
-      expectTypeOf<Options['foo']>().toEqualTypeOf<string>();
+      expectTypeOf<Options['foo']>().toEqualTypeOf<string | undefined>();
 
       // make sure we can call the function with a string
       myStencil({
@@ -700,9 +729,9 @@ describe('createStyles', () => {
 
       expectTypeOf(myStencil).toHaveProperty('vars');
       expectTypeOf(myStencil.vars).toHaveProperty('color');
-      expectTypeOf(myStencil.vars.color).toEqualTypeOf<'--foo-color'>();
+      expectTypeOf(myStencil.vars.color).toEqualTypeOf<'--color-foo'>();
 
-      expect(myStencil).toHaveProperty('vars.color', expect.stringMatching(/--foo-color/));
+      expect(myStencil).toHaveProperty('vars.color', expect.stringMatching(/--color-foo/));
     });
 
     it('should return a function that takes in an object with the values and wrap passed css variables', () => {
@@ -794,13 +823,10 @@ describe('createStyles', () => {
               width: '0',
             },
           },
-          foo: {
-            true: {},
-          },
         },
       });
 
-      type Arg = Parameters<typeof myStencil>[0];
+      type Arg = Exclude<Parameters<typeof myStencil>[0], undefined>;
       expectTypeOf<Arg>().toHaveProperty('width');
       expectTypeOf<Arg['width']>().toMatchTypeOf<(string & {}) | 'zero' | undefined>();
 
@@ -816,7 +842,341 @@ describe('createStyles', () => {
       expect(result2.style).toHaveProperty(myStencil.vars.width, 'zero');
 
       // match base and width modifier
-      expect(result2.className).toEqual(`${myStencil.base} ${myStencil.modifiers.width.zero}`);
+      expect(result2.className).toContain(`${myStencil.base} ${myStencil.modifiers.width.zero}`);
+    });
+
+    it('should convert "true" modifiers into boolean', () => {
+      const myStencil = createStencil({
+        vars: {
+          foo: 'red',
+        },
+        base: {},
+        modifiers: {
+          size: {
+            large: {},
+          },
+          grow: {
+            true: {},
+          },
+        },
+        // make sure boolean modifiers are valid in compound config
+        compound: [{modifiers: {size: 'large', grow: true}, styles: {}}],
+      });
+
+      type Args = Exclude<Parameters<typeof myStencil>[0], undefined>;
+
+      expectTypeOf<Args>().toHaveProperty('grow');
+      expectTypeOf<Args['grow']>().toEqualTypeOf<boolean | undefined>();
+
+      // Make sure the function call passes type checks. Even though we tested the type parameter,
+      // the actual function call may still fail type checks. We need to make sure type conditionals
+      // distribute in the correct order
+      myStencil({
+        grow: true,
+      });
+    });
+
+    describe('when extending', () => {
+      it('should have both stencil class names', () => {
+        const baseStencil = createStencil({
+          base: {},
+        });
+
+        const extendedStencil = createStencil({
+          extends: baseStencil,
+          base: {},
+        });
+
+        expect(extendedStencil()).toHaveProperty(
+          'className',
+          expect.stringMatching(/css-[a-z0-9]+ css-[a-z0-9]+/)
+        );
+      });
+
+      it('should extend modifiers and return modifier class names', () => {
+        const baseStencil = createStencil({
+          base: {},
+          modifiers: {
+            size: {
+              large: {},
+            },
+          },
+        });
+
+        const extendedStencil = createStencil({
+          extends: baseStencil,
+          base: {},
+          modifiers: {
+            extra: {
+              true: {},
+            },
+          },
+        });
+
+        expect(extendedStencil.modifiers).toHaveProperty(
+          'size.large',
+          baseStencil.modifiers.size.large
+        );
+        expect(extendedStencil.modifiers).toHaveProperty('extra.true');
+        extendedStencil({size: 'large'});
+
+        expect(extendedStencil({size: 'large'})).toHaveProperty(
+          'className',
+          expect.stringContaining(baseStencil.modifiers.size.large)
+        );
+
+        // types
+        expectTypeOf(extendedStencil).toHaveProperty('modifiers');
+        expectTypeOf(extendedStencil.modifiers).toHaveProperty('size');
+        expectTypeOf(extendedStencil.modifiers.size).toHaveProperty('large');
+        expectTypeOf(extendedStencil.modifiers.size.large).toEqualTypeOf<string>();
+        expectTypeOf(extendedStencil.modifiers).toHaveProperty('extra');
+        expectTypeOf(extendedStencil.modifiers.extra).toHaveProperty('true');
+        expectTypeOf(extendedStencil.modifiers.extra.true).toEqualTypeOf<string>();
+
+        // calling the stencil
+        type Args = Exclude<Parameters<typeof extendedStencil>[0], undefined>;
+        expectTypeOf<Args>().toEqualTypeOf<{
+          size?: 'large';
+          extra?: boolean;
+        }>();
+
+        // make sure it actually works when calling it. The type test can pass via extracting parameters
+        // while the actual function call fails
+        extendedStencil({
+          extra: true,
+        });
+      });
+
+      it('should extend compound modifiers and return all compound modifiers', () => {
+        const baseStencil = createStencil({
+          vars: {
+            color: 'red',
+          },
+          base: {},
+          modifiers: {
+            size: {
+              large: {},
+            },
+          },
+          compound: [{modifiers: {size: 'large'}, styles: {}}],
+        });
+
+        const extendedStencil = createStencil({
+          extends: baseStencil,
+          vars: {
+            background: 'blue',
+          },
+          base: {},
+          modifiers: {
+            extra: {
+              true: {},
+            },
+          },
+          compound: [
+            {modifiers: {size: 'large'}, styles: {}},
+            {modifiers: {size: 'large', extra: true}, styles: {}},
+          ],
+        });
+
+        extendedStencil({color: 'blue', background: 'red'});
+
+        const {className} = extendedStencil({size: 'large'});
+
+        expect(className.split(' ')).toHaveProperty('length', 6); // 1 base + 1 extended + 1 size modifier + 2 compound modifiers + 1 modifier hash
+
+        expect(className).toContain(baseStencil.base);
+        extendedStencil.base.split(' ').forEach(c => {
+          expect(className).toContain(c);
+        });
+        expect(className).toContain(baseStencil.modifiers.size.large);
+
+        // calling the stencil
+        type Args = Exclude<Parameters<typeof extendedStencil>[0], undefined>;
+        expectTypeOf<Args>().toEqualTypeOf<{
+          size?: 'large';
+          extra?: boolean;
+          color?: string;
+          background?: string;
+        }>();
+
+        // Verify the actual function call does not give an error for boolean even if the type test says it works
+        extendedStencil({
+          extra: true,
+        });
+      });
+
+      it('should set default modifiers using base modifiers', () => {
+        const baseStencil = createStencil({
+          base: {},
+          modifiers: {
+            size: {
+              large: {width: '100rem'},
+            },
+          },
+        });
+
+        const extendedStencil = createStencil({
+          extends: baseStencil,
+          base: {},
+          modifiers: {
+            extra: {
+              true: {},
+            },
+          },
+          defaultModifiers: {size: 'large'},
+        });
+
+        // calling the stencil
+        type Args = Exclude<Parameters<typeof extendedStencil>[0], undefined>;
+        expectTypeOf<Args>().toEqualTypeOf<{
+          size?: 'large';
+          extra?: boolean;
+        }>();
+      });
+
+      it('should extend variables', () => {
+        const baseStencil = createStencil({
+          vars: {
+            color: 'red',
+          },
+          base: {},
+        });
+
+        const extendedStencil = createStencil({
+          vars: {
+            background: 'blue',
+          },
+          extends: baseStencil,
+          base: {},
+        });
+
+        expectTypeOf(extendedStencil.vars.color).toEqualTypeOf<string>();
+        expect(extendedStencil).toHaveProperty(
+          'vars.color',
+          expect.stringMatching(/--color-[0-9a-z]+/i)
+        );
+
+        expectTypeOf(extendedStencil.vars.background).toEqualTypeOf<string>();
+        expect(extendedStencil).toHaveProperty(
+          'vars.background',
+          expect.stringMatching(/--background-[0-9a-z]+/i)
+        );
+      });
+
+      it('should extend variables with IDs', () => {
+        const baseStencil = createStencil(
+          {
+            vars: {
+              color: 'red',
+            },
+            base: {},
+          },
+          'base'
+        );
+
+        const extendedStencil = createStencil(
+          {
+            extends: baseStencil,
+            vars: {
+              background: 'blue',
+            },
+            base({color, background}) {
+              expectTypeOf(color).toMatchTypeOf<string>();
+              expectTypeOf(background).toMatchTypeOf<string>();
+              return {};
+            },
+          },
+          'extended'
+        );
+
+        expectTypeOf(extendedStencil.vars.color).toEqualTypeOf<'--color-base'>();
+        expectTypeOf(extendedStencil.vars.background).toEqualTypeOf<'--background-extended'>();
+        expectTypeOf(extendedStencil.vars.$$defaults).toHaveProperty('--color-base');
+        expectTypeOf(extendedStencil.vars.$$defaults).toHaveProperty('--background-extended');
+        expectTypeOf(extendedStencil.vars.$$defaults['--color-base']).toMatchTypeOf<string>();
+        expectTypeOf(
+          extendedStencil.vars.$$defaults['--background-extended']
+        ).toMatchTypeOf<string>();
+
+        expect(extendedStencil).toHaveProperty('vars.color', '--color-base');
+
+        expect(extendedStencil).toHaveProperty('vars.background', '--background-extended');
+      });
+
+      it('should extend, adding class names in the correct order', () => {
+        const baseStencil = createStencil(
+          {
+            base: {
+              color: 'red',
+            },
+            modifiers: {
+              size: {
+                large: {
+                  color: 'pink',
+                },
+                small: {
+                  color: 'lightgreen',
+                },
+              },
+              position: {
+                only: {},
+                start: {},
+              },
+            },
+            compound: [
+              {
+                modifiers: {size: 'large', position: 'only'},
+                styles: {},
+              },
+            ],
+          },
+          'base'
+        );
+
+        const extendedStencil = createStencil(
+          {
+            extends: baseStencil,
+            base: {
+              color: 'green',
+            },
+            modifiers: {
+              size: {
+                large: {},
+                small: {},
+              },
+              foo: {
+                bar: {},
+              },
+            },
+            compound: [
+              {
+                modifiers: {size: 'large', position: 'only'},
+                styles: {
+                  color: 'var(--extended-compound-icon-only)',
+                },
+              },
+            ],
+          },
+          'extended'
+        );
+
+        expect(extendedStencil.base.split(' ')).toHaveLength(2);
+        expect(extendedStencil.base).toMatch(new RegExp(`^${baseStencil.base}`));
+        expect(extendedStencil.modifiers.size.large.split(' ')).toHaveLength(2);
+        expect(extendedStencil.modifiers.size.large).toMatch(
+          new RegExp(`^${baseStencil.modifiers.size.large}`)
+        );
+
+        // Expect all base styles, modifiers, and compound modifiers to be included
+        const {className} = extendedStencil({size: 'large', position: 'only'});
+        expect(className).toContain(baseStencil.base);
+        expect(className).toContain(baseStencil.modifiers.size.large);
+        expect(className).toContain(baseStencil.modifiers.position.only);
+
+        // baseStencil.base, baseStencil large, baseStencil only position, baseStencil compound, extendedStencil.base, extendedStencil large, extendedStencil compound
+        expect(className.split(' ')).toHaveLength(10); // 7 + 3 modifier hashes
+      });
     });
   });
 });
diff --git a/modules/styling/stories/Basics.stories.mdx b/modules/styling/stories/Basics.stories.mdx
index 22098114d4..86b972a0c1 100644
--- a/modules/styling/stories/Basics.stories.mdx
+++ b/modules/styling/stories/Basics.stories.mdx
@@ -4,6 +4,7 @@ import {CreateStyles} from './examples/CreateStyles';
 import {CreateVars} from './examples/CreateVars';
 import {CreateModifiers} from './examples/CreateModifiers';
 import {CreateStencil} from './examples/CreateStencil';
+import {CSProp} from './examples/CSProp';
 
 <Meta title="Styling/Basics" />
 
@@ -39,8 +40,8 @@ versatility.
 In this example, the HTML will look like:
 
 ```html
-<div class="css-4iptxs" style="--c6kna-background: gray;"></div>
-<div class="css-4iptxs" style="--c6kna-background: blue;"></div>
+<div class="css-4iptxs" style="--background-c6kna: gray;"></div>
+<div class="css-4iptxs" style="--background-c6kna: blue;"></div>
 ```
 
 And the CSS will look like:
@@ -49,7 +50,7 @@ And the CSS will look like:
 .css-4iptxs {
   width: 100px;
   height: 100px;
-  background-color: var(--c6kna-background);
+  background-color: var(--background-c6kna);
 }
 ```
 
@@ -91,13 +92,14 @@ Here's a simplified example:
 const myStencil = createStencil({
   vars: {
     defaultColor: 'red' // default value
+    nonDefaultedColor: '', // will allow for uninitialization
   },
   base: ({defaultColor}) => {
-    color: defaultColor // `defaultColor` is '--abc123-defaultColor', not 'red'
+    color: defaultColor // `defaultColor` is '--defaultColor-abc123', not 'red'
   }
 })
 
-const elemProps = myStencil({color: 'blue'}) // {style: {'--abc123-defaultColor': 'blue'}}
+const elemProps = myStencil({color: 'blue'}) // {style: {'--defaultColor-abc123': 'blue'}}
 
 <div {...elemProps} />
 ```
@@ -107,11 +109,11 @@ This will produce the following HTML:
 ```html
 <style>
   .css-abc123 {
-    --abc123-defaultColor: red;
-    color: var(--abc123-defaultColor);
+    --defaultColor-abc123: red;
+    color: var(--defaultColor-abc123);
   }
 </style>
-<div class="css-123abc" style="--abc123-defaultColor: blue;"></div>
+<div class="css-123abc" style="--defaultColor-abc123: blue;"></div>
 ```
 
 The element will have a `color` property of `'blue'` because the element style is the highest
@@ -120,12 +122,12 @@ like the following:
 
 ```
 element.style {
-  --abc123-defaultColor: blue;
+  --defaultColor-abc123: blue;
 }
 
 .css-abc123 {
-  --abc123-defaultColor: red;
-  color: var(--abc123-defaultColor); // blue
+  --defaultColor-abc123: red;
+  color: var(--defaultColor-abc123); // blue
 }
 ```
 
@@ -138,6 +140,35 @@ For example, Buttons use variables for colors of all states (hover, active, focu
 nested icons). Without variables, overriding the focus color would require deeply nested selector
 overrides.
 
+#### Cascading Variables
+
+Notice the `nonDefaultedColor` is not included in the base styles like `defaultColor` was. If a
+variable has an empty string, it will can be uninitialized. Stencil variables with a default value
+will create a "cascade barrier". A cascade barrier prevents the variable from "leaking" into the
+component. For example, if a `Card` component was rendered within another `Card` component, the
+variables from the parent `Card` would not leak into the child `Card` component. But there are times
+where a component expects a parent component to set a CSS variable and that it should cascade to the
+component. An example of this is the relationship between `SystemIcon` and `Button`. The `Button`
+components set the `SystemIcon` variables and they should cascade into the `SystemIcon` component.
+
+**Note:** Non-cascade variables _could_ be initialized. If you use uninitialized variables, be sure
+to use a fallback in your styles.
+
+```tsx
+const myStencil = createStencil({
+  vars: {
+    color: '', // uninitialized
+  },
+  base({color}) {
+    return {
+      // provide a fallback. A uninitialized CSS variable will fall back to `initial`.
+      // for the `color` CSS property, that's most likely black (default text color)
+      color: cssVar(color, 'red'),
+    };
+  },
+});
+```
+
 #### Nested Variables
 
 Variables can be nested one level. This can be useful for colors with different psuedo selectors
@@ -320,11 +351,11 @@ the modifier option or a string. The value will be sent as a variable regardless
 will only match if it is a valid modifer key.
 
 ```tsx
-const myStencil = createStencil({
+const buttonStencil = createStencil({
   vars: {
     width: '10px',
   },
-  base({width}): {
+  base({width}) {
     return {
       width: width
     }
@@ -340,11 +371,11 @@ const myStencil = createStencil({
 
 // `'zero'` is part of autocomplete
 myStencil({width: 'zero'});
-// returns {className: 'css-base css--width-zero', styles: { '--width': 'zero'}}
+// returns {className: 'css-button css-button--width-zero', styles: { '--button-width': 'zero'}}
 
 // width also accepts a string
 myStencil({width: '10px'});
-// returns {className: 'css-base', styles: { '--width': '10px'}}
+// returns {className: 'css-button', styles: { '--button-width': '10px'}}
 ```
 
 ### `keyframes`
@@ -359,6 +390,15 @@ The `injectGlobal` function re-exports the
 [Emotion CSS injectGlobal](https://emotion.sh/docs/@emotion/css#global-styles) function, but is
 compatible with a custom Emotion instance and is understood by the Static style transformer.
 
+## CS Prop
+
+The `cs` prop takes in a single, or an array of values that are created by the `cs` function, a
+string representing a CSS class name, or the return of the `createVars` function. It merges
+everything together and applies `className` and `style` attributes to a React element. The Box
+component has been extended to handle the cs prop. For example, the following plus proceeding code:
+
+<ExampleCodeBlock code={CSProp} />
+
 ## Custom Emotion instance
 
 Static style injection happens during the parsing stages of the files. This means when you `import`
diff --git a/modules/styling/stories/FromEmotion.stories.mdx b/modules/styling/stories/FromEmotion.stories.mdx
index 1e07a5004f..653d08564a 100644
--- a/modules/styling/stories/FromEmotion.stories.mdx
+++ b/modules/styling/stories/FromEmotion.stories.mdx
@@ -59,14 +59,14 @@ We can create modifers using `createStyles` and organize them in an object:
 const modifierStyles = {
   variant: {
     primary: createStyles({
-      background: `var(--button-background-color, blue)`,
+      background: `var(--background-color-button, blue)`,
       color: 'white',
     }),
     secondary: createStyles({
-      background: `var(--button-background-color, gray)`,
+      background: `var(--background-color-button, gray)`,
     }),
     danger: createStyles({
-      background: `var(--button-background-color, red)`,
+      background: `var(--background-color-button, red)`,
     }),
   },
   size: {
@@ -112,7 +112,7 @@ If you want to change the background color, you'll have to pass it using `style`
 ```jsx
 <button
   className={`${baseStyles} ${modifierStyles.size.large}`}
-  style={{'--background-button-color': 'orange'}}
+  style={{'--color-background-button': 'orange'}}
 >
   Orange Large
 </button>
@@ -121,7 +121,7 @@ If you want to change the background color, you'll have to pass it using `style`
 The output HTML will look like:
 
 ```html
-<button class="css-puxv12 css-puxv16" style="--background-button-color: orange;">
+<button class="css-puxv12 css-puxv16" style="--color-background-button: orange;">
   Orange Large
 </button>
 ```
@@ -166,13 +166,13 @@ myModifiers() // ''
 ```tsx
 const myVars = createVars('background', 'color')
 
-myVars.color // something like `--{hash}-color`
+myVars.color // something like `--color-{hash}`
 
 // the function knows what keys are allowed
-myVars({color: 'red'}) // {'--{hash}-color': 'red'}
+myVars({color: 'red'}) // {'--color-{hash}': 'red'}
 
 // in a component
-<div style={myVars({color: 'red'})} /> // <div style="--{hash}-color: red;">
+<div style={myVars({color: 'red'})} /> // <div style="--color-{hash}: red;">
 ```
 
 <ExampleCodeBlock code={StylingButton} />
diff --git a/modules/styling/stories/HowToStyle.stories.mdx b/modules/styling/stories/HowToStyle.stories.mdx
new file mode 100644
index 0000000000..cb7b8a2f57
--- /dev/null
+++ b/modules/styling/stories/HowToStyle.stories.mdx
@@ -0,0 +1,191 @@
+import {CustomButton} from './examples/CustomButton';
+import {CustomIcon} from './examples/CustomIcon';
+import {StyledButton} from './examples/StyledButton';
+
+<Meta title="Styling/ How to Customize Styles" />
+
+# How To Customize Styles
+
+There are multiple ways to customize styles for our components within Canvas Kit. The approach you
+choose will depend on your use case. Ranging from some simple overrides to fully custom solutions,
+here are the following options:
+
+- [Styles](#styles)
+- [Stencils](#stencils)
+
+## Styles
+
+### Using `createStyles` with `cs`
+
+Use [`createStyles`](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-styles)
+in tandem with `cs` prop when you're overriding static styles and making small modifications to an
+existing Canvas Kit component like padding, color and flex properties. Take our `Text` component as
+an example.
+
+```tsx
+import {createStyles} from '@Workday/canvas-kit-styling';
+import {system} from '@Workday/canvas-tokens-web';
+import {Text} from '@Workday/canvas-kit-react/text';
+
+const uppercaseTextStyles = createStyles({
+  textTransform: 'uppercase',
+  margin: system.space.x4
+})
+//...
+<Text cs={uppercaseTextStyles}>My uppercased text</Text>;
+```
+
+> **Note:** `createStyles` handles wrapping our token variables in `var(--${token})`
+
+For components that expose css variables via Stencils, such as buttons and icons, you can use the
+`cs` prop to override them:
+
+```tsx
+import {createStyles} from '@Workday/canvas-kit-styling';
+import {system} from '@Workday/canvas-tokens-web';
+import {SystemIcon, systemIconStencil} from '@Workday/canvas-kit-react/icon';
+
+const greenIconStyles = createStyles({
+  [systemIconStencil.vars.color]: system.color.bg.positive.default,
+  [systemIconStencil.vars.size]: system.space.x4,
+  '&:hover': {
+    [systemIconStencil.vars.color]: system.color.bg.positive.softer,
+  },
+  '&:active': {
+    [systemIconStencil.vars.color]: system.color.bg.positive.stronger,
+  },
+  '&:disabled': {
+    [systemIconStencil.vars.color]: system.color.bg.positive.strong,
+  }
+})
+//...
+<SystemIcon icon={greenIconStyles} cs={uppercaseTextStyles} />;
+```
+
+## Stencils
+
+### Extending Stencils
+
+[Stencils](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-stencil) help you
+organize the styling of reusable components into base styles, modifiers, and variables. The
+organization makes it more natural to produce static and clean CSS with optional extraction into CSS
+files.
+
+Stencils that define variables, modifiers and base styles can be extended to create your own
+reusable component using Canvas Kit styles.
+
+If we take `SystemIcon` component as an example, it defines `systemIconStencil` which defines styles
+for an icon. This stencil can be extended to build a custom icon component for your use case.
+
+**Before v11** you'd have to use `systemIconStyles` function to overwrite styles for an icon:
+
+```tsx
+// Before v11
+import {systemIconStyles} from '@workday/canvas-kit-react';
+import {space} from '@workday/canvas-kit-react/tokens'; // old tokens
+
+// old way of styling with Emotion styled
+const StyledNavIcon = styled('span')(({size, iconStyles}){
+  display: 'inline-flex',
+  pointerEvents: 'unset',
+  margin: `${space.xxxs} ${space.xxxs} 0 0`,
+  padding: '0',
+  'svg': {
+    ...iconStyles,
+    width: size,
+    height: size,
+  }
+});
+
+const NavIcon = ({iconColor, iconHover, iconBackground, iconBackgroundHover, icon, size}) => {
+  // old way of styling with systemIconStyles function
+  // systemIconStyles is deprecated in v11
+  const iconStyles = systemIconStyles({
+    fill: iconColor,
+    fillHover: iconHover,
+    background: iconBackground,
+    backgroundHover: iconBackgroundHover,
+  });
+
+  // insert icon function used by platform or any other functionality here
+
+  return (
+    <StyledNavIcon
+      icon={icon}
+      size={size}
+      iconStyles={iconStyles}
+    />
+  );
+};
+```
+
+**In v11** you'd extend `systemIconStencil` to reuse its styles:
+
+```tsx
+// v11
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+
+const navIconStencil = createStencil({
+  // We extend `systemIconStencil` to inherit it's base styles, modifiers and variables so that we can customize it
+  extends: systemIconStencil,
+  vars: {
+    // These variables support our styling iconHover and iconBackgroundHover
+    // they can be removed later and overwritten by `cs`.
+    // Also note the variables have no value. This allows for cascading styles.
+    fillHover: '',
+    backgroundHover: '',
+  },
+  base: ({fillHover, backgroundHover}) => ({
+    display: 'inline-flex',
+    pointerEvents: 'unset',
+    // instead of using our old tokens it's better to use our new system tokens
+    margin: `${system.space.x1} ${system.space.x1} 0 0`,
+    padding: '0',
+    '&:hover, &.hover': {
+      // systemIconStencil doesn't have hover specific variables
+      // so we reassigned color and backgroundColor variables using pseudo-selector
+      [systemIconStencil.vars.color]: fillHover,
+      [systemIconStencil.vars.backgroundColor]: backgroundHover,
+    },
+  }),
+});
+
+// Your reusable NavIcon component using Stencils
+const NavIcon = ({
+  iconColor,
+  iconHover,
+  iconBackground,
+  iconBackgroundHover,
+  icon,
+  size,
+  ...elemProps
+}) => {
+  // insert icon function used by platform or any other functionality here
+
+  return (
+    <span
+      icon={icon}
+      {...handleCsProp(
+        elemProps,
+        navIconStencil({
+          // Because we're extending systemIconStencil, it already has a size prop and applies size to the svg's width and height
+          // so we don't need to set these variables in our navIconStencil
+          size,
+          // systemIconStencil already has color (for icon fill) and backgroundColor variables
+          // so we assigned them to our prop values
+          color: iconColor,
+          backgroundColor: iconBackground,
+          fillHover: iconHover,
+          backgroundHover: iconBackgroundHover,
+        })
+      )}
+    />
+  );
+};
+```
+
+Another example of Stencil extension and customization is our
+[CustomButton](https://workday.github.io/canvas-kit/?path=/story/components-buttons--custom-styles)
+example. This example highlights the power of inheritance that you get from extending stencils.
diff --git a/modules/styling/stories/examples/CSProp.tsx b/modules/styling/stories/examples/CSProp.tsx
new file mode 100644
index 0000000000..bea970b8df
--- /dev/null
+++ b/modules/styling/stories/examples/CSProp.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {Card} from '@workday/canvas-kit-react/card';
+
+const myStencil = createStencil({
+  base: {
+    maxWidth: px2rem(400),
+    padding: system.space.zero,
+    overflow: 'hidden',
+  },
+});
+
+export const CSProp = () => {
+  return (
+    <Card cs={myStencil()}>
+      <Card.Heading
+        cs={{
+          color: cssVar(system.color.text.inverse),
+          background: cssVar(system.color.bg.primary.default),
+          padding: cssVar(system.space.x3),
+        }}
+      >
+        The Future of Styling
+      </Card.Heading>
+      <Card.Body cs={{padding: cssVar(system.space.x3)}}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas blandit consectetur.
+        Nam in congue mauris. Ut non metus a arcu rutrum accumsan. Duis luctus, diam vitae iaculis
+        semper, nibh nisl varius erat, vitae dapibus velit lacus blandit tellus. Aenean vestibulum
+        porta lectus non mollis. Quisque in lacus vitae sem vulputate rutrum. Sed dapibus aliquam
+        dui, eu aliquam purus egestas eu.
+      </Card.Body>
+    </Card>
+  );
+};
diff --git a/modules/styling/stories/examples/CustomButton.tsx b/modules/styling/stories/examples/CustomButton.tsx
new file mode 100644
index 0000000000..b456ecada0
--- /dev/null
+++ b/modules/styling/stories/examples/CustomButton.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+import {system} from '@workday/canvas-tokens-web';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {
+  BaseButton,
+  buttonStencil,
+  PrimaryButton,
+  PrimaryButtonProps,
+} from '@workday/canvas-kit-react/button';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {Grid} from '@workday/canvas-kit-react/layout';
+
+const myButtonStencil = createStencil({
+  extends: buttonStencil,
+  base: {
+    [buttonStencil.vars.background]: system.color.static.green.soft,
+    [buttonStencil.vars.label]: system.color.static.green.strong,
+    [systemIconStencil.vars.color]: system.color.static.green.strong,
+    [buttonStencil.vars.borderRadius]: system.shape.half,
+    border: `${px2rem(3)} solid transparent`,
+    width: 'fit-content',
+    '&:hover': {
+      [buttonStencil.vars.background]: system.color.static.green.default,
+      border: `${px2rem(3)} dotted ${system.color.static.green.strong}`,
+      [systemIconStencil.vars.color]: system.color.static.green.strong,
+    },
+    '&:active': {
+      [buttonStencil.vars.background]: system.color.static.green.strong,
+      [buttonStencil.vars.label]: system.color.fg.inverse,
+      [systemIconStencil.vars.color]: system.color.fg.inverse,
+    },
+  },
+  modifiers: {
+    size: {
+      small: {
+        padding: system.space.x4,
+      },
+      medium: {
+        padding: system.space.x6,
+      },
+      large: {
+        padding: system.space.x8,
+      },
+    },
+  },
+});
+
+const MyButton = createComponent('button')({
+  Component: ({children, size, ...elemProps}: PrimaryButtonProps, ref, Element) => (
+    <Element ref={ref} {...handleCsProp(elemProps, myButtonStencil({size}))}>
+      {children}
+    </Element>
+  ),
+});
+
+export const CustomButton = () => (
+  <Grid cs={{gap: px2rem(4), gridTemplateColumns: 'repeat(3, 1fr)', alignItems: 'center'}}>
+    <MyButton icon={plusIcon}>My Button</MyButton>
+    <MyButton size="medium" icon={plusIcon} iconPosition="end">
+      Medium My Button
+    </MyButton>
+    <MyButton size="large" icon={plusIcon}>
+      Large My Button
+    </MyButton>
+  </Grid>
+);
diff --git a/modules/styling/stories/examples/CustomIcon.tsx b/modules/styling/stories/examples/CustomIcon.tsx
new file mode 100644
index 0000000000..788f41de63
--- /dev/null
+++ b/modules/styling/stories/examples/CustomIcon.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {system} from '@workday/canvas-tokens-web';
+
+const myIconStencil = createStencil({
+  extends: systemIconStencil,
+  base: {
+    [systemIconStencil.vars.color]: system.color.icon.primary.default,
+    [systemIconStencil.vars.accentColor]: system.color.icon.critical.default,
+    [systemIconStencil.vars.size]: system.space.x4,
+  },
+});
+
+export const CustomIcon = elemProps => (
+  <span {...handleCsProp(elemProps, myIconStencil())}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 80 20">
+      <circle className="wd-icon-fill" cx="10" cy="10" r="10" />
+      <circle className="wd-icon-accent" cx="40" cy="10" r="10" />
+      <circle className="wd-icon-fill" cx="70" cy="10" r="10" />
+    </svg>
+  </span>
+);
diff --git a/modules/styling/stories/examples/StyledButton.tsx b/modules/styling/stories/examples/StyledButton.tsx
new file mode 100644
index 0000000000..eb04ade4c1
--- /dev/null
+++ b/modules/styling/stories/examples/StyledButton.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {system} from '@workday/canvas-tokens-web';
+import {caretDownIcon} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {buttonStencil, PrimaryButton} from '@workday/canvas-kit-react/button';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+
+const varStyles = createStyles({
+  [buttonStencil.vars.background]: system.color.static.gray.soft,
+  [buttonStencil.vars.label]: system.color.static.blue.strong,
+  // Because PrimaryButton uses SystemIcon under the hood,
+  // we also can change system icon variable for color
+  [systemIconStencil.vars.color]: system.color.static.blue.strong,
+  '&:hover': {
+    [buttonStencil.vars.background]: system.color.static.orange.default,
+    [buttonStencil.vars.label]: system.color.static.white,
+    [systemIconStencil.vars.color]: system.color.static.white,
+  },
+  '&:focus-visible': {
+    [buttonStencil.vars.background]: system.color.static.green.default,
+    [buttonStencil.vars.boxShadowOuter]: system.color.static.green.strong,
+    [buttonStencil.vars.boxShadowInner]: system.color.static.white,
+  },
+});
+
+export const StyledButton = () => (
+  <PrimaryButton cs={varStyles} icon={caretDownIcon} iconPosition="end">
+    Overwrite styles by setting variables
+  </PrimaryButton>
+);
diff --git a/package.json b/package.json
index f56ad68877..53aececca2 100644
--- a/package.json
+++ b/package.json
@@ -119,9 +119,9 @@
     "cypress:run": "cypress run"
   },
   "lint-staged": {
-      "*.{ts,tsx}": "yarn format",
-      "*.json": "node utils/check-mismatched-dependencies.js",
-      "yarn.lock": "node utils/check-lockfile.js"
+    "*.{ts,tsx}": "yarn format",
+    "*.json": "node utils/check-mismatched-dependencies.js",
+    "yarn.lock": "node utils/check-lockfile.js"
   },
   "workspaces": [
     "modules/**"
@@ -133,6 +133,11 @@
     "@workday/canvas-accent-icons-web": "^3.0.9",
     "@workday/canvas-applet-icons-web": "^2.0.9",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^1.0.0"
+    "@workday/canvas-tokens-web": "^2.0.0"
+  },
+  "resolutions": {
+    "ansi-regex": "3.0.1",
+    "braces": "3.0.3",
+    "micromatch":"4.0.6"
   }
 }
diff --git a/styling.config.ts b/styling.config.ts
index ccc38ec2de..e5b7571005 100644
--- a/styling.config.ts
+++ b/styling.config.ts
@@ -4,6 +4,16 @@ import {handleFocusRing} from './utils/style-transform/handleFocusRing';
 
 const config: Config = {
   prefix: 'cnvs',
+  getPrefix(path) {
+    const match = path.match(/.+modules\/(preview|labs)-react\/([^/]+)\/.+/);
+
+    if (match) {
+      return `cnvs-${match[1]}`;
+    }
+
+    return 'cnvs';
+  },
+  extractCSS: true,
   getFileName(path) {
     return path
       .replace(/modules\/([^/]+)\/([^/]+)\/.+/, (_, modulePath, subPath) => {
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index f35a4d6a59..fa089420fb 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -1,6 +1,12 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["./jest/testing-library__jest-dom.d.ts", "./jest/verifyComponent.d.ts", "**/*.spec.tsx", "**/*.spec.ts","jest/setupTests.ts"],
+  "include": [
+    "./jest/testing-library__jest-dom.d.ts",
+    "./jest/verifyComponent.d.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.ts",
+    "jest/setupTests.ts"
+  ],
   "exclude": ["cypress"],
   "compilerOptions": {
     "declaration": false,
@@ -10,7 +16,7 @@
     "preserveConstEnums": true,
     "allowUnreachableCode": false,
     "noImplicitAny": false,
-    "strictNullChecks": false,
+    "strictNullChecks": true,
     "noUnusedLocals": false,
     "types": ["jest"],
     "incremental": false
diff --git a/utils/style-transform/spec/handleFocusRing.spec.ts b/utils/style-transform/spec/handleFocusRing.spec.ts
index 330419e0f3..c8842d37b4 100644
--- a/utils/style-transform/spec/handleFocusRing.spec.ts
+++ b/utils/style-transform/spec/handleFocusRing.spec.ts
@@ -14,8 +14,8 @@ describe('handleFocusRing', () => {
       focusRing()
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'focusRing')[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, 'focusRing')![0];
 
     const result = handleFocusRing(node, withDefaultContext(program.getTypeChecker()));
 
@@ -32,13 +32,13 @@ describe('handleFocusRing', () => {
       })
     `);
 
-    const sourceFile = program.getSourceFile('test.ts');
-    const node = findNodes(sourceFile, 'focusRing')[0];
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, 'focusRing')![0];
 
     const result = handleFocusRing(
       node,
       withDefaultContext(program.getTypeChecker(), {
-        variables: {'my-boxShadowInner': '--foo-bar'},
+        names: {'myVars.boxShadowInner': '--foo-bar'},
       })
     );
 
@@ -70,7 +70,7 @@ describe('handleFocusRing', () => {
       program,
       'test.ts',
       withDefaultContext(program.getTypeChecker(), {
-        variables: {
+        names: {
           '--foo-bar': 'red',
         },
         objectTransforms: [handleFocusRing],
diff --git a/utils/update-css-package-version.js b/utils/update-css-package-version.js
new file mode 100644
index 0000000000..e9c8e027c6
--- /dev/null
+++ b/utils/update-css-package-version.js
@@ -0,0 +1,23 @@
+// TODO: This file is needed until v11 is released. We only run lerna bump on support and master,
+// but not prerelease/major. Lerna pre-releases only update version strings on latest versions. This
+// file keeps the CSS packages up to date with the `lerna.json` version.
+
+const fs = require('node:fs/promises');
+const path = require('node:path');
+
+async function main() {
+  // Read lerna.json version for the version number
+  const lernaConfig = require('../lerna.json');
+
+  // Update each package.json file
+  const packagePath = `${process.cwd()}/package.json`;
+  const contents = (await fs.readFile(packagePath)).toString();
+
+  await fs.writeFile(
+    packagePath,
+    contents.replace(/"version": "([0-9.]+)"/, `"version": "${lernaConfig.version}"`),
+    'utf8'
+  );
+}
+
+main();
diff --git a/yarn.lock b/yarn.lock
index 6e3b647704..7181a3ec36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5119,10 +5119,10 @@
   dependencies:
     "@workday/design-assets-types" "0.2.8"
 
-"@workday/canvas-tokens-web@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-1.0.0.tgz#4bab2d0f2fe52ecbbcd2731f0463c70942ae7f5e"
-  integrity sha512-VooVwG2wmL4VG/pNlw7IuzSsFkg3q3Y4oFuYvuVYGS5ZftX7uej1rq67dNzayhfnRDlMfo0Gv74LuRs355HtHg==
+"@workday/canvas-tokens-web@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-2.0.0.tgz#9c7e7200ba3d4fe3a83005900ec94aa987b1cfa1"
+  integrity sha512-+Gf+VUbDAJ9tysNJZ9YWQK+/5HXcow8zk+TlCmDxPQzBkRy1MCT6+Etm7+c5rwNleK4jO9z7zfS/5Sez0jhiPg==
 
 "@workday/design-assets-types@0.2.10":
   version "0.2.10"
@@ -5394,30 +5394,10 @@ ansi-html-community@0.0.8, ansi-html-community@^0.0.8:
   resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
   integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
 
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
-
-ansi-regex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
-  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
-
-ansi-regex@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
-  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
-
-ansi-regex@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
-  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
-
-ansi-regex@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
-  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+ansi-regex@3.0.1, ansi-regex@^2.0.0, ansi-regex@^4.1.0, ansi-regex@^5.0.0, ansi-regex@^5.0.1, ansi-regex@^6.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.1.tgz#123d6479e92ad45ad897d4054e3c7ca7db4944e1"
+  integrity sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==
 
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
@@ -5525,21 +5505,6 @@ aria-query@^5.0.0:
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.0.tgz#210c21aaf469613ee8c9a62c7f86525e058db52c"
   integrity sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==
 
-arr-diff@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
-  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
-
-arr-flatten@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
-  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
-
-arr-union@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
-  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
-
 array-differ@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-3.0.0.tgz#3cbb3d0f316810eafcc47624734237d6aee4ae6b"
@@ -5586,11 +5551,6 @@ array-uniq@^1.0.1:
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
   integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
 
-array-unique@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
-  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
-
 array.prototype.flat@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz#812db8f02cad24d3fab65dd67eabe3b8903494a4"
@@ -5663,11 +5623,6 @@ assert@^1.1.1:
     object-assign "^4.1.1"
     util "0.10.3"
 
-assign-symbols@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
-  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
-
 ast-metadata-inferer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ast-metadata-inferer/-/ast-metadata-inferer-0.1.1.tgz#66e24fae9d30ca961fac4880b7fc466f09b25165"
@@ -5685,6 +5640,13 @@ ast-types@0.14.2, ast-types@^0.14.1, ast-types@^0.14.2:
   dependencies:
     tslib "^2.0.1"
 
+ast-types@0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.15.2.tgz#39ae4809393c4b16df751ee563411423e85fb49d"
+  integrity sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==
+  dependencies:
+    tslib "^2.0.1"
+
 ast-types@^0.13.2:
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.2.tgz#df39b677a911a83f3a049644fb74fdded23cea48"
@@ -5771,11 +5733,11 @@ axe-core@^3.0.3, axe-core@^3.1.2, axe-core@^3.4.0, axe-core@^3.5.1:
   integrity sha512-HZpLE7xu05+8AbpqXITGdxp1Xwk8ysAXrg7MiKRY27py3DAyEJpoJQo1727pWF3F+O79V3r+cTWhOzfB49P89w==
 
 axios@^1.0.0:
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.7.tgz#7b48c2e27c96f9c68a2f8f31e2ab19f59b06b0a7"
-  integrity sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.4.tgz#4c8ded1b43683c8dd362973c393f3ede24052aa2"
+  integrity sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==
   dependencies:
-    follow-redirects "^1.15.4"
+    follow-redirects "^1.15.6"
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
@@ -5972,19 +5934,6 @@ base64-js@^1.3.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
-base@^0.11.1:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
-  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
-  dependencies:
-    cache-base "^1.0.1"
-    class-utils "^0.3.5"
-    component-emitter "^1.2.1"
-    define-property "^1.0.0"
-    isobject "^3.0.1"
-    mixin-deep "^1.2.0"
-    pascalcase "^0.1.1"
-
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
@@ -6077,10 +6026,10 @@ bn.js@^5.0.0, bn.js@^5.2.1:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
   integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
 
-body-parser@1.20.2:
-  version "1.20.2"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
-  integrity sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==
+body-parser@1.20.3:
+  version "1.20.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
+  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
   dependencies:
     bytes "3.1.2"
     content-type "~1.0.5"
@@ -6090,7 +6039,7 @@ body-parser@1.20.2:
     http-errors "2.0.0"
     iconv-lite "0.4.24"
     on-finished "2.4.1"
-    qs "6.11.0"
+    qs "6.13.0"
     raw-body "2.5.2"
     type-is "~1.6.18"
     unpipe "1.0.0"
@@ -6136,28 +6085,12 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^2.3.1, braces@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
-  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
-  dependencies:
-    arr-flatten "^1.1.0"
-    array-unique "^0.3.2"
-    extend-shallow "^2.0.1"
-    fill-range "^4.0.0"
-    isobject "^3.0.1"
-    repeat-element "^1.1.2"
-    snapdragon "^0.8.1"
-    snapdragon-node "^2.0.1"
-    split-string "^3.0.2"
-    to-regex "^3.0.1"
-
-braces@^3.0.1, braces@^3.0.2, braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+braces@3.0.3, braces@^2.3.2, braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
-    fill-range "^7.0.1"
+    fill-range "^7.1.1"
 
 brorand@^1.0.1, brorand@^1.1.0:
   version "1.1.0"
@@ -6424,21 +6357,6 @@ cacache@^16.0.0, cacache@^16.0.6, cacache@^16.1.0:
     tar "^6.1.11"
     unique-filename "^2.0.0"
 
-cache-base@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
-  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
-  dependencies:
-    collection-visit "^1.0.0"
-    component-emitter "^1.2.1"
-    get-value "^2.0.6"
-    has-value "^1.0.0"
-    isobject "^3.0.1"
-    set-value "^2.0.0"
-    to-object-path "^0.3.0"
-    union-value "^1.0.0"
-    unset-value "^1.0.0"
-
 cacheable-request@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-6.1.0.tgz#20ffb8bd162ba4be11e9567d823db651052ca912"
@@ -6465,6 +6383,17 @@ call-bind@^1.0.0, call-bind@^1.0.2:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
+call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
 call-me-maybe@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
@@ -6740,16 +6669,6 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
-class-utils@^0.3.5:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
-  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
-  dependencies:
-    arr-union "^3.1.0"
-    define-property "^0.2.5"
-    isobject "^3.0.0"
-    static-extend "^0.1.1"
-
 clean-css@^4.2.1:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -6896,14 +6815,6 @@ collect-v8-coverage@^1.0.0:
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.0.tgz#150ee634ac3650b71d9c985eb7f608942334feb1"
   integrity sha512-VKIhJgvk8E1W28m5avZ2Gv2Ruv5YiF56ug2oclvaG9md69BuZImMG2sk9g7QNKLUbtYAKQjXjYxbYZVUlMMKmQ==
 
-collection-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
-  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
-  dependencies:
-    map-visit "^1.0.0"
-    object-visit "^1.0.0"
-
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -7031,11 +6942,6 @@ compare-func@^2.0.0:
     array-ify "^1.0.0"
     dot-prop "^5.1.0"
 
-component-emitter@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
-  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
-
 compressible@~2.0.16:
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
@@ -7265,11 +7171,6 @@ copy-concurrently@^1.0.0:
     rimraf "^2.5.4"
     run-queue "^1.0.0"
 
-copy-descriptor@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
-  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
-
 core-js-compat@^3.8.1, core-js-compat@^3.9.0, core-js-compat@^3.9.1:
   version "3.11.3"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.11.3.tgz#031b4b4b92fe7066c4c56da6cf6b540c22849389"
@@ -7682,7 +7583,7 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
+debug@2.6.9, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -7791,6 +7692,15 @@ defer-to-connect@^1.0.1:
   resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
   integrity sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==
 
+define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -7803,28 +7713,6 @@ define-properties@^1.1.2, define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
-define-property@^0.2.5:
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
-  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
-  dependencies:
-    is-descriptor "^0.1.0"
-
-define-property@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
-  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
-  dependencies:
-    is-descriptor "^1.0.0"
-
-define-property@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
-  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
-  dependencies:
-    is-descriptor "^1.0.2"
-    isobject "^3.0.1"
-
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -8159,9 +8047,9 @@ electron-to-chromium@^1.4.17:
   integrity sha512-XIvFB1omSAxYgHYX48sC+HR8i/p7lx7R+0cX9faElg1g++h9IilCrJ12+bQuY+d96Wp7zkBiJwMOv+AhLtLrTg==
 
 elliptic@^6.0.0, elliptic@^6.5.4:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
-  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  version "6.5.7"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.7.tgz#8ec4da2cb2939926a1b9a73619d768207e647c8b"
+  integrity sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==
   dependencies:
     bn.js "^4.11.9"
     brorand "^1.1.0"
@@ -8218,6 +8106,11 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+encodeurl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
+
 encoding@^0.1.13:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
@@ -8342,6 +8235,18 @@ es-abstract@^1.10.0, es-abstract@^1.13.0, es-abstract@^1.17.0, es-abstract@^1.17
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
 es-module-lexer@^0.9.0:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
@@ -8788,19 +8693,6 @@ exit@^0.1.2:
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
   integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
 
-expand-brackets@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
-  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
-  dependencies:
-    debug "^2.3.3"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    posix-character-classes "^0.1.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
 expect-type@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/expect-type/-/expect-type-0.11.0.tgz#bce1a3e283f0334eedb39699b57dd27be7009cc1"
@@ -8822,57 +8714,42 @@ exponential-backoff@^3.1.1:
   integrity sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==
 
 express@^4.17.1:
-  version "4.19.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.19.2.tgz#e25437827a3aa7f2a827bc8171bbbb664a356465"
-  integrity sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.0.tgz#d57cb706d49623d4ac27833f1cbc466b668eb915"
+  integrity sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.20.2"
+    body-parser "1.20.3"
     content-disposition "0.5.4"
     content-type "~1.0.4"
     cookie "0.6.0"
     cookie-signature "1.0.6"
     debug "2.6.9"
     depd "2.0.0"
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     etag "~1.8.1"
-    finalhandler "1.2.0"
+    finalhandler "1.3.1"
     fresh "0.5.2"
     http-errors "2.0.0"
-    merge-descriptors "1.0.1"
+    merge-descriptors "1.0.3"
     methods "~1.1.2"
     on-finished "2.4.1"
     parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
+    path-to-regexp "0.1.10"
     proxy-addr "~2.0.7"
-    qs "6.11.0"
+    qs "6.13.0"
     range-parser "~1.2.1"
     safe-buffer "5.2.1"
-    send "0.18.0"
-    serve-static "1.15.0"
+    send "0.19.0"
+    serve-static "1.16.2"
     setprototypeof "1.2.0"
     statuses "2.0.1"
     type-is "~1.6.18"
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-extend-shallow@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
-  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
-  dependencies:
-    is-extendable "^0.1.0"
-
-extend-shallow@^3.0.0, extend-shallow@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
-  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
-  dependencies:
-    assign-symbols "^1.0.0"
-    is-extendable "^1.0.1"
-
 extend@3.0.2, extend@^3.0.0, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -8887,20 +8764,6 @@ external-editor@^3.0.3:
     iconv-lite "^0.4.24"
     tmp "^0.0.33"
 
-extglob@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
-  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
-  dependencies:
-    array-unique "^0.3.2"
-    define-property "^1.0.0"
-    expand-brackets "^2.1.4"
-    extend-shallow "^2.0.1"
-    fragment-cache "^0.2.1"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
 extract-zip@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
@@ -9107,30 +8970,20 @@ filelist@^1.0.4:
   dependencies:
     minimatch "^5.0.1"
 
-fill-range@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
-  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-    to-regex-range "^2.1.0"
-
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
   dependencies:
     to-regex-range "^5.0.1"
 
-finalhandler@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
-  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
+finalhandler@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
+  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
   dependencies:
     debug "2.6.9"
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     on-finished "2.4.1"
     parseurl "~1.3.3"
@@ -9248,16 +9101,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.15.4:
+follow-redirects@^1.15.6:
   version "1.15.6"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
   integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
 
-for-in@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
-  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
-
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -9352,13 +9200,6 @@ forwarded@0.2.0:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
-fragment-cache@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
-  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
-  dependencies:
-    map-cache "^0.2.2"
-
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -9553,6 +9394,17 @@ get-intrinsic@^1.0.2:
     has "^1.0.3"
     has-symbols "^1.0.3"
 
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
 get-pkg-repo@^4.0.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/get-pkg-repo/-/get-pkg-repo-4.2.1.tgz#75973e1c8050c73f48190c52047c4cee3acbf385"
@@ -9604,11 +9456,6 @@ get-stream@^6.0.0, get-stream@^6.0.1:
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
 
-get-value@^2.0.3, get-value@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
-  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
-
 getos@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/getos/-/getos-3.2.1.tgz#0134d1f4e00eb46144c5a9c0ac4dc087cbb27dc5"
@@ -9865,6 +9712,13 @@ globby@^9.2.0:
     pify "^4.0.1"
     slash "^2.0.0"
 
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
 got@^9.6.0:
   version "9.6.0"
   resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
@@ -9931,6 +9785,18 @@ has-glob@^1.0.0:
   dependencies:
     is-glob "^3.0.0"
 
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
 has-symbols@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
@@ -9951,37 +9817,6 @@ has-unicode@^2.0.1:
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
   integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
 
-has-value@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
-  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
-  dependencies:
-    get-value "^2.0.3"
-    has-values "^0.1.4"
-    isobject "^2.0.0"
-
-has-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
-  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
-  dependencies:
-    get-value "^2.0.6"
-    has-values "^1.0.0"
-    isobject "^3.0.0"
-
-has-values@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
-  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
-
-has-values@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
-  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
-  dependencies:
-    is-number "^3.0.0"
-    kind-of "^4.0.0"
-
 has-yarn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-2.1.0.tgz#137e11354a7b5bf11aa5cb649cf0c6f3ff2b2e77"
@@ -10559,20 +10394,6 @@ is-absolute-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
   integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
 
-is-accessor-descriptor@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
-  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-accessor-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
-  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
-  dependencies:
-    kind-of "^6.0.0"
-
 is-alphabetical@1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
@@ -10610,11 +10431,6 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-buffer@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
-  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
-
 is-buffer@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
@@ -10674,20 +10490,6 @@ is-core-module@^2.8.0:
   dependencies:
     has "^1.0.3"
 
-is-data-descriptor@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
-  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-data-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
-  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
-  dependencies:
-    kind-of "^6.0.0"
-
 is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
@@ -10698,24 +10500,6 @@ is-decimal@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.3.tgz#381068759b9dc807d8c0dc0bfbae2b68e1da48b7"
   integrity sha512-bvLSwoDg2q6Gf+E2LEPiklHZxxiSi3XAh4Mav65mKqTfCO1HM3uBs24TjEH8iJX3bbDdLXKJXBTmGzuTUuAEjQ==
 
-is-descriptor@^0.1.0:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
-  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
-  dependencies:
-    is-accessor-descriptor "^0.1.6"
-    is-data-descriptor "^0.1.4"
-    kind-of "^5.0.0"
-
-is-descriptor@^1.0.0, is-descriptor@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
-  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
-  dependencies:
-    is-accessor-descriptor "^1.0.0"
-    is-data-descriptor "^1.0.0"
-    kind-of "^6.0.2"
-
 is-directory@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
@@ -10739,18 +10523,6 @@ is-dom@^1.0.0:
     is-object "^1.0.1"
     is-window "^1.0.2"
 
-is-extendable@^0.1.0, is-extendable@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
-  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
-
-is-extendable@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
-  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
-  dependencies:
-    is-plain-object "^2.0.4"
-
 is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -10837,13 +10609,6 @@ is-npm@^5.0.0:
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-5.0.0.tgz#43e8d65cc56e1b67f8d47262cf667099193f45a8"
   integrity sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==
 
-is-number@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
-  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
-  dependencies:
-    kind-of "^3.0.2"
-
 is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
@@ -10879,7 +10644,7 @@ is-plain-object@5.0.0, is-plain-object@^5.0.0:
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
   integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
 
-is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
   integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
@@ -10977,11 +10742,6 @@ is-window@^1.0.2:
   resolved "https://registry.yarnpkg.com/is-window/-/is-window-1.0.2.tgz#2c896ca53db97de45d3c33133a65d8c9f563480d"
   integrity sha1-LIlspT25feRdPDMTOmXYyfVjSA0=
 
-is-windows@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
-  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
-
 is-word-character@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.3.tgz#264d15541cbad0ba833d3992c34e6b40873b08aa"
@@ -11009,7 +10769,7 @@ is-yarn-global@^0.3.0:
   resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
   integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==
 
-isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
@@ -11019,14 +10779,7 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
-isobject@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
-  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
-  dependencies:
-    isarray "1.0.0"
-
-isobject@^3.0.0, isobject@^3.0.1:
+isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
@@ -11709,6 +11462,31 @@ jscodeshift@^0.13.1:
     temp "^0.8.4"
     write-file-atomic "^2.3.0"
 
+jscodeshift@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.14.0.tgz#7542e6715d6d2e8bde0b4e883f0ccea358b46881"
+  integrity sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==
+  dependencies:
+    "@babel/core" "^7.13.16"
+    "@babel/parser" "^7.13.16"
+    "@babel/plugin-proposal-class-properties" "^7.13.0"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.13.8"
+    "@babel/plugin-proposal-optional-chaining" "^7.13.12"
+    "@babel/plugin-transform-modules-commonjs" "^7.13.8"
+    "@babel/preset-flow" "^7.13.13"
+    "@babel/preset-typescript" "^7.13.0"
+    "@babel/register" "^7.13.16"
+    babel-core "^7.0.0-bridge.0"
+    chalk "^4.1.2"
+    flow-parser "0.*"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.4"
+    neo-async "^2.5.0"
+    node-dir "^0.1.17"
+    recast "^0.21.0"
+    temp "^0.8.4"
+    write-file-atomic "^2.3.0"
+
 jsdoctypeparser@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsdoctypeparser/-/jsdoctypeparser-6.1.0.tgz#acfb936c26300d98f1405cb03e20b06748e512a8"
@@ -11882,26 +11660,7 @@ keyv@^3.0.0:
   dependencies:
     json-buffer "3.0.0"
 
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
-  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
-  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
-  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
-
-kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
+kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -12377,11 +12136,6 @@ makeerror@1.0.x:
   dependencies:
     tmpl "1.0.x"
 
-map-cache@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
-  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
-
 map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
@@ -12397,13 +12151,6 @@ map-or-similar@^1.5.0:
   resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
   integrity sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=
 
-map-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
-  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
-  dependencies:
-    object-visit "^1.0.0"
-
 markdown-escapes@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.3.tgz#6155e10416efaafab665d466ce598216375195f5"
@@ -12417,6 +12164,11 @@ markdown-to-jsx@^6.10.3:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
+markdown-to-jsx@^7.2.0:
+  version "7.4.7"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.4.7.tgz#740ee7ec933865ef5cc683a0992797685a75e2ee"
+  integrity sha512-0+ls1IQZdU6cwM1yu0ZjjiVWYtkbExSyUIFU2ZeDIFuZM1W42Mh4OlJ4nb4apX4H8smxDHRdFaoIVJGwfv5hkg==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -12544,10 +12296,10 @@ meow@^8.0.0:
     type-fest "^0.18.0"
     yargs-parser "^20.2.3"
 
-merge-descriptors@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
-  integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==
+merge-descriptors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
 
 merge-stream@^2.0.0:
   version "2.0.0"
@@ -12574,48 +12326,13 @@ microevent.ts@~0.1.1:
   resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
   integrity sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==
 
-micromatch@4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
-  dependencies:
-    braces "^3.0.2"
-    picomatch "^2.3.1"
-
-micromatch@^3.1.10, micromatch@^3.1.4:
-  version "3.1.10"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
-  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    braces "^2.3.1"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    extglob "^2.0.4"
-    fragment-cache "^0.2.1"
-    kind-of "^6.0.2"
-    nanomatch "^1.2.9"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.2"
-
-micromatch@^4.0.0, micromatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
-  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.0.5"
-
-micromatch@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
-  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+micromatch@4.0.5, micromatch@4.0.6, micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.6.tgz#ab4e37c42726b9cd788181ba4a2a4fead8e394a3"
+  integrity sha512-Y4Ypn3oujJYxJcMacVgcs92wofTHxp9FzfDpQON4msDefoC0lb3ETvQLOdLcbhSwU1bz8HrL/1sygfBIHudrkQ==
   dependencies:
-    braces "^3.0.1"
-    picomatch "^2.2.3"
+    braces "^3.0.3"
+    picomatch "^4.0.2"
 
 miller-rabin@^4.0.0:
   version "4.0.1"
@@ -12852,14 +12569,6 @@ mississippi@^3.0.0:
     stream-each "^1.1.0"
     through2 "^2.0.0"
 
-mixin-deep@^1.2.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
-  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
-  dependencies:
-    for-in "^1.0.2"
-    is-extendable "^1.0.1"
-
 mkdirp-infer-owner@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mkdirp-infer-owner/-/mkdirp-infer-owner-2.0.0.tgz#55d3b368e7d89065c38f32fd38e638f0ab61d316"
@@ -12956,23 +12665,6 @@ nanoid@^3.3.1:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
-nanomatch@^1.2.9:
-  version "1.2.13"
-  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
-  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    fragment-cache "^0.2.1"
-    is-windows "^1.0.2"
-    kind-of "^6.0.2"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -13424,14 +13116,10 @@ object-assign@^4.0.1, object-assign@^4.1.1:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
-object-copy@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
-  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
-  dependencies:
-    copy-descriptor "^0.1.0"
-    define-property "^0.2.5"
-    kind-of "^3.0.3"
+object-inspect@^1.13.1:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
+  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
 
 object-inspect@^1.7.0:
   version "1.7.0"
@@ -13448,13 +13136,6 @@ object-keys@^1.0.12, object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object-visit@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
-  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
-  dependencies:
-    isobject "^3.0.0"
-
 object.assign@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
@@ -13493,13 +13174,6 @@ object.getownpropertydescriptors@^2.0.3:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
-object.pick@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
-  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
-  dependencies:
-    isobject "^3.0.1"
-
 object.values@^1.1.0, object.values@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
@@ -13930,11 +13604,6 @@ parseurl@~1.3.2, parseurl@~1.3.3:
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
-pascalcase@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
-  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
-
 path-browserify@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
@@ -13987,10 +13656,10 @@ path-parse@^1.0.6, path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
+path-to-regexp@0.1.10:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
+  integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==
 
 path-type@^1.0.0:
   version "1.1.0"
@@ -14051,16 +13720,21 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
+picomatch@^2.0.4, picomatch@^2.2.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
-picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1:
+picomatch@^2.2.3, picomatch@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+picomatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
+
 pidtree@0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
@@ -14169,18 +13843,13 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
-polished@^4.1.3, polished@^4.2.2:
+polished@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/polished/-/polished-4.2.2.tgz#2529bb7c3198945373c52e34618c8fe7b1aa84d1"
   integrity sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==
   dependencies:
     "@babel/runtime" "^7.17.8"
 
-posix-character-classes@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
-  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
-
 postcss-flexbugs-fixes@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690"
@@ -14599,7 +14268,14 @@ q@^1.5.1:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
-qs@6.11.0, qs@^6.10.0:
+qs@6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
+  dependencies:
+    side-channel "^1.0.6"
+
+qs@^6.10.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
   integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
@@ -14987,6 +14663,16 @@ recast@^0.20.4:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
+recast@^0.21.0:
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.21.5.tgz#e8cd22bb51bcd6130e54f87955d33a2b2e57b495"
+  integrity sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==
+  dependencies:
+    ast-types "0.15.2"
+    esprima "~4.0.0"
+    source-map "~0.6.1"
+    tslib "^2.0.1"
+
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -15054,14 +14740,6 @@ regenerator-transform@^0.14.2:
     "@babel/runtime" "^7.8.4"
     private "^0.1.8"
 
-regex-not@^1.0.0, regex-not@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
-  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
-  dependencies:
-    extend-shallow "^3.0.2"
-    safe-regex "^1.1.0"
-
 regexp.prototype.flags@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
@@ -15212,12 +14890,7 @@ renderkid@^2.0.1:
     strip-ansi "^3.0.0"
     utila "^0.4.0"
 
-repeat-element@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
-  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
-
-repeat-string@^1.5.4, repeat-string@^1.6.1:
+repeat-string@^1.5.4:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
@@ -15294,11 +14967,6 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve-url@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
-  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
-
 resolve.exports@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
@@ -15369,11 +15037,6 @@ restore-cursor@^4.0.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
-ret@~0.1.10:
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
-  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
-
 retry@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
@@ -15495,13 +15158,6 @@ safe-buffer@5.2.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, s
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
-  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
-  dependencies:
-    ret "~0.1.10"
-
 "safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
@@ -15653,10 +15309,10 @@ semver@^7.0.0, semver@^7.1.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semve
   dependencies:
     lru-cache "^6.0.0"
 
-send@0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
-  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
+send@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
+  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
   dependencies:
     debug "2.6.9"
     depd "2.0.0"
@@ -15702,30 +15358,32 @@ serve-favicon@^2.5.0:
     parseurl "~1.3.2"
     safe-buffer "5.1.1"
 
-serve-static@1.15.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
-  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
+serve-static@1.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
   dependencies:
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     parseurl "~1.3.3"
-    send "0.18.0"
+    send "0.19.0"
 
 set-blocking@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
-set-value@^2.0.0, set-value@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
-  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
   dependencies:
-    extend-shallow "^2.0.1"
-    is-extendable "^0.1.1"
-    is-plain-object "^2.0.3"
-    split-string "^3.0.1"
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
 
 setimmediate@^1.0.4:
   version "1.0.5"
@@ -15799,6 +15457,16 @@ side-channel@^1.0.2, side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
+side-channel@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
 signal-exit@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -15874,36 +15542,6 @@ smart-buffer@^4.2.0:
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
   integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
 
-snapdragon-node@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
-  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
-  dependencies:
-    define-property "^1.0.0"
-    isobject "^3.0.0"
-    snapdragon-util "^3.0.1"
-
-snapdragon-util@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
-  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
-  dependencies:
-    kind-of "^3.2.0"
-
-snapdragon@^0.8.1:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
-  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
-  dependencies:
-    base "^0.11.1"
-    debug "^2.2.0"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    map-cache "^0.2.2"
-    source-map "^0.5.6"
-    source-map-resolve "^0.5.0"
-    use "^3.1.0"
-
 socks-proxy-agent@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz#dc069ecf34436621acb41e3efa66ca1b5fed15b6"
@@ -15940,17 +15578,6 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-resolve@^0.5.0:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
-  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-    resolve-url "^0.2.1"
-    source-map-url "^0.4.0"
-    urix "^0.1.0"
-
 source-map-resolve@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
@@ -15967,12 +15594,7 @@ source-map-support@^0.5.16, source-map-support@^0.5.6, source-map-support@~0.5.1
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-url@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
-  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
-
-source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
+source-map@^0.5.0, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -16018,13 +15640,6 @@ spdx-license-ids@^3.0.0:
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.4.tgz#75ecd1a88de8c184ef015eafb51b5b48bfd11bb1"
   integrity sha512-7j8LYJLeY/Yb6ACbQ7F76qy5jHkp0U6jgBfJsk97bwWlVUnUWsAgpyaCvo17h0/RQGnQ036tVDomiwoI4pDkQA==
 
-split-string@^3.0.1, split-string@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
-  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
-  dependencies:
-    extend-shallow "^3.0.0"
-
 split2@^3.0.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/split2/-/split2-3.2.2.tgz#bf2cf2a37d838312c249c89206fd7a17dd12365f"
@@ -16107,14 +15722,6 @@ state-toggle@^1.0.0:
   resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.2.tgz#75e93a61944116b4959d665c8db2d243631d6ddc"
   integrity sha512-8LpelPGR0qQM4PnfLiplOQNJcIN1/r2Gy0xKB2zKnIW2YzPMt2sR4I/+gtPjhN7Svh9kw+zqEg2SFwpBO9iNiw==
 
-static-extend@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
-  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
-  dependencies:
-    define-property "^0.2.5"
-    object-copy "^0.1.0"
-
 statuses@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
@@ -16698,26 +16305,11 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
-to-object-path@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
-  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
-  dependencies:
-    kind-of "^3.0.2"
-
 to-readable-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/to-readable-stream/-/to-readable-stream-1.0.0.tgz#ce0aa0c2f3df6adf852efb404a783e77c0475771"
   integrity sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==
 
-to-regex-range@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
-  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
-  dependencies:
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -16725,16 +16317,6 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-to-regex@^3.0.1, to-regex@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
-  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
-  dependencies:
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    regex-not "^1.0.2"
-    safe-regex "^1.1.0"
-
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
@@ -17059,16 +16641,6 @@ unified@9.2.0:
     trough "^1.0.0"
     vfile "^4.0.0"
 
-union-value@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
-  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
-  dependencies:
-    arr-union "^3.1.0"
-    get-value "^2.0.6"
-    is-extendable "^0.1.1"
-    set-value "^2.0.1"
-
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
@@ -17197,14 +16769,6 @@ unquote@^1.1.0:
   resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
   integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
 
-unset-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
-  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
-  dependencies:
-    has-value "^0.3.1"
-    isobject "^3.0.0"
-
 untildify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-2.1.0.tgz#17eb2807987f76952e9c0485fc311d06a826a2e0"
@@ -17259,11 +16823,6 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-urix@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
-  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
-
 url-loader@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
@@ -17295,11 +16854,6 @@ use-resize-observer@~7.0.1:
   dependencies:
     resize-observer-polyfill "^1.5.1"
 
-use@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
-  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -17846,21 +17400,21 @@ write@1.0.3:
     mkdirp "^0.5.1"
 
 ws@^6.1.0:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
-  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.3.tgz#ccc96e4add5fd6fedbc491903075c85c5a11d9ee"
+  integrity sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==
   dependencies:
     async-limiter "~1.0.0"
 
 ws@^7.4.6:
-  version "7.5.6"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.6.tgz#e59fc509fb15ddfb65487ee9765c5a51dec5fe7b"
-  integrity sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==
+  version "7.5.10"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
+  integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
 
 ws@^8.2.3:
-  version "8.8.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.0.tgz#8e71c75e2f6348dbf8d78005107297056cb77769"
-  integrity sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
+  integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
 
 x-default-browser@^0.4.0:
   version "0.4.0"