@wallarm-org/design-system 3.2.0 → 3.3.0

package/dist/components/AssistantMessage/AssistantMessageMarkdown.js

@@ -0,0 +1,278 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, memo } from "react";
+import { cn } from "../../utils/cn.js";
+import { Checkmark } from "../Checkmark/index.js";
+import { Separator } from "../Separator/index.js";
+import { tableBodyCellVariants, tableHeadCellVariants } from "../Table/classes.js";
+import { AssistantMessageMarkdownCodeBlock } from "./AssistantMessageMarkdownCodeBlock.js";
+import { AssistantMessageMarkdownInlineCode } from "./AssistantMessageMarkdownInlineCode.js";
+import { AssistantMessageMarkdownLink } from "./AssistantMessageMarkdownLink.js";
+import { AssistantMessageMarkdownTable } from "./AssistantMessageMarkdownTable.js";
+import { assistantMessageMarkdownBlockquoteVariants, assistantMessageMarkdownCellVariants, assistantMessageMarkdownListVariants, assistantMessageMarkdownTaskItemVariants } from "./classes.js";
+import { asTokens, decodeEntities, isClosedFence, lexMarkdown, safeHref } from "./lib/markdown.js";
+const HEADINGS = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6'
+];
+const cell = (base, align)=>cn(base, assistantMessageMarkdownCellVariants({
+        align
+    }));
+const DEFAULTS = {
+    p: ({ children })=>/*#__PURE__*/ jsx("p", {
+            children: children
+        }),
+    h1: ({ children })=>/*#__PURE__*/ jsx("h1", {
+            children: children
+        }),
+    h2: ({ children })=>/*#__PURE__*/ jsx("h2", {
+            children: children
+        }),
+    h3: ({ children })=>/*#__PURE__*/ jsx("h3", {
+            children: children
+        }),
+    h4: ({ children })=>/*#__PURE__*/ jsx("h4", {
+            children: children
+        }),
+    h5: ({ children })=>/*#__PURE__*/ jsx("h5", {
+            children: children
+        }),
+    h6: ({ children })=>/*#__PURE__*/ jsx("h6", {
+            children: children
+        }),
+    strong: ({ children })=>/*#__PURE__*/ jsx("strong", {
+            className: "font-semibold",
+            children: children
+        }),
+    em: ({ children })=>/*#__PURE__*/ jsx("em", {
+            children: children
+        }),
+    del: ({ children })=>/*#__PURE__*/ jsx("del", {
+            children: children
+        }),
+    blockquote: ({ children })=>/*#__PURE__*/ jsx("blockquote", {
+            className: assistantMessageMarkdownBlockquoteVariants(),
+            children: children
+        }),
+    ul: ({ children })=>/*#__PURE__*/ jsx("ul", {
+            className: assistantMessageMarkdownListVariants(),
+            children: children
+        }),
+    ol: ({ start, children })=>/*#__PURE__*/ jsx("ol", {
+            start: start,
+            className: assistantMessageMarkdownListVariants({
+                ordered: true
+            }),
+            children: children
+        }),
+    li: ({ checked, children })=>void 0 === checked ? /*#__PURE__*/ jsx("li", {
+            children: children
+        }) : /*#__PURE__*/ jsxs("li", {
+            className: assistantMessageMarkdownTaskItemVariants(),
+            children: [
+                /*#__PURE__*/ jsx("input", {
+                    type: "checkbox",
+                    checked: checked,
+                    disabled: true,
+                    readOnly: true,
+                    className: "sr-only"
+                }),
+                /*#__PURE__*/ jsx(Checkmark, {
+                    checkedState: checked,
+                    "aria-hidden": "true"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "min-w-0",
+                    children: children
+                })
+            ]
+        }),
+    hr: ()=>/*#__PURE__*/ jsx(Separator, {
+            decorative: false
+        }),
+    table: AssistantMessageMarkdownTable,
+    thead: ({ children })=>/*#__PURE__*/ jsx("thead", {
+            children: children
+        }),
+    tbody: ({ children })=>/*#__PURE__*/ jsx("tbody", {
+            children: children
+        }),
+    tr: ({ children })=>/*#__PURE__*/ jsx("tr", {
+            children: children
+        }),
+    th: ({ align, children })=>/*#__PURE__*/ jsx("th", {
+            scope: "col",
+            className: cell(tableHeadCellVariants(), align),
+            children: children
+        }),
+    td: ({ align, children })=>/*#__PURE__*/ jsx("td", {
+            className: cell(tableBodyCellVariants(), align),
+            children: children
+        }),
+    a: AssistantMessageMarkdownLink,
+    inlineCode: AssistantMessageMarkdownInlineCode,
+    codeBlock: AssistantMessageMarkdownCodeBlock,
+    img: ({ alt })=>alt
+};
+const renderInline = (tokens, w)=>asTokens(tokens).map((t, i)=>{
+        const { c } = w;
+        switch(t.type){
+            case 'text':
+                return t.tokens ? /*#__PURE__*/ jsx(Fragment, {
+                    children: renderInline(t.tokens, w)
+                }, i) : decodeEntities(t.text);
+            case 'escape':
+                return t.text;
+            case 'strong':
+                return /*#__PURE__*/ jsx(c.strong, {
+                    children: renderInline(t.tokens, w)
+                }, i);
+            case 'em':
+                return /*#__PURE__*/ jsx(c.em, {
+                    children: renderInline(t.tokens, w)
+                }, i);
+            case 'del':
+                return /*#__PURE__*/ jsx(c.del, {
+                    children: renderInline(t.tokens, w)
+                }, i);
+            case 'codespan':
+                return /*#__PURE__*/ jsx(c.inlineCode, {
+                    code: t.text,
+                    variant: w.variant,
+                    copyable: !w.inLink && 'chain-of-thought' !== w.variant
+                }, i);
+            case 'br':
+                return /*#__PURE__*/ jsx("br", {}, i);
+            case 'link':
+                {
+                    const href = safeHref(t.href);
+                    const children = renderInline(t.tokens, {
+                        ...w,
+                        inLink: true
+                    });
+                    return href ? /*#__PURE__*/ jsx(c.a, {
+                        href: href,
+                        title: t.title ?? void 0,
+                        variant: w.variant,
+                        children: children
+                    }, i) : /*#__PURE__*/ jsx(Fragment, {
+                        children: children
+                    }, i);
+                }
+            case 'image':
+                {
+                    const src = safeHref(t.href);
+                    return src ? /*#__PURE__*/ jsx(c.img, {
+                        src: src,
+                        alt: t.text,
+                        title: t.title ?? void 0
+                    }, i) : t.text;
+                }
+            case 'html':
+                return /^<br\s*\/?>$/i.test(t.raw) ? /*#__PURE__*/ jsx("br", {}, i) : t.raw;
+            case 'checkbox':
+                return null;
+            default:
+                return t.raw;
+        }
+    });
+const renderBlocks = (tokens, w)=>asTokens(tokens).map((t, i)=>renderBlock(t, i, w));
+const renderBlock = (t, key, w)=>{
+    const { c } = w;
+    switch(t.type){
+        case 'paragraph':
+            return /*#__PURE__*/ jsx(c.p, {
+                children: renderInline(t.tokens, w)
+            }, key);
+        case 'text':
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: t.tokens ? renderInline(t.tokens, w) : decodeEntities(t.text)
+            }, key);
+        case 'heading':
+            {
+                const H = c[HEADINGS[t.depth - 1] ?? 'h6'];
+                return /*#__PURE__*/ jsx(H, {
+                    children: renderInline(t.tokens, w)
+                }, key);
+            }
+        case 'code':
+            return /*#__PURE__*/ jsx(c.codeBlock, {
+                code: t.text,
+                language: t.lang || void 0,
+                complete: !w.streaming || isClosedFence(t.raw)
+            }, key);
+        case 'blockquote':
+            return /*#__PURE__*/ jsx(c.blockquote, {
+                children: renderBlocks(t.tokens, w)
+            }, key);
+        case 'list':
+            {
+                const items = t.items.map((item, j)=>/*#__PURE__*/ jsx(c.li, {
+                        checked: item.task ? item.checked : void 0,
+                        children: renderBlocks(item.tokens, w)
+                    }, j));
+                return t.ordered ? /*#__PURE__*/ jsx(c.ol, {
+                    start: '' === t.start || 1 === t.start ? void 0 : t.start,
+                    children: items
+                }, key) : /*#__PURE__*/ jsx(c.ul, {
+                    children: items
+                }, key);
+            }
+        case 'table':
+            return /*#__PURE__*/ jsxs(c.table, {
+                children: [
+                    /*#__PURE__*/ jsx(c.thead, {
+                        children: /*#__PURE__*/ jsx(c.tr, {
+                            children: t.header.map((h, j)=>/*#__PURE__*/ jsx(c.th, {
+                                    align: h.align ?? void 0,
+                                    children: renderInline(h.tokens, w)
+                                }, j))
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(c.tbody, {
+                        children: t.rows.map((row, j)=>/*#__PURE__*/ jsx(c.tr, {
+                                children: row.map((d, k)=>/*#__PURE__*/ jsx(c.td, {
+                                        align: d.align ?? void 0,
+                                        children: renderInline(d.tokens, w)
+                                    }, k))
+                            }, j))
+                    })
+                ]
+            }, key);
+        case 'hr':
+            return /*#__PURE__*/ jsx(c.hr, {}, key);
+        case 'html':
+            return t.raw.trim() ? /*#__PURE__*/ jsx(c.p, {
+                children: t.raw.trim()
+            }, key) : null;
+        case 'space':
+        case 'def':
+        case 'checkbox':
+            return null;
+        default:
+            return /*#__PURE__*/ jsx(c.p, {
+                children: t.raw
+            }, key);
+    }
+};
+const Block = /*#__PURE__*/ memo(({ token, streaming, variant, components })=>renderBlock(token, 0, {
+        c: components ? {
+            ...DEFAULTS,
+            ...components
+        } : DEFAULTS,
+        variant,
+        streaming,
+        inLink: false
+    }), (a, b)=>a.token.raw === b.token.raw && a.streaming === b.streaming && a.variant === b.variant && a.components === b.components);
+Block.displayName = 'AssistantMessageMarkdownBlock';
+const AssistantMessageMarkdown = ({ text, streaming = false, variant = 'answer', components })=>lexMarkdown(text, streaming).map((token, i)=>/*#__PURE__*/ jsx(Block, {
+            token: token,
+            streaming: streaming,
+            variant: variant,
+            components: components
+        }, i));
+AssistantMessageMarkdown.displayName = 'AssistantMessageMarkdown';
+export { AssistantMessageMarkdown };

package/dist/components/AssistantMessage/AssistantMessageMarkdownCodeBlock.d.ts

@@ -0,0 +1,17 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface AssistantMessageMarkdownCodeBlockProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    code: string;
+    /** The fence info string (`yaml`, `json`, `bash`, `http`…). The app's adapter resolves aliases; unknown → plain. */
+    language?: string;
+    /** false while the fence is still open in a streaming answer: plain text (no re-highlight per token) and no
+     *  copy button. Default true. */
+    complete?: boolean;
+}
+/**
+ * Markdown fenced code (Figma 181:3500: no header, no line numbers, mono 12/20) with a floating copy button.
+ * Highlighting follows the app's `CodeSnippetAdapterProvider`; without one the code is plain.
+ * The test id goes on the snippet, so its parts cascade: `…--code-block--copy-button`.
+ */
+export declare const AssistantMessageMarkdownCodeBlock: FC<AssistantMessageMarkdownCodeBlockProps>;

package/dist/components/AssistantMessage/AssistantMessageMarkdownCodeBlock.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { CodeSnippetActions, CodeSnippetCode, CodeSnippetContent, CodeSnippetCopyButton, CodeSnippetRoot } from "../CodeSnippet/index.js";
+import { assistantMessageMarkdownCodeBlockVariants } from "./classes.js";
+const AssistantMessageMarkdownCodeBlock = (t0)=>{
+    const $ = c(23);
+    let className;
+    let code;
+    let language;
+    let props;
+    let ref;
+    let t1;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, code, language, complete: t1, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = code;
+        $[3] = language;
+        $[4] = props;
+        $[5] = ref;
+        $[6] = t1;
+        $[7] = testIdProp;
+    } else {
+        className = $[1];
+        code = $[2];
+        language = $[3];
+        props = $[4];
+        ref = $[5];
+        t1 = $[6];
+        testIdProp = $[7];
+    }
+    const complete = void 0 === t1 ? true : t1;
+    let t2;
+    if ($[8] !== className) {
+        t2 = cn(assistantMessageMarkdownCodeBlockVariants(), className);
+        $[8] = className;
+        $[9] = t2;
+    } else t2 = $[9];
+    const t3 = complete && language ? language : "text";
+    const t4 = useTestId("code-block", testIdProp);
+    let t5;
+    if ($[10] !== complete) {
+        t5 = complete && /*#__PURE__*/ jsx(CodeSnippetActions, {
+            children: /*#__PURE__*/ jsx(CodeSnippetCopyButton, {})
+        });
+        $[10] = complete;
+        $[11] = t5;
+    } else t5 = $[11];
+    let t6;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+        t6 = /*#__PURE__*/ jsx(CodeSnippetContent, {
+            children: /*#__PURE__*/ jsx(CodeSnippetCode, {})
+        });
+        $[12] = t6;
+    } else t6 = $[12];
+    let t7;
+    if ($[13] !== code || $[14] !== t3 || $[15] !== t4 || $[16] !== t5) {
+        t7 = /*#__PURE__*/ jsxs(CodeSnippetRoot, {
+            code: code,
+            language: t3,
+            "data-testid": t4,
+            children: [
+                t5,
+                t6
+            ]
+        });
+        $[13] = code;
+        $[14] = t3;
+        $[15] = t4;
+        $[16] = t5;
+        $[17] = t7;
+    } else t7 = $[17];
+    let t8;
+    if ($[18] !== props || $[19] !== ref || $[20] !== t2 || $[21] !== t7) {
+        t8 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "assistant-message-markdown-code-block",
+            className: t2,
+            children: t7
+        });
+        $[18] = props;
+        $[19] = ref;
+        $[20] = t2;
+        $[21] = t7;
+        $[22] = t8;
+    } else t8 = $[22];
+    return t8;
+};
+AssistantMessageMarkdownCodeBlock.displayName = "AssistantMessageMarkdownCodeBlock";
+export { AssistantMessageMarkdownCodeBlock };

package/dist/components/AssistantMessage/AssistantMessageMarkdownInlineCode.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+import { type InlineCodeSnippetProps } from '../CodeSnippet/index.js';
+import type { AssistantMessageMarkdownVariant } from './AssistantMessageMarkdown.js';
+export interface AssistantMessageMarkdownInlineCodeProps extends Omit<InlineCodeSnippetProps, 'size' | 'asChild' | 'children'>, TestableProps {
+    /** 'chain-of-thought' mutes the colour and turns copy off (Figma 494:4292). Default 'answer'. */
+    variant?: AssistantMessageMarkdownVariant;
+}
+/** Markdown inline code: `InlineCodeSnippet size='sm'`. The renderer also turns copy off inside a link. */
+export declare const AssistantMessageMarkdownInlineCode: FC<AssistantMessageMarkdownInlineCodeProps>;

package/dist/components/AssistantMessage/AssistantMessageMarkdownInlineCode.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { InlineCodeSnippet } from "../CodeSnippet/index.js";
+import { assistantMessageMarkdownInlineCodeVariants } from "./classes.js";
+const AssistantMessageMarkdownInlineCode = (t0)=>{
+    const $ = c(14);
+    let className;
+    let copyable;
+    let props;
+    let t1;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ variant: t1, copyable, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = copyable;
+        $[3] = props;
+        $[4] = t1;
+        $[5] = testIdProp;
+    } else {
+        className = $[1];
+        copyable = $[2];
+        props = $[3];
+        t1 = $[4];
+        testIdProp = $[5];
+    }
+    const variant = void 0 === t1 ? "answer" : t1;
+    const t2 = copyable ?? "chain-of-thought" !== variant;
+    const t3 = useTestId("inline-code", testIdProp);
+    let t4;
+    if ($[6] !== className || $[7] !== variant) {
+        t4 = cn(assistantMessageMarkdownInlineCodeVariants({
+            muted: "chain-of-thought" === variant
+        }), className);
+        $[6] = className;
+        $[7] = variant;
+        $[8] = t4;
+    } else t4 = $[8];
+    let t5;
+    if ($[9] !== props || $[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+        t5 = /*#__PURE__*/ jsx(InlineCodeSnippet, {
+            ...props,
+            size: "sm",
+            copyable: t2,
+            "data-testid": t3,
+            className: t4
+        });
+        $[9] = props;
+        $[10] = t2;
+        $[11] = t3;
+        $[12] = t4;
+        $[13] = t5;
+    } else t5 = $[13];
+    return t5;
+};
+AssistantMessageMarkdownInlineCode.displayName = "AssistantMessageMarkdownInlineCode";
+export { AssistantMessageMarkdownInlineCode };

package/dist/components/AssistantMessage/AssistantMessageMarkdownLink.d.ts

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import { type LinkProps } from '../Link/index.js';
+import type { AssistantMessageMarkdownVariant } from './AssistantMessageMarkdown.js';
+export interface AssistantMessageMarkdownLinkProps extends Omit<LinkProps, 'href' | 'size' | 'asChild'> {
+    /** Already allow-listed by the renderer: http(s), mailto or relative. */
+    href: string;
+    /** 'chain-of-thought' → 12px, otherwise 14px. Default 'answer'. */
+    variant?: AssistantMessageMarkdownVariant;
+}
+/**
+ * Markdown link: the DS `Link`, inline so it wraps. Absolute URLs open in a new tab without opener or referrer.
+ * For in-app paths override `a` with your router's link: a plain href reloads the page.
+ */
+export declare const AssistantMessageMarkdownLink: FC<AssistantMessageMarkdownLinkProps>;

package/dist/components/AssistantMessage/AssistantMessageMarkdownLink.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Link } from "../Link/index.js";
+import { assistantMessageMarkdownLinkVariants } from "./classes.js";
+const AssistantMessageMarkdownLink = (t0)=>{
+    const $ = c(16);
+    let className;
+    let href;
+    let props;
+    let t1;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ href, variant: t1, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = href;
+        $[3] = props;
+        $[4] = t1;
+        $[5] = testIdProp;
+    } else {
+        className = $[1];
+        href = $[2];
+        props = $[3];
+        t1 = $[4];
+        testIdProp = $[5];
+    }
+    const variant = void 0 === t1 ? "answer" : t1;
+    const external = /^(?:https?:)?\/\//i.test(href);
+    const t2 = external ? "_blank" : void 0;
+    const t3 = external ? "noopener noreferrer" : void 0;
+    const t4 = "chain-of-thought" === variant ? "sm" : "md";
+    const t5 = useTestId("link", testIdProp);
+    let t6;
+    if ($[6] !== className) {
+        t6 = cn(assistantMessageMarkdownLinkVariants(), className);
+        $[6] = className;
+        $[7] = t6;
+    } else t6 = $[7];
+    let t7;
+    if ($[8] !== href || $[9] !== props || $[10] !== t2 || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
+        t7 = /*#__PURE__*/ jsx(Link, {
+            target: t2,
+            rel: t3,
+            ...props,
+            href: href,
+            size: t4,
+            "data-slot": "assistant-message-markdown-link",
+            "data-testid": t5,
+            className: t6
+        });
+        $[8] = href;
+        $[9] = props;
+        $[10] = t2;
+        $[11] = t3;
+        $[12] = t4;
+        $[13] = t5;
+        $[14] = t6;
+        $[15] = t7;
+    } else t7 = $[15];
+    return t7;
+};
+AssistantMessageMarkdownLink.displayName = "AssistantMessageMarkdownLink";
+export { AssistantMessageMarkdownLink };

package/dist/components/AssistantMessage/AssistantMessageMarkdownTable.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface AssistantMessageMarkdownTableProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+}
+/** Markdown table: the DS table frame and cells (`Table/classes`) on a plain `<table>`. Not in Figma. */
+export declare const AssistantMessageMarkdownTable: FC<AssistantMessageMarkdownTableProps>;

package/dist/components/AssistantMessage/AssistantMessageMarkdownTable.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { tableContainerVariants } from "../Table/classes.js";
+import { assistantMessageMarkdownTableGridVariants, assistantMessageMarkdownTableVariants } from "./classes.js";
+const AssistantMessageMarkdownTable = (t0)=>{
+    const $ = c(17);
+    let children;
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, children, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = props;
+        $[4] = ref;
+        $[5] = testIdProp;
+    } else {
+        children = $[1];
+        className = $[2];
+        props = $[3];
+        ref = $[4];
+        testIdProp = $[5];
+    }
+    const t1 = useTestId("table", testIdProp);
+    let t2;
+    if ($[6] !== className) {
+        t2 = cn(tableContainerVariants(), assistantMessageMarkdownTableVariants(), className);
+        $[6] = className;
+        $[7] = t2;
+    } else t2 = $[7];
+    let t3;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = assistantMessageMarkdownTableGridVariants();
+        $[8] = t3;
+    } else t3 = $[8];
+    let t4;
+    if ($[9] !== children) {
+        t4 = /*#__PURE__*/ jsx("table", {
+            className: t3,
+            children: children
+        });
+        $[9] = children;
+        $[10] = t4;
+    } else t4 = $[10];
+    let t5;
+    if ($[11] !== props || $[12] !== ref || $[13] !== t1 || $[14] !== t2 || $[15] !== t4) {
+        t5 = /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "assistant-message-markdown-table",
+            "data-testid": t1,
+            className: t2,
+            children: t4
+        });
+        $[11] = props;
+        $[12] = ref;
+        $[13] = t1;
+        $[14] = t2;
+        $[15] = t4;
+        $[16] = t5;
+    } else t5 = $[16];
+    return t5;
+};
+AssistantMessageMarkdownTable.displayName = "AssistantMessageMarkdownTable";
+export { AssistantMessageMarkdownTable };

package/dist/components/AssistantMessage/classes.d.ts

@@ -0,0 +1,38 @@
+/** Chain of thought / approval card → next part is 12px (4 gap + 8 margin); answer → actions
+ * is 4px. The approval card stretches to the full width (the root is `items-start`). The
+ * actions row is pulled 4px left so the 24px button's icon lines up with the text. */
+export declare const assistantMessageVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Prose for markdown blocks (`AssistantMessageMarkdown` or your renderer): paragraphs 14/24, headings 16/24
+ * medium, lists 14/20 indented 21px. */
+export declare const assistantMessageContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** The Figma "Working..." row (469:341): the ChainOfThought icon cell and shimmering label, without list semantics. */
+export declare const assistantMessageLoaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Not in Figma yet (flagged for design review): danger text with a leading OctagonAlert and a trailing action.
+ * The action (children after the icon and text) is pulled 2px up and down so a 24px Button centres on
+ * the first 20px text line instead of growing the row; `items-start` keeps multi-line text top-aligned. */
+export declare const assistantMessageErrorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Not in Figma (provisional): a muted rule on the start edge. */
+export declare const assistantMessageMarkdownBlockquoteVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Lists carry their own markers: the chain-of-thought body only styles `ul` (its nested chains are `ol`s) and
+ *  ApprovalCardContent styles none. 18px = the CoT indent; AssistantMessageContent's `ps-21` wins in answers. */
+export declare const assistantMessageMarkdownListVariants: (props?: ({
+    ordered?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** GFM task item: the Checkmark takes the bullet's place (provisional). */
+export declare const assistantMessageMarkdownTaskItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** GFM column alignment. Unaligned columns, headers included, sit at the end (user decision). */
+export declare const assistantMessageMarkdownCellVariants: (props?: ({
+    align?: "center" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Long hashes and tokens wrap instead of overflowing the 444px column; muted in the chain of thought
+ *  (Figma 494:4292: color → text-secondary). */
+export declare const assistantMessageMarkdownInlineCodeVariants: (props?: ({
+    muted?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** `Link` is inline-flex (a long link wouldn't wrap) and has outline-none with no ring. */
+export declare const assistantMessageMarkdownLinkVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** A real block for the prose margins (CodeSnippetRoot's outer node is display: contents). */
+export declare const assistantMessageMarkdownCodeBlockVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Scrolls sideways in the narrow panel; the frame is `tableContainerVariants`. */
+export declare const assistantMessageMarkdownTableVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const assistantMessageMarkdownTableGridVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;