@andrilla/mado-ui 1.0.9 → 1.0.10

package/dist/components/index.js

@@ -748,7 +748,7 @@ function Anchor({ as, className, disabled, href, onClick, target, rel, removeHas
 	return /* @__PURE__ */ jsx(as || "a", {
 		...props,
 		"aria-disabled": disabled,
-		className: twMerge("ease-exponential inline-block transition-transform duration-300 active:scale-95 pointer-fine:active:scale-95", className, disabled && "pointer-events-none"),
+		className: twMerge("inline-block transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:active:scale-95", className, disabled && "pointer-events-none"),
 		href,
 		target: target || (isExternal ? "_blank" : "_self"),
 		onClick: hasHash ? handleClick : onClick,
@@ -781,9 +781,9 @@ const lineLiftClasses = twJoin([
 	scaleYClasses,
 	"after:origin-bottom after:translate-y-1 after:scale-x-75 active:after:translate-y-0 active:after:scale-x-100 pointer-fine:hover:after:translate-y-0 pointer-fine:hover:after:scale-x-100 pointer-fine:active:after:translate-y-0 pointer-fine:active:after:scale-x-100"
 ]);
-const fillClasses = twJoin(baseClasses, "whitespace-nowrap transition-[transform_color] after:top-1/2 after:h-[calc(100%+.05rem)] after:w-[calc(100%+.25rem)] after:-translate-y-1/2 after:rounded after:ease-exponential active:text-(--text-color) pointer-fine:hover:text-(--text-color) pointer-fine:active:text-(--text-color)");
+const fillClasses = twJoin(baseClasses, "whitespace-nowrap transition-[scale,color] after:top-1/2 after:h-[calc(100%+.05rem)] after:w-[calc(100%+.25rem)] after:-translate-y-1/2 after:rounded after:ease-exponential active:text-(--text-color) pointer-fine:hover:text-(--text-color) pointer-fine:active:text-(--text-color)");
 const getFillColorTransitionClasses = (theme, customTheme) => {
-	let fillColorTransitionClasses = twJoin(fillClasses, "transition-[scale_color] after:bg-(--theme-color)");
+	let fillColorTransitionClasses = twJoin(fillClasses, "transition-[scale,color] after:bg-(--theme-color)");
 	if (theme === "custom") {
 		if (!customTheme || customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable on the ::after pseudo element. Otherwise, please use `customTheme.classes`.");
 		fillColorTransitionClasses = customTheme.themeColor ? twMerge(fillColorTransitionClasses, customTheme.themeColor) : twMerge(fillClasses, customTheme.classes);
@@ -791,7 +791,7 @@ const getFillColorTransitionClasses = (theme, customTheme) => {
 	return fillColorTransitionClasses;
 };
 const getFillCenterClasses = (theme, customTheme) => {
-	let fillCenterColorClasses = twJoin(fillClasses, "after:scale-x-50 after:scale-y-[.25] after:bg-(--theme-color)/0 after:transition-[scale_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-(--theme-color) pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-(--theme-color) pointer-fine:active:after:scale-x-100 pointer-fine:active:after:scale-y-100 pointer-fine:active:after:bg-(--theme-color)");
+	let fillCenterColorClasses = twJoin(fillClasses, "after:scale-x-50 after:scale-y-[.25] after:bg-(--theme-color)/0 after:transition-[scale,background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-(--theme-color) pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-(--theme-color) pointer-fine:active:after:scale-x-100 pointer-fine:active:after:scale-y-100 pointer-fine:active:after:bg-(--theme-color)");
 	if (theme === "custom") {
 		if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable on the ::after pseudo element. Otherwise, please use `customTheme.classes`.");
 		fillCenterColorClasses = customTheme.themeColor ? twMerge(fillCenterColorClasses, customTheme.themeColor) : twMerge(fillClasses, customTheme.classes);
@@ -958,7 +958,7 @@ function Button({ className, customTheme, gradient = false, padding = "md", roun
 		getPaddingClasses(),
 		getRoundedClasses(),
 		getThemeColorVariable(),
-		customTheme && customTheme.classes ? customTheme.classes : [gradient ? "bg-linear-to-t from-[color-mix(in_oklch,var(--theme-color),var(--color-black)_20%)] via-(--theme-color) to-[color-mix(in_oklch,var(--theme-color),var(--color-white)_20%)] bg-size-[100%_200%] transition-[scale_background-position-y] [background-position-y:50%] active:[background-position-y:100%] data-focus:[background-position-y:0%] pointer-fine:hover:[background-position-y:0%] pointer-fine:hover:active:[background-position-y:100%]" : "bg-(--theme-color) transition-[scale_background-color] active:bg-[color-mix(in_oklch,var(--theme-color),var(--color-black)_10%)] data-focus:bg-[color-mix(in_oklch,var(--theme-color),var(--color-white)_10%)] pointer-fine:hover:bg-[color-mix(in_oklch,var(--theme-color),var(--color-white)_10%)] pointer-fine:hover:active:bg-[color-mix(in_oklch,var(--theme-color),var(--color-black)_10%)]", "shadow-(--theme-color)/25"].join(" "),
+		customTheme && customTheme.classes ? customTheme.classes : [gradient ? "bg-linear-to-t from-[color-mix(in_oklch,var(--theme-color),var(--color-black)_20%)] via-(--theme-color) to-[color-mix(in_oklch,var(--theme-color),var(--color-white)_20%)] bg-size-[100%_200%] transition-[scale,background-position-y] [background-position-y:50%] active:[background-position-y:100%] data-focus:[background-position-y:0%] pointer-fine:hover:[background-position-y:0%] pointer-fine:hover:active:[background-position-y:100%]" : "bg-(--theme-color) transition-[scale,background-color] active:bg-[color-mix(in_oklch,var(--theme-color),var(--color-black)_10%)] data-focus:bg-[color-mix(in_oklch,var(--theme-color),var(--color-white)_10%)] pointer-fine:hover:bg-[color-mix(in_oklch,var(--theme-color),var(--color-white)_10%)] pointer-fine:hover:active:bg-[color-mix(in_oklch,var(--theme-color),var(--color-black)_10%)]", "shadow-(--theme-color)/25"].join(" "),
 		className
 	]);
 	if ("href" in props && !props.as && props.href) return /* @__PURE__ */ jsx(Button$1, {
@@ -1033,7 +1033,7 @@ function Checkbox({ checkmark, children, className, description, descriptionProp
 	};
 	return /* @__PURE__ */ jsxs(Field, {
 		...fieldProps,
-		className: (bag) => twMerge("ease-exponential corner-super-1.5 -mx-1 grid h-fit w-fit gap-1 rounded-md p-1 transition-[background-color] duration-200 hover:bg-neutral-500/10 data-invalid:ring-1 data-invalid:ring-red-500/50", typeof fieldClassName === "function" ? fieldClassName(bag) : fieldClassName),
+		className: (bag) => twMerge("-mx-1 grid h-fit w-fit gap-1 rounded-md p-1 transition-[background-color] duration-200 ease-exponential corner-super-1.5 hover:bg-neutral-500/10 data-invalid:ring-1 data-invalid:ring-red-500/50", typeof fieldClassName === "function" ? fieldClassName(bag) : fieldClassName),
 		...hasInteracted && required && !checked ? { "data-invalid": "true" } : {},
 		children: [/* @__PURE__ */ jsxs("div", {
 			...inputContainerProps,
@@ -1042,7 +1042,7 @@ function Checkbox({ checkmark, children, className, description, descriptionProp
 				...props,
 				...required ? { "aria-required": "true" } : {},
 				...hasInteracted && required && !checked ? { "aria-invalid": "true" } : {},
-				className: (bag) => twMerge("group/checkbox ease-exponential corner-super-1.5 size-5 shrink-0 cursor-pointer rounded-md border border-neutral-500/50 bg-neutral-100 transition-[background-color] duration-300 [--checkmark-color:var(--base-theme-color--foreground)] [--theme-color:var(--base-theme-color)] focus:ring-3 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-(--global-bg) focus:outline-none aria-invalid:border-red-500 data-checked:bg-(--theme-color) dark:bg-neutral-700", typeof className === "function" ? className(bag) : className),
+				className: (bag) => twMerge("group/checkbox size-5 shrink-0 cursor-pointer rounded-md border border-neutral-500/50 bg-neutral-100 transition-[background-color] duration-300 ease-exponential [--checkmark-color:var(--base-theme-color--foreground)] [--theme-color:var(--base-theme-color)] corner-super-1.5 focus:ring-3 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-(--global-bg) focus:outline-none aria-invalid:border-red-500 data-checked:bg-(--theme-color) dark:bg-neutral-700", typeof className === "function" ? className(bag) : className),
 				onChange: handleChange,
 				value,
 				children: [/* @__PURE__ */ jsx("input", {
@@ -1058,7 +1058,7 @@ function Checkbox({ checkmark, children, className, description, descriptionProp
 					type: "checkbox",
 					value
 				}), checkmark ?? /* @__PURE__ */ jsx(Checkmark, {
-					className: "ease-exponential size-full scale-0 fill-(--checkmark-color) transition-transform duration-300 group-data-checked/checkbox:scale-60",
+					className: "size-full scale-0 fill-(--checkmark-color) transition-transform duration-300 ease-exponential group-data-checked/checkbox:scale-60",
 					weight: "bold"
 				})]
 			}), /* @__PURE__ */ jsxs(Label, {
@@ -3970,11 +3970,6 @@ function getWeekdayName(weekday = d) {
 	return weekdayNamesList[weekday.getDay()];
 }
 //#endregion
-//#region src/utils/math.ts
-function easeOutExpo(time, start, end, duration) {
-	return time == duration ? start + end : end * (-Math.pow(2, -10 * time / duration) + 1) + start;
-}
-//#endregion
 //#region src/components/chevron-up-down-anime.tsx
 function ChevronUpDownAnime({ className, isUp = false }) {
 	const firstLoadRef = useRef(true);
@@ -4039,7 +4034,7 @@ function DetailsSummary({ arrow = true, children, className, onClick, ...props }
 function DetailsBody({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(DisclosurePanel, {
 		...props,
-		className: twMerge("grid-rows-1fr transition-rows ease-exponential data-closed:grid-rows-0fr grid duration-500", className),
+		className: twMerge("grid grid-rows-1fr transition-rows duration-500 ease-exponential data-closed:grid-rows-0fr", className),
 		transition: true,
 		children: (bag) => /* @__PURE__ */ jsx("div", {
 			className: "overflow-y-hidden px-2 pbs-3 pbe-1",
@@ -4060,8 +4055,9 @@ function Details({ as = "div", className, ...props }) {
 function DropDownButton({ arrow = true, as, children, className, ...props }) {
 	return /* @__PURE__ */ jsx(MenuButton, {
 		...props,
-		as: as || "button",
-		className: twJoin("group/button", className),
+		as,
+		className: twJoin("group/button transition-transform duration-300 ease-exponential active:scale-95", className),
+		onClick: () => console.log("here i am"),
 		children: (bag) => /* @__PURE__ */ jsxs(Fragment, { children: [typeof children === "function" ? children(bag) : children, arrow && (typeof arrow === "boolean" ? /* @__PURE__ */ jsx(ChevronUpDownAnime, {
 			className: "-mr-1",
 			isUp: bag.open
@@ -4094,7 +4090,7 @@ function DropDownItems({ anchor, children, className, containerClassName, style,
 	return /* @__PURE__ */ jsx(MenuItems, {
 		...props,
 		anchor: anchorProps,
-		className: twMerge("grid-rows-1fr transition-rows ease-exponential not-data-open:not-data-enter:not-data-leave:grid-rows-0fr data-closed:grid-rows-0fr grid rounded-xl shadow-xl duration-500", containerClassName),
+		className: twMerge("grid grid-rows-1fr rounded-xl shadow-xl transition-rows duration-500 ease-exponential not-data-open:not-data-enter:not-data-leave:grid-rows-0fr data-closed:grid-rows-0fr", containerClassName),
 		static: props.static,
 		style: {
 			...style,
@@ -5938,9 +5934,30 @@ function generateHumanValidationToken() {
 		return char;
 	}).join("")}_${weekCode}`;
 }
-function HumanVerification({ children = "Verify", className }) {
+function HumanVerification({ children = "Verify", className, ref }) {
 	const [dragProgress, setDragProgress] = useState(0);
 	const submitButtonRef = useRef(null), buttonRef = useRef(null), buttonContainerRef = useRef(null), draggableRef = useRef(null);
+	const resetVerification = useEffectEvent(() => {
+		setDragProgress(0);
+		const draggable = draggableRef.current;
+		if (draggable) {
+			draggable.enable();
+			draggable.setX(0);
+			draggable.refresh();
+		}
+		(buttonRef.current?.closest("form"))?.querySelectorAll("input[name=\"human_verification_token\"]")?.forEach((input) => input.remove());
+	});
+	useEffect(() => {
+		const form = buttonRef.current?.closest("form");
+		if (!form) return;
+		const controller = new AbortController();
+		form.addEventListener("reset", () => {
+			queueMicrotask(() => resetVerification());
+		}, { signal: controller.signal });
+		return () => {
+			controller.abort();
+		};
+	}, []);
 	const handleTrySubmit = (x) => {
 		if (x > 239) {
 			const form = buttonRef.current?.closest("form");
@@ -6045,7 +6062,10 @@ function HumanVerification({ children = "Verify", className }) {
 					"aria-valuenow": dragProgress,
 					className: "absolute left-1 z-10 grid aspect-square h-[calc(100%-(var(--spacing)*2))] cursor-grab place-items-center rounded-sm bg-neutral-50 shadow-lg ring ring-neutral-500 focus:ring-3 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-neutral-500 focus:outline-none active:cursor-grabbing",
 					onKeyDown: moveButton,
-					ref: buttonRef,
+					ref: (node) => {
+						buttonRef.current = node;
+						if (ref) ref.current = node;
+					},
 					role: "slider",
 					type: "button",
 					children: /* @__PURE__ */ jsx(ChevronForward, { className: "inline-block h-4 overflow-visible fill-neutral-500 stroke-2" })
@@ -6176,7 +6196,7 @@ function Input({ children, className, description, descriptionProps: { className
 			}),
 			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input$1, {
 				...props,
-				className: (bag) => twMerge("ease-exponential corner-super-1.5 w-full rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-blue-400/95 transition-[background-color] duration-300 dark:bg-neutral-700 dark:text-neutral-50", "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", "user-invalid:border-red-500 user-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100)_5%)] user-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] dark:user-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-500)_5%)] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-800)_5%)] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:user-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),
+				className: (bag) => twMerge("w-full rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 pl-2 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-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", "user-invalid:border-red-500 user-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100)_5%)] user-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] dark:user-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-500)_5%)] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-800)_5%)] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:user-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),
 				required
 			}), children] }),
 			description && /* @__PURE__ */ jsx(Description, {
@@ -6188,6 +6208,61 @@ 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);
+		};
+		return {
+			get,
+			set,
+			subscribe
+		};
+	}
+	const StoreContext = createContext(null);
+	function Provider({ initialValue = defaultInitialState, ...props }) {
+		return /* @__PURE__ */ jsx(StoreContext.Provider, {
+			value: useStoreData(initialValue),
+			...props
+		});
+	}
+	function useStore(selector, initialValue) {
+		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];
+	}
+	return {
+		Provider,
+		useStore
+	};
+}
+const { Provider, useStore } = createFastContext("incomplete");
+//#endregion
+//#region src/hooks/use-mobile-device.ts
+function useMobileDevice() {
+	const [isMobileDevice, setIsMobileDevice] = useState(false);
+	const onRun = () => {
+		const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0, hasSmallViewport = window.innerWidth < 500;
+		setIsMobileDevice(hasTouch || hasSmallViewport);
+	};
+	useEffect(() => {
+		if (typeof window !== "undefined") onRun();
+	}, []);
+	return isMobileDevice;
+}
+//#endregion
 //#region src/symbols/xmark.tsx
 function Xmark({ weight = "regular", ...props }) {
 	switch (weight) {
@@ -6239,58 +6314,16 @@ function Xmark({ weight = "regular", ...props }) {
 	}
 }
 //#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);
-		};
-		return {
-			get,
-			set,
-			subscribe
-		};
-	}
-	const StoreContext = createContext(null);
-	function Provider({ initialValue = defaultInitialState, ...props }) {
-		return /* @__PURE__ */ jsx(StoreContext.Provider, {
-			value: useStoreData(initialValue),
-			...props
-		});
-	}
-	function useStore(selector, initialValue) {
-		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];
-	}
-	return {
-		Provider,
-		useStore
-	};
-}
-const { Provider, useStore } = createFastContext("incomplete");
-//#endregion
 //#region src/components/modal.tsx
+const DRAG_TO_CLOSE_PROGRESS = .5;
 const { Provider: ModalControlsProvider, useStore: useModalControls } = createFastContext({
+	closeModal: () => {},
+	dialogPanelRef: { current: null },
 	isOpen: false,
 	openModal: () => {},
-	closeModal: () => {},
 	place: "bottom",
-	readyToClose: false,
-	enableTouchClose: () => {},
-	enableMouseClose: () => {},
-	dialogPanelRef: { current: null }
+	pseudoContainerRef: { current: null },
+	readyToClose: false
 });
 function ModalTrigger({ as, onClick, ...props }) {
 	const ModalTriggerElement = as || Button$1;
@@ -6314,53 +6347,154 @@ function ModalTitle({ as, ref, ...props }) {
 	});
 }
 function ModalDialog(props) {
-	const [modalControls] = useModalControls((store) => store);
-	const { isOpen, closeModal, place, readyToClose, className, enableMouseClose, enableTouchClose, dialogPanelRef } = modalControls || {
-		isOpen: false,
-		closeModal: () => {},
-		place: "bottom",
-		readyToClose: false,
-		className: "",
-		enableMouseClose: () => {},
-		enableTouchClose: () => {},
-		dialogPanelRef: { current: null }
+	const [modalControls, setModalControls] = useModalControls((store) => store), isMobileDevice = useMobileDevice();
+	const { className, closeModal, dialogPanelRef, isOpen, place, pseudoContainerRef, readyToClose } = modalControls || {};
+	const [dialogPanelEl, setDialogPanelEl] = useState(null);
+	const [draggableTriggerEl, setDraggableTriggerEl] = useState(null);
+	const setDialogPanelRef = (node) => {
+		setDialogPanelEl(node);
+		if (dialogPanelRef) dialogPanelRef.current = node;
 	};
+	const setDraggableTriggerRef = (node) => {
+		setDraggableTriggerEl(node);
+	};
+	const readyToCloseRef = useRef(readyToClose);
+	function setUpDraggable({ dialogPanel, draggableTrigger, pseudoContainer }) {
+		createDraggable(dialogPanel, {
+			container: pseudoContainer,
+			containerFriction: .99,
+			onRelease: (draggable) => {
+				if (readyToCloseRef.current) return closeModal?.();
+				if (draggable.y >= 1) {
+					const coord = { yCoord: draggable.y };
+					animate(coord, {
+						yCoord: 0,
+						duration: 500,
+						ease: spring({ duration: 300 }),
+						composition: "blend",
+						onUpdate: () => {
+							draggable.setY(coord.yCoord);
+						}
+					});
+				}
+			},
+			onUpdate: ({ progressY }) => {
+				if (!setModalControls) return;
+				if (progressY >= DRAG_TO_CLOSE_PROGRESS && !readyToCloseRef.current) {
+					readyToCloseRef.current = true;
+					setModalControls((prev) => ({
+						...prev,
+						readyToClose: true
+					}));
+				}
+				if (progressY < DRAG_TO_CLOSE_PROGRESS && readyToCloseRef.current) {
+					readyToCloseRef.current = false;
+					setModalControls((prev) => ({
+						...prev,
+						readyToClose: false
+					}));
+				}
+			},
+			trigger: draggableTrigger
+		});
+	}
+	const onDraggable = useEffectEvent(({ dialogPanel, draggableTrigger }) => {
+		if (!pseudoContainerRef) return;
+		const { top, left, width } = dialogPanel.getBoundingClientRect();
+		pseudoContainerRef.current = document.createElement("div");
+		const pseudoContainer = pseudoContainerRef.current;
+		pseudoContainer.style.position = "fixed";
+		pseudoContainer.style.top = `${top}px`;
+		pseudoContainer.style.left = `${left}px`;
+		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 ? {
+				y: ["100lvh", 0],
+				ease: "outExpo",
+				duration: 500
+			} : { keyframes: [
+				{
+					opacity: [0, 1],
+					scale: [.5, .85],
+					y: ["10rem", "9rem"],
+					ease: "inExpo",
+					duration: 250
+				},
+				{
+					scale: [.85, 1],
+					y: ["9rem", "0rem"],
+					ease: "outExpo",
+					duration: 500
+				},
+				{
+					y: "0px",
+					duration: 0
+				}
+			] },
+			onComplete: () => setUpDraggable({
+				dialogPanel,
+				draggableTrigger,
+				pseudoContainer
+			})
+		});
+	});
+	useEffect(() => {
+		if (isOpen && dialogPanelEl && draggableTriggerEl) onDraggable({
+			dialogPanel: dialogPanelEl,
+			draggableTrigger: draggableTriggerEl
+		});
+	}, [
+		isOpen,
+		dialogPanelEl,
+		draggableTriggerEl
+	]);
 	return /* @__PURE__ */ jsxs(Dialog, {
 		open: isOpen,
-		onClose: () => closeModal?.(),
+		onClose: closeModal || (() => void 0),
 		className: ["isolate z-50", place === "bottom" && "after:fixed after:inset-x-0 after:bottom-0 after:-z-10 after:h-16 after:bg-neutral-50 sm:after:hidden"].join(" "),
 		children: [/* @__PURE__ */ jsx(DialogBackdrop, {
 			transition: true,
-			className: ["ease-exponential fixed inset-0 cursor-pointer transition-[opacity_background-color_backdrop-filter_-webkit-backdrop-filter] delay-100 duration-750 data-closed:opacity-0", readyToClose ? "bg-neutral-50/5 backdrop-blur-[1px] dark:bg-neutral-950/5" : "bg-neutral-50/25 backdrop-blur-sm dark:bg-neutral-950/25"].join(" "),
-			children: /* @__PURE__ */ jsx(Button, {
+			...readyToClose ? { "data-ready": "" } : {},
+			className: "fixed inset-0 cursor-pointer bg-neutral-50/25 backdrop-blur-sm transition-[opacity,background-color,backdrop-filter,-webkit-backdrop-filter] delay-100 duration-750 ease-exponential data-closed:opacity-0 data-ready:bg-neutral-50/5 data-ready:backdrop-blur-[1px] dark:bg-neutral-950/25 dark:data-ready:bg-neutral-950/5",
+			children: /* @__PURE__ */ jsxs(Button, {
 				padding: "none",
 				rounded: "full",
-				className: "group/button fixed top-4 right-4 size-7 overflow-x-hidden transition-[scale,width,filter] pointer-fine:hover:w-20",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "ease-exponential absolute top-1 right-1 flex items-center gap-1 pbs-px transition-transform duration-300 pointer-fine:group-hover/button:-translate-x-0.5",
-					children: [/* @__PURE__ */ jsxs("span", {
-						className: "block text-xs leading-none uppercase",
-						children: ["Close", /* @__PURE__ */ jsx("span", {
-							className: "sr-only",
-							children: "Modal"
-						})]
-					}), /* @__PURE__ */ jsx(Xmark, { className: "-top-px block size-4 scale-75 rotate-90 transition-transform duration-300 ease-in-out group-hover/button:rotate-0" })]
-				})
+				className: "group/button fixed top-4 right-4 grid size-7 grid-cols-[1fr_calc(var(--spacing)*7)] gap-0 transition-[background-color,background-position-y,scale,grid-template-columns] pointer-fine:grid-cols-[0fr_calc(var(--spacing)*7)] pointer-fine:hover:grid-cols-[1fr_calc(var(--spacing)*7)]",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "block overflow-x-hidden text-center text-xs leading-none uppercase",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "ps-2",
+						children: "Close"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Modal"
+					})]
+				}), /* @__PURE__ */ jsx(Xmark, { className: "mx-auto size-3.5 rotate-90 transition-transform duration-300 ease-in-out group-hover/button:rotate-0" })]
 			})
 		}), /* @__PURE__ */ jsxs(DialogPanel, {
-			ref: dialogPanelRef,
-			transition: true,
-			className: twMerge("ease-exponential fixed left-1/2 -translate-x-1/2 overflow-y-scroll bg-neutral-50 p-4 shadow-[0_-15px_50px_-12px] shadow-neutral-950/25 transition-[transform,translate,opacity] duration-750 data-closed:scale-50 data-closed:opacity-0 sm:w-[calc(100vw-2rem)] sm:max-w-fit sm:p-6 sm:shadow-2xl lg:p-8 dark:bg-neutral-900", place === "center" ? "top-1/2 -translate-y-1/2 rounded-2xl data-enter:translate-y-[calc(-50%+12rem)] data-leave:translate-y-[calc(-50%-8rem)]" : "bottom-0 h-fit max-h-[calc(100dvh-4rem)] translate-y-0 rounded-t-4xl data-enter:translate-y-full data-leave:translate-y-full sm:top-1/2 sm:bottom-auto sm:rounded-t-2xl sm:rounded-b-2xl sm:data-enter:translate-y-[calc(-50%+12rem)] sm:data-leave:translate-y-[calc(-50%-8rem)] sm:data-open:-translate-y-1/2 pointer-fine:top-1/2 pointer-fine:bottom-auto pointer-fine:-translate-y-1/2 pointer-fine:rounded-2xl", className),
+			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 },
 			children: [/* @__PURE__ */ jsx("button", {
-				className: ["after:ease-exponential 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:transition-[transform_background-color] after:duration-500 active:cursor-grabbing", readyToClose ? "after:scale-x-200 after:scale-y-200 after:bg-blue-500" : "after:bg-neutral-500/50 active:after:scale-x-150 active:after:scale-y-125 active:after:bg-neutral-500 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"].join(" "),
-				onTouchStart: enableTouchClose,
-				onMouseDown: enableMouseClose,
+				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": "" } : {},
+				ref: setDraggableTriggerRef,
 				type: "button",
 				children: /* @__PURE__ */ jsx("span", {
 					className: "sr-only",
 					children: "Drag down to close"
 				})
-			}), /* @__PURE__ */ jsx("div", { ...props })]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "overflow-y-scroll",
+				children: /* @__PURE__ */ jsx("div", {
+					...props,
+					className: "py-4 sm:py-6 lg:py-8"
+				})
+			})]
 		})]
 	});
 }
@@ -6378,20 +6512,9 @@ function ModalClose({ as, onClick, ...props }) {
 	});
 }
 function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }) {
-	const [bodyElement, setBodyElement] = useState(null);
-	const onVisible = useEffectEvent(() => {
-		setBodyElement(document.body);
-	});
-	useEffect(() => {
-		if (typeof window !== "undefined") onVisible();
-	}, []);
-	const [, setModalControls] = useModalControls(() => null);
+	const [modalControls, setModalControls] = useModalControls((store) => store), isMobileDevice = useMobileDevice();
 	const [isOpen, setIsOpen] = useState(false);
-	const dragMoveBoxRef = useRef(null), startDragCoords = useRef({
-		x: 0,
-		y: 0
-	}), localDialogPanelRef = useRef(null);
-	const [allowDragClose, setAllowDragClose] = useState(false), [readyToClose, setReadyToClose] = useState(false);
+	const localDialogPanelRef = useRef(null);
 	const openModal = () => {
 		setIsOpen((previous) => {
 			if (previous) return previous;
@@ -6399,67 +6522,47 @@ function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }
 			return true;
 		});
 	};
+	const closeFunctions = () => {
+		onClose?.();
+		modalControls?.pseudoContainerRef?.current?.remove();
+		setModalControls?.((previous) => ({
+			...previous,
+			pseudoContainerRef: { current: null },
+			readyToClose: false
+		}));
+	};
+	const mobileAnimation = {
+		y: "100%",
+		ease: "outExpo",
+		duration: 500
+	};
+	const desktopAnimation = {
+		opacity: 0,
+		scale: .5,
+		ease: "outExpo",
+		duration: 500
+	};
+	const handleClose = () => {
+		if (!localDialogPanelRef.current) return closeFunctions();
+		animate(localDialogPanelRef.current, {
+			...isMobileDevice ? mobileAnimation : desktopAnimation,
+			composition: "blend",
+			onComplete: closeFunctions
+		});
+	};
 	const closeModal = () => {
 		setIsOpen((previous) => {
 			if (!previous) return previous;
-			onClose?.();
+			handleClose();
 			return false;
 		});
 	};
-	const enableClose = (clientX, clientY) => {
-		startDragCoords.current.x = clientX;
-		startDragCoords.current.y = clientY;
-		if (localDialogPanelRef.current) localDialogPanelRef.current.style.transitionDuration = "0s";
-		setAllowDragClose(true);
-	};
-	const enableTouchClose = (e) => {
-		const { touches } = e, { clientY } = touches[0];
-		enableClose(0, clientY);
-	};
-	const enableMouseClose = (e) => {
-		const { clientX, clientY } = e;
-		enableClose(clientX, clientY);
-	};
-	const handleMove = (clientX, clientY) => {
-		if (!localDialogPanelRef.current) return;
-		let deltaX = clientX - startDragCoords.current.x, deltaY = clientY - startDragCoords.current.y;
-		if (deltaX > 0) deltaX = easeOutExpo(Math.abs(deltaX), 0, 25, 5e3);
-		if (deltaX < 0) deltaX = -easeOutExpo(Math.abs(deltaX), 0, 25, 5e3);
-		if (deltaY < 0) deltaY = -easeOutExpo(Math.abs(deltaY), 0, 25, 2e3);
-		if (deltaY >= 100 && !readyToClose) setReadyToClose(true);
-		else if (deltaY < 100 && readyToClose) setReadyToClose(false);
-		const greaterThanMediaSmall = innerWidth > 640;
-		localDialogPanelRef.current.style.translate = `calc(-50% + ${deltaX}px) ${greaterThanMediaSmall ? `calc(-50% + ${deltaY}px)` : `${deltaY}px`}`;
-	};
-	const handleMouseMove = (e) => {
-		if (!allowDragClose) return;
-		const { clientX, clientY } = e;
-		handleMove(clientX, clientY);
-	};
-	const disableDragClose = (clientY) => {
-		const deltaY = clientY - startDragCoords.current.y;
-		if (localDialogPanelRef.current) localDialogPanelRef.current.style.transitionDuration = "";
-		if (deltaY >= 100) {
-			closeModal();
-			setReadyToClose(false);
-		} else setTimeout(() => {
-			if (localDialogPanelRef.current) localDialogPanelRef.current.style.removeProperty("translate");
-		}, 50);
-	};
-	const disableMouseDragClose = (e) => {
-		if (allowDragClose) setAllowDragClose(false);
-		const { clientY } = e;
-		disableDragClose(clientY);
-	};
 	useEffect(() => {
 		setModalControls?.((previous) => ({
 			...previous,
 			isOpen,
-			readyToClose,
 			place,
 			className,
-			enableMouseClose,
-			enableTouchClose,
 			openModal,
 			closeModal,
 			dialogPanelRef: localDialogPanelRef
@@ -6467,20 +6570,12 @@ function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }
 	}, [
 		className,
 		closeModal,
-		enableMouseClose,
-		enableTouchClose,
 		isOpen,
 		openModal,
 		place,
-		readyToClose,
 		setModalControls
 	]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [allowDragClose && bodyElement && createPortal(/* @__PURE__ */ jsx("div", {
-		ref: dragMoveBoxRef,
-		className: "fixed inset-0 z-99 h-dvh w-screen bg-transparent active:cursor-grabbing pointer-coarse:hidden",
-		onMouseMove: handleMouseMove,
-		onMouseUp: disableMouseDragClose
-	}), bodyElement), children] });
+	return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function Modal(props) {
 	return /* @__PURE__ */ jsx(ModalControlsProvider, { children: /* @__PURE__ */ jsx(ModalDisplay, { ...props }) });
@@ -6564,7 +6659,7 @@ function SelectOption({ children, className, name, ...props }) {
 			className: `mr-3 before:absolute before:-left-3 before:content-[',_']`,
 			children: name
 		}) : /* @__PURE__ */ jsxs("div", {
-			className: twMerge("ease-exponential corner-super-1.5 flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-[background-color] duration-200 select-none [--theme-color:var(--base-theme-color)] 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),
+			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]
 		})
 	});
@@ -6620,7 +6715,7 @@ function Select({ buttonProps, children, className, description, descriptionProp
 				onChange: handleChange,
 				children: [/* @__PURE__ */ jsxs(ListboxButton, {
 					...buttonProps,
-					className: (bag) => twMerge("ease-exponential corner-super-1.5 inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 pr-4.5 pl-2 text-left text-neutral-950 outline-offset-1 outline-blue-400/95 transition-[background-color] duration-300 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),
+					className: (bag) => twMerge("inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 pr-4.5 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),
 					ref: listboxButtonRef,
 					children: [
 						/* @__PURE__ */ jsx("input", {
@@ -6648,7 +6743,7 @@ function Select({ buttonProps, children, className, description, descriptionProp
 				}), /* @__PURE__ */ jsx(ListboxOptions, {
 					...optionsProps,
 					anchor: anchor || "bottom start",
-					className: (bag) => twMerge("ease-exponential corner-super-1.5 z-50 w-(--button-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 [--anchor-gap:--spacing(1)] 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", typeof optionsClassName === "function" ? optionsClassName(bag) : optionsClassName),
+					className: (bag) => twMerge("z-50 w-(--button-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 [--anchor-gap:--spacing(1)] corner-super-1.5 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", typeof optionsClassName === "function" ? optionsClassName(bag) : optionsClassName),
 					transition: transition || true,
 					children
 				})]
@@ -6744,15 +6839,15 @@ function SubmitButton({ children, className, customTheme, error, formStatus = "r
 				}),
 				"\xA0",
 				/* @__PURE__ */ jsx(CircleFill, {
-					className: "animate-wave size-2",
+					className: "size-2 animate-wave",
 					weight: "black"
 				}),
 				/* @__PURE__ */ jsx(CircleFill, {
-					className: "animate-wave animation-delay-100 size-2",
+					className: "size-2 animate-wave animation-delay-100",
 					weight: "black"
 				}),
 				/* @__PURE__ */ jsx(CircleFill, {
-					className: "animate-wave animation-delay-200 size-2",
+					className: "size-2 animate-wave animation-delay-200",
 					weight: "black"
 				}),
 				"\xA0"
@@ -6853,7 +6948,7 @@ function Textarea({ children, className, description, descriptionProps: { classN
 			}),
 			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Textarea$1, {
 				...props,
-				className: (bag) => twMerge("corner-super-1.5 ease-exponential w-full rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-blue-400/95 transition-[background-color] duration-300 dark:bg-neutral-700 dark:text-neutral-50", "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", "user-invalid:border-red-500 user-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_25%,var(--color-neutral-800))]", resizeClassName, typeof className === "function" ? className(bag) : className),
+				className: (bag) => twMerge("w-full rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 pl-2 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-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", "user-invalid:border-red-500 user-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_25%,var(--color-neutral-800))]", resizeClassName, typeof className === "function" ? className(bag) : className),
 				required
 			}), children] }),
 			description && /* @__PURE__ */ jsx(Description, {
@@ -8586,6 +8681,8 @@ function TooltipPanel({ as, children, className, style, onMouseEnter, onMouseLea
 	};
 	return /* @__PURE__ */ jsxs(TooltipPanelElement, {
 		...props,
+		"aria-live": isPositioned ? "assertive" : "off",
+		className: twMerge("absolute top-0 left-0 z-50 w-max rounded-md bg-neutral-50 px-2 py-1 text-sm text-neutral-950 opacity-0 shadow-lg outline-1 outline-neutral-400 data-portal:fixed data-ready:animate-fade-in dark:bg-neutral-800 dark:text-neutral-50 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-600", className),
 		ref: (node) => {
 			if (node && typeof node.querySelector === "function") {
 				refs?.setFloating(node);
@@ -8595,7 +8692,6 @@ function TooltipPanel({ as, children, className, style, onMouseEnter, onMouseLea
 				}
 			}
 		},
-		className: twMerge("data-ready:animate-fade-in absolute top-0 left-0 z-50 w-max rounded-md bg-neutral-50 px-2 py-1 text-sm text-neutral-950 opacity-0 shadow-lg outline-1 outline-neutral-400 data-portal:fixed dark:bg-neutral-800 dark:text-neutral-50 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-600", className),
 		style: {
 			...style,
 			...floatingStyles,
@@ -8606,7 +8702,7 @@ function TooltipPanel({ as, children, className, style, onMouseEnter, onMouseLea
 		onMouseLeave: handleMouseLeave,
 		onTouchStart: handleTouchStart,
 		role: "tooltip",
-		...isPositioned ? { "data-ready": true } : {},
+		...isPositioned ? { "data-ready": "" } : {},
 		children: [children, contextArrow && /* @__PURE__ */ jsx(ArrowSvg, {
 			className: twMerge("absolute", arrowLocationClasses, contextArrowClassName),
 			style: arrowStyles,