@optiaxiom/proteus 1.1.5 → 1.1.7

package/dist/esm/assets/src/proteus-chart/{ProteusChart.css.ts.vanilla-BYvPGdWv.css → ProteusChart.css.ts.vanilla-DCpG7JJL.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.dx1887;
-@layer optiaxiom.dx1887 {
+@layer optiaxiom.dk5man;
+@layer optiaxiom.dk5man {
   .ProteusChart__jmlqij1 {
     border-radius: 16px;
   }

package/dist/esm/assets/src/proteus-chart/{ProteusChartTooltipContent.css.ts.vanilla-CykN-vdX.css → ProteusChartTooltipContent.css.ts.vanilla-DwYO42tr.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.dx1887;
-@layer optiaxiom.dx1887 {
+@layer optiaxiom.dk5man;
+@layer optiaxiom.dk5man {
   .ProteusChartTooltipContent__1gsvq810 {
     min-width: 128px;
     position: absolute;

package/dist/esm/assets/src/proteus-document/{ProteusDocumentShell.css.ts.vanilla-CnC9TXlJ.css → ProteusDocumentShell.css.ts.vanilla-BW7NpwDV.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.dx1887;
-@layer optiaxiom.dx1887 {
+@layer optiaxiom.dk5man;
+@layer optiaxiom.dk5man {
   .ProteusDocumentShell__vpuvfj1 {
     margin: -4px;
   }

package/dist/esm/assets/src/proteus-image-carousel/{ProteusImageCarousel.css.ts.vanilla-CPqn1tWx.css → ProteusImageCarousel.css.ts.vanilla-CAkWZRTL.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.dx1887;
-@layer optiaxiom.dx1887 {
+@layer optiaxiom.dk5man;
+@layer optiaxiom.dk5man {
   .ProteusImageCarousel__1t6qej70 {
     outline: none;
     user-select: none;

package/dist/esm/assets/src/proteus-markdown/ProteusMarkdown.css.ts.vanilla-DOGP_rJU.css

@@ -0,0 +1,61 @@
+@layer optiaxiom.dk5man;
+@layer optiaxiom.dk5man {
+  .ProteusMarkdown__1ibq5ae0 > * {
+    margin-bottom: 1em;
+    margin-top: 0;
+  }
+  .ProteusMarkdown__1ibq5ae0 li > * {
+    margin-bottom: 1em;
+    margin-top: 1em;
+  }
+  .ProteusMarkdown__1ibq5ae0 li:first-child > * {
+    margin-top: 0;
+  }
+  :is(.ProteusMarkdown__1ibq5ae0, .ProteusMarkdown__1ibq5ae0 li) > :is(h1, h2, h3, h4, h5, h6) {
+    margin-bottom: 0.6em;
+    margin-top: 1.2em;
+  }
+  .ProteusMarkdown__1ibq5ae0 > .ProteusMarkdown__1ibq5ae1 {
+    margin-bottom: 1em;
+    margin-top: 1em;
+  }
+  :is(.ProteusMarkdown__1ibq5ae0, .ProteusMarkdown__1ibq5ae0 li) > :is(h1, h2, h3, h4, h5, h6) + * {
+    margin-top: 0;
+  }
+  .ProteusMarkdown__1ibq5ae0 > :has(+ .ProteusMarkdown__1ibq5ae1), :is(.ProteusMarkdown__1ibq5ae0, .ProteusMarkdown__1ibq5ae0 li) > :last-child {
+    margin-bottom: 0;
+  }
+  .ProteusMarkdown__1ibq5ae0 > .ProteusMarkdown__1ibq5ae1 + *, .ProteusMarkdown__1ibq5ae0 > :first-child {
+    margin-top: 0;
+  }
+  .ProteusMarkdown__1ibq5ae2 {
+    margin-bottom: 2em;
+    margin-top: 2em;
+  }
+  .ProteusMarkdown__1ibq5ae3 {
+    list-style-type: decimal;
+    padding-inline-start: 1.5em;
+  }
+  .ProteusMarkdown__1ibq5ae4 {
+    list-style-type: disc;
+    padding-inline-start: 1.5em;
+  }
+  .ProteusMarkdown__1ibq5ae5 code {
+    background-color: transparent;
+    border-radius: 0;
+    padding: 0;
+  }
+  .ProteusMarkdown__1ibq5ae6 {
+    background-color: var(--ax-colors-bg-secondary);
+    border-radius: var(--ax-borderRadius-md);
+    font-size: 85%;
+    font-variant-ligatures: none;
+    padding: 0.2em 0.4em;
+    white-space: break-spaces;
+  }
+  .ProteusMarkdown__1ibq5ae7 {
+    display: inline-block;
+    max-width: 100%;
+    vertical-align: text-bottom;
+  }
+}

package/dist/esm/assets/src/proteus-question/{ProteusQuestion.css.ts.vanilla-DXJt60Ji.css → ProteusQuestion.css.ts.vanilla-Bx-y2xg6.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.dx1887;
-@layer optiaxiom.dx1887 {
+@layer optiaxiom.dk5man;
+@layer optiaxiom.dk5man {
   .ProteusQuestion__8f590p0 {
     outline: none;
   }

package/dist/esm/index.js

@@ -13,6 +13,7 @@ import { ProteusInput } from "./proteus-input/ProteusInput.js";
 import { ProteusLength } from "./proteus-length/ProteusLength.js";
 import { ProteusMapIndex } from "./proteus-map-index/ProteusMapIndex.js";
 import { ProteusMap } from "./proteus-map/ProteusMap.js";
+import { ProteusMarkdown } from "./proteus-markdown/ProteusMarkdown.js";
 import { ProteusPillMenu } from "./proteus-pill-menu/ProteusPillMenu.js";
 import { ProteusRichTextEditor } from "./proteus-rich-text-editor/ProteusRichTextEditor.js";
 import { ProteusSelect } from "./proteus-select/ProteusSelect.js";
@@ -20,4 +21,4 @@ import { ProteusShow } from "./proteus-show/ProteusShow.js";
 import { ProteusTextarea } from "./proteus-textarea/ProteusTextarea.js";
 import { ProteusDocumentShell } from "./proteus-document/ProteusDocumentShell.js";
 import { ProteusDocumentRenderer } from "./proteus-document/ProteusDocumentRenderer.js";
-export { ProteusAction, ProteusBridge, ProteusChart, ProteusDataTable, ProteusDateInput, ProteusDocumentRenderer, ProteusDocumentShell, ProteusFederated, ProteusFileUpload, ProteusImage, ProteusImageCarousel, ProteusInput, ProteusLength, ProteusMap, ProteusMapIndex, ProteusPillMenu, ProteusRichTextEditor, ProteusSelect, ProteusShow, ProteusTextarea, safeParseDocument, useProteusValue };
+export { ProteusAction, ProteusBridge, ProteusChart, ProteusDataTable, ProteusDateInput, ProteusDocumentRenderer, ProteusDocumentShell, ProteusFederated, ProteusFileUpload, ProteusImage, ProteusImageCarousel, ProteusInput, ProteusLength, ProteusMap, ProteusMapIndex, ProteusMarkdown, ProteusPillMenu, ProteusRichTextEditor, ProteusSelect, ProteusShow, ProteusTextarea, safeParseDocument, useProteusValue };

package/dist/esm/proteus-chart/ProteusChart-css.js

@@ -1,4 +1,4 @@
-import "./../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-BYvPGdWv.css";
+import "./../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-DCpG7JJL.css";
 import { recipe } from "@optiaxiom/react/css-runtime";
 //#region src/proteus-chart/ProteusChart.css.ts
 var chart = recipe({ base: [

package/dist/esm/proteus-chart/ProteusChartTooltipContent-css.js

@@ -1,5 +1,5 @@
 import { recipe } from "@optiaxiom/react/css-runtime";
-import "./../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-CykN-vdX.css";
+import "./../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-DwYO42tr.css";
 //#region src/proteus-chart/ProteusChartTooltipContent.css.ts
 var tooltip = recipe({ base: [{
 	bg: "bg.default",

package/dist/esm/proteus-document/ProteusDocumentShell-css.js

@@ -1,5 +1,5 @@
 import { recipe } from "@optiaxiom/react/css-runtime";
-import "./../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-CnC9TXlJ.css";
+import "./../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-BW7NpwDV.css";
 //#region src/proteus-document/ProteusDocumentShell.css.ts
 var body = recipe({
 	base: [{

package/dist/esm/proteus-element/ProteusElement.js

@@ -17,6 +17,7 @@ import { ProteusInput } from "../proteus-input/ProteusInput.js";
 import { ProteusLength } from "../proteus-length/ProteusLength.js";
 import { ProteusMapIndex } from "../proteus-map-index/ProteusMapIndex.js";
 import { ProteusMap } from "../proteus-map/ProteusMap.js";
+import { ProteusMarkdown } from "../proteus-markdown/ProteusMarkdown.js";
 import { ProteusPillMenu } from "../proteus-pill-menu/ProteusPillMenu.js";
 import { ProteusQuestion } from "../proteus-question/ProteusQuestion.js";
 import { ProteusRichTextEditor } from "../proteus-rich-text-editor/ProteusRichTextEditor.js";
@@ -100,6 +101,7 @@ const ProteusElement = ({ element: elementProp }) => {
 		});
 		case "Map": return /* @__PURE__ */ jsx(ProteusMap, { ...resolve(element) });
 		case "MapIndex": return /* @__PURE__ */ jsx(ProteusMapIndex, { ...resolve(element) });
+		case "Markdown": return /* @__PURE__ */ jsx(ProteusMarkdown, { ...resolve(element) });
 		case "PillMenu": return /* @__PURE__ */ jsx(ProteusPillMenu, { ...resolve(element) });
 		case "Question": return /* @__PURE__ */ jsx(ProteusQuestion, { ...resolve(element) });
 		case "Range": return /* @__PURE__ */ jsx(Range, { ...resolve(element) });

package/dist/esm/proteus-image/ProteusImage.js

@@ -1,13 +1,9 @@
 "use client";
-import { useProteusDocumentContext } from "../proteus-document/ProteusDocumentContext.js";
-import { Box, Button, Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTrigger, Spinner } from "@optiaxiom/react";
+import { Box, Spinner } from "@optiaxiom/react";
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/proteus-image/ProteusImage.tsx
-function ProteusImage(props) {
-	const { onEvent } = useProteusDocumentContext("@optiaxiom/proteus/ProteusImage");
-	const [open, setOpen] = useState(false);
-	const [isDownloading, setIsDownloading] = useState(false);
+function ProteusImage({ ...props }) {
 	const [isLoaded, setIsLoaded] = useState(false);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [!isLoaded && /* @__PURE__ */ jsx(Box, {
 		alignItems: "center",
@@ -16,87 +12,32 @@ function ProteusImage(props) {
 		justifyContent: "center",
 		p: "24",
 		rounded: "md",
-		style: { aspectRatio: "16 / 9" },
 		w: "full",
 		...props,
 		children: /* @__PURE__ */ jsx(Spinner, {})
-	}), /* @__PURE__ */ jsxs(Dialog, {
-		onOpenChange: setOpen,
-		open,
-		children: [/* @__PURE__ */ jsx(DialogTrigger, {
-			"aria-label": "Expand",
-			asChild: true,
-			children: /* @__PURE__ */ jsx(Box, {
-				asChild: true,
-				cursor: "pointer",
-				display: isLoaded ? "flex" : "none",
-				objectFit: "contain",
-				overflow: "hidden",
-				rounded: "inherit",
-				size: "full",
-				...props,
-				children: /* @__PURE__ */ jsx("img", {
-					alt: props.alt,
-					draggable: true,
-					onDragStart: (event) => {
-						event.stopPropagation();
-						event.dataTransfer.effectAllowed = "copy";
-						event.dataTransfer.setData("opal-chat-dnd-data", JSON.stringify({
-							link: props.src,
-							mime_type: "image/*",
-							name: props.src?.split("/").pop()
-						}));
-					},
-					onLoad: () => setIsLoaded(true),
-					src: props.src
-				})
-			})
-		}), /* @__PURE__ */ jsxs(DialogContent, {
-			size: "fullscreen",
-			children: [
-				/* @__PURE__ */ jsx(DialogHeader, {
-					lineClamp: "1",
-					children: props.alt
-				}),
-				/* @__PURE__ */ jsx(DialogBody, {
-					overflow: "hidden",
-					children: /* @__PURE__ */ jsx(Box, {
-						asChild: true,
-						display: "block",
-						maxH: "full",
-						maxW: "full",
-						objectFit: "contain",
-						children: /* @__PURE__ */ jsx("img", {
-							alt: props.alt,
-							src: props.src
-						})
-					})
-				}),
-				/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(DialogClose, { children: "Close" }), /* @__PURE__ */ jsx(Button, {
-					appearance: "primary",
-					asChild: true,
-					loading: isDownloading,
-					onClick: async (event) => {
-						event.preventDefault();
-						if (isDownloading) return;
-						setIsDownloading(true);
-						try {
-							await onEvent({
-								action: "download",
-								url: String(props.src)
-							});
-						} finally {
-							setIsDownloading(false);
-						}
-					},
-					children: /* @__PURE__ */ jsx("a", {
-						download: true,
-						href: props.src,
-						children: "Download"
-					})
-				})] })
-			]
-		})]
+	}), /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		display: isLoaded ? "flex" : "none",
+		objectFit: "contain",
+		overflow: "hidden",
+		rounded: "inherit",
+		size: "full",
+		...props,
+		children: /* @__PURE__ */ jsx("img", {
+			alt: props.alt,
+			draggable: true,
+			onDragStart: (event) => {
+				event.stopPropagation();
+				event.dataTransfer.effectAllowed = "copy";
+				event.dataTransfer.setData("opal-chat-dnd-data", JSON.stringify({
+					link: props.src,
+					mime_type: "image/*",
+					name: props.src?.split("/").pop()
+				}));
+			},
+			onLoad: () => setIsLoaded(true),
+			src: props.src
+		})
 	})] });
 }
 ProteusImage.displayName = "@optiaxiom/proteus/ProteusImage";

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

@@ -1,5 +1,5 @@
 import { recipe } from "@optiaxiom/react/css-runtime";
-import "./../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-CPqn1tWx.css";
+import "./../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-CAkWZRTL.css";
 //#region src/proteus-image-carousel/ProteusImageCarousel.css.ts
 var carousel = recipe({ base: [{
 	flexDirection: "column",
@@ -26,6 +26,7 @@ var navButton = recipe({
 	} }
 });
 var slide = recipe({ base: [{
+	cursor: "pointer",
 	objectFit: "cover",
 	size: "full"
 }, "ProteusImageCarousel__1t6qej74"] });

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

@@ -24,8 +24,9 @@ function ProteusImageCarousel({ images, title }) {
 	const [canScrollNext, setCanScrollNext] = useState(false);
 	const onSelect = useCallback(() => {
 		if (!emblaMainApi || !emblaThumbsApi) return;
-		setSelectedIndex(emblaMainApi.selectedScrollSnap());
-		emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap());
+		const index = emblaMainApi.selectedScrollSnap();
+		setSelectedIndex(index);
+		emblaThumbsApi.scrollTo(index);
 		setCanScrollPrev(emblaMainApi.canScrollPrev());
 		setCanScrollNext(emblaMainApi.canScrollNext());
 	}, [emblaMainApi, emblaThumbsApi]);
@@ -61,7 +62,11 @@ function ProteusImageCarousel({ images, title }) {
 						children: /* @__PURE__ */ jsx(Group, {
 							...slideContainer(),
 							children: images.map((image, index) => /* @__PURE__ */ jsx(ProteusImage, {
-								alt: image.alt,
+								alt: image.name ?? image.alt,
+								onClick: () => onEvent({
+									action: "preview",
+									file: toPreviewFile(image)
+								}),
 								src: image.src,
 								...slide()
 							}, index))
@@ -96,7 +101,7 @@ function ProteusImageCarousel({ images, title }) {
 							objectFit: "cover",
 							size: "full",
 							children: /* @__PURE__ */ jsx("img", {
-								alt: image.alt,
+								alt: image.name ?? image.alt,
 								src: image.thumb ?? image.src
 							})
 						})
@@ -122,13 +127,13 @@ function ProteusImageCarousel({ images, title }) {
 					options: [{
 						execute: () => onEvent({
 							action: "download",
-							url: images[selectedIndex].src
+							url: images[selectedIndex].file_link ?? images[selectedIndex].src
 						}),
 						label: "Download this image"
 					}, {
 						execute: () => onEvent({
 							action: "download",
-							url: images.map((image) => image.src)
+							url: images.map((image) => image.file_link ?? image.src)
 						}),
 						label: "Download all images"
 					}],
@@ -142,7 +147,7 @@ function ProteusImageCarousel({ images, title }) {
 					ml: "auto",
 					onClick: () => onEvent({
 						action: "download",
-						url: images[0].src
+						url: images[0].file_link ?? images[0].src
 					}),
 					children: "Download"
 				})]
@@ -150,6 +155,15 @@ function ProteusImageCarousel({ images, title }) {
 		]
 	});
 }
+function toPreviewFile({ alt, extension, file_link, full_name, mime_type, name, src }) {
+	return {
+		extension: extension ?? "JPG",
+		file_link: file_link ?? src,
+		full_name: full_name ?? alt ?? src,
+		mime_type: mime_type ?? "image/jpeg",
+		name: name ?? alt ?? src
+	};
+}
 ProteusImageCarousel.displayName = "@optiaxiom/proteus/ProteusImageCarousel";
 //#endregion
 export { ProteusImageCarousel };

package/dist/esm/proteus-markdown/ProteusMarkdown-css.js

@@ -0,0 +1,29 @@
+import { recipe } from "@optiaxiom/react/css-runtime";
+import "./../assets/src/proteus-markdown/ProteusMarkdown.css.ts.vanilla-DOGP_rJU.css";
+//#region src/proteus-markdown/ProteusMarkdown.css.ts
+var code = recipe({ base: [{
+	bg: "bg.secondary",
+	overflow: "auto",
+	p: "12",
+	rounded: "md"
+}, "ProteusMarkdown__1ibq5ae5"] });
+var inlineCode = recipe({ base: [{ fontFamily: "mono" }, "ProteusMarkdown__1ibq5ae6"] });
+var inlineImage = recipe({ base: [{ rounded: "sm" }, "ProteusMarkdown__1ibq5ae7"] });
+var markdown = recipe({ base: [{
+	color: "fg.default",
+	fontSize: "md"
+}, "ProteusMarkdown__1ibq5ae0"] });
+var orderedList = recipe({ base: [{
+	display: "flex",
+	flexDirection: "column",
+	gap: "6"
+}, "ProteusMarkdown__1ibq5ae3"] });
+var separator = "ProteusMarkdown__1ibq5ae1";
+var table = recipe({ base: ["ProteusMarkdown__1ibq5ae2"] });
+var unorderedList = recipe({ base: [{
+	display: "flex",
+	flexDirection: "column",
+	gap: "6"
+}, "ProteusMarkdown__1ibq5ae4"] });
+//#endregion
+export { code, inlineCode, inlineImage, markdown, orderedList, separator, table, unorderedList };

package/dist/esm/proteus-markdown/ProteusMarkdown.js

@@ -0,0 +1,120 @@
+"use client";
+import { code, inlineCode, inlineImage, markdown, orderedList, separator, table, unorderedList } from "./ProteusMarkdown-css.js";
+import { Box, Heading, Link, Separator, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow, Text } from "@optiaxiom/react";
+import { jsx } from "react/jsx-runtime";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+//#region src/proteus-markdown/ProteusMarkdown.tsx
+const mapLevelToFontSize = {
+	"1": "2xl",
+	"2": "xl",
+	"3": "lg",
+	"4": "md"
+};
+/**
+* Maps markdown heading levels (h1-h6) onto Axiom Heading levels (1-4). Markdown
+* supports six levels but Heading only supports four, so deeper levels are
+* clamped to the smallest visual size.
+*/
+const heading = (level, Tag) => function MarkdownHeading({ children }) {
+	return /* @__PURE__ */ jsx(Heading, {
+		asChild: true,
+		fontSize: mapLevelToFontSize[level],
+		fontWeight: "600",
+		level,
+		children: /* @__PURE__ */ jsx(Tag, { children })
+	});
+};
+const components = {
+	a: ({ children, href }) => /* @__PURE__ */ jsx(Link, {
+		href,
+		rel: "noopener noreferrer",
+		target: "_blank",
+		children
+	}),
+	blockquote: ({ children }) => /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		borderL: "2",
+		color: "fg.secondary",
+		px: "16",
+		py: "6",
+		children: /* @__PURE__ */ jsx("blockquote", { children })
+	}),
+	code: ({ children }) => /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		...inlineCode(),
+		children: /* @__PURE__ */ jsx("code", { children })
+	}),
+	em: ({ children }) => /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("em", { children })
+	}),
+	h1: heading("1", "h1"),
+	h2: heading("2", "h2"),
+	h3: heading("3", "h3"),
+	h4: heading("4", "h4"),
+	h5: heading("4", "h5"),
+	h6: heading("4", "h6"),
+	hr: () => /* @__PURE__ */ jsx(Separator, { className: separator }),
+	img: ({ alt, src }) => typeof src === "string" ? /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		...inlineImage(),
+		children: /* @__PURE__ */ jsx("img", {
+			alt: alt ?? "",
+			src
+		})
+	}) : null,
+	li: ({ children }) => /* @__PURE__ */ jsx(Text, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("li", { children })
+	}),
+	ol: ({ children }) => /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		...orderedList(),
+		children: /* @__PURE__ */ jsx("ol", { children })
+	}),
+	p: ({ children }) => /* @__PURE__ */ jsx(Text, { children }),
+	pre: ({ children }) => /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		...code(),
+		children: /* @__PURE__ */ jsx("pre", { children })
+	}),
+	strong: ({ children }) => /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		display: "inline",
+		fontWeight: "600",
+		children: /* @__PURE__ */ jsx("strong", { children })
+	}),
+	table: ({ children }) => /* @__PURE__ */ jsx(Table, {
+		...table(),
+		children
+	}),
+	tbody: ({ children }) => /* @__PURE__ */ jsx(TableBody, { children }),
+	td: ({ children }) => /* @__PURE__ */ jsx(TableCell, { children }),
+	th: ({ children }) => /* @__PURE__ */ jsx(TableHeaderCell, { children }),
+	thead: ({ children }) => /* @__PURE__ */ jsx(TableHeader, { children }),
+	tr: ({ children }) => /* @__PURE__ */ jsx(TableRow, { children }),
+	ul: ({ children }) => /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		...unorderedList(),
+		children: /* @__PURE__ */ jsx("ul", { children })
+	})
+};
+/**
+* Renders markdown content (headings, paragraphs, lists, links, emphasis, code)
+* as Axiom components so generated documents inherit the design system.
+*/
+function ProteusMarkdown({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx(Box, {
+		...markdown({}, className),
+		...props,
+		children: /* @__PURE__ */ jsx(Markdown, {
+			components,
+			remarkPlugins: [remarkGfm],
+			children
+		})
+	});
+}
+ProteusMarkdown.displayName = "@optiaxiom/proteus/ProteusMarkdown";
+//#endregion
+export { ProteusMarkdown };

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

@@ -1,5 +1,5 @@
 import { recipe } from "@optiaxiom/react/css-runtime";
-import "./../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-DXJt60Ji.css";
+import "./../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-Bx-y2xg6.css";
 //#region src/proteus-question/ProteusQuestion.css.ts
 var addon = recipe({
 	base: [{

package/dist/esm/schema/public-schema.js

@@ -1296,6 +1296,7 @@ var public_schema_default = {
 				{ "$ref": "#/definitions/ProteusLink" },
 				{ "$ref": "#/definitions/ProteusMap" },
 				{ "$ref": "#/definitions/ProteusMapIndex" },
+				{ "$ref": "#/definitions/ProteusMarkdown" },
 				{ "$ref": "#/definitions/ProteusPillMenu" },
 				{ "$ref": "#/definitions/ProteusQuestion" },
 				{ "$ref": "#/definitions/ProteusRange" },
@@ -3691,6 +3692,80 @@ var public_schema_default = {
 			"required": ["$type"],
 			"type": "object"
 		},
+		"ProteusMarkdown": {
+			"additionalProperties": false,
+			"examples": [{
+				"$type": "Markdown",
+				"children": "## Summary\n\nRevenue grew **12%** this quarter."
+			}],
+			"properties": {
+				"$type": { "const": "Markdown" },
+				"alignItems": { "$ref": "#/definitions/SprinkleProp_alignItems" },
+				"alignSelf": { "$ref": "#/definitions/SprinkleProp_alignSelf" },
+				"animation": { "$ref": "#/definitions/SprinkleProp_animation" },
+				"backgroundImage": { "$ref": "#/definitions/SprinkleProp_backgroundImage" },
+				"bg": { "$ref": "#/definitions/SprinkleProp_bg" },
+				"border": { "$ref": "#/definitions/SprinkleProp_border" },
+				"borderB": { "$ref": "#/definitions/SprinkleProp_borderB" },
+				"borderColor": { "$ref": "#/definitions/SprinkleProp_borderColor" },
+				"borderL": { "$ref": "#/definitions/SprinkleProp_borderL" },
+				"borderR": { "$ref": "#/definitions/SprinkleProp_borderR" },
+				"borderT": { "$ref": "#/definitions/SprinkleProp_borderT" },
+				"children": {
+					"anyOf": [{ "type": "string" }, { "$ref": "#/definitions/ProteusExpression" }],
+					"description": "Markdown source string to render (e.g. headings, paragraphs, lists, links, emphasis, code). Can be a literal string or a ProteusExpression that resolves to a string."
+				},
+				"color": { "$ref": "#/definitions/SprinkleProp_color" },
+				"cursor": { "$ref": "#/definitions/SprinkleProp_cursor" },
+				"display": { "$ref": "#/definitions/SprinkleProp_display" },
+				"flex": { "$ref": "#/definitions/SprinkleProp_flex" },
+				"flexDirection": { "$ref": "#/definitions/SprinkleProp_flexDirection" },
+				"flexWrap": { "$ref": "#/definitions/SprinkleProp_flexWrap" },
+				"fontFamily": { "$ref": "#/definitions/SprinkleProp_fontFamily" },
+				"fontSize": { "$ref": "#/definitions/SprinkleProp_fontSize" },
+				"fontWeight": { "$ref": "#/definitions/SprinkleProp_fontWeight" },
+				"gap": { "$ref": "#/definitions/SprinkleProp_gap" },
+				"gridAutoRows": { "$ref": "#/definitions/SprinkleProp_gridAutoRows" },
+				"gridColumn": { "$ref": "#/definitions/SprinkleProp_gridColumn" },
+				"gridTemplateColumns": { "$ref": "#/definitions/SprinkleProp_gridTemplateColumns" },
+				"h": { "$ref": "#/definitions/SprinkleProp_h" },
+				"justifyContent": { "$ref": "#/definitions/SprinkleProp_justifyContent" },
+				"justifyItems": { "$ref": "#/definitions/SprinkleProp_justifyItems" },
+				"m": { "$ref": "#/definitions/SprinkleProp_m" },
+				"maxH": { "$ref": "#/definitions/SprinkleProp_maxH" },
+				"maxW": { "$ref": "#/definitions/SprinkleProp_maxW" },
+				"mb": { "$ref": "#/definitions/SprinkleProp_mb" },
+				"ml": { "$ref": "#/definitions/SprinkleProp_ml" },
+				"mr": { "$ref": "#/definitions/SprinkleProp_mr" },
+				"mt": { "$ref": "#/definitions/SprinkleProp_mt" },
+				"mx": { "$ref": "#/definitions/SprinkleProp_mx" },
+				"my": { "$ref": "#/definitions/SprinkleProp_my" },
+				"objectFit": { "$ref": "#/definitions/SprinkleProp_objectFit" },
+				"overflow": { "$ref": "#/definitions/SprinkleProp_overflow" },
+				"overflowX": { "$ref": "#/definitions/SprinkleProp_overflowX" },
+				"overflowY": { "$ref": "#/definitions/SprinkleProp_overflowY" },
+				"p": { "$ref": "#/definitions/SprinkleProp_p" },
+				"pb": { "$ref": "#/definitions/SprinkleProp_pb" },
+				"pl": { "$ref": "#/definitions/SprinkleProp_pl" },
+				"placeItems": { "$ref": "#/definitions/SprinkleProp_placeItems" },
+				"pointerEvents": { "$ref": "#/definitions/SprinkleProp_pointerEvents" },
+				"pr": { "$ref": "#/definitions/SprinkleProp_pr" },
+				"pt": { "$ref": "#/definitions/SprinkleProp_pt" },
+				"px": { "$ref": "#/definitions/SprinkleProp_px" },
+				"py": { "$ref": "#/definitions/SprinkleProp_py" },
+				"rounded": { "$ref": "#/definitions/SprinkleProp_rounded" },
+				"shadow": { "$ref": "#/definitions/SprinkleProp_shadow" },
+				"size": { "$ref": "#/definitions/SprinkleProp_size" },
+				"textAlign": { "$ref": "#/definitions/SprinkleProp_textAlign" },
+				"textTransform": { "$ref": "#/definitions/SprinkleProp_textTransform" },
+				"transition": { "$ref": "#/definitions/SprinkleProp_transition" },
+				"w": { "$ref": "#/definitions/SprinkleProp_w" },
+				"whiteSpace": { "$ref": "#/definitions/SprinkleProp_whiteSpace" },
+				"z": { "$ref": "#/definitions/SprinkleProp_z" }
+			},
+			"required": ["$type"],
+			"type": "object"
+		},
 		"ProteusPillMenu": {
 			"additionalProperties": false,
 			"examples": [{

package/dist/esm/schema/runtime-schema.js

@@ -1283,6 +1283,7 @@ var definitions = {
 			{ "$ref": "#/definitions/ProteusLink" },
 			{ "$ref": "#/definitions/ProteusMap" },
 			{ "$ref": "#/definitions/ProteusMapIndex" },
+			{ "$ref": "#/definitions/ProteusMarkdown" },
 			{ "$ref": "#/definitions/ProteusPillMenu" },
 			{ "$ref": "#/definitions/ProteusQuestion" },
 			{ "$ref": "#/definitions/ProteusRange" },
@@ -3633,6 +3634,79 @@ var definitions = {
 		"required": ["$type"],
 		"type": "object"
 	},
+	"ProteusMarkdown": {
+		"examples": [{
+			"$type": "Markdown",
+			"children": "## Summary\n\nRevenue grew **12%** this quarter."
+		}],
+		"properties": {
+			"$type": { "const": "Markdown" },
+			"alignItems": { "$ref": "#/definitions/SprinkleProp_alignItems" },
+			"alignSelf": { "$ref": "#/definitions/SprinkleProp_alignSelf" },
+			"animation": { "$ref": "#/definitions/SprinkleProp_animation" },
+			"backgroundImage": { "$ref": "#/definitions/SprinkleProp_backgroundImage" },
+			"bg": { "$ref": "#/definitions/SprinkleProp_bg" },
+			"border": { "$ref": "#/definitions/SprinkleProp_border" },
+			"borderB": { "$ref": "#/definitions/SprinkleProp_borderB" },
+			"borderColor": { "$ref": "#/definitions/SprinkleProp_borderColor" },
+			"borderL": { "$ref": "#/definitions/SprinkleProp_borderL" },
+			"borderR": { "$ref": "#/definitions/SprinkleProp_borderR" },
+			"borderT": { "$ref": "#/definitions/SprinkleProp_borderT" },
+			"children": {
+				"anyOf": [{ "type": "string" }, { "$ref": "#/definitions/ProteusExpression" }],
+				"description": "Markdown source string to render (e.g. headings, paragraphs, lists, links, emphasis, code). Can be a literal string or a ProteusExpression that resolves to a string."
+			},
+			"color": { "$ref": "#/definitions/SprinkleProp_color" },
+			"cursor": { "$ref": "#/definitions/SprinkleProp_cursor" },
+			"display": { "$ref": "#/definitions/SprinkleProp_display" },
+			"flex": { "$ref": "#/definitions/SprinkleProp_flex" },
+			"flexDirection": { "$ref": "#/definitions/SprinkleProp_flexDirection" },
+			"flexWrap": { "$ref": "#/definitions/SprinkleProp_flexWrap" },
+			"fontFamily": { "$ref": "#/definitions/SprinkleProp_fontFamily" },
+			"fontSize": { "$ref": "#/definitions/SprinkleProp_fontSize" },
+			"fontWeight": { "$ref": "#/definitions/SprinkleProp_fontWeight" },
+			"gap": { "$ref": "#/definitions/SprinkleProp_gap" },
+			"gridAutoRows": { "$ref": "#/definitions/SprinkleProp_gridAutoRows" },
+			"gridColumn": { "$ref": "#/definitions/SprinkleProp_gridColumn" },
+			"gridTemplateColumns": { "$ref": "#/definitions/SprinkleProp_gridTemplateColumns" },
+			"h": { "$ref": "#/definitions/SprinkleProp_h" },
+			"justifyContent": { "$ref": "#/definitions/SprinkleProp_justifyContent" },
+			"justifyItems": { "$ref": "#/definitions/SprinkleProp_justifyItems" },
+			"m": { "$ref": "#/definitions/SprinkleProp_m" },
+			"maxH": { "$ref": "#/definitions/SprinkleProp_maxH" },
+			"maxW": { "$ref": "#/definitions/SprinkleProp_maxW" },
+			"mb": { "$ref": "#/definitions/SprinkleProp_mb" },
+			"ml": { "$ref": "#/definitions/SprinkleProp_ml" },
+			"mr": { "$ref": "#/definitions/SprinkleProp_mr" },
+			"mt": { "$ref": "#/definitions/SprinkleProp_mt" },
+			"mx": { "$ref": "#/definitions/SprinkleProp_mx" },
+			"my": { "$ref": "#/definitions/SprinkleProp_my" },
+			"objectFit": { "$ref": "#/definitions/SprinkleProp_objectFit" },
+			"overflow": { "$ref": "#/definitions/SprinkleProp_overflow" },
+			"overflowX": { "$ref": "#/definitions/SprinkleProp_overflowX" },
+			"overflowY": { "$ref": "#/definitions/SprinkleProp_overflowY" },
+			"p": { "$ref": "#/definitions/SprinkleProp_p" },
+			"pb": { "$ref": "#/definitions/SprinkleProp_pb" },
+			"pl": { "$ref": "#/definitions/SprinkleProp_pl" },
+			"placeItems": { "$ref": "#/definitions/SprinkleProp_placeItems" },
+			"pointerEvents": { "$ref": "#/definitions/SprinkleProp_pointerEvents" },
+			"pr": { "$ref": "#/definitions/SprinkleProp_pr" },
+			"pt": { "$ref": "#/definitions/SprinkleProp_pt" },
+			"px": { "$ref": "#/definitions/SprinkleProp_px" },
+			"py": { "$ref": "#/definitions/SprinkleProp_py" },
+			"rounded": { "$ref": "#/definitions/SprinkleProp_rounded" },
+			"shadow": { "$ref": "#/definitions/SprinkleProp_shadow" },
+			"size": { "$ref": "#/definitions/SprinkleProp_size" },
+			"textAlign": { "$ref": "#/definitions/SprinkleProp_textAlign" },
+			"textTransform": { "$ref": "#/definitions/SprinkleProp_textTransform" },
+			"transition": { "$ref": "#/definitions/SprinkleProp_transition" },
+			"w": { "$ref": "#/definitions/SprinkleProp_w" },
+			"whiteSpace": { "$ref": "#/definitions/SprinkleProp_whiteSpace" },
+			"z": { "$ref": "#/definitions/SprinkleProp_z" }
+		},
+		"required": ["$type"],
+		"type": "object"
+	},
 	"ProteusPillMenu": {
 		"examples": [{
 			"$type": "PillMenu",

package/dist/index.d.ts

@@ -153,9 +153,11 @@ declare namespace ProteusFileUpload {
 //#region src/proteus-image-carousel/ProteusImageCarousel.d.ts
 type ProteusImageCarouselProps = {
   /**
-   * Array of image data to display in the carousel.
+   * Array of image data to display in the carousel. The host is responsible for
+   * supplying the preview metadata on each item.
    */
-  images: Array<{
+  images: Array<ProteusPreviewFile & {
+    [key: string]: unknown;
     /**
      * Alternative text for the image.
      */
@@ -184,7 +186,9 @@ declare namespace ProteusImageCarousel {
 //#endregion
 //#region src/proteus-image/ProteusImage.d.ts
 type ProteusImageProps = BoxProps<"img">;
-declare function ProteusImage(props: ProteusImageProps): import("react/jsx-runtime").JSX.Element;
+declare function ProteusImage({
+  ...props
+}: ProteusImageProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProteusImage {
   var displayName: string;
 }
@@ -237,6 +241,27 @@ declare namespace ProteusMap {
   var displayName: string;
 }
 //#endregion
+//#region src/proteus-markdown/ProteusMarkdown.d.ts
+type ProteusMarkdownProps = BoxProps<"div", {
+  /**
+   * The markdown source to render. A single string (resolved upstream from a
+   * literal or a `Value`/`Concat` expression).
+   */
+  children?: string;
+}>;
+/**
+ * Renders markdown content (headings, paragraphs, lists, links, emphasis, code)
+ * as Axiom components so generated documents inherit the design system.
+ */
+declare function ProteusMarkdown({
+  children,
+  className,
+  ...props
+}: ProteusMarkdownProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ProteusMarkdown {
+  var displayName: string;
+}
+//#endregion
 //#region src/proteus-pill-menu/ProteusPillMenu.d.ts
 type ProteusPillMenuProps = {
   /**
@@ -436,7 +461,7 @@ type ProteusDocumentShellProps = Pick<ComponentPropsWithoutRef<typeof Disclosure
    * Callback when user triggers a preview action.
    * Receives the file object to preview.
    */
-  onPreview?: (file: unknown) => Promise<void> | void;
+  onPreview?: (file: ProteusPreviewFile) => Promise<void> | void;
   /**
    * Callback when an analytics event is fired
    */
@@ -507,7 +532,7 @@ type ProteusEventHandler = {
   }) | string;
 } | {
   action: "preview";
-  file: unknown;
+  file: ProteusPreviewFile;
 } | {
   action: "pushValue";
   path: string;
@@ -521,6 +546,13 @@ type ProteusEventHandler = {
 } | {
   message: string | StructuredMessage;
 };
+type ProteusPreviewFile = {
+  extension: string;
+  file_link: string;
+  full_name: string;
+  mime_type: string;
+  name: string;
+};
 type StructuredMessage<F extends FileUploadMetadata = FileUploadMetadata> = {
   files?: F[];
   parts: Array<{
@@ -621,4 +653,4 @@ declare namespace ProteusTextarea {
 //#region src/use-proteus-value/useProteusValue.d.ts
 declare function useProteusValue(element: ProteusValueProps): any;
 //#endregion
-export { type FileUploadMetadata, ProteusAction, ProteusBridge, ProteusChart, ProteusDataTable, ProteusDateInput, ProteusDocumentRenderer, ProteusDocumentRendererProps, ProteusDocumentShell, ProteusDocumentShellProps, ProteusFederated, ProteusFileUpload, ProteusFileUploadProps, ProteusImage, ProteusImageCarousel, ProteusInput, ProteusLength, ProteusMap, ProteusMapIndex, ProteusPillMenu, ProteusPillMenuProps, ProteusRichTextEditor, ProteusSelect, ProteusShow, ProteusTextarea, type StructuredMessage, type UploadFile, safeParseDocument, useProteusValue };
+export { type FileUploadMetadata, ProteusAction, ProteusBridge, ProteusChart, ProteusDataTable, ProteusDateInput, ProteusDocumentRenderer, ProteusDocumentRendererProps, ProteusDocumentShell, ProteusDocumentShellProps, ProteusFederated, ProteusFileUpload, ProteusFileUploadProps, ProteusImage, ProteusImageCarousel, ProteusInput, ProteusLength, ProteusMap, ProteusMapIndex, ProteusMarkdown, ProteusPillMenu, ProteusPillMenuProps, type ProteusPreviewFile, ProteusRichTextEditor, ProteusSelect, ProteusShow, ProteusTextarea, type StructuredMessage, type UploadFile, safeParseDocument, useProteusValue };

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "files": [
     "dist/**",
     "LICENSE"
@@ -38,9 +38,11 @@
     "@tanstack/react-table": "^8.21.3",
     "embla-carousel-react": "^8.6.0",
     "jsonpointer": "^5.0.1",
+    "react-markdown": "^10.1.0",
     "recharts": "^3.8.1",
+    "remark-gfm": "^4.0.1",
     "@optiaxiom/icons": "^1.1.3",
-    "@optiaxiom/react": "^1.9.40"
+    "@optiaxiom/react": "^1.9.41"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.2",