@studiolxd/brand 49.28.0 → 51.0.0

package/dist/date-picker-field.js

@@ -1,44 +1,39 @@
 'use client';
 import './date-picker-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 { n as r } from "./_shared/field-labels.js";
-import { t as i } from "./_shared/datepicker.js";
-import { forwardRef as a, useId as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { n as t } from "./_shared/field-optional.js";
+import { n } from "./_shared/field-labels.js";
+import { a as r, n as i } from "./_shared/fieldshell.js";
+import { t as a } from "./_shared/datepicker.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/stories/molecules/DatePickerField/DatePickerField.tsx
-var l = a(function({ id: a, label: l, labelHidden: u, errorMessage: d, helperText: f, error: p = !1, size: m, className: h, ...g }, _) {
-	let v = r(u), y = e(m), b = o(), x = a ?? b, S = d ? `${x}-error` : void 0, C = f ? `${x}-helper` : void 0, w = [S, C].filter(Boolean).join(" ") || void 0, T = p || !!d;
-	return /* @__PURE__ */ c("div", {
-		className: ["date-picker-field", h].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ s(n, {
-				htmlFor: x,
-				hidden: v,
-				size: y,
-				children: l
-			}),
-			/* @__PURE__ */ s(i, {
-				calendarLabel: l,
-				...g,
-				ref: _,
-				id: x,
-				size: y,
-				error: T,
-				"aria-describedby": w
-			}),
-			d && /* @__PURE__ */ s(t, {
-				id: S,
-				children: d
-			}),
-			f && /* @__PURE__ */ s("span", {
-				id: C,
-				className: "date-picker-field__helper",
-				children: f
-			})
-		]
+var c = o(function({ id: o, label: c, optional: l, optionalLabel: u, labelHidden: d, errorMessage: f, helperText: p, error: m = !1, size: h, className: g, ..._ }, v) {
+	let y = n(d), b = e(h), x = t(l, _.required), S = r({
+		id: o,
+		error: m,
+		errorMessage: f,
+		helperText: p
+	}), { id: C } = S;
+	return /* @__PURE__ */ s(i, {
+		field: S,
+		block: "date-picker-field",
+		className: g,
+		label: c,
+		optional: x,
+		optionalLabel: u,
+		labelHidden: y,
+		size: b,
+		children: /* @__PURE__ */ s(a, {
+			calendarLabel: c,
+			..._,
+			ref: v,
+			id: C,
+			size: b,
+			error: S.hasError,
+			"aria-describedby": S.describedBy
+		})
 	});
 });
 //#endregion
-export { l as DatePickerField };
+export { c as DatePickerField };

package/dist/date-time-field.js

@@ -1,12 +1,12 @@
 'use client';
 import './date-time-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 { TimeSelect as r } from "./time-select.js";
-import { n as i } from "./_shared/field-labels.js";
-import { t as a } from "./_shared/datepicker.js";
-import { forwardRef as o, useCallback as s, useId as c } from "react";
+import { t } from "./_shared/timeselect.js";
+import { n } from "./_shared/field-optional.js";
+import { n as r } from "./_shared/field-labels.js";
+import { a as i, n as a } from "./_shared/fieldshell.js";
+import { t as o } from "./_shared/datepicker.js";
+import { forwardRef as s, useCallback as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/stories/molecules/DateTimeField/DateTimeField.tsx
 function d(e, t) {
@@ -19,85 +19,84 @@ function f(e) {
 		m: e.getMinutes()
 	} : null;
 }
-var p = o(function({ id: o, label: p, labelHidden: m, value: h, placeholder: g, timeStep: _, minDate: v, maxDate: y, disabledDates: b, name: x, size: S, disabled: C, readOnly: w, error: T = !1, errorMessage: E, helperText: D, locale: O = "es-ES", className: k, calendarLabel: A, openCalendarLabel: j, invalidMessage: M, maskLetters: N, previousMonthLabel: P, nextMonthLabel: F, previousYearsLabel: I, nextYearsLabel: L, yearGridLabel: R, gridLabel: z, hoursLabel: B, minutesLabel: V, onChange: H, onBlur: U }, W) {
-	let G = i(m), K = e(S), q = c(), J = o ?? q, Y = `${J}-date`, X = E ? `${J}-error` : void 0, Z = D ? `${J}-helper` : void 0, Q = [X, Z].filter(Boolean).join(" ") || void 0, $ = T || !!E, ee = s((e) => {
+var p = s(function({ id: s, label: p, optional: m, optionalLabel: h, labelHidden: g, value: _, placeholder: v, timeStep: y, minDate: b, maxDate: x, disabledDates: S, name: C, size: w, disabled: T, readOnly: E, required: D, error: O = !1, errorMessage: k, helperText: A, locale: j = "es-ES", className: M, calendarLabel: N, openCalendarLabel: P, invalidMessage: ee, maskLetters: F, previousMonthLabel: I, nextMonthLabel: L, previousYearsLabel: R, nextYearsLabel: z, yearGridLabel: B, gridLabel: V, today: H, hoursLabel: U, minutesLabel: W, onChange: G, onBlur: K }, q) {
+	let J = r(g), Y = e(w), X = n(m, D), Z = i({
+		id: s,
+		error: O,
+		errorMessage: k,
+		helperText: A
+	}), { id: Q } = Z, $ = `${Q}-date`, te = c((e) => {
 		if (!e) {
-			H?.(null);
+			G?.(null);
 			return;
 		}
-		let t = f(h) ?? {
+		let t = f(_) ?? {
 			h: 0,
 			m: 0
 		};
-		H?.(d(e, t));
-	}, [h, H]), te = s((e) => {
-		h && H?.(d(h, e));
-	}, [h, H]);
-	return /* @__PURE__ */ u("div", {
-		className: ["date-time-field", k].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ l(n, {
-				id: `${J}-label`,
-				htmlFor: Y,
-				hidden: G,
-				size: K,
-				children: p
-			}),
-			/* @__PURE__ */ u("div", {
-				className: "date-time-field__controls",
-				role: "group",
-				"aria-labelledby": `${J}-label`,
-				"aria-describedby": Q,
-				children: [/* @__PURE__ */ l(a, {
-					ref: W,
-					className: "date-time-field__date",
-					id: Y,
-					name: x,
-					value: h ?? null,
-					onChange: ee,
-					onBlur: U,
-					placeholder: g,
-					minDate: v,
-					maxDate: y,
-					disabledDates: b,
-					size: K,
-					disabled: C,
-					readOnly: w,
-					error: $,
-					locale: O,
-					calendarLabel: A ?? p,
-					openCalendarLabel: j,
-					invalidMessage: M,
-					maskLetters: N,
-					previousMonthLabel: P,
-					nextMonthLabel: F,
-					previousYearsLabel: I,
-					nextYearsLabel: L,
-					yearGridLabel: R,
-					gridLabel: z
-				}), /* @__PURE__ */ l(r, {
-					value: f(h),
-					onChange: te,
-					onBlur: U,
-					step: _,
-					size: K,
-					disabled: C,
-					readOnly: w,
-					error: $,
-					hoursLabel: B,
-					minutesLabel: V
-				})]
-			}),
-			E && /* @__PURE__ */ l(t, {
-				id: X,
-				children: E
-			}),
-			D && /* @__PURE__ */ l("span", {
-				id: Z,
-				className: "date-time-field__helper",
-				children: D
-			})
-		]
+		G?.(d(e, t));
+	}, [_, G]), ne = c((e) => {
+		_ && G?.(d(_, e));
+	}, [_, G]);
+	return /* @__PURE__ */ l(a, {
+		field: Z,
+		block: "date-time-field",
+		className: M,
+		label: p,
+		optional: X,
+		optionalLabel: h,
+		labelHidden: J,
+		size: Y,
+		labelIdentified: !0,
+		labelFor: $,
+		children: /* @__PURE__ */ u("div", {
+			className: "date-time-field__controls",
+			role: "group",
+			"aria-labelledby": Z.labelId,
+			"aria-describedby": Z.describedBy,
+			children: [/* @__PURE__ */ l(o, {
+				ref: q,
+				className: "date-time-field__date",
+				id: $,
+				name: C,
+				value: _ ?? null,
+				onChange: te,
+				onBlur: K,
+				placeholder: v,
+				minDate: b,
+				maxDate: x,
+				disabledDates: S,
+				size: Y,
+				disabled: T,
+				readOnly: E,
+				required: D,
+				error: Z.hasError,
+				locale: j,
+				calendarLabel: N ?? p,
+				openCalendarLabel: P,
+				invalidMessage: ee,
+				maskLetters: F,
+				previousMonthLabel: I,
+				nextMonthLabel: L,
+				previousYearsLabel: R,
+				nextYearsLabel: z,
+				yearGridLabel: B,
+				gridLabel: V,
+				today: H
+			}), /* @__PURE__ */ l(t, {
+				value: f(_),
+				onChange: ne,
+				onBlur: K,
+				step: y,
+				size: Y,
+				disabled: T,
+				readOnly: E,
+				required: D,
+				error: Z.hasError,
+				hoursLabel: U,
+				minutesLabel: W
+			})]
+		})
 	});
 });
 //#endregion

package/dist/datepicker.css

@@ -1 +1 @@
-.date-picker{gap:var(--date-picker-message-gap);flex-direction:column;display:flex}.date-picker__control{inline-size:var(--date-picker-inline-size);align-items:center;display:flex}.date-picker__input{min-inline-size:0;flex:auto;padding-inline-end:var(--date-picker-button-slot-size)}.date-picker__button{inline-size:var(--date-picker-button-slot-size);block-size:var(--date-picker-button-slot-size);cursor:var(--date-picker-button-cursor);color:var(--date-picker-button-color);transition:color var(--date-picker-transition-duration) var(--date-picker-transition-easing);background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin-inline-start:calc(-1 * var(--date-picker-button-slot-size));padding-block:0;padding-inline:0;display:flex}.date-picker__button:hover{color:var(--date-picker-button-hover-color)}.date-picker__button:focus-visible{outline:var(--date-picker-button-focus-ring-width) solid var(--date-picker-button-focus-ring-color);outline-offset:calc(-1 * var(--date-picker-border-width))}.date-picker__button:disabled{color:var(--date-picker-button-disabled-color);cursor:var(--date-picker-disabled-cursor)}.date-picker__glyph{inline-size:var(--date-picker-button-icon-size);block-size:var(--date-picker-button-icon-size)}.date-picker.date-picker--sm{--date-picker-button-slot-size:var(--date-picker-button-sm-slot-size);--date-picker-button-icon-size:var(--date-picker-button-sm-icon-size)}.date-picker.date-picker--lg{--date-picker-button-slot-size:var(--date-picker-button-lg-slot-size);--date-picker-button-icon-size:var(--date-picker-button-lg-icon-size)}.date-picker__message{font-family:var(--date-picker-message-font-family);font-size:var(--date-picker-message-font-size);font-weight:var(--date-picker-message-font-weight);line-height:var(--date-picker-message-line-height);color:var(--date-picker-message-color)}.date-picker__popover{padding-block:0;padding-inline:0}
+.date-picker{gap:var(--date-picker-message-gap);flex-direction:column;display:flex}.date-picker__control{inline-size:var(--date-picker-width);align-items:center;display:flex}.date-picker__input{min-inline-size:0;flex:auto;padding-inline-end:var(--date-picker-button-slot-size)}.date-picker__button{inline-size:var(--date-picker-button-slot-size);block-size:var(--date-picker-button-slot-size);cursor:var(--date-picker-button-cursor);color:var(--date-picker-button-color);transition:color var(--date-picker-transition-duration) var(--date-picker-transition-easing);background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin-inline-start:calc(-1 * var(--date-picker-button-slot-size));padding-block:0;padding-inline:0;display:flex}.date-picker__button:hover{color:var(--date-picker-button-hover-color)}.date-picker__button:focus-visible{outline:var(--date-picker-button-focus-ring-width) solid var(--date-picker-button-focus-ring-color);outline-offset:calc(-1 * var(--date-picker-border-width))}.date-picker__button:disabled{color:var(--date-picker-button-disabled-color);cursor:var(--date-picker-disabled-cursor)}.date-picker__glyph{inline-size:var(--date-picker-button-icon-size);block-size:var(--date-picker-button-icon-size)}.date-picker.date-picker--sm{--date-picker-button-slot-size:var(--date-picker-button-sm-slot-size);--date-picker-button-icon-size:var(--date-picker-button-sm-icon-size)}.date-picker.date-picker--lg{--date-picker-button-slot-size:var(--date-picker-button-lg-slot-size);--date-picker-button-icon-size:var(--date-picker-button-lg-icon-size)}.date-picker__message{font-family:var(--date-picker-message-font-family);font-size:var(--date-picker-message-font-size);font-weight:var(--date-picker-message-font-weight);line-height:var(--date-picker-message-line-height);color:var(--date-picker-message-color)}.date-picker__popover{padding-block:0;padding-inline:0}

package/dist/description-list.js

@@ -19,14 +19,14 @@ var r = t(function({ className: e, children: t, ...r }, i) {
 		children: r
 	});
 }), a = t(function({ as: t = "dd", className: r, children: i, copyable: a = !1, copyText: o, copyLabel: s, copiedLabel: c, ...l }, u) {
-	let d = [
+	let d = t, f = [
 		"description-list__details",
 		a ? "description-list__details--copyable" : "",
 		r
 	].filter(Boolean).join(" ");
-	return a ? /* @__PURE__ */ n(t, {
+	return a ? /* @__PURE__ */ n(d, {
 		ref: u,
-		className: d,
+		className: f,
 		...l,
 		children: /* @__PURE__ */ n(e, {
 			copyText: o,
@@ -34,9 +34,9 @@ var r = t(function({ className: e, children: t, ...r }, i) {
 			copiedLabel: c,
 			children: i
 		})
-	}) : /* @__PURE__ */ n(t, {
+	}) : /* @__PURE__ */ n(d, {
 		ref: u,
-		className: d,
+		className: f,
 		...l,
 		children: i
 	});

package/dist/docs-search.css

@@ -1 +1 @@
-.docs-search{gap:var(--docs-search-gap);flex-direction:column;display:flex}.docs-search__results{gap:var(--docs-search-results-gap);max-block-size:var(--docs-search-results-max-block-size);outline:none;flex-direction:column;display:flex;overflow-y:auto}.docs-search__results:empty{display:none}.docs-search__result{gap:var(--docs-search-result-gap);padding-block:var(--docs-search-result-padding-block);padding-inline:var(--docs-search-result-padding-inline);border-radius:var(--docs-search-result-border-radius);color:var(--docs-search-result-color);box-shadow:none;cursor:pointer;flex-direction:column;display:flex}.docs-search__result[data-highlighted]{background-color:var(--docs-search-result-highlighted-bg);color:var(--docs-search-result-highlighted-color)}.docs-search__result[data-highlighted] .docs-search__result-product,.docs-search__result[data-highlighted] .docs-search__result-excerpt{color:inherit}.docs-search__result[data-highlighted] .docs-search__result-excerpt mark{background-color:var(--docs-search-result-highlighted-color);color:var(--docs-search-result-highlighted-bg)}.docs-search__result-product{font-size:var(--docs-search-result-product-font-size);color:var(--docs-search-result-product-color)}.docs-search__result-title{font-size:var(--docs-search-result-title-font-size);font-weight:var(--docs-search-result-title-font-weight)}.docs-search__result-excerpt{font-size:var(--docs-search-result-excerpt-font-size);line-height:var(--docs-search-result-excerpt-line-height);color:var(--docs-search-result-excerpt-color)}.docs-search__result-excerpt mark{background-color:var(--docs-search-result-mark-bg);color:var(--docs-search-result-mark-color)}.docs-search__status{align-items:center;gap:var(--docs-search-status-gap);padding-block:var(--docs-search-status-padding-block);padding-inline:var(--docs-search-status-padding-inline);font-size:var(--docs-search-status-font-size);color:var(--docs-search-status-color);margin-block:0;margin-inline:0;display:flex}
+.docs-search{gap:var(--docs-search-gap);flex-direction:column;display:flex}.docs-search__results{gap:var(--docs-search-results-gap);max-block-size:var(--docs-search-results-max-height);outline:none;flex-direction:column;display:flex;overflow-y:auto}.docs-search__results:empty{display:none}.docs-search__result{gap:var(--docs-search-result-gap);padding-block:var(--docs-search-result-padding-block);padding-inline:var(--docs-search-result-padding-inline);border-radius:var(--docs-search-result-border-radius);color:var(--docs-search-result-color);cursor:pointer;flex-direction:column;text-decoration-line:none;display:flex}.docs-search__result[data-highlighted]{background-color:var(--docs-search-result-highlighted-bg);color:var(--docs-search-result-highlighted-color)}.docs-search__result[data-highlighted] .docs-search__result-product,.docs-search__result[data-highlighted] .docs-search__result-excerpt{color:inherit}.docs-search__result[data-highlighted] .docs-search__result-excerpt mark{background-color:var(--docs-search-result-highlighted-color);color:var(--docs-search-result-highlighted-bg)}.docs-search__result-product{font-size:var(--docs-search-result-product-font-size);color:var(--docs-search-result-product-color)}.docs-search__result-title{font-size:var(--docs-search-result-title-font-size);font-weight:var(--docs-search-result-title-font-weight)}.docs-search__result-excerpt{font-size:var(--docs-search-result-excerpt-font-size);line-height:var(--docs-search-result-excerpt-line-height);color:var(--docs-search-result-excerpt-color)}.docs-search__result-excerpt mark{background-color:var(--docs-search-result-mark-bg);color:var(--docs-search-result-mark-color)}.docs-search__status{align-items:center;gap:var(--docs-search-status-gap);padding-block:var(--docs-search-status-padding-block);padding-inline:var(--docs-search-status-padding-inline);font-size:var(--docs-search-status-font-size);color:var(--docs-search-status-color);margin-block:0;margin-inline:0;display:flex}

package/dist/docs-search.js

@@ -1,61 +1,68 @@
 'use client';
 import './docs-search.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { Spinner as t } from "./spinner.js";
-import { InputField as n } from "./input-field.js";
-import "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Autocomplete as o } from "@base-ui/react/autocomplete";
+import { t as n } from "./_shared/default-render-link.js";
+import { t as r } from "./_shared/inputfield.js";
+import { useId as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Autocomplete as c } from "@base-ui/react/autocomplete";
+//#region src/stories/messages/es/docsSearch.ts
+var l = {
+	label: "Buscar en la documentación",
+	placeholder: "Buscar…",
+	results: "Resultados",
+	empty: "Sin resultados.",
+	loading: "Buscando…"
+};
+//#endregion
 //#region src/stories/molecules/DocsSearch/DocsSearch.tsx
-function s(e) {
-	return /* @__PURE__ */ i("a", { ...e });
-}
-function c({ id: c = "docs-search", query: l, onQueryChange: u, results: d, loading: f = !1, label: p, labelHidden: m, placeholder: h, clearable: g = !0, clearLabel: _, resultsLabel: v, emptyLabel: y, loadingLabel: b, size: x, renderLink: S = s, onSelect: C, className: w }) {
-	let T = e("docsSearch"), E = l.trim() !== "" && d.length === 0 ? f ? T("loading", b) : T("empty", y) : null;
-	return /* @__PURE__ */ i(o.Root, {
+function u({ id: u, query: d, onQueryChange: f, results: p, loading: m = !1, label: h, labelHidden: g, placeholder: _, clearable: v = !0, clearLabel: y, resultsLabel: b, emptyLabel: x, loadingLabel: S, size: C, renderLink: w = n, onSelect: T, className: E }) {
+	let D = e("docsSearch", l), O = i(), k = u ?? O, A = d.trim() !== "" && p.length === 0 ? m ? D("loading", S) : D("empty", x) : null;
+	return /* @__PURE__ */ o(c.Root, {
 		inline: !0,
 		open: !0,
-		items: d,
+		items: p,
 		filter: null,
-		value: l,
-		onValueChange: u,
-		children: /* @__PURE__ */ a("div", {
-			className: ["docs-search", w].filter(Boolean).join(" "),
+		value: d,
+		onValueChange: f,
+		children: /* @__PURE__ */ s("div", {
+			className: ["docs-search", E].filter(Boolean).join(" "),
 			children: [
-				/* @__PURE__ */ i(o.Input, {
-					id: c,
-					render: /* @__PURE__ */ i(n, {
-						id: c,
-						label: T("label", p),
-						labelHidden: m,
+				/* @__PURE__ */ o(c.Input, {
+					id: k,
+					render: /* @__PURE__ */ o(r, {
+						id: k,
+						label: D("label", h),
+						labelHidden: g,
 						kind: "search",
-						clearable: g,
-						..._ === void 0 ? {} : { clearLabel: _ },
-						placeholder: T("placeholder", h),
-						...x ? { size: x } : {}
+						clearable: v,
+						...y === void 0 ? {} : { clearLabel: y },
+						placeholder: D("placeholder", _),
+						...C ? { size: C } : {}
 					})
 				}),
-				/* @__PURE__ */ i(o.List, {
+				/* @__PURE__ */ o(c.List, {
 					className: "docs-search__results",
-					"aria-label": T("results", v),
-					children: (e) => /* @__PURE__ */ i(o.Item, {
+					"aria-label": D("results", b),
+					children: (e) => /* @__PURE__ */ o(c.Item, {
 						value: e,
 						className: "docs-search__result",
-						onClick: () => C?.(e),
-						render: (t) => S({
+						onClick: () => T?.(e),
+						render: (t) => w({
 							...t,
 							href: e.href,
 							className: t.className ?? "docs-search__result",
-							children: /* @__PURE__ */ a(r, { children: [
-								e.product && /* @__PURE__ */ i("span", {
+							children: /* @__PURE__ */ s(a, { children: [
+								e.product && /* @__PURE__ */ o("span", {
 									className: "docs-search__result-product",
 									children: e.product
 								}),
-								/* @__PURE__ */ i("span", {
+								/* @__PURE__ */ o("span", {
 									className: "docs-search__result-title",
 									children: e.title
 								}),
-								e.excerpt && /* @__PURE__ */ i("span", {
+								e.excerpt && /* @__PURE__ */ o("span", {
 									className: "docs-search__result-excerpt",
 									children: e.excerpt
 								})
@@ -63,17 +70,17 @@ function c({ id: c = "docs-search", query: l, onQueryChange: u, results: d, load
 						})
 					}, e.href)
 				}),
-				E && /* @__PURE__ */ a("p", {
+				A && /* @__PURE__ */ s("p", {
 					className: "docs-search__status",
 					role: "status",
-					children: [f && /* @__PURE__ */ i(t, {
+					children: [m && /* @__PURE__ */ o(t, {
 						size: "sm",
 						"aria-hidden": !0
-					}), E]
+					}), A]
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { c as DocsSearch };
+export { u as DocsSearch };

package/dist/dots-button.js

@@ -1,30 +1,3 @@
 'use client';
-import './dots-button.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Icon as t } from "./icon.js";
-import { Button as n } from "./button.js";
-import { forwardRef as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
-//#region src/stories/atoms/DotsButton/DotsButton.tsx
-var a = r(function({ size: r = "md", orientation: a = "horizontal", "aria-label": o, className: s, ...c }, l) {
-	let u = e("dotsButton"), d = [
-		"dots-button",
-		a === "vertical" ? "dots-button--vertical" : "",
-		s
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ i(n, {
-		ref: l,
-		variant: "ghost",
-		iconOnly: !0,
-		size: r,
-		"aria-label": u("label", o),
-		className: d,
-		...c,
-		children: /* @__PURE__ */ i(t, {
-			name: "dots",
-			size: r === "lg" ? "md" : "sm"
-		})
-	});
-});
-//#endregion
-export { a as DotsButton };
+import { t as e } from "./_shared/dotsbutton.js";
+export { e as DotsButton };

package/dist/dropdown-field.css

@@ -1 +1 @@
-.dropdown-field{gap:var(--dropdown-field-gap);flex-direction:column;display:flex}.dropdown-field--inline{flex-flow:wrap;align-items:center}.dropdown-field--inline .error-text,.dropdown-field--inline .dropdown-field__helper{flex-basis:100%}.dropdown-field:not(.dropdown-field--inline) .dropdown-field__control{inline-size:100%}.dropdown-field__control{justify-content:space-between;align-items:center;gap:var(--dropdown-field-content-gap);block-size:var(--dropdown-field-height);padding-block:0;padding-inline:var(--dropdown-field-padding-inline);font-family:var(--dropdown-field-font-family);font-size:var(--dropdown-field-font-size);font-weight:var(--dropdown-field-font-weight);color:var(--dropdown-field-color);background-color:var(--dropdown-field-bg);border:var(--dropdown-field-border-width) solid var(--dropdown-field-border-color);border-radius:var(--dropdown-field-border-radius);cursor:pointer;display:inline-flex}.dropdown-field__control[aria-invalid=true]{border-color:var(--dropdown-field-error-border-color)}.dropdown-field__control:disabled{cursor:var(--dropdown-field-disabled-cursor);opacity:var(--dropdown-field-disabled-opacity)}.dropdown-field__control:focus,.dropdown-field__control[data-popup-open]{outline:none}.dropdown-field__control:focus-visible{outline:var(--dropdown-field-focus-ring-width) solid var(--dropdown-field-focus-ring-color);outline-offset:calc(-1 * (var(--dropdown-field-focus-ring-width) + var(--dropdown-field-border-width)))}.dropdown-field--sm .dropdown-field__control{block-size:var(--dropdown-field-sm-height);font-size:var(--dropdown-field-sm-font-size);padding-inline:var(--dropdown-field-sm-padding-inline)}.dropdown-field--lg .dropdown-field__control{block-size:var(--dropdown-field-lg-height);font-size:var(--dropdown-field-lg-font-size);padding-inline:var(--dropdown-field-lg-padding-inline)}.dropdown-field__value{align-items:center;gap:var(--dropdown-field-content-gap);display:inline-flex}.dropdown-field__value .icon{width:var(--dropdown-field-value-icon-size);height:var(--dropdown-field-value-icon-size);flex-shrink:0}.dropdown-field--sm .dropdown-field__value .icon{width:var(--dropdown-field-sm-value-icon-size);height:var(--dropdown-field-sm-value-icon-size)}.dropdown-field--lg .dropdown-field__value .icon{width:var(--dropdown-field-lg-value-icon-size);height:var(--dropdown-field-lg-value-icon-size)}.dropdown-field__icon{transition:transform var(--dropdown-field-icon-transition) var(--dropdown-field-icon-transition-easing);flex-shrink:0;transform:rotate(90deg)}.dropdown-field__control[data-popup-open] .dropdown-field__icon{transform:rotate(-90deg)}.dropdown-field__helper{font-family:var(--dropdown-field-helper-font-family);font-size:var(--dropdown-field-helper-font-size);font-weight:var(--dropdown-field-helper-font-weight);line-height:var(--dropdown-field-helper-line-height);color:var(--dropdown-field-helper-color)}
+.dropdown-field{gap:var(--dropdown-field-gap);flex-direction:column;display:flex}.dropdown-field--inline{flex-flow:wrap;align-items:center}.dropdown-field--inline .error-text,.dropdown-field--inline .dropdown-field__helper{flex-basis:100%}.dropdown-field:not(.dropdown-field--inline) .dropdown-field__control{inline-size:100%}.dropdown-field__control{justify-content:space-between;align-items:center;gap:var(--dropdown-field-content-gap);block-size:var(--dropdown-field-height);padding-block:0;padding-inline:var(--dropdown-field-padding-inline);font-family:var(--dropdown-field-font-family);font-size:var(--dropdown-field-font-size);font-weight:var(--dropdown-field-font-weight);line-height:var(--dropdown-field-line-height);color:var(--dropdown-field-color);background-color:var(--dropdown-field-bg);border:var(--dropdown-field-border-width) solid var(--dropdown-field-border-color);border-radius:var(--dropdown-field-border-radius);cursor:pointer;display:inline-flex}.dropdown-field__control[aria-invalid=true]{border-color:var(--dropdown-field-error-border-color)}.dropdown-field__control:disabled{cursor:var(--dropdown-field-disabled-cursor);opacity:var(--dropdown-field-disabled-opacity)}.dropdown-field__control:focus,.dropdown-field__control[data-popup-open]{outline:none}.dropdown-field__control:focus-visible{outline:var(--dropdown-field-focus-ring-width) solid var(--dropdown-field-focus-ring-color);outline-offset:calc(-1 * (var(--dropdown-field-focus-ring-width) + var(--dropdown-field-border-width)))}.dropdown-field--sm .dropdown-field__control{block-size:var(--dropdown-field-sm-height);font-size:var(--dropdown-field-sm-font-size);padding-inline:var(--dropdown-field-sm-padding-inline)}.dropdown-field--lg .dropdown-field__control{block-size:var(--dropdown-field-lg-height);font-size:var(--dropdown-field-lg-font-size);padding-inline:var(--dropdown-field-lg-padding-inline)}.dropdown-field__value{align-items:center;gap:var(--dropdown-field-content-gap);display:inline-flex}.dropdown-field__value .icon{width:var(--dropdown-field-value-icon-size);height:var(--dropdown-field-value-icon-size);flex-shrink:0}.dropdown-field--sm .dropdown-field__value .icon{width:var(--dropdown-field-sm-value-icon-size);height:var(--dropdown-field-sm-value-icon-size)}.dropdown-field--lg .dropdown-field__value .icon{width:var(--dropdown-field-lg-value-icon-size);height:var(--dropdown-field-lg-value-icon-size)}.dropdown-field__icon{transition:transform var(--dropdown-field-icon-transition) var(--dropdown-field-icon-transition-easing);flex-shrink:0;transform:rotate(90deg)}.dropdown-field__control[data-popup-open] .dropdown-field__icon{transform:rotate(-90deg)}.dropdown-field__helper{font-family:var(--dropdown-field-helper-font-family);font-size:var(--dropdown-field-helper-font-size);font-weight:var(--dropdown-field-helper-font-weight);line-height:var(--dropdown-field-helper-line-height);color:var(--dropdown-field-helper-color)}

package/dist/dropdown-field.js

@@ -2,49 +2,54 @@
 import './dropdown-field.css';
 import { Icon as e } from "./icon.js";
 import { n as t } from "./_shared/form-size.js";
-import { ErrorText as n } from "./error-text.js";
-import { Label as r } from "./label.js";
-import { n as i } from "./_shared/field-labels.js";
-import { Menu as a } from "./menu.js";
-import { forwardRef as o, useId as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { n } from "./_shared/field-optional.js";
+import { n as r } from "./_shared/field-labels.js";
+import { a as i, i as a, n as o, r as s, t as c } from "./_shared/fieldshell.js";
+import { Menu as l } from "./menu.js";
+import { t as u } from "./_shared/requiredinput.js";
+import { forwardRef as d, useRef as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/stories/molecules/DropdownField/DropdownField.tsx
-var u = o(function({ id: o, label: u, labelHidden: d, "aria-label": f, items: p, value: m, onValueChange: h, children: g, inline: _ = !1, size: v, align: y = "start", disabled: b = !1, name: x, error: S = !1, errorMessage: C, helperText: w, onBlur: T, className: E }, D) {
-	let O = i(d), k = t(v), A = s(), j = o ?? A, M = C ? `${j}-error` : void 0, N = w ? `${j}-helper` : void 0, P = [M, N].filter(Boolean).join(" ") || void 0, F = S || !!C;
-	return /* @__PURE__ */ l("div", {
-		className: [
-			"dropdown-field",
-			_ ? "dropdown-field--inline" : "",
-			k === "md" ? "" : `dropdown-field--${k}`,
-			E
-		].filter(Boolean).join(" "),
+var h = d(function({ id: d, label: h, optional: g, optionalLabel: _, labelHidden: v, "aria-label": y, items: b, value: x, onValueChange: S, children: C, inline: w = !1, size: T, align: E = "start", disabled: D = !1, name: O, required: k = !1, requiredLabel: A, error: j = !1, errorMessage: M, helperText: N, onBlur: P, className: F }, I) {
+	let L = r(v), R = t(T), z = n(g, k), B = i({
+		id: d,
+		error: j,
+		errorMessage: M,
+		helperText: N
+	}), { id: V } = B, H = k ? a(V) : void 0, U = f(null);
+	return /* @__PURE__ */ m(o, {
+		field: B,
+		block: "dropdown-field",
+		modifiers: [w && "dropdown-field--inline", R !== "md" && `dropdown-field--${R}`],
+		className: F,
+		label: h,
+		optional: z,
+		optionalLabel: _,
+		labelHidden: L,
+		size: R,
 		children: [
-			u && /* @__PURE__ */ c(r, {
-				htmlFor: j,
-				hidden: O,
-				size: k,
-				children: u
-			}),
-			/* @__PURE__ */ c(a, {
-				align: y,
-				size: k,
-				value: m,
-				onValueChange: h,
-				items: p,
-				trigger: /* @__PURE__ */ l("button", {
-					ref: D,
+			/* @__PURE__ */ p(l, {
+				align: E,
+				size: R,
+				value: x,
+				onValueChange: S,
+				items: b,
+				trigger: /* @__PURE__ */ m("button", {
+					ref: (e) => {
+						U.current = e, typeof I == "function" ? I(e) : I && (I.current = e);
+					},
 					type: "button",
-					id: j,
+					id: V,
 					className: "dropdown-field__control",
-					"aria-label": u ? void 0 : f,
-					"aria-describedby": P,
-					"aria-invalid": F || void 0,
-					disabled: b,
-					onBlur: T,
-					children: [/* @__PURE__ */ c("span", {
+					"aria-label": h ? void 0 : y,
+					"aria-describedby": s(B.describedBy, H),
+					"aria-invalid": B.hasError || void 0,
+					disabled: D,
+					onBlur: P,
+					children: [/* @__PURE__ */ p("span", {
 						className: "dropdown-field__value",
-						children: g
-					}), /* @__PURE__ */ c(e, {
+						children: C
+					}), /* @__PURE__ */ p(e, {
 						name: "chevron",
 						size: "sm",
 						className: "dropdown-field__icon",
@@ -52,22 +57,18 @@ var u = o(function({ id: o, label: u, labelHidden: d, "aria-label": f, items: p,
 					})]
 				})
 			}),
-			x && /* @__PURE__ */ c("input", {
-				type: "hidden",
-				name: x,
-				value: m ?? ""
-			}),
-			C && /* @__PURE__ */ c(n, {
-				id: M,
-				children: C
+			H && /* @__PURE__ */ p(c, {
+				id: H,
+				label: A
 			}),
-			w && /* @__PURE__ */ c("span", {
-				id: N,
-				className: "dropdown-field__helper",
-				children: w
+			/* @__PURE__ */ p(u, {
+				name: O,
+				value: x ?? "",
+				required: k,
+				focusTarget: () => U.current
 			})
 		]
 	});
 });
 //#endregion
-export { u as DropdownField };
+export { h as DropdownField };