@studiolxd/brand 50.0.0 → 51.0.0

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,86 +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, today: ee, 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, te = 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]), ne = 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: te,
-					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,
-					today: ee
-				}), /* @__PURE__ */ l(r, {
-					value: f(h),
-					onChange: ne,
-					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,46 +1,55 @@
 '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 { t as n } from "./_shared/default-render-link.js";
-import { InputField as r } from "./input-field.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 l({ id: l, query: u, onQueryChange: d, results: f, loading: p = !1, label: m, labelHidden: h, placeholder: g, clearable: _ = !0, clearLabel: v, resultsLabel: y, emptyLabel: b, loadingLabel: x, size: S, renderLink: C = n, onSelect: w, className: T }) {
-	let E = e("docsSearch"), D = i(), O = l ?? D, k = u.trim() !== "" && f.length === 0 ? p ? E("loading", x) : E("empty", b) : null;
+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: f,
+		items: p,
 		filter: null,
-		value: u,
-		onValueChange: d,
+		value: d,
+		onValueChange: f,
 		children: /* @__PURE__ */ s("div", {
-			className: ["docs-search", T].filter(Boolean).join(" "),
+			className: ["docs-search", E].filter(Boolean).join(" "),
 			children: [
 				/* @__PURE__ */ o(c.Input, {
-					id: O,
+					id: k,
 					render: /* @__PURE__ */ o(r, {
-						id: O,
-						label: E("label", m),
-						labelHidden: h,
+						id: k,
+						label: D("label", h),
+						labelHidden: g,
 						kind: "search",
-						clearable: _,
-						...v === void 0 ? {} : { clearLabel: v },
-						placeholder: E("placeholder", g),
-						...S ? { size: S } : {}
+						clearable: v,
+						...y === void 0 ? {} : { clearLabel: y },
+						placeholder: D("placeholder", _),
+						...C ? { size: C } : {}
 					})
 				}),
 				/* @__PURE__ */ o(c.List, {
 					className: "docs-search__results",
-					"aria-label": E("results", y),
+					"aria-label": D("results", b),
 					children: (e) => /* @__PURE__ */ o(c.Item, {
 						value: e,
 						className: "docs-search__result",
-						onClick: () => w?.(e),
-						render: (t) => C({
+						onClick: () => T?.(e),
+						render: (t) => w({
 							...t,
 							href: e.href,
 							className: t.className ?? "docs-search__result",
@@ -61,17 +70,17 @@ function l({ id: l, query: u, onQueryChange: d, results: f, loading: p = !1, lab
 						})
 					}, e.href)
 				}),
-				k && /* @__PURE__ */ s("p", {
+				A && /* @__PURE__ */ s("p", {
 					className: "docs-search__status",
 					role: "status",
-					children: [p && /* @__PURE__ */ o(t, {
+					children: [m && /* @__PURE__ */ o(t, {
 						size: "sm",
 						"aria-hidden": !0
-					}), k]
+					}), A]
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { l 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 };

package/dist/embed-frame.css

@@ -1 +1 @@
-.embed-frame{border:0;flex:auto;block-size:100%;min-block-size:0;inline-size:100%;display:block}.embed-frame.embed-frame--viewport{block-size:100dvh}
+.embed-frame{border:0;flex:auto;block-size:100%;min-block-size:0;inline-size:100%;display:block}.embed-frame.embed-frame--viewport{block-size:100dvh}.embed-frame.embed-frame--mobile,.embed-frame.embed-frame--tablet{max-inline-size:100%;margin-inline:auto}.embed-frame.embed-frame--mobile{inline-size:var(--embed-frame-device-mobile-width)}.embed-frame.embed-frame--tablet{inline-size:var(--embed-frame-device-tablet-width)}

package/dist/embed-frame.js

@@ -2,16 +2,17 @@ import './embed-frame.css';
 import { forwardRef as e } from "react";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/atoms/EmbedFrame/EmbedFrame.tsx
-var n = e(function({ title: e, fill: n = "container", className: r, ...i }, a) {
+var n = e(function({ title: e, fill: n = "container", device: r = "desktop", className: i, ...a }, o) {
 	return /* @__PURE__ */ t("iframe", {
-		ref: a,
+		ref: o,
 		className: [
 			"embed-frame",
 			n === "viewport" ? "embed-frame--viewport" : "",
-			r
+			r === "desktop" ? "" : `embed-frame--${r}`,
+			i
 		].filter(Boolean).join(" "),
 		title: e,
-		...i
+		...a
 	});
 });
 //#endregion

package/dist/error-page.js

@@ -3,7 +3,7 @@ import { Columns as e } from "./columns.js";
 import { Stack as t } from "./stack.js";
 import { Paragraph as n } from "./paragraph.js";
 import { PageIntro as r } from "./page-intro.js";
-import { PublicPageShell as i } from "./public-page-shell.js";
+import { t as i } from "./_shared/publicpageshell.js";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/stories/templates/ErrorPage/ErrorPage.tsx
 function s({ title: s, description: c, homeAction: l, retryDescription: u, retryAction: d, header: f, footer: p, id: m = "main-content", shell: h = !0, className: g }) {
@@ -18,7 +18,7 @@ function s({ title: s, description: c, homeAction: l, retryDescription: u, retry
 				title: s,
 				description: c
 			}), l] }), /* @__PURE__ */ o(t, { children: [u && /* @__PURE__ */ a(n, {
-				size: "large",
+				size: "lg",
 				children: u
 			}), d] })]
 		})

package/dist/fieldset.css

@@ -1 +1 @@
-.fieldset{border:none;min-inline-size:0;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fieldset__legend{margin-block:0;inline-size:100%;margin-block-end:var(--fieldset-legend-space-after);margin-inline:0;padding-inline:0;display:block}.fieldset__legend.fieldset__legend--1{font-family:var(--text-h1-font-family);font-size:var(--text-h1-font-size);font-weight:var(--text-h1-font-weight);line-height:var(--text-h1-line-height);color:var(--text-h1-color);letter-spacing:var(--text-h1-letter-spacing)}.fieldset__legend.fieldset__legend--2{font-family:var(--text-h2-font-family);font-size:var(--text-h2-font-size);font-weight:var(--text-h2-font-weight);line-height:var(--text-h2-line-height);color:var(--text-h2-color);letter-spacing:var(--text-h2-letter-spacing)}.fieldset__legend.fieldset__legend--3{font-family:var(--text-h3-font-family);font-size:var(--text-h3-font-size);font-weight:var(--text-h3-font-weight);line-height:var(--text-h3-line-height);color:var(--text-h3-color);letter-spacing:var(--text-h3-letter-spacing)}.fieldset__legend.fieldset__legend--4{font-family:var(--text-h4-font-family);font-size:var(--text-h4-font-size);font-weight:var(--text-h4-font-weight);line-height:var(--text-h4-line-height);color:var(--text-h4-color);letter-spacing:var(--text-h4-letter-spacing)}.fieldset__legend.fieldset__legend--5{font-family:var(--text-h5-font-family);font-size:var(--text-h5-font-size);font-weight:var(--text-h5-font-weight);line-height:var(--text-h5-line-height);color:var(--text-h5-color);letter-spacing:var(--text-h5-letter-spacing)}.fieldset__legend.fieldset__legend--6{font-family:var(--text-h6-font-family);font-size:var(--text-h6-font-size);font-weight:var(--text-h6-font-weight);line-height:var(--text-h6-line-height);color:var(--text-h6-color);letter-spacing:var(--text-h6-letter-spacing)}.fieldset__legend.fieldset__legend--size-1{font-size:var(--text-size-1)}.fieldset__legend.fieldset__legend--size-2{font-size:var(--text-size-2)}.fieldset__legend.fieldset__legend--size-3{font-size:var(--text-size-3)}.fieldset__legend.fieldset__legend--size-4{font-size:var(--text-size-4)}.fieldset__legend.fieldset__legend--size-5{font-size:var(--text-size-5)}.fieldset__legend.fieldset__legend--size-6{font-size:var(--text-size-6)}.fieldset__legend.fieldset__legend--size-7{font-size:var(--text-size-7)}.fieldset__legend.fieldset__legend--size-8{font-size:var(--text-size-8)}.fieldset__legend.fieldset__legend--size-9{font-size:var(--text-size-9)}.fieldset__legend.fieldset__legend--size-10{font-size:var(--text-size-10)}.fieldset__legend.fieldset__legend--thin{font-weight:var(--font-weight-thin)}.fieldset__legend.fieldset__legend--extralight{font-weight:var(--font-weight-extralight)}.fieldset__legend.fieldset__legend--light{font-weight:var(--font-weight-light)}.fieldset__legend.fieldset__legend--regular{font-weight:var(--font-weight-regular)}.fieldset__legend.fieldset__legend--medium{font-weight:var(--font-weight-medium)}.fieldset__legend.fieldset__legend--semibold{font-weight:var(--font-weight-semibold)}.fieldset__legend.fieldset__legend--bold{font-weight:var(--font-weight-bold)}.fieldset__legend.fieldset__legend--extrabold{font-weight:var(--font-weight-extrabold)}.fieldset__legend.fieldset__legend--black{font-weight:var(--font-weight-black)}
+.visually-hidden{clip-path:inset(50%);white-space:nowrap;border-width:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.fieldset{border:none;min-inline-size:0;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fieldset__legend{margin-block:0;inline-size:100%;margin-block-end:var(--fieldset-legend-space-after);margin-inline:0;padding-inline:0;display:block}.fieldset__legend.fieldset__legend--1{font-family:var(--text-h1-font-family);font-size:var(--text-h1-font-size);font-weight:var(--text-h1-font-weight);line-height:var(--text-h1-line-height);color:var(--text-h1-color);letter-spacing:var(--text-h1-letter-spacing)}.fieldset__legend.fieldset__legend--2{font-family:var(--text-h2-font-family);font-size:var(--text-h2-font-size);font-weight:var(--text-h2-font-weight);line-height:var(--text-h2-line-height);color:var(--text-h2-color);letter-spacing:var(--text-h2-letter-spacing)}.fieldset__legend.fieldset__legend--3{font-family:var(--text-h3-font-family);font-size:var(--text-h3-font-size);font-weight:var(--text-h3-font-weight);line-height:var(--text-h3-line-height);color:var(--text-h3-color);letter-spacing:var(--text-h3-letter-spacing)}.fieldset__legend.fieldset__legend--4{font-family:var(--text-h4-font-family);font-size:var(--text-h4-font-size);font-weight:var(--text-h4-font-weight);line-height:var(--text-h4-line-height);color:var(--text-h4-color);letter-spacing:var(--text-h4-letter-spacing)}.fieldset__legend.fieldset__legend--5{font-family:var(--text-h5-font-family);font-size:var(--text-h5-font-size);font-weight:var(--text-h5-font-weight);line-height:var(--text-h5-line-height);color:var(--text-h5-color);letter-spacing:var(--text-h5-letter-spacing)}.fieldset__legend.fieldset__legend--6{font-family:var(--text-h6-font-family);font-size:var(--text-h6-font-size);font-weight:var(--text-h6-font-weight);line-height:var(--text-h6-line-height);color:var(--text-h6-color);letter-spacing:var(--text-h6-letter-spacing)}.fieldset__legend.fieldset__legend--size-1{font-size:var(--text-size-1)}.fieldset__legend.fieldset__legend--size-2{font-size:var(--text-size-2)}.fieldset__legend.fieldset__legend--size-3{font-size:var(--text-size-3)}.fieldset__legend.fieldset__legend--size-4{font-size:var(--text-size-4)}.fieldset__legend.fieldset__legend--size-5{font-size:var(--text-size-5)}.fieldset__legend.fieldset__legend--size-6{font-size:var(--text-size-6)}.fieldset__legend.fieldset__legend--size-7{font-size:var(--text-size-7)}.fieldset__legend.fieldset__legend--size-8{font-size:var(--text-size-8)}.fieldset__legend.fieldset__legend--size-9{font-size:var(--text-size-9)}.fieldset__legend.fieldset__legend--size-10{font-size:var(--text-size-10)}

package/dist/fieldset.js

@@ -1,21 +1,21 @@
 import './fieldset.css';
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 //#region src/stories/atoms/Fieldset/Fieldset.tsx
-function n({ legend: n, level: r = 2, weight: i, size: a, className: o, id: s, disabled: c, children: l }) {
-	let u = [
+function n({ legend: n, legendHidden: r = !1, level: i = 2, size: a, className: o, id: s, disabled: c, "aria-describedby": l, children: u }) {
+	let d = r ? "visually-hidden" : [
 		"fieldset__legend",
-		`fieldset__legend--${r}`,
-		i && `fieldset__legend--${i}`,
+		`fieldset__legend--${i}`,
 		a && `fieldset__legend--size-${a}`
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ t("fieldset", {
 		className: ["fieldset", o].filter(Boolean).join(" "),
 		id: s,
 		disabled: c,
+		"aria-describedby": l,
 		children: [/* @__PURE__ */ e("legend", {
-			className: u,
+			className: d,
 			children: n
-		}), l]
+		}), u]
 	});
 }
 //#endregion