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

package/dist/picker/index.js

@@ -1,25 +1,55 @@
-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/Picker.tsx
+import { a as useProviderProps } from "../_chunk/provider.js";
 import { n as getSlottedContextProps } from "../_chunk/spectrum-context.js";
-import { CenterBaseline } from "../icon/center-baseline.js";
+import { t as s2IntlStrings } from "../_chunk/intl.js";
+import { t as HelpText } from "../_chunk/HelpText.js";
+import { CenterBaseline, centerBaseline } from "../icon/center-baseline.js";
 import { pressScale } from "../pressScale.js";
-/* empty css                                                                               */
-import { t as Checkmark } from "../_chunk/Checkmark.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";
+import { t as Asterisk } from "../_chunk/macro-d2704bd5d9b60d26ff1e50aa3db378885d30e50caf8dc7b31cfaf5dd36a09d85.js";
 /* empty css                                                                               */
 /* empty css                                                                               */
 /* empty css                                                                               */
 /* empty css                                                                               */
 import { Divider } from "../divider/index.js";
-/* empty css                                                                               */
-/* empty css                                                                               */
 import { ProgressCircle } from "../progress/ProgressCircle.js";
-import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, setAttribute, template } from "solid-js/web";
-import { Show, createContext, createEffect, createSignal, createUniqueId, mergeProps as mergeProps$1, onCleanup, splitProps, useContext } from "solid-js";
-import { FieldError, ListBoxSection, Popover, Select, SelectContext, SelectListBox, SelectOption, SelectTrigger, SelectValue } from "@proyecto-viviana/solidaria-components";
+import { t as createMediaQuery } from "../_chunk/createMediaQuery.js";
+import { LOADER_ROW_HEIGHTS, listboxHeader } from "../combobox/index.js";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, readShallow, scope, setAttribute, template } from "@solidjs/web";
+import { Show, createContext, createMemo, createSignal, createUniqueId, useContext } from "solid-js";
+import { mergeProps as mergeProps$1, splitProps } from "@proyecto-viviana/solidaria/utils";
+import { ListBoxSection, ListLayout, Select, SelectContext, SelectListBox, SelectOption, SelectTrigger, SelectValue, TextContext, Virtualizer } from "@proyecto-viviana/solidaria-components";
+import { createStringFormatter, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
 //#region src/picker/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div class=" sd151 Za151 Fb151">`), _tmpl$2 = /*#__PURE__*/ template(`<span class=" _7c151">&nbsp;<!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<span data-slot=contextualHelp>`), _tmpl$4 = /*#__PURE__*/ template(`<span><span><!$><!/><!$><!/></span><!$><!/>`), _tmpl$5 = /*#__PURE__*/ template(`<span>`), _tmpl$6 = /*#__PURE__*/ template(`<div style=display:contents>`), _tmpl$7 = /*#__PURE__*/ template(`<span slot=label class=" sb151 _ub151 _Nc151 Pc151 _Yb151 _7c151">`), _tmpl$8 = /*#__PURE__*/ template(`<p>`), _tmpl$9 = /*#__PURE__*/ template(`<span class=" Za151 FLvNfn151 _Pa151 _lr151 og151 ng151 kg151 jg151 g8KaFke151 gle151">`), _tmpl$0 = /*#__PURE__*/ template(`<div>`), _tmpl$1 = /*#__PURE__*/ template(`<span slot=label class=" sb151 _ub151 _Nc151 Pc151 _Yb151 _7c151"data-rsp-slot=text>`), _tmpl$10 = /*#__PURE__*/ template(`<span slot=label data-rsp-slot=text>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div class=" sd17 Za17 Fb17">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span class=" _7c17">&nbsp;<!$><!/>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span data-slot=contextualHelp>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span><span><!$><!/><!$><!/></span><!$><!/>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div style=display:contents>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<span slot=label class=" sb17 _ub17 _Nc17 Pc17 _Yb17 _7c17">`);
+var _tmpl$8 = /* @__PURE__ */ template(`<span class=" Za17 FLvNfn17 _Pa17 _lr17 og17 ng17 kg17 jg17 gr2Mazb17 gle17">`);
+var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<span slot=label class=" sb17 _ub17 _Nc17 Pc17 _Yb17 _7c17"data-rsp-slot=text>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<span slot=label data-rsp-slot=text>`);
 const PickerSizeContext = createContext("M");
 const InsidePickerValueContext = createContext(false);
 const PickerContext = createContext(null);
@@ -35,657 +65,541 @@ const pickerRoot = function anonymous(props, overrides) {
 		if (p[1] === "_P") position = 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";
-	if (!position) rules += " _Pc151";
+	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";
+	if (!position) rules += " _Pc17";
 	return rules;
 };
 const pickerLabelWrapper = function anonymous(props) {
 	let rules = " ";
-	rules += " zv6x9r151";
-	rules += " yv6x9r151";
-	rules += " Bv6x9r151";
-	rules += " Av6x9r151";
-	rules += " sh151";
-	rules += " ea151";
-	rules += " Uc151";
-	rules += " Usd151";
-	rules += " qc151";
-	rules += " qsd151";
-	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 += " sh17";
+	rules += " ea17";
+	rules += " Uc17";
+	rules += " Usd17";
+	rules += " qc17";
+	rules += " qsd17";
+	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 pickerLabel = 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 pickerTrigger = function anonymous(props) {
 	let rules = " ";
-	if (props.isQuiet) rules += " _Le151";
-	else if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " uxe7h4151";
+	if (props.isQuiet) rules += " _Le17";
+	else 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";
-	else if (props.isPressed) rules += " pMwyHo151";
-	else if (props.isFocusVisible) rules += " pMwyHo151";
-	else if (props.isHovered) rules += " pMwyHo151";
-	else rules += " pHKLAu151";
-	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";
-	if (props.isQuiet) rules += " _je151";
-	else rules += " _jf151";
-	rules += " _jlf151";
-	rules += " iAv83Hb151";
-	if (props.isDisabled) rules += " ilc151";
-	else rules += " ilb151";
-	if (props.isQuiet) rules += " g9151";
-	else if (props.isDisabled) rules += " gkDWoNd151";
-	else rules += " gHPXipd151";
-	rules += " gl1kG7o151";
-	rules += " _iRvAxPd151";
-	rules += " _ilc151";
-	rules += " __mrmLYsd151";
-	rules += " qc151";
-	rules += " qsd151";
-	rules += " -Qg41Lb-IAxCW0c151";
-	rules += " -Qg41Lb-npkAwdIy151";
-	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 += " _Pc151";
-	rules += " _Wd151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	if (props.isQuiet) rules += " Ln151";
-	rules += " ri151";
-	rules += " __ca151";
-	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";
-	if (props.isQuiet) rules += " -S_-Sd151";
-	else rules += " -S_-Sv151";
-	if (props.isQuiet) rules += " -R_-Rd151";
-	else rules += " -R_-Rv151";
-	rules += " -m_-mb151";
-	rules += " -l_-lb151";
+	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 += " 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";
+	if (props.isQuiet) rules += " _je17";
+	else rules += " _jf17";
+	rules += " _jlf17";
+	rules += " iAv83Hb17";
+	if (props.isDisabled) rules += " ilc17";
+	else rules += " ilb17";
+	if (props.isQuiet) rules += " g917";
+	else if (props.isDisabled) rules += " gLX7Xt17";
+	else rules += " gHPXipd17";
+	rules += " gl1kG7o17";
+	rules += " _iRvAxPd17";
+	rules += " _ilc17";
+	rules += " __mh0dLcd17";
+	rules += " qc17";
+	rules += " qsd17";
+	rules += " -Qg41Lb-IAxCW0c17";
+	rules += " -Qg41Lb-npkAwdIy17";
+	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 += " _Pc17";
+	rules += " _Wd17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	if (props.isQuiet) rules += " Ln17";
+	rules += " ri17";
+	rules += " __ca17";
+	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";
+	if (props.isQuiet) rules += " -S_-Sd17";
+	else rules += " -S_-Sv17";
+	if (props.isQuiet) rules += " -R_-Rd17";
+	else rules += " -R_-Rv17";
+	rules += " -m_-mb17";
+	rules += " -l_-lb17";
 	return rules;
 };
 const pickerInvalidBorder = function anonymous(props) {
 	let rules = " ";
-	rules += " ob151";
-	rules += " nb151";
-	rules += " kb151";
-	rules += " jb151";
-	rules += " _Pa151";
-	rules += " Wr151";
-	rules += " _Er151";
-	rules += " _lr151";
-	rules += " _Rr151";
-	rules += " _Ob151";
-	rules += " _jf151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mb151";
-	rules += " lb151";
-	if (props.isPressed) rules += " iQxdzb151";
-	else if (props.isFocusVisible) rules += " iQxdzb151";
-	else if (props.isHovered) rules += " iQxdzb151";
-	else rules += " iYjUhNc151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
+	rules += " ob17";
+	rules += " nb17";
+	rules += " kb17";
+	rules += " jb17";
+	rules += " _Pa17";
+	rules += " Wr17";
+	rules += " _Er17";
+	rules += " _lr17";
+	rules += " _Rr17";
+	rules += " _Ob17";
+	rules += " _jf17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mb17";
+	rules += " lb17";
+	if (props.isPressed) rules += " ilIkJnc17";
+	else if (props.isFocusVisible) rules += " ilIkJnc17";
+	else if (props.isHovered) rules += " ilIkJnc17";
+	else rules += " iuNtkec17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
 	return rules;
 };
 const pickerValue = function anonymous(props) {
 	let rules = " ";
-	if (props.isQuiet) rules += " _ua151";
-	else rules += " _ub151";
-	rules += " _Nc151";
-	rules += " Pc151";
-	rules += " _Yb151";
-	rules += " _7c151";
-	rules += " sd151";
-	rules += " eb151";
-	rules += " Fb151";
-	rules += " p40ub4c151";
-	rules += " pg8a8eUUi0Fe151";
+	if (props.isQuiet) rules += " _ua17";
+	else rules += " _ub17";
+	rules += " _Nc17";
+	rules += " Pc17";
+	rules += " _Yb17";
+	rules += " _7c17";
+	rules += " sd17";
+	rules += " eb17";
+	rules += " Fb17";
+	rules += " p40ub4c17";
+	rules += " pg8a8eLw1gcc17";
 	return rules;
 };
+const pickerValueText = " sb17 _ub17 _Nc17 Pc17 _Yb17 _7c17";
 const pickerChevron = function anonymous(props) {
 	let rules = " ";
-	if (props.size === "XL") rules += " Zk151";
-	else if (props.size === "L") rules += " Zj151";
-	else if (props.size === "M") rules += " Zi151";
-	else if (props.size === "S") rules += " Zi151";
-	if (props.size === "XL") rules += " Fl151";
-	else if (props.size === "L") rules += " Fk151";
-	else if (props.size === "M") rules += " Fj151";
-	else if (props.size === "S") rules += " Fj151";
-	rules += " _va151";
-	rules += " _Sd151";
-	rules += " -_8sjo0b-t5ZbAob151";
-	if (props.isLoading) rules += " pUvnvv151";
+	if (props.size === "XL") rules += " Zk17";
+	else if (props.size === "L") rules += " Zj17";
+	else if (props.size === "M") rules += " Zi17";
+	else if (props.size === "S") rules += " Zi17";
+	if (props.size === "XL") rules += " Fl17";
+	else if (props.size === "L") rules += " Fk17";
+	else if (props.size === "M") rules += " Fj17";
+	else if (props.size === "S") rules += " Fj17";
+	rules += " _va17";
+	rules += " _Sd17";
+	rules += " -_8sjo0b-t5ZbAob17";
+	if (props.isLoading) rules += " p8H6Pad17";
 	return rules;
 };
-const pickerLoadingWrapper = " z2mU151 yzZKy151 sd151 eb151 _Ca151 Jv151 Gv151";
+const pickerLoadingWrapper = " z2mU17 yzZKy17 sd17 eb17 _Ca17 Jv17 Gv17";
 const pickerProgressCircle = function anonymous(props) {
 	let rules = " ";
-	if (props.size === "XL") rules += " Zp151";
-	else if (props.size === "L") rules += " Zn151";
-	else if (props.size === "M") rules += " Zm151";
-	else if (props.size === "S") rules += " Zu151";
-	if (props.size === "XL") rules += " Fq151";
-	else if (props.size === "L") rules += " Fo151";
-	else if (props.size === "M") rules += " Fn151";
-	else if (props.size === "S") rules += " Ft151";
-	return rules;
-};
-const pickerHelpText = 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";
-	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
-	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
-	} 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";
-	}
-	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else if (props.size === "XS") {
-		rules += " xb151";
-		rules += " _xa151";
-	} else {
-		rules += " xb151";
-		rules += " _xa151";
-	}
-	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 += " _qb151";
-	rules += " TgOnRt151";
+	if (props.size === "XL") rules += " Zp17";
+	else if (props.size === "L") rules += " Zn17";
+	else if (props.size === "M") rules += " Zm17";
+	else if (props.size === "S") rules += " Zu17";
+	if (props.size === "XL") rules += " Fq17";
+	else if (props.size === "L") rules += " Fo17";
+	else if (props.size === "M") rules += " Fn17";
+	else if (props.size === "S") rules += " Ft17";
 	return rules;
 };
 const pickerListBox = 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 += " _Gc151";
-	rules += " Tt151";
-	rules += " Qt151";
-	rules += " St151";
-	rules += " Rt151";
+	rules += " _Le17";
 	return rules;
 };
-const pickerPopover = function anonymous(props) {
+const pickerMenuWidth = 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 += " -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";
+	if (props.isQuiet) rules += " Nh17";
+	else rules += " NuHSBze17";
+	if (props.isQuiet) rules += " ZbWuche17";
+	else rules += " ZuHSBze17";
 	return rules;
 };
 const pickerOption = 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";
-	} 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 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";
+		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 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 pickerOptionLabel = 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";
+	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 += " xc151";
-	rules += " _xa151";
+	rules += " xc17";
+	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";
+	rules += " p40ub4c17";
+	rules += " JAzEcG17";
+	rules += " _Nc17";
+	rules += " Pc17";
+	rules += " _Yb17";
+	rules += " _7c17";
 	return rules;
 };
+const pickerAvatar = " z2U5Crc17 y2U5Crc17 B2U5Crc17 A2U5Crc17 Ht17 Hsu17";
+const pickerAvatarSize = {
+	S: 16,
+	M: 20,
+	L: 22,
+	XL: 26
+};
 const pickerCheckmark = 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";
+	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 += " _va17";
+	rules += " -_8sjo0b-t5ZbAob17";
+	if (props.isFocused) rules += " -_8sjo0b-lt8pvGJ17";
+	else rules += " -_8sjo0b-lta17";
 	return rules;
 };
-const fieldErrorIcon = " ZuUmpre151 FuUmpre151 It151 Isu151 HAxCW0c151 _va151 -_8sjo0b-tQQET4151 -_8sjo0b-ltQBRyrc151";
-const requiredIcon = " -_8sjo0b-t5ZbAob151";
+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";
 }
@@ -724,35 +638,11 @@ function pickerMenuOffset(size) {
 	}
 }
 function PickerListBoxPopover(props) {
-	const theme = useTheme();
 	const selectContext = useContext(SelectContext);
 	const triggerRef = () => selectContext?.triggerRef?.() ?? selectContext?.rootRef?.()?.querySelector("button[aria-haspopup='listbox']") ?? null;
-	const [triggerWidth, setTriggerWidth] = createSignal();
-	const updateTriggerWidth = () => {
-		const trigger = triggerRef();
-		if (trigger) setTriggerWidth(`${trigger.getBoundingClientRect().width}px`);
-	};
-	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: "Select",
 		triggerRef,
 		get isOpen() {
@@ -774,137 +664,149 @@ function PickerListBoxPopover(props) {
 			return props.shouldFlip();
 		},
 		autoFocus: false,
-		"class": (renderProps) => pickerPopover({
-			...renderProps,
-			colorScheme: theme.colorScheme,
-			isArrowShown: false,
-			isSubmenu: false
-		}),
-		style: () => ({
-			"--trigger-width": resolvedTriggerWidth(),
-			minWidth: props.isQuiet() ? "192px" : "var(--trigger-width)",
-			width: props.isQuiet() ? "calc(var(--trigger-width) - 24px)" : "var(--trigger-width)"
-		}),
+		get UNSAFE_style() {
+			return { width: props.menuWidth() != null && !props.isQuiet() ? `${props.menuWidth()}px` : void 0 };
+		},
+		get styles() {
+			return pickerMenuWidth({ isQuiet: props.isQuiet() });
+		},
 		get children() {
 			var _el$ = getNextElement(_tmpl$);
-			insert(_el$, () => props.children);
+			insert(_el$, scope(() => {
+				return props.children;
+			}));
 			return _el$;
 		}
 	});
 }
 function PickerLabel(props) {
-	return (() => {
-		var _el$2 = getNextElement(_tmpl$4), _el$3 = _el$2.firstChild, _el$8 = _el$3.firstChild, [_el$9, _co$2] = getNextMarker(_el$8.nextSibling), _el$0 = _el$9.nextSibling, [_el$1, _co$3] = getNextMarker(_el$0.nextSibling), _el$11 = _el$3.nextSibling, [_el$12, _co$4] = getNextMarker(_el$11.nextSibling);
-		insert(_el$3, () => props.label, _el$9, _co$2);
-		insert(_el$3, createComponent(Show, {
-			get when() {
-				return props.isRequired || props.necessityIndicator === "label";
-			},
-			get children() {
-				var _el$4 = getNextElement(_tmpl$2), _el$6 = _el$4.firstChild.nextSibling, [_el$7, _co$] = getNextMarker(_el$6.nextSibling);
-				insert(_el$4, createComponent(Show, {
-					get when() {
-						return props.necessityIndicator === "icon";
-					},
-					get fallback() {
-						return (() => {
-							var _el$13 = getNextElement(_tmpl$5);
-							insert(_el$13, () => props.isRequired ? "(required)" : "(optional)");
-							effect(() => setAttribute(_el$13, "aria-hidden", props.isRequired ? true : void 0));
-							return _el$13;
-						})();
-					},
-					get children() {
-						return createComponent(Asterisk, {
-							get size() {
-								return memo(() => props.size === "S")() ? "M" : props.size;
-							},
-							styles: requiredIcon,
-							get style() {
-								return requiredIconStyle(props.size);
-							},
-							"aria-hidden": "true"
-						});
-					}
-				}), _el$7, _co$);
-				return _el$4;
-			}
-		}), _el$1, _co$3);
-		insert(_el$2, createComponent(Show, {
-			get when() {
+	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
+	var _el$2 = getNextElement(_tmpl$4);
+	var _el$3 = _el$2.firstChild;
+	var _el$4 = _el$3.firstChild;
+	var [_el$5, _el$6] = getNextMarker(_el$4.nextSibling);
+	var _el$12 = _el$5.nextSibling;
+	var [_el$13, _el$14] = getNextMarker(_el$12.nextSibling);
+	var _el$16 = _el$3.nextSibling;
+	var [_el$17, _el$18] = getNextMarker(_el$16.nextSibling);
+	insert(_el$3, () => {
+		return props.label;
+	}, _el$5, _el$6);
+	insert(_el$3, createComponent(Show, {
+		get when() {
+			return props.isRequired || props.necessityIndicator === "label";
+		},
+		get children() {
+			var _el$7 = getNextElement(_tmpl$2);
+			var _el$9 = _el$7.firstChild.nextSibling;
+			var [_el$10, _el$11] = getNextMarker(_el$9.nextSibling);
+			insert(_el$7, createComponent(Show, {
+				get when() {
+					return props.necessityIndicator === "icon";
+				},
+				get fallback() {
+					var _el$19 = getNextElement(_tmpl$5);
+					insert(_el$19, scope(() => {
+						return stringFormatter().format(props.isRequired ? "label.(required)" : "label.(optional)");
+					}));
+					effect(() => props.isRequired ? true : void 0, (_v$) => {
+						setAttribute(_el$19, "aria-hidden", _v$);
+					});
+					return _el$19;
+				},
+				get children() {
+					return createComponent(Asterisk, {
+						get size() {
+							return memo(() => {
+								return props.size === "S";
+							})() ? "M" : props.size;
+						},
+						styles: requiredIcon,
+						get style() {
+							return requiredIconStyle(props.size);
+						},
+						"aria-hidden": "true"
+					});
+				}
+			}), _el$10, _el$11);
+			return _el$7;
+		}
+	}), _el$13, _el$14);
+	insert(_el$2, createComponent(Show, {
+		get when() {
+			return props.contextualHelp;
+		},
+		get children() {
+			var _el$15 = getNextElement(_tmpl$3);
+			insert(_el$15, () => {
 				return props.contextualHelp;
-			},
-			get children() {
-				var _el$10 = getNextElement(_tmpl$3);
-				insert(_el$10, () => props.contextualHelp);
-				return _el$10;
-			}
-		}), _el$12, _co$4);
-		effect((_p$) => {
-			var _v$ = pickerLabelWrapper({
+			});
+			return _el$15;
+		}
+	}), _el$17, _el$18);
+	effect(() => {
+		return {
+			e: readShallow(pickerLabelWrapper({
 				size: props.size,
 				isDisabled: props.isDisabled,
 				isRequired: props.isRequired,
 				labelPosition: props.labelPosition,
 				labelAlign: props.labelAlign,
 				isStaticColor: false
-			}), _v$2 = props.id, _v$3 = pickerLabel({
+			})),
+			t: props.id,
+			a: readShallow(pickerLabel({
 				size: props.size,
 				isDisabled: props.isDisabled,
 				isRequired: props.isRequired,
 				labelPosition: props.labelPosition,
 				labelAlign: props.labelAlign,
 				isStaticColor: false
-			});
-			_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$3, "id", _p$.t = _v$2);
-			_v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
-		});
-		return _el$2;
-	})();
+			}))
+		};
+	}, ({ e, t, a }, _p$) => {
+		className(_el$2, e, _p$?.e);
+		t !== _p$?.t && setAttribute(_el$3, "id", t);
+		className(_el$3, a, _p$?.a);
+	});
+	return _el$2;
 }
 function selectedValues(valueProps) {
 	return valueProps.selectedItems.map((item) => item.value ?? item).filter((item) => item != null);
 }
-function pickerValueContent(valueProps, renderValue, renderItem) {
-	if (valueProps.selectedItems.length > 0 && renderValue) return createComponent(InsidePickerValueContext.Provider, {
+function pickerValueContent(valueProps, renderValue, renderItem, selectedCountLabel) {
+	if (valueProps.selectedItems.length > 0 && renderValue) return createComponent(InsidePickerValueContext, {
 		value: true,
 		get children() {
-			var _el$14 = getNextElement(_tmpl$6);
-			insert(_el$14, () => renderValue(selectedValues(valueProps)));
-			return _el$14;
+			var _el$20 = getNextElement(_tmpl$6);
+			insert(_el$20, scope(() => {
+				return renderValue(selectedValues(valueProps));
+			}));
+			return _el$20;
 		}
 	});
-	if (valueProps.selectedItems.length > 1) return (() => {
-		var _el$15 = getNextElement(_tmpl$7);
-		insert(_el$15, () => `${valueProps.selectedItems.length} selected`);
-		return _el$15;
-	})();
+	if (valueProps.selectedItems.length > 1) {
+		var _el$21 = getNextElement(_tmpl$7);
+		insert(_el$21, selectedCountLabel);
+		return _el$21;
+	}
 	const selected = valueProps.selectedItems[0];
-	if (selected != null && selected.value != null) return createComponent(InsidePickerValueContext.Provider, {
+	if (selected != null && selected.value != null) return createComponent(InsidePickerValueContext, {
 		value: true,
 		get children() {
 			return renderItem(selected.value);
 		}
 	});
-	return (() => {
-		var _el$16 = getNextElement(_tmpl$7);
-		insert(_el$16, () => valueProps.placeholder ?? "");
-		return _el$16;
-	})();
-}
-function loadingSpinnerLabel(loadingState) {
-	return loadingState === "loadingMore" ? "Loading more" : "Loading";
+	var _el$22 = getNextElement(_tmpl$7);
+	insert(_el$22, () => {
+		return valueProps.placeholder ?? "";
+	});
+	return _el$22;
 }
 function PickerProgressCircle(props) {
 	return createComponent(ProgressCircle, {
-		get ["aria-label"]() {
-			return loadingSpinnerLabel(props.loadingState);
+		get "aria-label"() {
+			return props["aria-label"];
 		},
 		isIndeterminate: true,
 		size: "S",
@@ -923,7 +825,16 @@ function Picker(props) {
 		shouldFlip: true
 	};
 	const contextProps = getSlottedContextProps(useContext(PickerContext), props.slot);
-	const [local, headlessProps] = splitProps(mergeProps$1(defaultProps, useProviderProps(props), contextProps ?? {}, props), [
+	const [flags] = splitProps(useProviderProps(props), [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
+	const mergedProps = mergeProps$2(defaultProps, flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"size",
 		"isQuiet",
 		"styles",
@@ -948,9 +859,12 @@ function Picker(props) {
 		"children"
 	]);
 	const size = () => normalizePickerSize(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;
@@ -986,13 +900,8 @@ function Picker(props) {
 			return isMultiple() ? onSelectionChangeKeys() : void 0;
 		}
 	});
-	const descriptionId = createUniqueId();
 	const labelId = createUniqueId();
 	const [triggerEl, setTriggerEl] = createSignal(null);
-	const selectDescribedBy = () => {
-		const ids = [headlessProps["aria-describedby"], local.description && !isInvalid() ? descriptionId : void 0].filter(Boolean).join(" ").split(" ").filter(Boolean);
-		return ids.length ? Array.from(new Set(ids)).join(" ") : void 0;
-	};
 	const rootClass = (renderProps) => [
 		local.UNSAFE_className,
 		local.class,
@@ -1032,13 +941,6 @@ function Picker(props) {
 			return local.contextualHelp;
 		}
 	}) : void 0;
-	const helpClass = (renderProps) => pickerHelpText({
-		isDisabled: renderProps.isDisabled,
-		isRequired: renderProps.isRequired,
-		isSelected: renderProps.isSelected,
-		size: size(),
-		isInvalid: isInvalid()
-	});
 	const ariaLabel = () => {
 		const explicitLabel = headlessProps["aria-label"];
 		if (typeof explicitLabel === "string") return explicitLabel;
@@ -1056,32 +958,33 @@ function Picker(props) {
 		const itemRecord = item;
 		const key = getKey?.(item) ?? itemRecord.key ?? itemRecord.id ?? String(item);
 		const textValue = String(getTextValue?.(item) ?? itemRecord.textValue ?? itemRecord.label ?? item);
+		const label = itemRecord.label ?? textValue;
 		return createComponent(PickerItem, {
 			id: key,
 			item,
 			textValue,
-			children: itemRecord.label ?? textValue
+			children: label
 		});
 	};
-	return createComponent(PickerSizeContext.Provider, {
+	return createComponent(PickerSizeContext, {
 		get value() {
 			return size();
 		},
 		get children() {
 			return createComponent(Select, mergeProps(selectProps, {
-				get ["aria-label"]() {
+				get placeholder() {
+					return headlessProps.placeholder ?? stringFormatter().format("picker.placeholder");
+				},
+				get "aria-label"() {
 					return ariaLabel();
 				},
-				get ["aria-labelledby"]() {
+				get "aria-labelledby"() {
 					return ariaLabelledBy();
 				},
-				get ["aria-describedby"]() {
-					return selectDescribedBy();
-				},
 				get isInvalid() {
 					return isInvalid();
 				},
-				"class": rootClass,
+				class: rootClass,
 				get style() {
 					return local.UNSAFE_style;
 				},
@@ -1096,7 +999,7 @@ function Picker(props) {
 					}),
 					createComponent(SelectTrigger, {
 						ref: setTriggerEl,
-						"class": (triggerProps) => pickerTrigger({
+						class: (triggerProps) => pickerTrigger({
 							...triggerProps,
 							size: size(),
 							isQuiet: isQuiet(),
@@ -1105,15 +1008,62 @@ function Picker(props) {
 						style: (triggerProps) => pressScale(() => triggerEl())(triggerProps),
 						children: (triggerProps) => [
 							createComponent(SelectValue, {
-								"class": (valueProps) => pickerValue({
+								class: (valueProps) => pickerValue({
 									...valueProps,
 									isQuiet: isQuiet()
 								}) + (local.renderValue ? "" : " pqYuhc"),
-								children: (valueProps) => pickerValueContent(valueProps, local.renderValue, listBoxChildren)
+								children: (valueProps) => createComponent(IconContext, {
+									get value() {
+										return {
+											slot: "icon",
+											render: centerBaseline({
+												slot: "icon",
+												styles: menuItemIconCenterWrapper
+											}),
+											styles: menuItemIcon
+										};
+									},
+									get children() {
+										return createComponent(AvatarContext, {
+											get value() {
+												return { slots: {
+													default: {
+														size: pickerAvatarSize[size()],
+														styles: pickerAvatar
+													},
+													avatar: {
+														size: pickerAvatarSize[size()],
+														styles: pickerAvatar
+													}
+												} };
+											},
+											get children() {
+												return createComponent(TextContext$1, {
+													value: { slots: {
+														description: {},
+														default: {
+															styles: pickerValueText,
+															"data-slot": "label"
+														},
+														label: {
+															styles: pickerValueText,
+															"data-slot": "label"
+														}
+													} },
+													get children() {
+														return pickerValueContent(valueProps, local.renderValue, listBoxChildren, stringFormatter().format("picker.selectedCount", { count: valueProps.selectedItems.length }));
+													}
+												});
+											}
+										});
+									}
+								})
 							}),
 							createComponent(Show, {
 								get when() {
-									return memo(() => !!isInvalid())() && !triggerProps.isDisabled;
+									return memo(() => {
+										return !!isInvalid();
+									})() ? !triggerProps.isDisabled : isInvalid();
 								},
 								get children() {
 									return createComponent(CenterBaseline, { get children() {
@@ -1123,7 +1073,9 @@ function Picker(props) {
 							}),
 							createComponent(Show, {
 								get when() {
-									return memo(() => !!isTriggerLoading())() && !triggerProps.isOpen;
+									return memo(() => {
+										return !!isTriggerLoading();
+									})() ? !triggerProps.isOpen : isTriggerLoading();
 								},
 								get children() {
 									return createComponent(CenterBaseline, { get children() {
@@ -1131,8 +1083,8 @@ function Picker(props) {
 											get size() {
 												return size();
 											},
-											get loadingState() {
-												return local.loadingState;
+											get "aria-label"() {
+												return stringFormatter().format("table.loading");
 											}
 										});
 									} });
@@ -1147,61 +1099,54 @@ function Picker(props) {
 										size: size(),
 										isLoading: isTriggerLoading()
 									});
-								},
-								get ["data-open"]() {
-									return triggerProps.isOpen ? "true" : void 0;
 								}
 							}),
 							createComponent(Show, {
 								get when() {
-									return memo(() => !!triggerProps.isFocusVisible)() && isQuiet();
+									return memo(() => {
+										return !!triggerProps.isFocusVisible;
+									})() ? isQuiet() : triggerProps.isFocusVisible;
 								},
 								get children() {
-									return getNextElement(_tmpl$9);
+									return getNextElement(_tmpl$8);
 								}
 							}),
 							createComponent(Show, {
 								get when() {
-									return memo(() => !!(isInvalid() && !triggerProps.isDisabled))() && !isQuiet();
+									return memo(() => {
+										return !!(isInvalid() && !triggerProps.isDisabled);
+									})() ? !isQuiet() : isInvalid() && !triggerProps.isDisabled;
 								},
 								get children() {
-									var _el$19 = getNextElement(_tmpl$0);
-									effect(() => className(_el$19, pickerInvalidBorder({
+									var _el$24 = getNextElement(_tmpl$9);
+									effect(() => readShallow(pickerInvalidBorder({
 										...triggerProps,
 										size: size(),
 										isQuiet: isQuiet(),
 										isInvalid: isInvalid()
-									})));
-									return _el$19;
+									})), (_v$, _$p) => {
+										className(_el$24, _v$, _$p);
+									});
+									return _el$24;
 								}
 							})
 						]
 					}),
-					createComponent(Show, {
-						get when() {
-							return memo(() => !!local.description)() && !isInvalid();
+					createComponent(HelpText, {
+						get size() {
+							return size();
 						},
-						get children() {
-							var _el$17 = getNextElement(_tmpl$8);
-							setAttribute(_el$17, "id", descriptionId);
-							insert(_el$17, () => local.description);
-							effect(() => className(_el$17, helpClass(renderProps)));
-							return _el$17;
-						}
-					}),
-					createComponent(Show, {
-						get when() {
-							return memo(() => !!local.errorMessage)() && isInvalid();
+						get isDisabled() {
+							return renderProps.isDisabled;
+						},
+						get isInvalid() {
+							return isInvalid();
+						},
+						get description() {
+							return local.description;
 						},
 						get children() {
-							return createComponent(FieldError, {
-								get ["class"]() {
-									return helpClass(renderProps);
-								},
-								get children() {
-									return local.errorMessage;
-								}
-							});
+							return local.errorMessage;
 						}
 					}),
 					createComponent(PickerListBoxPopover, {
@@ -1212,28 +1157,63 @@ function Picker(props) {
 						menuWidth: () => local.menuWidth,
 						shouldFlip,
 						get children() {
-							return createComponent(SelectListBox, {
-								isInPopover: true,
-								"class": (listBoxProps) => pickerListBox({
-									...listBoxProps,
-									size: size()
-								}),
-								get onLoadMore() {
-									return local.onLoadMore;
-								},
-								get isLoading() {
-									return isLoadingMore();
-								},
-								loadMoreClass: pickerLoadingWrapper,
-								renderLoadMore: () => isLoadingMore() ? createComponent(PickerProgressCircle, {
-									get size() {
-										return size();
-									},
-									get loadingState() {
-										return local.loadingState;
-									}
-								}) : void 0,
-								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,
+																estimatedHeadingHeight: 50,
+																padding: 8,
+																loaderHeight: LOADER_ROW_HEIGHTS[size()][scale()]
+															};
+														},
+														get children() {
+															return createComponent(SelectListBox, {
+																isInPopover: true,
+																class: (listBoxProps) => pickerListBox({
+																	...listBoxProps,
+																	size: size()
+																}),
+																get onLoadMore() {
+																	return local.onLoadMore;
+																},
+																get isLoading() {
+																	return isLoadingMore();
+																},
+																loadMoreClass: pickerLoadingWrapper,
+																renderLoadMore: () => isLoadingMore() ? createComponent(PickerProgressCircle, {
+																	get size() {
+																		return size();
+																	},
+																	get "aria-label"() {
+																		return stringFormatter().format("table.loadingMore");
+																	}
+																}) : void 0,
+																children: listBoxChildren
+															});
+														}
+													});
+												}
+											});
+										}
+									});
+								}
 							});
 						}
 					})
@@ -1253,11 +1233,20 @@ function PickerItem(props) {
 	const size = useContext(PickerSizeContext);
 	const insideValue = useContext(InsidePickerValueContext);
 	const [optionEl, setOptionEl] = createSignal(null);
-	if (insideValue) return memo(() => memo(() => !!isTextOnlyChildren(local.children))() ? (() => {
-		var _el$20 = getNextElement(_tmpl$1);
-		insert(_el$20, () => local.children);
-		return _el$20;
-	})() : local.children);
+	if (insideValue) {
+		const content = createMemo(() => local.children);
+		return memo(() => {
+			return memo(() => {
+				return !!isTextOnlyChildren(content());
+			})() ? (() => {
+				var _el$25 = getNextElement(_tmpl$10);
+				insert(_el$25, scope(() => {
+					return content();
+				}));
+				return _el$25;
+			})() : content();
+		});
+	}
 	const optionClass = (renderProps) => [
 		local.UNSAFE_className,
 		local.class,
@@ -1266,37 +1255,112 @@ function PickerItem(props) {
 			size
 		}, local.styles)
 	].filter(Boolean).join(" ");
+	const PickerItemChrome = (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: {
+				default: {
+					styles: () => menuItemLabel({ size }),
+					"data-rsp-slot": "text",
+					id: labelId
+				},
+				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(PickerItemContents, { get renderProps() {
+					return contentProps.renderProps;
+				} });
+			}
+		});
+	};
+	const PickerItemContents = (contentProps) => {
+		const content = createMemo(() => local.children);
+		const checkClassName = createMemo(() => pickerCheckmark({
+			...contentProps.renderProps,
+			size
+		}));
+		return [createComponent(Checkmark, {
+			size: size === "S" ? "XS" : size,
+			get "class"() {
+				return checkClassName();
+			},
+			get style() {
+				return pickerCheckmarkIconStyle(size);
+			}
+		}), memo(() => {
+			return memo(() => {
+				return !!isTextOnlyChildren(content());
+			})() ? (() => {
+				var _el$26 = getNextElement(_tmpl$11);
+				insert(_el$26, scope(() => {
+					return content();
+				}));
+				effect(() => readShallow(pickerOptionLabel({ size })), (_v$, _$p) => {
+					className(_el$26, _v$, _$p);
+				});
+				return _el$26;
+			})() : content();
+		})];
+	};
 	return createComponent(SelectOption, mergeProps(headlessProps, {
 		ref: setOptionEl,
-		"class": optionClass,
+		class: optionClass,
 		get style() {
 			return pressScale(() => optionEl(), local.UNSAFE_style);
 		},
-		children: (renderProps) => [createComponent(Checkmark, {
-			size: size === "S" ? "XS" : size,
-			get ["class"]() {
-				return pickerCheckmark({
-					...renderProps,
-					size
-				});
+		children: (renderProps) => createComponent(IconContext, {
+			get value() {
+				return {
+					slot: "icon",
+					render: centerBaseline({
+						slot: "icon",
+						styles: menuItemIconCenterWrapper
+					}),
+					styles: menuItemIcon
+				};
 			},
-			get style() {
-				return pickerCheckmarkIconStyle(size);
+			get children() {
+				return createComponent(AvatarContext, {
+					get value() {
+						return { slots: {
+							default: {
+								size: pickerAvatarSize[size],
+								styles: pickerAvatar
+							},
+							avatar: {
+								size: pickerAvatarSize[size],
+								styles: pickerAvatar
+							}
+						} };
+					},
+					get children() {
+						return createComponent(PickerItemChrome, { renderProps });
+					}
+				});
 			}
-		}), memo(() => memo(() => !!isTextOnlyChildren(local.children))() ? (() => {
-			var _el$21 = getNextElement(_tmpl$10);
-			insert(_el$21, () => local.children);
-			effect(() => className(_el$21, pickerOptionLabel({ size })));
-			return _el$21;
-		})() : local.children)]
+		})
 	}));
 }
 /**
 * A section within a `<Picker>`, mirroring React S2's `PickerSection`. Renders a
 * headless list-box section followed by a size-matched `<Divider>`; the size is
 * read from the internal picker context.
-*/
-function PickerSection(props) {
+*/ function PickerSection(props) {
 	const size = useContext(PickerSizeContext);
 	return [createComponent(ListBoxSection, mergeProps(props, { get children() {
 		return props.children;