tintora 0.21.1 → 0.23.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { cloneElement as e, createContext as t, useContext as n, useEffect as r, useId as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { cloneElement as n, createContext as r, useContext as i, useEffect as a, useId as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
 //#region node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function u(e) {
 	var t, n, r = "";
@@ -17,31 +17,100 @@ function d() {
 	return r;
 }
 //#endregion
+//#region src/Alert/Alert.tsx
+var f = {
+	info: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01" }),
+	success: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8" }),
+	warning: /* @__PURE__ */ e("path", { d: "M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01" }),
+	error: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6" })
+}, p = ({ status: t }) => /* @__PURE__ */ e("svg", {
+	width: "22",
+	height: "22",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: `var(--tintora-status-${t}-fg)`,
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	style: {
+		flex: "0 0 auto",
+		marginTop: 1
+	},
+	children: f[t]
+});
+function m({ status: n = "info", variant: r = "alert", title: i, children: a, action: o, onDismiss: s, className: c, ...l }) {
+	return /* @__PURE__ */ t("div", {
+		...l,
+		role: r === "alert" && n === "error" ? "alert" : "status",
+		className: d("tintora-alert", r === "announcement" ? "tintora-alert--announcement" : `tintora-alert--${n}`, c),
+		children: [
+			r === "alert" && /* @__PURE__ */ e(p, { status: n }),
+			/* @__PURE__ */ t("div", {
+				className: d("tintora-alert__content", r === "announcement" && "tintora-alert__content--announcement"),
+				children: [
+					i && /* @__PURE__ */ e("span", {
+						className: "tintora-alert__content__title",
+						children: i
+					}),
+					a && /* @__PURE__ */ e("span", {
+						className: "tintora-alert__content__sub-title",
+						children: a
+					}),
+					o && /* @__PURE__ */ e("button", {
+						type: "button",
+						onClick: o.onClick,
+						className: d("tintora-alert__content__action", r === "alert" && `tintora-alert__content__action--${n}`),
+						children: o.label
+					})
+				]
+			}),
+			r === "alert" && s && /* @__PURE__ */ e("button", {
+				type: "button",
+				"aria-label": "Dismiss",
+				className: "tintora-alert__close",
+				onClick: s,
+				children: /* @__PURE__ */ e("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ e("path", { d: "M18 6L6 18M6 6l12 12" })
+				})
+			})
+		]
+	});
+}
+//#endregion
 //#region src/Avatar/utils.ts
-function f(e) {
+function h(e) {
 	if (!e.length) return "";
 	let t = e.trim().split(/\s+/).map((e) => e.match(/\p{L}\p{M}*/u)?.[0]).filter((e) => !!e);
 	return `${t[0] ?? ""}${t.length > 1 ? t.at(-1) ?? "" : ""}`.toLocaleUpperCase();
 }
 //#endregion
 //#region src/Avatar/Avatar.tsx
-function p({ name: e, src: t, size: n = "medium", className: r, ...i }) {
-	let [a, o] = s(), l = !!t && t !== a;
-	return /* @__PURE__ */ c("span", {
+function g({ name: t, src: n, size: r = "medium", className: i, ...a }) {
+	let [o, s] = l(), c = !!n && n !== o;
+	return /* @__PURE__ */ e("span", {
 		role: "img",
-		"aria-label": e,
-		...i,
-		className: d("tintora-avatar", `tintora-avatar--${n}`, r),
-		children: l ? /* @__PURE__ */ c("img", {
-			src: t,
+		"aria-label": t,
+		...a,
+		className: d("tintora-avatar", `tintora-avatar--${r}`, i),
+		children: c ? /* @__PURE__ */ e("img", {
+			src: n,
 			alt: "",
-			onError: () => o(t)
-		}) : f(e)
+			onError: () => s(n)
+		}) : h(t)
 	});
 }
 //#endregion
 //#region src/Spinner/Spinner.tsx
-var m = {
+var _ = {
 	small: {
 		width: 16,
 		height: 16,
@@ -58,87 +127,87 @@ var m = {
 		strokeWidth: 2.4
 	}
 };
-function h({ size: e = "medium", color: t = "accent" }) {
-	let { width: n, height: r, strokeWidth: i } = m[e];
-	return /* @__PURE__ */ l("svg", {
+function v({ size: n = "medium", color: r = "accent" }) {
+	let { width: i, height: a, strokeWidth: o } = _[n];
+	return /* @__PURE__ */ t("svg", {
 		className: "tintora-spinner",
-		width: n,
-		height: r,
+		width: i,
+		height: a,
 		viewBox: "0 0 24 24",
 		fill: "none",
 		role: "img",
 		"aria-label": "Loading",
-		children: [/* @__PURE__ */ c("circle", {
+		children: [/* @__PURE__ */ e("circle", {
 			cx: "12",
 			cy: "12",
 			r: "9",
 			stroke: "currentColor",
-			strokeOpacity: t === "accent" ? .25 : .35,
-			strokeWidth: i
-		}), /* @__PURE__ */ c("path", {
+			strokeOpacity: r === "accent" ? .25 : .35,
+			strokeWidth: o
+		}), /* @__PURE__ */ e("path", {
 			d: "M21 12a9 9 0 0 0-9-9",
-			stroke: t === "accent" ? "var(--tintora-control-fill)" : "currentColor",
-			strokeWidth: i,
+			stroke: r === "accent" ? "var(--tintora-control-fill)" : "currentColor",
+			strokeWidth: o,
 			strokeLinecap: "round"
 		})]
 	});
 }
 //#endregion
 //#region src/Button/Button.tsx
-function g({ children: e, className: t, variant: n, size: r = "medium", leadingIcon: i, trailingIcon: a, type: o = "button", loading: s = !1, disabled: u, ...f }) {
-	return /* @__PURE__ */ l("button", {
-		type: o,
-		className: d("tintora-button", `tintora-button--${n}`, `tintora-button--${r}`, {
-			"tintora-button--leading-icon": !!i || s,
-			"tintora-button--loading": s,
-			"tintora-button--trailing-icon": !!a
-		}, t),
-		disabled: u || s,
-		"aria-busy": s || void 0,
+function y({ children: n, className: r, variant: i, size: a = "medium", leadingIcon: o, trailingIcon: s, type: c = "button", loading: l = !1, disabled: u, ...f }) {
+	return /* @__PURE__ */ t("button", {
+		type: c,
+		className: d("tintora-button", `tintora-button--${i}`, `tintora-button--${a}`, {
+			"tintora-button--leading-icon": !!o || l,
+			"tintora-button--loading": l,
+			"tintora-button--trailing-icon": !!s
+		}, r),
+		disabled: u || l,
+		"aria-busy": l || void 0,
 		...f,
 		children: [
-			s && /* @__PURE__ */ c("span", {
+			l && /* @__PURE__ */ e("span", {
 				className: "tintora-button__icon",
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ c(h, {
+				children: /* @__PURE__ */ e(v, {
 					size: "small",
 					color: "current"
 				})
 			}),
-			!s && i && /* @__PURE__ */ c("span", {
+			!l && o && /* @__PURE__ */ e("span", {
 				className: "tintora-button__icon",
 				"aria-hidden": "true",
-				children: i
+				children: o
 			}),
-			e,
-			a && /* @__PURE__ */ c("span", {
+			n,
+			s && /* @__PURE__ */ e("span", {
 				className: "tintora-button__icon",
 				"aria-hidden": "true",
-				children: a
+				children: s
 			})
 		]
 	});
 }
 //#endregion
 //#region src/Card/Card.tsx
-function _({ as: e = "article", variant: t = "surface", className: n, ...r }) {
-	return /* @__PURE__ */ c(e, {
-		...r,
-		className: d("tintora-card", `tintora-card--${t}`, n)
+function b({ as: t = "article", variant: n = "surface", className: r, ...i }) {
+	return /* @__PURE__ */ e(t, {
+		...i,
+		className: d("tintora-card", `tintora-card--${n}`, r)
 	});
 }
-function v({ selected: e = !1, className: t, ...n }) {
-	return /* @__PURE__ */ c("button", {
-		...n,
+function x({ selected: t = !1, className: n, ...r }) {
+	return /* @__PURE__ */ e("button", {
+		...r,
 		type: "button",
-		"aria-pressed": e,
-		className: d("tintora-card", "tintora-card--surface", "tintora-card--selectable", e && "tintora-card--selected", t)
+		"aria-pressed": t,
+		className: d("tintora-card", "tintora-card--surface", "tintora-card--selectable", t && "tintora-card--selected", n)
 	});
 }
 //#endregion
 //#region src/hooks/useCheckedState.ts
-function y({ checked: e, defaultChecked: t = !1, onCheckedChange: n }) {
-	let [r, i] = s(t), a = e !== void 0;
+function S({ checked: e, defaultChecked: t = !1, onCheckedChange: n }) {
+	let [r, i] = l(t), a = e !== void 0;
 	return {
 		checked: a ? e : r,
 		onChange: (e) => {
@@ -148,27 +217,27 @@ function y({ checked: e, defaultChecked: t = !1, onCheckedChange: n }) {
 }
 //#endregion
 //#region src/Checkbox/Checkbox.tsx
-function b({ checked: e, defaultChecked: t, onCheckedChange: n, indeterminate: r = !1, className: i, ...s }) {
-	let u = o(null), f = y({
-		checked: e,
-		defaultChecked: t,
-		onCheckedChange: n
+function C({ checked: n, defaultChecked: r, onCheckedChange: i, indeterminate: a = !1, className: o, ...l }) {
+	let u = c(null), f = S({
+		checked: n,
+		defaultChecked: r,
+		onCheckedChange: i
 	});
-	return a(() => {
-		u.current && (u.current.indeterminate = r);
-	}), /* @__PURE__ */ l("span", {
-		className: d("tintora-checkbox", i),
-		children: [/* @__PURE__ */ c("input", {
-			...s,
+	return s(() => {
+		u.current && (u.current.indeterminate = a);
+	}), /* @__PURE__ */ t("span", {
+		className: d("tintora-checkbox", o),
+		children: [/* @__PURE__ */ e("input", {
+			...l,
 			ref: u,
 			type: "checkbox",
 			className: "tintora-checkbox__input",
 			checked: f.checked,
 			onChange: f.onChange
-		}), /* @__PURE__ */ l("span", {
+		}), /* @__PURE__ */ t("span", {
 			className: "tintora-checkbox__box",
 			"aria-hidden": "true",
-			children: [/* @__PURE__ */ c("svg", {
+			children: [/* @__PURE__ */ e("svg", {
 				className: "tintora-checkbox__check",
 				width: "14",
 				height: "14",
@@ -177,8 +246,8 @@ function b({ checked: e, defaultChecked: t, onCheckedChange: n, indeterminate: r
 				strokeWidth: "3.2",
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
-				children: /* @__PURE__ */ c("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
-			}), /* @__PURE__ */ c("svg", {
+				children: /* @__PURE__ */ e("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
+			}), /* @__PURE__ */ e("svg", {
 				className: "tintora-checkbox__dash",
 				width: "14",
 				height: "14",
@@ -186,58 +255,58 @@ function b({ checked: e, defaultChecked: t, onCheckedChange: n, indeterminate: r
 				fill: "none",
 				strokeWidth: "3.2",
 				strokeLinecap: "round",
-				children: /* @__PURE__ */ c("path", { d: "M6 12h12" })
+				children: /* @__PURE__ */ e("path", { d: "M6 12h12" })
 			})]
 		})]
 	});
 }
 //#endregion
 //#region src/Chip/Chip.tsx
-function x({ children: e, selected: t, className: n, "aria-pressed": r, ...i }) {
-	return /* @__PURE__ */ c("button", {
-		...i,
+function w({ children: t, selected: n, className: r, "aria-pressed": i, ...a }) {
+	return /* @__PURE__ */ e("button", {
+		...a,
 		type: "button",
-		className: d("tintora-chip", n),
-		"aria-pressed": t ?? r,
-		children: e
+		className: d("tintora-chip", r),
+		"aria-pressed": n ?? i,
+		children: t
 	});
 }
 //#endregion
 //#region src/Dot/Dot.tsx
-function S({ variant: e = "unread", label: t, className: n, ...r }) {
-	return /* @__PURE__ */ c("span", {
-		...r,
-		className: d("tintora-dot", `tintora-dot--${e}`, n),
-		role: t ? "img" : void 0,
-		"aria-label": t,
-		"aria-hidden": !t || void 0
+function T({ variant: t = "unread", label: n, className: r, ...i }) {
+	return /* @__PURE__ */ e("span", {
+		...i,
+		className: d("tintora-dot", `tintora-dot--${t}`, r),
+		role: n ? "img" : void 0,
+		"aria-label": n,
+		"aria-hidden": !n || void 0
 	});
 }
 //#endregion
 //#region src/IconButton/IconButton.tsx
-var C = {
+var E = {
 	round: "secondary",
 	field: "secondary",
 	nav: "ghost"
 };
-function w({ icon: e, variant: t = "round", size: n, selected: r, className: i, ...a }) {
-	let o = t === "round" ? n ?? "large" : void 0;
-	return /* @__PURE__ */ c(g, {
-		...a,
-		variant: C[t],
-		"aria-current": r ? "page" : void 0,
-		className: d("tintora-icon-button", `tintora-icon-button--${t}`, o && `tintora-icon-button--${o}`, i),
-		...o && { size: o },
-		children: /* @__PURE__ */ c("span", {
+function D({ icon: t, variant: n = "round", size: r, selected: i, className: a, ...o }) {
+	let s = n === "round" ? r ?? "large" : void 0;
+	return /* @__PURE__ */ e(y, {
+		...o,
+		variant: E[n],
+		"aria-current": i ? "page" : void 0,
+		className: d("tintora-icon-button", `tintora-icon-button--${n}`, s && `tintora-icon-button--${s}`, a),
+		...s && { size: s },
+		children: /* @__PURE__ */ e("span", {
 			className: "tintora-icon-button__icon",
 			"aria-hidden": "true",
-			children: e
+			children: t
 		})
 	});
 }
 //#endregion
 //#region src/Modal/Modal.tsx
-var T = () => /* @__PURE__ */ c("svg", {
+var O = () => /* @__PURE__ */ e("svg", {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 24 24",
@@ -245,53 +314,53 @@ var T = () => /* @__PURE__ */ c("svg", {
 	stroke: "currentColor",
 	strokeWidth: "2",
 	strokeLinecap: "round",
-	children: /* @__PURE__ */ c("path", { d: "M18 6L6 18M6 6l12 12" })
+	children: /* @__PURE__ */ e("path", { d: "M18 6L6 18M6 6l12 12" })
 });
-function E({ open: e, onClose: t, title: n, description: a, icon: s, status: u = "info", actions: f, size: p = "md", align: m = "start", role: h = "dialog", closeButton: g = !0, className: _, children: v, ...y }) {
-	let b = o(null), x = i(), S = i();
-	return r(() => {
-		let t = b.current;
-		t && (e && !t.open ? (t.showModal(), t.querySelector("[data-autofocus]")?.focus()) : !e && t.open && t.close());
-	}, [e]), /* @__PURE__ */ l("dialog", {
+function k({ open: n, onClose: r, title: i, description: s, icon: l, status: u = "info", actions: f, size: p = "md", align: m = "start", role: h = "dialog", closeButton: g = !0, className: _, children: v, ...y }) {
+	let b = c(null), x = o(), S = o();
+	return a(() => {
+		let e = b.current;
+		e && (n && !e.open ? (e.showModal(), e.querySelector("[data-autofocus]")?.focus()) : !n && e.open && e.close());
+	}, [n]), /* @__PURE__ */ t("dialog", {
 		...y,
 		ref: b,
 		role: h,
 		"aria-labelledby": x,
-		"aria-describedby": a ? S : void 0,
+		"aria-describedby": s ? S : void 0,
 		className: d("tintora-modal", `tintora-modal--${p}`, m === "center" && "tintora-modal--center", _),
 		onCancel: (e) => {
-			e.preventDefault(), t();
+			e.preventDefault(), r();
 		},
 		onClick: (e) => {
-			h === "dialog" && e.target === e.currentTarget && t();
+			h === "dialog" && e.target === e.currentTarget && r();
 		},
 		children: [
-			s && /* @__PURE__ */ c("span", {
+			l && /* @__PURE__ */ e("span", {
 				className: d("tintora-modal__icon", `tintora-modal__icon--${u}`),
 				"aria-hidden": "true",
-				children: s
+				children: l
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ t("div", {
 				className: "tintora-modal__text",
-				children: [/* @__PURE__ */ c("h2", {
+				children: [/* @__PURE__ */ e("h2", {
 					id: x,
 					className: "tintora-modal__title",
-					children: n
-				}), a && /* @__PURE__ */ c("p", {
+					children: i
+				}), s && /* @__PURE__ */ e("p", {
 					id: S,
 					className: "tintora-modal__description",
-					children: a
+					children: s
 				})]
 			}),
-			g && /* @__PURE__ */ c(w, {
+			g && /* @__PURE__ */ e(D, {
 				className: "tintora-modal__close",
 				size: "medium",
 				"aria-label": "Close",
-				icon: /* @__PURE__ */ c(T, {}),
-				onClick: t
+				icon: /* @__PURE__ */ e(O, {}),
+				onClick: r
 			}),
 			v,
-			f && /* @__PURE__ */ c("div", {
+			f && /* @__PURE__ */ e("div", {
 				className: "tintora-modal__actions",
 				children: f
 			})
@@ -299,32 +368,203 @@ function E({ open: e, onClose: t, title: n, description: a, icon: s, status: u =
 	});
 }
 //#endregion
+//#region src/hooks/useLatest.ts
+function A(e) {
+	let t = c(e);
+	return a(() => {
+		t.current = e;
+	}, [e]), t;
+}
+//#endregion
+//#region src/hooks/useEscapeKey.ts
+function j(e, t) {
+	let n = A(t);
+	a(() => {
+		if (!e) return;
+		let t = (e) => {
+			e.key === "Escape" && n.current();
+		};
+		return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+	}, [e, n]);
+}
+//#endregion
+//#region src/hooks/useOutsidePress.ts
+function M(e, t, n) {
+	let r = A(n);
+	a(() => {
+		if (!e) return;
+		let n = (e) => {
+			t.current?.contains(e.target) || r.current();
+		};
+		return document.addEventListener("pointerdown", n), () => document.removeEventListener("pointerdown", n);
+	}, [
+		e,
+		t,
+		r
+	]);
+}
+//#endregion
+//#region src/hooks/useTopLayerPosition.ts
+function N(e, t, n, r) {
+	let [i, a] = l(null);
+	return s(() => {
+		let r = t.current;
+		if (!e || !r) {
+			a(null);
+			return;
+		}
+		r.showPopover();
+		let i = () => a(n()), o = (e) => {
+			r.contains(e.target) || i();
+		};
+		return i(), window.addEventListener("scroll", o, !0), window.addEventListener("resize", i), () => {
+			window.removeEventListener("scroll", o, !0), window.removeEventListener("resize", i);
+		};
+	}, [
+		e,
+		t,
+		...r
+	]), i;
+}
+//#endregion
+//#region src/utils/placement.ts
+var P = {
+	gap: 10,
+	margin: 8,
+	arrowInset: 12
+}, F = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+}, I = (e, t, n) => Math.min(Math.max(e, t), Math.max(t, n));
+function L(e, t, n, r, { gap: i, margin: a }) {
+	let o = (t) => {
+		switch (t) {
+			case "top": return e.top;
+			case "bottom": return r.height - e.bottom;
+			case "left": return e.left;
+			case "right": return r.width - e.right;
+		}
+	}, s = (n === "top" || n === "bottom" ? t.height : t.width) + i + a, c = o(n);
+	return c >= s || o(F[n]) <= c ? n : F[n];
+}
+function R(e, t, n, r = {
+	width: window.innerWidth,
+	height: window.innerHeight
+}, i = {}) {
+	let a = {
+		...P,
+		...i
+	}, { gap: o, margin: s, arrowInset: c } = a, l = L(e, t, n, r, a), u = l === "top" || l === "bottom", d, f;
+	switch (l) {
+		case "top":
+			d = e.y - t.height - o, f = e.x + e.width / 2 - t.width / 2;
+			break;
+		case "bottom":
+			d = e.y + e.height + o, f = e.x + e.width / 2 - t.width / 2;
+			break;
+		case "left":
+			d = e.y + e.height / 2 - t.height / 2, f = e.x - t.width - o;
+			break;
+		case "right": d = e.y + e.height / 2 - t.height / 2, f = e.x + e.width + o;
+	}
+	u ? f = I(f, s, r.width - t.width - s) : d = I(d, s, r.height - t.height - s);
+	let p = u ? e.x + e.width / 2 - f : e.y + e.height / 2 - d, m = u ? t.width : t.height;
+	return {
+		top: d,
+		left: f,
+		placement: l,
+		arrowOffset: I(p, c, m - c)
+	};
+}
+//#endregion
+//#region src/Popover/Popover.tsx
+var z = [
+	"button:not([disabled])",
+	"[href]",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", ");
+function B({ open: r, onOpenChange: i, trigger: l, title: u, children: f, role: p = "dialog", size: m = "md", placement: h = "bottom", className: g }) {
+	let _ = o(), v = c(null), y = c(null), b = c(!1), x = () => i(!1);
+	j(r, x), M(r, v, x);
+	let S = (e) => {
+		l.props.onClick?.(e), e.defaultPrevented || i(!r);
+	}, C = N(r, y, () => {
+		let e = y.current, t = v.current?.firstElementChild;
+		return !e || !t ? null : R(t.getBoundingClientRect(), {
+			width: e.offsetWidth,
+			height: e.offsetHeight
+		}, h, void 0, { gap: 12 });
+	}, [
+		h,
+		u,
+		f
+	]), w = C ? {
+		top: C.top,
+		left: C.left,
+		"--tintora-popover-arrow-offset": `${C.arrowOffset}px`
+	} : { visibility: "hidden" }, T = C !== null;
+	return s(() => {
+		let e = y.current;
+		r && T && e && (e.querySelector("[data-autofocus]") ?? e.querySelector(z) ?? e).focus();
+	}, [r, T]), a(() => {
+		if (b.current && !r) {
+			let e = document.activeElement;
+			(!e || e === document.body) && v.current?.querySelector("*")?.focus();
+		}
+		b.current = r;
+	}, [r]), /* @__PURE__ */ t("span", {
+		ref: v,
+		className: "tintora-popover-root",
+		children: [n(l, {
+			"aria-haspopup": "dialog",
+			"aria-expanded": r,
+			"aria-controls": r ? _ : void 0,
+			onClick: S
+		}), r && /* @__PURE__ */ e("div", {
+			id: _,
+			ref: y,
+			role: p,
+			"aria-label": u,
+			popover: "manual",
+			tabIndex: -1,
+			className: d("tintora-popover", `tintora-popover--${m}`, `tintora-popover--${C?.placement ?? h}`, g),
+			style: w,
+			children: f
+		})]
+	});
+}
+//#endregion
 //#region src/ProgressBar/ProgressBar.tsx
-function D({ title: e, progress: t, indeterminate: n, valueLabel: r, className: a, "aria-label": o }) {
-	let s = i(), u = n ? void 0 : Math.min(100, Math.max(0, Number.isFinite(t) ? t : 0)), f = u === 100, p = r ?? (n ? "Indeterminate" : `${u}%`);
-	return /* @__PURE__ */ l("div", {
-		className: d("tintora-progress-bar", a),
-		children: [e && /* @__PURE__ */ l("div", {
+function V({ title: n, progress: r, indeterminate: i, valueLabel: a, className: s, "aria-label": c }) {
+	let l = o(), u = i ? void 0 : Math.min(100, Math.max(0, Number.isFinite(r) ? r : 0)), f = u === 100, p = a ?? (i ? "Indeterminate" : `${u}%`);
+	return /* @__PURE__ */ t("div", {
+		className: d("tintora-progress-bar", s),
+		children: [n && /* @__PURE__ */ t("div", {
 			className: "tintora-progress-bar__header",
-			children: [/* @__PURE__ */ c("span", {
-				id: s,
-				children: e
-			}), /* @__PURE__ */ c("span", {
+			children: [/* @__PURE__ */ e("span", {
+				id: l,
+				children: n
+			}), /* @__PURE__ */ e("span", {
 				className: "tintora-progress-bar__value",
 				children: p
 			})]
-		}), /* @__PURE__ */ c("div", {
+		}), /* @__PURE__ */ e("div", {
 			role: "progressbar",
-			"aria-label": o,
-			"aria-labelledby": e ? s : void 0,
-			"aria-valuemin": n ? void 0 : 0,
-			"aria-valuemax": n ? void 0 : 100,
+			"aria-label": c,
+			"aria-labelledby": n ? l : void 0,
+			"aria-valuemin": i ? void 0 : 0,
+			"aria-valuemax": i ? void 0 : 100,
 			"aria-valuenow": u,
-			"aria-valuetext": r,
+			"aria-valuetext": a,
 			className: "tintora-progress-bar__track",
-			children: /* @__PURE__ */ c("div", {
+			children: /* @__PURE__ */ e("div", {
 				className: d("tintora-progress-bar__fill", {
-					"tintora-progress-bar__fill--indeterminate": n,
+					"tintora-progress-bar__fill--indeterminate": i,
 					"tintora-progress-bar__fill--complete": f
 				}),
 				style: u === void 0 ? void 0 : { width: `${u}%` }
@@ -334,28 +574,28 @@ function D({ title: e, progress: t, indeterminate: n, valueLabel: r, className:
 }
 //#endregion
 //#region src/Radio/RadioContext.ts
-var O = t(null);
-function k() {
-	let e = n(O);
+var H = r(null);
+function U() {
+	let e = i(H);
 	if (!e) throw Error("Radio must be rendered inside a RadioGroup");
 	return e;
 }
 //#endregion
 //#region src/Radio/Radio.tsx
-function A({ value: e, className: t, disabled: n, ...r }) {
-	let i = k();
-	return /* @__PURE__ */ l("span", {
-		className: d("tintora-radio", t),
-		children: [/* @__PURE__ */ c("input", {
-			...r,
+function W({ value: n, className: r, disabled: i, ...a }) {
+	let o = U();
+	return /* @__PURE__ */ t("span", {
+		className: d("tintora-radio", r),
+		children: [/* @__PURE__ */ e("input", {
+			...a,
 			type: "radio",
 			className: "tintora-radio__input",
-			name: i.name,
-			value: e,
-			checked: i.value === e,
-			disabled: n || i.disabled,
-			onChange: () => i.select(e)
-		}), /* @__PURE__ */ c("span", {
+			name: o.name,
+			value: n,
+			checked: o.value === n,
+			disabled: i || o.disabled,
+			onChange: () => o.select(n)
+		}), /* @__PURE__ */ e("span", {
 			className: "tintora-radio__circle",
 			"aria-hidden": "true"
 		})]
@@ -363,30 +603,30 @@ function A({ value: e, className: t, disabled: n, ...r }) {
 }
 //#endregion
 //#region src/Radio/RadioGroup.tsx
-function j({ value: e, defaultValue: t, onValueChange: n, disabled: r = !1, name: a, className: o, ...l }) {
-	let u = i(), [f, p] = s(t ?? null), m = e !== void 0, h = m ? e : f;
-	return /* @__PURE__ */ c(O.Provider, {
+function G({ value: t, defaultValue: n, onValueChange: r, disabled: i = !1, name: a, className: s, ...c }) {
+	let u = o(), [f, p] = l(n ?? null), m = t !== void 0, h = m ? t : f;
+	return /* @__PURE__ */ e(H.Provider, {
 		value: {
 			name: a ?? u,
 			value: h,
 			select: (e) => {
-				e !== h && (m || p(e), n?.(e));
+				e !== h && (m || p(e), r?.(e));
 			},
-			disabled: r
+			disabled: i
 		},
-		children: /* @__PURE__ */ c("div", {
-			...l,
+		children: /* @__PURE__ */ e("div", {
+			...c,
 			role: "radiogroup",
-			className: d("tintora-radio-group", o)
+			className: d("tintora-radio-group", s)
 		})
 	});
 }
 //#endregion
 //#region src/SearchInput/SearchInput.tsx
-function M({ className: e, disabled: t, ...n }) {
-	return /* @__PURE__ */ l("label", {
-		className: d("tintora-search-input", t && "tintora-search-input--disabled", e),
-		children: [/* @__PURE__ */ l("svg", {
+function K({ className: n, disabled: r, ...i }) {
+	return /* @__PURE__ */ t("label", {
+		className: d("tintora-search-input", r && "tintora-search-input--disabled", n),
+		children: [/* @__PURE__ */ t("svg", {
 			className: "tintora-search-input__icon",
 			viewBox: "0 0 24 24",
 			fill: "none",
@@ -394,154 +634,107 @@ function M({ className: e, disabled: t, ...n }) {
 			strokeWidth: "2",
 			strokeLinecap: "round",
 			"aria-hidden": "true",
-			children: [/* @__PURE__ */ c("circle", {
+			children: [/* @__PURE__ */ e("circle", {
 				cx: "11",
 				cy: "11",
 				r: "7"
-			}), /* @__PURE__ */ c("path", { d: "M20 20l-3.5-3.5" })]
-		}), /* @__PURE__ */ c("input", {
-			...n,
+			}), /* @__PURE__ */ e("path", { d: "M20 20l-3.5-3.5" })]
+		}), /* @__PURE__ */ e("input", {
+			...i,
 			type: "search",
-			disabled: t,
+			disabled: r,
 			className: "tintora-search-input__input"
 		})]
 	});
 }
 //#endregion
-//#region src/hooks/useLatest.ts
-function N(e) {
-	let t = o(e);
-	return r(() => {
-		t.current = e;
-	}, [e]), t;
-}
-//#endregion
-//#region src/hooks/useOutsidePress.ts
-function P(e, t, n) {
-	let i = N(n);
-	r(() => {
-		if (!e) return;
-		let n = (e) => {
-			t.current?.contains(e.target) || i.current();
-		};
-		return document.addEventListener("pointerdown", n), () => document.removeEventListener("pointerdown", n);
-	}, [
-		e,
-		t,
-		i
-	]);
-}
-//#endregion
-//#region src/hooks/useTopLayerPosition.ts
-function F(e, t, n, r) {
-	let [i, o] = s(null);
-	return a(() => {
-		let r = t.current;
-		if (!e || !r) {
-			o(null);
-			return;
-		}
-		r.showPopover();
-		let i = () => o(n()), a = (e) => {
-			r.contains(e.target) || i();
-		};
-		return i(), window.addEventListener("scroll", a, !0), window.addEventListener("resize", i), () => {
-			window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", i);
-		};
-	}, [
-		e,
-		t,
-		...r
-	]), i;
-}
-//#endregion
 //#region src/Select/SelectContext.ts
-var I = t(null), L = () => {
-	let e = n(I);
+var q = r(null), J = () => {
+	let e = i(q);
 	if (!e) throw Error("SelectOption must be rendered inside a Select");
 	return e;
 };
 //#endregion
 //#region src/Select/SelectOption.tsx
-function ee({ label: e, value: t, disabled: n }) {
-	let { select: r, activate: i, optionId: a, value: o, activeValue: s } = L();
-	return /* @__PURE__ */ c("div", {
-		id: a(t),
+function ee({ label: t, value: n, disabled: r }) {
+	let { select: i, activate: a, optionId: o, value: s, activeValue: c } = J();
+	return /* @__PURE__ */ e("div", {
+		id: o(n),
 		role: "option",
-		"aria-selected": o === t,
-		"aria-disabled": n || void 0,
-		className: d("tintora-select__option", s === t && "tintora-select__option--active"),
-		onClick: () => r(t),
-		onMouseMove: () => !n && i(t),
-		children: e
+		"aria-selected": s === n,
+		"aria-disabled": r || void 0,
+		className: d("tintora-select__option", c === n && "tintora-select__option--active"),
+		onClick: () => i(n),
+		onMouseMove: () => !r && a(n),
+		children: t
 	});
 }
 //#endregion
 //#region src/Select/Select.tsx
-var R = 4;
-function z({ defaultValue: e, options: t, disabled: n, value: a, placeholder: u, onValueChange: f, name: p, className: m, onClick: h, onKeyDown: g, onKeyUp: _, "aria-label": v, ...y }) {
-	let b = i(), x = o(null), S = o(null), C = o(null), [w, T] = s(e ?? null), [E, D] = s(!1), [O, k] = s(-1), A = a !== void 0, j = A ? a : w, M = t.findIndex((e) => e.value === j), N = (e) => t[e]?.disabled !== !0, L = () => t.findIndex((e, t) => N(t)), z = (e, n) => {
-		for (let r = e + n; r >= 0 && r < t.length; r += n) if (N(r)) return r;
+var Y = 4;
+function X({ defaultValue: n, options: r, disabled: i, value: s, placeholder: u, onValueChange: f, name: p, className: m, onClick: h, onKeyDown: g, onKeyUp: _, "aria-label": v, ...y }) {
+	let b = o(), x = c(null), S = c(null), C = c(null), [w, T] = l(n ?? null), [E, D] = l(!1), [O, k] = l(-1), A = s !== void 0, j = A ? s : w, P = r.findIndex((e) => e.value === j), F = (e) => r[e]?.disabled !== !0, I = () => r.findIndex((e, t) => F(t)), L = (e, t) => {
+		for (let n = e + t; n >= 0 && n < r.length; n += t) if (F(n)) return n;
 		return e;
-	}, B = () => {
-		let e = z(t.length, -1);
-		return e === t.length ? -1 : e;
-	}, V = (e) => t.findIndex((t) => t.value === e), H = () => {
-		k(M >= 0 && N(M) ? M : L()), D(!0);
-	}, U = () => D(!1), W = (e) => {
-		let t = V(e);
-		t < 0 || !N(t) || (U(), e !== j && (A || T(e), f?.(e)));
-	}, G = (e) => {
+	}, R = () => {
+		let e = L(r.length, -1);
+		return e === r.length ? -1 : e;
+	}, z = (e) => r.findIndex((t) => t.value === e), B = () => {
+		k(P >= 0 && F(P) ? P : I()), D(!0);
+	}, V = () => D(!1), H = (e) => {
+		let t = z(e);
+		t < 0 || !F(t) || (V(), e !== j && (A || T(e), f?.(e)));
+	}, U = (e) => {
 		if (g?.(e), e.defaultPrevented) return;
-		let { key: n } = e;
-		if (n === "Tab") return U();
+		let { key: t } = e;
+		if (t === "Tab") return V();
 		if (!E) {
 			[
 				"Enter",
 				" ",
 				"ArrowDown",
 				"ArrowUp"
-			].includes(n) && (e.preventDefault(), H());
+			].includes(t) && (e.preventDefault(), B());
 			return;
 		}
-		let r = {
-			ArrowDown: () => O < 0 ? L() : z(O, 1),
-			ArrowUp: () => O < 0 ? L() : z(O, -1),
-			Home: L,
-			End: B
+		let n = {
+			ArrowDown: () => O < 0 ? I() : L(O, 1),
+			ArrowUp: () => O < 0 ? I() : L(O, -1),
+			Home: I,
+			End: R
 		};
-		n in r ? (e.preventDefault(), k(r[n]())) : n === "Enter" || n === " " ? (e.preventDefault(), O >= 0 ? W(t[O].value) : U()) : n === "Escape" && (e.preventDefault(), U());
-	}, K = (e) => {
+		t in n ? (e.preventDefault(), k(n[t]())) : t === "Enter" || t === " " ? (e.preventDefault(), O >= 0 ? H(r[O].value) : V()) : t === "Escape" && (e.preventDefault(), V());
+	}, W = (e) => {
 		_?.(e), e.key === " " && e.preventDefault();
-	}, q = F(E, C, () => {
+	}, G = N(E, C, () => {
 		let e = C.current, t = S.current;
 		if (!e || !t) return null;
-		let n = t.getBoundingClientRect(), r = e.offsetHeight, i = n.bottom + R + r <= window.innerHeight, a = n.top - R - r >= 0;
+		let n = t.getBoundingClientRect(), r = e.offsetHeight, i = n.bottom + Y + r <= window.innerHeight, a = n.top - Y - r >= 0;
 		return {
-			top: i || !a ? n.bottom + R : n.top - R - r,
+			top: i || !a ? n.bottom + Y : n.top - Y - r,
 			left: n.left,
 			minWidth: n.width
 		};
-	}, []), J = (e) => {
-		h?.(e), !e.defaultPrevented && (E ? U() : H());
+	}, []), K = (e) => {
+		h?.(e), !e.defaultPrevented && (E ? V() : B());
 	};
-	P(E, x, U), r(() => {
+	M(E, x, V), a(() => {
 		E && O >= 0 && C.current?.children.item(O)?.scrollIntoView?.({ block: "nearest" });
 	}, [E, O]);
-	let Y = (e) => `${b}-option-${V(e)}`, X = E ? t[O]?.value ?? null : null, Z = t[M]?.label;
-	return /* @__PURE__ */ c(I.Provider, {
+	let J = (e) => `${b}-option-${z(e)}`, X = E ? r[O]?.value ?? null : null, Z = r[P]?.label;
+	return /* @__PURE__ */ e(q.Provider, {
 		value: {
 			value: j,
 			activeValue: X,
-			select: W,
-			optionId: Y,
-			activate: (e) => k(V(e))
+			select: H,
+			optionId: J,
+			activate: (e) => k(z(e))
 		},
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ t("div", {
 			ref: x,
 			className: "tintora-select",
 			children: [
-				/* @__PURE__ */ l("button", {
+				/* @__PURE__ */ t("button", {
 					...y,
 					ref: S,
 					type: "button",
@@ -550,16 +743,16 @@ function z({ defaultValue: e, options: t, disabled: n, value: a, placeholder: u,
 					"aria-haspopup": "listbox",
 					"aria-expanded": E,
 					"aria-controls": E ? b : void 0,
-					"aria-activedescendant": X === null ? void 0 : Y(X),
-					disabled: n,
+					"aria-activedescendant": X === null ? void 0 : J(X),
+					disabled: i,
 					className: d("tintora-select__trigger", m),
-					onClick: J,
-					onKeyDown: G,
-					onKeyUp: K,
-					children: [/* @__PURE__ */ c("span", {
+					onClick: K,
+					onKeyDown: U,
+					onKeyUp: W,
+					children: [/* @__PURE__ */ e("span", {
 						className: d("tintora-select__value", Z === void 0 && "tintora-select__value--placeholder"),
 						children: Z ?? u
-					}), /* @__PURE__ */ c("svg", {
+					}), /* @__PURE__ */ e("svg", {
 						className: "tintora-select__chevron",
 						width: "10",
 						height: "10",
@@ -570,25 +763,25 @@ function z({ defaultValue: e, options: t, disabled: n, value: a, placeholder: u,
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ c("path", { d: "M6 9l6 6 6-6" })
+						children: /* @__PURE__ */ e("path", { d: "M6 9l6 6 6-6" })
 					})]
 				}),
-				E && /* @__PURE__ */ c("div", {
+				E && /* @__PURE__ */ e("div", {
 					ref: C,
 					id: b,
 					role: "listbox",
 					"aria-label": v,
 					popover: "manual",
 					className: "tintora-select__menu",
-					style: q ?? {},
+					style: G ?? {},
 					onMouseDown: (e) => e.preventDefault(),
-					children: t.map((e) => /* @__PURE__ */ c(ee, { ...e }, e.value))
+					children: r.map((t) => /* @__PURE__ */ e(ee, { ...t }, t.value))
 				}),
-				p && /* @__PURE__ */ c("input", {
+				p && /* @__PURE__ */ e("input", {
 					type: "hidden",
 					name: p,
 					value: j ?? "",
-					disabled: n
+					disabled: i
 				})
 			]
 		})
@@ -596,39 +789,39 @@ function z({ defaultValue: e, options: t, disabled: n, value: a, placeholder: u,
 }
 //#endregion
 //#region src/Skeleton/Skeleton.tsx
-function B({ width: e, height: t, className: n, style: r, ...i }) {
-	let a = {
-		...e !== void 0 && { width: e },
-		...t !== void 0 && { height: t }
+function Z({ width: t, height: n, className: r, style: i, ...a }) {
+	let o = {
+		...t !== void 0 && { width: t },
+		...n !== void 0 && { height: n }
 	};
-	return /* @__PURE__ */ c("span", {
-		...i,
+	return /* @__PURE__ */ e("span", {
+		...a,
 		"aria-hidden": "true",
-		className: d("tintora-skeleton", n),
+		className: d("tintora-skeleton", r),
 		style: {
-			...a,
-			...r
+			...o,
+			...i
 		}
 	});
 }
 //#endregion
 //#region src/Switch/Switch.tsx
-function V({ checked: e, defaultChecked: t, onCheckedChange: n, className: r, ...i }) {
-	let a = y({
-		checked: e,
-		defaultChecked: t,
-		onCheckedChange: n
-	});
-	return /* @__PURE__ */ l("span", {
-		className: d("tintora-switch", r),
-		children: [/* @__PURE__ */ c("input", {
-			...i,
+function te({ checked: n, defaultChecked: r, onCheckedChange: i, className: a, ...o }) {
+	let s = S({
+		checked: n,
+		defaultChecked: r,
+		onCheckedChange: i
+	});
+	return /* @__PURE__ */ t("span", {
+		className: d("tintora-switch", a),
+		children: [/* @__PURE__ */ e("input", {
+			...o,
 			type: "checkbox",
 			role: "switch",
 			className: "tintora-switch__input",
-			checked: a.checked,
-			onChange: a.onChange
-		}), /* @__PURE__ */ c("span", {
+			checked: s.checked,
+			onChange: s.onChange
+		}), /* @__PURE__ */ e("span", {
 			className: "tintora-switch__track",
 			"aria-hidden": "true"
 		})]
@@ -636,36 +829,36 @@ function V({ checked: e, defaultChecked: t, onCheckedChange: n, className: r, ..
 }
 //#endregion
 //#region src/Tag/Tag.tsx
-function H({ children: e, className: t, variant: n = "neutral", size: r = "medium", ...i }) {
-	return /* @__PURE__ */ c("span", {
-		...i,
-		className: d("tintora-tag", `tintora-tag--${n}`, `tintora-tag--${r}`, t),
-		children: e
+function ne({ children: t, className: n, variant: r = "neutral", size: i = "medium", ...a }) {
+	return /* @__PURE__ */ e("span", {
+		...a,
+		className: d("tintora-tag", `tintora-tag--${r}`, `tintora-tag--${i}`, n),
+		children: t
 	});
 }
 //#endregion
 //#region src/TextField/TextField.tsx
-function U({ label: e, hint: t, error: n, id: r, className: a, disabled: o, "aria-describedby": s, "aria-invalid": u, ...f }) {
-	let p = i(), m = r ?? p, h = `${m}-message`, g = n ?? t;
-	return /* @__PURE__ */ l("div", {
-		className: d("tintora-textfield", o && "tintora-textfield--disabled", a),
+function re({ label: n, hint: r, error: i, id: a, className: s, disabled: c, "aria-describedby": l, "aria-invalid": u, ...f }) {
+	let p = o(), m = a ?? p, h = `${m}-message`, g = i ?? r;
+	return /* @__PURE__ */ t("div", {
+		className: d("tintora-textfield", c && "tintora-textfield--disabled", s),
 		children: [
-			/* @__PURE__ */ c("label", {
+			/* @__PURE__ */ e("label", {
 				htmlFor: m,
 				className: "tintora-textfield__label",
-				children: e
+				children: n
 			}),
-			/* @__PURE__ */ c("input", {
+			/* @__PURE__ */ e("input", {
 				...f,
 				id: m,
-				disabled: o,
+				disabled: c,
 				className: "tintora-textfield__input",
-				"aria-invalid": n ? !0 : u,
-				"aria-describedby": d(g && h, s) || void 0
+				"aria-invalid": i ? !0 : u,
+				"aria-describedby": d(g && h, l) || void 0
 			}),
-			g && /* @__PURE__ */ c("span", {
+			g && /* @__PURE__ */ e("span", {
 				id: h,
-				className: d("tintora-textfield__hint", n && "tintora-textfield__hint--error"),
+				className: d("tintora-textfield__hint", i && "tintora-textfield__hint--error"),
 				children: g
 			})
 		]
@@ -673,8 +866,8 @@ function U({ label: e, hint: t, error: n, id: r, className: a, disabled: o, "ari
 }
 //#endregion
 //#region src/Toast/ToastIcons.tsx
-function W() {
-	return /* @__PURE__ */ c("svg", {
+function ie() {
+	return /* @__PURE__ */ e("svg", {
 		width: "20",
 		height: "20",
 		viewBox: "0 0 24 24",
@@ -685,11 +878,11 @@ function W() {
 		strokeLinejoin: "round",
 		"aria-hidden": "true",
 		style: { flex: "0 0 auto" },
-		children: /* @__PURE__ */ c("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8" })
+		children: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8" })
 	});
 }
-function G() {
-	return /* @__PURE__ */ c("svg", {
+function ae() {
+	return /* @__PURE__ */ e("svg", {
 		width: "20",
 		height: "20",
 		viewBox: "0 0 24 24",
@@ -700,11 +893,11 @@ function G() {
 		strokeLinejoin: "round",
 		"aria-hidden": "true",
 		style: { flex: "0 0 auto" },
-		children: /* @__PURE__ */ c("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6" })
+		children: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6" })
 	});
 }
-function K() {
-	return /* @__PURE__ */ c("svg", {
+function oe() {
+	return /* @__PURE__ */ e("svg", {
 		width: "20",
 		height: "20",
 		viewBox: "0 0 24 24",
@@ -715,11 +908,11 @@ function K() {
 		strokeLinejoin: "round",
 		"aria-hidden": "true",
 		style: { flex: "0 0 auto" },
-		children: /* @__PURE__ */ c("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01" })
+		children: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01" })
 	});
 }
-function q() {
-	return /* @__PURE__ */ c("svg", {
+function se() {
+	return /* @__PURE__ */ e("svg", {
 		width: "20",
 		height: "20",
 		viewBox: "0 0 24 24",
@@ -730,11 +923,11 @@ function q() {
 		strokeLinejoin: "round",
 		"aria-hidden": "true",
 		style: { flex: "0 0 auto" },
-		children: /* @__PURE__ */ c("path", { d: "M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01" })
+		children: /* @__PURE__ */ e("path", { d: "M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01" })
 	});
 }
-function J() {
-	return /* @__PURE__ */ c("svg", {
+function ce() {
+	return /* @__PURE__ */ e("svg", {
 		width: "14",
 		height: "14",
 		viewBox: "0 0 24 24",
@@ -743,34 +936,34 @@ function J() {
 		strokeWidth: "2.2",
 		strokeLinecap: "round",
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ c("path", { d: "M18 6L6 18M6 6l12 12" })
+		children: /* @__PURE__ */ e("path", { d: "M18 6L6 18M6 6l12 12" })
 	});
 }
 //#endregion
 //#region src/Toast/Toast.tsx
-var Y = {
-	success: /* @__PURE__ */ c(W, {}),
-	error: /* @__PURE__ */ c(G, {}),
-	info: /* @__PURE__ */ c(K, {}),
-	warning: /* @__PURE__ */ c(q, {})
+var Q = {
+	success: /* @__PURE__ */ e(ie, {}),
+	error: /* @__PURE__ */ e(ae, {}),
+	info: /* @__PURE__ */ e(oe, {}),
+	warning: /* @__PURE__ */ e(se, {})
 };
-function X({ status: e, children: t, action: n, onDismiss: i, duration: a = 5e3, timerBar: u = !1, className: f, ...p }) {
-	let [m, h] = s(!1), [g, _] = s(!1), v = m || g, y = N(i), b = o(a);
-	r(() => {
-		b.current = a;
-	}, [a]), r(() => {
-		if (a <= 0 || v) return;
+function le({ status: n, children: r, action: i, onDismiss: o, duration: s = 5e3, timerBar: u = !1, className: f, ...p }) {
+	let [m, h] = l(!1), [g, _] = l(!1), v = m || g, y = A(o), b = c(s);
+	a(() => {
+		b.current = s;
+	}, [s]), a(() => {
+		if (s <= 0 || v) return;
 		let e = Date.now(), t = setTimeout(() => y.current(), b.current);
 		return () => {
 			clearTimeout(t), b.current -= Date.now() - e;
 		};
 	}, [
-		a,
+		s,
 		v,
 		y
 	]);
-	let x = u && a > 0, S = { "--tintora-toast-animation-duration": `${a}ms` };
-	return /* @__PURE__ */ l("div", {
+	let x = u && s > 0, S = { "--tintora-toast-animation-duration": `${s}ms` };
+	return /* @__PURE__ */ t("div", {
 		...p,
 		role: "status",
 		className: d("tintora-toast", x && "tintora-toast--timer", v && "tintora-toast--paused", f),
@@ -787,25 +980,25 @@ function X({ status: e, children: t, action: n, onDismiss: i, duration: a = 5e3,
 			p.onBlur?.(e), e.currentTarget.contains(e.relatedTarget) || _(!1);
 		},
 		children: [
-			e && Y[e],
-			/* @__PURE__ */ c("span", {
+			n && Q[n],
+			/* @__PURE__ */ e("span", {
 				className: "tintora-toast__message",
-				children: t
+				children: r
 			}),
-			n && /* @__PURE__ */ c("button", {
+			i && /* @__PURE__ */ e("button", {
 				type: "button",
 				className: "tintora-toast__action",
-				onClick: n.onClick,
-				children: n.label
+				onClick: i.onClick,
+				children: i.label
 			}),
-			/* @__PURE__ */ c("button", {
+			/* @__PURE__ */ e("button", {
 				type: "button",
 				className: "tintora-toast__close",
 				"aria-label": "Dismiss",
-				onClick: i,
-				children: /* @__PURE__ */ c(J, {})
+				onClick: o,
+				children: /* @__PURE__ */ e(ce, {})
 			}),
-			x && /* @__PURE__ */ c("span", {
+			x && /* @__PURE__ */ e("span", {
 				className: "tintora-toast__progress",
 				style: S
 			})
@@ -814,20 +1007,20 @@ function X({ status: e, children: t, action: n, onDismiss: i, duration: a = 5e3,
 }
 //#endregion
 //#region src/Toggle/ToggleContext.ts
-var Z = t(null);
-function te() {
-	let e = n(Z);
+var $ = r(null);
+function ue() {
+	let e = i($);
 	if (!e) throw Error("ToggleItem must be rendered inside a Toggle");
 	return e;
 }
 //#endregion
 //#region src/Toggle/Toggle.tsx
-function ne({ children: e, value: t, defaultValue: n, onValueChange: r, disabled: i = !1, className: u, ...f }) {
-	let [p, m] = s(n), h = t !== void 0, g = h ? t : p, _ = e.findIndex((e) => e.props.value === g), v = o(null), [y, b] = s({
+function de({ children: n, value: r, defaultValue: i, onValueChange: a, disabled: o = !1, className: u, ...f }) {
+	let [p, m] = l(i), h = r !== void 0, g = h ? r : p, _ = n.findIndex((e) => e.props.value === g), v = c(null), [y, b] = l({
 		x: 0,
 		width: 0
 	});
-	a(() => {
+	s(() => {
 		let e = v.current;
 		if (!e) return;
 		let t = () => {
@@ -849,20 +1042,20 @@ function ne({ children: e, value: t, defaultValue: n, onValueChange: r, disabled
 		"--tintora-toggle-thumb-x": `${y.x}px`,
 		"--tintora-toggle-thumb-width": `${y.width}px`
 	};
-	return /* @__PURE__ */ c(Z.Provider, {
+	return /* @__PURE__ */ e($.Provider, {
 		value: {
 			value: g,
 			select: (e) => {
-				e !== g && (h || m(e), r?.(e));
+				e !== g && (h || m(e), a?.(e));
 			},
-			disabled: i
+			disabled: o
 		},
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ t("div", {
 			...f,
 			role: "group",
 			ref: v,
-			className: d("tintora-toggle", i && "tintora-toggle--disabled", u),
-			children: [e, /* @__PURE__ */ c("span", {
+			className: d("tintora-toggle", o && "tintora-toggle--disabled", u),
+			children: [n, /* @__PURE__ */ e("span", {
 				"aria-hidden": "true",
 				className: "tintora-toggle__thumb",
 				style: x
@@ -872,140 +1065,76 @@ function ne({ children: e, value: t, defaultValue: n, onValueChange: r, disabled
 }
 //#endregion
 //#region src/Toggle/ToggleItem.tsx
-function re({ value: e, children: t, className: n, disabled: r, onClick: i, ...a }) {
-	let o = te(), s = (t) => {
-		i?.(t), t.defaultPrevented || o.select(e);
+function fe({ value: t, children: n, className: r, disabled: i, onClick: a, ...o }) {
+	let s = ue(), c = (e) => {
+		a?.(e), e.defaultPrevented || s.select(t);
 	};
-	return /* @__PURE__ */ c("button", {
-		...a,
+	return /* @__PURE__ */ e("button", {
+		...o,
 		type: "button",
-		className: d("tintora-toggle__item", n),
-		"aria-pressed": o.value === e,
-		disabled: r || o.disabled,
-		onClick: s,
-		children: t
+		className: d("tintora-toggle__item", r),
+		"aria-pressed": s.value === t,
+		disabled: i || s.disabled,
+		onClick: c,
+		children: n
 	});
 }
 //#endregion
-//#region src/utils/placement.ts
-var ie = {
-	gap: 10,
-	margin: 8,
-	arrowInset: 12
-}, Q = {
-	top: "bottom",
-	bottom: "top",
-	left: "right",
-	right: "left"
-}, $ = (e, t, n) => Math.min(Math.max(e, t), Math.max(t, n));
-function ae(e, t, n, r, { gap: i, margin: a }) {
-	let o = (t) => {
-		switch (t) {
-			case "top": return e.top;
-			case "bottom": return r.height - e.bottom;
-			case "left": return e.left;
-			case "right": return r.width - e.right;
-		}
-	}, s = (n === "top" || n === "bottom" ? t.height : t.width) + i + a, c = o(n);
-	return c >= s || o(Q[n]) <= c ? n : Q[n];
-}
-function oe(e, t, n, r = {
-	width: window.innerWidth,
-	height: window.innerHeight
-}, i = {}) {
-	let a = {
-		...ie,
-		...i
-	}, { gap: o, margin: s, arrowInset: c } = a, l = ae(e, t, n, r, a), u = l === "top" || l === "bottom", d, f;
-	switch (l) {
-		case "top":
-			d = e.y - t.height - o, f = e.x + e.width / 2 - t.width / 2;
-			break;
-		case "bottom":
-			d = e.y + e.height + o, f = e.x + e.width / 2 - t.width / 2;
-			break;
-		case "left":
-			d = e.y + e.height / 2 - t.height / 2, f = e.x - t.width - o;
-			break;
-		case "right": d = e.y + e.height / 2 - t.height / 2, f = e.x + e.width + o;
-	}
-	u ? f = $(f, s, r.width - t.width - s) : d = $(d, s, r.height - t.height - s);
-	let p = u ? e.x + e.width / 2 - f : e.y + e.height / 2 - d, m = u ? t.width : t.height;
-	return {
-		top: d,
-		left: f,
-		placement: l,
-		arrowOffset: $(p, c, m - c)
-	};
-}
-//#endregion
-//#region src/hooks/useEscapeKey.ts
-function se(e, t) {
-	let n = N(t);
-	r(() => {
-		if (!e) return;
-		let t = (e) => {
-			e.key === "Escape" && n.current();
-		};
-		return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-	}, [e, n]);
-}
-//#endregion
 //#region src/Tooltip/Tooltip.tsx
-var ce = 100;
-function le({ title: t, content: n, shortcut: a, children: u, className: f, placement: p = "top" }) {
-	let m = i(), [h, g] = s(!1), _ = o(null), v = o(null), y = o(void 0), b = () => {
+var pe = 100;
+function me({ title: r, content: i, shortcut: s, children: u, className: f, placement: p = "top" }) {
+	let m = o(), [h, g] = l(!1), _ = c(null), v = c(null), y = c(void 0), b = () => {
 		window.clearTimeout(y.current), g(!0);
 	}, x = () => {
-		window.clearTimeout(y.current), y.current = window.setTimeout(() => g(!1), ce);
-	}, S = F(h, v, () => {
+		window.clearTimeout(y.current), y.current = window.setTimeout(() => g(!1), pe);
+	}, S = N(h, v, () => {
 		let e = v.current, t = _.current?.firstElementChild;
-		return !e || !t ? null : oe(t.getBoundingClientRect(), {
+		return !e || !t ? null : R(t.getBoundingClientRect(), {
 			width: e.offsetWidth,
 			height: e.offsetHeight
 		}, p);
 	}, [
 		p,
-		t,
-		n,
-		a
+		r,
+		i,
+		s
 	]);
-	se(h, () => g(!1)), r(() => () => window.clearTimeout(y.current), []);
+	j(h, () => g(!1)), a(() => () => window.clearTimeout(y.current), []);
 	let C = S ? {
 		top: S.top,
 		left: S.left,
 		"--tintora-tooltip-arrow-offset": `${S.arrowOffset}px`
 	} : { visibility: "hidden" };
-	return /* @__PURE__ */ l("span", {
+	return /* @__PURE__ */ t("span", {
 		ref: _,
 		className: "tintora-tooltip",
 		onMouseEnter: b,
 		onMouseLeave: x,
 		onFocus: b,
 		onBlur: x,
-		children: [e(u, { "aria-describedby": d(u.props["aria-describedby"], h && m) || void 0 }), h && /* @__PURE__ */ l("div", {
+		children: [n(u, { "aria-describedby": d(u.props["aria-describedby"], h && m) || void 0 }), h && /* @__PURE__ */ t("div", {
 			id: m,
 			ref: v,
 			role: "tooltip",
 			popover: "manual",
 			style: C,
-			className: d("tintora-tooltip__content", `tintora-tooltip__content--${S?.placement ?? p}`, t && "tintora-tooltip__content--rich", f),
+			className: d("tintora-tooltip__content", `tintora-tooltip__content--${S?.placement ?? p}`, r && "tintora-tooltip__content--rich", f),
 			children: [
-				t && /* @__PURE__ */ c("span", {
+				r && /* @__PURE__ */ e("span", {
 					className: "tintora-tooltip__title",
-					children: t
+					children: r
 				}),
-				/* @__PURE__ */ c("span", {
+				/* @__PURE__ */ e("span", {
 					className: "tintora-tooltip__text",
-					children: n
+					children: i
 				}),
-				a && /* @__PURE__ */ c("kbd", {
+				s && /* @__PURE__ */ e("kbd", {
 					className: "tintora-tooltip__shortcut",
-					children: a
+					children: s
 				})
 			]
 		})]
 	});
 }
 //#endregion
-export { p as Avatar, g as Button, _ as Card, b as Checkbox, x as Chip, S as Dot, w as IconButton, E as Modal, D as ProgressBar, A as Radio, j as RadioGroup, M as SearchInput, z as Select, v as SelectableCard, B as Skeleton, h as Spinner, V as Switch, H as Tag, U as TextField, X as Toast, ne as Toggle, re as ToggleItem, le as Tooltip };
+export { m as Alert, g as Avatar, y as Button, b as Card, C as Checkbox, w as Chip, T as Dot, D as IconButton, k as Modal, B as Popover, V as ProgressBar, W as Radio, G as RadioGroup, K as SearchInput, X as Select, x as SelectableCard, Z as Skeleton, v as Spinner, te as Switch, ne as Tag, re as TextField, le as Toast, de as Toggle, fe as ToggleItem, me as Tooltip };