@parallelworks/ui 0.1.0 → 0.3.0

package/dist/chunks/SwitchToggle-2uRw8ZeJ.js

@@ -0,0 +1,725 @@
+import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
+import { c as useStrings } from "./Provider-DvVvScTQ.js";
+import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions, Switch, Transition } from "@headlessui/react";
+import deepEqual from "fast-deep-equal";
+import { usePopper } from "react-popper";
+import AnimateHeight from "react-animate-height";
+//#region src/components/dropdownUtils.tsx
+function isCategory(option) {
+	return typeof option === "object" && option !== null && option !== void 0 && "options" in option;
+}
+function isOption(option) {
+	return typeof option === "object" && "label" in option && "value" in option && !("category" in option);
+}
+function normalizeOption(option) {
+	if (typeof option === "string") return {
+		label: option,
+		value: option
+	};
+	if (typeof option === "object" && option !== null && option !== void 0 && "options" in option) return {
+		category: option.category,
+		options: Array.isArray(option.options) ? option.options : []
+	};
+	return option;
+}
+function flattenOptions(options) {
+	const result = [];
+	for (const opt of options) {
+		const normalized = normalizeOption(opt);
+		if (isCategory(normalized)) {
+			const children = Array.isArray(normalized.options) ? normalized.options : [];
+			result.push(normalized);
+			result.push(...children);
+		} else result.push(normalized);
+	}
+	return result;
+}
+function filterOption(option, query) {
+	if (query === "") return true;
+	const q = String(query ?? "").toLowerCase().replace(/(-)/gm, "");
+	const label = String(option.label ?? "").toLowerCase().replace(/(-)/gm, "");
+	const secondary = option.secondaryValue !== void 0 ? String(option.secondaryValue).toLowerCase().replace(/(-)/gm, "") : "";
+	return label.includes(q) || secondary.includes(q);
+}
+function DropdownCaret() {
+	return /* @__PURE__ */ jsx(CaretDownIcon, { className: "text-neutral-400 absolute top-1/2 -translate-y-1/2 right-0 mr-3 inset-y-0 flex items-center rounded-r-md focus:outline-hidden" });
+}
+//#endregion
+//#region src/components/Dropdown.tsx
+var checkEquals = (val, opt) => {
+	if (typeof val === "object" && !Array.isArray(val)) return deepEqual(val, opt);
+	return val === opt;
+};
+function getOptionFromValue(value, options) {
+	if (value === void 0) return {
+		label: "",
+		value: ""
+	};
+	const found = options?.find((option) => {
+		if (typeof option === "string") return checkEquals(value, option);
+		else if (isCategory(option)) return option.options.find((opt) => checkEquals(value, opt.value));
+		else return checkEquals(value, option.value);
+	});
+	if (found) if (typeof found === "string") return {
+		label: found,
+		value: found
+	};
+	else if (isCategory(found)) return found.options.find((opt) => checkEquals(value, opt.value)) || {
+		label: JSON.stringify(value),
+		value
+	};
+	else return found;
+	const isResourceObject = value && typeof value === "object" && "name" in value && (value.$type === "computeResource" || value.type === "computeResource" || value.type === "bucket");
+	const fallbackLabel = typeof value === "string" ? value : isResourceObject ? value.name : JSON.stringify(value);
+	return {
+		label: fallbackLabel,
+		value: isResourceObject ? value : fallbackLabel
+	};
+}
+function Dropdown(props) {
+	const { onChange, value, options = [], ...others } = props;
+	const val = useMemo(() => {
+		return getOptionFromValue(value, options);
+	}, [value, options]);
+	const wrapperOnchange = (value) => {
+		if (onChange) onChange(value?.value);
+	};
+	return /* @__PURE__ */ jsx(DropdownHelper, {
+		value: val,
+		onChange: wrapperOnchange,
+		options: useMemo(() => {
+			if (!options || options.length === 0) return [];
+			return options.map((item) => {
+				if (isCategory(item)) return {
+					...item,
+					options: item.options.map((opt) => {
+						if (typeof opt === "string") return {
+							label: opt,
+							value: opt
+						};
+						return opt;
+					})
+				};
+				else if (typeof item === "string") return {
+					label: item,
+					value: item
+				};
+				return item;
+			});
+		}, [options]),
+		...others
+	});
+}
+function ActiveWatcher({ active, onChange }) {
+	const prev = useRef(null);
+	useEffect(() => {
+		if (prev.current !== active) {
+			onChange?.(active?.value);
+			prev.current = active;
+		}
+	}, [active, onChange]);
+	return null;
+}
+function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", portalEl }) {
+	const DEBOUNCE_MS = 500;
+	const [query, setQuery] = useState("");
+	const [referenceElement, setReferenceElement] = useState(null);
+	const [popperElement, setPopperElement] = useState(null);
+	const [boundaryEl, setBoundaryEl] = useState(null);
+	useEffect(() => {
+		if (!referenceElement) {
+			setBoundaryEl(null);
+			return;
+		}
+		const ref = referenceElement;
+		const dialog = ref.closest("[role=\"dialog\"]");
+		if (!dialog) {
+			setBoundaryEl(null);
+			return;
+		}
+		let node = ref.parentElement;
+		while (node) {
+			const style = getComputedStyle(node);
+			if (/(auto|scroll|hidden)/.test(`${style.overflowX} ${style.overflowY}`)) {
+				setBoundaryEl(node);
+				return;
+			}
+			if (node === dialog) break;
+			node = node.parentElement;
+		}
+		setBoundaryEl(dialog);
+	}, [referenceElement]);
+	const sameWidthModifier = useMemo(() => ({
+		name: "sameWidth",
+		enabled: true,
+		phase: "beforeWrite",
+		requires: ["computeStyles"],
+		fn: ({ state }) => {
+			state.styles.popper.width = `${state.rects.reference.width}px`;
+		},
+		effect: ({ state }) => {
+			state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+		}
+	}), []);
+	const { styles, attributes } = usePopper(referenceElement, popperElement, {
+		strategy: "fixed",
+		modifiers: useMemo(() => boundaryEl ? [
+			sameWidthModifier,
+			{
+				name: "flip",
+				options: { boundary: boundaryEl }
+			},
+			{
+				name: "preventOverflow",
+				options: { boundary: boundaryEl }
+			}
+		] : [sameWidthModifier], [boundaryEl, sameWidthModifier])
+	});
+	const debounceRef = useRef(null);
+	const buttonRef = useRef(null);
+	const flushCustomValue = useCallback((val) => {
+		onChange({
+			label: val,
+			value: val
+		});
+	}, [onChange]);
+	const onQueryChange = (val) => {
+		setQuery(val);
+		if (allowCustomValue) {
+			if (debounceRef.current) clearTimeout(debounceRef.current);
+			debounceRef.current = setTimeout(() => {
+				flushCustomValue(val);
+				debounceRef.current = null;
+			}, DEBOUNCE_MS);
+		}
+	};
+	const onInputBlur = () => {
+		if (allowCustomValue && debounceRef.current) {
+			clearTimeout(debounceRef.current);
+			debounceRef.current = null;
+			flushCustomValue(query);
+		}
+		setQuery("");
+	};
+	const onComboboxChange = (val) => {
+		if (debounceRef.current) {
+			clearTimeout(debounceRef.current);
+			debounceRef.current = null;
+		}
+		onChange(val);
+	};
+	const flattenedOptions = useMemo(() => {
+		const flatOptions = options.flatMap((option) => {
+			if (isCategory(option)) {
+				const filteredOptions = option.options.filter((opt) => filterOption(opt, query));
+				if (filteredOptions.length === 0) return [];
+				return [{
+					label: option.category || "",
+					value: option.category || "",
+					disabled: true,
+					category: true
+				}, ...filteredOptions];
+			}
+			if (filterOption(option, query)) return option;
+			return [];
+		});
+		if (allowCustomValue) {
+			const customValue = query || value?.value || "";
+			flatOptions.unshift({
+				label: `${customValueLabel} "${customValue}"`,
+				value: customValue
+			});
+		} else if (flatOptions.length === 0) return [{
+			label: "No options found",
+			value: "",
+			disabled: true
+		}];
+		return flatOptions;
+	}, [
+		options,
+		query,
+		value,
+		allowCustomValue,
+		customValueLabel
+	]);
+	const comboOptions = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
+		ref: setPopperElement,
+		style: styles.popper,
+		className: "bg-(--theme-input-bg) border-(--theme-border) text-(--theme-app) max-h-60! empty:invisible border overflow-auto rounded-md shadow-lg focus:outline-hidden sm:text-sm z-9999 data-[popper-reference-hidden=true]:invisible data-[popper-reference-hidden=true]:pointer-events-none",
+		...attributes.popper,
+		children: ({ option }) => {
+			const optionLabel = typeof option === "string" ? option : option.label;
+			const optionDescription = typeof option !== "string" ? option.description : void 0;
+			const isCategoryRow = typeof option !== "string" && Boolean(option.category);
+			return /* @__PURE__ */ jsx(ComboboxOption, {
+				"data-testid": "combobox-option",
+				value: option,
+				className: cx("w-full group relative flex", optionDescription ? "min-h-10 py-2" : "h-10", isCategoryRow ? "text-[14px] font-bold pl-1 items-center" : "data-disabled:text-(--theme-muted-text-color) data-disabled:bg-(--theme-muted-panel-bg) data-disabled:cursor-not-allowed cursor-pointer items-center pr-9 pl-3 leading-5 data-focus:bg-(--theme-muted-panel-bg) data-focus:text-(--theme-app) data-focus:outline-hidden", "data-selected:border-l-2 data-selected:border-(--theme-link) data-selected:bg-(--theme-muted-panel-bg) data-selected:text-(--theme-app)"),
+				children: /* @__PURE__ */ jsxs("span", {
+					className: cx("flex gap-1.5", optionDescription ? "items-start min-w-0" : "items-center truncate"),
+					"data-tooltip-id": TOOLTIP_ID,
+					onMouseEnter: (e) => {
+						const inner = e.currentTarget.lastElementChild;
+						if (inner && inner.scrollWidth > inner.clientWidth) e.currentTarget.setAttribute("data-tooltip-content", optionLabel);
+						else e.currentTarget.removeAttribute("data-tooltip-content");
+					},
+					children: [typeof option !== "string" && option.icon, optionDescription ? /* @__PURE__ */ jsxs("span", {
+						className: "flex flex-col min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: optionLabel
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-(--theme-muted-text-color) text-xs leading-snug",
+							children: optionDescription
+						})]
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: optionLabel
+					})]
+				})
+			});
+		}
+	}) });
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("relative rounded-md flex items-center", wrapperClassName),
+		children: /* @__PURE__ */ jsx(Combobox, {
+			"data-testid": "combobox",
+			className: cx("relative w-full", className),
+			as: "div",
+			by: checkEquals,
+			value,
+			onChange: onComboboxChange,
+			onClose: () => setQuery(""),
+			immediate: true,
+			virtual: {
+				options: flattenedOptions,
+				disabled: (option) => Boolean(option.disabled)
+			},
+			disabled,
+			children: ({ activeOption, open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				onActiveChange && /* @__PURE__ */ jsx(ActiveWatcher, {
+					active: activeOption,
+					onChange: onActiveChange
+				}),
+				/* @__PURE__ */ jsx(ComboboxInput, {
+					id,
+					"aria-label": ariaLabel || void 0,
+					placeholder: loading ? "Loading..." : placeholder,
+					onBlur: onInputBlur,
+					ref: setReferenceElement,
+					onClick: () => {
+						if (!open) buttonRef.current?.click();
+					},
+					className: cx("placeholder:text-xs bg-(--theme-input-bg) border-(--theme-border) text-(--theme-app) focus:border-(--theme-element) focus:outline-none focus:ring-1 focus:ring-(--theme-element) w-full h-full text-ellipsis pr-8", "disabled:bg-(--theme-input-disabled-bg) disabled:text-(--theme-input-disabled-text) disabled:cursor-not-allowed", textBoxClassName),
+					autoComplete: "off",
+					onChange: (event) => onQueryChange(event.target.value),
+					displayValue: (opt) => {
+						return opt?.label?.replaceAll("\"", "") || query || "";
+					},
+					disabled
+				}),
+				/* @__PURE__ */ jsx(ComboboxButton, {
+					ref: buttonRef,
+					className: "absolute inset-y-0 right-0 flex items-center pr-3 disabled:cursor-not-allowed",
+					"data-testid": "combobox-button",
+					disabled,
+					children: /* @__PURE__ */ jsx(DropdownCaret, {})
+				}),
+				typeof document !== "undefined" && createPortal(comboOptions, portalEl ?? document.querySelector(".ds-root") ?? document.body)
+			] })
+		})
+	});
+}
+//#endregion
+//#region src/components/Listbox.tsx
+function CustomListbox({ options = [], handleOptionSelected, type, allowSearch = false, closeOnSelect = true, className = "", invalid = false }) {
+	const { dropdown: strings } = useStrings();
+	const [filter, setFilter] = useState("");
+	const [controlledOpen, setControlledOpen] = useState(false);
+	const optionsToShow = options.filter((option) => !option.selected && option.label && option.label.toLowerCase().includes(filter.toLowerCase()));
+	function useOutsideAlerter(ref) {
+		useEffect(() => {
+			function handleClickOutside(event) {
+				if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
+					setControlledOpen(false);
+					setFilter("");
+				}
+			}
+			document.addEventListener("mousedown", handleClickOutside);
+			return () => {
+				document.removeEventListener("mousedown", handleClickOutside);
+			};
+		}, [ref]);
+	}
+	const wrapperRef = useRef(null);
+	useOutsideAlerter(wrapperRef);
+	const optionsElement = /* @__PURE__ */ jsxs(ListboxOptions, {
+		static: true,
+		className: "absolute w-full py-1 z-50 theme-input rounded-md",
+		children: [allowSearch && /* @__PURE__ */ jsx("div", {
+			className: "pl-2 pr-4 mb-1",
+			children: /* @__PURE__ */ jsx("input", {
+				autoComplete: "off",
+				type: "search",
+				autoFocus: true,
+				onChange: (e) => setFilter(e.target.value),
+				value: filter,
+				className: "w-full p-1 theme-input",
+				onKeyDown: (e) => {
+					if (![
+						"ArrowUp",
+						"ArrowDown",
+						"Enter",
+						"Home",
+						"End",
+						"Escape"
+					].includes(e.key)) e.stopPropagation();
+				}
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "overflow-auto max-h-60 theme-panel",
+			children: optionsToShow.length > 0 ? optionsToShow.map((option, index) => /* @__PURE__ */ jsx(ListboxOption, {
+				className: "relative hover:theme-hover select-none pl-2 pr-4",
+				value: option.value,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-full flex flex-row",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "w-3/4 py-2 flex items-center",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "w-4 h-6 btn btn-info text-xl line-height-0 mr-2",
+								children: "+"
+							}),
+							option.icon && /* @__PURE__ */ jsx("span", {
+								className: "mr-2 flex items-center",
+								children: option.icon
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "mr-2",
+								children: option.label
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "italic",
+								children: option.secondaryLabel
+							})
+						]
+					})
+				}, index)
+			}, index)) : /* @__PURE__ */ jsx("div", {
+				className: "w-full flex flex-row",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-3/4 py-2 pl-2 capitalize flex items-center",
+					children: filter === "" ? `All ${type} Added` : `No ${type} Found`
+				})
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Listbox, {
+		as: "div",
+		className: cx("relative mt-1 theme-input border theme-border rounded-md", className),
+		ref: wrapperRef,
+		onChange: handleOptionSelected,
+		children: [/* @__PURE__ */ jsxs(ListboxButton, {
+			onClick: () => setControlledOpen((prev) => !prev),
+			className: cx("relative w-full py-2 pl-3 text-left", invalid && "border-red-600 focus:border-red-600 focus:ring-red-500"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "block truncate",
+				children: strings.select(type)
+			}), /* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute inset-y-0 right-0 flex items-center justify-items-center",
+				children: /* @__PURE__ */ jsx(AngleDownIcon, {
+					className: "h-5 w-8",
+					"aria-hidden": "true"
+				})
+			})]
+		}), closeOnSelect ? /* @__PURE__ */ jsx(Transition, {
+			leave: "transition ease-in duration-100",
+			leaveFrom: "opacity-100",
+			leaveTo: "opacity-0",
+			children: optionsElement || null
+		}) : /* @__PURE__ */ jsx(Fragment, { children: controlledOpen && optionsElement })]
+	});
+}
+//#endregion
+//#region src/components/MultiSelect.tsx
+function MultiSelectDropdown({ options, value, onChange, id, className, wrapperClassName = "w-full", textBoxClassName, disabled = false, placeholder, loading = false, searchable = true, maxTagCount = 2, compareBy }) {
+	const strings = useStrings();
+	const [query, setQuery] = useState("");
+	const [referenceEl, setReferenceEl] = useState(null);
+	const [popperEl, setPopperEl] = useState(null);
+	const { styles, attributes } = usePopper(referenceEl, popperEl, {
+		placement: "bottom-start",
+		modifiers: [{
+			name: "offset",
+			options: { offset: [0, 4] }
+		}]
+	});
+	const allOptions = useMemo(() => flattenOptions(options), [options]);
+	const compare = compareBy ?? ((a, b) => a === b);
+	const selectedOptions = useMemo(() => {
+		const result = [];
+		for (const val of value) {
+			const found = allOptions.find((opt) => isOption(opt) && compare(opt.value, val));
+			if (found) result.push(found);
+		}
+		return result;
+	}, [
+		value,
+		allOptions,
+		compare
+	]);
+	const filteredOptions = useMemo(() => {
+		if (!searchable || query.trim() === "") return allOptions;
+		const result = [];
+		for (const opt of allOptions) if (isCategory(opt)) {
+			const matchedChildren = (Array.isArray(opt.options) ? opt.options : []).filter((o) => filterOption(o, query));
+			if (matchedChildren.length > 0) result.push(opt, ...matchedChildren);
+		} else if (isOption(opt) && filterOption(opt, query)) result.push(opt);
+		return result;
+	}, [
+		allOptions,
+		query,
+		searchable
+	]);
+	const display = useMemo(() => {
+		const shown = selectedOptions.slice(0, maxTagCount);
+		return {
+			label: shown.map((o) => o.label).join(", "),
+			overflow: selectedOptions.length - shown.length
+		};
+	}, [selectedOptions, maxTagCount]);
+	const handleChange = useCallback((newValues) => {
+		if (!Array.isArray(newValues)) return;
+		onChange(newValues);
+	}, [onChange]);
+	const isDisabled = disabled || loading;
+	const isEmpty = filteredOptions.length === 0;
+	return /* @__PURE__ */ jsx(Combobox, {
+		multiple: true,
+		value: Array.isArray(value) ? value : [],
+		onChange: handleChange,
+		disabled: isDisabled,
+		onClose: () => setQuery(""),
+		by: compare,
+		children: ({ open }) => /* @__PURE__ */ jsxs("div", {
+			ref: setReferenceEl,
+			className: cx("relative", wrapperClassName),
+			children: [
+				/* @__PURE__ */ jsx(ComboboxButton, {
+					as: "div",
+					id,
+					className: cx("theme-input flex items-center cursor-pointer rounded border text-[14px] w-full px-2 pr-8 py-1 min-h-[30px] overflow-hidden", isDisabled && "opacity-50 cursor-not-allowed", textBoxClassName, className),
+					children: loading ? /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text",
+						children: strings.loading
+					}) : selectedOptions.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: display.label
+					}), display.overflow > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "ml-1 shrink-0 theme-muted-text",
+						children: ["+", display.overflow]
+					})] }) : /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text truncate",
+						children: placeholder
+					})
+				}),
+				/* @__PURE__ */ jsx(DropdownCaret, {}),
+				open && /* @__PURE__ */ jsxs(ComboboxOptions, {
+					ref: setPopperEl,
+					static: true,
+					"data-testid": "msd-list",
+					style: styles.popper,
+					...attributes.popper,
+					className: "theme-panel z-10 max-h-60 w-full overflow-auto rounded-md shadow-lg focus:outline-none",
+					children: [searchable && /* @__PURE__ */ jsx("div", {
+						className: "sticky top-0 theme-panel p-2 border-b z-10",
+						children: /* @__PURE__ */ jsx("input", {
+							placeholder,
+							"data-1p-ignore": true,
+							autoComplete: "off",
+							type: "text",
+							className: "theme-input w-full",
+							value: query,
+							onChange: (e) => setQuery(e.target.value),
+							onKeyDown: (e) => e.stopPropagation(),
+							autoFocus: true
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "py-1",
+						children: isEmpty ? /* @__PURE__ */ jsx("div", {
+							className: "px-4 py-2 text-sm theme-muted-text",
+							children: strings.dropdown.noOptionsFound
+						}) : filteredOptions.map((opt, index) => {
+							if (isCategory(opt)) return /* @__PURE__ */ jsx("li", {
+								role: "presentation",
+								className: "px-4 py-2 text-sm font-bold theme-muted-text",
+								children: opt.category
+							}, `category-${opt.category ?? "uncat"}-${index}`);
+							const option = opt;
+							return /* @__PURE__ */ jsx(ComboboxOption, {
+								value: option.value,
+								disabled: option.disabled,
+								"data-testid": `msd-option-${String(option.value)}`,
+								className: ({ focus }) => cx("relative cursor-pointer select-none py-2 pl-10 pr-4 text-sm", focus && "theme-hover", option.disabled && "cursor-not-allowed opacity-50"),
+								children: ({ selected }) => /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "absolute inset-y-0 left-0 flex items-center pl-3",
+											children: /* @__PURE__ */ jsx("input", {
+												autoComplete: "off",
+												type: "checkbox",
+												checked: selected,
+												readOnly: true,
+												className: "h-4 w-4 cursor-pointer",
+												"aria-hidden": "true"
+											})
+										}),
+										option.icon && /* @__PURE__ */ jsx("span", {
+											className: "mr-2 flex items-center",
+											children: option.icon
+										}),
+										/* @__PURE__ */ jsx("div", {
+											className: "flex flex-col",
+											children: /* @__PURE__ */ jsx("span", {
+												className: "block truncate",
+												children: option.label
+											})
+										})
+									]
+								})
+							}, `option-${String(option.value)}`);
+						})
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/CollapsiblePanel.tsx
+var noop = () => {};
+function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick = noop, wrapperElement, customizedButton = null, className }) {
+	const toggleOpen = useCallback(() => {
+		if (onClick) onClick();
+		setOpen?.((open) => !open);
+	}, [setOpen, onClick]);
+	const Wrapper = wrapperElement ? wrapperElement : React.Fragment;
+	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment, { children: [title, /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(AnimateHeight, {
+		duration: 300,
+		height: open ? "auto" : 0,
+		children
+	}) })] }) : /* @__PURE__ */ jsxs("div", {
+		className: cx("border border-solid rounded-2xl border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-panel) mb-1 w-full", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx(!open && "text-(--theme-muted-text-color)", "w-full flex items-center justify-between transform ease-in transition text-sm py-3 px-2 cursor-pointer"),
+			onClick: toggleOpen,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center w-full",
+				children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90", "px-1 ml-1 text-[1.25rem] transition ease-in") }), /* @__PURE__ */ jsx("span", {
+					className: "px-2 font-bold select-none",
+					children: title?.toString()
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				onClick: (e) => {
+					e.stopPropagation();
+				},
+				children: customizedButton
+			})]
+		}), /* @__PURE__ */ jsx(AnimateHeight, {
+			duration: 300,
+			height: open ? "auto" : 0,
+			children
+		})]
+	});
+}
+function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null }) {
+	const [open, setOpen] = React.useState(initialState);
+	return /* @__PURE__ */ jsx(ControlledCollapsiblePanel, {
+		title: typeof title === "function" ? title(open, setOpen) : title,
+		open,
+		setOpen,
+		onClick,
+		wrapperElement,
+		className,
+		customizedButton,
+		children
+	});
+}
+function MaybeCollapsible({ className, initialState, children, title, customizedButton, collapsible }) {
+	if (collapsible) return /* @__PURE__ */ jsx(UncontrolledCollapsiblePanel, {
+		className,
+		initialState,
+		title,
+		customizedButton,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children
+	});
+}
+//#endregion
+//#region src/components/SectionHeader.tsx
+function SectionHeader({ children, className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("w-full text-lg font-semibold", className),
+		children
+	});
+}
+//#endregion
+//#region src/components/SwitchToggle.tsx
+function SwitchToggle({ onChange, value = void 0, yesLabel = "Yes", noLabel = "No", disabled = false, datatip = "", invalid = false }) {
+	const [enabled, setEnabled] = useState(value ?? false);
+	const [isFocused, setIsFocused] = useState(false);
+	const setIsEnabled = (e) => {
+		setEnabled(e);
+		onChange(e);
+	};
+	useEffect(() => {
+		if (value !== void 0) setEnabled(value);
+	}, [value]);
+	const checked = value ?? enabled;
+	return /* @__PURE__ */ jsx("div", {
+		"data-tooltip-content": datatip || void 0,
+		"data-tooltip-id": datatip ? TOOLTIP_ID : void 0,
+		className: cx("w-[198px] h-[30px] overflow-hidden shadow-sm rounded-md cursor-pointer ring-(--theme-border) ring-1", invalid && "border-red-600 focus:border-red-600 focus:ring-red-500 ring-1 ring-red-500", !invalid && isFocused && "ring-1 ring-[rgba(82,168,236,.8)] drop-shadow-[0_1px_2px_rgba(82,168,236,0.8)]"),
+		children: /* @__PURE__ */ jsx(Switch, {
+			checked,
+			onChange: setIsEnabled,
+			className: "text-white text-sm shadow-sm rounded-md cursor-pointer",
+			onClick: (e) => e.stopPropagation(),
+			onFocus: () => setIsFocused(true),
+			onBlur: () => setIsFocused(false),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cx(checked ? "translate-x-0" : "-translate-x-[100px]", "relative transform flex flex-row  ease-in-out duration-500", disabled && "cursor-not-allowed opacity-50"),
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "inline text-center capitalize px-2 py-1 w-[99px] border-0",
+						style: {
+							background: `linear-gradient(
+              to bottom,
+              var(--theme-element, #04c) 0%,
+              var(--theme-element, #08c) 100%
+            )`,
+							color: "var(--theme-element-text, #ffffff)"
+						},
+						children: yesLabel
+					}),
+					/* @__PURE__ */ jsx("div", { className: "inline px-2 py-1 h-8 w-[99px] bg-linear-to-b from-white to-[#e6e6e6]" }),
+					/* @__PURE__ */ jsx("div", {
+						className: "inline text-center capitalize px-2 py-1 w-[99px] bg-linear-to-b from-[#e6e6e6] to-white bg-[#04c] text-black",
+						children: noLabel
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { UncontrolledCollapsiblePanel as a, Dropdown as c, flattenOptions as d, isCategory as f, MaybeCollapsible as i, DropdownCaret as l, SectionHeader as n, MultiSelectDropdown as o, isOption as p, ControlledCollapsiblePanel as r, CustomListbox as s, SwitchToggle as t, filterOption as u };