@andrilla/mado-ui 1.0.7 → 1.0.9

package/dist/client/components/index.js

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 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";
@@ -6,7 +6,6 @@ import * as React from "react";
 import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import * as ReactDOM from "react-dom";
 import { createPortal } from "react-dom";
-
 //#region src/utils/custom-tailwind-merge.ts
 const isInteger = (classPart) => /^\d+$/.test(classPart);
 const isFloat = (classPart) => /^\d+\.\d+$/.test(classPart);
@@ -101,458 +100,765 @@ const twMerge = extendTailwindMerge({ extend: { classGroups: {
 	"grid-rows": [{ "grid-rows": ["0fr", "1fr"] }],
 	transition: [{ transition: ["transition-cols", "transition-rows"] }]
 } } });
-
 //#endregion
-//#region src/components/link.tsx
-function Anchor({ as, className, disabled, href, onClick, target, rel, ...props }) {
-	const isExternal = `${href}`.startsWith("http"), hasHash = `${href}`.includes("#");
-	const handleClick = (e) => {
-		if (disabled) return e.preventDefault();
-		onClick?.(e);
-		setTimeout(() => history.replaceState({}, document.title, location.pathname), 100);
-	};
-	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"),
-		href,
-		target: target || (isExternal ? "_blank" : "_self"),
-		onClick: hasHash ? handleClick : onClick,
-		rel: rel !== void 0 ? rel === "nofollow" ? `${rel} noreferrer noopener` : `${rel} prefetch` : isExternal ? "nofollow noreferrer noopener" : "prefetch"
-	});
-}
-const baseClasses = "isolate after:absolute after:left-1/2 after:-z-10 after:-translate-x-1/2 after:duration-500 active:after:opacity-100 pointer-fine:active:after:opacity-100";
-const lineStaticClasses = twJoin(baseClasses, "whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border after:border-current");
-const lineClasses = twJoin(lineStaticClasses, "whitespace-nowrap after:transition-transform after:ease-exponential");
-const scaleXClasses = "after:scale-x-0 active:after:scale-x-100 pointer-fine:hover:after:scale-x-100 pointer-fine:active:after:scale-x-100";
-const scaleYClasses = "after:scale-y-0 active:after:scale-y-100 pointer-fine:hover:after:scale-y-100 pointer-fine:active:after:scale-y-100";
-const lineNormalClasses = twJoin([
-	lineClasses,
-	scaleYClasses,
-	"after:origin-bottom after:translate-y-0.5 active:after:translate-y-0 pointer-fine:hover:after:translate-y-0"
-]);
-const lineLtrClasses = twJoin([
-	lineClasses,
-	scaleXClasses,
-	"after:origin-left"
-]);
-const lineRtlClasses = twJoin([
-	lineClasses,
-	scaleXClasses,
-	"after:origin-right"
-]);
-const lineCenterClasses = twJoin([lineClasses, scaleXClasses]);
-const lineLiftClasses = twJoin([
-	lineClasses,
-	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 [--text-color:var(--base-theme-color--foreground)] transition-[transform,color] after:top-1/2 after:h-[calc(100%+0.05rem)] after:w-[calc(100%+0.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 = "blue", customTheme) => {
-	let fillColorTransitionClasses = twJoin(fillClasses, "transition-[scale,color] after:bg-(--theme-color)");
+//#region src/utils/get-theme-color.ts
+function getThemeColor(theme) {
 	switch (theme) {
+		case "amber-50": return "[--theme-color:var(--color-amber-50)]";
+		case "amber-100": return "[--theme-color:var(--color-amber-100)]";
+		case "amber-200": return "[--theme-color:var(--color-amber-200)]";
+		case "amber-300": return "[--theme-color:var(--color-amber-300)]";
+		case "amber-400": return "[--theme-color:var(--color-amber-400)]";
 		case "amber":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-amber-500)]");
-			break;
+		case "amber-500": return "[--theme-color:var(--color-amber-500)]";
+		case "amber-600": return "[--theme-color:var(--color-amber-600)]";
+		case "amber-700": return "[--theme-color:var(--color-amber-700)]";
+		case "amber-800": return "[--theme-color:var(--color-amber-800)]";
+		case "amber-900": return "[--theme-color:var(--color-amber-900)]";
+		case "amber-950": return "[--theme-color:var(--color-amber-950)]";
+		case "blue-50": return "[--theme-color:var(--color-blue-50)]";
+		case "blue-100": return "[--theme-color:var(--color-blue-100)]";
+		case "blue-200": return "[--theme-color:var(--color-blue-200)]";
+		case "blue-300": return "[--theme-color:var(--color-blue-300)]";
+		case "blue-400": return "[--theme-color:var(--color-blue-400)]";
 		case "blue":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-blue-500)]");
-			break;
+		case "blue-500": return "[--theme-color:var(--color-blue-500)]";
+		case "blue-600": return "[--theme-color:var(--color-blue-600)]";
+		case "blue-700": return "[--theme-color:var(--color-blue-700)]";
+		case "blue-800": return "[--theme-color:var(--color-blue-800)]";
+		case "blue-900": return "[--theme-color:var(--color-blue-900)]";
+		case "blue-950": return "[--theme-color:var(--color-blue-950)]";
+		case "cyan-50": return "[--theme-color:var(--color-cyan-50)]";
+		case "cyan-100": return "[--theme-color:var(--color-cyan-100)]";
+		case "cyan-200": return "[--theme-color:var(--color-cyan-200)]";
+		case "cyan-300": return "[--theme-color:var(--color-cyan-300)]";
+		case "cyan-400": return "[--theme-color:var(--color-cyan-400)]";
 		case "cyan":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-cyan-500)]");
-			break;
+		case "cyan-500": return "[--theme-color:var(--color-cyan-500)]";
+		case "cyan-600": return "[--theme-color:var(--color-cyan-600)]";
+		case "cyan-700": return "[--theme-color:var(--color-cyan-700)]";
+		case "cyan-800": return "[--theme-color:var(--color-cyan-800)]";
+		case "cyan-900": return "[--theme-color:var(--color-cyan-900)]";
+		case "cyan-950": return "[--theme-color:var(--color-cyan-950)]";
+		case "emerald-50": return "[--theme-color:var(--color-emerald-50)]";
+		case "emerald-100": return "[--theme-color:var(--color-emerald-100)]";
+		case "emerald-200": return "[--theme-color:var(--color-emerald-200)]";
+		case "emerald-300": return "[--theme-color:var(--color-emerald-300)]";
+		case "emerald-400": return "[--theme-color:var(--color-emerald-400)]";
 		case "emerald":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-emerald-500)]");
-			break;
+		case "emerald-500": return "[--theme-color:var(--color-emerald-500)]";
+		case "emerald-600": return "[--theme-color:var(--color-emerald-600)]";
+		case "emerald-700": return "[--theme-color:var(--color-emerald-700)]";
+		case "emerald-800": return "[--theme-color:var(--color-emerald-800)]";
+		case "emerald-900": return "[--theme-color:var(--color-emerald-900)]";
+		case "emerald-950": return "[--theme-color:var(--color-emerald-950)]";
+		case "fuchsia-50": return "[--theme-color:var(--color-fuchsia-50)]";
+		case "fuchsia-100": return "[--theme-color:var(--color-fuchsia-100)]";
+		case "fuchsia-200": return "[--theme-color:var(--color-fuchsia-200)]";
+		case "fuchsia-300": return "[--theme-color:var(--color-fuchsia-300)]";
+		case "fuchsia-400": return "[--theme-color:var(--color-fuchsia-400)]";
 		case "fuchsia":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-fuchsia-500)]");
-			break;
+		case "fuchsia-500": return "[--theme-color:var(--color-fuchsia-500)]";
+		case "fuchsia-600": return "[--theme-color:var(--color-fuchsia-600)]";
+		case "fuchsia-700": return "[--theme-color:var(--color-fuchsia-700)]";
+		case "fuchsia-800": return "[--theme-color:var(--color-fuchsia-800)]";
+		case "fuchsia-900": return "[--theme-color:var(--color-fuchsia-900)]";
+		case "fuchsia-950": return "[--theme-color:var(--color-fuchsia-950)]";
+		case "gray-50": return "[--theme-color:var(--color-gray-50)]";
+		case "gray-100": return "[--theme-color:var(--color-gray-100)]";
+		case "gray-200": return "[--theme-color:var(--color-gray-200)]";
+		case "gray-300": return "[--theme-color:var(--color-gray-300)]";
+		case "gray-400": return "[--theme-color:var(--color-gray-400)]";
 		case "gray":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-gray-500)]");
-			break;
+		case "gray-500": return "[--theme-color:var(--color-gray-500)]";
+		case "gray-600": return "[--theme-color:var(--color-gray-600)]";
+		case "gray-700": return "[--theme-color:var(--color-gray-700)]";
+		case "gray-800": return "[--theme-color:var(--color-gray-800)]";
+		case "gray-900": return "[--theme-color:var(--color-gray-900)]";
+		case "gray-950": return "[--theme-color:var(--color-gray-950)]";
+		case "green-50": return "[--theme-color:var(--color-green-50)]";
+		case "green-100": return "[--theme-color:var(--color-green-100)]";
+		case "green-200": return "[--theme-color:var(--color-green-200)]";
+		case "green-300": return "[--theme-color:var(--color-green-300)]";
+		case "green-400": return "[--theme-color:var(--color-green-400)]";
 		case "green":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-green-500)]");
-			break;
+		case "green-500": return "[--theme-color:var(--color-green-500)]";
+		case "green-600": return "[--theme-color:var(--color-green-600)]";
+		case "green-700": return "[--theme-color:var(--color-green-700)]";
+		case "green-800": return "[--theme-color:var(--color-green-800)]";
+		case "green-900": return "[--theme-color:var(--color-green-900)]";
+		case "green-950": return "[--theme-color:var(--color-green-950)]";
+		case "indigo-50": return "[--theme-color:var(--color-indigo-50)]";
+		case "indigo-100": return "[--theme-color:var(--color-indigo-100)]";
+		case "indigo-200": return "[--theme-color:var(--color-indigo-200)]";
+		case "indigo-300": return "[--theme-color:var(--color-indigo-300)]";
+		case "indigo-400": return "[--theme-color:var(--color-indigo-400)]";
 		case "indigo":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-indigo-500)]");
-			break;
+		case "indigo-500": return "[--theme-color:var(--color-indigo-500)]";
+		case "indigo-600": return "[--theme-color:var(--color-indigo-600)]";
+		case "indigo-700": return "[--theme-color:var(--color-indigo-700)]";
+		case "indigo-800": return "[--theme-color:var(--color-indigo-800)]";
+		case "indigo-900": return "[--theme-color:var(--color-indigo-900)]";
+		case "indigo-950": return "[--theme-color:var(--color-indigo-950)]";
+		case "lime-50": return "[--theme-color:var(--color-lime-50)]";
+		case "lime-100": return "[--theme-color:var(--color-lime-100)]";
+		case "lime-200": return "[--theme-color:var(--color-lime-200)]";
+		case "lime-300": return "[--theme-color:var(--color-lime-300)]";
+		case "lime-400": return "[--theme-color:var(--color-lime-400)]";
 		case "lime":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-lime-500)]");
-			break;
+		case "lime-500": return "[--theme-color:var(--color-lime-500)]";
+		case "lime-600": return "[--theme-color:var(--color-lime-600)]";
+		case "lime-700": return "[--theme-color:var(--color-lime-700)]";
+		case "lime-800": return "[--theme-color:var(--color-lime-800)]";
+		case "lime-900": return "[--theme-color:var(--color-lime-900)]";
+		case "lime-950": return "[--theme-color:var(--color-lime-950)]";
+		case "mauve-50": return "[--theme-color:var(--color-mauve-50)]";
+		case "mauve-100": return "[--theme-color:var(--color-mauve-100)]";
+		case "mauve-200": return "[--theme-color:var(--color-mauve-200)]";
+		case "mauve-300": return "[--theme-color:var(--color-mauve-300)]";
+		case "mauve-400": return "[--theme-color:var(--color-mauve-400)]";
 		case "mauve":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-mauve-500)]");
-			break;
+		case "mauve-500": return "[--theme-color:var(--color-mauve-500)]";
+		case "mauve-600": return "[--theme-color:var(--color-mauve-600)]";
+		case "mauve-700": return "[--theme-color:var(--color-mauve-700)]";
+		case "mauve-800": return "[--theme-color:var(--color-mauve-800)]";
+		case "mauve-900": return "[--theme-color:var(--color-mauve-900)]";
+		case "mauve-950": return "[--theme-color:var(--color-mauve-950)]";
+		case "mist-50": return "[--theme-color:var(--color-mist-50)]";
+		case "mist-100": return "[--theme-color:var(--color-mist-100)]";
+		case "mist-200": return "[--theme-color:var(--color-mist-200)]";
+		case "mist-300": return "[--theme-color:var(--color-mist-300)]";
+		case "mist-400": return "[--theme-color:var(--color-mist-400)]";
 		case "mist":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-mist-500)]");
-			break;
+		case "mist-500": return "[--theme-color:var(--color-mist-500)]";
+		case "mist-600": return "[--theme-color:var(--color-mist-600)]";
+		case "mist-700": return "[--theme-color:var(--color-mist-700)]";
+		case "mist-800": return "[--theme-color:var(--color-mist-800)]";
+		case "mist-900": return "[--theme-color:var(--color-mist-900)]";
+		case "mist-950": return "[--theme-color:var(--color-mist-950)]";
+		case "neutral-50": return "[--theme-color:var(--color-neutral-50)]";
+		case "neutral-100": return "[--theme-color:var(--color-neutral-100)]";
+		case "neutral-200": return "[--theme-color:var(--color-neutral-200)]";
+		case "neutral-300": return "[--theme-color:var(--color-neutral-300)]";
+		case "neutral-400": return "[--theme-color:var(--color-neutral-400)]";
 		case "neutral":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-neutral-500)]");
-			break;
+		case "neutral-500": return "[--theme-color:var(--color-neutral-500)]";
+		case "neutral-600": return "[--theme-color:var(--color-neutral-600)]";
+		case "neutral-700": return "[--theme-color:var(--color-neutral-700)]";
+		case "neutral-800": return "[--theme-color:var(--color-neutral-800)]";
+		case "neutral-900": return "[--theme-color:var(--color-neutral-900)]";
+		case "neutral-950": return "[--theme-color:var(--color-neutral-950)]";
+		case "olive-50": return "[--theme-color:var(--color-olive-50)]";
+		case "olive-100": return "[--theme-color:var(--color-olive-100)]";
+		case "olive-200": return "[--theme-color:var(--color-olive-200)]";
+		case "olive-300": return "[--theme-color:var(--color-olive-300)]";
+		case "olive-400": return "[--theme-color:var(--color-olive-400)]";
 		case "olive":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-olive-500)]");
-			break;
+		case "olive-500": return "[--theme-color:var(--color-olive-500)]";
+		case "olive-600": return "[--theme-color:var(--color-olive-600)]";
+		case "olive-700": return "[--theme-color:var(--color-olive-700)]";
+		case "olive-800": return "[--theme-color:var(--color-olive-800)]";
+		case "olive-900": return "[--theme-color:var(--color-olive-900)]";
+		case "olive-950": return "[--theme-color:var(--color-olive-950)]";
+		case "orange-50": return "[--theme-color:var(--color-orange-50)]";
+		case "orange-100": return "[--theme-color:var(--color-orange-100)]";
+		case "orange-200": return "[--theme-color:var(--color-orange-200)]";
+		case "orange-300": return "[--theme-color:var(--color-orange-300)]";
+		case "orange-400": return "[--theme-color:var(--color-orange-400)]";
 		case "orange":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-orange-500)]");
-			break;
+		case "orange-500": return "[--theme-color:var(--color-orange-500)]";
+		case "orange-600": return "[--theme-color:var(--color-orange-600)]";
+		case "orange-700": return "[--theme-color:var(--color-orange-700)]";
+		case "orange-800": return "[--theme-color:var(--color-orange-800)]";
+		case "orange-900": return "[--theme-color:var(--color-orange-900)]";
+		case "orange-950": return "[--theme-color:var(--color-orange-950)]";
+		case "pink-50": return "[--theme-color:var(--color-pink-50)]";
+		case "pink-100": return "[--theme-color:var(--color-pink-100)]";
+		case "pink-200": return "[--theme-color:var(--color-pink-200)]";
+		case "pink-300": return "[--theme-color:var(--color-pink-300)]";
+		case "pink-400": return "[--theme-color:var(--color-pink-400)]";
 		case "pink":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-pink-500)]");
-			break;
+		case "pink-500": return "[--theme-color:var(--color-pink-500)]";
+		case "pink-600": return "[--theme-color:var(--color-pink-600)]";
+		case "pink-700": return "[--theme-color:var(--color-pink-700)]";
+		case "pink-800": return "[--theme-color:var(--color-pink-800)]";
+		case "pink-900": return "[--theme-color:var(--color-pink-900)]";
+		case "pink-950": return "[--theme-color:var(--color-pink-950)]";
+		case "purple-50": return "[--theme-color:var(--color-purple-50)]";
+		case "purple-100": return "[--theme-color:var(--color-purple-100)]";
+		case "purple-200": return "[--theme-color:var(--color-purple-200)]";
+		case "purple-300": return "[--theme-color:var(--color-purple-300)]";
+		case "purple-400": return "[--theme-color:var(--color-purple-400)]";
 		case "purple":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-purple-500)]");
-			break;
+		case "purple-500": return "[--theme-color:var(--color-purple-500)]";
+		case "purple-600": return "[--theme-color:var(--color-purple-600)]";
+		case "purple-700": return "[--theme-color:var(--color-purple-700)]";
+		case "purple-800": return "[--theme-color:var(--color-purple-800)]";
+		case "purple-900": return "[--theme-color:var(--color-purple-900)]";
+		case "purple-950": return "[--theme-color:var(--color-purple-950)]";
+		case "red-50": return "[--theme-color:var(--color-red-50)]";
+		case "red-100": return "[--theme-color:var(--color-red-100)]";
+		case "red-200": return "[--theme-color:var(--color-red-200)]";
+		case "red-300": return "[--theme-color:var(--color-red-300)]";
+		case "red-400": return "[--theme-color:var(--color-red-400)]";
 		case "red":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-red-500)]");
-			break;
+		case "red-500": return "[--theme-color:var(--color-red-500)]";
+		case "red-600": return "[--theme-color:var(--color-red-600)]";
+		case "red-700": return "[--theme-color:var(--color-red-700)]";
+		case "red-800": return "[--theme-color:var(--color-red-800)]";
+		case "red-900": return "[--theme-color:var(--color-red-900)]";
+		case "red-950": return "[--theme-color:var(--color-red-950)]";
+		case "rose-50": return "[--theme-color:var(--color-rose-50)]";
+		case "rose-100": return "[--theme-color:var(--color-rose-100)]";
+		case "rose-200": return "[--theme-color:var(--color-rose-200)]";
+		case "rose-300": return "[--theme-color:var(--color-rose-300)]";
+		case "rose-400": return "[--theme-color:var(--color-rose-400)]";
 		case "rose":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-rose-500)]");
-			break;
+		case "rose-500": return "[--theme-color:var(--color-rose-500)]";
+		case "rose-600": return "[--theme-color:var(--color-rose-600)]";
+		case "rose-700": return "[--theme-color:var(--color-rose-700)]";
+		case "rose-800": return "[--theme-color:var(--color-rose-800)]";
+		case "rose-900": return "[--theme-color:var(--color-rose-900)]";
+		case "rose-950": return "[--theme-color:var(--color-rose-950)]";
+		case "sky-50": return "[--theme-color:var(--color-sky-50)]";
+		case "sky-100": return "[--theme-color:var(--color-sky-100)]";
+		case "sky-200": return "[--theme-color:var(--color-sky-200)]";
+		case "sky-300": return "[--theme-color:var(--color-sky-300)]";
+		case "sky-400": return "[--theme-color:var(--color-sky-400)]";
 		case "sky":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-sky-500)]");
-			break;
+		case "sky-500": return "[--theme-color:var(--color-sky-500)]";
+		case "sky-600": return "[--theme-color:var(--color-sky-600)]";
+		case "sky-700": return "[--theme-color:var(--color-sky-700)]";
+		case "sky-800": return "[--theme-color:var(--color-sky-800)]";
+		case "sky-900": return "[--theme-color:var(--color-sky-900)]";
+		case "sky-950": return "[--theme-color:var(--color-sky-950)]";
+		case "slate-50": return "[--theme-color:var(--color-slate-50)]";
+		case "slate-100": return "[--theme-color:var(--color-slate-100)]";
+		case "slate-200": return "[--theme-color:var(--color-slate-200)]";
+		case "slate-300": return "[--theme-color:var(--color-slate-300)]";
+		case "slate-400": return "[--theme-color:var(--color-slate-400)]";
 		case "slate":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-slate-500)]");
-			break;
+		case "slate-500": return "[--theme-color:var(--color-slate-500)]";
+		case "slate-600": return "[--theme-color:var(--color-slate-600)]";
+		case "slate-700": return "[--theme-color:var(--color-slate-700)]";
+		case "slate-800": return "[--theme-color:var(--color-slate-800)]";
+		case "slate-900": return "[--theme-color:var(--color-slate-900)]";
+		case "slate-950": return "[--theme-color:var(--color-slate-950)]";
+		case "stone-50": return "[--theme-color:var(--color-stone-50)]";
+		case "stone-100": return "[--theme-color:var(--color-stone-100)]";
+		case "stone-200": return "[--theme-color:var(--color-stone-200)]";
+		case "stone-300": return "[--theme-color:var(--color-stone-300)]";
+		case "stone-400": return "[--theme-color:var(--color-stone-400)]";
 		case "stone":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-stone-500)]");
-			break;
+		case "stone-500": return "[--theme-color:var(--color-stone-500)]";
+		case "stone-600": return "[--theme-color:var(--color-stone-600)]";
+		case "stone-700": return "[--theme-color:var(--color-stone-700)]";
+		case "stone-800": return "[--theme-color:var(--color-stone-800)]";
+		case "stone-900": return "[--theme-color:var(--color-stone-900)]";
+		case "stone-950": return "[--theme-color:var(--color-stone-950)]";
+		case "taupe-50": return "[--theme-color:var(--color-taupe-50)]";
+		case "taupe-100": return "[--theme-color:var(--color-taupe-100)]";
+		case "taupe-200": return "[--theme-color:var(--color-taupe-200)]";
+		case "taupe-300": return "[--theme-color:var(--color-taupe-300)]";
+		case "taupe-400": return "[--theme-color:var(--color-taupe-400)]";
 		case "taupe":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-taupe-500)]");
-			break;
+		case "taupe-500": return "[--theme-color:var(--color-taupe-500)]";
+		case "taupe-600": return "[--theme-color:var(--color-taupe-600)]";
+		case "taupe-700": return "[--theme-color:var(--color-taupe-700)]";
+		case "taupe-800": return "[--theme-color:var(--color-taupe-800)]";
+		case "taupe-900": return "[--theme-color:var(--color-taupe-900)]";
+		case "taupe-950": return "[--theme-color:var(--color-taupe-950)]";
+		case "teal-50": return "[--theme-color:var(--color-teal-50)]";
+		case "teal-100": return "[--theme-color:var(--color-teal-100)]";
+		case "teal-200": return "[--theme-color:var(--color-teal-200)]";
+		case "teal-300": return "[--theme-color:var(--color-teal-300)]";
+		case "teal-400": return "[--theme-color:var(--color-teal-400)]";
 		case "teal":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-teal-500)]");
-			break;
+		case "teal-500": return "[--theme-color:var(--color-teal-500)]";
+		case "teal-600": return "[--theme-color:var(--color-teal-600)]";
+		case "teal-700": return "[--theme-color:var(--color-teal-700)]";
+		case "teal-800": return "[--theme-color:var(--color-teal-800)]";
+		case "teal-900": return "[--theme-color:var(--color-teal-900)]";
+		case "teal-950": return "[--theme-color:var(--color-teal-950)]";
+		case "violet-50": return "[--theme-color:var(--color-violet-50)]";
+		case "violet-100": return "[--theme-color:var(--color-violet-100)]";
+		case "violet-200": return "[--theme-color:var(--color-violet-200)]";
+		case "violet-300": return "[--theme-color:var(--color-violet-300)]";
+		case "violet-400": return "[--theme-color:var(--color-violet-400)]";
 		case "violet":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-violet-500)]");
-			break;
+		case "violet-500": return "[--theme-color:var(--color-violet-500)]";
+		case "violet-600": return "[--theme-color:var(--color-violet-600)]";
+		case "violet-700": return "[--theme-color:var(--color-violet-700)]";
+		case "violet-800": return "[--theme-color:var(--color-violet-800)]";
+		case "violet-900": return "[--theme-color:var(--color-violet-900)]";
+		case "violet-950": return "[--theme-color:var(--color-violet-950)]";
+		case "yellow-50": return "[--theme-color:var(--color-yellow-50)]";
+		case "yellow-100": return "[--theme-color:var(--color-yellow-100)]";
+		case "yellow-200": return "[--theme-color:var(--color-yellow-200)]";
+		case "yellow-300": return "[--theme-color:var(--color-yellow-300)]";
+		case "yellow-400": return "[--theme-color:var(--color-yellow-400)]";
 		case "yellow":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-yellow-500)]");
-			break;
+		case "yellow-500": return "[--theme-color:var(--color-yellow-500)]";
+		case "yellow-600": return "[--theme-color:var(--color-yellow-600)]";
+		case "yellow-700": return "[--theme-color:var(--color-yellow-700)]";
+		case "yellow-800": return "[--theme-color:var(--color-yellow-800)]";
+		case "yellow-900": return "[--theme-color:var(--color-yellow-900)]";
+		case "yellow-950": return "[--theme-color:var(--color-yellow-950)]";
+		case "zinc-50": return "[--theme-color:var(--color-zinc-50)]";
+		case "zinc-100": return "[--theme-color:var(--color-zinc-100)]";
+		case "zinc-200": return "[--theme-color:var(--color-zinc-200)]";
+		case "zinc-300": return "[--theme-color:var(--color-zinc-300)]";
+		case "zinc-400": return "[--theme-color:var(--color-zinc-400)]";
 		case "zinc":
-			fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-zinc-500)]");
-			break;
-		case "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);
-			break;
-		default:
-			fillColorTransitionClasses = twMerge(fillColorTransitionClasses, `[--theme-color:var(--base-theme-color)]`);
-			break;
+		case "zinc-500": return "[--theme-color:var(--color-zinc-500)]";
+		case "zinc-600": return "[--theme-color:var(--color-zinc-600)]";
+		case "zinc-700": return "[--theme-color:var(--color-zinc-700)]";
+		case "zinc-800": return "[--theme-color:var(--color-zinc-800)]";
+		case "zinc-900": return "[--theme-color:var(--color-zinc-900)]";
+		case "zinc-950": return "[--theme-color:var(--color-zinc-950)]";
+		default: return "[--theme-color:var(--base-theme-color)]";
 	}
-	return fillColorTransitionClasses;
-};
-const getFillCenterClasses = (theme = "blue", customTheme) => {
-	let fillCenterColorClasses = twJoin(fillClasses, "after:scale-x-50 after:scale-y-[0.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)");
+}
+function getTextColor(theme, asVariable) {
 	switch (theme) {
+		case "amber-50":
+		case "blue-50":
+		case "cyan-50":
+		case "emerald-50":
+		case "fuchsia-50":
+		case "gray-50":
+		case "green-50":
+		case "indigo-50":
+		case "lime-50":
+		case "mauve-50":
+		case "mist-50":
+		case "neutral-50":
+		case "olive-50":
+		case "orange-50":
+		case "pink-50":
+		case "purple-50":
+		case "red-50":
+		case "rose-50":
+		case "sky-50":
+		case "slate-50":
+		case "stone-50":
+		case "taupe-50":
+		case "teal-50":
+		case "violet-50":
+		case "yellow-50":
+		case "zinc-50":
+		case "amber-100":
+		case "blue-100":
+		case "cyan-100":
+		case "emerald-100":
+		case "fuchsia-100":
+		case "gray-100":
+		case "green-100":
+		case "indigo-100":
+		case "lime-100":
+		case "mauve-100":
+		case "mist-100":
+		case "neutral-100":
+		case "olive-100":
+		case "orange-100":
+		case "pink-100":
+		case "purple-100":
+		case "red-100":
+		case "rose-100":
+		case "sky-100":
+		case "slate-100":
+		case "stone-100":
+		case "taupe-100":
+		case "teal-100":
+		case "violet-100":
+		case "yellow-100":
+		case "zinc-100":
+		case "amber-200":
+		case "blue-200":
+		case "cyan-200":
+		case "emerald-200":
+		case "fuchsia-200":
+		case "gray-200":
+		case "green-200":
+		case "indigo-200":
+		case "lime-200":
+		case "mauve-200":
+		case "mist-200":
+		case "neutral-200":
+		case "olive-200":
+		case "orange-200":
+		case "pink-200":
+		case "purple-200":
+		case "red-200":
+		case "rose-200":
+		case "sky-200":
+		case "slate-200":
+		case "stone-200":
+		case "taupe-200":
+		case "teal-200":
+		case "violet-200":
+		case "yellow-200":
+		case "zinc-200":
+		case "amber-300":
+		case "blue-300":
+		case "cyan-300":
+		case "emerald-300":
+		case "fuchsia-300":
+		case "gray-300":
+		case "green-300":
+		case "indigo-300":
+		case "lime-300":
+		case "mauve-300":
+		case "mist-300":
+		case "neutral-300":
+		case "olive-300":
+		case "orange-300":
+		case "pink-300":
+		case "purple-300":
+		case "red-300":
+		case "rose-300":
+		case "sky-300":
+		case "slate-300":
+		case "stone-300":
+		case "taupe-300":
+		case "teal-300":
+		case "violet-300":
+		case "yellow-300":
+		case "zinc-300":
+		case "amber-400":
+		case "blue-400":
+		case "cyan-400":
+		case "emerald-400":
+		case "fuchsia-400":
+		case "gray-400":
+		case "green-400":
+		case "indigo-400":
+		case "lime-400":
+		case "mauve-400":
+		case "mist-400":
+		case "neutral-400":
+		case "olive-400":
+		case "orange-400":
+		case "pink-400":
+		case "purple-400":
+		case "red-400":
+		case "rose-400":
+		case "sky-400":
+		case "slate-400":
+		case "stone-400":
+		case "taupe-400":
+		case "teal-400":
+		case "violet-400":
+		case "yellow-400":
+		case "zinc-400": return asVariable ? "[--text-color:color-mix(in_oklch,var(--theme-color)_5%,var(--color-black))]" : "text-[color-mix(in_oklch,var(--theme-color)_5%,var(--color-black))]";
 		case "amber":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-amber-500)]");
-			break;
 		case "blue":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-blue-500)]");
-			break;
+		case "custom":
 		case "cyan":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-cyan-500)]");
-			break;
 		case "emerald":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-emerald-500)]");
-			break;
 		case "fuchsia":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-fuchsia-500)]");
-			break;
 		case "gray":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-gray-500)]");
-			break;
 		case "green":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-green-500)]");
-			break;
 		case "indigo":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-indigo-500)]");
-			break;
 		case "lime":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-lime-500)]");
-			break;
 		case "mauve":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-mauve-500)]");
-			break;
 		case "mist":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-mist-500)]");
-			break;
 		case "neutral":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-neutral-500)]");
-			break;
 		case "olive":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-olive-500)]");
-			break;
 		case "orange":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-orange-500)]");
-			break;
 		case "pink":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-pink-500)]");
-			break;
 		case "purple":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-purple-500)]");
-			break;
 		case "red":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-red-500)]");
-			break;
 		case "rose":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-rose-500)]");
-			break;
 		case "sky":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-sky-500)]");
-			break;
 		case "slate":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-slate-500)]");
-			break;
 		case "stone":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-stone-500)]");
-			break;
 		case "taupe":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-taupe-500)]");
-			break;
 		case "teal":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-teal-500)]");
-			break;
 		case "violet":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-violet-500)]");
-			break;
 		case "yellow":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-yellow-500)]");
-			break;
 		case "zinc":
-			fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-zinc-500)]");
-			break;
-		case "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);
-			break;
-		default:
-			fillCenterColorClasses = twMerge(fillCenterColorClasses, `[--theme-color:var(--base-theme-color)]`);
-			break;
+		case "amber-500":
+		case "blue-500":
+		case "cyan-500":
+		case "emerald-500":
+		case "fuchsia-500":
+		case "gray-500":
+		case "green-500":
+		case "indigo-500":
+		case "lime-500":
+		case "mauve-500":
+		case "mist-500":
+		case "neutral-500":
+		case "olive-500":
+		case "orange-500":
+		case "pink-500":
+		case "purple-500":
+		case "red-500":
+		case "rose-500":
+		case "sky-500":
+		case "slate-500":
+		case "stone-500":
+		case "taupe-500":
+		case "teal-500":
+		case "violet-500":
+		case "yellow-500":
+		case "zinc-500":
+		case "amber-600":
+		case "blue-600":
+		case "cyan-600":
+		case "emerald-600":
+		case "fuchsia-600":
+		case "gray-600":
+		case "green-600":
+		case "indigo-600":
+		case "lime-600":
+		case "mauve-600":
+		case "mist-600":
+		case "neutral-600":
+		case "olive-600":
+		case "orange-600":
+		case "pink-600":
+		case "purple-600":
+		case "red-600":
+		case "rose-600":
+		case "sky-600":
+		case "slate-600":
+		case "stone-600":
+		case "taupe-600":
+		case "teal-600":
+		case "violet-600":
+		case "yellow-600":
+		case "zinc-600":
+		case "amber-700":
+		case "blue-700":
+		case "cyan-700":
+		case "emerald-700":
+		case "fuchsia-700":
+		case "gray-700":
+		case "green-700":
+		case "indigo-700":
+		case "lime-700":
+		case "mauve-700":
+		case "mist-700":
+		case "neutral-700":
+		case "olive-700":
+		case "orange-700":
+		case "pink-700":
+		case "purple-700":
+		case "red-700":
+		case "rose-700":
+		case "sky-700":
+		case "slate-700":
+		case "stone-700":
+		case "taupe-700":
+		case "teal-700":
+		case "violet-700":
+		case "yellow-700":
+		case "zinc-700":
+		case "amber-800":
+		case "blue-800":
+		case "cyan-800":
+		case "emerald-800":
+		case "fuchsia-800":
+		case "gray-800":
+		case "green-800":
+		case "indigo-800":
+		case "lime-800":
+		case "mauve-800":
+		case "mist-800":
+		case "neutral-800":
+		case "olive-800":
+		case "orange-800":
+		case "pink-800":
+		case "purple-800":
+		case "red-800":
+		case "rose-800":
+		case "sky-800":
+		case "slate-800":
+		case "stone-800":
+		case "taupe-800":
+		case "teal-800":
+		case "violet-800":
+		case "yellow-800":
+		case "zinc-800":
+		case "amber-900":
+		case "blue-900":
+		case "cyan-900":
+		case "emerald-900":
+		case "fuchsia-900":
+		case "gray-900":
+		case "green-900":
+		case "indigo-900":
+		case "lime-900":
+		case "mauve-900":
+		case "mist-900":
+		case "neutral-900":
+		case "olive-900":
+		case "orange-900":
+		case "pink-900":
+		case "purple-900":
+		case "red-900":
+		case "rose-900":
+		case "sky-900":
+		case "slate-900":
+		case "stone-900":
+		case "taupe-900":
+		case "teal-900":
+		case "violet-900":
+		case "yellow-900":
+		case "zinc-900":
+		case "amber-950":
+		case "blue-950":
+		case "cyan-950":
+		case "emerald-950":
+		case "fuchsia-950":
+		case "gray-950":
+		case "green-950":
+		case "indigo-950":
+		case "lime-950":
+		case "mauve-950":
+		case "mist-950":
+		case "neutral-950":
+		case "olive-950":
+		case "orange-950":
+		case "pink-950":
+		case "purple-950":
+		case "red-950":
+		case "rose-950":
+		case "sky-950":
+		case "slate-950":
+		case "stone-950":
+		case "taupe-950":
+		case "teal-950":
+		case "violet-950":
+		case "yellow-950":
+		case "zinc-950": return asVariable ? "[--text-color:color-mix(in_oklch,var(--theme-color)_5%,var(--color-white))]" : "text-[color-mix(in_oklch,var(--theme-color)_5%,var(--color-white))]";
+		default: return asVariable ? "[--text-color:var(--base-theme-color--foreground)]" : "text-[var(--base-theme-color--foreground)]";
 	}
+}
+//#endregion
+//#region src/components/link.tsx
+function Anchor({ as, className, disabled, href, onClick, target, rel, removeHash = true, ...props }) {
+	const isExternal = `${href}`.startsWith("http"), hasHash = `${href}`.includes("#");
+	const handleClick = (e) => {
+		if (disabled) return e.preventDefault();
+		onClick?.(e);
+		if (removeHash) setTimeout(() => history.replaceState({}, document.title, location.pathname), 100);
+	};
+	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"),
+		href,
+		target: target || (isExternal ? "_blank" : "_self"),
+		onClick: hasHash ? handleClick : onClick,
+		rel: rel !== void 0 ? rel === "nofollow" ? `${rel} noreferrer noopener` : `${rel} prefetch` : isExternal ? "nofollow noreferrer noopener" : "prefetch"
+	});
+}
+const baseClasses = "isolate after:absolute after:left-1/2 after:-z-10 after:-translate-x-1/2 after:duration-500 active:after:opacity-100 pointer-fine:active:after:opacity-100";
+const lineStaticClasses = twJoin(baseClasses, "whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border after:border-current");
+const lineClasses = twJoin(lineStaticClasses, "whitespace-nowrap after:transition-transform after:ease-exponential");
+const scaleXClasses = "after:scale-x-0 active:after:scale-x-100 pointer-fine:hover:after:scale-x-100 pointer-fine:active:after:scale-x-100";
+const scaleYClasses = "after:scale-y-0 active:after:scale-y-100 pointer-fine:hover:after:scale-y-100 pointer-fine:active:after:scale-y-100";
+const lineNormalClasses = twJoin([
+	lineClasses,
+	scaleYClasses,
+	"after:origin-bottom after:translate-y-0.5 active:after:translate-y-0 pointer-fine:hover:after:translate-y-0"
+]);
+const lineLtrClasses = twJoin([
+	lineClasses,
+	scaleXClasses,
+	"after:origin-left"
+]);
+const lineRtlClasses = twJoin([
+	lineClasses,
+	scaleXClasses,
+	"after:origin-right"
+]);
+const lineCenterClasses = twJoin([lineClasses, scaleXClasses]);
+const lineLiftClasses = twJoin([
+	lineClasses,
+	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 getFillColorTransitionClasses = (theme, customTheme) => {
+	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);
+	} else fillColorTransitionClasses = twMerge(fillColorTransitionClasses, getThemeColor(theme));
+	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)");
+	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);
+	} else fillCenterColorClasses = twMerge(fillCenterColorClasses, getThemeColor(theme));
 	return fillCenterColorClasses;
 };
 const multilineBaseClasses = "bg-linear-to-r from-current to-current bg-no-repeat active:scale-95";
 const multilineLineStaticClasses = "underline";
 const multilineNormalClasses = "underline-offset-1 active:underline pointer-fine:hover:underline";
-const multilineLineClasses = twJoin(twJoin(multilineBaseClasses, "duration-500 ease-exponential"), "bg-position-[0%_100%] px-px pb-px transition-[background-size]");
+const multilineLineClasses = twJoin(twJoin(multilineBaseClasses, "duration-500 ease-exponential"), "bg-position-[0%_100%] px-px pbe-px transition-[background-size]");
 const multilineXClasses = twJoin(multilineLineClasses, "bg-size-[0%_2px] focus-visible:bg-size-[100%_2px] active:bg-size-[100%_2px] pointer-fine:hover:bg-size-[100%_2px]");
 const multilineLineRtlClasses = twJoin([multilineXClasses, "bg-position-[100%_100%]"]);
 const multilineLineCenterClasses = twJoin([multilineXClasses, "bg-position-[50%_100%]"]);
 const multilineLineLiftClasses = twJoin(multilineLineClasses, "bg-size-[auto_0px] focus-visible:bg-size-[auto_2px] active:bg-size-[auto_2px] pointer-fine:hover:bg-size-[auto_2px]");
-const multilineFillBaseClasses = twJoin(multilineBaseClasses, "rounded px-0.5 py-0.75 focus-visible:text-zinc-50 active:text-zinc-50 pointer-fine:hover:text-zinc-50");
-const getMultilineFillColorClasses = (theme = "blue", customTheme) => {
+const multilineFillBaseClasses = twJoin(multilineBaseClasses, "rounded px-0.5 py-0.75 focus-visible:text-(--text-color) active:text-(--text-color) pointer-fine:hover:text-(--text-color)");
+const getMultilineFillColorClasses = (theme, customTheme) => {
 	let multilineFillColorClasses = twJoin(multilineFillBaseClasses, "from-(--theme-color) to-(--theme-color) transition-[background-size,color]");
-	switch (theme) {
-		case "amber":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-amber-500)]");
-			break;
-		case "blue":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-blue-500)]");
-			break;
-		case "cyan":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-cyan-500)]");
-			break;
-		case "emerald":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-emerald-500)]");
-			break;
-		case "fuchsia":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-fuchsia-500)]");
-			break;
-		case "gray":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-gray-500)]");
-			break;
-		case "green":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-green-500)]");
-			break;
-		case "indigo":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-indigo-500)]");
-			break;
-		case "lime":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-lime-500)]");
-			break;
-		case "mauve":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-mauve-500)]");
-			break;
-		case "mist":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-mist-500)]");
-			break;
-		case "neutral":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-neutral-500)]");
-			break;
-		case "olive":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-olive-500)]");
-			break;
-		case "orange":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-orange-500)]");
-			break;
-		case "pink":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-pink-500)]");
-			break;
-		case "purple":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-purple-500)]");
-			break;
-		case "red":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-red-500)]");
-			break;
-		case "rose":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-rose-500)]");
-			break;
-		case "sky":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-sky-500)]");
-			break;
-		case "slate":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-slate-500)]");
-			break;
-		case "stone":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-stone-500)]");
-			break;
-		case "taupe":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-taupe-500)]");
-			break;
-		case "teal":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-teal-500)]");
-			break;
-		case "violet":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-violet-500)]");
-			break;
-		case "yellow":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-yellow-500)]");
-			break;
-		case "zinc":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-zinc-500)]");
-			break;
-		case "custom":
-			if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable. Otherwise, please use `customTheme.classes`.");
-			multilineFillColorClasses = customTheme.themeColor ? twMerge(multilineFillColorClasses, customTheme.themeColor) : twMerge(multilineFillBaseClasses, customTheme.classes);
-			break;
-		default:
-			multilineFillColorClasses = twMerge(multilineFillColorClasses, `[--theme-color:var(--base-theme-color)]`);
-			break;
-	}
+	if (theme === "custom") {
+		if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable. Otherwise, please use `customTheme.classes`.");
+		multilineFillColorClasses = customTheme.themeColor ? twMerge(multilineFillColorClasses, customTheme.themeColor) : twMerge(multilineFillBaseClasses, customTheme.classes);
+	} else multilineFillColorClasses = twMerge(multilineFillColorClasses, getThemeColor(theme));
 	return multilineFillColorClasses;
 };
-const getMultilineFillClasses = (theme = "blue", customTheme) => {
+const getMultilineFillClasses = (theme, customTheme) => {
 	let multilineFillColorClasses = twJoin(multilineFillBaseClasses, "from-(--theme-color)/0 to-(--theme-color)/0 bg-size-[50%_0px] bg-position-[50%_50%] transition-[background-size,background-image,color] focus-visible:from-(--theme-color) focus-visible:to-(--theme-color) focus-visible:bg-size-[100%_100%] active:from-(--theme-color) active:to-(--theme-color) active:bg-size-[100%_100%] contrast-more:from-(--theme-color)/0 pointer-fine:hover:from-(--theme-color) pointer-fine:hover:to-(--theme-color) pointer-fine:hover:bg-size-[100%_100%]");
-	switch (theme) {
-		case "amber":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-amber-500)]");
-			break;
-		case "blue":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-blue-500)]");
-			break;
-		case "cyan":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-cyan-500)]");
-			break;
-		case "emerald":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-emerald-500)]");
-			break;
-		case "fuchsia":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-fuchsia-500)]");
-			break;
-		case "gray":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-gray-500)]");
-			break;
-		case "green":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-green-500)]");
-			break;
-		case "indigo":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-indigo-500)]");
-			break;
-		case "lime":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-lime-500)]");
-			break;
-		case "mauve":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-mauve-500)]");
-			break;
-		case "mist":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-mist-500)]");
-			break;
-		case "neutral":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-neutral-500)]");
-			break;
-		case "olive":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-olive-500)]");
-			break;
-		case "orange":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-orange-500)]");
-			break;
-		case "pink":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-pink-500)]");
-			break;
-		case "purple":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-purple-500)]");
-			break;
-		case "red":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-red-500)]");
-			break;
-		case "rose":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-rose-500)]");
-			break;
-		case "sky":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-sky-500)]");
-			break;
-		case "slate":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-slate-500)]");
-			break;
-		case "stone":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-stone-500)]");
-			break;
-		case "taupe":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-taupe-500)]");
-			break;
-		case "teal":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-teal-500)]");
-			break;
-		case "violet":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-violet-500)]");
-			break;
-		case "yellow":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-yellow-500)]");
-			break;
-		case "zinc":
-			multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-zinc-500)]");
-			break;
-		case "custom":
-			if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable. Otherwise, please use `customTheme.classes`.");
-			multilineFillColorClasses = customTheme.themeColor ? twMerge(multilineFillColorClasses, customTheme.themeColor) : twMerge(multilineFillBaseClasses, customTheme.classes);
-			break;
-		default:
-			multilineFillColorClasses = twMerge(multilineFillColorClasses, `[--theme-color:var(--base-theme-color)]`);
-			break;
-	}
+	if (theme === "custom") {
+		if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable. Otherwise, please use `customTheme.classes`.");
+		multilineFillColorClasses = customTheme.themeColor ? twMerge(multilineFillColorClasses, customTheme.themeColor) : twMerge(multilineFillBaseClasses, customTheme.classes);
+	} else multilineFillColorClasses = twMerge(multilineFillColorClasses, getThemeColor(theme));
 	return multilineFillColorClasses;
 };
-const getMultilineFillLiftClasses = (theme = "blue", customTheme) => {
+const getMultilineFillLiftClasses = (theme, customTheme) => {
 	return twJoin(getMultilineFillColorClasses(theme, customTheme), "bg-size-[auto_0px] bg-position-[50%_100%] focus-visible:bg-size-[auto_100%] active:bg-size-[auto_100%] pointer-fine:hover:bg-size-[auto_100%]");
 };
-const getMultilineFillXClasses = (theme = "blue", customTheme) => {
+const getMultilineFillXClasses = (theme, customTheme) => {
 	return twJoin(getMultilineFillColorClasses(theme, customTheme), "bg-size-[0%_100%] focus-visible:bg-size-[100%_100%] active:bg-size-[100%_100%] pointer-fine:hover:bg-size-[100%_100%]");
 };
-const getMultilineFillRtlClasses = (theme = "blue", customTheme) => {
+const getMultilineFillRtlClasses = (theme, customTheme) => {
 	return twJoin(getMultilineFillXClasses(theme, customTheme), "bg-position-[100%_auto]");
 };
-const getMultilineFillCenterClasses = (theme = "blue", customTheme) => {
+const getMultilineFillCenterClasses = (theme, customTheme) => {
 	return twJoin(getMultilineFillXClasses(theme, customTheme), "bg-position-[50%_auto]");
 };
-function getLinkClasses({ customTheme, theme, type }) {
-	switch (type) {
+function getLinkClasses({ customTheme, theme, lineType }) {
+	switch (lineType) {
 		case "static": return lineStaticClasses;
 		case "ltr": return lineLtrClasses;
 		case "rtl": return lineRtlClasses;
 		case "center": return lineCenterClasses;
 		case "lift": return lineLiftClasses;
-		case "fill": return getFillCenterClasses(theme, customTheme);
+		case "fill": return twJoin([getFillCenterClasses(theme, customTheme), getTextColor(theme, true)]);
 		case "fill-ltr": return twJoin([
 			getFillColorTransitionClasses(theme, customTheme),
+			getTextColor(theme, true),
 			scaleXClasses,
 			"after:origin-left"
 		]);
 		case "fill-rtl": return twJoin([
 			getFillColorTransitionClasses(theme, customTheme),
+			getTextColor(theme, true),
 			scaleXClasses,
 			"after:origin-right"
 		]);
 		case "fill-lift": return twJoin([
 			getFillColorTransitionClasses(theme, customTheme),
+			getTextColor(theme, true),
 			scaleYClasses,
 			"after:origin-bottom"
 		]);
@@ -562,11 +868,11 @@ function getLinkClasses({ customTheme, theme, type }) {
 		case "multiline-rtl": return multilineLineRtlClasses;
 		case "multiline-center": return multilineLineCenterClasses;
 		case "multiline-lift": return multilineLineLiftClasses;
-		case "multiline-fill": return getMultilineFillClasses(theme, customTheme);
-		case "multiline-fill-ltr": return getMultilineFillXClasses(theme, customTheme);
-		case "multiline-fill-rtl": return getMultilineFillRtlClasses(theme, customTheme);
-		case "multiline-fill-center": return getMultilineFillCenterClasses(theme, customTheme);
-		case "multiline-fill-lift": return getMultilineFillLiftClasses(theme, customTheme);
+		case "multiline-fill": return twJoin([getMultilineFillClasses(theme, customTheme), getTextColor(theme, true)]);
+		case "multiline-fill-ltr": return twJoin([getMultilineFillXClasses(theme, customTheme), getTextColor(theme, true)]);
+		case "multiline-fill-rtl": return twJoin([getMultilineFillRtlClasses(theme, customTheme), getTextColor(theme, true)]);
+		case "multiline-fill-center": return twJoin([getMultilineFillCenterClasses(theme, customTheme), getTextColor(theme, true)]);
+		case "multiline-fill-lift": return twJoin([getMultilineFillLiftClasses(theme, customTheme), getTextColor(theme, true)]);
 		default: return lineNormalClasses;
 	}
 }
@@ -591,26 +897,28 @@ function getLinkClasses({ customTheme, theme, type }) {
 * ## Examples
 *
 * @example
-*   <Link href='/about' type='ltr' title='About Us'>Learn more about our company</Link>
+*   <Link href='/about' lineType='ltr' title='About Us'>Learn more about our company</Link>
+*
+* @example
+*   <Link href='/about' lineType='fill-ltr' title='About Us'>Learn more about our company</Link>
 *
 * @example
-*   <Link href='/about' type='fill-ltr' title='About Us'>Learn more about our company</Link>
+*   <Link href='/about' lineType='multiline-fill-rtl' theme='red' title='About Us'>Learn more about our company</Link>
 *
 * @example
-*   <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
+*   <Link as='button' lineType='fill-lift' theme='mauve-700'>Edit</Link>
 */
-function Link({ as, className, customTheme, theme, type, ...props }) {
+function Link({ as, className, customTheme, lineType, theme, ...props }) {
 	const linkClasses = getLinkClasses({
 		customTheme,
 		theme,
-		type
+		lineType
 	});
 	return /* @__PURE__ */ jsx(as || Anchor, {
 		...props,
 		className: twMerge(linkClasses, className)
 	});
 }
-
 //#endregion
 //#region src/components/button.tsx
 /**
@@ -640,45 +948,18 @@ function Button({ className, customTheme, gradient = false, padding = "md", roun
 		}
 	};
 	const getThemeColorVariable = () => {
-		switch (theme) {
-			case "amber": return "text-white [--theme-color:var(--color-amber-500)]";
-			case "blue": return "text-white [--theme-color:var(--color-blue-500)]";
-			case "cyan": return "text-white [--theme-color:var(--color-cyan-500)]";
-			case "emerald": return "text-white [--theme-color:var(--color-emerald-500)]";
-			case "fuchsia": return "text-white [--theme-color:var(--color-fuchsia-500)]";
-			case "gray": return "text-white [--theme-color:var(--color-gray-500)]";
-			case "green": return "text-white [--theme-color:var(--color-green-500)]";
-			case "indigo": return "text-white [--theme-color:var(--color-indigo-500)]";
-			case "lime": return "text-white [--theme-color:var(--color-lime-500)]";
-			case "mauve": return "text-white [--theme-color:var(--color-mauve-500)]";
-			case "mist": return "text-white [--theme-color:var(--color-mist-500)]";
-			case "neutral": return "text-white [--theme-color:var(--color-neutral-500)]";
-			case "olive": return "text-white [--theme-color:var(--color-olive-500)]";
-			case "orange": return "text-white [--theme-color:var(--color-orange-500)]";
-			case "pink": return "text-white [--theme-color:var(--color-pink-500)]";
-			case "purple": return "text-white [--theme-color:var(--color-purple-500)]";
-			case "red": return "text-white [--theme-color:var(--color-red-500)]";
-			case "rose": return "text-white [--theme-color:var(--color-rose-500)]";
-			case "sky": return "text-white [--theme-color:var(--color-sky-500)]";
-			case "slate": return "text-white [--theme-color:var(--color-slate-500)]";
-			case "stone": return "text-white [--theme-color:var(--color-stone-500)]";
-			case "taupe": return "text-white [--theme-color:var(--color-taupe-500)]";
-			case "teal": return "text-white [--theme-color:var(--color-teal-500)]";
-			case "violet": return "text-white [--theme-color:var(--color-violet-500)]";
-			case "yellow": return "text-white [--theme-color:var(--color-yellow-500)]";
-			case "zinc": return "text-white [--theme-color:var(--color-zinc-500)]";
-			case "custom":
-				if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable. Otherwise, please use `customTheme.classes`.");
-				return customTheme.themeColor || customTheme.classes || "";
-			default: return "text-(--base-theme-color--foreground) [--theme-color:var(--base-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. Otherwise, please use `customTheme.classes`.");
+			return customTheme.themeColor || customTheme.classes || "";
 		}
+		return twJoin([getTextColor(theme), getThemeColor(theme)]);
 	};
 	const buttonClasses = twMerge([
 		"block w-fit min-w-fit corner-super-1.5 text-center font-semibold shadow-lg duration-300 ease-exponential active:scale-99 data-focus:scale-101 pointer-fine:hover:scale-101 pointer-fine:hover:active:scale-99 pointer-fine:active:scale-99",
 		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, {
@@ -691,7 +972,6 @@ function Button({ className, customTheme, gradient = false, padding = "md", roun
 		className: buttonClasses
 	});
 }
-
 //#endregion
 //#region src/symbols/checkmark.tsx
 function Checkmark({ weight = "regular", ...props }) {
@@ -743,7 +1023,6 @@ function Checkmark({ weight = "regular", ...props }) {
 		});
 	}
 }
-
 //#endregion
 //#region src/components/checkbox.tsx
 function Checkbox({ checkmark, children, className, description, descriptionProps: { className: descriptionClassName, ...descriptionProps } = {}, fieldProps: { className: fieldClassName, ...fieldProps } = {}, labelProps: { className: labelClassName, ...labelProps } = {}, inputContainerProps: { className: inputContainerClassName, ...inputContainerProps } = {}, onChange, required, value, ...props }) {
@@ -798,7 +1077,6 @@ function Checkbox({ checkmark, children, className, description, descriptionProp
 		})]
 	});
 }
-
 //#endregion
 //#region node_modules/animejs/dist/modules/core/consts.js
 /**
@@ -850,9 +1128,6 @@ const proxyTargetSymbol = Symbol();
 const minValue = 1e-11;
 const maxValue = 0xe8d4a51000;
 const K = 1e3;
-const maxFps = 240;
-const emptyString = "";
-const cssVarPrefix = "var(";
 const shortTransforms = /* @__PURE__ */ (() => {
 	const map = /* @__PURE__ */ new Map();
 	map.set("x", "translateX");
@@ -896,7 +1171,6 @@ const unitsExecRgx = /^([-+]?\d*\.?\d+(?:e[-+]?\d+)?)([a-z]+|%)$/i;
 const lowerCaseRgx = /([a-z])([A-Z])/g;
 const transformsExecRgx = /(\w+)(\([^)]+\)+)/g;
 const cssVariableMatchRgx = /var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/;
-
 //#endregion
 //#region node_modules/animejs/dist/modules/core/globals.js
 /**
@@ -921,7 +1195,7 @@ const defaults = {
 	keyframes: null,
 	playbackEase: null,
 	playbackRate: 1,
-	frameRate: maxFps,
+	frameRate: 240,
 	loop: 0,
 	reversed: false,
 	alternate: false,
@@ -960,7 +1234,6 @@ if (isBrowser) {
 	if (!win.AnimeJS) win.AnimeJS = [];
 	win.AnimeJS.push(globalVersions);
 }
-
 //#endregion
 //#region node_modules/animejs/dist/modules/core/helpers.js
 /**
@@ -1099,7 +1372,7 @@ const clampInfinity = (v) => v === Infinity ? maxValue : v === -Infinity ? -maxV
 * @param  {Number} v - Time value to normalize
 * @return {Number}
 */
-const normalizeTime = (v) => v <= minValue ? minValue : clampInfinity(round$1(v, 11));
+const normalizeTime = (v) => v <= 1e-11 ? minValue : clampInfinity(round$1(v, 11));
 /**
 * @template T
 * @param    {T[]} a
@@ -1174,7 +1447,6 @@ const addChild = (parent, child, sortMethod, prevProp = "_prev", nextProp = "_ne
 	child[prevProp] = prev;
 	child[nextProp] = next;
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/core/targets.js
 /**
@@ -1287,7 +1559,6 @@ function registerTargets(targets) {
 	}
 	return parsedTargetsArray;
 }
-
 //#endregion
 //#region node_modules/animejs/dist/modules/core/transforms.js
 /**
@@ -1325,7 +1596,6 @@ const parseInlineTransforms = (target, propName, animationInlineStyles) => {
 	}
 	return inlineTransforms && !isUnd(inlinedStylesPropertyValue) ? inlinedStylesPropertyValue : stringStartsWith(propName, "scale") ? "1" : stringStartsWith(propName, "rotate") || stringStartsWith(propName, "skew") ? "0deg" : "0px";
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/core/colors.js
 /**
@@ -1420,7 +1690,6 @@ const convertColorStringValuesToRgbaArray = (colorString) => {
 		1
 	];
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/core/values.js
 /**
@@ -1461,12 +1730,12 @@ const getFunctionValue = (value, target, index, total, store) => {
 		const computed = value(target, index, total);
 		return !isNaN(+computed) ? +computed : computed || 0;
 	};
-	else if (isStr(value) && stringStartsWith(value, cssVarPrefix)) func = () => {
+	else if (isStr(value) && stringStartsWith(value, "var(")) func = () => {
 		const match = value.match(cssVariableMatchRgx);
 		const cssVarName = match[1];
 		const fallbackValue = match[2];
 		let computed = getComputedStyle(target)?.getPropertyValue(cssVarName);
-		if ((!computed || computed.trim() === emptyString) && fallbackValue) computed = fallbackValue.trim();
+		if ((!computed || computed.trim() === "") && fallbackValue) computed = fallbackValue.trim();
 		return computed || 0;
 	};
 	else return value;
@@ -1585,7 +1854,6 @@ const decomposeTweenValue = (tween, targetObject) => {
 	return targetObject;
 };
 const decomposedOriginalValue = createDecomposedValueTargetObject();
-
 //#endregion
 //#region node_modules/animejs/dist/modules/core/styles.js
 /**
@@ -1644,28 +1912,27 @@ const cleanInlineStyles = (renderable) => {
 			if (tweenTarget[isDomSymbol]) {
 				const targetStyle = tweenTarget.style;
 				const originalInlinedValue = tween._inlineValue;
-				const tweenHadNoInlineValue = isNil(originalInlinedValue) || originalInlinedValue === emptyString;
+				const tweenHadNoInlineValue = isNil(originalInlinedValue) || originalInlinedValue === "";
 				if (tween._tweenType === tweenTypes.TRANSFORM) {
 					const cachedTransforms = tweenTarget[transformsSymbol];
 					if (tweenHadNoInlineValue) delete cachedTransforms[tweenProperty];
 					else cachedTransforms[tweenProperty] = originalInlinedValue;
 					if (tween._renderTransforms) if (!Object.keys(cachedTransforms).length) targetStyle.removeProperty("transform");
 					else {
-						let str = emptyString;
+						let str = "";
 						for (let key in cachedTransforms) str += transformsFragmentStrings[key] + cachedTransforms[key] + ") ";
 						targetStyle.transform = str;
 					}
 				} else if (tweenHadNoInlineValue) targetStyle.removeProperty(toLowerCase(tweenProperty));
 				else targetStyle[tweenProperty] = originalInlinedValue;
 				if (animation._tail === tween) animation.targets.forEach((t) => {
-					if (t.getAttribute && t.getAttribute("style") === emptyString) t.removeAttribute("style");
+					if (t.getAttribute && t.getAttribute("style") === "") t.removeAttribute("style");
 				});
 			}
 		});
 	}
 	return renderable;
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/core/units.js
 /**
@@ -1724,7 +1991,6 @@ const convertValueUnit = (el, decomposedValue, unit, force = false) => {
 	decomposedValue.u = unit;
 	return decomposedValue;
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/easings/none.js
 /**
@@ -1740,7 +2006,6 @@ const convertValueUnit = (el, decomposedValue, unit, force = false) => {
 */
 /** @type {EasingFunction} */
 const none = (t) => t;
-
 //#endregion
 //#region node_modules/animejs/dist/modules/easings/eases/parser.js
 /**
@@ -1781,7 +2046,7 @@ const halfPI = PI / 2;
 const doublePI = PI * 2;
 /** @type {Record<String, EasingFunctionWithParams|EasingFunction>} */
 const easeInFunctions = {
-	[emptyString]: easeInPower,
+	[""]: easeInPower,
 	Quad: easeInPower(2),
 	Cubic: easeInPower(3),
 	Quart: easeInPower(4),
@@ -1860,7 +2125,7 @@ const eases = /* @__PURE__ */ (() => {
 	for (let type in easeTypes) for (let name in easeInFunctions) {
 		const easeIn = easeInFunctions[name];
 		const easeType = easeTypes[type];
-		list[type + name] = name === emptyString || name === "Back" || name === "Elastic" ? (a, b) => easeType(
+		list[type + name] = name === "" || name === "Back" || name === "Elastic" ? (a, b) => easeType(
 			/** @type {EasingFunctionWithParams} */
 			easeIn(a, b)
 		) : easeType(easeIn);
@@ -1906,7 +2171,6 @@ const parseEase = (ease) => {
 	}
 	return isFnc(ease) ? ease : isStr(ease) ? parseEaseString(ease) : none;
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/core/render.js
 /**
@@ -2072,7 +2336,7 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 					} else tween._value = value;
 				}
 				if (tweenTransformsNeedUpdate && tween._renderTransforms) {
-					let str = emptyString;
+					let str = "";
 					for (let key in tweenTargetTransformsProperties) str += `${transformsFragmentStrings[key]}${tweenTargetTransformsProperties[key]}) `;
 					tweenStyle.transform = str;
 					tweenTransformsNeedUpdate = 0;
@@ -2085,7 +2349,7 @@ const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 		if (!muteCallbacks && isCurrentTimeAboveZero) tickable.onUpdate(tickable);
 	}
 	if (parent && isSetter) {
-		if (!muteCallbacks && (parent.began && !isRunningBackwards && tickableAbsoluteTime > 0 && !completed || isRunningBackwards && tickableAbsoluteTime <= minValue && completed)) {
+		if (!muteCallbacks && (parent.began && !isRunningBackwards && tickableAbsoluteTime > 0 && !completed || isRunningBackwards && tickableAbsoluteTime <= 1e-11 && completed)) {
 			tickable.onComplete(tickable);
 			tickable.completed = !isRunningBackwards;
 		}
@@ -2133,7 +2397,7 @@ const tick = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 					const childDuration = child.duration;
 					const childStartTime = child._offset + child._delay;
 					const childEndTime = childStartTime + childDuration;
-					if (!muteCallbacks && childDuration <= minValue && (!childStartTime || childEndTime === tlIterationDuration)) child.onComplete(child);
+					if (!muteCallbacks && childDuration <= 1e-11 && (!childStartTime || childEndTime === tlIterationDuration)) child.onComplete(child);
 				}
 			});
 			if (!muteCallbacks) tl.onLoop(tl);
@@ -2157,7 +2421,6 @@ const tick = (tickable, time, muteCallbacks, internalRender, tickMode) => {
 		}
 	}
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/core/clock.js
 /**
@@ -2188,9 +2451,9 @@ var Clock = class {
 		/** @type {Number} */
 		this._scheduledTime = 0;
 		/** @type {Number} */
-		this._frameDuration = K / maxFps;
+		this._frameDuration = K / 240;
 		/** @type {Number} */
-		this._fps = maxFps;
+		this._fps = 240;
 		/** @type {Number} */
 		this._speed = 1;
 		/** @type {Boolean} */
@@ -2206,7 +2469,7 @@ var Clock = class {
 	set fps(frameRate) {
 		const previousFrameDuration = this._frameDuration;
 		const fr = +frameRate;
-		const fps = fr < minValue ? minValue : fr;
+		const fps = fr < 1e-11 ? minValue : fr;
 		const frameDuration = K / fps;
 		if (fps > defaults.frameRate) defaults.frameRate = fps;
 		this._fps = fps;
@@ -2218,7 +2481,7 @@ var Clock = class {
 	}
 	set speed(playbackRate) {
 		const pbr = +playbackRate;
-		this._speed = pbr < minValue ? minValue : pbr;
+		this._speed = pbr < 1e-11 ? minValue : pbr;
 	}
 	/**
 	* @param  {Number} time
@@ -2244,7 +2507,6 @@ var Clock = class {
 		return delta;
 	}
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/animation/additive.js
 /**
@@ -2312,7 +2574,6 @@ const addAdditiveAnimation = (lookups) => {
 	}
 	return animation;
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/engine/engine.js
 /**
@@ -2436,7 +2697,6 @@ const killEngine = () => {
 	engine.reqId = 0;
 	return engine;
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/animation/composition.js
 /**
@@ -2528,7 +2788,7 @@ const composeTween = (tween, siblings) => {
 				prevSibling._changeDuration = updatedPrevChangeDuration;
 				prevSibling._currentTime = updatedPrevChangeDuration;
 				prevSibling._isOverlapped = 1;
-				if (updatedPrevChangeDuration < minValue) overrideTween(prevSibling);
+				if (updatedPrevChangeDuration < 1e-11) overrideTween(prevSibling);
 			}
 			let pausePrevParentAnimation = true;
 			forEachChildren(prevParent, (t) => {
@@ -2673,7 +2933,6 @@ const removeTargetsFromRenderable = (targetsArray, renderable, propertyName) =>
 		if (parent.cancel) /** @type {Renderable} */ parent.cancel();
 	}
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/timer/timer.js
 /**
@@ -2763,7 +3022,7 @@ var Timer = class extends Clock {
 		this.id = !isUnd(id) ? id : timerId;
 		/** @type {Timeline} */
 		this.parent = parent;
-		this.duration = clampInfinity((timerDuration + timerLoopDelay) * timerIterationCount - timerLoopDelay) || minValue;
+		this.duration = clampInfinity((timerDuration + timerLoopDelay) * timerIterationCount - timerLoopDelay) || 1e-11;
 		/** @type {Boolean} */
 		this.backwards = false;
 		/** @type {Boolean} */
@@ -2927,7 +3186,7 @@ var Timer = class extends Clock {
 	resume() {
 		if (!this.paused) return this;
 		this.paused = false;
-		if (this.duration <= minValue && !this._hasChildren) tick(this, minValue, 0, 0, tickModes.FORCE);
+		if (this.duration <= 1e-11 && !this._hasChildren) tick(this, minValue, 0, 0, tickModes.FORCE);
 		else {
 			if (!this._running) {
 				addChild(engine, this);
@@ -3044,7 +3303,6 @@ var Timer = class extends Clock {
 		});
 	}
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/animation/animation.js
 /**
@@ -3189,7 +3447,7 @@ var JSAnimation = class extends Timer {
 		const tDuration = hasSpring ? animEase.settlingDuration : setValue(duration, animDefaults.duration);
 		const tDelay = setValue(delay, animDefaults.delay);
 		const tModifier = modifier || animDefaults.modifier;
-		const tComposition = isUnd(composition) && targetsLength >= K ? compositionTypes.none : !isUnd(composition) ? composition : animDefaults.composition;
+		const tComposition = isUnd(composition) && targetsLength >= 1e3 ? compositionTypes.none : !isUnd(composition) ? composition : animDefaults.composition;
 		const absoluteOffsetTime = this._offset + (parent ? parent._offset : 0);
 		if (hasSpring) /** @type {Spring} */ animEase.parent = this;
 		let iterationDuration = NaN;
@@ -3348,7 +3606,7 @@ var JSAnimation = class extends Timer {
 						shortestValue.d = longestValue.d.map((_, i) => isUnd(shortestValue.d[i]) ? 0 : shortestValue.d[i]);
 						shortestValue.s = cloneArray(longestValue.s);
 					}
-					const tweenUpdateDuration = round$1(+tweenDuration || minValue, 12);
+					const tweenUpdateDuration = round$1(+tweenDuration || 1e-11, 12);
 					let inlineValue = inlineStylesStore[propName];
 					if (!isNil(inlineValue)) inlineStylesStore[propName] = null;
 					/** @type {Tween} */
@@ -3434,7 +3692,7 @@ var JSAnimation = class extends Timer {
 		/** @type {String|Number} */
 		this.id = !isUnd(id) ? id : JSAnimationId;
 		/** @type {Number} */
-		this.duration = iterationDuration === minValue ? minValue : clampInfinity((iterationDuration + this._loopDelay) * this.iterationCount - this._loopDelay) || minValue;
+		this.duration = iterationDuration === 1e-11 ? minValue : clampInfinity((iterationDuration + this._loopDelay) * this.iterationCount - this._loopDelay) || 1e-11;
 		/** @type {Callback<this>} */
 		this.onRender = onRender || animDefaults.onRender;
 		/** @type {EasingFunction} */
@@ -3488,7 +3746,7 @@ var JSAnimation = class extends Timer {
 				}
 			}
 		});
-		if (this.duration === minValue) this.restart();
+		if (this.duration === 1e-11) this.restart();
 		return this;
 	}
 	/**
@@ -3516,7 +3774,6 @@ var JSAnimation = class extends Timer {
 * @return {JSAnimation}
 */
 const animate = (targets, parameters) => new JSAnimation(targets, parameters, null, 0, false).init();
-
 //#endregion
 //#region node_modules/animejs/dist/modules/svg/helpers.js
 /**
@@ -3539,7 +3796,6 @@ const getPath = (path) => {
 	if (!$parsedSvg || !isSvg($parsedSvg)) return console.warn(`${path} is not a valid SVGGeometryElement`);
 	return $parsedSvg;
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/svg/morphto.js
 /**
@@ -3588,15 +3844,13 @@ const morphTo = (path2, precision = .33) => ($path1) => {
 	$path1[morphPointsSymbol] = v2;
 	return [v1, v2];
 };
-
 //#endregion
 //#region src/utils/get-date.ts
 /** The current date as a Date object */
 const d = /* @__PURE__ */ new Date();
 /** The current minute of the current hour */
 const minutes = d.getMinutes();
-/** The current year */
-const year = d.getFullYear();
+d.getFullYear();
 /** An array of the names of month in order */
 const monthNamesList = [
 	"January",
@@ -3622,10 +3876,8 @@ const weekdayNamesList = [
 	"Friday",
 	"Saturday"
 ];
-/** The name of the current month */
-const currentMonthName = getMonthName();
-/** The name of the current day of the week */
-const currentWeekdayName = getWeekdayName();
+getMonthName();
+getWeekdayName();
 /**
 * ### Get Date
 * - Returns the date with two digits
@@ -3718,13 +3970,11 @@ function getWeekdayName(weekday = d) {
 	if (typeof weekday === "number") return weekdayNamesList[weekday];
 	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 }) {
@@ -3767,7 +4017,6 @@ function ChevronUpDownAnime({ className, isUp = false }) {
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/details.tsx
 function DetailsSummary({ arrow = true, children, className, onClick, ...props }) {
@@ -3794,7 +4043,7 @@ function DetailsBody({ children, className, ...props }) {
 		className: twMerge("grid-rows-1fr transition-rows ease-exponential data-closed:grid-rows-0fr grid duration-500", className),
 		transition: true,
 		children: (bag) => /* @__PURE__ */ jsx("div", {
-			className: "overflow-y-hidden px-2 pt-3 pb-1",
+			className: "overflow-y-hidden px-2 pbs-3 pbe-1",
 			children: typeof children === "function" ? children(bag) : children
 		})
 	});
@@ -3807,7 +4056,6 @@ function Details({ as = "div", className, ...props }) {
 		role: "details"
 	});
 }
-
 //#endregion
 //#region src/components/drop-down.tsx
 function DropDownButton({ arrow = true, as, children, className, ...props }) {
@@ -3874,7 +4122,7 @@ function DropDownSection({ children, label, labelProps, separatorAbove, separato
 			separatorAbove && /* @__PURE__ */ jsx(DropDownSeparator, {}),
 			label && /* @__PURE__ */ jsx(MenuHeading, {
 				...restLabelProps,
-				className: (headingBag) => twMerge("text-[larger] font-bold text-current/80", typeof labelClassName === "function" ? labelClassName(headingBag) : labelClassName),
+				className: (headingBag) => twMerge("text-larger font-bold text-current/80", typeof labelClassName === "function" ? labelClassName(headingBag) : labelClassName),
 				children: label
 			}),
 			typeof children === "function" ? children(sectionBag) : children,
@@ -3889,12 +4137,21 @@ function DropDownSeparator({ as, className, ...props }) {
 		className: (bag) => twMerge("my-4 block h-px rounded-full bg-neutral-950/20", typeof className === "function" ? className(bag) : className)
 	});
 }
-function DropDown(props) {
-	return /* @__PURE__ */ jsx(Menu, { ...props });
+function DropDown({ as, ...props }) {
+	return /* @__PURE__ */ jsx(Menu, {
+		...props,
+		as
+	});
 }
-
 //#endregion
 //#region src/components/fieldset.tsx
+/**
+* # Fieldset
+*
+* @prop legend - The legend text to display above the fieldset.
+* @prop legendProps - Additional props to pass to the legend component.
+* @prop className - GOTCHA: The default className includes `contents`, to effectively remove it from the layout. Be sure to change the display style if you want to modify any other styles.
+*/
 function Fieldset({ children, className, legend, legendProps, name, ...props }) {
 	const { className: legendClassName, ...restLegendProps } = legendProps || {};
 	name = legend || name;
@@ -3909,7 +4166,6 @@ function Fieldset({ children, className, legend, legendProps, name, ...props })
 		}), typeof children === "function" ? children(bag) : children] })
 	});
 }
-
 //#endregion
 //#region src/components/form.tsx
 function Form({ children, className, ...props }) {
@@ -3919,7 +4175,6 @@ function Form({ children, className, ...props }) {
 		children
 	});
 }
-
 //#endregion
 //#region src/components/ghost.tsx
 function Ghost({ children, className, ...props }) {
@@ -3929,7 +4184,6 @@ function Ghost({ children, className, ...props }) {
 		children: children || /* @__PURE__ */ jsx(Fragment, { children: "\xA0" })
 	});
 }
-
 //#endregion
 //#region src/components/heading.tsx
 function getTextFromChildren(children) {
@@ -3950,12 +4204,12 @@ function Heading({ as = "h2", children, customize, className, id, ref, ...props
 	const targetableID = id || getTextFromChildren(children).replace(/\s+/g, "-").toLowerCase();
 	const getBaseClasses = () => {
 		switch (as) {
-			case "h1": return twMerge("pb-2.5 text-6xl font-black last:pb-0", customize?.h1);
-			case "h3": return twMerge("pb-2 text-4xl font-extralight last:pb-0", customize?.h3);
-			case "h4": return twMerge("pb-2 text-3xl font-medium last:pb-0", customize?.h4);
-			case "h5": return twMerge("pb-1.5 text-2xl font-semibold last:pb-0", customize?.h5);
-			case "h6": return twMerge("pb-1 text-xl font-bold last:pb-0", customize?.h6);
-			default: return twMerge("pb-2.5 text-5xl font-extrabold last:pb-0", customize?.h2);
+			case "h1": return twMerge("pbe-2.5 text-6xl font-black last:pbe-0", customize?.h1);
+			case "h3": return twMerge("pbe-2 text-4xl font-extralight last:pbe-0", customize?.h3);
+			case "h4": return twMerge("pbe-2 text-3xl font-medium last:pbe-0", customize?.h4);
+			case "h5": return twMerge("pbe-1.5 text-2xl font-semibold last:pbe-0", customize?.h5);
+			case "h6": return twMerge("pbe-1 text-xl font-bold last:pbe-0", customize?.h6);
+			default: return twMerge("pbe-2.5 text-5xl font-extrabold last:pbe-0", customize?.h2);
 		}
 	};
 	const baseClasses = getBaseClasses();
@@ -3967,7 +4221,6 @@ function Heading({ as = "h2", children, customize, className, id, ref, ...props
 		children
 	});
 }
-
 //#endregion
 //#region src/symbols/chevron.forward.tsx
 function ChevronForward({ weight = "regular", ...props }) {
@@ -4019,7 +4272,6 @@ function ChevronForward({ weight = "regular", ...props }) {
 		});
 	}
 }
-
 //#endregion
 //#region node_modules/animejs/dist/modules/animatable/animatable.js
 /**
@@ -4138,7 +4390,6 @@ var Animatable = class {
 		return this;
 	}
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/utils/number.js
 /**
@@ -4151,7 +4402,6 @@ var Animatable = class {
 * @return {Number}
 */
 const mapRange = (value, inLow, inHigh, outLow, outHigh) => outLow + (value - inLow) / (inHigh - inLow) * (outHigh - outLow);
-
 //#endregion
 //#region node_modules/animejs/dist/modules/easings/spring/index.js
 /**
@@ -4322,7 +4572,6 @@ var Spring = class {
 * @returns {Spring}
 */
 const spring = (parameters) => new Spring(parameters);
-
 //#endregion
 //#region node_modules/animejs/dist/modules/utils/target.js
 /**
@@ -4401,7 +4650,6 @@ const set = (targets, parameters) => {
 	parameters.composition = setValue(parameters.composition, compositionTypes.none);
 	return new JSAnimation(targets, parameters, null, 0, true).resume();
 };
-
 //#endregion
 //#region node_modules/animejs/dist/modules/draggable/draggable.js
 /**
@@ -5585,7 +5833,6 @@ var Draggable = class {
 * @return {Draggable}
 */
 const createDraggable = (target, parameters) => new Draggable(target, parameters);
-
 //#endregion
 //#region src/components/human-verification.tsx
 function checkHashSecret([number, letter]) {
@@ -5821,7 +6068,7 @@ function HumanVerification({ children = "Verify", className }) {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				id: "human-verification-instructions",
-				className: "pt-1 text-center text-xs",
+				className: "pbs-1 text-center text-xs",
 				children: [
 					"Human verification challenge.",
 					" ",
@@ -5834,7 +6081,6 @@ function HumanVerification({ children = "Verify", className }) {
 		]
 	});
 }
-
 //#endregion
 //#region src/components/iframe.tsx
 const allAllowProperties = [
@@ -5903,7 +6149,6 @@ function IFrame({ allow, className, referrerPolicy = "no-referrer-when-downgrade
 		sandbox: sandbox?.join(" ")
 	});
 }
-
 //#endregion
 //#region src/components/input.tsx
 /**
@@ -5927,7 +6172,7 @@ function Input({ children, className, description, descriptionProps: { className
 		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),
+				className: (bag) => twMerge("text-sm font-medium", required ? `after:text-red-700 after:content-['_*']` : "", typeof labelClassName === "function" ? labelClassName(bag) : labelClassName),
 				children: label
 			}),
 			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input$1, {
@@ -5937,13 +6182,12 @@ function Input({ children, className, description, descriptionProps: { className
 			}), children] }),
 			description && /* @__PURE__ */ jsx(Description, {
 				...descriptionProps,
-				className: (bag) => twMerge("text-xs text-current/60", typeof descriptionClassName === "function" ? descriptionClassName(bag) : descriptionClassName),
+				className: (bag) => twMerge("max-w-none text-xs text-current/60", typeof descriptionClassName === "function" ? descriptionClassName(bag) : descriptionClassName),
 				children: description
 			})
 		]
 	});
 }
-
 //#endregion
 //#region src/symbols/xmark.tsx
 function Xmark({ weight = "regular", ...props }) {
@@ -5995,7 +6239,6 @@ function Xmark({ weight = "regular", ...props }) {
 		});
 	}
 }
-
 //#endregion
 //#region src/hooks/create-fast-context.tsx
 function createFastContext(defaultInitialState) {
@@ -6037,12 +6280,7 @@ function createFastContext(defaultInitialState) {
 		useStore
 	};
 }
-
-//#endregion
-//#region src/hooks/use-form-status.tsx
-const DEFAULT_STATUS = "incomplete";
-const { Provider, useStore } = createFastContext(DEFAULT_STATUS);
-
+const { Provider, useStore } = createFastContext("incomplete");
 //#endregion
 //#region src/components/modal.tsx
 const { Provider: ModalControlsProvider, useStore: useModalControls } = createFastContext({
@@ -6069,8 +6307,12 @@ function ModalTrigger({ as, onClick, ...props }) {
 		onClick: handleClick
 	});
 }
-function ModalTitle(props) {
-	return /* @__PURE__ */ jsx(DialogTitle, { ...props });
+function ModalTitle({ as, ref, ...props }) {
+	return /* @__PURE__ */ jsx(DialogTitle, {
+		...props,
+		as,
+		ref
+	});
 }
 function ModalDialog(props) {
 	const [modalControls] = useModalControls((store) => store);
@@ -6090,13 +6332,13 @@ function ModalDialog(props) {
 		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(" "),
+			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, {
 				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 pt-px transition-transform duration-300 pointer-fine:group-hover/button:-translate-x-0.5",
+					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", {
@@ -6111,7 +6353,7 @@ function ModalDialog(props) {
 			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),
 			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(" "),
+				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,
 				type: "button",
@@ -6123,8 +6365,18 @@ function ModalDialog(props) {
 		})]
 	});
 }
-function ModalClose({ as, ...props }) {
-	return /* @__PURE__ */ jsx(as || Button$1, { ...props });
+function ModalClose({ as, onClick, ...props }) {
+	const ModalCloseElement = as || Button$1;
+	const [modalControls] = useModalControls((store) => store);
+	const { closeModal } = modalControls || { closeModal: () => {} };
+	const handleClick = (e) => {
+		onClick?.(e);
+		if (!e.defaultPrevented) closeModal();
+	};
+	return /* @__PURE__ */ jsx(ModalCloseElement, {
+		...props,
+		onClick: handleClick
+	});
 }
 function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }) {
 	const [bodyElement, setBodyElement] = useState(null);
@@ -6234,7 +6486,6 @@ function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }
 function Modal(props) {
 	return /* @__PURE__ */ jsx(ModalControlsProvider, { children: /* @__PURE__ */ jsx(ModalDisplay, { ...props }) });
 }
-
 //#endregion
 //#region src/symbols/chevron.up.chevron.down.tsx
 function ChevronUpChevronDown({ weight = "regular", ...props }) {
@@ -6286,7 +6537,6 @@ function ChevronUpChevronDown({ weight = "regular", ...props }) {
 		});
 	}
 }
-
 //#endregion
 //#region src/components/select.tsx
 /**
@@ -6312,7 +6562,7 @@ function SelectOption({ children, className, name, ...props }) {
 		className: "group/option contents",
 		...props,
 		children: (bag) => bag.selectedOption ? /* @__PURE__ */ jsx("span", {
-			className: "mr-3 before:absolute before:-left-3 before:content-[\",_\"]",
+			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),
@@ -6362,7 +6612,7 @@ function Select({ buttonProps, children, className, description, descriptionProp
 		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),
+				className: (bag) => twMerge("text-sm font-medium", required ? `after:text-red-700 after:content-['_*']` : "", typeof labelClassName === "function" ? labelClassName(bag) : labelClassName),
 				children: label
 			}),
 			/* @__PURE__ */ jsxs(Listbox, {
@@ -6378,7 +6628,7 @@ function Select({ buttonProps, children, className, description, descriptionProp
 							"aria-hidden": "true",
 							className: "sr-only top-0 left-1/2",
 							id: props.name + ":input:id" + uniqueId,
-							name: props.name + ":input:name" + uniqueId,
+							name: props.name,
 							onChange: () => {},
 							onInvalid: handleInvalid,
 							onFocus: refocus,
@@ -6399,7 +6649,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("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),
 					transition: transition || true,
 					children
 				})]
@@ -6412,7 +6662,57 @@ function Select({ buttonProps, children, className, description, descriptionProp
 		]
 	});
 }
-
+//#endregion
+//#region src/symbols/circle.fill.tsx
+function CircleFill({ weight = "regular", ...props }) {
+	switch (weight) {
+		case "ultralight": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "6.83594 -72.4785 74.45 74.45",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M44.0606 1.97072C64.521 1.97072 81.2886-14.7969 81.2886-35.2539C81.2886-55.7109 64.521-72.4785 44.0606-72.4785C23.6035-72.4785 6.83594-55.7109 6.83594-35.2539C6.83594-14.7969 23.6035 1.97072 44.0606 1.97072Z" })
+		});
+		case "thin": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "6.83594 -72.9707 75.45 75.43",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M44.5527 2.4629C65.3106 2.4629 82.2832-14.5098 82.2832-35.2539C82.2832-55.9981 65.3106-72.9707 44.5527-72.9707C23.8086-72.9707 6.83594-55.9981 6.83594-35.2539C6.83594-14.5098 23.8086 2.4629 44.5527 2.4629Z" })
+		});
+		case "light": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "6.83594 -73.9316 77.39 77.36",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M45.5137 3.42383C66.8521 3.42383 84.2251-13.9492 84.2251-35.2539C84.2251-56.5586 66.8521-73.9316 45.5137-73.9316C24.209-73.9316 6.83594-56.5586 6.83594-35.2539C6.83594-13.9492 24.209 3.42383 45.5137 3.42383Z" })
+		});
+		case "regular": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "6.83594 -74.6582 78.86 78.81",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M46.2402 4.15039C68.0176 4.15039 85.6934-13.5254 85.6934-35.2539C85.6934-56.9824 68.0176-74.6582 46.2402-74.6582C24.5117-74.6582 6.83594-56.9824 6.83594-35.2539C6.83594-13.5254 24.5117 4.15039 46.2402 4.15039Z" })
+		});
+		case "medium": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "6.83594 -75.124 79.78 79.74",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M46.7061 4.61621C68.7383 4.61621 86.6162-13.2617 86.6162-35.2539C86.6162-57.2461 68.7383-75.124 46.7061-75.124C24.7139-75.124 6.83594-57.2461 6.83594-35.2539C6.83594-13.2617 24.7139 4.61621 46.7061 4.61621Z" })
+		});
+		case "semibold": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "6.83594 -75.4812 80.49 80.45",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M47.0632 4.97334C69.2908 4.97334 87.3237-13.0596 87.3237-35.2539C87.3237-57.4482 69.2908-75.4812 47.0632-75.4812C24.8688-75.4812 6.83594-57.4482 6.83594-35.2539C6.83594-13.0596 24.8688 4.97334 47.0632 4.97334Z" })
+		});
+		case "bold": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "6.83594 -75.9521 81.42 81.4",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M47.5342 5.44434C70.0195 5.44434 88.2568-12.793 88.2568-35.2539C88.2568-57.7148 70.0195-75.9521 47.5342-75.9521C25.0732-75.9521 6.83594-57.7148 6.83594-35.2539C6.83594-12.793 25.0732 5.44434 47.5342 5.44434Z" })
+		});
+		case "heavy": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "6.83594 -76.6353 82.77 82.76",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M48.2173 6.12748C71.0765 6.12748 89.6102-12.4063 89.6102-35.2539C89.6102-58.1015 71.0765-76.6353 48.2173-76.6353C25.3697-76.6353 6.83594-58.1015 6.83594-35.2539C6.83594-12.4063 25.3697 6.12748 48.2173 6.12748Z" })
+		});
+		case "black": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "6.83594 -77.2461 83.98 83.98",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M48.8281 6.73828C72.0215 6.73828 90.8203-12.0605 90.8203-35.2539C90.8203-58.4473 72.0215-77.2461 48.8281-77.2461C25.6348-77.2461 6.83594-58.4473 6.83594-35.2539C6.83594-12.0605 25.6348 6.73828 48.8281 6.73828Z" })
+		});
+	}
+}
 //#endregion
 //#region src/components/submit-button.tsx
 /**
@@ -6440,28 +6740,33 @@ function SubmitButton({ children, className, customTheme, error, formStatus = "r
 			case "incomplete": return incomplete || "Complete Form";
 			case "loading": return loading || /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx("span", {
-					className: "animate-wave animation-delay-300 inline-block",
-					children: "•"
+					className: "sr-only",
+					children: "Submitting…"
 				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "animate-wave animation-delay-150 inline-block",
-					children: "•"
+				"\xA0",
+				/* @__PURE__ */ jsx(CircleFill, {
+					className: "animate-wave size-2",
+					weight: "black"
 				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "animate-wave inline-block",
-					children: "•"
-				})
-			] });
-			case "error": return /* @__PURE__ */ jsxs(Fragment, { children: [
-				error || "Error",
-				" ",
-				/* @__PURE__ */ jsx("span", {
-					className: "absolute top-1/2 ml-1.5 translate-y-[calc(-50%-1.5px)] text-2xl",
-					children: "×"
-				})
+				/* @__PURE__ */ jsx(CircleFill, {
+					className: "animate-wave animation-delay-100 size-2",
+					weight: "black"
+				}),
+				/* @__PURE__ */ jsx(CircleFill, {
+					className: "animate-wave animation-delay-200 size-2",
+					weight: "black"
+				}),
+				"\xA0"
 			] });
+			case "error": return error || /* @__PURE__ */ jsxs(Fragment, { children: ["Error", /* @__PURE__ */ jsx(Xmark, {
+				className: "size-3.5",
+				weight: "semibold"
+			})] });
 			case "readonly": return readonly || children;
-			case "success": return success || "Successfully Submitted";
+			case "success": return success || /* @__PURE__ */ jsxs(Fragment, { children: ["Successfully Submitted", /* @__PURE__ */ jsx(Checkmark, {
+				className: "size-3.5",
+				weight: "semibold"
+			})] });
 			default: return children || "Submit";
 		}
 	};
@@ -6483,7 +6788,7 @@ function SubmitButton({ children, className, customTheme, error, formStatus = "r
 		...dataFormState,
 		className: twMerge([
 			formStatusButtonClasses,
-			"w-full text-white",
+			"flex w-full items-center justify-center gap-2 text-white",
 			className
 		]),
 		customTheme: { themeColor: twMerge("data-error:[--theme-color:var(--color-red-500)] data-incomplete:[--theme-color:var(--color-neutral-500)] data-loading:[--theme-color:var(--color-yellow-500)] data-readonly:[--theme-color:var(--color-neutral-500)] data-ready:[--theme-color:var(--base-theme-color)] data-success:[--theme-color:var(--color-green-500)]", customTheme?.themeColor) },
@@ -6492,7 +6797,6 @@ function SubmitButton({ children, className, customTheme, error, formStatus = "r
 		children: buttonText
 	});
 }
-
 //#endregion
 //#region src/components/textarea.tsx
 /**
@@ -6561,7 +6865,6 @@ function Textarea({ children, className, description, descriptionProps: { classN
 		]
 	});
 }
-
 //#endregion
 //#region src/components/time.tsx
 /**
@@ -6574,45 +6877,48 @@ function Textarea({ children, className, description, descriptionProps: { classN
 * @prop dateTime - Set the dateTime itself.
 * @prop day - Include the day of the month in the display.
 * @prop hours - Include the hours in the display.
+* @prop militaryTime - Use military time (24-hour clock) instead of AM/PM.
 * @prop milliseconds - Include the milliseconds in the display.
 * @prop minutes - Include the minutes in the display.
 * @prop month - Include the month in the display.
 * @prop seconds - Include the seconds in the display.
 * @prop year - Include the year in the display.
 */
-function Time({ children, dateObject, dateTime, day, hours, milliseconds, minutes, month, seconds, year, ref, ...props }) {
+function Time({ children, dateObject, dateTime, day, hours, militaryTime, milliseconds, minutes, month, seconds, year, ref, ...props }) {
 	const [date, setDate] = useState(dateObject || void 0);
 	const getDateAndTime = () => {
 		if (dateTime) return dateTime;
 		if (!date) return "";
-		return [
-			date.getFullYear(),
-			getMonth(date),
-			getDate(date),
-			getHours(date),
-			getMinutes(date),
-			getSeconds(date),
-			getMilliseconds(date)
-		].join("-");
+		const currentYear = date.getFullYear(), currentMonth = getMonth(date), currentDay = getDate(date), currentHour = getHours(date), currentMinute = getMinutes(date), currentSecond = getSeconds(date), currentMillisecond = getMilliseconds(date);
+		return [[
+			currentYear,
+			currentMonth,
+			currentDay
+		].join("-"), [
+			currentHour,
+			currentMinute,
+			[currentSecond, currentMillisecond].join(".")
+		].join(":")].join(" ");
 	};
 	const dateAndTime = getDateAndTime();
 	const getDateDisplay = () => {
 		if (children) return children;
 		if (dateAndTime === "") return "";
-		const [dtYear, dtMonth, dtDay, dtHour, dtMinute, dtSecond, dtMillisecond] = dateAndTime.split("-").map(Number);
+		const [dateData, timeData] = dateAndTime.split(" "), [dtYear, dtMonth, dtDay] = dateData.split("-").map(Number), [dtHour, dtMinute, secondData] = timeData.split(":").map(Number), [dtSecond, dtMillisecond] = String(secondData).split(".").map(Number);
 		return [
-			day && dtDay,
-			month && [getMonthName(Number(dtMonth) - 1), month && year && ","].filter(Boolean).join(""),
+			[month && getMonthName(Number(dtMonth) - 1), !day && month && year && ","].filter(Boolean).join(""),
+			[day && dtDay, day && month && year && ","].filter(Boolean).join(""),
 			year && dtYear,
 			hours && minutes && [
 				"at ",
-				hours && dtHour,
+				hours && militaryTime ? dtHour : dtHour % 12 || 12,
 				hours && minutes && ":",
 				minutes && dtMinute,
 				minutes && seconds && ":",
 				seconds && dtSecond,
 				seconds && milliseconds && ".",
-				milliseconds && dtMillisecond
+				milliseconds && dtMillisecond,
+				!militaryTime && (dtHour < 12 ? "am" : "pm")
 			].filter(Boolean).join("")
 		].filter(Boolean).join(" ");
 	};
@@ -6630,7 +6936,6 @@ function Time({ children, dateObject, dateTime, day, hours, milliseconds, minute
 		children: dateDisplay
 	});
 }
-
 //#endregion
 //#region node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 const min = Math.min;
@@ -6647,10 +6952,6 @@ const oppositeSideMap = {
 	bottom: "top",
 	top: "bottom"
 };
-const oppositeAlignmentMap = {
-	start: "end",
-	end: "start"
-};
 function clamp(start, value, end) {
 	return max(start, min(value, end));
 }
@@ -6669,9 +6970,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
 	return axis === "y" ? "height" : "width";
 }
-const yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
 function getSideAxis(placement) {
-	return yAxisSides.has(getSide(placement)) ? "y" : "x";
+	const firstChar = placement[0];
+	return firstChar === "t" || firstChar === "b" ? "y" : "x";
 }
 function getAlignmentAxis(placement) {
 	return getOppositeAxis(getSideAxis(placement));
@@ -6694,7 +6995,7 @@ function getExpandedPlacements(placement) {
 	];
 }
 function getOppositeAlignmentPlacement(placement) {
-	return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
+	return placement.includes("start") ? placement.replace("start", "end") : placement.replace("end", "start");
 }
 const lrPlacement = ["left", "right"];
 const rlPlacement = ["right", "left"];
@@ -6721,7 +7022,8 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
 	return list;
 }
 function getOppositePlacement(placement) {
-	return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
+	const side = getSide(placement);
+	return oppositeSideMap[side] + placement.slice(side.length);
 }
 function expandPaddingObject(padding) {
 	return {
@@ -6753,7 +7055,6 @@ function rectToClientRect(rect) {
 		y
 	};
 }
-
 //#endregion
 //#region node_modules/@floating-ui/core/dist/floating-ui.core.mjs
 function computeCoordsFromPlacement(_ref, placement, rtl) {
@@ -6855,6 +7156,7 @@ async function detectOverflow(state, options) {
 		right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
 	};
 }
+const MAX_RESET_COUNT = 50;
 /**
 * Computes the `x` and `y` coordinates that will place the floating element
 * next to a given reference element.
@@ -6864,7 +7166,10 @@ async function detectOverflow(state, options) {
 */
 const computePosition$1 = async (reference, floating, config) => {
 	const { placement = "bottom", strategy = "absolute", middleware = [], platform } = config;
-	const validMiddleware = middleware.filter(Boolean);
+	const platformWithDetectOverflow = platform.detectOverflow ? platform : {
+		...platform,
+		detectOverflow
+	};
 	const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
 	let rects = await platform.getElementRects({
 		reference,
@@ -6873,11 +7178,12 @@ const computePosition$1 = async (reference, floating, config) => {
 	});
 	let { x, y } = computeCoordsFromPlacement(rects, placement, rtl);
 	let statefulPlacement = placement;
-	let middlewareData = {};
 	let resetCount = 0;
-	for (let i = 0; i < validMiddleware.length; i++) {
-		var _platform$detectOverf;
-		const { name, fn } = validMiddleware[i];
+	const middlewareData = {};
+	for (let i = 0; i < middleware.length; i++) {
+		const currentMiddleware = middleware[i];
+		if (!currentMiddleware) continue;
+		const { name, fn } = currentMiddleware;
 		const { x: nextX, y: nextY, data, reset } = await fn({
 			x,
 			y,
@@ -6886,10 +7192,7 @@ const computePosition$1 = async (reference, floating, config) => {
 			strategy,
 			middlewareData,
 			rects,
-			platform: {
-				...platform,
-				detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
-			},
+			platform: platformWithDetectOverflow,
 			elements: {
 				reference,
 				floating
@@ -6897,14 +7200,11 @@ const computePosition$1 = async (reference, floating, config) => {
 		});
 		x = nextX != null ? nextX : x;
 		y = nextY != null ? nextY : y;
-		middlewareData = {
-			...middlewareData,
-			[name]: {
-				...middlewareData[name],
-				...data
-			}
+		middlewareData[name] = {
+			...middlewareData[name],
+			...data
 		};
-		if (reset && resetCount <= 50) {
+		if (reset && resetCount < MAX_RESET_COUNT) {
 			resetCount++;
 			if (typeof reset === "object") {
 				if (reset.placement) statefulPlacement = reset.placement;
@@ -7223,7 +7523,6 @@ const size$2 = function(options) {
 		}
 	};
 };
-
 //#endregion
 //#region node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
 function hasWindow() {
@@ -7257,54 +7556,30 @@ function isShadowRoot(value) {
 	if (!hasWindow() || typeof ShadowRoot === "undefined") return false;
 	return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
-const invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
 function isOverflowElement(element) {
 	const { overflow, overflowX, overflowY, display } = getComputedStyle$1(element);
-	return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
+	return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== "inline" && display !== "contents";
 }
-const tableElements = /* @__PURE__ */ new Set([
-	"table",
-	"td",
-	"th"
-]);
 function isTableElement(element) {
-	return tableElements.has(getNodeName(element));
+	return /^(table|td|th)$/.test(getNodeName(element));
 }
-const topLayerSelectors = [":popover-open", ":modal"];
 function isTopLayer(element) {
-	return topLayerSelectors.some((selector) => {
-		try {
-			return element.matches(selector);
-		} catch (_e) {
-			return false;
-		}
-	});
-}
-const transformProperties = [
-	"transform",
-	"translate",
-	"scale",
-	"rotate",
-	"perspective"
-];
-const willChangeValues = [
-	"transform",
-	"translate",
-	"scale",
-	"rotate",
-	"perspective",
-	"filter"
-];
-const containValues = [
-	"paint",
-	"layout",
-	"strict",
-	"content"
-];
+	try {
+		if (element.matches(":popover-open")) return true;
+	} catch (_e) {}
+	try {
+		return element.matches(":modal");
+	} catch (_e) {
+		return false;
+	}
+}
+const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
+const containRe = /paint|layout|strict|content/;
+const isNotNone = (value) => !!value && value !== "none";
+let isWebKitValue;
 function isContainingBlock(elementOrCss) {
-	const webkit = isWebKit();
 	const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
-	return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
+	return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || "") || containRe.test(css.contain || "");
 }
 function getContainingBlock(element) {
 	let currentNode = getParentNode(element);
@@ -7316,16 +7591,11 @@ function getContainingBlock(element) {
 	return null;
 }
 function isWebKit() {
-	if (typeof CSS === "undefined" || !CSS.supports) return false;
-	return CSS.supports("-webkit-backdrop-filter", "none");
+	if (isWebKitValue == null) isWebKitValue = typeof CSS !== "undefined" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none");
+	return isWebKitValue;
 }
-const lastTraversableNodeNames = /* @__PURE__ */ new Set([
-	"html",
-	"body",
-	"#document"
-]);
 function isLastTraversableNode(node) {
-	return lastTraversableNodeNames.has(getNodeName(node));
+	return /^(html|body|#document)$/.test(getNodeName(node));
 }
 function getComputedStyle$1(element) {
 	return getWindow(element).getComputedStyle(element);
@@ -7361,13 +7631,11 @@ function getOverflowAncestors(node, list, traverseIframes) {
 	if (isBody) {
 		const frameElement = getFrameElement(win);
 		return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
-	}
-	return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+	} else return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
 function getFrameElement(win) {
 	return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
 }
-
 //#endregion
 //#region node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
 function getCssDimensions(element) {
@@ -7488,7 +7756,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
 	const isOffsetParentAnElement = isHTMLElement(offsetParent);
 	if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
 		if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) scroll = getNodeScroll(offsetParent);
-		if (isHTMLElement(offsetParent)) {
+		if (isOffsetParentAnElement) {
 			const offsetRect = getBoundingClientRect(offsetParent);
 			scale = getScale(offsetParent);
 			offsets.x = offsetRect.x + offsetParent.clientLeft;
@@ -7556,7 +7824,6 @@ function getViewportRect(element, strategy) {
 		y
 	};
 }
-const absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
 function getInnerBoundingClientRect(element, strategy) {
 	const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
 	const top = clientRect.top + element.clientTop;
@@ -7601,7 +7868,7 @@ function getClippingElementAncestors(element, cache) {
 		const computedStyle = getComputedStyle$1(currentNode);
 		const currentNodeIsContaining = isContainingBlock(currentNode);
 		if (!currentNodeIsContaining && computedStyle.position === "fixed") currentContainingBlockComputedStyle = null;
-		if (elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode)) result = result.filter((ancestor) => ancestor !== currentNode);
+		if (elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === "absolute" || currentContainingBlockComputedStyle.position === "fixed") || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode)) result = result.filter((ancestor) => ancestor !== currentNode);
 		else currentContainingBlockComputedStyle = computedStyle;
 		currentNode = getParentNode(currentNode);
 	}
@@ -7611,20 +7878,23 @@ function getClippingElementAncestors(element, cache) {
 function getClippingRect(_ref) {
 	let { element, boundary, rootBoundary, strategy } = _ref;
 	const clippingAncestors = [...boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary), rootBoundary];
-	const firstClippingAncestor = clippingAncestors[0];
-	const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
-		const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
-		accRect.top = max(rect.top, accRect.top);
-		accRect.right = min(rect.right, accRect.right);
-		accRect.bottom = min(rect.bottom, accRect.bottom);
-		accRect.left = max(rect.left, accRect.left);
-		return accRect;
-	}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+	const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
+	let top = firstRect.top;
+	let right = firstRect.right;
+	let bottom = firstRect.bottom;
+	let left = firstRect.left;
+	for (let i = 1; i < clippingAncestors.length; i++) {
+		const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
+		top = max(rect.top, top);
+		right = min(rect.right, right);
+		bottom = min(rect.bottom, bottom);
+		left = max(rect.left, left);
+	}
 	return {
-		width: clippingRect.right - clippingRect.left,
-		height: clippingRect.bottom - clippingRect.top,
-		x: clippingRect.left,
-		y: clippingRect.top
+		width: right - left,
+		height: bottom - top,
+		x: left,
+		y: top
 	};
 }
 function getDimensions(element) {
@@ -7786,7 +8056,7 @@ function autoUpdate(reference, floating, update, options) {
 	if (options === void 0) options = {};
 	const { ancestorScroll = true, ancestorResize = true, elementResize = typeof ResizeObserver === "function", layoutShift = typeof IntersectionObserver === "function", animationFrame = false } = options;
 	const referenceEl = unwrapElement(reference);
-	const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
+	const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...floating ? getOverflowAncestors(floating) : []] : [];
 	ancestors.forEach((ancestor) => {
 		ancestorScroll && ancestor.addEventListener("scroll", update, { passive: true });
 		ancestorResize && ancestor.addEventListener("resize", update);
@@ -7797,7 +8067,7 @@ function autoUpdate(reference, floating, update, options) {
 	if (elementResize) {
 		resizeObserver = new ResizeObserver((_ref) => {
 			let [firstEntry] = _ref;
-			if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+			if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
 				resizeObserver.unobserve(floating);
 				cancelAnimationFrame(reobserveFrame);
 				reobserveFrame = requestAnimationFrame(() => {
@@ -7808,7 +8078,7 @@ function autoUpdate(reference, floating, update, options) {
 			update();
 		});
 		if (referenceEl && !animationFrame) resizeObserver.observe(referenceEl);
-		resizeObserver.observe(floating);
+		if (floating) resizeObserver.observe(floating);
 	}
 	let frameId;
 	let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
@@ -7885,7 +8155,6 @@ const computePosition = (reference, floating, options) => {
 		platform: platformWithCache
 	});
 };
-
 //#endregion
 //#region node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
 var index = typeof document !== "undefined" ? useLayoutEffect : function noop() {};
@@ -8115,50 +8384,69 @@ const arrow$1 = (options) => {
 * object may be passed.
 * @see https://floating-ui.com/docs/offset
 */
-const offset = (options, deps) => ({
-	...offset$1(options),
-	options: [options, deps]
-});
+const offset = (options, deps) => {
+	const result = offset$1(options);
+	return {
+		name: result.name,
+		fn: result.fn,
+		options: [options, deps]
+	};
+};
 /**
 * Optimizes the visibility of the floating element by shifting it in order to
 * keep it in view when it will overflow the clipping boundary.
 * @see https://floating-ui.com/docs/shift
 */
-const shift = (options, deps) => ({
-	...shift$1(options),
-	options: [options, deps]
-});
+const shift = (options, deps) => {
+	const result = shift$1(options);
+	return {
+		name: result.name,
+		fn: result.fn,
+		options: [options, deps]
+	};
+};
 /**
 * Optimizes the visibility of the floating element by flipping the `placement`
 * in order to keep it in view when the preferred placement(s) will overflow the
 * clipping boundary. Alternative to `autoPlacement`.
 * @see https://floating-ui.com/docs/flip
 */
-const flip = (options, deps) => ({
-	...flip$1(options),
-	options: [options, deps]
-});
+const flip = (options, deps) => {
+	const result = flip$1(options);
+	return {
+		name: result.name,
+		fn: result.fn,
+		options: [options, deps]
+	};
+};
 /**
 * Provides data that allows you to change the size of the floating element —
 * for instance, prevent it from overflowing the clipping boundary or match the
 * width of the reference element.
 * @see https://floating-ui.com/docs/size
 */
-const size = (options, deps) => ({
-	...size$1(options),
-	options: [options, deps]
-});
+const size = (options, deps) => {
+	const result = size$1(options);
+	return {
+		name: result.name,
+		fn: result.fn,
+		options: [options, deps]
+	};
+};
 /**
 * Provides data to position an inner element of the floating element so that it
 * appears centered to the reference element.
 * This wraps the core `arrow` middleware to allow React refs as the element.
 * @see https://floating-ui.com/docs/arrow
 */
-const arrow = (options, deps) => ({
-	...arrow$1(options),
-	options: [options, deps]
-});
-
+const arrow = (options, deps) => {
+	const result = arrow$1(options);
+	return {
+		name: result.name,
+		fn: result.fn,
+		options: [options, deps]
+	};
+};
 //#endregion
 //#region src/components/tooltip.tsx
 const defaultTooltipContext = {
@@ -8453,6 +8741,5 @@ 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, Select, SelectOption, SelectSectionTitle, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, generateHumanValidationToken, getLinkClasses, validateHuman };