react-feedback-surveys 1.4.0 → 1.5.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 +74 -30
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +7 -1
  4. package/dist/index.js +459 -406
  5. package/package.json +15 -14
package/README.md CHANGED
@@ -61,7 +61,7 @@
61
61
 
62
62
  ## Installation
63
63
 
64
- ### 1) Install
64
+ ### 1. Install
65
65
 
66
66
  ```shell
67
67
  npm i react-feedback-surveys
@@ -69,7 +69,7 @@ npm i react-feedback-surveys
69
69
  yarn add react-feedback-surveys
70
70
  ```
71
71
 
72
- ### 2) Styles
72
+ ### 2. Styles
73
73
 
74
74
  ```tsx
75
75
  import 'react-feedback-surveys/index.css';
@@ -285,24 +285,57 @@ Most props are shared across all survey widgets. Each widget differs only in its
285
285
 
286
286
  ### Shared Props
287
287
 
288
- | Prop | Type | Required | Description |
289
- |--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|------------------------------------------------------------------------------|
290
- | `classNames` | `{ base?: { base?: string; head?: string; title?: string; body?: string; close?: string }; scale?: { base?: string; list?: string; button?: string; icon?: string; score?: string; labels?: string } }` | - | Optional class names to target internal parts. |
291
- | `question` | `string` | required | Main survey question displayed on the first screen. |
292
- | `minLabel` | `string` | - | Left label for the scale. |
293
- | `maxLabel` | `string` | - | Right label for the scale. |
294
- | `responseType` | `null \| 'text' \| 'choices'` | - | Enables optional follow-up feedback. |
295
- | `textQuestion` | `string` | - | Follow-up question displayed when `responseType` is defined. |
296
- | `textButtonLabel` | `string` | - | Submit label for the feedback screen. |
297
- | `choiceOptions` | `string[] \| null` | - | Predefined choices (when `responseType === 'choices'`). |
298
- | `thankYouMessage` | `string` | required | Message shown after submission. |
288
+ | Prop | Type | Required | Description |
289
+ |--------------------|-------------------------------|----------|------------------------------------------------------------------------------|
290
+ | `classNames` | `ClassNamesConfig` (see below)| - | Optional class names to target internal parts. |
291
+ | `dir` | `'ltr' \| 'rtl' \| 'auto'` | - | Text direction for RTL/LTR language support. |
292
+ | `question` | `string` | required | Main survey question displayed on the first screen. |
293
+ | `minLabel` | `string` | - | Left label for the scale. |
294
+ | `maxLabel` | `string` | - | Right label for the scale. |
295
+ | `responseType` | `null \| 'text' \| 'choices'` | - | Enables optional follow-up feedback. |
296
+ | `textQuestion` | `string` | - | Follow-up question displayed when `responseType` is defined. |
297
+ | `textButtonLabel` | `string` | - | Submit label for the feedback screen. |
298
+ | `choiceOptions` | `string[] \| null` | - | Predefined choices (when `responseType === 'choices'`). |
299
+ | `thankYouMessage` | `string` | required | Message shown after submission. |
300
+
301
+ #### ClassNamesConfig Type
302
+
303
+ ```typescript
304
+ interface ClassNamesConfig {
305
+ base?: {
306
+ base?: string; // The outer widget container
307
+ head?: string; // Header row containing title and close button
308
+ title?: string; // The heading that shows main/feedback/success text
309
+ body?: string; // Main content region (rating scale, feedback form or success)
310
+ rating?: string; // Additional class applied when rating screen is active
311
+ feedback?: string; // Additional class applied when feedback screen is active
312
+ success?: string; // Additional class applied when success screen is active
313
+ close?: string; // Close button
314
+ };
315
+ scale?: {
316
+ base?: string; // Container around the scale style
317
+ list?: string; // Wrapper for the interactive items (emoji/stars/numbers)
318
+ button?: string; // Each clickable item in the scale
319
+ icon?: string; // Icon inside a scale button (emoji, stars)
320
+ score?: string; // Number inside a scale button (for numeric variants)
321
+ labels?: string; // Left/Right labels displayed under the scale
322
+ };
323
+ }
324
+ ```
299
325
 
300
326
  ### Shared Events
301
327
 
302
- | Prop | Type | Required | Description |
303
- |--------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-------------------------------------------------------------------------------------------------------------|
304
- | `onScoreSubmit` | `({ value: number }) => void \| Promise<void>` | - | Fires immediately when a score is selected, before any follow-up feedback screen. Captures the raw rating. |
305
- | `onFeedbackSubmit` | `({ value: number; text?: string \| string[] }) => void \| Promise<void>` | - | Fires when feedback is submitted. Includes the selected score and the user’s text(s). |
328
+ | Prop | Type | Required | Description |
329
+ |--------------------|---------------------------------------------------|----------|-------------------------------------------------------------------------------------------------------------|
330
+ | `onScoreSubmit` | `(payload: ScorePayload) => void \| Promise<void>` | - | Fires immediately when a score is selected, before any follow-up feedback screen. Captures the raw rating. |
331
+ | `onFeedbackSubmit` | `(payload: FeedbackPayload) => void \| Promise<void>` | - | Fires when feedback is submitted. Includes the selected score and the user's text(s). |
332
+
333
+ **Event Payload Types:**
334
+
335
+ ```typescript
336
+ type ScorePayload = { value: number };
337
+ type FeedbackPayload = { value: number; text?: string | string[] };
338
+ ```
306
339
 
307
340
  > **Event behavior**
308
341
 
@@ -405,6 +438,11 @@ You can override colors and fonts via CSS variables:
405
438
  /* Z-index for popup overlay positioning */
406
439
  --ft-popup-z-index: 49;
407
440
 
441
+ /* Inline-end offset for survey head inside popups (right padding in LTR, left in RTL) */
442
+ /* Automatically set to 32px inside Popup to prevent title overlap with close button */
443
+ /* Set to 0 by default for inline surveys */
444
+ --ft-popup-head-offset: 0;
445
+
408
446
  /* Padding for Surface component container (desktop) */
409
447
  --ft-surface-padding: 24px;
410
448
 
@@ -529,19 +567,22 @@ When is this useful?
529
567
 
530
568
  Reference: available keys
531
569
 
532
- | Key | Applies to |
533
- |----------------|--------------------------------------------------------------|
534
- | `base.base` | The outer widget container |
535
- | `base.head` | Header row containing title and close button |
536
- | `base.title` | The heading that shows main/feedback/success text |
537
- | `base.body` | Main content region (rating scale, feedback form or success) |
538
- | `base.close` | Close button |
539
- | `scale.base` | Container around the scale style |
540
- | `scale.list` | Wrapper for the interactive items (emoji/stars/numbers) |
541
- | `scale.button` | Each clickable item in the scale |
542
- | `scale.icon` | Icon inside a scale button (emoji, stars) |
543
- | `scale.score` | Number inside a scale button (for numeric variants) |
544
- | `scale.labels` | Left/Right labels displayed under the scale |
570
+ | Key | Applies to |
571
+ |-----------------|--------------------------------------------------------------|
572
+ | `base.base` | The outer widget container |
573
+ | `base.head` | Header row containing title and close button |
574
+ | `base.title` | The heading that shows main/feedback/success text |
575
+ | `base.body` | Main content region (rating scale, feedback form or success) |
576
+ | `base.rating` | Additional class applied when rating screen is active |
577
+ | `base.feedback` | Additional class applied when feedback screen is active |
578
+ | `base.success` | Additional class applied when success screen is active |
579
+ | `base.close` | Close button |
580
+ | `scale.base` | Container around the scale style |
581
+ | `scale.list` | Wrapper for the interactive items (emoji/stars/numbers) |
582
+ | `scale.button` | Each clickable item in the scale |
583
+ | `scale.icon` | Icon inside a scale button (emoji, stars) |
584
+ | `scale.score` | Number inside a scale button (for numeric variants) |
585
+ | `scale.labels` | Left/Right labels displayed under the scale |
545
586
 
546
587
  Example: customizing a CSAT5Survey widget
547
588
 
@@ -554,6 +595,9 @@ import 'react-feedback-surveys/index.css';
554
595
  base: {
555
596
  base: 'my-survey-base',
556
597
  body: 'my-survey-body',
598
+ rating: 'my-rating-screen',
599
+ feedback: 'my-feedback-screen',
600
+ success: 'my-success-screen',
557
601
  },
558
602
  scale: {
559
603
  list: 'my-scale-list',
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- :root,:host{--ft-color-text: 30 8% 14%;--ft-color-bg: 0 0% 100%;--ft-color-muted: 222 11% 46%;--ft-color-error: 32 95% 44%;--ft-color-border: 214 14% 83%;--ft-color-outline: 218 14% 65%;--ft-color-shadow: 0 0% 0%;--ft-color-control: 214 20% 96%;--ft-popup-z-index: 49;--ft-surface-padding: 24px;--ft-surface-padding-mobile: 20px}body{margin:0;box-sizing:border-box;padding:0}*,*:before,*:after{margin:0;box-sizing:border-box;padding:0}._base_1nuw0_1{display:inline-block;position:relative;padding:var(--ft-surface-padding);overflow:auto;background-color:hsl(var(--ft-color-bg)/100%);border-radius:8px;box-shadow:0 0 10px hsl(var(--ft-color-shadow)/20%)}@media(max-width:400px){._base_1nuw0_1{padding:var(--ft-surface-padding-mobile)}}._base_xxwd2_1{position:fixed;margin:0;box-sizing:border-box;max-width:calc(100vw - var(--ft-surface-padding) * 2);max-height:calc(100vh - var(--ft-surface-padding) * 2);transform-origin:50% 100%;z-index:var(--ft-popup-z-index)}@media(max-width:400px){._base_xxwd2_1{max-width:calc(100vw - var(--ft-surface-padding-mobile) * 2);max-height:calc(100vh - var(--ft-surface-padding-mobile) * 2)}}._animated_xxwd2_17{opacity:0;animation:_fadeForward_xxwd2_1 .12s ease-in-out forwards}@keyframes _fadeForward_xxwd2_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_xxwd2_32{top:24px;left:24px}._top_xxwd2_32{top:24px}._topRight_xxwd2_41{top:24px;right:24px}._right_xxwd2_46{top:50%;right:24px;transform:translateY(-50%)}._bottomRight_xxwd2_52{right:24px;bottom:24px}._bottom_xxwd2_52{bottom:24px}._bottomLeft_xxwd2_61{bottom:24px;left:24px}._left_xxwd2_66{left:24px}._close_xxwd2_70{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_xxwd2_70:disabled{cursor:default}._close_xxwd2_70{position:absolute;top:var(--ft-surface-padding);inset-inline-end:var(--ft-surface-padding);width:24px;height:24px;color:hsl(var(--ft-color-outline)/100%);transition:color .15s}@media(max-width:400px){._close_xxwd2_70{top:var(--ft-surface-padding-mobile);inset-inline-end:var(--ft-surface-padding-mobile)}}._close_xxwd2_70:hover{color:hsl(var(--ft-color-text)/100%)}._close_xxwd2_70:before,._close_xxwd2_70:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_xxwd2_70:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_xxwd2_70:after{margin:-8px 0 0 -1px;width:2px;height:16px}._choices_1fbp9_1{margin:0 0 12px}._choice_1fbp9_1{display:flex}._choice_1fbp9_1+._choice_1fbp9_1{margin-top:12px}._label_1fbp9_12{position:relative;display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._sr_1fbp9_21{position:absolute;margin:-1px;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;border-width:0;clip:rect(0,0,0,0)}._checkbox_1fbp9_33{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._check_1fbp9_33{height:20px;min-width:20px;border:1px solid hsl(var(--ft-color-border)/100%);border-radius:4px}._label_1fbp9_12:hover ._check_1fbp9_33{border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33{position:relative;background-color:hsl(var(--ft-color-text)/100%);border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33:after{position:absolute;top:50%;left:50%;width:10px;height:7px;content:"";border:2px solid;border-color:transparent transparent hsl(var(--ft-color-bg)/100%) hsl(var(--ft-color-bg)/100%);transform:translate(-45%,-75%) rotate(-45deg);pointer-events:none}._input_1fbp9_70{margin-top:8px;height:32px}._textarea_1fbp9_75{height:192px}._input_1fbp9_70,._textarea_1fbp9_75{width:100%;padding:8px 12px;font-size:16px;line-height:1.5;background-color:hsl(var(--ft-color-bg)/100%);border:1px solid hsl(var(--ft-color-border)/100%);border-radius:8px;outline:0 solid hsl(var(--ft-color-outline)/14%);resize:none;transition:background-color .15s,border-color .15s,outline-width .2s}._input_1fbp9_70:focus,._textarea_1fbp9_75:focus{outline:4px solid hsl(var(--ft-color-outline)/14%)}._input_1fbp9_70._invalid_1fbp9_96,._textarea_1fbp9_75._invalid_1fbp9_96{border-color:hsl(var(--ft-color-error)/100%)}._submit_1fbp9_101{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._submit_1fbp9_101:disabled{cursor:default}._submit_1fbp9_101{padding:8px 32px;font-size:16px;font-weight:400;text-align:center;color:hsl(var(--ft-color-bg)/100%);background-color:hsl(var(--ft-color-text)/100%);border-radius:8px;transition:opacity .2s}._submit_1fbp9_101:hover{opacity:.85}._submit_1fbp9_101{margin-top:16px;width:100%}._success_1fbp9_133{padding:16px 0 32px;font-size:16px;font-weight:600;line-height:1.5;text-align:center}._base_1ilpx_1{padding:0 24px;text-align:center}._icon_1ilpx_6{display:inline-block}._base_1gt2q_1{padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif;color:hsl(var(--ft-color-text)/100%)}._head_1gt2q_7{display:flex;gap:8px;padding-block:0 20px;padding-inline:0 32px}._title_1gt2q_14{flex:1 0;font-family:inherit;font-size:16px;font-weight:500;font-style:normal;line-height:1.4}._base_1qyw7_1{margin:12px 0 0;display:flex;justify-content:space-between}._label_1qyw7_7{flex:0 0 50%;max-width:50%;font-size:14px;line-height:1.4286;color:hsl(var(--ft-color-muted)/100%)}._label_1qyw7_7:first-child{text-align:start}._label_1qyw7_7:last-child{text-align:end}._list_asa83_1{display:flex;justify-content:center;gap:16px}._icon_asa83_7{transition:transform .12s ease;transform:scale(1)}._button_asa83_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_asa83_12:disabled{cursor:default}._button_asa83_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:400px){._button_asa83_12{width:48px;height:48px}}._button_asa83_12:hover ._icon_asa83_7{transform:scale(1.15)}._button_asa83_12:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_1exln_1{display:flex;justify-content:center;gap:16px}._icon_1exln_7{transition:transform .12s ease;transform:scale(1)}._button_1exln_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1exln_12:disabled{cursor:default}._button_1exln_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}._button_1exln_12:hover ._icon_1exln_7{transform:scale(1.15)}._button_1exln_12:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._base_1oxyv_1{width:100%;max-width:310px}._list_t1g1q_1{display:flex;justify-content:space-between}._icon_t1g1q_6{transition:transform .12s ease;transform:scale(1)}._button_t1g1q_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_t1g1q_11:disabled{cursor:default}._button_t1g1q_11{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:400px){._button_t1g1q_11{width:48px;height:48px}}._button_t1g1q_11:hover ._icon_t1g1q_6{transform:scale(1.15)}._button_t1g1q_11:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_yy136_1{display:flex;justify-content:space-between}._button_yy136_6{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_yy136_6:disabled{cursor:default}._button_yy136_6{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:18px;font-weight:700;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_yy136_6:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}._button_yy136_6:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_20ac1_1{display:flex;justify-content:space-between}._icon_20ac1_6{transition:transform .12s ease;transform:scale(1)}._button_20ac1_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_20ac1_11:disabled{cursor:default}._button_20ac1_11{display:flex;align-items:center;justify-content:center;width:40px;height:40px}._button_20ac1_11:hover ._icon_20ac1_6{transform:scale(1.1)}._button_20ac1_11:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._base_14lcg_1{width:100%;max-width:320px}._list_1rcbg_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1rcbg_1{flex-direction:column-reverse;gap:4px}}._button_1rcbg_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1rcbg_13:disabled{cursor:default}._button_1rcbg_13{display:inline-block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1rcbg_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:575px){._button_1rcbg_13:hover{box-shadow:none}}._button_1rcbg_13:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._button_1rcbg_13 ._score_1rcbg_52{display:inline}._button_1rcbg_13 ._label_1rcbg_55{display:none}@media(max-width:575px){._button_1rcbg_13 ._label_1rcbg_55{display:inline}}@media(max-width:575px){._button_1rcbg_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1rcbg_75{display:none}}._base_cn8p7_1{width:100%;max-width:340px}._list_1vd7e_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1vd7e_1{flex-direction:column-reverse;gap:4px}}._button_1vd7e_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1vd7e_13:disabled{cursor:default}._button_1vd7e_13{display:block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1vd7e_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:575px){._button_1vd7e_13:hover{box-shadow:none}}._button_1vd7e_13:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._button_1vd7e_13 ._score_1vd7e_52{display:inline}._button_1vd7e_13 ._label_1vd7e_55{display:none}@media(max-width:575px){._button_1vd7e_13 ._label_1vd7e_55{display:inline}}@media(max-width:575px){._button_1vd7e_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1vd7e_75{display:none}}._base_1xgqd_1{width:100%;max-width:520px}
1
+ :root,:host{--ft-color-text: 30 8% 14%;--ft-color-bg: 0 0% 100%;--ft-color-muted: 222 11% 46%;--ft-color-error: 32 95% 44%;--ft-color-border: 214 14% 83%;--ft-color-outline: 218 14% 65%;--ft-color-shadow: 0 0% 0%;--ft-color-control: 214 20% 96%;--ft-popup-z-index: 49;--ft-popup-head-offset: 0;--ft-surface-padding: 24px;--ft-surface-padding-mobile: 20px}body{margin:0;box-sizing:border-box;padding:0}*,*:before,*:after{margin:0;box-sizing:border-box;padding:0}._base_12dcz_1{display:inline-block;position:relative;padding:var(--ft-surface-padding);overflow:auto;background-color:hsl(var(--ft-color-bg)/100%);border-radius:8px;box-shadow:0 0 10px hsl(var(--ft-color-shadow)/20%)}@media(max-width:399px){._base_12dcz_1{padding:var(--ft-surface-padding-mobile)}}._base_1yyqn_1{position:fixed;display:flex;margin:0;box-sizing:border-box;max-width:calc(100vw - var(--ft-surface-padding) * 2);max-height:calc(100vh - var(--ft-surface-padding) * 2);transform-origin:50% 100%;z-index:var(--ft-popup-z-index);--ft-popup-head-offset: 32px}@media(max-width:399px){._base_1yyqn_1{max-width:calc(100vw - var(--ft-surface-padding-mobile) * 2);max-height:calc(100vh - var(--ft-surface-padding-mobile) * 2)}}._animated_1yyqn_19{opacity:0;animation:_fadeForward_1yyqn_1 .12s ease-in-out forwards}@keyframes _fadeForward_1yyqn_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_1yyqn_34{top:var(--ft-surface-padding);left:var(--ft-surface-padding)}@media(max-width:399px){._topLeft_1yyqn_34{top:var(--ft-surface-padding-mobile);left:var(--ft-surface-padding-mobile)}}._topRight_1yyqn_45{top:var(--ft-surface-padding);right:var(--ft-surface-padding)}@media(max-width:399px){._topRight_1yyqn_45{top:var(--ft-surface-padding-mobile);right:var(--ft-surface-padding-mobile)}}._bottomRight_1yyqn_56{right:var(--ft-surface-padding);bottom:var(--ft-surface-padding)}@media(max-width:399px){._bottomRight_1yyqn_56{right:var(--ft-surface-padding-mobile);bottom:var(--ft-surface-padding-mobile)}}._bottomLeft_1yyqn_67{bottom:var(--ft-surface-padding);left:var(--ft-surface-padding)}@media(max-width:399px){._bottomLeft_1yyqn_67{bottom:var(--ft-surface-padding-mobile);left:var(--ft-surface-padding-mobile)}}._close_1yyqn_78{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_1yyqn_78:disabled{cursor:default}._close_1yyqn_78{position:absolute;top:var(--ft-surface-padding);inset-inline-end:var(--ft-surface-padding);width:24px;height:24px;color:hsl(var(--ft-color-outline)/100%);transition:color .15s}@media(max-width:399px){._close_1yyqn_78{top:var(--ft-surface-padding-mobile);inset-inline-end:var(--ft-surface-padding-mobile)}}._close_1yyqn_78:hover{color:hsl(var(--ft-color-text)/100%)}._close_1yyqn_78:before,._close_1yyqn_78:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_1yyqn_78:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_1yyqn_78:after{margin:-8px 0 0 -1px;width:2px;height:16px}._choices_1fbp9_1{margin:0 0 12px}._choice_1fbp9_1{display:flex}._choice_1fbp9_1+._choice_1fbp9_1{margin-top:12px}._label_1fbp9_12{position:relative;display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._sr_1fbp9_21{position:absolute;margin:-1px;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;border-width:0;clip:rect(0,0,0,0)}._checkbox_1fbp9_33{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._check_1fbp9_33{height:20px;min-width:20px;border:1px solid hsl(var(--ft-color-border)/100%);border-radius:4px}._label_1fbp9_12:hover ._check_1fbp9_33{border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33{position:relative;background-color:hsl(var(--ft-color-text)/100%);border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33:after{position:absolute;top:50%;left:50%;width:10px;height:7px;content:"";border:2px solid;border-color:transparent transparent hsl(var(--ft-color-bg)/100%) hsl(var(--ft-color-bg)/100%);transform:translate(-45%,-75%) rotate(-45deg);pointer-events:none}._input_1fbp9_70{margin-top:8px;height:32px}._textarea_1fbp9_75{height:192px}._input_1fbp9_70,._textarea_1fbp9_75{width:100%;padding:8px 12px;font-size:16px;line-height:1.5;background-color:hsl(var(--ft-color-bg)/100%);border:1px solid hsl(var(--ft-color-border)/100%);border-radius:8px;outline:0 solid hsl(var(--ft-color-outline)/14%);resize:none;transition:background-color .15s,border-color .15s,outline-width .2s}._input_1fbp9_70:focus,._textarea_1fbp9_75:focus{outline:4px solid hsl(var(--ft-color-outline)/14%)}._input_1fbp9_70._invalid_1fbp9_96,._textarea_1fbp9_75._invalid_1fbp9_96{border-color:hsl(var(--ft-color-error)/100%)}._submit_1fbp9_101{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._submit_1fbp9_101:disabled{cursor:default}._submit_1fbp9_101{padding:8px 32px;font-size:16px;font-weight:400;text-align:center;color:hsl(var(--ft-color-bg)/100%);background-color:hsl(var(--ft-color-text)/100%);border-radius:8px;transition:opacity .2s}._submit_1fbp9_101:hover{opacity:.85}._submit_1fbp9_101{margin-top:16px;width:100%}._success_1fbp9_133{padding:16px 0 32px;font-size:16px;font-weight:600;line-height:1.5;text-align:center}._base_1ilpx_1{padding:0 24px;text-align:center}._icon_1ilpx_6{display:inline-block}._base_q2v0p_1{padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif;color:hsl(var(--ft-color-text)/100%)}._head_q2v0p_7{display:flex;gap:8px;padding-block:0 20px;padding-inline:0 var(--ft-popup-head-offset)}._title_q2v0p_14{flex:1 0;font-family:inherit;font-size:16px;font-weight:500;font-style:normal;line-height:1.4}._base_1ji5q_1{margin:12px 0 0;display:flex}._label_1ji5q_6{font-size:14px;line-height:1.4286;color:hsl(var(--ft-color-muted)/100%);flex:0 0 50%;max-width:50%}._between_1ji5q_14{justify-content:space-between}._between_1ji5q_14 ._label_1ji5q_6{flex:0 0 50%;max-width:50%}._between_1ji5q_14 ._label_1ji5q_6:first-child{text-align:start}._between_1ji5q_14 ._label_1ji5q_6:last-child{text-align:end}._center_1ji5q_28 ._label_1ji5q_6{flex:0 0 50%;max-width:50%}._center_1ji5q_28 ._label_1ji5q_6:first-child{padding-right:8px;text-align:end}._center_1ji5q_28 ._label_1ji5q_6:last-child{padding-left:8px;text-align:start}._center_1ji5q_28 ._text_1ji5q_40{display:inline-block;text-align:center;min-width:56px}@media(max-width:599px){._center_1ji5q_28 ._text_1ji5q_40{min-width:48px}}._list_1ba1e_1{display:flex;justify-content:center;gap:16px}._icon_1ba1e_7{transition:transform .12s ease;transform:scale(1)}._button_1ba1e_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1ba1e_12:disabled{cursor:default}._button_1ba1e_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:399px){._button_1ba1e_12{width:48px;height:48px}}._button_1ba1e_12:hover ._icon_1ba1e_7{transform:scale(1.15)}._button_1ba1e_12:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_1exln_1{display:flex;justify-content:center;gap:16px}._icon_1exln_7{transition:transform .12s ease;transform:scale(1)}._button_1exln_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1exln_12:disabled{cursor:default}._button_1exln_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}._button_1exln_12:hover ._icon_1exln_7{transform:scale(1.15)}._button_1exln_12:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._base_113r0_1{max-width:100%}._rating_113r0_5,._feedback_113r0_6,._success_113r0_7{width:280px}@media(max-width:399px){._rating_113r0_5,._feedback_113r0_6,._success_113r0_7{width:100%}}._list_1pt0e_1{display:flex;justify-content:space-between}._icon_1pt0e_6{transition:transform .12s ease;transform:scale(1)}._button_1pt0e_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1pt0e_11:disabled{cursor:default}._button_1pt0e_11{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:399px){._button_1pt0e_11{width:48px;height:48px}}._button_1pt0e_11:hover ._icon_1pt0e_6{transform:scale(1.15)}._button_1pt0e_11:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_yy136_1{display:flex;justify-content:space-between}._button_yy136_6{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_yy136_6:disabled{cursor:default}._button_yy136_6{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:18px;font-weight:700;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_yy136_6:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}._button_yy136_6:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._list_20ac1_1{display:flex;justify-content:space-between}._icon_20ac1_6{transition:transform .12s ease;transform:scale(1)}._button_20ac1_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_20ac1_11:disabled{cursor:default}._button_20ac1_11{display:flex;align-items:center;justify-content:center;width:40px;height:40px}._button_20ac1_11:hover ._icon_20ac1_6{transform:scale(1.1)}._button_20ac1_11:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._base_m4qio_1{max-width:100%}._rating_m4qio_5,._feedback_m4qio_6,._success_m4qio_7{width:320px}@media(max-width:399px){._rating_m4qio_5,._feedback_m4qio_6,._success_m4qio_7{width:100%}}._list_1ehe7_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:599px){._list_1ehe7_1{flex-direction:column-reverse;gap:4px}}._button_1ehe7_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1ehe7_13:disabled{cursor:default}._button_1ehe7_13{display:inline-block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1ehe7_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:599px){._button_1ehe7_13:hover{box-shadow:none}}._button_1ehe7_13:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._button_1ehe7_13 ._score_1ehe7_52{display:inline}._button_1ehe7_13 ._label_1ehe7_55{display:none}@media(max-width:599px){._button_1ehe7_13 ._label_1ehe7_55{display:inline}}@media(max-width:599px){._button_1ehe7_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:599px){._labels_1ehe7_75{display:none}}._base_12no3_1{max-width:100%}._rating_12no3_5{width:340px}@media(max-width:599px){._rating_12no3_5{width:280px}}@media(max-width:399px){._rating_12no3_5{width:100%}}._feedback_12no3_19,._success_12no3_20{width:280px}@media(max-width:599px){._feedback_12no3_19,._success_12no3_20{width:100%}}._list_getzs_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:599px){._list_getzs_1{flex-direction:column-reverse;gap:4px}}._button_getzs_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_getzs_13:disabled{cursor:default}._button_getzs_13{display:block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_getzs_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:599px){._button_getzs_13:hover{box-shadow:none}}._button_getzs_13:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}._button_getzs_13 ._score_getzs_52{display:inline}._button_getzs_13 ._label_getzs_55{display:none}@media(max-width:599px){._button_getzs_13 ._label_getzs_55{display:inline}}@media(max-width:599px){._button_getzs_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:599px){._labels_getzs_75{display:none}}._base_1invl_1{max-width:100%}._rating_1invl_5{width:520px}@media(max-width:599px){._rating_1invl_5{width:320px}}@media(max-width:399px){._rating_1invl_5{width:100%}}._feedback_1invl_19,._success_1invl_20{width:280px}@media(max-width:599px){._feedback_1invl_19,._success_1invl_20{width:100%}}
package/dist/index.d.ts CHANGED
@@ -55,6 +55,12 @@ export declare interface RootClassNames {
55
55
  title?: string;
56
56
  /** Survey content wrapper (scale or feedback screen) */
57
57
  body?: string;
58
+ /** Rating screen wrapper */
59
+ rating?: string;
60
+ /** Feedback screen wrapper */
61
+ feedback?: string;
62
+ /** Success screen wrapper */
63
+ success?: string;
58
64
  /** Close button element */
59
65
  close?: string;
60
66
  }
@@ -129,7 +135,7 @@ export declare type SurveyCallback = (payload: SurveySubmitPayload) => void | Pr
129
135
  */
130
136
  export declare type SurveyScreen =
131
137
  /** Rating screen (first screen) */
132
- 'main'
138
+ 'rating'
133
139
  /** Final "thanks" message screen */
134
140
  | 'success'
135
141
  /** Feedback input screen */