@eka-care/medassist-widget-embed 0.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 +234 -0
- package/assets/bot-icon.svg +7 -0
- package/dist/index.d.ts +22 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +229 -0
- package/dist/src/.gitkeep +2 -0
- package/dist/src/medassist-widget.css +1 -0
- package/dist/src/medassist-widget.js +42 -0
- package/dist/src/medassist-widget.js.map +1 -0
- package/dist/src/vite.svg +1 -0
- package/index.ts +272 -0
- package/package.json +57 -0
- package/src/.gitkeep +2 -0
- package/src/medassist-widget.css +1 -0
- package/src/medassist-widget.js +42 -0
- package/src/medassist-widget.js.map +1 -0
- package/src/vite.svg +1 -0
- package/test.html +26 -0
package/README.md
ADDED
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
# @eka-care/medassist-widget-embed
|
|
2
|
+
|
|
3
|
+
A lightweight, embeddable widget loader for MedAssist that uses Web Components for easy integration into any website. This package provides
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
The widget-embed package provides:
|
|
8
|
+
|
|
9
|
+
- **Custom Web Component**: `<eka-medassist-widget>` for easy embedding
|
|
10
|
+
- **Lazy Loading**: Widget assets are loaded only when the user clicks the button
|
|
11
|
+
- **Framework Agnostic**: Works with any website, no React or build step required
|
|
12
|
+
- **Isolated Styling**: Shadow DOM prevents style conflicts with host websites
|
|
13
|
+
- **Simple Integration**: Just add a script tag and custom element
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
Install from npm to self-host the assets or reference the package from a CDN such as jsDelivr or UNPKG:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @eka-care/medassist-widget-embed
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
To load directly from a CDN, point the script tag to the published package (replace the version with the one you intend to use):
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<script
|
|
27
|
+
src="https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@0.0.1/index.js"
|
|
28
|
+
async></script>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
The script automatically looks for the accompanying `src/medassist-widget.*` files, so host those assets alongside `index.js`.
|
|
32
|
+
|
|
33
|
+
## Usage
|
|
34
|
+
|
|
35
|
+
Add the widget to any HTML page:
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<!DOCTYPE html>
|
|
39
|
+
<html>
|
|
40
|
+
<head>
|
|
41
|
+
<title>My Website</title>
|
|
42
|
+
</head>
|
|
43
|
+
<body>
|
|
44
|
+
<h1>Welcome to my site!</h1>
|
|
45
|
+
|
|
46
|
+
<!-- Add the widget custom element -->
|
|
47
|
+
<eka-medassist-widget agent-id="your-agent-id-here"></eka-medassist-widget>
|
|
48
|
+
|
|
49
|
+
<!-- Load the widget loader script -->
|
|
50
|
+
<script src="https://your-cdn.com/widget-embed/index.js" async></script>
|
|
51
|
+
</body>
|
|
52
|
+
</html>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
That's it! The widget will appear as a floating button in the bottom-right corner.
|
|
56
|
+
|
|
57
|
+
## Configuration
|
|
58
|
+
|
|
59
|
+
### Required Attributes
|
|
60
|
+
|
|
61
|
+
- `agent-id` (required): Your MedAssist agent identifier
|
|
62
|
+
|
|
63
|
+
### Optional Attributes
|
|
64
|
+
|
|
65
|
+
- `icon-url`: Custom icon URL for the widget button (default: `./assets/bot-icon.svg`)
|
|
66
|
+
|
|
67
|
+
### Example with Custom Icon
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<eka-medassist-widget
|
|
71
|
+
agent-id="your-agent-id-here"
|
|
72
|
+
icon-url="https://example.com/custom-icon.svg"></eka-medassist-widget>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## How It Works
|
|
76
|
+
|
|
77
|
+
1. **Initial Load**: The loader script (`index.js`) registers the custom element `<eka-medassist-widget>`
|
|
78
|
+
2. **Button Display**: The custom element renders a floating button in the bottom-right corner
|
|
79
|
+
3. **Lazy Loading**: When the user clicks the button:
|
|
80
|
+
- The widget CSS is fetched and injected into the shadow DOM
|
|
81
|
+
- The widget JavaScript bundle is loaded
|
|
82
|
+
- The widget is rendered inside the shadow DOM
|
|
83
|
+
4. **Isolation**: All widget code runs in a Shadow DOM, preventing style and script conflicts
|
|
84
|
+
|
|
85
|
+
## File Structure
|
|
86
|
+
|
|
87
|
+
```
|
|
88
|
+
widget-embed/
|
|
89
|
+
├── index.js # Web component loader and custom element definition
|
|
90
|
+
├── src/ # Generated widget assets (from widget package build)
|
|
91
|
+
│ ├── medassist-widget.js
|
|
92
|
+
│ └── medassist-widget.css
|
|
93
|
+
├── assets/
|
|
94
|
+
│ └── bot-icon.svg # Default widget button icon
|
|
95
|
+
└── test.html # Example integration page
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Customization
|
|
99
|
+
|
|
100
|
+
### Custom Icon
|
|
101
|
+
|
|
102
|
+
You can customize the widget button icon by setting the `icon-url` attribute:
|
|
103
|
+
|
|
104
|
+
```html
|
|
105
|
+
<eka-medassist-widget
|
|
106
|
+
agent-id="your-agent-id"
|
|
107
|
+
icon-url="/path/to/your-icon.svg"></eka-medassist-widget>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Dynamic Attribute Updates
|
|
111
|
+
|
|
112
|
+
You can update widget attributes programmatically:
|
|
113
|
+
|
|
114
|
+
```javascript
|
|
115
|
+
const widget = document.querySelector("eka-medassist-widget");
|
|
116
|
+
widget.setAttribute("icon-url", "https://example.com/new-icon.svg");
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Browser Support
|
|
120
|
+
|
|
121
|
+
- Chrome (latest)
|
|
122
|
+
- Firefox (latest)
|
|
123
|
+
- Safari (latest)
|
|
124
|
+
- Edge (latest)
|
|
125
|
+
|
|
126
|
+
Requires support for:
|
|
127
|
+
|
|
128
|
+
- Custom Elements (Web Components)
|
|
129
|
+
- Shadow DOM
|
|
130
|
+
- ES6+ JavaScript
|
|
131
|
+
|
|
132
|
+
## Development
|
|
133
|
+
|
|
134
|
+
Use any static server or bundler workflow you prefer for local verification. The widget emits helpful console logs (asset loading status, errors) that you can inspect in the browser DevTools.
|
|
135
|
+
|
|
136
|
+
## Integration Examples
|
|
137
|
+
|
|
138
|
+
### React
|
|
139
|
+
|
|
140
|
+
```jsx
|
|
141
|
+
import { useEffect } from "react";
|
|
142
|
+
|
|
143
|
+
function App() {
|
|
144
|
+
useEffect(() => {
|
|
145
|
+
// Load the widget script
|
|
146
|
+
const script = document.createElement("script");
|
|
147
|
+
script.src = "https://your-cdn.com/widget-embed/index.js";
|
|
148
|
+
script.async = true;
|
|
149
|
+
document.body.appendChild(script);
|
|
150
|
+
|
|
151
|
+
return () => {
|
|
152
|
+
// Cleanup if needed
|
|
153
|
+
};
|
|
154
|
+
}, []);
|
|
155
|
+
|
|
156
|
+
return (
|
|
157
|
+
<div>
|
|
158
|
+
<h1>My React App</h1>
|
|
159
|
+
<eka-medassist-widget agent-id="your-agent-id" />
|
|
160
|
+
</div>
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Vue
|
|
166
|
+
|
|
167
|
+
```vue
|
|
168
|
+
<template>
|
|
169
|
+
<div>
|
|
170
|
+
<h1>My Vue App</h1>
|
|
171
|
+
<eka-medassist-widget :agent-id="agentId" />
|
|
172
|
+
</div>
|
|
173
|
+
</template>
|
|
174
|
+
|
|
175
|
+
<script>
|
|
176
|
+
export default {
|
|
177
|
+
data() {
|
|
178
|
+
return {
|
|
179
|
+
agentId: "your-agent-id",
|
|
180
|
+
};
|
|
181
|
+
},
|
|
182
|
+
mounted() {
|
|
183
|
+
const script = document.createElement("script");
|
|
184
|
+
script.src = "https://your-cdn.com/widget-embed/index.js";
|
|
185
|
+
script.async = true;
|
|
186
|
+
document.body.appendChild(script);
|
|
187
|
+
},
|
|
188
|
+
};
|
|
189
|
+
</script>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
### Vanilla JavaScript
|
|
193
|
+
|
|
194
|
+
```html
|
|
195
|
+
<!DOCTYPE html>
|
|
196
|
+
<html>
|
|
197
|
+
<head>
|
|
198
|
+
<title>My Site</title>
|
|
199
|
+
</head>
|
|
200
|
+
<body>
|
|
201
|
+
<eka-medassist-widget agent-id="your-agent-id"></eka-medassist-widget>
|
|
202
|
+
|
|
203
|
+
<script>
|
|
204
|
+
// Load widget script
|
|
205
|
+
(function () {
|
|
206
|
+
const script = document.createElement("script");
|
|
207
|
+
script.src = "https://your-cdn.com/widget-embed/index.js";
|
|
208
|
+
script.async = true;
|
|
209
|
+
document.body.appendChild(script);
|
|
210
|
+
})();
|
|
211
|
+
</script>
|
|
212
|
+
</body>
|
|
213
|
+
</html>
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
## Troubleshooting
|
|
217
|
+
|
|
218
|
+
### Widget Not Appearing
|
|
219
|
+
|
|
220
|
+
1. Check that the `agent-id` attribute is set correctly
|
|
221
|
+
2. Verify that `index.js` is loading (check Network tab in DevTools)
|
|
222
|
+
3. Check browser console for errors
|
|
223
|
+
4. Ensure the widget assets (`medassist-widget.js` and `medassist-widget.css`) are accessible
|
|
224
|
+
|
|
225
|
+
### Styling Conflicts
|
|
226
|
+
|
|
227
|
+
The widget uses Shadow DOM to isolate styles, but if you encounter issues:
|
|
228
|
+
|
|
229
|
+
- Check that the widget is rendering inside the shadow DOM
|
|
230
|
+
- Verify that host website styles aren't affecting the shadow root
|
|
231
|
+
|
|
232
|
+
## License
|
|
233
|
+
|
|
234
|
+
MIT
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<circle cx="13.5" cy="13.5" r="6.5" fill="#215FFF"/>
|
|
3
|
+
<foreignObject x="1.46154" y="1.46154" width="14.0769" height="14.0769"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(1.27px);clip-path:url(#bgblur_0_11_238_clip_path);height:100%;width:100%"></div></foreignObject><circle data-figma-bg-blur-radius="2.53846" cx="8.5" cy="8.5" r="4.5" fill="#B45EDC" fill-opacity="0.6"/>
|
|
4
|
+
<defs>
|
|
5
|
+
<clipPath id="bgblur_0_11_238_clip_path" transform="translate(-1.46154 -1.46154)"><circle cx="8.5" cy="8.5" r="4.5"/>
|
|
6
|
+
</clipPath></defs>
|
|
7
|
+
</svg>
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
declare const getCurrentScript: () => HTMLScriptElement | null;
|
|
2
|
+
declare const DEFAULT_WIDGET_ASSET_BASE = "https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget@latest/dist/";
|
|
3
|
+
declare const scriptEl: HTMLScriptElement | null;
|
|
4
|
+
declare const scriptBaseUrl: string;
|
|
5
|
+
declare const widgetAssetBaseUrl: string;
|
|
6
|
+
declare const WIDGET_JS_URL: string;
|
|
7
|
+
declare const WIDGET_CSS_URL: string;
|
|
8
|
+
declare let widgetScriptPromise: Promise<void> | null;
|
|
9
|
+
declare let widgetCssTextPromise: Promise<string> | null;
|
|
10
|
+
declare class MedAssistWidgetLoader extends HTMLElement {
|
|
11
|
+
private defaultIconUrl;
|
|
12
|
+
private widgetLoaded;
|
|
13
|
+
constructor();
|
|
14
|
+
static get observedAttributes(): string[];
|
|
15
|
+
connectedCallback(): void;
|
|
16
|
+
attributeChangedCallback(name: string): void;
|
|
17
|
+
renderButton(): void;
|
|
18
|
+
loadAndRender(): Promise<void>;
|
|
19
|
+
loadWidgetCss(): Promise<void>;
|
|
20
|
+
loadWidgetScript(): Promise<void>;
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,gBAAgB,QAAO,iBAAiB,GAAG,IAchD,CAAC;AAEF,QAAA,MAAM,yBAAyB,yEACyC,CAAC;AAEzE,QAAA,MAAM,QAAQ,0BAAqB,CAAC;AACpC,QAAA,MAAM,aAAa,QASf,CAAC;AAEL,QAAA,MAAM,kBAAkB,QAmBpB,CAAC;AAEL,QAAA,MAAM,aAAa,QAA6C,CAAC;AACjE,QAAA,MAAM,cAAc,QAA8C,CAAC;AAGnE,QAAA,IAAI,mBAAmB,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAW,CAAC;AACrD,QAAA,IAAI,oBAAoB,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,IAAW,CAAC;AAExD,cAAM,qBAAsB,SAAQ,WAAW;IAC7C,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,YAAY,CAAU;;IAU9B,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,iBAAiB,IAAI,IAAI;IAIzB,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAM5C,YAAY,IAAI,IAAI;IA+Dd,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;IA6C9B,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;IA4BpC,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;CA0ClC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// declare global {
|
|
3
|
+
// interface Window {
|
|
4
|
+
// renderMedAssist?: (root: HTMLElement, agentId: string) => void;
|
|
5
|
+
// }
|
|
6
|
+
// }
|
|
7
|
+
const getCurrentScript = () => {
|
|
8
|
+
if (typeof document === "undefined") {
|
|
9
|
+
console.error("document is not defined");
|
|
10
|
+
return null;
|
|
11
|
+
}
|
|
12
|
+
const { currentScript } = document;
|
|
13
|
+
if (currentScript instanceof HTMLScriptElement) {
|
|
14
|
+
console.log("document.currentScript", currentScript);
|
|
15
|
+
return currentScript;
|
|
16
|
+
}
|
|
17
|
+
const scripts = document.getElementsByTagName("script");
|
|
18
|
+
return scripts.length ? scripts[scripts.length - 1] : null;
|
|
19
|
+
};
|
|
20
|
+
const DEFAULT_WIDGET_ASSET_BASE = "https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget@latest/dist/";
|
|
21
|
+
const scriptEl = getCurrentScript();
|
|
22
|
+
const scriptBaseUrl = (() => {
|
|
23
|
+
if (!scriptEl) {
|
|
24
|
+
return "";
|
|
25
|
+
}
|
|
26
|
+
try {
|
|
27
|
+
return new URL(".", scriptEl.src || window.location.href).href;
|
|
28
|
+
}
|
|
29
|
+
catch {
|
|
30
|
+
return "";
|
|
31
|
+
}
|
|
32
|
+
})();
|
|
33
|
+
const widgetAssetBaseUrl = (() => {
|
|
34
|
+
if (!scriptEl) {
|
|
35
|
+
return DEFAULT_WIDGET_ASSET_BASE;
|
|
36
|
+
}
|
|
37
|
+
const dataValue = scriptEl.dataset.widgetAssets;
|
|
38
|
+
if (dataValue === "local") {
|
|
39
|
+
return `${scriptBaseUrl}src/`;
|
|
40
|
+
}
|
|
41
|
+
if (dataValue && dataValue.length > 0) {
|
|
42
|
+
try {
|
|
43
|
+
return new URL(dataValue, scriptBaseUrl).href;
|
|
44
|
+
}
|
|
45
|
+
catch {
|
|
46
|
+
return dataValue.endsWith("/") ? dataValue : `${dataValue}/`;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
return DEFAULT_WIDGET_ASSET_BASE;
|
|
50
|
+
})();
|
|
51
|
+
const WIDGET_JS_URL = `${widgetAssetBaseUrl}medassist-widget.js`;
|
|
52
|
+
const WIDGET_CSS_URL = `${widgetAssetBaseUrl}medassist-widget.css`;
|
|
53
|
+
console.log("WIDGET_JS_URL", WIDGET_JS_URL);
|
|
54
|
+
console.log("WIDGET_CSS_URL", WIDGET_CSS_URL);
|
|
55
|
+
let widgetScriptPromise = null;
|
|
56
|
+
let widgetCssTextPromise = null;
|
|
57
|
+
class MedAssistWidgetLoader extends HTMLElement {
|
|
58
|
+
constructor() {
|
|
59
|
+
super();
|
|
60
|
+
this.attachShadow({ mode: "open" });
|
|
61
|
+
this.defaultIconUrl = "./assets/bot-icon.svg";
|
|
62
|
+
this.widgetLoaded = false;
|
|
63
|
+
console.log("MedAssistWidgetLoader constructor");
|
|
64
|
+
}
|
|
65
|
+
static get observedAttributes() {
|
|
66
|
+
return ["icon-url"];
|
|
67
|
+
}
|
|
68
|
+
connectedCallback() {
|
|
69
|
+
this.renderButton();
|
|
70
|
+
}
|
|
71
|
+
attributeChangedCallback(name) {
|
|
72
|
+
if (name === "icon-url") {
|
|
73
|
+
this.renderButton();
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
renderButton() {
|
|
77
|
+
var _a;
|
|
78
|
+
const iconUrl = this.getAttribute("icon-url") || this.defaultIconUrl;
|
|
79
|
+
const shadowRoot = this.shadowRoot;
|
|
80
|
+
if (!shadowRoot) {
|
|
81
|
+
console.error("Shadow root was not created");
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
if (!shadowRoot.querySelector("button")) {
|
|
85
|
+
console.log("MedAssistWidgetLoader renderButton");
|
|
86
|
+
shadowRoot.innerHTML = `
|
|
87
|
+
<style>
|
|
88
|
+
#medassist-open-btn {
|
|
89
|
+
width: 60px;
|
|
90
|
+
height: 60px;
|
|
91
|
+
border-radius: 50%;
|
|
92
|
+
border: none;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
background-color: #007bff;
|
|
95
|
+
padding: 0;
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
justify-content: center;
|
|
99
|
+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
|
100
|
+
}
|
|
101
|
+
#medassist-open-btn img {
|
|
102
|
+
width: 30px;
|
|
103
|
+
height: 30px;
|
|
104
|
+
}
|
|
105
|
+
:host {
|
|
106
|
+
position: fixed;
|
|
107
|
+
bottom: 20px;
|
|
108
|
+
right: 20px;
|
|
109
|
+
z-index: 200000;
|
|
110
|
+
}
|
|
111
|
+
#medassist-open-btn:hover {
|
|
112
|
+
background-color: #0056b3;
|
|
113
|
+
}
|
|
114
|
+
.hidden {
|
|
115
|
+
display: none;
|
|
116
|
+
}
|
|
117
|
+
</style>
|
|
118
|
+
|
|
119
|
+
<button id="medassist-open-btn">
|
|
120
|
+
<img src="${iconUrl}" alt="MedAssist Icon">
|
|
121
|
+
</button>
|
|
122
|
+
<div id="medassist-widget-root" class="hidden"></div>
|
|
123
|
+
`;
|
|
124
|
+
(_a = shadowRoot
|
|
125
|
+
.getElementById("medassist-open-btn")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", () => this.loadAndRender());
|
|
126
|
+
}
|
|
127
|
+
else {
|
|
128
|
+
const img = shadowRoot.querySelector("#medassist-open-btn img");
|
|
129
|
+
if (img) {
|
|
130
|
+
img.src = iconUrl;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
async loadAndRender() {
|
|
135
|
+
var _a;
|
|
136
|
+
console.log("MedAssistWidgetLoader loadAndRender");
|
|
137
|
+
const shadowRoot = this.shadowRoot;
|
|
138
|
+
if (!shadowRoot) {
|
|
139
|
+
console.error("Shadow root is not available");
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
const button = shadowRoot.getElementById("medassist-open-btn");
|
|
143
|
+
const rootElement = shadowRoot.getElementById("medassist-widget-root");
|
|
144
|
+
const agentId = this.getAttribute("agent-id");
|
|
145
|
+
if (!agentId) {
|
|
146
|
+
console.error("Agent ID is required");
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
if (!button || !rootElement) {
|
|
150
|
+
console.error("Widget button or root element is missing");
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
button.classList.add("hidden");
|
|
154
|
+
rootElement.classList.remove("hidden");
|
|
155
|
+
if (this.widgetLoaded) {
|
|
156
|
+
(_a = window.renderMedAssist) === null || _a === void 0 ? void 0 : _a.call(window, rootElement, agentId);
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
159
|
+
try {
|
|
160
|
+
await Promise.all([this.loadWidgetCss(), this.loadWidgetScript()]);
|
|
161
|
+
if (typeof window.renderMedAssist !== "function") {
|
|
162
|
+
throw new Error("renderMedAssist is not available on window");
|
|
163
|
+
}
|
|
164
|
+
window.renderMedAssist(rootElement, agentId);
|
|
165
|
+
this.widgetLoaded = true;
|
|
166
|
+
}
|
|
167
|
+
catch (error) {
|
|
168
|
+
console.error("Failed to load MedAssist widget", error);
|
|
169
|
+
button.classList.remove("hidden");
|
|
170
|
+
rootElement.classList.add("hidden");
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
async loadWidgetCss() {
|
|
174
|
+
const shadowRoot = this.shadowRoot;
|
|
175
|
+
if (!shadowRoot) {
|
|
176
|
+
throw new Error("Shadow root is not available");
|
|
177
|
+
}
|
|
178
|
+
if (shadowRoot.querySelector("[data-medassist-style='true']")) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
if (!widgetCssTextPromise) {
|
|
182
|
+
widgetCssTextPromise = fetch(WIDGET_CSS_URL).then((response) => {
|
|
183
|
+
if (!response.ok) {
|
|
184
|
+
throw new Error(`Unable to fetch widget styles from ${WIDGET_CSS_URL}`);
|
|
185
|
+
}
|
|
186
|
+
return response.text();
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
const cssText = await widgetCssTextPromise;
|
|
190
|
+
const styleTag = document.createElement("style");
|
|
191
|
+
styleTag.setAttribute("data-medassist-style", "true");
|
|
192
|
+
styleTag.textContent = cssText;
|
|
193
|
+
shadowRoot.appendChild(styleTag);
|
|
194
|
+
}
|
|
195
|
+
loadWidgetScript() {
|
|
196
|
+
if (!widgetScriptPromise) {
|
|
197
|
+
widgetScriptPromise = new Promise((resolve, reject) => {
|
|
198
|
+
const existingScript = document.querySelector(`script[src="${WIDGET_JS_URL}"]`);
|
|
199
|
+
if (existingScript) {
|
|
200
|
+
if (existingScript.dataset.loaded === "true") {
|
|
201
|
+
resolve();
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
existingScript.addEventListener("load", () => resolve());
|
|
205
|
+
existingScript.addEventListener("error", (event) => reject(event.error || new Error("Unknown script loading error")));
|
|
206
|
+
return;
|
|
207
|
+
}
|
|
208
|
+
const script = document.createElement("script");
|
|
209
|
+
script.src = WIDGET_JS_URL;
|
|
210
|
+
script.async = true;
|
|
211
|
+
script.dataset.widget = "medassist";
|
|
212
|
+
script.onload = () => {
|
|
213
|
+
script.dataset.loaded = "true";
|
|
214
|
+
resolve();
|
|
215
|
+
};
|
|
216
|
+
script.onerror = (event) => {
|
|
217
|
+
if (event instanceof ErrorEvent && event.error) {
|
|
218
|
+
reject(event.error);
|
|
219
|
+
return;
|
|
220
|
+
}
|
|
221
|
+
reject(new Error(`Failed to load ${WIDGET_JS_URL}`));
|
|
222
|
+
};
|
|
223
|
+
document.head.appendChild(script);
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
return widgetScriptPromise;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
customElements.define("eka-medassist-widget", MedAssistWidgetLoader);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--background: 0 0% 100%;--foreground: 0 0% 3.9%;--card: 0 0% 100%;--card-foreground: 0 0% 3.9%;--popover: 0 0% 100%;--popover-foreground: 0 0% 3.9%;--primary: 0 0% 9%;--primary-foreground: 0 0% 98%;--secondary: 0 0% 96.1%;--secondary-foreground: 0 0% 9%;--muted: 0 0% 96.1%;--muted-foreground: 0 0% 45.1%;--accent: 0 0% 96.1%;--accent-foreground: 0 0% 9%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--border: 0 0% 89.8%;--input: 0 0% 89.8%;--ring: 0 0% 3.9%;--chart-1: 12 76% 61%;--chart-2: 173 58% 39%;--chart-3: 197 37% 24%;--chart-4: 43 74% 66%;--chart-5: 27 87% 67%;--radius: .5rem}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground));font-feature-settings:"rlig" 1,"calt" 1}.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-1{inset:.25rem}.inset-3{inset:.75rem}.bottom-4{bottom:1rem}.right-4{right:1rem}.isolate{isolation:isolate}.z-\[2147483647\]{z-index:2147483647}.m-0{margin:0}.mx-4{margin-left:1rem;margin-right:1rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.box-border{box-sizing:border-box}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-24{height:6rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[100dvh\]{height:100dvh}.h-\[600px\]{height:600px}.h-auto{height:auto}.h-full{height:100%}.min-h-0{min-height:0px}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-96{width:24rem}.w-full{width:100%}.w-screen{width:100vw}.max-w-md{max-width:28rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.375rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.text-wrap{text-wrap:wrap}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-none{border-radius:0}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:.75rem}.rounded-bl-none{border-bottom-left-radius:0}.rounded-br-none{border-bottom-right-radius:0}.border{border-width:1px}.border-0{border-width:0px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-\[\#FDD835\]{--tw-border-opacity: 1;border-color:rgb(253 216 53 / var(--tw-border-opacity))}.border-\[\#FEE39B\]{--tw-border-opacity: 1;border-color:rgb(254 227 155 / var(--tw-border-opacity))}.border-blue-200{--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity))}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.border-input{border-color:hsl(var(--input))}.border-lavender-200\/40{border-color:#e8e4ff66}.border-lavender-200\/60{border-color:#e8e4ff99}.border-muted-foreground{border-color:hsl(var(--muted-foreground))}.border-primary{border-color:hsl(var(--primary))}.border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity))}.border-white\/20{border-color:#fff3}.border-white\/30{border-color:#ffffff4d}.border-white\/50{border-color:#ffffff80}.border-l-transparent{border-left-color:transparent}.border-t-transparent{border-top-color:transparent}.bg-\[\#3B71F7\]{--tw-bg-opacity: 1;background-color:rgb(59 113 247 / var(--tw-bg-opacity))}.bg-\[\#F7B500\]{--tw-bg-opacity: 1;background-color:rgb(247 181 0 / var(--tw-bg-opacity))}.bg-\[\#FDD835\]{--tw-bg-opacity: 1;background-color:rgb(253 216 53 / var(--tw-bg-opacity))}.bg-\[\#FFFBEB\]{--tw-bg-opacity: 1;background-color:rgb(255 251 235 / var(--tw-bg-opacity))}.bg-amber-500{--tw-bg-opacity: 1;background-color:rgb(245 158 11 / var(--tw-bg-opacity))}.bg-background{background-color:hsl(var(--background))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}.bg-border{background-color:hsl(var(--border))}.bg-card{background-color:hsl(var(--card))}.bg-destructive{background-color:hsl(var(--destructive))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))}.bg-lavender-100\/95{background-color:#f3f1fff2}.bg-lavender-200\/30{background-color:#e8e4ff4d}.bg-muted{background-color:hsl(var(--muted))}.bg-primary{background-color:hsl(var(--primary))}.bg-purple-100\/50{background-color:#f3e8ff80}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.bg-secondary{background-color:hsl(var(--secondary))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-white\/70{background-color:#ffffffb3}.bg-white\/80{background-color:#fffc}.bg-white\/90{background-color:#ffffffe6}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-lavender-100{--tw-gradient-from: #f3f1ff var(--tw-gradient-from-position);--tw-gradient-to: rgb(243 241 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-lavender-200{--tw-gradient-from: #e8e4ff var(--tw-gradient-from-position);--tw-gradient-to: rgb(232 228 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-lavender-300{--tw-gradient-from: #d4ccff var(--tw-gradient-from-position);--tw-gradient-to: rgb(212 204 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-lavender-400{--tw-gradient-from: #b8a9ff var(--tw-gradient-from-position);--tw-gradient-to: rgb(184 169 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-lavender-50{--tw-gradient-from: #faf9ff var(--tw-gradient-from-position);--tw-gradient-to: rgb(250 249 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-purple-400{--tw-gradient-from: #c084fc var(--tw-gradient-from-position);--tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-red-400{--tw-gradient-from: #f87171 var(--tw-gradient-from-position);--tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-rose-400{--tw-gradient-from: #fb7185 var(--tw-gradient-from-position);--tw-gradient-to: rgb(251 113 133 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-lavender-500{--tw-gradient-to: rgb(157 135 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #9d87ff var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-indigo-500{--tw-gradient-to: #6366f1 var(--tw-gradient-to-position)}.to-lavender-200{--tw-gradient-to: #e8e4ff var(--tw-gradient-to-position)}.to-lavender-300{--tw-gradient-to: #d4ccff var(--tw-gradient-to-position)}.to-lavender-400{--tw-gradient-to: #b8a9ff var(--tw-gradient-to-position)}.to-lavender-500{--tw-gradient-to: #9d87ff var(--tw-gradient-to-position)}.to-purple-300{--tw-gradient-to: #d8b4fe var(--tw-gradient-to-position)}.to-rose-500{--tw-gradient-to: #f43f5e var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-\[1px\]{padding:1px}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pt-0{padding-top:0}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-none{line-height:1}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.text-\[\#333333\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity))}.text-\[\#666666\]{--tw-text-opacity: 1;color:rgb(102 102 102 / var(--tw-text-opacity))}.text-amber-600{--tw-text-opacity: 1;color:rgb(217 119 6 / var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-card-foreground{color:hsl(var(--card-foreground))}.text-current{color:currentColor}.text-destructive-foreground{color:hsl(var(--destructive-foreground))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.text-green-500{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.text-lavender-300{--tw-text-opacity: 1;color:rgb(212 204 255 / var(--tw-text-opacity))}.text-lavender-500{--tw-text-opacity: 1;color:rgb(157 135 255 / var(--tw-text-opacity))}.text-lavender-600{--tw-text-opacity: 1;color:rgb(124 95 245 / var(--tw-text-opacity))}.text-muted-foreground{color:hsl(var(--muted-foreground))}.text-orange-500{--tw-text-opacity: 1;color:rgb(249 115 22 / var(--tw-text-opacity))}.text-primary{color:hsl(var(--primary))}.text-primary-foreground{color:hsl(var(--primary-foreground))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-secondary-foreground{color:hsl(var(--secondary-foreground))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity))}.placeholder-gray-400::placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity))}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(139\,92\,246\,0\.45\)\]{--tw-shadow: 0 0 20px rgba(139,92,246,.45);--tw-shadow-colored: 0 0 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-2{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-lavender-100{--tw-ring-opacity: 1;--tw-ring-color: rgb(243 241 255 / var(--tw-ring-opacity))}.ring-lavender-200\/40{--tw-ring-color: rgb(232 228 255 / .4)}.ring-lavender-300\/40{--tw-ring-color: rgb(212 204 255 / .4)}.ring-white\/60{--tw-ring-color: rgb(255 255 255 / .6)}.blur-2xl{--tw-blur: blur(40px);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)}.blur-3xl{--tw-blur: blur(64px);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)}.blur-lg{--tw-blur: blur(16px);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)}.blur-xl{--tw-blur: blur(24px);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)}.grayscale{--tw-grayscale: grayscale(100%);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)}.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)}.backdrop-blur{--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-2xl{--tw-backdrop-blur: blur(40px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.duration-500{animation-duration:.5s}.file\:border-0::file-selector-button{border-width:0px}.file\:bg-transparent::file-selector-button{background-color:transparent}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-medium::file-selector-button{font-weight:500}.file\:text-foreground::file-selector-button{color:hsl(var(--foreground))}.placeholder\:text-muted-foreground::-moz-placeholder{color:hsl(var(--muted-foreground))}.placeholder\:text-muted-foreground::placeholder{color:hsl(var(--muted-foreground))}.focus-within\:border-lavender-100\/50:focus-within{border-color:#f3f1ff80}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-within\:ring-lavender-400\/50:focus-within{--tw-ring-color: rgb(184 169 255 / .5)}.hover\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-lavender-300:hover{--tw-border-opacity: 1;border-color:rgb(212 204 255 / var(--tw-border-opacity))}.hover\:bg-\[\#2E5CD9\]:hover{--tw-bg-opacity: 1;background-color:rgb(46 92 217 / var(--tw-bg-opacity))}.hover\:bg-accent:hover{background-color:hsl(var(--accent))}.hover\:bg-blue-200:hover{--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}.hover\:bg-destructive\/90:hover{background-color:hsl(var(--destructive) / .9)}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:bg-lavender-100\/80:hover{background-color:#f3f1ffcc}.hover\:bg-lavender-200\/40:hover{background-color:#e8e4ff66}.hover\:bg-primary\/90:hover{background-color:hsl(var(--primary) / .9)}.hover\:bg-secondary\/80:hover{background-color:hsl(var(--secondary) / .8)}.hover\:bg-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.hover\:bg-white\/95:hover{background-color:#fffffff2}.hover\:from-lavender-500:hover{--tw-gradient-from: #9d87ff var(--tw-gradient-from-position);--tw-gradient-to: rgb(157 135 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:from-red-500:hover{--tw-gradient-from: #ef4444 var(--tw-gradient-from-position);--tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:to-lavender-600:hover{--tw-gradient-to: #7c5ff5 var(--tw-gradient-to-position)}.hover\:to-rose-600:hover{--tw-gradient-to: #e11d48 var(--tw-gradient-to-position)}.hover\:text-accent-foreground:hover{color:hsl(var(--accent-foreground))}.hover\:text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lg:hover{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-0:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-1:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color: hsl(var(--ring))}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width: 0px}.active\:scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:scale-\[0\.98\]:active{--tw-scale-x: .98;--tw-scale-y: .98;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-gray-200:disabled{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.disabled\:bg-gray-100:disabled{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.disabled\:text-gray-400:disabled{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.disabled\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\:bg-purple-200\/70{background-color:#e9d5ffb3}.group:hover .group-hover\:text-lavender-600{--tw-text-opacity: 1;color:rgb(124 95 245 / var(--tw-text-opacity))}.data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:hsl(var(--primary))}.data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{color:hsl(var(--primary-foreground))}@media(min-width:768px){.md\:text-sm{font-size:.875rem;line-height:1.25rem}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:1rem;height:1rem}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}
|