@studiolxd/brand 49.28.0 → 51.0.0

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/textarea.css

@@ -1 +1 @@
-.textarea{width:var(--textarea-width);min-height:var(--textarea-min-height);padding-block:var(--textarea-padding-block);padding-inline:var(--textarea-padding-inline);border-radius:var(--textarea-border-radius);border-width:var(--textarea-border-width);border-style:var(--textarea-border-style);border-color:var(--textarea-border-color);background-color:var(--textarea-bg);color:var(--textarea-color);font-family:var(--textarea-font-family);font-size:var(--textarea-font-size);font-weight:var(--textarea-font-weight);line-height:var(--textarea-line-height);resize:var(--textarea-resize);cursor:var(--textarea-cursor);box-sizing:border-box;transition:border-color var(--textarea-transition-duration) var(--textarea-transition-easing)}.textarea::placeholder{color:var(--textarea-placeholder-color)}.textarea:focus-visible{box-shadow:inset 0 0 0 calc(var(--textarea-focus-ring-width) + var(--textarea-focus-ring-inset-offset)) var(--textarea-focus-ring-color), inset 0 0 0 var(--textarea-focus-ring-inset-offset) var(--textarea-bg);border-color:var(--textarea-focus-border-color);outline:none}.textarea:disabled{cursor:var(--textarea-disabled-cursor);background-color:var(--textarea-disabled-bg);color:var(--textarea-disabled-color);border-color:var(--textarea-disabled-border-color);pointer-events:none}.textarea.textarea--error{background-color:var(--textarea-error-bg);color:var(--textarea-error-color);border-color:var(--textarea-error-border-color)}.textarea.textarea--error::placeholder{color:var(--textarea-error-placeholder-color)}.textarea.textarea--error:focus-visible{box-shadow:inset 0 0 0 calc(var(--textarea-focus-ring-width) + var(--textarea-focus-ring-inset-offset)) var(--textarea-error-focus-ring-color), inset 0 0 0 var(--textarea-focus-ring-inset-offset) var(--textarea-error-bg);border-color:var(--textarea-error-focus-border-color);outline:none}.textarea.textarea--sm{--textarea-min-height:var(--textarea-sm-min-height);--textarea-padding-block:var(--textarea-sm-padding-block);--textarea-padding-inline:var(--textarea-sm-padding-inline);--textarea-font-size:var(--textarea-sm-font-size)}.textarea.textarea--lg{--textarea-min-height:var(--textarea-lg-min-height);--textarea-padding-block:var(--textarea-lg-padding-block);--textarea-padding-inline:var(--textarea-lg-padding-inline);--textarea-font-size:var(--textarea-lg-font-size)}.textarea:autofill{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:autofill:hover{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:autofill:focus{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:-webkit-autofill{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:-webkit-autofill:hover{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:-webkit-autofill:focus{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}:-webkit-any(.textarea.textarea--error:-webkit-autofill,.textarea.textarea--error:autofill){-webkit-text-fill-color:var(--textarea-error-color);box-shadow:inset 0 0 0 1000px var(--textarea-error-bg)}:is(.textarea.textarea--error:autofill,.textarea.textarea--error:autofill){-webkit-text-fill-color:var(--textarea-error-color);box-shadow:inset 0 0 0 1000px var(--textarea-error-bg)}:-webkit-any(.textarea.textarea--error:-webkit-autofill:focus-visible,.textarea.textarea--error:autofill:focus-visible){box-shadow:inset 0 0 0 calc(var(--textarea-focus-ring-width) + var(--textarea-focus-ring-inset-offset)) var(--textarea-error-focus-ring-color), inset 0 0 0 var(--textarea-focus-ring-inset-offset) var(--textarea-error-bg), inset 0 0 0 1000px var(--textarea-error-bg)}:is(.textarea.textarea--error:autofill:focus-visible,.textarea.textarea--error:autofill:focus-visible){box-shadow:inset 0 0 0 calc(var(--textarea-focus-ring-width) + var(--textarea-focus-ring-inset-offset)) var(--textarea-error-focus-ring-color), inset 0 0 0 var(--textarea-focus-ring-inset-offset) var(--textarea-error-bg), inset 0 0 0 1000px var(--textarea-error-bg)}.textarea.textarea--bare{--textarea-bg:var(--textarea-bare-bg);--textarea-border-color:var(--textarea-bare-border-color);--textarea-focus-border-color:var(--textarea-bare-border-color);--textarea-min-height:var(--textarea-bare-min-height);--textarea-padding-block:var(--textarea-bare-padding-block);--textarea-padding-inline:var(--textarea-bare-padding-inline);--textarea-focus-ring-width:var(--textarea-bare-focus-ring-width);--textarea-focus-ring-inset-offset:var(--textarea-bare-focus-ring-width);--textarea-resize:var(--textarea-bare-resize);--textarea-disabled-bg:var(--textarea-bare-disabled-bg);--textarea-disabled-border-color:var(--textarea-bare-disabled-border-color);--textarea-error-bg:var(--textarea-bare-bg)}
+.textarea{inline-size:var(--textarea-width);min-block-size:var(--textarea-min-height);padding-block:var(--textarea-padding-block);padding-inline:var(--textarea-padding-inline);border-radius:var(--textarea-border-radius);border-width:var(--textarea-border-width);border-style:var(--textarea-border-style);border-color:var(--textarea-border-color);background-color:var(--textarea-bg);color:var(--textarea-color);font-family:var(--textarea-font-family);font-size:var(--textarea-font-size);font-weight:var(--textarea-font-weight);line-height:var(--textarea-line-height);resize:var(--textarea-resize);cursor:var(--textarea-cursor);box-sizing:border-box;transition:border-color var(--textarea-transition-duration) var(--textarea-transition-easing)}.textarea::placeholder{color:var(--textarea-placeholder-color)}.textarea:focus-visible{box-shadow:inset 0 0 0 calc(var(--textarea-focus-ring-width) + var(--textarea-focus-ring-inset-offset)) var(--textarea-focus-ring-color), inset 0 0 0 var(--textarea-focus-ring-inset-offset) var(--textarea-bg);border-color:var(--textarea-focus-border-color);outline:none}.textarea:disabled{cursor:var(--textarea-disabled-cursor);background-color:var(--textarea-disabled-bg);color:var(--textarea-disabled-color);border-color:var(--textarea-disabled-border-color);pointer-events:none}.textarea.textarea--error{background-color:var(--textarea-error-bg);color:var(--textarea-error-color);border-color:var(--textarea-error-border-color)}.textarea.textarea--error::placeholder{color:var(--textarea-error-placeholder-color)}.textarea.textarea--error:focus-visible{box-shadow:inset 0 0 0 calc(var(--textarea-focus-ring-width) + var(--textarea-focus-ring-inset-offset)) var(--textarea-error-focus-ring-color), inset 0 0 0 var(--textarea-focus-ring-inset-offset) var(--textarea-error-bg);border-color:var(--textarea-error-focus-border-color);outline:none}.textarea.textarea--sm{--textarea-min-height:var(--textarea-sm-min-height);--textarea-padding-block:var(--textarea-sm-padding-block);--textarea-padding-inline:var(--textarea-sm-padding-inline);--textarea-font-size:var(--textarea-sm-font-size)}.textarea.textarea--lg{--textarea-min-height:var(--textarea-lg-min-height);--textarea-padding-block:var(--textarea-lg-padding-block);--textarea-padding-inline:var(--textarea-lg-padding-inline);--textarea-font-size:var(--textarea-lg-font-size)}.textarea:autofill{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:autofill:hover{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:autofill:focus{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:-webkit-autofill{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:-webkit-autofill:hover{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:-webkit-autofill:focus{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}:-webkit-any(.textarea.textarea--error:-webkit-autofill,.textarea.textarea--error:autofill){-webkit-text-fill-color:var(--textarea-error-color);box-shadow:inset 0 0 0 1000px var(--textarea-error-bg)}:is(.textarea.textarea--error:autofill,.textarea.textarea--error:autofill){-webkit-text-fill-color:var(--textarea-error-color);box-shadow:inset 0 0 0 1000px var(--textarea-error-bg)}:-webkit-any(.textarea.textarea--error:-webkit-autofill:focus-visible,.textarea.textarea--error:autofill:focus-visible){box-shadow:inset 0 0 0 calc(var(--textarea-focus-ring-width) + var(--textarea-focus-ring-inset-offset)) var(--textarea-error-focus-ring-color), inset 0 0 0 var(--textarea-focus-ring-inset-offset) var(--textarea-error-bg), inset 0 0 0 1000px var(--textarea-error-bg)}:is(.textarea.textarea--error:autofill:focus-visible,.textarea.textarea--error:autofill:focus-visible){box-shadow:inset 0 0 0 calc(var(--textarea-focus-ring-width) + var(--textarea-focus-ring-inset-offset)) var(--textarea-error-focus-ring-color), inset 0 0 0 var(--textarea-focus-ring-inset-offset) var(--textarea-error-bg), inset 0 0 0 1000px var(--textarea-error-bg)}.textarea.textarea--bare{--textarea-bg:var(--textarea-bare-bg);--textarea-border-color:var(--textarea-bare-border-color);--textarea-focus-border-color:var(--textarea-bare-border-color);--textarea-min-height:var(--textarea-bare-min-height);--textarea-padding-block:var(--textarea-bare-padding-block);--textarea-padding-inline:var(--textarea-bare-padding-inline);--textarea-focus-ring-width:var(--textarea-bare-focus-ring-width);--textarea-focus-ring-inset-offset:var(--textarea-bare-focus-ring-width);--textarea-resize:var(--textarea-bare-resize);--textarea-disabled-bg:var(--textarea-bare-disabled-bg);--textarea-disabled-border-color:var(--textarea-bare-disabled-border-color);--textarea-error-bg:var(--textarea-bare-bg)}

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

package/dist/timeline.js

@@ -1,18 +1,21 @@
 'use client';
 import './timeline.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { VisuallyHidden as t } from "./visually-hidden.js";
 import { StepMarker as n } from "./step-marker.js";
 import { forwardRef as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/stories/molecules/Timeline/Timeline.tsx
-var o = r(function({ items: r, label: o, currentLabel: s, markerSize: c = "sm", className: l, ...u }, d) {
-	let f = e("timeline");
+//#region src/stories/messages/es/timeline.ts
+var o = {
+	label: "Historial",
+	current: "estado actual"
+}, s = r(function({ items: r, label: s, currentLabel: c, markerSize: l = "sm", className: u, ...d }, f) {
+	let p = e("timeline", o);
 	return /* @__PURE__ */ i("ol", {
-		ref: d,
-		className: ["timeline", l].filter(Boolean).join(" "),
-		"aria-label": f("label", o),
-		...u,
+		ref: f,
+		className: ["timeline", u].filter(Boolean).join(" "),
+		"aria-label": p("label", s),
+		...d,
 		children: r.map((e, o) => /* @__PURE__ */ a("li", {
 			className: "timeline__item",
 			children: [/* @__PURE__ */ a("span", {
@@ -20,7 +23,7 @@ var o = r(function({ items: r, label: o, currentLabel: s, markerSize: c = "sm",
 				children: [/* @__PURE__ */ i(n, {
 					state: e.current ? "current" : "neutral",
 					tone: e.tone ?? "neutral",
-					size: c,
+					size: l,
 					icon: e.icon ?? "dot"
 				}), o < r.length - 1 ? /* @__PURE__ */ i("span", { className: "timeline__rail" }) : null]
 			}), /* @__PURE__ */ a("div", {
@@ -28,7 +31,7 @@ var o = r(function({ items: r, label: o, currentLabel: s, markerSize: c = "sm",
 				children: [
 					/* @__PURE__ */ a("p", {
 						className: "timeline__title",
-						children: [e.title, e.current ? /* @__PURE__ */ i(t, { children: ` (${f("current", s)})` }) : null]
+						children: [e.title, e.current ? /* @__PURE__ */ i(t, { children: ` (${p("current", c)})` }) : null]
 					}),
 					e.date || e.author ? /* @__PURE__ */ a("p", {
 						className: "timeline__meta",
@@ -54,4 +57,4 @@ var o = r(function({ items: r, label: o, currentLabel: s, markerSize: c = "sm",
 	});
 });
 //#endregion
-export { o as Timeline };
+export { s as Timeline };