@optiaxiom/proteus 0.3.0 → 1.1.0

package/dist/esm/proteus-image-carousel/ProteusImageCarousel.js

@@ -1,167 +1,155 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Group, Box, Text, Menu, MenuTrigger, MenuContent, Button } from '@optiaxiom/react';
-import useEmblaCarousel from 'embla-carousel-react';
-import { useState, useCallback, useEffect } from 'react';
-import { IconAngleLeft } from '../icons/IconAngleLeft.js';
-import { IconAngleRight } from '../icons/IconAngleRight.js';
-import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
-import { ProteusImage } from '../proteus-image/ProteusImage.js';
-import { slide, slideContainer, viewport, navButton, content, thumbnail, carousel } from './ProteusImageCarousel-css.js';
-
-function ProteusImageCarousel({
-  images,
-  title
-}) {
-  const { onEvent } = useProteusDocumentContext(
-    "@optiaxiom/proteus/ProteusImageCarousel"
-  );
-  const [emblaMainRef, emblaMainApi] = useEmblaCarousel({
-    loop: false,
-    watchDrag: false
-  });
-  const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel({
-    containScroll: "keepSnaps",
-    dragFree: true
-  });
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [canScrollPrev, setCanScrollPrev] = useState(false);
-  const [canScrollNext, setCanScrollNext] = useState(false);
-  const onSelect = useCallback(() => {
-    if (!emblaMainApi || !emblaThumbsApi)
-      return;
-    setSelectedIndex(emblaMainApi.selectedScrollSnap());
-    emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap());
-    setCanScrollPrev(emblaMainApi.canScrollPrev());
-    setCanScrollNext(emblaMainApi.canScrollNext());
-  }, [emblaMainApi, emblaThumbsApi]);
-  useEffect(() => {
-    if (!emblaMainApi)
-      return;
-    onSelect();
-    emblaMainApi.on("select", onSelect).on("reInit", onSelect);
-  }, [emblaMainApi, onSelect]);
-  if (!images.length) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    Group,
-    {
-      "aria-label": title ?? "Image carousel",
-      "aria-roledescription": "carousel",
-      onKeyDownCapture: (event) => {
-        if (event.target instanceof HTMLInputElement)
-          return;
-        if (event.key === "ArrowLeft") {
-          event.preventDefault();
-          emblaMainApi?.scrollPrev();
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault();
-          emblaMainApi?.scrollNext();
-        }
-      },
-      role: "region",
-      tabIndex: 0,
-      ...carousel(),
-      children: [
-        /* @__PURE__ */ jsxs(Box, { ...content(), children: [
-          /* @__PURE__ */ jsx(Box, { ...viewport(), ref: emblaMainRef, children: /* @__PURE__ */ jsx(Group, { ...slideContainer(), children: images.map((image, index) => /* @__PURE__ */ jsx(
-            ProteusImage,
-            {
-              alt: image.alt,
-              src: image.src,
-              ...slide()
-            },
-            index
-          )) }) }),
-          canScrollPrev && /* @__PURE__ */ jsx(
-            Box,
-            {
-              "aria-label": "Previous image",
-              asChild: true,
-              onClick: () => emblaMainApi?.scrollPrev(),
-              ...navButton({ side: "left" }),
-              children: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconAngleLeft, {}) })
-            }
-          ),
-          canScrollNext && /* @__PURE__ */ jsx(
-            Box,
-            {
-              "aria-label": "Next image",
-              asChild: true,
-              onClick: () => emblaMainApi?.scrollNext(),
-              ...navButton({ side: "right" }),
-              children: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconAngleRight, {}) })
-            }
-          )
-        ] }),
-        images.length > 1 && /* @__PURE__ */ jsx(Box, { overflow: "hidden", ref: emblaThumbsRef, children: /* @__PURE__ */ jsx(Group, { gap: "12", children: images.map((image, index) => /* @__PURE__ */ jsx(
-          Box,
-          {
-            onClick: () => emblaMainApi?.scrollTo(index),
-            ...thumbnail({
-              selected: index === selectedIndex
-            }),
-            children: /* @__PURE__ */ jsx(Box, { asChild: true, objectFit: "cover", size: "full", children: /* @__PURE__ */ jsx("img", { alt: image.alt, src: image.thumb ?? image.src }) })
-          },
-          index
-        )) }) }),
-        /* @__PURE__ */ jsxs(Group, { mt: "4", children: [
-          images.length > 1 && /* @__PURE__ */ jsxs(
-            Text,
-            {
-              bg: "bg.secondary",
-              color: "fg.default",
-              fontSize: "sm",
-              fontWeight: "500",
-              px: "8",
-              py: "2",
-              rounded: "full",
-              children: [
-                selectedIndex + 1,
-                " / ",
-                images.length
-              ]
-            }
-          ),
-          images.length > 1 ? /* @__PURE__ */ jsxs(
-            Menu,
-            {
-              options: [
-                {
-                  execute: () => onEvent({
-                    action: "download",
-                    url: images[selectedIndex].src
-                  }),
-                  label: "Download this image"
-                },
-                {
-                  execute: () => onEvent({
-                    action: "download",
-                    url: images.map((image) => image.src)
-                  }),
-                  label: "Download all images"
-                }
-              ],
-              children: [
-                /* @__PURE__ */ jsx(MenuTrigger, { appearance: "primary", ml: "auto", children: "Download" }),
-                /* @__PURE__ */ jsx(MenuContent, { align: "end" })
-              ]
-            }
-          ) : /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "primary",
-              ml: "auto",
-              onClick: () => onEvent({ action: "download", url: images[0].src }),
-              children: "Download"
-            }
-          )
-        ] })
-      ]
-    }
-  );
+import { useProteusDocumentContext } from "../proteus-document/ProteusDocumentContext.js";
+import { IconAngleLeft } from "../icons/IconAngleLeft.js";
+import { IconAngleRight } from "../icons/IconAngleRight.js";
+import { ProteusImage } from "../proteus-image/ProteusImage.js";
+import { carousel, content, navButton, slide, slideContainer, thumbnail, viewport } from "./ProteusImageCarousel-css.js";
+import { Box, Button, Group, Menu, MenuContent, MenuTrigger, Text } from "@optiaxiom/react";
+import { useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/proteus-image-carousel/ProteusImageCarousel.tsx
+function ProteusImageCarousel({ images, title }) {
+	const { onEvent } = useProteusDocumentContext("@optiaxiom/proteus/ProteusImageCarousel");
+	const [emblaMainRef, emblaMainApi] = useEmblaCarousel({
+		loop: false,
+		watchDrag: false
+	});
+	const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel({
+		containScroll: "keepSnaps",
+		dragFree: true
+	});
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [canScrollPrev, setCanScrollPrev] = useState(false);
+	const [canScrollNext, setCanScrollNext] = useState(false);
+	const onSelect = useCallback(() => {
+		if (!emblaMainApi || !emblaThumbsApi) return;
+		setSelectedIndex(emblaMainApi.selectedScrollSnap());
+		emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap());
+		setCanScrollPrev(emblaMainApi.canScrollPrev());
+		setCanScrollNext(emblaMainApi.canScrollNext());
+	}, [emblaMainApi, emblaThumbsApi]);
+	useEffect(() => {
+		if (!emblaMainApi) return;
+		onSelect();
+		emblaMainApi.on("select", onSelect).on("reInit", onSelect);
+	}, [emblaMainApi, onSelect]);
+	if (!images.length) return null;
+	return /* @__PURE__ */ jsxs(Group, {
+		"aria-label": title ?? "Image carousel",
+		"aria-roledescription": "carousel",
+		onKeyDownCapture: (event) => {
+			if (event.target instanceof HTMLInputElement) return;
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				emblaMainApi?.scrollPrev();
+			} else if (event.key === "ArrowRight") {
+				event.preventDefault();
+				emblaMainApi?.scrollNext();
+			}
+		},
+		role: "region",
+		tabIndex: 0,
+		...carousel(),
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				...content(),
+				children: [
+					/* @__PURE__ */ jsx(Box, {
+						...viewport(),
+						ref: emblaMainRef,
+						children: /* @__PURE__ */ jsx(Group, {
+							...slideContainer(),
+							children: images.map((image, index) => /* @__PURE__ */ jsx(ProteusImage, {
+								alt: image.alt,
+								src: image.src,
+								...slide()
+							}, index))
+						})
+					}),
+					canScrollPrev && /* @__PURE__ */ jsx(Box, {
+						"aria-label": "Previous image",
+						asChild: true,
+						onClick: () => emblaMainApi?.scrollPrev(),
+						...navButton({ side: "left" }),
+						children: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconAngleLeft, {}) })
+					}),
+					canScrollNext && /* @__PURE__ */ jsx(Box, {
+						"aria-label": "Next image",
+						asChild: true,
+						onClick: () => emblaMainApi?.scrollNext(),
+						...navButton({ side: "right" }),
+						children: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconAngleRight, {}) })
+					})
+				]
+			}),
+			images.length > 1 && /* @__PURE__ */ jsx(Box, {
+				overflow: "hidden",
+				ref: emblaThumbsRef,
+				children: /* @__PURE__ */ jsx(Group, {
+					gap: "12",
+					children: images.map((image, index) => /* @__PURE__ */ jsx(Box, {
+						onClick: () => emblaMainApi?.scrollTo(index),
+						...thumbnail({ selected: index === selectedIndex }),
+						children: /* @__PURE__ */ jsx(Box, {
+							asChild: true,
+							objectFit: "cover",
+							size: "full",
+							children: /* @__PURE__ */ jsx("img", {
+								alt: image.alt,
+								src: image.thumb ?? image.src
+							})
+						})
+					}, index))
+				})
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				mt: "4",
+				children: [images.length > 1 && /* @__PURE__ */ jsxs(Text, {
+					bg: "bg.secondary",
+					color: "fg.default",
+					fontSize: "sm",
+					fontWeight: "500",
+					px: "8",
+					py: "2",
+					rounded: "full",
+					children: [
+						selectedIndex + 1,
+						" / ",
+						images.length
+					]
+				}), images.length > 1 ? /* @__PURE__ */ jsxs(Menu, {
+					options: [{
+						execute: () => onEvent({
+							action: "download",
+							url: images[selectedIndex].src
+						}),
+						label: "Download this image"
+					}, {
+						execute: () => onEvent({
+							action: "download",
+							url: images.map((image) => image.src)
+						}),
+						label: "Download all images"
+					}],
+					children: [/* @__PURE__ */ jsx(MenuTrigger, {
+						appearance: "primary",
+						ml: "auto",
+						children: "Download"
+					}), /* @__PURE__ */ jsx(MenuContent, { align: "end" })]
+				}) : /* @__PURE__ */ jsx(Button, {
+					appearance: "primary",
+					ml: "auto",
+					onClick: () => onEvent({
+						action: "download",
+						url: images[0].src
+					}),
+					children: "Download"
+				})]
+			})
+		]
+	});
 }
 ProteusImageCarousel.displayName = "@optiaxiom/proteus/ProteusImageCarousel";
-
+//#endregion
 export { ProteusImageCarousel };

package/dist/esm/proteus-input/ProteusInput.js

@@ -1,32 +1,24 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { Input } from '@optiaxiom/react';
-import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
-import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
-import { useProteusValue } from '../use-proteus-value/useProteusValue.js';
-
+import { useProteusDocumentContext } from "../proteus-document/ProteusDocumentContext.js";
+import { useProteusDocumentPathContext } from "../proteus-document/ProteusDocumentPathContext.js";
+import { useProteusValue } from "../use-proteus-value/useProteusValue.js";
+import { Input } from "@optiaxiom/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/proteus-input/ProteusInput.tsx
 function ProteusInput(props) {
-  const { onDataChange, readOnly } = useProteusDocumentContext(
-    "@optiaxiom/proteus/ProteusInput"
-  );
-  const { path: parentPath } = useProteusDocumentPathContext(
-    "@optiaxiom/proteus/ProteusInput"
-  );
-  const value = useProteusValue({ path: props.name ?? "" });
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      ...props,
-      onValueChange: (value2) => {
-        if (props.name) {
-          onDataChange?.(`${parentPath}/${props.name}`, value2);
-        }
-      },
-      readOnly,
-      value: props.name ? String(value ?? "") : ""
-    }
-  );
+	const { onDataChange, readOnly } = useProteusDocumentContext("@optiaxiom/proteus/ProteusInput");
+	const { path: parentPath } = useProteusDocumentPathContext("@optiaxiom/proteus/ProteusInput");
+	const value = useProteusValue({ path: props.name ?? "" });
+	const writePath = props.name ? `${parentPath}/${props.name}` : parentPath;
+	return /* @__PURE__ */ jsx(Input, {
+		...props,
+		onValueChange: (value) => {
+			if (writePath) onDataChange?.(writePath, value);
+		},
+		readOnly,
+		value: String(value ?? "")
+	});
 }
 ProteusInput.displayName = "@optiaxiom/proteus/ProteusInput";
-
+//#endregion
 export { ProteusInput };

package/dist/esm/proteus-length/ProteusLength.js

@@ -0,0 +1,10 @@
+"use client";
+import { useProteusValue } from "../use-proteus-value/useProteusValue.js";
+//#region src/proteus-length/ProteusLength.tsx
+function ProteusLength({ path }) {
+	const value = useProteusValue({ path });
+	return Array.isArray(value) ? value.length : 0;
+}
+ProteusLength.displayName = "@optiaxiom/proteus/ProteusLength";
+//#endregion
+export { ProteusLength };

package/dist/esm/proteus-map/ProteusMap.js

@@ -1,36 +1,23 @@
 "use client";
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
-import { useProteusDocumentPathContext, ProteusDocumentPathProvider } from '../proteus-document/ProteusDocumentPathContext.js';
-import { useProteusValue } from '../use-proteus-value/useProteusValue.js';
-
+import { useProteusDocumentContext } from "../proteus-document/ProteusDocumentContext.js";
+import { ProteusDocumentPathProvider, useProteusDocumentPathContext } from "../proteus-document/ProteusDocumentPathContext.js";
+import { useProteusValue } from "../use-proteus-value/useProteusValue.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/proteus-map/ProteusMap.tsx
 function ProteusMap({ children, path, separator }) {
-  const { strict } = useProteusDocumentContext("@optiaxiom/proteus/ProteusMap");
-  const { mapIndices, path: parentPath } = useProteusDocumentPathContext(
-    "@optiaxiom/proteus/ProteusMap"
-  );
-  const array = useProteusValue({ path });
-  if (!Array.isArray(array)) {
-    if (strict) {
-      throw new Error(
-        `Expected value at "${path}" to be an array got "${typeof array}" instead`
-      );
-    }
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: array.map((_, index) => /* @__PURE__ */ jsxs(
-    ProteusDocumentPathProvider,
-    {
-      mapIndices: [...mapIndices, index],
-      path: `${path.startsWith("/") ? path : `${parentPath}/${path}`}/${index}`,
-      children: [
-        index > 0 && separator,
-        children
-      ]
-    },
-    index
-  )) });
+	const { strict } = useProteusDocumentContext("@optiaxiom/proteus/ProteusMap");
+	const { mapIndices, path: parentPath } = useProteusDocumentPathContext("@optiaxiom/proteus/ProteusMap");
+	const array = useProteusValue({ path });
+	if (!Array.isArray(array)) {
+		if (strict) throw new Error(`Expected value at "${path}" to be an array got "${typeof array}" instead`);
+		return null;
+	}
+	return /* @__PURE__ */ jsx(Fragment, { children: array.map((_, index) => /* @__PURE__ */ jsxs(ProteusDocumentPathProvider, {
+		mapIndices: [...mapIndices, index],
+		path: `${path.startsWith("/") ? path : `${parentPath}/${path}`}/${index}`,
+		children: [index > 0 && separator, children]
+	}, index)) });
 }
 ProteusMap.displayName = "@optiaxiom/proteus/ProteusMap";
-
+//#endregion
 export { ProteusMap };

package/dist/esm/proteus-map-index/ProteusMapIndex.js

@@ -0,0 +1,11 @@
+"use client";
+import { useProteusDocumentPathContext } from "../proteus-document/ProteusDocumentPathContext.js";
+//#region src/proteus-map-index/ProteusMapIndex.tsx
+function ProteusMapIndex() {
+	const { mapIndices } = useProteusDocumentPathContext("@optiaxiom/proteus/ProteusMapIndex");
+	const index = mapIndices.at(-1);
+	return index === void 0 ? null : index;
+}
+ProteusMapIndex.displayName = "@optiaxiom/proteus/ProteusMapIndex";
+//#endregion
+export { ProteusMapIndex };

package/dist/esm/proteus-pill-menu/ProteusPillMenu.js

@@ -0,0 +1,65 @@
+"use client";
+import { useProteusDocumentContext } from "../proteus-document/ProteusDocumentContext.js";
+import { useProteusDocumentPathContext } from "../proteus-document/ProteusDocumentPathContext.js";
+import { useProteusValue } from "../use-proteus-value/useProteusValue.js";
+import { useInputValueChangeInteraction } from "./useInputValueChangeInteraction.js";
+import "@optiaxiom/react";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PillMenu, PillMenuContent, PillMenuTrigger } from "@optiaxiom/react/unstable";
+//#region src/proteus-pill-menu/ProteusPillMenu.tsx
+function ProteusPillMenu({ inputName, name, onInputValueChange, options = [] }) {
+	const { onDataChange, readOnly } = useProteusDocumentContext("@optiaxiom/proteus/ProteusPillMenu");
+	const { path: parentPath } = useProteusDocumentPathContext("@optiaxiom/proteus/ProteusPillMenu");
+	const { inputValue, loading } = useInputValueChangeInteraction({
+		inputName,
+		onInputValueChange
+	});
+	const resolved = useProteusValue({ path: name ?? "" });
+	const serialized = JSON.stringify(Array.isArray(resolved) ? resolved : []);
+	const value = useMemo(() => JSON.parse(serialized), [serialized]);
+	const menuOptions = useMemo(() => options.map((option) => ({
+		...option,
+		execute: () => {
+			if (readOnly || !name) return;
+			const next = value.some((v) => v.value === option.value) ? value.filter((v) => v.value !== option.value) : [...value, option];
+			onDataChange?.(`${parentPath}/${name}`, next);
+		},
+		multi: true,
+		selected: () => value.some((v) => v.value === option.value)
+	})), [
+		name,
+		onDataChange,
+		options,
+		parentPath,
+		readOnly,
+		value
+	]);
+	const menuValue = useMemo(() => value.map((item) => ({
+		execute: () => {
+			if (readOnly || !name) return;
+			onDataChange?.(`${parentPath}/${name}`, value.filter((v) => v.value !== item.value));
+		},
+		label: item.label,
+		multi: true
+	})), [
+		name,
+		onDataChange,
+		parentPath,
+		readOnly,
+		value
+	]);
+	return /* @__PURE__ */ jsxs(PillMenu, {
+		inputValue: inputName ? inputValue : void 0,
+		loading,
+		onInputValueChange: (inputValue) => {
+			if (inputName) onDataChange?.(`${parentPath}/${inputName}`, inputValue);
+		},
+		options: menuOptions,
+		value: menuValue,
+		children: [/* @__PURE__ */ jsx(PillMenuTrigger, { readOnly }), /* @__PURE__ */ jsx(PillMenuContent, {})]
+	});
+}
+ProteusPillMenu.displayName = "@optiaxiom/proteus/ProteusPillMenu";
+//#endregion
+export { ProteusPillMenu };

package/dist/esm/proteus-pill-menu/useInputValueChangeInteraction.js

@@ -0,0 +1,36 @@
+import { useProteusDocumentContext } from "../proteus-document/ProteusDocumentContext.js";
+import { useResolveProteusValues } from "../proteus-document/useResolveProteusValues.js";
+import { useProteusValue } from "../use-proteus-value/useProteusValue.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/proteus-pill-menu/useInputValueChangeInteraction.ts
+const useInputValueChangeInteraction = ({ inputName, onInputValueChange }) => {
+	const { onEvent } = useProteusDocumentContext("@optiaxiom/proteus/useInputValueChangeInteraction");
+	const inputValue = useProteusValue({ path: inputName ?? "" });
+	const resolvedOnInputValueChange = useResolveProteusValues(onInputValueChange ?? {});
+	const resolvedRef = useRef(resolvedOnInputValueChange);
+	resolvedRef.current = resolvedOnInputValueChange;
+	const onEventRef = useRef(onEvent);
+	onEventRef.current = onEvent;
+	const [loading, setLoading] = useState();
+	const requestIdRef = useRef(0);
+	useEffect(() => {
+		if (inputName && onInputValueChange) {
+			const id = ++requestIdRef.current;
+			(async () => {
+				setLoading("spinner");
+				await onEventRef.current(resolvedRef.current);
+				if (requestIdRef.current === id) setLoading(void 0);
+			})();
+		}
+	}, [
+		inputName,
+		inputValue,
+		onInputValueChange
+	]);
+	return {
+		inputValue,
+		loading
+	};
+};
+//#endregion
+export { useInputValueChangeInteraction };

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

@@ -1,9 +1,41 @@
-import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-DiCe_bxf.css';
-import { recipe } from '@optiaxiom/react/css-runtime';
-
-var addon = recipe({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'ProteusQuestion__8f590p3'],variants:{cursor:{pointer:{cursor:'pointer'}}}});
-var choice = recipe({base:[{color:'fg.default',flexDirection:'column',fontSize:'md',gap:'8',px:'10',py:'16',rounded:'lg',transition:'colors'},'ProteusQuestion__8f590p2','ProteusQuestion__8f590p1'],variants:{cursor:{pointer:{borderB:'1'},text:{cursor:'text'}}}});
-var choiceGroup = recipe({base:{flexDirection:'column'}});
-var question = recipe({base:[{flexDirection:'column',gap:'16'},'ProteusQuestion__8f590p0']});
-
+import { recipe } from "@optiaxiom/react/css-runtime";
+import "./../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-CpDgoW0l.css";
+//#region src/proteus-question/ProteusQuestion.css.ts
+var addon = recipe({
+	base: [{
+		display: "grid",
+		fontWeight: "500",
+		placeItems: "center",
+		rounded: "lg",
+		size: "md",
+		transition: "colors"
+	}, "ProteusQuestion__8f590p3"],
+	variants: { cursor: { pointer: { cursor: "pointer" } } }
+});
+var choice = recipe({
+	base: [
+		{
+			color: "fg.default",
+			flexDirection: "column",
+			fontSize: "md",
+			gap: "8",
+			px: "10",
+			py: "16",
+			rounded: "lg",
+			transition: "colors"
+		},
+		"ProteusQuestion__8f590p2",
+		"ProteusQuestion__8f590p1"
+	],
+	variants: { cursor: {
+		pointer: { borderB: "1" },
+		text: { cursor: "text" }
+	} }
+});
+var choiceGroup = recipe({ base: { flexDirection: "column" } });
+var question = recipe({ base: [{
+	flexDirection: "column",
+	gap: "16"
+}, "ProteusQuestion__8f590p0"] });
+//#endregion
 export { addon, choice, choiceGroup, question };