@optiaxiom/proteus 0.3.0 → 1.1.0

package/dist/esm/proteus-question/ProteusQuestion.js

@@ -1,405 +1,329 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { IconArrowRight, IconPen } from '@optiaxiom/icons';
-import { Group, Text, Button, Box, Checkbox } from '@optiaxiom/react';
-import { InlineInput } from '@optiaxiom/react/unstable';
-import * as RovingFocus from '@radix-ui/react-roving-focus';
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { IconAngleLeft } from '../icons/IconAngleLeft.js';
-import { IconAngleRight } from '../icons/IconAngleRight.js';
-import { IconX } from '../icons/IconX.js';
-import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
-import { addon, choice, choiceGroup, question } from './ProteusQuestion-css.js';
-
+import { useProteusDocumentContext } from "../proteus-document/ProteusDocumentContext.js";
+import { IconAngleLeft } from "../icons/IconAngleLeft.js";
+import { IconAngleRight } from "../icons/IconAngleRight.js";
+import { IconX } from "../icons/IconX.js";
+import { addon, choice, choiceGroup, question } from "./ProteusQuestion-css.js";
+import { Box, Button, Checkbox, Group, Text } from "@optiaxiom/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { InlineInput } from "@optiaxiom/react/unstable";
+import { IconArrowRight, IconPen } from "@optiaxiom/icons";
+import * as RovingFocus from "@radix-ui/react-roving-focus";
+//#region src/proteus-question/ProteusQuestion.tsx
 function ProteusQuestion({ questions }) {
-  const { onEvent, onTrack } = useProteusDocumentContext(
-    "@optiaxiom/proteus/ProteusQuestion"
-  );
-  const [answers, setAnswers] = useState([]);
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const value = answers[currentIndex];
-  const valid = Array.isArray(value) && value.length > 0 && value.every(Boolean);
-  const goBack = useCallback(() => {
-    onTrack?.("Ask User Question Back", {
-      fromIndex: String(currentIndex),
-      toIndex: String(currentIndex - 1)
-    });
-    setCurrentIndex((i) => i - 1);
-  }, [currentIndex, onTrack]);
-  const onDismiss = useCallback(() => {
-    onTrack?.("Ask User Question Dismissed", {
-      questionIndex: String(currentIndex)
-    });
-    void onEvent({
-      message: "[User declined to answer the question]"
-    });
-  }, [currentIndex, onEvent, onTrack]);
-  const questionRef = useRef(null);
-  const lastIndexRef = useRef(currentIndex);
-  useEffect(() => {
-    if (lastIndexRef.current !== currentIndex) {
-      questionRef.current?.animate(
-        [
-          {
-            opacity: 0,
-            translate: currentIndex > lastIndexRef.current ? "8px" : "-8px"
-          },
-          {
-            opacity: 1,
-            translate: "0px"
-          }
-        ],
-        {
-          duration: 150
-        }
-      );
-      lastIndexRef.current = currentIndex;
-    }
-    const item = questionRef.current?.querySelector("[data-selected]") ?? questionRef.current?.querySelector("[tabindex]");
-    item?.focus();
-  }, [currentIndex]);
-  const otherInputRef = useRef(null);
-  const otherItemRef = useRef(null);
-  if (currentIndex >= questions.length) {
-    return null;
-  }
-  const { options, question: question$1, type } = questions[currentIndex];
-  const isLast = currentIndex === questions.length - 1;
-  const otherValue = value?.find((v) => !options.includes(v));
-  const otherChecked = otherValue !== void 0;
-  const onComplete = () => {
-    const answeredCount = answers.filter(
-      (answer) => Array.isArray(answer) && answer.length > 0
-    ).length;
-    onTrack?.("Ask User Question Submitted", {
-      answeredCount: String(answeredCount),
-      skippedCount: String(questions.length - answeredCount),
-      totalQuestions: String(questions.length)
-    });
-    return onEvent({
-      message: answers.map(
-        (value2, index) => `Q: ${questions[index].question}
-A: ${value2 || "[Not specified]"}`
-      ).join("\n\n")
-    });
-  };
-  const onValueChange = (value2) => {
-    answers[currentIndex] = value2;
-    setAnswers([...answers]);
-  };
-  const onSkip = () => {
-    onTrack?.("Ask User Question Skipped", {
-      questionIndex: String(currentIndex)
-    });
-    answers[currentIndex] = null;
-    setAnswers([...answers]);
-    if (isLast) {
-      void onComplete();
-    } else {
-      setCurrentIndex((i) => i + 1);
-    }
-  };
-  const onSubmit = () => {
-    const currentValue = answers[currentIndex];
-    if (currentValue) {
-      const firstIndex = options.indexOf(currentValue[0]);
-      onTrack?.("Ask User Question Option Selected", {
-        isCustomText: String(currentValue.some((v) => !options.includes(v))),
-        optionIndex: String(firstIndex),
-        questionIndex: String(currentIndex)
-      });
-    }
-    if (isLast) {
-      void onComplete();
-    } else {
-      setCurrentIndex((i) => i + 1);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Group,
-    {
-      onKeyDown: (event) => {
-        if (event.key === "Escape") {
-          event.preventDefault();
-          if (type === "multi_select" && valid) {
-            onValueChange(null);
-          } else {
-            onSkip();
-          }
-        }
-        if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && !(event.target instanceof HTMLInputElement) && !event.target.isContentEditable) {
-          event.preventDefault();
-          if (event.key === "ArrowLeft" && currentIndex > 0) {
-            goBack();
-          } else if (event.key === "ArrowRight" && !isLast) {
-            setCurrentIndex((i) => i + 1);
-          }
-        }
-      },
-      tabIndex: -1,
-      ...question(),
-      children: [
-        /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "16", children: [
-          /* @__PURE__ */ jsxs(Group, { pl: "16", children: [
-            /* @__PURE__ */ jsx(Text, { flex: "1", fontWeight: "500", children: question$1 }),
-            /* @__PURE__ */ jsxs(Group, { gap: "6", children: [
-              questions.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    appearance: "subtle",
-                    "aria-label": "Previous",
-                    disabled: currentIndex === 0,
-                    icon: /* @__PURE__ */ jsx(IconAngleLeft, {}),
-                    onClick: (event) => {
-                      event.preventDefault();
-                      goBack();
-                    },
-                    size: "sm"
-                  }
-                ),
-                /* @__PURE__ */ jsxs(Text, { color: "fg.tertiary", fontSize: "sm", children: [
-                  currentIndex + 1,
-                  " of ",
-                  questions.length
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    appearance: "subtle",
-                    "aria-label": "Next",
-                    disabled: isLast,
-                    icon: /* @__PURE__ */ jsx(IconAngleRight, {}),
-                    onClick: (event) => {
-                      event.preventDefault();
-                      setCurrentIndex((i) => i + 1);
-                    },
-                    size: "sm"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  appearance: "subtle",
-                  "aria-label": "Dismiss",
-                  icon: /* @__PURE__ */ jsx(IconX, {}),
-                  onClick: (event) => {
-                    event.preventDefault();
-                    onDismiss();
-                  },
-                  size: "sm"
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(RovingFocus.Root, { asChild: true, loop: true, orientation: "vertical", ref: questionRef, children: /* @__PURE__ */ jsxs(
-            Group,
-            {
-              role: type === "single_select" ? "radiogroup" : "listbox",
-              ...choiceGroup(),
-              children: [
-                options.map((option, index) => {
-                  const checked = type === "single_select" ? value?.[0] === option : value?.includes(option);
-                  const disabled = type === "single_select" && otherChecked && !!otherValue;
-                  return /* @__PURE__ */ jsx(RovingFocus.Item, { asChild: true, children: /* @__PURE__ */ jsx(
-                    Box,
-                    {
-                      "aria-checked": type === "single_select" ? checked : void 0,
-                      "data-disabled": disabled ? "" : void 0,
-                      "data-selected": checked && type === "single_select" ? "" : void 0,
-                      onClick: () => {
-                        if (type === "single_select") {
-                          onValueChange([option]);
-                          onSubmit();
-                        } else {
-                          const current = value ?? [];
-                          onValueChange(
-                            checked ? current.filter((v) => v !== option) : [...current, option]
-                          );
-                        }
-                      },
-                      onFocus: () => {
-                        if (type === "single_select") {
-                          onValueChange([option]);
-                        }
-                      },
-                      onKeyDown: (event) => {
-                        if (type === "single_select" && event.key === "Enter") {
-                          event.preventDefault();
-                          onSubmit();
-                        } else if (type === "multi_select" && (event.key === "Enter" || event.key === " ")) {
-                          event.preventDefault();
-                          const current = value ?? [];
-                          onValueChange(
-                            checked ? current.filter((v) => v !== option) : [...current, option]
-                          );
-                        }
-                      },
-                      role: type === "single_select" ? "radio" : "option",
-                      tabIndex: 0,
-                      ...choice({ cursor: "pointer" }),
-                      children: /* @__PURE__ */ jsxs(Group, { gap: "12", children: [
-                        type === "single_select" ? /* @__PURE__ */ jsx(Box, { ...addon(), children: index + 1 }) : /* @__PURE__ */ jsx(
-                          Checkbox,
-                          {
-                            checked,
-                            hidden: true,
-                            pointerEvents: "none",
-                            tabIndex: -1
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(Group, { flex: "1", flexDirection: "column", gap: "2", children: /* @__PURE__ */ jsx(Text, { children: option }) }),
-                        type === "single_select" && checked && /* @__PURE__ */ jsx(
-                          Box,
-                          {
-                            asChild: true,
-                            color: "fg.tertiary",
-                            h: "24",
-                            ml: "auto",
-                            w: "24",
-                            children: /* @__PURE__ */ jsx(IconArrowRight, {})
-                          }
-                        )
-                      ] })
-                    }
-                  ) }, option);
-                }),
-                /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    "aria-label": "Something else",
-                    "data-selected": otherChecked ? "" : void 0,
-                    role: "group",
-                    ...choice({ cursor: "text" }),
-                    children: /* @__PURE__ */ jsxs(Group, { gap: "12", children: [
-                      type === "single_select" ? /* @__PURE__ */ jsx(Box, { ...addon({ cursor: "pointer" }), children: /* @__PURE__ */ jsx(IconPen, {}) }) : /* @__PURE__ */ jsx(
-                        Checkbox,
-                        {
-                          checked: otherChecked,
-                          hidden: true,
-                          pointerEvents: "none",
-                          tabIndex: -1
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(RovingFocus.Item, { asChild: true, children: /* @__PURE__ */ jsx(
-                        Group,
-                        {
-                          flex: "1",
-                          flexDirection: "column",
-                          gap: "2",
-                          onFocus: () => {
-                            if (type === "single_select" && !otherValue) {
-                              onValueChange([""]);
-                            }
-                            otherInputRef.current?.focus();
-                          },
-                          ref: otherItemRef,
-                          children: /* @__PURE__ */ jsx(
-                            InlineInput,
-                            {
-                              label: "Something else",
-                              onKeyDown: (event) => {
-                                if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-                                  event.preventDefault();
-                                  otherItemRef.current?.focus();
-                                  otherItemRef.current?.dispatchEvent(
-                                    new KeyboardEvent("keydown", {
-                                      bubbles: true,
-                                      key: event.key
-                                    })
-                                  );
-                                } else if (event.key === "Enter") {
-                                  onSubmit();
-                                }
-                              },
-                              onValueChange: (text) => {
-                                if (type === "single_select") {
-                                  onValueChange([text]);
-                                } else {
-                                  const current = value ?? [];
-                                  onValueChange([
-                                    ...current.filter((v) => options.includes(v)),
-                                    ...text ? [text] : []
-                                  ]);
-                                }
-                              },
-                              ref: otherInputRef,
-                              value: otherValue ?? ""
-                            }
-                          )
-                        }
-                      ) }),
-                      type === "single_select" && /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          appearance: otherValue ? "primary-opal" : "default",
-                          "aria-label": otherValue && (isLast ? "Submit" : "Next"),
-                          icon: otherValue && /* @__PURE__ */ jsx(IconArrowRight, {}),
-                          ml: "auto",
-                          onClick: (event) => {
-                            event.preventDefault();
-                            if (otherValue) {
-                              onSubmit();
-                            } else {
-                              onSkip();
-                            }
-                          },
-                          children: !otherValue && "Skip"
-                        }
-                      )
-                    ] })
-                  },
-                  "other"
-                )
-              ]
-            }
-          ) })
-        ] }),
-        type === "multi_select" && /* @__PURE__ */ jsxs(
-          Group,
-          {
-            borderColor: "border.secondary",
-            borderT: "1",
-            gap: "8",
-            pt: "16",
-            px: "16",
-            children: [
-              /* @__PURE__ */ jsxs(Text, { children: [
-                value?.length || 0,
-                " selected"
-              ] }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  ml: "auto",
-                  onClick: (event) => {
-                    event.preventDefault();
-                    onSkip();
-                  },
-                  children: "Skip"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  appearance: valid ? "primary-opal" : "default",
-                  "aria-label": isLast ? "Submit" : "Next",
-                  disabled: !valid,
-                  icon: /* @__PURE__ */ jsx(IconArrowRight, {}),
-                  onClick: (event) => {
-                    event.preventDefault();
-                    onSubmit();
-                  }
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
+	const { onEvent, onTrack } = useProteusDocumentContext("@optiaxiom/proteus/ProteusQuestion");
+	const [answers, setAnswers] = useState([]);
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const value = answers[currentIndex];
+	const valid = Array.isArray(value) && value.length > 0 && value.every(Boolean);
+	const goBack = useCallback(() => {
+		onTrack?.("Ask User Question Back", {
+			fromIndex: String(currentIndex),
+			toIndex: String(currentIndex - 1)
+		});
+		setCurrentIndex((i) => i - 1);
+	}, [currentIndex, onTrack]);
+	const onDismiss = useCallback(() => {
+		onTrack?.("Ask User Question Dismissed", { questionIndex: String(currentIndex) });
+		onEvent({ message: "[User declined to answer the question]" });
+	}, [
+		currentIndex,
+		onEvent,
+		onTrack
+	]);
+	const questionRef = useRef(null);
+	const lastIndexRef = useRef(currentIndex);
+	useEffect(() => {
+		if (lastIndexRef.current !== currentIndex) {
+			questionRef.current?.animate([{
+				opacity: 0,
+				translate: currentIndex > lastIndexRef.current ? "8px" : "-8px"
+			}, {
+				opacity: 1,
+				translate: "0px"
+			}], { duration: 150 });
+			lastIndexRef.current = currentIndex;
+		}
+		(questionRef.current?.querySelector("[data-selected]") ?? questionRef.current?.querySelector("[tabindex]"))?.focus();
+	}, [currentIndex]);
+	const otherInputRef = useRef(null);
+	const otherItemRef = useRef(null);
+	if (currentIndex >= questions.length) return null;
+	const { options, question: question$1, type } = questions[currentIndex];
+	const isLast = currentIndex === questions.length - 1;
+	const otherValue = value?.find((v) => !options.includes(v));
+	const otherChecked = otherValue !== void 0;
+	const onComplete = () => {
+		const answeredCount = answers.filter((answer) => Array.isArray(answer) && answer.length > 0).length;
+		onTrack?.("Ask User Question Submitted", {
+			answeredCount: String(answeredCount),
+			skippedCount: String(questions.length - answeredCount),
+			totalQuestions: String(questions.length)
+		});
+		return onEvent({ message: answers.map((value, index) => `Q: ${questions[index].question}\nA: ${value || "[Not specified]"}`).join("\n\n") });
+	};
+	const onValueChange = (value) => {
+		answers[currentIndex] = value;
+		setAnswers([...answers]);
+	};
+	const onSkip = () => {
+		onTrack?.("Ask User Question Skipped", { questionIndex: String(currentIndex) });
+		answers[currentIndex] = null;
+		setAnswers([...answers]);
+		if (isLast) onComplete();
+		else setCurrentIndex((i) => i + 1);
+	};
+	const onSubmit = () => {
+		const currentValue = answers[currentIndex];
+		if (currentValue) {
+			const firstIndex = options.indexOf(currentValue[0]);
+			onTrack?.("Ask User Question Option Selected", {
+				isCustomText: String(currentValue.some((v) => !options.includes(v))),
+				optionIndex: String(firstIndex),
+				questionIndex: String(currentIndex)
+			});
+		}
+		if (isLast) onComplete();
+		else setCurrentIndex((i) => i + 1);
+	};
+	return /* @__PURE__ */ jsxs(Group, {
+		onKeyDown: (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				if (type === "multi_select" && valid) onValueChange(null);
+				else onSkip();
+			}
+			if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && !(event.target instanceof HTMLInputElement) && !event.target.isContentEditable) {
+				event.preventDefault();
+				if (event.key === "ArrowLeft" && currentIndex > 0) goBack();
+				else if (event.key === "ArrowRight" && !isLast) setCurrentIndex((i) => i + 1);
+			}
+		},
+		tabIndex: -1,
+		...question(),
+		children: [/* @__PURE__ */ jsxs(Group, {
+			flexDirection: "column",
+			gap: "16",
+			children: [/* @__PURE__ */ jsxs(Group, {
+				pl: "16",
+				children: [/* @__PURE__ */ jsx(Text, {
+					flex: "1",
+					fontWeight: "500",
+					children: question$1
+				}), /* @__PURE__ */ jsxs(Group, {
+					gap: "6",
+					children: [questions.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(Button, {
+							appearance: "subtle",
+							"aria-label": "Previous",
+							disabled: currentIndex === 0,
+							icon: /* @__PURE__ */ jsx(IconAngleLeft, {}),
+							onClick: (event) => {
+								event.preventDefault();
+								goBack();
+							},
+							size: "sm"
+						}),
+						/* @__PURE__ */ jsxs(Text, {
+							color: "fg.tertiary",
+							fontSize: "sm",
+							children: [
+								currentIndex + 1,
+								" of ",
+								questions.length
+							]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							appearance: "subtle",
+							"aria-label": "Next",
+							disabled: isLast,
+							icon: /* @__PURE__ */ jsx(IconAngleRight, {}),
+							onClick: (event) => {
+								event.preventDefault();
+								setCurrentIndex((i) => i + 1);
+							},
+							size: "sm"
+						})
+					] }), /* @__PURE__ */ jsx(Button, {
+						appearance: "subtle",
+						"aria-label": "Dismiss",
+						icon: /* @__PURE__ */ jsx(IconX, {}),
+						onClick: (event) => {
+							event.preventDefault();
+							onDismiss();
+						},
+						size: "sm"
+					})]
+				})]
+			}), /* @__PURE__ */ jsx(RovingFocus.Root, {
+				asChild: true,
+				loop: true,
+				orientation: "vertical",
+				ref: questionRef,
+				children: /* @__PURE__ */ jsxs(Group, {
+					role: type === "single_select" ? "radiogroup" : "listbox",
+					...choiceGroup(),
+					children: [options.map((option, index) => {
+						const checked = type === "single_select" ? value?.[0] === option : value?.includes(option);
+						const disabled = type === "single_select" && otherChecked && !!otherValue;
+						return /* @__PURE__ */ jsx(RovingFocus.Item, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Box, {
+								"aria-checked": type === "single_select" ? checked : void 0,
+								"data-disabled": disabled ? "" : void 0,
+								"data-selected": checked && type === "single_select" ? "" : void 0,
+								onClick: () => {
+									if (type === "single_select") {
+										onValueChange([option]);
+										onSubmit();
+									} else {
+										const current = value ?? [];
+										onValueChange(checked ? current.filter((v) => v !== option) : [...current, option]);
+									}
+								},
+								onFocus: () => {
+									if (type === "single_select") onValueChange([option]);
+								},
+								onKeyDown: (event) => {
+									if (type === "single_select" && event.key === "Enter") {
+										event.preventDefault();
+										onSubmit();
+									} else if (type === "multi_select" && (event.key === "Enter" || event.key === " ")) {
+										event.preventDefault();
+										const current = value ?? [];
+										onValueChange(checked ? current.filter((v) => v !== option) : [...current, option]);
+									}
+								},
+								role: type === "single_select" ? "radio" : "option",
+								tabIndex: 0,
+								...choice({ cursor: "pointer" }),
+								children: /* @__PURE__ */ jsxs(Group, {
+									gap: "12",
+									children: [
+										type === "single_select" ? /* @__PURE__ */ jsx(Box, {
+											...addon(),
+											children: index + 1
+										}) : /* @__PURE__ */ jsx(Checkbox, {
+											checked,
+											hidden: true,
+											pointerEvents: "none",
+											tabIndex: -1
+										}),
+										/* @__PURE__ */ jsx(Group, {
+											flex: "1",
+											flexDirection: "column",
+											gap: "2",
+											children: /* @__PURE__ */ jsx(Text, { children: option })
+										}),
+										type === "single_select" && checked && /* @__PURE__ */ jsx(Box, {
+											asChild: true,
+											color: "fg.tertiary",
+											h: "24",
+											ml: "auto",
+											w: "24",
+											children: /* @__PURE__ */ jsx(IconArrowRight, {})
+										})
+									]
+								})
+							})
+						}, option);
+					}), /* @__PURE__ */ jsx(Box, {
+						"aria-label": "Something else",
+						"data-selected": otherChecked ? "" : void 0,
+						role: "group",
+						...choice({ cursor: "text" }),
+						children: /* @__PURE__ */ jsxs(Group, {
+							gap: "12",
+							children: [
+								type === "single_select" ? /* @__PURE__ */ jsx(Box, {
+									...addon({ cursor: "pointer" }),
+									children: /* @__PURE__ */ jsx(IconPen, {})
+								}) : /* @__PURE__ */ jsx(Checkbox, {
+									checked: otherChecked,
+									hidden: true,
+									pointerEvents: "none",
+									tabIndex: -1
+								}),
+								/* @__PURE__ */ jsx(RovingFocus.Item, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx(Group, {
+										flex: "1",
+										flexDirection: "column",
+										gap: "2",
+										onFocus: () => {
+											if (type === "single_select" && !otherValue) onValueChange([""]);
+											otherInputRef.current?.focus();
+										},
+										ref: otherItemRef,
+										children: /* @__PURE__ */ jsx(InlineInput, {
+											label: "Something else",
+											onKeyDown: (event) => {
+												if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+													event.preventDefault();
+													otherItemRef.current?.focus();
+													otherItemRef.current?.dispatchEvent(new KeyboardEvent("keydown", {
+														bubbles: true,
+														key: event.key
+													}));
+												} else if (event.key === "Enter") onSubmit();
+											},
+											onValueChange: (text) => {
+												if (type === "single_select") onValueChange([text]);
+												else onValueChange([...(value ?? []).filter((v) => options.includes(v)), ...text ? [text] : []]);
+											},
+											ref: otherInputRef,
+											value: otherValue ?? ""
+										})
+									})
+								}),
+								type === "single_select" && /* @__PURE__ */ jsx(Button, {
+									appearance: otherValue ? "primary-opal" : "default",
+									"aria-label": otherValue && (isLast ? "Submit" : "Next"),
+									icon: otherValue && /* @__PURE__ */ jsx(IconArrowRight, {}),
+									ml: "auto",
+									onClick: (event) => {
+										event.preventDefault();
+										if (otherValue) onSubmit();
+										else onSkip();
+									},
+									children: !otherValue && "Skip"
+								})
+							]
+						})
+					}, "other")]
+				})
+			})]
+		}), type === "multi_select" && /* @__PURE__ */ jsxs(Group, {
+			borderColor: "border.secondary",
+			borderT: "1",
+			gap: "8",
+			pt: "16",
+			px: "16",
+			children: [
+				/* @__PURE__ */ jsxs(Text, { children: [value?.length || 0, " selected"] }),
+				/* @__PURE__ */ jsx(Button, {
+					ml: "auto",
+					onClick: (event) => {
+						event.preventDefault();
+						onSkip();
+					},
+					children: "Skip"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					appearance: valid ? "primary-opal" : "default",
+					"aria-label": isLast ? "Submit" : "Next",
+					disabled: !valid,
+					icon: /* @__PURE__ */ jsx(IconArrowRight, {}),
+					onClick: (event) => {
+						event.preventDefault();
+						onSubmit();
+					}
+				})
+			]
+		})]
+	});
 }
 ProteusQuestion.displayName = "@optiaxiom/proteus/ProteusQuestion";
-
+//#endregion
 export { ProteusQuestion };