@studiolxd/brand 49.24.1 → 49.26.0

package/dist/button.css

@@ -1 +1 @@
-.button{align-items:center;display:inline-flex}.button:not(.button--text){block-size:var(--button-height);padding-block:0}.button--primary{justify-content:var(--button-primary-justify-content);padding-inline:var(--button-primary-padding-inline);border-radius:var(--button-primary-border-radius);border-width:var(--button-primary-border-width);border-style:var(--button-primary-border-style);border-color:var(--button-primary-border);font-family:var(--button-primary-font-family);font-size:var(--button-primary-font-size);font-weight:var(--button-primary-font-weight);line-height:var(--button-primary-line-height);cursor:var(--button-primary-cursor);white-space:var(--button-primary-white-space);-webkit-text-decoration:var(--button-primary-text-decoration);text-decoration:var(--button-primary-text-decoration);background-color:var(--button-primary-bg);color:var(--button-primary-color);transition:background-color var(--button-primary-transition-duration) var(--button-primary-transition-easing), color var(--button-primary-transition-duration) var(--button-primary-transition-easing), border-color var(--button-primary-transition-duration) var(--button-primary-transition-easing)}.button--primary:hover{background-color:var(--button-primary-hover-bg);color:var(--button-primary-hover-color);border-color:var(--button-primary-hover-border)}.button--primary:active{background-color:var(--button-primary-active-bg);color:var(--button-primary-active-color);border-color:var(--button-primary-active-border)}.button--primary:focus-visible{outline:var(--button-primary-focus-ring-width) var(--button-primary-focus-ring-style) var(--button-primary-focus-ring-color);outline-offset:var(--button-primary-focus-ring-offset)}.button--primary:disabled,.button--primary[aria-disabled=true]{background-color:var(--button-primary-disabled-bg);color:var(--button-primary-disabled-color);border-color:var(--button-primary-disabled-border);cursor:var(--button-primary-disabled-cursor);pointer-events:none}.button--outline{justify-content:var(--button-outline-justify-content);padding-inline:var(--button-outline-padding-inline);border-radius:var(--button-outline-border-radius);border-width:var(--button-outline-border-width);border-style:var(--button-outline-border-style);border-color:var(--button-outline-border);font-family:var(--button-outline-font-family);font-size:var(--button-outline-font-size);font-weight:var(--button-outline-font-weight);line-height:var(--button-outline-line-height);cursor:var(--button-outline-cursor);white-space:var(--button-outline-white-space);-webkit-text-decoration:var(--button-outline-text-decoration);text-decoration:var(--button-outline-text-decoration);background-color:var(--button-outline-bg);color:var(--button-outline-color);transition:background-color var(--button-outline-transition-duration) var(--button-outline-transition-easing), color var(--button-outline-transition-duration) var(--button-outline-transition-easing), border-color var(--button-outline-transition-duration) var(--button-outline-transition-easing)}.button--outline:hover{background-color:var(--button-outline-hover-bg);color:var(--button-outline-hover-color);border-color:var(--button-outline-hover-border)}.button--outline:active{background-color:var(--button-outline-active-bg);color:var(--button-outline-active-color);border-color:var(--button-outline-active-border)}.button--outline:focus-visible{outline:var(--button-outline-focus-ring-width) var(--button-outline-focus-ring-style) var(--button-outline-focus-ring-color);outline-offset:var(--button-outline-focus-ring-offset)}.button--outline:disabled,.button--outline[aria-disabled=true]{color:var(--button-outline-disabled-color);border-color:var(--button-outline-disabled-border);cursor:var(--button-outline-disabled-cursor);pointer-events:none}.button--text{justify-content:var(--button-text-justify-content);padding-inline:var(--button-text-padding-inline);border-radius:var(--button-text-border-radius);border-width:var(--button-text-border-width);border-style:var(--button-text-border-style);border-color:var(--button-text-border);font-family:var(--button-text-font-family);font-size:var(--button-text-font-size);font-weight:var(--button-text-font-weight);line-height:var(--button-text-line-height);cursor:var(--button-text-cursor);white-space:var(--button-text-white-space);box-shadow:inset 0 calc(-1 * var(--button-text-underline-width)) 0 0 currentColor;background-color:var(--button-text-bg);color:var(--button-text-color);transition:color var(--button-text-transition-duration) var(--button-text-transition-easing);padding-block-end:var(--button-text-underline-offset);text-decoration:none}.button--text:hover{background-color:var(--button-text-hover-bg);color:var(--button-text-hover-color);border-color:var(--button-text-hover-border);box-shadow:inset 0 calc(-1 * var(--button-text-hover-underline-width)) 0 0 currentColor}.button--text:active{background-color:var(--button-text-active-bg);color:var(--button-text-active-color);border-color:var(--button-text-active-border);box-shadow:inset 0 calc(-1 * var(--button-text-hover-underline-width)) 0 0 currentColor}.button--text.button--ink{color:var(--button-text-ink-color);box-shadow:inset 0 calc(-1 * var(--button-text-ink-underline-width)) 0 0 currentColor}.button--text.button--ink:hover,.button--text.button--ink:active{color:var(--button-text-ink-color);box-shadow:inset 0 calc(-1 * var(--button-text-ink-hover-underline-width)) 0 0 currentColor}.button--text:focus-visible{outline:var(--button-text-focus-ring-width) var(--button-text-focus-ring-style) var(--button-text-focus-ring-color);outline-offset:var(--button-text-focus-ring-offset)}.button--text:disabled,.button--text[aria-disabled=true]{color:var(--button-text-disabled-color);cursor:var(--button-text-disabled-cursor);pointer-events:none}.button--ghost{justify-content:var(--button-ghost-justify-content);padding-inline:var(--button-ghost-padding-inline);border-radius:var(--button-ghost-border-radius);border-width:var(--button-ghost-border-width);border-style:var(--button-ghost-border-style);border-color:var(--button-ghost-border);font-family:var(--button-ghost-font-family);font-size:var(--button-ghost-font-size);font-weight:var(--button-ghost-font-weight);line-height:var(--button-ghost-line-height);cursor:var(--button-ghost-cursor);white-space:var(--button-ghost-white-space);-webkit-text-decoration:var(--button-ghost-text-decoration);text-decoration:var(--button-ghost-text-decoration);background-color:var(--button-ghost-bg);color:var(--button-ghost-color);transition:background-color var(--button-ghost-transition-duration) var(--button-ghost-transition-easing), color var(--button-ghost-transition-duration) var(--button-ghost-transition-easing)}.button--ghost:hover{background-color:var(--button-ghost-hover-bg);color:var(--button-ghost-hover-color)}.button--ghost:active{background-color:var(--button-ghost-active-bg);color:var(--button-ghost-active-color)}.button--ghost:focus-visible{outline:var(--button-ghost-focus-ring-width) var(--button-ghost-focus-ring-style) var(--button-ghost-focus-ring-color);outline-offset:var(--button-ghost-focus-ring-offset)}.button--ghost:disabled,.button--ghost[aria-disabled=true]{color:var(--button-ghost-disabled-color);cursor:var(--button-ghost-disabled-cursor);pointer-events:none}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]){color:var(--button-destructive-color);border-color:var(--button-destructive-border)}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]):hover{background-color:var(--button-destructive-hover-bg);color:var(--button-destructive-hover-color);border-color:var(--button-destructive-hover-border)}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]):active{background-color:var(--button-destructive-active-bg);color:var(--button-destructive-active-color);border-color:var(--button-destructive-active-border)}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]):focus-visible{outline-color:var(--button-destructive-focus-ring-color)}.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]),.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]):hover,.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]):active{color:var(--button-destructive-color)}.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]):focus-visible{outline-color:var(--button-destructive-focus-ring-color)}.button.button--sm:not(.button--text){block-size:var(--button-sm-height);padding-inline:var(--button-sm-padding-inline)}.button.button--sm{font-size:var(--button-sm-font-size)}.button.button--lg:not(.button--text){block-size:var(--button-lg-height);padding-inline:var(--button-lg-padding-inline)}.button.button--lg{font-size:var(--button-lg-font-size)}.button--block{width:var(--button-block-width)}@media (width<=767.98px){.button--block-mobile{width:var(--button-block-width)}}.button:not(.button--icon-only) .icon{--icon-size:1em}.button.button--icon-only{inline-size:var(--button-height);justify-content:center;padding-inline:0}.button.button--icon-only.button--sm{inline-size:var(--button-sm-height);padding-inline:0}.button.button--icon-only.button--lg{inline-size:var(--button-lg-height);padding-inline:0}
+.button{align-items:center;display:inline-flex}.button:not(.button--text){block-size:var(--button-height);padding-block:0}.button--primary{justify-content:var(--button-primary-justify-content);padding-inline:var(--button-primary-padding-inline);border-radius:var(--button-primary-border-radius);border-width:var(--button-primary-border-width);border-style:var(--button-primary-border-style);border-color:var(--button-primary-border);font-family:var(--button-primary-font-family);font-size:var(--button-primary-font-size);font-weight:var(--button-primary-font-weight);line-height:var(--button-primary-line-height);cursor:var(--button-primary-cursor);white-space:var(--button-primary-white-space);-webkit-text-decoration:var(--button-primary-text-decoration);text-decoration:var(--button-primary-text-decoration);background-color:var(--button-primary-bg);color:var(--button-primary-color);transition:background-color var(--button-primary-transition-duration) var(--button-primary-transition-easing), color var(--button-primary-transition-duration) var(--button-primary-transition-easing), border-color var(--button-primary-transition-duration) var(--button-primary-transition-easing)}.button--primary:hover{background-color:var(--button-primary-hover-bg);color:var(--button-primary-hover-color);border-color:var(--button-primary-hover-border)}.button--primary:active{background-color:var(--button-primary-active-bg);color:var(--button-primary-active-color);border-color:var(--button-primary-active-border)}.button--primary:focus-visible{outline:var(--button-primary-focus-ring-width) var(--button-primary-focus-ring-style) var(--button-primary-focus-ring-color);outline-offset:var(--button-primary-focus-ring-offset)}.button--primary:disabled,.button--primary[aria-disabled=true]{background-color:var(--button-primary-disabled-bg);color:var(--button-primary-disabled-color);border-color:var(--button-primary-disabled-border);cursor:var(--button-primary-disabled-cursor);pointer-events:none}.button--outline{justify-content:var(--button-outline-justify-content);padding-inline:var(--button-outline-padding-inline);border-radius:var(--button-outline-border-radius);border-width:var(--button-outline-border-width);border-style:var(--button-outline-border-style);border-color:var(--button-outline-border);font-family:var(--button-outline-font-family);font-size:var(--button-outline-font-size);font-weight:var(--button-outline-font-weight);line-height:var(--button-outline-line-height);cursor:var(--button-outline-cursor);white-space:var(--button-outline-white-space);-webkit-text-decoration:var(--button-outline-text-decoration);text-decoration:var(--button-outline-text-decoration);background-color:var(--button-outline-bg);color:var(--button-outline-color);transition:background-color var(--button-outline-transition-duration) var(--button-outline-transition-easing), color var(--button-outline-transition-duration) var(--button-outline-transition-easing), border-color var(--button-outline-transition-duration) var(--button-outline-transition-easing)}.button--outline:hover{background-color:var(--button-outline-hover-bg);color:var(--button-outline-hover-color);border-color:var(--button-outline-hover-border)}.button--outline:active{background-color:var(--button-outline-active-bg);color:var(--button-outline-active-color);border-color:var(--button-outline-active-border)}.button--outline:focus-visible{outline:var(--button-outline-focus-ring-width) var(--button-outline-focus-ring-style) var(--button-outline-focus-ring-color);outline-offset:var(--button-outline-focus-ring-offset)}.button--outline:disabled,.button--outline[aria-disabled=true]{color:var(--button-outline-disabled-color);border-color:var(--button-outline-disabled-border);cursor:var(--button-outline-disabled-cursor);pointer-events:none}.button--text{justify-content:var(--button-text-justify-content);padding-inline:var(--button-text-padding-inline);border-radius:var(--button-text-border-radius);border-width:var(--button-text-border-width);border-style:var(--button-text-border-style);border-color:var(--button-text-border);font-family:var(--button-text-font-family);font-size:var(--button-text-font-size);font-weight:var(--button-text-font-weight);line-height:var(--button-text-line-height);cursor:var(--button-text-cursor);white-space:var(--button-text-white-space);box-shadow:inset 0 calc(-1 * var(--button-text-underline-width)) 0 0 currentColor;background-color:var(--button-text-bg);color:var(--button-text-color);transition:color var(--button-text-transition-duration) var(--button-text-transition-easing);padding-block-end:var(--button-text-underline-offset);text-decoration:none}.button--text:hover{background-color:var(--button-text-hover-bg);color:var(--button-text-hover-color);border-color:var(--button-text-hover-border);box-shadow:inset 0 calc(-1 * var(--button-text-hover-underline-width)) 0 0 currentColor}.button--text:active{background-color:var(--button-text-active-bg);color:var(--button-text-active-color);border-color:var(--button-text-active-border);box-shadow:inset 0 calc(-1 * var(--button-text-hover-underline-width)) 0 0 currentColor}.button--text.button--ink{color:var(--button-text-ink-color);box-shadow:inset 0 calc(-1 * var(--button-text-ink-underline-width)) 0 0 currentColor}.button--text.button--ink:hover,.button--text.button--ink:active{color:var(--button-text-ink-color);box-shadow:inset 0 calc(-1 * var(--button-text-ink-hover-underline-width)) 0 0 currentColor}.button--text:focus-visible{outline:var(--button-text-focus-ring-width) var(--button-text-focus-ring-style) var(--button-text-focus-ring-color);outline-offset:var(--button-text-focus-ring-offset)}.button--text:disabled,.button--text[aria-disabled=true]{color:var(--button-text-disabled-color);cursor:var(--button-text-disabled-cursor);pointer-events:none}.button--ghost{justify-content:var(--button-ghost-justify-content);padding-inline:var(--button-ghost-padding-inline);border-radius:var(--button-ghost-border-radius);border-width:var(--button-ghost-border-width);border-style:var(--button-ghost-border-style);border-color:var(--button-ghost-border);font-family:var(--button-ghost-font-family);font-size:var(--button-ghost-font-size);font-weight:var(--button-ghost-font-weight);line-height:var(--button-ghost-line-height);cursor:var(--button-ghost-cursor);white-space:var(--button-ghost-white-space);-webkit-text-decoration:var(--button-ghost-text-decoration);text-decoration:var(--button-ghost-text-decoration);background-color:var(--button-ghost-bg);color:var(--button-ghost-color);transition:background-color var(--button-ghost-transition-duration) var(--button-ghost-transition-easing), color var(--button-ghost-transition-duration) var(--button-ghost-transition-easing)}.button--ghost:hover{background-color:var(--button-ghost-hover-bg);color:var(--button-ghost-hover-color)}.button--ghost:active{background-color:var(--button-ghost-active-bg);color:var(--button-ghost-active-color)}.button--ghost:focus-visible{outline:var(--button-ghost-focus-ring-width) var(--button-ghost-focus-ring-style) var(--button-ghost-focus-ring-color);outline-offset:var(--button-ghost-focus-ring-offset)}.button--ghost:disabled,.button--ghost[aria-disabled=true]{color:var(--button-ghost-disabled-color);cursor:var(--button-ghost-disabled-cursor);pointer-events:none}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]){color:var(--button-destructive-color);border-color:var(--button-destructive-border)}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]):hover{background-color:var(--button-destructive-hover-bg);color:var(--button-destructive-hover-color);border-color:var(--button-destructive-hover-border)}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]):active{background-color:var(--button-destructive-active-bg);color:var(--button-destructive-active-color);border-color:var(--button-destructive-active-border)}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]):focus-visible{outline-color:var(--button-destructive-focus-ring-color)}.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]),.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]):hover,.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]):active{color:var(--button-destructive-color)}.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]):focus-visible{outline-color:var(--button-destructive-focus-ring-color)}.button.button--sm:not(.button--text){block-size:var(--button-sm-height);padding-inline:var(--button-sm-padding-inline)}.button.button--sm{font-size:var(--button-sm-font-size)}.button.button--lg:not(.button--text){block-size:var(--button-lg-height);padding-inline:var(--button-lg-padding-inline)}.button.button--lg{font-size:var(--button-lg-font-size)}.button--block{width:var(--button-block-width)}@media (width<=767.98px){.button--block-mobile{width:var(--button-block-width)}}.button:not(.button--icon-only) .icon{--icon-size:1em}.button.button--icon-only{inline-size:var(--button-height);justify-content:center;padding-inline:0}.button.button--icon-only.button--sm{inline-size:var(--button-sm-height);padding-inline:0}.button.button--icon-only.button--lg{inline-size:var(--button-lg-height);padding-inline:0}.button__spinner{margin-inline-end:var(--button-loading-gap);display:inline-flex}.button.button--icon-only .button__spinner{margin-inline-end:0}.button .button__spinner .spinner__square{width:var(--button-loading-spinner-size);height:var(--button-loading-spinner-size)}

package/dist/button.js

@@ -1,60 +1,72 @@
 'use client';
 import './button.css';
-import { n as e } from "./_shared/form-size.js";
-import { forwardRef as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { useRender as r } from "@base-ui/react/use-render";
+import { Spinner as e } from "./spinner.js";
+import { n as t } from "./_shared/form-size.js";
+import { forwardRef as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useRender as o } from "@base-ui/react/use-render";
 //#region src/stories/atoms/Button/Button.tsx
-var i = t(function({ variant: t = "primary", tone: i = "accent", destructive: a = !1, size: o, block: s = !1, iconOnly: c = !1, children: l, type: u = "button", disabled: d, onClick: f, href: p, external: m = !1, render: h, className: g, ..._ }, v) {
-	let y = e(o), b = [
+var s = n(function({ variant: n = "primary", tone: s = "accent", destructive: c = !1, size: l, block: u = !1, iconOnly: d = !1, children: f, type: p = "button", disabled: m, loading: h = !1, onClick: g, href: _, external: v = !1, render: y, className: b, ...x }, S) {
+	let C = t(l), w = [
 		"button",
-		`button--${t}`,
-		t === "text" && i === "ink" ? "button--ink" : "",
-		a ? "button--destructive-intent" : "",
-		y === "md" ? "" : `button--${y}`,
-		s === "mobile" ? "button--block-mobile" : s ? "button--block" : "",
-		c ? "button--icon-only" : "",
-		g ?? ""
-	].filter(Boolean).join(" "), x = (e) => {
-		if (d) {
+		`button--${n}`,
+		n === "text" && s === "ink" ? "button--ink" : "",
+		c ? "button--destructive-intent" : "",
+		C === "md" ? "" : `button--${C}`,
+		u === "mobile" ? "button--block-mobile" : u ? "button--block" : "",
+		d ? "button--icon-only" : "",
+		h ? "button--loading" : "",
+		b ?? ""
+	].filter(Boolean).join(" "), T = !!m || h, E = (e) => {
+		if (T) {
 			e.preventDefault(), e.stopPropagation();
 			return;
 		}
-		f?.(e);
-	};
-	return r({
-		render: h,
-		ref: v,
-		enabled: h !== void 0,
+		g?.(e);
+	}, D = h ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("span", {
+		className: "button__spinner",
+		children: /* @__PURE__ */ i(e, {
+			size: "sm",
+			"aria-hidden": !0
+		})
+	}), d ? null : f] }) : f;
+	return o({
+		render: y,
+		ref: S,
+		enabled: y !== void 0,
 		props: {
-			className: b,
-			"aria-disabled": d ? !0 : void 0,
-			onClick: x,
-			..._,
-			children: l
+			className: w,
+			"aria-disabled": T ? !0 : void 0,
+			"aria-busy": h ? !0 : void 0,
+			onClick: E,
+			...x,
+			children: D
 		}
-	}) || (p === void 0 ? /* @__PURE__ */ n("button", {
-		ref: v,
-		className: b,
-		type: u,
-		disabled: d,
-		onClick: f,
-		..._,
-		children: l
-	}) : /* @__PURE__ */ n("a", {
-		ref: v,
-		className: b,
-		href: d ? void 0 : p,
-		"aria-disabled": d ? !0 : void 0,
-		role: d ? "link" : void 0,
-		onClick: x,
-		...m ? {
+	}) || (_ === void 0 ? /* @__PURE__ */ i("button", {
+		ref: S,
+		className: w,
+		type: p,
+		disabled: m,
+		"aria-disabled": h ? !0 : void 0,
+		"aria-busy": h ? !0 : void 0,
+		onClick: E,
+		...x,
+		children: D
+	}) : /* @__PURE__ */ i("a", {
+		ref: S,
+		className: w,
+		href: T ? void 0 : _,
+		"aria-disabled": T ? !0 : void 0,
+		"aria-busy": h ? !0 : void 0,
+		role: T ? "link" : void 0,
+		onClick: E,
+		...v ? {
 			target: "_blank",
 			rel: "noopener noreferrer"
 		} : {},
-		..._,
-		children: l
+		...x,
+		children: D
 	}));
 });
 //#endregion
-export { i as Button };
+export { s as Button };

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

package/dist/loading-region.css

@@ -0,0 +1 @@
+.loading-region{gap:var(--loading-region-gap);flex-direction:column;display:flex}.skeleton-text,.skeleton-list,.skeleton-table{flex-direction:column;display:flex}.skeleton-text{gap:var(--loading-region-text-gap)}.skeleton-list{gap:var(--loading-region-list-gap)}.skeleton-table{gap:var(--loading-region-table-gap)}.skeleton-text .skeleton.skeleton-text__line--last{width:var(--loading-region-text-last-line-width)}.skeleton-list .skeleton.skeleton-list__row{height:var(--loading-region-list-row-height)}.skeleton-table .skeleton.skeleton-table__header{height:var(--loading-region-table-header-height)}.skeleton-table .skeleton.skeleton-table__row{height:var(--loading-region-table-row-height)}.skeleton-grid{gap:var(--loading-region-grid-gap);display:grid}.skeleton-grid[data-columns="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.skeleton-grid[data-columns="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.skeleton-grid[data-columns="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.skeleton-grid .skeleton.skeleton-grid__item{height:var(--loading-region-grid-item-height)}

package/dist/loading-region.js

@@ -0,0 +1,61 @@
+'use client';
+import './loading-region.css';
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { VisuallyHidden as t } from "./visually-hidden.js";
+import { Skeleton as n } from "./skeleton.js";
+import { useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/stories/molecules/LoadingRegion/LoadingRegion.tsx
+function o({ label: n, announce: o = !0, children: s, className: c, ...l }) {
+	let u = e("spinner"), d = r(), f = ["loading-region", c].filter(Boolean).join(" ");
+	return o ? /* @__PURE__ */ a("div", {
+		className: f,
+		role: "status",
+		"aria-busy": "true",
+		"aria-labelledby": d,
+		...l,
+		children: [/* @__PURE__ */ i(t, {
+			id: d,
+			children: u("label", n)
+		}), s]
+	}) : /* @__PURE__ */ i("div", {
+		className: f,
+		"aria-hidden": "true",
+		...l,
+		children: s
+	});
+}
+function s(e) {
+	return Array.from({ length: Math.max(0, Math.floor(e)) }, (e, t) => t);
+}
+function c({ lines: e = 3 }) {
+	return /* @__PURE__ */ i("div", {
+		className: "skeleton-text",
+		"aria-hidden": "true",
+		children: s(e).map((t) => /* @__PURE__ */ i(n, { className: ["skeleton-text__line", t === e - 1 && e > 1 ? "skeleton-text__line--last" : ""].filter(Boolean).join(" ") }, t))
+	});
+}
+function l({ rows: e = 4 }) {
+	return /* @__PURE__ */ i("div", {
+		className: "skeleton-list",
+		"aria-hidden": "true",
+		children: s(e).map((e) => /* @__PURE__ */ i(n, { className: "skeleton-list__row" }, e))
+	});
+}
+function u({ rows: e = 4 }) {
+	return /* @__PURE__ */ a("div", {
+		className: "skeleton-table",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ i(n, { className: "skeleton-table__header" }), s(e).map((e) => /* @__PURE__ */ i(n, { className: "skeleton-table__row" }, e))]
+	});
+}
+function d({ columns: e = 3, rows: t = 2 }) {
+	return /* @__PURE__ */ i("div", {
+		className: "skeleton-grid",
+		"data-columns": e,
+		"aria-hidden": "true",
+		children: s(e * t).map((e) => /* @__PURE__ */ i(n, { className: "skeleton-grid__item" }, e))
+	});
+}
+//#endregion
+export { o as LoadingRegion, d as SkeletonGrid, l as SkeletonList, u as SkeletonTable, c as SkeletonText };

package/dist/loading-state.css

@@ -0,0 +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__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))}