@khanacademy/wonder-blocks-dropdown 10.11.7 → 10.12.0

package/.turbo/turbo-build$colon$css.log

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-dropdown@10.11.7 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
+> @khanacademy/wonder-blocks-dropdown@10.12.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
 > pnpm exec wonder-blocks-tokens .
 
 CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown/dist/css

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 10.12.0
+
+### Minor Changes
+
+- ded1be1: Allow more aria attributes on combobox & consume "style" prop that was ignored
+
+### Patch Changes
+
+- b67be5c: SingleSelect / MultiSelect: label the listbox with the same name as the opener so the options have context in a screen reader. The name comes from the opener's associated `<label>` element (e.g. from `LabeledField`), the select's `aria-labelledby`, or its `aria-label`.
+
+## 10.11.8
+
+### Patch Changes
+
+- Updated dependencies [357a19c]
+- Updated dependencies [6e4158c]
+    - @khanacademy/wonder-blocks-tokens@17.3.0
+    - @khanacademy/wonder-blocks-cell@6.2.10
+    - @khanacademy/wonder-blocks-clickable@8.2.9
+    - @khanacademy/wonder-blocks-form@7.6.10
+    - @khanacademy/wonder-blocks-icon@5.3.23
+    - @khanacademy/wonder-blocks-icon-button@11.4.5
+    - @khanacademy/wonder-blocks-modal@8.7.11
+    - @khanacademy/wonder-blocks-pill@3.1.73
+    - @khanacademy/wonder-blocks-search-field@5.1.80
+    - @khanacademy/wonder-blocks-styles@0.2.53
+    - @khanacademy/wonder-blocks-typography@5.0.3
+    - @khanacademy/wonder-blocks-announcer@1.1.1
+
 ## 10.11.7
 
 ### Patch Changes

package/dist/components/combobox.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StyleType } from "@khanacademy/wonder-blocks-core";
+import { type AriaAttributes, type StyleType } from "@khanacademy/wonder-blocks-core";
 import { PhosphorIcon } from "@khanacademy/wonder-blocks-icon";
 import { ComboboxLabels, MaybeValueOrValues, OptionItemComponent } from "../util/types";
 type Props = {
@@ -87,10 +87,6 @@ type Props = {
      * An optional decorative icon to display at the start of the combobox.
      */
     startIcon?: React.ReactElement<React.ComponentProps<typeof PhosphorIcon>> | null;
-    /**
-     * An optional aria-label to display on the combobox.
-     */
-    "aria-label"?: string;
 };
 /**
  * A `Combobox` is an input widget that has an associated `listbox`. This
@@ -104,5 +100,5 @@ type Props = {
  *   Open button (🔽) is pressed.
  * - It is displayed when the combobox receives focus.
  */
-export default function Combobox({ autoComplete, children, disabled, error, id, labels, onChange, onToggle, opened, placeholder, selectionType, startIcon, testId, value, "aria-label": ariaLabel, }: Props): React.JSX.Element;
+export default function Combobox({ autoComplete, children, disabled, error, id, labels, onChange, onToggle, opened, placeholder, selectionType, startIcon, testId, value, loading, style, ...ariaAttrs }: Props & AriaAttributes): React.JSX.Element;
 export {};

package/dist/es/index.js

@@ -54,9 +54,9 @@ function modifyMaxHeight({state,options}){const overflow=detectOverflow(state,op
 
 const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxis:true,tether:false}},maxHeightModifier];const DropdownPopper=function({children,alignment="left",onPopperElement,referenceElement}){const modalHost=maybeGetPortalMountedModalHostElement(referenceElement)||document.querySelector("body");if(!modalHost){return null}const placement=alignment==="left"?"bottom-start":alignment==="right"?"bottom-end":alignment;return ReactDOM.createPortal(jsx(Popper,{innerRef:node=>{if(node&&onPopperElement){onPopperElement(node);}},referenceElement:referenceElement,strategy:"fixed",placement:placement,modifiers:modifiers,children:({placement,ref,style,hasPopperEscaped,isReferenceHidden})=>{const shouldHidePopper=!!(hasPopperEscaped||isReferenceHidden);return jsx("div",{ref:ref,style:{...style,maxInlineSize:"100%"},"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
 
-function getStringForKey(key){if(key.length===1||!/^[A-Z]/i.test(key)){return key}return ""}function debounce(callback,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);callback(...args);};clearTimeout(timeout);timeout=setTimeout(later,wait);}}function isString(x){return typeof x==="string"}function getLabel(props){if(isString(props.label)){return props.label}if(isString(props.labelAsText)){return props.labelAsText}return ""}function getSelectOpenerLabel(showOpenerLabelAsText,props){if(showOpenerLabelAsText){return getLabel(props)}return props.label}
+function getStringForKey(key){if(key.length===1||!/^[A-Z]/i.test(key)){return key}return ""}function debounce(callback,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);callback(...args);};clearTimeout(timeout);timeout=setTimeout(later,wait);}}function isString(x){return typeof x==="string"}function getLabel(props){if(isString(props.label)){return props.label}if(isString(props.labelAsText)){return props.labelAsText}return ""}function getSelectOpenerLabel(showOpenerLabelAsText,props){if(showOpenerLabelAsText){return getLabel(props)}return props.label}function getListboxLabelProps({ariaLabel,ariaLabelledBy,openerElement}){const openerLabel=getOpenerLabel(openerElement);const labelId=ariaLabelledBy||openerLabel?.id;if(labelId){return {"aria-labelledby":labelId}}const label=openerLabel?.textContent||ariaLabel;return label?{"aria-label":label}:{}}function getOpenerLabel(openerElement){if(!openerElement||!("labels"in openerElement)){return undefined}return openerElement.labels?.[0]}
 
-const VIRTUALIZE_THRESHOLD=125;class DropdownCore extends React.Component{static sameItemsFocusable(prevItems,currentItems){if(prevItems.length!==currentItems.length){return false}for(let i=0;i<prevItems.length;i++){if(prevItems[i].focusable!==currentItems[i].focusable){return false}}return true}static getDerivedStateFromProps(props,state){if(state.itemRefs.length===0&&props.open||!DropdownCore.sameItemsFocusable(state.prevItems,props.items)){const itemRefs=[];for(let i=0;i<props.items.length;i++){if(props.items[i].focusable){const ref=React.createRef();itemRefs.push({ref,originalIndex:i});}}return {itemRefs,prevItems:props.items,sameItemsFocusable:false}}else {return {prevItems:props.items,sameItemsFocusable:true}}}componentDidMount(){this.updateEventListeners();this.maybeFocusInitialItem();}componentDidUpdate(prevProps){const{open,searchText}=this.props;if(prevProps.open!==open){this.updateEventListeners();this.maybeFocusInitialItem();}else if(open){const{itemRefs,sameItemsFocusable}=this.state;if(sameItemsFocusable||prevProps.searchText!==searchText){return}else {const newFocusableIndex=itemRefs.findIndex(ref=>ref.originalIndex===this.focusedOriginalIndex);if(newFocusableIndex===-1){this.focusedIndex=0;this.itemsClicked=false;this.scheduleToFocusCurrentItem();}else {this.focusedIndex=newFocusableIndex;}}if(this.props.labels!==prevProps.labels){this.setState({labels:{...this.state.labels,...this.props.labels}});}}}componentWillUnmount(){this.removeEventListeners();}resetFocusedIndex(){const{initialFocusedIndex}=this.props;if(typeof initialFocusedIndex!=="undefined"){this.focusedIndex=initialFocusedIndex;}else {if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}}maybeFocusInitialItem(){const{autoFocus,open}=this.props;if(!autoFocus){return}if(open){this.resetFocusedIndex();this.scheduleToFocusCurrentItem();}else if(!open){this.itemsClicked=false;}}updateEventListeners(){if(this.props.open){this.addEventListeners();}else {this.removeEventListeners();}}addEventListeners(){document.addEventListener("mouseup",this.handleInteract);document.addEventListener("touchend",this.handleInteract);}removeEventListeners(){document.removeEventListener("mouseup",this.handleInteract);document.removeEventListener("touchend",this.handleInteract);}scheduleToFocusCurrentItem(onFocus){if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(()=>{this.focusCurrentItem(onFocus);});}else {this.focusCurrentItem(onFocus);}}focusCurrentItem(onFocus){const focusedItemRef=this.state.itemRefs[this.focusedIndex];if(!focusedItemRef){return}const{current:virtualizedList}=this.virtualizedListRef;if(virtualizedList){virtualizedList.scrollToItem(focusedItemRef.originalIndex);}const focusNode=()=>{if(!this.props.open){return}const currentFocusedItemRef=this.state.itemRefs[this.focusedIndex];const node=ReactDOM.findDOMNode(currentFocusedItemRef.ref.current);if(!node&&this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);return}if(node){this.props.schedule.timeout(()=>{node.focus();},0);this.focusedOriginalIndex=currentFocusedItemRef.originalIndex;if(onFocus){onFocus(node);}}};if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);}else {focusNode();}}focusSearchField(){if(this.searchFieldRef.current){this.searchFieldRef.current.focus();}}hasSearchField(){return !!this.props.isFilterable}isSearchFieldFocused(){return this.hasSearchField()&&document.activeElement===this.searchFieldRef.current}focusPreviousItem(){if(this.isSearchFieldFocused()){this.focusedIndex=this.state.itemRefs.length-1;}else if(this.focusedIndex===0){if(this.hasSearchField()){return this.focusSearchField()}this.focusedIndex=this.state.itemRefs.length-1;}else {this.focusedIndex-=1;}this.scheduleToFocusCurrentItem();}focusNextItem(){if(this.isSearchFieldFocused()){this.focusedIndex=0;}else if(this.focusedIndex===this.state.itemRefs.length-1){if(this.hasSearchField()){return this.focusSearchField()}this.focusedIndex=0;}else {this.focusedIndex+=1;}this.scheduleToFocusCurrentItem();}restoreTabOrder(){if(this.props.openerElement){this.props.openerElement.focus();}}getItemRole(){const{role}=this.props;switch(role){case"listbox":return "option";case"menu":return "menuitem";default:throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`)}}maybeRenderNoResults(){const{items,labels:{noResults}}=this.props;const numResults=items.length;if(numResults===0){return jsx(BodyText,{style:styles$8.noResult,testId:"dropdown-core-no-results",children:noResults})}return null}shouldVirtualizeList(){return this.props.items.length>VIRTUALIZE_THRESHOLD}renderList(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{if(SeparatorItem.isClassOf(item.component)){return item.component}const{component,focusable,populatedProps}=item;if(focusable){focusCounter+=1;}const focusIndex=focusCounter-1;const currentRef=this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null;return React.cloneElement(component,{...populatedProps,key:index,onClick:()=>{this.handleItemClick(focusIndex,item);},ref:focusable?currentRef:null,role:populatedProps.role||itemRole})})}parseVirtualizedItems(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{const{populatedProps}=item;if(!SeparatorItem.isClassOf(item.component)&&item.focusable){focusCounter+=1;}const focusIndex=focusCounter-1;return {...item,role:populatedProps.role||itemRole,ref:item.focusable&&this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null,onClick:()=>{this.handleItemClick(focusIndex,item);}}})}renderVirtualizedList(){const virtualizedItems=this.parseVirtualizedItems();return jsx(DropdownCoreVirtualized$1,{data:virtualizedItems,listRef:this.virtualizedListRef})}renderSearchField(){const{searchText}=this.props;const{labels}=this.state;return jsx(SearchField,{clearAriaLabel:labels.clearSearch,onChange:this.handleSearchTextChanged,placeholder:labels.filter,ref:this.searchFieldRef,style:styles$8.searchInputStyle,value:searchText||""})}renderDropdownMenu(listRenderer,isReferenceHidden){const{"aria-invalid":ariaInvalid,"aria-labelledby":ariaLabelledby,"aria-required":ariaRequired,dropdownStyle,isFilterable,openerElement,role,id}=this.props;const openerStyle=openerElement&&window.getComputedStyle(openerElement);const minDropdownWidth=openerStyle?openerStyle.getPropertyValue("width"):0;return jsxs(View,{onMouseUp:this.handleDropdownMouseUp,style:[styles$8.dropdown,isReferenceHidden&&styles$8.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsx(View,{id:id,role:role,"aria-labelledby":ariaLabelledby,style:[styles$8.listboxOrMenu,{minInlineSize:minDropdownWidth}],"aria-invalid":role==="listbox"?ariaInvalid:undefined,"aria-required":role==="listbox"?ariaRequired:undefined,children:listRenderer}),this.maybeRenderNoResults()]})}renderDropdown(){const{alignment,openerElement}=this.props;const listRenderer=this.shouldVirtualizeList()?this.renderVirtualizedList():this.renderList();return jsx(DropdownPopper,{alignment:alignment,onPopperElement:popperElement=>{this.popperElement=popperElement;},referenceElement:openerElement,children:isReferenceHidden=>this.renderDropdownMenu(listRenderer,isReferenceHidden)})}render(){const{open,opener,style,className,disabled}=this.props;return jsxs(View,{onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,style:[styles$8.menuWrapper,style],className:className,children:[opener,open&&this.renderDropdown()]})}constructor(props){super(props),this.focusedIndex=-1,this.focusedOriginalIndex=-1,this.itemsClicked=false,this.searchFieldRef=React.createRef(),this.handleInteract=event=>{const{open,onOpenChanged}=this.props;const target=event.target;const thisElement=ReactDOM.findDOMNode(this);if(open&&thisElement&&!thisElement.contains(target)&&this.popperElement&&!this.popperElement.contains(target)){onOpenChanged(false);}},this.handleKeyDown=event=>{const{enableTypeAhead,onOpenChanged,open,searchText}=this.props;const key=event.key;if(enableTypeAhead&&getStringForKey(key)){event.stopPropagation();this.textSuggestion+=key;this.handleKeyDownDebounced(this.textSuggestion);}if(!open){if(key===keys.down){event.preventDefault();onOpenChanged(true);return}return}switch(key){case keys.tab:if(this.isSearchFieldFocused()&&searchText){return}this.restoreTabOrder();onOpenChanged(false);return;case keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case keys.up:event.preventDefault();this.focusPreviousItem();return;case keys.down:event.preventDefault();this.focusNextItem();return}},this.handleKeyUp=event=>{const{onOpenChanged,open}=this.props;const key=event.key;switch(key){case keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case keys.escape:if(open){event.stopPropagation();this.restoreTabOrder();onOpenChanged(false);}return}},this.handleKeyDownDebounceResult=key=>{const foundIndex=this.props.items.filter(item=>item.focusable).findIndex(({component})=>{if(SeparatorItem.isClassOf(component)){return false}if(OptionItem.isClassOf(component)){const optionItemProps=component.props;return getLabel(optionItemProps).toLowerCase().startsWith(key.toLowerCase())}return false});if(foundIndex>=0){const isClosed=!this.props.open;if(isClosed){this.props.onOpenChanged(true);}this.focusedIndex=foundIndex;this.scheduleToFocusCurrentItem(node=>{if(this.props.selectionType==="single"&&isClosed&&node){node.click();this.props.onOpenChanged(false);}});}this.textSuggestion="";},this.handleClickFocus=index=>{this.itemsClicked=true;this.focusedIndex=index;this.focusedOriginalIndex=this.state.itemRefs[this.focusedIndex].originalIndex;},this.handleDropdownMouseUp=event=>{if(event.nativeEvent.stopImmediatePropagation){event.nativeEvent.stopImmediatePropagation();}else {event.stopPropagation();}},this.handleItemClick=(focusIndex,item)=>{this.handleClickFocus(focusIndex);if(item.component.props.onClick){item.component.props.onClick();}if(item.populatedProps.onClick){item.populatedProps.onClick();}},this.handleSearchTextChanged=searchText=>{const{onSearchTextChanged}=this.props;if(onSearchTextChanged){onSearchTextChanged(searchText);}};this.resetFocusedIndex();this.state={prevItems:this.props.items,itemRefs:[],sameItemsFocusable:false,labels:{noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected,...props.labels}};this.virtualizedListRef=React.createRef();this.handleKeyDownDebounced=debounce(this.handleKeyDownDebounceResult,500);this.textSuggestion="";}}DropdownCore.defaultProps={alignment:"left",autoFocus:true,enableTypeAhead:true,labels:{clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},selectionType:"single"};const styles$8=StyleSheet.create({menuWrapper:{width:"fit-content",maxInlineSize:"100%"},dropdown:{backgroundColor:semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,paddingBlock:theme$3.listbox.layout.padding.block,paddingInline:theme$3.listbox.layout.padding.inline,border:`solid ${border.width.thin} ${semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:semanticColor.core.foreground.neutral.default,alignSelf:"center",marginBlockStart:sizing.size_060},searchInputStyle:{margin:sizing.size_080,marginBlockStart:sizing.size_040,minBlockSize:"auto",position:"sticky"},srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});var DropdownCore$1 = withActionScheduler(DropdownCore);
+const VIRTUALIZE_THRESHOLD=125;class DropdownCore extends React.Component{static sameItemsFocusable(prevItems,currentItems){if(prevItems.length!==currentItems.length){return false}for(let i=0;i<prevItems.length;i++){if(prevItems[i].focusable!==currentItems[i].focusable){return false}}return true}static getDerivedStateFromProps(props,state){if(state.itemRefs.length===0&&props.open||!DropdownCore.sameItemsFocusable(state.prevItems,props.items)){const itemRefs=[];for(let i=0;i<props.items.length;i++){if(props.items[i].focusable){const ref=React.createRef();itemRefs.push({ref,originalIndex:i});}}return {itemRefs,prevItems:props.items,sameItemsFocusable:false}}else {return {prevItems:props.items,sameItemsFocusable:true}}}componentDidMount(){this.updateEventListeners();this.maybeFocusInitialItem();}componentDidUpdate(prevProps){const{open,searchText}=this.props;if(prevProps.open!==open){this.updateEventListeners();this.maybeFocusInitialItem();}else if(open){const{itemRefs,sameItemsFocusable}=this.state;if(sameItemsFocusable||prevProps.searchText!==searchText){return}else {const newFocusableIndex=itemRefs.findIndex(ref=>ref.originalIndex===this.focusedOriginalIndex);if(newFocusableIndex===-1){this.focusedIndex=0;this.itemsClicked=false;this.scheduleToFocusCurrentItem();}else {this.focusedIndex=newFocusableIndex;}}if(this.props.labels!==prevProps.labels){this.setState({labels:{...this.state.labels,...this.props.labels}});}}}componentWillUnmount(){this.removeEventListeners();}resetFocusedIndex(){const{initialFocusedIndex}=this.props;if(typeof initialFocusedIndex!=="undefined"){this.focusedIndex=initialFocusedIndex;}else {if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}}maybeFocusInitialItem(){const{autoFocus,open}=this.props;if(!autoFocus){return}if(open){this.resetFocusedIndex();this.scheduleToFocusCurrentItem();}else if(!open){this.itemsClicked=false;}}updateEventListeners(){if(this.props.open){this.addEventListeners();}else {this.removeEventListeners();}}addEventListeners(){document.addEventListener("mouseup",this.handleInteract);document.addEventListener("touchend",this.handleInteract);}removeEventListeners(){document.removeEventListener("mouseup",this.handleInteract);document.removeEventListener("touchend",this.handleInteract);}scheduleToFocusCurrentItem(onFocus){if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(()=>{this.focusCurrentItem(onFocus);});}else {this.focusCurrentItem(onFocus);}}focusCurrentItem(onFocus){const focusedItemRef=this.state.itemRefs[this.focusedIndex];if(!focusedItemRef){return}const{current:virtualizedList}=this.virtualizedListRef;if(virtualizedList){virtualizedList.scrollToItem(focusedItemRef.originalIndex);}const focusNode=()=>{if(!this.props.open){return}const currentFocusedItemRef=this.state.itemRefs[this.focusedIndex];const node=ReactDOM.findDOMNode(currentFocusedItemRef.ref.current);if(!node&&this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);return}if(node){this.props.schedule.timeout(()=>{node.focus();},0);this.focusedOriginalIndex=currentFocusedItemRef.originalIndex;if(onFocus){onFocus(node);}}};if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);}else {focusNode();}}focusSearchField(){if(this.searchFieldRef.current){this.searchFieldRef.current.focus();}}hasSearchField(){return !!this.props.isFilterable}isSearchFieldFocused(){return this.hasSearchField()&&document.activeElement===this.searchFieldRef.current}focusPreviousItem(){if(this.isSearchFieldFocused()){this.focusedIndex=this.state.itemRefs.length-1;}else if(this.focusedIndex===0){if(this.hasSearchField()){return this.focusSearchField()}this.focusedIndex=this.state.itemRefs.length-1;}else {this.focusedIndex-=1;}this.scheduleToFocusCurrentItem();}focusNextItem(){if(this.isSearchFieldFocused()){this.focusedIndex=0;}else if(this.focusedIndex===this.state.itemRefs.length-1){if(this.hasSearchField()){return this.focusSearchField()}this.focusedIndex=0;}else {this.focusedIndex+=1;}this.scheduleToFocusCurrentItem();}restoreTabOrder(){if(this.props.openerElement){this.props.openerElement.focus();}}getItemRole(){const{role}=this.props;switch(role){case"listbox":return "option";case"menu":return "menuitem";default:throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`)}}maybeRenderNoResults(){const{items,labels:{noResults}}=this.props;const numResults=items.length;if(numResults===0){return jsx(BodyText,{style:styles$8.noResult,testId:"dropdown-core-no-results",children:noResults})}return null}shouldVirtualizeList(){return this.props.items.length>VIRTUALIZE_THRESHOLD}renderList(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{if(SeparatorItem.isClassOf(item.component)){return item.component}const{component,focusable,populatedProps}=item;if(focusable){focusCounter+=1;}const focusIndex=focusCounter-1;const currentRef=this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null;return React.cloneElement(component,{...populatedProps,key:index,onClick:()=>{this.handleItemClick(focusIndex,item);},ref:focusable?currentRef:null,role:populatedProps.role||itemRole})})}parseVirtualizedItems(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{const{populatedProps}=item;if(!SeparatorItem.isClassOf(item.component)&&item.focusable){focusCounter+=1;}const focusIndex=focusCounter-1;return {...item,role:populatedProps.role||itemRole,ref:item.focusable&&this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null,onClick:()=>{this.handleItemClick(focusIndex,item);}}})}renderVirtualizedList(){const virtualizedItems=this.parseVirtualizedItems();return jsx(DropdownCoreVirtualized$1,{data:virtualizedItems,listRef:this.virtualizedListRef})}renderSearchField(){const{searchText}=this.props;const{labels}=this.state;return jsx(SearchField,{clearAriaLabel:labels.clearSearch,onChange:this.handleSearchTextChanged,placeholder:labels.filter,ref:this.searchFieldRef,style:styles$8.searchInputStyle,value:searchText||""})}renderDropdownMenu(listRenderer,isReferenceHidden){const{"aria-invalid":ariaInvalid,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-required":ariaRequired,dropdownStyle,isFilterable,openerElement,role,id}=this.props;const openerStyle=openerElement&&window.getComputedStyle(openerElement);const minDropdownWidth=openerStyle?openerStyle.getPropertyValue("width"):0;return jsxs(View,{onMouseUp:this.handleDropdownMouseUp,style:[styles$8.dropdown,isReferenceHidden&&styles$8.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsx(View,{id:id,role:role,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,style:[styles$8.listboxOrMenu,{minInlineSize:minDropdownWidth}],"aria-invalid":role==="listbox"?ariaInvalid:undefined,"aria-required":role==="listbox"?ariaRequired:undefined,children:listRenderer}),this.maybeRenderNoResults()]})}renderDropdown(){const{alignment,openerElement}=this.props;const listRenderer=this.shouldVirtualizeList()?this.renderVirtualizedList():this.renderList();return jsx(DropdownPopper,{alignment:alignment,onPopperElement:popperElement=>{this.popperElement=popperElement;},referenceElement:openerElement,children:isReferenceHidden=>this.renderDropdownMenu(listRenderer,isReferenceHidden)})}render(){const{open,opener,style,className,disabled}=this.props;return jsxs(View,{onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,style:[styles$8.menuWrapper,style],className:className,children:[opener,open&&this.renderDropdown()]})}constructor(props){super(props),this.focusedIndex=-1,this.focusedOriginalIndex=-1,this.itemsClicked=false,this.searchFieldRef=React.createRef(),this.handleInteract=event=>{const{open,onOpenChanged}=this.props;const target=event.target;const thisElement=ReactDOM.findDOMNode(this);if(open&&thisElement&&!thisElement.contains(target)&&this.popperElement&&!this.popperElement.contains(target)){onOpenChanged(false);}},this.handleKeyDown=event=>{const{enableTypeAhead,onOpenChanged,open,searchText}=this.props;const key=event.key;if(enableTypeAhead&&getStringForKey(key)){event.stopPropagation();this.textSuggestion+=key;this.handleKeyDownDebounced(this.textSuggestion);}if(!open){if(key===keys.down){event.preventDefault();onOpenChanged(true);return}return}switch(key){case keys.tab:if(this.isSearchFieldFocused()&&searchText){return}this.restoreTabOrder();onOpenChanged(false);return;case keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case keys.up:event.preventDefault();this.focusPreviousItem();return;case keys.down:event.preventDefault();this.focusNextItem();return}},this.handleKeyUp=event=>{const{onOpenChanged,open}=this.props;const key=event.key;switch(key){case keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case keys.escape:if(open){event.stopPropagation();this.restoreTabOrder();onOpenChanged(false);}return}},this.handleKeyDownDebounceResult=key=>{const foundIndex=this.props.items.filter(item=>item.focusable).findIndex(({component})=>{if(SeparatorItem.isClassOf(component)){return false}if(OptionItem.isClassOf(component)){const optionItemProps=component.props;return getLabel(optionItemProps).toLowerCase().startsWith(key.toLowerCase())}return false});if(foundIndex>=0){const isClosed=!this.props.open;if(isClosed){this.props.onOpenChanged(true);}this.focusedIndex=foundIndex;this.scheduleToFocusCurrentItem(node=>{if(this.props.selectionType==="single"&&isClosed&&node){node.click();this.props.onOpenChanged(false);}});}this.textSuggestion="";},this.handleClickFocus=index=>{this.itemsClicked=true;this.focusedIndex=index;this.focusedOriginalIndex=this.state.itemRefs[this.focusedIndex].originalIndex;},this.handleDropdownMouseUp=event=>{if(event.nativeEvent.stopImmediatePropagation){event.nativeEvent.stopImmediatePropagation();}else {event.stopPropagation();}},this.handleItemClick=(focusIndex,item)=>{this.handleClickFocus(focusIndex);if(item.component.props.onClick){item.component.props.onClick();}if(item.populatedProps.onClick){item.populatedProps.onClick();}},this.handleSearchTextChanged=searchText=>{const{onSearchTextChanged}=this.props;if(onSearchTextChanged){onSearchTextChanged(searchText);}};this.resetFocusedIndex();this.state={prevItems:this.props.items,itemRefs:[],sameItemsFocusable:false,labels:{noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected,...props.labels}};this.virtualizedListRef=React.createRef();this.handleKeyDownDebounced=debounce(this.handleKeyDownDebounceResult,500);this.textSuggestion="";}}DropdownCore.defaultProps={alignment:"left",autoFocus:true,enableTypeAhead:true,labels:{clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},selectionType:"single"};const styles$8=StyleSheet.create({menuWrapper:{width:"fit-content",maxInlineSize:"100%"},dropdown:{backgroundColor:semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,paddingBlock:theme$3.listbox.layout.padding.block,paddingInline:theme$3.listbox.layout.padding.inline,border:`solid ${border.width.thin} ${semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:semanticColor.core.foreground.neutral.default,alignSelf:"center",marginBlockStart:sizing.size_060},searchInputStyle:{margin:sizing.size_080,marginBlockStart:sizing.size_040,minBlockSize:"auto",position:"sticky"},srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});var DropdownCore$1 = withActionScheduler(DropdownCore);
 
 const textUnderlineOffset=sizing.size_040;const theme$2={root:{border:{width:{primary:{default:border.width.none,hover:border.width.medium,press:border.width.medium},secondary:{default:border.width.thin,hover:border.width.thin,press:border.width.thin},tertiary:{default:border.width.none,hover:border.width.none,press:border.width.none}},offset:{primary:border.width.medium,secondary:0,tertiary:0},radius:{default:border.radius.radius_040,hover:border.radius.radius_040,press:border.radius.radius_040}},sizing:{height:{small:sizing.size_320,medium:sizing.size_400,large:sizing.size_560},underline:{hover:sizing.size_020,press:sizing.size_010}},layout:{padding:{inline:{primary:{small:sizing.size_160,medium:sizing.size_160,large:sizing.size_320},secondary:{small:sizing.size_120,medium:sizing.size_160,large:sizing.size_180},tertiary:{small:sizing.size_0,medium:sizing.size_0,large:sizing.size_0}}}},font:{size:{large:sizing.size_180},lineHeight:{small:sizing.size_220,default:sizing.size_240,large:sizing.size_260},weight:{default:font.weight.bold},decoration:{hover:"underline",press:"underline"},offset:{default:textUnderlineOffset}}},icon:{margin:{inline:{inner:sizing.size_060,outer:`calc(-1 * ${border.width.medium})`}},padding:sizing.size_020,sizing:{small:sizing.size_160,medium:sizing.size_240,large:sizing.size_240}}};var theme$1=mapValuesToCssVars(theme$2,"--wb-c-button-");function ButtonIcon({icon,size,style,testId}){const iconStyle={width:theme$1.icon.sizing[size],height:theme$1.icon.sizing[size]};const commonProps={style:[iconStyle,style],testId};const phosphorIconProps={...commonProps,color:"currentColor"};if(typeof icon!=="string"){return React.cloneElement(icon,commonProps)}switch(size){case"small":return jsx(PhosphorIcon,{...phosphorIconProps,size:"small",icon:icon});case"medium":default:return jsx(PhosphorIcon,{...phosphorIconProps,size:"medium",icon:icon})}}const StyledA=addStyle("a");const StyledButton$2=addStyle("button");const StyledLink=addStyle(Link);const ButtonUnstyled=React.forwardRef(function ButtonUnstyled(props,ref){const{children,disabled,href,id,kind,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,"data-kind":kind,id:id,role:"button",style:[styles$2$1.reset,style],...restProps};const inRouterContext=useInRouterContext();if(href&&!disabled){return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsx(StyledButton$2,{type:type||"button",...commonProps,"aria-disabled":disabled,ref:ref,children:children})}});const styles$2$1=StyleSheet.create({reset:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",margin:0,padding:0,border:"none",cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",userSelect:"none",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}}});const ButtonCore=React.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,styles:stylesProp,id,waiting:_,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...restProps}=props;const buttonStyles=_generateStyles$1(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const label=jsx(BodyText,{size:size==="small"?"small":undefined,weight:size==="large"?"bold":undefined,tag:"span",style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxs(React.Fragment,{children:[startIcon&&jsx(View,{style:sharedStyles.iconWrapper,children:jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon,stylesProp?.startIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsx(CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsx(View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[sharedStyles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsx(ButtonIcon,{size:iconSize,icon:endIcon,style:stylesProp?.endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,kind:kind,children:contents})});const sharedStyles=StyleSheet.create({shared:{height:theme$1.root.sizing.height.medium,paddingBlock:0},small:{height:theme$1.root.sizing.height.small},large:{height:theme$1.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme$1.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme$1.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme$1.root.font.lineHeight.small},largeText:{fontSize:theme$1.root.font.size.large,lineHeight:theme$1.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme$1.icon.margin.inline.outer,marginInlineEnd:theme$1.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme$1.icon.margin.inline.inner},iconWrapper:{padding:theme$1.icon.padding,minInlineSize:"auto"},endIconWrapper:{marginInlineStart:theme$1.icon.margin.inline.inner,marginInlineEnd:theme$1.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles$1$1={};const _generateStyles$1=(actionType="progressive",kind,size)=>{const buttonType=`${actionType}-${kind}-${size}`;if(styles$1$1[buttonType]){return styles$1$1[buttonType]}const paddingInline=theme$1.root.layout.padding.inline[kind][size];const borderWidthKind=theme$1.root.border.width[kind];const outlineOffsetKind=theme$1.root.border.offset[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,borderRadius:theme$1.root.border.radius.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const pressStyles={background:themeVariant.press.background,borderRadius:theme$1.root.border.radius.press,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.press} ${theme$1.root.sizing.underline.press}`}:undefined};const newStyles={default:{borderRadius:theme$1.root.border.radius.default,paddingInline:paddingInline,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,transition:"border-radius 0.1s ease-in-out",["@media (hover: hover)"]:{":hover":{background:themeVariant.hover.background,borderRadius:theme$1.root.border.radius.hover,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.hover} ${theme$1.root.sizing.underline.hover}`}:undefined}},":active":pressStyles,...focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},pressed:pressStyles,focused:focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles}};styles$1$1[buttonType]=StyleSheet.create(newStyles);return styles$1$1[buttonType]};const Button=React.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onBlur,onFocus,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:roleForEvents,type:type,onClick:onClick,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onBlur:onBlur,onFocus:onFocus,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>{return jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});const ActivityButtonCore=React.forwardRef(function ActivityButtonCore(props,ref){const{actionType="progressive",children,disabled=false,kind="primary",focused,pressed,styles:stylesProp,type=undefined,startIcon,endIcon,hovered:_,waiting:__,...restProps}=props;const buttonStyles=_generateStyles(actionType,disabled,kind);const sharedStyles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];return jsx(ButtonUnstyled,{...restProps,disabled:disabled,kind:kind,ref:ref,style:sharedStyles,type:type,children:jsx(Fragment,{children:jsxs(View,{style:chonkyStyles,className:"chonky",children:[startIcon&&(typeof startIcon==="string"?jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:startIcon,style:[styles$7.icon,stylesProp?.startIcon],"aria-hidden":"true"}):React.cloneElement(startIcon,{"aria-hidden":true,style:[styles$7.icon,stylesProp?.startIcon]})),jsx(BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles$7.label,stylesProp?.label],children:children}),endIcon&&(typeof endIcon==="string"?jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles$7.icon,stylesProp?.endIcon],"aria-hidden":"true"}):React.cloneElement(endIcon,{"aria-hidden":true,style:[styles$7.icon,stylesProp?.endIcon]}))]})})})});React.forwardRef(function ActivityButton(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,kind="primary",disabled=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onBlur,onFocus,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsx(ClickableBehavior,{disabled:disabled,href:href,role:roleForEvents,type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onBlur:onBlur,onFocus:onFocus,...extraClickableProps,children:(state,restChildProps)=>{return jsx(ActivityButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,kind:kind,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});const theme={root:{border:{width:{primary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},secondary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},tertiary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin}},radius:border.radius.radius_120},layout:{padding:{block:sizing.size_140,inline:sizing.size_480}},shadow:{y:{rest:"6px",hover:"8px",press:sizing.size_0}}},label:{color:{progressive:semanticColor.core.foreground.instructive.default,neutral:semanticColor.core.foreground.neutral.default,disabled:semanticColor.core.foreground.disabled.default},font:{lineHeight:sizing.size_140},layout:{padding:{blockStart:sizing.size_040,blockEnd:sizing.size_060},width:sizing.size_640}},icon:{sizing:{height:sizing.size_200,width:sizing.size_200}}};const styles$7={icon:{alignSelf:"center",width:theme.icon.sizing.width,height:theme.icon.sizing.height},label:{lineHeight:theme.label.font.lineHeight,paddingBlockStart:theme.label.layout.padding.blockStart,paddingBlockEnd:theme.label.layout.padding.blockEnd}};const stateStyles={};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(stateStyles[buttonType]){return stateStyles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=semanticColor.chonky[actionType];const disabledState=semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme.root.shadow.y.rest})`};const newStyles={button:{background:"transparent",borderRadius:theme.root.border.radius,color:theme.label.color[actionType],height:"auto",flexDirection:"column",gap:sizing.size_020,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme.root.shadow.y.hover} - ${theme.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...focusStyles.focus},focused:focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",color:theme.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{flexDirection:"row",gap:sizing.size_080,borderRadius:theme.root.border.radius,marginBlockEnd:theme.root.shadow.y.rest,maxWidth:"100%",paddingBlock:theme.root.layout.padding.block,paddingInline:theme.root.layout.padding.inline,background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled};stateStyles[buttonType]=StyleSheet.create(newStyles);return stateStyles[buttonType]};
 
@@ -68,9 +68,9 @@ const StyledButton$1=addStyle("button");class SelectOpener extends React.Compone
 
 const defaultErrorMessage="This field is required.";function hasValue(value){return value?value.length>0:false}function useSelectValidation({value,disabled=false,validate,onValidate,required,open}){const[errorMessage,setErrorMessage]=React.useState(()=>validate&&hasValue(value)&&!disabled&&validate(value)||null);const handleValidation=React.useCallback(newValue=>{if(disabled){return}if(validate){const error=newValue!==undefined&&validate(newValue)||null;setErrorMessage(error);if(onValidate){onValidate(error);}if(error){return}}if(required){const requiredString=typeof required==="string"?required:defaultErrorMessage;const error=hasValue(newValue)?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}},[disabled,validate,setErrorMessage,onValidate,required]);useOnMountEffect(()=>{if(hasValue(value)){handleValidation(value);}});function onOpenerBlurValidation(){if(!open&&required&&!hasValue(value)){handleValidation(value);}}const onDropdownClosedValidation=()=>{if(required&&!hasValue(value)){handleValidation(value);}};const onSelectionValidation=newValue=>{handleValidation(newValue);};const onSelectedValuesChangeValidation=()=>{setErrorMessage(null);if(onValidate){onValidate(null);}};return {errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}}
 
-const SingleSelect=props=>{const selectedIndex=React.useRef(0);const isInitialRender=React.useRef(true);const{children,error=false,id,opener,placeholder,selectedValue,testId,alignment="left",autoFocus=true,dropdownStyle,enableTypeAhead=true,isFilterable,labels={clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},onChange,onToggle,opened,style,className,"aria-label":ariaLabel,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled=false,readOnly=false,dropdownId,validate,onValidate,required,showOpenerLabelAsText=true,...sharedProps}=props;const[open,setOpen]=React.useState(false);const[searchText,setSearchText]=React.useState("");const[openerElement,setOpenerElement]=React.useState();const{errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation}=useSelectValidation({value:selectedValue,disabled,validate,onValidate,required,open});const hasError=error||!!errorMessage;React.useEffect(()=>{if(disabled||readOnly){setOpen(false);}else if(typeof opened==="boolean"){setOpen(opened);}},[disabled,opened,readOnly]);const handleOpenChanged=opened=>{setOpen(opened);setSearchText("");if(onToggle){onToggle(opened);}if(!opened){onDropdownClosedValidation();}};const handleToggle=newSelectedValue=>{if(newSelectedValue!==selectedValue){onChange(newSelectedValue);}if(open&&openerElement){openerElement.focus();}setOpen(false);if(onToggle){onToggle(false);}onSelectionValidation(newSelectedValue);};const mapOptionItemsToDropdownItems=children=>{let indexCounter=0;selectedIndex.current=0;return children.map(option=>{const{disabled,value}=option.props;const selected=selectedValue===value;if(selected){selectedIndex.current=indexCounter;}if(!disabled){indexCounter+=1;}return {component:option,focusable:!disabled,populatedProps:{onToggle:handleToggle,selected:selected,variant:"check"}}})};const filterChildren=children=>{const lowercasedSearchText=searchText.toLowerCase();return children.filter(({props})=>!searchText||getLabel(props).toLowerCase().indexOf(lowercasedSearchText)>-1)};const getMenuItems=children=>{return mapOptionItemsToDropdownItems(isFilterable?filterChildren(children):children)};const handleSearchTextChanged=searchText=>{setSearchText(searchText);};const handleOpenerRef=node=>{const openerElement=ReactDOM.findDOMNode(node);setOpenerElement(openerElement);};const handleClick=e=>{handleOpenChanged(!open);};const handleAnnouncement=message=>{announceMessage({message,level:"polite"});};const childrenRef=React.useRef(children);childrenRef.current=children;const announceSelectedItem=()=>{const optionItems=React.Children.toArray(childrenRef.current);const selectedItem=optionItems.find(option=>option.props.value===selectedValue);if(selectedItem){const label=getLabel(selectedItem.props);if(label){handleAnnouncement(label);}}};React.useEffect(()=>{if(isInitialRender.current){isInitialRender.current=false;return}announceSelectedItem();},[selectedValue]);const computedRequired=ariaRequired??!!required;const renderOpener=(isDisabled,dropdownId)=>{const items=React.Children.toArray(children);const selectedItem=items.find(option=>option.props.value===selectedValue);let menuContent;if(selectedItem){menuContent=getSelectOpenerLabel(showOpenerLabelAsText,selectedItem.props);}else {menuContent=placeholder;}const dropdownOpener=jsx(Id,{id:id,children:uniqueOpenerId=>{return opener?jsx(DropdownOpener,{id:uniqueOpenerId,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-required":computedRequired,"aria-haspopup":"listbox",onClick:handleClick,disabled:isDisabled,ref:handleOpenerRef,role:"combobox",text:menuContent,opened:open,error:hasError,onBlur:onOpenerBlurValidation,readOnly:readOnly,children:opener}):jsx(SelectOpener,{...sharedProps,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-required":computedRequired,disabled:isDisabled,id:uniqueOpenerId,error:hasError,isPlaceholder:!selectedItem,onOpenChanged:handleOpenChanged,open:open,ref:handleOpenerRef,testId:testId,onBlur:onOpenerBlurValidation,readOnly:readOnly,children:menuContent})}});return dropdownOpener};const allChildren=React.Children.toArray(children).filter(Boolean);const numEnabledOptions=allChildren.filter(option=>!option.props.disabled).length;const items=getMenuItems(allChildren);const isDisabled=numEnabledOptions===0||disabled;const disableInteraction=isDisabled||readOnly;const{someResults}=labels;const someResultsRef=React.useRef(someResults);someResultsRef.current=someResults;const openRef=React.useRef(open);openRef.current=open;React.useEffect(()=>{if(openRef.current){handleAnnouncement(someResultsRef.current(items.length));}},[items.length]);return jsx(Id,{id:dropdownId,children:uniqueDropdownId=>jsx(DropdownCore$1,{id:uniqueDropdownId,role:"listbox",selectionType:"single",alignment:alignment,autoFocus:autoFocus,enableTypeAhead:enableTypeAhead,dropdownStyle:[isFilterable&&filterableDropdownStyle,selectDropdownStyle,dropdownStyle],initialFocusedIndex:selectedIndex.current,items:items,onOpenChanged:handleOpenChanged,open:open,opener:renderOpener(isDisabled,uniqueDropdownId),openerElement:openerElement,style:style,className:className,isFilterable:isFilterable,onSearchTextChanged:isFilterable?handleSearchTextChanged:undefined,searchText:isFilterable?searchText:"",labels:labels,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled:disableInteraction})})};
+const SingleSelect=props=>{const selectedIndex=React.useRef(0);const isInitialRender=React.useRef(true);const{children,error=false,id,opener,placeholder,selectedValue,testId,alignment="left",autoFocus=true,dropdownStyle,enableTypeAhead=true,isFilterable,labels={clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},onChange,onToggle,opened,style,className,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled=false,readOnly=false,dropdownId,validate,onValidate,required,showOpenerLabelAsText=true,...sharedProps}=props;const[open,setOpen]=React.useState(false);const[searchText,setSearchText]=React.useState("");const[openerElement,setOpenerElement]=React.useState();const{errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation}=useSelectValidation({value:selectedValue,disabled,validate,onValidate,required,open});const hasError=error||!!errorMessage;React.useEffect(()=>{if(disabled||readOnly){setOpen(false);}else if(typeof opened==="boolean"){setOpen(opened);}},[disabled,opened,readOnly]);const handleOpenChanged=opened=>{setOpen(opened);setSearchText("");if(onToggle){onToggle(opened);}if(!opened){onDropdownClosedValidation();}};const handleToggle=newSelectedValue=>{if(newSelectedValue!==selectedValue){onChange(newSelectedValue);}if(open&&openerElement){openerElement.focus();}setOpen(false);if(onToggle){onToggle(false);}onSelectionValidation(newSelectedValue);};const mapOptionItemsToDropdownItems=children=>{let indexCounter=0;selectedIndex.current=0;return children.map(option=>{const{disabled,value}=option.props;const selected=selectedValue===value;if(selected){selectedIndex.current=indexCounter;}if(!disabled){indexCounter+=1;}return {component:option,focusable:!disabled,populatedProps:{onToggle:handleToggle,selected:selected,variant:"check"}}})};const filterChildren=children=>{const lowercasedSearchText=searchText.toLowerCase();return children.filter(({props})=>!searchText||getLabel(props).toLowerCase().indexOf(lowercasedSearchText)>-1)};const getMenuItems=children=>{return mapOptionItemsToDropdownItems(isFilterable?filterChildren(children):children)};const handleSearchTextChanged=searchText=>{setSearchText(searchText);};const handleOpenerRef=node=>{const openerElement=ReactDOM.findDOMNode(node);setOpenerElement(openerElement);};const handleClick=e=>{handleOpenChanged(!open);};const handleAnnouncement=message=>{announceMessage({message,level:"polite"});};const childrenRef=React.useRef(children);childrenRef.current=children;const announceSelectedItem=()=>{const optionItems=React.Children.toArray(childrenRef.current);const selectedItem=optionItems.find(option=>option.props.value===selectedValue);if(selectedItem){const label=getLabel(selectedItem.props);if(label){handleAnnouncement(label);}}};React.useEffect(()=>{if(isInitialRender.current){isInitialRender.current=false;return}announceSelectedItem();},[selectedValue]);const computedRequired=ariaRequired??!!required;const renderOpener=(isDisabled,dropdownId)=>{const items=React.Children.toArray(children);const selectedItem=items.find(option=>option.props.value===selectedValue);let menuContent;if(selectedItem){menuContent=getSelectOpenerLabel(showOpenerLabelAsText,selectedItem.props);}else {menuContent=placeholder;}const dropdownOpener=jsx(Id,{id:id,children:uniqueOpenerId=>{return opener?jsx(DropdownOpener,{id:uniqueOpenerId,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-required":computedRequired,"aria-haspopup":"listbox",onClick:handleClick,disabled:isDisabled,ref:handleOpenerRef,role:"combobox",text:menuContent,opened:open,error:hasError,onBlur:onOpenerBlurValidation,readOnly:readOnly,children:opener}):jsx(SelectOpener,{...sharedProps,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-controls":dropdownId,"aria-required":computedRequired,disabled:isDisabled,id:uniqueOpenerId,error:hasError,isPlaceholder:!selectedItem,onOpenChanged:handleOpenChanged,open:open,ref:handleOpenerRef,testId:testId,onBlur:onOpenerBlurValidation,readOnly:readOnly,children:menuContent})}});return dropdownOpener};const allChildren=React.Children.toArray(children).filter(Boolean);const numEnabledOptions=allChildren.filter(option=>!option.props.disabled).length;const items=getMenuItems(allChildren);const isDisabled=numEnabledOptions===0||disabled;const disableInteraction=isDisabled||readOnly;const listboxLabelProps=getListboxLabelProps({ariaLabel,ariaLabelledBy,openerElement});const{someResults}=labels;const someResultsRef=React.useRef(someResults);someResultsRef.current=someResults;const openRef=React.useRef(open);openRef.current=open;React.useEffect(()=>{if(openRef.current){handleAnnouncement(someResultsRef.current(items.length));}},[items.length]);return jsx(Id,{id:dropdownId,children:uniqueDropdownId=>jsx(DropdownCore$1,{id:uniqueDropdownId,role:"listbox",selectionType:"single",alignment:alignment,autoFocus:autoFocus,enableTypeAhead:enableTypeAhead,dropdownStyle:[isFilterable&&filterableDropdownStyle,selectDropdownStyle,dropdownStyle],initialFocusedIndex:selectedIndex.current,items:items,onOpenChanged:handleOpenChanged,open:open,opener:renderOpener(isDisabled,uniqueDropdownId),openerElement:openerElement,style:style,className:className,isFilterable:isFilterable,onSearchTextChanged:isFilterable?handleSearchTextChanged:undefined,searchText:isFilterable?searchText:"",labels:labels,...listboxLabelProps,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled:disableInteraction})})};
 
-const MultiSelect=props=>{const isInitialRender=React.useRef(true);const{id,opener,testId,alignment="left",dropdownStyle,implicitAllEnabled,isFilterable,labels:propLabels,onChange,onToggle,opened,selectedValues=[],shortcuts=false,style,className,"aria-label":ariaLabel,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled=false,readOnly=false,error=false,children,dropdownId,showOpenerLabelAsText=true,validate,onValidate,required,...sharedProps}=props;const labels=React.useMemo(()=>{return {...defaultLabels,...propLabels}},[propLabels]);const[open,setOpen]=React.useState(false);const[searchText,setSearchText]=React.useState("");const[lastSelectedValues,setLastSelectedValues]=React.useState([]);const[openerElement,setOpenerElement]=React.useState();const{errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}=useSelectValidation({value:selectedValues,disabled,validate,onValidate,required,open});const hasError=error||!!errorMessage;React.useEffect(()=>{if(disabled||readOnly){setOpen(false);}else if(typeof opened==="boolean"){setOpen(opened);}},[disabled,opened,readOnly]);const handleOpenChanged=opened=>{setOpen(opened);setSearchText("");setLastSelectedValues(selectedValues);if(onToggle){onToggle(opened);}if(!opened){if(lastSelectedValues!==selectedValues){onSelectionValidation(selectedValues);}else {onDropdownClosedValidation();}}};const handleToggle=selectedValue=>{if(selectedValues.includes(selectedValue)){const index=selectedValues.indexOf(selectedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,selectedValue]);}onSelectedValuesChangeValidation();};const handleSelectAll=()=>{const allChildren=React.Children.toArray(children);const selected=allChildren.filter(option=>!!option&&!option.props.disabled).map(option=>option.props.value);onChange(selected);onSelectedValuesChangeValidation();};const handleSelectNone=()=>{onChange([]);onSelectedValuesChangeValidation();};const getMenuTextOrNode=React.useCallback(children=>{const{noneSelected,someSelected,allSelected}=labels;const numSelectedAll=children.filter(option=>!option.props.disabled).length;const noSelectionText=implicitAllEnabled?allSelected:noneSelected;switch(selectedValues.length){case 0:return noSelectionText;case 1:const selectedItem=children.find(option=>option.props.value===selectedValues[0]);if(selectedItem){const selectedLabel=getSelectOpenerLabel(showOpenerLabelAsText,selectedItem?.props);if(selectedLabel){return selectedLabel}else {return someSelected(1)}}return noSelectionText;case numSelectedAll:return allSelected;default:return someSelected(selectedValues.length)}},[implicitAllEnabled,labels,selectedValues,showOpenerLabelAsText]);const getShortcuts=numOptions=>{const{selectAllLabel,selectNoneLabel}=labels;if(shortcuts&&!searchText){const selectAllDisabled=numOptions===selectedValues.length;const selectAll={component:jsx(ActionItem,{disabled:selectAllDisabled,label:selectAllLabel(numOptions),indent:true,onClick:handleSelectAll}),focusable:!selectAllDisabled,populatedProps:{}};const selectNoneDisabled=selectedValues.length===0;const selectNone={component:jsx(ActionItem,{disabled:selectNoneDisabled,label:selectNoneLabel,indent:true,onClick:handleSelectNone}),focusable:!selectNoneDisabled,populatedProps:{}};const separator={component:jsx(SeparatorItem,{},"shortcuts-separator"),focusable:false,populatedProps:{}};return [selectAll,selectNone,separator]}else {return []}};const getMenuItems=children=>{if(!isFilterable){return children.map(mapOptionItemToDropdownItem)}const lowercasedSearchText=searchText.toLowerCase();const filteredChildren=children.filter(({props})=>!searchText||getLabel(props).toLowerCase().indexOf(lowercasedSearchText)>-1);const lastSelectedChildren=[];const restOfTheChildren=[];for(const child of filteredChildren){if(lastSelectedValues.includes(child.props.value)){lastSelectedChildren.push(child);}else {restOfTheChildren.push(child);}}const lastSelectedItems=lastSelectedChildren.map(mapOptionItemToDropdownItem);if(lastSelectedChildren.length&&restOfTheChildren.length){lastSelectedItems.push({component:jsx(SeparatorItem,{},"selected-separator"),focusable:false,populatedProps:{}});}return [...lastSelectedItems,...restOfTheChildren.map(mapOptionItemToDropdownItem)]};const mapOptionItemToDropdownItem=option=>{const{disabled,value}=option.props;return {component:option,focusable:!disabled,populatedProps:{onToggle:handleToggle,selected:selectedValues.includes(value),variant:"checkbox"}}};const handleOpenerRef=node=>{const openerElement=ReactDOM.findDOMNode(node);setOpenerElement(openerElement);};const handleSearchTextChanged=searchText=>{setSearchText(searchText);};const handleClick=e=>{handleOpenChanged(!open);};const handleAnnouncement=message=>{announceMessage({message,level:"polite"});};const maybeGetOpenerStringValue=React.useCallback((children,openerContent)=>{let openerStringValue;if(selectedValues.length===1){const selectedItem=children.find(option=>option.props.value===selectedValues[0]);openerStringValue=selectedItem?getLabel(selectedItem?.props):undefined;}else if(typeof openerContent==="string"){openerStringValue=openerContent;}return openerStringValue},[selectedValues]);const prevOpenRef=React.useRef(open);const selectionChangedRef=React.useRef(false);const childrenRef=React.useRef(children);childrenRef.current=children;const getMenuTextOrNodeRef=React.useRef(getMenuTextOrNode);getMenuTextOrNodeRef.current=getMenuTextOrNode;const maybeGetOpenerStringValueRef=React.useRef(maybeGetOpenerStringValue);maybeGetOpenerStringValueRef.current=maybeGetOpenerStringValue;const announceOpenerValue=()=>{const optionItems=React.Children.toArray(childrenRef.current);const openerContent=getMenuTextOrNodeRef.current(optionItems);const openerStringValue=maybeGetOpenerStringValueRef.current(optionItems,openerContent);if(openerStringValue){handleAnnouncement(openerStringValue);}};React.useEffect(()=>{if(isInitialRender.current){isInitialRender.current=false;prevOpenRef.current=open;return}const justOpened=open&&!prevOpenRef.current;const justClosed=!open&&prevOpenRef.current;prevOpenRef.current=open;if(justOpened){selectionChangedRef.current=false;}else if(justClosed){if(selectionChangedRef.current){announceOpenerValue();selectionChangedRef.current=false;}}else if(open){selectionChangedRef.current=true;announceOpenerValue();}},[selectedValues,open]);const computedRequired=ariaRequired??!!required;const renderOpener=(allChildren,isDisabled,dropdownId)=>{const{noneSelected}=labels;const openerContent=getMenuTextOrNode(allChildren);const dropdownOpener=jsx(Id,{id:id,children:uniqueOpenerId=>{return opener?jsx(DropdownOpener,{id:uniqueOpenerId,error:hasError,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-required":computedRequired,"aria-haspopup":"listbox",onClick:handleClick,onBlur:onOpenerBlurValidation,disabled:isDisabled,ref:handleOpenerRef,role:"combobox",text:openerContent,opened:open,readOnly:readOnly,children:opener}):jsx(SelectOpener,{...sharedProps,error:hasError,disabled:isDisabled,id:uniqueOpenerId,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-required":computedRequired,isPlaceholder:openerContent===noneSelected,onOpenChanged:handleOpenChanged,onBlur:onOpenerBlurValidation,open:open,ref:handleOpenerRef,testId:testId,readOnly:readOnly,children:openerContent})}});return dropdownOpener};const{clearSearch,filter,noResults,someSelected}=labels;const someSelectedRef=React.useRef(someSelected);someSelectedRef.current=someSelected;const allChildren=React.Children.toArray(children).filter(Boolean);const numEnabledOptions=allChildren.filter(option=>!option.props.disabled).length;const filteredItems=getMenuItems(allChildren);const isDisabled=numEnabledOptions===0||disabled;const disableInteraction=isDisabled||readOnly;React.useEffect(()=>{if(searchText){handleAnnouncement(someSelectedRef.current(filteredItems.length));}},[filteredItems.length,someSelectedRef]);return jsx(Id,{id:dropdownId,children:uniqueDropdownId=>jsx(DropdownCore$1,{id:uniqueDropdownId,role:"listbox",alignment:alignment,dropdownStyle:[isFilterable&&filterableDropdownStyle,selectDropdownStyle,dropdownStyle],isFilterable:isFilterable,items:[...getShortcuts(numEnabledOptions),...filteredItems],onOpenChanged:handleOpenChanged,open:open,opener:renderOpener(allChildren,isDisabled,uniqueDropdownId),openerElement:openerElement,selectionType:"multi",style:style,className:className,onSearchTextChanged:isFilterable?handleSearchTextChanged:undefined,searchText:isFilterable?searchText:"",labels:{clearSearch,filter,noResults,someResults:someSelected},"aria-invalid":ariaInvalid,"aria-required":computedRequired,disabled:disableInteraction})})};
+const MultiSelect=props=>{const isInitialRender=React.useRef(true);const{id,opener,testId,alignment="left",dropdownStyle,implicitAllEnabled,isFilterable,labels:propLabels,onChange,onToggle,opened,selectedValues=[],shortcuts=false,style,className,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled=false,readOnly=false,error=false,children,dropdownId,showOpenerLabelAsText=true,validate,onValidate,required,...sharedProps}=props;const labels=React.useMemo(()=>{return {...defaultLabels,...propLabels}},[propLabels]);const[open,setOpen]=React.useState(false);const[searchText,setSearchText]=React.useState("");const[lastSelectedValues,setLastSelectedValues]=React.useState([]);const[openerElement,setOpenerElement]=React.useState();const{errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}=useSelectValidation({value:selectedValues,disabled,validate,onValidate,required,open});const hasError=error||!!errorMessage;React.useEffect(()=>{if(disabled||readOnly){setOpen(false);}else if(typeof opened==="boolean"){setOpen(opened);}},[disabled,opened,readOnly]);const handleOpenChanged=opened=>{setOpen(opened);setSearchText("");setLastSelectedValues(selectedValues);if(onToggle){onToggle(opened);}if(!opened){if(lastSelectedValues!==selectedValues){onSelectionValidation(selectedValues);}else {onDropdownClosedValidation();}}};const handleToggle=selectedValue=>{if(selectedValues.includes(selectedValue)){const index=selectedValues.indexOf(selectedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,selectedValue]);}onSelectedValuesChangeValidation();};const handleSelectAll=()=>{const allChildren=React.Children.toArray(children);const selected=allChildren.filter(option=>!!option&&!option.props.disabled).map(option=>option.props.value);onChange(selected);onSelectedValuesChangeValidation();};const handleSelectNone=()=>{onChange([]);onSelectedValuesChangeValidation();};const getMenuTextOrNode=React.useCallback(children=>{const{noneSelected,someSelected,allSelected}=labels;const numSelectedAll=children.filter(option=>!option.props.disabled).length;const noSelectionText=implicitAllEnabled?allSelected:noneSelected;switch(selectedValues.length){case 0:return noSelectionText;case 1:const selectedItem=children.find(option=>option.props.value===selectedValues[0]);if(selectedItem){const selectedLabel=getSelectOpenerLabel(showOpenerLabelAsText,selectedItem?.props);if(selectedLabel){return selectedLabel}else {return someSelected(1)}}return noSelectionText;case numSelectedAll:return allSelected;default:return someSelected(selectedValues.length)}},[implicitAllEnabled,labels,selectedValues,showOpenerLabelAsText]);const getShortcuts=numOptions=>{const{selectAllLabel,selectNoneLabel}=labels;if(shortcuts&&!searchText){const selectAllDisabled=numOptions===selectedValues.length;const selectAll={component:jsx(ActionItem,{disabled:selectAllDisabled,label:selectAllLabel(numOptions),indent:true,onClick:handleSelectAll}),focusable:!selectAllDisabled,populatedProps:{}};const selectNoneDisabled=selectedValues.length===0;const selectNone={component:jsx(ActionItem,{disabled:selectNoneDisabled,label:selectNoneLabel,indent:true,onClick:handleSelectNone}),focusable:!selectNoneDisabled,populatedProps:{}};const separator={component:jsx(SeparatorItem,{},"shortcuts-separator"),focusable:false,populatedProps:{}};return [selectAll,selectNone,separator]}else {return []}};const getMenuItems=children=>{if(!isFilterable){return children.map(mapOptionItemToDropdownItem)}const lowercasedSearchText=searchText.toLowerCase();const filteredChildren=children.filter(({props})=>!searchText||getLabel(props).toLowerCase().indexOf(lowercasedSearchText)>-1);const lastSelectedChildren=[];const restOfTheChildren=[];for(const child of filteredChildren){if(lastSelectedValues.includes(child.props.value)){lastSelectedChildren.push(child);}else {restOfTheChildren.push(child);}}const lastSelectedItems=lastSelectedChildren.map(mapOptionItemToDropdownItem);if(lastSelectedChildren.length&&restOfTheChildren.length){lastSelectedItems.push({component:jsx(SeparatorItem,{},"selected-separator"),focusable:false,populatedProps:{}});}return [...lastSelectedItems,...restOfTheChildren.map(mapOptionItemToDropdownItem)]};const mapOptionItemToDropdownItem=option=>{const{disabled,value}=option.props;return {component:option,focusable:!disabled,populatedProps:{onToggle:handleToggle,selected:selectedValues.includes(value),variant:"checkbox"}}};const handleOpenerRef=node=>{const openerElement=ReactDOM.findDOMNode(node);setOpenerElement(openerElement);};const handleSearchTextChanged=searchText=>{setSearchText(searchText);};const handleClick=e=>{handleOpenChanged(!open);};const handleAnnouncement=message=>{announceMessage({message,level:"polite"});};const maybeGetOpenerStringValue=React.useCallback((children,openerContent)=>{let openerStringValue;if(selectedValues.length===1){const selectedItem=children.find(option=>option.props.value===selectedValues[0]);openerStringValue=selectedItem?getLabel(selectedItem?.props):undefined;}else if(typeof openerContent==="string"){openerStringValue=openerContent;}return openerStringValue},[selectedValues]);const prevOpenRef=React.useRef(open);const selectionChangedRef=React.useRef(false);const childrenRef=React.useRef(children);childrenRef.current=children;const getMenuTextOrNodeRef=React.useRef(getMenuTextOrNode);getMenuTextOrNodeRef.current=getMenuTextOrNode;const maybeGetOpenerStringValueRef=React.useRef(maybeGetOpenerStringValue);maybeGetOpenerStringValueRef.current=maybeGetOpenerStringValue;const announceOpenerValue=()=>{const optionItems=React.Children.toArray(childrenRef.current);const openerContent=getMenuTextOrNodeRef.current(optionItems);const openerStringValue=maybeGetOpenerStringValueRef.current(optionItems,openerContent);if(openerStringValue){handleAnnouncement(openerStringValue);}};React.useEffect(()=>{if(isInitialRender.current){isInitialRender.current=false;prevOpenRef.current=open;return}const justOpened=open&&!prevOpenRef.current;const justClosed=!open&&prevOpenRef.current;prevOpenRef.current=open;if(justOpened){selectionChangedRef.current=false;}else if(justClosed){if(selectionChangedRef.current){announceOpenerValue();selectionChangedRef.current=false;}}else if(open){selectionChangedRef.current=true;announceOpenerValue();}},[selectedValues,open]);const computedRequired=ariaRequired??!!required;const renderOpener=(allChildren,isDisabled,dropdownId)=>{const{noneSelected}=labels;const openerContent=getMenuTextOrNode(allChildren);const dropdownOpener=jsx(Id,{id:id,children:uniqueOpenerId=>{return opener?jsx(DropdownOpener,{id:uniqueOpenerId,error:hasError,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-required":computedRequired,"aria-haspopup":"listbox",onClick:handleClick,onBlur:onOpenerBlurValidation,disabled:isDisabled,ref:handleOpenerRef,role:"combobox",text:openerContent,opened:open,readOnly:readOnly,children:opener}):jsx(SelectOpener,{...sharedProps,error:hasError,disabled:isDisabled,id:uniqueOpenerId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-controls":dropdownId,"aria-required":computedRequired,isPlaceholder:openerContent===noneSelected,onOpenChanged:handleOpenChanged,onBlur:onOpenerBlurValidation,open:open,ref:handleOpenerRef,testId:testId,readOnly:readOnly,children:openerContent})}});return dropdownOpener};const{clearSearch,filter,noResults,someSelected}=labels;const listboxLabelProps=getListboxLabelProps({ariaLabel,ariaLabelledBy,openerElement});const someSelectedRef=React.useRef(someSelected);someSelectedRef.current=someSelected;const allChildren=React.Children.toArray(children).filter(Boolean);const numEnabledOptions=allChildren.filter(option=>!option.props.disabled).length;const filteredItems=getMenuItems(allChildren);const isDisabled=numEnabledOptions===0||disabled;const disableInteraction=isDisabled||readOnly;React.useEffect(()=>{if(searchText){handleAnnouncement(someSelectedRef.current(filteredItems.length));}},[filteredItems.length,someSelectedRef]);return jsx(Id,{id:dropdownId,children:uniqueDropdownId=>jsx(DropdownCore$1,{id:uniqueDropdownId,role:"listbox",alignment:alignment,dropdownStyle:[isFilterable&&filterableDropdownStyle,selectDropdownStyle,dropdownStyle],isFilterable:isFilterable,items:[...getShortcuts(numEnabledOptions),...filteredItems],onOpenChanged:handleOpenChanged,open:open,opener:renderOpener(allChildren,isDisabled,uniqueDropdownId),openerElement:openerElement,selectionType:"multi",style:style,className:className,onSearchTextChanged:isFilterable?handleSearchTextChanged:undefined,searchText:isFilterable?searchText:"",labels:{clearSearch,filter,noResults,someResults:someSelected},...listboxLabelProps,"aria-invalid":ariaInvalid,"aria-required":computedRequired,disabled:disableInteraction})})};
 
 function updateMultipleSelection(previousSelection,value=""){if(!previousSelection){return [value]}return previousSelection.includes(value)?previousSelection.filter(item=>item!==value):[...previousSelection,value]}
 
@@ -84,7 +84,7 @@ const MultipleSelection=React.memo(function SelectedPills({disabled,focusedMulti
 
 function StandaloneListbox(props){const{children,disabled,id,onChange,selectionType="single",style,tabIndex=0,testId,value,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const{focusedIndex,isListboxFocused,renderList,selected,handleKeyDown,handleKeyUp,handleFocus,handleBlur}=useListbox({children,disabled,id:uniqueId,selectionType,value});React.useEffect(()=>{if(selected&&selected!==value){onChange?.(selected);}},[onChange,selected,value]);return jsx(View,{role:"listbox",id:uniqueId,style:[styles$2.listbox,style,disabled&&styles$2.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,onFocus:handleFocus,onBlur:handleBlur,"aria-activedescendant":isListboxFocused?renderList[focusedIndex].props.id:undefined,children:renderList})}function Listbox(props){const{children,disabled,id,selectionType="single",style,tabIndex=0,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;if(tabIndex===0){return jsx(StandaloneListbox,{...props})}return jsx(View,{role:"listbox",id:id,style:[styles$2.listbox,style,disabled&&styles$2.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const styles$2=StyleSheet.create({listbox:{backgroundColor:semanticColor.core.background.base.default,outline:"none",paddingBlock:theme$3.listbox.layout.padding.block,paddingInline:theme$3.listbox.layout.padding.inline},disabled:{color:semanticColor.action.secondary.disabled.foreground}});
 
-function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value="","aria-label":ariaLabel}){const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React.useRef(null);const rootNodeRef=React.useRef(null);const[open,setOpen]=React.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React.useState(initialValue);const updateAfterSelectionChange=React.useCallback(value=>{setSelected(value);onChange?.(value);},[onChange,setSelected]);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,onRemove:updateAfterSelectionChange,isComboboxOpen:openState});const updateOpenState=React.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemoveClick=React.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);updateAfterSelectionChange(newValues);},[selected,updateAfterSelectionChange]);const handleTextFieldChange=React.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?semanticColor.core.foreground.disabled.default:startIcon.props.color??semanticColor.core.foreground.neutral.default});return jsx(View,{style:styles$1.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxs(Fragment,{children:[jsxs(View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles$1.wrapper,isListboxFocused&&styles$1.focused,disabled&&styles$1.disabled,!disabled&&error&&styles$1.error],children:[jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemoveClick,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsx(TextField,{"aria-label":ariaLabel,id:textFieldId,testId:testId,style:styles$1.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsx(IconButton,{icon:xIcon,onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsx(IconButton,{disabled:disabled,icon:caretDownIcon$1,onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.openButtonResetStates,openState&&styles$1.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsx(View,{onMouseDown:e=>{e.preventDefault();},children:renderList.length===0?jsx(DetailCell,{title:labels.noItems,styles:{root:[styles$1.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles$1.listbox,isReferenceHidden&&styles$1.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles$1=StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxInlineSize:"100%",flexWrap:"wrap",background:semanticColor.core.background.base.default,borderRadius:theme$3.opener.border.radius.rest,border:`${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`,paddingInline:theme$3.opener.layout.padding.inline,overflow:"hidden"},focused:focusStyles.focus[":focus-visible"],disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground},error:{background:semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minInlineSize:sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none",boxShadow:"none"},[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"}},listbox:{backgroundColor:semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,border:`solid ${border.width.thin} ${semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",insetInlineEnd:sizing.size_0,margin:0},buttonOpen:{transform:"rotate(180deg)"},openButtonResetStates:{":hover":{borderColor:semanticColor.core.transparent},":active":{borderColor:semanticColor.core.transparent},":focus-visible":{outline:"none",boxShadow:"none"}},clearButton:{insetInlineEnd:sizing.size_360},iconWrapper:{padding:sizing.size_040,minInlineSize:"auto"}});
+function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value="",loading,style,...ariaAttrs}){const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React.useRef(null);const rootNodeRef=React.useRef(null);const[open,setOpen]=React.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React.useState(initialValue);const updateAfterSelectionChange=React.useCallback(value=>{setSelected(value);onChange?.(value);},[onChange,setSelected]);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,onRemove:updateAfterSelectionChange,isComboboxOpen:openState});const updateOpenState=React.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemoveClick=React.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);updateAfterSelectionChange(newValues);},[selected,updateAfterSelectionChange]);const handleTextFieldChange=React.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?semanticColor.core.foreground.disabled.default:startIcon.props.color??semanticColor.core.foreground.neutral.default});return jsx(View,{style:styles$1.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxs(Fragment,{children:[jsxs(View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles$1.wrapper,isListboxFocused&&styles$1.focused,disabled&&styles$1.disabled,!disabled&&error&&styles$1.error],children:[jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemoveClick,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsx(TextField,{id:textFieldId,testId:testId,style:[styles$1.combobox,style],value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox",...ariaAttrs}),inputValue&&!disabled&&jsx(IconButton,{icon:xIcon,onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsx(IconButton,{disabled:disabled,icon:caretDownIcon$1,onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.openButtonResetStates,openState&&styles$1.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsx(View,{onMouseDown:e=>{e.preventDefault();},children:renderList.length===0?jsx(DetailCell,{title:labels.noItems,styles:{root:[styles$1.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles$1.listbox,isReferenceHidden&&styles$1.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles$1=StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxInlineSize:"100%",flexWrap:"wrap",background:semanticColor.core.background.base.default,borderRadius:theme$3.opener.border.radius.rest,border:`${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`,paddingInline:theme$3.opener.layout.padding.inline,overflow:"hidden"},focused:focusStyles.focus[":focus-visible"],disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground},error:{background:semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minInlineSize:sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none",boxShadow:"none"},[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"}},listbox:{backgroundColor:semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,border:`solid ${border.width.thin} ${semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",insetInlineEnd:sizing.size_0,margin:0},buttonOpen:{transform:"rotate(180deg)"},openButtonResetStates:{":hover":{borderColor:semanticColor.core.transparent},":active":{borderColor:semanticColor.core.transparent},":focus-visible":{outline:"none",boxShadow:"none"}},clearButton:{insetInlineEnd:sizing.size_360},iconWrapper:{padding:sizing.size_040,minInlineSize:"auto"}});
 
 const StyledButton=addStyle("button");const CustomOpener=React.forwardRef(function CustomOpener(props,ref){const{children,disabled,onClick,styles:stylesProp,testId,...restProps}=props;const injectedAriaDisabled=restProps["aria-disabled"];const ariaDisabled=injectedAriaDisabled??(disabled||undefined);return jsx(StyledButton,{...restProps,ref:ref,type:"button","aria-disabled":ariaDisabled,onClick:disabled?undefined:onClick,"data-testid":testId,style:[styles.reset,disabled&&styles.disabled,stylesProp?.root],children:jsx(BodyText,{tag:"span",style:[styles.labelReset,stylesProp?.label],children:children})})});CustomOpener.displayName="CustomOpener";const styles=StyleSheet.create({reset:{appearance:"none",background:"none",border:"none",boxSizing:"border-box",cursor:"pointer",font:"inherit",margin:0,padding:0,textAlign:"inherit",touchAction:"manipulation",...focusStyles.focus},labelReset:{alignItems:"center",display:"flex",flexDirection:"row",gap:sizing.size_020},disabled:{cursor:"not-allowed"}});
 

package/dist/index.js

@@ -86,9 +86,9 @@ function modifyMaxHeight({state,options}){const overflow=core.detectOverflow(sta
 
 const modifiers=[{name:"preventOverflow",options:{rootBoundary:"viewport",altAxis:true,tether:false}},maxHeightModifier];const DropdownPopper=function({children,alignment="left",onPopperElement,referenceElement}){const modalHost=wonderBlocksModal.maybeGetPortalMountedModalHostElement(referenceElement)||document.querySelector("body");if(!modalHost){return null}const placement=alignment==="left"?"bottom-start":alignment==="right"?"bottom-end":alignment;return ReactDOM__namespace.createPortal(jsxRuntime.jsx(reactPopper.Popper,{innerRef:node=>{if(node&&onPopperElement){onPopperElement(node);}},referenceElement:referenceElement,strategy:"fixed",placement:placement,modifiers:modifiers,children:({placement,ref,style,hasPopperEscaped,isReferenceHidden})=>{const shouldHidePopper=!!(hasPopperEscaped||isReferenceHidden);return jsxRuntime.jsx("div",{ref:ref,style:{...style,maxInlineSize:"100%"},"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
 
-function getStringForKey(key){if(key.length===1||!/^[A-Z]/i.test(key)){return key}return ""}function debounce(callback,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);callback(...args);};clearTimeout(timeout);timeout=setTimeout(later,wait);}}function isString(x){return typeof x==="string"}function getLabel(props){if(isString(props.label)){return props.label}if(isString(props.labelAsText)){return props.labelAsText}return ""}function getSelectOpenerLabel(showOpenerLabelAsText,props){if(showOpenerLabelAsText){return getLabel(props)}return props.label}
+function getStringForKey(key){if(key.length===1||!/^[A-Z]/i.test(key)){return key}return ""}function debounce(callback,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);callback(...args);};clearTimeout(timeout);timeout=setTimeout(later,wait);}}function isString(x){return typeof x==="string"}function getLabel(props){if(isString(props.label)){return props.label}if(isString(props.labelAsText)){return props.labelAsText}return ""}function getSelectOpenerLabel(showOpenerLabelAsText,props){if(showOpenerLabelAsText){return getLabel(props)}return props.label}function getListboxLabelProps({ariaLabel,ariaLabelledBy,openerElement}){const openerLabel=getOpenerLabel(openerElement);const labelId=ariaLabelledBy||openerLabel?.id;if(labelId){return {"aria-labelledby":labelId}}const label=openerLabel?.textContent||ariaLabel;return label?{"aria-label":label}:{}}function getOpenerLabel(openerElement){if(!openerElement||!("labels"in openerElement)){return undefined}return openerElement.labels?.[0]}
 
-const VIRTUALIZE_THRESHOLD=125;class DropdownCore extends React__namespace.Component{static sameItemsFocusable(prevItems,currentItems){if(prevItems.length!==currentItems.length){return false}for(let i=0;i<prevItems.length;i++){if(prevItems[i].focusable!==currentItems[i].focusable){return false}}return true}static getDerivedStateFromProps(props,state){if(state.itemRefs.length===0&&props.open||!DropdownCore.sameItemsFocusable(state.prevItems,props.items)){const itemRefs=[];for(let i=0;i<props.items.length;i++){if(props.items[i].focusable){const ref=React__namespace.createRef();itemRefs.push({ref,originalIndex:i});}}return {itemRefs,prevItems:props.items,sameItemsFocusable:false}}else {return {prevItems:props.items,sameItemsFocusable:true}}}componentDidMount(){this.updateEventListeners();this.maybeFocusInitialItem();}componentDidUpdate(prevProps){const{open,searchText}=this.props;if(prevProps.open!==open){this.updateEventListeners();this.maybeFocusInitialItem();}else if(open){const{itemRefs,sameItemsFocusable}=this.state;if(sameItemsFocusable||prevProps.searchText!==searchText){return}else {const newFocusableIndex=itemRefs.findIndex(ref=>ref.originalIndex===this.focusedOriginalIndex);if(newFocusableIndex===-1){this.focusedIndex=0;this.itemsClicked=false;this.scheduleToFocusCurrentItem();}else {this.focusedIndex=newFocusableIndex;}}if(this.props.labels!==prevProps.labels){this.setState({labels:{...this.state.labels,...this.props.labels}});}}}componentWillUnmount(){this.removeEventListeners();}resetFocusedIndex(){const{initialFocusedIndex}=this.props;if(typeof initialFocusedIndex!=="undefined"){this.focusedIndex=initialFocusedIndex;}else {if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}}maybeFocusInitialItem(){const{autoFocus,open}=this.props;if(!autoFocus){return}if(open){this.resetFocusedIndex();this.scheduleToFocusCurrentItem();}else if(!open){this.itemsClicked=false;}}updateEventListeners(){if(this.props.open){this.addEventListeners();}else {this.removeEventListeners();}}addEventListeners(){document.addEventListener("mouseup",this.handleInteract);document.addEventListener("touchend",this.handleInteract);}removeEventListeners(){document.removeEventListener("mouseup",this.handleInteract);document.removeEventListener("touchend",this.handleInteract);}scheduleToFocusCurrentItem(onFocus){if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(()=>{this.focusCurrentItem(onFocus);});}else {this.focusCurrentItem(onFocus);}}focusCurrentItem(onFocus){const focusedItemRef=this.state.itemRefs[this.focusedIndex];if(!focusedItemRef){return}const{current:virtualizedList}=this.virtualizedListRef;if(virtualizedList){virtualizedList.scrollToItem(focusedItemRef.originalIndex);}const focusNode=()=>{if(!this.props.open){return}const currentFocusedItemRef=this.state.itemRefs[this.focusedIndex];const node=ReactDOM__namespace.findDOMNode(currentFocusedItemRef.ref.current);if(!node&&this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);return}if(node){this.props.schedule.timeout(()=>{node.focus();},0);this.focusedOriginalIndex=currentFocusedItemRef.originalIndex;if(onFocus){onFocus(node);}}};if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);}else {focusNode();}}focusSearchField(){if(this.searchFieldRef.current){this.searchFieldRef.current.focus();}}hasSearchField(){return !!this.props.isFilterable}isSearchFieldFocused(){return this.hasSearchField()&&document.activeElement===this.searchFieldRef.current}focusPreviousItem(){if(this.isSearchFieldFocused()){this.focusedIndex=this.state.itemRefs.length-1;}else if(this.focusedIndex===0){if(this.hasSearchField()){return this.focusSearchField()}this.focusedIndex=this.state.itemRefs.length-1;}else {this.focusedIndex-=1;}this.scheduleToFocusCurrentItem();}focusNextItem(){if(this.isSearchFieldFocused()){this.focusedIndex=0;}else if(this.focusedIndex===this.state.itemRefs.length-1){if(this.hasSearchField()){return this.focusSearchField()}this.focusedIndex=0;}else {this.focusedIndex+=1;}this.scheduleToFocusCurrentItem();}restoreTabOrder(){if(this.props.openerElement){this.props.openerElement.focus();}}getItemRole(){const{role}=this.props;switch(role){case"listbox":return "option";case"menu":return "menuitem";default:throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`)}}maybeRenderNoResults(){const{items,labels:{noResults}}=this.props;const numResults=items.length;if(numResults===0){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:styles$8.noResult,testId:"dropdown-core-no-results",children:noResults})}return null}shouldVirtualizeList(){return this.props.items.length>VIRTUALIZE_THRESHOLD}renderList(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{if(SeparatorItem.isClassOf(item.component)){return item.component}const{component,focusable,populatedProps}=item;if(focusable){focusCounter+=1;}const focusIndex=focusCounter-1;const currentRef=this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null;return React__namespace.cloneElement(component,{...populatedProps,key:index,onClick:()=>{this.handleItemClick(focusIndex,item);},ref:focusable?currentRef:null,role:populatedProps.role||itemRole})})}parseVirtualizedItems(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{const{populatedProps}=item;if(!SeparatorItem.isClassOf(item.component)&&item.focusable){focusCounter+=1;}const focusIndex=focusCounter-1;return {...item,role:populatedProps.role||itemRole,ref:item.focusable&&this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null,onClick:()=>{this.handleItemClick(focusIndex,item);}}})}renderVirtualizedList(){const virtualizedItems=this.parseVirtualizedItems();return jsxRuntime.jsx(DropdownCoreVirtualized$1,{data:virtualizedItems,listRef:this.virtualizedListRef})}renderSearchField(){const{searchText}=this.props;const{labels}=this.state;return jsxRuntime.jsx(SearchField__default["default"],{clearAriaLabel:labels.clearSearch,onChange:this.handleSearchTextChanged,placeholder:labels.filter,ref:this.searchFieldRef,style:styles$8.searchInputStyle,value:searchText||""})}renderDropdownMenu(listRenderer,isReferenceHidden){const{"aria-invalid":ariaInvalid,"aria-labelledby":ariaLabelledby,"aria-required":ariaRequired,dropdownStyle,isFilterable,openerElement,role,id}=this.props;const openerStyle=openerElement&&window.getComputedStyle(openerElement);const minDropdownWidth=openerStyle?openerStyle.getPropertyValue("width"):0;return jsxRuntime.jsxs(wonderBlocksCore.View,{onMouseUp:this.handleDropdownMouseUp,style:[styles$8.dropdown,isReferenceHidden&&styles$8.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,"aria-labelledby":ariaLabelledby,style:[styles$8.listboxOrMenu,{minInlineSize:minDropdownWidth}],"aria-invalid":role==="listbox"?ariaInvalid:undefined,"aria-required":role==="listbox"?ariaRequired:undefined,children:listRenderer}),this.maybeRenderNoResults()]})}renderDropdown(){const{alignment,openerElement}=this.props;const listRenderer=this.shouldVirtualizeList()?this.renderVirtualizedList():this.renderList();return jsxRuntime.jsx(DropdownPopper,{alignment:alignment,onPopperElement:popperElement=>{this.popperElement=popperElement;},referenceElement:openerElement,children:isReferenceHidden=>this.renderDropdownMenu(listRenderer,isReferenceHidden)})}render(){const{open,opener,style,className,disabled}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,style:[styles$8.menuWrapper,style],className:className,children:[opener,open&&this.renderDropdown()]})}constructor(props){super(props),this.focusedIndex=-1,this.focusedOriginalIndex=-1,this.itemsClicked=false,this.searchFieldRef=React__namespace.createRef(),this.handleInteract=event=>{const{open,onOpenChanged}=this.props;const target=event.target;const thisElement=ReactDOM__namespace.findDOMNode(this);if(open&&thisElement&&!thisElement.contains(target)&&this.popperElement&&!this.popperElement.contains(target)){onOpenChanged(false);}},this.handleKeyDown=event=>{const{enableTypeAhead,onOpenChanged,open,searchText}=this.props;const key=event.key;if(enableTypeAhead&&getStringForKey(key)){event.stopPropagation();this.textSuggestion+=key;this.handleKeyDownDebounced(this.textSuggestion);}if(!open){if(key===wonderBlocksCore.keys.down){event.preventDefault();onOpenChanged(true);return}return}switch(key){case wonderBlocksCore.keys.tab:if(this.isSearchFieldFocused()&&searchText){return}this.restoreTabOrder();onOpenChanged(false);return;case wonderBlocksCore.keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case wonderBlocksCore.keys.up:event.preventDefault();this.focusPreviousItem();return;case wonderBlocksCore.keys.down:event.preventDefault();this.focusNextItem();return}},this.handleKeyUp=event=>{const{onOpenChanged,open}=this.props;const key=event.key;switch(key){case wonderBlocksCore.keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case wonderBlocksCore.keys.escape:if(open){event.stopPropagation();this.restoreTabOrder();onOpenChanged(false);}return}},this.handleKeyDownDebounceResult=key=>{const foundIndex=this.props.items.filter(item=>item.focusable).findIndex(({component})=>{if(SeparatorItem.isClassOf(component)){return false}if(OptionItem.isClassOf(component)){const optionItemProps=component.props;return getLabel(optionItemProps).toLowerCase().startsWith(key.toLowerCase())}return false});if(foundIndex>=0){const isClosed=!this.props.open;if(isClosed){this.props.onOpenChanged(true);}this.focusedIndex=foundIndex;this.scheduleToFocusCurrentItem(node=>{if(this.props.selectionType==="single"&&isClosed&&node){node.click();this.props.onOpenChanged(false);}});}this.textSuggestion="";},this.handleClickFocus=index=>{this.itemsClicked=true;this.focusedIndex=index;this.focusedOriginalIndex=this.state.itemRefs[this.focusedIndex].originalIndex;},this.handleDropdownMouseUp=event=>{if(event.nativeEvent.stopImmediatePropagation){event.nativeEvent.stopImmediatePropagation();}else {event.stopPropagation();}},this.handleItemClick=(focusIndex,item)=>{this.handleClickFocus(focusIndex);if(item.component.props.onClick){item.component.props.onClick();}if(item.populatedProps.onClick){item.populatedProps.onClick();}},this.handleSearchTextChanged=searchText=>{const{onSearchTextChanged}=this.props;if(onSearchTextChanged){onSearchTextChanged(searchText);}};this.resetFocusedIndex();this.state={prevItems:this.props.items,itemRefs:[],sameItemsFocusable:false,labels:{noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected,...props.labels}};this.virtualizedListRef=React__namespace.createRef();this.handleKeyDownDebounced=debounce(this.handleKeyDownDebounceResult,500);this.textSuggestion="";}}DropdownCore.defaultProps={alignment:"left",autoFocus:true,enableTypeAhead:true,labels:{clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},selectionType:"single"};const styles$8=aphrodite.StyleSheet.create({menuWrapper:{width:"fit-content",maxInlineSize:"100%"},dropdown:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,paddingBlock:theme$3.listbox.layout.padding.block,paddingInline:theme$3.listbox.layout.padding.inline,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,alignSelf:"center",marginBlockStart:wonderBlocksTokens.sizing.size_060},searchInputStyle:{margin:wonderBlocksTokens.sizing.size_080,marginBlockStart:wonderBlocksTokens.sizing.size_040,minBlockSize:"auto",position:"sticky"},srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});var DropdownCore$1 = wonderBlocksTiming.withActionScheduler(DropdownCore);
+const VIRTUALIZE_THRESHOLD=125;class DropdownCore extends React__namespace.Component{static sameItemsFocusable(prevItems,currentItems){if(prevItems.length!==currentItems.length){return false}for(let i=0;i<prevItems.length;i++){if(prevItems[i].focusable!==currentItems[i].focusable){return false}}return true}static getDerivedStateFromProps(props,state){if(state.itemRefs.length===0&&props.open||!DropdownCore.sameItemsFocusable(state.prevItems,props.items)){const itemRefs=[];for(let i=0;i<props.items.length;i++){if(props.items[i].focusable){const ref=React__namespace.createRef();itemRefs.push({ref,originalIndex:i});}}return {itemRefs,prevItems:props.items,sameItemsFocusable:false}}else {return {prevItems:props.items,sameItemsFocusable:true}}}componentDidMount(){this.updateEventListeners();this.maybeFocusInitialItem();}componentDidUpdate(prevProps){const{open,searchText}=this.props;if(prevProps.open!==open){this.updateEventListeners();this.maybeFocusInitialItem();}else if(open){const{itemRefs,sameItemsFocusable}=this.state;if(sameItemsFocusable||prevProps.searchText!==searchText){return}else {const newFocusableIndex=itemRefs.findIndex(ref=>ref.originalIndex===this.focusedOriginalIndex);if(newFocusableIndex===-1){this.focusedIndex=0;this.itemsClicked=false;this.scheduleToFocusCurrentItem();}else {this.focusedIndex=newFocusableIndex;}}if(this.props.labels!==prevProps.labels){this.setState({labels:{...this.state.labels,...this.props.labels}});}}}componentWillUnmount(){this.removeEventListeners();}resetFocusedIndex(){const{initialFocusedIndex}=this.props;if(typeof initialFocusedIndex!=="undefined"){this.focusedIndex=initialFocusedIndex;}else {if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}}maybeFocusInitialItem(){const{autoFocus,open}=this.props;if(!autoFocus){return}if(open){this.resetFocusedIndex();this.scheduleToFocusCurrentItem();}else if(!open){this.itemsClicked=false;}}updateEventListeners(){if(this.props.open){this.addEventListeners();}else {this.removeEventListeners();}}addEventListeners(){document.addEventListener("mouseup",this.handleInteract);document.addEventListener("touchend",this.handleInteract);}removeEventListeners(){document.removeEventListener("mouseup",this.handleInteract);document.removeEventListener("touchend",this.handleInteract);}scheduleToFocusCurrentItem(onFocus){if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(()=>{this.focusCurrentItem(onFocus);});}else {this.focusCurrentItem(onFocus);}}focusCurrentItem(onFocus){const focusedItemRef=this.state.itemRefs[this.focusedIndex];if(!focusedItemRef){return}const{current:virtualizedList}=this.virtualizedListRef;if(virtualizedList){virtualizedList.scrollToItem(focusedItemRef.originalIndex);}const focusNode=()=>{if(!this.props.open){return}const currentFocusedItemRef=this.state.itemRefs[this.focusedIndex];const node=ReactDOM__namespace.findDOMNode(currentFocusedItemRef.ref.current);if(!node&&this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);return}if(node){this.props.schedule.timeout(()=>{node.focus();},0);this.focusedOriginalIndex=currentFocusedItemRef.originalIndex;if(onFocus){onFocus(node);}}};if(this.shouldVirtualizeList()){this.props.schedule.animationFrame(focusNode);}else {focusNode();}}focusSearchField(){if(this.searchFieldRef.current){this.searchFieldRef.current.focus();}}hasSearchField(){return !!this.props.isFilterable}isSearchFieldFocused(){return this.hasSearchField()&&document.activeElement===this.searchFieldRef.current}focusPreviousItem(){if(this.isSearchFieldFocused()){this.focusedIndex=this.state.itemRefs.length-1;}else if(this.focusedIndex===0){if(this.hasSearchField()){return this.focusSearchField()}this.focusedIndex=this.state.itemRefs.length-1;}else {this.focusedIndex-=1;}this.scheduleToFocusCurrentItem();}focusNextItem(){if(this.isSearchFieldFocused()){this.focusedIndex=0;}else if(this.focusedIndex===this.state.itemRefs.length-1){if(this.hasSearchField()){return this.focusSearchField()}this.focusedIndex=0;}else {this.focusedIndex+=1;}this.scheduleToFocusCurrentItem();}restoreTabOrder(){if(this.props.openerElement){this.props.openerElement.focus();}}getItemRole(){const{role}=this.props;switch(role){case"listbox":return "option";case"menu":return "menuitem";default:throw new Error(`Expected "listbox" or "menu" for role, but receieved "${role}" instead.`)}}maybeRenderNoResults(){const{items,labels:{noResults}}=this.props;const numResults=items.length;if(numResults===0){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:styles$8.noResult,testId:"dropdown-core-no-results",children:noResults})}return null}shouldVirtualizeList(){return this.props.items.length>VIRTUALIZE_THRESHOLD}renderList(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{if(SeparatorItem.isClassOf(item.component)){return item.component}const{component,focusable,populatedProps}=item;if(focusable){focusCounter+=1;}const focusIndex=focusCounter-1;const currentRef=this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null;return React__namespace.cloneElement(component,{...populatedProps,key:index,onClick:()=>{this.handleItemClick(focusIndex,item);},ref:focusable?currentRef:null,role:populatedProps.role||itemRole})})}parseVirtualizedItems(){let focusCounter=0;const itemRole=this.getItemRole();return this.props.items.map((item,index)=>{const{populatedProps}=item;if(!SeparatorItem.isClassOf(item.component)&&item.focusable){focusCounter+=1;}const focusIndex=focusCounter-1;return {...item,role:populatedProps.role||itemRole,ref:item.focusable&&this.state.itemRefs[focusIndex]?this.state.itemRefs[focusIndex].ref:null,onClick:()=>{this.handleItemClick(focusIndex,item);}}})}renderVirtualizedList(){const virtualizedItems=this.parseVirtualizedItems();return jsxRuntime.jsx(DropdownCoreVirtualized$1,{data:virtualizedItems,listRef:this.virtualizedListRef})}renderSearchField(){const{searchText}=this.props;const{labels}=this.state;return jsxRuntime.jsx(SearchField__default["default"],{clearAriaLabel:labels.clearSearch,onChange:this.handleSearchTextChanged,placeholder:labels.filter,ref:this.searchFieldRef,style:styles$8.searchInputStyle,value:searchText||""})}renderDropdownMenu(listRenderer,isReferenceHidden){const{"aria-invalid":ariaInvalid,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-required":ariaRequired,dropdownStyle,isFilterable,openerElement,role,id}=this.props;const openerStyle=openerElement&&window.getComputedStyle(openerElement);const minDropdownWidth=openerStyle?openerStyle.getPropertyValue("width"):0;return jsxRuntime.jsxs(wonderBlocksCore.View,{onMouseUp:this.handleDropdownMouseUp,style:[styles$8.dropdown,isReferenceHidden&&styles$8.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,style:[styles$8.listboxOrMenu,{minInlineSize:minDropdownWidth}],"aria-invalid":role==="listbox"?ariaInvalid:undefined,"aria-required":role==="listbox"?ariaRequired:undefined,children:listRenderer}),this.maybeRenderNoResults()]})}renderDropdown(){const{alignment,openerElement}=this.props;const listRenderer=this.shouldVirtualizeList()?this.renderVirtualizedList():this.renderList();return jsxRuntime.jsx(DropdownPopper,{alignment:alignment,onPopperElement:popperElement=>{this.popperElement=popperElement;},referenceElement:openerElement,children:isReferenceHidden=>this.renderDropdownMenu(listRenderer,isReferenceHidden)})}render(){const{open,opener,style,className,disabled}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,style:[styles$8.menuWrapper,style],className:className,children:[opener,open&&this.renderDropdown()]})}constructor(props){super(props),this.focusedIndex=-1,this.focusedOriginalIndex=-1,this.itemsClicked=false,this.searchFieldRef=React__namespace.createRef(),this.handleInteract=event=>{const{open,onOpenChanged}=this.props;const target=event.target;const thisElement=ReactDOM__namespace.findDOMNode(this);if(open&&thisElement&&!thisElement.contains(target)&&this.popperElement&&!this.popperElement.contains(target)){onOpenChanged(false);}},this.handleKeyDown=event=>{const{enableTypeAhead,onOpenChanged,open,searchText}=this.props;const key=event.key;if(enableTypeAhead&&getStringForKey(key)){event.stopPropagation();this.textSuggestion+=key;this.handleKeyDownDebounced(this.textSuggestion);}if(!open){if(key===wonderBlocksCore.keys.down){event.preventDefault();onOpenChanged(true);return}return}switch(key){case wonderBlocksCore.keys.tab:if(this.isSearchFieldFocused()&&searchText){return}this.restoreTabOrder();onOpenChanged(false);return;case wonderBlocksCore.keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case wonderBlocksCore.keys.up:event.preventDefault();this.focusPreviousItem();return;case wonderBlocksCore.keys.down:event.preventDefault();this.focusNextItem();return}},this.handleKeyUp=event=>{const{onOpenChanged,open}=this.props;const key=event.key;switch(key){case wonderBlocksCore.keys.space:if(this.isSearchFieldFocused()){return}event.preventDefault();return;case wonderBlocksCore.keys.escape:if(open){event.stopPropagation();this.restoreTabOrder();onOpenChanged(false);}return}},this.handleKeyDownDebounceResult=key=>{const foundIndex=this.props.items.filter(item=>item.focusable).findIndex(({component})=>{if(SeparatorItem.isClassOf(component)){return false}if(OptionItem.isClassOf(component)){const optionItemProps=component.props;return getLabel(optionItemProps).toLowerCase().startsWith(key.toLowerCase())}return false});if(foundIndex>=0){const isClosed=!this.props.open;if(isClosed){this.props.onOpenChanged(true);}this.focusedIndex=foundIndex;this.scheduleToFocusCurrentItem(node=>{if(this.props.selectionType==="single"&&isClosed&&node){node.click();this.props.onOpenChanged(false);}});}this.textSuggestion="";},this.handleClickFocus=index=>{this.itemsClicked=true;this.focusedIndex=index;this.focusedOriginalIndex=this.state.itemRefs[this.focusedIndex].originalIndex;},this.handleDropdownMouseUp=event=>{if(event.nativeEvent.stopImmediatePropagation){event.nativeEvent.stopImmediatePropagation();}else {event.stopPropagation();}},this.handleItemClick=(focusIndex,item)=>{this.handleClickFocus(focusIndex);if(item.component.props.onClick){item.component.props.onClick();}if(item.populatedProps.onClick){item.populatedProps.onClick();}},this.handleSearchTextChanged=searchText=>{const{onSearchTextChanged}=this.props;if(onSearchTextChanged){onSearchTextChanged(searchText);}};this.resetFocusedIndex();this.state={prevItems:this.props.items,itemRefs:[],sameItemsFocusable:false,labels:{noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected,...props.labels}};this.virtualizedListRef=React__namespace.createRef();this.handleKeyDownDebounced=debounce(this.handleKeyDownDebounceResult,500);this.textSuggestion="";}}DropdownCore.defaultProps={alignment:"left",autoFocus:true,enableTypeAhead:true,labels:{clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},selectionType:"single"};const styles$8=aphrodite.StyleSheet.create({menuWrapper:{width:"fit-content",maxInlineSize:"100%"},dropdown:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,paddingBlock:theme$3.listbox.layout.padding.block,paddingInline:theme$3.listbox.layout.padding.inline,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,alignSelf:"center",marginBlockStart:wonderBlocksTokens.sizing.size_060},searchInputStyle:{margin:wonderBlocksTokens.sizing.size_080,marginBlockStart:wonderBlocksTokens.sizing.size_040,minBlockSize:"auto",position:"sticky"},srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});var DropdownCore$1 = wonderBlocksTiming.withActionScheduler(DropdownCore);
 
 const textUnderlineOffset=wonderBlocksTokens.sizing.size_040;const theme$2={root:{border:{width:{primary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium},secondary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},tertiary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.none,press:wonderBlocksTokens.border.width.none}},offset:{primary:wonderBlocksTokens.border.width.medium,secondary:0,tertiary:0},radius:{default:wonderBlocksTokens.border.radius.radius_040,hover:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_040}},sizing:{height:{small:wonderBlocksTokens.sizing.size_320,medium:wonderBlocksTokens.sizing.size_400,large:wonderBlocksTokens.sizing.size_560},underline:{hover:wonderBlocksTokens.sizing.size_020,press:wonderBlocksTokens.sizing.size_010}},layout:{padding:{inline:{primary:{small:wonderBlocksTokens.sizing.size_160,medium:wonderBlocksTokens.sizing.size_160,large:wonderBlocksTokens.sizing.size_320},secondary:{small:wonderBlocksTokens.sizing.size_120,medium:wonderBlocksTokens.sizing.size_160,large:wonderBlocksTokens.sizing.size_180},tertiary:{small:wonderBlocksTokens.sizing.size_0,medium:wonderBlocksTokens.sizing.size_0,large:wonderBlocksTokens.sizing.size_0}}}},font:{size:{large:wonderBlocksTokens.sizing.size_180},lineHeight:{small:wonderBlocksTokens.sizing.size_220,default:wonderBlocksTokens.sizing.size_240,large:wonderBlocksTokens.sizing.size_260},weight:{default:wonderBlocksTokens.font.weight.bold},decoration:{hover:"underline",press:"underline"},offset:{default:textUnderlineOffset}}},icon:{margin:{inline:{inner:wonderBlocksTokens.sizing.size_060,outer:`calc(-1 * ${wonderBlocksTokens.border.width.medium})`}},padding:wonderBlocksTokens.sizing.size_020,sizing:{small:wonderBlocksTokens.sizing.size_160,medium:wonderBlocksTokens.sizing.size_240,large:wonderBlocksTokens.sizing.size_240}}};var theme$1=wonderBlocksTokens.mapValuesToCssVars(theme$2,"--wb-c-button-");function ButtonIcon({icon,size,style,testId}){const iconStyle={width:theme$1.icon.sizing[size],height:theme$1.icon.sizing[size]};const commonProps={style:[iconStyle,style],testId};const phosphorIconProps={...commonProps,color:"currentColor"};if(typeof icon!=="string"){return React__namespace.cloneElement(icon,commonProps)}switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...phosphorIconProps,size:"small",icon:icon});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...phosphorIconProps,size:"medium",icon:icon})}}const StyledA=wonderBlocksCore.addStyle("a");const StyledButton$2=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const ButtonUnstyled=React__namespace.forwardRef(function ButtonUnstyled(props,ref){const{children,disabled,href,id,kind,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,"data-kind":kind,id:id,role:"button",style:[styles$2$1.reset,style],...restProps};const inRouterContext=reactRouterDomV5Compat.useInRouterContext();if(href&&!disabled){return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsxRuntime.jsx(StyledButton$2,{type:type||"button",...commonProps,"aria-disabled":disabled,ref:ref,children:children})}});const styles$2$1=aphrodite.StyleSheet.create({reset:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",margin:0,padding:0,border:"none",cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",userSelect:"none",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}}});const ButtonCore=React__namespace.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,styles:stylesProp,id,waiting:_,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,...restProps}=props;const buttonStyles=_generateStyles$1(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const label=jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:size==="small"?"small":undefined,weight:size==="large"?"bold":undefined,tag:"span",style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxRuntime.jsxs(React__namespace.Fragment,{children:[startIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.iconWrapper,children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon,stylesProp?.startIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsxRuntime.jsx(wonderBlocksProgressSpinner.CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[sharedStyles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:endIcon,style:stylesProp?.endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,kind:kind,children:contents})});const sharedStyles=aphrodite.StyleSheet.create({shared:{height:theme$1.root.sizing.height.medium,paddingBlock:0},small:{height:theme$1.root.sizing.height.small},large:{height:theme$1.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme$1.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme$1.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme$1.root.font.lineHeight.small},largeText:{fontSize:theme$1.root.font.size.large,lineHeight:theme$1.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme$1.icon.margin.inline.outer,marginInlineEnd:theme$1.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme$1.icon.margin.inline.inner},iconWrapper:{padding:theme$1.icon.padding,minInlineSize:"auto"},endIconWrapper:{marginInlineStart:theme$1.icon.margin.inline.inner,marginInlineEnd:theme$1.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles$1$1={};const _generateStyles$1=(actionType="progressive",kind,size)=>{const buttonType=`${actionType}-${kind}-${size}`;if(styles$1$1[buttonType]){return styles$1$1[buttonType]}const paddingInline=theme$1.root.layout.padding.inline[kind][size];const borderWidthKind=theme$1.root.border.width[kind];const outlineOffsetKind=theme$1.root.border.offset[kind];const themeVariant=wonderBlocksTokens.semanticColor.action[kind][actionType];const disabledState=wonderBlocksTokens.semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,borderRadius:theme$1.root.border.radius.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const pressStyles={background:themeVariant.press.background,borderRadius:theme$1.root.border.radius.press,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.press} ${theme$1.root.sizing.underline.press}`}:undefined};const newStyles={default:{borderRadius:theme$1.root.border.radius.default,paddingInline:paddingInline,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,transition:"border-radius 0.1s ease-in-out",["@media (hover: hover)"]:{":hover":{background:themeVariant.hover.background,borderRadius:theme$1.root.border.radius.hover,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.hover} ${theme$1.root.sizing.underline.hover}`}:undefined}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},pressed:pressStyles,focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles}};styles$1$1[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$1$1[buttonType]};const Button=React__namespace.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onBlur,onFocus,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsxRuntime.jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:roleForEvents,type:type,onClick:onClick,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onBlur:onBlur,onFocus:onFocus,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>{return jsxRuntime.jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});const ActivityButtonCore=React__namespace.forwardRef(function ActivityButtonCore(props,ref){const{actionType="progressive",children,disabled=false,kind="primary",focused,pressed,styles:stylesProp,type=undefined,startIcon,endIcon,hovered:_,waiting:__,...restProps}=props;const buttonStyles=_generateStyles(actionType,disabled,kind);const sharedStyles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&!pressed&&focused&&buttonStyles.focused,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,kind:kind,ref:ref,style:sharedStyles,type:type,children:jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(wonderBlocksCore.View,{style:chonkyStyles,className:"chonky",children:[startIcon&&(typeof startIcon==="string"?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:startIcon,style:[styles$7.icon,stylesProp?.startIcon],"aria-hidden":"true"}):React__namespace.cloneElement(startIcon,{"aria-hidden":true,style:[styles$7.icon,stylesProp?.startIcon]})),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles$7.label,stylesProp?.label],children:children}),endIcon&&(typeof endIcon==="string"?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles$7.icon,stylesProp?.endIcon],"aria-hidden":"true"}):React__namespace.cloneElement(endIcon,{"aria-hidden":true,style:[styles$7.icon,stylesProp?.endIcon]}))]})})})});React__namespace.forwardRef(function ActivityButton(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,kind="primary",disabled=false,role,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onBlur,onFocus,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};const roleForEvents=href?"link":"button";const renderedRole=role==="link"||role==="button"?undefined:role;return jsxRuntime.jsx(ClickableBehavior,{disabled:disabled,href:href,role:roleForEvents,type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,onMouseDown:onMouseDown,onMouseUp:onMouseUp,onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onBlur:onBlur,onFocus:onFocus,...extraClickableProps,children:(state,restChildProps)=>{return jsxRuntime.jsx(ActivityButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,kind:kind,skipClientNav:skipClientNav,href:href,role:renderedRole,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})}})});const theme={root:{border:{width:{primary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},secondary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},tertiary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin}},radius:wonderBlocksTokens.border.radius.radius_120},layout:{padding:{block:wonderBlocksTokens.sizing.size_140,inline:wonderBlocksTokens.sizing.size_480}},shadow:{y:{rest:"6px",hover:"8px",press:wonderBlocksTokens.sizing.size_0}}},label:{color:{progressive:wonderBlocksTokens.semanticColor.core.foreground.instructive.default,neutral:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,disabled:wonderBlocksTokens.semanticColor.core.foreground.disabled.default},font:{lineHeight:wonderBlocksTokens.sizing.size_140},layout:{padding:{blockStart:wonderBlocksTokens.sizing.size_040,blockEnd:wonderBlocksTokens.sizing.size_060},width:wonderBlocksTokens.sizing.size_640}},icon:{sizing:{height:wonderBlocksTokens.sizing.size_200,width:wonderBlocksTokens.sizing.size_200}}};const styles$7={icon:{alignSelf:"center",width:theme.icon.sizing.width,height:theme.icon.sizing.height},label:{lineHeight:theme.label.font.lineHeight,paddingBlockStart:theme.label.layout.padding.blockStart,paddingBlockEnd:theme.label.layout.padding.blockEnd}};const stateStyles={};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(stateStyles[buttonType]){return stateStyles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=wonderBlocksTokens.semanticColor.chonky[actionType];const disabledState=wonderBlocksTokens.semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme.root.shadow.y.rest})`};const newStyles={button:{background:"transparent",borderRadius:theme.root.border.radius,color:theme.label.color[actionType],height:"auto",flexDirection:"column",gap:wonderBlocksTokens.sizing.size_020,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme.root.shadow.y.hover} - ${theme.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...wonderBlocksStyles.focusStyles.focus},focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",color:theme.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080,borderRadius:theme.root.border.radius,marginBlockEnd:theme.root.shadow.y.rest,maxWidth:"100%",paddingBlock:theme.root.layout.padding.block,paddingInline:theme.root.layout.padding.inline,background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled};stateStyles[buttonType]=aphrodite.StyleSheet.create(newStyles);return stateStyles[buttonType]};
 
@@ -100,9 +100,9 @@ const StyledButton$1=wonderBlocksCore.addStyle("button");class SelectOpener exte
 
 const defaultErrorMessage="This field is required.";function hasValue(value){return value?value.length>0:false}function useSelectValidation({value,disabled=false,validate,onValidate,required,open}){const[errorMessage,setErrorMessage]=React__namespace.useState(()=>validate&&hasValue(value)&&!disabled&&validate(value)||null);const handleValidation=React__namespace.useCallback(newValue=>{if(disabled){return}if(validate){const error=newValue!==undefined&&validate(newValue)||null;setErrorMessage(error);if(onValidate){onValidate(error);}if(error){return}}if(required){const requiredString=typeof required==="string"?required:defaultErrorMessage;const error=hasValue(newValue)?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}},[disabled,validate,setErrorMessage,onValidate,required]);wonderBlocksCore.useOnMountEffect(()=>{if(hasValue(value)){handleValidation(value);}});function onOpenerBlurValidation(){if(!open&&required&&!hasValue(value)){handleValidation(value);}}const onDropdownClosedValidation=()=>{if(required&&!hasValue(value)){handleValidation(value);}};const onSelectionValidation=newValue=>{handleValidation(newValue);};const onSelectedValuesChangeValidation=()=>{setErrorMessage(null);if(onValidate){onValidate(null);}};return {errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}}
 
-const SingleSelect=props=>{const selectedIndex=React__namespace.useRef(0);const isInitialRender=React__namespace.useRef(true);const{children,error=false,id,opener,placeholder,selectedValue,testId,alignment="left",autoFocus=true,dropdownStyle,enableTypeAhead=true,isFilterable,labels={clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},onChange,onToggle,opened,style,className,"aria-label":ariaLabel,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled=false,readOnly=false,dropdownId,validate,onValidate,required,showOpenerLabelAsText=true,...sharedProps}=props;const[open,setOpen]=React__namespace.useState(false);const[searchText,setSearchText]=React__namespace.useState("");const[openerElement,setOpenerElement]=React__namespace.useState();const{errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation}=useSelectValidation({value:selectedValue,disabled,validate,onValidate,required,open});const hasError=error||!!errorMessage;React__namespace.useEffect(()=>{if(disabled||readOnly){setOpen(false);}else if(typeof opened==="boolean"){setOpen(opened);}},[disabled,opened,readOnly]);const handleOpenChanged=opened=>{setOpen(opened);setSearchText("");if(onToggle){onToggle(opened);}if(!opened){onDropdownClosedValidation();}};const handleToggle=newSelectedValue=>{if(newSelectedValue!==selectedValue){onChange(newSelectedValue);}if(open&&openerElement){openerElement.focus();}setOpen(false);if(onToggle){onToggle(false);}onSelectionValidation(newSelectedValue);};const mapOptionItemsToDropdownItems=children=>{let indexCounter=0;selectedIndex.current=0;return children.map(option=>{const{disabled,value}=option.props;const selected=selectedValue===value;if(selected){selectedIndex.current=indexCounter;}if(!disabled){indexCounter+=1;}return {component:option,focusable:!disabled,populatedProps:{onToggle:handleToggle,selected:selected,variant:"check"}}})};const filterChildren=children=>{const lowercasedSearchText=searchText.toLowerCase();return children.filter(({props})=>!searchText||getLabel(props).toLowerCase().indexOf(lowercasedSearchText)>-1)};const getMenuItems=children=>{return mapOptionItemsToDropdownItems(isFilterable?filterChildren(children):children)};const handleSearchTextChanged=searchText=>{setSearchText(searchText);};const handleOpenerRef=node=>{const openerElement=ReactDOM__namespace.findDOMNode(node);setOpenerElement(openerElement);};const handleClick=e=>{handleOpenChanged(!open);};const handleAnnouncement=message=>{wonderBlocksAnnouncer.announceMessage({message,level:"polite"});};const childrenRef=React__namespace.useRef(children);childrenRef.current=children;const announceSelectedItem=()=>{const optionItems=React__namespace.Children.toArray(childrenRef.current);const selectedItem=optionItems.find(option=>option.props.value===selectedValue);if(selectedItem){const label=getLabel(selectedItem.props);if(label){handleAnnouncement(label);}}};React__namespace.useEffect(()=>{if(isInitialRender.current){isInitialRender.current=false;return}announceSelectedItem();},[selectedValue]);const computedRequired=ariaRequired??!!required;const renderOpener=(isDisabled,dropdownId)=>{const items=React__namespace.Children.toArray(children);const selectedItem=items.find(option=>option.props.value===selectedValue);let menuContent;if(selectedItem){menuContent=getSelectOpenerLabel(showOpenerLabelAsText,selectedItem.props);}else {menuContent=placeholder;}const dropdownOpener=jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueOpenerId=>{return opener?jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-required":computedRequired,"aria-haspopup":"listbox",onClick:handleClick,disabled:isDisabled,ref:handleOpenerRef,role:"combobox",text:menuContent,opened:open,error:hasError,onBlur:onOpenerBlurValidation,readOnly:readOnly,children:opener}):jsxRuntime.jsx(SelectOpener,{...sharedProps,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-required":computedRequired,disabled:isDisabled,id:uniqueOpenerId,error:hasError,isPlaceholder:!selectedItem,onOpenChanged:handleOpenChanged,open:open,ref:handleOpenerRef,testId:testId,onBlur:onOpenerBlurValidation,readOnly:readOnly,children:menuContent})}});return dropdownOpener};const allChildren=React__namespace.Children.toArray(children).filter(Boolean);const numEnabledOptions=allChildren.filter(option=>!option.props.disabled).length;const items=getMenuItems(allChildren);const isDisabled=numEnabledOptions===0||disabled;const disableInteraction=isDisabled||readOnly;const{someResults}=labels;const someResultsRef=React__namespace.useRef(someResults);someResultsRef.current=someResults;const openRef=React__namespace.useRef(open);openRef.current=open;React__namespace.useEffect(()=>{if(openRef.current){handleAnnouncement(someResultsRef.current(items.length));}},[items.length]);return jsxRuntime.jsx(wonderBlocksCore.Id,{id:dropdownId,children:uniqueDropdownId=>jsxRuntime.jsx(DropdownCore$1,{id:uniqueDropdownId,role:"listbox",selectionType:"single",alignment:alignment,autoFocus:autoFocus,enableTypeAhead:enableTypeAhead,dropdownStyle:[isFilterable&&filterableDropdownStyle,selectDropdownStyle,dropdownStyle],initialFocusedIndex:selectedIndex.current,items:items,onOpenChanged:handleOpenChanged,open:open,opener:renderOpener(isDisabled,uniqueDropdownId),openerElement:openerElement,style:style,className:className,isFilterable:isFilterable,onSearchTextChanged:isFilterable?handleSearchTextChanged:undefined,searchText:isFilterable?searchText:"",labels:labels,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled:disableInteraction})})};
+const SingleSelect=props=>{const selectedIndex=React__namespace.useRef(0);const isInitialRender=React__namespace.useRef(true);const{children,error=false,id,opener,placeholder,selectedValue,testId,alignment="left",autoFocus=true,dropdownStyle,enableTypeAhead=true,isFilterable,labels={clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},onChange,onToggle,opened,style,className,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled=false,readOnly=false,dropdownId,validate,onValidate,required,showOpenerLabelAsText=true,...sharedProps}=props;const[open,setOpen]=React__namespace.useState(false);const[searchText,setSearchText]=React__namespace.useState("");const[openerElement,setOpenerElement]=React__namespace.useState();const{errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation}=useSelectValidation({value:selectedValue,disabled,validate,onValidate,required,open});const hasError=error||!!errorMessage;React__namespace.useEffect(()=>{if(disabled||readOnly){setOpen(false);}else if(typeof opened==="boolean"){setOpen(opened);}},[disabled,opened,readOnly]);const handleOpenChanged=opened=>{setOpen(opened);setSearchText("");if(onToggle){onToggle(opened);}if(!opened){onDropdownClosedValidation();}};const handleToggle=newSelectedValue=>{if(newSelectedValue!==selectedValue){onChange(newSelectedValue);}if(open&&openerElement){openerElement.focus();}setOpen(false);if(onToggle){onToggle(false);}onSelectionValidation(newSelectedValue);};const mapOptionItemsToDropdownItems=children=>{let indexCounter=0;selectedIndex.current=0;return children.map(option=>{const{disabled,value}=option.props;const selected=selectedValue===value;if(selected){selectedIndex.current=indexCounter;}if(!disabled){indexCounter+=1;}return {component:option,focusable:!disabled,populatedProps:{onToggle:handleToggle,selected:selected,variant:"check"}}})};const filterChildren=children=>{const lowercasedSearchText=searchText.toLowerCase();return children.filter(({props})=>!searchText||getLabel(props).toLowerCase().indexOf(lowercasedSearchText)>-1)};const getMenuItems=children=>{return mapOptionItemsToDropdownItems(isFilterable?filterChildren(children):children)};const handleSearchTextChanged=searchText=>{setSearchText(searchText);};const handleOpenerRef=node=>{const openerElement=ReactDOM__namespace.findDOMNode(node);setOpenerElement(openerElement);};const handleClick=e=>{handleOpenChanged(!open);};const handleAnnouncement=message=>{wonderBlocksAnnouncer.announceMessage({message,level:"polite"});};const childrenRef=React__namespace.useRef(children);childrenRef.current=children;const announceSelectedItem=()=>{const optionItems=React__namespace.Children.toArray(childrenRef.current);const selectedItem=optionItems.find(option=>option.props.value===selectedValue);if(selectedItem){const label=getLabel(selectedItem.props);if(label){handleAnnouncement(label);}}};React__namespace.useEffect(()=>{if(isInitialRender.current){isInitialRender.current=false;return}announceSelectedItem();},[selectedValue]);const computedRequired=ariaRequired??!!required;const renderOpener=(isDisabled,dropdownId)=>{const items=React__namespace.Children.toArray(children);const selectedItem=items.find(option=>option.props.value===selectedValue);let menuContent;if(selectedItem){menuContent=getSelectOpenerLabel(showOpenerLabelAsText,selectedItem.props);}else {menuContent=placeholder;}const dropdownOpener=jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueOpenerId=>{return opener?jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-required":computedRequired,"aria-haspopup":"listbox",onClick:handleClick,disabled:isDisabled,ref:handleOpenerRef,role:"combobox",text:menuContent,opened:open,error:hasError,onBlur:onOpenerBlurValidation,readOnly:readOnly,children:opener}):jsxRuntime.jsx(SelectOpener,{...sharedProps,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-controls":dropdownId,"aria-required":computedRequired,disabled:isDisabled,id:uniqueOpenerId,error:hasError,isPlaceholder:!selectedItem,onOpenChanged:handleOpenChanged,open:open,ref:handleOpenerRef,testId:testId,onBlur:onOpenerBlurValidation,readOnly:readOnly,children:menuContent})}});return dropdownOpener};const allChildren=React__namespace.Children.toArray(children).filter(Boolean);const numEnabledOptions=allChildren.filter(option=>!option.props.disabled).length;const items=getMenuItems(allChildren);const isDisabled=numEnabledOptions===0||disabled;const disableInteraction=isDisabled||readOnly;const listboxLabelProps=getListboxLabelProps({ariaLabel,ariaLabelledBy,openerElement});const{someResults}=labels;const someResultsRef=React__namespace.useRef(someResults);someResultsRef.current=someResults;const openRef=React__namespace.useRef(open);openRef.current=open;React__namespace.useEffect(()=>{if(openRef.current){handleAnnouncement(someResultsRef.current(items.length));}},[items.length]);return jsxRuntime.jsx(wonderBlocksCore.Id,{id:dropdownId,children:uniqueDropdownId=>jsxRuntime.jsx(DropdownCore$1,{id:uniqueDropdownId,role:"listbox",selectionType:"single",alignment:alignment,autoFocus:autoFocus,enableTypeAhead:enableTypeAhead,dropdownStyle:[isFilterable&&filterableDropdownStyle,selectDropdownStyle,dropdownStyle],initialFocusedIndex:selectedIndex.current,items:items,onOpenChanged:handleOpenChanged,open:open,opener:renderOpener(isDisabled,uniqueDropdownId),openerElement:openerElement,style:style,className:className,isFilterable:isFilterable,onSearchTextChanged:isFilterable?handleSearchTextChanged:undefined,searchText:isFilterable?searchText:"",labels:labels,...listboxLabelProps,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled:disableInteraction})})};
 
-const MultiSelect=props=>{const isInitialRender=React__namespace.useRef(true);const{id,opener,testId,alignment="left",dropdownStyle,implicitAllEnabled,isFilterable,labels:propLabels,onChange,onToggle,opened,selectedValues=[],shortcuts=false,style,className,"aria-label":ariaLabel,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled=false,readOnly=false,error=false,children,dropdownId,showOpenerLabelAsText=true,validate,onValidate,required,...sharedProps}=props;const labels=React__namespace.useMemo(()=>{return {...defaultLabels,...propLabels}},[propLabels]);const[open,setOpen]=React__namespace.useState(false);const[searchText,setSearchText]=React__namespace.useState("");const[lastSelectedValues,setLastSelectedValues]=React__namespace.useState([]);const[openerElement,setOpenerElement]=React__namespace.useState();const{errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}=useSelectValidation({value:selectedValues,disabled,validate,onValidate,required,open});const hasError=error||!!errorMessage;React__namespace.useEffect(()=>{if(disabled||readOnly){setOpen(false);}else if(typeof opened==="boolean"){setOpen(opened);}},[disabled,opened,readOnly]);const handleOpenChanged=opened=>{setOpen(opened);setSearchText("");setLastSelectedValues(selectedValues);if(onToggle){onToggle(opened);}if(!opened){if(lastSelectedValues!==selectedValues){onSelectionValidation(selectedValues);}else {onDropdownClosedValidation();}}};const handleToggle=selectedValue=>{if(selectedValues.includes(selectedValue)){const index=selectedValues.indexOf(selectedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,selectedValue]);}onSelectedValuesChangeValidation();};const handleSelectAll=()=>{const allChildren=React__namespace.Children.toArray(children);const selected=allChildren.filter(option=>!!option&&!option.props.disabled).map(option=>option.props.value);onChange(selected);onSelectedValuesChangeValidation();};const handleSelectNone=()=>{onChange([]);onSelectedValuesChangeValidation();};const getMenuTextOrNode=React__namespace.useCallback(children=>{const{noneSelected,someSelected,allSelected}=labels;const numSelectedAll=children.filter(option=>!option.props.disabled).length;const noSelectionText=implicitAllEnabled?allSelected:noneSelected;switch(selectedValues.length){case 0:return noSelectionText;case 1:const selectedItem=children.find(option=>option.props.value===selectedValues[0]);if(selectedItem){const selectedLabel=getSelectOpenerLabel(showOpenerLabelAsText,selectedItem?.props);if(selectedLabel){return selectedLabel}else {return someSelected(1)}}return noSelectionText;case numSelectedAll:return allSelected;default:return someSelected(selectedValues.length)}},[implicitAllEnabled,labels,selectedValues,showOpenerLabelAsText]);const getShortcuts=numOptions=>{const{selectAllLabel,selectNoneLabel}=labels;if(shortcuts&&!searchText){const selectAllDisabled=numOptions===selectedValues.length;const selectAll={component:jsxRuntime.jsx(ActionItem,{disabled:selectAllDisabled,label:selectAllLabel(numOptions),indent:true,onClick:handleSelectAll}),focusable:!selectAllDisabled,populatedProps:{}};const selectNoneDisabled=selectedValues.length===0;const selectNone={component:jsxRuntime.jsx(ActionItem,{disabled:selectNoneDisabled,label:selectNoneLabel,indent:true,onClick:handleSelectNone}),focusable:!selectNoneDisabled,populatedProps:{}};const separator={component:jsxRuntime.jsx(SeparatorItem,{},"shortcuts-separator"),focusable:false,populatedProps:{}};return [selectAll,selectNone,separator]}else {return []}};const getMenuItems=children=>{if(!isFilterable){return children.map(mapOptionItemToDropdownItem)}const lowercasedSearchText=searchText.toLowerCase();const filteredChildren=children.filter(({props})=>!searchText||getLabel(props).toLowerCase().indexOf(lowercasedSearchText)>-1);const lastSelectedChildren=[];const restOfTheChildren=[];for(const child of filteredChildren){if(lastSelectedValues.includes(child.props.value)){lastSelectedChildren.push(child);}else {restOfTheChildren.push(child);}}const lastSelectedItems=lastSelectedChildren.map(mapOptionItemToDropdownItem);if(lastSelectedChildren.length&&restOfTheChildren.length){lastSelectedItems.push({component:jsxRuntime.jsx(SeparatorItem,{},"selected-separator"),focusable:false,populatedProps:{}});}return [...lastSelectedItems,...restOfTheChildren.map(mapOptionItemToDropdownItem)]};const mapOptionItemToDropdownItem=option=>{const{disabled,value}=option.props;return {component:option,focusable:!disabled,populatedProps:{onToggle:handleToggle,selected:selectedValues.includes(value),variant:"checkbox"}}};const handleOpenerRef=node=>{const openerElement=ReactDOM__namespace.findDOMNode(node);setOpenerElement(openerElement);};const handleSearchTextChanged=searchText=>{setSearchText(searchText);};const handleClick=e=>{handleOpenChanged(!open);};const handleAnnouncement=message=>{wonderBlocksAnnouncer.announceMessage({message,level:"polite"});};const maybeGetOpenerStringValue=React__namespace.useCallback((children,openerContent)=>{let openerStringValue;if(selectedValues.length===1){const selectedItem=children.find(option=>option.props.value===selectedValues[0]);openerStringValue=selectedItem?getLabel(selectedItem?.props):undefined;}else if(typeof openerContent==="string"){openerStringValue=openerContent;}return openerStringValue},[selectedValues]);const prevOpenRef=React__namespace.useRef(open);const selectionChangedRef=React__namespace.useRef(false);const childrenRef=React__namespace.useRef(children);childrenRef.current=children;const getMenuTextOrNodeRef=React__namespace.useRef(getMenuTextOrNode);getMenuTextOrNodeRef.current=getMenuTextOrNode;const maybeGetOpenerStringValueRef=React__namespace.useRef(maybeGetOpenerStringValue);maybeGetOpenerStringValueRef.current=maybeGetOpenerStringValue;const announceOpenerValue=()=>{const optionItems=React__namespace.Children.toArray(childrenRef.current);const openerContent=getMenuTextOrNodeRef.current(optionItems);const openerStringValue=maybeGetOpenerStringValueRef.current(optionItems,openerContent);if(openerStringValue){handleAnnouncement(openerStringValue);}};React__namespace.useEffect(()=>{if(isInitialRender.current){isInitialRender.current=false;prevOpenRef.current=open;return}const justOpened=open&&!prevOpenRef.current;const justClosed=!open&&prevOpenRef.current;prevOpenRef.current=open;if(justOpened){selectionChangedRef.current=false;}else if(justClosed){if(selectionChangedRef.current){announceOpenerValue();selectionChangedRef.current=false;}}else if(open){selectionChangedRef.current=true;announceOpenerValue();}},[selectedValues,open]);const computedRequired=ariaRequired??!!required;const renderOpener=(allChildren,isDisabled,dropdownId)=>{const{noneSelected}=labels;const openerContent=getMenuTextOrNode(allChildren);const dropdownOpener=jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueOpenerId=>{return opener?jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,error:hasError,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-required":computedRequired,"aria-haspopup":"listbox",onClick:handleClick,onBlur:onOpenerBlurValidation,disabled:isDisabled,ref:handleOpenerRef,role:"combobox",text:openerContent,opened:open,readOnly:readOnly,children:opener}):jsxRuntime.jsx(SelectOpener,{...sharedProps,error:hasError,disabled:isDisabled,id:uniqueOpenerId,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-required":computedRequired,isPlaceholder:openerContent===noneSelected,onOpenChanged:handleOpenChanged,onBlur:onOpenerBlurValidation,open:open,ref:handleOpenerRef,testId:testId,readOnly:readOnly,children:openerContent})}});return dropdownOpener};const{clearSearch,filter,noResults,someSelected}=labels;const someSelectedRef=React__namespace.useRef(someSelected);someSelectedRef.current=someSelected;const allChildren=React__namespace.Children.toArray(children).filter(Boolean);const numEnabledOptions=allChildren.filter(option=>!option.props.disabled).length;const filteredItems=getMenuItems(allChildren);const isDisabled=numEnabledOptions===0||disabled;const disableInteraction=isDisabled||readOnly;React__namespace.useEffect(()=>{if(searchText){handleAnnouncement(someSelectedRef.current(filteredItems.length));}},[filteredItems.length,someSelectedRef]);return jsxRuntime.jsx(wonderBlocksCore.Id,{id:dropdownId,children:uniqueDropdownId=>jsxRuntime.jsx(DropdownCore$1,{id:uniqueDropdownId,role:"listbox",alignment:alignment,dropdownStyle:[isFilterable&&filterableDropdownStyle,selectDropdownStyle,dropdownStyle],isFilterable:isFilterable,items:[...getShortcuts(numEnabledOptions),...filteredItems],onOpenChanged:handleOpenChanged,open:open,opener:renderOpener(allChildren,isDisabled,uniqueDropdownId),openerElement:openerElement,selectionType:"multi",style:style,className:className,onSearchTextChanged:isFilterable?handleSearchTextChanged:undefined,searchText:isFilterable?searchText:"",labels:{clearSearch,filter,noResults,someResults:someSelected},"aria-invalid":ariaInvalid,"aria-required":computedRequired,disabled:disableInteraction})})};
+const MultiSelect=props=>{const isInitialRender=React__namespace.useRef(true);const{id,opener,testId,alignment="left",dropdownStyle,implicitAllEnabled,isFilterable,labels:propLabels,onChange,onToggle,opened,selectedValues=[],shortcuts=false,style,className,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled=false,readOnly=false,error=false,children,dropdownId,showOpenerLabelAsText=true,validate,onValidate,required,...sharedProps}=props;const labels=React__namespace.useMemo(()=>{return {...defaultLabels,...propLabels}},[propLabels]);const[open,setOpen]=React__namespace.useState(false);const[searchText,setSearchText]=React__namespace.useState("");const[lastSelectedValues,setLastSelectedValues]=React__namespace.useState([]);const[openerElement,setOpenerElement]=React__namespace.useState();const{errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}=useSelectValidation({value:selectedValues,disabled,validate,onValidate,required,open});const hasError=error||!!errorMessage;React__namespace.useEffect(()=>{if(disabled||readOnly){setOpen(false);}else if(typeof opened==="boolean"){setOpen(opened);}},[disabled,opened,readOnly]);const handleOpenChanged=opened=>{setOpen(opened);setSearchText("");setLastSelectedValues(selectedValues);if(onToggle){onToggle(opened);}if(!opened){if(lastSelectedValues!==selectedValues){onSelectionValidation(selectedValues);}else {onDropdownClosedValidation();}}};const handleToggle=selectedValue=>{if(selectedValues.includes(selectedValue)){const index=selectedValues.indexOf(selectedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,selectedValue]);}onSelectedValuesChangeValidation();};const handleSelectAll=()=>{const allChildren=React__namespace.Children.toArray(children);const selected=allChildren.filter(option=>!!option&&!option.props.disabled).map(option=>option.props.value);onChange(selected);onSelectedValuesChangeValidation();};const handleSelectNone=()=>{onChange([]);onSelectedValuesChangeValidation();};const getMenuTextOrNode=React__namespace.useCallback(children=>{const{noneSelected,someSelected,allSelected}=labels;const numSelectedAll=children.filter(option=>!option.props.disabled).length;const noSelectionText=implicitAllEnabled?allSelected:noneSelected;switch(selectedValues.length){case 0:return noSelectionText;case 1:const selectedItem=children.find(option=>option.props.value===selectedValues[0]);if(selectedItem){const selectedLabel=getSelectOpenerLabel(showOpenerLabelAsText,selectedItem?.props);if(selectedLabel){return selectedLabel}else {return someSelected(1)}}return noSelectionText;case numSelectedAll:return allSelected;default:return someSelected(selectedValues.length)}},[implicitAllEnabled,labels,selectedValues,showOpenerLabelAsText]);const getShortcuts=numOptions=>{const{selectAllLabel,selectNoneLabel}=labels;if(shortcuts&&!searchText){const selectAllDisabled=numOptions===selectedValues.length;const selectAll={component:jsxRuntime.jsx(ActionItem,{disabled:selectAllDisabled,label:selectAllLabel(numOptions),indent:true,onClick:handleSelectAll}),focusable:!selectAllDisabled,populatedProps:{}};const selectNoneDisabled=selectedValues.length===0;const selectNone={component:jsxRuntime.jsx(ActionItem,{disabled:selectNoneDisabled,label:selectNoneLabel,indent:true,onClick:handleSelectNone}),focusable:!selectNoneDisabled,populatedProps:{}};const separator={component:jsxRuntime.jsx(SeparatorItem,{},"shortcuts-separator"),focusable:false,populatedProps:{}};return [selectAll,selectNone,separator]}else {return []}};const getMenuItems=children=>{if(!isFilterable){return children.map(mapOptionItemToDropdownItem)}const lowercasedSearchText=searchText.toLowerCase();const filteredChildren=children.filter(({props})=>!searchText||getLabel(props).toLowerCase().indexOf(lowercasedSearchText)>-1);const lastSelectedChildren=[];const restOfTheChildren=[];for(const child of filteredChildren){if(lastSelectedValues.includes(child.props.value)){lastSelectedChildren.push(child);}else {restOfTheChildren.push(child);}}const lastSelectedItems=lastSelectedChildren.map(mapOptionItemToDropdownItem);if(lastSelectedChildren.length&&restOfTheChildren.length){lastSelectedItems.push({component:jsxRuntime.jsx(SeparatorItem,{},"selected-separator"),focusable:false,populatedProps:{}});}return [...lastSelectedItems,...restOfTheChildren.map(mapOptionItemToDropdownItem)]};const mapOptionItemToDropdownItem=option=>{const{disabled,value}=option.props;return {component:option,focusable:!disabled,populatedProps:{onToggle:handleToggle,selected:selectedValues.includes(value),variant:"checkbox"}}};const handleOpenerRef=node=>{const openerElement=ReactDOM__namespace.findDOMNode(node);setOpenerElement(openerElement);};const handleSearchTextChanged=searchText=>{setSearchText(searchText);};const handleClick=e=>{handleOpenChanged(!open);};const handleAnnouncement=message=>{wonderBlocksAnnouncer.announceMessage({message,level:"polite"});};const maybeGetOpenerStringValue=React__namespace.useCallback((children,openerContent)=>{let openerStringValue;if(selectedValues.length===1){const selectedItem=children.find(option=>option.props.value===selectedValues[0]);openerStringValue=selectedItem?getLabel(selectedItem?.props):undefined;}else if(typeof openerContent==="string"){openerStringValue=openerContent;}return openerStringValue},[selectedValues]);const prevOpenRef=React__namespace.useRef(open);const selectionChangedRef=React__namespace.useRef(false);const childrenRef=React__namespace.useRef(children);childrenRef.current=children;const getMenuTextOrNodeRef=React__namespace.useRef(getMenuTextOrNode);getMenuTextOrNodeRef.current=getMenuTextOrNode;const maybeGetOpenerStringValueRef=React__namespace.useRef(maybeGetOpenerStringValue);maybeGetOpenerStringValueRef.current=maybeGetOpenerStringValue;const announceOpenerValue=()=>{const optionItems=React__namespace.Children.toArray(childrenRef.current);const openerContent=getMenuTextOrNodeRef.current(optionItems);const openerStringValue=maybeGetOpenerStringValueRef.current(optionItems,openerContent);if(openerStringValue){handleAnnouncement(openerStringValue);}};React__namespace.useEffect(()=>{if(isInitialRender.current){isInitialRender.current=false;prevOpenRef.current=open;return}const justOpened=open&&!prevOpenRef.current;const justClosed=!open&&prevOpenRef.current;prevOpenRef.current=open;if(justOpened){selectionChangedRef.current=false;}else if(justClosed){if(selectionChangedRef.current){announceOpenerValue();selectionChangedRef.current=false;}}else if(open){selectionChangedRef.current=true;announceOpenerValue();}},[selectedValues,open]);const computedRequired=ariaRequired??!!required;const renderOpener=(allChildren,isDisabled,dropdownId)=>{const{noneSelected}=labels;const openerContent=getMenuTextOrNode(allChildren);const dropdownOpener=jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueOpenerId=>{return opener?jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,error:hasError,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-required":computedRequired,"aria-haspopup":"listbox",onClick:handleClick,onBlur:onOpenerBlurValidation,disabled:isDisabled,ref:handleOpenerRef,role:"combobox",text:openerContent,opened:open,readOnly:readOnly,children:opener}):jsxRuntime.jsx(SelectOpener,{...sharedProps,error:hasError,disabled:isDisabled,id:uniqueOpenerId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-controls":dropdownId,"aria-required":computedRequired,isPlaceholder:openerContent===noneSelected,onOpenChanged:handleOpenChanged,onBlur:onOpenerBlurValidation,open:open,ref:handleOpenerRef,testId:testId,readOnly:readOnly,children:openerContent})}});return dropdownOpener};const{clearSearch,filter,noResults,someSelected}=labels;const listboxLabelProps=getListboxLabelProps({ariaLabel,ariaLabelledBy,openerElement});const someSelectedRef=React__namespace.useRef(someSelected);someSelectedRef.current=someSelected;const allChildren=React__namespace.Children.toArray(children).filter(Boolean);const numEnabledOptions=allChildren.filter(option=>!option.props.disabled).length;const filteredItems=getMenuItems(allChildren);const isDisabled=numEnabledOptions===0||disabled;const disableInteraction=isDisabled||readOnly;React__namespace.useEffect(()=>{if(searchText){handleAnnouncement(someSelectedRef.current(filteredItems.length));}},[filteredItems.length,someSelectedRef]);return jsxRuntime.jsx(wonderBlocksCore.Id,{id:dropdownId,children:uniqueDropdownId=>jsxRuntime.jsx(DropdownCore$1,{id:uniqueDropdownId,role:"listbox",alignment:alignment,dropdownStyle:[isFilterable&&filterableDropdownStyle,selectDropdownStyle,dropdownStyle],isFilterable:isFilterable,items:[...getShortcuts(numEnabledOptions),...filteredItems],onOpenChanged:handleOpenChanged,open:open,opener:renderOpener(allChildren,isDisabled,uniqueDropdownId),openerElement:openerElement,selectionType:"multi",style:style,className:className,onSearchTextChanged:isFilterable?handleSearchTextChanged:undefined,searchText:isFilterable?searchText:"",labels:{clearSearch,filter,noResults,someResults:someSelected},...listboxLabelProps,"aria-invalid":ariaInvalid,"aria-required":computedRequired,disabled:disableInteraction})})};
 
 function updateMultipleSelection(previousSelection,value=""){if(!previousSelection){return [value]}return previousSelection.includes(value)?previousSelection.filter(item=>item!==value):[...previousSelection,value]}
 
@@ -116,7 +116,7 @@ const MultipleSelection=React__namespace.memo(function SelectedPills({disabled,f
 
 function StandaloneListbox(props){const{children,disabled,id,onChange,selectionType="single",style,tabIndex=0,testId,value,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const{focusedIndex,isListboxFocused,renderList,selected,handleKeyDown,handleKeyUp,handleFocus,handleBlur}=useListbox({children,disabled,id:uniqueId,selectionType,value});React__namespace.useEffect(()=>{if(selected&&selected!==value){onChange?.(selected);}},[onChange,selected,value]);return jsxRuntime.jsx(wonderBlocksCore.View,{role:"listbox",id:uniqueId,style:[styles$2.listbox,style,disabled&&styles$2.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,onFocus:handleFocus,onBlur:handleBlur,"aria-activedescendant":isListboxFocused?renderList[focusedIndex].props.id:undefined,children:renderList})}function Listbox(props){const{children,disabled,id,selectionType="single",style,tabIndex=0,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby}=props;if(tabIndex===0){return jsxRuntime.jsx(StandaloneListbox,{...props})}return jsxRuntime.jsx(wonderBlocksCore.View,{role:"listbox",id:id,style:[styles$2.listbox,style,disabled&&styles$2.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const styles$2=aphrodite.StyleSheet.create({listbox:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,outline:"none",paddingBlock:theme$3.listbox.layout.padding.block,paddingInline:theme$3.listbox.layout.padding.inline},disabled:{color:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground}});
 
-function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value="","aria-label":ariaLabel}){const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React__namespace.useRef(null);const rootNodeRef=React__namespace.useRef(null);const[open,setOpen]=React__namespace.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React__namespace.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React__namespace.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React__namespace.useState(initialValue);const updateAfterSelectionChange=React__namespace.useCallback(value=>{setSelected(value);onChange?.(value);},[onChange,setSelected]);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,onRemove:updateAfterSelectionChange,isComboboxOpen:openState});const updateOpenState=React__namespace.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React__namespace.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React__namespace.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React__namespace.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemoveClick=React__namespace.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);updateAfterSelectionChange(newValues);},[selected,updateAfterSelectionChange]);const handleTextFieldChange=React__namespace.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React__namespace.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React__namespace.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React__namespace.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React__namespace.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.default:startIcon.props.color??wonderBlocksTokens.semanticColor.core.foreground.neutral.default});return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$1.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=React.useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles$1.wrapper,isListboxFocused&&styles$1.focused,disabled&&styles$1.disabled,!disabled&&error&&styles$1.error],children:[jsxRuntime.jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsxRuntime.jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemoveClick,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsxRuntime.jsx(wonderBlocksForm.TextField,{"aria-label":ariaLabel,id:textFieldId,testId:testId,style:styles$1.combobox,value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox"}),inputValue&&!disabled&&jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsxRuntime.jsx(IconButton__default["default"],{disabled:disabled,icon:caretDownIcon__default$1["default"],onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.openButtonResetStates,openState&&styles$1.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsxRuntime.jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsxRuntime.jsx(wonderBlocksCore.View,{onMouseDown:e=>{e.preventDefault();},children:renderList.length===0?jsxRuntime.jsx(wonderBlocksCell.DetailCell,{title:labels.noItems,styles:{root:[styles$1.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsxRuntime.jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles$1.listbox,isReferenceHidden&&styles$1.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles$1=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxInlineSize:"100%",flexWrap:"wrap",background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.opener.border.radius.rest,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,paddingInline:theme$3.opener.layout.padding.inline,overflow:"hidden"},focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minInlineSize:wonderBlocksTokens.sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none",boxShadow:"none"},[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"}},listbox:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_0,margin:0},buttonOpen:{transform:"rotate(180deg)"},openButtonResetStates:{":hover":{borderColor:wonderBlocksTokens.semanticColor.core.transparent},":active":{borderColor:wonderBlocksTokens.semanticColor.core.transparent},":focus-visible":{outline:"none",boxShadow:"none"}},clearButton:{insetInlineEnd:wonderBlocksTokens.sizing.size_360},iconWrapper:{padding:wonderBlocksTokens.sizing.size_040,minInlineSize:"auto"}});
+function Combobox({autoComplete,children,disabled,error,id,labels=defaultComboboxLabels,onChange,onToggle,opened,placeholder,selectionType="single",startIcon,testId,value="",loading,style,...ariaAttrs}){const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const comboboxRef=React__namespace.useRef(null);const rootNodeRef=React__namespace.useRef(null);const[open,setOpen]=React__namespace.useState(opened??false);const isControlled=opened!==undefined;const openState=disabled?false:isControlled?opened:open;const[selectedValue,setSelectedValue]=React__namespace.useState(value);const isValueControlled=value!==""&&onChange!==undefined;const valueState=isValueControlled?value:selectedValue;const[currentOptions,setCurrentOptions]=React__namespace.useState(children);const{focusedIndex,isListboxFocused,setFocusedIndex,handleKeyDown,handleFocus,handleBlur,selected,setSelected,renderList}=useListbox({children:currentOptions,disabled,id:uniqueId,onChange:value=>handleChange(value),value:valueState,disableSpaceSelection:true,selectionType});const itemFromSelected=renderList.find(item=>item.props.value===selected)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";const initialValue=typeof value==="string"?labelFromSelected:"";const[inputValue,setInputValue]=React__namespace.useState(initialValue);const updateAfterSelectionChange=React__namespace.useCallback(value=>{setSelected(value);onChange?.(value);},[onChange,setSelected]);const{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,onRemove:updateAfterSelectionChange,isComboboxOpen:openState});const updateOpenState=React__namespace.useCallback((newState,selectedLabel=labelFromSelected)=>{if(disabled||newState===openState){return}if(!isControlled){setOpen(newState);}if(!newState){setFocusedIndex(-1);if(selectionType==="multiple"){setInputValue("");}else {setInputValue(selectedLabel??"");}setCurrentOptions(children);}onToggle?.(newState);},[children,disabled,isControlled,labelFromSelected,onToggle,openState,selectionType,setFocusedIndex]);const handleChange=React__namespace.useCallback(value=>{if(value!==valueState){setSelectedValue(value);onChange?.(value);}if(selectionType==="single"&&typeof value==="string"){const itemFromSelected=renderList.find(item=>item.props.value===value)?.props;const labelFromSelected=itemFromSelected?getLabel(itemFromSelected):"";updateOpenState(false,labelFromSelected);}else if(Array.isArray(value)){setInputValue("");setCurrentOptions(children);}},[children,onChange,renderList,selectionType,updateOpenState,valueState]);const focusOnFilteredItem=React__namespace.useCallback((filtered,value)=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();const itemIndex=filtered.findIndex(item=>getLabel(item.props).normalize("NFC").toLowerCase().trim().includes(lowercasedSearchText));setFocusedIndex(itemIndex);},[setFocusedIndex]);const filterItems=React__namespace.useCallback(value=>{const lowercasedSearchText=value.normalize("NFC").toLowerCase();return children.filter(item=>getLabel(item.props).normalize("NFC").trim().toLowerCase().indexOf(lowercasedSearchText)>-1)},[children]);const onKeyDown=event=>{const{key}=event;const conditionsToOpen=key==="ArrowDown"||key==="ArrowUp"||key==="Backspace"||key.length===1;if(!openState&&conditionsToOpen){updateOpenState(true);}if(key==="ArrowLeft"||key==="ArrowRight"){setFocusedIndex(-1);}handleMultipleSelectionKeyDown(event);if(key==="Escape"&&openState){event.stopPropagation();updateOpenState(false);}handleKeyDown(event);};const handleOnRemoveClick=React__namespace.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);updateAfterSelectionChange(newValues);},[selected,updateAfterSelectionChange]);const handleTextFieldChange=React__namespace.useCallback(value=>{setInputValue(value);let filteredItems=renderList;if(autoComplete==="list"){filteredItems=filterItems(value);setCurrentOptions(filteredItems);}focusOnFilteredItem(filteredItems,value);},[autoComplete,filterItems,focusOnFilteredItem,renderList]);const handleClearClick=React__namespace.useCallback(e=>{e.stopPropagation();setInputValue("");setSelected("");onChange?.("");comboboxRef.current?.focus();},[onChange,setSelected]);React__namespace.useEffect(()=>{if(openState){comboboxRef.current?.focus();}},[openState]);const selectedLabels=React__namespace.useMemo(()=>{if(Array.isArray(selected)){return selected.map(value=>{const item=children.find(item=>item.props.value===value);return item?getLabel(item?.props):""})}return [labelFromSelected]},[children,labelFromSelected,selected]);const maybeRenderStartIcon=()=>{if(!startIcon){return null}const startIconElement=React__namespace.cloneElement(startIcon,{size:"small",...startIcon.props,color:disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.default:startIcon.props.color??wonderBlocksTokens.semanticColor.core.foreground.neutral.default});return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$1.iconWrapper,children:startIconElement})};const pillIdPrefix=`${uniqueId}-pill-`;const textFieldId=React.useId();const currentActiveDescendant=!openState?undefined:focusedIndex>=0?renderList[focusedIndex]?.props?.id:pillIdPrefix+focusedMultiSelectIndex;const controlledWidget=!openState?undefined:focusedIndex>=0?uniqueId:pillIdPrefix;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:()=>{updateOpenState(true);},ref:rootNodeRef,style:[styles$1.wrapper,isListboxFocused&&styles$1.focused,disabled&&styles$1.disabled,!disabled&&error&&styles$1.error],children:[jsxRuntime.jsx(ComboboxLiveRegion,{focusedIndex:focusedIndex,focusedMultiSelectIndex:focusedMultiSelectIndex,labels:labels,options:renderList,selectedLabels:selectedLabels,testId:testId,opened:openState,selected:selected,selectionType:selectionType}),selectionType==="multiple"&&Array.isArray(selected)&&jsxRuntime.jsx(MultipleSelection,{labels:selectedLabels,focusedMultiSelectIndex:focusedMultiSelectIndex,id:pillIdPrefix,selected:selected,onRemove:handleOnRemoveClick,disabled:disabled,testId:testId,removeSelectedLabel:labels.removeSelected}),maybeRenderStartIcon(),jsxRuntime.jsx(wonderBlocksForm.TextField,{id:textFieldId,testId:testId,style:[styles$1.combobox,style],value:inputValue,onChange:handleTextFieldChange,disabled:disabled,onFocus:()=>{updateOpenState(true);handleFocus();},placeholder:placeholder,onBlur:()=>{updateOpenState(false);handleBlur();},onKeyDown:onKeyDown,"aria-activedescendant":currentActiveDescendant,"aria-autocomplete":autoComplete,"aria-controls":controlledWidget,"aria-expanded":openState,"aria-invalid":!!error,ref:comboboxRef,autoComplete:"off",role:"combobox",...ariaAttrs}),inputValue&&!disabled&&jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],onClick:handleClearClick,actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.clearButton],"aria-label":labels.clearSelection,testId:testId?`${testId}-clear`:undefined}),jsxRuntime.jsx(IconButton__default["default"],{disabled:disabled,icon:caretDownIcon__default$1["default"],onClick:e=>{e.stopPropagation();updateOpenState(!openState);},onMouseDown:e=>{e.preventDefault();},actionType:"neutral",kind:"tertiary",size:"medium",style:[styles$1.button,styles$1.openButtonResetStates,openState&&styles$1.buttonOpen],tabIndex:-1,"aria-controls":uniqueId,"aria-expanded":openState,"aria-label":labels.comboboxButton})]}),openState&&jsxRuntime.jsx(DropdownPopper,{alignment:"left",referenceElement:rootNodeRef?.current,children:isReferenceHidden=>jsxRuntime.jsx(wonderBlocksCore.View,{onMouseDown:e=>{e.preventDefault();},children:renderList.length===0?jsxRuntime.jsx(wonderBlocksCell.DetailCell,{title:labels.noItems,styles:{root:[styles$1.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsxRuntime.jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles$1.listbox,isReferenceHidden&&styles$1.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles$1=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxInlineSize:"100%",flexWrap:"wrap",background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.opener.border.radius.rest,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,paddingInline:theme$3.opener.layout.padding.inline,overflow:"hidden"},focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minInlineSize:wonderBlocksTokens.sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none",boxShadow:"none"},[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:"none"}},listbox:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme$3.listbox.border.radius,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,boxShadow:theme$3.listbox.shadow.default,maxBlockSize:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_0,margin:0},buttonOpen:{transform:"rotate(180deg)"},openButtonResetStates:{":hover":{borderColor:wonderBlocksTokens.semanticColor.core.transparent},":active":{borderColor:wonderBlocksTokens.semanticColor.core.transparent},":focus-visible":{outline:"none",boxShadow:"none"}},clearButton:{insetInlineEnd:wonderBlocksTokens.sizing.size_360},iconWrapper:{padding:wonderBlocksTokens.sizing.size_040,minInlineSize:"auto"}});
 
 const StyledButton=wonderBlocksCore.addStyle("button");const CustomOpener=React__namespace.forwardRef(function CustomOpener(props,ref){const{children,disabled,onClick,styles:stylesProp,testId,...restProps}=props;const injectedAriaDisabled=restProps["aria-disabled"];const ariaDisabled=injectedAriaDisabled??(disabled||undefined);return jsxRuntime.jsx(StyledButton,{...restProps,ref:ref,type:"button","aria-disabled":ariaDisabled,onClick:disabled?undefined:onClick,"data-testid":testId,style:[styles.reset,disabled&&styles.disabled,stylesProp?.root],children:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:[styles.labelReset,stylesProp?.label],children:children})})});CustomOpener.displayName="CustomOpener";const styles=aphrodite.StyleSheet.create({reset:{appearance:"none",background:"none",border:"none",boxSizing:"border-box",cursor:"pointer",font:"inherit",margin:0,padding:0,textAlign:"inherit",touchAction:"manipulation",...wonderBlocksStyles.focusStyles.focus},labelReset:{alignItems:"center",display:"flex",flexDirection:"row",gap:wonderBlocksTokens.sizing.size_020},disabled:{cursor:"not-allowed"}});
 

package/dist/util/helpers.d.ts

@@ -26,4 +26,17 @@ export declare function getLabel(props: OptionItemProps): string;
  * If the label is a Node, and `labelAsText` is undefined, returns the label.
  */
 export declare function getSelectOpenerLabel(showOpenerLabelAsText: boolean, props: OptionItemProps): string | JSX.Element;
+/**
+ * Returns the aria attributes that label a listbox with the same name as its
+ * opener. The listbox is rendered in a portal, so it needs its own name to give
+ * the options context.
+ */
+export declare function getListboxLabelProps({ ariaLabel, ariaLabelledBy, openerElement, }: {
+    ariaLabel?: string | null;
+    ariaLabelledBy?: string | null;
+    openerElement?: HTMLElement;
+}): {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
 export {};

package/package.json

@@ -3,7 +3,7 @@
   "description": "Dropdown variants for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "10.11.7",
+  "version": "10.12.0",
   "publishConfig": {
     "access": "public"
   },
@@ -29,19 +29,19 @@
   },
   "dependencies": {
     "@khanacademy/wonder-blocks-announcer": "1.1.1",
-    "@khanacademy/wonder-blocks-cell": "6.2.9",
-    "@khanacademy/wonder-blocks-clickable": "8.2.8",
+    "@khanacademy/wonder-blocks-cell": "6.2.10",
     "@khanacademy/wonder-blocks-core": "12.4.4",
-    "@khanacademy/wonder-blocks-form": "7.6.9",
-    "@khanacademy/wonder-blocks-icon": "5.3.22",
-    "@khanacademy/wonder-blocks-icon-button": "11.4.4",
-    "@khanacademy/wonder-blocks-modal": "8.7.10",
-    "@khanacademy/wonder-blocks-pill": "3.1.72",
-    "@khanacademy/wonder-blocks-search-field": "5.1.79",
-    "@khanacademy/wonder-blocks-styles": "0.2.52",
+    "@khanacademy/wonder-blocks-clickable": "8.2.9",
+    "@khanacademy/wonder-blocks-icon": "5.3.23",
+    "@khanacademy/wonder-blocks-form": "7.6.10",
+    "@khanacademy/wonder-blocks-icon-button": "11.4.5",
+    "@khanacademy/wonder-blocks-modal": "8.7.11",
+    "@khanacademy/wonder-blocks-pill": "3.1.73",
+    "@khanacademy/wonder-blocks-search-field": "5.1.80",
     "@khanacademy/wonder-blocks-timing": "7.1.0",
-    "@khanacademy/wonder-blocks-tokens": "17.2.0",
-    "@khanacademy/wonder-blocks-typography": "5.0.2"
+    "@khanacademy/wonder-blocks-styles": "0.2.53",
+    "@khanacademy/wonder-blocks-tokens": "17.3.0",
+    "@khanacademy/wonder-blocks-typography": "5.0.3"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -56,7 +56,8 @@
     "react-window": "^1.8.11"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "3.3.0"
+    "@khanacademy/wb-dev-build-settings": "3.3.0",
+    "@khanacademy/wonder-blocks-labeled-field": "4.1.9"
   },
   "scripts": {
     "build:css": "pnpm exec wonder-blocks-tokens .",