react-feedback-surveys 1.8.0 → 1.9.0

package/README.md

@@ -35,6 +35,8 @@ Check out [feedback.tools](https://feedback.tools) — built by the same team.
     * [Surface](#surface)
 - [Props](#props)
     * [Shared Props](#shared-props)
+    * [Accessibility Labels](#accessibility-labels)
+    * [Attachments](#attachments)
     * [Format Props](#format-props)
     * [Scale Style Options](#scale-style-options)
 - [Styling](#styling)
@@ -59,17 +61,19 @@ Check out [feedback.tools](https://feedback.tools) — built by the same team.
 - **Flexible placement** – embed inline or display as popup overlay
 - **Follow-up feedback** – optional text input or multiple choice responses
 - **Optional email collection** – close the loop by capturing a respondent's email when no user identity is known
+- **Optional screenshot attachments** – let respondents attach a screenshot, captured by a function you provide
 - **Fully customizable** – CSS variables and custom class names
 - **Zero dependencies**
 - **TypeScript support**
 
 ## Survey Types
 
-`Survey` covers three feedback methodologies, selected with the `type` prop. `CSAT` is the only one with a variable scale length, set via `points`:
+`Survey` covers four feedback methodologies, selected with the `type` prop. `CSAT` is the only one with a variable scale length, set via `points`:
 
 - **CSAT (Customer Satisfaction Score):** `type="csat"`, 2-point or 5-point scale (`points={2}` or `points={5}`)
 - **NPS (Net Promoter Score):** `type="nps"`, fixed 0–10 scale
 - **CES (Customer Effort Score):** `type="ces"`, fixed 7-point scale
+- **General (text feedback only):** `type="general"`, no rating scale — see [General](#general-text-feedback-only)
 
 ## Installation
 
@@ -211,6 +215,31 @@ import 'react-feedback-surveys/index.css';
 
 `scaleStyle`: `numbers`.
 
+### General (text feedback only)
+
+No rating scale — just text feedback and an optional screenshot. The text feedback step is shown immediately and is the whole survey; there's no `points`/`scaleStyle`/`minLabel`/`maxLabel`/`question` to set.
+
+**Example use cases:**
+- A general "Send feedback" or "Report a problem" trigger with no methodology attached.
+- Contexts where a numeric rating doesn't make sense.
+
+<img alt="General" src="docs/assets/general.png" width="368" />
+
+```tsx
+import { Survey } from 'react-feedback-surveys';
+import 'react-feedback-surveys/index.css';
+
+<Survey
+  type="general"
+  textQuestion="Got feedback? We'd love to hear it"
+  textButtonSendLabel="Send"
+  thankYouMessage="Thank you for your feedback!"
+  onFeedbackSubmit={({ text }) => {/* ... */}}
+/>
+```
+
+`responseType` defaults to `'text'` (also accepts `'choices'`) — it can't be unset, since the text feedback step is the only content the survey has. The step is mandatory: there's no Skip button (`textButtonSkipLabel` is ignored for `type="general"`), and Submit stays disabled until there's something to send.
+
 ## Layout Components
 
 ### Popup
@@ -254,10 +283,14 @@ import 'react-feedback-surveys/index.css';
 | `className`  | `string`                                                   | -        | -               | Additional CSS class name for the popup container.                 |
 | `classNames` | `{ base?: string; content?: string; close?: string }`      | -        | -               | Optional class names for internal popup elements.                  |
 | `children`   | `React.ReactNode`                                          | -        | -               | Content to render inside the popup (typically a survey component). |
+| `closeLabel` | `string`                                                    | -        | `'Close survey'` | Close button label, used for both its `aria-label` and `title`.   |
 | `onClose`    | `() => void`                                               | -        | -               | Callback fired when the close button is clicked.                   |
 
 For more examples, check out the Storybook stories under `widgets/Survey` (grouped by CSAT/NPS/CES in the sidebar).
 
+> **Note**
+> If the survey inside uses `dir="rtl"` on a page that's otherwise LTR (or vice versa), pass the same `dir` to `Popup` too — the close button's position resolves against the document direction, while the survey head's reserved offset resolves against the survey's own `dir`. Passing both keeps them aligned.
+
 ### Surface
 
 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.
@@ -303,14 +336,17 @@ Most props are shared across every survey format. `type` (and `points`, for CSAT
 |--------------------|-------------------------------|----------|------------------------------------------------------------------------------|
 | `classNames`       | `ClassNamesConfig` (see below)| -        | Optional class names to target internal parts.                               |
 | `dir`              | `'ltr' \| 'rtl' \| 'auto'`    | -        | Text direction for RTL/LTR language support.                                 |
-| `question`         | `string`                      | required | Main survey question displayed on the first screen.                          |
-| `minLabel`         | `string`                      | -        | Left label for the scale.                                                    |
-| `maxLabel`         | `string`                      | -        | Right label for the scale.                                                   |
-| `responseType`     | `null \| 'text' \| 'choices'` | -        | Enables optional follow-up feedback.                                         |
+| `strings`          | `SurveyStrings` (see below)   | -        | Overrides for the library's own aria-labels and other screen-reader-only text. See [Accessibility Labels](#accessibility-labels). |
+| `question`         | `string`                      | required (not used for `type="general"`) | Main survey question displayed on the first screen.       |
+| `minLabel`         | `string`                      | -        | Left label for the scale. Not used for `type="general"`.                     |
+| `maxLabel`         | `string`                      | -        | Right label for the scale. Not used for `type="general"`.                    |
+| `getScoreLabelSuffix` | `(label: string) => string` | -        | Builds the visible text appended after the first/last numbered scale button when it carries `minLabel`/`maxLabel`. Default `` (label) => ` - ${label}` ``. Applies to the `numbers` scale style (CSAT5, CES, NPS). |
+| `responseType`     | `null \| 'text' \| 'choices'` (`'text' \| 'choices'` for `type="general"`, defaults to `'text'`) | -        | Enables optional follow-up feedback.                     |
 | `textQuestion`     | `string`                      | -        | Follow-up question displayed when `responseType` is defined.                 |
 | `textButtonSendLabel`  | `string`                      | -        | Submit label for the feedback screen.                                        |
 | `textButtonSkipLabel`  | `string`                      | -        | Skip label for the feedback screen.                                          |
 | `choiceOptions`    | `string[] \| null`            | -        | Predefined choices (when `responseType === 'choices'`).                      |
+| `otherPlaceholder` | `string`                      | -        | Placeholder for the free-text input next to choice checkboxes. Default `'Other'`. |
 | `thankYouMessage`  | `string`                      | required | Message shown after submission.                                              |
 | `collectContact`     | `boolean`                     | -        | Enables an optional email collection step before the success screen.         |
 | `userId`           | `string`                      | -        | Existing user identity. When provided, the email collection step is skipped. |
@@ -318,6 +354,43 @@ Most props are shared across every survey format. `type` (and `points`, for CSAT
 | `contactSubtext`   | `string`                      | -        | Descriptive text shown above the email input.                                |
 | `contactButtonSendLabel` | `string`                      | -        | Submit label for the email collection screen.                                |
 | `contactButtonSkipLabel`  | `string`                      | -        | Skip label for the email collection screen.                                  |
+| `onCaptureScreenshot` | `() => string \| Blob \| Promise<string \| Blob>` | -        | Enables an optional screenshot-attachment control on the feedback step. Hidden unless provided — see [Attachments](#attachments). |
+| `screenshotButtonLabel` | `string`                    | -        | Label for the screenshot-attachment control.                                 |
+| `screenshotErrorMessage` | `string`                  | -        | Shown to the respondent when `onCaptureScreenshot` fails. Default `'Failed to capture screenshot'`. |
+| `maxAttachments`   | `number`                      | -        | Maximum number of attachments a respondent may confirm. Default `1`. See [Attachments](#attachments). |
+| `attachmentCaption` | `string`                     | -        | Visible caption under an attachment thumbnail, also used as its image alt text. Default `'Screenshot'`. |
+
+### Accessibility Labels
+
+A handful of internal aria-labels ship with an English default. These are never visible UI copy (that's `question`, `thankYouMessage`, `otherPlaceholder`, `attachmentCaption`, etc., always authored by you, listed alongside the rest of the shared props above) — every key in `strings` is announced to assistive tech only, useful to override if you're localizing a survey for a non-English audience.
+
+Pass a `strings` object with only the keys you want to change — each one merges over its own English default, so there's no need to repeat the rest:
+
+```tsx
+<Survey
+  /* ... */
+  strings={{
+    emailLabel: 'Adresse e-mail',
+    getScoreLabel: (score) => `Score ${score}`
+  }}
+/>
+```
+
+#### SurveyStrings Type
+
+| Key | Type | Default |
+|-----|------|---------|
+| `feedbackFormLabel` | `string` | `'Feedback form'` |
+| `additionalFeedbackLabel` | `string` | `'Additional feedback'` |
+| `yourFeedbackLabel` | `string` | `'Your feedback'` |
+| `contactFormLabel` | `string` | `'Contact form'` |
+| `emailLabel` | `string` | `'Email address'` |
+| `attachmentOpenLabel` | `string` | `'Open screenshot in a new tab'` |
+| `attachmentRemoveLabel` | `string` | `'Remove screenshot'` |
+| `getScoreLabel` | `(score: number) => string` | `(score) => \`Score ${score}\`` |
+| `getStarsLabel` | `(score: number) => string` | `(score) => \`${score} ${score > 1 ? 'stars' : 'star'}\`` |
+
+`getScoreLabel` applies to the `numbers` scale style (CSAT5, CES, NPS); `getStarsLabel` applies to CSAT5's `stars` style. Both are callbacks rather than templates so you can apply correct pluralization for your target language. `Popup`'s close button label lives on `Popup` itself, not in `strings` — see its own `closeLabel` prop in [Popup Props](#props).
 
 #### ClassNamesConfig Type
 
@@ -357,10 +430,13 @@ interface ClassNamesConfig {
 
 ```typescript
 type ScorePayload = { value: number };
-type FeedbackPayload = { value: number; text?: string | string[] };
+type FeedbackPayload = { value?: number; text?: string | string[]; attachments?: Attachment[] };
 type ContactPayload = { value?: number; text?: string | string[]; email: string };
+type Attachment = { kind: 'screenshot'; data: string | Blob; name?: string; mimeType?: string; size?: number };
 ```
 
+> See [Attachments](#attachments).
+
 > **Event behavior**
 
 #### `onScoreSubmit`
@@ -379,13 +455,14 @@ The actual `value` returned depends on the survey type:
 Invoked when the user completes the follow-up step and submits their feedback (only applies when `responseType` is `text` or `choices`).  
 This callback provides both the original score and the user's input.
 
-The feedback step is always optional: respondents can submit feedback or skip it via the `textButtonSkipLabel` button (or by submitting with empty input), and either action advances to the next screen. `onFeedbackSubmit` only fires when feedback text or choices are actually submitted; it is **not** called when the step is skipped.
+For surveys with a rating step, the feedback step is optional: respondents can submit feedback or skip it via the `textButtonSkipLabel` button (or by submitting with empty input), and either action advances to the next screen. For `type="general"`, the feedback step **is** the survey, so there's no Skip button — Submit stays disabled until there's something to send. `onFeedbackSubmit` only fires when feedback text or choices are actually submitted; it is **not** called when a rating-survey's step is skipped.
 
 **Arguments:**
-- `value: number` — the same score previously passed to `onScoreSubmit`
+- `value?: number` — the same score previously passed to `onScoreSubmit`; `undefined` for `type="general"`, which has no rating step
 - `text: string | string[]` — depends on `responseType`:
-    - `text`: a single text comment
-    - `choices`: an array of selected options (may include a free-text comment if enabled)
+    - `text`: a single text feedback string
+    - `choices`: an array of selected options (may include free-text feedback if enabled)
+- `attachments?: Attachment[]` — present when the respondent confirmed a screenshot; see [Attachments](#attachments)
 
 > **Important**  
 You should listen to **both** `onScoreSubmit` and `onFeedbackSubmit`.  
@@ -425,11 +502,59 @@ When `collectContact` is `true` and no `userId` is provided, an optional email c
 />
 ```
 
+### Attachments
+
+Respondents can attach a screenshot to their feedback, surfaced on submit as `attachments?: Attachment[]` (see the event payload types above). Each attachment renders as a thumbnail in the feedback step, with a caption and size underneath, click to open it in a new tab, click the "x" to remove it. Submit is disabled for the brief moment a capture is still in flight, so it can't be confirmed before the attachment actually lands in the list.
+
+Once an attachment is confirmed, the Skip button is disabled — an attached screenshot is never silently discarded. Remove the attachment to re-enable Skip, or fill in feedback and submit to keep it. An attachment on its own is never sufficient to submit, either: for `responseType="text"`, submitting with an attachment but no text flags the textarea instead of sending; for `responseType="choices"`, Submit stays disabled until a choice is picked or text is entered.
+
+By default a respondent can confirm a single attachment: once one is attached, the add control hides. Pass `maxAttachments` to raise (or lower) that cap. The add control stays visible (below the existing thumbnails) until the cap is reached:
+
+```tsx
+<Survey
+  /* ... */
+  onCaptureScreenshot={() => domToDataUrl(document.body)}
+  maxAttachments={3}
+/>
+```
+
+Pass `onCaptureScreenshot` to add an "Capture screenshot" control to the feedback step. Clicking it calls your function and attaches the result immediately. The control is off by default: it doesn't render at all unless `onCaptureScreenshot` is provided.
+
+Capturing a screenshot needs an actual DOM-to-image library (or a native bridge in a hybrid app) — real, non-trivial code that most consumers of this package won't want to pay for in bundle size if they don't use the feature. So react-feedback-surveys deliberately doesn't ship a capture implementation itself: bring your own function that returns the captured image (as a data URL string, a `Blob`, or a `Promise` of either). A drop-in recipe using [modern-screenshot](https://github.com/qq15725/modern-screenshot):
+
+```shell
+npm i modern-screenshot
+```
+
+```tsx
+import { Survey } from 'react-feedback-surveys';
+import { domToDataUrl } from 'modern-screenshot';
+import 'react-feedback-surveys/index.css';
+
+<Survey
+  type="csat"
+  points={5}
+  scaleStyle="numbers"
+  question="How would you rate your satisfaction with our product?"
+  responseType="text"
+  textQuestion="We'd love to hear your thoughts — what can we improve?"
+  thankYouMessage="Thanks for your feedback!"
+  onCaptureScreenshot={() => domToDataUrl(document.body)}
+  onScoreSubmit={({ value }) => {/* ... */}}
+  onFeedbackSubmit={({ value, text, attachments }) => {/* attachments?.[0]?.data holds the attached screenshot */}}
+/>
+```
+
+In a hybrid app, `onCaptureScreenshot` can just as well call into a native bridge (e.g. `WKWebView.takeSnapshot` on iOS) instead of a DOM-to-image library.
+
+> **Note**  
+> DOM-to-image capture is best-effort — fonts, cross-origin images, and some CSS effects may not render identically on every browser (particularly Safari/iOS). The respondent can open the attached thumbnail in a new tab to check it, and remove it with one click if the capture came out wrong.
+
 ### Format Props
 
 | Prop | Type | Required | Description |
 |------|------|----------|--------------|
-| `type` | `'csat'` \| `'nps'` \| `'ces'` | required | Survey methodology. Determines the scale range and which `scaleStyle`/`points` combinations are valid. |
+| `type` | `'csat'` \| `'nps'` \| `'ces'` \| `'general'` | required | Survey methodology. Determines the scale range and which `scaleStyle`/`points` combinations are valid. `'general'` has no scale at all — see [General](#general-text-feedback-only). |
 | `points` | `2` \| `5` | required for `type="csat"`; not used otherwise | Number of points on the scale. `nps` is a fixed 0–10 scale and `ces` a fixed 1–7 scale, so neither takes `points`. |
 
 ### Scale Style Options
@@ -471,6 +596,9 @@ You can override colors and fonts via CSS variables:
   /* Error color for validation messages */
   --ft-color-error: 32 95% 44%;
 
+  /* Error text color (attachment capture errors) — darker than --ft-color-error, tuned for text contrast rather than borders/outlines */
+  --ft-color-error-text: 32 95% 32%;
+
   /* Border color for inputs and containers */
   --ft-color-border: 214 14% 83%;
 
@@ -492,7 +620,7 @@ You can override colors and fonts via CSS variables:
   --ft-popup-head-offset: 0;
 
   /* Padding for Surface component container (desktop) */
-  --ft-surface-padding: 24px;
+  --ft-surface-padding: 20px;
 
   /* Padding for Surface component container on mobile devices (max-width: 400px) */
   --ft-surface-padding-mobile: 20px;
@@ -522,6 +650,7 @@ Here's an example of dark theme colors that work well with the survey components
   --ft-color-bg: 220 13% 13%;
   --ft-color-muted: 214 10% 60%;
   --ft-color-error: 14 90% 62%;
+  --ft-color-error-text: 14 85% 72%;
   --ft-color-border: 217 10% 28%;
   --ft-color-outline: 216 12% 45%;
   --ft-color-shadow: 0 0% 0%;

package/dist/index.css

@@ -1,2 +1,2 @@
-:root,:host{--_color-text:var(--ft-color-text,30 8% 14%);--_color-bg:var(--ft-color-bg,0 0% 100%);--_color-muted:var(--ft-color-muted,222 11% 46%);--_color-error:var(--ft-color-error,32 95% 44%);--_color-border:var(--ft-color-border,214 14% 83%);--_color-outline:var(--ft-color-outline,218 14% 65%);--_color-shadow:var(--ft-color-shadow,0 0% 0%);--_color-control:var(--ft-color-control,214 20% 96%);--_popup-z-index:var(--ft-popup-z-index,49);--_popup-head-offset:var(--ft-popup-head-offset,0);--_surface-padding:var(--ft-surface-padding,24px);--_surface-padding-mobile:var(--ft-surface-padding-mobile,20px);--_surface-radius:var(--ft-surface-radius,8px);--_font-family:var(--ft-font-family,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);font-family:var(--_font-family)}input,textarea,select{font:inherit}._base_d5qlz_1{padding:var(--_surface-padding);background-color:hsl(var(--_color-bg)/100%);border-radius:var(--_surface-radius);box-shadow:0 0 10px hsl(var(--_color-shadow)/20%);display:block;position:relative;overflow:auto}@media (width<=399px){._base_d5qlz_1{padding:var(--_surface-padding-mobile)}}._base_1vr2h_1{--_popup-head-offset:32px;z-index:var(--_popup-z-index);box-sizing:border-box;max-width:calc(100vw - var(--_surface-padding) * 2);max-height:calc(100vh - var(--_surface-padding) * 2);transform-origin:50% 100%;margin:0;display:flex;position:fixed}@media (width<=399px){._base_1vr2h_1{max-width:calc(100vw - var(--_surface-padding-mobile) * 2);max-height:calc(100vh - var(--_surface-padding-mobile) * 2)}}._animated_1vr2h_19{opacity:0;animation:.12s ease-in-out forwards _fadeForward_1vr2h_1}@keyframes _fadeForward_1vr2h_1{0%{opacity:0;transform:translateY(8px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}._topLeft_1vr2h_34{top:var(--_surface-padding);left:var(--_surface-padding)}@media (width<=399px){._topLeft_1vr2h_34{top:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._topRight_1vr2h_45{top:var(--_surface-padding);right:var(--_surface-padding)}@media (width<=399px){._topRight_1vr2h_45{top:var(--_surface-padding-mobile);right:var(--_surface-padding-mobile)}}._bottomRight_1vr2h_56{right:var(--_surface-padding);bottom:var(--_surface-padding)}@media (width<=399px){._bottomRight_1vr2h_56{right:var(--_surface-padding-mobile);bottom:var(--_surface-padding-mobile)}}._bottomLeft_1vr2h_67{bottom:var(--_surface-padding);left:var(--_surface-padding)}@media (width<=399px){._bottomLeft_1vr2h_67{bottom:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._close_1vr2h_78{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._close_1vr2h_78:disabled{cursor:default}._close_1vr2h_78{top:var(--_surface-padding);width:24px;height:24px;color:hsl(var(--_color-outline)/100%);transition:color .15s;position:absolute;inset-inline-end:var(--_surface-padding)}._close_1vr2h_78:hover{color:hsl(var(--_color-text)/100%)}._close_1vr2h_78:before,._close_1vr2h_78:after{content:"";background-color:currentColor;border-radius:1px;position:absolute;top:50%;left:50%;transform:rotate(45deg)}._close_1vr2h_78:before{width:16px;height:2px;margin:-1px 0 0 -8px}._close_1vr2h_78:after{width:2px;height:16px;margin:-8px 0 0 -1px}@media (width<=399px){._close_1vr2h_78{top:var(--_surface-padding-mobile);inset-inline-end:var(--_surface-padding-mobile)}}._sr_clg7k_1{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._subtext_clg7k_13{margin:0 0 16px;line-height:1.25}._input_clg7k_18{box-sizing:border-box;width:100%;color:hsl(var(--_color-text)/100%);background-color:hsl(var(--_color-bg)/100%);border:1px solid hsl(var(--_color-border)/100%);border-radius:var(--_surface-radius);outline:0 solid hsl(var(--_color-outline)/14%);padding:4px 12px;font-family:inherit;font-size:16px;line-height:1.5;transition:background-color .15s,border-color .15s,outline-width .2s}._input_clg7k_18:focus{outline:4px solid hsl(var(--_color-outline)/14%)}._input_clg7k_18._invalid_clg7k_35{border-color:hsl(var(--_color-error)/100%)}._input_clg7k_18._invalid_clg7k_35:focus{outline-color:hsl(var(--_color-error)/14%)}._submit_clg7k_42{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._submit_clg7k_42:disabled{cursor:default}._submit_clg7k_42{text-align:center;color:hsl(var(--_color-bg)/100%);background-color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);padding:8px 32px;font-size:16px;font-weight:400;transition:opacity .2s}._submit_clg7k_42:hover{opacity:.85}._submit_clg7k_42{width:100%;margin-top:16px}._skip_clg7k_74{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._skip_clg7k_74:disabled{cursor:default}._skip_clg7k_74{text-align:center;width:100%;color:hsl(var(--_color-muted)/100%);cursor:pointer;margin-top:8px;padding:4px;font-size:16px;font-weight:500;line-height:1.5;display:block}._skip_clg7k_74:hover{color:hsl(var(--_color-text)/100%)}._choices_nhux3_1{margin:0 0 12px}._choice_nhux3_1{display:flex}._choice_nhux3_1+._choice_nhux3_1{margin-top:12px}._label_nhux3_12{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:flex-start;gap:8px;display:inline-flex;position:relative}._sr_nhux3_21{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._checkbox_nhux3_33{white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}._check_nhux3_33{border:1px solid hsl(var(--_color-border)/100%);border-radius:4px;min-width:20px;height:20px}._label_nhux3_12:hover ._check_nhux3_33{border-color:hsl(var(--_color-text)/100%)}._checkbox_nhux3_33:focus-visible+._check_nhux3_33{outline:4px solid hsl(var(--_color-outline)/14%)}._checkbox_nhux3_33:checked+._check_nhux3_33{background-color:hsl(var(--_color-text)/100%);border-color:hsl(var(--_color-text)/100%);position:relative}._checkbox_nhux3_33:checked+._check_nhux3_33:after{content:"";border:2px solid;border-color:transparent transparent hsl(var(--_color-bg)/100%) hsl(var(--_color-bg)/100%);pointer-events:none;width:10px;height:4px;position:absolute;top:50%;left:50%;transform:translate(-45%,-75%)rotate(-45deg)}._input_nhux3_74{margin-top:8px;padding:4px 12px}._textarea_nhux3_79{height:120px;padding:8px 12px}._input_nhux3_74,._textarea_nhux3_79{box-sizing:border-box;width:100%;color:hsl(var(--_color-text)/100%);background-color:hsl(var(--_color-bg)/100%);border:1px solid hsl(var(--_color-border)/100%);border-radius:var(--_surface-radius);outline:0 solid hsl(var(--_color-outline)/14%);resize:none;font-family:inherit;font-size:16px;line-height:1.5;transition:background-color .15s,border-color .15s,outline-width .2s}._input_nhux3_74:focus,._textarea_nhux3_79:focus{outline:4px solid hsl(var(--_color-outline)/14%)}._submit_nhux3_104{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._submit_nhux3_104:disabled{cursor:default}._submit_nhux3_104{text-align:center;color:hsl(var(--_color-bg)/100%);background-color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);padding:8px 32px;font-size:16px;font-weight:400;transition:opacity .2s}._submit_nhux3_104:hover{opacity:.85}._submit_nhux3_104{width:100%;margin-top:16px}._skip_nhux3_136{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._skip_nhux3_136:disabled{cursor:default}._skip_nhux3_136{text-align:center;width:100%;color:hsl(var(--_color-muted)/100%);cursor:pointer;margin-top:8px;padding:4px;font-size:16px;font-weight:500;line-height:1.5;display:block}._skip_nhux3_136:hover{color:hsl(var(--_color-text)/100%)}._success_nhux3_166{text-align:center;padding:16px 0 32px;font-size:16px;font-weight:600;line-height:1.5}._base_1ilpx_1{text-align:center;padding:0 24px}._icon_1ilpx_6{display:inline-block}._base_1xpqq_1{color:hsl(var(--_color-text)/100%);padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif}._head_1xpqq_7{padding-block:0 20px;padding-inline:0 var(--_popup-head-offset);gap:8px;display:flex}._title_1xpqq_14{flex:1 0;font-family:inherit;font-size:16px;font-style:normal;font-weight:500;line-height:1.4}._base_nswpf_1{margin:12px 0 0;display:flex}._label_nswpf_6{box-sizing:border-box;max-width:50%;color:hsl(var(--_color-muted)/100%);flex:0 0 50%;font-size:14px;line-height:1.4286}._between_nswpf_15{justify-content:space-between}._between_nswpf_15 ._label_nswpf_6{flex:0 0 50%;max-width:50%}._between_nswpf_15 ._label_nswpf_6:first-child{text-align:start}._between_nswpf_15 ._label_nswpf_6:last-child{text-align:end}._center_nswpf_29 ._label_nswpf_6{flex:0 0 50%;max-width:50%}._center_nswpf_29 ._label_nswpf_6:first-child{text-align:end;padding-right:8px}._center_nswpf_29 ._label_nswpf_6:last-child{text-align:start;padding-left:8px}._center_nswpf_29 ._text_nswpf_41{text-align:center;min-width:56px;display:inline-block}@media (width<=599px){._center_nswpf_29 ._text_nswpf_41{min-width:48px}}._list_1vfe4_1{justify-content:space-between;display:flex}._icon_1vfe4_6{transition:transform .12s;transform:scale(1)}._button_1vfe4_11{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1vfe4_11:disabled{cursor:default}._button_1vfe4_11{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_1vfe4_11:hover ._icon_1vfe4_6{transform:scale(1.15)}._button_1vfe4_11:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}@media (width<=399px){._button_1vfe4_11{width:48px;height:48px}}._list_16sag_1{justify-content:space-between;display:flex}._button_16sag_6{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_16sag_6:disabled{cursor:default}._button_16sag_6{width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:flex}._button_16sag_6:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}._button_16sag_6:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._list_1kpxu_1{justify-content:space-between;display:flex}._icon_1kpxu_6{transition:transform .12s;transform:scale(1)}._button_1kpxu_11{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1kpxu_11:disabled{cursor:default}._button_1kpxu_11{justify-content:center;align-items:center;width:40px;height:40px;display:flex}._button_1kpxu_11:hover ._icon_1kpxu_6{transform:scale(1.1)}._button_1kpxu_11:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._list_grany_1{justify-content:center;gap:16px;display:flex}._icon_grany_7{transition:transform .12s;transform:scale(1)}._button_grany_12{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_grany_12:disabled{cursor:default}._button_grany_12{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_grany_12:hover ._icon_grany_7{transform:scale(1.15)}._button_grany_12:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}@media (width<=399px){._button_grany_12{width:48px;height:48px}}._list_1yzyr_1{justify-content:center;gap:16px;display:flex}._icon_1yzyr_7{transition:transform .12s;transform:scale(1)}._button_1yzyr_12{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1yzyr_12:disabled{cursor:default}._button_1yzyr_12{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_1yzyr_12:hover ._icon_1yzyr_7{transform:scale(1.15)}._button_1yzyr_12:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._list_whbas_1{justify-content:space-between;gap:6px;display:flex}@media (width<=599px){._list_whbas_1{flex-direction:column-reverse;gap:4px}}._button_whbas_13{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_whbas_13:disabled{cursor:default}._button_whbas_13{text-align:center;width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:inline-block}._button_whbas_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media (width<=599px){._button_whbas_13:hover{box-shadow:none}}._button_whbas_13:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._button_whbas_13 ._score_whbas_52{display:inline}._button_whbas_13 ._label_whbas_55{display:none}@media (width<=599px){._button_whbas_13 ._label_whbas_55{display:inline}._button_whbas_13{border-radius:6px;width:100%;height:auto;padding:6px;font-size:14px;line-height:20px}._labels_whbas_75{display:none}}._list_divjm_1{justify-content:space-between;gap:6px;display:flex}@media (width<=599px){._list_divjm_1{flex-direction:column-reverse;gap:4px}}._button_divjm_13{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_divjm_13:disabled{cursor:default}._button_divjm_13{text-align:center;width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:block}._button_divjm_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media (width<=599px){._button_divjm_13:hover{box-shadow:none}}._button_divjm_13:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._button_divjm_13 ._score_divjm_52{display:inline}._button_divjm_13 ._label_divjm_55{display:none}@media (width<=599px){._button_divjm_13 ._label_divjm_55{display:inline}._button_divjm_13{border-radius:6px;width:100%;height:auto;padding:6px;font-size:14px;line-height:20px}._labels_divjm_75{display:none}}._base_umzkr_1{max-width:100%}._ratingCsat5_umzkr_5,._feedbackCsat5_umzkr_6,._contactCsat5_umzkr_7,._successCsat5_umzkr_8{width:320px}@media (width<=399px){._ratingCsat5_umzkr_5,._feedbackCsat5_umzkr_6,._contactCsat5_umzkr_7,._successCsat5_umzkr_8{width:100%}}._ratingCsat2_umzkr_20,._feedbackCsat2_umzkr_21,._contactCsat2_umzkr_22,._successCsat2_umzkr_23{width:280px}@media (width<=399px){._ratingCsat2_umzkr_20,._feedbackCsat2_umzkr_21,._contactCsat2_umzkr_22,._successCsat2_umzkr_23{width:100%}}._ratingCes_umzkr_35{width:340px}@media (width<=599px){._ratingCes_umzkr_35{width:280px}}@media (width<=399px){._ratingCes_umzkr_35{width:100%}}._feedbackCes_umzkr_49,._contactCes_umzkr_50,._successCes_umzkr_51{width:280px}@media (width<=599px){._feedbackCes_umzkr_49,._contactCes_umzkr_50,._successCes_umzkr_51{width:100%}}._ratingNps_umzkr_62{width:520px}@media (width<=599px){._ratingNps_umzkr_62{width:320px}}@media (width<=399px){._ratingNps_umzkr_62{width:100%}}._feedbackNps_umzkr_76,._contactNps_umzkr_77,._successNps_umzkr_78{width:280px}@media (width<=599px){._feedbackNps_umzkr_76,._contactNps_umzkr_77,._successNps_umzkr_78{width:100%}}
+: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-error-text:var(--ft-color-error-text,32 95% 32%);--_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,20px);--_surface-padding-mobile:var(--ft-surface-padding-mobile,20px);--_surface-radius:var(--ft-surface-radius,8px);--_font-family:var(--ft-font-family,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);font-family:var(--_font-family)}input,textarea,select{font:inherit}._base_d5qlz_1{padding:var(--_surface-padding);background-color:hsl(var(--_color-bg)/100%);border-radius:var(--_surface-radius);box-shadow:0 0 10px hsl(var(--_color-shadow)/20%);display:block;position:relative;overflow:auto}@media (width<=399px){._base_d5qlz_1{padding:var(--_surface-padding-mobile)}}._base_1vr2h_1{--_popup-head-offset:32px;z-index:var(--_popup-z-index);box-sizing:border-box;max-width:calc(100vw - var(--_surface-padding) * 2);max-height:calc(100vh - var(--_surface-padding) * 2);transform-origin:50% 100%;margin:0;display:flex;position:fixed}@media (width<=399px){._base_1vr2h_1{max-width:calc(100vw - var(--_surface-padding-mobile) * 2);max-height:calc(100vh - var(--_surface-padding-mobile) * 2)}}._animated_1vr2h_19{opacity:0;animation:.12s ease-in-out forwards _fadeForward_1vr2h_1}@keyframes _fadeForward_1vr2h_1{0%{opacity:0;transform:translateY(8px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}._topLeft_1vr2h_34{top:var(--_surface-padding);left:var(--_surface-padding)}@media (width<=399px){._topLeft_1vr2h_34{top:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._topRight_1vr2h_45{top:var(--_surface-padding);right:var(--_surface-padding)}@media (width<=399px){._topRight_1vr2h_45{top:var(--_surface-padding-mobile);right:var(--_surface-padding-mobile)}}._bottomRight_1vr2h_56{right:var(--_surface-padding);bottom:var(--_surface-padding)}@media (width<=399px){._bottomRight_1vr2h_56{right:var(--_surface-padding-mobile);bottom:var(--_surface-padding-mobile)}}._bottomLeft_1vr2h_67{bottom:var(--_surface-padding);left:var(--_surface-padding)}@media (width<=399px){._bottomLeft_1vr2h_67{bottom:var(--_surface-padding-mobile);left:var(--_surface-padding-mobile)}}._close_1vr2h_78{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._close_1vr2h_78:disabled{cursor:default}._close_1vr2h_78{top:var(--_surface-padding);width:24px;height:24px;color:hsl(var(--_color-outline)/100%);transition:color .15s;position:absolute;inset-inline-end:var(--_surface-padding)}._close_1vr2h_78:hover{color:hsl(var(--_color-text)/100%)}._close_1vr2h_78:before,._close_1vr2h_78:after{content:"";background-color:currentColor;border-radius:1px;position:absolute;top:50%;left:50%;transform:rotate(45deg)}._close_1vr2h_78:before{width:16px;height:2px;margin:-1px 0 0 -8px}._close_1vr2h_78:after{width:2px;height:16px;margin:-8px 0 0 -1px}@media (width<=399px){._close_1vr2h_78{top:var(--_surface-padding-mobile);inset-inline-end:var(--_surface-padding-mobile)}}._sr_1t62n_1{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._subtext_1t62n_13{margin:0 0 16px;line-height:1.25}._input_1t62n_18{box-sizing:border-box;width:100%;color:hsl(var(--_color-text)/100%);background-color:hsl(var(--_color-bg)/100%);border:1px solid hsl(var(--_color-border)/100%);border-radius:var(--_surface-radius);outline:0 solid hsl(var(--_color-outline)/14%);padding:8px 12px;font-family:inherit;font-size:16px;line-height:1.5;transition:background-color .15s,border-color .15s,outline-width .2s}._input_1t62n_18:focus{outline:4px solid hsl(var(--_color-outline)/14%)}._input_1t62n_18._invalid_1t62n_35{border-color:hsl(var(--_color-error)/100%)}._input_1t62n_18._invalid_1t62n_35:focus{outline-color:hsl(var(--_color-error)/14%)}._actions_1t62n_42{gap:8px;margin-top:16px;display:flex}._submit_1t62n_48{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._submit_1t62n_48:disabled{cursor:default}._submit_1t62n_48{text-align:center;color:hsl(var(--_color-bg)/100%);background-color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);padding:8px 32px;font-size:14px;font-weight:400;transition:opacity .2s}._submit_1t62n_48:hover:not(:disabled){opacity:.85}._submit_1t62n_48:disabled{opacity:.6}._submit_1t62n_48{flex:1}._skip_1t62n_82{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._skip_1t62n_82:disabled{cursor:default}._skip_1t62n_82{background-color:hsl(var(--_color-control)/100%);transition:background-color .15s}._skip_1t62n_82:hover:not(:disabled){background-color:hsl(var(--_color-border)/50%)}._skip_1t62n_82:disabled{opacity:.6}._skip_1t62n_82{text-align:center;color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);flex:1;padding:8px 32px;font-size:14px;font-weight:500}._attachment_5p8tj_1{align-items:center;column-gap:8px;width:100%;display:flex}._attachmentPreview_5p8tj_8{flex:1;align-items:center;column-gap:8px;min-width:0;text-decoration:none;display:flex}._attachmentThumbnail_5p8tj_17{box-sizing:border-box;object-fit:cover;border:1px solid hsl(var(--_color-border)/100%);border-radius:4px;flex-shrink:0;width:32px;height:32px;display:block}._attachmentCaption_5p8tj_28{flex-direction:column;min-width:0;display:flex}._attachmentName_5p8tj_34,._attachmentSize_5p8tj_35{text-overflow:ellipsis;white-space:nowrap;line-height:1.15;display:block;overflow:hidden}._attachmentName_5p8tj_34{color:hsl(var(--_color-text)/100%);font-size:13px}._attachmentSize_5p8tj_35{color:hsl(var(--_color-muted)/100%);font-size:11px}._attachmentRemove_5p8tj_53{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._attachmentRemove_5p8tj_53:disabled{cursor:default}._attachmentRemove_5p8tj_53{background-color:hsl(var(--_color-control)/100%);transition:background-color .15s}._attachmentRemove_5p8tj_53:hover:not(:disabled){background-color:hsl(var(--_color-border)/50%)}._attachmentRemove_5p8tj_53:disabled{opacity:.6}._attachmentRemove_5p8tj_53{width:24px;height:24px;color:hsl(var(--_color-text)/100%);border-radius:50%;flex-shrink:0;position:relative}._attachmentRemove_5p8tj_53:before,._attachmentRemove_5p8tj_53:after{content:"";background-color:currentColor;border-radius:1px;position:absolute;top:50%;left:50%;transform:rotate(45deg)}._attachmentRemove_5p8tj_53:before{width:12px;height:1.5px;margin:-1px 0 0 -6px}._attachmentRemove_5p8tj_53:after{width:1.5px;height:12px;margin:-6px 0 0 -1px}._choices_iatib_1{margin:0 0 12px}._choice_iatib_1{display:flex}._choice_iatib_1+._choice_iatib_1{margin-top:12px}._label_iatib_12{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:flex-start;gap:8px;display:inline-flex;position:relative}._sr_iatib_21{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._checkbox_iatib_33{white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}._check_iatib_33{border:1px solid hsl(var(--_color-border)/100%);border-radius:4px;min-width:20px;height:20px}._label_iatib_12:hover ._check_iatib_33{border-color:hsl(var(--_color-text)/100%)}._checkbox_iatib_33:focus-visible+._check_iatib_33{outline:4px solid hsl(var(--_color-outline)/14%)}._checkbox_iatib_33:checked+._check_iatib_33{background-color:hsl(var(--_color-text)/100%);border-color:hsl(var(--_color-text)/100%);position:relative}._checkbox_iatib_33:checked+._check_iatib_33:after{content:"";border:2px solid;border-color:transparent transparent hsl(var(--_color-bg)/100%) hsl(var(--_color-bg)/100%);pointer-events:none;width:10px;height:4px;position:absolute;top:50%;left:50%;transform:translate(-45%,-75%)rotate(-45deg)}._fieldWrapper_iatib_74{display:flex;position:relative}._input_iatib_79{margin-top:8px;padding:8px 12px}._textarea_iatib_84{height:120px;padding:8px 12px 40px}._input_iatib_79,._textarea_iatib_84{box-sizing:border-box;width:100%;color:hsl(var(--_color-text)/100%);background-color:hsl(var(--_color-bg)/100%);border:1px solid hsl(var(--_color-border)/100%);border-radius:var(--_surface-radius);outline:0 solid hsl(var(--_color-outline)/14%);resize:none;font-family:inherit;font-size:16px;line-height:1.5;transition:background-color .15s,border-color .15s,outline-width .2s}._input_iatib_79:focus,._textarea_iatib_84:focus{outline:4px solid hsl(var(--_color-outline)/14%)}._input_iatib_79._invalid_iatib_108,._textarea_iatib_84._invalid_iatib_108{border-color:hsl(var(--_color-error)/100%)}._input_iatib_79._invalid_iatib_108:focus,._textarea_iatib_84._invalid_iatib_108:focus{outline-color:hsl(var(--_color-error)/14%)}._attachTriggers_iatib_117{gap:6px;display:flex;position:absolute;bottom:8px;right:8px}._attachTrigger_iatib_117{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._attachTrigger_iatib_117:disabled{cursor:default}._attachTrigger_iatib_117{background-color:hsl(var(--_color-control)/100%);transition:background-color .15s}._attachTrigger_iatib_117:hover:not(:disabled){background-color:hsl(var(--_color-border)/50%)}._attachTrigger_iatib_117:disabled{opacity:.6}._attachTrigger_iatib_117{box-sizing:border-box;width:28px;height:28px;color:hsl(var(--_color-muted)/100%);border-radius:var(--_surface-radius);justify-content:center;align-items:center;transition:color .15s,background-color .15s;display:flex}._attachTrigger_iatib_117:hover:not(:disabled){color:hsl(var(--_color-text)/100%)}._attachments_iatib_164{flex-direction:column;gap:12px;margin-top:12px;display:flex}._attachmentList_iatib_171{flex-direction:column;gap:8px;display:flex}._attachmentError_iatib_177{color:hsl(var(--_color-error-text)/100%);font-size:14px}._actions_iatib_182{gap:8px;margin-top:12px;display:flex}._submit_iatib_188{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._submit_iatib_188:disabled{cursor:default}._submit_iatib_188{text-align:center;color:hsl(var(--_color-bg)/100%);background-color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);padding:8px 32px;font-size:14px;font-weight:400;transition:opacity .2s}._submit_iatib_188:hover:not(:disabled){opacity:.85}._submit_iatib_188:disabled{opacity:.6}._submit_iatib_188{flex:1}._skip_iatib_222{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._skip_iatib_222:disabled{cursor:default}._skip_iatib_222{background-color:hsl(var(--_color-control)/100%);transition:background-color .15s}._skip_iatib_222:hover:not(:disabled){background-color:hsl(var(--_color-border)/50%)}._skip_iatib_222:disabled{opacity:.6}._skip_iatib_222{text-align:center;color:hsl(var(--_color-text)/100%);border-radius:var(--_surface-radius);flex:1;padding:8px 32px;font-size:14px;font-weight:500}._base_1ilpx_1{text-align:center;padding:0 24px}._icon_1ilpx_6{display:inline-block}._base_onxlf_1{color:hsl(var(--_color-text)/100%);padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif}._head_onxlf_7{padding-block:0 12px;padding-inline:0 var(--_popup-head-offset);gap:8px;display:flex}._title_onxlf_14{flex:1 0;font-family:inherit;font-size:16px;font-style:normal;font-weight:500;line-height:1.4}._base_nswpf_1{margin:12px 0 0;display:flex}._label_nswpf_6{box-sizing:border-box;max-width:50%;color:hsl(var(--_color-muted)/100%);flex:0 0 50%;font-size:14px;line-height:1.4286}._between_nswpf_15{justify-content:space-between}._between_nswpf_15 ._label_nswpf_6{flex:0 0 50%;max-width:50%}._between_nswpf_15 ._label_nswpf_6:first-child{text-align:start}._between_nswpf_15 ._label_nswpf_6:last-child{text-align:end}._center_nswpf_29 ._label_nswpf_6{flex:0 0 50%;max-width:50%}._center_nswpf_29 ._label_nswpf_6:first-child{text-align:end;padding-right:8px}._center_nswpf_29 ._label_nswpf_6:last-child{text-align:start;padding-left:8px}._center_nswpf_29 ._text_nswpf_41{text-align:center;min-width:56px;display:inline-block}@media (width<=599px){._center_nswpf_29 ._text_nswpf_41{min-width:48px}}._list_1vfe4_1{justify-content:space-between;display:flex}._icon_1vfe4_6{transition:transform .12s;transform:scale(1)}._button_1vfe4_11{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1vfe4_11:disabled{cursor:default}._button_1vfe4_11{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_1vfe4_11:hover ._icon_1vfe4_6{transform:scale(1.15)}._button_1vfe4_11:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}@media (width<=399px){._button_1vfe4_11{width:48px;height:48px}}._list_16sag_1{justify-content:space-between;display:flex}._button_16sag_6{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_16sag_6:disabled{cursor:default}._button_16sag_6{width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:flex}._button_16sag_6:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}._button_16sag_6:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._list_1kpxu_1{justify-content:space-between;display:flex}._icon_1kpxu_6{transition:transform .12s;transform:scale(1)}._button_1kpxu_11{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1kpxu_11:disabled{cursor:default}._button_1kpxu_11{justify-content:center;align-items:center;width:40px;height:40px;display:flex}._button_1kpxu_11:hover ._icon_1kpxu_6{transform:scale(1.1)}._button_1kpxu_11:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._list_grany_1{justify-content:center;gap:16px;display:flex}._icon_grany_7{transition:transform .12s;transform:scale(1)}._button_grany_12{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_grany_12:disabled{cursor:default}._button_grany_12{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_grany_12:hover ._icon_grany_7{transform:scale(1.15)}._button_grany_12:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}@media (width<=399px){._button_grany_12{width:48px;height:48px}}._list_1yzyr_1{justify-content:center;gap:16px;display:flex}._icon_1yzyr_7{transition:transform .12s;transform:scale(1)}._button_1yzyr_12{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_1yzyr_12:disabled{cursor:default}._button_1yzyr_12{background-color:hsl(var(--_color-control)/100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex}._button_1yzyr_12:hover ._icon_1yzyr_7{transform:scale(1.15)}._button_1yzyr_12:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._list_whbas_1{justify-content:space-between;gap:6px;display:flex}@media (width<=599px){._list_whbas_1{flex-direction:column-reverse;gap:4px}}._button_whbas_13{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_whbas_13:disabled{cursor:default}._button_whbas_13{text-align:center;width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:inline-block}._button_whbas_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media (width<=599px){._button_whbas_13:hover{box-shadow:none}}._button_whbas_13:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._button_whbas_13 ._score_whbas_52{display:inline}._button_whbas_13 ._label_whbas_55{display:none}@media (width<=599px){._button_whbas_13 ._label_whbas_55{display:inline}._button_whbas_13{border-radius:6px;width:100%;height:auto;padding:6px;font-size:14px;line-height:20px}._labels_whbas_75{display:none}}._list_divjm_1{justify-content:space-between;gap:6px;display:flex}@media (width<=599px){._list_divjm_1{flex-direction:column-reverse;gap:4px}}._button_divjm_13{appearance:none;text-align:center;box-shadow:none;cursor:pointer;background-color:#0000;border:none;margin:0;padding:0;font-family:inherit}._button_divjm_13:disabled{cursor:default}._button_divjm_13{text-align:center;width:40px;height:40px;color:hsl(var(--_color-muted)/100%);background-color:hsl(var(--_color-control)/100%);box-shadow:0 0 0 0 hsl(var(--_color-control)/100%);border-radius:50%;font-size:18px;font-weight:700;transition:color .12s,box-shadow .12s;display:block}._button_divjm_13:hover{color:hsl(var(--_color-text)/100%);box-shadow:0 0 0 2px hsl(var(--_color-control)/100%)}@media (width<=599px){._button_divjm_13:hover{box-shadow:none}}._button_divjm_13:focus-visible{outline:2px solid hsl(var(--_color-outline)/100%)}._button_divjm_13 ._score_divjm_52{display:inline}._button_divjm_13 ._label_divjm_55{display:none}@media (width<=599px){._button_divjm_13 ._label_divjm_55{display:inline}._button_divjm_13{border-radius:6px;width:100%;height:auto;padding:6px;font-size:14px;line-height:20px}._labels_divjm_75{display:none}}._base_171s9_1{max-width:100%}._ratingCsat5_171s9_5,._feedbackCsat5_171s9_6,._contactCsat5_171s9_7,._successCsat5_171s9_8{width:320px}@media (width<=399px){._ratingCsat5_171s9_5,._feedbackCsat5_171s9_6,._contactCsat5_171s9_7,._successCsat5_171s9_8{width:100%}}._ratingCsat2_171s9_20,._feedbackCsat2_171s9_21,._contactCsat2_171s9_22,._successCsat2_171s9_23{width:280px}@media (width<=399px){._ratingCsat2_171s9_20,._feedbackCsat2_171s9_21,._contactCsat2_171s9_22,._successCsat2_171s9_23{width:100%}}._ratingCes_171s9_35{width:340px}@media (width<=599px){._ratingCes_171s9_35{width:280px}}@media (width<=399px){._ratingCes_171s9_35{width:100%}}._feedbackCes_171s9_49,._contactCes_171s9_50,._successCes_171s9_51{width:280px}@media (width<=599px){._feedbackCes_171s9_49,._contactCes_171s9_50,._successCes_171s9_51{width:100%}}._ratingNps_171s9_62{width:520px}@media (width<=599px){._ratingNps_171s9_62{width:320px}}@media (width<=399px){._ratingNps_171s9_62{width:100%}}._feedbackNps_171s9_76,._contactNps_171s9_77,._successNps_171s9_78{width:280px}@media (width<=599px){._feedbackNps_171s9_76,._contactNps_171s9_77,._successNps_171s9_78{width:100%}}._feedbackGeneral_171s9_89,._contactGeneral_171s9_90,._successGeneral_171s9_91{width:280px}@media (width<=599px){._feedbackGeneral_171s9_89,._contactGeneral_171s9_90,._successGeneral_171s9_91{width:100%}}
 /*$vite$:1*/

package/dist/index.d.ts

@@ -47,6 +47,16 @@ export declare interface CsatSurveyProps5 extends SharedSurveyProps {
     scaleStyle: 'emoji' | 'numbers' | 'stars';
 }
 
+/** General feedback survey — no rating scale, collects text feedback and an optional screenshot */
+export declare interface GeneralSurveyProps extends Omit<SharedSurveyProps, 'question' | 'responseType'> {
+    /** Survey methodology */
+    type: 'general';
+    /** Unused — general surveys have no rating screen to show it on */
+    question?: string;
+    /** Type of feedback collection. The text feedback step is the whole survey, so it's never skippable. @default 'text' */
+    responseType?: 'text' | 'choices';
+}
+
 /** Net Promoter Score survey, rated on a fixed 0–10 scale */
 export declare interface NpsSurveyProps extends SharedSurveyProps {
     /** Survey methodology */
@@ -65,6 +75,8 @@ export declare interface PopupProps extends React.HTMLAttributes<HTMLDivElement>
         close?: string;
     };
     placement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft';
+    /** Close button label, used for both its aria-label and title. @default 'Close survey' */
+    closeLabel?: string;
     onClose?: () => void;
 }
 
@@ -121,12 +133,16 @@ export declare interface SharedSurveyProps {
     };
     /** Text direction for RTL/LTR support */
     dir?: 'ltr' | 'rtl' | 'auto';
+    /** Overrides for the library's own aria-labels and other screen-reader-only text. See `SurveyStrings`. */
+    strings?: SurveyStrings;
     /** Main survey question (screen 1) */
     question: string;
     /** Left label for the rating scale */
     minLabel?: string;
     /** Right label for the rating scale */
     maxLabel?: string;
+    /** Builds the visible text appended after the first/last numbered scale button when it carries `minLabel`/`maxLabel`. @default (label) => ` - ${label}` */
+    getScoreLabelSuffix?: (label: string) => string;
     /** Type of feedback collection */
     responseType?: null | 'text' | 'choices';
     /** Follow-up feedback question (screen 2) */
@@ -137,6 +153,16 @@ export declare interface SharedSurveyProps {
     textButtonSkipLabel?: string;
     /** Optional predefined choices for feedback */
     choiceOptions?: string[] | null;
+    /** Placeholder for the free-text input next to choice checkboxes. @default 'Other' */
+    otherPlaceholder?: string;
+    /** Label for the screenshot-attachment control */
+    screenshotButtonLabel?: string;
+    /** Shown to the respondent when `onCaptureScreenshot` fails. @default 'Failed to capture screenshot' */
+    screenshotErrorMessage?: string;
+    /** Maximum number of attachments a respondent may confirm, across every attachment source. @default 1 */
+    maxAttachments?: number;
+    /** Visible caption under an attachment thumbnail, also used as its image alt text. @default 'Screenshot' */
+    attachmentCaption?: string;
     /** Success message text */
     thankYouMessage: string;
     /** Enables an optional email collection step before the success screen. Skipped when `userId` is already provided */
@@ -155,6 +181,8 @@ export declare interface SharedSurveyProps {
     onScoreSubmit?: SurveyCallback;
     /** Callback when survey data is submitted */
     onFeedbackSubmit?: SurveyCallback;
+    /** Enables an optional screenshot-attachment control on the feedback step. Hidden unless provided — bring your own capture function, see README */
+    onCaptureScreenshot?: () => string | Blob | Promise<string | Blob>;
     /** Callback when contact is submitted */
     onContactSubmit?: ContactCallback;
 }
@@ -165,6 +193,22 @@ export declare type SurfaceProps = React.HTMLAttributes<HTMLDivElement>;
 
 export declare const Survey: default_2.FC<SurveyProps>;
 
+/**
+ * A single attachment confirmed by the respondent
+ */
+export declare interface SurveyAttachment {
+    /** Discriminates the source that produced this attachment (not its content type — use `mimeType` for that) */
+    kind: 'screenshot';
+    /** Raw attachment data, as returned by the source */
+    data: string | Blob;
+    /** Original filename, when known (e.g. from a native `File`) */
+    name?: string;
+    /** MIME type, when known and not already carried by a `File`'s own `.type` */
+    mimeType?: string;
+    /** Size in bytes, when known (unavailable when `data` is an already-hosted URL string) */
+    size?: number;
+}
+
 /**
  * Callback function for survey submission
  * @param payload - The survey data to submit
@@ -172,7 +216,7 @@ export declare const Survey: default_2.FC<SurveyProps>;
  */
 export declare type SurveyCallback = (payload: SurveySubmitPayload) => void | Promise<void>;
 
-export declare type SurveyProps = CsatSurveyProps5 | CsatSurveyProps2 | CesSurveyProps | NpsSurveyProps;
+export declare type SurveyProps = CsatSurveyProps5 | CsatSurveyProps2 | CesSurveyProps | NpsSurveyProps | GeneralSurveyProps;
 
 /**
  * Available screens in survey flow
@@ -187,6 +231,35 @@ export declare type SurveyScreen =
 /** Final "thanks" message screen */
 | 'success';
 
+/**
+ * Overrides for the library's own aria-labels and other screen-reader-only text. Never visible
+ * UI copy — that's `question`, `thankYouMessage`, `otherPlaceholder`, `attachmentCaption`, etc.,
+ * always authored by you alongside the rest of the survey content, sitting directly on
+ * `SharedSurveyProps`. Every key here is announced to assistive tech only, useful to override
+ * e.g. when localizing a survey for a non-English audience. Each key merges over its English
+ * default; omit a key to keep that default.
+ */
+export declare interface SurveyStrings {
+    /** aria-label for the feedback step's form/region. @default 'Feedback form' */
+    feedbackFormLabel?: string;
+    /** Label for the free-text input shown alongside choice checkboxes. @default 'Additional feedback' */
+    additionalFeedbackLabel?: string;
+    /** Label for the open-ended feedback textarea shown when there are no predefined choices. @default 'Your feedback' */
+    yourFeedbackLabel?: string;
+    /** aria-label for the contact step's form/region. @default 'Contact form' */
+    contactFormLabel?: string;
+    /** Label for the email input on the contact collection screen. @default 'Email address' */
+    emailLabel?: string;
+    /** aria-label for opening an attachment thumbnail in a new tab. @default 'Open screenshot in a new tab' */
+    attachmentOpenLabel?: string;
+    /** aria-label/title for removing an attachment. @default 'Remove screenshot' */
+    attachmentRemoveLabel?: string;
+    /** Builds the aria-label for a numbered scale button. @default (score) => `Score ${score}` */
+    getScoreLabel?: (score: number) => string;
+    /** Builds the aria-label for a star rating button. @default (score) => `${score} ${score > 1 ? 'stars' : 'star'}` */
+    getStarsLabel?: (score: number) => string;
+}
+
 /**
  * Payload sent when submitting survey data
  */
@@ -195,6 +268,8 @@ export declare interface SurveySubmitPayload {
     value?: number;
     /** Optional text or array of selected choices */
     text?: string | string[];
+    /** Attachments (e.g. a screenshot) confirmed by the respondent */
+    attachments?: SurveyAttachment[];
 }
 
 export { }