@workday/canvas-kit-preview-react 12.1.0-945-next.0 → 12.1.0

package/dist/commonjs/divider/lib/Divider.js

@@ -32,7 +32,7 @@ exports.dividerStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         space: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.space.x4),
     },
-    base: { name: "tiba2", styles: "--space-divider-156e29:var(--cnvs-sys-space-x4);box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-divider);margin:calc(var(--space-divider-156e29) / 2) 0;" }
+    base: { name: "egsm2", styles: "--space-divider-156e29:var(--cnvs-sys-space-x4);box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-divider);margin:calc(var(--space-divider-156e29) / 2) 0;" }
 }, "divider-156e29");
 /**
  * # Divider

package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js

@@ -49,15 +49,15 @@ const AI_COLORS = {
 /**
  * The animation for the sparkle.
  */
-const LOADING_ANIMATION = (0, canvas_kit_styling_1.keyframes)({ name: "tiba3", styles: "0%, 79%, 100%{opacity:0.2;transform:scale(0.55);}27%{opacity:1;transform:scale(1);}53%{opacity:0.6;transform:scale(0.7);}" });
-const loadingSparklesIconStyles = (0, canvas_kit_styling_1.createStyles)({ name: "tiba4", styles: "animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-tiba3;animation-timing-function:ease-in-out;.wd-sparkle-fill{fill:#8C17D2;}&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}" });
+const LOADING_ANIMATION = (0, canvas_kit_styling_1.keyframes)({ name: "egsm3", styles: "0%, 79%, 100%{opacity:0.2;transform:scale(0.55);}27%{opacity:1;transform:scale(1);}53%{opacity:0.6;transform:scale(0.7);}" });
+const loadingSparklesIconStyles = (0, canvas_kit_styling_1.createStyles)({ name: "egsm4", styles: "animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-egsm3;animation-timing-function:ease-in-out;.wd-sparkle-fill{fill:#8C17D2;}&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}" });
 /**
  * An individual loading sparkle. ✨
  */
 const Sparkle = () => {
     return (React.createElement(icon_1.SystemIcon, { icon: sparkleIcon_1.sparkleIcon, cs: [loadingSparklesIconStyles], size: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.space.x3) }));
 };
-const loadingSparklesStyles = (0, canvas_kit_styling_1.createStyles)({ name: "tiba5", styles: "display:inline-flex;gap:0.0625rem;" });
+const loadingSparklesStyles = (0, canvas_kit_styling_1.createStyles)({ name: "egsm5", styles: "display:inline-flex;gap:0.0625rem;" });
 /**
  * A simple component that displays three horizontal sparkles, to be used when an AI operation is in progress.
  */

package/dist/commonjs/multi-select/lib/MultiSelect.d.ts

@@ -309,6 +309,45 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
         inputRef: React.RefObject<HTMLInputElement>;
         width: number;
     }) => void) | undefined;
+    onRemove?: ((data: {
+        id: string;
+        nextId?: string | undefined;
+        event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+    }, prevState: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: {
+            virtualItems: import("@workday/canvas-kit-react/collection/lib/react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("@workday/canvas-kit-react/collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("@workday/canvas-kit-react/collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        mode: "multiple" | "single";
+        value: string | undefined;
+        inputRef: React.RefObject<HTMLInputElement>;
+        width: number;
+    }) => void) | undefined;
     onGoTo?: ((data: {
         id: string;
     }, prevState: {
@@ -1093,6 +1132,45 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
         inputRef: React.RefObject<HTMLInputElement>;
         width: number;
     }) => boolean) | undefined;
+    shouldRemove?: ((data: {
+        id: string;
+        nextId?: string | undefined;
+        event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+    }, state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: {
+            virtualItems: import("@workday/canvas-kit-react/collection/lib/react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("@workday/canvas-kit-react/collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("@workday/canvas-kit-react/collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        mode: "multiple" | "single";
+        value: string | undefined;
+        inputRef: React.RefObject<HTMLInputElement>;
+        width: number;
+    }) => boolean) | undefined;
     shouldGoTo?: ((data: {
         id: string;
     }, state: {
@@ -1641,6 +1719,11 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
         selectAll(): void;
         unselectAll(): void;
         setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -1672,9 +1755,9 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
     getId: (item: any) => string;
     selected: {
         state: {
+            cursorId: string;
             selectedIds: string[] | "all";
             unselectedIds: string[];
-            cursorId: string;
             columnCount: number;
             pageSizeRef: React.MutableRefObject<number>;
             cursorIndexRef: {
@@ -1703,6 +1786,11 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -1783,6 +1871,11 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -1814,9 +1907,9 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
         getId: (item: any) => string;
         selected: {
             state: {
+                cursorId: string;
                 selectedIds: string[] | "all";
                 unselectedIds: string[];
-                cursorId: string;
                 columnCount: number;
                 pageSizeRef: React.MutableRefObject<number>;
                 cursorIndexRef: {
@@ -1845,6 +1938,11 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;
@@ -1925,6 +2023,11 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -1956,9 +2059,9 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
         getId: (item: any) => string;
         selected: {
             state: {
+                cursorId: string;
                 selectedIds: string[] | "all";
                 unselectedIds: string[];
-                cursorId: string;
                 columnCount: number;
                 pageSizeRef: React.MutableRefObject<number>;
                 cursorIndexRef: {
@@ -1987,6 +2090,11 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;
@@ -2061,6 +2169,11 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -2138,6 +2251,11 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -2169,9 +2287,9 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
         getId: (item: any) => string;
         selected: {
             state: {
+                cursorId: string;
                 selectedIds: string[] | "all";
                 unselectedIds: string[];
-                cursorId: string;
                 columnCount: number;
                 pageSizeRef: React.MutableRefObject<number>;
                 cursorIndexRef: {
@@ -2200,6 +2318,11 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;
@@ -2278,6 +2401,11 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -2353,6 +2481,11 @@ export declare const MultiSelect: import("@workday/canvas-kit-react/common").Com
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;

package/dist/commonjs/multi-select/lib/MultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,iBAAiB;CAAG;AAEpE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBtB,CAAC"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,iBAAiB;CAAG;AAEpE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBtB,CAAC"}

package/dist/commonjs/multi-select/lib/MultiSelectCard.d.ts

@@ -56,6 +56,11 @@ export declare const useMultiSelectCard: import("@workday/canvas-kit-react/commo
         selectAll(): void;
         unselectAll(): void;
         setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -87,9 +92,9 @@ export declare const useMultiSelectCard: import("@workday/canvas-kit-react/commo
     getId: (item: any) => string;
     selected: {
         state: {
+            cursorId: string;
             selectedIds: string[] | "all";
             unselectedIds: string[];
-            cursorId: string;
             columnCount: number;
             pageSizeRef: React.MutableRefObject<number>;
             cursorIndexRef: {
@@ -118,6 +123,11 @@ export declare const useMultiSelectCard: import("@workday/canvas-kit-react/commo
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -198,6 +208,11 @@ export declare const MultiSelectCard: import("@workday/canvas-kit-react/common")
         selectAll(): void;
         unselectAll(): void;
         setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -229,9 +244,9 @@ export declare const MultiSelectCard: import("@workday/canvas-kit-react/common")
     getId: (item: any) => string;
     selected: {
         state: {
+            cursorId: string;
             selectedIds: string[] | "all";
             unselectedIds: string[];
-            cursorId: string;
             columnCount: number;
             pageSizeRef: React.MutableRefObject<number>;
             cursorIndexRef: {
@@ -260,6 +275,11 @@ export declare const MultiSelectCard: import("@workday/canvas-kit-react/common")
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;

package/dist/commonjs/multi-select/lib/MultiSelectCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectCard.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAGL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAKpD,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC;CAAG;AAE/E;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAI7B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAS1B,CAAC"}
+{"version":3,"file":"MultiSelectCard.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAGL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAKpD,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC;CAAG;AAE/E;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAI7B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAS1B,CAAC"}

package/dist/commonjs/multi-select/lib/MultiSelectInput.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CSProps } from '@workday/canvas-kit-styling';
+import { MultiSelectedItemProps } from './MultiSelectedItem';
 export declare const multiSelectStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
 export declare const useMultiSelectInput: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
@@ -50,6 +51,11 @@ export declare const useMultiSelectInput: import("@workday/canvas-kit-react/comm
         selectAll(): void;
         unselectAll(): void;
         setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -81,9 +87,9 @@ export declare const useMultiSelectInput: import("@workday/canvas-kit-react/comm
     getId: (item: any) => string;
     selected: {
         state: {
+            cursorId: string;
             selectedIds: string[] | "all";
             unselectedIds: string[];
-            cursorId: string;
             columnCount: number;
             pageSizeRef: React.MutableRefObject<number>;
             cursorIndexRef: {
@@ -112,6 +118,11 @@ export declare const useMultiSelectInput: import("@workday/canvas-kit-react/comm
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -180,7 +191,7 @@ export declare const useMultiSelectInput: import("@workday/canvas-kit-react/comm
     readonly ref: (instance: unknown) => void;
     readonly onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
 }, {}>>>>>>>, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, {}>>>>>>>>;
-export interface MultiSelectInputProps extends CSProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'className' | 'style' | 'aria-labelledby'> {
+export interface MultiSelectInputProps extends CSProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'className' | 'style' | 'aria-labelledby'>, Pick<MultiSelectedItemProps, 'removeLabel'> {
 }
 export declare const MultiSelectInput: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("@workday/canvas-kit-react/text-input").TextInputProps> & {
     ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
@@ -233,6 +244,11 @@ export declare const MultiSelectInput: import("@workday/canvas-kit-react/common"
         selectAll(): void;
         unselectAll(): void;
         setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -264,9 +280,9 @@ export declare const MultiSelectInput: import("@workday/canvas-kit-react/common"
     getId: (item: any) => string;
     selected: {
         state: {
+            cursorId: string;
             selectedIds: string[] | "all";
             unselectedIds: string[];
-            cursorId: string;
             columnCount: number;
             pageSizeRef: React.MutableRefObject<number>;
             cursorIndexRef: {
@@ -295,6 +311,11 @@ export declare const MultiSelectInput: import("@workday/canvas-kit-react/common"
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -375,6 +396,11 @@ export declare const MultiSelectSearchInput: import("@workday/canvas-kit-react/c
         selectAll(): void;
         unselectAll(): void;
         setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -406,9 +432,9 @@ export declare const MultiSelectSearchInput: import("@workday/canvas-kit-react/c
     getId: (item: any) => string;
     selected: {
         state: {
+            cursorId: string;
             selectedIds: string[] | "all";
             unselectedIds: string[];
-            cursorId: string;
             columnCount: number;
             pageSizeRef: React.MutableRefObject<number>;
             cursorIndexRef: {
@@ -437,6 +463,11 @@ export declare const MultiSelectSearchInput: import("@workday/canvas-kit-react/c
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;

package/dist/commonjs/multi-select/lib/MultiSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAgB,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAcjF,eAAO,MAAM,kBAAkB,yIAiE7B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAGT,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sMA2BzC,CAAC;AA4CF,MAAM,WAAW,qBACf,SAAQ,OAAO,EACb,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,CACvD;CAAG;AAER,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyC5B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8ClC,CAAC"}
+{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAgB,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAMjF,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAG3D,eAAO,MAAM,kBAAkB,yIAiE7B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAGT,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sMA2BzC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,OAAO,EACb,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,CACvD,EACD,IAAI,CAAC,sBAAsB,EAAE,aAAa,CAAC;CAAG;AAElD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoC5B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8ClC,CAAC"}

package/dist/commonjs/multi-select/lib/MultiSelectInput.js

@@ -11,13 +11,12 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const text_input_1 = require("@workday/canvas-kit-react/text-input");
 const icon_1 = require("@workday/canvas-kit-react/icon");
-const collection_1 = require("@workday/canvas-kit-react/collection");
 const combobox_1 = require("@workday/canvas-kit-react/combobox");
-const pill_1 = require("@workday/canvas-kit-preview-react/pill");
 const useMultiSelectModel_1 = require("./useMultiSelectModel");
+const MultiSelectedList_1 = require("./MultiSelectedList");
 exports.multiSelectStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "tiba1w", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);min-height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;margin:0;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-within{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);}& [data-part=\"user-input\"]{font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);background-color:var(--cnvs-sys-color-bg-transparent);border-radius:var(--cnvs-sys-shape-x1);border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}& :where([data-part=\"form-input\"]){position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-divider);height:1px;margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);flex-wrap:wrap;}" }
-}, "multi-select-012ac9");
+    base: { name: "egsm1w", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);min-height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;margin:0;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-within{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);}& [data-part=\"user-input\"]{font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);background-color:var(--cnvs-sys-color-bg-transparent);border-radius:var(--cnvs-sys-shape-x1);border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}& :where([data-part=\"form-input\"]){position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-divider);height:1px;margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);flex-wrap:wrap;}" }
+}, "multi-select-5f5351");
 exports.useMultiSelectInput = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useMultiSelectModel_1.useMultiSelectModel)((model, ref) => {
     return {
         onKeyDown(event) {
@@ -42,67 +41,31 @@ exports.useMultiSelectInput = (0, common_1.composeHooks)((0, common_1.createElem
         },
     };
 }), combobox_1.useComboboxInputConstrained, combobox_1.useComboboxInput);
-const removeItem = (id, model) => {
-    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 = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(collection_1.useListModel)((model, ref, elemProps) => {
-    return {
-        onKeyDown(event) {
-            const id = event.currentTarget.dataset.id || '';
-            if (event.key === 'Backspace' || event.key === 'Delete') {
-                model.events.select({ id });
-                removeItem(id, model);
-            }
-        },
-        onClick(event) {
-            const id = event.currentTarget.dataset.id || '';
-            model.events.select({ id });
-        },
-    };
-}), collection_1.useListItemRovingFocus, collection_1.useListItemRegister);
-const MultiSelectedItem = (0, common_1.createSubcomponent)('span')({
-    modelHook: collection_1.useListModel,
-    elemPropsHook: useMultiSelectedItem,
-})(({ children, ref, ...elemProps }, Element) => {
-    return (react_1.default.createElement(pill_1.Pill, { as: Element, variant: "removable" },
-        children,
-        react_1.default.createElement(pill_1.Pill.IconButton, { ref: ref, ...elemProps })));
-});
 exports.MultiSelectInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
     modelHook: useMultiSelectModel_1.useMultiSelectModel,
     elemPropsHook: exports.useMultiSelectInput,
-})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, formInputProps, ...elemProps }, Element, model) => {
+})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ...elemProps }, Element, model) => {
     return (react_1.default.createElement("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectStencil)({})) },
         react_1.default.createElement(text_input_1.InputGroup, null,
             react_1.default.createElement(text_input_1.InputGroup.Input, { "data-part": "form-input", ...formInputProps }),
             react_1.default.createElement(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, ...elemProps }),
             react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none" },
                 react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }))),
-        model.selected.state.items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { "data-part": "separator" }),
-            react_1.default.createElement(collection_1.ListBox, { model: model.selected, as: "div", role: "listbox", "aria-orientation": "horizontal", "aria-labelledby": ariaLabelledBy }, item => react_1.default.createElement(MultiSelectedItem, null, item.textValue)))) : null));
+        react_1.default.createElement(MultiSelectedList_1.MultiSelectedList, { removeLabel: removeLabel })));
 });
 exports.MultiSelectSearchInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
     modelHook: useMultiSelectModel_1.useMultiSelectModel,
     elemPropsHook: exports.useMultiSelectInput,
-})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, formInputProps, ref, ...elemProps }, Element, model) => {
+})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, ...elemProps }, Element, model) => {
     return (react_1.default.createElement("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectStencil)({})) },
         react_1.default.createElement(text_input_1.InputGroup, null,
             react_1.default.createElement(text_input_1.InputGroup.InnerStart, { pointerEvents: "none", width: canvas_tokens_web_1.system.space.x8 },
                 react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.searchIcon, size: canvas_tokens_web_1.system.space.x4 })),
-            react_1.default.createElement(text_input_1.InputGroup.Input, { "data-part": "form-input", ...formInputProps }),
+            react_1.default.createElement(text_input_1.InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }),
             react_1.default.createElement(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, ...elemProps }),
-            react_1.default.createElement(text_input_1.InputGroup.InnerEnd, null,
+            react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { width: canvas_tokens_web_1.system.space.x4 },
                 react_1.default.createElement(text_input_1.InputGroup.ClearButton, null)),
             react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none" },
                 react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }))),
-        model.selected.state.items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { "data-part": "separator" }),
-            react_1.default.createElement(collection_1.ListBox, { model: model.selected, as: "div", role: "listbox", "aria-orientation": "horizontal", "aria-labelledby": ariaLabelledBy }, item => react_1.default.createElement(MultiSelectedItem, null, item.textValue)))) : null));
+        react_1.default.createElement(MultiSelectedList_1.MultiSelectedList, { removeLabel: removeLabel })));
 });