mado-ui 0.5.5 → 0.5.7

package/dist/components.js

@@ -139,7 +139,7 @@ getMonthName();
 /** The name of the current day of the week */
 getWeekdayName();
 /**
- * # Get Date
+ * ### Get Date
  * - Returns the date with two digits
  * @param {number|Date} date The date to get date
  * @returns {string} The date with two digits
@@ -153,7 +153,7 @@ function getDate(date = d) {
     return formattedDate;
 }
 /**
- * # Get Hours
+ * ### Get Hours
  * - Returns the hours with two digits
  * @param {number|Date} hours The date to get hours
  * @returns {string} The hours with two digits
@@ -167,7 +167,7 @@ function getHours(hours = d) {
     return formattedHours;
 }
 /**
- * # Get Milliseconds
+ * ### Get Milliseconds
  * - Returns the milliseconds with two digits
  * @param {number|Date} milliseconds The date to get milliseconds
  * @returns {string} The milliseconds with two digits
@@ -181,7 +181,7 @@ function getMilliseconds(milliseconds = d) {
     return formattedMilliseconds;
 }
 /**
- * # Get Minutes
+ * ### Get Minutes
  * - Returns the minutes with two digits
  * @param {number|Date} minutes The date to get minutes
  * @returns {string} The minutes with two digits
@@ -195,7 +195,7 @@ function getMinutes(minutes = d) {
     return formattedMinutes;
 }
 /**
- * # Get Month
+ * ### Get Month
  * - Returns the month with two digits
  * @param {number|Date} month The date to get month
  * @returns {string} The month with two digits
@@ -212,7 +212,7 @@ function getMonthIndexFromName(name) {
     return monthNamesList.findIndex(monthName => monthName === name);
 }
 /**
- * # Get Month Name
+ * ### Get Month Name
  * - Returns the name of the specified month
  * @param {Date} date A Date object representing the month to get the name of the month from. (Preset to the current date)
  * @returns {MonthName} The name of the specified month
@@ -223,7 +223,7 @@ function getMonthName(date = d) {
     return monthNamesList[date.getMonth()];
 }
 /**
- * # Get Seconds
+ * ### Get Seconds
  * - Returns the seconds with two digits
  * @param {number|Date} seconds The date to get seconds
  * @returns {string} The seconds with two digits
@@ -237,7 +237,7 @@ function getSeconds(seconds = d) {
     return formattedSeconds;
 }
 /**
- * # Get User Readable Date
+ * ### Get User Readable Date
  * - Returns a string of the current date in a user-friendly way
  * - Includes `'Yesterday'`, '`Today'`, and `'Tomorrow'`
  * @param date (default: `new Date()`)
@@ -261,7 +261,7 @@ function getUserReadableDate(date = d) {
     return fullDateString;
 }
 /**
- * # Get Weekday Name
+ * ### Get Weekday Name
  * - Returns the weekday name of the specified day
  * @param {number | Date} weekday A Date object or number representing the day to get the weekday name from. (Preset to the current date)
  * @returns {WeekdayName} The name of the specified weekday
@@ -273,7 +273,7 @@ function getWeekdayName(weekday = d) {
     return weekdayNamesList[weekday.getDay()];
 }
 /**
- * # To Full Date String
+ * ### To Full Date String
  * - Returns a formatted string to display the date
  * @param {Date} date (default: `new Date()`)
  * @param {ToFullDateStringOptionsProps} options Change how to display the weekday, month name, day of the month, and year.
@@ -471,85 +471,93 @@ function twSort(className) {
 }
 
 function Anchor({ as, className, disabled, href, onClick, target, rel, ...props }) {
-    const isExternal = `${href}`.startsWith('http'), hasHash = `${href}`.includes('#');
-    const handleClick = e => {
+    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);
     };
-    const AnchorElement = as || 'a';
-    return (jsxRuntime.jsx(AnchorElement, { ...props, "aria-disabled": disabled, className: twMerge(className, disabled && 'pointer-events-none'), href: href, target: target || (isExternal ? '_blank' : '_self'), onClick: hasHash ? handleClick : onClick, rel: rel !== undefined
-            ? rel === 'nofollow'
-                ? `${rel} noreferrer noopener`
-                : `${rel} prefetch`
+    const AnchorElement = as || "a";
+    return (jsxRuntime.jsx(AnchorElement, { ...props, "aria-disabled": disabled, className: twMerge(className, disabled && "pointer-events-none"), href: href, target: target || (isExternal ? "_blank" : "_self"), onClick: hasHash ? handleClick : onClick, rel: rel !== undefined
+            ? rel === "nofollow" ? `${rel} noreferrer noopener` : `${rel} prefetch`
             : isExternal
-                ? 'nofollow noreferrer noopener'
-                : 'prefetch' }));
+                ? "nofollow noreferrer noopener"
+                : "prefetch" }));
 }
 // * Styles
-const baseClasses = twSort('isolate inline-block cursor-pointer duration-300 ease-exponential after:absolute after:left-1/2 after:-z-10 after:-translate-x-1/2 after:duration-500 active:scale-95 active:after:opacity-100');
-const lineStaticClasses = tailwindMerge.twJoin(baseClasses, 'whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border-1 after:border-current');
-const lineClasses = tailwindMerge.twJoin(lineStaticClasses, 'whitespace-nowrap transition-transform after:transition-transform after:ease-exponential');
-const scaleXClasses = 'after:scale-x-0 pointer-fine:hover:after:scale-x-100 active:after:scale-x-100';
-const scaleYClasses = 'after:scale-y-0 pointer-fine:hover:after:scale-y-100 active:after:scale-y-100';
+const baseClasses = twSort("isolate inline-block cursor-pointer duration-300 ease-exponential after:absolute after:left-1/2 after:-z-10 after:-translate-x-1/2 after:duration-500 active:scale-95 active:after:opacity-100");
+const lineStaticClasses = tailwindMerge.twJoin(baseClasses, "whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border-1 after:border-current");
+const lineClasses = tailwindMerge.twJoin(lineStaticClasses, "whitespace-nowrap transition-transform after:transition-transform after:ease-exponential");
+const scaleXClasses = "after:scale-x-0 pointer-fine:hover:after:scale-x-100 active:after:scale-x-100";
+const scaleYClasses = "after:scale-y-0 pointer-fine:hover:after:scale-y-100 active:after:scale-y-100";
 const lineNormalClasses = tailwindMerge.twJoin([
     lineClasses,
     scaleYClasses,
-    'after:origin-bottom after:translate-y-0.5 active:after:translate-y-0 pointer-fine:hover:after:translate-y-0',
+    "after:origin-bottom after:translate-y-0.5 active:after:translate-y-0 pointer-fine:hover:after:translate-y-0",
+]);
+const lineLtrClasses = tailwindMerge.twJoin([
+    lineClasses,
+    scaleXClasses,
+    "after:origin-left",
+]);
+const lineRtlClasses = tailwindMerge.twJoin([
+    lineClasses,
+    scaleXClasses,
+    "after:origin-right",
 ]);
-const lineLtrClasses = tailwindMerge.twJoin([lineClasses, scaleXClasses, 'after:origin-left']);
-const lineRtlClasses = tailwindMerge.twJoin([lineClasses, scaleXClasses, 'after:origin-right']);
 const lineCenterClasses = tailwindMerge.twJoin([lineClasses, scaleXClasses]);
 const lineLiftClasses = tailwindMerge.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',
+    "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",
 ]);
-const fillClasses = tailwindMerge.twJoin(baseClasses, 'whitespace-nowrap 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-zinc-50 pointer-fine:hover:text-zinc-50');
+const fillClasses = tailwindMerge.twJoin(baseClasses, "whitespace-nowrap 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-zinc-50 pointer-fine:hover:text-zinc-50");
 // Define theme-specific fill color transition classes
-const getFillColorTransitionClasses = (theme = 'blue', customTheme) => {
-    let fillColorTransitionClasses = tailwindMerge.twJoin(fillClasses, 'transition-transform after:bg-(--theme-color)');
+const getFillColorTransitionClasses = (theme = "blue", customTheme) => {
+    let fillColorTransitionClasses = tailwindMerge.twJoin(fillClasses, "transition-transform after:bg-(--theme-color)");
     switch (theme) {
-        case 'blue':
-            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-blue)]');
+        case "blue":
+            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-blue)]");
             break;
-        case 'brown':
-            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-brow)]');
+        case "brown":
+            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-brow)]");
             break;
-        case 'green':
-            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-green)]');
+        case "green":
+            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-green)]");
             break;
-        case 'grey':
-            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-grey)]');
+        case "grey":
+            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-grey)]");
             break;
-        case 'sky-blue':
-            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-sky-blue)]');
+        case "sky-blue":
+            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-sky-blue)]");
             break;
-        case 'magenta':
-            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-magenta)]');
+        case "magenta":
+            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-magenta)]");
             break;
-        case 'orange':
-            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-orange)]');
+        case "orange":
+            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-orange)]");
             break;
-        case 'pink':
-            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-pink)]');
+        case "pink":
+            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-pink)]");
             break;
-        case 'purple':
-            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-purple)]');
+        case "purple":
+            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-purple)]");
             break;
-        case 'red':
-            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-red)]');
+        case "red":
+            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-red)]");
             break;
-        case 'violet':
-            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-violet)]');
+        case "violet":
+            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-violet)]");
             break;
-        case 'yellow':
-            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-yellow)]');
+        case "yellow":
+            fillColorTransitionClasses = tailwindMerge.twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-yellow)]");
             break;
-        case 'custom':
-            if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes('after:[--theme-color:'))
-                throw new Error('`customTheme.themeColor` must modify the `--theme-color` variable on the ::after pseudo element. Otherwise, please use `customTheme.classes`.');
+        case "custom":
+            if (customTheme && customTheme.themeColor &&
+                !customTheme.themeColor.includes("after:[--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);
@@ -558,48 +566,50 @@ const getFillColorTransitionClasses = (theme = 'blue', customTheme) => {
     return fillColorTransitionClasses;
 };
 // Define theme-specific fill center classes
-const getFillCenterClasses = (theme = 'blue', customTheme) => {
-    let fillCenterColorClasses = tailwindMerge.twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-(--theme-color)/0 after:transition-[transform,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)');
+const getFillCenterClasses = (theme = "blue", customTheme) => {
+    let fillCenterColorClasses = tailwindMerge.twJoin(fillClasses, "after:scale-x-50 after:scale-y-[0.25] after:bg-(--theme-color)/0 after:transition-[transform,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)");
     switch (theme) {
-        case 'blue':
-            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-blue)]');
+        case "blue":
+            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-blue)]");
             break;
-        case 'brown':
-            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-brown)]');
+        case "brown":
+            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-brown)]");
             break;
-        case 'green':
-            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-green)]');
+        case "green":
+            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-green)]");
             break;
-        case 'grey':
-            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-grey)]');
+        case "grey":
+            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-grey)]");
             break;
-        case 'sky-blue':
-            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-sky-blue)]');
+        case "sky-blue":
+            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-sky-blue)]");
             break;
-        case 'magenta':
-            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-magenta)]');
+        case "magenta":
+            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-magenta)]");
             break;
-        case 'orange':
-            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-orange)]');
+        case "orange":
+            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-orange)]");
             break;
-        case 'pink':
-            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-pink)]');
+        case "pink":
+            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-pink)]");
             break;
-        case 'purple':
-            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-purple)]');
+        case "purple":
+            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-purple)]");
             break;
-        case 'red':
-            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-red)]');
+        case "red":
+            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-red)]");
             break;
-        case 'violet':
-            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-violet)]');
+        case "violet":
+            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-violet)]");
             break;
-        case 'yellow':
-            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-yellow)]');
+        case "yellow":
+            fillCenterColorClasses = tailwindMerge.twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-yellow)]");
             break;
-        case 'custom':
-            if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes('after:[--theme-color:'))
-                throw new Error('`customTheme.themeColor` must modify the `--theme-color` variable on the ::after pseudo element. Otherwise, please use `customTheme.classes`.');
+        case "custom":
+            if (customTheme && customTheme.themeColor &&
+                !customTheme.themeColor.includes("after:[--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);
@@ -607,58 +617,66 @@ const getFillCenterClasses = (theme = 'blue', customTheme) => {
     }
     return fillCenterColorClasses;
 };
-const multilineBaseClasses = twSort('bg-linear-to-r from-current to-current bg-no-repeat active:scale-95');
-const multilineLineStaticClasses = 'underline';
-const multilineNormalClasses = twSort('underline-offset-1 active:underline pointer-fine:hover:underline');
-const multilineClasses = tailwindMerge.twJoin(multilineBaseClasses, 'duration-500 ease-exponential');
-const multilineLineClasses = tailwindMerge.twJoin(multilineClasses, 'bg-[position:0%_100%] px-px pb-px transition-[background-size]');
-const multilineXClasses = tailwindMerge.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 = tailwindMerge.twJoin([multilineXClasses, 'bg-[position:100%_100%]']);
-const multilineLineCenterClasses = tailwindMerge.twJoin([multilineXClasses, 'bg-[position:50%_100%]']);
-const multilineLineLiftClasses = tailwindMerge.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 = tailwindMerge.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) => {
-    let multilineFillColorClasses = tailwindMerge.twJoin(multilineFillBaseClasses, 'from-(--theme-color) to-(--theme-color) transition-[background-size,color]');
+const multilineBaseClasses = twSort("bg-linear-to-r from-current to-current bg-no-repeat active:scale-95");
+const multilineLineStaticClasses = "underline";
+const multilineNormalClasses = twSort("underline-offset-1 active:underline pointer-fine:hover:underline");
+const multilineClasses = tailwindMerge.twJoin(multilineBaseClasses, "duration-500 ease-exponential");
+const multilineLineClasses = tailwindMerge.twJoin(multilineClasses, "bg-[position:0%_100%] px-px pb-px transition-[background-size]");
+const multilineXClasses = tailwindMerge.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 = tailwindMerge.twJoin([
+    multilineXClasses,
+    "bg-[position:100%_100%]",
+]);
+const multilineLineCenterClasses = tailwindMerge.twJoin([
+    multilineXClasses,
+    "bg-[position:50%_100%]",
+]);
+const multilineLineLiftClasses = tailwindMerge.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 = tailwindMerge.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) => {
+    let multilineFillColorClasses = tailwindMerge.twJoin(multilineFillBaseClasses, "from-(--theme-color) to-(--theme-color) transition-[background-size,color]");
     switch (theme) {
-        case 'blue':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-blue)]');
+        case "blue":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-blue)]");
             break;
-        case 'brown':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-brown)]');
+        case "brown":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-brown)]");
             break;
-        case 'green':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-green)]');
+        case "green":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-green)]");
             break;
-        case 'grey':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-grey)]');
+        case "grey":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-grey)]");
             break;
-        case 'sky-blue':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-sky-blue)]');
+        case "sky-blue":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-sky-blue)]");
             break;
-        case 'magenta':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-magenta)]');
+        case "magenta":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-magenta)]");
             break;
-        case 'orange':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-orange)]');
+        case "orange":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-orange)]");
             break;
-        case 'pink':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-pink)]');
+        case "pink":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-pink)]");
             break;
-        case 'purple':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-purple)]');
+        case "purple":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-purple)]");
             break;
-        case 'red':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-red)]');
+        case "red":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-red)]");
             break;
-        case 'violet':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-violet)]');
+        case "violet":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-violet)]");
             break;
-        case 'yellow':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-yellow)]');
+        case "yellow":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-yellow)]");
             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`.');
+        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);
@@ -666,48 +684,50 @@ const getMultilineFillColorClasses = (theme = 'blue', customTheme) => {
     }
     return multilineFillColorClasses;
 };
-const getMultilineFillClasses = (theme = 'blue', customTheme) => {
-    let multilineFillColorClasses = tailwindMerge.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%]');
+const getMultilineFillClasses = (theme = "blue", customTheme) => {
+    let multilineFillColorClasses = tailwindMerge.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 'blue':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-blue)]');
+        case "blue":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-blue)]");
             break;
-        case 'brown':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-brown)]');
+        case "brown":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-brown)]");
             break;
-        case 'green':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-green)]');
+        case "green":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-green)]");
             break;
-        case 'grey':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-grey)]');
+        case "grey":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-grey)]");
             break;
-        case 'sky-blue':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-sky-blue)]');
+        case "sky-blue":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-sky-blue)]");
             break;
-        case 'magenta':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-magenta)]');
+        case "magenta":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-magenta)]");
             break;
-        case 'orange':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-orange)]');
+        case "orange":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-orange)]");
             break;
-        case 'pink':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-pink)]');
+        case "pink":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-pink)]");
             break;
-        case 'purple':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-purple)]');
+        case "purple":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-purple)]");
             break;
-        case 'red':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-red)]');
+        case "red":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-red)]");
             break;
-        case 'violet':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-violet)]');
+        case "violet":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-violet)]");
             break;
-        case 'yellow':
-            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-yellow)]');
+        case "yellow":
+            multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-yellow)]");
             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`.');
+        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);
@@ -715,18 +735,76 @@ const getMultilineFillClasses = (theme = 'blue', customTheme) => {
     }
     return multilineFillColorClasses;
 };
-const getMultilineFillLiftClasses = (theme = 'blue', customTheme) => {
-    return tailwindMerge.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 getMultilineFillLiftClasses = (theme = "blue", customTheme) => {
+    return tailwindMerge.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) => {
-    return tailwindMerge.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 getMultilineFillXClasses = (theme = "blue", customTheme) => {
+    return tailwindMerge.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) => {
-    return tailwindMerge.twJoin(getMultilineFillXClasses(theme, customTheme), 'bg-[position:100%_auto]');
+const getMultilineFillRtlClasses = (theme = "blue", customTheme) => {
+    return tailwindMerge.twJoin(getMultilineFillXClasses(theme, customTheme), "bg-[position:100%_auto]");
 };
-const getMultilineFillCenterClasses = (theme = 'blue', customTheme) => {
-    return tailwindMerge.twJoin(getMultilineFillXClasses(theme, customTheme), 'bg-[position:50%_auto]');
+const getMultilineFillCenterClasses = (theme = "blue", customTheme) => {
+    return tailwindMerge.twJoin(getMultilineFillXClasses(theme, customTheme), "bg-[position:50%_auto]");
 };
+function getLinkClasses({ customTheme, theme, type }) {
+    switch (type) {
+        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-ltr":
+            return tailwindMerge.twJoin([
+                getFillColorTransitionClasses(theme, customTheme),
+                scaleXClasses,
+                "after:origin-left",
+            ]);
+        case "fill-rtl":
+            return tailwindMerge.twJoin([
+                getFillColorTransitionClasses(theme, customTheme),
+                scaleXClasses,
+                "after:origin-right",
+            ]);
+        case "fill-lift":
+            return tailwindMerge.twJoin([
+                getFillColorTransitionClasses(theme, customTheme),
+                scaleYClasses,
+                "after:origin-bottom",
+            ]);
+        case "multiline":
+            return multilineNormalClasses;
+        case "multiline-static":
+            return multilineLineStaticClasses;
+        case "multiline-ltr":
+            return multilineXClasses;
+        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);
+        default:
+            return lineNormalClasses;
+    }
+}
 /**
  * # Link
  *
@@ -756,54 +834,8 @@ const getMultilineFillCenterClasses = (theme = 'blue', customTheme) => {
  * @example
  *   <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
  */
-function Link({ as, className, customTheme, theme = 'blue', type, ...props }) {
-    const getLinkClasses = () => {
-        switch (type) {
-            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-ltr':
-                return tailwindMerge.twJoin([getFillColorTransitionClasses(theme, customTheme), scaleXClasses, 'after:origin-left']);
-            case 'fill-rtl':
-                return tailwindMerge.twJoin([getFillColorTransitionClasses(theme, customTheme), scaleXClasses, 'after:origin-right']);
-            case 'fill-lift':
-                return tailwindMerge.twJoin([getFillColorTransitionClasses(theme, customTheme), scaleYClasses, 'after:origin-bottom']);
-            case 'multiline':
-                return multilineNormalClasses;
-            case 'multiline-static':
-                return multilineLineStaticClasses;
-            case 'multiline-ltr':
-                return multilineXClasses;
-            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);
-            default:
-                return lineNormalClasses;
-        }
-    };
-    const linkClasses = getLinkClasses();
+function Link({ as, className, customTheme, theme = "blue", type, ...props }) {
+    const linkClasses = getLinkClasses({ customTheme, theme, type });
     const LinkElement = as || Anchor;
     return jsxRuntime.jsx(LinkElement, { ...props, className: twMerge(linkClasses, className) });
 }
@@ -834,7 +866,9 @@ function Link({ as, className, customTheme, theme = 'blue', type, ...props }) {
  */
 function createLink(config) {
     return function ExtendedLink({ theme, className, customTheme, type, as, ...props }) {
-        const finalType = type !== undefined ? type : config.type, finalTheme = theme !== undefined ? theme : config.defaultTheme;
+        const finalType = type !== undefined
+            ? type
+            : config.type, finalTheme = theme !== undefined ? theme : config.defaultTheme;
         const configClassName = config.className;
         const shouldOverrideElement = !Boolean(as) && Boolean(config.as);
         const linkProps = {
@@ -849,13 +883,17 @@ function createLink(config) {
         else if (as) {
             linkProps.as = as;
         }
-        if (finalTheme && typeof finalTheme === 'string' && config.theme && finalTheme in config.theme) {
+        if (finalTheme && typeof finalTheme === "string" && config.theme &&
+            finalTheme in config.theme) {
             const extendedTheme = config.theme[finalTheme];
-            if (customTheme)
-                return (jsxRuntime.jsx(Link, { ...linkProps, theme: 'custom', customTheme: customTheme, className: twMerge(configClassName, extendedTheme.className, className) }));
+            if (customTheme) {
+                return (jsxRuntime.jsx(Link, { ...linkProps, theme: "custom", customTheme: customTheme, className: twMerge(configClassName, extendedTheme.className, className) }));
+            }
             let resolvedCustomTheme;
             if (extendedTheme.customTheme.themeColor) {
-                const isMultilineType = finalType ? finalType.includes('multiline') : false;
+                const isMultilineType = finalType
+                    ? finalType.includes("multiline")
+                    : false;
                 resolvedCustomTheme = {
                     themeColor: isMultilineType
                         ? extendedTheme.customTheme.themeColor.multilineFill
@@ -867,7 +905,7 @@ function createLink(config) {
                     classes: extendedTheme.customTheme.classes,
                 };
             }
-            return (jsxRuntime.jsx(Link, { ...linkProps, theme: 'custom', customTheme: resolvedCustomTheme, className: twMerge(configClassName, extendedTheme.className, className) }));
+            return (jsxRuntime.jsx(Link, { ...linkProps, theme: "custom", customTheme: resolvedCustomTheme, className: twMerge(configClassName, extendedTheme.className, className) }));
         }
         return (jsxRuntime.jsx(Link, { ...linkProps, theme: finalTheme, className: twMerge(configClassName, className), customTheme: customTheme }));
     };
@@ -1141,32 +1179,44 @@ function Details({ as = 'div', className, ...props }) {
 }
 
 function DropDownButton({ arrow = true, as, children, className, ...props }) {
-    return (jsxRuntime.jsxs(react.MenuButton, { ...props, as: as || 'button', className: tailwindMerge.twJoin('group/button', className), children: [children, arrow &&
-                (typeof arrow === 'boolean' ? (jsxRuntime.jsx(ChevronDown, { className: '-top-px -mr-1 ml-2 w-4 animate-flip-again group-data-open/button:animate-flip' })) : (arrow))] }));
+    return (jsxRuntime.jsxs(react.MenuButton, { ...props, as: as || "button", className: tailwindMerge.twJoin("group/button", className), children: [children, arrow &&
+                (typeof arrow === "boolean"
+                    ? (jsxRuntime.jsx(ChevronDown, { className: "-top-px -mr-1 ml-2 w-4 animate-flip-again group-data-open/button:animate-flip" }))
+                    : arrow)] }));
 }
 function DropDownItem({ as, ...props }) {
-    return jsxRuntime.jsx(react.MenuItem, { ...props, as: as || 'div' });
+    return jsxRuntime.jsx(react.MenuItem, { ...props, as: as || "div" });
 }
 function DropDownItems({ anchor, children, className, containerClassName, style, ...props }) {
     const getAnchorProps = () => {
-        let initialAnchor = { gap: '1rem', padding: '1rem', to: 'bottom start' };
+        let initialAnchor = {
+            gap: "1rem",
+            padding: "1rem",
+            to: "bottom start",
+        };
         if (anchor) {
-            if (typeof anchor === 'string')
+            if (typeof anchor === "string")
                 initialAnchor.to = anchor;
-            if (typeof anchor === 'object')
+            if (typeof anchor === "object") {
                 initialAnchor = { ...initialAnchor, ...anchor };
+            }
         }
         return initialAnchor;
     };
     const anchorProps = getAnchorProps();
-    return (jsxRuntime.jsx(react.MenuItems, { ...props, anchor: anchorProps, className: twMerge('grid grid-rows-1fr rounded-xl shadow-xl transition-rows duration-500 ease-exponential not-data-open:not-data-enter:not-data-leave:grid-rows-0fr data-closed:grid-rows-0fr', containerClassName), static: props.static, style: { ...style, minWidth: 'var(--button-width)' }, transition: true, children: bag => (jsxRuntime.jsx("div", { className: 'overflow-y-scroll', children: jsxRuntime.jsx("div", { className: twMerge('rounded-xl bg-neutral-50/20 px-6 py-5 backdrop-blur-md backdrop-brightness-150', className), children: typeof children === 'function' ? children(bag) : children }) })) }));
+    return (jsxRuntime.jsx(react.MenuItems, { ...props, anchor: anchorProps, className: twMerge("grid grid-rows-1fr rounded-xl shadow-xl transition-rows duration-500 ease-exponential not-data-open:not-data-enter:not-data-leave:grid-rows-0fr data-closed:grid-rows-0fr", containerClassName), static: props.static, style: { ...style, minWidth: "var(--button-width)" }, transition: true, children: (bag) => (jsxRuntime.jsx("div", { className: "overflow-y-scroll", children: jsxRuntime.jsx("div", { className: twMerge("rounded-xl bg-neutral-50/20 px-6 py-5 backdrop-blur-md backdrop-brightness-150", className), children: typeof children === "function" ? children(bag) : children }) })) }));
 }
 function DropDownSection({ children, label, labelProps, separatorAbove, separatorBelow, ...props }) {
-    const { labelClassName, ...restLabelProps } = { labelClassName: labelProps?.className || '', ...labelProps };
-    return (jsxRuntime.jsx(react.MenuSection, { ...props, children: sectionBag => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [separatorAbove && jsxRuntime.jsx(DropDownSeparator, {}), label && (jsxRuntime.jsx(react.MenuHeading, { ...restLabelProps, className: headingBag => twMerge('text-[size:larger] font-bold text-current/80', typeof labelClassName === 'function' ? labelClassName(headingBag) : labelClassName), children: label })), typeof children === 'function' ? children(sectionBag) : children, separatorBelow && jsxRuntime.jsx(DropDownSeparator, {})] })) }));
+    const { labelClassName, ...restLabelProps } = {
+        labelClassName: labelProps?.className || "",
+        ...labelProps,
+    };
+    return (jsxRuntime.jsx(react.MenuSection, { ...props, children: (sectionBag) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [separatorAbove && jsxRuntime.jsx(DropDownSeparator, {}), label && (jsxRuntime.jsx(react.MenuHeading, { ...restLabelProps, className: (headingBag) => twMerge("text-[larger] font-bold text-current/80", typeof labelClassName === "function"
+                        ? labelClassName(headingBag)
+                        : labelClassName), children: label })), typeof children === "function" ? children(sectionBag) : children, separatorBelow && jsxRuntime.jsx(DropDownSeparator, {})] })) }));
 }
 function DropDownSeparator({ as, className, ...props }) {
-    return (jsxRuntime.jsx(react.MenuSeparator, { ...props, as: as || 'div', className: bag => twMerge('my-4 block h-px rounded-full bg-neutral-950/20', typeof className === 'function' ? className(bag) : className) }));
+    return (jsxRuntime.jsx(react.MenuSeparator, { ...props, as: as || "div", className: (bag) => twMerge("my-4 block h-px rounded-full bg-neutral-950/20", typeof className === "function" ? className(bag) : className) }));
 }
 function DropDown(props) {
     return jsxRuntime.jsx(react.Menu, { ...props });
@@ -3480,19 +3530,20 @@ const arrow = (options, deps) => ({
 
 function TooltipTrigger({ as, asChild = false, children, ...props }) {
     const TooltipTriggerElement = as || react.Button;
-    if (asChild && React.isValidElement(children))
+    if (asChild && React.isValidElement(children)) {
         return React.cloneElement(children, props);
+    }
     return jsxRuntime.jsx(TooltipTriggerElement, { ...props, children: children });
 }
 function TooltipPanel({ as, children, className, style, ...props }) {
-    const TooltipPanelElement = as || 'div';
-    return (jsxRuntime.jsx(TooltipPanelElement, { ...props, className: twMerge('absolute top-0 left-0 z-50 w-max rounded-md bg-neutral-50 px-2 py-1 text-sm text-neutral-950 opacity-0 shadow-lg outline-1 outline-neutral-400 data-portal:fixed data-ready:animate-fade-in dark:bg-neutral-800 dark:text-neutral-50 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-600', className), style: style, children: children }));
+    const TooltipPanelElement = as || "div";
+    return (jsxRuntime.jsx(TooltipPanelElement, { ...props, className: twMerge("absolute top-0 left-0 z-50 w-max rounded-md bg-neutral-50 px-2 py-1 text-sm text-neutral-950 opacity-0 shadow-lg outline-1 outline-neutral-400 data-portal:fixed data-ready:animate-fade-in dark:bg-neutral-800 dark:text-neutral-50 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-600", className), style: style, children: children }));
 }
-function Tooltip({ anchor = 'top', arrow: arrow$1, arrowClassName, children, delay = 500, offset: offset$1 = 8, onClose, onOpen, portal, }) {
+function Tooltip({ anchor = "top", arrow: arrow$1, arrowClassName, children, delay = 500, offset: offset$1 = 8, onClose, onOpen, portal, }) {
     const [isOpen, setIsOpen] = React.useState(false), timeoutRef = React.useRef(undefined), arrowRef = React.useRef(null);
-    const [bodyElement, setBodyElement] = React.useState(() => typeof window !== 'undefined' ? document.body : null);
+    const [bodyElement, setBodyElement] = React.useState(() => typeof window !== "undefined" ? document.body : null);
     React.useEffect(() => {
-        if (typeof window !== 'undefined' && !bodyElement) {
+        if (typeof window !== "undefined" && !bodyElement) {
             const documentBody = document.body;
             setBodyElement(documentBody);
         }
@@ -3509,10 +3560,12 @@ function Tooltip({ anchor = 'top', arrow: arrow$1, arrowClassName, children, del
                     elements.floating.style.maxWidth = width;
                 },
             }),
-            ...(arrowRef.current ? [arrow({ element: arrowRef.current })] : []),
+            ...(arrowRef.current
+                ? [arrow({ element: arrowRef.current })]
+                : []),
         ],
         placement: anchor,
-        strategy: portal ? 'fixed' : 'absolute',
+        strategy: portal ? "fixed" : "absolute",
         whileElementsMounted: autoUpdate,
         open: isOpen,
     });
@@ -3539,37 +3592,41 @@ function Tooltip({ anchor = 'top', arrow: arrow$1, arrowClassName, children, del
             clearTimeout(timeoutRef.current);
         };
     }, []);
-    const content = typeof children === 'function' ? children({ openTooltip, closeTooltip }) : children;
+    const content = typeof children === "function"
+        ? children({ openTooltip, closeTooltip })
+        : children;
     const triggerElement = findComponentByType(content, TooltipTrigger), contentElement = findComponentByType(content, TooltipPanel);
-    if (!contentElement)
-        throw new Error('TooltipPanel must be defined in Tooltip children');
-    if (!triggerElement && typeof children !== 'function')
-        throw new Error('TooltipTrigger must be provided when not using render prop pattern');
+    if (!contentElement) {
+        throw new Error("TooltipPanel must be defined in Tooltip children");
+    }
+    if (!triggerElement && typeof children !== "function") {
+        throw new Error("TooltipTrigger must be provided when not using render prop pattern");
+    }
     const arrowStyles = {};
     const reversedAnchor = {
-        top: 'bottom',
-        right: 'left',
-        bottom: 'top',
-        left: 'right',
-        'top-start': 'bottom left',
-        'top-end': 'bottom right',
-        'right-start': 'top left',
-        'right-end': 'bottom left',
-        'bottom-start': 'top left',
-        'bottom-end': 'top right',
-        'left-start': 'top right',
-        'left-end': 'bottom right',
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right",
+        "top-start": "bottom left",
+        "top-end": "bottom right",
+        "right-start": "top left",
+        "right-end": "bottom left",
+        "bottom-start": "top left",
+        "bottom-end": "top right",
+        "left-start": "top right",
+        "left-end": "bottom right",
     }[placement];
     if (middlewareData.arrow && arrow$1) {
         const { x, y } = middlewareData.arrow;
         const staticSide = {
-            top: 'bottom',
-            right: 'left',
-            bottom: 'top',
-            left: 'right',
-        }[placement.split('-')[0]];
+            top: "bottom",
+            right: "left",
+            bottom: "top",
+            left: "right",
+        }[placement.split("-")[0]];
         if (staticSide) {
-            arrowStyles[staticSide] = '-4px';
+            arrowStyles[staticSide] = "-4px";
             if (x != null)
                 arrowStyles.left = `${x}px`;
             if (y != null)
@@ -3578,68 +3635,68 @@ function Tooltip({ anchor = 'top', arrow: arrow$1, arrowClassName, children, del
     }
     const getArrowLocationClasses = () => {
         switch (placement) {
-            case 'bottom':
-            case 'bottom-end':
-            case 'bottom-start':
-                return '-translate-y-1';
-            case 'top':
-            case 'top-end':
-            case 'top-start':
-                return 'rotate-180 translate-y-1';
-            case 'left':
-            case 'left-end':
-            case 'left-start':
-                return 'rotate-90 translate-x-2';
-            case 'right':
-            case 'right-end':
-            case 'right-start':
-                return '-rotate-90 -translate-x-2';
+            case "bottom":
+            case "bottom-end":
+            case "bottom-start":
+                return "-translate-y-1";
+            case "top":
+            case "top-end":
+            case "top-start":
+                return "rotate-180 translate-y-1";
+            case "left":
+            case "left-end":
+            case "left-start":
+                return "rotate-90 translate-x-2";
+            case "right":
+            case "right-end":
+            case "right-start":
+                return "-rotate-90 -translate-x-2";
         }
     };
     const arrowLocationClasses = getArrowLocationClasses();
-    const handleMouseEnter = e => {
+    const handleMouseEnter = (e) => {
         openTooltip();
         triggerElement?.props.onMouseEnter?.(e);
     };
-    const handleMouseLeave = e => {
+    const handleMouseLeave = (e) => {
         triggerElement?.props.onMouseLeave?.(e);
         closeTooltip();
     };
-    const handleTouchStart = e => {
+    const handleTouchStart = (e) => {
         openTooltip();
         triggerElement?.props.onTouchStart?.(e);
     };
-    const handleFocus = e => {
+    const handleFocus = (e) => {
         triggerElement?.props.onFocus?.(e);
         openTooltip();
     };
-    const handleBlur = e => {
+    const handleBlur = (e) => {
         triggerElement?.props.onBlur?.(e);
         closeTooltip();
     };
     const tooltipContent = (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isOpen &&
             contentElement &&
             React.cloneElement(contentElement, {
-                children: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [contentElement.props.children, arrow$1 && (jsxRuntime.jsx(ArrowSvg, { className: twMerge('absolute', arrowLocationClasses, arrowClassName), style: arrowStyles, "data-tooltip-arrow": true }))] })),
-                ...(portal ? { 'data-portal': true } : {}),
-                ...(isPositioned ? { 'data-ready': true } : {}),
+                children: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [contentElement.props.children, arrow$1 && (jsxRuntime.jsx(ArrowSvg, { className: twMerge("absolute", arrowLocationClasses, arrowClassName), style: arrowStyles, "data-tooltip-arrow": true }))] })),
+                ...(portal ? { "data-portal": true } : {}),
+                ...(isPositioned ? { "data-ready": true } : {}),
                 onMouseEnter: openTooltip,
                 onMouseLeave: closeTooltip,
                 onTouchStart: handleTouchStart,
                 ref: (node) => {
                     refs.setFloating(node);
                     if (node && arrow$1) {
-                        const arrowElement = node.querySelector('[data-tooltip-arrow]');
+                        const arrowElement = node.querySelector("[data-tooltip-arrow]");
                         if (arrowElement)
                             arrowRef.current = arrowElement;
                     }
                 },
-                role: 'tooltip',
+                role: "tooltip",
                 style: {
                     ...contentElement.props.style,
                     ...floatingStyles,
                     transformOrigin: reversedAnchor,
-                    pointerEvents: 'none',
+                    pointerEvents: "none",
                 },
             }) }));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [triggerElement &&
@@ -3649,310 +3706,55 @@ function Tooltip({ anchor = 'top', arrow: arrow$1, arrowClassName, children, del
                     onMouseLeave: handleMouseLeave,
                     onFocus: handleFocus,
                     onBlur: handleBlur,
-                    'aria-describedby': isOpen ? 'tooltip' : undefined,
-                }), portal ? bodyElement && ReactDOM.createPortal(tooltipContent, bodyElement) : tooltipContent] }));
+                    "aria-describedby": isOpen ? "tooltip" : undefined,
+                }), portal
+                ? bodyElement && ReactDOM.createPortal(tooltipContent, bodyElement)
+                : tooltipContent] }));
 }
 function ArrowSvg({ className, ...props }) {
-    return (jsxRuntime.jsxs("svg", { viewBox: '0 0 20 10', className: twMerge('h-2.5 w-5 fill-none', className), ...props, children: [jsxRuntime.jsx("path", { d: 'M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z', className: 'fill-neutral-50 dark:fill-neutral-800' }), jsxRuntime.jsx("path", { d: 'M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z', className: 'fill-neutral-400 dark:fill-none' }), jsxRuntime.jsx("path", { d: 'M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z', className: 'dark:fill-neutral-600' })] }));
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 20 10", className: twMerge("h-2.5 w-5 fill-none", className), ...props, children: [jsxRuntime.jsx("path", { d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z", className: "fill-neutral-50 dark:fill-neutral-800" }), jsxRuntime.jsx("path", { d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z", className: "fill-neutral-400 dark:fill-none" }), jsxRuntime.jsx("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z", className: "dark:fill-neutral-600" })] }));
 }
 
 const specialCharacterRegex = new RegExp(/[!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~€‚ƒ„…†‡‰‹‘’“”•–—™›¡¢£¥§©«¬®°±¶º»¿×÷]/);
-function TextInput({ className, fieldContextID, handleBlur, handleChange, options, placeholder, type, ...props }) {
-    const [formContext] = useFormContext(), [fieldsetContext] = useFieldsetContext();
-    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
-    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
-    if (type === 'password' && !placeholder)
-        placeholder = '••••••••';
-    const FORMAT_FUNCTIONS = {
-        email: (value) => value.toLowerCase(),
-        tel: (value) => formatPhoneNumber(value, options),
-    };
-    const VALIDATION_HANDLERS = {
-        email: ({ multiple, value }) => {
-            if (multiple) {
-                const emailList = value.split(',').map(item => item.trim()), notEmailList = [];
-                emailList.forEach(item => {
-                    if (!isEmail(item))
-                        notEmailList.push(item);
-                });
-                if (notEmailList.length > 0) {
-                    const multipleInvalid = notEmailList.length > 1;
-                    return `${multipleInvalid ? 'These email addresses are' : 'This email address is'} invalid: ${notEmailList.join(', ')}`;
-                }
-                return;
-            }
-            if (!isEmail(value))
-                return 'This is not a valid email address.';
-        },
-        password: ({ value }) => {
-            const errorMessageList = [];
-            if (options) {
-                const { matchPreviousInput, requireLowercaseCharacter, requireNumber, requireSpecialCharacter, requireUppercaseCharacter, } = options;
-                if (matchPreviousInput && formContext && formContext.length >= 2) {
-                    if (isInFieldset && fieldsetContext.fieldList.length > 1) {
-                        const currentInputIndex = fieldsetContext.fieldList.findIndex(({ id: fieldID }) => fieldID === fieldContext?.id);
-                        if (currentInputIndex > 0) {
-                            const previousInput = fieldsetContext.fieldList.find((_, index) => index === currentInputIndex - 1);
-                            if (previousInput &&
-                                isStringField(previousInput) &&
-                                previousInput.value !== value)
-                                errorMessageList.push('Passwords must match.');
-                        }
-                    }
-                    else {
-                        const currentInputIndex = formContext.findIndex(({ id: fieldID }) => fieldID === fieldContext?.id);
-                        if (currentInputIndex > 0) {
-                            const previousInput = formContext.find((_, index) => index === currentInputIndex - 1);
-                            if (previousInput &&
-                                isStringField(previousInput) &&
-                                previousInput.value !== value)
-                                errorMessageList.push('Passwords must match.');
-                        }
-                    }
-                }
-                if (requireLowercaseCharacter && !/[a-z]/g.test(value))
-                    errorMessageList.push('You must include a lowercase character.');
-                if (requireNumber && !/[0-9]/g.test(value))
-                    errorMessageList.push('You must include a number.');
-                if (requireSpecialCharacter && !specialCharacterRegex.test(value))
-                    errorMessageList.push('You must include a special character.');
-                if (requireUppercaseCharacter && !/[A-Z]/g.test(value))
-                    errorMessageList.push('You must include an uppercase character.');
-            }
-            return errorMessageList.length > 0 ? errorMessageList.join(' ') : undefined;
-        },
-        tel: ({ value }) => {
-            if (!isPhoneNumber(value))
-                return 'This is not a valid phone number.';
-        },
-    };
-    const onChange = e => {
-        const validation = type ? VALIDATION_HANDLERS[type] : undefined;
-        handleChange({ e, validation });
-    };
-    const onBlur = e => {
-        const format = type ? FORMAT_FUNCTIONS[type] : undefined, validation = type ? VALIDATION_HANDLERS[type] : undefined;
-        handleBlur({ e, format, validation });
-    };
-    return (jsxRuntime.jsx(react.Input, { ...props, className: bag => twMerge(
-        // Base styles
-        'w-full rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50', 
-        // Pseudo styles
-        'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800', 
-        // user-invalid styles
-        'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]', 
-        // Custom styles
-        typeof className === 'function' ? className(bag) : className), onBlur: onBlur, onChange: onChange, placeholder: placeholder, type: type, value: fieldContext?.value || '' }));
-}
-
-function DateTimeInput({ className, fieldContextID, handleBlur, handleChange, ref, theme, type, ui, ...props }) {
-    const [formContext] = useFormContext(), [fieldsetContext] = useFieldsetContext();
+function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, max, min, name, onBlur, onChange, options, placeholder, ref, required = true, type, value, ...props }) {
+    const [formContext, formContextFunctions] = useFormContext(), [fieldsetContext, fieldsetContextFunctions] = useFieldsetContext(), [errorMessage, setErrorMessage] = React.useState(undefined);
+    if (type === "password" && !placeholder) {
+        placeholder = "••••••••" + (required && !label ? "*" : "");
+    }
+    if (placeholder === "*")
+        placeholder = name + (required && !label ? "*" : "");
+    if (label === "*")
+        label = name;
+    const uniqueID = React.useId(), fieldContextID = toLowerCase(name, [, "_"]) + "§" + uniqueID;
     const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
-    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
-    if (!ui)
+    const getFieldContextType = () => {
         switch (type) {
-            case 'date':
-                ui = {
-                    desktop: ['calendar', 'dropdown'],
-                    mobile: ['calendar', 'rotary'],
-                };
-                break;
-            case 'datetime':
-                ui = {
-                    date: {
-                        desktop: ['calendar', 'dropdown'],
-                        mobile: ['calendar', 'rotary'],
-                    },
-                    time: {
-                        desktop: ['clock', 'dropdown'],
-                        mobile: ['rotary', 'clock'],
-                    },
-                };
-                break;
-            case 'time':
-                ui = {
-                    desktop: ['clock', 'dropdown'],
-                    mobile: ['rotary', 'clock'],
-                };
-                break;
-        }
-    const validation = ({ max, min, value }) => {
-        const valueAsTime = new Date(value).getTime();
-        if (min && !(min instanceof Date) && typeof min !== 'number') {
-            if (Array.isArray(min)) {
-                const monthIndex = typeof min[1] === 'number' ? min[1] - 1 : getMonthIndexFromName(min[1]);
-                min = new Date(min[0], monthIndex, min[2]);
-            }
-            else if ('year' in min && 'month' in min && 'day' in min) {
-                const monthIndex = typeof min.month === 'number' ? min.month - 1 : getMonthIndexFromName(min.month);
-                min = new Date(min.year, monthIndex, min.day);
-            }
-            if (valueAsTime < min.getTime())
-                return `Value cannot be lower than ${getUserReadableDate(min)}.`;
-        }
-        if (max && !(max instanceof Date) && typeof max !== 'number') {
-            if (Array.isArray(max)) {
-                const monthIndex = typeof max[1] === 'number' ? max[1] - 1 : getMonthIndexFromName(max[1]);
-                max = new Date(max[0], monthIndex, max[2]);
-            }
-            else if ('year' in max && 'month' in max && 'day' in max) {
-                const monthIndex = typeof max.month === 'number' ? max.month - 1 : getMonthIndexFromName(max.month);
-                max = new Date(max.year, monthIndex, max.day);
-            }
-            if (valueAsTime > max.getTime())
-                return `Value cannot be higher than ${getUserReadableDate(max)}.`;
+            case "email":
+                return "email";
+            case "file":
+                return "file";
+            case "number":
+                return "number";
+            case "tel":
+                return "tel";
+            case "url":
+                return "url";
+            default:
+                return "string";
         }
     };
-    const onChange = e => {
-        handleChange({ e, validation });
-    };
-    const onBlur = e => {
-        handleBlur({ e, validation });
-    };
-    const [selectorIsOpen, setSelectorIsOpen] = React.useState(false);
-    const toggleSelectorOpen = () => setSelectorIsOpen(previous => !previous);
-    const { refs, floatingStyles, isPositioned, placement, middlewareData } = useFloating({
-        middleware: [
-            offset(8),
-            flip({ padding: 20 }),
-            shift({ padding: 20 }),
-            size({
-                apply({ availableHeight, availableWidth, elements }) {
-                    const height = `${Math.max(0, availableHeight) / 16}rem`, width = `${Math.min(418, availableWidth) / 16}rem`;
-                    elements.floating.style.maxHeight = height;
-                    elements.floating.style.maxWidth = width;
-                },
-            }),
-        ],
-        placement: 'top-start',
-        strategy: 'fixed',
-        whileElementsMounted: autoUpdate,
-        open: selectorIsOpen,
-    });
-    const reversedAnchor = {
-        top: 'bottom',
-        right: 'left',
-        bottom: 'top',
-        left: 'right',
-        'top-start': 'bottom left',
-        'top-end': 'bottom right',
-        'right-start': 'top left',
-        'right-end': 'bottom left',
-        'bottom-start': 'top left',
-        'bottom-end': 'top right',
-        'left-start': 'top right',
-        'left-end': 'bottom right',
-    }[placement];
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Input, { ...props, className: bag => twMerge(
-                // Base styles
-                'w-full rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50', 
-                // Pseudo styles
-                'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800', 
-                // user-invalid styles
-                'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]', 
-                // Custom styles
-                typeof className === 'function' ? className(bag) : className), onBlur: onBlur, onChange: onChange, onClick: toggleSelectorOpen, ref: node => {
-                    refs.setReference(node);
-                    return ref;
-                }, type: 'text', value: fieldContext?.value || '' }), jsxRuntime.jsx(react.Transition, { as: 'div', className: 'absolute rounded-xl bg-neutral-100 p-4 transition-opacity duration-500 ease-exponential data-closed:opacity-0 data-open:opacity-100', ref: refs.setFloating, show: selectorIsOpen, style: {
-                    ...floatingStyles,
-                    transformOrigin: reversedAnchor,
-                }, transition: true })] }));
-}
-
-function NumberInput({ className, fieldContextID, handleBlur, handleChange, options, placeholder, type, ...props }) {
-    const [formContext] = useFormContext(), [fieldsetContext] = useFieldsetContext();
-    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
-    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
-    const validation = ({ max, min, value }) => {
-        const valueAsNumber = Number(value);
-        if (isNaN(valueAsNumber))
-            return 'This is not a valid number.';
-        if (typeof max === 'number' && valueAsNumber > max)
-            return `Value cannot be higher than ${max}.`;
-        if (typeof min === 'number' && valueAsNumber < min)
-            return `Value cannot be lower than ${min}.`;
-    };
-    const onChange = e => {
-        handleChange({ e, validation });
-    };
-    const onBlur = e => {
-        handleBlur({ e, validation });
-    };
-    return (jsxRuntime.jsx(react.Input, { ...props, className: bag => twMerge(
-        // Base styles
-        'w-full rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50', 
-        // Pseudo styles
-        'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800', 
-        // user-invalid styles
-        'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]', 
-        // Custom styles
-        typeof className === 'function' ? className(bag) : className), onBlur: onBlur, onChange: onChange, placeholder: placeholder, type: type, value: fieldContext?.value || '' }));
-}
-
-const INPUT_COMPONENTS = {
-    button: TextInput,
-    checkbox: TextInput,
-    color: TextInput,
-    date: DateTimeInput,
-    datetime: DateTimeInput,
-    'datetime-local': DateTimeInput,
-    email: TextInput,
-    file: TextInput,
-    hidden: TextInput,
-    image: TextInput,
-    list: TextInput,
-    month: DateTimeInput,
-    number: NumberInput,
-    password: TextInput,
-    radio: TextInput,
-    range: TextInput,
-    reset: TextInput,
-    search: TextInput,
-    submit: TextInput,
-    tel: TextInput,
-    text: TextInput,
-    time: DateTimeInput,
-    url: TextInput,
-    week: DateTimeInput,
-    year: DateTimeInput,
-};
-function Input({ as, checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, max, min, name, onBlur, onChange, options, placeholder, ref, required = true, type = 'text', value, ...props }) {
-    const [formContext, formContextFunctions] = useFormContext(), [fieldsetContext, fieldsetContextFunctions] = useFieldsetContext(), [errorMessage, setErrorMessage] = React.useState(undefined);
-    if (placeholder === '*')
-        placeholder = name + (required && !label ? '*' : '');
-    if (label === '*')
-        label = name;
-    const uniqueID = React.useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
-    const [internalController, setInternalController] = React.useState(undefined), isControlledByForm = formContext !== undefined, isControlledExternally = typeof value !== 'undefined';
-    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
-    const fieldContextType = type === 'email'
-        ? 'email'
-        : type === 'file'
-            ? 'file'
-            : type === 'number'
-                ? 'number'
-                : type === 'tel'
-                    ? 'tel'
-                    : type === 'url'
-                        ? 'url'
-                        : 'string';
-    const fieldContext = isControlledByForm
-        ? (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID)
-        : internalController;
+    const fieldContextType = getFieldContextType();
+    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)
+        ?.find(({ id: fieldID }) => fieldID === fieldContextID);
     React.useEffect(() => {
         const initialFieldContext = defineField({
+            type: fieldContextType,
             id: fieldContextID,
             invalid,
             name,
             required,
-            type: fieldContextType,
-            value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
+            value: value ? `${value}` : defaultValue ? `${defaultValue}` : "",
         });
-        if (!isControlledByForm) {
-            setInternalController(initialFieldContext);
-            return;
-        }
         if (isInFieldset) {
             fieldsetContextFunctions.registerField(initialFieldContext);
             return () => {
@@ -3964,187 +3766,200 @@ function Input({ as, checked, className, defaultValue, description, descriptionP
             formContextFunctions.removeField(initialFieldContext.id);
         };
     }, [isInFieldset]);
-    const validateField = (validValue, validation) => {
-        const noValue = !validValue || validValue === '';
+    const validateField = (validValue) => {
+        const noValue = !validValue || validValue === "";
         if (!required && noValue)
             return true;
         const errorMessageList = [];
         if (noValue) {
-            errorMessageList.push('This field is required.');
-            setErrorMessage(errorMessageList.join(' '));
+            errorMessageList.push("This field is required.");
+            setErrorMessage(errorMessageList.join(" "));
             return false;
         }
-        if (props.maxLength && validValue.length > Number(props.maxLength))
+        switch (type) {
+            case "email":
+                if (!isEmail(validValue)) {
+                    errorMessageList.push("This is not a valid email.");
+                }
+                break;
+            case "date":
+                const valueAsTime = new Date().getTime();
+                if (min && !(min instanceof Date) && typeof min !== "number") {
+                    if (Array.isArray(min)) {
+                        const monthIndex = typeof min[1] === "number"
+                            ? min[1] - 1
+                            : getMonthIndexFromName(min[1]);
+                        min = new Date(min[0], monthIndex, min[2]);
+                    }
+                    else if ("year" in min && "month" in min && "day" in min) {
+                        const monthIndex = typeof min.month === "number"
+                            ? min.month - 1
+                            : getMonthIndexFromName(min.month);
+                        min = new Date(min.year, monthIndex, min.day);
+                    }
+                    if (valueAsTime < min.getTime()) {
+                        errorMessageList.push(`Value cannot be lower than ${getUserReadableDate(min)}.`);
+                    }
+                }
+                if (max && !(max instanceof Date) && typeof max !== "number") {
+                    if (Array.isArray(max)) {
+                        const monthIndex = typeof max[1] === "number"
+                            ? max[1] - 1
+                            : getMonthIndexFromName(max[1]);
+                        max = new Date(max[0], monthIndex, max[2]);
+                    }
+                    else if ("year" in max && "month" in max && "day" in max) {
+                        const monthIndex = typeof max.month === "number"
+                            ? max.month - 1
+                            : getMonthIndexFromName(max.month);
+                        max = new Date(max.year, monthIndex, max.day);
+                    }
+                    if (valueAsTime > max.getTime()) {
+                        errorMessageList.push(`Value cannot be higher than ${getUserReadableDate(max)}.`);
+                    }
+                }
+                break;
+            case "number":
+                const valueAsNumber = Number(validValue);
+                if (isNaN(valueAsNumber)) {
+                    errorMessageList.push("This is not a valid number.");
+                }
+                if (typeof max === "number" && valueAsNumber > max) {
+                    errorMessageList.push(`Value cannot be higher than ${max}.`);
+                }
+                if (typeof min === "number" && valueAsNumber < min) {
+                    errorMessageList.push(`Value cannot be lower than ${min}.`);
+                }
+                break;
+            case "password":
+                if (options) {
+                    const { matchPreviousInput, requireLowercaseCharacter, requireNumber, requireSpecialCharacter, requireUppercaseCharacter, } = options;
+                    if (matchPreviousInput && formContext && formContext.length >= 2) {
+                        if (isInFieldset && fieldsetContext.fieldList.length > 1) {
+                            const currentInputIndex = fieldsetContext.fieldList.findIndex(({ id: fieldID }) => fieldID === fieldContext?.id);
+                            if (currentInputIndex > 0) {
+                                const previousInput = fieldsetContext.fieldList.find((_, index) => index === currentInputIndex - 1);
+                                if (previousInput &&
+                                    isStringField(previousInput) &&
+                                    previousInput.value !== validValue) {
+                                    errorMessageList.push("Passwords must match.");
+                                }
+                            }
+                        }
+                        else {
+                            const currentInputIndex = formContext.findIndex(({ id: fieldID }) => fieldID === fieldContext?.id);
+                            if (currentInputIndex > 0) {
+                                const previousInput = formContext.find((_, index) => index === currentInputIndex - 1);
+                                if (previousInput &&
+                                    isStringField(previousInput) &&
+                                    previousInput.value !== validValue) {
+                                    errorMessageList.push("Passwords must match.");
+                                }
+                            }
+                        }
+                    }
+                    if (requireLowercaseCharacter && !/[a-z]/g.test(validValue)) {
+                        errorMessageList.push("You must include a lowercase character.");
+                    }
+                    if (requireNumber && !/[0-9]/g.test(validValue)) {
+                        errorMessageList.push("You must include a number.");
+                    }
+                    if (requireSpecialCharacter && !specialCharacterRegex.test(validValue)) {
+                        errorMessageList.push("You must include a special character.");
+                    }
+                    if (requireUppercaseCharacter && !/[A-Z]/g.test(validValue)) {
+                        errorMessageList.push("You must include an uppercase character.");
+                    }
+                }
+                break;
+            case "tel":
+                if (!isPhoneNumber(validValue)) {
+                    errorMessageList.push("This is not a valid phone number.");
+                }
+                break;
+        }
+        if (props.maxLength && validValue.length > Number(props.maxLength)) {
             errorMessageList.push(`This may not have more than ${props.maxLength} characters.`);
-        if (props.minLength && validValue.length < Number(props.minLength))
+        }
+        if (props.minLength && validValue.length < Number(props.minLength)) {
             errorMessageList.push(`This must have at least ${props.minLength} characters.`);
-        if (typeof validation !== 'undefined') {
-            const validationResult = validation({
-                max,
-                min,
-                maxLength: props.maxLength,
-                minLength: props.minLength,
-                multiple: props.multiple,
-                step: props.step,
-                value: validValue,
-            });
-            if (typeof validationResult === 'string')
-                errorMessageList.push(validationResult);
         }
         if (errorMessageList.length === 0)
             return true;
-        setErrorMessage(errorMessageList.join(' '));
+        setErrorMessage(errorMessageList.join(" "));
         return false;
     };
-    const handleChange = ({ e, validation }) => {
+    const handleChange = (e) => {
         if (disabled) {
             e.preventDefault();
             return;
         }
         const { currentTarget } = e, { value: newValue } = currentTarget;
-        const isInvalid = validateField(newValue, validation) === false;
-        const processedValue = isControlledExternally ? `${value}` : newValue;
-        const updatedFieldValues = {
-            invalid: isInvalid,
-            value: processedValue,
-        };
-        if (isControlledByForm) {
-            if (isInFieldset) {
-                fieldsetContextFunctions.updateField(fieldContextID, updatedFieldValues);
-            }
-            else {
-                formContextFunctions.updateField(fieldContextID, updatedFieldValues);
-            }
+        if (isInFieldset) {
+            fieldsetContextFunctions.updateField(fieldContextID, {
+                value: newValue,
+                invalid: validateField(newValue) === false,
+            });
         }
         else {
-            setInternalController(previous => ({
-                ...previous,
-                ...updatedFieldValues,
-            }));
+            formContextFunctions.updateField(fieldContextID, {
+                value: newValue,
+                invalid: validateField(newValue) === false,
+            });
         }
         onChange?.(e);
     };
-    const handleBlur = ({ e, format, validation }) => {
+    const handleBlur = (e) => {
         if (disabled) {
             e.preventDefault();
             return;
         }
         const { currentTarget } = e, { value: newValue } = currentTarget;
-        const controlledValue = isControlledExternally ? `${value}` : newValue, processedValue = format?.(controlledValue) || controlledValue;
-        const isInvalid = validateField(processedValue, validation) === false;
-        const updatedFieldValues = {
-            invalid: isInvalid,
-            value: processedValue,
-        };
-        if (isControlledByForm) {
-            if (isInFieldset) {
-                fieldsetContextFunctions.updateField(fieldContextID, updatedFieldValues);
-            }
-            else {
-                formContextFunctions.updateField(fieldContextID, updatedFieldValues);
-            }
-        }
-        else {
-            setInternalController(previous => ({
-                ...previous,
-                ...updatedFieldValues,
-            }));
-        }
-        onBlur?.(e);
-    };
-    const cleanFieldProps = fieldProps
-        ? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
-        : {};
-    const cleanLabalProps = labelProps
-        ? Object.fromEntries(Object.entries(labelProps).filter(([key]) => key !== 'className'))
-        : {};
-    const cleanDescriptionProps = descriptionProps
-        ? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
-        : {};
-    const InputComponent = INPUT_COMPONENTS[type];
-    return (jsxRuntime.jsxs(react.Field, { ...cleanFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsxRuntime.jsx(react.Label, { ...cleanLabalProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(InputComponent, { ...props, fieldContextID: fieldContextID, handleBlur: handleBlur, handleChange: handleChange, invalid: invalid, options: options, placeholder: placeholder, required: required, type: type }), fieldContext?.invalid && errorMessage && (jsxRuntime.jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [jsxRuntime.jsx(TooltipTrigger, { as: Button, className: 'absolute top-1.25 right-1.25 z-10 size-6 min-w-0', padding: 'none', rounded: 'md', theme: 'red', children: jsxRuntime.jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsxRuntime.jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsxRuntime.jsx(react.Description, { ...cleanDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
-                    ? descriptionProps?.className(bag)
-                    : descriptionProps?.className), children: description }))] }));
-}
-
-function extractStringValue(value) {
-    if (Array.isArray(value))
-        return value.join(', ');
-    if (typeof value === 'string')
-        return value;
-    return value.value;
-}
-function Select({ defaultValue, description, descriptionProps, disabled, fieldProps, invalid, label, labelProps, multiple, name, onChange, optionList, required, value, ...props }) {
-    const [formContext, formContextFunctions] = useFormContext(), [fieldsetContext, fieldsetContextFunctions] = useFieldsetContext();
-    if (label === '*')
-        label = name;
-    const uniqueID = React.useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
-    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
-    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
-    React.useEffect(() => {
-        const initialFieldContext = multiple
-            ? defineField({
-                type: 'array',
-                of: value
-                    ? value.map(item => ({
-                        type: 'string',
-                        value: typeof item === 'string' ? item : item.value,
-                    }))
-                    : defaultValue
-                        ? defaultValue.map(item => ({
-                            type: 'string',
-                            value: typeof item === 'string' ? item : item.value,
-                        }))
-                        : [],
-                id: fieldContextID,
-                invalid,
-                name,
-                required,
-            })
-            : defineField({
-                type: 'string',
-                id: fieldContextID,
-                invalid,
-                name,
-                required,
-                value: value ? extractStringValue(value) : defaultValue ? extractStringValue(defaultValue) : '',
-            });
-        if (isInFieldset) {
-            fieldsetContextFunctions.registerField(initialFieldContext);
-            return () => {
-                fieldsetContextFunctions.removeField(initialFieldContext.id);
-            };
+        if (required)
+            validateField(newValue);
+        let processedValue = newValue;
+        switch (type) {
+            case "email":
+                processedValue = newValue.toLowerCase();
+                break;
+            case "tel":
+                processedValue = formatPhoneNumber(newValue, options);
+                break;
         }
-        formContextFunctions.registerField(initialFieldContext);
-        return () => {
-            formContextFunctions.removeField(initialFieldContext.id);
-        };
-    }, [isInFieldset]);
-    const handleChange = (newValue) => {
-        if (disabled)
-            return;
-        const isInvalid = newValue === '' || !newValue;
         if (isInFieldset) {
             fieldsetContextFunctions.updateField(fieldContextID, {
-                invalid: isInvalid,
-                value: newValue,
+                value: processedValue,
             });
         }
         else {
-            formContextFunctions.updateField(fieldContextID, { value: newValue, invalid: isInvalid });
+            formContextFunctions.updateField(fieldContextID, {
+                value: processedValue,
+            });
         }
-        onChange?.(newValue);
+        onBlur?.(e);
     };
     const restFieldProps = fieldProps
-        ? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
+        ? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== "className"))
         : {};
     const restLabelProps = labelProps
-        ? Object.fromEntries(Object.entries(labelProps).filter(([key]) => key !== 'className'))
+        ? Object.fromEntries(Object.entries(labelProps).filter(([key]) => key !== "className"))
         : {};
     const restDescriptionProps = descriptionProps
-        ? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
+        ? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== "className"))
         : {};
-    return (jsxRuntime.jsxs(react.Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsxRuntime.jsx(react.Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsxRuntime.jsxs(react.Listbox, { ...props, onChange: handleChange, value: fieldContext.value, children: [jsxRuntime.jsx(react.ListboxButton, { children: jsxRuntime.jsx(react.ListboxSelectedOption, { options: optionList, placeholder: `Select ${multiple ? 'Any' : 'One'}` }) }), jsxRuntime.jsx(react.ListboxOptions, {})] }), description && (jsxRuntime.jsx(react.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+    return (jsxRuntime.jsxs(react.Field, { ...restFieldProps, className: (bag) => twMerge("grid gap-1", typeof fieldProps?.className === "function"
+            ? fieldProps?.className(bag)
+            : fieldProps?.className), disabled: disabled, children: [label && (jsxRuntime.jsx(react.Label, { ...restLabelProps, className: (bag) => twMerge("text-sm font-medium", required ? 'after:text-ui-red after:content-["_*"]' : "", typeof labelProps?.className === "function"
+                    ? labelProps?.className(bag)
+                    : labelProps?.className), children: label })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(react.Input, { ...props, className: (bag) => twMerge(
+                        // Base styles
+                        "w-full rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50", 
+                        // Pseudo styles
+                        "focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800", 
+                        // user-invalid styles
+                        "user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]", 
+                        // Custom styles
+                        typeof className === "function" ? className(bag) : className), invalid: invalid, onBlur: handleBlur, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, type: type, value: fieldContext?.value || "" }), fieldContext?.invalid && errorMessage && (jsxRuntime.jsxs(Tooltip, { anchor: "top-end", arrow: true, portal: true, children: [jsxRuntime.jsx(TooltipTrigger, { as: Button, className: "absolute top-1.25 right-1.25 z-10 size-6 min-w-0", padding: "none", rounded: "md", theme: "red", children: jsxRuntime.jsx(ExclamationmarkOctagon, { className: "absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70" }) }), jsxRuntime.jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsxRuntime.jsx(react.Description, { ...restDescriptionProps, className: (bag) => twMerge("text-xs", typeof descriptionProps?.className === "function"
                     ? descriptionProps?.className(bag)
                     : descriptionProps?.className), children: description }))] }));
 }
@@ -4655,12 +4470,14 @@ const MAX_PROGRESS = 100;
 function Video({ autoPlay, className, controls = true, poster, ref, srcSet, title, ...props }) {
     // * General/Core
     const uniqueID = React.useId(), figureRef = React.useRef(null), videoPlayerRef = React.useRef(null), sortedSrcSet = srcSet.sort((a, b) => a.width - b.width);
-    const primaryPoster = poster ? poster.find(({ primary }) => primary)?.src || poster[0].src : '';
-    const preventDefaultEvent = e => e.preventDefault();
+    const primaryPoster = poster
+        ? poster.find(({ primary }) => primary)?.src || poster[0].src
+        : "";
+    const preventDefaultEvent = (e) => e.preventDefault();
     // * Play/Pause Controls
     const [isPlaying, setIsPlaying] = React.useState(autoPlay);
     const togglePlay = React.useCallback(() => {
-        setIsPlaying(previous => {
+        setIsPlaying((previous) => {
             if (!previous)
                 videoPlayerRef.current?.play();
             if (previous)
@@ -4691,22 +4508,25 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
     }, []);
     const enterPictureInPicture = () => videoPlayerRef.current?.requestPictureInPicture();
     React.useEffect(() => {
-        if (typeof window === 'undefined')
+        if (typeof window === "undefined")
             return;
-        document.addEventListener('fullscreenchange', updateFullscreenState);
+        document.addEventListener("fullscreenchange", updateFullscreenState);
         return () => {
-            document.removeEventListener('fullscreenchange', updateFullscreenState);
+            document.removeEventListener("fullscreenchange", updateFullscreenState);
         };
     }, []);
     // * Progress/Seeking Controls
-    const [progress, setProgress] = React.useState(0), trackProgressStartTimeRef = React.useRef(0), [seekIndicator, setSeekIndicator] = React.useState({ isInPlayedArea: false, position: 0 }), seekIndicatorMouseDownPositionRef = React.useRef(0), scrubberRef = React.useRef(null), [timeRemaining, setTimeRemaining] = React.useState(0);
+    const [progress, setProgress] = React.useState(0), trackProgressStartTimeRef = React.useRef(0), [seekIndicator, setSeekIndicator] = React.useState({
+        isInPlayedArea: false,
+        position: 0,
+    }), seekIndicatorMouseDownPositionRef = React.useRef(0), scrubberRef = React.useRef(null), [timeRemaining, setTimeRemaining] = React.useState(0);
     const handleTimeUpdate = () => {
         const videoPlayer = videoPlayerRef.current;
         if (!videoPlayer)
             return;
         const { currentTime, duration } = videoPlayer;
         const newProgress = (currentTime / duration) * 100;
-        setProgress(prev => (Math.abs(prev - newProgress) > 0.1 ? newProgress : prev));
+        setProgress((prev) => (Math.abs(prev - newProgress) > 0.1 ? newProgress : prev));
         setTimeRemaining(duration - currentTime);
     };
     const handleProgressSlider = ({ x }) => {
@@ -4716,7 +4536,9 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
         const { duration } = videoPlayer, { width } = scrubber.getBoundingClientRect();
         videoPlayer.fastSeek(Math.max(Math.min(trackProgressStartTimeRef.current + x / (width / duration), duration - 1), 0));
     };
-    const { trackPointerMovement: trackProgress } = usePointerMovement({ onChange: handleProgressSlider });
+    const { trackPointerMovement: trackProgress } = usePointerMovement({
+        onChange: handleProgressSlider,
+    });
     const initiateTrackProgress = (e) => {
         const videoPlayer = videoPlayerRef.current;
         if (!videoPlayer)
@@ -4724,7 +4546,7 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
         trackProgress(e);
         trackProgressStartTimeRef.current = videoPlayer.currentTime;
     };
-    const handleSeekIndicatorMovement = e => {
+    const handleSeekIndicatorMovement = (e) => {
         const videoPlayer = videoPlayerRef.current;
         if (!videoPlayer)
             return;
@@ -4735,30 +4557,33 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
         setSeekIndicator({ isInPlayedArea, position });
     };
     const initializeSeeking = () => (seekIndicatorMouseDownPositionRef.current = seekIndicator.position);
-    const handleSeekRelease = e => {
+    const handleSeekRelease = (e) => {
         const videoPlayer = videoPlayerRef.current;
         if (!videoPlayer)
             return;
         const { duration } = videoPlayer, { currentTarget } = e, { width } = currentTarget.getBoundingClientRect();
-        if (seekIndicatorMouseDownPositionRef.current === seekIndicator.position)
+        if (seekIndicatorMouseDownPositionRef.current === seekIndicator.position) {
             videoPlayer.fastSeek(Math.min(duration / (width / seekIndicatorMouseDownPositionRef.current), duration - 1));
+        }
     };
     // * Skip Controls
     const [skipDuration, setSkipDuration] = React.useState(10);
     const getSkipAmount = () => {
         const modifierKeyList = pressedKeyListRef.current;
         let skipAmount = 10;
-        if (modifierKeyList.includes('alt')) {
+        if (modifierKeyList.includes("alt")) {
             if (modifierKeyList.length === 1)
                 skipAmount = 15;
-            if (modifierKeyList.includes('shift'))
+            if (modifierKeyList.includes("shift"))
                 skipAmount = 30;
-            if (modifierKeyList.includes('meta'))
+            if (modifierKeyList.includes("meta"))
                 skipAmount = 5;
-            if (modifierKeyList.includes('shift') && modifierKeyList.includes('meta'))
+            if (modifierKeyList.includes("shift") && modifierKeyList.includes("meta"))
                 skipAmount = 60;
-            if (modifierKeyList.includes('shift') && modifierKeyList.includes('meta') && modifierKeyList.includes('ctrl'))
+            if (modifierKeyList.includes("shift") && modifierKeyList.includes("meta") &&
+                modifierKeyList.includes("ctrl")) {
                 skipAmount = 90;
+            }
         }
         if (skipAmount !== skipDuration)
             setSkipDuration(skipAmount);
@@ -4782,7 +4607,7 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
     }, []);
     // * Volume Controls
     const [volume, setVolume] = React.useState(1), trackVolumeStartRef = React.useRef(0);
-    const handleVolumeChange = e => {
+    const handleVolumeChange = (e) => {
         const { currentTarget } = e, { volume } = currentTarget;
         setVolume(volume);
     };
@@ -4792,7 +4617,9 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
             return;
         videoPlayer.volume = Math.max(Math.min(trackVolumeStartRef.current + (y / 96) * -1, 1), 0);
     };
-    const { trackPointerMovement: trackVolume } = usePointerMovement({ onChange: handleVolumeSlider });
+    const { trackPointerMovement: trackVolume } = usePointerMovement({
+        onChange: handleVolumeSlider,
+    });
     const initiateTrackVolume = (e) => {
         const videoPlayer = videoPlayerRef.current;
         if (!videoPlayer)
@@ -4831,23 +4658,23 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
     // * Keyboard Controls
     const pressedKeyListRef = React.useRef([]), [pressedKeyList, setPressedKeyList] = React.useState([]);
     const updateModifierKeys = React.useCallback(({ metaKey, altKey, shiftKey, ctrlKey, }) => {
-        if ((metaKey && !pressedKeyListRef.current.includes('meta')) ||
-            (altKey && !pressedKeyListRef.current.includes('alt')) ||
-            (shiftKey && !pressedKeyListRef.current.includes('shift')) ||
-            (ctrlKey && !pressedKeyListRef.current.includes('ctrl')) ||
-            (!metaKey && pressedKeyListRef.current.includes('meta')) ||
-            (!altKey && pressedKeyListRef.current.includes('alt')) ||
-            (!shiftKey && pressedKeyListRef.current.includes('shift')) ||
-            (!ctrlKey && pressedKeyListRef.current.includes('ctrl'))) {
+        if ((metaKey && !pressedKeyListRef.current.includes("meta")) ||
+            (altKey && !pressedKeyListRef.current.includes("alt")) ||
+            (shiftKey && !pressedKeyListRef.current.includes("shift")) ||
+            (ctrlKey && !pressedKeyListRef.current.includes("ctrl")) ||
+            (!metaKey && pressedKeyListRef.current.includes("meta")) ||
+            (!altKey && pressedKeyListRef.current.includes("alt")) ||
+            (!shiftKey && pressedKeyListRef.current.includes("shift")) ||
+            (!ctrlKey && pressedKeyListRef.current.includes("ctrl"))) {
             const newPressedKeyList = [];
             if (metaKey)
-                newPressedKeyList.push('meta');
+                newPressedKeyList.push("meta");
             if (altKey)
-                newPressedKeyList.push('alt');
+                newPressedKeyList.push("alt");
             if (shiftKey)
-                newPressedKeyList.push('shift');
+                newPressedKeyList.push("shift");
             if (ctrlKey)
-                newPressedKeyList.push('ctrl');
+                newPressedKeyList.push("ctrl");
             setPressedKeyList(newPressedKeyList);
             pressedKeyListRef.current = newPressedKeyList;
             getSkipAmount();
@@ -4856,27 +4683,29 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
     const handleKeydown = React.useCallback((e) => {
         const { key, metaKey, altKey, shiftKey, ctrlKey } = e;
         updateModifierKeys({ metaKey, altKey, shiftKey, ctrlKey });
-        if (![' ', 'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'f'].includes(key))
+        if (![" ", "ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown", "f"].includes(key))
             return;
-        if ([' ', 'ArrowUp', 'ArrowDown', 'f'].includes(key) && !metaKey && !altKey && !shiftKey && !ctrlKey)
+        if ([" ", "ArrowUp", "ArrowDown", "f"].includes(key) && !metaKey &&
+            !altKey && !shiftKey && !ctrlKey) {
             e.preventDefault();
+        }
         switch (key) {
-            case ' ':
+            case " ":
                 togglePlay();
                 break;
-            case 'ArrowRight':
+            case "ArrowRight":
                 skipForward();
                 break;
-            case 'ArrowLeft':
+            case "ArrowLeft":
                 skipBack();
                 break;
-            case 'ArrowUp':
+            case "ArrowUp":
                 increaseVolume();
                 break;
-            case 'ArrowDown':
+            case "ArrowDown":
                 decreaseVolume();
                 break;
-            case 'f':
+            case "f":
                 requestFullscreen();
                 break;
         }
@@ -4886,11 +4715,11 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
         updateModifierKeys({ metaKey, altKey, shiftKey, ctrlKey });
     }, [updateModifierKeys]);
     React.useEffect(() => {
-        if (typeof window === 'undefined')
+        if (typeof window === "undefined")
             return;
         const controller = new AbortController(), signal = controller.signal;
-        document.addEventListener('keydown', handleKeydown, { signal });
-        document.addEventListener('keyup', handleKeyup, { signal });
+        document.addEventListener("keydown", handleKeydown, { signal });
+        document.addEventListener("keyup", handleKeyup, { signal });
         return () => {
             controller.abort();
         };
@@ -4900,22 +4729,25 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
     // * Progressive Enhancement
     const progressiveEnhancementSourceLengthRef = React.useRef(1);
     const [progressiveEnhancementList, setProgressiveEnhancementList] = React.useState(sortedSrcSet.filter((_, index) => index < progressiveEnhancementSourceLengthRef.current));
-    const handleProEnhance = e => {
+    const handleProEnhance = (e) => {
         const { currentTarget } = e, { currentSrc, currentTime } = currentTarget;
-        const proEnhanceSrcLength = progressiveEnhancementSourceLengthRef.current + 1, updatedProEnhanceList = sortedSrcSet.filter((_, index) => index < proEnhanceSrcLength);
+        const proEnhanceSrcLength = progressiveEnhancementSourceLengthRef.current +
+            1, updatedProEnhanceList = sortedSrcSet.filter((_, index) => index < proEnhanceSrcLength);
         console.log(updatedProEnhanceList);
         setProgressiveEnhancementList(updatedProEnhanceList);
         progressiveEnhancementSourceLengthRef.current = proEnhanceSrcLength;
-        const srcToCompare = typeof updatedProEnhanceList.at(-1)?.src === 'string'
+        const srcToCompare = typeof updatedProEnhanceList.at(-1)?.src === "string"
             ? updatedProEnhanceList.at(-1)?.src
             : updatedProEnhanceList.at(-1)?.srcGroup;
         if (!srcToCompare)
             return;
-        if ((Array.isArray(srcToCompare) && srcToCompare.every(({ src }) => src !== currentSrc)) ||
+        if ((Array.isArray(srcToCompare) &&
+            srcToCompare.every(({ src }) => src !== currentSrc)) ||
             (!Array.isArray(srcToCompare) && srcToCompare !== currentSrc)) {
-            const srcType = currentSrc.split('.').at(-1);
+            const srcType = currentSrc.split(".").at(-1);
             const src = Array.isArray(srcToCompare)
-                ? srcToCompare.find(({ src }) => src.split('.').at(-1) === srcType)?.src || srcToCompare[0].src
+                ? srcToCompare.find(({ src }) => src.split(".").at(-1) === srcType)
+                    ?.src || srcToCompare[0].src
                 : srcToCompare;
             if (!src)
                 return;
@@ -4930,49 +4762,59 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
         if (!videoPlayer)
             return;
         const { videoHeight, videoWidth } = videoPlayer;
-        const canvas = document.createElement('canvas'), canvasContext = canvas.getContext('2d');
+        const canvas = document.createElement("canvas"), canvasContext = canvas.getContext("2d");
         if (!canvasContext)
             return;
         canvas.width = videoWidth;
         canvas.height = videoHeight;
         canvasContext.drawImage(videoPlayer, 0, 0, canvas.width, canvas.height);
-        canvas.toBlob(blob => {
+        canvas.toBlob((blob) => {
             if (!blob)
                 return;
-            const url = URL.createObjectURL(blob), link = document.createElement('a');
+            const url = URL.createObjectURL(blob), link = document.createElement("a");
             link.href = url;
             link.download = `${title}-frame-${Date.now()}.jpg`;
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
             URL.revokeObjectURL(url);
-        }, 'image/jpeg', 0.9);
+        }, "image/jpeg", 0.9);
     };
-    return (jsxRuntime.jsxs("figure", { ...(showControls ? { 'data-controls': true } : {}), ...(isFullscreen ? { 'data-fullscreen': true } : {}), ...(isPlaying ? { 'data-playing': true } : {}), ...Object.fromEntries(pressedKeyList.map(key => [`data-${key}`, true])), className: twMerge('group/video isolate aspect-video w-full overflow-clip', className), onMouseEnter: displayControls, onMouseLeave: hideControls, ref: figureRef, children: [jsxRuntime.jsx("video", { ...props, className: 'size-full object-cover', onLoad: handleProEnhance, onTimeUpdate: handleTimeUpdate, onVolumeChange: handleVolumeChange, poster: primaryPoster, ref: videoPlayerRef || ref, title: title, children: progressiveEnhancementList.map(({ width, ...source }) => {
+    return (jsxRuntime.jsxs("figure", { ...(showControls ? { "data-controls": true } : {}), ...(isFullscreen ? { "data-fullscreen": true } : {}), ...(isPlaying ? { "data-playing": true } : {}), ...Object.fromEntries(pressedKeyList.map((key) => [`data-${key}`, true])), className: twMerge("group/video isolate aspect-video w-full overflow-clip", className), onMouseEnter: displayControls, onMouseLeave: hideControls, ref: figureRef, children: [jsxRuntime.jsx("video", { ...props, className: "size-full object-cover", onLoad: handleProEnhance, onTimeUpdate: handleTimeUpdate, onVolumeChange: handleVolumeChange, poster: primaryPoster, ref: videoPlayerRef || ref, title: title, children: progressiveEnhancementList.map(({ width, ...source }) => {
                     if (source.srcGroup) {
                         const { srcGroup } = source;
                         return srcGroup.map(({ src, type }) => (jsxRuntime.jsx("source", { src: src, type: type }, `${title}${type}${width}${uniqueID}`)));
                     }
                     const { src, type } = source;
-                    return jsxRuntime.jsx("source", { src: src, type: type }, `${title}${type}${width}${uniqueID}`);
-                }) }), controls && (jsxRuntime.jsxs("div", { className: 'absolute inset-0 isolate text-neutral-50 opacity-0 transition-opacity duration-1000 ease-exponential select-none group-data-controls/video:opacity-100', children: [jsxRuntime.jsxs("div", { className: 'grid-flow-cols absolute top-1/2 left-1/2 grid -translate-x-1/2 -translate-y-1/2 place-items-center gap-2', children: [jsxRuntime.jsxs("button", { className: 'col-start-1 col-end-2 row-start-0 row-end-1 grid size-16 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125', onClick: togglePlay, onContextMenu: preventDefaultEvent, title: isPlaying ? 'Pause' : 'Play', children: [jsxRuntime.jsx(PauseFill, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-0 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-playing/video:scale-60 group-data-playing/video:opacity-100' }), jsxRuntime.jsx(PlayFill, { className: '-right-0.5 col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-playing/video:scale-0 group-data-playing/video:opacity-0' })] }), jsxRuntime.jsxs("button", { className: 'col-start-0 col-end-1 row-start-0 row-end-1 grid size-12 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125', onClick: skipBack, onContextMenu: preventDefaultEvent, title: `Skip Back ${skipDuration} Seconds`, children: [jsxRuntime.jsx(FiveArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-meta/video:group-data-ctrl/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsxRuntime.jsx(TenArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-0 group-data-alt/video:group-data-ctrl/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsxRuntime.jsx(FifteenArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-100 group-data-ctrl/video:opacity-0 group-data-meta/video:opacity-0 group-data-shift/video:opacity-0' }), jsxRuntime.jsx(ThirtyArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:opacity-100 group-data-alt/video:group-data-ctrl/video:group-data-shift/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsxRuntime.jsx(SixtyArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsxRuntime.jsx(NinetyArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-100' })] }), jsxRuntime.jsxs("button", { className: 'col-start-2 col-end-3 row-start-0 row-end-1 grid size-12 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125', onClick: skipForward, onContextMenu: preventDefaultEvent, title: `Skip Forward ${skipDuration} Seconds`, children: [jsxRuntime.jsx(FiveArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-meta/video:group-data-ctrl/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsxRuntime.jsx(TenArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-0 group-data-alt/video:group-data-ctrl/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsxRuntime.jsx(FifteenArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-100 group-data-ctrl/video:opacity-0 group-data-meta/video:opacity-0 group-data-shift/video:opacity-0' }), jsxRuntime.jsx(ThirtyArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:opacity-100 group-data-alt/video:group-data-ctrl/video:group-data-shift/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsxRuntime.jsx(SixtyArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsxRuntime.jsx(NinetyArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-100' })] })] }), jsxRuntime.jsxs("div", { className: 'absolute inset-x-2 bottom-2 flex items-center gap-2 rounded-xl bg-neutral-900/50 px-2 py-1 shadow-2xl backdrop-blur-xs backdrop-brightness-110', children: [jsxRuntime.jsxs("div", { className: 'group/scrubber h-2 w-max flex-grow cursor-grab overflow-clip rounded-md bg-neutral-50/50 backdrop-blur-xs backdrop-brightness-110 transition-[height] duration-300 ease-exponential active:h-4 pointer-fine:hover:h-4 pointer-fine:active:h-4', onMouseDown: e => {
+                    return (jsxRuntime.jsx("source", { src: src, type: type }, `${title}${type}${width}${uniqueID}`));
+                }) }), controls && (jsxRuntime.jsxs("div", { className: "absolute inset-0 isolate text-neutral-50 opacity-0 transition-opacity duration-1000 ease-exponential select-none group-data-controls/video:opacity-100", children: [jsxRuntime.jsxs("div", { className: "grid-flow-cols absolute top-1/2 left-1/2 grid -translate-x-1/2 -translate-y-1/2 place-items-center gap-2", children: [jsxRuntime.jsxs("button", { className: "col-start-1 col-end-2 row-start-0 row-end-1 grid size-16 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125", onClick: togglePlay, onContextMenu: preventDefaultEvent, title: isPlaying ? "Pause" : "Play", children: [jsxRuntime.jsx(PauseFill, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-0 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-playing/video:scale-60 group-data-playing/video:opacity-100" }), jsxRuntime.jsx(PlayFill, { className: "-right-0.5 col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-playing/video:scale-0 group-data-playing/video:opacity-0" })] }), jsxRuntime.jsxs("button", { className: "col-start-0 col-end-1 row-start-0 row-end-1 grid size-12 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125", onClick: skipBack, onContextMenu: preventDefaultEvent, title: `Skip Back ${skipDuration} Seconds`, children: [jsxRuntime.jsx(FiveArrowTriangleheadCounterclockwise, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-meta/video:group-data-ctrl/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0" }), jsxRuntime.jsx(TenArrowTriangleheadCounterclockwise, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-0 group-data-alt/video:group-data-ctrl/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0" }), jsxRuntime.jsx(FifteenArrowTriangleheadCounterclockwise, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-100 group-data-ctrl/video:opacity-0 group-data-meta/video:opacity-0 group-data-shift/video:opacity-0" }), jsxRuntime.jsx(ThirtyArrowTriangleheadCounterclockwise, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:opacity-100 group-data-alt/video:group-data-ctrl/video:group-data-shift/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0" }), jsxRuntime.jsx(SixtyArrowTriangleheadCounterclockwise, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0" }), jsxRuntime.jsx(NinetyArrowTriangleheadCounterclockwise, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-100" })] }), jsxRuntime.jsxs("button", { className: "col-start-2 col-end-3 row-start-0 row-end-1 grid size-12 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125", onClick: skipForward, onContextMenu: preventDefaultEvent, title: `Skip Forward ${skipDuration} Seconds`, children: [jsxRuntime.jsx(FiveArrowTriangleheadClockwise, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-meta/video:group-data-ctrl/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0" }), jsxRuntime.jsx(TenArrowTriangleheadClockwise, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-0 group-data-alt/video:group-data-ctrl/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0" }), jsxRuntime.jsx(FifteenArrowTriangleheadClockwise, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-100 group-data-ctrl/video:opacity-0 group-data-meta/video:opacity-0 group-data-shift/video:opacity-0" }), jsxRuntime.jsx(ThirtyArrowTriangleheadClockwise, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:opacity-100 group-data-alt/video:group-data-ctrl/video:group-data-shift/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0" }), jsxRuntime.jsx(SixtyArrowTriangleheadClockwise, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0" }), jsxRuntime.jsx(NinetyArrowTriangleheadClockwise, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-100" })] })] }), jsxRuntime.jsxs("div", { className: "absolute inset-x-2 bottom-2 flex items-center gap-2 rounded-xl bg-neutral-900/50 px-2 py-1 shadow-2xl backdrop-blur-xs backdrop-brightness-110", children: [jsxRuntime.jsxs("div", { className: "group/scrubber h-2 w-max grow cursor-grab overflow-clip rounded-md bg-neutral-50/50 backdrop-blur-xs backdrop-brightness-110 transition-[height] duration-300 ease-exponential active:h-4 pointer-fine:hover:h-4 pointer-fine:active:h-4", onMouseDown: (e) => {
                                     initiateTrackProgress(e);
                                     initializeSeeking();
-                                }, onMouseMove: handleSeekIndicatorMovement, onMouseUp: handleSeekRelease, onTouchStart: initiateTrackProgress, ref: scrubberRef, children: [jsxRuntime.jsx("div", { "aria-hidden": 'true', className: 'absolute inset-0 grid transition-cols duration-100 ease-linear', style: { gridTemplateColumns: `${progress / MAX_PROGRESS}fr` }, children: jsxRuntime.jsx("div", { className: 'overflow-hidden', children: jsxRuntime.jsxs("div", { className: 'h-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125', children: [progress, "/", MAX_PROGRESS] }) }) }), jsxRuntime.jsx("div", { ...(seekIndicator.isInPlayedArea ? { 'data-in-played-area': true } : {}), "aria-hidden": 'true', className: 'absolute inset-y-0 w-1 cursor-grab bg-neutral-50 opacity-0 transition-opacity duration-300 ease-exponential group-hover/scrubber:opacity-100 data-in-played-area:bg-neutral-500 pointer-coarse:hidden', style: { transform: `translateX(${seekIndicator.position}px)` }, children: "\u00A0" }), jsxRuntime.jsx("progress", { className: 'sr-only', max: MAX_PROGRESS, value: progress })] }), jsxRuntime.jsx("span", { className: 'block text-xs', children: timeRemaining / 60 >= 1
+                                }, onMouseMove: handleSeekIndicatorMovement, onMouseUp: handleSeekRelease, onTouchStart: initiateTrackProgress, ref: scrubberRef, children: [jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute inset-0 grid transition-cols duration-100 ease-linear", style: { gridTemplateColumns: `${progress / MAX_PROGRESS}fr` }, children: jsxRuntime.jsx("div", { className: "overflow-hidden", children: jsxRuntime.jsxs("div", { className: "h-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125", children: [progress, "/", MAX_PROGRESS] }) }) }), jsxRuntime.jsx("div", { ...(seekIndicator.isInPlayedArea
+                                            ? { "data-in-played-area": true }
+                                            : {}), "aria-hidden": "true", className: "absolute inset-y-0 w-1 cursor-grab bg-neutral-50 opacity-0 transition-opacity duration-300 ease-exponential group-hover/scrubber:opacity-100 data-in-played-area:bg-neutral-500 pointer-coarse:hidden", style: { transform: `translateX(${seekIndicator.position}px)` }, children: "\u00A0" }), jsxRuntime.jsx("progress", { className: "sr-only", max: MAX_PROGRESS, value: progress })] }), jsxRuntime.jsx("span", { className: "block text-xs", children: timeRemaining / 60 >= 1
                                     ? `${Math.round(timeRemaining / 60)}:${Math.round((timeRemaining / 60 - Math.round(timeRemaining / 60)) * 60)
                                         .toString()
-                                        .padStart(2, '0')}`
+                                        .padStart(2, "0")}`
                                     : Math.round(timeRemaining) === 60
                                         ? `1:00`
-                                        : `0:${Math.round(timeRemaining).toString().padStart(2, '0')}` }), jsxRuntime.jsxs(DropDown, { children: [jsxRuntime.jsx(DropDownButton, { arrow: false, className: 'group/button flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', title: 'Volume', children: jsxRuntime.jsxs("svg", { viewBox: '0 0 64 47', className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-transform duration-300 ease-exponential', style: { translate: `${volume > 0.66 ? '0' : volume > 0.33 ? '2px' : volume > 0 ? '4px' : '6px'} 0` }, children: [jsxRuntime.jsx("path", { d: 'M25.707,44.076C27.257,44.076 28.39,42.947 28.39,41.387L28.39,4.841C28.39,3.307 27.257,2.025 25.656,2.025C24.542,2.025 23.767,2.512 22.558,3.666L12.393,13.203C12.251,13.345 12.047,13.436 11.818,13.436L4.99,13.436C1.759,13.436 0,15.195 0,18.654L0,27.525C0,30.953 1.759,32.737 4.99,32.737L11.818,32.737C12.047,32.737 12.251,32.808 12.393,32.95L22.558,42.583C23.666,43.615 24.593,44.076 25.707,44.076Z' }), jsxRuntime.jsx("path", { className: 'transition-opacity duration-300 ease-exponential', d: 'M36.874,33.192C37.684,33.728 38.797,33.566 39.439,32.64C41.265,30.222 42.371,26.683 42.371,23.026C42.371,19.368 41.265,15.855 39.439,13.411C38.797,12.485 37.684,12.323 36.874,12.885C35.923,13.553 35.761,14.721 36.505,15.713C37.901,17.607 38.662,20.249 38.662,23.026C38.662,25.802 37.876,28.419 36.505,30.338C35.786,31.355 35.923,32.498 36.874,33.192Z', style: { opacity: volume > 0 ? 1 : 0 } }), jsxRuntime.jsx("path", { className: 'transition-opacity duration-300 ease-exponential', d: 'M45.738,39.394C46.624,39.981 47.712,39.799 48.354,38.868C51.402,34.69 53.208,28.904 53.208,23.026C53.208,17.148 51.427,11.31 48.354,7.183C47.712,6.252 46.624,6.07 45.738,6.657C44.858,7.249 44.701,8.362 45.399,9.354C48.023,13.032 49.499,17.952 49.499,23.026C49.499,28.099 47.972,32.994 45.399,36.697C44.726,37.689 44.858,38.802 45.738,39.394Z', style: { opacity: volume > 0.33 ? 1 : 0 } }), jsxRuntime.jsx("path", { className: 'transition-opacity duration-300 ease-exponential', d: 'M54.679,45.708C55.514,46.32 56.683,46.082 57.315,45.121C61.498,39.091 64,31.447 64,23.026C64,14.604 61.422,6.986 57.315,0.93C56.683,-0.056 55.514,-0.269 54.679,0.343C53.804,0.956 53.668,2.079 54.33,3.071C58.012,8.514 60.342,15.379 60.342,23.026C60.342,30.647 58.012,37.562 54.33,42.98C53.668,43.972 53.804,45.095 54.679,45.708Z', style: { opacity: volume > 0.66 ? 1 : 0 } })] }) }), jsxRuntime.jsxs(DropDownItems, { anchor: {
-                                            gap: '.5rem',
-                                            padding: '.375rem',
-                                            to: 'top',
-                                        }, className: 'bg-neutral-900/50 px-1.5 py-1.5 text-neutral-50 backdrop-blur-xs backdrop-brightness-110', children: [jsxRuntime.jsx(DropDownItem, { as: 'button', className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: increaseVolume, title: 'Increase volume', children: jsxRuntime.jsx(SpeakerPlusFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxRuntime.jsx(DropDownSeparator, { "aria-label": 'Volume slider', "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": volume * 100, className: 'mx-auto my-2 h-24 w-2 cursor-grab overflow-clip rounded-md bg-neutral-50/50 backdrop-blur-xs backdrop-brightness-110 transition-[width] duration-300 ease-exponential active:w-4 pointer-fine:hover:w-4 pointer-fine:active:w-4', onMouseDown: initiateTrackVolume, onTouchStart: initiateTrackVolume, role: 'slider', children: jsxRuntime.jsx("div", { "aria-hidden": 'true', className: 'grid size-full rotate-180 transition-rows duration-300 ease-exponential', style: { gridTemplateRows: `${volume}fr` }, children: jsxRuntime.jsx("div", { className: 'overflow-y-hidden', children: jsxRuntime.jsxs("div", { className: 'size-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125', children: [volume * 100, "%"] }) }) }) }), jsxRuntime.jsx(DropDownItem, { as: 'button', className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: decreaseVolume, title: 'Decrease volume', children: jsxRuntime.jsx(SpeakerMinusFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) })] })] }), jsxRuntime.jsx("button", { className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: enterPictureInPicture, title: 'Enter Picture-in-Picture', children: jsxRuntime.jsx(RectangleFillOnArrowDownForwardTopleadingRectangle, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxRuntime.jsx("button", { className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: handleRemotePlayback, title: 'Remote Playback', children: jsxRuntime.jsx(RectangleTriangleUp, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxRuntime.jsxs(DropDown, { children: [jsxRuntime.jsx(DropDownButton, { arrow: false, className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', title: 'Other Settings', children: jsxRuntime.jsx(GearshapeFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxRuntime.jsx(DropDownItems, { anchor: {
-                                            gap: '.5rem',
-                                            padding: '.375rem',
-                                            to: 'top end',
-                                        }, className: 'bg-neutral-900/50 px-1.5 py-1.5 text-neutral-50 backdrop-blur-xs backdrop-brightness-110', children: jsxRuntime.jsxs(DropDownItem, { as: 'button', className: 'flex items-center gap-2 rounded-lg px-1.5 py-0.5 text-sm drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-[scale,background-color,color] duration-300 ease-exponential active:scale-95 data-active:bg-neutral-50/90 data-active:text-neutral-950 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: captureCurrentFrame, children: [jsxRuntime.jsx(PhotoBadgeArrowDownFill, { className: 'size-5' }), "Capture Current Frame"] }) })] }), jsxRuntime.jsxs("button", { className: 'grid size-6 rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: toggleFullscreen, title: `${isFullscreen ? 'Exit' : 'Enter'} Fullscreen`, children: [jsxRuntime.jsx(ArrowUpForwardAndArrowDownBackwardRectangle, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-0 opacity-0 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-fullscreen/video:scale-80 group-data-fullscreen/video:opacity-100' }), jsxRuntime.jsx(ArrowDownBackwardAndArrowUpForwardRectangle, { className: '-right-0.5 col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-fullscreen/video:scale-0 group-data-fullscreen/video:opacity-0' })] })] }), jsxRuntime.jsx("div", { "aria-hidden": 'true', className: 'absolute inset-0 -z-10 text-[1px] text-transparent', onClick: togglePlay, onMouseMove: handleMouseMoveControls, onMouseLeave: clearMouseMoveControlsTimeout, children: isPlaying ? 'Pause' : 'Play' })] }))] }));
+                                        : `0:${Math.round(timeRemaining).toString().padStart(2, "0")}` }), jsxRuntime.jsxs(DropDown, { children: [jsxRuntime.jsx(DropDownButton, { arrow: false, className: "group/button flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95", title: "Volume", children: jsxRuntime.jsxs("svg", { viewBox: "0 0 64 47", className: "size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-transform duration-300 ease-exponential", style: {
+                                                translate: `${volume > 0.66
+                                                    ? "0"
+                                                    : volume > 0.33
+                                                        ? "2px"
+                                                        : volume > 0
+                                                            ? "4px"
+                                                            : "6px"} 0`,
+                                            }, children: [jsxRuntime.jsx("path", { d: "M25.707,44.076C27.257,44.076 28.39,42.947 28.39,41.387L28.39,4.841C28.39,3.307 27.257,2.025 25.656,2.025C24.542,2.025 23.767,2.512 22.558,3.666L12.393,13.203C12.251,13.345 12.047,13.436 11.818,13.436L4.99,13.436C1.759,13.436 0,15.195 0,18.654L0,27.525C0,30.953 1.759,32.737 4.99,32.737L11.818,32.737C12.047,32.737 12.251,32.808 12.393,32.95L22.558,42.583C23.666,43.615 24.593,44.076 25.707,44.076Z" }), jsxRuntime.jsx("path", { className: "transition-opacity duration-300 ease-exponential", d: "M36.874,33.192C37.684,33.728 38.797,33.566 39.439,32.64C41.265,30.222 42.371,26.683 42.371,23.026C42.371,19.368 41.265,15.855 39.439,13.411C38.797,12.485 37.684,12.323 36.874,12.885C35.923,13.553 35.761,14.721 36.505,15.713C37.901,17.607 38.662,20.249 38.662,23.026C38.662,25.802 37.876,28.419 36.505,30.338C35.786,31.355 35.923,32.498 36.874,33.192Z", style: { opacity: volume > 0 ? 1 : 0 } }), jsxRuntime.jsx("path", { className: "transition-opacity duration-300 ease-exponential", d: "M45.738,39.394C46.624,39.981 47.712,39.799 48.354,38.868C51.402,34.69 53.208,28.904 53.208,23.026C53.208,17.148 51.427,11.31 48.354,7.183C47.712,6.252 46.624,6.07 45.738,6.657C44.858,7.249 44.701,8.362 45.399,9.354C48.023,13.032 49.499,17.952 49.499,23.026C49.499,28.099 47.972,32.994 45.399,36.697C44.726,37.689 44.858,38.802 45.738,39.394Z", style: { opacity: volume > 0.33 ? 1 : 0 } }), jsxRuntime.jsx("path", { className: "transition-opacity duration-300 ease-exponential", d: "M54.679,45.708C55.514,46.32 56.683,46.082 57.315,45.121C61.498,39.091 64,31.447 64,23.026C64,14.604 61.422,6.986 57.315,0.93C56.683,-0.056 55.514,-0.269 54.679,0.343C53.804,0.956 53.668,2.079 54.33,3.071C58.012,8.514 60.342,15.379 60.342,23.026C60.342,30.647 58.012,37.562 54.33,42.98C53.668,43.972 53.804,45.095 54.679,45.708Z", style: { opacity: volume > 0.66 ? 1 : 0 } })] }) }), jsxRuntime.jsxs(DropDownItems, { anchor: {
+                                            gap: ".5rem",
+                                            padding: ".375rem",
+                                            to: "top",
+                                        }, className: "bg-neutral-900/50 px-1.5 py-1.5 text-neutral-50 backdrop-blur-xs backdrop-brightness-110", children: [jsxRuntime.jsx(DropDownItem, { as: "button", className: "flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95", onClick: increaseVolume, title: "Increase volume", children: jsxRuntime.jsx(SpeakerPlusFill, { className: "size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75" }) }), jsxRuntime.jsx(DropDownSeparator, { "aria-label": "Volume slider", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": volume * 100, className: "mx-auto my-2 h-24 w-2 cursor-grab overflow-clip rounded-md bg-neutral-50/50 backdrop-blur-xs backdrop-brightness-110 transition-[width] duration-300 ease-exponential active:w-4 pointer-fine:hover:w-4 pointer-fine:active:w-4", onMouseDown: initiateTrackVolume, onTouchStart: initiateTrackVolume, role: "slider", children: jsxRuntime.jsx("div", { "aria-hidden": "true", className: "grid size-full rotate-180 transition-rows duration-300 ease-exponential", style: { gridTemplateRows: `${volume}fr` }, children: jsxRuntime.jsx("div", { className: "overflow-y-hidden", children: jsxRuntime.jsxs("div", { className: "size-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125", children: [volume * 100, "%"] }) }) }) }), jsxRuntime.jsx(DropDownItem, { as: "button", className: "flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95", onClick: decreaseVolume, title: "Decrease volume", children: jsxRuntime.jsx(SpeakerMinusFill, { className: "size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75" }) })] })] }), jsxRuntime.jsx("button", { className: "flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95", onClick: enterPictureInPicture, title: "Enter Picture-in-Picture", children: jsxRuntime.jsx(RectangleFillOnArrowDownForwardTopleadingRectangle, { className: "size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75" }) }), jsxRuntime.jsx("button", { className: "flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95", onClick: handleRemotePlayback, title: "Remote Playback", children: jsxRuntime.jsx(RectangleTriangleUp, { className: "size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75" }) }), jsxRuntime.jsxs(DropDown, { children: [jsxRuntime.jsx(DropDownButton, { arrow: false, className: "flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95", title: "Other Settings", children: jsxRuntime.jsx(GearshapeFill, { className: "size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75" }) }), jsxRuntime.jsx(DropDownItems, { anchor: {
+                                            gap: ".5rem",
+                                            padding: ".375rem",
+                                            to: "top end",
+                                        }, className: "bg-neutral-900/50 px-1.5 py-1.5 text-neutral-50 backdrop-blur-xs backdrop-brightness-110", children: jsxRuntime.jsxs(DropDownItem, { as: "button", className: "flex items-center gap-2 rounded-lg px-1.5 py-0.5 text-sm drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-[scale,background-color,color] duration-300 ease-exponential active:scale-95 data-active:bg-neutral-50/90 data-active:text-neutral-950 pointer-fine:hover:scale-105 pointer-fine:active:scale-95", onClick: captureCurrentFrame, children: [jsxRuntime.jsx(PhotoBadgeArrowDownFill, { className: "size-5" }), "Capture Current Frame"] }) })] }), jsxRuntime.jsxs("button", { className: "grid size-6 rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95", onClick: toggleFullscreen, title: `${isFullscreen ? "Exit" : "Enter"} Fullscreen`, children: [jsxRuntime.jsx(ArrowUpForwardAndArrowDownBackwardRectangle, { className: "col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-0 opacity-0 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-fullscreen/video:scale-80 group-data-fullscreen/video:opacity-100" }), jsxRuntime.jsx(ArrowDownBackwardAndArrowUpForwardRectangle, { className: "-right-0.5 col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-fullscreen/video:scale-0 group-data-fullscreen/video:opacity-0" })] })] }), jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute inset-0 -z-10 text-[1px] text-transparent", onClick: togglePlay, onMouseMove: handleMouseMoveControls, onMouseLeave: clearMouseMoveControlsTimeout, children: isPlaying ? "Pause" : "Play" })] }))] }));
 }
 
 exports.Anchor = Anchor;
@@ -4998,7 +4840,6 @@ exports.ModalClose = ModalClose;
 exports.ModalDialog = ModalDialog;
 exports.ModalTitle = ModalTitle;
 exports.ModalTrigger = ModalTrigger;
-exports.Select = Select;
 exports.SubmitButton = SubmitButton;
 exports.Textarea = Textarea;
 exports.Time = Time;
@@ -5008,4 +4849,5 @@ exports.TooltipTrigger = TooltipTrigger;
 exports.Video = Video;
 exports.createButton = createButton;
 exports.createLink = createLink;
+exports.getLinkClasses = getLinkClasses;
 //# sourceMappingURL=components.js.map