mado-ui 0.1.2 → 0.2.1

package/dist/index.esm.js

@@ -1,189 +1,9 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { extendTailwindMerge, twJoin } from 'tailwind-merge';
 import { Children, isValidElement, Fragment, createContext, useContext, useSyncExternalStore, useRef, Suspense, useId, useEffect, useState, cloneElement } from 'react';
-import { Button as Button$1, Field, Label, Input as Input$1, Description, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
+import { Button as Button$1, Field, Label, Input as Input$1, Description, Textarea as Textarea$1, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
 import { createPortal } from 'react-dom';
 
-/**
- * ### Has Class
- * - Returns a boolean based on whether the specified element has the specified class
- * @param {HTMLElement} element Any HTML Element
- * @param {string} className A string of any class to check for
- * @returns {boolean} true if the specified element has the specified class, else false
- */
-function hasClass(element, className) {
-    return element.classList.contains(className);
-}
-/**
- * ### Add Class
- * - Adds the specified classes to the specified elements
- * @param {Element|HTMLElement|HTMLElement[]|NodeList|string|undefined} elements An HTML Element, an array of HTML Elements, a Node List, a string (as a selector for a querySelector)
- * @param {string|string[]} classList A string or an array of classes to add to each element
- */
-function addClass(elements, classList) {
-    const elementsType = elements.constructor.name, elementsIsString = typeof elements === 'string', classListType = classList.constructor.name, classListIsString = typeof classList === 'string';
-    let elementList, classListGroup;
-    // & Convert elements to array
-    switch (elementsType) {
-        // Selector
-        case 'String':
-            if (elementsIsString)
-                elementList = Array.from(document.querySelectorAll(elements));
-            break;
-        // Multiple HTML Elements
-        case 'NodeList':
-            if (!elementsIsString)
-                elementList = Array.from(elements);
-            break;
-        // Array of Elements
-        case 'Array':
-            if (!elementsIsString)
-                elementList = elements;
-            break;
-        // Single HTML Element
-        default:
-            if (elementsType.startsWith('HTML') && !elementsIsString)
-                elementList = [elements];
-    }
-    // & Convert classList to array
-    switch (classListType) {
-        case 'String':
-            if (classListIsString)
-                if (classList.split(' ').length >= 2) {
-                    classListGroup = classList.split(' ');
-                }
-                else {
-                    classListGroup = [classList];
-                }
-            break;
-        case 'Array':
-            if (!classListIsString)
-                classListGroup = classList;
-            break;
-    }
-    if (!elementList || elementList.length < 1)
-        throw new Error(`Elements are invalid or undefined. elements: ${elements} → elementList: ${elementList}`);
-    if (!classListGroup || classListGroup.length < 1)
-        throw new Error(`Class List is invalid or undefined. classList: ${classList} → classListGroup: ${classListGroup}`);
-    elementList.forEach((element) => classListGroup.forEach((classItem) => {
-        if (hasClass(element, classItem))
-            return;
-        element.classList.add(classItem);
-    }));
-}
-/**
- * ### Remove Class
- * - Removes the specified classes from the specified elements
- * @param {HTMLElement|HTMLElement[]|NodeList|string|undefined} elements An HTML Element, an array of HTML Elements, a Node List, a string (as a selector for a querySelector)
- * @param {string|string[]} classList A string or an array of classes to remove from each element
- */
-function removeClass(elements, classList) {
-    const elementsType = elements.constructor.name, elementsIsString = typeof elements === 'string', classListType = classList.constructor.name, classListIsString = typeof classList === 'string';
-    let elementList, classListGroup;
-    // & Convert elements to array
-    switch (elementsType) {
-        // Selector
-        case 'String':
-            if (elementsIsString)
-                elementList = Array.from(document.querySelectorAll(elements));
-            break;
-        // Multiple HTML Elements
-        case 'NodeList':
-            if (!elementsIsString)
-                elementList = Array.from(elements);
-            break;
-        // Array of Elements
-        case 'Array':
-            if (!elementsIsString)
-                elementList = elements;
-            break;
-        // Single HTML Element
-        default:
-            if (elementsType.startsWith('HTML') && !elementsIsString)
-                elementList = [elements];
-    }
-    // & Convert classList to array
-    switch (classListType) {
-        case 'String':
-            if (classListIsString)
-                if (classList.split(' ').length >= 2) {
-                    classListGroup = classList.split(' ');
-                }
-                else {
-                    classListGroup = [classList];
-                }
-            break;
-        case 'Array':
-            if (!classListIsString)
-                classListGroup = classList;
-            break;
-    }
-    if (!elementList || elementList.length < 1)
-        throw new Error(`Elements are invalid or undefined. elements: ${elements} → elementList: ${elementList}`);
-    if (!classListGroup || classListGroup.length < 1)
-        throw new Error(`Class List is invalid or undefined. classList: ${classList} → classListGroup: ${classListGroup}`);
-    elementList.forEach((element) => classListGroup.forEach((classItem) => {
-        if (!hasClass(element, classItem))
-            return;
-        element.classList.remove(classItem);
-    }));
-}
-/**
- * ### Toggle Class
- * - Toggles the specified classes on the specified elements
- * @param {HTMLElement|HTMLElement[]|NodeList|string|undefined} elements An HTML Element, an array of HTML Elements, a Node List, a string (as a selector for a querySelector)
- * @param {string|string[]} classList A string or an array of classes to toggle on each element
- */
-function toggleClass(elements, classList) {
-    const elementsType = elements.constructor.name, elementsIsString = typeof elements === 'string', classListType = classList.constructor.name, classListIsString = typeof classList === 'string';
-    let elementList, classListGroup;
-    // & Convert elements to array
-    switch (elementsType) {
-        // Selector
-        case 'String':
-            if (elementsIsString)
-                elementList = Array.from(document.querySelectorAll(elements));
-            break;
-        // Multiple HTML Elements
-        case 'NodeList':
-            if (!elementsIsString)
-                elementList = Array.from(elements);
-            break;
-        // Array of Elements
-        case 'Array':
-            if (!elementsIsString)
-                elementList = elements;
-            break;
-        // Single HTML Element
-        default:
-            if (elementsType.startsWith('HTML') && !elementsIsString)
-                elementList = [elements];
-    }
-    // & Convert classList to array
-    switch (classListType) {
-        case 'String':
-            if (classListIsString)
-                if (classList.split(' ').length >= 2) {
-                    classListGroup = classList.split(' ');
-                }
-                else {
-                    classListGroup = [classList];
-                }
-            break;
-        case 'Array':
-            if (!classListIsString)
-                classListGroup = classList;
-            break;
-    }
-    if (!elementList || elementList.length < 1)
-        throw new Error(`Elements are invalid or undefined. elements: ${elements} → elementList: ${elementList}`);
-    if (!classListGroup || classListGroup.length < 1)
-        throw new Error(`Class List is invalid or undefined. classList: ${classList} → classListGroup: ${classListGroup}`);
-    elementList.forEach((element) => classListGroup.forEach((classItem) => {
-        element.classList.toggle(classItem);
-    }));
-}
-
 const integerList = Array.from({ length: 100 }, (_, i) => `${i + 1}`);
 const twMerge = extendTailwindMerge({
     extend: {
@@ -260,105 +80,13 @@ const twMerge = extendTailwindMerge({
         },
     },
 });
-function extendMadoTailwindMerge(configExtension) {
-    const extend = configExtension.extend || {};
-    const theme = extend.theme || {};
-    const color = 'color' in theme ? theme.color : [];
-    const classGroups = extend.classGroups || {};
-    const themeRest = { ...theme };
-    if ('color' in themeRest)
-        delete themeRest.color;
-    const extendRest = { ...extend };
-    delete extendRest.theme;
-    delete extendRest.classGroups;
-    return extendTailwindMerge({
-        extend: {
-            theme: {
-                color: [
-                    {
-                        ui: [
-                            'red',
-                            'orange',
-                            'yellow',
-                            'green',
-                            'sky-blue',
-                            'blue',
-                            'violet',
-                            'magenta',
-                            'purple',
-                            'brown',
-                            'grey',
-                            'pink',
-                        ],
-                    },
-                    ...color,
-                ],
-                ...themeRest,
-            },
-            classGroups: {
-                animate: [
-                    {
-                        animate: [
-                            'bounce',
-                            'double-spin',
-                            'drop-in',
-                            'flip',
-                            'flip-again',
-                            'grid-rows',
-                            'heartbeat',
-                            'ping',
-                            'pulse',
-                            'slide-up',
-                            'spin',
-                            'wave',
-                        ],
-                    },
-                ],
-                'animation-direction': [
-                    {
-                        'animation-direction': ['normal', 'reverse', 'alternate', 'alternate-reverse'],
-                    },
-                ],
-                'animation-fill': [
-                    {
-                        'animation-fill': ['none', 'forwards', 'backwards', 'both'],
-                    },
-                ],
-                'animation-iteration': [
-                    {
-                        'animation-iteration': [...integerList, 'infinite'],
-                    },
-                ],
-                'animation-state': [
-                    {
-                        'animation-state': ['running', 'paused'],
-                    },
-                ],
-                'grid-cols': [
-                    {
-                        'grid-cols': ['0fr', '1fr'],
-                    },
-                ],
-                'grid-rows': [
-                    {
-                        'grid-rows': ['0fr', '1fr'],
-                    },
-                ],
-                transition: ['transition-rows'],
-                ...classGroups,
-            },
-            ...extendRest,
-        },
-        ...configExtension,
-    });
-}
 
 /** The current date as a Date object */
 const d = new Date();
 /** The current minute of the current hour */
 const minutes = d.getMinutes();
 /** The current year */
-const year = d.getFullYear();
+d.getFullYear();
 /** An array of the names of month in order */
 const monthNamesList = [
     'January',
@@ -385,29 +113,9 @@ const weekdayNamesList = [
     'Saturday',
 ];
 /** The name of the current month */
-const currentMonthName = getMonthName();
+getMonthName();
 /** The name of the current day of the week */
-const currentWeekdayName = getWeekdayName();
-/**
- * ### Days In Month
- * - Returns the number of days in the specified month.
- * @param {Date} date A Date object representing the month to get the number of days for. (Preset to the current date)
- * @returns {number} The number of days in the specified month.
- */
-function daysInMonth(date = d) {
-    const selectedYear = date.getFullYear(), selectedMonth = date.getMonth() + 1;
-    return new Date(selectedYear, selectedMonth, 0).getDate();
-}
-/**
- * ### First of Month
- * - Returns the first day of the specified month.
- * @param {Date} date A Date object representing the month to get the first day for. (Preset to current date)
- * @returns {Date} A Date object of the given month, with the first day.
- */
-function firstOfMonth(date = d) {
-    // Return a new Date object with the first of the month selected
-    return new Date(date.getFullYear(), date.getMonth(), 1);
-}
+getWeekdayName();
 /**
  * ### Get Date
  * - Returns the date with two digits
@@ -436,32 +144,6 @@ function getHours(hours = d) {
         formattedHours = `0${formattedHours}`;
     return formattedHours;
 }
-/**
- * ### Get Hours in 12
- * - Returns the hour based on the specified 24 hour value in a 12 hour format
- * @param {number|Date} hour The hour to be converted to 12 hour format
- * @returns {number} The hour in a 12 hour format
- */
-function getHoursIn12(hour = d) {
-    if (typeof hour !== 'number')
-        hour = hour.getHours();
-    if (hour > 12)
-        return hour - 12;
-    return hour;
-}
-/**
- * ### Get Meridian from Hour
- * - Returns either 'pm' or 'am' based on the specified 24 hour value
- * @param {number|Date} hour The hour to get the meridian from
- * @returns {'am'|'pm'} The meridian for the given hour
- */
-function getMeridianFromHour(hour = d) {
-    if (typeof hour !== 'number')
-        hour = hour.getHours();
-    if (hour >= 12)
-        return 'pm';
-    return 'am';
-}
 /**
  * ### Get Milliseconds
  * - Returns the milliseconds with two digits
@@ -504,9 +186,6 @@ 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
@@ -518,28 +197,6 @@ function getMonthName(date = d) {
         return monthNamesList[date];
     return monthNamesList[date.getMonth()];
 }
-/**
- * ### Get Next Month
- * - Returns the number of the following month from the specified month
- * @param {Date} date The Date object representing the month to get the following month from (Preset to current date)
- * @returns {number} The indexed month of the following month
- */
-function getNextMonth(date = d) {
-    const givenMonth = date.getMonth(); // Get the month from date
-    // Return the indexed month. min 0, max 11
-    return givenMonth === 11 ? 0 : givenMonth + 1;
-}
-/**
- * ### Get Previous Month
- * - Returns the number of the previous month from the specified month
- * @param {Date} date The Date object representing the month to get the previous month from (Preset to current date)
- * @returns {number} The indexed month of the previous month
- */
-function getPreviousMonth(date = d) {
-    const givenMonth = date.getMonth(); // Get the month from date
-    // Return the indexed month. min 0, max 11
-    return givenMonth === 0 ? 11 : givenMonth - 1;
-}
 /**
  * ### Get Seconds
  * - Returns the seconds with two digits
@@ -554,31 +211,6 @@ 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, {
-        weekday: 'code',
-        year: !isSameYear,
-    });
-    return fullDateString;
-}
 /**
  * ### Get Weekday Name
  * - Returns the weekday name of the specified day
@@ -591,80 +223,6 @@ function getWeekdayName(weekday = d) {
     // Return the name of the day of the week
     return weekdayNamesList[weekday.getDay()];
 }
-/**
- * ### Get Years in Range
- * - Returns an array of years in between the specified minimum and maximum years
- * @param {number} minYear The minimum year
- * @param {number} maxYear The maximum year
- * @returns {number[]} Array of years
- */
-function getYearsInRange(minYear = 0, maxYear = year) {
-    const yearList = [];
-    for (let selectedYear = minYear; selectedYear <= maxYear; selectedYear++) {
-        yearList.push(selectedYear);
-    }
-    return yearList;
-}
-/**
- * ### 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 includesWeekday = options.weekday !== false, includesDay = options.day !== false, includesMonth = options.month !== false, includesYear = options.year !== false;
-        if (includesWeekday) {
-            if (options.weekday === 'code')
-                weekdayName = weekdayName.slice(0, 3);
-            if (includesMonth || includesDay || includesYear)
-                weekdayName += ', ';
-        }
-        else {
-            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;
-}
-/**
- * ### Get User Readable Date From Timestampz
- * - Returns a string of the current date in a user-friendly way
- * - Includes `'Yesterday'`, '`Today'`, and `'Tomorrow'`
- * @param string
- * @returns {'Today'|'Tomorrow'|'Yesterday'|string} `'weekday, month day, year'` | `'Yesterday'` | `'Today'` | `'Tomorrow'`
- */
-function getUserReadableDateFromTimestampz(timestampz) {
-    const [date, time] = timestampz.split('T') || [];
-    const [year, month, day] = date?.split('-').map(string => Number(string)) || [];
-    const timezoneIsAheadOfUTC = time?.includes('+');
-    const [hms, _timezone] = timezoneIsAheadOfUTC ? time?.split('+') : time?.split('-') || [];
-    const [hours, minutes, seconds] = hms?.split(':').map(string => Number(string)) || [];
-    // const [timezoneHours, timezoneMinutes] = timezone?.split(':').map(string => Number(string)) || []
-    const dateAndTime = new Date(year, month - 1, day, hours, minutes, seconds), userReadableDateAndTime = getUserReadableDate(dateAndTime);
-    return userReadableDateAndTime;
-}
 
 function findComponentByType(children, componentType) {
     const childrenArray = Children.toArray(children);
@@ -717,7 +275,7 @@ function isPhoneNumber(tel) {
  * @returns {string} string formatted (000) 000-0000
  */
 function formatPhoneNumber(string, countryCode) {
-    return (`${countryCode ? `+${countryCode} ` : ''}` +
+    return (`${`+${countryCode} ` }` +
         string
             .replace(/\D/g, '')
             .slice(-10)
@@ -767,15 +325,15 @@ function Anchor({ className, disabled, href, onClick, ref, target, rel, ...props
                 : 'prefetch' }));
 }
 // * Styles
-const baseClasses = twSort('ease-exponential isolate inline-block cursor-pointer duration-300 after:absolute after:left-1/2 after:-z-10 after:-translate-x-1/2 after:duration-500 active:scale-95 active:after:opacity-100');
-const lineStaticClasses = twJoin(baseClasses, 'after:border-1 whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border-current');
-const lineClasses = twJoin(lineStaticClasses, 'after:ease-exponential whitespace-nowrap transition-transform after:transition-transform');
+const baseClasses = twSort('isolate inline-block cursor-pointer duration-300 ease-exponential after:absolute after:left-1/2 after:-z-10 after:-translate-x-1/2 after:duration-500 active:scale-95 active:after:opacity-100');
+const lineStaticClasses = twJoin(baseClasses, 'whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border-1 after:border-current');
+const lineClasses = twJoin(lineStaticClasses, 'whitespace-nowrap transition-transform after:transition-transform after:ease-exponential');
 const scaleXClasses = 'after:scale-x-0 pointer-fine:hover:after:scale-x-100 active:after:scale-x-100';
 const scaleYClasses = 'after:scale-y-0 pointer-fine:hover:after:scale-y-100 active:after:scale-y-100';
 const lineNormalClasses = twJoin([
     lineClasses,
     scaleYClasses,
-    'pointer-fine:hover:after:translate-y-0 after:origin-bottom after:translate-y-0.5 active:after:translate-y-0',
+    'after:origin-bottom after:translate-y-0.5 active:after:translate-y-0 pointer-fine:hover:after:translate-y-0',
 ]);
 const lineLtrClasses = twJoin([lineClasses, scaleXClasses, 'after:origin-left']);
 const lineRtlClasses = twJoin([lineClasses, scaleXClasses, 'after:origin-right']);
@@ -783,160 +341,151 @@ const lineCenterClasses = twJoin([lineClasses, scaleXClasses]);
 const lineLiftClasses = twJoin([
     lineClasses,
     scaleYClasses,
-    'pointer-fine:hover:after:translate-y-0 pointer-fine:hover:after:scale-x-100 after:origin-bottom after:translate-y-1 after:scale-x-75 active:after:translate-y-0 active:after:scale-x-100',
+    'after:origin-bottom after:translate-y-1 after:scale-x-75 active:after:translate-y-0 active:after:scale-x-100 pointer-fine:hover:after:translate-y-0 pointer-fine:hover:after:scale-x-100',
 ]);
-const fillClasses = twJoin(baseClasses, 'after:ease-exponential pointer-fine:hover:text-zinc-50 whitespace-nowrap transition-[transform_color] after:top-1/2 after:h-[calc(100%+0.05rem)] after:w-[calc(100%+0.25rem)] after:-translate-y-1/2 after:rounded active:text-zinc-50');
+const fillClasses = twJoin(baseClasses, 'whitespace-nowrap transition-[transform_color] after:top-1/2 after:h-[calc(100%+0.05rem)] after:w-[calc(100%+0.25rem)] after:-translate-y-1/2 after:rounded after:ease-exponential active:text-zinc-50 pointer-fine:hover:text-zinc-50');
 // Define theme-specific fill color transition classes
 const getFillColorTransitionClasses = (theme = 'blue') => {
     switch (theme) {
         case 'brown':
-            return twJoin(fillClasses, 'after:bg-ui-brown contrast-more:after:bg-ui-brown after:transition-transform');
+            return twJoin(fillClasses, 'after:bg-ui-brown after:transition-transform contrast-more:after:bg-ui-brown');
         case 'green':
-            return twJoin(fillClasses, 'after:bg-ui-green contrast-more:after:bg-ui-green after:transition-transform');
+            return twJoin(fillClasses, 'after:bg-ui-green after:transition-transform contrast-more:after:bg-ui-green');
         case 'grey':
-            return twJoin(fillClasses, 'after:bg-ui-grey contrast-more:after:bg-ui-grey after:transition-transform');
+            return twJoin(fillClasses, 'after:bg-ui-grey after:transition-transform contrast-more:after:bg-ui-grey');
         case 'sky-blue':
-            return twJoin(fillClasses, 'after:bg-ui-sky-blue contrast-more:after:bg-ui-sky-blue after:transition-transform');
+            return twJoin(fillClasses, 'after:bg-ui-sky-blue after:transition-transform contrast-more:after:bg-ui-sky-blue');
         case 'magenta':
-            return twJoin(fillClasses, 'after:bg-ui-magenta contrast-more:after:bg-ui-magenta after:transition-transform');
+            return twJoin(fillClasses, 'after:bg-ui-magenta after:transition-transform contrast-more:after:bg-ui-magenta');
         case 'neutral':
             return twJoin(fillClasses, 'after:bg-zinc-700 after:transition-transform contrast-more:after:bg-zinc-700 dark:after:bg-zinc-300 dark:contrast-more:after:bg-zinc-300');
         case 'orange':
-            return twJoin(fillClasses, 'after:bg-ui-orange contrast-more:after:bg-ui-orange after:transition-transform');
+            return twJoin(fillClasses, 'after:bg-ui-orange after:transition-transform contrast-more:after:bg-ui-orange');
         case 'pink':
-            return twJoin(fillClasses, 'after:bg-ui-pink contrast-more:after:bg-ui-pink after:transition-transform');
-        case 'primary':
-            return twJoin(fillClasses, 'after:bg-primary-500 contrast-more:after:bg-primary-500 after:transition-transform');
+            return twJoin(fillClasses, 'after:bg-ui-pink after:transition-transform contrast-more:after:bg-ui-pink');
         case 'purple':
-            return twJoin(fillClasses, 'after:bg-ui-purple contrast-more:after:bg-ui-purple after:transition-transform');
+            return twJoin(fillClasses, 'after:bg-ui-purple after:transition-transform contrast-more:after:bg-ui-purple');
         case 'red':
-            return twJoin(fillClasses, 'after:bg-ui-red contrast-more:after:bg-ui-red after:transition-transform');
+            return twJoin(fillClasses, 'after:bg-ui-red after:transition-transform contrast-more:after:bg-ui-red');
         case 'violet':
-            return twJoin(fillClasses, 'after:bg-ui-violet contrast-more:after:bg-ui-violet after:transition-transform');
+            return twJoin(fillClasses, 'after:bg-ui-violet after:transition-transform contrast-more:after:bg-ui-violet');
         case 'yellow':
-            return twJoin(fillClasses, 'after:bg-ui-yellow contrast-more:after:bg-ui-yellow after:transition-transform');
+            return twJoin(fillClasses, 'after:bg-ui-yellow after:transition-transform contrast-more:after:bg-ui-yellow');
         case 'blue':
         default:
-            return twJoin(fillClasses, 'after:bg-ui-blue contrast-more:after:bg-ui-blue after:transition-transform');
+            return twJoin(fillClasses, 'after:bg-ui-blue after:transition-transform contrast-more:after:bg-ui-blue');
     }
 };
 // Define theme-specific fill center classes
 const getFillCenterClasses = (theme = 'blue') => {
     switch (theme) {
         case 'brown':
-            return twJoin(fillClasses, 'after:bg-ui-brown/0 active:after:bg-ui-brown pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-brown after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-brown/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-brown pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-brown');
         case 'green':
-            return twJoin(fillClasses, 'after:bg-ui-green/0 active:after:bg-ui-green pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-green after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-green/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-green pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-green');
         case 'grey':
-            return twJoin(fillClasses, 'after:bg-ui-grey/0 active:after:bg-ui-grey pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-grey after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-grey/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-grey pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-grey');
         case 'sky-blue':
-            return twJoin(fillClasses, 'after:bg-ui-sky-blue/0 active:after:bg-ui-sky-blue pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-sky-blue after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-sky-blue/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-sky-blue pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-sky-blue');
         case 'magenta':
-            return twJoin(fillClasses, 'after:bg-ui-magenta/0 active:after:bg-ui-magenta pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-magenta after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-magenta/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-magenta pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-magenta');
         case 'neutral':
-            return twJoin(fillClasses, 'pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-zinc-700 dark:pointer-fine:hover:after:bg-zinc-300 after:scale-x-50 after:scale-y-[0.25] after:bg-zinc-700/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-zinc-700 dark:after:bg-zinc-300/0 dark:active:after:bg-zinc-300');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-zinc-700/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-zinc-700 dark:after:bg-zinc-300/0 dark:active:after:bg-zinc-300 pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-zinc-700 dark:pointer-fine:hover:after:bg-zinc-300');
         case 'orange':
-            return twJoin(fillClasses, 'after:bg-ui-orange/0 active:after:bg-ui-orange pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-orange after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-orange/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-orange pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-orange');
         case 'pink':
-            return twJoin(fillClasses, 'after:bg-ui-pink/0 active:after:bg-ui-pink pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-pink after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
-        case 'primary':
-            return twJoin(fillClasses, 'after:bg-primary-500/0 active:after:bg-primary-500 pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-primary-500 after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-pink/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-pink pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-pink');
         case 'purple':
-            return twJoin(fillClasses, 'after:bg-ui-purple/0 active:after:bg-ui-purple pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-purple after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-purple/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-purple pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-purple');
         case 'red':
-            return twJoin(fillClasses, 'after:bg-ui-red/0 active:after:bg-ui-red pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-red after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-red/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-red pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-red');
         case 'violet':
-            return twJoin(fillClasses, 'after:bg-ui-violet/0 active:after:bg-ui-violet pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-violet after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-violet/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-violet pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-violet');
         case 'yellow':
-            return twJoin(fillClasses, 'after:bg-ui-yellow/0 active:after:bg-ui-yellow pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-yellow after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-yellow/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-yellow pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-yellow');
         case 'blue':
         default:
-            return twJoin(fillClasses, 'after:bg-ui-blue/0 active:after:bg-ui-blue pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-blue after:scale-x-50 after:scale-y-[0.25] after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100');
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-blue/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-blue pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-blue');
     }
 };
 const multilineBaseClasses = twSort('bg-linear-to-r from-current to-current bg-no-repeat active:scale-95');
 const multilineLineStaticClasses = 'underline';
-const multilineNormalClasses = twSort('pointer-fine:hover:underline underline-offset-1 active:underline');
-const multilineClasses = twJoin(multilineBaseClasses, 'ease-exponential duration-500');
+const multilineNormalClasses = twSort('underline-offset-1 active:underline pointer-fine:hover:underline');
+const multilineClasses = twJoin(multilineBaseClasses, 'duration-500 ease-exponential');
 const multilineLineClasses = twJoin(multilineClasses, 'bg-[position:0%_100%] px-px pb-px transition-[background-size]');
-const multilineXClasses = twJoin(multilineLineClasses, 'pointer-fine:hover:bg-[size:100%_2px] bg-[size:0%_2px] focus-visible:bg-[size:100%_2px] active:bg-[size:100%_2px]');
+const multilineXClasses = twJoin(multilineLineClasses, 'bg-[size:0%_2px] focus-visible:bg-[size:100%_2px] active:bg-[size:100%_2px] pointer-fine:hover:bg-[size:100%_2px]');
 const multilineLineRtlClasses = twJoin([multilineXClasses, 'bg-[position:100%_100%]']);
 const multilineLineCenterClasses = twJoin([multilineXClasses, 'bg-[position:50%_100%]']);
-const multilineLineLiftClasses = twJoin(multilineLineClasses, 'pointer-fine:hover:bg-[size:auto_2px] bg-[size:auto_0px] focus-visible:bg-[size:auto_2px] active:bg-[size:auto_2px]');
-const multilineFillBaseClasses = twJoin(multilineBaseClasses, 'py-0.75 pointer-fine:hover:text-zinc-50 rounded px-0.5 focus-visible:text-zinc-50 active:text-zinc-50');
-// Define theme-specific multiline fill color classes
+const multilineLineLiftClasses = twJoin(multilineLineClasses, 'bg-[size:auto_0px] focus-visible:bg-[size:auto_2px] active:bg-[size:auto_2px] pointer-fine:hover:bg-[size:auto_2px]');
+const multilineFillBaseClasses = twJoin(multilineBaseClasses, 'rounded px-0.5 py-0.75 focus-visible:text-zinc-50 active:text-zinc-50 pointer-fine:hover:text-zinc-50');
 const getMultilineFillColorClasses = (theme = 'blue') => {
     switch (theme) {
         case 'brown':
-            return twJoin(multilineFillBaseClasses, 'from-ui-brown to-ui-brown contrast-more:from-ui-brown contrast-more:to-ui-brown transition-[background-size_color]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-brown to-ui-brown transition-[background-size_color] contrast-more:from-ui-brown contrast-more:to-ui-brown');
         case 'green':
-            return twJoin(multilineFillBaseClasses, 'from-ui-green to-ui-green contrast-more:from-ui-green contrast-more:to-ui-green transition-[background-size_color]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-green to-ui-green transition-[background-size_color] contrast-more:from-ui-green contrast-more:to-ui-green');
         case 'grey':
-            return twJoin(multilineFillBaseClasses, 'from-ui-grey to-ui-grey contrast-more:from-ui-grey contrast-more:to-ui-grey transition-[background-size_color]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-grey to-ui-grey transition-[background-size_color] contrast-more:from-ui-grey contrast-more:to-ui-grey');
         case 'sky-blue':
-            return twJoin(multilineFillBaseClasses, 'from-ui-sky-blue to-ui-sky-blue contrast-more:from-ui-sky-blue contrast-more:to-ui-sky-blue transition-[background-size_color]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-sky-blue to-ui-sky-blue transition-[background-size_color] contrast-more:from-ui-sky-blue contrast-more:to-ui-sky-blue');
         case 'magenta':
-            return twJoin(multilineFillBaseClasses, 'from-ui-magenta to-ui-magenta contrast-more:from-ui-magenta contrast-more:to-ui-magenta transition-[background-size_color]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-magenta to-ui-magenta transition-[background-size_color] contrast-more:from-ui-magenta contrast-more:to-ui-magenta');
         case 'neutral':
             return twJoin(multilineFillBaseClasses, 'from-zinc-700 to-zinc-700 transition-[background-size_color] contrast-more:from-zinc-700 contrast-more:to-zinc-700 dark:from-zinc-300 dark:to-zinc-300 dark:contrast-more:from-zinc-300 dark:contrast-more:to-zinc-300');
         case 'orange':
-            return twJoin(multilineFillBaseClasses, 'from-ui-orange to-ui-orange contrast-more:from-ui-orange contrast-more:to-ui-orange transition-[background-size_color]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-orange to-ui-orange transition-[background-size_color] contrast-more:from-ui-orange contrast-more:to-ui-orange');
         case 'pink':
-            return twJoin(multilineFillBaseClasses, 'from-ui-pink to-ui-pink contrast-more:from-ui-pink contrast-more:to-ui-pink transition-[background-size_color]');
-        case 'primary':
-            return twJoin(multilineFillBaseClasses, 'from-primary-500 to-primary-500 contrast-more:from-primary-500 contrast-more:to-primary-500 transition-[background-size_color]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-pink to-ui-pink transition-[background-size_color] contrast-more:from-ui-pink contrast-more:to-ui-pink');
         case 'purple':
-            return twJoin(multilineFillBaseClasses, 'from-ui-purple to-ui-purple contrast-more:from-ui-purple contrast-more:to-ui-purple transition-[background-size_color]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-purple to-ui-purple transition-[background-size_color] contrast-more:from-ui-purple contrast-more:to-ui-purple');
         case 'red':
-            return twJoin(multilineFillBaseClasses, 'from-ui-red to-ui-red contrast-more:from-ui-red contrast-more:to-ui-red transition-[background-size_color]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-red to-ui-red transition-[background-size_color] contrast-more:from-ui-red contrast-more:to-ui-red');
         case 'violet':
-            return twJoin(multilineFillBaseClasses, 'from-ui-violet to-ui-violet contrast-more:from-ui-violet contrast-more:to-ui-violet transition-[background-size_color]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-violet to-ui-violet transition-[background-size_color] contrast-more:from-ui-violet contrast-more:to-ui-violet');
         case 'yellow':
-            return twJoin(multilineFillBaseClasses, 'from-ui-yellow to-ui-yellow contrast-more:from-ui-yellow contrast-more:to-ui-yellow transition-[background-size_color]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-yellow to-ui-yellow transition-[background-size_color] contrast-more:from-ui-yellow contrast-more:to-ui-yellow');
         case 'blue':
         default:
-            return twJoin(multilineFillBaseClasses, 'from-ui-blue to-ui-blue contrast-more:from-ui-blue contrast-more:to-ui-blue transition-[background-size_color]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-blue to-ui-blue transition-[background-size_color] contrast-more:from-ui-blue contrast-more:to-ui-blue');
     }
 };
 // Define theme-specific multiline fill classes
 const getMultilineFillClasses = (theme = 'blue') => {
     switch (theme) {
         case 'brown':
-            return twJoin(multilineFillBaseClasses, 'from-ui-brown/0 to-ui-brown/0 focus-visible:from-ui-brown focus-visible:to-ui-brown active:from-ui-brown active:to-ui-brown contrast-more:from-ui-brown/0 contrast-more:to-ui-brown/0 focus-visible:contrast-more:from-ui-brown focus-visible:contrast-more:to-ui-brown active:contrast-more:from-ui-brown active:contrast-more:to-ui-brown pointer-fine:hover:from-ui-brown pointer-fine:hover:to-ui-brown pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-brown pointer-fine:hover:contrast-more:to-ui-brown bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-brown/0 to-ui-brown/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-brown focus-visible:to-ui-brown focus-visible:bg-[size:100%_100%] active:from-ui-brown active:to-ui-brown active:bg-[size:100%_100%] contrast-more:from-ui-brown/0 contrast-more:to-ui-brown/0 focus-visible:contrast-more:from-ui-brown focus-visible:contrast-more:to-ui-brown active:contrast-more:from-ui-brown active:contrast-more:to-ui-brown pointer-fine:hover:from-ui-brown pointer-fine:hover:to-ui-brown pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-brown pointer-fine:hover:contrast-more:to-ui-brown');
         case 'green':
-            return twJoin(multilineFillBaseClasses, 'from-ui-green/0 to-ui-green/0 focus-visible:from-ui-green focus-visible:to-ui-green active:from-ui-green active:to-ui-green contrast-more:from-ui-green/0 contrast-more:to-ui-green/0 focus-visible:contrast-more:from-ui-green focus-visible:contrast-more:to-ui-green active:contrast-more:from-ui-green active:contrast-more:to-ui-green pointer-fine:hover:from-ui-green pointer-fine:hover:to-ui-green pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-green pointer-fine:hover:contrast-more:to-ui-green bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-green/0 to-ui-green/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-green focus-visible:to-ui-green focus-visible:bg-[size:100%_100%] active:from-ui-green active:to-ui-green active:bg-[size:100%_100%] contrast-more:from-ui-green/0 contrast-more:to-ui-green/0 focus-visible:contrast-more:from-ui-green focus-visible:contrast-more:to-ui-green active:contrast-more:from-ui-green active:contrast-more:to-ui-green pointer-fine:hover:from-ui-green pointer-fine:hover:to-ui-green pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-green pointer-fine:hover:contrast-more:to-ui-green');
         case 'grey':
-            return twJoin(multilineFillBaseClasses, 'from-ui-grey/0 to-ui-grey/0 focus-visible:from-ui-grey focus-visible:to-ui-grey active:from-ui-grey active:to-ui-grey contrast-more:from-ui-grey/0 contrast-more:to-ui-grey/0 focus-visible:contrast-more:from-ui-grey focus-visible:contrast-more:to-ui-grey active:contrast-more:from-ui-grey active:contrast-more:to-ui-grey pointer-fine:hover:from-ui-grey pointer-fine:hover:to-ui-grey pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-grey pointer-fine:hover:contrast-more:to-ui-grey bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-grey/0 to-ui-grey/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-grey focus-visible:to-ui-grey focus-visible:bg-[size:100%_100%] active:from-ui-grey active:to-ui-grey active:bg-[size:100%_100%] contrast-more:from-ui-grey/0 contrast-more:to-ui-grey/0 focus-visible:contrast-more:from-ui-grey focus-visible:contrast-more:to-ui-grey active:contrast-more:from-ui-grey active:contrast-more:to-ui-grey pointer-fine:hover:from-ui-grey pointer-fine:hover:to-ui-grey pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-grey pointer-fine:hover:contrast-more:to-ui-grey');
         case 'sky-blue':
-            return twJoin(multilineFillBaseClasses, 'from-ui-sky-blue/0 to-ui-sky-blue/0 focus-visible:from-ui-sky-blue focus-visible:to-ui-sky-blue active:from-ui-sky-blue active:to-ui-sky-blue contrast-more:from-ui-sky-blue/0 contrast-more:to-ui-sky-blue/0 focus-visible:contrast-more:from-ui-sky-blue focus-visible:contrast-more:to-ui-sky-blue active:contrast-more:from-ui-sky-blue active:contrast-more:to-ui-sky-blue pointer-fine:hover:from-ui-sky-blue pointer-fine:hover:to-ui-sky-blue pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-sky-blue pointer-fine:hover:contrast-more:to-ui-sky-blue bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-sky-blue/0 to-ui-sky-blue/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-sky-blue focus-visible:to-ui-sky-blue focus-visible:bg-[size:100%_100%] active:from-ui-sky-blue active:to-ui-sky-blue active:bg-[size:100%_100%] contrast-more:from-ui-sky-blue/0 contrast-more:to-ui-sky-blue/0 focus-visible:contrast-more:from-ui-sky-blue focus-visible:contrast-more:to-ui-sky-blue active:contrast-more:from-ui-sky-blue active:contrast-more:to-ui-sky-blue pointer-fine:hover:from-ui-sky-blue pointer-fine:hover:to-ui-sky-blue pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-sky-blue pointer-fine:hover:contrast-more:to-ui-sky-blue');
         case 'magenta':
-            return twJoin(multilineFillBaseClasses, 'from-ui-magenta/0 to-ui-magenta/0 focus-visible:from-ui-magenta focus-visible:to-ui-magenta active:from-ui-magenta active:to-ui-magenta contrast-more:from-ui-magenta/0 contrast-more:to-ui-magenta/0 focus-visible:contrast-more:from-ui-magenta focus-visible:contrast-more:to-ui-magenta active:contrast-more:from-ui-magenta active:contrast-more:to-ui-magenta pointer-fine:hover:from-ui-magenta pointer-fine:hover:to-ui-magenta pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-magenta pointer-fine:hover:contrast-more:to-ui-magenta bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-magenta/0 to-ui-magenta/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-magenta focus-visible:to-ui-magenta focus-visible:bg-[size:100%_100%] active:from-ui-magenta active:to-ui-magenta active:bg-[size:100%_100%] contrast-more:from-ui-magenta/0 contrast-more:to-ui-magenta/0 focus-visible:contrast-more:from-ui-magenta focus-visible:contrast-more:to-ui-magenta active:contrast-more:from-ui-magenta active:contrast-more:to-ui-magenta pointer-fine:hover:from-ui-magenta pointer-fine:hover:to-ui-magenta pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-magenta pointer-fine:hover:contrast-more:to-ui-magenta');
         case 'neutral':
-            return twJoin(multilineFillBaseClasses, 'pointer-fine:hover:from-zinc-700 pointer-fine:hover:to-zinc-700 pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-zinc-700 pointer-fine:hover:contrast-more:to-zinc-700 dark:pointer-fine:hover:from-zinc-300 dark:pointer-fine:hover:to-zinc-300 dark:pointer-fine:hover:contrast-more:from-zinc-300 dark:pointer-fine:hover:contrast-more:to-zinc-300 from-zinc-700/0 to-zinc-700/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-zinc-700 focus-visible:to-zinc-700 focus-visible:bg-[size:100%_100%] active:from-zinc-700 active:to-zinc-700 active:bg-[size:100%_100%] contrast-more:from-zinc-700/0 contrast-more:to-zinc-700/0 focus-visible:contrast-more:from-zinc-700 focus-visible:contrast-more:to-zinc-700 active:contrast-more:from-zinc-700 active:contrast-more:to-zinc-700 dark:from-zinc-300/0 dark:to-zinc-300/0 dark:focus-visible:from-zinc-300 dark:focus-visible:to-zinc-300 dark:active:from-zinc-300 dark:active:to-zinc-300 dark:contrast-more:from-zinc-300/0 dark:contrast-more:to-zinc-300/0 dark:focus-visible:contrast-more:from-zinc-300 dark:focus-visible:contrast-more:to-zinc-300 dark:active:contrast-more:from-zinc-300 dark:active:contrast-more:to-zinc-300');
+            return twJoin(multilineFillBaseClasses, 'from-zinc-700/0 to-zinc-700/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-zinc-700 focus-visible:to-zinc-700 focus-visible:bg-[size:100%_100%] active:from-zinc-700 active:to-zinc-700 active:bg-[size:100%_100%] contrast-more:from-zinc-700/0 contrast-more:to-zinc-700/0 focus-visible:contrast-more:from-zinc-700 focus-visible:contrast-more:to-zinc-700 active:contrast-more:from-zinc-700 active:contrast-more:to-zinc-700 dark:from-zinc-300/0 dark:to-zinc-300/0 dark:focus-visible:from-zinc-300 dark:focus-visible:to-zinc-300 dark:active:from-zinc-300 dark:active:to-zinc-300 dark:contrast-more:from-zinc-300/0 dark:contrast-more:to-zinc-300/0 dark:focus-visible:contrast-more:from-zinc-300 dark:focus-visible:contrast-more:to-zinc-300 dark:active:contrast-more:from-zinc-300 dark:active:contrast-more:to-zinc-300 pointer-fine:hover:from-zinc-700 pointer-fine:hover:to-zinc-700 pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-zinc-700 pointer-fine:hover:contrast-more:to-zinc-700 dark:pointer-fine:hover:from-zinc-300 dark:pointer-fine:hover:to-zinc-300 dark:pointer-fine:hover:contrast-more:from-zinc-300 dark:pointer-fine:hover:contrast-more:to-zinc-300');
         case 'orange':
-            return twJoin(multilineFillBaseClasses, 'from-ui-orange/0 to-ui-orange/0 focus-visible:from-ui-orange focus-visible:to-ui-orange active:from-ui-orange active:to-ui-orange contrast-more:from-ui-orange/0 contrast-more:to-ui-orange/0 focus-visible:contrast-more:from-ui-orange focus-visible:contrast-more:to-ui-orange active:contrast-more:from-ui-orange active:contrast-more:to-ui-orange pointer-fine:hover:from-ui-orange pointer-fine:hover:to-ui-orange pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-orange pointer-fine:hover:contrast-more:to-ui-orange bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-orange/0 to-ui-orange/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-orange focus-visible:to-ui-orange focus-visible:bg-[size:100%_100%] active:from-ui-orange active:to-ui-orange active:bg-[size:100%_100%] contrast-more:from-ui-orange/0 contrast-more:to-ui-orange/0 focus-visible:contrast-more:from-ui-orange focus-visible:contrast-more:to-ui-orange active:contrast-more:from-ui-orange active:contrast-more:to-ui-orange pointer-fine:hover:from-ui-orange pointer-fine:hover:to-ui-orange pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-orange pointer-fine:hover:contrast-more:to-ui-orange');
         case 'pink':
-            return twJoin(multilineFillBaseClasses, 'from-ui-pink/0 to-ui-pink/0 focus-visible:from-ui-pink focus-visible:to-ui-pink active:from-ui-pink active:to-ui-pink contrast-more:from-ui-pink/0 contrast-more:to-ui-pink/0 focus-visible:contrast-more:from-ui-pink focus-visible:contrast-more:to-ui-pink active:contrast-more:from-ui-pink active:contrast-more:to-ui-pink pointer-fine:hover:from-ui-pink pointer-fine:hover:to-ui-pink pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-pink pointer-fine:hover:contrast-more:to-ui-pink bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
-        case 'primary':
-            return twJoin(multilineFillBaseClasses, 'from-primary-500/0 to-primary-500/0 focus-visible:from-primary-500 focus-visible:to-primary-500 active:from-primary-500 active:to-primary-500 contrast-more:from-primary-500/0 contrast-more:to-primary-500/0 focus-visible:contrast-more:from-primary-500 focus-visible:contrast-more:to-primary-500 active:contrast-more:from-primary-500 active:contrast-more:to-primary-500 pointer-fine:hover:from-primary-500 pointer-fine:hover:to-primary-500 pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-primary-500 pointer-fine:hover:contrast-more:to-primary-500 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-pink/0 to-ui-pink/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-pink focus-visible:to-ui-pink focus-visible:bg-[size:100%_100%] active:from-ui-pink active:to-ui-pink active:bg-[size:100%_100%] contrast-more:from-ui-pink/0 contrast-more:to-ui-pink/0 focus-visible:contrast-more:from-ui-pink focus-visible:contrast-more:to-ui-pink active:contrast-more:from-ui-pink active:contrast-more:to-ui-pink pointer-fine:hover:from-ui-pink pointer-fine:hover:to-ui-pink pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-pink pointer-fine:hover:contrast-more:to-ui-pink');
         case 'purple':
-            return twJoin(multilineFillBaseClasses, 'from-ui-purple/0 to-ui-purple/0 focus-visible:from-ui-purple focus-visible:to-ui-purple active:from-ui-purple active:to-ui-purple contrast-more:from-ui-purple/0 contrast-more:to-ui-purple/0 focus-visible:contrast-more:from-ui-purple focus-visible:contrast-more:to-ui-purple active:contrast-more:from-ui-purple active:contrast-more:to-ui-purple pointer-fine:hover:from-ui-purple pointer-fine:hover:to-ui-purple pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-purple pointer-fine:hover:contrast-more:to-ui-purple bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-purple/0 to-ui-purple/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-purple focus-visible:to-ui-purple focus-visible:bg-[size:100%_100%] active:from-ui-purple active:to-ui-purple active:bg-[size:100%_100%] contrast-more:from-ui-purple/0 contrast-more:to-ui-purple/0 focus-visible:contrast-more:from-ui-purple focus-visible:contrast-more:to-ui-purple active:contrast-more:from-ui-purple active:contrast-more:to-ui-purple pointer-fine:hover:from-ui-purple pointer-fine:hover:to-ui-purple pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-purple pointer-fine:hover:contrast-more:to-ui-purple');
         case 'red':
-            return twJoin(multilineFillBaseClasses, 'from-ui-red/0 to-ui-red/0 focus-visible:from-ui-red focus-visible:to-ui-red active:from-ui-red active:to-ui-red contrast-more:from-ui-red/0 contrast-more:to-ui-red/0 focus-visible:contrast-more:from-ui-red focus-visible:contrast-more:to-ui-red active:contrast-more:from-ui-red active:contrast-more:to-ui-red pointer-fine:hover:from-ui-red pointer-fine:hover:to-ui-red pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-red pointer-fine:hover:contrast-more:to-ui-red bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-red/0 to-ui-red/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-red focus-visible:to-ui-red focus-visible:bg-[size:100%_100%] active:from-ui-red active:to-ui-red active:bg-[size:100%_100%] contrast-more:from-ui-red/0 contrast-more:to-ui-red/0 focus-visible:contrast-more:from-ui-red focus-visible:contrast-more:to-ui-red active:contrast-more:from-ui-red active:contrast-more:to-ui-red pointer-fine:hover:from-ui-red pointer-fine:hover:to-ui-red pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-red pointer-fine:hover:contrast-more:to-ui-red');
         case 'violet':
-            return twJoin(multilineFillBaseClasses, 'from-ui-violet/0 to-ui-violet/0 focus-visible:from-ui-violet focus-visible:to-ui-violet active:from-ui-violet active:to-ui-violet contrast-more:from-ui-violet/0 contrast-more:to-ui-violet/0 focus-visible:contrast-more:from-ui-violet focus-visible:contrast-more:to-ui-violet active:contrast-more:from-ui-violet active:contrast-more:to-ui-violet pointer-fine:hover:from-ui-violet pointer-fine:hover:to-ui-violet pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-violet pointer-fine:hover:contrast-more:to-ui-violet bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-violet/0 to-ui-violet/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-violet focus-visible:to-ui-violet focus-visible:bg-[size:100%_100%] active:from-ui-violet active:to-ui-violet active:bg-[size:100%_100%] contrast-more:from-ui-violet/0 contrast-more:to-ui-violet/0 focus-visible:contrast-more:from-ui-violet focus-visible:contrast-more:to-ui-violet active:contrast-more:from-ui-violet active:contrast-more:to-ui-violet pointer-fine:hover:from-ui-violet pointer-fine:hover:to-ui-violet pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-violet pointer-fine:hover:contrast-more:to-ui-violet');
         case 'yellow':
-            return twJoin(multilineFillBaseClasses, 'from-ui-yellow/0 to-ui-yellow/0 focus-visible:from-ui-yellow focus-visible:to-ui-yellow active:from-ui-yellow active:to-ui-yellow contrast-more:from-ui-yellow/0 contrast-more:to-ui-yellow/0 focus-visible:contrast-more:from-ui-yellow focus-visible:contrast-more:to-ui-yellow active:contrast-more:from-ui-yellow active:contrast-more:to-ui-yellow pointer-fine:hover:from-ui-yellow pointer-fine:hover:to-ui-yellow pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-yellow pointer-fine:hover:contrast-more:to-ui-yellow bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-yellow/0 to-ui-yellow/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-yellow focus-visible:to-ui-yellow focus-visible:bg-[size:100%_100%] active:from-ui-yellow active:to-ui-yellow active:bg-[size:100%_100%] contrast-more:from-ui-yellow/0 contrast-more:to-ui-yellow/0 focus-visible:contrast-more:from-ui-yellow focus-visible:contrast-more:to-ui-yellow active:contrast-more:from-ui-yellow active:contrast-more:to-ui-yellow pointer-fine:hover:from-ui-yellow pointer-fine:hover:to-ui-yellow pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-yellow pointer-fine:hover:contrast-more:to-ui-yellow');
         case 'blue':
         default:
-            return twJoin(multilineFillBaseClasses, 'from-ui-blue/0 to-ui-blue/0 focus-visible:from-ui-blue focus-visible:to-ui-blue active:from-ui-blue active:to-ui-blue contrast-more:from-ui-blue/0 contrast-more:to-ui-blue/0 focus-visible:contrast-more:from-ui-blue focus-visible:contrast-more:to-ui-blue active:contrast-more:from-ui-blue active:contrast-more:to-ui-blue pointer-fine:hover:from-ui-blue pointer-fine:hover:to-ui-blue pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-blue pointer-fine:hover:contrast-more:to-ui-blue bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+            return twJoin(multilineFillBaseClasses, 'from-ui-blue/0 to-ui-blue/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-blue focus-visible:to-ui-blue focus-visible:bg-[size:100%_100%] active:from-ui-blue active:to-ui-blue active:bg-[size:100%_100%] contrast-more:from-ui-blue/0 contrast-more:to-ui-blue/0 focus-visible:contrast-more:from-ui-blue focus-visible:contrast-more:to-ui-blue active:contrast-more:from-ui-blue active:contrast-more:to-ui-blue pointer-fine:hover:from-ui-blue pointer-fine:hover:to-ui-blue pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-blue pointer-fine:hover:contrast-more:to-ui-blue');
     }
 };
 const getMultilineFillLiftClasses = (theme = 'blue') => {
-    return twJoin(getMultilineFillColorClasses(theme), 'pointer-fine:hover:bg-[size:auto_100%] bg-[size:auto_0px] bg-[position:auto_100%] focus-visible:bg-[size:auto_100%] active:bg-[size:auto_100%]');
+    return twJoin(getMultilineFillColorClasses(theme), 'bg-[size:auto_0px] bg-[position:50%_100%] focus-visible:bg-[size:auto_100%] active:bg-[size:auto_100%] pointer-fine:hover:bg-[size:auto_100%]');
 };
 const getMultilineFillXClasses = (theme = 'blue') => {
-    return twJoin(getMultilineFillColorClasses(theme), 'pointer-fine:hover:bg-[size:100%_100%] bg-[size:0%_100%] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%]');
+    return twJoin(getMultilineFillColorClasses(theme), 'bg-[size:0%_100%] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%] pointer-fine:hover:bg-[size:100%_100%]');
 };
 const getMultilineFillRtlClasses = (theme = 'blue') => {
     return twJoin(getMultilineFillXClasses(theme), 'bg-[position:100%_auto]');
@@ -973,7 +522,7 @@ const getMultilineFillCenterClasses = (theme = 'blue') => {
  * @example
  *   <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
  */
-function Link({ type, theme = 'blue', className, ref, ...props }) {
+function Link({ as, className, ref, theme = 'blue', type, ...props }) {
     const getLinkClasses = () => {
         switch (type) {
             case 'static':
@@ -1021,14 +570,15 @@ function Link({ type, theme = 'blue', className, ref, ...props }) {
         }
     };
     const linkClasses = getLinkClasses();
-    return jsx(Anchor, { ref: ref, ...props, className: twMerge(linkClasses, className) });
+    const LinkElement = as || Anchor;
+    return jsx(LinkElement, { ...props, className: twMerge(linkClasses, className), ref: ref });
 }
 
 /**
  * # Button
  * - A pre-styled button with utility props for easy customization depending on use case.
  */
-function Button({ className, padding = 'md', rounded = 'lg', theme = 'primary', ref, ...props }) {
+function Button({ className, padding = 'md', rounded = 'lg', theme = 'blue', ref, ...props }) {
     const getPaddingClasses = () => {
         switch (padding) {
             case 'xs':
@@ -1060,71 +610,92 @@ function Button({ className, padding = 'md', rounded = 'lg', theme = 'primary',
         }
     };
     const getThemeClasses = () => {
+        const classList = [];
         switch (theme) {
             case 'blue':
-                return twSort('before:bg-ui-blue shadow-ui-blue/25 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('text-white shadow-lg shadow-ui-blue/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-blue before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'blue-gradient':
-                return twSort('bg-ui-blue shadow-ui-blue/25 before:bg-linear-to-t before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('bg-ui-blue text-white shadow-lg shadow-ui-blue/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'brown':
-                return twSort('before:bg-ui-brown shadow-ui-brown/25 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('text-white shadow-lg shadow-ui-brown/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-brown before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'brown-gradient':
-                return twSort('bg-ui-brown shadow-ui-brown/25 before:bg-linear-to-t before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('bg-ui-brown text-white shadow-lg shadow-ui-brown/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'green':
-                return twSort('before:bg-ui-green shadow-ui-green/25 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('text-white shadow-lg shadow-ui-green/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-green before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'green-gradient':
-                return twSort('bg-ui-green shadow-ui-green/25 before:bg-linear-to-t before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('bg-ui-green text-white shadow-lg shadow-ui-green/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'grey':
-                return twSort('before:bg-ui-grey shadow-ui-grey/25 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('text-white shadow-lg shadow-ui-grey/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-grey before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'grey-gradient':
-                return twSort('bg-ui-grey shadow-ui-grey/25 before:bg-linear-to-t before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('bg-ui-grey text-white shadow-lg shadow-ui-grey/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'sky-blue':
-                return twSort('before:bg-ui-sky-blue shadow-ui-sky-blue/25 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('text-white shadow-lg shadow-ui-sky-blue/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-sky-blue before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'sky-blue-gradient':
-                return twSort('bg-ui-sky-blue shadow-text-white lg shadow-ui-sky-blue/25 before:bg-linear-to-t before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('bg-ui-sky-blue text-white shadow-lg shadow-ui-sky-blue/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'magenta':
-                return twSort('before:bg-ui-magenta shadow-ui-magenta/25 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('text-white shadow-lg shadow-ui-magenta/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-magenta before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'magenta-gradient':
-                return twSort('bg-ui-magenta shadow-ui-magenta/25 before:bg-linear-to-t active:before transition-transform:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white mix-blend-soft-light shadow-lg transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:from-black/75 before:via-transparent before:to-white/75 before:text-white before:opacity-75');
+                classList.push(twSort('bg-ui-magenta text-white shadow-lg shadow-ui-magenta/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'neutral':
-                return twSort('before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90text-white dark bg-zinc-200 text-black before:absolute before:inset-0 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90 dark:bg-zinc-800');
+                classList.push(twSort('pointer-fine:active:before:brightness-90text-white dark bg-zinc-200 text-black before:absolute before:inset-0 before:rounded-[inherit] before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 dark:bg-zinc-800 pointer-fine:hover:before:brightness-110'));
+                break;
             case 'neutral-gradient':
-                return twSort('bg-linear-to-t before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 dark from-zinc-300 via-zinc-200 to-zinc-100 text-black before:transition-[filter] before:duration-300 active:before:brightness-90 dark:from-zinc-900 dark:via-zinc-800 dark:to-zinc-700');
+                classList.push(twSort('dark bg-linear-to-t from-zinc-300 via-zinc-200 to-zinc-100 text-black before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 dark:from-zinc-900 dark:via-zinc-800 dark:to-zinc-700 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'orange':
-                return twSort('before:bg-ui-orange shadow-ui-orange/25 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('text-white shadow-lg shadow-ui-orange/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-orange before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'orange-gradient':
-                return twSort('bg-ui-orange shadow-ui-orange/25 before:bg-linear-to-t before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('bg-ui-orange text-white shadow-lg shadow-ui-orange/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'pink':
-                return twSort('before:bg-ui-pink shadow-ui-pink/25 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('text-white shadow-lg shadow-ui-pink/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-pink before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'pink-gradient':
-                return twSort('bg-ui-pink shadow-ui-pink/25 before:bg-linear-to-t before:to-white/75/75 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:from-black/75 before:via-transparent before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 active:before:brightness-90');
-            case 'primary-light':
-                return twSort('bg-primary-50 text-primary-600 active:bg-primary-600 active:text-primary-50 pointer-fine:hover:bg-primary-600 pointer-fine:hover:text-primary-50 pointer-fine:active:bg-primary-700 transition-[transform_background-color_color_box-shadow]');
-            case 'primary-gradient':
-                return twSort('bg-linear-to-t from-primary-700 via-primary-500 to-primary-300 bg-size-y-[200%] shadow-primary-600/25 pointer-fine:hover:[background-position:50%_0%] transition-[transform_background-position] [background-position:50%_50%] active:[background-position:50%_75%]');
+                classList.push(twSort('before:to-white/75/75 bg-ui-pink text-white shadow-lg shadow-ui-pink/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'purple':
-                return twSort('before:bg-ui-purple shadow-ui-purple/25 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('text-white shadow-lg shadow-ui-purple/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-purple before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'purple-gradient':
-                return twSort('bg-ui-purple shadow-ui-purple/25 before:bg-linear-to-t before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('bg-ui-purple text-white shadow-lg shadow-ui-purple/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'red':
-                return twSort('before:bg-ui-red shadow-ui-red/25 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('text-white shadow-lg shadow-ui-red/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-red before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'red-gradient':
-                return twSort('bg-ui-red shadow-ui-red/25 before:bg-linear-to-t before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('bg-ui-red text-white shadow-lg shadow-ui-red/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'violet':
-                return twSort('before:bg-ui-violet shadow-ui-violet/25 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('text-white shadow-lg shadow-ui-violet/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-violet before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'violet-gradient':
-                return twSort('bg-ui-violet shadow-ui-violet/25 before:bg-linear-to-t before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-white shadow-lg transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('bg-ui-violet text-white shadow-lg shadow-ui-violet/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black/75 before:via-transparent before:to-white/75 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'yellow':
-                return twSort('before:bg-ui-yellow shadow-ui-yellow/25 before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-black shadow-lg transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-[filter] before:duration-300 active:before:brightness-90');
+                classList.push(twSort('text-black shadow-lg shadow-ui-yellow/25 transition-transform before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:bg-ui-yellow before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
             case 'yellow-gradient':
-                return twSort('bg-ui-yellow shadow-ui-yellow/25 before:bg-linear-to-t before:ease-exponential pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90 text-black shadow-lg transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:from-black before:via-black/50 before:to-white/50 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 active:before:brightness-90');
-            case 'primary':
-            default:
-                return twSort('bg-primary-500 shadow-primary-700/25 active:bg-primary-600 pointer-fine:hover:bg-primary-400 pointer-fine:active:bg-primary-600 text-white shadow-lg transition-[transform_background-color_box-shadow]');
+                classList.push(twSort('bg-ui-yellow text-black shadow-lg shadow-ui-yellow/25 transition-transform before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-t before:from-black before:via-black/50 before:to-white/50 before:opacity-75 before:mix-blend-soft-light before:transition-[filter] before:duration-300 before:ease-exponential active:before:brightness-90 pointer-fine:hover:before:brightness-110 pointer-fine:active:before:brightness-90'));
+                break;
         }
+        return classList.join(' ');
     };
     const paddingClasses = getPaddingClasses(), roundedClasses = getRoundedClasses(), themeClasses = getThemeClasses();
     const buttonClasses = twMerge([
-        'ease-exponential focus-visible:scale-101 pointer-fine:hover:scale-101 pointer-fine:active:scale-99 block w-fit min-w-fit text-center font-semibold duration-300 active:scale-95',
+        'block w-fit min-w-fit text-center font-semibold duration-300 ease-exponential focus-visible:scale-101 active:scale-95 pointer-fine:hover:scale-101 pointer-fine:active:scale-99',
         paddingClasses,
         roundedClasses,
         themeClasses,
@@ -1201,7 +772,7 @@ function useFormStatus() {
     return useStore(store => store);
 }
 
-function validateField(value, { required, type }) {
+function validateField$1(value, { required, type }) {
     const noValue = !value || value === '';
     if (!required && noValue)
         return true;
@@ -1218,8 +789,8 @@ function validateField(value, { required, type }) {
             return true;
     }
 }
-function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, name, onChange, placeholder, ref, required = true, type, value, ...props }) {
-    const [formContext, setFormContext] = useFormContext(), [, setFormStatus] = useFormStatus();
+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();
     if (placeholder === '*')
         placeholder = name + (required && !label ? '*' : '');
     if (label === '*')
@@ -1244,7 +815,7 @@ function Input({ checked, className, defaultValue, description, descriptionProps
         }
     };
     const fieldContextType = getFieldContextType();
-    const fieldContext = defineField({
+    const initialFieldContext = defineField({
         type: fieldContextType,
         id: fieldContextID,
         invalid,
@@ -1256,13 +827,14 @@ function Input({ checked, className, defaultValue, description, descriptionProps
         if (!setFormContext)
             return;
         setFormContext(prevContext => {
-            const otherFields = (prevContext || []).filter(field => field.id !== fieldContext.id);
-            return [...otherFields, fieldContext];
+            const otherFields = (prevContext || []).filter(field => field.id !== initialFieldContext.id);
+            return [...otherFields, initialFieldContext];
         });
         return () => {
-            setFormContext(prevContext => (prevContext || []).filter(field => field.id !== fieldContext.id));
+            setFormContext(prevContext => (prevContext || []).filter(field => field.id !== initialFieldContext.id));
         };
     }, [setFormContext]);
+    const fieldContext = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id) || initialFieldContext;
     const debounceTimerRef = useRef(undefined);
     const handleChange = e => {
         if (disabled) {
@@ -1274,32 +846,66 @@ function Input({ checked, className, defaultValue, description, descriptionProps
         setFormContext?.(prevContext => {
             if (!prevContext)
                 return [];
-            const field = prevContext.find(({ id: fieldID }) => fieldID === fieldContext.id);
+            const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
             if (!field)
-                throw new Error(`Field with id "${fieldContext.id}" not found in form context.`);
-            const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== fieldContext.id);
+                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 };
             return [...otherFields, updatedField];
         });
         debounceTimerRef.current = setTimeout(() => {
-            const field = formContext?.find(({ id: fieldID }) => fieldID === fieldContext.id);
+            const field = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
             if (!field)
                 return;
-            const invalid = validateField(newValue, field) === false;
+            const invalid = validateField$1(newValue, field) === false;
             if (invalid !== field.invalid)
                 setFormContext?.(prevContext => {
                     if (!prevContext)
                         return [];
-                    const field = prevContext.find(({ id: fieldID }) => fieldID === fieldContext.id);
+                    const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
                     if (!field)
-                        throw new Error(`Field with id "${fieldContext.id}" not found in form context.`);
-                    const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== fieldContext.id);
+                        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, invalid };
                     return [...otherFields, updatedField];
                 });
         }, 500);
         onChange?.(e);
     };
+    const handleBlur = e => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        const { currentTarget } = e, { value: newValue } = currentTarget;
+        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];
+                });
+                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];
+                });
+                break;
+        }
+        onBlur?.(e);
+    };
     const restFieldProps = fieldProps
         ? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
         : {};
@@ -1309,25 +915,25 @@ function Input({ checked, className, defaultValue, description, descriptionProps
     const restDescriptionProps = descriptionProps
         ? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
         : {};
-    return (jsxs(Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsx(Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsx(Input$1, { ...props, className: bag => twMerge('pointer-fine:hover:bg-neutral-50 dark:pointer-fine:hover:bg-neutral-600 pointer-fine:active:bg-neutral-200 dark:pointer-fine:active:bg-neutral-800 border-1 outline-ui-sky-blue/95 focus-visible:outline-3 ease-exponential rounded-xl border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 transition-[background-color] duration-300 focus-visible:bg-neutral-50 active:bg-neutral-200 dark:bg-neutral-700 dark:text-neutral-50 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800', typeof className === 'function' ? className(bag) : className), invalid: invalid, onChange: handleChange, placeholder: placeholder, ref: ref, type: type }), description && (jsx(Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+    return (jsxs(Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsx(Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsx(Input$1, { ...props, className: bag => twMerge(
+                // Base styles
+                'rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50', 
+                // Pseudo styles
+                'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800', 
+                // user-invalid styles
+                'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]', 
+                // Custom styles
+                typeof className === 'function' ? className(bag) : className), id: fieldContext?.id, invalid: invalid, onBlur: handleBlur, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, type: type, value: fieldContext?.value }), description && (jsx(Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
                     ? descriptionProps?.className(bag)
                     : descriptionProps?.className), children: description }))] }));
 }
 
-function SubmitButton({ children, className, 'aria-disabled': ariaDisabled, error, incomplete, loading, success, theme, type = 'submit', ref, ...props }) {
+function SubmitButton({ children, className, error, incomplete, loading, success, theme, type = 'submit', ref, ...props }) {
     const [formStatus] = useFormStatus();
-    const getDisabledStatus = () => {
-        if (ariaDisabled !== undefined)
-            return ariaDisabled;
-        if (formStatus !== 'ready')
-            return 'true';
-        return 'false';
-    };
-    const disabled = getDisabledStatus();
     const getFormStatusButtonClasses = () => {
         switch (formStatus) {
             case 'loading':
-                return twSort('animate-pulse cursor-wait text-lg font-black leading-6 tracking-widest');
+                return twSort('animate-pulse cursor-wait text-lg leading-6 font-black tracking-widest');
             case 'error':
             case 'success':
                 return 'cursor-not-allowed';
@@ -1356,7 +962,7 @@ function SubmitButton({ children, className, 'aria-disabled': ariaDisabled, erro
             case 'incomplete':
                 return incomplete || 'Complete Form';
             case 'loading':
-                return (loading || (jsxs(Fragment$1, { children: [jsx("span", { className: 'animate-wave animation-delay-300 inline-block', children: "\u2022" }), jsx("span", { className: 'animate-wave animation-delay-150 inline-block', children: "\u2022" }), jsx("span", { className: 'animate-wave inline-block', children: "\u2022" })] })));
+                return (loading || (jsxs(Fragment$1, { children: [jsx("span", { className: 'inline-block animate-wave animation-delay-300', children: "\u2022" }), jsx("span", { className: 'inline-block animate-wave animation-delay-150', children: "\u2022" }), jsx("span", { className: 'inline-block animate-wave', children: "\u2022" })] })));
             case 'error':
                 return (jsxs(Fragment$1, { children: [error || 'Error', ' ', jsx("span", { className: 'absolute top-1/2 ml-1.5 translate-y-[calc(-50%-1.5px)] text-2xl', children: "\u00D7" })] }));
             case 'success':
@@ -1366,7 +972,103 @@ function SubmitButton({ children, className, 'aria-disabled': ariaDisabled, erro
         }
     };
     const buttonText = getButtonText();
-    return (jsx(Button, { ...props, ...(disabled === 'true' ? { 'aria-disabled': 'true', disabled: true } : {}), className: twMerge([formStatusButtonClasses, 'w-full', className]), ref: ref, theme: formStatusButtonTheme, type: type, children: buttonText }));
+    return (jsx(Button, { ...props, className: twMerge([formStatusButtonClasses, 'w-full', className]), ref: ref, theme: formStatusButtonTheme, type: type, children: buttonText }));
+}
+
+function validateField(value, { required }) {
+    const noValue = !value || value === '';
+    if (!required && noValue)
+        return true;
+    if (noValue)
+        return false;
+    return true;
+}
+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();
+    if (placeholder === '*')
+        placeholder = name + (required && !label ? '*' : '');
+    if (label === '*')
+        label = name;
+    const uniqueID = 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}` : '',
+    });
+    useEffect(() => {
+        if (!setFormContext)
+            return;
+        setFormContext(prevContext => {
+            const otherFields = (prevContext || []).filter(field => field.id !== initialFieldContext.id);
+            return [...otherFields, initialFieldContext];
+        });
+        return () => {
+            setFormContext(prevContext => (prevContext || []).filter(field => field.id !== initialFieldContext.id));
+        };
+    }, [setFormContext]);
+    const fieldContext = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id) || initialFieldContext;
+    const debounceTimerRef = useRef(undefined);
+    const handleChange = e => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        clearTimeout(debounceTimerRef.current);
+        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 };
+            return [...otherFields, updatedField];
+        });
+        debounceTimerRef.current = setTimeout(() => {
+            const field = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
+            if (!field)
+                return;
+            const invalid = validateField(newValue, field) === false;
+            if (invalid !== field.invalid)
+                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, invalid };
+                    return [...otherFields, updatedField];
+                });
+        }, 500);
+        onChange?.(e);
+    };
+    const restFieldProps = fieldProps
+        ? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
+        : {};
+    const restLabelProps = labelProps
+        ? Object.fromEntries(Object.entries(labelProps).filter(([key]) => key !== 'className'))
+        : {};
+    const restDescriptionProps = descriptionProps
+        ? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
+        : {};
+    return (jsxs(Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsx(Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsx(Textarea$1, { ...props, className: bag => twMerge(
+                // Base styles
+                'field-sizing-content resize-none rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50', 
+                // Pseudo styles
+                'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800', 
+                // user-invalid styles
+                'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]', 
+                // Custom styles
+                typeof className === 'function' ? className(bag) : className), id: fieldContext?.id, invalid: invalid, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, value: fieldContext?.value }), description && (jsx(Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+                    ? descriptionProps?.className(bag)
+                    : descriptionProps?.className), children: description }))] }));
 }
 
 // import { findComponentByType } from '../../utils'
@@ -1426,23 +1128,23 @@ function getTextFromChildren(children) {
  * A heading component that renders HTML heading elements (h1-h6) with appropriate styling.
  * Automatically generates an ID for the heading based on its content if none is provided.
  */
-function Heading({ as = 'h2', children, className, id, ref, ...props }) {
+function Heading({ as = 'h2', children, customize, className, id, ref, ...props }) {
     const H = as;
     const targetableID = id || getTextFromChildren(children).replace(/\s+/g, '-').toLowerCase();
     const getBaseClasses = () => {
         switch (as) {
             case 'h1':
-                return twSort('pb-2.5 text-6xl font-black last:pb-0');
+                return customize?.h1 || twSort('pb-2.5 text-6xl font-black last:pb-0');
             case 'h3':
-                return twSort('pb-2 text-4xl font-extralight last:pb-0');
+                return customize?.h3 || twSort('pb-2 text-4xl font-extralight last:pb-0');
             case 'h4':
-                return twSort('pb-2 text-3xl font-extrabold last:pb-0');
+                return customize?.h4 || twSort('pb-2 text-3xl font-extrabold last:pb-0');
             case 'h5':
-                return twSort('pb-1.5 text-2xl font-semibold last:pb-0');
+                return customize?.h5 || twSort('pb-1.5 text-2xl font-semibold last:pb-0');
             case 'h6':
-                return twSort('pb-1 text-xl font-bold last:pb-0');
+                return customize?.h6 || twSort('pb-1 text-xl font-bold last:pb-0');
             default:
-                return twSort('pb-2.5 text-5xl font-medium last:pb-0');
+                return customize?.h2 || twSort('pb-2.5 text-5xl font-medium last:pb-0');
         }
     };
     const baseClasses = getBaseClasses();
@@ -2031,5 +1733,5 @@ function Time({ children, dateObject, dateTime, day, hours, milliseconds, minute
     return (jsx("time", { dateTime: dateAndTime, ref: ref, ...props, children: dateDisplay }));
 }
 
-export { Airplane, Anchor, ArrowTriangle2CirclepathCircle, ArrowTriangle2CirclepathCircleFill, BagFill, Banknote, BellFill, BoltCar, BoltFill, BoltRingClosed, BoltTrianglebadgeExclamationmark, BookFill, BookmarkFill, BriefcaseFill, BubbleLeftFill, Building2Fill, Button, Calendar, CameraFill, CarFill, CartFill, ChartBarDocHorizontal, Checkmark, CheckmarkSeal, ChevronCompactDown, ChevronDown, ChevronLeft, ChevronLeftForwardslashChevronRight, ChevronRight, ChevronUpChevronDown, CircleFill, ClockBadgeCheckmark, ClockFill, CloudFill, CubeFill, CurvePointLeft, DialHigh, DocFill, DocOnClipboard, DocOnDoc, DocOnDocFill, DocOnMagnifyingglass as DocTextMagnifyingglass, DollarSign, EllipsisCircle, EllipsisCircleFill, Envelope, EnvelopeFill, ExclamationmarkOctagon, Eye, FigureWaterFitness, FlagFill, FlameFill, Folder, FolderFill, Form, FormContextProvider, FormStatusProvider, Gearshape, GearshapeFill, Ghost, GiftFill, GlobeAmericasFill, HareFill, Heading, House, HouseDeskclock, HouseFill, IPhoneHouse, Input, LightRibbon, LightbulbFill, LightbulbLed, Link, ListBulletClipboardFill, Magnifyingglass, MapPinEllipse, MinusPlusBatteryblock, Modal, ModalDialog, ModalTrigger, Network, NetworkShield, NewspaperFill, Number$1 as Number, PaperplaneFill, Person, PersonCropSquare, PersonFill, PersonFillQuestionmark, Phone, PhoneArrowUpRight, PhoneFill, PlayRectangleFill, Plus, Qrcode, RectanglePortraitAndArrowLeft, RectanglePortraitAndArrowLeftFill, Sensor, Signature, SolarPanel, SquareAndArrowDown, SquareAndArrowDownFill, SquareAndArrowUp, SquareAndArrowUpFill, SquareAndPencil, SquareAndPencilFill, SubmitButton, TextBubble, ThreePeople, ThreeRectanglesDesktop, ThreeRectanglesDesktopFill, Time, Trash, TrashFill, Tree, UmbrellaFill, xmark as Xmark, addClass, currentMonthName, currentWeekdayName, daysInMonth, defineField, easeOutExpo, emailRegex, extendMadoTailwindMerge, findComponentByType, firstOfMonth, formatPhoneNumber, getDate, getHours, getHoursIn12, getMeridianFromHour, getMilliseconds, getMinutes, getMonth, getMonthIndexFromName, getMonthName, getNextMonth, getPreviousMonth, getSeconds, getUserReadableDate, getUserReadableDateFromTimestampz, getWeekdayName, getYearsInRange, hasClass, isEmail, isPhoneNumber, monthNamesList, removeClass, telRegex, toFullDateString, toLowerCase, toggleClass, twMerge, twSort, useFormContext, useFormStatus, weekdayNamesList };
+export { Airplane, Anchor, ArrowTriangle2CirclepathCircle, ArrowTriangle2CirclepathCircleFill, BagFill, Banknote, BellFill, BoltCar, BoltFill, BoltRingClosed, BoltTrianglebadgeExclamationmark, BookFill, BookmarkFill, BriefcaseFill, BubbleLeftFill, Building2Fill, Button, Calendar, CameraFill, CarFill, CartFill, ChartBarDocHorizontal, Checkmark, CheckmarkSeal, ChevronCompactDown, ChevronDown, ChevronLeft, ChevronLeftForwardslashChevronRight, ChevronRight, ChevronUpChevronDown, CircleFill, ClockBadgeCheckmark, ClockFill, CloudFill, CubeFill, CurvePointLeft, DialHigh, DocFill, DocOnClipboard, DocOnDoc, DocOnDocFill, DocOnMagnifyingglass as DocTextMagnifyingglass, DollarSign, EllipsisCircle, EllipsisCircleFill, Envelope, EnvelopeFill, ExclamationmarkOctagon, Eye, FigureWaterFitness, FlagFill, FlameFill, Folder, FolderFill, Form, FormContextProvider, FormStatusProvider, Gearshape, GearshapeFill, Ghost, GiftFill, GlobeAmericasFill, HareFill, Heading, House, HouseDeskclock, HouseFill, IPhoneHouse, Input, LightRibbon, LightbulbFill, LightbulbLed, Link, ListBulletClipboardFill, Magnifyingglass, MapPinEllipse, MinusPlusBatteryblock, Modal, ModalDialog, ModalTrigger, Network, NetworkShield, NewspaperFill, Number$1 as Number, PaperplaneFill, Person, PersonCropSquare, PersonFill, PersonFillQuestionmark, Phone, PhoneArrowUpRight, PhoneFill, PlayRectangleFill, Plus, Qrcode, RectanglePortraitAndArrowLeft, RectanglePortraitAndArrowLeftFill, Sensor, Signature, SolarPanel, SquareAndArrowDown, SquareAndArrowDownFill, SquareAndArrowUp, SquareAndArrowUpFill, SquareAndPencil, SquareAndPencilFill, SubmitButton, TextBubble, Textarea, ThreePeople, ThreeRectanglesDesktop, ThreeRectanglesDesktopFill, Time, Trash, TrashFill, Tree, UmbrellaFill, xmark as Xmark, defineField, useFormContext, useFormStatus };
 //# sourceMappingURL=index.esm.js.map