@khanacademy/wonder-blocks-dropdown 10.9.0 → 10.9.1

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

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-dropdown@10.9.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown
+> @khanacademy/wonder-blocks-dropdown@10.9.1 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,26 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 10.9.1
+
+### Patch Changes
+
+- 40cb70f: Add `require-logical-properties-for-rtl` ESLint rule to `eslint-plugin-wonder-blocks` recommended config, and migrate all Wonder Blocks component source files to use CSS logical properties for improved RTL layout support.
+- 40cb70f: Enable RTL logical-properties ESLint rule in recommended config
+- Updated dependencies [40cb70f]
+- Updated dependencies [40cb70f]
+- Updated dependencies [c97ece4]
+    - @khanacademy/wonder-blocks-cell@6.2.1
+    - @khanacademy/wonder-blocks-core@12.4.4
+    - @khanacademy/wonder-blocks-form@7.6.1
+    - @khanacademy/wonder-blocks-modal@8.7.1
+    - @khanacademy/wonder-blocks-clickable@8.2.0
+    - @khanacademy/wonder-blocks-announcer@1.1.1
+    - @khanacademy/wonder-blocks-icon@5.3.15
+    - @khanacademy/wonder-blocks-icon-button@11.3.1
+    - @khanacademy/wonder-blocks-pill@3.1.64
+    - @khanacademy/wonder-blocks-search-field@5.1.70
+    - @khanacademy/wonder-blocks-typography@4.3.5
+
 ## 10.9.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -32,15 +32,15 @@ var themeDefault = {listbox:{border:{radius:border.radius.radius_040},layout:{pa
 
 var theme$3 = mapValuesToCssVars(themeDefault,"--wb-c-dropdown-");
 
-class ActionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_ACTION_ITEM__}render(){const{disabled,horizontalRule,href,target,indent,label,lang,leftAccessory,rightAccessory,onClick,role,style,subtitle1,subtitle2,testId,active,"aria-label":ariaLabel}=this.props;const defaultStyle=[styles$c.wrapper,style];const labelComponent=typeof label==="string"?jsx(BodyText,{tag:"div",lang:lang,style:styles$c.label,children:label}):React.cloneElement(label,{lang,style:styles$c.label,...label.props});return jsx(DetailCell,{disabled:disabled,horizontalRule:horizontalRule,leftAccessory:leftAccessory,rightAccessory:rightAccessory,styles:{root:[defaultStyle,styles$c.shared,indent&&styles$c.indent]},role:role,testId:testId,subtitle1:subtitle1,title:labelComponent,subtitle2:subtitle2,href:href,target:target,onClick:onClick,active:active,"aria-label":ariaLabel})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const styles$c=StyleSheet.create({wrapper:{minHeight:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:theme$3.item.border.radius.default,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`,[":after"]:{content:"unset"}}},shared:{minHeight:DROPDOWN_ITEM_HEIGHT,paddingBlock:theme$3.item.layout.padding.block},label:{fontWeight:theme$3.item.font.weight,lineHeight:sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},indent:{paddingInlineStart:sizing.size_320}});
+class ActionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_ACTION_ITEM__}render(){const{disabled,horizontalRule,href,target,indent,label,lang,leftAccessory,rightAccessory,onClick,role,style,subtitle1,subtitle2,testId,active,"aria-label":ariaLabel}=this.props;const defaultStyle=[styles$c.wrapper,style];const labelComponent=typeof label==="string"?jsx(BodyText,{tag:"div",lang:lang,style:styles$c.label,children:label}):React.cloneElement(label,{lang,style:styles$c.label,...label.props});return jsx(DetailCell,{disabled:disabled,horizontalRule:horizontalRule,leftAccessory:leftAccessory,rightAccessory:rightAccessory,styles:{root:[defaultStyle,styles$c.shared,indent&&styles$c.indent]},role:role,testId:testId,subtitle1:subtitle1,title:labelComponent,subtitle2:subtitle2,href:href,target:target,onClick:onClick,active:active,"aria-label":ariaLabel})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const styles$c=StyleSheet.create({wrapper:{minBlockSize:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:theme$3.item.border.radius.default,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`,[":after"]:{content:"unset"}}},shared:{minBlockSize:DROPDOWN_ITEM_HEIGHT,paddingBlock:theme$3.item.layout.padding.block},label:{fontWeight:theme$3.item.font.weight,lineHeight:sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},indent:{paddingInlineStart:sizing.size_320}});
 
-const Check=function(props){const{selected,disabled}=props;const iconColor=disabled?semanticColor.core.foreground.disabled.strong:semanticColor.core.foreground.instructive.default;return jsx(PhosphorIcon,{color:iconColor,icon:checkIcon,size:"small",style:[styles$b.bounds,!selected&&styles$b.hide]})};const styles$b=StyleSheet.create({bounds:{alignSelf:"center",height:sizing.size_160,minHeight:sizing.size_160,minWidth:sizing.size_160},hide:{visibility:"hidden"}});
+const Check=function(props){const{selected,disabled}=props;const iconColor=disabled?semanticColor.core.foreground.disabled.strong:semanticColor.core.foreground.instructive.default;return jsx(PhosphorIcon,{color:iconColor,icon:checkIcon,size:"small",style:[styles$b.bounds,!selected&&styles$b.hide]})};const styles$b=StyleSheet.create({bounds:{alignSelf:"center",height:sizing.size_160,minBlockSize:sizing.size_160,minInlineSize:sizing.size_160},hide:{visibility:"hidden"}});
 
-const Checkbox=function(props){const{disabled,selected}=props;return jsx(View,{className:"checkbox",style:[styles$a.checkbox,selected&&!disabled&&styles$a.selected,disabled&&styles$a.disabledCheckbox],children:selected&&jsx(PhosphorIcon,{icon:checkIcon,size:"small",className:"check",style:[{width:sizing.size_120,height:sizing.size_120,margin:sizing.size_020},disabled&&selected&&styles$a.disabledCheckFormatting]})})};const checkboxTokens={color:{default:{border:semanticColor.input.default.border,background:semanticColor.input.default.background},disabled:{border:semanticColor.input.disabled.border,background:semanticColor.input.disabled.background},selected:{background:semanticColor.input.checked.background,foreground:semanticColor.input.checked.foreground}}};const styles$a=StyleSheet.create({checkbox:{alignSelf:"center",minHeight:sizing.size_160,minWidth:sizing.size_160,height:sizing.size_160,background:checkboxTokens.color.default.background,borderRadius:3,borderWidth:border.width.thin,borderStyle:"solid",borderColor:checkboxTokens.color.default.border},selected:{borderWidth:0,background:checkboxTokens.color.selected.background,color:checkboxTokens.color.selected.foreground},disabledCheckbox:{borderColor:checkboxTokens.color.disabled.border,backgroundColor:checkboxTokens.color.disabled.background},disabledCheckFormatting:{position:"absolute",top:-1,left:-1}});
+const Checkbox=function(props){const{disabled,selected}=props;return jsx(View,{className:"checkbox",style:[styles$a.checkbox,selected&&!disabled&&styles$a.selected,disabled&&styles$a.disabledCheckbox],children:selected&&jsx(PhosphorIcon,{icon:checkIcon,size:"small",className:"check",style:[{width:sizing.size_120,height:sizing.size_120,margin:sizing.size_020},disabled&&selected&&styles$a.disabledCheckFormatting]})})};const checkboxTokens={color:{default:{border:semanticColor.input.default.border,background:semanticColor.input.default.background},disabled:{border:semanticColor.input.disabled.border,background:semanticColor.input.disabled.background},selected:{background:semanticColor.input.checked.background,foreground:semanticColor.input.checked.foreground}}};const styles$a=StyleSheet.create({checkbox:{alignSelf:"center",minBlockSize:sizing.size_160,minInlineSize:sizing.size_160,height:sizing.size_160,background:checkboxTokens.color.default.background,borderRadius:3,borderWidth:border.width.thin,borderStyle:"solid",borderColor:checkboxTokens.color.default.border},selected:{borderWidth:0,background:checkboxTokens.color.selected.background,color:checkboxTokens.color.selected.foreground},disabledCheckbox:{borderColor:checkboxTokens.color.disabled.border,backgroundColor:checkboxTokens.color.disabled.background},disabledCheckFormatting:{position:"absolute",insetBlockStart:-1,insetInlineStart:-1}});
 
-class OptionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}render(){const{disabled,focused,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$9.optionItem,style];const listboxStyles=[styles$9.listboxOptionItem,focused&&styles$9.listboxOptionItemFocused];const selectStyles=[styles$9.selectOptionItem];return jsx(DetailCell,{disabled:disabled,horizontalRule:horizontalRule,styles:{root:[defaultStyle,parentComponent==="listbox"?listboxStyles:selectStyles]},"aria-selected":selected?"true":"false",role:role,testId:testId,leftAccessory:jsx(Fragment,{children:leftAccessory?jsxs(View,{style:{flexDirection:"row",gap:sizing.size_080},children:[jsx(CheckComponent,{disabled:disabled,selected:selected}),leftAccessory]}):jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1,title:jsx(BodyText,{tag:"div",style:styles$9.label,children:label}),subtitle2:subtitle2,onClick:this.handleClick,tabIndex:parentComponent==="listbox"?-1:undefined,...sharedProps})}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:theme$3.item.border.radius.default,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`};const resetFocusStyle={outline:"none",boxShadow:"none"};const styles$9=StyleSheet.create({optionItem:{paddingBlock:theme$3.item.layout.padding.block,paddingInlineStart:theme$3.item.layout.padding.inlineStart,paddingInlineEnd:theme$3.item.layout.padding.inlineEnd,whiteSpace:"nowrap",minHeight:sizing.size_400,":active":{borderRadius:theme$3.item.border.radius.press},[":is([aria-disabled=true])"]:{":focus":resetFocusStyle}},listboxOptionItem:{":focus-visible":resetFocusStyle},listboxOptionItemFocused:{...focusedStyle,":focus-visible":focusedStyle},selectOptionItem:{":focus":focusedStyle},label:{fontWeight:theme$3.item.font.weight,lineHeight:sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
+class OptionItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}render(){const{disabled,focused,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$9.optionItem,style];const listboxStyles=[styles$9.listboxOptionItem,focused&&styles$9.listboxOptionItemFocused];const selectStyles=[styles$9.selectOptionItem];return jsx(DetailCell,{disabled:disabled,horizontalRule:horizontalRule,styles:{root:[defaultStyle,parentComponent==="listbox"?listboxStyles:selectStyles]},"aria-selected":selected?"true":"false",role:role,testId:testId,leftAccessory:jsx(Fragment,{children:leftAccessory?jsxs(View,{style:{flexDirection:"row",gap:sizing.size_080},children:[jsx(CheckComponent,{disabled:disabled,selected:selected}),leftAccessory]}):jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1,title:jsx(BodyText,{tag:"div",style:styles$9.label,children:label}),subtitle2:subtitle2,onClick:this.handleClick,tabIndex:parentComponent==="listbox"?-1:undefined,...sharedProps})}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:theme$3.item.border.radius.default,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`};const resetFocusStyle={outline:"none",boxShadow:"none"};const styles$9=StyleSheet.create({optionItem:{paddingBlock:theme$3.item.layout.padding.block,paddingInlineStart:theme$3.item.layout.padding.inlineStart,paddingInlineEnd:theme$3.item.layout.padding.inlineEnd,whiteSpace:"nowrap",minBlockSize:sizing.size_400,":active":{borderRadius:theme$3.item.border.radius.press},[":is([aria-disabled=true])"]:{":focus":resetFocusStyle}},listboxOptionItem:{":focus-visible":resetFocusStyle},listboxOptionItemFocused:{...focusedStyle,":focus-visible":focusedStyle},selectOptionItem:{":focus":focusedStyle},label:{fontWeight:theme$3.item.font.weight,lineHeight:sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
 
-class SeparatorItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsx(View,{style:[styles$8.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const styles$8=StyleSheet.create({separator:{borderTop:`${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`,height:1,minHeight:1,marginBlock:sizing.size_040}});
+class SeparatorItem extends React.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsx(View,{style:[styles$8.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const styles$8=StyleSheet.create({separator:{borderBlockStart:`${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`,height:1,minBlockSize:1,marginBlock:sizing.size_040}});
 
 const DropdownOpener=React.forwardRef((props,ref)=>{const{disabled=false,readOnly=false,testId,text,opened,"aria-controls":ariaControls,"aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,"aria-label":ariaLabel,id,role,onBlur,onClick,children,error}=props;const renderAnchorChildren=(eventState,clickableChildrenProps)=>{const renderedChildren=children({...eventState,text,opened});const childrenProps=renderedChildren.props;const childrenTestId=childrenProps?.testId||childrenProps?.["data-testid"];const renderedAriaLabel=childrenProps["aria-label"]??ariaLabel;return React.cloneElement(renderedChildren,{...clickableChildrenProps,ref,"aria-label":renderedAriaLabel??undefined,"aria-invalid":error,disabled,"aria-controls":ariaControls,role,id,"aria-expanded":opened?"true":"false","aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,"aria-disabled":readOnly||disabled||undefined,onClick:childrenProps.onClick?e=>{childrenProps.onClick(e);clickableChildrenProps.onClick(e);}:clickableChildrenProps.onClick,"data-testid":childrenTestId||testId,onBlur:onBlur?e=>{onBlur(e);clickableChildrenProps.onBlur(e);}:clickableChildrenProps.onBlur})};return jsx(ClickableBehavior,{onClick:onClick,disabled:disabled||readOnly,tabIndex:0,children:(eventState,handlers)=>renderAnchorChildren(eventState,handlers)})});DropdownOpener.displayName="DropdownOpener";
 
@@ -52,19 +52,19 @@ class DropdownCoreVirtualized extends React.Component{componentDidMount(){const{
 
 function modifyMaxHeight({state,options}){const overflow=detectOverflow(state,options);const{y}=state.modifiersData.preventOverflow||{x:0,y:0};const{height}=state.rects.popper;const[basePlacement]=state.placement.split("-");const heightProp=basePlacement==="top"?"top":"bottom";const maxHeight=height-overflow[heightProp]-y;state.styles.popper={...state.styles.popper,maxHeight:`${maxHeight}px`,["--popper-max-height"]:`${maxHeight}px`};}const maxHeightModifier={name:"maxHeight",enabled:true,phase:"main",options:{padding:DROPDOWN_ITEM_HEIGHT},requiresIfExists:["offset","preventOverflow","flip"],fn:modifyMaxHeight};
 
-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,maxWidth:"100%"},"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
+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}
 
-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.focusedIndex===0||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=this.state.itemRefs.length-1;}else if(!this.isSearchFieldFocused()){this.focusedIndex-=1;}this.scheduleToFocusCurrentItem();}focusNextItem(){if(this.focusedIndex===this.state.itemRefs.length-1||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}else if(!this.isSearchFieldFocused()){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$7.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$7.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$7.dropdown,isReferenceHidden&&styles$7.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsx(View,{id:id,role:role,"aria-labelledby":ariaLabelledby,style:[styles$7.listboxOrMenu,{minWidth: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$7.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$7=StyleSheet.create({menuWrapper:{width:"fit-content",maxWidth:"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,maxHeight:"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,minHeight:"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.focusedIndex===0||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=this.state.itemRefs.length-1;}else if(!this.isSearchFieldFocused()){this.focusedIndex-=1;}this.scheduleToFocusCurrentItem();}focusNextItem(){if(this.focusedIndex===this.state.itemRefs.length-1||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}else if(!this.isSearchFieldFocused()){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$7.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$7.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$7.dropdown,isReferenceHidden&&styles$7.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsx(View,{id:id,role:role,"aria-labelledby":ariaLabelledby,style:[styles$7.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$7.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$7=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:"1.8rem"},lineHeight:{small:font.lineHeight.xMedium,default:font.lineHeight.large,large:"2.6rem"},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$1=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$1,{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,minWidth:"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,...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,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$6.icon,stylesProp?.startIcon],"aria-hidden":"true"}):React.cloneElement(startIcon,{"aria-hidden":true,style:[styles$6.icon,stylesProp?.startIcon]})),jsx(BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles$6.label,stylesProp?.label],children:children}),endIcon&&(typeof endIcon==="string"?jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles$6.icon,stylesProp?.endIcon],"aria-hidden":"true"}):React.cloneElement(endIcon,{"aria-hidden":true,style:[styles$6.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,...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,...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$6={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"]:disabledStatesStyles,[":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]};
+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:"1.8rem"},lineHeight:{small:font.lineHeight.xMedium,default:font.lineHeight.large,large:"2.6rem"},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$1=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$1,{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,...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,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$6.icon,stylesProp?.startIcon],"aria-hidden":"true"}):React.cloneElement(startIcon,{"aria-hidden":true,style:[styles$6.icon,stylesProp?.startIcon]})),jsx(BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles$6.label,stylesProp?.label],children:children}),endIcon&&(typeof endIcon==="string"?jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles$6.icon,stylesProp?.endIcon],"aria-hidden":"true"}):React.cloneElement(endIcon,{"aria-hidden":true,style:[styles$6.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,...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,...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$6={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"]:disabledStatesStyles,[":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]};
 
 class ActionMenuOpenerCore extends React.Component{render(){const{children,disabled,waiting:_,testId,opened,"aria-label":ariaLabel,...restProps}=this.props;return jsx(Button,{"aria-expanded":opened?"true":"false","aria-haspopup":"menu",kind:"tertiary","aria-label":ariaLabel,disabled:disabled,...restProps,testId:testId,endIcon:caretDownIcon,children:children})}}
 
-function ActionMenu({alignment="left","aria-label":ariaLabel,disabled=false,children,menuText,opened:openedProp,onToggle,onChange,selectedValues,testId,dropdownStyle,style,className,opener,dropdownId,id}){const[internalOpened,setInternalOpened]=React.useState(false);const openerElementRef=React.useRef(undefined);const generatedUniqueOpenerId=React.useId();const generatedUniqueDropdownId=React.useId();const uniqueOpenerId=id??generatedUniqueOpenerId;const uniqueDropdownId=dropdownId??generatedUniqueDropdownId;const opened=typeof openedProp==="boolean"?openedProp:internalOpened;const handleOpenChanged=React.useCallback(newOpened=>{setInternalOpened(newOpened);if(onToggle){onToggle(newOpened);}},[onToggle]);const handleItemSelected=React.useCallback(()=>{handleOpenChanged(false);if(openerElementRef.current){openerElementRef.current.focus();}},[handleOpenChanged]);const handleOptionSelected=React.useCallback(selectedValue=>{if(!onChange||!selectedValues){return}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]);}handleItemSelected();},[onChange,selectedValues,handleItemSelected]);const getMenuItems=React.useCallback(()=>{const allChildren=React.Children.toArray(children).filter(Boolean);const isOptionItemIncluded=allChildren.some(item=>OptionItem.isClassOf(item));return allChildren.map(item=>{const{value,disabled}=item.props;const itemObject={component:item,focusable:ActionItem.isClassOf(item)||OptionItem.isClassOf(item)?!disabled:false,populatedProps:{}};if(ActionItem.isClassOf(item)){return {...itemObject,populatedProps:{indent:isOptionItemIncluded,onClick:handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})},[children,selectedValues,handleItemSelected,handleOptionSelected]);const handleOpenerRef=React.useCallback(node=>{openerElementRef.current=ReactDOM.findDOMNode(node);},[]);const handleClick=React.useCallback(e=>{handleOpenChanged(!opened);},[handleOpenChanged,opened]);const renderOpener=(numItems,dropdownId)=>{return jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:handleClick,disabled:numItems===0||disabled,text:menuText,ref:handleOpenerRef,testId:opener?undefined:testId,opened:opened,role:"button","aria-label":ariaLabel,children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})};const items=getMenuItems();return jsx(DropdownCore$1,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:opened,items:items,openerElement:openerElementRef.current,onOpenChanged:handleOpenChanged,dropdownStyle:[styles$5.menuTopSpace,dropdownStyle],"aria-labelledby":uniqueOpenerId})}const styles$5=StyleSheet.create({caret:{marginInlineStart:sizing.size_040},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{top:`calc(-1 * ${sizing.size_040})`}});
+function ActionMenu({alignment="left","aria-label":ariaLabel,disabled=false,children,menuText,opened:openedProp,onToggle,onChange,selectedValues,testId,dropdownStyle,style,className,opener,dropdownId,id}){const[internalOpened,setInternalOpened]=React.useState(false);const openerElementRef=React.useRef(undefined);const generatedUniqueOpenerId=React.useId();const generatedUniqueDropdownId=React.useId();const uniqueOpenerId=id??generatedUniqueOpenerId;const uniqueDropdownId=dropdownId??generatedUniqueDropdownId;const opened=typeof openedProp==="boolean"?openedProp:internalOpened;const handleOpenChanged=React.useCallback(newOpened=>{setInternalOpened(newOpened);if(onToggle){onToggle(newOpened);}},[onToggle]);const handleItemSelected=React.useCallback(()=>{handleOpenChanged(false);if(openerElementRef.current){openerElementRef.current.focus();}},[handleOpenChanged]);const handleOptionSelected=React.useCallback(selectedValue=>{if(!onChange||!selectedValues){return}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]);}handleItemSelected();},[onChange,selectedValues,handleItemSelected]);const getMenuItems=React.useCallback(()=>{const allChildren=React.Children.toArray(children).filter(Boolean);const isOptionItemIncluded=allChildren.some(item=>OptionItem.isClassOf(item));return allChildren.map(item=>{const{value,disabled}=item.props;const itemObject={component:item,focusable:ActionItem.isClassOf(item)||OptionItem.isClassOf(item)?!disabled:false,populatedProps:{}};if(ActionItem.isClassOf(item)){return {...itemObject,populatedProps:{indent:isOptionItemIncluded,onClick:handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})},[children,selectedValues,handleItemSelected,handleOptionSelected]);const handleOpenerRef=React.useCallback(node=>{openerElementRef.current=ReactDOM.findDOMNode(node);},[]);const handleClick=React.useCallback(e=>{handleOpenChanged(!opened);},[handleOpenChanged,opened]);const renderOpener=(numItems,dropdownId)=>{return jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:handleClick,disabled:numItems===0||disabled,text:menuText,ref:handleOpenerRef,testId:opener?undefined:testId,opened:opened,role:"button","aria-label":ariaLabel,children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})};const items=getMenuItems();return jsx(DropdownCore$1,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:opened,items:items,openerElement:openerElementRef.current,onOpenChanged:handleOpenChanged,dropdownStyle:[styles$5.menuTopSpace,dropdownStyle],"aria-labelledby":uniqueOpenerId})}const styles$5=StyleSheet.create({caret:{marginInlineStart:sizing.size_040},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{insetBlockStart:`calc(-1 * ${sizing.size_040})`}});
 
-const StyledButton=addStyle("button");class SelectOpener extends React.Component{render(){const{children,disabled,readOnly,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const iconColor=disabled?semanticColor.core.foreground.disabled.default:theme$3.opener.color.icon;const style=[styles$4.shared,styles$4.default,disabled&&styles$4.disabled,error&&styles$4.error,isPlaceholder&&styles$4.placeholder,!disabled&&!readOnly&&this.state.pressed&&styles$4.press,readOnly&&styles$4.readOnly];const allowInteraction=!disabled&&!readOnly;return jsxs(StyledButton,{...sharedProps,"aria-disabled":readOnly||disabled||undefined,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:allowInteraction?this.handleClick:undefined,onKeyDown:allowInteraction?this.handleKeyDown:undefined,onKeyUp:allowInteraction?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsx(BodyText,{tag:"span",style:styles$4.text,children:children||jsx("span",{"aria-hidden":"true",children:" "})}),jsx(PhosphorIcon,{icon:caretDownIcon,color:iconColor,size:"small",style:styles$4.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,readOnly:false,error:false,isPlaceholder:false};const PRESS_SHADOW=`0 0 0 ${border.width.thin} ${semanticColor.input.default.border}`;const styles$4=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:semanticColor.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:sizing.size_080,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minWidth:sizing.size_160},default:{background:semanticColor.input.default.background,border:`${border.width.thin} solid ${semanticColor.input.default.border}`,color:semanticColor.input.default.foreground,cursor:"pointer",":focus":{...focusStyles.focus[":focus-visible"]},":active":{boxShadow:`${PRESS_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},error:{background:semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground},disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground,cursor:"not-allowed",":active":{boxShadow:"none"}},press:{boxShadow:PRESS_SHADOW,":focus-visible":{boxShadow:`${PRESS_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},placeholder:{color:semanticColor.input.default.placeholder},readOnly:{background:semanticColor.input.readOnly.background,color:semanticColor.input.readOnly.text,":active":{boxShadow:focusStyles.focus[":focus-visible"].boxShadow}}});
+const StyledButton=addStyle("button");class SelectOpener extends React.Component{render(){const{children,disabled,readOnly,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const iconColor=disabled?semanticColor.core.foreground.disabled.default:theme$3.opener.color.icon;const style=[styles$4.shared,styles$4.default,disabled&&styles$4.disabled,error&&styles$4.error,isPlaceholder&&styles$4.placeholder,!disabled&&!readOnly&&this.state.pressed&&styles$4.press,readOnly&&styles$4.readOnly];const allowInteraction=!disabled&&!readOnly;return jsxs(StyledButton,{...sharedProps,"aria-disabled":readOnly||disabled||undefined,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:allowInteraction?this.handleClick:undefined,onKeyDown:allowInteraction?this.handleKeyDown:undefined,onKeyUp:allowInteraction?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsx(BodyText,{tag:"span",style:styles$4.text,children:children||jsx("span",{"aria-hidden":"true",children:" "})}),jsx(PhosphorIcon,{icon:caretDownIcon,color:iconColor,size:"small",style:styles$4.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===keys.enter||keyName===keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,readOnly:false,error:false,isPlaceholder:false};const PRESS_SHADOW=`0 0 0 ${border.width.thin} ${semanticColor.input.default.border}`;const styles$4=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:semanticColor.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:sizing.size_080,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minInlineSize:sizing.size_160},default:{background:semanticColor.input.default.background,border:`${border.width.thin} solid ${semanticColor.input.default.border}`,color:semanticColor.input.default.foreground,cursor:"pointer",":focus":{...focusStyles.focus[":focus-visible"]},":active":{boxShadow:`${PRESS_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},error:{background:semanticColor.input.error.background,border:`${theme$3.opener.border.width.error} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground},disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground,cursor:"not-allowed",":active":{boxShadow:"none"}},press:{boxShadow:PRESS_SHADOW,":focus-visible":{boxShadow:`${PRESS_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},placeholder:{color:semanticColor.input.default.placeholder},readOnly:{background:semanticColor.input.readOnly.background,color:semanticColor.input.readOnly.text,":active":{boxShadow:focusStyles.focus[":focus-visible"].boxShadow}}});
 
 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}}
 
@@ -84,6 +84,6 @@ 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$1.listbox,style,disabled&&styles$1.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$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const styles$1=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=""}){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.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.wrapper,isListboxFocused&&styles.focused,disabled&&styles.disabled,!disabled&&error&&styles.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.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.button,styles.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.button,openState&&styles.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.listbox,{minWidth:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles.listbox,isReferenceHidden&&styles.hidden,{minWidth:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles=StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxWidth:"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,minWidth:sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"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,maxHeight:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",insetInlineEnd:sizing.size_0,margin:0},buttonOpen:{transform:"rotate(180deg)"},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=""}){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.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.wrapper,isListboxFocused&&styles.focused,disabled&&styles.disabled,!disabled&&error&&styles.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.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.button,styles.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.button,openState&&styles.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.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles.listbox,isReferenceHidden&&styles.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles=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"}},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)"},clearButton:{insetInlineEnd:sizing.size_360},iconWrapper:{padding:sizing.size_040,minInlineSize:"auto"}});
 
 export { ActionItem, ActionMenu, Combobox, Listbox, MultiSelect, OptionItem, SeparatorItem, SingleSelect };

package/dist/index.js

@@ -64,15 +64,15 @@ var themeDefault = {listbox:{border:{radius:wonderBlocksTokens.border.radius.rad
 
 var theme$3 = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-dropdown-");
 
-class ActionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_ACTION_ITEM__}render(){const{disabled,horizontalRule,href,target,indent,label,lang,leftAccessory,rightAccessory,onClick,role,style,subtitle1,subtitle2,testId,active,"aria-label":ariaLabel}=this.props;const defaultStyle=[styles$c.wrapper,style];const labelComponent=typeof label==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",lang:lang,style:styles$c.label,children:label}):React__namespace.cloneElement(label,{lang,style:styles$c.label,...label.props});return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,leftAccessory:leftAccessory,rightAccessory:rightAccessory,styles:{root:[defaultStyle,styles$c.shared,indent&&styles$c.indent]},role:role,testId:testId,subtitle1:subtitle1,title:labelComponent,subtitle2:subtitle2,href:href,target:target,onClick:onClick,active:active,"aria-label":ariaLabel})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const styles$c=aphrodite.StyleSheet.create({wrapper:{minHeight:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:theme$3.item.border.radius.default,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`,[":after"]:{content:"unset"}}},shared:{minHeight:DROPDOWN_ITEM_HEIGHT,paddingBlock:theme$3.item.layout.padding.block},label:{fontWeight:theme$3.item.font.weight,lineHeight:wonderBlocksTokens.sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},indent:{paddingInlineStart:wonderBlocksTokens.sizing.size_320}});
+class ActionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_ACTION_ITEM__}render(){const{disabled,horizontalRule,href,target,indent,label,lang,leftAccessory,rightAccessory,onClick,role,style,subtitle1,subtitle2,testId,active,"aria-label":ariaLabel}=this.props;const defaultStyle=[styles$c.wrapper,style];const labelComponent=typeof label==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",lang:lang,style:styles$c.label,children:label}):React__namespace.cloneElement(label,{lang,style:styles$c.label,...label.props});return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,leftAccessory:leftAccessory,rightAccessory:rightAccessory,styles:{root:[defaultStyle,styles$c.shared,indent&&styles$c.indent]},role:role,testId:testId,subtitle1:subtitle1,title:labelComponent,subtitle2:subtitle2,href:href,target:target,onClick:onClick,active:active,"aria-label":ariaLabel})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const styles$c=aphrodite.StyleSheet.create({wrapper:{minBlockSize:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:theme$3.item.border.radius.default,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`,[":after"]:{content:"unset"}}},shared:{minBlockSize:DROPDOWN_ITEM_HEIGHT,paddingBlock:theme$3.item.layout.padding.block},label:{fontWeight:theme$3.item.font.weight,lineHeight:wonderBlocksTokens.sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},indent:{paddingInlineStart:wonderBlocksTokens.sizing.size_320}});
 
-const Check=function(props){const{selected,disabled}=props;const iconColor=disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.strong:wonderBlocksTokens.semanticColor.core.foreground.instructive.default;return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{color:iconColor,icon:checkIcon__default["default"],size:"small",style:[styles$b.bounds,!selected&&styles$b.hide]})};const styles$b=aphrodite.StyleSheet.create({bounds:{alignSelf:"center",height:wonderBlocksTokens.sizing.size_160,minHeight:wonderBlocksTokens.sizing.size_160,minWidth:wonderBlocksTokens.sizing.size_160},hide:{visibility:"hidden"}});
+const Check=function(props){const{selected,disabled}=props;const iconColor=disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.strong:wonderBlocksTokens.semanticColor.core.foreground.instructive.default;return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{color:iconColor,icon:checkIcon__default["default"],size:"small",style:[styles$b.bounds,!selected&&styles$b.hide]})};const styles$b=aphrodite.StyleSheet.create({bounds:{alignSelf:"center",height:wonderBlocksTokens.sizing.size_160,minBlockSize:wonderBlocksTokens.sizing.size_160,minInlineSize:wonderBlocksTokens.sizing.size_160},hide:{visibility:"hidden"}});
 
-const Checkbox=function(props){const{disabled,selected}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{className:"checkbox",style:[styles$a.checkbox,selected&&!disabled&&styles$a.selected,disabled&&styles$a.disabledCheckbox],children:selected&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:checkIcon__default["default"],size:"small",className:"check",style:[{width:wonderBlocksTokens.sizing.size_120,height:wonderBlocksTokens.sizing.size_120,margin:wonderBlocksTokens.sizing.size_020},disabled&&selected&&styles$a.disabledCheckFormatting]})})};const checkboxTokens={color:{default:{border:wonderBlocksTokens.semanticColor.input.default.border,background:wonderBlocksTokens.semanticColor.input.default.background},disabled:{border:wonderBlocksTokens.semanticColor.input.disabled.border,background:wonderBlocksTokens.semanticColor.input.disabled.background},selected:{background:wonderBlocksTokens.semanticColor.input.checked.background,foreground:wonderBlocksTokens.semanticColor.input.checked.foreground}}};const styles$a=aphrodite.StyleSheet.create({checkbox:{alignSelf:"center",minHeight:wonderBlocksTokens.sizing.size_160,minWidth:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160,background:checkboxTokens.color.default.background,borderRadius:3,borderWidth:wonderBlocksTokens.border.width.thin,borderStyle:"solid",borderColor:checkboxTokens.color.default.border},selected:{borderWidth:0,background:checkboxTokens.color.selected.background,color:checkboxTokens.color.selected.foreground},disabledCheckbox:{borderColor:checkboxTokens.color.disabled.border,backgroundColor:checkboxTokens.color.disabled.background},disabledCheckFormatting:{position:"absolute",top:-1,left:-1}});
+const Checkbox=function(props){const{disabled,selected}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{className:"checkbox",style:[styles$a.checkbox,selected&&!disabled&&styles$a.selected,disabled&&styles$a.disabledCheckbox],children:selected&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:checkIcon__default["default"],size:"small",className:"check",style:[{width:wonderBlocksTokens.sizing.size_120,height:wonderBlocksTokens.sizing.size_120,margin:wonderBlocksTokens.sizing.size_020},disabled&&selected&&styles$a.disabledCheckFormatting]})})};const checkboxTokens={color:{default:{border:wonderBlocksTokens.semanticColor.input.default.border,background:wonderBlocksTokens.semanticColor.input.default.background},disabled:{border:wonderBlocksTokens.semanticColor.input.disabled.border,background:wonderBlocksTokens.semanticColor.input.disabled.background},selected:{background:wonderBlocksTokens.semanticColor.input.checked.background,foreground:wonderBlocksTokens.semanticColor.input.checked.foreground}}};const styles$a=aphrodite.StyleSheet.create({checkbox:{alignSelf:"center",minBlockSize:wonderBlocksTokens.sizing.size_160,minInlineSize:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160,background:checkboxTokens.color.default.background,borderRadius:3,borderWidth:wonderBlocksTokens.border.width.thin,borderStyle:"solid",borderColor:checkboxTokens.color.default.border},selected:{borderWidth:0,background:checkboxTokens.color.selected.background,color:checkboxTokens.color.selected.foreground},disabledCheckbox:{borderColor:checkboxTokens.color.disabled.border,backgroundColor:checkboxTokens.color.disabled.background},disabledCheckFormatting:{position:"absolute",insetBlockStart:-1,insetInlineStart:-1}});
 
-class OptionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}render(){const{disabled,focused,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$9.optionItem,style];const listboxStyles=[styles$9.listboxOptionItem,focused&&styles$9.listboxOptionItemFocused];const selectStyles=[styles$9.selectOptionItem];return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,styles:{root:[defaultStyle,parentComponent==="listbox"?listboxStyles:selectStyles]},"aria-selected":selected?"true":"false",role:role,testId:testId,leftAccessory:jsxRuntime.jsx(jsxRuntime.Fragment,{children:leftAccessory?jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080},children:[jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected}),leftAccessory]}):jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1,title:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",style:styles$9.label,children:label}),subtitle2:subtitle2,onClick:this.handleClick,tabIndex:parentComponent==="listbox"?-1:undefined,...sharedProps})}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:theme$3.item.border.radius.default,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`};const resetFocusStyle={outline:"none",boxShadow:"none"};const styles$9=aphrodite.StyleSheet.create({optionItem:{paddingBlock:theme$3.item.layout.padding.block,paddingInlineStart:theme$3.item.layout.padding.inlineStart,paddingInlineEnd:theme$3.item.layout.padding.inlineEnd,whiteSpace:"nowrap",minHeight:wonderBlocksTokens.sizing.size_400,":active":{borderRadius:theme$3.item.border.radius.press},[":is([aria-disabled=true])"]:{":focus":resetFocusStyle}},listboxOptionItem:{":focus-visible":resetFocusStyle},listboxOptionItemFocused:{...focusedStyle,":focus-visible":focusedStyle},selectOptionItem:{":focus":focusedStyle},label:{fontWeight:theme$3.item.font.weight,lineHeight:wonderBlocksTokens.sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
+class OptionItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_OPTION_ITEM__}getCheckComponent(){if(this.props.variant==="check"){return Check}else {return Checkbox}}render(){const{disabled,focused,label,selected,testId,leftAccessory,horizontalRule,parentComponent,rightAccessory,style,subtitle1,subtitle2,value,onClick,onToggle,variant,role,...sharedProps}=this.props;const CheckComponent=this.getCheckComponent();const defaultStyle=[styles$9.optionItem,style];const listboxStyles=[styles$9.listboxOptionItem,focused&&styles$9.listboxOptionItemFocused];const selectStyles=[styles$9.selectOptionItem];return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,styles:{root:[defaultStyle,parentComponent==="listbox"?listboxStyles:selectStyles]},"aria-selected":selected?"true":"false",role:role,testId:testId,leftAccessory:jsxRuntime.jsx(jsxRuntime.Fragment,{children:leftAccessory?jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080},children:[jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected}),leftAccessory]}):jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1,title:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",style:styles$9.label,children:label}),subtitle2:subtitle2,onClick:this.handleClick,tabIndex:parentComponent==="listbox"?-1:undefined,...sharedProps})}constructor(...args){super(...args),this.handleClick=()=>{const{onClick,onToggle,value}=this.props;onToggle(value);if(onClick){onClick();}};}}OptionItem.defaultProps={disabled:false,focused:false,horizontalRule:"none",onToggle:()=>void 0,role:"option",selected:false};OptionItem.__IS_OPTION_ITEM__=true;const focusedStyle={borderRadius:theme$3.item.border.radius.default,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`};const resetFocusStyle={outline:"none",boxShadow:"none"};const styles$9=aphrodite.StyleSheet.create({optionItem:{paddingBlock:theme$3.item.layout.padding.block,paddingInlineStart:theme$3.item.layout.padding.inlineStart,paddingInlineEnd:theme$3.item.layout.padding.inlineEnd,whiteSpace:"nowrap",minBlockSize:wonderBlocksTokens.sizing.size_400,":active":{borderRadius:theme$3.item.border.radius.press},[":is([aria-disabled=true])"]:{":focus":resetFocusStyle}},listboxOptionItem:{":focus-visible":resetFocusStyle},listboxOptionItemFocused:{...focusedStyle,":focus-visible":focusedStyle},selectOptionItem:{":focus":focusedStyle},label:{fontWeight:theme$3.item.font.weight,lineHeight:wonderBlocksTokens.sizing.size_200,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},hide:{visibility:"hidden"}});
 
-class SeparatorItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$8.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const styles$8=aphrodite.StyleSheet.create({separator:{borderTop:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,height:1,minHeight:1,marginBlock:wonderBlocksTokens.sizing.size_040}});
+class SeparatorItem extends React__namespace.Component{static isClassOf(instance){return instance&&instance.type&&instance.type.__IS_SEPARATOR_ITEM__}render(){return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$8.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const styles$8=aphrodite.StyleSheet.create({separator:{borderBlockStart:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,height:1,minBlockSize:1,marginBlock:wonderBlocksTokens.sizing.size_040}});
 
 const DropdownOpener=React__namespace.forwardRef((props,ref)=>{const{disabled=false,readOnly=false,testId,text,opened,"aria-controls":ariaControls,"aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,"aria-label":ariaLabel,id,role,onBlur,onClick,children,error}=props;const renderAnchorChildren=(eventState,clickableChildrenProps)=>{const renderedChildren=children({...eventState,text,opened});const childrenProps=renderedChildren.props;const childrenTestId=childrenProps?.testId||childrenProps?.["data-testid"];const renderedAriaLabel=childrenProps["aria-label"]??ariaLabel;return React__namespace.cloneElement(renderedChildren,{...clickableChildrenProps,ref,"aria-label":renderedAriaLabel??undefined,"aria-invalid":error,disabled,"aria-controls":ariaControls,role,id,"aria-expanded":opened?"true":"false","aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,"aria-disabled":readOnly||disabled||undefined,onClick:childrenProps.onClick?e=>{childrenProps.onClick(e);clickableChildrenProps.onClick(e);}:clickableChildrenProps.onClick,"data-testid":childrenTestId||testId,onBlur:onBlur?e=>{onBlur(e);clickableChildrenProps.onBlur(e);}:clickableChildrenProps.onBlur})};return jsxRuntime.jsx(wonderBlocksClickable.ClickableBehavior,{onClick:onClick,disabled:disabled||readOnly,tabIndex:0,children:(eventState,handlers)=>renderAnchorChildren(eventState,handlers)})});DropdownOpener.displayName="DropdownOpener";
 
@@ -84,19 +84,19 @@ class DropdownCoreVirtualized extends React__namespace.Component{componentDidMou
 
 function modifyMaxHeight({state,options}){const overflow=core.detectOverflow(state,options);const{y}=state.modifiersData.preventOverflow||{x:0,y:0};const{height}=state.rects.popper;const[basePlacement]=state.placement.split("-");const heightProp=basePlacement==="top"?"top":"bottom";const maxHeight=height-overflow[heightProp]-y;state.styles.popper={...state.styles.popper,maxHeight:`${maxHeight}px`,["--popper-max-height"]:`${maxHeight}px`};}const maxHeightModifier={name:"maxHeight",enabled:true,phase:"main",options:{padding:DROPDOWN_ITEM_HEIGHT},requiresIfExists:["offset","preventOverflow","flip"],fn:modifyMaxHeight};
 
-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,maxWidth:"100%"},"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
+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}
 
-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.focusedIndex===0||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=this.state.itemRefs.length-1;}else if(!this.isSearchFieldFocused()){this.focusedIndex-=1;}this.scheduleToFocusCurrentItem();}focusNextItem(){if(this.focusedIndex===this.state.itemRefs.length-1||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}else if(!this.isSearchFieldFocused()){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$7.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$7.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$7.dropdown,isReferenceHidden&&styles$7.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,"aria-labelledby":ariaLabelledby,style:[styles$7.listboxOrMenu,{minWidth: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$7.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$7=aphrodite.StyleSheet.create({menuWrapper:{width:"fit-content",maxWidth:"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,maxHeight:"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,minHeight:"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.focusedIndex===0||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=this.state.itemRefs.length-1;}else if(!this.isSearchFieldFocused()){this.focusedIndex-=1;}this.scheduleToFocusCurrentItem();}focusNextItem(){if(this.focusedIndex===this.state.itemRefs.length-1||this.isSearchFieldFocused()&&!this.props.enableTypeAhead){if(this.hasSearchField()&&!this.isSearchFieldFocused()){return this.focusSearchField()}this.focusedIndex=0;}else if(!this.isSearchFieldFocused()){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$7.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$7.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$7.dropdown,isReferenceHidden&&styles$7.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,"aria-labelledby":ariaLabelledby,style:[styles$7.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$7.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$7=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:"1.8rem"},lineHeight:{small:wonderBlocksTokens.font.lineHeight.xMedium,default:wonderBlocksTokens.font.lineHeight.large,large:"2.6rem"},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$1=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$1,{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,minWidth:"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,...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,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$6.icon,stylesProp?.startIcon],"aria-hidden":"true"}):React__namespace.cloneElement(startIcon,{"aria-hidden":true,style:[styles$6.icon,stylesProp?.startIcon]})),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles$6.label,stylesProp?.label],children:children}),endIcon&&(typeof endIcon==="string"?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles$6.icon,stylesProp?.endIcon],"aria-hidden":"true"}):React__namespace.cloneElement(endIcon,{"aria-hidden":true,style:[styles$6.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,...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,...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$6={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"]:disabledStatesStyles,[":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]};
+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:"1.8rem"},lineHeight:{small:wonderBlocksTokens.font.lineHeight.xMedium,default:wonderBlocksTokens.font.lineHeight.large,large:"2.6rem"},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$1=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$1,{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,...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,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$6.icon,stylesProp?.startIcon],"aria-hidden":"true"}):React__namespace.cloneElement(startIcon,{"aria-hidden":true,style:[styles$6.icon,stylesProp?.startIcon]})),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles$6.label,stylesProp?.label],children:children}),endIcon&&(typeof endIcon==="string"?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles$6.icon,stylesProp?.endIcon],"aria-hidden":"true"}):React__namespace.cloneElement(endIcon,{"aria-hidden":true,style:[styles$6.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,...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,...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$6={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"]:disabledStatesStyles,[":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]};
 
 class ActionMenuOpenerCore extends React__namespace.Component{render(){const{children,disabled,waiting:_,testId,opened,"aria-label":ariaLabel,...restProps}=this.props;return jsxRuntime.jsx(Button,{"aria-expanded":opened?"true":"false","aria-haspopup":"menu",kind:"tertiary","aria-label":ariaLabel,disabled:disabled,...restProps,testId:testId,endIcon:caretDownIcon__default["default"],children:children})}}
 
-function ActionMenu({alignment="left","aria-label":ariaLabel,disabled=false,children,menuText,opened:openedProp,onToggle,onChange,selectedValues,testId,dropdownStyle,style,className,opener,dropdownId,id}){const[internalOpened,setInternalOpened]=React__namespace.useState(false);const openerElementRef=React__namespace.useRef(undefined);const generatedUniqueOpenerId=React__namespace.useId();const generatedUniqueDropdownId=React__namespace.useId();const uniqueOpenerId=id??generatedUniqueOpenerId;const uniqueDropdownId=dropdownId??generatedUniqueDropdownId;const opened=typeof openedProp==="boolean"?openedProp:internalOpened;const handleOpenChanged=React__namespace.useCallback(newOpened=>{setInternalOpened(newOpened);if(onToggle){onToggle(newOpened);}},[onToggle]);const handleItemSelected=React__namespace.useCallback(()=>{handleOpenChanged(false);if(openerElementRef.current){openerElementRef.current.focus();}},[handleOpenChanged]);const handleOptionSelected=React__namespace.useCallback(selectedValue=>{if(!onChange||!selectedValues){return}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]);}handleItemSelected();},[onChange,selectedValues,handleItemSelected]);const getMenuItems=React__namespace.useCallback(()=>{const allChildren=React__namespace.Children.toArray(children).filter(Boolean);const isOptionItemIncluded=allChildren.some(item=>OptionItem.isClassOf(item));return allChildren.map(item=>{const{value,disabled}=item.props;const itemObject={component:item,focusable:ActionItem.isClassOf(item)||OptionItem.isClassOf(item)?!disabled:false,populatedProps:{}};if(ActionItem.isClassOf(item)){return {...itemObject,populatedProps:{indent:isOptionItemIncluded,onClick:handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})},[children,selectedValues,handleItemSelected,handleOptionSelected]);const handleOpenerRef=React__namespace.useCallback(node=>{openerElementRef.current=ReactDOM__namespace.findDOMNode(node);},[]);const handleClick=React__namespace.useCallback(e=>{handleOpenChanged(!opened);},[handleOpenChanged,opened]);const renderOpener=(numItems,dropdownId)=>{return jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:handleClick,disabled:numItems===0||disabled,text:menuText,ref:handleOpenerRef,testId:opener?undefined:testId,opened:opened,role:"button","aria-label":ariaLabel,children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsxRuntime.jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})};const items=getMenuItems();return jsxRuntime.jsx(DropdownCore$1,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:opened,items:items,openerElement:openerElementRef.current,onOpenChanged:handleOpenChanged,dropdownStyle:[styles$5.menuTopSpace,dropdownStyle],"aria-labelledby":uniqueOpenerId})}const styles$5=aphrodite.StyleSheet.create({caret:{marginInlineStart:wonderBlocksTokens.sizing.size_040},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{top:`calc(-1 * ${wonderBlocksTokens.sizing.size_040})`}});
+function ActionMenu({alignment="left","aria-label":ariaLabel,disabled=false,children,menuText,opened:openedProp,onToggle,onChange,selectedValues,testId,dropdownStyle,style,className,opener,dropdownId,id}){const[internalOpened,setInternalOpened]=React__namespace.useState(false);const openerElementRef=React__namespace.useRef(undefined);const generatedUniqueOpenerId=React__namespace.useId();const generatedUniqueDropdownId=React__namespace.useId();const uniqueOpenerId=id??generatedUniqueOpenerId;const uniqueDropdownId=dropdownId??generatedUniqueDropdownId;const opened=typeof openedProp==="boolean"?openedProp:internalOpened;const handleOpenChanged=React__namespace.useCallback(newOpened=>{setInternalOpened(newOpened);if(onToggle){onToggle(newOpened);}},[onToggle]);const handleItemSelected=React__namespace.useCallback(()=>{handleOpenChanged(false);if(openerElementRef.current){openerElementRef.current.focus();}},[handleOpenChanged]);const handleOptionSelected=React__namespace.useCallback(selectedValue=>{if(!onChange||!selectedValues){return}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]);}handleItemSelected();},[onChange,selectedValues,handleItemSelected]);const getMenuItems=React__namespace.useCallback(()=>{const allChildren=React__namespace.Children.toArray(children).filter(Boolean);const isOptionItemIncluded=allChildren.some(item=>OptionItem.isClassOf(item));return allChildren.map(item=>{const{value,disabled}=item.props;const itemObject={component:item,focusable:ActionItem.isClassOf(item)||OptionItem.isClassOf(item)?!disabled:false,populatedProps:{}};if(ActionItem.isClassOf(item)){return {...itemObject,populatedProps:{indent:isOptionItemIncluded,onClick:handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})},[children,selectedValues,handleItemSelected,handleOptionSelected]);const handleOpenerRef=React__namespace.useCallback(node=>{openerElementRef.current=ReactDOM__namespace.findDOMNode(node);},[]);const handleClick=React__namespace.useCallback(e=>{handleOpenChanged(!opened);},[handleOpenChanged,opened]);const renderOpener=(numItems,dropdownId)=>{return jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:handleClick,disabled:numItems===0||disabled,text:menuText,ref:handleOpenerRef,testId:opener?undefined:testId,opened:opened,role:"button","aria-label":ariaLabel,children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsxRuntime.jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})};const items=getMenuItems();return jsxRuntime.jsx(DropdownCore$1,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:opened,items:items,openerElement:openerElementRef.current,onOpenChanged:handleOpenChanged,dropdownStyle:[styles$5.menuTopSpace,dropdownStyle],"aria-labelledby":uniqueOpenerId})}const styles$5=aphrodite.StyleSheet.create({caret:{marginInlineStart:wonderBlocksTokens.sizing.size_040},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{insetBlockStart:`calc(-1 * ${wonderBlocksTokens.sizing.size_040})`}});
 
-const StyledButton=wonderBlocksCore.addStyle("button");class SelectOpener extends React__namespace.Component{render(){const{children,disabled,readOnly,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const iconColor=disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.default:theme$3.opener.color.icon;const style=[styles$4.shared,styles$4.default,disabled&&styles$4.disabled,error&&styles$4.error,isPlaceholder&&styles$4.placeholder,!disabled&&!readOnly&&this.state.pressed&&styles$4.press,readOnly&&styles$4.readOnly];const allowInteraction=!disabled&&!readOnly;return jsxRuntime.jsxs(StyledButton,{...sharedProps,"aria-disabled":readOnly||disabled||undefined,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:allowInteraction?this.handleClick:undefined,onKeyDown:allowInteraction?this.handleKeyDown:undefined,onKeyUp:allowInteraction?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:styles$4.text,children:children||jsxRuntime.jsx("span",{"aria-hidden":"true",children:" "})}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDownIcon__default["default"],color:iconColor,size:"small",style:styles$4.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,readOnly:false,error:false,isPlaceholder:false};const PRESS_SHADOW=`0 0 0 ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.input.default.border}`;const styles$4=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:wonderBlocksTokens.sizing.size_080,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minWidth:wonderBlocksTokens.sizing.size_160},default:{background:wonderBlocksTokens.semanticColor.input.default.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.default.border}`,color:wonderBlocksTokens.semanticColor.input.default.foreground,cursor:"pointer",":focus":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"]},":active":{boxShadow:`${PRESS_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},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},disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground,cursor:"not-allowed",":active":{boxShadow:"none"}},press:{boxShadow:PRESS_SHADOW,":focus-visible":{boxShadow:`${PRESS_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},placeholder:{color:wonderBlocksTokens.semanticColor.input.default.placeholder},readOnly:{background:wonderBlocksTokens.semanticColor.input.readOnly.background,color:wonderBlocksTokens.semanticColor.input.readOnly.text,":active":{boxShadow:wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}}});
+const StyledButton=wonderBlocksCore.addStyle("button");class SelectOpener extends React__namespace.Component{render(){const{children,disabled,readOnly,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const iconColor=disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.default:theme$3.opener.color.icon;const style=[styles$4.shared,styles$4.default,disabled&&styles$4.disabled,error&&styles$4.error,isPlaceholder&&styles$4.placeholder,!disabled&&!readOnly&&this.state.pressed&&styles$4.press,readOnly&&styles$4.readOnly];const allowInteraction=!disabled&&!readOnly;return jsxRuntime.jsxs(StyledButton,{...sharedProps,"aria-disabled":readOnly||disabled||undefined,"aria-expanded":open?"true":"false","aria-invalid":error,"aria-label":ariaLabel??undefined,"aria-required":ariaRequired,"aria-haspopup":"listbox","aria-controls":ariaControls,"data-testid":testId,id:id,role:"combobox",type:"button",style:style,onClick:allowInteraction?this.handleClick:undefined,onKeyDown:allowInteraction?this.handleKeyDown:undefined,onKeyUp:allowInteraction?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:styles$4.text,children:children||jsxRuntime.jsx("span",{"aria-hidden":"true",children:" "})}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDownIcon__default["default"],color:iconColor,size:"small",style:styles$4.caret,"aria-hidden":"true"})]})}constructor(props){super(props),this.handleClick=e=>{const{open}=this.props;this.props.onOpenChanged(!open);},this.handleKeyDown=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:true});e.preventDefault();}},this.handleKeyUp=e=>{const keyName=e.key;if(keyName===wonderBlocksCore.keys.enter||keyName===wonderBlocksCore.keys.space){this.setState({pressed:false});this.handleClick(e);}};this.state={pressed:false};}}SelectOpener.defaultProps={disabled:false,readOnly:false,error:false,isPlaceholder:false};const PRESS_SHADOW=`0 0 0 ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.input.default.border}`;const styles$4=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,height:DROPDOWN_ITEM_HEIGHT,paddingInlineStart:theme$3.opener.layout.padding.inlineStart,paddingInlineEnd:theme$3.opener.layout.padding.inlineEnd,borderWidth:0,borderRadius:theme$3.opener.border.radius.rest,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginInlineEnd:wonderBlocksTokens.sizing.size_080,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minInlineSize:wonderBlocksTokens.sizing.size_160},default:{background:wonderBlocksTokens.semanticColor.input.default.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.default.border}`,color:wonderBlocksTokens.semanticColor.input.default.foreground,cursor:"pointer",":focus":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"]},":active":{boxShadow:`${PRESS_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},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},disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground,cursor:"not-allowed",":active":{boxShadow:"none"}},press:{boxShadow:PRESS_SHADOW,":focus-visible":{boxShadow:`${PRESS_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},placeholder:{color:wonderBlocksTokens.semanticColor.input.default.placeholder},readOnly:{background:wonderBlocksTokens.semanticColor.input.readOnly.background,color:wonderBlocksTokens.semanticColor.input.readOnly.text,":active":{boxShadow:wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}}});
 
 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}}
 
@@ -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$1.listbox,style,disabled&&styles$1.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$1.listbox,style,disabled&&styles$1.disabled],tabIndex:tabIndex,testId:testId,"aria-disabled":disabled,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,"aria-multiselectable":selectionType==="multiple",children:children})}const styles$1=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=""}){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.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.wrapper,isListboxFocused&&styles.focused,disabled&&styles.disabled,!disabled&&error&&styles.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.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.button,styles.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.button,openState&&styles.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.listbox,{minWidth:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsxRuntime.jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles.listbox,isReferenceHidden&&styles.hidden,{minWidth:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxWidth:"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,minWidth:wonderBlocksTokens.sizing.size_040,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"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,maxHeight:"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)"},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=""}){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.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.wrapper,isListboxFocused&&styles.focused,disabled&&styles.disabled,!disabled&&error&&styles.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.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.button,styles.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.button,openState&&styles.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.listbox,{minInlineSize:rootNodeRef?.current?.offsetWidth}]},horizontalRule:"none"}):jsxRuntime.jsx(Listbox,{id:uniqueId,tabIndex:-1,selectionType:selectionType,style:[styles.listbox,isReferenceHidden&&styles.hidden,{minInlineSize:rootNodeRef?.current?.offsetWidth}],testId:testId?`${testId}-listbox`:undefined,"aria-label":labels.listbox,"aria-labelledby":textFieldId,children:renderList})})})]})}const styles=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"}},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)"},clearButton:{insetInlineEnd:wonderBlocksTokens.sizing.size_360},iconWrapper:{padding:wonderBlocksTokens.sizing.size_040,minInlineSize:"auto"}});
 
 exports.ActionItem = ActionItem;
 exports.ActionMenu = ActionMenu;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Dropdown variants for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "10.9.0",
+  "version": "10.9.1",
   "publishConfig": {
     "access": "public"
   },
@@ -28,20 +28,20 @@
     "./styles.css": "./dist/css/vars.css"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-cell": "6.2.0",
-    "@khanacademy/wonder-blocks-clickable": "8.1.10",
-    "@khanacademy/wonder-blocks-core": "12.4.3",
-    "@khanacademy/wonder-blocks-announcer": "1.1.0",
-    "@khanacademy/wonder-blocks-form": "7.6.0",
-    "@khanacademy/wonder-blocks-icon": "5.3.14",
-    "@khanacademy/wonder-blocks-pill": "3.1.63",
-    "@khanacademy/wonder-blocks-modal": "8.7.0",
+    "@khanacademy/wonder-blocks-announcer": "1.1.1",
+    "@khanacademy/wonder-blocks-cell": "6.2.1",
+    "@khanacademy/wonder-blocks-clickable": "8.2.0",
+    "@khanacademy/wonder-blocks-core": "12.4.4",
+    "@khanacademy/wonder-blocks-form": "7.6.1",
+    "@khanacademy/wonder-blocks-icon": "5.3.15",
+    "@khanacademy/wonder-blocks-icon-button": "11.3.1",
+    "@khanacademy/wonder-blocks-modal": "8.7.1",
+    "@khanacademy/wonder-blocks-pill": "3.1.64",
+    "@khanacademy/wonder-blocks-search-field": "5.1.70",
     "@khanacademy/wonder-blocks-styles": "0.2.45",
     "@khanacademy/wonder-blocks-timing": "7.1.0",
-    "@khanacademy/wonder-blocks-search-field": "5.1.69",
     "@khanacademy/wonder-blocks-tokens": "16.5.0",
-    "@khanacademy/wonder-blocks-typography": "4.3.4",
-    "@khanacademy/wonder-blocks-icon-button": "11.3.0"
+    "@khanacademy/wonder-blocks-typography": "4.3.5"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",