tguikit 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,89 +1,214 @@
 "use client";
-import { clsx as e } from "clsx";
-import { cva as t } from "class-variance-authority";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Children as i, Fragment as a, createContext as o, isValidElement as s, useCallback as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as p, useSyncExternalStore as m } from "react";
+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";
 //#region src/shared/lib/cn.ts
-function h(...t) {
-	return e(t);
+function h(...e) {
+	return d(e);
 }
 var g = {
+	avatar: "_avatar_lii18_1",
+	s20: "_s20_lii18_18",
+	s24: "_s24_lii18_24",
+	s28: "_s28_lii18_30",
+	s40: "_s40_lii18_36",
+	s48: "_s48_lii18_42",
+	s96: "_s96_lii18_48",
+	img: "_img_lii18_54",
+	acronym: "_acronym_lii18_61",
+	icon: "_icon_lii18_65"
+}, _ = f(g.avatar, {
+	variants: { size: {
+		20: g.s20,
+		24: g.s24,
+		28: g.s28,
+		40: g.s40,
+		48: g.s48,
+		96: g.s96
+	} },
+	defaultVariants: { size: 40 }
+});
+//#endregion
+//#region src/components/Avatar/Avatar.tsx
+function v() {
+	return /* @__PURE__ */ p("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" })
+	});
+}
+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", {
+		ref: e,
+		className: h(_({ size: t }), o),
+		...c,
+		children: [f ? /* @__PURE__ */ p("img", {
+			className: g.img,
+			src: n,
+			alt: r,
+			loading: "lazy",
+			onError: () => d(n)
+		}) : i ? /* @__PURE__ */ p("span", {
+			className: g.acronym,
+			children: i
+		}) : /* @__PURE__ */ p("span", {
+			className: g.icon,
+			children: a ?? /* @__PURE__ */ p(v, {})
+		}), s]
+	});
+}
+y.displayName = "Avatar";
+var b = {
+	badge: "_badge_76m5w_1",
+	number: "_number_76m5w_11",
+	large: "_large_76m5w_20",
+	dot: "_dot_76m5w_28",
+	"mode-primary": "_mode-primary_76m5w_39",
+	"mode-critical": "_mode-critical_76m5w_44",
+	"mode-secondary": "_mode-secondary_76m5w_49",
+	"mode-gray": "_mode-gray_76m5w_54",
+	"mode-white": "_mode-white_76m5w_59"
+}, ee = f(b.badge, {
+	variants: {
+		type: {
+			number: b.number,
+			dot: b.dot
+		},
+		mode: {
+			primary: b["mode-primary"],
+			critical: b["mode-critical"],
+			secondary: b["mode-secondary"],
+			gray: b["mode-gray"],
+			white: b["mode-white"]
+		},
+		large: { true: b.large }
+	},
+	defaultVariants: {
+		type: "number",
+		mode: "primary"
+	}
+});
+//#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", {
+		ref: e,
+		className: h(ee({
+			type: t,
+			mode: n,
+			large: r
+		}), i),
+		...o,
+		children: t === "number" ? a : null
+	});
+}
+x.displayName = "Badge";
+var S = {
+	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, {
+	variants: { size: {
+		s: S.s,
+		m: S.m,
+		l: S.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", {
+		ref: e,
+		role: "status",
+		"aria-label": "Loading",
+		className: h(te({ size: t }), n),
+		...r
+	});
+}
+C.displayName = "Spinner";
+var w = {
 	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(g.typography, {
+}, T = f(w.typography, {
 	variants: {
 		weight: {
-			1: g["weight-1"],
-			2: g["weight-2"],
-			3: g["weight-3"]
+			1: w["weight-1"],
+			2: w["weight-2"],
+			3: w["weight-3"]
 		},
-		caps: { true: g.caps }
+		caps: { true: w.caps }
 	},
 	defaultVariants: { weight: "3" }
 });
 //#endregion
 //#region src/components/Typography/Typography.tsx
-function v({ ref: e, weight: t, caps: r, Component: i = "span", className: a, ...o }) {
-	return /* @__PURE__ */ n(i, {
+function E({ ref: e, weight: t, caps: n, Component: r = "span", className: i, ...a }) {
+	return /* @__PURE__ */ p(r, {
 		ref: e,
-		className: h(_({
+		className: h(T({
 			weight: t,
-			caps: r
-		}), a),
-		...o
+			caps: n
+		}), i),
+		...a
 	});
 }
-v.displayName = "Typography";
+E.displayName = "Typography";
 //#endregion
 //#region src/components/Subheadline/Subheadline.module.css
-var y = {
+var ne = {
 	"level-1": "_level-1_1azf3_1",
 	"level-2": "_level-2_1azf3_6"
-}, b = t("", {
+}, re = f("", {
 	variants: { level: {
-		1: y["level-1"],
-		2: y["level-2"]
+		1: ne["level-1"],
+		2: ne["level-2"]
 	} },
 	defaultVariants: { level: "1" }
 });
 //#endregion
 //#region src/components/Subheadline/Subheadline.tsx
-function x({ ref: e, level: t, Component: r = "h6", className: i, ...a }) {
-	return /* @__PURE__ */ n(v, {
+function D({ ref: e, level: t, Component: n = "h6", className: r, ...i }) {
+	return /* @__PURE__ */ p(E, {
 		ref: e,
-		Component: r,
-		className: h(b({ level: t }), i),
-		...a
+		Component: n,
+		className: h(re({ level: t }), r),
+		...i
 	});
 }
-x.displayName = "Subheadline";
+D.displayName = "Subheadline";
 //#endregion
 //#region src/components/TguiProvider/context.ts
-var S = o(null);
-S.displayName = "TguiContext";
+var ie = n(null);
+ie.displayName = "TguiContext";
 //#endregion
 //#region src/components/TguiProvider/useTgui.ts
-function C() {
-	let e = l(S);
+function O() {
+	let e = a(ie);
 	if (e === null) throw Error("useTgui must be used within a <TguiProvider>.");
 	return e;
 }
-var ee = {
+var ae = {
 	ripple: "_ripple_1cc3x_1",
 	wave: "_wave_1cc3x_9",
 	"wave-rise": "_wave-rise_1cc3x_1"
 };
 //#endregion
 //#region src/components/Tappable/Ripple.tsx
-function te({ waves: e, onWaveEnd: t }) {
-	return /* @__PURE__ */ n("span", {
+function oe({ waves: e, onWaveEnd: t }) {
+	return /* @__PURE__ */ p("span", {
 		"aria-hidden": !0,
-		className: ee.ripple,
-		children: e.map((e) => /* @__PURE__ */ n("span", {
-			className: ee.wave,
+		className: ae.ripple,
+		children: e.map((e) => /* @__PURE__ */ p("span", {
+			className: ae.wave,
 			style: {
 				top: e.y,
 				left: e.x
@@ -92,27 +217,27 @@ function te({ waves: e, onWaveEnd: t }) {
 		}, e.id))
 	});
 }
-var w = {
+var k = {
 	tappable: "_tappable_10au7_1",
 	"tappable--ios": "_tappable--ios_10au7_17",
 	"tappable--opacity": "_tappable--opacity_10au7_18"
-}, ne = 70, re = 600;
-function ie() {
-	let [e, t] = p([]), n = f(0), r = f(/* @__PURE__ */ new Map()), i = f(/* @__PURE__ */ new Set());
-	u(() => {
-		let e = r.current, t = i.current;
+}, se = 70, ce = 600;
+function le() {
+	let [e, t] = l([]), n = c(0), r = c(/* @__PURE__ */ new Map()), a = c(/* @__PURE__ */ new Set());
+	o(() => {
+		let e = r.current, t = a.current;
 		return () => {
 			for (let t of e.values()) clearTimeout(t);
 			for (let e of t) clearTimeout(e);
 		};
 	}, []);
-	let a = c((e) => {
+	let s = i((e) => {
 		t((t) => t.filter((t) => t.id !== e));
 	}, []);
 	return {
 		waves: e,
-		onPointerDown: c((e) => {
-			let { top: o, left: s } = e.currentTarget.getBoundingClientRect(), c = e.clientX - s, l = e.clientY - o, { pointerId: u } = e, d = setTimeout(() => {
+		onPointerDown: i((e) => {
+			let { top: i, left: o } = e.currentTarget.getBoundingClientRect(), c = e.clientX - o, l = e.clientY - i, { pointerId: u } = e, d = setTimeout(() => {
 				r.current.delete(u);
 				let e = n.current++;
 				t((t) => [...t, {
@@ -120,155 +245,154 @@ function ie() {
 					x: c,
 					y: l
 				}]);
-				let o = setTimeout(() => {
-					i.current.delete(o), a(e);
-				}, re);
-				i.current.add(o);
-			}, ne);
+				let i = setTimeout(() => {
+					a.current.delete(i), s(e);
+				}, ce);
+				a.current.add(i);
+			}, se);
 			r.current.set(u, d);
-		}, [a]),
-		onPointerCancel: c((e) => {
+		}, [s]),
+		onPointerCancel: i((e) => {
 			let t = r.current.get(e.pointerId);
 			t && (clearTimeout(t), r.current.delete(e.pointerId));
 		}, []),
-		removeWave: a
+		removeWave: s
 	};
 }
 //#endregion
 //#region src/components/Tappable/Tappable.tsx
-function T({ ref: e, Component: t = "div", interactiveAnimation: i = "background", className: a, children: o, onPointerDown: s, onPointerCancel: c, ...l }) {
-	let { platform: u } = C(), d = ie(), f = !!l.disabled, p = !!l.readOnly, m = u === "base" && i === "background" && !p && !f && (t !== "div" && t !== "span" || l.onClick != null);
-	return /* @__PURE__ */ r(t, {
+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, {
 		ref: e,
-		className: h(w.tappable, u === "ios" && w["tappable--ios"], i === "opacity" && w["tappable--opacity"], a),
-		"data-readonly": p || void 0,
-		"data-disabled": f || void 0,
-		"aria-disabled": f || void 0,
+		className: h(k.tappable, c === "ios" && k["tappable--ios"], n === "opacity" && k["tappable--opacity"], r),
+		"data-readonly": d || void 0,
+		"data-disabled": u || void 0,
+		"aria-disabled": u || void 0,
 		onPointerDown: (e) => {
-			m && d.onPointerDown(e), s?.(e);
+			f && l.onPointerDown(e), a?.(e);
 		},
 		onPointerCancel: (e) => {
-			m && d.onPointerCancel(e), c?.(e);
+			f && l.onPointerCancel(e), o?.(e);
 		},
-		...l,
-		children: [m && /* @__PURE__ */ n(te, {
-			waves: d.waves,
-			onWaveEnd: d.removeWave
-		}), o]
+		...s,
+		children: [f && /* @__PURE__ */ p(oe, {
+			waves: l.waves,
+			onWaveEnd: l.removeWave
+		}), i]
 	});
 }
-T.displayName = "Tappable";
-var ae = { text: "_text_5v0x0_1" };
+A.displayName = "Tappable";
+var ue = { text: "_text_5v0x0_1" };
 //#endregion
 //#region src/components/Text/Text.tsx
-function E({ ref: e, className: t, Component: r = "span", ...i }) {
-	return /* @__PURE__ */ n(v, {
+function j({ ref: e, className: t, Component: n = "span", ...r }) {
+	return /* @__PURE__ */ p(E, {
 		ref: e,
-		Component: r,
-		className: h(ae.text, t),
-		...i
+		Component: n,
+		className: h(ue.text, t),
+		...r
 	});
 }
-E.displayName = "Text";
+j.displayName = "Text";
 //#endregion
 //#region src/shared/lib/telegram.ts
-function D() {
+function de() {
 	if (!(typeof window > "u")) return window.Telegram?.WebApp;
 }
 //#endregion
 //#region src/shared/lib/appearance.ts
-var O = "(prefers-color-scheme: dark)";
-function oe() {
+var fe = "(prefers-color-scheme: dark)";
+function pe() {
 	return typeof window < "u" && typeof window.matchMedia == "function";
 }
-function se() {
-	let e = D();
-	return e ? e.colorScheme === "dark" ? "dark" : "light" : oe() && window.matchMedia(O).matches ? "dark" : "light";
+function me() {
+	let e = de();
+	return e ? e.colorScheme === "dark" ? "dark" : "light" : pe() && window.matchMedia(fe).matches ? "dark" : "light";
 }
-function ce(e) {
-	let t = D();
+function he(e) {
+	let t = de();
 	if (t) return t.onEvent("themeChanged", e), () => t.offEvent("themeChanged", e);
-	if (!oe()) return () => {};
-	let n = window.matchMedia(O);
+	if (!pe()) return () => {};
+	let n = window.matchMedia(fe);
 	return n.addEventListener("change", e), () => n.removeEventListener("change", e);
 }
 //#endregion
 //#region src/shared/lib/platform.ts
-var le = /* @__PURE__ */ new Set(["ios", "macos"]);
-function ue() {
-	let e = D();
-	if (e) return le.has(e.platform) ? "ios" : "base";
+var ge = /* @__PURE__ */ new Set(["ios", "macos"]);
+function _e() {
+	let e = de();
+	if (e) return ge.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 k = {
-	wrapper: "_wrapper_1jphr_1",
-	"wrapper--ios": "_wrapper--ios_1jphr_89",
-	"wrapper--dark": "_wrapper--dark_1jphr_102"
-}, de = () => "light";
-function fe({ ref: e, platform: t, appearance: r, portalContainer: i, className: a, children: o, ...s }) {
-	let l = d(() => t ?? ue(), [t]), u = m(ce, se, de), f = r ?? u, [g, _] = p(null), v = c((t) => {
+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 = d(() => ({
-		platform: l,
-		appearance: f,
-		portalContainer: i ?? g
+	}, [e]), y = s(() => ({
+		platform: d,
+		appearance: m,
+		portalContainer: r ?? g
 	}), [
-		l,
-		f,
-		i,
+		d,
+		m,
+		r,
 		g
 	]);
-	return /* @__PURE__ */ n("div", {
+	return /* @__PURE__ */ p("div", {
 		ref: v,
-		className: h(k.wrapper, l === "ios" && k["wrapper--ios"], f === "dark" && k["wrapper--dark"], a),
-		...s,
-		children: /* @__PURE__ */ n(S.Provider, {
+		className: h(M.wrapper, d === "ios" && M["wrapper--ios"], m === "dark" && M["wrapper--dark"], a),
+		...c,
+		children: /* @__PURE__ */ p(ie.Provider, {
 			value: y,
 			children: o
 		})
 	});
 }
-fe.displayName = "TguiProvider";
-var A = {
-	button: "_button_17mwm_1",
-	stretched: "_stretched_17mwm_13",
-	before: "_before_17mwm_33",
-	after: "_after_17mwm_34",
-	content: "_content_17mwm_40",
-	label: "_label_17mwm_49",
-	loading: "_loading_17mwm_60",
-	spinner: "_spinner_17mwm_70",
-	"button-spinner": "_button-spinner_17mwm_1",
-	"size-s": "_size-s_17mwm_93",
-	"size-m": "_size-m_17mwm_101",
-	"size-l": "_size-l_17mwm_108",
-	ios: "_ios_17mwm_114",
-	"mode-filled": "_mode-filled_17mwm_122",
-	"mode-bezeled": "_mode-bezeled_17mwm_129",
-	"mode-plain": "_mode-plain_17mwm_136",
-	"mode-gray": "_mode-gray_17mwm_143",
-	"mode-outline": "_mode-outline_17mwm_150",
-	"mode-white": "_mode-white_17mwm_158"
-}, pe = t(A.button, {
+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, {
 	variants: {
 		mode: {
-			filled: A["mode-filled"],
-			bezeled: A["mode-bezeled"],
-			plain: A["mode-plain"],
-			gray: A["mode-gray"],
-			outline: A["mode-outline"],
-			white: A["mode-white"]
+			filled: N["mode-filled"],
+			bezeled: N["mode-bezeled"],
+			plain: N["mode-plain"],
+			gray: N["mode-gray"],
+			outline: N["mode-outline"],
+			white: N["mode-white"]
 		},
 		size: {
-			s: A["size-s"],
-			m: A["size-m"],
-			l: A["size-l"]
+			s: N["size-s"],
+			m: N["size-m"],
+			l: N["size-l"]
 		},
-		stretched: { true: A.stretched },
+		stretched: { true: N.stretched },
 		platform: {
-			ios: A.ios,
+			ios: N.ios,
 			base: null
 		}
 	},
@@ -279,91 +403,92 @@ var A = {
 });
 //#endregion
 //#region src/components/Button/Button.tsx
-function me({ size: e, children: t }) {
-	let r = {
+function xe({ size: e, children: t }) {
+	let n = {
 		weight: "2",
-		className: A.content
-	}, i = /* @__PURE__ */ n("span", {
-		className: A.label,
+		className: N.content
+	}, r = /* @__PURE__ */ p("span", {
+		className: N.label,
 		children: t
 	});
-	return e === "l" ? /* @__PURE__ */ n(E, {
-		...r,
-		children: i
-	}) : /* @__PURE__ */ n(x, {
+	return e === "l" ? /* @__PURE__ */ p(j, {
+		...n,
+		children: r
+	}) : /* @__PURE__ */ p(D, {
 		level: "2",
-		...r,
-		children: i
+		...n,
+		children: r
 	});
 }
-function he({ ref: e, Component: t = "button", mode: i = "filled", size: a = "m", stretched: o = !1, loading: s = !1, type: c, before: l, after: u, children: d, className: f, ...p }) {
-	let { platform: m } = C();
-	return /* @__PURE__ */ r(T, {
+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, {
 		ref: e,
 		Component: t,
-		type: t === "button" ? c ?? "button" : c,
-		"aria-busy": s || void 0,
-		className: h(pe({
-			mode: i,
-			size: a,
-			stretched: o,
-			platform: m
-		}), s && A.loading, f),
-		...p,
+		type: t === "button" ? o ?? "button" : o,
+		"aria-busy": a || void 0,
+		className: h(be({
+			mode: n,
+			size: r,
+			stretched: i,
+			platform: f
+		}), a && N.loading, u),
+		...d,
 		children: [
-			s ? /* @__PURE__ */ n("span", {
-				className: A.spinner,
+			a ? /* @__PURE__ */ p(C, {
+				size: "s",
+				className: N.spinner,
 				"aria-hidden": !0
 			}) : null,
-			l ? /* @__PURE__ */ n("span", {
-				className: A.before,
-				children: l
+			s ? /* @__PURE__ */ p("span", {
+				className: N.before,
+				children: s
 			}) : null,
-			/* @__PURE__ */ n(me, {
-				size: a,
-				children: d
+			/* @__PURE__ */ p(xe, {
+				size: r,
+				children: l
 			}),
-			u ? /* @__PURE__ */ n("span", {
-				className: A.after,
-				children: u
+			c ? /* @__PURE__ */ p("span", {
+				className: N.after,
+				children: c
 			}) : null
 		]
 	});
 }
-he.displayName = "Button";
+Se.displayName = "Button";
 //#endregion
 //#region src/components/Caption/Caption.module.css
-var ge = {
+var Ce = {
 	"level-1": "_level-1_1fkm7_1",
 	"level-2": "_level-2_1fkm7_6"
-}, _e = t("", {
+}, we = f("", {
 	variants: { level: {
-		1: ge["level-1"],
-		2: ge["level-2"]
+		1: Ce["level-1"],
+		2: Ce["level-2"]
 	} },
 	defaultVariants: { level: "1" }
 });
 //#endregion
 //#region src/components/Caption/Caption.tsx
-function j({ ref: e, level: t, Component: r = "span", className: i, ...a }) {
-	return /* @__PURE__ */ n(v, {
+function P({ ref: e, level: t, Component: n = "span", className: r, ...i }) {
+	return /* @__PURE__ */ p(E, {
 		ref: e,
-		Component: r,
-		className: h(_e({ level: t }), i),
-		...a
+		Component: n,
+		className: h(we({ level: t }), r),
+		...i
 	});
 }
-j.displayName = "Caption";
+P.displayName = "Caption";
 //#endregion
 //#region src/components/Card/Card.context.ts
-var M = o({ type: "plain" }), N = {
-	card: "_card_tdyqh_1",
-	cardAmbient: "_cardAmbient_tdyqh_17",
-	cell: "_cell_tdyqh_21",
-	cellAmbient: "_cellAmbient_tdyqh_26",
-	cellHeader: "_cellHeader_tdyqh_43",
-	cellSubtitle: "_cellSubtitle_tdyqh_47"
-}, P = {
+var Te = n({ type: "plain" }), F = {
+	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 = {
 	cell: "_cell_1w7p5_1",
 	before: "_before_1w7p5_10",
 	after: "_after_1w7p5_11",
@@ -378,331 +503,508 @@ var M = o({ type: "plain" }), N = {
 	hovered: "_hovered_1w7p5_56",
 	ios: "_ios_1w7p5_60",
 	interactive: "_interactive_1w7p5_67"
-}, ve = t(P.cell, { variants: {
+}, Ee = f(I.cell, { variants: {
 	platform: {
-		ios: P.ios,
+		ios: I.ios,
 		base: null
 	},
-	hovered: { true: P.hovered },
-	interactive: { true: P.interactive },
-	multiline: { true: P.multiline }
+	hovered: { true: I.hovered },
+	interactive: { true: I.interactive },
+	multiline: { true: I.multiline }
 } });
 //#endregion
 //#region src/components/Cell/Cell.tsx
-function ye({ ios: e, children: t }) {
-	return e ? /* @__PURE__ */ n(E, {
-		className: P.head,
+function De({ ios: e, children: t }) {
+	return e ? /* @__PURE__ */ p(j, {
+		className: I.head,
 		children: t
-	}) : /* @__PURE__ */ n(x, {
+	}) : /* @__PURE__ */ p(D, {
 		level: "1",
-		className: P.head,
+		className: I.head,
 		children: t
 	});
 }
-function be({ ios: e, children: t }) {
-	return e ? /* @__PURE__ */ n(j, {
-		className: P.description,
+function Oe({ ios: e, children: t }) {
+	return e ? /* @__PURE__ */ p(P, {
+		className: I.description,
 		children: t
-	}) : /* @__PURE__ */ n(x, {
+	}) : /* @__PURE__ */ p(D, {
 		level: "2",
-		className: P.description,
+		className: I.description,
 		children: t
 	});
 }
-function F({ ref: e, Component: t = "div", subhead: i, children: a, hint: o, titleBadge: s, subtitle: c, description: l, before: u, after: d, hovered: f, multiline: p, className: m, ...g }) {
-	let { platform: _ } = C(), v = _ === "ios", y = a != null || o != null || s != null, b = g.onClick != null || g.href != null || t === "a" || t === "button" || t === "label";
-	return /* @__PURE__ */ r(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, {
 		ref: e,
 		Component: t,
-		className: h(ve({
+		className: h(Ee({
 			platform: _,
-			hovered: f,
-			multiline: p,
+			hovered: u,
+			multiline: d,
 			interactive: b
-		}), m),
+		}), f),
 		...g,
 		children: [
-			u == null ? null : /* @__PURE__ */ n("div", {
-				className: P.before,
-				children: u
+			c == null ? null : /* @__PURE__ */ p("div", {
+				className: I.before,
+				children: c
 			}),
-			/* @__PURE__ */ r("div", {
-				className: P.middle,
+			/* @__PURE__ */ m("div", {
+				className: I.middle,
 				children: [
-					i == null ? null : /* @__PURE__ */ n(x, {
+					n == null ? null : /* @__PURE__ */ p(D, {
 						level: "2",
-						className: P.subhead,
-						children: i
+						className: I.subhead,
+						children: n
 					}),
-					y ? /* @__PURE__ */ r(ye, {
+					y ? /* @__PURE__ */ m(De, {
 						ios: v,
 						children: [
-							a == null ? null : /* @__PURE__ */ n("span", {
-								className: P.title,
-								children: a
+							r == null ? null : /* @__PURE__ */ p("span", {
+								className: I.title,
+								children: r
 							}),
-							o == null ? null : /* @__PURE__ */ n("span", {
-								className: P.hint,
-								children: o
+							i == null ? null : /* @__PURE__ */ p("span", {
+								className: I.hint,
+								children: i
 							}),
-							s
+							a
 						]
 					}) : null,
-					c == null ? null : /* @__PURE__ */ n(x, {
+					o == null ? null : /* @__PURE__ */ p(D, {
 						level: "2",
-						className: P.subtitle,
-						children: c
+						className: I.subtitle,
+						children: o
 					}),
-					l == null ? null : /* @__PURE__ */ n(be, {
+					s == null ? null : /* @__PURE__ */ p(Oe, {
 						ios: v,
-						children: l
+						children: s
 					})
 				]
 			}),
-			d == null ? null : /* @__PURE__ */ n("div", {
-				className: P.after,
-				children: d
+			l == null ? null : /* @__PURE__ */ p("div", {
+				className: I.after,
+				children: l
 			})
 		]
 	});
 }
-F.displayName = "Cell";
+ke.displayName = "Cell";
 //#endregion
 //#region src/components/Card/CardCell.tsx
-function I({ ref: e, children: t, subtitle: r, className: i, ...a }) {
-	let { type: o } = l(M), s = o === "ambient";
-	return /* @__PURE__ */ n(F, {
+function Ae({ ref: e, children: t, subtitle: n, className: r, ...i }) {
+	let { type: o } = a(Te), s = o === "ambient";
+	return /* @__PURE__ */ p(ke, {
 		ref: e,
-		className: h(N.cell, s && N.cellAmbient, i),
-		subtitle: r == null ? void 0 : /* @__PURE__ */ n("span", {
-			className: N.cellSubtitle,
-			children: r
+		className: h(F.cell, s && F.cellAmbient, r),
+		subtitle: n == null ? void 0 : /* @__PURE__ */ p("span", {
+			className: F.cellSubtitle,
+			children: n
 		}),
-		...a,
-		children: t == null ? null : /* @__PURE__ */ n("span", {
-			className: N.cellHeader,
+		...i,
+		children: t == null ? null : /* @__PURE__ */ p("span", {
+			className: F.cellHeader,
 			children: t
 		})
 	});
 }
-I.displayName = "CardCell";
+Ae.displayName = "CardCell";
 //#endregion
 //#region src/components/Card/Card.tsx
-function L({ ref: e, type: t = "plain", className: r, children: i, ...a }) {
-	let o = d(() => ({ type: t }), [t]);
-	return /* @__PURE__ */ n(M.Provider, {
-		value: o,
-		children: /* @__PURE__ */ n("article", {
+function je({ ref: e, type: t = "plain", className: n, children: r, ...i }) {
+	let a = s(() => ({ type: t }), [t]);
+	return /* @__PURE__ */ p(Te.Provider, {
+		value: a,
+		children: /* @__PURE__ */ p("article", {
 			ref: e,
-			className: h(N.card, t === "ambient" && N.cardAmbient, r),
-			...a,
-			children: i
+			className: h(F.card, t === "ambient" && F.cardAmbient, n),
+			...i,
+			children: r
 		})
 	});
 }
-L.displayName = "Card", L.Cell = I;
-var R = {
-	checkbox: "_checkbox_3wbt9_1",
-	input: "_input_3wbt9_12",
-	box: "_box_3wbt9_22"
+je.displayName = "Card", je.Cell = Ae;
+var L = {
+	checkbox: "_checkbox_yjw6v_1",
+	input: "_input_yjw6v_12",
+	box: "_box_yjw6v_22"
 };
 //#endregion
 //#region src/components/Checkbox/Checkbox.tsx
-function xe({ ref: e, indeterminate: t = !1, disabled: i, className: a, style: o, ...s }) {
-	let c = f(null);
-	return u(() => {
-		c.current && (c.current.indeterminate = t);
-	}, [t]), /* @__PURE__ */ r("span", {
-		className: h(R.checkbox, a),
-		style: o,
-		"data-disabled": i || void 0,
-		children: [/* @__PURE__ */ n("input", {
+function Me({ ref: e, indeterminate: t = !1, disabled: n, className: r, style: i, ...a }) {
+	let s = c(null);
+	return o(() => {
+		s.current && (s.current.indeterminate = t);
+	}, [t]), /* @__PURE__ */ m("span", {
+		className: h(L.checkbox, r),
+		style: i,
+		"data-disabled": n || void 0,
+		children: [/* @__PURE__ */ p("input", {
 			ref: (t) => {
-				c.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
+				s.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
 			},
 			type: "checkbox",
-			className: R.input,
-			disabled: i,
-			...s
-		}), /* @__PURE__ */ n("span", {
-			className: R.box,
+			className: L.input,
+			disabled: n,
+			...a
+		}), /* @__PURE__ */ p("span", {
+			className: L.box,
 			"aria-hidden": !0
 		})]
 	});
 }
-xe.displayName = "Checkbox";
-var Se = { divider: "_divider_fq1ux_1" };
+Me.displayName = "Checkbox";
+var R = {
+	root: "_root_hheo5_1",
+	svg: "_svg_hheo5_6",
+	track: "_track_hheo5_10",
+	indicator: "_indicator_hheo5_14"
+}, Ne = {
+	s: 20,
+	m: 28,
+	l: 36
+}, Pe = {
+	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", {
+		ref: e,
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.round(a),
+		className: h(R.root, r),
+		...i,
+		children: /* @__PURE__ */ m("svg", {
+			className: R.svg,
+			width: o,
+			height: o,
+			viewBox: `0 0 ${o} ${o}`,
+			"aria-hidden": !0,
+			children: [/* @__PURE__ */ p("circle", {
+				className: R.track,
+				cx: u,
+				cy: u,
+				r: c,
+				strokeWidth: s,
+				fill: "none"
+			}), /* @__PURE__ */ p("circle", {
+				className: R.indicator,
+				cx: u,
+				cy: u,
+				r: c,
+				strokeWidth: s,
+				strokeLinecap: "round",
+				strokeDasharray: l,
+				strokeDashoffset: l * (1 - a / 100),
+				fill: "none"
+			})]
+		})
+	});
+}
+Fe.displayName = "CircularProgress";
+var Ie = { divider: "_divider_fq1ux_1" };
 //#endregion
 //#region src/components/Divider/Divider.tsx
-function z({ ref: e, className: t, ...r }) {
-	return /* @__PURE__ */ n("hr", {
+function z({ ref: e, className: t, ...n }) {
+	return /* @__PURE__ */ p("hr", {
 		ref: e,
-		className: h(Se.divider, t),
-		...r
+		className: h(Ie.divider, t),
+		...n
 	});
 }
 z.displayName = "Divider";
-var Ce = { headline: "_headline_17ihj_1" };
+var Le = { headline: "_headline_17ihj_1" };
 //#endregion
 //#region src/components/Headline/Headline.tsx
-function we({ ref: e, weight: t = "2", className: r, Component: i = "h5", ...a }) {
-	return /* @__PURE__ */ n(v, {
+function Re({ ref: e, weight: t = "2", className: n, Component: r = "h5", ...i }) {
+	return /* @__PURE__ */ p(E, {
 		ref: e,
 		weight: t,
-		Component: i,
-		className: h(Ce.headline, r),
-		...a
+		Component: r,
+		className: h(Le.headline, n),
+		...i
 	});
 }
-we.displayName = "Headline";
+Re.displayName = "Headline";
 var B = {
-	base: "_base_ja3pv_1",
-	body: "_body_ja3pv_7",
-	ios: "_ios_ja3pv_23",
-	before: "_before_ja3pv_29",
-	after: "_after_ja3pv_30",
-	field: "_field_ja3pv_35",
-	header: "_header_ja3pv_56",
-	focused: "_focused_ja3pv_70",
-	error: "_error_ja3pv_78",
-	disabled: "_disabled_ja3pv_90"
+	iconButton: "_iconButton_1ifh1_1",
+	circle: "_circle_1ifh1_15",
+	s: "_s_1ifh1_19",
+	m: "_m_1ifh1_24",
+	l: "_l_1ifh1_29",
+	ios: "_ios_1ifh1_42",
+	icon: "_icon_1ifh1_1",
+	"mode-bezeled": "_mode-bezeled_1ifh1_67",
+	"mode-plain": "_mode-plain_1ifh1_72",
+	"mode-gray": "_mode-gray_1ifh1_76",
+	"mode-outline": "_mode-outline_1ifh1_81"
+}, ze = f(B.iconButton, {
+	variants: {
+		mode: {
+			bezeled: B["mode-bezeled"],
+			plain: B["mode-plain"],
+			gray: B["mode-gray"],
+			outline: B["mode-outline"]
+		},
+		size: {
+			s: B.s,
+			m: B.m,
+			l: B.l
+		},
+		circle: { true: B.circle },
+		platform: {
+			ios: B.ios,
+			base: null
+		}
+	},
+	defaultVariants: {
+		mode: "plain",
+		size: "m"
+	}
+});
+//#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, {
+		ref: e,
+		Component: t,
+		type: t === "button" ? a ?? "button" : a,
+		className: h(ze({
+			mode: n,
+			size: r,
+			circle: i,
+			platform: l
+		}), o),
+		...c,
+		children: /* @__PURE__ */ p("span", {
+			className: B.icon,
+			children: s
+		})
+	});
+}
+Be.displayName = "IconButton";
+var V = {
+	base: "_base_1k0ze_1",
+	body: "_body_1k0ze_7",
+	ios: "_ios_1k0ze_23",
+	"align-start": "_align-start_1k0ze_29",
+	before: "_before_1k0ze_33",
+	after: "_after_1k0ze_34",
+	header: "_header_1k0ze_39",
+	focused: "_focused_1k0ze_53",
+	error: "_error_1k0ze_61",
+	disabled: "_disabled_1k0ze_73"
 };
 //#endregion
-//#region src/components/Input/Input.tsx
-function Te({ ref: e, type: t = "text", header: i, before: a, after: o, status: s, disabled: c, className: l, onFocus: u, onBlur: d, ...f }) {
-	let { platform: m } = C(), g = m === "ios", [_, v] = p(!1), y = s ?? (_ ? "focused" : "default"), b = g ? E : x;
-	return /* @__PURE__ */ r("div", {
-		className: h(g ? B.ios : B.base, y === "error" && B.error, y === "focused" && B.focused, c && B.disabled, l),
-		"aria-disabled": c || void 0,
-		children: [/* @__PURE__ */ r("label", {
-			className: B.body,
+//#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", {
+		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),
+		"aria-disabled": r || void 0,
+		children: [/* @__PURE__ */ m("label", {
+			className: V.body,
 			children: [
-				a == null ? null : /* @__PURE__ */ n("span", {
-					className: B.before,
-					children: a
-				}),
-				/* @__PURE__ */ n(b, {
-					ref: e,
-					Component: "input",
-					className: B.field,
-					type: t,
-					disabled: c,
-					onFocus: (e) => {
-						c || v(!0), u?.(e);
-					},
-					onBlur: (e) => {
-						v(!1), d?.(e);
-					},
-					...f
-				}),
-				o == null ? null : /* @__PURE__ */ n("span", {
-					className: B.after,
+				o == null ? null : /* @__PURE__ */ p("span", {
+					className: V.before,
 					children: o
+				}),
+				l,
+				s == null ? null : /* @__PURE__ */ p("span", {
+					className: V.after,
+					children: s
 				})
 			]
-		}), i != null && !g ? /* @__PURE__ */ n("span", {
-			className: B.header,
-			children: i
+		}), a != null && !t ? /* @__PURE__ */ p("span", {
+			className: V.header,
+			children: a
 		}) : null]
 	});
 }
-Te.displayName = "Input";
+H.displayName = "FormField";
+var Ve = { 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"),
+		disabled: o,
+		header: n,
+		before: r,
+		after: i,
+		className: s,
+		children: /* @__PURE__ */ p(m ? j : D, {
+			ref: e,
+			Component: "input",
+			className: Ve.field,
+			type: t,
+			disabled: o,
+			onFocus: (e) => {
+				o || g(!0), c?.(e);
+			},
+			onBlur: (e) => {
+				g(!1), u?.(e);
+			},
+			...d
+		})
+	});
+}
+He.displayName = "Input";
 //#endregion
 //#region src/components/LargeTitle/LargeTitle.module.css
-var Ee = { "large-title": "_large-title_15hug_1" };
+var Ue = { "large-title": "_large-title_15hug_1" };
 //#endregion
 //#region src/components/LargeTitle/LargeTitle.tsx
-function De({ ref: e, weight: t = "1", className: r, Component: i = "h1", ...a }) {
-	return /* @__PURE__ */ n(v, {
+function We({ ref: e, weight: t = "1", className: n, Component: r = "h1", ...i }) {
+	return /* @__PURE__ */ p(E, {
 		ref: e,
 		weight: t,
-		Component: i,
-		className: h(Ee["large-title"], r),
-		...a
+		Component: r,
+		className: h(Ue["large-title"], n),
+		...i
 	});
 }
-De.displayName = "LargeTitle";
-var Oe = {
+We.displayName = "LargeTitle";
+var Ge = {
 	list: "_list_1rhgw_1",
 	ios: "_ios_1rhgw_5"
 };
 //#endregion
 //#region src/components/List/List.tsx
-function ke({ ref: e, Component: t = "div", className: r, children: i, ...a }) {
-	let { platform: o } = C();
-	return /* @__PURE__ */ n(t, {
+function Ke({ ref: e, Component: t = "div", className: n, children: r, ...i }) {
+	let { platform: a } = O();
+	return /* @__PURE__ */ p(t, {
 		ref: e,
-		className: h(Oe.list, o === "ios" && Oe.ios, r),
-		...a,
-		children: i
+		className: h(Ge.list, a === "ios" && Ge.ios, n),
+		...i,
+		children: r
 	});
 }
-ke.displayName = "List";
+Ke.displayName = "List";
 //#endregion
 //#region src/components/Title/Title.module.css
-var V = {
+var U = {
 	"level-1": "_level-1_rosk9_1",
 	"level-2": "_level-2_rosk9_6",
 	"level-3": "_level-3_rosk9_11"
-}, Ae = {
+}, qe = {
 	1: {
 		tag: "h2",
-		className: V["level-1"]
+		className: U["level-1"]
 	},
 	2: {
 		tag: "h3",
-		className: V["level-2"]
+		className: U["level-2"]
 	},
 	3: {
 		tag: "h4",
-		className: V["level-3"]
+		className: U["level-3"]
 	}
 };
 //#endregion
 //#region src/components/Title/Title.tsx
-function H({ ref: e, level: t = "2", Component: r, className: i, ...a }) {
-	let { tag: o, className: s } = Ae[t];
-	return /* @__PURE__ */ n(v, {
+function W({ ref: e, level: t = "2", Component: n, className: r, ...i }) {
+	let { tag: a, className: o } = qe[t];
+	return /* @__PURE__ */ p(E, {
 		ref: e,
-		Component: r ?? o,
-		className: h(s, i),
-		...a
+		Component: n ?? a,
+		className: h(o, r),
+		...i
 	});
 }
-H.displayName = "Title";
-var U = {
+W.displayName = "Title";
+var G = {
 	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: i, description: a, action: o, className: s, ...c }) {
-	return /* @__PURE__ */ r("section", {
+function Je({ ref: e, children: t, header: n, description: r, action: i, className: a, ...o }) {
+	return /* @__PURE__ */ m("section", {
 		ref: e,
-		className: h(U.placeholder, s),
-		...c,
+		className: h(G.placeholder, a),
+		...o,
 		children: [
 			t,
-			i != null || a != null ? /* @__PURE__ */ r("dl", {
-				className: U.fields,
-				children: [i == null ? null : /* @__PURE__ */ n(H, {
+			n != null || r != null ? /* @__PURE__ */ m("dl", {
+				className: G.fields,
+				children: [n == null ? null : /* @__PURE__ */ p(W, {
 					Component: "dt",
 					level: "3",
 					weight: "2",
-					children: i
-				}), a == null ? null : /* @__PURE__ */ n(E, {
+					children: n
+				}), r == null ? null : /* @__PURE__ */ p(j, {
 					Component: "dd",
-					className: U.description,
-					children: a
+					className: G.description,
+					children: r
 				})]
 			}) : null,
-			o
+			i
 		]
 	});
 }
-je.displayName = "Placeholder";
-var W = {
+Je.displayName = "Placeholder";
+var Ye = {
+	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 }) {
+	let i = Math.max(0, Math.min(100, t));
+	return /* @__PURE__ */ p("div", {
+		ref: e,
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.round(i),
+		className: h(Ye.track, n),
+		...r,
+		children: /* @__PURE__ */ p("div", {
+			className: Ye.bar,
+			style: { width: `${i}%` }
+		})
+	});
+}
+Xe.displayName = "Progress";
+var K = {
+	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),
+		style: r,
+		"data-disabled": t || void 0,
+		children: [/* @__PURE__ */ p("input", {
+			ref: e,
+			type: "radio",
+			className: K.input,
+			disabled: t,
+			...i
+		}), /* @__PURE__ */ p("span", {
+			className: K.dot,
+			"aria-hidden": !0
+		})]
+	});
+}
+Ze.displayName = "Radio";
+var q = {
 	body: "_body_1o4ef_1",
 	sectionBase: "_sectionBase_1o4ef_6",
 	bodyWithHeader: "_bodyWithHeader_1o4ef_6",
@@ -717,130 +1019,147 @@ var W = {
 };
 //#endregion
 //#region src/components/Section/SectionFooter.tsx
-function Me({ ios: e, children: t }) {
-	return e ? /* @__PURE__ */ n(j, {
-		className: W.footerText,
+function Qe({ ios: e, children: t }) {
+	return e ? /* @__PURE__ */ p(P, {
+		className: q.footerText,
 		children: t
-	}) : /* @__PURE__ */ n(x, {
+	}) : /* @__PURE__ */ p(D, {
 		level: "2",
-		className: W.footerText,
+		className: q.footerText,
 		children: t
 	});
 }
-function G({ ref: e, centered: t = !1, className: r, children: i, ...a }) {
-	let { platform: o } = C(), s = o === "ios";
-	return /* @__PURE__ */ n("footer", {
+function J({ ref: e, centered: t = !1, className: n, children: r, ...i }) {
+	let { platform: a } = O(), o = a === "ios";
+	return /* @__PURE__ */ p("footer", {
 		ref: e,
-		className: h(W.footer, s && W.footerIos, t && W.footerCentered, r),
-		...a,
-		children: /* @__PURE__ */ n(Me, {
-			ios: s,
-			children: i
+		className: h(q.footer, o && q.footerIos, t && q.footerCentered, n),
+		...i,
+		children: /* @__PURE__ */ p(Qe, {
+			ios: o,
+			children: r
 		})
 	});
 }
-G.displayName = "SectionFooter";
+J.displayName = "SectionFooter";
 //#endregion
 //#region src/components/Section/SectionHeader.tsx
-function Ne({ ios: e, large: t, children: r }) {
-	return t ? e ? /* @__PURE__ */ n(x, {
+function $e({ ios: e, large: t, children: n }) {
+	return t ? e ? /* @__PURE__ */ p(D, {
 		Component: "h2",
 		level: "1",
 		weight: "2",
-		children: r
-	}) : /* @__PURE__ */ n(E, {
+		children: n
+	}) : /* @__PURE__ */ p(j, {
 		Component: "h2",
 		weight: "2",
-		children: r
-	}) : e ? /* @__PURE__ */ n(j, {
+		children: n
+	}) : e ? /* @__PURE__ */ p(P, {
 		Component: "h2",
 		caps: !0,
-		children: r
-	}) : /* @__PURE__ */ n(x, {
+		children: n
+	}) : /* @__PURE__ */ p(D, {
 		Component: "h2",
 		level: "2",
 		weight: "2",
-		children: r
+		children: n
 	});
 }
-function K({ ref: e, large: t = !1, className: r, children: i, ...a }) {
-	let { platform: o } = C(), s = o === "ios";
-	return /* @__PURE__ */ n("header", {
+function Y({ ref: e, large: t = !1, className: n, children: r, ...i }) {
+	let { platform: a } = O(), o = a === "ios";
+	return /* @__PURE__ */ p("header", {
 		ref: e,
-		className: h(W.header, s && W.headerIos, t && W.headerLarge, r),
-		...a,
-		children: /* @__PURE__ */ n(Ne, {
-			ios: s,
+		className: h(q.header, o && q.headerIos, t && q.headerLarge, n),
+		...i,
+		children: /* @__PURE__ */ p($e, {
+			ios: o,
 			large: t,
-			children: i
+			children: r
 		})
 	});
 }
-K.displayName = "SectionHeader";
+Y.displayName = "SectionHeader";
 //#endregion
 //#region src/components/Section/Section.tsx
-var q = (e) => typeof e == "string" || typeof e == "number";
-function J({ ref: e, header: t, footer: o, className: c, children: l, ...u }) {
-	let { platform: d } = C(), f = i.toArray(l);
-	return /* @__PURE__ */ r("section", {
-		ref: e,
-		className: h(d === "ios" ? W.sectionIos : W.sectionBase, c),
-		...u,
-		children: [/* @__PURE__ */ r("div", {
-			className: W.bodyWithHeader,
-			children: [q(t) ? /* @__PURE__ */ n(K, { children: t }) : t, /* @__PURE__ */ n("div", {
-				className: W.body,
-				children: f.map((e, t) => /* @__PURE__ */ r(a, { children: [e, t < f.length - 1 ? /* @__PURE__ */ n(z, {}) : null] }, s(e) ? e.key : t))
+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", {
+		ref: n,
+		className: h(l === "ios" ? q.sectionIos : q.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))
 			})]
-		}), q(o) ? /* @__PURE__ */ n(G, { children: o }) : o]
-	});
-}
-J.displayName = "Section", J.Header = K, J.Footer = G;
-var Y = {
-	base: "_base_9dgop_1",
-	row: "_row_9dgop_7",
-	ios: "_ios_9dgop_14",
-	select: "_select_9dgop_19",
-	chevron: "_chevron_9dgop_33",
-	header: "_header_9dgop_45",
-	focused: "_focused_9dgop_59",
-	error: "_error_9dgop_67",
-	disabled: "_disabled_9dgop_79"
+		}), et(a) ? /* @__PURE__ */ p(J, { children: a }) : a]
+	});
+}
+X.displayName = "Section", X.Header = Y, X.Footer = J;
+var Z = {
+	base: "_base_yxki5_1",
+	row: "_row_yxki5_7",
+	ios: "_ios_yxki5_17",
+	select: "_select_yxki5_22",
+	chevron: "_chevron_yxki5_36",
+	header: "_header_yxki5_48",
+	focused: "_focused_yxki5_62",
+	error: "_error_yxki5_70",
+	disabled: "_disabled_yxki5_82"
 };
 //#endregion
 //#region src/components/Select/Select.tsx
-function Pe({ ref: e, header: t, status: i, disabled: a, className: o, onFocus: s, onBlur: c, children: l, ...u }) {
-	let { platform: d } = C(), f = d === "ios", [m, g] = p(!1), _ = i ?? (m ? "focused" : "default"), v = f ? E : x;
-	return /* @__PURE__ */ r("div", {
-		className: h(f ? Y.ios : Y.base, _ === "error" && Y.error, _ === "focused" && Y.focused, a && Y.disabled, o),
-		"aria-disabled": a || void 0,
-		children: [/* @__PURE__ */ r("div", {
-			className: Y.row,
-			children: [/* @__PURE__ */ n(v, {
+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),
+		"aria-disabled": r || void 0,
+		children: [/* @__PURE__ */ m("div", {
+			className: Z.row,
+			children: [/* @__PURE__ */ p(v, {
 				ref: e,
 				Component: "select",
-				className: Y.select,
-				disabled: a,
+				className: Z.select,
+				disabled: r,
 				onFocus: (e) => {
-					a || g(!0), s?.(e);
+					r || g(!0), a?.(e);
 				},
 				onBlur: (e) => {
-					g(!1), c?.(e);
+					g(!1), o?.(e);
 				},
-				...u,
-				children: l
-			}), /* @__PURE__ */ n("span", {
+				...c,
+				children: s
+			}), /* @__PURE__ */ p("span", {
 				"aria-hidden": !0,
-				className: Y.chevron
+				className: Z.chevron
 			})]
-		}), t != null && !f ? /* @__PURE__ */ n("span", {
-			className: Y.header,
+		}), t != null && !d ? /* @__PURE__ */ p("span", {
+			className: Z.header,
 			children: t
 		}) : null]
 	});
 }
-Pe.displayName = "Select";
-var X = {
+tt.displayName = "Select";
+var nt = {
+	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", {
+		ref: e,
+		"aria-hidden": t || void 0,
+		className: h(nt.skeleton, t && nt.visible, n),
+		...i,
+		children: r
+	});
+}
+rt.displayName = "Skeleton";
+var Q = {
 	switch: "_switch_s4zd1_1",
 	input: "_input_s4zd1_18",
 	control: "_control_s4zd1_28",
@@ -849,70 +1168,116 @@ var X = {
 };
 //#endregion
 //#region src/components/Switch/Switch.tsx
-function Fe({ ref: e, disabled: t, className: i, style: a, ...o }) {
-	let { platform: s } = C();
-	return /* @__PURE__ */ r("label", {
-		className: h(X.switch, s === "ios" ? X.ios : X.base, i),
-		style: a,
+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),
+		style: r,
 		"data-disabled": t || void 0,
-		children: [/* @__PURE__ */ n("input", {
+		children: [/* @__PURE__ */ p("input", {
 			ref: e,
 			type: "checkbox",
-			className: X.input,
+			className: Q.input,
 			disabled: t,
-			...o
-		}), /* @__PURE__ */ n("span", {
+			...i
+		}), /* @__PURE__ */ p("span", {
 			"aria-hidden": !0,
-			className: X.control
+			className: Q.control
 		})]
 	});
 }
-Fe.displayName = "Switch";
-var Z = {
-	bar: "_bar_y3gvr_1",
-	barIos: "_barIos_y3gvr_10",
-	item: "_item_y3gvr_15",
-	itemIos: "_itemIos_y3gvr_34",
-	itemSelected: "_itemSelected_y3gvr_39",
-	icon: "_icon_y3gvr_43",
-	text: "_text_y3gvr_64"
+it.displayName = "Switch";
+var $ = {
+	bar: "_bar_muj3n_1",
+	barIos: "_barIos_muj3n_10",
+	item: "_item_muj3n_15",
+	itemIos: "_itemIos_muj3n_33",
+	itemSelected: "_itemSelected_muj3n_38",
+	icon: "_icon_muj3n_42",
+	text: "_text_muj3n_62"
 };
 //#endregion
 //#region src/components/TabBar/TabBarItem.tsx
-function Q({ ref: e, selected: t, text: i, children: a, className: o, ...s }) {
-	let { platform: c } = C(), l = c === "ios";
-	return /* @__PURE__ */ r(T, {
+function at({ ref: e, selected: t, text: n, children: r, className: i, ...a }) {
+	let { platform: o } = O(), s = o === "ios";
+	return /* @__PURE__ */ m(A, {
 		ref: e,
 		Component: "button",
 		interactiveAnimation: "opacity",
 		"aria-current": t ? "page" : void 0,
-		className: h(Z.item, l && Z.itemIos, t && Z.itemSelected, o),
-		...s,
-		children: [a == null ? null : /* @__PURE__ */ n("span", {
-			className: Z.icon,
-			children: a
-		}), i == null ? null : /* @__PURE__ */ n(j, {
-			className: Z.text,
+		className: h($.item, s && $.itemIos, t && $.itemSelected, i),
+		...a,
+		children: [r == null ? null : /* @__PURE__ */ p("span", {
+			className: $.icon,
+			children: r
+		}), n == null ? null : /* @__PURE__ */ p(P, {
+			className: $.text,
 			weight: "2",
-			level: l ? "2" : "1",
-			children: i
+			level: s ? "2" : "1",
+			children: n
 		})]
 	});
 }
-Q.displayName = "TabBarItem";
+at.displayName = "TabBarItem";
 //#endregion
 //#region src/components/TabBar/TabBar.tsx
-function $({ ref: e, className: t, children: r, ...i }) {
-	let { platform: a } = C();
-	return /* @__PURE__ */ n("nav", {
+function ot({ ref: e, className: t, children: n, ...r }) {
+	let { platform: i } = O();
+	return /* @__PURE__ */ p("nav", {
 		ref: e,
-		className: h(Z.bar, a === "ios" && Z.barIos, t),
-		...i,
-		children: r
+		className: h($.bar, i === "ios" && $.barIos, t),
+		...r,
+		children: n
+	});
+}
+ot.displayName = "TabBar", ot.Item = at;
+var st = { 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;
+		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,
+		f,
+		m
+	]), /* @__PURE__ */ p(H, {
+		ios: b,
+		status: S,
+		disabled: u,
+		alignStart: !0,
+		header: t,
+		className: d,
+		children: /* @__PURE__ */ p(te, {
+			ref: w,
+			Component: "textarea",
+			className: st.field,
+			rows: s,
+			disabled: u,
+			value: f,
+			defaultValue: m,
+			onFocus: (e) => {
+				u || x(!0), h?.(e);
+			},
+			onBlur: (e) => {
+				x(!1), g?.(e);
+			},
+			onChange: (e) => {
+				T(), _?.(e);
+			},
+			...v
+		})
 	});
 }
-$.displayName = "TabBar", $.Item = Q;
+ct.displayName = "Textarea";
 //#endregion
-export { he as Button, j as Caption, L as Card, I as CardCell, F as Cell, xe as Checkbox, z as Divider, we as Headline, Te as Input, De as LargeTitle, ke as List, je as Placeholder, J as Section, G as SectionFooter, K as SectionHeader, Pe as Select, x as Subheadline, Fe as Switch, $ as TabBar, Q as TabBarItem, T as Tappable, E as Text, fe as TguiProvider, H as Title, v as Typography, C as useTgui };
+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 };
 
 //# sourceMappingURL=index.js.map