@minimalstuff/ui 1.2.3 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +35 -1
- package/dist/minimalstuff-ui.css +1 -1
- package/dist/minimalstuff-ui.js +187 -90
- package/package.json +27 -24
package/dist/index.d.ts
CHANGED
|
@@ -85,6 +85,10 @@ declare interface ConfirmModalProps {
|
|
|
85
85
|
loading?: boolean;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
+
export declare function followThemeState(listener: ThemeListener): () => void;
|
|
89
|
+
|
|
90
|
+
export declare function getCurrentTheme(): Theme_2;
|
|
91
|
+
|
|
88
92
|
declare interface GlobalHotkeysStore {
|
|
89
93
|
globalHotkeysEnabled: boolean;
|
|
90
94
|
setGlobalHotkeysEnabled: (value: boolean) => void;
|
|
@@ -140,6 +144,31 @@ declare interface ModalStore {
|
|
|
140
144
|
isOpen: (id: string) => boolean;
|
|
141
145
|
}
|
|
142
146
|
|
|
147
|
+
export declare interface RadioOption {
|
|
148
|
+
value: string;
|
|
149
|
+
label: string;
|
|
150
|
+
description?: string;
|
|
151
|
+
icon?: string;
|
|
152
|
+
disabled?: boolean;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
export declare function RadioOptions({ options, orientation, value, defaultValue, onChange, name: nameProp, label, error, required, disabled, className, wrapperClassName, id, ...props }: RadioOptionsProps): JSX.Element;
|
|
156
|
+
|
|
157
|
+
declare interface RadioOptionsProps extends Omit<ComponentPropsWithRef<'fieldset'>, 'onChange'> {
|
|
158
|
+
options: string[] | RadioOption[];
|
|
159
|
+
orientation?: 'vertical' | 'horizontal';
|
|
160
|
+
value?: string;
|
|
161
|
+
defaultValue?: string;
|
|
162
|
+
onChange?: (value: string) => void;
|
|
163
|
+
name?: string;
|
|
164
|
+
label?: string | React.ReactNode;
|
|
165
|
+
error?: string;
|
|
166
|
+
required?: boolean;
|
|
167
|
+
className?: string;
|
|
168
|
+
wrapperClassName?: string;
|
|
169
|
+
id?: string;
|
|
170
|
+
}
|
|
171
|
+
|
|
143
172
|
export declare function Select({ options, label, error, placeholder, className, wrapperClassName, value, defaultValue, onChange, id, ...props }: SelectProps): JSX.Element;
|
|
144
173
|
|
|
145
174
|
export declare interface SelectOption {
|
|
@@ -156,6 +185,8 @@ declare interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'chi
|
|
|
156
185
|
wrapperClassName?: string;
|
|
157
186
|
}
|
|
158
187
|
|
|
188
|
+
export declare function setCurrentTheme(theme: Theme_2): void;
|
|
189
|
+
|
|
159
190
|
export declare interface StandardModalConfig extends BaseModalConfig {
|
|
160
191
|
type: 'standard';
|
|
161
192
|
children: ReactNode;
|
|
@@ -205,12 +236,15 @@ export declare type Theme = 'light' | 'dark' | 'system';
|
|
|
205
236
|
|
|
206
237
|
declare type Theme_2 = 'light' | 'dark' | 'system';
|
|
207
238
|
|
|
208
|
-
|
|
239
|
+
declare type ThemeListener = (theme: Theme_2) => void;
|
|
240
|
+
|
|
241
|
+
export declare function ThemeToggle({ isTransitionEnabled, transitionDuration, transitionEasing, size, }: Readonly<ThemeToggleProps>): JSX.Element;
|
|
209
242
|
|
|
210
243
|
declare interface ThemeToggleProps {
|
|
211
244
|
isTransitionEnabled?: boolean;
|
|
212
245
|
transitionDuration?: number;
|
|
213
246
|
transitionEasing?: string;
|
|
247
|
+
size?: 'sm' | 'md' | 'lg';
|
|
214
248
|
}
|
|
215
249
|
|
|
216
250
|
/** React hook that returns true if the component has mounted client-side */
|
package/dist/minimalstuff-ui.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@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-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:oklch(63.7% .237 25.331);--colors-gray-500:oklch(55.1% .027 264.364);--colors-amber-600:oklch(66.6% .179 58.318);--colors-red-600:oklch(57.7% .245 27.325);--colors-yellow-500:oklch(79.5% .184 86.047);--colors-gray-700:oklch(37.3% .034 259.733);--colors-blue-500:oklch(62.3% .214 259.815);--colors-gray-100:oklch(96.7% .003 264.542);--colors-gray-200:oklch(92.8% .006 264.531);--colors-gray-400:oklch(70.7% .022 261.325);--colors-blue-600:oklch(54.6% .245 262.881);--colors-gray-300:oklch(87.2% .01 258.338);--colors-white:#fff;--colors-gray-600:oklch(44.6% .03 256.802);--colors-gray-900:oklch(21% .034 264.665);--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:oklch(98.5% .002 247.839);--colors-red-50:oklch(97.1% .013 17.38);--colors-blue-700:oklch(48.8% .243 264.376);--colors-red-700:oklch(50.5% .213 27.518);--colors-gray-800:oklch(27.8% .033 256.848);--colors-red-400:oklch(70.4% .191 22.216);--colors-amber-400:oklch(82.8% .189 84.429);--colors-blue-400:oklch(70.7% .165 254.624);--colors-red-900:oklch(39.6% .141 25.723);--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)}*,: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-1{margin-top:calc(var(--spacing) * 1)}.mt-3{margin-top:calc(var(--spacing) * 3)}.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-t{border-top-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}.flex-shrink-0,.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)}.max-h-\[calc\(100vh-4rem\)\]{max-height:calc(100vh - 4rem)}.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}.min-h-0{min-height:calc(var(--spacing) * 0)}.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) }@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) }}@media (width>=40rem){.sm\:py-\[3rem\]{padding-block:3rem}.sm\:max-h-\[calc\(100vh-10rem\)\]{max-height:calc(100vh - 10rem)}}@media (width>=64rem){.lg\:py-\[5rem\]{padding-block:5rem}}@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}::view-transition-old(root){mix-blend-mode:normal;animation:none}::view-transition-new(root){mix-blend-mode:normal;animation:none}
|
|
1
|
+
@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-DEFAULT:.25rem;--default-transition-timingFunction:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--radius-md:.375rem;--fontWeight-medium:500;--container-md:28rem;--container-lg:32rem;--container-2xl:42rem;--container-4xl:56rem;--colors-black:#000;--radius-lg:.5rem;--fontWeight-semibold:600;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--colors-red-500:oklch(63.7% .237 25.331);--colors-gray-600:oklch(44.6% .03 256.802);--colors-red-600:oklch(57.7% .245 27.325);--colors-gray-300:oklch(87.2% .01 258.338);--colors-gray-500:oklch(55.1% .027 264.364);--colors-blue-600:oklch(54.6% .245 262.881);--colors-white:#fff;--colors-gray-200:oklch(92.8% .006 264.531);--colors-gray-900:oklch(21% .034 264.665);--colors-gray-700:oklch(37.3% .034 259.733);--colors-gray-100:oklch(96.7% .003 264.542);--colors-amber-600:oklch(66.6% .179 58.318);--colors-gray-400:oklch(70.7% .022 261.325);--colors-red-50:oklch(97.1% .013 17.38);--colors-blue-500:oklch(62.3% .214 259.815);--colors-blue-50:oklch(97% .014 254.604);--colors-red-300:oklch(80.8% .114 19.571);--colors-gray-50:oklch(98.5% .002 247.839);--colors-red-400:oklch(70.4% .191 22.216);--colors-red-700:oklch(50.5% .213 27.518);--colors-blue-700:oklch(48.8% .243 264.376);--colors-yellow-500:oklch(79.5% .184 86.047);--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-800:oklch(27.8% .033 256.848);--colors-red-950:oklch(25.8% .092 26.042);--colors-blue-950:oklch(28.2% .091 267.935);--colors-amber-400:oklch(82.8% .189 84.429);--colors-blue-400:oklch(70.7% .165 254.624);--colors-red-800:oklch(44.4% .177 26.899);--colors-blue-300:oklch(80.9% .105 251.813);--colors-red-900:oklch(39.6% .141 25.723);--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)}*,: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-300{color:color-mix(in srgb, var(--colors-blue-300) 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-300{color:color-mix(in srgb, var(--colors-red-300) 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-blue-700{color:color-mix(in srgb, var(--colors-blue-700) 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-red-700{color:color-mix(in srgb, var(--colors-red-700) 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}.m-0{margin:calc(var(--spacing) * 0)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.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-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.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-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-blue-500,.dark .dark\:border-blue-500{border-color:color-mix(in srgb, var(--colors-blue-500) var(--un-border-opacity), transparent) }.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-300{border-color:color-mix(in srgb, var(--colors-red-300) var(--un-border-opacity), transparent) }.border-red-400,.dark .dark\:border-red-400{border-color:color-mix(in srgb, var(--colors-red-400) 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-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-600{border-color:color-mix(in srgb, var(--colors-red-600) var(--un-border-opacity), transparent) }.dark .dark\:border-red-800\/50{border-color:color-mix(in srgb, var(--colors-red-800) 50%, transparent) }.dark .dark\:hover\:border-gray-600:hover{border-color:color-mix(in srgb, var(--colors-gray-600) var(--un-border-opacity), transparent) }.hover\:border-gray-300:hover{border-color:color-mix(in srgb, var(--colors-gray-300) 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-gray-100{background-color:color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent) !important}.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-50{background-color:color-mix(in srgb, var(--colors-blue-50) var(--un-bg-opacity), 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-gray-50{background-color:color-mix(in srgb, var(--colors-gray-50) var(--un-bg-opacity), transparent) }.bg-red-50{background-color:color-mix(in srgb, var(--colors-red-50) var(--un-bg-opacity), transparent) }.bg-red-500,.dark .dark\:bg-red-500{background-color:color-mix(in srgb, var(--colors-red-500) 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-gray-700\/50{background-color:color-mix(in srgb, var(--colors-gray-700) 50%, transparent) !important}.dark .dark\:bg-blue-500{background-color:color-mix(in srgb, var(--colors-blue-500) var(--un-bg-opacity), transparent) }.dark .dark\:bg-blue-950\/25{background-color:color-mix(in srgb, var(--colors-blue-950) 25%, 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-400{background-color:color-mix(in srgb, var(--colors-red-400) var(--un-bg-opacity), transparent) }.dark .dark\:bg-red-950\/20{background-color:color-mix(in srgb, var(--colors-red-950) 20%, transparent) }.\!hover\:bg-gray-200:hover{background-color:color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent) !important}.dark .dark\:\!hover\:bg-gray-600:hover{background-color:color-mix(in srgb, var(--colors-gray-600) var(--un-bg-opacity), transparent) !important}.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\/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:hover{background-color:color-mix(in srgb, var(--colors-white) 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}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.h-2{height:calc(var(--spacing) * 2)}.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)}.max-h-\[calc\(100vh-4rem\)\]{max-height:calc(100vh - 4rem)}.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}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-w-0{min-width:calc(var(--spacing) * 0)}.w-11{width:calc(var(--spacing) * 11)}.w-2{width:calc(var(--spacing) * 2)}.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-150{--un-duration:.15s;transition-duration:.15s}.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) }@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-300{color:color-mix(in oklab, var(--colors-blue-300) 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-300{color:color-mix(in oklab, var(--colors-red-300) 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-blue-700{color:color-mix(in oklab, var(--colors-blue-700) 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-red-700{color:color-mix(in oklab, var(--colors-red-700) 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-500{border-color:color-mix(in oklab, var(--colors-blue-500) var(--un-border-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-300{border-color:color-mix(in oklab, var(--colors-red-300) var(--un-border-opacity), transparent) }.border-red-400{border-color:color-mix(in oklab, var(--colors-red-400) 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) }.dark .dark\:border-red-600{border-color:color-mix(in oklab, var(--colors-red-600) var(--un-border-opacity), transparent) }.dark .dark\:border-red-800\/50{border-color:color-mix(in oklab, var(--colors-red-800) 50%, transparent) }.dark .dark\:hover\:border-gray-600:hover{border-color:color-mix(in oklab, var(--colors-gray-600) var(--un-border-opacity), transparent) }.hover\:border-gray-300:hover{border-color:color-mix(in oklab, var(--colors-gray-300) var(--un-border-opacity), transparent) }.\!bg-gray-100{background-color:color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent) !important}.bg-black\/50{background-color:color-mix(in oklab, var(--colors-black) 50%, transparent) }.bg-blue-50{background-color:color-mix(in oklab, var(--colors-blue-50) var(--un-bg-opacity), 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-gray-50{background-color:color-mix(in oklab, var(--colors-gray-50) var(--un-bg-opacity), transparent) }.bg-red-50{background-color:color-mix(in oklab, var(--colors-red-50) var(--un-bg-opacity), transparent) }.bg-red-500{background-color:color-mix(in oklab, var(--colors-red-500) 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-gray-700\/50{background-color:color-mix(in oklab, var(--colors-gray-700) 50%, transparent) !important}.dark .dark\:bg-blue-500{background-color:color-mix(in oklab, var(--colors-blue-500) var(--un-bg-opacity), transparent) }.dark .dark\:bg-blue-950\/25{background-color:color-mix(in oklab, var(--colors-blue-950) 25%, 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-400{background-color:color-mix(in oklab, var(--colors-red-400) var(--un-bg-opacity), transparent) }.dark .dark\:bg-red-500{background-color:color-mix(in oklab, var(--colors-red-500) var(--un-bg-opacity), transparent) }.dark .dark\:bg-red-950\/20{background-color:color-mix(in oklab, var(--colors-red-950) 20%, transparent) }.\!hover\:bg-gray-200:hover{background-color:color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent) !important}.dark .dark\:\!hover\:bg-gray-600:hover{background-color:color-mix(in oklab, var(--colors-gray-600) var(--un-bg-opacity), transparent) !important}.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\/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:hover{background-color:color-mix(in oklab, var(--colors-white) 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) }}@media (width>=40rem){.sm\:py-\[3rem\]{padding-block:3rem}.sm\:max-h-\[calc\(100vh-10rem\)\]{max-height:calc(100vh - 10rem)}}@media (width>=64rem){.lg\:py-\[5rem\]{padding-block:5rem}}@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}::view-transition-old(root){mix-blend-mode:normal;animation:none}::view-transition-new(root){mix-blend-mode:normal;animation:none}::view-transition{pointer-events:none}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/minimalstuff-ui.js
CHANGED
|
@@ -186,7 +186,7 @@ var C = {
|
|
|
186
186
|
...l,
|
|
187
187
|
children: [/* @__PURE__ */ t("div", { className: p(e, T[a], s && "mr-1") }), s]
|
|
188
188
|
}), D = "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";
|
|
189
|
-
function
|
|
189
|
+
function ee({ label: e, error: r, showCharCount: i = !1, minLength: a, maxLength: o, className: s, wrapperClassName: l, value: d, defaultValue: f, onChange: m, id: h = "input", ...g }) {
|
|
190
190
|
let _ = `${h}-${c()}`, [y, b] = u(typeof f == "string" ? f.length : 0), x = typeof d == "string" ? d.length : d === void 0 ? y : 0, S = i && (a !== void 0 || o !== void 0);
|
|
191
191
|
return /* @__PURE__ */ n("div", {
|
|
192
192
|
className: p("w-full", l),
|
|
@@ -227,7 +227,7 @@ function O({ label: e, error: r, showCharCount: i = !1, minLength: a, maxLength:
|
|
|
227
227
|
}
|
|
228
228
|
//#endregion
|
|
229
229
|
//#region src/hooks/use_run_after_animation/use_run_after_animation.ts
|
|
230
|
-
function
|
|
230
|
+
function O(e) {
|
|
231
231
|
return o((t) => {
|
|
232
232
|
let n = setTimeout(t, e);
|
|
233
233
|
return () => clearTimeout(n);
|
|
@@ -235,14 +235,14 @@ function k(e) {
|
|
|
235
235
|
}
|
|
236
236
|
//#endregion
|
|
237
237
|
//#region src/components/modal/modal.tsx
|
|
238
|
-
var
|
|
238
|
+
var k = 200, te = {
|
|
239
239
|
sm: "max-w-md",
|
|
240
240
|
md: "max-w-lg",
|
|
241
241
|
lg: "max-w-2xl",
|
|
242
242
|
xl: "max-w-4xl"
|
|
243
243
|
};
|
|
244
|
-
function
|
|
245
|
-
let [f, m] = u(!1), [h, g] = u(!1), [_, v] = u(!1), y = k
|
|
244
|
+
function A({ isOpen: e = !1, onClose: r, title: i, children: a, footer: o, size: c = "md", className: l }) {
|
|
245
|
+
let [f, m] = u(!1), [h, g] = u(!1), [_, v] = u(!1), y = O(k);
|
|
246
246
|
s(() => {
|
|
247
247
|
if (e && !h) {
|
|
248
248
|
document.body.style.overflow = "hidden";
|
|
@@ -290,7 +290,7 @@ function M({ isOpen: e = !1, onClose: r, title: i, children: a, footer: o, size:
|
|
|
290
290
|
className: p("fixed inset-0 bg-black/50 backdrop-blur-sm", "transition-opacity duration-200", x ? "opacity-100" : "opacity-0"),
|
|
291
291
|
"aria-hidden": "true"
|
|
292
292
|
}), /* @__PURE__ */ n("div", {
|
|
293
|
-
className: p("relative w-full",
|
|
293
|
+
className: p("relative w-full", te[c], "bg-white dark:bg-gray-800 rounded-lg shadow-xl", "max-h-[calc(100vh-4rem)] sm:max-h-[calc(100vh-10rem)] overflow-hidden flex flex-col", "transition-all duration-200", x ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2"),
|
|
294
294
|
onClick: (e) => e.stopPropagation(),
|
|
295
295
|
children: [
|
|
296
296
|
i && /* @__PURE__ */ n("div", {
|
|
@@ -320,7 +320,7 @@ function M({ isOpen: e = !1, onClose: r, title: i, children: a, footer: o, size:
|
|
|
320
320
|
}
|
|
321
321
|
//#endregion
|
|
322
322
|
//#region src/components/modal/confirm_modal.tsx
|
|
323
|
-
function
|
|
323
|
+
function j({ isOpen: r, onClose: i, onConfirm: a, title: o, children: s, confirmLabel: c, cancelLabel: l, confirmColor: d, loading: f = !1 }) {
|
|
324
324
|
let [p, m] = u(!1), h = async () => {
|
|
325
325
|
m(!0);
|
|
326
326
|
try {
|
|
@@ -329,7 +329,7 @@ function N({ isOpen: r, onClose: i, onConfirm: a, title: o, children: s, confirm
|
|
|
329
329
|
m(!1);
|
|
330
330
|
}
|
|
331
331
|
}, _ = f || p;
|
|
332
|
-
return /* @__PURE__ */ t(
|
|
332
|
+
return /* @__PURE__ */ t(A, {
|
|
333
333
|
isOpen: r,
|
|
334
334
|
onClose: i,
|
|
335
335
|
title: o,
|
|
@@ -358,7 +358,7 @@ function N({ isOpen: r, onClose: i, onConfirm: a, title: o, children: s, confirm
|
|
|
358
358
|
}
|
|
359
359
|
//#endregion
|
|
360
360
|
//#region node_modules/.pnpm/zustand@5.0.12_@types+react@19.2.14_react@19.2.5_use-sync-external-store@1.6.0_react@19.2.5_/node_modules/zustand/esm/vanilla.mjs
|
|
361
|
-
var
|
|
361
|
+
var M = (e) => {
|
|
362
362
|
let t, n = /* @__PURE__ */ new Set(), r = (e, r) => {
|
|
363
363
|
let i = typeof e == "function" ? e(t) : e;
|
|
364
364
|
if (!Object.is(i, t)) {
|
|
@@ -372,35 +372,35 @@ var P = (e) => {
|
|
|
372
372
|
subscribe: (e) => (n.add(e), () => n.delete(e))
|
|
373
373
|
}, o = t = e(r, i, a);
|
|
374
374
|
return a;
|
|
375
|
-
},
|
|
376
|
-
function
|
|
375
|
+
}, ne = ((e) => e ? M(e) : M), re = (e) => e;
|
|
376
|
+
function ie(e, t = re) {
|
|
377
377
|
let n = r.useSyncExternalStore(e.subscribe, r.useCallback(() => t(e.getState()), [e, t]), r.useCallback(() => t(e.getInitialState()), [e, t]));
|
|
378
378
|
return r.useDebugValue(n), n;
|
|
379
379
|
}
|
|
380
|
-
var
|
|
381
|
-
let t =
|
|
380
|
+
var N = (e) => {
|
|
381
|
+
let t = ne(e), n = (e) => ie(t, e);
|
|
382
382
|
return Object.assign(n, t), n;
|
|
383
|
-
},
|
|
383
|
+
}, P = ((e) => e ? N(e) : N), F = P((e) => ({
|
|
384
384
|
globalHotkeysEnabled: !0,
|
|
385
385
|
setGlobalHotkeysEnabled: (t) => e({ globalHotkeysEnabled: t })
|
|
386
|
-
})),
|
|
386
|
+
})), I = 200, L = () => Math.random().toString(36).substring(7), R = P((e, t) => ({
|
|
387
387
|
modals: [],
|
|
388
388
|
closingIds: /* @__PURE__ */ new Set(),
|
|
389
389
|
open: (n) => {
|
|
390
|
-
let r =
|
|
390
|
+
let r = L(), i = t(), a = i.modals.length === 0;
|
|
391
391
|
return e({ modals: [...i.modals, {
|
|
392
392
|
...n,
|
|
393
393
|
id: r,
|
|
394
394
|
type: "standard"
|
|
395
|
-
}] }), a &&
|
|
395
|
+
}] }), a && F.getState().setGlobalHotkeysEnabled(!1), r;
|
|
396
396
|
},
|
|
397
397
|
openConfirm: (n) => {
|
|
398
|
-
let r =
|
|
398
|
+
let r = L(), i = t(), a = i.modals.length === 0;
|
|
399
399
|
return e({ modals: [...i.modals, {
|
|
400
400
|
...n,
|
|
401
401
|
id: r,
|
|
402
402
|
type: "confirm"
|
|
403
|
-
}] }), a &&
|
|
403
|
+
}] }), a && F.getState().setGlobalHotkeysEnabled(!1), r;
|
|
404
404
|
},
|
|
405
405
|
close: (n) => {
|
|
406
406
|
if (!t().modals.find((e) => e.id === n)) return;
|
|
@@ -410,12 +410,12 @@ var R = (e) => {
|
|
|
410
410
|
let t = new Set(e.closingIds);
|
|
411
411
|
t.delete(n);
|
|
412
412
|
let i = e.modals.filter((e) => e.id !== n);
|
|
413
|
-
return r && i.length === 0 &&
|
|
413
|
+
return r && i.length === 0 && F.getState().setGlobalHotkeysEnabled(!0), {
|
|
414
414
|
modals: i,
|
|
415
415
|
closingIds: t
|
|
416
416
|
};
|
|
417
417
|
});
|
|
418
|
-
},
|
|
418
|
+
}, I);
|
|
419
419
|
},
|
|
420
420
|
closeAll: () => {
|
|
421
421
|
let n = t().modals;
|
|
@@ -423,18 +423,18 @@ var R = (e) => {
|
|
|
423
423
|
e({
|
|
424
424
|
modals: [],
|
|
425
425
|
closingIds: /* @__PURE__ */ new Set()
|
|
426
|
-
}),
|
|
427
|
-
},
|
|
426
|
+
}), F.getState().setGlobalHotkeysEnabled(!0);
|
|
427
|
+
}, I));
|
|
428
428
|
},
|
|
429
429
|
isOpen: (e) => t().modals.some((t) => t.id === e)
|
|
430
430
|
}));
|
|
431
431
|
//#endregion
|
|
432
432
|
//#region src/components/modal_provider/modal_provider.tsx
|
|
433
|
-
function
|
|
434
|
-
let n =
|
|
433
|
+
function ae() {
|
|
434
|
+
let n = R((e) => e.modals), r = R((e) => e.closingIds), i = R((e) => e.isOpen), a = R((e) => e.close);
|
|
435
435
|
return /* @__PURE__ */ t(e, { children: n.map((e) => {
|
|
436
436
|
let n = i(e.id) && !r.has(e.id);
|
|
437
|
-
return e.type === "confirm" ? /* @__PURE__ */ t(
|
|
437
|
+
return e.type === "confirm" ? /* @__PURE__ */ t(j, {
|
|
438
438
|
isOpen: n,
|
|
439
439
|
onClose: () => a(e.id),
|
|
440
440
|
onConfirm: async () => {
|
|
@@ -445,7 +445,7 @@ function W() {
|
|
|
445
445
|
cancelLabel: e.cancelLabel,
|
|
446
446
|
confirmColor: e.confirmColor,
|
|
447
447
|
children: e.children
|
|
448
|
-
}, e.id) : /* @__PURE__ */ t(
|
|
448
|
+
}, e.id) : /* @__PURE__ */ t(A, {
|
|
449
449
|
isOpen: n,
|
|
450
450
|
onClose: () => a(e.id),
|
|
451
451
|
title: e.title,
|
|
@@ -455,8 +455,87 @@ function W() {
|
|
|
455
455
|
}) });
|
|
456
456
|
}
|
|
457
457
|
//#endregion
|
|
458
|
+
//#region src/components/radio_options/radio_options.tsx
|
|
459
|
+
function oe({ options: e, orientation: r = "vertical", value: i, defaultValue: a, onChange: o, name: s, label: l, error: d, required: f, disabled: m, className: h, wrapperClassName: g, id: _ = "radio", ...v }) {
|
|
460
|
+
let y = `${_}-${c()}`, b = s ?? y, [x, S] = u(a ?? ""), C = i !== void 0, w = C ? i : x, T = e.map((e) => typeof e == "string" ? {
|
|
461
|
+
value: e,
|
|
462
|
+
label: e
|
|
463
|
+
} : e), E = `${y}-error`, D = (e) => {
|
|
464
|
+
C || S(e), o?.(e);
|
|
465
|
+
};
|
|
466
|
+
return /* @__PURE__ */ n("fieldset", {
|
|
467
|
+
className: p("m-0 border-0 p-0", g),
|
|
468
|
+
disabled: m,
|
|
469
|
+
"aria-describedby": d ? E : void 0,
|
|
470
|
+
"aria-required": f,
|
|
471
|
+
...v,
|
|
472
|
+
children: [
|
|
473
|
+
l && /* @__PURE__ */ n("legend", {
|
|
474
|
+
className: p("mb-2 text-sm font-medium text-gray-700 dark:text-gray-300", h),
|
|
475
|
+
children: [l, f && /* @__PURE__ */ t("span", {
|
|
476
|
+
className: "ml-1 text-red-500 dark:text-red-400",
|
|
477
|
+
children: "*"
|
|
478
|
+
})]
|
|
479
|
+
}),
|
|
480
|
+
/* @__PURE__ */ t("div", {
|
|
481
|
+
className: p(r === "horizontal" ? "flex flex-row gap-2" : "flex flex-col gap-2"),
|
|
482
|
+
children: T.map((e, i) => {
|
|
483
|
+
let a = `${y}-${i}`, o = `${y}-${i}-desc`, s = w === e.value, c = m ?? e.disabled;
|
|
484
|
+
return /* @__PURE__ */ n("label", {
|
|
485
|
+
htmlFor: a,
|
|
486
|
+
className: p("flex cursor-pointer items-start gap-3 rounded-lg border px-3 py-2.5 transition-colors duration-150", r === "horizontal" && "flex-1", "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", d ? "focus-within:ring-red-500" : "focus-within:ring-blue-500", s ? d ? "border-red-500 bg-red-50 dark:border-red-400 dark:bg-red-950/20" : "border-blue-500 bg-blue-50 dark:border-blue-500 dark:bg-blue-950/25" : d ? "border-red-300 bg-white dark:border-red-800/50 dark:bg-gray-800/50" : "border-gray-200 bg-gray-50 hover:border-gray-300 hover:bg-white dark:border-gray-700 dark:bg-gray-800/50 dark:hover:border-gray-600 dark:hover:bg-gray-800", c && "cursor-not-allowed opacity-50"),
|
|
487
|
+
children: [
|
|
488
|
+
/* @__PURE__ */ t("input", {
|
|
489
|
+
type: "radio",
|
|
490
|
+
id: a,
|
|
491
|
+
name: b,
|
|
492
|
+
value: e.value,
|
|
493
|
+
checked: s,
|
|
494
|
+
onChange: () => D(e.value),
|
|
495
|
+
disabled: c,
|
|
496
|
+
required: f && i === 0,
|
|
497
|
+
"aria-invalid": d ? !0 : void 0,
|
|
498
|
+
"aria-describedby": e.description ? o : void 0,
|
|
499
|
+
className: "sr-only"
|
|
500
|
+
}),
|
|
501
|
+
/* @__PURE__ */ t("span", {
|
|
502
|
+
className: p("mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors duration-150", s ? d ? "border-red-500 dark:border-red-400" : "border-blue-600 dark:border-blue-500" : d ? "border-red-400 dark:border-red-600" : "border-gray-300 dark:border-gray-600"),
|
|
503
|
+
"aria-hidden": !0,
|
|
504
|
+
children: s && /* @__PURE__ */ t("span", { className: p("h-2 w-2 rounded-full", d ? "bg-red-500 dark:bg-red-400" : "bg-blue-600 dark:bg-blue-500") })
|
|
505
|
+
}),
|
|
506
|
+
/* @__PURE__ */ n("span", {
|
|
507
|
+
className: "flex min-w-0 flex-col",
|
|
508
|
+
children: [/* @__PURE__ */ n("span", {
|
|
509
|
+
className: "flex items-center gap-1.5",
|
|
510
|
+
children: [e.icon && /* @__PURE__ */ t("span", {
|
|
511
|
+
className: p(e.icon, "h-4 w-4 shrink-0", s ? d ? "text-red-600 dark:text-red-400" : "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"),
|
|
512
|
+
"aria-hidden": !0
|
|
513
|
+
}), /* @__PURE__ */ t("span", {
|
|
514
|
+
className: p("select-none text-sm font-medium", s ? d ? "text-red-700 dark:text-red-300" : "text-blue-700 dark:text-blue-300" : "text-gray-700 dark:text-gray-300"),
|
|
515
|
+
children: e.label
|
|
516
|
+
})]
|
|
517
|
+
}), e.description && /* @__PURE__ */ t("span", {
|
|
518
|
+
id: o,
|
|
519
|
+
className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400",
|
|
520
|
+
children: e.description
|
|
521
|
+
})]
|
|
522
|
+
})
|
|
523
|
+
]
|
|
524
|
+
}, e.value);
|
|
525
|
+
})
|
|
526
|
+
}),
|
|
527
|
+
d && /* @__PURE__ */ t("p", {
|
|
528
|
+
id: E,
|
|
529
|
+
className: "mt-2 text-xs text-red-600 dark:text-red-400",
|
|
530
|
+
role: "alert",
|
|
531
|
+
children: d
|
|
532
|
+
})
|
|
533
|
+
]
|
|
534
|
+
});
|
|
535
|
+
}
|
|
536
|
+
//#endregion
|
|
458
537
|
//#region src/components/select/select.tsx
|
|
459
|
-
function
|
|
538
|
+
function se({ options: e, label: r, error: i, placeholder: a, className: o, wrapperClassName: s, value: l, defaultValue: u, onChange: d, id: f = "select", ...m }) {
|
|
460
539
|
let h = `${f}-${c()}`;
|
|
461
540
|
return /* @__PURE__ */ n("div", {
|
|
462
541
|
className: p("w-full", s),
|
|
@@ -497,7 +576,7 @@ function G({ options: e, label: r, error: i, placeholder: a, className: o, wrapp
|
|
|
497
576
|
}
|
|
498
577
|
//#endregion
|
|
499
578
|
//#region src/components/switch/switch.tsx
|
|
500
|
-
function
|
|
579
|
+
function ce({ label: r, description: i, error: a, className: o, wrapperClassName: s, checked: l, defaultChecked: d = !1, onChange: f, id: m = "switch", ...h }) {
|
|
501
580
|
let g = `${m}-${c()}`, [_, v] = u(d), y = l !== void 0, b = y ? l : _, x = [i && `${g}-description`, a && `${g}-error`].filter(Boolean).join(" ") || void 0;
|
|
502
581
|
return /* @__PURE__ */ n("div", {
|
|
503
582
|
className: p("w-full", s),
|
|
@@ -555,7 +634,7 @@ function K({ label: r, description: i, error: a, className: o, wrapperClassName:
|
|
|
555
634
|
}
|
|
556
635
|
//#endregion
|
|
557
636
|
//#region src/components/tabs/tabs.tsx
|
|
558
|
-
function
|
|
637
|
+
function z({ items: e, defaultIndex: r = 0, className: i, tabListClassName: a, panelClassName: o, onChange: s }) {
|
|
559
638
|
let [c, l] = u(r), d = (t) => {
|
|
560
639
|
e[t]?.disabled || (l(t), s?.(t));
|
|
561
640
|
}, f = e[c];
|
|
@@ -586,7 +665,7 @@ function q({ items: e, defaultIndex: r = 0, className: i, tabListClassName: a, p
|
|
|
586
665
|
}
|
|
587
666
|
//#endregion
|
|
588
667
|
//#region src/components/textarea/textarea.tsx
|
|
589
|
-
function
|
|
668
|
+
function le({ label: e, error: r, showCharCount: i = !1, minLength: a, maxLength: o, className: s, wrapperClassName: l, value: d, defaultValue: f, onChange: m, id: h = "textarea", ...g }) {
|
|
590
669
|
let _ = `${h}-${c()}`, [y, b] = u(typeof f == "string" ? f.length : 0), x = typeof d == "string" ? d.length : d === void 0 ? y : 0, S = i && (a !== void 0 || o !== void 0);
|
|
591
670
|
return /* @__PURE__ */ n("div", {
|
|
592
671
|
className: p("w-full", l),
|
|
@@ -627,24 +706,15 @@ function J({ label: e, error: r, showCharCount: i = !1, minLength: a, maxLength:
|
|
|
627
706
|
}
|
|
628
707
|
//#endregion
|
|
629
708
|
//#region src/hooks/use_is_client/use_is_client.tsx
|
|
630
|
-
var
|
|
709
|
+
var B = () => {
|
|
631
710
|
let [e, t] = u(!1);
|
|
632
711
|
return s(() => {
|
|
633
712
|
requestAnimationFrame(() => {
|
|
634
713
|
t(!0);
|
|
635
714
|
});
|
|
636
715
|
}, []), e;
|
|
637
|
-
};
|
|
638
|
-
|
|
639
|
-
//#region src/utils/theme.ts
|
|
640
|
-
function X(e) {
|
|
641
|
-
let t = document.documentElement;
|
|
642
|
-
e === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? t.classList.add("dark") : t.classList.remove("dark") : e === "dark" ? t.classList.add("dark") : t.classList.remove("dark");
|
|
643
|
-
}
|
|
644
|
-
//#endregion
|
|
645
|
-
//#region src/lib/theme_transition.ts
|
|
646
|
-
var Z = 750, Q = "ease-in-out";
|
|
647
|
-
async function $({ theme: e, element: t, transitionDuration: n = Z, transitionEasing: r = Q, applyThemeCallback: i }) {
|
|
716
|
+
}, V = 750, H = "ease-in-out";
|
|
717
|
+
async function U({ theme: e, element: t, transitionDuration: n = V, transitionEasing: r = H, applyThemeCallback: i }) {
|
|
648
718
|
if (!document.startViewTransition || globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
|
649
719
|
i(e);
|
|
650
720
|
return;
|
|
@@ -658,69 +728,96 @@ async function $({ theme: e, element: t, transitionDuration: n = Z, transitionEa
|
|
|
658
728
|
pseudoElement: "::view-transition-new(root)"
|
|
659
729
|
});
|
|
660
730
|
}
|
|
661
|
-
function
|
|
731
|
+
function ue(e) {
|
|
662
732
|
return e === "light" ? "dark" : e === "dark" ? "system" : "light";
|
|
663
733
|
}
|
|
664
734
|
//#endregion
|
|
665
|
-
//#region src/
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
735
|
+
//#region src/utils/theme.ts
|
|
736
|
+
var W = "theme", G = /* @__PURE__ */ new Set(), K = null;
|
|
737
|
+
function q(e) {
|
|
738
|
+
return e === "light" || e === "dark" || e === "system";
|
|
739
|
+
}
|
|
740
|
+
function J() {
|
|
741
|
+
return globalThis.window !== void 0 && globalThis.document !== void 0;
|
|
742
|
+
}
|
|
743
|
+
function Y(e) {
|
|
744
|
+
for (let t of G) t(e);
|
|
745
|
+
}
|
|
746
|
+
function de() {
|
|
747
|
+
if (!J() || K) return;
|
|
748
|
+
let e = globalThis.matchMedia("(prefers-color-scheme: dark)"), t = (e) => {
|
|
749
|
+
if (e.key !== W) return;
|
|
750
|
+
let t = q(e.newValue) ? e.newValue : "system";
|
|
751
|
+
X(t), Y(t);
|
|
752
|
+
}, n = () => {
|
|
753
|
+
Z() === "system" && (X("system"), Y("system"));
|
|
754
|
+
}, r = typeof e.addEventListener == "function" && typeof e.removeEventListener == "function";
|
|
755
|
+
globalThis.addEventListener("storage", t), r && e.addEventListener("change", n), K = () => {
|
|
756
|
+
globalThis.removeEventListener("storage", t), r && e.removeEventListener("change", n), K = null;
|
|
757
|
+
};
|
|
758
|
+
}
|
|
759
|
+
function fe() {
|
|
760
|
+
G.size === 0 && K && K();
|
|
761
|
+
}
|
|
762
|
+
function X(e) {
|
|
763
|
+
let t = document.documentElement;
|
|
764
|
+
e === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? t.classList.add("dark") : t.classList.remove("dark") : e === "dark" ? t.classList.add("dark") : t.classList.remove("dark");
|
|
765
|
+
}
|
|
766
|
+
function Z() {
|
|
767
|
+
if (!J()) return "system";
|
|
768
|
+
let e = globalThis.localStorage.getItem(W);
|
|
769
|
+
return q(e) ? e : "system";
|
|
770
|
+
}
|
|
771
|
+
function Q(e) {
|
|
772
|
+
J() && (X(e), globalThis.localStorage.setItem(W, e), Y(e));
|
|
678
773
|
}
|
|
679
|
-
function
|
|
680
|
-
|
|
774
|
+
function $(e) {
|
|
775
|
+
return G.add(e), de(), () => {
|
|
776
|
+
G.delete(e), fe();
|
|
777
|
+
};
|
|
778
|
+
}
|
|
779
|
+
//#endregion
|
|
780
|
+
//#region src/components/theme_toggle/theme_toggle.tsx
|
|
781
|
+
var pe = {
|
|
782
|
+
light: "i-tabler-sun text-yellow-500",
|
|
783
|
+
dark: "i-tabler-moon-stars text-gray-700 dark:text-yellow-500",
|
|
784
|
+
system: "i-tabler-device-desktop text-blue-500"
|
|
785
|
+
}, me = "i-tabler-device-desktop text-gray-400";
|
|
786
|
+
function he({ isTransitionEnabled: e = !0, transitionDuration: n, transitionEasing: r, size: i = "md" }) {
|
|
787
|
+
let [a, c] = u("system"), d = B(), f = l(null);
|
|
681
788
|
s(() => {
|
|
682
|
-
let e =
|
|
683
|
-
requestAnimationFrame(() => {
|
|
684
|
-
|
|
789
|
+
let e = Z();
|
|
790
|
+
return requestAnimationFrame(() => {
|
|
791
|
+
c(e), Q(e);
|
|
792
|
+
}), $((e) => {
|
|
793
|
+
c(e);
|
|
685
794
|
});
|
|
686
|
-
}, [])
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
return e.addEventListener("change", t), () => {
|
|
691
|
-
e.removeEventListener("change", t);
|
|
692
|
-
};
|
|
693
|
-
}, [i]);
|
|
694
|
-
let f = o(async () => {
|
|
695
|
-
let t = ee(i), o = d.current;
|
|
696
|
-
o && e ? await $({
|
|
795
|
+
}, []);
|
|
796
|
+
let p = o(async () => {
|
|
797
|
+
let t = ue(a), i = f.current;
|
|
798
|
+
i && e ? await U({
|
|
697
799
|
theme: t,
|
|
698
|
-
element:
|
|
800
|
+
element: i,
|
|
699
801
|
transitionDuration: n,
|
|
700
802
|
transitionEasing: r,
|
|
701
|
-
applyThemeCallback:
|
|
702
|
-
}) :
|
|
803
|
+
applyThemeCallback: Q
|
|
804
|
+
}) : Q(t);
|
|
703
805
|
}, [
|
|
704
|
-
|
|
806
|
+
a,
|
|
705
807
|
e,
|
|
706
808
|
n,
|
|
707
809
|
r
|
|
708
810
|
]);
|
|
709
|
-
return /* @__PURE__ */ t(
|
|
710
|
-
ref:
|
|
811
|
+
return /* @__PURE__ */ t(E, {
|
|
812
|
+
ref: f,
|
|
813
|
+
icon: d ? pe[a] : me,
|
|
814
|
+
"aria-label": `Thème actuel: ${a}`,
|
|
815
|
+
size: i,
|
|
711
816
|
onClick: () => {
|
|
712
|
-
|
|
817
|
+
p();
|
|
713
818
|
},
|
|
714
|
-
className: "
|
|
715
|
-
"aria-label": `Thème actuel: ${i}`,
|
|
716
|
-
children: c ? te(i) : /* @__PURE__ */ t("div", {
|
|
717
|
-
className: "i-tabler-device-desktop w-5 h-5 text-gray-400",
|
|
718
|
-
style: {
|
|
719
|
-
width: "20px",
|
|
720
|
-
height: "20px"
|
|
721
|
-
}
|
|
722
|
-
})
|
|
819
|
+
className: "!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"
|
|
723
820
|
});
|
|
724
821
|
}
|
|
725
822
|
//#endregion
|
|
726
|
-
export { D as BASE_INPUT_STYLES, g as Button, v as CharacterCount, y as Checkbox, S as ClientOnly,
|
|
823
|
+
export { D as BASE_INPUT_STYLES, g as Button, v as CharacterCount, y as Checkbox, S as ClientOnly, j as ConfirmModal, E as IconButton, ee as Input, A as Modal, ae as ModalProvider, oe as RadioOptions, se as Select, ce as Switch, z as Tabs, le as Textarea, he as ThemeToggle, X as applyTheme, $ as followThemeState, Z as getCurrentTheme, Q as setCurrentTheme, b as useClientOnly, F as useGlobalHotkeysStore, B as useIsClient, R as useModalStore, O as useRunAfterAnimation, x as withClientOnly };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@minimalstuff/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/minimalstuff/ui.git"
|
|
@@ -33,30 +33,33 @@
|
|
|
33
33
|
"scripts": {
|
|
34
34
|
"dev": "storybook dev -p 6006",
|
|
35
35
|
"build": "tsc -b && VITE_BUILD_LIB=1 vite build",
|
|
36
|
-
"lint": "oxlint
|
|
36
|
+
"lint": "oxlint .",
|
|
37
37
|
"test": "vitest run --config vitest.ci.config.ts",
|
|
38
38
|
"test:stories": "vitest run",
|
|
39
39
|
"preview": "vite preview",
|
|
40
|
-
"format": "oxfmt
|
|
40
|
+
"format": "pnpm lint:fix; oxfmt .",
|
|
41
41
|
"storybook": "storybook dev -p 6006 ",
|
|
42
42
|
"build-storybook": "storybook build",
|
|
43
43
|
"release": "release-it",
|
|
44
44
|
"ci": "storybook dev -p 6006 --ci",
|
|
45
|
-
"lint:fix": "oxlint --
|
|
45
|
+
"lint:fix": "oxlint . --fix --fix-suggestions --fix-dangerously",
|
|
46
|
+
"format:check": "oxfmt . --check",
|
|
47
|
+
"typecheck": "tsc --noEmit",
|
|
48
|
+
"check": "pnpm run lint && pnpm run format:check && pnpm run typecheck"
|
|
46
49
|
},
|
|
47
50
|
"dependencies": {
|
|
48
51
|
"clsx": "^2.1.1",
|
|
49
52
|
"zustand": "^5.0.12"
|
|
50
53
|
},
|
|
51
54
|
"devDependencies": {
|
|
52
|
-
"@chromatic-com/storybook": "^5.1.
|
|
53
|
-
"@minimalstuff/tooling": "^0.
|
|
54
|
-
"@release-it/conventional-changelog": "^
|
|
55
|
-
"@storybook/addon-a11y": "^10.3.
|
|
56
|
-
"@storybook/addon-docs": "^10.3.
|
|
57
|
-
"@storybook/addon-onboarding": "^10.3.
|
|
58
|
-
"@storybook/addon-vitest": "^10.3.
|
|
59
|
-
"@storybook/react-vite": "^10.3.
|
|
55
|
+
"@chromatic-com/storybook": "^5.1.2",
|
|
56
|
+
"@minimalstuff/tooling": "^0.5.0",
|
|
57
|
+
"@release-it/conventional-changelog": "^11.0.0",
|
|
58
|
+
"@storybook/addon-a11y": "^10.3.6",
|
|
59
|
+
"@storybook/addon-docs": "^10.3.6",
|
|
60
|
+
"@storybook/addon-onboarding": "^10.3.6",
|
|
61
|
+
"@storybook/addon-vitest": "^10.3.6",
|
|
62
|
+
"@storybook/react-vite": "^10.3.6",
|
|
60
63
|
"@testing-library/jest-dom": "^6.9.1",
|
|
61
64
|
"@testing-library/react": "^16.3.2",
|
|
62
65
|
"@types/node": "^24.10.1",
|
|
@@ -65,23 +68,23 @@
|
|
|
65
68
|
"@unocss/preset-icons": "^66.6.8",
|
|
66
69
|
"@unocss/preset-web-fonts": "^66.6.8",
|
|
67
70
|
"@vitejs/plugin-react": "^6.0.1",
|
|
68
|
-
"@vitest/browser-playwright": "^4.1.
|
|
69
|
-
"@vitest/coverage-v8": "^4.1.
|
|
70
|
-
"globals": "^17.
|
|
71
|
-
"happy-dom": "^20.
|
|
72
|
-
"oxfmt": "^0.
|
|
73
|
-
"oxlint": "^1.
|
|
74
|
-
"oxlint-tsgolint": "^0.
|
|
71
|
+
"@vitest/browser-playwright": "^4.1.5",
|
|
72
|
+
"@vitest/coverage-v8": "^4.1.5",
|
|
73
|
+
"globals": "^17.6.0",
|
|
74
|
+
"happy-dom": "^20.9.0",
|
|
75
|
+
"oxfmt": "^0.47.0",
|
|
76
|
+
"oxlint": "^1.62.0",
|
|
77
|
+
"oxlint-tsgolint": "^0.22.1",
|
|
75
78
|
"playwright": "^1.59.1",
|
|
76
79
|
"react": "^19.2.5",
|
|
77
80
|
"react-dom": "^19.2.5",
|
|
78
|
-
"release-it": "^
|
|
79
|
-
"storybook": "^10.3.
|
|
80
|
-
"typescript": "~6.0.
|
|
81
|
+
"release-it": "^20.0.1",
|
|
82
|
+
"storybook": "^10.3.6",
|
|
83
|
+
"typescript": "~6.0.3",
|
|
81
84
|
"unocss": "^66.6.8",
|
|
82
|
-
"vite": "8.0.
|
|
85
|
+
"vite": "8.0.10",
|
|
83
86
|
"vite-plugin-dts": "^4.5.4",
|
|
84
|
-
"vitest": "^4.1.
|
|
87
|
+
"vitest": "^4.1.5"
|
|
85
88
|
},
|
|
86
89
|
"peerDependencies": {
|
|
87
90
|
"react": "^19.0.0",
|