@parallelworks/ui 0.19.0 → 0.19.1

package/dist/chunks/SwitchToggle-DShNdcao.js

@@ -1,758 +0,0 @@
-import { u as useStrings } from "./Provider-CDYurraE.js";
-import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
-import { a as truncationTooltipProps, n as TOOLTIP_ID, o as keyedByContent } from "./Tooltip-K5HJr4_p.js";
-import { a as filterOption, c as isCategory, i as DropdownCaret, l as isOption, o as flattenDisplayOptions, s as flattenOptions, u as toggleSetMember } from "./StatusBadge-C1Blx_cW.js";
-import { t as focusOnMount } from "./focus-D_iZJTW1.js";
-import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions, Switch, Transition } from "@headlessui/react";
-import cx from "classnames";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-import AnimateHeight from "react-animate-height";
-import deepEqual from "fast-deep-equal";
-import { usePopper } from "react-popper";
-//#region src/components/CollapsiblePanel.tsx
-var noop = () => {};
-function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick = noop, wrapperElement, customizedButton = null, titleAction, className }) {
-	const toggleOpen = useCallback(() => {
-		if (onClick) onClick();
-		setOpen?.((open) => !open);
-	}, [setOpen, onClick]);
-	const contentId = React.useId();
-	const Wrapper = wrapperElement ? wrapperElement : React.Fragment;
-	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment$1, { 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 transform ease-in transition text-sm py-3 px-2 cursor-pointer"),
-			children: [
-				/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					"aria-expanded": !!open,
-					"aria-controls": contentId,
-					className: cx("flex items-center text-left cursor-pointer", !titleAction && "w-full"),
-					onClick: toggleOpen,
-					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()
-					})]
-				}),
-				titleAction,
-				/* @__PURE__ */ jsx("div", {
-					className: "ml-auto",
-					children: customizedButton
-				})
-			]
-		}), /* @__PURE__ */ jsx(AnimateHeight, {
-			id: contentId,
-			duration: 300,
-			height: open ? "auto" : 0,
-			children
-		})]
-	});
-}
-function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null }) {
-	const [open, setOpen] = React.useState(initialState);
-	const passTitle = typeof title === "function" ? title(open, setOpen) : title;
-	return /* @__PURE__ */ jsx(ControlledCollapsiblePanel, {
-		title: passTitle,
-		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/Dropdown.tsx
-var defaultCollapsedLabel = (count) => `${count} more`;
-function isNamedValue(value) {
-	return typeof value === "object" && value !== null && "name" in value && typeof value.name === "string";
-}
-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 isNamedObject = isNamedValue(value);
-	const fallbackLabel = typeof value === "string" ? value : isNamedObject ? value.name : JSON.stringify(value);
-	return {
-		label: fallbackLabel,
-		value: isNamedObject ? 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);
-	};
-	const transformedOptions = 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]);
-	return /* @__PURE__ */ jsx(DropdownHelper, {
-		value: val,
-		onChange: wrapperOnchange,
-		options: transformedOptions,
-		...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 OptionContent({ label, description, icon }) {
-	return /* @__PURE__ */ jsxs("span", {
-		className: cx("flex gap-1.5", description ? "items-start min-w-0" : "items-center truncate"),
-		...truncationTooltipProps(label, (anchor) => anchor.lastElementChild),
-		children: [icon, description ? /* @__PURE__ */ jsxs("span", {
-			className: "flex flex-col min-w-0",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				children: label
-			}), /* @__PURE__ */ jsx("span", {
-				className: "text-(--theme-muted-text-color) text-xs leading-snug",
-				children: description
-			})]
-		}) : /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: label
-		})]
-	});
-}
-function ToggleOption({ option, category, expanded, onToggle, ...virtualRowProps }) {
-	return /* @__PURE__ */ jsx(ComboboxOption, {
-		...virtualRowProps,
-		"data-testid": "combobox-toggle",
-		value: option,
-		className: "w-full h-10 flex items-center pl-3",
-		children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": expanded,
-			className: "flex items-center gap-1.5 cursor-pointer text-(--theme-muted-text-color) hover:text-(--theme-app)",
-			onMouseDown: (e) => e.preventDefault(),
-			onClick: (e) => {
-				e.preventDefault();
-				e.stopPropagation();
-				onToggle(category);
-			},
-			children: [/* @__PURE__ */ jsx(CaretDownIcon, { className: cx("w-3 h-3", !expanded && "-rotate-90") }), option.label]
-		})
-	});
-}
-function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, "aria-describedby": describedBy, required, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", collapsedLabel = defaultCollapsedLabel, portalEl, compact = false }) {
-	const DEBOUNCE_MS = 500;
-	const t = useStrings().dropdown;
-	const [query, setQuery] = useState("");
-	const [selectedIconWidth, setSelectedIconWidth] = useState(0);
-	const selectedIconRef = useCallback((node) => {
-		setSelectedIconWidth(node?.offsetWidth ?? 0);
-	}, []);
-	const selectedIcon = query === "" ? value?.icon : void 0;
-	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 }) => {
-			const popperStyles = state.styles["popper"];
-			if (popperStyles) popperStyles.width = `${state.rects.reference.width}px`;
-		},
-		effect: ({ state }) => {
-			const { popper, reference } = state.elements;
-			if (reference instanceof HTMLElement) popper.style.width = `${reference.offsetWidth}px`;
-		}
-	}), []);
-	const popperModifiers = useMemo(() => boundaryEl ? [
-		sameWidthModifier,
-		{
-			name: "flip",
-			options: { boundary: boundaryEl }
-		},
-		{
-			name: "preventOverflow",
-			options: { boundary: boundaryEl }
-		}
-	] : [sameWidthModifier], [boundaryEl, sameWidthModifier]);
-	const { styles, attributes } = usePopper(referenceElement, popperElement, {
-		strategy: "fixed",
-		modifiers: popperModifiers
-	});
-	const debounceRef = useRef(null);
-	const buttonRef = useRef(null);
-	const [expandedCategories, setExpandedCategories] = useState(/* @__PURE__ */ new Set());
-	const selectedCategory = useMemo(() => options.find((o) => isCategory(o) && o.options.some((opt) => checkEquals(value.value, opt.value)))?.category, [options, value]);
-	const lastAutoExpandedValue = useRef(void 0);
-	useEffect(() => {
-		if (!selectedCategory || checkEquals(lastAutoExpandedValue.current, value.value)) return;
-		lastAutoExpandedValue.current = value.value;
-		setExpandedCategories((prev) => prev.size === 1 && prev.has(selectedCategory) ? prev : /* @__PURE__ */ new Set([selectedCategory]));
-	}, [selectedCategory, value]);
-	const toggleCategory = (category) => setExpandedCategories((prev) => toggleSetMember(prev, category));
-	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(() => flattenDisplayOptions({
-		options,
-		query,
-		expandedCategories,
-		collapsedLabel,
-		selectedValue: value?.value,
-		allowCustomValue,
-		customValueLabel
-	}), [
-		options,
-		query,
-		expandedCategories,
-		collapsedLabel,
-		value,
-		allowCustomValue,
-		customValueLabel
-	]);
-	const comboOptions = /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
-		modal: false,
-		ref: setPopperElement,
-		style: styles["popper"],
-		className: cx("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 z-9999 data-[popper-reference-hidden=true]:invisible data-[popper-reference-hidden=true]:pointer-events-none", compact ? "text-xs" : "sm:text-sm"),
-		...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);
-			const toggleTarget = typeof option !== "string" ? option.toggle : void 0;
-			const isPinned = typeof option !== "string" && Boolean(option.pinned);
-			if (toggleTarget !== void 0) return /* @__PURE__ */ jsx(ToggleOption, {
-				option,
-				category: toggleTarget,
-				expanded: expandedCategories.has(toggleTarget),
-				onToggle: toggleCategory
-			});
-			return /* @__PURE__ */ jsx(ComboboxOption, {
-				"data-testid": "combobox-option",
-				value: option,
-				className: cx("w-full group relative flex", optionDescription ? "min-h-10 py-2" : compact ? "h-8" : "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)", isPinned && "border-t border-(--theme-border) font-medium"),
-				children: /* @__PURE__ */ jsx(OptionContent, {
-					label: optionLabel,
-					description: optionDescription,
-					icon: typeof option !== "string" && option.icon
-				})
-			});
-		}
-	}) });
-	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("");
-				setExpandedCategories(new Set(selectedCategory ? [selectedCategory] : []));
-			},
-			immediate: true,
-			virtual: {
-				options: flattenedOptions,
-				disabled: (option) => Boolean(option.disabled)
-			},
-			disabled,
-			children: ({ activeOption, open }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				onActiveChange && /* @__PURE__ */ jsx(ActiveWatcher, {
-					active: activeOption,
-					onChange: onActiveChange
-				}),
-				selectedIcon && /* @__PURE__ */ jsx("span", {
-					ref: selectedIconRef,
-					className: "pointer-events-none absolute inset-y-0 left-3 z-10 flex items-center",
-					children: selectedIcon
-				}, value.label),
-				/* @__PURE__ */ jsx(ComboboxInput, {
-					id,
-					"aria-label": ariaLabel || void 0,
-					"aria-describedby": describedBy,
-					"aria-required": required || void 0,
-					placeholder: loading ? "Loading..." : placeholder,
-					onBlur: onInputBlur,
-					ref: setReferenceElement,
-					onClick: () => {
-						if (!open) buttonRef.current?.click();
-					},
-					style: selectedIcon && selectedIconWidth > 0 ? { paddingLeft: selectedIconWidth + 18 } : void 0,
-					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,
-					"aria-label": t.showOptions,
-					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, required = false, id, "aria-describedby": describedBy }) {
-	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, {
-		modal: false,
-		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",
-				ref: focusOnMount,
-				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 ? keyedByContent(optionsToShow, (o) => String(o.value)).map(({ key, item: option }) => /* @__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
-							})
-						]
-					})
-				})
-			}, key)) : /* @__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, {
-			id,
-			"aria-describedby": describedBy,
-			"aria-required": required || void 0,
-			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$1, { children: controlledOpen && optionsElement })]
-	});
-}
-//#endregion
-//#region src/components/MultiSelect.tsx
-function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, required, 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,
-					"aria-labelledby": labelledBy,
-					"aria-describedby": describedBy,
-					"aria-required": required || void 0,
-					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$1, { 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, {
-					modal: false,
-					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(),
-							ref: focusOnMount
-						})
-					}), /* @__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
-						}) : keyedByContent(filteredOptions, (o) => isCategory(o) ? `category-${o.category ?? "uncat"}` : `option-${String(o.value)}`).map(({ key, item: opt }) => {
-							if (isCategory(opt)) return /* @__PURE__ */ jsx("li", {
-								role: "presentation",
-								className: "px-4 py-2 text-sm font-bold theme-muted-text",
-								children: opt.category
-							}, key);
-							const option = opt;
-							return /* @__PURE__ */ jsx(ComboboxOption, {
-								value: option.value,
-								disabled: option.disabled ?? false,
-								"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,
-												tabIndex: -1,
-												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
-											})
-										})
-									]
-								})
-							}, key);
-						})
-					})]
-				})
-			]
-		})
-	});
-}
-//#endregion
-//#region src/components/SectionHeader.tsx
-function SectionHeader({ children, className = "", size = "md" }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cx("w-full font-semibold", size === "sm" ? "mb-2 text-sm theme-text" : "text-lg", className),
-		children
-	});
-}
-//#endregion
-//#region src/components/SwitchToggle.tsx
-function SwitchToggle({ onChange, id, "aria-describedby": describedBy, 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", {
-		...datatip ? {
-			"data-tooltip-content": datatip,
-			"data-tooltip-id": TOOLTIP_ID
-		} : {},
-		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, {
-			id,
-			"aria-describedby": describedBy,
-			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 { Dropdown as a, UncontrolledCollapsiblePanel as c, CustomListbox as i, SectionHeader as n, ControlledCollapsiblePanel as o, MultiSelectDropdown as r, MaybeCollapsible as s, SwitchToggle as t };