@studiolxd/brand 49.25.0 → 49.27.0

package/dist/file-upload.css

@@ -1 +1 @@
-.file-upload{width:100%}.file-upload__dropzone{--_drop-color:var(--file-upload-border-color);--_drop-bg:var(--file-upload-bg);--_dash:var(--file-upload-border-dash-length);--_gap:var(--file-upload-border-dash-gap)}.file-upload.file-upload--sm{--file-upload-padding-block:var(--file-upload-sm-padding-block);--file-upload-padding-inline:var(--file-upload-sm-padding-inline);--file-upload-text-font-size:var(--file-upload-sm-text-font-size);--file-upload-subtext-font-size:var(--file-upload-sm-subtext-font-size);--file-upload-thumb-size:var(--file-upload-sm-thumb-size);--file-upload-item-name-font-size:var(--file-upload-sm-item-name-font-size)}.file-upload.file-upload--lg{--file-upload-padding-block:var(--file-upload-lg-padding-block);--file-upload-padding-inline:var(--file-upload-lg-padding-inline);--file-upload-text-font-size:var(--file-upload-lg-text-font-size);--file-upload-subtext-font-size:var(--file-upload-lg-subtext-font-size);--file-upload-thumb-size:var(--file-upload-lg-thumb-size);--file-upload-item-name-font-size:var(--file-upload-lg-item-name-font-size)}.file-upload__dropzone{justify-content:center;align-items:center;gap:var(--file-upload-gap);width:100%;padding-block:var(--file-upload-padding-block);padding-inline:var(--file-upload-padding-inline);background-image:repeating-linear-gradient(90deg, var(--_drop-color) 0, var(--_drop-color) var(--_dash), transparent var(--_dash), transparent calc(var(--_dash) + var(--_gap))), repeating-linear-gradient(90deg, var(--_drop-color) 0, var(--_drop-color) var(--_dash), transparent var(--_dash), transparent calc(var(--_dash) + var(--_gap))), repeating-linear-gradient(180deg, var(--_drop-color) 0, var(--_drop-color) var(--_dash), transparent var(--_dash), transparent calc(var(--_dash) + var(--_gap))), repeating-linear-gradient(180deg, var(--_drop-color) 0, var(--_drop-color) var(--_dash), transparent var(--_dash), transparent calc(var(--_dash) + var(--_gap)));background-size:100% var(--file-upload-border-width), 100% var(--file-upload-border-width), var(--file-upload-border-width) 100%, var(--file-upload-border-width) 100%;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-color:var(--_drop-bg);color:var(--file-upload-text-color);cursor:pointer;transition:background-image var(--file-upload-transition-duration) var(--file-upload-transition-easing), background-color var(--file-upload-transition-duration) var(--file-upload-transition-easing);text-align:center;box-sizing:border-box;outline:none;flex-direction:column;display:flex}.file-upload:has(input[type=file]:focus-visible) .file-upload__dropzone{outline:var(--input-focus-ring-width) solid var(--input-focus-ring-color);outline-offset:var(--file-upload-remove-focus-ring-offset)}.file-upload.file-upload--dragging .file-upload__dropzone{--_drop-color:var(--file-upload-drag-border-color);--_drop-bg:var(--file-upload-drag-bg)}.file-upload.file-upload--error .file-upload__dropzone{--_drop-color:var(--file-upload-error-border-color);--_drop-bg:var(--file-upload-error-bg)}.file-upload.file-upload--disabled .file-upload__dropzone{opacity:var(--file-upload-disabled-opacity);cursor:var(--file-upload-disabled-cursor);pointer-events:none}.file-upload__icon{color:var(--file-upload-icon-color);flex-shrink:0;margin-block-end:var(--file-upload-gap)}.file-upload__text{font-family:var(--file-upload-text-font-family);font-size:var(--file-upload-text-font-size);font-weight:var(--file-upload-text-font-weight);color:var(--file-upload-text-color)}.file-upload__text--secondary{color:var(--file-upload-subtext-color);font-weight:var(--file-upload-subtext-font-weight)}.file-upload__subtext{font-family:var(--file-upload-text-font-family);font-size:var(--file-upload-subtext-font-size);color:var(--file-upload-subtext-color);margin-block-start:var(--file-upload-gap)}.file-upload__list{gap:var(--file-upload-list-gap);flex-direction:column;margin:0;margin-block-start:var(--file-upload-list-margin-block-start);padding:0;list-style:none;display:flex}.file-upload__item{align-items:center;gap:var(--file-upload-item-gap);padding-block:var(--file-upload-item-padding-block);padding-inline:var(--file-upload-item-padding-inline);border-width:var(--file-upload-item-border-width);border-style:solid;border-color:var(--file-upload-item-border-color);border-radius:var(--file-upload-item-border-radius);background-color:var(--file-upload-item-bg);display:flex}.file-upload__item.file-upload__item--error{border-color:var(--file-upload-item-error-border-color);background-color:var(--file-upload-item-error-bg)}.file-upload__item-thumb{width:var(--file-upload-thumb-size);height:var(--file-upload-thumb-size);border-radius:var(--file-upload-thumb-border-radius);background-color:var(--file-upload-thumb-bg);color:var(--file-upload-thumb-icon-color);flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.file-upload__item-thumb img{object-fit:cover;width:100%;height:100%}.file-upload__item-info{gap:var(--file-upload-item-info-gap);flex-direction:column;flex:1;min-width:0;display:flex}.file-upload__item-name{font-family:var(--file-upload-item-name-font-family);font-size:var(--file-upload-item-name-font-size);font-weight:var(--file-upload-item-name-font-weight);color:var(--file-upload-item-name-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.file-upload__item-size{font-family:var(--file-upload-item-name-font-family);font-size:var(--file-upload-item-size-font-size);color:var(--file-upload-item-size-color)}.file-upload__item-error-msg{font-family:var(--file-upload-item-name-font-family);font-size:var(--file-upload-item-error-font-size);color:var(--file-upload-item-error-color)}.file-upload__item-remove{cursor:pointer;color:var(--file-upload-remove-color);transition:color var(--file-upload-transition-duration) var(--file-upload-transition-easing);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;line-height:1;display:flex}.file-upload__item-remove:hover{color:var(--file-upload-remove-color-hover)}.file-upload__item-remove:focus-visible{outline:var(--input-focus-ring-width) solid var(--input-focus-ring-color);outline-offset:var(--file-upload-remove-focus-ring-offset);border-radius:var(--file-upload-remove-border-radius)}.file-upload__progress{margin-block-start:var(--file-upload-progress-margin-block-start)}
+.file-upload{width:100%}.file-upload__dropzone{--_drop-color:var(--file-upload-border-color);--_drop-bg:var(--file-upload-bg);--_dash:var(--file-upload-border-dash-length);--_gap:var(--file-upload-border-dash-gap)}.file-upload.file-upload--sm{--file-upload-padding-block:var(--file-upload-sm-padding-block);--file-upload-padding-inline:var(--file-upload-sm-padding-inline);--file-upload-text-font-size:var(--file-upload-sm-text-font-size);--file-upload-subtext-font-size:var(--file-upload-sm-subtext-font-size);--file-upload-thumb-size:var(--file-upload-sm-thumb-size);--file-upload-item-name-font-size:var(--file-upload-sm-item-name-font-size)}.file-upload.file-upload--lg{--file-upload-padding-block:var(--file-upload-lg-padding-block);--file-upload-padding-inline:var(--file-upload-lg-padding-inline);--file-upload-text-font-size:var(--file-upload-lg-text-font-size);--file-upload-subtext-font-size:var(--file-upload-lg-subtext-font-size);--file-upload-thumb-size:var(--file-upload-lg-thumb-size);--file-upload-item-name-font-size:var(--file-upload-lg-item-name-font-size)}.file-upload__dropzone{justify-content:center;align-items:center;gap:var(--file-upload-gap);width:100%;padding-block:var(--file-upload-padding-block);padding-inline:var(--file-upload-padding-inline);background-image:repeating-linear-gradient(90deg, var(--_drop-color) 0, var(--_drop-color) var(--_dash), transparent var(--_dash), transparent calc(var(--_dash) + var(--_gap))), repeating-linear-gradient(90deg, var(--_drop-color) 0, var(--_drop-color) var(--_dash), transparent var(--_dash), transparent calc(var(--_dash) + var(--_gap))), repeating-linear-gradient(180deg, var(--_drop-color) 0, var(--_drop-color) var(--_dash), transparent var(--_dash), transparent calc(var(--_dash) + var(--_gap))), repeating-linear-gradient(180deg, var(--_drop-color) 0, var(--_drop-color) var(--_dash), transparent var(--_dash), transparent calc(var(--_dash) + var(--_gap)));background-size:100% var(--file-upload-border-width), 100% var(--file-upload-border-width), var(--file-upload-border-width) 100%, var(--file-upload-border-width) 100%;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-color:var(--_drop-bg);color:var(--file-upload-text-color);cursor:pointer;transition:background-image var(--file-upload-transition-duration) var(--file-upload-transition-easing), background-color var(--file-upload-transition-duration) var(--file-upload-transition-easing);text-align:center;box-sizing:border-box;outline:none;flex-direction:column;display:flex}.file-upload:has(input[type=file]:focus-visible) .file-upload__dropzone{outline:var(--input-focus-ring-width) solid var(--input-focus-ring-color);outline-offset:var(--file-upload-remove-focus-ring-offset)}.file-upload.file-upload--dragging .file-upload__dropzone{--_drop-color:var(--file-upload-drag-border-color);--_drop-bg:var(--file-upload-drag-bg)}.file-upload.file-upload--error .file-upload__dropzone{--_drop-color:var(--file-upload-error-border-color);--_drop-bg:var(--file-upload-error-bg)}.file-upload.file-upload--disabled .file-upload__dropzone{opacity:var(--file-upload-disabled-opacity);cursor:var(--file-upload-disabled-cursor);pointer-events:none}.file-upload.file-upload--uploading .file-upload__dropzone{cursor:progress;pointer-events:none}.file-upload.file-upload--uploading span.file-upload__icon{display:flex}.file-upload.file-upload--uploading .file-upload__item-remove{pointer-events:none}.file-upload__icon{color:var(--file-upload-icon-color);flex-shrink:0;margin-block-end:var(--file-upload-gap)}.file-upload__text{font-family:var(--file-upload-text-font-family);font-size:var(--file-upload-text-font-size);font-weight:var(--file-upload-text-font-weight);color:var(--file-upload-text-color)}.file-upload__text--secondary{color:var(--file-upload-subtext-color);font-weight:var(--file-upload-subtext-font-weight)}.file-upload__subtext{font-family:var(--file-upload-text-font-family);font-size:var(--file-upload-subtext-font-size);color:var(--file-upload-subtext-color);margin-block-start:var(--file-upload-gap)}.file-upload__list{gap:var(--file-upload-list-gap);flex-direction:column;margin:0;margin-block-start:var(--file-upload-list-margin-block-start);padding:0;list-style:none;display:flex}.file-upload__item{align-items:center;gap:var(--file-upload-item-gap);padding-block:var(--file-upload-item-padding-block);padding-inline:var(--file-upload-item-padding-inline);border-width:var(--file-upload-item-border-width);border-style:solid;border-color:var(--file-upload-item-border-color);border-radius:var(--file-upload-item-border-radius);background-color:var(--file-upload-item-bg);display:flex}.file-upload__item.file-upload__item--error{border-color:var(--file-upload-item-error-border-color);background-color:var(--file-upload-item-error-bg)}.file-upload__item-thumb{width:var(--file-upload-thumb-size);height:var(--file-upload-thumb-size);border-radius:var(--file-upload-thumb-border-radius);background-color:var(--file-upload-thumb-bg);color:var(--file-upload-thumb-icon-color);flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.file-upload__item-thumb img{object-fit:cover;width:100%;height:100%}.file-upload__item-info{gap:var(--file-upload-item-info-gap);flex-direction:column;flex:1;min-width:0;display:flex}.file-upload__item-name{font-family:var(--file-upload-item-name-font-family);font-size:var(--file-upload-item-name-font-size);font-weight:var(--file-upload-item-name-font-weight);color:var(--file-upload-item-name-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.file-upload__item-size{font-family:var(--file-upload-item-name-font-family);font-size:var(--file-upload-item-size-font-size);color:var(--file-upload-item-size-color)}.file-upload__item-error-msg{font-family:var(--file-upload-item-name-font-family);font-size:var(--file-upload-item-error-font-size);color:var(--file-upload-item-error-color)}.file-upload__item-remove{cursor:pointer;color:var(--file-upload-remove-color);transition:color var(--file-upload-transition-duration) var(--file-upload-transition-easing);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;line-height:1;display:flex}.file-upload__item-remove:hover{color:var(--file-upload-remove-color-hover)}.file-upload__item-remove:focus-visible{outline:var(--input-focus-ring-width) solid var(--input-focus-ring-color);outline-offset:var(--file-upload-remove-focus-ring-offset);border-radius:var(--file-upload-remove-border-radius)}.file-upload__progress{margin-block-start:var(--file-upload-progress-margin-block-start)}

package/dist/file-upload.js

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

package/dist/loading-state.css

@@ -1 +1 @@
-.loading-state{justify-content:center;align-items:center;gap:var(--loading-state-gap);block-size:100%;min-block-size:var(--loading-state-min-block-size);padding-block:var(--loading-state-padding-block);padding-inline:var(--loading-state-padding-inline);text-align:center;flex-direction:column;flex:auto;display:flex}.loading-state__spinner{color:var(--loading-state-spinner-color);display:flex}.loading-state.loading-state--sm{min-block-size:var(--loading-state-sm-min-block-size);padding-block:var(--loading-state-sm-padding-block)}.loading-state.loading-state--fill{min-block-size:calc(100dvh - var(--app-shell-chrome-block-start,0px) - 2 * var(--section-padding-block-lg))}
+.loading-state{justify-content:center;align-items:center;gap:var(--loading-state-gap);block-size:100%;min-block-size:var(--loading-state-min-block-size);padding-block:var(--loading-state-padding-block);padding-inline:var(--loading-state-padding-inline);text-align:center;flex-direction:column;flex:auto;display:flex}.loading-state__spinner{color:var(--loading-state-spinner-color);display:flex}.loading-state__label{font-family:var(--loading-state-label-font-family);font-size:var(--loading-state-label-font-size);color:var(--loading-state-label-color);margin-block:0;margin-inline:0}.loading-state.loading-state--sm .loading-state__label{font-size:var(--loading-state-sm-label-font-size)}.loading-state.loading-state--sm{min-block-size:var(--loading-state-sm-min-block-size);padding-block:var(--loading-state-sm-padding-block)}.loading-state.loading-state--fill{min-block-size:calc(100dvh - var(--app-shell-chrome-block-start,0px) - 2 * var(--section-padding-block-lg))}

package/dist/loading-state.js

@@ -7,37 +7,43 @@ import { Button as r } from "./button.js";
 import { useId as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/stories/molecules/LoadingState/LoadingState.tsx
-function s({ label: s, size: c = "md", fill: l = !1, action: u, className: d, ...f }) {
-	let p = e("spinner"), m = i(), h = p("label", s);
+function s({ label: s, labelVisible: c = !1, size: l = "md", fill: u = !1, action: d, className: f, ...p }) {
+	let m = e("spinner"), h = i(), g = m("label", s), _ = c && !!s;
 	return /* @__PURE__ */ o("div", {
 		className: [
 			"loading-state",
-			c === "sm" ? "loading-state--sm" : "",
-			l ? "loading-state--fill" : "",
-			d
+			l === "sm" ? "loading-state--sm" : "",
+			u ? "loading-state--fill" : "",
+			f
 		].filter(Boolean).join(" "),
 		role: "status",
 		"aria-busy": "true",
-		"aria-labelledby": m,
-		...f,
+		"aria-labelledby": h,
+		"aria-live": "polite",
+		"aria-atomic": "false",
+		...p,
 		children: [
 			/* @__PURE__ */ a("span", {
 				className: "loading-state__spinner",
 				children: /* @__PURE__ */ a(n, {
-					size: c === "sm" ? "md" : "lg",
+					size: l === "sm" ? "md" : "lg",
 					"aria-hidden": !0
 				})
 			}),
-			/* @__PURE__ */ a(t, {
-				id: m,
-				children: h
+			_ ? /* @__PURE__ */ a("p", {
+				id: h,
+				className: "loading-state__label",
+				children: g
+			}) : /* @__PURE__ */ a(t, {
+				id: h,
+				children: g
 			}),
-			u && /* @__PURE__ */ a(r, {
+			d && /* @__PURE__ */ a(r, {
 				variant: "outline",
-				size: c === "sm" ? "sm" : "md",
-				onClick: u.onClick,
-				href: u.href,
-				children: u.label
+				size: l === "sm" ? "sm" : "md",
+				onClick: d.onClick,
+				href: d.href,
+				children: d.label
 			})
 		]
 	});