@minimalstuff/ui 1.1.1 → 1.1.2

package/dist/index.d.ts

@@ -8,12 +8,20 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { SelectHTMLAttributes } from 'react';
+import { StoreApi } from 'zustand';
 import { TextareaHTMLAttributes } from 'react';
+import { UseBoundStore } from 'zustand';
 
 export declare function applyTheme(newTheme: Theme_2): void;
 
 export declare const BASE_INPUT_STYLES = "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
 
+export declare interface BaseModalConfig {
+    id: string;
+    title?: ReactNode;
+    size?: ModalSize;
+}
+
 export declare const Button: ({ variant, size, children, className, fullWidth, loading, disabled, ...props }: ButtonProps) => JSX.Element;
 
 declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -54,6 +62,36 @@ declare interface ClientOnlyProps extends React.PropsWithChildren {
     fallback?: React.ReactNode;
 }
 
+export declare function ConfirmModal({ isOpen, onClose, onConfirm, title, children, confirmLabel: propConfirmLabel, cancelLabel: propCancelLabel, confirmColor: propConfirmColor, loading, }: ConfirmModalProps): JSX.Element;
+
+export declare type ConfirmModalColor = 'red' | 'blue' | 'green';
+
+export declare interface ConfirmModalConfig extends BaseModalConfig {
+    type: 'confirm';
+    children?: ReactNode;
+    onConfirm: () => void | Promise<void>;
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+    confirmColor?: ConfirmModalColor;
+}
+
+declare interface ConfirmModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void | Promise<void>;
+    title: ReactNode;
+    children?: ReactNode;
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+    confirmColor?: 'red' | 'blue' | 'green';
+    loading?: boolean;
+}
+
+declare interface GlobalHotkeysStore {
+    globalHotkeysEnabled: boolean;
+    setGlobalHotkeysEnabled: (value: boolean) => void;
+}
+
 export declare const IconButton: ({ icon, "aria-label": ariaLabel, variant, size, className, children, ref, ...props }: IconButtonProps) => JSX.Element;
 
 declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -79,6 +117,8 @@ declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 
 export declare function Modal({ isOpen, onClose, title, children, size, className, }: ModalProps): ReactPortal | null;
 
+export declare type ModalConfig = StandardModalConfig | ConfirmModalConfig;
+
 declare interface ModalProps {
     isOpen?: boolean;
     onClose?: () => void;
@@ -88,6 +128,20 @@ declare interface ModalProps {
     className?: string;
 }
 
+export declare function ModalProvider(): JSX.Element;
+
+export declare type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+
+declare interface ModalStore {
+    modals: ModalConfig[];
+    closingIds: Set<string>;
+    open: (config: Omit<StandardModalConfig, 'id' | 'type'>) => string;
+    openConfirm: (config: Omit<ConfirmModalConfig, 'id' | 'type'>) => string;
+    close: (id: string) => void;
+    closeAll: () => void;
+    isOpen: (id: string) => boolean;
+}
+
 export declare function Select({ options, label, error, placeholder, className, wrapperClassName, value, defaultValue, onChange, id, ...props }: SelectProps): JSX.Element;
 
 export declare interface SelectOption {
@@ -104,6 +158,11 @@ declare interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElemen
     wrapperClassName?: string;
 }
 
+export declare interface StandardModalConfig extends BaseModalConfig {
+    type: 'standard';
+    children: ReactNode;
+}
+
 export declare function Switch({ label, error, className, wrapperClassName, checked, defaultChecked, onChange, id, ...props }: SwitchProps): JSX.Element;
 
 declare interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className'> {
@@ -152,8 +211,12 @@ export declare function ThemeToggle(): JSX.Element;
 /** React hook that returns true if the component has mounted client-side */
 export declare const useClientOnly: () => boolean;
 
+export declare const useGlobalHotkeysStore: UseBoundStore<StoreApi<GlobalHotkeysStore>>;
+
 export declare const useIsClient: () => boolean;
 
+export declare const useModalStore: UseBoundStore<StoreApi<ModalStore>>;
+
 export declare function useRunAfterAnimation(durationMs: number): (callback: () => void) => () => void;
 
 export declare const withClientOnly: <T extends object>(Component: React.ComponentType<T>) => React.ComponentType<T>;

package/dist/minimalstuff-ui.css

@@ -1,2 +1,2 @@
-@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--un-bg-opacity:100%;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-translate-x:initial;--un-translate-y:initial;--un-translate-z:initial;--un-ease:initial;--un-ring-opacity:100%;--un-text-opacity:100%;--un-border-opacity:100%;--un-ring-offset-opacity:100%;--un-placeholder-opacity:100%}}@property --un-text-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --un-border-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-ring-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-ring-offset-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-inset-ring-color{syntax:"*";inherits:false}@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-inset-shadow-color{syntax:"*";inherits:false}@property --un-ring-color{syntax:"*";inherits:false}@property --un-ring-inset{syntax:"*";inherits:false}@property --un-ring-offset-color{syntax:"*";inherits:false}@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-shadow-color{syntax:"*";inherits:false}@property --un-translate-x{syntax:"*";inherits:false;initial-value:0}@property --un-translate-y{syntax:"*";inherits:false;initial-value:0}@property --un-translate-z{syntax:"*";inherits:false;initial-value:0}@property --un-scale-x{syntax:"*";inherits:false;initial-value:1}@property --un-scale-y{syntax:"*";inherits:false;initial-value:1}@property --un-scale-z{syntax:"*";inherits:false;initial-value:1}@property --un-ease{syntax:"*";inherits:false}@property --un-backdrop-blur{syntax:"*";inherits:false}@property --un-backdrop-brightness{syntax:"*";inherits:false}@property --un-backdrop-contrast{syntax:"*";inherits:false}@property --un-backdrop-grayscale{syntax:"*";inherits:false}@property --un-backdrop-hue-rotate{syntax:"*";inherits:false}@property --un-backdrop-invert{syntax:"*";inherits:false}@property --un-backdrop-opacity{syntax:"*";inherits:false}@property --un-backdrop-saturate{syntax:"*";inherits:false}@property --un-backdrop-sepia{syntax:"*";inherits:false}@property --un-placeholder-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}:root,:host{--spacing:.25rem;--radius-md:.375rem;--fontWeight-medium:500;--default-transition-timingFunction:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--radius-lg:.5rem;--radius-DEFAULT:.25rem;--container-md:28rem;--container-lg:32rem;--container-2xl:42rem;--container-4xl:56rem;--colors-black:#000;--fontWeight-semibold:600;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--colors-red-500:#fb2c36;--colors-gray-500:#6a7282;--colors-amber-600:#dd7400;--colors-red-600:#e40014;--colors-blue-600:#155dfc;--colors-white:#fff;--colors-gray-200:#e5e7eb;--colors-gray-900:#101828;--colors-gray-700:#364153;--colors-gray-300:#d1d5dc;--colors-gray-100:#f3f4f6;--colors-yellow-500:#edb200;--colors-blue-500:#3080ff;--colors-gray-400:#99a1af;--colors-gray-600:#4a5565;--text-xs-fontSize:.75rem;--text-xs-lineHeight:1rem;--text-sm-fontSize:.875rem;--text-sm-lineHeight:1.25rem;--text-base-fontSize:1rem;--text-base-lineHeight:1.5rem;--text-lg-fontSize:1.125rem;--text-lg-lineHeight:1.75rem;--colors-gray-50:#f9fafb;--colors-blue-700:#1447e6;--colors-red-700:#bf000f;--colors-red-50:#fef2f2;--colors-gray-800:#1e2939;--colors-red-400:#ff6568;--colors-amber-400:#fcbb00;--colors-blue-400:#54a2ff;--colors-red-900:#82181a;--font-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family:var(--font-sans);--default-monoFont-family:var(--font-mono)}@supports (color:lab(0% 0 0)){:root,:host{--colors-red-500:lab(55.4814% 75.0732 48.8528);--colors-gray-500:lab(47.7841% -.393182 -10.0268);--colors-amber-600:lab(60.3514% 40.5624 87.1228);--colors-red-600:lab(48.4493% 77.4328 61.5452);--colors-blue-600:lab(44.0605% 29.0279 -86.0352);--colors-gray-200:lab(91.6229% -.159115 -2.26791);--colors-gray-900:lab(8.11897% .811279 -12.254);--colors-gray-700:lab(27.1134% -.956401 -12.3224);--colors-gray-300:lab(85.1236% -.612259 -3.7138);--colors-gray-100:lab(96.1596% -.0823438 -1.13575);--colors-yellow-500:lab(76.3898% 14.5258 98.4589);--colors-blue-500:lab(54.1736% 13.3369 -74.6839);--colors-gray-400:lab(65.9269% -.832707 -8.17473);--colors-gray-600:lab(35.6337% -1.58697 -10.8425);--colors-gray-50:lab(98.2596% -.247031 -.706708);--colors-blue-700:lab(36.9089% 35.0961 -85.6872);--colors-red-700:lab(40.4273% 67.2623 53.7441);--colors-red-50:lab(96.5005% 4.18508 1.52328);--colors-gray-800:lab(16.1051% -1.18239 -11.7533);--colors-red-400:lab(63.7053% 60.745 31.3109);--colors-amber-400:lab(80.1641% 16.6016 99.2089);--colors-blue-400:lab(65.0361% -1.42065 -56.9802);--colors-red-900:lab(28.5139% 44.5539 29.0463)}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-featureSettings,normal);font-variation-settings:var(--default-font-variationSettings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-monoFont-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-monoFont-featureSettings,normal);font-variation-settings:var(--default-monoFont-variationSettings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden~=until-found])){display:none!important}.i-mdi-close{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-svg-spinners-3-dots-fade{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='4' cy='12' r='3' fill='currentColor'%3E%3Canimate id='SVG7x14Dcom' fill='freeze' attributeName='opacity' begin='0;SVGqSjG0dUp.end-0.25s' dur='0.75s' values='1;.2'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3' fill='currentColor' opacity='.4'%3E%3Canimate fill='freeze' attributeName='opacity' begin='SVG7x14Dcom.begin+0.15s' dur='0.75s' values='1;.2'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3' fill='currentColor' opacity='.3'%3E%3Canimate id='SVGqSjG0dUp' fill='freeze' attributeName='opacity' begin='SVG7x14Dcom.begin+0.3s' dur='0.75s' values='1;.2'/%3E%3C/circle%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-tabler-device-desktop{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 15h10m-8-4v4m6-4v4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-tabler-moon-stars{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992zm5 1a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2m2 7h2m-1-1v2'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-tabler-sun{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.text-base{font-size:var(--text-base-fontSize);line-height:var(--un-leading,var(--text-base-lineHeight))}.text-lg{font-size:var(--text-lg-fontSize);line-height:var(--un-leading,var(--text-lg-lineHeight))}.text-sm{font-size:var(--text-sm-fontSize);line-height:var(--un-leading,var(--text-sm-lineHeight))}.text-xs{font-size:var(--text-xs-fontSize);line-height:var(--un-leading,var(--text-xs-lineHeight))}.dark .dark\:text-amber-400{color:color-mix(in srgb, var(--colors-amber-400) var(--un-text-opacity), transparent) }.dark .dark\:text-blue-400{color:color-mix(in srgb, var(--colors-blue-400) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-100{color:color-mix(in srgb, var(--colors-gray-100) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-300{color:color-mix(in srgb, var(--colors-gray-300) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-400,.text-gray-400{color:color-mix(in srgb, var(--colors-gray-400) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-500,.text-gray-500{color:color-mix(in srgb, var(--colors-gray-500) var(--un-text-opacity), transparent) }.dark .dark\:text-red-400{color:color-mix(in srgb, var(--colors-red-400) var(--un-text-opacity), transparent) }.dark .dark\:text-yellow-500,.text-yellow-500{color:color-mix(in srgb, var(--colors-yellow-500) var(--un-text-opacity), transparent) }.text-amber-600{color:color-mix(in srgb, var(--colors-amber-600) var(--un-text-opacity), transparent) }.text-blue-500{color:color-mix(in srgb, var(--colors-blue-500) var(--un-text-opacity), transparent) }.text-blue-600{color:color-mix(in srgb, var(--colors-blue-600) var(--un-text-opacity), transparent) }.text-gray-600{color:color-mix(in srgb, var(--colors-gray-600) var(--un-text-opacity), transparent) }.text-gray-700{color:color-mix(in srgb, var(--colors-gray-700) var(--un-text-opacity), transparent) }.text-gray-900{color:color-mix(in srgb, var(--colors-gray-900) var(--un-text-opacity), transparent) }.text-red-500{color:color-mix(in srgb, var(--colors-red-500) var(--un-text-opacity), transparent) }.text-red-600{color:color-mix(in srgb, var(--colors-red-600) var(--un-text-opacity), transparent) }.text-white{color:color-mix(in srgb, var(--colors-white) var(--un-text-opacity), transparent) }.dark .dark\:hover\:text-gray-200:hover{color:color-mix(in srgb, var(--colors-gray-200) var(--un-text-opacity), transparent) }.dark .dark\:hover\:text-gray-300:hover{color:color-mix(in srgb, var(--colors-gray-300) var(--un-text-opacity), transparent) }.hover\:text-gray-600:hover{color:color-mix(in srgb, var(--colors-gray-600) var(--un-text-opacity), transparent) }.hover\:text-gray-700:hover{color:color-mix(in srgb, var(--colors-gray-700) var(--un-text-opacity), transparent) }.hover\:text-gray-900:hover{color:color-mix(in srgb, var(--colors-gray-900) var(--un-text-opacity), transparent) }.font-medium{--un-font-weight:var(--fontWeight-medium);font-weight:var(--fontWeight-medium)}.font-semibold{--un-font-weight:var(--fontWeight-semibold);font-weight:var(--fontWeight-semibold)}.tab{tab-size:4}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-14{margin-left:calc(var(--spacing) * 14)}.ml-8{margin-left:calc(var(--spacing) * 8)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-32{margin-top:calc(var(--spacing) * 32)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pr-8{padding-right:calc(var(--spacing) * 8)}.text-right{text-align:right}.appearance-none{appearance:none}.outline{outline-style:var(--un-outline-style);outline-width:1px}.focus-within\:outline-none:focus-within,.focus\:outline-none:focus{--un-outline-style:none;outline-style:none}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-blue-600{border-color:color-mix(in srgb, var(--colors-blue-600) var(--un-border-opacity), transparent) }.border-gray-200{border-color:color-mix(in srgb, var(--colors-gray-200) var(--un-border-opacity), transparent) }.border-gray-300{border-color:color-mix(in srgb, var(--colors-gray-300) var(--un-border-opacity), transparent) }.border-red-500{border-color:color-mix(in srgb, var(--colors-red-500) var(--un-border-opacity), transparent) }.border-transparent{border-color:#0000}.dark .dark\:border-blue-500{border-color:color-mix(in srgb, var(--colors-blue-500) var(--un-border-opacity), transparent) }.dark .dark\:border-gray-600{border-color:color-mix(in srgb, var(--colors-gray-600) var(--un-border-opacity), transparent) }.dark .dark\:border-gray-700{border-color:color-mix(in srgb, var(--colors-gray-700) var(--un-border-opacity), transparent) }.dark .dark\:border-red-400{border-color:color-mix(in srgb, var(--colors-red-400) var(--un-border-opacity), transparent) }.focus\:border-transparent:focus{border-color:#0000}.rounded{border-radius:var(--radius-DEFAULT)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.bg-\[length\:1rem_1rem\]{background-size:1rem 1rem}.bg-\[position\:right_0\.5rem_center\]{background-position:right .5rem center}.bg-\[url\(\"data\:image\/svg\+xml\,\%3csvg\ xmlns\=\%27http\:\/\/www\.w3\.org\/2000\/svg\%27\ fill\=\%27none\%27\ viewBox\=\%270\ 0\ 20\ 20\%27\%3e\%3cpath\ stroke\=\%27\%236b7280\%27\ stroke-linecap\=\%27round\%27\ stroke-linejoin\=\%27round\%27\ stroke-width\=\%271\.5\%27\ d\=\%27M6\ 8l4\ 4\ 4-4\%27\/\%3e\%3c\/svg\%3e\"\)\]{--un-url:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e");background-image:var(--un-url)}.bg-black\/50{background-color:color-mix(in srgb, var(--colors-black) 50%, transparent) }.bg-blue-600{background-color:color-mix(in srgb, var(--colors-blue-600) var(--un-bg-opacity), transparent) }.bg-gray-100{background-color:color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent) }.bg-gray-200{background-color:color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent) }.bg-red-600{background-color:color-mix(in srgb, var(--colors-red-600) var(--un-bg-opacity), transparent) }.bg-transparent{background-color:#0000}.bg-white{background-color:color-mix(in srgb, var(--colors-white) var(--un-bg-opacity), transparent) }.dark .dark\:bg-blue-500{background-color:color-mix(in srgb, var(--colors-blue-500) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-600{background-color:color-mix(in srgb, var(--colors-gray-600) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-700{background-color:color-mix(in srgb, var(--colors-gray-700) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-700\/50{background-color:color-mix(in srgb, var(--colors-gray-700) 50%, transparent) }.dark .dark\:bg-gray-800{background-color:color-mix(in srgb, var(--colors-gray-800) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-800\/50{background-color:color-mix(in srgb, var(--colors-gray-800) 50%, transparent) }.dark .dark\:bg-red-500{background-color:color-mix(in srgb, var(--colors-red-500) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-blue-600:hover{background-color:color-mix(in srgb, var(--colors-blue-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-500:hover{background-color:color-mix(in srgb, var(--colors-gray-500) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-600:hover{background-color:color-mix(in srgb, var(--colors-gray-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-600\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-600) 50%, transparent) }.dark .dark\:hover\:bg-gray-700\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-700) 50%, transparent) }.dark .dark\:hover\:bg-gray-800:hover{background-color:color-mix(in srgb, var(--colors-gray-800) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-800\/30:hover{background-color:color-mix(in srgb, var(--colors-gray-800) 30%, transparent) }.dark .dark\:hover\:bg-gray-800\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-800) 50%, transparent) }.dark .dark\:hover\:bg-red-600:hover{background-color:color-mix(in srgb, var(--colors-red-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-red-900\/20:hover{background-color:color-mix(in srgb, var(--colors-red-900) 20%, transparent) }.hover\:bg-blue-700:hover{background-color:color-mix(in srgb, var(--colors-blue-700) var(--un-bg-opacity), transparent) }.hover\:bg-gray-100:hover{background-color:color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent) }.hover\:bg-gray-200:hover{background-color:color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent) }.hover\:bg-gray-200\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-200) 50%, transparent) }.hover\:bg-gray-300:hover{background-color:color-mix(in srgb, var(--colors-gray-300) var(--un-bg-opacity), transparent) }.hover\:bg-gray-50:hover{background-color:color-mix(in srgb, var(--colors-gray-50) var(--un-bg-opacity), transparent) }.hover\:bg-gray-50\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-50) 50%, transparent) }.hover\:bg-red-50:hover{background-color:color-mix(in srgb, var(--colors-red-50) var(--un-bg-opacity), transparent) }.hover\:bg-red-700:hover{background-color:color-mix(in srgb, var(--colors-red-700) var(--un-bg-opacity), transparent) }.hover\:bg-white\/50:hover{background-color:color-mix(in srgb, var(--colors-white) 50%, transparent) }.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50,.disabled\:opacity-50:disabled{opacity:.5}.flex{display:flex}.inline-flex{display:inline-flex}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-fit{height:fit-content}.max-h-\[90vh\]{max-height:90vh}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.min-h-\[80px\]{min-height:80px}.w-11{width:calc(var(--spacing) * 11)}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-full{width:100%}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.cursor-pointer{cursor:pointer}.cursor-not-allowed,.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.pointer-events-none{pointer-events:none}.resize-y{resize:vertical}.select-none{-webkit-user-select:none;user-select:none}.ring-0{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(0px + var(--un-ring-offset-width)) var(--un-ring-color,currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.ring-2,.focus-within\:ring-2:focus-within,.focus\:ring-2:focus{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(2px + var(--un-ring-offset-width)) var(--un-ring-color,currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.dark .dark\:ring-red-400{--un-ring-color:color-mix(in srgb, var(--colors-red-400) var(--un-ring-opacity), transparent) }.ring-red-500{--un-ring-color:color-mix(in srgb, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-blue-500:focus-within{--un-ring-color:color-mix(in srgb, var(--colors-blue-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-red-500:focus-within{--un-ring-color:color-mix(in srgb, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus\:ring-blue-500:focus{--un-ring-color:color-mix(in srgb, var(--colors-blue-500) var(--un-ring-opacity), transparent) }.focus\:ring-red-500:focus{--un-ring-color:color-mix(in srgb, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-offset-2:focus-within,.focus\:ring-offset-2:focus{--un-ring-offset-width:2px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)}.dark .dark\:focus-within\:ring-offset-gray-900:focus-within{--un-ring-offset-color:color-mix(in srgb, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.focus-within\:ring-offset-white:focus-within{--un-ring-offset-color:color-mix(in srgb, var(--colors-white) var(--un-ring-offset-opacity), transparent) }.dark .dark\:focus\:ring-offset-gray-900:focus{--un-ring-offset-color:color-mix(in srgb, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.shadow,.shadow-sm{--un-shadow:0 1px 3px 0 var(--un-shadow-color,#0000001a),0 1px 2px -1px var(--un-shadow-color,#0000001a);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.shadow-xl{--un-shadow:0 20px 25px -5px var(--un-shadow-color,#0000001a),0 8px 10px -6px var(--un-shadow-color,#0000001a);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.translate-x-0{--un-translate-x:calc(var(--spacing) * 0);translate:var(--un-translate-x) var(--un-translate-y)}.translate-x-5\.25{--un-translate-x:calc(var(--spacing) * 5.25);translate:var(--un-translate-x) var(--un-translate-y)}.translate-y-0{--un-translate-y:calc(var(--spacing) * 0);translate:var(--un-translate-x) var(--un-translate-y)}.translate-y-2{--un-translate-y:calc(var(--spacing) * 2);translate:var(--un-translate-x) var(--un-translate-y)}.scale-100{--un-scale-x:100%;--un-scale-y:100%;scale:var(--un-scale-x) var(--un-scale-y)}.scale-95{--un-scale-x:95%;--un-scale-y:95%;scale:var(--un-scale-x) var(--un-scale-y)}.transform{transform:var(--un-rotate-x) var(--un-rotate-y) var(--un-rotate-z) var(--un-skew-x) var(--un-skew-y)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--un-ease,var(--default-transition-timingFunction));transition-duration:var(--un-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--un-ease,var(--default-transition-timingFunction));transition-duration:var(--un-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to;transition-timing-function:var(--un-ease,var(--default-transition-timingFunction));transition-duration:var(--un-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--un-ease,var(--default-transition-timingFunction));transition-duration:var(--un-duration,var(--default-transition-duration))}.duration-200{--un-duration:.2s;transition-duration:.2s}.ease-in-out{--un-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.items-start{align-items:flex-start}.items-center{align-items:center}.inset-0{inset:calc(var(--spacing) * 0)}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.relative{position:relative}.z-50{z-index:50}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.bg-no-repeat{background-repeat:no-repeat}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.backdrop-blur-sm{--un-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--un-backdrop-blur,) var(--un-backdrop-brightness,) var(--un-backdrop-contrast,) var(--un-backdrop-grayscale,) var(--un-backdrop-hue-rotate,) var(--un-backdrop-invert,) var(--un-backdrop-opacity,) var(--un-backdrop-saturate,) var(--un-backdrop-sepia,);backdrop-filter:var(--un-backdrop-blur,) var(--un-backdrop-brightness,) var(--un-backdrop-contrast,) var(--un-backdrop-grayscale,) var(--un-backdrop-hue-rotate,) var(--un-backdrop-invert,) var(--un-backdrop-opacity,) var(--un-backdrop-saturate,) var(--un-backdrop-sepia,)}.dark .dark\:placeholder-gray-400::placeholder{color:color-mix(in srgb, var(--colors-gray-400) var(--un-placeholder-opacity), transparent) }.placeholder-gray-500::placeholder{color:color-mix(in srgb, var(--colors-gray-500) var(--un-placeholder-opacity), transparent) }@supports (color:color-mix(in lab, red, red)){.dark .dark\:text-amber-400{color:color-mix(in oklab, var(--colors-amber-400) var(--un-text-opacity), transparent) }.dark .dark\:text-blue-400{color:color-mix(in oklab, var(--colors-blue-400) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-100{color:color-mix(in oklab, var(--colors-gray-100) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-300{color:color-mix(in oklab, var(--colors-gray-300) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-400{color:color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-500{color:color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent) }.dark .dark\:text-red-400{color:color-mix(in oklab, var(--colors-red-400) var(--un-text-opacity), transparent) }.dark .dark\:text-yellow-500{color:color-mix(in oklab, var(--colors-yellow-500) var(--un-text-opacity), transparent) }.text-amber-600{color:color-mix(in oklab, var(--colors-amber-600) var(--un-text-opacity), transparent) }.text-blue-500{color:color-mix(in oklab, var(--colors-blue-500) var(--un-text-opacity), transparent) }.text-blue-600{color:color-mix(in oklab, var(--colors-blue-600) var(--un-text-opacity), transparent) }.text-gray-400{color:color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent) }.text-gray-500{color:color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent) }.text-gray-600{color:color-mix(in oklab, var(--colors-gray-600) var(--un-text-opacity), transparent) }.text-gray-700{color:color-mix(in oklab, var(--colors-gray-700) var(--un-text-opacity), transparent) }.text-gray-900{color:color-mix(in oklab, var(--colors-gray-900) var(--un-text-opacity), transparent) }.text-red-500{color:color-mix(in oklab, var(--colors-red-500) var(--un-text-opacity), transparent) }.text-red-600{color:color-mix(in oklab, var(--colors-red-600) var(--un-text-opacity), transparent) }.text-white{color:color-mix(in oklab, var(--colors-white) var(--un-text-opacity), transparent) }.text-yellow-500{color:color-mix(in oklab, var(--colors-yellow-500) var(--un-text-opacity), transparent) }.dark .dark\:hover\:text-gray-200:hover{color:color-mix(in oklab, var(--colors-gray-200) var(--un-text-opacity), transparent) }.dark .dark\:hover\:text-gray-300:hover{color:color-mix(in oklab, var(--colors-gray-300) var(--un-text-opacity), transparent) }.hover\:text-gray-600:hover{color:color-mix(in oklab, var(--colors-gray-600) var(--un-text-opacity), transparent) }.hover\:text-gray-700:hover{color:color-mix(in oklab, var(--colors-gray-700) var(--un-text-opacity), transparent) }.hover\:text-gray-900:hover{color:color-mix(in oklab, var(--colors-gray-900) var(--un-text-opacity), transparent) }.border-blue-600{border-color:color-mix(in oklab, var(--colors-blue-600) var(--un-border-opacity), transparent) }.border-gray-200{border-color:color-mix(in oklab, var(--colors-gray-200) var(--un-border-opacity), transparent) }.border-gray-300{border-color:color-mix(in oklab, var(--colors-gray-300) var(--un-border-opacity), transparent) }.border-red-500{border-color:color-mix(in oklab, var(--colors-red-500) var(--un-border-opacity), transparent) }.dark .dark\:border-blue-500{border-color:color-mix(in oklab, var(--colors-blue-500) var(--un-border-opacity), transparent) }.dark .dark\:border-gray-600{border-color:color-mix(in oklab, var(--colors-gray-600) var(--un-border-opacity), transparent) }.dark .dark\:border-gray-700{border-color:color-mix(in oklab, var(--colors-gray-700) var(--un-border-opacity), transparent) }.dark .dark\:border-red-400{border-color:color-mix(in oklab, var(--colors-red-400) var(--un-border-opacity), transparent) }.bg-black\/50{background-color:color-mix(in oklab, var(--colors-black) 50%, transparent) }.bg-blue-600{background-color:color-mix(in oklab, var(--colors-blue-600) var(--un-bg-opacity), transparent) }.bg-gray-100{background-color:color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent) }.bg-gray-200{background-color:color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent) }.bg-red-600{background-color:color-mix(in oklab, var(--colors-red-600) var(--un-bg-opacity), transparent) }.bg-white{background-color:color-mix(in oklab, var(--colors-white) var(--un-bg-opacity), transparent) }.dark .dark\:bg-blue-500{background-color:color-mix(in oklab, var(--colors-blue-500) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-600{background-color:color-mix(in oklab, var(--colors-gray-600) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-700{background-color:color-mix(in oklab, var(--colors-gray-700) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-700\/50{background-color:color-mix(in oklab, var(--colors-gray-700) 50%, transparent) }.dark .dark\:bg-gray-800{background-color:color-mix(in oklab, var(--colors-gray-800) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-800\/50{background-color:color-mix(in oklab, var(--colors-gray-800) 50%, transparent) }.dark .dark\:bg-red-500{background-color:color-mix(in oklab, var(--colors-red-500) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-blue-600:hover{background-color:color-mix(in oklab, var(--colors-blue-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-500:hover{background-color:color-mix(in oklab, var(--colors-gray-500) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-600:hover{background-color:color-mix(in oklab, var(--colors-gray-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-600\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-600) 50%, transparent) }.dark .dark\:hover\:bg-gray-700\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-700) 50%, transparent) }.dark .dark\:hover\:bg-gray-800:hover{background-color:color-mix(in oklab, var(--colors-gray-800) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-800\/30:hover{background-color:color-mix(in oklab, var(--colors-gray-800) 30%, transparent) }.dark .dark\:hover\:bg-gray-800\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-800) 50%, transparent) }.dark .dark\:hover\:bg-red-600:hover{background-color:color-mix(in oklab, var(--colors-red-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-red-900\/20:hover{background-color:color-mix(in oklab, var(--colors-red-900) 20%, transparent) }.hover\:bg-blue-700:hover{background-color:color-mix(in oklab, var(--colors-blue-700) var(--un-bg-opacity), transparent) }.hover\:bg-gray-100:hover{background-color:color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent) }.hover\:bg-gray-200:hover{background-color:color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent) }.hover\:bg-gray-200\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-200) 50%, transparent) }.hover\:bg-gray-300:hover{background-color:color-mix(in oklab, var(--colors-gray-300) var(--un-bg-opacity), transparent) }.hover\:bg-gray-50:hover{background-color:color-mix(in oklab, var(--colors-gray-50) var(--un-bg-opacity), transparent) }.hover\:bg-gray-50\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-50) 50%, transparent) }.hover\:bg-red-50:hover{background-color:color-mix(in oklab, var(--colors-red-50) var(--un-bg-opacity), transparent) }.hover\:bg-red-700:hover{background-color:color-mix(in oklab, var(--colors-red-700) var(--un-bg-opacity), transparent) }.hover\:bg-white\/50:hover{background-color:color-mix(in oklab, var(--colors-white) 50%, transparent) }.dark .dark\:ring-red-400{--un-ring-color:color-mix(in oklab, var(--colors-red-400) var(--un-ring-opacity), transparent) }.ring-red-500{--un-ring-color:color-mix(in oklab, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-blue-500:focus-within{--un-ring-color:color-mix(in oklab, var(--colors-blue-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-red-500:focus-within{--un-ring-color:color-mix(in oklab, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus\:ring-blue-500:focus{--un-ring-color:color-mix(in oklab, var(--colors-blue-500) var(--un-ring-opacity), transparent) }.focus\:ring-red-500:focus{--un-ring-color:color-mix(in oklab, var(--colors-red-500) var(--un-ring-opacity), transparent) }.dark .dark\:focus-within\:ring-offset-gray-900:focus-within{--un-ring-offset-color:color-mix(in oklab, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.focus-within\:ring-offset-white:focus-within{--un-ring-offset-color:color-mix(in oklab, var(--colors-white) var(--un-ring-offset-opacity), transparent) }.dark .dark\:focus\:ring-offset-gray-900:focus{--un-ring-offset-color:color-mix(in oklab, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.dark .dark\:placeholder-gray-400::placeholder{color:color-mix(in oklab, var(--colors-gray-400) var(--un-placeholder-opacity), transparent) }.placeholder-gray-500::placeholder{color:color-mix(in oklab, var(--colors-gray-500) var(--un-placeholder-opacity), transparent) }}@keyframes tabs-panel-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.tabs-panel-inner{animation:.25s ease-out tabs-panel-in}
+@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--un-bg-opacity:100%;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-translate-x:initial;--un-translate-y:initial;--un-translate-z:initial;--un-ease:initial;--un-ring-opacity:100%;--un-text-opacity:100%;--un-border-opacity:100%;--un-space-y-reverse:initial;--un-ring-offset-opacity:100%;--un-placeholder-opacity:100%}}@property --un-text-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --un-border-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-ring-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-ring-offset-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-inset-ring-color{syntax:"*";inherits:false}@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-inset-shadow-color{syntax:"*";inherits:false}@property --un-ring-color{syntax:"*";inherits:false}@property --un-ring-inset{syntax:"*";inherits:false}@property --un-ring-offset-color{syntax:"*";inherits:false}@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-shadow-color{syntax:"*";inherits:false}@property --un-translate-x{syntax:"*";inherits:false;initial-value:0}@property --un-translate-y{syntax:"*";inherits:false;initial-value:0}@property --un-translate-z{syntax:"*";inherits:false;initial-value:0}@property --un-scale-x{syntax:"*";inherits:false;initial-value:1}@property --un-scale-y{syntax:"*";inherits:false;initial-value:1}@property --un-scale-z{syntax:"*";inherits:false;initial-value:1}@property --un-ease{syntax:"*";inherits:false}@property --un-backdrop-blur{syntax:"*";inherits:false}@property --un-backdrop-brightness{syntax:"*";inherits:false}@property --un-backdrop-contrast{syntax:"*";inherits:false}@property --un-backdrop-grayscale{syntax:"*";inherits:false}@property --un-backdrop-hue-rotate{syntax:"*";inherits:false}@property --un-backdrop-invert{syntax:"*";inherits:false}@property --un-backdrop-opacity{syntax:"*";inherits:false}@property --un-backdrop-saturate{syntax:"*";inherits:false}@property --un-backdrop-sepia{syntax:"*";inherits:false}@property --un-placeholder-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-space-y-reverse{syntax:"*";inherits:false;initial-value:0}:root,:host{--spacing:.25rem;--radius-lg:.5rem;--default-transition-timingFunction:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--radius-DEFAULT:.25rem;--fontWeight-medium:500;--radius-md:.375rem;--container-md:28rem;--container-lg:32rem;--container-2xl:42rem;--container-4xl:56rem;--colors-black:#000;--fontWeight-semibold:600;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--colors-red-500:#fb2c36;--colors-yellow-500:#edb200;--colors-gray-700:#364153;--colors-blue-500:#3080ff;--colors-gray-100:#f3f4f6;--colors-gray-200:#e5e7eb;--colors-gray-400:#99a1af;--colors-gray-500:#6a7282;--colors-amber-600:#dd7400;--colors-red-600:#e40014;--colors-blue-600:#155dfc;--colors-gray-300:#d1d5dc;--colors-white:#fff;--colors-gray-900:#101828;--colors-gray-600:#4a5565;--text-xs-fontSize:.75rem;--text-xs-lineHeight:1rem;--text-sm-fontSize:.875rem;--text-sm-lineHeight:1.25rem;--text-base-fontSize:1rem;--text-base-lineHeight:1.5rem;--text-lg-fontSize:1.125rem;--text-lg-lineHeight:1.75rem;--colors-gray-50:#f9fafb;--colors-blue-700:#1447e6;--colors-red-700:#bf000f;--colors-red-50:#fef2f2;--colors-red-400:#ff6568;--colors-gray-800:#1e2939;--colors-amber-400:#fcbb00;--colors-blue-400:#54a2ff;--colors-red-900:#82181a;--font-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family:var(--font-sans);--default-monoFont-family:var(--font-mono)}@supports (color:lab(0% 0 0)){:root,:host{--colors-red-500:lab(55.4814% 75.0732 48.8528);--colors-yellow-500:lab(76.3898% 14.5258 98.4589);--colors-gray-700:lab(27.1134% -.956401 -12.3224);--colors-blue-500:lab(54.1736% 13.3369 -74.6839);--colors-gray-100:lab(96.1596% -.0823438 -1.13575);--colors-gray-200:lab(91.6229% -.159115 -2.26791);--colors-gray-400:lab(65.9269% -.832707 -8.17473);--colors-gray-500:lab(47.7841% -.393182 -10.0268);--colors-amber-600:lab(60.3514% 40.5624 87.1228);--colors-red-600:lab(48.4493% 77.4328 61.5452);--colors-blue-600:lab(44.0605% 29.0279 -86.0352);--colors-gray-300:lab(85.1236% -.612259 -3.7138);--colors-gray-900:lab(8.11897% .811279 -12.254);--colors-gray-600:lab(35.6337% -1.58697 -10.8425);--colors-gray-50:lab(98.2596% -.247031 -.706708);--colors-blue-700:lab(36.9089% 35.0961 -85.6872);--colors-red-700:lab(40.4273% 67.2623 53.7441);--colors-red-50:lab(96.5005% 4.18508 1.52328);--colors-red-400:lab(63.7053% 60.745 31.3109);--colors-gray-800:lab(16.1051% -1.18239 -11.7533);--colors-amber-400:lab(80.1641% 16.6016 99.2089);--colors-blue-400:lab(65.0361% -1.42065 -56.9802);--colors-red-900:lab(28.5139% 44.5539 29.0463)}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-featureSettings,normal);font-variation-settings:var(--default-font-variationSettings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-monoFont-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-monoFont-featureSettings,normal);font-variation-settings:var(--default-monoFont-variationSettings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden~=until-found])){display:none!important}.i-mdi-close{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-svg-spinners-3-dots-fade{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='4' cy='12' r='3' fill='currentColor'%3E%3Canimate id='SVG7x14Dcom' fill='freeze' attributeName='opacity' begin='0;SVGqSjG0dUp.end-0.25s' dur='0.75s' values='1;.2'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3' fill='currentColor' opacity='.4'%3E%3Canimate fill='freeze' attributeName='opacity' begin='SVG7x14Dcom.begin+0.15s' dur='0.75s' values='1;.2'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3' fill='currentColor' opacity='.3'%3E%3Canimate id='SVGqSjG0dUp' fill='freeze' attributeName='opacity' begin='SVG7x14Dcom.begin+0.3s' dur='0.75s' values='1;.2'/%3E%3C/circle%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-tabler-device-desktop{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 15h10m-8-4v4m6-4v4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-tabler-moon-stars{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992zm5 1a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2m2 7h2m-1-1v2'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-tabler-sun{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.text-base{font-size:var(--text-base-fontSize);line-height:var(--un-leading,var(--text-base-lineHeight))}.text-lg{font-size:var(--text-lg-fontSize);line-height:var(--un-leading,var(--text-lg-lineHeight))}.text-sm{font-size:var(--text-sm-fontSize);line-height:var(--un-leading,var(--text-sm-lineHeight))}.text-xs{font-size:var(--text-xs-fontSize);line-height:var(--un-leading,var(--text-xs-lineHeight))}.dark .dark\:text-amber-400{color:color-mix(in srgb, var(--colors-amber-400) var(--un-text-opacity), transparent) }.dark .dark\:text-blue-400{color:color-mix(in srgb, var(--colors-blue-400) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-100{color:color-mix(in srgb, var(--colors-gray-100) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-300{color:color-mix(in srgb, var(--colors-gray-300) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-400,.text-gray-400{color:color-mix(in srgb, var(--colors-gray-400) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-500,.text-gray-500{color:color-mix(in srgb, var(--colors-gray-500) var(--un-text-opacity), transparent) }.dark .dark\:text-red-400{color:color-mix(in srgb, var(--colors-red-400) var(--un-text-opacity), transparent) }.dark .dark\:text-yellow-500,.text-yellow-500{color:color-mix(in srgb, var(--colors-yellow-500) var(--un-text-opacity), transparent) }.text-amber-600{color:color-mix(in srgb, var(--colors-amber-600) var(--un-text-opacity), transparent) }.text-blue-500{color:color-mix(in srgb, var(--colors-blue-500) var(--un-text-opacity), transparent) }.text-blue-600{color:color-mix(in srgb, var(--colors-blue-600) var(--un-text-opacity), transparent) }.text-gray-600{color:color-mix(in srgb, var(--colors-gray-600) var(--un-text-opacity), transparent) }.text-gray-700{color:color-mix(in srgb, var(--colors-gray-700) var(--un-text-opacity), transparent) }.text-gray-900{color:color-mix(in srgb, var(--colors-gray-900) var(--un-text-opacity), transparent) }.text-red-500{color:color-mix(in srgb, var(--colors-red-500) var(--un-text-opacity), transparent) }.text-red-600{color:color-mix(in srgb, var(--colors-red-600) var(--un-text-opacity), transparent) }.text-white{color:color-mix(in srgb, var(--colors-white) var(--un-text-opacity), transparent) }.dark .dark\:hover\:text-gray-200:hover{color:color-mix(in srgb, var(--colors-gray-200) var(--un-text-opacity), transparent) }.dark .dark\:hover\:text-gray-300:hover{color:color-mix(in srgb, var(--colors-gray-300) var(--un-text-opacity), transparent) }.hover\:text-gray-600:hover{color:color-mix(in srgb, var(--colors-gray-600) var(--un-text-opacity), transparent) }.hover\:text-gray-700:hover{color:color-mix(in srgb, var(--colors-gray-700) var(--un-text-opacity), transparent) }.hover\:text-gray-900:hover{color:color-mix(in srgb, var(--colors-gray-900) var(--un-text-opacity), transparent) }.font-medium{--un-font-weight:var(--fontWeight-medium);font-weight:var(--fontWeight-medium)}.font-semibold{--un-font-weight:var(--fontWeight-semibold);font-weight:var(--fontWeight-semibold)}.tab{tab-size:4}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-14{margin-left:calc(var(--spacing) * 14)}.ml-8{margin-left:calc(var(--spacing) * 8)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-32{margin-top:calc(var(--spacing) * 32)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pr-8{padding-right:calc(var(--spacing) * 8)}.text-right{text-align:right}.appearance-none{appearance:none}.outline{outline-style:var(--un-outline-style);outline-width:1px}.focus-within\:outline-none:focus-within,.focus\:outline-none:focus{--un-outline-style:none;outline-style:none}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-blue-600{border-color:color-mix(in srgb, var(--colors-blue-600) var(--un-border-opacity), transparent) }.border-gray-200{border-color:color-mix(in srgb, var(--colors-gray-200) var(--un-border-opacity), transparent) }.border-gray-300{border-color:color-mix(in srgb, var(--colors-gray-300) var(--un-border-opacity), transparent) }.border-red-500{border-color:color-mix(in srgb, var(--colors-red-500) var(--un-border-opacity), transparent) }.border-transparent{border-color:#0000}.dark .dark\:border-blue-500{border-color:color-mix(in srgb, var(--colors-blue-500) var(--un-border-opacity), transparent) }.dark .dark\:border-gray-600{border-color:color-mix(in srgb, var(--colors-gray-600) var(--un-border-opacity), transparent) }.dark .dark\:border-gray-700{border-color:color-mix(in srgb, var(--colors-gray-700) var(--un-border-opacity), transparent) }.dark .dark\:border-red-400{border-color:color-mix(in srgb, var(--colors-red-400) var(--un-border-opacity), transparent) }.focus\:border-transparent:focus{border-color:#0000}.rounded{border-radius:var(--radius-DEFAULT)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.bg-\[length\:1rem_1rem\]{background-size:1rem 1rem}.bg-\[position\:right_0\.5rem_center\]{background-position:right .5rem center}.bg-\[url\(\"data\:image\/svg\+xml\,\%3csvg\ xmlns\=\%27http\:\/\/www\.w3\.org\/2000\/svg\%27\ fill\=\%27none\%27\ viewBox\=\%270\ 0\ 20\ 20\%27\%3e\%3cpath\ stroke\=\%27\%236b7280\%27\ stroke-linecap\=\%27round\%27\ stroke-linejoin\=\%27round\%27\ stroke-width\=\%271\.5\%27\ d\=\%27M6\ 8l4\ 4\ 4-4\%27\/\%3e\%3c\/svg\%3e\"\)\]{--un-url:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e");background-image:var(--un-url)}.bg-black\/50{background-color:color-mix(in srgb, var(--colors-black) 50%, transparent) }.bg-blue-600{background-color:color-mix(in srgb, var(--colors-blue-600) var(--un-bg-opacity), transparent) }.bg-gray-100{background-color:color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent) }.bg-gray-200{background-color:color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent) }.bg-red-600{background-color:color-mix(in srgb, var(--colors-red-600) var(--un-bg-opacity), transparent) }.bg-transparent{background-color:#0000}.bg-white{background-color:color-mix(in srgb, var(--colors-white) var(--un-bg-opacity), transparent) }.dark .dark\:bg-blue-500{background-color:color-mix(in srgb, var(--colors-blue-500) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-600{background-color:color-mix(in srgb, var(--colors-gray-600) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-700{background-color:color-mix(in srgb, var(--colors-gray-700) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-700\/50{background-color:color-mix(in srgb, var(--colors-gray-700) 50%, transparent) }.dark .dark\:bg-gray-800{background-color:color-mix(in srgb, var(--colors-gray-800) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-800\/50{background-color:color-mix(in srgb, var(--colors-gray-800) 50%, transparent) }.dark .dark\:bg-red-500{background-color:color-mix(in srgb, var(--colors-red-500) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-blue-600:hover{background-color:color-mix(in srgb, var(--colors-blue-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-500:hover{background-color:color-mix(in srgb, var(--colors-gray-500) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-600:hover{background-color:color-mix(in srgb, var(--colors-gray-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-600\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-600) 50%, transparent) }.dark .dark\:hover\:bg-gray-700\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-700) 50%, transparent) }.dark .dark\:hover\:bg-gray-800:hover{background-color:color-mix(in srgb, var(--colors-gray-800) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-800\/30:hover{background-color:color-mix(in srgb, var(--colors-gray-800) 30%, transparent) }.dark .dark\:hover\:bg-gray-800\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-800) 50%, transparent) }.dark .dark\:hover\:bg-red-600:hover{background-color:color-mix(in srgb, var(--colors-red-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-red-900\/20:hover{background-color:color-mix(in srgb, var(--colors-red-900) 20%, transparent) }.hover\:bg-blue-700:hover{background-color:color-mix(in srgb, var(--colors-blue-700) var(--un-bg-opacity), transparent) }.hover\:bg-gray-100:hover{background-color:color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent) }.hover\:bg-gray-200:hover{background-color:color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent) }.hover\:bg-gray-200\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-200) 50%, transparent) }.hover\:bg-gray-300:hover{background-color:color-mix(in srgb, var(--colors-gray-300) var(--un-bg-opacity), transparent) }.hover\:bg-gray-50:hover{background-color:color-mix(in srgb, var(--colors-gray-50) var(--un-bg-opacity), transparent) }.hover\:bg-gray-50\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-50) 50%, transparent) }.hover\:bg-red-50:hover{background-color:color-mix(in srgb, var(--colors-red-50) var(--un-bg-opacity), transparent) }.hover\:bg-red-700:hover{background-color:color-mix(in srgb, var(--colors-red-700) var(--un-bg-opacity), transparent) }.hover\:bg-white\/50:hover{background-color:color-mix(in srgb, var(--colors-white) 50%, transparent) }.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50,.disabled\:opacity-50:disabled{opacity:.5}.flex{display:flex}.inline-flex{display:inline-flex}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-fit{height:fit-content}.max-h-\[90vh\]{max-height:90vh}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.min-h-\[80px\]{min-height:80px}.w-11{width:calc(var(--spacing) * 11)}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-full{width:100%}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.cursor-pointer{cursor:pointer}.cursor-not-allowed,.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.pointer-events-none{pointer-events:none}.resize-y{resize:vertical}.select-none{-webkit-user-select:none;user-select:none}.ring-0{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(0px + var(--un-ring-offset-width)) var(--un-ring-color,currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.ring-2,.focus-within\:ring-2:focus-within,.focus\:ring-2:focus{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(2px + var(--un-ring-offset-width)) var(--un-ring-color,currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.dark .dark\:ring-red-400{--un-ring-color:color-mix(in srgb, var(--colors-red-400) var(--un-ring-opacity), transparent) }.ring-red-500{--un-ring-color:color-mix(in srgb, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-blue-500:focus-within{--un-ring-color:color-mix(in srgb, var(--colors-blue-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-red-500:focus-within{--un-ring-color:color-mix(in srgb, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus\:ring-blue-500:focus{--un-ring-color:color-mix(in srgb, var(--colors-blue-500) var(--un-ring-opacity), transparent) }.focus\:ring-red-500:focus{--un-ring-color:color-mix(in srgb, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-offset-2:focus-within,.focus\:ring-offset-2:focus{--un-ring-offset-width:2px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)}.dark .dark\:focus-within\:ring-offset-gray-900:focus-within{--un-ring-offset-color:color-mix(in srgb, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.focus-within\:ring-offset-white:focus-within{--un-ring-offset-color:color-mix(in srgb, var(--colors-white) var(--un-ring-offset-opacity), transparent) }.dark .dark\:focus\:ring-offset-gray-900:focus{--un-ring-offset-color:color-mix(in srgb, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.shadow,.shadow-sm{--un-shadow:0 1px 3px 0 var(--un-shadow-color,#0000001a),0 1px 2px -1px var(--un-shadow-color,#0000001a);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.shadow-xl{--un-shadow:0 20px 25px -5px var(--un-shadow-color,#0000001a),0 8px 10px -6px var(--un-shadow-color,#0000001a);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.translate-x-0{--un-translate-x:calc(var(--spacing) * 0);translate:var(--un-translate-x) var(--un-translate-y)}.translate-x-5\.25{--un-translate-x:calc(var(--spacing) * 5.25);translate:var(--un-translate-x) var(--un-translate-y)}.translate-y-0{--un-translate-y:calc(var(--spacing) * 0);translate:var(--un-translate-x) var(--un-translate-y)}.translate-y-2{--un-translate-y:calc(var(--spacing) * 2);translate:var(--un-translate-x) var(--un-translate-y)}.scale-100{--un-scale-x:100%;--un-scale-y:100%;scale:var(--un-scale-x) var(--un-scale-y)}.scale-95{--un-scale-x:95%;--un-scale-y:95%;scale:var(--un-scale-x) var(--un-scale-y)}.transform{transform:var(--un-rotate-x) var(--un-rotate-y) var(--un-rotate-z) var(--un-skew-x) var(--un-skew-y)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--un-ease,var(--default-transition-timingFunction));transition-duration:var(--un-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--un-ease,var(--default-transition-timingFunction));transition-duration:var(--un-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to;transition-timing-function:var(--un-ease,var(--default-transition-timingFunction));transition-duration:var(--un-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--un-ease,var(--default-transition-timingFunction));transition-duration:var(--un-duration,var(--default-transition-duration))}.duration-200{--un-duration:.2s;transition-duration:.2s}.ease-in-out{--un-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.items-start{align-items:flex-start}.items-center{align-items:center}.inset-0{inset:calc(var(--spacing) * 0)}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.relative{position:relative}.z-50{z-index:50}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.bg-no-repeat{background-repeat:no-repeat}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.backdrop-blur-sm{--un-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--un-backdrop-blur,) var(--un-backdrop-brightness,) var(--un-backdrop-contrast,) var(--un-backdrop-grayscale,) var(--un-backdrop-hue-rotate,) var(--un-backdrop-invert,) var(--un-backdrop-opacity,) var(--un-backdrop-saturate,) var(--un-backdrop-sepia,);backdrop-filter:var(--un-backdrop-blur,) var(--un-backdrop-brightness,) var(--un-backdrop-contrast,) var(--un-backdrop-grayscale,) var(--un-backdrop-hue-rotate,) var(--un-backdrop-invert,) var(--un-backdrop-opacity,) var(--un-backdrop-saturate,) var(--un-backdrop-sepia,)}.dark .dark\:placeholder-gray-400::placeholder{color:color-mix(in srgb, var(--colors-gray-400) var(--un-placeholder-opacity), transparent) }.placeholder-gray-500::placeholder{color:color-mix(in srgb, var(--colors-gray-500) var(--un-placeholder-opacity), transparent) }:where(.space-y-4>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--un-space-y-reverse)))}@supports (color:color-mix(in lab, red, red)){.dark .dark\:text-amber-400{color:color-mix(in oklab, var(--colors-amber-400) var(--un-text-opacity), transparent) }.dark .dark\:text-blue-400{color:color-mix(in oklab, var(--colors-blue-400) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-100{color:color-mix(in oklab, var(--colors-gray-100) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-300{color:color-mix(in oklab, var(--colors-gray-300) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-400{color:color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-500{color:color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent) }.dark .dark\:text-red-400{color:color-mix(in oklab, var(--colors-red-400) var(--un-text-opacity), transparent) }.dark .dark\:text-yellow-500{color:color-mix(in oklab, var(--colors-yellow-500) var(--un-text-opacity), transparent) }.text-amber-600{color:color-mix(in oklab, var(--colors-amber-600) var(--un-text-opacity), transparent) }.text-blue-500{color:color-mix(in oklab, var(--colors-blue-500) var(--un-text-opacity), transparent) }.text-blue-600{color:color-mix(in oklab, var(--colors-blue-600) var(--un-text-opacity), transparent) }.text-gray-400{color:color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent) }.text-gray-500{color:color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent) }.text-gray-600{color:color-mix(in oklab, var(--colors-gray-600) var(--un-text-opacity), transparent) }.text-gray-700{color:color-mix(in oklab, var(--colors-gray-700) var(--un-text-opacity), transparent) }.text-gray-900{color:color-mix(in oklab, var(--colors-gray-900) var(--un-text-opacity), transparent) }.text-red-500{color:color-mix(in oklab, var(--colors-red-500) var(--un-text-opacity), transparent) }.text-red-600{color:color-mix(in oklab, var(--colors-red-600) var(--un-text-opacity), transparent) }.text-white{color:color-mix(in oklab, var(--colors-white) var(--un-text-opacity), transparent) }.text-yellow-500{color:color-mix(in oklab, var(--colors-yellow-500) var(--un-text-opacity), transparent) }.dark .dark\:hover\:text-gray-200:hover{color:color-mix(in oklab, var(--colors-gray-200) var(--un-text-opacity), transparent) }.dark .dark\:hover\:text-gray-300:hover{color:color-mix(in oklab, var(--colors-gray-300) var(--un-text-opacity), transparent) }.hover\:text-gray-600:hover{color:color-mix(in oklab, var(--colors-gray-600) var(--un-text-opacity), transparent) }.hover\:text-gray-700:hover{color:color-mix(in oklab, var(--colors-gray-700) var(--un-text-opacity), transparent) }.hover\:text-gray-900:hover{color:color-mix(in oklab, var(--colors-gray-900) var(--un-text-opacity), transparent) }.border-blue-600{border-color:color-mix(in oklab, var(--colors-blue-600) var(--un-border-opacity), transparent) }.border-gray-200{border-color:color-mix(in oklab, var(--colors-gray-200) var(--un-border-opacity), transparent) }.border-gray-300{border-color:color-mix(in oklab, var(--colors-gray-300) var(--un-border-opacity), transparent) }.border-red-500{border-color:color-mix(in oklab, var(--colors-red-500) var(--un-border-opacity), transparent) }.dark .dark\:border-blue-500{border-color:color-mix(in oklab, var(--colors-blue-500) var(--un-border-opacity), transparent) }.dark .dark\:border-gray-600{border-color:color-mix(in oklab, var(--colors-gray-600) var(--un-border-opacity), transparent) }.dark .dark\:border-gray-700{border-color:color-mix(in oklab, var(--colors-gray-700) var(--un-border-opacity), transparent) }.dark .dark\:border-red-400{border-color:color-mix(in oklab, var(--colors-red-400) var(--un-border-opacity), transparent) }.bg-black\/50{background-color:color-mix(in oklab, var(--colors-black) 50%, transparent) }.bg-blue-600{background-color:color-mix(in oklab, var(--colors-blue-600) var(--un-bg-opacity), transparent) }.bg-gray-100{background-color:color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent) }.bg-gray-200{background-color:color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent) }.bg-red-600{background-color:color-mix(in oklab, var(--colors-red-600) var(--un-bg-opacity), transparent) }.bg-white{background-color:color-mix(in oklab, var(--colors-white) var(--un-bg-opacity), transparent) }.dark .dark\:bg-blue-500{background-color:color-mix(in oklab, var(--colors-blue-500) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-600{background-color:color-mix(in oklab, var(--colors-gray-600) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-700{background-color:color-mix(in oklab, var(--colors-gray-700) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-700\/50{background-color:color-mix(in oklab, var(--colors-gray-700) 50%, transparent) }.dark .dark\:bg-gray-800{background-color:color-mix(in oklab, var(--colors-gray-800) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-800\/50{background-color:color-mix(in oklab, var(--colors-gray-800) 50%, transparent) }.dark .dark\:bg-red-500{background-color:color-mix(in oklab, var(--colors-red-500) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-blue-600:hover{background-color:color-mix(in oklab, var(--colors-blue-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-500:hover{background-color:color-mix(in oklab, var(--colors-gray-500) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-600:hover{background-color:color-mix(in oklab, var(--colors-gray-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-600\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-600) 50%, transparent) }.dark .dark\:hover\:bg-gray-700\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-700) 50%, transparent) }.dark .dark\:hover\:bg-gray-800:hover{background-color:color-mix(in oklab, var(--colors-gray-800) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-800\/30:hover{background-color:color-mix(in oklab, var(--colors-gray-800) 30%, transparent) }.dark .dark\:hover\:bg-gray-800\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-800) 50%, transparent) }.dark .dark\:hover\:bg-red-600:hover{background-color:color-mix(in oklab, var(--colors-red-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-red-900\/20:hover{background-color:color-mix(in oklab, var(--colors-red-900) 20%, transparent) }.hover\:bg-blue-700:hover{background-color:color-mix(in oklab, var(--colors-blue-700) var(--un-bg-opacity), transparent) }.hover\:bg-gray-100:hover{background-color:color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent) }.hover\:bg-gray-200:hover{background-color:color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent) }.hover\:bg-gray-200\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-200) 50%, transparent) }.hover\:bg-gray-300:hover{background-color:color-mix(in oklab, var(--colors-gray-300) var(--un-bg-opacity), transparent) }.hover\:bg-gray-50:hover{background-color:color-mix(in oklab, var(--colors-gray-50) var(--un-bg-opacity), transparent) }.hover\:bg-gray-50\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-50) 50%, transparent) }.hover\:bg-red-50:hover{background-color:color-mix(in oklab, var(--colors-red-50) var(--un-bg-opacity), transparent) }.hover\:bg-red-700:hover{background-color:color-mix(in oklab, var(--colors-red-700) var(--un-bg-opacity), transparent) }.hover\:bg-white\/50:hover{background-color:color-mix(in oklab, var(--colors-white) 50%, transparent) }.dark .dark\:ring-red-400{--un-ring-color:color-mix(in oklab, var(--colors-red-400) var(--un-ring-opacity), transparent) }.ring-red-500{--un-ring-color:color-mix(in oklab, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-blue-500:focus-within{--un-ring-color:color-mix(in oklab, var(--colors-blue-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-red-500:focus-within{--un-ring-color:color-mix(in oklab, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus\:ring-blue-500:focus{--un-ring-color:color-mix(in oklab, var(--colors-blue-500) var(--un-ring-opacity), transparent) }.focus\:ring-red-500:focus{--un-ring-color:color-mix(in oklab, var(--colors-red-500) var(--un-ring-opacity), transparent) }.dark .dark\:focus-within\:ring-offset-gray-900:focus-within{--un-ring-offset-color:color-mix(in oklab, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.focus-within\:ring-offset-white:focus-within{--un-ring-offset-color:color-mix(in oklab, var(--colors-white) var(--un-ring-offset-opacity), transparent) }.dark .dark\:focus\:ring-offset-gray-900:focus{--un-ring-offset-color:color-mix(in oklab, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.dark .dark\:placeholder-gray-400::placeholder{color:color-mix(in oklab, var(--colors-gray-400) var(--un-placeholder-opacity), transparent) }.placeholder-gray-500::placeholder{color:color-mix(in oklab, var(--colors-gray-500) var(--un-placeholder-opacity), transparent) }}@keyframes tabs-panel-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.tabs-panel-inner{animation:.25s ease-out tabs-panel-in}
 /*$vite$:1*/

package/dist/minimalstuff-ui.js

@@ -1,18 +1,18 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment, createElement, useCallback, useEffect, useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { Fragment as Fragment$1, createElement, useCallback, useEffect, useId, useState } from "react";
 import { createPortal } from "react-dom";
-function r(e) {
-	var y, b, x = "";
-	if (typeof e == "string" || typeof e == "number") x += e;
-	else if (typeof e == "object") if (Array.isArray(e)) {
-		var S = e.length;
-		for (y = 0; y < S; y++) e[y] && (b = r(e[y])) && (x && (x += " "), x += b);
-	} else for (b in e) e[b] && (x && (x += " "), x += b);
-	return x;
+function r(i) {
+	var M, N, P = "";
+	if (typeof i == "string" || typeof i == "number") P += i;
+	else if (typeof i == "object") if (Array.isArray(i)) {
+		var F = i.length;
+		for (M = 0; M < F; M++) i[M] && (N = r(i[M])) && (P && (P += " "), P += N);
+	} else for (N in i) i[N] && (P && (P += " "), P += N);
+	return P;
 }
 function clsx() {
-	for (var e, y, b = 0, x = "", S = arguments.length; b < S; b++) (e = arguments[b]) && (y = r(e)) && (x && (x += " "), x += y);
-	return x;
+	for (var i, M, N = 0, P = "", F = arguments.length; N < F; N++) (i = arguments[N]) && (M = r(i)) && (P && (P += " "), P += M);
+	return P;
 }
 var clsx_default = clsx, VARIANT_CLASSES$1 = {
 	primary: "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 border-transparent",
@@ -27,86 +27,86 @@ var clsx_default = clsx, VARIANT_CLASSES$1 = {
 	md: "px-4 py-2 text-sm",
 	lg: "px-4 py-3 text-base"
 };
-const Button = ({ variant: b = "primary", size: x = "md", children: S, className: C, fullWidth: w = !1, loading: T = !1, disabled: E, ...D }) => /* @__PURE__ */ jsxs("button", {
+const Button = ({ variant: i = "primary", size: P = "md", children: F, className: I, fullWidth: L = !1, loading: R = !1, disabled: z, ...B }) => /* @__PURE__ */ jsxs("button", {
 	type: "button",
-	className: clsx_default("cursor-pointer inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 border focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed", VARIANT_CLASSES$1[b], SIZE_CLASSES$2[x], w && "w-full", C),
-	disabled: E ?? T,
-	...D,
-	children: [T && /* @__PURE__ */ jsx("span", {
+	className: clsx_default("cursor-pointer inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 border focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed", VARIANT_CLASSES$1[i], SIZE_CLASSES$2[P], L && "w-full", I),
+	disabled: z ?? R,
+	...B,
+	children: [R && /* @__PURE__ */ jsx("span", {
 		className: "i-svg-spinners-3-dots-fade w-4 h-4",
 		"aria-hidden": "true"
-	}), S]
+	}), F]
 });
 var CHARACTER_COUNT_STYLES = "text-xs text-gray-500 dark:text-gray-400 mt-1 text-right";
-function CharacterCount({ current: e, min: b, max: x, showMin: S, showMax: C }) {
-	let w = b !== void 0 && e <= b, T = x !== void 0 && e >= x, E = x !== void 0 && e > x;
+function CharacterCount({ current: i, min: M, max: P, showMin: F, showMax: I }) {
+	let L = M !== void 0 && i <= M, R = P !== void 0 && i >= P, z = P !== void 0 && i > P;
 	return /* @__PURE__ */ jsxs("div", {
 		className: CHARACTER_COUNT_STYLES,
 		children: [
-			S && b !== void 0 && /* @__PURE__ */ jsxs("span", {
-				className: w ? "text-amber-600 dark:text-amber-400" : "",
+			F && M !== void 0 && /* @__PURE__ */ jsxs("span", {
+				className: L ? "text-amber-600 dark:text-amber-400" : "",
 				children: [
-					e,
+					i,
 					"/",
-					b,
+					M,
 					" min"
 				]
 			}),
-			S && C && " · ",
-			C && x !== void 0 && /* @__PURE__ */ jsxs("span", {
-				className: E ? "text-red-600 dark:text-red-400" : T ? "text-amber-600 dark:text-amber-400" : "",
+			F && I && " · ",
+			I && P !== void 0 && /* @__PURE__ */ jsxs("span", {
+				className: z ? "text-red-600 dark:text-red-400" : R ? "text-amber-600 dark:text-amber-400" : "",
 				children: [
-					e,
+					i,
 					"/",
-					x,
+					P,
 					" max"
 				]
 			}),
-			!S && !C && x !== void 0 && /* @__PURE__ */ jsxs("span", {
-				className: E ? "text-red-600 dark:text-red-400" : T ? "text-amber-600 dark:text-amber-400" : "",
+			!F && !I && P !== void 0 && /* @__PURE__ */ jsxs("span", {
+				className: z ? "text-red-600 dark:text-red-400" : R ? "text-amber-600 dark:text-amber-400" : "",
 				children: [
-					e,
+					i,
 					"/",
-					x
+					P
 				]
 			}),
-			!S && !C && b !== void 0 && x === void 0 && /* @__PURE__ */ jsxs("span", {
-				className: w ? "text-amber-600 dark:text-amber-400" : "",
+			!F && !I && M !== void 0 && P === void 0 && /* @__PURE__ */ jsxs("span", {
+				className: L ? "text-amber-600 dark:text-amber-400" : "",
 				children: [
-					e,
+					i,
 					" (min ",
-					b,
+					M,
 					")"
 				]
 			})
 		]
 	});
 }
-function Checkbox({ label: b, error: x, className: S, wrapperClassName: C, checked: E, defaultChecked: D = !1, onChange: O, id: k = "checkbox", ...A }) {
-	let j = `${k}-${useId()}`, [M, N] = useState(D), P = E !== void 0, F = P ? E : M;
+function Checkbox({ label: i, error: P, className: F, wrapperClassName: I, checked: L, defaultChecked: R = !1, onChange: V, id: H = "checkbox", ...U }) {
+	let G = `${H}-${useId()}`, [K, q] = useState(R), J = L !== void 0, Y = J ? L : K;
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx_default("w-full", C),
+		className: clsx_default("w-full", I),
 		children: [/* @__PURE__ */ jsxs("label", {
-			htmlFor: j,
-			className: clsx_default("flex items-start gap-3 cursor-pointer", A.disabled && "cursor-not-allowed opacity-50"),
+			htmlFor: G,
+			className: clsx_default("flex items-start gap-3 cursor-pointer", U.disabled && "cursor-not-allowed opacity-50"),
 			children: [/* @__PURE__ */ jsxs("span", {
-				className: clsx_default("relative mt-0.5 shrink-0 rounded", "focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-white dark:focus-within:ring-offset-gray-900", x ? "focus-within:ring-red-500" : "focus-within:ring-blue-500"),
+				className: clsx_default("relative mt-0.5 shrink-0 rounded", "focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-white dark:focus-within:ring-offset-gray-900", P ? "focus-within:ring-red-500" : "focus-within:ring-blue-500"),
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "checkbox",
-					id: j,
+					id: G,
 					className: "sr-only",
-					checked: E,
-					defaultChecked: D,
-					onChange: (e) => {
-						P || N(e.target.checked), O?.(e);
+					checked: L,
+					defaultChecked: R,
+					onChange: (i) => {
+						J || q(i.target.checked), V?.(i);
 					},
-					"aria-invalid": !!x,
-					"aria-describedby": x ? `${j}-error` : void 0,
-					...A
+					"aria-invalid": !!P,
+					"aria-describedby": P ? `${G}-error` : void 0,
+					...U
 				}), /* @__PURE__ */ jsx("span", {
-					className: clsx_default("flex h-5 w-5 items-center justify-center rounded border-2 transition-all duration-200", F ? "border-blue-600 bg-blue-600 dark:border-blue-500 dark:bg-blue-500" : "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800", x && "border-red-500 dark:border-red-400", S),
+					className: clsx_default("flex h-5 w-5 items-center justify-center rounded border-2 transition-all duration-200", Y ? "border-blue-600 bg-blue-600 dark:border-blue-500 dark:bg-blue-500" : "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800", P && "border-red-500 dark:border-red-400", F),
 					"aria-hidden": !0,
-					children: F && /* @__PURE__ */ jsx("svg", {
+					children: Y && /* @__PURE__ */ jsx("svg", {
 						className: "h-3 w-3 text-white",
 						viewBox: "0 0 12 12",
 						fill: "none",
@@ -117,31 +117,31 @@ function Checkbox({ label: b, error: x, className: S, wrapperClassName: C, check
 						children: /* @__PURE__ */ jsx("polyline", { points: "2 6 5 9 10 3" })
 					})
 				})]
-			}), b && /* @__PURE__ */ jsxs("span", {
+			}), i && /* @__PURE__ */ jsxs("span", {
 				className: "text-sm font-medium text-gray-700 dark:text-gray-300 select-none",
-				children: [b, A.required && /* @__PURE__ */ jsx("span", {
+				children: [i, U.required && /* @__PURE__ */ jsx("span", {
 					className: "text-red-500 dark:text-red-400 ml-1",
 					children: "*"
 				})]
 			})]
-		}), x && /* @__PURE__ */ jsx("p", {
-			id: `${j}-error`,
+		}), P && /* @__PURE__ */ jsx("p", {
+			id: `${G}-error`,
 			className: "text-xs text-red-600 dark:text-red-400 mt-1 ml-8",
 			role: "alert",
-			children: x
+			children: P
 		})]
 	});
 }
 const useClientOnly = () => {
-	let [e, y] = useState(!1);
+	let [i, M] = useState(!1);
 	return useEffect(() => {
 		requestAnimationFrame(() => {
-			y(!0);
+			M(!0);
 		});
-	}, []), e;
-}, withClientOnly = (y) => (b) => useClientOnly() ? /* @__PURE__ */ jsx(y, { ...b }) : null;
-function ClientOnly({ children: e, fallback: y }) {
-	return useClientOnly() ? createElement(Fragment, { children: e }) : y ?? null;
+	}, []), i;
+}, withClientOnly = (i) => (N) => useClientOnly() ? /* @__PURE__ */ jsx(i, { ...N }) : null;
+function ClientOnly({ children: i, fallback: M }) {
+	return useClientOnly() ? createElement(Fragment$1, { children: i }) : M ?? null;
 }
 var VARIANT_CLASSES = {
 	default: "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800",
@@ -158,302 +158,438 @@ var VARIANT_CLASSES = {
 	md: "w-5 h-5",
 	lg: "w-6 h-6"
 };
-const IconButton = ({ icon: b, "aria-label": x, variant: S = "default", size: C = "md", className: w, children: T, ref: E, ...D }) => /* @__PURE__ */ jsxs("button", {
-	ref: E,
+const IconButton = ({ icon: i, "aria-label": P, variant: F = "default", size: I = "md", className: L, children: R, ref: z, ...B }) => /* @__PURE__ */ jsxs("button", {
+	ref: z,
 	type: "button",
-	"aria-label": x,
-	className: clsx_default("cursor-pointer inline-flex items-center justify-center rounded transition-colors", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", VARIANT_CLASSES[S], SIZE_CLASSES$1[C], w),
-	...D,
-	children: [/* @__PURE__ */ jsx("div", { className: clsx_default(b, ICON_SIZE_CLASSES[C], T && "mr-1") }), T]
+	"aria-label": P,
+	className: clsx_default("cursor-pointer inline-flex items-center justify-center rounded transition-colors", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", VARIANT_CLASSES[F], SIZE_CLASSES$1[I], L),
+	...B,
+	children: [/* @__PURE__ */ jsx("div", { className: clsx_default(i, ICON_SIZE_CLASSES[I], R && "mr-1") }), R]
 }), BASE_INPUT_STYLES = "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
-function Input({ label: b, error: x, showCharCount: S = !1, minLength: C, maxLength: E, className: D, wrapperClassName: O, value: k, defaultValue: A, onChange: j, id: M = "input", ...P }) {
-	let F = `${M}-${useId()}`, [I, L] = useState(typeof A == "string" ? A.length : 0), R = typeof k == "string" ? k.length : k === void 0 ? I : 0, z = S && (C !== void 0 || E !== void 0);
+function Input({ label: i, error: P, showCharCount: F = !1, minLength: I, maxLength: L, className: R, wrapperClassName: V, value: H, defaultValue: U, onChange: G, id: K = "input", ...q }) {
+	let J = `${K}-${useId()}`, [X, Z] = useState(typeof U == "string" ? U.length : 0), Q = typeof H == "string" ? H.length : H === void 0 ? X : 0, $ = F && (I !== void 0 || L !== void 0);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx_default("w-full", O),
+		className: clsx_default("w-full", V),
 		children: [
-			b && /* @__PURE__ */ jsxs("label", {
+			i && /* @__PURE__ */ jsxs("label", {
 				className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
-				htmlFor: F,
-				children: [b, P.required && /* @__PURE__ */ jsx("span", {
+				htmlFor: J,
+				children: [i, q.required && /* @__PURE__ */ jsx("span", {
 					className: "text-red-500 dark:text-red-400 ml-1",
 					children: "*"
 				})]
 			}),
 			/* @__PURE__ */ jsx("input", {
-				id: F,
-				className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm", x && "border-red-500 dark:border-red-400 focus:ring-red-500", D),
-				value: k,
-				defaultValue: A,
-				minLength: C,
-				maxLength: E,
-				onChange: (e) => {
-					k === void 0 && L(e.target.value.length), j?.(e);
+				id: J,
+				className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm", P && "border-red-500 dark:border-red-400 focus:ring-red-500", R),
+				value: H,
+				defaultValue: U,
+				minLength: I,
+				maxLength: L,
+				onChange: (i) => {
+					H === void 0 && Z(i.target.value.length), G?.(i);
 				},
-				...P
+				...q
 			}),
-			z && /* @__PURE__ */ jsx(CharacterCount, {
-				current: R,
-				min: C,
-				max: E,
-				showMin: C !== void 0,
-				showMax: E !== void 0
+			$ && /* @__PURE__ */ jsx(CharacterCount, {
+				current: Q,
+				min: I,
+				max: L,
+				showMin: I !== void 0,
+				showMax: L !== void 0
 			}),
-			x && /* @__PURE__ */ jsx("p", {
+			P && /* @__PURE__ */ jsx("p", {
 				className: "text-xs text-red-600 dark:text-red-400 mt-1",
-				children: x
+				children: P
 			})
 		]
 	});
 }
-function useRunAfterAnimation(e) {
-	return useCallback((y) => {
-		let b = setTimeout(y, e);
-		return () => clearTimeout(b);
-	}, [e]);
+function useRunAfterAnimation(i) {
+	return useCallback((M) => {
+		let N = setTimeout(M, i);
+		return () => clearTimeout(N);
+	}, [i]);
 }
-var ANIMATION_DURATION_MS = 200, SIZE_CLASSES = {
+var ANIMATION_DURATION_MS$1 = 200, SIZE_CLASSES = {
 	sm: "max-w-md",
 	md: "max-w-lg",
 	lg: "max-w-2xl",
 	xl: "max-w-4xl"
 };
-function Modal({ isOpen: b = !1, onClose: x, title: S, children: w, size: D = "md", className: O }) {
-	let [k, A] = useState(!1), [j, M] = useState(!1), [N, P] = useState(!1), F = useRunAfterAnimation(ANIMATION_DURATION_MS);
+function Modal({ isOpen: i = !1, onClose: P, title: F, children: I, size: L = "md", className: z }) {
+	let [H, U] = useState(!1), [G, K] = useState(!1), [q, J] = useState(!1), Y = useRunAfterAnimation(ANIMATION_DURATION_MS$1);
 	useEffect(() => {
-		if (b && !j) {
+		if (i && !G) {
 			document.body.style.overflow = "hidden";
-			let e = setTimeout(() => {
-				M(!0), A(!1), requestAnimationFrame(() => {
-					requestAnimationFrame(() => P(!0));
+			let i = setTimeout(() => {
+				K(!0), U(!1), requestAnimationFrame(() => {
+					requestAnimationFrame(() => J(!0));
 				});
 			}, 0);
-			return () => clearTimeout(e);
+			return () => clearTimeout(i);
 		}
-		if (!b && j) {
-			let e = setTimeout(() => {
-				A(!0), P(!1);
-			}, 0), y = F(() => {
-				M(!1), A(!1), document.body.style.overflow = "";
+		if (!i && G) {
+			let i = setTimeout(() => {
+				U(!0), J(!1);
+			}, 0), M = Y(() => {
+				K(!1), U(!1), document.body.style.overflow = "";
 			});
 			return () => {
-				clearTimeout(e), y();
+				clearTimeout(i), M();
 			};
 		}
 	}, [
-		b,
-		j,
-		F
+		i,
+		G,
+		Y
 	]), useEffect(() => {
-		if (!b || k) return;
-		let e = (e) => {
-			e.key === "Escape" && x?.();
+		if (!i || H) return;
+		let M = (i) => {
+			i.key === "Escape" && P?.();
 		};
-		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+		return document.addEventListener("keydown", M), () => document.removeEventListener("keydown", M);
 	}, [
-		b,
-		k,
-		x
+		i,
+		H,
+		P
 	]);
-	let I = () => {
-		k || x?.();
+	let X = () => {
+		H || P?.();
 	};
-	if (!j) return null;
-	let L = N && !k;
+	if (!G) return null;
+	let Z = q && !H;
 	return createPortal(/* @__PURE__ */ jsxs("div", {
-		className: clsx_default("fixed inset-0 z-50 h-fit flex justify-center p-4 mt-32", "transition-opacity duration-200", L ? "opacity-100" : "opacity-0"),
-		onClick: I,
+		className: clsx_default("fixed inset-0 z-50 h-fit flex justify-center p-4 mt-32", "transition-opacity duration-200", Z ? "opacity-100" : "opacity-0"),
+		onClick: X,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: clsx_default("fixed inset-0 bg-black/50 backdrop-blur-sm", "transition-opacity duration-200", L ? "opacity-100" : "opacity-0"),
+			className: clsx_default("fixed inset-0 bg-black/50 backdrop-blur-sm", "transition-opacity duration-200", Z ? "opacity-100" : "opacity-0"),
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ jsxs("div", {
-			className: clsx_default("relative w-full", SIZE_CLASSES[D], "bg-white dark:bg-gray-800 rounded-lg shadow-xl", "max-h-[90vh] overflow-hidden flex flex-col", "transition-all duration-200", L ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2"),
-			onClick: (e) => e.stopPropagation(),
-			children: [S && /* @__PURE__ */ jsxs("div", {
+			className: clsx_default("relative w-full", SIZE_CLASSES[L], "bg-white dark:bg-gray-800 rounded-lg shadow-xl", "max-h-[90vh] overflow-hidden flex flex-col", "transition-all duration-200", Z ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2"),
+			onClick: (i) => i.stopPropagation(),
+			children: [F && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700",
 				children: [/* @__PURE__ */ jsx("h2", {
 					className: "text-lg font-semibold text-gray-900 dark:text-gray-100",
-					children: S
+					children: F
 				}), /* @__PURE__ */ jsx(IconButton, {
 					icon: "i-mdi-close",
-					onClick: x?.bind(null),
+					onClick: P?.bind(null),
 					"aria-label": "Close",
 					variant: "ghost",
 					className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
 				})]
 			}), /* @__PURE__ */ jsx("div", {
-				className: clsx_default("flex-1 overflow-y-auto px-6 py-4 text-gray-600 dark:text-gray-400", O),
-				children: w
+				className: clsx_default("flex-1 overflow-y-auto px-6 py-4 text-gray-600 dark:text-gray-400", z),
+				children: I
 			})]
 		})]
 	}), document.body);
 }
-function Select({ options: b, label: x, error: S, placeholder: C, className: T, wrapperClassName: E, value: D, defaultValue: O, onChange: k, id: A = "select", ...j }) {
-	let M = `${A}-${useId()}`;
+function ConfirmModal({ isOpen: i, onClose: P, onConfirm: F, title: I, children: L, confirmLabel: R, cancelLabel: z, confirmColor: V, loading: H = !1 }) {
+	let [U, W] = useState(!1), G = async () => {
+		W(!0);
+		try {
+			await F();
+		} finally {
+			W(!1);
+		}
+	}, K = H || U;
+	return /* @__PURE__ */ jsx(Modal, {
+		isOpen: i,
+		onClose: P,
+		title: I,
+		size: "sm",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4",
+			children: [L && /* @__PURE__ */ jsx("div", {
+				className: "text-sm text-gray-600 dark:text-gray-300",
+				children: L
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-3",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onClick: P,
+					disabled: K,
+					size: "sm",
+					children: z ?? "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: (V ?? "blue") === "red" ? "danger" : "primary",
+					onClick: G,
+					loading: K,
+					disabled: K,
+					size: "sm",
+					children: R ?? "Confirm"
+				})]
+			})]
+		})
+	});
+}
+var createStoreImpl = (i) => {
+	let M, N = /* @__PURE__ */ new Set(), P = (i, P) => {
+		let F = typeof i == "function" ? i(M) : i;
+		if (!Object.is(F, M)) {
+			let i = M;
+			M = P ?? (typeof F != "object" || !F) ? F : Object.assign({}, M, F), N.forEach((N) => N(M, i));
+		}
+	}, F = () => M, I = {
+		setState: P,
+		getState: F,
+		getInitialState: () => L,
+		subscribe: (i) => (N.add(i), () => N.delete(i))
+	}, L = M = i(P, F, I);
+	return I;
+}, createStore = ((i) => i ? createStoreImpl(i) : createStoreImpl), identity = (i) => i;
+function useStore(i, M = identity) {
+	let N = React.useSyncExternalStore(i.subscribe, React.useCallback(() => M(i.getState()), [i, M]), React.useCallback(() => M(i.getInitialState()), [i, M]));
+	return React.useDebugValue(N), N;
+}
+var createImpl = (i) => {
+	let M = createStore(i), N = (i) => useStore(M, i);
+	return Object.assign(N, M), N;
+}, create = ((i) => i ? createImpl(i) : createImpl);
+const useGlobalHotkeysStore = create((i) => ({
+	globalHotkeysEnabled: !0,
+	setGlobalHotkeysEnabled: (M) => i({ globalHotkeysEnabled: M })
+}));
+var ANIMATION_DURATION_MS = 200, generateId = () => Math.random().toString(36).substring(7);
+const useModalStore = create((i, M) => ({
+	modals: [],
+	closingIds: /* @__PURE__ */ new Set(),
+	open: (N) => {
+		let P = generateId(), F = M(), I = F.modals.length === 0;
+		return i({ modals: [...F.modals, {
+			...N,
+			id: P,
+			type: "standard"
+		}] }), I && useGlobalHotkeysStore.getState().setGlobalHotkeysEnabled(!1), P;
+	},
+	openConfirm: (N) => {
+		let P = generateId(), F = M(), I = F.modals.length === 0;
+		return i({ modals: [...F.modals, {
+			...N,
+			id: P,
+			type: "confirm"
+		}] }), I && useGlobalHotkeysStore.getState().setGlobalHotkeysEnabled(!1), P;
+	},
+	close: (N) => {
+		if (!M().modals.find((i) => i.id === N)) return;
+		let P = M().modals.length === 1;
+		i((i) => ({ closingIds: new Set(i.closingIds).add(N) })), setTimeout(() => {
+			i((i) => {
+				let M = new Set(i.closingIds);
+				M.delete(N);
+				let F = i.modals.filter((i) => i.id !== N);
+				return P && F.length === 0 && useGlobalHotkeysStore.getState().setGlobalHotkeysEnabled(!0), {
+					modals: F,
+					closingIds: M
+				};
+			});
+		}, ANIMATION_DURATION_MS);
+	},
+	closeAll: () => {
+		let N = M().modals;
+		N.length !== 0 && (i({ closingIds: new Set(N.map((i) => i.id)) }), setTimeout(() => {
+			i({
+				modals: [],
+				closingIds: /* @__PURE__ */ new Set()
+			}), useGlobalHotkeysStore.getState().setGlobalHotkeysEnabled(!0);
+		}, ANIMATION_DURATION_MS));
+	},
+	isOpen: (i) => M().modals.some((M) => M.id === i)
+}));
+function ModalProvider() {
+	let N = useModalStore((i) => i.modals), P = useModalStore((i) => i.closingIds), F = useModalStore((i) => i.isOpen), I = useModalStore((i) => i.close);
+	return /* @__PURE__ */ jsx(Fragment, { children: N.map((i) => {
+		let N = F(i.id) && !P.has(i.id);
+		return i.type === "confirm" ? /* @__PURE__ */ jsx(ConfirmModal, {
+			isOpen: N,
+			onClose: () => I(i.id),
+			onConfirm: async () => {
+				await i.onConfirm(), I(i.id);
+			},
+			title: i.title,
+			confirmLabel: i.confirmLabel,
+			cancelLabel: i.cancelLabel,
+			confirmColor: i.confirmColor,
+			children: i.children
+		}, i.id) : /* @__PURE__ */ jsx(Modal, {
+			isOpen: N,
+			onClose: () => I(i.id),
+			title: i.title,
+			size: i.size,
+			children: i.children
+		}, i.id);
+	}) });
+}
+function Select({ options: i, label: P, error: F, placeholder: I, className: L, wrapperClassName: R, value: B, defaultValue: V, onChange: H, id: U = "select", ...G }) {
+	let K = `${U}-${useId()}`;
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx_default("w-full", E),
+		className: clsx_default("w-full", R),
 		children: [
-			x && /* @__PURE__ */ jsxs("label", {
+			P && /* @__PURE__ */ jsxs("label", {
 				className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
-				htmlFor: M,
-				children: [x, j.required && /* @__PURE__ */ jsx("span", {
+				htmlFor: K,
+				children: [P, G.required && /* @__PURE__ */ jsx("span", {
 					className: "text-red-500 dark:text-red-400 ml-1",
 					children: "*"
 				})]
 			}),
 			/* @__PURE__ */ jsxs("select", {
-				id: M,
-				className: clsx_default(BASE_INPUT_STYLES, "pl-3 pr-8 py-2 text-sm appearance-none bg-[length:1rem_1rem] bg-[position:right_0.5rem_center] bg-no-repeat", "bg-[url(\"data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e\")]", S && "border-red-500 dark:border-red-400 focus:ring-red-500", T),
-				value: D,
-				defaultValue: O,
-				onChange: k,
-				"aria-invalid": !!S,
-				"aria-describedby": S ? `${M}-error` : void 0,
-				...j,
-				children: [C !== void 0 && /* @__PURE__ */ jsx("option", {
+				id: K,
+				className: clsx_default(BASE_INPUT_STYLES, "pl-3 pr-8 py-2 text-sm appearance-none bg-[length:1rem_1rem] bg-[position:right_0.5rem_center] bg-no-repeat", "bg-[url(\"data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e\")]", F && "border-red-500 dark:border-red-400 focus:ring-red-500", L),
+				value: B,
+				defaultValue: V,
+				onChange: H,
+				"aria-invalid": !!F,
+				"aria-describedby": F ? `${K}-error` : void 0,
+				...G,
+				children: [I !== void 0 && /* @__PURE__ */ jsx("option", {
 					value: "",
-					children: C
-				}), b.map((y) => /* @__PURE__ */ jsx("option", {
-					value: y.value,
-					children: y.label
-				}, y.value))]
+					children: I
+				}), i.map((i) => /* @__PURE__ */ jsx("option", {
+					value: i.value,
+					children: i.label
+				}, i.value))]
 			}),
-			S && /* @__PURE__ */ jsx("p", {
-				id: `${M}-error`,
+			F && /* @__PURE__ */ jsx("p", {
+				id: `${K}-error`,
 				className: "text-xs text-red-600 dark:text-red-400 mt-1",
 				role: "alert",
-				children: S
+				children: F
 			})
 		]
 	});
 }
-function Switch({ label: b, error: x, className: S, wrapperClassName: C, checked: E, defaultChecked: D = !1, onChange: O, id: k = "switch", ...A }) {
-	let j = `${k}-${useId()}`, [M, N] = useState(D), P = E !== void 0, F = P ? E : M;
+function Switch({ label: i, error: P, className: F, wrapperClassName: I, checked: L, defaultChecked: R = !1, onChange: V, id: H = "switch", ...U }) {
+	let G = `${H}-${useId()}`, [K, q] = useState(R), J = L !== void 0, Y = J ? L : K;
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx_default("w-full", C),
+		className: clsx_default("w-full", I),
 		children: [/* @__PURE__ */ jsxs("label", {
-			htmlFor: j,
-			className: clsx_default("flex items-center gap-3 cursor-pointer", A.disabled && "cursor-not-allowed opacity-50"),
+			htmlFor: G,
+			className: clsx_default("flex items-center gap-3 cursor-pointer", U.disabled && "cursor-not-allowed opacity-50"),
 			children: [/* @__PURE__ */ jsxs("span", {
-				className: clsx_default("relative inline-flex w-11 shrink-0 rounded-full border-2 border-transparent", "transition-colors duration-200 ease-in-out", "focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2", "disabled:opacity-50", F ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-600", x && "ring-2 ring-red-500 dark:ring-red-400", S),
+				className: clsx_default("relative inline-flex w-11 shrink-0 rounded-full border-2 border-transparent", "transition-colors duration-200 ease-in-out", "focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2", "disabled:opacity-50", Y ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-600", P && "ring-2 ring-red-500 dark:ring-red-400", F),
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "checkbox",
 					role: "switch",
-					id: j,
+					id: G,
 					className: "sr-only",
-					checked: E,
-					defaultChecked: D,
-					onChange: (e) => {
-						P || N(e.target.checked), O?.(e);
+					checked: L,
+					defaultChecked: R,
+					onChange: (i) => {
+						J || q(i.target.checked), V?.(i);
 					},
-					"aria-invalid": !!x,
-					"aria-describedby": x ? `${j}-error` : void 0,
-					...A
+					"aria-invalid": !!P,
+					"aria-describedby": P ? `${G}-error` : void 0,
+					...U
 				}), /* @__PURE__ */ jsx("span", {
-					className: clsx_default("pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0", "transition duration-200 ease-in-out", F ? "translate-x-5.25" : "translate-x-0"),
+					className: clsx_default("pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0", "transition duration-200 ease-in-out", Y ? "translate-x-5.25" : "translate-x-0"),
 					"aria-hidden": !0
 				})]
-			}), b && /* @__PURE__ */ jsxs("span", {
+			}), i && /* @__PURE__ */ jsxs("span", {
 				className: "text-sm font-medium text-gray-700 dark:text-gray-300 select-none",
-				children: [b, A.required && /* @__PURE__ */ jsx("span", {
+				children: [i, U.required && /* @__PURE__ */ jsx("span", {
 					className: "text-red-500 dark:text-red-400 ml-1",
 					children: "*"
 				})]
 			})]
-		}), x && /* @__PURE__ */ jsx("p", {
-			id: `${j}-error`,
+		}), P && /* @__PURE__ */ jsx("p", {
+			id: `${G}-error`,
 			className: "text-xs text-red-600 dark:text-red-400 mt-1 ml-14",
 			role: "alert",
-			children: x
+			children: P
 		})]
 	});
 }
-function Tabs({ items: b, defaultIndex: x = 0, className: S, tabListClassName: C, panelClassName: w, onChange: E }) {
-	let [D, O] = useState(x), k = (e) => {
-		b[e]?.disabled || (O(e), E?.(e));
-	}, A = b[D];
+function Tabs({ items: i, defaultIndex: P = 0, className: F, tabListClassName: I, panelClassName: L, onChange: R }) {
+	let [z, V] = useState(P), H = (M) => {
+		i[M]?.disabled || (V(M), R?.(M));
+	}, U = i[z];
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx_default("w-full", S),
+		className: clsx_default("w-full", F),
 		children: [/* @__PURE__ */ jsx("div", {
 			role: "tablist",
-			className: clsx_default("flex gap-1 p-1 rounded-md bg-gray-100 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700", C),
-			children: b.map((b, x) => /* @__PURE__ */ jsxs("button", {
+			className: clsx_default("flex gap-1 p-1 rounded-md bg-gray-100 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700", I),
+			children: i.map((i, P) => /* @__PURE__ */ jsxs("button", {
 				role: "tab",
 				type: "button",
-				"aria-selected": D === x,
-				"aria-disabled": b.disabled,
-				disabled: b.disabled,
-				onClick: () => k(x),
-				className: clsx_default("flex items-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium", D === x ? "bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm border border-gray-200 dark:border-gray-600" : clsx_default("text-gray-600 dark:text-gray-400 border border-transparent", b.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200/50 dark:hover:bg-gray-700/50")),
-				children: [b.icon && /* @__PURE__ */ jsx("span", { className: clsx_default("w-4 h-4 block shrink-0", b.icon, D === x ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400") }), b.title]
-			}, x))
+				"aria-selected": z === P,
+				"aria-disabled": i.disabled,
+				disabled: i.disabled,
+				onClick: () => H(P),
+				className: clsx_default("flex items-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium", z === P ? "bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm border border-gray-200 dark:border-gray-600" : clsx_default("text-gray-600 dark:text-gray-400 border border-transparent", i.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200/50 dark:hover:bg-gray-700/50")),
+				children: [i.icon && /* @__PURE__ */ jsx("span", { className: clsx_default("w-4 h-4 block shrink-0", i.icon, z === P ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400") }), i.title]
+			}, P))
 		}), /* @__PURE__ */ jsx("div", {
 			role: "tabpanel",
-			className: clsx_default("mt-3 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 p-4 overflow-hidden", w),
+			className: clsx_default("mt-3 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 p-4 overflow-hidden", L),
 			children: /* @__PURE__ */ jsx("div", {
 				className: "tabs-panel-inner",
-				children: A?.content
-			}, D)
+				children: U?.content
+			}, z)
 		})]
 	});
 }
-function Textarea({ label: b, error: x, showCharCount: S = !1, minLength: C, maxLength: E, className: D, wrapperClassName: O, value: k, defaultValue: A, onChange: j, id: M = "textarea", ...P }) {
-	let F = `${M}-${useId()}`, [I, L] = useState(typeof A == "string" ? A.length : 0), R = typeof k == "string" ? k.length : k === void 0 ? I : 0, z = S && (C !== void 0 || E !== void 0);
+function Textarea({ label: i, error: P, showCharCount: F = !1, minLength: I, maxLength: L, className: R, wrapperClassName: V, value: H, defaultValue: U, onChange: G, id: K = "textarea", ...q }) {
+	let J = `${K}-${useId()}`, [X, Z] = useState(typeof U == "string" ? U.length : 0), Q = typeof H == "string" ? H.length : H === void 0 ? X : 0, $ = F && (I !== void 0 || L !== void 0);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx_default("w-full", O),
+		className: clsx_default("w-full", V),
 		children: [
-			b && /* @__PURE__ */ jsxs("label", {
+			i && /* @__PURE__ */ jsxs("label", {
 				className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
-				htmlFor: F,
-				children: [b, P.required && /* @__PURE__ */ jsx("span", {
+				htmlFor: J,
+				children: [i, q.required && /* @__PURE__ */ jsx("span", {
 					className: "text-red-500 dark:text-red-400 ml-1",
 					children: "*"
 				})]
 			}),
 			/* @__PURE__ */ jsx("textarea", {
-				id: F,
-				className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm min-h-[80px] resize-y", x && "border-red-500 dark:border-red-400 focus:ring-red-500", D),
-				value: k,
-				defaultValue: A,
-				minLength: C,
-				maxLength: E,
-				onChange: (e) => {
-					k === void 0 && L(e.target.value.length), j?.(e);
+				id: J,
+				className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm min-h-[80px] resize-y", P && "border-red-500 dark:border-red-400 focus:ring-red-500", R),
+				value: H,
+				defaultValue: U,
+				minLength: I,
+				maxLength: L,
+				onChange: (i) => {
+					H === void 0 && Z(i.target.value.length), G?.(i);
 				},
-				...P
+				...q
 			}),
-			z && /* @__PURE__ */ jsx(CharacterCount, {
-				current: R,
-				min: C,
-				max: E,
-				showMin: C !== void 0,
-				showMax: E !== void 0
+			$ && /* @__PURE__ */ jsx(CharacterCount, {
+				current: Q,
+				min: I,
+				max: L,
+				showMin: I !== void 0,
+				showMax: L !== void 0
 			}),
-			x && /* @__PURE__ */ jsx("p", {
+			P && /* @__PURE__ */ jsx("p", {
 				className: "text-xs text-red-600 dark:text-red-400 mt-1",
-				children: x
+				children: P
 			})
 		]
 	});
 }
 const useIsClient = () => {
-	let [e, y] = useState(!1);
+	let [i, M] = useState(!1);
 	return useEffect(() => {
 		requestAnimationFrame(() => {
-			y(!0);
+			M(!0);
 		});
-	}, []), e;
+	}, []), i;
 };
-function applyTheme(e) {
-	let y = document.documentElement;
-	e === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? y.classList.add("dark") : y.classList.remove("dark") : e === "dark" ? y.classList.add("dark") : y.classList.remove("dark");
+function applyTheme(i) {
+	let M = document.documentElement;
+	i === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? M.classList.add("dark") : M.classList.remove("dark") : i === "dark" ? M.classList.add("dark") : M.classList.remove("dark");
 }
-function getIcon(y) {
+function getIcon(i) {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx_default({
 			light: "i-tabler-sun text-yellow-500",
 			dark: "i-tabler-moon-stars text-gray-700 dark:text-yellow-500",
 			system: "i-tabler-device-desktop text-blue-500"
-		}[y], "w-5 h-5"),
+		}[i], "w-5 h-5"),
 		style: {
 			width: 20,
 			height: 20
@@ -461,29 +597,29 @@ function getIcon(y) {
 	});
 }
 function ThemeToggle() {
-	let [y, b] = useState("system"), x = useIsClient();
+	let [i, N] = useState("system"), P = useIsClient();
 	return useEffect(() => {
-		let e = localStorage.getItem("theme");
+		let i = localStorage.getItem("theme");
 		requestAnimationFrame(() => {
-			e ? (b(e), applyTheme(e)) : (b("system"), applyTheme("system"));
+			i ? (N(i), applyTheme(i)) : (N("system"), applyTheme("system"));
 		});
 	}, []), useEffect(() => {
-		let e = window.matchMedia("(prefers-color-scheme: dark)"), b = () => {
-			y === "system" && applyTheme("system");
+		let M = window.matchMedia("(prefers-color-scheme: dark)"), N = () => {
+			i === "system" && applyTheme("system");
 		};
-		return e.addEventListener("change", b), () => {
-			e.removeEventListener("change", b);
+		return M.addEventListener("change", N), () => {
+			M.removeEventListener("change", N);
 		};
-	}, [y]), /* @__PURE__ */ jsx("button", {
+	}, [i]), /* @__PURE__ */ jsx("button", {
 		onClick: useCallback(() => {
-			b((e) => {
-				let y;
-				return y = e === "light" ? "dark" : e === "dark" ? "system" : "light", applyTheme(y), localStorage.setItem("theme", y), y;
+			N((i) => {
+				let M;
+				return M = i === "light" ? "dark" : i === "dark" ? "system" : "light", applyTheme(M), localStorage.setItem("theme", M), M;
 			});
 		}, []),
 		className: "p-2.5 rounded-lg bg-gray-100 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer",
-		"aria-label": `Thème actuel: ${y}`,
-		children: x ? getIcon(y) : /* @__PURE__ */ jsx("div", {
+		"aria-label": `Thème actuel: ${i}`,
+		children: P ? getIcon(i) : /* @__PURE__ */ jsx("div", {
 			className: "i-tabler-device-desktop w-5 h-5 text-gray-400",
 			style: {
 				width: "20px",
@@ -492,4 +628,4 @@ function ThemeToggle() {
 		})
 	});
 }
-export { BASE_INPUT_STYLES, Button, CharacterCount, Checkbox, ClientOnly, IconButton, Input, Modal, Select, Switch, Tabs, Textarea, ThemeToggle, applyTheme, useClientOnly, useIsClient, useRunAfterAnimation, withClientOnly };
+export { BASE_INPUT_STYLES, Button, CharacterCount, Checkbox, ClientOnly, ConfirmModal, IconButton, Input, Modal, ModalProvider, Select, Switch, Tabs, Textarea, ThemeToggle, applyTheme, useClientOnly, useGlobalHotkeysStore, useIsClient, useModalStore, useRunAfterAnimation, withClientOnly };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@minimalstuff/ui",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"type": "module",
 	"main": "./dist/minimalstuff-ui.js",
 	"module": "./dist/minimalstuff-ui.js",