@youngonesworks/ui 0.1.103 → 0.1.105

package/dist/index.cjs

@@ -29,13 +29,12 @@ const __tabler_icons_react = __toESM(require("@tabler/icons-react"));
 const clsx = __toESM(require("clsx"));
 const tailwind_merge = __toESM(require("tailwind-merge"));
 const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
-const react_tooltip = __toESM(require("react-tooltip"));
+const __floating_ui_react = __toESM(require("@floating-ui/react"));
 const react_day_picker = __toESM(require("react-day-picker"));
 const date_fns = __toESM(require("date-fns"));
 const date_fns_locale = __toESM(require("date-fns/locale"));
-const __floating_ui_react = __toESM(require("@floating-ui/react"));
 const react_dom = __toESM(require("react-dom"));
-const react_select = __toESM(require("react-select"));
+const react_tooltip = __toESM(require("react-tooltip"));
 const __tiptap_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"));
 const __tiptap_extension_underline = __toESM(require("@tiptap/extension-underline"));
 const __tiptap_react = __toESM(require("@tiptap/react"));
@@ -115,6 +114,113 @@ const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ (0, react_
 	children
 });
 
+//#endregion
+//#region src/hooks/useMergeRefs.ts
+function useMergeRefs(...refs) {
+	return (0, react.useCallback)((value) => {
+		refs.forEach((ref) => {
+			if (typeof ref === "function") {
+				ref(value);
+			} else if (ref) {
+				ref.current = value;
+			}
+		});
+	}, [refs]);
+}
+
+//#endregion
+//#region src/components/tooltip/index.tsx
+const sizeClasses = {
+	xs: "max-w-xs",
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg"
+};
+const Tooltip = ({ content, children, passedOpen = false, size = "md", variant = "default" }) => {
+	const [isOpen, setIsOpen] = (0, react.useState)(passedOpen);
+	const arrowRef = (0, react.useRef)(null);
+	const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		placement: "top",
+		middleware: [
+			variant === "default" ? (0, __floating_ui_react.offset)(20) : (0, __floating_ui_react.offset)(25),
+			(0, __floating_ui_react.flip)(),
+			(0, __floating_ui_react.shift)(),
+			(0, __floating_ui_react.arrow)({ element: arrowRef })
+		],
+		whileElementsMounted: __floating_ui_react.autoUpdate
+	});
+	const hover = (0, __floating_ui_react.useHover)(context, { move: false });
+	const focus = (0, __floating_ui_react.useFocus)(context);
+	const dismiss = (0, __floating_ui_react.useDismiss)(context);
+	const role = (0, __floating_ui_react.useRole)(context, { role: "tooltip" });
+	const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)([
+		hover,
+		focus,
+		dismiss,
+		role
+	]);
+	const childRef = children.ref;
+	const mergedRef = useMergeRefs(refs.setReference, childRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react.isValidElement)(children) && (0, react.cloneElement)(children, getReferenceProps({
+		...children.props,
+		...getReferenceProps(),
+		ref: mergedRef
+	})), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: refs.setFloating,
+		style: floatingStyles,
+		...getFloatingProps(),
+		className: "z-70 drop-shadow-xl",
+		"data-testid": "tooltip",
+		"data-component": "tooltip",
+		children: variant === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-testid": "tooltip-container",
+			className: "w-full rounded bg-gray-800 pt-[3px] text-white",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-testid": "tooltip-content",
+				className: `${sizeClasses[size]} px-2 py-1 text-sm font-normal`,
+				children: content
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
+				ref: arrowRef,
+				context,
+				width: 10,
+				height: 6,
+				tipRadius: 1,
+				"data-testid": "tooltip-arrow",
+				className: "fill-gray-800 drop-shadow-xl"
+			})]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-testid": "tooltip-container",
+			className: "bg-linear-gradient-x pt-[3px]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-testid": "tooltip-content",
+				className: `${sizeClasses[size]} overflow-hidden bg-white p-5 px-2 py-1 text-start text-sm font-normal`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: content })
+			}), size === "md" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
+				ref: arrowRef,
+				context,
+				width: 25,
+				height: 17,
+				tipRadius: 1,
+				fill: "white",
+				className: "drop-shadow-xl",
+				"data-testid": "tooltip-arrow"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
+				ref: arrowRef,
+				context,
+				width: 10,
+				height: 6,
+				tipRadius: 1,
+				fill: "white",
+				className: "drop-shadow-xl",
+				"data-testid": "tooltip-arrow"
+			})]
+		})
+	})] });
+};
+Tooltip.displayName = "Tooltip";
+
 //#endregion
 //#region src/utils/enums.ts
 let ACTION_ICON_STYLE_VARIANT = /* @__PURE__ */ function(ACTION_ICON_STYLE_VARIANT$1) {
@@ -192,34 +298,35 @@ function formatIcon(icon, defaultFormatAttributes) {
 
 //#endregion
 //#region src/components/actionIcon/index.tsx
-const ActionIcon = (0, react.forwardRef)(({ title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }, ref) => {
+const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }) => {
 	const variantClassNames = (0, clsx.default)({
 		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.DEFAULT,
 		"active:translate-y-[1px] border-none content-center flex items-center justify-center rounded-[4px] border text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.TRANSPARENT,
 		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] child:p-10 w-[37px] h-[37px] text-black rounded-full bg-primary hover:bg-turquoise-700 disabled:turquoise-50 disabled:text-gray-800": styleVariant === ACTION_ICON_STYLE_VARIANT.ROUND,
 		"w-7 h-7 active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black hover:bg-gray-50 disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.SMALL
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		title,
-		type,
-		disabled,
-		"data-testid": testId,
-		"data-component": "ActionIcon",
-		className: cn(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
-		onClick,
-		ref,
-		"data-tooltip-id": title,
-		"data-tooltip-content": title,
-		...props,
-		children: icon ? formatIcon(icon, {
-			stroke: strokeWidth,
-			size: iconSize
-		}) : props.children
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_tooltip.Tooltip, {
-		id: title,
-		className: "z-[99]"
-	})] });
-});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+		size: "sm",
+		content: title,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			title,
+			type,
+			disabled,
+			"data-testid": testId,
+			"data-component": "ActionIcon",
+			className: cn(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
+			onClick,
+			ref,
+			"data-tooltip-id": title,
+			"data-tooltip-content": title,
+			...props,
+			children: icon ? formatIcon(icon, {
+				stroke: strokeWidth,
+				size: iconSize
+			}) : props.children
+		})
+	}) });
+};
 ActionIcon.displayName = "ActionIcon";
 
 //#endregion
@@ -1513,6 +1620,86 @@ const Island = ({ children, className, noShadow = false, noPadding = false,...pr
 });
 Island.displayName = "Island";
 
+//#endregion
+//#region src/components/kebabMenu/index.tsx
+const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "default" }) => {
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const menuRef = (0, react.useRef)(null);
+	const defaultStyling = "text-black flex items-center justify-self-end gap-1 bg-transparent font-medium py-1 h-9 min-w-9 cursor-pointer px-0";
+	const handleToggle = () => {
+		if (!disabled) setIsOpen((prev) => !prev);
+	};
+	const handleItemClick = (onClick) => {
+		if (!disabled) {
+			onClick();
+			setIsOpen(false);
+		}
+	};
+	const handleClickOutside = (event) => {
+		if (menuRef.current && !menuRef.current.contains(event.target)) setIsOpen(false);
+	};
+	(0, react.useEffect)(() => {
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, []);
+	const button = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UnstyledButton, {
+		"aria-label": "Options Menu",
+		className: cn(buttonVariants["secondary"], defaultStyling, {
+			"md:pr-3.5 md:pl-5": title,
+			"h-7 min-w-7": styleVariant === "small"
+		}),
+		disabled,
+		onClick: handleToggle,
+		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "hidden md:block",
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconDotsVertical, {
+			size: 20,
+			stroke: 1,
+			fill: "black"
+		})]
+	}), [
+		title,
+		styleVariant,
+		disabled,
+		handleToggle
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative",
+		"data-component": "kebabMenu",
+		"data-testid": "kebab-menu",
+		ref: menuRef,
+		"data-tooltip-id": title,
+		"data-tooltip-content": title,
+		children: [tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+			passedOpen: false,
+			size: "sm",
+			content: tooltip,
+			children: button
+		}) : button, isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "absolute right-0 z-10 mt-2 w-auto min-w-[200px] rounded-md border-[0.0625rem] border-gray-200 bg-white p-1 shadow-md",
+			children: content.map((c, index) => {
+				const button$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
+					onClick: () => handleItemClick(c.onClick),
+					className: "w-full rounded-md px-4 py-2 text-left text-sm font-normal whitespace-nowrap hover:bg-gray-50",
+					"aria-label": "Options Menu Item",
+					disabled: c.disabled,
+					children: c.title
+				});
+				return c.tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+					passedOpen: false,
+					size: "sm",
+					content: c.tooltip,
+					children: button$1
+				}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: button$1 }, index);
+			})
+		})]
+	}) });
+};
+KebabMenu.displayName = "KebabMenu";
+
 //#endregion
 //#region src/components/label/index.tsx
 const Label = ({ children, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
@@ -2153,183 +2340,289 @@ const SearchInput = ({ placeholder, value, onChange, className, rightSection,...
 	...props
 });
 
+//#endregion
+//#region src/hooks/useDebouncedValue.ts
+function useDebouncedValue(value, delay = 200) {
+	const [debouncedValue, setDebouncedValue] = (0, react.useState)(value);
+	(0, react.useEffect)(() => {
+		const handler = setTimeout(() => setDebouncedValue(value), delay);
+		return () => clearTimeout(handler);
+	}, [value, delay]);
+	return debouncedValue;
+}
+
 //#endregion
 //#region src/components/select/index.tsx
-const LANGUAGE_FLAGS = [
-	{
-		value: "nl-NL",
-		altValue: "nl_NL",
-		label: "nl"
-	},
-	{
-		value: "nl-BE",
-		altValue: "nl_BE",
-		label: "be"
-	},
-	{
-		value: "en-GB",
-		altValue: "en_GB",
-		label: "gb"
-	},
-	{
-		value: "fr-FR",
-		altValue: "fr_FR",
-		label: "fr"
-	}
-];
-const selectStyles = {
-	singleValue: (provided) => ({
-		...provided,
-		fontSize: "14px"
-	}),
-	placeholder: (provided) => ({
-		...provided,
-		color: "#838383",
-		fontSize: "14px",
-		textWrap: "nowrap"
-	}),
-	dropdownIndicator: (provided) => ({
-		...provided,
-		color: "black"
-	}),
-	option: (base, { isFocused, isSelected }) => ({
-		...base,
-		color: "black",
-		marginLeft: "4px",
-		marginRight: "4px",
-		backgroundColor: isSelected ? "#f8f8f8" : isFocused ? "#f8f8f8" : "transparent",
-		width: "calc(100% - 8px)",
-		cursor: "pointer"
-	}),
-	menuList: (provided) => ({
-		...provided,
-		fontSize: "14px"
-	})
-};
-const selectTheme = (theme) => ({
-	...theme,
-	borderRadius: 4,
-	colors: {
-		...theme.colors,
-		primary25: "#f8f8f8",
-		primary: "#f8f8f8"
-	}
-});
-const Select = (0, react.forwardRef)(({ options, placeholder, defaultValue, label, id, icon, error, className, labelClassNames, showLangFlags = false, hideErrorText = false, isClearable = true, fullWidth = true, width, isDisabled,...props }, ref) => {
-	const DropdownIndicator = (props$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.DropdownIndicator, {
-		...props$1,
-		children: props$1.hasValue && isClearable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconX, {
-			"data-testid": "icon-x",
-			className: "cursor-pointer",
-			size: 16,
-			color: "black",
-			onClick: () => props$1.clearValue()
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSelector, {
-			size: 16,
-			color: "black"
-		})
-	});
-	const GroupHeading = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-stretch px-4 py-2 font-normal text-[#838383] capitalize",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "flex-nowrap whitespace-nowrap",
-			children
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "ml-2 flex w-full flex-1 items-center justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-px w-full bg-[#838383]" })
-		})]
-	});
-	const LanguageControl = ({ children,...props$1 }) => {
-		const getSelectedFlag = () => {
-			const selectValue = props$1.selectProps.value;
-			const findFlag = (value) => LANGUAGE_FLAGS.find((e) => e.value === value || e.altValue === value)?.label || "";
-			if (typeof selectValue === "string") return findFlag(selectValue);
-			if (typeof selectValue === "object" && selectValue !== null && "value" in selectValue) return findFlag(selectValue.value);
-			return null;
-		};
-		const selectedFlag = getSelectedFlag();
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_select.components.Control, {
-			...props$1,
-			children: [selectedFlag && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex h-[39px] items-center border-r border-gray-200 p-3",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-					src: `/images/countries/${selectedFlag.toUpperCase()}_flag.svg`,
-					alt: "",
-					width: 24,
-					height: 24
-				})
-			}), children]
-		});
-	};
-	const NoOptionsMessage = (props$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.NoOptionsMessage, {
-		...props$1,
-		children: "noOptionsMessage"
-	});
-	const SingleValue = ({ children,...props$1 }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.SingleValue, {
-		...props$1,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "flex items-center",
-			children: [icon && icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "mx-2",
-				children
-			})]
-		})
+function Select({ id, options, placeholder, label, errorText, hideError = false, isClearable = false, disabled = false, multiSelect = false, searchable = false, value, defaultValue, onValueChange, className, searchPlaceholder, noResultsText,...props }) {
+	const innerRef = (0, react.useRef)(null);
+	const buttonRef = (0, react.useRef)(null);
+	const optionRefs = (0, react.useRef)([]);
+	const mergedRef = useMergeRefs(innerRef, props.ref);
+	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue);
+	const [open, setOpen] = (0, react.useState)(false);
+	const [searchTerm, setSearchTerm] = (0, react.useState)("");
+	const [focusedIndex, setFocusedIndex] = (0, react.useState)(-1);
+	const debouncedSearch = useDebouncedValue(searchTerm);
+	const isControlled = value !== undefined;
+	const currentValue = isControlled ? value : internalValue;
+	const selectedLabels = (0, react.useMemo)(() => {
+		if (Array.isArray(currentValue)) {
+			return options.filter((o) => currentValue.includes(o.value)).map((o) => o.label).join(", ");
+		}
+		return options.find((o) => o.value === currentValue)?.label;
+	}, [currentValue, options]);
+	const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
+		open,
+		onOpenChange: setOpen,
+		middleware: [
+			(0, __floating_ui_react.offset)(4),
+			(0, __floating_ui_react.flip)(),
+			(0, __floating_ui_react.shift)()
+		],
+		whileElementsMounted: __floating_ui_react.autoUpdate,
+		placement: "bottom-start"
 	});
+	const click = (0, __floating_ui_react.useClick)(context);
+	const dismiss = (0, __floating_ui_react.useDismiss)(context);
+	const role = (0, __floating_ui_react.useRole)(context, { role: "combobox" });
+	const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)([
+		click,
+		dismiss,
+		role
+	]);
+	const handleSelect = (0, react.useCallback)((val) => {
+		if (multiSelect) {
+			const current = Array.isArray(currentValue) ? currentValue : [];
+			const newValues = current.includes(val) ? current.filter((v) => v !== val) : [...current, val];
+			if (!isControlled) setInternalValue(newValues);
+			onValueChange?.(newValues);
+		} else {
+			if (!isControlled) setInternalValue(val);
+			onValueChange?.(val);
+			setOpen(false);
+			buttonRef.current?.focus();
+		}
+	}, [
+		multiSelect,
+		currentValue,
+		isControlled,
+		onValueChange
+	]);
+	const handleClear = (0, react.useCallback)((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!isControlled) setInternalValue(undefined);
+		onValueChange?.(undefined);
+		setSearchTerm("");
+	}, [isControlled, onValueChange]);
+	const showPlaceholder = !currentValue || Array.isArray(currentValue) && currentValue.length === 0;
+	const filteredOptions = (0, react.useMemo)(() => {
+		if (!debouncedSearch.trim()) return options;
+		return options.filter((opt) => opt.label.toLowerCase().includes(debouncedSearch.toLowerCase()));
+	}, [options, debouncedSearch]);
+	const handleKeyDown = (0, react.useCallback)((event) => {
+		if (disabled) return;
+		if (!open) {
+			if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				setOpen(true);
+				setTimeout(() => {
+					setFocusedIndex(0);
+					optionRefs.current[0]?.focus();
+				}, 0);
+			}
+			return;
+		}
+		switch (event.key) {
+			case "Escape":
+				event.preventDefault();
+				setOpen(false);
+				setFocusedIndex(-1);
+				buttonRef.current?.focus();
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				setFocusedIndex((prev) => {
+					const next = prev < filteredOptions.length - 1 ? prev + 1 : 0;
+					optionRefs.current[next]?.focus();
+					return next;
+				});
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				setFocusedIndex((prev) => {
+					const next = prev > 0 ? prev - 1 : filteredOptions.length - 1;
+					optionRefs.current[next]?.focus();
+					return next;
+				});
+				break;
+			case "Home":
+				event.preventDefault();
+				setFocusedIndex(0);
+				optionRefs.current[0]?.focus();
+				break;
+			case "End":
+				event.preventDefault();
+				setFocusedIndex(filteredOptions.length - 1);
+				optionRefs.current[filteredOptions.length - 1]?.focus();
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				if (focusedIndex >= 0 && filteredOptions[focusedIndex]) {
+					handleSelect(filteredOptions[focusedIndex].value);
+				}
+				break;
+		}
+	}, [
+		open,
+		filteredOptions,
+		focusedIndex,
+		handleSelect,
+		disabled
+	]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const listener = (e) => handleKeyDown(e);
+		document.addEventListener("keydown", listener);
+		return () => document.removeEventListener("keydown", listener);
+	}, [open, handleKeyDown]);
+	(0, react.useEffect)(() => {
+		if (!open) setSearchTerm("");
+	}, [open]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: mergedRef,
+		...props,
 		"data-component": "Select",
-		"data-testid": "select-container",
-		ref,
-		className: (0, clsx.default)("m-0 grid gap-2 p-0", width ? width : fullWidth && "w-full", className),
+		className: cn("grid gap-2 w-full", className),
+		role: "group",
+		"aria-labelledby": `${id}-label`,
 		children: [
-			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
-				className: cn("leading-4", labelClassNames),
-				children: label
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "leading-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
+					htmlFor: id,
+					children: label
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					id: `${id}-label`,
+					className: "sr-only",
+					children: label
+				})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.default, {
-				"data-component": "select",
-				"data-testid": "select-input",
-				options,
-				menuPlacement: "auto",
-				isDisabled,
-				defaultValue,
-				placeholder,
-				isClearable: false,
-				menuPortalTarget: document?.body,
-				styles: {
-					...selectStyles,
-					control: (base, state) => ({
-						...base,
-						"&:hover": { borderColor: "#A8A8A8" },
-						height: "40px",
-						width: "100%",
-						backgroundColor: "#fbfbfb",
-						borderColor: error ? "red" : state.isFocused ? "#10d1bb" : "#cccccc",
-						cursor: "pointer"
-					}),
-					menuPortal: (base) => ({
-						...base,
-						zIndex: 99999
-					})
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				id,
+				type: "button",
+				ref: (node) => {
+					refs.setReference(node);
+					buttonRef.current = node;
 				},
-				theme: selectTheme,
-				components: {
-					IndicatorSeparator: () => null,
-					DropdownIndicator,
-					GroupHeading,
-					Control: showLangFlags ? LanguageControl : react_select.components.Control,
-					SingleValue,
-					NoOptionsMessage
-				},
-				...props
-			}, id),
-			!hideErrorText && error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
-				className: "text-xs font-normal text-red-500",
+				...getReferenceProps(),
+				disabled,
+				className: cn("flex h-10 w-full items-center justify-between rounded-md border px-3 text-sm transition-colors bg-gray-20", "border-gray-200 hover:border-gray-300 focus:border-gray-300 outline-none", !hideError && errorText && "border-red-500 hover:border-red-500 focus:border-red-500", disabled && "opacity-50 cursor-not-allowed"),
+				"aria-haspopup": "listbox",
+				"aria-expanded": open,
+				"aria-disabled": disabled,
+				"aria-labelledby": `${id}-label`,
+				"aria-controls": `${id}-listbox`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-center gap-2 truncate text-black",
+					children: showPlaceholder ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-gray-200",
+						"aria-hidden": "true",
+						children: placeholder
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "truncate",
+						children: selectedLabels
+					})
+				}), isClearable && !showPlaceholder ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconX, {
+					size: 16,
+					color: "black",
+					className: "cursor-pointer",
+					"data-testid": "clear-button",
+					onPointerDown: handleClear,
+					role: "button",
+					"aria-label": "Clear selection"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSelector, {
+					size: 16,
+					color: "black",
+					"aria-hidden": "true"
+				})]
+			}),
+			open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingFocusManager, {
+				context,
+				modal: false,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: refs.setFloating,
+					style: {
+						...floatingStyles,
+						width: refs.reference.current?.offsetWidth ?? "auto"
+					},
+					...getFloatingProps(),
+					id: `${id}-listbox`,
+					role: "listbox",
+					"aria-labelledby": `${id}-label`,
+					className: cn("z-[99999] mt-2 rounded-md border border-gray-200 bg-white shadow-md", "overflow-hidden animate-in fade-in"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "p-1 text-sm max-h-[250px] overflow-auto",
+						children: [searchable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2 px-2 py-1 border-b border-gray-100 sticky top-0 bg-white",
+							role: "search",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconSearch, {
+								size: 14,
+								className: "text-gray-400",
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "text",
+								autoFocus: true,
+								value: searchTerm,
+								onChange: (e) => setSearchTerm(e.target.value),
+								placeholder: searchPlaceholder,
+								className: "w-full text-sm outline-none bg-transparent placeholder-gray-300",
+								"aria-label": "Search options"
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "mt-1 pr-2",
+							children: filteredOptions.length ? filteredOptions.map((opt, index) => {
+								const isSelected = Array.isArray(currentValue) ? currentValue.includes(opt.value) : currentValue === opt.value;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									ref: (el) => optionRefs.current[index] = el,
+									type: "button",
+									onClick: () => handleSelect(opt.value),
+									role: "option",
+									"aria-selected": isSelected,
+									tabIndex: -1,
+									className: cn("relative flex w-full items-center gap-2 rounded px-3 py-2 text-sm text-black select-none", "hover:bg-gray-50 mx-1 my-[2px]", isSelected && "bg-gray-50", focusedIndex === index && "bg-gray-50 ring-1 ring-primary"),
+									children: [multiSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: cn("flex h-4 w-4 items-center justify-center rounded-sm border", isSelected ? "border-light-blue bg-light-blue" : "border-gray-400 bg-white"),
+										"aria-hidden": "true",
+										children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconCheck, {
+											size: 12,
+											color: "white",
+											stroke: 2,
+											className: "pointer-events-none"
+										})
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "flex-1 text-left",
+										children: opt.label
+									})]
+								}, opt.value);
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "px-3 py-2 text-gray-400",
+								role: "status",
+								children: noResultsText
+							})
+						})]
+					})
+				})
+			}) }),
+			!hideError && errorText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs text-red-500",
 				role: "alert",
-				children: error
+				children: errorText
 			})
 		]
 	});
-});
+}
 Select.displayName = "Select";
 
 //#endregion
@@ -2734,97 +3027,6 @@ const Toggle = ({ onClick, value, disabled = false }) => {
 	});
 };
 
-//#endregion
-//#region src/components/tooltip/index.tsx
-const sizeClasses = {
-	xs: "max-w-xs",
-	sm: "max-w-sm",
-	md: "max-w-md",
-	lg: "max-w-lg"
-};
-const Tooltip = ({ content, children, passedOpen = false, size = "md", variant = "default" }) => {
-	const [isOpen, setIsOpen] = (0, react.useState)(passedOpen);
-	const arrowRef = (0, react.useRef)(null);
-	const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
-		open: isOpen,
-		onOpenChange: setIsOpen,
-		placement: "top",
-		middleware: [
-			variant === "default" ? (0, __floating_ui_react.offset)(20) : (0, __floating_ui_react.offset)(25),
-			(0, __floating_ui_react.flip)(),
-			(0, __floating_ui_react.shift)(),
-			(0, __floating_ui_react.arrow)({ element: arrowRef })
-		],
-		whileElementsMounted: __floating_ui_react.autoUpdate
-	});
-	const hover = (0, __floating_ui_react.useHover)(context, { move: false });
-	const focus = (0, __floating_ui_react.useFocus)(context);
-	const dismiss = (0, __floating_ui_react.useDismiss)(context);
-	const role = (0, __floating_ui_react.useRole)(context, { role: "tooltip" });
-	const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)([
-		hover,
-		focus,
-		dismiss,
-		role
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react.isValidElement)(children) && (0, react.cloneElement)(children, getReferenceProps({
-		ref: refs.setReference,
-		...children.props,
-		...getReferenceProps()
-	})), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: refs.setFloating,
-		style: floatingStyles,
-		...getFloatingProps(),
-		className: "z-70 drop-shadow-xl",
-		"data-testid": "tooltip",
-		"data-component": "tooltip",
-		children: variant === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-testid": "tooltip-container",
-			className: "w-full rounded bg-gray-800 pt-[3px] text-white",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				"data-testid": "tooltip-content",
-				className: `${sizeClasses[size]} px-2 py-1 text-sm font-normal`,
-				children: content
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
-				ref: arrowRef,
-				context,
-				width: 10,
-				height: 6,
-				tipRadius: 1,
-				"data-testid": "tooltip-arrow",
-				className: "fill-gray-800 drop-shadow-xl"
-			})]
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-testid": "tooltip-container",
-			className: "bg-linear-gradient-x pt-[3px]",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				"data-testid": "tooltip-content",
-				className: `${sizeClasses[size]} overflow-hidden bg-white p-5 px-2 py-1 text-start text-sm font-normal`,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: content })
-			}), size === "md" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
-				ref: arrowRef,
-				context,
-				width: 25,
-				height: 17,
-				tipRadius: 1,
-				fill: "white",
-				className: "drop-shadow-xl",
-				"data-testid": "tooltip-arrow"
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
-				ref: arrowRef,
-				context,
-				width: 10,
-				height: 6,
-				tipRadius: 1,
-				fill: "white",
-				className: "drop-shadow-xl",
-				"data-testid": "tooltip-arrow"
-			})]
-		})
-	})] });
-};
-Tooltip.displayName = "Tooltip";
-
 //#endregion
 //#region src/components/truncatedText/index.tsx
 const TruncatedText = ({ text, limit = 20 }) => {
@@ -3195,6 +3397,7 @@ exports.GoogleAppButtonIcon = GoogleAppButtonIcon;
 exports.HR = HR;
 exports.HamburgerMenuButton = HamburgerMenuButton;
 exports.Island = Island;
+exports.KebabMenu = KebabMenu;
 exports.Label = Label;
 exports.Loader = Loader;
 exports.LogoBlack = LogoBlack;