@andrilla/mado-ui 1.0.11 → 1.1.1

package/dist/components/index.js

@@ -1,8 +1,8 @@
 import { extendTailwindMerge, twJoin } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button as Button$1, Checkbox as Checkbox$1, Description, Dialog, DialogBackdrop, DialogPanel, DialogTitle, Disclosure, DisclosureButton, DisclosurePanel, Field, Fieldset as Fieldset$1, Input as Input$1, Label, Legend, Listbox, ListboxButton, ListboxOption, ListboxOptions, ListboxSelectedOption, Menu, MenuButton, MenuHeading, MenuItem, MenuItems, MenuSection, MenuSeparator, Textarea as Textarea$1 } from "@headlessui/react";
+import { Button as Button$1, Checkbox as Checkbox$1, Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Description, Dialog, DialogBackdrop, DialogPanel, DialogTitle, Disclosure, DisclosureButton, DisclosurePanel, Field, Fieldset as Fieldset$1, Input as Input$1, Label, Legend, Listbox, ListboxButton, ListboxOption, ListboxOptions, ListboxSelectedOption, Menu, MenuButton, MenuHeading, MenuItem, MenuItems, MenuSection, MenuSeparator, Textarea as Textarea$1 } from "@headlessui/react";
 import * as React from "react";
-import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useEffectEvent, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import * as ReactDOM from "react-dom";
 import { createPortal } from "react-dom";
 //#region src/utils/custom-tailwind-merge.ts
@@ -1251,7 +1251,7 @@ if (isBrowser) {
 * @param  {String} str
 * @return {String}
 */
-const toLowerCase = (str) => str.replace(lowerCaseRgx, "$1-$2").toLowerCase();
+const toLowerCase$1 = (str) => str.replace(lowerCaseRgx, "$1-$2").toLowerCase();
 /**
 * Prioritize this method instead of regex when possible
 * @param  {String} str
@@ -1889,7 +1889,7 @@ const sanitizePropertyName = (propertyName, target, tweenType) => {
 		const cachedPropertyName = propertyNamesCache[propertyName];
 		if (cachedPropertyName) return cachedPropertyName;
 		else {
-			const lowerCaseName = propertyName ? toLowerCase(propertyName) : propertyName;
+			const lowerCaseName = propertyName ? toLowerCase$1(propertyName) : propertyName;
 			propertyNamesCache[propertyName] = lowerCaseName;
 			return lowerCaseName;
 		}
@@ -1922,7 +1922,7 @@ const cleanInlineStyles = (renderable) => {
 						for (let key in cachedTransforms) str += transformsFragmentStrings[key] + cachedTransforms[key] + ") ";
 						targetStyle.transform = str;
 					}
-				} else if (tweenHadNoInlineValue) targetStyle.removeProperty(toLowerCase(tweenProperty));
+				} else if (tweenHadNoInlineValue) targetStyle.removeProperty(toLowerCase$1(tweenProperty));
 				else targetStyle[tweenProperty] = originalInlinedValue;
 				if (animation._tail === tween) animation.targets.forEach((t) => {
 					if (t.getAttribute && t.getAttribute("style") === "") t.removeAttribute("style");
@@ -3970,6 +3970,20 @@ function getWeekdayName(weekday = d) {
 	return weekdayNamesList[weekday.getDay()];
 }
 //#endregion
+//#region src/utils/string-manipulation.ts
+/**
+* # To Lower Case
+* Converts a string to lowercase, and offers easy string replacements for creating snake case, kebab case, or your own.
+* @param str - The string to convert to lowercase.
+* @param options - Configuration options.
+* @param options[0] - The delimiter to split the string. Defaults to space.
+* @param options[1] - The string to join the parts back together. Defaults to space.
+* @returns The lowercase version of the input string, with the replacements, if provided.
+*/
+function toLowerCase(str, [delimiter, joiner]) {
+	return str.toLowerCase().replaceAll(delimiter || " ", joiner || " ");
+}
+//#endregion
 //#region src/components/chevron-up-down-anime.tsx
 function ChevronUpDownAnime({ className, isUp = false }) {
 	const firstLoadRef = useRef(true);
@@ -6209,46 +6223,43 @@ function Input({ children, className, description, descriptionProps: { className
 }
 //#endregion
 //#region src/hooks/create-fast-context.tsx
-function createFastContext(defaultInitialState) {
-	function useStoreData(initialState = defaultInitialState) {
-		const store = useRef(initialState), get = () => store.current, subscribers = useRef(/* @__PURE__ */ new Set());
-		const set = (value) => {
-			if (typeof value === "function") store.current = value(store.current);
-			else store.current = value;
-			subscribers.current.forEach((callback) => callback());
-		};
-		const subscribe = (callback) => {
-			subscribers.current.add(callback);
-			return () => subscribers.current.delete(callback);
-		};
+function createFastContext(initialState) {
+	function useStoreData() {
+		const store = useRef(initialState);
+		const get = useCallback(() => store.current, []);
+		const subscribers = useRef(/* @__PURE__ */ new Set());
 		return {
 			get,
-			set,
-			subscribe
+			set: useCallback((value) => {
+				store.current = {
+					...store.current,
+					...value
+				};
+				subscribers.current.forEach((callback) => callback());
+			}, []),
+			subscribe: useCallback((callback) => {
+				subscribers.current.add(callback);
+				return () => subscribers.current.delete(callback);
+			}, [])
 		};
 	}
 	const StoreContext = createContext(null);
-	function Provider({ initialValue = defaultInitialState, ...props }) {
+	function Provider({ children }) {
 		return /* @__PURE__ */ jsx(StoreContext.Provider, {
-			value: useStoreData(initialValue),
-			...props
+			value: useStoreData(),
+			children
 		});
 	}
-	function useStore(selector, initialValue) {
+	function useStore(selector) {
 		const store = useContext(StoreContext);
-		if (!store) {
-			const selectedValue = selector(initialValue !== void 0 ? initialValue : defaultInitialState);
-			const noOpSet = () => console.warn("Attempting to set store value outside of Provider");
-			return [selectedValue, noOpSet];
-		}
-		return [useSyncExternalStore(store.subscribe, () => selector(store.get()), () => selector(initialValue !== void 0 ? initialValue : defaultInitialState)), store.set];
+		if (!store) throw new Error("Store not found");
+		return [useSyncExternalStore(store.subscribe, () => selector(store.get()), () => selector(initialState)), store.set];
 	}
 	return {
 		Provider,
 		useStore
 	};
 }
-const { Provider, useStore } = createFastContext("incomplete");
 //#endregion
 //#region src/hooks/use-mobile-device.ts
 function useMobileDevice() {
@@ -6346,7 +6357,7 @@ function ModalTitle({ as, ref, ...props }) {
 		ref
 	});
 }
-function ModalDialog(props) {
+function ModalDialog({ dialogPanelProps: { className: dialogPanelClassName, style: dialogPanelStyle, ...dialogPanelProps } = {}, modalScrollContainerProps: { className: modalScrollContainerClassName, ...modalScrollContainerProps } = {}, ...props }) {
 	const [modalControls, setModalControls] = useModalControls((store) => store), isMobileDevice = useMobileDevice();
 	const { className, closeModal, dialogPanelRef, isOpen, place, pseudoContainerRef, readyToClose } = modalControls || {};
 	const [dialogPanelEl, setDialogPanelEl] = useState(null);
@@ -6382,17 +6393,11 @@ function ModalDialog(props) {
 				if (!setModalControls) return;
 				if (progressY >= DRAG_TO_CLOSE_PROGRESS && !readyToCloseRef.current) {
 					readyToCloseRef.current = true;
-					setModalControls((prev) => ({
-						...prev,
-						readyToClose: true
-					}));
+					setModalControls({ readyToClose: true });
 				}
 				if (progressY < DRAG_TO_CLOSE_PROGRESS && readyToCloseRef.current) {
 					readyToCloseRef.current = false;
-					setModalControls((prev) => ({
-						...prev,
-						readyToClose: false
-					}));
+					setModalControls({ readyToClose: false });
 				}
 			},
 			trigger: draggableTrigger
@@ -6409,7 +6414,6 @@ function ModalDialog(props) {
 		pseudoContainer.style.width = `${width}px`;
 		pseudoContainer.style.height = `100dvh`;
 		pseudoContainer.style.zIndex = "-1";
-		pseudoContainer.style.border = "2px solid blue";
 		document.body.appendChild(pseudoContainer);
 		animate(dialogPanel, {
 			...isMobileDevice ? {
@@ -6477,8 +6481,12 @@ function ModalDialog(props) {
 			})
 		}), /* @__PURE__ */ jsxs(DialogPanel, {
 			ref: setDialogPanelRef,
-			className: twMerge("fixed left-1/2 w-screen -translate-x-1/2 bg-neutral-50 px-4 shadow-[0_-15px_50px_-12px] shadow-neutral-950/25 ease-exponential sm:w-[calc(100vw-2rem)] sm:max-w-fit sm:px-6 sm:shadow-2xl lg:px-8 dark:bg-neutral-900", place === "center" ? "top-1/2 -translate-y-1/2 rounded-2xl" : "bottom-0 h-fit max-h-[calc(100dvh-4rem)] translate-y-0 rounded-ss-4xl rounded-se-4xl after:absolute after:inset-x-0 after:-bottom-64 after:h-64 after:bg-inherit sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2 sm:rounded-ee-4xl sm:rounded-es-4xl sm:after:hidden pointer-fine:top-1/2 pointer-fine:bottom-auto pointer-fine:-translate-y-1/2 pointer-fine:rounded-3xl", className),
-			style: isMobileDevice ? void 0 : { opacity: 0 },
+			...dialogPanelProps,
+			className: twMerge("fixed left-1/2 w-screen -translate-x-1/2 bg-neutral-50 shadow-[0_-15px_50px_-12px] shadow-neutral-950/25 ease-exponential sm:w-[calc(100vw-2rem)] sm:max-w-fit sm:shadow-2xl dark:bg-neutral-900", place === "center" ? "top-1/2 -translate-y-1/2 rounded-2xl" : "bottom-0 h-fit max-h-[calc(100dvh-4rem)] translate-y-0 rounded-ss-4xl rounded-se-4xl after:absolute after:inset-x-0 after:-bottom-64 after:h-64 after:bg-inherit sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2 sm:rounded-ee-4xl sm:rounded-es-4xl sm:after:hidden pointer-fine:top-1/2 pointer-fine:bottom-auto pointer-fine:-translate-y-1/2 pointer-fine:rounded-3xl", dialogPanelClassName),
+			style: {
+				...dialogPanelStyle,
+				...isMobileDevice ? {} : { opacity: 0 }
+			},
 			children: [/* @__PURE__ */ jsx("button", {
 				className: "absolute inset-x-0 top-0 z-10 flex h-6 cursor-grab items-center justify-center after:h-1 after:w-8 after:rounded-full after:bg-neutral-500/50 after:transition-[scale,background-color] after:duration-500 after:ease-exponential active:cursor-grabbing active:after:scale-x-150 active:after:scale-y-125 active:after:bg-neutral-500 data-ready:after:scale-x-200 data-ready:after:scale-y-200 data-ready:after:bg-(--base-theme-color) pointer-fine:hover:after:scale-x-125 pointer-fine:hover:after:bg-neutral-500/75 pointer-fine:active:after:scale-x-150 pointer-fine:active:after:bg-neutral-500 data-ready:pointer-fine:hover:after:scale-x-200 data-ready:pointer-fine:hover:after:scale-y-200 data-ready:pointer-fine:hover:after:bg-(--base-theme-color) data-ready:pointer-fine:active:after:scale-x-200 data-ready:pointer-fine:active:after:scale-y-200 data-ready:pointer-fine:active:after:bg-(--base-theme-color)",
 				...readyToClose ? { "data-ready": "" } : {},
@@ -6489,10 +6497,11 @@ function ModalDialog(props) {
 					children: "Drag down to close"
 				})
 			}), /* @__PURE__ */ jsx("div", {
-				className: "overflow-y-scroll",
+				...modalScrollContainerProps,
+				className: twMerge("h-fit max-h-[calc(100dvh-4rem)] overflow-y-scroll px-4 sm:px-6 lg:px-8", modalScrollContainerClassName),
 				children: /* @__PURE__ */ jsx("div", {
 					...props,
-					className: "py-4 sm:py-6 lg:py-8"
+					className: twMerge("h-full py-3 sm:py-5 lg:py-7", className)
 				})
 			})]
 		})]
@@ -6525,11 +6534,10 @@ function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }
 	const closeFunctions = () => {
 		onClose?.();
 		modalControls?.pseudoContainerRef?.current?.remove();
-		setModalControls?.((previous) => ({
-			...previous,
+		setModalControls?.({
 			pseudoContainerRef: { current: null },
 			readyToClose: false
-		}));
+		});
 	};
 	const mobileAnimation = {
 		y: "100%",
@@ -6558,15 +6566,14 @@ function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }
 		});
 	};
 	useEffect(() => {
-		setModalControls?.((previous) => ({
-			...previous,
+		setModalControls?.({
 			isOpen,
 			place,
 			className,
 			openModal,
 			closeModal,
 			dialogPanelRef: localDialogPanelRef
-		}));
+		});
 	}, [
 		className,
 		closeModal,
@@ -6633,6 +6640,10 @@ function ChevronUpChevronDown({ weight = "regular", ...props }) {
 }
 //#endregion
 //#region src/components/select.tsx
+const { Provider: SelectContextProvider, useStore: useSelectContext } = createFastContext({
+	multiple: false,
+	selectedOptionDisplayProps: {}
+});
 /**
 * ## Select Section Title
 *
@@ -6647,48 +6658,32 @@ function SelectSectionTitle({ className, ...props }) {
 /**
 * ## SelectOption
 *
-* @prop children - This is what is displayed in the drop down menu
-* @prop name - This is displayed in the trigger button
-* @prop value - This is used for FormData
-*/
-function SelectOption({ children, className, name, ...props }) {
+* @prop children - This is what is displayed in the drop down menu.
+* @prop name - This is displayed in the trigger button.
+* @prop value - This is used for FormData.
+* @prop selectedDisplayProps - This is used to customize the display of the selected option (takes priority over selectedOptionDisplayProps).
+*/
+function SelectOption({ children, className, name, selectedDisplayProps: { children: selectedDisplayChildren, className: selectedDisplayClassName, ...selectedDisplayProps } = {}, ...props }) {
+	const [selectContext] = useSelectContext((store) => store), { multiple, selectedOptionDisplayProps } = selectContext || {};
+	const { children: selectedOptionDisplayChildren, className: selectedOptionDisplayClassName } = selectedOptionDisplayProps || {};
 	return /* @__PURE__ */ jsx(ListboxOption, {
 		className: "group/option contents",
 		...props,
 		children: (bag) => bag.selectedOption ? /* @__PURE__ */ jsx("span", {
-			className: `mr-3 before:absolute before:-left-3 before:content-[',_']`,
-			children: name
+			...selectedOptionDisplayProps,
+			...selectedDisplayProps,
+			className: twMerge(!selectedDisplayClassName && !selectedOptionDisplayClassName && multiple && `before:content-[',_'] group-first-of-type/option:before:content-['']`, selectedOptionDisplayClassName, selectedDisplayClassName),
+			children: selectedDisplayChildren ? typeof selectedDisplayChildren === "function" ? selectedDisplayChildren(name) : selectedDisplayChildren : selectedOptionDisplayChildren ? typeof selectedOptionDisplayChildren === "function" ? selectedOptionDisplayChildren(name) : selectedOptionDisplayChildren : name
 		}) : /* @__PURE__ */ jsxs("div", {
-			className: twMerge("flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-[background-color] duration-200 ease-exponential select-none [--theme-color:var(--base-theme-color)] corner-super-1.5 group-disabled/option:opacity-50 group-data-focus/option:bg-(--theme-color)/15 group-data-selected/option:cursor-default group-data-selected/option:text-(--theme-color) group-data-focus/option:group-data-selected/option:bg-transparent dark:group-data-focus/option:bg-(--theme-color)/15", className),
-			children: [/* @__PURE__ */ jsx(Checkmark, { className: "invisible size-3.5 group-data-selected/option:visible" }), typeof children === "function" ? children(bag) : children]
+			className: twMerge("flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-[background-color,color] duration-200 ease-exponential select-none [--theme-color:var(--base-theme-color)] corner-super-1.5 group-disabled/option:opacity-50 group-data-focus/option:bg-(--theme-color)/15 group-data-selected/option:text-(--theme-color) dark:group-data-focus/option:bg-(--theme-color)/15", !multiple && "group-data-selected/option:cursor-default group-data-focus/option:group-data-selected/option:bg-transparent", className),
+			children: [/* @__PURE__ */ jsx(Checkmark, { className: "size-3.5 scale-70 opacity-0 transition-[opacity,scale] duration-200 ease-exponential group-data-selected/option:scale-100 group-data-selected/option:opacity-100" }), typeof children === "function" ? children(bag) : children]
 		})
 	});
 }
-/**
-* # Select
-*
-* A customizable select component intended to work very similar to HTML's `<select>` element.
-*
-* Use the `SelectOption` component to define the options.
-*
-* Use the `SelectSectionTitle` component to define titles.
-*
-* @prop label - The label for the select component.
-* @prop description - The description for the select component.
-* @prop placeholder - The placeholder for the select component.
-* @prop required - Whether the select component is required.
-* @prop invalid - Whether the select component is invalid.
-* @prop multiple - Whether the select component allows multiple selections.
-* @prop optionsProps - The props to be passed to each SelectOption component.
-* @prop selectedOptionProps - The props to be passed to the selected option component.
-* @prop fieldProps - The props to be passed to the parent field component.
-* @prop labelProps - The props to be passed to the label component.
-* @prop descriptionProps - The props to be passed to the description component.
-* @prop anchor - The anchor point for the drop down menu.
-*/
-function Select({ buttonProps, children, className, description, descriptionProps: { className: descriptionClassName, ...descriptionProps } = {}, fieldProps: { className: fieldClassName, ...fieldProps } = {}, invalid, label, labelProps: { className: labelClassName, ...labelProps } = {}, onChange, optionsProps: { anchor, className: optionsClassName, transition, ...optionsProps } = {}, placeholder, required, selectedOptionProps: { ...selectedOptionProps } = {}, ...props }) {
+function SelectField({ buttonProps, children, className, description, descriptionProps: { className: descriptionClassName, ...descriptionProps } = {}, fieldProps: { className: fieldClassName, ...fieldProps } = {}, invalid, label, labelProps: { className: labelClassName, ...labelProps } = {}, onChange, optionsProps: { anchor, className: optionsClassName, transition, ...optionsProps } = {}, placeholder, required, selectedOptionProps, selectedOptionDisplayProps, ...props }) {
 	const uniqueId = useId();
-	const multiple = props.multiple;
+	const multiple = Boolean(props.multiple);
+	const [, setSelectContext] = useSelectContext((store) => store);
 	const selectOptionList = Children.toArray(children).filter((child) => isValidElement(child) && child.props && typeof child.props === "object" && "name" in child.props && "value" in child.props && "children" in child.props);
 	const listboxButtonRef = useRef(null);
 	const [isInvalid, setIsInvalid] = useState(invalid);
@@ -6700,6 +6695,15 @@ function Select({ buttonProps, children, className, description, descriptionProp
 	};
 	const handleInvalid = () => setIsInvalid(true);
 	const refocus = () => listboxButtonRef.current?.focus();
+	const onVisible = useEffectEvent(() => {
+		setSelectContext?.({
+			multiple,
+			selectedOptionDisplayProps
+		});
+	});
+	useEffect(() => {
+		onVisible();
+	}, []);
 	return /* @__PURE__ */ jsxs(Field, {
 		...fieldProps,
 		className: (bag) => twMerge("grid gap-1", typeof fieldClassName === "function" ? fieldClassName(bag) : fieldClassName),
@@ -6756,6 +6760,382 @@ function Select({ buttonProps, children, className, description, descriptionProp
 		]
 	});
 }
+/**
+* # Select
+*
+* A customizable select component intended to work very similar to HTML's `<select>` element.
+*
+* Use the `SelectOption` component to define the options.
+*
+* Use the `SelectSectionTitle` component to define titles.
+*
+* @prop label - The label for the select component.
+* @prop description - The description for the select component.
+* @prop placeholder - The placeholder for the select component.
+* @prop required - Whether the select component is required.
+* @prop invalid - Whether the select component is invalid.
+* @prop multiple - Whether the select component allows multiple selections.
+* @prop optionsProps - The props to be passed to each SelectOption component.
+* @prop selectedOptionProps - The props to be passed to the selected option component.
+* @prop selectedOptionDisplayProps - The props to be passed to each selected option in the selected option component.
+* @prop fieldProps - The props to be passed to the parent field component.
+* @prop labelProps - The props to be passed to the label component.
+* @prop descriptionProps - The props to be passed to the description component.
+* @prop anchor - The anchor point for the drop down menu.
+*/
+function Select(props) {
+	return /* @__PURE__ */ jsx(SelectContextProvider, { children: /* @__PURE__ */ jsx(SelectField, { ...props }) });
+}
+//#endregion
+//#region src/symbols/plus.tsx
+function Plus({ weight = "regular", ...props }) {
+	switch (weight) {
+		case "ultralight": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -65.2349 59.96 59.96",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M40.8828-6.4126L40.8828-64.0952C40.8828-64.7417 40.3511-65.2349 39.7466-65.2349C39.1421-65.2349 38.6069-64.7417 38.6069-64.0952L38.6069-6.4126C38.6069-5.76611 39.1421-5.27293 39.7466-5.27293C40.3511-5.27293 40.8828-5.76611 40.8828-6.4126ZM10.9053-34.1142L68.5879-34.1142C69.2344-34.1142 69.7242-34.6494 69.7242-35.2539C69.7242-35.8584 69.2344-36.3936 68.5879-36.3936L10.9053-36.3936C10.2554-36.3936 9.76562-35.8584 9.76562-35.2539C9.76562-34.6494 10.2554-34.1142 10.9053-34.1142Z" })
+		});
+		case "thin": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -65.6758 60.83 60.84",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M41.9492-6.60743L41.9492-63.9004C41.9492-64.875 41.1406-65.6758 40.1875-65.6758C39.2344-65.6758 38.4121-64.875 38.4121-63.9004L38.4121-6.60743C38.4121-5.63281 39.2344-4.83202 40.1875-4.83202C41.1406-4.83202 41.9492-5.63281 41.9492-6.60743ZM11.541-33.4785L68.834-33.4785C69.8086-33.4785 70.5957-34.3008 70.5957-35.2539C70.5957-36.207 69.8086-37.0293 68.834-37.0293L11.541-37.0293C10.5527-37.0293 9.76562-36.207 9.76562-35.2539C9.76562-34.3008 10.5527-33.4785 11.541-33.4785Z" })
+		});
+		case "light": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -66.5366 62.53 62.57",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M44.0313-6.9878L44.0313-63.52C44.0313-65.1353 42.6821-66.5366 41.0483-66.5366C39.4146-66.5366 38.0317-65.1353 38.0317-63.52L38.0317-6.9878C38.0317-5.37256 39.4146-3.97119 41.0483-3.97119C42.6821-3.97119 44.0313-5.37256 44.0313-6.9878ZM12.7822-32.2373L69.3145-32.2373C70.9297-32.2373 72.2974-33.6201 72.2974-35.2539C72.2974-36.8877 70.9297-38.2705 69.3145-38.2705L12.7822-38.2705C11.1333-38.2705 9.76562-36.8877 9.76562-35.2539C9.76562-33.6201 11.1333-32.2373 12.7822-32.2373Z" })
+		});
+		case "regular": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -67.1875 63.82 63.87",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M45.6055-7.27539L45.6055-63.2324C45.6055-65.332 43.8477-67.1875 41.6992-67.1875C39.5508-67.1875 37.7441-65.332 37.7441-63.2324L37.7441-7.27539C37.7441-5.17578 39.5508-3.32031 41.6992-3.32031C43.8477-3.32031 45.6055-5.17578 45.6055-7.27539ZM13.7207-31.2988L69.6777-31.2988C71.7773-31.2988 73.584-33.1055 73.584-35.2539C73.584-37.4023 71.7773-39.209 69.6777-39.209L13.7207-39.209C11.5723-39.209 9.76562-37.4023 9.76562-35.2539C9.76562-33.1055 11.5723-31.2988 13.7207-31.2988Z" })
+		});
+		case "medium": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -67.6006 64.67 64.71",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M46.8623-7.6709L46.8623-62.8193C46.8623-65.3936 44.7354-67.6006 42.1211-67.6006C39.5068-67.6006 37.3398-65.3936 37.3398-62.8193L37.3398-7.6709C37.3398-5.09668 39.5068-2.88965 42.1211-2.88965C44.7354-2.88965 46.8623-5.09668 46.8623-7.6709ZM14.5469-30.4639L69.6953-30.4639C72.2695-30.4639 74.4365-32.6309 74.4365-35.2451C74.4365-37.8594 72.2695-40.0264 69.6953-40.0264L14.5469-40.0264C11.9326-40.0264 9.76562-37.8594 9.76562-35.2451C9.76562-32.6309 11.9326-30.4639 14.5469-30.4639Z" })
+		});
+		case "semibold": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -67.9173 65.32 65.36",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M47.8259-7.97412L47.8259-62.5026C47.8259-65.4407 45.4159-67.9173 42.4445-67.9173C39.4731-67.9173 37.0299-65.4407 37.0299-62.5026L37.0299-7.97412C37.0299-5.03604 39.4731-2.55947 42.4445-2.55947C45.4159-2.55947 47.8259-5.03604 47.8259-7.97412ZM15.1803-29.8237L69.7088-29.8237C72.6469-29.8237 75.0901-32.267 75.0901-35.2384C75.0901-38.2098 72.6469-40.653 69.7088-40.653L15.1803-40.653C12.2089-40.653 9.76562-38.2098 9.76562-35.2384C9.76562-32.267 12.2089-29.8237 15.1803-29.8237Z" })
+		});
+		case "bold": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -68.335 66.19 66.21",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M49.0967-8.37402L49.0967-62.085C49.0967-65.5029 46.3135-68.335 42.8711-68.335C39.4287-68.335 36.6211-65.5029 36.6211-62.085L36.6211-8.37402C36.6211-4.95605 39.4287-2.12402 42.8711-2.12402C46.3135-2.12402 49.0967-4.95605 49.0967-8.37402ZM16.0156-28.9795L69.7266-28.9795C73.1445-28.9795 75.9521-31.7871 75.9521-35.2295C75.9521-38.6719 73.1445-41.4795 69.7266-41.4795L16.0156-41.4795C12.5732-41.4795 9.76562-38.6719 9.76562-35.2295C9.76562-31.7871 12.5732-28.9795 16.0156-28.9795Z" })
+		});
+		case "heavy": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -68.9408 67.44 67.45",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M50.9399-8.95406L50.9399-61.4791C50.9399-65.5932 47.6153-68.9408 43.4898-68.9408C39.3643-68.9408 36.0282-65.5932 36.0282-61.4791L36.0282-8.95406C36.0282-4.84005 39.3643-1.49243 43.4898-1.49243C47.6153-1.49243 50.9399-4.84005 50.9399-8.95406ZM17.2272-27.755L69.7523-27.755C73.8663-27.755 77.2024-31.0911 77.2024-35.2166C77.2024-39.3421 73.8663-42.6782 69.7523-42.6782L17.2272-42.6782C13.1017-42.6782 9.76562-39.3421 9.76562-35.2166C9.76562-31.0911 13.1017-27.755 17.2272-27.755Z" })
+		});
+		case "black": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -69.4824 68.55 68.55",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M52.5879-9.47266L52.5879-60.9375C52.5879-65.6738 48.7793-69.4824 44.043-69.4824C39.3066-69.4824 35.498-65.6738 35.498-60.9375L35.498-9.47266C35.498-4.73633 39.3066-0.927734 44.043-0.927734C48.7793-0.927734 52.5879-4.73633 52.5879-9.47266ZM18.3105-26.6602L69.7754-26.6602C74.5117-26.6602 78.3203-30.4688 78.3203-35.2051C78.3203-39.9414 74.5117-43.75 69.7754-43.75L18.3105-43.75C13.5742-43.75 9.76562-39.9414 9.76562-35.2051C9.76562-30.4688 13.5742-26.6602 18.3105-26.6602Z" })
+		});
+	}
+}
+//#endregion
+//#region src/components/search.tsx
+const { Provider: SearchContextProvider, useStore: useSearchContext } = createFastContext({
+	multiple: false,
+	query: "",
+	selectedOptionDisplayProps: {},
+	selectedOptionList: []
+});
+/**
+* ## Search Section Title
+*
+* Displays a simple title.
+*/
+function SearchSectionTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: twMerge("sticky -top-1 z-10 -mx-1 bg-inherit mask-t-from-transparent mask-t-from-0 mask-t-to-white mask-t-to-1.5 pl-2 font-bold text-neutral-500/50 backdrop-blur-[2px] backdrop-brightness-101", className),
+		...props
+	});
+}
+/**
+* ## SearchOption
+*
+* @prop children - This is what is displayed in the drop down menu
+* @prop name - This is used for filtering by default
+* @prop value - This is used as selected value and for FormData
+*/
+function SearchOption({ children, className, isInDisplay, name, selectedDisplayProps: { children: selectedDisplayChildren, className: selectedDisplayClassName, ...selectedDisplayProps } = {}, value, ...props }) {
+	const [searchContext] = useSearchContext((store) => store);
+	const { multiple, query, selectedOptionDisplayProps } = searchContext || {};
+	if (!((query || "").trim() === "" || name.toLowerCase().includes((query || "").toLowerCase()) || isInDisplay)) return /* @__PURE__ */ jsx(Fragment, {});
+	const { children: selectedOptionDisplayChildren, className: selectedOptionDisplayClassName } = selectedOptionDisplayProps || {};
+	return isInDisplay ? /* @__PURE__ */ jsx("span", {
+		...selectedOptionDisplayProps,
+		...selectedDisplayProps,
+		className: twMerge(!selectedDisplayClassName && !selectedOptionDisplayClassName && multiple && `after:content-[',_'] last-of-type:after:content-['']`, selectedOptionDisplayClassName, selectedDisplayClassName),
+		children: selectedDisplayChildren ? typeof selectedDisplayChildren === "function" ? selectedDisplayChildren(name) : selectedDisplayChildren : selectedOptionDisplayChildren ? typeof selectedOptionDisplayChildren === "function" ? selectedOptionDisplayChildren(name) : selectedOptionDisplayChildren : name
+	}) : /* @__PURE__ */ jsx(ComboboxOption, {
+		className: "group/option contents",
+		value: {
+			id: value,
+			name
+		},
+		...props,
+		children: (bag) => /* @__PURE__ */ jsxs("div", {
+			className: twMerge("flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-[background-color,color] duration-200 ease-exponential select-none [--theme-color:var(--base-theme-color)] corner-super-1.5 group-disabled/option:opacity-50 group-data-focus/option:bg-(--theme-color)/15 group-data-selected/option:text-(--theme-color) dark:group-data-focus/option:bg-(--theme-color)/15", !multiple && "group-data-selected/option:cursor-default group-data-focus/option:group-data-selected/option:bg-transparent", className),
+			children: [/* @__PURE__ */ jsx(Checkmark, { className: "size-3.5 scale-70 opacity-0 transition-[opacity,scale] duration-200 ease-exponential group-data-selected/option:scale-100 group-data-selected/option:opacity-100" }), typeof children === "function" ? children(bag) : children ?? name]
+		})
+	});
+}
+function checkEquality(aOptionList, bOptionList) {
+	if (aOptionList.length !== bOptionList.length) return false;
+	for (let i = 0; i < aOptionList.length; i += 1) {
+		const aOption = aOptionList[i], bOption = bOptionList[i];
+		if (aOption?.id !== bOption?.id || aOption?.name !== bOption?.name) return false;
+	}
+	return true;
+}
+function SearchField({ allowCustom, buttonProps, children, className, defaultValue, description, descriptionProps: { className: descriptionClassName, ...descriptionProps } = {}, fieldProps: { className: fieldClassName, ...fieldProps } = {}, inputProps, invalid, label, labelProps: { className: labelClassName, ...labelProps } = {}, multiple, onChange, optionsProps: { anchor, className: optionsClassName, transition, ...optionsProps } = {}, placeholder, required = true, shelfProps: { className: shelfClassName, ...shelfProps } = {}, selectedOptionDisplayProps, singleDisplay, ...props }) {
+	const uniqueId = useId();
+	const [searchContext, setSearchContext] = useSearchContext((store) => store), { query } = searchContext || {};
+	const [isInvalid, setIsInvalid] = useState(invalid);
+	const [selectedOptionSync, setSelectedOptionSync] = useState(() => {
+		if (multiple) return Array.isArray(defaultValue) ? defaultValue : [];
+		return typeof defaultValue === "string" ? defaultValue : null;
+	});
+	const comboboxInputRef = useRef(null);
+	const childOptionList = useMemo(() => Children.toArray(children).filter((child) => isValidElement(child) && !!child.props && "value" in child.props && "name" in child.props), [children]);
+	const staticOptionList = useMemo(() => childOptionList.map((child) => ({
+		id: child.props.value,
+		name: child.props.name,
+		selectedDisplayProps: child.props.selectedDisplayProps
+	})), [childOptionList]);
+	const [addedOptionList, setAddedOptionList] = useState([]);
+	const customOptionFromQuery = useMemo(() => {
+		const trimmedQuery = query.trim();
+		if (!allowCustom || trimmedQuery.length === 0) return null;
+		return {
+			id: props.customOptionParams?.formatID?.(trimmedQuery) ?? toLowerCase(trimmedQuery, [" ", "_"]),
+			name: trimmedQuery
+		};
+	}, [
+		allowCustom,
+		props.customOptionParams,
+		query
+	]);
+	const optionLookupMap = useMemo(() => {
+		const lookupMap = /* @__PURE__ */ new Map();
+		for (const option of staticOptionList) lookupMap.set(option.id, option.name);
+		for (const option of addedOptionList) lookupMap.set(option.id, option.name);
+		return lookupMap;
+	}, [addedOptionList, staticOptionList]);
+	const saveCustomOption = useEffectEvent((option) => {
+		if (!multiple) return;
+		setAddedOptionList((prevOptionList) => {
+			if (prevOptionList.some((prevOption) => prevOption.id === option.id)) return prevOptionList;
+			return [...prevOptionList, option];
+		});
+	});
+	const handleChange = (selected) => {
+		setIsInvalid(false);
+		if (multiple && Array.isArray(selected)) {
+			const selectedValueList = selected.map((selectedValue) => {
+				if (selectedValue && typeof selectedValue === "object" && "id" in selectedValue && "name" in selectedValue) {
+					const option = {
+						id: String(selectedValue.id),
+						name: String(selectedValue.name)
+					};
+					saveCustomOption(option);
+					return option.id;
+				}
+				return String(selectedValue);
+			});
+			setSelectedOptionSync(selectedValueList);
+			onChange?.(selectedValueList);
+			return;
+		}
+		if (!multiple) {
+			const normalizedSelected = selected && typeof selected === "object" && !Array.isArray(selected) ? String(selected.id) : selected;
+			setSelectedOptionSync(normalizedSelected);
+			onChange?.(normalizedSelected);
+			return;
+		}
+		setSelectedOptionSync(selected);
+	};
+	const formatSelectedDisplay = (name) => {
+		const selectedOptionDisplayChildren = selectedOptionDisplayProps?.children;
+		if (!selectedOptionDisplayChildren) return name;
+		const selectedOptionDisplayValue = typeof selectedOptionDisplayChildren === "function" ? selectedOptionDisplayChildren(name) : selectedOptionDisplayChildren;
+		return typeof selectedOptionDisplayValue === "string" ? selectedOptionDisplayValue : name;
+	};
+	const handleInvalid = () => setIsInvalid(true);
+	const refocus = () => comboboxInputRef.current?.focus();
+	const onVisible = useEffectEvent(() => {
+		setSearchContext?.({
+			multiple,
+			query: "",
+			selectedOptionDisplayProps
+		});
+	});
+	useEffect(() => {
+		onVisible();
+	}, []);
+	useEffect(() => {
+		const selectedOptionList = (Array.isArray(selectedOptionSync) ? selectedOptionSync : typeof selectedOptionSync === "string" ? [selectedOptionSync] : []).map((selectedId) => ({
+			id: selectedId,
+			name: optionLookupMap.get(selectedId) ?? selectedId
+		}));
+		if (!checkEquality(searchContext?.selectedOptionList ?? [], selectedOptionList)) setSearchContext?.({ selectedOptionList });
+	}, [
+		optionLookupMap,
+		searchContext?.selectedOptionList,
+		selectedOptionSync,
+		setSearchContext
+	]);
+	const queryChange = (e) => {
+		const { currentTarget } = e, { value } = currentTarget;
+		setSearchContext?.({ query: value });
+	};
+	const handleClose = () => {
+		setSearchContext?.({ query: "" });
+	};
+	const updateDisplayValue = (value) => {
+		if (multiple && Array.isArray(value)) {
+			if (singleDisplay) return value.map((v) => formatSelectedDisplay(v.name)).join(", ");
+		}
+		if (!multiple && value) return formatSelectedDisplay(value.name);
+		return "";
+	};
+	return /* @__PURE__ */ jsxs(Field, {
+		...fieldProps,
+		className: (bag) => twMerge("grid gap-1", typeof fieldClassName === "function" ? fieldClassName(bag) : fieldClassName),
+		children: [
+			label && /* @__PURE__ */ jsx(Label, {
+				...labelProps,
+				className: (bag) => twMerge("text-sm font-medium", required ? `after:text-red-700 after:content-['_*']` : "", typeof labelClassName === "function" ? labelClassName(bag) : labelClassName),
+				children: label
+			}),
+			/* @__PURE__ */ jsxs(Combobox, {
+				...props,
+				invalid: isInvalid || invalid,
+				multiple,
+				onChange: handleChange,
+				onClose: handleClose,
+				children: [/* @__PURE__ */ jsxs("div", {
+					...multiple ? { "data-multiple": "" } : {},
+					className: "isolate contents data-multiple:grid",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [
+							/* @__PURE__ */ jsx(ComboboxInput, {
+								...inputProps,
+								"aria-label": typeof label === "string" ? label : props.name,
+								className: (bag) => twMerge("inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 pr-8 pl-2 text-left text-neutral-950 outline-offset-1 outline-blue-400/95 transition-[background-color] duration-300 ease-exponential corner-super-1.5 dark:bg-neutral-700 dark:text-neutral-50", "focus:outline-3 focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800", "data-invalid:border-red-500 data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100)_5%)] data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] dark:data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-500)_5%)] data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-800)_5%)] dark:data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)]", typeof className === "function" ? className(bag) : className),
+								displayValue: updateDisplayValue,
+								name: props.name,
+								onChange: queryChange,
+								placeholder: placeholder || `${multiple ? "Choose Any" : "Choose One"}${allowCustom ? " or Create Your Own" : ""}`,
+								ref: comboboxInputRef,
+								required
+							}),
+							/* @__PURE__ */ jsx("input", {
+								"aria-hidden": "true",
+								className: "sr-only top-0 left-1/2",
+								id: props.name + ":input:id" + uniqueId,
+								name: props.name,
+								onChange: () => {},
+								onFocus: refocus,
+								onInvalid: handleInvalid,
+								required,
+								tabIndex: -1,
+								value: Array.isArray(selectedOptionSync) ? selectedOptionSync.join(", ") : selectedOptionSync ?? ""
+							}),
+							/* @__PURE__ */ jsx(ComboboxButton, {
+								...buttonProps,
+								className: "absolute top-1/2 right-1.5 -translate-y-1/2 rounded p-0.5",
+								children: /* @__PURE__ */ jsx(ChevronUpChevronDown, { className: "size-3 fill-current/50" })
+							})
+						]
+					}), multiple && !singleDisplay && /* @__PURE__ */ jsx("div", {
+						...shelfProps,
+						className: twMerge("flex min-h-8 flex-wrap gap-1 p-2 before:absolute before:inset-x-0 before:-top-4 before:bottom-0 before:-z-10 before:rounded-b-xl before:border before:border-t-0 before:border-neutral-500/50", shelfClassName),
+						children: searchContext?.selectedOptionList?.length > 0 && [...staticOptionList, ...addedOptionList].filter((option, optionIndex, optionList) => {
+							return optionList.findIndex((innerOption) => innerOption.id === option.id) === optionIndex;
+						}).map((option) => {
+							if (!searchContext.selectedOptionList.some(({ id }) => id === option.id)) return null;
+							return /* @__PURE__ */ jsx(SearchOption, {
+								name: option.name,
+								value: option.id,
+								selectedDisplayProps: option.selectedDisplayProps,
+								isInDisplay: true,
+								children: option.name
+							}, option.id);
+						}).filter(Boolean)
+					})]
+				}), /* @__PURE__ */ jsxs(ComboboxOptions, {
+					...optionsProps,
+					anchor: anchor || "bottom start",
+					className: (bag) => twMerge("z-50 w-(--input-width) origin-top rounded-xl border border-neutral-500/50 bg-neutral-50/95 p-1 backdrop-blur-sm backdrop-brightness-110 transition-[opacity,scale,translate] duration-300 ease-exponential corner-super-1.5 empty:invisible focus:outline-none data-closed:-translate-y-0.5 data-closed:scale-y-0 data-closed:opacity-0 data-[anchor*=top]:origin-bottom dark:bg-neutral-800/95", multiple && !singleDisplay ? "[--anchor-gap:--spacing(8)]" : "[--anchor-gap:--spacing(1)]", typeof optionsClassName === "function" ? optionsClassName(bag) : optionsClassName),
+					transition: transition ?? true,
+					children: [
+						allowCustom && query.length > 0 && customOptionFromQuery && !addedOptionList.some((addedOption) => addedOption.id === customOptionFromQuery.id) && /* @__PURE__ */ jsx(ComboboxOption, {
+							value: customOptionFromQuery,
+							className: "group/option contents",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-[background-color] duration-200 ease-exponential select-none [--theme-color:var(--base-theme-color)] corner-super-1.5 group-disabled/option:opacity-50 group-data-focus/option:bg-(--theme-color)/15 dark:group-data-focus/option:bg-(--theme-color)/15",
+								children: [
+									/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+									"Use ",
+									/* @__PURE__ */ jsxs("b", { children: [
+										"\"",
+										query,
+										"\""
+									] })
+								]
+							})
+						}),
+						children,
+						multiple && addedOptionList.filter((addedOption) => !staticOptionList.some((staticOption) => staticOption.id === addedOption.id)).map((addedOption) => /* @__PURE__ */ jsx(SearchOption, {
+							name: addedOption.name,
+							value: addedOption.id,
+							selectedDisplayProps: addedOption.selectedDisplayProps,
+							children: addedOption.name
+						}, "added:" + addedOption.id))
+					]
+				})]
+			}),
+			description && /* @__PURE__ */ jsx(Description, {
+				...descriptionProps,
+				className: (bag) => twMerge("text-xs text-current/60", typeof descriptionClassName === "function" ? descriptionClassName(bag) : descriptionClassName),
+				children: description
+			})
+		]
+	});
+}
+/**
+* # Search
+*
+* A searchable select component built on top of Headless UI's `Combobox`.
+*
+* Use the `SearchOption` component to define options.
+*
+* Use the `SearchSectionTitle` component to define titles.
+*
+* @prop label - The label for the select component.
+* @prop description - The description for the select component.
+* @prop placeholder - The placeholder for the select component.
+* @prop required - Whether the select component is required.
+* @prop invalid - Whether the select component is invalid.
+* @prop multiple - Whether the select component allows multiple selections.
+* @prop optionsProps - The props to be passed to each SearchOption component.
+* @prop selectedOptionDisplayProps - The props to be passed to each selected option in the selected option component.
+* @prop fieldProps - The props to be passed to the parent field component.
+* @prop labelProps - The props to be passed to the label component.
+* @prop descriptionProps - The props to be passed to the description component.
+* @prop anchor - The anchor point for the drop down menu.
+*/
+function Search(props) {
+	return /* @__PURE__ */ jsx(SearchContextProvider, { children: /* @__PURE__ */ jsx(SearchField, { ...props }) });
+}
 //#endregion
 //#region src/symbols/circle.fill.tsx
 function CircleFill({ weight = "regular", ...props }) {
@@ -8758,25 +9138,21 @@ function TooltipDisplay({ anchor = "top", arrow: arrow$4, arrowClassName, childr
 			clearTimeout(timeoutRef.current);
 		};
 	}, []);
-	const [, setTooltipContext] = useTooltipContext(() => void 0, defaultTooltipContext);
+	const [tooltipContext, setTooltipContext] = useTooltipContext(() => defaultTooltipContext);
 	useEffect(() => {
-		setTooltipContext?.((previous) => {
-			const nextArrow = arrow$4 || false, nextArrowClassName = arrowClassName || "";
-			if (previous.isOpen === isOpen && previous.openTooltip === openTooltip && previous.closeTooltip === closeTooltip && previous.refs === refs && previous.floatingStyles === floatingStyles && previous.isPositioned === isPositioned && previous.placement === placement && previous.middlewareData === middlewareData && previous.arrowRef === arrowRef && previous.arrow === nextArrow && previous.arrowClassName === nextArrowClassName) return previous;
-			return {
-				...previous,
-				isOpen,
-				openTooltip,
-				closeTooltip,
-				refs,
-				floatingStyles,
-				isPositioned,
-				placement,
-				middlewareData,
-				arrowRef,
-				arrow: nextArrow,
-				arrowClassName: nextArrowClassName
-			};
+		const nextArrow = arrow$4 || false, nextArrowClassName = arrowClassName || "";
+		if (tooltipContext && tooltipContext.isOpen !== isOpen || tooltipContext.openTooltip !== openTooltip || tooltipContext.closeTooltip !== closeTooltip || tooltipContext.refs !== refs || tooltipContext.floatingStyles !== floatingStyles || tooltipContext.isPositioned !== isPositioned || tooltipContext.placement !== placement || tooltipContext.middlewareData !== middlewareData || tooltipContext.arrowRef !== arrowRef || tooltipContext.arrow !== nextArrow || tooltipContext.arrowClassName !== nextArrowClassName) setTooltipContext?.({
+			isOpen,
+			openTooltip,
+			closeTooltip,
+			refs,
+			floatingStyles,
+			isPositioned,
+			placement,
+			middlewareData,
+			arrowRef,
+			arrow: nextArrow,
+			arrowClassName: nextArrowClassName
 		});
 	}, [
 		arrow$4,
@@ -8837,4 +9213,4 @@ function ArrowSvg({ className, ...props }) {
 	});
 }
 //#endregion
-export { Anchor, Button, Checkbox, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, HumanVerification, IFrame, Input, Link, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, Select, SelectOption, SelectSectionTitle, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, generateHumanValidationToken, getLinkClasses, validateHuman };
+export { Anchor, Button, Checkbox, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, HumanVerification, IFrame, Input, Link, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, Search, SearchOption, SearchSectionTitle, Select, SelectOption, SelectSectionTitle, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, generateHumanValidationToken, getLinkClasses, validateHuman };