levannta-ui 1.0.32 → 1.0.34-react18
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/README.md +23 -0
- package/dist/components/ui/Header/Header.d.ts +10 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +1147 -794
- package/dist/index.esm.js.map +1 -1
- package/dist/index.umd.js +15 -7
- package/dist/index.umd.js.map +1 -1
- package/package.json +22 -14
package/README.md
CHANGED
|
@@ -236,3 +236,26 @@ import { Drawer } from 'levannta-ui';
|
|
|
236
236
|
- Animaciones optimizadas para dispositivos móviles
|
|
237
237
|
- Interacción táctil mejorada con botones más grandes
|
|
238
238
|
- Ajustes automáticos para dispositivos con diferentes tamaños de pantalla
|
|
239
|
+
|
|
240
|
+
## 📚 Documentación
|
|
241
|
+
|
|
242
|
+
- [**Sistema de Versiones**](./VERSIONING.md) - Manejo de React 18 y React 19
|
|
243
|
+
- [**Configuración de Storybook**](./STORYBOOK.md) - Setup y uso de Storybook
|
|
244
|
+
- [**Guía de Deployment**](./DEPLOYMENT.md) - Publicación automática a npm y GCP
|
|
245
|
+
|
|
246
|
+
## 🚀 Publicación Automática
|
|
247
|
+
|
|
248
|
+
**¡Ahora configurado para publicar automáticamente ambas versiones!**
|
|
249
|
+
|
|
250
|
+
Cuando haces push a `main`:
|
|
251
|
+
- ✅ Se construyen **React 18** y **React 19** automáticamente
|
|
252
|
+
- ✅ Se publican a npm con tags `react18` y `react19`
|
|
253
|
+
- ✅ Se despliegan **ambos Storybooks** a Google Cloud Run
|
|
254
|
+
- ✅ Se crean tags de Git automáticamente
|
|
255
|
+
|
|
256
|
+
```bash
|
|
257
|
+
# Los usuarios pueden instalar la versión que necesiten:
|
|
258
|
+
npm install levannta-ui@react18 # Para React 18
|
|
259
|
+
npm install levannta-ui@react19 # Para React 19
|
|
260
|
+
npm install levannta-ui # React 19 (latest)
|
|
261
|
+
```
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Logo } from '../Logo/Logo';
|
|
3
|
+
|
|
4
|
+
export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
title: string;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
showLogo?: boolean;
|
|
8
|
+
logoProps?: React.ComponentProps<typeof Logo>;
|
|
9
|
+
}
|
|
10
|
+
export declare const Header: React.FC<HeaderProps>;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.button{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:12px;line-height:24px;font-weight:600;transition:all .2s;outline:none;cursor:pointer;border:none;padding:8px 24px}.button:focus-visible{outline:6px solid #D5FFF2;outline-offset:2px}.button:disabled{opacity:.4;pointer-events:none}.button-filled{background-color:var(--button-bg, hsl(221.2 83.2% 53.3%));color:var(--button-text, white);border:none}.button-filled:hover:not(:disabled){background-color:var(--button-hover, hsl(221.2 83.2% 47.3%))}.button-outlined{background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%));border:1px solid var(--button-border, hsl(214.3 31.8% 91.4%))}.button-outlined:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3));color:var(--button-bg-hover, hsl(221.2 83.2% 47.3%))}.button-icon{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%))}.button-icon:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3))}.button-icon.button-size-sm{width:36px;height:36px}.button-icon.button-size-md{width:48px;height:48px}.button-icon.button-size-lg{width:56px;height:56px}.button-icon.button-size-xl{width:64px;height:64px}.button-icon.button-pill{border-radius:50%}.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, transparent)}.button-filled.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-outlined.button-active{background-color:transparent;color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, #076046)}.button-icon.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-color-primary{--button-bg: #00F7AA;--button-text:#364153;--button-hover: #AEFFE6;--button-border: #00F7AA;--button-bg-light: hsl(221.2 83.2% 96%);--button-bg-hover: #AEFFE6;--button-bg-active: #076046;--button-text-active: #F9FAFB;--button-border-active: #076046}.button-color-secondary{--button-bg: #00B6FF;--button-text: #364153;--button-hover: #A7F0FF;--button-border: #00B6FF;--button-bg-light: hsl(142.1 76.2% 96%);--button-bg-hover: #A7F0FF;--button-bg-active: #0056B3;--button-text-active: #F9FAFB;--button-border-active: #0056B3}.button-color-error{--button-bg: #FB2C36;--button-text: #F2F3F7;--button-hover: #FF6467;--button-border: #FB2C36;--button-bg-light: hsl(0 84.2% 96%);--button-bg-hover: #FF6467;--button-bg-active: #9F0712;--button-text-active: #F2F3F7;--button-border-active: #9F0712}.button-color-clear{--button-bg: transparent;--button-text: #364153;--button-hover: #F9FAFB;--button-border: #D4D4D4;--button-bg-light: hsl(215.4 16.3% 96%);--button-bg-hover: #F9FAFB;--button-bg-active: transparent;--button-text-active: #364153;--button-border-active: transparent}.button-outlined-primary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-secondary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-error{color:var(--button-text);border-color:var(--button-border)}.button-outlined-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-clear{color:var(--button-text);border-color:var(--button-border)}.button-outlined-clear:hover:not(:disabled){color:var(--button-text);background-color:var(--button-bg-light)}.button-outlined-primary.button-active,.button-filled-primary.button-active,.button-icon-primary.button-active,.button-outlined-secondary.button-active,.button-filled-secondary.button-active,.button-icon-secondary.button-active,.button-outlined-error.button-active,.button-filled-error.button-active,.button-icon-error.button-active,.button-outlined-clear.button-active,.button-filled-clear.button-active,.button-icon-clear.button-active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active)}.button-filled-primary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-primary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-secondary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-secondary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-error{background-color:var(--button-bg);color:var(--button-text)}.button-filled-error:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-clear{background-color:var(--button-bg);color:var(--button-text)}.button-filled-clear:hover:not(:disabled){background-color:var(--button-hover)}.button-icon-primary{color:var(--button-bg)}.button-icon-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-secondary{color:var(--button-bg)}.button-icon-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-error{color:var(--button-bg)}.button-icon-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-clear{color:var(--button-bg)}.button-icon-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-size-sm{min-width:94px;height:48px;font-size:12px}.button-size-md{min-width:101px;height:56px;font-size:16px}.button-size-lg{min-width:107px;height:72px;font-size:18px}.button-size-xl{min-width:130px;height:80px;font-size:20px}.button-pill{border-radius:9999px}.button-with-icon-left{position:relative;padding-left:3rem}.button-with-icon-right{position:relative;padding-right:3rem}.button-with-icon-left-justified{padding-left:5rem}.button-with-icon-right-justified{padding-right:5rem}.button-icon-left{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-icon-right{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-with-icon-left-justified .button-icon-left{left:1.75rem}.button-with-icon-right-justified .button-icon-right{right:1.75rem}.button-with-icon-left.button-with-icon-right{padding-left:2.5rem;padding-right:2.5rem}.button-size-sm .button-icon-left,.button-size-sm .button-icon-right{font-size:.875rem}.button-size-md .button-icon-left,.button-size-md .button-icon-right{font-size:1rem}.button-size-lg .button-icon-left,.button-size-lg .button-icon-right{font-size:1.125rem}.button-size-xl .button-icon-left,.button-size-xl .button-icon-right{font-size:1.25rem}.button-icon-only{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;display:flex}.button-size-sm.button-icon-only{width:36px;height:36px}.button-size-md.button-icon-only{width:48px;height:48px}.button-size-lg.button-icon-only{width:56px;height:56px}.button-size-xl.button-icon-only{width:64px;height:64px}.button-pill.button-icon-only{border-radius:50%}.button-icon-only.button-color-primary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-secondary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-error{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-clear{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-active{color:var(--button-text-active);background-color:var(--button-bg-active)}.sidebar-wrapper{position:relative;display:flex;height:100vh}.sidebar{display:flex;flex-direction:column;width:290px;height:100vh;background-color:#024;color:#fff;transition:width .3s;justify-content:space-between;align-items:center;padding-top:20px;padding-bottom:0;z-index:2;font-weight:600;font-size:14px;line-height:24px;letter-spacing:0%;vertical-align:middle}.sidebar-collapsed{width:90px}.sidebar-header{display:flex;align-items:center;padding:16px;justify-content:space-between;margin-bottom:50px}.sidebar-logo{display:flex;align-items:center;gap:42px;color:#fff}.sidebar-toggle{background:none;border:none;color:#8ba1b7;cursor:pointer;font-size:16px;padding:4px 8px;border-radius:4px}.sidebar-toggle:hover{background-color:#ffffff1a}.sidebar-menu{flex:1;width:85%;overflow-y:auto;gap:4px;margin:10px}.sidebar-item{border-bottom:1px solid #D4D4D4;border-spacing:10px;padding:10px 0}.active{background-color:#fff3;border-radius:8px}.sidebar-link{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;width:100%;padding:6px 12px}.active-text{color:#00f7aa!important;fill:#00f7aa!important}.active-text svg path{fill:#00f7aa!important}.sidebar-collapsed .sidebar-item{border-bottom:none;position:relative;background-color:transparent!important}.sidebar-collapsed .sidebar-item .active-text svg path{fill:#00f7aa!important}.sidebar-collapsed .sidebar-item:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:32px;height:1px;background-color:#d4d4d4}.sidebar-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#8ba1b7}.sidebar-content{display:flex;flex:1;justify-content:space-between;align-items:center;margin-left:16px}.sidebar-label{flex:1}.submenu{max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,padding .3s ease,visibility 0s linear .2s;padding-top:0;padding-bottom:0}.sidebar-item.open .submenu{max-height:300px;opacity:1;visibility:visible;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,padding .3s ease,visibility 0s linear 0s;padding-top:8px;padding-bottom:8px}.submenu-arrow{font-size:10px;color:#8ba1b7;transition:transform .3s ease}.submenu-item{display:flex;align-items:center;padding:6px 20px;text-decoration:none;color:#fff}.submenu-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:12px;color:#8ba1b7}.sidebar-footer{padding:16px}.logout-button{display:flex;align-items:center;gap:12px;background:none;border:none;color:#fff;width:100%;padding-bottom:10px;text-align:left;cursor:pointer;transition:background-color .2s;border-radius:4px;font-weight:600;font-size:14px;line-height:24px;letter-spacing:0%;vertical-align:middle}.sidebar-toggle-icon{position:relative;left:-14px;top:120px;transform:translateY(-50%) rotate(180deg);background:none;border:none;cursor:pointer;z-index:3;padding:0;margin-left:0;transition:transform .3s}.sidebar-toggle-icon.collapsed{transform:translateY(-50%) rotate(0)}.mobile-menu-button{display:none;background:transparent;border:none;cursor:pointer;padding:8px;z-index:10;color:#fff}.mobile-menu-button svg{width:24px;height:24px}.hamburger-icon{transition:transform .3s ease}.hamburger-line{transition:all .3s ease}.mobile-menu-button .top-line{transform-origin:12px 12px}.mobile-menu-button .middle-line{opacity:1}.mobile-menu-button .bottom-line{transform-origin:12px 12px}.mobile-menu-button.open .top-line{transform:translateY(2px) rotate(45deg);transform-origin:12px 12px}.mobile-menu-button.open .middle-line{opacity:0}.mobile-menu-button.open .bottom-line{transform:translateY(-7px) rotate(-45deg);transform-origin:12px 12px}.mobile-navbar{display:none}.mobile-header{display:flex;width:100%;padding:15px 20px;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:20px}.mobile-logo-menu{color:#fff}@media (max-width: 768px){.mobile-navbar{display:flex;position:fixed;top:0;left:0;width:100%;height:60px;background-color:#024;justify-content:space-between;align-items:center;padding:0 20px;box-shadow:0 2px 4px #0000001a;z-index:1001}.sidebar-item{border-bottom:none;padding:0}.mobile-logo{display:flex;align-items:center;height:100%}.mobile-menu-button{display:flex;position:relative;top:auto;left:auto}.sidebar-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;visibility:hidden}.sidebar-wrapper.mobile-open,.sidebar-wrapper.mobile-closing{visibility:visible;display:flex}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.sidebar-mobile{width:100%!important;max-width:100%!important;height:100vh;padding-top:0;padding-bottom:20px;overflow-y:auto}.mobile-header{opacity:1;transform:translateY(0);border-bottom:none}.sidebar-menu{width:100%;margin:0;padding-bottom:60px;transform:translateY(100%);opacity:0;will-change:transform,opacity;animation:none}.sidebar-wrapper.mobile-open .sidebar-menu{animation:slideInUp .5s cubic-bezier(.16,1,.3,1) forwards}.sidebar-wrapper.mobile-closing .sidebar-menu{transform:translateY(100%);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1)}.sidebar-wrapper.mobile-open .sidebar-item{animation:fadeInUp .3s ease forwards;opacity:0}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(1){animation-delay:.1s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(2){animation-delay:.15s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(3){animation-delay:.2s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(4){animation-delay:.25s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(5){animation-delay:.3s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(6){animation-delay:.35s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(n+7){animation-delay:.4s}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999;opacity:0;transition:opacity .3s ease;visibility:hidden}.sidebar-overlay.visible{opacity:1;visibility:visible}.sidebar-wrapper.mobile-closing .sidebar-overlay{opacity:0}.active{background-color:#fff3;border-radius:0;width:100%}.sidebar-item.active{border-radius:0;width:100%;margin:0}.sidebar-item.active .sidebar-link{background-color:#fff3;border-radius:0;width:100%;padding:16px}.sidebar-link{padding:16px;width:100%;border-radius:0;display:flex;align-items:center}.sidebar-item .sidebar-link.active{background-color:#fff3;padding-left:16px;padding-right:16px;margin:0;width:100%}.sidebar-icon{margin-right:16px}.mobile-close-button{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;font-weight:700}.sidebar-item.open{background-color:#ffffff0d}.sidebar-content{width:100%;justify-content:space-between;margin-left:16px}.submenu-arrow{margin-left:auto;transition:transform .3s ease}.sidebar-item.open .submenu-arrow{transform:rotate(180deg)}.sidebar-item{width:100%;border-radius:0}.submenu-label{padding-left:10px;font-size:14px}.sidebar-item.open .submenu{max-height:500px;padding-left:0;width:100%}.submenu{padding-left:0;background-color:transparent;width:100%;padding-bottom:8px;gap:0}.submenu-item{padding:2px 66px;border-bottom:none;width:100%;border-radius:0;display:flex;align-items:center}.submenu-item.active{background-color:#fff3;border-radius:0;width:100%}.sidebar-mobile{padding-top:0;padding-bottom:20px;overflow-y:auto}.sidebar-toggle-icon{display:none}}.collapsible{background:#002244;border-radius:24px;overflow:hidden;box-shadow:0 2px 4px #0000001a;position:relative;width:100%;gap:24px;padding:28px;transform-origin:top;transition:transform .3s ease}.collapsible.open{min-height:578px;transform-origin:top;transition:transform .3s ease}.collapsible-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;background:#002244;transition:background-color .3s ease}.collapsible-header:hover{background:#002244}.collapsible-header-content{flex:1}.collapsible-title{margin:0;font-size:24px;line-height:32px;font-weight:700;color:#00b6ff;letter-spacing:0;gap:2px}.collapsible-subtitle{font-size:16px;line-height:20px;font-weight:400;color:#fff;letter-spacing:0;gap:2px}.collapsible-arrow{transition:transform .3s ease;color:#00b6ff}.collapsible-arrow.open{transform:rotate(180deg)}.collapsible-content{max-height:0;overflow:hidden;background:#002244;color:#fff}.collapsible-content.open{max-height:2000px;margin-top:24px}.uploader-wrapper{width:100%;max-width:490px;border-radius:12px;border-width:1px;padding:16px;gap:16;opacity:1;border:1px solid #D4D4D4;background:#FFFFFF;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.uploader-wrapper.dotted,.uploader-wrapper.bordered{border:none}.uploader-container{width:290;height:230;top:20px;left:32px}.uploader-container.uploader-drag-over{border-color:#00b6ff;background:#F8FCFF}.uploader-container.uploader-loading{cursor:not-allowed;opacity:.7}.uploader-container.uploader-disabled{cursor:not-allowed;opacity:.5;background:#F5F5F5}.uploader-card{border:1px solid #E5E7EB;background:#FFFFFF;box-shadow:0 1px 3px #0000001a;padding:24px}.uploader-input{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;z-index:-1;pointer-events:none}.uploader-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;z-index:0;width:100%}.uploader-drop-zone{border:2px dashed #D4D4D4;border-radius:8px;background:#F9FAFB;padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px;cursor:pointer;transition:all .2s ease-in-out;min-height:120px;justify-content:center}.uploader-drop-zone:hover{border-color:#00b6ff;background:#F8FCFF}.uploader-drop-zone.uploader-drag-over{border-color:#00b6ff;background:#E6F7FF}.uploader-placeholder{font-weight:500;font-size:14px;line-height:20px;color:#374151;margin:0;text-align:center}.uploader-button{background:#00B6FF;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background-color .2s ease-in-out}.uploader-button:hover{background:#0095CC}.uploader-button:disabled{background:#9CA3AF;cursor:not-allowed}.uploader-google-drive-button{background:white;color:#374151;border:1px solid #D1D5DB;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease-in-out;width:100%;justify-content:center}.uploader-google-drive-button:hover{background:#F9FAFB;border-color:#9ca3af}.uploader-google-drive-button:disabled{background:#F3F4F6;color:#9ca3af;cursor:not-allowed}.uploader-drop-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;padding:24px;width:100%}.uploader-drop-area svg{color:#6b7280;transition:color .2s ease-in-out}.uploader-container:hover .uploader-drop-area svg{color:#00b6ff}.uploader-container.uploader-drag-over .uploader-drop-area svg{color:#00b6ff;transform:scale(1.1)}.uploader-text{display:flex;flex-direction:column;gap:4px}.uploader-file-types{font-size:12px;line-height:16px;color:#6b7280;margin:0}.uploader-google-drive-link{background:none;border:none;color:#00b6ff;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:color .2s ease-in-out;padding:8px;border-radius:4px}.uploader-google-drive-link:hover{color:#0095cc;background:#F8FCFF}.uploader-google-drive-link:disabled{color:#9ca3af;cursor:not-allowed}.uploader-error{margin-top:8px;padding:8px 12px;background:#FEF2F2;border:1px solid #FECACA;border-radius:6px;font-size:12px;line-height:16px;color:#dc2626;animation:slideIn .2s ease-in-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.uploader-container{min-height:100px;padding:16px}.uploader-drop-zone{padding:16px;min-height:100px}.uploader-title{font-size:16px}.uploader-placeholder{font-size:13px}.uploader-file-types{font-size:11px}}.uploader-container{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.uploader-container:focus-within{outline:2px solid #00B6FF;outline-offset:2px}.icon-size{width:18px;height:16px}.input-container{display:flex;flex-direction:column;gap:4px;width:100%}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}.input{width:100%;border-radius:8px;border:1px solid;font-size:14px;line-height:1.5;transition:all .2s ease;outline:none;background-color:transparent}.input:focus{outline:none}.input::placeholder{color:#9ca3af;opacity:1}.input-theme-light{background-color:#fff;color:#111827;border-color:#d1d5db}.input-theme-light::placeholder{color:#9ca3af}.input-theme-dark{background-color:#374151;color:#f9fafb;border-color:#4b5563}.input-theme-dark::placeholder{color:#9ca3af}.input-size-sm{height:32px;padding:6px 12px;font-size:12px}.input-size-md{height:40px;padding:8px 12px;font-size:14px}.input-size-lg{height:48px;padding:12px 16px;font-size:16px}.input-state-default{border-color:#d1d5db}.input-theme-dark.input-state-default{border-color:#4b5563}.input-state-focused,.input-theme-dark.input-state-focused{border-color:#6b7280;box-shadow:0 0 0 1px #6b7280}.input-state-filled{border-color:#d1d5db}.input-theme-dark.input-state-filled{border-color:#4b5563}.input-state-error,.input-theme-dark.input-state-error{border-color:#ef4444}.input-state-success,.input-theme-dark.input-state-success{border-color:#10b981}.input-state-disabled{background-color:#f3f4f6;color:#9ca3af;border-color:#e5e7eb;cursor:not-allowed;opacity:.6}.input-theme-dark.input-state-disabled{background-color:#1f2937;color:#6b7280;border-color:#374151}.input-with-leading-icon{padding-left:40px}.input-with-trailing-icon{padding-right:40px}.input-leading-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#6b7280;z-index:1;display:flex;align-items:center;justify-content:center}.input-trailing-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#6b7280;z-index:1;display:flex;align-items:center;justify-content:center}.input-size-sm .input-leading-icon,.input-size-sm .input-trailing-icon{left:8px;right:8px}.input-size-sm.input-with-leading-icon{padding-left:32px}.input-size-sm.input-with-trailing-icon{padding-right:32px}.input-size-lg .input-leading-icon,.input-size-lg .input-trailing-icon{left:16px;right:16px}.input-size-lg.input-with-leading-icon{padding-left:48px}.input-size-lg.input-with-trailing-icon{padding-right:48px}.input-clear-button{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:#6b7280;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2}.input-clear-button:hover{background-color:#f3f4f6;color:#374151}.input-theme-dark .input-clear-button:hover{background-color:#4b5563;color:#f9fafb}.input-size-sm .input-clear-button{right:8px}.input-size-lg .input-clear-button{right:16px}.input-hint{font-size:12px;line-height:1.4;margin-top:2px}.input-hint-default,.input-hint-focused,.input-hint-filled{color:#6b7280}.input-hint-error{color:#ef4444}.input-hint-success{color:#10b981}.input-hint-disabled{color:#9ca3af}.input:focus{border-color:#6b7280;box-shadow:0 0 0 1px #6b7280}.input-theme-dark.input:focus{border-color:#6b7280;box-shadow:0 0 0 1px #6b7280}.input-state-error:focus{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}.input-state-success:focus{border-color:#10b981;box-shadow:0 0 0 1px #10b981}.input:disabled{background-color:#f3f4f6;color:#9ca3af;border-color:#e5e7eb;cursor:not-allowed;opacity:.6}.input-theme-dark.input:disabled{background-color:#1f2937;color:#6b7280;border-color:#374151}.input:disabled::placeholder{color:#9ca3af}.alert{display:flex;align-items:flex-start;gap:10px;padding:16px;border-radius:16px;border:1px solid;font-size:14px;line-height:22px;position:relative;width:100%;box-sizing:border-box;max-width:580px}.alert-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:2px}.alert-content{flex:1;min-width:0}.alert-title{font-weight:400;font-size:16px;line-height:1.4;margin-bottom:4px;color:inherit}.alert-description{font-weight:400;font-size:14px;line-height:1.5;color:inherit;opacity:.9}.alert-children{margin-top:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:inherit;opacity:.7;transition:all .2s ease;margin-top:-2px;margin-right:-4px}.alert-dismiss:hover{opacity:1;background-color:#0000001a}.alert-dismiss:focus{outline:2px solid currentColor;outline-offset:2px}.alert-info{background-color:#f0faff;border-color:#35ccfb;color:#0bb5ea}.alert-info .alert-icon{color:#0bb5ea}.alert-info .alert-dismiss:hover{background-color:#0bb5ea1a}.alert-warning{background-color:#fef9c2;border-color:#f0b100;color:#894b00}.alert-warning .alert-icon{color:#894b00}.alert-warning .alert-dismiss:hover{background-color:#faad141a}.alert-success{background-color:#b9f8cf;border-color:#00c950;color:#00a63e}.alert-success .alert-icon{color:#00a63e}.alert-success .alert-dismiss:hover{background-color:#52c41a1a}.alert-error{background-color:#ffc9c9;border-color:#fb2c36;color:#e7000b}.alert-error .alert-icon{color:#e7000b}.alert-error .alert-dismiss:hover{background-color:#e7000b1a}@media (max-width: 640px){.alert{padding:12px;gap:10px}.alert-title{font-size:15px}.alert-description{font-size:13px}}@media (prefers-reduced-motion: reduce){.alert-dismiss{transition:none}}@media (prefers-contrast: high){.alert{border-width:3px}.alert-dismiss{border:1px solid currentColor}}.social-login{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;cursor:pointer;transition:all .2s ease-in-out;font-family:Prompt,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-style:normal;font-weight:600;text-decoration:none;outline:none;position:relative;overflow:hidden}.social-login:focus{outline:6px solid #E5E5E5}.social-login__icon{flex:none;flex-grow:0}.social-login__text{flex:none;flex-grow:0;white-space:nowrap}.social-login--xs{padding:8px 24px;height:40px;font-size:12px;line-height:20px;border-radius:12px}.social-login--xs .social-login__icon{width:16px;height:16px}.social-login--sm{padding:10px 28px;height:44px;font-size:14px;line-height:20px;border-radius:14px}.social-login--sm .social-login__icon{width:18px;height:18px}.social-login--md{padding:12px 32px;height:48px;font-size:16px;line-height:24px;border-radius:16px}.social-login--md .social-login__icon{width:20px;height:20px}.social-login--lg{padding:14px 36px;height:52px;font-size:18px;line-height:28px;border-radius:18px}.social-login--lg .social-login__icon{width:24px;height:24px}.social-login--icon-only{aspect-ratio:1;padding:8px}.social-login--icon-only.social-login--xs{width:40px;padding:8px}.social-login--icon-only.social-login--sm{width:44px;padding:10px}.social-login--icon-only.social-login--md{width:48px;padding:12px}.social-login--icon-only.social-login--lg{width:52px;padding:14px}.social-login--pill.social-login--xs{border-radius:20px}.social-login--pill.social-login--sm{border-radius:22px}.social-login--pill.social-login--md{border-radius:24px}.social-login--pill.social-login--lg{border-radius:26px}.social-login--google{background:#F9FAFB;color:#364153;border-color:#e5e7eb}.social-login--google:hover:not(:disabled){background:#F3F4F6;border-color:#d1d5db}.social-login--facebook{background:#1877F2;color:#fff;border-color:#1877f2}.social-login--facebook:hover:not(:disabled){background:#166FE5;border-color:#166fe5}.social-login--twitter{background:#1DA1F2;color:#fff;border-color:#1da1f2}.social-login--twitter:hover:not(:disabled){background:#1A91DA;border-color:#1a91da}.social-login--github{background:#24292E;color:#fff;border-color:#24292e}.social-login--github:hover:not(:disabled){background:#1B1F23;border-color:#1b1f23}.social-login--apple{background:#000000;color:#fff;border-color:#000}.social-login--apple:hover:not(:disabled){background:#1A1A1A;border-color:#1a1a1a}.social-login--linkedin{background:#0A66C2;color:#fff;border-color:#0a66c2}.social-login--linkedin:hover:not(:disabled){background:#095BB0;border-color:#095bb0}.social-login--outlined{background:transparent!important;border:1px solid #E5E7EB;color:#364153}.social-login--outlined:hover:not(:disabled){background:#F9FAFB!important;border-color:#d1d5db}.social-login--icon-right{flex-direction:row-reverse}.social-login--icon-center{justify-content:center}.social-login--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.social-login--hover{transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.social-login:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #0000001a;background-color:#101828;color:#fff}.social-login:focus-visible{outline:6px solid #E5E5E5}@media (max-width: 640px){.social-login{width:100%}.social-login--icon-only{width:auto}}.progress-bar{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.progress-bar-track{position:relative;width:100%;background-color:#f1f5f9;border-radius:8px;overflow:hidden;height:8px}.progress-bar-fill{height:100%;background-color:var(--progress-bg, #00F7AA);border-radius:inherit;transition:width .3s ease-in-out;position:relative;overflow:hidden}.progress-bar-text{width:100%;font-size:12px;font-weight:500;color:#364153;text-align:center;line-height:1}.progress-bar-size-sm .progress-bar-track{height:4px}.progress-bar-size-sm .progress-bar-text{font-size:10px}.progress-bar-size-md .progress-bar-track{height:8px}.progress-bar-size-md .progress-bar-text{font-size:12px}.progress-bar-size-lg .progress-bar-track{height:12px}.progress-bar-size-lg .progress-bar-text{font-size:14px}.progress-bar-color-primary{--progress-bg: #00F7AA;--progress-bg-light: #AEFFE6}.progress-bar-color-secondary{--progress-bg: #00B6FF;--progress-bg-light: #A7F0FF}.progress-bar-color-success{--progress-bg: #10B981;--progress-bg-light: #A7F3D0}.progress-bar-color-warning{--progress-bg: #F59E0B;--progress-bg-light: #FDE68A}.progress-bar-color-error{--progress-bg: #FB2C36;--progress-bg-light: #FECACA}.progress-bar-gradient .progress-bar-fill{background:linear-gradient(90deg,var(--progress-bg),var(--progress-bg-light))}.progress-bar-striped .progress-bar-fill{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:16px 16px}.progress-bar-animated .progress-bar-fill,.progress-bar-animated.progress-bar-striped .progress-bar-fill{animation:progress-bar-stripes 1s linear infinite}@keyframes progress-bar-stripes{0%{background-position:16px 0}to{background-position:0 0}}.progress-bar:focus-visible{outline:2px solid #00F7AA;outline-offset:2px;border-radius:4px}@media (max-width: 640px){.progress-bar-text{font-size:10px}.progress-bar-size-lg .progress-bar-text{font-size:12px}}.logo{display:inline-block;height:auto}.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:10000;opacity:0}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes fadeOutOverlay{0%{opacity:1}to{opacity:0}}.drawer-overlay.fade-in{animation:fadeInOverlay .5s cubic-bezier(.16,1,.3,1) forwards}.drawer-overlay.fade-out{animation:fadeOutOverlay .5s cubic-bezier(.16,1,.3,1) forwards}.drawer{position:fixed;background-color:#fff;box-shadow:0 0 10px #0003;z-index:999999;display:flex;flex-direction:column;opacity:0}.drawer-right,.drawer-left{top:0;height:100vh}.drawer-top,.drawer-bottom{left:0;width:100%!important;height:auto;min-height:150px}.drawer-right{right:0;transform:translate(100%);opacity:0}.drawer-left{left:0;transform:translate(-100%);opacity:0}.drawer-top{top:0;transform:translateY(-100%);opacity:0}.drawer-bottom{bottom:0;transform:translateY(100%);opacity:0}.drawer-right.drawer-small,.drawer-left.drawer-small{width:300px}.drawer-right.drawer-medium,.drawer-left.drawer-medium{width:450px}.drawer-right.drawer-large,.drawer-left.drawer-large{width:600px}.drawer-top.drawer-small,.drawer-bottom.drawer-small{max-height:30vh}.drawer-top.drawer-medium,.drawer-bottom.drawer-medium{max-height:50vh}.drawer-top.drawer-large,.drawer-bottom.drawer-large{max-height:80vh}@keyframes fadeInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeInTop{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}@keyframes fadeOutTop{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}@keyframes fadeOutBottom{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}.drawer-open.drawer-right{animation:fadeInRight .5s cubic-bezier(.16,1,.3,1) forwards;opacity:1}.drawer-open.drawer-left{animation:fadeInLeft .5s cubic-bezier(.16,1,.3,1) forwards;opacity:1}.drawer-open.drawer-top{animation:fadeInTop .5s cubic-bezier(.16,1,.3,1) forwards;opacity:1}.drawer-open.drawer-bottom{animation:fadeInBottom .5s cubic-bezier(.16,1,.3,1) forwards;opacity:1}.drawer-closing.drawer-right{animation:fadeOutRight .5s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.drawer-closing.drawer-left{animation:fadeOutLeft .5s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.drawer-closing.drawer-top{animation:fadeOutTop .5s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.drawer-closing.drawer-bottom{animation:fadeOutBottom .5s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.drawer-header{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 24px 15px;position:relative;flex-wrap:nowrap;box-sizing:border-box}.drawer-header.no-title{padding-top:15px;padding-bottom:0}.drawer-header.has-title:after{content:"";position:absolute;left:24px;right:24px;width:calc(100% - 48px);bottom:0;height:1px;background-color:#e0e0e0}.drawer-header:has(.drawer-title):after{content:"";position:absolute;left:24px;right:24px;width:calc(100% - 48px);bottom:0;height:1px;background-color:#e0e0e0}.drawer-title{margin:0;max-width:calc(100% - 60px);min-height:24px;height:auto;font-size:16px;font-weight:700;line-height:24px;color:#00b6ff;text-align:left;padding-right:20px;flex:1;letter-spacing:0%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.drawer-close{background:none;border:none;font-size:1.25rem;cursor:pointer;color:#1c1c1c;padding:0;width:28px;min-width:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;z-index:10;opacity:1;margin-left:12px;transition:opacity .2s ease;position:absolute;top:20px;right:24px;touch-action:manipulation}.drawer-close:hover{color:#333}.drawer-content{padding:24px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}.drawer-content h3,.drawer-content .section-title{margin:0 0 15px;font-size:1rem;font-weight:600;color:#333}.drawer-field-label{display:block;margin-bottom:5px;font-size:.875rem;font-weight:500;color:#333}@media (max-width: 576px){.drawer-right.drawer-small,.drawer-left.drawer-small,.drawer-right.drawer-medium,.drawer-left.drawer-medium,.drawer-right.drawer-large,.drawer-left.drawer-large{width:100%;max-width:100%}.drawer-content{padding:16px}.drawer-header{padding:16px 16px 12px}.drawer-close{top:16px;right:16px}.drawer-title{font-size:14px;padding-right:32px;max-width:calc(100% - 40px)}.drawer-header:has(.drawer-title):after{left:16px;right:16px;width:calc(100% - 32px)}.drawer-header.has-title:after{left:16px;right:16px;width:calc(100% - 32px)}@keyframes fadeInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}.drawer-open.drawer-right,.drawer-open.drawer-left,.drawer-open.drawer-top,.drawer-open.drawer-bottom,.drawer-closing.drawer-right,.drawer-closing.drawer-left,.drawer-closing.drawer-top,.drawer-closing.drawer-bottom{animation-duration:.3s}}@media (max-width: 375px){.drawer-content{padding:12px}.drawer-header{padding:12px 12px 10px}.drawer-title{font-size:13px;max-width:calc(100% - 36px)}.drawer-close{top:12px;right:12px;width:24px;height:24px}.drawer-header:has(.drawer-title):after,.drawer-header.has-title:after{left:12px;right:12px;width:calc(100% - 24px)}}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;min-width:100%;height:100vh;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;z-index:1000;padding-top:40px;padding-bottom:40px;box-sizing:border-box}.modal-container{background:#fff;border-radius:12px;box-shadow:0 2px 16px #0000001f;width:90%;max-height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative;padding:24px 32px;gap:24px}.modal-header{min-width:100%;display:flex;align-items:center;justify-content:space-between}.modal-header h2{margin:0;font-size:1.5rem;font-weight:700;color:#00b6ff}.modal-close{background:none;border:none;font-size:2rem;cursor:pointer;color:#1c1c1c;transition:color .2s}.modal-close:hover{color:#00b2ff}.modal-content{overflow-y:auto}.modal-divider{border:none;border-top:1px solid #D4D4D4;min-width:100%;width:100%;margin:24px 0;box-sizing:border-box;display:block}.modal-size-s{max-width:600px}.modal-size-m{max-width:1000px}.modal-size-l{max-width:1600px}@media (max-width: 600px){.modal-size-s,.modal-size-m,.modal-size-l{max-width:90vw;min-width:0}}.card{width:100%;height:100%;border-radius:16px;border-width:2px;opacity:1;padding:32px;max-width:820px;gap:24px;background:linear-gradient(0deg,#1A2441,#1A2441);border:2px solid #00F7AA;color:#fff;position:relative}.card:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;height:80%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMpSURBVHgB7Zq/TxRBFMe/c5CAxelVNBpdYmIsr9WGJTExF03kP2ApNJTwF+D9BWCI0Q5sbTTRxERiOBstgcpIwyZoCSEchcXtPt/IqIQAM7P3a3ZvPsnL3WXebu59583Mm9kFPB6Px+PxDCoCOaX6ZqOC0V8V/hqc0Rxv1u7EMCA3AsyuLYcpMCFAVRJUPUzLwbfk9oXXbNXuauNzWoDHH59XSyKZTgVFglA52XZIZegEEBDjukwYhoPMri8G1BpaIbRC4t+C0DVKcIwna8sLaau0Q6AQ7RPoHJzJgP+9noboIU4IIINPk9I6QAF6TN+HwL/gSZ+u1gwNHehc+i6ATPuuBC9JEq0AfR8CopXMZFmLd+jmrV1xLbrIZ792PYaGvgvwsjYfIwPlDz9HiIab57WnQuzCAOeWwU5RItoz8kNB4XJ528SvsAKMlJLBFYBI7O3fvzq4cwCP//fGvigio5e+m7oWTgBB4mvz3mWjFUBSKAHk2MfI6DubawolgBz7Nr0v6WglSPRnDx8ou4FsvBJCNGALiU/Nh2NfYEnbAqigp9mm2Cpon8+w58fRg7HXyEBmATjwgD9W2EL0Ed5IbZdbyYsjZCOTABy87G0ZfCd6PDsy7bnnm+ghHPw0dZcIPcRqFVA9v4oCYSyAGvOLKBg2c8ACYHR01WDbYttUv2P1eaAsUvdyAiMBVO9HGjcZXJ3X8CXNvWI4hGkGTBn4THLwm8gZpnPAI017PY/BS0wFCDXtq8gpWgF4zFY1Lg3u/Rg5xSQDdNVejBxT2ENRU0wEiDXtuiHiNCYC6J6vVXme6O+mqA20AvAEJwVoaNycqexsMZ0DdIcUc5wFcygqcik03MquqLL5vPuEbBvk0HbYqBSWVR7/sQb0BVEkTfnKrJHDR84PV3BcTgdsdTg0cdrsBmfYNmB2ChTibLGewbG6wbgOUNVeHdmJ2ZbgGFaFkNrqZhWh7mLJbF0JchBPYS/CW75uFQ6SqRRWIoxDXx/8ZR6Okvm5gErnSTp+MBKxTeDsI7PTqS9XhviCW2vf7OokHX1ZWpXEJ5e4g7welHg8Ho/H4yk+vwH5tKN4NtWalQAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.1;pointer-events:none;z-index:1}.toggle-button-container{width:fit-content;height:100%;max-width:438px;border-radius:16px;padding:8px;gap:8px;opacity:1;border:1px solid #D4D4D4;display:flex}.toggle-button-inner{width:auto;height:36px;border-radius:12px;opacity:1;padding:8px 24px;font-weight:600;font-size:12px;line-height:20px;color:#364153;cursor:pointer;display:flex;align-items:center}.toggle-button-inner.active{background:#00B6FF;border-radius:12px}.toggle-button-inner.xs{width:auto;height:36px}.toggle-button-inner.sm{width:auto;height:40px}.toggle-button-inner.md{width:auto;height:48px}
|
|
1
|
+
.button{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:12px;line-height:24px;font-weight:600;transition:all .2s;outline:none;cursor:pointer;border:none;padding:8px 24px}.button:focus-visible{outline:6px solid #D5FFF2;outline-offset:2px}.button:disabled{opacity:.4;pointer-events:none}.button-filled{background-color:var(--button-bg, hsl(221.2 83.2% 53.3%));color:var(--button-text, white);border:none}.button-filled:hover:not(:disabled){background-color:var(--button-hover, hsl(221.2 83.2% 47.3%))}.button-outlined{background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%));border:1px solid var(--button-border, hsl(214.3 31.8% 91.4%))}.button-outlined:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3));color:var(--button-bg-hover, hsl(221.2 83.2% 47.3%))}.button-icon{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%))}.button-icon:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3))}.button-icon.button-size-sm{width:36px;height:36px}.button-icon.button-size-md{width:48px;height:48px}.button-icon.button-size-lg{width:56px;height:56px}.button-icon.button-size-xl{width:64px;height:64px}.button-icon.button-pill{border-radius:50%}.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, transparent)}.button-filled.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-outlined.button-active{background-color:transparent;color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, #076046)}.button-icon.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-color-primary{--button-bg: #00F7AA;--button-text:#364153;--button-hover: #AEFFE6;--button-border: #00F7AA;--button-bg-light: hsl(221.2 83.2% 96%);--button-bg-hover: #AEFFE6;--button-bg-active: #076046;--button-text-active: #F9FAFB;--button-border-active: #076046}.button-color-secondary{--button-bg: #00B6FF;--button-text: #364153;--button-hover: #A7F0FF;--button-border: #00B6FF;--button-bg-light: hsl(142.1 76.2% 96%);--button-bg-hover: #A7F0FF;--button-bg-active: #0056B3;--button-text-active: #F9FAFB;--button-border-active: #0056B3}.button-color-error{--button-bg: #FB2C36;--button-text: #F2F3F7;--button-hover: #FF6467;--button-border: #FB2C36;--button-bg-light: hsl(0 84.2% 96%);--button-bg-hover: #FF6467;--button-bg-active: #9F0712;--button-text-active: #F2F3F7;--button-border-active: #9F0712}.button-color-clear{--button-bg: transparent;--button-text: #364153;--button-hover: #F9FAFB;--button-border: #D4D4D4;--button-bg-light: hsl(215.4 16.3% 96%);--button-bg-hover: #F9FAFB;--button-bg-active: transparent;--button-text-active: #364153;--button-border-active: transparent}.button-outlined-primary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-secondary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-error{color:var(--button-text);border-color:var(--button-border)}.button-outlined-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-clear{color:var(--button-text);border-color:var(--button-border)}.button-outlined-clear:hover:not(:disabled){color:var(--button-text);background-color:var(--button-bg-light)}.button-outlined-primary.button-active,.button-filled-primary.button-active,.button-icon-primary.button-active,.button-outlined-secondary.button-active,.button-filled-secondary.button-active,.button-icon-secondary.button-active,.button-outlined-error.button-active,.button-filled-error.button-active,.button-icon-error.button-active,.button-outlined-clear.button-active,.button-filled-clear.button-active,.button-icon-clear.button-active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active)}.button-filled-primary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-primary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-secondary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-secondary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-error{background-color:var(--button-bg);color:var(--button-text)}.button-filled-error:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-clear{background-color:var(--button-bg);color:var(--button-text)}.button-filled-clear:hover:not(:disabled){background-color:var(--button-hover)}.button-icon-primary{color:var(--button-bg)}.button-icon-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-secondary{color:var(--button-bg)}.button-icon-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-error{color:var(--button-bg)}.button-icon-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-clear{color:var(--button-bg)}.button-icon-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-size-sm{min-width:94px;height:48px;font-size:12px}.button-size-md{min-width:101px;height:56px;font-size:16px}.button-size-lg{min-width:107px;height:72px;font-size:18px}.button-size-xl{min-width:130px;height:80px;font-size:20px}.button-pill{border-radius:9999px}.button-with-icon-left{position:relative;padding-left:3rem}.button-with-icon-right{position:relative;padding-right:3rem}.button-with-icon-left-justified{padding-left:5rem}.button-with-icon-right-justified{padding-right:5rem}.button-icon-left{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-icon-right{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-with-icon-left-justified .button-icon-left{left:1.75rem}.button-with-icon-right-justified .button-icon-right{right:1.75rem}.button-with-icon-left.button-with-icon-right{padding-left:2.5rem;padding-right:2.5rem}.button-size-sm .button-icon-left,.button-size-sm .button-icon-right{font-size:.875rem}.button-size-md .button-icon-left,.button-size-md .button-icon-right{font-size:1rem}.button-size-lg .button-icon-left,.button-size-lg .button-icon-right{font-size:1.125rem}.button-size-xl .button-icon-left,.button-size-xl .button-icon-right{font-size:1.25rem}.button-icon-only{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;display:flex}.button-size-sm.button-icon-only{width:36px;height:36px}.button-size-md.button-icon-only{width:48px;height:48px}.button-size-lg.button-icon-only{width:56px;height:56px}.button-size-xl.button-icon-only{width:64px;height:64px}.button-pill.button-icon-only{border-radius:50%}.button-icon-only.button-color-primary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-secondary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-error{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-clear{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-active{color:var(--button-text-active);background-color:var(--button-bg-active)}.sidebar-wrapper{position:relative;display:flex;height:100vh}.sidebar{display:flex;flex-direction:column;width:290px;height:100vh;background-color:#024;color:#fff;transition:width .3s;justify-content:space-between;align-items:center;padding-top:20px;padding-bottom:0;z-index:2;font-weight:600;font-size:14px;line-height:24px;letter-spacing:0%;vertical-align:middle}.sidebar-collapsed{width:90px}.sidebar-header{display:flex;align-items:center;padding:16px;justify-content:space-between;margin-bottom:50px}.sidebar-logo{display:flex;align-items:center;gap:42px;color:#fff}.sidebar-toggle{background:none;border:none;color:#8ba1b7;cursor:pointer;font-size:16px;padding:4px 8px;border-radius:4px}.sidebar-toggle:hover{background-color:#ffffff1a}.sidebar-menu{flex:1;width:85%;overflow-y:auto;gap:4px;margin:10px}.sidebar-item{border-bottom:1px solid #D4D4D4;border-spacing:10px;padding:10px 0}.active{background-color:#fff3;border-radius:8px}.sidebar-link{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;width:100%;padding:6px 12px}.active-text{color:#00f7aa!important;fill:#00f7aa!important}.active-text svg path{fill:#00f7aa!important}.sidebar-collapsed .sidebar-item{border-bottom:none;position:relative;background-color:transparent!important}.sidebar-collapsed .sidebar-item .active-text svg path{fill:#00f7aa!important}.sidebar-collapsed .sidebar-item:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:32px;height:1px;background-color:#d4d4d4}.sidebar-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#8ba1b7}.sidebar-content{display:flex;flex:1;justify-content:space-between;align-items:center;margin-left:16px}.sidebar-label{flex:1}.submenu{max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,padding .3s ease,visibility 0s linear .2s;padding-top:0;padding-bottom:0}.sidebar-item.open .submenu{max-height:300px;opacity:1;visibility:visible;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,padding .3s ease,visibility 0s linear 0s;padding-top:8px;padding-bottom:8px}.submenu-arrow{font-size:10px;color:#8ba1b7;transition:transform .3s ease}.submenu-item{display:flex;align-items:center;padding:6px 20px;text-decoration:none;color:#fff}.submenu-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:12px;color:#8ba1b7}.sidebar-footer{padding:16px}.logout-button{display:flex;align-items:center;gap:12px;background:none;border:none;color:#fff;width:100%;padding-bottom:10px;text-align:left;cursor:pointer;transition:background-color .2s;border-radius:4px;font-weight:600;font-size:14px;line-height:24px;letter-spacing:0%;vertical-align:middle}.sidebar-toggle-icon{position:relative;left:-14px;top:120px;transform:translateY(-50%) rotate(180deg);background:none;border:none;cursor:pointer;z-index:3;padding:0;margin-left:0;transition:transform .3s}.sidebar-toggle-icon.collapsed{transform:translateY(-50%) rotate(0)}.mobile-menu-button{display:none;background:transparent;border:none;cursor:pointer;padding:8px;z-index:10;color:#fff}.mobile-menu-button svg{width:24px;height:24px}.hamburger-icon{transition:transform .3s ease}.hamburger-line{transition:all .3s ease}.mobile-menu-button .top-line{transform-origin:12px 12px}.mobile-menu-button .middle-line{opacity:1}.mobile-menu-button .bottom-line{transform-origin:12px 12px}.mobile-menu-button.open .top-line{transform:translateY(2px) rotate(45deg);transform-origin:12px 12px}.mobile-menu-button.open .middle-line{opacity:0}.mobile-menu-button.open .bottom-line{transform:translateY(-7px) rotate(-45deg);transform-origin:12px 12px}.mobile-navbar{display:none}.mobile-header{display:flex;width:100%;padding:15px 20px;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:20px}.mobile-logo-menu{color:#fff}@media (max-width: 768px){.mobile-navbar{display:flex;position:fixed;top:0;left:0;width:100%;height:60px;background-color:#024;justify-content:space-between;align-items:center;padding:0 20px;box-shadow:0 2px 4px #0000001a;z-index:1001}.sidebar-item{border-bottom:none;padding:0}.mobile-logo{display:flex;align-items:center;height:100%}.mobile-menu-button{display:flex;position:relative;top:auto;left:auto}.sidebar-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;visibility:hidden}.sidebar-wrapper.mobile-open,.sidebar-wrapper.mobile-closing{visibility:visible;display:flex}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.sidebar-mobile{width:100%!important;max-width:100%!important;height:100vh;padding-top:0;padding-bottom:20px;overflow-y:auto}.mobile-header{opacity:1;transform:translateY(0);border-bottom:none}.sidebar-menu{width:100%;margin:0;padding-bottom:60px;transform:translateY(100%);opacity:0;will-change:transform,opacity;animation:none}.sidebar-wrapper.mobile-open .sidebar-menu{animation:slideInUp .5s cubic-bezier(.16,1,.3,1) forwards}.sidebar-wrapper.mobile-closing .sidebar-menu{transform:translateY(100%);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1)}.sidebar-wrapper.mobile-open .sidebar-item{animation:fadeInUp .3s ease forwards;opacity:0}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(1){animation-delay:.1s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(2){animation-delay:.15s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(3){animation-delay:.2s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(4){animation-delay:.25s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(5){animation-delay:.3s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(6){animation-delay:.35s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(n+7){animation-delay:.4s}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999;opacity:0;transition:opacity .3s ease;visibility:hidden}.sidebar-overlay.visible{opacity:1;visibility:visible}.sidebar-wrapper.mobile-closing .sidebar-overlay{opacity:0}.active{background-color:#fff3;border-radius:0;width:100%}.sidebar-item.active{border-radius:0;width:100%;margin:0}.sidebar-item.active .sidebar-link{background-color:#fff3;border-radius:0;width:100%;padding:16px}.sidebar-link{padding:16px;width:100%;border-radius:0;display:flex;align-items:center}.sidebar-item .sidebar-link.active{background-color:#fff3;padding-left:16px;padding-right:16px;margin:0;width:100%}.sidebar-icon{margin-right:16px}.mobile-close-button{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;font-weight:700}.sidebar-item.open{background-color:#ffffff0d}.sidebar-content{width:100%;justify-content:space-between;margin-left:16px}.submenu-arrow{margin-left:auto;transition:transform .3s ease}.sidebar-item.open .submenu-arrow{transform:rotate(180deg)}.sidebar-item{width:100%;border-radius:0}.submenu-label{padding-left:10px;font-size:14px}.sidebar-item.open .submenu{max-height:500px;padding-left:0;width:100%}.submenu{padding-left:0;background-color:transparent;width:100%;padding-bottom:8px;gap:0}.submenu-item{padding:2px 66px;border-bottom:none;width:100%;border-radius:0;display:flex;align-items:center}.submenu-item.active{background-color:#fff3;border-radius:0;width:100%}.sidebar-mobile{padding-top:0;padding-bottom:20px;overflow-y:auto}.sidebar-toggle-icon{display:none}}.collapsible{background:#024;border-radius:24px;overflow:hidden;box-shadow:0 2px 4px #0000001a;position:relative;width:100%;gap:24px;padding:28px;transform-origin:top;transition:transform .3s ease}.collapsible.open{min-height:578px;transform-origin:top;transition:transform .3s ease}.collapsible-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;background:#024;transition:background-color .3s ease}.collapsible-header:hover{background:#024}.collapsible-header-content{flex:1}.collapsible-title{margin:0;font-size:24px;line-height:32px;font-weight:700;color:#00b6ff;letter-spacing:0;gap:2px}.collapsible-subtitle{font-size:16px;line-height:20px;font-weight:400;color:#fff;letter-spacing:0;gap:2px}.collapsible-arrow{transition:transform .3s ease;color:#00b6ff}.collapsible-arrow.open{transform:rotate(180deg)}.collapsible-content{max-height:0;overflow:hidden;background:#024;color:#fff}.collapsible-content.open{max-height:2000px;margin-top:24px}.uploader-wrapper{width:100%;max-width:490px;border-radius:12px;border-width:1px;padding:16px;gap:16;opacity:1;border:1px solid #D4D4D4;background:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.uploader-wrapper.dotted,.uploader-wrapper.bordered{border:none}.uploader-container{width:290;height:230;top:20px;left:32px}.uploader-container.uploader-drag-over{border-color:#00b6ff;background:#f8fcff}.uploader-container.uploader-loading{cursor:not-allowed;opacity:.7}.uploader-container.uploader-disabled{cursor:not-allowed;opacity:.5;background:#f5f5f5}.uploader-card{border:1px solid #E5E7EB;background:#fff;box-shadow:0 1px 3px #0000001a;padding:24px}.uploader-input{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;z-index:-1;pointer-events:none}.uploader-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;z-index:0;width:100%}.uploader-drop-zone{border:2px dashed #D4D4D4;border-radius:8px;background:#f9fafb;padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px;cursor:pointer;transition:all .2s ease-in-out;min-height:120px;justify-content:center}.uploader-drop-zone:hover{border-color:#00b6ff;background:#f8fcff}.uploader-drop-zone.uploader-drag-over{border-color:#00b6ff;background:#e6f7ff}.uploader-placeholder{font-weight:500;font-size:14px;line-height:20px;color:#374151;margin:0;text-align:center}.uploader-button{background:#00b6ff;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background-color .2s ease-in-out}.uploader-button:hover{background:#0095cc}.uploader-button:disabled{background:#9ca3af;cursor:not-allowed}.uploader-google-drive-button{background:#fff;color:#374151;border:1px solid #D1D5DB;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease-in-out;width:100%;justify-content:center}.uploader-google-drive-button:hover{background:#f9fafb;border-color:#9ca3af}.uploader-google-drive-button:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}.uploader-drop-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;padding:24px;width:100%}.uploader-drop-area svg{color:#6b7280;transition:color .2s ease-in-out}.uploader-container:hover .uploader-drop-area svg{color:#00b6ff}.uploader-container.uploader-drag-over .uploader-drop-area svg{color:#00b6ff;transform:scale(1.1)}.uploader-text{display:flex;flex-direction:column;gap:4px}.uploader-file-types{font-size:12px;line-height:16px;color:#6b7280;margin:0}.uploader-google-drive-link{background:none;border:none;color:#00b6ff;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:color .2s ease-in-out;padding:8px;border-radius:4px}.uploader-google-drive-link:hover{color:#0095cc;background:#f8fcff}.uploader-google-drive-link:disabled{color:#9ca3af;cursor:not-allowed}.uploader-error{margin-top:8px;padding:8px 12px;background:#fef2f2;border:1px solid #FECACA;border-radius:6px;font-size:12px;line-height:16px;color:#dc2626;animation:slideIn .2s ease-in-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.uploader-container{min-height:100px;padding:16px}.uploader-drop-zone{padding:16px;min-height:100px}.uploader-title{font-size:16px}.uploader-placeholder{font-size:13px}.uploader-file-types{font-size:11px}}.uploader-container{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.uploader-container:focus-within{outline:2px solid #00B6FF;outline-offset:2px}.icon-size{width:18px;height:16px}.input-container{display:flex;flex-direction:column;gap:4px;width:100%}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}.input{width:100%;border-radius:8px;border:1px solid;font-size:14px;line-height:1.5;transition:all .2s ease;outline:none;background-color:transparent}.input:focus{outline:none}.input::placeholder{color:#9ca3af;opacity:1}.input-theme-light{background-color:#fff;color:#111827;border-color:#d1d5db}.input-theme-light::placeholder{color:#9ca3af}.input-theme-dark{background-color:#374151;color:#f9fafb;border-color:#4b5563}.input-theme-dark::placeholder{color:#9ca3af}.input-size-sm{height:32px;padding:6px 12px;font-size:12px}.input-size-md{height:40px;padding:8px 12px;font-size:14px}.input-size-lg{height:48px;padding:12px 16px;font-size:16px}.input-state-default{border-color:#d1d5db}.input-theme-dark.input-state-default{border-color:#4b5563}.input-state-focused,.input-theme-dark.input-state-focused{border-color:#6b7280;box-shadow:0 0 0 1px #6b7280}.input-state-filled{border-color:#d1d5db}.input-theme-dark.input-state-filled{border-color:#4b5563}.input-state-error,.input-theme-dark.input-state-error{border-color:#ef4444}.input-state-success,.input-theme-dark.input-state-success{border-color:#10b981}.input-state-disabled{background-color:#f3f4f6;color:#9ca3af;border-color:#e5e7eb;cursor:not-allowed;opacity:.6}.input-theme-dark.input-state-disabled{background-color:#1f2937;color:#6b7280;border-color:#374151}.input-with-leading-icon{padding-left:40px}.input-with-trailing-icon{padding-right:40px}.input-leading-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#6b7280;z-index:1;display:flex;align-items:center;justify-content:center}.input-trailing-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#6b7280;z-index:1;display:flex;align-items:center;justify-content:center}.input-size-sm .input-leading-icon,.input-size-sm .input-trailing-icon{left:8px;right:8px}.input-size-sm.input-with-leading-icon{padding-left:32px}.input-size-sm.input-with-trailing-icon{padding-right:32px}.input-size-lg .input-leading-icon,.input-size-lg .input-trailing-icon{left:16px;right:16px}.input-size-lg.input-with-leading-icon{padding-left:48px}.input-size-lg.input-with-trailing-icon{padding-right:48px}.input-clear-button{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:#6b7280;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2}.input-clear-button:hover{background-color:#f3f4f6;color:#374151}.input-theme-dark .input-clear-button:hover{background-color:#4b5563;color:#f9fafb}.input-size-sm .input-clear-button{right:8px}.input-size-lg .input-clear-button{right:16px}.input-hint{font-size:12px;line-height:1.4;margin-top:2px}.input-hint-default,.input-hint-focused,.input-hint-filled{color:#6b7280}.input-hint-error{color:#ef4444}.input-hint-success{color:#10b981}.input-hint-disabled{color:#9ca3af}.input:focus{border-color:#6b7280;box-shadow:0 0 0 1px #6b7280}.input-theme-dark.input:focus{border-color:#6b7280;box-shadow:0 0 0 1px #6b7280}.input-state-error:focus{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}.input-state-success:focus{border-color:#10b981;box-shadow:0 0 0 1px #10b981}.input:disabled{background-color:#f3f4f6;color:#9ca3af;border-color:#e5e7eb;cursor:not-allowed;opacity:.6}.input-theme-dark.input:disabled{background-color:#1f2937;color:#6b7280;border-color:#374151}.input:disabled::placeholder{color:#9ca3af}.alert{display:flex;align-items:flex-start;gap:10px;padding:16px;border-radius:16px;border:1px solid;font-size:14px;line-height:22px;position:relative;width:100%;box-sizing:border-box;max-width:580px}.alert-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:2px}.alert-content{flex:1;min-width:0}.alert-title{font-weight:400;font-size:16px;line-height:1.4;margin-bottom:4px;color:inherit}.alert-description{font-weight:400;font-size:14px;line-height:1.5;color:inherit;opacity:.9}.alert-children{margin-top:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:inherit;opacity:.7;transition:all .2s ease;margin-top:-2px;margin-right:-4px}.alert-dismiss:hover{opacity:1;background-color:#0000001a}.alert-dismiss:focus{outline:2px solid currentColor;outline-offset:2px}.alert-info{background-color:#f0faff;border-color:#35ccfb;color:#0bb5ea}.alert-info .alert-icon{color:#0bb5ea}.alert-info .alert-dismiss:hover{background-color:#0bb5ea1a}.alert-warning{background-color:#fef9c2;border-color:#f0b100;color:#894b00}.alert-warning .alert-icon{color:#894b00}.alert-warning .alert-dismiss:hover{background-color:#faad141a}.alert-success{background-color:#b9f8cf;border-color:#00c950;color:#00a63e}.alert-success .alert-icon{color:#00a63e}.alert-success .alert-dismiss:hover{background-color:#52c41a1a}.alert-error{background-color:#ffc9c9;border-color:#fb2c36;color:#e7000b}.alert-error .alert-icon{color:#e7000b}.alert-error .alert-dismiss:hover{background-color:#e7000b1a}@media (max-width: 640px){.alert{padding:12px;gap:10px}.alert-title{font-size:15px}.alert-description{font-size:13px}}@media (prefers-reduced-motion: reduce){.alert-dismiss{transition:none}}@media (prefers-contrast: high){.alert{border-width:3px}.alert-dismiss{border:1px solid currentColor}}.social-login{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;cursor:pointer;transition:all .2s ease-in-out;font-family:Prompt,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-style:normal;font-weight:600;text-decoration:none;outline:none;position:relative;overflow:hidden}.social-login:focus{outline:6px solid #E5E5E5}.social-login__icon{flex:none;flex-grow:0}.social-login__text{flex:none;flex-grow:0;white-space:nowrap}.social-login--xs{padding:8px 24px;height:40px;font-size:12px;line-height:20px;border-radius:12px}.social-login--xs .social-login__icon{width:16px;height:16px}.social-login--sm{padding:10px 28px;height:44px;font-size:14px;line-height:20px;border-radius:14px}.social-login--sm .social-login__icon{width:18px;height:18px}.social-login--md{padding:12px 32px;height:48px;font-size:16px;line-height:24px;border-radius:16px}.social-login--md .social-login__icon{width:20px;height:20px}.social-login--lg{padding:14px 36px;height:52px;font-size:18px;line-height:28px;border-radius:18px}.social-login--lg .social-login__icon{width:24px;height:24px}.social-login--icon-only{aspect-ratio:1;padding:8px}.social-login--icon-only.social-login--xs{width:40px;padding:8px}.social-login--icon-only.social-login--sm{width:44px;padding:10px}.social-login--icon-only.social-login--md{width:48px;padding:12px}.social-login--icon-only.social-login--lg{width:52px;padding:14px}.social-login--pill.social-login--xs{border-radius:20px}.social-login--pill.social-login--sm{border-radius:22px}.social-login--pill.social-login--md{border-radius:24px}.social-login--pill.social-login--lg{border-radius:26px}.social-login--google{background:#f9fafb;color:#364153;border-color:#e5e7eb}.social-login--google:hover:not(:disabled){background:#f3f4f6;border-color:#d1d5db}.social-login--facebook{background:#1877f2;color:#fff;border-color:#1877f2}.social-login--facebook:hover:not(:disabled){background:#166fe5;border-color:#166fe5}.social-login--twitter{background:#1da1f2;color:#fff;border-color:#1da1f2}.social-login--twitter:hover:not(:disabled){background:#1a91da;border-color:#1a91da}.social-login--github{background:#24292e;color:#fff;border-color:#24292e}.social-login--github:hover:not(:disabled){background:#1b1f23;border-color:#1b1f23}.social-login--apple{background:#000;color:#fff;border-color:#000}.social-login--apple:hover:not(:disabled){background:#1a1a1a;border-color:#1a1a1a}.social-login--linkedin{background:#0a66c2;color:#fff;border-color:#0a66c2}.social-login--linkedin:hover:not(:disabled){background:#095bb0;border-color:#095bb0}.social-login--outlined{background:transparent!important;border:1px solid #E5E7EB;color:#364153}.social-login--outlined:hover:not(:disabled){background:#f9fafb!important;border-color:#d1d5db}.social-login--icon-right{flex-direction:row-reverse}.social-login--icon-center{justify-content:center}.social-login--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.social-login--hover{transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.social-login:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #0000001a;background-color:#101828;color:#fff}.social-login:focus-visible{outline:6px solid #E5E5E5}@media (max-width: 640px){.social-login{width:100%}.social-login--icon-only{width:auto}}.progress-bar{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.progress-bar-track{position:relative;width:100%;background-color:#f1f5f9;border-radius:8px;overflow:hidden;height:8px}.progress-bar-fill{height:100%;background-color:var(--progress-bg, #00F7AA);border-radius:inherit;transition:width .3s ease-in-out;position:relative;overflow:hidden}.progress-bar-text{width:100%;font-size:12px;font-weight:500;color:#364153;text-align:center;line-height:1}.progress-bar-size-sm .progress-bar-track{height:4px}.progress-bar-size-sm .progress-bar-text{font-size:10px}.progress-bar-size-md .progress-bar-track{height:8px}.progress-bar-size-md .progress-bar-text{font-size:12px}.progress-bar-size-lg .progress-bar-track{height:12px}.progress-bar-size-lg .progress-bar-text{font-size:14px}.progress-bar-color-primary{--progress-bg: #00F7AA;--progress-bg-light: #AEFFE6}.progress-bar-color-secondary{--progress-bg: #00B6FF;--progress-bg-light: #A7F0FF}.progress-bar-color-success{--progress-bg: #10B981;--progress-bg-light: #A7F3D0}.progress-bar-color-warning{--progress-bg: #F59E0B;--progress-bg-light: #FDE68A}.progress-bar-color-error{--progress-bg: #FB2C36;--progress-bg-light: #FECACA}.progress-bar-gradient .progress-bar-fill{background:linear-gradient(90deg,var(--progress-bg),var(--progress-bg-light))}.progress-bar-striped .progress-bar-fill{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:16px 16px}.progress-bar-animated .progress-bar-fill,.progress-bar-animated.progress-bar-striped .progress-bar-fill{animation:progress-bar-stripes 1s linear infinite}@keyframes progress-bar-stripes{0%{background-position:16px 0}to{background-position:0 0}}.progress-bar:focus-visible{outline:2px solid #00F7AA;outline-offset:2px;border-radius:4px}@media (max-width: 640px){.progress-bar-text{font-size:10px}.progress-bar-size-lg .progress-bar-text{font-size:12px}}.logo{display:inline-block;height:auto}.header{width:100%;border-radius:24px;background:#024;color:#fff;padding:32px}.header-content-wrapper{display:flex;flex-direction:column;gap:16px}.header-title{font-family:Prompt,sans-serif;font-weight:700;font-size:32px;line-height:48px}.header-logo{width:260px;height:auto}.header-children{font-family:Prompt,sans-serif;font-weight:400;font-size:16px;line-height:24px;color:#fff}.header-children .highlight{color:#00f7aa}@media (min-width: 1024px){.header{padding:48px 56px 56px;border-radius:28px}.header-title{font-size:56px}.header-logo{width:300px}}.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:10000;opacity:0}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes fadeOutOverlay{0%{opacity:1}to{opacity:0}}.drawer-overlay.fade-in{animation:fadeInOverlay .5s cubic-bezier(.16,1,.3,1) forwards}.drawer-overlay.fade-out{animation:fadeOutOverlay .5s cubic-bezier(.16,1,.3,1) forwards}.drawer{position:fixed;background-color:#fff;box-shadow:0 0 10px #0003;z-index:999999;display:flex;flex-direction:column;opacity:0}.drawer-right,.drawer-left{top:0;height:100vh}.drawer-top,.drawer-bottom{left:0;width:100%!important;height:auto;min-height:150px}.drawer-right{right:0;transform:translate(100%);opacity:0}.drawer-left{left:0;transform:translate(-100%);opacity:0}.drawer-top{top:0;transform:translateY(-100%);opacity:0}.drawer-bottom{bottom:0;transform:translateY(100%);opacity:0}.drawer-right.drawer-small,.drawer-left.drawer-small{width:300px}.drawer-right.drawer-medium,.drawer-left.drawer-medium{width:450px}.drawer-right.drawer-large,.drawer-left.drawer-large{width:600px}.drawer-top.drawer-small,.drawer-bottom.drawer-small{max-height:30vh}.drawer-top.drawer-medium,.drawer-bottom.drawer-medium{max-height:50vh}.drawer-top.drawer-large,.drawer-bottom.drawer-large{max-height:80vh}@keyframes fadeInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeInTop{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}@keyframes fadeOutTop{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}@keyframes fadeOutBottom{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}.drawer-open.drawer-right{animation:fadeInRight .5s cubic-bezier(.16,1,.3,1) forwards;opacity:1}.drawer-open.drawer-left{animation:fadeInLeft .5s cubic-bezier(.16,1,.3,1) forwards;opacity:1}.drawer-open.drawer-top{animation:fadeInTop .5s cubic-bezier(.16,1,.3,1) forwards;opacity:1}.drawer-open.drawer-bottom{animation:fadeInBottom .5s cubic-bezier(.16,1,.3,1) forwards;opacity:1}.drawer-closing.drawer-right{animation:fadeOutRight .5s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.drawer-closing.drawer-left{animation:fadeOutLeft .5s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.drawer-closing.drawer-top{animation:fadeOutTop .5s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.drawer-closing.drawer-bottom{animation:fadeOutBottom .5s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.drawer-header{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 24px 15px;position:relative;flex-wrap:nowrap;box-sizing:border-box}.drawer-header.no-title{padding-top:15px;padding-bottom:0}.drawer-header.has-title:after{content:"";position:absolute;left:24px;right:24px;width:calc(100% - 48px);bottom:0;height:1px;background-color:#e0e0e0}.drawer-header:has(.drawer-title):after{content:"";position:absolute;left:24px;right:24px;width:calc(100% - 48px);bottom:0;height:1px;background-color:#e0e0e0}.drawer-title{margin:0;max-width:calc(100% - 60px);min-height:24px;height:auto;font-size:16px;font-weight:700;line-height:24px;color:#00b6ff;text-align:left;padding-right:20px;flex:1;letter-spacing:0%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.drawer-close{background:none;border:none;font-size:1.25rem;cursor:pointer;color:#1c1c1c;padding:0;width:28px;min-width:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;z-index:10;opacity:1;margin-left:12px;transition:opacity .2s ease;position:absolute;top:20px;right:24px;touch-action:manipulation}.drawer-close:hover{color:#333}.drawer-content{padding:24px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}.drawer-content h3,.drawer-content .section-title{margin:0 0 15px;font-size:1rem;font-weight:600;color:#333}.drawer-field-label{display:block;margin-bottom:5px;font-size:.875rem;font-weight:500;color:#333}@media (max-width: 576px){.drawer-right.drawer-small,.drawer-left.drawer-small,.drawer-right.drawer-medium,.drawer-left.drawer-medium,.drawer-right.drawer-large,.drawer-left.drawer-large{width:100%;max-width:100%}.drawer-content{padding:16px}.drawer-header{padding:16px 16px 12px}.drawer-close{top:16px;right:16px}.drawer-title{font-size:14px;padding-right:32px;max-width:calc(100% - 40px)}.drawer-header:has(.drawer-title):after{left:16px;right:16px;width:calc(100% - 32px)}.drawer-header.has-title:after{left:16px;right:16px;width:calc(100% - 32px)}@keyframes fadeInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}.drawer-open.drawer-right,.drawer-open.drawer-left,.drawer-open.drawer-top,.drawer-open.drawer-bottom,.drawer-closing.drawer-right,.drawer-closing.drawer-left,.drawer-closing.drawer-top,.drawer-closing.drawer-bottom{animation-duration:.3s}}@media (max-width: 375px){.drawer-content{padding:12px}.drawer-header{padding:12px 12px 10px}.drawer-title{font-size:13px;max-width:calc(100% - 36px)}.drawer-close{top:12px;right:12px;width:24px;height:24px}.drawer-header:has(.drawer-title):after,.drawer-header.has-title:after{left:12px;right:12px;width:calc(100% - 24px)}}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;min-width:100%;height:100vh;background:#00000040;display:flex;align-items:center;justify-content:center;z-index:1000;padding-top:40px;padding-bottom:40px;box-sizing:border-box}.modal-container{background:#fff;border-radius:12px;box-shadow:0 2px 16px #0000001f;width:90%;max-height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative;padding:24px 32px;gap:24px}.modal-header{min-width:100%;display:flex;align-items:center;justify-content:space-between}.modal-header h2{margin:0;font-size:1.5rem;font-weight:700;color:#00b6ff}.modal-close{background:none;border:none;font-size:2rem;cursor:pointer;color:#1c1c1c;transition:color .2s}.modal-close:hover{color:#00b2ff}.modal-content{overflow-y:auto}.modal-divider{border:none;border-top:1px solid #D4D4D4;min-width:100%;width:100%;margin:24px 0;box-sizing:border-box;display:block}.modal-size-s{max-width:600px}.modal-size-m{max-width:1000px}.modal-size-l{max-width:1600px}@media (max-width: 600px){.modal-size-s,.modal-size-m,.modal-size-l{max-width:90vw;min-width:0}}.card{width:100%;height:100%;border-radius:16px;border-width:2px;opacity:1;padding:32px;max-width:820px;gap:24px;background:linear-gradient(0deg,#1a2441,#1a2441);border:2px solid #00F7AA;color:#fff;position:relative}.card:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;height:80%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMpSURBVHgB7Zq/TxRBFMe/c5CAxelVNBpdYmIsr9WGJTExF03kP2ApNJTwF+D9BWCI0Q5sbTTRxERiOBstgcpIwyZoCSEchcXtPt/IqIQAM7P3a3ZvPsnL3WXebu59583Mm9kFPB6Px+PxDCoCOaX6ZqOC0V8V/hqc0Rxv1u7EMCA3AsyuLYcpMCFAVRJUPUzLwbfk9oXXbNXuauNzWoDHH59XSyKZTgVFglA52XZIZegEEBDjukwYhoPMri8G1BpaIbRC4t+C0DVKcIwna8sLaau0Q6AQ7RPoHJzJgP+9noboIU4IIINPk9I6QAF6TN+HwL/gSZ+u1gwNHehc+i6ATPuuBC9JEq0AfR8CopXMZFmLd+jmrV1xLbrIZ792PYaGvgvwsjYfIwPlDz9HiIab57WnQuzCAOeWwU5RItoz8kNB4XJ528SvsAKMlJLBFYBI7O3fvzq4cwCP//fGvigio5e+m7oWTgBB4mvz3mWjFUBSKAHk2MfI6DubawolgBz7Nr0v6WglSPRnDx8ou4FsvBJCNGALiU/Nh2NfYEnbAqigp9mm2Cpon8+w58fRg7HXyEBmATjwgD9W2EL0Ed5IbZdbyYsjZCOTABy87G0ZfCd6PDsy7bnnm+ghHPw0dZcIPcRqFVA9v4oCYSyAGvOLKBg2c8ACYHR01WDbYttUv2P1eaAsUvdyAiMBVO9HGjcZXJ3X8CXNvWI4hGkGTBn4THLwm8gZpnPAI017PY/BS0wFCDXtq8gpWgF4zFY1Lg3u/Rg5xSQDdNVejBxT2ENRU0wEiDXtuiHiNCYC6J6vVXme6O+mqA20AvAEJwVoaNycqexsMZ0DdIcUc5wFcygqcik03MquqLL5vPuEbBvk0HbYqBSWVR7/sQb0BVEkTfnKrJHDR84PV3BcTgdsdTg0cdrsBmfYNmB2ChTibLGewbG6wbgOUNVeHdmJ2ZbgGFaFkNrqZhWh7mLJbF0JchBPYS/CW75uFQ6SqRRWIoxDXx/8ZR6Okvm5gErnSTp+MBKxTeDsI7PTqS9XhviCW2vf7OokHX1ZWpXEJ5e4g7welHg8Ho/H4yk+vwH5tKN4NtWalQAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.1;pointer-events:none;z-index:1}.toggle-button-container{width:fit-content;height:100%;max-width:438px;border-radius:16px;padding:8px;gap:8px;opacity:1;border:1px solid #D4D4D4;display:flex}.toggle-button-inner{width:auto;height:36px;border-radius:12px;opacity:1;padding:8px 24px;font-weight:600;font-size:12px;line-height:20px;color:#364153;cursor:pointer;display:flex;align-items:center}.toggle-button-inner.active{background:#00b6ff;border-radius:12px}.toggle-button-inner.xs{width:auto;height:36px}.toggle-button-inner.sm{width:auto;height:40px}.toggle-button-inner.md{width:auto;height:48px}
|
package/dist/index.d.ts
CHANGED
|
@@ -25,3 +25,5 @@ export { ProgressBar } from './components/ui/ProgressBar/ProgressBar';
|
|
|
25
25
|
export type { ProgressBarProps } from './components/ui/ProgressBar/ProgressBar';
|
|
26
26
|
export { Logo } from './components/ui/Logo/Logo';
|
|
27
27
|
export type { LogoProps, LogoKind, LogoColor } from './components/ui/Logo/Logo';
|
|
28
|
+
export { Header } from './components/ui/Header/Header';
|
|
29
|
+
export type { HeaderProps } from './components/ui/Header/Header';
|