@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/combobox/index.js

@@ -1,30 +1,54 @@
-import { useProviderProps, useTheme } from "../provider/index.js";
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ComboBox.tsx
+import { a as useProviderProps } from "../_chunk/provider.js";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs, t as assignRef } from "../_chunk/spectrum-context.js";
-import { CenterBaseline } from "../icon/center-baseline.js";
-import { pressScale } from "../pressScale.js";
+import { t as s2IntlStrings } from "../_chunk/intl.js";
 import { a as useIsInForm, i as useFormProps, r as FormContext } from "../_chunk/form.js";
-/* empty css                                                                               */
-import { t as Checkmark } from "../_chunk/Checkmark.js";
+import { t as HelpText } from "../_chunk/HelpText.js";
+import { CenterBaseline, centerBaseline } from "../icon/center-baseline.js";
+import { pressScale } from "../pressScale.js";
+import { t as IconContext } from "../_chunk/spectrum-icon.js";
+import { AvatarContext } from "../avatar/index.js";
+import { c as TextContext$1, o as HeaderContext, u as HeadingContext } from "../_chunk/text.js";
+import { _ as menuSectionHeading, d as menuItemIconCenterWrapper, p as menuItemLabel, s as menuItemDescription, u as menuItemIcon } from "../_chunk/s2-menu-styles.js";
 import { t as Chevron } from "../_chunk/Chevron.js";
+import { Popover as Popover$1 } from "../popover/index.js";
+import { t as Checkmark } from "../_chunk/Checkmark.js";
 import { t as AlertTriangleIcon } from "../_chunk/AlertTriangleIcon.js";
-import { t as Asterisk } from "../_chunk/macro-83d341382c2b3adbe4d61fd2d4cbcef9c975a50a2015d8b838b815a76d3721ad.js";
-/* empty css                                                                               */
+import { t as Asterisk } from "../_chunk/macro-d2704bd5d9b60d26ff1e50aa3db378885d30e50caf8dc7b31cfaf5dd36a09d85.js";
 /* empty css                                                                               */
 /* empty css                                                                               */
 /* empty css                                                                               */
 /* empty css                                                                               */
 /* empty css                                                                               */
 import { Divider } from "../divider/index.js";
-import { n as PrefixInputProvider, t as FieldPrefix } from "../_chunk/macro-4c350293382b43f3939cd4c2bbd6c7c1c18de5a45cd1a00695dffc1eba819d91.js";
-/* empty css                                                                               */
+import { n as PrefixInputProvider, t as FieldPrefix } from "../_chunk/prefix.js";
 /* empty css                                                                               */
+import { ProgressCircle } from "../progress/ProgressCircle.js";
+import { t as createMediaQuery } from "../_chunk/createMediaQuery.js";
 /* empty css                                                                               */
-import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, template, use } from "solid-js/web";
-import { Show, createContext, createEffect, createSignal, createUniqueId, mergeProps as mergeProps$1, onCleanup, splitProps, useContext } from "solid-js";
-import { createHover } from "@proyecto-viviana/solidaria";
-import { ComboBox as ComboBox$1, ComboBoxButton as ComboBoxButton$1, ComboBoxContext as ComboBoxContext$1, ComboBoxDescription, ComboBoxErrorMessage, ComboBoxInput as ComboBoxInput$1, ComboBoxLabel, ComboBoxListBox as ComboBoxListBox$1, ComboBoxOption as ComboBoxOption$1, ComboBoxTag as ComboBoxTag$1, ComboBoxTagGroup as ComboBoxTagGroup$1, ListBoxSection, Popover, defaultContainsFilter } from "@proyecto-viviana/solidaria-components";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, readShallow, ref, runHydrationEvents, scope, setAttribute, spread, template } from "@solidjs/web";
+import { Show, createContext, createMemo, createSignal, createTrackedEffect, createUniqueId, onCleanup, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+import { ComboBox as ComboBox$1, ComboBoxButton as ComboBoxButton$1, ComboBoxContext as ComboBoxContext$1, ComboBoxInput as ComboBoxInput$1, ComboBoxLabel, ComboBoxListBox as ComboBoxListBox$1, ComboBoxOption as ComboBoxOption$1, ComboBoxTag as ComboBoxTag$1, ComboBoxTagGroup as ComboBoxTagGroup$1, ListBoxSection, ListLayout, Text, TextContext, Virtualizer, defaultContainsFilter } from "@proyecto-viviana/solidaria-components";
+import { createFocusVisibleListener, createHover, createStringFormatter, getInteractionModality, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
 //#region src/combobox/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<div class=" sd151 Za151 Fb151">`), _tmpl$3 = /*#__PURE__*/ template(`<span class=" _7c151">&nbsp;<!$><!/>`), _tmpl$4 = /*#__PURE__*/ template(`<span>`), _tmpl$5 = /*#__PURE__*/ template(`<span data-slot=contextualHelp>`), _tmpl$6 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$7 = /*#__PURE__*/ template(`<span slot=label data-rsp-slot=text>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div class=" sd17 Za17 Fb17">`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span class=" _7c17">&nbsp;<!$><!/>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<span data-slot=contextualHelp>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
 const ComboBoxSizeContext = createContext("M");
 const ComboBoxContext = createContext(null);
 const comboBoxRoot = function anonymous(props, overrides) {
@@ -37,687 +61,663 @@ const comboBoxRoot = function anonymous(props, overrides) {
 		if (p[1] === "y") gridColumnEnd = true;
 		rules += p[0];
 	}
-	rules += " se151";
+	rules += " se17";
 	if (props.isInForm) {
-		if (!gridColumnStart) rules += " z2mU151";
+		if (!gridColumnStart) rules += " z2mU17";
 	}
 	if (props.isInForm) {
 		if (props.labelPosition === "side") {
-			if (!gridColumnEnd) rules += " yvoofG151";
+			if (!gridColumnEnd) rules += " yvoofG17";
 		}
 	}
-	if (props.isInForm) rules += " DLwlgod151";
-	else if (props.labelPosition === "side") rules += " DPlN5qb151";
-	else if (props.labelPosition === "top") rules += " DM8Mfn151";
-	if (props.labelPosition === "side") rules += " EPlN5qb151";
-	else if (props.labelPosition === "top") rules += " E4w1sLc151";
-	if (props.labelPosition === "side") rules += " CfFpp6c151";
-	else if (props.labelPosition === "top") rules += " C1xyRcb151";
+	if (props.isInForm) rules += " DLwlgod17";
+	else if (props.labelPosition === "side") rules += " DPlN5qb17";
+	else if (props.labelPosition === "top") rules += " DM8Mfn17";
+	if (props.labelPosition === "side") rules += " EPlN5qb17";
+	else if (props.labelPosition === "top") rules += " E4w1sLc17";
+	if (props.labelPosition === "side") rules += " CfFpp6c17";
+	else if (props.labelPosition === "top") rules += " C1xyRcb17";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
-	rules += " ea151";
-	rules += " _Fd151";
-	rules += " _FnuYUweb151";
-	if (props.size === "XL") rules += " -BhX7R-Fz151";
-	else if (props.size === "L") rules += " -BhX7R-Fv151";
-	else if (props.size === "S") rules += " -BhX7R-Fp151";
-	else if (props.size === "XS") rules += " -BhX7R-Fn151";
-	else rules += " -BhX7R-Fx151";
-	rules += " -AJjOLd-UVkF0Db151";
-	rules += " qg151";
-	rules += " __ca151";
+	rules += " ea17";
+	rules += " _Fd17";
+	rules += " _FnuYUweb17";
+	if (props.size === "XL") rules += " -BhX7R-Fz17";
+	else if (props.size === "L") rules += " -BhX7R-Fv17";
+	else if (props.size === "S") rules += " -BhX7R-Fp17";
+	else if (props.size === "XS") rules += " -BhX7R-Fn17";
+	else rules += " -BhX7R-Fx17";
+	rules += " -AJjOLd-UVkF0Db17";
+	rules += " qg17";
+	rules += " __ca17";
 	return rules;
 };
 const comboBoxLabelWrapper = function anonymous(props) {
 	let rules = " ";
-	rules += " zv6x9r151";
-	rules += " yv6x9r151";
-	rules += " Bv6x9r151";
-	rules += " Av6x9r151";
-	rules += " sf151";
-	if (props.labelAlign === "end") rules += " _Wb151";
-	else if (props.labelAlign === "start") rules += " _Wd151";
-	if (props.labelPosition === "top") rules += " QgOnRt151";
-	if (props.labelPosition === "top") rules += " _qb151";
+	rules += " zv6x9r17";
+	rules += " yv6x9r17";
+	rules += " Bv6x9r17";
+	rules += " Av6x9r17";
+	rules += " sf17";
+	if (props.labelAlign === "end") rules += " _Wb17";
+	else if (props.labelAlign === "start") rules += " _Wd17";
+	if (props.labelPosition === "top") rules += " QgOnRt17";
+	if (props.labelPosition === "top") rules += " _qb17";
 	return rules;
 };
 const comboBoxLabel = function anonymous(props) {
 	let rules = " ";
-	rules += " uxe7h4151";
+	rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
 	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "XS") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	}
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	if (props.isStaticColor) rules += " pl151";
-	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
-	rules += " plb151";
-	rules += " ri151";
+	if (props.isStaticColor) rules += " pl17";
+	else if (props.isDisabled) rules += " p8H6Pad17";
+	else rules += " ptacXCd17";
+	rules += " plb17";
+	rules += " ri17";
 	return rules;
 };
 const comboBoxFieldGroup = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " uxe7h4151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
-	rules += " xb151";
-	rules += " _xa151";
+	rules += " xb17";
+	rules += " _xa17";
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
 	if (props.isDisabled) {
-		rules += " pUvnvv151";
-		rules += " plc151";
+		rules += " p8H6Pad17";
+		rules += " plc17";
 	} else {
-		if (props.isPressed) rules += " pMwyHo151";
-		else if (props.isFocusVisible) rules += " pMwyHo151";
-		else if (props.isHovered) rules += " pMwyHo151";
-		else rules += " pHKLAu151";
-		rules += " plb151";
+		if (props.isPressed) rules += " pBJTC6c17";
+		else if (props.isFocusVisible) rules += " pBJTC6c17";
+		else if (props.isHovered) rules += " pBJTC6c17";
+		else rules += " pmiKvLd17";
+		rules += " plb17";
 	}
-	rules += " sd151";
-	rules += " eb151";
-	rules += " _oa151";
-	rules += " SMBFGYc151";
-	rules += " RfBFGYc151";
-	if (props.size === "XL") rules += " Nl151";
-	else if (props.size === "L") rules += " Nj151";
-	else if (props.size === "S") rules += " Nf151";
-	else if (props.size === "XS") rules += " Ne151";
-	else rules += " Nk151";
-	rules += " ob151";
-	rules += " nb151";
-	rules += " kb151";
-	rules += " jb151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mCPFGYc151";
-	rules += " l5OFGYc151";
-	rules += " _jf151";
+	rules += " sd17";
+	rules += " eb17";
+	rules += " _oa17";
+	rules += " SMBFGYc17";
+	rules += " RfBFGYc17";
+	if (props.size === "XL") rules += " Nl17";
+	else if (props.size === "L") rules += " Nj17";
+	else if (props.size === "S") rules += " Nf17";
+	else if (props.size === "XS") rules += " Ne17";
+	else rules += " Nk17";
+	rules += " ob17";
+	rules += " nb17";
+	rules += " kb17";
+	rules += " jb17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mCPFGYc17";
+	rules += " l5OFGYc17";
+	rules += " _jf17";
 	if (props.isDisabled) {
-		rules += " ifbAdGe151";
-		rules += " ilc151";
+		rules += " iSNu3ze17";
+		rules += " ilc17";
 	} else if (props.isFocusWithin) {
-		if (props.isInvalid) rules += " iQxdzb151";
-		else rules += " iMwyHo151";
-		rules += " ild151";
+		if (props.isInvalid) rules += " ilIkJnc17";
+		else rules += " iBJTC6c17";
+		rules += " ild17";
 	} else if (props.isInvalid) {
-		if (props.isPressed) rules += " iQxdzb151";
-		else if (props.isFocusVisible) rules += " iQxdzb151";
-		else if (props.isHovered) rules += " iQxdzb151";
-		else rules += " iYjUhNc151";
-		rules += " ile151";
+		if (props.isPressed) rules += " ilIkJnc17";
+		else if (props.isFocusVisible) rules += " ilIkJnc17";
+		else if (props.isHovered) rules += " ilIkJnc17";
+		else rules += " iuNtkec17";
+		rules += " ile17";
 	} else {
-		rules += " iAv83Hb151";
-		rules += " ila151";
+		rules += " iAv83Hb17";
+		rules += " ila17";
 	}
-	rules += " gHPXipd151";
-	rules += " gl1kG7o151";
-	rules += " _iRvAxPd151";
-	rules += " _ilc151";
-	rules += " __mrmLYsd151";
-	rules += " FRuFGYc151";
-	rules += " zXcEWr151";
-	rules += " yXcEWr151";
-	rules += " BXcEWr151";
-	rules += " AXcEWr151";
-	if (props.isQuiet) rules += " _qd151";
-	else rules += " _qtb151";
-	if (props.size === "XL") rules += " -Anxdcc-Zt151";
-	else if (props.size === "L") rules += " -Anxdcc-ZStdtne151";
-	else if (props.size === "S") rules += " -Anxdcc-Zr151";
-	else rules += " -Anxdcc-Z3fn9H151";
-	rules += " __v6TNLWb151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.isDisabled) rules += " ri151";
-	else rules += " rD151";
-	if (props.size === "XL") rules += " -F_-Fz151";
-	else if (props.size === "L") rules += " -F_-Fv151";
-	else if (props.size === "S") rules += " -F_-Fp151";
-	else if (props.size === "XS") rules += " -F_-Fn151";
-	else rules += " -F_-Fx151";
-	rules += " -S_-Sv151";
-	rules += " -R_-R6sYnSd151";
-	rules += " -m_-mb151";
-	rules += " -l_-lb151";
+	rules += " gHPXipd17";
+	rules += " gl1kG7o17";
+	rules += " _iRvAxPd17";
+	rules += " _ilc17";
+	rules += " __mh0dLcd17";
+	rules += " FRuFGYc17";
+	rules += " zXcEWr17";
+	rules += " yXcEWr17";
+	rules += " BXcEWr17";
+	rules += " AXcEWr17";
+	if (props.isQuiet) rules += " _qd17";
+	else rules += " _qtb17";
+	if (props.size === "XL") rules += " -Anxdcc-Zt17";
+	else if (props.size === "L") rules += " -Anxdcc-ZStdtne17";
+	else if (props.size === "S") rules += " -Anxdcc-Zr17";
+	else rules += " -Anxdcc-Z3fn9H17";
+	rules += " __v6TNLWb17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.isDisabled) rules += " ri17";
+	else rules += " rD17";
+	if (props.size === "XL") rules += " -F_-Fz17";
+	else if (props.size === "L") rules += " -F_-Fv17";
+	else if (props.size === "S") rules += " -F_-Fp17";
+	else if (props.size === "XS") rules += " -F_-Fn17";
+	else rules += " -F_-Fx17";
+	rules += " -S_-Sv17";
+	rules += " -R_-R6sYnSd17";
+	rules += " -m_-mb17";
+	rules += " -l_-lb17";
 	return rules;
 };
-const comboBoxInput = " Td151 Qd151 Sd151 Rd151 g9151 p40ub4c151 pYFIK2bQKeKoe151 pYFIK2blc151 u40ub4c151 v40ub4c151 x40ub4c151 _xa151 _ub151 _vb151 Na151 Za151 _Le151 _je151 _Nc151 Pc151 _Yb151 _7c151";
+const comboBoxInput = " Td17 Qd17 Sd17 Rd17 g917 p40ub4c17 pYFIK2bX85CBd17 pYFIK2blc17 u40ub4c17 v40ub4c17 x40ub4c17 _xa17 _ub17 _vb17 Na17 Za17 _Le17 _je17 _Nc17 Pc17 _Yb17 _7c17";
 const inputButton = function anonymous(props) {
 	let rules = " ";
-	rules += " osmOfn151";
-	rules += " nsmOfn151";
-	rules += " ksmOfn151";
-	rules += " jsmOfn151";
-	rules += " sd151";
-	rules += " _Le151";
-	rules += " _Wa151";
-	rules += " _je151";
-	rules += " eb151";
-	rules += " _Ca151";
-	if (props.size === "XL") rules += " ZC151";
-	else if (props.size === "L") rules += " Zo151";
-	else if (props.size === "M") rules += " Zm151";
-	else if (props.size === "S") rules += " Zu151";
-	if (props.size === "XL") rules += " Fx151";
-	else if (props.size === "L") rules += " Fp151";
-	else if (props.size === "M") rules += " Fn151";
-	else if (props.size === "S") rules += " Ft151";
-	rules += " Iw151";
-	rules += " fa151";
-	rules += " _va151";
-	rules += " Yd151";
-	rules += " Yle151";
-	rules += " Xb151";
-	rules += " Xlb151";
-	rules += " _2b151";
-	rules += " _2lb151";
-	if (props.size === "XL") rules += " uxe7h4151";
-	else if (props.size === "L") rules += " uxe7h4151";
-	else if (props.size === "S") rules += " uxe7h4151";
-	else if (props.size === "XS") rules += " uxe7h4151";
-	else rules += " uxe7h4151";
+	rules += " osmOfn17";
+	rules += " nsmOfn17";
+	rules += " ksmOfn17";
+	rules += " jsmOfn17";
+	rules += " sd17";
+	rules += " _Le17";
+	rules += " _Wa17";
+	rules += " _je17";
+	rules += " eb17";
+	rules += " _Ca17";
+	if (props.size === "XL") rules += " ZC17";
+	else if (props.size === "L") rules += " Zo17";
+	else if (props.size === "M") rules += " Zm17";
+	else if (props.size === "S") rules += " Zu17";
+	if (props.size === "XL") rules += " Fx17";
+	else if (props.size === "L") rules += " Fp17";
+	else if (props.size === "M") rules += " Fn17";
+	else if (props.size === "S") rules += " Ft17";
+	rules += " Iw17";
+	rules += " fa17";
+	rules += " _va17";
+	rules += " Yd17";
+	rules += " Yle17";
+	rules += " Xb17";
+	rules += " Xlb17";
+	rules += " _2b17";
+	rules += " _2lb17";
+	if (props.size === "XL") rules += " uxe7h417";
+	else if (props.size === "L") rules += " uxe7h417";
+	else if (props.size === "S") rules += " uxe7h417";
+	else if (props.size === "XS") rules += " uxe7h417";
+	else rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
 	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "XS") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	}
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isPressed) rules += " pMwyHo151";
-	else if (props.isFocusVisible) rules += " pMwyHo151";
-	else if (props.isHovered) rules += " pMwyHo151";
-	else rules += " pHKLAu151";
-	rules += " pla151";
-	rules += " g9151";
-	if (props.isDisabled) rules += " gld151";
-	else if (props.isOpen) rules += " gle151";
-	else if (props.isHovered) rules += " gle151";
-	else rules += " glc151";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.isPressed) rules += " pBJTC6c17";
+	else if (props.isFocusVisible) rules += " pBJTC6c17";
+	else if (props.isHovered) rules += " pBJTC6c17";
+	else rules += " pmiKvLd17";
+	rules += " pla17";
+	rules += " g917";
+	if (props.isDisabled) rules += " gld17";
+	else if (props.isOpen) rules += " gle17";
+	else if (props.isHovered) rules += " gle17";
+	else rules += " glc17";
 	return rules;
 };
-const comboBoxChevron = " _va151 _Sd151 -_8sjo0b-t5ZbAob151";
+const comboBoxChevron = " _va17 _Sd17 -_8sjo0b-t5ZbAob17";
 const comboBoxListBox = function anonymous(props) {
 	let rules = " ";
-	rules += " Za151";
-	rules += " _oa151";
-	rules += " K40ub4c151";
-	rules += " Pa151";
-	rules += " _Nc151";
-	rules += " uk151";
-	rules += " ucJ9TBTb151";
-	rules += " ud3Euai151";
-	rules += " uea151";
-	rules += " ugb151";
-	rules += " uhd151";
-	rules += " uje151";
-	rules += " u2NhKxcl151";
-	rules += " uic151";
+	rules += " Za17";
+	rules += " _oa17";
+	rules += " K40ub4c17";
+	rules += " Pa17";
+	rules += " _Nc17";
+	rules += " uk17";
+	rules += " ucJ9TBTb17";
+	rules += " ud3Euai17";
+	rules += " uea17";
+	rules += " ugb17";
+	rules += " uhd17";
+	rules += " uje17";
+	rules += " u2NhKxcl17";
+	rules += " uic17";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
-	rules += " _Le151";
-	rules += " Jy151";
-	rules += " Gy151";
-	rules += " Iy151";
-	rules += " Hy151";
-	rules += " Tt151";
-	rules += " Qt151";
-	rules += " St151";
-	rules += " Rt151";
-	rules += " _Gc151";
+	rules += " _Le17";
 	return rules;
 };
-const comboBoxPopover = function anonymous(props) {
+const comboBoxMenuWidth = " NuHSBze17 ZuHSBze17";
+const listboxHeader = function anonymous(props) {
 	let rules = " ";
-	if (props.colorScheme === "dark") rules += " -ICUGx-_pa151";
-	else if (props.colorScheme === "light") rules += " -ICUGx-_pb151";
-	else if (props.colorScheme === "light dark") rules += " -ICUGx-_pc151";
-	rules += " _pK8eoyd151";
-	if (props.colorScheme === "dark") rules += " -NvXmrd-_ZLmU151";
-	else if (props.colorScheme === "light") rules += " -NvXmrd-_ZN8Gi4c151";
-	else if (props.colorScheme === "light dark") {
-		rules += " -NvXmrd-_ZN8Gi4c151";
-		rules += " -NvXmrd-D1v0V_ZLmU151";
-	}
-	if (props.colorScheme === "dark") rules += " -j9blY-_ZN8Gi4c151";
-	else if (props.colorScheme === "light") rules += " -j9blY-_ZLmU151";
-	else if (props.colorScheme === "light dark") {
-		rules += " -j9blY-_ZLmU151";
-		rules += " -j9blY-D1v0V_ZN8Gi4c151";
+	rules += " pmiKvLd17";
+	rules += " _oa17";
+	rules += " MAyFGYc17";
+	rules += " Tu7Fubd17";
+	rules += " Qu7Fubd17";
+	if (props.size === "XL") rules += " I2d3n17";
+	else if (props.size === "L") rules += " IaxPIqb17";
+	else if (props.size === "M") rules += " Ip2UVod17";
+	else if (props.size === "S") rules += " IH8XZ7c17";
+	if (props.size === "XL") rules += " H2d3n17";
+	else if (props.size === "L") rules += " HaxPIqb17";
+	else if (props.size === "M") rules += " Hp2UVod17";
+	else if (props.size === "S") rules += " HH8XZ7c17";
+	if (props.size === "XL") rules += " -M_-Mk17";
+	else if (props.size === "L") rules += " -M_-Mh17";
+	else if (props.size === "S") rules += " -M_-Mg17";
+	else if (props.size === "XS") rules += " -M_-Mf17";
+	else rules += " -M_-Mi17";
+	return rules;
+};
+const comboBoxLoadingWrapper = " z2mU17 yzZKy17 sd17 eb17 _Ca17 Jv17 Gv17";
+const comboBoxProgressCircle = function anonymous(props) {
+	let rules = " ";
+	rules += " ZObNfn17";
+	rules += " FObNfn17";
+	if (props.isInput) {
+		rules += " It17";
+		rules += " Isu17";
 	}
-	rules += " -Ovbhqd-g9ORGnd151";
-	rules += " -Ovbhqd-lga151";
-	rules += " gEzkoQe151";
-	rules += " -Jvcevd-Nbc1hc151";
-	rules += " _nfRoCnb151";
-	rules += " oY4qurc151";
-	rules += " nY4qurc151";
-	rules += " kY4qurc151";
-	rules += " jY4qurc151";
-	rules += " sd151";
-	rules += " Td151";
-	rules += " Qd151";
-	rules += " Sd151";
-	rules += " Rd151";
-	rules += " Ma151";
-	rules += " _Ne151";
-	rules += " Pe151";
-	rules += " _oa151";
-	rules += " _Bb151";
-	rules += " _Lf151";
-	rules += " _Mb151";
-	rules += " OLNnmzc151";
-	rules += " Ola151";
 	return rules;
 };
-const comboBoxOption = function anonymous(props) {
+const comboBoxEmptyStateText = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " uxe7h4151";
+	rules += " FRuFGYc17";
+	if (props.size === "XL") rules += " uxe7h417";
+	else if (props.size === "L") rules += " uxe7h417";
+	else if (props.size === "M") rules += " uxe7h417";
+	else if (props.size === "S") rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
+	} else if (props.size === "M") {
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
-	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
-	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	}
-	rules += " xb151";
-	rules += " _xa151";
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " xb17";
+		rules += " _xa17";
+	} else if (props.size === "M") {
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " xb17";
+		rules += " _xa17";
 	}
-	if (props.isDisabled) {
-		rules += " pUvnvv151";
-		rules += " plc151";
-	} else if (props.isFocused) rules += " p5dxOg151";
-	else if (props.isPressed) rules += " pMwyHo151";
-	else if (props.isFocusVisible) rules += " pMwyHo151";
-	else if (props.isHovered) rules += " pMwyHo151";
-	else rules += " pHKLAu151";
-	rules += " se151";
-	rules += " ea151";
-	rules += " _oa151";
-	rules += " Sd151";
-	rules += " Rd151";
-	if (props.size === "XL") rules += " Nl151";
-	else if (props.size === "L") rules += " Nj151";
-	else if (props.size === "S") rules += " Nf151";
-	else if (props.size === "XS") rules += " Ne151";
-	else rules += " Nk151";
-	rules += " of151";
-	rules += " nf151";
-	rules += " kf151";
-	rules += " jf151";
-	rules += " qh151";
-	rules += " -Qg41Lb-IAxCW0c151";
-	rules += " -Qg41Lb-npkAwdIy151";
-	rules += " MAyFGYc151";
-	rules += " Td151";
-	rules += " QAzEcG151";
-	rules += " -aRvJDd-Tu7Fubd151";
-	rules += " g9151";
-	rules += " _Pc151";
-	rules += " z2mU151";
-	rules += " yzZKy151";
-	rules += " CRen2tc151";
-	if (props.size === "XL") rules += " DTw5ujc151";
-	else if (props.size === "L") rules += " DdpPw4151";
-	else if (props.size === "M") rules += " Dxy3qDe151";
-	else if (props.size === "S") rules += " DfLJE0151";
-	rules += " EpvfBwb151";
-	rules += " EDNKd2dZQmDFe151";
-	rules += " UDNKd2dai5a0151";
-	rules += " FF151";
-	rules += " _Xa151";
-	if (props.isDisabled) rules += " ri151";
-	else if (props.isLink) rules += " ry151";
-	else rules += " ri151";
-	rules += " Yg151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.size === "XL") rules += " -M_-Mk151";
-	else if (props.size === "L") rules += " -M_-Mh151";
-	else if (props.size === "S") rules += " -M_-Mg151";
-	else if (props.size === "XS") rules += " -M_-Mf151";
-	else rules += " -M_-Mi151";
+	if (props.size === "XL") {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	} else if (props.size === "L") {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	} else if (props.size === "M") {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	} else if (props.size === "S") {
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
+	}
+	if (props.size === "XL") rules += " pmiKvLd17";
+	else if (props.size === "L") rules += " pmiKvLd17";
+	else if (props.size === "M") rules += " pmiKvLd17";
+	else if (props.size === "S") rules += " pmiKvLd17";
+	rules += " sd17";
+	rules += " eb17";
+	rules += " Sv17";
+	if (props.size === "XL") rules += " -F_-Fz17";
+	else if (props.size === "L") rules += " -F_-Fv17";
+	else if (props.size === "M") rules += " -F_-Fx17";
+	else if (props.size === "S") rules += " -F_-Fp17";
 	return rules;
 };
-const comboBoxOptionLabel = function anonymous(props) {
+const LOADER_ROW_HEIGHTS = {
+	S: {
+		medium: 24,
+		large: 30
+	},
+	M: {
+		medium: 32,
+		large: 40
+	},
+	L: {
+		medium: 40,
+		large: 50
+	},
+	XL: {
+		medium: 48,
+		large: 60
+	}
+};
+const comboBoxOption = function anonymous(props) {
 	let rules = " ";
-	rules += " zv6x9r151";
-	rules += " yv6x9r151";
-	rules += " Bv6x9r151";
-	rules += " Av6x9r151";
-	rules += " sb151";
-	rules += " _ub151";
-	if (props.size === "XL") rules += " uxe7h4151";
-	else if (props.size === "L") rules += " uxe7h4151";
-	else if (props.size === "S") rules += " uxe7h4151";
-	else if (props.size === "XS") rules += " uxe7h4151";
-	else rules += " uxe7h4151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
-	rules += " xc151";
-	rules += " _xa151";
+	rules += " xb17";
+	rules += " _xa17";
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	rules += " p40ub4c151";
-	rules += " JAzEcG151";
-	rules += " _Nc151";
-	rules += " Pc151";
-	rules += " _Yb151";
-	rules += " _7c151";
-	return rules;
-};
-const comboBoxCheckmark = function anonymous(props) {
-	let rules = " ";
-	rules += " z2CW8rb151";
-	rules += " y2CW8rb151";
-	rules += " B2CW8rb151";
-	rules += " A2CW8rb151";
-	if (props.isSelected) rules += " _6c151";
-	else rules += " _6b151";
-	if (props.isPressed) rules += " pOzYCcc151";
-	else if (props.isFocusVisible) rules += " pOzYCcc151";
-	else if (props.isHovered) rules += " pOzYCcc151";
-	else rules += " p5dxOg151";
-	rules += " Hw151";
-	rules += " fa151";
-	rules += " _va151";
-	rules += " -_8sjo0b-t5ZbAob151";
-	if (props.isFocused) rules += " -_8sjo0b-lt8pvGJ151";
-	else rules += " -_8sjo0b-lta151";
+	if (props.isDisabled) {
+		rules += " p8H6Pad17";
+		rules += " plc17";
+	} else if (props.isFocused) rules += " pwOLUue17";
+	else if (props.isPressed) rules += " pBJTC6c17";
+	else if (props.isFocusVisible) rules += " pBJTC6c17";
+	else if (props.isHovered) rules += " pBJTC6c17";
+	else rules += " pmiKvLd17";
+	rules += " se17";
+	rules += " ea17";
+	rules += " _oa17";
+	rules += " Sd17";
+	rules += " Rd17";
+	if (props.size === "XL") rules += " Nl17";
+	else if (props.size === "L") rules += " Nj17";
+	else if (props.size === "S") rules += " Nf17";
+	else if (props.size === "XS") rules += " Ne17";
+	else rules += " Nk17";
+	rules += " of17";
+	rules += " nf17";
+	rules += " kf17";
+	rules += " jf17";
+	rules += " qh17";
+	rules += " -Qg41Lb-IAxCW0c17";
+	rules += " -Qg41Lb-npkAwdIy17";
+	rules += " MAyFGYc17";
+	rules += " Td17";
+	rules += " QAzEcG17";
+	rules += " -aRvJDd-Tu7Fubd17";
+	rules += " g917";
+	rules += " _Pc17";
+	rules += " z2mU17";
+	rules += " yzZKy17";
+	rules += " CRen2tc17";
+	if (props.size === "XL") rules += " DTw5ujc17";
+	else if (props.size === "L") rules += " DdpPw417";
+	else if (props.size === "M") rules += " Dxy3qDe17";
+	else if (props.size === "S") rules += " DfLJE017";
+	rules += " EpvfBwb17";
+	rules += " EDNKd2dZQmDFe17";
+	rules += " UDNKd2dai5a017";
+	rules += " FF17";
+	rules += " _Xa17";
+	if (props.isDisabled) rules += " ri17";
+	else if (props.isLink) rules += " ry17";
+	else rules += " ri17";
+	rules += " Yg17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.size === "XL") rules += " -M_-Mk17";
+	else if (props.size === "L") rules += " -M_-Mh17";
+	else if (props.size === "S") rules += " -M_-Mg17";
+	else if (props.size === "XS") rules += " -M_-Mf17";
+	else rules += " -M_-Mi17";
 	return rules;
 };
-const helpTextStyles = function anonymous(props) {
+const comboBoxOptionLabel = function anonymous(props) {
 	let rules = " ";
-	rules += " zzBWQ8d151";
-	rules += " yzBWQ8d151";
-	rules += " BzBWQ8d151";
-	rules += " AzBWQ8d151";
-	rules += " sd151";
-	rules += " Jy151";
-	rules += " Gy151";
-	rules += " Iy151";
-	rules += " Hy151";
-	rules += " ea151";
-	rules += " Uc151";
-	rules += " Usd151";
-	rules += " qc151";
-	rules += " qsd151";
-	if (props.size === "XL") rules += " uxe7h4151";
-	else if (props.size === "L") rules += " uxe7h4151";
-	else if (props.size === "S") rules += " uxe7h4151";
-	else if (props.size === "XS") rules += " uxe7h4151";
-	else rules += " uxe7h4151";
+	rules += " zv6x9r17";
+	rules += " yv6x9r17";
+	rules += " Bv6x9r17";
+	rules += " Av6x9r17";
+	rules += " sb17";
+	rules += " _ub17";
+	if (props.size === "XL") rules += " uxe7h417";
+	else if (props.size === "L") rules += " uxe7h417";
+	else if (props.size === "S") rules += " uxe7h417";
+	else if (props.size === "XS") rules += " uxe7h417";
+	else rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
+	rules += " xc17";
+	rules += " _xa17";
 	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
-	}
-	if (props.isDisabled) {
-		rules += " pUvnvv151";
-		rules += " plc151";
-	} else if (props.isInvalid) {
-		rules += " pYjUhNc151";
-		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
-	rules += " -_8sjo0b-t5ZbAob151";
-	rules += " _qb151";
-	rules += " TgOnRt151";
-	if (props.isDisabled) rules += " ri151";
-	else rules += " rD151";
+	rules += " p40ub4c17";
+	rules += " JAzEcG17";
+	rules += " _Nc17";
+	rules += " Pc17";
+	rules += " _Yb17";
+	rules += " _7c17";
 	return rules;
 };
-const fieldErrorIcon = " ZuUmpre151 FuUmpre151 It151 Isu151 HAxCW0c151 _va151 -_8sjo0b-tQQET4151 -_8sjo0b-ltQBRyrc151";
-const requiredIcon = " -_8sjo0b-t5ZbAob151";
+const comboBoxAvatar = " z2U5Crc17 y2U5Crc17 B2U5Crc17 A2U5Crc17 Ht17 Hsu17";
+const comboBoxCheckmark = function anonymous(props) {
+	let rules = " ";
+	rules += " z2CW8rb17";
+	rules += " y2CW8rb17";
+	rules += " B2CW8rb17";
+	rules += " A2CW8rb17";
+	if (props.isSelected) rules += " _6c17";
+	else rules += " _6b17";
+	if (props.isPressed) rules += " p7mEcOd17";
+	else if (props.isFocusVisible) rules += " p7mEcOd17";
+	else if (props.isHovered) rules += " p7mEcOd17";
+	else rules += " pwOLUue17";
+	rules += " Hw17";
+	rules += " fa17";
+	rules += " -_8sjo0b-t5ZbAob17";
+	if (props.isFocused) rules += " -_8sjo0b-lt8pvGJ17";
+	else rules += " -_8sjo0b-lta17";
+	return rules;
+};
+const fieldErrorIcon = " ZObNfn17 FObNfn17 It17 Isu17 HAxCW0c17 _va17 -_8sjo0b-tlIkJnc17 -_8sjo0b-ltQBRyrc17";
+const requiredIcon = " -_8sjo0b-t5ZbAob17";
 function isPrimitiveText(value) {
 	return typeof value === "string" || typeof value === "number";
 }
@@ -743,13 +743,6 @@ function requiredIconStyle(size) {
 		height: `${pixelSize}px`
 	};
 }
-function comboBoxCheckmarkIconStyle(size) {
-	const pixelSize = size === "XL" ? 14 : size === "L" ? 12 : 10;
-	return {
-		width: `${pixelSize}px`,
-		height: `${pixelSize}px`
-	};
-}
 function comboBoxChevronIconStyle(size) {
 	const pixelSize = size === "XL" ? 14 : size === "L" ? 12 : 10;
 	return {
@@ -773,80 +766,132 @@ function focusFieldInput(event) {
 function ComboBoxFieldGroup(props) {
 	const context = useContext(ComboBoxContext$1);
 	const isFocused = () => context?.isFocused?.() ?? props.renderProps.isFocused;
-	const isFocusVisible = () => context?.isFocusVisible?.() ?? props.renderProps.isFocusVisible;
+	const [isFocusVisibleModality, setIsFocusVisibleModality] = createSignal(getInteractionModality() !== "pointer");
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
+		const cleanup = createFocusVisibleListener((visible) => setIsFocusVisibleModality(visible));
+		_s2Cleanups.push(cleanup);
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
+	});
+	const isFocusVisible = () => isFocused() && isFocusVisibleModality();
 	const { isHovered, hoverProps } = createHover({ get isDisabled() {
 		return props.renderProps.isDisabled;
 	} });
 	onCleanup(() => context?.setTriggerRef?.(null));
-	return (() => {
-		var _el$ = getNextElement(_tmpl$);
-		use((el) => context?.setTriggerRef?.(el), _el$);
-		spread(_el$, mergeProps(hoverProps, {
-			"role": "presentation",
-			get ["class"]() {
-				return comboBoxFieldGroup({
-					...props.renderProps,
-					size: props.size(),
-					isFocusWithin: isFocused(),
-					isFocusVisible: isFocusVisible(),
-					isHovered: isHovered()
-				});
-			},
-			"onPointerDown": (event) => {
-				if (event.pointerType === "mouse") focusFieldInput(event);
-			},
-			"onTouchEnd": focusFieldInput,
-			get ["data-hovered"]() {
-				return isHovered() ? "true" : void 0;
-			},
-			get ["data-focused"]() {
-				return isFocused() ? "true" : void 0;
-			},
-			get ["data-focus-visible"]() {
-				return isFocusVisible() ? "true" : void 0;
-			},
-			get ["data-disabled"]() {
-				return props.renderProps.isDisabled ? "true" : void 0;
-			},
-			get ["data-invalid"]() {
-				return props.renderProps.isInvalid ? "true" : void 0;
+	var _el$ = getNextElement(_tmpl$);
+	ref(() => {
+		return (el) => context?.setTriggerRef?.(el);
+	}, _el$);
+	spread(_el$, [hoverProps, {
+		role: "presentation",
+		get "class"() {
+			return comboBoxFieldGroup({
+				...props.renderProps,
+				size: props.size(),
+				isFocusWithin: isFocused(),
+				isFocusVisible: isFocusVisible(),
+				isHovered: isHovered()
+			});
+		},
+		onPointerDown: (event) => {
+			if (event.pointerType === "mouse") focusFieldInput(event);
+		},
+		onTouchEnd: focusFieldInput,
+		get "data-hovered"() {
+			return isHovered() ? "true" : void 0;
+		},
+		get "data-focus-within"() {
+			return isFocused() ? "true" : void 0;
+		},
+		get "data-focus-visible"() {
+			return isFocusVisible() ? "true" : void 0;
+		},
+		get "data-disabled"() {
+			return props.renderProps.isDisabled ? "true" : void 0;
+		},
+		get "data-invalid"() {
+			return props.renderProps.isInvalid ? "true" : void 0;
+		}
+	}], true);
+	insert(_el$, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$;
+}
+function ComboBoxFieldSpinner(props) {
+	const comboBoxContext = useContext(ComboBoxContext$1);
+	const [showLoading, setShowLoading] = createSignal(false);
+	const spinnerId = createUniqueId();
+	let timeout = null;
+	let lastInputValue;
+	const isLoadingOrFiltering = () => props.loadingState() === "loading" || props.loadingState() === "filtering";
+	createTrackedEffect(() => {
+		const loading = isLoadingOrFiltering();
+		const inputValue = comboBoxContext?.state?.inputValue?.();
+		const currentlyShowing = showLoading();
+		if (loading && !currentlyShowing) {
+			if (timeout === null) timeout = setTimeout(() => {
+				setShowLoading(true);
+			}, 500);
+			if (inputValue !== lastInputValue) {
+				if (timeout) clearTimeout(timeout);
+				timeout = setTimeout(() => {
+					setShowLoading(true);
+				}, 500);
+			}
+		} else if (!loading) {
+			setShowLoading(false);
+			if (timeout) {
+				clearTimeout(timeout);
+				timeout = null;
 			}
-		}), false, true);
-		insert(_el$, () => props.children);
-		runHydrationEvents();
-		return _el$;
-	})();
+		}
+		lastInputValue = inputValue;
+	});
+	onCleanup(() => {
+		if (timeout) {
+			clearTimeout(timeout);
+			timeout = null;
+		}
+	});
+	const showFieldSpinner = () => showLoading() && (comboBoxContext?.isOpen?.() === true || props.menuTrigger() === "manual" || props.loadingState() === "loading");
+	return createComponent(Show, {
+		get when() {
+			return showFieldSpinner();
+		},
+		get children() {
+			return createComponent(ProgressCircle, {
+				id: spinnerId,
+				isIndeterminate: true,
+				size: "S",
+				get styles() {
+					return comboBoxProgressCircle({ isInput: true });
+				},
+				get "aria-label"() {
+					return props.label;
+				}
+			});
+		}
+	});
 }
 function ComboBoxListBoxPopover(props) {
-	const theme = useTheme();
 	const comboBoxContext = useContext(ComboBoxContext$1);
 	const triggerRef = () => comboBoxContext?.triggerRef?.() ?? comboBoxContext?.inputRef?.()?.parentElement ?? comboBoxContext?.inputRef?.() ?? comboBoxContext?.buttonRef?.() ?? null;
-	const [triggerWidth, setTriggerWidth] = createSignal();
-	const updateTriggerWidth = () => {
+	const shouldCloseOnInteractOutside = (element) => {
 		const trigger = triggerRef();
-		if (trigger) setTriggerWidth(`${trigger.getBoundingClientRect().width}px`);
+		if (trigger === element || trigger?.contains(element)) return false;
+		const input = comboBoxContext?.inputRef?.();
+		if (input === element || input?.contains(element)) return false;
+		const button = comboBoxContext?.buttonRef?.();
+		if (button === element || button?.contains(element)) return false;
+		return true;
 	};
-	createEffect(() => {
-		const trigger = triggerRef();
-		if (!trigger) {
-			setTriggerWidth(void 0);
-			return;
-		}
-		updateTriggerWidth();
-		if (typeof ResizeObserver === "undefined") return;
-		const resizeObserver = new ResizeObserver(updateTriggerWidth);
-		resizeObserver.observe(trigger);
-		onCleanup(() => resizeObserver.disconnect());
-	});
-	const resolvedTriggerWidth = () => {
-		const explicitMenuWidth = props.menuWidth();
-		if (explicitMenuWidth != null) return `${explicitMenuWidth}px`;
-		const measuredWidth = triggerWidth();
-		if (measuredWidth) return measuredWidth;
-		const trigger = triggerRef();
-		return trigger ? `${trigger.getBoundingClientRect().width}px` : void 0;
-	};
-	return createComponent(Popover, {
+	return createComponent(Popover$1, {
+		hideArrow: true,
+		padding: "none",
 		trigger: "ComboBox",
 		triggerRef,
 		get isOpen() {
@@ -856,6 +901,7 @@ function ComboBoxListBoxPopover(props) {
 			if (!open) comboBoxContext?.state?.close?.();
 		},
 		isNonModal: true,
+		shouldCloseOnInteractOutside,
 		get placement() {
 			return `${props.direction()} ${props.align()}`;
 		},
@@ -866,47 +912,51 @@ function ComboBoxListBoxPopover(props) {
 			return props.shouldFlip();
 		},
 		autoFocus: false,
-		"class": (renderProps) => comboBoxPopover({
-			...renderProps,
-			colorScheme: theme.colorScheme,
-			isArrowShown: false,
-			isSubmenu: false
-		}),
-		style: () => ({
-			"--trigger-width": resolvedTriggerWidth(),
-			minWidth: "var(--trigger-width)",
-			width: "var(--trigger-width)"
-		}),
+		get UNSAFE_style() {
+			return { "--trigger-width": props.menuWidth() != null ? `${props.menuWidth()}px` : void 0 };
+		},
+		styles: comboBoxMenuWidth,
 		get children() {
 			var _el$2 = getNextElement(_tmpl$2);
-			insert(_el$2, () => props.children);
+			insert(_el$2, scope(() => {
+				return props.children;
+			}));
 			return _el$2;
 		}
 	});
 }
 function ComboBoxFieldLabel(props) {
-	return [memo(() => props.label), createComponent(Show, {
+	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
+	return [memo(() => {
+		return props.label;
+	}), createComponent(Show, {
 		get when() {
 			return props.isRequired || props.necessityIndicator === "label";
 		},
 		get children() {
-			var _el$3 = getNextElement(_tmpl$3), _el$5 = _el$3.firstChild.nextSibling, [_el$6, _co$] = getNextMarker(_el$5.nextSibling);
+			var _el$3 = getNextElement(_tmpl$3);
+			var _el$5 = _el$3.firstChild.nextSibling;
+			var [_el$6, _el$7] = getNextMarker(_el$5.nextSibling);
 			insert(_el$3, createComponent(Show, {
 				get when() {
 					return props.necessityIndicator === "icon";
 				},
 				get fallback() {
-					return (() => {
-						var _el$7 = getNextElement(_tmpl$4);
-						insert(_el$7, () => props.isRequired ? "(required)" : "(optional)");
-						effect(() => setAttribute(_el$7, "aria-hidden", props.isRequired ? true : void 0));
-						return _el$7;
-					})();
+					var _el$8 = getNextElement(_tmpl$4);
+					insert(_el$8, scope(() => {
+						return stringFormatter().format(props.isRequired ? "label.(required)" : "label.(optional)");
+					}));
+					effect(() => props.isRequired ? true : void 0, (_v$) => {
+						setAttribute(_el$8, "aria-hidden", _v$);
+					});
+					return _el$8;
 				},
 				get children() {
 					return createComponent(Asterisk, {
 						get size() {
-							return memo(() => props.size === "S")() ? "M" : props.size;
+							return memo(() => {
+								return props.size === "S";
+							})() ? "M" : props.size;
 						},
 						styles: requiredIcon,
 						get style() {
@@ -915,7 +965,7 @@ function ComboBoxFieldLabel(props) {
 						"aria-hidden": "true"
 					});
 				}
-			}), _el$6, _co$);
+			}), _el$6, _el$7);
 			return _el$3;
 		}
 	})];
@@ -924,15 +974,24 @@ function ComboBox(props) {
 	const isInForm = useIsInForm();
 	const formContext = useContext(FormContext);
 	const providerProps = useProviderProps(useFormProps(props));
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const contextProps = getSlottedContextProps(useContext(ComboBoxContext), props.slot);
-	const [local, headlessProps] = splitProps(mergeProps$1({
+	const mergedProps = mergeProps$2({
 		labelPosition: "top",
 		labelAlign: "start",
 		necessityIndicator: "icon",
 		direction: "bottom",
 		align: "start",
 		shouldFlip: true
-	}, providerProps, contextProps ?? {}, props), [
+	}, flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"size",
 		"styles",
 		"UNSAFE_className",
@@ -951,16 +1010,20 @@ function ComboBox(props) {
 		"align",
 		"menuWidth",
 		"shouldFlip",
-		"defaultItems",
+		"loadingState",
+		"onLoadMore",
 		"children",
 		"slot",
 		"ref"
 	]);
 	const prefixId = createUniqueId();
 	const size = () => normalizeComboBoxSize(local.size);
+	const matchesCoarsePointer = createMediaQuery("not ((hover: hover) and (pointer: fine))");
+	const scale = () => matchesCoarsePointer() ? "large" : "medium";
 	const labelPosition = () => local.labelPosition ?? "top";
 	const labelAlign = () => local.labelAlign ?? "start";
 	const necessityIndicator = () => local.necessityIndicator ?? "icon";
+	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
 	const direction = () => local.direction ?? "bottom";
 	const align = () => local.align ?? "start";
 	const shouldFlip = () => local.shouldFlip ?? true;
@@ -989,34 +1052,17 @@ function ComboBox(props) {
 		size: size(),
 		isOpen: renderProps.isOpen
 	});
-	const helpClass = (renderProps, isInvalid) => helpTextStyles({
-		...renderProps,
-		size: size(),
-		isInvalid
-	});
 	const listBoxChildren = typeof local.children === "function" ? local.children : void 0;
-	return createComponent(ComboBoxSizeContext.Provider, {
+	return createComponent(ComboBoxSizeContext, {
 		get value() {
 			return size();
 		},
 		get children() {
 			return createComponent(ComboBox$1, mergeProps(headlessProps, {
-				get items() {
-					return headlessProps.items ?? props.defaultItems;
-				},
-				get defaultItems() {
-					return props.defaultItems;
-				},
 				allowsEmptyCollection: true,
 				get label() {
 					return local.label;
 				},
-				get description() {
-					return memo(() => !!local.isInvalid)() ? void 0 : local.description;
-				},
-				get errorMessage() {
-					return local.errorMessage;
-				},
 				get isInvalid() {
 					return local.isInvalid;
 				},
@@ -1024,7 +1070,7 @@ function ComboBox(props) {
 					return local.slot ?? void 0;
 				},
 				rootRef: (element) => assignRootRef(element),
-				"class": rootClassName,
+				class: rootClassName,
 				get style() {
 					return mergedUnsafeStyle();
 				},
@@ -1034,9 +1080,13 @@ function ComboBox(props) {
 							return local.label;
 						},
 						get children() {
-							var _el$8 = getNextElement(_tmpl$6), _el$0 = _el$8.firstChild, [_el$1, _co$2] = getNextMarker(_el$0.nextSibling), _el$10 = _el$1.nextSibling, [_el$11, _co$3] = getNextMarker(_el$10.nextSibling);
-							insert(_el$8, createComponent(ComboBoxLabel, {
-								get ["class"]() {
+							var _el$9 = getNextElement(_tmpl$6);
+							var _el$10 = _el$9.firstChild;
+							var [_el$11, _el$12] = getNextMarker(_el$10.nextSibling);
+							var _el$14 = _el$11.nextSibling;
+							var [_el$15, _el$16] = getNextMarker(_el$14.nextSibling);
+							insert(_el$9, createComponent(ComboBoxLabel, {
+								get "class"() {
 									return comboBoxLabel({
 										size: size(),
 										isDisabled: renderProps.isDisabled,
@@ -1062,19 +1112,23 @@ function ComboBox(props) {
 										}
 									});
 								}
-							}), _el$1, _co$2);
-							insert(_el$8, createComponent(Show, {
+							}), _el$11, _el$12);
+							insert(_el$9, createComponent(Show, {
 								get when() {
 									return local.contextualHelp;
 								},
 								get children() {
-									var _el$9 = getNextElement(_tmpl$5);
-									insert(_el$9, () => local.contextualHelp);
-									return _el$9;
+									var _el$13 = getNextElement(_tmpl$5);
+									insert(_el$13, () => {
+										return local.contextualHelp;
+									});
+									return _el$13;
 								}
-							}), _el$11, _co$3);
-							effect(() => className(_el$8, labelWrapperClass()));
-							return _el$8;
+							}), _el$15, _el$16);
+							effect(() => readShallow(labelWrapperClass()), (_v$, _$p) => {
+								className(_el$9, _v$, _$p);
+							});
+							return _el$9;
 						}
 					}),
 					createComponent(ComboBoxFieldGroup, {
@@ -1087,7 +1141,7 @@ function ComboBox(props) {
 										return local.prefix;
 									},
 									get fallback() {
-										return createComponent(ComboBoxInput$1, { "class": comboBoxInput });
+										return createComponent(ComboBoxInput$1, { class: comboBoxInput });
 									},
 									get children() {
 										return [createComponent(FieldPrefix, {
@@ -1100,14 +1154,16 @@ function ComboBox(props) {
 											prefixId,
 											inputPropsIsFunction: true,
 											get children() {
-												return createComponent(ComboBoxInput$1, { "class": comboBoxInput });
+												return createComponent(ComboBoxInput$1, { class: comboBoxInput });
 											}
 										})];
 									}
 								}),
 								createComponent(Show, {
 									get when() {
-										return memo(() => !!renderProps.isInvalid)() && !renderProps.isDisabled;
+										return memo(() => {
+											return !!renderProps.isInvalid;
+										})() ? !renderProps.isDisabled : renderProps.isInvalid;
 									},
 									get children() {
 										return createComponent(CenterBaseline, { get children() {
@@ -1115,9 +1171,16 @@ function ComboBox(props) {
 										} });
 									}
 								}),
+								createComponent(ComboBoxFieldSpinner, {
+									loadingState: () => local.loadingState,
+									menuTrigger: () => headlessProps.menuTrigger,
+									get label() {
+										return stringFormatter().format("table.loading");
+									}
+								}),
 								createComponent(ComboBoxButton$1, {
 									ref: setChevronEl,
-									"class": buttonClass,
+									class: buttonClass,
 									style: (buttonProps) => pressScale(() => chevronEl())(buttonProps),
 									get children() {
 										return createComponent(Chevron, {
@@ -1134,34 +1197,21 @@ function ComboBox(props) {
 							];
 						}
 					}),
-					createComponent(Show, {
-						get when() {
-							return memo(() => !!local.description)() && !renderProps.isInvalid;
+					createComponent(HelpText, {
+						get size() {
+							return size();
 						},
-						get children() {
-							return createComponent(ComboBoxDescription, {
-								get ["class"]() {
-									return helpClass(renderProps, false);
-								},
-								get children() {
-									return local.description;
-								}
-							});
-						}
-					}),
-					createComponent(Show, {
-						get when() {
-							return memo(() => !!local.errorMessage)() && renderProps.isInvalid;
+						get isDisabled() {
+							return renderProps.isDisabled;
+						},
+						get isInvalid() {
+							return renderProps.isInvalid || local.isInvalid;
+						},
+						get description() {
+							return local.description;
 						},
 						get children() {
-							return createComponent(ComboBoxErrorMessage, {
-								get ["class"]() {
-									return helpClass(renderProps, true);
-								},
-								get children() {
-									return local.errorMessage;
-								}
-							});
+							return local.errorMessage;
 						}
 					}),
 					createComponent(ComboBoxListBoxPopover, {
@@ -1171,7 +1221,7 @@ function ComboBox(props) {
 						menuWidth: () => local.menuWidth,
 						shouldFlip,
 						get children() {
-							return createComponent(FormContext.Provider, {
+							return createComponent(FormContext, {
 								get value() {
 									return {
 										...formContext ?? {},
@@ -1182,12 +1232,74 @@ function ComboBox(props) {
 									};
 								},
 								get children() {
-									return createComponent(ComboBoxListBox$1, {
-										"class": (listBoxProps) => comboBoxListBox({
-											...listBoxProps,
-											size: size()
-										}),
-										children: listBoxChildren
+									return createComponent(HeaderContext, {
+										value: { styles: () => listboxHeader({ size: size() }) },
+										get children() {
+											return createComponent(HeadingContext, {
+												value: {
+													role: "presentation",
+													styles: menuSectionHeading
+												},
+												get children() {
+													return createComponent(TextContext$1, {
+														value: { slots: { description: { styles: () => menuItemDescription({
+															size: size(),
+															isFocused: false,
+															isDisabled: false
+														}) } } },
+														get children() {
+															return createComponent(Virtualizer, {
+																layout: ListLayout,
+																get layoutOptions() {
+																	return {
+																		estimatedRowHeight: 32,
+																		padding: 8,
+																		estimatedHeadingHeight: 50,
+																		loaderHeight: LOADER_ROW_HEIGHTS[size()][scale()]
+																	};
+																},
+																get children() {
+																	return createComponent(ComboBoxListBox$1, {
+																		class: (listBoxProps) => comboBoxListBox({
+																			...listBoxProps,
+																			size: size()
+																		}),
+																		get onLoadMore() {
+																			return local.onLoadMore;
+																		},
+																		get isLoading() {
+																			return local.loadingState === "loadingMore";
+																		},
+																		loadMoreClass: comboBoxLoadingWrapper,
+																		renderLoadMore: () => local.loadingState === "loadingMore" ? createComponent(ProgressCircle, {
+																			isIndeterminate: true,
+																			size: "S",
+																			get styles() {
+																				return comboBoxProgressCircle({});
+																			},
+																			get "aria-label"() {
+																				return stringFormatter().format("table.loadingMore");
+																			}
+																		}) : void 0,
+																		renderEmptyState: () => (() => {
+																			var _el$17 = getNextElement(_tmpl$4);
+																			insert(_el$17, scope(() => {
+																				return stringFormatter().format(local.loadingState === "loading" ? "table.loading" : "combobox.noResults");
+																			}));
+																			effect(() => readShallow(comboBoxEmptyStateText({ size: size() })), (_v$, _$p) => {
+																				className(_el$17, _v$, _$p);
+																			});
+																			return _el$17;
+																		})(),
+																		children: listBoxChildren
+																	});
+																}
+															});
+														}
+													});
+												}
+											});
+										}
 									});
 								}
 							});
@@ -1201,17 +1313,21 @@ function ComboBox(props) {
 function ComboBoxInputGroup(props) {
 	const context = useContext(ComboBoxContext$1);
 	onCleanup(() => context?.setTriggerRef?.(null));
-	return (() => {
-		var _el$12 = getNextElement(_tmpl$);
-		use((el) => context?.setTriggerRef?.(el), _el$12);
-		insert(_el$12, () => props.children);
-		effect(() => className(_el$12, props.class));
-		return _el$12;
-	})();
+	var _el$18 = getNextElement(_tmpl$);
+	ref(() => {
+		return (el) => context?.setTriggerRef?.(el);
+	}, _el$18);
+	insert(_el$18, scope(() => {
+		return props.children;
+	}));
+	effect(() => readShallow(props.class), (_v$, _$p) => {
+		className(_el$18, _v$, _$p);
+	});
+	return _el$18;
 }
 function ComboBoxInput(props) {
 	const [local, headlessProps] = splitProps(props, ["class"]);
-	return createComponent(ComboBoxInput$1, mergeProps(headlessProps, { get ["class"]() {
+	return createComponent(ComboBoxInput$1, mergeProps(headlessProps, { get "class"() {
 		return [comboBoxInput, local.class].filter(Boolean).join(" ");
 	} }));
 }
@@ -1229,7 +1345,7 @@ function ComboBoxButton(props) {
 			setButtonEl(el);
 			assignRef(local.ref, el);
 		},
-		"class": buttonClass,
+		class: buttonClass,
 		style: (buttonProps) => pressScale(() => buttonEl())(buttonProps),
 		get children() {
 			return props.children || createComponent(Chevron, {
@@ -1250,13 +1366,15 @@ function ComboBoxListBox(props) {
 		size
 	}), local.class].filter(Boolean).join(" ");
 	return createComponent(ComboBoxListBox$1, mergeProps(headlessProps, {
-		"class": listClass,
+		class: listClass,
 		get children() {
 			return props.children;
 		}
 	}));
 }
-function ComboBoxOption(props) {
+/**
+* @deprecated Use {@link ComboBoxItem}. Removed in a future minor.
+*/ function ComboBoxOption(props) {
 	const [local, headlessProps] = splitProps(props, [
 		"class",
 		"children",
@@ -1266,7 +1384,6 @@ function ComboBoxOption(props) {
 	const size = useContext(ComboBoxSizeContext);
 	const [optionEl, setOptionEl] = createSignal(null);
 	const isLink = () => props.href != null;
-	const textLabel = () => isTextOnlyChildren(local.children) ? Array.isArray(local.children) ? local.children.join("") : String(local.children) : void 0;
 	const optionClass = (renderProps) => [comboBoxOption({
 		...renderProps,
 		size,
@@ -1276,34 +1393,101 @@ function ComboBoxOption(props) {
 		...renderProps,
 		size
 	});
+	const ComboBoxOptionChrome = (contentProps) => {
+		const headlessText = useContext(TextContext);
+		const labelId = headlessText?.slots?.label?.id ?? headlessText?.slots?.default?.id;
+		const descriptionId = headlessText?.slots?.description?.id;
+		return createComponent(TextContext$1, {
+			value: { slots: {
+				label: {
+					styles: () => menuItemLabel({ size }),
+					"data-rsp-slot": "text",
+					id: labelId
+				},
+				description: {
+					styles: () => menuItemDescription({
+						size,
+						isFocused: contentProps.renderProps.isFocused,
+						isDisabled: contentProps.renderProps.isDisabled
+					}),
+					"data-rsp-slot": "text",
+					id: descriptionId
+				}
+			} },
+			get children() {
+				return createComponent(ComboBoxOptionContents, { get renderProps() {
+					return contentProps.renderProps;
+				} });
+			}
+		});
+	};
+	const ComboBoxOptionContents = (contentProps) => {
+		const content = createMemo(() => local.children);
+		const checkClassName = createMemo(() => checkClass(contentProps.renderProps));
+		return [createComponent(Checkmark, {
+			size: size === "S" ? "XS" : size,
+			get "class"() {
+				return checkClassName();
+			}
+		}), memo(() => {
+			return memo(() => {
+				return !!isTextOnlyChildren(content());
+			})() ? createComponent(Text, {
+				slot: "label",
+				get "class"() {
+					return comboBoxOptionLabel({ size });
+				},
+				"data-rsp-slot": "text",
+				get children() {
+					return content();
+				}
+			}) : content();
+		})];
+	};
 	return createComponent(ComboBoxOption$1, mergeProps(headlessProps, {
 		ref: (el) => {
 			setOptionEl(el);
 			assignRef(local.ref, el);
 		},
-		get ["aria-label"]() {
-			return headlessProps["aria-label"] ?? textLabel();
+		get "aria-label"() {
+			return headlessProps["aria-label"];
 		},
-		"class": optionClass,
+		class: optionClass,
 		get style() {
 			return pressScale(() => optionEl(), local.UNSAFE_style);
 		},
-		children: (renderProps) => [createComponent(Checkmark, {
-			size: size === "S" ? "XS" : size,
-			get ["class"]() {
-				return checkClass(renderProps);
+		children: (renderProps) => createComponent(IconContext, {
+			get value() {
+				return {
+					slot: "icon",
+					render: centerBaseline({
+						slot: "icon",
+						styles: menuItemIconCenterWrapper
+					}),
+					styles: menuItemIcon
+				};
 			},
-			get style() {
-				return comboBoxCheckmarkIconStyle(size);
+			get children() {
+				return createComponent(AvatarContext, {
+					value: { slots: {
+						default: {
+							size: "1lh",
+							styles: comboBoxAvatar
+						},
+						avatar: {
+							size: "1lh",
+							styles: comboBoxAvatar
+						}
+					} },
+					get children() {
+						return createComponent(ComboBoxOptionChrome, { renderProps });
+					}
+				});
 			}
-		}), memo(() => memo(() => !!isTextOnlyChildren(local.children))() ? (() => {
-			var _el$13 = getNextElement(_tmpl$7);
-			insert(_el$13, () => local.children);
-			effect(() => className(_el$13, comboBoxOptionLabel({ size })));
-			return _el$13;
-		})() : local.children)]
+		})
 	}));
 }
+/** S2 canonical item name. */ const ComboBoxItem = ComboBoxOption;
 function ComboBoxTagGroup(props) {
 	return createComponent(ComboBoxTagGroup$1, props);
 }
@@ -1314,8 +1498,7 @@ function ComboBoxTag(props) {
 * A section within a `<ComboBox>`, mirroring React S2's `ComboBoxSection`. Renders
 * a headless list-box section followed by a size-matched `<Divider>`; the size is
 * read from the internal combobox context.
-*/
-function ComboBoxSection(props) {
+*/ function ComboBoxSection(props) {
 	const size = useContext(ComboBoxSizeContext);
 	return [createComponent(ListBoxSection, mergeProps(props, { get children() {
 		return props.children;
@@ -1331,6 +1514,6 @@ ComboBox.TagGroup = ComboBoxTagGroup;
 ComboBox.Tag = ComboBoxTag;
 const Item = ComboBoxOption;
 //#endregion
-export { ComboBox, ComboBoxButton, ComboBoxContext, ComboBoxInput, ComboBoxInputGroup, ComboBoxListBox, ComboBoxOption, ComboBoxSection, ComboBoxTag, ComboBoxTagGroup, Item, defaultContainsFilter };
+export { ComboBox, ComboBoxButton, ComboBoxContext, ComboBoxInput, ComboBoxInputGroup, ComboBoxItem, ComboBoxListBox, ComboBoxOption, ComboBoxSection, ComboBoxTag, ComboBoxTagGroup, Item, LOADER_ROW_HEIGHTS, defaultContainsFilter, listboxHeader };
 
 //# sourceMappingURL=index.js.map