@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/text/MarkdownText.js

@@ -1,319 +1,336 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import Text, { TextSize, TextWeight } from "./Text.js";
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { FontFamily } from "../theme/enums.js";
+import Text, { TextSize, TextVariant, TextWeight } from "./Text.js";
+import Divider from "../layout/Divider.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import Span from "./Span.js";
+import Link, { LinkVariant } from "../links/Link.js";
+import Bold from "./Bold.js";
+import Code from "./Code.js";
+import CodeBlock, { CodeBlockLanguage } from "./CodeBlock.js";
 /* empty css                       */
 import { styled } from "@linaria/react";
+import { createContext, forwardRef, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { CheckSquareIcon, SquareIcon } from "@phosphor-icons/react";
 import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 //#region src/text/MarkdownText.tsx
-var _exp = () => ({ theme }) => theme.font.sans.family;
-var _exp2 = () => ({ theme }) => theme.font.sans.size.body_md;
-var _exp3 = () => ({ theme }) => theme.font.sans.height.heading_sm;
-var _exp4 = () => ({ theme }) => theme.color.text.primary;
-var StyledParagraph = withTheme(/*#__PURE__*/ styled("p")({
-	name: "StyledParagraph",
-	class: "sgj79p2",
-	propsAsIs: false,
-	vars: {
-		"sgj79p2-0": [_exp()],
-		"sgj79p2-1": [_exp2()],
-		"sgj79p2-2": [_exp3()],
-		"sgj79p2-3": [_exp4()]
-	}
-}));
-var _exp5 = () => ({ theme }) => theme.color.background.tertiary;
-var _exp6 = () => ({ theme }) => theme.color.border.tertiary;
-var _exp7 = () => ({ theme }) => theme.font.mono.family;
-var _exp8 = () => ({ theme }) => theme.font.mono.size.body_md;
-var _exp9 = () => ({ theme }) => theme.font.mono.height.body_md;
-var _exp0 = () => ({ theme }) => theme.color.text.primary;
-var StyledPre = withTheme(/*#__PURE__*/ styled("pre")({
-	name: "StyledPre",
-	class: "s17hp2a6",
-	propsAsIs: false,
-	vars: {
-		"s17hp2a6-0": [_exp5()],
-		"s17hp2a6-1": [_exp6()],
-		"s17hp2a6-2": [_exp7()],
-		"s17hp2a6-3": [_exp8()],
-		"s17hp2a6-4": [_exp9()],
-		"s17hp2a6-5": [_exp0()]
-	}
-}));
-var _exp1 = () => ({ theme }) => theme.color.background.tertiary;
-var _exp10 = () => ({ theme }) => theme.color.border.tertiary;
-var _exp11 = () => ({ theme }) => theme.font.mono.family;
-var _exp12 = () => ({ theme }) => theme.font.mono.size.body_sm;
-var _exp13 = () => ({ theme }) => theme.font.mono.height.body_sm;
-var _exp14 = () => ({ theme }) => theme.color.text.primary;
-var StyledInlineCode = withTheme(/*#__PURE__*/ styled("code")({
-	name: "StyledInlineCode",
-	class: "s1l8k0vu",
-	propsAsIs: false,
-	vars: {
-		"s1l8k0vu-0": [_exp1()],
-		"s1l8k0vu-1": [_exp10()],
-		"s1l8k0vu-2": [_exp11()],
-		"s1l8k0vu-3": [_exp12()],
-		"s1l8k0vu-4": [_exp13()],
-		"s1l8k0vu-5": [_exp14()]
-	}
-}));
-var _exp15 = () => ({ theme }) => theme.color.border.tertiary;
-var _exp16 = () => ({ theme }) => theme.font.sans.family;
-var _exp17 = () => ({ theme }) => theme.font.sans.size.body_md;
-var _exp18 = () => ({ theme }) => theme.font.sans.height.body_lg;
-var _exp19 = () => ({ theme }) => theme.color.text.secondary;
-var StyledBlockquote = withTheme(/*#__PURE__*/ styled("blockquote")({
-	name: "StyledBlockquote",
-	class: "sa4is7y",
-	propsAsIs: false,
-	vars: {
-		"sa4is7y-0": [_exp15()],
-		"sa4is7y-1": [_exp16()],
-		"sa4is7y-2": [_exp17()],
-		"sa4is7y-3": [_exp18()],
-		"sa4is7y-4": [_exp19()]
-	}
-}));
-var _exp20 = () => ({ theme }) => theme.font.sans.family;
-var _exp21 = () => ({ theme }) => theme.font.sans.size.body_md;
-var _exp22 = () => ({ theme }) => theme.font.sans.height.heading_sm;
-var _exp23 = () => ({ theme }) => theme.color.text.primary;
-var _exp24 = () => ({ theme }) => theme.color.text.secondary;
-var StyledList = withTheme(/*#__PURE__*/ styled("ul")({
-	name: "StyledList",
-	class: "sif7uds",
-	propsAsIs: false,
-	vars: {
-		"sif7uds-0": [_exp20()],
-		"sif7uds-1": [_exp21()],
-		"sif7uds-2": [_exp22()],
-		"sif7uds-3": [_exp23()],
-		"sif7uds-4": [_exp24()]
-	}
-}));
-var _exp25 = () => ({ theme }) => theme.font.sans.family;
-var _exp26 = () => ({ theme }) => theme.font.sans.size.body_md;
-var _exp27 = () => ({ theme }) => theme.font.sans.height.heading_sm;
-var _exp28 = () => ({ theme }) => theme.color.text.primary;
-var _exp29 = () => ({ theme }) => theme.color.text.secondary;
-var _exp30 = () => ({ theme }) => theme.font.sans.weight.medium;
-var StyledOrderedList = withTheme(/*#__PURE__*/ styled("ol")({
-	name: "StyledOrderedList",
-	class: "spy4hi2",
-	propsAsIs: false,
-	vars: {
-		"spy4hi2-0": [_exp25()],
-		"spy4hi2-1": [_exp26()],
-		"spy4hi2-2": [_exp27()],
-		"spy4hi2-3": [_exp28()],
-		"spy4hi2-4": [_exp29()],
-		"spy4hi2-5": [_exp30()]
-	}
-}));
-var _exp31 = () => ({ theme }) => theme.font.sans.weight.medium;
-var _exp32 = () => ({ theme }) => theme.color.text.primary;
-var StyledStrong = withTheme(/*#__PURE__*/ styled("strong")({
-	name: "StyledStrong",
-	class: "s6eo8rp",
-	propsAsIs: false,
-	vars: {
-		"s6eo8rp-0": [_exp31()],
-		"s6eo8rp-1": [_exp32()]
-	}
-}));
-var _exp33 = () => ({ theme }) => theme.color.text.primary;
-var StyledEm = withTheme(/*#__PURE__*/ styled("em")({
-	name: "StyledEm",
-	class: "s1s7p3od",
-	propsAsIs: false,
-	vars: { "s1s7p3od-0": [_exp33()] }
-}));
-var _exp35 = () => ({ theme }) => theme.color.text.tertiary;
-var _exp36 = () => ({ theme }) => theme.color.text.primary;
-var StyledAnchor = withTheme(/*#__PURE__*/ styled("a")({
-	name: "StyledAnchor",
-	class: "s1ll404u",
-	propsAsIs: false,
-	vars: {
-		"s1ll404u-0": [_exp36()],
-		"s1ll404u-1": [_exp35()]
-	}
-}));
-var _exp37 = () => ({ theme }) => theme.color.border.tertiary;
-var StyledTableWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StyledTableWrapper",
-	class: "scwvhie",
-	propsAsIs: false,
-	vars: { "scwvhie-0": [_exp37()] }
-}));
-var _exp38 = () => ({ theme }) => theme.font.sans.family;
-var _exp39 = () => ({ theme }) => theme.font.sans.size.body_md;
-var _exp40 = () => ({ theme }) => theme.font.sans.height.heading_sm;
-var _exp41 = () => ({ theme }) => theme.color.text.primary;
-var StyledTable = withTheme(/*#__PURE__*/ styled("table")({
-	name: "StyledTable",
-	class: "svk1lh",
-	propsAsIs: false,
-	vars: {
-		"svk1lh-0": [_exp38()],
-		"svk1lh-1": [_exp39()],
-		"svk1lh-2": [_exp40()],
-		"svk1lh-3": [_exp41()]
-	}
-}));
-var _exp42 = () => ({ theme }) => theme.color.border.secondary;
-var StyledThead = withTheme(/*#__PURE__*/ styled("thead")({
-	name: "StyledThead",
-	class: "ss1iwpz",
-	propsAsIs: false,
-	vars: { "ss1iwpz-0": [_exp42()] }
-}));
-var _exp43 = () => ({ theme }) => theme.font.sans.weight.medium;
-var _exp44 = () => ({ theme }) => theme.color.text.secondary;
-var StyledTh = withTheme(/*#__PURE__*/ styled("th")({
-	name: "StyledTh",
-	class: "shi85us",
-	propsAsIs: false,
-	vars: {
-		"shi85us-0": [_exp43()],
-		"shi85us-1": [_exp44()]
-	}
-}));
-var _exp45 = () => ({ theme }) => theme.color.border.tertiary;
-var StyledTd = withTheme(/*#__PURE__*/ styled("td")({
-	name: "StyledTd",
-	class: "s10h6trl",
-	propsAsIs: false,
-	vars: { "s10h6trl-0": [_exp45()] }
-}));
-var StyledHeadingWrapper = /*#__PURE__*/ styled("div")({
-	name: "StyledHeadingWrapper",
-	class: "s1sfwhg3",
+/**
+* Renders a Markdown string (GitHub-flavored) as DLS typography: paragraphs and list items through
+* `Text isProse` (line height 1.5), headings as real `h1`–`h6` through `Text`, inline code through
+* `Code`, links through `Link`, fenced code through `CodeBlock` (with copy), rules through
+* `Divider`, and tables and block quotes on hairlines. For app-authored or model-generated copy:
+* chat answers, notes, documents, release notes.
+*
+* Raw HTML in `content` is dropped unless `shouldRenderHtml` is set (trusted content only).
+* `react-markdown`'s default URL transform strips `javascript:` and other unsafe URLs either way.
+* It renders; it does not edit or fetch. To lay out UI, use `Text` and `Flex`.
+*/
+/** Heading steps (the 1.x steps). */
+var MARKDOWN_TEXT_HEADING_TO_TEXT_SIZE_MAP = {
+	h1: TextSize.HEADING_LG,
+	h2: TextSize.HEADING_MD,
+	h3: TextSize.HEADING_SM,
+	h4: TextSize.BODY_LG,
+	h5: TextSize.BODY_MD,
+	h6: TextSize.BODY_SM
+};
+/** Body step per family: serif starts at its smallest real step (Article III-A.3). */
+var MARKDOWN_TEXT_FAMILY_TO_BODY_SIZE_MAP = {
+	[FontFamily.SANS]: TextSize.BODY_MD,
+	[FontFamily.SERIF]: TextSize.BODY_LG
+};
+/** Fence info strings (lower-cased) to CodeBlock languages; anything else is `PLAIN`. */
+var MARKDOWN_TEXT_FENCE_TO_LANGUAGE_MAP = {
+	sh: CodeBlockLanguage.BASH,
+	shell: CodeBlockLanguage.BASH,
+	bash: CodeBlockLanguage.BASH,
+	zsh: CodeBlockLanguage.BASH,
+	console: CodeBlockLanguage.BASH,
+	css: CodeBlockLanguage.CSS,
+	go: CodeBlockLanguage.GO,
+	golang: CodeBlockLanguage.GO,
+	graphql: CodeBlockLanguage.GRAPHQL,
+	gql: CodeBlockLanguage.GRAPHQL,
+	html: CodeBlockLanguage.HTML,
+	xml: CodeBlockLanguage.HTML,
+	svg: CodeBlockLanguage.HTML,
+	js: CodeBlockLanguage.JAVASCRIPT,
+	javascript: CodeBlockLanguage.JAVASCRIPT,
+	mjs: CodeBlockLanguage.JAVASCRIPT,
+	cjs: CodeBlockLanguage.JAVASCRIPT,
+	json: CodeBlockLanguage.JSON,
+	jsonc: CodeBlockLanguage.JSON,
+	json5: CodeBlockLanguage.JSON,
+	jsx: CodeBlockLanguage.JSX,
+	md: CodeBlockLanguage.MARKDOWN,
+	markdown: CodeBlockLanguage.MARKDOWN,
+	proto: CodeBlockLanguage.PROTOBUF,
+	protobuf: CodeBlockLanguage.PROTOBUF,
+	py: CodeBlockLanguage.PYTHON,
+	python: CodeBlockLanguage.PYTHON,
+	rs: CodeBlockLanguage.RUST,
+	rust: CodeBlockLanguage.RUST,
+	sql: CodeBlockLanguage.SQL,
+	postgres: CodeBlockLanguage.SQL,
+	postgresql: CodeBlockLanguage.SQL,
+	mysql: CodeBlockLanguage.SQL,
+	toml: CodeBlockLanguage.TOML,
+	tsx: CodeBlockLanguage.TSX,
+	ts: CodeBlockLanguage.TYPESCRIPT,
+	typescript: CodeBlockLanguage.TYPESCRIPT,
+	mts: CodeBlockLanguage.TYPESCRIPT,
+	cts: CodeBlockLanguage.TYPESCRIPT,
+	yaml: CodeBlockLanguage.YAML,
+	yml: CodeBlockLanguage.YAML
+};
+/** A `scheme://` URL opens in a new tab; relative, `#` and `mailto:` links stay. */
+var ABSOLUTE_URL = /^[a-z][a-z0-9+.-]*:\/\//i;
+/** Blocks are spaced by the root's gap; nothing has margins. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-MarkdownText-rgj79p2",
 	propsAsIs: false
 });
-var markdownComponents = {
-	pre: ({ children, ...props }) => /* @__PURE__ */ jsx(StyledPre, {
-		...props,
+/** A heading sits 16px below the previous block and 8px above its own content. */
+var HEADING_CSS = "gx-MarkdownText-HEADING_CSS-h17hp2a6";
+var LIST_CSS = "gx-MarkdownText-LIST_CSS-l1l8k0vu";
+var UNORDERED_CSS = "gx-MarkdownText-UNORDERED_CSS-ua4is7y";
+var ORDERED_CSS = "gx-MarkdownText-ORDERED_CSS-oif7uds";
+/** A task item: the checkbox glyph, then the copy; no bullet. */
+var TASK_ITEM_CSS = "gx-MarkdownText-TASK_ITEM_CSS-tpy4hi2";
+/** The task glyph's box: one prose line tall, so it sits on the first line. */
+var TASK_GLYPH_CSS = "gx-MarkdownText-TASK_GLYPH_CSS-t6eo8rp";
+var BLOCKQUOTE_CSS = "gx-MarkdownText-BLOCKQUOTE_CSS-b1s7p3od";
+var IMAGE_CSS = "gx-MarkdownText-IMAGE_CSS-i1ll404u";
+var TABLE_WRAPPER_CSS = "gx-MarkdownText-TABLE_WRAPPER_CSS-tcwvhie";
+var TABLE_CSS = "gx-MarkdownText-TABLE_CSS-tvk1lh";
+/** Cells on the 32px rung: 8px around a 16px UI line. */
+var CELL_CSS = "gx-MarkdownText-CELL_CSS-cs1iwpz";
+var CELL_ALIGN_TO_CSS_MAP = {
+	left: "gx-MarkdownText-left-lhi85us",
+	center: "gx-MarkdownText-center-c10h6trl",
+	right: "gx-MarkdownText-right-r1sfwhg3"
+};
+/** Whether the current block is inside a quote (quoted copy is secondary). */
+var QuoteContext = createContext(false);
+/** Concatenated text of a hast subtree. */
+var textOf = (node) => node === void 0 ? "" : node.type === "text" ? node.value ?? "" : (node.children ?? []).map(textOf).join("");
+/** The fence language of a `pre`'s `code` child, from its `language-xxx` class. */
+function fenceLanguageOf(code) {
+	const classNames = code?.properties?.className;
+	const fence = (Array.isArray(classNames) ? classNames.map(String) : []).find((name) => name.startsWith("language-"))?.slice(9);
+	if (fence === void 0 || fence === "") return CodeBlockLanguage.PLAIN;
+	return MARKDOWN_TEXT_FENCE_TO_LANGUAGE_MAP[fence.toLowerCase()] ?? CodeBlockLanguage.PLAIN;
+}
+/** Picks the `id`, `aria-*` and `data-*` props react-markdown set on an element. */
+function passthroughOf(props) {
+	const picked = {};
+	for (const [name, value] of Object.entries(props)) if (value !== void 0 && (name === "id" || name.startsWith("aria-") || name.startsWith("data-"))) picked[name] = value;
+	return picked;
+}
+var isCellAlign = (value) => value === "left" || value === "center" || value === "right";
+/** GFM column alignment, from the cell's `style` (react-markdown) or its `align`. */
+function cellAlignOf(style, node) {
+	const align = style?.textAlign ?? node?.properties?.align;
+	return isCellAlign(align) ? align : null;
+}
+/** A paragraph in the body step, secondary inside a quote. */
+function Paragraph({ family, passthrough, children }) {
+	const isQuoted = useContext(QuoteContext);
+	return /* @__PURE__ */ jsx(Text, {
+		...passthrough,
+		as: "p",
+		isProse: true,
+		family,
+		size: MARKDOWN_TEXT_FAMILY_TO_BODY_SIZE_MAP[family],
+		variant: isQuoted ? TextVariant.SECONDARY : TextVariant.PRIMARY,
 		children
-	}),
-	code: ({ className, children, ...props }) => {
-		if (className?.startsWith("language-")) return /* @__PURE__ */ jsx("code", {
-			className,
-			...props,
+	});
+}
+/** A list item in the body step, secondary inside a quote; task items lay out their glyph. */
+function ListItem({ family, className, passthrough, children }) {
+	const isQuoted = useContext(QuoteContext);
+	const isTask = className?.split(" ").includes("task-list-item") ?? false;
+	return /* @__PURE__ */ jsx(Text, {
+		...passthrough,
+		as: "li",
+		isProse: true,
+		family,
+		size: MARKDOWN_TEXT_FAMILY_TO_BODY_SIZE_MAP[family],
+		variant: isQuoted ? TextVariant.SECONDARY : TextVariant.PRIMARY,
+		...isTask ? { className: TASK_ITEM_CSS } : {},
+		children
+	});
+}
+/** A heading `h1`–`h6`; GFM's visually hidden footnote heading stays visually hidden. */
+function createHeading(tag, family) {
+	return function MarkdownHeading({ className, children, node: _node, ...props }) {
+		const passthrough = passthroughOf(props);
+		if (className?.split(" ").includes("sr-only")) return /* @__PURE__ */ jsx(VisuallyHidden, {
+			...passthrough,
+			as: tag,
 			children
 		});
-		return /* @__PURE__ */ jsx(StyledInlineCode, {
-			...props,
+		return /* @__PURE__ */ jsx(Text, {
+			...passthrough,
+			as: tag,
+			size: MARKDOWN_TEXT_HEADING_TO_TEXT_SIZE_MAP[tag],
+			weight: TextWeight.MEDIUM,
+			family,
+			isSelectable: true,
+			className: HEADING_CSS,
 			children
 		});
-	},
-	p: ({ children, ...props }) => /* @__PURE__ */ jsx(StyledParagraph, {
-		...props,
-		children
-	}),
-	h1: ({ children }) => /* @__PURE__ */ jsx(StyledHeadingWrapper, { children: /* @__PURE__ */ jsx(Text, {
-		size: TextSize.HEADING_LG,
-		weight: TextWeight.MEDIUM,
-		isSelectable: true,
-		children
-	}) }),
-	h2: ({ children }) => /* @__PURE__ */ jsx(StyledHeadingWrapper, { children: /* @__PURE__ */ jsx(Text, {
-		size: TextSize.HEADING_MD,
-		weight: TextWeight.MEDIUM,
-		isSelectable: true,
-		children
-	}) }),
-	h3: ({ children }) => /* @__PURE__ */ jsx(StyledHeadingWrapper, { children: /* @__PURE__ */ jsx(Text, {
-		size: TextSize.HEADING_SM,
-		weight: TextWeight.MEDIUM,
-		isSelectable: true,
-		children
-	}) }),
-	h4: ({ children }) => /* @__PURE__ */ jsx(StyledHeadingWrapper, { children: /* @__PURE__ */ jsx(Text, {
-		size: TextSize.BODY_LG,
-		weight: TextWeight.MEDIUM,
-		isSelectable: true,
-		children
-	}) }),
-	h5: ({ children }) => /* @__PURE__ */ jsx(StyledHeadingWrapper, { children: /* @__PURE__ */ jsx(Text, {
-		weight: TextWeight.MEDIUM,
-		isSelectable: true,
-		children
-	}) }),
-	h6: ({ children }) => /* @__PURE__ */ jsx(StyledHeadingWrapper, { children: /* @__PURE__ */ jsx(Text, {
-		size: TextSize.BODY_SM,
-		weight: TextWeight.MEDIUM,
-		isSelectable: true,
-		children
-	}) }),
-	ul: ({ children, ...props }) => /* @__PURE__ */ jsx(StyledList, {
-		...props,
-		children
-	}),
-	ol: ({ children, ...props }) => /* @__PURE__ */ jsx(StyledOrderedList, {
-		...props,
-		children
-	}),
-	li: ({ children, ...props }) => /* @__PURE__ */ jsx("li", {
-		...props,
-		children
-	}),
-	blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx(StyledBlockquote, {
-		...props,
-		children
-	}),
-	a: ({ children, href, ...props }) => /* @__PURE__ */ jsx(StyledAnchor, {
-		...props,
-		href,
-		target: "_blank",
-		rel: "noreferrer",
-		children
-	}),
-	strong: ({ children, ...props }) => /* @__PURE__ */ jsx(StyledStrong, {
-		...props,
-		children
-	}),
-	em: ({ children, ...props }) => /* @__PURE__ */ jsx(StyledEm, {
-		...props,
-		children
-	}),
-	table: ({ children, ...props }) => /* @__PURE__ */ jsx(StyledTableWrapper, { children: /* @__PURE__ */ jsx(StyledTable, {
-		...props,
-		children
-	}) }),
-	thead: ({ children, ...props }) => /* @__PURE__ */ jsx(StyledThead, {
-		...props,
-		children
-	}),
-	th: ({ children, ...props }) => /* @__PURE__ */ jsx(StyledTh, {
-		...props,
-		children
-	}),
-	td: ({ children, ...props }) => /* @__PURE__ */ jsx(StyledTd, {
-		...props,
-		children
-	})
+	};
+}
+/** The DLS renderers for one prose family. */
+function createMarkdownComponents(family) {
+	return {
+		p: ({ children, node: _node, ...props }) => /* @__PURE__ */ jsx(Paragraph, {
+			family,
+			passthrough: passthroughOf(props),
+			children
+		}),
+		h1: createHeading("h1", family),
+		h2: createHeading("h2", family),
+		h3: createHeading("h3", family),
+		h4: createHeading("h4", family),
+		h5: createHeading("h5", family),
+		h6: createHeading("h6", family),
+		ul: ({ className, children }) => /* @__PURE__ */ jsx("ul", {
+			className: cx(LIST_CSS, UNORDERED_CSS, className),
+			children
+		}),
+		ol: ({ className, start, children }) => /* @__PURE__ */ jsx("ol", {
+			className: cx(LIST_CSS, ORDERED_CSS, className),
+			start,
+			children
+		}),
+		li: ({ className, children, node: _node, ...props }) => /* @__PURE__ */ jsx(ListItem, {
+			family,
+			className,
+			passthrough: passthroughOf(props),
+			children
+		}),
+		input: ({ checked }) => /* @__PURE__ */ jsx("span", {
+			className: TASK_GLYPH_CSS,
+			children: /* @__PURE__ */ jsx(Icon, {
+				component: checked ? CheckSquareIcon : SquareIcon,
+				size: 16,
+				variant: IconVariant.SECONDARY,
+				ariaLabel: checked ? "Done" : "Not done"
+			})
+		}),
+		blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", {
+			className: BLOCKQUOTE_CSS,
+			children: /* @__PURE__ */ jsx(QuoteContext.Provider, {
+				value: true,
+				children
+			})
+		}),
+		pre: ({ node }) => {
+			const code = node?.children?.find((child) => child.type === "element" && child.tagName === "code");
+			return /* @__PURE__ */ jsx(CodeBlock, {
+				content: textOf(code).replace(/\n$/, ""),
+				language: fenceLanguageOf(code),
+				canCopy: true
+			});
+		},
+		code: ({ children }) => /* @__PURE__ */ jsx(Code, { children }),
+		a: ({ href, children, node: _node, ...props }) => /* @__PURE__ */ jsx(Link, {
+			...passthroughOf(props),
+			...href === void 0 ? {} : { href },
+			variant: LinkVariant.NEUTRAL,
+			isExternal: href !== void 0 && ABSOLUTE_URL.test(href),
+			children
+		}),
+		strong: ({ children }) => /* @__PURE__ */ jsx(Bold, { children }),
+		em: ({ children }) => /* @__PURE__ */ jsx(Span, {
+			isItalic: true,
+			children
+		}),
+		del: ({ children }) => /* @__PURE__ */ jsx(Span, {
+			isStrikethrough: true,
+			children
+		}),
+		hr: () => /* @__PURE__ */ jsx(Divider, {}),
+		img: ({ src, alt, title }) => /* @__PURE__ */ jsx("img", {
+			className: IMAGE_CSS,
+			src,
+			alt: alt ?? "",
+			title,
+			loading: "lazy"
+		}),
+		table: ({ children }) => /* @__PURE__ */ jsx("div", {
+			className: TABLE_WRAPPER_CSS,
+			tabIndex: -1,
+			children: /* @__PURE__ */ jsx("table", {
+				className: TABLE_CSS,
+				children
+			})
+		}),
+		th: ({ style, node, children }) => {
+			const align = cellAlignOf(style, node);
+			return /* @__PURE__ */ jsx("th", {
+				className: cx(CELL_CSS, align && CELL_ALIGN_TO_CSS_MAP[align]),
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: TextSize.BODY_MD,
+					weight: TextWeight.MEDIUM,
+					variant: TextVariant.SECONDARY,
+					children
+				})
+			});
+		},
+		td: ({ style, node, children }) => {
+			const align = cellAlignOf(style, node);
+			return /* @__PURE__ */ jsx("td", {
+				className: cx(CELL_CSS, align && CELL_ALIGN_TO_CSS_MAP[align]),
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: TextSize.BODY_MD,
+					variant: TextVariant.PRIMARY,
+					isSelectable: true,
+					children
+				})
+			});
+		}
+	};
+}
+/** The renderers per family, built once at module load (no DOM access). */
+var MARKDOWN_TEXT_FAMILY_TO_COMPONENTS_MAP = {
+	[FontFamily.SANS]: createMarkdownComponents(FontFamily.SANS),
+	[FontFamily.SERIF]: createMarkdownComponents(FontFamily.SERIF)
 };
-/**
-* Renders Markdown using DLS components — headings, lists, tables and code all
-* come out on theme tokens rather than browser defaults.
-*
-* Raw HTML in `content` is rendered, not escaped. Don't pass untrusted input.
-*/
-var MarkdownText = ({ content, componentOverrides }) => {
-	const components = componentOverrides ? {
-		...markdownComponents,
+var REMARK_PLUGINS = [remarkGfm];
+var REHYPE_PLUGINS_HTML = [rehypeRaw];
+var REHYPE_PLUGINS_NONE = [];
+/** Markdown as DLS typography: prose line height, real headings, CodeBlock fences, Link. */
+var MarkdownText = forwardRef(function MarkdownText({ content, family = FontFamily.SANS, shouldRenderHtml = false, componentOverrides, id, className, style, ...rest }, ref) {
+	const base = MARKDOWN_TEXT_FAMILY_TO_COMPONENTS_MAP[family];
+	const components = useMemo(() => componentOverrides ? {
+		...base,
 		...componentOverrides
-	} : markdownComponents;
-	return /* @__PURE__ */ jsx(Markdown, {
-		remarkPlugins: [remarkGfm],
-		rehypePlugins: [rehypeRaw],
-		components,
-		children: content
+	} : base, [base, componentOverrides]);
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		id,
+		className,
+		style,
+		children: /* @__PURE__ */ jsx(Markdown, {
+			remarkPlugins: REMARK_PLUGINS,
+			rehypePlugins: shouldRenderHtml ? REHYPE_PLUGINS_HTML : REHYPE_PLUGINS_NONE,
+			skipHtml: !shouldRenderHtml,
+			components,
+			children: content
+		})
 	});
-};
+});
+MarkdownText.displayName = "MarkdownText";
 //#endregion
 export { MarkdownText as default };