@studiolxd/brand 49.28.0 → 51.0.0

package/dist/recurrence-field.js

@@ -1,16 +1,18 @@
 'use client';
 import './recurrence-field.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { Fieldset as t } from "./fieldset.js";
 import { Toggle as n } from "./toggle.js";
 import { ToggleGroup as r } from "./toggle-group.js";
-import { SelectField as i } from "./select-field.js";
-import { DatePickerField as a } from "./date-picker-field.js";
-import { NumberInputField as o } from "./number-input-field.js";
-import { useId as s, useMemo as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { n as i } from "./_shared/field-labels.js";
+import { a, n as o } from "./_shared/fieldshell.js";
+import { SelectField as s } from "./select-field.js";
+import { DatePickerField as c } from "./date-picker-field.js";
+import { NumberInputField as l } from "./number-input-field.js";
+import { useMemo as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/stories/molecules/RecurrenceField/recurrenceRule.ts
-var f = [
+var m = [
 	"MO",
 	"TU",
 	"WE",
@@ -18,155 +20,187 @@ var f = [
 	"FR",
 	"SA",
 	"SU"
-], p = {
+], h = {
 	frequency: "weekly",
 	interval: 1,
 	weekdays: [],
 	end: { type: "never" }
-}, m = [
+}, g = {
+	legend: "Repetición",
+	frequency: "Frecuencia",
+	never: "No se repite",
+	daily: "Cada día",
+	weekly: "Cada semana",
+	monthly: "Cada mes",
+	yearly: "Cada año",
+	interval: (e) => ({
+		daily: "Cada cuántos días",
+		weekly: "Cada cuántas semanas",
+		monthly: "Cada cuántos meses",
+		yearly: "Cada cuántos años"
+	})[e],
+	weekdays: "Días de la semana",
+	end: "Termina",
+	endNever: "Nunca",
+	endUntil: "En una fecha",
+	endCount: "Tras un número de veces",
+	until: "Hasta",
+	count: "Número de repeticiones"
+}, _ = [
 	"daily",
 	"weekly",
 	"monthly",
 	"yearly"
-], h = Date.UTC(2024, 0, 1);
-function g({ value: g, onValueChange: _, id: v, legend: y, disabled: b, size: x, locale: S = "es-ES", weekStartsOn: C = "monday", minDate: w, maxDate: T, className: E, frequencyLabel: D, weekdaysLabel: O, endLabel: k }) {
-	let A = e("recurrenceField"), j = s(), M = v ?? j, N = c(() => {
-		let e = new Intl.DateTimeFormat(S, {
+], v = Date.UTC(2024, 0, 1);
+function y({ value: y, onValueChange: b, id: x, legend: S, labelHidden: C, disabled: w, helperText: T, errorMessage: E, size: D, locale: O = "es-ES", weekStartsOn: k = "monday", minDate: A, maxDate: j, today: M, className: N, frequencyLabel: P, weekdaysLabel: F, endLabel: I }) {
+	let L = e("recurrenceField", g), R = i(C), z = a({
+		id: x,
+		errorMessage: E,
+		helperText: T
+	}), { id: B } = z, V = u(() => {
+		let e = new Intl.DateTimeFormat(O, {
 			weekday: "short",
 			timeZone: "UTC"
-		}), t = new Intl.DateTimeFormat(S, {
+		}), t = new Intl.DateTimeFormat(O, {
 			weekday: "long",
 			timeZone: "UTC"
-		}), n = f.map((n, r) => {
-			let i = new Date(h + r * 864e5);
+		}), n = m.map((n, r) => {
+			let i = new Date(v + r * 864e5);
 			return {
 				key: n,
 				short: e.format(i),
 				long: t.format(i)
 			};
 		});
-		return C === "sunday" ? [n[6], ...n.slice(0, 6)] : n;
-	}, [S, C]), P = (e) => {
-		g && _({
-			...g,
+		return k === "sunday" ? [n[6], ...n.slice(0, 6)] : n;
+	}, [O, k]), H = (e) => {
+		y && b({
+			...y,
 			...e
 		});
-	}, F = [{
+	}, U = [{
 		value: "",
-		label: A("never")
-	}, ...m.map((e) => ({
+		label: L("never")
+	}, ..._.map((e) => ({
 		value: e,
-		label: A(e)
-	}))], I = [
+		label: L(e)
+	}))], W = [
 		{
 			value: "never",
-			label: A("endNever")
+			label: L("endNever")
 		},
 		{
 			value: "until",
-			label: A("endUntil")
+			label: L("endUntil")
 		},
 		{
 			value: "count",
-			label: A("endCount")
+			label: L("endCount")
 		}
-	], L = /* @__PURE__ */ d("div", {
-		className: ["recurrence-field", E].filter(Boolean).join(" "),
-		children: [/* @__PURE__ */ u(i, {
-			id: `${M}-frequency`,
-			label: A("frequency", D),
-			options: F,
-			value: g?.frequency ?? "",
-			disabled: b,
-			size: x,
+	], G = /* @__PURE__ */ p(o, {
+		field: z,
+		block: "recurrence-field",
+		className: N,
+		rootProps: !S && z.describedBy ? {
+			role: "group",
+			"aria-describedby": z.describedBy
+		} : void 0,
+		children: [/* @__PURE__ */ f(s, {
+			id: `${B}-frequency`,
+			label: L("frequency", P),
+			options: U,
+			value: y?.frequency ?? "",
+			disabled: w,
+			size: D,
 			onValueChange: (e) => {
-				if (!e) return _(null);
-				_({
-					...g ?? p,
+				if (!e) return b(null);
+				b({
+					...y ?? h,
 					frequency: e
 				});
 			}
-		}), g ? /* @__PURE__ */ d(l, { children: [
-			/* @__PURE__ */ u("div", {
+		}), y ? /* @__PURE__ */ p(d, { children: [
+			/* @__PURE__ */ f("div", {
 				className: "recurrence-field__row",
-				children: /* @__PURE__ */ u(o, {
-					id: `${M}-interval`,
+				children: /* @__PURE__ */ f(l, {
+					id: `${B}-interval`,
 					className: "recurrence-field__interval",
-					label: A("interval")(g.frequency),
-					value: g.interval,
+					label: L("interval")(y.frequency),
+					value: y.interval,
 					min: 1,
 					max: 99,
-					disabled: b,
-					size: x,
-					onChange: (e) => P({ interval: Number.isFinite(e) ? Math.max(1, e) : 1 })
+					disabled: w,
+					size: D,
+					onChange: (e) => H({ interval: Number.isFinite(e) ? Math.max(1, e) : 1 })
 				})
 			}),
-			g.frequency === "weekly" ? /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("span", {
+			y.frequency === "weekly" ? /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("span", {
 				className: "recurrence-field__weekdays-label",
-				id: `${M}-weekdays-label`,
-				children: A("weekdays", O)
-			}), /* @__PURE__ */ u(r, {
+				id: `${B}-weekdays-label`,
+				children: L("weekdays", F)
+			}), /* @__PURE__ */ f(r, {
 				className: "recurrence-field__weekdays",
 				multiple: !0,
-				size: x,
-				value: g.weekdays,
-				"aria-labelledby": `${M}-weekdays-label`,
-				onValueChange: (e) => P({ weekdays: e }),
-				children: N.map((e) => /* @__PURE__ */ u(n, {
+				size: D,
+				value: y.weekdays,
+				"aria-labelledby": `${B}-weekdays-label`,
+				onValueChange: (e) => H({ weekdays: e }),
+				children: V.map((e) => /* @__PURE__ */ f(n, {
 					value: e.key,
 					"aria-label": e.long,
-					disabled: b,
+					disabled: w,
 					children: e.short
 				}, e.key))
 			})] }) : null,
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ p("div", {
 				className: "recurrence-field__row",
 				children: [
-					/* @__PURE__ */ u(i, {
-						id: `${M}-end`,
+					/* @__PURE__ */ f(s, {
+						id: `${B}-end`,
 						className: "recurrence-field__end",
-						label: A("end", k),
-						options: I,
-						value: g.end.type,
-						disabled: b,
-						size: x,
+						label: L("end", I),
+						options: W,
+						value: y.end.type,
+						disabled: w,
+						size: D,
 						onValueChange: (e) => {
-							if (e === "until") return P({ end: {
+							if (e === "until") return H({ end: {
 								type: "until",
 								date: null
 							} });
-							if (e === "count") return P({ end: {
+							if (e === "count") return H({ end: {
 								type: "count",
 								count: 10
 							} });
-							P({ end: { type: "never" } });
+							H({ end: { type: "never" } });
 						}
 					}),
-					g.end.type === "until" ? /* @__PURE__ */ u(a, {
-						id: `${M}-until`,
+					y.end.type === "until" ? /* @__PURE__ */ f(c, {
+						id: `${B}-until`,
 						className: "recurrence-field__end",
-						label: A("until"),
-						value: g.end.date,
-						locale: S,
-						minDate: w,
-						maxDate: T,
-						disabled: b,
-						size: x,
-						onChange: (e) => P({ end: {
+						label: L("until"),
+						value: y.end.date,
+						locale: O,
+						minDate: A,
+						maxDate: j,
+						today: M,
+						disabled: w,
+						size: D,
+						onChange: (e) => H({ end: {
 							type: "until",
 							date: e
 						} })
 					}) : null,
-					g.end.type === "count" ? /* @__PURE__ */ u(o, {
-						id: `${M}-count`,
+					y.end.type === "count" ? /* @__PURE__ */ f(l, {
+						id: `${B}-count`,
 						className: "recurrence-field__end",
-						label: A("count"),
-						value: g.end.count,
+						label: L("count"),
+						value: y.end.count,
 						min: 1,
 						max: 999,
-						disabled: b,
-						size: x,
-						onChange: (e) => P({ end: {
+						disabled: w,
+						size: D,
+						onChange: (e) => H({ end: {
 							type: "count",
 							count: Number.isFinite(e) ? Math.max(1, e) : 1
 						} })
@@ -175,11 +209,13 @@ function g({ value: g, onValueChange: _, id: v, legend: y, disabled: b, size: x,
 			})
 		] }) : null]
 	});
-	return y ? /* @__PURE__ */ u(t, {
-		legend: y,
-		disabled: b,
-		children: L
-	}) : L;
+	return S ? /* @__PURE__ */ f(t, {
+		legend: S,
+		legendHidden: R,
+		disabled: w,
+		"aria-describedby": z.describedBy,
+		children: G
+	}) : G;
 }
 //#endregion
-export { g as RecurrenceField };
+export { y as RecurrenceField };

package/dist/search-form.js

@@ -1,62 +1,3 @@
 'use client';
-import './search-form.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Icon as t } from "./icon.js";
-import { n } from "./_shared/form-size.js";
-import { InputField as r } from "./input-field.js";
-import { forwardRef as i, useId as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/stories/molecules/SearchForm/SearchForm.tsx
-var c = i(function({ id: i, className: c, name: l = "q", value: u, defaultValue: d, onChange: f, onSubmit: p, action: m, method: h = "get", label: g, labelHidden: _ = !0, placeholder: v, submitLabel: y, size: b, disabled: x, describedBy: S, controls: C }, w) {
-	let T = e("searchForm"), E = n(b === "xl" ? void 0 : b), D = b === "xl" ? "xl" : E, O = D === "xl" ? "lg" : D, k = a(), A = i ?? k;
-	function j(e) {
-		let t = String(new FormData(e.currentTarget).get(l) ?? "").trim();
-		if (p) {
-			e.preventDefault(), t && p(t);
-			return;
-		}
-		t || e.preventDefault();
-	}
-	return /* @__PURE__ */ s("form", {
-		className: [
-			"search-form",
-			D === "md" ? "" : `search-form--${D}`,
-			c
-		].filter(Boolean).join(" "),
-		role: "search",
-		"aria-label": T("label", g),
-		action: m,
-		method: h,
-		onSubmit: j,
-		children: [/* @__PURE__ */ o(r, {
-			ref: w,
-			className: "search-form__field",
-			id: A,
-			name: l,
-			label: T("label", g),
-			labelHidden: _,
-			type: "text",
-			autoComplete: "off",
-			enterKeyHint: "search",
-			placeholder: T("placeholder", v),
-			value: u,
-			defaultValue: d,
-			disabled: x,
-			size: O,
-			onChange: f,
-			"aria-describedby": S,
-			...C ? { "aria-controls": C } : {}
-		}), /* @__PURE__ */ o("button", {
-			className: "search-form__submit",
-			type: "submit",
-			disabled: x,
-			"aria-label": T("submit", y),
-			children: /* @__PURE__ */ o(t, {
-				name: "arrow",
-				className: "search-form__submit-glyph"
-			})
-		})]
-	});
-});
-//#endregion
-export { c as SearchForm };
+import { t as e } from "./_shared/searchform.js";
+export { e as SearchForm };

package/dist/searchform.css

@@ -0,0 +1 @@
+.search-form{inline-size:var(--search-form-width);align-items:flex-end;display:flex}.search-form.search-form--sm{--search-form-submit-slot-size:var(--search-form-submit-sm-slot-size);--search-form-submit-icon-size:var(--search-form-submit-sm-icon-size);--search-form-submit-input-padding-inline-end:var(--search-form-submit-sm-slot-size)}.search-form.search-form--lg{--search-form-submit-slot-size:var(--search-form-submit-lg-slot-size);--search-form-submit-icon-size:var(--search-form-submit-lg-icon-size);--search-form-submit-input-padding-inline-end:var(--search-form-submit-lg-slot-size)}.search-form.search-form--xl{--search-form-submit-slot-size:var(--search-form-xl-slot-size);--search-form-submit-icon-size:var(--search-form-xl-icon-size);--search-form-submit-input-padding-inline-end:var(--search-form-xl-slot-size)}.search-form.search-form--xl .search-form__field .input{--input-height:var(--search-form-xl-height);--input-padding-inline:var(--search-form-xl-padding-inline);--input-font-size:var(--search-form-xl-font-size)}.search-form__field{flex:auto;min-inline-size:0}.search-form__field .input{padding-inline-end:var(--search-form-submit-input-padding-inline-end)}.search-form__submit{inline-size:var(--search-form-submit-slot-size);block-size:var(--search-form-submit-slot-size);cursor:pointer;color:var(--search-form-submit-color);transition:color var(--input-transition-duration) var(--input-transition-easing);background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin-inline-start:calc(-1 * var(--search-form-submit-slot-size));padding-block:0;padding-inline:0;display:flex}.search-form__submit:hover{color:var(--search-form-submit-hover-color)}.search-form__submit:focus-visible{outline:var(--search-form-submit-focus-ring-width) solid var(--search-form-submit-focus-ring-color);outline-offset:calc(-1 * var(--input-border-width))}.search-form__submit:disabled{color:var(--search-form-submit-disabled-color);cursor:var(--input-disabled-cursor)}.search-form__submit-glyph{inline-size:var(--search-form-submit-icon-size);block-size:var(--search-form-submit-icon-size)}

package/dist/select-field.js

@@ -1,67 +1,62 @@
 'use client';
 import './select-field.css';
 import { n as e } from "./_shared/form-size.js";
-import { ErrorText as t } from "./error-text.js";
-import { Label as n } from "./label.js";
-import { Select as r, isSelectOptionGroup as i } from "./select.js";
-import { n as a } from "./_shared/field-labels.js";
-import { forwardRef as o, useId as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { t, u as n } from "./_shared/select.js";
+import { n as r } from "./_shared/field-optional.js";
+import { n as i } from "./_shared/field-labels.js";
+import { a, n as o } from "./_shared/fieldshell.js";
+import { forwardRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
 //#region src/stories/molecules/SelectField/SelectField.tsx
-var u = "__empty__";
-function d(e, t) {
-	return e === "" ? t ? u : void 0 : e;
+var l = "__empty__";
+function u(e, t) {
+	return e === "" ? t ? l : void 0 : e;
 }
-function f(e) {
-	return e === u ? "" : e;
+function d(e) {
+	return e === l ? "" : e;
 }
-function p(e) {
+function f(e) {
 	return e.value === "" ? {
 		...e,
-		value: u
+		value: l
 	} : e;
 }
-var m = o(function({ id: o, label: u, labelHidden: m, options: h, value: g, defaultValue: _, placeholder: v, name: y, disabled: b, required: x, size: S, error: C = !1, errorMessage: w, helperText: T, className: E, onValueChange: D, onBlur: O }, k) {
-	let A = a(m), j = e(S), M = s(), N = o ?? M, P = w ? `${N}-error` : void 0, F = T ? `${N}-helper` : void 0, I = [P, F].filter(Boolean).join(" ") || void 0, L = C || !!w, R = h.some((e) => i(e) ? e.options.some((e) => e.value === "") : e.value === ""), z = R ? h.map((e) => i(e) ? {
-		...e,
-		options: e.options.map(p)
-	} : p(e)) : h;
-	return /* @__PURE__ */ l("div", {
-		className: ["select-field", E].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ c(n, {
-				htmlFor: N,
-				hidden: A,
-				size: j,
-				children: u
-			}),
-			/* @__PURE__ */ c(r, {
-				ref: k,
-				id: N,
-				name: y,
-				required: x,
-				options: z,
-				value: d(g, R),
-				defaultValue: d(_, R),
-				placeholder: v,
-				disabled: b,
-				size: j,
-				"aria-describedby": I,
-				"aria-invalid": L,
-				onValueChange: D ? (e) => D(f(e)) : void 0,
-				onBlur: O
-			}),
-			w && /* @__PURE__ */ c(t, {
-				id: P,
-				children: w
-			}),
-			T && /* @__PURE__ */ c("span", {
-				id: F,
-				className: "select-field__helper",
-				children: T
-			})
-		]
+var p = s(function({ id: s, label: l, optional: p, optionalLabel: m, labelHidden: h, options: g, value: _, defaultValue: v, placeholder: y, name: b, disabled: x, required: S, size: C, error: w = !1, errorMessage: T, helperText: E, className: D, onValueChange: O, onBlur: k }, A) {
+	let j = i(h), M = e(C), N = r(p, S), P = a({
+		id: s,
+		error: w,
+		errorMessage: T,
+		helperText: E
+	}), { id: F } = P, I = g.some((e) => n(e) ? e.options.some((e) => e.value === "") : e.value === "");
+	return /* @__PURE__ */ c(o, {
+		field: P,
+		block: "select-field",
+		className: D,
+		label: l,
+		optional: N,
+		optionalLabel: m,
+		labelHidden: j,
+		size: M,
+		children: /* @__PURE__ */ c(t, {
+			ref: A,
+			id: F,
+			name: b,
+			required: S,
+			options: I ? g.map((e) => n(e) ? {
+				...e,
+				options: e.options.map(f)
+			} : f(e)) : g,
+			value: u(_, I),
+			defaultValue: u(v, I),
+			placeholder: y,
+			disabled: x,
+			size: M,
+			"aria-describedby": P.describedBy,
+			"aria-invalid": P.hasError,
+			onValueChange: O ? (e) => O(d(e)) : void 0,
+			onBlur: k
+		})
 	});
 });
 //#endregion
-export { m as SelectField };
+export { p as SelectField };

package/dist/select.css

@@ -1 +1 @@
-.select{justify-content:space-between;align-items:center;gap:var(--select-icon-gap);block-size:var(--select-height);padding-block:0;padding-inline:var(--select-padding-inline);font-family:var(--select-font-family);font-size:var(--select-font-size);line-height:var(--select-line-height);font-weight:var(--select-font-weight);color:var(--select-color);background-color:var(--select-bg);border-width:var(--select-border-width);border-style:var(--select-border-style);border-color:var(--select-border-color);border-radius:var(--select-border-radius);box-sizing:border-box;cursor:pointer;width:100%;display:inline-flex}.select:focus,.select[data-popup-open]{outline:none}.select:focus-visible{outline:var(--select-focus-ring-width) solid var(--select-focus-ring-color);outline-offset:calc(-1 * (var(--select-focus-ring-width) + var(--select-border-width)))}.select .select__icon{--icon-size:var(--select-icon-size)}.select__icon{transition:transform var(--select-icon-transition) var(--motion-easing-default);flex-shrink:0;transform:rotate(90deg)}[data-popup-open] .select__icon{transform:rotate(-90deg)}.select__positioner{z-index:var(--select-content-z-index)}.select__content{background-color:var(--select-content-bg);border-width:var(--select-border-width);border-style:var(--select-border-style);border-color:var(--select-content-border-color);min-width:var(--anchor-width);max-height:var(--select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.select__content[data-side=bottom]{border-top:none}.select__content[data-side=top]{border-bottom:none}.select__item{width:100%;padding-block:var(--select-item-padding-block);padding-inline:var(--select-padding-inline);font-size:var(--select-font-size);font-family:var(--select-font-family);cursor:pointer;align-items:center;display:flex}.select__item[data-highlighted]{background-color:var(--select-item-highlighted-bg);color:var(--select-item-highlighted-color)}.select__item[data-selected]{font-weight:var(--select-item-selected-font-weight)}.select__content .select__item+.select__item,.select__content[data-side=bottom] .select__item:first-child{border-top:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__content[data-side=top] .select__item:last-child{border-bottom:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select.select--sm{block-size:var(--select-sm-height);font-size:var(--select-sm-font-size);padding-inline:var(--select-sm-padding-inline);--select-icon-size:var(--select-sm-icon-size)}.select__content--sm .select__item{font-size:var(--select-sm-font-size);padding-block:var(--select-sm-item-padding-block)}.select.select--lg{block-size:var(--select-lg-height);font-size:var(--select-lg-font-size);padding-inline:var(--select-lg-padding-inline);--select-icon-size:var(--select-lg-icon-size)}.select__content--lg .select__item{font-size:var(--select-lg-font-size);padding-block:var(--select-lg-item-padding-block)}.select__content .select__group:not(:first-child)>.select__label,.select__content[data-side=bottom] .select__group:first-child>.select__label,.select__content .select__group+.select__item{border-top:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__content[data-side=top] .select__group:last-child>.select__item:last-child{border-bottom:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__label{padding-block:var(--select-item-padding-block);padding-inline:var(--select-padding-inline);font-family:var(--label-font-family);font-size:var(--label-font-size);font-weight:var(--label-font-weight);line-height:var(--label-line-height);color:var(--label-color);letter-spacing:var(--label-letter-spacing)}.select__separator{height:var(--select-separator-height);background-color:var(--select-separator-color);margin-block:var(--select-item-padding-block)}.select[aria-invalid=true]{border-color:var(--select-error-border-color)}
+.select{justify-content:space-between;align-items:center;gap:var(--select-icon-gap);block-size:var(--select-height);padding-block:0;padding-inline:var(--select-padding-inline);font-family:var(--select-font-family);font-size:var(--select-font-size);line-height:var(--select-line-height);font-weight:var(--select-font-weight);color:var(--select-color);background-color:var(--select-bg);border-width:var(--select-border-width);border-style:var(--select-border-style);border-color:var(--select-border-color);border-radius:var(--select-border-radius);box-sizing:border-box;cursor:pointer;inline-size:100%;display:inline-flex}.select:focus,.select[data-popup-open]{outline:none}.select:focus-visible{outline:var(--select-focus-ring-width) solid var(--select-focus-ring-color);outline-offset:calc(-1 * (var(--select-focus-ring-width) + var(--select-border-width)))}.select .select__icon{--icon-size:var(--select-icon-size)}.select__icon{transition:transform var(--select-icon-transition) var(--motion-easing-default);flex-shrink:0;transform:rotate(90deg)}[data-popup-open] .select__icon{transform:rotate(-90deg)}.select__positioner{z-index:var(--select-content-z-index)}.select__content{background-color:var(--select-content-bg);border-width:var(--select-border-width);border-style:var(--select-border-style);border-color:var(--select-content-border-color);min-inline-size:var(--anchor-width);max-block-size:var(--select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.select__content[data-side=bottom]{border-block-start:none}.select__content[data-side=top]{border-block-end:none}.select__item{inline-size:100%;padding-block:var(--select-item-padding-block);padding-inline:var(--select-padding-inline);font-size:var(--select-font-size);font-family:var(--select-font-family);cursor:pointer;align-items:center;display:flex}.select__item[data-highlighted]{background-color:var(--select-item-highlighted-bg);color:var(--select-item-highlighted-color)}.select__item[data-selected]{font-weight:var(--select-item-selected-font-weight)}.select__content .select__item+.select__item,.select__content[data-side=bottom] .select__item:first-child{border-block-start:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__content[data-side=top] .select__item:last-child{border-block-end:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select.select--sm{block-size:var(--select-sm-height);font-size:var(--select-sm-font-size);padding-inline:var(--select-sm-padding-inline);--select-icon-size:var(--select-sm-icon-size)}.select__content--sm .select__item{font-size:var(--select-sm-font-size);padding-block:var(--select-sm-item-padding-block)}.select.select--lg{block-size:var(--select-lg-height);font-size:var(--select-lg-font-size);padding-inline:var(--select-lg-padding-inline);--select-icon-size:var(--select-lg-icon-size)}.select__content--lg .select__item{font-size:var(--select-lg-font-size);padding-block:var(--select-lg-item-padding-block)}.select__content .select__group:not(:first-child)>.select__label,.select__content[data-side=bottom] .select__group:first-child>.select__label,.select__content .select__group+.select__item{border-block-start:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__content[data-side=top] .select__group:last-child>.select__item:last-child{border-block-end:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__label{padding-block:var(--select-item-padding-block);padding-inline:var(--select-padding-inline);font-family:var(--label-font-family);font-size:var(--label-font-size);font-weight:var(--label-font-weight);line-height:var(--label-line-height);color:var(--label-color);letter-spacing:var(--label-letter-spacing)}.select__separator{block-size:var(--select-separator-height);background-color:var(--select-separator-color);margin-block:var(--select-item-padding-block)}.select[aria-invalid=true]{border-color:var(--select-error-border-color)}