@studiolxd/brand 39.0.0 → 40.1.0

package/dist/input-field.js

@@ -6,17 +6,17 @@ import { ErrorText as n } from "./error-text.js";
 import { Input as r } from "./input.js";
 import { Label as i } from "./label.js";
 import { n as a } from "./_shared/field-labels.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as c, useImperativeHandle as l, useRef as u, useState as d } from "react";
+import { forwardRef as o, useImperativeHandle as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/stories/molecules/InputField/InputField.tsx
-var f = c(function({ id: c, label: f, labelHidden: p, name: m, type: h, kind: g = "text", clearable: _ = !1, clearLabel: v = "Borrar", onClear: y, placeholder: b, value: x, defaultValue: S, disabled: C, readOnly: w, size: T, error: E = !1, errorMessage: D, helperText: O, onChange: k, onBlur: A, onFocus: j, className: M, ...N }, P) {
-	let F = a(p), I = t(T), L = D ? `${c}-error` : void 0, R = O ? `${c}-helper` : void 0, z = [
+var f = o(function({ id: o, label: f, labelHidden: p, name: m, type: h, kind: g = "text", clearable: _ = !1, clearLabel: v = "Borrar", onClear: y, placeholder: b, value: x, defaultValue: S, disabled: C, readOnly: w, size: T, error: E = !1, errorMessage: D, helperText: O, onChange: k, onBlur: A, onFocus: j, className: M, ...N }, P) {
+	let F = a(p), I = t(T), L = D ? `${o}-error` : void 0, R = O ? `${o}-helper` : void 0, z = [
 		L,
 		R,
 		N["aria-describedby"]
-	].filter(Boolean).join(" ") || void 0, B = E || !!D, V = g === "search", H = u(null);
-	l(P, () => H.current);
-	let [U, W] = d(() => (S ?? "") !== ""), G = V && _ && (x === void 0 ? U : x !== "") && !C && !w;
+	].filter(Boolean).join(" ") || void 0, B = E || !!D, V = g === "search", H = c(null);
+	s(P, () => H.current);
+	let [U, W] = l(() => (S ?? "") !== ""), G = V && _ && (x === void 0 ? U : x !== "") && !C && !w;
 	function K(e) {
 		x === void 0 && W(e.target.value !== ""), k?.(e);
 	}
@@ -24,7 +24,7 @@ var f = c(function({ id: c, label: f, labelHidden: p, name: m, type: h, kind: g
 		let e = H.current;
 		e && ((Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 })), W(!1), e.focus(), y?.());
 	}
-	let J = /* @__PURE__ */ o(r, {
+	let J = /* @__PURE__ */ u(r, {
 		ref: H,
 		...V ? {
 			type: "text",
@@ -32,7 +32,7 @@ var f = c(function({ id: c, label: f, labelHidden: p, name: m, type: h, kind: g
 			enterKeyHint: "search"
 		} : { type: h },
 		...N,
-		id: c,
+		id: o,
 		name: m,
 		placeholder: b ?? (F ? f : void 0),
 		value: x,
@@ -46,49 +46,49 @@ var f = c(function({ id: c, label: f, labelHidden: p, name: m, type: h, kind: g
 		onBlur: A,
 		onFocus: j
 	});
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ d("div", {
 		className: ["input-field", M].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ o(i, {
-				htmlFor: c,
+			/* @__PURE__ */ u(i, {
+				htmlFor: o,
 				hidden: F,
 				size: I,
 				children: f
 			}),
-			V ? /* @__PURE__ */ s("div", {
+			V ? /* @__PURE__ */ d("div", {
 				className: [
 					"input-field__search",
 					I === "md" ? "" : `input-field__search--${I}`,
 					_ ? "input-field__search--clearable" : ""
 				].filter(Boolean).join(" "),
 				children: [
-					/* @__PURE__ */ o("span", {
+					/* @__PURE__ */ u("span", {
 						className: "input-field__search-icon",
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ o(e, {
+						children: /* @__PURE__ */ u(e, {
 							name: "search",
 							className: "input-field__search-glyph"
 						})
 					}),
 					J,
-					G && /* @__PURE__ */ o("button", {
+					G && /* @__PURE__ */ u("button", {
 						type: "button",
 						className: "input-field__clear",
 						"aria-label": v,
-						"aria-controls": c,
+						"aria-controls": o,
 						onClick: q,
-						children: /* @__PURE__ */ o(e, {
+						children: /* @__PURE__ */ u(e, {
 							name: "close",
 							className: "input-field__search-glyph"
 						})
 					})
 				]
 			}) : J,
-			D && /* @__PURE__ */ o(n, {
+			D && /* @__PURE__ */ u(n, {
 				id: L,
 				children: D
 			}),
-			O && /* @__PURE__ */ o("span", {
+			O && /* @__PURE__ */ u("span", {
 				id: R,
 				className: "input-field__helper",
 				children: O

package/dist/input-phone-field.js

@@ -5,21 +5,21 @@ import { ErrorText as t } from "./error-text.js";
 import { InputPhone as n } from "./input-phone.js";
 import { Label as r } from "./label.js";
 import { n as i } from "./_shared/field-labels.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { forwardRef as s, useId as c } from "react";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/stories/molecules/InputPhoneField/InputPhoneField.tsx
-var l = s(function({ id: s, label: l, labelHidden: u, value: d, defaultCountry: f, placeholder: p, disabled: m, readOnly: h, required: g, name: _, autoComplete: v, error: y = !1, errorMessage: b, helperText: x, size: S, className: C, countryLabel: w, internationalLabel: T, onChange: E, onBlur: D, onFocus: O }, k) {
-	let A = i(u), j = e(S), M = c(), N = s ?? M, P = b ? `${N}-error` : void 0, F = x ? `${N}-helper` : void 0, I = [P, F].filter(Boolean).join(" ") || void 0, L = y || !!b;
-	return /* @__PURE__ */ o("div", {
+var l = a(function({ id: a, label: l, labelHidden: u, value: d, defaultCountry: f, placeholder: p, disabled: m, readOnly: h, required: g, name: _, autoComplete: v, error: y = !1, errorMessage: b, helperText: x, size: S, className: C, countryLabel: w, internationalLabel: T, onChange: E, onBlur: D, onFocus: O }, k) {
+	let A = i(u), j = e(S), M = o(), N = a ?? M, P = b ? `${N}-error` : void 0, F = x ? `${N}-helper` : void 0, I = [P, F].filter(Boolean).join(" ") || void 0, L = y || !!b;
+	return /* @__PURE__ */ c("div", {
 		className: ["input-phone-field", C].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ a(r, {
+			/* @__PURE__ */ s(r, {
 				htmlFor: N,
 				hidden: A,
 				size: j,
 				children: l
 			}),
-			/* @__PURE__ */ a(n, {
+			/* @__PURE__ */ s(n, {
 				ref: k,
 				id: N,
 				name: _,
@@ -39,11 +39,11 @@ var l = s(function({ id: s, label: l, labelHidden: u, value: d, defaultCountry:
 				onBlur: D,
 				onFocus: O
 			}),
-			b && /* @__PURE__ */ a(t, {
+			b && /* @__PURE__ */ s(t, {
 				id: P,
 				children: b
 			}),
-			x && /* @__PURE__ */ a("span", {
+			x && /* @__PURE__ */ s("span", {
 				id: F,
 				className: "input-phone-field__helper",
 				children: x

package/dist/input-phone.js

@@ -1,53 +1,53 @@
 'use client';
 import './input-phone.css';
 import { Icon as e } from "./icon.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { forwardRef as r, useMemo as i } from "react";
+import { forwardRef as t, useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Select as a } from "@base-ui/react/select";
 import o, { getCountryCallingCode as s } from "react-phone-number-input";
 //#region src/stories/atoms/InputPhone/InputPhone.tsx
-function c({ value: r, onChange: i, options: o, disabled: c, size: l = "md", countryLabel: u = "País", internationalLabel: d = "🌐", container: f }) {
+function c({ value: t, onChange: n, options: o, disabled: c, size: l = "md", countryLabel: u = "País", internationalLabel: d = "🌐", container: f }) {
 	let p = "__intl__", m = (e) => e ?? p, h = (e) => e === p ? void 0 : e, g = l === "sm" ? "xs" : l === "lg" ? "md" : "sm", _ = ["input-phone__country-content", l === "md" ? "" : `input-phone__country-content--${l}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ n(a.Root, {
-		value: m(r),
-		onValueChange: (e) => i(h(e)),
+	return /* @__PURE__ */ i(a.Root, {
+		value: m(t),
+		onValueChange: (e) => n(h(e)),
 		disabled: c,
-		children: [/* @__PURE__ */ n(a.Trigger, {
+		children: [/* @__PURE__ */ i(a.Trigger, {
 			className: "input-phone__country",
 			"aria-label": u,
-			children: [/* @__PURE__ */ t(a.Value, { children: r ? `+${s(r)}` : d }), /* @__PURE__ */ t(e, {
+			children: [/* @__PURE__ */ r(a.Value, { children: t ? `+${s(t)}` : d }), /* @__PURE__ */ r(e, {
 				name: "chevron",
 				className: "input-phone__country-icon",
 				size: g
 			})]
-		}), /* @__PURE__ */ t(a.Portal, {
+		}), /* @__PURE__ */ r(a.Portal, {
 			container: f,
-			children: /* @__PURE__ */ t(a.Positioner, {
+			children: /* @__PURE__ */ r(a.Positioner, {
 				className: "input-phone__country-positioner",
 				side: "bottom",
 				align: "start",
 				alignItemWithTrigger: !1,
-				children: /* @__PURE__ */ t(a.Popup, {
+				children: /* @__PURE__ */ r(a.Popup, {
 					className: _,
-					children: o.map(({ value: e, label: n }) => /* @__PURE__ */ t(a.Item, {
+					children: o.map(({ value: e, label: t }) => /* @__PURE__ */ r(a.Item, {
 						value: m(e),
 						className: "input-phone__country-item",
-						children: /* @__PURE__ */ t(a.ItemText, { children: n })
+						children: /* @__PURE__ */ r(a.ItemText, { children: t })
 					}, m(e)))
 				})
 			})
 		})]
 	});
 }
-var l = r(function({ value: e, defaultCountry: n = "ES", placeholder: a, disabled: s, error: l = !1, size: d = "md", id: f, 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 }, E) {
-	return /* @__PURE__ */ t(o, {
+var l = t(function({ value: e, defaultCountry: i = "ES", placeholder: a, disabled: s, error: l = !1, size: d = "md", id: f, 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 }, E) {
+	return /* @__PURE__ */ r(o, {
 		className: [
 			"input-phone",
 			l ? "input-phone--error" : "",
 			d === "md" ? "" : `input-phone--${d}`
 		].filter(Boolean).join(" "),
 		value: e,
-		defaultCountry: n,
+		defaultCountry: i,
 		placeholder: a,
 		disabled: s,
 		readOnly: y,
@@ -55,11 +55,11 @@ var l = r(function({ value: e, defaultCountry: n = "ES", placeholder: a, disable
 		autoComplete: _,
 		id: f,
 		name: p,
-		inputComponent: i(() => r(function(e, n) {
-			return /* @__PURE__ */ t("input", {
+		inputComponent: n(() => t(function(e, t) {
+			return /* @__PURE__ */ r("input", {
 				...e,
 				ref: (e) => {
-					u(n, e), u(E, e);
+					u(t, e), u(E, e);
 				},
 				className: "input-phone__number"
 			});

package/dist/input.js

@@ -1,14 +1,14 @@
 'use client';
 import './input.css';
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/atoms/Input/Input.tsx
-var n = t(function({ size: t = "md", error: n = !1, className: r, describedBy: i, ariaLabel: a, ...o }, s) {
-	return /* @__PURE__ */ e("input", {
+var n = e(function({ size: e = "md", error: n = !1, className: r, describedBy: i, ariaLabel: a, ...o }, s) {
+	return /* @__PURE__ */ t("input", {
 		ref: s,
 		className: [
 			"input",
-			t === "md" ? "" : `input--${t}`,
+			e === "md" ? "" : `input--${e}`,
 			n ? "input--error" : "",
 			r ?? ""
 		].filter(Boolean).join(" "),

package/dist/kbd.js

@@ -1,13 +1,13 @@
 import './kbd.css';
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/atoms/Kbd/Kbd.tsx
-var n = t(function({ size: t = "md", className: n, children: r, ...i }, a) {
-	return /* @__PURE__ */ e("kbd", {
+var n = e(function({ size: e = "md", className: n, children: r, ...i }, a) {
+	return /* @__PURE__ */ t("kbd", {
 		ref: a,
 		className: [
 			"kbd",
-			t === "md" ? "" : `kbd--${t}`,
+			e === "md" ? "" : `kbd--${e}`,
 			n ?? ""
 		].filter(Boolean).join(" "),
 		...i,

package/dist/label.js

@@ -1,9 +1,9 @@
 import './label.css';
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/atoms/Label/Label.tsx
-var n = t(function({ children: t, hidden: n = !1, size: r = "md", className: i, ...a }, o) {
-	return /* @__PURE__ */ e("label", {
+var n = e(function({ children: e, hidden: n = !1, size: r = "md", className: i, ...a }, o) {
+	return /* @__PURE__ */ t("label", {
 		ref: o,
 		className: [
 			"label",
@@ -12,7 +12,7 @@ var n = t(function({ children: t, hidden: n = !1, size: r = "md", className: i,
 			i ?? ""
 		].filter(Boolean).join(" "),
 		...a,
-		children: t
+		children: e
 	});
 });
 //#endregion

package/dist/link.js

@@ -1,21 +1,21 @@
 'use client';
 import './link.css';
 import { Icon as e } from "./icon.js";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
+import { forwardRef as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { useRender as a } from "@base-ui/react/use-render";
 //#region src/stories/atoms/Link/Link.tsx
-var o = i(function({ href: i, children: o, external: s = !1, tone: c = "accent", icon: l, iconPosition: u = "start", render: d, className: f, ...p }, m) {
+var o = t(function({ href: t, children: o, external: s = !1, tone: c = "accent", icon: l, iconPosition: u = "start", render: d, className: f, ...p }, m) {
 	let h = [
 		"link",
 		c === "ink" ? "link--ink" : c === "accent-1" ? "link--accent-1" : "",
 		l ? "link--with-icon" : "",
 		f
-	].filter(Boolean).join(" "), g = l ? /* @__PURE__ */ n(e, {
+	].filter(Boolean).join(" "), g = l ? /* @__PURE__ */ r(e, {
 		name: l,
 		size: "sm",
 		className: "link__icon"
-	}) : null, _ = /* @__PURE__ */ r(t, { children: [
+	}) : null, _ = /* @__PURE__ */ i(n, { children: [
 		u === "start" && g,
 		o,
 		u === "end" && g
@@ -29,9 +29,9 @@ var o = i(function({ href: i, children: o, external: s = !1, tone: c = "accent",
 			...p,
 			children: _
 		}
-	}) || /* @__PURE__ */ n("a", {
+	}) || /* @__PURE__ */ r("a", {
 		ref: m,
-		href: i,
+		href: t,
 		className: h,
 		...s ? {
 			target: "_blank",

package/dist/list.js

@@ -1,20 +1,20 @@
 import './list.css';
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/atoms/List/List.tsx
-var n = t(function({ type: t = "unordered", className: n, children: r, ...i }, a) {
-	return /* @__PURE__ */ e(t === "ordered" ? "ol" : "ul", {
+var n = e(function({ type: e = "unordered", className: n, children: r, ...i }, a) {
+	return /* @__PURE__ */ t(e === "ordered" ? "ol" : "ul", {
 		ref: a,
 		className: [
 			"list",
-			`list--${t}`,
+			`list--${e}`,
 			n ?? ""
 		].filter(Boolean).join(" "),
 		...i,
 		children: r
 	});
-}), r = t(function({ as: t = "li", className: n, children: r, ...i }, a) {
-	return /* @__PURE__ */ e(t, {
+}), r = e(function({ as: e = "li", className: n, children: r, ...i }, a) {
+	return /* @__PURE__ */ t(e, {
 		ref: a,
 		className: ["list__item", n ?? ""].filter(Boolean).join(" "),
 		...i,

package/dist/menu-button.js

@@ -1,11 +1,11 @@
 'use client';
 import './menu-button.css';
 import { Icon as e } from "./icon.js";
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/stories/atoms/MenuButton/MenuButton.tsx
-var r = n(function({ isOpen: n = !1, label: r = "Menú", closeLabel: i, size: a = "md", className: o, ...s }, c) {
-	return /* @__PURE__ */ t("button", {
+var r = t(function({ isOpen: t = !1, label: r = "Menú", closeLabel: i, size: a = "md", className: o, ...s }, c) {
+	return /* @__PURE__ */ n("button", {
 		ref: c,
 		type: "button",
 		className: [
@@ -13,10 +13,10 @@ var r = n(function({ isOpen: n = !1, label: r = "Menú", closeLabel: i, size: a
 			`menu-button--${a}`,
 			o
 		].filter(Boolean).join(" "),
-		"aria-label": n && i ? i : r,
-		"aria-expanded": n,
+		"aria-label": t && i ? i : r,
+		"aria-expanded": t,
 		...s,
-		children: /* @__PURE__ */ t(e, {
+		children: /* @__PURE__ */ n(e, {
 			name: "menu",
 			size: a === "lg" ? "lg" : "md",
 			className: "menu-button__icon"

package/dist/message-bubble.js

@@ -1,13 +1,13 @@
 import './message-bubble.css';
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/atoms/MessageBubble/MessageBubble.tsx
-var n = t(function({ role: t, children: n, className: r, ...i }, a) {
-	return /* @__PURE__ */ e("div", {
+var n = e(function({ role: e, children: n, className: r, ...i }, a) {
+	return /* @__PURE__ */ t("div", {
 		ref: a,
 		className: [
 			"message-bubble",
-			`message-bubble--${t}`,
+			`message-bubble--${e}`,
 			r ?? ""
 		].filter(Boolean).join(" "),
 		...i,

package/dist/message-composer.js

@@ -2,18 +2,18 @@
 import './message-composer.css';
 import { Button as e } from "./button.js";
 import { Textarea as t } from "./textarea.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { forwardRef as i, useId as a } from "react";
+import { forwardRef as n, useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/stories/molecules/MessageComposer/MessageComposer.tsx
-var o = i(function({ value: i, onChange: o, onSend: s, placeholder: c = "Escribe un mensaje…", disabled: l, sendLabel: u = "Enviar", helperText: d, actions: f, inputId: p, inputLabel: m, inputLabelledBy: h, rows: g = 2, className: _, ...v }, y) {
-	let b = `${a()}-helper`;
+var o = n(function({ value: n, onChange: o, onSend: s, placeholder: c = "Escribe un mensaje…", disabled: l, sendLabel: u = "Enviar", helperText: d, actions: f, inputId: p, inputLabel: m, inputLabelledBy: h, rows: g = 2, className: _, ...v }, y) {
+	let b = `${r()}-helper`;
 	function x() {
-		i.trim() && s();
+		n.trim() && s();
 	}
 	function S(e) {
 		e.key === "Enter" && !e.shiftKey && (e.preventDefault(), x());
 	}
-	return /* @__PURE__ */ r("div", {
+	return /* @__PURE__ */ a("div", {
 		ref: y,
 		className: [
 			"message-composer",
@@ -21,9 +21,9 @@ var o = i(function({ value: i, onChange: o, onSend: s, placeholder: c = "Escribe
 			_ ?? ""
 		].filter(Boolean).join(" "),
 		...v,
-		children: [/* @__PURE__ */ r("div", {
+		children: [/* @__PURE__ */ a("div", {
 			className: "message-composer__box",
-			children: [/* @__PURE__ */ n(t, {
+			children: [/* @__PURE__ */ i(t, {
 				bare: !0,
 				className: "message-composer__input",
 				id: p,
@@ -31,22 +31,22 @@ var o = i(function({ value: i, onChange: o, onSend: s, placeholder: c = "Escribe
 				"aria-labelledby": h,
 				"aria-describedby": d ? b : void 0,
 				placeholder: c,
-				value: i,
+				value: n,
 				disabled: l,
 				rows: g,
 				onChange: (e) => o(e.target.value),
 				onKeyDown: S
-			}), /* @__PURE__ */ r("div", {
+			}), /* @__PURE__ */ a("div", {
 				className: "message-composer__actions",
-				children: [/* @__PURE__ */ n(e, {
+				children: [/* @__PURE__ */ i(e, {
 					variant: "primary",
 					size: "md",
-					disabled: l || !i.trim(),
+					disabled: l || !n.trim(),
 					onClick: x,
 					children: u
 				}), f]
 			})]
-		}), d && /* @__PURE__ */ n("p", {
+		}), d && /* @__PURE__ */ i("p", {
 			className: "message-composer__helper",
 			id: b,
 			children: d

package/dist/messages.js

@@ -0,0 +1,12 @@
+'use client';
+import { n as e, t } from "./_shared/brandmessagescontext.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/stories/messages/BrandMessagesProvider.tsx
+function r({ messages: e, children: r }) {
+	return /* @__PURE__ */ n(t.Provider, {
+		value: e,
+		children: r
+	});
+}
+//#endregion
+export { r as BrandMessagesProvider, e as useBrandMessages };

package/dist/multi-select-field.js

@@ -5,22 +5,22 @@ import { ErrorText as t } from "./error-text.js";
 import { Label as n } from "./label.js";
 import { MultiSelect as r } from "./multi-select.js";
 import { n as i } from "./_shared/field-labels.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { forwardRef as s, useId as c } from "react";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/stories/molecules/MultiSelectField/MultiSelectField.tsx
-var l = s(function({ id: s, label: l, labelHidden: u, options: d, value: f, defaultValue: p, placeholder: m, name: h, disabled: g, readOnly: _, size: v, error: y = !1, errorMessage: b, helperText: x, className: S, removeLabel: C, onValueChange: w, onBlur: T }, E) {
-	let D = i(u), O = e(v), k = c(), A = s ?? k, j = b ? `${A}-error` : void 0, M = x ? `${A}-helper` : void 0, N = [j, M].filter(Boolean).join(" ") || void 0, P = y || !!b;
-	return /* @__PURE__ */ o("div", {
+var l = a(function({ id: a, label: l, labelHidden: u, options: d, value: f, defaultValue: p, placeholder: m, name: h, disabled: g, readOnly: _, size: v, error: y = !1, errorMessage: b, helperText: x, className: S, removeLabel: C, onValueChange: w, onBlur: T }, E) {
+	let D = i(u), O = e(v), k = o(), A = a ?? k, j = b ? `${A}-error` : void 0, M = x ? `${A}-helper` : void 0, N = [j, M].filter(Boolean).join(" ") || void 0, P = y || !!b;
+	return /* @__PURE__ */ c("div", {
 		className: ["multi-select-field", S].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ a(n, {
+			/* @__PURE__ */ s(n, {
 				id: `${A}-label`,
 				htmlFor: A,
 				hidden: D,
 				size: O,
 				children: l
 			}),
-			/* @__PURE__ */ a(r, {
+			/* @__PURE__ */ s(r, {
 				ref: E,
 				id: A,
 				"aria-labelledby": `${A}-label`,
@@ -38,11 +38,11 @@ var l = s(function({ id: s, label: l, labelHidden: u, options: d, value: f, defa
 				onValueChange: w,
 				onBlur: T
 			}),
-			b && /* @__PURE__ */ a(t, {
+			b && /* @__PURE__ */ s(t, {
 				id: j,
 				children: b
 			}),
-			x && /* @__PURE__ */ a("span", {
+			x && /* @__PURE__ */ s("span", {
 				id: M,
 				className: "multi-select-field__helper",
 				children: x