react-feedback-surveys 1.5.3 → 1.5.4

package/README.md

@@ -86,7 +86,7 @@ Surveys to ask users about their overall satisfaction.
 - "How would you rate your overall experience?"
 - "How satisfied are you with our customer support?"
 
-<img alt="CSAT5" src="docs/assets/csat5.png" width="400" />
+<img alt="CSAT5" src="docs/assets/csat5.png" width="416" />
 
 ```tsx
 import { CSAT5Survey } from 'react-feedback-surveys';
@@ -117,7 +117,7 @@ Surveys to ask users about specific features or flows.
 - "Did you find what you were looking for?"
 - "Are you satisfied with the checkout process?"
 
-<img alt="CSAT2" src="docs/assets/csat2.png" width="390" />
+<img alt="CSAT2" src="docs/assets/csat2.png" width="386" />
 
 ```tsx
 import { CSAT2Survey } from 'react-feedback-surveys';
@@ -146,9 +146,9 @@ Surveys to ask users if they'd recommend your product.
 - "On a scale of 0-10, would you recommend our service?"
 - "How likely are you to recommend this product to others?"
 
-<img alt="NPS10" src="docs/assets/nps10.png" width="600" />
+<img alt="NPS10" src="docs/assets/nps10.png" width="616" />
 
-<img alt="NPS10 mobile" src="docs/assets/nps10-mobile.png" width="362" />
+<img alt="NPS10 mobile" src="docs/assets/nps10-mobile.png" width="340" />
 
 ```tsx
 import { NPS10Survey } from 'react-feedback-surveys';
@@ -179,7 +179,7 @@ Surveys to ask users how easy it is to use your product.
 - "How much effort did it take to resolve your issue?"
 - "How easy was it to sign up for an account?"
 
-<img alt="CES7" src="docs/assets/ces7.png" width="420" />
+<img alt="CES7" src="docs/assets/ces7.png" width="436" />
 
 ```tsx
 import { CES7Survey } from 'react-feedback-surveys';
@@ -207,7 +207,7 @@ import 'react-feedback-surveys/index.css';
 
 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.
 
-<img alt="CSAT5 Popup" src="docs/assets/csat5-popup.png" width="400" />
+<img alt="CSAT5 Popup" src="docs/assets/csat5-popup.png" width="416" />
 
 #### Usage
 
@@ -252,7 +252,7 @@ The `<Surface>` component is a basic container wrapper that provides consistent
 
 The Surface component provides:
 - Background color with depth/elevation (box shadow)
-- Rounded corners (8px border radius)
+- Rounded corners (controlled via `--ft-surface-radius`)
 - Responsive padding that adapts to mobile devices
 
 #### Usage
@@ -277,7 +277,7 @@ import 'react-feedback-surveys/index.css';
 | `className` | `string`          | -        | -       | Additional CSS class name for the surface container.|
 | `children`  | `React.ReactNode` | -        | -       | Content to render inside the surface.              |
 
-The Surface component uses the `--ft-surface-padding` and `--ft-surface-padding-mobile` CSS variables for responsive padding.
+The Surface component uses the `--ft-surface-padding`, `--ft-surface-padding-mobile`, and `--ft-surface-radius` CSS variables for responsive padding and border radius.
 
 ## Props
 
@@ -448,6 +448,9 @@ You can override colors and fonts via CSS variables:
 
   /* Padding for Surface component container on mobile devices (max-width: 400px) */
   --ft-surface-padding-mobile: 20px;
+
+  /* Border radius for Surface container, inputs, and submit button */
+  --ft-surface-radius: 8px;
 }
 
 /* Use with hsl() function: */
@@ -653,7 +656,7 @@ npm run build
 
 ## Changelog
 
-For a detailed history of changes, see the [Changelog](https://feedback.tools/react-feedback-surveys/changelog).
+For a detailed history of changes, see the [Changelog](https://feedback.tools/react-feedback-surveys/docs/changelog).
 
 ## Credits
 

package/dist/index.css

@@ -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%}}
+:root{--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;--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_m9otl_1{--ft-popup-head-offset: 32px;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_m9otl_1{max-width:calc(100vw - var(--_surface-padding-mobile) * 2);max-height:calc(100vh - var(--_surface-padding-mobile) * 2)}}._animated_m9otl_19{opacity:0;animation:_fadeForward_m9otl_1 .12s ease-in-out forwards}@keyframes _fadeForward_m9otl_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_m9otl_34{top:var(--_surface-padding);left:var(--_surface-padding)}@media(max-width:399px){._topLeft_m9otl_34{top:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._topRight_m9otl_45{top:var(--_surface-padding);right:var(--_surface-padding)}@media(max-width:399px){._topRight_m9otl_45{top:var(--_surface-padding-mobile);right:var(--_surface-padding-mobile)}}._bottomRight_m9otl_56{right:var(--_surface-padding);bottom:var(--_surface-padding)}@media(max-width:399px){._bottomRight_m9otl_56{right:var(--_surface-padding-mobile);bottom:var(--_surface-padding-mobile)}}._bottomLeft_m9otl_67{bottom:var(--_surface-padding);left:var(--_surface-padding)}@media(max-width:399px){._bottomLeft_m9otl_67{bottom:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._close_m9otl_78{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_m9otl_78:disabled{cursor:default}._close_m9otl_78{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_m9otl_78:hover{color:hsl(var(--_color-text)/100%)}._close_m9otl_78:before,._close_m9otl_78:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_m9otl_78:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_m9otl_78:after{margin:-8px 0 0 -1px;width:2px;height:16px}@media(max-width:399px){._close_m9otl_78{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_no1ta_1{--_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);padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif;color:hsl(var(--_color-text)/100%)}._base_no1ta_1 *,._base_no1ta_1 *:before,._base_no1ta_1 *:after{margin:0;box-sizing:border-box;padding:0}._head_no1ta_27{display:flex;gap:8px;padding-block:0 20px;padding-inline:0 var(--_popup-head-offset)}._title_no1ta_34{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

@@ -30,15 +30,13 @@ export declare interface NPS10SurveyProps extends SharedSurveyProps {
 
 export declare const Popup: React.FC<PopupProps>;
 
-export declare interface PopupProps {
+export declare interface PopupProps extends React.HTMLAttributes<HTMLDivElement> {
     animated?: boolean;
-    className?: string;
     classNames?: {
         base?: string;
         content?: string;
         close?: string;
     };
-    children?: React.ReactNode;
     placement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft';
     onClose?: () => void;
 }
@@ -118,10 +116,7 @@ export declare interface SharedSurveyProps {
 
 export declare const Surface: React.FC<SurfaceProps>;
 
-export declare interface SurfaceProps {
-    className?: string;
-    children?: React.ReactNode;
-}
+export declare type SurfaceProps = React.HTMLAttributes<HTMLDivElement>;
 
 /**
  * Callback function for survey submission