@khanacademy/wonder-blocks-dropdown 10.0.4 → 10.0.5

package/dist/index.js

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var aphrodite = require('aphrodite');
 var wonderBlocksCell = require('@khanacademy/wonder-blocks-cell');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
-var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
@@ -49,9 +48,7 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var checkIcon__default = /*#__PURE__*/_interopDefaultLegacy(checkIcon);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var SearchField__default = /*#__PURE__*/_interopDefaultLegacy(SearchField);
@@ -61,3348 +58,59 @@ var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
 
-const selectDropdownStyle = {
-  marginTop: wonderBlocksTokens.spacing.xSmall_8,
-  marginBottom: wonderBlocksTokens.spacing.xSmall_8
-};
-const filterableDropdownStyle = {
-  minHeight: 100
-};
-const DROPDOWN_ITEM_HEIGHT = 40;
-const MAX_VISIBLE_ITEMS = 9;
-const SEPARATOR_ITEM_HEIGHT = 9;
-const defaultLabels = {
-  clearSearch: "Clear search",
-  filter: "Filter",
-  noResults: "No results",
-  selectNoneLabel: "Select none",
-  selectAllLabel: numOptions => `Select all (${numOptions})`,
-  noneSelected: "0 items",
-  someSelected: numSelectedValues => numSelectedValues === 1 ? "1 item" : `${numSelectedValues} items`,
-  allSelected: "All items"
-};
-const defaultComboboxLabels = {
-  clearSelection: "Clear selection",
-  closedState: "Combobox is closed",
-  comboboxButton: "Toggle listbox",
-  listbox: "Options list",
-  removeSelected: label => `Remove ${label}`,
-  liveRegionCurrentItem: ({
-    current,
-    index,
-    total,
-    disabled,
-    focused,
-    selected
-  }) => `${current}${focused ? " focused" : ""}${disabled ? " disabled" : ""}${selected ? " selected" : ""}, ${index + 1} of ${total}.`,
-  liveRegionMultipleSelectionTotal: total => `${total} selected options.`,
-  liveRegionListboxTotal: total => `${total} results available.`,
-  noItems: "No results",
-  selected: labels => `${labels} selected`,
-  selectionCleared: "Selection cleared",
-  unselected: labels => `${labels} not selected`
-};
+const selectDropdownStyle={marginTop:wonderBlocksTokens.spacing.xSmall_8,marginBottom:wonderBlocksTokens.spacing.xSmall_8};const filterableDropdownStyle={minHeight:100};const DROPDOWN_ITEM_HEIGHT=40;const MAX_VISIBLE_ITEMS=9;const SEPARATOR_ITEM_HEIGHT=9;const defaultLabels={clearSearch:"Clear search",filter:"Filter",noResults:"No results",selectNoneLabel:"Select none",selectAllLabel:numOptions=>`Select all (${numOptions})`,noneSelected:"0 items",someSelected:numSelectedValues=>numSelectedValues===1?"1 item":`${numSelectedValues} items`,allSelected:"All items"};const defaultComboboxLabels={clearSelection:"Clear selection",closedState:"Combobox is closed",comboboxButton:"Toggle listbox",listbox:"Options list",removeSelected:label=>`Remove ${label}`,liveRegionCurrentItem:({current,index,total,disabled,focused,selected})=>`${current}${focused?" focused":""}${disabled?" disabled":""}${selected?" selected":""}, ${index+1} of ${total}.`,liveRegionMultipleSelectionTotal:total=>`${total} selected options.`,liveRegionListboxTotal:total=>`${total} results available.`,noItems:"No results",selected:labels=>`${labels} selected`,selectionCleared:"Selection cleared",unselected:labels=>`${labels} not selected`};
 
-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,
-      testId
-    } = this.props;
-    const defaultStyle = [styles$b.wrapper, style];
-    const labelComponent = typeof label === "string" ? React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-      lang: lang,
-      style: styles$b.label
-    }, label) : (React__namespace.cloneElement(label, _extends__default["default"]({
-      lang,
-      style: styles$b.label
-    }, label.props)));
-    return React__namespace.createElement(wonderBlocksCell.CompactCell, {
-      disabled: disabled,
-      horizontalRule: horizontalRule,
-      rootStyle: defaultStyle,
-      leftAccessory: leftAccessory,
-      rightAccessory: rightAccessory,
-      style: [styles$b.shared, indent && styles$b.indent],
-      role: role,
-      testId: testId,
-      title: labelComponent,
-      href: href,
-      target: target,
-      onClick: onClick
-    });
-  }
-}
-ActionItem.defaultProps = {
-  disabled: false,
-  horizontalRule: "none",
-  indent: false,
-  role: "menuitem"
-};
-ActionItem.__IS_ACTION_ITEM__ = true;
-const actionType$1 = wonderBlocksTokens.semanticColor.action.primary.progressive;
-const theme$7 = {
-  actionItem: {
-    color: {
-      hover: {
-        background: actionType$1.hover.background,
-        foreground: actionType$1.hover.foreground
-      },
-      press: {
-        background: actionType$1.press.background,
-        foreground: actionType$1.press.foreground
-      }
-    }
-  }
-};
-const styles$b = aphrodite.StyleSheet.create({
-  wrapper: {
-    minHeight: DROPDOWN_ITEM_HEIGHT,
-    touchAction: "manipulation",
-    ":focus": {
-      borderRadius: wonderBlocksTokens.border.radius.radius_040,
-      outline: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
-      outlineOffset: -wonderBlocksTokens.spacing.xxxxSmall_2
-    },
-    [":hover[aria-disabled=false]"]: {
-      color: theme$7.actionItem.color.hover.foreground,
-      background: theme$7.actionItem.color.hover.background
-    },
-    [":active[aria-disabled=false]"]: {
-      color: theme$7.actionItem.color.press.foreground,
-      background: theme$7.actionItem.color.press.background
-    }
-  },
-  shared: {
-    minHeight: DROPDOWN_ITEM_HEIGHT,
-    paddingBlock: wonderBlocksTokens.sizing.size_100
-  },
-  label: {
-    whiteSpace: "nowrap",
-    userSelect: "none"
-  },
-  indent: {
-    paddingLeft: wonderBlocksTokens.spacing.medium_16 * 2
-  }
-});
+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,testId}=this.props;const defaultStyle=[styles$b.wrapper,style];const labelComponent=typeof label==="string"?jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{lang:lang,style:styles$b.label,children:label}):React__namespace.cloneElement(label,{lang,style:styles$b.label,...label.props});return jsxRuntime.jsx(wonderBlocksCell.CompactCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:defaultStyle,leftAccessory:leftAccessory,rightAccessory:rightAccessory,style:[styles$b.shared,indent&&styles$b.indent],role:role,testId:testId,title:labelComponent,href:href,target:target,onClick:onClick})}}ActionItem.defaultProps={disabled:false,horizontalRule:"none",indent:false,role:"menuitem"};ActionItem.__IS_ACTION_ITEM__=true;const actionType$1=wonderBlocksTokens.semanticColor.action.primary.progressive;const theme$7={actionItem:{color:{hover:{background:actionType$1.hover.background,foreground:actionType$1.hover.foreground},press:{background:actionType$1.press.background,foreground:actionType$1.press.foreground}}}};const styles$b=aphrodite.StyleSheet.create({wrapper:{minHeight:DROPDOWN_ITEM_HEIGHT,touchAction:"manipulation",":focus":{borderRadius:wonderBlocksTokens.border.radius.radius_040,outline:`${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-wonderBlocksTokens.spacing.xxxxSmall_2},[":hover[aria-disabled=false]"]:{color:theme$7.actionItem.color.hover.foreground,background:theme$7.actionItem.color.hover.background},[":active[aria-disabled=false]"]:{color:theme$7.actionItem.color.press.foreground,background:theme$7.actionItem.color.press.background}},shared:{minHeight:DROPDOWN_ITEM_HEIGHT,paddingBlock:wonderBlocksTokens.sizing.size_100},label:{whiteSpace:"nowrap",userSelect:"none"},indent:{paddingLeft:wonderBlocksTokens.spacing.medium_16*2}});
 
-const Check = function Check(props) {
-  const {
-    selected
-  } = props;
-  return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-    icon: checkIcon__default["default"],
-    size: "small",
-    style: [styles$a.bounds, !selected && styles$a.hide]
-  });
-};
-const styles$a = aphrodite.StyleSheet.create({
-  bounds: {
-    alignSelf: "center",
-    height: wonderBlocksTokens.spacing.medium_16,
-    minHeight: wonderBlocksTokens.spacing.medium_16,
-    minWidth: wonderBlocksTokens.spacing.medium_16
-  },
-  hide: {
-    visibility: "hidden"
-  }
-});
+const Check=function(props){const{selected}=props;return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:checkIcon__default["default"],size:"small",style:[styles$a.bounds,!selected&&styles$a.hide]})};const styles$a=aphrodite.StyleSheet.create({bounds:{alignSelf:"center",height:wonderBlocksTokens.spacing.medium_16,minHeight:wonderBlocksTokens.spacing.medium_16,minWidth:wonderBlocksTokens.spacing.medium_16},hide:{visibility:"hidden"}});
 
-const Checkbox = function Checkbox(props) {
-  const {
-    disabled,
-    selected
-  } = props;
-  return React__namespace.createElement(wonderBlocksCore.View, {
-    className: "checkbox",
-    style: [styles$9.checkbox, selected && !disabled && styles$9.noBorder, disabled && styles$9.disabledCheckbox]
-  }, selected && React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-    icon: checkIcon__default["default"],
-    size: "small",
-    className: "check",
-    style: [{
-      width: wonderBlocksTokens.spacing.small_12,
-      height: wonderBlocksTokens.spacing.small_12,
-      margin: wonderBlocksTokens.spacing.xxxxSmall_2
-    }, disabled && selected && styles$9.disabledCheckFormatting]
-  }));
-};
-const theme$6 = {
-  checkbox: {
-    color: {
-      default: {
-        border: wonderBlocksTokens.semanticColor.border.strong
-      },
-      disabled: {
-        border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
-        background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background
-      }
-    }
-  }
-};
-const styles$9 = aphrodite.StyleSheet.create({
-  checkbox: {
-    alignSelf: "center",
-    minHeight: wonderBlocksTokens.spacing.medium_16,
-    minWidth: wonderBlocksTokens.spacing.medium_16,
-    height: wonderBlocksTokens.spacing.medium_16,
-    borderRadius: 3,
-    borderWidth: wonderBlocksTokens.border.width.thin,
-    borderStyle: "solid",
-    borderColor: theme$6.checkbox.color.default.border
-  },
-  noBorder: {
-    borderWidth: 0
-  },
-  disabledCheckbox: {
-    borderColor: theme$6.checkbox.color.disabled.border,
-    backgroundColor: theme$6.checkbox.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$9.checkbox,selected&&!disabled&&styles$9.noBorder,disabled&&styles$9.disabledCheckbox],children:selected&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:checkIcon__default["default"],size:"small",className:"check",style:[{width:wonderBlocksTokens.spacing.small_12,height:wonderBlocksTokens.spacing.small_12,margin:wonderBlocksTokens.spacing.xxxxSmall_2},disabled&&selected&&styles$9.disabledCheckFormatting]})})};const theme$6={checkbox:{color:{default:{border:wonderBlocksTokens.semanticColor.border.strong},disabled:{border:wonderBlocksTokens.semanticColor.action.secondary.disabled.border,background:wonderBlocksTokens.semanticColor.action.secondary.disabled.background}}}};const styles$9=aphrodite.StyleSheet.create({checkbox:{alignSelf:"center",minHeight:wonderBlocksTokens.spacing.medium_16,minWidth:wonderBlocksTokens.spacing.medium_16,height:wonderBlocksTokens.spacing.medium_16,borderRadius:3,borderWidth:wonderBlocksTokens.border.width.thin,borderStyle:"solid",borderColor:theme$6.checkbox.color.default.border},noBorder:{borderWidth:0},disabledCheckbox:{borderColor:theme$6.checkbox.color.disabled.border,backgroundColor:theme$6.checkbox.color.disabled.background},disabledCheckFormatting:{position:"absolute",top:-1,left:-1}});
 
-const _excluded$5 = ["disabled", "label", "selected", "testId", "leftAccessory", "horizontalRule", "parentComponent", "rightAccessory", "style", "subtitle1", "subtitle2", "value", "onClick", "onToggle", "variant", "role"];
-const StyledLi = wonderBlocksCore.addStyle("li");
-class OptionItem extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.handleClick = () => {
-      const {
-        onClick,
-        onToggle,
-        value
-      } = this.props;
-      onToggle(value);
-      if (onClick) {
-        onClick();
-      }
-    };
-  }
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_OPTION_ITEM__;
-  }
-  getCheckComponent() {
-    if (this.props.variant === "check") {
-      return Check;
-    } else {
-      return Checkbox;
-    }
-  }
-  renderCell() {
-    const _this$props = this.props,
-      {
-        disabled,
-        label,
-        selected,
-        testId,
-        leftAccessory,
-        horizontalRule,
-        parentComponent,
-        rightAccessory,
-        style,
-        subtitle1,
-        subtitle2,
-        role
-      } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$5);
-    const CheckComponent = this.getCheckComponent();
-    const defaultStyle = [styles$8.item, style];
-    return React__namespace.createElement(wonderBlocksCell.DetailCell, _extends__default["default"]({
-      disabled: disabled,
-      horizontalRule: horizontalRule,
-      rootStyle: parentComponent === "listbox" ? styles$8.listboxItem : defaultStyle,
-      style: styles$8.itemContainer,
-      "aria-selected": parentComponent !== "listbox" && selected ? "true" : "false",
-      role: parentComponent !== "listbox" ? role : undefined,
-      testId: testId,
-      leftAccessory: React__namespace.createElement(React__namespace.Fragment, null, leftAccessory ? React__namespace.createElement(wonderBlocksCore.View, {
-        style: {
-          flexDirection: "row"
-        }
-      }, React__namespace.createElement(CheckComponent, {
-        disabled: disabled,
-        selected: selected
-      }), React__namespace.createElement(wonderBlocksLayout.Strut, {
-        size: wonderBlocksTokens.spacing.xSmall_8
-      }), leftAccessory) : React__namespace.createElement(CheckComponent, {
-        disabled: disabled,
-        selected: selected
-      })),
-      rightAccessory: rightAccessory,
-      subtitle1: subtitle1 ? React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-        className: "subtitle"
-      }, subtitle1) : undefined,
-      title: React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-        style: styles$8.label
-      }, label),
-      subtitle2: subtitle2 ? React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-        className: "subtitle"
-      }, subtitle2) : undefined,
-      onClick: parentComponent !== "listbox" ? this.handleClick : undefined
-    }, sharedProps));
-  }
-  render() {
-    const {
-      disabled,
-      focused,
-      parentComponent,
-      role,
-      selected
-    } = this.props;
-    if (parentComponent === "listbox") {
-      return (React__namespace.createElement(StyledLi, {
-          onMouseDown: e => {
-            e.preventDefault();
-          },
-          onClick: this.handleClick,
-          style: [styles$8.reset, styles$8.item, focused && styles$8.itemFocused, disabled && styles$8.itemDisabled],
-          role: role,
-          "aria-selected": selected ? "true" : "false",
-          "aria-disabled": disabled ? "true" : "false",
-          id: this.props.id,
-          tabIndex: -1
-        }, this.renderCell())
-      );
-    }
-    return this.renderCell();
-  }
-}
-OptionItem.defaultProps = {
-  disabled: false,
-  focused: false,
-  horizontalRule: "none",
-  onToggle: () => void 0,
-  role: "option",
-  selected: false
-};
-OptionItem.__IS_OPTION_ITEM__ = true;
-const focusedStyle = {
-  borderRadius: wonderBlocksTokens.border.radius.radius_040,
-  outline: `${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
-  outlineOffset: -wonderBlocksTokens.spacing.xxxxSmall_2
-};
-const actionType = wonderBlocksTokens.semanticColor.action.primary.progressive;
-const theme$5 = {
-  optionItem: {
-    color: {
-      default: {
-        background: wonderBlocksTokens.semanticColor.surface.primary,
-        foreground: wonderBlocksTokens.semanticColor.text.primary
-      },
-      hover: {
-        background: actionType.hover.background,
-        foreground: actionType.hover.foreground
-      },
-      press: {
-        background: actionType.press.background,
-        foreground: actionType.press.foreground
-      },
-      disabled: {
-        background: "transparent",
-        foreground: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground
-      }
-    }
-  },
-  checkbox: {
-    color: {
-      hover: {
-        background: wonderBlocksTokens.semanticColor.surface.primary,
-        foreground: wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground
-      },
-      press: {
-        background: wonderBlocksTokens.semanticColor.surface.primary,
-        foreground: wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground
-      },
-      selected: {
-        background: actionType.default.background,
-        foreground: actionType.default.foreground
-      }
-    }
-  },
-  subtitle: {
-    color: {
-      default: {
-        foreground: wonderBlocksTokens.semanticColor.text.secondary
-      },
-      hover: {
-        foreground: wonderBlocksTokens.semanticColor.text.inverse
-      },
-      press: {
-        foreground: wonderBlocksTokens.semanticColor.text.inverse
-      }
-    }
-  }
-};
-const styles$8 = aphrodite.StyleSheet.create({
-  reset: {
-    margin: 0,
-    padding: 0,
-    border: 0,
-    background: "none",
-    outline: "none",
-    fontSize: "100%",
-    verticalAlign: "baseline",
-    textAlign: "left",
-    textDecoration: "none",
-    listStyle: "none",
-    cursor: "pointer"
-  },
-  listboxItem: {
-    backgroundColor: "transparent",
-    color: "inherit"
-  },
-  item: {
-    background: theme$5.optionItem.color.default.background,
-    color: theme$5.optionItem.color.default.foreground,
-    minHeight: "unset",
-    ":focus": focusedStyle,
-    ":focus-visible": {
-      overflow: "visible"
-    },
-    [":hover[aria-disabled=false]"]: {
-      color: theme$5.optionItem.color.hover.foreground,
-      background: theme$5.optionItem.color.hover.background
-    },
-    [":active[aria-selected=false]"]: {},
-    [":hover[aria-disabled=true]"]: {
-      cursor: "not-allowed"
-    },
-    [":is([aria-disabled=true])"]: {
-      color: theme$5.optionItem.color.disabled.foreground,
-      ":focus-visible": {
-        outline: "none"
-      }
-    },
-    [":active[aria-disabled=false]"]: {
-      color: theme$5.optionItem.color.press.foreground,
-      background: theme$5.optionItem.color.press.background
-    },
-    [":hover[aria-disabled=false] .checkbox"]: {
-      background: theme$5.checkbox.color.hover.background
-    },
-    [":active[aria-disabled=false] .checkbox"]: {
-      background: theme$5.checkbox.color.press.background
-    },
-    [":hover[aria-disabled=false] .check"]: {
-      color: theme$5.checkbox.color.hover.foreground
-    },
-    [":active[aria-disabled=false] .check"]: {
-      color: theme$5.checkbox.color.press.foreground
-    },
-    [":is([aria-selected=true]) .checkbox"]: {
-      background: theme$5.checkbox.color.selected.background
-    },
-    [":is([aria-selected=true]) .check"]: {
-      color: theme$5.checkbox.color.selected.foreground
-    },
-    [":is([aria-disabled=false]) .subtitle"]: {
-      color: theme$5.subtitle.color.default.foreground
-    },
-    [":hover[aria-disabled=false] .subtitle"]: {
-      color: theme$5.subtitle.color.hover.foreground
-    },
-    [":active[aria-disabled=false] .subtitle"]: {
-      color: theme$5.subtitle.color.press.foreground
-    }
-  },
-  itemFocused: focusedStyle,
-  itemDisabled: {
-    outlineColor: wonderBlocksTokens.semanticColor.focus.outer
-  },
-  itemContainer: {
-    minHeight: "unset",
-    paddingBlock: wonderBlocksTokens.spacing.xSmall_8 + wonderBlocksTokens.spacing.xxxxSmall_2,
-    paddingInlineStart: wonderBlocksTokens.spacing.xSmall_8,
-    paddingInlineEnd: wonderBlocksTokens.spacing.medium_16,
-    whiteSpace: "nowrap"
-  },
-  label: {
-    whiteSpace: "nowrap",
-    userSelect: "none",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  },
-  hide: {
-    visibility: "hidden"
-  }
-});
+const StyledLi=wonderBlocksCore.addStyle("li");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}}renderCell(){const{disabled,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$8.item,style];return jsxRuntime.jsx(wonderBlocksCell.DetailCell,{disabled:disabled,horizontalRule:horizontalRule,rootStyle:parentComponent==="listbox"?styles$8.listboxItem:defaultStyle,style:styles$8.itemContainer,"aria-selected":parentComponent!=="listbox"&&selected?"true":"false",role:parentComponent!=="listbox"?role:undefined,testId:testId,leftAccessory:jsxRuntime.jsx(jsxRuntime.Fragment,{children:leftAccessory?jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row"},children:[jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),leftAccessory]}):jsxRuntime.jsx(CheckComponent,{disabled:disabled,selected:selected})}),rightAccessory:rightAccessory,subtitle1:subtitle1?jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{className:"subtitle",children:subtitle1}):undefined,title:jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:styles$8.label,children:label}),subtitle2:subtitle2?jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{className:"subtitle",children:subtitle2}):undefined,onClick:parentComponent!=="listbox"?this.handleClick:undefined,...sharedProps})}render(){const{disabled,focused,parentComponent,role,selected}=this.props;if(parentComponent==="listbox"){return jsxRuntime.jsx(StyledLi,{onMouseDown:e=>{e.preventDefault();},onClick:this.handleClick,style:[styles$8.reset,styles$8.item,focused&&styles$8.itemFocused,disabled&&styles$8.itemDisabled],role:role,"aria-selected":selected?"true":"false","aria-disabled":disabled?"true":"false",id:this.props.id,tabIndex:-1,children:this.renderCell()})}return this.renderCell()}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:wonderBlocksTokens.border.radius.radius_040,outline:`${wonderBlocksTokens.spacing.xxxxSmall_2}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-wonderBlocksTokens.spacing.xxxxSmall_2};const actionType=wonderBlocksTokens.semanticColor.action.primary.progressive;const theme$5={optionItem:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.text.primary},hover:{background:actionType.hover.background,foreground:actionType.hover.foreground},press:{background:actionType.press.background,foreground:actionType.press.foreground},disabled:{background:"transparent",foreground:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground}}},checkbox:{color:{hover:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground},press:{background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground},selected:{background:actionType.default.background,foreground:actionType.default.foreground}}},subtitle:{color:{default:{foreground:wonderBlocksTokens.semanticColor.text.secondary},hover:{foreground:wonderBlocksTokens.semanticColor.text.inverse},press:{foreground:wonderBlocksTokens.semanticColor.text.inverse}}}};const styles$8=aphrodite.StyleSheet.create({reset:{margin:0,padding:0,border:0,background:"none",outline:"none",fontSize:"100%",verticalAlign:"baseline",textAlign:"left",textDecoration:"none",listStyle:"none",cursor:"pointer"},listboxItem:{backgroundColor:"transparent",color:"inherit"},item:{background:theme$5.optionItem.color.default.background,color:theme$5.optionItem.color.default.foreground,minHeight:"unset",":focus":focusedStyle,":focus-visible":{overflow:"visible"},[":hover[aria-disabled=false]"]:{color:theme$5.optionItem.color.hover.foreground,background:theme$5.optionItem.color.hover.background},[":active[aria-selected=false]"]:{},[":hover[aria-disabled=true]"]:{cursor:"not-allowed"},[":is([aria-disabled=true])"]:{color:theme$5.optionItem.color.disabled.foreground,":focus-visible":{outline:"none"}},[":active[aria-disabled=false]"]:{color:theme$5.optionItem.color.press.foreground,background:theme$5.optionItem.color.press.background},[":hover[aria-disabled=false] .checkbox"]:{background:theme$5.checkbox.color.hover.background},[":active[aria-disabled=false] .checkbox"]:{background:theme$5.checkbox.color.press.background},[":hover[aria-disabled=false] .check"]:{color:theme$5.checkbox.color.hover.foreground},[":active[aria-disabled=false] .check"]:{color:theme$5.checkbox.color.press.foreground},[":is([aria-selected=true]) .checkbox"]:{background:theme$5.checkbox.color.selected.background},[":is([aria-selected=true]) .check"]:{color:theme$5.checkbox.color.selected.foreground},[":is([aria-disabled=false]) .subtitle"]:{color:theme$5.subtitle.color.default.foreground},[":hover[aria-disabled=false] .subtitle"]:{color:theme$5.subtitle.color.hover.foreground},[":active[aria-disabled=false] .subtitle"]:{color:theme$5.subtitle.color.press.foreground}},itemFocused:focusedStyle,itemDisabled:{outlineColor:wonderBlocksTokens.semanticColor.focus.outer},itemContainer:{minHeight:"unset",paddingBlock:wonderBlocksTokens.spacing.xSmall_8+wonderBlocksTokens.spacing.xxxxSmall_2,paddingInlineStart:wonderBlocksTokens.spacing.xSmall_8,paddingInlineEnd:wonderBlocksTokens.spacing.medium_16,whiteSpace:"nowrap"},label:{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 (React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$7.separator, this.props.style],
-        "aria-hidden": "true"
-      })
-    );
-  }
-}
-SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
-const theme$4 = {
-  separator: {
-    color: {
-      border: wonderBlocksTokens.semanticColor.border.primary
-    }
-  }
-};
-const styles$7 = aphrodite.StyleSheet.create({
-  separator: {
-    borderTop: `1px solid ${theme$4.separator.color.border}`,
-    height: 1,
-    minHeight: 1,
-    marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
-    marginBottom: wonderBlocksTokens.spacing.xxxSmall_4
-  }
-});
+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$7.separator,this.props.style],"aria-hidden":"true"})}}SeparatorItem.__IS_SEPARATOR_ITEM__=true;const theme$4={separator:{color:{border:wonderBlocksTokens.semanticColor.border.primary}}};const styles$7=aphrodite.StyleSheet.create({separator:{borderTop:`1px solid ${theme$4.separator.color.border}`,height:1,minHeight:1,marginTop:wonderBlocksTokens.spacing.xxxSmall_4,marginBottom:wonderBlocksTokens.spacing.xxxSmall_4}});
 
-class DropdownOpener extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.getTestIdFromProps = childrenProps => {
-      return childrenProps.testId || childrenProps["data-testid"];
-    };
-  }
-  renderAnchorChildren(eventState, clickableChildrenProps) {
-    var _childrenProps$ariaL;
-    const {
-      disabled,
-      testId,
-      text,
-      opened,
-      "aria-controls": ariaControls,
-      "aria-haspopup": ariaHasPopUp,
-      "aria-required": ariaRequired,
-      id,
-      role,
-      onBlur
-    } = this.props;
-    const renderedChildren = this.props.children(_extends__default["default"]({}, eventState, {
-      text,
-      opened
-    }));
-    const childrenProps = renderedChildren.props;
-    const childrenTestId = this.getTestIdFromProps(childrenProps);
-    const renderedAriaLabel = (_childrenProps$ariaL = childrenProps["aria-label"]) != null ? _childrenProps$ariaL : this.props["aria-label"];
-    return React__namespace.cloneElement(renderedChildren, _extends__default["default"]({}, clickableChildrenProps, {
-      "aria-label": renderedAriaLabel != null ? renderedAriaLabel : undefined,
-      "aria-invalid": this.props.error,
-      disabled,
-      "aria-controls": ariaControls,
-      role,
-      id,
-      "aria-expanded": opened ? "true" : "false",
-      "aria-haspopup": ariaHasPopUp,
-      "aria-required": ariaRequired,
-      onClick: childrenProps.onClick ? e => {
-        childrenProps.onClick(e);
-        clickableChildrenProps.onClick(e);
-      } : clickableChildrenProps.onClick,
-      "data-testid": childrenTestId || testId,
-      onBlur
-    }));
-  }
-  render() {
-    return React__namespace.createElement(wonderBlocksClickable.ClickableBehavior, {
-      onClick: this.props.onClick,
-      disabled: this.props.disabled,
-      tabIndex: 0
-    }, (eventState, handlers) => this.renderAnchorChildren(eventState, handlers));
-  }
-}
-DropdownOpener.defaultProps = {
-  disabled: false
-};
+class DropdownOpener extends React__namespace.Component{renderAnchorChildren(eventState,clickableChildrenProps){const{disabled,testId,text,opened,"aria-controls":ariaControls,"aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,id,role,onBlur}=this.props;const renderedChildren=this.props.children({...eventState,text,opened});const childrenProps=renderedChildren.props;const childrenTestId=this.getTestIdFromProps(childrenProps);const renderedAriaLabel=childrenProps["aria-label"]??this.props["aria-label"];return React__namespace.cloneElement(renderedChildren,{...clickableChildrenProps,"aria-label":renderedAriaLabel??undefined,"aria-invalid":this.props.error,disabled,"aria-controls":ariaControls,role,id,"aria-expanded":opened?"true":"false","aria-haspopup":ariaHasPopUp,"aria-required":ariaRequired,onClick:childrenProps.onClick?e=>{childrenProps.onClick(e);clickableChildrenProps.onClick(e);}:clickableChildrenProps.onClick,"data-testid":childrenTestId||testId,onBlur})}render(){return jsxRuntime.jsx(wonderBlocksClickable.ClickableBehavior,{onClick:this.props.onClick,disabled:this.props.disabled,tabIndex:0,children:(eventState,handlers)=>this.renderAnchorChildren(eventState,handlers)})}constructor(...args){super(...args),this.getTestIdFromProps=childrenProps=>{return childrenProps.testId||childrenProps["data-testid"]};}}DropdownOpener.defaultProps={disabled:false};
 
-class DropdownVirtualizedItem extends React__namespace.Component {
-  render() {
-    const {
-      data,
-      index,
-      style
-    } = this.props;
-    const item = data[index];
-    if (SeparatorItem.isClassOf(item.component)) {
-      return React__namespace.cloneElement(item.component, {
-        style
-      });
-    } else {
-      const {
-        component,
-        populatedProps,
-        onClick,
-        role,
-        ref
-      } = item;
-      return React__namespace.cloneElement(component, _extends__default["default"]({
-        style
-      }, populatedProps, {
-        key: index,
-        onClick,
-        ref: item.focusable && ref,
-        role
-      }));
-    }
-  }
-}
+class DropdownVirtualizedItem extends React__namespace.Component{render(){const{data,index,style}=this.props;const item=data[index];if(SeparatorItem.isClassOf(item.component)){return React__namespace.cloneElement(item.component,{style})}else {const{component,populatedProps,onClick,role,ref}=item;return React__namespace.cloneElement(component,{style,...populatedProps,key:index,onClick,ref:item.focusable&&ref,role})}}}
 
-function getDropdownMenuHeight(items, initialHeight = 0) {
-  return items.slice(0, MAX_VISIBLE_ITEMS).reduce((sum, item) => {
-    if (SeparatorItem.isClassOf(item.component)) {
-      return sum + SEPARATOR_ITEM_HEIGHT;
-    } else {
-      return sum + DROPDOWN_ITEM_HEIGHT;
-    }
-  }, initialHeight);
-}
+function getDropdownMenuHeight(items,initialHeight=0){return items.slice(0,MAX_VISIBLE_ITEMS).reduce((sum,item)=>{if(SeparatorItem.isClassOf(item.component)){return sum+SEPARATOR_ITEM_HEIGHT}else {return sum+DROPDOWN_ITEM_HEIGHT}},initialHeight)}
 
-class DropdownCoreVirtualized extends React__namespace.Component {
-  constructor(props) {
-    super(props);
-    this.getItemSize = index => {
-      const item = this.props.data[index];
-      if (SeparatorItem.isClassOf(item.component)) {
-        return SEPARATOR_ITEM_HEIGHT;
-      } else {
-        return DROPDOWN_ITEM_HEIGHT;
-      }
-    };
-    this.state = {
-      height: getDropdownMenuHeight(props.data),
-      width: props.width
-    };
-  }
-  componentDidMount() {
-    const {
-      schedule
-    } = this.props;
-    schedule.animationFrame(() => {
-      this.setWidth();
-    });
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      data,
-      listRef
-    } = this.props;
-    if (prevProps.data.length !== data.length) {
-      this.setHeight();
-      if (listRef && listRef.current) {
-        listRef.current.resetAfterIndex(1);
-      }
-    }
-  }
-  setWidth() {
-    const rootNode = ReactDOM__namespace.findDOMNode(this);
-    const parentNode = rootNode == null ? void 0 : rootNode.parentElement;
-    if (parentNode) {
-      const width = parentNode.getBoundingClientRect().width;
-      this.setState({
-        width
-      });
-    }
-  }
-  setHeight() {
-    const height = getDropdownMenuHeight(this.props.data);
-    this.setState({
-      height
-    });
-  }
-  renderInitialItems() {
-    const {
-      data
-    } = this.props;
-    const allComponents = data.map(e => e.component);
-    const longestItems = React__namespace.Children.toArray(allComponents).filter(Boolean).sort((a, b) => {
-      if (b.props.label && a.props.label) {
-        return b.props.label.length - a.props.label.length;
-      }
-      return -1;
-    }).slice(0, MAX_VISIBLE_ITEMS);
-    return longestItems.map(item => React__namespace.cloneElement(item, {
-      style: {
-        visibility: "hidden"
-      }
-    }));
-  }
-  renderVirtualizedList(width, height) {
-    const {
-      data,
-      listRef
-    } = this.props;
-    return React__namespace.createElement(reactWindow.VariableSizeList, {
-      height: height,
-      itemCount: data.length,
-      itemSize: this.getItemSize,
-      itemData: data,
-      style: {
-        overflowX: "hidden"
-      },
-      width: width,
-      overscanCount: 5,
-      ref: listRef
-    }, DropdownVirtualizedItem);
-  }
-  render() {
-    const {
-      width,
-      height
-    } = this.state;
-    if (width == null) {
-      return this.renderInitialItems();
-    } else {
-      return this.renderVirtualizedList(width, height);
-    }
-  }
-}
-var DropdownCoreVirtualized$1 = wonderBlocksTiming.withActionScheduler(DropdownCoreVirtualized);
+class DropdownCoreVirtualized extends React__namespace.Component{componentDidMount(){const{schedule}=this.props;schedule.animationFrame(()=>{this.setWidth();});}componentDidUpdate(prevProps){const{data,listRef}=this.props;if(prevProps.data.length!==data.length){this.setHeight();if(listRef&&listRef.current){listRef.current.resetAfterIndex(1);}}}setWidth(){const rootNode=ReactDOM__namespace.findDOMNode(this);const parentNode=rootNode?.parentElement;if(parentNode){const width=parentNode.getBoundingClientRect().width;this.setState({width});}}setHeight(){const height=getDropdownMenuHeight(this.props.data);this.setState({height});}renderInitialItems(){const{data}=this.props;const allComponents=data.map(e=>e.component);const longestItems=React__namespace.Children.toArray(allComponents).filter(Boolean).sort((a,b)=>{if(b.props.label&&a.props.label){return b.props.label.length-a.props.label.length}return -1}).slice(0,MAX_VISIBLE_ITEMS);return longestItems.map(item=>React__namespace.cloneElement(item,{style:{visibility:"hidden"}}))}renderVirtualizedList(width,height){const{data,listRef}=this.props;return jsxRuntime.jsx(reactWindow.VariableSizeList,{height:height,itemCount:data.length,itemSize:this.getItemSize,itemData:data,style:{overflowX:"hidden"},width:width,overscanCount:5,ref:listRef,children:DropdownVirtualizedItem})}render(){const{width,height}=this.state;if(width==null){return this.renderInitialItems()}else {return this.renderVirtualizedList(width,height)}}constructor(props){super(props),this.getItemSize=index=>{const item=this.props.data[index];if(SeparatorItem.isClassOf(item.component)){return SEPARATOR_ITEM_HEIGHT}else {return DROPDOWN_ITEM_HEIGHT}};this.state={height:getDropdownMenuHeight(props.data),width:props.width};}}var DropdownCoreVirtualized$1 = wonderBlocksTiming.withActionScheduler(DropdownCoreVirtualized);
 
-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 = _extends__default["default"]({}, 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
-};
+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 DropdownPopper({
-  children,
-  alignment = "left",
-  onPopperElement,
-  referenceElement
-}) {
-  const modalHost = wonderBlocksModal.maybeGetPortalMountedModalHostElement(referenceElement) || document.querySelector("body");
-  if (!modalHost) {
-    return null;
-  }
-  return ReactDOM__namespace.createPortal(React__namespace.createElement(reactPopper.Popper, {
-    innerRef: node => {
-      if (node && onPopperElement) {
-        onPopperElement(node);
-      }
-    },
-    referenceElement: referenceElement,
-    strategy: "fixed",
-    placement: alignment === "left" ? "bottom-start" : "bottom-end",
-    modifiers: modifiers
-  }, ({
-    placement,
-    ref,
-    style,
-    hasPopperEscaped,
-    isReferenceHidden
-  }) => {
-    const shouldHidePopper = !!(hasPopperEscaped || isReferenceHidden);
-    return React__namespace.createElement("div", {
-      ref: ref,
-      style: style,
-      "data-testid": "dropdown-popper",
-      "data-placement": placement
-    }, 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}return ReactDOM__namespace.createPortal(jsxRuntime.jsx(reactPopper.Popper,{innerRef:node=>{if(node&&onPopperElement){onPopperElement(node);}},referenceElement:referenceElement,strategy:"fixed",placement:alignment==="left"?"bottom-start":"bottom-end",modifiers:modifiers,children:({placement,ref,style,hasPopperEscaped,isReferenceHidden})=>{const shouldHidePopper=!!(hasPopperEscaped||isReferenceHidden);return jsxRuntime.jsx("div",{ref:ref,style:style,"data-testid":"dropdown-popper","data-placement":placement,children:children(shouldHidePopper)})}}),modalHost)};
 
-function getStringForKey(key) {
-  if (key.length === 1 || !/^[A-Z]/i.test(key)) {
-    return key;
-  }
-  return "";
-}
-function debounce(callback, wait) {
-  let timeout;
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      callback(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-function isString(x) {
-  return typeof x === "string";
-}
-function getLabel(props) {
-  if (isString(props.label)) {
-    return props.label;
-  }
-  if (isString(props.labelAsText)) {
-    return props.labelAsText;
-  }
-  return "";
-}
-function getSelectOpenerLabel(showOpenerLabelAsText, props) {
-  if (showOpenerLabelAsText) {
-    return getLabel(props);
-  }
-  return props.label;
-}
+function getStringForKey(key){if(key.length===1||!/^[A-Z]/i.test(key)){return key}return ""}function debounce(callback,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);callback(...args);};clearTimeout(timeout);timeout=setTimeout(later,wait);}}function isString(x){return typeof x==="string"}function getLabel(props){if(isString(props.label)){return props.label}if(isString(props.labelAsText)){return props.labelAsText}return ""}function getSelectOpenerLabel(showOpenerLabelAsText,props){if(showOpenerLabelAsText){return getLabel(props)}return props.label}
 
-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
-      };
-    }
-  }
-  constructor(props) {
-    super(props);
-    this.popperElement = void 0;
-    this.virtualizedListRef = void 0;
-    this.handleKeyDownDebounced = void 0;
-    this.textSuggestion = void 0;
-    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: _extends__default["default"]({
-        noResults: defaultLabels.noResults,
-        someResults: defaultLabels.someSelected
-      }, props.labels)
-    };
-    this.virtualizedListRef = React__namespace.createRef();
-    this.handleKeyDownDebounced = debounce(this.handleKeyDownDebounceResult, 500);
-    this.textSuggestion = "";
-  }
-  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: _extends__default["default"]({}, 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) {
-        node.focus();
-        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 React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-        style: styles$6.noResult,
-        testId: "dropdown-core-no-results"
-      }, 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, _extends__default["default"]({}, 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 _extends__default["default"]({}, 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 React__namespace.createElement(DropdownCoreVirtualized$1, {
-      data: virtualizedItems,
-      listRef: this.virtualizedListRef
-    });
-  }
-  renderSearchField() {
-    const {
-      searchText
-    } = this.props;
-    const {
-      labels
-    } = this.state;
-    return React__namespace.createElement(SearchField__default["default"], {
-      clearAriaLabel: labels.clearSearch,
-      onChange: this.handleSearchTextChanged,
-      placeholder: labels.filter,
-      ref: this.searchFieldRef,
-      style: styles$6.searchInputStyle,
-      value: searchText || ""
-    });
-  }
-  renderDropdownMenu(listRenderer, isReferenceHidden) {
-    const {
-      "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired,
-      dropdownStyle,
-      isFilterable,
-      openerElement,
-      role,
-      id
-    } = this.props;
-    const openerStyle = openerElement && window.getComputedStyle(openerElement);
-    const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      onMouseUp: this.handleDropdownMouseUp,
-      style: [styles$6.dropdown, isReferenceHidden && styles$6.hidden, dropdownStyle],
-      testId: "dropdown-core-container"
-    }, isFilterable && this.renderSearchField(), React__namespace.createElement(wonderBlocksCore.View, {
-      id: id,
-      role: role,
-      style: [styles$6.listboxOrMenu, {
-        minWidth: minDropdownWidth
-      }],
-      "aria-invalid": role === "listbox" ? ariaInvalid : undefined,
-      "aria-required": role === "listbox" ? ariaRequired : undefined
-    }, listRenderer), this.maybeRenderNoResults());
-  }
-  renderDropdown() {
-    const {
-      alignment,
-      openerElement
-    } = this.props;
-    const listRenderer = this.shouldVirtualizeList() ? this.renderVirtualizedList() : this.renderList();
-    return React__namespace.createElement(DropdownPopper, {
-      alignment: alignment,
-      onPopperElement: popperElement => {
-        this.popperElement = popperElement;
-      },
-      referenceElement: openerElement
-    }, isReferenceHidden => this.renderDropdownMenu(listRenderer, isReferenceHidden));
-  }
-  render() {
-    const {
-      open,
-      opener,
-      style,
-      className,
-      disabled
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      onKeyDown: !disabled ? this.handleKeyDown : undefined,
-      onKeyUp: !disabled ? this.handleKeyUp : undefined,
-      style: [styles$6.menuWrapper, style],
-      className: className
-    }, opener, open && this.renderDropdown());
-  }
-}
-DropdownCore.defaultProps = {
-  alignment: "left",
-  autoFocus: true,
-  enableTypeAhead: true,
-  labels: {
-    clearSearch: defaultLabels.clearSearch,
-    filter: defaultLabels.filter,
-    noResults: defaultLabels.noResults,
-    someResults: defaultLabels.someSelected
-  },
-  selectionType: "single"
-};
-const theme$3 = {
-  dropdown: {
-    color: {
-      default: {
-        background: wonderBlocksTokens.semanticColor.surface.primary,
-        border: wonderBlocksTokens.semanticColor.border.primary
-      }
-    }
-  },
-  noResults: {
-    color: {
-      foreground: wonderBlocksTokens.semanticColor.text.secondary
-    }
-  }
-};
-const styles$6 = aphrodite.StyleSheet.create({
-  menuWrapper: {
-    width: "fit-content"
-  },
-  dropdown: {
-    backgroundColor: theme$3.dropdown.color.default.background,
-    borderRadius: wonderBlocksTokens.border.radius.radius_040,
-    paddingTop: wonderBlocksTokens.spacing.xxxSmall_4,
-    paddingBottom: wonderBlocksTokens.spacing.xxxSmall_4,
-    border: `solid 1px ${theme$3.dropdown.color.default.border}`,
-    boxShadow: `0px 8px 8px 0px ${wonderBlocksTokens.color.offBlack8}`,
-    maxHeight: "var(--popper-max-height)"
-  },
-  listboxOrMenu: {
-    overflowY: "auto"
-  },
-  hidden: {
-    pointerEvents: "none",
-    visibility: "hidden"
-  },
-  noResult: {
-    color: theme$3.noResults.color.foreground,
-    alignSelf: "center",
-    marginTop: wonderBlocksTokens.spacing.xxSmall_6
-  },
-  searchInputStyle: {
-    margin: wonderBlocksTokens.spacing.xSmall_8,
-    marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
-    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){node.focus();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.LabelMedium,{style:styles$6.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$6.searchInputStyle,value:searchText||""})}renderDropdownMenu(listRenderer,isReferenceHidden){const{"aria-invalid":ariaInvalid,"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$6.dropdown,isReferenceHidden&&styles$6.hidden,dropdownStyle],testId:"dropdown-core-container",children:[isFilterable&&this.renderSearchField(),jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,style:[styles$6.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$6.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 theme$3={dropdown:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,border:wonderBlocksTokens.semanticColor.border.primary}}},noResults:{color:{foreground:wonderBlocksTokens.semanticColor.text.secondary}}};const styles$6=aphrodite.StyleSheet.create({menuWrapper:{width:"fit-content"},dropdown:{backgroundColor:theme$3.dropdown.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,paddingTop:wonderBlocksTokens.spacing.xxxSmall_4,paddingBottom:wonderBlocksTokens.spacing.xxxSmall_4,border:`solid 1px ${theme$3.dropdown.color.default.border}`,boxShadow:`0px 8px 8px 0px ${wonderBlocksTokens.color.offBlack8}`,maxHeight:"var(--popper-max-height)"},listboxOrMenu:{overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},noResult:{color:theme$3.noResults.color.foreground,alignSelf:"center",marginTop:wonderBlocksTokens.spacing.xxSmall_6},searchInputStyle:{margin:wonderBlocksTokens.spacing.xSmall_8,marginTop:wonderBlocksTokens.spacing.xxxSmall_4,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 _excluded$4 = ["children", "disabled", "focused", "hovered", "pressed", "waiting", "testId", "opened", "aria-label"];
-const StyledButton$1 = wonderBlocksCore.addStyle("button");
-class ActionMenuOpenerCore extends React__namespace.Component {
-  render() {
-    const _this$props = this.props,
-      {
-        children,
-        disabled: disabledProp,
-        focused,
-        hovered,
-        pressed,
-        testId,
-        opened,
-        "aria-label": ariaLabel
-      } = _this$props,
-      restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$4);
-    const disabled = disabledProp;
-    const defaultStyle = [sharedStyles.shared, sharedStyles.default, disabled && sharedStyles.disabled, !disabled && pressed && sharedStyles.press];
-    const label = React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
-      style: sharedStyles.text
-    }, children);
-    return React__namespace.createElement(StyledButton$1, _extends__default["default"]({
-      "aria-expanded": opened ? "true" : "false",
-      "aria-haspopup": "menu",
-      "aria-label": ariaLabel,
-      disabled: disabled,
-      style: defaultStyle,
-      type: "button"
-    }, restProps, {
-      "data-testid": testId
-    }), React__namespace.createElement(wonderBlocksCore.View, {
-      style: !disabled && (hovered || focused) && sharedStyles.focus
-    }, label), React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: wonderBlocksTokens.spacing.xxxSmall_4
-    }), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-      size: "small",
-      color: "currentColor",
-      icon: caretDownIcon__default["default"],
-      "aria-hidden": "true"
-    }));
-  }
-}
-const theme$2 = {
-  actionMenuOpener: {
-    color: {
-      default: {
-        background: "none",
-        foreground: wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground
-      },
-      disabled: {
-        foreground: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground
-      },
-      press: {
-        foreground: wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground
-      }
-    }
-  }
-};
-const sharedStyles = aphrodite.StyleSheet.create({
-  shared: {
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    height: DROPDOWN_ITEM_HEIGHT,
-    border: "none",
-    borderRadius: wonderBlocksTokens.border.radius.radius_040,
-    cursor: "pointer",
-    outline: "none",
-    textDecoration: "none",
-    boxSizing: "border-box",
-    touchAction: "manipulation",
-    ":focus": {
-      WebkitTapHighlightColor: "rgba(0,0,0,0)"
-    }
-  },
-  default: {
-    background: theme$2.actionMenuOpener.color.default.background,
-    color: theme$2.actionMenuOpener.color.default.foreground
-  },
-  disabled: {
-    color: theme$2.actionMenuOpener.color.disabled.foreground,
-    cursor: "not-allowed"
-  },
-  small: {
-    height: wonderBlocksTokens.spacing.xLarge_32
-  },
-  text: {
-    textAlign: "left",
-    display: "inline-block",
-    alignItems: "center",
-    fontWeight: "bold",
-    userSelect: "none",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    pointerEvents: "none"
-  },
-  focus: {
-    ":after": {
-      content: "''",
-      position: "absolute",
-      height: 2,
-      left: 0,
-      right: 0,
-      bottom: -1,
-      background: "currentColor"
-    }
-  },
-  press: {
-    color: theme$2.actionMenuOpener.color.press.foreground
-  }
-});
+const StyledButton$1=wonderBlocksCore.addStyle("button");class ActionMenuOpenerCore extends React__namespace.Component{render(){const{children,disabled:disabledProp,focused,hovered,pressed,waiting:_,testId,opened,"aria-label":ariaLabel,...restProps}=this.props;const disabled=disabledProp;const defaultStyle=[sharedStyles.shared,sharedStyles.default,disabled&&sharedStyles.disabled,!disabled&&pressed&&sharedStyles.press];const label=jsxRuntime.jsx(wonderBlocksTypography.LabelLarge,{style:sharedStyles.text,children:children});return jsxRuntime.jsxs(StyledButton$1,{"aria-expanded":opened?"true":"false","aria-haspopup":"menu","aria-label":ariaLabel,disabled:disabled,style:defaultStyle,type:"button",...restProps,"data-testid":testId,children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:!disabled&&(hovered||focused)&&sharedStyles.focus,children:label}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",color:"currentColor",icon:caretDownIcon__default["default"],"aria-hidden":"true"})]})}}const theme$2={actionMenuOpener:{color:{default:{background:"none",foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground},disabled:{foreground:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground},press:{foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground}}}};const sharedStyles=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",height:DROPDOWN_ITEM_HEIGHT,border:"none",borderRadius:wonderBlocksTokens.border.radius.radius_040,cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}},default:{background:theme$2.actionMenuOpener.color.default.background,color:theme$2.actionMenuOpener.color.default.foreground},disabled:{color:theme$2.actionMenuOpener.color.disabled.foreground,cursor:"not-allowed"},small:{height:wonderBlocksTokens.spacing.xLarge_32},text:{textAlign:"left",display:"inline-block",alignItems:"center",fontWeight:"bold",userSelect:"none",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",pointerEvents:"none"},focus:{":after":{content:"''",position:"absolute",height:2,left:0,right:0,bottom:-1,background:"currentColor"}},press:{color:theme$2.actionMenuOpener.color.press.foreground}});
 
-const _excluded$3 = ["text", "opened"];
-class ActionMenu extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.openerElement = void 0;
-    this.state = {
-      opened: false
-    };
-    this.handleItemSelected = () => {
-      this.handleOpenChanged(false);
-      if (this.openerElement) {
-        this.openerElement.focus();
-      }
-    };
-    this.handleOpenChanged = opened => {
-      this.setState({
-        opened
-      });
-      if (this.props.onToggle) {
-        this.props.onToggle(opened);
-      }
-    };
-    this.handleOptionSelected = selectedValue => {
-      const {
-        onChange,
-        selectedValues
-      } = this.props;
-      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]);
-      }
-      this.handleItemSelected();
-    };
-    this.handleOpenerRef = node => {
-      this.openerElement = ReactDOM__namespace.findDOMNode(node);
-    };
-    this.handleClick = e => {
-      this.handleOpenChanged(!this.state.opened);
-    };
-  }
-  static getDerivedStateFromProps(props, state) {
-    return {
-      opened: typeof props.opened === "boolean" ? props.opened : state.opened
-    };
-  }
-  getMenuItems() {
-    const {
-      children,
-      selectedValues
-    } = this.props;
-    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 _extends__default["default"]({}, itemObject, {
-          populatedProps: {
-            indent: isOptionItemIncluded,
-            onClick: this.handleItemSelected
-          }
-        });
-      } else if (OptionItem.isClassOf(item)) {
-        const selected = selectedValues ? selectedValues.includes(value) : false;
-        return _extends__default["default"]({}, itemObject, {
-          populatedProps: {
-            onToggle: this.handleOptionSelected,
-            selected,
-            variant: "check",
-            role: "menuitemcheckbox",
-            "aria-checked": selected,
-            "aria-selected": undefined
-          }
-        });
-      } else {
-        return itemObject;
-      }
-    });
-  }
-  renderOpener(numItems, dropdownId) {
-    const {
-      disabled,
-      menuText,
-      opener,
-      testId,
-      id
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.Id, {
-      id: id
-    }, uniqueOpenerId => React__namespace.createElement(DropdownOpener, {
-      id: uniqueOpenerId,
-      "aria-controls": dropdownId,
-      "aria-haspopup": "menu",
-      onClick: this.handleClick,
-      disabled: numItems === 0 || disabled,
-      text: menuText,
-      ref: this.handleOpenerRef,
-      testId: opener ? undefined : testId,
-      opened: this.state.opened,
-      role: "button"
-    }, opener ? opener : openerProps => {
-      const {
-          opened
-        } = openerProps,
-        eventState = _objectWithoutPropertiesLoose__default["default"](openerProps, _excluded$3);
-      return React__namespace.createElement(ActionMenuOpenerCore, _extends__default["default"]({}, eventState, {
-        disabled: disabled,
-        opened: !!opened,
-        testId: testId
-      }), menuText);
-    }));
-  }
-  render() {
-    const {
-      alignment,
-      dropdownStyle,
-      style,
-      className,
-      dropdownId
-    } = this.props;
-    const items = this.getMenuItems();
-    return React__namespace.createElement(wonderBlocksCore.Id, {
-      id: dropdownId
-    }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
-      id: uniqueDropdownId,
-      role: "menu",
-      style: style,
-      className: className,
-      opener: this.renderOpener(items.length, uniqueDropdownId),
-      alignment: alignment,
-      open: this.state.opened,
-      items: items,
-      openerElement: this.openerElement,
-      onOpenChanged: this.handleOpenChanged,
-      dropdownStyle: [styles$5.menuTopSpace, dropdownStyle]
-    }));
-  }
-}
-ActionMenu.defaultProps = {
-  alignment: "left",
-  disabled: false
-};
-const styles$5 = aphrodite.StyleSheet.create({
-  caret: {
-    marginLeft: 4
-  },
-  opener: {
-    whiteSpace: "nowrap",
-    userSelect: "none",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  },
-  menuTopSpace: {
-    top: -4
-  }
-});
+class ActionMenu extends React__namespace.Component{static getDerivedStateFromProps(props,state){return {opened:typeof props.opened==="boolean"?props.opened:state.opened}}getMenuItems(){const{children,selectedValues}=this.props;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:this.handleItemSelected}}}else if(OptionItem.isClassOf(item)){const selected=selectedValues?selectedValues.includes(value):false;return {...itemObject,populatedProps:{onToggle:this.handleOptionSelected,selected,variant:"check",role:"menuitemcheckbox","aria-checked":selected,"aria-selected":undefined}}}else {return itemObject}})}renderOpener(numItems,dropdownId){const{disabled,menuText,opener,testId,id}=this.props;return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueOpenerId=>jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,"aria-controls":dropdownId,"aria-haspopup":"menu",onClick:this.handleClick,disabled:numItems===0||disabled,text:menuText,ref:this.handleOpenerRef,testId:opener?undefined:testId,opened:this.state.opened,role:"button",children:opener?opener:openerProps=>{const{text,opened,...eventState}=openerProps;return jsxRuntime.jsx(ActionMenuOpenerCore,{...eventState,disabled:disabled,opened:!!opened,testId:testId,children:menuText})}})})}render(){const{alignment,dropdownStyle,style,className,dropdownId}=this.props;const items=this.getMenuItems();return jsxRuntime.jsx(wonderBlocksCore.Id,{id:dropdownId,children:uniqueDropdownId=>jsxRuntime.jsx(DropdownCore$1,{id:uniqueDropdownId,role:"menu",style:style,className:className,opener:this.renderOpener(items.length,uniqueDropdownId),alignment:alignment,open:this.state.opened,items:items,openerElement:this.openerElement,onOpenChanged:this.handleOpenChanged,dropdownStyle:[styles$5.menuTopSpace,dropdownStyle]})})}constructor(...args){super(...args),this.state={opened:false},this.handleItemSelected=()=>{this.handleOpenChanged(false);if(this.openerElement){this.openerElement.focus();}},this.handleOpenChanged=opened=>{this.setState({opened});if(this.props.onToggle){this.props.onToggle(opened);}},this.handleOptionSelected=selectedValue=>{const{onChange,selectedValues}=this.props;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]);}this.handleItemSelected();},this.handleOpenerRef=node=>{this.openerElement=ReactDOM__namespace.findDOMNode(node);},this.handleClick=e=>{this.handleOpenChanged(!this.state.opened);};}}ActionMenu.defaultProps={alignment:"left",disabled:false};const styles$5=aphrodite.StyleSheet.create({caret:{marginLeft:4},opener:{whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},menuTopSpace:{top:-4}});
 
-const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "open", "testId", "aria-label", "aria-required", "aria-controls", "onBlur", "onOpenChanged"];
-const StyledButton = wonderBlocksCore.addStyle("button");
-class SelectOpener extends React__namespace.Component {
-  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
-    };
-  }
-  render() {
-    const _this$props = this.props,
-      {
-        children,
-        disabled,
-        error,
-        id,
-        isPlaceholder,
-        open,
-        testId,
-        "aria-label": ariaLabel,
-        "aria-required": ariaRequired,
-        "aria-controls": ariaControls,
-        onBlur
-      } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
-    const stateStyles = _generateStyles(isPlaceholder, error);
-    const iconColor = disabled ? wonderBlocksTokens.semanticColor.icon.disabled : wonderBlocksTokens.semanticColor.icon.primary;
-    const style = [styles$4.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && this.state.pressed && stateStyles.press];
-    return React__namespace.createElement(StyledButton, _extends__default["default"]({}, sharedProps, {
-      "aria-disabled": disabled,
-      "aria-expanded": open ? "true" : "false",
-      "aria-invalid": error,
-      "aria-label": ariaLabel != null ? ariaLabel : undefined,
-      "aria-required": ariaRequired,
-      "aria-haspopup": "listbox",
-      "aria-controls": ariaControls,
-      "data-testid": testId,
-      id: id,
-      role: "combobox",
-      type: "button",
-      style: style,
-      onClick: !disabled ? this.handleClick : undefined,
-      onKeyDown: !disabled ? this.handleKeyDown : undefined,
-      onKeyUp: !disabled ? this.handleKeyUp : undefined,
-      onBlur: onBlur
-    }), React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-      style: styles$4.text
-    }, children || React__namespace.createElement("span", {
-      "aria-hidden": "true"
-    }, "\xA0")), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-      icon: caretDownIcon__default["default"],
-      color: iconColor,
-      size: "small",
-      style: styles$4.caret,
-      "aria-hidden": "true"
-    }));
-  }
-}
-SelectOpener.defaultProps = {
-  disabled: false,
-  error: false,
-  isPlaceholder: false
-};
-const styles$4 = aphrodite.StyleSheet.create({
-  shared: {
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    color: wonderBlocksTokens.semanticColor.text.primary,
-    height: DROPDOWN_ITEM_HEIGHT,
-    paddingLeft: wonderBlocksTokens.spacing.medium_16,
-    paddingRight: wonderBlocksTokens.spacing.small_12,
-    borderWidth: 0,
-    borderRadius: wonderBlocksTokens.border.radius.radius_040,
-    borderStyle: "solid",
-    outline: "none",
-    textDecoration: "none",
-    boxSizing: "border-box",
-    whiteSpace: "nowrap",
-    touchAction: "manipulation"
-  },
-  text: {
-    marginRight: wonderBlocksTokens.spacing.xSmall_8,
-    whiteSpace: "nowrap",
-    userSelect: "none",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  },
-  caret: {
-    minWidth: 16
-  }
-});
-const stateStyles = {};
-const _generateStyles = (placeholder, error) => {
-  const styleKey = `${placeholder}-${error}`;
-  if (stateStyles[styleKey]) {
-    return stateStyles[styleKey];
-  }
-  const states = {
-    default: {
-      border: wonderBlocksTokens.semanticColor.border.strong,
-      background: wonderBlocksTokens.semanticColor.surface.primary,
-      foreground: wonderBlocksTokens.semanticColor.text.primary
-    },
-    disabled: {
-      border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
-      background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background,
-      foreground: wonderBlocksTokens.semanticColor.text.secondary
-    },
-    error: {
-      border: wonderBlocksTokens.semanticColor.status.critical.foreground,
-      background: wonderBlocksTokens.semanticColor.status.critical.background,
-      foreground: wonderBlocksTokens.semanticColor.text.primary
-    }
-  };
-  const actionType = error ? "destructive" : "progressive";
-  const action = wonderBlocksTokens.semanticColor.action.secondary[actionType];
-  const sharedOutlineStyling = {
-    outlineOffset: `calc(${wonderBlocksTokens.border.width.medium} * -1)`,
-    outlineStyle: "solid",
-    outlineWidth: wonderBlocksTokens.border.width.medium
-  };
-  const focusStyling = _extends__default["default"]({}, sharedOutlineStyling, {
-    outlineColor: wonderBlocksTokens.semanticColor.focus.outer
-  });
-  const hoverStyling = _extends__default["default"]({}, sharedOutlineStyling, {
-    outlineColor: action.hover.border
-  });
-  const pressStyling = _extends__default["default"]({
-    background: action.press.background,
-    color: placeholder ? error ? wonderBlocksTokens.semanticColor.text.secondary : wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground : wonderBlocksTokens.semanticColor.text.primary,
-    outlineColor: action.press.border
-  }, sharedOutlineStyling);
-  const currentState = error ? states.error : states.default;
-  const newStyles = {
-    default: {
-      background: currentState.background,
-      borderColor: currentState.border,
-      borderWidth: wonderBlocksTokens.border.width.thin,
-      color: placeholder ? wonderBlocksTokens.semanticColor.text.secondary : currentState.foreground,
-      ":hover:not([aria-disabled=true])": hoverStyling,
-      ["@media not (hover: hover)"]: {
-        ":hover:not([aria-disabled=true])": {
-          borderColor: currentState.border,
-          borderWidth: wonderBlocksTokens.border.width.thin,
-          paddingLeft: wonderBlocksTokens.spacing.medium_16,
-          paddingRight: wonderBlocksTokens.spacing.small_12
-        }
-      },
-      ":focus-visible:not([aria-disabled=true])": focusStyling,
-      ":active:not([aria-disabled=true])": pressStyling
-    },
-    disabled: {
-      background: states.disabled.background,
-      borderColor: states.disabled.border,
-      color: states.disabled.foreground,
-      cursor: "not-allowed",
-      ":focus-visible": _extends__default["default"]({
-        outlineColor: wonderBlocksTokens.semanticColor.focus.outer
-      }, sharedOutlineStyling)
-    },
-    press: pressStyling
-  };
-  stateStyles[styleKey] = aphrodite.StyleSheet.create(newStyles);
-  return stateStyles[styleKey];
-};
+const StyledButton=wonderBlocksCore.addStyle("button");class SelectOpener extends React__namespace.Component{render(){const{children,disabled,error,id,isPlaceholder,open,testId,"aria-label":ariaLabel,"aria-required":ariaRequired,"aria-controls":ariaControls,onBlur,onOpenChanged,...sharedProps}=this.props;const stateStyles=_generateStyles(isPlaceholder,error);const iconColor=disabled?wonderBlocksTokens.semanticColor.icon.disabled:wonderBlocksTokens.semanticColor.icon.primary;const style=[styles$4.shared,stateStyles.default,disabled&&stateStyles.disabled,!disabled&&this.state.pressed&&stateStyles.press];return jsxRuntime.jsxs(StyledButton,{...sharedProps,"aria-disabled":disabled,"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:!disabled?this.handleClick:undefined,onKeyDown:!disabled?this.handleKeyDown:undefined,onKeyUp:!disabled?this.handleKeyUp:undefined,onBlur:onBlur,children:[jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{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,error:false,isPlaceholder:false};const styles$4=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"space-between",color:wonderBlocksTokens.semanticColor.text.primary,height:DROPDOWN_ITEM_HEIGHT,paddingLeft:wonderBlocksTokens.spacing.medium_16,paddingRight:wonderBlocksTokens.spacing.small_12,borderWidth:0,borderRadius:wonderBlocksTokens.border.radius.radius_040,borderStyle:"solid",outline:"none",textDecoration:"none",boxSizing:"border-box",whiteSpace:"nowrap",touchAction:"manipulation"},text:{marginRight:wonderBlocksTokens.spacing.xSmall_8,whiteSpace:"nowrap",userSelect:"none",overflow:"hidden",textOverflow:"ellipsis"},caret:{minWidth:16}});const stateStyles={};const _generateStyles=(placeholder,error)=>{const styleKey=`${placeholder}-${error}`;if(stateStyles[styleKey]){return stateStyles[styleKey]}const states={default:{border:wonderBlocksTokens.semanticColor.border.strong,background:wonderBlocksTokens.semanticColor.surface.primary,foreground:wonderBlocksTokens.semanticColor.text.primary},disabled:{border:wonderBlocksTokens.semanticColor.action.secondary.disabled.border,background:wonderBlocksTokens.semanticColor.action.secondary.disabled.background,foreground:wonderBlocksTokens.semanticColor.text.secondary},error:{border:wonderBlocksTokens.semanticColor.status.critical.foreground,background:wonderBlocksTokens.semanticColor.status.critical.background,foreground:wonderBlocksTokens.semanticColor.text.primary}};const actionType=error?"destructive":"progressive";const action=wonderBlocksTokens.semanticColor.action.secondary[actionType];const sharedOutlineStyling={outlineOffset:`calc(${wonderBlocksTokens.border.width.medium} * -1)`,outlineStyle:"solid",outlineWidth:wonderBlocksTokens.border.width.medium};const focusStyling={...sharedOutlineStyling,outlineColor:wonderBlocksTokens.semanticColor.focus.outer};const hoverStyling={...sharedOutlineStyling,outlineColor:action.hover.border};const pressStyling={background:action.press.background,color:placeholder?error?wonderBlocksTokens.semanticColor.text.secondary:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground:wonderBlocksTokens.semanticColor.text.primary,outlineColor:action.press.border,...sharedOutlineStyling};const currentState=error?states.error:states.default;const newStyles={default:{background:currentState.background,borderColor:currentState.border,borderWidth:wonderBlocksTokens.border.width.thin,color:placeholder?wonderBlocksTokens.semanticColor.text.secondary:currentState.foreground,":hover:not([aria-disabled=true])":hoverStyling,["@media not (hover: hover)"]:{":hover:not([aria-disabled=true])":{borderColor:currentState.border,borderWidth:wonderBlocksTokens.border.width.thin,paddingLeft:wonderBlocksTokens.spacing.medium_16,paddingRight:wonderBlocksTokens.spacing.small_12}},":focus-visible:not([aria-disabled=true])":focusStyling,":active:not([aria-disabled=true])":pressStyling},disabled:{background:states.disabled.background,borderColor:states.disabled.border,color:states.disabled.foreground,cursor:"not-allowed",":focus-visible":{outlineColor:wonderBlocksTokens.semanticColor.focus.outer,...sharedOutlineStyling}},press:pressStyling};stateStyles[styleKey]=aphrodite.StyleSheet.create(newStyles);return stateStyles[styleKey]};
 
-const defaultErrorMessage = "This field is required.";
-function hasValue(value) {
-  return value ? value.length > 0 : false;
-}
-function useSelectValidation({
-  value,
-  disabled = false,
-  validate,
-  onValidate,
-  required,
-  open
-}) {
-  const [errorMessage, setErrorMessage] = React__namespace.useState(() => validate && hasValue(value) && !disabled && validate(value) || null);
-  const handleValidation = React__namespace.useCallback(newValue => {
-    if (disabled) {
-      return;
-    }
-    if (validate) {
-      const error = newValue !== undefined && validate(newValue) || null;
-      setErrorMessage(error);
-      if (onValidate) {
-        onValidate(error);
-      }
-      if (error) {
-        return;
-      }
-    }
-    if (required) {
-      const requiredString = typeof required === "string" ? required : defaultErrorMessage;
-      const error = hasValue(newValue) ? null : requiredString;
-      setErrorMessage(error);
-      if (onValidate) {
-        onValidate(error);
-      }
-    }
-  }, [disabled, validate, setErrorMessage, onValidate, required]);
-  wonderBlocksCore.useOnMountEffect(() => {
-    if (hasValue(value)) {
-      handleValidation(value);
-    }
-  });
-  function onOpenerBlurValidation() {
-    if (!open && required && !hasValue(value)) {
-      handleValidation(value);
-    }
-  }
-  const onDropdownClosedValidation = () => {
-    if (required && !hasValue(value)) {
-      handleValidation(value);
-    }
-  };
-  const onSelectionValidation = newValue => {
-    handleValidation(newValue);
-  };
-  const onSelectedValuesChangeValidation = () => {
-    setErrorMessage(null);
-    if (onValidate) {
-      onValidate(null);
-    }
-  };
-  return {
-    errorMessage,
-    onOpenerBlurValidation,
-    onDropdownClosedValidation,
-    onSelectionValidation,
-    onSelectedValuesChangeValidation
-  };
-}
+const defaultErrorMessage="This field is required.";function hasValue(value){return value?value.length>0:false}function useSelectValidation({value,disabled=false,validate,onValidate,required,open}){const[errorMessage,setErrorMessage]=React__namespace.useState(()=>validate&&hasValue(value)&&!disabled&&validate(value)||null);const handleValidation=React__namespace.useCallback(newValue=>{if(disabled){return}if(validate){const error=newValue!==undefined&&validate(newValue)||null;setErrorMessage(error);if(onValidate){onValidate(error);}if(error){return}}if(required){const requiredString=typeof required==="string"?required:defaultErrorMessage;const error=hasValue(newValue)?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}},[disabled,validate,setErrorMessage,onValidate,required]);wonderBlocksCore.useOnMountEffect(()=>{if(hasValue(value)){handleValidation(value);}});function onOpenerBlurValidation(){if(!open&&required&&!hasValue(value)){handleValidation(value);}}const onDropdownClosedValidation=()=>{if(required&&!hasValue(value)){handleValidation(value);}};const onSelectionValidation=newValue=>{handleValidation(newValue);};const onSelectedValuesChangeValidation=()=>{setErrorMessage(null);if(onValidate){onValidate(null);}};return {errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}}
 
-const _excluded$1 = ["children", "error", "id", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-label", "aria-invalid", "aria-required", "disabled", "dropdownId", "validate", "onValidate", "required", "showOpenerLabelAsText"];
-const SingleSelect = props => {
-  const selectedIndex = React__namespace.useRef(0);
-  const {
-      children,
-      error = false,
-      id,
-      opener,
-      placeholder,
-      selectedValue,
-      testId,
-      alignment = "left",
-      autoFocus = true,
-      dropdownStyle,
-      enableTypeAhead = true,
-      isFilterable,
-      labels = {
-        clearSearch: defaultLabels.clearSearch,
-        filter: defaultLabels.filter,
-        noResults: defaultLabels.noResults,
-        someResults: defaultLabels.someSelected
-      },
-      onChange,
-      onToggle,
-      opened,
-      style,
-      className,
-      "aria-label": ariaLabel,
-      "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired,
-      disabled = false,
-      dropdownId,
-      validate,
-      onValidate,
-      required,
-      showOpenerLabelAsText = true
-    } = props,
-    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
-  const [open, setOpen] = React__namespace.useState(false);
-  const [searchText, setSearchText] = React__namespace.useState("");
-  const [openerElement, setOpenerElement] = React__namespace.useState();
-  const {
-    errorMessage,
-    onOpenerBlurValidation,
-    onDropdownClosedValidation,
-    onSelectionValidation
-  } = useSelectValidation({
-    value: selectedValue,
-    disabled,
-    validate,
-    onValidate,
-    required,
-    open
-  });
-  const hasError = error || !!errorMessage;
-  React__namespace.useEffect(() => {
-    if (disabled) {
-      setOpen(false);
-    } else if (typeof opened === "boolean") {
-      setOpen(opened);
-    }
-  }, [disabled, opened]);
-  const handleOpenChanged = opened => {
-    setOpen(opened);
-    setSearchText("");
-    if (onToggle) {
-      onToggle(opened);
-    }
-    if (!opened) {
-      onDropdownClosedValidation();
-    }
-  };
-  const handleToggle = newSelectedValue => {
-    if (newSelectedValue !== selectedValue) {
-      onChange(newSelectedValue);
-    }
-    if (open && openerElement) {
-      openerElement.focus();
-    }
-    setOpen(false);
-    if (onToggle) {
-      onToggle(false);
-    }
-    onSelectionValidation(newSelectedValue);
-  };
-  const mapOptionItemsToDropdownItems = children => {
-    let indexCounter = 0;
-    selectedIndex.current = 0;
-    return children.map(option => {
-      const {
-        disabled,
-        value
-      } = option.props;
-      const selected = selectedValue === value;
-      if (selected) {
-        selectedIndex.current = indexCounter;
-      }
-      if (!disabled) {
-        indexCounter += 1;
-      }
-      return {
-        component: option,
-        focusable: !disabled,
-        populatedProps: {
-          onToggle: handleToggle,
-          selected: selected,
-          variant: "check"
-        }
-      };
-    });
-  };
-  const filterChildren = children => {
-    const lowercasedSearchText = searchText.toLowerCase();
-    return children.filter(({
-      props
-    }) => !searchText || getLabel(props).toLowerCase().indexOf(lowercasedSearchText) > -1);
-  };
-  const getMenuItems = children => {
-    return mapOptionItemsToDropdownItems(isFilterable ? filterChildren(children) : children);
-  };
-  const handleSearchTextChanged = searchText => {
-    setSearchText(searchText);
-  };
-  const handleOpenerRef = node => {
-    const openerElement = ReactDOM__namespace.findDOMNode(node);
-    setOpenerElement(openerElement);
-  };
-  const handleClick = e => {
-    handleOpenChanged(!open);
-  };
-  const handleAnnouncement = message => {
-    wonderBlocksAnnouncer.announceMessage({
-      message
-    });
-  };
-  React__namespace.useEffect(() => {
-    const optionItems = React__namespace.Children.toArray(children);
-    const selectedItem = optionItems.find(option => option.props.value === selectedValue);
-    if (selectedItem) {
-      const label = getLabel(selectedItem.props);
-      if (label) {
-        handleAnnouncement(label);
-      }
-    }
-  }, [selectedValue, children]);
-  const renderOpener = (isDisabled, dropdownId) => {
-    const items = React__namespace.Children.toArray(children);
-    const selectedItem = items.find(option => option.props.value === selectedValue);
-    let menuContent;
-    if (selectedItem) {
-      menuContent = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem.props);
-    } else {
-      menuContent = placeholder;
-    }
-    const dropdownOpener = React__namespace.createElement(wonderBlocksCore.Id, {
-      id: id
-    }, uniqueOpenerId => {
-      return opener ? React__namespace.createElement(DropdownOpener, {
-        id: uniqueOpenerId,
-        "aria-label": ariaLabel,
-        "aria-controls": dropdownId,
-        "aria-haspopup": "listbox",
-        onClick: handleClick,
-        disabled: isDisabled,
-        ref: handleOpenerRef,
-        role: "combobox",
-        text: menuContent,
-        opened: open,
-        error: hasError,
-        onBlur: onOpenerBlurValidation
-      }, opener) : React__namespace.createElement(SelectOpener, _extends__default["default"]({}, sharedProps, {
-        "aria-label": ariaLabel,
-        "aria-controls": dropdownId,
-        disabled: isDisabled,
-        id: uniqueOpenerId,
-        error: hasError,
-        isPlaceholder: !selectedItem,
-        onOpenChanged: handleOpenChanged,
-        open: open,
-        ref: handleOpenerRef,
-        testId: testId,
-        onBlur: onOpenerBlurValidation
-      }), menuContent);
-    });
-    return dropdownOpener;
-  };
-  const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
-  const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
-  const items = getMenuItems(allChildren);
-  const isDisabled = numEnabledOptions === 0 || disabled;
-  const {
-    someResults
-  } = labels;
-  React__namespace.useEffect(() => {
-    if (open) {
-      handleAnnouncement(someResults(items.length));
-    }
-  }, [items.length, someResults, open]);
-  return React__namespace.createElement(wonderBlocksCore.Id, {
-    id: dropdownId
-  }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
-    id: uniqueDropdownId,
-    role: "listbox",
-    selectionType: "single",
-    alignment: alignment,
-    autoFocus: autoFocus,
-    enableTypeAhead: enableTypeAhead,
-    dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
-    initialFocusedIndex: selectedIndex.current,
-    items: items,
-    onOpenChanged: handleOpenChanged,
-    open: open,
-    opener: renderOpener(isDisabled, uniqueDropdownId),
-    openerElement: openerElement,
-    style: style,
-    className: className,
-    isFilterable: isFilterable,
-    onSearchTextChanged: isFilterable ? handleSearchTextChanged : undefined,
-    searchText: isFilterable ? searchText : "",
-    labels: labels,
-    "aria-invalid": ariaInvalid,
-    "aria-required": ariaRequired,
-    disabled: isDisabled
-  }));
-};
+const SingleSelect=props=>{const selectedIndex=React__namespace.useRef(0);const{children,error=false,id,opener,placeholder,selectedValue,testId,alignment="left",autoFocus=true,dropdownStyle,enableTypeAhead=true,isFilterable,labels={clearSearch:defaultLabels.clearSearch,filter:defaultLabels.filter,noResults:defaultLabels.noResults,someResults:defaultLabels.someSelected},onChange,onToggle,opened,style,className,"aria-label":ariaLabel,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled=false,dropdownId,validate,onValidate,required,showOpenerLabelAsText=true,...sharedProps}=props;const[open,setOpen]=React__namespace.useState(false);const[searchText,setSearchText]=React__namespace.useState("");const[openerElement,setOpenerElement]=React__namespace.useState();const{errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation}=useSelectValidation({value:selectedValue,disabled,validate,onValidate,required,open});const hasError=error||!!errorMessage;React__namespace.useEffect(()=>{if(disabled){setOpen(false);}else if(typeof opened==="boolean"){setOpen(opened);}},[disabled,opened]);const handleOpenChanged=opened=>{setOpen(opened);setSearchText("");if(onToggle){onToggle(opened);}if(!opened){onDropdownClosedValidation();}};const handleToggle=newSelectedValue=>{if(newSelectedValue!==selectedValue){onChange(newSelectedValue);}if(open&&openerElement){openerElement.focus();}setOpen(false);if(onToggle){onToggle(false);}onSelectionValidation(newSelectedValue);};const mapOptionItemsToDropdownItems=children=>{let indexCounter=0;selectedIndex.current=0;return children.map(option=>{const{disabled,value}=option.props;const selected=selectedValue===value;if(selected){selectedIndex.current=indexCounter;}if(!disabled){indexCounter+=1;}return {component:option,focusable:!disabled,populatedProps:{onToggle:handleToggle,selected:selected,variant:"check"}}})};const filterChildren=children=>{const lowercasedSearchText=searchText.toLowerCase();return children.filter(({props})=>!searchText||getLabel(props).toLowerCase().indexOf(lowercasedSearchText)>-1)};const getMenuItems=children=>{return mapOptionItemsToDropdownItems(isFilterable?filterChildren(children):children)};const handleSearchTextChanged=searchText=>{setSearchText(searchText);};const handleOpenerRef=node=>{const openerElement=ReactDOM__namespace.findDOMNode(node);setOpenerElement(openerElement);};const handleClick=e=>{handleOpenChanged(!open);};const handleAnnouncement=message=>{wonderBlocksAnnouncer.announceMessage({message});};React__namespace.useEffect(()=>{const optionItems=React__namespace.Children.toArray(children);const selectedItem=optionItems.find(option=>option.props.value===selectedValue);if(selectedItem){const label=getLabel(selectedItem.props);if(label){handleAnnouncement(label);}}},[selectedValue,children]);const renderOpener=(isDisabled,dropdownId)=>{const items=React__namespace.Children.toArray(children);const selectedItem=items.find(option=>option.props.value===selectedValue);let menuContent;if(selectedItem){menuContent=getSelectOpenerLabel(showOpenerLabelAsText,selectedItem.props);}else {menuContent=placeholder;}const dropdownOpener=jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueOpenerId=>{return opener?jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-haspopup":"listbox",onClick:handleClick,disabled:isDisabled,ref:handleOpenerRef,role:"combobox",text:menuContent,opened:open,error:hasError,onBlur:onOpenerBlurValidation,children:opener}):jsxRuntime.jsx(SelectOpener,{...sharedProps,"aria-label":ariaLabel,"aria-controls":dropdownId,disabled:isDisabled,id:uniqueOpenerId,error:hasError,isPlaceholder:!selectedItem,onOpenChanged:handleOpenChanged,open:open,ref:handleOpenerRef,testId:testId,onBlur:onOpenerBlurValidation,children:menuContent})}});return dropdownOpener};const allChildren=React__namespace.Children.toArray(children).filter(Boolean);const numEnabledOptions=allChildren.filter(option=>!option.props.disabled).length;const items=getMenuItems(allChildren);const isDisabled=numEnabledOptions===0||disabled;const{someResults}=labels;React__namespace.useEffect(()=>{if(open){handleAnnouncement(someResults(items.length));}},[items.length,someResults,open]);return jsxRuntime.jsx(wonderBlocksCore.Id,{id:dropdownId,children:uniqueDropdownId=>jsxRuntime.jsx(DropdownCore$1,{id:uniqueDropdownId,role:"listbox",selectionType:"single",alignment:alignment,autoFocus:autoFocus,enableTypeAhead:enableTypeAhead,dropdownStyle:[isFilterable&&filterableDropdownStyle,selectDropdownStyle,dropdownStyle],initialFocusedIndex:selectedIndex.current,items:items,onOpenChanged:handleOpenChanged,open:open,opener:renderOpener(isDisabled,uniqueDropdownId),openerElement:openerElement,style:style,className:className,isFilterable:isFilterable,onSearchTextChanged:isFilterable?handleSearchTextChanged:undefined,searchText:isFilterable?searchText:"",labels:labels,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled:isDisabled})})};
 
-const _excluded = ["id", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-label", "aria-invalid", "aria-required", "disabled", "error", "children", "dropdownId", "showOpenerLabelAsText", "validate", "onValidate", "required"];
-const MultiSelect = props => {
-  const {
-      id,
-      opener,
-      testId,
-      alignment = "left",
-      dropdownStyle,
-      implicitAllEnabled,
-      isFilterable,
-      labels: propLabels,
-      onChange,
-      onToggle,
-      opened,
-      selectedValues = [],
-      shortcuts = false,
-      style,
-      className,
-      "aria-label": ariaLabel,
-      "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired,
-      disabled = false,
-      error = false,
-      children,
-      dropdownId,
-      showOpenerLabelAsText = true,
-      validate,
-      onValidate,
-      required
-    } = props,
-    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
-  const labels = React__namespace.useMemo(() => {
-    return _extends__default["default"]({}, defaultLabels, propLabels);
-  }, [propLabels]);
-  const [open, setOpen] = React__namespace.useState(false);
-  const [searchText, setSearchText] = React__namespace.useState("");
-  const [lastSelectedValues, setLastSelectedValues] = React__namespace.useState([]);
-  const [openerElement, setOpenerElement] = React__namespace.useState();
-  const {
-    errorMessage,
-    onOpenerBlurValidation,
-    onDropdownClosedValidation,
-    onSelectionValidation,
-    onSelectedValuesChangeValidation
-  } = useSelectValidation({
-    value: selectedValues,
-    disabled,
-    validate,
-    onValidate,
-    required,
-    open
-  });
-  const hasError = error || !!errorMessage;
-  React__namespace.useEffect(() => {
-    if (disabled) {
-      setOpen(false);
-    } else if (typeof opened === "boolean") {
-      setOpen(opened);
-    }
-  }, [disabled, opened]);
-  const handleOpenChanged = opened => {
-    setOpen(opened);
-    setSearchText("");
-    setLastSelectedValues(selectedValues);
-    if (onToggle) {
-      onToggle(opened);
-    }
-    if (!opened) {
-      if (lastSelectedValues !== selectedValues) {
-        onSelectionValidation(selectedValues);
-      } else {
-        onDropdownClosedValidation();
-      }
-    }
-  };
-  const handleToggle = selectedValue => {
-    if (selectedValues.includes(selectedValue)) {
-      const index = selectedValues.indexOf(selectedValue);
-      const updatedSelection = [...selectedValues.slice(0, index), ...selectedValues.slice(index + 1)];
-      onChange(updatedSelection);
-    } else {
-      onChange([...selectedValues, selectedValue]);
-    }
-    onSelectedValuesChangeValidation();
-  };
-  const handleSelectAll = () => {
-    const allChildren = React__namespace.Children.toArray(children);
-    const selected = allChildren.filter(option => !!option && !option.props.disabled).map(option => option.props.value);
-    onChange(selected);
-    onSelectedValuesChangeValidation();
-  };
-  const handleSelectNone = () => {
-    onChange([]);
-    onSelectedValuesChangeValidation();
-  };
-  const getMenuTextOrNode = React__namespace.useCallback(children => {
-    const {
-      noneSelected,
-      someSelected,
-      allSelected
-    } = labels;
-    const numSelectedAll = children.filter(option => !option.props.disabled).length;
-    const noSelectionText = implicitAllEnabled ? allSelected : noneSelected;
-    switch (selectedValues.length) {
-      case 0:
-        return noSelectionText;
-      case 1:
-        const selectedItem = children.find(option => option.props.value === selectedValues[0]);
-        if (selectedItem) {
-          const selectedLabel = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem == null ? void 0 : selectedItem.props);
-          if (selectedLabel) {
-            return selectedLabel;
-          } else {
-            return someSelected(1);
-          }
-        }
-        return noSelectionText;
-      case numSelectedAll:
-        return allSelected;
-      default:
-        return someSelected(selectedValues.length);
-    }
-  }, [implicitAllEnabled, labels, selectedValues, showOpenerLabelAsText]);
-  const getShortcuts = numOptions => {
-    const {
-      selectAllLabel,
-      selectNoneLabel
-    } = labels;
-    if (shortcuts && !searchText) {
-      const selectAllDisabled = numOptions === selectedValues.length;
-      const selectAll = {
-        component: React__namespace.createElement(ActionItem, {
-          disabled: selectAllDisabled,
-          label: selectAllLabel(numOptions),
-          indent: true,
-          onClick: handleSelectAll
-        }),
-        focusable: !selectAllDisabled,
-        populatedProps: {}
-      };
-      const selectNoneDisabled = selectedValues.length === 0;
-      const selectNone = {
-        component: React__namespace.createElement(ActionItem, {
-          disabled: selectNoneDisabled,
-          label: selectNoneLabel,
-          indent: true,
-          onClick: handleSelectNone
-        }),
-        focusable: !selectNoneDisabled,
-        populatedProps: {}
-      };
-      const separator = {
-        component: React__namespace.createElement(SeparatorItem, {
-          key: "shortcuts-separator"
-        }),
-        focusable: false,
-        populatedProps: {}
-      };
-      return [selectAll, selectNone, separator];
-    } else {
-      return [];
-    }
-  };
-  const getMenuItems = children => {
-    if (!isFilterable) {
-      return children.map(mapOptionItemToDropdownItem);
-    }
-    const lowercasedSearchText = searchText.toLowerCase();
-    const filteredChildren = children.filter(({
-      props
-    }) => !searchText || getLabel(props).toLowerCase().indexOf(lowercasedSearchText) > -1);
-    const lastSelectedChildren = [];
-    const restOfTheChildren = [];
-    for (const child of filteredChildren) {
-      if (lastSelectedValues.includes(child.props.value)) {
-        lastSelectedChildren.push(child);
-      } else {
-        restOfTheChildren.push(child);
-      }
-    }
-    const lastSelectedItems = lastSelectedChildren.map(mapOptionItemToDropdownItem);
-    if (lastSelectedChildren.length && restOfTheChildren.length) {
-      lastSelectedItems.push({
-        component: React__namespace.createElement(SeparatorItem, {
-          key: "selected-separator"
-        }),
-        focusable: false,
-        populatedProps: {}
-      });
-    }
-    return [...lastSelectedItems, ...restOfTheChildren.map(mapOptionItemToDropdownItem)];
-  };
-  const mapOptionItemToDropdownItem = option => {
-    const {
-      disabled,
-      value
-    } = option.props;
-    return {
-      component: option,
-      focusable: !disabled,
-      populatedProps: {
-        onToggle: handleToggle,
-        selected: selectedValues.includes(value),
-        variant: "checkbox"
-      }
-    };
-  };
-  const handleOpenerRef = node => {
-    const openerElement = ReactDOM__namespace.findDOMNode(node);
-    setOpenerElement(openerElement);
-  };
-  const handleSearchTextChanged = searchText => {
-    setSearchText(searchText);
-  };
-  const handleClick = e => {
-    handleOpenChanged(!open);
-  };
-  const handleAnnouncement = message => {
-    wonderBlocksAnnouncer.announceMessage({
-      message
-    });
-  };
-  const maybeGetOpenerStringValue = React__namespace.useCallback((children, openerContent) => {
-    let openerStringValue;
-    if (selectedValues.length === 1) {
-      const selectedItem = children.find(option => option.props.value === selectedValues[0]);
-      openerStringValue = selectedItem ? getLabel(selectedItem == null ? void 0 : selectedItem.props) : undefined;
-    } else if (typeof openerContent === "string") {
-      openerStringValue = openerContent;
-    }
-    return openerStringValue;
-  }, [selectedValues]);
-  React__namespace.useEffect(() => {
-    const optionItems = React__namespace.Children.toArray(children);
-    const openerContent = getMenuTextOrNode(optionItems);
-    const openerStringValue = maybeGetOpenerStringValue(optionItems, openerContent);
-    if (openerStringValue) {
-      handleAnnouncement(openerStringValue);
-    }
-  }, [children, getMenuTextOrNode, maybeGetOpenerStringValue]);
-  const renderOpener = (allChildren, isDisabled, dropdownId) => {
-    const {
-      noneSelected
-    } = labels;
-    const openerContent = getMenuTextOrNode(allChildren);
-    const dropdownOpener = React__namespace.createElement(wonderBlocksCore.Id, {
-      id: id
-    }, uniqueOpenerId => {
-      return opener ? React__namespace.createElement(DropdownOpener, {
-        id: uniqueOpenerId,
-        error: hasError,
-        "aria-label": ariaLabel,
-        "aria-controls": dropdownId,
-        "aria-haspopup": "listbox",
-        onClick: handleClick,
-        onBlur: onOpenerBlurValidation,
-        disabled: isDisabled,
-        ref: handleOpenerRef,
-        role: "combobox",
-        text: openerContent,
-        opened: open
-      }, opener) : React__namespace.createElement(SelectOpener, _extends__default["default"]({}, sharedProps, {
-        error: hasError,
-        disabled: isDisabled,
-        id: uniqueOpenerId,
-        "aria-label": ariaLabel,
-        "aria-controls": dropdownId,
-        isPlaceholder: openerContent === noneSelected,
-        onOpenChanged: handleOpenChanged,
-        onBlur: onOpenerBlurValidation,
-        open: open,
-        ref: handleOpenerRef,
-        testId: testId
-      }), openerContent);
-    });
-    return dropdownOpener;
-  };
-  const {
-    clearSearch,
-    filter,
-    noResults,
-    someSelected
-  } = labels;
-  const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
-  const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
-  const filteredItems = getMenuItems(allChildren);
-  const isDisabled = numEnabledOptions === 0 || disabled;
-  React__namespace.useEffect(() => {
-    if (open) {
-      handleAnnouncement(someSelected(filteredItems.length));
-    }
-  }, [filteredItems.length, someSelected, open]);
-  return React__namespace.createElement(wonderBlocksCore.Id, {
-    id: dropdownId
-  }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
-    id: uniqueDropdownId,
-    role: "listbox",
-    alignment: alignment,
-    dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
-    isFilterable: isFilterable,
-    items: [...getShortcuts(numEnabledOptions), ...filteredItems],
-    onOpenChanged: handleOpenChanged,
-    open: open,
-    opener: renderOpener(allChildren, isDisabled, uniqueDropdownId),
-    openerElement: openerElement,
-    selectionType: "multi",
-    style: style,
-    className: className,
-    onSearchTextChanged: isFilterable ? handleSearchTextChanged : undefined,
-    searchText: isFilterable ? searchText : "",
-    labels: {
-      clearSearch,
-      filter,
-      noResults,
-      someResults: someSelected
-    },
-    "aria-invalid": ariaInvalid,
-    "aria-required": ariaRequired,
-    disabled: isDisabled
-  }));
-};
+const MultiSelect=props=>{const{id,opener,testId,alignment="left",dropdownStyle,implicitAllEnabled,isFilterable,labels:propLabels,onChange,onToggle,opened,selectedValues=[],shortcuts=false,style,className,"aria-label":ariaLabel,"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled=false,error=false,children,dropdownId,showOpenerLabelAsText=true,validate,onValidate,required,...sharedProps}=props;const labels=React__namespace.useMemo(()=>{return {...defaultLabels,...propLabels}},[propLabels]);const[open,setOpen]=React__namespace.useState(false);const[searchText,setSearchText]=React__namespace.useState("");const[lastSelectedValues,setLastSelectedValues]=React__namespace.useState([]);const[openerElement,setOpenerElement]=React__namespace.useState();const{errorMessage,onOpenerBlurValidation,onDropdownClosedValidation,onSelectionValidation,onSelectedValuesChangeValidation}=useSelectValidation({value:selectedValues,disabled,validate,onValidate,required,open});const hasError=error||!!errorMessage;React__namespace.useEffect(()=>{if(disabled){setOpen(false);}else if(typeof opened==="boolean"){setOpen(opened);}},[disabled,opened]);const handleOpenChanged=opened=>{setOpen(opened);setSearchText("");setLastSelectedValues(selectedValues);if(onToggle){onToggle(opened);}if(!opened){if(lastSelectedValues!==selectedValues){onSelectionValidation(selectedValues);}else {onDropdownClosedValidation();}}};const handleToggle=selectedValue=>{if(selectedValues.includes(selectedValue)){const index=selectedValues.indexOf(selectedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,selectedValue]);}onSelectedValuesChangeValidation();};const handleSelectAll=()=>{const allChildren=React__namespace.Children.toArray(children);const selected=allChildren.filter(option=>!!option&&!option.props.disabled).map(option=>option.props.value);onChange(selected);onSelectedValuesChangeValidation();};const handleSelectNone=()=>{onChange([]);onSelectedValuesChangeValidation();};const getMenuTextOrNode=React__namespace.useCallback(children=>{const{noneSelected,someSelected,allSelected}=labels;const numSelectedAll=children.filter(option=>!option.props.disabled).length;const noSelectionText=implicitAllEnabled?allSelected:noneSelected;switch(selectedValues.length){case 0:return noSelectionText;case 1:const selectedItem=children.find(option=>option.props.value===selectedValues[0]);if(selectedItem){const selectedLabel=getSelectOpenerLabel(showOpenerLabelAsText,selectedItem?.props);if(selectedLabel){return selectedLabel}else {return someSelected(1)}}return noSelectionText;case numSelectedAll:return allSelected;default:return someSelected(selectedValues.length)}},[implicitAllEnabled,labels,selectedValues,showOpenerLabelAsText]);const getShortcuts=numOptions=>{const{selectAllLabel,selectNoneLabel}=labels;if(shortcuts&&!searchText){const selectAllDisabled=numOptions===selectedValues.length;const selectAll={component:jsxRuntime.jsx(ActionItem,{disabled:selectAllDisabled,label:selectAllLabel(numOptions),indent:true,onClick:handleSelectAll}),focusable:!selectAllDisabled,populatedProps:{}};const selectNoneDisabled=selectedValues.length===0;const selectNone={component:jsxRuntime.jsx(ActionItem,{disabled:selectNoneDisabled,label:selectNoneLabel,indent:true,onClick:handleSelectNone}),focusable:!selectNoneDisabled,populatedProps:{}};const separator={component:jsxRuntime.jsx(SeparatorItem,{},"shortcuts-separator"),focusable:false,populatedProps:{}};return [selectAll,selectNone,separator]}else {return []}};const getMenuItems=children=>{if(!isFilterable){return children.map(mapOptionItemToDropdownItem)}const lowercasedSearchText=searchText.toLowerCase();const filteredChildren=children.filter(({props})=>!searchText||getLabel(props).toLowerCase().indexOf(lowercasedSearchText)>-1);const lastSelectedChildren=[];const restOfTheChildren=[];for(const child of filteredChildren){if(lastSelectedValues.includes(child.props.value)){lastSelectedChildren.push(child);}else {restOfTheChildren.push(child);}}const lastSelectedItems=lastSelectedChildren.map(mapOptionItemToDropdownItem);if(lastSelectedChildren.length&&restOfTheChildren.length){lastSelectedItems.push({component:jsxRuntime.jsx(SeparatorItem,{},"selected-separator"),focusable:false,populatedProps:{}});}return [...lastSelectedItems,...restOfTheChildren.map(mapOptionItemToDropdownItem)]};const mapOptionItemToDropdownItem=option=>{const{disabled,value}=option.props;return {component:option,focusable:!disabled,populatedProps:{onToggle:handleToggle,selected:selectedValues.includes(value),variant:"checkbox"}}};const handleOpenerRef=node=>{const openerElement=ReactDOM__namespace.findDOMNode(node);setOpenerElement(openerElement);};const handleSearchTextChanged=searchText=>{setSearchText(searchText);};const handleClick=e=>{handleOpenChanged(!open);};const handleAnnouncement=message=>{wonderBlocksAnnouncer.announceMessage({message});};const maybeGetOpenerStringValue=React__namespace.useCallback((children,openerContent)=>{let openerStringValue;if(selectedValues.length===1){const selectedItem=children.find(option=>option.props.value===selectedValues[0]);openerStringValue=selectedItem?getLabel(selectedItem?.props):undefined;}else if(typeof openerContent==="string"){openerStringValue=openerContent;}return openerStringValue},[selectedValues]);React__namespace.useEffect(()=>{const optionItems=React__namespace.Children.toArray(children);const openerContent=getMenuTextOrNode(optionItems);const openerStringValue=maybeGetOpenerStringValue(optionItems,openerContent);if(openerStringValue){handleAnnouncement(openerStringValue);}},[children,getMenuTextOrNode,maybeGetOpenerStringValue]);const renderOpener=(allChildren,isDisabled,dropdownId)=>{const{noneSelected}=labels;const openerContent=getMenuTextOrNode(allChildren);const dropdownOpener=jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueOpenerId=>{return opener?jsxRuntime.jsx(DropdownOpener,{id:uniqueOpenerId,error:hasError,"aria-label":ariaLabel,"aria-controls":dropdownId,"aria-haspopup":"listbox",onClick:handleClick,onBlur:onOpenerBlurValidation,disabled:isDisabled,ref:handleOpenerRef,role:"combobox",text:openerContent,opened:open,children:opener}):jsxRuntime.jsx(SelectOpener,{...sharedProps,error:hasError,disabled:isDisabled,id:uniqueOpenerId,"aria-label":ariaLabel,"aria-controls":dropdownId,isPlaceholder:openerContent===noneSelected,onOpenChanged:handleOpenChanged,onBlur:onOpenerBlurValidation,open:open,ref:handleOpenerRef,testId:testId,children:openerContent})}});return dropdownOpener};const{clearSearch,filter,noResults,someSelected}=labels;const allChildren=React__namespace.Children.toArray(children).filter(Boolean);const numEnabledOptions=allChildren.filter(option=>!option.props.disabled).length;const filteredItems=getMenuItems(allChildren);const isDisabled=numEnabledOptions===0||disabled;React__namespace.useEffect(()=>{if(open){handleAnnouncement(someSelected(filteredItems.length));}},[filteredItems.length,someSelected,open]);return jsxRuntime.jsx(wonderBlocksCore.Id,{id:dropdownId,children:uniqueDropdownId=>jsxRuntime.jsx(DropdownCore$1,{id:uniqueDropdownId,role:"listbox",alignment:alignment,dropdownStyle:[isFilterable&&filterableDropdownStyle,selectDropdownStyle,dropdownStyle],isFilterable:isFilterable,items:[...getShortcuts(numEnabledOptions),...filteredItems],onOpenChanged:handleOpenChanged,open:open,opener:renderOpener(allChildren,isDisabled,uniqueDropdownId),openerElement:openerElement,selectionType:"multi",style:style,className:className,onSearchTextChanged:isFilterable?handleSearchTextChanged:undefined,searchText:isFilterable?searchText:"",labels:{clearSearch,filter,noResults,someResults:someSelected},"aria-invalid":ariaInvalid,"aria-required":ariaRequired,disabled:isDisabled})})};
 
-function updateMultipleSelection(previousSelection, value = "") {
-  if (!previousSelection) {
-    return [value];
-  }
-  return previousSelection.includes(value) ? previousSelection.filter(item => item !== value) : [...previousSelection, value];
-}
+function updateMultipleSelection(previousSelection,value=""){if(!previousSelection){return [value]}return previousSelection.includes(value)?previousSelection.filter(item=>item!==value):[...previousSelection,value]}
 
-function useListbox({
-  children: options,
-  disabled,
-  disableSpaceSelection,
-  id,
-  onChange,
-  selectionType = "single",
-  value
-}) {
-  const selectedValueIndex = React__namespace.useMemo(() => {
-    const firstValue = Array.isArray(value) ? value[0] : value;
-    if (!firstValue || firstValue === "") {
-      return 0;
-    }
-    return options.findIndex(item => item.props.value === firstValue);
-  }, [options, value]);
-  const [focusedIndex, setFocusedIndex] = React__namespace.useState(selectedValueIndex);
-  const [isListboxFocused, setIsListboxFocused] = React__namespace.useState(false);
-  const [selected, setSelected] = React__namespace.useState(value);
-  const focusItem = index => {
-    setFocusedIndex(index);
-  };
-  const focusPreviousItem = React__namespace.useCallback(() => {
-    if (focusedIndex <= 0) {
-      focusItem(options.length - 1);
-    } else {
-      focusItem(focusedIndex - 1);
-    }
-  }, [options, focusedIndex]);
-  const focusNextItem = React__namespace.useCallback(() => {
-    if (focusedIndex === options.length - 1) {
-      focusItem(0);
-    } else {
-      focusItem(focusedIndex + 1);
-    }
-  }, [options, focusedIndex]);
-  const selectOption = React__namespace.useCallback(index => {
-    const optionItem = options[index];
-    if (optionItem.props.disabled) {
-      return;
-    }
-    if (selectionType === "single") {
-      setSelected(optionItem.props.value);
-      if (onChange) {
-        onChange(optionItem.props.value);
-      }
-    } else {
-      setSelected(prevSelected => {
-        const newSelectedValue = updateMultipleSelection(prevSelected, optionItem.props.value);
-        if (onChange) {
-          onChange(newSelectedValue);
-        }
-        return newSelectedValue;
-      });
-    }
-  }, [onChange, options, selectionType]);
-  const handleKeyDown = React__namespace.useCallback(event => {
-    const {
-      key
-    } = event;
-    switch (key) {
-      case "ArrowUp":
-        event.preventDefault();
-        focusPreviousItem();
-        return;
-      case "ArrowDown":
-        event.preventDefault();
-        focusNextItem();
-        return;
-      case "Home":
-        event.preventDefault();
-        focusItem(0);
-        return;
-      case "End":
-        event.preventDefault();
-        focusItem(options.length - 1);
-        return;
-      case "Enter":
-      case " ":
-        if (focusedIndex < 0 || key === " " && disableSpaceSelection) {
-          return;
-        }
-        event.preventDefault();
-        selectOption(focusedIndex);
-        return;
-    }
-  }, [disableSpaceSelection, focusNextItem, focusPreviousItem, focusedIndex, options, selectOption]);
-  const handleKeyUp = React__namespace.useCallback(event => {
-    switch (event.key) {
-      case " ":
-        event.preventDefault();
-        return;
-    }
-  }, []);
-  const handleFocus = React__namespace.useCallback(() => {
-    if (!disabled) {
-      setIsListboxFocused(true);
-    }
-  }, [disabled]);
-  const handleBlur = React__namespace.useCallback(() => {
-    if (!disabled) {
-      setIsListboxFocused(false);
-    }
-  }, [disabled]);
-  const handleClick = React__namespace.useCallback(value => {
-    const index = options.findIndex(item => item.props.value === value);
-    const isOptionDisabled = options[index].props.disabled;
-    if (disabled || isOptionDisabled) {
-      return;
-    }
-    focusItem(index);
-    selectOption(index);
-  }, [disabled, options, selectOption]);
-  const renderList = React__namespace.useMemo(() => {
-    return options.map((component, index) => {
-      const isSingleSelection = selectionType === "single" && typeof selected === "string";
-      const isSelected = (isSingleSelection ? selected === component.props.value : selected == null ? void 0 : selected.includes(component.props.value)) || false;
-      const optionId = id ? `${id}-option-${index}` : `option-${index}`;
-      return React__namespace.cloneElement(component, {
-        key: index,
-        focused: isListboxFocused && index === focusedIndex,
-        disabled: component.props.disabled || disabled || false,
-        selected: isSelected,
-        variant: selectionType === "single" ? "check" : "checkbox",
-        parentComponent: "listbox",
-        id: optionId,
-        onToggle: () => {
-          handleClick(component.props.value);
-        },
-        role: "option"
-      });
-    });
-  }, [options, selected, id, isListboxFocused, focusedIndex, disabled, selectionType, handleClick]);
-  return {
-    isListboxFocused,
-    focusedIndex,
-    setFocusedIndex,
-    renderList,
-    setSelected,
-    selected,
-    handleKeyDown,
-    handleKeyUp,
-    handleFocus,
-    handleBlur
-  };
-}
+function useListbox({children:options,disabled,disableSpaceSelection,id,onChange,selectionType="single",value}){const selectedValueIndex=React__namespace.useMemo(()=>{const firstValue=Array.isArray(value)?value[0]:value;if(!firstValue||firstValue===""){return 0}return options.findIndex(item=>item.props.value===firstValue)},[options,value]);const[focusedIndex,setFocusedIndex]=React__namespace.useState(selectedValueIndex);const[isListboxFocused,setIsListboxFocused]=React__namespace.useState(false);const[selected,setSelected]=React__namespace.useState(value);const focusItem=index=>{setFocusedIndex(index);};const focusPreviousItem=React__namespace.useCallback(()=>{if(focusedIndex<=0){focusItem(options.length-1);}else {focusItem(focusedIndex-1);}},[options,focusedIndex]);const focusNextItem=React__namespace.useCallback(()=>{if(focusedIndex===options.length-1){focusItem(0);}else {focusItem(focusedIndex+1);}},[options,focusedIndex]);const selectOption=React__namespace.useCallback(index=>{const optionItem=options[index];if(optionItem.props.disabled){return}if(selectionType==="single"){setSelected(optionItem.props.value);if(onChange){onChange(optionItem.props.value);}}else {setSelected(prevSelected=>{const newSelectedValue=updateMultipleSelection(prevSelected,optionItem.props.value);if(onChange){onChange(newSelectedValue);}return newSelectedValue});}},[onChange,options,selectionType]);const handleKeyDown=React__namespace.useCallback(event=>{const{key}=event;switch(key){case"ArrowUp":event.preventDefault();focusPreviousItem();return;case"ArrowDown":event.preventDefault();focusNextItem();return;case"Home":event.preventDefault();focusItem(0);return;case"End":event.preventDefault();focusItem(options.length-1);return;case"Enter":case" ":if(focusedIndex<0||key===" "&&disableSpaceSelection){return}event.preventDefault();selectOption(focusedIndex);return}},[disableSpaceSelection,focusNextItem,focusPreviousItem,focusedIndex,options,selectOption]);const handleKeyUp=React__namespace.useCallback(event=>{switch(event.key){case" ":event.preventDefault();return}},[]);const handleFocus=React__namespace.useCallback(()=>{if(!disabled){setIsListboxFocused(true);}},[disabled]);const handleBlur=React__namespace.useCallback(()=>{if(!disabled){setIsListboxFocused(false);}},[disabled]);const handleClick=React__namespace.useCallback(value=>{const index=options.findIndex(item=>item.props.value===value);const isOptionDisabled=options[index].props.disabled;if(disabled||isOptionDisabled){return}focusItem(index);selectOption(index);},[disabled,options,selectOption]);const renderList=React__namespace.useMemo(()=>{return options.map((component,index)=>{const isSingleSelection=selectionType==="single"&&typeof selected==="string";const isSelected=(isSingleSelection?selected===component.props.value:selected?.includes(component.props.value))||false;const optionId=id?`${id}-option-${index}`:`option-${index}`;return React__namespace.cloneElement(component,{key:index,focused:isListboxFocused&&index===focusedIndex,disabled:component.props.disabled||disabled||false,selected:isSelected,variant:selectionType==="single"?"check":"checkbox",parentComponent:"listbox",id:optionId,onToggle:()=>{handleClick(component.props.value);},role:"option"})})},[options,selected,id,isListboxFocused,focusedIndex,disabled,selectionType,handleClick]);return {isListboxFocused,focusedIndex,setFocusedIndex,renderList,setSelected,selected,handleKeyDown,handleKeyUp,handleFocus,handleBlur}}
 
-function useMultipleSelection({
-  inputValue,
-  selected,
-  setSelected
-}) {
-  const [focusedMultiSelectIndex, setFocusedMultiSelectIndex] = React__namespace.useState(-1);
-  const handleKeyDown = React__namespace.useCallback(event => {
-    const {
-      key
-    } = event;
-    if (!Array.isArray(selected) || selected.length === 0) {
-      return;
-    }
-    if (key === "ArrowLeft") {
-      setFocusedMultiSelectIndex(prev => {
-        const newIndex = prev - 1;
-        return newIndex < 0 ? (selected == null ? void 0 : selected.length) - 1 : newIndex;
-      });
-    }
-    if (key === "ArrowRight") {
-      setFocusedMultiSelectIndex(prev => {
-        const newIndex = prev + 1;
-        return newIndex >= (selected == null ? void 0 : selected.length) ? 0 : newIndex;
-      });
-    }
-    if (inputValue === "" && key === "Backspace") {
-      let newSelected = [];
-      if (focusedMultiSelectIndex < 0) {
-        newSelected = selected == null ? void 0 : selected.slice(0, -1);
-      } else {
-        newSelected = selected.filter((_, index) => index !== focusedMultiSelectIndex);
-      }
-      setSelected(newSelected);
-      setFocusedMultiSelectIndex(-1);
-    }
-    if (focusedMultiSelectIndex >= 0 && key === "Enter") {
-      const newSelected = selected == null ? void 0 : selected.filter((_, index) => index !== focusedMultiSelectIndex);
-      setSelected(newSelected);
-      setFocusedMultiSelectIndex(-1);
-    }
-    if (key === "ArrowDown" || key === "ArrowUp") {
-      setFocusedMultiSelectIndex(-1);
-    }
-    if (key === "Escape") {
-      setFocusedMultiSelectIndex(-1);
-    }
-  }, [focusedMultiSelectIndex, inputValue, selected, setSelected]);
-  return {
-    focusedMultiSelectIndex,
-    handleKeyDown
-  };
-}
+function useMultipleSelection({inputValue,selected,setSelected}){const[focusedMultiSelectIndex,setFocusedMultiSelectIndex]=React__namespace.useState(-1);const handleKeyDown=React__namespace.useCallback(event=>{const{key}=event;if(!Array.isArray(selected)||selected.length===0){return}if(key==="ArrowLeft"){setFocusedMultiSelectIndex(prev=>{const newIndex=prev-1;return newIndex<0?selected?.length-1:newIndex});}if(key==="ArrowRight"){setFocusedMultiSelectIndex(prev=>{const newIndex=prev+1;return newIndex>=selected?.length?0:newIndex});}if(inputValue===""&&key==="Backspace"){let newSelected=[];if(focusedMultiSelectIndex<0){newSelected=selected?.slice(0,-1);}else {newSelected=selected.filter((_,index)=>index!==focusedMultiSelectIndex);}setSelected(newSelected);setFocusedMultiSelectIndex(-1);}if(focusedMultiSelectIndex>=0&&key==="Enter"){const newSelected=selected?.filter((_,index)=>index!==focusedMultiSelectIndex);setSelected(newSelected);setFocusedMultiSelectIndex(-1);}if(key==="ArrowDown"||key==="ArrowUp"){setFocusedMultiSelectIndex(-1);}if(key==="Escape"){setFocusedMultiSelectIndex(-1);}},[focusedMultiSelectIndex,inputValue,selected,setSelected]);return {focusedMultiSelectIndex,handleKeyDown}}
 
-const StyledSpan = wonderBlocksCore.addStyle("span");
-function ComboboxLiveRegion({
-  focusedIndex,
-  focusedMultiSelectIndex,
-  labels = {
-    closedState: defaultComboboxLabels.closedState,
-    liveRegionCurrentItem: defaultComboboxLabels.liveRegionCurrentItem,
-    liveRegionListboxTotal: defaultComboboxLabels.liveRegionListboxTotal,
-    liveRegionMultipleSelectionTotal: defaultComboboxLabels.liveRegionMultipleSelectionTotal,
-    noItems: defaultComboboxLabels.noItems,
-    selected: defaultComboboxLabels.selected,
-    selectionCleared: defaultComboboxLabels.selectionCleared,
-    unselected: defaultComboboxLabels.unselected
-  },
-  selectedLabels,
-  opened,
-  options,
-  selected,
-  selectionType = "single",
-  testId
-}) {
-  const lastSelectedValue = React__namespace.useRef(null);
-  const [message, setMessage] = React__namespace.useState("");
-  React__namespace.useEffect(() => {
-    if (selected && selected !== (lastSelectedValue == null ? void 0 : lastSelectedValue.current)) {
-      var _lastSelectedValue$cu, _lastSelectedValue$cu2, _selected$length;
-      let newMessage = "";
-      const lastSelectedLength = (_lastSelectedValue$cu = lastSelectedValue == null || (_lastSelectedValue$cu2 = lastSelectedValue.current) == null ? void 0 : _lastSelectedValue$cu2.length) != null ? _lastSelectedValue$cu : 0;
-      const selectedLength = (_selected$length = selected == null ? void 0 : selected.length) != null ? _selected$length : 0;
-      if (Array.isArray(selected) && selected.length > 0) {
-        const currentLabels = selectedLabels.join(", ");
-        const selectedState = selectedLength > lastSelectedLength ? labels.selected(currentLabels) : labels.unselected(currentLabels);
-        newMessage = selectedState;
-      } else {
-        newMessage = labels.selected(selectedLabels[0]);
-      }
-      setMessage(newMessage);
-    }
-    if (selectionType === "single" && !selected && lastSelectedValue.current) {
-      setMessage(labels.selectionCleared);
-    }
-    lastSelectedValue.current = selected;
-    if (selectionType === "multiple" && !opened) {
-      setMessage(labels.closedState);
-    }
-  }, [labels, labels.closedState, selectedLabels, opened, selected, selectionType]);
-  const focusedElementDescription = React__namespace.useMemo(() => {
-    if (focusedMultiSelectIndex >= 0) {
-      const _label = selectedLabels[focusedMultiSelectIndex];
-      return labels.liveRegionCurrentItem({
-        current: _label,
-        focused: true,
-        index: focusedMultiSelectIndex,
-        total: selectedLabels.length
-      }) + " " + labels.liveRegionMultipleSelectionTotal(selectedLabels.length);
-    }
-    if (options.length === 0) {
-      return labels.noItems;
-    }
-    if (focusedIndex < 0 || !options[focusedIndex]) {
-      return "";
-    }
-    const currentItemProps = options[focusedIndex].props;
-    const label = getLabel(currentItemProps);
-    const totalResults = options.length;
-    return labels.liveRegionCurrentItem({
-      current: label,
-      disabled: currentItemProps.disabled,
-      focused: false,
-      index: focusedIndex,
-      selected: currentItemProps.selected,
-      total: totalResults
-    }) + " " + labels.liveRegionListboxTotal(totalResults);
-  }, [focusedIndex, focusedMultiSelectIndex, labels, options, selectedLabels]);
-  return React__namespace.createElement(StyledSpan, {
-    role: "log",
-    "aria-live": "polite",
-    "aria-atomic": "false",
-    "aria-relevant": "additions text",
-    style: styles$3.srOnly,
-    "data-testid": testId ? `${testId}-status` : undefined
-  }, opened ? focusedElementDescription : message);
-}
-const styles$3 = aphrodite.StyleSheet.create({
-  srOnly: {
-    border: 0,
-    clip: "rect(0,0,0,0)",
-    height: 1,
-    margin: -1,
-    overflow: "hidden",
-    padding: 0,
-    position: "absolute",
-    width: 1
-  }
-});
+const StyledSpan=wonderBlocksCore.addStyle("span");function ComboboxLiveRegion({focusedIndex,focusedMultiSelectIndex,labels={closedState:defaultComboboxLabels.closedState,liveRegionCurrentItem:defaultComboboxLabels.liveRegionCurrentItem,liveRegionListboxTotal:defaultComboboxLabels.liveRegionListboxTotal,liveRegionMultipleSelectionTotal:defaultComboboxLabels.liveRegionMultipleSelectionTotal,noItems:defaultComboboxLabels.noItems,selected:defaultComboboxLabels.selected,selectionCleared:defaultComboboxLabels.selectionCleared,unselected:defaultComboboxLabels.unselected},selectedLabels,opened,options,selected,selectionType="single",testId}){const lastSelectedValue=React__namespace.useRef(null);const[message,setMessage]=React__namespace.useState("");React__namespace.useEffect(()=>{if(selected&&selected!==lastSelectedValue?.current){let newMessage="";const lastSelectedLength=lastSelectedValue?.current?.length??0;const selectedLength=selected?.length??0;if(Array.isArray(selected)&&selected.length>0){const currentLabels=selectedLabels.join(", ");const selectedState=selectedLength>lastSelectedLength?labels.selected(currentLabels):labels.unselected(currentLabels);newMessage=selectedState;}else {newMessage=labels.selected(selectedLabels[0]);}setMessage(newMessage);}if(selectionType==="single"&&!selected&&lastSelectedValue.current){setMessage(labels.selectionCleared);}lastSelectedValue.current=selected;if(selectionType==="multiple"&&!opened){setMessage(labels.closedState);}},[labels,labels.closedState,selectedLabels,opened,selected,selectionType]);const focusedElementDescription=React__namespace.useMemo(()=>{if(focusedMultiSelectIndex>=0){const label=selectedLabels[focusedMultiSelectIndex];return labels.liveRegionCurrentItem({current:label,focused:true,index:focusedMultiSelectIndex,total:selectedLabels.length})+" "+labels.liveRegionMultipleSelectionTotal(selectedLabels.length)}if(options.length===0){return labels.noItems}if(focusedIndex<0||!options[focusedIndex]){return ""}const currentItemProps=options[focusedIndex].props;const label=getLabel(currentItemProps);const totalResults=options.length;return labels.liveRegionCurrentItem({current:label,disabled:currentItemProps.disabled,focused:false,index:focusedIndex,selected:currentItemProps.selected,total:totalResults})+" "+labels.liveRegionListboxTotal(totalResults)},[focusedIndex,focusedMultiSelectIndex,labels,options,selectedLabels]);return jsxRuntime.jsx(StyledSpan,{role:"log","aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text",style:styles$3.srOnly,"data-testid":testId?`${testId}-status`:undefined,children:opened?focusedElementDescription:message})}const styles$3=aphrodite.StyleSheet.create({srOnly:{border:0,clip:"rect(0,0,0,0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}});
 
-const MultipleSelection = React__namespace.memo(function SelectedPills({
-  disabled,
-  focusedMultiSelectIndex,
-  id,
-  labels,
-  onRemove,
-  removeSelectedLabel,
-  selected,
-  testId
-}) {
-  return React__namespace.createElement(wonderBlocksCore.View, {
-    role: "group",
-    style: styles$2.pillsWrapper,
-    id: id
-  }, selected.map((value, index) => {
-    const label = labels[index];
-    const focused = index === focusedMultiSelectIndex;
-    const uniqueId = id + index;
-    return React__namespace.createElement(Pill__default["default"], {
-      id: uniqueId,
-      key: uniqueId,
-      testId: testId ? `${testId}-pill-${index}` : undefined,
-      size: "small",
-      style: [styles$2.pill, focused && styles$2.pillFocused],
-      kind: focused ? "info" : "neutral",
-      "aria-label": removeSelectedLabel(label),
-      tabIndex: -1,
-      onClick: () => onRemove(value)
-    }, React__namespace.createElement(React__namespace.Fragment, null, label, !disabled && React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-      icon: xIcon__default["default"],
-      size: "small"
-    })));
-  }));
-});
-const styles$2 = aphrodite.StyleSheet.create({
-  pillsWrapper: {
-    flexDirection: "row",
-    flexWrap: "wrap"
-  },
-  pill: {
-    fontSize: wonderBlocksTokens.font.size.small,
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBlockStart: wonderBlocksTokens.spacing.xxxSmall_4,
-    marginInlineEnd: wonderBlocksTokens.spacing.xxxSmall_4,
-    paddingInlineEnd: wonderBlocksTokens.spacing.xxxSmall_4
-  },
-  pillFocused: {
-    outline: `1px solid ${wonderBlocksTokens.semanticColor.focus.outer}`
-  }
-});
+const MultipleSelection=React__namespace.memo(function SelectedPills({disabled,focusedMultiSelectIndex,id,labels,onRemove,removeSelectedLabel,selected,testId}){return jsxRuntime.jsx(wonderBlocksCore.View,{role:"group",style:styles$2.pillsWrapper,id:id,children:selected.map((value,index)=>{const label=labels[index];const focused=index===focusedMultiSelectIndex;const uniqueId=id+index;return jsxRuntime.jsx(Pill__default["default"],{id:uniqueId,testId:testId?`${testId}-pill-${index}`:undefined,size:"small",style:[styles$2.pill,focused&&styles$2.pillFocused],kind:focused?"info":"neutral","aria-label":removeSelectedLabel(label),tabIndex:-1,onClick:()=>onRemove(value),children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[label,!disabled&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:xIcon__default["default"],size:"small"})]})},uniqueId)})})});const styles$2=aphrodite.StyleSheet.create({pillsWrapper:{flexDirection:"row",flexWrap:"wrap"},pill:{fontSize:wonderBlocksTokens.font.size.small,justifyContent:"space-between",alignItems:"center",marginBlockStart:wonderBlocksTokens.spacing.xxxSmall_4,marginInlineEnd:wonderBlocksTokens.spacing.xxxSmall_4,paddingInlineEnd:wonderBlocksTokens.spacing.xxxSmall_4},pillFocused:{outline:`1px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}});
 
-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 != null ? 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 == null || onChange(selected);
-    }
-  }, [onChange, selected, value]);
-  return React__namespace.createElement(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
-  }, 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 React__namespace.createElement(StandaloneListbox, props);
-  }
-  return React__namespace.createElement(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);
-}
-const theme$1 = {
-  listbox: {
-    color: {
-      disabled: {
-        foreground: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground
-      }
-    }
-  }
-};
-const styles$1 = aphrodite.StyleSheet.create({
-  listbox: {
-    outline: "none"
-  },
-  disabled: {
-    color: theme$1.listbox.color.disabled.foreground
-  }
-});
+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 theme$1={listbox:{color:{disabled:{foreground:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground}}}};const styles$1=aphrodite.StyleSheet.create({listbox:{outline:"none"},disabled:{color:theme$1.listbox.color.disabled.foreground}});
 
-function Combobox({
-  autoComplete,
-  children,
-  disabled,
-  error,
-  id,
-  labels = defaultComboboxLabels,
-  onChange,
-  onToggle,
-  opened,
-  placeholder,
-  selectionType = "single",
-  startIcon,
-  testId,
-  value = ""
-}) {
-  var _renderList$find, _renderList$focusedIn;
-  const generatedUniqueId = React.useId();
-  const uniqueId = id != null ? id : generatedUniqueId;
-  const comboboxRef = React__namespace.useRef(null);
-  const rootNodeRef = React__namespace.useRef(null);
-  const [open, setOpen] = React__namespace.useState(opened != null ? 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 = renderList.find(item => item.props.value === selected)) == null ? void 0 : _renderList$find.props;
-  const labelFromSelected = itemFromSelected ? getLabel(itemFromSelected) : "";
-  const initialValue = typeof value === "string" ? labelFromSelected : "";
-  const [inputValue, setInputValue] = React__namespace.useState(initialValue);
-  const {
-    focusedMultiSelectIndex,
-    handleKeyDown: handleMultipleSelectionKeyDown
-  } = useMultipleSelection({
-    inputValue,
-    selected,
-    setSelected
-  });
-  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 != null ? selectedLabel : "");
-      }
-      setCurrentOptions(children);
-    }
-    onToggle == null || onToggle(newState);
-  }, [children, disabled, isControlled, labelFromSelected, onToggle, openState, selectionType, setFocusedIndex]);
-  const handleChange = React__namespace.useCallback(value => {
-    if (value !== valueState) {
-      setSelectedValue(value);
-      onChange == null || onChange(value);
-    }
-    if (selectionType === "single" && typeof value === "string") {
-      var _renderList$find2;
-      const itemFromSelected = (_renderList$find2 = renderList.find(item => item.props.value === value)) == null ? void 0 : _renderList$find2.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 handleOnRemove = React__namespace.useCallback(value => {
-    const selectedValues = selected;
-    const newValues = selectedValues.filter(selectedValue => selectedValue !== value);
-    setSelected(newValues);
-  }, [selected, setSelected]);
-  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 => {
-    var _comboboxRef$current;
-    e.stopPropagation();
-    setInputValue("");
-    setSelected("");
-    onChange == null || onChange("");
-    (_comboboxRef$current = comboboxRef.current) == null || _comboboxRef$current.focus();
-  }, [onChange, setSelected]);
-  React__namespace.useEffect(() => {
-    if (openState) {
-      var _comboboxRef$current2;
-      (_comboboxRef$current2 = comboboxRef.current) == null || _comboboxRef$current2.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 == null ? void 0 : item.props) : "";
-      });
-    }
-    return [labelFromSelected];
-  }, [children, labelFromSelected, selected]);
-  const maybeRenderStartIcon = () => {
-    var _startIcon$props$colo;
-    if (!startIcon) {
-      return null;
-    }
-    const startIconElement = React__namespace.cloneElement(startIcon, _extends__default["default"]({
-      size: "small"
-    }, startIcon.props, {
-      color: disabled ? wonderBlocksTokens.semanticColor.icon.disabled : (_startIcon$props$colo = startIcon.props.color) != null ? _startIcon$props$colo : wonderBlocksTokens.semanticColor.icon.primary
-    }));
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles.iconWrapper
-    }, startIconElement);
-  };
-  const pillIdPrefix = `${uniqueId}-pill-`;
-  const textFieldId = React.useId();
-  const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null || (_renderList$focusedIn = _renderList$focusedIn.props) == null ? void 0 : _renderList$focusedIn.id : pillIdPrefix + focusedMultiSelectIndex;
-  const controlledWidget = !openState ? undefined : focusedIndex >= 0 ? uniqueId : pillIdPrefix;
-  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
-    onClick: () => {
-      updateOpenState(true);
-    },
-    ref: rootNodeRef,
-    style: [styles.wrapper, isListboxFocused && styles.focused, disabled && styles.disabled, !disabled && error && styles.error]
-  }, React__namespace.createElement(ComboboxLiveRegion, {
-    focusedIndex: focusedIndex,
-    focusedMultiSelectIndex: focusedMultiSelectIndex,
-    labels: labels,
-    options: renderList,
-    selectedLabels: selectedLabels,
-    testId: testId,
-    opened: openState,
-    selected: selected,
-    selectionType: selectionType
-  }), selectionType === "multiple" && Array.isArray(selected) && React__namespace.createElement(MultipleSelection, {
-    labels: selectedLabels,
-    focusedMultiSelectIndex: focusedMultiSelectIndex,
-    id: pillIdPrefix,
-    selected: selected,
-    onRemove: handleOnRemove,
-    disabled: disabled,
-    testId: testId,
-    removeSelectedLabel: labels.removeSelected
-  }), maybeRenderStartIcon(), React__namespace.createElement(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 && React__namespace.createElement(IconButton__default["default"], {
-    icon: xIcon__default["default"],
-    onClick: handleClearClick,
-    actionType: "neutral",
-    kind: "tertiary",
-    size: "small",
-    style: [styles.button, styles.clearButton],
-    "aria-label": labels.clearSelection,
-    testId: testId ? `${testId}-clear` : undefined
-  }), React__namespace.createElement(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: "small",
-    style: [styles.button, openState && styles.buttonOpen],
-    tabIndex: -1,
-    "aria-controls": uniqueId,
-    "aria-expanded": openState,
-    "aria-label": labels.comboboxButton
-  })), openState && React__namespace.createElement(DropdownPopper, {
-    alignment: "left",
-    referenceElement: rootNodeRef == null ? void 0 : rootNodeRef.current
-  }, isReferenceHidden => {
-    var _rootNodeRef$current, _rootNodeRef$current2;
-    return React__namespace.createElement(React__namespace.Fragment, null, renderList.length === 0 ? React__namespace.createElement(wonderBlocksCell.DetailCell, {
-      title: labels.noItems,
-      style: [styles.listbox, {
-        minWidth: rootNodeRef == null || (_rootNodeRef$current = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current.offsetWidth
-      }],
-      horizontalRule: "none"
-    }) : React__namespace.createElement(Listbox, {
-      id: uniqueId,
-      tabIndex: -1,
-      selectionType: selectionType,
-      style: [styles.listbox, isReferenceHidden && styles.hidden, {
-        minWidth: rootNodeRef == null || (_rootNodeRef$current2 = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current2.offsetWidth
-      }],
-      testId: testId ? `${testId}-listbox` : undefined,
-      "aria-label": labels.listbox,
-      "aria-labelledby": textFieldId
-    }, renderList));
-  }));
-}
-const theme = {
-  combobox: {
-    color: {
-      default: {
-        border: wonderBlocksTokens.semanticColor.border.strong,
-        background: wonderBlocksTokens.semanticColor.surface.primary
-      },
-      focus: {
-        border: wonderBlocksTokens.semanticColor.focus.outer,
-        background: wonderBlocksTokens.semanticColor.surface.primary
-      },
-      disabled: {
-        border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
-        background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background,
-        foreground: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground
-      },
-      error: {
-        border: wonderBlocksTokens.semanticColor.status.critical.foreground,
-        background: wonderBlocksTokens.semanticColor.status.critical.background,
-        foreground: wonderBlocksTokens.semanticColor.text.primary
-      }
-    }
-  },
-  listbox: {
-    color: {
-      default: {
-        background: wonderBlocksTokens.semanticColor.surface.primary,
-        border: wonderBlocksTokens.semanticColor.border.primary
-      }
-    }
-  }
-};
-const styles = aphrodite.StyleSheet.create({
-  wrapper: {
-    flexDirection: "row",
-    alignItems: "center",
-    width: "100%",
-    maxWidth: "100%",
-    flexWrap: "wrap",
-    background: theme.combobox.color.default.background,
-    borderRadius: wonderBlocksTokens.border.radius.radius_040,
-    border: `solid 1px ${theme.combobox.color.default.border}`,
-    paddingInline: wonderBlocksTokens.spacing.xSmall_8
-  },
-  focused: {
-    background: theme.combobox.color.focus.background,
-    border: `1px solid ${theme.combobox.color.focus.border}`
-  },
-  disabled: {
-    background: theme.combobox.color.disabled.background,
-    border: `1px solid ${theme.combobox.color.disabled.border}`,
-    color: theme.combobox.color.disabled.foreground
-  },
-  error: {
-    background: theme.combobox.color.error.background,
-    border: `1px solid ${theme.combobox.color.error.border}`,
-    color: theme.combobox.color.error.foreground
-  },
-  combobox: {
-    appearance: "none",
-    background: "none",
-    border: "none",
-    outline: "none",
-    padding: 0,
-    minWidth: wonderBlocksTokens.spacing.xxxSmall_4,
-    width: "auto",
-    display: "inline-grid",
-    gridArea: "1 / 2",
-    ":focus-visible": {
-      outline: "none",
-      border: "none"
-    }
-  },
-  listbox: {
-    backgroundColor: theme.listbox.color.default.background,
-    borderRadius: wonderBlocksTokens.border.radius.radius_040,
-    border: `solid ${wonderBlocksTokens.border.width.thin} ${theme.listbox.color.default.border}`,
-    boxShadow: `0px ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0px ${wonderBlocksTokens.color.offBlack8}`,
-    maxHeight: "var(--popper-max-height)",
-    overflowY: "auto"
-  },
-  hidden: {
-    pointerEvents: "none",
-    visibility: "hidden"
-  },
-  button: {
-    position: "absolute",
-    right: wonderBlocksTokens.spacing.xxxSmall_4,
-    top: wonderBlocksTokens.spacing.xxxSmall_4,
-    margin: 0
-  },
-  buttonOpen: {
-    transform: "rotate(180deg)"
-  },
-  clearButton: {
-    right: wonderBlocksTokens.spacing.xLarge_32 + wonderBlocksTokens.spacing.xSmall_8
-  },
-  iconWrapper: {
-    padding: wonderBlocksTokens.spacing.xxxSmall_4,
-    minWidth: "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{focusedMultiSelectIndex,handleKeyDown:handleMultipleSelectionKeyDown}=useMultipleSelection({inputValue,selected,setSelected});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 handleOnRemove=React__namespace.useCallback(value=>{const selectedValues=selected;const newValues=selectedValues.filter(selectedValue=>selectedValue!==value);setSelected(newValues);},[selected,setSelected]);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.icon.disabled:startIcon.props.color??wonderBlocksTokens.semanticColor.icon.primary});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:handleOnRemove,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:"small",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:"small",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(jsxRuntime.Fragment,{children:renderList.length===0?jsxRuntime.jsx(wonderBlocksCell.DetailCell,{title:labels.noItems,style:[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 theme={combobox:{color:{default:{border:wonderBlocksTokens.semanticColor.border.strong,background:wonderBlocksTokens.semanticColor.surface.primary},focus:{border:wonderBlocksTokens.semanticColor.focus.outer,background:wonderBlocksTokens.semanticColor.surface.primary},disabled:{border:wonderBlocksTokens.semanticColor.action.secondary.disabled.border,background:wonderBlocksTokens.semanticColor.action.secondary.disabled.background,foreground:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground},error:{border:wonderBlocksTokens.semanticColor.status.critical.foreground,background:wonderBlocksTokens.semanticColor.status.critical.background,foreground:wonderBlocksTokens.semanticColor.text.primary}}},listbox:{color:{default:{background:wonderBlocksTokens.semanticColor.surface.primary,border:wonderBlocksTokens.semanticColor.border.primary}}}};const styles=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"center",width:"100%",maxWidth:"100%",flexWrap:"wrap",background:theme.combobox.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid 1px ${theme.combobox.color.default.border}`,paddingInline:wonderBlocksTokens.spacing.xSmall_8},focused:{background:theme.combobox.color.focus.background,border:`1px solid ${theme.combobox.color.focus.border}`},disabled:{background:theme.combobox.color.disabled.background,border:`1px solid ${theme.combobox.color.disabled.border}`,color:theme.combobox.color.disabled.foreground},error:{background:theme.combobox.color.error.background,border:`1px solid ${theme.combobox.color.error.border}`,color:theme.combobox.color.error.foreground},combobox:{appearance:"none",background:"none",border:"none",outline:"none",padding:0,minWidth:wonderBlocksTokens.spacing.xxxSmall_4,width:"auto",display:"inline-grid",gridArea:"1 / 2",":focus-visible":{outline:"none",border:"none"}},listbox:{backgroundColor:theme.listbox.color.default.background,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid ${wonderBlocksTokens.border.width.thin} ${theme.listbox.color.default.border}`,boxShadow:`0px ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0px ${wonderBlocksTokens.color.offBlack8}`,maxHeight:"var(--popper-max-height)",overflowY:"auto"},hidden:{pointerEvents:"none",visibility:"hidden"},button:{position:"absolute",right:wonderBlocksTokens.spacing.xxxSmall_4,top:wonderBlocksTokens.spacing.xxxSmall_4,margin:0},buttonOpen:{transform:"rotate(180deg)"},clearButton:{right:wonderBlocksTokens.spacing.xLarge_32+wonderBlocksTokens.spacing.xSmall_8},iconWrapper:{padding:wonderBlocksTokens.spacing.xxxSmall_4,minWidth:"auto"}});
 
 exports.ActionItem = ActionItem;
 exports.ActionMenu = ActionMenu;