mado-ui 0.2.0 → 0.2.2

package/dist/components.esm.js

@@ -0,0 +1,1329 @@
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { extendTailwindMerge, twJoin } from 'tailwind-merge';
+import { Children, isValidElement, Fragment, createContext, useContext, useSyncExternalStore, useRef, Suspense, useId, useEffect, useState, cloneElement } from 'react';
+import { Button as Button$1, Field, Label, Input as Input$1, Description, Textarea as Textarea$1, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
+import { createPortal } from 'react-dom';
+
+const integerList = Array.from({ length: 100 }, (_, i) => `${i + 1}`);
+const twMerge = extendTailwindMerge({
+    extend: {
+        theme: {
+            color: [
+                {
+                    ui: [
+                        'red',
+                        'orange',
+                        'yellow',
+                        'green',
+                        'sky-blue',
+                        'blue',
+                        'violet',
+                        'magenta',
+                        'purple',
+                        'brown',
+                        'grey',
+                        'pink',
+                    ],
+                },
+            ],
+        },
+        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'],
+        },
+    },
+});
+
+/** 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 */
+d.getFullYear();
+/** An array of the names of month in order */
+const monthNamesList = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+/** An array of the names of the days of the week in order */
+const weekdayNamesList = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+];
+/** The name of the current month */
+getMonthName();
+/** The name of the current day of the week */
+getWeekdayName();
+/**
+ * ### Get Date
+ * - Returns the date with two digits
+ * @param {number|Date} date The date to get date
+ * @returns {string} The date with two digits
+ */
+function getDate(date = d) {
+    if (typeof date !== 'number')
+        date = date.getDate();
+    let formattedDate = date.toString();
+    if (formattedDate.length === 1)
+        formattedDate = `0${formattedDate}`;
+    return formattedDate;
+}
+/**
+ * ### Get Hours
+ * - Returns the hours with two digits
+ * @param {number|Date} hours The date to get hours
+ * @returns {string} The hours with two digits
+ */
+function getHours(hours = d) {
+    if (typeof hours !== 'number')
+        hours = hours.getHours();
+    let formattedHours = hours.toString();
+    if (formattedHours.length === 1)
+        formattedHours = `0${formattedHours}`;
+    return formattedHours;
+}
+/**
+ * ### Get Milliseconds
+ * - Returns the milliseconds with two digits
+ * @param {number|Date} milliseconds The date to get milliseconds
+ * @returns {string} The milliseconds with two digits
+ */
+function getMilliseconds(milliseconds = d) {
+    if (typeof milliseconds !== 'number')
+        milliseconds = milliseconds.getMilliseconds();
+    let formattedMilliseconds = minutes.toString();
+    if (formattedMilliseconds.length === 1)
+        formattedMilliseconds = `0${formattedMilliseconds}`;
+    return formattedMilliseconds;
+}
+/**
+ * ### Get Minutes
+ * - Returns the minutes with two digits
+ * @param {number|Date} minutes The date to get minutes
+ * @returns {string} The minutes with two digits
+ */
+function getMinutes(minutes = d) {
+    if (typeof minutes !== 'number')
+        minutes = minutes.getMinutes();
+    let formattedMinutes = minutes.toString();
+    if (formattedMinutes.length === 1)
+        formattedMinutes = `0${formattedMinutes}`;
+    return formattedMinutes;
+}
+/**
+ * ### Get Month
+ * - Returns the month with two digits
+ * @param {number|Date} month The date to get month
+ * @returns {string} The month with two digits
+ */
+function getMonth(month = d) {
+    if (typeof month !== 'number')
+        month = month.getMonth() + 1;
+    let formattedMonth = month.toString();
+    if (formattedMonth.length === 1)
+        formattedMonth = `0${formattedMonth}`;
+    return formattedMonth;
+}
+/**
+ * ### Get Month Name
+ * - Returns the name of the specified month
+ * @param {Date} date A Date object representing the month to get the name of the month from. (Preset to the current date)
+ * @returns {MonthName} The name of the specified month
+ */
+function getMonthName(date = d) {
+    if (typeof date === 'number')
+        return monthNamesList[date];
+    return monthNamesList[date.getMonth()];
+}
+/**
+ * ### Get Seconds
+ * - Returns the seconds with two digits
+ * @param {number|Date} seconds The date to get seconds
+ * @returns {string} The seconds with two digits
+ */
+function getSeconds(seconds = d) {
+    if (typeof seconds !== 'number')
+        seconds = seconds.getSeconds();
+    let formattedSeconds = seconds.toString();
+    if (formattedSeconds.length === 1)
+        formattedSeconds = `0${formattedSeconds}`;
+    return formattedSeconds;
+}
+/**
+ * ### Get Weekday Name
+ * - Returns the weekday name of the specified day
+ * @param {number | Date} weekday A Date object or number representing the day to get the weekday name from. (Preset to the current date)
+ * @returns {WeekdayName} The name of the specified weekday
+ */
+function getWeekdayName(weekday = d) {
+    if (typeof weekday === 'number')
+        return weekdayNamesList[weekday];
+    // Return the name of the day of the week
+    return weekdayNamesList[weekday.getDay()];
+}
+
+function findComponentByType(children, componentType) {
+    const childrenArray = Children.toArray(children);
+    for (const child of childrenArray) {
+        if (isValidElement(child) && child.type === componentType)
+            return child;
+    }
+    for (const child of childrenArray) {
+        if (isValidElement(child)) {
+            if (child.type === Fragment && child.props.children) {
+                const found = findComponentByType(child.props.children, componentType);
+                if (found)
+                    return found;
+            }
+            else if (child.props.children) {
+                const found = findComponentByType(child.props.children, componentType);
+                if (found)
+                    return found;
+            }
+        }
+    }
+    return null;
+}
+
+function easeOutExpo(time, start, end, duration) {
+    return time == duration ? start + end : end * (-Math.pow(2, (-10 * time) / duration) + 1) + start;
+}
+
+const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+/**
+ * # Is Email
+ * Checks whether the specified string is in email format
+ */
+function isEmail(email) {
+    return emailRegex.test(email);
+}
+const telRegex = /(?:\+1\s|1\s|)?\d{3}\.\d{3}\.\d{4}|(?:\+1\s|1\s|)?\d{3}-\d{3}-\d{4}|(?:\+1\s|1\s|)?\(\d{3}\) \d{3}-\d{4}|(?:\+1\s|1\s|\+1|1|)?\d{10}/;
+/**
+ * # Is Phone Number
+ * Checks whether the specified string is in phone number format
+ */
+function isPhoneNumber(tel) {
+    return telRegex.test(tel);
+}
+
+/**
+ * # Format Phone Number
+ * Converts any string containing at least 10 numbers to a formatted phone number
+ * @param {string} string
+ * @returns {string} string formatted (000) 000-0000
+ */
+function formatPhoneNumber(string, countryCode) {
+    return (`${`+${countryCode} ` }` +
+        string
+            .replace(/\D/g, '')
+            .slice(-10)
+            .split('')
+            .map((char, index) => {
+            if (index === 0)
+                return `(${char}`;
+            if (index === 2)
+                return `${char}) `;
+            if (index === 5)
+                return `${char}-`;
+            return char;
+        })
+            .join(''));
+}
+/**
+ * # To Lower Case
+ * Converts a string to lowercase, and offers easy string replacements for creating snake case, kebab case, or your own.
+ * @param str - The string to convert to lowercase.
+ * @param options - Configuration options.
+ * @param options[0] - The delimiter to split the string. Defaults to space.
+ * @param options[1] - The string to join the parts back together. Defaults to space.
+ * @returns The lowercase version of the input string, with the replacements, if provided.
+ */
+function toLowerCase(str, [delimiter, joiner]) {
+    return str.toLowerCase().replaceAll(delimiter || ' ', joiner || ' ');
+}
+
+function twSort(className) {
+    return className;
+}
+
+function Anchor({ className, disabled, href, onClick, ref, target, rel, ...props }) {
+    const isExternal = `${href}`.startsWith('http'), hasHash = `${href}`.includes('#');
+    const handleClick = e => {
+        if (disabled)
+            return e.preventDefault();
+        onClick?.(e);
+        setTimeout(() => history.replaceState({}, document.title, location.pathname), 100);
+    };
+    return (jsx("a", { ref: ref, ...props, "aria-disabled": disabled, className: twMerge(className, disabled && 'pointer-events-none'), href: href, target: target || (isExternal ? '_blank' : '_self'), onClick: hasHash ? handleClick : onClick, rel: rel !== undefined
+            ? rel === 'nofollow'
+                ? `${rel} noreferrer noopener`
+                : `${rel} prefetch`
+            : isExternal
+                ? 'nofollow noreferrer noopener'
+                : 'prefetch' }));
+}
+// * Styles
+const baseClasses = twSort('isolate inline-block cursor-pointer duration-300 ease-exponential after:absolute after:left-1/2 after:-z-10 after:-translate-x-1/2 after:duration-500 active:scale-95 active:after:opacity-100');
+const lineStaticClasses = twJoin(baseClasses, 'whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border-1 after:border-current');
+const lineClasses = twJoin(lineStaticClasses, 'whitespace-nowrap transition-transform after:transition-transform after:ease-exponential');
+const scaleXClasses = 'after:scale-x-0 pointer-fine:hover:after:scale-x-100 active:after:scale-x-100';
+const scaleYClasses = 'after:scale-y-0 pointer-fine:hover:after:scale-y-100 active:after:scale-y-100';
+const lineNormalClasses = twJoin([
+    lineClasses,
+    scaleYClasses,
+    'after:origin-bottom after:translate-y-0.5 active:after:translate-y-0 pointer-fine:hover:after:translate-y-0',
+]);
+const lineLtrClasses = twJoin([lineClasses, scaleXClasses, 'after:origin-left']);
+const lineRtlClasses = twJoin([lineClasses, scaleXClasses, 'after:origin-right']);
+const lineCenterClasses = twJoin([lineClasses, scaleXClasses]);
+const lineLiftClasses = twJoin([
+    lineClasses,
+    scaleYClasses,
+    'after:origin-bottom after:translate-y-1 after:scale-x-75 active:after:translate-y-0 active:after:scale-x-100 pointer-fine:hover:after:translate-y-0 pointer-fine:hover:after:scale-x-100',
+]);
+const fillClasses = twJoin(baseClasses, 'whitespace-nowrap transition-[transform_color] after:top-1/2 after:h-[calc(100%+0.05rem)] after:w-[calc(100%+0.25rem)] after:-translate-y-1/2 after:rounded after:ease-exponential active:text-zinc-50 pointer-fine:hover:text-zinc-50');
+// Define theme-specific fill color transition classes
+const getFillColorTransitionClasses = (theme = 'blue') => {
+    switch (theme) {
+        case 'brown':
+            return twJoin(fillClasses, 'after:bg-ui-brown after:transition-transform contrast-more:after:bg-ui-brown');
+        case 'green':
+            return twJoin(fillClasses, 'after:bg-ui-green after:transition-transform contrast-more:after:bg-ui-green');
+        case 'grey':
+            return twJoin(fillClasses, 'after:bg-ui-grey after:transition-transform contrast-more:after:bg-ui-grey');
+        case 'sky-blue':
+            return twJoin(fillClasses, 'after:bg-ui-sky-blue after:transition-transform contrast-more:after:bg-ui-sky-blue');
+        case 'magenta':
+            return twJoin(fillClasses, 'after:bg-ui-magenta after:transition-transform contrast-more:after:bg-ui-magenta');
+        case 'neutral':
+            return twJoin(fillClasses, 'after:bg-zinc-700 after:transition-transform contrast-more:after:bg-zinc-700 dark:after:bg-zinc-300 dark:contrast-more:after:bg-zinc-300');
+        case 'orange':
+            return twJoin(fillClasses, 'after:bg-ui-orange after:transition-transform contrast-more:after:bg-ui-orange');
+        case 'pink':
+            return twJoin(fillClasses, 'after:bg-ui-pink after:transition-transform contrast-more:after:bg-ui-pink');
+        case 'purple':
+            return twJoin(fillClasses, 'after:bg-ui-purple after:transition-transform contrast-more:after:bg-ui-purple');
+        case 'red':
+            return twJoin(fillClasses, 'after:bg-ui-red after:transition-transform contrast-more:after:bg-ui-red');
+        case 'violet':
+            return twJoin(fillClasses, 'after:bg-ui-violet after:transition-transform contrast-more:after:bg-ui-violet');
+        case 'yellow':
+            return twJoin(fillClasses, 'after:bg-ui-yellow after:transition-transform contrast-more:after:bg-ui-yellow');
+        case 'blue':
+        default:
+            return twJoin(fillClasses, 'after:bg-ui-blue after:transition-transform contrast-more:after:bg-ui-blue');
+    }
+};
+// Define theme-specific fill center classes
+const getFillCenterClasses = (theme = 'blue') => {
+    switch (theme) {
+        case 'brown':
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-brown/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-brown pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-brown');
+        case 'green':
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-green/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-green pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-green');
+        case 'grey':
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-grey/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-grey pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-grey');
+        case 'sky-blue':
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-sky-blue/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-sky-blue pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-sky-blue');
+        case 'magenta':
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-magenta/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-magenta pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-magenta');
+        case 'neutral':
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-zinc-700/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-zinc-700 dark:after:bg-zinc-300/0 dark:active:after:bg-zinc-300 pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-zinc-700 dark:pointer-fine:hover:after:bg-zinc-300');
+        case 'orange':
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-orange/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-orange pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-orange');
+        case 'pink':
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-pink/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-pink pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-pink');
+        case 'purple':
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-purple/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-purple pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-purple');
+        case 'red':
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-red/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-red pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-red');
+        case 'violet':
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-violet/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-violet pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-violet');
+        case 'yellow':
+            return twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-ui-yellow/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-ui-yellow pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-ui-yellow');
+        case 'blue':
+        default:
+            return twJoin(fillClasses, 'after: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('underline-offset-1 active:underline pointer-fine:hover:underline');
+const multilineClasses = twJoin(multilineBaseClasses, 'duration-500 ease-exponential');
+const multilineLineClasses = twJoin(multilineClasses, 'bg-[position:0%_100%] px-px pb-px transition-[background-size]');
+const multilineXClasses = twJoin(multilineLineClasses, 'bg-[size:0%_2px] focus-visible:bg-[size:100%_2px] active:bg-[size:100%_2px] pointer-fine:hover:bg-[size:100%_2px]');
+const multilineLineRtlClasses = twJoin([multilineXClasses, 'bg-[position:100%_100%]']);
+const multilineLineCenterClasses = twJoin([multilineXClasses, 'bg-[position:50%_100%]']);
+const multilineLineLiftClasses = twJoin(multilineLineClasses, 'bg-[size:auto_0px] focus-visible:bg-[size:auto_2px] active:bg-[size:auto_2px] pointer-fine:hover:bg-[size:auto_2px]');
+const multilineFillBaseClasses = twJoin(multilineBaseClasses, 'rounded px-0.5 py-0.75 focus-visible:text-zinc-50 active:text-zinc-50 pointer-fine:hover:text-zinc-50');
+const getMultilineFillColorClasses = (theme = 'blue') => {
+    switch (theme) {
+        case 'brown':
+            return twJoin(multilineFillBaseClasses, 'from-ui-brown to-ui-brown transition-[background-size_color] contrast-more:from-ui-brown contrast-more:to-ui-brown');
+        case 'green':
+            return twJoin(multilineFillBaseClasses, 'from-ui-green to-ui-green transition-[background-size_color] contrast-more:from-ui-green contrast-more:to-ui-green');
+        case 'grey':
+            return twJoin(multilineFillBaseClasses, 'from-ui-grey to-ui-grey transition-[background-size_color] contrast-more:from-ui-grey contrast-more:to-ui-grey');
+        case 'sky-blue':
+            return twJoin(multilineFillBaseClasses, 'from-ui-sky-blue to-ui-sky-blue transition-[background-size_color] contrast-more:from-ui-sky-blue contrast-more:to-ui-sky-blue');
+        case 'magenta':
+            return twJoin(multilineFillBaseClasses, 'from-ui-magenta to-ui-magenta transition-[background-size_color] contrast-more:from-ui-magenta contrast-more:to-ui-magenta');
+        case 'neutral':
+            return twJoin(multilineFillBaseClasses, 'from-zinc-700 to-zinc-700 transition-[background-size_color] contrast-more:from-zinc-700 contrast-more:to-zinc-700 dark:from-zinc-300 dark:to-zinc-300 dark:contrast-more:from-zinc-300 dark:contrast-more:to-zinc-300');
+        case 'orange':
+            return twJoin(multilineFillBaseClasses, 'from-ui-orange to-ui-orange transition-[background-size_color] contrast-more:from-ui-orange contrast-more:to-ui-orange');
+        case 'pink':
+            return twJoin(multilineFillBaseClasses, 'from-ui-pink to-ui-pink transition-[background-size_color] contrast-more:from-ui-pink contrast-more:to-ui-pink');
+        case 'purple':
+            return twJoin(multilineFillBaseClasses, 'from-ui-purple to-ui-purple transition-[background-size_color] contrast-more:from-ui-purple contrast-more:to-ui-purple');
+        case 'red':
+            return twJoin(multilineFillBaseClasses, 'from-ui-red to-ui-red transition-[background-size_color] contrast-more:from-ui-red contrast-more:to-ui-red');
+        case 'violet':
+            return twJoin(multilineFillBaseClasses, 'from-ui-violet to-ui-violet transition-[background-size_color] contrast-more:from-ui-violet contrast-more:to-ui-violet');
+        case 'yellow':
+            return twJoin(multilineFillBaseClasses, 'from-ui-yellow to-ui-yellow transition-[background-size_color] contrast-more:from-ui-yellow contrast-more:to-ui-yellow');
+        case 'blue':
+        default:
+            return twJoin(multilineFillBaseClasses, 'from-ui-blue to-ui-blue transition-[background-size_color] contrast-more:from-ui-blue contrast-more:to-ui-blue');
+    }
+};
+// Define theme-specific multiline fill classes
+const getMultilineFillClasses = (theme = 'blue') => {
+    switch (theme) {
+        case 'brown':
+            return twJoin(multilineFillBaseClasses, 'from-ui-brown/0 to-ui-brown/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-brown focus-visible:to-ui-brown focus-visible:bg-[size:100%_100%] active:from-ui-brown active:to-ui-brown active:bg-[size:100%_100%] contrast-more:from-ui-brown/0 contrast-more:to-ui-brown/0 focus-visible:contrast-more:from-ui-brown focus-visible:contrast-more:to-ui-brown active:contrast-more:from-ui-brown active:contrast-more:to-ui-brown pointer-fine:hover:from-ui-brown pointer-fine:hover:to-ui-brown pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-brown pointer-fine:hover:contrast-more:to-ui-brown');
+        case 'green':
+            return twJoin(multilineFillBaseClasses, 'from-ui-green/0 to-ui-green/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-green focus-visible:to-ui-green focus-visible:bg-[size:100%_100%] active:from-ui-green active:to-ui-green active:bg-[size:100%_100%] contrast-more:from-ui-green/0 contrast-more:to-ui-green/0 focus-visible:contrast-more:from-ui-green focus-visible:contrast-more:to-ui-green active:contrast-more:from-ui-green active:contrast-more:to-ui-green pointer-fine:hover:from-ui-green pointer-fine:hover:to-ui-green pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-green pointer-fine:hover:contrast-more:to-ui-green');
+        case 'grey':
+            return twJoin(multilineFillBaseClasses, 'from-ui-grey/0 to-ui-grey/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-grey focus-visible:to-ui-grey focus-visible:bg-[size:100%_100%] active:from-ui-grey active:to-ui-grey active:bg-[size:100%_100%] contrast-more:from-ui-grey/0 contrast-more:to-ui-grey/0 focus-visible:contrast-more:from-ui-grey focus-visible:contrast-more:to-ui-grey active:contrast-more:from-ui-grey active:contrast-more:to-ui-grey pointer-fine:hover:from-ui-grey pointer-fine:hover:to-ui-grey pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-grey pointer-fine:hover:contrast-more:to-ui-grey');
+        case 'sky-blue':
+            return twJoin(multilineFillBaseClasses, 'from-ui-sky-blue/0 to-ui-sky-blue/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-sky-blue focus-visible:to-ui-sky-blue focus-visible:bg-[size:100%_100%] active:from-ui-sky-blue active:to-ui-sky-blue active:bg-[size:100%_100%] contrast-more:from-ui-sky-blue/0 contrast-more:to-ui-sky-blue/0 focus-visible:contrast-more:from-ui-sky-blue focus-visible:contrast-more:to-ui-sky-blue active:contrast-more:from-ui-sky-blue active:contrast-more:to-ui-sky-blue pointer-fine:hover:from-ui-sky-blue pointer-fine:hover:to-ui-sky-blue pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-sky-blue pointer-fine:hover:contrast-more:to-ui-sky-blue');
+        case 'magenta':
+            return twJoin(multilineFillBaseClasses, 'from-ui-magenta/0 to-ui-magenta/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-magenta focus-visible:to-ui-magenta focus-visible:bg-[size:100%_100%] active:from-ui-magenta active:to-ui-magenta active:bg-[size:100%_100%] contrast-more:from-ui-magenta/0 contrast-more:to-ui-magenta/0 focus-visible:contrast-more:from-ui-magenta focus-visible:contrast-more:to-ui-magenta active:contrast-more:from-ui-magenta active:contrast-more:to-ui-magenta pointer-fine:hover:from-ui-magenta pointer-fine:hover:to-ui-magenta pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-magenta pointer-fine:hover:contrast-more:to-ui-magenta');
+        case 'neutral':
+            return twJoin(multilineFillBaseClasses, 'from-zinc-700/0 to-zinc-700/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-zinc-700 focus-visible:to-zinc-700 focus-visible:bg-[size:100%_100%] active:from-zinc-700 active:to-zinc-700 active:bg-[size:100%_100%] contrast-more:from-zinc-700/0 contrast-more:to-zinc-700/0 focus-visible:contrast-more:from-zinc-700 focus-visible:contrast-more:to-zinc-700 active:contrast-more:from-zinc-700 active:contrast-more:to-zinc-700 dark:from-zinc-300/0 dark:to-zinc-300/0 dark:focus-visible:from-zinc-300 dark:focus-visible:to-zinc-300 dark:active:from-zinc-300 dark:active:to-zinc-300 dark:contrast-more:from-zinc-300/0 dark:contrast-more:to-zinc-300/0 dark:focus-visible:contrast-more:from-zinc-300 dark:focus-visible:contrast-more:to-zinc-300 dark:active:contrast-more:from-zinc-300 dark:active:contrast-more:to-zinc-300 pointer-fine:hover:from-zinc-700 pointer-fine:hover:to-zinc-700 pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-zinc-700 pointer-fine:hover:contrast-more:to-zinc-700 dark:pointer-fine:hover:from-zinc-300 dark:pointer-fine:hover:to-zinc-300 dark:pointer-fine:hover:contrast-more:from-zinc-300 dark:pointer-fine:hover:contrast-more:to-zinc-300');
+        case 'orange':
+            return twJoin(multilineFillBaseClasses, 'from-ui-orange/0 to-ui-orange/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-orange focus-visible:to-ui-orange focus-visible:bg-[size:100%_100%] active:from-ui-orange active:to-ui-orange active:bg-[size:100%_100%] contrast-more:from-ui-orange/0 contrast-more:to-ui-orange/0 focus-visible:contrast-more:from-ui-orange focus-visible:contrast-more:to-ui-orange active:contrast-more:from-ui-orange active:contrast-more:to-ui-orange pointer-fine:hover:from-ui-orange pointer-fine:hover:to-ui-orange pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-orange pointer-fine:hover:contrast-more:to-ui-orange');
+        case 'pink':
+            return twJoin(multilineFillBaseClasses, 'from-ui-pink/0 to-ui-pink/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-pink focus-visible:to-ui-pink focus-visible:bg-[size:100%_100%] active:from-ui-pink active:to-ui-pink active:bg-[size:100%_100%] contrast-more:from-ui-pink/0 contrast-more:to-ui-pink/0 focus-visible:contrast-more:from-ui-pink focus-visible:contrast-more:to-ui-pink active:contrast-more:from-ui-pink active:contrast-more:to-ui-pink pointer-fine:hover:from-ui-pink pointer-fine:hover:to-ui-pink pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-pink pointer-fine:hover:contrast-more:to-ui-pink');
+        case 'purple':
+            return twJoin(multilineFillBaseClasses, 'from-ui-purple/0 to-ui-purple/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-purple focus-visible:to-ui-purple focus-visible:bg-[size:100%_100%] active:from-ui-purple active:to-ui-purple active:bg-[size:100%_100%] contrast-more:from-ui-purple/0 contrast-more:to-ui-purple/0 focus-visible:contrast-more:from-ui-purple focus-visible:contrast-more:to-ui-purple active:contrast-more:from-ui-purple active:contrast-more:to-ui-purple pointer-fine:hover:from-ui-purple pointer-fine:hover:to-ui-purple pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-purple pointer-fine:hover:contrast-more:to-ui-purple');
+        case 'red':
+            return twJoin(multilineFillBaseClasses, 'from-ui-red/0 to-ui-red/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-red focus-visible:to-ui-red focus-visible:bg-[size:100%_100%] active:from-ui-red active:to-ui-red active:bg-[size:100%_100%] contrast-more:from-ui-red/0 contrast-more:to-ui-red/0 focus-visible:contrast-more:from-ui-red focus-visible:contrast-more:to-ui-red active:contrast-more:from-ui-red active:contrast-more:to-ui-red pointer-fine:hover:from-ui-red pointer-fine:hover:to-ui-red pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-red pointer-fine:hover:contrast-more:to-ui-red');
+        case 'violet':
+            return twJoin(multilineFillBaseClasses, 'from-ui-violet/0 to-ui-violet/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-violet focus-visible:to-ui-violet focus-visible:bg-[size:100%_100%] active:from-ui-violet active:to-ui-violet active:bg-[size:100%_100%] contrast-more:from-ui-violet/0 contrast-more:to-ui-violet/0 focus-visible:contrast-more:from-ui-violet focus-visible:contrast-more:to-ui-violet active:contrast-more:from-ui-violet active:contrast-more:to-ui-violet pointer-fine:hover:from-ui-violet pointer-fine:hover:to-ui-violet pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-violet pointer-fine:hover:contrast-more:to-ui-violet');
+        case 'yellow':
+            return twJoin(multilineFillBaseClasses, 'from-ui-yellow/0 to-ui-yellow/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-yellow focus-visible:to-ui-yellow focus-visible:bg-[size:100%_100%] active:from-ui-yellow active:to-ui-yellow active:bg-[size:100%_100%] contrast-more:from-ui-yellow/0 contrast-more:to-ui-yellow/0 focus-visible:contrast-more:from-ui-yellow focus-visible:contrast-more:to-ui-yellow active:contrast-more:from-ui-yellow active:contrast-more:to-ui-yellow pointer-fine:hover:from-ui-yellow pointer-fine:hover:to-ui-yellow pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-yellow pointer-fine:hover:contrast-more:to-ui-yellow');
+        case 'blue':
+        default:
+            return twJoin(multilineFillBaseClasses, 'from-ui-blue/0 to-ui-blue/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-ui-blue focus-visible:to-ui-blue focus-visible:bg-[size:100%_100%] active:from-ui-blue active:to-ui-blue active:bg-[size:100%_100%] contrast-more:from-ui-blue/0 contrast-more:to-ui-blue/0 focus-visible:contrast-more:from-ui-blue focus-visible:contrast-more:to-ui-blue active:contrast-more:from-ui-blue active:contrast-more:to-ui-blue pointer-fine:hover:from-ui-blue pointer-fine:hover:to-ui-blue pointer-fine:hover:bg-[size:100%_100%] pointer-fine:hover:contrast-more:from-ui-blue pointer-fine:hover:contrast-more:to-ui-blue');
+    }
+};
+const getMultilineFillLiftClasses = (theme = 'blue') => {
+    return twJoin(getMultilineFillColorClasses(theme), 'bg-[size:auto_0px] bg-[position:50%_100%] focus-visible:bg-[size:auto_100%] active:bg-[size:auto_100%] pointer-fine:hover:bg-[size:auto_100%]');
+};
+const getMultilineFillXClasses = (theme = 'blue') => {
+    return twJoin(getMultilineFillColorClasses(theme), 'bg-[size:0%_100%] focus-visible:bg-[size:100%_100%] active:bg-[size:100%_100%] pointer-fine:hover:bg-[size:100%_100%]');
+};
+const getMultilineFillRtlClasses = (theme = 'blue') => {
+    return twJoin(getMultilineFillXClasses(theme), 'bg-[position:100%_auto]');
+};
+const getMultilineFillCenterClasses = (theme = 'blue') => {
+    return twJoin(getMultilineFillXClasses(theme), 'bg-[position:50%_auto]');
+};
+/**
+ * # Link
+ *
+ * - A component for rendering links with various styles and options.
+ * - Utilizes the Next.js `Link` component and provides additional functionality.
+ *
+ * ---
+ *
+ * ## Styles
+ *
+ * This component includes various classes to style the link. The styles are divided into two types:
+ *
+ * - Line styles: These styles add a line underneath the link, and include variations for different positions and orientations.
+ * - Fill styles: These styles add a background color behind the link, and include variations for different positions and orientations.
+ * - Multiline styles: These styles seek to accomplish the same as the line and fill styles, while offering multiline support.
+ *
+ * ---
+ *
+ * ## Examples
+ *
+ * @example
+ *   <Link href='/about' type='ltr' title='About Us'>Learn more about our company</Link>
+ *
+ * @example
+ *   <Link href='/about' type='fill-ltr' title='About Us'>Learn more about our company</Link>
+ *
+ * @example
+ *   <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
+ */
+function Link({ as, className, ref, theme = 'blue', type, ...props }) {
+    const getLinkClasses = () => {
+        switch (type) {
+            case 'static':
+                return lineStaticClasses;
+            case 'ltr':
+                return lineLtrClasses;
+            case 'rtl':
+                return lineRtlClasses;
+            case 'center':
+                return lineCenterClasses;
+            case 'lift':
+                return lineLiftClasses;
+            case 'fill':
+                return getFillCenterClasses(theme);
+            case 'fill-ltr':
+                return twJoin([getFillColorTransitionClasses(theme), scaleXClasses, 'after:origin-left']);
+            case 'fill-rtl':
+                return twJoin([getFillColorTransitionClasses(theme), scaleXClasses, 'after:origin-right']);
+            case 'fill-lift':
+                return twJoin([getFillColorTransitionClasses(theme), scaleYClasses, 'after:origin-bottom']);
+            case 'multiline':
+                return multilineNormalClasses;
+            case 'multiline-static':
+                return multilineLineStaticClasses;
+            case 'multiline-ltr':
+                return multilineXClasses;
+            case 'multiline-rtl':
+                return multilineLineRtlClasses;
+            case 'multiline-center':
+                return multilineLineCenterClasses;
+            case 'multiline-lift':
+                return multilineLineLiftClasses;
+            case 'multiline-fill':
+                return getMultilineFillClasses(theme);
+            case 'multiline-fill-ltr':
+                return getMultilineFillXClasses(theme);
+            case 'multiline-fill-rtl':
+                return getMultilineFillRtlClasses(theme);
+            case 'multiline-fill-center':
+                return getMultilineFillCenterClasses(theme);
+            case 'multiline-fill-lift':
+                return getMultilineFillLiftClasses(theme);
+            default:
+                return lineNormalClasses;
+        }
+    };
+    const linkClasses = getLinkClasses();
+    const LinkElement = as || Anchor;
+    return jsx(LinkElement, { ...props, className: twMerge(linkClasses, className), ref: ref });
+}
+
+/**
+ * # Button
+ * - A pre-styled button with utility props for easy customization depending on use case.
+ */
+function Button({ className, padding = 'md', rounded = 'lg', theme = 'blue', ref, ...props }) {
+    const getPaddingClasses = () => {
+        switch (padding) {
+            case 'xs':
+                return 'px-2 py-0.5';
+            case 'sm':
+                return 'px-4 py-1';
+            case 'md':
+                return 'px-6 py-1.5';
+            case 'lg':
+                return 'px-8 py-2';
+            case 'xl':
+                return 'px-12 py-3';
+        }
+    };
+    const getRoundedClasses = () => {
+        switch (rounded) {
+            case 'xs':
+                return 'rounded-sm';
+            case 'sm':
+                return 'rounded-md';
+            case 'md':
+                return 'rounded-lg';
+            case 'lg':
+                return 'rounded-xl';
+            case 'xl':
+                return 'rounded-3xl';
+            case 'full':
+                return 'rounded-full';
+        }
+    };
+    const getThemeClasses = () => {
+        const classList = [];
+        switch (theme) {
+            case 'blue':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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':
+                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([
+        '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,
+        className,
+    ]);
+    return 'href' in props && typeof props.href === 'string' ? (jsx(Anchor, { ref: ref, ...props, className: buttonClasses })) : (jsx(Button$1, { ref: ref, ...props, className: buttonClasses }));
+}
+
+function createFastContext(defaultInitialState) {
+    function useStoreData(initialState = defaultInitialState) {
+        const store = useRef(initialState), get = () => store.current, subscribers = useRef(new Set());
+        const set = (value) => {
+            if (typeof value === 'function') {
+                store.current = value(store.current);
+            }
+            else {
+                store.current = value;
+            }
+            subscribers.current.forEach(callback => callback());
+        };
+        const subscribe = (callback) => {
+            subscribers.current.add(callback);
+            return () => subscribers.current.delete(callback);
+        };
+        return {
+            get,
+            set,
+            subscribe,
+        };
+    }
+    const StoreContext = createContext(null);
+    function Provider({ initialValue = defaultInitialState, ...props }) {
+        return jsx(StoreContext.Provider, { value: useStoreData(initialValue), ...props });
+    }
+    function useStore(selector, initialValue) {
+        const store = useContext(StoreContext);
+        if (!store) {
+            const localStoreValue = initialValue !== undefined ? initialValue : defaultInitialState;
+            const selectedValue = selector(localStoreValue);
+            const noOpSet = () => console.warn('Attempting to set store value outside of Provider');
+            return [selectedValue, noOpSet];
+        }
+        const state = useSyncExternalStore(store.subscribe, () => selector(store.get()), () => selector(initialValue !== undefined ? initialValue : defaultInitialState));
+        return [state, store.set];
+    }
+    return {
+        Provider,
+        useStore,
+    };
+}
+
+/**
+ * # Define Field
+ *
+ * This is a helper function to define a field in a form context with type safety.
+ */
+function defineField(fieldDefinition) {
+    return fieldDefinition;
+}
+const { Provider: Provider$1, useStore: useStore$1 } = createFastContext([]);
+function FormContextProvider({ children }) {
+    return jsx(Provider$1, { children: children });
+}
+function useFormContext() {
+    return useStore$1(store => store);
+}
+
+const DEFAULT_STATUS = 'incomplete';
+const { Provider, useStore } = createFastContext(DEFAULT_STATUS);
+function FormStatusProvider({ children, initialStatus = DEFAULT_STATUS, }) {
+    return (jsx(Suspense, { children: jsx(Provider, { initialValue: initialStatus, children: children }) }));
+}
+function useFormStatus() {
+    return useStore(store => store);
+}
+
+function validateField$1(value, { required, type }) {
+    const noValue = !value || value === '';
+    if (!required && noValue)
+        return true;
+    if (noValue)
+        return false;
+    switch (type) {
+        case 'email':
+            return isEmail(value);
+        case 'number':
+            return !isNaN(Number(value));
+        case 'tel':
+            return isPhoneNumber(value);
+        default:
+            return true;
+    }
+}
+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 === '*')
+        label = name;
+    const uniqueID = useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
+    if (Boolean(formContext?.find(field => field.id === fieldContextID)?.invalid))
+        invalid = true;
+    const getFieldContextType = () => {
+        switch (type) {
+            case 'email':
+                return 'email';
+            case 'file':
+                return 'file';
+            case 'number':
+                return 'number';
+            case 'tel':
+                return 'tel';
+            case 'url':
+                return 'url';
+            default:
+                return 'string';
+        }
+    };
+    const fieldContextType = getFieldContextType();
+    const initialFieldContext = defineField({
+        type: fieldContextType,
+        id: fieldContextID,
+        invalid,
+        name,
+        required,
+        value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
+    });
+    useEffect(() => {
+        if (!setFormContext)
+            return;
+        setFormContext(prevContext => {
+            const otherFields = (prevContext || []).filter(field => field.id !== initialFieldContext.id);
+            return [...otherFields, initialFieldContext];
+        });
+        return () => {
+            setFormContext(prevContext => (prevContext || []).filter(field => field.id !== initialFieldContext.id));
+        };
+    }, [setFormContext]);
+    const fieldContext = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id) || initialFieldContext;
+    const debounceTimerRef = useRef(undefined);
+    const handleChange = e => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        clearTimeout(debounceTimerRef.current);
+        const { currentTarget } = e, { value: newValue } = currentTarget;
+        setFormContext?.(prevContext => {
+            if (!prevContext)
+                return [];
+            const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
+            if (!field)
+                throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
+            const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
+            const updatedField = { ...field, value: newValue };
+            return [...otherFields, updatedField];
+        });
+        debounceTimerRef.current = setTimeout(() => {
+            const field = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
+            if (!field)
+                return;
+            const invalid = validateField$1(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 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'))
+        : {};
+    const restLabelProps = labelProps
+        ? Object.fromEntries(Object.entries(labelProps).filter(([key]) => key !== 'className'))
+        : {};
+    const restDescriptionProps = descriptionProps
+        ? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
+        : {};
+    return (jsxs(Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsx(Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsx(Input$1, { ...props, className: bag => twMerge(
+                // Base styles
+                'rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50', 
+                // Pseudo styles
+                'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800', 
+                // user-invalid styles
+                'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]', 
+                // Custom styles
+                typeof className === 'function' ? className(bag) : className), id: fieldContext?.id, invalid: invalid, onBlur: handleBlur, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, type: type, value: fieldContext?.value }), description && (jsx(Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+                    ? descriptionProps?.className(bag)
+                    : descriptionProps?.className), children: description }))] }));
+}
+
+function SubmitButton({ children, className, error, incomplete, loading, success, theme, type = 'submit', ref, ...props }) {
+    const [formStatus] = useFormStatus();
+    const getFormStatusButtonClasses = () => {
+        switch (formStatus) {
+            case 'loading':
+                return twSort('animate-pulse cursor-wait text-lg leading-6 font-black tracking-widest');
+            case 'error':
+            case 'success':
+                return 'cursor-not-allowed';
+            default:
+                return undefined;
+        }
+    };
+    const formStatusButtonClasses = getFormStatusButtonClasses();
+    const getFormStatusButtonTheme = () => {
+        switch (formStatus) {
+            case 'incomplete':
+                return 'grey';
+            case 'loading':
+                return 'blue';
+            case 'error':
+                return 'red';
+            case 'success':
+                return 'green';
+            default:
+                return theme;
+        }
+    };
+    const formStatusButtonTheme = getFormStatusButtonTheme();
+    const getButtonText = () => {
+        switch (formStatus) {
+            case 'incomplete':
+                return incomplete || 'Complete Form';
+            case 'loading':
+                return (loading || (jsxs(Fragment$1, { children: [jsx("span", { className: 'inline-block animate-wave animation-delay-300', children: "\u2022" }), jsx("span", { className: 'inline-block animate-wave animation-delay-150', children: "\u2022" }), jsx("span", { className: 'inline-block animate-wave', children: "\u2022" })] })));
+            case 'error':
+                return (jsxs(Fragment$1, { children: [error || 'Error', ' ', jsx("span", { className: 'absolute top-1/2 ml-1.5 translate-y-[calc(-50%-1.5px)] text-2xl', children: "\u00D7" })] }));
+            case 'success':
+                return success || 'Successfully Submitted';
+            default:
+                return children || 'Submit';
+        }
+    };
+    const buttonText = getButtonText();
+    return (jsx(Button, { ...props, className: twMerge([formStatusButtonClasses, 'w-full', className]), ref: ref, theme: formStatusButtonTheme, type: type, children: buttonText }));
+}
+
+function validateField(value, { required }) {
+    const noValue = !value || value === '';
+    if (!required && noValue)
+        return true;
+    if (noValue)
+        return false;
+    return true;
+}
+function Textarea({ className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, name, onBlur, onChange, placeholder, ref, required = true, value, ...props }) {
+    const [formContext, setFormContext] = useFormContext();
+    if (placeholder === '*')
+        placeholder = name + (required && !label ? '*' : '');
+    if (label === '*')
+        label = name;
+    const uniqueID = useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
+    if (Boolean(formContext?.find(field => field.id === fieldContextID)?.invalid))
+        invalid = true;
+    const initialFieldContext = defineField({
+        type: 'textarea',
+        id: fieldContextID,
+        invalid,
+        name,
+        required,
+        value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
+    });
+    useEffect(() => {
+        if (!setFormContext)
+            return;
+        setFormContext(prevContext => {
+            const otherFields = (prevContext || []).filter(field => field.id !== initialFieldContext.id);
+            return [...otherFields, initialFieldContext];
+        });
+        return () => {
+            setFormContext(prevContext => (prevContext || []).filter(field => field.id !== initialFieldContext.id));
+        };
+    }, [setFormContext]);
+    const fieldContext = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id) || initialFieldContext;
+    const debounceTimerRef = useRef(undefined);
+    const handleChange = e => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        clearTimeout(debounceTimerRef.current);
+        const { currentTarget } = e, { value: newValue } = currentTarget;
+        setFormContext?.(prevContext => {
+            if (!prevContext)
+                return [];
+            const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
+            if (!field)
+                throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
+            const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
+            const updatedField = { ...field, value: newValue };
+            return [...otherFields, updatedField];
+        });
+        debounceTimerRef.current = setTimeout(() => {
+            const field = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
+            if (!field)
+                return;
+            const invalid = validateField(newValue, field) === false;
+            if (invalid !== field.invalid)
+                setFormContext?.(prevContext => {
+                    if (!prevContext)
+                        return [];
+                    const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
+                    if (!field)
+                        throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
+                    const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
+                    const updatedField = { ...field, invalid };
+                    return [...otherFields, updatedField];
+                });
+        }, 500);
+        onChange?.(e);
+    };
+    const restFieldProps = fieldProps
+        ? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
+        : {};
+    const restLabelProps = labelProps
+        ? Object.fromEntries(Object.entries(labelProps).filter(([key]) => key !== 'className'))
+        : {};
+    const restDescriptionProps = descriptionProps
+        ? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
+        : {};
+    return (jsxs(Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsx(Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsx(Textarea$1, { ...props, className: bag => twMerge(
+                // Base styles
+                'field-sizing-content resize-none rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50', 
+                // Pseudo styles
+                'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800', 
+                // user-invalid styles
+                'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]', 
+                // Custom styles
+                typeof className === 'function' ? className(bag) : className), id: fieldContext?.id, invalid: invalid, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, value: fieldContext?.value }), description && (jsx(Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+                    ? descriptionProps?.className(bag)
+                    : descriptionProps?.className), children: description }))] }));
+}
+
+// import { findComponentByType } from '../../utils'
+function FormComponent({ as, children, className, handleSubmit, onError, onSubmit, onSuccess, ...props }) {
+    const [formContext] = useFormContext(), [formStatus, setFormStatus] = useFormStatus();
+    // const submitButton = findComponentByType(children, SubmitButton)
+    useEffect(() => {
+        if (!formContext)
+            return;
+        if (formStatus !== 'incomplete' && formContext.find(({ invalid }) => invalid))
+            setFormStatus?.('incomplete');
+        if (formStatus !== 'ready' && formContext.every(({ invalid }) => !invalid))
+            setFormStatus?.('ready');
+    }, [formContext]);
+    const processSubmit = handleSubmit ||
+        (async (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setFormStatus?.('loading');
+            const response = await onSubmit?.({ event: e, formContext });
+            if (response && ('error' in response || response.status === 'error')) {
+                setFormStatus?.('error');
+                onError?.({ event: e, error: response.error || 'An error occurred when submitting the form.' });
+                return;
+            }
+            if ((response && response.status === 'success') || !response) {
+                setFormStatus?.('success');
+                onSuccess?.({ event: e });
+            }
+        });
+    const FormElement = as || 'form';
+    return (jsx(FormElement, { ...props, className: twMerge(className, 'grid gap-3'), onSubmit: processSubmit, children: children }));
+}
+function Form({ controlled = 'auto', initialStatus = 'incomplete', ...props }) {
+    const FormContextOrNotProvider = controlled === 'auto' ? FormContextProvider : Fragment;
+    return (jsx(FormStatusProvider, { initialStatus: initialStatus, children: jsx(FormContextOrNotProvider, { children: jsx(FormComponent, { ...props }) }) }));
+}
+
+function Ghost({ children, className, ...props }) {
+    return (jsx("div", { ...props, className: twMerge('block w-24 max-w-full animate-pulse rounded bg-white/50', className), children: children || jsx(Fragment$1, { children: "\u00A0" }) }));
+}
+
+function getTextFromChildren(children) {
+    let text = '';
+    Children.forEach(children, child => {
+        if (typeof child === 'string' || typeof child === 'number') {
+            text += child;
+        }
+        else if (isValidElement(child)) {
+            text += getTextFromChildren(child.props.children);
+        }
+    });
+    return text;
+}
+/**
+ * # Heading
+ * 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, customize, className, id, ref, ...props }) {
+    const H = as;
+    const targetableID = id || getTextFromChildren(children).replace(/\s+/g, '-').toLowerCase();
+    const getBaseClasses = () => {
+        switch (as) {
+            case 'h1':
+                return customize?.h1 || twSort('pb-2.5 text-6xl font-black last:pb-0');
+            case 'h3':
+                return customize?.h3 || twSort('pb-2 text-4xl font-extralight last:pb-0');
+            case 'h4':
+                return customize?.h4 || twSort('pb-2 text-3xl font-extrabold last:pb-0');
+            case 'h5':
+                return customize?.h5 || twSort('pb-1.5 text-2xl font-semibold last:pb-0');
+            case 'h6':
+                return customize?.h6 || twSort('pb-1 text-xl font-bold last:pb-0');
+            default:
+                return customize?.h2 || twSort('pb-2.5 text-5xl font-medium last:pb-0');
+        }
+    };
+    const baseClasses = getBaseClasses();
+    return (jsx(H, { ref: ref, id: targetableID, ...props, className: twMerge(baseClasses, className), children: children }));
+}
+
+function xmark(props) {
+    return (jsx("svg", { viewBox: '0 0 64 64', ...props, children: jsx("path", { d: 'M1,63c0.7,0.7,1.6,1,2.6,1s1.9-0.3,2.6-1L32,37.1L57.8,63c0.7,0.7,1.5,1,2.5,1c1,0,1.9-0.3,2.6-1c0.7-0.7,1-1.6,1-2.6 c0-1-0.3-1.8-1-2.5L37.1,32L63,6.2c0.7-0.7,1-1.6,1-2.6S63.7,1.7,63,1c-0.7-0.7-1.6-1-2.6-1c-1,0-1.8,0.3-2.5,1L32,26.9L6.2,1 C5.5,0.3,4.6,0,3.6,0C2.6,0,1.7,0.3,1,1C0.3,1.7,0,2.6,0,3.6c0,1,0.3,1.9,1,2.6L26.9,32L1,57.8c-0.7,0.7-1,1.5-1,2.6 C0,61.4,0.3,62.3,1,63z' }) }));
+}
+
+function ModalTrigger({ as, ...props }) {
+    const Element = as || Button$1;
+    return jsx(Element, { ...props });
+}
+function ModalDialog(props) {
+    return jsx("div", { ...props });
+}
+function Modal({ children, className, onClose, onOpen, place = 'bottom' }) {
+    const [bodyElement, setBodyElement] = useState(null);
+    useEffect(() => {
+        if (!bodyElement && typeof window !== 'undefined')
+            setBodyElement(document.body);
+    }, [bodyElement]);
+    const [isOpen, setIsOpen] = useState(false);
+    const dialogPanelRef = useRef(null), dragMoveBoxRef = useRef(null), 
+    // lastTouchYRef = useRef(0),
+    startDragCoords = useRef({ x: 0, y: 0 });
+    const [allowDragClose, setAllowDragClose] = useState(false), [readyToClose, setReadyToClose] = useState(false);
+    const openModal = () => {
+        console.log('open');
+        setIsOpen(true);
+        onOpen?.();
+    };
+    const closeModal = () => {
+        console.log('close');
+        setIsOpen(false);
+        onClose?.();
+    };
+    const enableClose = (clientX, clientY) => {
+        startDragCoords.current.x = clientX;
+        startDragCoords.current.y = clientY;
+        dialogPanelRef.current.style.transitionDuration = '0s';
+        setAllowDragClose(true);
+    };
+    const enableTouchClose = e => {
+        const { touches } = e, touch = touches[0], { clientY } = touch;
+        enableClose(0, clientY);
+    };
+    const enableMouseClose = e => {
+        const { clientX, clientY } = e;
+        enableClose(clientX, clientY);
+    };
+    const handleMove = (clientX, clientY) => {
+        if (!dialogPanelRef.current)
+            return;
+        let deltaX = clientX - startDragCoords.current.x, deltaY = clientY - startDragCoords.current.y;
+        if (deltaX > 0)
+            deltaX = easeOutExpo(Math.abs(deltaX), 0, 25, 5000);
+        if (deltaX < 0)
+            deltaX = -easeOutExpo(Math.abs(deltaX), 0, 25, 5000);
+        if (deltaY < 0)
+            deltaY = -easeOutExpo(Math.abs(deltaY), 0, 25, 2000);
+        if (deltaY >= 100 && !readyToClose) {
+            setReadyToClose(true);
+        }
+        else if (deltaY < 100 && readyToClose) {
+            setReadyToClose(false);
+        }
+        const greaterThanMediaSmall = innerWidth > 640;
+        dialogPanelRef.current.style.translate = `calc(-50% + ${deltaX}px) ${greaterThanMediaSmall ? `calc(-50% + ${deltaY}px)` : `${deltaY}px`}`;
+    };
+    const handleMouseMove = e => {
+        if (!allowDragClose)
+            return;
+        const { clientX, clientY } = e;
+        handleMove(clientX, clientY);
+    };
+    const disableDragClose = (clientY) => {
+        const deltaY = clientY - startDragCoords.current.y;
+        dialogPanelRef.current.style.transitionDuration = '';
+        if (deltaY >= 100) {
+            closeModal();
+            setReadyToClose(false);
+        }
+        else {
+            setTimeout(() => (dialogPanelRef.current.style.removeProperty('translate'), 50));
+        }
+    };
+    const disableMouseDragClose = e => {
+        if (allowDragClose)
+            setAllowDragClose(false);
+        const { clientY } = e;
+        disableDragClose(clientY);
+    };
+    const content = typeof children === 'function' ? children({ openModal, closeModal }) : children;
+    const dialogElement = findComponentByType(content, ModalDialog);
+    if (!dialogElement)
+        throw new Error('ModalDialog must be defined in Modal children');
+    let triggerElement = null;
+    if (typeof children !== 'function') {
+        triggerElement = findComponentByType(content, ModalTrigger);
+        if (!triggerElement)
+            throw new Error('ModalTrigger must be provided when not using render prop pattern');
+    }
+    else {
+        triggerElement = findComponentByType(content, ModalTrigger);
+    }
+    return (jsxs(Fragment$1, { children: [allowDragClose &&
+                bodyElement &&
+                createPortal(jsx("div", { ref: dragMoveBoxRef, className: 'z-99 pointer-coarse:hidden fixed inset-0 h-dvh w-screen bg-transparent active:cursor-grabbing', onMouseMove: handleMouseMove, onMouseUp: disableMouseDragClose }), bodyElement), triggerElement &&
+                cloneElement(triggerElement, { onClick: openModal }), jsxs(Dialog, { open: isOpen, onClose: closeModal, className: [
+                    'isolate z-50',
+                    place === 'bottom' &&
+                        'after:fixed after:inset-x-0 after:bottom-0 after:-z-10 after:h-16 after:bg-neutral-50 sm:after:hidden',
+                ].join(' '), children: [jsx(DialogBackdrop, { transition: true, className: [
+                            'duration-750 ease-exponential data-closed:opacity-0 fixed inset-0 cursor-pointer transition-[opacity_background-color_backdrop-filter_-webkit-backdrop-filter] delay-100',
+                            readyToClose
+                                ? 'bg-neutral-50/5 backdrop-blur-[1px] dark:bg-neutral-950/5'
+                                : 'bg-neutral-50/25 backdrop-blur-sm dark:bg-neutral-950/25',
+                        ].join(' '), children: jsx(Button, { theme: 'blue', padding: 'none', rounded: 'full', className: 'group/button pointer-fine:hover:w-20 fixed right-4 top-4 h-7 w-7 overflow-x-hidden transition-[scale_width_filter]', children: jsxs("div", { className: 'pointer-fine:group-hover/button:-translate-x-0.5 ease-exponential absolute right-1 top-1 flex items-center gap-1 pt-px transition-transform duration-300', children: [jsxs("span", { className: 'block text-xs font-medium uppercase leading-none text-neutral-50', children: ["Close", jsx("span", { className: 'sr-only', children: " Modal" })] }), jsx(xmark, { className: '-top-px block size-5 rotate-90 scale-75 fill-white stroke-white stroke-1 transition-transform duration-300 ease-in-out group-hover/button:rotate-0' })] }) }) }), jsxs(DialogPanel, { ref: dialogPanelRef, transition: true, className: twMerge('duration-750 ease-exponential data-closed:opacity-0 data-closed:scale-50 fixed left-1/2 -translate-x-1/2 overflow-y-scroll bg-neutral-50 p-4 shadow-[0_-15px_50px_-12px] shadow-neutral-950/25 transition-[transform_translate_opacity] sm:w-[calc(100vw-2rem)] sm:max-w-fit sm:p-6 sm:shadow-2xl lg:p-8 dark:bg-neutral-900', place === 'center'
+                            ? 'data-enter:translate-y-[calc(-50%+12rem)] data-leave:translate-y-[calc(-50%-8rem)] top-1/2 -translate-y-1/2 rounded-2xl'
+                            : 'rounded-t-4xl pointer-fine:top-1/2 pointer-fine:bottom-auto pointer-fine:-translate-y-1/2 pointer-fine:rounded-2xl data-enter:translate-y-full sm:data-enter:translate-y-[calc(-50%+12rem)] data-leave:translate-y-full sm:data-leave:translate-y-[calc(-50%-8rem)] sm:data-open:-translate-y-1/2 bottom-0 h-fit max-h-[calc(100dvh-4rem)] translate-y-0 sm:bottom-auto sm:top-1/2 sm:rounded-b-2xl sm:rounded-t-2xl', className), children: [jsx("button", { onTouchStart: enableTouchClose, onMouseDown: enableMouseClose, className: [
+                                    'after:ease-exponential absolute inset-x-0 top-0 z-10 flex h-6 cursor-grab items-center justify-center after:h-1 after:w-8 after:rounded-full after:transition-[transform_background-color] after:duration-500 active:cursor-grabbing',
+                                    readyToClose
+                                        ? 'after:scale-x-200 after:scale-y-200 after:bg-ui-blue'
+                                        : 'after:bg-ui-grey/50 active:after:bg-ui-grey pointer-fine:hover:after:scale-x-125 pointer-fine:hover:after:bg-neutral-500/75 pointer-fine:active:after:scale-x-150 pointer-fine:active:after:bg-ui-grey active:after:scale-x-150 active:after:scale-y-125',
+                                ].join(' '), children: jsx("span", { className: 'sr-only', children: "Drag down to close" }) }), dialogElement] })] })] }));
+}
+
+function Time({ children, dateObject, dateTime, day, hours, milliseconds, minutes, month, seconds, year, ref, ...props }) {
+    const [date, setDate] = useState(dateObject || undefined);
+    const getDateAndTime = () => {
+        if (dateTime)
+            return dateTime;
+        if (!date)
+            return '';
+        const currentYear = date.getFullYear(), currentMonth = getMonth(date), currentDay = getDate(date), currentHour = getHours(date), currentMinute = getMinutes(date), currentSecond = getSeconds(date), currentMillisecond = getMilliseconds(date);
+        return [currentYear, currentMonth, currentDay, currentHour, currentMinute, currentSecond, currentMillisecond].join('-');
+    };
+    const dateAndTime = getDateAndTime();
+    const getDateDisplay = () => {
+        if (children)
+            return children;
+        if (dateAndTime === '')
+            return '';
+        const [dtYear, dtMonth, dtDay, dtHour, dtMinute, dtSecond, dtMillisecond] = dateAndTime.split('-').map(Number);
+        return [
+            day && dtDay,
+            month && [getMonthName(Number(dtMonth) - 1), month && year && ','].filter(Boolean).join(''),
+            year && dtYear,
+            hours &&
+                minutes &&
+                [
+                    'at',
+                    hours && dtHour,
+                    hours && minutes && ':',
+                    minutes && dtMinute,
+                    minutes && seconds && ':',
+                    seconds && dtSecond,
+                    seconds && milliseconds && '.',
+                    milliseconds && dtMillisecond,
+                ]
+                    .filter(Boolean)
+                    .join(''),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    };
+    const dateDisplay = getDateDisplay();
+    useEffect(() => {
+        if (date === undefined &&
+            dateObject === undefined &&
+            dateTime === undefined &&
+            typeof window !== 'undefined' &&
+            (dateAndTime === '' || dateDisplay === ''))
+            setDate(new Date());
+    }, [date, setDate, dateAndTime, dateDisplay, dateObject, dateTime]);
+    return (jsx("time", { dateTime: dateAndTime, ref: ref, ...props, children: dateDisplay }));
+}
+
+export { Anchor, Button, Form, Ghost, Heading, Input, Link, Modal, ModalDialog, ModalTrigger, SubmitButton, Textarea, Time };
+//# sourceMappingURL=components.esm.js.map