@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-UWFLYMAR.js → chunk-D34LNBO5.js}

@@ -1,16 +1,19 @@
-import { Slider } from './chunk-H6NIOQHK.js';
-import { Textarea } from './chunk-BTTFCMKG.js';
-import { Picker } from './chunk-NKB7BZYK.js';
-import { Progress } from './chunk-2ZZ7TDJ4.js';
-import { Sheet } from './chunk-ZVFE5QGU.js';
-import { Chip } from './chunk-AI4DWZCD.js';
-import { Input } from './chunk-ITTYJZWX.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Slider } from './chunk-A7SWYDE5.js';
+import { storageKey, readStored, writeStored } from './chunk-NNCOFLNE.js';
+import { Textarea } from './chunk-RIK6UX2K.js';
+import { Progress } from './chunk-L2WMOA2V.js';
+import { Chip } from './chunk-7NGMUVNU.js';
+import { Picker } from './chunk-MCOZJWPU.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Input } from './chunk-KXLDK6HB.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React2 from 'react';
-import { View, Text, Pressable } from 'react-native';
+import { View, Text, Pressable, Image, Animated, Platform, findNodeHandle, AccessibilityInfo, BackHandler } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { PMF_OPTIONS, scaleShape, resolveQuestion, resolveText, resolveHiddenFields, surveyPages, nextPageIndex, visibleQuestions, visiblePages, pickSurveyEnding, surveyCompletion, isQuestionRequired, isAnswerEmpty, prevPageIndex, npsBand, validatePage, branchedEndingId } from '@btndprojects/loam-engage';
+import { PMF_OPTIONS, scaleShape, resolveQuestion, resolveText, resolveHiddenFields, surveyPages, nextPageIndex, visibleQuestions, visiblePages, pickSurveyEnding, surveyCompletion, isQuestionRequired, isAnswerEmpty, prevPageIndex, validatePage, branchedEndingId } from '@btndprojects/loam-engage';
 export { PMF_OPTIONS, SURVEY_OPERATORS, cesScore, csatScore, isAnswerEmpty, isPageVisible, matchSurveyCondition, nextPageIndex, npsBand, npsScore, prevPageIndex, scaleShape, surveyPages, surveyProgress, validatePage, visiblePages, visibleQuestions } from '@btndprojects/loam-engage';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -27,7 +30,27 @@ var SURVEY_FIELD_LABELS = {
   rankHint: "Most important at the top",
   moveUp: "Move up",
   moveDown: "Move down",
-  choosePlaceholder: "Choose one"
+  choosePlaceholder: "Choose one",
+  emailPlaceholder: "you@company.com",
+  datePlaceholder: "YYYY-MM-DD",
+  chooseFile: "Choose a file",
+  noFile: "No file chosen",
+  score: (value, top, ends) => `Score ${value} of ${top}${ends.map((end) => ` \u2014 ${end}`).join("")}`,
+  matrixScore: (row, value, points) => `${row}: ${value} of ${points}`,
+  selectedOfCap: (picked, cap) => `${picked} of up to ${cap} selected`,
+  answeredOf: (done, total) => `${done} / ${total} answered`
+};
+var SURVEY_LABELS = {
+  ...SURVEY_FIELD_LABELS,
+  back: "Back",
+  next: "Continue",
+  submit: "Send",
+  skip: "Skip",
+  close: "Close",
+  dismiss: "Dismiss survey",
+  doneTitle: "Thank you \u2014 logged.",
+  progress: (title, position, total) => `${title} \u2014 page ${position} of ${total}`,
+  validation: {}
 };
 var SURVEY_OTHER_PREFIX = "Other: ";
 function SurveyField({
@@ -35,37 +58,53 @@ function SurveyField({
   error,
   foot,
   labels: labelOverrides,
+  disabled = false,
   children
 }) {
   const { styles } = useStyles(sheet);
-  const labels = { ...SURVEY_FIELD_LABELS, ...labelOverrides };
+  const theme = useLoamTheme("survey");
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   return (
     // No accessible name on the wrapper: the question text is a visible label
     // and every control below carries its own, so naming the group as well
     // makes the same sentence arrive twice.
-    /* @__PURE__ */ jsxs(View, { style: styles.field, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.labelRow, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.label, children: question.text }),
-        question.required ? /* @__PURE__ */ jsx(Text, { style: styles.requiredTag, children: labels.required }) : null
-      ] }),
-      question.help ? /* @__PURE__ */ jsx(Text, { style: styles.help, children: question.help }) : null,
-      children,
-      foot ? /* @__PURE__ */ jsx(View, { style: styles.foot, children: foot }) : null,
-      error ? /* @__PURE__ */ jsx(SurveyFieldError, { children: error }) : null
-    ] })
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [styles.field, disabled ? { opacity: theme.state.disabledOpacity } : null],
+        "aria-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.labelRow, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.label, children: question.text }),
+            question.required ? /* @__PURE__ */ jsx(Text, { style: styles.requiredTag, children: labels.required }) : null
+          ] }),
+          question.help ? /* @__PURE__ */ jsx(Text, { style: styles.help, children: question.help }) : null,
+          children,
+          foot ? /* @__PURE__ */ jsx(View, { style: styles.foot, children: foot }) : null,
+          error ? /* @__PURE__ */ jsx(SurveyFieldError, { children: error }) : null
+        ]
+      }
+    )
   );
 }
 function SurveyFieldError({ children }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
   return /* @__PURE__ */ jsxs(View, { accessibilityLiveRegion: "polite", style: styles.errorRow, children: [
     /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.xs, color: theme.color.danger }),
     /* @__PURE__ */ jsx(Text, { style: styles.errorText, children })
   ] });
 }
-function SurveyScale({ question, value, onChange }) {
-  const theme = useLoamTheme();
+function SurveyScale({
+  question,
+  value,
+  onChange,
+  labels: labelOverrides,
+  disabled = false
+}) {
+  const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   const { count, from } = scaleShape(question);
   const top = from + count - 1;
   return /* @__PURE__ */ jsxs(View, { style: styles.stackSm, children: [
@@ -73,21 +112,23 @@ function SurveyScale({ question, value, onChange }) {
       const v = from + i;
       const on = value === v;
       const ends = [
-        v === from && question.low ? ` \u2014 ${question.low}` : "",
-        v === top && question.high ? ` \u2014 ${question.high}` : ""
-      ].join("");
+        v === from && question.low ? question.low : "",
+        v === top && question.high ? question.high : ""
+      ].filter(Boolean);
       return /* @__PURE__ */ jsx(
         Pressable,
         {
           accessibilityRole: "radio",
-          accessibilityState: { checked: on },
+          accessibilityState: { checked: on, disabled },
+          disabled,
           "aria-checked": on,
-          accessibilityLabel: `Score ${v} of ${top}${ends}`,
+          accessibilityLabel: labels.score(v, top, ends),
           onPress: () => onChange(v, true),
           style: ({ pressed }) => [
             styles.scaleCell,
             on ? styles.scaleCellOn : null,
-            pressed && !on ? { backgroundColor: theme.state.pressed } : null
+            pressed && !on ? { backgroundColor: theme.state.pressed } : null,
+            disabled ? { opacity: theme.state.disabledOpacity } : null
           ],
           children: /* @__PURE__ */ jsx(Text, { style: [styles.scaleNumber, on ? styles.scaleNumberOn : null], children: v })
         },
@@ -107,7 +148,7 @@ function SurveyOptionRow({
   role = "radio",
   disabled = false
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
   return /* @__PURE__ */ jsxs(
     Pressable,
@@ -124,8 +165,18 @@ function SurveyOptionRow({
         pressed && !checked ? { backgroundColor: theme.state.pressed } : null
       ],
       children: [
-        /* @__PURE__ */ jsx(View, { style: [styles.mark, role === "checkbox" ? styles.markSquare : null, checked ? styles.markOn : null], children: checked ? role === "checkbox" ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.accentInk }) : /* @__PURE__ */ jsx(View, { style: styles.markDot }) : null }),
-        /* @__PURE__ */ jsx(Text, { style: [styles.optionLabel, checked ? styles.optionLabelOn : null], children: label })
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.mark,
+              role === "checkbox" ? styles.markSquare : null,
+              checked ? styles.markOn : null
+            ],
+            children: checked ? role === "checkbox" ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.accentInk }) : /* @__PURE__ */ jsx(View, { style: styles.markDot }) : null
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: styles.optionLabel, children: label })
       ]
     }
   );
@@ -134,10 +185,12 @@ function SurveyOptions({
   question,
   value,
   onChange,
-  labels: labelOverrides
+  labels: labelOverrides,
+  fieldSurface,
+  disabled = false
 }) {
   const { styles } = useStyles(sheet);
-  const labels = { ...SURVEY_FIELD_LABELS, ...labelOverrides };
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   const options = question.options ?? (question.type === "pmf" ? PMF_RESOLVED : []);
   const raw = typeof value === "string" ? value : void 0;
   const isOther = Boolean(question.other && raw?.startsWith(SURVEY_OTHER_PREFIX));
@@ -147,6 +200,7 @@ function SurveyOptions({
       {
         label: o.label,
         checked: raw === o.value,
+        disabled,
         onPress: () => onChange(o.value, true)
       },
       o.value
@@ -156,6 +210,7 @@ function SurveyOptions({
       {
         label: labels.other,
         checked: isOther,
+        disabled,
         onPress: () => onChange(SURVEY_OTHER_PREFIX)
       }
     ) : null,
@@ -163,7 +218,9 @@ function SurveyOptions({
       Input,
       {
         size: "lg",
+        surface: fieldSurface,
         autoFocus: true,
+        editable: !disabled,
         placeholder: labels.otherPlaceholder,
         accessibilityLabel: `${question.text} \u2014 ${labels.other}`,
         value: (raw ?? SURVEY_OTHER_PREFIX).slice(SURVEY_OTHER_PREFIX.length),
@@ -172,14 +229,94 @@ function SurveyOptions({
     ) : null
   ] });
 }
-function SurveyCheckboxList({ question, value, onChange }) {
-  const theme = useLoamTheme();
+function SurveyImageChoice({
+  question,
+  value,
+  onChange,
+  disabled = false
+}) {
+  const { styles } = useStyles(sheet);
+  const raw = typeof value === "string" ? value : void 0;
+  return /* @__PURE__ */ jsx(View, { style: styles.imageGrid, accessibilityRole: "radiogroup", children: (question.options ?? []).map((o) => {
+    const on = raw === o.value;
+    return /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "radio",
+        accessibilityState: { checked: on, disabled },
+        "aria-checked": on,
+        accessibilityLabel: o.label,
+        disabled,
+        onPress: () => onChange(o.value, true),
+        style: [styles.imageCard, on ? styles.optionRowOn : null],
+        children: [
+          o.image ? /* @__PURE__ */ jsx(Image, { source: { uri: o.image }, accessibilityIgnoresInvertColors: true, style: styles.imageThumb }) : /* @__PURE__ */ jsx(View, { style: [styles.imageThumb, styles.imageThumbEmpty], children: /* @__PURE__ */ jsx(Text, { style: styles.imageThumbText, children: "Image" }) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.optionLabel, children: o.label })
+        ]
+      },
+      o.value
+    );
+  }) });
+}
+function SurveyDate({
+  question,
+  value,
+  onChange,
+  error,
+  fieldSurface,
+  labels: labelOverrides,
+  disabled = false
+}) {
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      size: "lg",
+      surface: fieldSurface,
+      accessibilityLabel: question.text,
+      keyboardType: "numbers-and-punctuation",
+      placeholder: question.placeholder ?? labels.datePlaceholder,
+      error: Boolean(error),
+      editable: !disabled,
+      value: value == null ? "" : String(value),
+      onChangeText: (next) => onChange(next.replace(/[^\d-]/g, "").slice(0, 10))
+    }
+  );
+}
+function SurveyFile({
+  value,
+  onPickFile,
+  labels: labelOverrides,
+  disabled = false
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
+  const name = typeof value === "string" && value ? value : void 0;
+  return /* @__PURE__ */ jsxs(View, { style: styles.fileRow, children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", leadingIcon: "upload", disabled, onPress: onPickFile, children: labels.chooseFile }),
+    /* @__PURE__ */ jsx(Text, { style: styles.metaText, numberOfLines: 1, children: name ?? labels.noFile })
+  ] });
+}
+function SurveyStatement({ question }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(View, { style: styles.statement, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.statementTitle, children: question.text }),
+    question.help ? /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: question.help }) : null
+  ] });
+}
+function SurveyCheckboxList({
+  question,
+  value,
+  onChange,
+  disabled = false
+}) {
+  const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
   const picked = Array.isArray(value) ? [...value] : [];
   const atCap = question.maxSelections != null && picked.length >= question.maxSelections;
   return /* @__PURE__ */ jsx(View, { style: styles.stackSm, children: (question.options ?? []).map((o) => {
     const on = picked.includes(o.value);
-    const blocked = atCap && !on;
+    const blocked = disabled || atCap && !on;
     return /* @__PURE__ */ jsx(
       View,
       {
@@ -200,7 +337,12 @@ function SurveyCheckboxList({ question, value, onChange }) {
     );
   }) });
 }
-function SurveyChips({ question, value, onChange }) {
+function SurveyChips({
+  question,
+  value,
+  onChange,
+  disabled = false
+}) {
   const { styles } = useStyles(sheet);
   const picked = Array.isArray(value) ? [...value] : [];
   const atCap = question.maxSelections != null && picked.length >= question.maxSelections;
@@ -213,7 +355,7 @@ function SurveyChips({ question, value, onChange }) {
         size: "md",
         selectable: true,
         selected: on,
-        disabled: !on && atCap,
+        disabled: disabled || !on && atCap,
         onSelectedChange: () => onChange(on ? picked.filter((p) => p !== o.value) : [...picked, o.value]),
         children: o.label
       },
@@ -225,10 +367,11 @@ function SurveyRank({
   question,
   value,
   onChange,
-  labels: labelOverrides
+  labels: labelOverrides,
+  disabled = false
 }) {
   const { styles } = useStyles(sheet);
-  const labels = { ...SURVEY_FIELD_LABELS, ...labelOverrides };
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   const declared = question.items ?? [];
   const labelOf = (v) => declared.find((x) => x.value === v)?.label ?? v;
   const items = Array.isArray(value) ? [...value] : declared.map((x) => x.value);
@@ -252,7 +395,7 @@ function SurveyRank({
         variant: "outline",
         leadingIcon: "chevron-up",
         accessibilityLabel: `${labels.moveUp}: ${labelOf(item)}`,
-        disabled: i === 0,
+        disabled: disabled || i === 0,
         onPress: () => move(i, -1)
       }
     ),
@@ -263,48 +406,71 @@ function SurveyRank({
         variant: "outline",
         leadingIcon: "chevron-down",
         accessibilityLabel: `${labels.moveDown}: ${labelOf(item)}`,
-        disabled: i === items.length - 1,
+        disabled: disabled || i === items.length - 1,
         onPress: () => move(i, 1)
       }
     )
   ] }, item)) });
 }
-function SurveyMatrix({ question, value, onChange }) {
-  const theme = useLoamTheme();
+function SurveyMatrix({
+  question,
+  value,
+  onChange,
+  labels: labelOverrides,
+  disabled = false
+}) {
+  const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   const rows = question.rows ?? [];
   const points = question.points ?? 5;
   const current = value ?? {};
   return /* @__PURE__ */ jsx(View, { style: styles.stackMd, children: rows.map((row) => /* @__PURE__ */ jsxs(View, { style: styles.matrixCard, children: [
     /* @__PURE__ */ jsx(Text, { style: styles.matrixStatement, children: row.label }),
-    /* @__PURE__ */ jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: row.label, style: styles.matrixRow, children: Array.from({ length: points }, (_, i) => i + 1).map((v) => {
-      const on = current[row.value] === v;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "radio",
-          accessibilityState: { checked: on },
-          "aria-checked": on,
-          accessibilityLabel: `${row.label}: ${v} of ${points}`,
-          onPress: () => onChange({ ...current, [row.value]: v }),
-          style: ({ pressed }) => [
-            styles.matrixCell,
-            on ? styles.matrixCellOn : null,
-            pressed && !on ? { backgroundColor: theme.state.pressed } : null
-          ],
-          children: /* @__PURE__ */ jsx(Text, { style: [styles.matrixNumber, on ? styles.scaleNumberOn : null], children: v })
-        },
-        v
-      );
-    }) }),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityRole: "radiogroup",
+        accessibilityLabel: row.label,
+        style: styles.matrixRow,
+        children: Array.from({ length: points }, (_, i) => i + 1).map((v) => {
+          const on = current[row.value] === v;
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "radio",
+              accessibilityState: { checked: on, disabled },
+              "aria-checked": on,
+              disabled,
+              accessibilityLabel: labels.matrixScore(row.label, v, points),
+              onPress: () => onChange({ ...current, [row.value]: v }),
+              style: ({ pressed }) => [
+                styles.matrixScore,
+                on ? styles.matrixScoreOn : null,
+                pressed && !on ? { backgroundColor: theme.state.pressed } : null,
+                disabled ? { opacity: theme.state.disabledOpacity } : null
+              ],
+              children: /* @__PURE__ */ jsx(Text, { style: [styles.matrixNumber, on ? styles.scaleNumberOn : null], children: v })
+            },
+            v
+          );
+        })
+      }
+    ),
     /* @__PURE__ */ jsxs(View, { style: styles.endsRow, children: [
       /* @__PURE__ */ jsx(Text, { style: styles.endLabel, children: question.low }),
       /* @__PURE__ */ jsx(Text, { style: styles.endLabel, children: question.high })
     ] })
   ] }, row.value)) });
 }
-function SurveyConsent({ question, value, onChange, error }) {
-  const theme = useLoamTheme();
+function SurveyConsent({
+  question,
+  value,
+  onChange,
+  error,
+  disabled = false
+}) {
+  const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
   const on = value === true;
   return /* @__PURE__ */ jsxs(View, { style: styles.stackSm, children: [
@@ -312,21 +478,31 @@ function SurveyConsent({ question, value, onChange, error }) {
       Pressable,
       {
         accessibilityRole: "checkbox",
-        accessibilityState: { checked: on },
+        accessibilityState: { checked: on, disabled },
         "aria-checked": on,
         accessibilityLabel: question.text,
+        disabled,
         onPress: () => onChange(!on),
-        style: [styles.consentCard, on ? styles.consentCardOn : null],
+        style: [
+          styles.consentCard,
+          on ? styles.consentCardOn : null,
+          disabled ? { opacity: theme.state.disabledOpacity } : null
+        ],
         children: [
           /* @__PURE__ */ jsx(View, { style: [styles.mark, styles.markSquare, on ? styles.markOn : null], children: on ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.accentInk }) : null }),
-          /* @__PURE__ */ jsx(Text, { style: [styles.consentText, on ? styles.optionLabelOn : null], children: question.text })
+          /* @__PURE__ */ jsx(Text, { style: styles.consentText, children: question.text })
         ]
       }
     ),
     error ? /* @__PURE__ */ jsx(SurveyFieldError, { children: error }) : null
   ] });
 }
-function SurveySlider({ question, value, onChange }) {
+function SurveySlider({
+  question,
+  value,
+  onChange,
+  disabled = false
+}) {
   const { styles } = useStyles(sheet);
   const min = question.min ?? 0;
   const max = question.max ?? 100;
@@ -344,7 +520,8 @@ function SurveySlider({ question, value, onChange }) {
         step: question.step ?? 1,
         value: v,
         onValueChange: (next) => onChange(next),
-        accessibilityLabel: question.text
+        accessibilityLabel: question.text,
+        disabled
       }
     ),
     /* @__PURE__ */ jsxs(View, { style: styles.endsRow, children: [
@@ -357,50 +534,83 @@ function SurveyBoolean({
   question,
   value,
   onChange,
-  labels: labelOverrides
+  labels: labelOverrides,
+  disabled = false
 }) {
   const { styles } = useStyles(sheet);
-  const labels = { ...SURVEY_FIELD_LABELS, ...labelOverrides };
-  return /* @__PURE__ */ jsx(View, { style: styles.booleanRow, accessibilityRole: "radiogroup", accessibilityLabel: question.text, children: [[labels.yes, true], [labels.no, false]].map(([label, val]) => /* @__PURE__ */ jsx(View, { style: styles.grow, children: /* @__PURE__ */ jsx(
-    Button,
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
+  return /* @__PURE__ */ jsx(
+    View,
     {
-      size: "lg",
-      fullWidth: true,
-      variant: value === val ? "primary" : "outline",
-      accessibilityLabel: label,
-      onPress: () => onChange(val, true),
-      children: label
+      style: styles.booleanRow,
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: question.text,
+      children: [
+        [labels.yes, true],
+        [labels.no, false]
+      ].map(([label, val]) => /* @__PURE__ */ jsx(View, { style: styles.grow, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "lg",
+          fullWidth: true,
+          variant: value === val ? "primary" : "outline",
+          accessibilityLabel: label,
+          disabled,
+          onPress: () => onChange(val, true),
+          children: label
+        }
+      ) }, label))
     }
-  ) }, label)) });
+  );
 }
-function SurveyOpenText({ question, value, onChange, error }) {
+function SurveyOpenText({
+  question,
+  value,
+  onChange,
+  error,
+  fieldSurface,
+  disabled = false
+}) {
   const text = typeof value === "string" ? value : "";
   return /* @__PURE__ */ jsx(
     Textarea,
     {
       accessibilityLabel: question.text,
+      surface: fieldSurface,
       placeholder: question.placeholder,
       maxLength: question.maxLength ?? 400,
       minRows: 3,
       error: Boolean(error),
+      disabled,
       value: text,
       onChangeText: (t) => onChange(t)
     }
   );
 }
-function SurveyTextInput({ question, value, onChange, error }) {
+function SurveyTextInput({
+  question,
+  value,
+  onChange,
+  error,
+  fieldSurface,
+  labels: labelOverrides,
+  disabled = false
+}) {
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   const t = question.type;
   const text = value == null ? "" : String(value);
   return /* @__PURE__ */ jsx(
     Input,
     {
       size: "lg",
+      surface: fieldSurface,
       accessibilityLabel: question.text,
       keyboardType: t === "number" ? "number-pad" : t === "email" ? "email-address" : "default",
       autoCapitalize: t === "email" ? "none" : "sentences",
       autoComplete: t === "email" ? "email" : void 0,
-      placeholder: question.placeholder ?? (t === "email" ? "you@company.com" : void 0),
+      placeholder: question.placeholder ?? (t === "email" ? labels.emailPlaceholder : void 0),
       error: Boolean(error),
+      editable: !disabled,
       value: text,
       onChangeText: (next) => onChange(t === "number" ? next.replace(/[^\d.-]/g, "") : next)
     }
@@ -410,9 +620,11 @@ function SurveyDropdown({
   question,
   value,
   onChange,
-  labels: labelOverrides
+  fieldSurface,
+  labels: labelOverrides,
+  disabled = false
 }) {
-  const labels = { ...SURVEY_FIELD_LABELS, ...labelOverrides };
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   return /* @__PURE__ */ jsx(
     Picker,
     {
@@ -422,6 +634,8 @@ function SurveyDropdown({
       placeholder: question.placeholder ?? labels.choosePlaceholder,
       title: question.text,
       size: "lg",
+      surface: fieldSurface,
+      disabled,
       accessibilityLabel: question.text
     }
   );
@@ -440,14 +654,24 @@ function SurveyQuestionField({
   const props = { ...control, question };
   const { value, error, labels } = props;
   const t = question.type;
-  const merged = { ...SURVEY_FIELD_LABELS, ...labels };
+  const merged = useLabels("survey", SURVEY_LABELS, labels);
   if (t === "consent") return /* @__PURE__ */ jsx(SurveyConsent, { ...props });
+  if (t === "statement") return /* @__PURE__ */ jsx(SurveyStatement, { ...props });
+  if (t === "image-choice") {
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyImageChoice, { ...props }) });
+  }
+  if (t === "date") {
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyDate, { ...props }) });
+  }
+  if (t === "file") {
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyFile, { ...props }) });
+  }
   const foot = (node) => node;
   if (t === "nps" || t === "csat" || t === "ces" || t === "scale") {
-    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveyScale, { ...props }) });
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyScale, { ...props }) });
   }
   if (t === "choice" || t === "pmf") {
-    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveyOptions, { ...props }) });
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyOptions, { ...props }) });
   }
   if (t === "multi" || t === "chips") {
     const picked = Array.isArray(value) ? value : [];
@@ -458,21 +682,22 @@ function SurveyQuestionField({
         question,
         error,
         labels,
+        disabled: props.disabled,
         foot: foot(
-          cap ? /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: t === "multi" ? `${picked.length} of up to ${cap} selected` : `${picked.length} / ${cap}` }) : null
+          cap ? /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: t === "multi" ? merged.selectedOfCap(picked.length, cap) : `${picked.length} / ${cap}` }) : null
         ),
         children: t === "multi" ? /* @__PURE__ */ jsx(SurveyCheckboxList, { ...props }) : /* @__PURE__ */ jsx(SurveyChips, { ...props })
       }
     );
   }
   if (t === "dropdown") {
-    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveyDropdown, { ...props }) });
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyDropdown, { ...props }) });
   }
   if (t === "boolean") {
-    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveyBoolean, { ...props }) });
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveyBoolean, { ...props }) });
   }
   if (t === "slider") {
-    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveySlider, { ...props }) });
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, disabled: props.disabled, children: /* @__PURE__ */ jsx(SurveySlider, { ...props }) });
   }
   if (t === "rank") {
     return /* @__PURE__ */ jsx(
@@ -481,6 +706,7 @@ function SurveyQuestionField({
         question,
         error,
         labels,
+        disabled: props.disabled,
         foot: /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: merged.rankHint }),
         children: /* @__PURE__ */ jsx(SurveyRank, { ...props })
       }
@@ -494,12 +720,8 @@ function SurveyQuestionField({
         question,
         error,
         labels,
-        foot: /* @__PURE__ */ jsxs(Text, { style: styles.metaText, children: [
-          Object.keys(current).length,
-          " / ",
-          (question.rows ?? []).length,
-          " answered"
-        ] }),
+        disabled: props.disabled,
+        foot: /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: merged.answeredOf(Object.keys(current).length, (question.rows ?? []).length) }),
         children: /* @__PURE__ */ jsx(SurveyMatrix, { ...props })
       }
     );
@@ -513,6 +735,7 @@ function SurveyQuestionField({
         question,
         error,
         labels,
+        disabled: props.disabled,
         foot: /* @__PURE__ */ jsxs(Text, { style: styles.metaText, children: [
           text.length,
           " / ",
@@ -528,33 +751,33 @@ function SurveyQuestionField({
       question,
       error,
       labels,
+      disabled: props.disabled,
       foot: question.suffix ? /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: question.suffix }) : null,
       children: /* @__PURE__ */ jsx(SurveyTextInput, { ...props })
     }
   );
 }
 var sheet = createStyleSheet((theme) => ({
-  field: { gap: theme.space[9] },
+  // Final 09 rhythm: help 4 below the question, the control 8 below.
+  field: { gap: theme.space[8] },
   labelRow: { flexDirection: "row", alignItems: "baseline", gap: theme.space[8] },
   label: {
     flexShrink: 1,
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.callout.fontSize,
-    lineHeight: theme.type.callout.lineHeight,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[16],
+    lineHeight: theme.fontSize[16] * 1.3,
     color: theme.color.text
   },
   requiredTag: {
+    ...theme.type.overline,
     fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    letterSpacing: theme.tracking.caps,
-    textTransform: "uppercase",
     color: theme.color.text3
   },
   help: {
     fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12] * 1.4,
     color: theme.color.text3,
     marginTop: -theme.space[4]
   },
@@ -567,12 +790,41 @@ var sheet = createStyleSheet((theme) => ({
   errorRow: { flexDirection: "row", alignItems: "center", gap: theme.space[7] },
   errorText: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.footnote.fontSize,
-    color: theme.color.danger
+    fontSize: theme.fontSize[13],
+    color: theme.color.dangerOnSoft
   },
   stackXs: { gap: theme.space[6] },
   stackSm: { gap: theme.space[7] },
+  imageGrid: { flexDirection: "row", flexWrap: "wrap", gap: theme.space[8] },
+  imageCard: {
+    flexGrow: 1,
+    flexBasis: "45%",
+    gap: theme.space[8],
+    padding: theme.space[8],
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface2
+  },
+  imageThumb: {
+    height: theme.space[80],
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.color.surface3
+  },
+  imageThumbEmpty: { alignItems: "center", justifyContent: "center" },
+  imageThumbText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
+  },
+  fileRow: { flexDirection: "row", alignItems: "center", gap: theme.space[12] },
+  statement: { gap: theme.space[4] },
+  statementTitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    lineHeight: theme.fontSize[16] * 1.4,
+    color: theme.color.text
+  },
   stackMd: { gap: theme.space[12] },
   grow: { flex: 1 },
   scaleRow: { flexDirection: "row", gap: theme.space[4] },
@@ -605,17 +857,18 @@ var sheet = createStyleSheet((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space[11],
-    minHeight: theme.tapMin + theme.space[4],
+    minHeight: theme.space[48],
     paddingHorizontal: theme.space[13],
     paddingVertical: theme.space[8],
     borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.thin,
+    borderWidth: theme.borderWidth.thick,
     borderColor: theme.color.borderStrong,
     backgroundColor: theme.color.surface2
   },
+  // Chosen: state-selected under a 1.5 accent edge; ink and weight kept (R7).
   optionRowOn: {
-    borderColor: theme.edge.accent,
-    backgroundColor: theme.color.accentSoft
+    borderColor: theme.focus.ringColor,
+    backgroundColor: theme.state.selected
   },
   optionLabel: {
     flex: 1,
@@ -623,7 +876,6 @@ var sheet = createStyleSheet((theme) => ({
     fontSize: theme.type.subheadline.fontSize,
     color: theme.color.text
   },
-  optionLabelOn: { fontWeight: theme.fontWeight.bold, color: theme.color.accentOnSoft },
   mark: {
     width: theme.space[18],
     height: theme.space[18],
@@ -647,8 +899,8 @@ var sheet = createStyleSheet((theme) => ({
     alignItems: "center",
     gap: theme.space[10],
     minHeight: theme.tapMin + theme.space[4],
-    paddingLeft: theme.space[12],
-    paddingRight: theme.space[8],
+    paddingStart: theme.space[12],
+    paddingEnd: theme.space[8],
     paddingVertical: theme.space[6],
     borderRadius: theme.radius.md,
     borderWidth: theme.borderWidth.thin,
@@ -684,9 +936,10 @@ var sheet = createStyleSheet((theme) => ({
     color: theme.color.text
   },
   matrixRow: { flexDirection: "row", gap: theme.space[5] },
-  matrixCell: {
+  matrixScore: {
     flex: 1,
-    height: theme.space[40],
+    // Touch matrix cells are 44 (Final 09).
+    height: theme.space[44],
     alignItems: "center",
     justifyContent: "center",
     borderRadius: theme.radius.sm,
@@ -694,7 +947,7 @@ var sheet = createStyleSheet((theme) => ({
     borderColor: theme.color.borderStrong,
     backgroundColor: theme.color.surface
   },
-  matrixCellOn: { borderColor: theme.color.accent, backgroundColor: theme.color.accent },
+  matrixScoreOn: { borderColor: theme.color.accent, backgroundColor: theme.color.accent },
   matrixNumber: {
     fontFamily: theme.font.mono,
     fontSize: theme.type.footnote.fontSize,
@@ -708,11 +961,11 @@ var sheet = createStyleSheet((theme) => ({
     gap: theme.space[11],
     padding: theme.space[12],
     borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.thin,
+    borderWidth: theme.borderWidth.thick,
     borderColor: theme.color.borderStrong,
     backgroundColor: theme.color.surface2
   },
-  consentCardOn: { borderColor: theme.edge.accent, backgroundColor: theme.color.accentSoft },
+  consentCardOn: { borderColor: theme.focus.ringColor, backgroundColor: theme.state.selected },
   consentText: {
     flex: 1,
     fontFamily: theme.font.sans,
@@ -729,39 +982,41 @@ var sheet = createStyleSheet((theme) => ({
     fontVariant: ["tabular-nums"]
   }
 }));
-var DEFAULT_LABELS = {
-  ...SURVEY_FIELD_LABELS,
-  back: "Back",
-  next: "Continue",
-  submit: "Send",
-  skip: "Skip",
-  close: "Close",
-  dismiss: "Dismiss survey",
-  doneTitle: "Thank you \u2014 logged."
-};
 var TAP_TO_COMMIT = /* @__PURE__ */ new Set(["nps", "csat", "ces", "scale", "pmf", "boolean", "choice"]);
 function SurveyPager({ total, index }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheetStyles);
-  return /* @__PURE__ */ jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: styles.pager, children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     View,
     {
-      style: [
-        styles.pagerDot,
-        i === index ? { width: theme.space[16], backgroundColor: theme.color.accent } : { backgroundColor: i < index ? theme.color.text3 : theme.color.borderStrong }
-      ]
-    },
-    i
-  )) });
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: styles.pager,
+      children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx(
+        View,
+        {
+          style: [
+            styles.pagerDot,
+            i === index ? { width: theme.space[16], backgroundColor: theme.color.accent } : { backgroundColor: i < index ? theme.color.text3 : theme.color.borderStrong }
+          ]
+        },
+        i
+      ))
+    }
+  );
 }
 function SurveyDoneCard({
-  title = "Thank you \u2014 logged.",
+  title: titleProp,
   body,
   action,
   onClose,
-  closeLabel = "Close"
+  closeLabel: closeLabelProp,
+  labels: labelOverrides
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
+  const title = titleProp ?? labels.doneTitle;
+  const closeLabel = closeLabelProp ?? labels.close;
+  const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheetStyles);
   return /* @__PURE__ */ jsxs(View, { style: styles.doneBody, children: [
     /* @__PURE__ */ jsxs(View, { style: styles.doneHead, children: [
@@ -784,23 +1039,32 @@ function Survey({
   pageIndex: pageProp,
   onPageIndexChange,
   layout = "sheet",
+  disabled = false,
+  loading = false,
   onSubmit,
   onDismiss,
   onAction,
   onEvent,
-  autoAdvance = true,
+  autoAdvance = false,
+  persistKey,
+  storage,
   autoCloseMs,
   dismissible = true,
+  showProgress = true,
+  skippable = true,
   locale,
   hiddenFields,
   metadata,
   urlParams,
   labels: labelOverrides,
-  motion = "full"
+  motion = "full",
+  fieldSurface,
+  density = "standard",
+  size = "lg"
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheetStyles);
-  const labels = React2.useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   const fallbackLocale = survey.defaultLocale;
   const t = React2.useCallback(
     (value) => resolveText(value, locale, fallbackLocale),
@@ -808,23 +1072,68 @@ function Survey({
   );
   const ctx = React2.useMemo(
     () => ({
-      hidden: resolveHiddenFields(survey.hiddenFields, { supplied: hiddenFields, urlParams, metadata }),
+      hidden: resolveHiddenFields(survey.hiddenFields, {
+        supplied: hiddenFields,
+        urlParams,
+        metadata
+      }),
       metadata,
       urlParams
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const [uncontrolled, setUncontrolled] = React2.useState(defaultAnswers ?? {});
+  const savedKey = persistKey ? storageKey("survey", persistKey) : void 0;
+  const saved = React2.useMemo(
+    () => savedKey ? readStored(storage, savedKey) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const [uncontrolled, setUncontrolled] = React2.useState(
+    saved?.answers ?? defaultAnswers ?? {}
+  );
   const answers = answersProp ?? uncontrolled;
   const pages = surveyPages(survey);
   const firstPage = React2.useMemo(() => nextPageIndex(survey, answers, null, ctx), []);
-  const [uncontrolledPage, setUncontrolledPage] = React2.useState(Math.max(0, firstPage));
+  const [uncontrolledPage, setUncontrolledPage] = React2.useState(
+    typeof saved?.page === "number" && saved.page >= 0 && saved.page < pages.length ? saved.page : Math.max(0, firstPage)
+  );
   const pageIdx = pageProp ?? uncontrolledPage;
+  const level = useResolvedMotion(motion, "survey");
+  const pageFade = React2.useRef(new Animated.Value(1)).current;
+  const pageShift = React2.useRef(new Animated.Value(0)).current;
+  const shownPage = React2.useRef(pageIdx);
+  React2.useEffect(() => {
+    if (shownPage.current === pageIdx) return;
+    const direction = pageIdx > shownPage.current || pageIdx < 0 ? 1 : -1;
+    shownPage.current = pageIdx;
+    if (level === "none") return;
+    pageFade.setValue(0);
+    pageShift.setValue(level === "full" ? direction * theme.space.s6 : 0);
+    Animated.parallel([
+      Animated.spring(pageFade, {
+        ...springConfig(theme, "de"),
+        toValue: 1,
+        useNativeDriver: true
+      }),
+      Animated.spring(pageShift, {
+        ...springConfig(theme, "ds"),
+        toValue: 0,
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [pageIdx, level, pageFade, pageShift, theme]);
   const page = pages[pageIdx];
   const [errors, setErrors] = React2.useState({});
+  const fieldRefs = React2.useRef(/* @__PURE__ */ new Map());
+  const focusFirst = React2.useRef(null);
   const [submitted, setSubmitted] = React2.useState(firstPage < 0);
   const finished = submitted || pageIdx < 0;
+  React2.useEffect(() => {
+    if (!savedKey || !storage) return;
+    if (finished) storage.removeItem?.(savedKey);
+    else writeStored(storage, savedKey, { answers: uncontrolled, page: uncontrolledPage });
+  }, [savedKey, storage, finished, uncontrolled, uncontrolledPage]);
   const [trail, setTrail] = React2.useState([]);
   const [endingId, setEndingId] = React2.useState(void 0);
   const emit = React2.useCallback(
@@ -919,8 +1228,10 @@ function Survey({
     [onSubmit, survey, ctx]
   );
   const advance = () => {
-    const found = validatePage(page, answers, ctx, locale, fallbackLocale);
+    if (disabled || loading) return;
+    const found = validatePage(page, answers, ctx, locale, fallbackLocale, labels.validation);
     if (Object.keys(found).length) {
+      focusFirst.current = visibleQuestions(page, answers, ctx).find((q) => found[q.id])?.id ?? null;
       setErrors(found);
       emitRef.current("survey_validation_failed", {
         page: page?.id,
@@ -936,12 +1247,24 @@ function Survey({
   };
   advanceRef.current = advance;
   const back = () => {
+    if (disabled || loading) return;
     const previous = trail.length ? trail[trail.length - 1] : prevPageIndex(survey, answers, pageIdx, ctx);
     if (previous < 0) return;
     setTrail((t2) => t2.slice(0, -1));
     setErrors({});
     setPage(previous);
   };
+  React2.useEffect(() => {
+    const id = focusFirst.current;
+    focusFirst.current = null;
+    const node = id ? fieldRefs.current.get(id) : null;
+    if (!node) return;
+    if (Platform.OS === "web") node.focus?.();
+    else {
+      const tag = findNodeHandle(node);
+      if (tag != null) AccessibilityInfo.setAccessibilityFocus(tag);
+    }
+  }, [errors]);
   const dismiss = React2.useCallback(
     (reason) => {
       if (reason !== "done") {
@@ -961,7 +1284,7 @@ function Survey({
   );
   const ending = pickSurveyEnding(survey, answers, ctx, endingId);
   const doneCta = ending?.cta;
-  const closeAfter = autoCloseMs ?? (doneCta ? 9e3 : 3400);
+  const closeAfter = autoCloseMs ?? 0;
   React2.useEffect(() => {
     if (!finished || closeAfter <= 0) return;
     const t2 = setTimeout(() => dismiss("done"), closeAfter);
@@ -972,86 +1295,157 @@ function Survey({
   const allOptional = questions.length > 0 && questions.every((q) => !isQuestionRequired(q, answers, ctx) && isAnswerEmpty(q, answers[q.id]));
   const isLast = nextPageIndex(survey, answers, pageIdx, ctx) < 0;
   const canBack = trail.length > 0 || prevPageIndex(survey, answers, pageIdx, ctx) >= 0;
+  const backRef = React2.useRef(null);
+  backRef.current = !finished && open && canBack ? () => (back(), true) : null;
+  React2.useEffect(() => {
+    const sub = BackHandler.addEventListener(
+      "hardwareBackPress",
+      () => backRef.current?.() ?? false
+    );
+    return () => sub.remove();
+  }, []);
   const content = finished ? /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
     /* @__PURE__ */ jsx(Text, { style: styles.kicker, children: title }),
     /* @__PURE__ */ jsx(
       SurveyDoneCard,
       {
         title: t(ending?.title) ?? labels.doneTitle,
-        body: t(ending?.body) ?? `Recorded against this account${typeof answers.nps === "number" ? ` as a ${npsBand(answers.nps)}` : ""}. You will not be asked this again for a while.`,
-        action: doneCta ? /* @__PURE__ */ jsx(Button, { size: "md", variant: "outline", trailingIcon: "arrow-right", onPress: () => onAction?.(doneCta.action), children: t(doneCta.label) }) : null,
+        body: t(ending?.body),
+        action: doneCta ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "md",
+            variant: "outline",
+            trailingIcon: "arrow-right",
+            onPress: () => onAction?.(doneCta.action),
+            children: t(doneCta.label)
+          }
+        ) : null,
         onClose: () => dismiss("done"),
         closeLabel: labels.close
       }
     )
-  ] }) : /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.headerText, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.kicker, children: title }),
-        page?.title ? /* @__PURE__ */ jsx(Text, { style: styles.pageTitle, children: t(page.title) }) : null
-      ] }),
-      answered.length > 1 ? /* @__PURE__ */ jsxs(Text, { style: styles.counter, children: [
-        position,
-        " / ",
-        answered.length
-      ] }) : null,
-      dismissible ? /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: labels.dismiss,
-          onPress: () => dismiss("user"),
-          hitSlop: theme.space[10],
-          style: styles.iconButton,
-          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.text3 })
-        }
-      ) : null
-    ] }),
-    /* @__PURE__ */ jsx(
-      Progress,
-      {
-        size: "sm",
-        value: Math.max(0, position - 1),
-        max: Math.max(1, answered.length),
-        accessibilityLabel: `${title} \u2014 page ${position} of ${answered.length}`,
-        motion
-      }
-    ),
-    survey.intro && position === 1 ? /* @__PURE__ */ jsx(Text, { style: styles.intro, children: t(survey.intro) }) : null,
-    /* @__PURE__ */ jsx(View, { style: styles.questions, children: questions.map((q) => /* @__PURE__ */ jsx(
-      SurveyQuestionField,
-      {
-        question: q,
-        locale,
-        defaultLocale: fallbackLocale,
-        value: answers[q.id],
-        error: errors[q.id],
-        labels,
-        onChange: (value, commit) => setAnswer(q, value, commit)
-      },
-      q.id
-    )) }),
-    /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
-      canBack ? /* @__PURE__ */ jsx(Button, { size: "md", variant: "outline", leadingIcon: "arrow-left", onPress: back, children: labels.back }) : null,
-      answered.length > 1 ? /* @__PURE__ */ jsx(SurveyPager, { total: answered.length, index: position - 1 }) : /* @__PURE__ */ jsx(View, { style: styles.grow }),
-      allOptional && answered.length > 1 ? /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "md",
-          variant: "ghost",
-          onPress: () => {
-            emitRef.current("survey_page_skipped", { page: page?.id });
-            setTrail((t2) => [...t2, pageIdx]);
-            const next = nextPageIndex(survey, answers, pageIdx);
-            if (next < 0) finish(answers);
-            else setPage(next);
-          },
-          children: labels.skip
-        }
-      ) : null,
-      /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", onPress: advance, children: isLast ? labels.submit : labels.next })
-    ] })
-  ] });
+  ] }) : /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [styles.body, density === "compact" ? styles.bodyCompact : null],
+      "aria-busy": loading || void 0,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.headerText, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.kicker, children: title }),
+            page?.title ? /* @__PURE__ */ jsx(Text, { style: styles.pageTitle, children: t(page.title) }) : null
+          ] }),
+          showProgress && answered.length > 1 ? /* @__PURE__ */ jsxs(Text, { style: styles.counter, children: [
+            position,
+            " / ",
+            answered.length
+          ] }) : null,
+          dismissible ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.dismiss,
+              onPress: () => dismiss("user"),
+              hitSlop: (theme.hit.sm - theme.ctl.sm) / 2,
+              style: ({ pressed }) => [
+                styles.iconButton,
+                pressed && { backgroundColor: theme.state.pressed }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.text3 })
+            }
+          ) : null
+        ] }),
+        showProgress ? /* @__PURE__ */ jsx(
+          Progress,
+          {
+            size: "sm",
+            value: Math.max(0, position - 1),
+            max: Math.max(1, answered.length),
+            accessibilityLabel: labels.progress(title, position, answered.length),
+            motion
+          }
+        ) : null,
+        survey.intro && position === 1 ? /* @__PURE__ */ jsx(Text, { style: styles.intro, children: t(survey.intro) }) : null,
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              styles.questions,
+              density === "compact" ? styles.questionsCompact : null,
+              { opacity: pageFade, transform: [{ translateX: pageShift }] }
+            ],
+            children: questions.map((q) => /* @__PURE__ */ jsx(
+              View,
+              {
+                ref: (node) => {
+                  fieldRefs.current.set(q.id, node);
+                },
+                ...{ tabIndex: -1 },
+                children: /* @__PURE__ */ jsx(
+                  SurveyQuestionField,
+                  {
+                    question: q,
+                    locale,
+                    defaultLocale: fallbackLocale,
+                    value: answers[q.id],
+                    error: errors[q.id],
+                    labels,
+                    fieldSurface,
+                    disabled,
+                    onChange: (value, commit) => setAnswer(q, value, commit)
+                  }
+                )
+              },
+              q.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+          canBack ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              size,
+              variant: "outline",
+              leadingIcon: "arrow-left",
+              disabled,
+              onPress: back,
+              children: labels.back
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(View, { style: styles.grow }),
+          skippable && allOptional && answered.length > 1 ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              size,
+              variant: "ghost",
+              disabled,
+              onPress: () => {
+                if (loading) return;
+                emitRef.current("survey_page_skipped", { page: page?.id });
+                setTrail((t2) => [...t2, pageIdx]);
+                const next = nextPageIndex(survey, answers, pageIdx);
+                if (next < 0) finish(answers);
+                else setPage(next);
+              },
+              children: labels.skip
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size,
+              variant: "primary",
+              disabled,
+              loading,
+              onPress: advance,
+              children: isLast ? labels.submit : labels.next
+            }
+          )
+        ] })
+      ]
+    }
+  );
   if (layout === "inline") return content;
   return /* @__PURE__ */ jsx(
     Sheet,
@@ -1067,33 +1461,35 @@ function Survey({
 }
 var sheetStyles = createStyleSheet((theme) => ({
   body: { gap: theme.space[16] },
+  bodyCompact: { gap: theme.space[12] },
   header: { flexDirection: "row", alignItems: "center", gap: theme.space[9] },
   headerText: { flex: 1, gap: theme.space[2] },
   kicker: {
+    ...theme.type.overline,
     fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    letterSpacing: theme.tracking.caps,
-    textTransform: "uppercase",
     color: theme.color.accentStrong
   },
   pageTitle: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.fontWeight.semibold,
     fontSize: theme.type.subheadline.fontSize,
     color: theme.color.text
   },
+  // Count style: mono 12 / 500, text-2.
   counter: {
     fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    color: theme.color.text3,
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2,
     fontVariant: ["tabular-nums"]
   },
+  // Ghost close: a ghost icon Button sm (30) with the 44 hit.
   iconButton: {
     width: theme.ctl.sm,
     height: theme.ctl.sm,
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radius.full
+    borderRadius: theme.ctl.r.sm
   },
   intro: {
     fontFamily: theme.font.sans,
@@ -1102,9 +1498,10 @@ var sheetStyles = createStyleSheet((theme) => ({
     color: theme.color.text3
   },
   questions: { gap: theme.space[20] },
+  questionsCompact: { gap: theme.space[12] },
   footer: { flexDirection: "row", alignItems: "center", gap: theme.space[9] },
   grow: { flex: 1 },
-  pushEnd: { marginLeft: "auto" },
+  pushEnd: { marginStart: "auto" },
   pager: { flex: 1, flexDirection: "row", alignItems: "center", gap: theme.space[5] },
   pagerDot: { width: theme.space[5], height: theme.space[5], borderRadius: theme.radius.full },
   doneBody: { gap: theme.space[11] },
@@ -1123,4 +1520,4 @@ var sheetStyles = createStyleSheet((theme) => ({
   }
 }));
 
-export { SURVEY_FIELD_LABELS, SURVEY_OTHER_PREFIX, Survey, SurveyBoolean, SurveyCheckboxList, SurveyChips, SurveyConsent, SurveyDoneCard, SurveyDropdown, SurveyField, SurveyFieldError, SurveyMatrix, SurveyOpenText, SurveyOptionRow, SurveyOptions, SurveyPager, SurveyQuestionField, SurveyRank, SurveyScale, SurveySlider, SurveyTextInput };
+export { SURVEY_FIELD_LABELS, SURVEY_OTHER_PREFIX, Survey, SurveyBoolean, SurveyCheckboxList, SurveyChips, SurveyConsent, SurveyDate, SurveyDoneCard, SurveyDropdown, SurveyField, SurveyFieldError, SurveyFile, SurveyImageChoice, SurveyMatrix, SurveyOpenText, SurveyOptionRow, SurveyOptions, SurveyPager, SurveyQuestionField, SurveyRank, SurveyScale, SurveySlider, SurveyStatement, SurveyTextInput };