tguikit 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,13 +1,101 @@
 "use client";
-import { Children as e, Fragment as t, createContext as n, isValidElement as r, useCallback as i, useContext as a, useEffect as o, useMemo as s, useRef as c, useState as l, useSyncExternalStore as u } from "react";
-import { clsx as d } from "clsx";
-import { cva as f } from "class-variance-authority";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Children as e, Fragment as t, createContext as n, isValidElement as r, useCallback as i, useContext as a, useEffect as o, useId as s, useLayoutEffect as c, useMemo as l, useRef as u, useState as d, useSyncExternalStore as f } from "react";
+import { clsx as p } from "clsx";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { cva as _ } from "class-variance-authority";
+import { createPortal as v } from "react-dom";
 //#region src/shared/lib/cn.ts
-function h(...e) {
-	return d(e);
+function y(...e) {
+	return p(e);
 }
-var g = {
+var b = {
+	accordion: "_accordion_1bhfn_1",
+	item: "_item_1bhfn_6",
+	header: "_header_1bhfn_14",
+	title: "_title_1bhfn_31",
+	chevron: "_chevron_1bhfn_36",
+	panel: "_panel_1bhfn_59",
+	"panel--open": "_panel--open_1bhfn_70",
+	panelInner: "_panelInner_1bhfn_74",
+	panelContent: "_panelContent_1bhfn_78"
+}, x = n(null);
+x.displayName = "AccordionContext";
+//#endregion
+//#region src/components/Accordion/Accordion.tsx
+var S = (e) => e == null ? [] : Array.isArray(e) ? e : [e];
+function C({ ref: e, multiple: t = !1, value: n, defaultValue: r, onChange: a, className: o, children: s, ...c }) {
+	let [u, f] = d(() => S(r)), p = n == null ? u : S(n), m = i((e) => {
+		let r = p.includes(e) ? p.filter((t) => t !== e) : t ? [...p, e] : [e];
+		n ?? f(r), a?.(r);
+	}, [
+		p,
+		t,
+		n,
+		a
+	]), g = l(() => ({
+		open: p,
+		toggle: m
+	}), [p, m]);
+	return /* @__PURE__ */ h(x.Provider, {
+		value: g,
+		children: /* @__PURE__ */ h("div", {
+			ref: e,
+			className: y(b.accordion, o),
+			...c,
+			children: s
+		})
+	});
+}
+C.displayName = "Accordion";
+//#endregion
+//#region src/components/Accordion/AccordionItem.tsx
+function w({ ref: e, value: t, header: n, className: r, children: i, ...o }) {
+	let c = a(x);
+	if (!c) throw Error("AccordionItem must be used within an <Accordion>.");
+	let l = s(), u = c.open.includes(t);
+	return /* @__PURE__ */ g("div", {
+		ref: e,
+		className: y(b.item, r),
+		...o,
+		children: [/* @__PURE__ */ g("button", {
+			type: "button",
+			className: b.header,
+			"aria-expanded": u,
+			"aria-controls": l,
+			onClick: () => c.toggle(t),
+			children: [/* @__PURE__ */ h("span", {
+				className: b.title,
+				children: n
+			}), /* @__PURE__ */ h("svg", {
+				className: b.chevron,
+				viewBox: "0 0 18 18",
+				fill: "none",
+				"aria-hidden": !0,
+				children: /* @__PURE__ */ h("path", {
+					d: "M4.5 7l4.5 4.5L13.5 7",
+					stroke: "currentColor",
+					strokeWidth: "1.8",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})]
+		}), /* @__PURE__ */ h("div", {
+			className: y(b.panel, u && b["panel--open"]),
+			children: /* @__PURE__ */ h("div", {
+				className: b.panelInner,
+				children: /* @__PURE__ */ h("div", {
+					id: l,
+					className: b.panelContent,
+					inert: !u,
+					"aria-hidden": !u,
+					children: i
+				})
+			})
+		})]
+	});
+}
+w.displayName = "AccordionItem";
+var T = {
 	avatar: "_avatar_lii18_1",
 	s20: "_s20_lii18_18",
 	s24: "_s24_lii18_24",
@@ -18,50 +106,65 @@ var g = {
 	img: "_img_lii18_54",
 	acronym: "_acronym_lii18_61",
 	icon: "_icon_lii18_65"
-}, _ = f(g.avatar, {
+}, E = _(T.avatar, {
 	variants: { size: {
-		20: g.s20,
-		24: g.s24,
-		28: g.s28,
-		40: g.s40,
-		48: g.s48,
-		96: g.s96
+		20: T.s20,
+		24: T.s24,
+		28: T.s28,
+		40: T.s40,
+		48: T.s48,
+		96: T.s96
 	} },
 	defaultVariants: { size: 40 }
 });
 //#endregion
 //#region src/components/Avatar/Avatar.tsx
-function v() {
-	return /* @__PURE__ */ p("svg", {
+function D() {
+	return /* @__PURE__ */ h("svg", {
 		viewBox: "0 0 24 24",
 		fill: "currentColor",
 		"aria-hidden": !0,
-		children: /* @__PURE__ */ p("path", { d: "M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.2 0-7 2.4-7 4.5V20h14v-1.5c0-2.1-2.8-4.5-7-4.5Z" })
+		children: /* @__PURE__ */ h("path", { d: "M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.2 0-7 2.4-7 4.5V20h14v-1.5c0-2.1-2.8-4.5-7-4.5Z" })
 	});
 }
-function y({ ref: e, size: t = 40, src: n, alt: r = "", acronym: i, fallbackIcon: a, className: o, children: s, ...c }) {
-	let [u, d] = l(null), f = n != null && n !== "" && n !== u;
-	return /* @__PURE__ */ m("span", {
+function O({ ref: e, size: t = 40, src: n, alt: r = "", acronym: i, fallbackIcon: a, className: o, children: s, ...c }) {
+	let [l, u] = d(null), f = n != null && n !== "" && n !== l;
+	return /* @__PURE__ */ g("span", {
 		ref: e,
-		className: h(_({ size: t }), o),
+		className: y(E({ size: t }), o),
 		...c,
-		children: [f ? /* @__PURE__ */ p("img", {
-			className: g.img,
+		children: [f ? /* @__PURE__ */ h("img", {
+			className: T.img,
 			src: n,
 			alt: r,
 			loading: "lazy",
-			onError: () => d(n)
-		}) : i ? /* @__PURE__ */ p("span", {
-			className: g.acronym,
+			onError: () => u(n)
+		}) : i ? /* @__PURE__ */ h("span", {
+			className: T.acronym,
 			children: i
-		}) : /* @__PURE__ */ p("span", {
-			className: g.icon,
-			children: a ?? /* @__PURE__ */ p(v, {})
+		}) : /* @__PURE__ */ h("span", {
+			className: T.icon,
+			children: a ?? /* @__PURE__ */ h(D, {})
 		}), s]
 	});
 }
-y.displayName = "Avatar";
-var b = {
+O.displayName = "Avatar";
+var k = { stack: "_stack_gi9bj_1" };
+//#endregion
+//#region src/components/AvatarStack/AvatarStack.tsx
+function A({ ref: e, overlap: t, className: n, style: r, ...i }) {
+	return /* @__PURE__ */ h("div", {
+		ref: e,
+		className: y(k.stack, n),
+		style: t == null ? r : {
+			...r,
+			"--tgui--avatar-stack--overlap": `${t}px`
+		},
+		...i
+	});
+}
+A.displayName = "AvatarStack";
+var j = {
 	badge: "_badge_76m5w_1",
 	number: "_number_76m5w_11",
 	large: "_large_76m5w_20",
@@ -71,20 +174,20 @@ var b = {
 	"mode-secondary": "_mode-secondary_76m5w_49",
 	"mode-gray": "_mode-gray_76m5w_54",
 	"mode-white": "_mode-white_76m5w_59"
-}, ee = f(b.badge, {
+}, ee = _(j.badge, {
 	variants: {
 		type: {
-			number: b.number,
-			dot: b.dot
+			number: j.number,
+			dot: j.dot
 		},
 		mode: {
-			primary: b["mode-primary"],
-			critical: b["mode-critical"],
-			secondary: b["mode-secondary"],
-			gray: b["mode-gray"],
-			white: b["mode-white"]
+			primary: j["mode-primary"],
+			critical: j["mode-critical"],
+			secondary: j["mode-secondary"],
+			gray: j["mode-gray"],
+			white: j["mode-white"]
 		},
-		large: { true: b.large }
+		large: { true: j.large }
 	},
 	defaultVariants: {
 		type: "number",
@@ -93,10 +196,10 @@ var b = {
 });
 //#endregion
 //#region src/components/Badge/Badge.tsx
-function x({ ref: e, type: t = "number", mode: n = "primary", large: r = !1, className: i, children: a, ...o }) {
-	return /* @__PURE__ */ p("span", {
+function te({ ref: e, type: t = "number", mode: n = "primary", large: r = !1, className: i, children: a, ...o }) {
+	return /* @__PURE__ */ h("span", {
 		ref: e,
-		className: h(ee({
+		className: y(ee({
 			type: t,
 			mode: n,
 			large: r
@@ -105,110 +208,213 @@ function x({ ref: e, type: t = "number", mode: n = "primary", large: r = !1, cla
 		children: t === "number" ? a : null
 	});
 }
-x.displayName = "Badge";
-var S = {
+te.displayName = "Badge";
+var M = {
+	banner: "_banner_1sxll_1",
+	"type-section": "_type-section_1sxll_12",
+	"type-image": "_type-image_1sxll_17",
+	background: "_background_1sxll_21",
+	before: "_before_1sxll_41",
+	body: "_body_1sxll_47",
+	callout: "_callout_1sxll_57",
+	header: "_header_1sxll_66",
+	subheader: "_subheader_1sxll_72",
+	description: "_description_1sxll_78",
+	actions: "_actions_1sxll_84",
+	close: "_close_1sxll_91"
+}, ne = _(M.banner, {
+	variants: { type: {
+		section: M["type-section"],
+		image: M["type-image"]
+	} },
+	defaultVariants: { type: "section" }
+});
+//#endregion
+//#region src/components/Banner/Banner.tsx
+function re({ ref: e, type: t = "section", before: n, callout: r, header: i, subheader: a, description: o, actions: s, background: c, onClose: l, closeLabel: u = "Close", className: d, children: f, ...p }) {
+	return /* @__PURE__ */ g("section", {
+		ref: e,
+		className: y(ne({ type: t }), d),
+		...p,
+		children: [
+			t === "image" && c != null ? /* @__PURE__ */ h("div", {
+				className: M.background,
+				"aria-hidden": !0,
+				children: c
+			}) : null,
+			n == null ? null : /* @__PURE__ */ h("div", {
+				className: M.before,
+				children: n
+			}),
+			/* @__PURE__ */ g("div", {
+				className: M.body,
+				children: [
+					r == null ? null : /* @__PURE__ */ h("span", {
+						className: M.callout,
+						children: r
+					}),
+					i == null ? null : /* @__PURE__ */ h("span", {
+						className: M.header,
+						children: i
+					}),
+					a == null ? null : /* @__PURE__ */ h("span", {
+						className: M.subheader,
+						children: a
+					}),
+					o == null ? null : /* @__PURE__ */ h("p", {
+						className: M.description,
+						children: o
+					}),
+					f,
+					s == null ? null : /* @__PURE__ */ h("div", {
+						className: M.actions,
+						children: s
+					})
+				]
+			}),
+			l == null ? null : /* @__PURE__ */ h("button", {
+				type: "button",
+				className: M.close,
+				"aria-label": u,
+				onClick: l,
+				children: /* @__PURE__ */ h("svg", {
+					width: "14",
+					height: "14",
+					viewBox: "0 0 14 14",
+					"aria-hidden": !0,
+					children: /* @__PURE__ */ h("path", {
+						d: "M3.5 3.5l7 7M10.5 3.5l-7 7",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round"
+					})
+				})
+			})
+		]
+	});
+}
+re.displayName = "Banner";
+var ie = {
+	blockquote: "_blockquote_mub25_1",
+	cite: "_cite_mub25_13"
+};
+//#endregion
+//#region src/components/Blockquote/Blockquote.tsx
+function ae({ ref: e, author: t, className: n, children: r, ...i }) {
+	return /* @__PURE__ */ g("blockquote", {
+		ref: e,
+		className: y(ie.blockquote, n),
+		...i,
+		children: [r, t == null ? null : /* @__PURE__ */ h("cite", {
+			className: ie.cite,
+			children: t
+		})]
+	});
+}
+ae.displayName = "Blockquote";
+var oe = {
 	spinner: "_spinner_1kqa4_1",
 	"tgui-spinner": "_tgui-spinner_1kqa4_1",
 	s: "_s_1kqa4_1",
 	m: "_m_1kqa4_17",
 	l: "_l_1kqa4_23"
-}, te = f(S.spinner, {
+}, se = _(oe.spinner, {
 	variants: { size: {
-		s: S.s,
-		m: S.m,
-		l: S.l
+		s: oe.s,
+		m: oe.m,
+		l: oe.l
 	} },
 	defaultVariants: { size: "m" }
 });
 //#endregion
 //#region src/components/Spinner/Spinner.tsx
-function C({ ref: e, size: t = "m", className: n, ...r }) {
-	return /* @__PURE__ */ p("span", {
+function ce({ ref: e, size: t = "m", className: n, ...r }) {
+	return /* @__PURE__ */ h("span", {
 		ref: e,
 		role: "status",
 		"aria-label": "Loading",
-		className: h(te({ size: t }), n),
+		className: y(se({ size: t }), n),
 		...r
 	});
 }
-C.displayName = "Spinner";
-var w = {
+ce.displayName = "Spinner";
+var le = {
 	typography: "_typography_1uxpm_1",
 	"weight-1": "_weight-1_1uxpm_6",
 	"weight-2": "_weight-2_1uxpm_10",
 	"weight-3": "_weight-3_1uxpm_14",
 	caps: "_caps_1uxpm_18"
-}, T = f(w.typography, {
+}, ue = _(le.typography, {
 	variants: {
 		weight: {
-			1: w["weight-1"],
-			2: w["weight-2"],
-			3: w["weight-3"]
+			1: le["weight-1"],
+			2: le["weight-2"],
+			3: le["weight-3"]
 		},
-		caps: { true: w.caps }
+		caps: { true: le.caps }
 	},
 	defaultVariants: { weight: "3" }
 });
 //#endregion
 //#region src/components/Typography/Typography.tsx
-function E({ ref: e, weight: t, caps: n, Component: r = "span", className: i, ...a }) {
-	return /* @__PURE__ */ p(r, {
+function N({ ref: e, weight: t, caps: n, Component: r = "span", className: i, ...a }) {
+	return /* @__PURE__ */ h(r, {
 		ref: e,
-		className: h(T({
+		className: y(ue({
 			weight: t,
 			caps: n
 		}), i),
 		...a
 	});
 }
-E.displayName = "Typography";
+N.displayName = "Typography";
 //#endregion
 //#region src/components/Subheadline/Subheadline.module.css
-var ne = {
+var de = {
 	"level-1": "_level-1_1azf3_1",
 	"level-2": "_level-2_1azf3_6"
-}, re = f("", {
+}, fe = _("", {
 	variants: { level: {
-		1: ne["level-1"],
-		2: ne["level-2"]
+		1: de["level-1"],
+		2: de["level-2"]
 	} },
 	defaultVariants: { level: "1" }
 });
 //#endregion
 //#region src/components/Subheadline/Subheadline.tsx
-function D({ ref: e, level: t, Component: n = "h6", className: r, ...i }) {
-	return /* @__PURE__ */ p(E, {
+function P({ ref: e, level: t, Component: n = "h6", className: r, ...i }) {
+	return /* @__PURE__ */ h(N, {
 		ref: e,
 		Component: n,
-		className: h(re({ level: t }), r),
+		className: y(fe({ level: t }), r),
 		...i
 	});
 }
-D.displayName = "Subheadline";
+P.displayName = "Subheadline";
 //#endregion
 //#region src/components/TguiProvider/context.ts
-var ie = n(null);
-ie.displayName = "TguiContext";
+var pe = n(null);
+pe.displayName = "TguiContext";
 //#endregion
 //#region src/components/TguiProvider/useTgui.ts
-function O() {
-	let e = a(ie);
+function F() {
+	let e = a(pe);
 	if (e === null) throw Error("useTgui must be used within a <TguiProvider>.");
 	return e;
 }
-var ae = {
+var me = {
 	ripple: "_ripple_1cc3x_1",
 	wave: "_wave_1cc3x_9",
 	"wave-rise": "_wave-rise_1cc3x_1"
 };
 //#endregion
 //#region src/components/Tappable/Ripple.tsx
-function oe({ waves: e, onWaveEnd: t }) {
-	return /* @__PURE__ */ p("span", {
+function he({ waves: e, onWaveEnd: t }) {
+	return /* @__PURE__ */ h("span", {
 		"aria-hidden": !0,
-		className: ae.ripple,
-		children: e.map((e) => /* @__PURE__ */ p("span", {
-			className: ae.wave,
+		className: me.ripple,
+		children: e.map((e) => /* @__PURE__ */ h("span", {
+			className: me.wave,
 			style: {
 				top: e.y,
 				left: e.x
@@ -217,13 +423,13 @@ function oe({ waves: e, onWaveEnd: t }) {
 		}, e.id))
 	});
 }
-var k = {
+var ge = {
 	tappable: "_tappable_10au7_1",
 	"tappable--ios": "_tappable--ios_10au7_17",
 	"tappable--opacity": "_tappable--opacity_10au7_18"
-}, se = 70, ce = 600;
-function le() {
-	let [e, t] = l([]), n = c(0), r = c(/* @__PURE__ */ new Map()), a = c(/* @__PURE__ */ new Set());
+}, _e = 70, ve = 600;
+function ye() {
+	let [e, t] = d([]), n = u(0), r = u(/* @__PURE__ */ new Map()), a = u(/* @__PURE__ */ new Set());
 	o(() => {
 		let e = r.current, t = a.current;
 		return () => {
@@ -247,9 +453,9 @@ function le() {
 				}]);
 				let i = setTimeout(() => {
 					a.current.delete(i), s(e);
-				}, ce);
+				}, ve);
 				a.current.add(i);
-			}, se);
+			}, _e);
 			r.current.set(u, d);
 		}, [s]),
 		onPointerCancel: i((e) => {
@@ -261,11 +467,11 @@ function le() {
 }
 //#endregion
 //#region src/components/Tappable/Tappable.tsx
-function A({ ref: e, Component: t = "div", interactiveAnimation: n = "background", className: r, children: i, onPointerDown: a, onPointerCancel: o, ...s }) {
-	let { platform: c } = O(), l = le(), u = !!s.disabled, d = !!s.readOnly, f = c === "base" && n === "background" && !d && !u && (t !== "div" && t !== "span" || s.onClick != null);
-	return /* @__PURE__ */ m(t, {
+function be({ ref: e, Component: t = "div", interactiveAnimation: n = "background", className: r, children: i, onPointerDown: a, onPointerCancel: o, ...s }) {
+	let { platform: c } = F(), l = ye(), u = !!s.disabled, d = !!s.readOnly, f = c === "base" && n === "background" && !d && !u && (t !== "div" && t !== "span" || s.onClick != null);
+	return /* @__PURE__ */ g(t, {
 		ref: e,
-		className: h(k.tappable, c === "ios" && k["tappable--ios"], n === "opacity" && k["tappable--opacity"], r),
+		className: y(ge.tappable, c === "ios" && ge["tappable--ios"], n === "opacity" && ge["tappable--opacity"], r),
 		"data-readonly": d || void 0,
 		"data-disabled": u || void 0,
 		"aria-disabled": u || void 0,
@@ -276,123 +482,123 @@ function A({ ref: e, Component: t = "div", interactiveAnimation: n = "background
 			f && l.onPointerCancel(e), o?.(e);
 		},
 		...s,
-		children: [f && /* @__PURE__ */ p(oe, {
+		children: [f && /* @__PURE__ */ h(he, {
 			waves: l.waves,
 			onWaveEnd: l.removeWave
 		}), i]
 	});
 }
-A.displayName = "Tappable";
-var ue = { text: "_text_5v0x0_1" };
+be.displayName = "Tappable";
+var xe = { text: "_text_5v0x0_1" };
 //#endregion
 //#region src/components/Text/Text.tsx
-function j({ ref: e, className: t, Component: n = "span", ...r }) {
-	return /* @__PURE__ */ p(E, {
+function I({ ref: e, className: t, Component: n = "span", ...r }) {
+	return /* @__PURE__ */ h(N, {
 		ref: e,
 		Component: n,
-		className: h(ue.text, t),
+		className: y(xe.text, t),
 		...r
 	});
 }
-j.displayName = "Text";
+I.displayName = "Text";
 //#endregion
 //#region src/shared/lib/telegram.ts
-function de() {
+function Se() {
 	if (!(typeof window > "u")) return window.Telegram?.WebApp;
 }
 //#endregion
 //#region src/shared/lib/appearance.ts
-var fe = "(prefers-color-scheme: dark)";
-function pe() {
+var Ce = "(prefers-color-scheme: dark)";
+function we() {
 	return typeof window < "u" && typeof window.matchMedia == "function";
 }
-function me() {
-	let e = de();
-	return e ? e.colorScheme === "dark" ? "dark" : "light" : pe() && window.matchMedia(fe).matches ? "dark" : "light";
+function Te() {
+	let e = Se();
+	return e ? e.colorScheme === "dark" ? "dark" : "light" : we() && window.matchMedia(Ce).matches ? "dark" : "light";
 }
-function he(e) {
-	let t = de();
+function Ee(e) {
+	let t = Se();
 	if (t) return t.onEvent("themeChanged", e), () => t.offEvent("themeChanged", e);
-	if (!pe()) return () => {};
-	let n = window.matchMedia(fe);
+	if (!we()) return () => {};
+	let n = window.matchMedia(Ce);
 	return n.addEventListener("change", e), () => n.removeEventListener("change", e);
 }
 //#endregion
 //#region src/shared/lib/platform.ts
-var ge = /* @__PURE__ */ new Set(["ios", "macos"]);
-function _e() {
-	let e = de();
-	if (e) return ge.has(e.platform) ? "ios" : "base";
+var De = /* @__PURE__ */ new Set(["ios", "macos"]);
+function Oe() {
+	let e = Se();
+	if (e) return De.has(e.platform) ? "ios" : "base";
 	if (typeof navigator > "u") return "base";
 	let t = navigator.userAgent, n = t.includes("Macintosh") && navigator.maxTouchPoints > 1;
 	return /iphone|ipad|ipod/i.test(t) || n ? "ios" : "base";
 }
-var M = {
-	wrapper: "_wrapper_zs68y_1",
-	"wrapper--ios": "_wrapper--ios_zs68y_89",
-	"wrapper--dark": "_wrapper--dark_zs68y_102"
-}, ve = () => "light";
-function ye({ ref: e, platform: t, appearance: n, portalContainer: r, className: a, children: o, ...c }) {
-	let d = s(() => t ?? _e(), [t]), f = u(he, me, ve), m = n ?? f, [g, _] = l(null), v = i((t) => {
-		_(t), typeof e == "function" ? e(t) : e && (e.current = t);
-	}, [e]), y = s(() => ({
-		platform: d,
-		appearance: m,
-		portalContainer: r ?? g
+var ke = {
+	wrapper: "_wrapper_mqlq3_1",
+	"wrapper--ios": "_wrapper--ios_mqlq3_89",
+	"wrapper--dark": "_wrapper--dark_mqlq3_102"
+}, Ae = () => "light";
+function je({ ref: e, platform: t, appearance: n, portalContainer: r, className: a, children: o, ...s }) {
+	let c = l(() => t ?? Oe(), [t]), u = f(Ee, Te, Ae), p = n ?? u, [m, g] = d(null), _ = i((t) => {
+		g(t), typeof e == "function" ? e(t) : e && (e.current = t);
+	}, [e]), v = l(() => ({
+		platform: c,
+		appearance: p,
+		portalContainer: r ?? m
 	}), [
-		d,
-		m,
+		c,
+		p,
 		r,
-		g
+		m
 	]);
-	return /* @__PURE__ */ p("div", {
-		ref: v,
-		className: h(M.wrapper, d === "ios" && M["wrapper--ios"], m === "dark" && M["wrapper--dark"], a),
-		...c,
-		children: /* @__PURE__ */ p(ie.Provider, {
-			value: y,
+	return /* @__PURE__ */ h("div", {
+		ref: _,
+		className: y(ke.wrapper, c === "ios" && ke["wrapper--ios"], p === "dark" && ke["wrapper--dark"], a),
+		...s,
+		children: /* @__PURE__ */ h(pe.Provider, {
+			value: v,
 			children: o
 		})
 	});
 }
-ye.displayName = "TguiProvider";
-var N = {
-	button: "_button_1fqnm_1",
-	stretched: "_stretched_1fqnm_13",
-	before: "_before_1fqnm_33",
-	after: "_after_1fqnm_34",
-	content: "_content_1fqnm_40",
-	label: "_label_1fqnm_49",
-	loading: "_loading_1fqnm_60",
-	spinner: "_spinner_1fqnm_70",
-	"size-s": "_size-s_1fqnm_75",
-	"size-m": "_size-m_1fqnm_83",
-	"size-l": "_size-l_1fqnm_90",
-	ios: "_ios_1fqnm_96",
-	"mode-filled": "_mode-filled_1fqnm_104",
-	"mode-bezeled": "_mode-bezeled_1fqnm_111",
-	"mode-plain": "_mode-plain_1fqnm_118",
-	"mode-gray": "_mode-gray_1fqnm_125",
-	"mode-outline": "_mode-outline_1fqnm_132",
-	"mode-white": "_mode-white_1fqnm_140"
-}, be = f(N.button, {
+je.displayName = "TguiProvider";
+var L = {
+	button: "_button_6vql2_1",
+	stretched: "_stretched_6vql2_13",
+	before: "_before_6vql2_34",
+	after: "_after_6vql2_35",
+	content: "_content_6vql2_41",
+	label: "_label_6vql2_50",
+	loading: "_loading_6vql2_61",
+	spinner: "_spinner_6vql2_71",
+	"size-s": "_size-s_6vql2_76",
+	"size-m": "_size-m_6vql2_84",
+	"size-l": "_size-l_6vql2_91",
+	ios: "_ios_6vql2_97",
+	"mode-filled": "_mode-filled_6vql2_105",
+	"mode-bezeled": "_mode-bezeled_6vql2_112",
+	"mode-plain": "_mode-plain_6vql2_119",
+	"mode-gray": "_mode-gray_6vql2_126",
+	"mode-outline": "_mode-outline_6vql2_133",
+	"mode-white": "_mode-white_6vql2_141"
+}, Me = _(L.button, {
 	variants: {
 		mode: {
-			filled: N["mode-filled"],
-			bezeled: N["mode-bezeled"],
-			plain: N["mode-plain"],
-			gray: N["mode-gray"],
-			outline: N["mode-outline"],
-			white: N["mode-white"]
+			filled: L["mode-filled"],
+			bezeled: L["mode-bezeled"],
+			plain: L["mode-plain"],
+			gray: L["mode-gray"],
+			outline: L["mode-outline"],
+			white: L["mode-white"]
 		},
 		size: {
-			s: N["size-s"],
-			m: N["size-m"],
-			l: N["size-l"]
+			s: L["size-s"],
+			m: L["size-m"],
+			l: L["size-l"]
 		},
-		stretched: { true: N.stretched },
+		stretched: { true: L.stretched },
 		platform: {
-			ios: N.ios,
+			ios: L.ios,
 			base: null
 		}
 	},
@@ -403,92 +609,92 @@ var N = {
 });
 //#endregion
 //#region src/components/Button/Button.tsx
-function xe({ size: e, children: t }) {
+function Ne({ size: e, children: t }) {
 	let n = {
 		weight: "2",
-		className: N.content
-	}, r = /* @__PURE__ */ p("span", {
-		className: N.label,
+		className: L.content
+	}, r = /* @__PURE__ */ h("span", {
+		className: L.label,
 		children: t
 	});
-	return e === "l" ? /* @__PURE__ */ p(j, {
+	return e === "l" ? /* @__PURE__ */ h(I, {
 		...n,
 		children: r
-	}) : /* @__PURE__ */ p(D, {
+	}) : /* @__PURE__ */ h(P, {
 		level: "2",
 		...n,
 		children: r
 	});
 }
-function Se({ ref: e, Component: t = "button", mode: n = "filled", size: r = "m", stretched: i = !1, loading: a = !1, type: o, before: s, after: c, children: l, className: u, ...d }) {
-	let { platform: f } = O();
-	return /* @__PURE__ */ m(A, {
+function Pe({ ref: e, Component: t = "button", mode: n = "filled", size: r = "m", stretched: i = !1, loading: a = !1, type: o, before: s, after: c, children: l, className: u, ...d }) {
+	let { platform: f } = F();
+	return /* @__PURE__ */ g(be, {
 		ref: e,
 		Component: t,
 		type: t === "button" ? o ?? "button" : o,
 		"aria-busy": a || void 0,
-		className: h(be({
+		className: y(Me({
 			mode: n,
 			size: r,
 			stretched: i,
 			platform: f
-		}), a && N.loading, u),
+		}), a && L.loading, u),
 		...d,
 		children: [
-			a ? /* @__PURE__ */ p(C, {
+			a ? /* @__PURE__ */ h(ce, {
 				size: "s",
-				className: N.spinner,
+				className: L.spinner,
 				"aria-hidden": !0
 			}) : null,
-			s ? /* @__PURE__ */ p("span", {
-				className: N.before,
+			s ? /* @__PURE__ */ h("span", {
+				className: L.before,
 				children: s
 			}) : null,
-			/* @__PURE__ */ p(xe, {
+			/* @__PURE__ */ h(Ne, {
 				size: r,
 				children: l
 			}),
-			c ? /* @__PURE__ */ p("span", {
-				className: N.after,
+			c ? /* @__PURE__ */ h("span", {
+				className: L.after,
 				children: c
 			}) : null
 		]
 	});
 }
-Se.displayName = "Button";
+Pe.displayName = "Button";
 //#endregion
 //#region src/components/Caption/Caption.module.css
-var Ce = {
+var Fe = {
 	"level-1": "_level-1_1fkm7_1",
 	"level-2": "_level-2_1fkm7_6"
-}, we = f("", {
+}, Ie = _("", {
 	variants: { level: {
-		1: Ce["level-1"],
-		2: Ce["level-2"]
+		1: Fe["level-1"],
+		2: Fe["level-2"]
 	} },
 	defaultVariants: { level: "1" }
 });
 //#endregion
 //#region src/components/Caption/Caption.tsx
-function P({ ref: e, level: t, Component: n = "span", className: r, ...i }) {
-	return /* @__PURE__ */ p(E, {
+function R({ ref: e, level: t, Component: n = "span", className: r, ...i }) {
+	return /* @__PURE__ */ h(N, {
 		ref: e,
 		Component: n,
-		className: h(we({ level: t }), r),
+		className: y(Ie({ level: t }), r),
 		...i
 	});
 }
-P.displayName = "Caption";
+R.displayName = "Caption";
 //#endregion
 //#region src/components/Card/Card.context.ts
-var Te = n({ type: "plain" }), F = {
+var Le = n({ type: "plain" }), Re = {
 	card: "_card_1maup_1",
 	cardAmbient: "_cardAmbient_1maup_17",
 	cell: "_cell_1maup_21",
 	cellAmbient: "_cellAmbient_1maup_26",
 	cellHeader: "_cellHeader_1maup_43",
 	cellSubtitle: "_cellSubtitle_1maup_47"
-}, I = {
+}, z = {
 	cell: "_cell_1w7p5_1",
 	before: "_before_1w7p5_10",
 	after: "_after_1w7p5_11",
@@ -503,200 +709,266 @@ var Te = n({ type: "plain" }), F = {
 	hovered: "_hovered_1w7p5_56",
 	ios: "_ios_1w7p5_60",
 	interactive: "_interactive_1w7p5_67"
-}, Ee = f(I.cell, { variants: {
+}, ze = _(z.cell, { variants: {
 	platform: {
-		ios: I.ios,
+		ios: z.ios,
 		base: null
 	},
-	hovered: { true: I.hovered },
-	interactive: { true: I.interactive },
-	multiline: { true: I.multiline }
+	hovered: { true: z.hovered },
+	interactive: { true: z.interactive },
+	multiline: { true: z.multiline }
 } });
 //#endregion
 //#region src/components/Cell/Cell.tsx
-function De({ ios: e, children: t }) {
-	return e ? /* @__PURE__ */ p(j, {
-		className: I.head,
+function Be({ ios: e, children: t }) {
+	return e ? /* @__PURE__ */ h(I, {
+		className: z.head,
 		children: t
-	}) : /* @__PURE__ */ p(D, {
+	}) : /* @__PURE__ */ h(P, {
 		level: "1",
-		className: I.head,
+		className: z.head,
 		children: t
 	});
 }
-function Oe({ ios: e, children: t }) {
-	return e ? /* @__PURE__ */ p(P, {
-		className: I.description,
+function Ve({ ios: e, children: t }) {
+	return e ? /* @__PURE__ */ h(R, {
+		className: z.description,
 		children: t
-	}) : /* @__PURE__ */ p(D, {
+	}) : /* @__PURE__ */ h(P, {
 		level: "2",
-		className: I.description,
+		className: z.description,
 		children: t
 	});
 }
-function ke({ ref: e, Component: t = "div", subhead: n, children: r, hint: i, titleBadge: a, subtitle: o, description: s, before: c, after: l, hovered: u, multiline: d, className: f, ...g }) {
-	let { platform: _ } = O(), v = _ === "ios", y = r != null || i != null || a != null, b = g.onClick != null || g.href != null || t === "a" || t === "button" || t === "label";
-	return /* @__PURE__ */ m(A, {
+function He({ ref: e, Component: t = "div", subhead: n, children: r, hint: i, titleBadge: a, subtitle: o, description: s, before: c, after: l, hovered: u, multiline: d, className: f, ...p }) {
+	let { platform: m } = F(), _ = m === "ios", v = r != null || i != null || a != null, b = p.onClick != null || p.href != null || t === "a" || t === "button" || t === "label";
+	return /* @__PURE__ */ g(be, {
 		ref: e,
 		Component: t,
-		className: h(Ee({
-			platform: _,
+		className: y(ze({
+			platform: m,
 			hovered: u,
 			multiline: d,
 			interactive: b
 		}), f),
-		...g,
+		...p,
 		children: [
-			c == null ? null : /* @__PURE__ */ p("div", {
-				className: I.before,
+			c == null ? null : /* @__PURE__ */ h("div", {
+				className: z.before,
 				children: c
 			}),
-			/* @__PURE__ */ m("div", {
-				className: I.middle,
+			/* @__PURE__ */ g("div", {
+				className: z.middle,
 				children: [
-					n == null ? null : /* @__PURE__ */ p(D, {
+					n == null ? null : /* @__PURE__ */ h(P, {
 						level: "2",
-						className: I.subhead,
+						className: z.subhead,
 						children: n
 					}),
-					y ? /* @__PURE__ */ m(De, {
-						ios: v,
+					v ? /* @__PURE__ */ g(Be, {
+						ios: _,
 						children: [
-							r == null ? null : /* @__PURE__ */ p("span", {
-								className: I.title,
+							r == null ? null : /* @__PURE__ */ h("span", {
+								className: z.title,
 								children: r
 							}),
-							i == null ? null : /* @__PURE__ */ p("span", {
-								className: I.hint,
+							i == null ? null : /* @__PURE__ */ h("span", {
+								className: z.hint,
 								children: i
 							}),
 							a
 						]
 					}) : null,
-					o == null ? null : /* @__PURE__ */ p(D, {
+					o == null ? null : /* @__PURE__ */ h(P, {
 						level: "2",
-						className: I.subtitle,
+						className: z.subtitle,
 						children: o
 					}),
-					s == null ? null : /* @__PURE__ */ p(Oe, {
-						ios: v,
+					s == null ? null : /* @__PURE__ */ h(Ve, {
+						ios: _,
 						children: s
 					})
 				]
 			}),
-			l == null ? null : /* @__PURE__ */ p("div", {
-				className: I.after,
+			l == null ? null : /* @__PURE__ */ h("div", {
+				className: z.after,
 				children: l
 			})
 		]
 	});
 }
-ke.displayName = "Cell";
+He.displayName = "Cell";
 //#endregion
 //#region src/components/Card/CardCell.tsx
-function Ae({ ref: e, children: t, subtitle: n, className: r, ...i }) {
-	let { type: o } = a(Te), s = o === "ambient";
-	return /* @__PURE__ */ p(ke, {
+function Ue({ ref: e, children: t, subtitle: n, className: r, ...i }) {
+	let { type: o } = a(Le), s = o === "ambient";
+	return /* @__PURE__ */ h(He, {
 		ref: e,
-		className: h(F.cell, s && F.cellAmbient, r),
-		subtitle: n == null ? void 0 : /* @__PURE__ */ p("span", {
-			className: F.cellSubtitle,
+		className: y(Re.cell, s && Re.cellAmbient, r),
+		subtitle: n == null ? void 0 : /* @__PURE__ */ h("span", {
+			className: Re.cellSubtitle,
 			children: n
 		}),
 		...i,
-		children: t == null ? null : /* @__PURE__ */ p("span", {
-			className: F.cellHeader,
+		children: t == null ? null : /* @__PURE__ */ h("span", {
+			className: Re.cellHeader,
 			children: t
 		})
 	});
 }
-Ae.displayName = "CardCell";
+Ue.displayName = "CardCell";
 //#endregion
 //#region src/components/Card/Card.tsx
-function je({ ref: e, type: t = "plain", className: n, children: r, ...i }) {
-	let a = s(() => ({ type: t }), [t]);
-	return /* @__PURE__ */ p(Te.Provider, {
+function We({ ref: e, type: t = "plain", className: n, children: r, ...i }) {
+	let a = l(() => ({ type: t }), [t]);
+	return /* @__PURE__ */ h(Le.Provider, {
 		value: a,
-		children: /* @__PURE__ */ p("article", {
+		children: /* @__PURE__ */ h("article", {
 			ref: e,
-			className: h(F.card, t === "ambient" && F.cardAmbient, n),
+			className: y(Re.card, t === "ambient" && Re.cardAmbient, n),
 			...i,
 			children: r
 		})
 	});
 }
-je.displayName = "Card", je.Cell = Ae;
-var L = {
+We.displayName = "Card", We.Cell = Ue;
+var Ge = {
 	checkbox: "_checkbox_yjw6v_1",
 	input: "_input_yjw6v_12",
 	box: "_box_yjw6v_22"
 };
 //#endregion
 //#region src/components/Checkbox/Checkbox.tsx
-function Me({ ref: e, indeterminate: t = !1, disabled: n, className: r, style: i, ...a }) {
-	let s = c(null);
+function Ke({ ref: e, indeterminate: t = !1, disabled: n, className: r, style: i, ...a }) {
+	let s = u(null);
 	return o(() => {
 		s.current && (s.current.indeterminate = t);
-	}, [t]), /* @__PURE__ */ m("span", {
-		className: h(L.checkbox, r),
+	}, [t]), /* @__PURE__ */ g("span", {
+		className: y(Ge.checkbox, r),
 		style: i,
 		"data-disabled": n || void 0,
-		children: [/* @__PURE__ */ p("input", {
+		children: [/* @__PURE__ */ h("input", {
 			ref: (t) => {
 				s.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
 			},
 			type: "checkbox",
-			className: L.input,
+			className: Ge.input,
 			disabled: n,
 			...a
-		}), /* @__PURE__ */ p("span", {
-			className: L.box,
+		}), /* @__PURE__ */ h("span", {
+			className: Ge.box,
 			"aria-hidden": !0
 		})]
 	});
 }
-Me.displayName = "Checkbox";
-var R = {
+Ke.displayName = "Checkbox";
+var B = {
+	chip: "_chip_13v10_1",
+	"mode-elevated": "_mode-elevated_13v10_16",
+	"mode-outline": "_mode-outline_13v10_21",
+	clickable: "_clickable_13v10_26",
+	before: "_before_13v10_37",
+	after: "_after_13v10_38",
+	label: "_label_13v10_49",
+	remove: "_remove_13v10_56"
+}, qe = _(B.chip, {
+	variants: {
+		mode: {
+			elevated: B["mode-elevated"],
+			outline: B["mode-outline"]
+		},
+		clickable: { true: B.clickable }
+	},
+	defaultVariants: { mode: "elevated" }
+});
+//#endregion
+//#region src/components/Chip/Chip.tsx
+function Je({ ref: e, Component: t = "div", mode: n = "elevated", before: r, after: i, onClick: a, onRemove: o, removeLabel: s = "Remove", className: c, children: l, ...u }) {
+	return /* @__PURE__ */ g(t, {
+		ref: e,
+		className: y(qe({
+			mode: n,
+			clickable: a != null
+		}), c),
+		onClick: a,
+		...u,
+		children: [
+			r == null ? null : /* @__PURE__ */ h("span", {
+				className: B.before,
+				children: r
+			}),
+			/* @__PURE__ */ h("span", {
+				className: B.label,
+				children: l
+			}),
+			o == null ? i == null ? null : /* @__PURE__ */ h("span", {
+				className: B.after,
+				children: i
+			}) : /* @__PURE__ */ h("button", {
+				type: "button",
+				className: B.remove,
+				"aria-label": s,
+				onClick: (e) => {
+					e.stopPropagation(), o();
+				},
+				children: /* @__PURE__ */ h("svg", {
+					width: "12",
+					height: "12",
+					viewBox: "0 0 12 12",
+					"aria-hidden": !0,
+					children: /* @__PURE__ */ h("path", {
+						d: "M3 3l6 6M9 3l-6 6",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round"
+					})
+				})
+			})
+		]
+	});
+}
+Je.displayName = "Chip";
+var Ye = {
 	root: "_root_hheo5_1",
 	svg: "_svg_hheo5_6",
 	track: "_track_hheo5_10",
 	indicator: "_indicator_hheo5_14"
-}, Ne = {
+}, Xe = {
 	s: 20,
 	m: 28,
 	l: 36
-}, Pe = {
+}, Ze = {
 	s: 2,
 	m: 2.5,
 	l: 3
 };
 //#endregion
 //#region src/components/CircularProgress/CircularProgress.tsx
-function Fe({ ref: e, value: t = 0, size: n = "m", className: r, ...i }) {
-	let a = Math.max(0, Math.min(100, t)), o = Ne[n], s = Pe[n], c = (o - s) / 2, l = 2 * Math.PI * c, u = o / 2;
-	return /* @__PURE__ */ p("span", {
+function Qe({ ref: e, value: t = 0, size: n = "m", className: r, ...i }) {
+	let a = Math.max(0, Math.min(100, t)), o = Xe[n], s = Ze[n], c = (o - s) / 2, l = 2 * Math.PI * c, u = o / 2;
+	return /* @__PURE__ */ h("span", {
 		ref: e,
 		role: "progressbar",
 		"aria-valuemin": 0,
 		"aria-valuemax": 100,
 		"aria-valuenow": Math.round(a),
-		className: h(R.root, r),
+		className: y(Ye.root, r),
 		...i,
-		children: /* @__PURE__ */ m("svg", {
-			className: R.svg,
+		children: /* @__PURE__ */ g("svg", {
+			className: Ye.svg,
 			width: o,
 			height: o,
 			viewBox: `0 0 ${o} ${o}`,
 			"aria-hidden": !0,
-			children: [/* @__PURE__ */ p("circle", {
-				className: R.track,
+			children: [/* @__PURE__ */ h("circle", {
+				className: Ye.track,
 				cx: u,
 				cy: u,
 				r: c,
 				strokeWidth: s,
 				fill: "none"
-			}), /* @__PURE__ */ p("circle", {
-				className: R.indicator,
+			}), /* @__PURE__ */ h("circle", {
+				className: Ye.indicator,
 				cx: u,
 				cy: u,
 				r: c,
@@ -709,32 +981,133 @@ function Fe({ ref: e, value: t = 0, size: n = "m", className: r, ...i }) {
 		})
 	});
 }
-Fe.displayName = "CircularProgress";
-var Ie = { divider: "_divider_fq1ux_1" };
+Qe.displayName = "CircularProgress";
+var $e = { divider: "_divider_fq1ux_1" };
 //#endregion
 //#region src/components/Divider/Divider.tsx
-function z({ ref: e, className: t, ...n }) {
-	return /* @__PURE__ */ p("hr", {
+function et({ ref: e, className: t, ...n }) {
+	return /* @__PURE__ */ h("hr", {
 		ref: e,
-		className: h(Ie.divider, t),
+		className: y($e.divider, t),
 		...n
 	});
 }
-z.displayName = "Divider";
-var Le = { headline: "_headline_17ihj_1" };
+et.displayName = "Divider";
+var tt = {
+	fixedLayout: "_fixedLayout_1b5hq_1",
+	top: "_top_1b5hq_9",
+	bottom: "_bottom_1b5hq_14"
+};
+//#endregion
+//#region src/components/FixedLayout/FixedLayout.tsx
+function nt({ ref: e, vertical: t = "bottom", className: n, ...r }) {
+	return /* @__PURE__ */ h("div", {
+		ref: e,
+		className: y(tt.fixedLayout, tt[t], n),
+		...r
+	});
+}
+nt.displayName = "FixedLayout";
+var rt = { headline: "_headline_17ihj_1" };
 //#endregion
 //#region src/components/Headline/Headline.tsx
-function Re({ ref: e, weight: t = "2", className: n, Component: r = "h5", ...i }) {
-	return /* @__PURE__ */ p(E, {
+function it({ ref: e, weight: t = "2", className: n, Component: r = "h5", ...i }) {
+	return /* @__PURE__ */ h(N, {
 		ref: e,
 		weight: t,
 		Component: r,
-		className: h(Le.headline, n),
+		className: y(rt.headline, n),
 		...i
 	});
 }
-Re.displayName = "Headline";
-var B = {
+it.displayName = "Headline";
+var V = {
+	root: "_root_ykq8r_1",
+	edge: "_edge_ykq8r_9",
+	visible: "_visible_ykq8r_25",
+	"edge--start": "_edge--start_ykq8r_29",
+	"edge--end": "_edge--end_ykq8r_34",
+	scroller: "_scroller_ykq8r_39",
+	snap: "_snap_ykq8r_72"
+}, at = 4;
+function ot({ ref: e, snap: t = !1, fade: n = !0, className: r, children: a, ...s }) {
+	let c = u(null), [l, f] = d({
+		start: !1,
+		end: !1
+	}), p = u({
+		down: !1,
+		moved: !1,
+		startX: 0,
+		startScroll: 0
+	}), _ = i(() => {
+		let e = c.current;
+		if (!e) return;
+		let t = e.scrollLeft > 1, n = e.scrollLeft < e.scrollWidth - e.clientWidth - 1;
+		f((e) => e.start === t && e.end === n ? e : {
+			start: t,
+			end: n
+		});
+	}, []);
+	o(() => {
+		let e = c.current;
+		if (!e) return;
+		_(), e.addEventListener("scroll", _, { passive: !0 });
+		let t = typeof ResizeObserver < "u" ? new ResizeObserver(_) : null;
+		return t?.observe(e), () => {
+			e.removeEventListener("scroll", _), t?.disconnect();
+		};
+	}, [_]);
+	let v = (e) => {
+		if (e.pointerType !== "mouse" || e.button !== 0) return;
+		let t = c.current;
+		t && (p.current = {
+			down: !0,
+			moved: !1,
+			startX: e.clientX,
+			startScroll: t.scrollLeft
+		});
+	}, b = (e) => {
+		let t = p.current, n = c.current;
+		if (!t.down || !n) return;
+		let r = e.clientX - t.startX;
+		if (!t.moved) {
+			if (Math.abs(r) < at) return;
+			t.moved = !0, n.setPointerCapture(e.pointerId), n.dataset.grabbing = "true", n.style.scrollBehavior = "auto";
+		}
+		e.preventDefault(), n.scrollLeft = t.startScroll - r;
+	}, x = (e) => {
+		let t = c.current;
+		t && p.current.moved && (t.releasePointerCapture?.(e.pointerId), delete t.dataset.grabbing, t.style.scrollBehavior = ""), p.current.down = !1;
+	};
+	return /* @__PURE__ */ g("div", {
+		ref: e,
+		className: y(V.root, r),
+		"data-start": n ? String(l.start) : void 0,
+		"data-end": n ? String(l.end) : void 0,
+		...s,
+		children: [n ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("span", {
+			className: y(V.edge, V["edge--start"], l.start && V.visible),
+			"aria-hidden": !0
+		}), /* @__PURE__ */ h("span", {
+			className: y(V.edge, V["edge--end"], l.end && V.visible),
+			"aria-hidden": !0
+		})] }) : null, /* @__PURE__ */ h("div", {
+			ref: c,
+			className: y(V.scroller, t && V.snap),
+			onPointerDown: v,
+			onPointerMove: b,
+			onPointerUp: x,
+			onPointerCancel: x,
+			onDragStart: (e) => e.preventDefault(),
+			onClickCapture: (e) => {
+				p.current.moved && (e.stopPropagation(), p.current.moved = !1);
+			},
+			children: a
+		})]
+	});
+}
+ot.displayName = "HorizontalScroll";
+var H = {
 	iconButton: "_iconButton_1ifh1_1",
 	circle: "_circle_1ifh1_15",
 	s: "_s_1ifh1_19",
@@ -746,22 +1119,22 @@ var B = {
 	"mode-plain": "_mode-plain_1ifh1_72",
 	"mode-gray": "_mode-gray_1ifh1_76",
 	"mode-outline": "_mode-outline_1ifh1_81"
-}, ze = f(B.iconButton, {
+}, st = _(H.iconButton, {
 	variants: {
 		mode: {
-			bezeled: B["mode-bezeled"],
-			plain: B["mode-plain"],
-			gray: B["mode-gray"],
-			outline: B["mode-outline"]
+			bezeled: H["mode-bezeled"],
+			plain: H["mode-plain"],
+			gray: H["mode-gray"],
+			outline: H["mode-outline"]
 		},
 		size: {
-			s: B.s,
-			m: B.m,
-			l: B.l
+			s: H.s,
+			m: H.m,
+			l: H.l
 		},
-		circle: { true: B.circle },
+		circle: { true: H.circle },
 		platform: {
-			ios: B.ios,
+			ios: H.ios,
 			base: null
 		}
 	},
@@ -772,27 +1145,86 @@ var B = {
 });
 //#endregion
 //#region src/components/IconButton/IconButton.tsx
-function Be({ ref: e, Component: t = "button", mode: n = "plain", size: r = "m", circle: i = !1, type: a, className: o, children: s, ...c }) {
-	let { platform: l } = O();
-	return /* @__PURE__ */ p(A, {
+function ct({ ref: e, Component: t = "button", mode: n = "plain", size: r = "m", circle: i = !1, type: a, className: o, children: s, ...c }) {
+	let { platform: l } = F();
+	return /* @__PURE__ */ h(be, {
 		ref: e,
 		Component: t,
 		type: t === "button" ? a ?? "button" : a,
-		className: h(ze({
+		className: y(st({
 			mode: n,
 			size: r,
 			circle: i,
 			platform: l
 		}), o),
 		...c,
-		children: /* @__PURE__ */ p("span", {
-			className: B.icon,
+		children: /* @__PURE__ */ h("span", {
+			className: H.icon,
 			children: s
 		})
 	});
 }
-Be.displayName = "IconButton";
-var V = {
+ct.displayName = "IconButton";
+var lt = {
+	frame: "_frame_1q5rs_1",
+	bordered: "_bordered_1q5rs_10",
+	img: "_img_1q5rs_14",
+	loading: "_loading_1q5rs_21",
+	placeholder: "_placeholder_1q5rs_25",
+	fallback: "_fallback_1q5rs_26",
+	"tgui-image-shimmer": "_tgui-image-shimmer_1q5rs_1"
+}, ut = /* @__PURE__ */ h("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	"aria-hidden": !0,
+	children: /* @__PURE__ */ h("path", {
+		d: "M3 5h18v14H3zM3 15l5-5 4 4 3-3 6 6",
+		stroke: "currentColor",
+		strokeWidth: "1.6",
+		strokeLinejoin: "round"
+	})
+});
+function dt({ ref: e, size: t, width: n, height: r, aspectRatio: i, fit: a = "cover", radius: o, bordered: s = !1, fallback: c = ut, src: l, alt: u = "", className: f, style: p, onLoad: m, onError: _, ...v }) {
+	let [b, x] = d(null), [S, C] = d(!1), w = l != null && l === b, T = {
+		...p,
+		width: t ?? n,
+		height: t ?? r,
+		aspectRatio: i,
+		borderRadius: o === "full" ? "50%" : o,
+		"--tgui--image--fit": a
+	};
+	return /* @__PURE__ */ g("div", {
+		className: y(lt.frame, s && lt.bordered, !S && lt.loading, f),
+		style: T,
+		children: [
+			l != null && !w ? /* @__PURE__ */ h("img", {
+				ref: e,
+				className: lt.img,
+				src: l,
+				alt: u,
+				draggable: !1,
+				onLoad: (e) => {
+					C(!0), m?.(e);
+				},
+				onError: (e) => {
+					x(l), _?.(e);
+				},
+				...v
+			}) : null,
+			!S && !w ? /* @__PURE__ */ h("div", {
+				className: lt.placeholder,
+				"aria-hidden": !0
+			}) : null,
+			w ? /* @__PURE__ */ h("div", {
+				className: lt.fallback,
+				"aria-hidden": !0,
+				children: c
+			}) : null
+		]
+	});
+}
+dt.displayName = "Image";
+var U = {
 	base: "_base_1k0ze_1",
 	body: "_body_1k0ze_7",
 	ios: "_ios_1k0ze_23",
@@ -806,148 +1238,242 @@ var V = {
 };
 //#endregion
 //#region src/components/FormField/FormField.tsx
-function H({ ref: e, ios: t = !1, status: n = "default", disabled: r = !1, alignStart: i = !1, header: a, before: o, after: s, className: c, children: l }) {
-	return /* @__PURE__ */ m("div", {
+function ft({ ref: e, ios: t = !1, status: n = "default", disabled: r = !1, alignStart: i = !1, header: a, before: o, after: s, className: c, children: l }) {
+	return /* @__PURE__ */ g("div", {
 		ref: e,
-		className: h(t ? V.ios : V.base, n === "error" && V.error, n === "focused" && V.focused, r && V.disabled, i && V["align-start"], c),
+		className: y(t ? U.ios : U.base, n === "error" && U.error, n === "focused" && U.focused, r && U.disabled, i && U["align-start"], c),
 		"aria-disabled": r || void 0,
-		children: [/* @__PURE__ */ m("label", {
-			className: V.body,
+		children: [/* @__PURE__ */ g("label", {
+			className: U.body,
 			children: [
-				o == null ? null : /* @__PURE__ */ p("span", {
-					className: V.before,
+				o == null ? null : /* @__PURE__ */ h("span", {
+					className: U.before,
 					children: o
 				}),
 				l,
-				s == null ? null : /* @__PURE__ */ p("span", {
-					className: V.after,
+				s == null ? null : /* @__PURE__ */ h("span", {
+					className: U.after,
 					children: s
 				})
 			]
-		}), a != null && !t ? /* @__PURE__ */ p("span", {
-			className: V.header,
+		}), a != null && !t ? /* @__PURE__ */ h("span", {
+			className: U.header,
 			children: a
 		}) : null]
 	});
 }
-H.displayName = "FormField";
-var Ve = { field: "_field_11zrf_1" };
+ft.displayName = "FormField";
+var pt = { field: "_field_11zrf_1" };
 //#endregion
 //#region src/components/Input/Input.tsx
-function He({ ref: e, type: t = "text", header: n, before: r, after: i, status: a, disabled: o, className: s, onFocus: c, onBlur: u, ...d }) {
-	let { platform: f } = O(), m = f === "ios", [h, g] = l(!1);
-	return /* @__PURE__ */ p(H, {
-		ios: m,
-		status: a ?? (h ? "focused" : "default"),
+function mt({ ref: e, type: t = "text", header: n, before: r, after: i, status: a, disabled: o, className: s, onFocus: c, onBlur: l, ...u }) {
+	let { platform: f } = F(), p = f === "ios", [m, g] = d(!1);
+	return /* @__PURE__ */ h(ft, {
+		ios: p,
+		status: a ?? (m ? "focused" : "default"),
 		disabled: o,
 		header: n,
 		before: r,
 		after: i,
 		className: s,
-		children: /* @__PURE__ */ p(m ? j : D, {
+		children: /* @__PURE__ */ h(p ? I : P, {
 			ref: e,
 			Component: "input",
-			className: Ve.field,
+			className: pt.field,
 			type: t,
 			disabled: o,
 			onFocus: (e) => {
 				o || g(!0), c?.(e);
 			},
 			onBlur: (e) => {
-				g(!1), u?.(e);
+				g(!1), l?.(e);
 			},
-			...d
+			...u
 		})
 	});
 }
-He.displayName = "Input";
+mt.displayName = "Input";
 //#endregion
 //#region src/components/LargeTitle/LargeTitle.module.css
-var Ue = { "large-title": "_large-title_15hug_1" };
+var ht = { "large-title": "_large-title_15hug_1" };
 //#endregion
 //#region src/components/LargeTitle/LargeTitle.tsx
-function We({ ref: e, weight: t = "1", className: n, Component: r = "h1", ...i }) {
-	return /* @__PURE__ */ p(E, {
+function gt({ ref: e, weight: t = "1", className: n, Component: r = "h1", ...i }) {
+	return /* @__PURE__ */ h(N, {
 		ref: e,
 		weight: t,
 		Component: r,
-		className: h(Ue["large-title"], n),
+		className: y(ht["large-title"], n),
 		...i
 	});
 }
-We.displayName = "LargeTitle";
-var Ge = {
+gt.displayName = "LargeTitle";
+var _t = {
+	link: "_link_1ylyy_1",
+	icon: "_icon_1ylyy_18"
+};
+//#endregion
+//#region src/components/Link/Link.tsx
+function vt({ ref: e, target: t, rel: n, className: r, children: i, ...a }) {
+	let o = t === "_blank";
+	return /* @__PURE__ */ g("a", {
+		ref: e,
+		target: t,
+		rel: o ? n ?? "noopener noreferrer" : n,
+		className: y(_t.link, r),
+		...a,
+		children: [i, o ? /* @__PURE__ */ h("svg", {
+			className: _t.icon,
+			viewBox: "0 0 16 16",
+			fill: "none",
+			"aria-hidden": !0,
+			children: /* @__PURE__ */ h("path", {
+				d: "M6 3h7v7M13 3l-8 8",
+				stroke: "currentColor",
+				strokeWidth: "1.6",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}) : null]
+	});
+}
+vt.displayName = "Link";
+var yt = {
 	list: "_list_1rhgw_1",
 	ios: "_ios_1rhgw_5"
 };
 //#endregion
 //#region src/components/List/List.tsx
-function Ke({ ref: e, Component: t = "div", className: n, children: r, ...i }) {
-	let { platform: a } = O();
-	return /* @__PURE__ */ p(t, {
+function bt({ ref: e, Component: t = "div", className: n, children: r, ...i }) {
+	let { platform: a } = F();
+	return /* @__PURE__ */ h(t, {
 		ref: e,
-		className: h(Ge.list, a === "ios" && Ge.ios, n),
+		className: y(yt.list, a === "ios" && yt.ios, n),
 		...i,
 		children: r
 	});
 }
-Ke.displayName = "List";
+bt.displayName = "List";
+var xt = {
+	pinInput: "_pinInput_fn21m_1",
+	cell: "_cell_fn21m_6"
+}, St = {
+	numeric: /[0-9]/,
+	alphanumeric: /[a-z0-9]/i
+};
+function Ct({ ref: e, length: t = 4, value: n, defaultValue: r = "", onChange: i, onComplete: a, type: o = "numeric", mask: s = !1, disabled: c = !1, invalid: f = !1, name: p, "aria-label": m = "Verification code", className: g }) {
+	let [_, v] = d(r.slice(0, t)), b = n ?? _, x = l(() => {
+		let e = b.split("").slice(0, t);
+		for (; e.length < t;) e.push("");
+		return e;
+	}, [b, t]), S = u([]), C = St[o], w = (e) => {
+		let r = e.join("");
+		n ?? v(r), i?.(r), r.length === t && e.every(Boolean) && a?.(r);
+	}, T = (e) => {
+		let n = Math.max(0, Math.min(t - 1, e));
+		S.current[n]?.focus(), S.current[n]?.select();
+	}, E = (e, t) => {
+		let n = t.split("").reverse().find((e) => C.test(e));
+		if (!n) return;
+		let r = [...x];
+		r[e] = n, w(r), T(e + 1);
+	}, D = (e, t) => {
+		if (t.key === "Backspace") {
+			t.preventDefault();
+			let n = [...x];
+			n[e] ? (n[e] = "", w(n)) : e > 0 && (n[e - 1] = "", w(n), T(e - 1));
+		} else t.key === "ArrowLeft" ? (t.preventDefault(), T(e - 1)) : t.key === "ArrowRight" && (t.preventDefault(), T(e + 1));
+	}, O = (e, n) => {
+		n.preventDefault();
+		let r = n.clipboardData.getData("text").split("").filter((e) => C.test(e));
+		if (r.length === 0) return;
+		let i = [...x];
+		for (let n = 0; n < r.length && e + n < t; n += 1) i[e + n] = r[n];
+		w(i), T(e + r.length);
+	};
+	return /* @__PURE__ */ h("div", {
+		ref: e,
+		className: y(xt.pinInput, g),
+		role: "group",
+		"aria-label": m,
+		"data-invalid": f || void 0,
+		children: x.map((e, t) => /* @__PURE__ */ h("input", {
+			ref: (e) => {
+				S.current[t] = e;
+			},
+			className: xt.cell,
+			type: s ? "password" : "text",
+			inputMode: o === "numeric" ? "numeric" : "text",
+			autoComplete: t === 0 ? "one-time-code" : "off",
+			name: p ? `${p}-${t}` : void 0,
+			"aria-label": `${m}, digit ${t + 1}`,
+			maxLength: 1,
+			value: e,
+			disabled: c,
+			onChange: (e) => E(t, e.target.value),
+			onKeyDown: (e) => D(t, e),
+			onPaste: (e) => O(t, e),
+			onFocus: (e) => e.target.select()
+		}, t))
+	});
+}
+Ct.displayName = "PinInput";
 //#endregion
 //#region src/components/Title/Title.module.css
-var U = {
+var wt = {
 	"level-1": "_level-1_rosk9_1",
 	"level-2": "_level-2_rosk9_6",
 	"level-3": "_level-3_rosk9_11"
-}, qe = {
+}, Tt = {
 	1: {
 		tag: "h2",
-		className: U["level-1"]
+		className: wt["level-1"]
 	},
 	2: {
 		tag: "h3",
-		className: U["level-2"]
+		className: wt["level-2"]
 	},
 	3: {
 		tag: "h4",
-		className: U["level-3"]
+		className: wt["level-3"]
 	}
 };
 //#endregion
 //#region src/components/Title/Title.tsx
-function W({ ref: e, level: t = "2", Component: n, className: r, ...i }) {
-	let { tag: a, className: o } = qe[t];
-	return /* @__PURE__ */ p(E, {
+function Et({ ref: e, level: t = "2", Component: n, className: r, ...i }) {
+	let { tag: a, className: o } = Tt[t];
+	return /* @__PURE__ */ h(N, {
 		ref: e,
 		Component: n ?? a,
-		className: h(o, r),
+		className: y(o, r),
 		...i
 	});
 }
-W.displayName = "Title";
-var G = {
+Et.displayName = "Title";
+var Dt = {
 	placeholder: "_placeholder_4t5fq_1",
 	fields: "_fields_4t5fq_13",
 	description: "_description_4t5fq_19"
 };
 //#endregion
 //#region src/components/Placeholder/Placeholder.tsx
-function Je({ ref: e, children: t, header: n, description: r, action: i, className: a, ...o }) {
-	return /* @__PURE__ */ m("section", {
+function Ot({ ref: e, children: t, header: n, description: r, action: i, className: a, ...o }) {
+	return /* @__PURE__ */ g("section", {
 		ref: e,
-		className: h(G.placeholder, a),
+		className: y(Dt.placeholder, a),
 		...o,
 		children: [
 			t,
-			n != null || r != null ? /* @__PURE__ */ m("dl", {
-				className: G.fields,
-				children: [n == null ? null : /* @__PURE__ */ p(W, {
+			n != null || r != null ? /* @__PURE__ */ g("dl", {
+				className: Dt.fields,
+				children: [n == null ? null : /* @__PURE__ */ h(Et, {
 					Component: "dt",
 					level: "3",
 					weight: "2",
 					children: n
-				}), r == null ? null : /* @__PURE__ */ p(j, {
+				}), r == null ? null : /* @__PURE__ */ h(I, {
 					Component: "dd",
-					className: G.description,
+					className: Dt.description,
 					children: r
 				})]
 			}) : null,
@@ -955,56 +1481,127 @@ function Je({ ref: e, children: t, header: n, description: r, action: i, classNa
 		]
 	});
 }
-Je.displayName = "Placeholder";
-var Ye = {
+Ot.displayName = "Placeholder";
+//#endregion
+//#region src/components/Portal/Portal.tsx
+function kt({ children: e, container: t }) {
+	let { portalContainer: n } = F(), r = t ?? n;
+	return r ? v(e, r) : null;
+}
+kt.displayName = "Portal";
+var At = {
 	track: "_track_5w1vs_1",
 	bar: "_bar_5w1vs_9"
 };
 //#endregion
 //#region src/components/Progress/Progress.tsx
-function Xe({ ref: e, value: t = 0, className: n, ...r }) {
+function jt({ ref: e, value: t = 0, className: n, ...r }) {
 	let i = Math.max(0, Math.min(100, t));
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ h("div", {
 		ref: e,
 		role: "progressbar",
 		"aria-valuemin": 0,
 		"aria-valuemax": 100,
 		"aria-valuenow": Math.round(i),
-		className: h(Ye.track, n),
+		className: y(At.track, n),
 		...r,
-		children: /* @__PURE__ */ p("div", {
-			className: Ye.bar,
+		children: /* @__PURE__ */ h("div", {
+			className: At.bar,
 			style: { width: `${i}%` }
 		})
 	});
 }
-Xe.displayName = "Progress";
-var K = {
+jt.displayName = "Progress";
+var Mt = {
 	radio: "_radio_czv9z_1",
 	input: "_input_czv9z_12",
 	dot: "_dot_czv9z_22"
 };
 //#endregion
 //#region src/components/Radio/Radio.tsx
-function Ze({ ref: e, disabled: t, className: n, style: r, ...i }) {
-	return /* @__PURE__ */ m("span", {
-		className: h(K.radio, n),
+function Nt({ ref: e, disabled: t, className: n, style: r, ...i }) {
+	return /* @__PURE__ */ g("span", {
+		className: y(Mt.radio, n),
 		style: r,
 		"data-disabled": t || void 0,
-		children: [/* @__PURE__ */ p("input", {
+		children: [/* @__PURE__ */ h("input", {
 			ref: e,
 			type: "radio",
-			className: K.input,
+			className: Mt.input,
 			disabled: t,
 			...i
-		}), /* @__PURE__ */ p("span", {
-			className: K.dot,
+		}), /* @__PURE__ */ h("span", {
+			className: Mt.dot,
 			"aria-hidden": !0
 		})]
 	});
 }
-Ze.displayName = "Radio";
-var q = {
+Nt.displayName = "Radio";
+var W = {
+	rating: "_rating_pfqty_1",
+	row: "_row_pfqty_7",
+	empty: "_empty_pfqty_12",
+	fill: "_fill_pfqty_16",
+	star: "_star_pfqty_29",
+	interactive: "_interactive_pfqty_41"
+}, Pt = /* @__PURE__ */ h("svg", {
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	"aria-hidden": !0,
+	children: /* @__PURE__ */ h("path", { d: "M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5.9 20.4l1.4-6.8L2.2 9.1l6.9-.8z" })
+});
+function Ft({ ref: e, value: t, defaultValue: n = 0, onChange: r, count: i = 5, readOnly: a = !1, disabled: o = !1, icon: s = Pt, name: c, "aria-label": l = "Rating", className: u }) {
+	let [f, p] = d(n), m = t ?? f, [_, v] = d(null), b = !a && !o, x = Math.max(0, Math.min(1, (_ ?? m) / i)) * 100, S = (e) => {
+		b && (t ?? p(e), r?.(e));
+	}, C = (e) => {
+		b && (e.key === "ArrowRight" || e.key === "ArrowUp" ? (e.preventDefault(), S(Math.min(i, Math.round(m) + 1))) : (e.key === "ArrowLeft" || e.key === "ArrowDown") && (e.preventDefault(), S(Math.max(0, Math.round(m) - 1))));
+	}, w = Array.from({ length: i }, (e, t) => t + 1), T = b ? {
+		onKeyDown: C,
+		onMouseLeave: () => v(null)
+	} : {}, E = b ? "radiogroup" : "img", D = b ? l : `${l}: ${m} out of ${i}`;
+	return /* @__PURE__ */ g("div", {
+		ref: e,
+		className: y(W.rating, b && W.interactive, u),
+		"data-disabled": o || void 0,
+		role: E,
+		"aria-label": D,
+		...T,
+		children: [/* @__PURE__ */ h("div", {
+			className: y(W.row, W.empty),
+			"aria-hidden": !b,
+			children: w.map((e) => b ? /* @__PURE__ */ h("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": Math.round(m) === e,
+				"aria-label": `${e}`,
+				tabIndex: e === (Math.round(m) || 1) ? 0 : -1,
+				name: c,
+				className: W.star,
+				onClick: () => S(e),
+				onMouseEnter: () => v(e),
+				onFocus: () => v(e),
+				onBlur: () => v(null),
+				children: s
+			}, e) : /* @__PURE__ */ h("span", {
+				className: W.star,
+				children: s
+			}, e))
+		}), /* @__PURE__ */ h("div", {
+			className: W.fill,
+			style: { clipPath: `inset(0 ${100 - x}% 0 0)` },
+			"aria-hidden": !0,
+			children: /* @__PURE__ */ h("div", {
+				className: W.row,
+				children: w.map((e) => /* @__PURE__ */ h("span", {
+					className: W.star,
+					children: s
+				}, e))
+			})
+		})]
+	});
+}
+Ft.displayName = "Rating";
+var G = {
 	body: "_body_1o4ef_1",
 	sectionBase: "_sectionBase_1o4ef_6",
 	bodyWithHeader: "_bodyWithHeader_1o4ef_6",
@@ -1019,86 +1616,153 @@ var q = {
 };
 //#endregion
 //#region src/components/Section/SectionFooter.tsx
-function Qe({ ios: e, children: t }) {
-	return e ? /* @__PURE__ */ p(P, {
-		className: q.footerText,
+function It({ ios: e, children: t }) {
+	return e ? /* @__PURE__ */ h(R, {
+		className: G.footerText,
 		children: t
-	}) : /* @__PURE__ */ p(D, {
+	}) : /* @__PURE__ */ h(P, {
 		level: "2",
-		className: q.footerText,
+		className: G.footerText,
 		children: t
 	});
 }
-function J({ ref: e, centered: t = !1, className: n, children: r, ...i }) {
-	let { platform: a } = O(), o = a === "ios";
-	return /* @__PURE__ */ p("footer", {
+function Lt({ ref: e, centered: t = !1, className: n, children: r, ...i }) {
+	let { platform: a } = F(), o = a === "ios";
+	return /* @__PURE__ */ h("footer", {
 		ref: e,
-		className: h(q.footer, o && q.footerIos, t && q.footerCentered, n),
+		className: y(G.footer, o && G.footerIos, t && G.footerCentered, n),
 		...i,
-		children: /* @__PURE__ */ p(Qe, {
+		children: /* @__PURE__ */ h(It, {
 			ios: o,
 			children: r
 		})
 	});
 }
-J.displayName = "SectionFooter";
+Lt.displayName = "SectionFooter";
 //#endregion
 //#region src/components/Section/SectionHeader.tsx
-function $e({ ios: e, large: t, children: n }) {
-	return t ? e ? /* @__PURE__ */ p(D, {
+function Rt({ ios: e, large: t, children: n }) {
+	return t ? e ? /* @__PURE__ */ h(P, {
 		Component: "h2",
 		level: "1",
 		weight: "2",
 		children: n
-	}) : /* @__PURE__ */ p(j, {
+	}) : /* @__PURE__ */ h(I, {
 		Component: "h2",
 		weight: "2",
 		children: n
-	}) : e ? /* @__PURE__ */ p(P, {
+	}) : e ? /* @__PURE__ */ h(R, {
 		Component: "h2",
 		caps: !0,
 		children: n
-	}) : /* @__PURE__ */ p(D, {
+	}) : /* @__PURE__ */ h(P, {
 		Component: "h2",
 		level: "2",
 		weight: "2",
 		children: n
 	});
 }
-function Y({ ref: e, large: t = !1, className: n, children: r, ...i }) {
-	let { platform: a } = O(), o = a === "ios";
-	return /* @__PURE__ */ p("header", {
+function zt({ ref: e, large: t = !1, className: n, children: r, ...i }) {
+	let { platform: a } = F(), o = a === "ios";
+	return /* @__PURE__ */ h("header", {
 		ref: e,
-		className: h(q.header, o && q.headerIos, t && q.headerLarge, n),
+		className: y(G.header, o && G.headerIos, t && G.headerLarge, n),
 		...i,
-		children: /* @__PURE__ */ p($e, {
+		children: /* @__PURE__ */ h(Rt, {
 			ios: o,
 			large: t,
 			children: r
 		})
 	});
 }
-Y.displayName = "SectionHeader";
+zt.displayName = "SectionHeader";
 //#endregion
 //#region src/components/Section/Section.tsx
-var et = (e) => typeof e == "string" || typeof e == "number";
-function X({ ref: n, header: i, footer: a, className: o, children: s, ...c }) {
-	let { platform: l } = O(), u = e.toArray(s);
-	return /* @__PURE__ */ m("section", {
+var Bt = (e) => typeof e == "string" || typeof e == "number";
+function Vt({ ref: n, header: i, footer: a, className: o, children: s, ...c }) {
+	let { platform: l } = F(), u = e.toArray(s);
+	return /* @__PURE__ */ g("section", {
 		ref: n,
-		className: h(l === "ios" ? q.sectionIos : q.sectionBase, o),
+		className: y(l === "ios" ? G.sectionIos : G.sectionBase, o),
 		...c,
-		children: [/* @__PURE__ */ m("div", {
-			className: q.bodyWithHeader,
-			children: [et(i) ? /* @__PURE__ */ p(Y, { children: i }) : i, /* @__PURE__ */ p("div", {
-				className: q.body,
-				children: u.map((e, n) => /* @__PURE__ */ m(t, { children: [e, n < u.length - 1 ? /* @__PURE__ */ p(z, {}) : null] }, r(e) ? e.key : n))
+		children: [/* @__PURE__ */ g("div", {
+			className: G.bodyWithHeader,
+			children: [Bt(i) ? /* @__PURE__ */ h(zt, { children: i }) : i, /* @__PURE__ */ h("div", {
+				className: G.body,
+				children: u.map((e, n) => /* @__PURE__ */ g(t, { children: [e, n < u.length - 1 ? /* @__PURE__ */ h(et, {}) : null] }, r(e) ? e.key : n))
 			})]
-		}), et(a) ? /* @__PURE__ */ p(J, { children: a }) : a]
+		}), Bt(a) ? /* @__PURE__ */ h(Lt, { children: a }) : a]
+	});
+}
+Vt.displayName = "Section", Vt.Header = zt, Vt.Footer = Lt;
+var Ht = {
+	control: "_control_1uo8p_1",
+	pill: "_pill_1uo8p_10",
+	item: "_item_1uo8p_28"
+};
+//#endregion
+//#region src/components/SegmentedControl/SegmentedControl.tsx
+function Ut({ ref: e, className: t, children: n, onKeyDown: r, ...a }) {
+	let s = u(null), [l, f] = d(null), p = i(() => {
+		let e = s.current;
+		if (!e) return;
+		let t = e.querySelector("[role=\"radio\"][data-selected]"), n = t ? {
+			left: t.offsetLeft,
+			width: t.offsetWidth
+		} : null;
+		f((e) => e === n || e && n && e.left === n.left && e.width === n.width ? e : n);
+	}, []);
+	c(p), o(() => {
+		let e = s.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(p);
+		return t.observe(e), () => t.disconnect();
+	}, [p]);
+	let m = i((t) => {
+		s.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
+	}, [e]);
+	return /* @__PURE__ */ g("div", {
+		ref: m,
+		role: "radiogroup",
+		className: y(Ht.control, t),
+		onKeyDown: (e) => {
+			if (r?.(e), e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+			let t = s.current;
+			if (!t) return;
+			let n = Array.from(t.querySelectorAll("[role=\"radio\"]:not(:disabled)")), i = n.indexOf(document.activeElement);
+			if (i < 0) return;
+			e.preventDefault();
+			let a = n[(i + (e.key === "ArrowRight" ? 1 : -1) + n.length) % n.length];
+			a.focus(), a.click();
+		},
+		...a,
+		children: [/* @__PURE__ */ h("div", {
+			className: Ht.pill,
+			style: l ? {
+				transform: `translateX(${l.left}px)`,
+				width: l.width
+			} : { opacity: 0 },
+			"aria-hidden": !0
+		}), n]
 	});
 }
-X.displayName = "Section", X.Header = Y, X.Footer = J;
-var Z = {
+Ut.displayName = "SegmentedControl";
+//#endregion
+//#region src/components/SegmentedControl/SegmentedControlItem.tsx
+function Wt({ ref: e, selected: t = !1, className: n, ...r }) {
+	return /* @__PURE__ */ h("button", {
+		ref: e,
+		type: "button",
+		role: "radio",
+		"aria-checked": t,
+		tabIndex: t ? 0 : -1,
+		"data-selected": t || void 0,
+		className: y(Ht.item, n),
+		...r
+	});
+}
+Wt.displayName = "SegmentedControlItem";
+var K = {
 	base: "_base_yxki5_1",
 	row: "_row_yxki5_7",
 	ios: "_ios_yxki5_17",
@@ -1111,55 +1775,593 @@ var Z = {
 };
 //#endregion
 //#region src/components/Select/Select.tsx
-function tt({ ref: e, header: t, status: n, disabled: r, className: i, onFocus: a, onBlur: o, children: s, ...c }) {
-	let { platform: u } = O(), d = u === "ios", [f, g] = l(!1), _ = n ?? (f ? "focused" : "default"), v = d ? j : D;
-	return /* @__PURE__ */ m("div", {
-		className: h(d ? Z.ios : Z.base, _ === "error" && Z.error, _ === "focused" && Z.focused, r && Z.disabled, i),
+function Gt({ ref: e, header: t, status: n, disabled: r, className: i, onFocus: a, onBlur: o, children: s, ...c }) {
+	let { platform: l } = F(), u = l === "ios", [f, p] = d(!1), m = n ?? (f ? "focused" : "default"), _ = u ? I : P;
+	return /* @__PURE__ */ g("div", {
+		className: y(u ? K.ios : K.base, m === "error" && K.error, m === "focused" && K.focused, r && K.disabled, i),
 		"aria-disabled": r || void 0,
-		children: [/* @__PURE__ */ m("div", {
-			className: Z.row,
-			children: [/* @__PURE__ */ p(v, {
+		children: [/* @__PURE__ */ g("div", {
+			className: K.row,
+			children: [/* @__PURE__ */ h(_, {
 				ref: e,
 				Component: "select",
-				className: Z.select,
+				className: K.select,
 				disabled: r,
 				onFocus: (e) => {
-					r || g(!0), a?.(e);
+					r || p(!0), a?.(e);
 				},
 				onBlur: (e) => {
-					g(!1), o?.(e);
+					p(!1), o?.(e);
 				},
 				...c,
 				children: s
-			}), /* @__PURE__ */ p("span", {
+			}), /* @__PURE__ */ h("span", {
 				"aria-hidden": !0,
-				className: Z.chevron
+				className: K.chevron
 			})]
-		}), t != null && !d ? /* @__PURE__ */ p("span", {
-			className: Z.header,
+		}), t != null && !u ? /* @__PURE__ */ h("span", {
+			className: K.header,
 			children: t
 		}) : null]
 	});
 }
-tt.displayName = "Select";
-var nt = {
+Gt.displayName = "Select";
+//#endregion
+//#region src/shared/lib/useReducedMotion.ts
+var Kt = "(prefers-reduced-motion: reduce)";
+function qt(e) {
+	if (typeof window > "u" || !window.matchMedia) return () => {};
+	let t = window.matchMedia(Kt);
+	return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+}
+function Jt() {
+	return typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia(Kt).matches;
+}
+function Yt() {
+	return f(qt, Jt, () => !1);
+}
+var q = {
+	backdrop: "_backdrop_a10cl_1",
+	"backdrop--contained": "_backdrop--contained_a10cl_12",
+	"backdrop--visible": "_backdrop--visible_a10cl_16",
+	panel: "_panel_a10cl_20",
+	"panel--visible": "_panel--visible_a10cl_37",
+	grip: "_grip_a10cl_67",
+	handle: "_handle_a10cl_76",
+	header: "_header_a10cl_84",
+	title: "_title_a10cl_95",
+	close: "_close_a10cl_100",
+	body: "_body_a10cl_105"
+}, Xt = 340, Zt = 6, Qt = 96, $t = .5;
+function en(e) {
+	return Array.from(e.querySelectorAll("a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])")).filter((e) => e.offsetParent !== null || e === document.activeElement);
+}
+function tn({ ref: e, open: t, onClose: n, header: r, children: a, dismissable: s = !0, closeLabel: c = "Close", className: l, container: f }) {
+	let p = Yt(), m = f != null, [_, v] = d(t), [b, x] = d(!1), S = u(null), C = u(null), w = u({
+		id: -1,
+		active: !1,
+		startY: 0,
+		lastY: 0,
+		lastT: 0,
+		velocity: 0
+	});
+	o(() => {
+		if (t) {
+			v(!0);
+			return;
+		}
+		if (x(!1), p) {
+			v(!1);
+			return;
+		}
+		let e = setTimeout(() => v(!1), Xt);
+		return () => clearTimeout(e);
+	}, [t, p]), o(() => {
+		if (!_ || !t) return;
+		let e = S.current;
+		e && (e.offsetHeight, x(!0));
+	}, [_, t]), o(() => {
+		if (!_) return;
+		C.current = document.activeElement;
+		let { body: e, documentElement: t } = document, n = {
+			overflow: e.style.overflow,
+			paddingRight: e.style.paddingRight
+		};
+		if (!m) {
+			let n = window.innerWidth - t.clientWidth;
+			e.style.overflow = "hidden", n > 0 && (e.style.paddingRight = `${n}px`);
+		}
+		let r = requestAnimationFrame(() => S.current?.focus({ preventScroll: !0 }));
+		return () => {
+			cancelAnimationFrame(r), e.style.overflow = n.overflow, e.style.paddingRight = n.paddingRight, C.current?.focus?.({ preventScroll: !0 });
+		};
+	}, [_, m]), o(() => {
+		if (!_) return;
+		let e = (e) => {
+			e.key === "Escape" && s && (e.stopPropagation(), n());
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		_,
+		s,
+		n
+	]);
+	let T = i((e) => {
+		if (e.key !== "Tab" || !S.current) return;
+		let t = en(S.current);
+		if (t.length === 0) {
+			e.preventDefault(), S.current.focus();
+			return;
+		}
+		let n = t[0], r = t[t.length - 1], i = document.activeElement;
+		e.shiftKey && (i === n || i === S.current) ? (e.preventDefault(), r.focus()) : !e.shiftKey && i === r && (e.preventDefault(), n.focus());
+	}, []), E = (e) => {
+		!s || e.button !== 0 || p || e.target.closest("button") || (w.current = {
+			id: e.pointerId,
+			active: !1,
+			startY: e.clientY,
+			lastY: e.clientY,
+			lastT: e.timeStamp,
+			velocity: 0
+		});
+	}, D = (e) => {
+		let t = w.current;
+		if (t.id !== e.pointerId) return;
+		let n = e.clientY - t.startY;
+		if (!t.active) {
+			if (n < Zt) return;
+			t.active = !0, e.currentTarget.setPointerCapture(e.pointerId), S.current && (S.current.style.transition = "none");
+		}
+		let r = e.timeStamp - t.lastT;
+		if (r >= 1) {
+			let n = (e.clientY - t.lastY) / r;
+			t.velocity = t.velocity * .6 + n * .4, t.lastY = e.clientY, t.lastT = e.timeStamp;
+		}
+		S.current && (S.current.style.transform = `translateY(${Math.max(0, n)}px)`);
+	}, O = (e) => {
+		let t = w.current;
+		if (t.id !== e.pointerId || (w.current = {
+			...t,
+			id: -1,
+			active: !1
+		}, !t.active)) return;
+		e.currentTarget.releasePointerCapture?.(e.pointerId);
+		let r = S.current, i = e.clientY - t.startY > Qt || t.velocity > $t;
+		r && (r.style.transition = "", r.getBoundingClientRect(), r.style.transform = ""), i && (x(!1), n());
+	};
+	if (!_) return null;
+	let k = b && t;
+	return /* @__PURE__ */ h(kt, {
+		container: f,
+		children: /* @__PURE__ */ h("div", {
+			ref: e,
+			className: y(q.backdrop, m && q["backdrop--contained"], k && q["backdrop--visible"]),
+			onPointerDown: (e) => {
+				e.target === e.currentTarget && s && n();
+			},
+			children: /* @__PURE__ */ g("div", {
+				ref: S,
+				role: "dialog",
+				"aria-modal": "true",
+				tabIndex: -1,
+				className: y(q.panel, k && q["panel--visible"], l),
+				onKeyDown: T,
+				children: [/* @__PURE__ */ g("div", {
+					className: q.grip,
+					onPointerDown: E,
+					onPointerMove: D,
+					onPointerUp: O,
+					onPointerCancel: O,
+					children: [s ? /* @__PURE__ */ h("span", {
+						className: q.handle,
+						"aria-hidden": !0
+					}) : null, r == null ? null : /* @__PURE__ */ g("div", {
+						className: q.header,
+						children: [/* @__PURE__ */ h("div", {
+							className: q.title,
+							children: r
+						}), s ? /* @__PURE__ */ h(ct, {
+							mode: "gray",
+							size: "s",
+							circle: !0,
+							className: q.close,
+							"aria-label": c,
+							onClick: n,
+							children: /* @__PURE__ */ h("svg", {
+								width: "16",
+								height: "16",
+								viewBox: "0 0 16 16",
+								"aria-hidden": !0,
+								children: /* @__PURE__ */ h("path", {
+									d: "M4 4l8 8M12 4l-8 8",
+									stroke: "currentColor",
+									strokeWidth: "1.6",
+									strokeLinecap: "round"
+								})
+							})
+						}) : null]
+					})]
+				}), /* @__PURE__ */ h("div", {
+					className: q.body,
+					children: a
+				})]
+			})
+		})
+	});
+}
+tn.displayName = "Sheet";
+var nn = {
 	skeleton: "_skeleton_197j4_1",
 	visible: "_visible_197j4_5",
 	"tgui-skeleton": "_tgui-skeleton_197j4_1"
 };
 //#endregion
 //#region src/components/Skeleton/Skeleton.tsx
-function rt({ ref: e, visible: t = !0, className: n, children: r, ...i }) {
-	return /* @__PURE__ */ p("div", {
+function rn({ ref: e, visible: t = !0, className: n, children: r, ...i }) {
+	return /* @__PURE__ */ h("div", {
 		ref: e,
 		"aria-hidden": t || void 0,
-		className: h(nt.skeleton, t && nt.visible, n),
+		className: y(nn.skeleton, t && nn.visible, n),
 		...i,
 		children: r
 	});
 }
-rt.displayName = "Skeleton";
-var Q = {
+rn.displayName = "Skeleton";
+var J = {
+	slider: "_slider_avyl5_1",
+	track: "_track_avyl5_8",
+	rail: "_rail_avyl5_16",
+	fill: "_fill_avyl5_25",
+	input: "_input_avyl5_39",
+	side: "_side_avyl5_98"
+};
+//#endregion
+//#region src/components/Slider/Slider.tsx
+function an({ ref: e, value: t, defaultValue: n, onChange: r, min: i = 0, max: a = 100, step: o = 1, before: s, after: c, disabled: l, className: u, ...f }) {
+	let [p, m] = d(n ?? i), _ = t ?? p, v = a > i ? (_ - i) / (a - i) * 100 : 0;
+	return /* @__PURE__ */ g("div", {
+		className: y(J.slider, u),
+		"data-disabled": l || void 0,
+		children: [
+			s == null ? null : /* @__PURE__ */ h("span", {
+				className: J.side,
+				children: s
+			}),
+			/* @__PURE__ */ g("span", {
+				className: J.track,
+				children: [
+					/* @__PURE__ */ h("span", { className: J.rail }),
+					/* @__PURE__ */ h("span", {
+						className: J.fill,
+						style: { width: `${Math.max(0, Math.min(100, v))}%` }
+					}),
+					/* @__PURE__ */ h("input", {
+						ref: e,
+						type: "range",
+						className: J.input,
+						min: i,
+						max: a,
+						step: o,
+						value: _,
+						disabled: l,
+						onChange: (e) => {
+							let n = Number(e.target.value);
+							t ?? m(n), r?.(n);
+						},
+						...f
+					})
+				]
+			}),
+			c == null ? null : /* @__PURE__ */ h("span", {
+				className: J.side,
+				children: c
+			})
+		]
+	});
+}
+an.displayName = "Slider";
+//#endregion
+//#region src/components/Snackbar/context.ts
+var on = n(null);
+on.displayName = "SnackbarContext";
+var Y = {
+	viewport: "_viewport_1rbuf_1",
+	snackbar: "_snackbar_1rbuf_19",
+	"snackbar--visible": "_snackbar--visible_1rbuf_37",
+	"snackbar--dragging": "_snackbar--dragging_1rbuf_50",
+	before: "_before_1rbuf_54",
+	body: "_body_1rbuf_60",
+	message: "_message_1rbuf_69",
+	description: "_description_1rbuf_74",
+	action: "_action_1rbuf_80"
+}, sn = 240, cn = 80;
+function ln({ children: e, duration: t = 4e3, max: n = 3 }) {
+	let [r, a] = d([]), o = u(0), s = i((e) => {
+		a((t) => t.filter((t) => t.id !== e));
+	}, []), c = i((e) => {
+		let t = `snackbar-${o.current++}`;
+		return a((r) => [...r, {
+			...e,
+			id: t
+		}].slice(-n)), t;
+	}, [n]), f = l(() => ({
+		show: c,
+		dismiss: s
+	}), [c, s]);
+	return /* @__PURE__ */ g(on.Provider, {
+		value: f,
+		children: [e, r.length > 0 ? /* @__PURE__ */ h(kt, { children: /* @__PURE__ */ h("div", {
+			className: Y.viewport,
+			children: r.map((e) => /* @__PURE__ */ h(un, {
+				item: e,
+				defaultDuration: t,
+				onDismiss: () => s(e.id)
+			}, e.id))
+		}) }) : null]
+	});
+}
+ln.displayName = "SnackbarProvider";
+function un({ item: e, defaultDuration: t, onDismiss: n }) {
+	let r = Yt(), [a, s] = d(!1), [l, f] = d(!1), p = u(null), m = e.duration ?? t, _ = u(m), v = u(0), b = u(null), x = u({
+		id: -1,
+		startX: 0,
+		active: !1
+	});
+	c(() => {
+		let e = p.current;
+		e && e.offsetHeight, s(!0);
+	}, []);
+	let S = i(() => {
+		if (f(!0), s(!1), r) {
+			n();
+			return;
+		}
+		let e = setTimeout(n, sn);
+		return () => clearTimeout(e);
+	}, [r, n]), C = i(() => {
+		b.current && (clearTimeout(b.current), b.current = null, _.current -= Date.now() - v.current);
+	}, []), w = i(() => {
+		m <= 0 || l || b.current || (v.current = Date.now(), b.current = setTimeout(() => S(), Math.max(0, _.current)));
+	}, [
+		m,
+		l,
+		S
+	]);
+	o(() => (w(), C), [w, C]);
+	let T = (e) => {
+		e.button === 0 && (x.current = {
+			id: e.pointerId,
+			startX: e.clientX,
+			active: !1
+		}, C());
+	}, E = (e) => {
+		let t = x.current;
+		if (t.id !== e.pointerId) return;
+		let n = e.clientX - t.startX;
+		if (!t.active) {
+			if (Math.abs(n) < 6) return;
+			t.active = !0, e.currentTarget.setPointerCapture(e.pointerId), p.current?.classList.add(Y["snackbar--dragging"]);
+		}
+		p.current && (p.current.style.transform = `translateX(${n}px)`, p.current.style.opacity = `${Math.max(0, 1 - Math.abs(n) / 240)}`);
+	}, D = (e) => {
+		let t = x.current;
+		if (t.id !== e.pointerId) return;
+		x.current = {
+			id: -1,
+			startX: 0,
+			active: !1
+		};
+		let i = p.current;
+		if (!i) return;
+		i.classList.remove(Y["snackbar--dragging"]);
+		let a = e.clientX - t.startX;
+		if (t.active && Math.abs(a) > cn) {
+			if (r) {
+				n();
+				return;
+			}
+			i.style.transition = "transform 0.2s ease-out, opacity 0.2s ease-out", i.style.transform = `translateX(${Math.sign(a) * (window.innerWidth || 400)}px)`, i.style.opacity = "0", setTimeout(n, 190);
+			return;
+		}
+		i.style.transform = "", i.style.opacity = "", w();
+	};
+	return /* @__PURE__ */ g("div", {
+		ref: p,
+		className: y(Y.snackbar, a && !l && Y["snackbar--visible"]),
+		role: "status",
+		onMouseEnter: C,
+		onMouseLeave: w,
+		onFocus: C,
+		onBlur: w,
+		onPointerDown: T,
+		onPointerMove: E,
+		onPointerUp: D,
+		onPointerCancel: D,
+		children: [
+			e.before == null ? null : /* @__PURE__ */ h("span", {
+				className: Y.before,
+				children: e.before
+			}),
+			/* @__PURE__ */ g("div", {
+				className: Y.body,
+				children: [/* @__PURE__ */ h("span", {
+					className: Y.message,
+					children: e.message
+				}), e.description == null ? null : /* @__PURE__ */ h("span", {
+					className: Y.description,
+					children: e.description
+				})]
+			}),
+			e.action == null ? null : /* @__PURE__ */ h("button", {
+				type: "button",
+				className: Y.action,
+				onClick: () => {
+					e.action?.onClick(), S();
+				},
+				children: e.action.label
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Snackbar/useSnackbar.ts
+function dn() {
+	let e = a(on);
+	if (!e) throw Error("useSnackbar must be used within a <SnackbarProvider>.");
+	return e;
+}
+//#endregion
+//#region src/components/Spoiler/particles.ts
+var fn = Math.PI * 2, pn = (e) => Math.max(0, Math.min(1, e)), mn = (e) => 1 - (1 - e) ** 3;
+function hn(e, t, n, r) {
+	let i = Math.max(t, e - n);
+	return r < t ? Math.max(0, r / t) : r > i ? Math.max(0, 1 - (r - i) / (e - i)) : 1;
+}
+function gn(e, t, n) {
+	let r = Math.round(Math.min(1800, Math.max(12, n * e * t))), i = [];
+	for (let n = 0; n < r; n += 1) {
+		let n = 2 + Math.random() * 10, r = Math.random() * fn, a = .3 + Math.random() * 1.2, o = Math.random();
+		i.push({
+			x0: Math.random() * e,
+			y0: Math.random() * t,
+			vx: n * Math.cos(r),
+			vy: n * Math.sin(r),
+			life: a,
+			respawn: o,
+			phase: Math.random() * (a + o),
+			size: 1 + Math.random() * .7,
+			square: Math.random() > .5
+		});
+	}
+	return i;
+}
+function _n(e, t, n, r, i, a, o, s, c) {
+	e.clearRect(0, 0, t, n);
+	let l = t / r, u = n / r, [d, f, p] = a, m = i.length;
+	for (let t = 0; t < m; t += 1) {
+		let n = i[t], a = n.life + n.respawn;
+		if (s != null && Math.floor((o + n.phase) / a) > Math.floor((s + n.phase) / a)) continue;
+		let h = (o + n.phase) % a;
+		if (h >= n.life) continue;
+		let g = (n.x0 + n.vx * h) % l;
+		g < 0 && (g += l);
+		let _ = (n.y0 + n.vy * h) % u;
+		_ < 0 && (_ += u);
+		let v = hn(n.life, .15, .3, h), y = v * (.45 + .55 * (1 - h / n.life));
+		if (s != null && c > 0) {
+			let e = pn((o - (s + 2 / 3 * c * t / m)) / (1 / 3 * c));
+			y *= mn(1 - e);
+		}
+		if (y <= .01) continue;
+		let b = Math.max(.5, n.size * v) * r;
+		e.fillStyle = `rgba(${d}, ${f}, ${p}, ${y.toFixed(3)})`, e.beginPath(), n.square ? e.rect(g * r, _ * r, b, b) : e.arc(g * r, _ * r, b / 2, 0, fn), e.fill();
+	}
+}
+var vn = {
+	spoiler: "_spoiler_15ysm_1",
+	revealed: "_revealed_15ysm_15",
+	canvas: "_canvas_15ysm_20",
+	content: "_content_15ysm_67"
+}, yn = .5;
+function bn(e) {
+	let t = e.match(/-?\d*\.?\d+/g);
+	return !t || t.length < 3 ? [
+		128,
+		128,
+		128
+	] : [
+		Number(t[0]),
+		Number(t[1]),
+		Number(t[2])
+	];
+}
+function xn({ ref: e, revealed: t, defaultRevealed: n = !1, onRevealedChange: r, revealOn: i = "click", accentColor: a, density: s = .1, fps: c = 40, revealLabel: l = "Reveal hidden text", className: f, style: p, children: m, onClick: _, onKeyDown: v, onMouseEnter: b, onMouseLeave: x, ...S }) {
+	let [C, w] = d(n), T = t ?? C, E = Yt(), D = i === "click", O = u(null), k = u(null), A = u([]), j = u([
+		128,
+		128,
+		128
+	]), ee = u(!0), te = u(T ? 0 : null), M = u(0), [ne, re] = d(!T), ie = (e) => {
+		e ? te.current = M.current : (te.current = null, re(!0)), t ?? w(e), r?.(e);
+	};
+	o(() => {
+		if (!ne) return;
+		let e = O.current, t = k.current, n = t?.getContext("2d");
+		if (!e || !t || !n) return;
+		let r = Math.min(2, window.devicePixelRatio || 1), i = () => {
+			let n = t.getBoundingClientRect(), i = Math.max(1, Math.round(n.width * r)), o = Math.max(1, Math.round(n.height * r));
+			(t.width !== i || t.height !== o) && (t.width = i, t.height = o, A.current = gn(i / r, o / r, s)), j.current = bn(a ?? getComputedStyle(e).color);
+		};
+		if (i(), E) {
+			_n(n, t.width, t.height, r, A.current, j.current, .6, null, 0);
+			return;
+		}
+		let o = 0, l = 0, u = -1, d = 1e3 / Math.max(8, c), f = (e) => {
+			l ||= e;
+			let i = (e - l) / 1e3;
+			M.current = i;
+			let a = te.current;
+			if (a != null && i > a + yn + .06) {
+				n.clearRect(0, 0, t.width, t.height), re(!1);
+				return;
+			}
+			o = requestAnimationFrame(f), !(!ee.current || e - u < d) && (u = e, _n(n, t.width, t.height, r, A.current, j.current, i, a, yn));
+		};
+		o = requestAnimationFrame(f);
+		let p = typeof ResizeObserver < "u" ? new ResizeObserver(i) : null;
+		p?.observe(e);
+		let m = typeof IntersectionObserver < "u" ? new IntersectionObserver(([e]) => {
+			ee.current = e.isIntersecting;
+		}) : null;
+		return m?.observe(e), () => {
+			cancelAnimationFrame(o), p?.disconnect(), m?.disconnect();
+		};
+	}, [
+		ne,
+		E,
+		s,
+		c,
+		a
+	]);
+	let ae = () => ie(!T);
+	return /* @__PURE__ */ g("span", {
+		ref: (t) => {
+			O.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
+		},
+		className: y(vn.spoiler, T && vn.revealed, f),
+		role: "button",
+		tabIndex: 0,
+		"aria-pressed": T,
+		"aria-label": T ? void 0 : l,
+		style: {
+			...p,
+			"--tgui--spoiler--p": +!!T
+		},
+		onClick: (e) => {
+			_?.(e), D && ae();
+		},
+		onKeyDown: (e) => {
+			v?.(e), (e.key === "Enter" || e.key === " ") && (e.preventDefault(), ae());
+		},
+		onMouseEnter: (e) => {
+			b?.(e), !D && !T && ie(!0);
+		},
+		onMouseLeave: (e) => {
+			x?.(e), !D && T && ie(!1);
+		},
+		...S,
+		children: [/* @__PURE__ */ h("span", {
+			className: vn.content,
+			"aria-hidden": !T,
+			children: m
+		}), ne ? /* @__PURE__ */ h("canvas", {
+			ref: k,
+			className: vn.canvas,
+			"aria-hidden": !0
+		}) : null]
+	});
+}
+xn.displayName = "Spoiler";
+var Sn = {
 	switch: "_switch_s4zd1_1",
 	input: "_input_s4zd1_18",
 	control: "_control_s4zd1_28",
@@ -1168,26 +2370,26 @@ var Q = {
 };
 //#endregion
 //#region src/components/Switch/Switch.tsx
-function it({ ref: e, disabled: t, className: n, style: r, ...i }) {
-	let { platform: a } = O();
-	return /* @__PURE__ */ m("label", {
-		className: h(Q.switch, a === "ios" ? Q.ios : Q.base, n),
+function Cn({ ref: e, disabled: t, className: n, style: r, ...i }) {
+	let { platform: a } = F();
+	return /* @__PURE__ */ g("label", {
+		className: y(Sn.switch, a === "ios" ? Sn.ios : Sn.base, n),
 		style: r,
 		"data-disabled": t || void 0,
-		children: [/* @__PURE__ */ p("input", {
+		children: [/* @__PURE__ */ h("input", {
 			ref: e,
 			type: "checkbox",
-			className: Q.input,
+			className: Sn.input,
 			disabled: t,
 			...i
-		}), /* @__PURE__ */ p("span", {
+		}), /* @__PURE__ */ h("span", {
 			"aria-hidden": !0,
-			className: Q.control
+			className: Sn.control
 		})]
 	});
 }
-it.displayName = "Switch";
-var $ = {
+Cn.displayName = "Switch";
+var X = {
 	bar: "_bar_muj3n_1",
 	barIos: "_barIos_muj3n_10",
 	item: "_item_muj3n_15",
@@ -1198,86 +2400,181 @@ var $ = {
 };
 //#endregion
 //#region src/components/TabBar/TabBarItem.tsx
-function at({ ref: e, selected: t, text: n, children: r, className: i, ...a }) {
-	let { platform: o } = O(), s = o === "ios";
-	return /* @__PURE__ */ m(A, {
+function wn({ ref: e, selected: t, text: n, children: r, className: i, ...a }) {
+	let { platform: o } = F(), s = o === "ios";
+	return /* @__PURE__ */ g(be, {
 		ref: e,
 		Component: "button",
 		interactiveAnimation: "opacity",
 		"aria-current": t ? "page" : void 0,
-		className: h($.item, s && $.itemIos, t && $.itemSelected, i),
+		className: y(X.item, s && X.itemIos, t && X.itemSelected, i),
 		...a,
-		children: [r == null ? null : /* @__PURE__ */ p("span", {
-			className: $.icon,
+		children: [r == null ? null : /* @__PURE__ */ h("span", {
+			className: X.icon,
 			children: r
-		}), n == null ? null : /* @__PURE__ */ p(P, {
-			className: $.text,
+		}), n == null ? null : /* @__PURE__ */ h(R, {
+			className: X.text,
 			weight: "2",
 			level: s ? "2" : "1",
 			children: n
 		})]
 	});
 }
-at.displayName = "TabBarItem";
+wn.displayName = "TabBarItem";
 //#endregion
 //#region src/components/TabBar/TabBar.tsx
-function ot({ ref: e, className: t, children: n, ...r }) {
-	let { platform: i } = O();
-	return /* @__PURE__ */ p("nav", {
+function Tn({ ref: e, className: t, children: n, ...r }) {
+	let { platform: i } = F();
+	return /* @__PURE__ */ h("nav", {
 		ref: e,
-		className: h($.bar, i === "ios" && $.barIos, t),
+		className: y(X.bar, i === "ios" && X.barIos, t),
 		...r,
 		children: n
 	});
 }
-ot.displayName = "TabBar", ot.Item = at;
-var st = { field: "_field_1crg0_1" };
+Tn.displayName = "TabBar", Tn.Item = wn;
+var En = { field: "_field_1crg0_1" };
 //#endregion
 //#region src/components/Textarea/Textarea.tsx
-function ct({ ref: e, header: t, status: n, autoGrow: r = !1, maxRows: a, rows: s = 3, disabled: u, className: d, value: f, defaultValue: m, onFocus: h, onBlur: g, onChange: _, ...v }) {
-	let { platform: y } = O(), b = y === "ios", [ee, x] = l(!1), S = n ?? (ee ? "focused" : "default"), te = b ? j : D, C = c(null), w = i((t) => {
-		C.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
-	}, [e]), T = i(() => {
-		let e = C.current;
+function Dn({ ref: e, header: t, status: n, autoGrow: r = !1, maxRows: a, rows: s = 3, disabled: c, className: l, value: f, defaultValue: p, onFocus: m, onBlur: g, onChange: _, ...v }) {
+	let { platform: y } = F(), b = y === "ios", [x, S] = d(!1), C = n ?? (x ? "focused" : "default"), w = b ? I : P, T = u(null), E = i((t) => {
+		T.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
+	}, [e]), D = i(() => {
+		let e = T.current;
 		if (!e || !r) return;
 		e.style.height = "auto";
 		let t = getComputedStyle(e), n = Number.parseFloat(t.lineHeight) || 20, i = a ? n * a : Infinity;
 		e.style.height = `${Math.min(e.scrollHeight, i)}px`, e.style.overflowY = e.scrollHeight > i ? "auto" : "hidden";
 	}, [r, a]);
-	return o(T, [
-		T,
+	return o(D, [
+		D,
 		f,
-		m
-	]), /* @__PURE__ */ p(H, {
+		p
+	]), /* @__PURE__ */ h(ft, {
 		ios: b,
-		status: S,
-		disabled: u,
+		status: C,
+		disabled: c,
 		alignStart: !0,
 		header: t,
-		className: d,
-		children: /* @__PURE__ */ p(te, {
-			ref: w,
+		className: l,
+		children: /* @__PURE__ */ h(w, {
+			ref: E,
 			Component: "textarea",
-			className: st.field,
+			className: En.field,
 			rows: s,
-			disabled: u,
+			disabled: c,
 			value: f,
-			defaultValue: m,
+			defaultValue: p,
 			onFocus: (e) => {
-				u || x(!0), h?.(e);
+				c || S(!0), m?.(e);
 			},
 			onBlur: (e) => {
-				x(!1), g?.(e);
+				S(!1), g?.(e);
 			},
 			onChange: (e) => {
-				T(), _?.(e);
+				D(), _?.(e);
 			},
 			...v
 		})
 	});
 }
-ct.displayName = "Textarea";
+Dn.displayName = "Textarea";
+var On = {
+	trigger: "_trigger_83ipz_1",
+	tooltip: "_tooltip_83ipz_5",
+	"tooltip--visible": "_tooltip--visible_83ipz_25",
+	arrow: "_arrow_83ipz_44"
+}, Z = 8, Q = 8, $ = (e, t, n) => Math.max(t, Math.min(n, e));
+function kn(e, t, n) {
+	let r = window.innerWidth, i = window.innerHeight, a = n;
+	a === "top" && e.top - t.height - Z < Q ? a = "bottom" : a === "bottom" && e.bottom + t.height + Z > i - Q ? a = "top" : a === "left" && e.left - t.width - Z < Q ? a = "right" : a === "right" && e.right + t.width + Z > r - Q && (a = "left");
+	let o = 0, s = 0;
+	a === "top" || a === "bottom" ? (s = e.left + e.width / 2 - t.width / 2, o = a === "top" ? e.top - t.height - Z : e.bottom + Z) : (o = e.top + e.height / 2 - t.height / 2, s = a === "left" ? e.left - t.width - Z : e.right + Z), s = $(s, Q, r - t.width - Q), o = $(o, Q, i - t.height - Q);
+	let c = e.left + e.width / 2 - s, l = e.top + e.height / 2 - o, u = {};
+	return a === "top" ? (u.left = $(c, 10, t.width - 10) - 4, u.bottom = -4) : a === "bottom" ? (u.left = $(c, 10, t.width - 10) - 4, u.top = -4) : a === "left" ? (u.top = $(l, 10, t.height - 10) - 4, u.right = -4) : (u.top = $(l, 10, t.height - 10) - 4, u.left = -4), {
+		top: o,
+		left: s,
+		placement: a,
+		originX: $(c, 0, t.width),
+		originY: $(l, 0, t.height),
+		arrow: u
+	};
+}
+function An({ ref: e, children: t, content: n, placement: r = "top", open: a, onOpenChange: l, className: f }) {
+	let [p, _] = d(!1), v = a ?? p, b = u(null), x = u(null), S = u(null), [C, w] = d(null), [T, E] = d(!1), D = s(), O = i((e) => {
+		a ?? _(e), l?.(e);
+	}, [a, l]), k = i(() => {
+		let e = b.current, t = x.current;
+		!e || !t || w(kn(e.getBoundingClientRect(), t.getBoundingClientRect(), r));
+	}, [r]);
+	c(() => {
+		if (!v) {
+			E(!1), w(null);
+			return;
+		}
+		k();
+	}, [v, k]), o(() => {
+		if (!v || !C) return;
+		let e = requestAnimationFrame(() => E(!0)), t = () => O(!1);
+		return window.addEventListener("scroll", t, !0), window.addEventListener("resize", k), () => {
+			cancelAnimationFrame(e), window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", k);
+		};
+	}, [
+		v,
+		C,
+		k,
+		O
+	]), o(() => {
+		if (!v) return;
+		let e = (e) => {
+			e.key === "Escape" && O(!1);
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [v, O]);
+	let A = i(() => {
+		S.current &&= (clearTimeout(S.current), null);
+	}, []);
+	return o(() => A, [A]), /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("span", {
+		ref: (t) => {
+			b.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
+		},
+		className: y(On.trigger, f),
+		"aria-describedby": v ? D : void 0,
+		onPointerEnter: (e) => {
+			e.pointerType !== "touch" && O(!0);
+		},
+		onPointerLeave: (e) => {
+			e.pointerType !== "touch" && O(!1), A();
+		},
+		onPointerDown: (e) => {
+			e.pointerType === "touch" && (S.current = setTimeout(() => O(!0), 450));
+		},
+		onPointerUp: A,
+		onPointerCancel: A,
+		onFocus: () => O(!0),
+		onBlur: () => O(!1),
+		children: t
+	}), v ? /* @__PURE__ */ h(kt, { children: /* @__PURE__ */ g("div", {
+		ref: x,
+		id: D,
+		role: "tooltip",
+		className: y(On.tooltip, T && On["tooltip--visible"]),
+		style: C ? {
+			top: C.top,
+			left: C.left,
+			"--tgui--tooltip--origin-x": `${C.originX}px`,
+			"--tgui--tooltip--origin-y": `${C.originY}px`
+		} : void 0,
+		"data-placement": C?.placement,
+		children: [n, C ? /* @__PURE__ */ h("span", {
+			className: On.arrow,
+			style: C.arrow,
+			"aria-hidden": !0
+		}) : null]
+	}) }) : null] });
+}
+An.displayName = "Tooltip";
 //#endregion
-export { y as Avatar, x as Badge, Se as Button, P as Caption, je as Card, Ae as CardCell, ke as Cell, Me as Checkbox, Fe as CircularProgress, z as Divider, Re as Headline, Be as IconButton, He as Input, We as LargeTitle, Ke as List, Je as Placeholder, Xe as Progress, Ze as Radio, X as Section, J as SectionFooter, Y as SectionHeader, tt as Select, rt as Skeleton, C as Spinner, D as Subheadline, it as Switch, ot as TabBar, at as TabBarItem, A as Tappable, j as Text, ct as Textarea, ye as TguiProvider, W as Title, E as Typography, O as useTgui };
+export { C as Accordion, w as AccordionItem, O as Avatar, A as AvatarStack, te as Badge, re as Banner, ae as Blockquote, Pe as Button, R as Caption, We as Card, Ue as CardCell, He as Cell, Ke as Checkbox, Je as Chip, Qe as CircularProgress, et as Divider, nt as FixedLayout, it as Headline, ot as HorizontalScroll, ct as IconButton, dt as Image, mt as Input, gt as LargeTitle, vt as Link, bt as List, Ct as PinInput, Ot as Placeholder, kt as Portal, jt as Progress, Nt as Radio, Ft as Rating, Vt as Section, Lt as SectionFooter, zt as SectionHeader, Ut as SegmentedControl, Wt as SegmentedControlItem, Gt as Select, tn as Sheet, rn as Skeleton, an as Slider, ln as SnackbarProvider, ce as Spinner, xn as Spoiler, P as Subheadline, Cn as Switch, Tn as TabBar, wn as TabBarItem, be as Tappable, I as Text, Dn as Textarea, je as TguiProvider, Et as Title, An as Tooltip, N as Typography, dn as useSnackbar, F as useTgui };
 
 //# sourceMappingURL=index.js.map