peppermint-chatbot-sdk 0.1.10 → 0.1.12

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.
Files changed (14) hide show
  1. package/dist/index.js +240 -78
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +240 -78
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/logo-transparent-YUL3JUZA.png +0 -0
  6. package/dist/react/index.js +240 -78
  7. package/dist/react/index.js.map +1 -1
  8. package/dist/react/index.mjs +240 -78
  9. package/dist/react/index.mjs.map +1 -1
  10. package/dist/vanilla/index.js +240 -78
  11. package/dist/vanilla/index.js.map +1 -1
  12. package/dist/vanilla/index.mjs +240 -78
  13. package/dist/vanilla/index.mjs.map +1 -1
  14. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -41,31 +41,77 @@ var import_react = require("react");
41
41
  // src/react/PeppermintChatbot/index.styles.ts
42
42
  var import_styled_components = __toESM(require("styled-components"));
43
43
  var Container = import_styled_components.default.div`
44
+ position: fixed;
45
+ bottom: 32px;
46
+ right: 32px;
47
+ width: fit-content;
48
+ height: fit-content;
49
+ display: flex;
50
+ flex-direction: column;
51
+ `;
52
+ var WidgetButton = import_styled_components.default.button`
53
+ width: 60px;
54
+ height: 60px;
55
+ border: none;
56
+ border-radius: 50%;
57
+ cursor: pointer;
58
+ padding: 0;
59
+ display: flex;
60
+ align-items: center;
61
+ justify-content: center;
62
+ color: #ffffff;
63
+ background: #1a1a1a;
64
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
65
+
66
+ transition: all 0.2s ease-in-out;
67
+
68
+ &:hover {
69
+ transform: scale(1.05);
70
+ }
71
+ `;
72
+ var ChatbotContainer = import_styled_components.default.div`
73
+ position: absolute;
74
+ bottom: calc(100% + 16px);
75
+ right: 0;
44
76
  box-sizing: border-box;
45
77
  background: #ffffff;
46
78
  width: 450px;
47
79
  height: 500px;
48
80
  min-height: 320px;
49
81
  max-height: 520px;
50
- border-radius: 24px;
82
+ border-radius: 20px 20px 24px 24px;
51
83
  border: 1px solid #e0e0e0;
52
84
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
53
85
  overflow: hidden;
54
-
86
+
55
87
  display: flex;
56
88
  flex-direction: column;
57
89
 
58
90
  font-family: system-ui, -apple-system, sans-serif;
59
91
  font-size: 14px;
60
92
  color: #1a1a1a;
93
+
94
+ opacity: ${(p) => p.$visible ? 1 : 0};
95
+ filter: ${(p) => p.$visible ? "blur(0)" : "blur(8px)"};
96
+ transition: opacity 0.3s ease-out, filter 0.3s ease-out;
97
+ pointer-events: ${(p) => p.$visible ? "auto" : "none"};
61
98
  `;
62
99
  var Header = import_styled_components.default.div`
100
+ position: relative;
63
101
  height: 44px;
64
102
  display: flex;
65
103
  justify-content: space-between;
66
104
  align-items: center;
67
105
  padding: 0 8px 0 16px;
68
106
  `;
107
+ var HeaderMarginBottom = import_styled_components.default.div`
108
+ position: absolute;
109
+ top: 100%;
110
+ left: 0;
111
+ right: 0;
112
+ height: 8px;
113
+ background: linear-gradient(to top, transparent, #ffffff);
114
+ `;
69
115
  var ChatbotName = import_styled_components.default.div`
70
116
  font-size: 14px;
71
117
  color: #1a1a1a;
@@ -90,11 +136,31 @@ var IconButton = import_styled_components.default.button`
90
136
  var MessageList = import_styled_components.default.div`
91
137
  flex: 1;
92
138
  overflow-y: auto;
139
+ overflow-x: hidden;
93
140
 
94
141
  display: flex;
95
142
  flex-direction: column;
96
143
  gap: 0.75rem;
97
144
  padding: 16px;
145
+
146
+ /* Firefox */
147
+ scrollbar-width: thin;
148
+ scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
149
+
150
+ /* WebKit (Chrome, Safari, Edge) */
151
+ &::-webkit-scrollbar {
152
+ width: 8px;
153
+ }
154
+ &::-webkit-scrollbar-track {
155
+ background: transparent;
156
+ }
157
+ &::-webkit-scrollbar-thumb {
158
+ background: rgba(0, 0, 0, 0.25);
159
+ border-radius: 4px;
160
+ }
161
+ &::-webkit-scrollbar-thumb:hover {
162
+ background: rgba(0, 0, 0, 0.35);
163
+ }
98
164
  `;
99
165
  var MessageBubble = import_styled_components.default.div`
100
166
  max-width: 85%;
@@ -109,28 +175,40 @@ var MessageBubble = import_styled_components.default.div`
109
175
  background: ${(p) => p.$role === "user" ? "#2d2d2d" : "#f0f0f0"};
110
176
  color: ${(p) => p.$role === "user" ? "#ffffff" : "#1a1a1a"};
111
177
  `;
178
+ var Footer = import_styled_components.default.div`
179
+ background-color: transparent;
180
+ position: relative;
181
+ `;
182
+ var InputContainerMarginTop = import_styled_components.default.div`
183
+ position: absolute;
184
+ top: -8px;
185
+ left: 0;
186
+ right: 0;
187
+ height: 8px;
188
+ background: linear-gradient(to bottom, transparent, #ffffff);
189
+ `;
112
190
  var InputContainer = import_styled_components.default.div`
191
+ position: relative;
113
192
  height: 90px;
114
193
  display: flex;
115
194
  flex-direction: column;
116
- border: 1px solid #e0e0e0;
195
+ justify-content: flex-end;
117
196
  border-radius: 16px;
197
+ border: 1px solid #e0e0e0;
118
198
  background: #ffffff;
119
- margin: 8px 16px 16px 16px;
120
- padding: 4px 4px 4px 16px;
121
-
199
+ margin: 8px 16px 0px 16px;
200
+
122
201
  &:focus-within {
123
202
  border-color: rgba(0, 0, 0, 0.3);
124
203
  }
125
204
  `;
126
205
  var Textarea = import_styled_components.default.textarea`
127
206
  flex: 1;
128
- min-width: 0;
129
- padding: 10px 0;
207
+ background-color: transparent;
208
+ margin: 8px 8px 8px 16px;
130
209
  border: none;
131
210
  font-size: 14px;
132
211
  outline: none;
133
- background: transparent;
134
212
  resize: none;
135
213
  min-height: 24px;
136
214
  max-height: 120px;
@@ -140,14 +218,42 @@ var Textarea = import_styled_components.default.textarea`
140
218
  &::placeholder {
141
219
  color: #888;
142
220
  }
221
+
222
+ /* Firefox */
223
+ scrollbar-width: thin;
224
+ scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
225
+
226
+ /* WebKit (Chrome, Safari, Edge) */
227
+ &::-webkit-scrollbar {
228
+ width: 8px;
229
+ }
230
+ &::-webkit-scrollbar-track {
231
+ background: transparent;
232
+ }
233
+ &::-webkit-scrollbar-thumb {
234
+ background: rgba(0, 0, 0, 0.25);
235
+ border-radius: 4px;
236
+ }
237
+ &::-webkit-scrollbar-thumb:hover {
238
+ background: rgba(0, 0, 0, 0.35);
239
+ }
240
+ `;
241
+ var InputContainerFooter = import_styled_components.default.div`
242
+ position: absolute;
243
+ bottom: 0;
244
+ right: 0;
245
+ height: 36px;
246
+ display: flex;
247
+ justify-content: flex-end;
248
+ align-items: center;
249
+ padding-left: 4px;
250
+ padding-right: 4px;
251
+ background-color: transparent;
143
252
  `;
144
253
  var SendButton = import_styled_components.default.button`
145
- flex-shrink: 0;
146
- align-self: flex-end;
147
254
  width: 28px;
148
255
  height: 28px;
149
256
  padding: 0;
150
- margin: 0 4px 4px 0;
151
257
  display: flex;
152
258
  align-items: center;
153
259
  justify-content: center;
@@ -166,13 +272,52 @@ var SendButton = import_styled_components.default.button`
166
272
  cursor: not-allowed;
167
273
  }
168
274
  `;
275
+ var PoweredBy = import_styled_components.default.a`
276
+ display: block;
277
+ font-size: 8px;
278
+ color: #888;
279
+ text-decoration: none;
280
+ padding: 4px 16px 4px 16px;
281
+ text-align: center;
282
+ cursor: pointer;
283
+
284
+ &:hover {
285
+ color: #1a1a1a;
286
+ }
287
+ `;
288
+
289
+ // src/assets/logo-transparent.png
290
+ var logo_transparent_default = "./logo-transparent-YUL3JUZA.png";
169
291
 
170
292
  // src/react/PeppermintChatbot/index.tsx
171
293
  var import_jsx_runtime = require("react/jsx-runtime");
294
+ var BLUR_FADE_MS = 200;
172
295
  function PeppermintChatbot() {
296
+ const [isOpen, setIsOpen] = (0, import_react.useState)(false);
297
+ const [isVisible, setIsVisible] = (0, import_react.useState)(false);
298
+ const [isTransitioningOpen, setIsTransitioningOpen] = (0, import_react.useState)(false);
173
299
  const [input, setInput] = (0, import_react.useState)("");
174
300
  const [messageList, setMessageList] = (0, import_react.useState)([]);
175
301
  const messagesEndRef = (0, import_react.useRef)(null);
302
+ (0, import_react.useEffect)(() => {
303
+ if (isOpen) {
304
+ setIsVisible(true);
305
+ let cancelled = false;
306
+ const id = requestAnimationFrame(() => {
307
+ requestAnimationFrame(() => {
308
+ if (!cancelled) setIsTransitioningOpen(true);
309
+ });
310
+ });
311
+ return () => {
312
+ cancelled = true;
313
+ cancelAnimationFrame(id);
314
+ };
315
+ } else {
316
+ setIsTransitioningOpen(false);
317
+ const id = window.setTimeout(() => setIsVisible(false), BLUR_FADE_MS);
318
+ return () => clearTimeout(id);
319
+ }
320
+ }, [isOpen]);
176
321
  (0, import_react.useEffect)(() => {
177
322
  messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
178
323
  }, [messageList]);
@@ -189,75 +334,92 @@ function PeppermintChatbot() {
189
334
  setInput("");
190
335
  };
191
336
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { children: [
192
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Header, { children: [
193
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatbotName, { children: "Peppermint Chatbot" }),
194
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButton, { type: "button", "aria-label": "Minimize", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
195
- "svg",
196
- {
197
- width: "20",
198
- height: "20",
199
- viewBox: "0 0 24 24",
200
- fill: "none",
201
- stroke: "currentColor",
202
- strokeWidth: "2",
203
- strokeLinecap: "round",
204
- strokeLinejoin: "round",
205
- "aria-hidden": true,
206
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" })
207
- }
208
- ) })
209
- ] }),
210
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MessageList, { children: [
211
- messageList.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageBubble, { $role: msg.role, children: msg.content }, msg.id)),
212
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: messagesEndRef })
213
- ] }),
214
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputContainer, { children: [
215
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
216
- Textarea,
217
- {
218
- placeholder: "Type a message...",
219
- value: input,
220
- onChange: (e) => setInput(e.target.value),
221
- onKeyDown: (e) => {
222
- if (e.key === "Enter" && !e.nativeEvent.isComposing) {
223
- if (!e.shiftKey) {
224
- e.preventDefault();
225
- handleSend();
226
- }
337
+ isVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ChatbotContainer, { $visible: isOpen && isTransitioningOpen, children: [
338
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Header, { children: [
339
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatbotName, { children: "Peppermint Chatbot" }),
340
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButton, { type: "button", "aria-label": "Minimize", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
341
+ "svg",
342
+ {
343
+ width: "20",
344
+ height: "20",
345
+ viewBox: "0 0 24 24",
346
+ fill: "none",
347
+ stroke: "currentColor",
348
+ strokeWidth: "2",
349
+ strokeLinecap: "round",
350
+ strokeLinejoin: "round",
351
+ "aria-hidden": true,
352
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" })
353
+ }
354
+ ) }),
355
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderMarginBottom, {})
356
+ ] }),
357
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MessageList, { children: [
358
+ messageList.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageBubble, { $role: msg.role, children: msg.content }, msg.id)),
359
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: messagesEndRef })
360
+ ] }),
361
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Footer, { children: [
362
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputContainerMarginTop, {}),
363
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputContainer, { children: [
364
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
365
+ Textarea,
366
+ {
367
+ placeholder: "Type a message...",
368
+ value: input,
369
+ onChange: (e) => setInput(e.target.value),
370
+ onKeyDown: (e) => {
371
+ if (e.key === "Enter" && !e.nativeEvent.isComposing) {
372
+ if (!e.shiftKey) {
373
+ e.preventDefault();
374
+ handleSend();
375
+ }
376
+ }
377
+ },
378
+ rows: 1,
379
+ "aria-label": "Message"
227
380
  }
228
- },
229
- rows: 1,
230
- "aria-label": "Message"
231
- }
232
- ),
233
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
234
- SendButton,
235
- {
236
- type: "button",
237
- onClick: handleSend,
238
- disabled: !input.trim(),
239
- "aria-label": "Send",
240
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
241
- "svg",
381
+ ),
382
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputContainerFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
383
+ SendButton,
242
384
  {
243
- width: "16",
244
- height: "16",
245
- viewBox: "0 0 24 24",
246
- fill: "none",
247
- stroke: "currentColor",
248
- strokeWidth: "2.5",
249
- strokeLinecap: "round",
250
- strokeLinejoin: "round",
251
- "aria-hidden": true,
252
- children: [
253
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 19V5" }),
254
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12l7-7 7 7" })
255
- ]
385
+ type: "button",
386
+ onClick: handleSend,
387
+ disabled: !input.trim(),
388
+ "aria-label": "Send",
389
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
390
+ "svg",
391
+ {
392
+ width: "16",
393
+ height: "16",
394
+ viewBox: "0 0 24 24",
395
+ fill: "none",
396
+ stroke: "currentColor",
397
+ strokeWidth: "2.5",
398
+ strokeLinecap: "round",
399
+ strokeLinejoin: "round",
400
+ "aria-hidden": true,
401
+ children: [
402
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 19V5" }),
403
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12l7-7 7 7" })
404
+ ]
405
+ }
406
+ )
256
407
  }
257
- )
258
- }
259
- )
260
- ] })
408
+ ) })
409
+ ] }),
410
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PoweredBy, { href: "", target: "_blank", rel: "noopener noreferrer", children: "Powered by Peppermint Chatbot" })
411
+ ] })
412
+ ] }),
413
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WidgetButton, { onClick: () => setIsOpen((prev) => !prev), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
414
+ "img",
415
+ {
416
+ src: logo_transparent_default,
417
+ alt: "Peppermint Chatbot",
418
+ width: 60,
419
+ height: 60,
420
+ draggable: false
421
+ }
422
+ ) })
261
423
  ] });
262
424
  }
263
425
 
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/react/PeppermintChatbot/index.tsx","../src/react/PeppermintChatbot/index.styles.ts","../src/vanilla/index.ts"],"sourcesContent":["export { PeppermintChatbot } from \"./react\";\nexport { createChatbot } from \"./vanilla\";\n","import { useState, useRef, useEffect } from \"react\";\nimport {\n Container,\n MessageList,\n MessageBubble,\n InputContainer,\n Textarea,\n SendButton,\n Header,\n ChatbotName,\n IconButton,\n} from \"./index.styles\";\nimport type { Message } from \"./index.types\";\n\nfunction PeppermintChatbot() {\n const [input, setInput] = useState(\"\");\n const [messageList, setMessageList] = useState<Message[]>([]);\n\n const messagesEndRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messageList]);\n\n const handleSend = () => {\n const text = input.trim();\n\n if (!text) return;\n\n const userMessage: Message = {\n id: `u-${Date.now()}`,\n role: \"user\",\n content: text,\n timestamp: new Date().toISOString(),\n };\n\n setMessageList((prev) => [...prev, userMessage]);\n setInput(\"\");\n };\n\n return (\n <Container>\n <Header>\n <ChatbotName>Peppermint Chatbot</ChatbotName>\n <IconButton type=\"button\" aria-label=\"Minimize\">\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden\n >\n <path d=\"M5 12h14\" />\n </svg>\n </IconButton>\n </Header>\n\n <MessageList>\n {messageList.map((msg) => (\n <MessageBubble key={msg.id} $role={msg.role}>\n {msg.content}\n </MessageBubble>\n ))}\n\n <div ref={messagesEndRef} />\n </MessageList>\n\n <InputContainer>\n <Textarea\n placeholder=\"Type a message...\"\n value={input}\n onChange={(e) => setInput(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !e.nativeEvent.isComposing) {\n if (!e.shiftKey) {\n e.preventDefault();\n handleSend();\n }\n }\n }}\n rows={1}\n aria-label=\"Message\"\n />\n <SendButton\n type=\"button\"\n onClick={handleSend}\n disabled={!input.trim()}\n aria-label=\"Send\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden\n >\n <path d=\"M12 19V5\" />\n <path d=\"M5 12l7-7 7 7\" />\n </svg>\n </SendButton>\n </InputContainer>\n </Container>\n );\n}\n\nexport { PeppermintChatbot };\n","import styled from \"styled-components\";\nimport type { ComponentType } from \"react\";\nimport type { Role } from \"./index.types\";\n\nconst Container: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n box-sizing: border-box;\n background: #ffffff;\n width: 450px;\n height: 500px;\n min-height: 320px;\n max-height: 520px;\n border-radius: 24px;\n border: 1px solid #e0e0e0;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);\n overflow: hidden;\n \n display: flex;\n flex-direction: column;\n\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 14px;\n color: #1a1a1a;\n`;\n\nconst Header: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n height: 44px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 8px 0 16px;\n`;\n\nconst ChatbotName: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n font-size: 14px;\n color: #1a1a1a;\n`;\n\nconst IconButton: ComponentType<\n React.ButtonHTMLAttributes<HTMLButtonElement>\n> = styled.button`\n width: 32px;\n height: 32px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #1a1a1a;\n background: transparent;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n\n &:hover {\n background: rgba(0, 0, 0, 0.06);\n }\n`;\n\nconst MessageList: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n flex: 1;\n overflow-y: auto;\n\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: 16px;\n`;\n\nconst MessageBubble: ComponentType<React.HTMLAttributes<HTMLDivElement> & { $role: Role }> = styled.div`\n max-width: 85%;\n border-radius: 12px;\n\n padding: 0.6rem 1rem;\n \n word-break: break-word;\n line-height: 1.45;\n\n align-self: ${(p) => (p.$role === \"user\" ? \"flex-end\" : \"flex-start\")};\n background: ${(p) => (p.$role === \"user\" ? \"#2d2d2d\" : \"#f0f0f0\")};\n color: ${(p) => (p.$role === \"user\" ? \"#ffffff\" : \"#1a1a1a\")};\n`;\n\nconst InputContainer: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n height: 90px;\n display: flex;\n flex-direction: column;\n border: 1px solid #e0e0e0;\n border-radius: 16px;\n background: #ffffff;\n margin: 8px 16px 16px 16px;\n padding: 4px 4px 4px 16px;\n\n &:focus-within {\n border-color: rgba(0, 0, 0, 0.3);\n }\n`;\n\nconst Textarea: ComponentType<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>\n> = styled.textarea`\n flex: 1;\n min-width: 0;\n padding: 10px 0;\n border: none;\n font-size: 14px;\n outline: none;\n background: transparent;\n resize: none;\n min-height: 24px;\n max-height: 120px;\n line-height: 1.4;\n font-family: inherit;\n\n &::placeholder {\n color: #888;\n }\n`;\n\nconst SendButton: ComponentType<\n React.ButtonHTMLAttributes<HTMLButtonElement>\n> = styled.button`\n flex-shrink: 0;\n align-self: flex-end;\n width: 28px;\n height: 28px;\n padding: 0;\n margin: 0 4px 4px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n background: #1a1a1a;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover:not(:disabled) {\n opacity: 0.9;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n`;\n\nexport {\n Container,\n Header,\n ChatbotName,\n IconButton,\n MessageList,\n MessageBubble,\n InputContainer,\n Textarea,\n SendButton,\n};\n","import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { PeppermintChatbot } from \"../react\";\n\n/**\n * Mount the chatbot into a container (vanilla JS, Vue, Svelte).\n * Requires react and react-dom to be available (e.g. via script or bundler).\n */\nexport function createChatbot(\n container: HTMLElement,\n props: {\n /** Layout: \"widget\" (bubble) or \"page\" (full card) */\n layout?: \"widget\" | \"page\";\n /** Chatbot display name */\n chatbotName?: string;\n /** Greeting message shown when chat is empty */\n greetingMessage?: string;\n /** Optional chatbot avatar URL */\n chatbotProfileImage?: string;\n /** Optional user avatar URL */\n userProfileImage?: string;\n /** Background color (hex) */\n backgroundColor?: string;\n /** Font color (hex) */\n fontColor?: string;\n /** Chatbot bubble color (hex) */\n chatbotBubbleColor?: string;\n /** User bubble color (hex) */\n userBubbleColor?: string;\n /** Initial messages (e.g. from API) */\n initialMessages?: {\n id: string;\n role: \"user\" | \"assistant\";\n content: string;\n timestamp?: string;\n }[];\n /** Callback when user sends a message */\n onSendMessage?: (content: string) => void;\n /** Optional class name for the root container */\n className?: string;\n } = {}\n): { unmount: () => void } {\n const root = createRoot(container);\n root.render(React.createElement(PeppermintChatbot, props));\n return {\n unmount: () => root.unmount(),\n };\n}\n\n"],"mappings":"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","names":["styled","import_react","React"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/react/PeppermintChatbot/index.tsx","../src/react/PeppermintChatbot/index.styles.ts","../src/vanilla/index.ts"],"sourcesContent":["export { PeppermintChatbot } from \"./react\";\nexport { createChatbot } from \"./vanilla\";\n","import { useState, useRef, useEffect } from \"react\";\nimport {\n ChatbotContainer,\n MessageList,\n MessageBubble,\n InputContainer,\n Textarea,\n SendButton,\n Header,\n ChatbotName,\n IconButton,\n PoweredBy,\n Footer,\n InputContainerFooter,\n InputContainerMarginTop,\n HeaderMarginBottom,\n WidgetButton,\n Container,\n} from \"./index.styles\";\nimport type { Message } from \"./index.types\";\nimport LogoTransparent from \"../../assets/logo-transparent.png\";\n\nconst BLUR_FADE_MS = 200;\n\nfunction PeppermintChatbot() {\n const [isOpen, setIsOpen] = useState(false);\n const [isVisible, setIsVisible] = useState(false);\n const [isTransitioningOpen, setIsTransitioningOpen] = useState(false);\n const [input, setInput] = useState(\"\");\n const [messageList, setMessageList] = useState<Message[]>([]);\n\n const messagesEndRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (isOpen) {\n setIsVisible(true);\n let cancelled = false;\n const id = requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (!cancelled) setIsTransitioningOpen(true);\n });\n });\n return () => {\n cancelled = true;\n cancelAnimationFrame(id);\n };\n } else {\n setIsTransitioningOpen(false);\n const id = window.setTimeout(() => setIsVisible(false), BLUR_FADE_MS);\n return () => clearTimeout(id);\n }\n }, [isOpen]);\n\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messageList]);\n\n const handleSend = () => {\n const text = input.trim();\n\n if (!text) return;\n\n const userMessage: Message = {\n id: `u-${Date.now()}`,\n role: \"user\",\n content: text,\n timestamp: new Date().toISOString(),\n };\n\n setMessageList((prev) => [...prev, userMessage]);\n setInput(\"\");\n };\n\n return (\n <Container>\n {isVisible && (\n <ChatbotContainer $visible={isOpen && isTransitioningOpen}>\n <Header>\n <ChatbotName>Peppermint Chatbot</ChatbotName>\n <IconButton type=\"button\" aria-label=\"Minimize\">\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden\n >\n <path d=\"M5 12h14\" />\n </svg>\n </IconButton>\n <HeaderMarginBottom />\n </Header>\n\n <MessageList>\n {messageList.map((msg) => (\n <MessageBubble key={msg.id} $role={msg.role}>\n {msg.content}\n </MessageBubble>\n ))}\n\n <div ref={messagesEndRef} />\n </MessageList>\n\n <Footer>\n <InputContainerMarginTop />\n <InputContainer>\n <Textarea\n placeholder=\"Type a message...\"\n value={input}\n onChange={(e) => setInput(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !e.nativeEvent.isComposing) {\n if (!e.shiftKey) {\n e.preventDefault();\n handleSend();\n }\n }\n }}\n rows={1}\n aria-label=\"Message\"\n />\n\n <InputContainerFooter>\n <SendButton\n type=\"button\"\n onClick={handleSend}\n disabled={!input.trim()}\n aria-label=\"Send\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden\n >\n <path d=\"M12 19V5\" />\n <path d=\"M5 12l7-7 7 7\" />\n </svg>\n </SendButton>\n </InputContainerFooter>\n </InputContainer>\n\n <PoweredBy href=\"\" target=\"_blank\" rel=\"noopener noreferrer\">\n Powered by Peppermint Chatbot\n </PoweredBy>\n </Footer>\n </ChatbotContainer>\n )}\n\n <WidgetButton onClick={() => setIsOpen((prev) => !prev)}>\n <img\n src={LogoTransparent}\n alt=\"Peppermint Chatbot\"\n width={60}\n height={60}\n draggable={false}\n />\n </WidgetButton>\n </Container>\n );\n}\n\nexport { PeppermintChatbot };\n","import styled from \"styled-components\";\nimport type { ComponentType } from \"react\";\nimport type { Role } from \"./index.types\";\n\nconst Container: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n position: fixed;\n bottom: 32px;\n right: 32px;\n width: fit-content;\n height: fit-content;\n display: flex;\n flex-direction: column;\n`;\n\nconst WidgetButton: ComponentType<React.HTMLAttributes<HTMLButtonElement>> = styled.button`\n width: 60px;\n height: 60px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffffff;\n background: #1a1a1a;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);\n\n transition: all 0.2s ease-in-out;\n\n &:hover {\n transform: scale(1.05);\n }\n`;\n\nconst ChatbotContainer: ComponentType<\n React.HTMLAttributes<HTMLDivElement> & { $visible?: boolean }\n> = styled.div<{ $visible?: boolean }>`\n position: absolute;\n bottom: calc(100% + 16px);\n right: 0;\n box-sizing: border-box;\n background: #ffffff;\n width: 450px;\n height: 500px;\n min-height: 320px;\n max-height: 520px;\n border-radius: 20px 20px 24px 24px;\n border: 1px solid #e0e0e0;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);\n overflow: hidden;\n\n display: flex;\n flex-direction: column;\n\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 14px;\n color: #1a1a1a;\n\n opacity: ${(p) => (p.$visible ? 1 : 0)};\n filter: ${(p) => (p.$visible ? \"blur(0)\" : \"blur(8px)\")};\n transition: opacity 0.3s ease-out, filter 0.3s ease-out;\n pointer-events: ${(p) => (p.$visible ? \"auto\" : \"none\")};\n`;\n\nconst Header: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n position: relative;\n height: 44px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 8px 0 16px;\n`;\n\nconst HeaderMarginBottom: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n height: 8px;\n background: linear-gradient(to top, transparent, #ffffff);\n`;\n\nconst ChatbotName: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n font-size: 14px;\n color: #1a1a1a;\n`;\n\nconst IconButton: ComponentType<\n React.ButtonHTMLAttributes<HTMLButtonElement>\n> = styled.button`\n width: 32px;\n height: 32px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #1a1a1a;\n background: transparent;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n\n &:hover {\n background: rgba(0, 0, 0, 0.06);\n }\n`;\n\nconst MessageList: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: 16px;\n\n /* Firefox */\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.25) transparent;\n\n /* WebKit (Chrome, Safari, Edge) */\n &::-webkit-scrollbar {\n width: 8px;\n }\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.25);\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.35);\n }\n`;\n\nconst MessageBubble: ComponentType<React.HTMLAttributes<HTMLDivElement> & { $role: Role }> = styled.div`\n max-width: 85%;\n border-radius: 12px;\n\n padding: 0.6rem 1rem;\n \n word-break: break-word;\n line-height: 1.45;\n\n align-self: ${(p) => (p.$role === \"user\" ? \"flex-end\" : \"flex-start\")};\n background: ${(p) => (p.$role === \"user\" ? \"#2d2d2d\" : \"#f0f0f0\")};\n color: ${(p) => (p.$role === \"user\" ? \"#ffffff\" : \"#1a1a1a\")};\n`;\n\nconst Footer: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n background-color: transparent;\n position: relative;\n`;\n\nconst InputContainerMarginTop: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n position: absolute;\n top: -8px;\n left: 0;\n right: 0;\n height: 8px;\n background: linear-gradient(to bottom, transparent, #ffffff);\n`;\n\nconst InputContainer: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n position: relative;\n height: 90px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n border-radius: 16px;\n border: 1px solid #e0e0e0;\n background: #ffffff;\n margin: 8px 16px 0px 16px;\n \n &:focus-within {\n border-color: rgba(0, 0, 0, 0.3);\n }\n`;\n\nconst Textarea: ComponentType<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>\n> = styled.textarea`\n flex: 1;\n background-color: transparent;\n margin: 8px 8px 8px 16px;\n border: none;\n font-size: 14px;\n outline: none;\n resize: none;\n min-height: 24px;\n max-height: 120px;\n line-height: 1.4;\n font-family: inherit;\n\n &::placeholder {\n color: #888;\n }\n\n /* Firefox */\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.25) transparent;\n\n /* WebKit (Chrome, Safari, Edge) */\n &::-webkit-scrollbar {\n width: 8px;\n }\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.25);\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.35);\n }\n`;\n\nconst InputContainerFooter: ComponentType<React.HTMLAttributes<HTMLDivElement>> = styled.div`\n position: absolute;\n bottom: 0;\n right: 0;\n height: 36px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding-left: 4px;\n padding-right: 4px;\n background-color: transparent;\n`;\n\nconst SendButton: ComponentType<\n React.ButtonHTMLAttributes<HTMLButtonElement>\n> = styled.button`\n width: 28px;\n height: 28px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n background: #1a1a1a;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover:not(:disabled) {\n opacity: 0.9;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n`;\n\nconst PoweredBy: ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement>> = styled.a`\n display: block;\n font-size: 8px;\n color: #888;\n text-decoration: none;\n padding: 4px 16px 4px 16px;\n text-align: center;\n cursor: pointer;\n\n &:hover {\n color: #1a1a1a;\n }\n`;\n\nexport {\n Container,\n WidgetButton,\n ChatbotContainer,\n Header,\n HeaderMarginBottom,\n ChatbotName,\n IconButton,\n MessageList,\n MessageBubble,\n Footer,\n InputContainerMarginTop,\n InputContainer,\n Textarea,\n InputContainerFooter,\n SendButton,\n PoweredBy,\n};\n","import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { PeppermintChatbot } from \"../react\";\n\n/**\n * Mount the chatbot into a container (vanilla JS, Vue, Svelte).\n * Requires react and react-dom to be available (e.g. via script or bundler).\n */\nexport function createChatbot(\n container: HTMLElement,\n props: {\n /** Layout: \"widget\" (bubble) or \"page\" (full card) */\n layout?: \"widget\" | \"page\";\n /** Chatbot display name */\n chatbotName?: string;\n /** Greeting message shown when chat is empty */\n greetingMessage?: string;\n /** Optional chatbot avatar URL */\n chatbotProfileImage?: string;\n /** Optional user avatar URL */\n userProfileImage?: string;\n /** Background color (hex) */\n backgroundColor?: string;\n /** Font color (hex) */\n fontColor?: string;\n /** Chatbot bubble color (hex) */\n chatbotBubbleColor?: string;\n /** User bubble color (hex) */\n userBubbleColor?: string;\n /** Initial messages (e.g. from API) */\n initialMessages?: {\n id: string;\n role: \"user\" | \"assistant\";\n content: string;\n timestamp?: string;\n }[];\n /** Callback when user sends a message */\n onSendMessage?: (content: string) => void;\n /** Optional class name for the root container */\n className?: string;\n } = {}\n): { unmount: () => void } {\n const root = createRoot(container);\n root.render(React.createElement(PeppermintChatbot, props));\n return {\n unmount: () => root.unmount(),\n };\n}\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA4C;;;ACA5C,+BAAmB;AAInB,IAAM,YAAiE,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU9E,IAAM,eAAuE,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBpF,IAAM,mBAEF,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAsBE,CAAC,MAAO,EAAE,WAAW,IAAI,CAAE;AAAA,YAC5B,CAAC,MAAO,EAAE,WAAW,YAAY,WAAY;AAAA;AAAA,oBAErC,CAAC,MAAO,EAAE,WAAW,SAAS,MAAO;AAAA;AAGzD,IAAM,SAA8D,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3E,IAAM,qBAA0E,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvF,IAAM,cAAmE,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAKhF,IAAM,aAEF,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBX,IAAM,cAAmE,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BhF,IAAM,gBAAuF,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASpF,CAAC,MAAO,EAAE,UAAU,SAAS,aAAa,YAAa;AAAA,gBACvD,CAAC,MAAO,EAAE,UAAU,SAAS,YAAY,SAAU;AAAA,WACxD,CAAC,MAAO,EAAE,UAAU,SAAS,YAAY,SAAU;AAAA;AAG9D,IAAM,SAA8D,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAK3E,IAAM,0BAA+E,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS5F,IAAM,iBAAsE,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBnF,IAAM,WAEF,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCX,IAAM,uBAA4E,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAazF,IAAM,aAEF,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX,IAAM,YAA0E,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A;;;;;ADtL7E;AAvDV,IAAM,eAAe;AAErB,SAAS,oBAAoB;AAC3B,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAAS,KAAK;AACpE,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAoB,CAAC,CAAC;AAE5D,QAAM,qBAAiB,qBAAuB,IAAI;AAElD,8BAAU,MAAM;AACd,QAAI,QAAQ;AACV,mBAAa,IAAI;AACjB,UAAI,YAAY;AAChB,YAAM,KAAK,sBAAsB,MAAM;AACrC,8BAAsB,MAAM;AAC1B,cAAI,CAAC,UAAW,wBAAuB,IAAI;AAAA,QAC7C,CAAC;AAAA,MACH,CAAC;AACD,aAAO,MAAM;AACX,oBAAY;AACZ,6BAAqB,EAAE;AAAA,MACzB;AAAA,IACF,OAAO;AACL,6BAAuB,KAAK;AAC5B,YAAM,KAAK,OAAO,WAAW,MAAM,aAAa,KAAK,GAAG,YAAY;AACpE,aAAO,MAAM,aAAa,EAAE;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,8BAAU,MAAM;AACd,mBAAe,SAAS,eAAe,EAAE,UAAU,SAAS,CAAC;AAAA,EAC/D,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,aAAa,MAAM;AACvB,UAAM,OAAO,MAAM,KAAK;AAExB,QAAI,CAAC,KAAM;AAEX,UAAM,cAAuB;AAAA,MAC3B,IAAI,KAAK,KAAK,IAAI,CAAC;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,MACT,YAAW,oBAAI,KAAK,GAAE,YAAY;AAAA,IACpC;AAEA,mBAAe,CAAC,SAAS,CAAC,GAAG,MAAM,WAAW,CAAC;AAC/C,aAAS,EAAE;AAAA,EACb;AAEA,SACE,6CAAC,aACE;AAAA,iBACC,6CAAC,oBAAiB,UAAU,UAAU,qBACpC;AAAA,mDAAC,UACC;AAAA,oDAAC,eAAY,gCAAkB;AAAA,QAC/B,4CAAC,cAAW,MAAK,UAAS,cAAW,YACnC;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,eAAc;AAAA,YACd,gBAAe;AAAA,YACf,eAAW;AAAA,YAEX,sDAAC,UAAK,GAAE,YAAW;AAAA;AAAA,QACrB,GACF;AAAA,QACA,4CAAC,sBAAmB;AAAA,SACtB;AAAA,MAEA,6CAAC,eACE;AAAA,oBAAY,IAAI,CAAC,QAChB,4CAAC,iBAA2B,OAAO,IAAI,MACpC,cAAI,WADa,IAAI,EAExB,CACD;AAAA,QAED,4CAAC,SAAI,KAAK,gBAAgB;AAAA,SAC5B;AAAA,MAEA,6CAAC,UACC;AAAA,oDAAC,2BAAwB;AAAA,QACzB,6CAAC,kBACC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,aAAY;AAAA,cACZ,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,cACxC,WAAW,CAAC,MAAM;AAChB,oBAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,YAAY,aAAa;AACnD,sBAAI,CAAC,EAAE,UAAU;AACf,sBAAE,eAAe;AACjB,+BAAW;AAAA,kBACb;AAAA,gBACF;AAAA,cACF;AAAA,cACA,MAAM;AAAA,cACN,cAAW;AAAA;AAAA,UACb;AAAA,UAEA,4CAAC,wBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,UAAU,CAAC,MAAM,KAAK;AAAA,cACtB,cAAW;AAAA,cAEX;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,aAAY;AAAA,kBACZ,eAAc;AAAA,kBACd,gBAAe;AAAA,kBACf,eAAW;AAAA,kBAEX;AAAA,gEAAC,UAAK,GAAE,YAAW;AAAA,oBACnB,4CAAC,UAAK,GAAE,iBAAgB;AAAA;AAAA;AAAA,cAC1B;AAAA;AAAA,UACF,GACF;AAAA,WACF;AAAA,QAEA,4CAAC,aAAU,MAAK,IAAG,QAAO,UAAS,KAAI,uBAAsB,2CAE7D;AAAA,SACF;AAAA,OACF;AAAA,IAGF,4CAAC,gBAAa,SAAS,MAAM,UAAU,CAAC,SAAS,CAAC,IAAI,GACpD;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,KAAI;AAAA,QACJ,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KACF;AAEJ;;;AEzKA,IAAAC,gBAAkB;AAClB,oBAA2B;AAOpB,SAAS,cACd,WACA,QA8BI,CAAC,GACoB;AACzB,QAAM,WAAO,0BAAW,SAAS;AACjC,OAAK,OAAO,cAAAC,QAAM,cAAc,mBAAmB,KAAK,CAAC;AACzD,SAAO;AAAA,IACL,SAAS,MAAM,KAAK,QAAQ;AAAA,EAC9B;AACF;","names":["styled","import_react","React"]}