mado-ui 0.1.2 → 0.2.1

package/dist/index.js

@@ -6,186 +6,6 @@ var react = require('react');
 var react$1 = require('@headlessui/react');
 var reactDom = require('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 = tailwindMerge.extendTailwindMerge({
     extend: {
@@ -262,105 +82,13 @@ const twMerge = tailwindMerge.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 tailwindMerge.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',
@@ -387,29 +115,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
@@ -438,32 +146,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
@@ -506,9 +188,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
@@ -520,28 +199,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
@@ -556,31 +213,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
@@ -593,80 +225,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 = react.Children.toArray(children);
@@ -719,7 +277,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)
@@ -769,15 +327,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 = tailwindMerge.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 = tailwindMerge.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 = tailwindMerge.twJoin(baseClasses, 'whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border-1 after:border-current');
+const lineClasses = tailwindMerge.twJoin(lineStaticClasses, 'whitespace-nowrap transition-transform after:transition-transform after:ease-exponential');
 const scaleXClasses = 'after:scale-x-0 pointer-fine:hover:after:scale-x-100 active:after:scale-x-100';
 const scaleYClasses = 'after:scale-y-0 pointer-fine:hover:after:scale-y-100 active:after:scale-y-100';
 const lineNormalClasses = tailwindMerge.twJoin([
     lineClasses,
     scaleYClasses,
-    '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 = tailwindMerge.twJoin([lineClasses, scaleXClasses, 'after:origin-left']);
 const lineRtlClasses = tailwindMerge.twJoin([lineClasses, scaleXClasses, 'after:origin-right']);
@@ -785,160 +343,151 @@ const lineCenterClasses = tailwindMerge.twJoin([lineClasses, scaleXClasses]);
 const lineLiftClasses = tailwindMerge.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 = tailwindMerge.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 = tailwindMerge.twJoin(baseClasses, 'whitespace-nowrap transition-[transform_color] after:top-1/2 after:h-[calc(100%+0.05rem)] after:w-[calc(100%+0.25rem)] after:-translate-y-1/2 after:rounded after:ease-exponential active:text-zinc-50 pointer-fine:hover:text-zinc-50');
 // Define theme-specific fill color transition classes
 const getFillColorTransitionClasses = (theme = 'blue') => {
     switch (theme) {
         case 'brown':
-            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-brown contrast-more:after:bg-ui-brown after:transition-transform');
+            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-brown after:transition-transform contrast-more:after:bg-ui-brown');
         case 'green':
-            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-green contrast-more:after:bg-ui-green after:transition-transform');
+            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-green after:transition-transform contrast-more:after:bg-ui-green');
         case 'grey':
-            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-grey contrast-more:after:bg-ui-grey after:transition-transform');
+            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-grey after:transition-transform contrast-more:after:bg-ui-grey');
         case 'sky-blue':
-            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-sky-blue contrast-more:after:bg-ui-sky-blue after:transition-transform');
+            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-sky-blue after:transition-transform contrast-more:after:bg-ui-sky-blue');
         case 'magenta':
-            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-magenta contrast-more:after:bg-ui-magenta after:transition-transform');
+            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-magenta after:transition-transform contrast-more:after:bg-ui-magenta');
         case 'neutral':
             return tailwindMerge.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 tailwindMerge.twJoin(fillClasses, 'after:bg-ui-orange contrast-more:after:bg-ui-orange after:transition-transform');
+            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-orange after:transition-transform contrast-more:after:bg-ui-orange');
         case 'pink':
-            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-pink contrast-more:after:bg-ui-pink after:transition-transform');
-        case 'primary':
-            return tailwindMerge.twJoin(fillClasses, 'after:bg-primary-500 contrast-more:after:bg-primary-500 after:transition-transform');
+            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-pink after:transition-transform contrast-more:after:bg-ui-pink');
         case 'purple':
-            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-purple contrast-more:after:bg-ui-purple after:transition-transform');
+            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-purple after:transition-transform contrast-more:after:bg-ui-purple');
         case 'red':
-            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-red contrast-more:after:bg-ui-red after:transition-transform');
+            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-red after:transition-transform contrast-more:after:bg-ui-red');
         case 'violet':
-            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-violet contrast-more:after:bg-ui-violet after:transition-transform');
+            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-violet after:transition-transform contrast-more:after:bg-ui-violet');
         case 'yellow':
-            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-yellow contrast-more:after:bg-ui-yellow after:transition-transform');
+            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-yellow after:transition-transform contrast-more:after:bg-ui-yellow');
         case 'blue':
         default:
-            return tailwindMerge.twJoin(fillClasses, 'after:bg-ui-blue contrast-more:after:bg-ui-blue after:transition-transform');
+            return tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 = tailwindMerge.twJoin(multilineBaseClasses, 'ease-exponential duration-500');
+const multilineNormalClasses = twSort('underline-offset-1 active:underline pointer-fine:hover:underline');
+const multilineClasses = tailwindMerge.twJoin(multilineBaseClasses, 'duration-500 ease-exponential');
 const multilineLineClasses = tailwindMerge.twJoin(multilineClasses, 'bg-[position:0%_100%] px-px pb-px transition-[background-size]');
-const multilineXClasses = tailwindMerge.twJoin(multilineLineClasses, 'pointer-fine:hover:bg-[size:100%_2px] bg-[size:0%_2px] focus-visible:bg-[size:100%_2px] active:bg-[size:100%_2px]');
+const multilineXClasses = tailwindMerge.twJoin(multilineLineClasses, 'bg-[size:0%_2px] focus-visible:bg-[size:100%_2px] active:bg-[size:100%_2px] pointer-fine:hover:bg-[size:100%_2px]');
 const multilineLineRtlClasses = tailwindMerge.twJoin([multilineXClasses, 'bg-[position:100%_100%]']);
 const multilineLineCenterClasses = tailwindMerge.twJoin([multilineXClasses, 'bg-[position:50%_100%]']);
-const multilineLineLiftClasses = tailwindMerge.twJoin(multilineLineClasses, 'pointer-fine:hover:bg-[size:auto_2px] bg-[size:auto_0px] focus-visible:bg-[size:auto_2px] active:bg-[size:auto_2px]');
-const multilineFillBaseClasses = tailwindMerge.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 = tailwindMerge.twJoin(multilineLineClasses, 'bg-[size:auto_0px] focus-visible:bg-[size:auto_2px] active:bg-[size:auto_2px] pointer-fine:hover:bg-[size:auto_2px]');
+const multilineFillBaseClasses = tailwindMerge.twJoin(multilineBaseClasses, 'rounded px-0.5 py-0.75 focus-visible:text-zinc-50 active:text-zinc-50 pointer-fine:hover:text-zinc-50');
 const getMultilineFillColorClasses = (theme = 'blue') => {
     switch (theme) {
         case 'brown':
-            return tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-brown to-ui-brown contrast-more:from-ui-brown contrast-more:to-ui-brown transition-[background-size_color]');
+            return tailwindMerge.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 tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-green to-ui-green contrast-more:from-ui-green contrast-more:to-ui-green transition-[background-size_color]');
+            return tailwindMerge.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 tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-grey to-ui-grey contrast-more:from-ui-grey contrast-more:to-ui-grey transition-[background-size_color]');
+            return tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-magenta to-ui-magenta contrast-more:from-ui-magenta contrast-more:to-ui-magenta transition-[background-size_color]');
+            return tailwindMerge.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 tailwindMerge.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 tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-orange to-ui-orange contrast-more:from-ui-orange contrast-more:to-ui-orange transition-[background-size_color]');
+            return tailwindMerge.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 tailwindMerge.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 tailwindMerge.twJoin(multilineFillBaseClasses, 'from-primary-500 to-primary-500 contrast-more:from-primary-500 contrast-more:to-primary-500 transition-[background-size_color]');
+            return tailwindMerge.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 tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-purple to-ui-purple contrast-more:from-ui-purple contrast-more:to-ui-purple transition-[background-size_color]');
+            return tailwindMerge.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 tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-red to-ui-red contrast-more:from-ui-red contrast-more:to-ui-red transition-[background-size_color]');
+            return tailwindMerge.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 tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-violet to-ui-violet contrast-more:from-ui-violet contrast-more:to-ui-violet transition-[background-size_color]');
+            return tailwindMerge.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 tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-yellow to-ui-yellow contrast-more:from-ui-yellow contrast-more:to-ui-yellow transition-[background-size_color]');
+            return tailwindMerge.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 tailwindMerge.twJoin(multilineFillBaseClasses, 'from-ui-blue to-ui-blue contrast-more:from-ui-blue contrast-more:to-ui-blue transition-[background-size_color]');
+            return tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.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 tailwindMerge.twJoin(getMultilineFillXClasses(theme), 'bg-[position:100%_auto]');
@@ -975,7 +524,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':
@@ -1023,14 +572,15 @@ function Link({ type, theme = 'blue', className, ref, ...props }) {
         }
     };
     const linkClasses = getLinkClasses();
-    return jsxRuntime.jsx(Anchor, { ref: ref, ...props, className: twMerge(linkClasses, className) });
+    const LinkElement = as || Anchor;
+    return jsxRuntime.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':
@@ -1062,71 +612,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,
@@ -1203,7 +774,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;
@@ -1220,8 +791,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 === '*')
@@ -1246,7 +817,7 @@ function Input({ checked, className, defaultValue, description, descriptionProps
         }
     };
     const fieldContextType = getFieldContextType();
-    const fieldContext = defineField({
+    const initialFieldContext = defineField({
         type: fieldContextType,
         id: fieldContextID,
         invalid,
@@ -1258,13 +829,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 = react.useRef(undefined);
     const handleChange = e => {
         if (disabled) {
@@ -1276,32 +848,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'))
         : {};
@@ -1311,25 +917,25 @@ function Input({ checked, className, defaultValue, description, descriptionProps
     const restDescriptionProps = descriptionProps
         ? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
         : {};
-    return (jsxRuntime.jsxs(react$1.Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsxRuntime.jsx(react$1.Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsxRuntime.jsx(react$1.Input, { ...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 && (jsxRuntime.jsx(react$1.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+    return (jsxRuntime.jsxs(react$1.Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsxRuntime.jsx(react$1.Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsxRuntime.jsx(react$1.Input, { ...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 && (jsxRuntime.jsx(react$1.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';
@@ -1358,7 +964,7 @@ function SubmitButton({ children, className, 'aria-disabled': ariaDisabled, erro
             case 'incomplete':
                 return incomplete || 'Complete Form';
             case 'loading':
-                return (loading || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: 'animate-wave animation-delay-300 inline-block', children: "\u2022" }), jsxRuntime.jsx("span", { className: 'animate-wave animation-delay-150 inline-block', children: "\u2022" }), jsxRuntime.jsx("span", { className: 'animate-wave inline-block', children: "\u2022" })] })));
+                return (loading || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: 'inline-block animate-wave animation-delay-300', children: "\u2022" }), jsxRuntime.jsx("span", { className: 'inline-block animate-wave animation-delay-150', children: "\u2022" }), jsxRuntime.jsx("span", { className: 'inline-block animate-wave', children: "\u2022" })] })));
             case 'error':
                 return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [error || 'Error', ' ', jsxRuntime.jsx("span", { className: 'absolute top-1/2 ml-1.5 translate-y-[calc(-50%-1.5px)] text-2xl', children: "\u00D7" })] }));
             case 'success':
@@ -1368,7 +974,103 @@ function SubmitButton({ children, className, 'aria-disabled': ariaDisabled, erro
         }
     };
     const buttonText = getButtonText();
-    return (jsxRuntime.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 (jsxRuntime.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 = react.useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
+    if (Boolean(formContext?.find(field => field.id === fieldContextID)?.invalid))
+        invalid = true;
+    const initialFieldContext = defineField({
+        type: 'textarea',
+        id: fieldContextID,
+        invalid,
+        name,
+        required,
+        value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
+    });
+    react.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 = react.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 (jsxRuntime.jsxs(react$1.Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsxRuntime.jsx(react$1.Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsxRuntime.jsx(react$1.Textarea, { ...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 && (jsxRuntime.jsx(react$1.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+                    ? descriptionProps?.className(bag)
+                    : descriptionProps?.className), children: description }))] }));
 }
 
 // import { findComponentByType } from '../../utils'
@@ -1428,23 +1130,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();
@@ -2141,6 +1843,7 @@ exports.SquareAndPencil = SquareAndPencil;
 exports.SquareAndPencilFill = SquareAndPencilFill;
 exports.SubmitButton = SubmitButton;
 exports.TextBubble = TextBubble;
+exports.Textarea = Textarea;
 exports.ThreePeople = ThreePeople;
 exports.ThreeRectanglesDesktop = ThreeRectanglesDesktop;
 exports.ThreeRectanglesDesktopFill = ThreeRectanglesDesktopFill;
@@ -2150,45 +1853,7 @@ exports.TrashFill = TrashFill;
 exports.Tree = Tree;
 exports.UmbrellaFill = UmbrellaFill;
 exports.Xmark = xmark;
-exports.addClass = addClass;
-exports.currentMonthName = currentMonthName;
-exports.currentWeekdayName = currentWeekdayName;
-exports.daysInMonth = daysInMonth;
 exports.defineField = defineField;
-exports.easeOutExpo = easeOutExpo;
-exports.emailRegex = emailRegex;
-exports.extendMadoTailwindMerge = extendMadoTailwindMerge;
-exports.findComponentByType = findComponentByType;
-exports.firstOfMonth = firstOfMonth;
-exports.formatPhoneNumber = formatPhoneNumber;
-exports.getDate = getDate;
-exports.getHours = getHours;
-exports.getHoursIn12 = getHoursIn12;
-exports.getMeridianFromHour = getMeridianFromHour;
-exports.getMilliseconds = getMilliseconds;
-exports.getMinutes = getMinutes;
-exports.getMonth = getMonth;
-exports.getMonthIndexFromName = getMonthIndexFromName;
-exports.getMonthName = getMonthName;
-exports.getNextMonth = getNextMonth;
-exports.getPreviousMonth = getPreviousMonth;
-exports.getSeconds = getSeconds;
-exports.getUserReadableDate = getUserReadableDate;
-exports.getUserReadableDateFromTimestampz = getUserReadableDateFromTimestampz;
-exports.getWeekdayName = getWeekdayName;
-exports.getYearsInRange = getYearsInRange;
-exports.hasClass = hasClass;
-exports.isEmail = isEmail;
-exports.isPhoneNumber = isPhoneNumber;
-exports.monthNamesList = monthNamesList;
-exports.removeClass = removeClass;
-exports.telRegex = telRegex;
-exports.toFullDateString = toFullDateString;
-exports.toLowerCase = toLowerCase;
-exports.toggleClass = toggleClass;
-exports.twMerge = twMerge;
-exports.twSort = twSort;
 exports.useFormContext = useFormContext;
 exports.useFormStatus = useFormStatus;
-exports.weekdayNamesList = weekdayNamesList;
 //# sourceMappingURL=index.js.map