diff --git a/cypress/integration/Avatar.spec.ts b/cypress/integration/Avatar.spec.ts
index fd15abe0b6..787a353e15 100644
--- a/cypress/integration/Avatar.spec.ts
+++ b/cypress/integration/Avatar.spec.ts
@@ -5,9 +5,9 @@ describe('Avatar', () => {
     h.stories.visit();
   });
 
-  context('given default avatar light is rendered', () => {
+  context('given default avatar is rendered', () => {
     beforeEach(() => {
-      h.stories.load('Components/Indicators/Avatar/Default', 'Light');
+      h.stories.load('Components/Indicators/Avatar', 'Basic');
     });
 
     it('should not have any axe errors', () => {
@@ -17,7 +17,7 @@ describe('Avatar', () => {
 
   context('given avatar button light is rendered', () => {
     beforeEach(() => {
-      h.stories.load('Components/Indicators/Avatar Button/Default', 'Light');
+      h.stories.load('Components/Indicators/Avatar', 'Button');
     });
 
     it('should not have any axe errors', () => {
@@ -27,7 +27,7 @@ describe('Avatar', () => {
 
   context('given avatar button image is rendered', () => {
     beforeEach(() => {
-      h.stories.load('Components/Indicators/Avatar/Avatar Button', 'Image');
+      h.stories.load('Components/Indicators/Avatar/Avatar', 'Image');
     });
 
     it('should not have any axe errors', () => {
diff --git a/cypress/integration/SelectPreview.spec.ts b/cypress/integration/SelectPreview.spec.ts
deleted file mode 100644
index 353733ceee..0000000000
--- a/cypress/integration/SelectPreview.spec.ts
+++ /dev/null
@@ -1,964 +0,0 @@
-import * as h from '../helpers';
-
-function getAssistiveFocus($menu: JQuery): JQuery {
-  const activeId = $menu.attr('aria-activedescendant');
-  return $menu.find(`[id="${activeId}"]`);
-}
-
-function assertOptionInView($option: JQuery) {
-  const option = $option[0];
-  const $menu = $option.parent();
-  const menu = $menu[0];
-
-  const menuBorderTopWidth = parseInt($menu.css('borderTopWidth'), 10);
-
-  const menuViewTop = menu.scrollTop + menuBorderTopWidth;
-  const menuViewBottom = menuViewTop + menu.clientHeight;
-  const optionTop = option.offsetTop;
-  const optionBottom = optionTop + option.offsetHeight;
-
-  const optionInView = optionTop >= menuViewTop && optionBottom <= menuViewBottom;
-
-  expect(optionInView).to.equal(true);
-}
-
-function assertOptionCenteredInView($option: JQuery) {
-  const option = $option[0];
-  const $menu = $option.parent();
-  const menu = $menu[0];
-
-  const menuBorderTopWidth = parseInt($menu.css('borderTopWidth'), 10);
-
-  const expectedMenuScrollTop = Math.floor(
-    option.offsetTop - menu.clientHeight / 2 - menuBorderTopWidth + option.clientHeight / 2
-  );
-
-  expect(menu.scrollTop).to.equal(expectedMenuScrollTop);
-}
-
-describe('Select', () => {
-  before(() => {
-    h.stories.visit();
-  });
-  ['Default', 'Alert', 'Error'].forEach(story => {
-    context(`given the "${story}" story is rendered`, () => {
-      beforeEach(() => {
-        h.stories.load('Preview/Select/Top Label', story);
-      });
-
-      it('should not have any axe errors', () => {
-        cy.checkA11y();
-      });
-
-      context('when the select button is clicked', () => {
-        beforeEach(() => {
-          cy.findByLabelText('Label').click();
-        });
-
-        it('should not have any axe errors', () => {
-          cy.checkA11y();
-        });
-
-        context('the select button', () => {
-          it('should have an aria-expanded attribute set to "true"', () => {
-            cy.findByLabelText('Label').should('have.attr', 'aria-expanded', 'true');
-          });
-        });
-
-        context('the menu', () => {
-          it('should be visible', () => {
-            cy.findByLabelText('Label')
-              .pipe(h.selectPreview.getMenu)
-              .should('be.visible');
-          });
-
-          it('should have focus', () => {
-            cy.findByLabelText('Label')
-              .pipe(h.selectPreview.getMenu)
-              .should('be.focused');
-          });
-
-          it('should have an aria-activedescendant attribute with the same value as the id of the first option ("E-mail")', () => {
-            cy.findByLabelText('Label')
-              .pipe(h.selectPreview.getMenu)
-              .should($menu => {
-                const menuAD = $menu.attr('aria-activedescendant');
-                const optionId = $menu.find(`[role=option]:eq(0)`).attr('id');
-
-                expect(menuAD).to.equal(optionId);
-              });
-          });
-
-          it('should set assistive focus to the first option ("E-mail")', () => {
-            cy.findByLabelText('Label')
-              .pipe(h.selectPreview.getMenu)
-              .pipe(getAssistiveFocus)
-              .should('have.text', 'E-mail');
-          });
-        });
-
-        context('the first option ("Mail")', () => {
-          it('should have an aria-selected attribute set to "true"', () => {
-            cy.findByLabelText('Label')
-              .pipe(h.selectPreview.getOption(0))
-              .should('have.attr', 'aria-selected', 'true');
-          });
-        });
-
-        context(`when the "Phone" option (with the value "phone") is clicked`, () => {
-          beforeEach(() => {
-            cy.findByLabelText('Label')
-              .pipe(h.selectPreview.getOption('Phone'))
-              .click();
-          });
-
-          context('the select button', () => {
-            it(`should read "Phone"`, () => {
-              cy.findByLabelText('Label').should('have.text', 'Phone');
-            });
-
-            it(`should have a value of "phone"`, () => {
-              cy.findByLabelText('Label').should('have.value', 'phone');
-            });
-
-            it(`should re-acquire focus`, () => {
-              cy.findByLabelText('Label').should('be.focused');
-            });
-          });
-
-          context('the menu', () => {
-            it('should not be visible', () => {
-              cy.findByLabelText('Label')
-                .pipe(h.selectPreview.getMenu)
-                .should('not.exist');
-            });
-          });
-
-          context('when the menu is opened again', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label').click();
-            });
-
-            context('the menu', () => {
-              it('should set assistive focus to the "Phone" option', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should('have.text', 'Phone');
-              });
-            });
-
-            context('the "Phone" option', () => {
-              it('should have an aria-selected attribute set to "true"', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getOption('Phone'))
-                  .should('have.attr', 'aria-selected', 'true');
-              });
-            });
-          });
-        });
-      });
-
-      context('when the select button is focused', () => {
-        beforeEach(() => {
-          cy.findByLabelText('Label').focus();
-        });
-
-        context('when the down arrow key is pressed', () => {
-          beforeEach(() => {
-            cy.focused().realType('{downarrow}');
-          });
-
-          context('the select button', () => {
-            it('should have an aria-expanded attribute set to "true"', () => {
-              cy.findByLabelText('Label').should('have.attr', 'aria-expanded', 'true');
-            });
-          });
-
-          context('the menu', () => {
-            it('should be visible', () => {
-              cy.findByLabelText('Label')
-                .pipe(h.selectPreview.getMenu)
-                .should('be.visible');
-            });
-
-            it('should have focus', () => {
-              cy.findByLabelText('Label')
-                .pipe(h.selectPreview.getMenu)
-                .should('be.focused');
-            });
-          });
-
-          context('when the down arrow key is pressed for a second time', () => {
-            beforeEach(() => {
-              cy.focused().realType('{downarrow}');
-            });
-
-            context('the menu', () => {
-              it('should set assistive focus to the "Phone" option', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should('have.text', 'Phone');
-              });
-            });
-
-            context('when the down arrow key is pressed for a third time', () => {
-              beforeEach(() => {
-                cy.focused().realType('{downarrow}');
-              });
-
-              context('the menu', () => {
-                it('should set assistive focus to the "Mail" option', () => {
-                  cy.findByLabelText('Label')
-                    .pipe(h.selectPreview.getMenu)
-                    .pipe(getAssistiveFocus)
-                    .should('have.text', 'Mail');
-                });
-              });
-
-              context('when the enter key is pressed', () => {
-                beforeEach(() => {
-                  cy.findByLabelText('Label')
-                    .pipe(h.selectPreview.getMenu)
-                    .realType('{enter}');
-                });
-
-                context('the select button', () => {
-                  it(`should read "Mail"`, () => {
-                    cy.findByLabelText('Label').should('have.text', 'Mail');
-                  });
-
-                  it(`should have a value of "mail"`, () => {
-                    cy.findByLabelText('Label').should('have.value', 'mail');
-                  });
-
-                  it(`should re-acquire focus`, () => {
-                    cy.findByLabelText('Label').should('be.focused');
-                  });
-                });
-
-                context('the menu', () => {
-                  it('should not be visible', () => {
-                    cy.findByLabelText('Label')
-                      .pipe(h.selectPreview.getMenu)
-                      .should('not.exist');
-                  });
-                });
-
-                context('when the menu is expanded again', () => {
-                  beforeEach(() => {
-                    cy.focused().realType('{downarrow}');
-                  });
-
-                  context('the menu', () => {
-                    it('should set assistive focus to the "Mail" option', () => {
-                      cy.findByLabelText('Label')
-                        .pipe(h.selectPreview.getMenu)
-                        .pipe(getAssistiveFocus)
-                        .should('have.text', 'Mail');
-                    });
-                  });
-
-                  context('the "Mail" option', () => {
-                    it('should have an aria-selected attribute set to "true"', () => {
-                      cy.findByLabelText('Label')
-                        .pipe(h.selectPreview.getOption('Mail'))
-                        .should('have.attr', 'aria-selected', 'true');
-                    });
-                  });
-                });
-              });
-            });
-
-            context('when the up arrow key is pressed', () => {
-              beforeEach(() => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .realType('{uparrow}');
-              });
-
-              context('the menu', () => {
-                it('should set assistive focus to the "E-mail" option', () => {
-                  cy.findByLabelText('Label')
-                    .pipe(h.selectPreview.getMenu)
-                    .pipe(getAssistiveFocus)
-                    .should('have.text', 'E-mail');
-                });
-              });
-            });
-          });
-        });
-
-        context('when the enter key is pressed', () => {
-          beforeEach(() => {
-            cy.findByLabelText('Label').realType('{enter}');
-          });
-
-          context('the select button', () => {
-            it('should have an aria-expanded attribute set to "true"', () => {
-              cy.findByLabelText('Label').should('have.attr', 'aria-expanded', 'true');
-            });
-          });
-        });
-
-        context('when the space key is pressed', () => {
-          beforeEach(() => {
-            cy.findByLabelText('Label').type(' ', {force: true}); // disable event.preventDefault checks
-          });
-
-          context('the select button', () => {
-            it('should have an aria-expanded attribute set to "true"', () => {
-              cy.findByLabelText('Label').should('have.attr', 'aria-expanded', 'true');
-            });
-          });
-        });
-      });
-
-      context('when the "select" helper is used to select "Mail"', () => {
-        beforeEach(() => {
-          cy.findByLabelText('Label').pipe(h.selectPreview.select('Mail'));
-        });
-
-        it('should have a value of "mail"', () => {
-          cy.findByLabelText('Label').should('have.value', 'mail');
-        });
-      });
-
-      context('when the "select" helper is used to select /^Mail$/', () => {
-        beforeEach(() => {
-          cy.findByLabelText('Label').pipe(h.selectPreview.select(/^Mail$/));
-        });
-
-        it('should have a value of "mail"', () => {
-          cy.findByLabelText('Label').should('have.value', 'mail');
-        });
-      });
-    });
-  });
-
-  context(`given the "Default" story is rendered`, () => {
-    beforeEach(() => {
-      h.stories.load('Preview/Select/Top Label', 'Default');
-    });
-
-    context('when the menu is opened', () => {
-      beforeEach(() => {
-        cy.findByLabelText('Label')
-          .focus()
-          .realType('{downarrow}');
-      });
-
-      context('the menu', () => {
-        it('should set assistive focus to the first option ("E-mail")', () => {
-          cy.findByLabelText('Label')
-            .pipe(h.selectPreview.getMenu)
-            .pipe(getAssistiveFocus)
-            .should('have.text', 'E-mail');
-        });
-      });
-
-      context('when focus is advanced to the second option ("Phone")', () => {
-        beforeEach(() => {
-          cy.focused().realType('{downarrow}');
-        });
-
-        context('the menu', () => {
-          it('should set assistive focus to the second option ("Phone")', () => {
-            cy.findByLabelText('Label')
-              .pipe(h.selectPreview.getMenu)
-              .pipe(getAssistiveFocus)
-              .should('have.text', 'Phone');
-          });
-        });
-
-        context(
-          'when the menu is closed WITHOUT selecting the newly focused option ("Phone")',
-          () => {
-            beforeEach(() => {
-              cy.focused().realType('{esc}');
-            });
-
-            context('when the menu is re-opened AFTER it has fully closed', () => {
-              beforeEach(() => {
-                // Wait for menu to fully close before we open it again (so we
-                // don't interrupt the menu's closing animation and cause it to
-                // re-open while it's in the middle of closing)
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .should('not.exist');
-                cy.findByLabelText('Label')
-                  .focus()
-                  .realType('{downarrow}');
-              });
-
-              context('the menu', () => {
-                it('should have reset assistive focus to the first option ("E-mail")', () => {
-                  cy.findByLabelText('Label')
-                    .pipe(h.selectPreview.getMenu)
-                    .pipe(getAssistiveFocus)
-                    .should('have.text', 'E-mail');
-                });
-              });
-            });
-
-            context('when the menu is re-opened BEFORE it has fully closed', () => {
-              beforeEach(() => {
-                cy.focused().realType('{downarrow}');
-              });
-
-              context('the menu', () => {
-                it('should still have assistive focus set to the second option ("Phone")', () => {
-                  // Focus is shifting between the button and menu as we close
-                  // and open the menu. It's important that we use getMenu rather
-                  // than cy.focused() to ensure we obtain a reference to the menu.
-                  cy.findByLabelText('Label')
-                    .pipe(h.selectPreview.getMenu)
-                    .pipe(getAssistiveFocus)
-                    .should('have.text', 'Phone');
-                });
-              });
-            });
-          }
-        );
-      });
-    });
-  });
-
-  context(`given the "Disabled" story is rendered`, () => {
-    beforeEach(() => {
-      h.stories.load('Preview/Select/Top Label', 'Disabled');
-    });
-
-    it('should not have any axe errors', () => {
-      cy.checkA11y();
-    });
-
-    context('the select button', () => {
-      it('should be disabled', () => {
-        cy.findByLabelText('Label').should('be.disabled');
-      });
-    });
-  });
-
-  context('given the "Disabled Options Test" story is rendered', () => {
-    beforeEach(() => {
-      h.stories.load('Testing/Preview/Select/Cypress', 'Disabled Options Test');
-    });
-
-    context('when the menu is opened', () => {
-      beforeEach(() => {
-        cy.findByLabelText('Label (Disabled Options)')
-          .focus()
-          .realType('{downarrow}');
-      });
-
-      context('the "Carrier Pigeon" option', () => {
-        it('should have an aria-disabled attribute set to "true"', () => {
-          cy.findByLabelText('Label (Disabled Options)')
-            .pipe(h.selectPreview.getOption('Carrier Pigeon'))
-            .should('have.attr', 'aria-disabled', 'true');
-        });
-      });
-
-      context('when the down arrow key is pressed', () => {
-        beforeEach(() => {
-          cy.focused().realType('{downarrow}');
-        });
-
-        context('the menu', () => {
-          it('should set assistive focus to first enabled option ("E-mail")', () => {
-            cy.findByLabelText('Label (Disabled Options)')
-              .pipe(h.selectPreview.getMenu)
-              .pipe(getAssistiveFocus)
-              .should('have.text', 'E-mail');
-          });
-        });
-
-        context('when the up arrow key is pressed', () => {
-          beforeEach(() => {
-            cy.focused().realType('{uparrow}');
-          });
-
-          context('the menu', () => {
-            it('should retain assistive focus on the "E-mail" option since the previous option ("Carrier Pigeon", which also happens to be the first option) is disabled', () => {
-              cy.findByLabelText('Label (Disabled Options)')
-                .pipe(h.selectPreview.getMenu)
-                .pipe(getAssistiveFocus)
-                .should('have.text', 'E-mail');
-            });
-          });
-        });
-
-        context('when the down arrow key is pressed 2 more times', () => {
-          beforeEach(() => {
-            cy.focused().realType('{downarrow}{downarrow}');
-          });
-
-          context('the menu', () => {
-            it('should set assistive focus to the third option down ("Mail") since focus will have skipped one disabled option ("Fax")', () => {
-              cy.findByLabelText('Label (Disabled Options)')
-                .pipe(h.selectPreview.getMenu)
-                .pipe(getAssistiveFocus)
-                .should('have.text', 'Mail');
-            });
-          });
-
-          context('when the down arrow key is pressed 2 more times', () => {
-            beforeEach(() => {
-              cy.focused().realType('{downarrow}{downarrow}');
-            });
-
-            context('the menu', () => {
-              it('should set assistive focus to the first option down ("Mobile Phone") since the second option down ("Telegram", which also happens to be the last option) is disabled', () => {
-                cy.findByLabelText('Label (Disabled Options)')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should('have.text', 'Mobile Phone');
-              });
-            });
-          });
-        });
-      });
-
-      context('when the Home key is pressed', () => {
-        beforeEach(() => {
-          cy.focused().realType('{home}');
-        });
-
-        context('the menu', () => {
-          it('should set assistive focus to the first enabled option ("E-mail")', () => {
-            cy.findByLabelText('Label (Disabled Options)')
-              .pipe(h.selectPreview.getMenu)
-              .pipe(getAssistiveFocus)
-              .should('have.text', 'E-mail');
-          });
-        });
-      });
-
-      context('when the End key is pressed', () => {
-        beforeEach(() => {
-          cy.focused().realType('{end}');
-        });
-
-        context('the menu', () => {
-          it('should set assistive focus to the last enabled option ("Mobile Phone")', () => {
-            cy.findByLabelText('Label (Disabled Options)')
-              .pipe(h.selectPreview.getMenu)
-              .pipe(getAssistiveFocus)
-              .should('have.text', 'Mobile Phone');
-          });
-        });
-      });
-    });
-  });
-
-  context(`given the "Scrollable" story is rendered`, () => {
-    beforeEach(() => {
-      h.stories.load('Preview/Select/Top Label', 'Scrollable');
-    });
-
-    context('when the select button is focused', () => {
-      beforeEach(() => {
-        cy.findByLabelText('Label').focus();
-      });
-
-      context(
-        'when a character is typed (provided no other characters have been typed in the last 500ms), the select should select the first matching option beyond the currently selected option (cycling back to the beginning of the options if necessary)',
-        () => {
-          context('when "s" is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label').realType('s');
-            });
-
-            context('the select button', () => {
-              it('should read the first option beginning with "s" ("San Francisco (United States)")', () => {
-                cy.findByLabelText('Label').should('have.text', 'San Francisco (United States)');
-              });
-
-              it(`should have a value of "san-francisco"`, () => {
-                cy.findByLabelText('Label').should('have.value', 'san-francisco');
-              });
-            });
-          });
-
-          context('when "s{500ms delay}s" is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label').realType('ss', {delay: 500});
-            });
-
-            context('the select button', () => {
-              it('should read the second option beginning with "s" ("San Mateo (United States)")', () => {
-                cy.findByLabelText('Label').should('have.text', 'San Mateo (United States)');
-              });
-            });
-          });
-
-          context('when "s{500ms delay}d" is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label').realType('sd', {delay: 500});
-            });
-
-            context('the select button', () => {
-              it('should read the first option beginning with "d" ("Dallas (United States)")', () => {
-                cy.findByLabelText('Label').should('have.text', 'Dallas (United States)');
-              });
-            });
-          });
-        }
-      );
-
-      context(
-        'when multiple characters are typed in rapid succession (<500ms between keystrokes), thus forming a string, and multiple options begin with that string, the select should retain the currently selected option for as long as possible (instead of cycling selection between matching options with each keystroke)',
-        () => {
-          context('when "sa" is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label').realType('sa');
-            });
-
-            context('the select button', () => {
-              it('should read "San Francisco (United States)"', () => {
-                cy.findByLabelText('Label').should('have.text', 'San Francisco (United States)');
-              });
-            });
-          });
-
-          context('when "san " is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label').realType('san ');
-            });
-
-            context('the select button', () => {
-              it('should read "San Francisco (United States)"', () => {
-                cy.findByLabelText('Label').should('have.text', 'San Francisco (United States)');
-              });
-            });
-          });
-
-          context('when "san m" is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label').realType('san m');
-            });
-
-            context('the select button', () => {
-              it('should read "San Mateo (United States)"', () => {
-                cy.findByLabelText('Label').should('have.text', 'San Mateo (United States)');
-              });
-            });
-          });
-        }
-      );
-
-      // TODO: Figure out why this test doesn't open the menu when the
-      // space key is pressed when using Firefox with Cypress (pressing
-      // the space key in the middle of a typeahead string in normal
-      // usage of Firefox opens the menu, see SelectBase)
-      // Ensure Firefox doesn't display the menu if there's a space in the
-      // typeahead string
-      // context('when "san " is typed', () => {
-      //   beforeEach(() => {
-      //     cy.findByLabelText('Label').realType('san ');
-      //   });
-
-      //   context('the menu', () => {
-      //     it('should not be visible', () => {
-      //       cy.findByLabelText('Label')
-      //         .pipe(h.selectPreview.getMenu)
-      //         .should('not.exist');
-      //     });
-      //   });
-      // });
-    });
-
-    context('when the menu is opened', () => {
-      beforeEach(() => {
-        cy.findByLabelText('Label').click();
-      });
-
-      context(
-        'when a character is typed (provided no other characters have been typed in the last 500ms), the select should advance assistive focus to the first matching option beyond the currently selected option (cycling back to the beginning of the options if necessary) and scroll that option into view',
-        () => {
-          context('when "s" is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label')
-                .pipe(h.selectPreview.getMenu)
-                .realType('s');
-            });
-
-            context('the menu', () => {
-              it('should set assistive focus to the first option beginning with "s" ("San Francisco (United States)")', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should('have.text', 'San Francisco (United States)');
-              });
-
-              it('should scroll so that the "San Francisco (United States)" option is fully visible', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should(assertOptionInView);
-              });
-            });
-          });
-
-          context('when "s{500ms delay}s" is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label')
-                .pipe(h.selectPreview.getMenu)
-                .realType('ss', {delay: 500});
-            });
-
-            context('the menu', () => {
-              it('should set assistive focus to the second option beginning with "s" ("San Mateo (United States)")', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should('have.text', 'San Mateo (United States)');
-              });
-
-              it('should scroll so that the "San Mateo (United States)" option is fully visible', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should(assertOptionInView);
-              });
-            });
-          });
-
-          context('when "s{500ms delay}d" is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label')
-                .pipe(h.selectPreview.getMenu)
-                .realType('sd', {delay: 500});
-            });
-
-            context('the menu', () => {
-              it('should set assistive focus to the first option beginning with "d" ("Dallas (United States)")', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should('have.text', 'Dallas (United States)');
-              });
-
-              it('should scroll so that the "Dallas (United States)" option is fully visible', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should(assertOptionInView);
-              });
-            });
-          });
-
-          context('when "the onto" is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label')
-                .pipe(h.selectPreview.getMenu)
-                .realType('the onto');
-            });
-
-            context('the menu', () => {
-              it('should set assistive focus to "The Ontologically..."', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should(
-                    'have.text',
-                    'The Ontologically Anthropocentric Sensory Immersive Simulation (Virtual Reality)'
-                  );
-              });
-
-              it('should scroll so that the "The Ontologically..." (text wrapped) option is fully visible', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should(assertOptionInView);
-              });
-            });
-          });
-        }
-      );
-
-      context(
-        'when multiple characters are typed in rapid succession (<500ms between keystrokes), thus forming a string, and multiple options begin with that string, the select should retain assistive focus on the currently focused option for as long as possible (instead of cycling focus between matching options with each keystroke)',
-        () => {
-          context('when "sa" is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label')
-                .pipe(h.selectPreview.getMenu)
-                .realType('sa');
-            });
-
-            context('the menu', () => {
-              it('should set assistive focus to the "San Francisco (United States)" option', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should('have.text', 'San Francisco (United States)');
-              });
-            });
-          });
-
-          context('when "san " is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label')
-                .pipe(h.selectPreview.getMenu)
-                .realType('san ');
-            });
-
-            context('the menu', () => {
-              it('should set assistive focus to the "San Francisco (United States)" option', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should('have.text', 'San Francisco (United States)');
-              });
-            });
-          });
-
-          context('when "san m" is typed', () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label')
-                .pipe(h.selectPreview.getMenu)
-                .realType('san m');
-            });
-
-            context('the menu', () => {
-              it('should set assistive focus to the "San Mateo (United States)" option', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should('have.text', 'San Mateo (United States)');
-              });
-            });
-          });
-        }
-      );
-    });
-
-    context(
-      'when the menu is opened and the selected option is initially out of view, the menu should scroll the selected option into view and center it if possible',
-      () => {
-        context('when "Dallas (United States)" is selected and the menu is opened', () => {
-          beforeEach(() => {
-            cy.findByLabelText('Label')
-              .focus()
-              .type('d')
-              .click();
-          });
-
-          context('the menu', () => {
-            it('should scroll so that the "Dallas (United States)" option is centered in view', () => {
-              cy.findByLabelText('Label')
-                .pipe(h.selectPreview.getMenu)
-                .pipe(getAssistiveFocus)
-                .should(assertOptionCenteredInView);
-            });
-          });
-        });
-
-        context(
-          'when "The Ontologically..." (text wrapped) is selected and the menu is opened',
-          () => {
-            beforeEach(() => {
-              cy.findByLabelText('Label')
-                .focus()
-                .type('the onto')
-                .click();
-            });
-
-            context('the menu', () => {
-              it('should scroll so that the "The Ontologically..." option is centered in view', () => {
-                cy.findByLabelText('Label')
-                  .pipe(h.selectPreview.getMenu)
-                  .pipe(getAssistiveFocus)
-                  .should(assertOptionCenteredInView);
-              });
-            });
-          }
-        );
-      }
-    );
-  });
-
-  context(`given the "Portal Test" story is rendered`, () => {
-    beforeEach(() => {
-      h.stories.load('Testing/Preview/Select/Cypress', 'Portal Test');
-    });
-
-    context('when the page is scrolled to the bottom', () => {
-      beforeEach(() => {
-        cy.scrollTo('bottom');
-        cy.window()
-          .its('scrollY')
-          .as('originalWindowScrollY');
-      });
-
-      context('when the bottommost select button is clicked', () => {
-        beforeEach(() => {
-          cy.findByLabelText('Label (Bottom)').click();
-        });
-
-        context('the page', () => {
-          it('should not scroll', () => {
-            cy.window().then($window => {
-              cy.get('@originalWindowScrollY').should('equal', Math.floor($window.scrollY));
-            });
-          });
-        });
-      });
-
-      context(
-        `when the blur test button is clicked and then the bottommost select button (which is re-rendered by the test button's blur handler) is clicked`,
-        () => {
-          beforeEach(() => {
-            cy.findByTestId('blur-test-button').click();
-            cy.findByLabelText('Label (Bottom)').click();
-          });
-
-          context('the page', () => {
-            it('should not scroll', () => {
-              cy.window().then($window => {
-                cy.get('@originalWindowScrollY').should('equal', Math.floor($window.scrollY));
-              });
-            });
-          });
-        }
-      );
-    });
-  });
-
-  context(`given the "Accessibility Test" story is rendered`, () => {
-    beforeEach(() => {
-      h.stories.load('Testing/Preview/Select/Cypress', 'Accessibility Test');
-    });
-
-    context('when the select button with aria-required set to true is clicked', () => {
-      beforeEach(() => {
-        cy.findByLabelText(/Label \(aria-required\)/).click();
-      });
-
-      context('the menu', () => {
-        it('should have an aria-required attribute set to "true"', () => {
-          cy.findByLabelText(/Label \(aria-required\)/)
-            .pipe(h.selectPreview.getMenu)
-            .should('have.attr', 'aria-required', 'true');
-        });
-      });
-    });
-
-    context('when the select button with required set to true is clicked', () => {
-      beforeEach(() => {
-        cy.findByLabelText(/Label \(required\)/).click();
-      });
-
-      context('the menu', () => {
-        it('should have an aria-required attribute set to "true"', () => {
-          cy.findByLabelText(/Label \(required\)/)
-            .pipe(h.selectPreview.getMenu)
-            .should('have.attr', 'aria-required', 'true');
-        });
-      });
-    });
-  });
-});
diff --git a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
new file mode 100644
index 0000000000..37ebc92973
--- /dev/null
+++ b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
@@ -0,0 +1,207 @@
+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/v12.0" />
+
+# Canvas Kit 12.0 Upgrade Guide
+
+This guide contains an overview of the changes in Canvas Kit v12. 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 v12 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 v12, 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)
+- [Removals](#removals)
+  - [InputIconContainer](#inputiconcontainer)
+  - [Select (Preview)](#select-preview)
+- [Component Updates](#component-updates)
+  - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+  - [Avatar](#avatar)
+  - [Text Area](#text-area)
+- [Troubleshooting](#troubleshooting)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+  - [Labs](#labs)
+
+## Canvas Tokens
+
+In v12, 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 v12 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).
+
+## 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.
+
+## Removals
+
+Removals are deletions from our codebase and you can no longer consume this component. We've either
+promoted or replaced a component or utility.
+
+### Select (Preview)
+
+**PR:** [#2796](https://github.com/Workday/canvas-kit/pull/2796)
+
+We've removed the `Select` component that was in Preview. Please use the compound
+[Select component from Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic).
+
+### InputIconContainer
+
+**PR:** [#2838](https://github.com/Workday/canvas-kit/pull/2838)
+
+We've removed `InputIconContainer` from Main. Please use
+[InputGroup](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons)
+from Main instead.
+
+---
+
+## Component Updates
+
+### Styling API and CSS Tokens
+
+**PRs:** [#2825](https://github.com/Workday/canvas-kit/pull/2825),
+[#2795](https://github.com/Workday/canvas-kit/pull/2795),
+[#2793](https://github.com/Workday/canvas-kit/pull/2793)
+
+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:
+
+- `Avatar`
+- `Dialog`
+- `Modal`
+- `Popup`
+- `TextArea`
+- `TextInput`
+- `Toast`
+
+> **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).
+
+### Avatar
+
+- Avatar no longer uses `SystemIconCircle` for sizing.
+- `Avatar.Size` is no longer supported. The `size` prop type has change to accept the following:
+  `"extraExtraLarge" | "extraLarge" | "large" | "medium" | "small" | "extraSmall" | (string{})`
+- `Avatar.Variant` is no longer supported. Enum `AvatarVariant` has been removed. The `variant` type
+  prop now accepts `"dark" | "light"`
+- The `as` prop now accepts any element, not just `div`.
+
+### Text Area
+
+**PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825)
+
+`TextAreaResizeDirection` is no longer a TypeScript enum, but a JavaScript object. This change does
+not effect runtime at all, but may cause TypeScript errors if you use `TextAreaResizeDirection` as a
+type.
+
+```tsx
+// v11
+interface MyProps { resize?: TextAreaResizeDirection }
+
+// 12 type ValueOf<T> = T[keyof T]; interface MyProps { resize?:
+ValueOf<typeof TextAreaResizeDirection> }
+```
+
+## 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/labs-react/expandable/lib/ExpandableAvatar.tsx b/modules/labs-react/expandable/lib/ExpandableAvatar.tsx
index d1c867aa4f..7ef10c871f 100644
--- a/modules/labs-react/expandable/lib/ExpandableAvatar.tsx
+++ b/modules/labs-react/expandable/lib/ExpandableAvatar.tsx
@@ -21,6 +21,6 @@ const StyledAvatar = styled(Avatar)<StyledType>({
 export const ExpandableAvatar = createComponent('button')({
   displayName: 'Expandable.Avatar',
   Component: ({altText, ...elemProps}: ExpandableAvatarProps, ref) => {
-    return <StyledAvatar altText="" as="div" ref={ref} size={32} {...elemProps} />;
+    return <StyledAvatar altText="" as="div" ref={ref} size="medium" {...elemProps} />;
   },
 });
diff --git a/modules/preview-react/index.ts b/modules/preview-react/index.ts
index d0a5f54083..3388de841d 100644
--- a/modules/preview-react/index.ts
+++ b/modules/preview-react/index.ts
@@ -6,7 +6,6 @@ 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';
diff --git a/modules/preview-react/pill/lib/PillAvatar.tsx b/modules/preview-react/pill/lib/PillAvatar.tsx
index ebd9e05866..d309c60ead 100644
--- a/modules/preview-react/pill/lib/PillAvatar.tsx
+++ b/modules/preview-react/pill/lib/PillAvatar.tsx
@@ -3,25 +3,23 @@ import React from 'react';
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Avatar, AvatarProps} from '@workday/canvas-kit-react/avatar';
 import {usePillModel} from './usePillModel';
+import {px2rem} from '@workday/canvas-kit-styling';
 
 export interface PillAvatarProps extends AvatarProps {}
 
 // When the component is created, it needs to be a button element to match AvatarProps.
 // Once Avatar becomes a `createComponent` we can default the element type to a `div`
 // and the types should be properly extracted
-export const PillAvatar = createSubcomponent('button')({
+export const PillAvatar = createSubcomponent('div')({
   modelHook: usePillModel,
-})<PillAvatarProps>((elemProps, Element, model) => {
+})<PillAvatarProps>(({...elemProps}: PillAvatarProps, Element, model) => {
   return (
     <Avatar
       style={{opacity: model.state.disabled ? '.7' : '1'}}
-      as="div"
-      size={18}
+      size={px2rem(18)}
+      as={Element}
       altText={undefined}
       {...elemProps}
-      disabled={model.state.disabled}
-    >
-      {elemProps.children}
-    </Avatar>
+    ></Avatar>
   );
 });
diff --git a/modules/preview-react/select/LICENSE b/modules/preview-react/select/LICENSE
deleted file mode 100644
index 5bcbbab3b9..0000000000
--- a/modules/preview-react/select/LICENSE
+++ /dev/null
@@ -1,51 +0,0 @@
-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-react/select/README.md b/modules/preview-react/select/README.md
deleted file mode 100644
index dc196ee7e1..0000000000
--- a/modules/preview-react/select/README.md
+++ /dev/null
@@ -1,236 +0,0 @@
-# Canvas Kit Select (with Canvas-styled Menu)
-
-<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 in Preview because it has not been converted to a [Compound Component](../../docs/mdx/COMPOUND_COMPONENTS.mdx) yet.
-
-A Canvas-styled Select with a Canvas-styled menu. This is a
-[_controlled_](https://reactjs.org/docs/forms.html#controlled-components) component.
-
-Undocumented props (`disabled`, `name`, etc.) should behave similarly to how you would expect from a
-standard `<select>` element.
-
-The menu is rendered using a portal by way of the Canvas Kit Popper.
-
-**Note:** There is also a non-Labs Select. The non-Labs Select uses the standard browser-provided
-menu whereas the Labs Select uses a custom Canvas-styled menu.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-preview-react
-```
-
-## Usage
-
-#### Example
-
-In this example, `options` is an array of objects. Each option contains a `label` (analagous to the
-text content of an `<option>`) and a `value` (analagous to the `value` attribute of an `<option>`).
-
-**Note:** While a base Select component is provided in this package, it is **not accessible** when
-used as is. It should be used in tandem with [`FormField`](../../../form-field/react) to be made
-fully accessible (see below).
-
-```tsx
-import * as React from 'react';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-
-function Example() {
-  const options = [
-    {label: 'E-mail', value: 'email'},
-    {label: 'Phone', value: 'phone'},
-    {label: 'Fax (disabled)', value: 'fax', disabled: true},
-    {label: 'Mail', value: 'mail'},
-  ];
-
-  const [value, setValue] = React.useState('email');
-
-  const handleChange = event => {
-    setValue(event.currentTarget.value);
-  };
-
-  return <Select onChange={handleChange} options={options} value={value} />;
-}
-```
-
-#### Accessible Example
-
-```tsx
-import * as React from 'react';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-
-function Example() {
-  const options = [
-    {label: 'E-mail', value: 'email'},
-    {label: 'Phone', value: 'phone'},
-    {label: 'Fax (disabled)', value: 'fax', disabled: true},
-    {label: 'Mail', value: 'mail'},
-  ];
-
-  const [value, setValue] = React.useState('email');
-
-  const handleChange = event => {
-    setValue(event.currentTarget.value);
-  };
-
-  return (
-    <FormField label="My Select Field" inputId="my-select-field">
-      <Select onChange={handleChange} options={options} value={value} />
-    </FormField>
-  );
-}
-```
-
-#### Example with Array of Strings
-
-`options` may also be formatted as an array of strings rather than an array of objects.
-
-```tsx
-import * as React from 'react';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-
-function Example() {
-  const options = ['California', 'Florida', 'New York', 'Pennsylvania', 'Texas'];
-
-  const [value, setValue] = React.useState('California');
-
-  const handleChange = event => {
-    setValue(event.currentTarget.value);
-  };
-
-  return (
-    <FormField label="My Select Field" inputId="my-select-field">
-      <Select onChange={handleChange} options={options} value={value} />
-    </FormField>
-  );
-}
-```
-
-#### Example with Custom Options Data
-
-Each option in `options` may contain a `data` object with any number of key/value pairs. This `data`
-object is carried over to the `option` passed into the `renderOption` function where it may then be
-used to customize how each option is rendered.
-
-```tsx
-import * as React from 'react';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {colors, typeColors} from '@workday/canvas-kit-react/tokens';
-import {
-  activityStreamIcon,
-  avatarIcon,
-  uploadCloudIcon,
-  userIcon,
-} from '@workday/canvas-system-icons-web';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-
-function Example() {
-  const options = [
-    {value: 'Activity Stream', data: {icon: activityStreamIcon}},
-    {value: 'Avatar', data: {icon: avatarIcon}},
-    {value: 'Upload Cloud', data: {icon: uploadCloudIcon}},
-    {value: 'User', data: {icon: userIcon}},
-  ];
-
-  const renderOption = option => {
-    const iconColor = option.focused ? typeColors.inverse : colors.blackPepper100;
-    return (
-      <div style={{alignItems: 'center', display: 'flex', padding: '3px 0'}}>
-        <SystemIcon icon={option.data.icon} color={iconColor} colorHover={iconColor} />
-        <div style={{marginLeft: 5}}>{option.value}</div>
-      </div>
-    );
-  };
-
-  const [value, setValue] = React.useState('Activity Stream');
-
-  const handleChange = event => {
-    setValue(event.currentTarget.value);
-  };
-
-  return (
-    <FormField label="My Select Field" inputId="my-select-field">
-      <Select onChange={handleChange} options={options} renderOption={renderOption} value={value} />
-    </FormField>
-  );
-}
-```
-
-## Static Properties
-
-#### `ErrorType: ErrorType`
-
-```tsx
-<Select error={Select.ErrorType.Alert} />
-```
-
-## Component Props
-
-### Required
-
-#### `options: (Option | string)[]`
-
-> The options of the Select. `options` may be an array of objects or an array of strings.
->
-> If `options` is an array of objects, each object must adhere to the `Option` interface:
->
-> - `data: object` (optional)
-> - `disabled: boolean` (optional)
-> - `id: string` (optional, a random `id` will be assigned to the object if one isn't provided)
-> - `label: string` (optional, analagous to the text content of an `<option>`)
-> - `value: string` (required, analagous to the `value` attribute of an `<option>`)
->
-> If `label` is omitted, the `value` will be used to render the option.
->
-> The `data` object is carried over to the `option` passed into the `renderOption` function where it
-> may then be used to customize how each option is rendered.
-
-### Optional
-
-#### `error: ErrorType`
-
-> The type of error associated with the Select (if applicable).
-
-| Type  | Description     |
-| ----- | --------------- |
-| Error | Red outline.    |
-| Alert | Orange outline. |
-
----
-
-#### `ref: React.Ref<HTMLButtonElement>`
-
-> A ref to be forwarded to the underlying `<button>` element (the collapsed form of the Select
-> component is rendered as a `<button>`). Use this to imperatively modify the button element.
-
-Default: `undefined`
-
----
-
-#### `renderOption: (option: RenderableOption) => React.ReactNode`
-
-> The function called to render the content of each option.
->
-> The `option` argument passed to the function is an object which contains the following:
->
-> - `data: object` (data object carried over from the corresponding option originally passed into
->   the component)
-> - `disabled: boolean`
-> - `focused: boolean` (set to `true` if the option has keyboard focus)
-> - `id: string`
-> - `label: string`
-> - `selected: boolean` (set to `true` if the option is selected)
-> - `value: string`
->
-> If you omit the `renderOption` prop, each option will be rendered using a default `renderOption`
-> function provided by the component.
-
----
-
-#### `value: string`
-
-> The value of the Select.
diff --git a/modules/preview-react/select/index.ts b/modules/preview-react/select/index.ts
deleted file mode 100644
index a29681e4e6..0000000000
--- a/modules/preview-react/select/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './lib/Select';
-
-export {
-  Option,
-  RenderableOption,
-  RenderOptionFunction,
-  RenderSelectedFunction,
-} from './lib/SelectBase';
diff --git a/modules/preview-react/select/lib/Select.tsx b/modules/preview-react/select/lib/Select.tsx
deleted file mode 100644
index c61f54bdb9..0000000000
--- a/modules/preview-react/select/lib/Select.tsx
+++ /dev/null
@@ -1,595 +0,0 @@
-import * as React from 'react';
-import {
-  ErrorType,
-  StyledType,
-  createComponent,
-  useForkRef,
-  generateUniqueId,
-} from '@workday/canvas-kit-react/common';
-import {menuAnimationDuration} from './SelectMenu';
-import {SelectBase, CoreSelectBaseProps, Option, NormalizedOption} from './SelectBase';
-import {MenuVisibility} from './types';
-import {getCorrectedIndexByValue} from './utils';
-/**
- * @deprecated ⚠️ `SelectProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export interface SelectProps extends CoreSelectBaseProps {
-  /**
-   * The options of the Select. `options` may be an array of objects, an array of strings,
-   * or an array that contains both objects and strings.
-   *
-   * If `options` includes objects, each included object must adhere to the `Option` interface:
-   *
-   * * `data: object` (optional)
-   * * `disabled: boolean` (optional)
-   * * `id: string` (optional, a random `id` will be assigned to the object if one isn't provided)
-   * * `label: string` (optional, analogous to the text content of an `<option>`)
-   * * `value: string` (required, analogous to the `value` attribute of an `<option>`)
-   *
-   * If `label` is omitted, the `value` will be used to render the option.
-   *
-   * The `data` object is carried over to the `option` passed into the `renderOption` function where it may then be used to customize how each option is rendered.
-   */
-  options: (Option | string)[];
-}
-
-interface SelectContainerProps extends SelectProps, StyledType {
-  /**
-   * The ref passed from `createComponent` to be forwarded to the underlying button element.
-   */
-  buttonRef?: React.Ref<HTMLButtonElement>;
-}
-
-interface SelectContainerState {
-  focusedOptionIndex: number;
-  menuVisibility: MenuVisibility;
-}
-
-class SelectContainer extends React.Component<SelectContainerProps, SelectContainerState> {
-  static ErrorType = ErrorType;
-
-  state: Readonly<SelectContainerState> = {
-    focusedOptionIndex: 0,
-    menuVisibility: 'closed',
-  };
-
-  private forwardedButtonRef: React.Ref<HTMLButtonElement>;
-  private localButtonRef = React.createRef<HTMLButtonElement>();
-  private inputRef = React.createRef<HTMLInputElement>();
-  private menuRef = React.createRef<HTMLUListElement>();
-
-  private menuAnimationTimer!: ReturnType<typeof setTimeout>;
-
-  // For type-ahead functionality
-  private keysSoFar = '';
-  private clearKeysSoFarTimeout = 500;
-  private clearKeysSoFarTimer!: ReturnType<typeof setTimeout>;
-
-  // Cached values
-  private normalizedOptions: NormalizedOption[] = [];
-
-  private areOptionsDefined = (): boolean => {
-    const {options} = this.props;
-
-    if (!options || options.length === 0) {
-      return false;
-    }
-
-    return true;
-  };
-
-  // Store normalized options since the options prop can take on multiple
-  // forms. It can be an array of strings, an array of objects (sometimes with
-  // arbitrary keys), or an array that contains both strings and objects
-  private setNormalizedOptions = (): void => {
-    const {options} = this.props;
-
-    // Abort if options weren't defined
-    if (!this.areOptionsDefined()) {
-      return;
-    }
-
-    this.normalizedOptions = options.map(option => {
-      let data = {};
-      let disabled, id, label, value;
-
-      if (typeof option === 'string') {
-        disabled = false;
-        id = generateUniqueId();
-        value = option;
-        label = option;
-      } else {
-        data = option.data || data;
-        disabled = !!option.disabled;
-        id = option.id || generateUniqueId();
-        value = option.value;
-        label = option.label || option.value;
-      }
-
-      return {
-        data,
-        disabled,
-        id,
-        label,
-        value,
-      };
-    });
-  };
-
-  private getIndexByStartString = (
-    startIndex: number,
-    startString: string,
-    endIndex: number = this.normalizedOptions.length,
-    ignoreDisabled: boolean = true
-  ): number => {
-    for (let i = startIndex; i < endIndex; i++) {
-      const label = this.normalizedOptions[i].label.toLowerCase();
-      if (label.indexOf(startString.toLowerCase()) === 0) {
-        if (!ignoreDisabled || (ignoreDisabled && !this.normalizedOptions[i].disabled)) {
-          return i;
-        }
-      }
-    }
-
-    return -1;
-  };
-
-  // This helper focuses the next enabled option given a startIndex and a
-  // direction. If startIndex refers to an enabled option, we focus that option
-  // immediately. Otherwise, we advance `direction` number of spaces in the options
-  // array and check again if that index refers to an enabled option.
-  //
-  // This is useful for manipulating focus using the keyboard where pressing the
-  // Up/Down key means "focus the first enabled option above/below the currently
-  // focused option", or pressing the Home/End key means "focus the first/last
-  // enabled option on the menu."
-  private focusNextEnabledOption = (startIndex: number, direction: number) => {
-    // Ensure direction is non-zero
-    if (direction === 0) {
-      return;
-    }
-
-    const numOptions = this.normalizedOptions.length;
-
-    let currentIndex = startIndex;
-
-    // Check if currentIndex refers to an enabled option. If not, keep moving
-    // the index in the prescribed direction until we find an enabled option.
-    while (
-      currentIndex >= 0 &&
-      currentIndex < numOptions &&
-      this.normalizedOptions[currentIndex].disabled
-    ) {
-      currentIndex += direction;
-    }
-    // Update the focused index only if currentIndex is inbounds and
-    // refers to an enabled option
-    if (
-      currentIndex >= 0 &&
-      currentIndex < numOptions &&
-      !this.normalizedOptions[currentIndex].disabled
-    ) {
-      this.setState({focusedOptionIndex: currentIndex});
-    }
-  };
-
-  private updateStateFromValue = () => {
-    this.setState({
-      focusedOptionIndex: getCorrectedIndexByValue(this.normalizedOptions, this.props.value),
-    });
-  };
-
-  private focusButton = () => {
-    if (this.localButtonRef.current) {
-      this.localButtonRef.current.focus();
-    }
-  };
-
-  private setMenuAnimationTimeout = (callback: () => void) => {
-    if (this.menuAnimationTimer) {
-      clearTimeout(this.menuAnimationTimer);
-    }
-    this.menuAnimationTimer = setTimeout(callback, menuAnimationDuration);
-  };
-
-  private openMenu = () => {
-    this.setState({menuVisibility: 'opening'});
-    this.setMenuAnimationTimeout(() => {
-      this.setState({menuVisibility: 'opened'});
-    });
-  };
-
-  private closeMenu = () => {
-    this.setState({menuVisibility: 'closing'});
-    this.setMenuAnimationTimeout(() => {
-      this.setState({
-        // Reset the focused option to the currently selected option in case
-        // the user focused a different option but chose not to select it. The
-        // next time the menu opens, focus should begin on the selected option.
-        focusedOptionIndex: getCorrectedIndexByValue(this.normalizedOptions, this.props.value),
-        menuVisibility: 'closed',
-      });
-    });
-  };
-
-  private toggleMenu = (open: boolean): void => {
-    const {menuVisibility} = this.state;
-
-    if (open) {
-      switch (menuVisibility) {
-        // We're opening a menu which is currently closed: set the menu state
-        // to open before kicking off openMenu. This allows us to transition
-        // from 0 opacity in the open state to the targeted 1.0 opacity in
-        // the opening state.
-        case 'closed':
-          this.setState({menuVisibility: 'open'}, this.openMenu);
-          break;
-        // We're opening a menu which is in the process of closing. Since the
-        // menu isn't closed, there's no need to set the open state: kick off
-        // openMenu immediately.
-        case 'close':
-        case 'closing':
-          this.openMenu();
-          break;
-        // Otherwise, we're opening a menu is already opened or in the process of
-        // opening; no need to do anything further.
-        default:
-          break;
-      }
-    } else {
-      switch (menuVisibility) {
-        // We're closing a menu which is currently opened: set the menu state to
-        // close before kicking off closeMenu.
-        case 'opened':
-          this.setState({menuVisibility: 'close'}, this.closeMenu);
-          break;
-        // We're closing a menu which is in the process of opening. Since the
-        // menu isn't opened, there's no need to set the close state: kick off
-        // closeMenu immediately.
-        case 'open':
-        case 'opening':
-          this.closeMenu();
-          break;
-        // Otherwise, we're closing a menu which is already closed or in the process
-        // of closing; no need to do anything further.
-        default:
-          break;
-      }
-    }
-  };
-
-  // Code inspired by: https://stackoverflow.com/a/46012210
-  // In order for Select to be usable as a controlled component, we
-  // need to programmatically change the value of the SelectInput
-  // in such a way that triggers its change event
-  private fireChangeEvent = (value: string): void => {
-    if (this.inputRef && this.inputRef.current) {
-      const nativeInputValue = Object.getOwnPropertyDescriptor(
-        Object.getPrototypeOf(this.inputRef.current),
-        'value'
-      );
-      if (nativeInputValue && nativeInputValue.set) {
-        nativeInputValue.set.call(this.inputRef.current, value);
-      }
-
-      let event: Event;
-      if (typeof Event === 'function') {
-        // Modern browsers
-        event = new Event('change', {bubbles: true});
-      } else {
-        // IE 11
-        event = document.createEvent('Event');
-        event.initEvent('change', true, true);
-      }
-
-      this.inputRef.current.dispatchEvent(event);
-    }
-  };
-
-  private handleKeyboardTypeAhead = (key: string, numOptions: number) => {
-    // Abort immediately if the menu is the process of closing
-    if (this.state.menuVisibility === 'closing') {
-      return;
-    }
-
-    // Set the starting point of the search to one of two locations
-    // based on the search string so far (keysSoFar):
-    //
-    // 1. If the search string is empty, start the search from the
-    // next option AFTER the currently focused option. For example,
-    // if the Select is currently focused on "San Francisco", typing
-    // "s" again advances focus to the next option that begins with "s".
-    //
-    // 2. If the search string is populated, start the search from the
-    // CURRENTLY focused option. For example, if the Select is currently
-    // focused on "San Francisco", typing "san j" retains focus on
-    // "San Francisco" as you type "san " (because "san " still matches
-    // "San Francisco") and then advances focus to "San Jose" after you
-    // type the "j" at the end.
-    let start =
-      this.keysSoFar.length === 0
-        ? this.state.focusedOptionIndex + 1
-        : this.state.focusedOptionIndex;
-
-    // If the starting point is beyond the list of options, reset it
-    // to the beginning of the list
-    start = start === numOptions ? 0 : start;
-
-    this.keysSoFar += key;
-    this.startClearKeysSoFarTimer();
-
-    // First, look for a match from start to end
-    let matchIndex;
-    matchIndex = this.getIndexByStartString(start, this.keysSoFar);
-
-    // If a match isn't found between start and end, wrap the search
-    // around and search again from the beginning (0) to start
-    if (matchIndex === -1) {
-      matchIndex = this.getIndexByStartString(0, this.keysSoFar, start);
-    }
-
-    // A match was found...
-    if (matchIndex > -1) {
-      if (this.state.menuVisibility === 'closed') {
-        // If the menu is closed, fire the change event
-        this.fireChangeEvent(this.normalizedOptions[matchIndex].value);
-      } else {
-        // Otherwise the menu is visible (or at least partially visible);
-        // focus the matched option
-        this.setState({focusedOptionIndex: matchIndex});
-      }
-    }
-  };
-
-  private startClearKeysSoFarTimer = () => {
-    if (this.clearKeysSoFarTimer) {
-      clearTimeout(this.clearKeysSoFarTimer);
-    }
-    this.clearKeysSoFarTimer = setTimeout(() => {
-      this.keysSoFar = '';
-    }, this.clearKeysSoFarTimeout);
-  };
-
-  constructor(props: SelectContainerProps) {
-    super(props);
-    this.setNormalizedOptions();
-
-    // We need a local ref (RefObject) to the Select component's underlying
-    // button to manage focus within the component and to serve as its Popper
-    // Menu's anchorElement. If the buttonRef prop (to be forwarded to the
-    // underlying button) passed in through createComponent was a ref object,
-    // we could reuse it for our internal purposes. buttonRef may be a callback
-    // ref, however, or it may not even be defined.
-    //
-    // To guarantee we have access to a ref object, we created one earlier when
-    // declaring the localButtonRef instance variable. We then use useForkRef
-    // to combine localButtonRef and buttonRef into a single callback ref
-    // (forwardedButtonRef) which can be forwarded to the underlying button.
-    // When the component mounts/unmounts, this callback will both:
-    //
-    // (1) Update the current value of localButtonRef, and;
-    // (2) Either update the current value of buttonRef if it was a ref object,
-    //     or call buttonRef with the underlying button element if it was a
-    //     callback ref.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    this.forwardedButtonRef = useForkRef(props.buttonRef, this.localButtonRef);
-  }
-
-  componentDidMount() {
-    this.updateStateFromValue();
-  }
-
-  componentDidUpdate(prevProps: SelectProps) {
-    const {options, value} = this.props;
-
-    if (options !== prevProps.options) {
-      this.setNormalizedOptions();
-      this.updateStateFromValue();
-    }
-
-    if (value !== prevProps.value) {
-      this.updateStateFromValue();
-    }
-  }
-
-  componentWillUnmount() {
-    // Clear timers
-    if (this.menuAnimationTimer) {
-      clearTimeout(this.menuAnimationTimer);
-    }
-    if (this.clearKeysSoFarTimer) {
-      clearTimeout(this.clearKeysSoFarTimer);
-    }
-  }
-
-  handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
-    const {menuVisibility} = this.state;
-
-    switch (menuVisibility) {
-      // If we click the button while the menu is in the process of closing,
-      // we want to toggle the menu back on. However, we also need to focus
-      // the menu since it won't be focused using Popper's onFirstUpdate
-      // callback (because the menu already exists).
-      case 'close':
-      case 'closing':
-        if (this.menuRef.current) {
-          this.menuRef.current.focus();
-        }
-        this.toggleMenu(true);
-        break;
-      case 'closed':
-        this.toggleMenu(true);
-        break;
-      // Otherwise, the menu is opened or in the process of opening; toggle
-      // the menu off.
-      default:
-        this.toggleMenu(false);
-        break;
-    }
-  };
-
-  handleOptionSelection = (index: number): void => {
-    // Abort if a disabled option was clicked (we ignore these clicks)
-    if (this.normalizedOptions[index].disabled) {
-      return;
-    }
-
-    // Toggle menu off, shift focus back to the button, and fire change event
-    this.toggleMenu(false);
-    this.focusButton();
-    this.fireChangeEvent(this.normalizedOptions[index].value);
-  };
-
-  handleMenuCloseOnKeyPress = (): void => {
-    // Toggle menu off and shift focus back to the button
-    this.handleClose();
-    this.focusButton();
-  };
-
-  handleClose = (): void => {
-    this.toggleMenu(false);
-  };
-
-  handleKeyDown = (event: React.KeyboardEvent): void => {
-    const {options} = this.props;
-    const numOptions = options.length;
-
-    const {focusedOptionIndex, menuVisibility} = this.state;
-
-    let isShortcut = false;
-
-    // Check for type-ahead first
-    if (event.key.length === 1 && event.key.match(/\S/)) {
-      isShortcut = true;
-      this.handleKeyboardTypeAhead(event.key, numOptions);
-    } else {
-      switch (event.key) {
-        case 'ArrowUp':
-        case 'Up': // IE/Edge specific value
-        case 'ArrowDown':
-        case 'Down': // IE/Edge specific value
-          isShortcut = true;
-          if (menuVisibility === 'closed' || menuVisibility === 'closing') {
-            this.toggleMenu(true);
-          } else {
-            const direction = event.key === 'ArrowUp' || event.key === 'Up' ? -1 : 1;
-            const startIndex = focusedOptionIndex + direction;
-            this.focusNextEnabledOption(startIndex, direction);
-          }
-          break;
-
-        case 'Home':
-        case 'End':
-          isShortcut = true;
-          const direction = event.key === 'Home' ? 1 : -1;
-          const startIndex = event.key === 'Home' ? 0 : numOptions - 1;
-          this.focusNextEnabledOption(startIndex, direction);
-          break;
-
-        case 'Tab':
-          if (menuVisibility !== 'closed') {
-            isShortcut = true;
-            this.handleMenuCloseOnKeyPress();
-          }
-          break;
-
-        case 'Spacebar':
-        case ' ':
-          isShortcut = true;
-          // If the user is in the middle of typing a string, treat
-          // space key as type-ahead rather than option selection
-          if (this.keysSoFar !== '') {
-            this.handleKeyboardTypeAhead(' ', numOptions);
-          } else if (menuVisibility === 'closed' || menuVisibility === 'closing') {
-            this.toggleMenu(true);
-          } else {
-            this.handleOptionSelection(focusedOptionIndex);
-          }
-          break;
-
-        case 'Enter':
-          isShortcut = true;
-          if (menuVisibility === 'closed' || menuVisibility === 'closing') {
-            // allow the click
-            isShortcut = false;
-          } else {
-            this.handleOptionSelection(focusedOptionIndex);
-          }
-          break;
-
-        default:
-      }
-    }
-
-    if (isShortcut) {
-      // Call stopPropagation here to limit shortcut key handling to the Select
-      // component. Otherwise, for example, using the typeahead feature of the
-      // Select would end up triggering a number of undesired if actions if the
-      // containing application supports its own keyboard shortcuts.
-      event.stopPropagation();
-
-      // Call preventDefault here to maintain control of what happens when
-      // handling shortcut keys. For example, without this call, pressing the
-      // down arrow key would scroll the menu down (since the menu has DOM
-      // focus while its visible and scrolling is the default behavior of the
-      // down arrow key). Instead, we want to provide our own custom behavior
-      // of assistively focusing the next option.
-      event.preventDefault();
-    }
-  };
-
-  public render() {
-    const {
-      value,
-
-      // Strip props we don't want to pass down from elemProps
-      buttonRef,
-      options,
-      onKeyDown,
-      onBlur,
-
-      ...elemProps
-    } = this.props;
-
-    const {focusedOptionIndex, menuVisibility} = this.state;
-
-    // Don't pass in event handlers if options weren't defined
-    const eventHandlers = this.areOptionsDefined()
-      ? {
-          onClick: this.handleClick,
-          onKeyDown: this.handleKeyDown,
-          onClose: this.handleClose,
-          onOptionSelection: this.handleOptionSelection,
-        }
-      : {};
-
-    return (
-      <SelectBase
-        forwardedButtonRef={this.forwardedButtonRef}
-        localButtonRef={this.localButtonRef}
-        focusedOptionIndex={focusedOptionIndex}
-        inputRef={this.inputRef}
-        menuRef={this.menuRef}
-        menuVisibility={menuVisibility}
-        options={this.normalizedOptions}
-        value={value}
-        {...eventHandlers}
-        {...elemProps}
-      />
-    );
-  }
-}
-/**
- * @deprecated ⚠️ `Select` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export const Select = createComponent('button')({
-  displayName: 'Select',
-  Component: (props: SelectProps, ref, Element) => (
-    // Select is still a class component, so we render a renamed version of it
-    // (SelectContainer) and pass it ref and Element
-    <SelectContainer as={Element} buttonRef={ref} {...props} />
-  ),
-  subComponents: {
-    ErrorType,
-  },
-});
diff --git a/modules/preview-react/select/lib/SelectBase.tsx b/modules/preview-react/select/lib/SelectBase.tsx
deleted file mode 100644
index c3913afe47..0000000000
--- a/modules/preview-react/select/lib/SelectBase.tsx
+++ /dev/null
@@ -1,493 +0,0 @@
-import React, {useLayoutEffect} from 'react';
-
-import {
-  GrowthBehavior,
-  ErrorType,
-  StyledType,
-  Themeable,
-  errorRing,
-  styled,
-  useUniqueId,
-} from '@workday/canvas-kit-react/common';
-import {colors, borderRadius, inputColors, type, space} from '@workday/canvas-kit-react/tokens';
-import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-
-import {SelectMenu} from './SelectMenu';
-import {SelectOption} from './SelectOption';
-import {scrollIntoViewIfNeeded} from './scrolling';
-import {MenuPlacement, MenuVisibility} from './types';
-import {getCorrectedIndexByValue} from './utils';
-
-interface OptionData {
-  // This allows developers to include arbitrary keys in their
-  // Options data and to utilize those keys in their renderOption
-  // function without encountering TypeScript errors
-  [key: string]: any;
-}
-/**
- * @deprecated ⚠️ `Option` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export interface Option {
-  data?: OptionData;
-  disabled?: boolean;
-  id?: string;
-  label?: string;
-  value: string;
-}
-/**
- * @deprecated ⚠️ `NormalizedOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export interface NormalizedOption extends Option {
-  // Optional keys in Option are required in NormalizedOption
-  data: OptionData;
-  disabled: boolean;
-  id: string;
-  label: string;
-}
-/**
- * @deprecated ⚠️ `RenderSelectedFunction` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export interface RenderSelectedFunction {
-  (option: NormalizedOption): React.ReactNode;
-}
-/**
- * @deprecated ⚠️ `RenderableOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export interface RenderableOption extends NormalizedOption {
-  focused: boolean;
-  selected: boolean;
-}
-/**
- * @deprecated ⚠️ `RenderOptionFunction` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export interface RenderOptionFunction {
-  (option: RenderableOption): React.ReactNode;
-}
-/**
- * @deprecated ⚠️ `CoreSelectBaseProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export interface CoreSelectBaseProps
-  extends Themeable,
-    GrowthBehavior,
-    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>,
-    Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'required'>,
-    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
-  /**
-   * The type of error associated with the Select (if applicable).
-   */
-  error?: ErrorType;
-  /**
-   * The function called to render the content of each option.
-   *
-   * The `option` argument passed to the function is an object which contains the following:
-   *
-   * * `data: object` (data object carried over from the corresponding option originally passed into the component)
-   * * `disabled: boolean`
-   * * `focused: boolean` (set to `true` if the option has keyboard focus)
-   * * `id: string`
-   * * `label: string`
-   * * `selected: boolean` (set to `true` if the option is selected)
-   * * `value: string`
-   *
-   * If you omit the `renderOption` prop, each option will be rendered using a `defaultRenderOption` function provided by the component.
-   *
-   * @default defaultRenderOption
-   */
-  renderOption?: RenderOptionFunction;
-  /**
-   * The function called to render the selected option.
-   *
-   * The `option` argument passed to the function is an object which contains the following:
-   *
-   * * `data: object` (data object carried over from the corresponding option originally passed into the component)
-   * * `disabled: boolean`
-   * * `id: string`
-   * * `label: string`
-   * * `value: string`
-   *
-   * If you omit the `renderSelected` prop, each option will be rendered using a `defaultRenderSelected` function provided by the component.
-   *
-   * @default defaultRenderSelected
-   */
-  renderSelected?: RenderSelectedFunction;
-  /**
-   * The value of the Select.
-   */
-  value?: string;
-}
-/**
- * @deprecated ⚠️ `SelectBaseProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export interface SelectBaseProps extends CoreSelectBaseProps, StyledType {
-  /**
-   * The ref to be forwarded to the underlying button element. Use this to imperatively manipulate the button.
-   */
-  forwardedButtonRef?: React.Ref<HTMLButtonElement>;
-  /**
-   * The local ref to the underlying button element. Can be used in situations where RefObject is required (such as the Popper Menu).
-   */
-  localButtonRef?: React.RefObject<HTMLButtonElement>;
-  /**
-   * The index of the focused option in the SelectBase.
-   * @default 0
-   */
-  focusedOptionIndex?: number;
-  /**
-   * The ref to the underlying (hidden) text input element. Use this to imperatively manipulate the input.
-   */
-  inputRef?: React.Ref<HTMLInputElement>;
-  /**
-   * The placement of the SelectBase menu relative to its corresponding SelectButton.
-   * @default 'bottom'
-   */
-  menuPlacement?: MenuPlacement;
-  /**
-   * The ref to the underlying menu element. Use this to imperatively manipulate the menu.
-   */
-  menuRef?: React.RefObject<HTMLUListElement>;
-  /**
-   * The visibility state of the SelectBase menu.
-   * @default 'closed'
-   */
-  menuVisibility?: MenuVisibility;
-  /**
-   * The function called when a key is pressed down while the SelectBase button or menu has focus.
-   */
-  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
-  /**
-   * The function called when the menu is closed.
-   */
-  onClose?: () => void;
-  /**
-   * The function called when an option in the SelectBase is selected via a click or a keyboard shortcut. The `index` passed to the callback function represents the index of the option which was selected.
-   */
-  onOptionSelection?: (index: number) => void;
-  /**
-   * The options of the SelectBase. `options` is an array of objects, each object adhering to the `NormalizedOption` interface:
-   *
-   * * `value: string` (required, analagous to the `value` attribute of an `<option>`)
-   * * `disabled: boolean` (required)
-   * * `id: string` (required)
-   * * `label: string` (required, analagous to the text content of an `<option>`)
-   */
-  options: NormalizedOption[];
-  /**
-   * If true, automatically flip the SelectBase menu to keep it visible if necessary (e.g., if the the menu would otherwise display below the visible area of the viewport).
-   * @default true
-   */
-  shouldMenuAutoFlip?: boolean;
-  /**
-   * If true, focus the SelectBase menu when it's shown. Set to false if you don't want to focus the menu automatically (for visual testing purposes, for example).
-   * @default true
-   */
-  shouldMenuAutoFocus?: boolean;
-}
-
-export const buttonBorderWidth = 1;
-
-const menuIconSize = space.m;
-
-const SelectButton = styled('button')<
-  Pick<SelectBaseProps, 'error' | 'grow' | 'menuVisibility' | 'theme'> & StyledType
->(
-  {
-    ...type.levels.subtext.large,
-    border: `${buttonBorderWidth}px solid ${inputColors.border}`,
-    cursor: 'default',
-    display: 'block',
-    backgroundColor: inputColors.background,
-    borderRadius: borderRadius.m,
-    boxSizing: 'border-box',
-    height: space.xl,
-    outline: 'none',
-    overflow: 'hidden',
-    padding: `calc(${space.xxs} - ${buttonBorderWidth}px)`,
-    paddingRight: `calc(${space.xxs} + ${space.m} + (${space.xxs} + ${buttonBorderWidth}px))`,
-    textAlign: 'left',
-    textOverflow: 'ellipsis',
-    transition: '0.2s box-shadow, 0.2s border-color',
-    whiteSpace: 'nowrap',
-    // width is required (instead of minWidth) in order for the button to
-    // be sized properly for lengthy options
-    width: `calc((${space.xxxl} * 7) / 2)`,
-    '&::placeholder': {
-      color: inputColors.placeholder,
-    },
-    '&:disabled': {
-      backgroundColor: inputColors.disabled.background,
-      borderColor: inputColors.disabled.border,
-      color: inputColors.disabled.text,
-      '&::placeholder': {
-        color: inputColors.disabled.text,
-      },
-    },
-  },
-  ({error, menuVisibility, theme}) => {
-    const themedFocusOutlineColor = theme.canvas.palette.common.focusOutline;
-    const buttonFocusStyles = {
-      borderColor: themedFocusOutlineColor,
-      boxShadow: `inset 0 0 0 1px ${themedFocusOutlineColor}`,
-    };
-
-    if (error === undefined) {
-      // If there isn't an error, apply focus and hover styles if the menu is
-      // closed or in the process of closing (otherwise, the menu is opened
-      // or in the process of opening: style the button as if it had focus)
-      return menuVisibility === 'closed' || menuVisibility === 'closing'
-        ? {
-            '&:focus:not([disabled])': {
-              ...buttonFocusStyles,
-            },
-            '&:hover:not([disabled]):not(:focus)': {
-              borderColor: inputColors.hoverBorder,
-            },
-          }
-        : {...buttonFocusStyles};
-    }
-
-    return {
-      ...errorRing(error, theme),
-    };
-  },
-  ({grow}) =>
-    grow && {
-      width: '100%',
-    }
-);
-
-const SelectMenuIcon = styled(SystemIcon)({
-  position: 'absolute',
-  top: space.xxxs,
-  right: space.xxxs,
-  padding: space.xxxs,
-  pointerEvents: 'none',
-  '& path': {
-    transition: '100ms fill',
-  },
-});
-
-const SelectInput = styled('input')({
-  display: 'none',
-});
-
-const SelectWrapper = styled('div')<Pick<SelectBaseProps, 'grow' | 'disabled'>>(
-  {
-    position: 'relative',
-  },
-  ({grow}) => ({
-    display: grow ? 'block' : 'inline-block',
-  }),
-  ({disabled}) => ({
-    '&:hover .menu-icon path': {
-      fill: disabled ? undefined : colors.licorice500,
-    },
-  })
-);
-
-const defaultRenderOption: RenderOptionFunction = option => {
-  return <div>{defaultRenderSelected(option)}</div>;
-};
-
-const defaultRenderSelected: RenderSelectedFunction = option => {
-  return option.label;
-};
-/**
- * @deprecated ⚠️ `SelectBase` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export const SelectBase = ({
-  'aria-labelledby': ariaLabelledBy,
-  'aria-required': ariaRequired,
-  as,
-  forwardedButtonRef,
-  localButtonRef,
-  disabled,
-  error,
-  focusedOptionIndex = 0,
-  grow,
-  inputRef,
-  menuPlacement = 'bottom',
-  menuRef,
-  menuVisibility = 'closed',
-  onChange,
-  onKeyDown,
-  onBlur,
-  onClose,
-  onOptionSelection,
-  options,
-  renderOption = defaultRenderOption,
-  renderSelected = defaultRenderSelected,
-  required,
-  shouldMenuAutoFlip = true,
-  shouldMenuAutoFocus = true,
-  value,
-  ...elemProps
-}: SelectBaseProps) => {
-  const focusedOptionRef = React.useRef<HTMLLIElement>(null);
-
-  const menuId = useUniqueId();
-
-  const renderOptions = (renderOption: RenderOptionFunction) => {
-    const selectedOptionIndex = getCorrectedIndexByValue(options, value);
-
-    return options.map((option, index) => {
-      const optionProps = {
-        'aria-disabled': option.disabled ? true : undefined,
-        'aria-selected': selectedOptionIndex === index ? true : undefined,
-        error,
-        focused: focusedOptionIndex === index,
-        id: option.id,
-        interactive: menuVisibility === 'opening' || menuVisibility === 'opened',
-        key: option.id,
-        optionRef: focusedOptionIndex === index ? focusedOptionRef : undefined,
-        value: option.value,
-        ...(onOptionSelection
-          ? {
-              onClick: (event: React.MouseEvent) => {
-                // TODO: Figure out why this preventDefault call exists.
-                // Removing it doesn't have any obvious consequences,
-                // but need to do more careful testing.
-                event.preventDefault();
-                onOptionSelection(index);
-              },
-            }
-          : {}),
-      };
-
-      // Pass in additional information about the option state: focused, selected
-      const normalizedOption = {
-        ...option,
-        focused: optionProps.focused,
-        selected: !!optionProps['aria-selected'],
-      };
-
-      return <SelectOption {...optionProps}>{renderOption(normalizedOption)}</SelectOption>;
-    });
-  };
-
-  // If the focused option changed, scroll the newly focused option into view (if
-  // necessary) but do NOT center it
-  useLayoutEffect(() => {
-    const focusedOption = focusedOptionRef.current;
-
-    if (focusedOption) {
-      // TODO: Figure out if rAF is the best approach here. I initially added
-      // rAF to get the Select States Menu On story to render correctly in IE.
-      // Without rAF, the menu is scrolled slightly further down than it should
-      // be (only in IE, and only in the Menu On visual testing stories), which
-      // triggers a visual regression. We're inside useLayoutEffect here so I
-      // didn't expect to need rAF in order to make proper measurements, but it
-      // seems to be necessary in IE.
-      //
-      // This rAF call also has the additional benefit of fixing a jarring menu
-      // placement issue in IE (https://github.com/Workday/canvas-kit/issues/791),
-      // so I'm leaving it in for now.
-      const animateId = requestAnimationFrame(() => {
-        // We cannot use the native Element.scrollIntoView() here because it
-        // doesn't work properly with the portalled menu: when using the keyboard
-        // to advance focus through the options, using scrollIntoView to keep the
-        // newly focused option in view also scrolls the ENTIRE page. Instead, we
-        // call our own scrollIntoViewIfNeeded function.
-        scrollIntoViewIfNeeded(focusedOption, false);
-      });
-
-      return () => {
-        cancelAnimationFrame(animateId);
-      };
-    }
-
-    return undefined;
-  }, [focusedOptionIndex]);
-
-  // If the menu was just opened, scroll the focused option into view (if
-  // necessary) and center it
-  useLayoutEffect(() => {
-    const focusedOption = focusedOptionRef.current;
-
-    // We need to scroll if the menu is either opening or opened in case we decide to
-    // bypass the opening state and jump straight to opened (like in visual testing,
-    // for instance)
-    if (focusedOption && (menuVisibility === 'opening' || menuVisibility === 'opened')) {
-      // TODO: This rAF call is also necessary for the Menu On visual testing
-      // stories to render properly in IE (see above, both rAF calls need to be
-      // present). It has no bearing on the menu placement issue.
-      const animateId = requestAnimationFrame(() => {
-        scrollIntoViewIfNeeded(focusedOption, true);
-      });
-
-      return () => {
-        cancelAnimationFrame(animateId);
-      };
-    }
-
-    return undefined;
-  }, [menuVisibility]);
-
-  // Do a bit of error-checking in case options weren't provided
-  const hasOptions = options.length > 0;
-  const selectedOption = hasOptions ? options[getCorrectedIndexByValue(options, value)] : null;
-  const selectedOptionValue = selectedOption ? selectedOption.value : '';
-
-  return (
-    <SelectWrapper grow={grow} disabled={disabled}>
-      <SelectButton
-        aria-expanded={menuVisibility !== 'closed' ? 'true' : undefined}
-        aria-haspopup="listbox"
-        aria-controls={menuVisibility !== 'closed' ? menuId : undefined}
-        as={as}
-        disabled={disabled}
-        error={error}
-        grow={grow}
-        menuVisibility={menuVisibility}
-        onKeyDown={onKeyDown}
-        onBlur={event => {
-          if (menuVisibility === 'closed') {
-            onBlur?.(event);
-          } else {
-            event.preventDefault();
-            event.stopPropagation();
-          }
-        }}
-        // Prevent Firefox from triggering click handler on spacebar during
-        // type-ahead when the menu is closed (and, thus, incorrectly displaying
-        // the menu)
-        onKeyUp={e => {
-          e.preventDefault();
-        }}
-        ref={forwardedButtonRef}
-        type="button"
-        value={selectedOptionValue}
-        {...elemProps}
-      >
-        {!!selectedOption && renderSelected(selectedOption)}
-      </SelectButton>
-      <SelectInput onChange={onChange} ref={inputRef} type="text" value={selectedOptionValue} />
-      {hasOptions && menuVisibility !== 'closed' && (
-        <SelectMenu
-          aria-activedescendant={options[focusedOptionIndex].id}
-          aria-labelledby={ariaLabelledBy}
-          aria-required={ariaRequired || required ? true : undefined}
-          buttonRef={localButtonRef}
-          id={menuId}
-          error={error}
-          menuRef={menuRef}
-          onKeyDown={onKeyDown}
-          onClose={onClose}
-          placement={menuPlacement}
-          shouldAutoFlip={shouldMenuAutoFlip}
-          shouldAutoFocus={shouldMenuAutoFocus}
-          visibility={menuVisibility}
-        >
-          {renderOptions(renderOption)}
-        </SelectMenu>
-      )}
-      <SelectMenuIcon
-        className="menu-icon"
-        icon={caretDownSmallIcon}
-        color={disabled ? colors.licorice100 : colors.licorice200}
-        colorHover={disabled ? colors.licorice100 : colors.licorice500}
-        size={`${menuIconSize}rem`}
-      />
-    </SelectWrapper>
-  );
-};
diff --git a/modules/preview-react/select/lib/SelectMenu.tsx b/modules/preview-react/select/lib/SelectMenu.tsx
deleted file mode 100644
index 60fc16e040..0000000000
--- a/modules/preview-react/select/lib/SelectMenu.tsx
+++ /dev/null
@@ -1,304 +0,0 @@
-import React, {useState, useEffect, useLayoutEffect, useCallback} from 'react';
-
-import {CSSObject} from '@emotion/styled';
-import {EmotionCanvasTheme, ErrorType, Themeable, styled} from '@workday/canvas-kit-react/common';
-import {
-  Placement,
-  Popper,
-  useCloseOnEscape,
-  useCloseOnOutsideClick,
-  usePopupModel,
-  useReturnFocus,
-  useTransferOnFullscreenExit,
-} from '@workday/canvas-kit-react/popup';
-import {colors, borderRadius, inputColors} from '@workday/canvas-kit-react/tokens';
-
-import {SelectProps} from './Select';
-import {MenuPlacement, MenuVisibility} from './types';
-
-interface SelectMenuProps
-  extends Themeable,
-    React.HTMLAttributes<HTMLUListElement>,
-    Pick<SelectProps, 'error'> {
-  /**
-   * The ref to the anchor button element. Required to anchor the menu.
-   */
-  buttonRef?: React.RefObject<HTMLButtonElement>;
-  /**
-   * The ref to the underlying menu/listbox element. Use this to imperatively manipulate the menu.
-   */
-  menuRef?: React.RefObject<HTMLUListElement>;
-  /**
-   * The function called when the menu is closed.
-   */
-  onClose?: () => void;
-  /**
-   * The placement of the SelectMenu relative to its corresponding button.
-   * @default 'bottom'
-   */
-  placement?: MenuPlacement;
-  /**
-   * If true, automatically flip the SelectMenu to keep it visible if necessary (e.g., if the the SelectMenu would otherwise display below the visible area of the viewport).
-   * @default true
-   */
-  shouldAutoFlip?: boolean;
-  /**
-   * If true, focus the SelectMenu when it's shown. Set to false if you don't want to focus the SelectMenu automatically (for visual testing purposes, for example).
-   * @default true
-   */
-  shouldAutoFocus?: boolean;
-  /**
-   * The visibility state of the SelectMenu.
-   * @default 'closed'
-   */
-  visibility?: MenuVisibility;
-}
-
-export const menuAnimationDuration = 200;
-
-const menuBorderStyles = (theme: EmotionCanvasTheme, error?: ErrorType): CSSObject => {
-  let borderColor = theme.canvas.palette.common.focusOutline;
-  let dividerBorderColor = borderColor;
-  let dividerBorderWidth = 1;
-
-  if (error === ErrorType.Error) {
-    borderColor = theme.canvas.palette.error.main;
-    dividerBorderColor = borderColor;
-  } else if (error === ErrorType.Alert) {
-    borderColor = theme.canvas.palette.alert.darkest;
-    dividerBorderColor = theme.canvas.palette.alert.main;
-    dividerBorderWidth = 2;
-  }
-
-  const dividerBorder = `${dividerBorderWidth}px solid ${dividerBorderColor}`;
-
-  return {
-    borderColor: borderColor,
-
-    // Render the divider using a pseudo-element
-    '&:before': {
-      backgroundColor: colors.soap400,
-      borderLeft: dividerBorder,
-      borderRight: dividerBorder,
-      boxSizing: 'border-box',
-      content: '""',
-      display: 'block',
-      height: 1,
-      position: 'absolute',
-      width: '100%',
-
-      '[data-popper-placement="bottom"] &': {
-        top: 0,
-      },
-      '[data-popper-placement="top"] &': {
-        bottom: 0,
-      },
-    },
-  };
-};
-
-const menuListBorderStyles = (theme: EmotionCanvasTheme, error?: ErrorType): CSSObject => {
-  let borderColor = theme.canvas.palette.common.focusOutline;
-  let borderWidth = 1;
-
-  if (error === ErrorType.Error) {
-    borderColor = theme.canvas.palette.error.main;
-  } else if (error === ErrorType.Alert) {
-    borderColor = theme.canvas.palette.alert.main;
-    borderWidth = 2;
-  }
-
-  const border = `${borderWidth}px solid ${borderColor}`;
-
-  return {
-    borderLeft: border,
-    borderRight: border,
-
-    '[data-popper-placement="bottom"] &': {
-      borderBottom: border,
-    },
-    '[data-popper-placement="top"] &': {
-      borderTop: border,
-    },
-  };
-};
-
-const Menu = styled('div')<
-  Pick<SelectMenuProps, 'error' | 'theme' | 'visibility'> & {width: number}
->(
-  {
-    backgroundColor: colors.frenchVanilla100,
-    border: `1px solid ${inputColors.border}`,
-    boxSizing: 'border-box',
-    position: 'relative',
-    transition: `opacity ${menuAnimationDuration}ms`,
-
-    '[data-popper-placement="bottom"] &': {
-      borderRadius: `0 0 ${borderRadius.m} ${borderRadius.m}`,
-      borderTop: 0,
-    },
-    '[data-popper-placement="top"] &': {
-      borderRadius: `${borderRadius.m} ${borderRadius.m} 0 0`,
-      borderBottom: 0,
-    },
-  },
-  ({error, theme}) => ({
-    ...menuBorderStyles(theme, error),
-  }),
-  ({visibility}) => ({
-    opacity: visibility === 'opening' || visibility === 'opened' || visibility === 'close' ? 1 : 0,
-  }),
-  ({width}) => ({
-    width: width,
-  })
-);
-
-const MenuList = styled('ul')<Pick<SelectProps, 'error' | 'theme'>>(
-  {
-    listStyle: 'none',
-    margin: 0,
-    maxHeight: 200,
-    outline: 'none',
-    overflowY: 'auto',
-    padding: 0,
-  },
-  ({error, theme}) => ({
-    ...menuListBorderStyles(theme, error),
-  })
-);
-
-const generatePopperOptions = (
-  props: Pick<SelectMenuProps, 'menuRef' | 'placement' | 'shouldAutoFlip' | 'shouldAutoFocus'>
-) => {
-  const {menuRef, placement, shouldAutoFlip, shouldAutoFocus} = props;
-
-  let fallbackPlacements: Placement[] = [];
-  if (shouldAutoFlip) {
-    fallbackPlacements = placement === 'top' ? ['bottom'] : ['top'];
-  }
-
-  const modifiers = [
-    {
-      name: 'flip',
-      options: {
-        fallbackPlacements,
-      },
-    },
-    {
-      name: 'offset',
-      options: {
-        offset: () => {
-          const skidding = 0;
-
-          // Displace menu towards the button to obscure the bottom
-          // edge of the button and to create a smooth visual
-          // connection between the button and the menu
-          const distance = -parseInt(borderRadius.m, 10);
-
-          return [skidding, distance];
-        },
-      },
-    },
-    {
-      name: 'preventOverflow',
-      options: {
-        // Ensure the menu stays aligned with its reference (button),
-        // even if that means the menu is pushed out of view
-        mainAxis: false,
-      },
-    },
-    {
-      // Disable the fallbackModifier as SelectMenu is properly handled by the
-      // flip modifier through shouldAutoFlip prop
-      name: 'fallbackModifier',
-      enabled: false,
-    },
-  ];
-
-  return {
-    modifiers,
-    // TODO: Consider using a more general-purpose focus function here rather
-    // than relying on Popper's onFirstUpdate for better control over how
-    // focus is managed
-    onFirstUpdate: () => {
-      if (shouldAutoFocus && menuRef && menuRef.current) {
-        menuRef.current.focus();
-      }
-    },
-  };
-};
-
-/**
- * @deprecated ⚠️ `SelectMenu` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export const SelectMenu = ({
-  buttonRef,
-  children,
-  error,
-  menuRef,
-  onClose,
-  placement = 'bottom',
-  shouldAutoFlip = true,
-  shouldAutoFocus = true,
-  visibility = 'closed',
-  ...elemProps
-}: SelectMenuProps) => {
-  const model = usePopupModel({
-    initialVisibility: 'visible',
-    returnFocusRef: buttonRef,
-    onHide: onClose,
-  });
-
-  const [width, setWidth] = useState(0);
-
-  const handleWidthChange = useCallback(() => {
-    if (buttonRef && buttonRef.current && visibility !== 'closed') {
-      const newMenuWidth = buttonRef.current.clientWidth + 2;
-      setWidth(newMenuWidth);
-    }
-  }, [buttonRef, visibility]);
-
-  useLayoutEffect(() => {
-    handleWidthChange();
-  }, [handleWidthChange]);
-
-  // TODO: Figure out a better way to handle width changes in the reference button.
-  // Seems like we should resize the menu when the reference button width changes, not
-  // necessarily when the window resizes. Resizing the menu on window resize addresses
-  // the case when `grow = true` and the user resizes the browser window while the
-  // menu is opened, but doesn't address cases where the reference button size changes
-  // through other means.
-  useEffect(() => {
-    // Update menu width state on resize to ensure menu resizes as window resizes
-    window.addEventListener('resize', handleWidthChange);
-
-    return () => {
-      window.removeEventListener('resize', handleWidthChange);
-    };
-  }, [handleWidthChange]);
-
-  useCloseOnEscape(model);
-  useCloseOnOutsideClick(model);
-  useReturnFocus(model);
-  useTransferOnFullscreenExit(model);
-
-  return (
-    <Popper
-      placement={placement}
-      anchorElement={buttonRef}
-      popperOptions={generatePopperOptions({
-        menuRef,
-        placement,
-        shouldAutoFlip,
-        shouldAutoFocus,
-      })}
-      ref={model.state.stackRef}
-    >
-      <Menu error={error} visibility={visibility} width={width}>
-        <MenuList error={error} ref={menuRef} role="listbox" tabIndex={-1} {...elemProps}>
-          {children}
-        </MenuList>
-      </Menu>
-    </Popper>
-  );
-};
diff --git a/modules/preview-react/select/lib/SelectOption.tsx b/modules/preview-react/select/lib/SelectOption.tsx
deleted file mode 100644
index 46984ea500..0000000000
--- a/modules/preview-react/select/lib/SelectOption.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import * as React from 'react';
-import {CSSObject} from '@emotion/styled';
-import {
-  EmotionCanvasTheme,
-  ErrorType,
-  Themeable,
-  pickForegroundColor,
-  styled,
-} from '@workday/canvas-kit-react/common';
-import {colors, commonColors, type} from '@workday/canvas-kit-react/tokens';
-/**
- * @deprecated ⚠️ `SelectOptionProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export interface SelectOptionProps extends Themeable, React.LiHTMLAttributes<HTMLLIElement> {
-  /**
-   * The type of error associated with the SelectOption (if applicable).
-   */
-  error?: ErrorType;
-  /**
-   * If true, set the SelectOption to the focused state.
-   * @default false
-   */
-  focused?: boolean;
-  /**
-   * The HTML `id` of the SelectOption.
-   */
-  id?: string;
-  /**
-   * If true, set the SelectOption to the interactive state. Non-interactive SelectOptions should not give any visual cues that they are interactive (e.g., remove hover styling).
-   * @default true
-   */
-  interactive?: boolean;
-  /**
-   * The ref to the list item that the styled component renders. Use this to imperatively manipulate the SelectOption (e.g., to scroll to it if it's out of view in the Select menu).
-   */
-  optionRef?: React.Ref<HTMLLIElement>;
-  /**
-   * The value of the SelectOption.
-   */
-  value?: string;
-}
-
-const optionPadding = 6;
-
-const activeStyles = (theme: EmotionCanvasTheme): CSSObject => {
-  const activeBgColor = theme.canvas.palette.primary.main;
-  return {
-    backgroundColor: activeBgColor,
-    color: pickForegroundColor(activeBgColor),
-  };
-};
-
-const Option = styled('li')<SelectOptionProps>(
-  {
-    ...type.levels.subtext.large,
-    cursor: 'default',
-    // Apply listStyle at the list item style to ensure it's styled properly
-    // in Visual Testing States
-    listStyle: 'none',
-    // In case the content of the option is empty/undefined for some reason
-    minHeight: type.levels.subtext.large.lineHeight,
-    textAlign: 'left',
-  },
-  ({'aria-disabled': disabled, focused, interactive, theme}) => {
-    if (disabled) {
-      // If the option is disabled, return disabled styles...
-      return {
-        color: colors.licorice100,
-      };
-    } else if (focused) {
-      // ...else if the option is focused, return focused styles...
-      return {
-        ...activeStyles(theme),
-      };
-    } else {
-      // ...else return hover and selected (via aria-selected) styles
-      const selectedBgColor = theme.canvas.palette.primary.lightest;
-      const selectedStyles = {
-        '&[aria-selected="true"]': {
-          backgroundColor: selectedBgColor,
-          color: pickForegroundColor(selectedBgColor),
-        },
-      };
-      // Only display interactive (hover/active) styles if the option is interactive
-      const interactiveStyles = interactive
-        ? {
-            '&:hover': {
-              backgroundColor: commonColors.hoverBackground,
-            },
-            '&:active, &:active[aria-selected="true"]': {
-              ...activeStyles(theme),
-            },
-          }
-        : {};
-      return {
-        // Place selected styles after interactive styles to have selected styles
-        // override interactive styles (subject to CSS specificity rules)
-        ...interactiveStyles,
-        ...selectedStyles,
-      };
-    }
-  },
-  ({error}) => ({
-    padding: `${optionPadding}px ${
-      error === ErrorType.Alert ? optionPadding - 1 : optionPadding
-    }px`,
-  })
-);
-
-/**
- * @deprecated ⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export const SelectOption = ({
-  children,
-  focused = false,
-  interactive = true,
-  optionRef,
-  value,
-  ...elemProps
-}: SelectOptionProps) => {
-  return (
-    <Option
-      data-value={value}
-      focused={focused}
-      interactive={interactive}
-      ref={optionRef}
-      role="option"
-      {...elemProps}
-    >
-      {children}
-    </Option>
-  );
-};
diff --git a/modules/preview-react/select/lib/scrolling.ts b/modules/preview-react/select/lib/scrolling.ts
deleted file mode 100644
index 43ac0c1303..0000000000
--- a/modules/preview-react/select/lib/scrolling.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// Modified from https://gist.github.com/hsablonniere/2581101
-/**
- * @deprecated ⚠️ `scrollIntoViewIfNeeded` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export const scrollIntoViewIfNeeded = (elem: HTMLElement, centerIfNeeded = true): void => {
-  const parent = elem.parentElement;
-
-  if (elem && parent) {
-    const parentComputedStyle = window.getComputedStyle(parent, null);
-    const parentBorderTopWidth = parseInt(
-      parentComputedStyle.getPropertyValue('border-top-width'),
-      10
-    );
-
-    // Check if elem is out of view at the top edge of the parent's viewport
-    const overTop = elem.offsetTop < parent.scrollTop + parentBorderTopWidth;
-
-    // Check if elem is out of view at the bottom edge of the parent's viewport
-    const overBottom =
-      elem.offsetTop + elem.offsetHeight >
-      parent.scrollTop + parentBorderTopWidth + parent.clientHeight;
-
-    if ((overTop || overBottom) && centerIfNeeded) {
-      parent.scrollTop = Math.floor(
-        elem.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + elem.clientHeight / 2
-      );
-    }
-
-    if ((overTop || overBottom) && !centerIfNeeded) {
-      if (overBottom) {
-        // elem is out of view at the bottom edge of the parent's viewport;
-        // scroll down just far enough for elem to be visible
-        parent.scrollTop =
-          elem.clientHeight - (parent.clientHeight + parentBorderTopWidth - elem.offsetTop);
-      } else {
-        // elem is out of view at the top edge of the parent's viewport;
-        // scroll up just far enough for elem to be visible
-        parent.scrollTop = elem.offsetTop - parentBorderTopWidth;
-      }
-    }
-  }
-};
diff --git a/modules/preview-react/select/lib/types.ts b/modules/preview-react/select/lib/types.ts
deleted file mode 100644
index e3dd354ec7..0000000000
--- a/modules/preview-react/select/lib/types.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * The placement of the menu relative to its corresponding button. This type is a
- * subset of the PopperJS.Placement type limited to the `bottom` and `top` values.
- *
- * We need to use `top` and `bottom` instead of `top-start` and `bottom-start` for
- * placements because PopperJS incorrectly rounds the `start` and `end` modifiers:
- * https://github.com/popperjs/popper-core/blob/38914aae7a2e91715c6eb2b563517082a40cfa64/src/utils/computeOffsets.js#L68-L81
- * This rounding causes problems with browsers that allow subpixel values for elements
- * like Firefox and Edge.
- *
- * @deprecated ⚠️ `MenuPlacement` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export type MenuPlacement = 'bottom' | 'top';
-
-/**
- * The visibility state of the menu.
- *
- * `closed`: The menu is completely closed (not present in the DOM).
- * `open`: The menu was previously `closed` and has just been instructed to open.
- *   The menu has been added to the DOM, but it's not yet visible. This state is
- *   necessary in order to apply an opacity of 0 to the menu before transitioning it
- *   to an opacity of 1.0 in the opening state.
- * `opening`: The menu is in the process of opening.
- * `opened`: The menu is completely open.
- * `close`: The menu was previously `open` and has just been instructed to close.
- * `closing`: The menu is in the process of closing.
- *
- * Typically, a menu will transition through states in the following order:
- * `closed` > `open` > `opening` > `opened` > `close` > `closing` > `closed`
- *
- * However, it's possible for a user to open a menu while it's in the process of
- * closing in which case the menu can transition from `closing` > `opening` (and
- * vice-versa).
- *
- * @deprecated ⚠️ `MenuVisibility` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export type MenuVisibility = 'closed' | 'open' | 'opening' | 'opened' | 'close' | 'closing';
diff --git a/modules/preview-react/select/lib/utils.ts b/modules/preview-react/select/lib/utils.ts
deleted file mode 100644
index cc2dee8611..0000000000
--- a/modules/preview-react/select/lib/utils.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {NormalizedOption} from './SelectBase';
-/**
- * @deprecated ⚠️ `getIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export const getIndexByValue = (options: NormalizedOption[], value: string | undefined): number => {
-  if (!options || value === undefined) {
-    return -1;
-  }
-
-  for (let i = 0; i < options.length; i++) {
-    if (options[i].value === value) {
-      return i;
-    }
-  }
-
-  return -1;
-};
-
-// If the value doesn't exist in the options, return index 0
-/**
- * @deprecated ⚠️ `getCorrectedIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export const getCorrectedIndexByValue = (
-  options: NormalizedOption[],
-  value: string | undefined
-): number => {
-  const indexByValue = getIndexByValue(options, value);
-
-  return indexByValue === -1 ? 0 : indexByValue;
-};
diff --git a/modules/preview-react/select/spec/SSR.spec.tsx b/modules/preview-react/select/spec/SSR.spec.tsx
deleted file mode 100644
index 753e7135ea..0000000000
--- a/modules/preview-react/select/spec/SSR.spec.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * @jest-environment node
- */
-import React from 'react';
-import {renderToString} from 'react-dom/server';
-import {Select} from '../';
-
-const options = [
-  {label: 'E-mail', value: 'email'},
-  {label: 'Phone', value: 'phone'},
-];
-
-describe('Select', () => {
-  it('should render on a server without crashing', () => {
-    const ssrRender = () => renderToString(<Select options={options} />);
-    expect(ssrRender).not.toThrow();
-  });
-});
diff --git a/modules/preview-react/select/spec/Select.spec.tsx b/modules/preview-react/select/spec/Select.spec.tsx
deleted file mode 100644
index a2556721e2..0000000000
--- a/modules/preview-react/select/spec/Select.spec.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-import {fireEvent, render} from '@testing-library/react';
-import {Select} from '../lib/Select';
-
-describe('Select', () => {
-  const cb = jest.fn();
-
-  const selectButtonRole = 'button';
-  const listboxRole = 'listbox';
-  const optionRole = 'option';
-
-  const options = [
-    {label: 'E-mail', value: 'email'},
-    {label: 'Phone', value: 'phone'},
-  ];
-
-  afterEach(() => {
-    cb.mockReset();
-  });
-
-  describe('when rendered with the id prop', () => {
-    it('should render a button with that id', () => {
-      const id = 'selectButton';
-      const {getByRole} = render(<Select id={id} onChange={cb} options={options} />);
-      expect(getByRole(selectButtonRole)).toHaveAttribute('id', id);
-    });
-  });
-
-  describe('when rendered with the disabled prop', () => {
-    it('should render a disabled button', () => {
-      const {getByRole} = render(<Select disabled={true} onChange={cb} options={options} />);
-      expect(getByRole(selectButtonRole)).toHaveProperty('disabled', true);
-    });
-  });
-
-  describe('when rendered with the aria-required prop', () => {
-    it('should apply aria-required to its menu listbox when the menu is activated', () => {
-      const {getByRole} = render(<Select onChange={cb} options={options} aria-required={true} />);
-      fireEvent.click(getByRole(selectButtonRole));
-      expect(getByRole(listboxRole)).toHaveAttribute('aria-required', 'true');
-    });
-  });
-
-  describe('when rendered with the required prop', () => {
-    it('should apply aria-required to its menu listbox when the menu is activated', () => {
-      const {getByRole} = render(<Select onChange={cb} options={options} required={true} />);
-      fireEvent.click(getByRole(selectButtonRole));
-      expect(getByRole(listboxRole)).toHaveAttribute('aria-required', 'true');
-    });
-  });
-
-  // TODO: Replace ref test with verifyComponent after fixing Select to handle
-  // consumer-provided onKeyDown event handler. Currently fails the onKeyDown
-  // callback test in verifyComponent.
-  describe('when rendered with a ref', () => {
-    it('should set the ref to the button element', async () => {
-      const ref: React.RefObject<HTMLButtonElement> = React.createRef();
-      const {findByRole} = render(<Select onChange={cb} options={options} ref={ref} />);
-      expect(await findByRole(selectButtonRole)).toEqual(ref.current);
-    });
-  });
-
-  describe('when an option with a different value than the current value of the select is clicked', () => {
-    it('should call the onChange callback', () => {
-      const {getAllByRole, getByRole} = render(<Select onChange={cb} options={options} />);
-      fireEvent.click(getByRole(selectButtonRole));
-      fireEvent.click(getAllByRole(optionRole)[1]);
-      expect(cb).toHaveBeenCalledTimes(1);
-    });
-  });
-});
diff --git a/modules/preview-react/select/spec/tsconfig.json b/modules/preview-react/select/spec/tsconfig.json
deleted file mode 100644
index e7f236e49a..0000000000
--- a/modules/preview-react/select/spec/tsconfig.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../../../tsconfig.spec.json"
-}
diff --git a/modules/preview-react/select/stories/stories.tsx b/modules/preview-react/select/stories/stories.tsx
deleted file mode 100644
index 7ee8e0992c..0000000000
--- a/modules/preview-react/select/stories/stories.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-import * as React from 'react';
-import {storiesOf} from '@storybook/react';
-import {controlComponent} from '../../../../utils/storybook';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {
-  activityStreamIcon,
-  avatarIcon,
-  uploadCloudIcon,
-  userIcon,
-} from '@workday/canvas-system-icons-web';
-import {colors, typeColors} from '@workday/canvas-kit-react/tokens';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {
-  Select,
-  RenderOptionFunction,
-  RenderSelectedFunction,
-} from '@workday/canvas-kit-preview-react/select';
-
-const hintText = 'Helpful text goes here.';
-const hintId = 'error-desc-id';
-
-export const options = [
-  {label: 'E-mail', value: 'email-1234'},
-  {label: 'Phone', value: 'phone'},
-  {label: 'Fax (disabled)', value: 'fax', disabled: true},
-  {label: 'Mail', value: 'mail'},
-  {label: 'Mobile Phone', value: 'mobile_phone'},
-  {
-    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',
-    value: 'oasis',
-  },
-];
-
-export const simpleOptions = ['California', 'Florida', 'New York', 'Pennsylvania', 'Texas'];
-
-export const manyOptions = [
-  {label: 'Atlanta (United States)', value: 'atlanta'},
-  {label: 'Amsterdam (Europe)', value: 'amsterdam'},
-  {label: 'Austin (United States)', value: 'austin'},
-  {label: 'Beaverton (United States)', value: 'beaverton'},
-  {label: 'Belfast (Europe)', value: 'belfast'},
-  {label: 'Berlin (Europe)', value: 'berlin'},
-  {label: 'Boston (United States)', value: 'boston'},
-  {label: 'Boulder (United States)', value: 'boulder'},
-  {label: 'Chicago (United States)', value: 'chicago'},
-  {label: 'Dallas (United States)', value: 'dallas'},
-  {label: 'Denver (United States)', value: 'denver'},
-  {label: 'Dublin (Europe)', value: 'dublin'},
-  {label: 'Irvine (United States)', value: 'irvine'},
-  {label: 'Minneapolis (United States)', value: 'minneapolis'},
-  {label: 'New York (United States)', value: 'new-york'},
-  {label: 'Orlando (United States)', value: 'orlando'},
-  {label: 'Palo Alto (United States)', value: 'palo-alto'},
-  {label: 'Philadelphia (United States)', value: 'philadelphia'},
-  {label: 'Pleasanton (United States)', value: 'pleasanton'},
-  {label: 'Raleigh (United States)', value: 'raleigh'},
-  {label: 'San Francisco (United States)', value: 'san-francisco'},
-  {label: 'San Mateo (United States)', value: 'san-mateo'},
-  {label: 'Stockholm (Europe)', value: 'stockholm'},
-  {
-    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation (Virtual Reality)',
-    value: 'oasis',
-  },
-  {label: 'Toronto (Canada)', value: 'toronto'},
-  {label: 'Victoria (Canada)', value: 'victoria'},
-  {label: 'Vienna (Europe)', value: 'vienna'},
-  {label: 'Warsaw (Europe)', value: 'warsaw'},
-  {label: 'Washington, DC (United States)', value: 'washington-dc'},
-  {label: 'Zurich (Europe)', value: 'zurich'},
-];
-
-export const customOptions = [
-  {value: 'Activity Stream', data: {icon: activityStreamIcon}},
-  {value: 'Avatar', data: {icon: avatarIcon}},
-  {value: 'Upload Cloud', data: {icon: uploadCloudIcon}},
-  {value: 'User', data: {icon: userIcon}},
-];
-
-export const customRenderOption: RenderOptionFunction = option => {
-  const iconColor = option.focused ? typeColors.inverse : colors.blackPepper100;
-  return (
-    <div style={{alignItems: 'center', display: 'flex', padding: '3px 0'}}>
-      <SystemIcon icon={option.data.icon} color={iconColor} colorHover={iconColor} />
-      <div style={{marginLeft: 5}}>{option.value}</div>
-    </div>
-  );
-};
-
-export const customRenderSelected: RenderSelectedFunction = option => {
-  const iconColor = colors.blackPepper100;
-  return (
-    <div style={{alignItems: 'center', display: 'flex'}}>
-      <SystemIcon icon={option.data.icon} color={iconColor} colorHover={iconColor} />
-      <div style={{marginLeft: 5}}>{option.value}</div>
-    </div>
-  );
-};
-
-storiesOf('Preview/Select/Top Label', module)
-  .addParameters({component: Select})
-  .addParameters({ReadmePath: 'preview-react/select'})
-  .add('Default', () => (
-    <FormField label="Label" inputId="select-default">
-      {controlComponent(<Select name="contact" options={options} />)}
-    </FormField>
-  ))
-  .add('Default with Simple Options (Strings)', () => (
-    <FormField label="Label" inputId="select-default-simple">
-      {controlComponent(<Select name="state" options={simpleOptions} />)}
-    </FormField>
-  ))
-  .add('Default with Custom Options Data', () => (
-    <FormField label="Label" inputId="select-default-custom">
-      {controlComponent(
-        <Select
-          name="icon"
-          options={customOptions}
-          renderOption={customRenderOption}
-          renderSelected={customRenderSelected}
-        />
-      )}
-    </FormField>
-  ))
-  .add('Scrollable', () => (
-    <FormField label="Label" inputId="select-scrollable">
-      {controlComponent(<Select name="city" options={manyOptions} />)}
-    </FormField>
-  ))
-  .add('Disabled', () => (
-    <FormField label="Label" inputId="select-disabled">
-      {controlComponent(<Select name="contact" options={options} disabled={true} />)}
-    </FormField>
-  ))
-  .add('Alert', () => (
-    <FormField
-      label="Label"
-      inputId="select-alert"
-      error={FormField.ErrorType.Alert}
-      hintText={hintText}
-      hintId={hintId}
-    >
-      {controlComponent(<Select name="contact" options={options} />)}
-    </FormField>
-  ))
-  .add('Error', () => (
-    <FormField
-      label="Label"
-      inputId="select-error"
-      error={FormField.ErrorType.Error}
-      hintText={hintText}
-      hintId={hintId}
-    >
-      {controlComponent(<Select name="contact" options={options} />)}
-    </FormField>
-  ))
-  .add('Grow', () => (
-    <FormField label="Label" inputId="select-grow" grow={true}>
-      {controlComponent(<Select name="contact" options={options} />)}
-    </FormField>
-  ));
-
-storiesOf('Preview/Select/Left Label', module)
-  .addParameters({component: Select})
-  .addParameters({ReadmePath: 'preview-react/select'})
-  .add('Default', () => (
-    <FormField labelPosition={FormField.LabelPosition.Left} label="Label" inputId="select-default">
-      {controlComponent(<Select name="contact" options={options} />)}
-    </FormField>
-  ))
-  .add('Default with Simple Options (Strings)', () => (
-    <FormField
-      labelPosition={FormField.LabelPosition.Left}
-      label="Label"
-      inputId="select-default-simple"
-    >
-      {controlComponent(<Select name="state" options={simpleOptions} />)}
-    </FormField>
-  ))
-  .add('Default with Custom Options Data', () => (
-    <FormField
-      labelPosition={FormField.LabelPosition.Left}
-      label="Label"
-      inputId="select-default-custom"
-    >
-      {controlComponent(
-        <Select
-          name="icon"
-          options={customOptions}
-          renderOption={customRenderOption}
-          renderSelected={customRenderSelected}
-        />
-      )}
-    </FormField>
-  ))
-  .add('Scrollable', () => (
-    <FormField
-      labelPosition={FormField.LabelPosition.Left}
-      label="Label"
-      inputId="select-scrollable"
-    >
-      {controlComponent(<Select name="city" options={manyOptions} />)}
-    </FormField>
-  ))
-  .add('Disabled', () => (
-    <FormField labelPosition={FormField.LabelPosition.Left} label="Label" inputId="select-disabled">
-      {controlComponent(<Select name="contact" options={options} disabled={true} />)}
-    </FormField>
-  ))
-  .add('Alert', () => (
-    <FormField
-      labelPosition={FormField.LabelPosition.Left}
-      label="Label"
-      inputId="select-alert"
-      error={FormField.ErrorType.Alert}
-      hintText={hintText}
-      hintId={hintId}
-    >
-      {controlComponent(<Select name="contact" options={options} />)}
-    </FormField>
-  ))
-  .add('Error', () => (
-    <FormField
-      labelPosition={FormField.LabelPosition.Left}
-      label="Label"
-      inputId="select-error"
-      error={FormField.ErrorType.Error}
-      hintText={hintText}
-      hintId={hintId}
-    >
-      {controlComponent(<Select name="contact" options={options} />)}
-    </FormField>
-  ))
-  .add('Grow', () => (
-    <FormField
-      labelPosition={FormField.LabelPosition.Left}
-      label="Label"
-      inputId="select-grow"
-      grow={true}
-    >
-      {controlComponent(<Select name="contact" options={options} />)}
-    </FormField>
-  ));
diff --git a/modules/preview-react/select/stories/stories_CypressTesting.tsx b/modules/preview-react/select/stories/stories_CypressTesting.tsx
deleted file mode 100644
index 57344672f8..0000000000
--- a/modules/preview-react/select/stories/stories_CypressTesting.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-import * as React from 'react';
-import {controlComponent} from '../../../../utils/storybook';
-
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-
-import {Select} from '../lib/Select';
-
-import {manyOptions, options} from './stories';
-import {Modal} from '@workday/canvas-kit-react/modal';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-export default {
-  title: 'Testing/Preview/Select/Cypress',
-  component: Select,
-};
-
-const disabledOptions = [
-  {label: 'Carrier Pigeon', value: 'pigeon', disabled: true},
-  {label: 'E-mail', value: 'email'},
-  {label: 'Phone', value: 'phone'},
-  {label: 'Fax', value: 'fax', disabled: true},
-  {label: 'Mail', value: 'mail'},
-  {label: 'Mobile Phone', value: 'mobile_phone'},
-  {label: 'Telegram', value: 'telegram', disabled: true},
-];
-
-const Container = ({children, style = {}, ...elemProps}) => {
-  return (
-    <div
-      style={{
-        ...style,
-        border: `1px solid ${colors.soap600}`,
-        marginTop: 50,
-        overflow: 'hidden',
-        padding: 20,
-      }}
-      {...elemProps}
-    >
-      {children}
-    </div>
-  );
-};
-
-const SelectModal = () => {
-  return (
-    <Modal>
-      <Modal.Target>Show Modal</Modal.Target>
-      <Modal.Overlay>
-        <Modal.Card>
-          <Modal.CloseIcon aria-label="Close" />
-          <Modal.Heading>Modal with Select</Modal.Heading>
-          <Modal.Body>
-            <p>The menu for this Select should break out of the Modal.</p>
-            <FormField label="Label" inputId="select-modal">
-              {controlComponent(<Select name="city" options={manyOptions} />)}
-            </FormField>
-            <Flex gap="s">
-              <Modal.CloseButton as={PrimaryButton}>Submit</Modal.CloseButton>
-              <Modal.CloseButton>Cancel</Modal.CloseButton>
-            </Flex>
-          </Modal.Body>
-        </Modal.Card>
-      </Modal.Overlay>
-    </Modal>
-  );
-};
-
-const BlurTest = () => {
-  const [clicked, setClicked] = React.useState(false);
-
-  const handleButtonBlur = () => {
-    // Setting clicked updates the state of BlurTest which in turn causes
-    // the contained Select to re-render
-    setClicked(false);
-  };
-
-  const handleButtonClick = () => {
-    setClicked(true);
-  };
-
-  return (
-    <>
-      <div style={{height: '100vh'}}>Empty filler (scroll down)</div>
-      <h2>Blur Test</h2>
-      <p>
-        The following test checks against a timing issue where focus could be applied to the Select
-        Menu before it's been properly positioned, causing the browser to scroll to the top of the
-        page when clicking the Select Button to activate its Menu.
-      </p>
-      <h3>Context</h3>
-      <p>
-        The Select component consists of a Button (the collapsed form of the Select) and a Menu (the
-        dropdown menu displayed when you click on the Button or activate it using assistive
-        technology). The Menu has two important characteristics:
-      </p>
-      <ol>
-        <li>DOM focus is applied to the Menu when it's visible.</li>
-        <li>
-          The Menu is portalled to another location in the DOM outside the DOM hierarchy of the
-          Select component (to enable it to break outside of Modals, for example). Because the Menu
-          is located some distance (DOM-wise) away from it's corresponding Button, it needs to be
-          positioned so that it's visually attached to its Button.
-        </li>
-      </ol>
-      <p>
-        Focusing the Menu before it's been properly positioned next to the Button will cause the
-        browser to scroll to the wrong location (where the Menu was <strong>before</strong> it was
-        positioned next to the button -- this is generally the top of the page).
-      </p>
-      <h3>Test</h3>
-      <p>
-        The following test creates a scenario where such a timing issue could potentially occur:
-      </p>
-      <ol>
-        <li>The page is long (requires scrolling).</li>
-        <li>
-          There's a button and a Select near the bottom of the page. The button has a blur handler
-          which triggers a re-render of the Select.
-        </li>
-        <li>You click on the button to give it focus.</li>
-        <li>
-          You then click on the Select. This activates the Menu and immediately triggers the blur
-          handler for the button (which re-renders the Select).
-        </li>
-      </ol>
-      <p>
-        This creates a tricky situation where we could potentially assign focus to the Menu before
-        it's been positioned since we're re-rendering the Menu immediately after it's been
-        activated. If we assign focus too soon, the page will scroll to the top and you'll need to
-        scroll back down to access the Menu you just activated.
-      </p>
-      <p>
-        To run the test, click on the "Click me first!" button, and then click directly on the
-        Select below it (directly on the Select itself, <strong>not</strong> the label).{' '}
-        <strong>No scrolling should occur when the Select is clicked.</strong>
-      </p>
-      <button onBlur={handleButtonBlur} onClick={handleButtonClick} data-testid="blur-test-button">
-        {clicked
-          ? 'Clicked! Now click directly on the Select below (not the label)'
-          : 'Click me first!'}
-      </button>
-      <FormField label="Label (Bottom)" inputId="select-bottom" style={{marginTop: '10px'}}>
-        {controlComponent(<Select name="contact" options={options} />)}
-      </FormField>
-    </>
-  );
-};
-
-export const AccessibilityTest = () => (
-  <div>
-    <Container>
-      <p>
-        This Select has its <strong>aria-required</strong> prop set to true. When its listbox menu
-        is opened, we expect aria-required to be set to "true" for the listbox.
-      </p>
-      <FormField label="Label (aria-required)" inputId="select-aria-required" required={true}>
-        {controlComponent(
-          <Select name="select-aria-required" options={options} aria-required={true} />
-        )}
-      </FormField>
-      <p>
-        This Select has its <strong>required</strong> prop set to true. Again, when its listbox menu
-        is opened, we expect aria-required to be set to "true" for the listbox.
-      </p>
-      <FormField label="Label (required)" inputId="select-required" required={true}>
-        {controlComponent(<Select name="select-required" options={options} required={true} />)}
-      </FormField>
-    </Container>
-  </div>
-);
-
-export const DisabledOptionsTest = () => (
-  <div>
-    <Container>
-      <p>Disabled options may not be assistively focused using the keyboard.</p>
-      <FormField label="Label (Disabled Options)" inputId="select-disabled-options">
-        {controlComponent(<Select name="select-disabled-options" options={disabledOptions} />)}
-      </FormField>
-    </Container>
-  </div>
-);
-
-export const PortalTest = () => (
-  <div>
-    <Container>
-      <p>
-        All gray-bordered containers on this page have their overflow set to hidden. Menus are
-        rendered using portals and should break out of their containers.
-      </p>
-      <FormField label="Label" inputId="select-default-top-label">
-        {controlComponent(<Select name="contact" options={options} />)}
-      </FormField>
-      <p>
-        Menus for Select with grow set to true should resize automatically as the Select grows.
-        Activate this menu and resize the window to see the menu grow to match the width of the
-        Select.
-      </p>
-      <FormField label="Label (Grow)" inputId="select-default-top-label-grow" grow={true}>
-        {controlComponent(<Select name="city" options={manyOptions} grow={true} />)}
-      </FormField>
-    </Container>
-    <Container>
-      <p>
-        Menus should flip upwards automatically if there isn't enough space in the viewport for them
-        to extend downwards. As you scroll down and space becomes available, the Menu will flip back
-        downwards.
-      </p>
-      <FormField label="Label" inputId="select-alert-top-label" error={FormField.ErrorType.Alert}>
-        {controlComponent(<Select name="contact" options={options} />)}
-      </FormField>
-      <FormField
-        label="Label (Grow)"
-        inputId="select-alert-top-label-grow"
-        error={FormField.ErrorType.Alert}
-        grow={true}
-      >
-        {controlComponent(<Select grow={true} name="city" options={manyOptions} />)}
-      </FormField>
-    </Container>
-    <Container>
-      <p>Menus should behave the same with left-labeled FormFields.</p>
-      <FormField
-        label="Label"
-        labelPosition={FormField.LabelPosition.Left}
-        inputId="select-default-left-label"
-      >
-        {controlComponent(<Select name="contact" options={options} />)}
-      </FormField>
-      <FormField
-        label="Label (Grow)"
-        labelPosition={FormField.LabelPosition.Left}
-        inputId="select-default-left-label-grow"
-        grow={true}
-      >
-        {controlComponent(<Select name="city" options={manyOptions} grow={true} />)}
-      </FormField>
-    </Container>
-    <Container>
-      <p>Menus should break out of Modals.</p>
-      <SelectModal />
-    </Container>
-    <Container>
-      <BlurTest />
-    </Container>
-  </div>
-);
diff --git a/modules/preview-react/select/stories/stories_visualTesting.tsx b/modules/preview-react/select/stories/stories_visualTesting.tsx
deleted file mode 100644
index da85f102b9..0000000000
--- a/modules/preview-react/select/stories/stories_visualTesting.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import * as React from 'react';
-import {
-  ComponentStatesTable,
-  permutateProps,
-  StaticStates,
-} from '@workday/canvas-kit-react/testing';
-import {withSnapshotsEnabled, customColorTheme} from '../../../../utils/storybook';
-
-import {Select} from '../lib/Select';
-import {SelectBase} from '../lib/SelectBase';
-import {SelectOption} from '../lib/SelectOption';
-
-import {options} from './stories';
-
-const normalizedOptions = options.map(option => {
-  return {
-    data: {},
-    disabled: option.disabled || false,
-    id: option.value,
-    label: option.label || option.value,
-    value: option.value,
-  };
-});
-
-export default withSnapshotsEnabled({
-  title: 'Testing/Preview/Select',
-  component: Select,
-});
-
-export const SelectStates = () => (
-  <StaticStates>
-    <ComponentStatesTable
-      rowProps={[
-        {label: 'Default', props: {}},
-        {label: 'Alert', props: {error: Select.ErrorType.Alert}},
-        {label: 'Error', props: {error: Select.ErrorType.Error}},
-      ]}
-      columnProps={permutateProps(
-        {
-          className: [
-            {label: 'Default', value: ''},
-            {label: 'Hover', value: 'hover'},
-            {label: 'Focus', value: 'focus'},
-            {label: 'Focus Hover', value: 'focus hover'},
-            {label: 'Active', value: 'active'},
-            {label: 'Active Hover', value: 'active hover'},
-          ],
-          disabled: [
-            {label: '', value: false},
-            {label: 'Disabled', value: true},
-          ],
-        },
-        props => {
-          if (props.disabled && !['', 'hover'].includes(props.className)) {
-            return false;
-          }
-          return true;
-        }
-      )}
-    >
-      {props => (
-        <Select
-          {...props}
-          onChange={() => {}} // eslint-disable-line no-empty-function
-          options={options}
-        />
-      )}
-    </ComponentStatesTable>
-  </StaticStates>
-);
-
-export const SelectStatesMenuOn = () => (
-  <StaticStates>
-    <ComponentStatesTable
-      rowProps={[
-        {label: 'Default', props: {}},
-        {label: 'Alert', props: {error: Select.ErrorType.Alert}},
-        {label: 'Error', props: {error: Select.ErrorType.Error}},
-      ]}
-      columnProps={[
-        {label: 'Default', props: {}},
-        {label: 'Top', props: {menuPlacement: 'top'}},
-      ]}
-    >
-      {props => {
-        const buttonRef = React.createRef<HTMLButtonElement>();
-        return (
-          <div
-            style={{
-              height: 500,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'flex-start',
-            }}
-          >
-            <SelectBase
-              {...props}
-              forwardedButtonRef={buttonRef}
-              localButtonRef={buttonRef}
-              onChange={() => {}} // eslint-disable-line no-empty-function
-              options={normalizedOptions}
-              focusedOptionIndex={1}
-              menuVisibility="opened"
-              shouldMenuAutoFlip={false}
-              shouldMenuAutoFocus={false}
-            />
-          </div>
-        );
-      }}
-    </ComponentStatesTable>
-  </StaticStates>
-);
-
-export const SelectStatesOption = () => (
-  <div>
-    {[
-      {
-        label: 'Disabled States',
-        columnProps: [
-          {label: 'Default', props: {}},
-          {label: 'Hover', props: {className: 'hover'}},
-        ],
-        rowProps: [{label: 'Disabled', props: {'aria-disabled': true}}],
-      },
-      {
-        label: 'Interaction States',
-        columnProps: [
-          {label: 'Default', props: {}},
-          {label: 'Hover', props: {className: 'hover'}},
-          {label: 'Active', props: {className: 'active'}},
-          {label: 'Active Hover', props: {className: 'active hover'}},
-        ],
-        rowProps: [
-          {label: 'Default', props: {}},
-          {label: 'Assistive-Focus', props: {focused: true}},
-          {label: 'Selected', props: {'aria-selected': true}},
-          {label: 'Assistive-Focus Selected', props: {'aria-selected': true, focused: true}},
-        ],
-      },
-    ].map(statesTable => (
-      <div key={statesTable.label}>
-        <h2>{statesTable.label}</h2>
-        <StaticStates>
-          <ComponentStatesTable
-            rowProps={statesTable.rowProps}
-            columnProps={statesTable.columnProps}
-          >
-            {props => (
-              <ul style={{listStyle: 'none', margin: 0, padding: 0, width: 280}}>
-                <SelectOption {...props}>E-mail</SelectOption>
-              </ul>
-            )}
-          </ComponentStatesTable>
-        </StaticStates>
-      </div>
-    ))}
-  </div>
-);
-
-const themedParameters = {
-  canvasProviderDecorator: {
-    theme: customColorTheme,
-  },
-};
-
-export const SelectThemedStates = () => <SelectStates />;
-export const SelectThemedStatesMenuOn = () => <SelectStatesMenuOn />;
-export const SelectThemedStatesOption = () => <SelectStatesOption />;
-
-SelectThemedStates.parameters = themedParameters;
-SelectThemedStatesMenuOn.parameters = themedParameters;
-SelectThemedStatesOption.parameters = themedParameters;
diff --git a/modules/preview-react/select/stories/tsconfig.json b/modules/preview-react/select/stories/tsconfig.json
deleted file mode 100644
index 4fb6aa9472..0000000000
--- a/modules/preview-react/select/stories/tsconfig.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../../../tsconfig.stories.json"
-}
diff --git a/modules/react/_examples/stories/examples/GlobalHeader.tsx b/modules/react/_examples/stories/examples/GlobalHeader.tsx
index 2519a65018..4190644e66 100644
--- a/modules/react/_examples/stories/examples/GlobalHeader.tsx
+++ b/modules/react/_examples/stories/examples/GlobalHeader.tsx
@@ -31,7 +31,7 @@ export const Basic = () => (
       <TertiaryButton aria-label="messages" icon={assistantIcon} />
       <TertiaryButton aria-label="notifications" icon={notificationsIcon} />
       <TertiaryButton aria-label="inbox" icon={inboxIcon} />
-      <Avatar size={Avatar.Size.m} variant={Avatar.Variant.Light} />
+      <Avatar size="medium" variant="light" />
     </GlobalHeader.Item>
   </GlobalHeader>
 );
diff --git a/modules/react/avatar/README.md b/modules/react/avatar/README.md
index 6de1f0f22c..17674166d2 100644
--- a/modules/react/avatar/README.md
+++ b/modules/react/avatar/README.md
@@ -8,48 +8,6 @@ A component showing a user's photo with a circular crop.
 yarn add @workday/canvas-kit-react
 ```
 
-## Usage
-
-```tsx
-import * as React from 'react';
-import {Avatar, AvatarVariant} from '@workday/canvas-kit-react/avatar';
-
-// Basic button with click handler
-<Avatar onClick={someFunction} />
-
-// Rendering as a div instead of a button
-<Avatar as="div" />
-
-// Using static properties on Avatar
-<Avatar
-  size={Avatar.Size.xs}
-  variant={Avatar.Variant.Dark}
-/>
-
-// Using AvatarVariant import directly
-<Avatar size={Avatar.Size.xs} variant={AvatarVariant.Dark} />
-```
-
-## Static Properties
-
-#### `variant: AvatarVariant`
-
-```tsx
-<Avatar variant={Avatar.Variant.Dark} />
-```
-
----
-
-#### `Size: SystemIconCircleSize | number`
-
-```tsx
-<Avatar size={Avatar.Size.xs} />
-
-// Custom Size.
-// Note: Please use the predefined sizes as it works nicely with the Canvas Design System
-<Avatar size={48} />
-```
-
 ## Component Props
 
 ### Required
@@ -58,39 +16,39 @@ import {Avatar, AvatarVariant} from '@workday/canvas-kit-react/avatar';
 
 ### Optional
 
-#### `variant: AvatarVariant`
+#### `variant: "light" | "dark"`
 
 > The variant of the avatar if using a default image.
 
-Default: `AvatarVariant.Light`
+Default: "light"
 
-| Variant | Description                      |
+| String  | Description                      |
 | ------- | -------------------------------- |
-| `Light` | Light grey background, dark icon |
-| `Dark`  | Dark blue background, white icon |
+| "light" | Light grey background, dark icon |
+| "dark"  | Dark blue background, white icon |
 
 ---
 
-#### `size: SystemIconCircleSize | number`
+#### `size: "extraSmall" | "small" | "medium" | "large" | "extraLarge" | "extraExtraLarge" | (string & {})`
 
-> The diameter of the avatar in pixels
+> The diameter of the avatar in pixels. Can be given custom size as a string in either px or rem.
 
-Default: `Avatar.Size.m`
+Default: "medium"
 
-| Name  | Size (px) |
-| ----- | --------- |
-| `xs`  | 16        |
-| `s`   | 24        |
-| `m`   | 32        |
-| `l`   | 40        |
-| `xl`  | 64        |
-| `xxl` | 120       |
+| Name              | Size (px) |
+| ----------------- | --------- |
+| "extraSmall"      | 16        |
+| "small"           | 24        |
+| "medium"          | 32        |
+| "large"           | 40        |
+| "extraLarge"      | 64        |
+| "extraExtraLarge" | 120       |
 
 ---
 
 #### `altText: string`
 
-> Text describing what the avatar is showing.
+> The alt text of the Avatar image. This prop is also used for the aria-label.
 
 ---
 
@@ -100,6 +58,15 @@ Default: `Avatar.Size.m`
 
 ---
 
+
+---
+
+#### `objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset"`
+
+> An objectFit property that can customize how to resize your image to fit its container.
+
+---
+
 #### `ref: React.Ref<HTMLButtonElement>`
 
 > A ref to the underlying `<button>` or `<div>` element.
diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 5988f251b5..4ed96e0502 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,149 +1,231 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
-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';
-import {userIcon} from '@workday/canvas-system-icons-web';
+import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
+import {createStencil, calc} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {borderRadius} from '@workday/canvas-kit-react/tokens';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 
-export enum AvatarVariant {
-  Light,
-  Dark,
-}
+import {userIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
-export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface AvatarProps {
   /**
-   * The variant of the Avatar default state. Accepts `Light` or `Dark`.
-   * @default AvatarVariant.Light
+   * The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.
+   * @default "light"
    */
-  variant?: AvatarVariant;
+  variant?: 'light' | 'dark';
   /**
    * The size of the Avatar.
-   * @default SystemIconCircleSize.m
+   * - `extraExtraLarge`: 7.5rem x 7.5rem (120px  x 120px)
+   * - `extraLarge`: 4.5rem x 4.5rem (64px x 64px)
+   * - `large`: 2.5rem x 2.5rem (40px x 40px)
+   * - `medium`: 2rem x 2rem (32px x 32px)
+   * - `small`: 1.5rem x 1.5rem (24px x 24px)
+   * - `small`: 1rem x 1rem (16px x 16px)
+   * @default "medium"
    */
-  size?: SystemIconCircleSize | number;
+  size?: /** size of small */
+  'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {});
   /**
-   * The alt text of the Avatar image. This prop is also used for the aria-label
+   * The alt text of the Avatar image. This prop is also used for the aria-label.
    * @default Avatar
    */
   altText?: string;
   /**
-   * The url of the Avatar image.
+   * The URL of the user's photo. For best fit, use square images.
    */
   url?: string;
   /**
-   * The alternative container type for the button. Uses Emotion's special `as` prop.
-   * Will render an `div` tag instead of a `button` when defined.
-   */
-  as?: 'div';
-  /**
-   * The object-fit CSS property sets how the content of a replaced element,
-   * such as an `<img>` or `<video>`, should be resized to fit its container.
-   * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
-   * If your image is not a square, you can use this property to ensure the image is rendered properly.
+   * An objectFit property that can customize how to resize your image to fit its container.
+   * @default "contain"
    */
   objectFit?: Property.ObjectFit;
 }
 
-/**
- * Used to get the props of the div version of an avatar
- */
-type AvatarDivProps = Omit<AvatarProps, keyof React.ButtonHTMLAttributes<HTMLButtonElement>> &
-  React.HTMLAttributes<HTMLDivElement>;
-
-/**
- * Returns an overloaded functional component that uses button props by default.
- */
-type AvatarOverload = {
-  (props: {as: 'div'} & AvatarDivProps & {ref?: React.Ref<HTMLElement>}): React.ReactElement;
-  (props: Omit<AvatarProps, 'as'> & {ref?: React.Ref<HTMLButtonElement>}): React.ReactElement;
-  Variant: typeof AvatarVariant;
-  Size: typeof SystemIconCircleSize;
-};
-
-const fadeTransition = 'opacity 150ms linear';
-
-const StyledContainer = styled('button', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<Pick<AvatarProps, 'size' | 'onClick'>>(
-  {
-    background: colors.soap200,
+export const avatarStencil = createStencil({
+  vars: {
+    size: '',
+  },
+  base: ({size}) => ({
+    background: system.color.bg.caution.default,
     position: 'relative',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     padding: 0,
     border: 0,
-    boxSizing: 'border-box',
     overflow: 'hidden',
-    borderRadius: borderRadius.circle,
-    '&:not([disabled])': {
-      '&:focus': {
-        outline: 'none',
-        ...focusRing({separation: 2}),
-      },
-    },
-    ...hideMouseFocus,
-  },
-  ({size}) => ({
-    height: size,
+    cursor: 'default',
+    borderRadius: system.shape.round,
     width: size,
-  }),
-  ({onClick}) => ({
-    cursor: onClick ? 'pointer' : 'default',
-  })
-);
-
-const StyledStack = styled('span')<Pick<AvatarProps, 'size'>>(
-  {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-  },
-  ({size}) => ({
     height: size,
-    width: size,
-  })
-);
-
-const StyledIcon = styled(SystemIconCircle, {
-  shouldForwardProp: filterOutProps(['isImageLoaded']),
-})<{isImageLoaded: boolean}>(
-  {
-    transition: fadeTransition,
+    '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+      outline: 'none',
+      ...focusRing({separation: 2}),
+    },
+    ':is(button)': {
+      cursor: 'pointer',
+    },
+    ['& > [data-slot="avatar-icon"]']: {
+      transition: 'opacity 150ms linear',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      [systemIconStencil.vars.size]: calc.multiply(size, 0.625),
+    },
+    ['& > [data-slot="avatar-image"]']: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      borderRadius: borderRadius.circle,
+      transition: 'opacity 150ms linear',
+    },
+  }),
+  modifiers: {
+    variant: {
+      light: {
+        backgroundColor: system.color.bg.alt.default,
+        ['& [data-slot="avatar-icon"]']: {
+          [systemIconStencil.vars.color]: system.color.fg.default,
+        },
+      },
+      dark: {
+        backgroundColor: system.color.bg.primary.default,
+        ['& [data-slot="avatar-icon"]']: {
+          [systemIconStencil.vars.color]: system.color.fg.inverse,
+        },
+      },
+    },
+    size: {
+      extraSmall: {
+        width: system.space.x4,
+        height: system.space.x4,
+        ['& [data-slot="avatar-icon"]']: {
+          [systemIconStencil.vars.size]: calc.multiply(system.space.x4, 0.625),
+        },
+      },
+      small: {
+        width: system.space.x6,
+        height: system.space.x6,
+        ['& [data-slot="avatar-icon"]']: {
+          [systemIconStencil.vars.size]: calc.multiply(system.space.x6, 0.625),
+        },
+      },
+      medium: {
+        width: system.space.x8,
+        height: system.space.x8,
+        ['& [data-slot="avatar-icon"]']: {
+          [systemIconStencil.vars.size]: calc.multiply(system.space.x8, 0.625),
+        },
+      },
+      large: {
+        width: system.space.x10,
+        height: system.space.x10,
+        ['& [data-slot="avatar-icon"]']: {
+          [systemIconStencil.vars.size]: calc.multiply(system.space.x10, 0.625),
+        },
+      },
+      extraLarge: {
+        width: system.space.x16,
+        height: system.space.x16,
+        ['& [data-slot="avatar-icon"]']: {
+          [systemIconStencil.vars.size]: calc.multiply(system.space.x16, 0.625),
+        },
+      },
+      extraExtraLarge: {
+        width: calc.multiply(system.space.x10, 3),
+        height: calc.multiply(system.space.x10, 3),
+        ['& [data-slot="avatar-icon"]']: {
+          [systemIconStencil.vars.size]: calc.multiply(calc.multiply(system.space.x10, 3), 0.625),
+        },
+      },
+    },
+    objectFit: {
+      contain: {
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'contain',
+        },
+      },
+      fill: {
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'fill',
+        },
+      },
+      cover: {
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'cover',
+        },
+      },
+      ['scale-down']: {
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'scale-down',
+        },
+      },
+      none: {
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'none',
+        },
+      },
+      ['-moz-initial']: {
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: '-moz-initial',
+        },
+      },
+      ['initial']: {
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'initial',
+        },
+      },
+      ['inherit']: {
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'inherit',
+        },
+      },
+      ['revert']: {
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'revert',
+        },
+      },
+      ['unset']: {
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'unset',
+        },
+      },
+    },
+    isImageLoaded: {
+      true: {
+        ['& [data-slot="avatar-icon"]']: {
+          opacity: 0,
+        },
+        ['& [data-slot="avatar-image"]']: {
+          opacity: 1,
+        },
+      },
+      false: {
+        ['& [data-slot="avatar-icon"]']: {
+          opacity: 1,
+        },
+        ['& [data-slot="avatar-image"]']: {
+          opacity: 0,
+        },
+      },
+    },
   },
-  ({isImageLoaded}) => ({
-    opacity: isImageLoaded ? 0 : 1,
-  })
-);
-
-const StyledImage = styled('img', {
-  shouldForwardProp: filterOutProps(['isLoaded', 'objectFit']),
-})<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
-  {
-    width: '100%',
-    height: '100%',
-    borderRadius: borderRadius.circle,
-    transition: fadeTransition,
+  defaultModifiers: {
+    variant: 'light',
+    size: 'medium',
+    isImageLoaded: 'false',
+    objectFit: 'contain',
   },
-  ({isLoaded, objectFit}) => ({
-    opacity: isLoaded ? 1 : 0,
-    objectFit,
-  })
-);
+});
 
-export const Avatar: AvatarOverload = React.forwardRef(
-  (
-    {
-      variant = AvatarVariant.Light,
-      size = SystemIconCircleSize.m,
-      altText = 'Avatar',
-      url,
-      onClick,
-      objectFit,
-      ...elemProps
-    }: AvatarProps,
-    ref: React.Ref<HTMLButtonElement>
+export const Avatar = createComponent('button')({
+  displayName: 'Avatar',
+  Component: (
+    {variant, size, altText = 'Avatar', url, objectFit, ...elemProps}: AvatarProps,
+    ref,
+    Element
   ) => {
     const [imageLoaded, setImageLoaded] = useState(false);
 
@@ -157,41 +239,22 @@ export const Avatar: AvatarOverload = React.forwardRef(
       setImageLoaded(false);
     }, [url]);
 
-    const background = variant === AvatarVariant.Dark ? colors.blueberry400 : colors.soap300;
-
     return (
-      <StyledContainer
-        size={size}
-        aria-label={altText}
-        onClick={onClick}
-        disabled={onClick ? false : true}
+      <Element
         ref={ref}
-        {...elemProps}
+        aria-label={altText}
+        {...mergeStyles(elemProps, [
+          avatarStencil({
+            variant,
+            size,
+            objectFit,
+            isImageLoaded: imageLoaded,
+          }),
+        ])}
       >
-        <StyledStack size={size}>
-          <StyledIcon
-            icon={userIcon}
-            background={background}
-            size={size}
-            isImageLoaded={imageLoaded}
-          />
-        </StyledStack>
-        {url && (
-          <StyledStack size={size}>
-            <StyledImage
-              src={url}
-              alt={altText}
-              onLoad={loadImage}
-              isLoaded={imageLoaded}
-              objectFit={objectFit}
-              loading="lazy"
-            />
-          </StyledStack>
-        )}
-      </StyledContainer>
+        <SystemIcon icon={userIcon} data-slot="avatar-icon" />
+        {url && <img data-slot="avatar-image" src={url} alt={altText} onLoad={loadImage} />}
+      </Element>
     );
-  }
-) as any; // AvatarProps and forwardRef signatures are incompatible, so we must force cast
-
-Avatar.Variant = AvatarVariant;
-Avatar.Size = SystemIconCircleSize;
+  },
+});
diff --git a/modules/react/avatar/spec/Avatar.spec.tsx b/modules/react/avatar/spec/Avatar.spec.tsx
index 41772d6ceb..4195453d5b 100644
--- a/modules/react/avatar/spec/Avatar.spec.tsx
+++ b/modules/react/avatar/spec/Avatar.spec.tsx
@@ -1,29 +1,28 @@
 import * as React from 'react';
-import {Avatar} from '../lib/Avatar';
 import {render, fireEvent} from '@testing-library/react';
+import {Avatar} from '../lib/Avatar';
+import {createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+import {systemIconStencil} from '../../icon';
 
 describe('Avatar', () => {
   it('should render a button element', () => {
     const screen = render(<Avatar data-testid="test" />);
-
     expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
   it('should forward extra attributes to the container', () => {
-    const screen = render(<Avatar id="myAvatar" />);
-
-    expect(screen.getByRole('button')).toHaveAttribute('id', 'myAvatar');
+    const {getByRole} = render(<Avatar id="myAvatar" />);
+    expect(getByRole('button')).toHaveAttribute('id', 'myAvatar');
   });
 
   it('should set the aria-label of the button with the altText prop', () => {
     const screen = render(<Avatar altText="My alt text" />);
-
     expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'My alt text');
   });
 
   it('should set the url of the image when passed the url prop', () => {
     const screen = render(<Avatar url="https://example.com/image.png" altText="My alt text" />);
-
     expect(screen.getByRole('img')).toHaveAttribute('src', 'https://example.com/image.png');
     expect(screen.getByRole('img')).toHaveAttribute('alt', 'My alt text');
   });
@@ -31,21 +30,60 @@ describe('Avatar', () => {
   it('should forward ref to the button element', () => {
     const ref = React.createRef<HTMLButtonElement>();
     const screen = render(<Avatar ref={ref} />);
-
     expect(ref.current).toEqual(screen.getByRole('button'));
   });
 
   it('should call onClick callback when clicked', () => {
     const fn = jest.fn();
     const screen = render(<Avatar onClick={fn} />);
-
     fireEvent.click(screen.getByRole('button'));
     expect(fn).toBeCalled();
   });
 
   it('should render a div when as prop is specified', () => {
     const screen = render(<Avatar as="div" data-testid="test" />);
-
     expect(screen.getByTestId('test').tagName.toLowerCase()).toEqual('div');
   });
+
+  it('should apply the variant class when variant prop is specified', () => {
+    const {container} = render(<Avatar variant="dark" />);
+    expect(container.firstChild).toHaveStyle(`backgroundColor: system.color.bg.primary.default}`);
+  });
+
+  it('should apply the size class when size prop is specified', () => {
+    const {container} = render(<Avatar size="40px" />);
+    expect(container.firstChild).toHaveStyle(
+      `width: calc.multiply(40px, 0.625); height: calc.multiply(40px, 0.625)}`
+    );
+  });
+
+  it('should set the background color when background prop is specified', () => {
+    const customGreenAvatarStencil = createStencil({
+      base: {
+        backgroundColor: base.watermelon400,
+        ['[data-slot="avatar-icon"]']: {
+          [systemIconStencil.vars.color]: base.watermelon100,
+        },
+      },
+    });
+
+    const {container} = render(<Avatar {...customGreenAvatarStencil()} />);
+    expect(container.firstChild).toHaveStyle(`background: ${cssVar(base.watermelon400)}`);
+  });
+
+  it('should set the object fit of the image when objectFit prop is specified', () => {
+    const {container} = render(<Avatar url="https://example.com/image.png" objectFit="cover" />);
+    expect(container.querySelector('[data-slot="avatar-image"]')).toHaveStyle('object-fit: cover');
+  });
+
+  it('should hide the icon when the image is loaded', () => {
+    const screen = render(<Avatar url="https://example.com/image.png" />);
+    fireEvent.load(screen.getByRole('img'));
+    expect(screen.queryByRole('img')).toHaveStyle('opacity: 1');
+  });
+
+  it('should show the icon when the image is not loaded', () => {
+    const {container} = render(<Avatar url="https://example.com/image.png" />);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
 });
diff --git a/modules/react/avatar/stories/avatar/Avatar.stories.mdx b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
new file mode 100644
index 0000000000..9fe4a0d514
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
@@ -0,0 +1,94 @@
+import {Specifications, SymbolDoc, SymbolDescription} from '@workday/canvas-kit-docs';
+
+import {Basic} from '../avatar/examples/Basic';
+import {Button} from '../avatar/examples/Button';
+import {Image} from '../avatar/examples/Image';
+import {LazyLoad} from '../avatar/examples/LazyLoad';
+import {ObjectFit} from '../avatar/examples/ObjectFit';
+import {Size} from '../avatar/examples/Size';
+import {Variant} from '../avatar/examples/Variant';
+import {CustomStyles} from '../avatar/examples/CustomStyles';
+
+<Meta title="Components/Indicators/Avatar" />
+
+# Canvas Kit Avatar
+
+Represents a person's profile.
+
+[> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/avatar)
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+<SymbolDescription name="Avatar" fileName="/react/" />
+
+The example below shows multiple instances of a `Avatar` with various configurations.
+
+### Basic
+
+By default, the Avatar renders a `button` element. If yo'd like to change the default element, use
+the `as` prop.
+
+<ExampleCodeBlock code={Basic} />
+
+### Button
+
+Like many of our components, Avatar accepts an `as` prop, which lets you change the underlying
+semantic element to a `div`. This should be done with caution to ensure the best accessibility.
+Generally, `<button>` elements should be used for actions.
+
+<ExampleCodeBlock code={Button} />
+
+### Variant
+
+Avatar defaults to using a `"light"` `variant` property. You can change the `variant` prop to "dark"
+by including `variant="dark"`.
+
+<ExampleCodeBlock code={Variant} />
+
+### Size
+
+Avatar defaults to using a `"medium"` `size` property. You can change the `size` prop to various
+sizing options. See Component API for more details.
+
+Additionally, you can explicitly specify the size you want for the Avatar in pixels or rems.
+
+<ExampleCodeBlock code={Size} />
+
+### Image
+
+Avatar renders an image when the `url` prop is defined.
+
+<ExampleCodeBlock code={Image} />
+
+### Object Fit
+
+Avatar defaults to using `contain` for object-fit. You can change this property to any other
+acceptable `object-fit` properties. For best fit, try to use square images.
+
+<ExampleCodeBlock code={ObjectFit} />
+
+### Lazy Load
+
+Example of implementing lazy load behavior with Avatar.
+
+<ExampleCodeBlock code={LazyLoad} />
+
+### Custom Styling
+
+To change the background color of the Avatar, you can use our `createStencil` functionality.
+
+<ExampleCodeBlock code={CustomStyles} />
+
+## Component API
+
+<SymbolDoc name="Avatar" fileName="/react/" />
+
+## Specifications
+
+<Specifications file="Avatar.spec.ts" name="Avatar" />
diff --git a/modules/react/avatar/stories/avatar/examples/Basic.tsx b/modules/react/avatar/stories/avatar/examples/Basic.tsx
new file mode 100644
index 0000000000..2069694ed9
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/Basic.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export const Basic = () => (
+  <div className={containerStyles}>
+    <Avatar onClick={handleAvatarButtonClick} />
+    <Avatar as="div" />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/Button.tsx b/modules/react/avatar/stories/avatar/examples/Button.tsx
new file mode 100644
index 0000000000..9a555a5bb0
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/Button.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../test-avatar.png';
+
+const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export const Button = () => (
+  <div className={containerStyles}>
+    <Avatar variant="dark" onClick={handleAvatarButtonClick} />
+    <Avatar onClick={handleAvatarButtonClick} />
+    <Avatar url={testAvatar} onClick={handleAvatarButtonClick} />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/CustomStyles.tsx b/modules/react/avatar/stories/avatar/examples/CustomStyles.tsx
new file mode 100644
index 0000000000..59c72837dd
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/CustomStyles.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {createStencil, createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+import {systemIconStencil} from '../../../../icon';
+
+const customBlueAvatarStencil = createStencil({
+  base: {
+    backgroundColor: base.berrySmoothie400,
+    ['[data-slot="avatar-icon"]']: {
+      [systemIconStencil.vars.color]: base.berrySmoothie100,
+    },
+  },
+});
+
+const customGreenAvatarStencil = createStencil({
+  base: {
+    backgroundColor: base.watermelon400,
+    ['[data-slot="avatar-icon"]']: {
+      [systemIconStencil.vars.color]: base.watermelon100,
+    },
+  },
+});
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export const CustomStyles = () => (
+  <div className={containerStyles}>
+    <Avatar as="div" {...customBlueAvatarStencil()} />
+    <Avatar as="div" {...customGreenAvatarStencil()} />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/Image.tsx b/modules/react/avatar/stories/avatar/examples/Image.tsx
new file mode 100644
index 0000000000..2bfc51d6ee
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/Image.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../test-avatar.png';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.space.x2,
+});
+
+export const Image = () => (
+  <div className={containerStyles}>
+    <h3>Working Images</h3>
+    <Avatar size="extraExtraLarge" as="div" url={testAvatar} />
+    <Avatar size="extraLarge" as="div" url={testAvatar} />
+    <Avatar size="large" as="div" url={testAvatar} />
+    <Avatar size="medium" as="div" url={testAvatar} />
+    <Avatar size="small" as="div" url={testAvatar} />
+    <Avatar size="extraSmall" as="div" url={testAvatar} />
+    <h3>Broken Image</h3>
+    <Avatar url="/fake/path/to/image.png" as="div" />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/LazyLoad.tsx b/modules/react/avatar/stories/avatar/examples/LazyLoad.tsx
new file mode 100644
index 0000000000..a80e46a07c
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/LazyLoad.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../test-avatar.png';
+
+export const LazyLoad = () => (
+  <div className="story">
+    {Array.from({length: 5}, (v, index) => (
+      <>
+        <Avatar key={index} as="div" size="medium" url={testAvatar + '?v=' + index} />
+        <br />
+      </>
+    ))}
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx b/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx
new file mode 100644
index 0000000000..0b6f504782
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {px2rem} from '@workday/canvas-kit-styling';
+
+export const ObjectFit = () => (
+  <div className="story">
+    <h3>Original Rectangle Image</h3>
+    <img alt="" src="https://picsum.photos/id/237/300/200" />
+    <h3>Object fit on a Rectangle Image</h3>
+    <Avatar as="div" url="https://picsum.photos/id/237/300/200" />
+    <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
+    <Avatar
+      as="div"
+      size={px2rem(200)}
+      url="https://picsum.photos/id/237/300/200"
+      objectFit="contain"
+    />
+    <h3>Original Square Image</h3>
+    <img alt="" src="https://picsum.photos/id/237/300/300" />
+    <h3>Object fit on a Square Image</h3>
+    <Avatar as="div" url="https://picsum.photos/id/237/300/300" />
+    <h3>Object fit on a Square Image using Dynamic Size</h3>
+    <Avatar as="div" size={px2rem(200)} url="https://picsum.photos/id/237/300/300" />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/Size.tsx b/modules/react/avatar/stories/avatar/examples/Size.tsx
new file mode 100644
index 0000000000..1aaaa7989f
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/Size.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {px2rem} from '@workday/canvas-kit-styling';
+
+export const Size = () => (
+  <div className="story">
+    <h3>Extra-Extra Large</h3>
+    <Avatar as="div" size="extraExtraLarge" />
+    <h3>Extra Large</h3>
+    <Avatar as="div" size="extraLarge" />
+    <h3>Large</h3>
+    <Avatar as="div" size="large" />
+    <h3>Medium</h3>
+    <Avatar as="div" size="medium" />
+    <h3>Small</h3>
+    <Avatar as="div" size="small" />
+    <h3>Extra Small</h3>
+    <Avatar as="div" size="extraSmall" />
+    <h3>30px</h3>
+    <Avatar as="div" size={px2rem(30)} />
+    <h3>40px</h3>
+    <Avatar as="div" size={px2rem(40)} />
+    <h3>3rem</h3>
+    <Avatar as="div" size="3rem" />
+    <h3>4rem</h3>
+    <Avatar as="div" size="4rem" />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/Variant.tsx b/modules/react/avatar/stories/avatar/examples/Variant.tsx
new file mode 100644
index 0000000000..6804fb6ad2
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/Variant.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+export const Variant = () => (
+  <div className="story">
+    <h3>Light</h3>
+    <Avatar as="div" size="medium" />
+    <h3>Dark</h3>
+    <Avatar as="div" size="medium" variant="dark" />
+  </div>
+);
diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
deleted file mode 100644
index 9e3045a480..0000000000
--- a/modules/react/avatar/stories/stories.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import * as React from 'react';
-import {storiesOf} from '@storybook/react';
-
-import {Avatar} from '../index';
-// @ts-ignore: Cannot find module error
-import testAvatar from './test-avatar.png';
-
-const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
-
-storiesOf('Components/Indicators/Avatar', module)
-  .addParameters({ReadmePath: 'react/avatar'})
-  .addParameters({component: Avatar})
-  .add('Light', () => (
-    <div className="story">
-      <h3>Extra-Extra Large</h3>
-      <Avatar as="div" size={Avatar.Size.xxl} />
-      <h3>Extra Large</h3>
-      <Avatar as="div" size={Avatar.Size.xl} />
-      <h3>Large</h3>
-      <Avatar as="div" size={Avatar.Size.l} />
-      <h3>Medium</h3>
-      <Avatar as="div" size={Avatar.Size.m} />
-      <h3>Small</h3>
-      <Avatar as="div" size={Avatar.Size.s} />
-      <h3>Extra Small</h3>
-      <Avatar as="div" size={Avatar.Size.xs} />
-    </div>
-  ))
-  .add('Dark', () => (
-    <div className="story">
-      <h3>Extra-Extra Large</h3>
-      <Avatar as="div" size={Avatar.Size.xxl} variant={Avatar.Variant.Dark} />
-      <h3>Extra Large</h3>
-      <Avatar as="div" size={Avatar.Size.xl} variant={Avatar.Variant.Dark} />
-      <h3>Large</h3>
-      <Avatar as="div" size={Avatar.Size.l} variant={Avatar.Variant.Dark} />
-      <h3>Medium</h3>
-      <Avatar as="div" size={Avatar.Size.m} variant={Avatar.Variant.Dark} />
-      <h3>Small</h3>
-      <Avatar as="div" size={Avatar.Size.s} variant={Avatar.Variant.Dark} />
-      <h3>Extra Small</h3>
-      <Avatar as="div" size={Avatar.Size.xs} variant={Avatar.Variant.Dark} />
-    </div>
-  ))
-  .add('Image', () => (
-    <div className="story">
-      <h3>Extra-Extra Large</h3>
-      <Avatar as="div" size={Avatar.Size.xxl} url={testAvatar} />
-      <h3>Extra Large</h3>
-      <Avatar as="div" size={Avatar.Size.xl} url={testAvatar} />
-      <h3>Large</h3>
-      <Avatar as="div" size={Avatar.Size.l} url={testAvatar} />
-      <h3>Medium</h3>
-      <Avatar as="div" size={Avatar.Size.m} url={testAvatar} />
-      <h3>Small</h3>
-      <Avatar as="div" size={Avatar.Size.s} url={testAvatar} />
-      <h3>Extra Small</h3>
-      <Avatar as="div" size={Avatar.Size.xs} url={testAvatar} />
-    </div>
-  ))
-  .add('Non-Square Image', () => (
-    <div className="story">
-      <h3>Original Rectangle Image</h3>
-      <img alt="" src="https://placekitten.com/g/450/200" />
-      <h3>Using Object Fit on a Rectangle Image</h3>
-      <Avatar as="div" size={200} url="https://placekitten.com/g/450/200" objectFit="contain" />
-      <h3>Original Square Image</h3>
-      <img alt="" src="https://placekitten.com/g/450/450" />
-      <h3>Using a Square Image</h3>
-      <Avatar as="div" size={200} url="https://placekitten.com/g/450/450" />
-    </div>
-  ))
-  .add('Lazy Loading', () => (
-    <div className="story">
-      {Array.from({length: 100}, (v, index) => (
-        <>
-          <Avatar as="div" size={Avatar.Size.xs} url={testAvatar + '?v=' + index} />
-          <br />
-        </>
-      ))}
-    </div>
-  ));
-
-storiesOf('Components/Indicators/Avatar/Avatar Button', module)
-  .addParameters({ReadmePath: 'react/avatar'})
-  .addParameters({component: Avatar})
-  .add('Light', () => (
-    <div className="story">
-      <h3>Extra-Extra Large</h3>
-      <Avatar size={Avatar.Size.xxl} onClick={handleAvatarButtonClick} />
-      <h3>Extra Large</h3>
-      <Avatar size={Avatar.Size.xl} onClick={handleAvatarButtonClick} />
-      <h3>Large</h3>
-      <Avatar size={Avatar.Size.l} onClick={handleAvatarButtonClick} />
-      <h3>Medium</h3>
-      <Avatar size={Avatar.Size.m} onClick={handleAvatarButtonClick} />
-      <h3>Small</h3>
-      <Avatar size={Avatar.Size.s} onClick={handleAvatarButtonClick} />
-      <h3>Extra Small</h3>
-      <Avatar size={Avatar.Size.xs} onClick={handleAvatarButtonClick} />
-    </div>
-  ))
-  .add('Dark', () => (
-    <div className="story">
-      <h3>Extra-Extra Large</h3>
-      <Avatar
-        size={Avatar.Size.xxl}
-        variant={Avatar.Variant.Dark}
-        onClick={handleAvatarButtonClick}
-      />
-      <h3>Extra Large</h3>
-      <Avatar
-        size={Avatar.Size.xl}
-        variant={Avatar.Variant.Dark}
-        onClick={handleAvatarButtonClick}
-      />
-      <h3>Large</h3>
-      <Avatar
-        size={Avatar.Size.l}
-        variant={Avatar.Variant.Dark}
-        onClick={handleAvatarButtonClick}
-      />
-      <h3>Medium</h3>
-      <Avatar
-        size={Avatar.Size.m}
-        variant={Avatar.Variant.Dark}
-        onClick={handleAvatarButtonClick}
-      />
-      <h3>Small</h3>
-      <Avatar
-        size={Avatar.Size.s}
-        variant={Avatar.Variant.Dark}
-        onClick={handleAvatarButtonClick}
-      />
-      <h3>Extra Small</h3>
-      <Avatar
-        size={Avatar.Size.xs}
-        variant={Avatar.Variant.Dark}
-        onClick={handleAvatarButtonClick}
-      />
-    </div>
-  ))
-  .add('Image', () => (
-    <div className="story">
-      <h3>Extra-Extra Large</h3>
-      <Avatar size={Avatar.Size.xxl} url={testAvatar} onClick={handleAvatarButtonClick} />
-      <h3>Extra Large</h3>
-      <Avatar size={Avatar.Size.xl} url={testAvatar} onClick={handleAvatarButtonClick} />
-      <h3>Large</h3>
-      <Avatar size={Avatar.Size.l} url={testAvatar} onClick={handleAvatarButtonClick} />
-      <h3>Medium</h3>
-      <Avatar size={Avatar.Size.m} url={testAvatar} onClick={handleAvatarButtonClick} />
-      <h3>Small</h3>
-      <Avatar size={Avatar.Size.s} url={testAvatar} onClick={handleAvatarButtonClick} />
-      <h3>Extra Small</h3>
-      <Avatar size={Avatar.Size.xs} url={testAvatar} onClick={handleAvatarButtonClick} />
-      <h3>Broken Link</h3>
-      <Avatar url="/fake/path/to/image.png" onClick={handleAvatarButtonClick} />
-    </div>
-  ));
diff --git a/modules/react/avatar/stories/stories_visualTesting.tsx b/modules/react/avatar/stories/visual-testing/stories_visualTesting.tsx
similarity index 69%
rename from modules/react/avatar/stories/stories_visualTesting.tsx
rename to modules/react/avatar/stories/visual-testing/stories_visualTesting.tsx
index 9ca068d51d..6ddb4eca81 100644
--- a/modules/react/avatar/stories/stories_visualTesting.tsx
+++ b/modules/react/avatar/stories/visual-testing/stories_visualTesting.tsx
@@ -5,11 +5,12 @@ import {
   permutateProps,
   StaticStates,
 } from '@workday/canvas-kit-react/testing';
-import {withSnapshotsEnabled} from '../../../../utils/storybook';
-import {Avatar} from '../index';
+import {withSnapshotsEnabled} from '../../../../../utils/storybook';
+import {Avatar} from '../../index';
 
 // @ts-ignore: Cannot find module error
-import testAvatar from './test-avatar.png';
+import testAvatar from '../test-avatar.png';
+
 // eslint-disable-next-line no-empty-function
 const noop = () => {};
 
@@ -39,16 +40,16 @@ export const AvatarStates = () => (
       })}
       rowProps={permutateProps({
         variant: [
-          {value: Avatar.Variant.Light, label: 'Light'},
-          {value: Avatar.Variant.Dark, label: 'Dark'},
+          {label: 'Light', value: 'light'},
+          {label: 'Dark', value: 'dark'},
         ],
         size: [
-          {label: 'XS', value: Avatar.Size.xs},
-          {label: 'S', value: Avatar.Size.s},
-          {label: 'M', value: Avatar.Size.m},
-          {label: 'L', value: Avatar.Size.l},
-          {label: 'XL', value: Avatar.Size.xl},
-          {label: 'XXL', value: Avatar.Size.xxl},
+          {label: 'XS', value: 'extraSmall'},
+          {label: 'S', value: 'small'},
+          {label: 'M', value: 'medium'},
+          {label: 'L', value: 'large'},
+          {label: 'XL', value: 'extraLarge'},
+          {label: 'XXL', value: 'extraExtraLarge'},
         ],
         url: [
           {value: undefined, label: 'Placeholder'},
@@ -76,16 +77,16 @@ export const AvatarButtonStates = () => (
       })}
       rowProps={permutateProps({
         variant: [
-          {value: Avatar.Variant.Light, label: 'Light'},
-          {value: Avatar.Variant.Dark, label: 'Dark'},
+          {label: 'Light', value: 'light'},
+          {label: 'Dark', value: 'dark'},
         ],
         size: [
-          {label: 'XS', value: Avatar.Size.xs},
-          {label: 'S', value: Avatar.Size.s},
-          {label: 'M', value: Avatar.Size.m},
-          {label: 'L', value: Avatar.Size.l},
-          {label: 'XL', value: Avatar.Size.xl},
-          {label: 'XXL', value: Avatar.Size.xxl},
+          {label: 'XS', value: 'extraSmall'},
+          {label: 'S', value: 'small'},
+          {label: 'M', value: 'medium'},
+          {label: 'L', value: 'large'},
+          {label: 'XL', value: 'extraLarge'},
+          {label: 'XXL', value: 'extraExtraLarge'},
         ],
         url: [
           {value: undefined, label: 'Placeholder'},
diff --git a/modules/react/common/lib/utils/getTranslateFromOrigin.ts b/modules/react/common/lib/utils/getTranslateFromOrigin.ts
index c686cb9855..583639a5fd 100644
--- a/modules/react/common/lib/utils/getTranslateFromOrigin.ts
+++ b/modules/react/common/lib/utils/getTranslateFromOrigin.ts
@@ -1,5 +1,6 @@
 import {CanvasSpaceValues} from '@workday/canvas-kit-react/tokens';
 import {TransformOrigin} from '../types';
+import {calc} from '@workday/canvas-kit-styling';
 
 type translateMapType = {
   x: {[key in TransformOrigin['horizontal']]: number};
@@ -24,13 +25,32 @@ const translateMap: translateMapType = {
  * @param {Object} transformOrigin The origin of the transform (i.e. top left)
  * @param {string} distance The distance to translate (as a canvas spacing value).
  * @returns {Object} An object with the x and y distance values needed to translate.
+ * @deprecated
  */
+
 export const getTranslateFromOrigin = (
   transformOrigin: TransformOrigin,
   distance: CanvasSpaceValues
+) => {
+  const calculatedDistance = parseFloat(distance) * 16;
+  return {
+    x: translateMap.x[transformOrigin.horizontal] * calculatedDistance,
+    y: translateMap.y[transformOrigin.vertical] * calculatedDistance,
+  };
+};
+
+/**
+ * Gets the x and y distance values needed to translate from a given transform origin to 0,0
+ * @param {Object} transformOrigin The origin of the transform (i.e. top left)
+ * @param {string} distance The distance to translate (as a canvas spacing value).
+ * @returns {Object} An object with the x and y distance string values needed to translate.
+ */
+export const getTransformOrigin = (
+  transformOrigin: TransformOrigin,
+  distance: CanvasSpaceValues | (string & {})
 ) => {
   return {
-    x: translateMap.x[transformOrigin.horizontal] * parseInt(distance, 10),
-    y: translateMap.y[transformOrigin.vertical] * parseInt(distance, 10),
+    x: calc.multiply(distance, translateMap.x[transformOrigin.horizontal]),
+    y: calc.multiply(distance, translateMap.y[transformOrigin.vertical]),
   };
 };
diff --git a/modules/react/icon/lib/SystemIcon.tsx b/modules/react/icon/lib/SystemIcon.tsx
index f722fba6b3..8d7f879d0b 100644
--- a/modules/react/icon/lib/SystemIcon.tsx
+++ b/modules/react/icon/lib/SystemIcon.tsx
@@ -49,7 +49,8 @@ export interface SystemIconStyles {
   /**
    * 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:
+   * @deprecated `colorHover` is deprecated and will be removed in a future version. We have removed the default hover styles on SystemIcon. Please
+   * use the following instead in your style overrides:
    * ```tsx
    * '&:hover': {
    *   [systemIconStencil.vars.color]: desiredColorHoverColor
diff --git a/modules/react/modal/lib/ModalBody.tsx b/modules/react/modal/lib/ModalBody.tsx
index c59f84db99..28491793a7 100644
--- a/modules/react/modal/lib/ModalBody.tsx
+++ b/modules/react/modal/lib/ModalBody.tsx
@@ -1,32 +1,27 @@
 import * as React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  getTheme,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {space} from '@workday/canvas-kit-react/tokens';
 
 import {useModalModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ModalBodyProps extends ExtractProps<typeof Popup.Body, never> {}
 
-const ResponsiveModalBody = styled(Popup.Body)<ModalBodyProps & StyledType>(({theme}) => {
-  const {canvas: canvasTheme} = getTheme(theme);
-  return {
-    [canvasTheme.breakpoints.down('s')]: {
-      marginBottom: space.zero,
-      padding: `${space.xxxs} ${space.xxs} ${space.xxs} ${space.xxs}`,
+export const modalBodyStencil = createStencil({
+  base: {
+    '@media screen and (max-width: 768px)': {
+      marginBlockEnd: system.space.zero,
+      padding: `${system.space.x1} ${system.space.x2} ${system.space.x2}`,
     },
-  };
+  },
 });
 
 export const ModalBody = createSubcomponent('div')({
   displayName: 'Modal.Body',
   modelHook: useModalModel,
 })<ModalBodyProps>((elemProps, Element) => {
-  return <ResponsiveModalBody as={Element} {...elemProps} />;
+  return <Popup.Body as={Element} {...mergeStyles(elemProps, modalBodyStencil())} />;
 });
diff --git a/modules/react/modal/lib/ModalCard.tsx b/modules/react/modal/lib/ModalCard.tsx
index 6d3da34097..b22f815917 100644
--- a/modules/react/modal/lib/ModalCard.tsx
+++ b/modules/react/modal/lib/ModalCard.tsx
@@ -1,29 +1,27 @@
 import * as React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  StyledType,
-  styled,
-  getTheme,
-} from '@workday/canvas-kit-react/common';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
 
 import {useModalCard, useModalModel} from './hooks';
+import {calc, createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
-const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => {
-  const {canvas: canvasTheme} = getTheme(theme);
-  return {
-    margin: space.xl,
-    [canvasTheme.breakpoints.down('s')]: {
-      margin: space.s, // 16px all around margin on smaller screen sizes
-      padding: space.s, // brings total padding between edge and content to 24px
-      borderRadius: space.m, // 24px border radius on smaller devices.
+export const modalCardStencil = createStencil({
+  base: {
+    margin: system.space.x10,
+    width: calc.add(calc.multiply(system.space.x20, 5), system.space.x10),
+    borderWidth: system.space.zero,
+    boxShadow: system.depth[6],
+    '@media screen and (max-width: 768px)': {
+      margin: system.space.x4, // 16px all around margin on smaller screen sizes
+      padding: system.space.x4, // brings total padding between edge and content to 24px
+      borderRadius: system.space.x6, // 24px border radius on smaller devices.
     },
-  };
+  },
 });
 
 export const ModalCard = createSubcomponent('div')({
@@ -31,5 +29,5 @@ export const ModalCard = createSubcomponent('div')({
   modelHook: useModalModel,
   elemPropsHook: useModalCard,
 })<ModalCardProps>((elemProps, Element) => {
-  return <ResponsiveModalCard as={Element} width={440} borderWidth={0} depth={6} {...elemProps} />;
+  return <Popup.Card as={Element} {...mergeStyles(elemProps, modalCardStencil())} />;
 });
diff --git a/modules/react/modal/lib/ModalHeading.tsx b/modules/react/modal/lib/ModalHeading.tsx
index 8db683128e..bc500b4d88 100644
--- a/modules/react/modal/lib/ModalHeading.tsx
+++ b/modules/react/modal/lib/ModalHeading.tsx
@@ -1,27 +1,22 @@
 import * as React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  getTheme,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {space} from '@workday/canvas-kit-react/tokens';
 
 import {useModalHeading, useModalModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
-const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => {
-  const {canvas: canvasTheme} = getTheme(theme);
-  return {
-    [canvasTheme.breakpoints.down('s')]: {
-      marginBottom: space.zero,
-      padding: `${space.xxs} ${space.xxs} ${space.xxxs} ${space.xxs}`,
+export const modalHeadingStencil = createStencil({
+  base: {
+    '@media screen and (max-width: 768px)': {
+      marginBlockEnd: system.space.zero,
+      padding: `${system.space.x2} ${system.space.x2} ${system.space.x1}`,
     },
-  };
+  },
 });
 
 export const ModalHeading = createSubcomponent('h2')({
@@ -29,5 +24,5 @@ export const ModalHeading = createSubcomponent('h2')({
   modelHook: useModalModel,
   elemPropsHook: useModalHeading,
 })<ModalHeadingProps>((elemProps, Element) => {
-  return <ResponsiveModalHeading as={Element} {...elemProps} />;
+  return <Popup.Heading as={Element} {...mergeStyles(elemProps, modalHeadingStencil())} />;
 });
diff --git a/modules/react/modal/lib/ModalOverflowOverlay.tsx b/modules/react/modal/lib/ModalOverflowOverlay.tsx
index 0606bf4dde..1a8034ede5 100644
--- a/modules/react/modal/lib/ModalOverflowOverlay.tsx
+++ b/modules/react/modal/lib/ModalOverflowOverlay.tsx
@@ -1,18 +1,22 @@
 import * as React from 'react';
 
-import {createSubcomponent, ExtractProps, StyledType} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 
 import {ModalOverlay} from './ModalOverlay';
-import styled from '@emotion/styled';
 import {useModalModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
-const StyledOverlay = styled(ModalOverlay)<StyledType>({
-  '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div
+export const modalOverflowOverlayStencil = createStencil({
+  base: {
+    '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div
+    overflow: 'hidden auto',
+  },
 });
 
 export const ModalOverflowOverlay = createSubcomponent('div')({
   displayName: 'Modal.OverflowOverlay',
   modelHook: useModalModel,
 })<ExtractProps<typeof ModalOverlay, never>>((elemProps, Element) => {
-  return <StyledOverlay as={Element} overflowX="hidden" overflowY="auto" {...elemProps} />;
+  return <ModalOverlay as={Element} {...mergeStyles(elemProps, modalOverflowOverlayStencil())} />;
 });
diff --git a/modules/react/modal/lib/ModalOverlay.tsx b/modules/react/modal/lib/ModalOverlay.tsx
index f7be932997..dbca705a5e 100644
--- a/modules/react/modal/lib/ModalOverlay.tsx
+++ b/modules/react/modal/lib/ModalOverlay.tsx
@@ -4,81 +4,62 @@ import ReactDOM from 'react-dom';
 import {
   createSubcomponent,
   createElemPropsHook,
-  StyledType,
   useWindowSize,
   useForkRef,
-  getTheme,
 } from '@workday/canvas-kit-react/common';
 import {usePopupModel, usePopupStack} from '@workday/canvas-kit-react/popup';
-import {keyframes} from '@emotion/react';
-import styled from '@emotion/styled';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {Box, BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {useModalModel} from './hooks';
+import {createStencil, cssVar, keyframes} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ModalOverlayProps extends BoxProps {}
 
-const fadeIn = keyframes`
-  from {
-    background: none;
-  }
-  to {
-    background: rgba(0,0,0,0.65);
-  }
-`;
+const fadeIn = keyframes({
+  '0%': {
+    background: 'none',
+  },
+  '100%': {
+    background: cssVar(system.color.bg.overlay),
+  },
+});
 
-const Container = styled(Box)<StyledType>(
-  {
+export const modalOverlayContainerStencil = createStencil({
+  vars: {
+    containerCenter: '',
+  },
+  base: ({containerCenter}) => ({
     position: 'fixed',
-    top: 0,
-    left: 0,
+    top: system.space.zero,
+    left: system.space.zero,
     width: '100vw',
     height: '100vh',
-    background: 'rgba(0,0,0,0.65)',
-    animationName: `${fadeIn}`,
+    background: system.color.bg.overlay,
     animationDuration: '0.3s',
+    animationName: fadeIn,
     // Allow overriding of animation in special cases
     '.wd-no-animation &': {
       animation: 'none',
     },
-  },
-  ({theme}) => {
-    const {canvas: canvasTheme} = getTheme(theme);
-    return {
-      [canvasTheme.breakpoints.down('s')]: {
-        height: '100%',
+    // Responsive Container
+    '& > div': {
+      maxHeight: '100%',
+      display: 'flex',
+      position: 'absolute',
+      left: system.space.zero,
+      top: system.space.zero,
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      width: containerCenter,
+    },
+    '@media screen and (max-width: 768px)': {
+      height: '100%',
+      '& > div': {
+        alignItems: 'end',
       },
-    };
-  }
-);
-
-// This centering container helps fix an issue with Chrome. Chrome doesn't normally do subpixel
-// positioning, but seems to when using flexbox centering. This messes up Popper calculations inside
-// the Modal. The centering container forces a "center" pixel calculation by making sure the width
-// is always an even number
-const ResponsiveContainer = styled('div')(({theme}) => {
-  const {canvas: canvasTheme} = getTheme(theme);
-  return {
-    maxHeight: '100%',
-    display: 'flex',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100%',
-    [canvasTheme.breakpoints.down('s')]: {
-      alignItems: 'end',
     },
-  };
-});
-
-export const ModalOverlay = createSubcomponent('div')({
-  displayName: 'Modal.Overlay',
-  modelHook: useModalModel,
-})<ModalOverlayProps>((elemProps, Element, model) => {
-  return model.state.visibility !== 'hidden' ? (
-    <OpenModalOverlay as={Element} model={model} {...elemProps} />
-  ) : null;
+  }),
 });
 
 export const useModalOverlay = createElemPropsHook(usePopupModel)(({state}, ref) => {
@@ -97,18 +78,20 @@ const OpenModalOverlay = createSubcomponent('div')({
   elemPropsHook: useModalOverlay,
 })<ModalOverlayProps>((elemProps, Element, model) => {
   const windowSize = useWindowSize();
+  const containerCenter = windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw';
   const content = (
-    <Container as={Element} {...elemProps}>
-      <ResponsiveContainer
-        // make sure the centering container is an even number of pixels to avoid sub-pixel
-        // inaccuracies due to centering
-        style={{
-          width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw',
-        }}
+    <Box {...mergeStyles(elemProps, modalOverlayContainerStencil({containerCenter}))}>
+      {/* This centering container helps fix an issue with Chrome. Chrome doesn't normally do
+      subpixel positioning, but seems to when using flexbox centering. This messes up Popper
+      calculations inside the Modal. The centering container forces a "center" pixel calculation
+      by making sure the width is always an even number */}
+      <Box
+      // make sure the centering container is an even number of pixels to avoid sub-pixel
+      // inaccuracies due to centering
       >
         {elemProps.children}
-      </ResponsiveContainer>
-    </Container>
+      </Box>
+    </Box>
   );
 
   // only render something on the client
@@ -118,3 +101,12 @@ const OpenModalOverlay = createSubcomponent('div')({
     return null;
   }
 });
+
+export const ModalOverlay = createSubcomponent('div')({
+  displayName: 'Modal.Overlay',
+  modelHook: useModalModel,
+})<ModalOverlayProps>((elemProps, Element, model) => {
+  return model.state.visibility !== 'hidden' ? (
+    <OpenModalOverlay as={Element} model={model} {...elemProps} />
+  ) : null;
+});
diff --git a/modules/react/modal/stories/examples/ReturnFocus.tsx b/modules/react/modal/stories/examples/ReturnFocus.tsx
index 8989d0cc87..326169cad0 100644
--- a/modules/react/modal/stories/examples/ReturnFocus.tsx
+++ b/modules/react/modal/stories/examples/ReturnFocus.tsx
@@ -3,10 +3,10 @@ import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 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';
+import {Select} from '@workday/canvas-kit-react/select';
 
 export const ReturnFocus = () => {
-  const ref = React.useRef<HTMLInputElement>(null);
+  const ref = React.useRef(null);
   const [value, setValue] = React.useState('');
   const model = useModalModel({
     returnFocusRef: ref,
@@ -18,24 +18,29 @@ export const ReturnFocus = () => {
 
   return (
     <Modal model={model}>
-      <FormField>
-        <FormField.Label>Choose an option</FormField.Label>
-        <FormField.Input
-          as={Select}
-          ref={ref}
-          options={['', 'Delete', 'Two']}
-          value={value}
-          onChange={e => {
-            const option = e.currentTarget.value;
-            if (option === 'Delete') {
-              model.events.show();
-              setValue('');
-            } else {
-              setValue(e.currentTarget.value);
-            }
-          }}
-        />
-      </FormField>
+      <Select items={['', 'Delete', 'Two']}>
+        <FormField>
+          <FormField.Label>Choose an option</FormField.Label>
+          <FormField.Input
+            as={Select.Input}
+            ref={ref}
+            onChange={e => {
+              const option = e.currentTarget.value;
+              if (option === 'Delete') {
+                model.events.show();
+                setValue('');
+              } else {
+                setValue(e.currentTarget.value);
+              }
+            }}
+          />
+          <Select.Popper>
+            <Select.Card>
+              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+            </Select.Card>
+          </Select.Popper>
+        </FormField>
+      </Select>
       <Modal.Overlay>
         <Modal.Card>
           <Modal.CloseIcon aria-label="Close" />
diff --git a/modules/react/popup/lib/Popper.tsx b/modules/react/popup/lib/Popper.tsx
index 6d2df121d3..38c25723db 100644
--- a/modules/react/popup/lib/Popper.tsx
+++ b/modules/react/popup/lib/Popper.tsx
@@ -154,10 +154,8 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
         enabled: true,
         phase: 'afterWrite',
         fn({state}) {
-          if (placementRef.current !== state.placement) {
-            setPlacement(state.placement);
-            onPlacementChange?.(state.placement);
-          }
+          setPlacement(state.placement);
+          onPlacementChange?.(state.placement);
         },
       };
     }, [setPlacement, onPlacementChange]);
diff --git a/modules/react/popup/lib/PopupBody.tsx b/modules/react/popup/lib/PopupBody.tsx
index 1ca9a0da1f..07d7ed3ebb 100644
--- a/modules/react/popup/lib/PopupBody.tsx
+++ b/modules/react/popup/lib/PopupBody.tsx
@@ -3,10 +3,20 @@ import * as React from 'react';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Card} from '@workday/canvas-kit-react/card';
 import {usePopupModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '../../layout';
+import {system} from '@workday/canvas-tokens-web';
+
+export const popupBodyStencil = createStencil({
+  base: {
+    overflowY: 'auto',
+    padding: system.space.x2,
+  },
+});
 
 export const PopupBody = createSubcomponent('div')({
   displayName: 'Popup.Body',
   modelHook: usePopupModel,
 })<ExtractProps<typeof Card.Body>>(elemProps => {
-  return <Card.Body overflowY="auto" padding="xxs" {...elemProps} />;
+  return <Card.Body {...mergeStyles(elemProps, popupBodyStencil())} />;
 });
diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx
index 5777bbd8a6..62fd030f59 100644
--- a/modules/react/popup/lib/PopupCard.tsx
+++ b/modules/react/popup/lib/PopupCard.tsx
@@ -1,65 +1,38 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/react';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space, type} from '@workday/canvas-kit-react/tokens';
+import {space} from '@workday/canvas-kit-react/tokens';
 import {
-  styled,
-  TransformOrigin,
-  getTranslateFromOrigin,
-  StyledType,
   ExtractProps,
-  useConstant,
   createSubcomponent,
+  getTransformOrigin,
 } from '@workday/canvas-kit-react/common';
-import {Flex, FlexStyleProps} from '@workday/canvas-kit-react/layout';
+import {FlexStyleProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {getTransformFromPlacement} from './getTransformFromPlacement';
 import {usePopupCard, usePopupModel} from './hooks';
+import {createStencil, createVars, cssVar, keyframes} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
 export interface PopupCardProps extends FlexAndBoxProps {
   children?: React.ReactNode;
 }
 
-const popupAnimation = (transformOrigin: TransformOrigin) => {
-  const translate = getTranslateFromOrigin(transformOrigin, space.xxs);
+const translateVars = createVars('positionX', 'positionY');
 
-  return keyframes`
-    0% {
-      opacity: 0;
-      transform: translate(${translate.x}px, ${translate.y}px);
-    }
-    100% {
-      opacity: 1;
-      transform: translate(0);
-    }
-  `;
-};
-
-const StyledPopupCard = styled(Card)<
-  StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(({transformOrigin, theme}) => {
-  if (transformOrigin == null) {
-    return {};
-  }
-
-  return {
-    animation: popupAnimation(transformOrigin),
-    animationDuration: '150ms',
-    animationTimingFunction: 'ease-out',
-    transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
-    [theme.canvas.breakpoints.down('s')]: {
-      animation: popupAnimation({vertical: 'bottom', horizontal: 'center'}),
-      animationDuration: '150ms',
-      animationTimingFunction: 'ease-out',
-      transformOrigin: 'bottom center',
-    },
-    // Allow overriding of animation in special cases
-    '.wd-no-animation &': {
-      animation: 'none',
-    },
-  };
+/**
+ * Keyframe for the dots loading animation.
+ */
+const fadeIn = keyframes({
+  '0%': {
+    opacity: 1,
+    transform: `translate(${cssVar(translateVars.positionX)}, ${cssVar(translateVars.positionY)})`,
+  },
+  '100%': {
+    opacity: 1,
+    transform: `translate(0)`,
+  },
 });
 
 function getSpace(value?: string | number) {
@@ -72,7 +45,7 @@ function getSpace(value?: string | number) {
 
 function getMaxHeight(margin?: string | number) {
   // set the default margin offset to space.xl
-  let marginOffset: string | number = space.xl;
+  let marginOffset: string | number = cssVar(system.space.x10);
 
   if (margin) {
     // parse the margin prop
@@ -91,33 +64,61 @@ function getMaxHeight(margin?: string | number) {
   return `calc(100vh - ${marginOffset})`;
 }
 
+export const popupCardStencil = createStencil({
+  vars: {
+    maxHeight: '',
+    transformOriginHorizontal: '',
+    transformOriginVertical: '',
+  },
+  base: ({maxHeight, transformOriginHorizontal, transformOriginVertical}) => ({
+    ...system.type.subtext.large,
+    display: 'flex',
+    position: 'relative',
+    maxWidth: `calc(100vw - ${system.space.x8})`,
+    flexDirection: 'column',
+    boxShadow: system.depth[5],
+    minHeight: system.space.zero,
+    padding: system.space.x6,
+    maxHeight: maxHeight,
+    overflowY: 'auto',
+    animationName: fadeIn,
+    animationDuration: '150ms',
+    animationTimingFunction: 'ease-out',
+    transformOrigin: `${transformOriginVertical} ${transformOriginHorizontal}`,
+    // Allow overriding of animation in special cases
+    '.wd-no-animation &': {
+      animation: 'none',
+    },
+    '@media screen and (max-width: 768px)': {
+      transformOrigin: 'bottom center',
+    },
+  }),
+});
+
 export const PopupCard = createSubcomponent('div')({
   displayName: 'Popup.Card',
   modelHook: usePopupModel,
   elemPropsHook: usePopupCard,
-})<PopupCardProps>(({children, ...elemProps}, Element, model) => {
+})<PopupCardProps>(({children, ref, ...elemProps}, Element, model) => {
   const transformOrigin = React.useMemo(() => {
     return getTransformFromPlacement(model.state.placement || 'bottom');
   }, [model.state.placement]);
+  const translate = getTransformOrigin(transformOrigin, cssVar(system.space.x2));
+  const cardMaxHeight = getMaxHeight(elemProps.margin);
 
-  // As is a Flex that will render an element of `Element`
-  const As = useConstant(() => Flex.as(Element));
   return (
-    <StyledPopupCard
-      as={As}
-      transformOrigin={transformOrigin}
-      position="relative"
-      depth={5}
-      maxWidth={`calc(100vw - ${space.l})`}
-      flexDirection="column"
-      minHeight={0}
-      padding="m"
-      maxHeight={getMaxHeight(elemProps.margin)}
-      overflowY="auto"
-      {...type.levels.subtext.large}
-      {...elemProps}
+    <Card
+      ref={ref}
+      {...mergeStyles(elemProps, [
+        popupCardStencil({
+          transformOriginHorizontal: transformOrigin.horizontal,
+          transformOriginVertical: transformOrigin.vertical,
+          maxHeight: cardMaxHeight,
+        }),
+        translateVars({positionX: translate.x, positionY: translate.y}),
+      ])}
     >
       {children}
-    </StyledPopupCard>
+    </Card>
   );
 });
diff --git a/modules/react/popup/lib/PopupCloseIcon.tsx b/modules/react/popup/lib/PopupCloseIcon.tsx
index 2f9d6c6c26..0ad9ed8d46 100644
--- a/modules/react/popup/lib/PopupCloseIcon.tsx
+++ b/modules/react/popup/lib/PopupCloseIcon.tsx
@@ -3,12 +3,22 @@ import React from 'react';
 import {xIcon} from '@workday/canvas-system-icons-web';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {space} from '@workday/canvas-kit-react/tokens';
 
 import {usePopupCloseButton, usePopupModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '../../layout';
 
 export interface PopupCloseIconProps extends ExtractProps<typeof TertiaryButton, never> {}
 
+export const popupCloseIconStencil = createStencil({
+  base: {
+    position: 'absolute',
+    insetInlineEnd: system.space.x1,
+    top: system.space.x1,
+  },
+});
+
 export const PopupCloseIcon = createSubcomponent('button')({
   displayName: 'Popup.CloseIcon',
   modelHook: usePopupModel,
@@ -20,10 +30,7 @@ export const PopupCloseIcon = createSubcomponent('button')({
       size="medium"
       icon={xIcon}
       type="button"
-      position="absolute"
-      insetInlineEnd={space.xxxs}
-      top={space.xxxs}
-      {...elemProps}
+      {...mergeStyles(elemProps, popupCloseIconStencil())}
     />
   );
 });
diff --git a/modules/react/popup/lib/PopupHeading.tsx b/modules/react/popup/lib/PopupHeading.tsx
index 5989ba0dcb..73368229cb 100644
--- a/modules/react/popup/lib/PopupHeading.tsx
+++ b/modules/react/popup/lib/PopupHeading.tsx
@@ -4,18 +4,28 @@ import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common
 import {Card} from '@workday/canvas-kit-react/card';
 
 import {usePopupHeading, usePopupModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '../../layout';
 
 export interface PopupHeadingProps extends ExtractProps<typeof Card.Heading, never> {
   children?: React.ReactNode;
 }
 
+export const popupHeadingStencil = createStencil({
+  base: {
+    marginBlockEnd: system.space.x2,
+    padding: system.space.x2,
+  },
+});
+
 export const PopupHeading = createSubcomponent('h2')({
   displayName: 'Popup.Heading',
   modelHook: usePopupModel,
   elemPropsHook: usePopupHeading,
 })<PopupHeadingProps>(({children, ...elemProps}, Element) => {
   return (
-    <Card.Heading as={Element} marginBottom="xxs" padding="xxs" {...elemProps}>
+    <Card.Heading as={Element} {...mergeStyles(elemProps, popupHeadingStencil())}>
       {children}
     </Card.Heading>
   );
diff --git a/modules/react/popup/stories/examples/Basic.tsx b/modules/react/popup/stories/examples/Basic.tsx
index a1c57964a2..f2ee90103e 100644
--- a/modules/react/popup/stories/examples/Basic.tsx
+++ b/modules/react/popup/stories/examples/Basic.tsx
@@ -26,7 +26,7 @@ export const Basic = () => {
   return (
     <Popup model={model}>
       <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
-      <Popup.Popper placement="bottom">
+      <Popup.Popper placement="top">
         <Popup.Card width={400}>
           <Popup.CloseIcon aria-label="Close" />
           <Popup.Heading>Delete Item</Popup.Heading>
diff --git a/modules/react/select/stories/stories_VisualTesting.tsx b/modules/react/select/stories/stories_VisualTesting.tsx
index 637211a33a..8fac077cd4 100644
--- a/modules/react/select/stories/stories_VisualTesting.tsx
+++ b/modules/react/select/stories/stories_VisualTesting.tsx
@@ -30,10 +30,6 @@ const options = [
 const disabledItems = options.filter(item => item.disabled === true).map(item => item.id);
 
 export const SelectStates = () => {
-  const model = useSelectModel({
-    items: options,
-    nonInteractiveIds: disabledItems,
-  });
   return (
     <StaticStates>
       <ComponentStatesTable
@@ -53,7 +49,7 @@ export const SelectStates = () => {
               {label: 'Active Hover', value: 'active hover'},
             ],
             disabled: [
-              {label: '', value: false},
+              {label: '', value: undefined},
               {label: 'Disabled', value: true},
             ],
           },
@@ -65,21 +61,15 @@ export const SelectStates = () => {
         {props => (
           <FormField>
             <FormField.Label>Contact</FormField.Label>
-            <Select model={model}>
+            <Select items={options} nonInteractiveIds={disabledItems}>
               <FormField.Input as={Select.Input} {...props} id="contact-select" />
               <Select.Popper>
                 <Select.Card maxHeight="200px">
-                  {model.state.items.length > 0 && (
-                    <Select.List>
-                      {item => {
-                        return (
-                          <Select.Item aria-disabled={item.disabled ? item.disabled : undefined}>
-                            {item.id}
-                          </Select.Item>
-                        );
-                      }}
-                    </Select.List>
-                  )}
+                  <Select.List>
+                    {item => {
+                      return <Select.Item aria-disabled={item.disabled}>{item.id}</Select.Item>;
+                    }}
+                  </Select.List>
                 </Select.Card>
               </Select.Popper>
             </Select>
@@ -91,11 +81,6 @@ export const SelectStates = () => {
 };
 
 export const SelectOpenMenuStates = () => {
-  const model = useSelectModel({
-    items: options,
-    nonInteractiveIds: disabledItems,
-    initialVisibility: 'visible',
-  });
   return (
     <StaticStates>
       <ComponentStatesTable
@@ -109,21 +94,15 @@ export const SelectOpenMenuStates = () => {
         {props => (
           <FormField cs={{marginBottom: '250px'}}>
             <FormField.Label>Contact</FormField.Label>
-            <Select model={model}>
+            <Select items={options} nonInteractiveIds={disabledItems} initialVisibility="visible">
               <FormField.Input as={Select.Input} {...props} id="contact-select" />
               <Select.Popper>
                 <Select.Card maxHeight="200px">
-                  {!!model.state.items.length && (
-                    <Select.List>
-                      {item => {
-                        return (
-                          <Select.Item aria-disabled={item.disabled ? item.disabled : undefined}>
-                            {item.id}
-                          </Select.Item>
-                        );
-                      }}
-                    </Select.List>
-                  )}
+                  <Select.List>
+                    {item => {
+                      return <Select.Item aria-disabled={item.disabled}>{item.id}</Select.Item>;
+                    }}
+                  </Select.List>
                 </Select.Card>
               </Select.Popper>
             </Select>
diff --git a/modules/react/side-panel/stories/stories.tsx b/modules/react/side-panel/stories/stories.tsx
index 2b69379321..663e582b1b 100644
--- a/modules/react/side-panel/stories/stories.tsx
+++ b/modules/react/side-panel/stories/stories.tsx
@@ -243,7 +243,7 @@ const Template = props => (
         <TertiaryButton aria-label="messages" icon={assistantIcon} />
         <TertiaryButton aria-label="notifications" icon={notificationsIcon} />
         <TertiaryButton aria-label="inbox" icon={inboxIcon} />
-        <Avatar size={Avatar.Size.m} variant={Avatar.Variant.Light} />
+        <Avatar size="medium" variant="light" />
       </GlobalHeader.Item>
     </GlobalHeader>
     <SidePanelWrapper {...props} />
diff --git a/modules/react/text-area/lib/TextArea.tsx b/modules/react/text-area/lib/TextArea.tsx
index ee79a6a2b0..b765cfe45e 100644
--- a/modules/react/text-area/lib/TextArea.tsx
+++ b/modules/react/text-area/lib/TextArea.tsx
@@ -1,107 +1,67 @@
 import * as React from 'react';
-import {
-  createComponent,
-  StyledType,
-  GrowthBehavior,
-  ErrorType,
-  errorRing,
-  styled,
-  Themeable,
-} from '@workday/canvas-kit-react/common';
-import {borderRadius, inputColors, space, type} from '@workday/canvas-kit-react/tokens';
+import {createComponent, GrowthBehavior, ErrorType} from '@workday/canvas-kit-react/common';
+import {createStencil, calc, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {textInputStencil} from '@workday/canvas-kit-react/text-input';
+export type ValueOf<T> = T[keyof T];
 
-export interface TextAreaProps extends Themeable, GrowthBehavior {
-  /**
-   * If true, set the TextArea to the disabled state.
-   * @default false
-   */
-  disabled?: boolean;
+export interface TextAreaProps extends GrowthBehavior {
   /**
    * The type of error associated with the TextArea (if applicable).
    */
   error?: ErrorType;
-  /**
-   * The function called when the TextArea state changes.
-   */
-  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  /**
-   * The placeholder text of the TextArea.
-   */
-  placeholder?: string;
-  /**
-   * If true, set the TextArea to read-only. The user will be unable to interact with the TextArea.
-   * @default false
-   */
-  readOnly?: boolean;
   /**
    * The resize constraints of the TextArea.
    * @default TextArea.ResizeDirection.Both
    */
-  resize?: TextAreaResizeDirection;
-  /**
-   * The value of the TextArea.
-   */
-  value?: any;
+  resize?: ValueOf<typeof TextAreaResizeDirection>;
 }
 
-export enum TextAreaResizeDirection {
-  None = 'none',
-  Both = 'both',
-  Horizontal = 'horizontal',
-  Vertical = 'vertical',
-}
+export const TextAreaResizeDirection = {
+  None: 'none',
+  Both: 'both',
+  Horizontal: 'horizontal',
+  Vertical: 'vertical',
+} as const;
 
-const StyledTextArea = styled('textarea')<TextAreaProps & StyledType>(
-  ({theme, error}) => ({
-    ...type.levels.subtext.large,
-    border: `1px solid ${inputColors.border}`,
-    display: 'block',
-    backgroundColor: inputColors.background,
-    borderRadius: borderRadius.m,
-    boxSizing: 'border-box',
-    minHeight: space.xxl,
-    minWidth: `calc((${space.xxxl} * 3) + ${space.xl})`,
-    transition: '0.2s box-shadow, 0.2s border-color',
-    padding: space.xxs, // Compensate for border
-    margin: 0, // Fix Safari
+export const textAreaStencil = createStencil({
+  extends: textInputStencil,
+  base: {
+    minHeight: system.space.x16,
+    minWidth: calc.add(calc.multiply(system.space.x20, 3), system.space.x10),
     '&::webkit-resizer': {
       display: 'none',
     },
-    '&::placeholder': {
-      color: inputColors.placeholder,
-    },
-    '&:hover': {
-      borderColor: inputColors.hoverBorder,
-    },
-    '&:focus:not([disabled])': {
-      borderColor: theme.canvas.palette.common.focusOutline,
-      boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-      outline: 'none',
-    },
-    '&:disabled': {
-      backgroundColor: inputColors.disabled.background,
-      borderColor: inputColors.disabled.border,
-      color: inputColors.disabled.text,
-      '&::placeholder': {
-        color: inputColors.disabled.text,
+  },
+
+  modifiers: {
+    resize: {
+      both: {
+        resize: 'both',
+      },
+      horizontal: {
+        resize: 'horizontal',
+      },
+      vertical: {
+        resize: 'vertical',
+      },
+      none: {
+        resize: 'none',
       },
     },
-    ...errorRing(error, theme),
-  }),
-
-  ({resize, grow}) => ({
-    width: grow ? '100%' : undefined,
-    resize: grow ? TextAreaResizeDirection.Vertical : resize,
-  })
-);
+  },
+  defaultModifiers: {
+    resize: 'both',
+  },
+});
 
 export const TextArea = createComponent('textarea')({
   displayName: 'TextArea',
   Component: (
-    {resize = TextAreaResizeDirection.Both, grow, ...elemProps}: TextAreaProps,
+    {resize = TextAreaResizeDirection.Both, grow, error, ...elemProps}: TextAreaProps,
     ref,
     Element
-  ) => <StyledTextArea ref={ref} as={Element} grow={grow} resize={resize} {...elemProps} />,
+  ) => <Element ref={ref} {...handleCsProp(elemProps, textAreaStencil({error, grow, resize}))} />,
   subComponents: {
     ErrorType,
     ResizeDirection: TextAreaResizeDirection,
diff --git a/modules/react/text-input/index.ts b/modules/react/text-input/index.ts
index b7565deb6c..194c5dc7da 100644
--- a/modules/react/text-input/index.ts
+++ b/modules/react/text-input/index.ts
@@ -1,3 +1,2 @@
-export * from './lib/InputIconContainer';
 export * from './lib/TextInput';
 export {InputGroup, useInputGroupModel} from './lib/InputGroup';
diff --git a/modules/react/text-input/lib/InputIconContainer.tsx b/modules/react/text-input/lib/InputIconContainer.tsx
deleted file mode 100644
index 89dbeeb63d..0000000000
--- a/modules/react/text-input/lib/InputIconContainer.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import {GrowthBehavior} from '@workday/canvas-kit-react/common';
-import {space} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-
-/**
- * ### ⚠️ We've deprecated `InputIconContainerProps` from Main because it doesn't handle bidirectionality or icons at the start of an input. ⚠️
- * Please consider using [`InputGroup`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) instead.
- * @deprecated
- */
-export interface InputIconContainerProps extends GrowthBehavior {
-  icon?: React.ReactElement<typeof SystemIcon>;
-}
-
-const Container = styled('div')<InputIconContainerProps>(({grow}) => ({
-  display: grow ? 'block' : 'inline-block',
-  position: 'relative',
-}));
-
-const IconContainer = styled('div')({
-  position: 'absolute',
-  top: space.xxs,
-  right: space.xxs,
-});
-
-/**
- * ### ⚠️ We've deprecated `InputIconContainer` from Main because it doesn't handle bidirectionality or icons at the start of an input. ⚠️
- * Please consider using [`InputGroup`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) instead.
- * @deprecated
- */
-export const InputIconContainer: React.FunctionComponent<
-  React.PropsWithChildren<InputIconContainerProps>
-> = ({grow, children, icon}) => (
-  <Container grow={grow}>
-    {children}
-    {icon && <IconContainer>{icon}</IconContainer>}
-  </Container>
-);
diff --git a/modules/react/text-input/lib/TextInput.tsx b/modules/react/text-input/lib/TextInput.tsx
index 9e8e077ef4..c04aa74ab3 100644
--- a/modules/react/text-input/lib/TextInput.tsx
+++ b/modules/react/text-input/lib/TextInput.tsx
@@ -1,16 +1,9 @@
 import * as React from 'react';
-import {
-  createComponent,
-  StyledType,
-  GrowthBehavior,
-  ErrorType,
-  errorRing,
-  styled,
-  Themeable,
-} from '@workday/canvas-kit-react/common';
-import {borderRadius, inputColors, space, type} from '@workday/canvas-kit-react/tokens';
+import {createComponent, GrowthBehavior, ErrorType} from '@workday/canvas-kit-react/common';
+import {createStencil, cssVar, px2rem, calc, handleCsProp} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
 
-export interface TextInputProps extends Themeable, GrowthBehavior {
+export interface TextInputProps extends GrowthBehavior {
   /**
    * The type of error associated with the TextInput (if applicable).
    */
@@ -21,74 +14,103 @@ export interface TextInputProps extends Themeable, GrowthBehavior {
   width?: number | string;
 }
 
-const StyledTextInput = styled('input')<
-  Pick<TextInputProps, 'error' | 'grow' | 'width' | 'theme'> & StyledType
->(
-  {
-    ...type.levels.subtext.large,
-    border: `1px solid ${inputColors.border}`,
+export const textInputStencil = createStencil({
+  vars: {
+    width: '',
+  },
+  base: ({width}) => ({
+    ...system.type.subtext.large,
     display: 'block',
-    backgroundColor: inputColors.background,
-    borderRadius: borderRadius.m,
+    border: `${px2rem(1)} solid ${cssVar(system.color.border.input.default)}`,
+    backgroundColor: system.color.bg.default,
+    borderRadius: system.shape.x1,
     boxSizing: 'border-box',
-    height: 40,
+    height: system.space.x10,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: space.xxs, // Compensate for border
-    margin: 0, // Fix Safari
+    padding: system.space.x2, // Compensate for border
+    margin: px2rem(0), // Fix Safari
+    width: cssVar(width),
+    minWidth: cssVar(width, calc.add(calc.multiply(system.space.x20, 3), system.space.x10)),
+    color: system.color.text.default,
+    '::-ms-clear': {
+      display: 'none',
+    },
     '&::placeholder': {
-      color: inputColors.placeholder,
+      color: system.color.text.hint,
     },
     '&:hover, &.hover': {
-      borderColor: inputColors.hoverBorder,
+      borderColor: system.color.border.input.strong,
     },
-    '&:focus-visible:not([disabled]), &.focus:not([disabled]), &:focus:not([disabled])': {
-      borderColor: inputColors.focusBorder,
-      boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
+    '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+      borderColor: brand.common.focusOutline,
+      boxShadow: `inset 0 0 0 1px ${cssVar(brand.common.focusOutline)}`,
       outline: 'none',
     },
-    '&:disabled': {
-      backgroundColor: inputColors.disabled.background,
-      borderColor: inputColors.disabled.border,
-      color: inputColors.disabled.text,
+    '&:disabled, .disabled': {
+      backgroundColor: system.color.bg.alt.softer,
+      borderColor: system.color.border.input.disabled,
+      color: system.color.text.disabled,
       '&::placeholder': {
-        color: inputColors.disabled.text,
+        color: system.color.text.disabled,
       },
     },
-    '::-ms-clear': {
-      display: 'none',
-    },
-  },
-  ({width}) => ({
-    minWidth: width || 280,
-    width,
   }),
-  ({grow}) =>
-    grow && {
-      width: '100%',
+  modifiers: {
+    grow: {
+      true: {
+        width: '100%',
+        resize: 'vertical',
+      },
+      false: {
+        width: 'initial',
+      },
     },
-  ({theme, error}) => {
-    return {
-      '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
-        borderColor: theme.canvas.palette.common.focusOutline,
-        boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-        outline: 'none',
+
+    error: {
+      error: {
+        borderColor: brand.error.base,
+        boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.error.base}`,
+        '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])':
+          {
+            borderColor: brand.error.base,
+          },
+        '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+          boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.error.base}, 0 0 0 2px ${
+            system.color.border.inverse
+          }, 0 0 0 4px ${brand.common.focusOutline}`,
+        },
+      },
+      alert: {
+        borderColor: brand.alert.darkest,
+        boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.alert.base}`,
+        '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])':
+          {
+            borderColor: brand.alert.darkest,
+          },
+
+        '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+          boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.alert.base},
+        0 0 0 2px ${system.color.border.inverse},
+        0 0 0 4px ${brand.common.focusOutline}`,
+        },
       },
-      ...errorRing(error, theme),
-    };
-  }
-);
+    },
+  },
+  defaultModifiers: {
+    grow: 'false',
+  },
+});
 
 export const TextInput = createComponent('input')({
   displayName: 'TextInput',
   Component: ({grow, error, width, ...elemProps}: TextInputProps, ref, Element) => (
-    <StyledTextInput
+    <Element
       type="text"
       ref={ref}
-      as={Element}
-      grow={grow}
-      error={error}
-      width={width}
-      {...elemProps}
+      {...handleCsProp(
+        elemProps,
+        textInputStencil({width: typeof width === 'number' ? px2rem(width) : width, grow, error})
+      )}
     />
   ),
   subComponents: {
diff --git a/modules/react/text-input/spec/InputIconContainer.spec.tsx b/modules/react/text-input/spec/InputIconContainer.spec.tsx
deleted file mode 100644
index 3fb0f2cd37..0000000000
--- a/modules/react/text-input/spec/InputIconContainer.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-import {render} from '@testing-library/react';
-
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {exclamationCircleIcon} from '@workday/canvas-system-icons-web';
-import {InputIconContainer} from '../lib/InputIconContainer';
-
-describe('InputIconContainer', () => {
-  it('should render an Icon', () => {
-    const {container} = render(
-      <InputIconContainer icon={<SystemIcon icon={exclamationCircleIcon} />} />
-    );
-
-    expect(container).toContainHTML('wd-icon-exclamation');
-  });
-});
diff --git a/modules/react/toast/lib/Toast.tsx b/modules/react/toast/lib/Toast.tsx
index 44ebe2ea93..e92f1d6c04 100644
--- a/modules/react/toast/lib/Toast.tsx
+++ b/modules/react/toast/lib/Toast.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
 
 import {ToastCloseIcon} from './ToastCloseIcon';
@@ -10,6 +9,9 @@ import {ToastMessage} from './ToastMessage';
 import {ToastLink} from './ToastLink';
 import {ToastBody} from './ToastBody';
 import {useToastModel} from './hooks/useToastModel';
+import {calc, createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ToastProps extends Omit<ExtractProps<typeof Popup.Card, never>, 'model'> {}
 
@@ -45,6 +47,16 @@ const getAriaAttributes = (mode: string, id: string): React.HtmlHTMLAttributes<H
   }
 };
 
+const toastStencil = createStencil({
+  base: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: calc.add(calc.multiply(system.space.x20, 4), system.space.x10),
+    padding: system.space.zero,
+    gap: system.space.x1,
+  },
+});
+
 /**
  * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
  *
@@ -99,13 +111,8 @@ export const Toast = createContainer('div')({
 })<ToastProps>(({children, ...elemProps}, _, model) => {
   return (
     <Popup.Card
-      as={Flex}
-      width={360}
-      padding="0"
       {...getAriaAttributes(model.state.mode, model.state.id)}
-      flexDirection="row"
-      gap="xxxs"
-      {...elemProps}
+      {...mergeStyles(elemProps, toastStencil())}
     >
       {children}
     </Popup.Card>
diff --git a/modules/react/toast/lib/ToastBody.tsx b/modules/react/toast/lib/ToastBody.tsx
index 3bf7fae3e9..2c12f0c2ff 100644
--- a/modules/react/toast/lib/ToastBody.tsx
+++ b/modules/react/toast/lib/ToastBody.tsx
@@ -2,25 +2,29 @@ import React from 'react';
 
 import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ToastBodyProps extends ExtractProps<typeof Popup.Body> {}
 
+export const toastBodyStencil = createStencil({
+  base: {
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    paddingTop: system.space.x4,
+    paddingBottom: system.space.x4,
+    flexGrow: 1,
+    gap: system.space.x1,
+  },
+});
+
 export const ToastBody = createComponent('div')({
   displayName: 'Toast.Body',
   Component: ({children, ...elemProps}: ToastBodyProps, ref, Element) => {
     return (
-      <Flex
-        alignItems="flex-start"
-        flexDirection="column"
-        justifyContent="center"
-        paddingY="s"
-        ref={ref}
-        as={Element}
-        flexGrow={1}
-        gap="xxxs"
-        {...elemProps}
-      >
+      <Flex ref={ref} as={Element} {...mergeStyles(elemProps, toastBodyStencil())}>
         {children}
       </Flex>
     );
diff --git a/modules/react/toast/lib/ToastCloseIcon.tsx b/modules/react/toast/lib/ToastCloseIcon.tsx
index 4a9a984da1..8df5ee5155 100644
--- a/modules/react/toast/lib/ToastCloseIcon.tsx
+++ b/modules/react/toast/lib/ToastCloseIcon.tsx
@@ -1,14 +1,27 @@
 import React from 'react';
 import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ToastCloseIconProps extends ExtractProps<typeof Popup.CloseIcon, never> {}
 
+export const toastCloseIconStencil = createStencil({
+  base: {
+    position: 'relative',
+  },
+});
+
 export const ToastCloseIcon = createComponent('button')({
   displayName: 'Toast.CloseIcon',
   Component: (elemProps: ToastCloseIconProps, ref, Element) => {
     return (
-      <Popup.CloseIcon as={Element} ref={ref} size="small" position="relative" {...elemProps} />
+      <Popup.CloseIcon
+        as={Element}
+        ref={ref}
+        size="small"
+        {...mergeStyles(elemProps, toastCloseIconStencil())}
+      />
     );
   },
 });
diff --git a/modules/react/toast/lib/ToastIcon.tsx b/modules/react/toast/lib/ToastIcon.tsx
index 3183b53418..a7ed61ca5f 100644
--- a/modules/react/toast/lib/ToastIcon.tsx
+++ b/modules/react/toast/lib/ToastIcon.tsx
@@ -2,22 +2,21 @@ import React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ToastIconProps extends Omit<SystemIconProps, 'colorHover'> {}
 
+export const toastIconStencil = createStencil({
+  base: {
+    alignSelf: 'start',
+    margin: `${system.space.x4} ${system.space.x3}`,
+  },
+});
+
 export const ToastIcon = createComponent('div')({
   displayName: 'Toast.Icon',
   Component: (elemProps: ToastIconProps, ref, Element) => {
-    return (
-      <SystemIcon
-        colorHover={elemProps.color}
-        marginY="s"
-        marginX="xs"
-        alignSelf="start"
-        ref={ref}
-        as={Element}
-        {...elemProps}
-      />
-    );
+    return <SystemIcon ref={ref} as={Element} {...handleCsProp(elemProps, toastIconStencil())} />;
   },
 });
diff --git a/modules/react/toast/lib/ToastMessage.tsx b/modules/react/toast/lib/ToastMessage.tsx
index f55f491fa8..b732a315ce 100644
--- a/modules/react/toast/lib/ToastMessage.tsx
+++ b/modules/react/toast/lib/ToastMessage.tsx
@@ -3,20 +3,29 @@ import React from 'react';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {useToastModel} from './hooks/useToastModel';
 import {Subtext} 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 ToastMessageProps extends Omit<ExtractProps<typeof Subtext>, 'size'> {}
 
+export const toastMessageStencil = createStencil({
+  base: {
+    wordBreak: 'break-word',
+    marginBlockStart: system.space.zero,
+    marginBlockEnd: system.space.zero,
+  },
+});
+
 export const ToastMessage = createSubcomponent('p')({
   modelHook: useToastModel,
 })<ToastMessageProps>(({children, ...elemProps}, Element, model) => {
   return (
     <Subtext
       size="large"
-      wordBreak="break-word"
-      marginY="zero"
       id={model.state.id}
       as={Element}
-      {...elemProps}
+      {...mergeStyles(elemProps, toastMessageStencil())}
     >
       {children}
     </Subtext>