@joinskips/brand 9.0.0-develop.148 → 9.0.0-develop.149

package/chat/helpers/thread.js

@@ -1,6 +1,6 @@
 // One conversation as the chat shows it: messages in time order, each sent, pending or failed, with no duplicates
 // when a page and the socket bring the same message, or when the socket echoes what the member just sent.
-import { isSkip } from "./message.js";
+import { isSkip, } from "./message.js";
 export const EMPTY_THREAD = { messages: [] };
 // Pending lines get negative ids, which never collide with the Skips App's.
 let nextPendingId = -1;
@@ -39,6 +39,21 @@ export function withFailed(thread, pending, failed = true) {
 export function withoutMessage(thread, id) {
     return { messages: thread.messages.filter((m) => m.id !== id) };
 }
+/** The ids of the thread's messages the Skips App holds, oldest first: pending and failed lines have no place in its pages. */
+export const storedIds = (thread) => thread.messages.filter((message) => message.delivery === 'sent').map((message) => message.id);
+/**
+ * The question from Skip whose buttons can still be pressed: unanswered, with nothing written after it. A line from the
+ * care team after it leaves it open, since what asked it still waits for the press.
+ */
+export function openQuestion(messages) {
+    for (const message of [...messages].reverse()) {
+        if (message.mine)
+            return undefined;
+        if (message.choice)
+            return message.choice.chosen === null ? { message, items: message.choice.items } : undefined;
+    }
+    return undefined;
+}
 // An answer is never taken back, so a copy of a question without one keeps the answer the chat has.
 function keptChoice(known, incoming) {
     if (incoming === undefined)

package/chat/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ui/index.ts';
 export * from './hooks/index.ts';
 export * from './helpers/index.ts';
+export * from './chat/index.ts';

package/chat/index.js

@@ -1,3 +1,4 @@
 export * from "./ui/index.js";
 export * from "./hooks/index.js";
 export * from "./helpers/index.js";
+export * from "./chat/index.js";

package/chat/ui/Conversation.d.ts

@@ -1,7 +1,10 @@
+import { type ReactNode } from 'react';
 import { type ImageSourcePropType } from 'react-native';
 import type { Composer } from '../hooks/useComposer.ts';
-import { type Thread } from '../helpers/thread.ts';
+import type { ChoiceItem } from '../helpers/message.ts';
+import { type Thread, type ThreadMessage } from '../helpers/thread.ts';
 import { type ChatIcon, type ChatWords } from './parts.ts';
+import { type WelcomeWords } from './Welcome.tsx';
 export type LoadState = 'loading' | 'ready' | 'failed';
 export interface ConversationProps {
     thread: Thread;
@@ -13,13 +16,36 @@ export interface ConversationProps {
     onRetry: (id: number) => void;
     onLoadOlder: () => void;
     onReload: () => void;
-    keyboardOffset?: number;
-    bottomInset?: number;
+    keyboardOffset?: number | undefined;
+    bottomInset?: number | undefined;
     words: ChatWords;
     Icon: ChatIcon;
     skipMark: ImageSourcePropType;
+    label?: string;
+    lead?: ReactNode;
+    trail?: ReactNode;
+    hidden?: ReadonlySet<number>;
+    choices?: ConversationChoices;
+    composerClosed?: boolean;
+    holding?: boolean;
+}
+export interface ConversationChoices {
+    sending: string | null;
+    failed: number | null;
+    holding?: boolean;
+    words: WelcomeWords;
+    onChoose: (question: ThreadMessage, answer: ChoiceItem) => void;
 }
 export declare const PHOTO_RETRIES = 5;
 export declare const PHOTO_RETRY_MS = 1500;
 /** One conversation: its messages oldest at the top, the care team's typing, and the box to write in. */
 export declare function Conversation(props: ConversationProps): import("react").JSX.Element;
+export interface UnsentProps {
+    message: ThreadMessage;
+    words: ChatWords;
+    onRetry: (id: number) => void;
+    Icon: ChatIcon;
+    holding: boolean;
+}
+/** The member's line while it is on its way, or after it failed, with its retry. */
+export declare function Unsent({ message, words, onRetry, Icon, holding, }: UnsentProps): import("react").JSX.Element;

package/chat/ui/Conversation.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ActivityIndicator, FlatList, Image, KeyboardAvoidingView, Linking, Platform, Pressable, Text, TextInput, View, } from 'react-native';
-import { groupThread } from "../helpers/thread.js";
+import { groupThread, openQuestion, } from "../helpers/thread.js";
 import { Bubble } from "./Bubble.js";
 import { useColor } from "./parts.js";
+import { Choices } from "./Welcome.js";
 // An image from require needs its size in style: the web draws it at its own size otherwise.
 const AVATAR_SIZE = 32;
 export const PHOTO_RETRIES = 5;
@@ -18,40 +19,64 @@ export function Conversation(props) {
     const { thread, load, feedDown, typists, words, onReload, onLoadOlder } = props;
     const secondary = useColor('ink-secondary');
     // The list is inverted so it rests at the newest message and stays put while the member reads older ones.
-    const items = groupThread(thread.messages, props.skipUserId).reverse();
-    return (_jsxs(KeyboardAvoidingView, { behavior: "padding", keyboardVerticalOffset: props.keyboardOffset ?? 0, className: "flex-1", children: [feedDown ? (_jsx(Line, { role: "status", className: "bg-muted px-gutter-phone py-2 text-center text-sm text-ink-secondary", children: words.feedDown })) : null, load === 'loading' ? (_jsx(ActivityIndicator, { accessibilityLabel: words.loading, className: "flex-1", color: secondary })) : load === 'failed' ? (_jsxs(View, { role: "alert", className: "flex-1 items-center justify-center gap-3 px-gutter-phone", children: [_jsx(Line, { className: "text-center text-base text-ink-secondary", children: words.loadFailed }), _jsx(Pressable, { role: "button", onPress: onReload, className: "h-control items-center justify-center rounded-pill border border-line-control px-6 active:opacity-80", children: _jsx(Line, { className: "text-md font-semibold text-ink", children: words.retry }) })] })) : (_jsx(FlatList, { inverted: true, data: items, keyExtractor: itemKey, onEndReached: onLoadOlder, contentContainerClassName: "gap-4 px-gutter-phone py-4 md:mx-auto md:w-full md:max-w-reading", ListHeaderComponent: typists.length ? _jsx(Line, { className: "text-sm text-ink-secondary", children: words.typingLine(typists) }) : undefined, renderItem: ({ item }) => _jsx(ThreadRow, { item: item, ...props }) })), _jsx(ComposerBox, { ...props })] }));
+    const shown = props.hidden ? thread.messages.filter((message) => !props.hidden?.has(message.id)) : thread.messages;
+    const items = groupThread(shown, props.skipUserId).reverse();
+    const question = props.choices ? openQuestion(shown) : undefined;
+    return (_jsxs(KeyboardAvoidingView, { behavior: "padding", keyboardVerticalOffset: props.keyboardOffset ?? 0, className: "flex-1", children: [feedDown ? (_jsx(Line, { role: "status", className: "bg-muted px-gutter-phone py-2 text-center text-sm text-ink-secondary", children: words.feedDown })) : null, load === 'loading' ? (_jsx(ActivityIndicator, { accessibilityLabel: words.loading, className: "flex-1", color: secondary })) : load === 'failed' ? (_jsxs(View, { role: "alert", className: "flex-1 items-center justify-center gap-3 px-gutter-phone", children: [_jsx(Line, { className: "text-center text-base text-ink-secondary", children: words.loadFailed }), _jsx(Pressable, { role: "button", onPress: onReload, className: "h-control items-center justify-center rounded-pill border border-line-control px-6 active:opacity-80", children: _jsx(Line, { className: "text-md font-semibold text-ink", children: words.retry }) })] })) : (_jsx(FlatList, { inverted: true, data: items, keyExtractor: itemKey, onEndReached: onLoadOlder, contentContainerClassName: "gap-4 px-gutter-phone py-4 md:mx-auto md:w-full md:max-w-reading", role: "log", "aria-label": props.label, 
+                // The conversation scrolls, so the keyboard has to be able to reach it.
+                tabIndex: 0, ListHeaderComponent: _jsxs(_Fragment, { children: [props.trail, typists.length ? _jsx(Line, { className: "text-sm text-ink-secondary", children: words.typingLine(typists) }) : null] }), ListFooterComponent: _jsx(_Fragment, { children: props.lead }), renderItem: ({ item }) => _jsx(ThreadRow, { item: item, question: question, ...props }) })), _jsx(ComposerBox, { ...props })] }));
 }
 function itemKey(item) {
     if (item.kind === 'run')
         return `r${String(item.messages[0]?.id)}`;
     return `${item.kind === 'notice' ? 'n' : 'u'}${String(item.message.id)}`;
 }
-function ComposerBox({ composer, bottomInset, words, Icon }) {
+// The web sends on Enter, as joinskips.com's chat does, and Shift+Enter starts a new line. A phone's return key
+// starts a new line.
+function sendOnEnter(canSend, submit) {
+    return (event) => {
+        const { nativeEvent } = event;
+        if (nativeEvent.key !== 'Enter' || ('shiftKey' in nativeEvent && nativeEvent.shiftKey === true))
+            return;
+        event.preventDefault();
+        if (canSend)
+            submit();
+    };
+}
+function ComposerBox({ composer, bottomInset, words, Icon, composerClosed = false, holding = false }) {
     const secondary = useColor('ink-secondary');
     const placeholder = useColor('ink-placeholder');
     const actionInk = useColor('action-ink');
-    const { text, picked, refused, canSend } = composer;
-    return (_jsxs(View, { style: { paddingBottom: Math.max(bottomInset ?? 0, MIN_BOTTOM_SPACE) }, className: "gap-2 px-gutter-phone pt-2 md:mx-auto md:w-full md:max-w-reading", children: [refused ? (_jsx(Line, { role: "alert", className: "text-sm text-error-ink", children: words.attachmentRefused[refused] })) : null, picked ? (_jsxs(View, { className: "flex-row items-center gap-3 self-start rounded-control border border-line-subtle bg-surface p-2 pr-3", children: [isPhoto(picked) ? (_jsx(Image, { source: { uri: picked.uri }, resizeMode: "cover", className: "h-10 w-10 rounded-control bg-muted" })) : (_jsx(View, { className: "h-10 w-10 items-center justify-center", children: _jsx(Icon, { name: "file", color: secondary, size: 20 }) })), _jsxs(View, { className: "max-w-56", children: [_jsx(Line, { className: "text-sm text-ink", numberOfLines: 1, children: picked.name }), _jsx(Line, { className: "text-xs text-ink-secondary", children: `${isPhoto(picked) ? words.photo : words.pdf} · ${words.fileSize(picked.size)}` })] }), _jsx(Pressable, { role: "button", accessibilityLabel: `${words.remove} ${picked.name}`, hitSlop: 8, onPress: composer.remove, children: _jsx(Icon, { name: "close", color: secondary, size: 18 }) })] })) : null, _jsxs(View, { className: "flex-row items-end gap-1 rounded-[24px] border border-line-subtle bg-surface p-1.5 shadow-card", children: [composer.attach ? (_jsx(Pressable, { role: "button", accessibilityLabel: words.attach, onPress: composer.attach, className: "h-[42px] w-[42px] items-center justify-center rounded-pill active:bg-muted", children: _jsx(Icon, { name: "attach", color: secondary, size: 18 }) })) : null, _jsx(TextInput, { value: text, onChangeText: composer.onChangeText, placeholder: words.composerPlaceholder, placeholderTextColor: placeholder, accessibilityLabel: words.composerPlaceholder, multiline: true, ...Platform.select({ web: { rows: 1 }, default: {} }), className: "max-h-40 flex-1 self-center px-1 py-2 font-ui text-md leading-6 text-ink" }), _jsx(Pressable, { role: "button", accessibilityLabel: words.send, disabled: !canSend, onPress: composer.submit, className: `h-[42px] w-[42px] items-center justify-center rounded-pill bg-action active:bg-action-pressed ${canSend ? '' : 'opacity-40'}`, children: _jsx(View, { style: { transform: [{ rotate: '-90deg' }] }, children: _jsx(Icon, { name: "arrow-right", color: actionInk, size: 18 }) }) })] }), _jsx(Line, { className: "text-center text-xs text-ink-secondary", children: words.emergencyNote })] }));
+    const { text, picked, refused } = composer;
+    const canSend = composer.canSend && !composerClosed && !holding;
+    return (_jsxs(View, { style: { paddingBottom: Math.max(bottomInset ?? 0, MIN_BOTTOM_SPACE) }, className: "gap-2 px-gutter-phone pt-2 md:mx-auto md:w-full md:max-w-reading", children: [refused ? (_jsx(Line, { role: "alert", className: "text-sm text-error-ink", children: words.attachmentRefused[refused] })) : null, picked ? (_jsxs(View, { className: "flex-row items-center gap-3 self-start rounded-control border border-line-subtle bg-surface p-2 pr-3", children: [isPhoto(picked) ? (_jsx(Image, { source: { uri: picked.uri }, resizeMode: "cover", className: "h-10 w-10 rounded-control bg-muted" })) : (_jsx(View, { className: "h-10 w-10 items-center justify-center", children: _jsx(Icon, { name: "file", color: secondary, size: 20 }) })), _jsxs(View, { className: "max-w-56", children: [_jsx(Line, { className: "text-sm text-ink", numberOfLines: 1, children: picked.name }), _jsx(Line, { className: "text-xs text-ink-secondary", children: `${isPhoto(picked) ? words.photo : words.pdf} · ${words.fileSize(picked.size)}` })] }), _jsx(Pressable, { role: "button", accessibilityLabel: `${words.remove} ${picked.name}`, hitSlop: 8, onPress: composer.remove, children: _jsx(Icon, { name: "close", color: secondary, size: 18 }) })] })) : null, _jsxs(View, { className: "flex-row items-end gap-1 rounded-[24px] border border-line-subtle bg-surface p-1.5 shadow-card", children: [composer.attach && !composerClosed ? (_jsx(Pressable, { role: "button", accessibilityLabel: words.attach, onPress: composer.attach, className: "h-[42px] w-[42px] items-center justify-center rounded-pill active:bg-muted", children: _jsx(Icon, { name: "attach", color: secondary, size: 18 }) })) : null, _jsx(TextInput, { value: text, editable: !composerClosed, onChangeText: composer.onChangeText, placeholder: words.composerPlaceholder, placeholderTextColor: placeholder, accessibilityLabel: words.composerPlaceholder, multiline: true, ...Platform.select({ web: { rows: 1, onKeyPress: sendOnEnter(canSend, composer.submit) }, default: {} }), className: "max-h-40 flex-1 self-center px-1 py-2 font-ui text-md leading-6 text-ink" }), _jsx(Pressable, { role: "button", accessibilityLabel: words.send, disabled: !canSend, onPress: composer.submit, className: `h-[42px] w-[42px] items-center justify-center rounded-pill bg-action active:bg-action-pressed ${canSend ? '' : 'opacity-40'}`, children: _jsx(View, { style: { transform: [{ rotate: '-90deg' }] }, children: _jsx(Icon, { name: "arrow-right", color: actionInk, size: 18 }) }) })] }), words.emergencyNote ? (_jsx(Line, { className: "text-center text-xs text-ink-secondary", children: words.emergencyNote })) : null] }));
 }
 function ThreadRow({ item, words, onRetry, ...props }) {
     if (item.kind === 'notice') {
         return (_jsx(Line, { className: "self-center rounded-control border border-line-subtle px-3 py-2 text-sm text-ink-secondary", children: item.message.text }));
     }
-    if (item.kind === 'unsent')
-        return _jsx(Unsent, { message: item.message, words: words, onRetry: onRetry, Icon: props.Icon });
+    if (item.kind === 'unsent') {
+        return (_jsx(Unsent, { message: item.message, words: words, onRetry: onRetry, Icon: props.Icon, holding: props.holding ?? false }));
+    }
     const { sender, messages } = item;
     const mine = sender === 'mine';
     const name = mine ? words.you : sender === 'skip' ? words.skip : sender.name;
     // The run is in time order, so its time is its last line's.
     const sentAt = Math.max(...messages.map((m) => m.sentAt));
-    return (_jsxs(View, { className: `max-w-[82%] gap-1 ${mine ? 'items-end self-end' : 'items-start self-start'}`, children: [messages.map((message, index) => (_jsxs(View, { className: "flex-row items-end gap-2", children: [mine ? null : index === messages.length - 1 ? (_jsx(SenderAvatar, { sender: sender, name: name, skipMark: props.skipMark })) : (_jsx(View, { className: "w-8" })), _jsxs(View, { className: `shrink gap-2 ${mine ? 'items-end' : 'items-start'}`, children: [message.attachments.map((attachment) => (_jsx(Attachment, { attachment: attachment, words: words, Icon: props.Icon }, attachment.url))), message.text ? _jsx(Bubble, { mine: mine, text: message.text }) : null] })] }, message.id))), _jsx(Line, { className: `px-1 text-xs text-ink-secondary ${mine ? '' : 'ml-10'}`, children: `${name} · ${words.messageTime(sentAt)}` })] }));
+    return (_jsxs(View, { className: `max-w-[82%] gap-1 ${mine ? 'items-end self-end' : 'items-start self-start'}`, children: [messages.map((message, index) => (_jsxs(View, { className: "flex-row items-end gap-2", children: [mine ? null : index === messages.length - 1 ? (_jsx(SenderAvatar, { sender: sender, name: name, skipMark: props.skipMark })) : (_jsx(View, { className: "w-8" })), _jsxs(View, { className: `shrink gap-2 ${mine ? 'items-end' : 'items-start'}`, children: [message.attachments.map((attachment) => (_jsx(Attachment, { attachment: attachment, words: words, Icon: props.Icon }, attachment.url))), message.text ? _jsx(Bubble, { mine: mine, text: message.text }) : null, props.choices && props.question?.message.id === message.id ? (_jsx(ChoiceRow, { question: props.question, choices: props.choices })) : null] })] }, message.id))), _jsx(Line, { className: `px-1 text-xs text-ink-secondary ${mine ? '' : 'ml-10'}`, children: `${name} · ${words.messageTime(sentAt)}` })] }));
+}
+function ChoiceRow({ question, choices }) {
+    return (_jsx(Choices, { items: question.items, question: question.message.text, sending: choices.sending, holding: choices.holding ?? false, failed: choices.failed === question.message.id, words: choices.words, onChoose: (answer) => {
+            choices.onChoose(question.message, answer);
+        } }));
 }
 // A failed line is a button to send it again, and its note is announced.
 const BUTTON_ROLE = 'button';
 const ALERT_ROLE = 'alert';
-function Unsent({ message, words, onRetry, Icon, }) {
+/** The member's line while it is on its way, or after it failed, with its retry. */
+export function Unsent({ message, words, onRetry, Icon, holding, }) {
     const failed = message.delivery === 'failed';
-    return (_jsxs(Pressable, { ...(failed ? { role: BUTTON_ROLE } : {}), disabled: !failed, onPress: () => {
+    return (_jsxs(Pressable, { ...(failed ? { role: BUTTON_ROLE } : {}), disabled: !failed || holding, onPress: () => {
             onRetry(message.id);
         }, className: `max-w-[82%] items-end gap-1 self-end ${failed ? '' : 'opacity-70'}`, children: [message.file ? _jsx(PickedPreview, { picked: message.file, words: words, Icon: Icon }) : null, message.text ? _jsx(Bubble, { mine: true, text: message.text }) : null, _jsx(Line, { ...(failed ? { role: ALERT_ROLE } : {}), className: `px-1 text-xs ${failed ? 'text-error-ink' : 'text-ink-secondary'}`, children: `${words.you} · ${failed ? words.notSent : words.sending}` })] }));
 }

package/chat/ui/index.d.ts

@@ -2,4 +2,3 @@ export { Conversation, type ConversationProps, type LoadState } from './Conversa
 export { Bubble, type BubbleProps } from './Bubble.tsx';
 export type { ChatIcon, ChatIconName, ChatWords } from './parts.ts';
 export { Choices, CodeStep, EmailStep, NameStep, Pill, SkipTyping, WelcomeChoice, type PillProps, type WelcomeWords, } from './Welcome.tsx';
-export { MedicationCheck, STOPPED_REASON_MAX_LENGTH, type CheckInWords, type MedicationAnswer, type MedicationCheckProps, } from './CheckIn.tsx';

package/chat/ui/index.js

@@ -1,4 +1,3 @@
 export { Conversation } from "./Conversation.js";
 export { Bubble } from "./Bubble.js";
 export { Choices, CodeStep, EmailStep, NameStep, Pill, SkipTyping, WelcomeChoice, } from "./Welcome.js";
-export { MedicationCheck, STOPPED_REASON_MAX_LENGTH, } from "./CheckIn.js";

package/chat/ui/parts.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 /** The icons the chat draws, from the brand's interface icons, which each app already draws. */
-export type ChatIconName = 'attach' | 'arrow-right' | 'file' | 'close' | 'thumbs-up' | 'repeat' | 'copy-plus';
+export type ChatIconName = 'attach' | 'arrow-right' | 'file' | 'close';
 export interface ChatIconProps {
     name: ChatIconName;
     color: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joinskips/brand",
-  "version": "9.0.0-develop.148",
+  "version": "9.0.0-develop.149",
   "description": "Skips design tokens, Onest, logos, favicons, interface icons, member pictures and app icons.",
   "license": "UNLICENSED",
   "homepage": "https://brand.joinskips.com",
@@ -25,6 +25,14 @@
       "types": "./chat/helpers/index.d.ts",
       "default": "./chat/helpers/index.js"
     },
+    "./chat/chat": {
+      "types": "./chat/chat/index.d.ts",
+      "default": "./chat/chat/index.js"
+    },
+    "./chat/connection": {
+      "types": "./chat/chat/connection.d.ts",
+      "default": "./chat/chat/connection.js"
+    },
     "./ui": {
       "types": "./ui/index.d.ts",
       "default": "./ui/index.js"

package/chat/ui/CheckIn.d.ts

@@ -1,25 +0,0 @@
-import { type ChatIcon } from './parts.ts';
-/** What a person says about one of their current medications. */
-export type MedicationAnswer = 'taking' | 'refill' | 'reorder' | 'stopped';
-/** Every word the medication check-in shows, which the app passes in. */
-export interface CheckInWords {
-    taking: string;
-    refill: string;
-    reorder: string;
-    stopped: string;
-    whyStopped: string;
-}
-export declare const STOPPED_REASON_MAX_LENGTH = 500;
-export interface MedicationCheckProps {
-    name: string;
-    directions: string;
-    refillable: boolean;
-    answer: MedicationAnswer | null;
-    reason: string;
-    words: CheckInWords;
-    Icon: ChatIcon;
-    onAnswer: (answer: MedicationAnswer) => void;
-    onReason: (reason: string) => void;
-}
-/** One current medication in the check-in: still taking, a refill or re-order, or stopped and why. */
-export declare function MedicationCheck({ name, directions, refillable, answer, reason, words, Icon, onAnswer, onReason, }: MedicationCheckProps): import("react").JSX.Element;

package/chat/ui/CheckIn.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pressable, Text, TextInput, View } from 'react-native';
-import { useColor } from "./parts.js";
-export const STOPPED_REASON_MAX_LENGTH = 500;
-const ICONS = {
-    taking: 'thumbs-up',
-    refill: 'repeat',
-    reorder: 'copy-plus',
-    stopped: 'close',
-};
-const ICON_SIZE = 24;
-/** One current medication in the check-in: still taking, a refill or re-order, or stopped and why. */
-export function MedicationCheck({ name, directions, refillable, answer, reason, words, Icon, onAnswer, onReason, }) {
-    const ink = useColor('ink');
-    const accentInk = useColor('accent-ink');
-    const placeholder = useColor('ink-placeholder');
-    const answers = ['taking', refillable ? 'refill' : 'reorder', 'stopped'];
-    return (_jsxs(View, { className: "w-80 max-w-full gap-3.5 rounded-[20px] border border-line-subtle bg-surface p-4", children: [_jsxs(View, { className: "gap-0.5", children: [_jsx(Text, { className: "font-ui text-md font-semibold text-ink", children: name }), _jsx(Text, { className: "font-ui text-sm text-ink-secondary", children: directions })] }), _jsx(View, { role: "radiogroup", accessibilityLabel: name, className: "flex-row", children: answers.map((each) => {
-                    const picked = answer === each;
-                    return (_jsxs(Pressable, { role: "radio", "aria-checked": picked, accessibilityLabel: words[each], onPress: () => {
-                            onAnswer(each);
-                        }, className: "flex-1 items-center gap-1.5", children: [_jsx(View, { className: `h-[52px] w-[52px] items-center justify-center rounded-pill border ${picked ? 'border-accent bg-accent' : 'border-line-control bg-surface'}`, children: _jsx(Icon, { name: ICONS[each], color: picked ? accentInk : ink, size: ICON_SIZE }) }), _jsx(Text, { className: "text-center font-ui text-xs font-semibold text-ink", children: words[each] })] }, each));
-                }) }), answer === 'stopped' ? (_jsx(TextInput, { value: reason, onChangeText: onReason, accessibilityLabel: words.whyStopped, placeholder: words.whyStopped, placeholderTextColor: placeholder, multiline: true, maxLength: STOPPED_REASON_MAX_LENGTH, className: "min-h-20 rounded-control border border-line-control bg-surface px-3 py-2 font-ui text-md text-ink" })) : null] }));
-}