@studiolxd/brand 50.0.0 → 51.0.0

package/dist/file-upload-field.js

@@ -1,43 +1,38 @@
 'use client';
 import './file-upload-field.css';
 import { n as e } from "./_shared/form-size.js";
-import { ErrorText as t } from "./error-text.js";
-import { Label as n } from "./label.js";
-import { FileUpload as r } from "./file-upload.js";
-import { n as i } from "./_shared/field-labels.js";
-import { forwardRef as a, useId as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { t } from "./_shared/fileupload.js";
+import { n } from "./_shared/field-optional.js";
+import { n as r } from "./_shared/field-labels.js";
+import { a as i, n as a } from "./_shared/fieldshell.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/stories/molecules/FileUploadField/FileUploadField.tsx
-var l = a(function({ id: a, label: l, labelHidden: u, errorMessage: d, helperText: f, error: p = !1, size: m, className: h, ...g }, _) {
-	let v = i(u), y = e(m), b = o(), x = a ?? b, S = d ? `${x}-error` : void 0, C = f ? `${x}-helper` : void 0, w = [S, C].filter(Boolean).join(" ") || void 0, T = p || !!d;
-	return /* @__PURE__ */ c("div", {
-		className: ["file-upload-field", h].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ s(n, {
-				htmlFor: x,
-				hidden: v,
-				size: y,
-				children: l
-			}),
-			/* @__PURE__ */ s(r, {
-				ref: _,
-				...g,
-				id: x,
-				size: y,
-				error: T,
-				"aria-describedby": w
-			}),
-			d && /* @__PURE__ */ s(t, {
-				id: S,
-				children: d
-			}),
-			f && /* @__PURE__ */ s("span", {
-				id: C,
-				className: "file-upload-field__helper",
-				children: f
-			})
-		]
+var c = o(function({ id: o, label: c, optional: l, optionalLabel: u, labelHidden: d, errorMessage: f, helperText: p, error: m = !1, size: h, className: g, ..._ }, v) {
+	let y = r(d), b = e(h), x = n(l, _.required), S = i({
+		id: o,
+		error: m,
+		errorMessage: f,
+		helperText: p
+	}), { id: C } = S;
+	return /* @__PURE__ */ s(a, {
+		field: S,
+		block: "file-upload-field",
+		className: g,
+		label: c,
+		optional: x,
+		optionalLabel: u,
+		labelHidden: y,
+		size: b,
+		children: /* @__PURE__ */ s(t, {
+			ref: v,
+			..._,
+			id: C,
+			size: b,
+			error: S.hasError,
+			"aria-describedby": S.describedBy
+		})
 	});
 });
 //#endregion
-export { l as FileUploadField };
+export { c as FileUploadField };

package/dist/file-upload.js

@@ -1,224 +1,3 @@
 'use client';
-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 { Spinner as r } from "./spinner.js";
-import { n as i } from "./_shared/form-size.js";
-import { t as ee } from "./_shared/assign-ref.js";
-import { t as te } from "./_shared/progressbar.js";
-import { i as ne, n as a, t as o } from "./_shared/validate.js";
-import { forwardRef as s, useCallback as c, useEffect as l, useId as re, 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 h = /* @__PURE__ */ new WeakMap();
-function ie(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: 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 = o, 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] = d(b), [z, B] = d(/* @__PURE__ */ new Map()), [V, H] = d(!1), U = u(/* @__PURE__ */ new Set()), W = u(null), Se = re(), G = se ?? `file-upload-${Se}`, 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", k), N("invalidType", A), E);
-			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,
-		k,
-		A,
-		E
-	]), Ce = 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
-	]), 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",
-		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 h && $.push(h), _ && $.push(N("maxSize", ye)(a(_, E))), s && v && $.push(N("maxFiles", be)(v)), /* @__PURE__ */ m("div", {
-		className: J,
-		children: [
-			/* @__PURE__ */ p(n, { children: /* @__PURE__ */ p("input", {
-				ref: (e) => {
-					W.current = e, ee(M, e);
-				},
-				type: "file",
-				id: G,
-				name: ce,
-				multiple: s,
-				accept: h,
-				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__ */ p("div", {
-				className: "file-upload__dropzone",
-				onClick: Oe,
-				onDragOver: Te,
-				onDragLeave: Ee,
-				onDrop: De,
-				"aria-hidden": "true",
-				children: C ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("span", {
-					className: "file-upload__icon",
-					children: /* @__PURE__ */ p(r, {
-						size: F,
-						"aria-hidden": !0
-					})
-				}), Ae && /* @__PURE__ */ p("span", {
-					className: "file-upload__text",
-					children: Q
-				})] }) : /* @__PURE__ */ m(f, { children: [
-					/* @__PURE__ */ p(t, {
-						name: "upload",
-						size: F,
-						className: "file-upload__icon"
-					}),
-					/* @__PURE__ */ p("span", {
-						className: "file-upload__text",
-						children: V ? N("dropzoneActive", _e) : 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(n, {
-				id: Y,
-				children: [
-					X,
-					Z,
-					...$
-				].join(". ")
-			}),
-			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": N("files", xe),
-				children: K.map((e, n) => {
-					let r = z.get(e), i = ie(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(t, {
-									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: a(e.size, E)
-									}),
-									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: () => Ce(e),
-								"aria-disabled": C || void 0,
-								"aria-label": N("removeFile", O)(e.name),
-								children: /* @__PURE__ */ p(t, {
-									name: "close",
-									size: "sm"
-								})
-							})
-						]
-					}, `${e.name}-${e.size}-${n}`);
-				})
-			}),
-			S !== void 0 && /* @__PURE__ */ p(te, {
-				value: S,
-				label: N("progress", D),
-				size: "sm",
-				className: "file-upload__progress"
-			})
-		]
-	});
-});
-//#endregion
-export { _ as FileUpload };
+import { t as e } from "./_shared/fileupload.js";
+export { e as FileUpload };

package/dist/{file-upload.css → fileupload.css}

@@ -1 +1 @@
-.file-upload{inline-size: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);inline-size: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{inline-size:var(--file-upload-thumb-size);block-size: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;block-size:100%;inline-size:100%}.file-upload__item-info{gap:var(--file-upload-item-info-gap);flex-direction:column;flex:1;min-inline-size: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{inline-size: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);inline-size: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{inline-size:var(--file-upload-thumb-size);block-size: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;block-size:100%;inline-size:100%}.file-upload__item-info{gap:var(--file-upload-item-info-gap);flex-direction:column;flex:1;min-inline-size: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-hover-color)}.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/filter-bar.css

@@ -1 +1 @@
-.filter-bar{gap:var(--filter-bar-gap);flex-direction:column;display:flex}.filter-bar__search{inline-size:100%}.filter-bar__row{column-gap:var(--filter-bar-column-gap);row-gap:var(--filter-bar-row-gap);grid-template-columns:1fr;display:grid}.filter-bar__filters{display:contents}.filter-bar__filter{min-inline-size:0}.filter-bar__actions{align-items:stretch;gap:var(--filter-bar-actions-gap);flex-direction:column;min-inline-size:0;display:flex}.filter-bar__actions>*{inline-size:100%}@media (width>=768px){.filter-bar__row{grid-template-columns:repeat(auto-fit, minmax(calc((100% - var(--filter-bar-column-gap)) / 2), 1fr))}.filter-bar__actions{flex-flow:wrap;align-items:center}.filter-bar__actions>*{inline-size:auto}:is(.filter-bar__row:has(.label:not(.visually-hidden)) .filter-bar__filter:not(:has(.label:not(.visually-hidden))),.filter-bar__row:has(.label:not(.visually-hidden))>.filter-bar__actions){align-self:start;padding-block-start:var(--filter-bar-label-offset)}.filter-bar__row:has(.label:not(.visually-hidden)) .filter-bar__filter:not(:has(.label:not(.visually-hidden))){block-size:calc(var(--filter-bar-label-offset) + var(--filter-bar-control-block-size));flex-direction:column;justify-content:center;display:flex}.filter-bar__row:has(.label:not(.visually-hidden))>.filter-bar__actions{min-block-size:calc(var(--filter-bar-label-offset) + var(--filter-bar-control-block-size))}}@media (width>=1024px){.filter-bar__row{grid-template-columns:repeat(auto-fit, minmax(calc((100% - 3 * var(--filter-bar-column-gap)) / 4), 1fr))}}
+.filter-bar{gap:var(--filter-bar-gap);flex-direction:column;display:flex}.filter-bar__search{inline-size:100%}.filter-bar__row{column-gap:var(--filter-bar-column-gap);row-gap:var(--filter-bar-row-gap);grid-template-columns:1fr;display:grid}.filter-bar__filters{display:contents}.filter-bar__filter{min-inline-size:0}.filter-bar__actions{align-items:stretch;gap:var(--filter-bar-actions-gap);flex-direction:column;min-inline-size:0;display:flex}.filter-bar__actions>*{inline-size:100%}@media (width>=768px){.filter-bar__row{grid-template-columns:repeat(auto-fit, minmax(calc((100% - var(--filter-bar-column-gap)) / 2), 1fr))}.filter-bar__actions{flex-flow:wrap;align-items:center}.filter-bar__actions>*{inline-size:auto}:is(.filter-bar__row:has(.label:not(.visually-hidden)) .filter-bar__filter:not(:has(.label:not(.visually-hidden))),.filter-bar__row:has(.label:not(.visually-hidden))>.filter-bar__actions){align-self:start;padding-block-start:var(--filter-bar-label-offset)}.filter-bar__row:has(.label:not(.visually-hidden)) .filter-bar__filter:not(:has(.label:not(.visually-hidden))){block-size:calc(var(--filter-bar-label-offset) + var(--filter-bar-control-height));flex-direction:column;justify-content:center;display:flex}.filter-bar__row:has(.label:not(.visually-hidden))>.filter-bar__actions{min-block-size:calc(var(--filter-bar-label-offset) + var(--filter-bar-control-height))}}@media (width>=1024px){.filter-bar__row{grid-template-columns:repeat(auto-fit, minmax(calc((100% - 3 * var(--filter-bar-column-gap)) / 4), 1fr))}}

package/dist/filter-bar.js

@@ -1,33 +1,38 @@
 'use client';
 import './filter-bar.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Children as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { n as e } from "./_shared/env.js";
+import { r as t } from "./_shared/brandmessagescontext.js";
+import { Children as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/stories/messages/es/filterBar.ts
+var a = { label: "Filtros" };
+//#endregion
 //#region src/stories/molecules/FilterBar/FilterBar.tsx
-function i({ search: i, children: a, actions: o, ariaLabel: s, className: c, ...l }) {
-	let u = e("filterBar"), d = t.toArray(a);
-	return /* @__PURE__ */ r("div", {
-		className: ["filter-bar", c].filter(Boolean).join(" "),
+function o({ search: o, children: s, actions: c, "aria-label": l, ariaLabel: u, className: d, ...f }) {
+	u !== void 0 && e("FilterBar", "ariaLabel", "`aria-label`");
+	let p = l ?? u, m = t("filterBar", a), h = n.toArray(s);
+	return /* @__PURE__ */ i("div", {
+		className: ["filter-bar", d].filter(Boolean).join(" "),
 		role: "search",
-		"aria-label": u("label", s),
-		...l,
-		children: [i && /* @__PURE__ */ n("div", {
+		"aria-label": m("label", p),
+		...f,
+		children: [o && /* @__PURE__ */ r("div", {
 			className: "filter-bar__search",
-			children: i
-		}), (d.length > 0 || o) && /* @__PURE__ */ r("div", {
+			children: o
+		}), (h.length > 0 || c) && /* @__PURE__ */ i("div", {
 			className: "filter-bar__row",
-			children: [d.length > 0 && /* @__PURE__ */ n("div", {
+			children: [h.length > 0 && /* @__PURE__ */ r("div", {
 				className: "filter-bar__filters",
-				children: d.map((e, t) => /* @__PURE__ */ n("div", {
+				children: h.map((e, t) => /* @__PURE__ */ r("div", {
 					className: "filter-bar__filter",
 					children: e
 				}, t))
-			}), o && /* @__PURE__ */ n("div", {
+			}), c && /* @__PURE__ */ r("div", {
 				className: "filter-bar__actions",
-				children: o
+				children: c
 			})]
 		})]
 	});
 }
 //#endregion
-export { i as FilterBar };
+export { o as FilterBar };

package/dist/floating-dock.css

@@ -1 +1 @@
-.floating-dock{z-index:var(--floating-dock-z-index);gap:var(--floating-dock-gap);flex-direction:column;display:flex;position:fixed}.floating-dock[data-position^=bottom]{--floating-dock-enter-direction:1;flex-direction:column-reverse;inset-block-end:calc(var(--floating-dock-offset-block) + env(safe-area-inset-bottom))}.floating-dock[data-position^=top]{--floating-dock-enter-direction:-1;flex-direction:column;inset-block-start:calc(var(--floating-dock-offset-block) + env(safe-area-inset-top))}.floating-dock[data-position$=end]{align-items:flex-end;inset-inline-end:calc(var(--floating-dock-offset-inline) + env(safe-area-inset-right))}.floating-dock[data-position$=start]{align-items:flex-start;inset-inline-start:calc(var(--floating-dock-offset-inline) + env(safe-area-inset-left))}.floating-dock__trigger{inline-size:var(--floating-dock-trigger-size);block-size:var(--floating-dock-trigger-size);position:relative}.floating-dock__trigger .icon{--icon-size:var(--floating-dock-trigger-icon-size)}.floating-dock__badge{--number-badge-danger-bg:var(--floating-dock-badge-fill);--number-badge-danger-color:var(--floating-dock-badge-color);position:absolute;inset-block-start:var(--floating-dock-badge-offset);inset-inline-end:var(--floating-dock-badge-offset);translate:50% -50%}.floating-dock__panel{box-sizing:border-box;gap:var(--floating-dock-panel-gap);inline-size:var(--floating-dock-panel-inline-size);max-inline-size:calc(100vw - 2 * var(--floating-dock-offset-inline));block-size:var(--floating-dock-panel-block-size);max-block-size:calc(100dvh - 2 * var(--floating-dock-offset-block) - var(--floating-dock-trigger-size) - var(--floating-dock-gap));min-block-size:0;padding-block:var(--floating-dock-panel-padding-block);padding-inline:var(--floating-dock-panel-padding-inline);background-color:var(--floating-dock-panel-bg);border-width:var(--floating-dock-panel-border-width);border-style:solid;border-color:var(--floating-dock-panel-border-color);border-radius:var(--floating-dock-panel-border-radius);box-shadow:var(--floating-dock-panel-shadow);transition-property:opacity,translate;transition-duration:var(--floating-dock-transition-duration);transition-timing-function:var(--floating-dock-transition-easing);outline:none;flex-direction:column;display:flex;position:relative}.floating-dock__panel[data-starting-style],.floating-dock__panel[data-ending-style]{opacity:0;translate:0 calc(var(--floating-dock-enter-direction) * var(--floating-dock-panel-enter-offset))}.floating-dock__panel:focus-visible{outline:var(--floating-dock-focus-ring-width) solid var(--floating-dock-focus-ring-color);outline-offset:var(--floating-dock-focus-ring-offset)}.floating-dock__header{gap:var(--floating-dock-header-gap);flex-direction:column;padding-inline-end:var(--floating-dock-close-size);display:flex}.floating-dock__title{color:var(--floating-dock-title-color);font-size:var(--floating-dock-title-font-size);font-weight:var(--floating-dock-title-font-weight);margin:0}.floating-dock__description{font-size:var(--floating-dock-description-font-size);color:var(--floating-dock-description-color);margin:0}.floating-dock__close.close-button{--close-button-size:var(--floating-dock-close-size);--close-button-icon-size:var(--floating-dock-close-icon-size);--close-button-color:var(--floating-dock-close-color);--close-button-focus-ring-width:var(--floating-dock-close-focus-ring-width);--close-button-focus-ring-offset:var(--floating-dock-close-focus-ring-offset);--close-button-focus-ring-color:var(--floating-dock-close-focus-ring-color);position:absolute;inset-block-start:var(--floating-dock-panel-padding-block);inset-inline-end:var(--floating-dock-panel-padding-inline)}.floating-dock__body{flex:1;min-block-size:0;overflow-y:auto}
+.floating-dock{z-index:var(--floating-dock-z-index);gap:var(--floating-dock-gap);flex-direction:column;display:flex;position:fixed}.floating-dock[data-position^=bottom]{--floating-dock-enter-direction:1;flex-direction:column-reverse;inset-block-end:calc(var(--floating-dock-offset-block) + env(safe-area-inset-bottom))}.floating-dock[data-position^=top]{--floating-dock-enter-direction:-1;flex-direction:column;inset-block-start:calc(var(--floating-dock-offset-block) + env(safe-area-inset-top))}.floating-dock[data-position$=end]{align-items:flex-end;inset-inline-end:calc(var(--floating-dock-offset-inline) + env(safe-area-inset-right))}.floating-dock[data-position$=start]{align-items:flex-start;inset-inline-start:calc(var(--floating-dock-offset-inline) + env(safe-area-inset-left))}.floating-dock__trigger{inline-size:var(--floating-dock-trigger-size);block-size:var(--floating-dock-trigger-size);position:relative}.floating-dock__trigger .icon{--icon-size:var(--floating-dock-trigger-icon-size)}.floating-dock__badge{--number-badge-error-bg:var(--floating-dock-badge-fill);--number-badge-error-color:var(--floating-dock-badge-color);position:absolute;inset-block-start:var(--floating-dock-badge-offset);inset-inline-end:var(--floating-dock-badge-offset);translate:50% -50%}.floating-dock__panel{box-sizing:border-box;gap:var(--floating-dock-panel-gap);inline-size:var(--floating-dock-panel-width);max-inline-size:calc(100vw - 2 * var(--floating-dock-offset-inline));block-size:var(--floating-dock-panel-height);max-block-size:calc(100dvh - 2 * var(--floating-dock-offset-block) - var(--floating-dock-trigger-size) - var(--floating-dock-gap));min-block-size:0;padding-block:var(--floating-dock-panel-padding-block);padding-inline:var(--floating-dock-panel-padding-inline);background-color:var(--floating-dock-panel-bg);border-width:var(--floating-dock-panel-border-width);border-style:solid;border-color:var(--floating-dock-panel-border-color);border-radius:var(--floating-dock-panel-border-radius);box-shadow:var(--floating-dock-panel-shadow);transition-property:opacity,translate;transition-duration:var(--floating-dock-transition-duration);transition-timing-function:var(--floating-dock-transition-easing);outline:none;flex-direction:column;display:flex;position:relative}.floating-dock__panel[data-starting-style],.floating-dock__panel[data-ending-style]{opacity:0;translate:0 calc(var(--floating-dock-enter-direction) * var(--floating-dock-panel-enter-offset))}.floating-dock__panel:focus-visible{outline:var(--floating-dock-focus-ring-width) solid var(--floating-dock-focus-ring-color);outline-offset:var(--floating-dock-focus-ring-offset)}.floating-dock__header{gap:var(--floating-dock-header-gap);flex-direction:column;padding-inline-end:var(--floating-dock-close-size);display:flex}.floating-dock__title{color:var(--floating-dock-title-color);font-size:var(--floating-dock-title-font-size);font-weight:var(--floating-dock-title-font-weight);margin:0}.floating-dock__description{font-size:var(--floating-dock-description-font-size);color:var(--floating-dock-description-color);margin:0}.floating-dock__close.close-button{--close-button-size:var(--floating-dock-close-size);--close-button-icon-size:var(--floating-dock-close-icon-size);--close-button-color:var(--floating-dock-close-color);--close-button-focus-ring-width:var(--floating-dock-close-focus-ring-width);--close-button-focus-ring-offset:var(--floating-dock-close-focus-ring-offset);--close-button-focus-ring-color:var(--floating-dock-close-focus-ring-color);position:absolute;inset-block-start:var(--floating-dock-panel-padding-block);inset-inline-end:var(--floating-dock-panel-padding-inline)}.floating-dock__body{flex:1;min-block-size:0;overflow-y:auto}

package/dist/floating-dock.js

@@ -1,73 +1,79 @@
 'use client';
 import './floating-dock.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
 import { VisuallyHidden as n } from "./visually-hidden.js";
 import { Button as r } from "./button.js";
-import { CloseButton as i } from "./close-button.js";
+import { t as i } from "./_shared/closebutton.js";
 import { NumberBadge as a } from "./number-badge.js";
 import { useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { Dialog as l } from "@base-ui/react/dialog";
+//#region src/stories/messages/es/floatingDock.ts
+var u = {
+	close: "Cerrar",
+	badge: (e) => `${e} mensajes nuevos`
+};
+//#endregion
 //#region src/stories/sections/FloatingDock/FloatingDock.tsx
-function u({ label: u, title: d, titleHidden: f = !1, description: p, children: m, icon: h, position: g = "bottom-end", open: _, defaultOpen: v, onOpenChange: y, closeLabel: b, badge: x = 0, badgeMax: S = 99, badgeLabel: C, badgeLive: w = !0, dismissOnOutsidePress: T = !1, className: E, ...D }) {
-	let O = e("floatingDock"), [k, A] = o(null);
+function d({ label: d, title: f, titleHidden: p = !1, description: m, children: h, icon: g, position: _ = "bottom-end", open: v, defaultOpen: y, onOpenChange: b, closeLabel: x, badge: S = 0, badgeMax: C = 99, badgeLabel: w, badgeLive: T = !0, dismissOnOutsidePress: E = !1, className: D, ...O }) {
+	let k = e("floatingDock", u), [A, j] = o(null);
 	return /* @__PURE__ */ s("div", {
-		ref: A,
-		className: ["floating-dock", E].filter(Boolean).join(" "),
-		"data-position": g,
-		...D,
+		ref: j,
+		className: ["floating-dock", D].filter(Boolean).join(" "),
+		"data-position": _,
+		...O,
 		children: /* @__PURE__ */ c(l.Root, {
-			open: _,
-			defaultOpen: v,
+			open: v,
+			defaultOpen: y,
 			modal: !1,
-			disablePointerDismissal: !T,
-			onOpenChange: (e) => y?.(e),
+			disablePointerDismissal: !E,
+			onOpenChange: (e) => b?.(e),
 			children: [
 				/* @__PURE__ */ s(l.Trigger, { render: /* @__PURE__ */ c(r, {
 					variant: "primary",
 					size: "lg",
 					iconOnly: !0,
-					"aria-label": u,
+					"aria-label": d,
 					className: "floating-dock__trigger",
-					children: [h ?? /* @__PURE__ */ s(t, {
+					children: [g ?? /* @__PURE__ */ s(t, {
 						name: "message",
 						size: "md"
-					}), x > 0 && /* @__PURE__ */ s(a, {
-						count: x,
-						max: S,
-						variant: "danger",
+					}), S > 0 && /* @__PURE__ */ s(a, {
+						count: S,
+						max: C,
+						tone: "error",
 						"aria-hidden": "true",
 						className: "floating-dock__badge"
 					})]
 				}) }),
-				w && x > 0 && /* @__PURE__ */ s(n, {
+				T && S > 0 && /* @__PURE__ */ s(n, {
 					"aria-live": "polite",
-					children: O("badge", C)(x)
+					children: k("badge", w)(S)
 				}),
-				k && /* @__PURE__ */ s(l.Portal, {
-					container: k,
+				A && /* @__PURE__ */ s(l.Portal, {
+					container: A,
 					className: "floating-dock__portal",
 					children: /* @__PURE__ */ c(l.Popup, {
 						className: "floating-dock__panel",
 						children: [
 							/* @__PURE__ */ c("header", {
 								className: "floating-dock__header",
-								children: [f ? /* @__PURE__ */ s(l.Title, { render: /* @__PURE__ */ s(n, { children: d }) }) : /* @__PURE__ */ s(l.Title, {
+								children: [p ? /* @__PURE__ */ s(l.Title, { render: /* @__PURE__ */ s(n, { children: f }) }) : /* @__PURE__ */ s(l.Title, {
 									className: "floating-dock__title",
-									children: d
-								}), p != null && /* @__PURE__ */ s(l.Description, {
+									children: f
+								}), m != null && /* @__PURE__ */ s(l.Description, {
 									className: "floating-dock__description",
-									children: p
+									children: m
 								})]
 							}),
 							/* @__PURE__ */ s(l.Close, {
 								className: "floating-dock__close",
-								render: /* @__PURE__ */ s(i, { label: O("close", b) })
+								render: /* @__PURE__ */ s(i, { label: k("close", x) })
 							}),
 							/* @__PURE__ */ s("div", {
 								className: "floating-dock__body",
-								children: m
+								children: h
 							})
 						]
 					})
@@ -77,4 +83,4 @@ function u({ label: u, title: d, titleHidden: f = !1, description: p, children:
 	});
 }
 //#endregion
-export { u as FloatingDock };
+export { d as FloatingDock };

package/dist/floating-toolbar.js

@@ -7,29 +7,36 @@ import { createContext as r, forwardRef as i, useContext as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { Toolbar as c } from "@base-ui/react/toolbar";
 //#region src/stories/molecules/FloatingToolbar/FloatingToolbar.tsx
-var l = "(min-width: 1024px)", u = r("top"), d = i(function({ start: e, end: t, layout: r = "auto", alwaysVisible: i = !1, label: a, children: d, className: f, ...p }, m) {
-	let h = n(l), g = r === "sides" || r === "auto" && h === !0;
+var l = "(min-width: 1024px)", u = new Set([
+	"className",
+	"role",
+	"aria-label",
+	"aria-orientation",
+	"children"
+]), d = r("top"), f = i(function({ start: e, end: t, layout: r = "auto", alwaysVisible: i = !1, label: a, toolbarProps: f, children: p, className: m, ...h }, g) {
+	let _ = n(l), v = r === "sides" || r === "auto" && _ === !0, y = f ? Object.fromEntries(Object.entries(f).filter(([e]) => !u.has(e))) : void 0;
 	return /* @__PURE__ */ s("div", {
-		ref: m,
+		ref: g,
 		className: [
 			"floating-toolbar",
 			`floating-toolbar--${r}`,
 			i ? "floating-toolbar--always-visible" : "",
-			f ?? ""
+			m ?? ""
 		].filter(Boolean).join(" "),
-		...p,
+		...h,
 		children: [/* @__PURE__ */ s(c.Root, {
+			...y,
 			className: "floating-toolbar__bar",
 			"aria-label": a,
-			orientation: g ? "vertical" : "horizontal",
-			children: [e != null && /* @__PURE__ */ o(u.Provider, {
-				value: g ? "left" : "top",
+			orientation: v ? "vertical" : "horizontal",
+			children: [e != null && /* @__PURE__ */ o(d.Provider, {
+				value: v ? "left" : "top",
 				children: /* @__PURE__ */ o(c.Group, {
 					className: "floating-toolbar__group floating-toolbar__group--start",
 					children: e
 				})
-			}), t != null && /* @__PURE__ */ o(u.Provider, {
-				value: g ? "right" : "top",
+			}), t != null && /* @__PURE__ */ o(d.Provider, {
+				value: v ? "right" : "top",
 				children: /* @__PURE__ */ o(c.Group, {
 					className: "floating-toolbar__group floating-toolbar__group--end",
 					children: t
@@ -37,15 +44,15 @@ var l = "(min-width: 1024px)", u = r("top"), d = i(function({ start: e, end: t,
 			})]
 		}), /* @__PURE__ */ o("div", {
 			className: "floating-toolbar__content",
-			children: d
+			children: p
 		})]
 	});
-}), f = i(function({ label: n, icon: r, destructive: i = !1, className: s, ...l }, d) {
+}), p = i(function({ label: n, icon: r, destructive: i = !1, className: s, ...l }, u) {
 	return /* @__PURE__ */ o(t, {
 		label: n,
-		side: a(u),
+		side: a(d),
 		describe: !1,
-		ref: d,
+		ref: u,
 		...l,
 		children: /* @__PURE__ */ o(c.Button, {
 			render: /* @__PURE__ */ o(e, {
@@ -61,4 +68,4 @@ var l = "(min-width: 1024px)", u = r("top"), d = i(function({ start: e, end: t,
 	});
 });
 //#endregion
-export { d as FloatingToolbar, f as FloatingToolbarButton };
+export { f as FloatingToolbar, p as FloatingToolbarButton };