@cossistant/react 0.0.5 → 0.0.6

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 (8) hide show
  1. package/README.md +27 -0
  2. package/conversation.d.ts +3 -3
  3. package/package.json +2 -1
  4. package/realtime-events.d.ts +2 -2
  5. package/schemas.d.ts +1 -1
  6. package/support/components/button.d.ts +1 -1
  7. package/support/components/typing-indicator.d.ts.map +1 -1
  8. package/tailwind.css +404 -0
package/README.md CHANGED
@@ -16,10 +16,37 @@ npm install @cossistant/react
16
16
  yarn add @cossistant/react
17
17
  ```
18
18
 
19
+ ## CSS Imports
20
+
21
+ The SDK provides two CSS entrypoints to fit your setup:
22
+
23
+ ### Option 1: Tailwind v4 Source
24
+
25
+ If you're using Tailwind CSS v4, import the source file to enable full theme customization:
26
+
27
+ ```tsx
28
+ import "@cossistant/react/tailwind.css";
29
+ ```
30
+
31
+ This imports the raw Tailwind v4 source file, allowing you to override theme variables like `--co-theme-primary` in your own CSS.
32
+
33
+ ### Option 2: Plain CSS
34
+
35
+ Import the pre-compiled CSS with no Tailwind dependency:
36
+
37
+ ```tsx
38
+ import "@cossistant/react/support.css";
39
+ ```
40
+
41
+ This file contains all the compiled styles and works in any React application without requiring Tailwind CSS.
42
+
43
+ > **Note:** Tailwind v3 is not supported. Use the plain CSS import if you're on Tailwind v3.
44
+
19
45
  ## Render the widget
20
46
 
21
47
  ```tsx
22
48
  import { SupportProvider, Support } from "@cossistant/react";
49
+ import "@cossistant/react/support.css";
23
50
 
24
51
  export function App() {
25
52
  return (
package/conversation.d.ts CHANGED
@@ -73,8 +73,8 @@ declare const createConversationResponseSchema: z.ZodObject<{
73
73
  visitorId: z.ZodString;
74
74
  websiteId: z.ZodString;
75
75
  status: z.ZodDefault<z.ZodEnum<{
76
- open: "open";
77
76
  resolved: "resolved";
77
+ open: "open";
78
78
  spam: "spam";
79
79
  }>>;
80
80
  deletedAt: z.ZodDefault<z.ZodNullable<z.ZodString>>;
@@ -170,8 +170,8 @@ declare const listConversationsResponseSchema: z.ZodObject<{
170
170
  visitorId: z.ZodString;
171
171
  websiteId: z.ZodString;
172
172
  status: z.ZodDefault<z.ZodEnum<{
173
- open: "open";
174
173
  resolved: "resolved";
174
+ open: "open";
175
175
  spam: "spam";
176
176
  }>>;
177
177
  deletedAt: z.ZodDefault<z.ZodNullable<z.ZodString>>;
@@ -260,8 +260,8 @@ declare const getConversationResponseSchema: z.ZodObject<{
260
260
  visitorId: z.ZodString;
261
261
  websiteId: z.ZodString;
262
262
  status: z.ZodDefault<z.ZodEnum<{
263
- open: "open";
264
263
  resolved: "resolved";
264
+ open: "open";
265
265
  spam: "spam";
266
266
  }>>;
267
267
  deletedAt: z.ZodDefault<z.ZodNullable<z.ZodString>>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cossistant/react",
3
3
  "type": "module",
4
- "version": "0.0.5",
4
+ "version": "0.0.6",
5
5
  "private": false,
6
6
  "author": "Cossistant team",
7
7
  "description": "Headless React SDK for building AI-powered support/chat widgets. Hooks + primitives, WS-driven, TypeScript-first. Next.js-ready, Tailwind optional.",
@@ -55,6 +55,7 @@
55
55
  "import": "./hooks/*.js"
56
56
  },
57
57
  "./support.css": "./support.css",
58
+ "./tailwind.css": "./support.css",
58
59
  "./realtime": {
59
60
  "types": "./realtime/index.d.ts",
60
61
  "import": "./realtime/index.js"
package/realtime-events.d.ts CHANGED
@@ -109,8 +109,8 @@ declare const realtimeSchema: {
109
109
  visitorId: z.ZodString;
110
110
  websiteId: z.ZodString;
111
111
  status: z.ZodDefault<z.ZodEnum<{
112
- open: "open";
113
112
  resolved: "resolved";
113
+ open: "open";
114
114
  spam: "spam";
115
115
  }>>;
116
116
  deletedAt: z.ZodDefault<z.ZodNullable<z.ZodString>>;
@@ -180,8 +180,8 @@ declare const realtimeSchema: {
180
180
  header: z.ZodObject<{
181
181
  id: z.ZodString;
182
182
  status: z.ZodEnum<{
183
- open: "open";
184
183
  resolved: "resolved";
184
+ open: "open";
185
185
  spam: "spam";
186
186
  }>;
187
187
  priority: z.ZodEnum<{
package/schemas.d.ts CHANGED
@@ -10,8 +10,8 @@ declare const conversationSchema: z.ZodObject<{
10
10
  visitorId: z.ZodString;
11
11
  websiteId: z.ZodString;
12
12
  status: z.ZodDefault<z.ZodEnum<{
13
- open: "open";
14
13
  resolved: "resolved";
14
+ open: "open";
15
15
  spam: "spam";
16
16
  }>>;
17
17
  deletedAt: z.ZodDefault<z.ZodNullable<z.ZodString>>;
package/support/components/button.d.ts CHANGED
@@ -4,7 +4,7 @@ import * as class_variance_authority_dist_types0 from "class-variance-authority/
4
4
 
5
5
  //#region src/support/components/button.d.ts
6
6
  declare const coButtonVariants: (props?: ({
7
- variant?: "tab" | "default" | "secondary" | "ghost" | "outline" | "tab-selected" | null | undefined;
7
+ variant?: "default" | "secondary" | "ghost" | "outline" | "tab" | "tab-selected" | null | undefined;
8
8
  size?: "default" | "large" | "icon" | null | undefined;
9
9
  } & class_variance_authority_dist_types0.ClassProp) | undefined) => string;
10
10
  type CossistantButtonProps = React$1.ComponentProps<"button"> & VariantProps<typeof coButtonVariants>;
package/support/components/typing-indicator.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"typing-indicator.d.ts","names":[],"sources":["../../../src/support/components/typing-indicator.tsx"],"sourcesContent":[],"mappings":";;;;KAKY,qBAAA;KAEA,iBAAA;EAFA,EAAA,EAAA,MAAA;EAEA,IAAA,EAEL,qBAFsB;AAK7B,CAAA;AAAwD,KAA5C,oBAAA,GAAuB,OAAA,CAAM,cAAe,CAAA,cAAA,CAAA,GAAA;EAArB,YAAM,EAC1B,iBAD0B,EAAA;EAC1B,iBAAA,CAAA,EACM,gBADN,EAAA;EACM,oBAAA,CAAA,EACG,mBADH,EAAA;EACG,WAAA,CAAA,EAAA,OAAA;CAAmB;AAI9B,cAAA,YAAgB,EAAA,CAAA;EAAA;CAIzB,EAAM;EAuBG,SAAA,CAAA,EAAA,MAuDZ;CAvD2B,EAAA,GAvBxB,OAAA,CAAM,YAuBkB;AAAA,cAAf,eAAe,EAAA,OAAA,CAAA,yBAAA,CAAA,OAAA,CAAA,cAAA,CAAA,cAAA,CAAA,GAAA;EAjCb,YAAA,EAAA,iBAAA,EAAA;EACM,iBAAA,CAAA,EAAA,gBAAA,EAAA;EACG,oBAAA,CAAA,EAAA,mBAAA,EAAA"}
1
+ {"version":3,"file":"typing-indicator.d.ts","names":[],"sources":["../../../src/support/components/typing-indicator.tsx"],"sourcesContent":[],"mappings":";;;;KAKY,qBAAA;KAEA,iBAAA;EAFA,EAAA,EAAA,MAAA;EAEA,IAAA,EAEL,qBAFsB;AAK7B,CAAA;AAAwD,KAA5C,oBAAA,GAAuB,OAAA,CAAM,cAAe,CAAA,cAAA,CAAA,GAAA;EAArB,YAAM,EAC1B,iBAD0B,EAAA;EAC1B,iBAAA,CAAA,EACM,gBADN,EAAA;EACM,oBAAA,CAAA,EACG,mBADH,EAAA;EACG,WAAA,CAAA,EAAA,OAAA;CAAmB;AAI9B,cAAA,YAAgB,EAAA,CAAA;EAAA;CAInB,EAAA;EAuBG,SAAA,CAAA,EAAA,MAuDZ;CAvD2B,EAAA,GAvBxB,OAAA,CAAM,YAuBkB;AAAA,cAAf,eAAe,EAAA,OAAA,CAAA,yBAAA,CAAA,OAAA,CAAA,cAAA,CAAA,cAAA,CAAA,GAAA;EAjCb,YAAA,EAAA,iBAAA,EAAA;EACM,iBAAA,CAAA,EAAA,gBAAA,EAAA;EACG,oBAAA,CAAA,EAAA,mBAAA,EAAA"}
package/tailwind.css ADDED
@@ -0,0 +1,404 @@
1
+ @custom-variant dark (&:is(.dark *));
2
+
3
+ @layer base {
4
+ .cossistant {
5
+ @apply border-co-border;
6
+ @apply scroll-smooth;
7
+
8
+ color-scheme: inherit;
9
+
10
+ /* Typeface tokens */
11
+ --co-font-sans: var(
12
+ --co-theme-font-sans,
13
+ var(--font-sans, "Geist", "Inter", sans-serif)
14
+ );
15
+ --co-font-mono: var(
16
+ --co-theme-font-mono,
17
+ var(--font-mono, "Geist Mono", "Inter Mono", monospace)
18
+ );
19
+
20
+ --co-border-color: var(
21
+ --co-theme-border-color,
22
+ var(--color-border, oklch(92.2% 0 0))
23
+ );
24
+
25
+ /* Core surfaces */
26
+ --co-radius: var(--co-theme-radius, var(--radius, 0.625rem));
27
+ --co-background-base: var(
28
+ --co-theme-background,
29
+ var(--background, oklch(99% 0 0))
30
+ );
31
+ --co-foreground-base: var(
32
+ --co-theme-foreground,
33
+ var(--foreground, oklch(14.5% 0 0))
34
+ );
35
+ --co-popover-base: var(
36
+ --co-theme-popover,
37
+ var(--popover, var(--co-background-base))
38
+ );
39
+ --co-popover-foreground-base: var(
40
+ --co-theme-popover-foreground,
41
+ var(--popover-foreground, var(--co-foreground-base))
42
+ );
43
+ --co-primary-base: var(
44
+ --co-theme-primary,
45
+ var(--primary, oklch(20.5% 0 0))
46
+ );
47
+ --co-primary-foreground-base: var(
48
+ --co-theme-primary-foreground,
49
+ var(--primary-foreground, oklch(98.5% 0 0))
50
+ );
51
+ --co-secondary-base: var(
52
+ --co-theme-secondary,
53
+ var(--secondary, oklch(97% 0 0))
54
+ );
55
+ --co-secondary-foreground-base: var(
56
+ --co-theme-secondary-foreground,
57
+ var(--secondary-foreground, oklch(20.5% 0 0))
58
+ );
59
+ --co-border-base: var(--co-theme-border, var(--border, oklch(92.2% 0 0)));
60
+ --co-input-base: var(--co-theme-input, var(--input, oklch(92.2% 0 0)));
61
+ --co-ring-base: var(--co-theme-ring, var(--ring, var(--co-primary-base)));
62
+ --co-accent-base: var(
63
+ --co-theme-accent,
64
+ var(--accent, var(--co-primary-base))
65
+ );
66
+ --co-accent-foreground-base: var(
67
+ --co-theme-accent-foreground,
68
+ var(--accent-foreground, var(--co-primary-foreground-base))
69
+ );
70
+
71
+ /* Neutral shades derived from the background */
72
+ --co-background-50-mix: color-mix(
73
+ in oklch,
74
+ var(--co-background-base) 98%,
75
+ var(--co-foreground-base)
76
+ );
77
+ --co-background-100-mix: color-mix(
78
+ in oklch,
79
+ var(--co-background-base) 97%,
80
+ var(--co-foreground-base)
81
+ );
82
+ --co-background-200-mix: color-mix(
83
+ in oklch,
84
+ var(--co-background-base) 96%,
85
+ var(--co-foreground-base)
86
+ );
87
+ --co-background-300-mix: color-mix(
88
+ in oklch,
89
+ var(--co-background-base) 95%,
90
+ var(--co-foreground-base)
91
+ );
92
+ --co-background-400-mix: color-mix(
93
+ in oklch,
94
+ var(--co-background-base) 94%,
95
+ var(--co-foreground-base)
96
+ );
97
+ --co-background-500-mix: color-mix(
98
+ in oklch,
99
+ var(--co-background-base) 93%,
100
+ var(--co-foreground-base)
101
+ );
102
+ --co-background-600-mix: color-mix(
103
+ in oklch,
104
+ var(--co-background-base) 92%,
105
+ var(--co-foreground-base)
106
+ );
107
+
108
+ /* Muted tones */
109
+ --co-muted-mix: color-mix(
110
+ in oklch,
111
+ var(--co-background-base) 85%,
112
+ var(--co-foreground-base)
113
+ );
114
+ --co-muted-foreground-mix: color-mix(
115
+ in oklch,
116
+ var(--co-foreground-base) 70%,
117
+ white
118
+ );
119
+
120
+ /* Public tokens consumed by Tailwind theme */
121
+ --co-background: var(--co-background-base);
122
+ --co-background-50: var(
123
+ --co-theme-background-50,
124
+ var(--co-background-50-mix, oklch(92% 0 0))
125
+ );
126
+ --co-background-100: var(
127
+ --co-theme-background-100,
128
+ var(--co-background-100-mix, oklch(93% 0 0))
129
+ );
130
+ --co-background-200: var(
131
+ --co-theme-background-200,
132
+ var(--co-background-200-mix, oklch(94% 0 0))
133
+ );
134
+ --co-background-300: var(
135
+ --co-theme-background-300,
136
+ var(--co-background-300-mix, oklch(95% 0 0))
137
+ );
138
+ --co-background-400: var(
139
+ --co-theme-background-400,
140
+ var(--co-background-400-mix, oklch(96% 0 0))
141
+ );
142
+ --co-background-500: var(
143
+ --co-theme-background-500,
144
+ var(--co-background-500-mix, oklch(97% 0 0))
145
+ );
146
+ --co-background-600: var(
147
+ --co-theme-background-600,
148
+ var(--co-background-600-mix, oklch(98% 0 0))
149
+ );
150
+
151
+ --co-foreground: var(--co-foreground-base);
152
+ --co-popover: var(--co-popover-base);
153
+ --co-popover-foreground: var(--co-popover-foreground-base);
154
+ --co-primary: var(--co-primary-base);
155
+ --co-primary-foreground: var(--co-primary-foreground-base);
156
+ --co-secondary: var(--co-secondary-base);
157
+ --co-secondary-foreground: var(--co-secondary-foreground-base);
158
+ --co-muted: var(
159
+ --co-theme-muted,
160
+ var(--muted, var(--co-muted-mix, oklch(97% 0 0)))
161
+ );
162
+ --co-muted-foreground: var(
163
+ --co-theme-muted-foreground,
164
+ var(--muted-foreground, var(--co-muted-foreground-mix, oklch(55.6% 0 0)))
165
+ );
166
+ --co-border: var(--co-border-base);
167
+ --co-input: var(--co-input-base);
168
+ --co-ring: var(--co-ring-base);
169
+ --co-accent: var(--co-accent-base);
170
+ --co-accent-foreground: var(--co-accent-foreground-base);
171
+
172
+ /* Accent palette */
173
+ --co-pink: var(--co-theme-pink, oklch(76.3% 0.152 354));
174
+ --co-yellow: var(--co-theme-yellow, oklch(86.4% 0.144 99));
175
+ --co-blue: var(--co-theme-blue, oklch(72.5% 0.132 241));
176
+ --co-orange: var(--co-theme-orange, oklch(74.5% 0.166 50));
177
+
178
+ /* Status colors */
179
+ --co-destructive: var(--co-theme-destructive, oklch(57.7% 0.245 27.325));
180
+ --co-destructive-foreground: var(
181
+ --co-theme-destructive-foreground,
182
+ oklch(57.7% 0.245 27.325)
183
+ );
184
+ --co-success: var(--co-theme-success, oklch(71.7% 0.18 142));
185
+ --co-success-foreground: var(
186
+ --co-theme-success-foreground,
187
+ oklch(26.5% 0.052 142.7)
188
+ );
189
+ --co-neutral: var(--co-theme-neutral, oklch(60.8% 0 0));
190
+ --co-neutral-foreground: var(
191
+ --co-theme-neutral-foreground,
192
+ oklch(25.6% 0 0)
193
+ );
194
+ --co-warning: var(--co-theme-warning, oklch(86.4% 0.144 99));
195
+ --co-warning-foreground: var(
196
+ --co-theme-warning-foreground,
197
+ oklch(41.4% 0.071 99)
198
+ );
199
+ }
200
+
201
+ .dark .cossistant,
202
+ .cossistant[data-color-scheme="dark"] {
203
+ /* Provide dark defaults without overriding host tokens */
204
+ --co-background-base: var(
205
+ --co-theme-background,
206
+ var(--background, oklch(15.5% 0 0))
207
+ );
208
+ --co-foreground-base: var(
209
+ --co-theme-foreground,
210
+ var(--foreground, oklch(98.5% 0 0))
211
+ );
212
+ --co-border-color: var(
213
+ --co-theme-border-color,
214
+ var(--color-border, oklch(26.9% 0 0))
215
+ );
216
+ --co-popover-base: var(
217
+ --co-theme-popover,
218
+ var(--popover, oklch(14.5% 0 0))
219
+ );
220
+ --co-popover-foreground-base: var(
221
+ --co-theme-popover-foreground,
222
+ var(--popover-foreground, oklch(98.5% 0 0))
223
+ );
224
+ --co-primary-base: var(
225
+ --co-theme-primary,
226
+ var(--primary, oklch(98.5% 0 0))
227
+ );
228
+ --co-primary-foreground-base: var(
229
+ --co-theme-primary-foreground,
230
+ var(--primary-foreground, oklch(20.5% 0 0))
231
+ );
232
+ --co-secondary-base: var(
233
+ --co-theme-secondary,
234
+ var(--secondary, oklch(26.9% 0 0))
235
+ );
236
+ --co-secondary-foreground-base: var(
237
+ --co-theme-secondary-foreground,
238
+ var(--secondary-foreground, oklch(98.5% 0 0))
239
+ );
240
+ --co-border-base: var(--co-theme-border, var(--border, oklch(26.9% 0 0)));
241
+ --co-input-base: var(--co-theme-input, var(--input, oklch(26.9% 0 0)));
242
+ --co-ring-base: var(--co-theme-ring, var(--ring, var(--co-primary-base)));
243
+ --co-accent-base: var(
244
+ --co-theme-accent,
245
+ var(--accent, var(--co-primary-base))
246
+ );
247
+ --co-accent-foreground-base: var(
248
+ --co-theme-accent-foreground,
249
+ var(--accent-foreground, var(--co-primary-foreground-base))
250
+ );
251
+
252
+ --co-muted-mix: color-mix(
253
+ in oklch,
254
+ var(--co-background-base) 55%,
255
+ var(--co-foreground-base)
256
+ );
257
+ --co-muted-foreground-mix: color-mix(
258
+ in oklch,
259
+ var(--co-foreground-base) 65%,
260
+ white
261
+ );
262
+
263
+ --co-background-50-mix: color-mix(
264
+ in oklch,
265
+ var(--co-background-base) 98%,
266
+ var(--co-foreground-base)
267
+ );
268
+ --co-background-100-mix: color-mix(
269
+ in oklch,
270
+ var(--co-background-base) 96%,
271
+ var(--co-foreground-base)
272
+ );
273
+ --co-background-200-mix: color-mix(
274
+ in oklch,
275
+ var(--co-background-base) 94%,
276
+ var(--co-foreground-base)
277
+ );
278
+ --co-background-300-mix: color-mix(
279
+ in oklch,
280
+ var(--co-background-base) 92%,
281
+ var(--co-foreground-base)
282
+ );
283
+ --co-background-400-mix: color-mix(
284
+ in oklch,
285
+ var(--co-background-base) 90%,
286
+ var(--co-foreground-base)
287
+ );
288
+ --co-background-500-mix: color-mix(
289
+ in oklch,
290
+ var(--co-background-base) 88%,
291
+ var(--co-foreground-base)
292
+ );
293
+ --co-background-600-mix: color-mix(
294
+ in oklch,
295
+ var(--co-background-base) 86%,
296
+ var(--co-foreground-base)
297
+ );
298
+
299
+ --co-pink: var(--co-theme-pink, oklch(84.2% 0.109 354));
300
+ --co-yellow: var(--co-theme-yellow, oklch(90.3% 0.111 99));
301
+ --co-blue: var(--co-theme-blue, oklch(79.8% 0.089 241));
302
+ --co-orange: var(--co-theme-orange, oklch(68.2% 0.194 50));
303
+
304
+ --co-destructive: var(--co-theme-destructive, oklch(39.6% 0.141 25.723));
305
+ --co-destructive-foreground: var(
306
+ --co-theme-destructive-foreground,
307
+ oklch(63.7% 0.237 25.331)
308
+ );
309
+ --co-success: var(--co-theme-success, oklch(60% 0.15 142));
310
+ --co-success-foreground: var(
311
+ --co-theme-success-foreground,
312
+ oklch(85% 0.12 142)
313
+ );
314
+ --co-neutral: var(--co-theme-neutral, oklch(50% 0 0));
315
+ --co-neutral-foreground: var(--co-theme-neutral-foreground, oklch(85% 0 0));
316
+ --co-warning: var(--co-theme-warning, oklch(90.3% 0.111 99));
317
+ --co-warning-foreground: var(
318
+ --co-theme-warning-foreground,
319
+ oklch(85% 0.1 99)
320
+ );
321
+ }
322
+ }
323
+
324
+ @theme inline {
325
+ --font-co-sans: var(--co-font-sans);
326
+ --font-co-mono: var(--co-font-mono);
327
+ --color-co-background: var(--co-background);
328
+ --color-co-background-50: var(--co-background-50);
329
+ --color-co-background-100: var(--co-background-100);
330
+ --color-co-background-200: var(--co-background-200);
331
+ --color-co-background-300: var(--co-background-300);
332
+ --color-co-background-400: var(--co-background-400);
333
+ --color-co-background-500: var(--co-background-500);
334
+ --color-co-background-600: var(--co-background-600);
335
+
336
+ --color-co-foreground: var(--co-foreground);
337
+
338
+ --color-co-primary: var(--co-primary);
339
+ --color-co-primary-foreground: var(--co-primary-foreground);
340
+ --color-co-secondary: var(--co-secondary);
341
+ --color-co-secondary-foreground: var(--co-secondary-foreground);
342
+ --color-co-muted: var(--co-muted);
343
+ --color-co-muted-foreground: var(--co-muted-foreground);
344
+ --color-co-border: var(--co-border);
345
+ --color-co-input: var(--co-input);
346
+ --color-co-ring: var(--co-ring);
347
+ --radius-co: var(--co-radius);
348
+
349
+ /* custom colors */
350
+ --color-co-pink: var(--co-pink);
351
+ --color-co-yellow: var(--co-yellow);
352
+ --color-co-blue: var(--co-blue);
353
+ --color-co-orange: var(--co-orange);
354
+
355
+ /* status colors */
356
+ --color-co-destructive: var(--co-destructive);
357
+ --color-co-destructive-foreground: var(--co-destructive-foreground);
358
+ --color-co-success: var(--co-success);
359
+ --color-co-success-foreground: var(--co-success-foreground);
360
+ --color-co-neutral: var(--co-neutral);
361
+ --color-co-neutral-foreground: var(--co-neutral-foreground);
362
+ --color-co-warning: var(--co-warning);
363
+ --color-co-warning-foreground: var(--co-warning-foreground);
364
+ }
365
+
366
+ @layer utilities {
367
+ .cossistant {
368
+ .animation-delay-0 {
369
+ animation-delay: 0ms;
370
+ }
371
+ .animation-delay-200 {
372
+ animation-delay: 200ms;
373
+ }
374
+ .animation-delay-400 {
375
+ animation-delay: 400ms;
376
+ }
377
+
378
+ @keyframes bounce-dot {
379
+ 0%,
380
+ 80%,
381
+ 100% {
382
+ transform: translateY(0);
383
+ }
384
+ 40% {
385
+ transform: translateY(-6px);
386
+ }
387
+ }
388
+
389
+ .dot-bounce-1 {
390
+ animation: bounce-dot 1.4s infinite;
391
+ animation-delay: 0s;
392
+ }
393
+
394
+ .dot-bounce-2 {
395
+ animation: bounce-dot 1.4s infinite;
396
+ animation-delay: 0.16s;
397
+ }
398
+
399
+ .dot-bounce-3 {
400
+ animation: bounce-dot 1.4s infinite;
401
+ animation-delay: 0.32s;
402
+ }
403
+ }
404
+ }