@shapesos/clay 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chat.cjs +84 -354
- package/dist/chat.cjs.map +1 -1
- package/dist/chat.d.cts +13 -24
- package/dist/chat.d.ts +13 -24
- package/dist/chat.js +10 -4
- package/dist/chunk-72TJUKMV.js +1 -0
- package/dist/{chunk-P7NISN4V.js → chunk-AEXYOY5H.js} +11 -11
- package/dist/chunk-AEXYOY5H.js.map +1 -0
- package/dist/{chunk-UKM5VQKW.js → chunk-BIATJTD4.js} +5 -5
- package/dist/chunk-BIATJTD4.js.map +1 -0
- package/dist/chunk-EPS4LOOW.js +339 -0
- package/dist/chunk-EPS4LOOW.js.map +1 -0
- package/dist/icon.cjs +12 -12
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.js +2 -2
- package/dist/index.cjs +162 -386
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +14 -5
- package/dist/index.d.ts +14 -5
- package/dist/index.js +69 -19
- package/dist/index.js.map +1 -1
- package/dist/lottie.cjs +5 -5
- package/dist/lottie.cjs.map +1 -1
- package/dist/lottie.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-2GFOESHR.js +0 -613
- package/dist/chunk-2GFOESHR.js.map +0 -1
- package/dist/chunk-7AJSQJQ5.js +0 -1
- package/dist/chunk-P7NISN4V.js.map +0 -1
- package/dist/chunk-UKM5VQKW.js.map +0 -1
- /package/dist/{chunk-7AJSQJQ5.js.map → chunk-72TJUKMV.js.map} +0 -0
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
import {
|
|
2
|
+
typographyMixin,
|
|
3
|
+
typographyTypes
|
|
4
|
+
} from "./chunk-A6DKIFWS.js";
|
|
5
|
+
import {
|
|
6
|
+
IconButton
|
|
7
|
+
} from "./chunk-AEXYOY5H.js";
|
|
8
|
+
import {
|
|
9
|
+
colors
|
|
10
|
+
} from "./chunk-6HNZQ2BF.js";
|
|
11
|
+
|
|
12
|
+
// src/chat/chat-message-content/chat-message-content.tsx
|
|
13
|
+
import ReactMarkdown from "react-markdown";
|
|
14
|
+
import remarkGfm from "remark-gfm";
|
|
15
|
+
|
|
16
|
+
// src/chat/chat-message-content/chat-message-content-styles.ts
|
|
17
|
+
import styled from "styled-components";
|
|
18
|
+
var ContentWrapper = styled.div`
|
|
19
|
+
${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
|
|
20
|
+
color: ${colors["brown-100"]};
|
|
21
|
+
word-break: break-word;
|
|
22
|
+
|
|
23
|
+
& p {
|
|
24
|
+
margin: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
& p + p {
|
|
28
|
+
margin-top: 8px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
& ul,
|
|
32
|
+
& ol {
|
|
33
|
+
margin: 4px 0;
|
|
34
|
+
padding-left: 20px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
& a {
|
|
38
|
+
color: ${colors["brown-100"]};
|
|
39
|
+
text-decoration: underline;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
& pre {
|
|
43
|
+
overflow-x: auto;
|
|
44
|
+
padding: 8px;
|
|
45
|
+
margin: 4px 0;
|
|
46
|
+
background: ${colors["brown-10"]};
|
|
47
|
+
border: 1px solid ${colors["brown-alpha-12"]};
|
|
48
|
+
border-radius: 8px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
& pre code {
|
|
52
|
+
padding: 0;
|
|
53
|
+
background: none;
|
|
54
|
+
border-radius: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
& code {
|
|
58
|
+
padding: 2px 4px;
|
|
59
|
+
background: ${colors["brown-10"]};
|
|
60
|
+
border-radius: 4px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
& table {
|
|
64
|
+
border-collapse: collapse;
|
|
65
|
+
margin: 8px 0;
|
|
66
|
+
width: 100%;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
& th,
|
|
70
|
+
& td {
|
|
71
|
+
border: 1px solid ${colors["brown-alpha-12"]};
|
|
72
|
+
padding: 6px 12px;
|
|
73
|
+
text-align: left;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
& th {
|
|
77
|
+
background: ${colors["brown-10"]};
|
|
78
|
+
font-weight: 600;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
& blockquote {
|
|
82
|
+
margin: 4px 0;
|
|
83
|
+
padding-left: 12px;
|
|
84
|
+
border-left: 3px solid ${colors["brown-30"]};
|
|
85
|
+
color: ${colors["brown-70"]};
|
|
86
|
+
}
|
|
87
|
+
`;
|
|
88
|
+
|
|
89
|
+
// src/chat/chat-message-content/chat-message-content.tsx
|
|
90
|
+
import { jsx } from "react/jsx-runtime";
|
|
91
|
+
function ChatMessageContent({ content }) {
|
|
92
|
+
return /* @__PURE__ */ jsx(ContentWrapper, { children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: content }) });
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// src/chat/chat-message-actions/chat-message-actions.tsx
|
|
96
|
+
import { useCallback as useCallback2 } from "react";
|
|
97
|
+
|
|
98
|
+
// node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
|
|
99
|
+
import { forwardRef, createElement } from "react";
|
|
100
|
+
|
|
101
|
+
// node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
|
|
102
|
+
var defaultAttributes = {
|
|
103
|
+
outline: {
|
|
104
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
105
|
+
width: 24,
|
|
106
|
+
height: 24,
|
|
107
|
+
viewBox: "0 0 24 24",
|
|
108
|
+
fill: "none",
|
|
109
|
+
stroke: "currentColor",
|
|
110
|
+
strokeWidth: 2,
|
|
111
|
+
strokeLinecap: "round",
|
|
112
|
+
strokeLinejoin: "round"
|
|
113
|
+
},
|
|
114
|
+
filled: {
|
|
115
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
116
|
+
width: 24,
|
|
117
|
+
height: 24,
|
|
118
|
+
viewBox: "0 0 24 24",
|
|
119
|
+
fill: "currentColor",
|
|
120
|
+
stroke: "none"
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
// node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
|
|
125
|
+
var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
|
|
126
|
+
const Component = forwardRef(
|
|
127
|
+
({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => createElement(
|
|
128
|
+
"svg",
|
|
129
|
+
{
|
|
130
|
+
ref,
|
|
131
|
+
...defaultAttributes[type],
|
|
132
|
+
width: size,
|
|
133
|
+
height: size,
|
|
134
|
+
className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(" "),
|
|
135
|
+
...type === "filled" ? {
|
|
136
|
+
fill: color
|
|
137
|
+
} : {
|
|
138
|
+
strokeWidth: stroke,
|
|
139
|
+
stroke: color
|
|
140
|
+
},
|
|
141
|
+
...rest
|
|
142
|
+
},
|
|
143
|
+
[
|
|
144
|
+
title && createElement("title", { key: "svg-title" }, title),
|
|
145
|
+
...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
|
|
146
|
+
...Array.isArray(children) ? children : [children]
|
|
147
|
+
]
|
|
148
|
+
)
|
|
149
|
+
);
|
|
150
|
+
Component.displayName = `${iconNamePascal}`;
|
|
151
|
+
return Component;
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
// node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs
|
|
155
|
+
var __iconNode = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
|
|
156
|
+
var IconCheck = createReactComponent("outline", "check", "Check", __iconNode);
|
|
157
|
+
|
|
158
|
+
// node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.mjs
|
|
159
|
+
var __iconNode2 = [["path", { "d": "M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666", "key": "svg-0" }], ["path", { "d": "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", "key": "svg-1" }]];
|
|
160
|
+
var IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode2);
|
|
161
|
+
|
|
162
|
+
// node_modules/@tabler/icons-react/dist/esm/icons/IconThumbDown.mjs
|
|
163
|
+
var __iconNode3 = [["path", { "d": "M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3", "key": "svg-0" }]];
|
|
164
|
+
var IconThumbDown = createReactComponent("outline", "thumb-down", "ThumbDown", __iconNode3);
|
|
165
|
+
|
|
166
|
+
// node_modules/@tabler/icons-react/dist/esm/icons/IconThumbUp.mjs
|
|
167
|
+
var __iconNode4 = [["path", { "d": "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3", "key": "svg-0" }]];
|
|
168
|
+
var IconThumbUp = createReactComponent("outline", "thumb-up", "ThumbUp", __iconNode4);
|
|
169
|
+
|
|
170
|
+
// src/chat/chat-context/chat-context.ts
|
|
171
|
+
import { createContext, useContext } from "react";
|
|
172
|
+
var ChatContext = createContext(null);
|
|
173
|
+
function useChatContext() {
|
|
174
|
+
const context = useContext(ChatContext);
|
|
175
|
+
if (!context) {
|
|
176
|
+
throw new Error("useChatContext must be used within a Chat.Root component");
|
|
177
|
+
}
|
|
178
|
+
return context;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
// src/chat/hooks/use-copy-to-clipboard.ts
|
|
182
|
+
import { useState, useCallback, useRef, useEffect } from "react";
|
|
183
|
+
|
|
184
|
+
// src/utils/clipboard.ts
|
|
185
|
+
function copyToClipboard(text, options) {
|
|
186
|
+
navigator.clipboard.writeText(text).then(
|
|
187
|
+
() => options?.onSuccess?.(),
|
|
188
|
+
(error) => options?.onFailure?.(error)
|
|
189
|
+
);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
// src/chat/hooks/use-copy-to-clipboard.ts
|
|
193
|
+
var RESET_DELAY_MS = 2e3;
|
|
194
|
+
function useCopyToClipboard() {
|
|
195
|
+
const [isCopied, setIsCopied] = useState(false);
|
|
196
|
+
const timeoutRef = useRef(null);
|
|
197
|
+
useEffect(() => {
|
|
198
|
+
return () => {
|
|
199
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
200
|
+
};
|
|
201
|
+
}, []);
|
|
202
|
+
const copy = useCallback((text) => {
|
|
203
|
+
copyToClipboard(text, {
|
|
204
|
+
onSuccess: () => {
|
|
205
|
+
setIsCopied(true);
|
|
206
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
207
|
+
timeoutRef.current = setTimeout(() => {
|
|
208
|
+
setIsCopied(false);
|
|
209
|
+
timeoutRef.current = null;
|
|
210
|
+
}, RESET_DELAY_MS);
|
|
211
|
+
}
|
|
212
|
+
});
|
|
213
|
+
}, []);
|
|
214
|
+
return { isCopied, copy };
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
// src/chat/chat-message-actions/chat-message-actions-styles.ts
|
|
218
|
+
import styled2 from "styled-components";
|
|
219
|
+
var ActionsContainer = styled2.div`
|
|
220
|
+
display: flex;
|
|
221
|
+
gap: 2px;
|
|
222
|
+
margin-top: 4px;
|
|
223
|
+
opacity: 0;
|
|
224
|
+
pointer-events: none;
|
|
225
|
+
transition: opacity 150ms ease;
|
|
226
|
+
`;
|
|
227
|
+
|
|
228
|
+
// src/chat/chat-message-actions/chat-message-actions.tsx
|
|
229
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
230
|
+
function ChatMessageActions({ messageId, content, role, isHelpful }) {
|
|
231
|
+
const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
|
|
232
|
+
const { isCopied, copy } = useCopyToClipboard();
|
|
233
|
+
const handleCopy = useCallback2(() => {
|
|
234
|
+
copy(content);
|
|
235
|
+
onCopyMessage?.(messageId);
|
|
236
|
+
}, [content, messageId, copy, onCopyMessage]);
|
|
237
|
+
const handleThumbUp = useCallback2(() => {
|
|
238
|
+
onThumbUpClick?.(messageId, isHelpful === true ? null : true);
|
|
239
|
+
}, [messageId, isHelpful, onThumbUpClick]);
|
|
240
|
+
const handleThumbDown = useCallback2(() => {
|
|
241
|
+
onThumbDownClick?.(messageId, isHelpful === false ? null : false);
|
|
242
|
+
}, [messageId, isHelpful, onThumbDownClick]);
|
|
243
|
+
const isAssistant = role === "assistant";
|
|
244
|
+
const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);
|
|
245
|
+
return /* @__PURE__ */ jsxs(ActionsContainer, { children: [
|
|
246
|
+
/* @__PURE__ */ jsx2(
|
|
247
|
+
IconButton,
|
|
248
|
+
{
|
|
249
|
+
icon: isCopied ? IconCheck : IconCopy,
|
|
250
|
+
onClick: handleCopy,
|
|
251
|
+
"aria-label": isCopied ? "Copied" : "Copy message"
|
|
252
|
+
}
|
|
253
|
+
),
|
|
254
|
+
hasFeedback && /* @__PURE__ */ jsx2(
|
|
255
|
+
IconButton,
|
|
256
|
+
{
|
|
257
|
+
icon: IconThumbUp,
|
|
258
|
+
onClick: handleThumbUp,
|
|
259
|
+
isSelected: isHelpful === true,
|
|
260
|
+
"aria-label": "Good response"
|
|
261
|
+
}
|
|
262
|
+
),
|
|
263
|
+
hasFeedback && /* @__PURE__ */ jsx2(
|
|
264
|
+
IconButton,
|
|
265
|
+
{
|
|
266
|
+
icon: IconThumbDown,
|
|
267
|
+
onClick: handleThumbDown,
|
|
268
|
+
isSelected: isHelpful === false,
|
|
269
|
+
"aria-label": "Bad response"
|
|
270
|
+
}
|
|
271
|
+
)
|
|
272
|
+
] });
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
// src/chat/chat-message/chat-message-styles.ts
|
|
276
|
+
import styled3 from "styled-components";
|
|
277
|
+
var MessageRow = styled3.div`
|
|
278
|
+
display: flex;
|
|
279
|
+
justify-content: ${({ $role }) => $role === "user" ? "flex-end" : "flex-start"};
|
|
280
|
+
`;
|
|
281
|
+
var MessageContainer = styled3.div`
|
|
282
|
+
display: flex;
|
|
283
|
+
flex-direction: column;
|
|
284
|
+
align-items: ${({ $role }) => $role === "user" ? "flex-end" : "flex-start"};
|
|
285
|
+
max-width: 90%;
|
|
286
|
+
|
|
287
|
+
&:hover ${ActionsContainer} {
|
|
288
|
+
opacity: 1;
|
|
289
|
+
pointer-events: auto;
|
|
290
|
+
}
|
|
291
|
+
`;
|
|
292
|
+
var MessageBubble = styled3.div`
|
|
293
|
+
${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};
|
|
294
|
+
color: ${colors["brown-100"]};
|
|
295
|
+
background: ${({ $role }) => $role === "user" ? colors.white : "transparent"};
|
|
296
|
+
padding: ${({ $role }) => $role === "user" ? "12px 16px" : "0"};
|
|
297
|
+
border-radius: ${({ $role }) => $role === "user" ? "16px" : "0"};
|
|
298
|
+
`;
|
|
299
|
+
|
|
300
|
+
// src/chat/chat-message/chat-message.tsx
|
|
301
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
302
|
+
function ChatMessage({ message }) {
|
|
303
|
+
return /* @__PURE__ */ jsx3(MessageRow, { $role: message.role, children: /* @__PURE__ */ jsxs2(MessageContainer, { $role: message.role, children: [
|
|
304
|
+
/* @__PURE__ */ jsx3(MessageBubble, { $role: message.role, children: /* @__PURE__ */ jsx3(ChatMessageContent, { content: message.content }) }),
|
|
305
|
+
/* @__PURE__ */ jsx3(
|
|
306
|
+
ChatMessageActions,
|
|
307
|
+
{
|
|
308
|
+
messageId: message.id,
|
|
309
|
+
content: message.content,
|
|
310
|
+
role: message.role,
|
|
311
|
+
isHelpful: message.isHelpful
|
|
312
|
+
}
|
|
313
|
+
)
|
|
314
|
+
] }) });
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
export {
|
|
318
|
+
ChatContext,
|
|
319
|
+
useChatContext,
|
|
320
|
+
useCopyToClipboard,
|
|
321
|
+
ChatMessage
|
|
322
|
+
};
|
|
323
|
+
/*! Bundled license information:
|
|
324
|
+
|
|
325
|
+
@tabler/icons-react/dist/esm/defaultAttributes.mjs:
|
|
326
|
+
@tabler/icons-react/dist/esm/createReactComponent.mjs:
|
|
327
|
+
@tabler/icons-react/dist/esm/icons/IconCheck.mjs:
|
|
328
|
+
@tabler/icons-react/dist/esm/icons/IconCopy.mjs:
|
|
329
|
+
@tabler/icons-react/dist/esm/icons/IconThumbDown.mjs:
|
|
330
|
+
@tabler/icons-react/dist/esm/icons/IconThumbUp.mjs:
|
|
331
|
+
@tabler/icons-react/dist/esm/tabler-icons-react.mjs:
|
|
332
|
+
(**
|
|
333
|
+
* @license @tabler/icons-react v3.37.1 - MIT
|
|
334
|
+
*
|
|
335
|
+
* This source code is licensed under the MIT license.
|
|
336
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
337
|
+
*)
|
|
338
|
+
*/
|
|
339
|
+
//# sourceMappingURL=chunk-EPS4LOOW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/chat/chat-message-content/chat-message-content.tsx","../src/chat/chat-message-content/chat-message-content-styles.ts","../src/chat/chat-message-actions/chat-message-actions.tsx","../node_modules/@tabler/icons-react/src/defaultAttributes.ts","../node_modules/@tabler/icons-react/src/createReactComponent.ts","../node_modules/@tabler/icons-react/src/icons/IconCheck.ts","../node_modules/@tabler/icons-react/src/icons/IconCopy.ts","../node_modules/@tabler/icons-react/src/icons/IconThumbDown.ts","../node_modules/@tabler/icons-react/src/icons/IconThumbUp.ts","../src/chat/chat-context/chat-context.ts","../src/chat/hooks/use-copy-to-clipboard.ts","../src/utils/clipboard.ts","../src/chat/chat-message-actions/chat-message-actions-styles.ts","../src/chat/chat-message/chat-message-styles.ts","../src/chat/chat-message/chat-message.tsx"],"sourcesContent":["import ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\n\nimport { ContentWrapper } from \"./chat-message-content-styles\";\n\ninterface ChatMessageContentProps {\n content: string;\n}\n\nexport function ChatMessageContent({ content }: ChatMessageContentProps) {\n return (\n <ContentWrapper>\n <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>\n </ContentWrapper>\n );\n}\n","import styled from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { typographyMixin, typographyTypes } from \"../../tokens/typography\";\n\nexport const ContentWrapper = styled.div`\n ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};\n color: ${colors[\"brown-100\"]};\n word-break: break-word;\n\n & p {\n margin: 0;\n }\n\n & p + p {\n margin-top: 8px;\n }\n\n & ul,\n & ol {\n margin: 4px 0;\n padding-left: 20px;\n }\n\n & a {\n color: ${colors[\"brown-100\"]};\n text-decoration: underline;\n }\n\n & pre {\n overflow-x: auto;\n padding: 8px;\n margin: 4px 0;\n background: ${colors[\"brown-10\"]};\n border: 1px solid ${colors[\"brown-alpha-12\"]};\n border-radius: 8px;\n }\n\n & pre code {\n padding: 0;\n background: none;\n border-radius: 0;\n }\n\n & code {\n padding: 2px 4px;\n background: ${colors[\"brown-10\"]};\n border-radius: 4px;\n }\n\n & table {\n border-collapse: collapse;\n margin: 8px 0;\n width: 100%;\n }\n\n & th,\n & td {\n border: 1px solid ${colors[\"brown-alpha-12\"]};\n padding: 6px 12px;\n text-align: left;\n }\n\n & th {\n background: ${colors[\"brown-10\"]};\n font-weight: 600;\n }\n\n & blockquote {\n margin: 4px 0;\n padding-left: 12px;\n border-left: 3px solid ${colors[\"brown-30\"]};\n color: ${colors[\"brown-70\"]};\n }\n`;\n","import { useCallback } from \"react\";\nimport { IconCopy, IconCheck, IconThumbUp, IconThumbDown } from \"@tabler/icons-react\";\n\nimport { IconButton } from \"../../components/icon-button/icon-button\";\nimport { useChatContext } from \"../chat-context/chat-context\";\nimport { useCopyToClipboard } from \"../hooks/use-copy-to-clipboard\";\nimport type { MessageRole } from \"../types\";\nimport { ActionsContainer } from \"./chat-message-actions-styles\";\n\ninterface ChatMessageActionsProps {\n messageId: string;\n content: string;\n role: MessageRole;\n isHelpful?: boolean | null;\n}\n\nexport function ChatMessageActions({ messageId, content, role, isHelpful }: ChatMessageActionsProps) {\n const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();\n const { isCopied, copy } = useCopyToClipboard();\n\n const handleCopy = useCallback(() => {\n copy(content);\n onCopyMessage?.(messageId);\n }, [content, messageId, copy, onCopyMessage]);\n\n const handleThumbUp = useCallback(() => {\n onThumbUpClick?.(messageId, isHelpful === true ? null : true);\n }, [messageId, isHelpful, onThumbUpClick]);\n\n const handleThumbDown = useCallback(() => {\n onThumbDownClick?.(messageId, isHelpful === false ? null : false);\n }, [messageId, isHelpful, onThumbDownClick]);\n\n const isAssistant = role === \"assistant\";\n const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);\n\n return (\n <ActionsContainer>\n <IconButton\n icon={isCopied ? IconCheck : IconCopy}\n onClick={handleCopy}\n aria-label={isCopied ? \"Copied\" : \"Copy message\"}\n />\n\n {hasFeedback && (\n <IconButton\n icon={IconThumbUp}\n onClick={handleThumbUp}\n isSelected={isHelpful === true}\n aria-label=\"Good response\"\n />\n )}\n\n {hasFeedback && (\n <IconButton\n icon={IconThumbDown}\n onClick={handleThumbDown}\n isSelected={isHelpful === false}\n aria-label=\"Bad response\"\n />\n )}\n </ActionsContainer>\n );\n}\n","export default {\n outline: {\n xmlns: 'http://www.w3.org/2000/svg',\n width: 24,\n height: 24,\n viewBox: '0 0 24 24',\n fill: 'none',\n stroke: 'currentColor',\n strokeWidth: 2,\n strokeLinecap: 'round',\n strokeLinejoin: 'round',\n },\n filled: {\n xmlns: 'http://www.w3.org/2000/svg',\n width: 24,\n height: 24,\n viewBox: '0 0 24 24',\n fill: 'currentColor',\n stroke: 'none',\n },\n};\n","import { forwardRef, createElement } from 'react';\nimport defaultAttributes from './defaultAttributes';\nimport type { IconNode, IconProps, Icon } from './types';\n\nconst createReactComponent = (\n type: 'outline' | 'filled',\n iconName: string,\n iconNamePascal: string,\n iconNode: IconNode,\n) => {\n const Component = forwardRef<SVGSVGElement, IconProps>(\n (\n { color = 'currentColor', size = 24, stroke = 2, title, className, children, ...rest }: IconProps,\n ref,\n ) =>\n createElement(\n 'svg',\n {\n ref,\n ...defaultAttributes[type],\n width: size,\n height: size,\n className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(' '),\n ...(type === 'filled'\n ? {\n fill: color,\n }\n : {\n strokeWidth: stroke,\n stroke: color,\n }),\n ...rest,\n },\n [\n title && createElement('title', { key: 'svg-title' }, title),\n ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),\n ...(Array.isArray(children) ? children : [children]),\n ],\n ),\n );\n\n Component.displayName = `${iconNamePascal}`;\n\n return Component;\n};\n\nexport default createReactComponent;\n","import createReactComponent from '../createReactComponent';\nimport { IconNode } from '../types';\n\nexport const __iconNode: IconNode = [[\"path\",{\"d\":\"M5 12l5 5l10 -10\",\"key\":\"svg-0\"}]]\n\nconst IconCheck = createReactComponent('outline', 'check', 'Check', __iconNode);\n\nexport default IconCheck;","import createReactComponent from '../createReactComponent';\nimport { IconNode } from '../types';\n\nexport const __iconNode: IconNode = [[\"path\",{\"d\":\"M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666\",\"key\":\"svg-0\"}],[\"path\",{\"d\":\"M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1\",\"key\":\"svg-1\"}]]\n\nconst IconCopy = createReactComponent('outline', 'copy', 'Copy', __iconNode);\n\nexport default IconCopy;","import createReactComponent from '../createReactComponent';\nimport { IconNode } from '../types';\n\nexport const __iconNode: IconNode = [[\"path\",{\"d\":\"M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3\",\"key\":\"svg-0\"}]]\n\nconst IconThumbDown = createReactComponent('outline', 'thumb-down', 'ThumbDown', __iconNode);\n\nexport default IconThumbDown;","import createReactComponent from '../createReactComponent';\nimport { IconNode } from '../types';\n\nexport const __iconNode: IconNode = [[\"path\",{\"d\":\"M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3\",\"key\":\"svg-0\"}]]\n\nconst IconThumbUp = createReactComponent('outline', 'thumb-up', 'ThumbUp', __iconNode);\n\nexport default IconThumbUp;","import { createContext, useContext } from \"react\";\nimport type { ChatContextValue } from \"../types\";\n\nexport const ChatContext = createContext<ChatContextValue | null>(null);\n\nexport function useChatContext(): ChatContextValue {\n const context = useContext(ChatContext);\n if (!context) {\n throw new Error(\"useChatContext must be used within a Chat.Root component\");\n }\n return context;\n}\n","import { useState, useCallback, useRef, useEffect } from \"react\";\n\nimport { copyToClipboard } from \"../../utils/clipboard\";\n\nconst RESET_DELAY_MS = 2000;\n\ninterface UseCopyToClipboardResult {\n isCopied: boolean;\n copy: (text: string) => void;\n}\n\nexport function useCopyToClipboard(): UseCopyToClipboardResult {\n const [isCopied, setIsCopied] = useState(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n };\n }, []);\n\n const copy = useCallback((text: string) => {\n copyToClipboard(text, {\n onSuccess: () => {\n setIsCopied(true);\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => {\n setIsCopied(false);\n timeoutRef.current = null;\n }, RESET_DELAY_MS);\n },\n });\n }, []);\n\n return { isCopied, copy };\n}\n","interface CopyToClipboardOptions {\n onSuccess?: () => void;\n onFailure?: (error: unknown) => void;\n}\n\nexport function copyToClipboard(text: string, options?: CopyToClipboardOptions): void {\n navigator.clipboard.writeText(text).then(\n () => options?.onSuccess?.(),\n (error) => options?.onFailure?.(error)\n );\n}\n","import styled from \"styled-components\";\n\nexport const ActionsContainer = styled.div`\n display: flex;\n gap: 2px;\n margin-top: 4px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 150ms ease;\n`;\n","import styled from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { typographyMixin, typographyTypes } from \"../../tokens/typography\";\nimport { ActionsContainer } from \"../chat-message-actions/chat-message-actions-styles\";\nimport type { MessageRole } from \"../types\";\n\nexport const MessageRow = styled.div<{ $role: MessageRole }>`\n display: flex;\n justify-content: ${({ $role }) => ($role === \"user\" ? \"flex-end\" : \"flex-start\")};\n`;\n\nexport const MessageContainer = styled.div<{ $role: MessageRole }>`\n display: flex;\n flex-direction: column;\n align-items: ${({ $role }) => ($role === \"user\" ? \"flex-end\" : \"flex-start\")};\n max-width: 90%;\n\n &:hover ${ActionsContainer} {\n opacity: 1;\n pointer-events: auto;\n }\n`;\n\nexport const MessageBubble = styled.div<{ $role: MessageRole }>`\n ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};\n color: ${colors[\"brown-100\"]};\n background: ${({ $role }) => ($role === \"user\" ? colors.white : \"transparent\")};\n padding: ${({ $role }) => ($role === \"user\" ? \"12px 16px\" : \"0\")};\n border-radius: ${({ $role }) => ($role === \"user\" ? \"16px\" : \"0\")};\n`;\n","import type { ChatMessage as ChatMessageType } from \"../types\";\nimport { ChatMessageContent } from \"../chat-message-content/chat-message-content\";\nimport { ChatMessageActions } from \"../chat-message-actions/chat-message-actions\";\nimport { MessageRow, MessageBubble, MessageContainer } from \"./chat-message-styles\";\n\ninterface ChatMessageProps {\n message: ChatMessageType;\n}\n\nexport function ChatMessage({ message }: ChatMessageProps) {\n return (\n <MessageRow $role={message.role}>\n <MessageContainer $role={message.role}>\n <MessageBubble $role={message.role}>\n <ChatMessageContent content={message.content} />\n </MessageBubble>\n <ChatMessageActions\n messageId={message.id}\n content={message.content}\n role={message.role}\n isHelpful={message.isHelpful}\n />\n </MessageContainer>\n </MessageRow>\n );\n}\n"],"mappings":"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","names":["useCallback","__iconNode","__iconNode","__iconNode","styled","jsx","useCallback","styled","styled","jsx","jsxs"]}
|
package/dist/icon.cjs
CHANGED
|
@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
|
-
// src/icon/index.ts
|
|
30
|
+
// src/components/icon/index.ts
|
|
31
31
|
var icon_exports = {};
|
|
32
32
|
__export(icon_exports, {
|
|
33
33
|
Icon: () => Icon,
|
|
@@ -35,16 +35,16 @@ __export(icon_exports, {
|
|
|
35
35
|
});
|
|
36
36
|
module.exports = __toCommonJS(icon_exports);
|
|
37
37
|
|
|
38
|
-
// src/icon/icon.tsx
|
|
38
|
+
// src/components/icon/icon.tsx
|
|
39
39
|
var import_react = require("react");
|
|
40
40
|
|
|
41
|
-
// src/icon/icon-styles.ts
|
|
41
|
+
// src/components/icon/icon-styles.ts
|
|
42
42
|
var import_styled_components = __toESM(require("styled-components"), 1);
|
|
43
43
|
var STROKE_WIDTH_BY_SIZE = {
|
|
44
|
-
12: 1.
|
|
45
|
-
14: 1.
|
|
46
|
-
16: 1.
|
|
47
|
-
18: 1.
|
|
44
|
+
12: 1.4,
|
|
45
|
+
14: 1.4,
|
|
46
|
+
16: 1.6,
|
|
47
|
+
18: 1.6,
|
|
48
48
|
20: 1.8,
|
|
49
49
|
24: 1.8
|
|
50
50
|
};
|
|
@@ -60,7 +60,7 @@ var IconWrapper = import_styled_components.default.span`
|
|
|
60
60
|
flex-shrink: 0;
|
|
61
61
|
`;
|
|
62
62
|
|
|
63
|
-
// src/icon/icon.tsx
|
|
63
|
+
// src/components/icon/icon.tsx
|
|
64
64
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
65
65
|
var DEFAULT_SIZE = 16;
|
|
66
66
|
var Icon = (0, import_react.forwardRef)(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
|
|
@@ -77,10 +77,10 @@ var Icon = (0, import_react.forwardRef)(function Icon2({ icon: IconComponent, si
|
|
|
77
77
|
);
|
|
78
78
|
});
|
|
79
79
|
|
|
80
|
-
// src/icon-button/icon-button.tsx
|
|
80
|
+
// src/components/icon-button/icon-button.tsx
|
|
81
81
|
var import_react2 = require("react");
|
|
82
82
|
|
|
83
|
-
// src/icon-button/icon-button-styles.ts
|
|
83
|
+
// src/components/icon-button/icon-button-styles.ts
|
|
84
84
|
var import_styled_components2 = __toESM(require("styled-components"), 1);
|
|
85
85
|
|
|
86
86
|
// src/tokens/colors.ts
|
|
@@ -170,7 +170,7 @@ var colors = {
|
|
|
170
170
|
"red-600": "#DC2626"
|
|
171
171
|
};
|
|
172
172
|
|
|
173
|
-
// src/icon-button/icon-button-styles.ts
|
|
173
|
+
// src/components/icon-button/icon-button-styles.ts
|
|
174
174
|
var DIMENSIONS = {
|
|
175
175
|
small: 28,
|
|
176
176
|
medium: 32
|
|
@@ -208,7 +208,7 @@ var Button = import_styled_components2.default.button`
|
|
|
208
208
|
}
|
|
209
209
|
`;
|
|
210
210
|
|
|
211
|
-
// src/icon-button/icon-button.tsx
|
|
211
|
+
// src/components/icon-button/icon-button.tsx
|
|
212
212
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
213
213
|
var ICON_SIZE_BY_BUTTON_SIZE = {
|
|
214
214
|
small: 14,
|
package/dist/icon.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/icon/index.ts","../src/icon/icon.tsx","../src/icon/icon-styles.ts","../src/icon-button/icon-button.tsx","../src/icon-button/icon-button-styles.ts","../src/tokens/colors.ts"],"sourcesContent":["export { Icon } from \"./icon\";\nexport type { IconProps } from \"./types\";\nexport { IconButton } from \"../icon-button/icon-button\";\nexport type { IconButtonProps, IconButtonSize } from \"../icon-button/types\";\n","import { forwardRef } from \"react\";\n\nimport { IconWrapper, getStrokeWidth } from \"./icon-styles\";\nimport type { IconProps } from \"./types\";\n\nconst DEFAULT_SIZE = 16;\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n { icon: IconComponent, size = DEFAULT_SIZE, color, className, \"aria-label\": ariaLabel },\n ref\n) {\n return (\n <IconWrapper\n ref={ref}\n className={className}\n $color={color}\n aria-label={ariaLabel}\n role={ariaLabel ? \"img\" : undefined}\n >\n <IconComponent width={size} height={size} strokeWidth={getStrokeWidth(size)} />\n </IconWrapper>\n );\n});\n","import styled from \"styled-components\";\n\nexport const STROKE_WIDTH_BY_SIZE: Record<number, number> = {\n 12: 1.
|
|
1
|
+
{"version":3,"sources":["../src/components/icon/index.ts","../src/components/icon/icon.tsx","../src/components/icon/icon-styles.ts","../src/components/icon-button/icon-button.tsx","../src/components/icon-button/icon-button-styles.ts","../src/tokens/colors.ts"],"sourcesContent":["export { Icon } from \"./icon\";\nexport type { IconProps } from \"./types\";\nexport { IconButton } from \"../icon-button/icon-button\";\nexport type { IconButtonProps, IconButtonSize } from \"../icon-button/types\";\n","import { forwardRef } from \"react\";\n\nimport { IconWrapper, getStrokeWidth } from \"./icon-styles\";\nimport type { IconProps } from \"./types\";\n\nconst DEFAULT_SIZE = 16;\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n { icon: IconComponent, size = DEFAULT_SIZE, color, className, \"aria-label\": ariaLabel },\n ref\n) {\n return (\n <IconWrapper\n ref={ref}\n className={className}\n $color={color}\n aria-label={ariaLabel}\n role={ariaLabel ? \"img\" : undefined}\n >\n <IconComponent width={size} height={size} strokeWidth={getStrokeWidth(size)} />\n </IconWrapper>\n );\n});\n","import styled from \"styled-components\";\n\nexport const STROKE_WIDTH_BY_SIZE: Record<number, number> = {\n 12: 1.4,\n 14: 1.4,\n 16: 1.6,\n 18: 1.6,\n 20: 1.8,\n 24: 1.8,\n};\n\nexport const DEFAULT_STROKE_WIDTH = 1.8;\n\nexport function getStrokeWidth(size: number): number {\n return STROKE_WIDTH_BY_SIZE[size] ?? DEFAULT_STROKE_WIDTH;\n}\n\nexport const IconWrapper = styled.span<{ $color?: string }>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: ${({ $color }) => $color ?? \"currentColor\"};\n flex-shrink: 0;\n`;\n","import { forwardRef } from \"react\";\n\nimport { Icon } from \"../icon/icon\";\nimport { Button } from \"./icon-button-styles\";\nimport type { IconButtonProps, IconButtonSize } from \"./types\";\n\nconst ICON_SIZE_BY_BUTTON_SIZE: Record<IconButtonSize, number> = {\n small: 14,\n medium: 16,\n};\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n { icon, size = \"small\", isSelected = false, disabled = false, onClick, className, \"aria-label\": ariaLabel },\n ref\n) {\n return (\n <Button\n ref={ref}\n className={className}\n $size={size}\n $isSelected={isSelected}\n disabled={disabled}\n onClick={disabled ? undefined : onClick}\n aria-label={ariaLabel}\n >\n <Icon icon={icon} size={ICON_SIZE_BY_BUTTON_SIZE[size]} />\n </Button>\n );\n});\n","import styled from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport type { IconButtonSize } from \"./types\";\n\nconst DIMENSIONS: Record<IconButtonSize, number> = {\n small: 28,\n medium: 32,\n};\n\nconst BORDER_RADIUS: Record<IconButtonSize, number> = {\n small: 6,\n medium: 10,\n};\n\nexport const Button = styled.button<{\n $size: IconButtonSize;\n $isSelected: boolean;\n}>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ${({ $size }) => DIMENSIONS[$size]}px;\n height: ${({ $size }) => DIMENSIONS[$size]}px;\n padding: 0;\n border: none;\n border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;\n background: ${({ $isSelected }) => ($isSelected ? colors[\"brown-40\"] : \"transparent\")};\n color: ${colors[\"brown-100\"]};\n cursor: pointer;\n transition: background-color 100ms ease;\n\n &:hover {\n background: ${({ $isSelected }) => ($isSelected ? colors[\"brown-40\"] : colors[\"brown-20\"])};\n }\n\n &:active {\n background: ${colors[\"brown-40\"]};\n }\n\n &:disabled {\n color: ${colors[\"brown-50\"]};\n background: transparent;\n cursor: not-allowed;\n }\n`;\n","export const colors = {\n // White\n white: \"#FFFFFF\",\n \"white-alpha-85\": \"rgba(255, 255, 255, 0.85)\",\n\n // Brown\n \"brown-10\": \"#FAF9F8\",\n \"brown-20\": \"#F5F3F0\",\n \"brown-30\": \"#EEEBE5\",\n \"brown-40\": \"#E6E2DA\",\n \"brown-50\": \"#CFCBC4\",\n \"brown-60\": \"#A19E99\",\n \"brown-70\": \"#73716D\",\n \"brown-80\": \"#5C5A57\",\n \"brown-90\": \"#2E2D2C\",\n \"brown-100\": \"#171716\",\n \"brown-alpha-12\": \"rgba(23, 23, 22, 0.12)\",\n \"brown-alpha-20\": \"rgba(23, 23, 22, 0.20)\",\n \"brown-alpha-55\": \"rgba(23, 23, 22, 0.55)\",\n \"brown-alpha-70\": \"rgba(23, 23, 22, 0.70)\",\n \"brown-alpha-80\": \"rgba(23, 23, 22, 0.80)\",\n \"brown-alpha-90\": \"rgba(23, 23, 22, 0.90)\",\n\n // Fuchsia\n \"fuchsia-50\": \"#FAF5FF\",\n \"fuchsia-300\": \"#F0ABFC\",\n \"fuchsia-500\": \"#D946EF\",\n \"fuchsia-600\": \"#C026D3\",\n \"fuchsia-800\": \"#86198F\",\n\n // Pink\n \"pink-50\": \"#FDF2F8\",\n \"pink-400\": \"#F472B6\",\n \"pink-600\": \"#DB2777\",\n \"pink-800\": \"#9D174D\",\n\n // Violet\n \"violet-50\": \"#F5F3FF\",\n \"violet-400\": \"#A78BFA\",\n \"violet-600\": \"#7C3AED\",\n \"violet-800\": \"#5B21B6\",\n\n // Indigo\n \"indigo-50\": \"#EEF2FF\",\n \"indigo-400\": \"#818CF8\",\n \"indigo-500\": \"#6366F1\",\n \"indigo-600\": \"#4F46E5\",\n \"indigo-800\": \"#3730A3\",\n\n // Cyan\n \"cyan-50\": \"#E7FEFF\",\n \"cyan-300\": \"#67E8F9\",\n \"cyan-600\": \"#0891B2\",\n \"cyan-900\": \"#164E63\",\n\n // Teal\n \"teal-50\": \"#EBFDF9\",\n \"teal-300\": \"#5EEAD4\",\n \"teal-600\": \"#0D9488\",\n\n // Rose\n \"rose-400\": \"#FB7185\",\n\n // Purple\n \"purple-400\": \"#C084FC\",\n\n // Blue\n \"blue-50\": \"#EFF6FF\",\n \"blue-100\": \"#DBEAFE\",\n \"blue-300\": \"#93C5FD\",\n \"blue-400\": \"#60A5FA\",\n \"blue-600\": \"#2563EB\",\n \"blue-800\": \"#1E40AF\",\n\n // Sky\n \"sky-300\": \"#7DD3FC\",\n\n // Green\n \"green-50\": \"#ECF9F0\",\n \"green-100\": \"#D4F1D9\",\n \"green-400\": \"#3DC269\",\n \"green-700\": \"#277C43\",\n \"green-800\": \"#1C5930\",\n\n // Orange\n \"orange-50\": \"#FFF7ED\",\n \"orange-100\": \"#FFEDD5\",\n \"orange-200\": \"#FED7AA\",\n \"orange-500\": \"#F97316\",\n \"orange-600\": \"#EA580C\",\n\n // Red\n \"red-50\": \"#FEF2F2\",\n \"red-100\": \"#FEE2E2\",\n \"red-200\": \"#FECACA\",\n \"red-400\": \"#F7776C\",\n \"red-500\": \"#EF4444\",\n \"red-600\": \"#DC2626\",\n} as const;\n\nexport type ColorToken = keyof typeof colors;\n"],"mappings":"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","names":["styled","Icon","import_react","import_styled_components","styled","import_jsx_runtime","IconButton"]}
|