@studiolxd/brand 50.0.0 → 51.0.1

package/dist/_shared/datepicker.js

@@ -1,23 +1,23 @@
 import '../datepicker.css';
-import { n as e } from "./brandmessagescontext.js";
+import { r as e } from "./brandmessagescontext.js";
 import { Icon as t } from "../icon.js";
 import { Input as n } from "../input.js";
 import { t as r } from "./assign-ref.js";
 import { Popover as i } from "../popover.js";
 import { Calendar as a } from "../calendar.js";
-import { forwardRef as o, useCallback as s, useId as c, useMemo as l, useRef as ee, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as o, useCallback as s, useId as c, useMemo as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/stories/molecules/DatePicker/dateMask.ts
-var p = /[‎‏؜]/g, m = new Date(2026, 8, 25);
-function h(e, t) {
+var m = /[‎‏؜]/g, h = new Date(2026, 8, 25);
+function g(e, t) {
 	return String(e).padStart(t, "0");
 }
-function g(e) {
+function _(e) {
 	let t = new Intl.DateTimeFormat(e, {
 		day: "2-digit",
 		month: "2-digit",
 		year: "numeric"
-	}).formatToParts(m), n = t.filter((e) => e.type === "day" || e.type === "month" || e.type === "year").map((e) => e.type), r = t.find((e) => e.type === "literal" && e.value.replace(p, "").trim() !== "")?.value.replace(p, "").trim() || "/", i = {
+	}).formatToParts(h), n = t.filter((e) => e.type === "day" || e.type === "month" || e.type === "year").map((e) => e.type), r = t.find((e) => e.type === "literal" && e.value.replace(m, "").trim() !== "")?.value.replace(m, "").trim() || "/", i = {
 		day: 2,
 		month: 2,
 		year: 4
@@ -28,13 +28,13 @@ function g(e) {
 			month: e.getMonth() + 1,
 			year: e.getFullYear()
 		};
-		return n.map((e) => h(t[e], i[e])).join(r);
+		return n.map((e) => g(t[e], i[e])).join(r);
 	}
 	function o(e) {
 		return n.map((t) => e[t]).join(r);
 	}
 	function s(e) {
-		let t = e.replace(p, "").trim();
+		let t = e.replace(m, "").trim();
 		if (/\p{L}/u.test(t)) return null;
 		let r = t.split(/\D+/).filter(Boolean);
 		if (r.length !== 3) return null;
@@ -54,118 +54,131 @@ function g(e) {
 	};
 }
 //#endregion
+//#region src/stories/messages/es/datePicker.ts
+var v = {
+	openCalendar: "Abrir calendario",
+	invalid: "Escribe una fecha completa, con el día, el mes y el año.",
+	calendar: "Calendario",
+	maskLetters: {
+		day: "dd",
+		month: "mm",
+		year: "aaaa"
+	}
+};
+//#endregion
 //#region src/stories/molecules/DatePicker/DatePicker.tsx
-function _(e) {
+function y(e) {
 	return `${String(e.getFullYear()).padStart(4, "0")}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
 }
-var v = o(function({ value: o, onChange: p, placeholder: m, maskLetters: h, invalidMessage: v, openCalendarLabel: y, minDate: b, maxDate: x, disabledDates: te, size: S = "md", disabled: C, readOnly: w, error: T = !1, locale: E = "es-ES", id: D, name: O, describedBy: k, "aria-describedby": ne, "aria-label": re, calendarLabel: ie, previousMonthLabel: ae, nextMonthLabel: A, previousYearsLabel: j, nextYearsLabel: M, yearGridLabel: N, gridLabel: P, today: F, onBlur: I, className: L }, R) {
-	let z = e("datePicker"), [B, V] = u(!1), H = l(() => g(E), [E]), U = o instanceof Date ? H.format(o) : "", [W, G] = u(U), [K, q] = u(U);
-	U !== K && (q(U), G(U));
-	let J = ee(null), oe = s((e) => {
-		J.current = e, r(R, e);
-	}, [R]), Y = W.trim(), X = Y ? H.parse(W) : null, Z = Y !== "" && !X, se = T || Z, Q = `${c()}-date-picker-invalid`, ce = [k ?? ne, Z ? Q : void 0].filter(Boolean).join(" ") || void 0, le = s((e) => {
-		(w || C) && e || V(e);
-	}, [C, w]), ue = s((e) => {
+var b = o(function({ value: o, onChange: m, placeholder: h, maskLetters: g, invalidMessage: b, openCalendarLabel: ee, minDate: x, maxDate: te, disabledDates: ne, size: S = "md", disabled: C, readOnly: w, required: re, error: T = !1, locale: E = "es-ES", id: D, name: O, describedBy: ie, "aria-describedby": ae, "aria-label": oe, calendarLabel: k, previousMonthLabel: A, nextMonthLabel: j, previousYearsLabel: M, nextYearsLabel: N, yearGridLabel: P, gridLabel: F, today: I, onBlur: L, className: R }, z) {
+	let B = e("datePicker", v), [V, H] = d(!1), U = l(() => _(E), [E]), W = o instanceof Date ? U.format(o) : "", [G, K] = d(W), [q, se] = d(W);
+	W !== q && (se(W), K(W));
+	let J = u(null), ce = s((e) => {
+		J.current = e, r(z, e);
+	}, [z]), Y = G.trim(), X = Y ? U.parse(G) : null, Z = Y !== "" && !X, le = T || Z, Q = `${c()}-date-picker-invalid`, ue = [ie ?? ae, Z ? Q : void 0].filter(Boolean).join(" ") || void 0, de = s((e) => {
+		(w || C) && e || H(e);
+	}, [C, w]), fe = s((e) => {
 		let t = e.target.value;
-		if (G(t), t.trim() === "") {
-			p?.(null);
+		if (K(t), t.trim() === "") {
+			m?.(null);
 			return;
 		}
-		let n = H.parse(t);
-		n && p?.(n);
-	}, [H, p]), de = s((e) => {
+		let n = U.parse(t);
+		n && m?.(n);
+	}, [U, m]), pe = s((e) => {
 		if (e.key === "ArrowDown" && !w && !C) {
-			e.preventDefault(), V(!0);
+			e.preventDefault(), H(!0);
 			return;
 		}
-		e.key === "Escape" && B && (e.preventDefault(), V(!1));
+		e.key === "Escape" && V && (e.preventDefault(), H(!1));
 	}, [
 		C,
-		B,
+		V,
 		w
-	]), fe = s((e) => {
-		G(H.format(e)), p?.(e), V(!1), requestAnimationFrame(() => J.current?.focus());
-	}, [H, p]), pe = /* @__PURE__ */ d("button", {
+	]), me = s((e) => {
+		K(U.format(e)), m?.(e), H(!1), requestAnimationFrame(() => J.current?.focus());
+	}, [U, m]), he = /* @__PURE__ */ f("button", {
 		type: "button",
 		className: "date-picker__button",
-		"aria-label": z("openCalendar", y),
+		"aria-label": B("openCalendar", ee),
 		"aria-haspopup": "dialog",
-		"aria-expanded": B,
+		"aria-expanded": V,
 		disabled: C,
 		tabIndex: w ? -1 : void 0,
-		children: /* @__PURE__ */ d(t, {
+		children: /* @__PURE__ */ f(t, {
 			name: "calendar",
 			size: "sm",
 			className: "date-picker__glyph"
 		})
-	}), $ = z("calendar", ie);
-	return /* @__PURE__ */ f("div", {
+	}), $ = B("calendar", k);
+	return /* @__PURE__ */ p("div", {
 		className: [
 			"date-picker",
 			S === "md" ? "" : `date-picker--${S}`,
-			L ?? ""
+			R ?? ""
 		].filter(Boolean).join(" "),
 		children: [
-			O && /* @__PURE__ */ d("input", {
+			O && /* @__PURE__ */ f("input", {
 				type: "hidden",
 				name: O,
-				value: o instanceof Date ? _(o) : ""
+				value: o instanceof Date ? y(o) : ""
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				className: "date-picker__control",
-				children: [/* @__PURE__ */ d(n, {
-					ref: oe,
+				children: [/* @__PURE__ */ f(n, {
+					ref: ce,
 					id: D,
 					className: "date-picker__input",
 					type: "text",
 					inputMode: "numeric",
 					autoComplete: "off",
 					size: S,
-					error: se,
-					value: W,
-					placeholder: m ?? H.mask(z("maskLetters", h)),
+					error: le,
+					value: G,
+					placeholder: h ?? U.mask(B("maskLetters", g)),
 					disabled: C,
 					readOnly: w,
-					"aria-label": re,
-					"aria-describedby": ce,
-					onChange: ue,
-					onKeyDown: de,
-					onBlur: I
-				}), /* @__PURE__ */ d(i, {
-					trigger: pe,
+					required: re,
+					"aria-label": oe,
+					"aria-describedby": ue,
+					onChange: fe,
+					onKeyDown: pe,
+					onBlur: L
+				}), /* @__PURE__ */ f(i, {
+					trigger: he,
 					label: $,
-					open: B,
-					onOpenChange: le,
+					open: V,
+					onOpenChange: de,
 					side: "bottom",
 					align: "end",
 					sideOffset: -1,
 					className: "date-picker__popover",
-					children: /* @__PURE__ */ d(a, {
+					children: /* @__PURE__ */ f(a, {
 						value: X ?? o ?? null,
-						onChange: fe,
-						gridLabel: P ?? $,
-						previousMonthLabel: ae,
-						nextMonthLabel: A,
-						previousYearsLabel: j,
-						nextYearsLabel: M,
-						yearGridLabel: N,
-						today: F,
-						minDate: b,
-						maxDate: x,
-						disabledDates: te,
+						onChange: me,
+						gridLabel: F ?? $,
+						previousMonthLabel: A,
+						nextMonthLabel: j,
+						previousYearsLabel: M,
+						nextYearsLabel: N,
+						yearGridLabel: P,
+						today: I,
+						minDate: x,
+						maxDate: te,
+						disabledDates: ne,
 						locale: E,
 						size: S
 					})
 				})]
 			}),
-			Z && /* @__PURE__ */ d("span", {
+			Z && /* @__PURE__ */ f("span", {
 				id: Q,
 				className: "date-picker__message",
 				role: "alert",
-				children: z("invalid", v)
+				children: B("invalid", b)
 			})
 		]
 	});
 });
 //#endregion
-export { v as t };
+export { b as t };

package/dist/_shared/default-render-link.js

@@ -3,5 +3,10 @@ import { jsx as e } from "react/jsx-runtime";
 function t(t) {
 	return /* @__PURE__ */ e("a", { ...t });
 }
+function n(t) {
+	return function(n) {
+		return /* @__PURE__ */ e(t, { ...n });
+	};
+}
 //#endregion
-export { t };
+export { n, t };

package/dist/_shared/dotsbutton.js

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

package/dist/_shared/env.js

@@ -1,6 +1,17 @@
 //#region src/stories/constants/env.ts
 function e() {
-	return globalThis.process?.env?.NODE_ENV !== "production";
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return !1;
+	}
+}
+var t = /* @__PURE__ */ new Set();
+function n(n, r) {
+	!e() || t.has(n) || (t.add(n), console.warn(`@studiolxd/brand: ${r}`));
+}
+function r(e, t, r) {
+	n(`deprecated:${e}:${t}`, `\`<${e} ${t}>\` está obsoleta; usa ${r}. Se retira en la v52.`);
 }
 //#endregion
-export { e as t };
+export { r as n, e as t };

package/dist/_shared/field-optional.js

@@ -0,0 +1,9 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/stories/constants/field-optional.ts
+var n = e(!1);
+function r(e, r) {
+	let i = t(n);
+	return e ?? (i && !r);
+}
+//#endregion
+export { r as n, n as t };

package/dist/_shared/fieldshell.js

@@ -0,0 +1,85 @@
+import { r as e } from "./brandmessagescontext.js";
+import { VisuallyHidden as t } from "../visually-hidden.js";
+import { ErrorText as n } from "../error-text.js";
+import { Label as r } from "../label.js";
+import { useId as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/stories/messages/es/field.ts
+var c = {
+	optional: "(opcional)",
+	required: "obligatorio"
+};
+//#endregion
+//#region src/stories/molecules/_shared/FieldShell.tsx
+function l(e) {
+	return `${e}-required`;
+}
+function u({ id: n, label: r }) {
+	return /* @__PURE__ */ o(t, {
+		id: n,
+		children: e("field", c)("required", r)
+	});
+}
+function d(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function f({ id: e, error: t = !1, errorMessage: n, helperText: r, describedBy: a }) {
+	let o = i(), s = e ?? o, c = n ? `${s}-error` : void 0, l = r ? `${s}-helper` : void 0;
+	return {
+		id: s,
+		labelId: `${s}-label`,
+		errorId: c,
+		helperId: l,
+		describedBy: d(c, l, a),
+		hasError: t || !!n,
+		errorMessage: n,
+		helperText: r
+	};
+}
+function p({ field: i, block: l, modifiers: u = [], className: d, size: f = "md", label: p, optional: m = !1, optionalLabel: h, labelHidden: g = !1, layout: _ = "stack", labelFor: v, labelIdentified: y = !1, rootProps: b, children: x, footer: S }) {
+	let C = v ?? i.id, w = y ? i.labelId : void 0, T = e("field", c), E = m && p ? /* @__PURE__ */ s(a, { children: [
+		p,
+		" ",
+		/* @__PURE__ */ o("span", {
+			className: "label__optional",
+			children: T("optional", h)
+		})
+	] }) : p;
+	return /* @__PURE__ */ s("div", {
+		...b,
+		className: [
+			l,
+			...u,
+			d
+		].filter(Boolean).join(" "),
+		children: [
+			_ === "inline" ? /* @__PURE__ */ s("label", {
+				className: `${l}__control`,
+				htmlFor: C,
+				children: [x, o(g ? t : "span", {
+					id: w,
+					className: `${l}__label`,
+					children: E
+				})]
+			}) : /* @__PURE__ */ s(a, { children: [p ? /* @__PURE__ */ o(r, {
+				id: w,
+				htmlFor: C,
+				hidden: g,
+				size: f,
+				children: E
+			}) : null, x] }),
+			i.errorMessage && /* @__PURE__ */ o(n, {
+				id: i.errorId,
+				children: i.errorMessage
+			}),
+			i.helperText && /* @__PURE__ */ o("span", {
+				id: i.helperId,
+				className: `${l}__helper`,
+				children: i.helperText
+			}),
+			S
+		]
+	});
+}
+//#endregion
+export { f as a, l as i, p as n, d as r, u as t };

package/dist/_shared/fileupload.js

@@ -0,0 +1,237 @@
+import '../fileupload.css';
+import { n as e } from "./env.js";
+import { r as t } from "./brandmessagescontext.js";
+import { Icon as n } from "../icon.js";
+import { VisuallyHidden as r } from "../visually-hidden.js";
+import { Spinner as i } from "../spinner.js";
+import { n as ee } from "./form-size.js";
+import { t as te } from "./assign-ref.js";
+import { ProgressBar as a } from "../progress-bar.js";
+import { i as ne, n as o, t as re } from "./validate.js";
+import { forwardRef as s, useCallback as c, useEffect as l, useId as ie, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/stories/messages/es/fileUpload.ts
+var ae = {
+	dropzone: "Arrastra archivos aquí",
+	dropzoneActive: "Suelta los archivos aquí",
+	dropzoneHint: "o haz clic para seleccionar",
+	maxSize: (e) => `máx. ${e}`,
+	maxFiles: (e) => `hasta ${e} archivos`,
+	files: "Archivos seleccionados",
+	progress: "Progreso de subida",
+	removeFile: (e) => `Eliminar ${e}`,
+	tooLarge: (e) => `Archivo demasiado grande (máx. ${e})`,
+	invalidType: "Tipo de archivo no permitido",
+	uploading: "Subiendo…"
+}, h = /* @__PURE__ */ new WeakMap();
+function oe(e) {
+	if (!e.type.startsWith("image/")) return;
+	let t = h.get(e);
+	return t || (t = URL.createObjectURL(e), h.set(e, t)), t;
+}
+function g(e) {
+	let t = h.get(e);
+	t && (URL.revokeObjectURL(t), h.delete(e));
+}
+var _ = s(function({ multiple: s = !1, accept: h, maxSize: _, maxFiles: v, value: y, defaultValue: b = [], onChange: x, progress: S, uploading: C = !1, uploadingLabel: se, uploadingLabelVisible: ce = !1, disabled: w = !1, error: T = !1, id: le, name: ue, describedBy: de, ariaLabel: E, "aria-describedby": fe, "aria-label": pe, required: me, onBlur: he, className: ge, locale: D = re, dropzoneLabel: _e, dropzoneActiveLabel: ve, dropzoneHintLabel: ye, maxSizeHint: be, maxFilesHint: xe, filesLabel: O, progressLabel: k, removeFileLabel: A, tooLargeError: j, invalidTypeError: M, size: Se }, Ce) {
+	E !== void 0 && e("FileUpload", "ariaLabel", "`aria-label`");
+	let N = t("fileUpload", ae), P = ee(Se), F = P === "sm" ? "sm" : P === "lg" ? "lg" : "md", I = y !== void 0, [L, R] = d(b), [z, B] = d(/* @__PURE__ */ new Map()), [V, H] = d(!1), U = u(/* @__PURE__ */ new Set()), W = u(null), we = ie(), G = le ?? `file-upload-${we}`, K = I ? y : L;
+	l(() => {
+		K.forEach((e) => U.current.add(e));
+	}, [K]), l(() => {
+		let e = U.current;
+		return () => {
+			e.forEach(g);
+		};
+	}, []);
+	let q = c((e) => {
+		if (w || C) return;
+		let t = Array.from(e), n = I ? y ?? [] : L, r = new Map(z), i = [...n];
+		for (let e of t) {
+			if (v !== void 0 && i.filter((e) => !r.has(e)).length >= v) break;
+			let t = ne(e, h, _, N("tooLarge", j), N("invalidType", M), D);
+			t && r.set(e, t), i.push(e);
+		}
+		B(r), I || R(i), x?.(i.filter((e) => !r.has(e)));
+	}, [
+		w,
+		C,
+		h,
+		_,
+		v,
+		I,
+		y,
+		L,
+		z,
+		x,
+		N,
+		j,
+		M,
+		D
+	]), Te = c((e) => {
+		if (C) return;
+		let t = (I ? y ?? [] : L).filter((t) => t !== e), n = new Map(z);
+		n.delete(e), g(e), B(n), I || R(t), x?.(t.filter((e) => !n.has(e))), W.current && (W.current.value = "");
+	}, [
+		C,
+		I,
+		y,
+		L,
+		z,
+		x
+	]), Ee = (e) => {
+		e.target.files && q(e.target.files);
+	}, De = (e) => {
+		e.preventDefault(), !w && !C && H(!0);
+	}, Oe = (e) => {
+		e.preventDefault(), H(!1);
+	}, J = (e) => {
+		e.preventDefault(), H(!1), !w && !C && e.dataTransfer.files && q(e.dataTransfer.files);
+	}, ke = () => {
+		!w && !C && W.current?.click();
+	}, Ae = [
+		"file-upload",
+		P === "md" ? "" : `file-upload--${P}`,
+		V ? "file-upload--dragging" : "",
+		T ? "file-upload--error" : "",
+		w ? "file-upload--disabled" : "",
+		C ? "file-upload--uploading" : "",
+		K.length > 0 ? "file-upload--has-files" : "",
+		ge ?? ""
+	].filter(Boolean).join(" "), Y = `${G}-hint`, je = [de ?? fe, Y].filter(Boolean).join(" "), X = N("dropzone", _e), Z = N("dropzoneHint", ye), Q = C ? N("uploading", se) : "", Me = C && ce, $ = [];
+	return h && $.push(h), _ && $.push(N("maxSize", be)(o(_, D))), s && v && $.push(N("maxFiles", xe)(v)), /* @__PURE__ */ m("div", {
+		className: Ae,
+		children: [
+			/* @__PURE__ */ p(r, { children: /* @__PURE__ */ p("input", {
+				ref: (e) => {
+					W.current = e, te(Ce, e);
+				},
+				type: "file",
+				id: G,
+				name: ue,
+				multiple: s,
+				accept: h,
+				disabled: w,
+				required: me,
+				"aria-label": pe ?? E,
+				"aria-describedby": je,
+				"aria-invalid": T || void 0,
+				"aria-busy": C || void 0,
+				"aria-disabled": C || void 0,
+				onClick: C ? (e) => e.preventDefault() : void 0,
+				onChange: Ee,
+				onBlur: he
+			}) }),
+			/* @__PURE__ */ p("div", {
+				className: "file-upload__dropzone",
+				onClick: ke,
+				onDragOver: De,
+				onDragLeave: Oe,
+				onDrop: J,
+				"aria-hidden": "true",
+				children: C ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("span", {
+					className: "file-upload__icon",
+					children: /* @__PURE__ */ p(i, {
+						size: F,
+						"aria-hidden": !0
+					})
+				}), Me && /* @__PURE__ */ p("span", {
+					className: "file-upload__text",
+					children: Q
+				})] }) : /* @__PURE__ */ m(f, { children: [
+					/* @__PURE__ */ p(n, {
+						name: "upload",
+						size: F,
+						className: "file-upload__icon"
+					}),
+					/* @__PURE__ */ p("span", {
+						className: "file-upload__text",
+						children: V ? N("dropzoneActive", ve) : X
+					}),
+					/* @__PURE__ */ p("span", {
+						className: "file-upload__text file-upload__text--secondary",
+						children: Z
+					}),
+					$.length > 0 && /* @__PURE__ */ p("span", {
+						className: "file-upload__subtext",
+						children: $.join(" · ")
+					})
+				] })
+			}),
+			/* @__PURE__ */ p(r, {
+				id: Y,
+				children: [
+					X,
+					Z,
+					...$
+				].join(". ")
+			}),
+			C && /* @__PURE__ */ p(r, {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "false",
+				children: Q
+			}),
+			K.length > 0 && /* @__PURE__ */ p("ul", {
+				className: "file-upload__list",
+				"aria-label": N("files", O),
+				children: K.map((e, t) => {
+					let r = z.get(e), i = oe(e);
+					return /* @__PURE__ */ m("li", {
+						className: `file-upload__item${r ? " file-upload__item--error" : ""}`,
+						children: [
+							/* @__PURE__ */ p("div", {
+								className: "file-upload__item-thumb",
+								"aria-hidden": "true",
+								children: i ? /* @__PURE__ */ p("img", {
+									src: i,
+									alt: ""
+								}) : /* @__PURE__ */ p(n, {
+									name: "file-text",
+									size: "sm"
+								})
+							}),
+							/* @__PURE__ */ m("div", {
+								className: "file-upload__item-info",
+								children: [
+									/* @__PURE__ */ p("span", {
+										className: "file-upload__item-name",
+										children: e.name
+									}),
+									/* @__PURE__ */ p("span", {
+										className: "file-upload__item-size",
+										children: o(e.size, D)
+									}),
+									r && /* @__PURE__ */ p("span", {
+										className: "file-upload__item-error-msg",
+										role: "alert",
+										children: r
+									})
+								]
+							}),
+							/* @__PURE__ */ p("button", {
+								className: "file-upload__item-remove",
+								type: "button",
+								onClick: () => Te(e),
+								"aria-disabled": C || void 0,
+								"aria-label": N("removeFile", A)(e.name),
+								children: /* @__PURE__ */ p(n, {
+									name: "close",
+									size: "sm"
+								})
+							})
+						]
+					}, `${e.name}-${e.size}-${t}`);
+				})
+			}),
+			S !== void 0 && /* @__PURE__ */ p(a, {
+				value: S,
+				label: N("progress", k),
+				size: "sm",
+				className: "file-upload__progress"
+			})
+		]
+	});
+});
+//#endregion
+export { _ as t };

package/dist/_shared/focusable-when-disabled.js

@@ -0,0 +1,10 @@
+//#region src/stories/constants/focusable-when-disabled.ts
+var e = Symbol.for("@studiolxd/brand:focusableWhenDisabled");
+function t(t) {
+	return t[e] = !0, t;
+}
+function n(t) {
+	return (typeof t == "object" || typeof t == "function") && t !== null && t[e] === !0;
+}
+//#endregion
+export { n, t };