@webority/ui-react 0.34.0 → 0.35.0

package/dist/components/AppKanban.js

@@ -0,0 +1,269 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import { errorToast as r } from "./toast.js";
+import { formatValue as i } from "@webority/ui-elements/helpers";
+import { useEffect as a, useId as o, useMemo as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { KANBAN_SUMMARY_FORMATS as f, KANBAN_TEXT as p, KANBAN_TONES as m, kanbanOverflow as ee, kanbanSummaryFormat as h, kanbanVisibleLimit as g, sumKanbanValues as _ } from "@webority/ui-elements/elements/kanban";
+//#region src/components/AppKanban.jsx
+var v = (e) => e.key ?? e.id, y = (e) => e.column, b = ["rupees", "paise"];
+function x({ columns: x = [], cards: S = [], renderCard: C, renderColumnActions: w, getCardKey: T = v, getCardColumn: E = y, getCardValue: D, cardLabel: O, isCardLocked: k, onLocked: A, onMove: j, accept: M, filter: N, boardId: P, ariaLabel: F = "Board", emptyText: te = p.empty, readOnly: ne = !1, swipeHint: re = !1, summaryFormat: I, summaryUnit: L, className: R = "", id: z, ...B }) {
+	t("AppKanban", B), e("AppKanban", "summaryFormat", I, f), e("AppKanban", "summaryUnit", L, b);
+	for (let t of x) e("AppKanban", "columns[].tone", t.tone, m);
+	let V = o(), H = z || `kanban-${V.replace(/[^a-zA-Z0-9_-]/g, "")}`, U = c(null), [W, G] = l(() => /* @__PURE__ */ new Map()), [K, q] = l(() => /* @__PURE__ */ new Set()), [J, Y] = l(() => /* @__PURE__ */ new Set()), ie = s(() => new Map(S.map((e) => [String(T(e)), e])), [S, T]), X = c(null);
+	X.current = {
+		accept: M,
+		onMove: j,
+		onLocked: A,
+		byKey: ie,
+		columns: x
+	};
+	let Z = I && f.includes(I) && (L == null || b.includes(L)) ? h(I, L) : null, Q = s(() => {
+		let e = new Map(x.map((e) => [e.key, []])), t = [];
+		for (let n of S) {
+			let r = String(T(n)), i = W.get(r);
+			i ? t.push([n, i]) : e.get(E(n))?.push(n);
+		}
+		for (let [n, r] of t) {
+			let t = e.get(r.to);
+			t && t.splice(Math.min(r.index, t.length), 0, n);
+		}
+		return e;
+	}, [
+		x,
+		S,
+		W,
+		T,
+		E
+	]);
+	a(() => {
+		let e = U.current;
+		if (!e) return;
+		e.accept = (e, t, n) => {
+			let r = X.current.accept;
+			return !r || r(X.current.byKey.get(e.getAttribute("data-wui-card")), t, n);
+		};
+		let t = (e) => {
+			let { key: t, from: n, to: i, index: a } = e.detail, o = X.current.onMove, s = X.current.byKey.get(t);
+			if (!o || !s) return;
+			let c = X.current.columns.find((e) => e.key === i)?.visibleLimit != null;
+			c && Y((e) => new Set(e).add(t)), G((e) => new Map(e).set(t, {
+				to: i,
+				index: a
+			}));
+			let l = () => G((e) => {
+				let n = new Map(e);
+				return n.delete(t), n;
+			}), u;
+			try {
+				u = o({
+					card: s,
+					key: t,
+					from: n,
+					to: i,
+					index: a
+				});
+			} catch (e) {
+				u = Promise.reject(e);
+			}
+			Promise.resolve(u).then(l, (e) => {
+				l(), c && Y((e) => {
+					let n = new Set(e);
+					return n.delete(t), n;
+				}), r(e?.message || p.failed.server);
+			});
+		}, n = (e) => {
+			let { key: t, reason: n } = e.detail, r = X.current.byKey.get(t);
+			r && X.current.onLocked?.({
+				card: r,
+				key: t,
+				reason: n
+			});
+		};
+		return e.addEventListener("wui:kanban:move", t), e.addEventListener("wui:kanban:locked", n), () => {
+			e.removeEventListener("wui:kanban:move", t), e.removeEventListener("wui:kanban:locked", n), e.accept = void 0;
+		};
+	}, []);
+	let $ = (e) => !N || N(e) !== !1, ae = (e, t) => {
+		K.has(e) && Y((e) => {
+			let n = new Set(e);
+			for (let e of t) n.delete(String(T(e)));
+			return n;
+		}), q((t) => {
+			let n = new Set(t);
+			return n.delete(e) || n.add(e), n;
+		});
+	};
+	return /* @__PURE__ */ d("wui-kanban", {
+		ref: U,
+		id: H,
+		class: R ? `wui-kanban ${R}` : "wui-kanban",
+		role: "region",
+		"aria-label": F,
+		"board-id": P || void 0,
+		"summary-format": Z ? I : void 0,
+		"summary-unit": Z && L ? L : void 0,
+		readonly: ne ? "" : void 0,
+		controlled: "",
+		...B,
+		children: [
+			/* @__PURE__ */ u("nav", {
+				className: "wui-kanban-switcher",
+				"aria-label": "Board columns",
+				children: x.map((e, t) => /* @__PURE__ */ d("button", {
+					type: "button",
+					className: "wui-kanban-switch",
+					"data-wui-switch": e.key,
+					"aria-controls": `${H}-${e.key}`,
+					"aria-current": t === 0 ? "true" : void 0,
+					children: [/* @__PURE__ */ u("span", {
+						className: "wui-kanban-switch-title",
+						children: e.title
+					}), /* @__PURE__ */ u("span", {
+						className: "wui-kanban-count",
+						"data-wui-count": "",
+						children: (Q.get(e.key) || []).filter($).length
+					})]
+				}, e.key))
+			}),
+			re && /* @__PURE__ */ d("p", {
+				className: "wui-kanban-hint",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ u(n, {
+					name: "arrow-swap-horizontal",
+					size: 14
+				}), p.swipeHint]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "wui-kanban-board",
+				"data-wui-scroller": "",
+				children: x.map((e) => {
+					let t = `${H}-${e.key}`, r = Q.get(e.key) || [], a = r.filter($), o = !!(e.collapsible && e.collapsed), s = g(e.visibleLimit), c = K.has(e.key), l = ee(a.map((e) => String(T(e))), s, c, J), f = typeof e.summary == "function" ? e.summary(a) : e.summary;
+					Z && (f = i(_(a.map((e) => D?.(e))), Z));
+					let h = w?.(e, a);
+					return /* @__PURE__ */ d("section", {
+						className: "wui-kanban-column",
+						id: t,
+						"data-wui-column": e.key,
+						"data-tone": e.tone && m.includes(e.tone) ? e.tone : "neutral",
+						"aria-labelledby": `${t}-title`,
+						"data-accept-from": e.acceptFrom ? e.acceptFrom.join(" ") : void 0,
+						"data-collapsible": e.collapsible ? "" : void 0,
+						"data-collapsed": o ? "" : void 0,
+						children: [
+							/* @__PURE__ */ d("header", {
+								className: "wui-kanban-head",
+								children: [
+									/* @__PURE__ */ u("span", {
+										className: "wui-kanban-dot",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ u("h2", {
+										className: "wui-kanban-title",
+										id: `${t}-title`,
+										children: e.href ? /* @__PURE__ */ u("a", {
+											href: e.href,
+											children: e.title
+										}) : e.title
+									}),
+									/* @__PURE__ */ u("span", {
+										className: "wui-kanban-count",
+										"data-wui-count": "",
+										children: a.length
+									}),
+									e.collapsible && /* @__PURE__ */ u("span", {
+										className: "wui-kanban-lock",
+										"aria-hidden": "true",
+										children: /* @__PURE__ */ u(n, {
+											name: "lock",
+											size: 14
+										})
+									}),
+									h != null && h !== !1 && /* @__PURE__ */ u("div", {
+										className: "wui-kanban-actions",
+										"data-wui-no-drag": "",
+										children: h
+									}),
+									e.collapsible && /* @__PURE__ */ u("button", {
+										type: "button",
+										className: "wui-kanban-collapse",
+										"data-wui-collapse": "",
+										"aria-expanded": o ? "false" : "true",
+										"aria-controls": `${t}-body`,
+										"aria-label": o ? p.expand(e.title) : p.collapse(e.title),
+										children: /* @__PURE__ */ u(n, {
+											name: "chevron-left",
+											size: 16
+										})
+									}),
+									f != null && /* @__PURE__ */ u("div", {
+										className: "wui-kanban-summary",
+										"data-wui-summary": "",
+										children: f
+									})
+								]
+							}),
+							/* @__PURE__ */ u("p", {
+								className: "wui-kanban-drop-note",
+								"data-wui-drop-note": "",
+								hidden: !0
+							}),
+							/* @__PURE__ */ u("div", {
+								className: "wui-kanban-body",
+								id: `${t}-body`,
+								"data-wui-body": "",
+								children: r.map((e) => {
+									let t = String(T(e)), n = W.has(t);
+									return /* @__PURE__ */ u("article", {
+										className: "wui-kanban-card",
+										"data-wui-card": t,
+										tabIndex: 0,
+										"aria-label": O ? O(e) : void 0,
+										"data-wui-locked": k?.(e) ? "" : void 0,
+										"data-wui-value": D ? D(e) ?? void 0 : void 0,
+										"aria-busy": n ? "true" : void 0,
+										"data-wui-saving": n ? "" : void 0,
+										"data-wui-overflow": l.has(t) ? "" : void 0,
+										hidden: !$(e),
+										children: C?.(e)
+									}, t);
+								})
+							}),
+							s != null && /* @__PURE__ */ u("button", {
+								type: "button",
+								className: "wui-kanban-more",
+								"data-wui-more": "",
+								"aria-controls": `${t}-body`,
+								"aria-expanded": c ? "true" : "false",
+								hidden: c ? a.length <= s : l.size === 0,
+								onClick: () => ae(e.key, r),
+								children: c ? p.fewer : p.more(l.size)
+							}),
+							/* @__PURE__ */ u("p", {
+								className: "wui-kanban-empty",
+								"data-wui-empty": "",
+								hidden: a.length > 0,
+								children: e.emptyText ?? te
+							})
+						]
+					}, e.key);
+				})
+			}),
+			/* @__PURE__ */ u("p", {
+				className: "visually-hidden",
+				id: `${H}-help`,
+				"data-wui-help": "",
+				children: p.help
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "visually-hidden",
+				"data-wui-live": "",
+				"aria-live": "polite",
+				"aria-atomic": "true"
+			})
+		]
+	});
+}
+//#endregion
+export { x as default };

package/dist/components/AppKpiTile.js

@@ -0,0 +1,91 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import r from "./renderIconProp.js";
+import i from "./AppSparkline.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/AppKpiTile.jsx
+var s = [
+	"plain",
+	"filled",
+	"accent",
+	"spotlight"
+], c = [
+	"sm",
+	"md",
+	"lg"
+], l = [
+	"primary",
+	"success",
+	"warning",
+	"danger",
+	"info",
+	"neutral"
+], u = [
+	"up",
+	"down",
+	"flat"
+], d = [
+	"success",
+	"danger",
+	"neutral"
+], f = {
+	success: " wui-kpi-delta--success",
+	danger: " wui-kpi-delta--danger",
+	neutral: " wui-kpi-delta--neutral"
+};
+function p(e) {
+	if (typeof e != "string") return "flat";
+	let t = e.trim();
+	return t.startsWith("+") ? "up" : t.startsWith("-") || t.startsWith("−") ? "down" : "flat";
+}
+function m({ label: m, value: h, caption: g, icon: _, iconTone: v, delta: y, deltaDirection: b, deltaTone: x, sparkline: S, variant: C = "plain", size: w = "md", valueSize: T, inline: E = !1, attention: D = !1, href: O, linkComponent: k, className: A = "", style: j, iconClassName: M = "", labelClassName: N = "", valueClassName: P = "", captionClassName: F = "", deltaClassName: I = "", sparklineClassName: L = "", ...R }) {
+	t("AppKpiTile", R), e("AppKpiTile", "variant", C, s), e("AppKpiTile", "size", w, c), e("AppKpiTile", "iconTone", v, l), e("AppKpiTile", "deltaDirection", b, u), e("AppKpiTile", "deltaTone", x, d);
+	let z = `kpi${E ? " kpi-inline" : ""}${C === "filled" ? " kpi-filled" : C === "accent" ? " kpi-accent" : C === "spotlight" ? " kpi-spotlight" : ""}${w === "lg" ? " kpi-lg" : w === "sm" ? " kpi-sm" : ""}${D ? " kpi-attention" : ""}${A ? ` ${A}` : ""}`, B = typeof T == "number" && T > 0 ? {
+		...j,
+		"--wui-kpi-value-size": `${T}px`
+	} : j, V = b ?? p(y), H = V === "up" ? "arrow-up" : V === "down" ? "arrow-down" : null, U = Object.hasOwn(f, x ?? "") ? f[x] : "", W = {};
+	return O != null && (W = k ? {
+		as: k,
+		to: O
+	} : {
+		as: "a",
+		href: O
+	}), /* @__PURE__ */ o(W.as || "div", {
+		className: z,
+		style: B,
+		...R,
+		...W,
+		children: [
+			_ && /* @__PURE__ */ a("span", {
+				className: `kpi-icon${v ? ` kpi-icon-${v}` : ""}${M ? ` ${M}` : ""}`,
+				children: r(_, { size: 20 })
+			}),
+			/* @__PURE__ */ a("div", {
+				className: `kpi-label${N ? ` ${N}` : ""}`,
+				children: m
+			}),
+			/* @__PURE__ */ a("div", {
+				className: `kpi-value${P ? ` ${P}` : ""}`,
+				children: h
+			}),
+			g && /* @__PURE__ */ a("div", {
+				className: `kpi-caption${F ? ` ${F}` : ""}`,
+				children: g
+			}),
+			y && /* @__PURE__ */ o("div", {
+				className: `kpi-delta${V === "flat" ? "" : ` ${V}`}${U}${I ? ` ${I}` : ""}`,
+				children: [H && /* @__PURE__ */ a(n, {
+					name: H,
+					size: 13
+				}), y]
+			}),
+			S && S.length > 0 && /* @__PURE__ */ a(i, {
+				data: S,
+				className: `kpi-sparkline${L ? ` ${L}` : ""}`
+			})
+		]
+	});
+}
+//#endregion
+export { m as default };

package/dist/components/AppLink.js

@@ -0,0 +1,74 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/AppLink.jsx
+var o = {
+	sm: 13,
+	md: 15,
+	lg: 18
+}, s = [
+	"underline",
+	"underline-center",
+	"static",
+	"slide",
+	"icon",
+	"highlight",
+	"bracket",
+	"fade",
+	"grow",
+	"glow",
+	"shine",
+	"none"
+];
+function c(e, t, r) {
+	if (!e) return null;
+	let a = `wui-link__ic wui-link__ic--${t}`;
+	return typeof e == "string" ? /* @__PURE__ */ i("span", {
+		className: a,
+		children: /* @__PURE__ */ i(n, {
+			name: e,
+			size: o[r] ?? o.md
+		})
+	}) : /* @__PURE__ */ i("span", {
+		className: a,
+		children: e
+	});
+}
+function l({ children: n, label: l, href: u, animation: d = "underline", leftIcon: f = null, rightIcon: p = null, size: m = "md", external: h = !1, disabled: g = !1, linkComponent: _, className: v = "", ...y }) {
+	t("AppLink", y), e("AppLink", "animation", d, s), e("AppLink", "size", m, Object.keys(o));
+	let b = s.includes(d) ? d : "underline", x = b === "icon" && !p && !f ? "arrow-right" : p, S = [
+		"wui-link",
+		`wui-link--${b}`,
+		m === "md" ? "" : `wui-link--${m}`,
+		g ? "is-disabled" : "",
+		v
+	].filter(Boolean).join(" "), C = /* @__PURE__ */ a(r, { children: [
+		c(f, "left", m),
+		/* @__PURE__ */ i("span", {
+			className: "wui-link__label",
+			children: n ?? l
+		}),
+		c(x, "right", m)
+	] });
+	return g ? /* @__PURE__ */ i("span", {
+		className: S,
+		"aria-disabled": "true",
+		...y,
+		children: C
+	}) : _ && !h ? /* @__PURE__ */ i(_, {
+		className: S,
+		to: u,
+		...y,
+		children: C
+	}) : /* @__PURE__ */ i("a", {
+		className: S,
+		href: u,
+		target: h ? "_blank" : void 0,
+		rel: h ? "noopener noreferrer" : void 0,
+		...y,
+		children: C
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/AppLogoPicker.js

@@ -0,0 +1,264 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./withTooltip.js";
+import r from "./AppIcon.js";
+import i from "./AppAlert.js";
+import ee from "./AppButton.js";
+import te from "./AppRequiredMark.js";
+import ne from "./AppModal.js";
+import { DEFAULT_MAX_SIZE_MB as re, validateFile as a } from "@webority/ui-elements/helpers";
+import { useCallback as ie, useEffect as o, useId as ae, useRef as s, useState as c } from "react";
+import { Fragment as oe, jsx as l, jsxs as u } from "react/jsx-runtime";
+import "@webority/ui-elements/elements/image-crop";
+//#region src/components/AppLogoPicker.jsx
+var se = [
+	"stacked",
+	"inline",
+	"profile"
+], ce = ["initials", "avatar"], le = [
+	"circle",
+	"rounded",
+	"square"
+], d = {
+	sm: 72,
+	md: 120,
+	lg: 160
+}, ue = "That image could not be cropped. Choose another one.", de = "That image could not be opened. Choose another one.";
+function f({ value: f, fallback: fe, name: pe, onPick: me, onRemove: p, loading: m = !1, disabled: h = !1, accept: g = "image/png,image/jpeg,image/webp", maxSizeMb: _ = re, crop: v, overlayIcon: he = "image", overlayLabel: y = "Update photo", ariaLabel: ge = "Upload photo", label: b, hint: x, error: _e, layout: S = "stacked", title: ve, subtitle: ye, required: be = !1, variant: C = "initials", size: w = "md", shape: T = "circle", className: E = "", ...D }) {
+	t("AppLogoPicker", D), e("AppLogoPicker", "layout", S, se), e("AppLogoPicker", "variant", C, ce), e("AppLogoPicker", "shape", T, le), e("AppLogoPicker", "size", typeof w == "string" ? w : null, Object.keys(d));
+	let O = v === "free" ? null : typeof v == "number" && Number.isFinite(v) && v > 0 ? v : void 0;
+	v != null && O === void 0 && e("AppLogoPicker", "crop", String(v), ["free", "a positive number"]);
+	let k = s(null), A = s(null), j = ae(), [M, N] = c(null), [xe, P] = c(""), [Se, F] = c(!1), [I, L] = c(!1), [R, z] = c(null), [B, V] = c(!1), [H, U] = c("loading"), [W, G] = c(""), Ce = ie((e) => {
+		if (A.current = e, !e) return;
+		let t = () => U("ready"), n = () => U("error");
+		return e.addEventListener("load", t), e.addEventListener("error", n), () => {
+			e.removeEventListener("load", t), e.removeEventListener("error", n), A.current = null;
+		};
+	}, []);
+	o(() => () => R && URL.revokeObjectURL(R.url), [R]), o(() => () => M && URL.revokeObjectURL(M), [M]), o(() => {
+		N(null), F(!1);
+	}, [f]);
+	let K = m || h, q = M || (f && !Se ? f : null), J = _e || xe, we = x && !J ? `${j}-hint` : void 0, Te = J ? `${j}-error` : void 0, Ee = !K && (!!M || !!q && !!p), De = () => {
+		K || k.current?.click();
+	}, Y = (e) => {
+		P(""), F(!1), N(URL.createObjectURL(e)), me(e);
+	}, Oe = (e) => {
+		let t = O !== void 0 && e.type !== "image/svg+xml", n = a(e, {
+			accept: g,
+			maxSizeMb: t ? 0 : _
+		});
+		if (n) {
+			P(n);
+			return;
+		}
+		if (t) {
+			P(""), U("loading"), G(""), z({
+				file: e,
+				url: URL.createObjectURL(e)
+			});
+			return;
+		}
+		Y(e);
+	}, ke = async () => {
+		let { file: e } = R;
+		V(!0), G("");
+		let t = null;
+		try {
+			t = await A.current?.toFile({
+				name: e.name,
+				type: e.type,
+				maxBytes: _ > 0 ? _ * 1024 * 1024 : 0
+			});
+		} catch {
+			t = null;
+		}
+		if (V(!1), !t) {
+			G(ue);
+			return;
+		}
+		z(null);
+		let n = a(t, {
+			accept: g,
+			maxSizeMb: _
+		});
+		n ? P(n) : Y(t);
+	}, Ae = () => {
+		B || z(null);
+	}, je = (e) => {
+		let t = e.target.files?.[0];
+		e.target.value = "", t && Oe(t);
+	}, Me = (e) => {
+		if (e.preventDefault(), L(!1), K) return;
+		let t = e.dataTransfer.files?.[0];
+		t && Oe(t);
+	}, Ne = () => {
+		N(null), P(""), F(!1), k.current && (k.current.value = ""), p?.();
+	}, X = typeof w == "number" ? w : d[w] ?? d.md, Pe = Math.max(14, Math.round(X * .18)), Fe = Math.round(X * .5), Ie = [
+		"set-uploader",
+		C === "avatar" ? "set-uploader--avatar" : "",
+		T === "rounded" ? "set-uploader--rounded" : T === "square" ? "set-uploader--square" : "",
+		I && "is-dragging"
+	].filter(Boolean).join(" "), Le = S === "inline", Re = S === "profile", Z = /* @__PURE__ */ u("div", {
+		className: "set-uploader-shell",
+		style: { "--wui-logo-size": `${X}px` },
+		children: [
+			/* @__PURE__ */ l("button", {
+				type: "button",
+				className: Ie,
+				onClick: De,
+				disabled: K,
+				"aria-busy": m || void 0,
+				"aria-label": ge,
+				"aria-describedby": Te || we,
+				onDragOver: (e) => {
+					e.preventDefault(), !K && !I && L(!0);
+				},
+				onDragLeave: (e) => {
+					e.preventDefault(), L(!1);
+				},
+				onDrop: Me,
+				...D,
+				children: /* @__PURE__ */ u("span", {
+					className: "set-uploader-ring",
+					"data-overlay-label": y,
+					children: [q ? /* @__PURE__ */ l("img", {
+						className: "set-uploader-img",
+						src: q,
+						alt: "",
+						onError: () => F(!0)
+					}) : /* @__PURE__ */ l("span", {
+						className: "set-uploader-logo",
+						children: fe || C === "avatar" && /* @__PURE__ */ l(r, {
+							name: "user",
+							size: Fe
+						})
+					}), m ? /* @__PURE__ */ l("span", {
+						className: "set-uploader-overlay is-loading",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ l(r, {
+							name: "refresh-cw",
+							size: Pe,
+							className: "wui-spin"
+						})
+					}) : !h && /* @__PURE__ */ u("span", {
+						className: "set-uploader-overlay",
+						children: [/* @__PURE__ */ l(r, {
+							name: he,
+							size: Pe
+						}), /* @__PURE__ */ l("span", { children: y })]
+					})]
+				})
+			}),
+			n(/* @__PURE__ */ l("button", {
+				type: "button",
+				className: "set-uploader-remove",
+				hidden: !Ee,
+				"aria-label": "Remove photo",
+				onClick: Ne,
+				children: /* @__PURE__ */ l(r, {
+					name: "x",
+					size: 14
+				})
+			}), Ee ? "Remove photo" : null),
+			/* @__PURE__ */ l("input", {
+				id: j,
+				ref: k,
+				type: "file",
+				name: pe,
+				hidden: !0,
+				accept: g,
+				onChange: je,
+				disabled: K
+			}),
+			O !== void 0 && /* @__PURE__ */ u(ne, {
+				open: !!R,
+				title: "Crop photo",
+				subtitle: "Drag the frame and zoom to choose what to keep.",
+				size: "lg",
+				staticBackdrop: !0,
+				dismissible: !B,
+				onClose: Ae,
+				footer: /* @__PURE__ */ u(oe, { children: [/* @__PURE__ */ l(ee, {
+					type: "button",
+					variant: "secondary",
+					disabled: B,
+					onClick: Ae,
+					children: "Cancel"
+				}), /* @__PURE__ */ l(ee, {
+					type: "button",
+					variant: "primary",
+					loading: B,
+					disabled: H !== "ready",
+					onClick: ke,
+					children: "Apply"
+				})] }),
+				children: [
+					H === "error" && /* @__PURE__ */ l(i, {
+						variant: "danger",
+						children: de
+					}),
+					W && /* @__PURE__ */ l(i, {
+						variant: "danger",
+						children: W
+					}),
+					R && H !== "error" && /* @__PURE__ */ l("wui-image-crop", {
+						ref: Ce,
+						src: R.url,
+						aspect: O ?? "free",
+						round: O === 1 && T === "circle"
+					})
+				]
+			})
+		]
+	}), ze = x && !J ? /* @__PURE__ */ l("div", {
+		className: "set-uploader-hint",
+		id: we,
+		children: x
+	}) : null, Be = J ? /* @__PURE__ */ l("div", {
+		className: "field-error",
+		id: Te,
+		children: J
+	}) : null, Q = b && /* @__PURE__ */ u("label", {
+		className: "label",
+		htmlFor: j,
+		children: [b, be && /* @__PURE__ */ l(te, {})]
+	}), $ = /* @__PURE__ */ u("div", {
+		className: "set-uploader-meta",
+		children: [
+			ve && /* @__PURE__ */ l("div", {
+				className: "set-uploader-title",
+				children: ve
+			}),
+			ye && /* @__PURE__ */ l("div", {
+				className: "set-uploader-subtitle",
+				children: ye
+			}),
+			ze,
+			Be
+		]
+	});
+	return Le ? /* @__PURE__ */ u("div", {
+		className: `field set-uploader-field set-uploader-field--inline${E ? ` ${E}` : ""}`,
+		children: [Q, /* @__PURE__ */ u("div", {
+			className: "set-uploader-row",
+			children: [Z, $]
+		})]
+	}) : Re ? /* @__PURE__ */ u("div", {
+		className: `field set-uploader-field set-uploader-field--profile${E ? ` ${E}` : ""}`,
+		children: [
+			Q,
+			Z,
+			$
+		]
+	}) : /* @__PURE__ */ u("div", {
+		className: `field set-uploader-field${E ? ` ${E}` : ""}`,
+		children: [
+			Q,
+			Z,
+			ze,
+			Be
+		]
+	});
+}
+//#endregion
+export { f as default };