tia-chatbot 0.0.1 → 1.0.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/README.md CHANGED
@@ -1,129 +1,193 @@
1
- # Tia Chatbot Widget
1
+ # TIA Chatbot Widget
2
2
 
3
- A pluggable chatbot widget built with React and Vite, designed to be easily embedded in any web application.
3
+ A modern, reusable AI chatbot widget powered by Chainlit. Easily integrate an AI assistant into any web application with just a few lines of code.
4
4
 
5
- ## Installation
5
+ [![npm version](https://img.shields.io/npm/v/tia-chatbot.svg)](https://www.npmjs.com/package/tia-chatbot)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
6
7
 
7
- ### Via NPM/Yarn/PNPM
8
+ ## Features
9
+
10
+ - 🚀 **Easy Integration** - Add to any website with NPM or CDN
11
+ - 💬 **Real-time Chat** - Interactive messaging with AI assistant
12
+ - 🎨 **Modern UI** - Clean, responsive interface with smooth animations
13
+ - 🎤 **Voice Support** - Voice-to-text and text-to-speech capabilities
14
+ - 📱 **Mobile Friendly** - Works seamlessly on all devices
15
+ - ⚡ **Lightweight** - Optimized bundle size with tree-shaking support
16
+ - 🔧 **Customizable** - Easy to style and configure
17
+ - 📦 **TypeScript** - Full TypeScript support with type definitions
18
+
19
+ ## 📦 Installation
20
+
21
+ ### Via NPM
8
22
 
9
23
  ```bash
10
24
  npm install tia-chatbot
11
- # or
12
- yarn add tia-chatbot
13
- # or
14
- pnpm add tia-chatbot
15
25
  ```
16
26
 
17
27
  ### Via CDN
18
28
 
19
29
  ```html
20
- <script src="https://unpkg.com/tia-chatbot@latest/dist/tia-widget.umd.js"></script>
30
+ <!-- React Dependencies -->
31
+ <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
32
+ <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
33
+
34
+ <!-- TIA Chatbot Widget -->
35
+ <script src="https://unpkg.com/tia-chatbot@latest/dist/tia-chatbot.umd.js"></script>
36
+ <link rel="stylesheet" href="https://unpkg.com/tia-chatbot@latest/dist/style.css">
21
37
  ```
22
38
 
23
- ## Usage
39
+ ## 🚀 Quick Start
24
40
 
25
- ### In React Apps
41
+ ### NPM Usage (React/TypeScript)
26
42
 
27
- ```jsx
28
- import { initTiaWidget, ChatWindow } from 'tia-chatbot';
43
+ ```typescript
44
+ import { initTiaChatbot } from 'tia-chatbot';
45
+ import 'tia-chatbot/style.css';
29
46
 
30
- function App() {
31
- // Initialize the widget
32
- useEffect(() => {
33
- initTiaWidget();
34
- }, []);
47
+ const widget = initTiaChatbot({
48
+ serverUrl: 'https://your-chainlit-server.com',
49
+ container: '#chatbot-container'
50
+ });
35
51
 
36
- return (
37
- <div>
38
- {/* Your app content */}
39
- <ChatWindow />
40
- </div>
41
- );
42
- }
52
+ // Later, to remove the widget
53
+ widget.destroy();
43
54
  ```
44
55
 
45
- ### In Non-React Apps (HTML/JS)
56
+ ### CDN Usage (Vanilla JavaScript)
46
57
 
47
58
  ```html
48
59
  <!DOCTYPE html>
49
60
  <html>
50
61
  <head>
51
- <title>My App</title>
52
- <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
53
- <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
54
- <script src="https://unpkg.com/tia-chatbot@latest/dist/tia-widget.umd.js"></script>
62
+ <link rel="stylesheet" href="https://unpkg.com/tia-chatbot@latest/dist/style.css">
55
63
  </head>
56
64
  <body>
57
- <h1>My App</h1>
65
+ <div id="chatbot-container"></div>
66
+
67
+ <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
68
+ <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
69
+ <script src="https://unpkg.com/tia-chatbot@latest/dist/tia-chatbot.umd.js"></script>
58
70
 
59
71
  <script>
60
- // Initialize the widget
61
- TiaWidget.initTiaWidget();
72
+ TiaChatbot.initTiaChatbot({
73
+ serverUrl: 'https://your-chainlit-server.com',
74
+ container: '#chatbot-container'
75
+ });
62
76
  </script>
63
77
  </body>
64
78
  </html>
65
79
  ```
66
80
 
67
- ### Via Script Tag
81
+ ## 📖 Documentation
68
82
 
69
- ```html
70
- <!DOCTYPE html>
71
- <html>
72
- <head>
73
- <title>My App</title>
74
- </head>
75
- <body>
76
- <h1>My App</h1>
83
+ For detailed documentation, including:
84
+ - Configuration options
85
+ - Framework integration (React, Vue, Angular, Next.js)
86
+ - Styling and customization
87
+ - API reference
88
+ - Troubleshooting
77
89
 
78
- <!-- Load React and ReactDOM -->
79
- <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
80
- <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
90
+ See [WIDGET_USAGE.md](./WIDGET_USAGE.md)
81
91
 
82
- <!-- Load the Tia Widget -->
83
- <script src="dist/tia-widget.umd.js"></script>
92
+ ## ⚙️ Configuration
84
93
 
85
- <script>
86
- // Initialize the widget
87
- TiaWidget.initTiaWidget();
88
- </script>
89
- </body>
90
- </html>
94
+ ```typescript
95
+ interface TiaChatbotConfig {
96
+ serverUrl: string; // Your Chainlit server URL (required)
97
+ container?: string | HTMLElement; // Container element (default: '#tia-chatbot-root')
98
+ }
91
99
  ```
92
100
 
93
- ## API
101
+ ## 🎨 Customization
94
102
 
95
- ### `initTiaWidget(options?)`
103
+ Override default styles with CSS:
96
104
 
97
- Initializes the Tia chatbot widget.
98
-
99
- **Parameters:**
100
- - `options` (optional): Configuration object
101
- - `containerId` (string): ID of the container element to mount the widget in (default: mounts as fixed overlay)
105
+ ```css
106
+ :root {
107
+ --tia-primary-color: #f56057;
108
+ --tia-secondary-color: #283068;
109
+ }
102
110
 
103
- ### `ChatWindow`
111
+ #tia-chatbot-root {
112
+ position: fixed;
113
+ bottom: 20px;
114
+ right: 20px;
115
+ }
116
+ ```
104
117
 
105
- React component for the chat window.
118
+ ## 🛠️ Development
106
119
 
107
- **Props:**
108
- - `isOpen` (boolean): Whether the chat window is open
109
- - `setIsOpen` (function): Function to toggle the chat window
120
+ ### Prerequisites
121
+ - Node.js 16+
122
+ - npm or pnpm
110
123
 
111
- ## Development
124
+ ### Setup
112
125
 
113
126
  ```bash
114
127
  # Install dependencies
115
- pnpm install
128
+ npm install
116
129
 
117
130
  # Start development server
118
- pnpm run dev
131
+ npm run dev
119
132
 
120
133
  # Build for production
121
- pnpm run build
134
+ npm run build
122
135
 
123
136
  # Preview production build
124
- pnpm run preview
137
+ npm run preview
138
+ ```
139
+
140
+ ### Project Structure
141
+
142
+ ```
143
+ src/
144
+ ├── components/ # React components
145
+ │ ├── ChatPopup.tsx # Main chat interface
146
+ │ └── ...
147
+ ├── state/ # Recoil state management
148
+ ├── lib/ # Utility functions
149
+ ├── index.tsx # Widget entry point
150
+ ├── App.tsx # Main app component
151
+ └── index.css # Global styles
152
+ ```
153
+
154
+ ## 📋 Requirements
155
+
156
+ ### Peer Dependencies
157
+ - `react` >= 18.3.1
158
+ - `react-dom` >= 18.3.1
159
+
160
+ ### Browser Support
161
+ - Chrome (latest)
162
+ - Firefox (latest)
163
+ - Safari (latest)
164
+ - Edge (latest)
165
+
166
+ ## 🧪 Testing
167
+
168
+ Open `example.html` in a browser after building to test the UMD build:
169
+
170
+ ```bash
171
+ npm run build
172
+ # Open example.html in your browser
125
173
  ```
126
174
 
127
- ## License
175
+ ## 📄 License
176
+
177
+ MIT License - see [LICENSE](./LICENSE) for details
178
+
179
+ ## 🤝 Contributing
180
+
181
+ Contributions are welcome! Please feel free to submit a Pull Request.
182
+
183
+ ## 🐛 Issues
184
+
185
+ Found a bug or have a feature request? Please open an issue on GitHub.
186
+
187
+ ## 📞 Support
188
+
189
+ For questions and support, please refer to the [documentation](./WIDGET_USAGE.md) or open an issue.
190
+
191
+ ---
128
192
 
129
- MIT
193
+ Built with ❤️ using React, TypeScript, and Chainlit
@@ -0,0 +1 @@
1
+ export { }
@@ -0,0 +1 @@
1
+ /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties{@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{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,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;--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-700:oklch(37.3% .034 259.733);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--radius-md:.375rem;--radius-lg:.5rem;--radius-2xl:1rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,: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-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,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:currentColor}@supports (color:color-mix(in lab,red,red)){::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}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.right-20{right:calc(var(--spacing)*20)}.bottom-6{bottom:calc(var(--spacing)*6)}.bottom-22{bottom:calc(var(--spacing)*22)}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%}@media(min-width:30rem){.container{max-width:30rem}}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}@media(min-width:120rem){.container{max-width:120rem}}@media(min-width:160rem){.container{max-width:160rem}}.mx-auto{margin-inline:auto}.my-4{margin-block:calc(var(--spacing)*4)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.block{display:block}.flex{display:flex}.inline{display:inline}.h-10{height:calc(var(--spacing)*10)}.h-14{height:calc(var(--spacing)*14)}.h-64{height:calc(var(--spacing)*64)}.h-\[500px\]{height:500px}.h-auto{height:auto}.h-full{height:100%}.w-1\/5{width:20%}.w-8\/12{width:66.6667%}.w-10{width:calc(var(--spacing)*10)}.w-14{width:calc(var(--spacing)*14)}.w-64{width:calc(var(--spacing)*64)}.w-\[96\%\]{width:96%}.w-full{width:100%}.max-w-\[70\%\]{max-width:70%}.min-w-\[70\%\]{min-width:70%}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing)*2)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}.gap-x-4{column-gap:calc(var(--spacing)*4)}.gap-y-2{row-gap:calc(var(--spacing)*2)}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.bg-\[\#EFF1FF\]{background-color:#eff1ff}.bg-\[\#F3F3F3\]{background-color:#f3f3f3}.bg-\[\#F5605724\]{background-color:#f5605724}.bg-\[\#FFFFFF\]{background-color:#fff}.bg-gray-200{background-color:var(--color-gray-200)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-linear-to-l{--tw-gradient-position:to left}@supports (background-image:linear-gradient(in lab,red,red)){.bg-linear-to-l{--tw-gradient-position:to left in oklab}}.bg-linear-to-l{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab,red,red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-\[\#4F5FCE\]{--tw-gradient-from:#4f5fce;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-\[\#283068\]{--tw-gradient-from:#283068;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-\[\#F56057\]{--tw-gradient-from:#f56057;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-\[\#FFE6E4\]{--tw-gradient-from:#ffe6e4;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-\[\#49507F\]{--tw-gradient-via:#49507f;--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-\[\#A03F39\]{--tw-gradient-via:#a03f39;--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-\[\#FFE6E4\]{--tw-gradient-via:#ffe6e4;--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-\[\#2D3776\]{--tw-gradient-to:#2d3776;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-\[\#49507F\]{--tw-gradient-to:#49507f;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-\[\#283068\]{--tw-gradient-to:#283068;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-\[\#FDACA7\]\/70{--tw-gradient-to:oklab(82.1256% .0883578 .0380105/.7);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-0{padding:calc(var(--spacing)*0)}.p-1{padding:calc(var(--spacing)*1)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.text-center{text-align:center}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#0D082C\]{color:#0d082c}.text-\[\#283068\]{color:#283068}.text-black{color:var(--color-black)}.text-gray-700{color:var(--color-gray-700)}.text-transparent{color:#0000}.text-white{color:var(--color-white)}.italic{font-style:italic}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-black{--tw-shadow-color:#000}@supports (color:color-mix(in lab,red,red)){.shadow-black{--tw-shadow-color:color-mix(in oklab,var(--color-black)var(--tw-shadow-alpha),transparent)}}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}@media(hover:hover){.hover\:bg-\[\#283068\]:hover{background-color:#283068}.hover\:text-white:hover{color:var(--color-white)}}.custom-scrollbar::-webkit-scrollbar{width:4px;height:px}.custom-scrollbar::-webkit-scrollbar-track{background:0 0}.custom-scrollbar::-webkit-scrollbar-thumb{background:linear-gradient(#21294c,#61b872);border-radius:8px;transition:background .3s,width .3s}.custom-scrollbar:hover::-webkit-scrollbar-thumb{background:linear-gradient(#283950,#4ae48b);width:8px}.custom-scrollbar::-webkit-scrollbar-thumb:active{background:linear-gradient(#1b2124,#2ecc71)}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:#21294c #f3f3f3}.custom-scrollbar:after{content:"";pointer-events:none;background:linear-gradient(#0000,#fff);width:100%;height:20px;position:absolute;bottom:0;left:0}.inputHeight{height:40px}@media(min-width:48rem){.inputHeight{height:36px}}@media(min-width:64rem){.inputHeight{height:38px}}@media(min-width:80rem){.inputHeight{height:42px}}@media(min-width:96rem){.inputHeight{height:46px}}@media(min-width:120rem){.inputHeight{height:50px}}@media(min-width:160rem){.inputHeight{height:54px}}.fs32{font-family:Manrope,sans-serif;font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}@media(min-width:48rem){.fs32{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}@media(min-width:64rem){.fs32{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}}@media(min-width:80rem){.fs32{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}}@media(min-width:96rem){.fs32{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}@media(min-width:120rem){.fs32{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}}.fs28{font-family:Manrope,sans-serif;font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}@media(min-width:48rem){.fs28{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}@media(min-width:64rem){.fs28{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}@media(min-width:80rem){.fs28{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}@media(min-width:96rem){.fs28{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}}@media(min-width:120rem){.fs28{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}}.fs24{font-family:Manrope,sans-serif;font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}@media(min-width:48rem){.fs24{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media(min-width:64rem){.fs24{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}@media(min-width:80rem){.fs24{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}@media(min-width:96rem){.fs24{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}@media(min-width:120rem){.fs24{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}.fs22{font-family:Manrope,sans-serif;font-size:22px}@media(min-width:48rem){.fs22{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media(min-width:64rem){.fs22{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media(min-width:80rem){.fs22{font-size:22px}}@media(min-width:96rem){.fs22{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}@media(min-width:120rem){.fs22{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}@media(min-width:160rem){.fs22{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}}.fs20{font-family:Manrope,sans-serif;font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}@media(min-width:48rem){.fs20{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media(min-width:64rem){.fs20{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media(min-width:80rem){.fs20{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media(min-width:96rem){.fs20{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media(min-width:120rem){.fs20{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}@media(min-width:160rem){.fs20{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}.fs18{font-family:Manrope,sans-serif;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}@media(min-width:48rem){.fs18{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media(min-width:64rem){.fs18{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media(min-width:80rem){.fs18{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media(min-width:96rem){.fs18{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}@media(min-width:120rem){.fs18{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}@media(min-width:160rem){.fs18{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.fs16{font-family:Manrope,sans-serif;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}@media(min-width:48rem){.fs16{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}}@media(min-width:64rem){.fs16{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media(min-width:80rem){.fs16{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media(min-width:96rem){.fs16{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media(min-width:120rem){.fs16{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media(min-width:160rem){.fs16{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.fs14{font-family:Manrope,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}@media(min-width:48rem){.fs14{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}}@media(min-width:64rem){.fs14{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media(min-width:80rem){.fs14{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media(min-width:96rem){.fs14{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media(min-width:120rem){.fs14{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media(min-width:160rem){.fs14{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.fs12{font-family:Manrope,sans-serif;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}@media(min-width:48rem){.fs12{font-size:8px}}@media(min-width:64rem){.fs12{font-size:10px}}@media(min-width:80rem){.fs12{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}}@media(min-width:96rem){.fs12{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media(min-width:120rem){.fs12{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media(min-width:160rem){.fs12{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.fs10{font-family:Manrope,sans-serif;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}@media(min-width:48rem){.fs10{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));font-size:7px}}@media(min-width:64rem){.fs10{font-size:9px}}@media(min-width:96rem){.fs10{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media(min-width:120rem){.fs10{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media(min-width:160rem){.fs10{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}}html,body{tab-size:6;font-family:Manrope,sans-serif;font-size:16px!important}.header{top:calc(var(--spacing)*0);right:calc(var(--spacing)*0);left:calc(var(--spacing)*0);z-index:10;background-color:#fff;position:fixed}.appHeader{border-bottom-style:var(--tw-border-style);vertical-align:middle;border-color:#f3f3f3;border-bottom-width:1px;justify-content:space-between;align-items:center;height:72px;display:flex}@media(min-width:48rem){.appHeader{height:45px}}@media(min-width:64rem){.appHeader{height:54px}}@media(min-width:80rem){.appHeader{height:62px}}@media(min-width:96rem){.appHeader{height:65px}}@media(min-width:120rem){.appHeader{height:72px}}@media(min-width:160rem){.appHeader{height:75px}}.sidebar{bottom:calc(var(--spacing)*0);z-index:5;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;background-color:#fff;border-color:#f3f3f3;position:fixed;top:72px;overflow-y:auto}@media(min-width:48rem){.sidebar{top:45px}}@media(min-width:64rem){.sidebar{top:54px}}@media(min-width:80rem){.sidebar{top:62px}}@media(min-width:96rem){.sidebar{top:65px}}@media(min-width:120rem){.sidebar{top:72px}}@media(min-width:160rem){.sidebar{top:75px}}.sidebar{width:220px}@media(min-width:48rem){.sidebar{width:190px}}@media(min-width:64rem){.sidebar{width:210px}}@media(min-width:80rem){.sidebar{width:260px}}@media(min-width:96rem){.sidebar{width:280px}}@media(min-width:120rem){.sidebar{width:300px}}@media(min-width:160rem){.sidebar{width:280px}}.layoutBodyWithSidebar{right:calc(var(--spacing)*0);z-index:0;padding-top:calc(var(--spacing)*6);padding-right:calc(var(--spacing)*6);padding-bottom:calc(var(--spacing)*4);padding-left:calc(var(--spacing)*6);position:absolute;left:220px}@media(min-width:48rem){.layoutBodyWithSidebar{left:190px}}@media(min-width:64rem){.layoutBodyWithSidebar{left:210px}}@media(min-width:80rem){.layoutBodyWithSidebar{left:260px}}@media(min-width:96rem){.layoutBodyWithSidebar{left:280px}}@media(min-width:120rem){.layoutBodyWithSidebar{left:300px}}@media(min-width:160rem){.layoutBodyWithSidebar{left:280px}}.layoutBodyWithSidebar{top:72px}@media(min-width:48rem){.layoutBodyWithSidebar{top:45px}}@media(min-width:64rem){.layoutBodyWithSidebar{top:54px}}@media(min-width:80rem){.layoutBodyWithSidebar{top:62px}}@media(min-width:96rem){.layoutBodyWithSidebar{top:65px}}@media(min-width:120rem){.layoutBodyWithSidebar{top:72px}}@media(min-width:160rem){.layoutBodyWithSidebar{top:75px}}.layoutBodyWithSidebar{min-height:calc(100vh - 72px)}@media(min-width:48rem){.layoutBodyWithSidebar{min-height:calc(100vh - 45px)}}@media(min-width:64rem){.layoutBodyWithSidebar{min-height:calc(100vh - 54px)}}@media(min-width:80rem){.layoutBodyWithSidebar{min-height:calc(100vh - 62px)}}@media(min-width:96rem){.layoutBodyWithSidebar{min-height:calc(100vh - 65px)}}@media(min-width:120rem){.layoutBodyWithSidebar{min-height:calc(100vh - 72px)}}@media(min-width:160rem){.layoutBodyWithSidebar{min-height:calc(100vh - 75px)}}.layoutBodyWithoutSidebar{right:calc(var(--spacing)*0);left:calc(var(--spacing)*0);padding-inline-start:calc(var(--spacing)*6);padding-inline-end:calc(var(--spacing)*6);padding-top:calc(var(--spacing)*3);padding-bottom:calc(var(--spacing)*4);flex:1;top:72px}@media(min-width:48rem){.layoutBodyWithoutSidebar{top:45px}}@media(min-width:64rem){.layoutBodyWithoutSidebar{top:54px}}@media(min-width:80rem){.layoutBodyWithoutSidebar{top:62px}}@media(min-width:96rem){.layoutBodyWithoutSidebar{top:65px}}@media(min-width:120rem){.layoutBodyWithoutSidebar{top:72px}}@media(min-width:160rem){.layoutBodyWithoutSidebar{top:75px}}.inputWrapper{align-items:center;width:100%;display:flex;position:relative}.input{appearance:none;border-style:var(--tw-border-style);border-width:1.5px;border-color:var(--color-gray-200);color:#21294c;border-radius:.25rem;flex-grow:1;width:100%}.input::placeholder{color:#666}.input:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-outline-style:none;box-shadow:none;outline-style:none}.input:focus:disabled{cursor:not-allowed;background-color:#666}.leftIcon{left:calc(var(--spacing)*3);color:#21294c;position:absolute}.leftIcon+.input{padding-left:calc(var(--spacing)*10)}.rightIcon{right:calc(var(--spacing)*3);color:#21294c;position:absolute}.rightIcon+.input{padding-right:calc(var(--spacing)*10)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}