react-feedback-surveys 1.2.0 → 1.4.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 +48 -9
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +8 -1
  4. package/dist/index.js +321 -316
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -21,6 +21,7 @@
21
21
  * [CES7 (Customer Effort Score, 7-Point Scale)](#ces7-customer-effort-score-7-point-scale)
22
22
  - [Layout Components](#layout-components)
23
23
  * [Popup](#popup)
24
+ * [Surface](#surface)
24
25
  - [Props](#props)
25
26
  * [Shared Props](#shared-props)
26
27
  * [Scale Style Options](#scale-style-options)
@@ -101,7 +102,7 @@ import 'react-feedback-surveys/index.css';
101
102
  textButtonLabel="Send"
102
103
  thankYouMessage="Thanks for your feedback!"
103
104
  onScoreSubmit={({ value }) => {/* ... */}}
104
- onFeedbackSubmit={({ value, comment }) => {/* ... */}}
105
+ onFeedbackSubmit={({ value, text }) => {/* ... */}}
105
106
  />
106
107
  ```
107
108
 
@@ -130,7 +131,7 @@ import 'react-feedback-surveys/index.css';
130
131
  textButtonLabel="Send"
131
132
  thankYouMessage="Thank you for your feedback!"
132
133
  onScoreSubmit={({ value }) => {/* ... */}}
133
- onFeedbackSubmit={({ value, comment }) => {/* ... */}}
134
+ onFeedbackSubmit={({ value, text }) => {/* ... */}}
134
135
  />
135
136
  ```
136
137
 
@@ -163,7 +164,7 @@ import 'react-feedback-surveys/index.css';
163
164
  textButtonLabel="Send"
164
165
  thankYouMessage="Thank you for your feedback!"
165
166
  onScoreSubmit={({ value }) => {/* ... */}}
166
- onFeedbackSubmit={({ value, comment }) => {/* ... */}}
167
+ onFeedbackSubmit={({ value, text }) => {/* ... */}}
167
168
  />
168
169
  ```
169
170
 
@@ -194,7 +195,7 @@ import 'react-feedback-surveys/index.css';
194
195
  textButtonLabel="Send"
195
196
  thankYouMessage="Thank you for your feedback!"
196
197
  onScoreSubmit={({ value }) => {/* ... */}}
197
- onFeedbackSubmit={({ value, comment }) => {/* ... */}}
198
+ onFeedbackSubmit={({ value, text }) => {/* ... */}}
198
199
  />
199
200
  ```
200
201
 
@@ -245,6 +246,39 @@ import 'react-feedback-surveys/index.css';
245
246
 
246
247
  For more examples, check out the Storybook stories (e.g., `CSAT5Survey.stories.tsx`, `CSAT2Survey.stories.tsx`).
247
248
 
249
+ ### Surface
250
+
251
+ The `<Surface>` component is a basic container wrapper that provides consistent styling for survey content. It's used internally by the Popup component and can be used standalone to display surveys with a card-like appearance.
252
+
253
+ The Surface component provides:
254
+ - Background color with depth/elevation (box shadow)
255
+ - Rounded corners (8px border radius)
256
+ - Responsive padding that adapts to mobile devices
257
+
258
+ #### Usage
259
+
260
+ ```tsx
261
+ import { Surface, CSAT5Survey } from 'react-feedback-surveys';
262
+ import 'react-feedback-surveys/index.css';
263
+
264
+ <Surface className="custom-surface">
265
+ <CSAT5Survey
266
+ scaleStyle="stars"
267
+ question="How would you rate your satisfaction?"
268
+ onScoreSubmit={({ value }) => {/* ... */}}
269
+ />
270
+ </Surface>
271
+ ```
272
+
273
+ #### Props
274
+
275
+ | Prop | Type | Required | Default | Description |
276
+ |-------------|-------------------|----------|---------|----------------------------------------------------|
277
+ | `className` | `string` | - | - | Additional CSS class name for the surface container.|
278
+ | `children` | `React.ReactNode` | - | - | Content to render inside the surface. |
279
+
280
+ The Surface component uses the `--ft-surface-padding` and `--ft-surface-padding-mobile` CSS variables for responsive padding.
281
+
248
282
  ## Props
249
283
 
250
284
  Most props are shared across all survey widgets. Each widget differs only in its `scaleStyle` values.
@@ -268,7 +302,7 @@ Most props are shared across all survey widgets. Each widget differs only in its
268
302
  | Prop | Type | Required | Description |
269
303
  |--------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-------------------------------------------------------------------------------------------------------------|
270
304
  | `onScoreSubmit` | `({ value: number }) => void \| Promise<void>` | - | Fires immediately when a score is selected, before any follow-up feedback screen. Captures the raw rating. |
271
- | `onFeedbackSubmit` | `({ value: number; comment?: string \| string[] }) => void \| Promise<void>` | - | Fires when feedback is submitted. Includes the selected score and the user’s comment(s). |
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). |
272
306
 
273
307
  > **Event behavior**
274
308
 
@@ -290,7 +324,7 @@ This callback provides both the original score and the user's input.
290
324
 
291
325
  **Arguments:**
292
326
  - `value: number` — the same score previously passed to `onScoreSubmit`
293
- - `comment: string | string[]` — depends on `responseType`:
327
+ - `text: string | string[]` — depends on `responseType`:
294
328
  - `text`: a single text comment
295
329
  - `choices`: an array of selected options (may include a free-text comment if enabled)
296
330
 
@@ -370,6 +404,12 @@ You can override colors and fonts via CSS variables:
370
404
 
371
405
  /* Z-index for popup overlay positioning */
372
406
  --ft-popup-z-index: 49;
407
+
408
+ /* Padding for Surface component container (desktop) */
409
+ --ft-surface-padding: 24px;
410
+
411
+ /* Padding for Surface component container on mobile devices (max-width: 400px) */
412
+ --ft-surface-padding-mobile: 20px;
373
413
  }
374
414
 
375
415
  /* Use with hsl() function: */
@@ -418,7 +458,7 @@ Here's an example of dark theme colors that work well with the survey components
418
458
 
419
459
  **Implementation example with React:**
420
460
 
421
- ```typescript
461
+ ```tsx
422
462
  import { CSAT5Survey } from 'react-feedback-surveys';
423
463
  import 'react-feedback-surveys/index.css';
424
464
  import { useEffect } from 'react';
@@ -527,7 +567,7 @@ import 'react-feedback-surveys/index.css';
527
567
  minLabel="Very unsatisfied"
528
568
  maxLabel="Very satisfied"
529
569
  onScoreSubmit={({ value }) => {/* ... */}}
530
- onFeedbackSubmit={({ value, comment }) => {/* ... */}}
570
+ onFeedbackSubmit={({ value, text }) => {/* ... */}}
531
571
  />
532
572
  ```
533
573
 
@@ -566,7 +606,6 @@ npm run build
566
606
  ## Roadmap
567
607
 
568
608
  - [ ] Custom emoji & icon support
569
- - [ ] RTL language support
570
609
 
571
610
  ## Changelog
572
611
 
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}body{margin:0;box-sizing:border-box;padding:0}*,*:before,*:after{margin:0;box-sizing:border-box;padding:0}._base_qoj98_1{position:fixed;margin:0;box-sizing:border-box;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);padding:0;overflow:auto;background-color:hsl(var(--ft-color-bg)/100%);border-radius:8px;box-shadow:0 0 10px hsl(var(--ft-color-shadow)/20%);transform-origin:50% 100%;z-index:var(--ft-popup-z-index)}._animated_qoj98_16{opacity:0;animation:_fadeForward_qoj98_1 .12s ease-in-out forwards}@keyframes _fadeForward_qoj98_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_qoj98_31{top:24px;left:24px}._top_qoj98_31{top:24px}._topRight_qoj98_40{top:24px;right:24px}._right_qoj98_45{top:50%;right:24px;transform:translateY(-50%)}._bottomRight_qoj98_51{right:24px;bottom:24px}._bottom_qoj98_51{bottom:24px}._bottomLeft_qoj98_60{bottom:24px;left:24px}._left_qoj98_65{left:24px}._content_qoj98_69{position:relative;padding:24px}@media(max-width:400px){._content_qoj98_69{padding:20px}}._close_qoj98_79{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_qoj98_79:disabled{cursor:default}._close_qoj98_79{position:absolute;top:24px;inset-inline-end:24px;width:24px;height:24px;color:hsl(var(--ft-color-outline)/100%);transition:color .15s}._close_qoj98_79:hover{color:hsl(var(--ft-color-text)/100%)}@media(max-width:400px){._close_qoj98_79{inset-inline-end:20px;top:20px}}._close_qoj98_79:before,._close_qoj98_79:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_qoj98_79:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_qoj98_79: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_1kcla_1{display:flex;justify-content:center;gap:16px}._icon_1kcla_7{transition:transform .12s ease;transform:scale(1)}._button_1kcla_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1kcla_12:disabled{cursor:default}._button_1kcla_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_1kcla_12{width:48px;height:48px}}._button_1kcla_12:hover ._icon_1kcla_7{transform:scale(1.15)}._list_57k0i_1{display:flex;justify-content:center;gap:16px}._icon_57k0i_7{transition:transform .12s ease;transform:scale(1)}._button_57k0i_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_57k0i_12:disabled{cursor:default}._button_57k0i_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_57k0i_12:hover ._icon_57k0i_7{transform:scale(1.15)}._base_1oxyv_1{width:100%;max-width:310px}._list_13r41_1{display:flex;justify-content:space-between}._icon_13r41_6{transition:transform .12s ease;transform:scale(1)}._button_13r41_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_13r41_11:disabled{cursor:default}._button_13r41_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_13r41_11{width:48px;height:48px}}._button_13r41_11:hover ._icon_13r41_6{transform:scale(1.15)}._list_bzyvn_1{display:flex;justify-content:space-between}._button_bzyvn_6{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_bzyvn_6:disabled{cursor:default}._button_bzyvn_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_bzyvn_6:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}._list_mtyej_1{display:flex;justify-content:space-between}._icon_mtyej_6{transition:transform .12s ease;transform:scale(1)}._button_mtyej_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_mtyej_11:disabled{cursor:default}._button_mtyej_11{display:flex;align-items:center;justify-content:center;width:40px;height:40px}._button_mtyej_11:hover ._icon_mtyej_6{transform:scale(1.1)}._base_14lcg_1{width:100%;max-width:320px}._list_1n6j6_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1n6j6_1{flex-direction:column-reverse;gap:4px}}._button_1n6j6_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1n6j6_13:disabled{cursor:default}._button_1n6j6_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_1n6j6_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_1n6j6_13:hover{box-shadow:none}}._button_1n6j6_13 ._score_1n6j6_49{display:inline}._button_1n6j6_13 ._label_1n6j6_52{display:none}@media(max-width:575px){._button_1n6j6_13 ._label_1n6j6_52{display:inline}}@media(max-width:575px){._button_1n6j6_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1n6j6_72{display:none}}._base_cn8p7_1{width:100%;max-width:340px}._list_1cqoz_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1cqoz_1{flex-direction:column-reverse;gap:4px}}._button_1cqoz_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1cqoz_13:disabled{cursor:default}._button_1cqoz_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_1cqoz_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_1cqoz_13:hover{box-shadow:none}}._button_1cqoz_13 ._score_1cqoz_49{display:inline}._button_1cqoz_13 ._label_1cqoz_52{display:none}@media(max-width:575px){._button_1cqoz_13 ._label_1cqoz_52{display:inline}}@media(max-width:575px){._button_1cqoz_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1cqoz_72{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-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}
package/dist/index.d.ts CHANGED
@@ -110,6 +110,13 @@ export declare interface SharedSurveyProps {
110
110
  onFeedbackSubmit?: SurveyCallback;
111
111
  }
112
112
 
113
+ export declare const Surface: React.FC<SurfaceProps>;
114
+
115
+ export declare interface SurfaceProps {
116
+ className?: string;
117
+ children?: React.ReactNode;
118
+ }
119
+
113
120
  /**
114
121
  * Callback function for survey submission
115
122
  * @param payload - The survey data to submit
@@ -135,7 +142,7 @@ export declare interface SurveySubmitPayload {
135
142
  /** Selected rating value */
136
143
  value?: number;
137
144
  /** Optional text or array of selected choices */
138
- comment?: string | string[];
145
+ text?: string | string[];
139
146
  }
140
147
 
141
148
  export { }