@weasel-js/ui 1.1.0 → 1.3.0-pre.0

package/dist/chunks/{Badge-DZQqAV4d.js → Badge-9dPfvYOk.js}

@@ -1,11 +1,12 @@
-import { useEffect as e, useId as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-var c = {
-	badge: "_badge_16w4d_1",
-	deco: "_deco_16w4d_33",
-	content: "_content_16w4d_49",
-	remove: "_remove_16w4d_161"
-}, l = {
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useVisibleRaf as r } from "@weasel-js/core";
+import { useEffect as i, useId as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
+var l = {
+	badge: "_badge_16et2_1",
+	deco: "_deco_16et2_33",
+	content: "_content_16et2_49",
+	remove: "_remove_16et2_161"
+}, u = {
 	Component: () => null,
 	insets: {
 		top: 0,
@@ -15,7 +16,7 @@ var c = {
 	},
 	stretches: !0,
 	renderMode: "css"
-}, u = {
+}, d = {
 	Component: () => null,
 	insets: {
 		top: 0,
@@ -25,11 +26,11 @@ var c = {
 	},
 	stretches: !0,
 	renderMode: "css"
-}, d = { erosion: .16 }, f = {
+}, f = { erosion: .16 }, p = {
 	compose: (e) => ({
 		base: "rounded-rect",
 		baseParams: { erosion: {
-			...d,
+			...f,
 			...e
 		}.erosion }
 	}),
@@ -40,12 +41,12 @@ var c = {
 		left: 0
 	},
 	stretches: !0,
-	defaults: d
-}, p = {
+	defaults: f
+}, m = {
 	erosion: .28,
 	eccentricity: 1
 };
-function m(e, t) {
+function h(e, t) {
 	let n = e * t, r = e / t;
 	return [
 		`M ${n} 0`,
@@ -60,24 +61,24 @@ function m(e, t) {
 		"Z"
 	].join(" ");
 }
-var h = {
-	Component: ({ variant: e, focused: t, params: n }) => {
-		let r = {
-			...p,
-			...n
-		}, i = m(Math.max(0, Math.min(r.erosion, 1)) * 49, Math.max(.2, Math.min(r.eccentricity, 5)));
-		return /* @__PURE__ */ s(a, { children: [
-			(e === "solid" || e === "subtle") && /* @__PURE__ */ o("path", {
+var g = {
+	Component: ({ variant: r, focused: i, params: a }) => {
+		let o = {
+			...m,
+			...a
+		}, s = h(Math.max(0, Math.min(o.erosion, 1)) * 49, Math.max(.2, Math.min(o.eccentricity, 5)));
+		return /* @__PURE__ */ n(e, { children: [
+			(r === "solid" || r === "subtle") && /* @__PURE__ */ t("path", {
 				className: "badge-fill",
-				d: i
+				d: s
 			}),
-			(e === "outline" || e === "solid") && /* @__PURE__ */ o("path", {
+			(r === "outline" || r === "solid") && /* @__PURE__ */ t("path", {
 				className: "badge-stroke",
-				d: i
+				d: s
 			}),
-			t && /* @__PURE__ */ o("path", {
+			i && /* @__PURE__ */ t("path", {
 				className: "badge-focus",
-				d: i,
+				d: s,
 				transform: "translate(50 50) scale(1.06) translate(-50 -50)"
 			})
 		] });
@@ -89,20 +90,20 @@ var h = {
 		left: 4
 	},
 	stretches: !0,
-	defaults: p
-}, g = {
+	defaults: m
+}, _ = {
 	holeRadius: 3.5,
 	holePitch: 11
 };
-function _({ variant: e, focused: a, params: c }) {
+function v({ variant: e, focused: r, params: i }) {
 	let l = {
-		...g,
-		...c
-	}, u = t(), d = r(null), [f, p] = i({
+		..._,
+		...i
+	}, u = a(), d = s(null), [f, p] = c({
 		w: 100,
 		h: 100
 	});
-	n(() => {
+	o(() => {
 		let e = d.current?.ownerSVGElement;
 		if (!e) return;
 		let t = () => {
@@ -116,9 +117,9 @@ function _({ variant: e, focused: a, params: c }) {
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
 	}, []);
-	let m = l.holeRadius / f.w * 100, h = l.holeRadius / f.h * 100, _ = Math.max(2, Math.round(f.w / l.holePitch)), v = Math.max(2, Math.round(f.h / l.holePitch)), y = [];
-	for (let e = 0; e < _; e++) {
-		let t = (e + .5) / _;
+	let m = l.holeRadius / f.w * 100, h = l.holeRadius / f.h * 100, g = Math.max(2, Math.round(f.w / l.holePitch)), v = Math.max(2, Math.round(f.h / l.holePitch)), y = [];
+	for (let e = 0; e < g; e++) {
+		let t = (e + .5) / g;
 		y.push({
 			cx: t * 100,
 			cy: 0
@@ -137,31 +138,31 @@ function _({ variant: e, focused: a, params: c }) {
 			cy: t * 100
 		});
 	}
-	return /* @__PURE__ */ s("g", {
+	return /* @__PURE__ */ n("g", {
 		ref: d,
 		children: [
-			/* @__PURE__ */ o("defs", { children: /* @__PURE__ */ s("mask", {
+			/* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("mask", {
 				id: u,
 				maskUnits: "userSpaceOnUse",
 				x: "-5",
 				y: "-5",
 				width: "110",
 				height: "110",
-				children: [/* @__PURE__ */ o("rect", {
+				children: [/* @__PURE__ */ t("rect", {
 					x: "0",
 					y: "0",
 					width: "100",
 					height: "100",
 					fill: "white"
-				}), y.map((e, t) => /* @__PURE__ */ o("ellipse", {
+				}), y.map((e, n) => /* @__PURE__ */ t("ellipse", {
 					cx: e.cx,
 					cy: e.cy,
 					rx: m,
 					ry: h,
 					fill: "black"
-				}, t))]
+				}, n))]
 			}) }),
-			(e === "solid" || e === "subtle") && /* @__PURE__ */ o("rect", {
+			(e === "solid" || e === "subtle") && /* @__PURE__ */ t("rect", {
 				className: "badge-fill",
 				x: "0",
 				y: "0",
@@ -169,7 +170,7 @@ function _({ variant: e, focused: a, params: c }) {
 				height: "100",
 				mask: `url(#${u})`
 			}),
-			(e === "outline" || e === "solid") && /* @__PURE__ */ o("rect", {
+			(e === "outline" || e === "solid") && /* @__PURE__ */ t("rect", {
 				className: "badge-stroke",
 				x: "0",
 				y: "0",
@@ -177,7 +178,7 @@ function _({ variant: e, focused: a, params: c }) {
 				height: "100",
 				mask: `url(#${u})`
 			}),
-			a && /* @__PURE__ */ o("rect", {
+			r && /* @__PURE__ */ t("rect", {
 				className: "badge-focus",
 				x: "-4",
 				y: "-4",
@@ -188,8 +189,8 @@ function _({ variant: e, focused: a, params: c }) {
 		]
 	});
 }
-var v = {
-	Component: _,
+var y = {
+	Component: v,
 	insets: {
 		top: 2,
 		right: 4,
@@ -197,12 +198,12 @@ var v = {
 		left: 4
 	},
 	stretches: !0,
-	defaults: g
-}, y = {
+	defaults: _
+}, b = {
 	tipHeight: 25,
 	tipTruncation: 0
 };
-function b(e, t) {
+function x(e, t) {
 	let n = Math.max(0, Math.min(e, 49)), r = Math.max(0, Math.min(t, n));
 	if (r <= 0) return [
 		[50, 0],
@@ -224,15 +225,15 @@ function b(e, t) {
 		[0, n]
 	];
 }
-var x = {
+var S = {
 	compose: (e) => {
 		let t = {
-			...y,
+			...b,
 			...e
 		};
 		return {
 			base: "polygon",
-			baseParams: { vertices: b(t.tipHeight, t.tipTruncation) }
+			baseParams: { vertices: x(t.tipHeight, t.tipTruncation) }
 		};
 	},
 	insets: {
@@ -242,15 +243,15 @@ var x = {
 		left: 6
 	},
 	stretches: !0,
-	defaults: y
-}, S = {
+	defaults: b
+}, C = {
 	points: 12,
 	outerR: 48,
 	innerR: 36,
 	rotation: -7,
 	erosion: 0
 };
-function C(e, t, n, r, i) {
+function w(e, t, n, r, i) {
 	let a = e * 2, o = Math.PI * 2 / a, s = r * Math.PI / 180, c = Math.max(0, Math.min(i, 1)), l = [];
 	for (let e = 0; e < a; e++) {
 		let r = e % 2 == 0 ? t : n, i = s + e * o;
@@ -268,22 +269,22 @@ function C(e, t, n, r, i) {
 	}
 	return u + " Z";
 }
-var w = {
-	Component: ({ variant: e, focused: t, params: n }) => {
-		let r = {
-			...S,
-			...n
-		}, i = C(r.points, r.outerR, r.innerR, r.rotation, r.erosion), c = C(r.points, r.outerR + 4, r.innerR + 3, r.rotation, r.erosion);
-		return /* @__PURE__ */ s(a, { children: [
-			(e === "solid" || e === "subtle") && /* @__PURE__ */ o("path", {
+var T = {
+	Component: ({ variant: r, focused: i, params: a }) => {
+		let o = {
+			...C,
+			...a
+		}, s = w(o.points, o.outerR, o.innerR, o.rotation, o.erosion), c = w(o.points, o.outerR + 4, o.innerR + 3, o.rotation, o.erosion);
+		return /* @__PURE__ */ n(e, { children: [
+			(r === "solid" || r === "subtle") && /* @__PURE__ */ t("path", {
 				className: "badge-fill",
-				d: i
+				d: s
 			}),
-			(e === "outline" || e === "solid") && /* @__PURE__ */ o("path", {
+			(r === "outline" || r === "solid") && /* @__PURE__ */ t("path", {
 				className: "badge-stroke",
-				d: i
+				d: s
 			}),
-			t && /* @__PURE__ */ o("path", {
+			i && /* @__PURE__ */ t("path", {
 				className: "badge-focus",
 				d: c
 			})
@@ -296,15 +297,15 @@ var w = {
 		left: 8
 	},
 	stretches: !0,
-	defaults: S
-}, T = {
+	defaults: C
+}, E = {
 	scallopRadius: 5,
 	scallopSpacing: 12,
 	irregularity: 0
-}, E = {
+}, D = {
 	compose: (e) => {
 		let t = {
-			...T,
+			...E,
 			...e
 		};
 		return {
@@ -327,22 +328,22 @@ var w = {
 		left: 6
 	},
 	stretches: !0,
-	defaults: T
-}, D = {
+	defaults: E
+}, O = {
 	pointDepth: 100,
 	shoulderY: 55,
 	curveTightness: .7,
 	erosion: .33
 };
-function O({ variant: e, focused: t, params: a }) {
-	let c = {
-		...D,
-		...a
-	}, l = r(null), [u, d] = i({
+function k({ variant: e, focused: r, params: i }) {
+	let a = {
+		...O,
+		...i
+	}, l = s(null), [u, d] = c({
 		w: 100,
 		h: 100
 	});
-	n(() => {
+	o(() => {
 		let e = l.current?.ownerSVGElement;
 		if (!e) return;
 		let t = () => {
@@ -356,7 +357,7 @@ function O({ variant: e, focused: t, params: a }) {
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
 	}, []);
-	let f = Math.max(60, Math.min(c.pointDepth, 110)), p = Math.max(20, Math.min(c.shoulderY, f - 5)), m = p + (f - p) * Math.max(.1, Math.min(c.curveTightness, 1)), h = Math.max(0, Math.min(c.erosion, 1)) * 12, g = h / u.w * 100, _ = h / u.h * 100, v = [
+	let f = Math.max(60, Math.min(a.pointDepth, 110)), p = Math.max(20, Math.min(a.shoulderY, f - 5)), m = p + (f - p) * Math.max(.1, Math.min(a.curveTightness, 1)), h = Math.max(0, Math.min(a.erosion, 1)) * 12, g = h / u.w * 100, _ = h / u.h * 100, v = [
 		`M ${g.toFixed(3)} 0`,
 		`L ${(100 - g).toFixed(3)} 0`,
 		`A ${g.toFixed(3)} ${_.toFixed(3)} 0 0 1 100 ${_.toFixed(3)}`,
@@ -367,18 +368,18 @@ function O({ variant: e, focused: t, params: a }) {
 		`A ${g.toFixed(3)} ${_.toFixed(3)} 0 0 1 ${g.toFixed(3)} 0`,
 		"Z"
 	].join(" ");
-	return /* @__PURE__ */ s("g", {
+	return /* @__PURE__ */ n("g", {
 		ref: l,
 		children: [
-			(e === "solid" || e === "subtle") && /* @__PURE__ */ o("path", {
+			(e === "solid" || e === "subtle") && /* @__PURE__ */ t("path", {
 				className: "badge-fill",
 				d: v
 			}),
-			(e === "outline" || e === "solid") && /* @__PURE__ */ o("path", {
+			(e === "outline" || e === "solid") && /* @__PURE__ */ t("path", {
 				className: "badge-stroke",
 				d: v
 			}),
-			t && /* @__PURE__ */ o("path", {
+			r && /* @__PURE__ */ t("path", {
 				className: "badge-focus",
 				d: v,
 				transform: "translate(50 50) scale(1.06) translate(-50 -50)"
@@ -386,8 +387,8 @@ function O({ variant: e, focused: t, params: a }) {
 		]
 	});
 }
-var k = {
-	Component: O,
+var A = {
+	Component: k,
 	insets: {
 		top: 2,
 		right: 8,
@@ -395,16 +396,16 @@ var k = {
 		left: 8
 	},
 	stretches: !0,
-	defaults: D
-}, A = {
+	defaults: O
+}, j = {
 	left: "inward",
 	right: "outward",
 	taperWidth: 8
-}, j = {
+}, M = {
 	compose: (e) => ({
 		base: "ribbon",
 		baseParams: {
-			...A,
+			...j,
 			...e
 		}
 	}),
@@ -415,17 +416,17 @@ var k = {
 		left: 0
 	},
 	stretches: !0,
-	defaults: A
-}, M = {
+	defaults: j
+}, N = {
 	points: 44,
 	cornerRadius: 6,
 	spikeLen: 12,
 	spikeBaseWidth: 3,
 	irregularity: 0
-}, N = {
+}, P = {
 	compose: (e) => {
 		let t = {
-			...M,
+			...N,
 			...e
 		};
 		return {
@@ -452,14 +453,14 @@ var k = {
 		left: 8
 	},
 	stretches: !0,
-	defaults: M
-}, P = {
+	defaults: N
+}, F = {
 	points: 16,
 	outerR: 58,
 	innerR: 50,
 	rotation: -5
 };
-function F(e, t, n, r) {
+function I(e, t, n, r) {
 	let i = e * 2, a = Math.PI * 2 / i, o = r * Math.PI / 180, s = "";
 	for (let e = 0; e < i; e++) {
 		let r = e % 2 == 0 ? t : n, i = o + e * a, c = 50 + Math.cos(i) * r, l = 50 + Math.sin(i) * r;
@@ -468,21 +469,21 @@ function F(e, t, n, r) {
 	return s + " Z";
 }
 var ee = {
-	Component: ({ variant: e, focused: t, params: n }) => {
-		let { points: r, outerR: i, innerR: c, rotation: l } = {
-			...P,
-			...n
-		}, u = F(r, i, c, l), d = F(r, i + 4, c + 3, l);
-		return /* @__PURE__ */ s(a, { children: [
-			(e === "solid" || e === "subtle") && /* @__PURE__ */ o("path", {
+	Component: ({ variant: r, focused: i, params: a }) => {
+		let { points: o, outerR: s, innerR: c, rotation: l } = {
+			...F,
+			...a
+		}, u = I(o, s, c, l), d = I(o, s + 4, c + 3, l);
+		return /* @__PURE__ */ n(e, { children: [
+			(r === "solid" || r === "subtle") && /* @__PURE__ */ t("path", {
 				className: "badge-fill",
 				d: u
 			}),
-			(e === "outline" || e === "solid") && /* @__PURE__ */ o("path", {
+			(r === "outline" || r === "solid") && /* @__PURE__ */ t("path", {
 				className: "badge-stroke",
 				d: u
 			}),
-			t && /* @__PURE__ */ o("path", {
+			i && /* @__PURE__ */ t("path", {
 				className: "badge-focus",
 				d
 			})
@@ -495,15 +496,15 @@ var ee = {
 		left: 4
 	},
 	stretches: !0,
-	defaults: P
-}, I = {
+	defaults: F
+}, te = {
 	biteRadius: 3,
 	biteSpacing: 8,
 	irregularity: 0
-}, te = {
+}, ne = {
 	compose: (e) => {
 		let t = {
-			...I,
+			...te,
 			...e
 		};
 		return {
@@ -526,16 +527,16 @@ var ee = {
 		left: 6
 	},
 	stretches: !0,
-	defaults: I
-}, ne = {
+	defaults: te
+}, L = {
 	bumpWidth: 24,
 	puffiness: 14,
 	erosion: .2,
 	irregularity: 0
-}, re = {
+}, R = {
 	compose: (e) => {
 		let t = {
-			...ne,
+			...L,
 			...e
 		};
 		return {
@@ -558,15 +559,15 @@ var ee = {
 		left: 8
 	},
 	stretches: !0,
-	defaults: ne
-}, ie = {
+	defaults: L
+}, re = {
 	eaveY: 32,
 	peakHeight: 32,
 	roofOverhang: 0
-}, L = {
+}, ie = {
 	compose: (e) => {
 		let t = {
-			...ie,
+			...re,
 			...e
 		}, n = Math.max(2, Math.min(t.eaveY, 95)), r = n - Math.max(0, t.peakHeight), i = Math.max(0, Math.min(t.roofOverhang, 12));
 		return {
@@ -589,14 +590,14 @@ var ee = {
 		left: 4
 	},
 	stretches: !0,
-	defaults: ie
+	defaults: re
 }, ae = {
 	bevelWidth: 6,
 	lightFrom: "tl",
 	rivetRadius: 2.4,
 	rivetInset: 7,
 	sheenIntensity: .22
-}, oe = {
+}, z = {
 	compose: (e) => {
 		let t = {
 			...ae,
@@ -639,7 +640,7 @@ var ee = {
 	},
 	stretches: !0,
 	defaults: ae
-}, R = {
+}, oe = {
 	topInset: 12,
 	pointDepth: 100
 };
@@ -656,24 +657,24 @@ function se(e, t) {
 		"Z"
 	].join(" ");
 }
-var z = {
-	Component: ({ variant: e, focused: t, params: n }) => {
-		let r = {
-			...R,
-			...n
-		}, i = se(r.topInset, r.pointDepth);
-		return /* @__PURE__ */ s(a, { children: [
-			(e === "solid" || e === "subtle") && /* @__PURE__ */ o("path", {
+var ce = {
+	Component: ({ variant: r, focused: i, params: a }) => {
+		let o = {
+			...oe,
+			...a
+		}, s = se(o.topInset, o.pointDepth);
+		return /* @__PURE__ */ n(e, { children: [
+			(r === "solid" || r === "subtle") && /* @__PURE__ */ t("path", {
 				className: "badge-fill",
-				d: i
+				d: s
 			}),
-			(e === "outline" || e === "solid") && /* @__PURE__ */ o("path", {
+			(r === "outline" || r === "solid") && /* @__PURE__ */ t("path", {
 				className: "badge-stroke",
-				d: i
+				d: s
 			}),
-			t && /* @__PURE__ */ o("path", {
+			i && /* @__PURE__ */ t("path", {
 				className: "badge-focus",
-				d: i,
+				d: s,
 				transform: "translate(50 50) scale(1.06) translate(-50 -50)"
 			})
 		] });
@@ -685,20 +686,20 @@ var z = {
 		left: 10
 	},
 	stretches: !0,
-	defaults: R
-}, ce = "M 35 0 L 30 12 Q 15 30 15 55 Q 15 75 30 90 L 30 100 L 70 100 L 70 90 Q 85 75 85 55 Q 85 30 70 12 L 65 0 Z", B = {
-	Component: ({ variant: e, focused: t }) => /* @__PURE__ */ s(a, { children: [
-		(e === "solid" || e === "subtle") && /* @__PURE__ */ o("path", {
+	defaults: oe
+}, B = "M 35 0 L 30 12 Q 15 30 15 55 Q 15 75 30 90 L 30 100 L 70 100 L 70 90 Q 85 75 85 55 Q 85 30 70 12 L 65 0 Z", V = {
+	Component: ({ variant: r, focused: i }) => /* @__PURE__ */ n(e, { children: [
+		(r === "solid" || r === "subtle") && /* @__PURE__ */ t("path", {
 			className: "badge-fill",
-			d: ce
+			d: B
 		}),
-		(e === "outline" || e === "solid") && /* @__PURE__ */ o("path", {
+		(r === "outline" || r === "solid") && /* @__PURE__ */ t("path", {
 			className: "badge-stroke",
-			d: ce
+			d: B
 		}),
-		t && /* @__PURE__ */ o("path", {
+		i && /* @__PURE__ */ t("path", {
 			className: "badge-focus",
-			d: ce,
+			d: B,
 			transform: "translate(50 50) scale(1.05) translate(-50 -50)"
 		})
 	] }),
@@ -709,17 +710,17 @@ var z = {
 		left: 12
 	},
 	stretches: !0
-}, V = {
+}, le = {
 	headX: 6,
 	headHalfHeight: 23,
 	shoulderX: 33,
 	shoulderHalfHeight: 36,
 	footX: 100,
 	footHalfHeight: 29
-}, le = {
+}, H = {
 	compose: (e) => {
 		let t = {
-			...V,
+			...le,
 			...e
 		}, n = Math.max(0, Math.min(t.headX, 40)), r = Math.max(n + 1, Math.min(t.shoulderX, 70)), i = Math.max(r + 1, Math.min(t.footX, 100)), a = Math.max(2, Math.min(t.headHalfHeight, 50)), o = Math.max(0, Math.min(t.shoulderHalfHeight, 50)), s = Math.min(50, a + o), c = Math.max(2, Math.min(t.footHalfHeight, 50));
 		return {
@@ -741,13 +742,13 @@ var z = {
 		left: 11
 	},
 	stretches: !0,
-	defaults: V
-}, H = {
+	defaults: le
+}, U = {
 	teeth: 11,
 	tearDepth: 4,
 	sideToTopRatio: 3
 };
-function U(e, t) {
+function ue(e, t) {
 	let n = Math.max(3, Math.floor(e)), r = Math.max(1, t), i = (e) => r * (.55 + .55 * Math.abs(Math.sin(e * 1.73 + .5))), a = "M 0 0 L 100 0";
 	for (let e = 0; e < n; e++) {
 		let t = (e + .5) / n * 100, r = (e + 1) / n * 100;
@@ -760,30 +761,30 @@ function U(e, t) {
 	}
 	return a + " Z";
 }
-var ue = 2, de = {
-	Component: ({ variant: e, focused: t, params: n }) => {
-		let r = {
-			...H,
-			...n
-		}, i = U(r.teeth, r.tearDepth);
-		return /* @__PURE__ */ s(a, { children: [
-			(e === "solid" || e === "subtle") && /* @__PURE__ */ o("path", {
+var W = 2, de = {
+	Component: ({ variant: r, focused: i, params: a }) => {
+		let o = {
+			...U,
+			...a
+		}, s = ue(o.teeth, o.tearDepth);
+		return /* @__PURE__ */ n(e, { children: [
+			(r === "solid" || r === "subtle") && /* @__PURE__ */ t("path", {
 				className: "badge-fill",
-				d: i
+				d: s
 			}),
-			(e === "outline" || e === "solid") && /* @__PURE__ */ o("path", {
+			(r === "outline" || r === "solid") && /* @__PURE__ */ t("path", {
 				className: "badge-stroke",
-				d: i
+				d: s
 			}),
-			t && /* @__PURE__ */ o("path", {
+			i && /* @__PURE__ */ t("path", {
 				className: "badge-focus",
-				d: i,
+				d: s,
 				transform: "translate(50 50) scale(1.04) translate(-50 -50)"
 			})
 		] });
 	},
 	insets: (e) => {
-		let t = Math.max(.2, Math.min(e.sideToTopRatio ?? H.sideToTopRatio, 10)), n = ue, r = Math.round(n * t);
+		let t = Math.max(.2, Math.min(e.sideToTopRatio ?? U.sideToTopRatio, 10)), n = W, r = Math.round(n * t);
 		return {
 			top: n,
 			right: r,
@@ -792,43 +793,43 @@ var ue = 2, de = {
 		};
 	},
 	stretches: !0,
-	defaults: H
-}, W = "M 8 30 Q 0 50 8 70 L 92 70 Q 100 50 92 30 Z", fe = {
-	Component: ({ variant: e, focused: t }) => /* @__PURE__ */ s(a, { children: [
-		(e === "solid" || e === "subtle") && /* @__PURE__ */ o("path", {
+	defaults: U
+}, fe = "M 8 30 Q 0 50 8 70 L 92 70 Q 100 50 92 30 Z", pe = {
+	Component: ({ variant: r, focused: i }) => /* @__PURE__ */ n(e, { children: [
+		(r === "solid" || r === "subtle") && /* @__PURE__ */ t("path", {
 			className: "badge-fill",
-			d: W
+			d: fe
 		}),
-		(e === "outline" || e === "solid") && /* @__PURE__ */ o("path", {
+		(r === "outline" || r === "solid") && /* @__PURE__ */ t("path", {
 			className: "badge-stroke",
-			d: W
+			d: fe
 		}),
-		(e === "outline" || e === "solid") && /* @__PURE__ */ s(a, { children: [
-			/* @__PURE__ */ o("path", {
+		(r === "outline" || r === "solid") && /* @__PURE__ */ n(e, { children: [
+			/* @__PURE__ */ t("path", {
 				className: "badge-stroke",
 				d: "M 12 38 Q 30 35 50 39 T 88 38",
 				opacity: .5,
 				fill: "none"
 			}),
-			/* @__PURE__ */ o("path", {
+			/* @__PURE__ */ t("path", {
 				className: "badge-stroke",
 				d: "M 10 46 Q 36 49 54 45 T 90 47",
 				opacity: .4,
 				fill: "none"
 			}),
-			/* @__PURE__ */ o("path", {
+			/* @__PURE__ */ t("path", {
 				className: "badge-stroke",
 				d: "M 12 54 Q 28 51 52 56 T 88 54",
 				opacity: .55,
 				fill: "none"
 			}),
-			/* @__PURE__ */ o("path", {
+			/* @__PURE__ */ t("path", {
 				className: "badge-stroke",
 				d: "M 10 62 Q 40 65 58 61 T 90 62",
 				opacity: .4,
 				fill: "none"
 			}),
-			/* @__PURE__ */ o("ellipse", {
+			/* @__PURE__ */ t("ellipse", {
 				className: "badge-stroke",
 				cx: "32",
 				cy: "50",
@@ -837,7 +838,7 @@ var ue = 2, de = {
 				opacity: .7,
 				fill: "none"
 			}),
-			/* @__PURE__ */ o("ellipse", {
+			/* @__PURE__ */ t("ellipse", {
 				className: "badge-stroke",
 				cx: "32",
 				cy: "50",
@@ -846,7 +847,7 @@ var ue = 2, de = {
 				opacity: .85,
 				fill: "none"
 			}),
-			/* @__PURE__ */ o("ellipse", {
+			/* @__PURE__ */ t("ellipse", {
 				className: "badge-stroke",
 				cx: "70",
 				cy: "42",
@@ -856,9 +857,9 @@ var ue = 2, de = {
 				fill: "none"
 			})
 		] }),
-		t && /* @__PURE__ */ o("path", {
+		i && /* @__PURE__ */ t("path", {
 			className: "badge-focus",
-			d: W,
+			d: fe,
 			transform: "translate(50 50) scale(1.05) translate(-50 -50)"
 		})
 	] }),
@@ -883,28 +884,28 @@ var ue = 2, de = {
 	valleySmooth: 3,
 	rotation: 0,
 	samples: 192
-}, pe = {
-	pill: l,
-	plain: u,
-	square: f,
-	notched: h,
-	perforated: v,
-	hexagon: x,
-	starburst: w,
-	scalloped: E,
-	shield: k,
-	ribbon: j,
-	beavis: N,
+}, me = {
+	pill: u,
+	plain: d,
+	square: p,
+	notched: g,
+	perforated: y,
+	hexagon: S,
+	starburst: T,
+	scalloped: D,
+	shield: A,
+	ribbon: M,
+	beavis: P,
 	sparkler: ee,
-	postage: te,
-	cloud: re,
-	house: L,
-	plaque: oe,
-	crest: z,
-	urn: B,
-	coffin: le,
+	postage: ne,
+	cloud: R,
+	house: ie,
+	plaque: z,
+	crest: ce,
+	urn: V,
+	coffin: H,
 	receipt: de,
-	wood: fe,
+	wood: pe,
 	quatrefoil: {
 		compose: (e) => ({
 			base: "quatrefoil",
@@ -922,10 +923,10 @@ var ue = 2, de = {
 		stretches: !0,
 		defaults: G
 	}
-}, K = { chamfer: 6 }, me = {
+}, he = { chamfer: 6 }, ge = {
 	build: (e, t, n) => {
 		let r = {
-			...K,
+			...he,
 			...e
 		}, i = 100 / t, a = 100 / n, o = r.chamfer * i, s = r.chamfer * a, c = [
 			[o, 0],
@@ -968,21 +969,21 @@ var ue = 2, de = {
 			totalCss: d
 		};
 	},
-	defaults: K,
+	defaults: he,
 	insets: {
 		top: 0,
 		right: 4,
 		bottom: 0,
 		left: 4
 	}
-}, he = {
+}, K = {
 	erosion: .16,
 	eccentricity: 1,
 	pinch: 0
-}, ge = {
+}, _e = {
 	build: (e, t, n) => {
 		let r = {
-			...he,
+			...K,
 			...e
 		}, i = 100 / t, a = 100 / n, o = Math.max(0, Math.min(r.erosion, 1)), s = Math.max(.1, Math.min(r.eccentricity, 10)), c = Math.min(t, n) / 2 * o, l = c * i * s, u = c * a / s, d = Math.max(0, Math.min(l, 50)), f = Math.max(0, Math.min(u, 50)), p = (100 - 2 * d) / i, m = (100 - 2 * f) / a, h = c + c || 1, g = Math.PI * h * 1 / 4, _ = [
 			{
@@ -1133,7 +1134,7 @@ var ue = 2, de = {
 			totalCss: y
 		};
 	},
-	defaults: he,
+	defaults: K,
 	insets: {
 		top: 0,
 		right: 4,
@@ -1178,21 +1179,21 @@ function q(e, t, n) {
 }
 //#endregion
 //#region src/components/Badge/bases/Polygon.tsx
-var _e = [
+var ve = [
 	[0, 0],
 	[100, 0],
 	[100, 100],
 	[0, 100]
-], ve = {
-	build: (e, t, n) => q(e?.vertices && e.vertices.length >= 3 ? e.vertices : _e, t, n),
-	defaults: { vertices: _e },
+], ye = {
+	build: (e, t, n) => q(e?.vertices && e.vertices.length >= 3 ? e.vertices : ve, t, n),
+	defaults: { vertices: ve },
 	insets: {
 		top: 0,
 		right: 4,
 		bottom: 0,
 		left: 4
 	}
-}, ye = {
+}, be = {
 	top: "out",
 	right: "in",
 	bottom: "out",
@@ -1200,7 +1201,7 @@ var _e = [
 	tabSize: 12,
 	arcSamples: 18
 }, J = .62;
-function be(e, t, n, r, i, a, o) {
+function xe(e, t, n, r, i, a, o) {
 	if (i === "flat") return [t];
 	let s = i === "out" ? 1 : -1, c = t[0] - e[0], l = t[1] - e[1], u = Math.hypot(c, l) || 1, d = c / u, f = l / u, p = (e[0] + t[0]) / 2, m = (e[1] + t[1]) / 2, h = p + n * s * a * J, g = m + r * s * a * J, _ = a * Math.sqrt(Math.max(0, 1 - J * J)), v = [p - d * _, m - f * _], y = [p + d * _, m + f * _], b = [p + n * s * (a + a * (1 - J)), m + r * s * (a + a * (1 - J))], x = Math.hypot(v[0] - h, v[1] - g), S = Math.atan2(v[1] - g, v[0] - h), C = Math.atan2(y[1] - g, y[0] - h), w = Math.atan2(b[1] - g, b[0] - h), T = Math.PI * 2, E = ((w - S) % T + T) % T, D = ((C - S) % T + T) % T, O = E < D ? D : D - T, k = [];
 	k.push(v);
@@ -1210,22 +1211,22 @@ function be(e, t, n, r, i, a, o) {
 	}
 	return k.push(t), k;
 }
-var xe = {
+var Se = {
 	build: (e, t, n) => {
 		let r = {
-			...ye,
+			...be,
 			...e
 		}, i = Math.max(2, Math.min(r.tabSize, 40)), a = Math.max(6, Math.floor(r.arcSamples)), o = [0, 0], s = [100, 0], c = [100, 100], l = [0, 100], u = [o];
-		return u.push(...be(o, s, 0, -1, r.top, i, a)), u.push(...be(s, c, 1, 0, r.right, i, a)), u.push(...be(c, l, 0, 1, r.bottom, i, a)), u.push(...be(l, o, -1, 0, r.left, i, a)), u.length > 1 && u[u.length - 1][0] === o[0] && u[u.length - 1][1] === o[1] && u.pop(), q(u, t, n);
+		return u.push(...xe(o, s, 0, -1, r.top, i, a)), u.push(...xe(s, c, 1, 0, r.right, i, a)), u.push(...xe(c, l, 0, 1, r.bottom, i, a)), u.push(...xe(l, o, -1, 0, r.left, i, a)), u.length > 1 && u[u.length - 1][0] === o[0] && u[u.length - 1][1] === o[1] && u.pop(), q(u, t, n);
 	},
-	defaults: ye,
+	defaults: be,
 	insets: {
 		top: 12,
 		right: 16,
 		bottom: 12,
 		left: 16
 	}
-}, Se = {
+}, Ce = {
 	spikeR: 50,
 	lobeR: 42,
 	valleyR: 25,
@@ -1240,37 +1241,37 @@ var xe = {
 	rotation: 0,
 	samples: 192
 };
-function Ce(e, t, n) {
+function we(e, t, n) {
 	let r = e - t;
 	return (e + t + Math.sqrt(r * r + n * n)) / 2;
 }
-function we(e, t, n, r) {
+function Te(e, t, n, r) {
 	if (e <= 0) return 0;
 	if (e >= 1) return 1 - r;
 	let i = Math.max(.1, t * (1 + n)), a = Math.max(.1, t * (1 - n)), o = (1 - (1 - e) ** i) ** (1 / a);
 	return Math.min(o, 1 - r);
 }
-function Te(e = {}) {
+function Ee(e = {}) {
 	let t = {
-		...Se,
+		...Ce,
 		...e
 	}, n = Math.max(5, Math.min(t.spikeR, 50)), r = Math.max(5, Math.min(t.lobeR, 50 * Math.SQRT2)), i = Math.max(0, Math.min(t.valleyR, Math.min(n, r))), a = Math.max(.05, Math.min(t.valleyAt, .95)), o = Math.max(.2, t.spikeCurvature), s = Math.max(-.95, Math.min(t.spikeBend, .95)), c = Math.max(0, Math.min(t.spikeTipErosion, 1)), l = Math.max(.2, t.lobeCurvature), u = Math.max(-.95, Math.min(t.lobeBend, .95)), d = Math.max(0, Math.min(t.lobeTipErosion, 1)), f = Math.max(0, t.valleySmooth), p = t.rotation * Math.PI / 180, m = Math.max(24, Math.floor(t.samples)), h = [];
 	for (let e = 0; e < m; e++) {
-		let t = e / m * 2 * Math.PI, g = Math.abs(Math.sin(2 * (t - p))), _ = (a - g) / a, v = (g - a) / (1 - a), y = Ce(i + (n - i) * we(Math.max(0, _), o, s, c), i + (r - i) * we(Math.max(0, v), l, u, d), f);
+		let t = e / m * 2 * Math.PI, g = Math.abs(Math.sin(2 * (t - p))), _ = (a - g) / a, v = (g - a) / (1 - a), y = we(i + (n - i) * Te(Math.max(0, _), o, s, c), i + (r - i) * Te(Math.max(0, v), l, u, d), f);
 		h.push([50 + y * Math.cos(t), 50 + y * Math.sin(t)]);
 	}
 	return h;
 }
-var Ee = {
-	build: (e, t, n) => q(Te(e), t, n),
-	defaults: Se,
+var De = {
+	build: (e, t, n) => q(Ee(e), t, n),
+	defaults: Ce,
 	insets: {
 		top: 10,
 		right: 14,
 		bottom: 10,
 		left: 14
 	}
-}, De = {
+}, Oe = {
 	mode: "octant",
 	count: 5,
 	s0: 0,
@@ -1312,9 +1313,9 @@ var Ee = {
 	rotation: 0,
 	samples: 192
 };
-function Oe(e = {}) {
+function ke(e = {}) {
 	let t = {
-		...De,
+		...Oe,
 		...e
 	}, n = Math.max(3, Math.min(Math.floor(t.count), 12)), r = [
 		"s0",
@@ -1363,7 +1364,7 @@ function Oe(e = {}) {
 	});
 	return o.sort((e, t) => e.s - t.s), o[0].s = 0, o[n - 1].s = 1, t.mode === "quadrant" && (o[n - 1].r = o[0].r, o[n - 1].w = o[0].w), o;
 }
-function ke(e) {
+function Ae(e) {
 	let t = e.length - 1, n = Array(t);
 	for (let r = 0; r < t; r++) n[r] = Math.max(1e-9, e[r + 1].s - e[r].s);
 	let r = Array(t + 1), i = Array(t + 1), a = Array(t + 1), o = Array(t + 1);
@@ -1379,13 +1380,13 @@ function ke(e) {
 	for (let e = t - 1; e >= 0; e--) s[e] = (o[e] - a[e] * s[e + 1]) / i[e];
 	return s;
 }
-function Ae(e) {
+function je(e) {
 	return {
 		anchors: e,
-		M: ke(e)
+		M: Ae(e)
 	};
 }
-function je(e, t) {
+function Me(e, t) {
 	let { anchors: n, M: r } = t, i = n.length;
 	if (i === 0) return 0;
 	if (i === 1 || e <= n[0].s) return n[0].r;
@@ -1397,28 +1398,28 @@ function je(e, t) {
 	let l = (s.s - e) / c, u = (e - o.s) / c, d = (l * l * l - l) * c * c / 6, f = (u * u * u - u) * c * c / 6;
 	return l * o.r + u * s.r + (d * r[a] * o.w + f * r[a + 1] * s.w);
 }
-var Me = {
+var Ne = {
 	build: (e, t, n) => {
 		let r = {
-			...De,
+			...Oe,
 			...e
-		}, i = Ae(Oe(r)), a = r.rotation * Math.PI / 180, o = Math.max(48, Math.floor(r.samples)), s = [], c = Math.PI / 2;
+		}, i = je(ke(r)), a = r.rotation * Math.PI / 180, o = Math.max(48, Math.floor(r.samples)), s = [], c = Math.PI / 2;
 		for (let e = 0; e < o; e++) {
 			let t = e / o * 2 * Math.PI, n = t - a, l;
 			l = r.mode === "quadrant" ? (n % c + c) % c / c : Math.abs(Math.sin(2 * n));
-			let u = je(l, i);
+			let u = Me(l, i);
 			s.push([50 + u * Math.cos(t), 50 + u * Math.sin(t)]);
 		}
 		return q(s, t, n);
 	},
-	defaults: De,
+	defaults: Oe,
 	insets: {
 		top: 10,
 		right: 14,
 		bottom: 10,
 		left: 14
 	}
-}, Ne = {
+}, Pe = {
 	mode: "octant",
 	count: 5,
 	s0: 0,
@@ -1460,9 +1461,9 @@ var Me = {
 	rotation: 0,
 	samples: 192
 };
-function Pe(e = {}) {
+function Fe(e = {}) {
 	let t = {
-		...Ne,
+		...Pe,
 		...e
 	}, n = Math.max(3, Math.min(Math.floor(t.count), 12)), r = [
 		"s0",
@@ -1511,7 +1512,7 @@ function Pe(e = {}) {
 	});
 	return o.sort((e, t) => e.s - t.s), o[0].s = 0, o[n - 1].s = 1, t.mode === "quadrant" && (o[n - 1].r = o[0].r, o[n - 1].w = o[0].w), o;
 }
-function Fe(e) {
+function Ie(e) {
 	let t = e.length, n = {
 		s: -e[1].s,
 		r: e[1].r,
@@ -1537,7 +1538,7 @@ function Fe(e) {
 		a
 	];
 }
-function Ie(e, t) {
+function Le(e, t) {
 	let n = e + t + 1, r = Array(n);
 	for (let e = 0; e <= t; e++) r[e] = 0;
 	let i = e - t - 1;
@@ -1545,14 +1546,14 @@ function Ie(e, t) {
 	for (let e = n - t - 1; e < n; e++) r[e] = 1;
 	return r;
 }
-function Le(e, t, n, r) {
+function Re(e, t, n, r) {
 	if (e >= t[r]) return r - 1;
 	if (e <= t[n]) return n;
 	let i = n, a = r, o = i + a >>> 1;
 	for (; e < t[o] || e >= t[o + 1];) e < t[o] ? a = o : i = o, o = i + a >>> 1;
 	return o;
 }
-function Re(e, t, n, r) {
+function ze(e, t, n, r) {
 	let i = Array(r + 1).fill(0), a = Array(r + 1), o = Array(r + 1);
 	i[0] = 1;
 	for (let s = 1; s <= r; s++) {
@@ -1566,16 +1567,16 @@ function Re(e, t, n, r) {
 	}
 	return i;
 }
-function ze(e) {
-	let t = Fe(e);
+function Be(e) {
+	let t = Ie(e);
 	return {
 		extended: t,
-		knots: Ie(t.length, 3),
+		knots: Le(t.length, 3),
 		degree: 3
 	};
 }
-function Be(e, t) {
-	let { extended: n, knots: r, degree: i } = t, a = n.length, o = Math.max(0, Math.min(1, e)), s = Le(o, r, i, a), c = Re(s, o, r, i), l = 0, u = 0, d = 0;
+function Ve(e, t) {
+	let { extended: n, knots: r, degree: i } = t, a = n.length, o = Math.max(0, Math.min(1, e)), s = Re(o, r, i, a), c = ze(s, o, r, i), l = 0, u = 0, d = 0;
 	for (let e = 0; e <= i; e++) {
 		let t = n[s - i + e], r = t.w * c[e];
 		l += r * t.s, u += r * t.r, d += r;
@@ -1588,43 +1589,43 @@ function Be(e, t) {
 		r: 0
 	};
 }
-function Ve(e, t) {
-	if (e <= 0) return Be(0, t).r;
-	if (e >= 1) return Be(1, t).r;
+function He(e, t) {
+	if (e <= 0) return Ve(0, t).r;
+	if (e >= 1) return Ve(1, t).r;
 	let n = 0, r = 1;
 	for (let i = 0; i < 30; i++) {
-		let i = (n + r) * .5, { s: a } = Be(i, t);
+		let i = (n + r) * .5, { s: a } = Ve(i, t);
 		if (a < e ? n = i : r = i, r - n < 1e-5) break;
 	}
-	return Be((n + r) * .5, t).r;
+	return Ve((n + r) * .5, t).r;
 }
-var He = {
+var Ue = {
 	build: (e, t, n) => {
 		let r = {
-			...Ne,
+			...Pe,
 			...e
-		}, i = ze(Pe(r)), a = r.rotation * Math.PI / 180, o = Math.max(48, Math.floor(r.samples)), s = [], c = Math.PI / 2;
+		}, i = Be(Fe(r)), a = r.rotation * Math.PI / 180, o = Math.max(48, Math.floor(r.samples)), s = [], c = Math.PI / 2;
 		for (let e = 0; e < o; e++) {
 			let t = e / o * 2 * Math.PI, n = t - a, l;
 			l = r.mode === "quadrant" ? (n % c + c) % c / c : Math.abs(Math.sin(2 * n));
-			let u = Ve(l, i);
+			let u = He(l, i);
 			s.push([50 + u * Math.cos(t), 50 + u * Math.sin(t)]);
 		}
 		return q(s, t, n);
 	},
-	defaults: Ne,
+	defaults: Pe,
 	insets: {
 		top: 10,
 		right: 14,
 		bottom: 10,
 		left: 14
 	}
-}, Ue = {
+}, We = {
 	left: "inward",
 	right: "outward",
 	taperWidth: 8
 };
-function We(e, t, n, r) {
+function Ge(e, t, n, r) {
 	switch (e) {
 		case "flat": return {
 			top: [t, 0],
@@ -1643,7 +1644,7 @@ function We(e, t, n, r) {
 		};
 	}
 }
-function Ge(e, t) {
+function Ke(e, t) {
 	let n = Math.max(0, t);
 	switch (e) {
 		case "flat": return 4;
@@ -1651,28 +1652,28 @@ function Ge(e, t) {
 		case "inward": return Math.round(n * .8);
 	}
 }
-var Ke = {
+var qe = {
 	build: (e, t, n) => {
 		let r = {
-			...Ue,
+			...We,
 			...e
-		}, i = Math.max(0, r.taperWidth), a = t > 0 ? i / t * 100 : 0, o = We(r.left, 0, 1, a), s = We(r.right, 100, -1, a), c = [o.top];
+		}, i = Math.max(0, r.taperWidth), a = t > 0 ? i / t * 100 : 0, o = Ge(r.left, 0, 1, a), s = Ge(r.right, 100, -1, a), c = [o.top];
 		return c.push(s.top), s.mid && c.push(s.mid), c.push(s.bottom), c.push(o.bottom), o.mid && c.push(o.mid), q(c, t, n);
 	},
 	insets: (e) => {
 		let t = {
-			...Ue,
+			...We,
 			...e
 		};
 		return {
 			top: 0,
-			right: Ge(t.right, t.taperWidth),
+			right: Ke(t.right, t.taperWidth),
 			bottom: 0,
-			left: Ge(t.left, t.taperWidth)
+			left: Ke(t.left, t.taperWidth)
 		};
 	},
-	defaults: Ue
-}, qe = {
+	defaults: We
+}, Je = {
 	flat: (e, t) => 0,
 	chevron: (e, t) => (1 - Math.abs(e - .5) * 2) * t,
 	slant: (e, t) => e * t,
@@ -1681,8 +1682,8 @@ var Ke = {
 	scallop: (e, t) => Math.sin(e * Math.PI * 3) * .4 * t,
 	"concave-chevron": (e, t) => -(1 - Math.abs(e - .5) * 2) * t
 };
-function Je(e) {
-	return typeof e == "function" ? e : qe[e] ?? qe.flat;
+function Ye(e) {
+	return typeof e == "function" ? e : Je[e] ?? Je.flat;
 }
 //#endregion
 //#region src/components/Badge/bases/Powerline.tsx
@@ -1690,21 +1691,21 @@ var Y = {
 	leftEdge: "flat",
 	rightEdge: "flat",
 	depth: 6
-}, X = 64, Ye = {
-	"chamfered-rect": me,
-	"rounded-rect": ge,
-	polygon: ve,
-	puzzle: xe,
-	quatrefoil: Ee,
-	"octant-spline": Me,
-	"octant-bspline": He,
-	ribbon: Ke,
+}, Xe = 64, Ze = {
+	"chamfered-rect": ge,
+	"rounded-rect": _e,
+	polygon: ye,
+	puzzle: Se,
+	quatrefoil: De,
+	"octant-spline": Ne,
+	"octant-bspline": Ue,
+	ribbon: qe,
 	powerline: {
 		build: (e, t, n) => {
 			let r = {
 				...Y,
 				...e
-			}, i = Je(r.leftEdge), a = Je(r.rightEdge), o = r.depth, s = 100 / t, c = 100 / n, l = [];
+			}, i = Ye(r.leftEdge), a = Ye(r.rightEdge), o = r.depth, s = 100 / t, c = 100 / n, l = [];
 			l.push({
 				x: i(0, o) * s,
 				y: 0,
@@ -1716,8 +1717,8 @@ var Y = {
 				nx: 0,
 				ny: -1
 			});
-			for (let e = 1; e < X; e++) {
-				let n = e / X, r = t + a(n, o);
+			for (let e = 1; e < Xe; e++) {
+				let n = e / Xe, r = t + a(n, o);
 				l.push({
 					x: r * s,
 					y: n * 100,
@@ -1736,8 +1737,8 @@ var Y = {
 				nx: 0,
 				ny: 1
 			});
-			for (let e = X - 1; e >= 1; e--) {
-				let t = e / X, n = 0 + i(t, o);
+			for (let e = Xe - 1; e >= 1; e--) {
+				let t = e / Xe, n = 0 + i(t, o);
 				l.push({
 					x: n * s,
 					y: t * 100,
@@ -1777,7 +1778,7 @@ var Y = {
 		},
 		defaults: Y,
 		insets: (e) => {
-			let t = e?.depth ?? Y.depth, n = e?.leftEdge ?? Y.leftEdge, r = e?.rightEdge ?? Y.rightEdge, i = Je(n), a = Je(r), o = 0, s = 0, c = 0, l = 0;
+			let t = e?.depth ?? Y.depth, n = e?.leftEdge ?? Y.leftEdge, r = e?.rightEdge ?? Y.rightEdge, i = Ye(n), a = Ye(r), o = 0, s = 0, c = 0, l = 0;
 			for (let e = 0; e <= 32; e++) {
 				let n = e / 32, r = i(n, t), u = a(n, t), d = e === 0 || e === 32 ? .5 : 1;
 				o += d * r / 32, s += d * u / 32, r > c && (c = r), -u > l && (l = -u);
@@ -1794,7 +1795,7 @@ var Y = {
 };
 //#endregion
 //#region src/components/Badge/effects/rangeMask.ts
-function Z(e, t, n) {
+function X(e, t, n) {
 	if (!n) return 1;
 	let [r, i] = n;
 	if (r === i) return 0;
@@ -1803,7 +1804,7 @@ function Z(e, t, n) {
 }
 //#endregion
 //#region src/components/Badge/effects/Spikes.tsx
-var Xe = {
+var Qe = {
 	count: 44,
 	length: 8,
 	baseWidth: 3,
@@ -1812,12 +1813,12 @@ var Xe = {
 	diagonalScale: .5,
 	irregularity: 0,
 	cornerCompensation: 1
-}, Ze = {
+}, $e = {
 	offsetAt: (e, { params: t, phase: n, totalCss: r, perimeterAt: i }) => {
 		let a = {
-			...Xe,
+			...Qe,
 			...t
-		}, o = Z(e, r, a.range);
+		}, o = X(e, r, a.range);
 		if (o === 0) return {
 			dx: 0,
 			dy: 0
@@ -1839,17 +1840,17 @@ var Xe = {
 			dy: _ * D
 		};
 	},
-	defaults: Xe
-}, Qe = {
+	defaults: Qe
+}, et = {
 	bumpWidth: 18,
 	puffiness: 10,
 	irregularity: 0
-}, $e = {
+}, tt = {
 	offsetAt: (e, { params: t, phase: n, totalCss: r, perimeterAt: i }) => {
 		let a = {
-			...Qe,
+			...et,
 			...t
-		}, o = Z(e, r, a.range);
+		}, o = X(e, r, a.range);
 		if (o === 0) return {
 			dx: 0,
 			dy: 0
@@ -1862,17 +1863,17 @@ var Xe = {
 			dy: m.ny * p
 		};
 	},
-	defaults: Qe
-}, et = {
+	defaults: et
+}, nt = {
 	biteRadius: 3,
 	biteSpacing: 8,
 	irregularity: 0
-}, tt = {
+}, rt = {
 	offsetAt: (e, { params: t, phase: n, totalCss: r, perimeterAt: i }) => {
 		let a = {
-			...et,
+			...nt,
 			...t
-		}, o = Z(e, r, a.range);
+		}, o = X(e, r, a.range);
 		if (o === 0) return {
 			dx: 0,
 			dy: 0
@@ -1890,17 +1891,17 @@ var Xe = {
 			dy: _.ny * g * o
 		};
 	},
-	defaults: et
-}, nt = {
+	defaults: nt
+}, it = {
 	scallopRadius: 4,
 	scallopSpacing: 10,
 	irregularity: 0
-}, rt = {
+}, at = {
 	offsetAt: (e, { params: t, phase: n, totalCss: r, perimeterAt: i }) => {
 		let a = {
-			...nt,
+			...it,
 			...t
-		}, o = Z(e, r, a.range);
+		}, o = X(e, r, a.range);
 		if (o === 0) return {
 			dx: 0,
 			dy: 0
@@ -1918,15 +1919,15 @@ var Xe = {
 			dy: _.ny * g
 		};
 	},
-	defaults: nt
-}, it = {
+	defaults: it
+}, ot = {
 	bevelWidth: 6,
 	lightFrom: "tl"
 };
-function at(e, t) {
+function st(e, t) {
 	return Math.abs(t) > Math.abs(e) ? t < 0 ? "top" : "bottom" : e < 0 ? "left" : "right";
 }
-function ot(e) {
+function ct(e) {
 	let t = e[0] === "t", n = e[1] === "l";
 	return {
 		top: t ? "badge-bevel-light" : "badge-bevel-dark",
@@ -1935,26 +1936,27 @@ function ot(e) {
 		right: n ? "badge-bevel-medium-dark" : "badge-bevel-medium-light"
 	};
 }
-var st = 240, ct = {
-	Component: ({ sampler: e, boxW: n, boxH: r, variant: i, params: c }) => {
-		if (i !== "solid" && i !== "subtle") return null;
-		let l = {
-			...it,
+var lt = 240, ut = {
+	Component: ({ sampler: r, boxW: i, boxH: o, variant: s, params: c }) => {
+		let l = a();
+		if (s !== "solid" && s !== "subtle") return null;
+		let u = {
+			...ot,
 			...c
-		}, u = t(), d = 100 / n, f = 100 / r, p = ot(l.lightFrom), m = e.totalCss, h = [], g = [];
-		for (let t = 0; t < st; t++) {
-			let n = e.perimeterAt(t / st * m);
+		}, d = 100 / i, f = 100 / o, p = ct(u.lightFrom), m = r.totalCss, h = [], g = [];
+		for (let e = 0; e < lt; e++) {
+			let t = r.perimeterAt(e / lt * m);
 			h.push({
-				x: n.x,
-				y: n.y,
-				side: at(n.nx, n.ny)
+				x: t.x,
+				y: t.y,
+				side: st(t.nx, t.ny)
 			}), g.push({
-				x: n.x - n.nx * l.bevelWidth * d,
-				y: n.y - n.ny * l.bevelWidth * f
+				x: t.x - t.nx * u.bevelWidth * d,
+				y: t.y - t.ny * u.bevelWidth * f
 			});
 		}
 		let _ = [], v = null;
-		for (let e = 0; e < st; e++) {
+		for (let e = 0; e < lt; e++) {
 			let t = h[e].side;
 			!v || v.side !== t ? (v = {
 				side: t,
@@ -1969,23 +1971,23 @@ var st = 240, ct = {
 			for (let e = 1; e < r.length; e++) i += ` L ${r[e].x.toFixed(3)} ${r[e].y.toFixed(3)}`;
 			return i + " Z";
 		};
-		return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", {
-			id: u,
-			children: /* @__PURE__ */ o("path", { d: e.bodyPath })
-		}) }), /* @__PURE__ */ o("g", {
-			clipPath: `url(#${u})`,
-			children: _.map((e, t) => /* @__PURE__ */ o("path", {
+		return /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", {
+			id: l,
+			children: /* @__PURE__ */ t("path", { d: r.bodyPath })
+		}) }), /* @__PURE__ */ t("g", {
+			clipPath: `url(#${l})`,
+			children: _.map((e, n) => /* @__PURE__ */ t("path", {
 				className: p[e.side],
 				d: y(e)
-			}, t))
+			}, n))
 		})] });
 	},
 	zone: "foreground",
-	defaults: it
-}, lt = {
+	defaults: ot
+}, dt = {
 	lightFrom: "tl",
 	intensity: .22
-}, ut = {
+}, ft = {
 	tl: {
 		x1: "100%",
 		y1: "100%",
@@ -2010,202 +2012,204 @@ var st = 240, ct = {
 		x2: "100%",
 		y2: "100%"
 	}
-}, dt = {
-	Component: ({ sampler: e, variant: n, params: r }) => {
-		if (n !== "solid" && n !== "subtle") return null;
-		let i = {
-			...lt,
-			...r
-		}, c = t(), l = t(), u = Math.max(0, Math.min(i.intensity, 1));
-		return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s("defs", { children: [/* @__PURE__ */ o("clipPath", {
-			id: l,
-			children: /* @__PURE__ */ o("path", { d: e.bodyPath })
-		}), /* @__PURE__ */ s("linearGradient", {
+}, pt = {
+	Component: ({ sampler: r, variant: i, params: o }) => {
+		let s = a(), c = a();
+		if (i !== "solid" && i !== "subtle") return null;
+		let l = {
+			...dt,
+			...o
+		}, u = Math.max(0, Math.min(l.intensity, 1));
+		return /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ n("defs", { children: [/* @__PURE__ */ t("clipPath", {
 			id: c,
-			...ut[i.lightFrom],
+			children: /* @__PURE__ */ t("path", { d: r.bodyPath })
+		}), /* @__PURE__ */ n("linearGradient", {
+			id: s,
+			...ft[l.lightFrom],
 			children: [
-				/* @__PURE__ */ o("stop", {
+				/* @__PURE__ */ t("stop", {
 					offset: "0%",
 					stopColor: "black",
 					stopOpacity: u
 				}),
-				/* @__PURE__ */ o("stop", {
+				/* @__PURE__ */ t("stop", {
 					offset: "45%",
 					stopColor: "black",
 					stopOpacity: "0.04"
 				}),
-				/* @__PURE__ */ o("stop", {
+				/* @__PURE__ */ t("stop", {
 					offset: "58%",
 					stopColor: "white",
 					stopOpacity: "0.04"
 				}),
-				/* @__PURE__ */ o("stop", {
+				/* @__PURE__ */ t("stop", {
 					offset: "100%",
 					stopColor: "white",
 					stopOpacity: u
 				})
 			]
-		})] }), /* @__PURE__ */ o("rect", {
-			clipPath: `url(#${l})`,
+		})] }), /* @__PURE__ */ t("rect", {
+			clipPath: `url(#${c})`,
 			x: "0",
 			y: "0",
 			width: "100",
 			height: "100",
-			fill: `url(#${c})`,
+			fill: `url(#${s})`,
 			style: { pointerEvents: "none" }
 		})] });
 	},
 	zone: "foreground",
-	defaults: lt
-}, ft = {
+	defaults: dt
+}, mt = {
 	radius: 2.4,
 	inset: 7,
 	lightFrom: "tl"
-}, pt = {
-	Component: ({ boxW: e, boxH: t, variant: n, params: r }) => {
-		if (n !== "solid" && n !== "subtle") return null;
-		let i = {
-			...ft,
-			...r
-		}, c = 100 / e, l = 100 / t, u = i.radius * c, d = i.radius * l, f = i.inset * c, p = i.inset * l, m = i.lightFrom[1] === "l" ? -i.radius * .32 : i.radius * .32, h = i.lightFrom[0] === "t" ? -i.radius * .32 : i.radius * .32;
-		return /* @__PURE__ */ o(a, { children: [
+}, ht = {
+	Component: ({ boxW: r, boxH: i, variant: a, params: o }) => {
+		if (a !== "solid" && a !== "subtle") return null;
+		let s = {
+			...mt,
+			...o
+		}, c = 100 / r, l = 100 / i, u = s.radius * c, d = s.radius * l, f = s.inset * c, p = s.inset * l, m = s.lightFrom[1] === "l" ? -s.radius * .32 : s.radius * .32, h = s.lightFrom[0] === "t" ? -s.radius * .32 : s.radius * .32;
+		return /* @__PURE__ */ t(e, { children: [
 			[f, p],
 			[100 - f, p],
 			[f, 100 - p],
 			[100 - f, 100 - p]
-		].map(([e, t], n) => /* @__PURE__ */ s("g", { children: [
-			/* @__PURE__ */ o("ellipse", {
+		].map(([e, r], i) => /* @__PURE__ */ n("g", { children: [
+			/* @__PURE__ */ t("ellipse", {
 				className: "badge-bevel-dark",
 				cx: e,
-				cy: t,
+				cy: r,
 				rx: u,
 				ry: d
 			}),
-			/* @__PURE__ */ o("ellipse", {
+			/* @__PURE__ */ t("ellipse", {
 				className: "badge-bevel-medium-dark",
 				cx: e - m * .6 * c,
-				cy: t - h * .6 * l,
+				cy: r - h * .6 * l,
 				rx: u * .75,
 				ry: d * .75
 			}),
-			/* @__PURE__ */ o("ellipse", {
+			/* @__PURE__ */ t("ellipse", {
 				className: "badge-bevel-light",
 				cx: e + m * c,
-				cy: t + h * l,
+				cy: r + h * l,
 				rx: u * .45,
 				ry: d * .45
 			})
-		] }, n)) });
+		] }, i)) });
 	},
 	zone: "foreground",
-	defaults: ft
-}, mt = {
+	defaults: mt
+}, gt = {
 	dx: 1,
 	dy: 2,
 	opacity: .28
-}, ht = {
-	Component: ({ sampler: e, boxW: t, boxH: n, params: r }) => {
-		let i = {
-			...mt,
-			...r
-		}, a = 100 / t, s = 100 / n, c = i.dx * a, l = i.dy * s;
-		return /* @__PURE__ */ o("path", {
+}, _t = {
+	Component: ({ sampler: e, boxW: n, boxH: r, params: i }) => {
+		let a = {
+			...gt,
+			...i
+		}, o = 100 / n, s = 100 / r, c = a.dx * o, l = a.dy * s;
+		return /* @__PURE__ */ t("path", {
 			d: e.bodyPath,
 			transform: `translate(${c.toFixed(3)} ${l.toFixed(3)})`,
-			fill: `rgba(0, 0, 0, ${Math.max(0, Math.min(i.opacity, 1))})`,
+			fill: `rgba(0, 0, 0, ${Math.max(0, Math.min(a.opacity, 1))})`,
 			stroke: "none",
 			style: { pointerEvents: "none" }
 		});
 	},
 	zone: "background",
-	defaults: mt
-}, gt = {
+	defaults: gt
+}, vt = {
 	lines: 4,
 	knots: 2,
 	intensity: .55
 };
-function _t(e) {
+function yt(e) {
 	return Math.sin(e * 1.73 + .5);
 }
-var vt = {
-	Component: ({ sampler: e, variant: n, params: r }) => {
-		if (n !== "solid" && n !== "subtle") return null;
-		let i = {
-			...gt,
-			...r
-		}, c = t(), l = [];
-		for (let e = 0; e < i.lines; e++) {
-			let t = (e + 1) / (i.lines + 1) * 100, n = _t(e * 2 + 1) * 4, r = _t(e * 2 + 2) * 4;
+var bt = {
+	Component: ({ sampler: r, variant: i, params: o }) => {
+		let s = a();
+		if (i !== "solid" && i !== "subtle") return null;
+		let c = {
+			...vt,
+			...o
+		}, l = [];
+		for (let e = 0; e < c.lines; e++) {
+			let t = (e + 1) / (c.lines + 1) * 100, n = yt(e * 2 + 1) * 4, r = yt(e * 2 + 2) * 4;
 			l.push(`M -5 ${t.toFixed(2)} Q 35 ${(t + n).toFixed(2)} 60 ${t.toFixed(2)} T 105 ${(t + r).toFixed(2)}`);
 		}
 		let u = [];
-		for (let e = 0; e < i.knots; e++) {
-			let t = 30 + _t(e * 3 + .7) * 30 + 20, n = 50 + _t(e * 3 + 1.3) * 30;
+		for (let e = 0; e < c.knots; e++) {
+			let t = 30 + yt(e * 3 + .7) * 30 + 20, n = 50 + yt(e * 3 + 1.3) * 30;
 			u.push([t, n]);
 		}
-		return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", {
-			id: c,
-			children: /* @__PURE__ */ o("path", { d: e.bodyPath })
-		}) }), /* @__PURE__ */ s("g", {
-			clipPath: `url(#${c})`,
-			opacity: Math.max(0, Math.min(i.intensity, 1)),
+		return /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", {
+			id: s,
+			children: /* @__PURE__ */ t("path", { d: r.bodyPath })
+		}) }), /* @__PURE__ */ n("g", {
+			clipPath: `url(#${s})`,
+			opacity: Math.max(0, Math.min(c.intensity, 1)),
 			style: { pointerEvents: "none" },
-			children: [l.map((e, t) => /* @__PURE__ */ o("path", {
+			children: [l.map((e, n) => /* @__PURE__ */ t("path", {
 				className: "badge-stroke",
 				d: e,
 				fill: "none"
-			}, `l${t}`)), u.map(([e, t], n) => /* @__PURE__ */ s("g", { children: [/* @__PURE__ */ o("ellipse", {
+			}, `l${n}`)), u.map(([e, r], i) => /* @__PURE__ */ n("g", { children: [/* @__PURE__ */ t("ellipse", {
 				className: "badge-stroke",
 				cx: e,
-				cy: t,
+				cy: r,
 				rx: 3,
 				ry: 2.4,
 				fill: "none"
-			}), /* @__PURE__ */ o("ellipse", {
+			}), /* @__PURE__ */ t("ellipse", {
 				className: "badge-stroke",
 				cx: e,
-				cy: t,
+				cy: r,
 				rx: 1.2,
 				ry: 1,
 				fill: "none"
-			})] }, `k${n}`))]
+			})] }, `k${i}`))]
 		})] });
 	},
 	zone: "foreground",
-	defaults: gt
-}, yt = {
+	defaults: vt
+}, xt = {
 	holeRadius: 3,
 	holeSpacing: 11
-}, bt = {
-	Component: ({ sampler: e, boxW: t, boxH: n, params: r }) => {
-		let i = {
-			...yt,
-			...r
-		}, s = 100 / t, c = 100 / n, l = e.totalCss, u = Math.max(2, Math.round(l / Math.max(2 * i.holeRadius, i.holeSpacing))), d = l / u, f = [];
-		for (let t = 0; t < u; t++) {
-			let n = (t + .5) * d;
-			if (Z(n, l, r?.range) === 0) continue;
-			let i = e.perimeterAt(n);
+}, St = {
+	Component: ({ sampler: n, boxW: r, boxH: i, params: a }) => {
+		let o = {
+			...xt,
+			...a
+		}, s = 100 / r, c = 100 / i, l = n.totalCss, u = Math.max(2, Math.round(l / Math.max(2 * o.holeRadius, o.holeSpacing))), d = l / u, f = [];
+		for (let e = 0; e < u; e++) {
+			let t = (e + .5) * d;
+			if (X(t, l, a?.range) === 0) continue;
+			let r = n.perimeterAt(t);
 			f.push({
-				cx: i.x,
-				cy: i.y
+				cx: r.x,
+				cy: r.y
 			});
 		}
-		let p = i.holeRadius * s, m = i.holeRadius * c;
-		return /* @__PURE__ */ o(a, { children: f.map((e, t) => /* @__PURE__ */ o("ellipse", {
+		let p = o.holeRadius * s, m = o.holeRadius * c;
+		return /* @__PURE__ */ t(e, { children: f.map((e, n) => /* @__PURE__ */ t("ellipse", {
 			cx: e.cx,
 			cy: e.cy,
 			rx: p,
 			ry: m,
 			fill: "black"
-		}, t)) });
+		}, n)) });
 	},
 	zone: "mask",
-	defaults: yt
-}, xt = {
+	defaults: xt
+}, Ct = {
 	bevelWidth: 6,
 	lightFrom: 315
-}, Q = 240, St = [
+}, Z = 240, wt = [
 	"badge-bevel-light",
 	"badge-bevel-medium-light",
 	"badge-bevel-medium-light",
@@ -2213,33 +2217,34 @@ var vt = {
 	"badge-bevel-medium-dark",
 	"badge-bevel-dark"
 ];
-function Ct(e) {
+function Tt(e) {
 	let t = e * Math.PI / 180;
 	return {
 		lx: Math.sin(t),
 		ly: -Math.cos(t)
 	};
 }
-var wt = {
-	Component: ({ sampler: e, boxW: n, boxH: r, variant: i, params: c }) => {
-		if (i !== "solid" && i !== "subtle") return null;
-		let l = {
-			...xt,
+var Et = {
+	Component: ({ sampler: r, boxW: i, boxH: o, variant: s, params: c }) => {
+		let l = a();
+		if (s !== "solid" && s !== "subtle") return null;
+		let u = {
+			...Ct,
 			...c
-		}, u = t(), d = 100 / n, f = 100 / r, p = e.totalCss, { lx: m, ly: h } = Ct(l.lightFrom), g = [], _ = [];
-		for (let t = 0; t < Q; t++) {
-			let n = e.perimeterAt(t / Q * p), r = -(n.nx * m + n.ny * h), i = Math.max(0, Math.min((r + 1) / 2, .9999)), a = Math.floor(i * St.length);
+		}, d = 100 / i, f = 100 / o, p = r.totalCss, { lx: m, ly: h } = Tt(u.lightFrom), g = [], _ = [];
+		for (let e = 0; e < Z; e++) {
+			let t = r.perimeterAt(e / Z * p), n = -(t.nx * m + t.ny * h), i = Math.max(0, Math.min((n + 1) / 2, .9999)), a = Math.floor(i * wt.length);
 			g.push({
-				x: n.x,
-				y: n.y,
+				x: t.x,
+				y: t.y,
 				bucket: a
 			}), _.push({
-				x: n.x - n.nx * l.bevelWidth * d,
-				y: n.y - n.ny * l.bevelWidth * f
+				x: t.x - t.nx * u.bevelWidth * d,
+				y: t.y - t.ny * u.bevelWidth * f
 			});
 		}
 		let v = [], y = null;
-		for (let e = 0; e < Q; e++) {
+		for (let e = 0; e < Z; e++) {
 			let t = g[e].bucket;
 			!y || y.bucket !== t ? (y = {
 				bucket: t,
@@ -2248,7 +2253,7 @@ var wt = {
 		}
 		v.length > 1 && v[0].bucket === v[v.length - 1].bucket && (v[v.length - 1].idxs = v[v.length - 1].idxs.concat(v[0].idxs), v.shift());
 		let b = (e) => {
-			let t = e.idxs[0], n = e.idxs[e.idxs.length - 1], r = (t - 1 + Q) % Q, i = (n + 1) % Q, a = [
+			let t = e.idxs[0], n = e.idxs[e.idxs.length - 1], r = (t - 1 + Z) % Z, i = (n + 1) % Z, a = [
 				r,
 				...e.idxs,
 				i
@@ -2256,45 +2261,45 @@ var wt = {
 			for (let e = 1; e < c.length; e++) l += ` L ${c[e].x.toFixed(3)} ${c[e].y.toFixed(3)}`;
 			return l + " Z";
 		};
-		return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", {
-			id: u,
-			children: /* @__PURE__ */ o("path", { d: e.bodyPath })
-		}) }), /* @__PURE__ */ o("g", {
-			clipPath: `url(#${u})`,
-			children: v.map((e, t) => /* @__PURE__ */ o("path", {
-				className: St[e.bucket],
+		return /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", {
+			id: l,
+			children: /* @__PURE__ */ t("path", { d: r.bodyPath })
+		}) }), /* @__PURE__ */ t("g", {
+			clipPath: `url(#${l})`,
+			children: v.map((e, n) => /* @__PURE__ */ t("path", {
+				className: wt[e.bucket],
 				d: b(e)
-			}, t))
+			}, n))
 		})] });
 	},
 	zone: "foreground",
-	defaults: xt
-}, Tt = {
+	defaults: Ct
+}, Dt = {
 	width: 1,
 	color: "var(--badge-edge)",
 	dash: "",
 	blendMode: "normal",
 	opacity: 1
-}, Et = {
-	Component: ({ sampler: e, boxW: t, boxH: n, params: r }) => {
-		let i = {
-			...Tt,
-			...r
-		}, a = 100 / t, s = 100 / n, c = i.width * Math.max(a, s);
-		return /* @__PURE__ */ o("path", {
+}, Ot = {
+	Component: ({ sampler: e, boxW: n, boxH: r, params: i }) => {
+		let a = {
+			...Dt,
+			...i
+		}, o = 100 / n, s = 100 / r, c = a.width * Math.max(o, s);
+		return /* @__PURE__ */ t("path", {
 			d: e.bodyPath,
 			fill: "none",
-			stroke: i.color,
+			stroke: a.color,
 			strokeWidth: c,
-			strokeDasharray: i.dash || void 0,
-			strokeOpacity: i.opacity,
+			strokeDasharray: a.dash || void 0,
+			strokeOpacity: a.opacity,
 			vectorEffect: "non-scaling-stroke",
-			style: { mixBlendMode: i.blendMode }
+			style: { mixBlendMode: a.blendMode }
 		});
 	},
 	zone: "foreground",
-	defaults: Tt
-}, Dt = {
+	defaults: Dt
+}, kt = {
 	count: 3,
 	width: 18,
 	gap: 8,
@@ -2306,12 +2311,12 @@ var wt = {
 	gradientAngle: 90,
 	gradientStart: 0,
 	gradientEnd: 1
-}, Ot = {
-	Component: ({ sampler: e, boxW: n, boxH: r, params: i }) => {
+}, At = {
+	Component: ({ sampler: r, boxW: i, boxH: o, params: s }) => {
 		let c = {
-			...Dt,
-			...i
-		}, l = t(), u = t(), d = t(), f = 100 / n, p = 100 / r, m = Math.max(0, Math.min(c.irregularity, 1)), h = (e) => 1 + m * .45 * Math.sin(e * 1.73 + .7), g = (e) => 1 + m * .5 * Math.sin(e * 2.31 + 1.3), _ = (e) => m * 8 * Math.sin(e * 3.07 + .4), v = c.width * f, y = c.gap * f, b = c.offset * f, x = 50 - (c.count * v + (c.count - 1) * y) / 2 + b, S = [];
+			...kt,
+			...s
+		}, l = a(), u = a(), d = a(), f = 100 / i, p = 100 / o, m = Math.max(0, Math.min(c.irregularity, 1)), h = (e) => 1 + m * .45 * Math.sin(e * 1.73 + .7), g = (e) => 1 + m * .5 * Math.sin(e * 2.31 + 1.3), _ = (e) => m * 8 * Math.sin(e * 3.07 + .4), v = c.width * f, y = c.gap * f, b = c.offset * f, x = 50 - (c.count * v + (c.count - 1) * y) / 2 + b, S = [];
 		for (let e = 0; e < c.count; e++) {
 			let t = v * h(e), n = x, r = x + t, i = Math.tan((c.angle + _(e)) * Math.PI / 180) * (f / p) * 200 / 2, a = [
 				[n + i, -50],
@@ -2359,31 +2364,31 @@ var wt = {
 				color: "#fff"
 			}
 		];
-		return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s("defs", { children: [
-			/* @__PURE__ */ o("clipPath", {
+		return /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ n("defs", { children: [
+			/* @__PURE__ */ t("clipPath", {
 				id: l,
-				children: /* @__PURE__ */ o("path", { d: e.bodyPath })
+				children: /* @__PURE__ */ t("path", { d: r.bodyPath })
 			}),
-			/* @__PURE__ */ o("linearGradient", {
+			/* @__PURE__ */ t("linearGradient", {
 				id: d,
 				x1: E,
 				y1: D,
 				x2: O,
 				y2: k,
 				gradientUnits: "userSpaceOnUse",
-				children: M.map((e, t) => /* @__PURE__ */ o("stop", {
+				children: M.map((e, n) => /* @__PURE__ */ t("stop", {
 					offset: e.offset,
 					stopColor: e.color
-				}, t))
+				}, n))
 			}),
-			/* @__PURE__ */ o("mask", {
+			/* @__PURE__ */ t("mask", {
 				id: u,
 				maskUnits: "userSpaceOnUse",
 				x: "0",
 				y: "0",
 				width: "100",
 				height: "100",
-				children: /* @__PURE__ */ o("rect", {
+				children: /* @__PURE__ */ t("rect", {
 					x: "0",
 					y: "0",
 					width: "100",
@@ -2391,19 +2396,19 @@ var wt = {
 					fill: `url(#${d})`
 				})
 			})
-		] }), /* @__PURE__ */ o("g", {
+		] }), /* @__PURE__ */ t("g", {
 			clipPath: `url(#${l})`,
 			mask: `url(#${u})`,
-			children: S.map((e, t) => /* @__PURE__ */ o("polygon", {
+			children: S.map((e, n) => /* @__PURE__ */ t("polygon", {
 				points: e.points,
 				fill: c.color,
 				opacity: e.opacity
-			}, t))
+			}, n))
 		})] });
 	},
 	zone: "foreground",
-	defaults: Dt
-}, kt = {
+	defaults: kt
+}, jt = {
 	accent: "var(--badge-edge)",
 	topAlpha: .45,
 	upperAlpha: .7,
@@ -2418,23 +2423,24 @@ var wt = {
 	bezelWidth: 1,
 	rimAlpha: .22,
 	rimWidth: 1
-}, At = 240, jt = {
-	Component: ({ sampler: e, boxW: n, boxH: r, variant: i, params: c }) => {
-		if (i !== "solid" && i !== "subtle" && i !== "outline") return null;
-		let l = {
-			...kt,
+}, Q = 240, Mt = {
+	Component: ({ sampler: r, boxW: i, boxH: o, variant: s, params: c }) => {
+		let l = a(), u = a(), d = a();
+		if (s !== "solid" && s !== "subtle" && s !== "outline") return null;
+		let f = {
+			...jt,
 			...c
-		}, u = t(), d = t(), f = t(), p = e.totalCss, m = [], h = null;
-		for (let t = 0; t < At; t++) {
-			let n = t / At * p, r = e.perimeterAt(n);
-			r.ny < 0 ? (h || (h = [], m.push(h)), h.push({
-				x: r.x,
-				y: r.y
+		}, p = r.totalCss, m = [], h = null;
+		for (let e = 0; e < Q; e++) {
+			let t = e / Q * p, n = r.perimeterAt(t);
+			n.ny < 0 ? (h || (h = [], m.push(h)), h.push({
+				x: n.x,
+				y: n.y
 			})) : h = null;
 		}
 		if (m.length > 1) {
-			let t = e.perimeterAt(0), n = e.perimeterAt((At - 1) / At * p);
-			if (t.ny < 0 && n.ny < 0) {
+			let e = r.perimeterAt(0), t = r.perimeterAt((Q - 1) / Q * p);
+			if (e.ny < 0 && t.ny < 0) {
 				let e = m.shift();
 				m[m.length - 1].push(...e);
 			}
@@ -2446,45 +2452,45 @@ var wt = {
 			for (let n = 1; n < e.length; n++) t += ` L ${e[n].x.toFixed(3)} ${e[n].y.toFixed(3)}`;
 			g.push(t);
 		}
-		let _ = 100 / n, v = 100 / r, y = Math.max(_, v), b = l.bezelWidth * y, x = l.rimWidth * y, S = Math.max(0, l.equator - l.equatorSpread), C = Math.min(100, l.equator + l.equatorSpread * 1.6), w = `color-mix(in srgb, ${l.accent} ${l.equatorTint}%, white)`, T = `color-mix(in srgb, ${l.accent} ${l.baseTint}%, black)`;
-		return /* @__PURE__ */ s(a, { children: [
-			/* @__PURE__ */ s("defs", { children: [
-				/* @__PURE__ */ s("linearGradient", {
-					id: u,
+		let _ = 100 / i, v = 100 / o, y = Math.max(_, v), b = f.bezelWidth * y, x = f.rimWidth * y, S = Math.max(0, f.equator - f.equatorSpread), C = Math.min(100, f.equator + f.equatorSpread * 1.6), w = `color-mix(in srgb, ${f.accent} ${f.equatorTint}%, white)`, T = `color-mix(in srgb, ${f.accent} ${f.baseTint}%, black)`;
+		return /* @__PURE__ */ n(e, { children: [
+			/* @__PURE__ */ n("defs", { children: [
+				/* @__PURE__ */ n("linearGradient", {
+					id: l,
 					x1: "0%",
 					y1: "0%",
 					x2: "0%",
 					y2: "100%",
 					children: [
-						/* @__PURE__ */ o("stop", {
+						/* @__PURE__ */ t("stop", {
 							offset: "0%",
 							style: {
-								stopColor: l.accent,
-								stopOpacity: l.topAlpha
+								stopColor: f.accent,
+								stopOpacity: f.topAlpha
 							}
 						}),
-						/* @__PURE__ */ o("stop", {
+						/* @__PURE__ */ t("stop", {
 							offset: `${S}%`,
 							style: {
-								stopColor: l.accent,
-								stopOpacity: l.upperAlpha
+								stopColor: f.accent,
+								stopOpacity: f.upperAlpha
 							}
 						}),
-						/* @__PURE__ */ o("stop", {
-							offset: `${l.equator}%`,
+						/* @__PURE__ */ t("stop", {
+							offset: `${f.equator}%`,
 							style: {
 								stopColor: w,
 								stopOpacity: 1
 							}
 						}),
-						/* @__PURE__ */ o("stop", {
+						/* @__PURE__ */ t("stop", {
 							offset: `${C}%`,
 							style: {
-								stopColor: l.accent,
+								stopColor: f.accent,
 								stopOpacity: 1
 							}
 						}),
-						/* @__PURE__ */ o("stop", {
+						/* @__PURE__ */ t("stop", {
 							offset: "100%",
 							style: {
 								stopColor: T,
@@ -2493,28 +2499,28 @@ var wt = {
 						})
 					]
 				}),
-				/* @__PURE__ */ s("linearGradient", {
-					id: d,
+				/* @__PURE__ */ n("linearGradient", {
+					id: u,
 					x1: "0%",
 					y1: "0%",
 					x2: "0%",
-					y2: `${l.glossExtent}%`,
+					y2: `${f.glossExtent}%`,
 					children: [
-						/* @__PURE__ */ o("stop", {
+						/* @__PURE__ */ t("stop", {
 							offset: "0%",
 							style: {
 								stopColor: "white",
-								stopOpacity: l.glossTopAlpha
+								stopOpacity: f.glossTopAlpha
 							}
 						}),
-						/* @__PURE__ */ o("stop", {
+						/* @__PURE__ */ t("stop", {
 							offset: "60%",
 							style: {
 								stopColor: "white",
-								stopOpacity: l.glossMidAlpha
+								stopOpacity: f.glossMidAlpha
 							}
 						}),
-						/* @__PURE__ */ o("stop", {
+						/* @__PURE__ */ t("stop", {
 							offset: "100%",
 							style: {
 								stopColor: "white",
@@ -2523,40 +2529,40 @@ var wt = {
 						})
 					]
 				}),
-				/* @__PURE__ */ o("clipPath", {
-					id: f,
-					children: /* @__PURE__ */ o("path", { d: e.bodyPath })
+				/* @__PURE__ */ t("clipPath", {
+					id: d,
+					children: /* @__PURE__ */ t("path", { d: r.bodyPath })
 				})
 			] }),
-			/* @__PURE__ */ o("path", {
-				d: e.bodyPath,
-				fill: `url(#${u})`,
+			/* @__PURE__ */ t("path", {
+				d: r.bodyPath,
+				fill: `url(#${l})`,
 				style: { pointerEvents: "none" }
 			}),
-			/* @__PURE__ */ o("rect", {
+			/* @__PURE__ */ t("rect", {
 				x: "0",
 				y: "0",
 				width: "100",
-				height: l.glossExtent,
-				fill: `url(#${d})`,
-				clipPath: `url(#${f})`,
+				height: f.glossExtent,
+				fill: `url(#${u})`,
+				clipPath: `url(#${d})`,
 				style: { pointerEvents: "none" }
 			}),
-			g.map((e, t) => /* @__PURE__ */ o("path", {
+			g.map((e, n) => /* @__PURE__ */ t("path", {
 				d: e,
 				fill: "none",
 				stroke: "white",
-				strokeOpacity: l.bezelAlpha,
+				strokeOpacity: f.bezelAlpha,
 				strokeWidth: b,
 				strokeLinecap: "round",
 				vectorEffect: "non-scaling-stroke",
 				style: { pointerEvents: "none" }
-			}, `bz-${t}`)),
-			/* @__PURE__ */ o("path", {
-				d: e.bodyPath,
+			}, `bz-${n}`)),
+			/* @__PURE__ */ t("path", {
+				d: r.bodyPath,
 				fill: "none",
 				stroke: "black",
-				strokeOpacity: l.rimAlpha,
+				strokeOpacity: f.rimAlpha,
 				strokeWidth: x,
 				vectorEffect: "non-scaling-stroke",
 				style: { pointerEvents: "none" }
@@ -2564,8 +2570,8 @@ var wt = {
 		] });
 	},
 	zone: "foreground",
-	defaults: kt
-}, Mt = {
+	defaults: jt
+}, Nt = {
 	accent: "#aab3bd",
 	specularity: .6,
 	equator: 50,
@@ -2578,38 +2584,39 @@ var wt = {
 	bezelWidth: 1,
 	rimAlpha: .35,
 	rimWidth: 1
-}, Nt = 240, $ = {
-	spikes: Ze,
-	puffs: $e,
-	bites: tt,
-	scallops: rt,
-	bevel: ct,
-	bevel2: wt,
-	sheen: dt,
-	rivets: pt,
-	shadow: ht,
-	woodgrain: vt,
-	perforations: bt,
-	outline: Et,
-	sunbeams: Ot,
-	aqua: jt,
+}, Pt = 240, $ = {
+	spikes: $e,
+	puffs: tt,
+	bites: rt,
+	scallops: at,
+	bevel: ut,
+	bevel2: Et,
+	sheen: pt,
+	rivets: ht,
+	shadow: _t,
+	woodgrain: bt,
+	perforations: St,
+	outline: Ot,
+	sunbeams: At,
+	aqua: Mt,
 	metal: {
-		Component: ({ sampler: e, boxW: n, boxH: r, variant: i, params: c }) => {
-			if (i !== "solid" && i !== "subtle" && i !== "outline") return null;
-			let l = {
-				...Mt,
+		Component: ({ sampler: r, boxW: i, boxH: o, variant: s, params: c }) => {
+			let l = a(), u = a(), d = a();
+			if (s !== "solid" && s !== "subtle" && s !== "outline") return null;
+			let f = {
+				...Nt,
 				...c
-			}, u = Math.max(0, Math.min(l.specularity, 1)), d = t(), f = t(), p = t(), m = e.totalCss, h = [], g = null;
-			for (let t = 0; t < Nt; t++) {
-				let n = t / Nt * m, r = e.perimeterAt(n);
-				r.ny < 0 ? (g || (g = [], h.push(g)), g.push({
-					x: r.x,
-					y: r.y
+			}, p = Math.max(0, Math.min(f.specularity, 1)), m = r.totalCss, h = [], g = null;
+			for (let e = 0; e < Pt; e++) {
+				let t = e / Pt * m, n = r.perimeterAt(t);
+				n.ny < 0 ? (g || (g = [], h.push(g)), g.push({
+					x: n.x,
+					y: n.y
 				})) : g = null;
 			}
 			if (h.length > 1) {
-				let t = e.perimeterAt(0), n = e.perimeterAt((Nt - 1) / Nt * m);
-				if (t.ny < 0 && n.ny < 0) {
+				let e = r.perimeterAt(0), t = r.perimeterAt((Pt - 1) / Pt * m);
+				if (e.ny < 0 && t.ny < 0) {
 					let e = h.shift();
 					h[h.length - 1].push(...e);
 				}
@@ -2621,51 +2628,51 @@ var wt = {
 				for (let n = 1; n < e.length; n++) t += ` L ${e[n].x.toFixed(3)} ${e[n].y.toFixed(3)}`;
 				_.push(t);
 			}
-			let v = 100 / n, y = 100 / r, b = Math.max(v, y), x = l.bezelWidth * b, S = l.rimWidth * b, C = Math.max(0, l.equator - l.equatorSpread), w = Math.min(100, l.equator + l.equatorSpread), T = 100 - Math.round(u * 85), E = `color-mix(in srgb, ${l.accent} ${T}%, white)`, D = `color-mix(in srgb, ${l.accent} ${l.topDarkness}%, black)`, O = `color-mix(in srgb, ${l.accent} ${l.baseDarkness}%, black)`, k = 100 - Math.round(u * 50), A = 100 - Math.round(u * 30), j = `color-mix(in srgb, ${l.accent} ${k}%, white)`, M = `color-mix(in srgb, ${l.accent} ${A}%, white)`, N = l.glossAlphaTop * u, P = l.bezelAlpha * (.4 + .6 * u), F = l.rimAlpha * (.6 + .4 * u);
-			return /* @__PURE__ */ s(a, { children: [
-				/* @__PURE__ */ s("defs", { children: [
-					/* @__PURE__ */ s("linearGradient", {
-						id: d,
+			let v = 100 / i, y = 100 / o, b = Math.max(v, y), x = f.bezelWidth * b, S = f.rimWidth * b, C = Math.max(0, f.equator - f.equatorSpread), w = Math.min(100, f.equator + f.equatorSpread), T = 100 - Math.round(p * 85), E = `color-mix(in srgb, ${f.accent} ${T}%, white)`, D = `color-mix(in srgb, ${f.accent} ${f.topDarkness}%, black)`, O = `color-mix(in srgb, ${f.accent} ${f.baseDarkness}%, black)`, k = 100 - Math.round(p * 50), A = 100 - Math.round(p * 30), j = `color-mix(in srgb, ${f.accent} ${k}%, white)`, M = `color-mix(in srgb, ${f.accent} ${A}%, white)`, N = f.glossAlphaTop * p, P = f.bezelAlpha * (.4 + .6 * p), F = f.rimAlpha * (.6 + .4 * p);
+			return /* @__PURE__ */ n(e, { children: [
+				/* @__PURE__ */ n("defs", { children: [
+					/* @__PURE__ */ n("linearGradient", {
+						id: l,
 						x1: "0%",
 						y1: "0%",
 						x2: "0%",
 						y2: "100%",
 						children: [
-							/* @__PURE__ */ o("stop", {
+							/* @__PURE__ */ t("stop", {
 								offset: "0%",
 								style: { stopColor: D }
 							}),
-							/* @__PURE__ */ o("stop", {
+							/* @__PURE__ */ t("stop", {
 								offset: `${C}%`,
 								style: { stopColor: j }
 							}),
-							/* @__PURE__ */ o("stop", {
-								offset: `${l.equator}%`,
+							/* @__PURE__ */ t("stop", {
+								offset: `${f.equator}%`,
 								style: { stopColor: E }
 							}),
-							/* @__PURE__ */ o("stop", {
+							/* @__PURE__ */ t("stop", {
 								offset: `${w}%`,
 								style: { stopColor: M }
 							}),
-							/* @__PURE__ */ o("stop", {
+							/* @__PURE__ */ t("stop", {
 								offset: "100%",
 								style: { stopColor: O }
 							})
 						]
 					}),
-					/* @__PURE__ */ s("linearGradient", {
-						id: f,
+					/* @__PURE__ */ n("linearGradient", {
+						id: u,
 						x1: "0%",
 						y1: "0%",
 						x2: "0%",
-						y2: `${l.glossExtent}%`,
-						children: [/* @__PURE__ */ o("stop", {
+						y2: `${f.glossExtent}%`,
+						children: [/* @__PURE__ */ t("stop", {
 							offset: "0%",
 							style: {
 								stopColor: "white",
 								stopOpacity: N
 							}
-						}), /* @__PURE__ */ o("stop", {
+						}), /* @__PURE__ */ t("stop", {
 							offset: "100%",
 							style: {
 								stopColor: "white",
@@ -2673,26 +2680,26 @@ var wt = {
 							}
 						})]
 					}),
-					/* @__PURE__ */ o("clipPath", {
-						id: p,
-						children: /* @__PURE__ */ o("path", { d: e.bodyPath })
+					/* @__PURE__ */ t("clipPath", {
+						id: d,
+						children: /* @__PURE__ */ t("path", { d: r.bodyPath })
 					})
 				] }),
-				/* @__PURE__ */ o("path", {
-					d: e.bodyPath,
-					fill: `url(#${d})`,
+				/* @__PURE__ */ t("path", {
+					d: r.bodyPath,
+					fill: `url(#${l})`,
 					style: { pointerEvents: "none" }
 				}),
-				N > 0 && /* @__PURE__ */ o("rect", {
+				N > 0 && /* @__PURE__ */ t("rect", {
 					x: "0",
 					y: "0",
 					width: "100",
-					height: l.glossExtent,
-					fill: `url(#${f})`,
-					clipPath: `url(#${p})`,
+					height: f.glossExtent,
+					fill: `url(#${u})`,
+					clipPath: `url(#${d})`,
 					style: { pointerEvents: "none" }
 				}),
-				_.map((e, t) => /* @__PURE__ */ o("path", {
+				_.map((e, n) => /* @__PURE__ */ t("path", {
 					d: e,
 					fill: "none",
 					stroke: "white",
@@ -2701,9 +2708,9 @@ var wt = {
 					strokeLinecap: "round",
 					vectorEffect: "non-scaling-stroke",
 					style: { pointerEvents: "none" }
-				}, `bz-${t}`)),
-				/* @__PURE__ */ o("path", {
-					d: e.bodyPath,
+				}, `bz-${n}`)),
+				/* @__PURE__ */ t("path", {
+					d: r.bodyPath,
 					fill: "none",
 					stroke: "black",
 					strokeOpacity: F,
@@ -2714,44 +2721,45 @@ var wt = {
 			] });
 		},
 		zone: "foreground",
-		defaults: Mt
+		defaults: Nt
 	}
 };
 //#endregion
 //#region src/components/Badge/Badge.tsx
-function Pt(e) {
+function Ft(e) {
 	return e.as ? e.as : e.href ? "a" : e.onClick ? "button" : "span";
 }
-function Ft(l) {
-	let { shape: u = "pill", tone: d = "neutral", variant: f = "outline", size: p = "sm", onClick: m, onRemove: h, removeLabel: g, href: _, children: v, className: y, shapeParams: b, bloat: x, padding: S, style: C, breakStyle: w, crawl: T, base: E, baseParams: D, effects: O } = l, k = l["aria-label"], A = Pt(l), [j, M] = i(!1), [N, P] = i(0), F = pe[u] ?? pe.pill, ee = pe[u] ? u : "pill", I = F.Component, te = {
-		...F.defaults ?? {},
-		...b ?? {}
-	};
-	e(() => {
-		if (!T) {
-			P(0);
+function It(u) {
+	let { shape: d = "pill", tone: f = "neutral", variant: p = "outline", size: m = "sm", onClick: h, onRemove: g, removeLabel: _, href: v, children: y, className: b, shapeParams: x, bloat: S, padding: C, style: w, breakStyle: T, crawl: E, base: D, baseParams: O, effects: k } = u, A = u["aria-label"], j = Ft(u), [M, N] = c(!1), [P, F] = c(0), I = me[d] ?? me.pill, ee = me[d] ? d : "pill", te = I.Component, ne = {
+		...I.defaults ?? {},
+		...x ?? {}
+	}, L = s(null), R = r((e) => {
+		let t = typeof E == "number" ? E : .2, n = L.current;
+		L.current = e, n !== null && F((r) => (r + t * (e - n) / 1e3) % 1), R.request();
+	}, { onResume: () => {
+		L.current = null;
+	} });
+	i(() => {
+		if (!E) {
+			F(0);
 			return;
 		}
-		let e = typeof T == "number" ? T : .2, t = 0, n = performance.now(), r = (i) => {
-			let a = (i - n) / 1e3;
-			n = i, P((t) => (t + e * a) % 1), t = requestAnimationFrame(r);
-		};
-		return t = requestAnimationFrame(r), () => cancelAnimationFrame(t);
-	}, [T]);
-	let ne = [c.badge, y].filter(Boolean).join(" "), re = !E && F.compose ? F.compose(te) : null, ie = E ?? re?.base, L = ie ? Ye[ie] : null, ae = E ? D : re?.baseParams, oe = E ? O : re?.effects ?? O, R = L ? {
-		...L.defaults ?? {},
-		...ae ?? {}
-	} : null, se = r(null), [z, ce] = i({
+		return L.current = null, R.request(), () => R.cancel();
+	}, [E, R]);
+	let re = [l.badge, b].filter(Boolean).join(" "), ie = !D && I.compose ? I.compose(ne) : null, ae = D ?? ie?.base, z = ae ? Ze[ae] : null, oe = D ? O : ie?.baseParams, se = D ? k : ie?.effects ?? k, ce = z ? {
+		...z.defaults ?? {},
+		...oe ?? {}
+	} : null, B = s(null), [V, le] = c({
 		w: 100,
 		h: 100
 	});
-	n(() => {
-		if (!L) return;
-		let e = se.current;
+	o(() => {
+		if (!z) return;
+		let e = B.current;
 		if (!e) return;
 		let t = () => {
 			let t = e.getBoundingClientRect();
-			t.width > 0 && t.height > 0 && ce({
+			t.width > 0 && t.height > 0 && le({
 				w: t.width,
 				h: t.height
 			});
@@ -2759,37 +2767,37 @@ function Ft(l) {
 		if (t(), typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
-	}, [L]);
-	let B = L ? L.build(R, z.w, z.h) : null, V = L ? (typeof L.insets == "function" ? L.insets(R) : L.insets) ?? {
+	}, [z]);
+	let H = z ? z.build(ce, V.w, V.h) : null, U = z ? (typeof z.insets == "function" ? z.insets(ce) : z.insets) ?? {
 		top: 0,
 		right: 0,
 		bottom: 0,
 		left: 0
-	} : typeof F.insets == "function" ? F.insets(te) : F.insets, le = {
-		className: ne,
+	} : typeof I.insets == "function" ? I.insets(ne) : I.insets, ue = {
+		className: re,
 		style: {
-			"--badge-inset-top": `${V.top}px`,
-			"--badge-inset-right": `${V.right}px`,
-			"--badge-inset-bottom": `${V.bottom}px`,
-			"--badge-inset-left": `${V.left}px`,
-			...S !== void 0 && { padding: typeof S == "number" ? `${S}px` : S },
-			...w !== void 0 && {
-				boxDecorationBreak: w,
-				WebkitBoxDecorationBreak: w
+			"--badge-inset-top": `${U.top}px`,
+			"--badge-inset-right": `${U.right}px`,
+			"--badge-inset-bottom": `${U.bottom}px`,
+			"--badge-inset-left": `${U.left}px`,
+			...C !== void 0 && { padding: typeof C == "number" ? `${C}px` : C },
+			...T !== void 0 && {
+				boxDecorationBreak: T,
+				WebkitBoxDecorationBreak: T
 			},
-			...C
+			...w
 		},
-		"data-shape": L ? "compose" : ee,
-		"data-tone": d,
-		"data-variant": f,
-		"data-size": p,
-		"data-focused": j ? "true" : void 0,
-		onFocus: () => M(!0),
-		onBlur: () => M(!1),
-		"aria-label": k
-	}, H = (() => {
-		if (!L || !B) return null;
-		let e = (oe ?? []).map((e) => {
+		"data-shape": z ? "compose" : ee,
+		"data-tone": f,
+		"data-variant": p,
+		"data-size": m,
+		"data-focused": M ? "true" : void 0,
+		onFocus: () => N(!0),
+		onBlur: () => N(!1),
+		"aria-label": A
+	}, W = (() => {
+		if (!z || !H) return null;
+		let e = (se ?? []).map((e) => {
 			let t = $[e.type];
 			if (!t?.offsetAt) return null;
 			let n = {
@@ -2800,16 +2808,16 @@ function Ft(l) {
 				offsetAt: t.offsetAt,
 				params: n
 			};
-		}).filter(Boolean), t = x ?? 0;
-		if (e.length === 0 && t === 0) return B;
-		let n = 100 / z.w, r = 100 / z.h, i = B.totalCss, a = (a) => {
-			let o = (a % i + i) % i, s = B.perimeterAt(o), c = s.nx * t, l = s.ny * t;
+		}).filter(Boolean), t = S ?? 0;
+		if (e.length === 0 && t === 0) return H;
+		let n = 100 / V.w, r = 100 / V.h, i = H.totalCss, a = (a) => {
+			let o = (a % i + i) % i, s = H.perimeterAt(o), c = s.nx * t, l = s.ny * t;
 			for (let t of e) {
 				let e = t.offsetAt(o, {
 					params: t.params,
-					phase: N,
+					phase: P,
 					totalCss: i,
-					perimeterAt: B.perimeterAt
+					perimeterAt: H.perimeterAt
 				});
 				c += e.dx, l += e.dy;
 			}
@@ -2835,83 +2843,83 @@ function Ft(l) {
 			},
 			totalCss: i
 		};
-	})(), U = (oe ?? []).filter((e) => $[e.type]?.Component), ue = U.filter((e) => ($[e.type].zone ?? "foreground") === "background"), de = U.filter((e) => ($[e.type].zone ?? "foreground") === "foreground"), W = U.filter((e) => $[e.type].zone === "mask"), fe = `badge-mask-${t().replace(/:/g, "")}`, G = (e, t) => {
-		let n = $[e.type], r = n?.Component;
-		if (!r || !H) return null;
-		let i = {
-			...n.defaults ?? {},
+	})(), de = (se ?? []).filter((e) => $[e.type]?.Component), fe = de.filter((e) => ($[e.type].zone ?? "foreground") === "background"), pe = de.filter((e) => ($[e.type].zone ?? "foreground") === "foreground"), G = de.filter((e) => $[e.type].zone === "mask"), he = `badge-mask-${a().replace(/:/g, "")}`, ge = (e, n) => {
+		let r = $[e.type], i = r?.Component;
+		if (!i || !W) return null;
+		let a = {
+			...r.defaults ?? {},
 			...e.params ?? {}
 		};
-		return /* @__PURE__ */ o(r, {
-			sampler: H,
-			boxW: z.w,
-			boxH: z.h,
-			variant: f,
-			params: i,
-			phase: N
-		}, `${e.type}-${t}`);
-	}, K = /* @__PURE__ */ s(a, { children: [L && H ? /* @__PURE__ */ s("svg", {
-		ref: se,
-		className: c.deco,
+		return /* @__PURE__ */ t(i, {
+			sampler: W,
+			boxW: V.w,
+			boxH: V.h,
+			variant: p,
+			params: a,
+			phase: P
+		}, `${e.type}-${n}`);
+	}, K = /* @__PURE__ */ n(e, { children: [z && W ? /* @__PURE__ */ n("svg", {
+		ref: B,
+		className: l.deco,
 		viewBox: "0 0 100 100",
 		preserveAspectRatio: "none",
 		"aria-hidden": "true",
 		children: [
-			W.length > 0 && /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ s("mask", {
-				id: fe,
+			G.length > 0 && /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("mask", {
+				id: he,
 				maskUnits: "userSpaceOnUse",
 				x: "-10",
 				y: "-10",
 				width: "120",
 				height: "120",
-				children: [/* @__PURE__ */ o("rect", {
+				children: [/* @__PURE__ */ t("rect", {
 					x: "-10",
 					y: "-10",
 					width: "120",
 					height: "120",
 					fill: "white"
-				}), W.map(G)]
+				}), G.map(ge)]
 			}) }),
-			ue.map(G),
-			/* @__PURE__ */ s("g", {
-				...W.length > 0 ? { mask: `url(#${fe})` } : {},
-				children: [(f === "solid" || f === "subtle") && /* @__PURE__ */ o("path", {
+			fe.map(ge),
+			/* @__PURE__ */ n("g", {
+				...G.length > 0 ? { mask: `url(#${he})` } : {},
+				children: [(p === "solid" || p === "subtle") && /* @__PURE__ */ t("path", {
 					className: "badge-fill",
-					d: H.bodyPath
-				}), (f === "outline" || f === "solid") && /* @__PURE__ */ o("path", {
+					d: W.bodyPath
+				}), (p === "outline" || p === "solid") && /* @__PURE__ */ t("path", {
 					className: "badge-stroke",
-					d: H.bodyPath
+					d: W.bodyPath
 				})]
 			}),
-			de.map(G)
+			pe.map(ge)
 		]
-	}) : F.renderMode !== "css" && I ? /* @__PURE__ */ o("svg", {
-		className: c.deco,
+	}) : I.renderMode !== "css" && te ? /* @__PURE__ */ t("svg", {
+		className: l.deco,
 		viewBox: "0 0 100 100",
-		preserveAspectRatio: F.stretches === !1 ? "xMidYMid meet" : "none",
+		preserveAspectRatio: I.stretches === !1 ? "xMidYMid meet" : "none",
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ o(I, {
-			variant: f,
-			focused: j,
-			params: te,
-			phase: N
+		children: /* @__PURE__ */ t(te, {
+			variant: p,
+			focused: M,
+			params: ne,
+			phase: P
 		})
-	}) : null, /* @__PURE__ */ s("span", {
-		className: c.content,
-		children: [/* @__PURE__ */ o("span", { children: v }), h && /* @__PURE__ */ o("button", {
+	}) : null, /* @__PURE__ */ n("span", {
+		className: l.content,
+		children: [/* @__PURE__ */ t("span", { children: y }), g && /* @__PURE__ */ t("button", {
 			type: "button",
-			className: c.remove,
-			"aria-label": g ?? "Remove",
+			className: l.remove,
+			"aria-label": _ ?? "Remove",
 			onClick: (e) => {
-				e.stopPropagation(), h();
+				e.stopPropagation(), g();
 			},
-			children: /* @__PURE__ */ o("svg", {
+			children: /* @__PURE__ */ t("svg", {
 				viewBox: "0 0 10 10",
 				width: "10",
 				height: "10",
 				"aria-hidden": "true",
 				focusable: "false",
-				children: /* @__PURE__ */ o("path", {
+				children: /* @__PURE__ */ t("path", {
 					d: "M 2 2 L 8 8 M 8 2 L 2 8",
 					stroke: "currentColor",
 					strokeWidth: "1.6",
@@ -2921,22 +2929,22 @@ function Ft(l) {
 			})
 		})]
 	})] });
-	return A === "button" ? /* @__PURE__ */ o("button", {
+	return j === "button" ? /* @__PURE__ */ t("button", {
 		type: "button",
-		...le,
-		onClick: m,
+		...ue,
+		onClick: h,
 		children: K
-	}) : A === "a" ? /* @__PURE__ */ o("a", {
-		href: _,
-		...le,
-		onClick: m,
+	}) : j === "a" ? /* @__PURE__ */ t("a", {
+		href: v,
+		...ue,
+		onClick: h,
 		children: K
-	}) : /* @__PURE__ */ o("span", {
-		...le,
+	}) : /* @__PURE__ */ t("span", {
+		...ue,
 		children: K
 	});
 }
 //#endregion
-export { qe as n, Ft as t };
+export { Je as n, It as t };
 
-//# sourceMappingURL=Badge-DZQqAV4d.js.map
+//# sourceMappingURL=Badge-9dPfvYOk.js.map