@studiolxd/brand 50.0.0 → 51.0.1

package/dist/table.js

@@ -1,135 +1,4 @@
 'use client';
 import './table.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Icon as t } from "./icon.js";
-import { VisuallyHidden as n } from "./visually-hidden.js";
-import { t as r } from "./_shared/overflow-focusable.js";
-import { useId as i, useRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/stories/molecules/Table/Table.tsx
-function c({ children: e, ...t }) {
-	return /* @__PURE__ */ o("thead", {
-		...t,
-		children: e
-	});
-}
-function l({ children: e, ...t }) {
-	return /* @__PURE__ */ o("tfoot", {
-		...t,
-		children: e
-	});
-}
-function u({ children: e, ...t }) {
-	return /* @__PURE__ */ o("tbody", {
-		...t,
-		children: e
-	});
-}
-function d({ sortable: r = !1, sorted: i = !1, onSort: a, actions: c = !1, actionsLabel: l, sortedAscLabel: u, sortedDescLabel: d, sortableLabel: f, sticky: p, nowrap: m = !1, children: h, className: g, scope: _ = "col", ...v }) {
-	let y = e("table"), b = [
-		"table__header",
-		r ? "table__header--sortable" : "",
-		i === "asc" ? "table__header--sorted-asc" : "",
-		i === "desc" ? "table__header--sorted-desc" : "",
-		c ? "table__header--actions" : "",
-		p === "end" ? "table__header--sticky" : "",
-		m ? "table__header--nowrap" : "",
-		g
-	].filter(Boolean).join(" ");
-	return r ? /* @__PURE__ */ s("th", {
-		...v,
-		scope: _,
-		className: b,
-		"aria-sort": i === "asc" ? "ascending" : i === "desc" ? "descending" : "none",
-		children: [/* @__PURE__ */ s("button", {
-			type: "button",
-			className: "table__header-content",
-			onClick: a,
-			children: [h, /* @__PURE__ */ o(t, {
-				name: "chevron",
-				size: "sm",
-				className: "table__sort-icon"
-			})]
-		}), /* @__PURE__ */ o(n, { children: i === "asc" ? y("sortedAscending", u) : i === "desc" ? y("sortedDescending", d) : y("sortable", f) })]
-	}) : c ? /* @__PURE__ */ o("th", {
-		...v,
-		scope: _,
-		className: b,
-		children: /* @__PURE__ */ o(n, { children: h ?? y("actions", l) })
-	}) : /* @__PURE__ */ o("th", {
-		...v,
-		scope: _,
-		className: b,
-		children: h
-	});
-}
-function f({ onClick: e, interactive: t = !1, selected: n = !1, label: r, children: i, className: a, ...s }) {
-	let c = t || !!e, l = c ? n : n || void 0, u = [
-		"table__row",
-		c ? "table__row--interactive" : "",
-		n ? "table__row--selected" : "",
-		a
-	].filter(Boolean).join(" ");
-	return c ? /* @__PURE__ */ o("tr", {
-		...s,
-		className: u,
-		"aria-label": r,
-		"aria-selected": l,
-		onClick: e,
-		onKeyDown: (t) => {
-			(t.key === "Enter" || t.key === " ") && (t.preventDefault(), e?.());
-		},
-		tabIndex: 0,
-		children: i
-	}) : /* @__PURE__ */ o("tr", {
-		...s,
-		className: u,
-		"aria-label": r,
-		"aria-selected": l,
-		children: i
-	});
-}
-function p({ sticky: e, actions: t = !1, nowrap: n = !1, children: r, className: i, ...a }) {
-	let s = [
-		"table__cell",
-		e === "end" ? "table__cell--sticky" : "",
-		t ? "table__cell--actions" : "",
-		n ? "table__cell--nowrap" : "",
-		i
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ o("td", {
-		...a,
-		className: s,
-		children: r
-	});
-}
-function m({ caption: e, children: t, size: n = "md", className: c, ...l }) {
-	let u = [
-		"table",
-		n === "sm" ? "table--sm" : "",
-		c ?? ""
-	].filter(Boolean).join(" "), d = a(null), f = i(), p = r(d), m = e ? { "aria-labelledby": f } : l["aria-labelledby"] ? { "aria-labelledby": l["aria-labelledby"] } : l["aria-label"] ? { "aria-label": l["aria-label"] } : void 0;
-	return /* @__PURE__ */ o("div", {
-		ref: d,
-		className: "table__wrapper",
-		...p ? {
-			tabIndex: 0,
-			...m && {
-				role: "region",
-				...m
-			}
-		} : void 0,
-		children: /* @__PURE__ */ s("table", {
-			className: u,
-			...l,
-			children: [e && /* @__PURE__ */ o("caption", {
-				id: f,
-				className: "visually-hidden",
-				children: e
-			}), t]
-		})
-	});
-}
-m.Head = c, m.Footer = l, m.Header = d, m.Body = u, m.Row = f, m.Cell = p;
-//#endregion
-export { m as Table, u as TableBody, p as TableCell, l as TableFooter, c as TableHead, d as TableHeader, f as TableRow };
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./_shared/table.js";
+export { o as Table, n as TableBody, i as TableCell, t as TableFooter, e as TableHead, r as TableHeader, a as TableRow };

package/dist/tabs.css

@@ -1 +1 @@
-.tabs{flex-direction:column;display:flex}.tabs[data-orientation=vertical]{flex-direction:row;align-items:flex-start}.tabs__list{gap:var(--tabs-list-gap);border-block-end:var(--tabs-list-border-width) solid var(--tabs-list-border-color);flex-direction:row;flex-shrink:0;display:flex}.tabs__list--pill{padding-block:var(--tabs-list-gap);padding-inline:var(--tabs-list-gap);gap:var(--tabs-list-gap);border-block-end:none}.tabs[data-orientation=vertical]>.tabs__list{border-block-end:none;border-inline-end:var(--tabs-list-border-width) solid var(--tabs-list-border-color);flex-direction:column}.tabs__trigger{padding-block:var(--tabs-trigger-padding-block);padding-inline:var(--tabs-trigger-padding-inline);font-size:var(--tabs-trigger-font-size);font-weight:var(--tabs-trigger-font-weight);color:var(--tabs-trigger-color);cursor:pointer;white-space:nowrap;border-radius:var(--tabs-trigger-border-radius);transition:color var(--tabs-transition-duration) var(--tabs-transition-easing);-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.tabs__trigger:after{content:"";block-size:var(--tabs-trigger-indicator-width);border-radius:var(--tabs-trigger-border-radius) var(--tabs-trigger-border-radius) 0 0;transition:background-color var(--tabs-transition-duration) var(--tabs-transition-easing);background-color:#0000;position:absolute;inset-block-end:calc(-1 * var(--tabs-list-border-width));inset-inline:0}.tabs__trigger[data-active]:after{background-color:var(--tabs-trigger-indicator-color)}.tabs__trigger:hover{color:var(--tabs-trigger-hover-color)}.tabs__trigger[data-active]{color:var(--tabs-trigger-active-color);font-weight:var(--tabs-trigger-active-weight)}.tabs__trigger[data-disabled]{opacity:var(--tabs-trigger-disabled-opacity);cursor:not-allowed;pointer-events:none}.tabs__trigger:focus-visible{outline:var(--tabs-focus-ring-width) solid var(--tabs-focus-ring-color);outline-offset:var(--tabs-focus-ring-offset)}.tabs[data-orientation=vertical]>.tabs__list>.tabs__trigger:after{block-size:auto;inline-size:var(--tabs-trigger-indicator-width);border-radius:0 var(--tabs-trigger-border-radius) var(--tabs-trigger-border-radius) 0;inset-block:0;inset-inline-start:auto;inset-inline-end:calc(-1 * var(--tabs-list-border-width))}.tabs__list--pill .tabs__trigger{border-radius:var(--tabs-trigger-border-radius)}.tabs__list--pill .tabs__trigger:after{display:none}.tabs__list--pill .tabs__trigger[data-active]{background-color:var(--tabs-trigger-pill-bg-active);color:var(--tabs-trigger-pill-color-active);font-weight:var(--tabs-trigger-active-weight)}.tabs__content{padding-block:var(--tabs-content-padding-block);outline:none}.tabs__content:focus-visible{outline:var(--tabs-focus-ring-width) solid var(--tabs-focus-ring-color);outline-offset:var(--tabs-focus-ring-offset);border-radius:var(--tabs-trigger-border-radius)}.tabs[data-orientation=vertical]>.tabs__content{padding-block:0;padding-inline-start:var(--tabs-content-padding-block)}
+.tabs{flex-direction:column;display:flex}.tabs[data-orientation=vertical]{flex-direction:row;align-items:flex-start}.tabs__list{gap:var(--tabs-list-gap);border-block-end:var(--tabs-list-border-width) solid var(--tabs-list-border-color);flex-direction:row;flex-shrink:0;display:flex}.tabs__list--pill{padding-block:var(--tabs-list-gap);padding-inline:var(--tabs-list-gap);gap:var(--tabs-list-gap);border-block-end:none}.tabs[data-orientation=vertical]>.tabs__list{border-block-end:none;border-inline-end:var(--tabs-list-border-width) solid var(--tabs-list-border-color);flex-direction:column}.tabs__trigger{padding-block:var(--tabs-trigger-padding-block);padding-inline:var(--tabs-trigger-padding-inline);font-size:var(--tabs-trigger-font-size);font-weight:var(--tabs-trigger-font-weight);line-height:var(--tabs-trigger-line-height);color:var(--tabs-trigger-color);cursor:pointer;white-space:nowrap;border-radius:var(--tabs-trigger-border-radius);transition:color var(--tabs-transition-duration) var(--tabs-transition-easing);-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.tabs__trigger:after{content:"";block-size:var(--tabs-trigger-indicator-width);border-radius:var(--tabs-trigger-border-radius) var(--tabs-trigger-border-radius) 0 0;transition:background-color var(--tabs-transition-duration) var(--tabs-transition-easing);background-color:#0000;position:absolute;inset-block-end:calc(-1 * var(--tabs-list-border-width));inset-inline:0}.tabs__trigger[data-active]:after{background-color:var(--tabs-trigger-indicator-color)}.tabs__trigger:hover{color:var(--tabs-trigger-hover-color)}.tabs__trigger[data-active]{color:var(--tabs-trigger-active-color);font-weight:var(--tabs-trigger-active-weight)}.tabs__trigger[data-disabled]{opacity:var(--tabs-trigger-disabled-opacity);cursor:not-allowed;pointer-events:none}.tabs__trigger:focus-visible{outline:var(--tabs-focus-ring-width) solid var(--tabs-focus-ring-color);outline-offset:var(--tabs-focus-ring-offset)}.tabs[data-orientation=vertical]>.tabs__list>.tabs__trigger:after{block-size:auto;inline-size:var(--tabs-trigger-indicator-width);border-radius:0 var(--tabs-trigger-border-radius) var(--tabs-trigger-border-radius) 0;inset-block:0;inset-inline-start:auto;inset-inline-end:calc(-1 * var(--tabs-list-border-width))}.tabs__list--pill .tabs__trigger{border-radius:var(--tabs-trigger-border-radius)}.tabs__list--pill .tabs__trigger:after{display:none}.tabs__list--pill .tabs__trigger[data-active]{background-color:var(--tabs-trigger-pill-active-bg);color:var(--tabs-trigger-pill-active-color);font-weight:var(--tabs-trigger-active-weight)}.tabs__content{padding-block:var(--tabs-content-padding-block);outline:none}.tabs__content:focus-visible{outline:var(--tabs-focus-ring-width) solid var(--tabs-focus-ring-color);outline-offset:var(--tabs-focus-ring-offset);border-radius:var(--tabs-trigger-border-radius)}.tabs[data-orientation=vertical]>.tabs__content{padding-block:0;padding-inline-start:var(--tabs-content-padding-block)}

package/dist/tag.css

@@ -1 +1 @@
-.tag{border-radius:var(--tag-border-radius);font-family:var(--tag-font-family);font-size:var(--tag-font-size);font-weight:var(--tag-font-weight);line-height:var(--tag-line-height);padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);white-space:nowrap;display:inline-block}.tag--primary{background-color:var(--tag-primary-bg);color:var(--tag-primary-color)}.tag--accent-1{background-color:var(--tag-accent-1-bg);color:var(--tag-accent-1-color)}.tag--accent-2{background-color:var(--tag-accent-2-bg);color:var(--tag-accent-2-color)}.tag--support-1{background-color:var(--tag-support-1-bg);color:var(--tag-support-1-color)}.tag--support-2{background-color:var(--tag-support-2-bg);color:var(--tag-support-2-color)}.tag--neutral{background-color:var(--tag-neutral-bg);color:var(--tag-neutral-color)}.tag--info{background-color:var(--tag-info-bg);color:var(--tag-info-color)}.tag--warning{background-color:var(--tag-warning-bg);color:var(--tag-warning-color)}.tag--success{background-color:var(--tag-success-bg);color:var(--tag-success-color)}.tag--danger{background-color:var(--tag-danger-bg);color:var(--tag-danger-color)}
+.tag{border-radius:var(--tag-border-radius);font-family:var(--tag-font-family);font-size:var(--tag-font-size);font-weight:var(--tag-font-weight);line-height:var(--tag-line-height);padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);white-space:nowrap;display:inline-block}.tag--primary{background-color:var(--tag-primary-bg);color:var(--tag-primary-color)}.tag--accent-1{background-color:var(--tag-accent-1-bg);color:var(--tag-accent-1-color)}.tag--accent-2{background-color:var(--tag-accent-2-bg);color:var(--tag-accent-2-color)}.tag--support-1{background-color:var(--tag-support-1-bg);color:var(--tag-support-1-color)}.tag--support-2{background-color:var(--tag-support-2-bg);color:var(--tag-support-2-color)}.tag--neutral{background-color:var(--tag-neutral-bg);color:var(--tag-neutral-color)}.tag--info{background-color:var(--tag-info-bg);color:var(--tag-info-color)}.tag--warning{background-color:var(--tag-warning-bg);color:var(--tag-warning-color)}.tag--success{background-color:var(--tag-success-bg);color:var(--tag-success-color)}.tag--error{background-color:var(--tag-error-bg);color:var(--tag-error-color)}

package/dist/tag.js

@@ -1,18 +1,24 @@
 import './tag.css';
-import { forwardRef as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
+import { n as e } from "./_shared/env.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/stories/atoms/Tag/Tag.tsx
-var n = e(function({ variant: e = "neutral", className: n, children: r, ...i }, a) {
-	return /* @__PURE__ */ t("span", {
-		ref: a,
+function r(t, n, r) {
+	r !== void 0 && e(t, "variant", "`tone`");
+	let i = n ?? r ?? "neutral";
+	return i === "danger" ? (e(t, "variant=\"danger\"", "`tone=\"error\"`"), "error") : i;
+}
+var i = t(function({ tone: e, variant: t, className: i, children: a, ...o }, s) {
+	return /* @__PURE__ */ n("span", {
+		ref: s,
 		className: [
 			"tag",
-			`tag--${e}`,
-			n ?? ""
+			`tag--${r("Tag", e, t)}`,
+			i ?? ""
 		].filter(Boolean).join(" "),
-		...i,
-		children: r
+		...o,
+		children: a
 	});
 });
 //#endregion
-export { n as Tag };
+export { i as Tag };

package/dist/text.css

@@ -1 +1 @@
-.text{color:inherit;font:inherit}strong.text{font-weight:var(--text-inline-emphasis-font-weight)}.text.text--strikethrough{color:var(--text-inline-strikethrough-color);text-decoration-line:line-through;text-decoration-thickness:var(--text-inline-strikethrough-thickness)}.text.text--muted{color:var(--text-inline-muted-color)}.text.text--destructive{color:var(--text-inline-destructive-color)}.text.text--success{color:var(--text-inline-success-color)}
+.text{color:inherit;font:inherit}strong.text{font-weight:var(--text-inline-emphasis-font-weight)}.text.text--strikethrough{color:var(--text-inline-strikethrough-color);text-decoration-line:line-through;text-decoration-thickness:var(--text-inline-strikethrough-thickness)}.text.text--muted{color:var(--text-inline-muted-color)}.text.text--error{color:var(--text-inline-error-color)}.text.text--destructive{color:var(--text-inline-destructive-color)}.text.text--success{color:var(--text-inline-success-color)}

package/dist/textarea-field.js

@@ -1,52 +1,48 @@
 'use client';
 import './textarea-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 { Textarea as r } from "./textarea.js";
-import { n as i } from "./_shared/field-labels.js";
-import { forwardRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Textarea as t } from "./textarea.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 { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/stories/molecules/TextareaField/TextareaField.tsx
-var c = a(function({ id: a, label: c, labelHidden: l, name: u, placeholder: d, value: f, defaultValue: p, rows: m, disabled: h, readOnly: g, size: _, error: v = !1, errorMessage: y, helperText: b, onChange: x, onBlur: S, onFocus: C, className: w, ...T }, E) {
-	let D = i(l), O = e(_), k = y ? `${a}-error` : void 0, A = b ? `${a}-helper` : void 0, j = [k, A].filter(Boolean).join(" ") || void 0, M = v || !!y;
-	return /* @__PURE__ */ s("div", {
-		className: ["textarea-field", w].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ o(n, {
-				htmlFor: a,
-				hidden: D,
-				size: O,
-				children: c
-			}),
-			/* @__PURE__ */ o(r, {
-				ref: E,
-				...T,
-				id: a,
-				name: u,
-				placeholder: d ?? (D ? c : void 0),
-				value: f,
-				defaultValue: p,
-				rows: m,
-				disabled: h,
-				readOnly: g,
-				size: O,
-				error: M,
-				"aria-describedby": j,
-				onChange: x,
-				onBlur: S,
-				onFocus: C
-			}),
-			y && /* @__PURE__ */ o(t, {
-				id: k,
-				children: y
-			}),
-			b && /* @__PURE__ */ o("span", {
-				id: A,
-				className: "textarea-field__helper",
-				children: b
-			})
-		]
+var c = o(function({ id: o, label: c, optional: l, optionalLabel: u, labelHidden: d, name: f, placeholder: p, value: m, defaultValue: h, rows: g, disabled: _, readOnly: v, size: y, error: b = !1, errorMessage: x, helperText: S, onChange: C, onBlur: w, onFocus: T, className: E, "aria-describedby": D, ...O }, k) {
+	let A = r(d), j = e(y), M = n(l, O.required), N = i({
+		id: o,
+		error: b,
+		errorMessage: x,
+		helperText: S,
+		describedBy: D
+	});
+	return /* @__PURE__ */ s(a, {
+		field: N,
+		block: "textarea-field",
+		className: E,
+		label: c,
+		optional: M,
+		optionalLabel: u,
+		labelHidden: A,
+		size: j,
+		children: /* @__PURE__ */ s(t, {
+			ref: k,
+			...O,
+			id: o,
+			name: f,
+			placeholder: p ?? (A ? c : void 0),
+			value: m,
+			defaultValue: h,
+			rows: g,
+			disabled: _,
+			readOnly: v,
+			size: j,
+			error: N.hasError,
+			"aria-describedby": N.describedBy,
+			onChange: C,
+			onBlur: w,
+			onFocus: T
+		})
 	});
 });
 //#endregion

package/dist/theme-switcher.css

@@ -1 +1 @@
-.theme-switcher__item{align-items:center;gap:var(--theme-switcher-icon-gap);display:inline-flex}.theme-switcher__list{gap:var(--theme-switcher-list-gap);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.theme-switcher__option{align-items:center;gap:var(--theme-switcher-icon-gap);font:inherit;font-size:var(--theme-switcher-list-font-size);color:inherit;cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex}.theme-switcher__option:hover{box-shadow:inset 0 calc(-1 * var(--link-underline-width)) 0 0 currentColor;padding-block-end:var(--link-underline-offset)}.theme-switcher__option.theme-switcher__option--current{font-weight:var(--theme-switcher-list-current-font-weight);box-shadow:none;cursor:default;padding-block-end:0;text-decoration:none}.theme-switcher__option:focus-visible{outline:var(--theme-switcher-focus-ring-width) solid var(--theme-switcher-focus-ring-color);outline-offset:var(--theme-switcher-focus-ring-offset)}
+.theme-switcher__item{align-items:center;gap:var(--theme-switcher-icon-gap);display:inline-flex}.theme-switcher__list{gap:var(--theme-switcher-list-gap);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.theme-switcher__option{align-items:center;gap:var(--theme-switcher-icon-gap);font:inherit;font-size:var(--theme-switcher-list-font-size);color:inherit;cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex}.theme-switcher__option:hover{-webkit-text-decoration-line:var(--link-decoration-line);text-decoration-line:var(--link-decoration-line);text-decoration-thickness:var(--link-underline-width);-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto;text-underline-position:under;text-underline-offset:calc(var(--link-underline-offset) - var(--link-underline-width));padding-block-end:var(--link-underline-offset)}.theme-switcher__option.theme-switcher__option--current{font-weight:var(--theme-switcher-list-current-font-weight);cursor:default;padding-block-end:0;text-decoration:none}.theme-switcher__option:focus-visible{outline:var(--theme-switcher-focus-ring-width) solid var(--theme-switcher-focus-ring-color);outline-offset:var(--theme-switcher-focus-ring-offset)}

package/dist/theme-switcher.js

@@ -1,14 +1,20 @@
 'use client';
 import './theme-switcher.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
 import { Button as n } from "./button.js";
 import { Menu as r } from "./menu.js";
 import { DropdownField as i } from "./dropdown-field.js";
 import { useId as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/stories/molecules/ThemeSwitcher/ThemeSwitcher.tsx
-var c = [
+//#region src/stories/messages/es/themeSwitcher.ts
+var c = {
+	group: "Tema",
+	light: "Claro",
+	dark: "Oscuro",
+	system: "Sistema",
+	trigger: (e, t) => `${e}: ${t}`
+}, l = [
 	{
 		value: "light",
 		icon: "sun"
@@ -22,39 +28,39 @@ var c = [
 		icon: "device-desktop"
 	}
 ];
-function l({ value: l, onChange: u, labels: d, id: f, variant: p = "compact", layout: m = "inline", size: h = "md", className: g }) {
-	let _ = a(), v = f ?? _, y = e("themeSwitcher"), b = {
-		group: () => y("group", d?.group),
-		light: () => y("light", d?.light),
-		dark: () => y("dark", d?.dark),
-		system: () => y("system", d?.system)
-	}, x = c.find((e) => e.value === l) ?? c[2];
-	if (p === "list") return /* @__PURE__ */ o("div", {
+function u({ value: u, onChange: d, labels: f, id: p, variant: m = "compact", layout: h = "inline", size: g = "md", className: _ }) {
+	let v = a(), y = p ?? v, b = e("themeSwitcher", c), x = {
+		group: () => b("group", f?.group),
+		light: () => b("light", f?.light),
+		dark: () => b("dark", f?.dark),
+		system: () => b("system", f?.system)
+	}, S = l.find((e) => e.value === u) ?? l[2];
+	if (m === "list") return /* @__PURE__ */ o("div", {
 		className: [
 			"theme-switcher",
 			"theme-switcher--list",
-			g
+			_
 		].filter(Boolean).join(" "),
 		role: "group",
-		"aria-label": b.group(),
+		"aria-label": x.group(),
 		children: /* @__PURE__ */ o("ul", {
 			className: "theme-switcher__list",
-			children: c.map(({ value: e, icon: n }) => {
-				let r = e === l;
+			children: l.map(({ value: e, icon: n }) => {
+				let r = e === u;
 				return /* @__PURE__ */ o("li", { children: /* @__PURE__ */ s("button", {
 					type: "button",
 					className: ["theme-switcher__option", r ? "theme-switcher__option--current" : ""].filter(Boolean).join(" "),
 					"aria-pressed": r,
-					onClick: r ? void 0 : () => u?.(e),
+					onClick: r ? void 0 : () => d?.(e),
 					children: [/* @__PURE__ */ o(t, {
 						name: n,
 						size: "sm"
-					}), /* @__PURE__ */ o("span", { children: b[e]() })]
+					}), /* @__PURE__ */ o("span", { children: x[e]() })]
 				}) }, e);
 			})
 		})
 	});
-	let S = c.map(({ value: e, icon: n }) => ({
+	let C = l.map(({ value: e, icon: n }) => ({
 		type: "radio",
 		value: e,
 		label: /* @__PURE__ */ s("span", {
@@ -62,46 +68,46 @@ function l({ value: l, onChange: u, labels: d, id: f, variant: p = "compact", la
 			children: [/* @__PURE__ */ o(t, {
 				name: n,
 				size: "sm"
-			}), b[e]()]
+			}), x[e]()]
 		})
 	}));
-	if (p === "icon") return /* @__PURE__ */ o(r, {
-		className: g,
+	if (m === "icon") return /* @__PURE__ */ o(r, {
+		className: _,
 		align: "end",
-		size: h,
-		value: l,
-		onValueChange: (e) => u?.(e),
-		items: S,
+		size: g,
+		value: u,
+		onValueChange: (e) => d?.(e),
+		items: C,
 		trigger: /* @__PURE__ */ o(n, {
 			variant: "ghost",
-			size: h,
+			size: g,
 			iconOnly: !0,
-			"aria-label": y("trigger", d?.trigger)(b.group(), b[x.value]()),
+			"aria-label": b("trigger", f?.trigger)(x.group(), x[S.value]()),
 			children: /* @__PURE__ */ o(t, {
-				name: x.icon,
+				name: S.icon,
 				size: "md"
 			})
 		})
 	});
-	let C = [
+	let w = [
 		"theme-switcher",
 		"theme-switcher--compact",
-		g
+		_
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ s(i, {
-		id: v,
-		label: b.group(),
-		inline: m === "inline",
-		size: h,
-		className: C,
-		value: l,
-		onValueChange: (e) => u?.(e),
-		items: S,
+		id: y,
+		label: x.group(),
+		inline: h === "inline",
+		size: g,
+		className: w,
+		value: u,
+		onValueChange: (e) => d?.(e),
+		items: C,
 		children: [/* @__PURE__ */ o(t, {
-			name: x.icon,
+			name: S.icon,
 			size: "sm"
-		}), b[x.value]()]
+		}), x[S.value]()]
 	});
 }
 //#endregion
-export { l as ThemeSwitcher };
+export { u as ThemeSwitcher };

package/dist/time-field.js

@@ -1,54 +1,49 @@
 'use client';
 import './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 { forwardRef as a, useId as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+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 { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/stories/molecules/TimeField/TimeField.tsx
-var l = a(function({ id: a, label: l, labelHidden: u, value: d, step: f, name: p, size: m, disabled: h, readOnly: g, required: _, error: v = !1, errorMessage: y, helperText: b, className: x, hoursLabel: S, minutesLabel: C, onChange: w, onBlur: T }, E) {
-	let D = i(u), O = e(m), k = o(), A = a ?? k, j = y ? `${A}-error` : void 0, M = b ? `${A}-helper` : void 0, N = [j, M].filter(Boolean).join(" ") || void 0, P = v || !!y;
-	return /* @__PURE__ */ c("div", {
-		className: ["time-field", x].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ s(n, {
-				id: `${A}-label`,
-				htmlFor: A,
-				hidden: D,
-				size: O,
-				children: l
-			}),
-			/* @__PURE__ */ s(r, {
-				ref: E,
-				id: A,
-				name: p,
-				value: d,
-				step: f,
-				size: O,
-				disabled: h,
-				readOnly: g,
-				required: _,
-				error: P,
-				hoursLabel: S,
-				minutesLabel: C,
-				"aria-labelledby": `${A}-label`,
-				"aria-describedby": N,
-				onChange: w,
-				onBlur: T
-			}),
-			y && /* @__PURE__ */ s(t, {
-				id: j,
-				children: y
-			}),
-			b && /* @__PURE__ */ s("span", {
-				id: M,
-				className: "time-field__helper",
-				children: b
-			})
-		]
+var c = o(function({ id: o, label: c, optional: l, optionalLabel: u, labelHidden: d, value: f, step: p, name: m, size: h, disabled: g, readOnly: _, required: v, error: y = !1, errorMessage: b, helperText: x, className: S, hoursLabel: C, minutesLabel: w, onChange: T, onBlur: E }, D) {
+	let O = r(d), k = e(h), A = n(l, v), j = i({
+		id: o,
+		error: y,
+		errorMessage: b,
+		helperText: x
+	}), { id: M } = j;
+	return /* @__PURE__ */ s(a, {
+		field: j,
+		block: "time-field",
+		className: S,
+		label: c,
+		optional: A,
+		optionalLabel: u,
+		labelHidden: O,
+		size: k,
+		labelIdentified: !0,
+		children: /* @__PURE__ */ s(t, {
+			ref: D,
+			id: M,
+			name: m,
+			value: f,
+			step: p,
+			size: k,
+			disabled: g,
+			readOnly: _,
+			required: v,
+			error: j.hasError,
+			hoursLabel: C,
+			minutesLabel: w,
+			"aria-labelledby": j.labelId,
+			"aria-describedby": j.describedBy,
+			onChange: T,
+			onBlur: E
+		})
 	});
 });
 //#endregion
-export { l as TimeField };
+export { c as TimeField };

package/dist/time-select.js

@@ -1,85 +1,3 @@
 'use client';
-import './time-select.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Select as t } from "./select.js";
-import { forwardRef as n, useMemo as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/stories/atoms/TimeSelect/TimeSelect.tsx
-function o(e) {
-	return String(e).padStart(2, "0");
-}
-var s = n(function({ value: n, onChange: s, step: c = 5, size: l = "md", disabled: u, readOnly: d, error: f, id: p, name: m, required: h, "aria-labelledby": g, "aria-describedby": _, onBlur: v, className: y, hoursLabel: b, minutesLabel: x, hoursPlaceholder: S, minutesPlaceholder: C }, w) {
-	let T = e("timeSelect"), E = r(() => Array.from({ length: 24 }, (e, t) => ({
-		value: String(t),
-		label: o(t)
-	})), []), D = r(() => {
-		let e = [];
-		for (let t = 0; t < 60; t += c) e.push({
-			value: String(t),
-			label: o(t)
-		});
-		return e;
-	}, [c]), O = (e) => {
-		let t = parseInt(e, 10), r = n?.m ?? 0;
-		s?.({
-			h: t,
-			m: r
-		});
-	}, k = (e) => {
-		let t = n?.h ?? 0;
-		s?.({
-			h: t,
-			m: parseInt(e, 10)
-		});
-	}, A = ["time-select", y ?? ""].filter(Boolean).join(" "), j = n == null ? "" : String(n.h), M = n == null ? "" : String(n.m);
-	return /* @__PURE__ */ a("div", {
-		className: A,
-		role: "group",
-		"aria-labelledby": g,
-		"aria-describedby": _,
-		"aria-invalid": f || void 0,
-		"aria-required": h || void 0,
-		children: [
-			/* @__PURE__ */ i(t, {
-				ref: w,
-				id: p,
-				options: E,
-				value: j,
-				placeholder: j === "" ? T("maskHours", S) : void 0,
-				size: l,
-				disabled: u,
-				readOnly: d,
-				required: h,
-				"aria-label": T("hours", b),
-				"aria-invalid": f,
-				onValueChange: O,
-				onBlur: v
-			}),
-			/* @__PURE__ */ i("span", {
-				className: "time-select__sep",
-				"aria-hidden": "true",
-				children: ":"
-			}),
-			/* @__PURE__ */ i(t, {
-				options: D,
-				value: M,
-				placeholder: M === "" ? T("maskMinutes", C) : void 0,
-				size: l,
-				disabled: u,
-				readOnly: d,
-				required: h,
-				"aria-label": T("minutes", x),
-				"aria-invalid": f,
-				onValueChange: k,
-				onBlur: v
-			}),
-			m && /* @__PURE__ */ i("input", {
-				type: "hidden",
-				name: m,
-				value: n == null ? "" : `${o(n.h)}:${o(n.m)}`
-			})
-		]
-	});
-});
-//#endregion
-export { s as TimeSelect };
+import { t as e } from "./_shared/timeselect.js";
+export { e as TimeSelect };