panelize 0.0.0-stage → 0.1.1

package/dist/panelize.es.js

@@ -0,0 +1,3011 @@
+"use client";
+import { Children as e, createContext as t, isValidElement as n, useContext as r, useEffect as i, useId as a, useLayoutEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import { css as u, styled as d } from "styled-components";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { createPortal as h } from "react-dom";
+//#region src/theme/types.ts
+var g = [
+	"muted",
+	"base",
+	"highlighted"
+], _ = [
+	"base",
+	"muted",
+	"highlighted"
+], v = ["dark", "light"], y = [
+	"primary",
+	"secondary",
+	"accent"
+], b = [
+	"danger",
+	"warning",
+	"success",
+	"info"
+], x = [
+	"base",
+	"hover",
+	"active"
+], S = [
+	"none",
+	"extraSmall",
+	"small",
+	"base",
+	"large",
+	"extraLarge"
+], C = [
+	"start",
+	"end",
+	"center",
+	"stretch",
+	"baseline",
+	"space-between",
+	"space-around",
+	"space-evenly"
+], w = [
+	"vertical",
+	"horizontal",
+	"both"
+], T = [
+	"sm",
+	"md",
+	"lg"
+], E = [
+	"extraSmall",
+	"small",
+	"base",
+	"large",
+	"extraLarge"
+], D = [
+	"thin",
+	"base",
+	"bold",
+	"heavy"
+], O = [
+	"base",
+	"display",
+	"mono"
+], k = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6
+], A = {
+	none: "0rem",
+	extraSmall: "0.25rem",
+	small: "0.5rem",
+	base: "1rem",
+	large: "1.5rem",
+	extraLarge: "2rem"
+};
+function j(e) {
+	return S.includes(e);
+}
+function M(e, t, n) {
+	let r = e ?? t;
+	return Object.hasOwn(n, r) ? n[r] : r;
+}
+function N(e, t, n, r) {
+	return e === void 0 ? t === void 0 ? n : j(t) ? r[t] : t : j(e) ? r[e] : e;
+}
+function P(e, t, n) {
+	let r = M(e.padding, t.padding, n), i = M(e.margin, t.margin, n);
+	return {
+		paddingTop: N(e.paddingTop, e.paddingY, r, n),
+		paddingRight: N(e.paddingRight, e.paddingX, r, n),
+		paddingBottom: N(e.paddingBottom, e.paddingY, r, n),
+		paddingLeft: N(e.paddingLeft, e.paddingX, r, n),
+		marginTop: N(e.marginTop, e.marginY, i, n),
+		marginRight: N(e.marginRight, e.marginX, i, n),
+		marginBottom: N(e.marginBottom, e.marginY, i, n),
+		marginLeft: N(e.marginLeft, e.marginX, i, n)
+	};
+}
+function F(e) {
+	let { padding: t, margin: n, paddingX: r, paddingY: i, paddingTop: a, paddingRight: o, paddingBottom: s, paddingLeft: c, marginX: l, marginY: u, marginTop: d, marginRight: f, marginBottom: p, marginLeft: m, minWidth: h, maxWidth: g, minHeight: _, maxHeight: v, width: y, height: b, ...x } = e;
+	return {
+		spacing: {
+			padding: t,
+			margin: n,
+			paddingX: r,
+			paddingY: i,
+			paddingTop: a,
+			paddingRight: o,
+			paddingBottom: s,
+			paddingLeft: c,
+			marginX: l,
+			marginY: u,
+			marginTop: d,
+			marginRight: f,
+			marginBottom: p,
+			marginLeft: m
+		},
+		size: {
+			minWidth: h,
+			maxWidth: g,
+			minHeight: _,
+			maxHeight: v,
+			width: y,
+			height: b
+		},
+		rest: x
+	};
+}
+function ee(e, t) {
+	return {
+		minWidth: e.minWidth === void 0 ? void 0 : M(e.minWidth, "none", t),
+		maxWidth: e.maxWidth === void 0 ? void 0 : M(e.maxWidth, "none", t),
+		minHeight: e.minHeight === void 0 ? void 0 : M(e.minHeight, "none", t),
+		maxHeight: e.maxHeight === void 0 ? void 0 : M(e.maxHeight, "none", t)
+	};
+}
+function I(e, t, n) {
+	return {
+		...ee(e, t),
+		width: e.width === void 0 && n?.width === void 0 ? void 0 : M(e.width, n?.width ?? "auto", t),
+		height: e.height === void 0 && n?.height === void 0 ? void 0 : M(e.height, n?.height ?? "auto", t)
+	};
+}
+function L(e, t) {
+	let n = e.width ?? (t ? "100%" : void 0), r = e.height ?? (t ? "100%" : void 0);
+	return u`
+    box-sizing: border-box;
+    ${n === void 0 ? "" : u`
+            width: ${n};
+          `}
+    ${r === void 0 ? "" : u`
+            height: ${r};
+          `}
+    ${te(e)}
+  `;
+}
+function te(e) {
+	return u`
+    ${e.minWidth === void 0 ? "" : u`
+            min-width: ${e.minWidth};
+          `}
+    ${e.maxWidth === void 0 ? "" : u`
+            max-width: ${e.maxWidth};
+          `}
+    ${e.minHeight === void 0 ? "" : u`
+            min-height: ${e.minHeight};
+          `}
+    ${e.maxHeight === void 0 ? "" : u`
+            max-height: ${e.maxHeight};
+          `}
+  `;
+}
+function R(e) {
+	return u`
+    padding-top: ${e.paddingTop};
+    padding-right: ${e.paddingRight};
+    padding-bottom: ${e.paddingBottom};
+    padding-left: ${e.paddingLeft};
+    margin-top: ${e.marginTop};
+    margin-right: ${e.marginRight};
+    margin-bottom: ${e.marginBottom};
+    margin-left: ${e.marginLeft};
+  `;
+}
+//#endregion
+//#region src/theme/borders.ts
+var ne = {
+	none: "0",
+	extraSmall: "1px",
+	small: "2px",
+	base: "4px",
+	large: "8px",
+	extraLarge: "12px"
+}, re = {
+	none: "0",
+	extraSmall: "0.125rem",
+	small: "0.25rem",
+	base: "0.5rem",
+	large: "0.75rem",
+	extraLarge: "1rem"
+};
+function ie(e) {
+	return typeof e == "object" && !!e;
+}
+function ae(e, t, n, r) {
+	return e === void 0 ? t === void 0 ? n : M(t, n, r) : M(e, n, r);
+}
+function oe(e, t, n) {
+	let r = M(e.borderWidth, t, n);
+	return [
+		ae(e.borderTop, e.borderY, r, n),
+		ae(e.borderRight, e.borderX, r, n),
+		ae(e.borderBottom, e.borderY, r, n),
+		ae(e.borderLeft, e.borderX, r, n)
+	].join(" ");
+}
+function z(e, t, n, r, i, a = "base") {
+	if (e !== void 0) {
+		if (g.includes(e)) {
+			let r = n[e];
+			return t === "background" ? r.background : t === "text" ? r.text.base : r.border;
+		}
+		return y.includes(e) ? r[e][a] : b.includes(e) ? i[e][a] : e;
+	}
+}
+function se(e, t, n, r, i, a) {
+	if (e !== void 0) {
+		if (ie(e)) {
+			let o = e[n];
+			return o === void 0 ? void 0 : z(o, t, r, i, a, n);
+		}
+		return z(e, t, r, i, a, "base");
+	}
+}
+function ce(e, t, n, r, i) {
+	return z(e, "border", n, r, i) ?? n[t].border;
+}
+//#endregion
+//#region src/theme/breakpoints.ts
+var le = {
+	sm: "40rem",
+	md: "48rem",
+	lg: "64rem"
+};
+function ue(e) {
+	return T.includes(e);
+}
+function de(e, t) {
+	if (e !== void 0) return ue(e) ? t[e] : e;
+}
+function fe(e, t = 1) {
+	let n = Number.isFinite(t) && t >= 1 ? Math.floor(t) : 1, r = `repeat(${n}, minmax(0, 1fr))`;
+	return u`
+    container-type: inline-size;
+    @container (max-width: ${e}) {
+      grid-template-columns: ${r};
+      justify-items: stretch;
+      align-items: stretch;
+      ${n === 1 ? u`
+              & > * {
+                grid-column: auto / span 1;
+              }
+            ` : ""}
+    }
+  `;
+}
+function pe(e, t = "start") {
+	return u`
+    container-type: inline-size;
+    @container (max-width: ${e}) {
+      flex-direction: column;
+      flex-wrap: nowrap;
+      align-items: stretch;
+      justify-content: ${t};
+      & > * {
+        width: auto;
+        max-width: 100%;
+      }
+    }
+  `;
+}
+//#endregion
+//#region src/theme/flex.ts
+function me(e, t) {
+	return u`
+    justify-items: ${e};
+    align-items: ${t};
+  `;
+}
+function he(e, t) {
+	if (e || t) return u`
+    ${e ? u`
+            justify-self: ${e};
+          ` : ""}
+    ${t ? u`
+            align-self: ${t};
+          ` : ""}
+  `;
+}
+function B(e) {
+	return e ? {
+		alignX: "stretch",
+		alignY: "start"
+	} : {
+		alignX: "start",
+		alignY: "stretch"
+	};
+}
+function V(e, t, n) {
+	let r = e ? n : t, i = e ? t : n;
+	if (r || i) return u`
+    ${r ? u`
+            justify-content: ${r};
+          ` : ""}
+    ${i ? u`
+            align-items: ${i};
+          ` : ""}
+  `;
+}
+function ge(e, t) {
+	return e ?? t;
+}
+function _e(e, t) {
+	if (e) return u`
+      flex: 1 1 0%;
+      min-width: 0;
+      min-height: 0;
+    `;
+	if (t) return u`
+      flex-shrink: 0;
+    `;
+}
+function ve(e) {
+	return e ?? "start";
+}
+//#endregion
+//#region src/theme/overflow.ts
+function H(e) {
+	if (!e) return;
+	let t = e === "vertical" || e === "both", n = e === "horizontal" || e === "both";
+	return u`
+    overflow-x: ${n ? "auto" : "hidden"};
+    overflow-y: ${t ? "auto" : "hidden"};
+    ${t ? u`
+            min-height: 0;
+          ` : ""}
+    ${n ? u`
+            min-width: 0;
+          ` : ""}
+  `;
+}
+//#endregion
+//#region src/theme/track.tsx
+var U = t(void 0);
+function W({ kind: e, children: t }) {
+	return /* @__PURE__ */ p(U.Provider, {
+		value: e,
+		children: t
+	});
+}
+function ye() {
+	return r(U);
+}
+function G(e, t, n) {
+	if (e === "column") return t ? u`
+      align-self: ${t};
+    ` : void 0;
+	if (e === "row") return n ? u`
+      align-self: ${n};
+    ` : void 0;
+	if (t || n) return u`
+    ${t ? u`
+            justify-self: ${t};
+          ` : ""}
+    ${n ? u`
+            align-self: ${n};
+          ` : ""}
+  `;
+}
+//#endregion
+//#region src/theme/color.ts
+var K = [
+	"extraDark",
+	"dark",
+	"base",
+	"light",
+	"extraLight"
+], be = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6
+], q = [
+	"#000000",
+	"#292929",
+	"#4e4e4e",
+	"#777777",
+	"#a2a2a2",
+	"#d0d0d0",
+	"#ffffff"
+], J = {
+	black: q[0],
+	white: q[6],
+	gray: {
+		0: q[0],
+		1: q[1],
+		2: q[2],
+		3: q[3],
+		4: q[4],
+		5: q[5],
+		6: q[6],
+		extraDark: q[1],
+		dark: q[2],
+		base: q[3],
+		light: q[4],
+		extraLight: q[5]
+	}
+};
+//#endregion
+//#region src/theme/brand.ts
+function xe(e) {
+	let t = e.trim(), n = /^#([\da-fA-F])([\da-fA-F])([\da-fA-F])$/.exec(t);
+	if (n) return [
+		Number.parseInt(n[1] + n[1], 16),
+		Number.parseInt(n[2] + n[2], 16),
+		Number.parseInt(n[3] + n[3], 16)
+	];
+	let r = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/.exec(t);
+	return r ? [
+		Number.parseInt(r[1], 16),
+		Number.parseInt(r[2], 16),
+		Number.parseInt(r[3], 16)
+	] : null;
+}
+function Se(e, t, n) {
+	return `#${[
+		e,
+		t,
+		n
+	].map((e) => e.toString(16).padStart(2, "0")).join("")}`;
+}
+function Ce(e, t, n) {
+	return Math.round(e + (t - e) * n);
+}
+function Y(e, t, n) {
+	let r = xe(e);
+	return r ? Se(Ce(r[0], t, n), Ce(r[1], t, n), Ce(r[2], t, n)) : null;
+}
+function X(e) {
+	return {
+		base: e,
+		hover: Y(e, 255, .25) ?? e,
+		active: Y(e, 0, .055) ?? e
+	};
+}
+//#endregion
+//#region src/theme/font.ts
+var we = {
+	extraSmall: "0.75rem",
+	small: "0.875rem",
+	base: "1rem",
+	large: "1.25rem",
+	extraLarge: "1.5rem"
+}, Te = {
+	thin: "100",
+	base: "400",
+	bold: "700",
+	heavy: "800"
+}, Ee = {
+	base: "\"Open Sans\", sans-serif",
+	display: "Montserrat, sans-serif",
+	mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
+}, De = 1.2, Oe = {
+	padding: "none",
+	margin: "none"
+}, ke = {
+	...Oe,
+	borderWidth: "none",
+	borderRadius: "none"
+}, Ae = {
+	...ke,
+	height: "auto"
+}, je = {
+	...ke,
+	width: "auto"
+}, Me = {
+	...Oe,
+	gap: "none",
+	alignX: "stretch",
+	alignY: "start"
+}, Ne = {
+	...Oe,
+	gap: "none",
+	alignX: "start",
+	alignY: "stretch"
+}, Pe = {
+	...Oe,
+	gap: "none",
+	alignX: "stretch",
+	alignY: "stretch"
+}, Fe = {
+	muted: {
+		background: "#222222",
+		text: {
+			base: J.gray.extraLight,
+			muted: J.gray.base,
+			highlighted: J.white
+		},
+		border: J.gray.dark
+	},
+	base: {
+		background: "#333333",
+		text: {
+			base: J.gray.extraLight,
+			muted: J.gray.light,
+			highlighted: J.white
+		},
+		border: J.gray.base
+	},
+	highlighted: {
+		background: J.gray.dark,
+		text: {
+			base: J.white,
+			muted: J.gray.light,
+			highlighted: J.white
+		},
+		border: J.gray.base
+	}
+}, Z = {
+	mode: "dark",
+	colorSchemes: {
+		dark: Fe,
+		light: {
+			muted: {
+				background: "#f2f2f2",
+				text: {
+					base: "#222222",
+					muted: J.gray.base,
+					highlighted: J.black
+				},
+				border: J.gray.light
+			},
+			base: {
+				background: "#f7f7f7",
+				text: {
+					base: "#333333",
+					muted: J.gray.base,
+					highlighted: J.black
+				},
+				border: J.gray.base
+			},
+			highlighted: {
+				background: J.white,
+				text: {
+					base: J.gray.dark,
+					muted: J.gray.base,
+					highlighted: J.black
+				},
+				border: J.gray.base
+			}
+		}
+	},
+	colors: Fe,
+	brand: {
+		primary: X("#ff9f2e"),
+		secondary: X("#ff9f2e"),
+		accent: X("#ff9f2e")
+	},
+	status: {
+		danger: X("#f2555a"),
+		warning: X("#ffd60a"),
+		success: X("#4ade80"),
+		info: X("#38bdf8")
+	},
+	space: A,
+	borderWidths: ne,
+	radii: re,
+	breakpoints: { ...le },
+	fontSizes: we,
+	fontWeights: Te,
+	fontFamilies: Ee,
+	lineHeight: De,
+	defaults: {
+		panel: { ...ke },
+		panels: {
+			...Oe,
+			gap: "none"
+		},
+		rows: { ...Me },
+		row: { ...Ae },
+		cols: { ...Ne },
+		col: { ...je },
+		grid: { ...Pe },
+		cell: { ...ke },
+		div: { ...ke },
+		text: {
+			size: "base",
+			weight: "base"
+		},
+		heading: {
+			size: {
+				1: "2rem",
+				2: "1.5rem",
+				3: "1.17rem",
+				4: "1rem",
+				5: "0.83rem",
+				6: "0.67rem"
+			},
+			weight: "bold",
+			family: "display"
+		},
+		textLink: {
+			color: "primary",
+			hover: "primary",
+			hoverUnderline: !1
+		},
+		button: {
+			color: "primary",
+			size: "small",
+			weight: "bold",
+			ink: J.black,
+			hover: { color: J.black },
+			paddingX: "base",
+			paddingY: "small",
+			gap: "extraSmall",
+			borderWidth: "extraSmall",
+			borderRadius: "base"
+		},
+		chip: {
+			color: "primary",
+			size: "extraSmall",
+			weight: "bold",
+			tint: "12%",
+			paddingX: "base",
+			paddingY: "extraSmall",
+			gap: "extraSmall",
+			borderRadius: "999px",
+			uppercase: !0
+		},
+		input: {
+			color: "primary",
+			size: "small",
+			weight: "base",
+			paddingX: "base",
+			paddingY: "small",
+			borderWidth: "extraSmall",
+			borderRadius: "base"
+		},
+		textarea: {
+			color: "primary",
+			size: "small",
+			weight: "base",
+			paddingX: "base",
+			paddingY: "small",
+			borderWidth: "extraSmall",
+			borderRadius: "base",
+			resize: !1,
+			rows: 3
+		},
+		select: {
+			color: "primary",
+			size: "small",
+			weight: "base",
+			paddingX: "base",
+			paddingY: "small",
+			borderWidth: "extraSmall",
+			borderRadius: "base",
+			listMaxHeight: "16rem",
+			listOffset: "extraSmall",
+			optionPaddingX: "base",
+			optionPaddingY: "extraSmall",
+			listZIndex: 1100,
+			listShadow: "0 8px 24px rgb(0 0 0 / 35%)"
+		},
+		switch: {
+			color: "primary",
+			size: "base",
+			ink: J.white,
+			widthFactor: 2,
+			insetFactor: .2,
+			borderRadius: "999px"
+		},
+		checkbox: {
+			color: "primary",
+			size: "base",
+			ink: J.black,
+			borderWidth: "extraSmall",
+			borderRadius: "small"
+		},
+		radio: {
+			color: "primary",
+			size: "base",
+			borderWidth: "extraSmall",
+			borderRadius: "999px",
+			insetFactor: .22
+		}
+	}
+};
+function Ie(e, t, n) {
+	let r = { ...t };
+	if (!n) return r;
+	for (let t of e) {
+		let e = n[t];
+		e !== void 0 && (r[t] = e);
+	}
+	return r;
+}
+function Le(e, t) {
+	return Ie(S, e, t);
+}
+function Re(e, t) {
+	return Ie(T, e, t);
+}
+function ze(e, t) {
+	return {
+		padding: t?.padding ?? e.padding,
+		margin: t?.margin ?? e.margin
+	};
+}
+function Be(e, t) {
+	return {
+		...ze(e, t),
+		borderWidth: t?.borderWidth ?? e.borderWidth,
+		borderRadius: t?.borderRadius ?? e.borderRadius
+	};
+}
+function Ve(e, t) {
+	return {
+		...Be(e, t),
+		height: t?.height ?? e.height
+	};
+}
+function He(e, t) {
+	return {
+		...Be(e, t),
+		width: t?.width ?? e.width
+	};
+}
+function Ue(e, t) {
+	return {
+		...ze(e, t),
+		gap: t?.gap ?? e.gap
+	};
+}
+function We(e, t) {
+	return {
+		size: t?.size ?? e.size,
+		weight: t?.weight ?? e.weight
+	};
+}
+function Ge(e, t) {
+	let n = { ...e.size };
+	for (let e of k) {
+		let r = t?.size?.[e];
+		r !== void 0 && (n[e] = r);
+	}
+	return {
+		size: n,
+		weight: t?.weight ?? e.weight,
+		family: t?.family ?? e.family
+	};
+}
+function Ke(e, t) {
+	return {
+		color: t?.color ?? e.color,
+		hover: t?.hover ?? e.hover,
+		hoverUnderline: t?.hoverUnderline ?? e.hoverUnderline
+	};
+}
+function qe(e, t) {
+	return {
+		color: t?.color ?? e.color,
+		size: t?.size ?? e.size,
+		weight: t?.weight ?? e.weight,
+		tint: t?.tint ?? e.tint,
+		paddingX: t?.paddingX ?? e.paddingX,
+		paddingY: t?.paddingY ?? e.paddingY,
+		gap: t?.gap ?? e.gap,
+		borderRadius: t?.borderRadius ?? e.borderRadius,
+		uppercase: t?.uppercase ?? e.uppercase
+	};
+}
+function Je(e, t) {
+	return {
+		color: t?.color ?? e.color,
+		size: t?.size ?? e.size,
+		weight: t?.weight ?? e.weight,
+		paddingX: t?.paddingX ?? e.paddingX,
+		paddingY: t?.paddingY ?? e.paddingY,
+		borderWidth: t?.borderWidth ?? e.borderWidth,
+		borderRadius: t?.borderRadius ?? e.borderRadius
+	};
+}
+function Ye(e, t) {
+	return {
+		...Je(e, t),
+		resize: t?.resize ?? e.resize,
+		rows: t?.rows ?? e.rows
+	};
+}
+function Xe(e, t) {
+	return {
+		...Je(e, t),
+		listMaxHeight: t?.listMaxHeight ?? e.listMaxHeight,
+		listOffset: t?.listOffset ?? e.listOffset,
+		optionPaddingX: t?.optionPaddingX ?? e.optionPaddingX,
+		optionPaddingY: t?.optionPaddingY ?? e.optionPaddingY,
+		listZIndex: t?.listZIndex ?? e.listZIndex,
+		listShadow: t?.listShadow ?? e.listShadow
+	};
+}
+function Ze(e, t) {
+	return {
+		color: t?.color ?? e.color,
+		size: t?.size ?? e.size,
+		ink: t?.ink ?? e.ink,
+		widthFactor: t?.widthFactor ?? e.widthFactor,
+		insetFactor: t?.insetFactor ?? e.insetFactor,
+		borderRadius: t?.borderRadius ?? e.borderRadius
+	};
+}
+function Qe(e, t) {
+	return {
+		color: t?.color ?? e.color,
+		size: t?.size ?? e.size,
+		ink: t?.ink ?? e.ink,
+		borderWidth: t?.borderWidth ?? e.borderWidth,
+		borderRadius: t?.borderRadius ?? e.borderRadius
+	};
+}
+function $e(e, t) {
+	return {
+		color: t?.color ?? e.color,
+		size: t?.size ?? e.size,
+		borderWidth: t?.borderWidth ?? e.borderWidth,
+		borderRadius: t?.borderRadius ?? e.borderRadius,
+		insetFactor: t?.insetFactor ?? e.insetFactor
+	};
+}
+function et(e, t) {
+	return {
+		color: t?.color ?? e.color,
+		size: t?.size ?? e.size,
+		weight: t?.weight ?? e.weight,
+		ink: t?.ink ?? e.ink,
+		hover: {
+			color: t?.hover?.color ?? e.hover.color,
+			background: t?.hover?.background ?? e.hover.background
+		},
+		paddingX: t?.paddingX ?? e.paddingX,
+		paddingY: t?.paddingY ?? e.paddingY,
+		gap: t?.gap ?? e.gap,
+		borderWidth: t?.borderWidth ?? e.borderWidth,
+		borderRadius: t?.borderRadius ?? e.borderRadius
+	};
+}
+function tt(e, t) {
+	if (t === void 0) return { ...e };
+	if (typeof t == "string") return X(t);
+	let n = t.base ?? e.base, r = X(n);
+	return {
+		base: n,
+		hover: t.hover ?? (t.base === void 0 ? e.hover : r.hover),
+		active: t.active ?? (t.base === void 0 ? e.active : r.active)
+	};
+}
+function nt(e, t) {
+	return {
+		danger: tt(e.danger, t?.danger),
+		warning: tt(e.warning, t?.warning),
+		success: tt(e.success, t?.success),
+		info: tt(e.info, t?.info)
+	};
+}
+function rt(e, t) {
+	let n = tt(e.primary, t?.primary), r = t?.primary !== void 0;
+	return {
+		primary: n,
+		secondary: tt(r ? n : e.secondary, t?.secondary),
+		accent: tt(r ? n : e.accent, t?.accent)
+	};
+}
+function it(e, t) {
+	return {
+		...ze(e, t),
+		gap: t?.gap ?? e.gap,
+		alignX: t?.alignX ?? e.alignX,
+		alignY: t?.alignY ?? e.alignY
+	};
+}
+function at(e, t) {
+	return Ie(_, e, t);
+}
+function ot(e, t) {
+	return {
+		background: t?.background ?? e.background,
+		border: t?.border ?? e.border,
+		text: at(e.text, t?.text)
+	};
+}
+function st(e, t) {
+	let n = { ...e };
+	for (let r of g) n[r] = ot(e[r], t?.[r]);
+	let r = t?.app;
+	return r?.background || r?.text ? n.app = {
+		...e.app,
+		...r
+	} : e.app && (n.app = { ...e.app }), n;
+}
+function ct(e, t) {
+	return {
+		...e,
+		mode: t,
+		colors: e.colorSchemes[t]
+	};
+}
+function lt(e) {
+	let t = {
+		dark: st(Z.colorSchemes.dark, e?.colors?.dark),
+		light: st(Z.colorSchemes.light, e?.colors?.light)
+	}, n = Je(Z.defaults.input, e?.defaults?.input);
+	return {
+		mode: "dark",
+		colorSchemes: t,
+		colors: t.dark,
+		brand: rt(Z.brand, e?.brand),
+		status: nt(Z.status, e?.status),
+		space: Le(Z.space, e?.space),
+		borderWidths: Le(Z.borderWidths, e?.borderWidths),
+		radii: Le(Z.radii, e?.radii),
+		breakpoints: Re(Z.breakpoints, e?.breakpoints),
+		fontSizes: Ie(E, Z.fontSizes, e?.fontSizes),
+		fontWeights: Ie(D, Z.fontWeights, e?.fontWeights),
+		fontFamilies: Ie(O, Z.fontFamilies, e?.fontFamilies),
+		lineHeight: e?.lineHeight ?? Z.lineHeight,
+		defaults: {
+			panel: Be(Z.defaults.panel, e?.defaults?.panel),
+			panels: Ue(Z.defaults.panels, e?.defaults?.panels),
+			rows: it(Z.defaults.rows, e?.defaults?.rows),
+			row: Ve(Z.defaults.row, e?.defaults?.row),
+			cols: it(Z.defaults.cols, e?.defaults?.cols),
+			col: He(Z.defaults.col, e?.defaults?.col),
+			grid: it(Z.defaults.grid, e?.defaults?.grid),
+			cell: Be(Z.defaults.cell, e?.defaults?.cell),
+			div: Be(Z.defaults.div, e?.defaults?.div),
+			text: We(Z.defaults.text, e?.defaults?.text),
+			heading: Ge(Z.defaults.heading, e?.defaults?.heading),
+			textLink: Ke(Z.defaults.textLink, e?.defaults?.textLink),
+			button: et(Z.defaults.button, e?.defaults?.button),
+			chip: qe(Z.defaults.chip, e?.defaults?.chip),
+			input: n,
+			textarea: Ye({
+				...n,
+				resize: Z.defaults.textarea.resize,
+				rows: Z.defaults.textarea.rows
+			}, e?.defaults?.textarea),
+			select: Xe({
+				...n,
+				listMaxHeight: Z.defaults.select.listMaxHeight,
+				listOffset: Z.defaults.select.listOffset,
+				optionPaddingX: Z.defaults.select.optionPaddingX,
+				optionPaddingY: Z.defaults.select.optionPaddingY,
+				listZIndex: Z.defaults.select.listZIndex,
+				listShadow: Z.defaults.select.listShadow
+			}, e?.defaults?.select),
+			switch: Ze(Z.defaults.switch, e?.defaults?.switch),
+			checkbox: Qe(Z.defaults.checkbox, e?.defaults?.checkbox),
+			radio: $e(Z.defaults.radio, e?.defaults?.radio)
+		}
+	};
+}
+//#endregion
+//#region src/theme/PanelizeProvider.tsx
+function ut(e) {
+	return !!e && "colorSchemes" in e && e.colorSchemes?.dark?.muted != null && e.colorSchemes?.light?.muted != null;
+}
+var dt = {
+	background: "--panelize-app-bg",
+	text: "--panelize-app-text"
+}, ft = t(Z), pt = d.div`
+  position: relative;
+  min-height: 100%;
+  height: 100%;
+  color-scheme: ${({ $colorScheme: e }) => e};
+  ${({ $background: e }) => e ? u`
+          ${dt.background}: ${e};
+          background: var(${dt.background});
+        ` : ""}
+  ${({ $text: e }) => e ? u`
+          ${dt.text}: ${e};
+          color: var(${dt.text});
+        ` : ""}
+`;
+function mt({ theme: e, mode: t = "dark", children: n }) {
+	let r = s(() => ut(e) ? e : lt(e), [e]), i = s(() => ct(r, t), [r, t]), a = i.colors.app;
+	return /* @__PURE__ */ p(ft.Provider, {
+		value: i,
+		children: /* @__PURE__ */ p(pt, {
+			$colorScheme: t,
+			$background: a?.background,
+			$text: a?.text,
+			children: n
+		})
+	});
+}
+function Q() {
+	return r(ft);
+}
+//#endregion
+//#region src/components/layout/Panel.tsx
+var $ = {
+	background: "--panelize-bg",
+	text: "--panelize-text",
+	textMuted: "--panelize-text-muted",
+	textHighlighted: "--panelize-text-highlighted",
+	border: "--panelize-border"
+}, ht = d.div`
+  position: relative;
+  ${({ $edges: e }) => R(e)}
+  ${({ $size: e, $fill: t }) => L(e, t)}
+  border-width: ${({ $borderWidth: e }) => e};
+  border-style: solid;
+  border-radius: ${({ $borderRadius: e }) => e};
+  background: var(${$.background});
+  color: var(${$.text});
+  border-color: var(${$.border});
+  ${({ $colors: e, $borderColor: t }) => u`
+    ${$.background}: ${e.background};
+    ${$.text}: ${e.text.base};
+    ${$.textMuted}: ${e.text.muted};
+    ${$.textHighlighted}: ${e.text.highlighted};
+    ${$.border}: ${t};
+  `}
+  ${({ $flex: e }) => _e(e, !0)}
+  ${({ $scroll: e }) => H(e)}
+  ${({ $trackKind: e, $alignX: t, $alignY: n }) => G(e, t, n)}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function gt(e) {
+	let { spacing: t, size: n, rest: r } = F(e), { flex: i, fill: a, alignX: o, alignY: s, variant: c = "base", css: l, borderWidth: u, borderX: d, borderY: f, borderTop: m, borderRight: h, borderBottom: g, borderLeft: _, borderRadius: v, borderColor: y, scroll: b, ...x } = r, { colors: S, space: C, borderWidths: w, radii: T, defaults: E, brand: D, status: O } = Q(), k = ye();
+	return /* @__PURE__ */ p(ht, {
+		$flex: i,
+		$fill: a,
+		$colors: S[c],
+		$edges: P(t, E.panel, C),
+		$size: I(n, C),
+		$borderWidth: oe({
+			borderWidth: u,
+			borderX: d,
+			borderY: f,
+			borderTop: m,
+			borderRight: h,
+			borderBottom: g,
+			borderLeft: _
+		}, E.panel.borderWidth, w),
+		$borderRadius: M(v, E.panel.borderRadius, T),
+		$borderColor: ce(y, c, S, D, O),
+		$scroll: b,
+		$alignX: o,
+		$alignY: s,
+		$trackKind: k,
+		$customCss: l,
+		...x
+	});
+}
+//#endregion
+//#region src/components/text/color.ts
+function _t(e) {
+	return !!e && y.includes(e);
+}
+function vt(e) {
+	return !!e && b.includes(e);
+}
+function yt(e) {
+	return _t(e) || vt(e);
+}
+function bt(e, t, n) {
+	return _t(e) ? t[e] : vt(e) ? n[e] : {
+		base: e,
+		hover: e,
+		active: e
+	};
+}
+function xt(e, t, n) {
+	return bt(e, t, n).base;
+}
+function St(e, t, n, r, i) {
+	return e !== void 0 && yt(e) ? bt(e, r, i).base : e || (t ? `var(${$.textHighlighted})` : n ? `var(${$.textMuted})` : `var(${$.text})`);
+}
+function Ct(e, t, n, r) {
+	let i = e !== void 0 && yt(e) ? bt(e, n, r) : void 0;
+	if (t === "inherit") {
+		let e = `var(${$.text})`;
+		return {
+			hover: e,
+			active: i?.active ?? e
+		};
+	}
+	if (yt(t)) {
+		let i = bt(t, n, r);
+		return {
+			hover: e === t ? i.hover : i.base,
+			active: i.active
+		};
+	}
+	return {
+		hover: t,
+		active: i?.active ?? t
+	};
+}
+//#endregion
+//#region src/components/buttons/Button.tsx
+var wt = d.button`
+  appearance: none;
+  display: ${({ $fill: e }) => e ? "flex" : "inline-flex"};
+  align-items: center;
+  justify-content: center;
+  gap: ${({ $gap: e }) => e};
+  ${({ $fill: e }) => e ? u`
+          width: 100%;
+          height: 100%;
+        ` : ""}
+  margin: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-family: ${({ $family: e }) => e};
+  font-size: ${({ $size: e }) => e};
+  font-weight: ${({ $weight: e }) => e};
+  line-height: ${({ $lineHeight: e }) => e};
+  padding: ${({ $paddingY: e, $paddingX: t }) => `${e} ${t}`};
+  border-width: ${({ $borderWidth: e }) => e};
+  border-style: solid;
+  border-radius: ${({ $borderRadius: e }) => e};
+  border-color: ${({ $restBorder: e }) => e};
+  background: ${({ $restBg: e }) => e};
+  color: ${({ $restFg: e }) => e};
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+  &:hover:not(:disabled) {
+    background: ${({ $hoverBg: e }) => e};
+    color: ${({ $hoverFg: e }) => e};
+    border-color: ${({ $hoverBorder: e }) => e};
+  }
+  &:active:not(:disabled) {
+    background: ${({ $activeBg: e }) => e};
+    color: ${({ $activeFg: e }) => e};
+    border-color: ${({ $activeBorder: e }) => e};
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+  ${({ $italic: e }) => e ? u`
+          font-style: italic;
+        ` : ""}
+  ${({ $uppercase: e }) => e ? u`
+          text-transform: uppercase;
+        ` : ""}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Tt(e, t, n, r) {
+	return yt(e) ? bt(e, t, n)[r] : e;
+}
+function Et(e, t, n) {
+	return t !== void 0 && !yt(t) ? t : e[n];
+}
+function Dt(e) {
+	let { color: t, outline: n, size: r, weight: i, family: a, italic: o, uppercase: s, fill: c, label: l, css: u, padding: d, paddingX: f, paddingY: m, borderWidth: h, borderRadius: g, background: _, ink: v, type: y = "button", children: b, ...x } = e, { fontSizes: S, fontWeights: C, fontFamilies: w, lineHeight: T, space: E, borderWidths: D, radii: O, defaults: k, brand: A, status: j, colors: N } = Q(), P = bt(t ?? k.button.color, A, j), F = !n, ee = k.button.hover, I = Tt(ee.color, A, j, "base"), L = (e, t, n) => se(e, t, n, N, A, j), te = (e) => {
+		let t = L(_, "background", e);
+		return t === void 0 ? F ? e === "base" ? P.base : Et(P, ee.background, e) : "transparent" : t;
+	}, R = (e) => {
+		let t = L(v, "text", e);
+		return t === void 0 ? F ? e === "base" ? k.button.ink : I : P[e] : t;
+	}, ne = te("base"), re = te("hover"), ie = te("active"), ae = R("base"), oe = R("hover"), z = R("active"), ce = F ? ne : P.base, le = F ? re : P.hover, ue = F ? ie : P.active;
+	return /* @__PURE__ */ p(wt, {
+		type: y,
+		$family: w[a ?? "base"],
+		$size: M(r, k.button.size, S),
+		$weight: M(i, k.button.weight, C),
+		$lineHeight: T,
+		$paddingX: M(f ?? d, k.button.paddingX, E),
+		$paddingY: M(m ?? d, k.button.paddingY, E),
+		$gap: M(void 0, k.button.gap, E),
+		$borderWidth: M(h, k.button.borderWidth, D),
+		$borderRadius: M(g, k.button.borderRadius, O),
+		$restBg: ne,
+		$restFg: ae,
+		$restBorder: ce,
+		$hoverBg: re,
+		$hoverFg: oe,
+		$hoverBorder: le,
+		$activeBg: ie,
+		$activeFg: z,
+		$activeBorder: ue,
+		$italic: o,
+		$uppercase: s,
+		$fill: c,
+		$customCss: u,
+		...x,
+		children: b ?? l
+	});
+}
+//#endregion
+//#region src/components/chips/Chip.tsx
+var Ot = d.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ $gap: e }) => e};
+  margin: 0;
+  box-sizing: border-box;
+  white-space: nowrap;
+  font-family: ${({ $family: e }) => e};
+  font-size: ${({ $size: e }) => e};
+  font-weight: ${({ $weight: e }) => e};
+  line-height: ${({ $lineHeight: e }) => e};
+  padding: ${({ $paddingY: e, $paddingX: t }) => `${e} ${t}`};
+  border-width: ${({ $borderWidth: e }) => e};
+  border-style: solid;
+  border-color: ${({ $borderColor: e }) => e};
+  border-radius: ${({ $borderRadius: e }) => e};
+  background: ${({ $bg: e }) => e};
+  color: ${({ $fg: e }) => e};
+  ${({ $uppercase: e }) => e ? "text-transform: uppercase;" : ""}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function kt(e) {
+	let { color: t, size: n, weight: r, family: i, uppercase: a, label: o, css: s, padding: c, paddingX: l, paddingY: u, borderWidth: d, borderRadius: f, background: m, ink: h, borderColor: g, children: _, ...v } = e, { fontSizes: y, fontWeights: b, fontFamilies: x, lineHeight: S, space: C, borderWidths: w, radii: T, defaults: E, brand: D, status: O, colors: k } = Q(), A = E.chip, j = bt(t ?? A.color, D, O).base, N = `color-mix(in srgb, ${j} ${A.tint}, var(${$.background}, transparent))`, P = z(m, "background", k, D, O) ?? N, F = z(h, "text", k, D, O) ?? j, ee = z(g, "border", k, D, O) ?? j;
+	return /* @__PURE__ */ p(Ot, {
+		$family: x[i ?? "base"],
+		$size: M(n, A.size, y),
+		$weight: M(r, A.weight, b),
+		$lineHeight: S,
+		$paddingX: M(l ?? c, A.paddingX, C),
+		$paddingY: M(u ?? c, A.paddingY, C),
+		$gap: M(void 0, A.gap, C),
+		$borderWidth: M(d, "none", w),
+		$borderRadius: M(f, A.borderRadius, T),
+		$borderColor: ee,
+		$bg: P,
+		$fg: F,
+		$uppercase: a ?? A.uppercase,
+		$customCss: s,
+		...v,
+		children: _ ?? o
+	});
+}
+//#endregion
+//#region src/components/forms/Checkbox.tsx
+function At(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+var jt = d.input`
+  appearance: none;
+  margin: 0;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  color: inherit;
+  width: ${({ $width: e }) => e};
+  height: ${({ $height: e }) => e};
+  font-size: ${({ $size: e }) => e};
+  padding: 0;
+  border: ${({ $borderWidth: e }) => e} solid ${({ $borderColor: e }) => e};
+  border-radius: ${({ $radius: e }) => e};
+  background: ${({ $off: e }) => e};
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  &::after {
+    content: '';
+    position: absolute;
+    box-sizing: border-box;
+    pointer-events: none;
+    opacity: 0;
+  }
+  &:hover:not(:disabled):not(:checked):not(:indeterminate) {
+    border-color: ${({ $hoverBorder: e }) => e};
+  }
+  &:active:not(:disabled):not(:checked):not(:indeterminate) {
+    border-color: ${({ $activeBorder: e }) => e};
+  }
+  &:checked,
+  &:indeterminate {
+    background: ${({ $on: e }) => e};
+    border-color: ${({ $on: e }) => e};
+  }
+  &:is(:checked, :indeterminate):hover:not(:disabled) {
+    background: ${({ $hoverOn: e }) => e};
+    border-color: ${({ $hoverOn: e }) => e};
+  }
+  &:is(:checked, :indeterminate):active:not(:disabled) {
+    background: ${({ $activeOn: e }) => e};
+    border-color: ${({ $activeOn: e }) => e};
+  }
+  &:checked:not(:indeterminate)::after {
+    opacity: ${({ $hideCheckIcon: e }) => +!e};
+    left: 50%;
+    top: 42%;
+    width: 0.3em;
+    height: 0.52em;
+    border: solid ${({ $ink: e }) => e};
+    border-width: 0 0.17em 0.17em 0;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  &:indeterminate::after {
+    opacity: 1;
+    left: 50%;
+    top: 50%;
+    width: 50%;
+    height: 0.17em;
+    border: none;
+    border-radius: 999px;
+    background: ${({ $ink: e }) => e};
+    transform: translate(-50%, -50%);
+  }
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px color-mix(in srgb, ${({ $on: e }) => e} 18%, transparent);
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  &:disabled:is(:checked, :indeterminate) {
+    opacity: 0.45;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Mt(e) {
+	let { color: t, size: n, css: r, background: i, ink: a, borderColor: o, borderWidth: s, borderRadius: c, width: l, height: u, indeterminate: d = !1, hideCheckIcon: f = !1, ref: m, ...h } = e, { space: g, radii: _, fontSizes: v, borderWidths: y, defaults: b, brand: x, status: S, colors: C } = Q(), w = b.checkbox, T = bt(t ?? w.color, x, S), E = z(i, "background", C, x, S) ?? "transparent", D = se(a, "text", "base", C, x, S) ?? w.ink, O = z(o, "border", C, x, S) ?? "currentColor", k = M(n, w.size, v), A = k, j = l === void 0 ? A : M(l, k, g), N = u === void 0 ? A : M(u, k, g);
+	return /* @__PURE__ */ p(jt, {
+		$width: j,
+		$height: N,
+		$size: k,
+		$radius: M(c, w.borderRadius, _),
+		$borderWidth: M(s, w.borderWidth, y),
+		$borderColor: O,
+		$hoverBorder: O,
+		$activeBorder: O,
+		$off: E,
+		$on: T.base,
+		$hoverOn: T.hover,
+		$activeOn: T.active,
+		$ink: D,
+		$hideCheckIcon: f,
+		$customCss: r,
+		...h,
+		ref: (e) => {
+			e && (e.indeterminate = d), At(m, e);
+		},
+		type: "checkbox"
+	});
+}
+Mt.displayName = "Checkbox";
+//#endregion
+//#region src/components/forms/field.ts
+var Nt = u`
+  appearance: none;
+  margin: 0;
+  box-sizing: border-box;
+  min-width: 0;
+  ${({ $fill: e }) => e ? u`
+          display: block;
+          width: 100%;
+          height: 100%;
+        ` : ""}
+  font-family: ${({ $family: e }) => e};
+  font-size: ${({ $size: e }) => e};
+  font-weight: ${({ $weight: e }) => e};
+  line-height: ${({ $lineHeight: e }) => e};
+  padding: ${({ $paddingY: e, $paddingX: t }) => `${e} ${t}`};
+  border-width: ${({ $borderWidth: e }) => e};
+  border-style: solid;
+  border-radius: ${({ $borderRadius: e }) => e};
+  border-color: ${({ $borderColor: e }) => e};
+  background: ${({ $bg: e }) => e};
+  color: ${({ $ink: e }) => e};
+  caret-color: ${({ $focus: e }) => e};
+  &::placeholder {
+    color: var(${$.textMuted});
+    opacity: 1;
+  }
+  ${({ $focus: e, $invalid: t }) => u`
+    &:focus {
+      outline: none;
+      border-color: ${e};
+      box-shadow: 0 0 0 2px color-mix(in srgb, ${e} 18%, transparent);
+    }
+    &:user-invalid,
+    &[aria-invalid='true'] {
+      border-color: ${t};
+      box-shadow: 0 0 0 2px color-mix(in srgb, ${t} 18%, transparent);
+      caret-color: ${t};
+    }
+    &:user-invalid:focus,
+    &[aria-invalid='true']:focus {
+      border-color: ${t};
+      box-shadow: 0 0 0 2px color-mix(in srgb, ${t} 18%, transparent);
+      caret-color: ${t};
+    }
+  `}
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+  &:is(input, textarea):read-only {
+    opacity: 0.45;
+  }
+  ${({ $italic: e }) => e ? u`
+          font-style: italic;
+        ` : ""}
+  ${({ $uppercase: e }) => e ? u`
+          text-transform: uppercase;
+        ` : ""}
+`, Pt = d.input`
+  ${Nt}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Ft(e) {
+	let { color: t, size: n, weight: r, family: i, italic: a, uppercase: o, fill: s, css: c, padding: l, paddingX: u, paddingY: d, borderWidth: f, borderRadius: m, background: h, ink: g, borderColor: _, type: v = "text", ...y } = e, { fontSizes: b, fontWeights: x, fontFamilies: S, lineHeight: C, space: w, borderWidths: T, radii: E, defaults: D, brand: O, status: k, colors: A } = Q(), j = D.input;
+	return /* @__PURE__ */ p(Pt, {
+		type: v,
+		$family: S[i ?? "base"],
+		$size: M(n, j.size, b),
+		$weight: M(r, j.weight, x),
+		$lineHeight: C,
+		$paddingX: M(u ?? l, j.paddingX, w),
+		$paddingY: M(d ?? l, j.paddingY, w),
+		$borderWidth: M(f, j.borderWidth, T),
+		$borderRadius: M(m, j.borderRadius, E),
+		$bg: z(h, "background", A, O, k) ?? `var(${$.background})`,
+		$ink: z(g, "text", A, O, k) ?? `var(${$.text})`,
+		$borderColor: z(_, "border", A, O, k) ?? `var(${$.border})`,
+		$focus: xt(t ?? j.color, O, k),
+		$invalid: k.danger.base,
+		$italic: a,
+		$uppercase: o,
+		$fill: s,
+		$customCss: c,
+		...y
+	});
+}
+//#endregion
+//#region src/components/text/typography.ts
+var It = t(null);
+function Lt() {
+	return r(It);
+}
+var Rt = u`
+  margin: 0;
+  padding: 0;
+  font-family: ${({ $family: e }) => e};
+  font-size: ${({ $size: e }) => e};
+  color: ${({ $color: e }) => e};
+  font-weight: ${({ $weight: e }) => e};
+  line-height: ${({ $lineHeight: e }) => e};
+  ${({ $italic: e }) => e ? u`
+          font-style: italic;
+        ` : ""}
+  ${({ $underlined: e }) => e ? u`
+          text-decoration: underline;
+        ` : ""}
+  ${({ $uppercase: e }) => e ? u`
+          text-transform: uppercase;
+        ` : ""}
+`, zt = ":is(button, input, select, textarea)", Bt = d.label`
+  display: inline-block;
+  cursor: ${({ $clickable: e }) => e ? "pointer" : "default"};
+  ${Rt}
+  line-height: 1;
+  text-box: trim-both cap alphabetic;
+  &[for],
+  &:has(${zt}) {
+    cursor: pointer;
+  }
+  &:has(${zt}:disabled) {
+    cursor: not-allowed;
+  }
+  &:has(${zt}) {
+    text-box: unset;
+  }
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Vt(e) {
+	let { size: t, color: n, muted: r, highlighted: i, weight: a, family: o, italic: s, underlined: c, uppercase: l, label: u, css: d, children: f, onClick: m, ...h } = e, { fontSizes: g, fontWeights: _, fontFamilies: v, defaults: y, brand: b, status: x } = Q(), S = v[o ?? "base"], C = M(t, y.text.size, g), w = M(a, y.text.weight, _);
+	return /* @__PURE__ */ p(It.Provider, {
+		value: {
+			family: S,
+			size: C,
+			weight: w,
+			lineHeight: 1
+		},
+		children: /* @__PURE__ */ p(Bt, {
+			$family: S,
+			$size: C,
+			$color: St(n, i, r, b, x),
+			$weight: w,
+			$lineHeight: 1,
+			$italic: s,
+			$underlined: c,
+			$uppercase: l,
+			$clickable: typeof m == "function",
+			$customCss: d,
+			onClick: m,
+			...h,
+			children: f ?? u
+		})
+	});
+}
+Vt.displayName = "Label";
+//#endregion
+//#region src/components/forms/NumberInput.tsx
+function Ht(e) {
+	e.preventDefault(), e.currentTarget.blur();
+}
+function Ut(e) {
+	let { onWheel: t, ...n } = e;
+	return /* @__PURE__ */ p(Ft, {
+		...n,
+		type: "number",
+		onWheel: (e) => {
+			Ht(e), t?.(e);
+		}
+	});
+}
+Ut.displayName = "NumberInput";
+//#endregion
+//#region src/components/forms/Radio.tsx
+var Wt = d.input`
+  appearance: none;
+  margin: 0;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  color: inherit;
+  width: ${({ $width: e }) => e};
+  height: ${({ $height: e }) => e};
+  font-size: ${({ $size: e }) => e};
+  padding: 0;
+  border: ${({ $borderWidth: e }) => e} solid ${({ $borderColor: e }) => e};
+  border-radius: ${({ $radius: e }) => e};
+  background: ${({ $off: e }) => e};
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  &::after {
+    content: '';
+    position: absolute;
+    box-sizing: border-box;
+    pointer-events: none;
+    opacity: 0;
+    left: 50%;
+    top: 50%;
+    width: calc(100% - 2 * ${({ $inset: e }) => e});
+    height: calc(100% - 2 * ${({ $inset: e }) => e});
+    border-radius: min(${({ $radius: e }) => e}, 50%);
+    background: ${({ $dot: e }) => e};
+    transform: translate(-50%, -50%);
+    transition: background 120ms ease;
+  }
+  &:hover:not(:disabled):not(:checked) {
+    border-color: ${({ $hoverBorder: e }) => e};
+  }
+  &:active:not(:disabled):not(:checked) {
+    border-color: ${({ $activeBorder: e }) => e};
+  }
+  &:checked {
+    border-color: ${({ $on: e }) => e};
+  }
+  &:checked::after {
+    opacity: 1;
+  }
+  &:checked:hover:not(:disabled) {
+    border-color: ${({ $hoverOn: e }) => e};
+  }
+  &:checked:hover:not(:disabled)::after {
+    background: ${({ $hoverDot: e }) => e};
+  }
+  &:checked:active:not(:disabled) {
+    border-color: ${({ $activeOn: e }) => e};
+  }
+  &:checked:active:not(:disabled)::after {
+    background: ${({ $activeDot: e }) => e};
+  }
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px color-mix(in srgb, ${({ $on: e }) => e} 18%, transparent);
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  &:disabled:checked {
+    opacity: 0.45;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+    &::after {
+      transition: none;
+    }
+  }
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Gt(e) {
+	let { color: t, size: n, css: r, background: i, ink: a, borderColor: o, borderWidth: s, borderRadius: c, width: l, height: u, ...d } = e, { space: f, radii: m, fontSizes: h, borderWidths: g, defaults: _, brand: v, status: y, colors: b } = Q(), x = _.radio, S = bt(t ?? x.color, v, y), C = z(i, "background", b, v, y) ?? "transparent", w = se(a, "text", "base", b, v, y), T = se(a, "text", "hover", b, v, y), E = se(a, "text", "active", b, v, y), D = z(o, "border", b, v, y) ?? "currentColor", O = M(n, x.size, h), k = O, A = l === void 0 ? k : M(l, O, f), j = u === void 0 ? k : M(u, O, f), N = M(c, x.borderRadius, m);
+	return /* @__PURE__ */ p(Wt, {
+		$width: A,
+		$height: j,
+		$size: O,
+		$radius: N,
+		$borderWidth: M(s, x.borderWidth, g),
+		$borderColor: D,
+		$hoverBorder: D,
+		$activeBorder: D,
+		$off: C,
+		$on: S.base,
+		$hoverOn: S.hover,
+		$activeOn: S.active,
+		$dot: w ?? S.base,
+		$hoverDot: T ?? w ?? S.hover,
+		$activeDot: E ?? w ?? S.active,
+		$inset: `calc(${O} * ${x.insetFactor})`,
+		$customCss: r,
+		...d,
+		type: "radio"
+	});
+}
+Gt.displayName = "Radio";
+//#endregion
+//#region src/components/forms/selects/listbox.ts
+function Kt(e) {
+	return null;
+}
+Kt.displayName = "Option";
+function qt(e) {
+	return e.label === void 0 ? typeof e.children == "string" ? e.children : e.value : e.label;
+}
+function Jt(e) {
+	return n(e) && e.type === Kt;
+}
+function Yt(t, n) {
+	let r = /* @__PURE__ */ new Map();
+	for (let e of t ?? []) r.set(e.value, {
+		value: e.value,
+		label: e.label,
+		disabled: e.disabled
+	});
+	return e.forEach(n, (e) => {
+		if (!Jt(e)) return;
+		let { value: t, disabled: n } = e.props;
+		r.set(t, {
+			value: t,
+			label: qt(e.props),
+			disabled: n
+		});
+	}), [...r.values()];
+}
+function Xt(e, t, n, r) {
+	return !t || r || e.some((e) => e.value === "") ? e : [{
+		value: "",
+		label: typeof t == "string" ? t : n ?? ""
+	}, ...e];
+}
+function Zt(e, t, n) {
+	if (!n || t === "") return e;
+	let r = e.findIndex((e) => e.value === t);
+	if (r <= 0) return e;
+	let i = e.slice(), [a] = i.splice(r, 1);
+	return a && i.unshift(a), i;
+}
+function Qt(e, t, n) {
+	if (!n || t.length === 0) return e;
+	let r = new Set(t), i = [], a = [];
+	for (let t of e) r.has(t.value) ? i.push(t) : a.push(t);
+	return [...i, ...a];
+}
+function $t(e) {
+	return e.findIndex((e) => !e.disabled);
+}
+function en(e) {
+	for (let t = e.length - 1; t >= 0; --t) if (!e[t]?.disabled) return t;
+	return -1;
+}
+function tn(e, t, n) {
+	if (e.length === 0) return -1;
+	let r = t;
+	for (let t = 0; t < e.length; t += 1) if (r = (r + n + e.length) % e.length, !e[r]?.disabled) return r;
+	return t;
+}
+function nn(e, t, n) {
+	let r = t.toLowerCase(), i = n < 0 ? 0 : n, a = [...e.slice(i), ...e.slice(0, i)].find((e) => !e.disabled && e.label.toLowerCase().startsWith(r));
+	return a ? e.indexOf(a) : -1;
+}
+function rn(e) {
+	let t = getComputedStyle(e), n = {};
+	for (let e of Object.values($)) n[e] = t.getPropertyValue(e).trim();
+	return n;
+}
+function an(e, t = 16) {
+	let n = Number.parseFloat(e);
+	if (!Number.isFinite(n)) return 256;
+	if (e.endsWith("rem")) {
+		let e = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+		return n * (Number.isFinite(e) ? e : 16);
+	}
+	return e.endsWith("em") ? n * t : n;
+}
+function on(e, t, n, r) {
+	let i = e.getBoundingClientRect(), a = Number.parseFloat(getComputedStyle(e).fontSize), o = Number.isFinite(a) ? a : 16, s = an(t, o), c = an(M(void 0, n, r), o), l = window.innerHeight - i.bottom - c, u = i.top - c, d = l < Math.min(s, 120) && u > l, f = Math.max(8, Math.min(s, d ? u : l));
+	return {
+		vars: rn(e),
+		box: {
+			top: d ? i.top - f - c : i.bottom + c,
+			left: i.left,
+			width: i.width,
+			maxHeight: f
+		}
+	};
+}
+function sn({ items: e, open: t, onOpenChange: n, activeOnOpen: r, listMaxHeight: a, listOffset: s, space: u }) {
+	let d = t !== void 0, [f, p] = l(!1), m = d ? t : f, [h, g] = l(-1), [_, v] = l(null), [y, b] = l({}), x = c(null), S = c(null), C = c(null), w = c({
+		buffer: "",
+		timer: 0
+	}), T = c(void 0), E = (t) => {
+		g(t), T.current = t >= 0 ? e[t]?.value : void 0;
+	}, D = (e, t) => {
+		E(e ? t ?? r : -1), d || p(e), n?.(e);
+	}, O = (e) => {
+		e >= 0 && E(e);
+	}, k = () => {
+		let e = x.current;
+		if (!e) return;
+		let t = on(e, a, s, u);
+		b(t.vars), v(t.box);
+	};
+	return i(() => {
+		let e = w.current;
+		return () => window.clearTimeout(e.timer);
+	}, []), o(() => {
+		if (!m) return;
+		let t = T.current;
+		if (t === void 0) return;
+		let n = e.findIndex((e) => e.value === t);
+		n >= 0 && n !== h && g(n);
+	}, [
+		e,
+		m,
+		h
+	]), o(() => {
+		if (!m) return;
+		k();
+		let e = () => k();
+		return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+		};
+	}, [
+		m,
+		a,
+		s,
+		u
+	]), o(() => {
+		if (!m) return;
+		let e = C.current?.querySelector("[data-active=\"true\"]");
+		e instanceof HTMLElement && e.scrollIntoView?.({ block: "nearest" });
+	}, [m, h]), i(() => {
+		if (!m) return;
+		let e = (e) => {
+			let t = e.target;
+			t instanceof Node && (S.current?.contains(t) || C.current?.contains(t) || (D(!1), x.current?.blur()));
+		};
+		return document.addEventListener("mousedown", e), () => {
+			document.removeEventListener("mousedown", e);
+		};
+	}, [
+		m,
+		d,
+		n,
+		e,
+		r
+	]), {
+		isOpen: m,
+		activeIndex: h,
+		box: _,
+		listVars: y,
+		triggerRef: x,
+		wrapRef: S,
+		listRef: C,
+		typeRef: w,
+		setOpen: D,
+		moveActive: O,
+		placeList: k
+	};
+}
+function cn(e, t) {
+	if (e.defaultPrevented || t.disabled) return;
+	let n = e.key, { isOpen: r, items: i, activeIndex: a, showClear: o, readOnly: s, typeRef: c, placeList: l, setOpen: u, moveActive: d, openHighlightDown: f, openHighlightUp: p, onCommit: m, onClear: h, onClosedTypeahead: g, closedTypeaheadFrom: _ } = t;
+	if (!r && (n === "ArrowDown" || n === "ArrowUp" || n === "Enter" || n === " ")) e.preventDefault(), l(), n === "ArrowUp" ? u(!0, p) : u(!0, f);
+	else if (!r) {
+		if ((n === "Backspace" || n === "Delete") && o) {
+			e.preventDefault(), h();
+			return;
+		}
+		if (n.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && !s) {
+			let e = nn(i, n, _ + 1);
+			e >= 0 && i[e] && g(i[e]);
+		}
+	} else if (n === "Escape") e.preventDefault(), u(!1);
+	else if (n === "ArrowDown") e.preventDefault(), d(tn(i, a, 1));
+	else if (n === "ArrowUp") e.preventDefault(), d(tn(i, a, -1));
+	else if (n === "Home") e.preventDefault(), d($t(i));
+	else if (n === "End") e.preventDefault(), d(en(i));
+	else if (n === "Enter" || n === " ") {
+		e.preventDefault();
+		let t = i[a];
+		t && !t.disabled && m(t);
+	} else if (n.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+		e.preventDefault(), window.clearTimeout(c.current.timer), c.current.buffer += n, c.current.timer = window.setTimeout(() => {
+			c.current.buffer = "";
+		}, 400);
+		let t = nn(i, c.current.buffer, a);
+		t >= 0 && d(t);
+	}
+}
+//#endregion
+//#region src/components/forms/selects/listboxChrome.ts
+var ln = d.span`
+  position: relative;
+  display: ${({ $fill: e }) => e ? "block" : "inline-block"};
+  ${({ $fill: e }) => e ? u`
+          width: 100%;
+        ` : ""}
+  min-width: 0;
+  vertical-align: top;
+`, un = d.button`
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  inset-inline-end: ${({ $end: e }) => e};
+  box-sizing: border-box;
+  width: 1.375rem;
+  height: 1.375rem;
+  margin: 0;
+  padding: 0.1875rem;
+  transform: translateY(-50%);
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  background-clip: content-box;
+  cursor: pointer;
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.58em;
+    height: 0.12em;
+    background: ${({ $ink: e }) => e};
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  &::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+  &:hover {
+    background: color-mix(
+      in srgb,
+      var(${$.textHighlighted}) 16%,
+      var(${$.background})
+    );
+    background-clip: content-box;
+    &::before,
+    &::after {
+      background: ${({ $hoverInk: e }) => e};
+    }
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+`, dn = d.span`
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: ${({ $ink: e }) => e};
+  -webkit-text-fill-color: ${({ $ink: e }) => e};
+`, fn = d.button`
+  ${Nt}
+  position: relative;
+  display: ${({ $fill: e }) => e ? "flex" : "inline-flex"};
+  align-items: center;
+  justify-content: flex-start;
+  text-align: left;
+  cursor: pointer;
+  color: ${({ $ink: e }) => e};
+  -webkit-text-fill-color: ${({ $ink: e }) => e};
+  border: ${({ $borderWidth: e, $borderColor: t }) => `${e} solid ${t}`};
+  background-color: ${({ $bg: e }) => e};
+  padding-inline-end: calc(
+    ${({ $paddingX: e, $clearable: t }) => t ? `${e} + 2.15em` : `${e} + 1.15em`}
+  );
+  ${({ $focus: e, $invalid: t }) => u`
+    &:focus,
+    &[aria-expanded='true'] {
+      outline: none;
+      border-color: ${e};
+      box-shadow: 0 0 0 2px color-mix(in srgb, ${e} 18%, transparent);
+    }
+    &[aria-invalid='true'],
+    &[aria-invalid='true']:focus,
+    &[aria-invalid='true'][aria-expanded='true'] {
+      border-color: ${t};
+      box-shadow: 0 0 0 2px color-mix(in srgb, ${t} 18%, transparent);
+    }
+  `}
+  &::after {
+    content: '';
+    position: absolute;
+    inset-inline-end: ${({ $paddingX: e }) => e};
+    top: 50%;
+    width: 0.4em;
+    height: 0.4em;
+    box-sizing: border-box;
+    border-right: 0.12em solid ${({ $muted: e }) => e};
+    border-bottom: 0.12em solid ${({ $muted: e }) => e};
+    transform: ${({ $open: e }) => e ? "translateY(calc(-50% + 0.06em)) rotate(-135deg)" : "translateY(calc(-50% - 0.06em)) rotate(45deg)"};
+    pointer-events: none;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  ${({ $customCss: e }) => e ?? ""}
+`, pn = d.ul`
+  box-sizing: border-box;
+  position: fixed;
+  z-index: ${({ $zIndex: e }) => e};
+  top: ${({ $top: e }) => `${e}px`};
+  left: ${({ $left: e }) => `${e}px`};
+  width: ${({ $width: e }) => `${e}px`};
+  max-height: ${({ $maxHeight: e }) => `${e}px`};
+  margin: 0;
+  padding: 0.25rem 0;
+  overflow: auto;
+  list-style: none;
+  font-family: ${({ $family: e }) => e};
+  font-size: ${({ $size: e }) => e};
+  font-weight: ${({ $weight: e }) => e};
+  line-height: ${({ $lineHeight: e }) => e};
+  color: ${({ $ink: e }) => e};
+  -webkit-text-fill-color: ${({ $ink: e }) => e};
+  border: ${({ $borderWidth: e }) => e} solid ${({ $borderColor: e }) => e};
+  border-radius: ${({ $radius: e }) => e};
+  background: ${({ $bg: e }) => e};
+  box-shadow: ${({ $shadow: e }) => e};
+`, mn = d.li`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.5em;
+  padding: ${({ $padY: e, $padX: t }) => `${e} ${t}`};
+  cursor: ${({ $disabled: e }) => e ? "not-allowed" : "pointer"};
+  opacity: ${({ $disabled: e }) => e ? .45 : 1};
+  color: ${({ $selected: e, $chroma: t, $ink: n }) => e ? t : n};
+  -webkit-text-fill-color: ${({ $selected: e, $chroma: t, $ink: n }) => e ? t : n};
+  background: ${({ $active: e, $disabled: t }) => e && !t ? `color-mix(in srgb, var(${$.textHighlighted}) 18%, var(${$.background}))` : "transparent"};
+`, hn = d.span`
+  display: flex;
+  flex-shrink: 0;
+  pointer-events: none;
+`;
+function gn(e) {
+	let { ref: t, color: n, size: r, weight: i, family: o, italic: s, uppercase: c, fill: u, css: d, padding: g, paddingX: _, paddingY: v, borderWidth: y, borderRadius: b, background: x, ink: S, borderColor: C, value: w, defaultValue: T, onChange: E, open: D, onOpenChange: O, options: k, placeholder: A, name: j, required: N, clearable: P, selectedAtTop: F, children: ee, disabled: I, readOnly: L, id: te, onKeyDown: R, onClick: ne, onBlur: re, ...ie } = e, { fontSizes: ae, fontWeights: oe, fontFamilies: se, lineHeight: ce, space: le, borderWidths: ue, radii: de, defaults: fe, brand: pe, status: me, colors: he } = Q(), B = fe.select, V = w !== void 0, [ge, _e] = l(() => T ?? []), ve = V ? w ?? [] : ge, H = new Set(ve), U = Qt(Yt(k, ee), ve, !!F), W = U.findIndex((e) => H.has(e.value)), ye = W >= 0 ? W : $t(U), { isOpen: G, activeIndex: K, box: be, listVars: q, triggerRef: J, wrapRef: xe, listRef: Se, typeRef: Ce, setOpen: Y, moveActive: X, placeList: we } = sn({
+		items: U,
+		open: D,
+		onOpenChange: O,
+		activeOnOpen: ye,
+		listMaxHeight: B.listMaxHeight,
+		listOffset: B.listOffset,
+		space: le
+	}), Te = a(), Ee = (e) => {
+		J.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+	}, De = xt(n ?? B.color, pe, me), Oe = me.danger.base, ke = M(r, B.size, ae), Ae = M(_ ?? g, B.paddingX, le), je = M(v ?? g, B.paddingY, le), Me = M(b, B.borderRadius, de), Ne = M(y, B.borderWidth, ue), Pe = z(x, "background", he, pe, me) ?? `var(${$.background})`, Fe = z(S, "text", he, pe, me) ?? `var(${$.textHighlighted})`, Z = z(C, "border", he, pe, me) ?? `var(${$.border})`, Ie = ve.length === 0, Le = !!P && !N && !Ie && !I && !L, Re = `var(${$.textMuted})`, ze = Ie ? Re : Fe, Be = Ie ? A ?? "" : `${ve.length} selected`, Ve = M(void 0, B.optionPaddingX, le), He = M(void 0, B.optionPaddingY, le), Ue = M(i, B.weight, oe), We = se[o ?? "base"], Ge = n ?? B.color, Ke = (e) => {
+		V || _e(e), E?.(e);
+	}, qe = (e) => {
+		if (!L) {
+			if (H.has(e)) {
+				if (N && ve.length <= 1) return;
+				Ke(ve.filter((t) => t !== e));
+			} else Ke([...ve, e]);
+		}
+	}, Je = (e) => {
+		L || N || Ie || (Ke([]), Y(!1), e && J.current?.blur());
+	}, Ye = (e) => {
+		R?.(e), cn(e, {
+			disabled: I,
+			readOnly: L,
+			isOpen: G,
+			items: U,
+			activeIndex: K,
+			showClear: Le,
+			typeRef: Ce,
+			placeList: we,
+			setOpen: Y,
+			moveActive: X,
+			openHighlightDown: ye,
+			openHighlightUp: W >= 0 ? W : en(U),
+			closedTypeaheadFrom: W,
+			onCommit: (e) => qe(e.value),
+			onClear: () => Je(!1),
+			onClosedTypeahead: (e) => {
+				let t = U.findIndex((t) => t.value === e.value);
+				we(), Y(!0, t >= 0 ? t : void 0);
+			}
+		});
+	}, Xe = G && K >= 0 && U[K] ? `${Te}-${U[K].value}` : void 0;
+	return /* @__PURE__ */ m(f, { children: [
+		j === void 0 ? null : Ie ? /* @__PURE__ */ p("input", {
+			type: "hidden",
+			name: j,
+			value: "",
+			required: N || void 0,
+			disabled: I || void 0
+		}) : ve.map((e) => /* @__PURE__ */ p("input", {
+			type: "hidden",
+			name: j,
+			value: e,
+			disabled: I || void 0
+		}, e)),
+		/* @__PURE__ */ m(ln, {
+			ref: xe,
+			$fill: u,
+			children: [/* @__PURE__ */ p(fn, {
+				...ie,
+				ref: Ee,
+				id: te,
+				type: "button",
+				disabled: I,
+				role: "combobox",
+				"aria-haspopup": "listbox",
+				"aria-autocomplete": "none",
+				"aria-expanded": G,
+				"aria-controls": G ? Te : void 0,
+				"aria-activedescendant": Xe,
+				"aria-required": N || void 0,
+				"aria-readonly": L || void 0,
+				$family: We,
+				$size: ke,
+				$weight: Ue,
+				$lineHeight: ce,
+				$paddingX: Ae,
+				$paddingY: je,
+				$borderWidth: Ne,
+				$borderRadius: Me,
+				$bg: Pe,
+				$ink: Fe,
+				$muted: Re,
+				$borderColor: Z,
+				$focus: De,
+				$invalid: Oe,
+				$italic: s,
+				$uppercase: c,
+				$fill: u,
+				$open: G,
+				$clearable: Le,
+				$customCss: d,
+				onKeyDown: Ye,
+				onBlur: (e) => {
+					if (re?.(e), e.defaultPrevented) return;
+					let t = e.relatedTarget;
+					t instanceof Node && (xe.current?.contains(t) || Se.current?.contains(t)) || G && Y(!1);
+				},
+				onClick: (e) => {
+					ne?.(e), !(e.defaultPrevented || I) && (G ? (Y(!1), J.current?.blur()) : (we(), Y(!0)));
+				},
+				children: /* @__PURE__ */ p(dn, {
+					$ink: ze,
+					children: Be
+				})
+			}), Le ? /* @__PURE__ */ p(un, {
+				type: "button",
+				tabIndex: -1,
+				"aria-label": "Clear",
+				$end: `calc(${Ae} + 0.95em)`,
+				$ink: Re,
+				$hoverInk: Fe,
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: (e) => {
+					e.stopPropagation(), Je(!0);
+				}
+			}) : null]
+		}),
+		G && be && typeof document < "u" ? h(/* @__PURE__ */ p(pn, {
+			ref: Se,
+			id: Te,
+			role: "listbox",
+			"aria-multiselectable": !0,
+			"aria-labelledby": te || void 0,
+			style: q,
+			$top: be.top,
+			$left: be.left,
+			$width: be.width,
+			$maxHeight: be.maxHeight,
+			$zIndex: B.listZIndex,
+			$shadow: B.listShadow,
+			$radius: Me,
+			$borderWidth: Ne,
+			$borderColor: Z,
+			$bg: Pe,
+			$ink: Fe,
+			$size: ke,
+			$weight: Ue,
+			$family: We,
+			$lineHeight: ce,
+			children: U.map((e, t) => {
+				let n = H.has(e.value);
+				return /* @__PURE__ */ m(mn, {
+					id: `${Te}-${e.value}`,
+					role: "option",
+					"aria-selected": n,
+					"aria-disabled": e.disabled || void 0,
+					"data-active": t === K ? "true" : void 0,
+					$padX: Ve,
+					$padY: He,
+					$chroma: De,
+					$ink: Fe,
+					$selected: n,
+					$active: t === K,
+					$disabled: !!e.disabled,
+					onMouseEnter: () => {
+						e.disabled || X(t);
+					},
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: () => {
+						e.disabled || (X(t), qe(e.value));
+					},
+					children: [/* @__PURE__ */ p(hn, {
+						"aria-hidden": !0,
+						children: /* @__PURE__ */ p(Mt, {
+							tabIndex: -1,
+							checked: n,
+							disabled: e.disabled,
+							color: Ge,
+							size: r ?? B.size,
+							onChange: () => void 0
+						})
+					}), e.label]
+				}, e.value);
+			})
+		}), document.body) : null
+	] });
+}
+gn.displayName = "MultiSelect";
+//#endregion
+//#region src/components/forms/selects/Select.tsx
+var _n = d.li`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75em;
+  padding: ${({ $padY: e, $padX: t }) => `${e} ${t}`};
+  cursor: ${({ $disabled: e }) => e ? "not-allowed" : "pointer"};
+  opacity: ${({ $disabled: e }) => e ? .45 : 1};
+  color: ${({ $selected: e, $chroma: t, $ink: n }) => e ? t : n};
+  -webkit-text-fill-color: ${({ $selected: e, $chroma: t, $ink: n }) => e ? t : n};
+  background: ${({ $active: e, $disabled: t }) => e && !t ? `color-mix(in srgb, var(${$.textHighlighted}) 18%, var(${$.background}))` : "transparent"};
+  ${({ $selected: e, $chroma: t }) => e ? `
+    &::after {
+      content: '';
+      flex-shrink: 0;
+      width: 0.28em;
+      height: 0.48em;
+      box-sizing: border-box;
+      border: solid ${t};
+      border-width: 0 0.14em 0.14em 0;
+      transform: translateY(-12%) rotate(45deg);
+    }
+  ` : ""}
+`;
+function vn(e) {
+	let { ref: t, color: n, size: r, weight: i, family: o, italic: s, uppercase: c, fill: u, css: d, padding: g, paddingX: _, paddingY: v, borderWidth: y, borderRadius: b, background: x, ink: S, borderColor: C, value: w, defaultValue: T, onChange: E, open: D, onOpenChange: O, options: k, placeholder: A, name: j, required: N, clearable: P, selectedAtTop: F, emptyOption: ee, children: I, disabled: L, readOnly: te, id: R, onKeyDown: ne, onClick: re, onBlur: ie, ...ae } = e, { fontSizes: oe, fontWeights: se, fontFamilies: ce, lineHeight: le, space: ue, borderWidths: de, radii: fe, defaults: pe, brand: me, status: he, colors: B } = Q(), V = pe.select, ge = w !== void 0, [_e, ve] = l(T ?? ""), H = ge ? w ?? "" : _e, U = Xt(Zt(Yt(k, I), H, !!F), ee, A, N), W = U.findIndex((e) => e.value === H), ye = W >= 0 ? W : $t(U), { isOpen: G, activeIndex: K, box: be, listVars: q, triggerRef: J, wrapRef: xe, listRef: Se, typeRef: Ce, setOpen: Y, moveActive: X, placeList: we } = sn({
+		items: U,
+		open: D,
+		onOpenChange: O,
+		activeOnOpen: ye,
+		listMaxHeight: V.listMaxHeight,
+		listOffset: V.listOffset,
+		space: ue
+	}), Te = a(), Ee = (e) => {
+		J.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+	}, De = xt(n ?? V.color, me, he), Oe = he.danger.base, ke = M(r, V.size, oe), Ae = M(_ ?? g, V.paddingX, ue), je = M(v ?? g, V.paddingY, ue), Me = M(b, V.borderRadius, fe), Ne = M(y, V.borderWidth, de), Pe = z(x, "background", B, me, he) ?? `var(${$.background})`, Fe = z(S, "text", B, me, he) ?? `var(${$.textHighlighted})`, Z = z(C, "border", B, me, he) ?? `var(${$.border})`, Ie = U.find((e) => e.value === H), Le = H === "", Re = !!P && !N && !Le && !L && !te, ze = `var(${$.textMuted})`, Be = Le ? ze : Fe, Ve = Le ? Ie?.label || A || "" : Ie?.label ?? H, He = M(void 0, V.optionPaddingX, ue), Ue = M(void 0, V.optionPaddingY, ue), We = M(i, V.weight, se), Ge = ce[o ?? "base"], Ke = (e) => {
+		ge || ve(e), E?.(e);
+	}, qe = (e, t) => {
+		te ? G && (Y(!1), t && J.current?.blur()) : !N && H === e ? (Ke(""), Y(!1), t && J.current?.blur()) : (Ke(e), Y(!1), t && J.current?.blur());
+	}, Je = (e) => {
+		te || N || Le || (Ke(""), Y(!1), e && J.current?.blur());
+	}, Ye = (e) => {
+		ne?.(e), cn(e, {
+			disabled: L,
+			readOnly: te,
+			isOpen: G,
+			items: U,
+			activeIndex: K,
+			showClear: Re,
+			typeRef: Ce,
+			placeList: we,
+			setOpen: Y,
+			moveActive: X,
+			openHighlightDown: ye,
+			openHighlightUp: W >= 0 ? W : en(U),
+			closedTypeaheadFrom: W,
+			onCommit: (e) => qe(e.value, !1),
+			onClear: () => Je(!1),
+			onClosedTypeahead: (e) => qe(e.value, !1)
+		});
+	}, Xe = G && K >= 0 && U[K] ? `${Te}-${U[K].value}` : void 0;
+	return /* @__PURE__ */ m(f, { children: [
+		j === void 0 ? null : /* @__PURE__ */ p("input", {
+			type: "hidden",
+			name: j,
+			value: H,
+			required: N || void 0,
+			disabled: L || void 0
+		}),
+		/* @__PURE__ */ m(ln, {
+			ref: xe,
+			$fill: u,
+			children: [/* @__PURE__ */ p(fn, {
+				...ae,
+				ref: Ee,
+				id: R,
+				type: "button",
+				disabled: L,
+				role: "combobox",
+				"aria-haspopup": "listbox",
+				"aria-autocomplete": "none",
+				"aria-expanded": G,
+				"aria-controls": G ? Te : void 0,
+				"aria-activedescendant": Xe,
+				"aria-required": N || void 0,
+				"aria-readonly": te || void 0,
+				$family: Ge,
+				$size: ke,
+				$weight: We,
+				$lineHeight: le,
+				$paddingX: Ae,
+				$paddingY: je,
+				$borderWidth: Ne,
+				$borderRadius: Me,
+				$bg: Pe,
+				$ink: Fe,
+				$muted: ze,
+				$borderColor: Z,
+				$focus: De,
+				$invalid: Oe,
+				$italic: s,
+				$uppercase: c,
+				$fill: u,
+				$open: G,
+				$clearable: Re,
+				$customCss: d,
+				onKeyDown: Ye,
+				onBlur: (e) => {
+					if (ie?.(e), e.defaultPrevented) return;
+					let t = e.relatedTarget;
+					t instanceof Node && (xe.current?.contains(t) || Se.current?.contains(t)) || G && Y(!1);
+				},
+				onClick: (e) => {
+					re?.(e), !(e.defaultPrevented || L) && (G ? (Y(!1), J.current?.blur()) : (we(), Y(!0)));
+				},
+				children: /* @__PURE__ */ p(dn, {
+					$ink: Be,
+					children: Ve
+				})
+			}), Re ? /* @__PURE__ */ p(un, {
+				type: "button",
+				tabIndex: -1,
+				"aria-label": "Clear",
+				$end: `calc(${Ae} + 0.95em)`,
+				$ink: ze,
+				$hoverInk: Fe,
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: (e) => {
+					e.stopPropagation(), Je(!0);
+				}
+			}) : null]
+		}),
+		G && be && typeof document < "u" ? h(/* @__PURE__ */ p(pn, {
+			ref: Se,
+			id: Te,
+			role: "listbox",
+			"aria-labelledby": R || void 0,
+			style: q,
+			$top: be.top,
+			$left: be.left,
+			$width: be.width,
+			$maxHeight: be.maxHeight,
+			$zIndex: V.listZIndex,
+			$shadow: V.listShadow,
+			$radius: Me,
+			$borderWidth: Ne,
+			$borderColor: Z,
+			$bg: Pe,
+			$ink: Fe,
+			$size: ke,
+			$weight: We,
+			$family: Ge,
+			$lineHeight: le,
+			children: U.map((e, t) => /* @__PURE__ */ p(_n, {
+				id: `${Te}-${e.value}`,
+				role: "option",
+				"aria-selected": e.value === H,
+				"aria-disabled": e.disabled || void 0,
+				"data-active": t === K ? "true" : void 0,
+				$padX: He,
+				$padY: Ue,
+				$chroma: De,
+				$ink: Fe,
+				$selected: e.value === H,
+				$active: t === K,
+				$disabled: !!e.disabled,
+				onMouseEnter: () => {
+					e.disabled || X(t);
+				},
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: () => {
+					e.disabled || qe(e.value, !0);
+				},
+				children: e.label
+			}, e.value))
+		}), document.body) : null
+	] });
+}
+vn.displayName = "Select";
+//#endregion
+//#region src/components/forms/Switch.tsx
+var yn = d.input`
+  appearance: none;
+  margin: 0;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  width: ${({ $width: e }) => e};
+  height: ${({ $height: e }) => e};
+  font-size: ${({ $size: e }) => e};
+  padding: 0;
+  border: none;
+  border-radius: ${({ $radius: e }) => e};
+  background: ${({ $off: e }) => e};
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    box-shadow 120ms ease;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: ${({ $inset: e }) => e};
+    width: ${({ $thumb: e }) => e};
+    height: ${({ $thumb: e }) => e};
+    margin-top: calc(${({ $thumb: e }) => e} / -2);
+    border-radius: min(${({ $radius: e }) => e}, 50%);
+    background: ${({ $ink: e }) => e};
+    box-shadow: 0 1px 2px rgb(0 0 0 / 35%);
+    transition: left 120ms ease;
+  }
+  &:checked {
+    background: ${({ $on: e }) => e};
+  }
+  &:checked:hover:not(:disabled) {
+    background: ${({ $hoverOn: e }) => e};
+  }
+  &:checked:active:not(:disabled) {
+    background: ${({ $activeOn: e }) => e};
+  }
+  &:checked::before {
+    left: calc(100% - ${({ $inset: e, $thumb: t }) => `${e} - ${t}`});
+  }
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px color-mix(in srgb, ${({ $on: e }) => e} 18%, transparent);
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+    &::before {
+      transition: none;
+    }
+  }
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function bn(e) {
+	let { color: t, size: n, css: r, background: i, ink: a, width: o, height: s, borderRadius: c, ...l } = e, { space: u, radii: d, fontSizes: f, defaults: m, brand: h, status: g, colors: _, lineHeight: v } = Q(), y = m.switch, b = bt(t ?? y.color, h, g), x = z(i, "background", _, h, g) ?? `color-mix(in srgb, var(${$.text}) 28%, var(${$.background}))`, S = z(a, "text", _, h, g) ?? y.ink, C = M(n, y.size, f), w = s === void 0 ? `calc(${C} * ${v})` : M(s, C, u), T = o === void 0 ? `calc(${C} * ${y.widthFactor})` : M(o, C, u), E = `calc(${C} * ${y.insetFactor})`, D = `calc(${w} - 2 * ${E})`;
+	return /* @__PURE__ */ p(yn, {
+		$width: T,
+		$height: w,
+		$size: C,
+		$thumb: D,
+		$inset: E,
+		$radius: M(c, y.borderRadius, d),
+		$off: x,
+		$on: b.base,
+		$hoverOn: b.hover,
+		$activeOn: b.active,
+		$ink: S,
+		$customCss: r,
+		...l,
+		type: "checkbox",
+		role: "switch"
+	});
+}
+bn.displayName = "Switch";
+//#endregion
+//#region src/components/forms/Textarea.tsx
+var xn = d.textarea`
+  ${Nt}
+  vertical-align: top;
+  overflow: auto;
+  resize: ${({ $resize: e }) => e ? "vertical" : "none"};
+  &:disabled {
+    resize: none;
+  }
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Sn(e) {
+	let { color: t, size: n, weight: r, family: i, italic: a, uppercase: o, fill: s, resize: c, css: l, padding: u, paddingX: d, paddingY: f, borderWidth: m, borderRadius: h, background: g, ink: _, borderColor: v, rows: y, ...b } = e, { fontSizes: x, fontWeights: S, fontFamilies: C, lineHeight: w, space: T, borderWidths: E, radii: D, defaults: O, brand: k, status: A, colors: j } = Q(), N = O.textarea;
+	return /* @__PURE__ */ p(xn, {
+		rows: y ?? N.rows,
+		$family: C[i ?? "base"],
+		$size: M(n, N.size, x),
+		$weight: M(r, N.weight, S),
+		$lineHeight: w,
+		$paddingX: M(d ?? u, N.paddingX, T),
+		$paddingY: M(f ?? u, N.paddingY, T),
+		$borderWidth: M(m, N.borderWidth, E),
+		$borderRadius: M(h, N.borderRadius, D),
+		$bg: z(g, "background", j, k, A) ?? `var(${$.background})`,
+		$ink: z(_, "text", j, k, A) ?? `var(${$.text})`,
+		$borderColor: z(v, "border", j, k, A) ?? `var(${$.border})`,
+		$focus: xt(t ?? N.color, k, A),
+		$invalid: A.danger.base,
+		$resize: c ?? N.resize,
+		$italic: a,
+		$uppercase: o,
+		$fill: s,
+		$customCss: l,
+		...b
+	});
+}
+//#endregion
+//#region src/components/layout/Cell.tsx
+function Cn(e, t) {
+	if (t === void 0 || !Number.isFinite(t) || t < 1 || Math.floor(t) === 1) return;
+	let n = Math.floor(t);
+	return e === "column" ? u`
+        grid-column: span ${n};
+      ` : u`
+        grid-row: span ${n};
+      `;
+}
+var wn = d.div`
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  ${({ $edges: e }) => R(e)}
+  ${({ $size: e }) => te(e)}
+  border-width: ${({ $borderWidth: e }) => e};
+  border-style: solid;
+  border-radius: ${({ $borderRadius: e }) => e};
+  border-color: ${({ $borderColor: e }) => e};
+  ${({ $spanX: e }) => Cn("column", e)}
+  ${({ $spanY: e }) => Cn("row", e)}
+  ${({ $alignX: e, $alignY: t }) => he(e, t)}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Tn(e) {
+	let { spacing: t, size: n, rest: r } = F(e), { spanX: i, spanY: a, alignX: o, alignY: s, css: c, borderWidth: l, borderX: u, borderY: d, borderTop: f, borderRight: m, borderBottom: h, borderLeft: g, borderRadius: _, borderColor: v, ...y } = r, { colors: b, space: x, borderWidths: S, radii: C, defaults: w, brand: T, status: E } = Q();
+	return /* @__PURE__ */ p(wn, {
+		$spanX: i,
+		$spanY: a,
+		$alignX: o,
+		$alignY: s,
+		$edges: P(t, w.cell, x),
+		$size: ee(n, x),
+		$borderWidth: oe({
+			borderWidth: l,
+			borderX: u,
+			borderY: d,
+			borderTop: f,
+			borderRight: m,
+			borderBottom: h,
+			borderLeft: g
+		}, w.cell.borderWidth, S),
+		$borderRadius: M(_, w.cell.borderRadius, C),
+		$borderColor: ce(v, "base", b, T, E),
+		$customCss: c,
+		...y
+	});
+}
+//#endregion
+//#region src/components/layout/Col.tsx
+var En = d.div`
+  position: relative;
+  ${({ $edges: e }) => R(e)}
+  ${({ $size: e, $fill: t }) => L(e, t)}
+  border-width: ${({ $borderWidth: e }) => e};
+  border-style: solid;
+  border-radius: ${({ $borderRadius: e }) => e};
+  border-color: ${({ $borderColor: e }) => e};
+  ${({ $flex: e }) => _e(e, !0)}
+  ${({ $trackKind: e, $alignX: t, $alignY: n }) => G(e, t, n)}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Dn(e) {
+	let { spacing: t, size: n, rest: r } = F(e), { flex: i, fill: a, alignX: o, alignY: s, css: c, borderWidth: l, borderX: u, borderY: d, borderTop: f, borderRight: m, borderBottom: h, borderLeft: g, borderRadius: _, borderColor: v, ...y } = r, { colors: b, space: x, borderWidths: S, radii: C, defaults: w, brand: T, status: E } = Q(), D = ye();
+	return /* @__PURE__ */ p(En, {
+		$flex: i,
+		$fill: a,
+		$edges: P(t, w.col, x),
+		$size: I(n, x, { width: w.col.width }),
+		$borderWidth: oe({
+			borderWidth: l,
+			borderX: u,
+			borderY: d,
+			borderTop: f,
+			borderRight: m,
+			borderBottom: h,
+			borderLeft: g
+		}, w.col.borderWidth, S),
+		$borderRadius: M(_, w.col.borderRadius, C),
+		$borderColor: ce(v, "base", b, T, E),
+		$alignX: o,
+		$alignY: s,
+		$trackKind: D,
+		$customCss: c,
+		...y
+	});
+}
+//#endregion
+//#region src/components/layout/Cols.tsx
+var On = d.div`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  flex-wrap: ${({ $wrap: e }) => e ? "wrap" : "nowrap"};
+  gap: ${({ $gap: e }) => e};
+  ${({ $alignX: e, $alignY: t }) => V(!1, e, t)}
+  ${({ $edges: e }) => R(e)}
+  ${({ $size: e, $fill: t }) => L(e, t)}
+  border-width: ${({ $borderWidth: e }) => e};
+  border-style: solid;
+  border-radius: ${({ $borderRadius: e }) => e};
+  border-color: ${({ $borderColor: e }) => e};
+  ${({ $flex: e }) => _e(e)}
+  ${({ $stackMax: e, $stackedJustify: t }) => e ? pe(e, t) : ""}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function kn(e) {
+	let { spacing: t, size: n, rest: r } = F(e), { flex: i, fill: a, gap: o, alignX: s, alignY: c, wrap: l, stack: u, css: d, borderWidth: f, borderX: m, borderY: h, borderTop: g, borderRight: _, borderBottom: v, borderLeft: y, borderRadius: b, borderColor: x, ...S } = r, { space: C, breakpoints: w, defaults: T, colors: E, borderWidths: D, radii: O, brand: k, status: A } = Q();
+	return /* @__PURE__ */ p(W, {
+		kind: "row",
+		children: /* @__PURE__ */ p(On, {
+			$flex: i,
+			$fill: a,
+			$gap: M(o, T.cols.gap, C),
+			$alignX: ge(s, T.cols.alignX),
+			$alignY: ge(c, T.cols.alignY),
+			$wrap: l,
+			$stackMax: de(u, w),
+			$stackedJustify: ve(c),
+			$edges: P(t, T.cols, C),
+			$size: I(n, C),
+			$borderWidth: oe({
+				borderWidth: f,
+				borderX: m,
+				borderY: h,
+				borderTop: g,
+				borderRight: _,
+				borderBottom: v,
+				borderLeft: y
+			}, "none", D),
+			$borderRadius: M(b, "none", O),
+			$borderColor: ce(x, "base", E, k, A),
+			$customCss: d,
+			...S
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/Div.tsx
+var An = d.div`
+  position: relative;
+  ${({ $edges: e }) => R(e)}
+  ${({ $size: e, $fill: t }) => L(e, t)}
+  border-width: ${({ $borderWidth: e }) => e};
+  border-style: solid;
+  border-radius: ${({ $borderRadius: e }) => e};
+  border-color: ${({ $borderColor: e }) => e};
+  ${({ $flex: e }) => _e(e, !0)}
+  ${({ $trackKind: e, $alignX: t, $alignY: n }) => G(e, t, n)}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function jn(e) {
+	let { spacing: t, size: n, rest: r } = F(e), { flex: i, fill: a, alignX: o, alignY: s, css: c, borderWidth: l, borderX: u, borderY: d, borderTop: f, borderRight: m, borderBottom: h, borderLeft: g, borderRadius: _, borderColor: v, ...y } = r, { colors: b, space: x, borderWidths: S, radii: C, defaults: w, brand: T, status: E } = Q(), D = ye();
+	return /* @__PURE__ */ p(An, {
+		$flex: i,
+		$fill: a,
+		$edges: P(t, w.div, x),
+		$size: I(n, x),
+		$borderWidth: oe({
+			borderWidth: l,
+			borderX: u,
+			borderY: d,
+			borderTop: f,
+			borderRight: m,
+			borderBottom: h,
+			borderLeft: g
+		}, w.div.borderWidth, S),
+		$borderRadius: M(_, w.div.borderRadius, C),
+		$borderColor: v === void 0 ? `var(${$.border})` : ce(v, "base", b, T, E),
+		$alignX: o,
+		$alignY: s,
+		$trackKind: D,
+		$customCss: c,
+		...y
+	});
+}
+//#endregion
+//#region src/components/layout/Grid.tsx
+function Mn(e) {
+	if (!(e === void 0 || !Number.isFinite(e) || e < 1)) return `repeat(${Math.floor(e)}, minmax(0, 1fr))`;
+}
+var Nn = d.div`
+  display: grid;
+  position: relative;
+  gap: ${({ $gap: e }) => e};
+  ${({ $columns: e }) => e ? u`
+          grid-template-columns: ${e};
+        ` : ""}
+  ${({ $rows: e }) => e ? u`
+          grid-template-rows: ${e};
+        ` : ""}
+  ${({ $alignX: e, $alignY: t }) => me(e, t)}
+  ${({ $edges: e }) => R(e)}
+  ${({ $size: e, $fill: t }) => L(e, t)}
+  border-width: ${({ $borderWidth: e }) => e};
+  border-style: solid;
+  border-radius: ${({ $borderRadius: e }) => e};
+  border-color: ${({ $borderColor: e }) => e};
+  ${({ $flex: e }) => _e(e)}
+  ${({ $stackMax: e, $stackCols: t }) => e ? fe(e, t) : ""}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Pn(e) {
+	let { spacing: t, size: n, rest: r } = F(e), { flex: i, fill: a, gap: o, alignX: s, alignY: c, numCols: l, numRows: u, stack: d, stackCols: f, css: m, borderWidth: h, borderX: g, borderY: _, borderTop: v, borderRight: y, borderBottom: b, borderLeft: x, borderRadius: S, borderColor: C, ...w } = r, { space: T, breakpoints: E, defaults: D, colors: O, borderWidths: k, radii: A, brand: j, status: N } = Q();
+	return /* @__PURE__ */ p(W, {
+		kind: "grid",
+		children: /* @__PURE__ */ p(Nn, {
+			$flex: i,
+			$fill: a,
+			$gap: M(o, D.grid.gap, T),
+			$columns: Mn(l),
+			$rows: Mn(u),
+			$alignX: ge(s, D.grid.alignX),
+			$alignY: ge(c, D.grid.alignY),
+			$stackMax: de(d, E),
+			$stackCols: f !== void 0 && Number.isFinite(f) && f >= 1 ? Math.floor(f) : 1,
+			$edges: P(t, D.grid, T),
+			$size: I(n, T),
+			$borderWidth: oe({
+				borderWidth: h,
+				borderX: g,
+				borderY: _,
+				borderTop: v,
+				borderRight: y,
+				borderBottom: b,
+				borderLeft: x
+			}, "none", k),
+			$borderRadius: M(S, "none", A),
+			$borderColor: ce(C, "base", O, j, N),
+			$customCss: m,
+			...w
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/Panels.tsx
+function Fn(e, t, n) {
+	if (!t || n) return L(e, t);
+	let r = e.width === void 0, i = e.height === void 0;
+	return u`
+    ${i ? u`
+            top: 0;
+            bottom: 0;
+          ` : ""}
+    ${r ? u`
+            left: 0;
+            right: 0;
+          ` : ""}
+    ${L(e, !1)}
+  `;
+}
+var In = d.div`
+  display: flex;
+  flex-direction: ${({ $horizontal: e }) => e ? "row" : "column"};
+  position: ${({ $relative: e }) => e ? "relative" : "absolute"};
+  gap: ${({ $gap: e }) => e};
+  ${({ $edges: e }) => R(e)}
+  ${({ $size: e, $fill: t, $relative: n }) => Fn(e, t, n)}
+  border-width: ${({ $borderWidth: e }) => e};
+  border-style: solid;
+  border-radius: ${({ $borderRadius: e }) => e};
+  border-color: ${({ $borderColor: e }) => e};
+  ${({ $flex: e }) => _e(e)}
+  ${({ $horizontal: e, $alignX: t, $alignY: n }) => V(!e, t, n)}
+  ${({ $stackMax: e, $stackedJustify: t }) => e ? pe(e, t) : ""}
+  ${({ $scroll: e }) => H(e)}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Ln(e) {
+	let { spacing: t, size: n, rest: r } = F(e), { horizontal: i, flex: a, fill: o, relative: s, stack: c, scroll: l, alignX: u, alignY: d, gap: f, css: m, borderWidth: h, borderX: g, borderY: _, borderTop: v, borderRight: y, borderBottom: b, borderLeft: x, borderRadius: S, borderColor: C, ...w } = r, { space: T, breakpoints: E, defaults: D, colors: O, borderWidths: k, radii: A, brand: j, status: N } = Q(), ee = B(!i);
+	return /* @__PURE__ */ p(W, {
+		kind: i ? "row" : "column",
+		children: /* @__PURE__ */ p(In, {
+			$horizontal: i,
+			$flex: a,
+			$fill: o,
+			$relative: s,
+			$gap: M(f, D.panels.gap, T),
+			$stackMax: i ? de(c, E) : void 0,
+			$stackedJustify: ve(d),
+			$scroll: l,
+			$alignX: ge(u, ee.alignX),
+			$alignY: ge(d, ee.alignY),
+			$edges: P(t, D.panels, T),
+			$size: I(n, T),
+			$borderWidth: oe({
+				borderWidth: h,
+				borderX: g,
+				borderY: _,
+				borderTop: v,
+				borderRight: y,
+				borderBottom: b,
+				borderLeft: x
+			}, "none", k),
+			$borderRadius: M(S, "none", A),
+			$borderColor: ce(C, "base", O, j, N),
+			$customCss: m,
+			...w
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/Row.tsx
+var Rn = d.div`
+  position: relative;
+  ${({ $edges: e }) => R(e)}
+  ${({ $size: e, $fill: t }) => L(e, t)}
+  border-width: ${({ $borderWidth: e }) => e};
+  border-style: solid;
+  border-radius: ${({ $borderRadius: e }) => e};
+  border-color: ${({ $borderColor: e }) => e};
+  ${({ $flex: e }) => _e(e, !0)}
+  ${({ $trackKind: e, $alignX: t, $alignY: n }) => G(e, t, n)}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function zn(e) {
+	let { spacing: t, size: n, rest: r } = F(e), { flex: i, fill: a, alignX: o, alignY: s, css: c, borderWidth: l, borderX: u, borderY: d, borderTop: f, borderRight: m, borderBottom: h, borderLeft: g, borderRadius: _, borderColor: v, ...y } = r, { colors: b, space: x, borderWidths: S, radii: C, defaults: w, brand: T, status: E } = Q(), D = ye();
+	return /* @__PURE__ */ p(Rn, {
+		$flex: i,
+		$fill: a,
+		$edges: P(t, w.row, x),
+		$size: I(n, x, { height: w.row.height }),
+		$borderWidth: oe({
+			borderWidth: l,
+			borderX: u,
+			borderY: d,
+			borderTop: f,
+			borderRight: m,
+			borderBottom: h,
+			borderLeft: g
+		}, w.row.borderWidth, S),
+		$borderRadius: M(_, w.row.borderRadius, C),
+		$borderColor: ce(v, "base", b, T, E),
+		$alignX: o,
+		$alignY: s,
+		$trackKind: D,
+		$customCss: c,
+		...y
+	});
+}
+//#endregion
+//#region src/components/layout/Rows.tsx
+var Bn = d.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  flex-wrap: ${({ $wrap: e }) => e ? "wrap" : "nowrap"};
+  gap: ${({ $gap: e }) => e};
+  ${({ $alignX: e, $alignY: t }) => V(!0, e, t)}
+  ${({ $edges: e }) => R(e)}
+  ${({ $size: e, $fill: t }) => L(e, t)}
+  border-width: ${({ $borderWidth: e }) => e};
+  border-style: solid;
+  border-radius: ${({ $borderRadius: e }) => e};
+  border-color: ${({ $borderColor: e }) => e};
+  ${({ $flex: e }) => _e(e)}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Vn(e) {
+	let { spacing: t, size: n, rest: r } = F(e), { flex: i, fill: a, gap: o, alignX: s, alignY: c, wrap: l, css: u, borderWidth: d, borderX: f, borderY: m, borderTop: h, borderRight: g, borderBottom: _, borderLeft: v, borderRadius: y, borderColor: b, ...x } = r, { space: S, defaults: C, colors: w, borderWidths: T, radii: E, brand: D, status: O } = Q();
+	return /* @__PURE__ */ p(W, {
+		kind: "column",
+		children: /* @__PURE__ */ p(Bn, {
+			$flex: i,
+			$fill: a,
+			$gap: M(o, C.rows.gap, S),
+			$alignX: ge(s, C.rows.alignX),
+			$alignY: ge(c, C.rows.alignY),
+			$wrap: l,
+			$edges: P(t, C.rows, S),
+			$size: I(n, S),
+			$borderWidth: oe({
+				borderWidth: d,
+				borderX: f,
+				borderY: m,
+				borderTop: h,
+				borderRight: g,
+				borderBottom: _,
+				borderLeft: v
+			}, "none", T),
+			$borderRadius: M(y, "none", E),
+			$borderColor: ce(b, "base", w, D, O),
+			$customCss: u,
+			...x
+		})
+	});
+}
+//#endregion
+//#region src/components/text/Heading.tsx
+var Hn = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h5",
+	6: "h6"
+}, Un = d.h1`
+  ${Rt}
+  line-height: 1;
+  text-box: trim-both cap alphabetic;
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Wn(e) {
+	let { level: t, size: n, color: r, muted: i, highlighted: a, weight: o, family: s, italic: c, underlined: l, uppercase: u, css: d, ...f } = e, { fontSizes: m, fontWeights: h, fontFamilies: g, defaults: _, brand: v, status: y } = Q(), b = g[s ?? _.heading.family], x = _.heading.size[t], S = n === void 0 ? x : M(n, x, m), C = M(o, _.heading.weight, h);
+	return /* @__PURE__ */ p(It.Provider, {
+		value: {
+			family: b,
+			size: S,
+			weight: C,
+			lineHeight: 1
+		},
+		children: /* @__PURE__ */ p(Un, {
+			as: Hn[t],
+			$family: b,
+			$size: S,
+			$color: St(r, a, i, v, y),
+			$weight: C,
+			$lineHeight: 1,
+			$italic: c,
+			$underlined: l,
+			$uppercase: u,
+			$customCss: d,
+			...f
+		})
+	});
+}
+//#endregion
+//#region src/components/text/Span.tsx
+var Gn = d.span`
+  ${Rt}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Kn(e) {
+	let { size: t, color: n, muted: r, highlighted: i, weight: a, family: o, italic: s, underlined: c, uppercase: l, css: u, ...d } = e, { fontSizes: f, fontWeights: m, fontFamilies: h, lineHeight: g, defaults: _, brand: v, status: y } = Q(), b = Lt(), x = o === void 0 ? b?.family ?? h.base : h[o], S = t === void 0 ? b?.size ?? M(void 0, _.text.size, f) : M(t, _.text.size, f), C = a === void 0 ? b?.weight ?? M(void 0, _.text.weight, m) : M(a, _.text.weight, m), w = b?.lineHeight ?? g, T = n !== void 0 || i || r ? St(n, i, r, v, y) : "inherit";
+	return /* @__PURE__ */ p(It.Provider, {
+		value: {
+			family: x,
+			size: S,
+			weight: C,
+			lineHeight: w
+		},
+		children: /* @__PURE__ */ p(Gn, {
+			$family: x,
+			$size: S,
+			$color: T,
+			$weight: C,
+			$lineHeight: w,
+			$italic: s,
+			$underlined: c,
+			$uppercase: l,
+			$customCss: u,
+			...d
+		})
+	});
+}
+//#endregion
+//#region src/components/text/Text.tsx
+var qn = d.p`
+  ${Rt}
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Jn(e) {
+	let { size: t, color: n, muted: r, highlighted: i, weight: a, family: o, italic: s, underlined: c, uppercase: l, css: u, ...d } = e, { fontSizes: f, fontWeights: m, fontFamilies: h, lineHeight: g, defaults: _, brand: v, status: y } = Q(), b = h[o ?? "base"], x = M(t, _.text.size, f), S = M(a, _.text.weight, m);
+	return /* @__PURE__ */ p(It.Provider, {
+		value: {
+			family: b,
+			size: x,
+			weight: S,
+			lineHeight: g
+		},
+		children: /* @__PURE__ */ p(qn, {
+			$family: b,
+			$size: x,
+			$color: St(n, i, r, v, y),
+			$weight: S,
+			$lineHeight: g,
+			$italic: s,
+			$underlined: c,
+			$uppercase: l,
+			$customCss: u,
+			...d
+		})
+	});
+}
+//#endregion
+//#region src/components/text/TextLink.tsx
+var Yn = u`
+  text-decoration: underline;
+`, Xn = d.a`
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  text-decoration: none;
+  ${Rt}
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+  &:hover {
+    color: ${({ $hover: e }) => e};
+    ${({ $hoverUnderline: e, $underlined: t }) => e || t ? Yn : ""}
+  }
+  &:active {
+    color: ${({ $active: e }) => e};
+    ${({ $hoverUnderline: e, $underlined: t }) => e || t ? Yn : ""}
+  }
+  ${({ $customCss: e }) => e ?? ""}
+`;
+function Zn(e) {
+	let { size: t, color: n, muted: r, highlighted: i, weight: a, family: o, italic: s, underlined: c, uppercase: l, css: u, ...d } = e, { fontSizes: f, fontWeights: m, fontFamilies: h, lineHeight: g, defaults: _, brand: v, status: y } = Q(), b = Lt(), x = n ?? (r || i ? void 0 : _.textLink.color), { hover: S, active: C } = Ct(x, _.textLink.hover === "inherit" ? "inherit" : yt(n) ? n : _.textLink.hover, v, y), w = o === void 0 ? b?.family ?? h.base : h[o], T = t === void 0 ? b?.size ?? M(void 0, _.text.size, f) : M(t, _.text.size, f), E = a === void 0 ? b?.weight ?? M(void 0, _.text.weight, m) : M(a, _.text.weight, m);
+	return /* @__PURE__ */ p(Xn, {
+		$family: w,
+		$size: T,
+		$color: St(x, i, r, v, y),
+		$hover: S,
+		$active: C,
+		$weight: E,
+		$lineHeight: b?.lineHeight ?? g,
+		$italic: s,
+		$underlined: c,
+		$hoverUnderline: _.textLink.hoverUnderline,
+		$uppercase: l,
+		$customCss: u,
+		...d
+	});
+}
+//#endregion
+export { Dt as Button, Tn as Cell, Mt as Checkbox, kt as Chip, Dn as Col, kn as Cols, jn as Div, Pn as Grid, Wn as Heading, Ft as Input, Vt as Label, gn as MultiSelect, Ut as NumberInput, Kt as Option, gt as Panel, mt as PanelizeProvider, Ln as Panels, Gt as Radio, zn as Row, Vn as Rows, vn as Select, Kn as Span, bn as Switch, Jn as Text, Zn as TextLink, Sn as Textarea, C as alignValues, dt as appCssVars, x as brandStateTokens, y as brandTokens, T as breakpointTokens, v as colorSchemeTokens, lt as createPanelizeTheme, ne as defaultBorderWidths, le as defaultBreakpoints, Ee as defaultFontFamilies, we as defaultFontSizes, Te as defaultFontWeights, De as defaultLineHeight, re as defaultRadii, A as defaultSpace, Z as defaultTheme, O as fontFamilyTokens, E as fontSizeTokens, D as fontWeightTokens, be as grayRampTokens, K as grayTokens, k as headingLevels, J as palette, $ as panelCssVars, _ as panelTextRoles, g as panelVariants, w as scrollValues, S as spaceTokens, b as statusTokens, Q as usePanelizeTheme };
+
+//# sourceMappingURL=panelize.es.js.map