mado-ui 0.3.2 → 0.5.0

package/dist/components.js

@@ -208,6 +208,9 @@ function getMonth(month = d) {
         formattedMonth = `0${formattedMonth}`;
     return formattedMonth;
 }
+function getMonthIndexFromName(name) {
+    return monthNamesList.findIndex(monthName => monthName === name);
+}
 /**
  * ### Get Month Name
  * - Returns the name of the specified month
@@ -233,6 +236,30 @@ function getSeconds(seconds = d) {
         formattedSeconds = `0${formattedSeconds}`;
     return formattedSeconds;
 }
+/**
+ * ### Get User Readable Date
+ * - Returns a string of the current date in a user-friendly way
+ * - Includes `'Yesterday'`, '`Today'`, and `'Tomorrow'`
+ * @param date (default: `new Date()`)
+ * @returns {'Today'|'Tomorrow'|'Yesterday'|string} `'weekday, month day, year'` | `'Yesterday'` | `'Today'` | `'Tomorrow'`
+ */
+function getUserReadableDate(date = d) {
+    const dateTime = date.getTime();
+    const today = new Date(), isToday = dateTime === today.getTime();
+    if (isToday)
+        return 'Today';
+    const yesterday = new Date(today.getDate() - 1), isYesterday = dateTime === yesterday.getTime();
+    if (isYesterday)
+        return 'Yesterday';
+    const tomorrow = new Date(today.getDate() + 1), isTomorrow = dateTime === tomorrow.getTime();
+    if (isTomorrow)
+        return 'Tomorrow';
+    const thisYear = today.getFullYear(), isSameYear = date.getFullYear() === thisYear;
+    const fullDateString = toFullDateString(date, {
+        year: !isSameYear,
+    });
+    return fullDateString;
+}
 /**
  * ### Get Weekday Name
  * - Returns the weekday name of the specified day
@@ -245,6 +272,45 @@ function getWeekdayName(weekday = d) {
     // Return the name of the day of the week
     return weekdayNamesList[weekday.getDay()];
 }
+/**
+ * ### To Full Date String
+ * - Returns a formatted string to display the date
+ * @param {Date} date (default: `new Date()`)
+ * @param {ToFullDateStringOptionsProps} options Change how to display the weekday, month name, day of the month, and year.
+ * @returns {string} '`weekday`, `month` `day`, `year`'
+ */
+function toFullDateString(date = d, options) {
+    let weekdayName = getWeekdayName(date), monthName = getMonthName(date), dayOfMonth = date.getDate(), year = date.getFullYear().toString();
+    if (options) {
+        const includesDay = options.day !== false, includesMonth = options.month !== false, includesYear = options.year !== false;
+        {
+            weekdayName = weekdayName.slice(0, 3);
+            if (includesMonth || includesDay || includesYear)
+                weekdayName += ', ';
+        }
+        if (includesMonth) {
+            if (options.month === 'code')
+                monthName = monthName.slice(0, 3);
+            if (includesDay)
+                monthName += ' ';
+        }
+        else {
+            monthName = '';
+        }
+        if (!includesDay)
+            dayOfMonth = '';
+        if (includesYear) {
+            if (options.year === 'code')
+                year = year.slice(-2);
+            if (includesMonth || includesDay)
+                year = ', ' + year;
+        }
+        else {
+            year = '';
+        }
+    }
+    return weekdayName + monthName + dayOfMonth + year;
+}
 
 function findComponentByType(children, componentType) {
     const childrenArray = React.Children.toArray(children);
@@ -293,25 +359,97 @@ function isPhoneNumber(tel) {
 /**
  * # Format Phone Number
  * Converts any string containing at least 10 numbers to a formatted phone number
- * @param {string} string
- * @returns {string} string formatted (000) 000-0000
+ * @param {string} phoneNumber
+ * @param options
+ * @property {string} `countryCode`
+ * @property {'continuous' | 'dot' | 'hyphenated' | 'none' | 'space' | 'standard'} `format`
+ *
+ * Input: a555b555c5555d
+ *
+ * @example
+ * format: 'continuous'
+ * countryCode: '1'
+ * returns: +1 5555555555
+ *
+ * @example
+ * format: 'dot'
+ * returns: 555.555.5555
+ *
+ * @example
+ * format: 'hyphenated'
+ * returns: 555-555-5555
+ *
+ * @example
+ * format: 'none'
+ * countryCode: '1'
+ * returns: +1 a555b555c5555d
+ *
+ * @example
+ * format: 'space'
+ * returns: 555 555 5555
+ *
+ * @example
+ * format: 'standard' (default)
+ * returns: (555) 555-5555
+ *
+ * @returns {string} string formatted
  */
-function formatPhoneNumber(string, countryCode) {
-    return (`${`+${countryCode} ` }` +
-        string
-            .replace(/\D/g, '')
-            .slice(-10)
-            .split('')
-            .map((char, index) => {
-            if (index === 0)
-                return `(${char}`;
-            if (index === 2)
-                return `${char}) `;
-            if (index === 5)
-                return `${char}-`;
-            return char;
-        })
-            .join(''));
+function formatPhoneNumber(phoneNumber, options) {
+    const format = options?.format || 'standard';
+    if (format !== 'none')
+        phoneNumber = phoneNumber.replace(/\D/g, '').slice(-10);
+    switch (format) {
+        case 'dot':
+            phoneNumber = phoneNumber
+                .split('')
+                .map((char, index) => {
+                if (index === 2)
+                    return `${char}.`;
+                if (index === 5)
+                    return `${char}.`;
+                return char;
+            })
+                .join('');
+            break;
+        case 'hyphenated':
+            phoneNumber = phoneNumber
+                .split('')
+                .map((char, index) => {
+                if (index === 2)
+                    return `${char}-`;
+                if (index === 5)
+                    return `${char}-`;
+                return char;
+            })
+                .join('');
+            break;
+        case 'space':
+            phoneNumber = phoneNumber
+                .split('')
+                .map((char, index) => {
+                if (index === 2)
+                    return `${char} `;
+                if (index === 5)
+                    return `${char} `;
+                return char;
+            })
+                .join('');
+            break;
+        case 'standard':
+            phoneNumber = phoneNumber
+                .split('')
+                .map((char, index) => {
+                if (index === 0)
+                    return `(${char}`;
+                if (index === 2)
+                    return `${char}) `;
+                if (index === 5)
+                    return `${char}-`;
+                return char;
+            })
+                .join('');
+    }
+    return `${options?.countryCode ? `+${options?.countryCode} ` : ''}` + phoneNumber;
 }
 /**
  * # To Lower Case
@@ -889,6 +1027,14 @@ function createButton(config) {
     };
 }
 
+function ArrowDownBackwardAndArrowUpForwardRectangle(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 64 50", ...props, children: [jsxRuntime.jsx("path", { d: "M47.367,23.338C48.497,23.338 49.292,22.451 49.292,21.27L49.292,10.565C49.292,9.055 48.445,8.438 47.114,8.438L36.346,8.438C35.165,8.438 34.335,9.205 34.335,10.334C34.335,11.487 35.165,12.259 36.403,12.259L39.919,12.259L43.287,11.931L39.659,15.26L34.041,20.906C33.701,21.246 33.424,21.765 33.424,22.295C33.424,23.453 34.219,24.249 35.349,24.249C35.971,24.249 36.432,24.03 36.83,23.632L42.413,18.049L45.794,14.449L45.443,18.028L45.443,21.327C45.443,22.508 46.215,23.338 47.367,23.338Z" }), jsxRuntime.jsx("path", { d: "M16.662,26.661C15.503,26.661 14.737,27.548 14.737,28.729L14.737,39.434C14.737,40.944 15.584,41.56 16.886,41.56L27.683,41.56C28.835,41.56 29.665,40.794 29.665,39.664C29.665,38.512 28.835,37.74 27.626,37.74L24.08,37.74L20.741,38.068L24.37,34.739L29.959,29.092C30.328,28.752 30.605,28.205 30.605,27.703C30.605,26.517 29.809,25.75 28.68,25.75C28.057,25.75 27.568,25.969 27.199,26.367L21.587,31.95L18.235,35.521L18.557,31.971L18.557,28.672C18.557,27.491 17.785,26.661 16.662,26.661Z" }), jsxRuntime.jsx("path", { d: "M8.518,49.999C2.857,49.999 0,47.171 0,41.567L0,8.432C0,2.828 2.857,0 8.518,0L55.482,0C61.172,0 64,2.84 64,8.432L64,41.567C64,47.159 61.172,49.999 55.482,49.999L8.518,49.999ZM8.587,45.603L55.412,45.603C58.1,45.603 59.633,44.152 59.633,41.354L59.633,8.645C59.633,5.818 58.1,4.396 55.412,4.396L8.587,4.396C5.876,4.396 4.367,5.818 4.367,8.645L4.367,41.354C4.367,44.152 5.876,45.603 8.587,45.603Z" })] }));
+}
+
+function ArrowUpForwardAndArrowDownBackwardRectangle(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 64 50", ...props, children: [jsxRuntime.jsx("path", { d: "M35.349,9.32C34.196,9.32 33.424,10.202 33.424,11.389L33.424,22.094C33.424,23.597 34.277,24.249 35.573,24.249L46.37,24.249C47.528,24.249 48.352,23.448 48.352,22.324C48.352,21.166 47.528,20.399 46.313,20.399L42.773,20.399L39.429,20.751L43.063,17.393L48.652,11.775C49.015,11.406 49.292,10.893 49.292,10.363C49.292,9.199 48.502,8.438 47.367,8.438C46.745,8.438 46.261,8.658 45.892,9.02L40.28,14.632L36.928,18.209L37.244,14.625L37.244,11.36C37.244,10.144 36.478,9.32 35.349,9.32Z" }), jsxRuntime.jsx("path", { d: "M28.68,40.678C29.804,40.678 30.605,39.797 30.605,38.581L30.605,27.905C30.605,26.401 29.752,25.75 28.427,25.75L17.658,25.75C16.471,25.75 15.648,26.522 15.648,27.675C15.648,28.833 16.471,29.599 17.716,29.599L21.226,29.599L24.6,29.248L20.966,32.606L15.348,38.224C15.014,38.593 14.737,39.105 14.737,39.636C14.737,40.8 15.526,41.56 16.662,41.56C17.284,41.56 17.739,41.341 18.137,40.978L23.72,35.366L27.101,31.789L26.755,35.374L26.755,38.639C26.755,39.854 27.522,40.678 28.68,40.678Z" }), jsxRuntime.jsx("path", { d: "M8.518,49.999C2.857,49.999 0,47.171 0,41.567L0,8.432C0,2.828 2.857,0 8.518,0L55.482,0C61.172,0 64,2.84 64,8.432L64,41.567C64,47.159 61.172,49.999 55.482,49.999L8.518,49.999ZM8.587,45.603L55.412,45.603C58.1,45.603 59.633,44.152 59.633,41.354L59.633,8.645C59.633,5.818 58.1,4.396 55.412,4.396L8.587,4.396C5.876,4.396 4.367,5.818 4.367,8.645L4.367,41.354C4.367,44.152 5.876,45.603 8.587,45.603Z" })] }));
+}
+
 function ChevronDown(props) {
     return (jsxRuntime.jsx("svg", { viewBox: '0 0 64 36', ...props, children: jsxRuntime.jsx("path", { d: 'M32,36c1,0,1.8-0.4,2.5-1.1L63,5.7c0.7-0.7,1-1.4,1-2.3c0-1-0.3-1.8-1-2.4c-0.6-0.7-1.4-1-2.3-1s-1.7,0.3-2.4,1L30,29.8H34 L5.7,1C5.1,0.3,4.3,0,3.4,0C2.4,0,1.6,0.3,1,1C0.3,1.6,0,2.4,0,3.4c0,0.9,0.3,1.7,1,2.3l28.5,29.2C30.3,35.7,31.1,36,32,36z' }) }));
 }
@@ -897,7 +1043,91 @@ function ExclamationmarkOctagon(props) {
     return (jsxRuntime.jsxs("svg", { viewBox: '0 0 64 61.6', ...props, children: [jsxRuntime.jsx("path", { d: 'M61.4,16.8l-12.1-13.3C47.3,1.3,45.4,0,41.4,0h-18.9C18.6,0,16.7,1.3,14.7,3.5L2.6,16.8c-2,2.3-2.6,3.8-2.6,6.9v14.2c0,3.1.5,4.6,2.6,6.9l12.1,13.3c2,2.2,3.9,3.5,7.8,3.5h18.9c4,0,5.8-1.3,7.9-3.5l12.1-13.3c2.1-2.3,2.6-3.8,2.6-6.9v-14.2c0-3.1-.5-4.6-2.6-6.9ZM58.2,37.3c0,2.3-.3,3.1-1.5,4.4l-11.2,12.3c-1.7,1.9-2.6,2.5-5.8,2.5h-15.5c-3.1,0-4-.7-5.7-2.5l-11.2-12.3c-1.2-1.4-1.5-2.2-1.5-4.4v-13.1c0-2.3.3-3.1,1.5-4.4l11.2-12.3c1.7-1.9,2.6-2.5,5.7-2.5h15.5c3.1,0,4,.7,5.8,2.5l11.2,12.3c1.3,1.4,1.5,2.2,1.5,4.4v13.1Z' }), jsxRuntime.jsx("path", { d: 'M32,36.4c1.5,0,2.4-.9,2.4-2.5l.4-16.4c0-1.6-1.2-2.8-2.9-2.8s-2.9,1.1-2.8,2.7l.4,16.5c0,1.6.9,2.5,2.4,2.5Z' }), jsxRuntime.jsx("path", { d: 'M32,46.5c1.8,0,3.4-1.4,3.4-3.2s-1.5-3.2-3.4-3.2-3.3,1.4-3.3,3.2,1.5,3.2,3.3,3.2Z' })] }));
 }
 
-function xmark(props) {
+function FifteenArrowTriangleheadClockwise(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 59 64", ...props, children: [jsxRuntime.jsx("path", { d: "M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,24.967 53.645,16.446 46.273,11.115C45.02,10.166 43.366,10.489 42.667,11.662C41.944,12.848 42.327,14.192 43.476,15.079C49.571,19.462 53.573,26.628 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,23.179 12.932,13.576 23.706,11.072L23.706,15.18C23.706,17.212 25.087,17.76 26.657,16.652L35.809,10.242C37.117,9.311 37.147,7.954 35.809,7.023L26.687,0.583C25.087,-0.555 23.706,-0.007 23.706,2.055L23.706,6.098C10.28,8.639 0,20.497 0,34.787C0,50.929 13.101,64 29.213,64Z" }), jsxRuntime.jsx("path", { d: "M21.596,46.561C22.831,46.561 23.585,45.673 23.585,44.438L23.585,26.365C23.585,24.935 22.709,24.096 21.286,24.096C20.118,24.096 19.316,24.613 18.416,25.288L15.162,27.705C14.602,28.131 14.267,28.587 14.267,29.287C14.267,30.108 14.864,30.765 15.685,30.765C16.081,30.765 16.361,30.638 16.689,30.376L19.522,28.258L19.577,28.258L19.577,44.438C19.577,45.679 20.355,46.561 21.596,46.561Z" }), jsxRuntime.jsx("path", { d: "M35.688,46.737C40.143,46.737 42.94,43.446 42.94,38.968C42.94,35.128 40.739,31.849 36.971,31.849C35.045,31.849 33.472,32.702 32.678,34.178L32.563,34.178L33.076,27.668L40.364,27.668C41.319,27.668 41.952,27.011 41.952,26.055C41.952,25.07 41.349,24.443 40.364,24.443L32.079,24.443C30.576,24.443 29.87,25.234 29.797,26.737L29.174,35.098C29.077,36.358 29.74,37.307 31.012,37.307C31.918,37.307 32.308,36.959 32.898,36.259C33.588,35.337 34.559,34.763 35.719,34.763C37.953,34.763 39.089,36.789 39.089,39.065C39.089,41.511 37.856,43.543 35.664,43.543C33.949,43.543 32.807,42.432 32.258,40.955C31.838,40.139 31.279,39.731 30.518,39.731C29.502,39.731 28.876,40.364 28.876,41.38C28.876,41.721 28.949,42.08 29.022,42.397C29.735,45.128 32.902,46.737 35.688,46.737Z" })] }));
+}
+
+function FifteenArrowTriangleheadCounterclockwise(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 59 64", ...props, children: [jsxRuntime.jsx("path", { d: "M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,20.497 48.145,8.639 34.75,6.098L34.75,2.055C34.75,-0.007 33.339,-0.555 31.762,0.583L22.647,7.023C21.308,7.954 21.339,9.311 22.647,10.242L31.793,16.652C33.339,17.76 34.75,17.212 34.75,15.18L34.75,11.072C45.518,13.576 53.573,23.179 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,26.628 8.879,19.462 14.98,15.079C16.129,14.192 16.512,12.848 15.782,11.662C15.089,10.489 13.436,10.166 12.152,11.115C4.781,16.446 0,24.967 0,34.787C0,50.929 13.101,64 29.213,64Z" }), jsxRuntime.jsx("path", { d: "M21.596,46.561C22.831,46.561 23.585,45.673 23.585,44.438L23.585,26.365C23.585,24.935 22.709,24.096 21.286,24.096C20.118,24.096 19.316,24.613 18.416,25.288L15.162,27.705C14.602,28.131 14.267,28.587 14.267,29.287C14.267,30.108 14.864,30.765 15.685,30.765C16.081,30.765 16.361,30.638 16.689,30.376L19.522,28.258L19.577,28.258L19.577,44.438C19.577,45.679 20.355,46.561 21.596,46.561Z" }), jsxRuntime.jsx("path", { d: "M35.688,46.737C40.143,46.737 42.94,43.446 42.94,38.968C42.94,35.128 40.739,31.849 36.971,31.849C35.045,31.849 33.472,32.702 32.678,34.178L32.563,34.178L33.076,27.668L40.364,27.668C41.319,27.668 41.952,27.011 41.952,26.055C41.952,25.07 41.349,24.443 40.364,24.443L32.079,24.443C30.576,24.443 29.87,25.234 29.797,26.737L29.174,35.098C29.077,36.358 29.74,37.307 31.012,37.307C31.918,37.307 32.308,36.959 32.898,36.259C33.588,35.337 34.559,34.763 35.719,34.763C37.953,34.763 39.089,36.789 39.089,39.065C39.089,41.511 37.856,43.543 35.664,43.543C33.949,43.543 32.807,42.432 32.258,40.955C31.838,40.139 31.279,39.731 30.518,39.731C29.502,39.731 28.876,40.364 28.876,41.38C28.876,41.721 28.949,42.08 29.022,42.397C29.735,45.128 32.902,46.737 35.688,46.737Z" })] }));
+}
+
+function FiveArrowTriangleheadClockwise(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 59 64", ...props, children: [jsxRuntime.jsx("path", { d: "M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,24.967 53.645,16.446 46.273,11.115C45.02,10.166 43.366,10.489 42.667,11.662C41.944,12.848 42.327,14.192 43.476,15.079C49.571,19.462 53.573,26.628 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,23.179 12.932,13.576 23.706,11.072L23.706,15.18C23.706,17.212 25.087,17.76 26.657,16.652L35.809,10.242C37.117,9.311 37.147,7.954 35.809,7.023L26.687,0.583C25.087,-0.555 23.706,-0.007 23.706,2.055L23.706,6.098C10.28,8.639 0,20.497 0,34.787C0,50.929 13.101,64 29.213,64Z" }), jsxRuntime.jsx("path", { d: "M29.316,46.78C33.77,46.78 36.567,43.459 36.567,39.017C36.567,35.17 34.402,31.892 30.599,31.892C28.703,31.892 27.099,32.745 26.306,34.221L26.19,34.221L26.703,27.686L33.991,27.686C34.946,27.686 35.579,27.053 35.579,26.098C35.579,25.119 34.977,24.486 33.991,24.486L25.707,24.486C24.203,24.486 23.498,25.277 23.424,26.78L22.808,35.111C22.735,36.407 23.367,37.35 24.639,37.35C25.552,37.35 25.966,36.972 26.532,36.302C27.222,35.38 28.186,34.806 29.347,34.806C31.586,34.806 32.717,36.838 32.717,39.108C32.717,41.554 31.483,43.586 29.291,43.586C27.576,43.586 26.434,42.475 25.885,40.967C25.502,40.188 24.906,39.774 24.145,39.774C23.16,39.774 22.533,40.407 22.533,41.423C22.533,41.764 22.576,42.093 22.649,42.416C23.362,45.171 26.53,46.78 29.316,46.78Z" })] }));
+}
+
+function FiveArrowTriangleheadCounterclockwise(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 59 64", ...props, children: [jsxRuntime.jsx("path", { d: "M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,20.497 48.145,8.639 34.75,6.098L34.75,2.055C34.75,-0.007 33.339,-0.555 31.762,0.583L22.647,7.023C21.308,7.954 21.339,9.311 22.647,10.242L31.793,16.652C33.339,17.76 34.75,17.212 34.75,15.18L34.75,11.072C45.518,13.576 53.573,23.179 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,26.628 8.879,19.462 14.98,15.079C16.129,14.192 16.512,12.848 15.782,11.662C15.089,10.489 13.436,10.166 12.152,11.115C4.781,16.446 0,24.967 0,34.787C0,50.929 13.101,64 29.213,64Z" }), jsxRuntime.jsx("path", { d: "M29.316,46.78C33.77,46.78 36.567,43.459 36.567,39.017C36.567,35.17 34.402,31.892 30.599,31.892C28.703,31.892 27.099,32.745 26.306,34.221L26.19,34.221L26.703,27.686L33.991,27.686C34.946,27.686 35.579,27.053 35.579,26.098C35.579,25.119 34.977,24.486 33.991,24.486L25.707,24.486C24.203,24.486 23.498,25.277 23.424,26.78L22.808,35.111C22.735,36.407 23.367,37.35 24.639,37.35C25.552,37.35 25.966,36.972 26.532,36.302C27.222,35.38 28.186,34.806 29.347,34.806C31.586,34.806 32.717,36.838 32.717,39.108C32.717,41.554 31.483,43.586 29.291,43.586C27.576,43.586 26.434,42.475 25.885,40.967C25.502,40.188 24.906,39.774 24.145,39.774C23.16,39.774 22.533,40.407 22.533,41.423C22.533,41.764 22.576,42.093 22.649,42.416C23.362,45.171 26.53,46.78 29.316,46.78Z" })] }));
+}
+
+function GearshapeFill(props) {
+    return (jsxRuntime.jsx("svg", { viewBox: '0 0 64 64', ...props, children: jsxRuntime.jsx("path", { d: 'M63.1,27.4c-0.4-0.5-1-0.9-1.8-1.1l-6.7-1.6c-0.2-0.6-0.4-1.2-0.7-1.8c-0.2-0.6-0.5-1.1-0.7-1.5l3.6-5.9 c0.4-0.7,0.6-1.4,0.6-2.1c-0.1-0.7-0.4-1.3-0.9-1.9l-4-3.9c-0.6-0.5-1.2-0.8-1.8-0.9s-1.3,0.1-2,0.4l-6,3.7c-0.5-0.2-1-0.5-1.6-0.7 s-1.2-0.4-1.8-0.6l-1.6-6.8c-0.2-0.8-0.6-1.4-1.1-1.9c-0.6-0.4-1.2-0.7-2-0.7H29c-0.8,0-1.5,0.2-2,0.7c-0.5,0.4-0.9,1.1-1.1,1.9 l-1.6,6.8c-0.6,0.2-1.2,0.4-1.7,0.6s-1.1,0.5-1.6,0.7l-6-3.7c-1.4-0.8-2.7-0.6-3.8,0.5l-4,3.9c-0.6,0.6-0.9,1.2-0.9,1.9 s0.1,1.4,0.6,2.1l3.6,5.9c-0.2,0.5-0.4,1-0.6,1.5c-0.2,0.6-0.4,1.2-0.6,1.8l-6.7,1.6c-0.8,0.2-1.4,0.5-1.8,1.1 c-0.4,0.5-0.7,1.2-0.7,2v5.5c0,0.8,0.2,1.5,0.7,2.1c0.4,0.5,1,0.9,1.8,1.1l6.8,1.6c0.2,0.5,0.3,1.1,0.6,1.6c0.2,0.6,0.5,1.1,0.7,1.6 l-3.6,5.8c-0.5,0.7-0.6,1.4-0.6,2.1c0.1,0.7,0.4,1.4,0.9,1.9l3.9,3.9c0.5,0.5,1.2,0.8,1.9,0.9c0.7,0.1,1.4-0.1,2.1-0.5l5.9-3.6 c0.5,0.2,1,0.5,1.6,0.7s1.2,0.4,1.7,0.6l1.6,6.7c0.2,0.8,0.5,1.4,1.1,1.9c0.5,0.5,1.1,0.7,1.9,0.7h5.6c0.8,0,1.5-0.2,2-0.7 c0.6-0.4,0.9-1.1,1.1-1.9l1.6-6.7c0.6-0.2,1.2-0.4,1.8-0.6c0.6-0.2,1.1-0.5,1.6-0.7l5.9,3.6c0.7,0.4,1.3,0.6,2,0.5s1.3-0.4,1.9-0.9 l3.9-3.9c0.6-0.6,0.9-1.2,0.9-1.9c0.1-0.7-0.1-1.4-0.6-2.1l-3.6-5.8c0.3-0.5,0.5-1.1,0.7-1.6c0.2-0.6,0.4-1.1,0.6-1.6l6.8-1.6 c0.8-0.2,1.4-0.5,1.8-1.1c0.4-0.5,0.6-1.2,0.6-2.1v-5.5C63.7,28.6,63.5,28,63.1,27.4z M41.3,37.4c-1,1.6-2.3,3-3.9,3.9 c-1.6,1-3.5,1.5-5.4,1.5c-2,0-3.8-0.5-5.4-1.5s-2.9-2.3-3.9-3.9s-1.5-3.5-1.5-5.4c0-2,0.5-3.8,1.5-5.4s2.3-2.9,3.9-3.9 s3.5-1.5,5.4-1.5c2,0,3.8,0.5,5.4,1.5s2.9,2.3,3.9,3.9s1.5,3.4,1.5,5.4S42.3,35.8,41.3,37.4z' }) }));
+}
+
+function NinetyArrowTriangleheadClockwise(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 59 64", ...props, children: [jsxRuntime.jsx("path", { d: "M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,24.967 53.645,16.446 46.273,11.115C45.02,10.166 43.366,10.489 42.667,11.662C41.944,12.848 42.327,14.192 43.476,15.079C49.571,19.462 53.573,26.628 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,23.179 12.932,13.576 23.706,11.072L23.706,15.18C23.706,17.212 25.087,17.76 26.657,16.652L35.809,10.242C37.117,9.311 37.147,7.954 35.809,7.023L26.687,0.583C25.087,-0.555 23.706,-0.007 23.706,2.055L23.706,6.098C10.28,8.639 0,20.497 0,34.787C0,50.929 13.101,64 29.213,64Z" }), jsxRuntime.jsx("path", { d: "M19.89,46.737C17.79,46.737 15.894,45.911 14.713,44.519C14.045,43.807 13.498,42.846 13.498,41.983C13.498,41.094 14.088,40.316 15.134,40.316C16.041,40.316 16.515,40.73 16.978,41.528C17.642,42.743 18.558,43.513 20.048,43.513C23.381,43.513 24.059,38.718 24.041,35.192C24.041,35.101 24.035,35.009 24.035,34.936L23.992,34.936C23.358,37.077 21.558,38.717 18.882,38.717C15.139,38.717 12.804,35.469 12.804,31.592C12.804,27.162 15.741,23.901 20,23.901C25.594,23.901 27.818,29.349 27.818,35.096C27.818,40.891 25.911,46.737 19.89,46.737ZM20.037,35.675C22.154,35.675 23.505,33.747 23.505,31.55C23.505,29.291 22.209,27.126 20.097,27.126C17.9,27.126 16.654,29.262 16.654,31.441C16.654,33.607 17.845,35.675 20.037,35.675Z" }), jsxRuntime.jsx("path", { d: "M38.891,46.737C33.249,46.737 31.238,41.001 31.238,35.298C31.238,29.686 33.224,23.895 38.891,23.895C44.503,23.895 46.508,29.656 46.508,35.298C46.508,40.94 44.522,46.737 38.891,46.737ZM38.891,43.483C41.262,43.483 42.469,39.978 42.469,35.298C42.469,30.673 41.256,27.168 38.891,27.168C36.496,27.168 35.277,30.661 35.277,35.298C35.277,39.978 36.496,43.483 38.891,43.483Z" })] }));
+}
+
+function NinetyArrowTriangleheadCounterclockwise(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 59 64", ...props, children: [jsxRuntime.jsx("path", { d: "M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,20.497 48.145,8.639 34.75,6.098L34.75,2.055C34.75,-0.007 33.339,-0.555 31.762,0.583L22.647,7.023C21.308,7.954 21.339,9.311 22.647,10.242L31.793,16.652C33.339,17.76 34.75,17.212 34.75,15.18L34.75,11.072C45.518,13.576 53.573,23.179 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,26.628 8.879,19.462 14.98,15.079C16.129,14.192 16.512,12.848 15.782,11.662C15.089,10.489 13.436,10.166 12.152,11.115C4.781,16.446 0,24.967 0,34.787C0,50.929 13.101,64 29.213,64Z" }), jsxRuntime.jsx("path", { d: "M19.89,46.737C17.79,46.737 15.894,45.911 14.713,44.519C14.045,43.807 13.498,42.846 13.498,41.983C13.498,41.094 14.088,40.316 15.134,40.316C16.041,40.316 16.515,40.73 16.978,41.528C17.642,42.743 18.558,43.513 20.048,43.513C23.381,43.513 24.059,38.718 24.041,35.192C24.041,35.101 24.035,35.009 24.035,34.936L23.992,34.936C23.358,37.077 21.558,38.717 18.882,38.717C15.139,38.717 12.804,35.469 12.804,31.592C12.804,27.162 15.741,23.901 20,23.901C25.594,23.901 27.818,29.349 27.818,35.096C27.818,40.891 25.911,46.737 19.89,46.737ZM20.037,35.675C22.154,35.675 23.505,33.747 23.505,31.55C23.505,29.291 22.209,27.126 20.097,27.126C17.9,27.126 16.654,29.262 16.654,31.441C16.654,33.607 17.845,35.675 20.037,35.675Z" }), jsxRuntime.jsx("path", { d: "M38.891,46.737C33.249,46.737 31.238,41.001 31.238,35.298C31.238,29.686 33.224,23.895 38.891,23.895C44.503,23.895 46.508,29.656 46.508,35.298C46.508,40.94 44.522,46.737 38.891,46.737ZM38.891,43.483C41.262,43.483 42.469,39.978 42.469,35.298C42.469,30.673 41.256,27.168 38.891,27.168C36.496,27.168 35.277,30.661 35.277,35.298C35.277,39.978 36.496,43.483 38.891,43.483Z" })] }));
+}
+
+function PauseFill(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 48 64", ...props, children: [jsxRuntime.jsx("path", { d: "M5.172,64L13.97,64C17.334,64 19.102,62.233 19.102,58.828L19.102,5.172C19.102,1.603 17.334,0 13.97,0L5.172,0C1.767,0 0,1.767 0,5.172L0,58.828C0,62.233 1.767,64 5.172,64Z" }), jsxRuntime.jsx("path", { d: "M33.29,64L42.088,64C45.452,64 47.219,62.233 47.219,58.828L47.219,5.172C47.219,1.603 45.452,0 42.088,0L33.29,0C29.885,0 28.117,1.767 28.117,5.172L28.117,58.828C28.117,62.233 29.885,64 33.29,64Z" })] }));
+}
+
+function PhotoBadgeArrowDownFill(props) {
+    return (jsxRuntime.jsxs("svg", { ...props, viewBox: '0 0 64 47', children: [jsxRuntime.jsx("path", { d: 'M39.47,42.309L7.208,42.309C2.418,42.309 0,39.916 0,35.174L0,7.135C0,2.393 2.418,0 7.208,0L46.949,0C51.764,0 54.157,2.403 54.157,7.135L54.157,20.285C53.553,20.209 52.938,20.17 52.314,20.17C48.505,20.17 45.008,21.646 42.371,24.051L39.912,21.77C38.817,20.748 37.502,20.254 36.25,20.254C34.946,20.254 33.685,20.724 32.536,21.741L21.575,31.464L17.193,27.501C16.157,26.578 14.984,26.123 13.87,26.123C12.844,26.123 11.754,26.578 10.743,27.467L3.696,33.628L3.696,35.019C3.696,37.288 5.036,38.599 7.276,38.599L37.963,38.599C38.297,39.914 38.809,41.159 39.47,42.309ZM17.238,21.73C20.32,21.73 22.876,19.175 22.876,16.063C22.876,12.955 20.32,10.371 17.238,10.371C14.101,10.371 11.546,12.955 11.546,16.063C11.546,19.175 14.101,21.73 17.238,21.73Z' }), jsxRuntime.jsx("path", { d: 'M52.314,46.635C45.924,46.635 40.653,41.398 40.653,34.973C40.653,28.579 45.924,23.312 52.314,23.312C58.739,23.312 64,28.574 64,34.973C64,41.349 58.661,46.635 52.314,46.635ZM52.368,42.342C52.749,42.342 53.046,42.152 53.436,41.786L58.587,37.083C58.934,36.761 59.08,36.458 59.08,36.019C59.08,35.233 58.466,34.599 57.68,34.648C57.275,34.667 56.924,34.833 56.636,35.126L55.251,36.516L53.759,38.062L53.88,35.143L53.88,29.029C53.88,28.234 53.197,27.565 52.368,27.565C51.519,27.565 50.827,28.234 50.827,29.029L50.827,35.143L50.958,38.062L49.431,36.516L48.081,35.126C47.788,34.833 47.412,34.624 47.007,34.648C46.222,34.648 45.583,35.233 45.631,36.019C45.631,36.463 45.778,36.761 46.125,37.083L51.251,41.786C51.646,42.186 51.973,42.342 52.368,42.342Z' })] }));
+}
+
+function PlayFill(props) {
+    return (jsxRuntime.jsx("svg", { viewBox: "0 0 57 64", ...props, children: jsxRuntime.jsx("path", { d: "M-0,58.454C-0,62.219 2.163,64 4.77,64C5.895,64 7.11,63.644 8.251,63.02L52.662,37.083C55.817,35.222 56.911,34.016 56.911,32C56.911,29.984 55.817,28.778 52.662,26.917L8.251,0.979C7.11,0.356 5.895,0 4.77,0C2.163,0 -0,1.781 -0,5.547L-0,58.454Z" }) }));
+}
+
+function RectangleFillOnArrowDownForwardTopleadingRectangle(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 64 52", ...props, children: [jsxRuntime.jsx("path", { d: "M19.38,10.183C19.268,9.671 18.883,9.262 18.378,9.12C17.873,8.978 17.331,9.126 16.968,9.504C15.945,10.565 14.348,12.23 14.348,12.23L9.51,7.393C9.22,7.107 8.863,6.947 8.392,6.947C7.5,6.947 6.924,7.523 6.924,8.415C6.924,8.798 7.126,9.197 7.391,9.466L12.253,14.329C12.253,14.329 10.5,16.069 9.435,17.126C9.071,17.487 8.938,18.019 9.09,18.508C9.241,18.998 9.652,19.362 10.155,19.454C10.16,19.452 10.164,19.453 10.168,19.454L19.29,20.924C20.3,20.924 20.943,20.449 20.943,19.289L19.387,10.213C19.385,10.203 19.382,10.193 19.38,10.183Z" }), jsxRuntime.jsx("path", { d: "M6.918,40.609C2.32,40.609 0,38.312 0,33.761L0,6.848C0,2.297 2.32,0 6.918,0L45.062,0C49.683,0 51.981,2.307 51.981,6.848L51.981,33.761C51.981,38.302 49.683,40.609 45.062,40.609L6.918,40.609ZM6.975,37.038L45.006,37.038C47.189,37.038 48.433,35.86 48.433,33.587L48.433,7.021C48.433,4.726 47.189,3.57 45.006,3.57L6.975,3.57C4.772,3.57 3.547,4.726 3.547,7.021L3.547,33.587C3.547,35.86 4.772,37.038 6.975,37.038Z" }), jsxRuntime.jsx("path", { d: "M28.884,51.863L58.609,51.863C62.21,51.863 64,50.066 64,46.526L64,25.554C64,22.015 62.21,20.217 58.609,20.217L28.884,20.217C25.301,20.217 23.492,22.007 23.492,25.554L23.492,46.526C23.492,50.073 25.301,51.863 28.884,51.863Z" })] }));
+}
+
+function RectangleTriangleUp(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 64 49", ...props, children: [jsxRuntime.jsx("path", { d: "M13.294,36.044L8.518,36.044C2.857,36.044 0,33.216 0,27.612L0,8.432C0,2.828 2.857,0 8.518,0L55.482,0C61.172,0 64,2.84 64,8.432L64,27.612C64,33.204 61.172,36.044 55.482,36.044L50.712,36.044L46.417,31.648L55.412,31.648C58.1,31.648 59.633,30.197 59.633,27.399L59.633,8.645C59.633,5.818 58.1,4.396 55.412,4.396L8.587,4.396C5.876,4.396 4.367,5.818 4.367,8.645L4.367,27.399C4.367,30.197 5.876,31.648 8.587,31.648L17.593,31.648L13.294,36.044Z" }), jsxRuntime.jsx("path", { d: "M51.449,48.076L12.578,48.076C11.272,48.076 10.274,47.072 10.274,45.772C10.274,45.13 10.535,44.556 10.954,44.158L30.333,24.343C30.763,23.855 31.352,23.616 32.011,23.616C32.643,23.616 33.258,23.86 33.694,24.349L53.051,44.164C53.471,44.562 53.726,45.13 53.726,45.772C53.726,47.072 52.749,48.076 51.449,48.076Z" })] }));
+}
+
+function SixtyArrowTriangleheadClockwise(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 59 64", ...props, children: [jsxRuntime.jsx("path", { d: "M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,24.967 53.645,16.446 46.273,11.115C45.02,10.166 43.366,10.489 42.667,11.662C41.944,12.848 42.327,14.192 43.476,15.079C49.571,19.462 53.573,26.628 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,23.179 12.932,13.576 23.706,11.072L23.706,15.18C23.706,17.212 25.087,17.76 26.657,16.652L35.809,10.242C37.117,9.311 37.147,7.954 35.809,7.023L26.687,0.583C25.087,-0.555 23.706,-0.007 23.706,2.055L23.706,6.098C10.28,8.639 0,20.497 0,34.787C0,50.929 13.101,64 29.213,64Z" }), jsxRuntime.jsx("path", { d: "M20.541,46.774C16.981,46.774 14.664,44.425 13.556,41.133C12.922,39.18 12.698,36.589 12.944,34.234C13.167,29.03 15.166,23.932 20.62,23.932C23.356,23.932 25.751,25.261 26.665,27.237C26.909,27.663 27.012,28.181 27.012,28.723C27.012,29.526 26.538,30.359 25.376,30.359C24.5,30.359 23.983,29.86 23.557,29.147C22.917,27.883 21.97,27.144 20.559,27.144C18.472,27.144 17.441,29.04 16.97,31.048C16.647,32.286 16.512,33.738 16.512,35.752L16.634,35.752C17.329,33.519 19.141,31.982 21.732,31.982C25.444,31.982 27.749,35.055 27.749,39.083C27.749,43.598 24.782,46.774 20.541,46.774ZM20.51,43.543C22.646,43.543 23.899,41.451 23.899,39.235C23.899,36.952 22.72,34.964 20.504,34.964C18.417,34.964 17.079,36.861 17.079,39.113C17.079,41.335 18.319,43.543 20.51,43.543Z" }), jsxRuntime.jsx("path", { d: "M38.658,46.737C33.045,46.737 31.035,41.001 31.035,35.298C31.035,29.686 33.021,23.895 38.658,23.895C44.3,23.895 46.268,29.656 46.268,35.298C46.268,40.94 44.319,46.737 38.658,46.737ZM38.658,43.483C41.059,43.483 42.266,39.978 42.266,35.298C42.266,30.673 41.053,27.168 38.658,27.168C36.287,27.168 35.068,30.661 35.068,35.298C35.068,39.978 36.287,43.483 38.658,43.483Z" })] }));
+}
+
+function SixtyArrowTriangleheadCounterclockwise(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 59 64", ...props, children: [jsxRuntime.jsx("path", { d: "M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,20.497 48.145,8.639 34.75,6.098L34.75,2.055C34.75,-0.007 33.339,-0.555 31.762,0.583L22.647,7.023C21.308,7.954 21.339,9.311 22.647,10.242L31.793,16.652C33.339,17.76 34.75,17.212 34.75,15.18L34.75,11.072C45.518,13.576 53.573,23.179 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,26.628 8.879,19.462 14.98,15.079C16.129,14.192 16.512,12.848 15.782,11.662C15.089,10.489 13.436,10.166 12.152,11.115C4.781,16.446 0,24.967 0,34.787C0,50.929 13.101,64 29.213,64Z" }), jsxRuntime.jsx("path", { d: "M20.541,46.774C16.981,46.774 14.664,44.425 13.556,41.133C12.922,39.18 12.698,36.589 12.944,34.234C13.167,29.03 15.166,23.932 20.62,23.932C23.356,23.932 25.751,25.261 26.665,27.237C26.909,27.663 27.012,28.181 27.012,28.723C27.012,29.526 26.538,30.359 25.376,30.359C24.5,30.359 23.983,29.86 23.557,29.147C22.917,27.883 21.97,27.144 20.559,27.144C18.472,27.144 17.441,29.04 16.97,31.048C16.647,32.286 16.512,33.738 16.512,35.752L16.634,35.752C17.329,33.519 19.141,31.982 21.732,31.982C25.444,31.982 27.749,35.055 27.749,39.083C27.749,43.598 24.782,46.774 20.541,46.774ZM20.51,43.543C22.646,43.543 23.899,41.451 23.899,39.235C23.899,36.952 22.72,34.964 20.504,34.964C18.417,34.964 17.079,36.861 17.079,39.113C17.079,41.335 18.319,43.543 20.51,43.543Z" }), jsxRuntime.jsx("path", { d: "M38.658,46.737C33.045,46.737 31.035,41.001 31.035,35.298C31.035,29.686 33.021,23.895 38.658,23.895C44.3,23.895 46.268,29.656 46.268,35.298C46.268,40.94 44.319,46.737 38.658,46.737ZM38.658,43.483C41.059,43.483 42.266,39.978 42.266,35.298C42.266,30.673 41.053,27.168 38.658,27.168C36.287,27.168 35.068,30.661 35.068,35.298C35.068,39.978 36.287,43.483 38.658,43.483Z" })] }));
+}
+
+function SpeakerMinusFill(props) {
+    return (jsxRuntime.jsxs("svg", { ...props, viewBox: '0 0 64 46', children: [jsxRuntime.jsx("path", { d: 'M27.897,45.634C29.579,45.634 30.809,44.408 30.809,42.716L30.809,3.055C30.809,1.39 29.579,0 27.842,0C26.634,0 25.792,0.528 24.48,1.78L13.449,12.13C13.294,12.284 13.074,12.383 12.825,12.383L5.415,12.383C1.909,12.383 0,14.292 0,18.045L0,27.672C0,31.392 1.909,33.328 5.415,33.328L12.825,33.328C13.074,33.328 13.294,33.406 13.449,33.56L24.48,44.013C25.683,45.133 26.688,45.634 27.897,45.634Z' }), jsxRuntime.jsx("path", { d: 'M41.264,24.964L61.535,24.964C62.99,24.964 64,24.195 64,22.828C64,21.423 63.05,20.626 61.535,20.626L41.264,20.626C39.749,20.626 38.771,21.423 38.771,22.828C38.771,24.195 39.809,24.964 41.264,24.964Z' })] }));
+}
+
+function SpeakerPlusFill(props) {
+    return (jsxRuntime.jsxs("svg", { ...props, viewBox: '0 0 64 47', children: [jsxRuntime.jsx("path", { d: 'M28.32,46.325C30.027,46.325 31.276,45.08 31.276,43.362L31.276,3.102C31.276,1.411 30.027,0 28.264,0C27.037,0 26.183,0.536 24.85,1.807L13.652,12.313C13.496,12.47 13.272,12.571 13.02,12.571L5.497,12.571C1.938,12.571 0,14.509 0,18.319L0,28.091C0,31.867 1.938,33.833 5.497,33.833L13.02,33.833C13.272,33.833 13.496,33.911 13.652,34.068L24.85,44.679C26.071,45.817 27.092,46.325 28.32,46.325Z' }), jsxRuntime.jsx("path", { d: 'M39.659,23.135C39.659,24.411 40.579,25.303 41.916,25.303L49.617,25.303L49.617,33.059C49.617,34.368 50.509,35.283 51.785,35.283C53.1,35.283 54.02,34.374 54.02,33.059L54.02,25.303L61.777,25.303C63.086,25.303 64,24.411 64,23.135C64,21.819 63.092,20.899 61.777,20.899L54.02,20.899L54.02,13.171C54.02,11.828 53.1,10.919 51.785,10.919C50.509,10.919 49.617,11.834 49.617,13.171L49.617,20.899L41.916,20.899C40.545,20.899 39.659,21.819 39.659,23.135Z' })] }));
+}
+
+function SpeakerWave3Fill(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: '0 0 64 47', ...props, children: [jsxRuntime.jsx("path", { d: 'M25.707,44.076C27.257,44.076 28.39,42.947 28.39,41.387L28.39,4.841C28.39,3.307 27.257,2.025 25.656,2.025C24.542,2.025 23.767,2.512 22.558,3.666L12.393,13.203C12.251,13.345 12.047,13.436 11.818,13.436L4.99,13.436C1.759,13.436 0,15.195 0,18.654L0,27.525C0,30.953 1.759,32.737 4.99,32.737L11.818,32.737C12.047,32.737 12.251,32.808 12.393,32.95L22.558,42.583C23.666,43.615 24.593,44.076 25.707,44.076Z' }), jsxRuntime.jsx("path", { "data-wave": '1', 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' }), jsxRuntime.jsx("path", { "data-wave": '2', 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' }), jsxRuntime.jsx("path", { "data-wave": '3', 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' })] }));
+}
+
+function TenArrowTriangleheadClockwise(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 59 64", ...props, children: [jsxRuntime.jsx("path", { d: "M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,24.967 53.645,16.446 46.273,11.115C45.02,10.166 43.366,10.489 42.667,11.662C41.944,12.848 42.327,14.192 43.476,15.079C49.571,19.462 53.573,26.628 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,23.179 12.932,13.576 23.706,11.072L23.706,15.18C23.706,17.212 25.087,17.76 26.657,16.652L35.809,10.242C37.117,9.311 37.147,7.954 35.809,7.023L26.687,0.583C25.087,-0.555 23.706,-0.007 23.706,2.055L23.706,6.098C10.28,8.639 -0,20.497 -0,34.787C-0,50.929 13.101,64 29.213,64Z" }), jsxRuntime.jsx("path", { d: "M21.596,46.561C22.831,46.561 23.585,45.673 23.585,44.438L23.585,26.365C23.585,24.935 22.709,24.096 21.286,24.096C20.118,24.096 19.316,24.613 18.416,25.288L15.162,27.705C14.602,28.131 14.267,28.587 14.267,29.287C14.267,30.108 14.864,30.765 15.685,30.765C16.081,30.765 16.361,30.638 16.689,30.376L19.522,28.258L19.577,28.258L19.577,44.438C19.577,45.679 20.355,46.561 21.596,46.561Z" }), jsxRuntime.jsx("path", { d: "M36.048,46.731C30.406,46.731 28.426,41.001 28.426,35.298C28.426,29.686 30.375,23.919 36.048,23.919C41.685,23.919 43.659,29.649 43.659,35.298C43.659,40.97 41.679,46.731 36.048,46.731ZM36.048,43.513C38.45,43.513 39.626,39.978 39.626,35.298C39.626,30.673 38.444,27.174 36.048,27.174C33.647,27.174 32.458,30.661 32.458,35.298C32.458,39.984 33.647,43.513 36.048,43.513Z" })] }));
+}
+
+function TenArrowTriangleheadCounterclockwise(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: '0 0 59 64', ...props, children: [jsxRuntime.jsx("path", { d: 'M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,20.497 48.145,8.639 34.75,6.098L34.75,2.055C34.75,-0.007 33.339,-0.555 31.762,0.583L22.647,7.023C21.308,7.954 21.339,9.311 22.647,10.242L31.793,16.652C33.339,17.76 34.75,17.212 34.75,15.18L34.75,11.072C45.518,13.576 53.573,23.179 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,26.628 8.879,19.462 14.98,15.079C16.129,14.192 16.512,12.848 15.782,11.662C15.089,10.489 13.436,10.166 12.152,11.115C4.781,16.446 0,24.967 0,34.787C0,50.929 13.101,64 29.213,64Z' }), jsxRuntime.jsx("path", { d: 'M21.596,46.561C22.831,46.561 23.585,45.673 23.585,44.438L23.585,26.365C23.585,24.935 22.709,24.096 21.286,24.096C20.118,24.096 19.316,24.613 18.416,25.288L15.162,27.705C14.602,28.131 14.267,28.587 14.267,29.287C14.267,30.108 14.864,30.765 15.685,30.765C16.081,30.765 16.361,30.638 16.689,30.376L19.522,28.258L19.577,28.258L19.577,44.438C19.577,45.679 20.355,46.561 21.596,46.561Z' }), jsxRuntime.jsx("path", { d: 'M36.048,46.731C30.406,46.731 28.426,41.001 28.426,35.298C28.426,29.686 30.375,23.919 36.048,23.919C41.685,23.919 43.659,29.649 43.659,35.298C43.659,40.97 41.679,46.731 36.048,46.731ZM36.048,43.513C38.45,43.513 39.626,39.978 39.626,35.298C39.626,30.673 38.444,27.174 36.048,27.174C33.647,27.174 32.458,30.661 32.458,35.298C32.458,39.984 33.647,43.513 36.048,43.513Z' })] }));
+}
+
+function ThirtyArrowTriangleheadClockwise(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 59 64", ...props, children: [jsxRuntime.jsx("path", { d: "M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,24.967 53.645,16.446 46.273,11.115C45.02,10.166 43.366,10.489 42.667,11.662C41.944,12.848 42.327,14.192 43.476,15.079C49.571,19.462 53.573,26.628 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,23.179 12.932,13.576 23.706,11.072L23.706,15.18C23.706,17.212 25.087,17.76 26.657,16.652L35.809,10.242C37.117,9.311 37.147,7.954 35.809,7.023L26.687,0.583C25.087,-0.555 23.706,-0.007 23.706,2.055L23.706,6.098C10.28,8.639 0,20.497 0,34.787C0,50.929 13.101,64 29.213,64Z" }), jsxRuntime.jsx("path", { d: "M20.047,46.731C24.27,46.731 27.627,44.281 27.627,40.241C27.627,36.944 25.457,35.231 22.805,34.975L22.805,34.926C25.346,34.354 26.883,32.276 26.883,29.819C26.883,26.102 23.813,23.999 19.962,23.999C16.763,23.999 13.992,25.796 13.37,28.361C13.272,28.703 13.229,29.063 13.229,29.411C13.229,30.275 13.697,31.023 14.902,31.023C15.863,31.023 16.374,30.627 16.696,29.733C17.25,28.018 18.362,27.162 19.992,27.162C21.908,27.162 23.093,28.377 23.093,30.287C23.093,32.361 21.641,33.624 19.548,33.624L18.704,33.624C17.724,33.624 17.152,34.19 17.152,35.084C17.152,36.027 17.755,36.532 18.704,36.532L19.59,36.532C21.916,36.532 23.618,37.546 23.618,40.071C23.618,42.091 22.19,43.507 20.078,43.507C18.064,43.507 16.915,42.481 16.379,40.894C16.026,40.121 15.388,39.628 14.615,39.628C13.532,39.628 12.845,40.297 12.845,41.344C12.845,41.697 12.894,42.045 12.991,42.393C13.705,45.287 17,46.731 20.047,46.731Z" }), jsxRuntime.jsx("path", { d: "M38.396,46.737C32.783,46.737 30.773,41.001 30.773,35.298C30.773,29.686 32.728,23.926 38.396,23.926C44.032,23.926 46.036,29.656 46.036,35.298C46.036,40.97 44.05,46.737 38.396,46.737ZM38.396,43.513C40.797,43.513 42.004,39.978 42.004,35.298C42.004,30.673 40.791,27.168 38.396,27.168C36.025,27.168 34.805,30.661 34.805,35.298C34.805,39.978 36.025,43.513 38.396,43.513Z" })] }));
+}
+
+function ThirtyArrowTriangleheadCounterclockwise(props) {
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 59 64", ...props, children: [jsxRuntime.jsx("path", { d: "M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,20.497 48.145,8.639 34.75,6.098L34.75,2.055C34.75,-0.007 33.339,-0.555 31.762,0.583L22.647,7.023C21.308,7.954 21.339,9.311 22.647,10.242L31.793,16.652C33.339,17.76 34.75,17.212 34.75,15.18L34.75,11.072C45.518,13.576 53.573,23.179 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,26.628 8.879,19.462 14.98,15.079C16.129,14.192 16.512,12.848 15.782,11.662C15.089,10.489 13.436,10.166 12.152,11.115C4.781,16.446 0,24.967 0,34.787C0,50.929 13.101,64 29.213,64Z" }), jsxRuntime.jsx("path", { d: "M20.047,46.731C24.27,46.731 27.627,44.281 27.627,40.241C27.627,36.944 25.457,35.231 22.805,34.975L22.805,34.926C25.346,34.354 26.883,32.276 26.883,29.819C26.883,26.102 23.813,23.999 19.962,23.999C16.763,23.999 13.992,25.796 13.37,28.361C13.272,28.703 13.229,29.063 13.229,29.411C13.229,30.275 13.697,31.023 14.902,31.023C15.863,31.023 16.374,30.627 16.696,29.733C17.25,28.018 18.362,27.162 19.992,27.162C21.908,27.162 23.093,28.377 23.093,30.287C23.093,32.361 21.641,33.624 19.548,33.624L18.704,33.624C17.724,33.624 17.152,34.19 17.152,35.084C17.152,36.027 17.755,36.532 18.704,36.532L19.59,36.532C21.916,36.532 23.618,37.546 23.618,40.071C23.618,42.091 22.19,43.507 20.078,43.507C18.064,43.507 16.915,42.481 16.379,40.894C16.026,40.121 15.388,39.628 14.615,39.628C13.532,39.628 12.845,40.297 12.845,41.344C12.845,41.697 12.894,42.045 12.991,42.393C13.705,45.287 17,46.731 20.047,46.731Z" }), jsxRuntime.jsx("path", { d: "M38.396,46.737C32.783,46.737 30.773,41.001 30.773,35.298C30.773,29.686 32.728,23.926 38.396,23.926C44.032,23.926 46.036,29.656 46.036,35.298C46.036,40.97 44.05,46.737 38.396,46.737ZM38.396,43.513C40.797,43.513 42.004,39.978 42.004,35.298C42.004,30.673 40.791,27.168 38.396,27.168C36.025,27.168 34.805,30.661 34.805,35.298C34.805,39.978 36.025,43.513 38.396,43.513Z" })] }));
+}
+
+function Xmark(props) {
     return (jsxRuntime.jsx("svg", { viewBox: '0 0 64 64', ...props, children: jsxRuntime.jsx("path", { d: 'M1,63c0.7,0.7,1.6,1,2.6,1s1.9-0.3,2.6-1L32,37.1L57.8,63c0.7,0.7,1.5,1,2.5,1c1,0,1.9-0.3,2.6-1c0.7-0.7,1-1.6,1-2.6 c0-1-0.3-1.8-1-2.5L37.1,32L63,6.2c0.7-0.7,1-1.6,1-2.6S63.7,1.7,63,1c-0.7-0.7-1.6-1-2.6-1c-1,0-1.8,0.3-2.5,1L32,26.9L6.2,1 C5.5,0.3,4.6,0,3.6,0C2.6,0,1.7,0.3,1,1C0.3,1.7,0,2.6,0,3.6c0,1,0.3,1.9,1,2.6L26.9,32L1,57.8c-0.7,0.7-1,1.5-1,2.6 C0,61.4,0.3,62.3,1,63z' }) }));
 }
 
@@ -917,7 +1147,7 @@ function DropDownButton({ arrow = true, as, children, className, ...props }) {
                 (typeof arrow === 'boolean' ? (jsxRuntime.jsx(ChevronDown, { className: '-top-px -mr-1 ml-2 w-4 animate-flip-again group-data-open/button:animate-flip' })) : (arrow))] }));
 }
 function DropDownItem({ as, ...props }) {
-    return jsxRuntime.jsx(react.MenuItem, { as: as || 'div', ...props });
+    return jsxRuntime.jsx(react.MenuItem, { ...props, as: as || 'div' });
 }
 function DropDownItems({ anchor, children, className, containerClassName, style, ...props }) {
     const getAnchorProps = () => {
@@ -931,14 +1161,14 @@ function DropDownItems({ anchor, children, className, containerClassName, style,
         return initialAnchor;
     };
     const anchorProps = getAnchorProps();
-    return (jsxRuntime.jsx(react.MenuItems, { ...props, anchor: anchorProps, className: twMerge('grid grid-rows-1fr rounded-xl shadow-xl transition-rows duration-500 ease-exponential data-closed:grid-rows-0fr', containerClassName), transition: true, style: { ...style, minWidth: 'var(--button-width)' }, children: bag => (jsxRuntime.jsx("div", { className: 'overflow-y-scroll', children: jsxRuntime.jsx("div", { className: twMerge('rounded-xl bg-neutral-50/20 px-6 py-5 backdrop-blur-md backdrop-brightness-150', className), children: typeof children === 'function' ? children(bag) : children }) })) }));
+    return (jsxRuntime.jsx(react.MenuItems, { ...props, anchor: anchorProps, className: twMerge('grid grid-rows-1fr rounded-xl shadow-xl transition-rows duration-500 ease-exponential not-data-open:not-data-enter:not-data-leave:grid-rows-0fr data-closed:grid-rows-0fr', containerClassName), static: props.static, style: { ...style, minWidth: 'var(--button-width)' }, transition: true, children: bag => (jsxRuntime.jsx("div", { className: 'overflow-y-scroll', children: jsxRuntime.jsx("div", { className: twMerge('rounded-xl bg-neutral-50/20 px-6 py-5 backdrop-blur-md backdrop-brightness-150', className), children: typeof children === 'function' ? children(bag) : children }) })) }));
 }
 function DropDownSection({ children, label, labelProps, separatorAbove, separatorBelow, ...props }) {
     const { labelClassName, ...restLabelProps } = { labelClassName: labelProps?.className || '', ...labelProps };
-    return (jsxRuntime.jsx(react.MenuSection, { ...props, children: sectionBag => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [separatorAbove && jsxRuntime.jsx(DropDownSeparator, {}), label && (jsxRuntime.jsx(react.MenuHeading, { ...restLabelProps, className: headingBag => twMerge('text-[size:larger] font-bold', typeof labelClassName === 'function' ? labelClassName(headingBag) : labelClassName), children: label })), typeof children === 'function' ? children(sectionBag) : children, separatorBelow && jsxRuntime.jsx(DropDownSeparator, {})] })) }));
+    return (jsxRuntime.jsx(react.MenuSection, { ...props, children: sectionBag => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [separatorAbove && jsxRuntime.jsx(DropDownSeparator, {}), label && (jsxRuntime.jsx(react.MenuHeading, { ...restLabelProps, className: headingBag => twMerge('text-[size:larger] font-bold text-current/80', typeof labelClassName === 'function' ? labelClassName(headingBag) : labelClassName), children: label })), typeof children === 'function' ? children(sectionBag) : children, separatorBelow && jsxRuntime.jsx(DropDownSeparator, {})] })) }));
 }
-function DropDownSeparator({ className, ...props }) {
-    return (jsxRuntime.jsx(react.MenuSeparator, { ...props, className: bag => twMerge('my-4 block h-px rounded-full bg-neutral-950/20', typeof className === 'function' ? className(bag) : className) }));
+function DropDownSeparator({ as, className, ...props }) {
+    return (jsxRuntime.jsx(react.MenuSeparator, { ...props, as: as || 'div', className: bag => twMerge('my-4 block h-px rounded-full bg-neutral-950/20', typeof className === 'function' ? className(bag) : className) }));
 }
 function DropDown(props) {
     return jsxRuntime.jsx(react.Menu, { ...props });
@@ -995,12 +1225,106 @@ function createFastContext(defaultInitialState) {
 function defineField(fieldDefinition) {
     return fieldDefinition;
 }
-const { Provider: Provider$1, useStore: useStore$1 } = createFastContext([]);
+function isStringField(field) {
+    return Boolean(field.type !== 'object' && field.type !== 'array');
+}
+const { Provider: Provider$2, useStore: useStore$2 } = createFastContext([]);
 function FormContextProvider({ children }) {
-    return jsxRuntime.jsx(Provider$1, { children: children });
+    return jsxRuntime.jsx(Provider$2, { children: children });
 }
 function useFormContext() {
-    return useStore$1(store => store);
+    const [formContext, setFormContext] = useStore$2(store => store);
+    const registerField = React.useCallback((field) => {
+        setFormContext?.(prevContext => {
+            const otherFields = (prevContext || []).filter(otherField => otherField.id !== field.id);
+            return [...otherFields, field];
+        });
+    }, []);
+    const removeField = React.useCallback((fieldID) => {
+        setFormContext?.(prevContext => (prevContext || []).filter(field => field.id !== fieldID));
+    }, []);
+    const updateField = React.useCallback((fieldID, updates) => {
+        setFormContext?.(prevContext => {
+            const field = prevContext.find(({ id }) => id === fieldID);
+            if (!field)
+                throw new Error(`Field with id "${fieldID}" not found in form context.`);
+            const otherFields = prevContext.filter(({ id }) => id !== fieldID);
+            const updatedField = { ...field, ...updates };
+            return [...otherFields, updatedField];
+        });
+    }, []);
+    return [formContext, { registerField, removeField, updateField }];
+}
+
+const { Provider: Provider$1, useStore: useStore$1 } = createFastContext(undefined);
+function FieldsetContextProvider({ children, initialValue, }) {
+    return jsxRuntime.jsx(Provider$1, { initialValue: initialValue, children: children });
+}
+function useFieldsetContext() {
+    const [fieldsetContext, setFieldsetContext] = useStore$1(store => store), [, formContextFunctions] = useFormContext();
+    const registerField = React.useCallback((field) => {
+        setFieldsetContext?.(prev => {
+            if (!prev)
+                return prev;
+            const existingFieldIndex = prev.fieldList.findIndex(existingField => existingField.id === field.id);
+            const newFieldList = existingFieldIndex >= 0
+                ? prev.fieldList.map((existingField, index) => (index === existingFieldIndex ? field : existingField))
+                : [...prev.fieldList, field];
+            return { ...prev, fieldList: newFieldList };
+        });
+    }, []);
+    const removeField = React.useCallback((fieldID) => {
+        setFieldsetContext?.(prev => {
+            if (!prev)
+                return prev;
+            return {
+                ...prev,
+                fieldList: prev.fieldList.filter(field => field.id !== fieldID),
+            };
+        });
+    }, []);
+    const updateField = React.useCallback((fieldID, updates) => {
+        setFieldsetContext?.(prev => {
+            if (!prev)
+                return prev;
+            return {
+                ...prev,
+                fieldList: prev.fieldList.map(field => (field.id === fieldID ? { ...field, ...updates } : field)),
+            };
+        });
+    }, []);
+    const createFormContextEntry = React.useCallback((fieldsetEntry) => {
+        if (fieldsetEntry.join) {
+            const joinedValue = fieldsetEntry.fieldList
+                .filter(field => isStringField(field) && field.value !== '')
+                .map(field => field.value)
+                .join(fieldsetEntry.join);
+            return defineField({
+                type: 'string',
+                id: fieldsetEntry.id,
+                name: fieldsetEntry.name,
+                value: joinedValue,
+                required: fieldsetEntry.fieldList.some(field => field.required),
+                invalid: fieldsetEntry.fieldList.some(field => field.invalid),
+            });
+        }
+        return defineField({
+            type: 'object',
+            id: fieldsetEntry.id,
+            name: fieldsetEntry.name,
+            fields: fieldsetEntry.fieldList,
+        });
+    }, []);
+    React.useEffect(() => {
+        if (!fieldsetContext || fieldsetContext.decorative)
+            return;
+        const formContextEntry = createFormContextEntry(fieldsetContext);
+        formContextFunctions.registerField(formContextEntry);
+        return () => {
+            formContextFunctions.removeField(fieldsetContext.id);
+        };
+    }, [fieldsetContext, formContextFunctions.registerField, formContextFunctions.removeField, createFormContextEntry]);
+    return [fieldsetContext, { registerField, removeField, updateField }];
 }
 
 const DEFAULT_STATUS = 'incomplete';
@@ -1012,9 +1336,18 @@ function useFormStatus() {
     return useStore(store => store);
 }
 
-function Fieldset({ children, className, legend, legendProps, ...props }) {
+function Fieldset({ children, className, decorative = false, join, legend, legendProps, name, ...props }) {
+    const uniqueID = React.useId();
+    const fieldsetId = toLowerCase(legend || name, [' ', '_']) + '§' + uniqueID;
     const { className: legendClassName, ...restLegendProps } = legendProps || {};
-    return (jsxRuntime.jsx(react.Fieldset, { ...props, className: bag => twMerge('contents', typeof className === 'function' ? className(bag) : className), children: bag => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Legend, { ...restLegendProps, className: twMerge('text-lg font-bold sm:text-xl', typeof legendClassName === 'function' ? legendClassName(bag) : legendClassName), children: legend }), typeof children === 'function' ? children(bag) : children] })) }));
+    name = legend || name;
+    return (jsxRuntime.jsx(FieldsetContextProvider, { initialValue: {
+            decorative,
+            fieldList: [],
+            id: fieldsetId,
+            join,
+            name,
+        }, children: jsxRuntime.jsx(react.Fieldset, { ...props, name: name, className: bag => twMerge('contents', typeof className === 'function' ? className(bag) : className), children: bag => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [legend && (jsxRuntime.jsx(react.Legend, { ...restLegendProps, className: twMerge('text-xl font-bold text-current/80', typeof legendClassName === 'function' ? legendClassName(bag) : legendClassName), children: legend })), typeof children === 'function' ? children(bag) : children] })) }) }));
 }
 
 /**
@@ -1521,7 +1854,7 @@ const flip$2 = function (options) {
           if (!ignoreCrossAxisOverflow ||
           // We leave the current main axis only if every placement on that axis
           // overflows the main axis.
-          overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
+          overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
             // Try next placement and re-run the lifecycle.
             return {
               data: {
@@ -3206,15 +3539,17 @@ function ArrowSvg({ className, ...props }) {
     return (jsxRuntime.jsxs("svg", { viewBox: '0 0 20 10', className: twMerge('h-2.5 w-5 fill-none', className), ...props, children: [jsxRuntime.jsx("path", { d: 'M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z', className: 'fill-neutral-50 dark:fill-neutral-800' }), jsxRuntime.jsx("path", { d: 'M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z', className: 'fill-neutral-400 dark:fill-none' }), jsxRuntime.jsx("path", { d: 'M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z', className: 'dark:fill-neutral-600' })] }));
 }
 
-function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, name, onBlur, onChange, placeholder, ref, required = true, type, value, ...props }) {
-    const [formContext, setFormContext] = useFormContext(), [errorMessage, setErrorMessage] = React.useState(undefined);
+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] = React.useState(undefined);
+    if (type === 'password' && !placeholder)
+        placeholder = '••••••••' + (required && !label ? '*' : '');
     if (placeholder === '*')
         placeholder = name + (required && !label ? '*' : '');
     if (label === '*')
         label = name;
     const uniqueID = React.useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
-    if (Boolean(formContext?.find(field => field.id === fieldContextID)?.invalid))
-        invalid = true;
+    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
     const getFieldContextType = () => {
         switch (type) {
             case 'email':
@@ -3232,26 +3567,27 @@ function Input({ checked, className, defaultValue, description, descriptionProps
         }
     };
     const fieldContextType = getFieldContextType();
-    const initialFieldContext = defineField({
-        type: fieldContextType,
-        id: fieldContextID,
-        invalid,
-        name,
-        required,
-        value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
-    });
+    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
     React.useEffect(() => {
-        if (!setFormContext)
-            return;
-        setFormContext(prevContext => {
-            const otherFields = (prevContext || []).filter(field => field.id !== initialFieldContext.id);
-            return [...otherFields, initialFieldContext];
+        const initialFieldContext = defineField({
+            type: fieldContextType,
+            id: fieldContextID,
+            invalid,
+            name,
+            required,
+            value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
         });
+        if (isInFieldset) {
+            fieldsetContextFunctions.registerField(initialFieldContext);
+            return () => {
+                fieldsetContextFunctions.removeField(initialFieldContext.id);
+            };
+        }
+        formContextFunctions.registerField(initialFieldContext);
         return () => {
-            setFormContext(prevContext => (prevContext || []).filter(field => field.id !== initialFieldContext.id));
+            formContextFunctions.removeField(initialFieldContext.id);
         };
-    }, [setFormContext]);
-    const fieldContext = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id) || initialFieldContext;
+    }, [isInFieldset]);
     const validateField = (validValue) => {
         const noValue = !validValue || validValue === '';
         if (!required && noValue)
@@ -3267,15 +3603,86 @@ function Input({ checked, className, defaultValue, description, descriptionProps
                 if (!isEmail(validValue))
                     errorMessageList.push('This is not a valid email.');
                 break;
+            case 'date':
+                const valueAsTime = new Date().getTime();
+                if (min && !(min instanceof Date) && typeof min !== 'number') {
+                    if (Array.isArray(min)) {
+                        const monthIndex = typeof min[1] === 'number' ? min[1] - 1 : getMonthIndexFromName(min[1]);
+                        min = new Date(min[0], monthIndex, min[2]);
+                    }
+                    else if ('year' in min && 'month' in min && 'day' in min) {
+                        const monthIndex = typeof min.month === 'number' ? min.month - 1 : getMonthIndexFromName(min.month);
+                        min = new Date(min.year, monthIndex, min.day);
+                    }
+                    if (valueAsTime < min.getTime())
+                        errorMessageList.push(`Value cannot be lower than ${getUserReadableDate(min)}.`);
+                }
+                if (max && !(max instanceof Date) && typeof max !== 'number') {
+                    if (Array.isArray(max)) {
+                        const monthIndex = typeof max[1] === 'number' ? max[1] - 1 : getMonthIndexFromName(max[1]);
+                        max = new Date(max[0], monthIndex, max[2]);
+                    }
+                    else if ('year' in max && 'month' in max && 'day' in max) {
+                        const monthIndex = typeof max.month === 'number' ? max.month - 1 : getMonthIndexFromName(max.month);
+                        max = new Date(max.year, monthIndex, max.day);
+                    }
+                    if (valueAsTime > max.getTime())
+                        errorMessageList.push(`Value cannot be higher than ${getUserReadableDate(max)}.`);
+                }
+                break;
             case 'number':
-                if (isNaN(Number(validValue)))
+                const valueAsNumber = Number(validValue);
+                if (isNaN(valueAsNumber))
                     errorMessageList.push('This is not a valid number.');
+                if (typeof max === 'number' && valueAsNumber > max)
+                    errorMessageList.push(`Value cannot be higher than ${max}.`);
+                if (typeof min === 'number' && valueAsNumber < min)
+                    errorMessageList.push(`Value cannot be lower than ${min}.`);
+                break;
+            case 'password':
+                if (options) {
+                    const { matchPreviousInput, requireLowercaseCharacter, requireNumber, requireSpecialCharacter, requireUppercaseCharacter, } = options;
+                    if (matchPreviousInput && formContext && formContext.length >= 2) {
+                        if (isInFieldset && fieldsetContext.fieldList.length > 1) {
+                            const currentInputIndex = fieldsetContext.fieldList.findIndex(({ id: fieldID }) => fieldID === fieldContext?.id);
+                            if (currentInputIndex > 0) {
+                                const previousInput = fieldsetContext.fieldList.find((_, index) => index === currentInputIndex - 1);
+                                if (previousInput &&
+                                    isStringField(previousInput) &&
+                                    previousInput.value !== validValue)
+                                    errorMessageList.push('Passwords must match.');
+                            }
+                        }
+                        else {
+                            const currentInputIndex = formContext.findIndex(({ id: fieldID }) => fieldID === fieldContext?.id);
+                            if (currentInputIndex > 0) {
+                                const previousInput = formContext.find((_, index) => index === currentInputIndex - 1);
+                                if (previousInput &&
+                                    isStringField(previousInput) &&
+                                    previousInput.value !== validValue)
+                                    errorMessageList.push('Passwords must match.');
+                            }
+                        }
+                    }
+                    if (requireLowercaseCharacter && !/[a-z]/g.test(validValue))
+                        errorMessageList.push('You must include a lowercase character.');
+                    if (requireNumber && !/[0-9]/g.test(validValue))
+                        errorMessageList.push('You must include a number.');
+                    if (requireSpecialCharacter && !specialCharacterRegex.test(validValue))
+                        errorMessageList.push('You must include a special character.');
+                    if (requireUppercaseCharacter && !/[A-Z]/g.test(validValue))
+                        errorMessageList.push('You must include an uppercase character.');
+                }
                 break;
             case 'tel':
                 if (!isPhoneNumber(validValue))
                     errorMessageList.push('This is not a valid phone number.');
                 break;
         }
+        if (props.maxLength && validValue.length > Number(props.maxLength))
+            errorMessageList.push(`This may not have more than ${props.maxLength} characters.`);
+        if (props.minLength && validValue.length < Number(props.minLength))
+            errorMessageList.push(`This must have at least ${props.minLength} characters.`);
         if (errorMessageList.length === 0)
             return true;
         setErrorMessage(errorMessageList.join(' '));
@@ -3287,19 +3694,15 @@ function Input({ checked, className, defaultValue, description, descriptionProps
             return;
         }
         const { currentTarget } = e, { value: newValue } = currentTarget;
-        setFormContext?.(prevContext => {
-            if (!prevContext)
-                return [];
-            const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
-            if (!field)
-                throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
-            const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
-            const updatedField = { ...field, value: newValue };
-            const invalidField = validateField(newValue) === false;
-            if (invalidField !== field.invalid)
-                updatedField.invalid = invalidField;
-            return [...otherFields, updatedField];
-        });
+        if (isInFieldset) {
+            fieldsetContextFunctions.updateField(fieldContextID, {
+                value: newValue,
+                invalid: validateField(newValue) === false,
+            });
+        }
+        else {
+            formContextFunctions.updateField(fieldContextID, { value: newValue, invalid: validateField(newValue) === false });
+        }
         onChange?.(e);
     };
     const handleBlur = e => {
@@ -3310,32 +3713,21 @@ function Input({ checked, className, defaultValue, description, descriptionProps
         const { currentTarget } = e, { value: newValue } = currentTarget;
         if (required)
             validateField(newValue);
+        let processedValue = newValue;
         switch (type) {
             case 'email':
-                setFormContext?.(prevContext => {
-                    if (!prevContext)
-                        return [];
-                    const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
-                    if (!field)
-                        throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
-                    const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
-                    const updatedField = { ...field, value: newValue.toLowerCase() };
-                    return [...otherFields, updatedField];
-                });
+                processedValue = newValue.toLowerCase();
                 break;
             case 'tel':
-                setFormContext?.(prevContext => {
-                    if (!prevContext)
-                        return [];
-                    const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
-                    if (!field)
-                        throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
-                    const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
-                    const updatedField = { ...field, value: formatPhoneNumber(newValue, '1') };
-                    return [...otherFields, updatedField];
-                });
+                processedValue = formatPhoneNumber(newValue, options);
                 break;
         }
+        if (isInFieldset) {
+            fieldsetContextFunctions.updateField(fieldContextID, { value: processedValue });
+        }
+        else {
+            formContextFunctions.updateField(fieldContextID, { value: processedValue });
+        }
         onBlur?.(e);
     };
     const restFieldProps = fieldProps
@@ -3355,7 +3747,7 @@ function Input({ checked, className, defaultValue, description, descriptionProps
                         // user-invalid styles
                         'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]', 
                         // Custom styles
-                        typeof className === 'function' ? className(bag) : className), invalid: invalid, onBlur: handleBlur, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, type: type, value: fieldContext?.value }), fieldContext.invalid && errorMessage && (jsxRuntime.jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [jsxRuntime.jsx(TooltipTrigger, { as: Button, className: 'absolute top-1.25 right-1.25 z-10 size-6 min-w-0', padding: 'none', rounded: 'md', theme: 'red', children: jsxRuntime.jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsxRuntime.jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsxRuntime.jsx(react.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+                        typeof className === 'function' ? className(bag) : className), invalid: invalid, onBlur: handleBlur, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, type: type, value: fieldContext?.value || '' }), fieldContext?.invalid && errorMessage && (jsxRuntime.jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [jsxRuntime.jsx(TooltipTrigger, { as: Button, className: 'absolute top-1.25 right-1.25 z-10 size-6 min-w-0', padding: 'none', rounded: 'md', theme: 'red', children: jsxRuntime.jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsxRuntime.jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsxRuntime.jsx(react.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
                     ? descriptionProps?.className(bag)
                     : descriptionProps?.className), children: description }))] }));
 }
@@ -3414,34 +3806,37 @@ function SubmitButton({ children, className, customTheme, error, incomplete, loa
 }
 
 function Textarea({ className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, name, onBlur, onChange, placeholder, ref, required = true, value, ...props }) {
-    const [formContext, setFormContext] = useFormContext(), [errorMessage, setErrorMessage] = React.useState(undefined);
+    const [formContext, formContextFunctions] = useFormContext();
+    const [fieldsetContext, fieldsetContextFunctions] = useFieldsetContext();
+    const [errorMessage, setErrorMessage] = React.useState(undefined);
     if (placeholder === '*')
         placeholder = name + (required && !label ? '*' : '');
     if (label === '*')
         label = name;
-    const uniqueID = React.useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
-    if (Boolean(formContext?.find(field => field.id === fieldContextID)?.invalid))
-        invalid = true;
-    const initialFieldContext = defineField({
-        type: 'textarea',
-        id: fieldContextID,
-        invalid,
-        name,
-        required,
-        value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
-    });
+    const uniqueID = React.useId();
+    const fieldContextID = toLowerCase(name, [' ', '_']) + '§' + uniqueID;
+    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
     React.useEffect(() => {
-        if (!setFormContext)
-            return;
-        setFormContext(prevContext => {
-            const otherFields = (prevContext || []).filter(field => field.id !== initialFieldContext.id);
-            return [...otherFields, initialFieldContext];
+        const initialFieldContext = defineField({
+            type: 'textarea',
+            id: fieldContextID,
+            invalid,
+            name,
+            required,
+            value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
         });
+        if (isInFieldset) {
+            fieldsetContextFunctions.registerField(initialFieldContext);
+            return () => {
+                fieldsetContextFunctions.removeField(initialFieldContext.id);
+            };
+        }
+        formContextFunctions.registerField(initialFieldContext);
         return () => {
-            setFormContext(prevContext => (prevContext || []).filter(field => field.id !== initialFieldContext.id));
+            formContextFunctions.removeField(initialFieldContext.id);
         };
-    }, [setFormContext]);
-    const fieldContext = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id) || initialFieldContext;
+    }, [isInFieldset]);
+    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
     const validateField = (validValue) => {
         const noValue = !validValue || validValue === '';
         if (!required && noValue)
@@ -3452,6 +3847,10 @@ function Textarea({ className, defaultValue, description, descriptionProps, disa
             setErrorMessage(errorMessageList.join(' '));
             return false;
         }
+        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))
+            errorMessageList.push(`This must have at least ${props.minLength} characters.`);
         if (errorMessageList.length === 0)
             return true;
         setErrorMessage(errorMessageList.join(' '));
@@ -3462,22 +3861,41 @@ function Textarea({ className, defaultValue, description, descriptionProps, disa
             e.preventDefault();
             return;
         }
-        const { currentTarget } = e, { value: newValue } = currentTarget;
-        setFormContext?.(prevContext => {
-            if (!prevContext)
-                return [];
-            const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
-            if (!field)
-                throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
-            const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
-            const updatedField = { ...field, value: newValue };
-            const invalidField = validateField(newValue) === false;
-            if (invalidField !== field.invalid)
-                updatedField.invalid = invalidField;
-            return [...otherFields, updatedField];
-        });
+        const { currentTarget } = e;
+        const { value: newValue } = currentTarget;
+        if (isInFieldset) {
+            fieldsetContextFunctions.updateField(fieldContextID, {
+                value: newValue,
+                invalid: validateField(newValue) === false,
+            });
+        }
+        else {
+            formContextFunctions.updateField(fieldContextID, {
+                value: newValue,
+                invalid: validateField(newValue) === false,
+            });
+        }
         onChange?.(e);
     };
+    const handleBlur = e => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        const { currentTarget } = e;
+        const { value: newValue } = currentTarget;
+        if (required)
+            validateField(newValue);
+        // No special processing needed for textarea like email/phone formatting
+        const processedValue = newValue;
+        if (isInFieldset) {
+            fieldsetContextFunctions.updateField(fieldContextID, { value: processedValue });
+        }
+        else {
+            formContextFunctions.updateField(fieldContextID, { value: processedValue });
+        }
+        onBlur?.(e);
+    };
     const restFieldProps = fieldProps
         ? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
         : {};
@@ -3495,23 +3913,34 @@ function Textarea({ className, defaultValue, description, descriptionProps, disa
                         // user-invalid styles
                         'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]', 
                         // Custom styles
-                        typeof className === 'function' ? className(bag) : className), id: fieldContext?.id, invalid: invalid, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, value: fieldContext?.value }), fieldContext.invalid && errorMessage && (jsxRuntime.jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [jsxRuntime.jsx(TooltipTrigger, { as: Button, className: 'absolute top-1.25 right-1.25 z-10 size-6 min-w-0', padding: 'none', rounded: 'md', theme: 'red', children: jsxRuntime.jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsxRuntime.jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsxRuntime.jsx(react.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+                        typeof className === 'function' ? className(bag) : className), id: fieldContext?.id, invalid: invalid, onChange: handleChange, onBlur: handleBlur, placeholder: placeholder, ref: ref, required: required, value: fieldContext?.value || '' }), fieldContext?.invalid && errorMessage && (jsxRuntime.jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [jsxRuntime.jsx(TooltipTrigger, { as: Button, className: 'absolute top-1.25 right-1.25 z-10 size-6 min-w-0', padding: 'none', rounded: 'md', theme: 'red', children: jsxRuntime.jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsxRuntime.jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsxRuntime.jsx(react.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
                     ? descriptionProps?.className(bag)
                     : descriptionProps?.className), children: description }))] }));
 }
 
-// import { findComponentByType } from '../../utils'
 function FormComponent({ as, children, className, handleSubmit, onError, onSubmit, onSuccess, ...props }) {
     const [formContext] = useFormContext(), [formStatus, setFormStatus] = useFormStatus();
-    // const submitButton = findComponentByType(children, SubmitButton)
+    const checkField = React.useCallback((field) => {
+        if (field.type !== 'array' && field.type !== 'object' && !field.invalid)
+            return true;
+        if (field.type === 'object')
+            return field.fields.every(objectField => checkField(objectField));
+        return false;
+    }, []);
+    const everyFieldIsValid = React.useCallback(() => {
+        if (!formContext)
+            return false;
+        return formContext.every(field => checkField(field));
+    }, [formContext, checkField]);
     React.useEffect(() => {
         if (!formContext)
             return;
-        if (formStatus !== 'incomplete' && formContext.find(({ invalid }) => invalid))
+        if (formStatus !== 'incomplete' &&
+            formContext.find(context => context.type !== 'array' && context.type !== 'object' && context.invalid))
             setFormStatus?.('incomplete');
-        if (formStatus !== 'ready' && formContext.every(({ invalid }) => !invalid))
+        if (formStatus !== 'ready' && everyFieldIsValid())
             setFormStatus?.('ready');
-    }, [formContext]);
+    }, [formContext, everyFieldIsValid]);
     const processSubmit = handleSubmit ||
         (async (e) => {
             e.preventDefault();
@@ -3580,13 +4009,86 @@ function Heading({ as = 'h2', children, customize, className, id, ref, ...props
     return (jsxRuntime.jsx(H, { ref: ref, id: targetableID, ...props, className: twMerge(baseClasses, className), children: children }));
 }
 
+const allAllowProperties = [
+    'accelerometer',
+    'ambient-light-sensor',
+    'attribution-reporting',
+    'autoplay',
+    'bluetooth',
+    'camera',
+    'captured-surface-control',
+    'compute-pressure',
+    'cross-origin-isolated',
+    'deferred-fetch',
+    'deferred-fetch-minimal',
+    'display-capture',
+    'encrypted-media',
+    'fullscreen',
+    'gamepad',
+    'geolocation',
+    'gyroscope',
+    'hid',
+    'identity-credentials-get',
+    'idle-detection',
+    'language-detector',
+    'local-fonts',
+    'magnetometer',
+    'microphone',
+    'midi',
+    'otp-credentials',
+    'payment',
+    'picture-in-picture',
+    'publickey-credentials-get',
+    'screen-wake-lock',
+    'serial',
+    'speaker-selection',
+    'storage-access',
+    'summarizer',
+    'translator',
+    'usb',
+    'web-share',
+    'window-management',
+    'xr-spatial-tracking',
+];
+/**
+ * # iFrame
+ * - An `<iframe/>` with preset classes, backup, and required title for SEO.
+ */
+function IFrame({ allow, className, referrerPolicy = 'no-referrer-when-downgrade', sandbox, ...props }) {
+    const allowAttribute = (allow === 'allow-all'
+        ? allAllowProperties.map(property => `${property} *`)
+        : allow?.map(property => {
+            if (typeof property === 'string')
+                return `${property} *`;
+            const propertyDefinition = [];
+            Object.entries(property).forEach(([key, value]) => {
+                propertyDefinition.push(key);
+                if (value === true)
+                    propertyDefinition.push('*');
+                if (value === false)
+                    propertyDefinition.push(`'none'`);
+                if (Array.isArray(value))
+                    value.forEach(origin => propertyDefinition.push(origin));
+            });
+            return propertyDefinition.join(' ');
+        }) || []).join('; ');
+    return (jsxRuntime.jsx("iframe", { ...props, allow: allowAttribute, allowFullScreen: allowAttribute?.includes('fullscreen'), className: twMerge('aspect-video w-full bg-linear-60 from-neutral-700 via-neutral-500 to-neutral-600', className), referrerPolicy: referrerPolicy, sandbox: sandbox?.join(' ') }));
+}
+
 function ModalTrigger({ as, ...props }) {
     const Element = as || react.Button;
     return jsxRuntime.jsx(Element, { ...props });
 }
+function ModalTitle(props) {
+    return jsxRuntime.jsx(react.DialogTitle, { ...props });
+}
 function ModalDialog(props) {
     return jsxRuntime.jsx("div", { ...props });
 }
+function ModalClose({ as, ...props }) {
+    const Element = as || react.Button;
+    return jsxRuntime.jsx(Element, { ...props });
+}
 function Modal({ children, className, onClose, onOpen, place = 'bottom' }) {
     const [bodyElement, setBodyElement] = React.useState(null);
     React.useEffect(() => {
@@ -3691,7 +4193,7 @@ function Modal({ children, className, onClose, onOpen, place = 'bottom' }) {
                             readyToClose
                                 ? 'bg-neutral-50/5 backdrop-blur-[1px] dark:bg-neutral-950/5'
                                 : 'bg-neutral-50/25 backdrop-blur-sm dark:bg-neutral-950/25',
-                        ].join(' '), children: jsxRuntime.jsx(Button, { theme: 'blue', padding: 'none', rounded: 'full', className: 'group/button fixed top-4 right-4 h-7 w-7 overflow-x-hidden transition-[scale_width_filter] pointer-fine:hover:w-20', children: jsxRuntime.jsxs("div", { className: 'absolute top-1 right-1 flex items-center gap-1 pt-px transition-transform duration-300 ease-exponential pointer-fine:group-hover/button:-translate-x-0.5', children: [jsxRuntime.jsxs("span", { className: 'block text-xs leading-none font-medium text-neutral-50 uppercase', children: ["Close", jsxRuntime.jsx("span", { className: 'sr-only', children: " Modal" })] }), jsxRuntime.jsx(xmark, { className: '-top-px block size-5 scale-75 rotate-90 fill-white stroke-white stroke-1 transition-transform duration-300 ease-in-out group-hover/button:rotate-0' })] }) }) }), jsxRuntime.jsxs(react.DialogPanel, { ref: dialogPanelRef, transition: true, className: twMerge('fixed left-1/2 -translate-x-1/2 overflow-y-scroll bg-neutral-50 p-4 shadow-[0_-15px_50px_-12px] shadow-neutral-950/25 transition-[transform_translate_opacity] duration-750 ease-exponential data-closed:scale-50 data-closed:opacity-0 sm:w-[calc(100vw-2rem)] sm:max-w-fit sm:p-6 sm:shadow-2xl lg:p-8 dark:bg-neutral-900', place === 'center'
+                        ].join(' '), children: jsxRuntime.jsx(Button, { theme: 'blue', padding: 'none', rounded: 'full', className: 'group/button fixed top-4 right-4 h-7 w-7 overflow-x-hidden transition-[scale_width_filter] pointer-fine:hover:w-20', children: jsxRuntime.jsxs("div", { className: 'absolute top-1 right-1 flex items-center gap-1 pt-px transition-transform duration-300 ease-exponential pointer-fine:group-hover/button:-translate-x-0.5', children: [jsxRuntime.jsxs("span", { className: 'block text-xs leading-none font-medium text-neutral-50 uppercase', children: ["Close", jsxRuntime.jsx("span", { className: 'sr-only', children: " Modal" })] }), jsxRuntime.jsx(Xmark, { className: '-top-px block size-5 scale-75 rotate-90 fill-white stroke-white stroke-1 transition-transform duration-300 ease-in-out group-hover/button:rotate-0' })] }) }) }), jsxRuntime.jsxs(react.DialogPanel, { ref: dialogPanelRef, transition: true, className: twMerge('fixed left-1/2 -translate-x-1/2 overflow-y-scroll bg-neutral-50 p-4 shadow-[0_-15px_50px_-12px] shadow-neutral-950/25 transition-[transform_translate_opacity] duration-750 ease-exponential data-closed:scale-50 data-closed:opacity-0 sm:w-[calc(100vw-2rem)] sm:max-w-fit sm:p-6 sm:shadow-2xl lg:p-8 dark:bg-neutral-900', place === 'center'
                             ? 'top-1/2 -translate-y-1/2 rounded-2xl data-enter:translate-y-[calc(-50%+12rem)] data-leave:translate-y-[calc(-50%-8rem)]'
                             : 'bottom-0 h-fit max-h-[calc(100dvh-4rem)] translate-y-0 rounded-t-4xl data-enter:translate-y-full data-leave:translate-y-full sm:top-1/2 sm:bottom-auto sm:rounded-t-2xl sm:rounded-b-2xl sm:data-enter:translate-y-[calc(-50%+12rem)] sm:data-leave:translate-y-[calc(-50%-8rem)] sm:data-open:-translate-y-1/2 pointer-fine:top-1/2 pointer-fine:bottom-auto pointer-fine:-translate-y-1/2 pointer-fine:rounded-2xl', className), children: [jsxRuntime.jsx("button", { onTouchStart: enableTouchClose, onMouseDown: enableMouseClose, className: [
                                     'absolute inset-x-0 top-0 z-10 flex h-6 cursor-grab items-center justify-center after:h-1 after:w-8 after:rounded-full after:transition-[transform_background-color] after:duration-500 after:ease-exponential active:cursor-grabbing',
@@ -3752,6 +4254,266 @@ function Time({ children, dateObject, dateTime, day, hours, milliseconds, minute
     return (jsxRuntime.jsx("time", { dateTime: dateAndTime, ref: ref, ...props, children: dateDisplay }));
 }
 
+const MAX_PROGRESS = 100;
+function Video({ autoPlay, className, controls = true, poster, ref, srcSet, title, ...props }) {
+    const uniqueID = React.useId(), figureRef = React.useRef(null), videoPlayerRef = React.useRef(null), [isPlaying, setIsPlaying] = React.useState(autoPlay), isFullscreenRef = React.useRef(false), [isFullscreen, setIsFullscreen] = React.useState(false), [progress, setProgress] = React.useState(0), [showControls, setShowControls] = React.useState(true), pressedKeyListRef = React.useRef([]), [pressedKeyList, setPressedKeyList] = React.useState([]), [volume, setVolume] = React.useState(1);
+    const [seekIndicator, setSeekIndicator] = React.useState({ isInPlayedArea: false, position: 0 });
+    const sortedSrcSet = srcSet.sort((a, b) => a.width - b.width);
+    const primaryPoster = poster ? poster.find(({ primary }) => primary)?.src || poster[0].src : '';
+    const updateFullscreenState = React.useCallback(() => {
+        if (Boolean(document.fullscreenElement) !== isFullscreenRef.current) {
+            setIsFullscreen(Boolean(document.fullscreenElement));
+            isFullscreenRef.current = Boolean(document.fullscreenElement);
+        }
+    }, []);
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        document.addEventListener('fullscreenchange', updateFullscreenState);
+        return () => {
+            document.removeEventListener('fullscreenchange', updateFullscreenState);
+        };
+    }, []);
+    const handleTimeUpdate = () => {
+        if (videoPlayerRef.current) {
+            const newProgress = (videoPlayerRef.current.currentTime / videoPlayerRef.current.duration) * 100;
+            setProgress(prev => (Math.abs(prev - newProgress) > 0.1 ? newProgress : prev));
+        }
+    };
+    const togglePlay = React.useCallback(() => setIsPlaying(previous => {
+        if (!previous)
+            videoPlayerRef.current?.play();
+        if (previous)
+            videoPlayerRef.current?.pause();
+        return !previous;
+    }), []);
+    const toggleFullscreen = () => {
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+            return;
+        }
+        figureRef.current?.requestFullscreen();
+    };
+    const requestFullscreen = React.useCallback(() => {
+        if (document.fullscreenElement)
+            return;
+        figureRef.current?.requestFullscreen();
+    }, []);
+    const enterPictureInPicture = () => videoPlayerRef.current?.requestPictureInPicture();
+    const [skipDuration, setSkipDuration] = React.useState(10);
+    const getSkipAmount = () => {
+        const modifierKeyList = pressedKeyListRef.current;
+        let skipAmount = 10;
+        if (modifierKeyList.includes('alt')) {
+            if (modifierKeyList.length === 1)
+                skipAmount = 15;
+            if (modifierKeyList.includes('shift'))
+                skipAmount = 30;
+            if (modifierKeyList.includes('meta'))
+                skipAmount = 5;
+            if (modifierKeyList.includes('shift') && modifierKeyList.includes('meta'))
+                skipAmount = 60;
+            if (modifierKeyList.includes('shift') && modifierKeyList.includes('meta') && modifierKeyList.includes('ctrl'))
+                skipAmount = 90;
+        }
+        if (skipAmount !== skipDuration)
+            setSkipDuration(skipAmount);
+        return skipAmount;
+    };
+    const skipBack = React.useCallback(() => {
+        if (!videoPlayerRef.current)
+            return;
+        const { currentTime } = videoPlayerRef.current;
+        const skipAmount = getSkipAmount();
+        videoPlayerRef.current.fastSeek(Math.max(currentTime - skipAmount, 0));
+    }, []);
+    const skipForward = React.useCallback(() => {
+        if (!videoPlayerRef.current)
+            return;
+        const { currentTime, duration } = videoPlayerRef.current;
+        const skipAmount = getSkipAmount();
+        videoPlayerRef.current.fastSeek(Math.min(currentTime + skipAmount, duration - 1));
+    }, []);
+    const updateModifierKeys = React.useCallback(({ metaKey, altKey, shiftKey, ctrlKey, }) => {
+        if ((metaKey && !pressedKeyListRef.current.includes('meta')) ||
+            (altKey && !pressedKeyListRef.current.includes('alt')) ||
+            (shiftKey && !pressedKeyListRef.current.includes('shift')) ||
+            (ctrlKey && !pressedKeyListRef.current.includes('ctrl')) ||
+            (!metaKey && pressedKeyListRef.current.includes('meta')) ||
+            (!altKey && pressedKeyListRef.current.includes('alt')) ||
+            (!shiftKey && pressedKeyListRef.current.includes('shift')) ||
+            (!ctrlKey && pressedKeyListRef.current.includes('ctrl'))) {
+            const newPressedKeyList = [];
+            if (metaKey)
+                newPressedKeyList.push('meta');
+            if (altKey)
+                newPressedKeyList.push('alt');
+            if (shiftKey)
+                newPressedKeyList.push('shift');
+            if (ctrlKey)
+                newPressedKeyList.push('ctrl');
+            setPressedKeyList(newPressedKeyList);
+            pressedKeyListRef.current = newPressedKeyList;
+            getSkipAmount();
+        }
+    }, []);
+    const preventContextMenu = e => e.preventDefault();
+    const handleKeydown = React.useCallback((e) => {
+        const { key, metaKey, altKey, shiftKey, ctrlKey } = e;
+        updateModifierKeys({ metaKey, altKey, shiftKey, ctrlKey });
+        if (![' ', 'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'f'].includes(key))
+            return;
+        if ([' ', 'ArrowUp', 'ArrowDown', 'f'].includes(key) && !metaKey && !altKey && !shiftKey && !ctrlKey)
+            e.preventDefault();
+        switch (key) {
+            case ' ':
+                togglePlay();
+                break;
+            case 'ArrowRight':
+                skipForward();
+                break;
+            case 'ArrowLeft':
+                skipBack();
+                break;
+            case 'ArrowUp':
+                // Volume up
+                break;
+            case 'ArrowDown':
+                // Volume down
+                break;
+            case 'f':
+                requestFullscreen();
+                break;
+        }
+    }, [togglePlay, skipForward, updateModifierKeys]);
+    const handleKeyup = React.useCallback((e) => {
+        const { metaKey, altKey, shiftKey, ctrlKey } = e;
+        updateModifierKeys({ metaKey, altKey, shiftKey, ctrlKey });
+    }, [updateModifierKeys]);
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        document.addEventListener('keydown', handleKeydown);
+        document.addEventListener('keyup', handleKeyup);
+        return () => {
+            document.removeEventListener('keydown', handleKeydown);
+            document.removeEventListener('keyup', handleKeyup);
+        };
+    }, [handleKeydown, handleKeyup]);
+    const handleRemotePlayback = () => videoPlayerRef.current?.remote.prompt();
+    const handleSeekIndicatorMovement = e => {
+        if (!videoPlayerRef.current)
+            return;
+        const { currentTime, duration } = videoPlayerRef.current;
+        const { clientX, currentTarget } = e, { width, x } = currentTarget.getBoundingClientRect();
+        const position = clientX - x;
+        const isInPlayedArea = position <= width / (duration / currentTime);
+        setSeekIndicator({ isInPlayedArea, position });
+    };
+    const seekIndicatorMouseDownPositionRef = React.useRef(0);
+    const initializeSeeking = () => (seekIndicatorMouseDownPositionRef.current = seekIndicator.position);
+    const handleSeekRelease = e => {
+        if (!videoPlayerRef.current)
+            return;
+        const { duration } = videoPlayerRef.current, { currentTarget } = e, { width } = currentTarget.getBoundingClientRect();
+        if (seekIndicatorMouseDownPositionRef.current === seekIndicator.position)
+            videoPlayerRef.current.fastSeek(Math.min(duration / (width / seekIndicatorMouseDownPositionRef.current), duration - 1));
+    };
+    const mouseMoveTimeoutRef = React.useRef(undefined);
+    const displayControls = () => {
+        if (!showControls)
+            setShowControls(true);
+    };
+    const hideControls = () => {
+        if (!videoPlayerRef.current?.paused)
+            setShowControls(false);
+    };
+    const handleMouseMoveControls = () => {
+        clearTimeout(mouseMoveTimeoutRef.current);
+        displayControls();
+        mouseMoveTimeoutRef.current = setTimeout(() => hideControls(), 1500);
+    };
+    const clearMouseMoveControlsTimeout = () => clearTimeout(mouseMoveTimeoutRef.current);
+    const progressiveEnhancementSourceLengthRef = React.useRef(1);
+    const [progressiveEnhancementList, setProgressiveEnhancementList] = React.useState(sortedSrcSet.filter((_, index) => index < progressiveEnhancementSourceLengthRef.current));
+    const handleProEnhance = e => {
+        const { currentTarget } = e, { currentSrc, currentTime } = currentTarget;
+        console.log('current:', currentSrc);
+        const proEnhanceSrcLength = progressiveEnhancementSourceLengthRef.current + 1, updatedProEnhanceList = sortedSrcSet.filter((_, index) => index < proEnhanceSrcLength);
+        console.log(updatedProEnhanceList);
+        setProgressiveEnhancementList(updatedProEnhanceList);
+        progressiveEnhancementSourceLengthRef.current = proEnhanceSrcLength;
+        const srcToCompare = typeof updatedProEnhanceList[-1].src === 'string'
+            ? updatedProEnhanceList[-1].src
+            : updatedProEnhanceList[-1].srcGroup;
+        if (!srcToCompare)
+            return;
+        if ((Array.isArray(srcToCompare) && srcToCompare.every(({ src }) => src !== currentSrc)) ||
+            (!Array.isArray(srcToCompare) && srcToCompare !== currentSrc)) {
+            const srcType = currentSrc.split('.')[-1];
+            const src = Array.isArray(srcToCompare)
+                ? srcToCompare.find(({ src }) => src.split('.')[-1] === srcType)?.src || srcToCompare[0].src
+                : srcToCompare;
+            if (!src)
+                return;
+            console.log('updated:', src);
+            currentTarget.src = src;
+            currentTarget.currentTime = currentTime || 0;
+            currentTarget.load();
+        }
+    };
+    const captureCurrentFrame = () => {
+        if (!videoPlayerRef.current)
+            return;
+        const { videoHeight, videoWidth } = videoPlayerRef.current;
+        const canvas = document.createElement('canvas'), canvasContext = canvas.getContext('2d');
+        if (!canvasContext)
+            return;
+        canvas.width = videoWidth;
+        canvas.height = videoHeight;
+        canvasContext.drawImage(videoPlayerRef.current, 0, 0, canvas.width, canvas.height);
+        canvas.toBlob(blob => {
+            if (!blob)
+                return;
+            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);
+    };
+    const increaseVolume = () => {
+        if (!videoPlayerRef.current)
+            return;
+        videoPlayerRef.current.volume += 0.1;
+        setVolume(videoPlayerRef.current.volume);
+    };
+    const decreaseVolume = () => {
+        if (!videoPlayerRef.current)
+            return;
+        videoPlayerRef.current.volume -= 0.1;
+        setVolume(videoPlayerRef.current.volume);
+    };
+    return (jsxRuntime.jsxs("figure", { ...(showControls ? { 'data-controls': true } : {}), ...(isFullscreen ? { 'data-fullscreen': true } : {}), ...(isPlaying ? { 'data-playing': true } : {}), ...Object.fromEntries(pressedKeyList.map(key => [`data-${key}`, true])), className: twMerge('group/video isolate aspect-video w-full overflow-clip', className), onMouseEnter: displayControls, onMouseLeave: hideControls, ref: figureRef, children: [jsxRuntime.jsx("video", { ...props, className: 'size-full object-cover', onLoad: handleProEnhance, onLoadedMetadata: handleProEnhance, onTimeUpdate: handleTimeUpdate, poster: primaryPoster, ref: videoPlayerRef || ref, title: title, children: progressiveEnhancementList.map(({ width, ...source }) => {
+                    if (source.srcGroup) {
+                        const { srcGroup } = source;
+                        return srcGroup.map(({ src, type }) => (jsxRuntime.jsx("source", { src: src, type: type }, `${title}${type}${width}${uniqueID}`)));
+                    }
+                    const { src, type } = source;
+                    return jsxRuntime.jsx("source", { src: src, type: type }, `${title}${type}${width}${uniqueID}`);
+                }) }), controls && (jsxRuntime.jsxs("div", { className: 'absolute inset-0 isolate text-neutral-50 opacity-0 transition-opacity duration-1000 ease-exponential group-data-controls/video:opacity-100', children: [jsxRuntime.jsxs("div", { className: 'grid-flow-cols absolute top-1/2 left-1/2 grid -translate-x-1/2 -translate-y-1/2 place-items-center gap-2', children: [jsxRuntime.jsxs("button", { className: 'col-start-1 col-end-2 row-start-0 row-end-1 grid size-16 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125', onClick: togglePlay, onContextMenu: preventContextMenu, title: isPlaying ? 'Pause' : 'Play', children: [jsxRuntime.jsx(PauseFill, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-0 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-playing/video:scale-60 group-data-playing/video:opacity-100' }), jsxRuntime.jsx(PlayFill, { className: '-right-0.5 col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-playing/video:scale-0 group-data-playing/video:opacity-0' })] }), jsxRuntime.jsxs("button", { className: 'col-start-0 col-end-1 row-start-0 row-end-1 grid size-12 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125', onClick: skipBack, onContextMenu: preventContextMenu, title: `Skip Back ${skipDuration} Seconds`, children: [jsxRuntime.jsx(FiveArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-meta/video:group-data-ctrl/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsxRuntime.jsx(TenArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-0 group-data-alt/video:group-data-ctrl/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsxRuntime.jsx(FifteenArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-100 group-data-ctrl/video:opacity-0 group-data-meta/video:opacity-0 group-data-shift/video:opacity-0' }), jsxRuntime.jsx(ThirtyArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:opacity-100 group-data-alt/video:group-data-ctrl/video:group-data-shift/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsxRuntime.jsx(SixtyArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsxRuntime.jsx(NinetyArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-100' })] }), jsxRuntime.jsxs("button", { className: 'col-start-2 col-end-3 row-start-0 row-end-1 grid size-12 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125', onClick: skipForward, onContextMenu: preventContextMenu, title: `Skip Forward ${skipDuration} Seconds`, children: [jsxRuntime.jsx(FiveArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-meta/video:group-data-ctrl/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsxRuntime.jsx(TenArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-0 group-data-alt/video:group-data-ctrl/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsxRuntime.jsx(FifteenArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-100 group-data-ctrl/video:opacity-0 group-data-meta/video:opacity-0 group-data-shift/video:opacity-0' }), jsxRuntime.jsx(ThirtyArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:opacity-100 group-data-alt/video:group-data-ctrl/video:group-data-shift/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsxRuntime.jsx(SixtyArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsxRuntime.jsx(NinetyArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-100' })] })] }), jsxRuntime.jsxs("div", { className: 'absolute inset-x-2 bottom-2 flex items-center gap-2 rounded-xl bg-neutral-900/50 px-2 py-1 shadow-2xl backdrop-blur-xs backdrop-brightness-110', children: [jsxRuntime.jsxs("div", { className: 'group/scrubber h-2 w-max flex-grow cursor-grab overflow-clip rounded-md bg-neutral-50/50 backdrop-blur-xs backdrop-brightness-110 transition-[height] duration-300 ease-exponential active:h-4 pointer-fine:hover:h-4 pointer-fine:active:h-4', onMouseDown: initializeSeeking, onMouseMove: handleSeekIndicatorMovement, onMouseUp: handleSeekRelease, children: [jsxRuntime.jsx("div", { "aria-hidden": 'true', className: 'absolute inset-0 grid transition-cols duration-100 ease-linear', style: { gridTemplateColumns: `${progress / MAX_PROGRESS}fr` }, children: jsxRuntime.jsx("div", { className: 'overflow-hidden', children: jsxRuntime.jsxs("div", { className: 'h-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125', children: [progress, "/", MAX_PROGRESS] }) }) }), jsxRuntime.jsx("div", { ...(seekIndicator.isInPlayedArea ? { 'data-in-played-area': true } : {}), "aria-hidden": 'true', className: 'absolute inset-y-0 w-1 cursor-grab bg-neutral-50 opacity-0 transition-opacity duration-300 ease-exponential group-hover/scrubber:opacity-100 data-in-played-area:bg-neutral-500 pointer-coarse:hidden', style: { transform: `translateX(${seekIndicator.position}px)` }, children: "\u00A0" }), jsxRuntime.jsx("progress", { className: 'sr-only', max: MAX_PROGRESS, value: progress })] }), jsxRuntime.jsxs(DropDown, { children: [jsxRuntime.jsx(DropDownButton, { arrow: false, className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', title: 'Volume', children: jsxRuntime.jsx(SpeakerWave3Fill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxRuntime.jsxs(DropDownItems, { anchor: {
+                                            gap: '.5rem',
+                                            padding: '.375rem',
+                                            to: 'top',
+                                        }, className: 'bg-neutral-900/50 px-1.5 py-1.5 text-neutral-50 backdrop-blur-xs backdrop-brightness-110', static: true, children: [jsxRuntime.jsx(DropDownItem, { as: 'button', className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: increaseVolume, title: 'Increase volume', children: jsxRuntime.jsx(SpeakerPlusFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxRuntime.jsx(DropDownSeparator, { 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', children: jsxRuntime.jsx("div", { className: 'grid size-full rotate-180 transition-rows duration-300 ease-exponential', style: { gridTemplateRows: `${volume}fr` }, children: jsxRuntime.jsx("div", { className: 'overflow-y-hidden', children: jsxRuntime.jsxs("div", { className: 'size-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125', children: [volume * 100, "%"] }) }) }) }), jsxRuntime.jsx(DropDownItem, { as: 'button', className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: decreaseVolume, title: 'Decrease volume', children: jsxRuntime.jsx(SpeakerMinusFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) })] })] }), jsxRuntime.jsx("button", { className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: enterPictureInPicture, title: 'Enter Picture-in-Picture', children: jsxRuntime.jsx(RectangleFillOnArrowDownForwardTopleadingRectangle, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxRuntime.jsx("button", { className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: handleRemotePlayback, title: 'Remote Playback', children: jsxRuntime.jsx(RectangleTriangleUp, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxRuntime.jsxs(DropDown, { children: [jsxRuntime.jsx(DropDownButton, { arrow: false, className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', title: 'Other Settings', children: jsxRuntime.jsx(GearshapeFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxRuntime.jsx(DropDownItems, { anchor: {
+                                            gap: '.5rem',
+                                            padding: '.375rem',
+                                            to: 'top end',
+                                        }, className: 'bg-neutral-900/50 px-1.5 py-1.5 text-neutral-50 backdrop-blur-xs backdrop-brightness-110', children: jsxRuntime.jsxs(DropDownItem, { as: 'button', className: 'flex items-center gap-2 rounded-lg px-1.5 py-0.5 text-sm drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-[scale,background-color,color] duration-300 ease-exponential active:scale-95 data-active:bg-neutral-50/90 data-active:text-neutral-950 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: captureCurrentFrame, children: [jsxRuntime.jsx(PhotoBadgeArrowDownFill, { className: 'size-5' }), "Capture Current Frame"] }) })] }), jsxRuntime.jsxs("button", { className: 'grid size-6 rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: toggleFullscreen, title: `${isFullscreen ? 'Exit' : 'Enter'} Fullscreen`, children: [jsxRuntime.jsx(ArrowUpForwardAndArrowDownBackwardRectangle, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-0 opacity-0 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-fullscreen/video:scale-80 group-data-fullscreen/video:opacity-100' }), jsxRuntime.jsx(ArrowDownBackwardAndArrowUpForwardRectangle, { className: '-right-0.5 col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-fullscreen/video:scale-0 group-data-fullscreen/video:opacity-0' })] })] }), jsxRuntime.jsx("div", { "aria-hidden": 'true', className: 'absolute inset-0 -z-10 text-[1px] text-transparent', onClick: togglePlay, onMouseMove: handleMouseMoveControls, onMouseLeave: clearMouseMoveControlsTimeout, children: isPlaying ? 'Pause' : 'Play' })] }))] }));
+}
+
 exports.Anchor = Anchor;
 exports.Button = Button;
 exports.Details = Details;
@@ -3767,10 +4529,13 @@ exports.Fieldset = Fieldset;
 exports.Form = Form;
 exports.Ghost = Ghost;
 exports.Heading = Heading;
+exports.IFrame = IFrame;
 exports.Input = Input;
 exports.Link = Link;
 exports.Modal = Modal;
+exports.ModalClose = ModalClose;
 exports.ModalDialog = ModalDialog;
+exports.ModalTitle = ModalTitle;
 exports.ModalTrigger = ModalTrigger;
 exports.SubmitButton = SubmitButton;
 exports.Textarea = Textarea;
@@ -3778,6 +4543,7 @@ exports.Time = Time;
 exports.Tooltip = Tooltip;
 exports.TooltipPanel = TooltipPanel;
 exports.TooltipTrigger = TooltipTrigger;
+exports.Video = Video;
 exports.createButton = createButton;
 exports.createLink = createLink;
 //# sourceMappingURL=components.js.map