@btndprojects/loam-ui-native 0.1.1 → 0.2.1

package/dist/{chunk-UWFLYMAR.js → chunk-TLCIR6RG.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 { storageKey, readStored, writeStored } from './chunk-NNCOFLNE.js';
+import { Slider } from './chunk-TDMG26JI.js';
+import { Textarea } from './chunk-74FLKD24.js';
+import { Picker } from './chunk-PID3NJB7.js';
+import { Progress } from './chunk-5UTRIXQ6.js';
+import { Sheet } from './chunk-QYPE5JX3.js';
+import { Chip } from './chunk-2SY63FCH.js';
+import { Input } from './chunk-7BUIKDD6.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React2 from 'react';
-import { View, Text, Pressable } from 'react-native';
+import { View, Text, Pressable, Animated } 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,24 @@ 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",
+  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({
@@ -38,7 +58,7 @@ function SurveyField({
   children
 }) {
   const { styles } = useStyles(sheet);
-  const labels = { ...SURVEY_FIELD_LABELS, ...labelOverrides };
+  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
@@ -56,16 +76,22 @@ function SurveyField({
   );
 }
 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
+}) {
+  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,16 +99,16 @@ 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 },
           "aria-checked": on,
-          accessibilityLabel: `Score ${v} of ${top}${ends}`,
+          accessibilityLabel: labels.score(v, top, ends),
           onPress: () => onChange(v, true),
           style: ({ pressed }) => [
             styles.scaleCell,
@@ -107,7 +133,7 @@ function SurveyOptionRow({
   role = "radio",
   disabled = false
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
   return /* @__PURE__ */ jsxs(
     Pressable,
@@ -124,7 +150,17 @@ 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(
+          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 })
       ]
     }
@@ -137,7 +173,7 @@ function SurveyOptions({
   labels: labelOverrides
 }) {
   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));
@@ -172,8 +208,12 @@ function SurveyOptions({
     ) : null
   ] });
 }
-function SurveyCheckboxList({ question, value, onChange }) {
-  const theme = useLoamTheme();
+function SurveyCheckboxList({
+  question,
+  value,
+  onChange
+}) {
+  const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
   const picked = Array.isArray(value) ? [...value] : [];
   const atCap = question.maxSelections != null && picked.length >= question.maxSelections;
@@ -228,7 +268,7 @@ function SurveyRank({
   labels: labelOverrides
 }) {
   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);
@@ -269,42 +309,61 @@ function SurveyRank({
     )
   ] }, item)) });
 }
-function SurveyMatrix({ question, value, onChange }) {
-  const theme = useLoamTheme();
+function SurveyMatrix({
+  question,
+  value,
+  onChange,
+  labels: labelOverrides
+}) {
+  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 },
+              "aria-checked": on,
+              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
+              ],
+              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
+}) {
+  const theme = useLoamTheme("survey");
   const { styles } = useStyles(sheet);
   const on = value === true;
   return /* @__PURE__ */ jsxs(View, { style: styles.stackSm, children: [
@@ -360,20 +419,36 @@ function SurveyBoolean({
   labels: labelOverrides
 }) {
   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,
+          onPress: () => onChange(val, true),
+          children: label
+        }
+      ) }, label))
     }
-  ) }, label)) });
+  );
 }
-function SurveyOpenText({ question, value, onChange, error }) {
+function SurveyOpenText({
+  question,
+  value,
+  onChange,
+  error
+}) {
   const text = typeof value === "string" ? value : "";
   return /* @__PURE__ */ jsx(
     Textarea,
@@ -388,7 +463,14 @@ function SurveyOpenText({ question, value, onChange, error }) {
     }
   );
 }
-function SurveyTextInput({ question, value, onChange, error }) {
+function SurveyTextInput({
+  question,
+  value,
+  onChange,
+  error,
+  labels: labelOverrides
+}) {
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   const t = question.type;
   const text = value == null ? "" : String(value);
   return /* @__PURE__ */ jsx(
@@ -399,7 +481,7 @@ function SurveyTextInput({ question, value, onChange, error }) {
       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),
       value: text,
       onChangeText: (next) => onChange(t === "number" ? next.replace(/[^\d.-]/g, "") : next)
@@ -412,7 +494,7 @@ function SurveyDropdown({
   onChange,
   labels: labelOverrides
 }) {
-  const labels = { ...SURVEY_FIELD_LABELS, ...labelOverrides };
+  const labels = useLabels("survey", SURVEY_LABELS, labelOverrides);
   return /* @__PURE__ */ jsx(
     Picker,
     {
@@ -440,7 +522,7 @@ 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 });
   const foot = (node) => node;
   if (t === "nps" || t === "csat" || t === "ces" || t === "scale") {
@@ -459,7 +541,7 @@ function SurveyQuestionField({
         error,
         labels,
         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 })
       }
@@ -494,12 +576,7 @@ function SurveyQuestionField({
         question,
         error,
         labels,
-        foot: /* @__PURE__ */ jsxs(Text, { style: styles.metaText, children: [
-          Object.keys(current).length,
-          " / ",
-          (question.rows ?? []).length,
-          " answered"
-        ] }),
+        foot: /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: merged.answeredOf(Object.keys(current).length, (question.rows ?? []).length) }),
         children: /* @__PURE__ */ jsx(SurveyMatrix, { ...props })
       }
     );
@@ -684,7 +761,7 @@ var sheet = createStyleSheet((theme) => ({
     color: theme.color.text
   },
   matrixRow: { flexDirection: "row", gap: theme.space[5] },
-  matrixCell: {
+  matrixScore: {
     flex: 1,
     height: theme.space[40],
     alignItems: "center",
@@ -694,7 +771,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,
@@ -729,39 +806,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: [
@@ -788,9 +867,13 @@ function Survey({
   onDismiss,
   onAction,
   onEvent,
-  autoAdvance = true,
+  autoAdvance = false,
+  persistKey,
+  storage,
   autoCloseMs,
   dismissible = true,
+  showProgress = true,
+  skippable = true,
   locale,
   hiddenFields,
   metadata,
@@ -798,9 +881,9 @@ function Survey({
   labels: labelOverrides,
   motion = "full"
 }) {
-  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 +891,66 @@ 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 [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,7 +1045,7 @@ function Survey({
     [onSubmit, survey, ctx]
   );
   const advance = () => {
-    const found = validatePage(page, answers, ctx, locale, fallbackLocale);
+    const found = validatePage(page, answers, ctx, locale, fallbackLocale, labels.validation);
     if (Object.keys(found).length) {
       setErrors(found);
       emitRef.current("survey_validation_failed", {
@@ -961,7 +1087,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);
@@ -978,8 +1104,17 @@ function Survey({
       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
       }
@@ -990,7 +1125,7 @@ function Survey({
         /* @__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: [
+      showProgress && answered.length > 1 ? /* @__PURE__ */ jsxs(Text, { style: styles.counter, children: [
         position,
         " / ",
         answered.length
@@ -1007,37 +1142,43 @@ function Survey({
         }
       ) : null
     ] }),
-    /* @__PURE__ */ jsx(
+    showProgress ? /* @__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}`,
+        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(View, { style: styles.questions, children: questions.map((q) => /* @__PURE__ */ jsx(
-      SurveyQuestionField,
+    /* @__PURE__ */ jsx(
+      Animated.View,
       {
-        question: q,
-        locale,
-        defaultLocale: fallbackLocale,
-        value: answers[q.id],
-        error: errors[q.id],
-        labels,
-        onChange: (value, commit) => setAnswer(q, value, commit)
-      },
-      q.id
-    )) }),
+        style: [styles.questions, { opacity: pageFade, transform: [{ translateX: pageShift }] }],
+        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(
+      canBack ? /* @__PURE__ */ jsx(Button, { size: "lg", variant: "outline", leadingIcon: "arrow-left", onPress: back, children: labels.back }) : null,
+      /* @__PURE__ */ jsx(View, { style: styles.grow }),
+      skippable && allOptional && answered.length > 1 ? /* @__PURE__ */ jsx(
         Button,
         {
-          size: "md",
+          size: "lg",
           variant: "ghost",
           onPress: () => {
             emitRef.current("survey_page_skipped", { page: page?.id });