mado-ui 0.5.4 → 0.5.7

package/dist/components.esm.js

@@ -375,13 +375,14 @@ function isPhoneNumber(tel) {
  * @returns {string} string formatted
  */
 function formatPhoneNumber(phoneNumber, options) {
-    const format = options?.format || 'standard';
-    if (format !== 'none')
-        phoneNumber = phoneNumber.replace(/\D/g, '').slice(-10);
+    const format = options?.format || "standard";
+    if (format !== "none") {
+        phoneNumber = phoneNumber.replace(/\D/g, "").slice(-10);
+    }
     switch (format) {
-        case 'dot':
+        case "dot":
             phoneNumber = phoneNumber
-                .split('')
+                .split("")
                 .map((char, index) => {
                 if (index === 2)
                     return `${char}.`;
@@ -389,11 +390,11 @@ function formatPhoneNumber(phoneNumber, options) {
                     return `${char}.`;
                 return char;
             })
-                .join('');
+                .join("");
             break;
-        case 'hyphenated':
+        case "hyphenated":
             phoneNumber = phoneNumber
-                .split('')
+                .split("")
                 .map((char, index) => {
                 if (index === 2)
                     return `${char}-`;
@@ -401,11 +402,11 @@ function formatPhoneNumber(phoneNumber, options) {
                     return `${char}-`;
                 return char;
             })
-                .join('');
+                .join("");
             break;
-        case 'space':
+        case "space":
             phoneNumber = phoneNumber
-                .split('')
+                .split("")
                 .map((char, index) => {
                 if (index === 2)
                     return `${char} `;
@@ -413,11 +414,11 @@ function formatPhoneNumber(phoneNumber, options) {
                     return `${char} `;
                 return char;
             })
-                .join('');
+                .join("");
             break;
-        case 'standard':
+        case "standard":
             phoneNumber = phoneNumber
-                .split('')
+                .split("")
                 .map((char, index) => {
                 if (index === 0)
                     return `(${char}`;
@@ -427,9 +428,10 @@ function formatPhoneNumber(phoneNumber, options) {
                     return `${char}-`;
                 return char;
             })
-                .join('');
+                .join("");
     }
-    return `${options?.countryCode ? `+${options?.countryCode} ` : ''}` + phoneNumber;
+    return `${options?.countryCode ? `+${options?.countryCode} ` : ""}` +
+        phoneNumber;
 }
 /**
  * # To Lower Case
@@ -441,7 +443,7 @@ function formatPhoneNumber(phoneNumber, options) {
  * @returns The lowercase version of the input string, with the replacements, if provided.
  */
 function toLowerCase(str, [delimiter, joiner]) {
-    return str.toLowerCase().replaceAll(delimiter || ' ', joiner || ' ');
+    return str.toLowerCase().replaceAll(delimiter || " ", joiner || " ");
 }
 
 function twSort(className) {
@@ -449,85 +451,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 (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 (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 = 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 = 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 = 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 = 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 = 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 = twJoin([
+    lineClasses,
+    scaleXClasses,
+    "after:origin-left",
+]);
+const lineRtlClasses = twJoin([
+    lineClasses,
+    scaleXClasses,
+    "after:origin-right",
 ]);
-const lineLtrClasses = twJoin([lineClasses, scaleXClasses, 'after:origin-left']);
-const lineRtlClasses = twJoin([lineClasses, scaleXClasses, 'after:origin-right']);
 const lineCenterClasses = twJoin([lineClasses, scaleXClasses]);
 const lineLiftClasses = twJoin([
     lineClasses,
     scaleYClasses,
-    'after:origin-bottom after:translate-y-1 after:scale-x-75 active:after:translate-y-0 active:after:scale-x-100 pointer-fine:hover:after:translate-y-0 pointer-fine:hover:after:scale-x-100',
+    "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 = 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 = 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 = twJoin(fillClasses, 'transition-transform after:bg-(--theme-color)');
+const getFillColorTransitionClasses = (theme = "blue", customTheme) => {
+    let fillColorTransitionClasses = twJoin(fillClasses, "transition-transform after:bg-(--theme-color)");
     switch (theme) {
-        case 'blue':
-            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-blue)]');
+        case "blue":
+            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-blue)]");
             break;
-        case 'brown':
-            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-brow)]');
+        case "brown":
+            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-brow)]");
             break;
-        case 'green':
-            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-green)]');
+        case "green":
+            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-green)]");
             break;
-        case 'grey':
-            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-grey)]');
+        case "grey":
+            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-grey)]");
             break;
-        case 'sky-blue':
-            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-sky-blue)]');
+        case "sky-blue":
+            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-sky-blue)]");
             break;
-        case 'magenta':
-            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-magenta)]');
+        case "magenta":
+            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-magenta)]");
             break;
-        case 'orange':
-            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-orange)]');
+        case "orange":
+            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-orange)]");
             break;
-        case 'pink':
-            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-pink)]');
+        case "pink":
+            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-pink)]");
             break;
-        case 'purple':
-            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-purple)]');
+        case "purple":
+            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-purple)]");
             break;
-        case 'red':
-            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-red)]');
+        case "red":
+            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-red)]");
             break;
-        case 'violet':
-            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-violet)]');
+        case "violet":
+            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "after:[--theme-color:var(--color-ui-violet)]");
             break;
-        case 'yellow':
-            fillColorTransitionClasses = twJoin(fillColorTransitionClasses, 'after:[--theme-color:var(--color-ui-yellow)]');
+        case "yellow":
+            fillColorTransitionClasses = 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);
@@ -536,48 +546,50 @@ const getFillColorTransitionClasses = (theme = 'blue', customTheme) => {
     return fillColorTransitionClasses;
 };
 // Define theme-specific fill center classes
-const getFillCenterClasses = (theme = 'blue', customTheme) => {
-    let fillCenterColorClasses = twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-(--theme-color)/0 after:transition-[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 = 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 = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-blue)]');
+        case "blue":
+            fillCenterColorClasses = twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-blue)]");
             break;
-        case 'brown':
-            fillCenterColorClasses = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-brown)]');
+        case "brown":
+            fillCenterColorClasses = twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-brown)]");
             break;
-        case 'green':
-            fillCenterColorClasses = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-green)]');
+        case "green":
+            fillCenterColorClasses = twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-green)]");
             break;
-        case 'grey':
-            fillCenterColorClasses = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-grey)]');
+        case "grey":
+            fillCenterColorClasses = twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-grey)]");
             break;
-        case 'sky-blue':
-            fillCenterColorClasses = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-sky-blue)]');
+        case "sky-blue":
+            fillCenterColorClasses = twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-sky-blue)]");
             break;
-        case 'magenta':
-            fillCenterColorClasses = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-magenta)]');
+        case "magenta":
+            fillCenterColorClasses = twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-magenta)]");
             break;
-        case 'orange':
-            fillCenterColorClasses = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-orange)]');
+        case "orange":
+            fillCenterColorClasses = twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-orange)]");
             break;
-        case 'pink':
-            fillCenterColorClasses = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-pink)]');
+        case "pink":
+            fillCenterColorClasses = twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-pink)]");
             break;
-        case 'purple':
-            fillCenterColorClasses = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-purple)]');
+        case "purple":
+            fillCenterColorClasses = twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-purple)]");
             break;
-        case 'red':
-            fillCenterColorClasses = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-red)]');
+        case "red":
+            fillCenterColorClasses = twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-red)]");
             break;
-        case 'violet':
-            fillCenterColorClasses = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-violet)]');
+        case "violet":
+            fillCenterColorClasses = twJoin(fillCenterColorClasses, "after:[--theme-color:var(--color-ui-violet)]");
             break;
-        case 'yellow':
-            fillCenterColorClasses = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-yellow)]');
+        case "yellow":
+            fillCenterColorClasses = 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);
@@ -585,58 +597,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 = twJoin(multilineBaseClasses, 'duration-500 ease-exponential');
-const multilineLineClasses = twJoin(multilineClasses, 'bg-[position:0%_100%] px-px pb-px transition-[background-size]');
-const multilineXClasses = twJoin(multilineLineClasses, 'bg-[size:0%_2px] focus-visible:bg-[size:100%_2px] active:bg-[size:100%_2px] pointer-fine:hover:bg-[size:100%_2px]');
-const multilineLineRtlClasses = twJoin([multilineXClasses, 'bg-[position:100%_100%]']);
-const multilineLineCenterClasses = twJoin([multilineXClasses, 'bg-[position:50%_100%]']);
-const multilineLineLiftClasses = twJoin(multilineLineClasses, 'bg-[size:auto_0px] focus-visible:bg-[size:auto_2px] active:bg-[size:auto_2px] pointer-fine:hover:bg-[size:auto_2px]');
-const multilineFillBaseClasses = twJoin(multilineBaseClasses, 'rounded px-0.5 py-0.75 focus-visible:text-zinc-50 active:text-zinc-50 pointer-fine:hover:text-zinc-50');
-const getMultilineFillColorClasses = (theme = 'blue', customTheme) => {
-    let multilineFillColorClasses = 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 = twJoin(multilineBaseClasses, "duration-500 ease-exponential");
+const multilineLineClasses = twJoin(multilineClasses, "bg-[position:0%_100%] px-px pb-px transition-[background-size]");
+const multilineXClasses = twJoin(multilineLineClasses, "bg-[size:0%_2px] focus-visible:bg-[size:100%_2px] active:bg-[size:100%_2px] pointer-fine:hover:bg-[size:100%_2px]");
+const multilineLineRtlClasses = twJoin([
+    multilineXClasses,
+    "bg-[position:100%_100%]",
+]);
+const multilineLineCenterClasses = twJoin([
+    multilineXClasses,
+    "bg-[position:50%_100%]",
+]);
+const multilineLineLiftClasses = twJoin(multilineLineClasses, "bg-[size:auto_0px] focus-visible:bg-[size:auto_2px] active:bg-[size:auto_2px] pointer-fine:hover:bg-[size:auto_2px]");
+const multilineFillBaseClasses = twJoin(multilineBaseClasses, "rounded px-0.5 py-0.75 focus-visible:text-zinc-50 active:text-zinc-50 pointer-fine:hover:text-zinc-50");
+const getMultilineFillColorClasses = (theme = "blue", customTheme) => {
+    let multilineFillColorClasses = twJoin(multilineFillBaseClasses, "from-(--theme-color) to-(--theme-color) transition-[background-size,color]");
     switch (theme) {
-        case 'blue':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-blue)]');
+        case "blue":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-blue)]");
             break;
-        case 'brown':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-brown)]');
+        case "brown":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-brown)]");
             break;
-        case 'green':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-green)]');
+        case "green":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-green)]");
             break;
-        case 'grey':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-grey)]');
+        case "grey":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-grey)]");
             break;
-        case 'sky-blue':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-sky-blue)]');
+        case "sky-blue":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-sky-blue)]");
             break;
-        case 'magenta':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-magenta)]');
+        case "magenta":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-magenta)]");
             break;
-        case 'orange':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-orange)]');
+        case "orange":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-orange)]");
             break;
-        case 'pink':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-pink)]');
+        case "pink":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-pink)]");
             break;
-        case 'purple':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-purple)]');
+        case "purple":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-purple)]");
             break;
-        case 'red':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-red)]');
+        case "red":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-red)]");
             break;
-        case 'violet':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-violet)]');
+        case "violet":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-violet)]");
             break;
-        case 'yellow':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-yellow)]');
+        case "yellow":
+            multilineFillColorClasses = 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);
@@ -644,48 +664,50 @@ const getMultilineFillColorClasses = (theme = 'blue', customTheme) => {
     }
     return multilineFillColorClasses;
 };
-const getMultilineFillClasses = (theme = 'blue', customTheme) => {
-    let multilineFillColorClasses = twJoin(multilineFillBaseClasses, 'from-(--theme-color)/0 to-(--theme-color)/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size,background-image,color] focus-visible:from-(--theme-color) focus-visible:to-(--theme-color) focus-visible:bg-[size:100%_100%] active:from-(--theme-color) active:to-(--theme-color) active:bg-[size:100%_100%] contrast-more:from-(--theme-color)/0 pointer-fine:hover:from-(--theme-color) pointer-fine:hover:to-(--theme-color) pointer-fine:hover:bg-[size:100%_100%]');
+const getMultilineFillClasses = (theme = "blue", customTheme) => {
+    let multilineFillColorClasses = twJoin(multilineFillBaseClasses, "from-(--theme-color)/0 to-(--theme-color)/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size,background-image,color] focus-visible:from-(--theme-color) focus-visible:to-(--theme-color) focus-visible:bg-[size:100%_100%] active:from-(--theme-color) active:to-(--theme-color) active:bg-[size:100%_100%] contrast-more:from-(--theme-color)/0 pointer-fine:hover:from-(--theme-color) pointer-fine:hover:to-(--theme-color) pointer-fine:hover:bg-[size:100%_100%]");
     switch (theme) {
-        case 'blue':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-blue)]');
+        case "blue":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-blue)]");
             break;
-        case 'brown':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-brown)]');
+        case "brown":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-brown)]");
             break;
-        case 'green':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-green)]');
+        case "green":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-green)]");
             break;
-        case 'grey':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-grey)]');
+        case "grey":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-grey)]");
             break;
-        case 'sky-blue':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-sky-blue)]');
+        case "sky-blue":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-sky-blue)]");
             break;
-        case 'magenta':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-magenta)]');
+        case "magenta":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-magenta)]");
             break;
-        case 'orange':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-orange)]');
+        case "orange":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-orange)]");
             break;
-        case 'pink':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-pink)]');
+        case "pink":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-pink)]");
             break;
-        case 'purple':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-purple)]');
+        case "purple":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-purple)]");
             break;
-        case 'red':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-red)]');
+        case "red":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-red)]");
             break;
-        case 'violet':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-violet)]');
+        case "violet":
+            multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-ui-violet)]");
             break;
-        case 'yellow':
-            multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-yellow)]');
+        case "yellow":
+            multilineFillColorClasses = 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);
@@ -693,18 +715,76 @@ const getMultilineFillClasses = (theme = 'blue', customTheme) => {
     }
     return multilineFillColorClasses;
 };
-const getMultilineFillLiftClasses = (theme = 'blue', customTheme) => {
-    return twJoin(getMultilineFillColorClasses(theme, customTheme), 'bg-[size:auto_0px] bg-[position:50%_100%] focus-visible:bg-[size:auto_100%] active:bg-[size:auto_100%] pointer-fine:hover:bg-[size:auto_100%]');
+const getMultilineFillLiftClasses = (theme = "blue", customTheme) => {
+    return twJoin(getMultilineFillColorClasses(theme, customTheme), "bg-[size:auto_0px] bg-[position:50%_100%] focus-visible:bg-[size:auto_100%] active:bg-[size:auto_100%] pointer-fine:hover:bg-[size:auto_100%]");
 };
-const getMultilineFillXClasses = (theme = 'blue', customTheme) => {
-    return twJoin(getMultilineFillColorClasses(theme, customTheme), 'bg-[size:0%_100%] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%] pointer-fine:hover:bg-[size:100%_100%]');
+const getMultilineFillXClasses = (theme = "blue", customTheme) => {
+    return twJoin(getMultilineFillColorClasses(theme, customTheme), "bg-[size:0%_100%] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%] pointer-fine:hover:bg-[size:100%_100%]");
 };
-const getMultilineFillRtlClasses = (theme = 'blue', customTheme) => {
-    return twJoin(getMultilineFillXClasses(theme, customTheme), 'bg-[position:100%_auto]');
+const getMultilineFillRtlClasses = (theme = "blue", customTheme) => {
+    return twJoin(getMultilineFillXClasses(theme, customTheme), "bg-[position:100%_auto]");
 };
-const getMultilineFillCenterClasses = (theme = 'blue', customTheme) => {
-    return twJoin(getMultilineFillXClasses(theme, customTheme), 'bg-[position:50%_auto]');
+const getMultilineFillCenterClasses = (theme = "blue", customTheme) => {
+    return 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 twJoin([
+                getFillColorTransitionClasses(theme, customTheme),
+                scaleXClasses,
+                "after:origin-left",
+            ]);
+        case "fill-rtl":
+            return twJoin([
+                getFillColorTransitionClasses(theme, customTheme),
+                scaleXClasses,
+                "after:origin-right",
+            ]);
+        case "fill-lift":
+            return 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
  *
@@ -734,54 +814,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 twJoin([getFillColorTransitionClasses(theme, customTheme), scaleXClasses, 'after:origin-left']);
-            case 'fill-rtl':
-                return twJoin([getFillColorTransitionClasses(theme, customTheme), scaleXClasses, 'after:origin-right']);
-            case 'fill-lift':
-                return 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 jsx(LinkElement, { ...props, className: twMerge(linkClasses, className) });
 }
@@ -812,7 +846,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 = {
@@ -827,13 +863,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 (jsx(Link, { ...linkProps, theme: 'custom', customTheme: customTheme, className: twMerge(configClassName, extendedTheme.className, className) }));
+            if (customTheme) {
+                return (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
@@ -845,7 +885,7 @@ function createLink(config) {
                     classes: extendedTheme.customTheme.classes,
                 };
             }
-            return (jsx(Link, { ...linkProps, theme: 'custom', customTheme: resolvedCustomTheme, className: twMerge(configClassName, extendedTheme.className, className) }));
+            return (jsx(Link, { ...linkProps, theme: "custom", customTheme: resolvedCustomTheme, className: twMerge(configClassName, extendedTheme.className, className) }));
         }
         return (jsx(Link, { ...linkProps, theme: finalTheme, className: twMerge(configClassName, className), customTheme: customTheme }));
     };
@@ -1119,32 +1159,44 @@ function Details({ as = 'div', className, ...props }) {
 }
 
 function DropDownButton({ arrow = true, as, children, className, ...props }) {
-    return (jsxs(MenuButton, { ...props, as: as || 'button', className: twJoin('group/button', className), children: [children, arrow &&
-                (typeof arrow === 'boolean' ? (jsx(ChevronDown, { className: '-top-px -mr-1 ml-2 w-4 animate-flip-again group-data-open/button:animate-flip' })) : (arrow))] }));
+    return (jsxs(MenuButton, { ...props, as: as || "button", className: twJoin("group/button", className), children: [children, arrow &&
+                (typeof arrow === "boolean"
+                    ? (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 jsx(MenuItem, { ...props, as: as || 'div' });
+    return jsx(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 (jsx(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 => (jsx("div", { className: 'overflow-y-scroll', children: 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 (jsx(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) => (jsx("div", { className: "overflow-y-scroll", children: 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 (jsx(MenuSection, { ...props, children: sectionBag => (jsxs(Fragment$1, { children: [separatorAbove && jsx(DropDownSeparator, {}), label && (jsx(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 && jsx(DropDownSeparator, {})] })) }));
+    const { labelClassName, ...restLabelProps } = {
+        labelClassName: labelProps?.className || "",
+        ...labelProps,
+    };
+    return (jsx(MenuSection, { ...props, children: (sectionBag) => (jsxs(Fragment$1, { children: [separatorAbove && jsx(DropDownSeparator, {}), label && (jsx(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 && jsx(DropDownSeparator, {})] })) }));
 }
 function DropDownSeparator({ as, className, ...props }) {
-    return (jsx(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 (jsx(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 jsx(Menu, { ...props });
@@ -2288,7 +2340,7 @@ function isOverflowElement(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
+  } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
 const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
@@ -2310,7 +2362,7 @@ const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspect
 const containValues = ['paint', 'layout', 'strict', 'content'];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
@@ -2336,7 +2388,7 @@ const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#documen
 function isLastTraversableNode(node) {
   return lastTraversableNodeNames.has(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -2398,7 +2450,7 @@ function getFrameElement(win) {
 }
 
 function getCssDimensions(element) {
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   // In testing environments, the `width` and `height` properties are empty
   // strings for SVG elements, returning NaN. Fallback to `0` in this case.
   let width = parseFloat(css.width) || 0;
@@ -2503,7 +2555,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -2534,14 +2586,9 @@ function getWindowScrollBarX(element, rect) {
   return rect.left + leftScroll;
 }
 
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  if (ignoreScrollbarX === void 0) {
-    ignoreScrollbarX = false;
-  }
+function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
-  // RTL <body> scrollbar.
-  getWindowScrollBarX(documentElement, htmlRect));
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
     x,
@@ -2580,7 +2627,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
@@ -2603,7 +2650,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle(body).direction === 'rtl') {
+  if (getComputedStyle$1(body).direction === 'rtl') {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -2614,6 +2661,10 @@ function getDocumentRect(element) {
   };
 }
 
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -2631,6 +2682,24 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
   return {
     width,
     height,
@@ -2681,7 +2750,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
 }
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
@@ -2694,12 +2763,12 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === 'fixed';
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
@@ -2800,11 +2869,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
 }
 
 function isStaticPositioned(element) {
-  return getComputedStyle(element).position === 'static';
+  return getComputedStyle$1(element).position === 'static';
 }
 
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
   if (polyfill) {
@@ -2865,7 +2934,7 @@ const getElementRects = async function (data) {
 };
 
 function isRTL(element) {
-  return getComputedStyle(element).direction === 'rtl';
+  return getComputedStyle$1(element).direction === 'rtl';
 }
 
 const platform = {
@@ -3441,19 +3510,20 @@ const arrow = (options, deps) => ({
 
 function TooltipTrigger({ as, asChild = false, children, ...props }) {
     const TooltipTriggerElement = as || Button$1;
-    if (asChild && isValidElement(children))
+    if (asChild && isValidElement(children)) {
         return cloneElement(children, props);
+    }
     return jsx(TooltipTriggerElement, { ...props, children: children });
 }
 function TooltipPanel({ as, children, className, style, ...props }) {
-    const TooltipPanelElement = as || 'div';
-    return (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 (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] = useState(false), timeoutRef = useRef(undefined), arrowRef = useRef(null);
-    const [bodyElement, setBodyElement] = useState(() => typeof window !== 'undefined' ? document.body : null);
+    const [bodyElement, setBodyElement] = useState(() => typeof window !== "undefined" ? document.body : null);
     useEffect(() => {
-        if (typeof window !== 'undefined' && !bodyElement) {
+        if (typeof window !== "undefined" && !bodyElement) {
             const documentBody = document.body;
             setBodyElement(documentBody);
         }
@@ -3470,10 +3540,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,
     });
@@ -3500,37 +3572,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)
@@ -3539,68 +3615,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 = (jsx(Fragment$1, { children: isOpen &&
             contentElement &&
             cloneElement(contentElement, {
-                children: (jsxs(Fragment$1, { children: [contentElement.props.children, arrow$1 && (jsx(ArrowSvg, { className: twMerge('absolute', arrowLocationClasses, arrowClassName), style: arrowStyles, "data-tooltip-arrow": true }))] })),
-                ...(portal ? { 'data-portal': true } : {}),
-                ...(isPositioned ? { 'data-ready': true } : {}),
+                children: (jsxs(Fragment$1, { children: [contentElement.props.children, arrow$1 && (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 (jsxs(Fragment$1, { children: [triggerElement &&
@@ -3610,42 +3686,46 @@ function Tooltip({ anchor = 'top', arrow: arrow$1, arrowClassName, children, del
                     onMouseLeave: handleMouseLeave,
                     onFocus: handleFocus,
                     onBlur: handleBlur,
-                    'aria-describedby': isOpen ? 'tooltip' : undefined,
-                }), portal ? bodyElement && createPortal(tooltipContent, bodyElement) : tooltipContent] }));
+                    "aria-describedby": isOpen ? "tooltip" : undefined,
+                }), portal
+                ? bodyElement && createPortal(tooltipContent, bodyElement)
+                : tooltipContent] }));
 }
 function ArrowSvg({ className, ...props }) {
-    return (jsxs("svg", { viewBox: '0 0 20 10', className: twMerge('h-2.5 w-5 fill-none', className), ...props, children: [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' }), 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' }), 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 (jsxs("svg", { viewBox: "0 0 20 10", className: twMerge("h-2.5 w-5 fill-none", className), ...props, children: [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" }), 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" }), 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 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] = useState(undefined);
-    if (type === 'password' && !placeholder)
-        placeholder = '••••••••' + (required && !label ? '*' : '');
-    if (placeholder === '*')
-        placeholder = name + (required && !label ? '*' : '');
-    if (label === '*')
+    if (type === "password" && !placeholder) {
+        placeholder = "••••••••" + (required && !label ? "*" : "");
+    }
+    if (placeholder === "*")
+        placeholder = name + (required && !label ? "*" : "");
+    if (label === "*")
         label = name;
-    const uniqueID = useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
+    const uniqueID = useId(), fieldContextID = toLowerCase(name, [, "_"]) + "§" + uniqueID;
     const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
     const getFieldContextType = () => {
         switch (type) {
-            case 'email':
-                return 'email';
-            case 'file':
-                return 'file';
-            case 'number':
-                return 'number';
-            case 'tel':
-                return 'tel';
-            case 'url':
-                return 'url';
+            case "email":
+                return "email";
+            case "file":
+                return "file";
+            case "number":
+                return "number";
+            case "tel":
+                return "tel";
+            case "url":
+                return "url";
             default:
-                return 'string';
+                return "string";
         }
     };
     const fieldContextType = getFieldContextType();
-    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
+    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)
+        ?.find(({ id: fieldID }) => fieldID === fieldContextID);
     useEffect(() => {
         const initialFieldContext = defineField({
             type: fieldContextType,
@@ -3653,7 +3733,7 @@ function Input({ checked, className, defaultValue, description, descriptionProps
             invalid,
             name,
             required,
-            value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
+            value: value ? `${value}` : defaultValue ? `${defaultValue}` : "",
         });
         if (isInFieldset) {
             fieldsetContextFunctions.registerField(initialFieldContext);
@@ -3667,57 +3747,71 @@ function Input({ checked, className, defaultValue, description, descriptionProps
         };
     }, [isInFieldset]);
     const validateField = (validValue) => {
-        const noValue = !validValue || 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;
         }
         switch (type) {
-            case 'email':
-                if (!isEmail(validValue))
-                    errorMessageList.push('This is not a valid email.');
+            case "email":
+                if (!isEmail(validValue)) {
+                    errorMessageList.push("This is not a valid email.");
+                }
                 break;
-            case 'date':
+            case "date":
                 const valueAsTime = new Date().getTime();
-                if (min && !(min instanceof Date) && typeof min !== 'number') {
+                if (min && !(min instanceof Date) && typeof min !== "number") {
                     if (Array.isArray(min)) {
-                        const monthIndex = typeof min[1] === 'number' ? min[1] - 1 : getMonthIndexFromName(min[1]);
+                        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);
+                    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())
+                    if (valueAsTime < min.getTime()) {
                         errorMessageList.push(`Value cannot be lower than ${getUserReadableDate(min)}.`);
+                    }
                 }
-                if (max && !(max instanceof Date) && typeof max !== 'number') {
+                if (max && !(max instanceof Date) && typeof max !== "number") {
                     if (Array.isArray(max)) {
-                        const monthIndex = typeof max[1] === 'number' ? max[1] - 1 : getMonthIndexFromName(max[1]);
+                        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);
+                    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())
+                    if (valueAsTime > max.getTime()) {
                         errorMessageList.push(`Value cannot be higher than ${getUserReadableDate(max)}.`);
+                    }
                 }
                 break;
-            case 'number':
+            case "number":
                 const valueAsNumber = Number(validValue);
-                if (isNaN(valueAsNumber))
-                    errorMessageList.push('This is not a valid number.');
-                if (typeof max === 'number' && valueAsNumber > max)
+                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)
+                }
+                if (typeof min === "number" && valueAsNumber < min) {
                     errorMessageList.push(`Value cannot be lower than ${min}.`);
+                }
                 break;
-            case 'password':
+            case "password":
                 if (options) {
                     const { matchPreviousInput, requireLowercaseCharacter, requireNumber, requireSpecialCharacter, requireUppercaseCharacter, } = options;
                     if (matchPreviousInput && formContext && formContext.length >= 2) {
@@ -3727,8 +3821,9 @@ function Input({ checked, className, defaultValue, description, descriptionProps
                                 const previousInput = fieldsetContext.fieldList.find((_, index) => index === currentInputIndex - 1);
                                 if (previousInput &&
                                     isStringField(previousInput) &&
-                                    previousInput.value !== validValue)
-                                    errorMessageList.push('Passwords must match.');
+                                    previousInput.value !== validValue) {
+                                    errorMessageList.push("Passwords must match.");
+                                }
                             }
                         }
                         else {
@@ -3737,36 +3832,44 @@ function Input({ checked, className, defaultValue, description, descriptionProps
                                 const previousInput = formContext.find((_, index) => index === currentInputIndex - 1);
                                 if (previousInput &&
                                     isStringField(previousInput) &&
-                                    previousInput.value !== validValue)
-                                    errorMessageList.push('Passwords must match.');
+                                    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.');
+                    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.');
+            case "tel":
+                if (!isPhoneNumber(validValue)) {
+                    errorMessageList.push("This is not a valid phone number.");
+                }
                 break;
         }
-        if (props.maxLength && validValue.length > Number(props.maxLength))
+        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 (errorMessageList.length === 0)
             return true;
-        setErrorMessage(errorMessageList.join(' '));
+        setErrorMessage(errorMessageList.join(" "));
         return false;
     };
-    const handleChange = e => {
+    const handleChange = (e) => {
         if (disabled) {
             e.preventDefault();
             return;
@@ -3779,11 +3882,14 @@ function Input({ checked, className, defaultValue, description, descriptionProps
             });
         }
         else {
-            formContextFunctions.updateField(fieldContextID, { value: newValue, invalid: validateField(newValue) === false });
+            formContextFunctions.updateField(fieldContextID, {
+                value: newValue,
+                invalid: validateField(newValue) === false,
+            });
         }
         onChange?.(e);
     };
-    const handleBlur = e => {
+    const handleBlur = (e) => {
         if (disabled) {
             e.preventDefault();
             return;
@@ -3793,39 +3899,47 @@ function Input({ checked, className, defaultValue, description, descriptionProps
             validateField(newValue);
         let processedValue = newValue;
         switch (type) {
-            case 'email':
+            case "email":
                 processedValue = newValue.toLowerCase();
                 break;
-            case 'tel':
+            case "tel":
                 processedValue = formatPhoneNumber(newValue, options);
                 break;
         }
         if (isInFieldset) {
-            fieldsetContextFunctions.updateField(fieldContextID, { value: processedValue });
+            fieldsetContextFunctions.updateField(fieldContextID, {
+                value: processedValue,
+            });
         }
         else {
-            formContextFunctions.updateField(fieldContextID, { value: processedValue });
+            formContextFunctions.updateField(fieldContextID, {
+                value: processedValue,
+            });
         }
         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 (jsxs(Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsx(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 })), jsxs("div", { children: [jsx(Input$1, { ...props, className: bag => twMerge(
+    return (jsxs(Field, { ...restFieldProps, className: (bag) => twMerge("grid gap-1", typeof fieldProps?.className === "function"
+            ? fieldProps?.className(bag)
+            : fieldProps?.className), disabled: disabled, children: [label && (jsx(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 })), jsxs("div", { children: [jsx(Input$1, { ...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', 
+                        "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', 
+                        "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))]', 
+                        "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 && (jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [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: jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsx(Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+                        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 && (jsxs(Tooltip, { anchor: "top-end", arrow: true, portal: true, children: [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: jsx(ExclamationmarkOctagon, { className: "absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70" }) }), jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsx(Description, { ...restDescriptionProps, className: (bag) => twMerge("text-xs", typeof descriptionProps?.className === "function"
                     ? descriptionProps?.className(bag)
                     : descriptionProps?.className), children: description }))] }));
 }
@@ -4336,12 +4450,14 @@ const MAX_PROGRESS = 100;
 function Video({ autoPlay, className, controls = true, poster, ref, srcSet, title, ...props }) {
     // * General/Core
     const uniqueID = useId(), figureRef = useRef(null), videoPlayerRef = 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] = useState(autoPlay);
     const togglePlay = useCallback(() => {
-        setIsPlaying(previous => {
+        setIsPlaying((previous) => {
             if (!previous)
                 videoPlayerRef.current?.play();
             if (previous)
@@ -4372,22 +4488,25 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
     }, []);
     const enterPictureInPicture = () => videoPlayerRef.current?.requestPictureInPicture();
     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] = useState(0), trackProgressStartTimeRef = useRef(0), [seekIndicator, setSeekIndicator] = useState({ isInPlayedArea: false, position: 0 }), seekIndicatorMouseDownPositionRef = useRef(0), scrubberRef = useRef(null), [timeRemaining, setTimeRemaining] = useState(0);
+    const [progress, setProgress] = useState(0), trackProgressStartTimeRef = useRef(0), [seekIndicator, setSeekIndicator] = useState({
+        isInPlayedArea: false,
+        position: 0,
+    }), seekIndicatorMouseDownPositionRef = useRef(0), scrubberRef = useRef(null), [timeRemaining, setTimeRemaining] = 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 }) => {
@@ -4397,7 +4516,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)
@@ -4405,7 +4526,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;
@@ -4416,30 +4537,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] = 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);
@@ -4463,7 +4587,7 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
     }, []);
     // * Volume Controls
     const [volume, setVolume] = useState(1), trackVolumeStartRef = useRef(0);
-    const handleVolumeChange = e => {
+    const handleVolumeChange = (e) => {
         const { currentTarget } = e, { volume } = currentTarget;
         setVolume(volume);
     };
@@ -4473,7 +4597,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)
@@ -4512,23 +4638,23 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
     // * Keyboard Controls
     const pressedKeyListRef = useRef([]), [pressedKeyList, setPressedKeyList] = useState([]);
     const updateModifierKeys = 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();
@@ -4537,27 +4663,29 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
     const handleKeydown = 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;
         }
@@ -4567,11 +4695,11 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
         updateModifierKeys({ metaKey, altKey, shiftKey, ctrlKey });
     }, [updateModifierKeys]);
     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();
         };
@@ -4581,22 +4709,25 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
     // * Progressive Enhancement
     const progressiveEnhancementSourceLengthRef = useRef(1);
     const [progressiveEnhancementList, setProgressiveEnhancementList] = 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;
@@ -4611,50 +4742,60 @@ 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 (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: [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 (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: [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 }) => (jsx("source", { src: src, type: type }, `${title}${type}${width}${uniqueID}`)));
                     }
                     const { src, type } = source;
-                    return jsx("source", { src: src, type: type }, `${title}${type}${width}${uniqueID}`);
-                }) }), controls && (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: [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: [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: [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' }), 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' })] }), 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: [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' }), 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' }), 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' }), 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' }), 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' }), 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' })] }), 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: [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' }), 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' }), 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' }), 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' }), 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' }), 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' })] })] }), 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: [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 (jsx("source", { src: src, type: type }, `${title}${type}${width}${uniqueID}`));
+                }) }), controls && (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: [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: [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: [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" }), 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" })] }), 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: [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" }), 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" }), 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" }), 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" }), 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" }), 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" })] }), 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: [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" }), 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" }), 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" }), 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" }), 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" }), 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" })] })] }), 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: [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: [jsx("div", { "aria-hidden": 'true', className: 'absolute inset-0 grid transition-cols duration-100 ease-linear', style: { gridTemplateColumns: `${progress / MAX_PROGRESS}fr` }, children: jsx("div", { className: 'overflow-hidden', children: jsxs("div", { className: 'h-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125', children: [progress, "/", MAX_PROGRESS] }) }) }), 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" }), jsx("progress", { className: 'sr-only', max: MAX_PROGRESS, value: progress })] }), jsx("span", { className: 'block text-xs', children: timeRemaining / 60 >= 1
+                                }, onMouseMove: handleSeekIndicatorMovement, onMouseUp: handleSeekRelease, onTouchStart: initiateTrackProgress, ref: scrubberRef, children: [jsx("div", { "aria-hidden": "true", className: "absolute inset-0 grid transition-cols duration-100 ease-linear", style: { gridTemplateColumns: `${progress / MAX_PROGRESS}fr` }, children: jsx("div", { className: "overflow-hidden", children: jsxs("div", { className: "h-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125", children: [progress, "/", MAX_PROGRESS] }) }) }), 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" }), jsx("progress", { className: "sr-only", max: MAX_PROGRESS, value: progress })] }), 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')}` }), jsxs(DropDown, { children: [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: 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: [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' }), 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 } }), 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 } }), 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 } })] }) }), 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: [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: jsx(SpeakerPlusFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), 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: jsx("div", { "aria-hidden": 'true', className: 'grid size-full rotate-180 transition-rows duration-300 ease-exponential', style: { gridTemplateRows: `${volume}fr` }, children: jsx("div", { className: 'overflow-y-hidden', children: jsxs("div", { className: 'size-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125', children: [volume * 100, "%"] }) }) }) }), 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: jsx(SpeakerMinusFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) })] })] }), 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: jsx(RectangleFillOnArrowDownForwardTopleadingRectangle, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), 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: jsx(RectangleTriangleUp, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxs(DropDown, { children: [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: jsx(GearshapeFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), 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: 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: [jsx(PhotoBadgeArrowDownFill, { className: 'size-5' }), "Capture Current Frame"] }) })] }), 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: [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' }), 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' })] })] }), 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' })] }))] }));
-}
-
-export { Anchor, Button, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, IFrame, Input, Link, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, Video, createButton, createLink };
+                                        : `0:${Math.round(timeRemaining).toString().padStart(2, "0")}` }), jsxs(DropDown, { children: [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: 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: [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" }), 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 } }), 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 } }), 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 } })] }) }), 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: [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: jsx(SpeakerPlusFill, { className: "size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75" }) }), 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: jsx("div", { "aria-hidden": "true", className: "grid size-full rotate-180 transition-rows duration-300 ease-exponential", style: { gridTemplateRows: `${volume}fr` }, children: jsx("div", { className: "overflow-y-hidden", children: jsxs("div", { className: "size-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125", children: [volume * 100, "%"] }) }) }) }), 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: jsx(SpeakerMinusFill, { className: "size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75" }) })] })] }), 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: jsx(RectangleFillOnArrowDownForwardTopleadingRectangle, { className: "size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75" }) }), 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: jsx(RectangleTriangleUp, { className: "size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75" }) }), jsxs(DropDown, { children: [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: jsx(GearshapeFill, { className: "size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75" }) }), 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: 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: [jsx(PhotoBadgeArrowDownFill, { className: "size-5" }), "Capture Current Frame"] }) })] }), 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: [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" }), 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" })] })] }), 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" })] }))] }));
+}
+
+export { Anchor, Button, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, IFrame, Input, Link, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, Video, createButton, createLink, getLinkClasses };
 //# sourceMappingURL=components.esm.js.map