react-feedback-surveys 1.5.3 → 1.5.5

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 +12 -9
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +2 -7
  4. package/dist/index.js +221 -205
  5. package/package.json +28 -28
package/README.md CHANGED
@@ -86,7 +86,7 @@ Surveys to ask users about their overall satisfaction.
86
86
  - "How would you rate your overall experience?"
87
87
  - "How satisfied are you with our customer support?"
88
88
 
89
- <img alt="CSAT5" src="docs/assets/csat5.png" width="400" />
89
+ <img alt="CSAT5" src="docs/assets/csat5.png" width="416" />
90
90
 
91
91
  ```tsx
92
92
  import { CSAT5Survey } from 'react-feedback-surveys';
@@ -117,7 +117,7 @@ Surveys to ask users about specific features or flows.
117
117
  - "Did you find what you were looking for?"
118
118
  - "Are you satisfied with the checkout process?"
119
119
 
120
- <img alt="CSAT2" src="docs/assets/csat2.png" width="390" />
120
+ <img alt="CSAT2" src="docs/assets/csat2.png" width="386" />
121
121
 
122
122
  ```tsx
123
123
  import { CSAT2Survey } from 'react-feedback-surveys';
@@ -146,9 +146,9 @@ Surveys to ask users if they'd recommend your product.
146
146
  - "On a scale of 0-10, would you recommend our service?"
147
147
  - "How likely are you to recommend this product to others?"
148
148
 
149
- <img alt="NPS10" src="docs/assets/nps10.png" width="600" />
149
+ <img alt="NPS10" src="docs/assets/nps10.png" width="616" />
150
150
 
151
- <img alt="NPS10 mobile" src="docs/assets/nps10-mobile.png" width="362" />
151
+ <img alt="NPS10 mobile" src="docs/assets/nps10-mobile.png" width="340" />
152
152
 
153
153
  ```tsx
154
154
  import { NPS10Survey } from 'react-feedback-surveys';
@@ -179,7 +179,7 @@ Surveys to ask users how easy it is to use your product.
179
179
  - "How much effort did it take to resolve your issue?"
180
180
  - "How easy was it to sign up for an account?"
181
181
 
182
- <img alt="CES7" src="docs/assets/ces7.png" width="420" />
182
+ <img alt="CES7" src="docs/assets/ces7.png" width="436" />
183
183
 
184
184
  ```tsx
185
185
  import { CES7Survey } from 'react-feedback-surveys';
@@ -207,7 +207,7 @@ import 'react-feedback-surveys/index.css';
207
207
 
208
208
  The `<Popup>` component wraps survey widgets in a fixed overlay that slides in from the screen edge. It includes positioning, animations, and a close button for easy dismissal.
209
209
 
210
- <img alt="CSAT5 Popup" src="docs/assets/csat5-popup.png" width="400" />
210
+ <img alt="CSAT5 Popup" src="docs/assets/csat5-popup.png" width="416" />
211
211
 
212
212
  #### Usage
213
213
 
@@ -252,7 +252,7 @@ The `<Surface>` component is a basic container wrapper that provides consistent
252
252
 
253
253
  The Surface component provides:
254
254
  - Background color with depth/elevation (box shadow)
255
- - Rounded corners (8px border radius)
255
+ - Rounded corners (controlled via `--ft-surface-radius`)
256
256
  - Responsive padding that adapts to mobile devices
257
257
 
258
258
  #### Usage
@@ -277,7 +277,7 @@ import 'react-feedback-surveys/index.css';
277
277
  | `className` | `string` | - | - | Additional CSS class name for the surface container.|
278
278
  | `children` | `React.ReactNode` | - | - | Content to render inside the surface. |
279
279
 
280
- The Surface component uses the `--ft-surface-padding` and `--ft-surface-padding-mobile` CSS variables for responsive padding.
280
+ The Surface component uses the `--ft-surface-padding`, `--ft-surface-padding-mobile`, and `--ft-surface-radius` CSS variables for responsive padding and border radius.
281
281
 
282
282
  ## Props
283
283
 
@@ -448,6 +448,9 @@ You can override colors and fonts via CSS variables:
448
448
 
449
449
  /* Padding for Surface component container on mobile devices (max-width: 400px) */
450
450
  --ft-surface-padding-mobile: 20px;
451
+
452
+ /* Border radius for Surface container, inputs, and submit button */
453
+ --ft-surface-radius: 8px;
451
454
  }
452
455
 
453
456
  /* Use with hsl() function: */
@@ -653,7 +656,7 @@ npm run build
653
656
 
654
657
  ## Changelog
655
658
 
656
- For a detailed history of changes, see the [Changelog](https://feedback.tools/react-feedback-surveys/changelog).
659
+ For a detailed history of changes, see the [Changelog](https://feedback.tools/react-feedback-surveys/docs/changelog).
657
660
 
658
661
  ## Credits
659
662
 
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-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_ro34p_1{position:relative;display:inline-block;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_ro34p_1{padding:var(--ft-surface-padding-mobile)}}._base_11c6u_1{--ft-popup-head-offset: 32px;position:fixed;z-index:var(--ft-popup-z-index);margin:0;display:flex;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%}@media(max-width:399px){._base_11c6u_1{max-width:calc(100vw - var(--ft-surface-padding-mobile) * 2);max-height:calc(100vh - var(--ft-surface-padding-mobile) * 2)}}._animated_11c6u_19{opacity:0;animation:_fadeForward_11c6u_1 .12s ease-in-out forwards}@keyframes _fadeForward_11c6u_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_11c6u_34{top:var(--ft-surface-padding);left:var(--ft-surface-padding)}@media(max-width:399px){._topLeft_11c6u_34{top:var(--ft-surface-padding-mobile);left:var(--ft-surface-padding-mobile)}}._topRight_11c6u_45{top:var(--ft-surface-padding);right:var(--ft-surface-padding)}@media(max-width:399px){._topRight_11c6u_45{top:var(--ft-surface-padding-mobile);right:var(--ft-surface-padding-mobile)}}._bottomRight_11c6u_56{right:var(--ft-surface-padding);bottom:var(--ft-surface-padding)}@media(max-width:399px){._bottomRight_11c6u_56{right:var(--ft-surface-padding-mobile);bottom:var(--ft-surface-padding-mobile)}}._bottomLeft_11c6u_67{bottom:var(--ft-surface-padding);left:var(--ft-surface-padding)}@media(max-width:399px){._bottomLeft_11c6u_67{bottom:var(--ft-surface-padding-mobile);left:var(--ft-surface-padding-mobile)}}._close_11c6u_78{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_11c6u_78:disabled{cursor:default}._close_11c6u_78{position:absolute;top:var(--ft-surface-padding);width:24px;height:24px;color:hsl(var(--ft-color-outline)/100%);transition:color .15s;inset-inline-end:var(--ft-surface-padding)}._close_11c6u_78:hover{color:hsl(var(--ft-color-text)/100%)}._close_11c6u_78:before,._close_11c6u_78:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_11c6u_78:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_11c6u_78:after{margin:-8px 0 0 -1px;width:2px;height:16px}@media(max-width:399px){._close_11c6u_78{top:var(--ft-surface-padding-mobile);inset-inline-end:var(--ft-surface-padding-mobile)}}._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_1qmlv_1{margin:12px 0 0;display:flex}._label_1qmlv_6{flex:0 0 50%;max-width:50%;font-size:14px;line-height:1.4286;color:hsl(var(--ft-color-muted)/100%)}._between_1qmlv_14{justify-content:space-between}._between_1qmlv_14 ._label_1qmlv_6{flex:0 0 50%;max-width:50%}._between_1qmlv_14 ._label_1qmlv_6:first-child{text-align:start}._between_1qmlv_14 ._label_1qmlv_6:last-child{text-align:end}._center_1qmlv_28 ._label_1qmlv_6{flex:0 0 50%;max-width:50%}._center_1qmlv_28 ._label_1qmlv_6:first-child{padding-right:8px;text-align:end}._center_1qmlv_28 ._label_1qmlv_6:last-child{padding-left:8px;text-align:start}._center_1qmlv_28 ._text_1qmlv_40{display:inline-block;min-width:56px;text-align:center}@media(max-width:599px){._center_1qmlv_28 ._text_1qmlv_40{min-width:48px}}._list_lrkzm_1{display:flex;justify-content:center;gap:16px}._icon_lrkzm_7{transition:transform .12s ease;transform:scale(1)}._button_lrkzm_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_lrkzm_12:disabled{cursor:default}._button_lrkzm_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_lrkzm_12:hover ._icon_lrkzm_7{transform:scale(1.15)}._button_lrkzm_12:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}@media(max-width:399px){._button_lrkzm_12{width:48px;height:48px}}._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_v3ie2_1{display:flex;justify-content:space-between}._icon_v3ie2_6{transition:transform .12s ease;transform:scale(1)}._button_v3ie2_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_v3ie2_11:disabled{cursor:default}._button_v3ie2_11{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}._button_v3ie2_11:hover ._icon_v3ie2_6{transform:scale(1.15)}._button_v3ie2_11:focus-visible{outline:2px solid hsl(var(--ft-color-outline)/100%)}@media(max-width:399px){._button_v3ie2_11{width:48px;height:48px}}._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%}}
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{position:relative;display:inline-block;padding:var(--_surface-padding);overflow:auto;background-color:hsl(var(--_color-bg)/100%);border-radius:var(--_surface-radius);box-shadow:0 0 10px hsl(var(--_color-shadow)/20%)}@media(max-width:399px){._base_d3jtv_1{padding:var(--_surface-padding-mobile)}}._base_of9yn_1{--_popup-head-offset: 32px}._base_of9yn_1 *,._base_of9yn_1 *:before,._base_of9yn_1 *:after{margin:0;box-sizing:border-box;padding:0}._base_of9yn_1{position:fixed;z-index:var(--_popup-z-index);margin:0;display:flex;box-sizing:border-box;max-width:calc(100vw - var(--_surface-padding) * 2);max-height:calc(100vh - var(--_surface-padding) * 2);transform-origin:50% 100%}@media(max-width:399px){._base_of9yn_1{max-width:calc(100vw - var(--_surface-padding-mobile) * 2);max-height:calc(100vh - var(--_surface-padding-mobile) * 2)}}._animated_of9yn_28{opacity:0;animation:_fadeForward_of9yn_1 .12s ease-in-out forwards}@keyframes _fadeForward_of9yn_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_of9yn_43{top:var(--_surface-padding);left:var(--_surface-padding)}@media(max-width:399px){._topLeft_of9yn_43{top:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._topRight_of9yn_54{top:var(--_surface-padding);right:var(--_surface-padding)}@media(max-width:399px){._topRight_of9yn_54{top:var(--_surface-padding-mobile);right:var(--_surface-padding-mobile)}}._bottomRight_of9yn_65{right:var(--_surface-padding);bottom:var(--_surface-padding)}@media(max-width:399px){._bottomRight_of9yn_65{right:var(--_surface-padding-mobile);bottom:var(--_surface-padding-mobile)}}._bottomLeft_of9yn_76{bottom:var(--_surface-padding);left:var(--_surface-padding)}@media(max-width:399px){._bottomLeft_of9yn_76{bottom:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._close_of9yn_87{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_of9yn_87:disabled{cursor:default}._close_of9yn_87{position:absolute;top:var(--_surface-padding);width:24px;height:24px;color:hsl(var(--_color-outline)/100%);transition:color .15s;inset-inline-end:var(--_surface-padding)}._close_of9yn_87:hover{color:hsl(var(--_color-text)/100%)}._close_of9yn_87:before,._close_of9yn_87:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_of9yn_87:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_of9yn_87:after{margin:-8px 0 0 -1px;width:2px;height:16px}@media(max-width:399px){._close_of9yn_87{top:var(--_surface-padding-mobile);inset-inline-end:var(--_surface-padding-mobile)}}._choices_1ul7q_1{margin:0 0 12px}._choice_1ul7q_1{display:flex}._choice_1ul7q_1+._choice_1ul7q_1{margin-top:12px}._label_1ul7q_12{position:relative;display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._sr_1ul7q_21{position:absolute;margin:-1px;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;border-width:0;clip-path:inset(50%)}._checkbox_1ul7q_33{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._check_1ul7q_33{height:20px;min-width:20px;border:1px solid hsl(var(--_color-border)/100%);border-radius:4px}._label_1ul7q_12:hover ._check_1ul7q_33{border-color:hsl(var(--_color-text)/100%)}._checkbox_1ul7q_33:checked+._check_1ul7q_33{position:relative;background-color:hsl(var(--_color-text)/100%);border-color:hsl(var(--_color-text)/100%)}._checkbox_1ul7q_33:checked+._check_1ul7q_33:after{position:absolute;top:50%;left:50%;width:10px;height:7px;content:"";border:2px solid;border-color:transparent transparent hsl(var(--_color-bg)/100%) hsl(var(--_color-bg)/100%);transform:translate(-45%,-75%) rotate(-45deg);pointer-events:none}._input_1ul7q_70{margin-top:8px;height:32px}._textarea_1ul7q_75{height:192px}._input_1ul7q_70,._textarea_1ul7q_75{width:100%;padding:8px 12px;font-size:16px;line-height:1.5;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;transition:background-color .15s,border-color .15s,outline-width .2s}._input_1ul7q_70:focus,._textarea_1ul7q_75:focus{outline:4px solid hsl(var(--_color-outline)/14%)}._input_1ul7q_70._invalid_1ul7q_96,._textarea_1ul7q_75._invalid_1ul7q_96{border-color:hsl(var(--_color-error)/100%)}._submit_1ul7q_101{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._submit_1ul7q_101:disabled{cursor:default}._submit_1ul7q_101{padding:8px 32px;font-size:16px;font-weight:400;text-align:center;color:hsl(var(--_color-bg)/100%);background-color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);transition:opacity .2s}._submit_1ul7q_101:hover{opacity:.85}._submit_1ul7q_101{margin-top:16px;width:100%}._success_1ul7q_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_1pf43_1{padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif;color:hsl(var(--_color-text)/100%)}._base_1pf43_1 *,._base_1pf43_1 *:before,._base_1pf43_1 *:after{margin:0;box-sizing:border-box;padding:0}._head_1pf43_14{display:flex;gap:8px;padding-block:0 20px;padding-inline:0 var(--_popup-head-offset)}._title_1pf43_21{flex:1 0;font-family:inherit;font-size:16px;font-weight:500;font-style:normal;line-height:1.4}._base_1e603_1{margin:12px 0 0;display:flex}._label_1e603_6{flex:0 0 50%;max-width:50%;font-size:14px;line-height:1.4286;color:hsl(var(--_color-muted)/100%)}._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{padding-right:8px;text-align:end}._center_1e603_28 ._label_1e603_6:last-child{padding-left:8px;text-align:start}._center_1e603_28 ._text_1e603_40{display:inline-block;min-width:56px;text-align:center}@media(max-width:599px){._center_1e603_28 ._text_1e603_40{min-width:48px}}._list_grany_1{display:flex;justify-content:center;gap:16px}._icon_grany_7{transition:transform .12s ease;transform:scale(1)}._button_grany_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_grany_12:disabled{cursor:default}._button_grany_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--_color-control)/100%);border-radius:50%}._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(max-width:399px){._button_grany_12{width:48px;height:48px}}._list_1yzyr_1{display:flex;justify-content:center;gap:16px}._icon_1yzyr_7{transition:transform .12s ease;transform:scale(1)}._button_1yzyr_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1yzyr_12:disabled{cursor:default}._button_1yzyr_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--_color-control)/100%);border-radius:50%}._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(max-width:399px){._rating_113r0_5,._feedback_113r0_6,._success_113r0_7{width:100%}}._list_1vfe4_1{display:flex;justify-content:space-between}._icon_1vfe4_6{transition:transform .12s ease;transform:scale(1)}._button_1vfe4_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1vfe4_11:disabled{cursor:default}._button_1vfe4_11{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--_color-control)/100%);border-radius:50%}._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(max-width:399px){._button_1vfe4_11{width:48px;height:48px}}._list_16sag_1{display:flex;justify-content:space-between}._button_16sag_6{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_16sag_6:disabled{cursor:default}._button_16sag_6{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:18px;font-weight:700;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--_color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._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{display:flex;justify-content:space-between}._icon_1kpxu_6{transition:transform .12s ease;transform:scale(1)}._button_1kpxu_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1kpxu_11:disabled{cursor:default}._button_1kpxu_11{display:flex;align-items:center;justify-content:center;width:40px;height:40px}._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(max-width:399px){._rating_m4qio_5,._feedback_m4qio_6,._success_m4qio_7{width:100%}}._list_whbas_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:599px){._list_whbas_1{flex-direction:column-reverse;gap:4px}}._button_whbas_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_whbas_13:disabled{cursor:default}._button_whbas_13{display:inline-block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--_color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_whbas_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media(max-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(max-width:599px){._button_whbas_13 ._label_whbas_55{display:inline}}@media(max-width:599px){._button_whbas_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:599px){._labels_whbas_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_divjm_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:599px){._list_divjm_1{flex-direction:column-reverse;gap:4px}}._button_divjm_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_divjm_13:disabled{cursor:default}._button_divjm_13{display:block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--_color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_divjm_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media(max-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(max-width:599px){._button_divjm_13 ._label_divjm_55{display:inline}}@media(max-width:599px){._button_divjm_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:599px){._labels_divjm_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
@@ -30,15 +30,13 @@ export declare interface NPS10SurveyProps extends SharedSurveyProps {
30
30
 
31
31
  export declare const Popup: React.FC<PopupProps>;
32
32
 
33
- export declare interface PopupProps {
33
+ export declare interface PopupProps extends React.HTMLAttributes<HTMLDivElement> {
34
34
  animated?: boolean;
35
- className?: string;
36
35
  classNames?: {
37
36
  base?: string;
38
37
  content?: string;
39
38
  close?: string;
40
39
  };
41
- children?: React.ReactNode;
42
40
  placement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft';
43
41
  onClose?: () => void;
44
42
  }
@@ -118,10 +116,7 @@ export declare interface SharedSurveyProps {
118
116
 
119
117
  export declare const Surface: React.FC<SurfaceProps>;
120
118
 
121
- export declare interface SurfaceProps {
122
- className?: string;
123
- children?: React.ReactNode;
124
- }
119
+ export declare type SurfaceProps = React.HTMLAttributes<HTMLDivElement>;
125
120
 
126
121
  /**
127
122
  * Callback function for survey submission