@astrato-io/visualizations 0.0.0-stage → 0.6.4

package/chunks/Radio-Ciu-F4CU.js

@@ -0,0 +1,957 @@
+import { o as e } from "./rolldown-runtime-DleVn1XH.js";
+import { Oa as t, n, t as r } from "./interfaces-VUY4_yVO.js";
+import { G as i, Ki as a, Nn as o, Nr as s, V as c, bi as l, gi as u, pi as d, pr as f, r as p, wi as m, xr as h, yi as g } from "./utils-Ba9T0TqC.js";
+import { C as _, D as v, E as y, O as b, T as x, V as S, Z as C, ct as w, dt as T, l as E, st as D, v as ee, w as O } from "./_baseFlatten-DPXPOrea.js";
+import "./coloring-C16AUZEi.js";
+var k = /* @__PURE__ */ e(a()), A = m();
+function j(e) {
+	return e.substring(2).toLowerCase();
+}
+function te(e, t) {
+	return t.documentElement.clientWidth < e.clientX || t.documentElement.clientHeight < e.clientY;
+}
+function ne(e) {
+	let { children: t, disableReactTree: n = !1, mouseEvent: r = "onClick", onClickAway: i, touchEvent: a = "onTouchEnd" } = e, o = k.useRef(!1), s = k.useRef(null), c = k.useRef(!1), l = k.useRef(!1);
+	k.useEffect(() => (setTimeout(() => {
+		c.current = !0;
+	}, 0), () => {
+		c.current = !1;
+	}), []);
+	let u = D(C(t), s), d = w((e) => {
+		let t = l.current;
+		l.current = !1;
+		let r = T(s.current);
+		if (!c.current || !s.current || "clientX" in e && te(e, r)) return;
+		if (o.current) {
+			o.current = !1;
+			return;
+		}
+		let a;
+		a = e.composedPath ? e.composedPath().indexOf(s.current) > -1 : !r.documentElement.contains(e.target) || s.current.contains(e.target), !a && (n || !t) && i(e);
+	}), f = (e) => (n) => {
+		l.current = !0;
+		let r = t.props[e];
+		r && r(n);
+	}, p = { ref: u };
+	return a !== !1 && (p[a] = f(a)), k.useEffect(() => {
+		if (a !== !1) {
+			let e = j(a), t = T(s.current), n = () => {
+				o.current = !0;
+			};
+			return t.addEventListener(e, d), t.addEventListener("touchmove", n), () => {
+				t.removeEventListener(e, d), t.removeEventListener("touchmove", n);
+			};
+		}
+	}, [d, a]), r !== !1 && (p[r] = f(r)), k.useEffect(() => {
+		if (r !== !1) {
+			let e = j(r), t = T(s.current);
+			return t.addEventListener(e, d), () => {
+				t.removeEventListener(e, d);
+			};
+		}
+	}, [d, r]), /*#__PURE__*/ (0, A.jsx)(k.Fragment, { children: /*#__PURE__*/ k.cloneElement(t, p) });
+}
+var M = {
+	"--background-color": t.white,
+	"--color": t.mainDarkNavy,
+	"--font-family": "Roboto",
+	"--font-weight": "normal",
+	"--font-style": "normal",
+	"--text-decoration": "none",
+	"--text-align": "left"
+}, N = (e) => {
+	let t = e["--background-color"], n = e["--color"], r = ie(t), { searchFontColor: i, searchBorderColor: a } = re(t, n);
+	return {
+		"--background-color-hover": r,
+		"--search-font-color": i,
+		"--search-border-color": a
+	};
+}, re = (e, n) => n ? {
+	searchFontColor: n,
+	searchBorderColor: n
+} : !e || e === "transparent" ? {
+	searchFontColor: t.grey2,
+	searchBorderColor: t.grey3
+} : new E(e).luminanceWithAlpha() < .5 ? {
+	searchFontColor: t.white,
+	searchBorderColor: t.white
+} : {
+	searchFontColor: t.grey2,
+	searchBorderColor: t.grey3
+}, ie = (e) => {
+	if (!e || e === "transparent") return t.grey3;
+	let n = new E(e);
+	return n.luminanceWithAlpha() < .5 ? n.addTint(.2).hex() : n.addShade(.1).hex();
+}, P = {
+	[O.md]: {
+		fontSize: "11px",
+		lineHeight: "12px"
+	},
+	[O.sm]: {
+		fontSize: "9px",
+		lineHeight: "10px"
+	},
+	[O.xs]: {
+		fontSize: "8px",
+		lineHeight: "8px"
+	}
+}, ae = i({
+	container: (e) => ({
+		backgroundColor: "var(--background-color)",
+		fontFamily: "var(--font-family)",
+		padding: "8px 0",
+		...e && {
+			[O.md]: { padding: "6px 0" },
+			[O.sm]: { padding: "4px 0" },
+			[O.xs]: { padding: "2px 0" }
+		}
+	}),
+	divActions: {
+		boxShadow: `0 0 8px ${t.grey4}`,
+		display: "flex",
+		flexWrap: "wrap",
+		gap: 8,
+		marginBottom: -8,
+		marginTop: 8,
+		padding: 8
+	},
+	divActionsAction: {
+		...n.normal14,
+		borderRadius: 4,
+		cursor: "pointer",
+		textAlign: "center",
+		width: "100%",
+		"&[aria-disabled=\"true\"]": {
+			cursor: "not-allowed",
+			opacity: .6
+		}
+	},
+	divActionsAction__primary: {
+		background: t.mainDarkNavy,
+		color: t.white,
+		padding: "2px 1px"
+	},
+	divActionsAction__secondary: {
+		border: `1px solid ${t.grey3}`,
+		color: t.mainDarkNavy,
+		padding: "1px 0"
+	},
+	divOptions: (e) => ({
+		...r.propertiesPanel,
+		scrollbarGutter: "initial",
+		maxHeight: 400,
+		padding: "0 8px",
+		...e && {
+			[O.md]: { padding: "0 6px" },
+			[O.sm]: { padding: "0 4px" },
+			[O.xs]: { padding: "0 2px" }
+		}
+	}),
+	header: (e) => ({
+		...n.bold13,
+		gap: 8,
+		padding: "10px 16px",
+		display: "flex",
+		textAlign: "var(--text-align)",
+		color: "var(--color)",
+		...e && P
+	}),
+	divOptionsOption: (e) => ({
+		alignItems: "center",
+		borderRadius: 4,
+		color: "var(--color)",
+		cursor: "pointer",
+		display: "flex",
+		textAlign: "var(--text-align)",
+		gap: 8,
+		padding: "0px 8px",
+		height: 32,
+		"&:hover": { background: "var(--background-color-hover)" },
+		"&[aria-disabled=\"true\"]": { color: t.grey3 },
+		"& > div": { display: "flex" },
+		...e && {
+			..._,
+			[O.md]: {
+				padding: "0px 8px",
+				height: 24,
+				gap: 4
+			},
+			[O.sm]: {
+				padding: "0px 6px",
+				height: 20,
+				gap: 2
+			},
+			[O.xs]: {
+				padding: "0px 4px",
+				height: 16,
+				gap: 1
+			}
+		}
+	}),
+	divOptionsOptionCategory: (e) => ({
+		...n.bold13,
+		fontStyle: "var(--font-style)",
+		textDecoration: "var(--text-decoration)",
+		background: "var(--background-color)",
+		position: "sticky",
+		top: 0,
+		zIndex: 1,
+		...e && P
+	}),
+	divOptionsOptionDivider: (e) => ({
+		borderRadius: "0px",
+		cursor: "initial",
+		padding: "0px",
+		margin: "10px 8px",
+		borderBottom: `1px solid ${t.grey4}`,
+		height: 0,
+		"&:hover": { background: "initial" },
+		...e && {
+			[O.md]: { margin: "8px" },
+			[O.sm]: { margin: "6px" },
+			[O.xs]: { margin: "4px" }
+		}
+	}),
+	divOptionsOptionOption: (e) => ({
+		...n.normal13,
+		fontStyle: "var(--font-style)",
+		lineHeight: n.normal13.lineHeight,
+		textDecoration: "var(--text-decoration)",
+		"&[aria-disabled=\"true\"]": { cursor: "not-allowed" },
+		"&[aria-expanded=\"true\"]": { background: t.grey5 },
+		...e && P
+	}),
+	divOptionsOptionOptionLabel: {
+		...n.overflowEllipsis,
+		display: "initial !important",
+		height: "100%",
+		alignContent: "center",
+		flexGrow: 1
+	},
+	divSearch: {
+		padding: "8px",
+		display: "flex",
+		"& > div": { flexGrow: 1 }
+	}
+}), F = (0, k.createContext)({
+	onClose: () => null,
+	onOpen: () => null
+}), I = (e) => {
+	let t = (0, k.useContext)(F), [n, r] = (0, k.useState)(!1), [i, a] = (0, k.useState)(!1), o = (0, k.useMemo)(() => ({
+		onClose: () => a(!1),
+		onOpen: () => a(!0)
+	}), []);
+	return /* @__PURE__ */ (0, A.jsx)(F.Provider, {
+		value: o,
+		children: /* @__PURE__ */ (0, A.jsx)(v, {
+			onClose: () => {
+				t.onClose(), r(!1);
+			},
+			onOpen: () => {
+				t.onOpen(), r(!0);
+			},
+			open: !i && n,
+			...e
+		})
+	});
+}, oe = ({ tooltip: e, children: t }) => e ? /* @__PURE__ */ (0, A.jsx)(I, {
+	title: e,
+	children: t
+}) : t, se = ({ action: e, classNames: t }) => {
+	let { color: n = "primary", disabled: r = !1, key: i, label: a, onClick: s, style: c = {} } = e;
+	return /* @__PURE__ */ (0, A.jsx)(oe, {
+		tooltip: e.tooltip,
+		children: /* @__PURE__ */ (0, A.jsx)("div", {
+			"aria-disabled": r,
+			className: o({
+				[t.divActionsAction]: !0,
+				[t.divActionsAction__primary]: n === "primary",
+				[t.divActionsAction__secondary]: n === "secondary"
+			}),
+			onClick: r ? void 0 : s,
+			onKeyDown: y,
+			role: "button",
+			style: c,
+			tabIndex: r ? void 0 : 0,
+			children: a
+		}, i)
+	});
+}, ce = ({ actions: e, classNames: t }) => e.length ? /* @__PURE__ */ (0, A.jsx)("div", {
+	className: t.divActions,
+	children: e.map((e) => /* @__PURE__ */ (0, A.jsx)(se, {
+		classNames: t,
+		action: e
+	}, e.key))
+}) : null, L = (e) => {
+	let t = (0, k.useContext)(F), n = (0, k.useRef)(null), [r, i] = (0, k.useState)(!1), [a, o] = (0, k.useState)(!1), s = (0, k.useMemo)(() => ({
+		onClose: () => o(!1),
+		onOpen: () => o(!0)
+	}), []);
+	return /* @__PURE__ */ (0, A.jsx)(F.Provider, {
+		value: s,
+		children: /* @__PURE__ */ (0, A.jsx)(v, {
+			disableFocusListener: !0,
+			disableInteractive: !0,
+			enterDelay: 500,
+			enterNextDelay: 500,
+			onClose: () => {
+				t.onClose(), i(!1);
+			},
+			onOpen: () => {
+				if (n.current) {
+					let e = n.current.hasAttribute("data-ellipsis") ? n.current : n.current.querySelector("[data-ellipsis]");
+					if (e && e.clientWidth >= e.scrollWidth && e.clientHeight >= e.scrollHeight) return;
+				}
+				t.onOpen(), i(!0);
+			},
+			open: !a && r,
+			ref: n,
+			...e
+		})
+	});
+}, le = (e, t) => {
+	let { type: n } = e;
+	return n === "category" ? {
+		...e,
+		children: e.children.filter((e) => t(e))
+	} : e;
+}, ue = (e, t) => {
+	let { type: n } = e;
+	switch (n) {
+		case "category": {
+			let { children: t } = e;
+			return t.length > 0;
+		}
+		case "divider": return !0;
+		default: {
+			let { label: n, description: r } = e;
+			if (!n || typeof n != "string") return !0;
+			let i = n.toLocaleLowerCase(), a = r?.toLocaleLowerCase();
+			return i.includes(t) || !!a?.includes(t);
+		}
+	}
+}, de = (e, t) => {
+	let n = (e) => ue(e, t);
+	return e.map((e) => le(e, n)).filter(n);
+}, fe = (e) => {
+	let t = e.reduce((e, t) => e + Number("isChecked" in t && t.isChecked === !0), 0);
+	switch (!0) {
+		case t === e.length: return "full";
+		case t > 0: return "partial";
+		default: return "none";
+	}
+}, pe = ({ classNames: e, option: t, openedElement: n, setOpenedElement: r, collapsed: i, setCollapsed: a, searchPhrase: s, onCloseClick: c, responsive: l, checkboxSize: d }) => {
+	let { children: f, disabled: p = !1, label: m, tooltip: h, onCheck: _, key: v } = t, b = fe(f);
+	return /* @__PURE__ */ (0, A.jsxs)(k.Fragment, { children: [/* @__PURE__ */ (0, A.jsx)(L, {
+		title: m,
+		children: /* @__PURE__ */ (0, A.jsxs)("div", {
+			"aria-disabled": p,
+			"aria-expanded": !i[v],
+			className: o({
+				[e.divOptionsOption]: !0,
+				[e.divOptionsOptionCategory]: !0
+			}),
+			onClick: () => {
+				a({
+					...i,
+					[v]: !i[v]
+				}), r({});
+			},
+			onKeyDown: y,
+			role: "menuitem",
+			tabIndex: p ? void 0 : 0,
+			children: [
+				/* @__PURE__ */ (0, A.jsx)(B, {
+					onCheck: _,
+					checked: b,
+					disabled: p,
+					size: d
+				}),
+				/* @__PURE__ */ (0, A.jsx)(U, {
+					label: m,
+					searchPhrase: s,
+					classNames: e
+				}),
+				/* @__PURE__ */ (0, A.jsx)(q, { tooltipTitle: h }),
+				/* @__PURE__ */ (0, A.jsx)(V, { icon: i[v] ? /* @__PURE__ */ (0, A.jsx)(g, {}) : /* @__PURE__ */ (0, A.jsx)(u, {}) })
+			]
+		})
+	}), i[v] ? null : f.map((t) => /* @__PURE__ */ (0, A.jsx)(J, {
+		classNames: e,
+		option: t,
+		openedElement: n,
+		setOpenedElement: r,
+		collapsed: i,
+		setCollapsed: a,
+		searchPhrase: s,
+		onCloseClick: c,
+		responsive: l,
+		checkboxSize: d
+	}, t.key))] }, v);
+}, me = i({
+	container: {
+		position: "relative",
+		display: "flex",
+		justifyContent: "center"
+	},
+	checkbox: {
+		WebkitAppearance: "none",
+		appearance: "none",
+		margin: 0,
+		backgroundColor: t.white,
+		border: `1px solid ${t.grey3}`,
+		borderRadius: 4,
+		cursor: "pointer",
+		"&[aria-disabled=\"true\"]": { cursor: "default" },
+		"&[aria-readonly=\"true\"]": { cursor: "default" },
+		"&:focus": { boxShadow: `0px 0px 1px 1px ${t.mainDarkNavy}40` }
+	},
+	checkboxChecked: { border: `1px solid ${t.grey2} !important` },
+	checkboxUnchecked: { border: `1px solid ${t.grey3}` },
+	checkmark: {
+		top: 0,
+		position: "absolute",
+		cursor: "pointer"
+	}
+}), R = {
+	onClick: null,
+	checkedType: "none",
+	checkMarkColor: t.mainBrightPink,
+	disabled: !1,
+	readOnly: !1,
+	size: 16,
+	styles: {},
+	tabIndex: 0
+}, he = ({ checkedType: e, size: n, fill: r = t.mainBrightPink }) => {
+	switch (e) {
+		case "full": return /* @__PURE__ */ (0, A.jsx)(l, {
+			fill: r,
+			size: n
+		});
+		case "partial": return /* @__PURE__ */ (0, A.jsx)(h, {
+			fill: r,
+			size: n
+		});
+		default: return null;
+	}
+}, z = (e) => {
+	let { onClick: t, checkedType: n, checkMarkColor: r, disabled: i, readOnly: a, size: s, styles: c, tabIndex: l } = {
+		...R,
+		...e
+	}, u = n !== "none", d = (e) => {
+		t && (e.stopPropagation(), !i && !a && t(e));
+	}, f = (e) => {
+		e.key === "Enter" && (e.preventDefault(), d(e));
+	}, p = me(), m = c?.borderWidth !== void 0 && !!c?.borderColor && !!c?.borderStyle;
+	return /* @__PURE__ */ (0, A.jsxs)("div", {
+		className: p.container,
+		style: { height: s },
+		onClick: d,
+		children: [/* @__PURE__ */ (0, A.jsx)("input", {
+			type: "checkbox",
+			"aria-disabled": i,
+			"aria-readonly": a,
+			"aria-checked": u,
+			style: {
+				...c,
+				height: s,
+				width: s
+			},
+			tabIndex: l,
+			onKeyDown: f,
+			className: o({
+				[p.checkbox]: !0,
+				[p.checkboxUnchecked]: !u,
+				[p.checkboxChecked]: !m && u
+			})
+		}), /* @__PURE__ */ (0, A.jsx)("div", {
+			className: p.checkmark,
+			children: /* @__PURE__ */ (0, A.jsx)(he, {
+				checkedType: n,
+				size: s,
+				fill: r
+			})
+		})]
+	});
+}, B = ({ onCheck: e, checked: t, disabled: n, size: r }) => e ? /* @__PURE__ */ (0, A.jsx)(z, {
+	onClick: e,
+	checkedType: t,
+	disabled: n,
+	size: r
+}) : null, ge = ({ classNames: e, option: t }) => /* @__PURE__ */ (0, A.jsx)("div", {
+	className: o({
+		[e.divOptionsOption]: !0,
+		[e.divOptionsOptionDivider]: !0
+	}),
+	role: "separator"
+}, t.key), V = ({ icon: e }) => e ? /* @__PURE__ */ (0, A.jsx)("div", { children: e }) : null, _e = i({ span: { fontWeight: "bold" } }), ve = (e, t) => {
+	let n = _e();
+	if (!e) return [{ children: t }];
+	let r = e.toLocaleLowerCase(), i = t.toLocaleLowerCase(), a = [], o = 0;
+	for (; o < t.length;) {
+		let s = i.indexOf(r, o);
+		switch (s) {
+			case -1:
+				a.push({ children: t.substring(o) }), o = t.length;
+				break;
+			default: a.push({ children: t.substring(o, s) }), a.push({
+				children: t.substring(s, s + e.length),
+				className: n.span
+			}), o = s + e.length;
+		}
+	}
+	return a;
+}, H = ({ children: e, phrase: t }) => /* @__PURE__ */ (0, A.jsx)(A.Fragment, { children: ve(t, e).map((e, t) => /* @__PURE__ */ (0, A.jsx)("span", { ...e }, t)) }), U = ({ classNames: e, label: t, searchPhrase: n }) => /* @__PURE__ */ (0, A.jsx)("div", {
+	"data-ellipsis": !0,
+	className: e.divOptionsOptionOptionLabel,
+	children: typeof t == "string" ? /* @__PURE__ */ (0, A.jsx)(H, {
+		phrase: n,
+		children: t
+	}) : t
+}), W = /* @__PURE__ */ function(e) {
+	return e.left = "left", e.right = "right", e;
+}({}), G = ({ actions: e = [], anchorEl: t, anchorPosition: n, cssVariables: r, onClose: i, onCloseClick: a, options: o, searchEnabled: s = !1, style: c = {}, pickedOptionsIds: l, header: u, menuStyle: d, responsive: f, ...p }) => /* @__PURE__ */ (0, A.jsx)(b, {
+	...p,
+	anchorEl: t,
+	anchorPosition: n,
+	MenuListProps: {
+		role: void 0,
+		tabIndex: void 0
+	},
+	onClose: i,
+	open: !!t || !!n,
+	style: d,
+	children: /* @__PURE__ */ (0, A.jsx)($, {
+		header: u,
+		actions: e,
+		onClose: i,
+		onCloseClick: a,
+		options: o,
+		pickedOptionsIds: l,
+		searchEnabled: s,
+		style: c,
+		cssVariables: r,
+		responsive: f
+	})
+}), K = ({ children: e, classNames: t, option: n, onClick: r }) => {
+	let { disabled: i = !1, label: a, key: s } = n;
+	return /* @__PURE__ */ (0, A.jsx)(L, {
+		title: a,
+		children: /* @__PURE__ */ (0, A.jsx)("div", {
+			"aria-disabled": i,
+			className: o({
+				[t.divOptionsOption]: !0,
+				[t.divOptionsOptionOption]: !0
+			}),
+			onClick: r,
+			onKeyDown: y,
+			role: "menuitem",
+			tabIndex: i ? void 0 : 0,
+			children: e
+		})
+	}, s);
+}, ye = (e) => {
+	let { openedElement: t, setOpenedElement: n, onCloseClick: r, multiSelect: i, classNames: a, option: o, checkboxSize: s } = e, { children: c = [], disabled: l = !1, label: u, onCheck: d, onClick: f, onMultiClick: p, isChecked: m, tooltip: h, key: g } = o, [_, v] = (0, k.useState)({ icon: o.icon || {} }), { icon: y } = _, b;
+	return c.length ? (b = (e) => {
+		l || n({ [g]: e.currentTarget });
+	}, /* @__PURE__ */ (0, A.jsxs)(k.Fragment, { children: [/* @__PURE__ */ (0, A.jsxs)(K, {
+		...e,
+		onClick: b,
+		children: [
+			/* @__PURE__ */ (0, A.jsx)(V, { icon: y?.left }),
+			/* @__PURE__ */ (0, A.jsx)(U, {
+				label: u,
+				classNames: a
+			}),
+			/* @__PURE__ */ (0, A.jsx)(q, { tooltipTitle: h }),
+			/* @__PURE__ */ (0, A.jsx)(V, { icon: y?.right })
+		]
+	}), /* @__PURE__ */ (0, A.jsx)(G, {
+		anchorEl: t[g],
+		anchorOrigin: {
+			horizontal: "left",
+			vertical: "top"
+		},
+		onClose: () => {
+			n({});
+		},
+		onCloseClick: (e) => {
+			r(e), n({});
+		},
+		options: c,
+		transformOrigin: {
+			horizontal: "right",
+			vertical: "top"
+		}
+	})] }, g)) : (b = (e) => {
+		if (!l) {
+			if (f?.(e), i) {
+				let e = p?.();
+				e && v((t) => ({
+					...t,
+					...e
+				}));
+				return;
+			}
+			d || r(e);
+		}
+	}, /* @__PURE__ */ (0, A.jsxs)(K, {
+		...e,
+		onClick: b,
+		children: [
+			e.option.checkboxPosition !== W.right && /* @__PURE__ */ (0, A.jsx)(B, {
+				onCheck: d,
+				checked: m ? "full" : "none",
+				disabled: l,
+				size: s
+			}),
+			/* @__PURE__ */ (0, A.jsx)(V, { icon: y?.left }),
+			/* @__PURE__ */ (0, A.jsx)(U, {
+				label: u,
+				classNames: a
+			}),
+			/* @__PURE__ */ (0, A.jsx)(q, { tooltipTitle: h }),
+			/* @__PURE__ */ (0, A.jsx)(V, { icon: y?.right }),
+			e.option.checkboxPosition === W.right && /* @__PURE__ */ (0, A.jsx)(B, {
+				onCheck: d,
+				checked: m ? "full" : "none",
+				disabled: l,
+				size: s
+			})
+		]
+	}));
+}, q = ({ tooltipTitle: e }) => e ? /* @__PURE__ */ (0, A.jsx)(I, {
+	title: e,
+	children: /* @__PURE__ */ (0, A.jsx)("div", { children: /* @__PURE__ */ (0, A.jsx)(s, {}) })
+}) : null, J = (e) => {
+	let { type: t } = e.option;
+	switch (t) {
+		case "category": return /* @__PURE__ */ (0, A.jsx)(pe, { ...e });
+		case "divider": return /* @__PURE__ */ (0, A.jsx)(ge, { ...e });
+		case "option": return /* @__PURE__ */ (0, A.jsx)(ye, { ...e });
+		default: return null;
+	}
+}, Y = ({ classNames: e, options: t, searchPhrase: n, autoFocus: r, openedElement: i, setOpenedElement: a, collapsed: o, setCollapsed: s, onCloseClick: c, multiSelect: l = !1, responsive: u, checkboxSize: d }) => {
+	let f = n.toLocaleLowerCase(), p = de(t, f);
+	return /* @__PURE__ */ (0, A.jsx)("div", {
+		className: e.divOptions,
+		onKeyDown: x,
+		ref: r,
+		role: "menu",
+		children: p.map((t) => /* @__PURE__ */ (0, A.jsx)(J, {
+			classNames: e,
+			option: t,
+			openedElement: i,
+			setOpenedElement: a,
+			collapsed: o,
+			setCollapsed: s,
+			searchPhrase: f,
+			onCloseClick: c,
+			multiSelect: l,
+			responsive: u,
+			checkboxSize: d
+		}, t.key))
+	});
+}, be = i({ button: {
+	background: "initial",
+	border: "initial",
+	padding: "initial",
+	borderRadius: 4,
+	cursor: "pointer",
+	display: "block"
+} }), X = (0, k.forwardRef)(function({ children: e, className: t, ...n }, r) {
+	let i = be();
+	return /* @__PURE__ */ (0, A.jsx)("button", {
+		...n,
+		className: o({
+			[String(t)]: !0,
+			[i.button]: !0
+		}),
+		ref: r,
+		children: e
+	});
+}), xe = i({
+	button: (e) => ({
+		position: "absolute",
+		right: 4,
+		top: 4,
+		...e && {
+			[O.md]: { top: 2 },
+			"& svg": {
+				[O.sm]: {
+					width: 12,
+					height: 12
+				},
+				[O.xs]: {
+					width: 8,
+					height: 8
+				}
+			}
+		}
+	}),
+	div: {
+		display: "flex",
+		position: "relative"
+	},
+	input: (e) => ({
+		...n.normal13,
+		background: "initial",
+		border: `1px solid ${t.grey3}`,
+		borderRadius: 4,
+		boxSizing: "border-box",
+		color: t.mainDarkNavy,
+		flexGrow: 1,
+		height: 24,
+		padding: "3px 23px",
+		...e && {
+			[O.md]: {
+				height: 20,
+				...n.normal12
+			},
+			[O.sm]: {
+				height: 16,
+				...n.normal11,
+				padding: "3px 16px"
+			},
+			[O.xs]: {
+				height: 12,
+				...n.normal10,
+				padding: "0px 12px"
+			}
+		},
+		"&::placeholder": { color: "inherit" }
+	}),
+	svg: (e) => ({
+		left: 4,
+		pointerEvents: "none",
+		position: "absolute",
+		top: 4,
+		...e && {
+			[O.md]: { top: 2 },
+			[O.sm]: {
+				width: 12,
+				height: 12,
+				top: 2
+			},
+			[O.xs]: {
+				width: 8,
+				height: 8,
+				top: 2
+			}
+		}
+	})
+}), Z = (0, k.forwardRef)(function({ autoFocus: e, className: t, onChange: n, value: r, placeholder: i, style: a, responsive: s, ...c }, l) {
+	let u = (0, k.useRef)(null), p = S(u, l), m = xe(s);
+	return (0, k.useEffect)(() => {
+		e && u.current?.focus();
+	}, [e]), /* @__PURE__ */ (0, A.jsxs)("div", {
+		className: o({
+			[String(t)]: !0,
+			[m.div]: !0
+		}),
+		children: [
+			/* @__PURE__ */ (0, A.jsx)(f, {
+				className: m.svg,
+				fill: a?.color
+			}),
+			/* @__PURE__ */ (0, A.jsx)("input", {
+				...c,
+				style: { ...a },
+				className: m.input,
+				onChange: n,
+				placeholder: i ?? "Search...",
+				ref: p,
+				size: 1,
+				value: r
+			}),
+			/* @__PURE__ */ (0, A.jsx)(X, {
+				className: m.button,
+				"data-testid": "input-search-clear",
+				onClick: () => {
+					u.current?.focus(), n?.({ target: { value: "" } });
+				},
+				style: { display: r ? void 0 : "none" },
+				children: /* @__PURE__ */ (0, A.jsx)(d, { fill: a?.color })
+			})
+		]
+	});
+}), Q = i({ button: {
+	paddingLeft: 4,
+	paddingRight: 4
+} }), Se = ({ isAllCollapsed: e, clickCallback: t }) => {
+	let n = Q(), r = e ? g : u;
+	return /* @__PURE__ */ (0, A.jsx)(L, {
+		title: e ? "Expand all" : "Collapse all",
+		children: /* @__PURE__ */ (0, A.jsx)(X, {
+			onClick: () => t?.(!e),
+			className: n.button,
+			children: /* @__PURE__ */ (0, A.jsx)(r, {})
+		})
+	});
+}, Ce = ({ classNames: e, searchEnabled: t, searchPhrase: n, onChange: r, options: i, collapsed: a, onCollapseChange: o, responsive: s }) => {
+	if (!t) return null;
+	let c = i.filter((e) => e.type === "category"), l = c.length > 0, u = c.every((e) => a[e.key]);
+	return /* @__PURE__ */ (0, A.jsxs)("div", {
+		className: e.divSearch,
+		children: [/* @__PURE__ */ (0, A.jsx)(Z, {
+			onChange: (e) => r(e.target.value),
+			value: n,
+			responsive: s,
+			style: {
+				borderColor: "var(--search-border-color)",
+				color: "var(--search-font-color)"
+			}
+		}), l && /* @__PURE__ */ (0, A.jsx)(Se, {
+			isAllCollapsed: u,
+			clickCallback: o
+		})]
+	});
+}, $ = ({ actions: e = [], onClose: t, onCloseClick: n = t, options: r, stickyOptions: i, searchEnabled: a = !1, multiSelect: o = !1, style: s = {}, cssVariables: l, header: u, responsive: d }) => {
+	let f = c(), m = p(), h = ae(d), g = d ? ee(16, m.height, m.width) : 16, [_, v] = (0, k.useState)({}), [y, b] = (0, k.useState)({}), [x, S] = (0, k.useState)(""), C = (e) => {
+		S(e), b({});
+	}, w = {
+		...M,
+		...l
+	}, T = N(w), E = {
+		...w,
+		...T
+	}, D = (e) => {
+		let t = r.map((e) => e.key).reduce((t, n) => (t[n] = e, t), {});
+		v(t);
+	}, O = (e) => {
+		switch (e.stopPropagation(), e.key) {
+			case "ArrowDown":
+				e.target.tagName === "INPUT" && (e.preventDefault(), e.currentTarget.querySelector("[role=\"menuitem\"][tabindex]")?.focus());
+				break;
+			case "Escape":
+				t(e);
+				break;
+			case "Shift":
+			case "Tab": break;
+			default: e.currentTarget.querySelector("input")?.focus();
+		}
+	};
+	return /* @__PURE__ */ (0, A.jsxs)("div", {
+		style: {
+			...E,
+			...s
+		},
+		className: h.container,
+		onClick: (e) => {
+			e.stopPropagation();
+		},
+		onKeyDown: O,
+		children: [
+			u ? /* @__PURE__ */ (0, A.jsxs)("div", {
+				className: h.header,
+				children: [
+					" ",
+					u,
+					" "
+				]
+			}) : null,
+			i?.length ? /* @__PURE__ */ (0, A.jsx)(Y, {
+				classNames: h,
+				options: i,
+				searchPhrase: "",
+				collapsed: _,
+				setCollapsed: v,
+				openedElement: y,
+				setOpenedElement: b,
+				onCloseClick: n,
+				autoFocus: f,
+				responsive: d,
+				checkboxSize: g
+			}) : null,
+			/* @__PURE__ */ (0, A.jsx)(Ce, {
+				searchEnabled: a,
+				searchPhrase: x,
+				onChange: C,
+				classNames: h,
+				cssVariables: E,
+				options: r,
+				collapsed: _,
+				onCollapseChange: D,
+				responsive: d
+			}),
+			/* @__PURE__ */ (0, A.jsx)(Y, {
+				classNames: h,
+				options: r,
+				autoFocus: f,
+				searchPhrase: x,
+				collapsed: _,
+				setCollapsed: v,
+				openedElement: y,
+				setOpenedElement: b,
+				onCloseClick: n,
+				multiSelect: o,
+				responsive: d,
+				checkboxSize: g
+			}),
+			/* @__PURE__ */ (0, A.jsx)(ce, {
+				actions: e,
+				classNames: h
+			})
+		]
+	});
+}, we = i({
+	radioWrapper: { position: "relative" },
+	radio: (e) => ({
+		display: "none",
+		"& + label": {
+			...n.normal13,
+			color: t.grey1,
+			cursor: "inherit",
+			"&::before": {
+				content: "\"\"",
+				display: "block",
+				position: "relative",
+				width: 16,
+				height: 16,
+				borderRadius: 8,
+				border: `1px solid ${t.grey3}`,
+				backgroundColor: t.white,
+				...e && { [O.sm]: {
+					width: 12,
+					height: 12
+				} }
+			},
+			...e && { [O.sm]: {
+				lineHeight: "8px",
+				fontSize: "10px"
+			} }
+		},
+		"&:checked + label::after": {
+			content: "\"\"",
+			width: 8,
+			height: 8,
+			background: t.white,
+			position: "absolute",
+			top: 4,
+			left: 4,
+			borderRadius: 4,
+			...e && { [O.sm]: {
+				width: 6,
+				height: 6,
+				top: 3,
+				left: 3
+			} }
+		},
+		"&:checked + label::before": { backgroundColor: t.mainBrightPink }
+	})
+}), Te = ({ name: e = "", value: t, checked: n, onChange: r = () => {}, responsive: i = !1 }) => {
+	let a = we(i);
+	return /* @__PURE__ */ (0, A.jsxs)("div", {
+		className: a.radioWrapper,
+		children: [/* @__PURE__ */ (0, A.jsx)("input", {
+			className: a.radio,
+			id: `${e}-radio-button-${t}`,
+			type: "radio",
+			name: e,
+			value: t,
+			checked: !!n,
+			onChange: (e) => r?.(e.target.value)
+		}), /* @__PURE__ */ (0, A.jsx)("label", { htmlFor: `${e}-radio-button-${t}` })]
+	});
+};
+export { G as a, L as c, N as d, M as f, X as i, I as l, $ as n, H as o, ne as p, Z as r, z as s, Te as t, F as u };