myst-to-react 0.13.6 → 0.14.0

package/dist/dropdown.js

@@ -3,15 +3,15 @@ import { ChevronRightIcon } from '@heroicons/react/24/solid';
 import classNames from 'classnames';
 import { MyST } from './MyST.js';
 const iconClass = 'inline-block pl-2 mr-2 -translate-y-[1px]';
-export const SummaryTitle = ({ node }) => {
-    return _jsx(MyST, { ast: node.children });
+export const SummaryTitle = ({ node, className }) => {
+    return _jsx(MyST, { ast: node.children, className: className });
 };
 export function Details({ title, children, open, className, }) {
     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', className), 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, { width: "1.5rem", height: "1.5rem", className: classNames(iconClass, 'details-toggle', 'transition-transform') }) }), title] }) }), _jsx("div", { className: "px-4 py-1 details-body", children: children })] }));
 }
-export const DetailsRenderer = ({ node }) => {
+export const DetailsRenderer = ({ node, className }) => {
     const [title, ...rest] = node.children;
-    return (_jsx(Details, { title: _jsx(MyST, { ast: [title] }), open: node.open, className: node.class, children: _jsx(MyST, { ast: rest }) }));
+    return (_jsx(Details, { title: _jsx(MyST, { ast: [title] }), open: node.open, className: classNames(node.class, className), children: _jsx(MyST, { ast: rest }) }));
 };
 const DROPDOWN_RENDERERS = {
     details: DetailsRenderer,

package/dist/exercise.d.ts

@@ -2,12 +2,13 @@ import type { Admonition as AdmonitionSpec } from 'myst-spec';
 import React from 'react';
 import type { NodeRenderer } from '@myst-theme/providers';
 type Color = 'gray' | 'blue' | 'green' | 'yellow' | 'orange' | 'red' | 'purple';
-export declare function Callout({ title, color, dropdown, children, identifier, Icon, }: {
+export declare function Callout({ title, color, dropdown, children, identifier, className, Icon, }: {
     title?: React.ReactNode;
     color?: Color;
     children: React.ReactNode;
     dropdown?: boolean;
     identifier?: string;
+    className?: string;
     Icon?: (props: {
         width?: string;
         height?: string;

package/dist/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;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,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;CACxF,2CA8EA;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"}
+{"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,SAAS,EACT,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;CACxF,2CA+EA;AAED,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,cAAc,CAuCzD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,cAAc,CAiCzD,CAAC;AAEF,QAAA,MAAM,kBAAkB;;;CAGvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/exercise.js

@@ -36,7 +36,7 @@ const HeaderElement = ({ dropdown, className, children, }) => {
     return _jsx("div", { className: className, children: children });
 };
 const iconClass = 'inline-block pl-2 mr-2 self-center flex-none';
-export function Callout({ title, color, dropdown, children, identifier, Icon, }) {
+export function Callout({ title, color, dropdown, children, identifier, className, Icon, }) {
     return (_jsxs(WrapperElement, { id: identifier, dropdown: dropdown, className: classNames('my-5 shadow dark:bg-stone-800 overflow-hidden', 'dark:border-l-4 border-slate-400', {
             'dark:border-gray-500/60': !color || color === 'gray',
             'dark:border-blue-500/60': color === 'blue',
@@ -45,7 +45,7 @@ export function Callout({ title, color, dropdown, children, identifier, Icon, })
             'dark:border-orange-500/60': color === 'orange',
             'dark:border-red-500/60': color === 'red',
             'dark:border-purple-500/60': color === 'purple',
-        }), children: [_jsxs(HeaderElement, { dropdown: dropdown, className: classNames('m-0 font-medium py-2 flex min-w-0', 'text-md', 'border-y dark:border-y-0', {
+        }, className), children: [_jsxs(HeaderElement, { dropdown: dropdown, className: classNames('m-0 font-medium py-2 flex min-w-0', 'text-md', 'border-y dark:border-y-0', {
                     'bg-gray-50/80 dark:bg-slate-900': !color || color === 'gray',
                     'bg-blue-50/80 dark:bg-slate-900': color === 'blue',
                     'bg-green-50/80 dark:bg-slate-900': color === 'green',
@@ -65,7 +65,7 @@ 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, { width: "1.5rem", height: "1.5rem", className: classNames(iconClass, 'transition-transform details-toggle') }) }))] }), _jsx("div", { className: classNames('px-4', { 'details-body': dropdown }), children: children })] }));
 }
-export const ExerciseRenderer = ({ node }) => {
+export const ExerciseRenderer = ({ node, className }) => {
     var _a, _b, _c;
     if (node.hidden)
         return null;
@@ -77,9 +77,9 @@ export const ExerciseRenderer = ({ node }) => {
     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: [' ', "(", _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 }) }));
+    return (_jsx(Callout, { identifier: identifier, title: titleNode, color: color, dropdown: isDropdown, className: className, children: useTitle ? _jsx(MyST, { ast: rest }) : _jsx(MyST, { ast: node.children }) }));
 };
-export const SolutionRenderer = ({ node }) => {
+export const SolutionRenderer = ({ node, className }) => {
     var _a, _b, _c;
     if (node.hidden)
         return null;
@@ -90,7 +90,7 @@ export const SolutionRenderer = ({ node }) => {
     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 ', _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 }) }));
+    return (_jsx(Callout, { identifier: identifier, title: useTitle ? titleNode : undefined, color: color, dropdown: isDropdown, className: className, children: useTitle ? _jsx(MyST, { ast: rest }) : _jsx(MyST, { ast: node.children }) }));
 };
 const EXERCISE_RENDERERS = {
     exercise: ExerciseRenderer,

package/dist/extensions/chemicalFormula.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chemicalFormula.d.ts","sourceRoot":"","sources":["../../src/extensions/chemicalFormula.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AA0B1D,eAAO,MAAM,eAAe,EAAE,YAU7B,CAAC;AAEF,QAAA,MAAM,cAAc;;CAEnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"chemicalFormula.d.ts","sourceRoot":"","sources":["../../src/extensions/chemicalFormula.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AA2B1D,eAAO,MAAM,eAAe,EAAE,YAU7B,CAAC;AAEF,QAAA,MAAM,cAAc;;CAEnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/extensions/chemicalFormula.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
 /**
  * Separate numbers and letters so that numbers can be <sub>2</sub>
  * @param formula a string H2O
@@ -22,9 +23,9 @@ function parseFormula(formula) {
         return [...acc, `${last !== null && last !== void 0 ? last : ''}${letter}`];
     }, []);
 }
-export const ChemicalFormula = ({ node }) => {
+export const ChemicalFormula = ({ node, className }) => {
     const parts = parseFormula(node.value);
-    return (_jsx("span", { className: "text-inherit", "aria-roledescription": "Chemical Formula", children: parts.map((letter, index) => {
+    return (_jsx("span", { className: classNames('text-inherit', className), "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);

package/dist/extensions/siunits.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"siunits.d.ts","sourceRoot":"","sources":["../../src/extensions/siunits.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,eAAO,MAAM,OAAO,EAAE,YAIrB,CAAC;AAEF,QAAA,MAAM,YAAY;;CAEjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"siunits.d.ts","sourceRoot":"","sources":["../../src/extensions/siunits.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,eAAO,MAAM,OAAO,EAAE,YAQrB,CAAC;AAEF,QAAA,MAAM,YAAY;;CAEjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/extensions/siunits.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const SIUnits = ({ node }) => {
+export const SIUnits = ({ node, className }) => {
     var _a;
     const space = node.number == null ? '' : ' ';
     const title = `${(_a = node.number) !== null && _a !== void 0 ? _a : ''}${space}${node.alt}`;
-    return _jsx("span", { title: title, children: node.value });
+    return (_jsx("span", { title: title, className: className, children: node.value }));
 };
 const SI_RENDERERS = {
     si: SIUnits,

package/dist/footnotes.js

@@ -10,9 +10,9 @@ function FootnoteDefinition({ identifier }) {
     const node = (_b = (_a = references === null || references === void 0 ? void 0 : references.footnotes) === null || _a === void 0 ? void 0 : _a[identifier]) !== null && _b !== void 0 ? _b : select(`footnoteDefinition[identifier=${identifier}]`, references === null || references === void 0 ? void 0 : references.article);
     return (_jsx(XRefProvider, { children: _jsx("div", { className: "hover-document article w-[500px] sm:max-w-[500px] px-3 text-sm", children: _jsx(MyST, { ast: node === null || node === void 0 ? void 0 : node.children }) }) }));
 }
-export const FootnoteReference = ({ node }) => {
+export const FootnoteReference = ({ node, className }) => {
     var _a, _b;
-    return (_jsx(HoverPopover, { openDelay: 0, card: _jsx(FootnoteDefinition, { identifier: node.identifier }), children: _jsx("span", { id: `fnref-${node.key}`, children: _jsx("sup", { className: "hover-link", children: _jsxs(HashLink, { id: `fn-${node.identifier}`, title: "Link to Footnote", scrollBehavior: "instant", canSelectText: true, children: ["[", (_b = (_a = node.enumerator) !== null && _a !== void 0 ? _a : node.number) !== null && _b !== void 0 ? _b : node.identifier, "]"] }) }) }) }));
+    return (_jsx(HoverPopover, { openDelay: 0, card: _jsx(FootnoteDefinition, { identifier: node.identifier }), children: _jsx("span", { id: `fnref-${node.key}`, className: className, children: _jsx("sup", { className: "hover-link", children: _jsxs(HashLink, { id: `fn-${node.identifier}`, title: "Link to Footnote", scrollBehavior: "instant", canSelectText: true, children: ["[", (_b = (_a = node.enumerator) !== null && _a !== void 0 ? _a : node.number) !== null && _b !== void 0 ? _b : node.identifier, "]"] }) }) }) }));
 };
 const FOOTNOTE_RENDERERS = {
     footnoteReference: FootnoteReference,

package/dist/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG1D,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AA6GF,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,QAAQ,CAM/C,CAAC;AAEF,QAAA,MAAM,cAAc;;CAEnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG1D,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAuHF,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,QAAQ,CAM/C,CAAC;AAEF,QAAA,MAAM,cAAc;;CAEnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/grid.js

@@ -97,13 +97,13 @@ function gridColumnClasses(columns) {
         getColumnClassName(gridClassNames.xl, columns[3]),
     ].join(' ');
 }
-function Grid({ columns, children }) {
+function Grid({ columns, children, className, }) {
     const gridClasses = gridColumnClasses(columns);
     const gutterClasses = 'gap-4';
-    return (_jsx("div", { className: classNames('myst-grid grid my-5', gridClasses, gutterClasses), children: children }));
+    return (_jsx("div", { className: classNames('myst-grid grid my-5', gridClasses, gutterClasses, className), children: children }));
 }
-export const GridRenderer = ({ node }) => {
-    return (_jsx(Grid, { columns: node.columns, children: _jsx(MyST, { ast: node.children }) }));
+export const GridRenderer = ({ node, className }) => {
+    return (_jsx(Grid, { columns: node.columns, className: className, children: _jsx(MyST, { ast: node.children }) }));
 };
 const GRID_RENDERERS = {
     grid: GridRenderer,

package/dist/heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../src/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AA4B1D,QAAA,MAAM,iBAAiB;;CAEtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../src/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AA6B1D,QAAA,MAAM,iBAAiB;;CAEtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/heading.js

@@ -2,14 +2,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createElement as e } from 'react';
 import { MyST } from './MyST.js';
 import { HashLink } from './hashLink.js';
-const Heading = ({ node }) => {
+import classNames from 'classnames';
+const Heading = ({ node, className }) => {
     const { enumerator, depth, key, identifier, html_id } = node;
     const id = html_id || identifier || key;
     const textContent = (_jsxs(_Fragment, { children: [enumerator && _jsx("span", { className: "mr-3 select-none", children: enumerator }), _jsx("span", { className: "heading-text", children: _jsx(MyST, { ast: node.children }) }), _jsx(HashLink, { id: id, kind: "Section", className: "px-2 font-normal", hover: true, hideInPopup: true })] }));
     // The `heading-text` class is picked up in the Outline to select without the enumerator and "#" link
     return e(`h${depth}`, {
         id,
-        className: 'relative group',
+        className: classNames('relative group', className),
     }, textContent);
 };
 const HEADING_RENDERERS = {

package/dist/iframe.js

@@ -22,9 +22,9 @@ function getStyleValue(width) {
     }
     return width;
 }
-export const IFrame = ({ node }) => {
+export const IFrame = ({ node, className }) => {
     const width = getStyleValue(node.width) || 70;
-    return (_jsx("div", { id: node.label || undefined, style: { textAlign: node.align || 'center' }, className: classNames('leading-[0]', node.class), children: _jsx("div", { className: "relative inline-block", style: {
+    return (_jsx("div", { id: node.label || undefined, style: { textAlign: node.align || 'center' }, className: classNames('leading-[0]', node.class, className), children: _jsx("div", { className: "relative inline-block", style: {
                 paddingBottom: '60%',
                 width: `min(max(${width}%, 500px), 100%)`,
             }, children: _jsx("iframe", { width: "100%", height: "100%", src: node.src, allowFullScreen: true, allow: "autoplay", style: {

package/dist/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../src/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAI1D,KAAK,SAAS,GAAG,aAAa,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAgIrD,eAAO,MAAM,KAAK,EAAE,YAAY,CAAC,SAAS,CAezC,CAAC;AAEF,QAAA,MAAM,eAAe;;CAEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../src/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAK1D,KAAK,SAAS,GAAG,aAAa,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAgIrD,eAAO,MAAM,KAAK,EAAE,YAAY,CAAC,SAAS,CAezC,CAAC;AAEF,QAAA,MAAM,eAAe;;CAEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/image.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
 function getStyleValue(width) {
     if (typeof width === 'number' && Number.isNaN(width)) {
         // If it is nan, return undefined.
@@ -32,9 +33,7 @@ function alignToMargin(align) {
     }
 }
 function Video({ className, id, src, urlSource, align = 'center', width, height, }) {
-    return (_jsx("video", { 
-        // className={className}
-        id: id, style: Object.assign({ width: getStyleValue(width), height: getStyleValue(height) }, alignToMargin(align)), src: src, "data-canonical-url": urlSource, autoPlay: true, 
+    return (_jsx("video", { className: className, id: id, style: Object.assign({ width: getStyleValue(width), height: getStyleValue(height) }, alignToMargin(align)), src: src, "data-canonical-url": urlSource, autoPlay: true, 
         // For autoplay, the element needs to be muted to actually start!
         muted: true, "webkit-playsinline": "true", playsInline: true, loop: true }));
 }
@@ -47,8 +46,8 @@ function Picture({ className, id, src, srcOptimized, urlSource, align = 'center'
         return image;
     return (_jsxs("picture", { className: className, children: [_jsx("source", { srcSet: srcOptimized, type: "image/webp" }), image] }));
 }
-export const Image = ({ node }) => {
-    return (_jsx(Picture, { className: node.class, id: node.html_id || node.identifier || node.key, src: node.url, srcOptimized: node.urlOptimized, alt: node.alt || node.title, width: node.width || undefined, height: node.height || undefined, align: node.align, 
+export const Image = ({ node, className }) => {
+    return (_jsx(Picture, { className: classNames(node.class, className), id: node.html_id || node.identifier || node.key, src: node.url, srcOptimized: node.urlOptimized, alt: node.alt || node.title, width: node.width || undefined, height: node.height || undefined, align: node.align, 
         // Note that sourceUrl is for backwards compatibility
         urlSource: node.urlSource || node.sourceUrl }));
 };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { Block } from './block.js';
 export { CopyIcon, HoverPopover, Tooltip, LinkCard } from './components/index.js';
 export { CodeBlock } from './code.js';
 export { HashLink, scrollToElement } from './hashLink.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,eAAO,MAAM,iBAAiB,wDA0B7B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,eAAO,MAAM,iBAAiB,wDA2B7B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -2,6 +2,7 @@ import { mergeRenderers } from '@myst-theme/providers';
 import BASIC_RENDERERS from './basic.js';
 import ADMONITION_RENDERERS from './admonitions.js';
 import DROPDOWN_RENDERERS from './dropdown.js';
+import BLOCK_RENDERERS from './block.js';
 import CARD_RENDERERS from './card.js';
 import GRID_RENDERERS from './grid.js';
 import CITE_RENDERERS from './cite.js';
@@ -21,6 +22,7 @@ import PROOF_RENDERERS from './proof.js';
 import EXERCISE_RENDERERS from './exercise.js';
 import ASIDE_RENDERERS from './aside.js';
 import UNKNOWN_MYST_RENDERERS from './unknown.js';
+export { Block } from './block.js';
 export { CopyIcon, HoverPopover, Tooltip, LinkCard } from './components/index.js';
 export { CodeBlock } from './code.js';
 export { HashLink, scrollToElement } from './hashLink.js';
@@ -31,6 +33,7 @@ export { useFetchMdast } from './crossReference.js';
 export const DEFAULT_RENDERERS = mergeRenderers([
     BASIC_RENDERERS,
     UNKNOWN_MYST_RENDERERS,
+    BLOCK_RENDERERS,
     IMAGE_RENDERERS,
     LINK_RENDERERS,
     CODE_RENDERERS,

package/dist/inlineError.d.ts

@@ -1,7 +1,8 @@
 interface Props {
     value: string;
     message?: string;
+    className?: string;
 }
-export declare function InlineError({ value, message }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function InlineError({ value, message, className }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=inlineError.d.ts.map

package/dist/inlineError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inlineError.d.ts","sourceRoot":"","sources":["../src/inlineError.tsx"],"names":[],"mappings":"AAEA,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,2CAOpD"}
+{"version":3,"file":"inlineError.d.ts","sourceRoot":"","sources":["../src/inlineError.tsx"],"names":[],"mappings":"AAGA,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,KAAK,2CAO/D"}

package/dist/inlineError.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
-export function InlineError({ value, message }) {
-    return (_jsxs("span", { className: "text-yellow-600", title: message || value, children: [_jsx(ExclamationCircleIcon, { width: "1rem", height: "1rem", className: "inline mr-1" }), value] }));
+import classNames from 'classnames';
+export function InlineError({ value, message, className }) {
+    return (_jsxs("span", { className: classNames('text-yellow-600', className), title: message || value, children: [_jsx(ExclamationCircleIcon, { width: "1rem", height: "1rem", className: "inline mr-1" }), value] }));
 }

package/dist/inlineExpression.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inlineExpression.d.ts","sourceRoot":"","sources":["../src/inlineExpression.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAK1D,eAAO,MAAM,gBAAgB,EAAE,YAe9B,CAAC;AAEF,QAAA,MAAM,2BAA2B;;CAEhC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"inlineExpression.d.ts","sourceRoot":"","sources":["../src/inlineExpression.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAM1D,eAAO,MAAM,gBAAgB,EAAE,YAsB9B,CAAC;AAEF,QAAA,MAAM,2BAA2B;;CAEhC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/inlineExpression.js

@@ -2,16 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { InlineError } from './inlineError.js';
 import { Tooltip } from './components/index.js';
 import { MyST } from './MyST.js';
-export const InlineExpression = ({ node }) => {
+import classNames from 'classnames';
+export const InlineExpression = ({ node, className }) => {
     var _a, _b, _c;
     if (!node.result) {
-        return _jsx(InlineError, { value: `Unexecuted inline expression for: ${node.value}` });
+        return (_jsx(InlineError, { value: `Unexecuted inline expression for: ${node.value}`, className: className }));
     }
     if (((_a = node.result) === null || _a === void 0 ? void 0 : _a.status) !== 'ok') {
-        return _jsx(InlineError, { value: `${(_b = node.result) === null || _b === void 0 ? void 0 : _b.ename}: ${(_c = node.result) === null || _c === void 0 ? void 0 : _c.evalue}` });
+        return (_jsx(InlineError, { value: `${(_b = node.result) === null || _b === void 0 ? void 0 : _b.ename}: ${(_c = node.result) === null || _c === void 0 ? void 0 : _c.evalue}`, className: className }));
     }
     // TODO: something with Thebe in the future!
-    return (_jsx(Tooltip, { title: _jsx("code", { children: node.value }), children: _jsx("span", { className: "border-b border-dotted cursor-help", children: _jsx(MyST, { ast: node.children }) }) }));
+    return (_jsx(Tooltip, { title: _jsx("code", { children: node.value }), children: _jsx("span", { className: classNames('border-b border-dotted cursor-help', className), children: _jsx(MyST, { ast: node.children }) }) }));
 };
 const INLINE_EXPRESSION_RENDERERS = {
     inlineExpression: InlineExpression,

package/dist/links/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/links/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAOtC,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAQzE,KAAK,eAAe,GAAG,IAAI,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAkDxE,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,eAAe,CAW1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,YAAY,CAAC,eAAe,CAiB5D,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,eAAe,CAE1D,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,eAAe,CAEzD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,eAAe,CAcpD,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,YAAY,CAAC,eAAe,CA8BnD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,aAerB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/links/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAOtC,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AASzE,KAAK,eAAe,GAAG,IAAI,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAkDxE,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,eAAe,CAW1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,YAAY,CAAC,eAAe,CAiB5D,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,eAAe,CAI1D,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,eAAe,CAQzD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,eAAe,CAmBpD,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,YAAY,CAAC,eAAe,CAmCnD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,aAerB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/links/index.js

@@ -7,6 +7,7 @@ import { RRIDLink } from './rrid.js';
 import { RORLink } from './ror.js';
 import { GithubLink } from './github.js';
 import { MyST } from '../MyST.js';
+import classNames from 'classnames';
 function getPageInfo(site, path) {
     var _a;
     if (!site)
@@ -28,40 +29,40 @@ function InternalLink({ url, children, className, }) {
     }
     return (_jsx(HoverPopover, { card: _jsx(LinkCard, { internal: true, url: url, title: page.title, description: page.description, thumbnail: page.thumbnailOptimized || page.thumbnail }), children: _jsx(Link, { to: withBaseurl(url, baseurl), prefetch: "intent", className: className, children: children }) }));
 }
-export const WikiLinkRenderer = ({ node }) => {
+export const WikiLinkRenderer = ({ node, className }) => {
     var _a, _b;
-    return (_jsx(WikiLink, { url: node.url, page: (_a = node.data) === null || _a === void 0 ? void 0 : _a.page, wiki: (_b = node.data) === null || _b === void 0 ? void 0 : _b.wiki, className: node.class, children: _jsx(MyST, { ast: node.children }) }));
+    return (_jsx(WikiLink, { url: node.url, page: (_a = node.data) === null || _a === void 0 ? void 0 : _a.page, wiki: (_b = node.data) === null || _b === void 0 ? void 0 : _b.wiki, className: classNames(node.class, className), children: _jsx(MyST, { ast: node.children }) }));
 };
-export const GithubLinkRenderer = ({ node }) => {
+export const GithubLinkRenderer = ({ node, className }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    return (_jsx(GithubLink, { kind: (_a = node.data) === null || _a === void 0 ? void 0 : _a.kind, url: node.url, org: (_b = node.data) === null || _b === void 0 ? void 0 : _b.org, repo: (_c = node.data) === null || _c === void 0 ? void 0 : _c.repo, raw: (_d = node.data) === null || _d === void 0 ? void 0 : _d.raw, file: (_e = node.data) === null || _e === void 0 ? void 0 : _e.file, from: (_f = node.data) === null || _f === void 0 ? void 0 : _f.from, to: (_g = node.data) === null || _g === void 0 ? void 0 : _g.to, issue_number: (_h = node.data) === null || _h === void 0 ? void 0 : _h.issue_number, className: node.class, children: _jsx(MyST, { ast: node.children }) }));
+    return (_jsx(GithubLink, { kind: (_a = node.data) === null || _a === void 0 ? void 0 : _a.kind, url: node.url, org: (_b = node.data) === null || _b === void 0 ? void 0 : _b.org, repo: (_c = node.data) === null || _c === void 0 ? void 0 : _c.repo, raw: (_d = node.data) === null || _d === void 0 ? void 0 : _d.raw, file: (_e = node.data) === null || _e === void 0 ? void 0 : _e.file, from: (_f = node.data) === null || _f === void 0 ? void 0 : _f.from, to: (_g = node.data) === null || _g === void 0 ? void 0 : _g.to, issue_number: (_h = node.data) === null || _h === void 0 ? void 0 : _h.issue_number, className: classNames(node.class, className), children: _jsx(MyST, { ast: node.children }) }));
 };
-export const RRIDLinkRenderer = ({ node }) => {
+export const RRIDLinkRenderer = ({ node, className }) => {
     var _a;
-    return _jsx(RRIDLink, { rrid: (_a = node.data) === null || _a === void 0 ? void 0 : _a.rrid, className: node.class });
+    return (_jsx(RRIDLink, { rrid: (_a = node.data) === null || _a === void 0 ? void 0 : _a.rrid, className: classNames(node.class, className) }));
 };
-export const RORLinkRenderer = ({ node }) => {
+export const RORLinkRenderer = ({ node, className }) => {
     var _a;
-    return _jsx(RORLink, { node: node, ror: (_a = node.data) === null || _a === void 0 ? void 0 : _a.ror, className: node.class });
+    return (_jsx(RORLink, { node: node, ror: (_a = node.data) === null || _a === void 0 ? void 0 : _a.ror, className: classNames(node.class, className) }));
 };
-export const SimpleLink = ({ node }) => {
+export const SimpleLink = ({ node, className }) => {
     var _a;
     const internal = (_a = node.internal) !== null && _a !== void 0 ? _a : false;
     if (internal) {
-        return (_jsx(InternalLink, { url: node.url, className: node.class, children: _jsx(MyST, { ast: node.children }) }));
+        return (_jsx(InternalLink, { url: node.url, className: classNames(node.class, className), children: _jsx(MyST, { ast: node.children }) }));
     }
-    return (_jsx("a", { target: "_blank", rel: "noreferrer", href: node.url, className: node.class, children: _jsx(MyST, { ast: node.children }) }));
+    return (_jsx("a", { target: "_blank", rel: "noreferrer", href: node.url, className: classNames(node.class, className), children: _jsx(MyST, { ast: node.children }) }));
 };
-export const linkBlock = ({ node }) => {
+export const linkBlock = ({ node, className }) => {
     var _a;
     const iconClass = 'self-center transition-transform flex-none ml-3';
     const containerClass = 'flex-1 p-4 my-5 block border font-normal hover:border-blue-500 dark:hover:border-blue-400 no-underline hover:text-blue-600 dark:hover:text-blue-400 text-gray-600 dark:text-gray-100 border-gray-200 dark:border-gray-500 rounded shadow-sm hover:shadow-lg dark:shadow-neutral-700';
     const internal = (_a = node.internal) !== null && _a !== void 0 ? _a : false;
     const nested = (_jsxs("div", { className: "flex h-full align-middle", children: [_jsxs("div", { className: "flex-grow", children: [node.title, _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: _jsx(MyST, { ast: node.children }) })] }), internal && _jsx(LinkIcon, { width: "1.5rem", height: "1.5rem", className: iconClass }), !internal && _jsx(ExternalLinkIcon, { width: "1.5rem", height: "1.5rem", className: iconClass })] }));
     if (internal) {
-        return (_jsx("a", { href: node.url, className: containerClass, children: nested }));
+        return (_jsx("a", { href: node.url, className: classNames(containerClass, className), children: nested }));
     }
-    return (_jsx("a", { className: containerClass, target: "_blank", rel: "noopener noreferrer", href: node.url, children: nested }));
+    return (_jsx("a", { className: classNames(containerClass, className), target: "_blank", rel: "noopener noreferrer", href: node.url, children: nested }));
 };
 const LINK_RENDERERS = {
     link: {

package/dist/math.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../src/math.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGlD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AA2B1D,KAAK,QAAQ,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAwCF,QAAA,MAAM,cAAc;;;CAGnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../src/math.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGlD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AA4B1D,KAAK,QAAQ,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAwCF,QAAA,MAAM,cAAc;;;CAGnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/math.js

@@ -2,18 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
 import { InlineError } from './inlineError.js';
 import { HashLink } from './hashLink.js';
-const mathRenderer = ({ node }) => {
+import classNames from 'classnames';
+const mathRenderer = ({ node, className }) => {
     if (node.type === 'math') {
         if (node.error || !node.html) {
-            return (_jsxs("pre", { title: node.message, children: [_jsxs("span", { className: "text-red-500", children: [_jsx(ExclamationCircleIcon, { width: "1rem", height: "1rem", className: "inline mr-1" }), node.message, '\n\n'] }), node.value] }));
+            return (_jsxs("pre", { title: node.message, className: className, children: [_jsxs("span", { className: "text-red-500", children: [_jsx(ExclamationCircleIcon, { width: "1rem", height: "1rem", className: "inline mr-1" }), node.message, '\n\n'] }), node.value] }));
         }
         const id = node.html_id || node.identifier || node.key;
-        return (_jsxs("div", { id: id, className: "flex my-5 group", children: [_jsx("div", { dangerouslySetInnerHTML: { __html: node.html }, className: "flex-grow overflow-x-auto overflow-y-hidden" }), node.enumerator && (_jsx("div", { className: "relative self-center flex-none pl-2 m-0 text-right select-none", children: _jsxs(HashLink, { id: id, kind: "Equation", className: "text-inherit hover:text-inherit", children: ["(", node.enumerator, ")"] }) }))] }));
+        return (_jsxs("div", { id: id, className: classNames('flex my-5 group', className), children: [_jsx("div", { dangerouslySetInnerHTML: { __html: node.html }, className: "flex-grow overflow-x-auto overflow-y-hidden" }), node.enumerator && (_jsx("div", { className: "relative self-center flex-none pl-2 m-0 text-right select-none", children: _jsxs(HashLink, { id: id, kind: "Equation", className: "text-inherit hover:text-inherit", children: ["(", node.enumerator, ")"] }) }))] }));
     }
     if (node.error || !node.html) {
-        return _jsx(InlineError, { value: node.value, message: node.message });
+        return _jsx(InlineError, { value: node.value, message: node.message, className: className });
     }
-    return _jsx("span", { dangerouslySetInnerHTML: { __html: node.html } });
+    return _jsx("span", { dangerouslySetInnerHTML: { __html: node.html }, className: className });
     // return <Math html={node.html} value={node.value as string} />;
 };
 const MATH_RENDERERS = {

package/dist/proof.d.ts

@@ -19,7 +19,7 @@ export declare enum ProofKind {
     theorem = "theorem"
 }
 type Color = 'gray' | 'blue' | 'green' | 'yellow' | 'orange' | 'red' | 'purple';
-export declare function Proof({ title, kind, color, dropdown, children, identifier, enumerator, }: {
+export declare function Proof({ title, kind, color, dropdown, children, identifier, enumerator, className, }: {
     title?: React.ReactNode;
     color?: Color;
     kind?: ProofKind;
@@ -27,6 +27,7 @@ export declare function Proof({ title, kind, color, dropdown, children, identifi
     dropdown?: boolean;
     identifier?: string;
     enumerator?: string;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare const ProofRenderer: NodeRenderer<AdmonitionSpec>;
 declare const PROOF_RENDERERS: {

package/dist/proof.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"proof.d.ts","sourceRoot":"","sources":["../src/proof.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,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,OAAO,YAAY;CACpB;AAED,KAAK,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AAqFhF,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,UAAU,GACX,EAAE;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CA8DA;AAED,eAAO,MAAM,aAAa,EAAE,YAAY,CAAC,cAAc,CAoBtD,CAAC;AAEF,QAAA,MAAM,eAAe;;CAEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"proof.d.ts","sourceRoot":"","sources":["../src/proof.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,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,OAAO,YAAY;CACpB;AAED,KAAK,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AAqFhF,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CA+DA;AAED,eAAO,MAAM,aAAa,EAAE,YAAY,CAAC,cAAc,CAqBtD,CAAC;AAEF,QAAA,MAAM,eAAe;;CAEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/proof.js

@@ -69,7 +69,7 @@ const HeaderElement = ({ dropdown, className, children, }) => {
     return _jsx("div", { className: className, children: children });
 };
 const iconClass = 'inline-block pl-2 mr-2 self-center flex-none';
-export function Proof({ title, kind, color, dropdown, children, identifier, enumerator, }) {
+export function Proof({ title, kind, color, dropdown, children, identifier, enumerator, className, }) {
     return (_jsxs(WrapperElement, { id: identifier, dropdown: dropdown, className: classNames('my-5 shadow dark:bg-stone-800 overflow-hidden', 'dark:border-l-4 border-slate-400', {
             'dark:border-gray-500/60': !color || color === 'gray',
             'dark:border-blue-500/60': color === 'blue',
@@ -78,7 +78,7 @@ export function Proof({ title, kind, color, dropdown, children, identifier, enum
             'dark:border-orange-500/60': color === 'orange',
             'dark:border-red-500/60': color === 'red',
             'dark:border-purple-500/60': color === 'purple',
-        }), children: [_jsxs(HeaderElement, { dropdown: dropdown, className: classNames('m-0 font-medium py-2 flex min-w-0', 'text-md', 'border-y dark:border-y-0', {
+        }, className), children: [_jsxs(HeaderElement, { dropdown: dropdown, className: classNames('m-0 font-medium py-2 flex min-w-0', 'text-md', 'border-y dark:border-y-0', {
                     'bg-gray-50/80 dark:bg-slate-900': !color || color === 'gray',
                     'bg-blue-50/80 dark:bg-slate-900': color === 'blue',
                     'bg-green-50/80 dark:bg-slate-900': color === 'green',
@@ -89,13 +89,13 @@ export function Proof({ title, kind, color, dropdown, children, identifier, enum
                     'cursor-pointer hover:shadow-[inset_0_0_0px_30px_#00000003] dark:hover:shadow-[inset_0_0_0px_30px_#FFFFFF03]': dropdown,
                 }), children: [_jsxs("div", { className: classNames('text-neutral-900 dark:text-white grow self-center overflow-hidden break-words', 'ml-4'), children: [_jsxs(HashLink, { id: identifier, kind: capitalize(kind), children: [capitalize(kind), " ", enumerator] }), ' ', title && _jsxs(_Fragment, { children: ["(", title, ")"] })] }), dropdown && (_jsx("div", { className: "self-center flex-none text-sm font-thin text-neutral-700 dark:text-neutral-200", children: _jsx(ChevronRightIcon, { width: "1.5rem", height: "1.5rem", className: classNames(iconClass, 'transition-transform details-toggle') }) }))] }), _jsx("div", { className: classNames('px-4', { 'details-body': dropdown }), children: children })] }));
 }
-export const ProofRenderer = ({ node }) => {
+export const ProofRenderer = ({ node, className }) => {
     const [title, ...rest] = node.children;
     const classes = getClasses(node.class);
     const { color } = getColor({ kind: node.kind, classes });
     const isDropdown = classes.includes('dropdown');
     const useTitle = (title === null || title === void 0 ? void 0 : title.type) === 'admonitionTitle';
-    return (_jsx(Proof, { identifier: node.html_id, title: useTitle ? _jsx(MyST, { ast: [title] }) : undefined, kind: node.kind, enumerator: node.enumerator, color: color, dropdown: isDropdown, children: useTitle ? _jsx(MyST, { ast: rest }) : _jsx(MyST, { ast: node.children }) }));
+    return (_jsx(Proof, { identifier: node.html_id, title: useTitle ? _jsx(MyST, { ast: [title] }) : undefined, kind: node.kind, enumerator: node.enumerator, color: color, dropdown: isDropdown, className: className, children: useTitle ? _jsx(MyST, { ast: rest }) : _jsx(MyST, { ast: node.children }) }));
 };
 const PROOF_RENDERERS = {
     proof: ProofRenderer,

package/dist/reactive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reactive.d.ts","sourceRoot":"","sources":["../src/reactive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG1D,eAAO,MAAM,IAAI,EAAE,YAOlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,YAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,YActB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,YAapB,CAAC;AAEF,QAAA,MAAM,kBAAkB;;;;;CAKvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"reactive.d.ts","sourceRoot":"","sources":["../src/reactive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG1D,eAAO,MAAM,IAAI,EAAE,YAQlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,YAQtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,YAetB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,YAcpB,CAAC;AAEF,QAAA,MAAM,kBAAkB;;;;;CAKvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/reactive.js

@@ -1,21 +1,23 @@
 import { createElement as e } from 'react';
-export const RVar = ({ node }) => {
+export const RVar = ({ node, className }) => {
     return e('r-var', {
         name: node.name,
         value: node.value,
         ':value': node.valueFunction,
         format: node.format,
+        className: className,
     });
 };
-export const RDisplay = ({ node }) => {
+export const RDisplay = ({ node, className }) => {
     return e('r-display', {
         name: node.name,
         value: node.value,
         ':value': node.valueFunction,
         format: node.format,
+        className: className,
     });
 };
-export const RDynamic = ({ node }) => {
+export const RDynamic = ({ node, className }) => {
     return e('r-dynamic', {
         name: node.name,
         value: node.value,
@@ -28,9 +30,10 @@ export const RDynamic = ({ node }) => {
         ':step': node.stepFunction,
         ':change': node.changeFunction,
         format: node.format,
+        className: className,
     });
 };
-export const RRange = ({ node }) => {
+export const RRange = ({ node, className }) => {
     return e('r-range', {
         name: node.name,
         value: node.value,
@@ -42,6 +45,7 @@ export const RRange = ({ node }) => {
         step: node.step,
         ':step': node.stepFunction,
         ':change': node.changeFunction,
+        className: className,
     });
 };
 const REACTIVE_RENDERERS = {

package/dist/tabs.d.ts

@@ -13,12 +13,14 @@ type Tab = {
     sync?: string;
     selected?: boolean;
 };
-export declare function TabSet({ tabs, children }: {
+export declare function TabSet({ tabs, children, className, }: {
     tabs: Tab[];
     children: React.ReactNode;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function TabItem({ id, children, }: Omit<Tab, 'title' | 'sync'> & {
+export declare function TabItem({ id, children, className, }: Omit<Tab, 'title' | 'sync'> & {
     children: React.ReactNode;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare const TabSetRenderer: NodeRenderer;
 export declare const TabItemRenderer: NodeRenderer<TabItem>;

package/dist/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../src/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGrE,UAAU,OAAQ,SAAQ,WAAW;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AASD,KAAK,GAAG,GAAG;IAAE,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE9F,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,GAAG,EAAE,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CA+CpF;AAED,wBAAgB,OAAO,CAAC,EACtB,EAAE,EACF,QAAQ,GACT,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAI7D;AAED,eAAO,MAAM,cAAc,EAAE,YAY5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,OAAO,CAMjD,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAG/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../src/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGrE,UAAU,OAAQ,SAAQ,WAAW;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AASD,KAAK,GAAG,GAAG;IAAE,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE9F,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,SAAS,GACV,EAAE;IACD,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CA+CA;AAED,wBAAgB,OAAO,CAAC,EACtB,EAAE,EACF,QAAQ,EACR,SAAS,GACV,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAIjF;AAED,eAAO,MAAM,cAAc,EAAE,YAY5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,OAAO,CAMjD,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAG/C,CAAC;AAEF,eAAe,aAAa,CAAC"}