@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-UWFLYMAR.js

@@ -0,0 +1,1126 @@
+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 * as React2 from 'react';
+import { View, Text, Pressable } 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';
+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';
+
+var PMF_RESOLVED = PMF_OPTIONS.map((label) => ({
+  value: label,
+  label
+}));
+var SURVEY_FIELD_LABELS = {
+  required: "required",
+  other: "Other",
+  otherPlaceholder: "Tell us",
+  yes: "Yes",
+  no: "No",
+  rankHint: "Most important at the top",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  choosePlaceholder: "Choose one"
+};
+var SURVEY_OTHER_PREFIX = "Other: ";
+function SurveyField({
+  question,
+  error,
+  foot,
+  labels: labelOverrides,
+  children
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = { ...SURVEY_FIELD_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
+    ] })
+  );
+}
+function SurveyFieldError({ children }) {
+  const theme = useLoamTheme();
+  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();
+  const { styles } = useStyles(sheet);
+  const { count, from } = scaleShape(question);
+  const top = from + count - 1;
+  return /* @__PURE__ */ jsxs(View, { style: styles.stackSm, children: [
+    /* @__PURE__ */ jsx(View, { accessibilityRole: "radiogroup", style: styles.scaleRow, children: Array.from({ length: count }, (_, i) => {
+      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("");
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "radio",
+          accessibilityState: { checked: on },
+          "aria-checked": on,
+          accessibilityLabel: `Score ${v} of ${top}${ends}`,
+          onPress: () => onChange(v, true),
+          style: ({ pressed }) => [
+            styles.scaleCell,
+            on ? styles.scaleCellOn : null,
+            pressed && !on ? { backgroundColor: theme.state.pressed } : null
+          ],
+          children: /* @__PURE__ */ jsx(Text, { style: [styles.scaleNumber, on ? styles.scaleNumberOn : null], children: v })
+        },
+        v
+      );
+    }) }),
+    question.low || question.high ? /* @__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 })
+    ] }) : null
+  ] });
+}
+function SurveyOptionRow({
+  label,
+  checked,
+  onPress,
+  role = "radio",
+  disabled = false
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: role === "radio" ? "radio" : "checkbox",
+      accessibilityState: { checked, disabled },
+      "aria-checked": checked,
+      accessibilityLabel: label,
+      disabled,
+      onPress,
+      style: ({ pressed }) => [
+        styles.optionRow,
+        checked ? styles.optionRowOn : null,
+        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 })
+      ]
+    }
+  );
+}
+function SurveyOptions({
+  question,
+  value,
+  onChange,
+  labels: labelOverrides
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = { ...SURVEY_FIELD_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));
+  return /* @__PURE__ */ jsxs(View, { style: styles.stackSm, accessibilityRole: "radiogroup", children: [
+    options.map((o) => /* @__PURE__ */ jsx(
+      SurveyOptionRow,
+      {
+        label: o.label,
+        checked: raw === o.value,
+        onPress: () => onChange(o.value, true)
+      },
+      o.value
+    )),
+    question.other ? /* @__PURE__ */ jsx(
+      SurveyOptionRow,
+      {
+        label: labels.other,
+        checked: isOther,
+        onPress: () => onChange(SURVEY_OTHER_PREFIX)
+      }
+    ) : null,
+    isOther ? /* @__PURE__ */ jsx(
+      Input,
+      {
+        size: "lg",
+        autoFocus: true,
+        placeholder: labels.otherPlaceholder,
+        accessibilityLabel: `${question.text} \u2014 ${labels.other}`,
+        value: (raw ?? SURVEY_OTHER_PREFIX).slice(SURVEY_OTHER_PREFIX.length),
+        onChangeText: (t) => onChange(SURVEY_OTHER_PREFIX + t)
+      }
+    ) : null
+  ] });
+}
+function SurveyCheckboxList({ question, value, onChange }) {
+  const theme = useLoamTheme();
+  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;
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        style: blocked ? { opacity: theme.state.disabledOpacity } : void 0,
+        pointerEvents: blocked ? "none" : "auto",
+        children: /* @__PURE__ */ jsx(
+          SurveyOptionRow,
+          {
+            label: o.label,
+            checked: on,
+            role: "checkbox",
+            disabled: blocked,
+            onPress: () => onChange(on ? picked.filter((p) => p !== o.value) : [...picked, o.value])
+          }
+        )
+      },
+      o.value
+    );
+  }) });
+}
+function SurveyChips({ question, value, onChange }) {
+  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.chipWrap, children: (question.options ?? []).map((o) => {
+    const on = picked.includes(o.value);
+    return /* @__PURE__ */ jsx(
+      Chip,
+      {
+        variant: "filter",
+        size: "md",
+        selectable: true,
+        selected: on,
+        disabled: !on && atCap,
+        onSelectedChange: () => onChange(on ? picked.filter((p) => p !== o.value) : [...picked, o.value]),
+        children: o.label
+      },
+      o.value
+    );
+  }) });
+}
+function SurveyRank({
+  question,
+  value,
+  onChange,
+  labels: labelOverrides
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = { ...SURVEY_FIELD_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);
+  const move = (from, dir) => {
+    const to = from + dir;
+    const next = [...items];
+    const a = next[from];
+    const b = next[to];
+    if (a === void 0 || b === void 0) return;
+    next[from] = b;
+    next[to] = a;
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsx(View, { style: styles.stackXs, children: items.map((item, i) => /* @__PURE__ */ jsxs(View, { style: styles.rankRow, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.rankIndex, children: i + 1 }),
+    /* @__PURE__ */ jsx(Text, { style: styles.rankLabel, children: labelOf(item) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "outline",
+        leadingIcon: "chevron-up",
+        accessibilityLabel: `${labels.moveUp}: ${labelOf(item)}`,
+        disabled: i === 0,
+        onPress: () => move(i, -1)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "outline",
+        leadingIcon: "chevron-down",
+        accessibilityLabel: `${labels.moveDown}: ${labelOf(item)}`,
+        disabled: i === items.length - 1,
+        onPress: () => move(i, 1)
+      }
+    )
+  ] }, item)) });
+}
+function SurveyMatrix({ question, value, onChange }) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  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__ */ 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();
+  const { styles } = useStyles(sheet);
+  const on = value === true;
+  return /* @__PURE__ */ jsxs(View, { style: styles.stackSm, children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "checkbox",
+        accessibilityState: { checked: on },
+        "aria-checked": on,
+        accessibilityLabel: question.text,
+        onPress: () => onChange(!on),
+        style: [styles.consentCard, on ? styles.consentCardOn : 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 })
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ jsx(SurveyFieldError, { children: error }) : null
+  ] });
+}
+function SurveySlider({ question, value, onChange }) {
+  const { styles } = useStyles(sheet);
+  const min = question.min ?? 0;
+  const max = question.max ?? 100;
+  const v = typeof value === "number" ? value : question.value ?? Math.round((min + max) / 2);
+  return /* @__PURE__ */ jsxs(View, { style: styles.stackSm, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.readout, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.readoutValue, children: v }),
+      question.format ? /* @__PURE__ */ jsx(Text, { style: styles.endLabel, children: question.format }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        min,
+        max,
+        step: question.step ?? 1,
+        value: v,
+        onValueChange: (next) => onChange(next),
+        accessibilityLabel: question.text
+      }
+    ),
+    /* @__PURE__ */ jsxs(View, { style: styles.endsRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.endLabel, children: min }),
+      /* @__PURE__ */ jsx(Text, { style: styles.endLabel, children: max })
+    ] })
+  ] });
+}
+function SurveyBoolean({
+  question,
+  value,
+  onChange,
+  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,
+    {
+      size: "lg",
+      fullWidth: true,
+      variant: value === val ? "primary" : "outline",
+      accessibilityLabel: label,
+      onPress: () => onChange(val, true),
+      children: label
+    }
+  ) }, label)) });
+}
+function SurveyOpenText({ question, value, onChange, error }) {
+  const text = typeof value === "string" ? value : "";
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      accessibilityLabel: question.text,
+      placeholder: question.placeholder,
+      maxLength: question.maxLength ?? 400,
+      minRows: 3,
+      error: Boolean(error),
+      value: text,
+      onChangeText: (t) => onChange(t)
+    }
+  );
+}
+function SurveyTextInput({ question, value, onChange, error }) {
+  const t = question.type;
+  const text = value == null ? "" : String(value);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      size: "lg",
+      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),
+      error: Boolean(error),
+      value: text,
+      onChangeText: (next) => onChange(t === "number" ? next.replace(/[^\d.-]/g, "") : next)
+    }
+  );
+}
+function SurveyDropdown({
+  question,
+  value,
+  onChange,
+  labels: labelOverrides
+}) {
+  const labels = { ...SURVEY_FIELD_LABELS, ...labelOverrides };
+  return /* @__PURE__ */ jsx(
+    Picker,
+    {
+      items: (question.options ?? []).map((o) => ({ value: o.value, label: o.label })),
+      value: typeof value === "string" ? value : void 0,
+      onValueChange: (v) => onChange(v),
+      placeholder: question.placeholder ?? labels.choosePlaceholder,
+      title: question.text,
+      size: "lg",
+      accessibilityLabel: question.text
+    }
+  );
+}
+function SurveyQuestionField({
+  question: authored,
+  locale,
+  defaultLocale,
+  ...control
+}) {
+  const { styles } = useStyles(sheet);
+  const question = React2.useMemo(
+    () => resolveQuestion(authored, locale, defaultLocale),
+    [authored, locale, defaultLocale]
+  );
+  const props = { ...control, question };
+  const { value, error, labels } = props;
+  const t = question.type;
+  const merged = { ...SURVEY_FIELD_LABELS, ...labels };
+  if (t === "consent") return /* @__PURE__ */ jsx(SurveyConsent, { ...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 }) });
+  }
+  if (t === "choice" || t === "pmf") {
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveyOptions, { ...props }) });
+  }
+  if (t === "multi" || t === "chips") {
+    const picked = Array.isArray(value) ? value : [];
+    const cap = question.maxSelections;
+    return /* @__PURE__ */ jsx(
+      SurveyField,
+      {
+        question,
+        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
+        ),
+        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 }) });
+  }
+  if (t === "boolean") {
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveyBoolean, { ...props }) });
+  }
+  if (t === "slider") {
+    return /* @__PURE__ */ jsx(SurveyField, { question, error, labels, children: /* @__PURE__ */ jsx(SurveySlider, { ...props }) });
+  }
+  if (t === "rank") {
+    return /* @__PURE__ */ jsx(
+      SurveyField,
+      {
+        question,
+        error,
+        labels,
+        foot: /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: merged.rankHint }),
+        children: /* @__PURE__ */ jsx(SurveyRank, { ...props })
+      }
+    );
+  }
+  if (t === "matrix") {
+    const current = value ?? {};
+    return /* @__PURE__ */ jsx(
+      SurveyField,
+      {
+        question,
+        error,
+        labels,
+        foot: /* @__PURE__ */ jsxs(Text, { style: styles.metaText, children: [
+          Object.keys(current).length,
+          " / ",
+          (question.rows ?? []).length,
+          " answered"
+        ] }),
+        children: /* @__PURE__ */ jsx(SurveyMatrix, { ...props })
+      }
+    );
+  }
+  if (t === "open") {
+    const text = typeof value === "string" ? value : "";
+    const budget = question.maxLength ?? 400;
+    return /* @__PURE__ */ jsx(
+      SurveyField,
+      {
+        question,
+        error,
+        labels,
+        foot: /* @__PURE__ */ jsxs(Text, { style: styles.metaText, children: [
+          text.length,
+          " / ",
+          budget
+        ] }),
+        children: /* @__PURE__ */ jsx(SurveyOpenText, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    SurveyField,
+    {
+      question,
+      error,
+      labels,
+      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] },
+  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,
+    color: theme.color.text
+  },
+  requiredTag: {
+    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,
+    color: theme.color.text3,
+    marginTop: -theme.space[4]
+  },
+  foot: { flexDirection: "row", alignItems: "center", gap: theme.space[8] },
+  metaText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3
+  },
+  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
+  },
+  stackXs: { gap: theme.space[6] },
+  stackSm: { gap: theme.space[7] },
+  stackMd: { gap: theme.space[12] },
+  grow: { flex: 1 },
+  scaleRow: { flexDirection: "row", gap: theme.space[4] },
+  scaleCell: {
+    flex: 1,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface2
+  },
+  scaleCellOn: { borderColor: theme.color.accent, backgroundColor: theme.color.accent },
+  scaleNumber: {
+    fontFamily: theme.font.mono,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text,
+    fontVariant: ["tabular-nums"]
+  },
+  scaleNumberOn: { color: theme.color.accentInk },
+  endsRow: { flexDirection: "row", justifyContent: "space-between" },
+  endLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text3
+  },
+  optionRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[11],
+    minHeight: theme.tapMin + theme.space[4],
+    paddingHorizontal: theme.space[13],
+    paddingVertical: theme.space[8],
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface2
+  },
+  optionRowOn: {
+    borderColor: theme.edge.accent,
+    backgroundColor: theme.color.accentSoft
+  },
+  optionLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    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],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  markSquare: { borderRadius: theme.radius.xs },
+  markOn: { borderColor: theme.color.accent, backgroundColor: theme.color.accent },
+  markDot: {
+    width: theme.space[7],
+    height: theme.space[7],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accentInk
+  },
+  chipWrap: { flexDirection: "row", flexWrap: "wrap", gap: theme.space[7] },
+  rankRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[10],
+    minHeight: theme.tapMin + theme.space[4],
+    paddingLeft: theme.space[12],
+    paddingRight: theme.space[8],
+    paddingVertical: theme.space[6],
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  rankIndex: {
+    width: theme.space[20],
+    fontFamily: theme.font.mono,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.accentStrong,
+    fontVariant: ["tabular-nums"]
+  },
+  rankLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    color: theme.color.text
+  },
+  matrixCard: {
+    gap: theme.space[8],
+    padding: theme.space[11],
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  matrixStatement: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    color: theme.color.text
+  },
+  matrixRow: { flexDirection: "row", gap: theme.space[5] },
+  matrixCell: {
+    flex: 1,
+    height: theme.space[40],
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface
+  },
+  matrixCellOn: { borderColor: theme.color.accent, backgroundColor: theme.color.accent },
+  matrixNumber: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text,
+    fontVariant: ["tabular-nums"]
+  },
+  booleanRow: { flexDirection: "row", gap: theme.space[9] },
+  consentCard: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space[11],
+    padding: theme.space[12],
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface2
+  },
+  consentCardOn: { borderColor: theme.edge.accent, backgroundColor: theme.color.accentSoft },
+  consentText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  readout: { flexDirection: "row", alignItems: "baseline", gap: theme.space[8] },
+  readoutValue: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title2.fontSize,
+    color: theme.color.text,
+    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 { styles } = useStyles(sheetStyles);
+  return /* @__PURE__ */ jsx(View, { 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.",
+  body,
+  action,
+  onClose,
+  closeLabel = "Close"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheetStyles);
+  return /* @__PURE__ */ jsxs(View, { style: styles.doneBody, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.doneHead, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: theme.icon.md, color: theme.color.good }),
+      /* @__PURE__ */ jsx(Text, { style: styles.doneTitle, children: title })
+    ] }),
+    body ? /* @__PURE__ */ jsx(Text, { style: styles.doneText, children: body }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+      action,
+      /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: onClose ? /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", onPress: onClose, children: closeLabel }) : null })
+    ] })
+  ] });
+}
+function Survey({
+  survey,
+  open = true,
+  answers: answersProp,
+  defaultAnswers,
+  onAnswersChange,
+  pageIndex: pageProp,
+  onPageIndexChange,
+  layout = "sheet",
+  onSubmit,
+  onDismiss,
+  onAction,
+  onEvent,
+  autoAdvance = true,
+  autoCloseMs,
+  dismissible = true,
+  locale,
+  hiddenFields,
+  metadata,
+  urlParams,
+  labels: labelOverrides,
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheetStyles);
+  const labels = React2.useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+  const fallbackLocale = survey.defaultLocale;
+  const t = React2.useCallback(
+    (value) => resolveText(value, locale, fallbackLocale),
+    [locale, fallbackLocale]
+  );
+  const ctx = React2.useMemo(
+    () => ({
+      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 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 pageIdx = pageProp ?? uncontrolledPage;
+  const page = pages[pageIdx];
+  const [errors, setErrors] = React2.useState({});
+  const [submitted, setSubmitted] = React2.useState(firstPage < 0);
+  const finished = submitted || pageIdx < 0;
+  const [trail, setTrail] = React2.useState([]);
+  const [endingId, setEndingId] = React2.useState(void 0);
+  const emit = React2.useCallback(
+    (name, extra) => {
+      onEvent?.({ name, survey: survey.id, ...extra });
+    },
+    [onEvent, survey.id]
+  );
+  const emitRef = React2.useRef(emit);
+  emitRef.current = emit;
+  React2.useEffect(() => {
+    emitRef.current("survey_started");
+  }, []);
+  React2.useEffect(() => {
+    if (!finished && page) emitRef.current("survey_page_viewed", { page: page.id });
+  }, [finished, page]);
+  const answersRef = React2.useRef(answers);
+  answersRef.current = answers;
+  const shownAt = React2.useRef(/* @__PURE__ */ new Map());
+  React2.useEffect(() => {
+    if (finished || !page) return;
+    const asked = visibleQuestions(page, answersRef.current, ctx);
+    const opened = shownAt.current;
+    const at = Date.now();
+    for (const q of asked) {
+      opened.set(q.id, at);
+      emitRef.current("survey_question_viewed", {
+        page: page.id,
+        question: q.id,
+        props: { type: q.type }
+      });
+    }
+    return () => {
+      for (const q of asked) {
+        const from = opened.get(q.id);
+        if (from == null) continue;
+        opened.delete(q.id);
+        emitRef.current("survey_question_left", {
+          page: page.id,
+          question: q.id,
+          props: { dwellMs: Date.now() - from }
+        });
+      }
+    };
+  }, [finished, page, ctx]);
+  const setPage = (next) => {
+    if (pageProp === void 0) setUncontrolledPage(next);
+    onPageIndexChange?.(next);
+  };
+  const answered = visiblePages(survey, answers, ctx);
+  const position = page ? answered.indexOf(page) + 1 : answered.length;
+  const soloTapPage = autoAdvance && page != null && (() => {
+    const qs = visibleQuestions(page, answers, ctx);
+    return qs.length === 1 && qs[0] != null && TAP_TO_COMMIT.has(qs[0].type);
+  })();
+  const advanceRef = React2.useRef(() => {
+  });
+  const setAnswer = (question, value, commit = false) => {
+    const next = { ...answers, [question.id]: value };
+    if (answersProp === void 0) setUncontrolled(next);
+    onAnswersChange?.(next);
+    setErrors((e) => {
+      if (!e[question.id]) return e;
+      const { [question.id]: _drop, ...restErrors } = e;
+      return restErrors;
+    });
+    emitRef.current("survey_answered", {
+      page: page?.id,
+      question: question.id,
+      props: { type: question.type, value }
+    });
+    if (commit && soloTapPage) setTimeout(() => advanceRef.current(), 240);
+  };
+  const finish = React2.useCallback(
+    (final, ending2) => {
+      setSubmitted(true);
+      setEndingId(ending2);
+      const chosen = pickSurveyEnding(survey, final, ctx, ending2);
+      emitRef.current("survey_completed", {
+        props: {
+          answered: Object.keys(final).filter((k) => final[k] !== void 0 && final[k] !== "").length,
+          // How much was collected — a different number from the progress bar,
+          // and the one worth trending.
+          completion: surveyCompletion(survey, final, ctx),
+          ending: ending2,
+          screenOut: chosen?.screenOut,
+          redirectUrl: chosen?.redirectUrl
+        }
+      });
+      onSubmit?.(final);
+    },
+    [onSubmit, survey, ctx]
+  );
+  const advance = () => {
+    const found = validatePage(page, answers, ctx, locale, fallbackLocale);
+    if (Object.keys(found).length) {
+      setErrors(found);
+      emitRef.current("survey_validation_failed", {
+        page: page?.id,
+        props: { fields: Object.keys(found) }
+      });
+      return;
+    }
+    setErrors({});
+    const next = nextPageIndex(survey, answers, pageIdx, ctx);
+    setTrail((tr) => [...tr, pageIdx]);
+    if (next < 0) finish(answers, branchedEndingId(survey, answers, pageIdx));
+    else setPage(next);
+  };
+  advanceRef.current = advance;
+  const back = () => {
+    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);
+  };
+  const dismiss = React2.useCallback(
+    (reason) => {
+      if (reason !== "done") {
+        emitRef.current("survey_dismissed", {
+          page: page?.id,
+          props: {
+            answered: Object.keys(answers).length,
+            // Abandoning on the last page of six is a different event from
+            // abandoning on the first; only this number tells them apart.
+            completion: surveyCompletion(survey, answers, ctx)
+          }
+        });
+      }
+      onDismiss?.(reason);
+    },
+    [onDismiss, page, answers, survey, ctx]
+  );
+  const ending = pickSurveyEnding(survey, answers, ctx, endingId);
+  const doneCta = ending?.cta;
+  const closeAfter = autoCloseMs ?? (doneCta ? 9e3 : 3400);
+  React2.useEffect(() => {
+    if (!finished || closeAfter <= 0) return;
+    const t2 = setTimeout(() => dismiss("done"), closeAfter);
+    return () => clearTimeout(t2);
+  }, [finished, closeAfter, dismiss]);
+  const title = t(survey.title) ?? "";
+  const questions = visibleQuestions(page, answers, ctx);
+  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 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,
+        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 })
+    ] })
+  ] });
+  if (layout === "inline") return content;
+  return /* @__PURE__ */ jsx(
+    Sheet,
+    {
+      open,
+      onClose: () => dismiss(finished ? "done" : "user"),
+      dismissible,
+      detents: pages.length > 1 ? ["half", "full"] : void 0,
+      motion,
+      children: content
+    }
+  );
+}
+var sheetStyles = createStyleSheet((theme) => ({
+  body: { gap: theme.space[16] },
+  header: { flexDirection: "row", alignItems: "center", gap: theme.space[9] },
+  headerText: { flex: 1, gap: theme.space[2] },
+  kicker: {
+    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,
+    fontSize: theme.type.subheadline.fontSize,
+    color: theme.color.text
+  },
+  counter: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3,
+    fontVariant: ["tabular-nums"]
+  },
+  iconButton: {
+    width: theme.ctl.sm,
+    height: theme.ctl.sm,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full
+  },
+  intro: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  questions: { gap: theme.space[20] },
+  footer: { flexDirection: "row", alignItems: "center", gap: theme.space[9] },
+  grow: { flex: 1 },
+  pushEnd: { marginLeft: "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] },
+  doneHead: { flexDirection: "row", alignItems: "center", gap: theme.space[10] },
+  doneTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    color: theme.color.text
+  },
+  doneText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text2
+  }
+}));
+
+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 };