haze-ui 1.24.1 → 1.26.0

package/dist/components/TokenCounter/TokenCounter.js

@@ -1,31 +1,33 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                       */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/TokenCounter/TokenCounter.tsx
-var r = "haze-TokenCounter__wrapper", i = "haze-TokenCounter__bar", a = "haze-TokenCounter__fill", o = "haze-TokenCounter__fillNormal", s = "haze-TokenCounter__fillWarning", c = "haze-TokenCounter__fillDanger", l = "haze-TokenCounter__info", u = "haze-TokenCounter__count";
-function d({ used: d, max: f, label: p, className: m }) {
-	let h = f > 0 ? Math.min(100, d / f * 100) : 0, g = h > 90 ? c : h > 70 ? s : o;
-	return /* @__PURE__ */ n("div", {
-		className: e([r, m]),
-		children: [/* @__PURE__ */ n("div", {
-			className: e([l]),
-			children: [/* @__PURE__ */ t("span", { children: p || "Tokens" }), /* @__PURE__ */ n("span", {
-				className: e([u]),
+var i = "haze-TokenCounter__wrapper", a = "haze-TokenCounter__bar", o = "haze-TokenCounter__fill", s = "haze-TokenCounter__fillNormal", c = "haze-TokenCounter__fillWarning", l = "haze-TokenCounter__fillDanger", u = "haze-TokenCounter__info", d = "haze-TokenCounter__count";
+function f({ used: f, max: p, label: m, className: h }) {
+	let g = p > 0 ? Math.min(100, f / p * 100) : 0, _ = g > 90 ? l : g > 70 ? c : s, v = t("tokenCounter");
+	return /* @__PURE__ */ r("div", {
+		className: e([i, h]),
+		children: [/* @__PURE__ */ r("div", {
+			className: e([u]),
+			children: [/* @__PURE__ */ n("span", { children: m || v.label }), /* @__PURE__ */ r("span", {
+				className: e([d]),
 				children: [
-					d.toLocaleString(),
+					f.toLocaleString(),
 					" / ",
-					f.toLocaleString()
+					p.toLocaleString()
 				]
 			})]
-		}), /* @__PURE__ */ t("div", {
-			className: e([i]),
-			children: /* @__PURE__ */ t("div", {
-				style: { width: `${h}%` },
-				className: e([a, g])
+		}), /* @__PURE__ */ n("div", {
+			className: e([a]),
+			children: /* @__PURE__ */ n("div", {
+				style: { width: `${g}%` },
+				className: e([o, _])
 			})
 		})]
 	});
 }
 //#endregion
-export { d as default };
+export { f as default };

package/dist/components/TokenCounter/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./TokenCounter.js";
 export { e as TokenCounter };

package/dist/components/ToolCallCard/ToolCallCard.js

@@ -1,54 +1,57 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                       */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/ToolCallCard/ToolCallCard.tsx
-var r = "haze-ToolCallCard__card", i = "haze-ToolCallCard__header", a = "haze-ToolCallCard__statusIcon", o = "haze-ToolCallCard__statusPending", s = "haze-ToolCallCard__statusRunning", c = "haze-ToolCallCard__statusDone", l = "haze-ToolCallCard__statusError", u = "haze-ToolCallCard__body", d = "haze-ToolCallCard__section", f = "haze-ToolCallCard__sectionLabel", p = "haze-ToolCallCard__content", m = {
-	pending: o,
-	running: s,
-	done: c,
-	error: l
-}, h = {
-	pending: "Pending",
-	running: "Running...",
-	done: "Done",
-	error: "Error"
+var i = "haze-ToolCallCard__card", a = "haze-ToolCallCard__header", o = "haze-ToolCallCard__statusIcon", s = "haze-ToolCallCard__statusPending", c = "haze-ToolCallCard__statusRunning", l = "haze-ToolCallCard__statusDone", u = "haze-ToolCallCard__statusError", d = "haze-ToolCallCard__body", f = "haze-ToolCallCard__section", p = "haze-ToolCallCard__sectionLabel", m = "haze-ToolCallCard__content", h = {
+	pending: s,
+	running: c,
+	done: l,
+	error: u
 };
-function g({ name: o, input: s, output: c, status: l = "pending", className: g }) {
-	return /* @__PURE__ */ n("div", {
-		className: e([r, g]),
-		children: [/* @__PURE__ */ n("div", {
-			className: e([i]),
+function g({ name: s, input: c, output: l, status: u = "pending", className: g }) {
+	let _ = t("toolCallCard"), v = {
+		pending: _.pending,
+		running: _.running,
+		done: _.done,
+		error: _.error
+	};
+	return /* @__PURE__ */ r("div", {
+		className: e([i, g]),
+		children: [/* @__PURE__ */ r("div", {
+			className: e([a]),
 			children: [
-				/* @__PURE__ */ t("span", { className: e([a, m[l]]) }),
-				/* @__PURE__ */ t("span", { children: o }),
-				/* @__PURE__ */ t("span", {
+				/* @__PURE__ */ n("span", { className: e([o, h[u]]) }),
+				/* @__PURE__ */ n("span", { children: s }),
+				/* @__PURE__ */ n("span", {
 					style: {
-						marginLeft: "auto",
+						marginInlineStart: "auto",
 						color: "var(--haze-color-text-muted)"
 					},
-					children: h[l]
+					children: v[u]
 				})
 			]
-		}), (s || c) && /* @__PURE__ */ n("div", {
-			className: e([u]),
-			children: [s && /* @__PURE__ */ n("div", {
-				className: e([d]),
-				children: [/* @__PURE__ */ t("div", {
-					className: e([f]),
-					children: "Input"
-				}), /* @__PURE__ */ t("div", {
+		}), (c || l) && /* @__PURE__ */ r("div", {
+			className: e([d]),
+			children: [c && /* @__PURE__ */ r("div", {
+				className: e([f]),
+				children: [/* @__PURE__ */ n("div", {
 					className: e([p]),
-					children: s
+					children: _.inputLabel
+				}), /* @__PURE__ */ n("div", {
+					className: e([m]),
+					children: c
 				})]
-			}), c && /* @__PURE__ */ n("div", {
-				className: e([d]),
-				children: [/* @__PURE__ */ t("div", {
-					className: e([f]),
-					children: "Output"
-				}), /* @__PURE__ */ t("div", {
+			}), l && /* @__PURE__ */ r("div", {
+				className: e([f]),
+				children: [/* @__PURE__ */ n("div", {
 					className: e([p]),
-					children: c
+					children: _.outputLabel
+				}), /* @__PURE__ */ n("div", {
+					className: e([m]),
+					children: l
 				})]
 			})]
 		})]

package/dist/components/ToolCallCard/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./ToolCallCard.js";
 export { e as ToolCallCard };

package/dist/components/Toolbar/Toolbar.js

@@ -0,0 +1,60 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { getEnabledMenuItems as t, useRovingTabindex as n } from "../../utils/menuKeyboard.js";
+import { ToolbarProvider as r } from "./ToolbarContext.js";
+/* empty css                  */
+import { jsx as i } from "react/jsx-runtime";
+import { useCallback as a, useRef as o } from "react";
+//#region src/lib/components/Toolbar/Toolbar.tsx
+var s = "[data-haze-toolbar-item]:not([disabled])", c = "haze-Toolbar__toolbar", l = "haze-Toolbar__vertical";
+function u(e, n) {
+	return a((r) => {
+		let i = e === "horizontal" ? "ArrowRight" : "ArrowDown", a = e === "horizontal" ? "ArrowLeft" : "ArrowUp";
+		if (r.key !== i && r.key !== a && r.key !== "Home" && r.key !== "End") return;
+		let o = t(n.current, s);
+		if (o.length === 0) return;
+		let c = o.indexOf(document.activeElement), l = (e) => o[e]?.focus();
+		switch (r.preventDefault(), r.key) {
+			case i:
+				l((c + 1) % o.length);
+				return;
+			case a:
+				l((c - 1 + o.length) % o.length);
+				return;
+			case "Home":
+				l(0);
+				return;
+			case "End":
+				l(o.length - 1);
+				return;
+		}
+	}, [e, n]);
+}
+function d({ orientation: t = "horizontal", className: a, children: d, ...f }) {
+	let p = o(null);
+	n({
+		menuRef: p,
+		active: !0,
+		selector: s
+	});
+	let m = u(t, p);
+	return /* @__PURE__ */ i(r, {
+		value: t,
+		children: i("div", {
+			ref: p,
+			role: "toolbar",
+			"aria-orientation": t,
+			onKeyDown: m,
+			...f,
+			className: e([
+				c,
+				t === "vertical" && l,
+				a
+			]),
+			children: d
+		})
+	});
+}
+//#endregion
+export { d as default };

package/dist/components/Toolbar/ToolbarButton.js

@@ -0,0 +1,26 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { base as t, sizes as n, squareSizes as r, variants as i } from "../Button/styles.js";
+/* empty css                        */
+import { jsx as a } from "react/jsx-runtime";
+//#region src/lib/components/Toolbar/ToolbarButton.tsx
+var o = "haze-ToolbarButton__toolbarItem";
+function s({ variant: s = "ghost", size: c = "md", square: l = !1, className: u, ...d }) {
+	let f = l ? r[c] : n[c];
+	return /* @__PURE__ */ a("button", {
+		type: "button",
+		"data-haze-toolbar-item": "",
+		tabIndex: -1,
+		...d,
+		className: e([
+			t,
+			i[s],
+			f,
+			o,
+			u
+		])
+	});
+}
+//#endregion
+export { s as default };

package/dist/components/Toolbar/ToolbarContext.js

@@ -0,0 +1,9 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+//#region src/lib/components/Toolbar/ToolbarContext.ts
+var n = e(void 0), r = n.Provider;
+function i() {
+	return t(n) ?? "horizontal";
+}
+//#endregion
+export { r as ToolbarProvider, i as useToolbarOrientation };

package/dist/components/Toolbar/ToolbarSeparator.js

@@ -0,0 +1,23 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { useToolbarOrientation as t } from "./ToolbarContext.js";
+/* empty css                           */
+import { jsx as n } from "react/jsx-runtime";
+//#region src/lib/components/Toolbar/ToolbarSeparator.tsx
+var r = "haze-ToolbarSeparator__separator", i = "haze-ToolbarSeparator__horizontalRule";
+function a({ className: a, ...o }) {
+	let s = t() === "vertical";
+	return /* @__PURE__ */ n("div", {
+		role: "separator",
+		"aria-orientation": s ? "horizontal" : "vertical",
+		...o,
+		className: e([
+			r,
+			s && i,
+			a
+		])
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/Toolbar/index.js

@@ -0,0 +1,5 @@
+"use client";
+import e from "./Toolbar.js";
+import t from "./ToolbarButton.js";
+import n from "./ToolbarSeparator.js";
+export { e as Toolbar, t as ToolbarButton, n as ToolbarSeparator };

package/dist/components/Tooltip/Tooltip.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { floatingPlacementClasses as t, useFloating as n, useFloatingPosition as r } from "../../utils/floating.js";
 /* empty css                  */

package/dist/components/Tooltip/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./Tooltip.js";
 export { e as Tooltip };

package/dist/components/Tour/Tour.js

@@ -0,0 +1,198 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { Presence as t } from "../../utils/presence.js";
+import { computeFloatingPosition as n, resolvePadding as r } from "../../utils/collision.js";
+import { formatString as i } from "../LocaleProvider/locale.js";
+import { useStrings as a } from "../LocaleProvider/useStrings.js";
+/* empty css               */
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useCallback as c, useEffect as l, useId as u, useRef as d, useState as f } from "react";
+import { useControl as p } from "react-use-control";
+import { createPortal as m } from "react-dom";
+//#region src/lib/components/Tour/Tour.tsx
+var h = 8, g = 16;
+function _(e) {
+	let { target: t } = e;
+	if (typeof t == "function") return t();
+	try {
+		return document.querySelector(t);
+	} catch {
+		return null;
+	}
+}
+var v = "haze-Tour__overlay", y = "haze-Tour__spotlight", b = "haze-Tour__mask", ee = "haze-Tour__card", te = "haze-Tour__centeredCard", ne = "haze-Tour__titleStyle", re = "haze-Tour__bodyStyle", x = "haze-Tour__footerStyle", S = "haze-Tour__counterStyle", C = "haze-Tour__btn", w = "haze-Tour__subtleBtn", ie = "haze-Tour__primaryBtn";
+function T({ steps: T, open: E, current: D, onClose: O, onStepChange: k, maskClosable: A = !1, className: j, ...M }) {
+	let [N, P] = p(E, !1), [F, I] = p(D, 0), L = a("tour"), R = `haze-tour-title-${u()}`, z = `haze-tour-step-${u()}`, B = T.length, V = Math.min(Math.max(F, 0), Math.max(B - 1, 0)), H = B > 0 ? T[V] : void 0, U = V >= B - 1, W = H?.placement ?? "bottom", G = i(L.stepOf, {
+		current: V + 1,
+		total: B
+	}), [K, q] = f(N);
+	N !== K && (q(N), N && D === void 0 && I(0));
+	let J = d(null), Y = d(-1), [X, ae] = f(null), Z = d(null), Q = c((e) => {
+		P(!1), O?.(e);
+	}, [O, P]), $ = c((e) => {
+		I(e), k?.(e);
+	}, [k, I]);
+	return l(() => {
+		if (!N) return;
+		let e = B > 0 ? T[V] : void 0, t = J.current;
+		if (!e || !t) return;
+		let i = _(e);
+		i?.scrollIntoView({ block: "nearest" });
+		let a = (e) => {
+			let t = Z.current;
+			(t === null != (e === null) || t !== null && e !== null && (t.top !== e.top || t.left !== e.left || t.width !== e.width || t.height !== e.height)) && (Z.current = e, ae(e));
+		}, o = () => {
+			let e = i?.getBoundingClientRect();
+			if (!i || !e || e.width === 0 && e.height === 0) {
+				t.style.top = "", t.style.left = "", a(null);
+				return;
+			}
+			let o = t.getBoundingClientRect(), { top: s, left: c } = n({
+				trigger: e,
+				panel: {
+					width: o.width,
+					height: o.height
+				},
+				viewport: {
+					width: window.innerWidth,
+					height: window.innerHeight
+				},
+				placement: W,
+				gap: {
+					below: g,
+					above: g,
+					before: g,
+					after: g
+				},
+				strategy: {
+					flip: !0,
+					shift: !0,
+					padding: r()
+				}
+			});
+			t.style.top = `${s}px`, t.style.left = `${c}px`, a({
+				top: e.top - h,
+				left: e.left - h,
+				width: e.width + 16,
+				height: e.height + 16
+			});
+		};
+		o();
+		let s = 0, c = () => {
+			s ||= requestAnimationFrame(() => {
+				s = 0, o();
+			});
+		};
+		return window.addEventListener("resize", c), window.addEventListener("scroll", c, !0), () => {
+			s && cancelAnimationFrame(s), window.removeEventListener("resize", c), window.removeEventListener("scroll", c, !0);
+		};
+	}, [
+		N,
+		T,
+		V,
+		B,
+		W
+	]), l(() => {
+		if (!N) {
+			Y.current = -1;
+			return;
+		}
+		Y.current !== V && (Y.current = V, J.current?.focus());
+	}, [N, V]), l(() => {
+		if (!N || B === 0) return;
+		let e = (e) => {
+			if (e.defaultPrevented) return;
+			if (e.key === "Escape") {
+				Q("skip");
+				return;
+			}
+			let t = e.target;
+			t instanceof HTMLElement && (t.isContentEditable || t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT") || (e.key === "ArrowRight" && !U ? (e.preventDefault(), $(V + 1)) : e.key === "ArrowLeft" && V > 0 && (e.preventDefault(), $(V - 1)));
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		N,
+		B,
+		V,
+		U,
+		Q,
+		$
+	]), !H || typeof document > "u" ? null : m(/* @__PURE__ */ o(t, {
+		present: N,
+		children: s("div", {
+			onClick: A ? (e) => {
+				N && e.target === e.currentTarget && Q("skip");
+			} : void 0,
+			className: e([v]),
+			children: [X === null ? /* @__PURE__ */ o("div", {
+				"aria-hidden": "true",
+				className: e([b])
+			}) : /* @__PURE__ */ o("div", {
+				"data-haze-tour-spotlight": "",
+				"aria-hidden": "true",
+				style: {
+					top: X.top,
+					left: X.left,
+					width: X.width,
+					height: X.height
+				},
+				className: e([y])
+			}), /* @__PURE__ */ s("div", {
+				ref: J,
+				role: "dialog",
+				"aria-modal": "false",
+				"aria-labelledby": H.title === void 0 ? z : R,
+				tabIndex: -1,
+				...M,
+				className: e([
+					ee,
+					X === null && te,
+					j
+				]),
+				children: [
+					H.title !== void 0 && /* @__PURE__ */ o("h2", {
+						id: R,
+						className: e([ne]),
+						children: H.title
+					}),
+					/* @__PURE__ */ o("div", {
+						className: e([re]),
+						children: H.content
+					}),
+					/* @__PURE__ */ s("div", {
+						className: e([x]),
+						children: [
+							/* @__PURE__ */ o("span", {
+								id: z,
+								className: e([S]),
+								children: G
+							}),
+							/* @__PURE__ */ o("button", {
+								type: "button",
+								onClick: () => Q("skip"),
+								className: e([C, w]),
+								children: L.skip
+							}),
+							/* @__PURE__ */ o("button", {
+								type: "button",
+								disabled: V === 0,
+								onClick: () => $(V - 1),
+								className: e([C, w]),
+								children: L.back
+							}),
+							/* @__PURE__ */ o("button", {
+								type: "button",
+								onClick: () => U ? Q("done") : $(V + 1),
+								className: e([C, ie]),
+								children: U ? L.done : L.next
+							})
+						]
+					})
+				]
+			})]
+		})
+	}), document.body);
+}
+//#endregion
+export { T as default };

package/dist/components/Tour/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./Tour.js";
+export { e as Tour };

package/dist/components/Transfer/Transfer.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./TransferCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";

package/dist/components/Transfer/TransferCore.js

@@ -1,90 +1,85 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { formatString as t } from "../LocaleProvider/locale.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
 /* empty css                       */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useState as r } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useState as a } from "react";
 //#region src/lib/components/Transfer/TransferCore.tsx
-var i = "haze-TransferCore__container", a = "haze-TransferCore__panel", o = "haze-TransferCore__panelHeader", s = "haze-TransferCore__panelBody", c = "haze-TransferCore__itemStyle", l = "haze-TransferCore__actions", u = "haze-TransferCore__actionBtn";
-function d({ dataSource: d, value: f, onChange: p, className: m, ...h }) {
-	let [g, _] = r([]), [v, y] = r([]), b = d.filter((e) => !f.includes(e.key)), x = d.filter((e) => f.includes(e.key)), S = (e) => {
-		_((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
-	}, C = (e) => {
+var o = "haze-TransferCore__container", s = "haze-TransferCore__panel", c = "haze-TransferCore__panelHeader", l = "haze-TransferCore__panelBody", u = "haze-TransferCore__itemStyle", d = "haze-TransferCore__actions", f = "haze-TransferCore__actionBtn";
+function p({ dataSource: p, value: m, onChange: h, className: g, ..._ }) {
+	let [v, y] = a([]), [b, x] = a([]), S = n("transfer"), C = p.filter((e) => !m.includes(e.key)), w = p.filter((e) => m.includes(e.key)), T = (e) => {
 		y((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
-	}, w = () => {
-		g.length !== 0 && (p([...f, ...g], "right", g), _([]));
-	}, T = () => {
-		v.length !== 0 && (p(f.filter((e) => !v.includes(e)), "left", v), y([]));
+	}, E = (e) => {
+		x((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	}, D = () => {
+		v.length !== 0 && (h([...m, ...v], "right", v), y([]));
+	}, O = () => {
+		b.length !== 0 && (h(m.filter((e) => !b.includes(e)), "left", b), x([]));
 	};
-	return /* @__PURE__ */ n("div", {
-		...h,
-		className: e([i, m]),
+	return /* @__PURE__ */ i("div", {
+		..._,
+		className: e([o, g]),
 		children: [
-			/* @__PURE__ */ n("div", {
-				className: e([a]),
-				children: [/* @__PURE__ */ n("div", {
-					className: e([o]),
-					children: [
-						"Source (",
-						b.length,
-						")"
-					]
-				}), /* @__PURE__ */ t("div", {
-					className: e([s]),
-					children: b.map((r) => /* @__PURE__ */ n("label", {
-						className: e([c]),
-						children: [/* @__PURE__ */ t("input", {
+			/* @__PURE__ */ i("div", {
+				className: e([s]),
+				children: [/* @__PURE__ */ r("div", {
+					className: e([c]),
+					children: t(S.source, { count: C.length })
+				}), /* @__PURE__ */ r("div", {
+					className: e([l]),
+					children: C.map((t) => /* @__PURE__ */ i("label", {
+						className: e([u]),
+						children: [/* @__PURE__ */ r("input", {
 							type: "checkbox",
-							checked: g.includes(r.key),
-							disabled: r.disabled,
-							onChange: () => S(r.key),
-							"aria-label": r.title
-						}), r.title]
-					}, r.key))
+							checked: v.includes(t.key),
+							disabled: t.disabled,
+							onChange: () => T(t.key),
+							"aria-label": t.title
+						}), t.title]
+					}, t.key))
 				})]
 			}),
-			/* @__PURE__ */ n("div", {
-				className: e([l]),
-				children: [/* @__PURE__ */ t("button", {
+			/* @__PURE__ */ i("div", {
+				className: e([d]),
+				children: [/* @__PURE__ */ r("button", {
 					type: "button",
-					disabled: g.length === 0,
-					onClick: w,
-					"aria-label": ">",
-					className: e([u]),
+					disabled: v.length === 0,
+					onClick: D,
+					"aria-label": S.moveToTarget,
+					className: e([f]),
 					children: "›"
-				}), /* @__PURE__ */ t("button", {
+				}), /* @__PURE__ */ r("button", {
 					type: "button",
-					disabled: v.length === 0,
-					onClick: T,
-					"aria-label": "<",
-					className: e([u]),
+					disabled: b.length === 0,
+					onClick: O,
+					"aria-label": S.moveToSource,
+					className: e([f]),
 					children: "‹"
 				})]
 			}),
-			/* @__PURE__ */ n("div", {
-				className: e([a]),
-				children: [/* @__PURE__ */ n("div", {
-					className: e([o]),
-					children: [
-						"Target (",
-						x.length,
-						")"
-					]
-				}), /* @__PURE__ */ t("div", {
-					className: e([s]),
-					children: x.map((r) => /* @__PURE__ */ n("label", {
-						className: e([c]),
-						children: [/* @__PURE__ */ t("input", {
+			/* @__PURE__ */ i("div", {
+				className: e([s]),
+				children: [/* @__PURE__ */ r("div", {
+					className: e([c]),
+					children: t(S.target, { count: w.length })
+				}), /* @__PURE__ */ r("div", {
+					className: e([l]),
+					children: w.map((t) => /* @__PURE__ */ i("label", {
+						className: e([u]),
+						children: [/* @__PURE__ */ r("input", {
 							type: "checkbox",
-							checked: v.includes(r.key),
-							disabled: r.disabled,
-							onChange: () => C(r.key),
-							"aria-label": r.title
-						}), r.title]
-					}, r.key))
+							checked: b.includes(t.key),
+							disabled: t.disabled,
+							onChange: () => E(t.key),
+							"aria-label": t.title
+						}), t.title]
+					}, t.key))
 				})]
 			})
 		]
 	});
 }
 //#endregion
-export { d as default };
+export { p as default };