From 4fa21d7c07d138e03daf228f4a6a17fcbf379a3f Mon Sep 17 00:00:00 2001
From: Nicholas Boll <nicholas.boll@gmail.com>
Date: Mon, 14 Oct 2024 16:44:11 -0600
Subject: [PATCH] feat: Add a MultiSelect component (#2911)

Add a MutliSelect component.

[category:Components]
---
 cypress/component/FormField.spec.tsx          |   2 +-
 cypress/support/commands.ts                   |   1 -
 .../codemod/lib/v7/recategorizeIconButtons.ts |   1 -
 modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx       |  21 +-
 modules/labs-css/.gitignore                   |   1 +
 modules/labs-css/expandable.css               |   5 -
 .../expandable/stories/testing.stories.tsx    |   2 -
 modules/preview-react/multi-select/LICENSE    |  52 ++++
 modules/preview-react/multi-select/README.md  |   5 +
 modules/preview-react/multi-select/index.ts   |   4 +
 .../multi-select/lib/MultiSelect.tsx          |  28 ++
 .../multi-select/lib/MultiSelectCard.tsx      |  34 +++
 .../multi-select/lib/MultiSelectInput.tsx     | 262 ++++++++++++++++++
 .../multi-select/lib/MultiSelectItem.tsx      |  37 +++
 .../multi-select/lib/useMultiSelectModel.ts   |  79 ++++++
 .../multi-select/spec/tsconfig.json           |   3 +
 .../multi-select/stories/MultiSelect.mdx      | 101 +++++++
 .../stories/MultiSelect.stories.ts            |  43 +++
 .../multi-select/stories/examples/Basic.tsx   |  30 ++
 .../multi-select/stories/examples/Complex.tsx |  75 +++++
 .../stories/examples/Controlled.tsx           |  92 ++++++
 .../multi-select/stories/examples/Icons.tsx   |  43 +++
 .../stories/examples/Searching.tsx            | 123 ++++++++
 .../multi-select/stories/tsconfig.json        |   3 +
 .../stories/examples/OverflowActionBar.tsx    |   1 +
 .../react/button/stories/button/Button.mdx    |   5 +-
 modules/react/collection/lib/ListBox.tsx      |  23 +-
 .../collection/lib/useListItemRemoveable.ts   |  99 +++++++
 modules/react/collection/lib/useListLoader.ts |   1 +
 .../collection/lib/useSelectionListModel.tsx  |   3 +-
 .../combobox/lib/hooks/useComboboxInput.ts    |   3 +-
 .../lib/hooks/useComboboxInputArbitrary.ts    |   4 +
 .../lib/hooks/useComboboxInputConstrained.ts  |  11 +-
 .../combobox/lib/hooks/useComboboxLoader.ts   |   2 +-
 .../combobox/lib/hooks/useComboboxModel.tsx   |   4 +
 modules/react/combobox/stories/Combobox.mdx   |   5 +-
 modules/react/common/README.md                | 177 +-----------
 .../react/common/lib/utils/mergeCallback.ts   |  12 +-
 modules/react/common/lib/utils/mergeProps.ts  |   8 +-
 modules/react/icon/lib/SystemIcon.tsx         |   1 -
 .../react/layout/lib/utils/buildStyleFns.ts   |  22 +-
 .../react/select/lib/hooks/useSelectInput.ts  |   7 +-
 .../testing/lib/ComponentStatesTable.tsx      |   4 +
 modules/react/text-input/lib/InputGroup.tsx   |   6 +-
 modules/react/text-input/lib/TextInput.tsx    |   3 +-
 modules/styling/lib/cs.ts                     |  53 ++--
 modules/styling/spec/cs.spec.tsx              |   8 +-
 47 files changed, 1254 insertions(+), 255 deletions(-)
 create mode 100644 modules/labs-css/.gitignore
 delete mode 100644 modules/labs-css/expandable.css
 create mode 100644 modules/preview-react/multi-select/LICENSE
 create mode 100644 modules/preview-react/multi-select/README.md
 create mode 100644 modules/preview-react/multi-select/index.ts
 create mode 100644 modules/preview-react/multi-select/lib/MultiSelect.tsx
 create mode 100644 modules/preview-react/multi-select/lib/MultiSelectCard.tsx
 create mode 100644 modules/preview-react/multi-select/lib/MultiSelectInput.tsx
 create mode 100644 modules/preview-react/multi-select/lib/MultiSelectItem.tsx
 create mode 100644 modules/preview-react/multi-select/lib/useMultiSelectModel.ts
 create mode 100644 modules/preview-react/multi-select/spec/tsconfig.json
 create mode 100644 modules/preview-react/multi-select/stories/MultiSelect.mdx
 create mode 100644 modules/preview-react/multi-select/stories/MultiSelect.stories.ts
 create mode 100644 modules/preview-react/multi-select/stories/examples/Basic.tsx
 create mode 100644 modules/preview-react/multi-select/stories/examples/Complex.tsx
 create mode 100644 modules/preview-react/multi-select/stories/examples/Controlled.tsx
 create mode 100644 modules/preview-react/multi-select/stories/examples/Icons.tsx
 create mode 100644 modules/preview-react/multi-select/stories/examples/Searching.tsx
 create mode 100644 modules/preview-react/multi-select/stories/tsconfig.json
 create mode 100644 modules/react/collection/lib/useListItemRemoveable.ts

diff --git a/cypress/component/FormField.spec.tsx b/cypress/component/FormField.spec.tsx
index 0a73c27780..e5f059419e 100644
--- a/cypress/component/FormField.spec.tsx
+++ b/cypress/component/FormField.spec.tsx
@@ -38,7 +38,7 @@ describe('Form Field', () => {
       });
     });
 
-    it.only('should link the input to the label name', () => {
+    it('should link the input to the label name', () => {
       cy.get('input').should('have.ariaLabel', 'First Name');
     });
 
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 5f9d3490e7..9fac2d002b 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -137,7 +137,6 @@ export const haveAriaLabel = (text: string) => ($target: JQuery) => {
     expect($labelledEl).to.have.text(text);
   } else if ($target.attr('id')) {
     const id = $target.attr('id');
-    console.log('id', id);
     const $labelledEl = Cypress.$(`label[for="${id}"]`);
     if (!$labelledEl.length) {
       throw Error(
diff --git a/modules/codemod/lib/v7/recategorizeIconButtons.ts b/modules/codemod/lib/v7/recategorizeIconButtons.ts
index c94e04f3c3..d0035aa163 100644
--- a/modules/codemod/lib/v7/recategorizeIconButtons.ts
+++ b/modules/codemod/lib/v7/recategorizeIconButtons.ts
@@ -185,7 +185,6 @@ export default function transformer(file: FileInfo, api: API, options: Options)
           }
         }
       });
-      console.log(node.specifiers?.length);
 
       // if we removed all specifiers, remove the import
       if (!node.specifiers?.length) {
diff --git a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
index 41a929cd5c..0df0ec4ecf 100644
--- a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
+++ b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
@@ -45,16 +45,17 @@ A note to the reader:
 - [Component Updates](#component-updates)
   - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
   - [Avatar](#avatar)
+  - [Collections](#collections)
   - [Combobox](#combmbox)
   - [Form Field](#form-field)
     - [Form Field Group](#form-field-group)
     - [Form Field Field](#form-field-field)
   - [Menu Item](#menu-item)
+  - [MultiSelect](#multiselect)
   - [Search Form](#search-form)
   - [Select](#select)
   - [Text Area](#text-area)
   - [Text Input](#text-input)
-  - [Collections](#collections)
 - [Utility Updates](#utility-updates)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
@@ -489,9 +490,9 @@ this sub-component when using `FormField`. This component also exists on `FormFi
 
 ### Menu Item
 
-**PR: ** [2969](https://github.com/Workday/canvas-kit/pull/2969)
+**PR:** [2969](https://github.com/Workday/canvas-kit/pull/2969)
 
-`Menu.Item` was converted to use Stencils for styling and uses SystemIcon stencil variables to
+`Menu.Item` was converted to use Stencils for styling and uses `SystemIcon` stencil variables to
 change icon color instead of deeply nested selectors. We also added `Menu.Option` component for
 menus that have a selected visual state. `Menu.Option` will need more accessibility affordances that
 depend on the nature of your use of the `Menu` component. For example, `<Combobox>` and `<Select>`
@@ -507,6 +508,20 @@ We've removed the `MenuItemProps` export from `@workday/canvas-kit-react/menu`.
 polymorphic components. The `never` means "don't add element props". The second parameter is used to
 pass the interface that the `as` prop is pointing to.
 
+`Menu.Item` no longer sets `aria-selected` since that attribute is not valid on a `role=menuitem`.
+The `Menu.Option` was added to support the role of a `role=option` for going inside a
+`role=listbox`. The `Combobox` family of components uses a `role=listbox` for menu options. The
+`Menu.Option` renders a checkmark for a visual indication of selected options.
+
+### MultiSelect
+
+**PR:** [2911](https://github.com/Workday/canvas-kit/pull/2911)
+
+Added the `MultiSelect` component to select more than one option from a list of options. The
+`MultiSelect` is similar in API to the `Select` component, except the values are comma delimited
+with a space. If the ids represented are `['1', '2']`, then the string value of the form field is
+`'1, 2'`.
+
 ### Search Form (Labs)
 
 **PRs:** [#2934](https://github.com/Workday/canvas-kit/pull/2934),
diff --git a/modules/labs-css/.gitignore b/modules/labs-css/.gitignore
new file mode 100644
index 0000000000..b3a5267117
--- /dev/null
+++ b/modules/labs-css/.gitignore
@@ -0,0 +1 @@
+*.css
diff --git a/modules/labs-css/expandable.css b/modules/labs-css/expandable.css
deleted file mode 100644
index 555411bb02..0000000000
--- a/modules/labs-css/expandable.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.cnvs-labs-expandable-avatar {
-  margin-right: var(--cnvs-sys-space-x2);
-  flex-shrink: 0;
-}
-
diff --git a/modules/labs-react/expandable/stories/testing.stories.tsx b/modules/labs-react/expandable/stories/testing.stories.tsx
index b416b902b4..c38e7a03fc 100644
--- a/modules/labs-react/expandable/stories/testing.stories.tsx
+++ b/modules/labs-react/expandable/stories/testing.stories.tsx
@@ -13,8 +13,6 @@ const meta: Meta = withSnapshotsEnabled({
   component: Expandable,
 });
 
-console.log(meta);
-
 // export default meta;
 
 export default {
diff --git a/modules/preview-react/multi-select/LICENSE b/modules/preview-react/multi-select/LICENSE
new file mode 100644
index 0000000000..10966086f1
--- /dev/null
+++ b/modules/preview-react/multi-select/LICENSE
@@ -0,0 +1,52 @@
+Apache License, Version 2.0 Apache License Version 2.0, January 2004
+
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License.
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License.
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution.
+You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+You must give any other recipients of the Work or Derivative Works a copy of this License; and You must cause any modified files to carry prominent notices stating that You changed the files; and You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions.
+Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+
+6. Trademarks.
+This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty.
+Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability.
+In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability.
+While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+©2021 Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
+
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
diff --git a/modules/preview-react/multi-select/README.md b/modules/preview-react/multi-select/README.md
new file mode 100644
index 0000000000..acf3c24628
--- /dev/null
+++ b/modules/preview-react/multi-select/README.md
@@ -0,0 +1,5 @@
+# Canvas Kit Preview React MultiSelect
+
+View the
+[documentation for MultiSelect](https://workday.github.io/canvas-kit/?path=/docs/preview-multi-select-react--basic)
+on Storybook.
diff --git a/modules/preview-react/multi-select/index.ts b/modules/preview-react/multi-select/index.ts
new file mode 100644
index 0000000000..dd563be2bf
--- /dev/null
+++ b/modules/preview-react/multi-select/index.ts
@@ -0,0 +1,4 @@
+export {useMultiSelectInput} from './lib/MultiSelectInput';
+export {useMultiSelectModel} from './lib/useMultiSelectModel';
+
+export {MultiSelect} from './lib/MultiSelect';
diff --git a/modules/preview-react/multi-select/lib/MultiSelect.tsx b/modules/preview-react/multi-select/lib/MultiSelect.tsx
new file mode 100644
index 0000000000..1785f8c469
--- /dev/null
+++ b/modules/preview-react/multi-select/lib/MultiSelect.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {Combobox} from '@workday/canvas-kit-react/combobox';
+
+import {useMultiSelectModel} from './useMultiSelectModel';
+import {MultiSelectInput, MultiSelectSearchInput} from './MultiSelectInput';
+import {MultiSelectCard} from './MultiSelectCard';
+
+export interface MultiSelectProps extends React.PropsWithChildren {}
+
+export const MultiSelect = createContainer()({
+  modelHook: useMultiSelectModel,
+  subComponents: {
+    Input: MultiSelectInput,
+    SearchInput: MultiSelectSearchInput,
+    Popper: Combobox.Menu.Popper,
+    Card: MultiSelectCard,
+    List: Combobox.Menu.List,
+    Item: Combobox.Menu.Item,
+  },
+})<MultiSelectProps>(({children, ...elemProps}, _, model) => {
+  return (
+    <Combobox.Menu model={model} {...elemProps}>
+      {children}
+    </Combobox.Menu>
+  );
+});
diff --git a/modules/preview-react/multi-select/lib/MultiSelectCard.tsx b/modules/preview-react/multi-select/lib/MultiSelectCard.tsx
new file mode 100644
index 0000000000..f7d0b8d0eb
--- /dev/null
+++ b/modules/preview-react/multi-select/lib/MultiSelectCard.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {
+  createElemPropsHook,
+  createSubcomponent,
+  ExtractProps,
+} from '@workday/canvas-kit-react/common';
+import {Menu} from '@workday/canvas-kit-react/menu';
+
+import {useMultiSelectModel} from './useMultiSelectModel';
+import {calc, px2rem} from '@workday/canvas-kit-styling';
+
+export interface MultiSelectCardProps extends ExtractProps<typeof Menu.Card> {}
+
+/**
+ * This hook sets the `minWidth` style attribute to match the width of the
+ * {@link MultiSelectInput MultiSelect.Input} component.
+ */
+export const useMultiSelectCard = createElemPropsHook(useMultiSelectModel)(model => {
+  return {
+    minWidth: calc.add(px2rem(model.state.width), px2rem(2)),
+  };
+});
+
+export const MultiSelectCard = createSubcomponent('div')({
+  modelHook: useMultiSelectModel,
+  elemPropsHook: useMultiSelectCard,
+})<MultiSelectCardProps>(({children, ...elemProps}, Element) => {
+  return (
+    <Menu.Card as={Element} {...elemProps}>
+      {children}
+    </Menu.Card>
+  );
+});
diff --git a/modules/preview-react/multi-select/lib/MultiSelectInput.tsx b/modules/preview-react/multi-select/lib/MultiSelectInput.tsx
new file mode 100644
index 0000000000..03eca34017
--- /dev/null
+++ b/modules/preview-react/multi-select/lib/MultiSelectInput.tsx
@@ -0,0 +1,262 @@
+import React from 'react';
+
+import {system} from '@workday/canvas-tokens-web';
+import {caretDownSmallIcon, searchIcon} from '@workday/canvas-system-icons-web';
+
+import {
+  composeHooks,
+  createElemPropsHook,
+  createSubcomponent,
+} from '@workday/canvas-kit-react/common';
+import {createStencil, CSProps, handleCsProp} from '@workday/canvas-kit-styling';
+import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {
+  ListBox,
+  useListItemRegister,
+  useListItemRovingFocus,
+  useListModel,
+} from '@workday/canvas-kit-react/collection';
+import {useComboboxInput, useComboboxInputConstrained} from '@workday/canvas-kit-react/combobox';
+import {Pill} from '@workday/canvas-kit-preview-react/pill';
+
+import {useMultiSelectModel} from './useMultiSelectModel';
+
+export const multiSelectStencil = createStencil({
+  base: {
+    border: `1px solid ${system.color.border.input.default}`,
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: system.color.bg.default,
+    borderRadius: system.shape.x1,
+    boxSizing: 'border-box',
+    minHeight: system.space.x10,
+    transition: '0.2s box-shadow, 0.2s border-color',
+    margin: 0, // Fix Safari
+
+    '&:hover, &.hover': {
+      borderColor: system.color.border.input.strong,
+    },
+
+    '&:focus-within': {
+      borderColor: system.color.border.primary.default,
+      boxShadow: `inset 0 0 0 1px ${system.color.border.primary.default}`,
+    },
+
+    // @ts-ignore
+    '& [data-part="user-input"]': {
+      ...system.type.subtext.large,
+      backgroundColor: system.color.bg.transparent,
+      borderRadius: system.shape.x1,
+
+      // Remove the focus ring - it is handled at the container level
+      border: 'none !important',
+      boxShadow: 'none !important',
+      outlineWidth: '0px',
+
+      '&:where(:not([aria-autocomplete]))': {
+        caretColor: 'transparent',
+        cursor: 'default',
+        '&::selection': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+
+    '& :where([data-part="form-input"])': {
+      position: 'absolute',
+      top: system.space.zero,
+      bottom: system.space.zero,
+      left: system.space.zero,
+      right: system.space.zero,
+      opacity: system.opacity.zero,
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
+
+    '& :where([data-part="separator"])': {
+      backgroundColor: system.color.border.divider,
+      height: 1,
+      margin: `${system.space.zero} ${system.space.x2}`,
+    },
+
+    '& :where([data-part="list"])': {
+      display: 'flex',
+      gap: system.space.x2,
+      padding: system.space.x2,
+      flexWrap: 'wrap',
+    },
+  },
+});
+
+export const useMultiSelectInput = composeHooks(
+  createElemPropsHook(useMultiSelectModel)((model, ref) => {
+    return {
+      onKeyDown(event: React.KeyboardEvent) {
+        // Space bar key is hit and menu is open
+        if (event.key === ' ' && model.state.visibility === 'visible') {
+          const id = model.state.cursorId;
+          // There are 2 modes. Search mode and navigation mode. Searching clears the cursor. Using
+          // the down arrow enables the cursor and thus navigation mode.
+          // - Navigation mode: toggle cursor item
+          // - Search mode: enter a space in the search
+          if (id) {
+            model.events.select({id});
+            event.preventDefault();
+          }
+        }
+
+        if (
+          (event.key === 'ArrowDown' || event.key === 'ArrowUp') &&
+          model.state.visibility === 'hidden'
+        ) {
+          // prevent navigating vertically on the input
+          model.events.show(event);
+          event.preventDefault();
+        }
+      },
+    };
+  }),
+  useComboboxInputConstrained,
+  useComboboxInput
+);
+
+const removeItem = <T extends unknown>(id: string, model: ReturnType<typeof useListModel>) => {
+  const index = model.state.items.findIndex(item => item.id === model.state.cursorId);
+  const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
+  const nextId = model.state.items[nextIndex].id;
+  if (model.state.cursorId === id) {
+    // We're removing the currently focused item. Focus next item
+    model.events.goTo({id: nextId});
+  }
+};
+
+const useMultiSelectedItem = composeHooks(
+  createElemPropsHook(useListModel)((model, ref, elemProps) => {
+    return {
+      onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+        const id = event.currentTarget.dataset.id || '';
+        if (event.key === 'Backspace' || event.key === 'Delete') {
+          model.events.select({id});
+          removeItem(id, model);
+        }
+      },
+      onClick(event: React.MouseEvent<HTMLElement>) {
+        const id = event.currentTarget.dataset.id || '';
+        model.events.select({id});
+      },
+    };
+  }),
+  useListItemRovingFocus,
+  useListItemRegister
+);
+
+const MultiSelectedItem = createSubcomponent('span')({
+  modelHook: useListModel,
+  elemPropsHook: useMultiSelectedItem,
+})(({children, ref, ...elemProps}, Element) => {
+  return (
+    <Pill as={Element} variant="removable">
+      {children}
+      <Pill.IconButton ref={ref} {...(elemProps as any)} />
+    </Pill>
+  );
+});
+
+export interface MultiSelectInputProps
+  extends CSProps,
+    Pick<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      'disabled' | 'className' | 'style' | 'aria-labelledby'
+    > {}
+
+export const MultiSelectInput = createSubcomponent(TextInput)({
+  modelHook: useMultiSelectModel,
+  elemPropsHook: useMultiSelectInput,
+})<MultiSelectInputProps>(
+  (
+    {className, cs, style, 'aria-labelledby': ariaLabelledBy, formInputProps, ...elemProps},
+    Element,
+    model
+  ) => {
+    return (
+      <div {...handleCsProp({className, cs, style}, multiSelectStencil({}))}>
+        <InputGroup>
+          <InputGroup.Input data-part="form-input" {...formInputProps} />
+          <InputGroup.Input
+            data-part="user-input"
+            as={Element}
+            aria-labelledby={ariaLabelledBy}
+            readOnly
+            {...elemProps}
+          />
+          <InputGroup.InnerEnd pointerEvents="none">
+            <SystemIcon icon={caretDownSmallIcon} />
+          </InputGroup.InnerEnd>
+        </InputGroup>
+        {model.selected.state.items.length ? (
+          <>
+            <div data-part="separator" />
+            <ListBox
+              model={model.selected}
+              as="div"
+              role="listbox"
+              aria-orientation="horizontal"
+              aria-labelledby={ariaLabelledBy}
+            >
+              {item => <MultiSelectedItem>{item.textValue}</MultiSelectedItem>}
+            </ListBox>
+          </>
+        ) : null}
+      </div>
+    );
+  }
+);
+
+export const MultiSelectSearchInput = createSubcomponent(TextInput)({
+  modelHook: useMultiSelectModel,
+  elemPropsHook: useMultiSelectInput,
+})<MultiSelectInputProps>(
+  (
+    {className, cs, style, 'aria-labelledby': ariaLabelledBy, formInputProps, ref, ...elemProps},
+    Element,
+    model
+  ) => {
+    return (
+      <div {...handleCsProp({className, cs, style}, multiSelectStencil({}))}>
+        <InputGroup>
+          <InputGroup.InnerStart pointerEvents="none" width={system.space.x8}>
+            <SystemIcon icon={searchIcon} size={system.space.x4} />
+          </InputGroup.InnerStart>
+          <InputGroup.Input data-part="form-input" {...formInputProps} />
+          <InputGroup.Input
+            data-part="user-input"
+            as={Element}
+            aria-labelledby={ariaLabelledBy}
+            {...elemProps}
+          />
+          <InputGroup.InnerEnd>
+            <InputGroup.ClearButton />
+          </InputGroup.InnerEnd>
+          <InputGroup.InnerEnd pointerEvents="none">
+            <SystemIcon icon={caretDownSmallIcon} />
+          </InputGroup.InnerEnd>
+        </InputGroup>
+        {model.selected.state.items.length ? (
+          <>
+            <div data-part="separator" />
+            <ListBox
+              model={model.selected}
+              as="div"
+              role="listbox"
+              aria-orientation="horizontal"
+              aria-labelledby={ariaLabelledBy}
+            >
+              {item => <MultiSelectedItem>{item.textValue}</MultiSelectedItem>}
+            </ListBox>
+          </>
+        ) : null}
+      </div>
+    );
+  }
+);
diff --git a/modules/preview-react/multi-select/lib/MultiSelectItem.tsx b/modules/preview-react/multi-select/lib/MultiSelectItem.tsx
new file mode 100644
index 0000000000..0f144915de
--- /dev/null
+++ b/modules/preview-react/multi-select/lib/MultiSelectItem.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {handleCsProp} from '@workday/canvas-kit-styling';
+
+import {
+  composeHooks,
+  createElemPropsHook,
+  createSubcomponent,
+  ExtractProps,
+} from '@workday/canvas-kit-react/common';
+import {Combobox, useComboboxMenuItem} from '@workday/canvas-kit-react/combobox';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
+
+import {useMultiSelectModel} from './useMultiSelectModel';
+
+export const useMultiSelectItem = composeHooks(
+  createElemPropsHook(useMultiSelectModel)(({state}) => {
+    return {
+      role: 'option',
+    };
+  }),
+  useComboboxMenuItem
+);
+
+export const MultiSelectItem = createSubcomponent('li')({
+  modelHook: useMultiSelectModel,
+  elemPropsHook: useMultiSelectItem,
+  subComponents: {
+    Icon: Combobox.Menu.Item.Icon,
+  },
+})<ExtractProps<typeof Combobox.Menu.Item>>(({children, ...elemProps}, Element, _model) => {
+  return (
+    <StyledMenuItem as={Element} {...handleCsProp(elemProps)}>
+      {children}
+    </StyledMenuItem>
+  );
+});
diff --git a/modules/preview-react/multi-select/lib/useMultiSelectModel.ts b/modules/preview-react/multi-select/lib/useMultiSelectModel.ts
new file mode 100644
index 0000000000..f96377619f
--- /dev/null
+++ b/modules/preview-react/multi-select/lib/useMultiSelectModel.ts
@@ -0,0 +1,79 @@
+import React from 'react';
+
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {useComboboxModel} from '@workday/canvas-kit-react/combobox';
+import {useListModel, Item} from '@workday/canvas-kit-react/collection';
+
+/**
+ * `MultiSelectModel` extends the {@link ComboboxModel}. Selecting items from
+ * the menu will dispatch an
+ * [input](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) event on the
+ * input which should work with form libraries, automation and autofill.
+ *
+ * ```tsx
+ * const model = useMultiSelectModel({items: ['Mobile', 'Phone', 'E-Mail']})
+ *
+ * <MultiSelect model={model}>
+ *   ...
+ * </MultiSelect>
+ * ```
+ */
+export const useMultiSelectModel = createModelHook({
+  defaultConfig: {
+    ...useComboboxModel.defaultConfig,
+    mode: 'multiple' as const,
+    shouldVirtualize: false,
+  },
+  requiredConfig: {
+    ...useComboboxModel.requiredConfig,
+  },
+  contextOverride: useComboboxModel.Context,
+})(config => {
+  const cachedSelectedRef = React.useRef<Item<any>[]>([]);
+  const model = useComboboxModel(
+    useComboboxModel.mergeConfig(config, {
+      onHide() {
+        setSelectedItems(cachedSelected);
+      },
+    })
+  );
+  const [selectedItems, setSelectedItems] = React.useState<Item<any>[]>(() => {
+    return (config.initialSelectedIds === 'all' ? [] : config.initialSelectedIds)
+      .map(id => model.navigation.getItem(id, model))
+      .filter(item => item) as Item<any>[];
+  });
+
+  const cachedSelected: Item<any>[] = React.useMemo(
+    () =>
+      (model.state.selectedIds === 'all' ? [] : model.state.selectedIds)
+        // try to find the item in the navigation. If it isn't there, maybe it is filtered out currently and we can find it from previous cached
+        .map(
+          id =>
+            model.navigation.getItem(id, model) || cachedSelectedRef.current.find(i => i.id === id)
+        )
+        .filter(item => item) as Item<any>[],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model.state.selectedIds]
+  );
+  cachedSelectedRef.current = cachedSelected;
+
+  // The `listbox` of pills under the MultiSelect combobox input.
+  const selected = useListModel({
+    orientation: 'horizontal',
+    onSelect({id}) {
+      model.events.select({id});
+    },
+    shouldVirtualize: false,
+    items: model.state.visibility === 'hidden' ? cachedSelected : selectedItems,
+  });
+
+  const state = {
+    ...model.state,
+  };
+
+  const events = {
+    ...model.events,
+  };
+
+  return {selected, ...model, state, events};
+});
diff --git a/modules/preview-react/multi-select/spec/tsconfig.json b/modules/preview-react/multi-select/spec/tsconfig.json
new file mode 100644
index 0000000000..e7f236e49a
--- /dev/null
+++ b/modules/preview-react/multi-select/spec/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../../../tsconfig.spec.json"
+}
diff --git a/modules/preview-react/multi-select/stories/MultiSelect.mdx b/modules/preview-react/multi-select/stories/MultiSelect.mdx
new file mode 100644
index 0000000000..6c97339e85
--- /dev/null
+++ b/modules/preview-react/multi-select/stories/MultiSelect.mdx
@@ -0,0 +1,101 @@
+import {
+  ExampleCodeBlock,
+  InformationHighlight,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
+
+import {Basic} from './examples/Basic';
+import {Complex} from './examples/Complex';
+import {Icons} from './examples/Icons';
+import {Controlled} from './examples/Controlled';
+import {Searching} from './examples/Searching';
+
+import * as MultiSelectStories from './MultiSelect.stories';
+
+<Meta of={MultiSelectStories} />
+
+# Canvas Kit MultiSelect
+
+MultiSelect inputs allow users to choose multiple options from a list of items.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+### Basic Example
+
+`MultiSelect` supports a
+[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where you
+pass an array of items via the `items` prop and provide a render function to display the items. The
+items may be provided as an
+[array of strings](/getting-started/for-developers/resources/collection-api/#array-of-strings) or an
+[array of objects](/getting-started/for-developers/resources/collection-api/#array-of-objects).
+
+`MultiSelect` should be used in tandem with [Form Field](/components/inputs/form-field/) where the
+`MultiSelect` wraps the `FormField` element and the `FormField` element wraps the children of
+`MultiSelect` to meet accessibility standards. This ensures the `label` text from `FormField` is
+attached to the `MultiSelect.Input` and read out as a group for voiceover.
+
+```tsx
+<MultiSelect items={options}>
+  <FormField label="Your Label">
+    <MultiSelect.Input onChange={e => handleChange(e)} id="contact-multi-select" />
+    <MultiSelect.Popper>
+      <MultiSelect.Card>
+        <MultiSelect.List>
+          {item => <MultiSelect.Item>{item.id}</MultiSelect.Item>}
+        </MultiSelect.List>
+      </MultiSelect.Card>
+    </MultiSelect.Popper>
+  </FormField>
+</MultiSelect>
+```
+
+<ExampleCodeBlock code={Basic} />
+
+### Complex
+
+When registering items in an array of objects, it's common to have the text that is displayed to the
+user be different than an id. In this example, `serverId` and `label` properties need to be remapped
+to `id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties
+`text` and `id`, there would be no need for this.
+
+<ExampleCodeBlock code={Complex} />
+
+### With Icons
+
+Use `MultiSelect.Item.Icon` to render an icon for a `MultiSelect.Item`. The `icon` prop for
+`MultiSelect.Item.Icon` accepts [system icons](/assets/system-icons/) from
+`@workday/canvas-system-icons-web`.
+
+> **Note: `data-id` on `MultiSelect.Item` must match the `id` property in your array of objects.
+> This ensures proper keyboard handling and type-ahead.**
+
+<ExampleCodeBlock code={Icons} />
+
+### Controlled
+
+The MultiSelect can be a controlled input component by passing the `value` and `onChange` to either
+the `<MultiSelect>` component or the `<MultiSelect.Input>` component. Internally, the
+`MultiSelect.Input` watches for changes on the `value` React prop as well as the `value` DOM
+property and will update the model accordingly.
+
+<ExampleCodeBlock code={Controlled} />
+
+### Searching
+
+A MultiSelect input can be used as a filter for results. Most likely this also means there are many
+items that may not be all be loaded from the server at once. The `useComboboxLoader` can be used to
+dynamically load items as the user navigates the available options.
+
+> **Note:** The behavior of search is experimental. The example should continue to work without
+> modification, but how the searchable input is presented to the user may change with user testing.
+> Don't rely too much on the exact behavior of the search input. For example, the search input may
+> be cleared when the user blurs the field.
+
+<ExampleCodeBlock code={Searching} />
diff --git a/modules/preview-react/multi-select/stories/MultiSelect.stories.ts b/modules/preview-react/multi-select/stories/MultiSelect.stories.ts
new file mode 100644
index 0000000000..6750a67f78
--- /dev/null
+++ b/modules/preview-react/multi-select/stories/MultiSelect.stories.ts
@@ -0,0 +1,43 @@
+import {Meta, StoryObj} from '@storybook/react';
+
+import mdxDoc from './MultiSelect.mdx';
+
+import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
+import {Basic as BasicExample} from './examples/Basic';
+import {Icons as IconsExample} from './examples/Icons';
+import {Complex as ComplexExample} from './examples/Complex';
+import {Controlled as ControlledExample} from './examples/Controlled';
+import {Searching as SearchingExample} from './examples/Searching';
+
+export default {
+  title: 'Preview/MultiSelect',
+  component: MultiSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      page: mdxDoc,
+    },
+  },
+} as Meta<typeof MultiSelect>;
+
+type Story = StoryObj<typeof MultiSelect>;
+
+export const Basic: Story = {
+  render: BasicExample,
+};
+
+export const Icons: Story = {
+  render: IconsExample,
+};
+
+export const Complex: Story = {
+  render: ComplexExample,
+};
+
+export const Controlled: Story = {
+  render: ControlledExample,
+};
+
+export const Searching: Story = {
+  render: SearchingExample,
+};
diff --git a/modules/preview-react/multi-select/stories/examples/Basic.tsx b/modules/preview-react/multi-select/stories/examples/Basic.tsx
new file mode 100644
index 0000000000..01267e597b
--- /dev/null
+++ b/modules/preview-react/multi-select/stories/examples/Basic.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
+
+const items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];
+
+export const Basic = () => {
+  return (
+    <>
+      <MultiSelect items={items}>
+        <FormField orientation="horizontal">
+          <FormField.Label>Toppings</FormField.Label>
+          <FormField.Input as={MultiSelect.Input} placeholder="Select Multiple" />
+          <MultiSelect.Popper>
+            <MultiSelect.Card>
+              <MultiSelect.List>
+                {item => (
+                  <MultiSelect.Item data-id={item}>
+                    <MultiSelect.Item.Text>{item}</MultiSelect.Item.Text>
+                  </MultiSelect.Item>
+                )}
+              </MultiSelect.List>
+            </MultiSelect.Card>
+          </MultiSelect.Popper>
+        </FormField>
+      </MultiSelect>
+    </>
+  );
+};
diff --git a/modules/preview-react/multi-select/stories/examples/Complex.tsx b/modules/preview-react/multi-select/stories/examples/Complex.tsx
new file mode 100644
index 0000000000..a247532c8b
--- /dev/null
+++ b/modules/preview-react/multi-select/stories/examples/Complex.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+import {system} from '@workday/canvas-tokens-web';
+
+import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
+
+const mainContentStyles = createStyles({
+  padding: system.space.x4,
+});
+
+const items = [
+  {id: '1', text: 'Cheese'},
+  {id: '2', text: 'Olives'},
+  {id: '3', text: 'Onions'},
+  {id: '4', text: 'Pepperoni'},
+  {id: '5', text: 'Peppers'},
+];
+
+export const Complex = () => {
+  const [value, setValue] = React.useState('');
+  const [label, setLabel] = React.useState('');
+  return (
+    <CanvasProvider>
+      <>
+        <form
+          onSubmit={e => {
+            console.log('form submitted');
+            e.preventDefault();
+          }}
+        >
+          <main className={mainContentStyles}>
+            <MultiSelect items={items} getId={i => i.id} getTextValue={i => i.text}>
+              <FormField orientation="horizontal">
+                <FormField.Label>Toppings</FormField.Label>
+                <FormField.Input
+                  as={MultiSelect.Input}
+                  placeholder="Select Multiple"
+                  name="toppings"
+                  onChange={e => {
+                    const value = e.currentTarget.value;
+                    setValue(value);
+                    setLabel(
+                      value
+                        .split(', ')
+                        .map(item => items.find(i => i.id === item)?.text || 'Not Found')
+                        .join(', ')
+                    );
+                  }}
+                  value={value}
+                />
+                <MultiSelect.Popper>
+                  <MultiSelect.Card>
+                    <MultiSelect.List>
+                      {item => (
+                        <MultiSelect.Item data-id={item.id}>
+                          <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
+                        </MultiSelect.Item>
+                      )}
+                    </MultiSelect.List>
+                  </MultiSelect.Card>
+                </MultiSelect.Popper>
+              </FormField>
+            </MultiSelect>
+          </main>
+        </form>
+        <div>Selected IDs: {value}</div>
+        <div>Selected Labels: {label}</div>
+      </>
+    </CanvasProvider>
+  );
+};
diff --git a/modules/preview-react/multi-select/stories/examples/Controlled.tsx b/modules/preview-react/multi-select/stories/examples/Controlled.tsx
new file mode 100644
index 0000000000..ae03e4886f
--- /dev/null
+++ b/modules/preview-react/multi-select/stories/examples/Controlled.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
+
+const items = [
+  {id: '1', text: 'Cheese'},
+  {id: '2', text: 'Olives'},
+  {id: '3', text: 'Onions'},
+  {id: '4', text: 'Pepperoni'},
+  {id: '5', text: 'Peppers'},
+];
+
+export const Controlled = () => {
+  const formRef = React.useRef<HTMLFormElement>(null);
+  const [value, setValue] = React.useState('1');
+  const [label, setLabel] = React.useState('Cheese');
+
+  function handleOnChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const value = event.currentTarget.value;
+    setValue(value);
+    setLabel(
+      value
+        .split(', ')
+        .map(item => items.find(i => i.id === item)?.text || 'Not Found')
+        .join(', ')
+    );
+  }
+
+  return (
+    <>
+      <form
+        onSubmit={e => {
+          console.log('form submitted');
+          e.preventDefault();
+        }}
+        ref={formRef}
+      >
+        <Flex gap="s" flexDirection="column">
+          <MultiSelect items={items}>
+            <FormField orientation="horizontal">
+              <FormField.Label>Toppings</FormField.Label>
+              <FormField.Input
+                as={MultiSelect.Input}
+                placeholder="Select Multiple"
+                name="toppings"
+                onChange={handleOnChange}
+                value={value}
+              />
+              <MultiSelect.Popper>
+                <MultiSelect.Card>
+                  <MultiSelect.List>
+                    {item => (
+                      <MultiSelect.Item data-id={item.id}>
+                        <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
+                      </MultiSelect.Item>
+                    )}
+                  </MultiSelect.List>
+                </MultiSelect.Card>
+              </MultiSelect.Popper>
+            </FormField>
+          </MultiSelect>
+          <Flex gap="s">
+            <SecondaryButton
+              onClick={e => {
+                setValue('1, 2, 3');
+              }}
+            >
+              Set to "Cheese, Olives, Onions" via React `value`
+            </SecondaryButton>
+            <SecondaryButton
+              onClick={e => {
+                const input = formRef.current.querySelector('[name=toppings]') as HTMLInputElement;
+                input.value = '1, 2';
+              }}
+            >
+              Set to "Cheese, Olives" via DOM `value`
+            </SecondaryButton>
+          </Flex>
+          <div>
+            <PrimaryButton type="submit">Submit</PrimaryButton>
+          </div>
+          <div>Selected ID: {value}</div>
+          <div>Selected Label: {label}</div>
+        </Flex>
+      </form>
+    </>
+  );
+};
diff --git a/modules/preview-react/multi-select/stories/examples/Icons.tsx b/modules/preview-react/multi-select/stories/examples/Icons.tsx
new file mode 100644
index 0000000000..8bc3b2e16f
--- /dev/null
+++ b/modules/preview-react/multi-select/stories/examples/Icons.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {
+  mediaPauseIcon,
+  mediaPlayIcon,
+  mediaTopicsIcon,
+  skipIcon,
+  previousIcon,
+} from '@workday/canvas-system-icons-web';
+
+import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
+
+const items = [
+  {id: '1', text: 'Pause', icon: mediaPauseIcon},
+  {id: '2', text: 'Play', icon: mediaPlayIcon},
+  {id: '3', text: 'Skip', icon: skipIcon},
+  {id: '4', text: 'Previous', icon: previousIcon},
+];
+
+export const Icons = () => {
+  return (
+    <MultiSelect items={items}>
+      <FormField orientation="horizontal">
+        <FormField.Label>Controls</FormField.Label>
+        <FormField.Input as={MultiSelect.Input} placeholder="Select Multiple" />
+        <MultiSelect.Popper>
+          <MultiSelect.Card>
+            <MultiSelect.List>
+              {item => (
+                <MultiSelect.Item data-id={item.id}>
+                  <MultiSelect.Item.Icon icon={item.icon} />
+                  <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
+                  <MultiSelect.Item.Icon icon={mediaTopicsIcon} />
+                </MultiSelect.Item>
+              )}
+            </MultiSelect.List>
+          </MultiSelect.Card>
+        </MultiSelect.Popper>
+      </FormField>
+    </MultiSelect>
+  );
+};
diff --git a/modules/preview-react/multi-select/stories/examples/Searching.tsx b/modules/preview-react/multi-select/stories/examples/Searching.tsx
new file mode 100644
index 0000000000..7d08f00652
--- /dev/null
+++ b/modules/preview-react/multi-select/stories/examples/Searching.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+
+import {system} from '@workday/canvas-tokens-web';
+
+import {createStyles} from '@workday/canvas-kit-styling';
+import {LoadReturn} from '@workday/canvas-kit-react/collection';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {useComboboxLoader} from '@workday/canvas-kit-react/combobox';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
+
+const mainContentStyles = createStyles({
+  padding: system.space.x4,
+});
+
+const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
+const fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];
+const options = Array(1000)
+  .fill('')
+  .map((_, index) => {
+    return {
+      id: `${index + 1}`,
+      text: `${colors[index % colors.length]} ${fruits[index % fruits.length]} ${index + 1}`,
+    };
+  });
+
+export const Searching = () => {
+  const [value, setValue] = React.useState('');
+
+  const {model, loader} = useComboboxLoader(
+    {
+      // You can start with any number that makes sense.
+      total: 0,
+
+      // Pick whatever number makes sense for your API
+      pageSize: 20,
+
+      // A load function that will be called by the loader. You must return a promise that returns
+      // an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache
+      async load({pageNumber, pageSize, filter}) {
+        return new Promise<LoadReturn<(typeof options)[0]>>(resolve => {
+          // simulate a server response by resolving after a period of time
+          setTimeout(() => {
+            // simulate paging and filtering based on pre-computed items
+            const start = (pageNumber - 1) * pageSize;
+            const end = start + pageSize;
+            const filteredItems = options.filter(item => {
+              if (filter === '' || typeof filter !== 'string') {
+                return true;
+              }
+              return item.text.toLowerCase().includes(filter.toLowerCase());
+            });
+
+            const total = filteredItems.length;
+            const items = filteredItems.slice(start, end);
+
+            resolve({
+              items,
+              total,
+            });
+          }, 300);
+        });
+      },
+      onShow() {
+        // The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is
+        // visible
+        loader.load();
+      },
+    },
+    useMultiSelectModel
+  );
+
+  return (
+    <CanvasProvider>
+      <>
+        <form
+          onSubmit={e => {
+            console.log('form submitted');
+            e.preventDefault();
+          }}
+        >
+          <main className={mainContentStyles}>
+            <MultiSelect model={model}>
+              <FormField orientation="horizontal">
+                <FormField.Label>Fruits</FormField.Label>
+                <FormField.Input
+                  as={MultiSelect.SearchInput}
+                  placeholder="Search"
+                  name="toppings"
+                  onChange={e => {
+                    setValue(e.currentTarget.value);
+                  }}
+                  value={value}
+                />
+                <MultiSelect.Popper>
+                  <MultiSelect.Card>
+                    {model.state.items.length === 0 && (
+                      <StyledMenuItem as="span">No Results Found</StyledMenuItem>
+                    )}
+                    {model.state.items.length > 0 && (
+                      <MultiSelect.List maxHeight={200}>
+                        {item =>
+                          item ? (
+                            <MultiSelect.Item data-id={item.id}>
+                              <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
+                            </MultiSelect.Item>
+                          ) : undefined
+                        }
+                      </MultiSelect.List>
+                    )}
+                  </MultiSelect.Card>
+                </MultiSelect.Popper>
+              </FormField>
+            </MultiSelect>
+          </main>
+        </form>
+        <div>Selected: {value}</div>
+      </>
+    </CanvasProvider>
+  );
+};
diff --git a/modules/preview-react/multi-select/stories/tsconfig.json b/modules/preview-react/multi-select/stories/tsconfig.json
new file mode 100644
index 0000000000..4fb6aa9472
--- /dev/null
+++ b/modules/preview-react/multi-select/stories/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../../../tsconfig.stories.json"
+}
diff --git a/modules/react/action-bar/stories/examples/OverflowActionBar.tsx b/modules/react/action-bar/stories/examples/OverflowActionBar.tsx
index 36aef0146f..42c31a728a 100644
--- a/modules/react/action-bar/stories/examples/OverflowActionBar.tsx
+++ b/modules/react/action-bar/stories/examples/OverflowActionBar.tsx
@@ -66,6 +66,7 @@ export const OverflowActionBar = () => {
             </SegmentedControl.Item>
           </SegmentedControl.List>
         </SegmentedControl>
+        <p>Selected: {containerWidth}</p>
       </footer>
     </div>
   );
diff --git a/modules/react/button/stories/button/Button.mdx b/modules/react/button/stories/button/Button.mdx
index 3b0f014346..78e6cfff5b 100644
--- a/modules/react/button/stories/button/Button.mdx
+++ b/modules/react/button/stories/button/Button.mdx
@@ -81,7 +81,8 @@ on a dark or colorful background such as `blueberry400`.
 
 ### Grow Prop
 
-The example below shows the use of the `grow` prop on different variants of buttons. This will set the width of the button to the width of its container.
+The example below shows the use of the `grow` prop on different variants of buttons. This will set
+the width of the button to the width of its container.
 
 <ExampleCodeBlock code={Grow} />
 
@@ -109,4 +110,4 @@ should be used for navigation.
 
 ## Specifications
 
-<Specifications file="Button.spec.ts" name="Button" />
+<Specifications file="Button.spec.tsx" name="Button" />
diff --git a/modules/react/collection/lib/ListBox.tsx b/modules/react/collection/lib/ListBox.tsx
index 7c3cac06fd..e65d059c48 100644
--- a/modules/react/collection/lib/ListBox.tsx
+++ b/modules/react/collection/lib/ListBox.tsx
@@ -52,7 +52,14 @@ export const useListBox = createElemPropsHook(useListModel)(model => {
 });
 
 const listBoxContainerStencil = createStencil({
-  base: {},
+  base: {
+    '& :where([data-part="list"])': {
+      display: 'flex',
+      flexDirection: 'column',
+      marginBlockStart: system.space.zero,
+      marginBlockEnd: system.space.zero,
+    },
+  },
   modifiers: {
     orientation: {
       vertical: {
@@ -60,20 +67,14 @@ const listBoxContainerStencil = createStencil({
       },
       horizontal: {
         overflowY: undefined,
+        '& :where([data-part="list"])': {
+          flexDirection: 'row',
+        },
       },
     },
   },
 });
 
-const listBoxStencil = createStencil({
-  base: {
-    display: 'flex',
-    flexDirection: 'column',
-    marginTop: system.space.zero,
-    marginBottom: system.space.zero,
-  },
-});
-
 /**
  * The `ListBox` component that offers vertical rendering of a collection in the form of a
  * 2-dimension list. It supports virtualization, rendering only visible items in the DOM while also
@@ -129,7 +130,7 @@ export const ListBox = createContainer('ul')({
           listBoxContainerStencil({orientation: model.state.orientation})
         )}
       >
-        <Element {...mergeStyles(elemProps, listBoxStencil())}>
+        <Element {...mergeStyles(elemProps)} data-part="list">
           {useListRenderItems(model, elemProps.children)}
         </Element>
       </div>
diff --git a/modules/react/collection/lib/useListItemRemoveable.ts b/modules/react/collection/lib/useListItemRemoveable.ts
new file mode 100644
index 0000000000..70bcf1561e
--- /dev/null
+++ b/modules/react/collection/lib/useListItemRemoveable.ts
@@ -0,0 +1,99 @@
+import React from 'react';
+import {useIsRTL, createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {useCursorListModel} from './useCursorListModel';
+import {keyboardEventToCursorEvents} from './keyUtils';
+
+// retry a function each frame so we don't rely on the timing mechanism of React's render cycle.
+const retryEachFrame = (cb: () => boolean, iterations: number) => {
+  if (cb() === false && iterations > 1) {
+    requestAnimationFrame(() => retryEachFrame(cb, iterations - 1));
+  }
+};
+
+/**
+ * This elemProps hook is used when a menu item is expected to be removed. It will advance the cursor to
+ * another item.
+ * This elemProps hook is used for cursor navigation by using [Roving
+ * Tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex). Only a single item in the
+ * collection has a tab stop. Pressing an arrow key moves the tab stop to a different item in the
+ * corresponding direction. See the [Roving Tabindex](#roving-tabindex) example. This elemProps hook
+ * should be applied to an `*.Item` component.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListItemRovingFocus, // adds the roving tabindex support
+ *   useListItemRegister
+ * );
+ * ```
+ */
+export const useListItemRemove = createElemPropsHook(useCursorListModel)(
+  (model, _ref, elemProps: {'data-id'?: string} = {}) => {
+    // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
+    // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
+    // empty array
+    const stateRef = React.useRef(model.state);
+    stateRef.current = model.state;
+
+    const keyElementRef = React.useRef<Element | null>(null);
+    const isRTL = useIsRTL();
+
+    React.useEffect(() => {
+      if (keyElementRef.current) {
+        const item = model.navigation.getItem(model.state.cursorId, model);
+        if (item) {
+          if (model.state.isVirtualized) {
+            model.state.UNSTABLE_virtual.scrollToIndex(item.index);
+          }
+
+          const selector = (id?: string) => {
+            return document.querySelector<HTMLElement>(`[data-focus-id="${`${id}-${item.id}`}"]`);
+          };
+
+          // In React concurrent mode, there could be several render attempts before the element we're
+          // looking for could be available in the DOM
+          retryEachFrame(() => {
+            // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
+            // do not agree on a generated ID
+            const clientId = keyElementRef.current?.getAttribute('data-focus-id')?.split('-')[0];
+            const element = selector(clientId) || selector(model.state.id);
+
+            element?.focus();
+            if (element) {
+              keyElementRef.current = null;
+            }
+            return !!element;
+          }, 5); // 5 should be enough, right?!
+        }
+      }
+      // we only want to run this effect if the cursor changes and not any other time
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [model.state.cursorId]);
+
+    // Roving focus must always have a focus stop to function correctly
+    React.useEffect(() => {
+      if (!model.state.cursorId && model.state.items.length) {
+        model.events.goTo({id: model.state.items[0].id});
+      }
+    }, [model.state.cursorId, model.state.items, model.events]);
+
+    return {
+      onKeyDown(event: React.KeyboardEvent) {
+        const handled = keyboardEventToCursorEvents(event, model, isRTL);
+        if (handled) {
+          event.preventDefault();
+          keyElementRef.current = event.currentTarget;
+        }
+      },
+      onClick() {
+        model.events.goTo({id: elemProps['data-id']!});
+      },
+      'data-focus-id': `${model.state.id}-${elemProps['data-id']}`,
+      tabIndex: !model.state.cursorId
+        ? 0 // cursor isn't known yet, be safe and mark this as focusable
+        : !!elemProps['data-id'] && model.state.cursorId === elemProps['data-id']
+        ? 0 // A name is known and cursor is here
+        : -1, // A name is known an cursor is somewhere else
+    };
+  }
+);
diff --git a/modules/react/collection/lib/useListLoader.ts b/modules/react/collection/lib/useListLoader.ts
index ad4e4cf726..a64589f16f 100644
--- a/modules/react/collection/lib/useListLoader.ts
+++ b/modules/react/collection/lib/useListLoader.ts
@@ -252,6 +252,7 @@ export function useListLoader<
         if (config.shouldLoad && !config.shouldLoad(params, prevState)) {
           return false;
         }
+
         load(params, loadRef.current, loadingRef.current)
           .then(updateItems)
           .then(() => {
diff --git a/modules/react/collection/lib/useSelectionListModel.tsx b/modules/react/collection/lib/useSelectionListModel.tsx
index b03f5bcec4..6363860bb9 100644
--- a/modules/react/collection/lib/useSelectionListModel.tsx
+++ b/modules/react/collection/lib/useSelectionListModel.tsx
@@ -105,7 +105,8 @@ export const useSelectionListModel = createModelHook({
     /**
      * Should be used with care and can be used to keep a model in sync with external controlled
      * inputs.
-     */ setSelectedIds(ids: 'all' | string[]) {
+     */
+    setSelectedIds(ids: 'all' | string[]) {
       setSelectedIds(ids);
     },
   };
diff --git a/modules/react/combobox/lib/hooks/useComboboxInput.ts b/modules/react/combobox/lib/hooks/useComboboxInput.ts
index 3028408604..8fe6b4303d 100644
--- a/modules/react/combobox/lib/hooks/useComboboxInput.ts
+++ b/modules/react/combobox/lib/hooks/useComboboxInput.ts
@@ -60,9 +60,8 @@ export const useComboboxInput = composeHooks(
         }
       },
       onBlur(event: React.FocusEvent) {
-        model.events.hide(event);
+        // model.events.hide(event);
       },
-      onChange: model.onChange,
       onClick(event: React.MouseEvent) {
         if (model.state.visibility === 'hidden') {
           model.events.setWidth(event.currentTarget.clientWidth);
diff --git a/modules/react/combobox/lib/hooks/useComboboxInputArbitrary.ts b/modules/react/combobox/lib/hooks/useComboboxInputArbitrary.ts
index 281b12906d..ae5dec9fdd 100644
--- a/modules/react/combobox/lib/hooks/useComboboxInputArbitrary.ts
+++ b/modules/react/combobox/lib/hooks/useComboboxInputArbitrary.ts
@@ -28,5 +28,9 @@ export const useComboboxInputArbitrary = createElemPropsHook(useComboboxModel)((
 
   return {
     ref: elementRef,
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
+      model.onChange?.(event);
+      model.onFilterChange?.(event);
+    },
   };
 });
diff --git a/modules/react/combobox/lib/hooks/useComboboxInputConstrained.ts b/modules/react/combobox/lib/hooks/useComboboxInputConstrained.ts
index 793af274c0..14d0b401af 100644
--- a/modules/react/combobox/lib/hooks/useComboboxInputConstrained.ts
+++ b/modules/react/combobox/lib/hooks/useComboboxInputConstrained.ts
@@ -51,7 +51,6 @@ export const useComboboxInputConstrained = createElemPropsHook(useComboboxModel)
     // Watch the `value` prop passed from React props and update the model accordingly
     React.useLayoutEffect(() => {
       if (formLocalRef.current && typeof reactValue === 'string') {
-        // const value = formLocalRef.current.value;
         if (reactValue !== formLocalRef.current.value) {
           model.events.setSelectedIds(reactValue ? reactValue.split(', ') : []);
         }
@@ -138,7 +137,10 @@ export const useComboboxInputConstrained = createElemPropsHook(useComboboxModel)
       ref: userElementRef,
       form: '', // We don't want the user input to be part of the form [elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements)
       value: null,
-      onChange: null,
+      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
+        model.onFilterChange?.(event);
+        return null; // Prevent further `onChange` callbacks from firing
+      },
       name: null,
       disabled,
       /**
@@ -149,7 +151,10 @@ export const useComboboxInputConstrained = createElemPropsHook(useComboboxModel)
         tabIndex: -1,
         'aria-hidden': true,
         ref: formElementRef,
-        onChange,
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
+          onChange?.(event);
+          model.onChange?.(event);
+        },
         name,
       },
     };
diff --git a/modules/react/combobox/lib/hooks/useComboboxLoader.ts b/modules/react/combobox/lib/hooks/useComboboxLoader.ts
index 5846832670..e5d60b306d 100644
--- a/modules/react/combobox/lib/hooks/useComboboxLoader.ts
+++ b/modules/react/combobox/lib/hooks/useComboboxLoader.ts
@@ -59,7 +59,7 @@ export const useComboboxLoader: typeof useListLoader = (config, modelHook) => {
         );
       },
       ...(modelHook.mergeConfig(config, {
-        onChange(event) {
+        onFilterChange(event) {
           const value = event.currentTarget.value;
           debounce(() => list.loader.updateFilter(value), 150);
         },
diff --git a/modules/react/combobox/lib/hooks/useComboboxModel.tsx b/modules/react/combobox/lib/hooks/useComboboxModel.tsx
index e590298fe5..bdbd794b2f 100644
--- a/modules/react/combobox/lib/hooks/useComboboxModel.tsx
+++ b/modules/react/combobox/lib/hooks/useComboboxModel.tsx
@@ -13,6 +13,9 @@ export const useInputModel = createModelHook({
   defaultConfig: {
     value: undefined as string | undefined,
 
+    onFilterChange(event: React.ChangeEvent<HTMLInputElement>) {
+      return;
+    },
     onChange(event: React.ChangeEvent<HTMLInputElement>) {
       return;
     },
@@ -21,6 +24,7 @@ export const useInputModel = createModelHook({
   const inputRef = React.createRef<HTMLInputElement>();
 
   return {
+    onFilterChange: config.onFilterChange,
     onChange: config.onChange,
     state: {value: config.value, inputRef},
     events: {},
diff --git a/modules/react/combobox/stories/Combobox.mdx b/modules/react/combobox/stories/Combobox.mdx
index f5e1731932..53b4030a8d 100644
--- a/modules/react/combobox/stories/Combobox.mdx
+++ b/modules/react/combobox/stories/Combobox.mdx
@@ -39,13 +39,16 @@ two separate `input` elements.
   the same as the user input. Any prop related to the function of forms will be passed here. For
   example, the `name` attribute will be passed here. The `ref` will be pointed to this element.
 
+`Select` and `MultiSelect` are examples of constrained comboboxes.
+
 ### Arbitrary
 
 An arbitrary combobox allows the user to enter any value. The list of options are presented as
 suggestions and selecting an option will prefill the combobox with the value of the option. The user
 is still allowed to modify the combobox even after an option is entered. With arbitrary comboboxes,
 there is only one `input` element. Arbitrary combobox inputs should use the
-[useComboboxInputArbitrary](#usecomboboxinputarbirary) hook.
+[useComboboxInputArbitrary](#usecomboboxinputarbirary) hook. Typeahead or `Autocomplete` are
+examples are arbitrary value comboboxes.
 
 ## Installation
 
diff --git a/modules/react/common/README.md b/modules/react/common/README.md
index 8e7d27eee9..43ea1761af 100644
--- a/modules/react/common/README.md
+++ b/modules/react/common/README.md
@@ -13,7 +13,7 @@ Includes:
 - [Canvas Kit Common](#canvas-kit-common)
   - [Installation](#installation)
   - [CanvasProvider](#canvasprovider)
-      - [Storybook Decorator](#storybook-decorator)
+    - [Storybook Decorator](#storybook-decorator)
     - [Input Provider](#input-provider)
       - [Definitions](#definitions)
       - [Usage](#usage)
@@ -39,10 +39,9 @@ Includes:
 
 ## CanvasProvider
 
-This is a higher order (wrapping) component intended for theming, RTL and
-[InputProvider](#inputprovider)This is the way most consumers should use the provider. This provider
-is required for our theming capabilities, so you can find more information in the
-[theming documentation](./lib/theming/README.md).
+This is a higher order (wrapping) component intended for theming, RTL. This is the way most
+consumers should use the provider. This provider is required for our theming capabilities, so you
+can find more information in the [theming documentation](./lib/theming/README.md).
 
 **We strongly encourage you to use this in your application to wrap all Canvas components.**
 
@@ -56,7 +55,7 @@ import {CanvasProvider} from '@workday/canvas-kit-react/common';
 #### Storybook Decorator
 
 We provide a [storybook decorator](../../utils/storybook/CanvasProviderDecorator.tsx) to wrap your
-stories in a `CanvasProvider` (including `InputProvider`) automatically.
+stories in a `CanvasProvider` automatically.
 
 Add this decorator to your `/.storybook/preview.js` configuration file to apply to all stories:
 
@@ -84,168 +83,16 @@ MyStory.decorators = [CanvasProviderDecorator];
 
 ---
 
-### Input Provider
+## Focus rings
 
-This is a higher order (wrapping) component for providing css-referencable data attributes for the
-users current input. Focus outlines are required for accessibility, but they can be unnecessary
-visual noise when using a mouse. This allows us to hide focus outlines (as desired) while the user
-is interacting with components using a mouse, touch, etc. and show them when keyboard navigation
-begins. This logic is heavily influenced by [what-input](https://github.com/ten1seven/what-input).
-You can use it to style your own components as well using the examples below.
+Use [:focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible), which will
+match when the user triggers focus via
 
-Preferably you would use the `CanvasProvider` as `InputProvider` functionality is included within
-it. However, if you want `InputProvider` functionality on it's own, you can use this.
+## RTL
 
-#### Definitions
-
-**Input**: The current input method from the user.
-
-- Equal to one of [`InputTypes`](#inputtypes)
-- Triggered by the following events:
-  - `keydown`
-  - `keyup`
-  - `mousedown`
-  - `MSPointerDown`
-  - `pointerdown`
-  - `touchstart`
-
-**Intent**: The potential next input method from the user. Mouse, pointer and mouse wheel events
-only demonstrate potential, but not actual, interaction and are treated separately. Note: if input
-type updates from the events above, the intent type will also be updated to the same value.
-
-- Equal to one of [`InputTypes`](#inputtypes)
-- Triggered by the following events:
-  - `mousemove`
-  - `MSPointerMove`
-  - `pointermove`
-  - `wheel`
-  - `mousewheel`
-  - `DOMMouseScroll`
-
-#### Usage
-
-As an external consumer, you should reference the following example.
-
-If you are contributing a component, you must add the necessary styling (see below) and use the
-[`InputProviderDecorator`](#storybook-decorator) in your stories. _DO NOT_ use an `InputProvider`
-directly within any Canvas Kit components.
-
-```tsx
-import * as React from 'react';
-import {InputProvider} from '@workday/canvas-kit-react';
-
-<div>
-  <InputProvider />
-  {/* All your components containing any Canvas components */}
-<div>;
-```
-
-This will result in these data attributes being added to the body element (by default)
-
-```html
-<body data-whatinput="mouse" data-whatinput="mouse">
-  <!-- All your components' HTML -->
-</body>
-```
-
-Now in any component within this wrapper, you can use these data attributes to customize the focus
-handling.
-
-**React/Emotion:**
-
-```js
-[`[data-whatinput='mouse'] &:focus,
-  [data-whatinput='touch'] &:focus,
-  [data-whatinput='pointer'] &:focus`]: {
-  outline: 'none',
-  border: 'none',
-},
-```
-
-**SCSS:**
-
-```scss
-[data-whatinput='mouse'],
-[data-whatinput='touch'],
-[data-whatinput='pointer'] {
-  .my-component:focus {
-    outline: none;
-    border: none;
-  }
-}
-```
-
-We provide a [helper](../../common/react/lib/styles/hideMouseFocus.ts) to hide the focus outlines on
-mouse input. Simply spread it in your styles (i.e. `...hideMouseFocus`).
-
-**Note:** It is best practice to show focus outlines by default and specifically hide them in the
-cases you would like (i.e. mouse/touch/pointer input).
-
-**Note:** Multiple InputProviders in the same tree are not supported. Any nested `InputProvider`
-will remove itself from the DOM (rendering only its children) and not attach any event listeners.
-
-#### Static Properties
-
-##### `InputTypes`
-
-| Theme      |
-| ---------- |
-| `Keyboard` |
-| `Mouse`    |
-| `Pointer`  |
-| `Touch`    |
-
----
-
-#### Component Props
-
-##### Required
-
-> None
-
-##### Optional
-
-###### `provideIntent: boolean`
-
-> Whether you would like the attribute `data-whatintent` rendered (see definition of intent above).
-> Note: detecting intent will add scroll and mouse positioning listeners which could affect
-> performance.
-
-###### `container: HTMLElement | React.RefObject<HTMLElement>`
-
-> The containing element in which the InputProvider attaches its data attributes. This property
-> should be set to an element that is an ancestor of all your Canvas components.
-
-Default: `document.body`
-
-#### Storybook Decorator
-
-We provide a [storybook decorator](../../utils/storybook/CanvasProviderDecorator.tsx) to wrap your
-stories in an `InputProvider` automatically.
-
-Add this decorator to your `/.storybook/preview.js` configuration file to apply to all stories:
-
-```js
-import {InputProviderDecorator} from '../utils/storybook';
-
-export const decorators = [InputProviderDecorator];
-```
-
-Or, add it to stories individually:
-
-```js
-import {InputProviderDecorator} from '../../../../utils/storybook';
-
-export default {
-  title: 'MyComponent',
-  component: MyComponent,
-  decorators: [InputProviderDecorator],
-};
-
-// OR
-
-MyStory.decorators = [InputProviderDecorator];
-```
+Use
+[CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)
+to support RTL in styling.
 
 ---
 
diff --git a/modules/react/common/lib/utils/mergeCallback.ts b/modules/react/common/lib/utils/mergeCallback.ts
index a44e961a10..d6eac70da1 100644
--- a/modules/react/common/lib/utils/mergeCallback.ts
+++ b/modules/react/common/lib/utils/mergeCallback.ts
@@ -13,10 +13,14 @@
  */
 export function mergeCallback<T extends Function>(callback1: T, callback2?: Function): T {
   if (callback2) {
-    return (((...args: any[]) => {
-      callback1.apply(null, args);
-      callback2.apply(null, args);
-    }) as any) as T;
+    return ((...args: any[]) => {
+      const result = callback1.apply(null, args);
+      // Similar to if a prop returns `null`, returning `null` from a callback prevents further
+      // callbacks from being fired.
+      if (result !== null) {
+        callback2.apply(null, args);
+      }
+    }) as any as T;
   } else {
     return callback1;
   }
diff --git a/modules/react/common/lib/utils/mergeProps.ts b/modules/react/common/lib/utils/mergeProps.ts
index 934a6385a4..44460343ea 100644
--- a/modules/react/common/lib/utils/mergeProps.ts
+++ b/modules/react/common/lib/utils/mergeProps.ts
@@ -55,6 +55,10 @@ export function mergeProps<const T extends object, const S extends object>(
         // merge style objects
         // @ts-ignore TS complains that key might not be on targetProps, but typeof returns
         returnProps[key] = {...targetProps[key], ...sourceProps[key]};
+      } else if (key === 'ref' && sourceProps.hasOwnProperty('ref')) {
+        // refs should never be overridden. This doesn't happen normally, but happens with hook
+        // composition
+        (returnProps as any).ref = (returnProps as any).ref || (sourceProps as any).ref;
       } else if (
         typeof sourceProps[key] === 'function' &&
         // @ts-ignore TS complains that key might not be on targetProps, but typeof returns
@@ -69,10 +73,6 @@ export function mergeProps<const T extends object, const S extends object>(
         typeof targetProps[key] === 'function'
       ) {
         // we don't support removing callbacks via `undefined`, so do nothing here
-      } else if (key === 'ref' && sourceProps.hasOwnProperty('ref')) {
-        // refs should never be overridden. This doesn't happen normally, but happens with hook
-        // composition
-        (returnProps as any).ref = (returnProps as any).ref || (sourceProps as any).ref;
         // @ts-ignore Typescript complains that key might not exist in `targetProps` since we're iterating over sourceProps. At runtime this doesn't matter
       } else if (targetProps[key] === null) {
         // target props is trying to disable the prop for whatever reason. Consider `null` a "remove this prop"
diff --git a/modules/react/icon/lib/SystemIcon.tsx b/modules/react/icon/lib/SystemIcon.tsx
index 5dba600b74..6798da7e44 100644
--- a/modules/react/icon/lib/SystemIcon.tsx
+++ b/modules/react/icon/lib/SystemIcon.tsx
@@ -155,7 +155,6 @@ export const systemIconStencil = createStencil({
     backgroundColor: '',
   },
   base: ({accentColor, backgroundColor, color}) => ({
-    [backgroundColor]: cssVar(backgroundColor, 'transparent'),
     '& .wd-icon-fill': {
       fill: cssVar(color, base.licorice200),
     },
diff --git a/modules/react/layout/lib/utils/buildStyleFns.ts b/modules/react/layout/lib/utils/buildStyleFns.ts
index 08e2af85a5..8837b32689 100644
--- a/modules/react/layout/lib/utils/buildStyleFns.ts
+++ b/modules/react/layout/lib/utils/buildStyleFns.ts
@@ -5,6 +5,7 @@ import {
   space as spaceTokens,
   type as typeTokens,
 } from '@workday/canvas-kit-react/tokens';
+import {wrapProperty} from '@workday/canvas-kit-styling';
 
 import {CanvasSystemPropValues, SystemPropNames, SystemPropValues} from './systemProps';
 
@@ -19,7 +20,7 @@ export type StyleFns = {
 };
 
 const getColor = (value: SystemPropValues['color']) => {
-  return colorTokens[value] || value;
+  return colorTokens[value] || wrapProperty(value);
 };
 
 const getDepth = (value: SystemPropValues['depth']) => {
@@ -27,23 +28,32 @@ const getDepth = (value: SystemPropValues['depth']) => {
 };
 
 const getShape = (value: SystemPropValues['shape']) => {
-  return borderRadiusTokens[value as CanvasSystemPropValues['shape']] || value;
+  return borderRadiusTokens[value as CanvasSystemPropValues['shape']] || wrapProperty(value);
 };
 
 const getSpace = (value: SystemPropValues['space']) => {
-  return spaceTokens[value as CanvasSystemPropValues['space']] || value;
+  return spaceTokens[value as CanvasSystemPropValues['space']] || wrapProperty(value);
 };
 
 const getFont = (value: SystemPropValues['font']) => {
-  return typeTokens.properties.fontFamilies[value as CanvasSystemPropValues['font']] || value;
+  return (
+    typeTokens.properties.fontFamilies[value as CanvasSystemPropValues['font']] ||
+    wrapProperty(value)
+  );
 };
 
 const getFontSize = (value: SystemPropValues['fontSize'] | string) => {
-  return typeTokens.properties.fontSizes[value as CanvasSystemPropValues['fontSize']] || value;
+  return (
+    typeTokens.properties.fontSizes[value as CanvasSystemPropValues['fontSize']] ||
+    wrapProperty(value)
+  );
 };
 
 const getFontWeight = (value: SystemPropValues['fontWeight'] | string) => {
-  return typeTokens.properties.fontWeights[value as CanvasSystemPropValues['fontWeight']] || value;
+  return (
+    typeTokens.properties.fontWeights[value as CanvasSystemPropValues['fontWeight']] ||
+    wrapProperty(value)
+  );
 };
 
 export function buildStyleFns(styleFnConfigs: StyleFnConfig[]): StyleFns {
diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts
index 41d7f1aa97..8c2f581fcd 100644
--- a/modules/react/select/lib/hooks/useSelectInput.ts
+++ b/modules/react/select/lib/hooks/useSelectInput.ts
@@ -19,11 +19,8 @@ import {useSelectModel} from './useSelectModel';
  */
 export const useSelectInput = composeHooks(
   createElemPropsHook(useSelectModel)(
-    (model, _ref, elemProps: {keySoFar?: string; placeholder?: string; value?: string} = {}) => {
-      const {elementRef, localRef} = useLocalRef(
-        // PopupModel says the targetRef is a `HTMLButtonElement`, but it is a `HTMLInputElement`
-        model.state.targetRef as any as React.Ref<HTMLInputElement>
-      );
+    (model, ref, elemProps: {keySoFar?: string; placeholder?: string; value?: string} = {}) => {
+      const {elementRef, localRef} = useLocalRef(ref as React.Ref<HTMLInputElement>);
 
       useResizeObserver({
         ref: localRef,
diff --git a/modules/react/testing/lib/ComponentStatesTable.tsx b/modules/react/testing/lib/ComponentStatesTable.tsx
index f269969554..5a8d1e8643 100644
--- a/modules/react/testing/lib/ComponentStatesTable.tsx
+++ b/modules/react/testing/lib/ComponentStatesTable.tsx
@@ -67,6 +67,10 @@ export const ComponentStatesTable = ({
                     {children({
                       ...row.props,
                       ...col.props,
+                      // join class names between rows and columns
+                      className: [row.props.className, col.props.className]
+                        .filter(c => c)
+                        .join(' '),
                     })}
                   </td>
                 );
diff --git a/modules/react/text-input/lib/InputGroup.tsx b/modules/react/text-input/lib/InputGroup.tsx
index d2b19a7743..624911f0b8 100644
--- a/modules/react/text-input/lib/InputGroup.tsx
+++ b/modules/react/text-input/lib/InputGroup.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {createStencil, handleCsProp, maybeWrapCSSVariables} from '@workday/canvas-kit-styling';
+import {createStencil, handleCsProp, wrapProperty} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 import {
   createContainer,
@@ -278,11 +278,11 @@ export const InputGroup = createContainer('div')({
   // `offsetEnd` arrays
   React.Children.forEach(children, child => {
     if (React.isValidElement<any>(child) && child.type === InputGroupInnerStart) {
-      const width = maybeWrapCSSVariables(child.props.width || system.space.x10);
+      const width = wrapProperty(child.props.width || system.space.x10);
       offsetsStart.push(width);
     }
     if (React.isValidElement<any>(child) && child.type === InputGroupInnerEnd) {
-      const width = maybeWrapCSSVariables(child.props.width || system.space.x10);
+      const width = wrapProperty(child.props.width || system.space.x10);
       offsetsEnd.push(width);
     }
   });
diff --git a/modules/react/text-input/lib/TextInput.tsx b/modules/react/text-input/lib/TextInput.tsx
index 7770ab30a4..c6939c146e 100644
--- a/modules/react/text-input/lib/TextInput.tsx
+++ b/modules/react/text-input/lib/TextInput.tsx
@@ -33,7 +33,8 @@ export const textInputStencil = createStencil({
     width: cssVar(width),
     minWidth: cssVar(width, calc.add(calc.multiply(system.space.x20, 3), system.space.x10)),
     color: system.color.text.default,
-    textOverflow: 'ellipsis',
+    textOverflow: 'ellipsis', // Always show ellipsis for long text inputs as long as it doesn't have focus
+
     '::-ms-clear': {
       display: 'none',
     },
diff --git a/modules/styling/lib/cs.ts b/modules/styling/lib/cs.ts
index 0b4a574cc3..52bda22288 100644
--- a/modules/styling/lib/cs.ts
+++ b/modules/styling/lib/cs.ts
@@ -37,7 +37,7 @@ type DefaultedVarsShape = Record<string, string> | Record<string, Record<string,
 /**
  * Wrap all unwrapped CSS Variables. For example, `{padding: '--foo'}` will be replaced with
  * `{padding: 'var(--foo)'}`. It also works on variables in the middle of the property. Takes any
- * string and returns a string with CSS variables wrapped if necesary.
+ * string and returns a string with CSS variables wrapped if necessary.
  *
  * ```ts
  * maybeWrapCSSVariables('1rem'); // 1rem
@@ -46,28 +46,25 @@ type DefaultedVarsShape = Record<string, string> | Record<string, Record<string,
  * maybeWrapCSSVariables('calc(--foo)'); // calc(var(--foo))
  * ```
  */
-export function maybeWrapCSSVariables<T>(input: T): T {
-  if (typeof input === 'string') {
-    // matches an string starting with `--` that isn't already wrapped in a `var()`. It tries to match
-    // any character that isn't a valid separator in CSS
-    return input.replace(
-      /([a-z]*[ (]*)(--[^\s;,'})]+)/gi,
-      (match: string, prefix: string, variable: string) => {
-        if (prefix === 'var(') {
-          return match;
-        }
-        return `${prefix}var(${variable})`;
+function maybeWrapCSSVariables(input: string): string {
+  // matches an string starting with `--` that isn't already wrapped in a `var()`. It tries to match
+  // any character that isn't a valid separator in CSS
+  return input.replace(
+    /([a-z]*[ (]*)(--[^\s;,'})]+)/gi,
+    (match: string, prefix: string, variable: string) => {
+      if (prefix === 'var(') {
+        return match;
       }
-    ) as T;
-  }
-  return input;
+      return `${prefix}var(${variable})`;
+    }
+  );
 }
 
-function convertProperty<T>(value: T): T {
+export function wrapProperty<T>(value: T): T {
   // Handle the case where the value is a variable without the `var()` wrapping function. It happens
   // enough that it makes sense to automatically wrap.
   if (typeof value === 'string') {
-    return maybeWrapCSSVariables(value) as any as T;
+    return maybeWrapCSSVariables(value) as T;
   }
   return value;
 }
@@ -76,17 +73,17 @@ function convertProperty<T>(value: T): T {
  * Walks through all the properties and values of a style and converts properties and/or values that
  * need special processing. An example might be using a CSS variable without a `var()` wrapping.
  */
-function convertAllProperties<T extends unknown>(obj: T): T {
+export function wrapAllProperties<T extends unknown>(obj: T): T {
   if (typeof obj === 'object') {
     const converted = {};
     for (const key in obj) {
       if ((obj as Object).hasOwnProperty(key)) {
-        (converted as any)[key] = convertAllProperties(obj[key]);
+        (converted as any)[key] = wrapAllProperties(obj[key]);
       }
     }
     return converted as T;
   }
-  return convertProperty(obj);
+  return wrapProperty(obj);
 }
 
 export type CS = string | Record<string, string>;
@@ -197,7 +194,7 @@ export function createVars<T extends string | DefaultedVarsShape, ID extends str
     args.forEach(key => {
       if (input[key as ToString<T>]) {
         // @ts-ignore TS complains about `key` not in object `{}`
-        vars[result[key]] = convertProperty(input[key]);
+        vars[result[key]] = wrapProperty(input[key]);
       }
     });
     return vars;
@@ -334,7 +331,7 @@ export function createDefaultedVars<T extends DefaultedVarsShape, ID extends str
       if (typeof (input as any)[key] === 'string') {
         if ((result as any)[key]) {
           // Don't add an undefined key
-          vars[(result as any)[key]] = convertProperty((input as any)[key]);
+          vars[(result as any)[key]] = wrapProperty((input as any)[key]);
         }
       }
       if (typeof (input as any)[key] === 'object') {
@@ -342,7 +339,7 @@ export function createDefaultedVars<T extends DefaultedVarsShape, ID extends str
           if (typeof (input as any)[key][subKey] === 'string') {
             // Don't add an undefined key
             if ((result as any)[key][subKey]) {
-              vars[(result as any)[key][subKey]] = convertProperty((input as any)[key][subKey]);
+              vars[(result as any)[key][subKey]] = wrapProperty((input as any)[key][subKey]);
             }
           }
         }
@@ -381,7 +378,7 @@ type ModifierConfig = Record<string, Record<string, CS>>;
  * Helper type to convert `'true'` into `true` for boolean modifiers which are a pain to type as a
  * prop.
  */
-type MaybeBoolean<T> = T extends 'true' ? boolean : T extends 'false' ? boolean : T;
+type MaybeBoolean<T> = T extends 'true' | 'false' ? T | boolean : T;
 
 type ModifierValues<T extends ModifierConfig> = {
   [P in keyof T]: MaybeBoolean<keyof T[P]>;
@@ -552,9 +549,9 @@ export function csToProps(input: CSToPropsInput): CsToPropsReturn {
     const cssVars: Record<string, string> = {};
     for (const key in input) {
       if (key.startsWith('--')) {
-        cssVars[key] = maybeWrapCSSVariables((input as any)[key] ?? '');
+        cssVars[key] = wrapAllProperties((input as any)[key]);
       } else {
-        (staticStyles as any)[key] = maybeWrapCSSVariables((input as any)[key] ?? '');
+        (staticStyles as any)[key] = wrapAllProperties((input as any)[key]);
         hasStaticStyles = true;
       }
     }
@@ -650,7 +647,7 @@ export function createStyles(
         return instance.css(input as CastStyleProps);
       }
 
-      const convertedStyles = convertAllProperties(input);
+      const convertedStyles = wrapAllProperties(input);
 
       // We want to call `serializeStyles` directly and ignore the hash generated so we can have
       // more predictable style merging. If 2 different files define the same style properties, the
@@ -987,7 +984,7 @@ export interface StencilConfig<
   defaultModifiers?: [E] extends [never]
     ? StencilDefaultModifierReturn<M>
     : E extends BaseStencil<infer ME, any, any, any>
-    ? StencilDefaultModifierReturn<M & ME>
+    ? StencilDefaultModifierReturn<ME & M>
     : undefined;
 }
 
diff --git a/modules/styling/spec/cs.spec.tsx b/modules/styling/spec/cs.spec.tsx
index 248ebdbd8a..4fd0919606 100644
--- a/modules/styling/spec/cs.spec.tsx
+++ b/modules/styling/spec/cs.spec.tsx
@@ -914,7 +914,7 @@ describe('cs', () => {
       type Args = Exclude<Parameters<typeof myStencil>[0], undefined>;
 
       expectTypeOf<Args>().toHaveProperty('grow');
-      expectTypeOf<Args['grow']>().toEqualTypeOf<boolean | undefined>();
+      expectTypeOf<Args['grow']>().toEqualTypeOf<boolean | 'true' | 'false' | undefined>();
 
       // Make sure the function call passes type checks. Even though we tested the type parameter,
       // the actual function call may still fail type checks. We need to make sure type conditionals
@@ -1019,7 +1019,7 @@ describe('cs', () => {
         type Args = Exclude<Parameters<typeof extendedStencil>[0], undefined>;
         expectTypeOf<Args>().toEqualTypeOf<{
           size?: 'large';
-          extra?: boolean;
+          extra?: boolean | 'true' | 'false';
         }>();
 
         // make sure it actually works when calling it. The type test can pass via extracting parameters
@@ -1081,7 +1081,7 @@ describe('cs', () => {
         type Args = Exclude<Parameters<typeof extendedStencil>[0], undefined>;
         expectTypeOf<Args>().toEqualTypeOf<{
           size?: 'large';
-          extra?: boolean;
+          extra?: boolean | 'true' | 'false';
           color?: string;
           background?: string;
         }>();
@@ -1162,7 +1162,7 @@ describe('cs', () => {
         type Args = Exclude<Parameters<typeof extendedStencil>[0], undefined>;
         expectTypeOf<Args>().toEqualTypeOf<{
           size?: 'large';
-          extra?: boolean;
+          extra?: boolean | 'true';
         }>();
       });