@studiolxd/brand 50.0.0 → 51.0.0

package/dist/_shared/imagecropdialog.js

@@ -1,14 +1,15 @@
 import '../imagecropdialog.css';
-import { n as e } from "./brandmessagescontext.js";
-import { Spinner as t } from "../spinner.js";
-import { Button as n } from "../button.js";
-import { Alert as r } from "../alert.js";
-import { Modal as i } from "../modal.js";
-import { useRef as a, useState as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import u, { centerCrop as d, makeAspectCrop as f } from "react-image-crop";
+import { n as e } from "./env.js";
+import { r as t } from "./brandmessagescontext.js";
+import { Spinner as n } from "../spinner.js";
+import { Button as r } from "../button.js";
+import { t as i } from "./alert.js";
+import { t as a } from "./modal.js";
+import { useRef as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import d, { centerCrop as f, makeAspectCrop as p } from "react-image-crop";
 //#region src/stories/molecules/ImageCropDialog/crop.ts
-async function p(e, t, n = {}) {
+async function m(e, t, n = {}) {
 	let r = n.outputSize ?? 512, i = n.mimeType ?? "image/jpeg", a = n.quality ?? .9, o = document.createElement("canvas");
 	o.width = r, o.height = r;
 	let s = o.getContext("2d");
@@ -18,8 +19,8 @@ async function p(e, t, n = {}) {
 		o.toBlob((n) => n ? e(n) : t(/* @__PURE__ */ Error("Canvas toBlob returned null")), i, a);
 	});
 }
-function m(e, t, n) {
-	return d(f(t / n >= e ? {
+function h(e, t, n) {
+	return f(p(t / n >= e ? {
 		unit: "%",
 		height: 100
 	} : {
@@ -28,69 +29,76 @@ function m(e, t, n) {
 	}, e, t, n), t, n);
 }
 //#endregion
+//#region src/stories/messages/es/imageCropDialog.ts
+var g = {
+	loading: "Cargando imagen…",
+	error: "No hemos podido cargar la imagen. Prueba con otro archivo."
+};
+//#endregion
 //#region src/stories/molecules/ImageCropDialog/ImageCropDialog.tsx
-function h({ sourceUrl: d, title: f, description: h, circularCrop: g = !1, aspect: _ = 1, outputSize: v = 512, outputMimeType: y, busy: b = !1, cancelLabel: x, confirmLabel: S, closeLabel: C, loadingLabel: w, errorMessage: T, onConfirm: E, onClose: D, className: O }) {
-	let k = e("imageCropDialog"), A = a(null), [j, M] = o(), [N, P] = o(), [F, I] = o("loading"), [L, R] = o(d);
-	d !== L && (R(d), I("loading"), M(void 0), P(void 0));
-	let z = () => {
-		M(void 0), P(void 0), D();
-	}, B = async () => {
-		let e = A.current;
-		!e || !N || N.width === 0 || (await E(await p(e, N, {
-			mimeType: y,
-			outputSize: v
-		})), z());
+function _({ sourceUrl: f, title: p, description: _, circularCrop: v = !1, aspect: y = 1, outputSize: b = 512, outputMimeType: x, busy: S = !1, cancelLabel: C, confirmLabel: w, closeLabel: T, loadingLabel: E, errorMessage: D, onConfirm: O, onOpenChange: k, onClose: A, className: j }) {
+	A !== void 0 && e("ImageCropDialog", "onClose", "`onOpenChange`");
+	let M = t("imageCropDialog", g), N = o(null), [P, F] = s(), [I, L] = s(), [R, z] = s("loading"), [B, V] = s(f);
+	f !== B && (V(f), z("loading"), F(void 0), L(void 0));
+	let H = () => {
+		F(void 0), L(void 0), k?.(!1), A?.();
+	}, U = async () => {
+		let e = N.current;
+		!e || !I || I.width === 0 || (await O(await m(e, I, {
+			mimeType: x,
+			outputSize: b
+		})), H());
 	};
-	return /* @__PURE__ */ c(i, {
-		open: d !== null,
-		onClose: () => {
-			b || z();
+	return /* @__PURE__ */ l(a, {
+		open: f !== null,
+		onOpenChange: (e) => {
+			!e && !S && H();
 		},
-		title: f,
-		...C ? { closeLabel: C } : {},
-		...h == null ? {} : { description: h },
+		title: p,
+		...T ? { closeLabel: T } : {},
+		..._ == null ? {} : { description: _ },
 		footerClassName: "image-crop-dialog__actions",
-		footer: /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(n, {
+		footer: /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(r, {
 			variant: "outline",
-			disabled: b,
-			onClick: z,
-			children: x
-		}), /* @__PURE__ */ c(n, {
-			disabled: b || !N?.width,
-			onClick: B,
-			children: S
+			disabled: S,
+			onClick: H,
+			children: C
+		}), /* @__PURE__ */ l(r, {
+			disabled: S || !I?.width,
+			onClick: U,
+			children: w
 		})] }),
-		children: /* @__PURE__ */ c("div", {
-			className: ["image-crop-dialog", O].filter(Boolean).join(" "),
-			children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ l("div", {
+			className: ["image-crop-dialog", j].filter(Boolean).join(" "),
+			children: /* @__PURE__ */ u("div", {
 				className: "image-crop-dialog__area",
 				children: [
-					F === "loading" && /* @__PURE__ */ c(t, {
+					R === "loading" && /* @__PURE__ */ l(n, {
 						size: "lg",
-						label: k("loading", w)
+						label: M("loading", E)
 					}),
-					F === "error" && /* @__PURE__ */ c(r, {
-						variant: "error",
-						description: k("error", T),
+					R === "error" && /* @__PURE__ */ l(i, {
+						tone: "error",
+						description: M("error", D),
 						className: "image-crop-dialog__error"
 					}),
-					d && F !== "error" && /* @__PURE__ */ c(u, {
-						crop: j,
-						onChange: (e, t) => M(t),
-						onComplete: (e) => P(e),
-						aspect: _,
-						circularCrop: g,
+					f && R !== "error" && /* @__PURE__ */ l(d, {
+						crop: P,
+						onChange: (e, t) => F(t),
+						onComplete: (e) => L(e),
+						aspect: y,
+						circularCrop: v,
 						minWidth: 64,
 						keepSelection: !0,
-						children: /* @__PURE__ */ c("img", {
-							ref: A,
-							src: d,
+						children: /* @__PURE__ */ l("img", {
+							ref: N,
+							src: f,
 							alt: "",
 							onLoad: (e) => {
 								let { width: t, height: n } = e.currentTarget;
-								I("ready"), M(m(_, t, n));
+								z("ready"), F(h(y, t, n));
 							},
-							onError: () => I("error")
+							onError: () => z("error")
 						})
 					})
 				]
@@ -99,4 +107,4 @@ function h({ sourceUrl: d, title: f, description: h, circularCrop: g = !1, aspec
 	});
 }
 //#endregion
-export { h as t };
+export { _ as t };

package/dist/_shared/inputfield.js

@@ -0,0 +1,92 @@
+import '../inputfield.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { n } from "./form-size.js";
+import { Input as r } from "../input.js";
+import { n as i } from "./field-optional.js";
+import { n as a } from "./field-labels.js";
+import { a as o, n as s } from "./fieldshell.js";
+import { forwardRef as c, useImperativeHandle as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/stories/messages/es/inputField.ts
+var m = { clear: "Borrar" }, h = c(function({ id: c, label: h, optional: g, optionalLabel: _, labelHidden: v, name: y, type: b, kind: x = "text", clearable: S = !1, clearLabel: C, onClear: w, placeholder: T, value: E, defaultValue: D, disabled: O, readOnly: k, size: A, error: j = !1, errorMessage: M, helperText: N, onChange: P, onBlur: F, onFocus: I, className: L, ...R }, z) {
+	let B = e("inputField", m), V = a(v), H = n(A), U = i(g, R.required), W = o({
+		id: c,
+		error: j,
+		errorMessage: M,
+		helperText: N,
+		describedBy: R["aria-describedby"]
+	}), G = x === "search", K = u(null);
+	l(z, () => K.current);
+	let [q, J] = d(() => (D ?? "") !== ""), Y = G && S && (E === void 0 ? q : E !== "") && !O && !k;
+	function X(e) {
+		E === void 0 && J(e.target.value !== ""), P?.(e);
+	}
+	function Z() {
+		let e = K.current;
+		e && ((Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 })), J(!1), e.focus(), w?.());
+	}
+	let Q = /* @__PURE__ */ f(r, {
+		ref: K,
+		...G ? {
+			type: "text",
+			autoComplete: "off",
+			enterKeyHint: "search"
+		} : { type: b },
+		...R,
+		id: c,
+		name: y,
+		placeholder: T ?? (V ? h : void 0),
+		value: E,
+		defaultValue: D,
+		disabled: O,
+		readOnly: k,
+		size: H,
+		error: W.hasError,
+		"aria-describedby": W.describedBy,
+		onChange: X,
+		onBlur: F,
+		onFocus: I
+	});
+	return /* @__PURE__ */ f(s, {
+		field: W,
+		block: "input-field",
+		className: L,
+		label: h,
+		optional: U,
+		optionalLabel: _,
+		labelHidden: V,
+		size: H,
+		children: G ? /* @__PURE__ */ p("div", {
+			className: [
+				"input-field__search",
+				H === "md" ? "" : `input-field__search--${H}`,
+				S ? "input-field__search--clearable" : ""
+			].filter(Boolean).join(" "),
+			children: [
+				/* @__PURE__ */ f("span", {
+					className: "input-field__search-icon",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ f(t, {
+						name: "search",
+						className: "input-field__search-glyph"
+					})
+				}),
+				Q,
+				Y && /* @__PURE__ */ f("button", {
+					type: "button",
+					className: "input-field__clear",
+					"aria-label": B("clear", C),
+					"aria-controls": c,
+					onClick: Z,
+					children: /* @__PURE__ */ f(t, {
+						name: "close",
+						className: "input-field__search-glyph"
+					})
+				})
+			]
+		}) : Q
+	});
+});
+//#endregion
+export { h as t };

package/dist/_shared/inputphone.js

@@ -0,0 +1,91 @@
+import '../inputphone.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { n } from "./portal-container.js";
+import { t as r } from "./assign-ref.js";
+import { forwardRef as i, useMemo as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Select as c } from "@base-ui/react/select";
+import l, { getCountryCallingCode as u } from "react-phone-number-input";
+//#region src/stories/messages/es/inputPhone.ts
+var d = { country: "País" };
+//#endregion
+//#region src/stories/atoms/InputPhone/InputPhone.tsx
+function f({ value: r, onChange: i, options: a, disabled: l, size: f = "md", countryLabel: p, internationalLabel: m = "🌐", container: h }) {
+	let g = e("inputPhone", d), _ = n(h), v = "__intl__", y = (e) => e ?? v, b = (e) => e === v ? void 0 : e, x = f === "lg" ? "md" : "sm", S = ["input-phone__country-content", f === "md" ? "" : `input-phone__country-content--${f}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ s(c.Root, {
+		value: y(r),
+		onValueChange: (e) => i(b(e)),
+		disabled: l,
+		children: [/* @__PURE__ */ s(c.Trigger, {
+			className: "input-phone__country",
+			"aria-label": g("country", p),
+			children: [/* @__PURE__ */ o(c.Value, { children: r ? `+${u(r)}` : m }), /* @__PURE__ */ o(t, {
+				name: "chevron",
+				className: "input-phone__country-icon",
+				size: x
+			})]
+		}), /* @__PURE__ */ o(c.Portal, {
+			container: _,
+			children: /* @__PURE__ */ o(c.Positioner, {
+				className: "input-phone__country-positioner",
+				side: "bottom",
+				align: "start",
+				alignItemWithTrigger: !1,
+				children: /* @__PURE__ */ o(c.Popup, {
+					className: S,
+					children: a.map(({ value: e, label: t }) => /* @__PURE__ */ o(c.Item, {
+						value: y(e),
+						className: "input-phone__country-item",
+						children: /* @__PURE__ */ o(c.ItemText, { children: t })
+					}, y(e)))
+				})
+			})
+		})]
+	});
+}
+var p = i(function({ value: e, defaultCountry: t = "ES", placeholder: n, disabled: s, error: c = !1, size: u = "md", id: d, name: p, describedBy: m, "aria-describedby": h, "aria-label": g, autoComplete: _, required: v, readOnly: y, onChange: b, onBlur: x, onFocus: S, countryLabel: C, internationalLabel: w, container: T, className: E }, D) {
+	return /* @__PURE__ */ o(l, {
+		className: [
+			"input-phone",
+			c ? "input-phone--error" : "",
+			u === "md" ? "" : `input-phone--${u}`,
+			E ?? ""
+		].filter(Boolean).join(" "),
+		value: e,
+		defaultCountry: t,
+		placeholder: n,
+		disabled: s,
+		readOnly: y,
+		required: v,
+		autoComplete: _,
+		id: d,
+		name: p,
+		inputComponent: a(() => i(function(e, t) {
+			return /* @__PURE__ */ o("input", {
+				...e,
+				ref: (e) => {
+					r(t, e), r(D, e);
+				},
+				className: "input-phone__number"
+			});
+		}), [D]),
+		countrySelectComponent: f,
+		countrySelectProps: {
+			size: u,
+			countryLabel: C,
+			internationalLabel: w,
+			container: T
+		},
+		onChange: (e) => b?.(e),
+		onBlur: x,
+		onFocus: S,
+		numberInputProps: {
+			"aria-describedby": h ?? m,
+			"aria-label": g,
+			"aria-invalid": c || void 0
+		}
+	});
+});
+//#endregion
+export { p as t };

package/dist/_shared/legalfooter.js

@@ -0,0 +1,42 @@
+import '../legalfooter.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Container as t } from "../container.js";
+import { Heading as n } from "../heading.js";
+import { t as r } from "./default-render-link.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/stories/messages/es/legalFooter.ts
+var o = { label: "Legal" };
+//#endregion
+//#region src/stories/sections/LegalFooter/LegalFooter.tsx
+function s({ label: s, title: c, links: l, renderLink: u = r, width: d = "xl", surface: f, as: p = "footer", className: m }) {
+	let h = e("legalFooter", o);
+	return /* @__PURE__ */ i(p, {
+		className: [
+			"legal-footer",
+			f === "dark" && "surface-dark",
+			m
+		].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ a(t, {
+			width: d,
+			innerClassName: "legal-footer__inner",
+			children: [c && /* @__PURE__ */ i(n, {
+				level: 2,
+				size: 6,
+				className: "legal-footer__title",
+				children: c
+			}), /* @__PURE__ */ i("nav", {
+				"aria-label": h("label", s),
+				children: /* @__PURE__ */ i("ul", {
+					className: "legal-footer__links",
+					children: l.map((e) => /* @__PURE__ */ i("li", { children: u({
+						href: e.href,
+						className: "legal-footer__link link--ink",
+						children: e.label
+					}) }, e.id))
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { s as t };

package/dist/_shared/logo.js

@@ -1,19 +1,20 @@
 import '../logo.css';
-import { r as e, t } from "./logoassets.js";
-import { jsx as n } from "react/jsx-runtime";
+import { n as e } from "./env.js";
+import { r as t, t as n } from "./logoassets.js";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/stories/atoms/Logo/Logo.tsx
-function r({ size: r = "md", className: i }) {
-	return /* @__PURE__ */ n("svg", {
+function i({ size: i = "md", className: a }) {
+	return i === "xxl" && e("Logo", "size=\"xxl\"", "`size=\"2xl\"`"), /* @__PURE__ */ r("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: e,
+		viewBox: t,
 		className: [
 			"logo",
-			`logo--${r}`,
-			i
+			`logo--${i === "xxl" ? "2xl" : i}`,
+			a
 		].filter(Boolean).join(" "),
 		"aria-hidden": "true",
-		children: t.map((e) => /* @__PURE__ */ n("path", { d: e }, e))
+		children: n.map((e) => /* @__PURE__ */ r("path", { d: e }, e))
 	});
 }
 //#endregion
-export { r as t };
+export { i as t };

package/dist/_shared/menubutton.js

@@ -0,0 +1,31 @@
+import '../menubutton.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/stories/messages/es/menuButton.ts
+var i = {
+	open: "Menú de navegación",
+	close: "Cerrar menú"
+}, a = n(function({ isOpen: n = !1, label: a, closeLabel: o, size: s = "md", className: c, ...l }, u) {
+	let d = e("menuButton", i);
+	return /* @__PURE__ */ r("button", {
+		ref: u,
+		type: "button",
+		className: [
+			"menu-button",
+			`menu-button--${s}`,
+			c
+		].filter(Boolean).join(" "),
+		"aria-label": n ? d("close", o) : d("open", a),
+		"aria-expanded": n,
+		...l,
+		children: /* @__PURE__ */ r(t, {
+			name: "menu",
+			size: s === "lg" ? "lg" : "md",
+			className: "menu-button__icon"
+		})
+	});
+});
+//#endregion
+export { a as t };

package/dist/_shared/modal.js

@@ -0,0 +1,69 @@
+import '../modal.css';
+import { n as e } from "./env.js";
+import { r as t } from "./brandmessagescontext.js";
+import { VisuallyHidden as n } from "../visually-hidden.js";
+import { n as r } from "./portal-container.js";
+import { t as i } from "./closebutton.js";
+import { n as a, r as o, t as s } from "./dialogsurface.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Dialog as d } from "@base-ui/react/dialog";
+//#region src/stories/messages/es/modal.ts
+var f = {
+	close: "Cerrar",
+	fallbackTitle: "Diálogo"
+};
+//#endregion
+//#region src/stories/molecules/Modal/Modal.tsx
+function p({ open: p, onOpenChange: m, onClose: h, title: g, children: _, closeLabel: v, fallbackTitle: y, container: b, description: x, "aria-describedby": S, initialFocus: C, footer: w, footerClassName: T, className: E, ...D }) {
+	let O = t("modal", f), k = r(b), A = S === void 0 ? {} : { "aria-describedby": S }, j = C === void 0 ? {} : { initialFocus: C };
+	return h !== void 0 && e("Modal", "onClose", "`onOpenChange`"), /* @__PURE__ */ l(d.Root, {
+		open: p,
+		onOpenChange: (e) => {
+			m?.(e), e || h?.();
+		},
+		children: /* @__PURE__ */ u(d.Portal, {
+			container: k,
+			children: [/* @__PURE__ */ l(o, { className: "modal__overlay" }), /* @__PURE__ */ u(d.Popup, {
+				className: ["modal__content", E].filter(Boolean).join(" "),
+				...A,
+				...j,
+				...D,
+				children: [
+					g ? /* @__PURE__ */ u(a, {
+						layout: "inline",
+						className: "modal__header",
+						children: [/* @__PURE__ */ l(d.Title, {
+							className: "modal__title",
+							children: g
+						}), /* @__PURE__ */ l(d.Close, {
+							className: "modal__close",
+							render: /* @__PURE__ */ l(i, { label: O("close", v) })
+						})]
+					}) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(d.Title, { render: /* @__PURE__ */ l(n, { children: O("fallbackTitle", y) }) }), /* @__PURE__ */ l(a, {
+						layout: "inline",
+						noTitle: !0,
+						className: "modal__header modal__header--no-title",
+						children: /* @__PURE__ */ l(d.Close, {
+							className: "modal__close",
+							render: /* @__PURE__ */ l(i, { label: O("close", v) })
+						})
+					})] }),
+					x != null && /* @__PURE__ */ l(d.Description, {
+						className: "modal__description",
+						children: x
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "modal__body",
+						children: _
+					}),
+					w != null && /* @__PURE__ */ l(s, {
+						className: ["modal__footer", T].filter(Boolean).join(" "),
+						children: w
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { p as t };

package/dist/_shared/multiselect.js

@@ -0,0 +1,128 @@
+import '../multiselect.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { n } from "./portal-container.js";
+import { t as r } from "./assign-ref.js";
+import { forwardRef as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Select as l } from "@base-ui/react/select";
+//#region src/stories/messages/es/multiSelect.ts
+var u = {
+	placeholder: "Seleccionar…",
+	remove: (e) => `Quitar ${e}`
+}, d = i(function({ options: i, value: d, defaultValue: f = [], placeholder: p, disabled: m, readOnly: h, required: g, size: _ = "md", onValueChange: v, id: y, name: b, error: x = !1, onBlur: S, className: C, "aria-label": w, "aria-labelledby": T, "aria-describedby": E, removeLabel: D, container: O }, k) {
+	let A = e("multiSelect", u), j = n(O), [M, N] = o(!1), [P, F] = o(f), I = a(null), L = a(null), R = a(null), z = d === void 0 ? P : d;
+	function B(e) {
+		d === void 0 && F(e), v?.(e);
+	}
+	function V(e) {
+		B(z.filter((t) => t !== e));
+	}
+	function H(e) {
+		m || h || e.target instanceof Element && (e.target.closest(".multi-select__pill-remove") || L.current?.contains(e.target) || (e.preventDefault(), L.current?.focus(), N(!M)));
+	}
+	function U(e) {
+		return e instanceof Node && (!!L.current?.contains(e) || !!R.current?.contains(e));
+	}
+	function W(e) {
+		U(e.relatedTarget) || S?.(e);
+	}
+	let G = [
+		"multi-select",
+		_ === "md" ? "" : `multi-select--${_}`,
+		m ? "multi-select--disabled" : "",
+		x ? "multi-select--error" : "",
+		C ?? ""
+	].filter(Boolean).join(" "), K = ["multi-select__content", _ === "md" ? "" : `multi-select__content--${_}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ c(l.Root, {
+		multiple: !0,
+		value: z,
+		onValueChange: B,
+		open: M,
+		onOpenChange: N,
+		name: b,
+		disabled: m,
+		readOnly: h,
+		required: g,
+		modal: !1,
+		children: [/* @__PURE__ */ c("div", {
+			ref: I,
+			className: G,
+			"data-popup-open": M || void 0,
+			onPointerDown: H,
+			children: [/* @__PURE__ */ c("div", {
+				className: "multi-select__values",
+				children: [z.map((e) => {
+					let n = i.find((t) => t.value === e);
+					return n ? /* @__PURE__ */ c("span", {
+						className: "multi-select__pill",
+						children: [/* @__PURE__ */ s("span", {
+							className: "multi-select__pill-label",
+							children: n.label
+						}), !m && !h && /* @__PURE__ */ s("button", {
+							type: "button",
+							className: "multi-select__pill-remove",
+							"aria-label": A("remove", D)(n.label),
+							tabIndex: -1,
+							onClick: (t) => {
+								t.stopPropagation(), V(e), L.current?.focus();
+							},
+							children: /* @__PURE__ */ s(t, {
+								name: "close",
+								size: "xs"
+							})
+						})]
+					}, e) : null;
+				}), /* @__PURE__ */ s(l.Trigger, {
+					ref: (e) => {
+						L.current = e, r(k, e);
+					},
+					render: /* @__PURE__ */ s("div", {}),
+					nativeButton: !1,
+					className: "multi-select__combobox",
+					id: y,
+					"aria-label": T ? void 0 : w ?? A("placeholder", p),
+					"aria-labelledby": T,
+					"aria-describedby": E,
+					"aria-invalid": x || void 0,
+					"aria-readonly": h || void 0,
+					onBlur: W,
+					children: z.length === 0 && /* @__PURE__ */ s("span", {
+						className: "multi-select__placeholder",
+						children: A("placeholder", p)
+					})
+				})]
+			}), /* @__PURE__ */ s(t, {
+				name: "chevron",
+				className: "multi-select__icon"
+			})]
+		}), /* @__PURE__ */ s(l.Portal, {
+			container: j,
+			children: /* @__PURE__ */ s(l.Positioner, {
+				className: "multi-select__positioner",
+				anchor: I,
+				align: "start",
+				sideOffset: -1,
+				alignItemWithTrigger: !1,
+				children: /* @__PURE__ */ s(l.Popup, {
+					ref: R,
+					className: K,
+					"aria-label": w ?? p,
+					onBlur: W,
+					children: i.map((e) => /* @__PURE__ */ c(l.Item, {
+						value: e.value,
+						"aria-label": e["aria-label"] ?? e.label,
+						className: "multi-select__item",
+						children: [/* @__PURE__ */ s("span", {
+							className: "multi-select__item-check",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ s("span", { className: "multi-select__item-check-mark" })
+						}), /* @__PURE__ */ s(l.ItemText, { children: e.label })]
+					}, e.value))
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { d as t };