themelia-react-ui 2.0.6 → 3.0.0

package/dist/base/media-gallery.js

@@ -1,3 +1,204 @@
 "use client";
-import { n as e, t } from "../media-gallery-C81DAnKI.js";
-export { t as MediaGallery, e as defaultMediaGalleryStrings };
+import { useStrings as e } from "../lib/strings.js";
+import { t } from "../utils-BVbAG2J6.js";
+import { c as n } from "../typography-C0dELqYV.js";
+import { t as r } from "../focus-recipes-DSkiUvUp.js";
+import { r as i, t as a } from "../structure-DElaQwwN.js";
+import { i as o } from "../tone-recipes-BPsRAvhu.js";
+import { a as s } from "../surface-recipes-DV6rrOFq.js";
+import { t as c } from "../badge-oGiXblW7.js";
+import { n as l } from "../field-affordance-recipes-DfbMadot.js";
+import { n as u, t as d } from "../upload.recipes-BbxTqrCT.js";
+import { forwardRef as f, useCallback as p, useEffect as m, useId as h, useMemo as g, useRef as _, useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { ImagePlus as x, X as S } from "lucide-react";
+import { DndContext as C, KeyboardSensor as w, PointerSensor as T, useSensor as E, useSensors as D } from "@dnd-kit/core";
+import { SortableContext as O, rectSortingStrategy as k, sortableKeyboardCoordinates as ee, useSortable as A } from "@dnd-kit/sortable";
+import { CSS as j } from "@dnd-kit/utilities";
+//#region src/components/base/media-gallery/media-gallery.tsx
+var M = {
+	addInstruction: "Drop or click to add images",
+	helper: "",
+	dragOver: "Release to select",
+	cover: "Cover",
+	removeAria: "Remove image",
+	maxReached: "You have reached the maximum number of images.",
+	pickedUp: "Picked up {name}.",
+	movedTo: "{name} moved to position {position}.",
+	dropped: "Dropped {name}.",
+	cancelled: "Sorting cancelled for {name}."
+}, N = 0, P = () => `media-${Date.now().toString(36)}-${(N++).toString(36)}`;
+function F({ item: e, isFirst: n, disabled: i, onRemove: a, strings: u, tileClassName: d }) {
+	let { attributes: f, listeners: p, setNodeRef: m, setActivatorNodeRef: h, transform: g, transition: _, isDragging: v } = A({
+		id: e.id,
+		disabled: i
+	}), x = {
+		transform: j.Transform.toString(g),
+		transition: _
+	};
+	return /* @__PURE__ */ b("div", {
+		ref: m,
+		style: x,
+		className: t("media-gallery--item", "group relative aspect-square overflow-hidden rounded-radius border border-border/60", s.wash, v && `z-10 shadow-lg ring-2 ${o.primary.halo}`, i && "opacity-50", d),
+		children: [/* @__PURE__ */ b("div", {
+			ref: h,
+			"aria-label": e.file.name,
+			className: t(`absolute inset-0 cursor-grab outline-none active:cursor-grabbing ${r.inset}`, i && "pointer-events-none"),
+			...f,
+			...p,
+			children: [/* @__PURE__ */ y("img", {
+				src: e.previewUrl,
+				alt: e.file.name,
+				className: "absolute inset-0 size-full object-cover",
+				draggable: !1
+			}), n && /* @__PURE__ */ y(c, {
+				size: "sm",
+				tone: "secondary",
+				className: "media-gallery--cover absolute start-space-sm top-space-sm bg-card shadow-sm ring-1 ring-border",
+				children: u.cover
+			})]
+		}), /* @__PURE__ */ y("button", {
+			type: "button",
+			"aria-label": `${u.removeAria}: ${e.file.name}`,
+			disabled: i,
+			onPointerDown: (e) => e.stopPropagation(),
+			onClick: (e) => {
+				e.stopPropagation(), a();
+			},
+			className: t(l.target, l.focus, "absolute end-space-sm top-space-sm z-10 bg-card text-card-foreground shadow-sm ring-1 ring-border", "opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100"),
+			children: /* @__PURE__ */ y(S, { className: l.icon })
+		})]
+	});
+}
+var I = f(function({ value: r, onValueChange: o, accept: s = ".png,.jpg,.jpeg,.gif,.webp", maxFiles: c, disabled: l = !1, invalid: f = !1, className: S, tileClassName: A, strings: j }, N) {
+	let I = e(M, j), L = h(), R = _(null), [z, B] = v([]), V = D(E(T, { activationConstraint: { distance: 6 } }), E(w, { coordinateGetter: ee })), H = _([]);
+	H.current = z, m(() => {
+		if (!r) return;
+		let e = H.current;
+		if (e.length === r.length && e.every((e, t) => e.file === r[t])) return;
+		let t = [...e], n = r.map((e) => {
+			let n = t.findIndex((t) => t.file === e);
+			return n >= 0 ? t.splice(n, 1)[0] : {
+				id: P(),
+				file: e,
+				previewUrl: URL.createObjectURL(e)
+			};
+		});
+		t.forEach((e) => URL.revokeObjectURL(e.previewUrl)), H.current = n, B(n);
+	}, [r]), m(() => () => {
+		H.current.forEach((e) => URL.revokeObjectURL(e.previewUrl)), H.current = [];
+	}, []);
+	let U = p((e) => {
+		H.current = e, B(e), o?.(e.map((e) => e.file));
+	}, [o]), W = p((e) => {
+		if (l) return;
+		let t = H.current, n = s.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), r = e.filter((e) => n.length === 0 || n.some((t) => t.startsWith(".") ? e.name.toLowerCase().endsWith(t) : t.endsWith("/*") ? e.type.toLowerCase().startsWith(t.slice(0, -1)) : e.type.toLowerCase() === t)), i = c !== void 0 && Number.isFinite(c) ? Math.max(0, Math.floor(c) - t.length) : r.length, a = r.slice(0, i).map((e) => ({
+			id: P(),
+			file: e,
+			previewUrl: URL.createObjectURL(e)
+		}));
+		a.length > 0 && U([...t, ...a]);
+	}, [
+		s,
+		U,
+		l,
+		c
+	]), G = p((e) => {
+		if (l) return;
+		let t = H.current, n = t.find((t) => t.id === e);
+		n && (URL.revokeObjectURL(n.previewUrl), U(t.filter((t) => t.id !== e)));
+	}, [U, l]), K = p((e) => {
+		let t = e.target.files;
+		t && t.length !== 0 && (W(Array.from(t)), R.current && (R.current.value = ""));
+	}, [W]), { isDragging: q, dropTargetProps: J } = u({
+		disabled: l,
+		onFiles: W
+	}), Y = p((e) => {
+		if (l) return;
+		let { active: t, over: n } = e;
+		if (!n || t.id === n.id) return;
+		let r = H.current, i = r.findIndex((e) => e.id === t.id), a = r.findIndex((e) => e.id === n.id);
+		if (i < 0 || a < 0) return;
+		let o = [...r], [s] = o.splice(i, 1);
+		o.splice(a, 0, s), U(o);
+	}, [U, l]), X = (e, t, n) => e.replace("{name}", z.find((e) => e.id === t)?.file.name ?? I.removeAria).replace("{position}", String(z.findIndex((e) => e.id === (n ?? t)) + 1)), Z = {
+		onDragStart: ({ active: e }) => X(I.pickedUp ?? M.pickedUp, e.id),
+		onDragOver: ({ active: e, over: t }) => t ? X(I.movedTo ?? M.movedTo, e.id, t.id) : void 0,
+		onDragEnd: ({ active: e }) => X(I.dropped ?? M.dropped, e.id),
+		onDragCancel: ({ active: e }) => X(I.cancelled ?? M.cancelled, e.id)
+	}, Q = g(() => z.map((e) => e.id), [z]), $ = c !== void 0 && z.length >= c;
+	return /* @__PURE__ */ b(a, {
+		ref: N,
+		gap: "lg",
+		className: t("media-gallery--component", S),
+		children: [
+			/* @__PURE__ */ y(C, {
+				sensors: V,
+				onDragEnd: Y,
+				accessibility: { announcements: Z },
+				children: /* @__PURE__ */ y(O, {
+					items: Q,
+					strategy: k,
+					children: /* @__PURE__ */ b(i, {
+						columns: {
+							base: 2,
+							sm: 3,
+							md: 4
+						},
+						gap: "md",
+						children: [z.map((e, t) => /* @__PURE__ */ y(F, {
+							item: e,
+							isFirst: t === 0,
+							disabled: l,
+							onRemove: () => G(e.id),
+							strings: I,
+							tileClassName: A
+						}, e.id)), !$ && /* @__PURE__ */ b("div", {
+							...J,
+							className: t("relative flex aspect-square items-center justify-center rounded-radius border border-dashed text-center outline-none transition-colors", d.hover, "has-[input:focus-visible]:ring-3", f ? t(d.invalid, d.focus.input.invalid) : t(d.idle, d.focus.input.valid), l && "cursor-not-allowed opacity-50", !l && q && d.dragging),
+							children: [/* @__PURE__ */ y("input", {
+								id: L,
+								ref: R,
+								type: "file",
+								className: "absolute inset-0 z-10 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+								"aria-label": I.addInstruction,
+								"aria-invalid": f || void 0,
+								accept: s,
+								multiple: !0,
+								disabled: l,
+								onChange: K
+							}), /* @__PURE__ */ b(a, {
+								align: "center",
+								gap: "sm",
+								className: "px-space-sm",
+								children: [/* @__PURE__ */ y(x, {
+									className: "size-icon-lg text-muted-foreground",
+									"aria-hidden": "true"
+								}), /* @__PURE__ */ y(n, {
+									weight: "medium",
+									align: "center",
+									children: q ? I.dragOver : I.addInstruction
+								})]
+							})]
+						})]
+					})
+				})
+			}),
+			!!$ && /* @__PURE__ */ y(n, {
+				size: "xs",
+				type: "secondary",
+				children: I.maxReached
+			}),
+			!$ && !!I.helper && /* @__PURE__ */ y(n, {
+				size: "xs",
+				type: "secondary",
+				children: I.helper
+			})
+		]
+	});
+});
+I.displayName = "MediaGallery";
+//#endregion
+export { I as MediaGallery, M as defaultMediaGalleryStrings };
+
+//# sourceMappingURL=media-gallery.js.map

package/dist/base/media-gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-gallery.js","names":["Text","focusRecipes","Grid","Stack","toneRecipes","neutralFillRecipes","Badge","fieldAffordanceRecipes","useFileDropTarget","uploadDropTargetRecipes","defaultMediaGalleryStrings","counter","makeId","SortableTile","useSortable","item","style","CSS","transform","setNodeRef","cn","isDragging","disabled","tileClassName","setActivatorNodeRef","attributes","listeners","isFirst","strings","onRemove","X","MediaGallery","forwardRef","stringsProp","useStrings","inputId","useId","inputRef","useRef","items","setItems","useState","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","itemsRef","useEffect","value","prev","index","remaining","next","file","it","commit","useCallback","onValueChange","addFiles","rules","accept","rule","accepted","incoming","limit","maxFiles","additions","remove","target","id","onPickerChange","list","onDragEnd","event","over","active","from","to","moved","announce","template","overId","announcements","tileIds","useMemo","isFull","className","DndContext","SortableContext","rectSortingStrategy","i","dropTargetProps","invalid","ImagePlus"],"sources":["../../src/components/base/media-gallery/media-gallery.tsx"],"sourcesContent":["/**\n * MediaGallery — multi-image upload + sortable thumbnail grid. Drop a batch\n * of images onto the dashed top tile or click to open the picker; tiles\n * appear inline and can be reordered via drag (`@dnd-kit/sortable`). The\n * first tile is implicitly the \"cover\" and is marked with a small chip;\n * each tile has a hover-revealed remove button.\n *\n * Use for product galleries, mood boards, or any collection where the order\n * matters and the consumer needs the final `File[]` (and the order of those\n * files) on submit.\n *\n * Strings overridable for i18n.\n */\nimport { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { ChangeEvent } from 'react';\nimport {\n\tDndContext,\n\ttype DragEndEvent,\n\ttype Announcements,\n\tPointerSensor,\n\tKeyboardSensor,\n\tuseSensor,\n\tuseSensors,\n} from '@dnd-kit/core';\nimport {\n\tSortableContext,\n\trectSortingStrategy,\n\tsortableKeyboardCoordinates,\n\tuseSortable,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { ImagePlus, X } from 'lucide-react';\nimport { Badge } from '../badge';\nimport { Text } from '../../typography';\nimport { Grid, Stack } from '../structure';\nimport { useStrings, type StringsProp } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\nimport { fieldAffordanceRecipes } from '../../../lib/field-affordance-recipes';\nimport { useFileDropTarget } from '../upload/use-file-drop-target';\nimport { focusRecipes } from '../../../lib/focus-recipes';\nimport { uploadDropTargetRecipes } from '../upload/upload.recipes';\nimport { toneRecipes } from '../../../lib/tone-recipes';\nimport { neutralFillRecipes } from '../../../lib/surface-recipes';\n\nexport interface MediaGalleryStrings {\n\taddInstruction: string;\n\thelper: string;\n\tdragOver: string;\n\tcover: string;\n\tremoveAria: string;\n\tmaxReached: string;\n\t/** Sort announcements; {name} is the filename and {position} is its one-based position. */\n\tpickedUp?: string;\n\tmovedTo?: string;\n\tdropped?: string;\n\tcancelled?: string;\n}\n\nexport const defaultMediaGalleryStrings = {\n\taddInstruction: 'Drop or click to add images',\n\thelper: '',\n\tdragOver: 'Release to select',\n\tcover: 'Cover',\n\tremoveAria: 'Remove image',\n\tmaxReached: 'You have reached the maximum number of images.',\n\tpickedUp: 'Picked up {name}.',\n\tmovedTo: '{name} moved to position {position}.',\n\tdropped: 'Dropped {name}.',\n\tcancelled: 'Sorting cancelled for {name}.',\n} satisfies MediaGalleryStrings;\n\nexport interface MediaGalleryProps {\n\t/** Selected files. Controlled. */\n\tvalue?: File[];\n\tonValueChange?: (files: File[]) => void;\n\t/** Accepted MIME types or extensions. */\n\taccept?: string;\n\t/** Caps how many files may be added. */\n\tmaxFiles?: number;\n\t/** Disables the control and blocks drops. */\n\tdisabled?: boolean;\n\t/** Applies the invalid styling. */\n\tinvalid?: boolean;\n\tclassName?: string;\n\t/** Merged onto each media tile. */\n\ttileClassName?: string;\n\t/** Overrides the upload, remove, and empty copy. */\n\tstrings?: StringsProp<MediaGalleryStrings>;\n}\n\ninterface InternalItem {\n\tid: string;\n\tfile: File;\n\tpreviewUrl: string;\n}\n\nlet counter = 0;\nconst makeId = () => `media-${Date.now().toString(36)}-${(counter++).toString(36)}`;\n\nfunction SortableTile({\n\titem,\n\tisFirst,\n\tdisabled,\n\tonRemove,\n\tstrings,\n\ttileClassName,\n}: {\n\titem: InternalItem;\n\tisFirst: boolean;\n\t/** Disables the control and blocks drops. */\n\tdisabled: boolean;\n\tonRemove: () => void;\n\t/** Overrides the upload, remove, and empty copy. */\n\tstrings: MediaGalleryStrings;\n\t/** Merged onto each media tile. */\n\ttileClassName?: string;\n}) {\n\tconst { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } =\n\t\tuseSortable({ id: item.id, disabled });\n\tconst style = {\n\t\ttransform: CSS.Transform.toString(transform),\n\t\ttransition,\n\t} as React.CSSProperties;\n\n\treturn (\n\t\t<div\n\t\t\tref={setNodeRef}\n\t\t\tstyle={style}\n\t\t\tclassName={cn(\n\t\t\t\t'media-gallery--item',\n\t\t\t\t'group relative aspect-square overflow-hidden rounded-radius border border-border/60', neutralFillRecipes.wash,\n\t\t\t\tisDragging && `z-10 shadow-lg ring-2 ${toneRecipes.primary.halo}`,\n\t\t\t\tdisabled && 'opacity-50',\n\t\t\t\ttileClassName,\n\t\t\t)}\n\t\t>\n\t\t\t<div\n\t\t\t\tref={setActivatorNodeRef}\n\t\t\t\taria-label={item.file.name}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t`absolute inset-0 cursor-grab outline-none active:cursor-grabbing ${focusRecipes.inset}`,\n\t\t\t\t\tdisabled && 'pointer-events-none',\n\t\t\t\t)}\n\t\t\t\t{...attributes}\n\t\t\t\t{...listeners}\n\t\t\t>\n\t\t\t\t<img\n\t\t\t\t\tsrc={item.previewUrl}\n\t\t\t\t\talt={item.file.name}\n\t\t\t\t\tclassName=\"absolute inset-0 size-full object-cover\"\n\t\t\t\t\tdraggable={false}\n\t\t\t\t/>\n\t\t\t\t{isFirst && (\n\t\t\t\t\t<Badge\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\ttone=\"secondary\"\n\t\t\t\t\t\tclassName=\"media-gallery--cover absolute start-space-sm top-space-sm bg-card shadow-sm ring-1 ring-border\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{strings.cover}\n\t\t\t\t\t</Badge>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\taria-label={`${strings.removeAria}: ${item.file.name}`}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tonPointerDown={(e) => e.stopPropagation()}\n\t\t\t\tonClick={(e) => {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\tonRemove();\n\t\t\t\t}}\n\t\t\t\tclassName={cn(\n\t\t\t\t\tfieldAffordanceRecipes.target,\n\t\t\t\t\tfieldAffordanceRecipes.focus,\n\t\t\t\t\t'absolute end-space-sm top-space-sm z-10 bg-card text-card-foreground shadow-sm ring-1 ring-border',\n\t\t\t\t\t'opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100',\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<X className={fieldAffordanceRecipes.icon} />\n\t\t\t</button>\n\t\t</div>\n\t);\n}\n\nexport const MediaGallery = forwardRef<HTMLDivElement, MediaGalleryProps>(function MediaGallery({\n\tvalue,\n\tonValueChange,\n\taccept = '.png,.jpg,.jpeg,.gif,.webp',\n\tmaxFiles,\n\tdisabled = false,\n\tinvalid = false,\n\tclassName,\n\ttileClassName,\n\tstrings: stringsProp,\n}: MediaGalleryProps, ref) {\n\tconst strings = useStrings(defaultMediaGalleryStrings, stringsProp);\n\tconst inputId = useId();\n\tconst inputRef = useRef<HTMLInputElement | null>(null);\n\tconst [items, setItems] = useState<InternalItem[]>([]);\n\n\tconst sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));\n\n\t// Track the live preview-URL set in a ref so the unmount cleanup sees the\n\t// latest values without depending on render-time `items`. Without this,\n\t// the cleanup closes over the initial empty array and any object URLs\n\t// created during the lifetime of the component leak (the browser will\n\t// still hold them until the document unloads).\n\tconst itemsRef = useRef<InternalItem[]>([]);\n\titemsRef.current = items;\n\n\t// Reconcile by file identity so order changes preserve sortable ids and URLs.\n\tuseEffect(() => {\n\t\tif (!value) return;\n\t\tconst prev = itemsRef.current;\n\t\tif (prev.length === value.length && prev.every((item, index) => item.file === value[index])) return;\n\t\tconst remaining = [...prev];\n\t\tconst next = value.map((file) => {\n\t\t\tconst index = remaining.findIndex((item) => item.file === file);\n\t\t\tif (index >= 0) return remaining.splice(index, 1)[0];\n\t\t\treturn { id: makeId(), file, previewUrl: URL.createObjectURL(file) };\n\t\t});\n\t\tremaining.forEach((item) => URL.revokeObjectURL(item.previewUrl));\n\t\titemsRef.current = next;\n\t\tsetItems(next);\n\t}, [value]);\n\n\t// Cleanup on unmount — revoke whatever previews were live at the time.\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\titemsRef.current.forEach((it) => URL.revokeObjectURL(it.previewUrl));\n\t\t\titemsRef.current = [];\n\t\t};\n\t}, []);\n\n\tconst commit = useCallback((next: InternalItem[]) => {\n\t\titemsRef.current = next;\n\t\tsetItems(next);\n\t\tonValueChange?.(next.map((item) => item.file));\n\t}, [onValueChange]);\n\n\tconst addFiles = useCallback((incoming: File[]) => {\n\t\tif (disabled) return;\n\t\tconst prev = itemsRef.current;\n\t\tconst rules = accept.split(',').map((rule) => rule.trim().toLowerCase()).filter(Boolean);\n\t\tconst accepted = incoming.filter((file) => rules.length === 0 || rules.some((rule) => {\n\t\t\tif (rule.startsWith('.')) return file.name.toLowerCase().endsWith(rule);\n\t\t\tif (rule.endsWith('/*')) return file.type.toLowerCase().startsWith(rule.slice(0, -1));\n\t\t\treturn file.type.toLowerCase() === rule;\n\t\t}));\n\t\tconst limit = maxFiles !== undefined && Number.isFinite(maxFiles) ? Math.max(0, Math.floor(maxFiles) - prev.length) : accepted.length;\n\t\tconst additions = accepted.slice(0, limit).map((file) => ({ id: makeId(), file, previewUrl: URL.createObjectURL(file) }));\n\t\tif (additions.length > 0) commit([...prev, ...additions]);\n\t}, [accept, commit, disabled, maxFiles]);\n\n\tconst remove = useCallback((id: string) => {\n\t\tif (disabled) return;\n\t\tconst prev = itemsRef.current;\n\t\tconst target = prev.find((item) => item.id === id);\n\t\tif (!target) return;\n\t\tURL.revokeObjectURL(target.previewUrl);\n\t\tcommit(prev.filter((item) => item.id !== id));\n\t}, [commit, disabled]);\n\n\tconst onPickerChange = useCallback(\n\t\t(e: ChangeEvent<HTMLInputElement>) => {\n\t\t\tconst list = e.target.files;\n\t\t\tif (!list || list.length === 0) return;\n\t\t\taddFiles(Array.from(list));\n\t\t\tif (inputRef.current) inputRef.current.value = '';\n\t\t},\n\t\t[addFiles],\n\t);\n\n\tconst { isDragging, dropTargetProps } = useFileDropTarget({ disabled, onFiles: addFiles });\n\tconst onDragEnd = useCallback((event: DragEndEvent) => {\n\t\tif (disabled) return;\n\t\tconst { active, over } = event;\n\t\tif (!over || active.id === over.id) return;\n\t\tconst prev = itemsRef.current;\n\t\tconst from = prev.findIndex((item) => item.id === active.id);\n\t\tconst to = prev.findIndex((item) => item.id === over.id);\n\t\tif (from < 0 || to < 0) return;\n\t\tconst next = [...prev];\n\t\tconst [moved] = next.splice(from, 1);\n\t\tnext.splice(to, 0, moved);\n\t\tcommit(next);\n\t}, [commit, disabled]);\n\n\tconst announce = (template: string, id: string | number, overId?: string | number) => template\n\t\t.replace('{name}', items.find(item => item.id === id)?.file.name ?? strings.removeAria)\n\t\t.replace('{position}', String(items.findIndex(item => item.id === (overId ?? id)) + 1));\n\tconst announcements: Announcements = {\n\t\tonDragStart: ({ active }) => announce(strings.pickedUp ?? defaultMediaGalleryStrings.pickedUp, active.id),\n\t\tonDragOver: ({ active, over }) => over ? announce(strings.movedTo ?? defaultMediaGalleryStrings.movedTo, active.id, over.id) : undefined,\n\t\tonDragEnd: ({ active }) => announce(strings.dropped ?? defaultMediaGalleryStrings.dropped, active.id),\n\t\tonDragCancel: ({ active }) => announce(strings.cancelled ?? defaultMediaGalleryStrings.cancelled, active.id),\n\t};\n\tconst tileIds = useMemo(() => items.map((it) => it.id), [items]);\n\tconst isFull = maxFiles !== undefined && items.length >= maxFiles;\n\n\treturn (\n\t\t<Stack ref={ref} gap=\"lg\" className={cn('media-gallery--component', className)}>\n\t\t\t<DndContext sensors={sensors} onDragEnd={onDragEnd} accessibility={{ announcements }}>\n\t\t\t\t<SortableContext items={tileIds} strategy={rectSortingStrategy}>\n\t\t\t\t\t<Grid columns={{ base: 2, sm: 3, md: 4 }} gap=\"md\">\n\t\t\t\t\t\t{items.map((item, i) => (\n\t\t\t\t\t\t\t<SortableTile\n\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\titem={item}\n\t\t\t\t\t\t\t\tisFirst={i === 0}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\tonRemove={() => remove(item.id)}\n\t\t\t\t\t\t\t\tstrings={strings}\n\t\t\t\t\t\t\t\ttileClassName={tileClassName}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t{!isFull && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t{...dropTargetProps}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t'relative flex aspect-square items-center justify-center rounded-radius border border-dashed text-center outline-none transition-colors',\n\t\t\t\t\t\t\t\t\tuploadDropTargetRecipes.hover,\n\t\t\t\t\t\t\t\t\t// Keyboard focus on the file input frames the tile like any field; an\n\t\t\t\t\t\t\t\t\t// invalid tile keeps its destructive border and tints the halo.\n\t\t\t\t\t\t\t\t\t'has-[input:focus-visible]:ring-3',\n\t\t\t\t\t\t\t\t\tinvalid ? cn(uploadDropTargetRecipes.invalid, uploadDropTargetRecipes.focus.input.invalid) : cn(uploadDropTargetRecipes.idle, uploadDropTargetRecipes.focus.input.valid),\n\t\t\t\t\t\t\t\t\tdisabled && 'cursor-not-allowed opacity-50',\n\t\t\t\t\t\t\t\t\t!disabled && isDragging && uploadDropTargetRecipes.dragging,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\t\t\t\tref={inputRef}\n\t\t\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\t\t\tclassName=\"absolute inset-0 z-10 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n\t\t\t\t\t\t\t\t\taria-label={strings.addInstruction}\n\t\t\t\t\t\t\t\t\taria-invalid={invalid || undefined}\n\t\t\t\t\t\t\t\t\taccept={accept}\n\t\t\t\t\t\t\t\t\tmultiple\n\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\tonChange={onPickerChange}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Stack align=\"center\" gap=\"sm\" className=\"px-space-sm\">\n\t\t\t\t\t\t\t\t\t<ImagePlus className=\"size-icon-lg text-muted-foreground\" aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t\t<Text weight=\"medium\" align=\"center\">\n\t\t\t\t\t\t\t\t\t\t{isDragging ? strings.dragOver : strings.addInstruction}\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Grid>\n\t\t\t\t</SortableContext>\n\t\t\t</DndContext>\n\n\t\t\t{!!isFull && (\n\t\t\t\t<Text size=\"xs\" type=\"secondary\">\n\t\t\t\t\t{strings.maxReached}\n\t\t\t\t</Text>\n\t\t\t)}\n\t\t\t{!isFull && !!strings.helper && (\n\t\t\t\t<Text size=\"xs\" type=\"secondary\">\n\t\t\t\t\t{strings.helper}\n\t\t\t\t</Text>\n\t\t\t)}\n\t\t</Stack>\n\t);\n});\n\nMediaGallery.displayName = 'MediaGallery';\n"],"mappings":"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"}

package/dist/base/metadata-list.js

@@ -1,3 +1,3 @@
 "use client";
-import { n as e, r as t, t as n } from "../metadata-list-XkqZ_UXH.js";
+import { n as e, r as t, t as n } from "../metadata-list-G85roWjS.js";
 export { n as MetadataList, e as MetadataValue, t as defaultMetadataListStrings };

package/dist/base/navigation.js

@@ -1,8 +1,8 @@
 "use client";
-import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "../dropdown-menu-C08iIugv.js";
-import { n as g, t as _ } from "../breadcrumbs-Bp9Ke7kd.js";
-import { i as v, n as y, r as b, t as x } from "../navigation-Bt-v7rWP.js";
-import { i as S, n as C, o as w, r as T, t as E } from "../tabs-C4Kr_hCr.js";
-import { n as D, t as O } from "../overflow-tab-bar-BQCA2Zn2.js";
-import { a as k, c as A, i as j, n as M, o as N, r as P, s as F, t as I } from "../pagination-Br8TdV9A.js";
-export { _ as Breadcrumbs, m as DropdownMenu, l as DropdownMenuCheckboxItem, f as DropdownMenuContent, o as DropdownMenuGroup, e as DropdownMenuItem, u as DropdownMenuLabel, p as DropdownMenuLinkItem, t as DropdownMenuPortal, s as DropdownMenuRadioGroup, h as DropdownMenuRadioItem, n as DropdownMenuSeparator, r as DropdownMenuShortcut, d as DropdownMenuSub, c as DropdownMenuSubContent, a as DropdownMenuSubTrigger, i as DropdownMenuTrigger, v as LanguageSwitcher, y as NavigationTabs, O as OverflowTabBar, x as PageHeading, I as PaginationContent, M as PaginationEllipsis, P as PaginationItem, j as PaginationLink, k as PaginationNext, N as PaginationPrevious, F as PaginationPrimitive, E as Tabs, C as TabsContent, T as TabsList, S as TabsTrigger, g as defaultBreadcrumbsStrings, b as defaultNavigationTabsStrings, D as defaultOverflowTabBarStrings, A as defaultPaginationStrings, w as defaultTabsScrollStrings };
+import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "../dropdown-menu-B8hjvbkS.js";
+import { n as g, t as _ } from "../breadcrumbs-CQ9JSlez.js";
+import { a as v, i as y, n as b, r as x, t as S } from "../navigation-CmqaQR_G.js";
+import { i as C, n as w, o as T, r as E, t as D } from "../tabs-WnHfV2pM.js";
+import { n as O, t as k } from "../overflow-tab-bar-DV7HE_3t.js";
+import { a as A, c as j, i as M, n as N, o as P, r as F, s as I, t as L } from "../pagination-BuSWw1US.js";
+export { _ as Breadcrumbs, m as DropdownMenu, l as DropdownMenuCheckboxItem, f as DropdownMenuContent, o as DropdownMenuGroup, e as DropdownMenuItem, u as DropdownMenuLabel, p as DropdownMenuLinkItem, t as DropdownMenuPortal, s as DropdownMenuRadioGroup, h as DropdownMenuRadioItem, n as DropdownMenuSeparator, r as DropdownMenuShortcut, d as DropdownMenuSub, c as DropdownMenuSubContent, a as DropdownMenuSubTrigger, i as DropdownMenuTrigger, v as LanguageSwitcher, x as NavigationTabs, k as OverflowTabBar, S as PageHeading, L as PaginationContent, N as PaginationEllipsis, F as PaginationItem, M as PaginationLink, A as PaginationNext, P as PaginationPrevious, I as PaginationRoot, D as Tabs, w as TabsContent, E as TabsList, C as TabsTrigger, g as defaultBreadcrumbsStrings, y as defaultNavigationTabsStrings, O as defaultOverflowTabBarStrings, b as defaultPageHeadingStrings, j as defaultPaginationStrings, T as defaultTabsScrollStrings };

package/dist/base/popover-menu.js

@@ -1,3 +1,3 @@
 "use client";
-import { n as e, t } from "../popover-menu-yn-o0kyA.js";
+import { n as e, t } from "../popover-menu-CO-_iiuz.js";
 export { t as PopoverMenu, e as defaultPopoverMenuStrings };

package/dist/base/popover.js

@@ -1,3 +1,3 @@
 "use client";
-import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../popover-k8TdUcAt.js";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../popover-BpMxbqEK.js";
 export { i as Popover, o as PopoverAnchor, s as PopoverContent, r as PopoverDescription, a as PopoverFooter, n as PopoverHeader, e as PopoverTitle, t as PopoverTrigger };

package/dist/base/qr-code.js

@@ -1,34 +1,43 @@
 "use client";
-import { t as e } from "../utils-DhuoqFy4.js";
+import { t as e } from "../utils-BVbAG2J6.js";
 import { forwardRef as t, useEffect as n, useRef as r, useState as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
 import { formatHex as o, parse as s } from "culori";
 import c from "qrcode";
 //#region src/components/base/qr-code/qr-code.tsx
-var l = t(function({ data: t, foreground: l, background: u, robustness: d = "M", className: f, ...p }, m) {
-	let h = r(null), [g, _] = i("");
+function l(e) {
+	let t = (t) => {
+		let n = Number.parseInt(e.slice(t, t + 2), 16) / 255;
+		return n <= .04045 ? n / 12.92 : ((n + .055) / 1.055) ** 2.4;
+	};
+	return .2126 * t(1) + .7152 * t(3) + .0722 * t(5);
+}
+var u = t(function({ data: t, foreground: u, background: d, robustness: f = "M", quietZone: p = 0, className: m, ...h }, g) {
+	let _ = r(null), [v, y] = i("");
 	if (n(() => {
-		let e = h.current;
+		let e = _.current;
 		if (!e) return;
 		let n = 0, r = !0, i = async () => {
-			let i = ++n, a = getComputedStyle(e), f = (e, t, n) => {
+			let i = ++n, a = getComputedStyle(e), m = (e, t, n) => {
 				let r = s((e ?? a.getPropertyValue(t)).trim());
 				return r ? o(r) ?? n : n;
 			};
 			try {
-				let e = await c.toString(t.trim(), {
+				let e = m(u, "--foreground", "#000000"), a = m(d, "--background", "#ffffff");
+				u === void 0 && d === void 0 && l(e) > l(a) && ([e, a] = [a, e]);
+				let o = await c.toString(t.trim(), {
 					type: "svg",
 					width: 200,
-					margin: 0,
-					errorCorrectionLevel: d,
+					margin: Math.max(0, Math.floor(p)),
+					errorCorrectionLevel: f,
 					color: {
-						dark: f(l, "--foreground", "#000000"),
-						light: f(u, "--background", "#ffffff")
+						dark: e,
+						light: a
 					}
 				});
-				r && i === n && _(e);
+				r && i === n && y(o);
 			} catch {
-				r && i === n && _("");
+				r && i === n && y("");
 			}
 		};
 		i();
@@ -44,23 +53,24 @@ var l = t(function({ data: t, foreground: l, background: u, robustness: d = "M",
 		};
 	}, [
 		t,
-		l,
 		u,
-		d
+		d,
+		f,
+		p
 	]), !t.trim()) return null;
-	let v = p["aria-label"] !== void 0 || p["aria-labelledby"] !== void 0;
+	let b = h["aria-label"] !== void 0 || h["aria-labelledby"] !== void 0;
 	return /* @__PURE__ */ a("div", {
-		role: v ? "img" : void 0,
-		...p,
+		role: b ? "img" : void 0,
+		...h,
 		ref: (e) => {
-			if (h.current = e, typeof m == "function") return m(e);
-			m && (m.current = e);
+			if (_.current = e, typeof g == "function") return g(e);
+			g && (g.current = e);
 		},
-		className: e("qr-code--component size-full [&_svg]:size-full", f),
-		dangerouslySetInnerHTML: { __html: g }
+		className: e("qr-code--component size-full [&_svg]:size-full", m),
+		dangerouslySetInnerHTML: { __html: v }
 	});
 });
 //#endregion
-export { l as QRCode };
+export { u as QRCode };
 
 //# sourceMappingURL=qr-code.js.map

package/dist/base/qr-code.js.map

@@ -1 +1 @@
-{"version":3,"file":"qr-code.js","names":["cn","QR","QRCode","forwardRef","props","host","useRef","svg","setSvg","useState","useEffect","element","generation","active","generate","current","styles","color","parsed","parse","override","token","formatHex","fallback","next","data","robustness","foreground","background","observer","node","labelled","ref","className"],"sources":["../../src/components/base/qr-code/qr-code.tsx"],"sourcesContent":["import { formatHex, parse } from 'culori';\nimport QR from 'qrcode';\nimport { forwardRef, useEffect, useRef, useState, type HTMLAttributes } from 'react';\nimport { cn } from '../../../lib/utils';\n\nexport type QRCodeProps = HTMLAttributes<HTMLDivElement> & {\n /** Encoded payload. Pass `aria-label` to describe it; the code is then exposed as one image. */\n data: string;\n foreground?: string;\n background?: string;\n robustness?: 'L' | 'M' | 'Q' | 'H';\n};\n\nexport const QRCode = forwardRef<HTMLDivElement, QRCodeProps>(function QRCode({data, foreground, background, robustness = 'M', className, ...props}, ref) {\n const host = useRef<HTMLDivElement | null>(null);\n const [svg, setSvg] = useState('');\n useEffect(() => {\n  const element = host.current;\n  if (!element) return;\n  let generation = 0;\n  let active = true;\n  const generate = async () => {\n   const current = ++generation;\n   const styles = getComputedStyle(element);\n   const color = (override: string | undefined, token: string, fallback: string) => {\n    const parsed = parse((override ?? styles.getPropertyValue(token)).trim());\n    return parsed ? formatHex(parsed) ?? fallback : fallback;\n   };\n   try {\n    const next = await QR.toString(data.trim(), {type:'svg', width:200, margin:0, errorCorrectionLevel:robustness, color:{dark:color(foreground,'--foreground','#000000'), light:color(background,'--background','#ffffff')}});\n    if(active && current === generation) setSvg(next);\n   } catch { if(active && current === generation) setSvg(''); }\n  };\n  void generate();\n  // Themes inherit from the actual host; observe only theme attributes, never generated SVG children.\n  const observer = new MutationObserver(() => {void generate();});\n  for (let node: HTMLElement | null = element; node; node = node.parentElement) observer.observe(node, {attributes:true, attributeFilter:['class','style']});\n  return () => {active=false;observer.disconnect();};\n },[data,foreground,background,robustness]);\n if (!data.trim()) return null;\n // A labelled code is one image to assistive technology; the generated SVG has no name of its own.\n const labelled = props['aria-label'] !== undefined || props['aria-labelledby'] !== undefined;\n return <div role={labelled ? 'img' : undefined} {...props} ref={node => {host.current=node;if(typeof ref==='function') return ref(node);if(ref)ref.current=node;}} className={cn('qr-code--component size-full [&_svg]:size-full',className)} dangerouslySetInnerHTML={{__html:svg}} />;\n});\n"],"mappings":";;;;;;;AAaA,IAAaE,IAASC,EAAwC,SAAgB,EAAC,SAAM,eAAY,eAAY,gBAAa,KAAK,cAAW,GAAGC,KAAQ,GAAK;CACzJ,IAAMC,IAAOC,EAA8B,IAAI,GACzC,CAACC,GAAKC,KAAUC,EAAS,EAAE;CAwBjC,IAvBAC,QAAgB;EACf,IAAMC,IAAUN,EAAK;EACrB,IAAI,CAACM,GAAS;EACd,IAAIC,IAAa,GACbC,IAAS,IACPC,IAAW,YAAY;GAC5B,IAAMC,IAAU,EAAEH,GACZI,IAAS,iBAAiBL,CAAO,GACjCM,KAAS,GAA8B,GAAe,MAAqB;IAChF,IAAMC,IAASC,GAAOC,KAAYJ,EAAO,iBAAiBK,CAAK,EAAA,CAAG,KAAK,CAAC;IACxE,OAAOH,IAASI,EAAUJ,CAAM,KAAKK,IAAWA;GACjD;GACA,IAAI;IACH,IAAMC,IAAO,MAAMvB,EAAG,SAASwB,EAAK,KAAK,GAAG;KAAC,MAAK;KAAO,OAAM;KAAK,QAAO;KAAG,sBAAqBC;KAAY,OAAM;MAAC,MAAKT,EAAMU,GAAW,gBAAe,SAAS;MAAG,OAAMV,EAAMW,GAAW,gBAAe,SAAS;KAAC;IAAC,CAAC;IACzN,AAAGf,KAAUE,MAAYH,KAAYJ,EAAOgB,CAAI;GACjD,QAAQ;IAAE,AAAGX,KAAUE,MAAYH,KAAYJ,EAAO,EAAE;GAAG;EAC5D;EACA,EAAc;EAEd,IAAMqB,IAAW,IAAI,uBAAuB;GAAC,EAAc;EAAE,CAAC;EAC9D,KAAK,IAAIC,IAA2BnB,GAASmB,GAAM,IAAOA,EAAK,eAAe,EAAS,QAAQA,GAAM;GAAC,YAAW;GAAM,iBAAgB,CAAC,SAAQ,OAAO;EAAC,CAAC;EACzJ,aAAa;GAAc,AAAb,IAAO,IAAMD,EAAS,WAAW;EAAE;CAClD,GAAE;EAACJ;EAAKE;EAAWC;EAAWF;CAAU,CAAC,GACrC,CAACD,EAAK,KAAK,GAAG,OAAO;CAEzB,IAAMM,IAAW3B,EAAM,kBAAkB,KAAA,KAAaA,EAAM,uBAAuB,KAAA;CACnF,OAAO,kBAAC,OAAD;EAAK,MAAM2B,IAAW,QAAQ,KAAA;EAAW,GAAI3B;EAAO,MAAK,MAAQ;GAAmB,IAAlB,EAAK,UAAQ0B,GAAQ,OAAOE,KAAM,YAAY,OAAOA,EAAIF,CAAI;GAAE,AAAGE,MAAI,EAAI,UAAQF;EAAK;EAAG,WAAW9B,EAAG,kDAAiDiC,CAAS;EAAG,yBAAyB,EAAC,QAAO1B,EAAG;CAAI,CAAA;AACvR,CAAC"}
+{"version":3,"file":"qr-code.js","names":["cn","QR","luminance","channel","value","hex","offset","QRCode","forwardRef","props","host","useRef","svg","setSvg","useState","useEffect","element","generation","active","generate","current","styles","color","parsed","parse","override","token","formatHex","fallback","dark","foreground","light","background","next","data","quietZone","robustness","observer","node","labelled","ref","className"],"sources":["../../src/components/base/qr-code/qr-code.tsx"],"sourcesContent":["import { formatHex, parse } from 'culori';\nimport QR from 'qrcode';\nimport { forwardRef, useEffect, useRef, useState, type HTMLAttributes } from 'react';\nimport { cn } from '../../../lib/utils';\n\nexport type QRCodeProps = HTMLAttributes<HTMLDivElement> & {\n /** Encoded payload. Pass `aria-label` to describe it; the code is then exposed as one image. */\n data: string;\n foreground?: string;\n background?: string;\n robustness?: 'L' | 'M' | 'Q' | 'H';\n /** Blank modules around the code. Defaults to `0`; scanners expect four when the code sits on a busy surface. */\n quietZone?: number;\n};\n\n/** Relative luminance of a `#rrggbb` colour, enough to tell which of two is darker. */\nfunction luminance(hex: string) {\n const channel = (offset: number) => { const value = Number.parseInt(hex.slice(offset, offset + 2), 16) / 255; return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4; };\n return 0.2126 * channel(1) + 0.7152 * channel(3) + 0.0722 * channel(5);\n}\n\nexport const QRCode = forwardRef<HTMLDivElement, QRCodeProps>(function QRCode({data, foreground, background, robustness = 'M', quietZone = 0, className, ...props}, ref) {\n const host = useRef<HTMLDivElement | null>(null);\n const [svg, setSvg] = useState('');\n useEffect(() => {\n  const element = host.current;\n  if (!element) return;\n  let generation = 0;\n  let active = true;\n  const generate = async () => {\n   const current = ++generation;\n   const styles = getComputedStyle(element);\n   const color = (override: string | undefined, token: string, fallback: string) => {\n    const parsed = parse((override ?? styles.getPropertyValue(token)).trim());\n    return parsed ? formatHex(parsed) ?? fallback : fallback;\n   };\n   try {\n    let dark = color(foreground,'--foreground','#000000'), light = color(background,'--background','#ffffff');\n    // Theme colours flip in dark mode. Scanners expect dark modules on a light\n    // ground, so an inherited pair keeps that polarity; explicit colours are kept as given.\n    if (foreground === undefined && background === undefined && luminance(dark) > luminance(light)) [dark, light] = [light, dark];\n    const next = await QR.toString(data.trim(), {type:'svg', width:200, margin:Math.max(0, Math.floor(quietZone)), errorCorrectionLevel:robustness, color:{dark, light}});\n    if(active && current === generation) setSvg(next);\n   } catch { if(active && current === generation) setSvg(''); }\n  };\n  void generate();\n  // Themes inherit from the actual host; observe only theme attributes, never generated SVG children.\n  const observer = new MutationObserver(() => {void generate();});\n  for (let node: HTMLElement | null = element; node; node = node.parentElement) observer.observe(node, {attributes:true, attributeFilter:['class','style']});\n  return () => {active=false;observer.disconnect();};\n },[data,foreground,background,robustness,quietZone]);\n if (!data.trim()) return null;\n // A labelled code is one image to assistive technology; the generated SVG has no name of its own.\n const labelled = props['aria-label'] !== undefined || props['aria-labelledby'] !== undefined;\n return <div role={labelled ? 'img' : undefined} {...props} ref={node => {host.current=node;if(typeof ref==='function') return ref(node);if(ref)ref.current=node;}} className={cn('qr-code--component size-full [&_svg]:size-full',className)} dangerouslySetInnerHTML={{__html:svg}} />;\n});\n"],"mappings":";;;;;;;AAgBA,SAASE,EAAU,GAAa;CAC/B,IAAMC,KAAW,MAAmB;EAAE,IAAMC,IAAQ,OAAO,SAASC,EAAI,MAAMC,GAAQA,IAAS,CAAC,GAAG,EAAE,IAAI;EAAK,OAAOF,KAAS,SAAUA,IAAQ,UAAUA,IAAQ,QAAS,UAAU;CAAK;CAC1L,OAAO,QAASD,EAAQ,CAAC,IAAI,QAASA,EAAQ,CAAC,IAAI,QAASA,EAAQ,CAAC;AACtE;AAEA,IAAaI,IAASC,EAAwC,SAAgB,EAAC,SAAM,eAAY,eAAY,gBAAa,KAAK,eAAY,GAAG,cAAW,GAAGC,KAAQ,GAAK;CACxK,IAAMC,IAAOC,EAA8B,IAAI,GACzC,CAACC,GAAKC,KAAUC,EAAS,EAAE;CA4BjC,IA3BAC,QAAgB;EACf,IAAMC,IAAUN,EAAK;EACrB,IAAI,CAACM,GAAS;EACd,IAAIC,IAAa,GACbC,IAAS,IACPC,IAAW,YAAY;GAC5B,IAAMC,IAAU,EAAEH,GACZI,IAAS,iBAAiBL,CAAO,GACjCM,KAAS,GAA8B,GAAe,MAAqB;IAChF,IAAMC,IAASC,GAAOC,KAAYJ,EAAO,iBAAiBK,CAAK,EAAA,CAAG,KAAK,CAAC;IACxE,OAAOH,IAASI,EAAUJ,CAAM,KAAKK,IAAWA;GACjD;GACA,IAAI;IACH,IAAIC,IAAOP,EAAMQ,GAAW,gBAAe,SAAS,GAAGC,IAAQT,EAAMU,GAAW,gBAAe,SAAS;IAGxG,AAAIF,MAAe,KAAA,KAAaE,MAAe,KAAA,KAAa9B,EAAU2B,CAAI,IAAI3B,EAAU6B,CAAK,MAAG,CAACF,GAAME,KAAS,CAACA,GAAOF,CAAI;IAC5H,IAAMI,IAAO,MAAMhC,EAAG,SAASiC,EAAK,KAAK,GAAG;KAAC,MAAK;KAAO,OAAM;KAAK,QAAO,KAAK,IAAI,GAAG,KAAK,MAAMC,CAAS,CAAC;KAAG,sBAAqBC;KAAY,OAAM;MAAC;MAAM;KAAK;IAAC,CAAC;IACpK,AAAGlB,KAAUE,MAAYH,KAAYJ,EAAOoB,CAAI;GACjD,QAAQ;IAAE,AAAGf,KAAUE,MAAYH,KAAYJ,EAAO,EAAE;GAAG;EAC5D;EACA,EAAc;EAEd,IAAMwB,IAAW,IAAI,uBAAuB;GAAC,EAAc;EAAE,CAAC;EAC9D,KAAK,IAAIC,IAA2BtB,GAASsB,GAAM,IAAOA,EAAK,eAAe,EAAS,QAAQA,GAAM;GAAC,YAAW;GAAM,iBAAgB,CAAC,SAAQ,OAAO;EAAC,CAAC;EACzJ,aAAa;GAAc,AAAb,IAAO,IAAMD,EAAS,WAAW;EAAE;CAClD,GAAE;EAACH;EAAKJ;EAAWE;EAAWI;EAAWD;CAAS,CAAC,GAC/C,CAACD,EAAK,KAAK,GAAG,OAAO;CAEzB,IAAMK,IAAW9B,EAAM,kBAAkB,KAAA,KAAaA,EAAM,uBAAuB,KAAA;CACnF,OAAO,kBAAC,OAAD;EAAK,MAAM8B,IAAW,QAAQ,KAAA;EAAW,GAAI9B;EAAO,MAAK,MAAQ;GAAmB,IAAlB,EAAK,UAAQ6B,GAAQ,OAAOE,KAAM,YAAY,OAAOA,EAAIF,CAAI;GAAE,AAAGE,MAAI,EAAI,UAAQF;EAAK;EAAG,WAAWtC,EAAG,kDAAiDyC,CAAS;EAAG,yBAAyB,EAAC,QAAO7B,EAAG;CAAI,CAAA;AACvR,CAAC"}