myst-to-react 0.3.7 → 0.4.0

package/dist/esm/basic.js

@@ -1,99 +1,95 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HashLink } from './heading';
 import classNames from 'classnames';
-import { HoverPopover } from './components/HoverPopover';
+import { Tooltip } from './components';
+import { MyST } from './MyST';
 const BASIC_RENDERERS = {
-    delete(node, children) {
-        return _jsx("del", { children: children }, node.key);
+    text({ node }) {
+        return node.value;
     },
-    strong(node, children) {
-        return _jsx("strong", { children: children }, node.key);
+    delete({ node }) {
+        return (_jsx("del", { children: _jsx(MyST, { ast: node.children }) }));
     },
-    emphasis(node, children) {
-        return _jsx("em", { children: children }, node.key);
+    strong({ node }) {
+        return (_jsx("strong", { children: _jsx(MyST, { ast: node.children }) }));
     },
-    underline(node, children) {
-        return (_jsx("span", { style: { textDecoration: 'underline' }, children: children }, node.key));
+    emphasis({ node }) {
+        return (_jsx("em", { children: _jsx(MyST, { ast: node.children }) }));
     },
-    smallcaps(node, children) {
-        return (_jsx("span", { style: { fontVariant: 'small-caps' }, children: children }, node.key));
+    underline({ node }) {
+        return (_jsx("span", { style: { textDecoration: 'underline' }, children: _jsx(MyST, { ast: node.children }) }));
     },
-    link(node, children) {
-        return (_jsx("a", { target: "_blank", href: node.url, rel: "noreferrer", children: children }, node.key));
+    smallcaps({ node }) {
+        return (_jsx("span", { style: { fontVariant: 'small-caps' }, children: _jsx(MyST, { ast: node.children }) }));
     },
-    paragraph(node, children) {
-        return (_jsx("p", { id: node.html_id, children: children }, node.key));
+    link({ node }) {
+        return (_jsx("a", { target: "_blank", href: node.url, rel: "noreferrer", children: _jsx(MyST, { ast: node.children }) }));
     },
-    break(node) {
-        return _jsx("br", {}, node.key);
+    paragraph({ node }) {
+        return (_jsx("p", { id: node.html_id, children: _jsx(MyST, { ast: node.children }) }));
     },
-    inlineMath(node) {
-        return _jsx("code", { children: node.value }, node.key);
+    break() {
+        return _jsx("br", {});
     },
-    math(node) {
-        return _jsx("code", { children: node.value }, node.key);
+    inlineMath({ node }) {
+        return _jsx("code", { children: node.value });
     },
-    list(node, children) {
+    math({ node }) {
+        return _jsx("code", { children: node.value });
+    },
+    list({ node }) {
         if (node.ordered) {
-            return (_jsx("ol", { start: node.start || undefined, id: node.html_id, children: children }, node.key));
+            return (_jsx("ol", { start: node.start || undefined, id: node.html_id, children: _jsx(MyST, { ast: node.children }) }));
         }
-        return (_jsx("ul", { id: node.html_id, children: children }, node.key));
+        return (_jsx("ul", { id: node.html_id, children: _jsx(MyST, { ast: node.children }) }));
     },
-    listItem(node, children) {
+    listItem({ node }) {
         if (node.checked == null) {
-            return _jsx("li", { children: children }, node.key);
+            return (_jsx("li", { children: _jsx(MyST, { ast: node.children }) }));
         }
-        return (_jsxs("li", { className: "task-list-item", children: [_jsx("input", { type: "checkbox", className: "task-list-item-checkbox", defaultChecked: node.checked }), children] }, node.key));
+        return (_jsxs("li", { className: "task-list-item", children: [_jsx("input", { type: "checkbox", className: "task-list-item-checkbox", defaultChecked: node.checked }), _jsx(MyST, { ast: node.children })] }));
     },
-    container(node, children) {
-        return (_jsx("figure", { id: node.html_id || node.identifier || node.key, className: classNames(node.kind, node.class), children: children }, node.key));
+    container({ node }) {
+        return (_jsx("figure", { id: node.html_id || node.identifier || node.key, className: classNames(node.kind, node.class), children: _jsx(MyST, { ast: node.children }) }));
     },
-    caption(node, children) {
-        return (_jsx("figcaption", { className: "group", children: children }, node.key));
+    caption({ node }) {
+        return (_jsx("figcaption", { className: "group", children: _jsx(MyST, { ast: node.children }) }));
     },
-    blockquote(node, children) {
-        return (_jsx("blockquote", { id: node.html_id, children: children }, node.key));
+    blockquote({ node }) {
+        return (_jsx("blockquote", { id: node.html_id, children: _jsx(MyST, { ast: node.children }) }));
     },
-    thematicBreak(node) {
-        return _jsx("hr", { className: "py-2 my-5 translate-y-2" }, node.key);
+    thematicBreak() {
+        return _jsx("hr", { className: "py-2 my-5 translate-y-2" });
     },
-    captionNumber(node, children) {
-        function backwardsCompatibleLabel(value, kind) {
-            var _a, _b;
-            const capital = (_a = kind === null || kind === void 0 ? void 0 : kind.slice(0, 1).toUpperCase()) !== null && _a !== void 0 ? _a : 'F';
-            const body = (_b = kind === null || kind === void 0 ? void 0 : kind.slice(1)) !== null && _b !== void 0 ? _b : 'igure';
-            return `${capital}${body}: ${children}`;
-        }
-        const label = typeof children === 'string' ? backwardsCompatibleLabel(children, node.kind) : children;
+    captionNumber({ node }) {
         const id = node.html_id || node.identifier || node.key;
-        return (_jsx(HashLink, { id: id, kind: node.kind, className: "mr-1 font-semibold text-inherit hover:text-inherit hover:font-semibold", children: label }, node.key));
+        return (_jsx(HashLink, { id: id, kind: node.kind, className: "mr-1 font-semibold text-inherit hover:text-inherit hover:font-semibold", children: _jsx(MyST, { ast: node.children }) }));
     },
-    table(node, children) {
+    table({ node }) {
         // TODO: actually render the tbody on the server if it isn't included here.
-        return (_jsx("table", { children: _jsx("tbody", { children: children }) }, node.key));
+        return (_jsx("table", { children: _jsx("tbody", { children: _jsx(MyST, { ast: node.children }) }) }));
     },
-    tableRow(node, children) {
-        return _jsx("tr", { children: children }, node.key);
+    tableRow({ node }) {
+        return (_jsx("tr", { children: _jsx(MyST, { ast: node.children }) }));
     },
-    tableCell(node, children) {
+    tableCell({ node }) {
         const ifGreaterThanOne = (num) => (num === 1 ? undefined : num);
         const attrs = {
-            key: node.key,
             rowSpan: ifGreaterThanOne(node.rowspan),
             colSpan: ifGreaterThanOne(node.colspan),
         };
         if (node.header)
-            return _jsx("th", Object.assign({}, attrs, { children: children }));
-        return _jsx("td", Object.assign({}, attrs, { children: children }));
+            return (_jsx("th", Object.assign({}, attrs, { children: _jsx(MyST, { ast: node.children }) })));
+        return (_jsx("td", Object.assign({}, attrs, { children: _jsx(MyST, { ast: node.children }) })));
     },
-    subscript(node, children) {
-        return _jsx("sub", { children: children }, node.key);
+    subscript({ node }) {
+        return (_jsx("sub", { children: _jsx(MyST, { ast: node.children }) }));
     },
-    superscript(node, children) {
-        return _jsx("sup", { children: children }, node.key);
+    superscript({ node }) {
+        return (_jsx("sup", { children: _jsx(MyST, { ast: node.children }) }));
     },
-    abbreviation(node, children) {
-        return (_jsx(HoverPopover, { side: "top", card: _jsx("div", { className: "p-1 text-xs text-white bg-blue-900 dark:bg-white dark:text-black", children: node.title }), arrowClass: "fill-blue-900 dark:fill-white", children: _jsx("abbr", { "aria-label": node.title, className: "border-b border-dotted cursor-help", children: children }) }, node.key));
+    abbreviation({ node }) {
+        return (_jsx(Tooltip, { title: node.title, children: _jsx("abbr", { "aria-label": node.title, className: "border-b border-dotted cursor-help", children: _jsx(MyST, { ast: node.children }) }) }));
     },
     mystComment() {
         return null;
@@ -101,28 +97,17 @@ const BASIC_RENDERERS = {
     comment() {
         return null;
     },
-    definitionList(node, children) {
-        return (_jsx("dl", { className: "my-5", id: node.html_id, children: children }, node.key));
-    },
-    definitionTerm(node, children) {
-        let strongChildren = children;
-        if (Array.isArray(children)) {
-            const allowedStrongTypes = new Set(['emphasis']);
-            strongChildren = children.map((child, i) => {
-                if (typeof child === 'string')
-                    return _jsx("strong", { children: child }, node.key + i);
-                if (allowedStrongTypes.has(child === null || child === void 0 ? void 0 : child.type))
-                    return _jsx("strong", { children: child }, node.key + i);
-                return child;
-            });
-        }
-        else if (typeof children === 'string') {
-            strongChildren = _jsx("strong", { children: children }, node.key + '0');
-        }
-        return (_jsx("dt", { id: node.html_id, children: strongChildren }, node.key));
+    definitionList({ node }) {
+        return (_jsx("dl", { className: "my-5", id: node.html_id, children: _jsx(MyST, { ast: node.children }) }));
+    },
+    definitionTerm({ node }) {
+        var _a, _b;
+        const allowedStrongTypes = new Set(['text', 'emphasis']);
+        const makeStrong = (_b = (_a = node.children) === null || _a === void 0 ? void 0 : _a.reduce((allowed, n) => allowed && allowedStrongTypes.has(n.type), true)) !== null && _b !== void 0 ? _b : false;
+        return (_jsx("dt", { id: node.html_id, children: makeStrong ? (_jsx("strong", { children: _jsx(MyST, { ast: node.children }) })) : (_jsx(MyST, { ast: node.children })) }));
     },
-    definitionDescription(node, children) {
-        return _jsx("dd", { children: children }, node.key);
+    definitionDescription({ node }) {
+        return (_jsx("dd", { children: _jsx(MyST, { ast: node.children }) }));
     },
 };
 export default BASIC_RENDERERS;

package/dist/esm/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAI1D,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AACF,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AACF,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AACF,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,YAAY,CAAC,UAAU,CAS3C,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,YAAY,CAAC,UAAU,CAS3C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,YAAY,CAAC,aAAa,CAMjD,CAAC;AA2FF,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,QAAQ,CAM/C,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;CAKnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAM1D,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AACF,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AACF,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AACF,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,YAAY,CAAC,UAAU,CAM3C,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,YAAY,CAAC,UAAU,CAM3C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,YAAY,CAAC,aAAa,CAMjD,CAAC;AAmDF,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,QAAQ,CAoC/C,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;CAKnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/esm/card.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { useLinkProvider, useBaseurl, withBaseurl } from '@myst-theme/providers';
-export const Header = (node, children) => {
-    return (_jsx("header", { className: "py-1 pl-3 m-0 border-b border-gray-100 bg-gray-50 dark:bg-slate-900 dark:border-gray-800", children: children }, node.key));
+import { MyST } from './MyST';
+export const Header = ({ node }) => {
+    return (_jsx("header", { className: "py-1 pl-3 m-0 border-b border-gray-100 bg-gray-50 dark:bg-slate-900 dark:border-gray-800", children: _jsx(MyST, { ast: node.children }) }));
 };
-export const Footer = (node, children) => {
-    return (_jsx("footer", { className: "py-1 pl-3 m-0 border-t border-gray-100 bg-gray-50 dark:bg-slate-900 dark:border-gray-800", children: children }, node.key));
+export const Footer = ({ node }) => {
+    return (_jsx("footer", { className: "py-1 pl-3 m-0 border-t border-gray-100 bg-gray-50 dark:bg-slate-900 dark:border-gray-800", children: _jsx(MyST, { ast: node.children }) }));
 };
-export const CardTitle = (node, children) => {
-    return (_jsx("div", { className: "pt-3 font-bold group-hover:underline", children: children }, node.key));
+export const CardTitle = ({ node }) => {
+    return (_jsx("div", { className: "pt-3 font-bold group-hover:underline", children: _jsx(MyST, { ast: node.children }) }));
 };
 function getParts(children) {
     var _a, _b;
@@ -33,17 +34,16 @@ function ExternalOrInternalLink({ to, className, isStatic, prefetch = 'intent',
     }
     return (_jsx(Link, { to: withBaseurl(to, baseurl), className: className, prefetch: prefetch, children: children }));
 }
-function Card({ children, url, isStatic, }) {
-    const parts = getParts(children);
+export const CardRenderer = ({ node }) => {
+    const parts = getParts(node.children);
+    const url = node.url;
+    const isStatic = node.static || false;
     const link = !!url;
     const sharedStyle = 'my-5 rounded shadow dark:shadow-neutral-800 overflow-hidden border border-gray-100 dark:border-gray-800 flex flex-col';
     if (link) {
-        return (_jsxs(ExternalOrInternalLink, { to: url, isStatic: isStatic, className: classNames(sharedStyle, 'text-inherit hover:text-inherit', 'block font-normal no-underline hover:no-underline cursor-pointer group', 'hover:border-blue-500 dark:hover:border-blue-400'), children: [parts.header, _jsx("div", { className: "flex-grow px-4 py-2", children: parts.body }), parts.footer] }));
+        return (_jsxs(ExternalOrInternalLink, { to: url, isStatic: isStatic, className: classNames(sharedStyle, 'text-inherit hover:text-inherit', 'block font-normal no-underline hover:no-underline cursor-pointer group', 'hover:border-blue-500 dark:hover:border-blue-400'), children: [_jsx(MyST, { ast: parts.header }), _jsx("div", { className: "flex-grow px-4 py-2", children: _jsx(MyST, { ast: parts.body }) }), _jsx(MyST, { ast: parts.footer })] }));
     }
-    return (_jsxs("div", { className: sharedStyle, children: [parts.header, _jsx("div", { className: "flex-grow px-4 py-2", children: parts.body }), parts.footer] }));
-}
-export const CardRenderer = (node, children) => {
-    return (_jsx(Card, { url: node.url, isStatic: node.static || false, children: children }, node.key));
+    return (_jsxs("div", { className: sharedStyle, children: [_jsx(MyST, { ast: parts.header }), _jsx("div", { className: "flex-grow px-4 py-2", children: _jsx(MyST, { ast: parts.body }) }), _jsx(MyST, { ast: parts.footer })] }));
 };
 const CARD_RENDERERS = {
     card: CardRenderer,

package/dist/esm/cite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cite.d.ts","sourceRoot":"","sources":["../../src/cite.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAc1D,eAAO,MAAM,SAAS,EAAE,YAYvB,CAAC;AAEF,eAAO,MAAM,IAAI;;;cAOL,MAAM,SAAS;6CAuB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YAM1B,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAGhD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"cite.d.ts","sourceRoot":"","sources":["../../src/cite.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAe1D,eAAO,MAAM,SAAS,EAAE,YAWvB,CAAC;AAEF,eAAO,MAAM,IAAI;;;cAOL,MAAM,SAAS;6CAuB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YAM1B,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAGhD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/esm/cite.js

@@ -3,15 +3,16 @@ import classNames from 'classnames';
 import { useReferences } from '@myst-theme/providers';
 import { doi } from 'doi-utils';
 import { InlineError } from './inlineError';
-import { HoverPopover } from './components/HoverPopover';
+import { HoverPopover } from './components';
+import { MyST } from './MyST';
 function CiteChild({ html }) {
     return (_jsx("div", { className: "hover-document w-[500px] sm:max-w-[500px] p-3", dangerouslySetInnerHTML: { __html: html || '' } }));
 }
-export const CiteGroup = (node, children) => {
+export const CiteGroup = ({ node }) => {
     return (_jsx("span", { className: classNames('cite-group', {
             narrative: node.kind === 'narrative',
             parenthetical: node.kind === 'parenthetical',
-        }), children: children }, node.key));
+        }), children: _jsx(MyST, { ast: node.children }) }));
 };
 export const Cite = ({ label, error, children, }) => {
     var _a, _b;
@@ -26,8 +27,8 @@ export const Cite = ({ label, error, children, }) => {
     const doiUrl = doiString ? doi.buildUrl(doiString) : null;
     return (_jsx(HoverPopover, { openDelay: 300, card: _jsx(CiteChild, { html: html }), children: _jsxs("cite", { className: "hover-link", children: [doiUrl && (_jsx("a", { href: doiUrl, target: "_blank", rel: "noreferrer", className: "hover-link", children: children })), !doiUrl && children] }) }));
 };
-export const CiteRenderer = (node, children) => {
-    return (_jsx(Cite, { label: node.label, error: node.error, children: children }, node.key));
+export const CiteRenderer = ({ node }) => {
+    return (_jsx(Cite, { label: node.label, error: node.error, children: _jsx(MyST, { ast: node.children }) }));
 };
 const CITE_RENDERERS = {
     citeGroup: CiteGroup,

package/dist/esm/code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../src/code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,UAAU,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAQ1D,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAWF,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,2CAgErC;AAiDD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA/C0B,OAAO;;;CAkDpD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../src/code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,UAAU,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAQ1D,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAWF,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,2CA4DrC;AA6CD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA3C0B,OAAO;;;CA8CpD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/esm/code.js

@@ -4,7 +4,7 @@ import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
 import light from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode';
 import dark from 'react-syntax-highlighter/dist/cjs/styles/hljs/vs2015';
 import classNames from 'classnames';
-import { CopyIcon } from './components/CopyIcon';
+import { CopyIcon } from './components';
 function normalizeLanguage(lang) {
     switch (lang) {
         case 'html':
@@ -39,10 +39,10 @@ export function CodeBlock(props) {
                             'data-highlight': 'true',
                         }
                         : { 'data-line-number': `${line}` };
-                }, customStyle: { padding: '0.8rem' }, children: value }), showCopy && (_jsx("div", { className: "absolute hidden top-1 right-1 group-hover:block", children: _jsx(CopyIcon, { text: value }) }))] }));
+                }, customStyle: { padding: '0.8rem' }, children: value }), showCopy && _jsx(CopyIcon, { text: value, className: "absolute top-1 right-1" })] }));
 }
-const code = (node) => {
-    return (_jsx(CodeBlock, { identifier: node.html_id, "data-mdast-node-type": node.type, "data-mdast-node-id": node.key, value: node.value || '', lang: node.lang, emphasizeLines: node.emphasizeLines, showLineNumbers: node.showLineNumbers, startingLineNumber: node.startingLineNumber, shadow: true, border: node.executable, background: !node.executable }, node.key));
+const code = ({ node }) => {
+    return (_jsx(CodeBlock, { identifier: node.html_id, "data-mdast-node-type": node.type, "data-mdast-node-id": node.key, value: node.value || '', lang: node.lang, emphasizeLines: node.emphasizeLines, showLineNumbers: node.showLineNumbers, startingLineNumber: node.startingLineNumber, shadow: true, border: node.executable, background: !node.executable }));
 };
 function isColor(maybeColorHash) {
     if (!maybeColorHash || maybeColorHash.length > 9)
@@ -55,11 +55,11 @@ function isColor(maybeColorHash) {
     const color = match[1];
     return color;
 }
-const inlineCode = (node, children) => {
+const inlineCode = ({ node }) => {
     if (isColor(node.value)) {
-        return (_jsxs("code", { className: "px-1 rounded bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-100", children: [children, _jsx("span", { style: { backgroundColor: node.value }, className: "inline-block w-[10px] h-[10px] rounded-full ml-1" })] }, node.key));
+        return (_jsxs("code", { className: "px-1 rounded bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-100", children: [node.value, _jsx("span", { style: { backgroundColor: node.value }, className: "inline-block w-[10px] h-[10px] rounded-full ml-1" })] }));
     }
-    return _jsx("code", { children: children }, node.key);
+    return _jsx("code", { children: node.value });
 };
 const CODE_RENDERERS = {
     code,

package/dist/esm/components/CopyIcon.d.ts

@@ -1,4 +1,5 @@
-export declare function CopyIcon({ text }: {
+export declare function CopyIcon({ text, className }: {
     text: string;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CopyIcon.d.ts.map

package/dist/esm/components/CopyIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CopyIcon.tsx"],"names":[],"mappings":"AAKA,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,2CA+BlD"}
+{"version":3,"file":"CopyIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CopyIcon.tsx"],"names":[],"mappings":"AAKA,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAgCjF"}

package/dist/esm/components/CopyIcon.js

@@ -3,7 +3,7 @@ import DocumentDuplicateIcon from '@heroicons/react/24/outline/DocumentDuplicate
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { useState } from 'react';
 import classNames from 'classnames';
-export function CopyIcon({ text }) {
+export function CopyIcon({ text, className }) {
     const [copied, setCopied] = useState(false);
     const onClick = () => {
         if (copied)
@@ -13,8 +13,8 @@ export function CopyIcon({ text }) {
             setTimeout(() => setCopied(false), 3000);
         });
     };
-    return (_jsx("button", { title: copied ? 'Copied!!' : 'Copy to Clipboard', className: classNames('inline-flex items-center opacity-60 hover:opacity-100 active:opacity-40 cursor-pointer ml-2', 'transition-color duration-200 ease-in-out', {
-            'text-blue-500 border-blue-500': !copied,
-            'text-green-500 border-green-500 ': copied,
-        }), onClick: onClick, "aria-pressed": copied ? 'true' : 'false', "aria-label": "Copy code to clipboard", children: copied ? (_jsx(CheckIcon, { className: "w-[24px] h-[24px] text-success" })) : (_jsx(DocumentDuplicateIcon, { className: "w-[24px] h-[24px]" })) }));
+    return (_jsx("button", { title: copied ? 'Copied!!' : 'Copy to Clipboard', className: classNames('inline-flex items-center opacity-0 group-hover:opacity-100 hover:opacity-100 focus:opacity-100 active:opacity-100 cursor-pointer ml-2', 'transition-color duration-200 ease-in-out', {
+            'text-blue-400 hover:text-blue-500': !copied,
+            'text-green-500 hover:text-green-500': copied,
+        }, className), onClick: onClick, "aria-pressed": copied ? 'true' : 'false', "aria-label": "Copy code to clipboard", children: copied ? (_jsx(CheckIcon, { className: "w-[24px] h-[24px] text-success" })) : (_jsx(DocumentDuplicateIcon, { className: "w-[24px] h-[24px]" })) }));
 }

package/dist/esm/components/HoverPopover.d.ts

@@ -8,4 +8,8 @@ export declare function HoverPopover({ children, openDelay, card, side, arrowCla
         load: boolean;
     }) => React.ReactNode);
 }): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ title, children, }: {
+    title: React.ReactNode;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=HoverPopover.d.ts.map

package/dist/esm/components/HoverPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HoverPopover.d.ts","sourceRoot":"","sources":["../../../src/components/HoverPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAe,EACf,IAAI,EACJ,IAAI,EACJ,UAAyB,GAC1B,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACxE,2CAmBA"}
+{"version":3,"file":"HoverPopover.d.ts","sourceRoot":"","sources":["../../../src/components/HoverPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAe,EACf,IAAI,EACJ,IAAI,EACJ,UAAyB,GAC1B,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACxE,2CAmBA;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAcA"}

package/dist/esm/components/HoverPopover.js

@@ -5,3 +5,6 @@ export function HoverPopover({ children, openDelay = 400, card, side, arrowClass
     const [load, setLoad] = useState(false);
     return (_jsxs(HoverCard.Root, { openDelay: openDelay, children: [_jsx(HoverCard.Trigger, { asChild: true, onMouseEnter: () => setLoad(true), children: children }), _jsx(HoverCard.Portal, { children: _jsxs(HoverCard.Content, { className: "exclude-from-outline hover-card-content", sideOffset: 5, side: side, children: [typeof card === 'function' ? load && card({ load }) : card, _jsx(HoverCard.Arrow, { className: arrowClass })] }) })] }));
 }
+export function Tooltip({ title, children, }) {
+    return (_jsx(HoverPopover, { side: "top", card: _jsx("div", { className: "p-1 text-xs text-white bg-blue-900 dark:bg-white dark:text-black", children: title }), arrowClass: "fill-blue-900 dark:fill-white", children: children }));
+}

package/dist/esm/components/LinkCard.d.ts

@@ -5,7 +5,7 @@ export declare function LinkCard({ url, title, internal, loading, description, t
     loading?: boolean;
     title: React.ReactNode;
     description?: React.ReactNode;
-    thumbnail?: string;
+    thumbnail?: string | null;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LinkCard.d.ts.map

package/dist/esm/components/LinkCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkCard.d.ts","sourceRoot":"","sources":["../../../src/components/LinkCard.tsx"],"names":[],"mappings":";AAIA,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,KAAK,EACL,QAAgB,EAChB,OAAe,EACf,WAAW,EACX,SAAS,EACT,SAAmE,GACpE,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAuCA"}
+{"version":3,"file":"LinkCard.d.ts","sourceRoot":"","sources":["../../../src/components/LinkCard.tsx"],"names":[],"mappings":";AAIA,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,KAAK,EACL,QAAgB,EAChB,OAAe,EACf,WAAW,EACX,SAAS,EACT,SAAmE,GACpE,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAuCA"}

package/dist/esm/components/index.d.ts

@@ -0,0 +1,4 @@
+export { CopyIcon } from './CopyIcon';
+export { HoverPopover, Tooltip } from './HoverPopover';
+export { LinkCard } from './LinkCard';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export { CopyIcon } from './CopyIcon';
+export { HoverPopover, Tooltip } from './HoverPopover';
+export { LinkCard } from './LinkCard';

package/dist/esm/crossReference.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crossReference.d.ts","sourceRoot":"","sources":["../../src/crossReference.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAahD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AA2H1D,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,GAAG,EACH,OAAO,GACR,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,sDAWA;AAuBD,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,QAAQ,EAChB,QAAQ,EACR,UAAU,EACV,MAAW,GACZ,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAuDA;AAED,eAAO,MAAM,kBAAkB,EAAE,YAAY,CAAC,cAAc,CAuB3D,CAAC;AAEF,QAAA,MAAM,yBAAyB;;CAE9B,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"crossReference.d.ts","sourceRoot":"","sources":["../../src/crossReference.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAWhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAwH1D,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,GAAG,EACH,OAAO,GACR,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,sDAWA;AAuBD,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,QAAQ,EAChB,QAAQ,EACR,UAAU,EACV,MAAW,GACZ,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAuDA;AAED,eAAO,MAAM,kBAAkB,EAAE,YAAY,CAAC,cAAc,CAqB3D,CAAC;AAEF,QAAA,MAAM,yBAAyB;;CAE9B,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/esm/crossReference.js

@@ -1,11 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { selectAll } from 'unist-util-select';
 import { EXIT, SKIP, visit } from 'unist-util-visit';
-import { useLinkProvider, useNodeRenderers, useReferences, useBaseurl, withBaseurl, XRefProvider, useXRefState, } from '@myst-theme/providers';
-import { useParse } from '.';
+import { useLinkProvider, useReferences, useBaseurl, withBaseurl, XRefProvider, useXRefState, } from '@myst-theme/providers';
 import { InlineError } from './inlineError';
 import useSWR from 'swr';
-import { HoverPopover } from './components/HoverPopover';
+import { HoverPopover } from './components';
+import { MyST } from './MyST';
 const hiddenNodes = new Set(['comment', 'mystComment']);
 function selectHeadingNodes(mdast, identifier, maxNodes = 3) {
     let begin = false;
@@ -74,12 +74,8 @@ const fetcher = (...args) => fetch(...args).then((res) => {
     throw new Error(`Content returned with status ${res.status}.`);
 });
 // This is a small component that must be distinct based on the nodes
-// This is because the useParse can have different numbers of hooks, which breaks things
 function XrefChildren({ load, remote, url, dataUrl, identifier, }) {
-    var _a;
     const data = useSelectNodes({ load, remote, url, dataUrl, identifier });
-    const renderers = useNodeRenderers();
-    const children = useParse({ type: 'block', children: (_a = data === null || data === void 0 ? void 0 : data.nodes) !== null && _a !== void 0 ? _a : [] }, renderers);
     if (!data)
         return null;
     if (data.loading) {
@@ -91,7 +87,7 @@ function XrefChildren({ load, remote, url, dataUrl, identifier, }) {
     if (!data.nodes || data.nodes.length === 0) {
         return (_jsx(_Fragment, { children: _jsx(InlineError, { value: identifier || 'No Label', message: "Cross Reference Not Found" }) }));
     }
-    return _jsx(_Fragment, { children: children });
+    return _jsx(MyST, { ast: data === null || data === void 0 ? void 0 : data.nodes });
 }
 function openDetails(el) {
     if (!el)
@@ -144,12 +140,12 @@ export function CrossReferenceHover({ url: urlIn, dataUrl: dataUrlIn, remote: re
     };
     return (_jsx(HoverPopover, { card: ({ load }) => (_jsx(XRefProvider, { remote: remote, url: url, dataUrl: dataUrl, children: _jsx("div", { className: "hover-document w-[500px] sm:max-w-[500px] px-3", children: _jsx(XrefChildren, { load: load, remote: remote, url: url, dataUrl: dataUrl, identifier: identifier }) }) })), children: _jsxs("span", { children: [remote && external && (_jsx("a", { href: `${url}${htmlId ? `#${htmlId}` : ''}`, target: "_blank", className: "hover-link", children: children })), remote && !external && (_jsx(Link, { to: `${withBaseurl(url, baseurl)}${htmlId ? `#${htmlId}` : ''}`, prefetch: "intent", className: "hover-link", children: children })), !remote && (_jsx("a", { href: `#${htmlId}`, onClick: scroll, className: "hover-link", children: children }))] }) }));
 }
-export const CrossReferenceNode = (node, children) => {
-    if (!children) {
-        return (_jsx(InlineError, { value: node.label || node.identifier || 'No Label', message: "Cross Reference Not Found" }, node.key));
+export const CrossReferenceNode = ({ node }) => {
+    if (!node.children) {
+        return (_jsx(InlineError, { value: node.label || node.identifier || 'No Label', message: "Cross Reference Not Found" }));
     }
     const { remote, url, dataUrl, identifier, html_id } = node;
-    return (_jsx(CrossReferenceHover, { identifier: identifier, htmlId: html_id, remote: remote, url: url, dataUrl: dataUrl, children: children }, node.key));
+    return (_jsx(CrossReferenceHover, { identifier: identifier, htmlId: html_id, remote: remote, url: url, dataUrl: dataUrl, children: _jsx(MyST, { ast: node.children }) }));
 };
 const CROSS_REFERENCE_RENDERERS = {
     crossReference: CrossReferenceNode,

package/dist/esm/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAI1D,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AACF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,WAAW,CAElD,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,IAAI,GACL,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,2CA4BA;AAED,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,YAAY,CAOtD,CAAC;AAEF,QAAA,MAAM,kBAAkB;;;CAGvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAK1D,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AACF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,WAAW,CAElD,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,IAAI,GACL,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,2CA4BA;AAED,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,YAAY,CAOtD,CAAC;AAEF,QAAA,MAAM,kBAAkB;;;CAGvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/esm/dropdown.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ChevronRightIcon from '@heroicons/react/24/solid/ChevronRightIcon';
 import classNames from 'classnames';
+import { MyST } from './MyST';
 const iconClass = 'h-8 w-8 inline-block pl-2 mr-2 -translate-y-[1px]';
-export const SummaryTitle = (node, children) => {
-    return children;
+export const SummaryTitle = ({ node }) => {
+    return _jsx(MyST, { ast: node.children });
 };
 export function Details({ title, children, open, }) {
     return (_jsxs("details", { className: classNames('rounded-md my-5 shadow dark:shadow-2xl dark:shadow-neutral-900 overflow-hidden', 'bg-gray-50 dark:bg-stone-800'), open: open, children: [_jsx("summary", { className: classNames('m-0 text-lg font-medium py-1 min-h-[2em] pl-3', 'cursor-pointer hover:shadow-[inset_0_0_0px_30px_#00000003] dark:hover:shadow-[inset_0_0_0px_30px_#FFFFFF03]', 'bg-gray-100 dark:bg-slate-900'), children: _jsxs("span", { className: "text-neutral-900 dark:text-white", children: [_jsx("span", { className: "block float-right text-sm font-thin text-neutral-700 dark:text-neutral-200", children: _jsx(ChevronRightIcon, { className: classNames(iconClass, 'details-toggle', 'transition-transform') }) }), title] }) }), _jsx("div", { className: "px-4 py-1 details-body", children: children })] }));
 }
-export const DetailsRenderer = (node, children) => {
-    const [title, ...rest] = children;
-    return (_jsx(Details, { title: title, open: node.open, children: rest }, node.key));
+export const DetailsRenderer = ({ node }) => {
+    const [title, ...rest] = node.children;
+    return (_jsx(Details, { title: _jsx(MyST, { ast: [title] }), open: node.open, children: _jsx(MyST, { ast: rest }) }));
 };
 const DROPDOWN_RENDERERS = {
     details: DetailsRenderer,

package/dist/esm/exercise.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"exercise.d.ts","sourceRoot":"","sources":["../../src/exercise.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAK1D,KAAK,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AAkEhF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,IAAI,GACL,EAAE;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;CACvD,2CA0EA;AAED,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,cAAc,CAmCzD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,cAAc,CAkCzD,CAAC;AAEF,QAAA,MAAM,kBAAkB;;;CAGvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"exercise.d.ts","sourceRoot":"","sources":["../../src/exercise.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAO1D,KAAK,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AAkEhF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,IAAI,GACL,EAAE;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;CACvD,2CA0EA;AAED,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,cAAc,CAiCzD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,cAAc,CAgCzD,CAAC;AAEF,QAAA,MAAM,kBAAkB;;;CAGvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/esm/exercise.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import ChevronRightIcon from '@heroicons/react/24/solid/ChevronRightIcon';
 import classNames from 'classnames';
 import { HashLink } from './heading';
+import { MyST } from './MyST';
 function getClasses(className) {
     var _a;
     const classes = (_a = className === null || className === void 0 ? void 0 : className.split(' ').map((s) => s.trim().toLowerCase()).filter((s) => !!s)) !== null && _a !== void 0 ? _a : [];
@@ -64,32 +65,32 @@ export function Callout({ title, color, dropdown, children, identifier, Icon, })
                         })) })), _jsx("div", { className: classNames('text-neutral-900 dark:text-white grow self-center overflow-hidden break-words', { 'ml-4': !Icon }, // No icon!
                         'group'), children: title }), dropdown && (_jsx("div", { className: "self-center flex-none text-sm font-thin text-neutral-700 dark:text-neutral-200", children: _jsx(ChevronRightIcon, { className: classNames(iconClass, 'transition-transform details-toggle') }) }))] }), _jsx("div", { className: classNames('px-4', { 'details-body': dropdown }), children: children })] }));
 }
-export const ExerciseRenderer = (node, children) => {
+export const ExerciseRenderer = ({ node }) => {
     var _a, _b, _c;
     if (node.hidden)
         return null;
-    const [title, ...rest] = (_a = children) !== null && _a !== void 0 ? _a : [];
+    const [title, ...rest] = (_a = node.children) !== null && _a !== void 0 ? _a : [];
     const classes = getClasses(node.class);
     const { color } = getColor({ classes });
     const isDropdown = classes.includes('dropdown');
     const useTitle = ((_c = (_b = node.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.type) === 'admonitionTitle';
     const identifier = node.html_id;
     const enumerator = node.enumerator;
-    const titleNode = (_jsxs(_Fragment, { children: [_jsxs(HashLink, { id: identifier, kind: "Exercise", children: [node.gate === 'start' && 'Start of ', node.gate === 'end' && 'End of ', "Exercise", enumerator != null && _jsxs(_Fragment, { children: [" ", enumerator] })] }), useTitle && _jsxs(_Fragment, { children: [" (", title, ")"] })] }));
-    return (_jsxs(Callout, { identifier: identifier, title: titleNode, color: color, dropdown: isDropdown, children: [!useTitle && title, rest] }, node.key));
+    const titleNode = (_jsxs(_Fragment, { children: [_jsxs(HashLink, { id: identifier, kind: "Exercise", children: [node.gate === 'start' && 'Start of ', node.gate === 'end' && 'End of ', "Exercise", enumerator != null && _jsxs(_Fragment, { children: [" ", enumerator] })] }), useTitle && (_jsxs(_Fragment, { children: [' ', "(", _jsx(MyST, { ast: [title] }), ")"] }))] }));
+    return (_jsx(Callout, { identifier: identifier, title: titleNode, color: color, dropdown: isDropdown, children: useTitle ? _jsx(MyST, { ast: rest }) : _jsx(MyST, { ast: node.children }) }));
 };
-export const SolutionRenderer = (node, children) => {
+export const SolutionRenderer = ({ node }) => {
     var _a, _b, _c;
     if (node.hidden)
         return null;
-    const [title, ...rest] = (_a = children) !== null && _a !== void 0 ? _a : [];
+    const [title, ...rest] = (_a = node.children) !== null && _a !== void 0 ? _a : [];
     const classes = getClasses(node.class);
     const { color } = getColor({ classes }, 'gray');
     const isDropdown = classes.includes('dropdown');
     const useTitle = ((_c = (_b = node.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.type) === 'admonitionTitle';
     const identifier = node.html_id;
-    const titleNode = (_jsxs(_Fragment, { children: [node.gate === 'start' && 'Start of ', node.gate === 'end' && 'End of ', title, _jsx(HashLink, { id: identifier, kind: "Solution", hover: true, hideInPopup: true, children: ' #' })] }));
-    return (_jsxs(Callout, { identifier: identifier, title: useTitle ? titleNode : undefined, color: color, dropdown: isDropdown, children: [!useTitle && title, rest] }, node.key));
+    const titleNode = (_jsxs(_Fragment, { children: [node.gate === 'start' && 'Start of ', node.gate === 'end' && 'End of ', _jsx(MyST, { ast: [title] }), _jsx(HashLink, { id: identifier, kind: "Solution", hover: true, hideInPopup: true, children: ' #' })] }));
+    return (_jsx(Callout, { identifier: identifier, title: useTitle ? titleNode : undefined, color: color, dropdown: isDropdown, children: useTitle ? _jsx(MyST, { ast: rest }) : _jsx(MyST, { ast: node.children }) }));
 };
 const EXERCISE_RENDERERS = {
     exercise: ExerciseRenderer,

package/dist/esm/extensions/chemicalFormula.js

@@ -22,13 +22,13 @@ function parseFormula(formula) {
         return [...acc, `${last !== null && last !== void 0 ? last : ''}${letter}`];
     }, []);
 }
-export const ChemicalFormula = (node) => {
+export const ChemicalFormula = ({ node }) => {
     const parts = parseFormula(node.value);
     return (_jsx("span", { className: "text-inherit", "aria-roledescription": "Chemical Formula", children: parts.map((letter, index) => {
             if (letter.match(/[0-9]/))
                 return _jsx("sub", { children: letter }, index);
             return _jsx("span", { children: letter }, index);
-        }) }, node.key));
+        }) }));
 };
 const CHEM_RENDERERS = {
     chemicalFormula: ChemicalFormula,