react-feedback-surveys 1.6.1 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +137 -86
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +66 -15
  4. package/dist/index.js +2207 -2149
  5. package/package.json +15 -14
package/README.md CHANGED
@@ -9,28 +9,34 @@
9
9
 
10
10
  > Lightweight, customizable survey widgets to collect user feedback in React apps.
11
11
 
12
+ ## Introduction
13
+
14
+ react-feedback-surveys is a standalone, open-source (MIT) UI library — no backend, no hosting, no
15
+ account required. Render the components, wire `onScoreSubmit`/`onFeedbackSubmit` to your own backend
16
+ (or nowhere at all).
17
+
18
+ Want AI-generated insights, a hosted dashboard, and response storage without building your own backend?
19
+ Check out [feedback.tools](https://feedback.tools) — built by the same team.
20
+
12
21
  ## Table of Contents
13
22
 
23
+ - [Introduction](#introduction)
14
24
  - [Features](#features)
15
25
  - [Survey Types](#survey-types)
16
26
  - [Installation](#installation)
17
27
  * [1. Install](#1-install)
18
28
  * [2. Styles](#2-styles)
19
- - [Survey Components](#survey-components)
20
- * [CSAT5 (Customer Satisfaction Score, 5-Point Scale)](#csat5-customer-satisfaction-score-5-point-scale)
21
- * [CSAT2 (Customer Satisfaction Score, 2-Point Scale)](#csat2-customer-satisfaction-score-2-point-scale)
22
- * [NPS10 (Net Promoter Score, 0–10 Scale)](#nps10-net-promoter-score-010-scale)
23
- * [CES7 (Customer Effort Score, 7-Point Scale)](#ces7-customer-effort-score-7-point-scale)
29
+ - [Survey Component](#survey-component)
30
+ * [CSAT (Customer Satisfaction Score)](#csat-customer-satisfaction-score)
31
+ * [NPS (Net Promoter Score)](#nps-net-promoter-score)
32
+ * [CES (Customer Effort Score)](#ces-customer-effort-score)
24
33
  - [Layout Components](#layout-components)
25
34
  * [Popup](#popup)
26
35
  * [Surface](#surface)
27
36
  - [Props](#props)
28
37
  * [Shared Props](#shared-props)
38
+ * [Format Props](#format-props)
29
39
  * [Scale Style Options](#scale-style-options)
30
- + [CSAT2Survey](#csat2survey)
31
- + [CSAT5Survey](#csat5survey)
32
- + [CES7Survey](#ces7survey)
33
- + [NPS10Survey](#nps10survey)
34
40
  - [Styling](#styling)
35
41
  * [CSS Variables](#css-variables)
36
42
  * [Custom Classes](#custom-classes)
@@ -47,19 +53,23 @@
47
53
 
48
54
  ## Features
49
55
 
50
- - **Ready-to-use survey widgets** – CSAT (2 or 5 points), CES (7 points), NPS (0–10)
56
+ - **A single `Survey` component** – the format (methodology, scale length, visual style) is configuration, not a different import
57
+ - **Ready-to-use survey formats** – CSAT (2 or 5 points), CES (7 points), NPS (0–10)
51
58
  - **Multiple scale styles** – emoji, stars, numbers, thumbs
52
59
  - **Flexible placement** – embed inline or display as popup overlay
53
60
  - **Follow-up feedback** – optional text input or multiple choice responses
61
+ - **Optional email collection** – close the loop by capturing a respondent's email when no user identity is known
54
62
  - **Fully customizable** – CSS variables and custom class names
55
63
  - **Zero dependencies**
56
64
  - **TypeScript support**
57
65
 
58
66
  ## Survey Types
59
67
 
60
- - **CSAT (Customer Satisfaction Score):** 2-point (`csat2`) or 5-point (`csat5`) scales
61
- - **NPS (Net Promoter Score):** 0–10 numeric scale (`nps10`)
62
- - **CES (Customer Effort Score):** 7-point numeric scale (`ces7`)
68
+ `Survey` covers three feedback methodologies, selected with the `type` prop. `CSAT` is the only one with a variable scale length, set via `points`:
69
+
70
+ - **CSAT (Customer Satisfaction Score):** `type="csat"`, 2-point or 5-point scale (`points={2}` or `points={5}`)
71
+ - **NPS (Net Promoter Score):** `type="nps"`, fixed 0–10 scale
72
+ - **CES (Customer Effort Score):** `type="ces"`, fixed 7-point scale
63
73
 
64
74
  ## Installation
65
75
 
@@ -77,93 +87,89 @@ yarn add react-feedback-surveys
77
87
  import 'react-feedback-surveys/index.css';
78
88
  ```
79
89
 
80
- ## Survey Components
90
+ ## Survey Component
81
91
 
82
- ### CSAT5 (Customer Satisfaction Score, 5-Point Scale)
92
+ Every format is reached through the same `Survey` import — `type` and `points` pick the methodology and scale length, `scaleStyle` picks the visual style. See [Format Props](#format-props) for the full matrix of valid `type`/`points`/`scaleStyle` combinations.
83
93
 
84
- Surveys to ask users about their overall satisfaction.
94
+ ### CSAT (Customer Satisfaction Score)
95
+
96
+ Surveys to ask users about their overall satisfaction, or about a specific feature or flow.
85
97
 
86
98
  **Example questions:**
87
99
  - "How satisfied are you with our product?"
88
- - "How would you rate your overall experience?"
89
- - "How satisfied are you with our customer support?"
100
+ - "Was this search helpful?"
101
+ - "Are you satisfied with the checkout process?"
90
102
 
91
- <img alt="CSAT5" src="docs/assets/csat5.png" width="416" />
103
+ <img alt="CSAT, 5-point scale" src="docs/assets/csat5.png" width="416" />
92
104
 
93
105
  ```tsx
94
- import { CSAT5Survey } from 'react-feedback-surveys';
106
+ import { Survey } from 'react-feedback-surveys';
95
107
  import 'react-feedback-surveys/index.css';
96
108
 
97
- <CSAT5Survey
109
+ <Survey
110
+ type="csat"
111
+ points={5}
98
112
  scaleStyle="emoji"
99
113
  question="How would you rate your satisfaction with our product?"
100
114
  minLabel="Very unsatisfied"
101
115
  maxLabel="Very satisfied"
102
116
  responseType="text"
103
117
  textQuestion="We'd love to hear your thoughts — what can we improve?"
104
- textButtonLabel="Send"
118
+ textButtonSendLabel="Send"
119
+ textButtonSkipLabel="Skip"
105
120
  thankYouMessage="Thanks for your feedback!"
106
121
  onScoreSubmit={({ value }) => {/* ... */}}
107
122
  onFeedbackSubmit={({ value, text }) => {/* ... */}}
108
123
  />
109
124
  ```
110
125
 
111
- `scaleStyle`: `emoji` | `numbers` | `stars`.
112
-
113
- ### CSAT2 (Customer Satisfaction Score, 2-Point Scale)
114
-
115
- Surveys to ask users about specific features or flows.
116
-
117
- **Example questions:**
118
- - "Was this search helpful?"
119
- - "Did you find what you were looking for?"
120
- - "Are you satisfied with the checkout process?"
121
-
122
- <img alt="CSAT2" src="docs/assets/csat2.png" width="386" />
126
+ <img alt="CSAT, 2-point scale" src="docs/assets/csat2.png" width="386" />
123
127
 
124
128
  ```tsx
125
- import { CSAT2Survey } from 'react-feedback-surveys';
126
- import 'react-feedback-surveys/index.css';
127
-
128
- <CSAT2Survey
129
+ <Survey
130
+ type="csat"
131
+ points={2}
129
132
  scaleStyle="thumbs"
130
133
  question="Are you satisfied with the result?"
131
134
  responseType="text"
132
135
  textQuestion="We'd love to hear your thoughts — what can we improve?"
133
- textButtonLabel="Send"
136
+ textButtonSendLabel="Send"
137
+ textButtonSkipLabel="Skip"
134
138
  thankYouMessage="Thank you for your feedback!"
135
139
  onScoreSubmit={({ value }) => {/* ... */}}
136
140
  onFeedbackSubmit={({ value, text }) => {/* ... */}}
137
141
  />
138
142
  ```
139
143
 
140
- `scaleStyle`: `emoji` | `thumbs`.
144
+ `points={5}` → `scaleStyle`: `emoji` | `numbers` | `stars`. `points={2}` → `scaleStyle`: `emoji` | `thumbs`.
141
145
 
142
- ### NPS10 (Net Promoter Score, 0–10 Scale)
146
+ ### NPS (Net Promoter Score)
143
147
 
144
- Surveys to ask users if they'd recommend your product.
148
+ Surveys to ask users if they'd recommend your product. Fixed 0–10 scale — no `points` prop needed.
145
149
 
146
150
  **Example questions:**
147
151
  - "How likely are you to recommend us to a friend or colleague?"
148
152
  - "On a scale of 0-10, would you recommend our service?"
149
153
  - "How likely are you to recommend this product to others?"
150
154
 
151
- <img alt="NPS10" src="docs/assets/nps10.png" width="616" />
155
+ <img alt="NPS" src="docs/assets/nps10.png" width="616" />
152
156
 
153
- <img alt="NPS10 mobile" src="docs/assets/nps10-mobile.png" width="340" />
157
+ <img alt="NPS mobile" src="docs/assets/nps10-mobile.png" width="340" />
154
158
 
155
159
  ```tsx
156
- import { NPS10Survey } from 'react-feedback-surveys';
160
+ import { Survey } from 'react-feedback-surveys';
157
161
  import 'react-feedback-surveys/index.css';
158
162
 
159
- <NPS10Survey
163
+ <Survey
164
+ type="nps"
160
165
  scaleStyle="numbers"
161
166
  question="How likely are you to recommend our product/service to a friend or colleague?"
162
167
  minLabel="Very unlikely"
163
168
  maxLabel="Very likely"
164
169
  responseType="text"
165
170
  textQuestion="We'd love to hear your thoughts — what can we improve?"
166
- textButtonLabel="Send"
171
+ textButtonSendLabel="Send"
172
+ textButtonSkipLabel="Skip"
167
173
  thankYouMessage="Thank you for your feedback!"
168
174
  onScoreSubmit={({ value }) => {/* ... */}}
169
175
  onFeedbackSubmit={({ value, text }) => {/* ... */}}
@@ -172,29 +178,31 @@ import 'react-feedback-surveys/index.css';
172
178
 
173
179
  `scaleStyle`: `numbers`.
174
180
 
175
- ### CES7 (Customer Effort Score, 7-Point Scale)
181
+ ### CES (Customer Effort Score)
176
182
 
177
- Surveys to ask users how easy it is to use your product.
183
+ Surveys to ask users how easy it is to use your product. Fixed 7-point scale — no `points` prop needed.
178
184
 
179
185
  **Example questions:**
180
186
  - "How easy was it to complete your task?"
181
187
  - "How much effort did it take to resolve your issue?"
182
188
  - "How easy was it to sign up for an account?"
183
189
 
184
- <img alt="CES7" src="docs/assets/ces7.png" width="436" />
190
+ <img alt="CES" src="docs/assets/ces7.png" width="436" />
185
191
 
186
192
  ```tsx
187
- import { CES7Survey } from 'react-feedback-surveys';
193
+ import { Survey } from 'react-feedback-surveys';
188
194
  import 'react-feedback-surveys/index.css';
189
195
 
190
- <CES7Survey
196
+ <Survey
197
+ type="ces"
191
198
  scaleStyle="numbers"
192
199
  question="How easy was it to complete your task?"
193
200
  minLabel="Very difficult"
194
201
  maxLabel="Very easy"
195
202
  responseType="text"
196
203
  textQuestion="We'd love to hear your thoughts — what can we improve?"
197
- textButtonLabel="Send"
204
+ textButtonSendLabel="Send"
205
+ textButtonSkipLabel="Skip"
198
206
  thankYouMessage="Thank you for your feedback!"
199
207
  onScoreSubmit={({ value }) => {/* ... */}}
200
208
  onFeedbackSubmit={({ value, text }) => {/* ... */}}
@@ -214,7 +222,7 @@ The `<Popup>` component wraps survey widgets in a fixed overlay that slides in f
214
222
  #### Usage
215
223
 
216
224
  ```tsx
217
- import { Popup, CSAT5Survey } from 'react-feedback-surveys';
225
+ import { Popup, Survey } from 'react-feedback-surveys';
218
226
  import 'react-feedback-surveys/index.css';
219
227
 
220
228
  <Popup
@@ -227,7 +235,9 @@ import 'react-feedback-surveys/index.css';
227
235
  placement="bottomRight"
228
236
  onClose={() => console.log('Closed')}
229
237
  >
230
- <CSAT5Survey
238
+ <Survey
239
+ type="csat"
240
+ points={5}
231
241
  scaleStyle="stars"
232
242
  question="How would you rate your satisfaction?"
233
243
  onScoreSubmit={({ value }) => {/* ... */}}
@@ -246,7 +256,7 @@ import 'react-feedback-surveys/index.css';
246
256
  | `children` | `React.ReactNode` | - | - | Content to render inside the popup (typically a survey component). |
247
257
  | `onClose` | `() => void` | - | - | Callback fired when the close button is clicked. |
248
258
 
249
- For more examples, check out the Storybook stories (e.g., `CSAT5Survey.stories.tsx`, `CSAT2Survey.stories.tsx`).
259
+ For more examples, check out the Storybook stories under `widgets/Survey` (grouped by CSAT/NPS/CES in the sidebar).
250
260
 
251
261
  ### Surface
252
262
 
@@ -260,11 +270,13 @@ The Surface component provides:
260
270
  #### Usage
261
271
 
262
272
  ```tsx
263
- import { Surface, CSAT5Survey } from 'react-feedback-surveys';
273
+ import { Surface, Survey } from 'react-feedback-surveys';
264
274
  import 'react-feedback-surveys/index.css';
265
275
 
266
276
  <Surface className="custom-surface">
267
- <CSAT5Survey
277
+ <Survey
278
+ type="csat"
279
+ points={5}
268
280
  scaleStyle="stars"
269
281
  question="How would you rate your satisfaction?"
270
282
  onScoreSubmit={({ value }) => {/* ... */}}
@@ -283,7 +295,7 @@ The Surface component uses the `--ft-surface-padding`, `--ft-surface-padding-mob
283
295
 
284
296
  ## Props
285
297
 
286
- Most props are shared across all survey widgets. Each widget differs only in its `scaleStyle` values.
298
+ Most props are shared across every survey format. `type` (and `points`, for CSAT) select the format; `scaleStyle` picks its visual style — see [Format Props](#format-props).
287
299
 
288
300
  ### Shared Props
289
301
 
@@ -296,9 +308,16 @@ Most props are shared across all survey widgets. Each widget differs only in its
296
308
  | `maxLabel` | `string` | - | Right label for the scale. |
297
309
  | `responseType` | `null \| 'text' \| 'choices'` | - | Enables optional follow-up feedback. |
298
310
  | `textQuestion` | `string` | - | Follow-up question displayed when `responseType` is defined. |
299
- | `textButtonLabel` | `string` | - | Submit label for the feedback screen. |
311
+ | `textButtonSendLabel` | `string` | - | Submit label for the feedback screen. |
312
+ | `textButtonSkipLabel` | `string` | - | Skip label for the feedback screen. |
300
313
  | `choiceOptions` | `string[] \| null` | - | Predefined choices (when `responseType === 'choices'`). |
301
314
  | `thankYouMessage` | `string` | required | Message shown after submission. |
315
+ | `collectContact` | `boolean` | - | Enables an optional email collection step before the success screen. |
316
+ | `userId` | `string` | - | Existing user identity. When provided, the email collection step is skipped. |
317
+ | `contactQuestion` | `string` | - | Question shown on the email collection screen. |
318
+ | `contactSubtext` | `string` | - | Descriptive text shown above the email input. |
319
+ | `contactButtonSendLabel` | `string` | - | Submit label for the email collection screen. |
320
+ | `contactButtonSkipLabel` | `string` | - | Skip label for the email collection screen. |
302
321
 
303
322
  #### ClassNamesConfig Type
304
323
 
@@ -311,6 +330,7 @@ interface ClassNamesConfig {
311
330
  body?: string; // Main content region (rating scale, feedback form or success)
312
331
  rating?: string; // Additional class applied when rating screen is active
313
332
  feedback?: string; // Additional class applied when feedback screen is active
333
+ contact?: string; // Additional class applied when email collection screen is active
314
334
  success?: string; // Additional class applied when success screen is active
315
335
  close?: string; // Close button
316
336
  };
@@ -331,12 +351,14 @@ interface ClassNamesConfig {
331
351
  |--------------------|---------------------------------------------------|----------|-------------------------------------------------------------------------------------------------------------|
332
352
  | `onScoreSubmit` | `(payload: ScorePayload) => void \| Promise<void>` | - | Fires immediately when a score is selected, before any follow-up feedback screen. Captures the raw rating. |
333
353
  | `onFeedbackSubmit` | `(payload: FeedbackPayload) => void \| Promise<void>` | - | Fires when feedback is submitted. Includes the selected score and the user's text(s). |
354
+ | `onContactSubmit` | `(payload: ContactPayload) => void \| Promise<void>` | - | Fires when the respondent submits an email on the optional email collection screen. Not called when the step is skipped or not shown. |
334
355
 
335
356
  **Event Payload Types:**
336
357
 
337
358
  ```typescript
338
359
  type ScorePayload = { value: number };
339
360
  type FeedbackPayload = { value: number; text?: string | string[] };
361
+ type ContactPayload = { value?: number; text?: string | string[]; email: string };
340
362
  ```
341
363
 
342
364
  > **Event behavior**
@@ -357,6 +379,8 @@ The actual `value` returned depends on the survey type:
357
379
  Invoked when the user completes the follow-up step and submits their feedback (only applies when `responseType` is `text` or `choices`).
358
380
  This callback provides both the original score and the user's input.
359
381
 
382
+ The feedback step is always optional: respondents can submit feedback or skip it via the `textButtonSkipLabel` button (or by submitting with empty input), and either action advances to the next screen. `onFeedbackSubmit` only fires when feedback text or choices are actually submitted; it is **not** called when the step is skipped.
383
+
360
384
  **Arguments:**
361
385
  - `value: number` — the same score previously passed to `onScoreSubmit`
362
386
  - `text: string | string[]` — depends on `responseType`:
@@ -368,36 +392,58 @@ You should listen to **both** `onScoreSubmit` and `onFeedbackSubmit`.
368
392
  A user may select a score but abandon the follow-up screen (close the widget, navigate away, refresh, etc.).
369
393
  Handling both events ensures you capture at least the rating even when additional feedback is not provided — and still receive extended data when it is.
370
394
 
395
+ #### `onContactSubmit`
371
396
 
372
- ### Scale Style Options
373
-
374
- Each survey type supports specific scale styles for displaying the rating interface:
397
+ When `collectContact` is `true` and no `userId` is provided, an optional email collection screen is shown after the rating/feedback screens and before the success screen. This lets you "close the feedback loop" by capturing an email for a respondent whose identity isn't already known to the host app.
375
398
 
376
- #### CSAT2Survey
399
+ - If `userId` is provided, the step is skipped entirely — the widget assumes identity is already known.
400
+ - The step is always optional: respondents can submit an email or skip it, and either action advances to the success screen.
401
+ - `onContactSubmit` only fires when the respondent actually submits an email; it is **not** called when the step is skipped or not shown.
377
402
 
378
- | Prop | Type | Required | Description |
379
- |--------------------------|-------------------------|----------|-----------------------------------------------------------------------------------|
380
- | `scaleStyle` | `'emoji'` \| `'thumbs'` | required | Emoji mood scale style (happy/sad faces) or thumbs up/down emoji scale style. |
403
+ **Arguments:**
404
+ - `value?: number` — the selected rating, if any.
405
+ - `text?: string | string[]` — the submitted feedback text or choices, if any.
406
+ - `email: string` — the email address entered by the respondent.
381
407
 
382
- #### CSAT5Survey
408
+ ```tsx
409
+ <Survey
410
+ type="csat"
411
+ points={5}
412
+ scaleStyle="numbers"
413
+ question="How would you rate your satisfaction with our product?"
414
+ responseType="text"
415
+ textQuestion="We'd love to hear your thoughts — what can we improve?"
416
+ thankYouMessage="Thanks for your feedback!"
417
+ collectContact
418
+ userId={currentUser?.id}
419
+ contactQuestion="Mind sharing your email so we can follow up?"
420
+ contactButtonSendLabel="Submit"
421
+ contactButtonSkipLabel="Skip"
422
+ onScoreSubmit={({ value }) => {/* ... */}}
423
+ onFeedbackSubmit={({ value, text }) => {/* ... */}}
424
+ onContactSubmit={({ value, text, email }) => {/* attribute the feedback to this email */}}
425
+ />
426
+ ```
383
427
 
384
- | Prop | Type | Required | Description |
385
- |--------------------------|---------------------------------------|----------|----------------------------------------------------------------------------------------------------------------------|
386
- | `scaleStyle` | `'emoji'` \| `'numbers'` \| `'stars'` | required | Emoji scale style (5 emotion levels), numeric scale style (1–5), or star rating scale style (1–5 stars). |
428
+ ### Format Props
387
429
 
388
- #### CES7Survey
430
+ | Prop | Type | Required | Description |
431
+ |------|------|----------|--------------|
432
+ | `type` | `'csat'` \| `'nps'` \| `'ces'` | required | Survey methodology. Determines the scale range and which `scaleStyle`/`points` combinations are valid. |
433
+ | `points` | `2` \| `5` | required for `type="csat"`; not used otherwise | Number of points on the scale. `nps` is a fixed 0–10 scale and `ces` a fixed 1–7 scale, so neither takes `points`. |
389
434
 
390
- | Prop | Type | Required | Description |
391
- |--------------------------|-------------|----------|------------------------------------|
392
- | `scaleStyle` | `'numbers'` | required | Numeric scale style (1–7). |
435
+ ### Scale Style Options
393
436
 
394
- #### NPS10Survey
437
+ Valid `scaleStyle` values depend on `type` (and `points`, for CSAT):
395
438
 
396
- | Prop | Type | Required | Description |
397
- |--------------------------|-------------|----------|-------------------------------------|
398
- | `scaleStyle` | `'numbers'` | required | Numeric scale style (0–10). |
439
+ | `type` | `points` | Scale range | Valid `scaleStyle` |
440
+ |--------|----------|-------------|---------------------|
441
+ | `csat` | `5` | 1–5 | `'emoji'` (5 emotion levels) \| `'numbers'` \| `'stars'` (1–5 stars) |
442
+ | `csat` | `2` | 0–1 | `'emoji'` (happy/sad faces) \| `'thumbs'` (thumbs up/down) |
443
+ | `ces` | — | 1–7 | `'numbers'` |
444
+ | `nps` | — | 0–10 | `'numbers'` |
399
445
 
400
- Note: The numeric ranges are defined by the widget (e.g., CSAT5 uses a 1–5 scale, NPS10 uses 0–10).
446
+ Invalid combinations (e.g. `type="ces"` with `scaleStyle="stars"`) are rejected at the type level.
401
447
 
402
448
  ## Styling
403
449
 
@@ -502,7 +548,7 @@ Here's an example of dark theme colors that work well with the survey components
502
548
  **Implementation example with React:**
503
549
 
504
550
  ```tsx
505
- import { CSAT5Survey } from 'react-feedback-surveys';
551
+ import { Survey } from 'react-feedback-surveys';
506
552
  import 'react-feedback-surveys/index.css';
507
553
  import { useEffect } from 'react';
508
554
 
@@ -526,7 +572,9 @@ function App() {
526
572
  }, []);
527
573
 
528
574
  return (
529
- <CSAT5Survey
575
+ <Survey
576
+ type="csat"
577
+ points={5}
530
578
  scaleStyle="emoji"
531
579
  question="How satisfied are you with our product?"
532
580
  onScoreSubmit={({ value }) => console.log('Score:', value)}
@@ -561,7 +609,7 @@ For deeper customization strategies, see the section below.
561
609
 
562
610
  ### Custom Classes
563
611
 
564
- All widgets accept a `classNames` prop with two optional groups: `base` (outer shell) and `scale` (the interactive
612
+ `Survey` accepts a `classNames` prop with two optional groups: `base` (outer shell) and `scale` (the interactive
565
613
  rating UI). Pass your own class names to override styles without relying on internal selectors.
566
614
 
567
615
  When is this useful?
@@ -580,6 +628,7 @@ Reference: available keys
580
628
  | `base.body` | Main content region (rating scale, feedback form or success) |
581
629
  | `base.rating` | Additional class applied when rating screen is active |
582
630
  | `base.feedback` | Additional class applied when feedback screen is active |
631
+ | `base.contact` | Additional class applied when email collection screen is active |
583
632
  | `base.success` | Additional class applied when success screen is active |
584
633
  | `base.close` | Close button |
585
634
  | `scale.base` | Container around the scale style |
@@ -589,13 +638,13 @@ Reference: available keys
589
638
  | `scale.score` | Number inside a scale button (for numeric variants) |
590
639
  | `scale.labels` | Left/Right labels displayed under the scale |
591
640
 
592
- Example: customizing a CSAT5Survey widget
641
+ Example: customizing a `Survey` widget
593
642
 
594
643
  ```tsx
595
- import { CSAT5Survey } from 'react-feedback-surveys';
644
+ import { Survey } from 'react-feedback-surveys';
596
645
  import 'react-feedback-surveys/index.css';
597
646
 
598
- <CSAT5Survey
647
+ <Survey
599
648
  classNames={{
600
649
  base: {
601
650
  base: 'my-survey-base',
@@ -611,6 +660,8 @@ import 'react-feedback-surveys/index.css';
611
660
  labels: 'my-scale-labels',
612
661
  }
613
662
  }}
663
+ type="csat"
664
+ points={5}
614
665
  scaleStyle="numbers"
615
666
  question="How would you rate your satisfaction with our product?"
616
667
  minLabel="Very unsatisfied"
package/dist/index.css CHANGED
@@ -1,2 +1,2 @@
1
- :root,:host{--_color-text:var(--ft-color-text,30 8% 14%);--_color-bg:var(--ft-color-bg,0 0% 100%);--_color-muted:var(--ft-color-muted,222 11% 46%);--_color-error:var(--ft-color-error,32 95% 44%);--_color-border:var(--ft-color-border,214 14% 83%);--_color-outline:var(--ft-color-outline,218 14% 65%);--_color-shadow:var(--ft-color-shadow,0 0% 0%);--_color-control:var(--ft-color-control,214 20% 96%);--_popup-z-index:var(--ft-popup-z-index,49);--_popup-head-offset:var(--ft-popup-head-offset,0);--_surface-padding:var(--ft-surface-padding,24px);--_surface-padding-mobile:var(--ft-surface-padding-mobile,20px);--_surface-radius:var(--ft-surface-radius,8px)}._base_d3jtv_1{padding:var(--_surface-padding);background-color:hsl(var(--_color-bg)/100%);border-radius:var(--_surface-radius);box-shadow:0 0 10px hsl(var(--_color-shadow)/20%);display:inline-block;position:relative;overflow:auto}@media (width<=399px){._base_d3jtv_1{padding:var(--_surface-padding-mobile)}}._base_1vr2h_1{--_popup-head-offset:32px;z-index:var(--_popup-z-index);box-sizing:border-box;max-width:calc(100vw - var(--_surface-padding) * 2);max-height:calc(100vh - var(--_surface-padding) * 2);transform-origin:50% 100%;margin:0;display:flex;position:fixed}@media (width<=399px){._base_1vr2h_1{max-width:calc(100vw - var(--_surface-padding-mobile) * 2);max-height:calc(100vh - var(--_surface-padding-mobile) * 2)}}._animated_1vr2h_19{opacity:0;animation:.12s ease-in-out forwards _fadeForward_1vr2h_1}@keyframes _fadeForward_1vr2h_1{0%{opacity:0;transform:translateY(8px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}._topLeft_1vr2h_34{top:var(--_surface-padding);left:var(--_surface-padding)}@media (width<=399px){._topLeft_1vr2h_34{top:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._topRight_1vr2h_45{top:var(--_surface-padding);right:var(--_surface-padding)}@media (width<=399px){._topRight_1vr2h_45{top:var(--_surface-padding-mobile);right:var(--_surface-padding-mobile)}}._bottomRight_1vr2h_56{right:var(--_surface-padding);bottom:var(--_surface-padding)}@media (width<=399px){._bottomRight_1vr2h_56{right:var(--_surface-padding-mobile);bottom:var(--_surface-padding-mobile)}}._bottomLeft_1vr2h_67{bottom:var(--_surface-padding);left:var(--_surface-padding)}@media (width<=399px){._bottomLeft_1vr2h_67{bottom:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._close_1vr2h_78{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._close_1vr2h_78:disabled{cursor:default}._close_1vr2h_78{top:var(--_surface-padding);width:24px;height:24px;color:hsl(var(--_color-outline)/100%);transition:color .15s;position:absolute;inset-inline-end:var(--_surface-padding)}._close_1vr2h_78:hover{color:hsl(var(--_color-text)/100%)}._close_1vr2h_78:before,._close_1vr2h_78:after{content:"";background-color:currentColor;border-radius:1px;position:absolute;top:50%;left:50%;transform:rotate(45deg)}._close_1vr2h_78:before{width:16px;height:2px;margin:-1px 0 0 -8px}._close_1vr2h_78:after{width:2px;height:16px;margin:-8px 0 0 -1px}@media (width<=399px){._close_1vr2h_78{top:var(--_surface-padding-mobile);inset-inline-end:var(--_surface-padding-mobile)}}._choices_f81xp_1{margin:0 0 12px}._choice_f81xp_1{display:flex}._choice_f81xp_1+._choice_f81xp_1{margin-top:12px}._label_f81xp_12{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:flex-start;gap:8px;display:inline-flex;position:relative}._sr_f81xp_21{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._checkbox_f81xp_33{white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}._check_f81xp_33{border:1px solid hsl(var(--_color-border)/100%);border-radius:4px;min-width:20px;height:20px}._label_f81xp_12:hover ._check_f81xp_33{border-color:hsl(var(--_color-text)/100%)}._checkbox_f81xp_33:checked+._check_f81xp_33{background-color:hsl(var(--_color-text)/100%);border-color:hsl(var(--_color-text)/100%);position:relative}._checkbox_f81xp_33:checked+._check_f81xp_33:after{content:"";border:2px solid;border-color:transparent transparent hsl(var(--_color-bg)/100%) hsl(var(--_color-bg)/100%);pointer-events:none;width:10px;height:7px;position:absolute;top:50%;left:50%;transform:translate(-45%,-75%)rotate(-45deg)}._input_f81xp_70{height:32px;margin-top:8px}._textarea_f81xp_75{height:192px}._input_f81xp_70,._textarea_f81xp_75{box-sizing:border-box;width:100%;color:hsl(var(--_color-text)/100%);background-color:hsl(var(--_color-bg)/100%);border:1px solid hsl(var(--_color-border)/100%);border-radius:var(--_surface-radius);outline:0 solid hsl(var(--_color-outline)/14%);resize:none;padding:8px 12px;font-size:16px;line-height:1.5;transition:background-color .15s,border-color .15s,outline-width .2s}._input_f81xp_70:focus,._textarea_f81xp_75:focus{outline:4px solid hsl(var(--_color-outline)/14%)}._input_f81xp_70._invalid_f81xp_98,._textarea_f81xp_75._invalid_f81xp_98{border-color:hsl(var(--_color-error)/100%)}._submit_f81xp_103{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._submit_f81xp_103:disabled{cursor:default}._submit_f81xp_103{text-align:center;color:hsl(var(--_color-bg)/100%);background-color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);padding:8px 32px;font-size:16px;font-weight:400;transition:opacity .2s}._submit_f81xp_103:hover{opacity:.85}._submit_f81xp_103{width:100%;margin-top:16px}._success_f81xp_135{text-align:center;padding:16px 0 32px;font-size:16px;font-weight:600;line-height:1.5}._base_1ilpx_1{text-align:center;padding:0 24px}._icon_1ilpx_6{display:inline-block}._base_1xpqq_1{color:hsl(var(--_color-text)/100%);padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif}._head_1xpqq_7{padding-block:0 20px;padding-inline:0 var(--_popup-head-offset);gap:8px;display:flex}._title_1xpqq_14{flex:1 0;font-family:inherit;font-size:16px;font-style:normal;font-weight:500;line-height:1.4}._base_1e603_1{margin:12px 0 0;display:flex}._label_1e603_6{max-width:50%;color:hsl(var(--_color-muted)/100%);flex:0 0 50%;font-size:14px;line-height:1.4286}._between_1e603_14{justify-content:space-between}._between_1e603_14 ._label_1e603_6{flex:0 0 50%;max-width:50%}._between_1e603_14 ._label_1e603_6:first-child{text-align:start}._between_1e603_14 ._label_1e603_6:last-child{text-align:end}._center_1e603_28 ._label_1e603_6{flex:0 0 50%;max-width:50%}._center_1e603_28 ._label_1e603_6:first-child{text-align:end;padding-right:8px}._center_1e603_28 ._label_1e603_6:last-child{text-align:start;padding-left:8px}._center_1e603_28 ._text_1e603_40{text-align:center;min-width:56px;display:inline-block}@media (width<=599px){._center_1e603_28 ._text_1e603_40{min-width:48px}}._list_grany_1{justify-content:center;gap:16px;display:flex}._icon_grany_7{transition:transform .12s;transform:scale(1)}._button_grany_12{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_grany_12:disabled{cursor:default}._button_grany_12{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_grany_12:hover ._icon_grany_7{transform:scale(1.15)}._button_grany_12:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}@media (width<=399px){._button_grany_12{width:48px;height:48px}}._list_1yzyr_1{justify-content:center;gap:16px;display:flex}._icon_1yzyr_7{transition:transform .12s;transform:scale(1)}._button_1yzyr_12{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1yzyr_12:disabled{cursor:default}._button_1yzyr_12{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_1yzyr_12:hover ._icon_1yzyr_7{transform:scale(1.15)}._button_1yzyr_12:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._base_113r0_1{max-width:100%}._rating_113r0_5,._feedback_113r0_6,._success_113r0_7{width:280px}@media (width<=399px){._rating_113r0_5,._feedback_113r0_6,._success_113r0_7{width:100%}}._list_1vfe4_1{justify-content:space-between;display:flex}._icon_1vfe4_6{transition:transform .12s;transform:scale(1)}._button_1vfe4_11{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1vfe4_11:disabled{cursor:default}._button_1vfe4_11{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_1vfe4_11:hover ._icon_1vfe4_6{transform:scale(1.15)}._button_1vfe4_11:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}@media (width<=399px){._button_1vfe4_11{width:48px;height:48px}}._list_16sag_1{justify-content:space-between;display:flex}._button_16sag_6{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_16sag_6:disabled{cursor:default}._button_16sag_6{width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:flex}._button_16sag_6:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}._button_16sag_6:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._list_1kpxu_1{justify-content:space-between;display:flex}._icon_1kpxu_6{transition:transform .12s;transform:scale(1)}._button_1kpxu_11{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1kpxu_11:disabled{cursor:default}._button_1kpxu_11{justify-content:center;align-items:center;width:40px;height:40px;display:flex}._button_1kpxu_11:hover ._icon_1kpxu_6{transform:scale(1.1)}._button_1kpxu_11:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._base_m4qio_1{max-width:100%}._rating_m4qio_5,._feedback_m4qio_6,._success_m4qio_7{width:320px}@media (width<=399px){._rating_m4qio_5,._feedback_m4qio_6,._success_m4qio_7{width:100%}}._list_whbas_1{justify-content:space-between;gap:6px;display:flex}@media (width<=599px){._list_whbas_1{flex-direction:column-reverse;gap:4px}}._button_whbas_13{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_whbas_13:disabled{cursor:default}._button_whbas_13{text-align:center;width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:inline-block}._button_whbas_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media (width<=599px){._button_whbas_13:hover{box-shadow:none}}._button_whbas_13:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._button_whbas_13 ._score_whbas_52{display:inline}._button_whbas_13 ._label_whbas_55{display:none}@media (width<=599px){._button_whbas_13 ._label_whbas_55{display:inline}._button_whbas_13{border-radius:6px;width:100%;height:auto;padding:6px;font-size:14px;line-height:20px}._labels_whbas_75{display:none}}._base_12no3_1{max-width:100%}._rating_12no3_5{width:340px}@media (width<=599px){._rating_12no3_5{width:280px}}@media (width<=399px){._rating_12no3_5{width:100%}}._feedback_12no3_19,._success_12no3_20{width:280px}@media (width<=599px){._feedback_12no3_19,._success_12no3_20{width:100%}}._list_divjm_1{justify-content:space-between;gap:6px;display:flex}@media (width<=599px){._list_divjm_1{flex-direction:column-reverse;gap:4px}}._button_divjm_13{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_divjm_13:disabled{cursor:default}._button_divjm_13{text-align:center;width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:block}._button_divjm_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media (width<=599px){._button_divjm_13:hover{box-shadow:none}}._button_divjm_13:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._button_divjm_13 ._score_divjm_52{display:inline}._button_divjm_13 ._label_divjm_55{display:none}@media (width<=599px){._button_divjm_13 ._label_divjm_55{display:inline}._button_divjm_13{border-radius:6px;width:100%;height:auto;padding:6px;font-size:14px;line-height:20px}._labels_divjm_75{display:none}}._base_1invl_1{max-width:100%}._rating_1invl_5{width:520px}@media (width<=599px){._rating_1invl_5{width:320px}}@media (width<=399px){._rating_1invl_5{width:100%}}._feedback_1invl_19,._success_1invl_20{width:280px}@media (width<=599px){._feedback_1invl_19,._success_1invl_20{width:100%}}
1
+ :root,:host{--_color-text:var(--ft-color-text,30 8% 14%);--_color-bg:var(--ft-color-bg,0 0% 100%);--_color-muted:var(--ft-color-muted,222 11% 46%);--_color-error:var(--ft-color-error,32 95% 44%);--_color-border:var(--ft-color-border,214 14% 83%);--_color-outline:var(--ft-color-outline,218 14% 65%);--_color-shadow:var(--ft-color-shadow,0 0% 0%);--_color-control:var(--ft-color-control,214 20% 96%);--_popup-z-index:var(--ft-popup-z-index,49);--_popup-head-offset:var(--ft-popup-head-offset,0);--_surface-padding:var(--ft-surface-padding,24px);--_surface-padding-mobile:var(--ft-surface-padding-mobile,20px);--_surface-radius:var(--ft-surface-radius,8px);--_font-family:var(--ft-font-family,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);font-family:var(--_font-family)}input,textarea,select{font:inherit}._base_d5qlz_1{padding:var(--_surface-padding);background-color:hsl(var(--_color-bg)/100%);border-radius:var(--_surface-radius);box-shadow:0 0 10px hsl(var(--_color-shadow)/20%);display:block;position:relative;overflow:auto}@media (width<=399px){._base_d5qlz_1{padding:var(--_surface-padding-mobile)}}._base_1vr2h_1{--_popup-head-offset:32px;z-index:var(--_popup-z-index);box-sizing:border-box;max-width:calc(100vw - var(--_surface-padding) * 2);max-height:calc(100vh - var(--_surface-padding) * 2);transform-origin:50% 100%;margin:0;display:flex;position:fixed}@media (width<=399px){._base_1vr2h_1{max-width:calc(100vw - var(--_surface-padding-mobile) * 2);max-height:calc(100vh - var(--_surface-padding-mobile) * 2)}}._animated_1vr2h_19{opacity:0;animation:.12s ease-in-out forwards _fadeForward_1vr2h_1}@keyframes _fadeForward_1vr2h_1{0%{opacity:0;transform:translateY(8px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}._topLeft_1vr2h_34{top:var(--_surface-padding);left:var(--_surface-padding)}@media (width<=399px){._topLeft_1vr2h_34{top:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._topRight_1vr2h_45{top:var(--_surface-padding);right:var(--_surface-padding)}@media (width<=399px){._topRight_1vr2h_45{top:var(--_surface-padding-mobile);right:var(--_surface-padding-mobile)}}._bottomRight_1vr2h_56{right:var(--_surface-padding);bottom:var(--_surface-padding)}@media (width<=399px){._bottomRight_1vr2h_56{right:var(--_surface-padding-mobile);bottom:var(--_surface-padding-mobile)}}._bottomLeft_1vr2h_67{bottom:var(--_surface-padding);left:var(--_surface-padding)}@media (width<=399px){._bottomLeft_1vr2h_67{bottom:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._close_1vr2h_78{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._close_1vr2h_78:disabled{cursor:default}._close_1vr2h_78{top:var(--_surface-padding);width:24px;height:24px;color:hsl(var(--_color-outline)/100%);transition:color .15s;position:absolute;inset-inline-end:var(--_surface-padding)}._close_1vr2h_78:hover{color:hsl(var(--_color-text)/100%)}._close_1vr2h_78:before,._close_1vr2h_78:after{content:"";background-color:currentColor;border-radius:1px;position:absolute;top:50%;left:50%;transform:rotate(45deg)}._close_1vr2h_78:before{width:16px;height:2px;margin:-1px 0 0 -8px}._close_1vr2h_78:after{width:2px;height:16px;margin:-8px 0 0 -1px}@media (width<=399px){._close_1vr2h_78{top:var(--_surface-padding-mobile);inset-inline-end:var(--_surface-padding-mobile)}}._sr_clg7k_1{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._subtext_clg7k_13{margin:0 0 16px;line-height:1.25}._input_clg7k_18{box-sizing:border-box;width:100%;color:hsl(var(--_color-text)/100%);background-color:hsl(var(--_color-bg)/100%);border:1px solid hsl(var(--_color-border)/100%);border-radius:var(--_surface-radius);outline:0 solid hsl(var(--_color-outline)/14%);padding:4px 12px;font-family:inherit;font-size:16px;line-height:1.5;transition:background-color .15s,border-color .15s,outline-width .2s}._input_clg7k_18:focus{outline:4px solid hsl(var(--_color-outline)/14%)}._input_clg7k_18._invalid_clg7k_35{border-color:hsl(var(--_color-error)/100%)}._input_clg7k_18._invalid_clg7k_35:focus{outline-color:hsl(var(--_color-error)/14%)}._submit_clg7k_42{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._submit_clg7k_42:disabled{cursor:default}._submit_clg7k_42{text-align:center;color:hsl(var(--_color-bg)/100%);background-color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);padding:8px 32px;font-size:16px;font-weight:400;transition:opacity .2s}._submit_clg7k_42:hover{opacity:.85}._submit_clg7k_42{width:100%;margin-top:16px}._skip_clg7k_74{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._skip_clg7k_74:disabled{cursor:default}._skip_clg7k_74{text-align:center;width:100%;color:hsl(var(--_color-muted)/100%);cursor:pointer;margin-top:8px;padding:4px;font-size:16px;font-weight:500;line-height:1.5;display:block}._skip_clg7k_74:hover{color:hsl(var(--_color-text)/100%)}._choices_nhux3_1{margin:0 0 12px}._choice_nhux3_1{display:flex}._choice_nhux3_1+._choice_nhux3_1{margin-top:12px}._label_nhux3_12{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:flex-start;gap:8px;display:inline-flex;position:relative}._sr_nhux3_21{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._checkbox_nhux3_33{white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}._check_nhux3_33{border:1px solid hsl(var(--_color-border)/100%);border-radius:4px;min-width:20px;height:20px}._label_nhux3_12:hover ._check_nhux3_33{border-color:hsl(var(--_color-text)/100%)}._checkbox_nhux3_33:focus-visible+._check_nhux3_33{outline:4px solid hsl(var(--_color-outline)/14%)}._checkbox_nhux3_33:checked+._check_nhux3_33{background-color:hsl(var(--_color-text)/100%);border-color:hsl(var(--_color-text)/100%);position:relative}._checkbox_nhux3_33:checked+._check_nhux3_33:after{content:"";border:2px solid;border-color:transparent transparent hsl(var(--_color-bg)/100%) hsl(var(--_color-bg)/100%);pointer-events:none;width:10px;height:4px;position:absolute;top:50%;left:50%;transform:translate(-45%,-75%)rotate(-45deg)}._input_nhux3_74{margin-top:8px;padding:4px 12px}._textarea_nhux3_79{height:120px;padding:8px 12px}._input_nhux3_74,._textarea_nhux3_79{box-sizing:border-box;width:100%;color:hsl(var(--_color-text)/100%);background-color:hsl(var(--_color-bg)/100%);border:1px solid hsl(var(--_color-border)/100%);border-radius:var(--_surface-radius);outline:0 solid hsl(var(--_color-outline)/14%);resize:none;font-family:inherit;font-size:16px;line-height:1.5;transition:background-color .15s,border-color .15s,outline-width .2s}._input_nhux3_74:focus,._textarea_nhux3_79:focus{outline:4px solid hsl(var(--_color-outline)/14%)}._submit_nhux3_104{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._submit_nhux3_104:disabled{cursor:default}._submit_nhux3_104{text-align:center;color:hsl(var(--_color-bg)/100%);background-color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);padding:8px 32px;font-size:16px;font-weight:400;transition:opacity .2s}._submit_nhux3_104:hover{opacity:.85}._submit_nhux3_104{width:100%;margin-top:16px}._skip_nhux3_136{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._skip_nhux3_136:disabled{cursor:default}._skip_nhux3_136{text-align:center;width:100%;color:hsl(var(--_color-muted)/100%);cursor:pointer;margin-top:8px;padding:4px;font-size:16px;font-weight:500;line-height:1.5;display:block}._skip_nhux3_136:hover{color:hsl(var(--_color-text)/100%)}._success_nhux3_166{text-align:center;padding:16px 0 32px;font-size:16px;font-weight:600;line-height:1.5}._base_1ilpx_1{text-align:center;padding:0 24px}._icon_1ilpx_6{display:inline-block}._base_1xpqq_1{color:hsl(var(--_color-text)/100%);padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif}._head_1xpqq_7{padding-block:0 20px;padding-inline:0 var(--_popup-head-offset);gap:8px;display:flex}._title_1xpqq_14{flex:1 0;font-family:inherit;font-size:16px;font-style:normal;font-weight:500;line-height:1.4}._base_nswpf_1{margin:12px 0 0;display:flex}._label_nswpf_6{box-sizing:border-box;max-width:50%;color:hsl(var(--_color-muted)/100%);flex:0 0 50%;font-size:14px;line-height:1.4286}._between_nswpf_15{justify-content:space-between}._between_nswpf_15 ._label_nswpf_6{flex:0 0 50%;max-width:50%}._between_nswpf_15 ._label_nswpf_6:first-child{text-align:start}._between_nswpf_15 ._label_nswpf_6:last-child{text-align:end}._center_nswpf_29 ._label_nswpf_6{flex:0 0 50%;max-width:50%}._center_nswpf_29 ._label_nswpf_6:first-child{text-align:end;padding-right:8px}._center_nswpf_29 ._label_nswpf_6:last-child{text-align:start;padding-left:8px}._center_nswpf_29 ._text_nswpf_41{text-align:center;min-width:56px;display:inline-block}@media (width<=599px){._center_nswpf_29 ._text_nswpf_41{min-width:48px}}._list_1vfe4_1{justify-content:space-between;display:flex}._icon_1vfe4_6{transition:transform .12s;transform:scale(1)}._button_1vfe4_11{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1vfe4_11:disabled{cursor:default}._button_1vfe4_11{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_1vfe4_11:hover ._icon_1vfe4_6{transform:scale(1.15)}._button_1vfe4_11:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}@media (width<=399px){._button_1vfe4_11{width:48px;height:48px}}._list_16sag_1{justify-content:space-between;display:flex}._button_16sag_6{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_16sag_6:disabled{cursor:default}._button_16sag_6{width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:flex}._button_16sag_6:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}._button_16sag_6:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._list_1kpxu_1{justify-content:space-between;display:flex}._icon_1kpxu_6{transition:transform .12s;transform:scale(1)}._button_1kpxu_11{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1kpxu_11:disabled{cursor:default}._button_1kpxu_11{justify-content:center;align-items:center;width:40px;height:40px;display:flex}._button_1kpxu_11:hover ._icon_1kpxu_6{transform:scale(1.1)}._button_1kpxu_11:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._list_grany_1{justify-content:center;gap:16px;display:flex}._icon_grany_7{transition:transform .12s;transform:scale(1)}._button_grany_12{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_grany_12:disabled{cursor:default}._button_grany_12{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_grany_12:hover ._icon_grany_7{transform:scale(1.15)}._button_grany_12:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}@media (width<=399px){._button_grany_12{width:48px;height:48px}}._list_1yzyr_1{justify-content:center;gap:16px;display:flex}._icon_1yzyr_7{transition:transform .12s;transform:scale(1)}._button_1yzyr_12{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1yzyr_12:disabled{cursor:default}._button_1yzyr_12{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_1yzyr_12:hover ._icon_1yzyr_7{transform:scale(1.15)}._button_1yzyr_12:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._list_whbas_1{justify-content:space-between;gap:6px;display:flex}@media (width<=599px){._list_whbas_1{flex-direction:column-reverse;gap:4px}}._button_whbas_13{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_whbas_13:disabled{cursor:default}._button_whbas_13{text-align:center;width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:inline-block}._button_whbas_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media (width<=599px){._button_whbas_13:hover{box-shadow:none}}._button_whbas_13:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._button_whbas_13 ._score_whbas_52{display:inline}._button_whbas_13 ._label_whbas_55{display:none}@media (width<=599px){._button_whbas_13 ._label_whbas_55{display:inline}._button_whbas_13{border-radius:6px;width:100%;height:auto;padding:6px;font-size:14px;line-height:20px}._labels_whbas_75{display:none}}._list_divjm_1{justify-content:space-between;gap:6px;display:flex}@media (width<=599px){._list_divjm_1{flex-direction:column-reverse;gap:4px}}._button_divjm_13{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_divjm_13:disabled{cursor:default}._button_divjm_13{text-align:center;width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:block}._button_divjm_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media (width<=599px){._button_divjm_13:hover{box-shadow:none}}._button_divjm_13:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._button_divjm_13 ._score_divjm_52{display:inline}._button_divjm_13 ._label_divjm_55{display:none}@media (width<=599px){._button_divjm_13 ._label_divjm_55{display:inline}._button_divjm_13{border-radius:6px;width:100%;height:auto;padding:6px;font-size:14px;line-height:20px}._labels_divjm_75{display:none}}._base_umzkr_1{max-width:100%}._ratingCsat5_umzkr_5,._feedbackCsat5_umzkr_6,._contactCsat5_umzkr_7,._successCsat5_umzkr_8{width:320px}@media (width<=399px){._ratingCsat5_umzkr_5,._feedbackCsat5_umzkr_6,._contactCsat5_umzkr_7,._successCsat5_umzkr_8{width:100%}}._ratingCsat2_umzkr_20,._feedbackCsat2_umzkr_21,._contactCsat2_umzkr_22,._successCsat2_umzkr_23{width:280px}@media (width<=399px){._ratingCsat2_umzkr_20,._feedbackCsat2_umzkr_21,._contactCsat2_umzkr_22,._successCsat2_umzkr_23{width:100%}}._ratingCes_umzkr_35{width:340px}@media (width<=599px){._ratingCes_umzkr_35{width:280px}}@media (width<=399px){._ratingCes_umzkr_35{width:100%}}._feedbackCes_umzkr_49,._contactCes_umzkr_50,._successCes_umzkr_51{width:280px}@media (width<=599px){._feedbackCes_umzkr_49,._contactCes_umzkr_50,._successCes_umzkr_51{width:100%}}._ratingNps_umzkr_62{width:520px}@media (width<=599px){._ratingNps_umzkr_62{width:320px}}@media (width<=399px){._ratingNps_umzkr_62{width:100%}}._feedbackNps_umzkr_76,._contactNps_umzkr_77,._successNps_umzkr_78{width:280px}@media (width<=599px){._feedbackNps_umzkr_76,._contactNps_umzkr_77,._successNps_umzkr_78{width:100%}}
2
2
  /*$vite$:1*/