@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/choice-question.jsx

@@ -0,0 +1,925 @@
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { IconArrowLeft, IconArrowRight, IconCheck, IconPencil } from "@tabler/icons-react-native";
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { buttonColors, sizeStyle, textStyle, trackingStyle, typeStyle } from "../controlStyles";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+/** One question, as an agent's AskUserQuestion sends it. */
+
+const LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+/** The structured answer for `onSubmit`. Exported for tests. */
+export function choiceAnswers(questions, picked, other, otherOn) {
+  const result = {};
+  questions.forEach((question, index) => {
+    if (otherOn[index]) {
+      result[question.question] = (other[index] ?? "").trim();
+      return;
+    }
+    const selected = picked[index] ?? [];
+    result[question.question] = question.multiSelect ? selected.join(", ") : selected[0] ?? "";
+  });
+  return result;
+}
+
+/**
+ * An agent's blocking multiple-choice question, as the web chat's question
+ * dock (`ChatQuestionDock` + `MultipleChoiceQuestion`): the question with its
+ * header badge and step count, lettered option rows with descriptions, an
+ * "Other..." row that opens a text field, then Back and Next or Submit. One
+ * question at a time.
+ */
+export function ChoiceQuestion(t0) {
+  const $ = _c(136);
+  const {
+    questions,
+    onSubmit,
+    loading: t1,
+    otherLabel: t2,
+    otherPlaceholder: t3,
+    framed: t4,
+    buttonWeight: t5
+  } = t0;
+  const loading = t1 === undefined ? false : t1;
+  const otherLabel = t2 === undefined ? "Other..." : t2;
+  const otherPlaceholder = t3 === undefined ? "Type your answer..." : t3;
+  const framed = t4 === undefined ? true : t4;
+  const buttonWeight = t5 === undefined ? "medium" : t5;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const icon = largerText ? 18 : 15;
+  const buttonText = largerText ? "text-xl" : "text-sm";
+  let t6;
+  if ($[0] !== buttonText || $[1] !== buttonWeight || $[2] !== scheme) {
+    t6 = (text, variant) => buttonWeight === "medium" ? text : <Text className={`${buttonText} font-instrument-sans-semibold`} style={[sizeStyle(buttonText), typeStyle("semibold"), {
+      color: buttonColors(variant, scheme)?.color
+    }]}>{text}</Text>;
+    $[0] = buttonText;
+    $[1] = buttonWeight;
+    $[2] = scheme;
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  const buttonLabel = t6;
+  const [step, setStep] = useState(0);
+  let t7;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = {};
+    $[4] = t7;
+  } else {
+    t7 = $[4];
+  }
+  const [picked, setPicked] = useState(t7);
+  let t8;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {};
+    $[5] = t8;
+  } else {
+    t8 = $[5];
+  }
+  const [other, setOther] = useState(t8);
+  let t9;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {};
+    $[6] = t9;
+  } else {
+    t9 = $[6];
+  }
+  const [otherOn, setOtherOn] = useState(t9);
+  const question = questions[step];
+  if (!question) {
+    return null;
+  }
+  const total = questions.length;
+  const isLast = step === total - 1;
+  let t10;
+  if ($[7] !== picked || $[8] !== step) {
+    t10 = picked[step] ?? [];
+    $[7] = picked;
+    $[8] = step;
+    $[9] = t10;
+  } else {
+    t10 = $[9];
+  }
+  const selected = t10;
+  let t11;
+  if ($[10] !== other || $[11] !== otherOn || $[12] !== selected || $[13] !== step) {
+    t11 = otherOn[step] ? (other[step] ?? "").trim() !== "" : selected.length > 0;
+    $[10] = other;
+    $[11] = otherOn;
+    $[12] = selected;
+    $[13] = step;
+    $[14] = t11;
+  } else {
+    t11 = $[14];
+  }
+  const hasAnswer = t11;
+  let t12;
+  if ($[15] !== otherOn || $[16] !== picked || $[17] !== question.multiSelect || $[18] !== selected || $[19] !== step) {
+    t12 = label => {
+      const next = question.multiSelect ? selected.includes(label) ? selected.filter(item => item !== label) : [...selected, label] : [label];
+      setPicked({
+        ...picked,
+        [step]: next
+      });
+      setOtherOn({
+        ...otherOn,
+        [step]: false
+      });
+    };
+    $[15] = otherOn;
+    $[16] = picked;
+    $[17] = question.multiSelect;
+    $[18] = selected;
+    $[19] = step;
+    $[20] = t12;
+  } else {
+    t12 = $[20];
+  }
+  const toggle = t12;
+  let t13;
+  if ($[21] !== hasAnswer || $[22] !== isLast || $[23] !== loading || $[24] !== onSubmit || $[25] !== other || $[26] !== otherOn || $[27] !== picked || $[28] !== questions || $[29] !== step) {
+    t13 = () => {
+      if (!hasAnswer || loading) {
+        return;
+      }
+      if (isLast) {
+        onSubmit(choiceAnswers(questions, picked, other, otherOn));
+      } else {
+        setStep(step + 1);
+      }
+    };
+    $[21] = hasAnswer;
+    $[22] = isLast;
+    $[23] = loading;
+    $[24] = onSubmit;
+    $[25] = other;
+    $[26] = otherOn;
+    $[27] = picked;
+    $[28] = questions;
+    $[29] = step;
+    $[30] = t13;
+  } else {
+    t13 = $[30];
+  }
+  const next_0 = t13;
+  let t14;
+  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = {
+      gap: 16
+    };
+    $[31] = t14;
+  } else {
+    t14 = $[31];
+  }
+  let t15;
+  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = {
+      gap: 8
+    };
+    $[32] = t15;
+  } else {
+    t15 = $[32];
+  }
+  const t16 = largerText ? 18 : 15;
+  const t17 = largerText ? 24 : 20.625;
+  let t18;
+  if ($[33] !== t16 || $[34] !== t17) {
+    t18 = {
+      fontSize: t16,
+      lineHeight: t17
+    };
+    $[33] = t16;
+    $[34] = t17;
+    $[35] = t18;
+  } else {
+    t18 = $[35];
+  }
+  let t19;
+  if ($[36] !== scheme) {
+    t19 = textStyle("foreground", scheme);
+    $[36] = scheme;
+    $[37] = t19;
+  } else {
+    t19 = $[37];
+  }
+  let t20;
+  if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = typeStyle("semibold");
+    $[38] = t20;
+  } else {
+    t20 = $[38];
+  }
+  let t21;
+  if ($[39] !== t18 || $[40] !== t19) {
+    t21 = [t18, t19, t20];
+    $[39] = t18;
+    $[40] = t19;
+    $[41] = t21;
+  } else {
+    t21 = $[41];
+  }
+  let t22;
+  if ($[42] !== question.question || $[43] !== t21) {
+    t22 = <Text className="flex-1 font-instrument-sans-semibold" style={t21}>{question.question}</Text>;
+    $[42] = question.question;
+    $[43] = t21;
+    $[44] = t22;
+  } else {
+    t22 = $[44];
+  }
+  let t23;
+  if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = {
+      gap: 6
+    };
+    $[45] = t23;
+  } else {
+    t23 = $[45];
+  }
+  let t24;
+  if ($[46] !== question.header) {
+    t24 = question.header ? <TopicBadge>{question.header}</TopicBadge> : null;
+    $[46] = question.header;
+    $[47] = t24;
+  } else {
+    t24 = $[47];
+  }
+  let t25;
+  if ($[48] !== largerText || $[49] !== scheme || $[50] !== step || $[51] !== total) {
+    t25 = total > 1 ? <Text className="font-instrument-sans-medium" style={[sizeStyle(chatTextSize("caption", largerText)), textStyle("muted", scheme), typeStyle("medium")]}>{`${step + 1}/${total}`}</Text> : null;
+    $[48] = largerText;
+    $[49] = scheme;
+    $[50] = step;
+    $[51] = total;
+    $[52] = t25;
+  } else {
+    t25 = $[52];
+  }
+  let t26;
+  if ($[53] !== t24 || $[54] !== t25) {
+    t26 = <View className="flex-row items-center" style={t23}>{t24}{t25}</View>;
+    $[53] = t24;
+    $[54] = t25;
+    $[55] = t26;
+  } else {
+    t26 = $[55];
+  }
+  let t27;
+  if ($[56] !== t22 || $[57] !== t26) {
+    t27 = <View className="flex-row items-center justify-between" style={t15}>{t22}{t26}</View>;
+    $[56] = t22;
+    $[57] = t26;
+    $[58] = t27;
+  } else {
+    t27 = $[58];
+  }
+  let t28;
+  if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+    t28 = {
+      gap: 4
+    };
+    $[59] = t28;
+  } else {
+    t28 = $[59];
+  }
+  let t29;
+  if ($[60] !== loading || $[61] !== otherOn || $[62] !== question.multiSelect || $[63] !== question.options || $[64] !== selected || $[65] !== step || $[66] !== toggle) {
+    let t30;
+    if ($[68] !== loading || $[69] !== otherOn || $[70] !== question.multiSelect || $[71] !== selected || $[72] !== step || $[73] !== toggle) {
+      t30 = (option, index) => <ChoiceRow key={`${option.label}-${index}`} selected={!otherOn[step] && selected.includes(option.label)} disabled={loading} multiple={question.multiSelect} mark={LETTERS[index] ?? String(index + 1)} label={option.label} description={option.description} onPress={() => toggle(option.label)} />;
+      $[68] = loading;
+      $[69] = otherOn;
+      $[70] = question.multiSelect;
+      $[71] = selected;
+      $[72] = step;
+      $[73] = toggle;
+      $[74] = t30;
+    } else {
+      t30 = $[74];
+    }
+    t29 = question.options.map(t30);
+    $[60] = loading;
+    $[61] = otherOn;
+    $[62] = question.multiSelect;
+    $[63] = question.options;
+    $[64] = selected;
+    $[65] = step;
+    $[66] = toggle;
+    $[67] = t29;
+  } else {
+    t29 = $[67];
+  }
+  const t30 = otherOn[step] ?? false;
+  let t31;
+  if ($[75] !== otherOn || $[76] !== picked || $[77] !== step) {
+    t31 = () => {
+      setOtherOn({
+        ...otherOn,
+        [step]: true
+      });
+      setPicked({
+        ...picked,
+        [step]: []
+      });
+    };
+    $[75] = otherOn;
+    $[76] = picked;
+    $[77] = step;
+    $[78] = t31;
+  } else {
+    t31 = $[78];
+  }
+  let t32;
+  if ($[79] !== hasAnswer || $[80] !== isLast || $[81] !== loading || $[82] !== next_0 || $[83] !== other || $[84] !== otherOn || $[85] !== otherPlaceholder || $[86] !== step) {
+    t32 = otherOn[step] ? <View style={{
+      marginTop: 8,
+      marginLeft: 36
+    }}><Input value={other[step] ?? ""} onChangeText={text_0 => setOther({
+        ...other,
+        [step]: text_0
+      })} placeholder={otherPlaceholder} editable={!loading} autoFocus={true} returnKeyType={isLast ? "send" : "next"} submitBehavior={isLast && hasAnswer ? "blurAndSubmit" : "submit"} onSubmitEditing={next_0} /></View> : null;
+    $[79] = hasAnswer;
+    $[80] = isLast;
+    $[81] = loading;
+    $[82] = next_0;
+    $[83] = other;
+    $[84] = otherOn;
+    $[85] = otherPlaceholder;
+    $[86] = step;
+    $[87] = t32;
+  } else {
+    t32 = $[87];
+  }
+  let t33;
+  if ($[88] !== loading || $[89] !== otherLabel || $[90] !== question.multiSelect || $[91] !== t30 || $[92] !== t31 || $[93] !== t32) {
+    t33 = <ChoiceRow selected={t30} disabled={loading} multiple={question.multiSelect} mark="other" label={otherLabel} onPress={t31}>{t32}</ChoiceRow>;
+    $[88] = loading;
+    $[89] = otherLabel;
+    $[90] = question.multiSelect;
+    $[91] = t30;
+    $[92] = t31;
+    $[93] = t32;
+    $[94] = t33;
+  } else {
+    t33 = $[94];
+  }
+  let t34;
+  if ($[95] !== t29 || $[96] !== t33) {
+    t34 = <View style={t28}>{t29}{t33}</View>;
+    $[95] = t29;
+    $[96] = t33;
+    $[97] = t34;
+  } else {
+    t34 = $[97];
+  }
+  let t35;
+  if ($[98] === Symbol.for("react.memo_cache_sentinel")) {
+    t35 = {
+      gap: 8
+    };
+    $[98] = t35;
+  } else {
+    t35 = $[98];
+  }
+  let t36;
+  if ($[99] !== buttonLabel || $[100] !== icon || $[101] !== loading || $[102] !== scheme || $[103] !== step || $[104] !== total) {
+    t36 = total > 1 && step > 0 ? <View className="flex-1"><Button variant="ghost" disabled={loading} onPress={() => setStep(step - 1)} startContent={<IconArrowLeft size={icon} strokeWidth={2.5} color={tokens.color.foreground[scheme]} />} accessibilityLabel="Back">{buttonLabel("Back", "ghost")}</Button></View> : null;
+    $[99] = buttonLabel;
+    $[100] = icon;
+    $[101] = loading;
+    $[102] = scheme;
+    $[103] = step;
+    $[104] = total;
+    $[105] = t36;
+  } else {
+    t36 = $[105];
+  }
+  const t37 = !hasAnswer;
+  const t38 = isLast ? "Submit" : "Next";
+  let t39;
+  if ($[106] !== icon || $[107] !== loading || $[108] !== scheme) {
+    t39 = loading ? null : <IconArrowRight size={icon} strokeWidth={2.5} color={palette.primaryForeground[scheme]} />;
+    $[106] = icon;
+    $[107] = loading;
+    $[108] = scheme;
+    $[109] = t39;
+  } else {
+    t39 = $[109];
+  }
+  const t40 = isLast ? "Submit" : "Next";
+  let t41;
+  if ($[110] !== buttonLabel || $[111] !== t40) {
+    t41 = buttonLabel(t40, "primary");
+    $[110] = buttonLabel;
+    $[111] = t40;
+    $[112] = t41;
+  } else {
+    t41 = $[112];
+  }
+  let t42;
+  if ($[113] !== loading || $[114] !== next_0 || $[115] !== t37 || $[116] !== t38 || $[117] !== t39 || $[118] !== t41) {
+    t42 = <View className="flex-1"><Button disabled={t37} loading={loading} onPress={next_0} accessibilityLabel={t38} endContent={t39}>{t41}</Button></View>;
+    $[113] = loading;
+    $[114] = next_0;
+    $[115] = t37;
+    $[116] = t38;
+    $[117] = t39;
+    $[118] = t41;
+    $[119] = t42;
+  } else {
+    t42 = $[119];
+  }
+  let t43;
+  if ($[120] !== t36 || $[121] !== t42) {
+    t43 = <View className="flex-row items-center" style={t35}>{t36}{t42}</View>;
+    $[120] = t36;
+    $[121] = t42;
+    $[122] = t43;
+  } else {
+    t43 = $[122];
+  }
+  let t44;
+  if ($[123] !== t27 || $[124] !== t34 || $[125] !== t43) {
+    t44 = <View style={t14}>{t27}{t34}{t43}</View>;
+    $[123] = t27;
+    $[124] = t34;
+    $[125] = t43;
+    $[126] = t44;
+  } else {
+    t44 = $[126];
+  }
+  const body = t44;
+  if (!framed) {
+    return body;
+  }
+  const t45 = tokens.color.surface[scheme];
+  let t46;
+  if ($[127] !== t45) {
+    t46 = {
+      borderRadius: tokens.radius.lg,
+      backgroundColor: t45,
+      overflow: "hidden"
+    };
+    $[127] = t45;
+    $[128] = t46;
+  } else {
+    t46 = $[128];
+  }
+  let t47;
+  let t48;
+  if ($[129] === Symbol.for("react.memo_cache_sentinel")) {
+    t47 = {
+      maxHeight: 544
+    };
+    t48 = {
+      padding: 12
+    };
+    $[129] = t47;
+    $[130] = t48;
+  } else {
+    t47 = $[129];
+    t48 = $[130];
+  }
+  let t49;
+  if ($[131] !== body) {
+    t49 = <ScrollView style={t47} contentContainerStyle={t48} keyboardShouldPersistTaps="handled">{body}</ScrollView>;
+    $[131] = body;
+    $[132] = t49;
+  } else {
+    t49 = $[132];
+  }
+  let t50;
+  if ($[133] !== t46 || $[134] !== t49) {
+    t50 = <View style={t46}>{t49}</View>;
+    $[133] = t46;
+    $[134] = t49;
+    $[135] = t50;
+  } else {
+    t50 = $[135];
+  }
+  return t50;
+}
+
+/**
+ * The question's topic, the web `Badge variant="secondary"` with Eva's
+ * `text-3xs font-semibold` (10 / 14, 600) in a `px-2.5 py-0.5` pill. Drawn here
+ * because `Badge` sets its own size and weight.
+ */
+function TopicBadge(t0) {
+  const $ = _c(15);
+  const {
+    children
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const fontSize = largerText ? 14 : 10;
+  const t1 = palette.default[scheme];
+  let t2;
+  if ($[0] !== t1) {
+    t2 = {
+      backgroundColor: t1,
+      borderRadius: tokens.radius.pill
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = largerText ? 20 : 14;
+  const t4 = palette.defaultForeground[scheme];
+  let t5;
+  if ($[2] !== fontSize || $[3] !== t3 || $[4] !== t4) {
+    t5 = {
+      fontSize,
+      lineHeight: t3,
+      color: t4
+    };
+    $[2] = fontSize;
+    $[3] = t3;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = typeStyle("semibold");
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  let t7;
+  if ($[7] !== t5) {
+    t7 = [t5, t6];
+    $[7] = t5;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== children || $[10] !== t7) {
+    t8 = <Text numberOfLines={1} className="font-instrument-sans-semibold" style={t7}>{children}</Text>;
+    $[9] = children;
+    $[10] = t7;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  let t9;
+  if ($[12] !== t2 || $[13] !== t8) {
+    t9 = <View className="rounded-full px-2.5 py-0.5" style={t2}>{t8}</View>;
+    $[12] = t2;
+    $[13] = t8;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  return t9;
+}
+
+/** The option card's `py-2 px-2.5`, which is also the slop of its press target. */
+const CARD_PADDING = {
+  top: 8,
+  bottom: 8,
+  left: 10,
+  right: 10
+};
+
+/** A whole card is at least a 44 target: the press target inside is this much less its slop. */
+const CARD_MIN_HEIGHT = 44;
+
+/** The card while pressed: the kit 3% press scale, or a dim with Reduce Motion. */
+export function choicePressStyle(pressed, reduceMotion) {
+  if (!pressed) return null;
+  return reduceMotion ? {
+    opacity: 0.8
+  } : {
+    transform: [{
+      scale: 0.97
+    }]
+  };
+}
+
+/**
+ * One option row (web `Card` with `bg-secondary`, `py-2 px-2.5`, radius 16): a round 24 mark
+ * (30 with larger text; letter, or a pencil for "Other"; a check on the primary fill when picked),
+ * the label and the description. Picked: a 1-wide primary ring outside, on the accent.
+ */
+function ChoiceRow(t0) {
+  const $ = _c(99);
+  const {
+    selected,
+    disabled,
+    multiple,
+    mark,
+    label,
+    description,
+    onPress,
+    children
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const reduceMotion = useReduceMotion();
+  const [pressed, setPressed] = useState(false);
+  const muted = tokens.color.muted[scheme];
+  const markSize = largerText ? 30 : 24;
+  const markText = largerText ? 14 : 11;
+  const glyph = largerText ? 16 : 13;
+  let T0;
+  let T1;
+  let T2;
+  let t1;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+  let t14;
+  let t15;
+  let t16;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== description || $[1] !== disabled || $[2] !== glyph || $[3] !== label || $[4] !== largerText || $[5] !== mark || $[6] !== markSize || $[7] !== markText || $[8] !== multiple || $[9] !== muted || $[10] !== onPress || $[11] !== pressed || $[12] !== reduceMotion || $[13] !== scheme || $[14] !== selected) {
+    const small = chatTextSize("small", largerText);
+    const plain = mark === "other" && !selected;
+    const labelLine = largerText ? sizeStyle(small, "snug") : {
+      ...sizeStyle(small, "snug"),
+      lineHeight: 24
+    };
+    T2 = View;
+    const t17 = selected ? tokens.color.background[scheme] : palette.default[scheme];
+    const t18 = disabled ? 0.5 : 1;
+    let t19;
+    if ($[34] !== t17 || $[35] !== t18) {
+      t19 = {
+        borderRadius: tokens.radius.lg,
+        backgroundColor: t17,
+        opacity: t18,
+        paddingVertical: CARD_PADDING.top,
+        paddingHorizontal: CARD_PADDING.left
+      };
+      $[34] = t17;
+      $[35] = t18;
+      $[36] = t19;
+    } else {
+      t19 = $[36];
+    }
+    const t20 = pressed && !disabled;
+    let t21;
+    if ($[37] !== reduceMotion || $[38] !== t20) {
+      t21 = choicePressStyle(t20, reduceMotion);
+      $[37] = reduceMotion;
+      $[38] = t20;
+      $[39] = t21;
+    } else {
+      t21 = $[39];
+    }
+    if ($[40] !== t19 || $[41] !== t21) {
+      t15 = [t19, t21];
+      $[40] = t19;
+      $[41] = t21;
+      $[42] = t15;
+    } else {
+      t15 = $[42];
+    }
+    if ($[43] !== scheme || $[44] !== selected) {
+      t16 = selected ? <View pointerEvents="none" style={{
+        position: "absolute",
+        top: -1,
+        left: -1,
+        right: -1,
+        bottom: -1,
+        borderRadius: tokens.radius.lg + 1,
+        borderWidth: 1,
+        borderColor: palette.primary[scheme]
+      }} /> : null;
+      $[43] = scheme;
+      $[44] = selected;
+      $[45] = t16;
+    } else {
+      t16 = $[45];
+    }
+    T1 = Pressable;
+    t3 = multiple ? "checkbox" : "radio";
+    t4 = label;
+    t5 = description || undefined;
+    if ($[46] !== disabled || $[47] !== selected) {
+      t6 = {
+        checked: selected,
+        disabled
+      };
+      $[46] = disabled;
+      $[47] = selected;
+      $[48] = t6;
+    } else {
+      t6 = $[48];
+    }
+    t7 = disabled;
+    t8 = CARD_PADDING;
+    t9 = onPress;
+    if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
+      t10 = () => setPressed(true);
+      t11 = () => setPressed(false);
+      $[49] = t10;
+      $[50] = t11;
+    } else {
+      t10 = $[49];
+      t11 = $[50];
+    }
+    t12 = "flex-row";
+    const t22 = description ? "flex-start" : "center";
+    if ($[51] !== t22) {
+      t13 = {
+        gap: 12,
+        alignItems: t22,
+        minHeight: CARD_MIN_HEIGHT - CARD_PADDING.top - CARD_PADDING.bottom
+      };
+      $[51] = t22;
+      $[52] = t13;
+    } else {
+      t13 = $[52];
+    }
+    const t23 = markSize / 2;
+    const t24 = description ? 2 : 0;
+    const t25 = selected ? palette.primary[scheme] : palette.default[scheme];
+    let t26;
+    if ($[53] !== markSize || $[54] !== t23 || $[55] !== t24 || $[56] !== t25) {
+      t26 = {
+        width: markSize,
+        height: markSize,
+        borderRadius: t23,
+        marginTop: t24,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: t25
+      };
+      $[53] = markSize;
+      $[54] = t23;
+      $[55] = t24;
+      $[56] = t25;
+      $[57] = t26;
+    } else {
+      t26 = $[57];
+    }
+    let t27;
+    if ($[58] !== glyph || $[59] !== largerText || $[60] !== mark || $[61] !== markText || $[62] !== muted || $[63] !== scheme || $[64] !== selected) {
+      t27 = selected ? <IconCheck size={glyph} strokeWidth={3} color={palette.primaryForeground[scheme]} /> : mark === "other" ? <IconPencil size={glyph} color={muted} /> : <Text className="font-instrument-sans-semibold" style={[{
+        fontSize: markText,
+        lineHeight: largerText ? 20 : 16,
+        color: muted
+      }, trackingStyle(markText, "wide"), typeStyle("semibold")]}>{mark}</Text>;
+      $[58] = glyph;
+      $[59] = largerText;
+      $[60] = mark;
+      $[61] = markText;
+      $[62] = muted;
+      $[63] = scheme;
+      $[64] = selected;
+      $[65] = t27;
+    } else {
+      t27 = $[65];
+    }
+    if ($[66] !== t26 || $[67] !== t27) {
+      t14 = <View style={t26}>{t27}</View>;
+      $[66] = t26;
+      $[67] = t27;
+      $[68] = t14;
+    } else {
+      t14 = $[68];
+    }
+    T0 = View;
+    t1 = "min-w-0 flex-1";
+    t2 = plain ? <Text className="font-instrument-sans" style={[sizeStyle(small), {
+      color: muted
+    }]}>{label}</Text> : <Text className="font-instrument-sans-medium" style={[labelLine, typeStyle("medium"), {
+      color: selected ? palette.primary[scheme] : muted
+    }]}>{label}</Text>;
+    $[0] = description;
+    $[1] = disabled;
+    $[2] = glyph;
+    $[3] = label;
+    $[4] = largerText;
+    $[5] = mark;
+    $[6] = markSize;
+    $[7] = markText;
+    $[8] = multiple;
+    $[9] = muted;
+    $[10] = onPress;
+    $[11] = pressed;
+    $[12] = reduceMotion;
+    $[13] = scheme;
+    $[14] = selected;
+    $[15] = T0;
+    $[16] = T1;
+    $[17] = T2;
+    $[18] = t1;
+    $[19] = t10;
+    $[20] = t11;
+    $[21] = t12;
+    $[22] = t13;
+    $[23] = t14;
+    $[24] = t15;
+    $[25] = t16;
+    $[26] = t2;
+    $[27] = t3;
+    $[28] = t4;
+    $[29] = t5;
+    $[30] = t6;
+    $[31] = t7;
+    $[32] = t8;
+    $[33] = t9;
+  } else {
+    T0 = $[15];
+    T1 = $[16];
+    T2 = $[17];
+    t1 = $[18];
+    t10 = $[19];
+    t11 = $[20];
+    t12 = $[21];
+    t13 = $[22];
+    t14 = $[23];
+    t15 = $[24];
+    t16 = $[25];
+    t2 = $[26];
+    t3 = $[27];
+    t4 = $[28];
+    t5 = $[29];
+    t6 = $[30];
+    t7 = $[31];
+    t8 = $[32];
+    t9 = $[33];
+  }
+  let t17;
+  if ($[69] !== description || $[70] !== largerText || $[71] !== muted) {
+    t17 = description ? <Text className="font-instrument-sans" style={[sizeStyle(chatTextSize("caption", largerText), "relaxed"), {
+      color: muted,
+      marginTop: 2
+    }]}>{description}</Text> : null;
+    $[69] = description;
+    $[70] = largerText;
+    $[71] = muted;
+    $[72] = t17;
+  } else {
+    t17 = $[72];
+  }
+  let t18;
+  if ($[73] !== T0 || $[74] !== t1 || $[75] !== t17 || $[76] !== t2) {
+    t18 = <T0 className={t1}>{t2}{t17}</T0>;
+    $[73] = T0;
+    $[74] = t1;
+    $[75] = t17;
+    $[76] = t2;
+    $[77] = t18;
+  } else {
+    t18 = $[77];
+  }
+  let t19;
+  if ($[78] !== T1 || $[79] !== t10 || $[80] !== t11 || $[81] !== t12 || $[82] !== t13 || $[83] !== t14 || $[84] !== t18 || $[85] !== t3 || $[86] !== t4 || $[87] !== t5 || $[88] !== t6 || $[89] !== t7 || $[90] !== t8 || $[91] !== t9) {
+    t19 = <T1 accessibilityRole={t3} accessibilityLabel={t4} accessibilityHint={t5} accessibilityState={t6} disabled={t7} hitSlop={t8} onPress={t9} onPressIn={t10} onPressOut={t11} className={t12} style={t13}>{t14}{t18}</T1>;
+    $[78] = T1;
+    $[79] = t10;
+    $[80] = t11;
+    $[81] = t12;
+    $[82] = t13;
+    $[83] = t14;
+    $[84] = t18;
+    $[85] = t3;
+    $[86] = t4;
+    $[87] = t5;
+    $[88] = t6;
+    $[89] = t7;
+    $[90] = t8;
+    $[91] = t9;
+    $[92] = t19;
+  } else {
+    t19 = $[92];
+  }
+  let t20;
+  if ($[93] !== T2 || $[94] !== children || $[95] !== t15 || $[96] !== t16 || $[97] !== t19) {
+    t20 = <T2 style={t15}>{t16}{t19}{children}</T2>;
+    $[93] = T2;
+    $[94] = children;
+    $[95] = t15;
+    $[96] = t16;
+    $[97] = t19;
+    $[98] = t20;
+  } else {
+    t20 = $[98];
+  }
+  return t20;
+}