myst-to-react 0.15.2 → 0.17.0

package/dist/admonitions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"admonitions.d.ts","sourceRoot":"","sources":["../src/admonitions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,IAAI,cAAc,EAC5B,eAAe,IAAI,mBAAmB,EACvC,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAsB1D,oBAAY,cAAc;IACxB,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,OAAO,YAAY;CACpB;AAED,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAyEjD,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,mBAAmB,CAE7D,CAAC;AAmCF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,IAAI,GACL,EAAE;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,2CAuEA;AAED,eAAO,MAAM,kBAAkB,EAAE,YAAY,CAAC,cAAc,CAyB3D,CAAC;AAEF,QAAA,MAAM,oBAAoB;;;CAGzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"admonitions.d.ts","sourceRoot":"","sources":["../src/admonitions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,IAAI,cAAc,EAC5B,eAAe,IAAI,mBAAmB,EACvC,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAsB1D,oBAAY,cAAc;IACxB,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,OAAO,YAAY;CACpB;AAED,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAyEjD,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,mBAAmB,CAE7D,CAAC;AAmCF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,IAAI,GACL,EAAE;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,2CA4EA;AAED,eAAO,MAAM,kBAAkB,EAAE,YAAY,CAAC,cAAc,CAyB3D,CAAC;AAEF,QAAA,MAAM,oBAAoB;;;CAGzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/admonitions.js

@@ -57,7 +57,7 @@ function getFirstKind({ kind, classes = [], }) {
     }
     return { kind: AdmonitionKind.note, color: 'blue' };
 }
-const iconClass = 'inline-block pl-2 mr-2 self-center flex-none';
+const iconClass = 'myst-admonition-header-icon inline-block pl-2 mr-2 self-center flex-none';
 function AdmonitionIcon({ kind, className }) {
     const cn = classNames(iconClass, className);
     const opts = { width: '2rem', height: '2rem', className: cn };
@@ -97,14 +97,14 @@ const HeaderElement = ({ dropdown, className, children, }) => {
     return _jsx("div", { className: className, children: children });
 };
 export function Admonition({ title, kind, color, simple, dropdown, children, hideIcon, className, open, }) {
-    return (_jsxs(WrapperElement, { dropdown: dropdown, open: open, className: classNames('my-5 shadow-md dark:shadow-2xl dark:shadow-neutral-900', 'bg-gray-50/10 dark:bg-stone-800', 'overflow-hidden', {
-            'rounded border-l-4': !simple,
-            'border-l-2': simple,
+    return (_jsxs(WrapperElement, { dropdown: dropdown, open: open, className: classNames(`myst-admonition myst-admonition-${kind} my-5 shadow-md dark:shadow-2xl dark:shadow-neutral-900`, 'bg-gray-50/10 dark:bg-stone-800', 'overflow-hidden', {
+            'myst-admonition-default rounded border-l-4': !simple,
+            'myst-admonition-simple border-l-2': simple,
             'border-blue-500': !color || color === 'blue',
             'border-green-600': color === 'green',
             'border-amber-600': color === 'yellow',
             'border-red-600': color === 'red',
-        }, className), children: [title && (_jsxs(HeaderElement, { dropdown: dropdown, className: classNames('m-0 font-medium py-1 flex min-w-0', {
+        }, className), children: [title && (_jsxs(HeaderElement, { dropdown: dropdown, className: classNames('myst-admonition-header m-0 font-medium py-1 flex min-w-0', {
                     'text-lg': !simple,
                     'text-md': simple,
                     'bg-gray-100 dark:bg-stone-700': simple,
@@ -119,7 +119,10 @@ export function Admonition({ title, kind, color, simple, dropdown, children, hid
                             'text-green-600': color === 'green',
                             'text-amber-600': color === 'yellow',
                             'text-red-600': color === 'red',
-                        }) })), _jsx("div", { className: classNames('text-neutral-900 dark:text-white grow self-center overflow-hidden break-words', { 'ml-4': hideIcon }), 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: "2rem", height: "2rem", className: classNames(iconClass, 'transition-transform details-toggle') }) }))] })), _jsx("div", { className: classNames('px-4', { 'py-1': !simple, 'details-body': dropdown }), children: children })] }));
+                        }) })), _jsx("div", { className: classNames('myst-admonition-header-text text-neutral-900 dark:text-white grow self-center overflow-hidden break-words', { 'ml-4': hideIcon }), 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: "2rem", height: "2rem", className: classNames(iconClass, 'transition-transform details-toggle') }) }))] })), _jsx("div", { className: classNames('myst-admonition-body px-4', {
+                    'py-1': !simple,
+                    'details-body': dropdown,
+                }), children: children })] }));
 }
 export const AdmonitionRenderer = ({ node, className }) => {
     const [title, ...rest] = node.children;

package/dist/aside.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aside.d.ts","sourceRoot":"","sources":["../src/aside.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAK1D,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAsBF,eAAO,MAAM,aAAa,EAAE,YAAY,CAAC,KAAK,CAoB7C,CAAC;AAEF,QAAA,MAAM,eAAe;;CAEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"aside.d.ts","sourceRoot":"","sources":["../src/aside.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAK1D,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAuBF,eAAO,MAAM,aAAa,EAAE,YAAY,CAAC,KAAK,CAoB7C,CAAC;AAEF,QAAA,MAAM,eAAe;;CAEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/aside.js

@@ -5,17 +5,17 @@ function getAsideClass(kind) {
     switch (kind) {
         case 'topic':
             return {
-                container: 'my-5 shadow dark:bg-stone-800 overflow-hidden dark:border-l-4 border-slate-400',
-                title: 'm-0 font-medium py-2 px-4 flex min-w-0 text-md border-y dark:border-y-0 bg-gray-50/80 dark:bg-slate-900',
-                body: 'px-4',
+                container: 'myst-aside myst-aside-${kind} my-5 shadow dark:bg-stone-800 overflow-hidden dark:border-l-4 border-slate-400',
+                title: 'myst-aside-title m-0 font-medium py-2 px-4 flex min-w-0 text-md border-y dark:border-y-0 bg-gray-50/80 dark:bg-slate-900',
+                body: 'myst-aside-body px-4',
             };
         case 'margin':
         case 'sidebar':
         default:
             return {
-                container: 'text-sm lg:h-0 col-margin-right',
-                title: 'text-base font-semibold',
-                body: '',
+                container: 'myst-aside myst-aside-${kind} text-sm lg:h-0 col-margin-right',
+                title: 'myst-aside-title text-base font-semibold',
+                body: 'myst-aside-body',
             };
     }
 }

package/dist/block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../src/block.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAoBrF;AAED,QAAA,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAEjD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../src/block.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAqBrF;AAED,QAAA,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAEjD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/block.js

@@ -3,7 +3,7 @@ import { Details } from './dropdown.js';
 import { MyST } from './MyST.js';
 import classNames from 'classnames';
 export function Block({ node, className }) {
-    var _a, _b;
+    var _a, _b, _c;
     const cn = classNames(className, node.class, {
         [(_a = node.data) === null || _a === void 0 ? void 0 : _a.class]: typeof ((_b = node.data) === null || _b === void 0 ? void 0 : _b.class) === 'string',
     });
@@ -12,7 +12,8 @@ export function Block({ node, className }) {
     // Only wrap this in a block if the block has a class name or an identifier
     // Otherwise pass through the contents as is.
     // This allows children (e.g. margin) access to the grid-system
-    const block = cn || node.identifier ? (_jsx("div", { id: node.identifier, className: cn, children: _jsx(MyST, { ast: node.children }) })) : (_jsx(MyST, { ast: node.children }));
+    const identifier = (_c = node.html_id) !== null && _c !== void 0 ? _c : node.identifier;
+    const block = cn || identifier ? (_jsx("div", { id: identifier, className: cn, children: _jsx(MyST, { ast: node.children }) })) : (_jsx(MyST, { ast: node.children }));
     if (node.visibility === 'hide') {
         return _jsx(Details, { title: "Block", children: block });
     }

package/dist/card.js

@@ -3,13 +3,13 @@ import classNames from 'classnames';
 import { useLinkProvider, useBaseurl, withBaseurl } from '@myst-theme/providers';
 import { MyST } from './MyST.js';
 export const Header = ({ node, className }) => {
-    return (_jsx("header", { className: classNames('py-1 pl-3 m-0 border-b border-gray-100 bg-gray-50 dark:bg-slate-900 dark:border-gray-800', className), children: _jsx(MyST, { ast: node.children }) }));
+    return (_jsx("header", { className: classNames('myst-card-header py-1 pl-3 m-0 border-b border-gray-100 bg-gray-50 dark:bg-slate-900 dark:border-gray-800', className), children: _jsx(MyST, { ast: node.children }) }));
 };
 export const Footer = ({ node, className }) => {
-    return (_jsx("footer", { className: classNames('py-1 pl-3 m-0 border-t border-gray-100 bg-gray-50 dark:bg-slate-900 dark:border-gray-800', className), children: _jsx(MyST, { ast: node.children }) }));
+    return (_jsx("footer", { className: classNames('myst-card-footer py-1 pl-3 m-0 border-t border-gray-100 bg-gray-50 dark:bg-slate-900 dark:border-gray-800', className), children: _jsx(MyST, { ast: node.children }) }));
 };
 export const CardTitle = ({ node, className }) => {
-    return (_jsx("div", { className: classNames('pt-3 font-bold group-hover:underline', className), children: _jsx(MyST, { ast: node.children }) }));
+    return (_jsx("div", { className: classNames('myst-card-title pt-3 font-bold group-hover:underline', className), children: _jsx(MyST, { ast: node.children }) }));
 };
 function getParts(children) {
     var _a, _b;
@@ -39,11 +39,11 @@ export const CardRenderer = ({ node, className }) => {
     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';
+    const sharedStyle = 'myst-card 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', className), 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(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', className), children: [_jsx(MyST, { ast: parts.header }), _jsx("div", { className: "myst-card-body flex-grow px-4 py-2", children: _jsx(MyST, { ast: parts.body }) }), _jsx(MyST, { ast: parts.footer })] }));
     }
-    return (_jsxs("div", { className: classNames(sharedStyle, className), 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: classNames(sharedStyle, className), children: [_jsx(MyST, { ast: parts.header }), _jsx("div", { className: "myst-card-body flex-grow px-4 py-2", children: _jsx(MyST, { ast: parts.body }) }), _jsx(MyST, { ast: parts.footer })] }));
 };
 const CARD_RENDERERS = {
     card: CardRenderer,

package/dist/code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../src/code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAU1D,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;AAaF,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,2CAiFrC;AAgED,QAAA,MAAM,cAAc;;;CAGnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../src/code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAU1D,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;AAaF,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,2CAuFrC;AAgED,QAAA,MAAM,cAAc;;;CAGnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/code.js

@@ -49,11 +49,14 @@ export function CodeBlock(props) {
             },
         };
     }, [emphasizeLines]);
-    return (_jsxs("div", { id: identifier, className: classNames('relative group not-prose overflow-auto', className, {
-            'shadow hover:shadow-md dark:shadow-2xl dark:shadow-neutral-900 my-5 text-sm': shadow,
+    return (_jsxs("div", { id: identifier, className: classNames('relative myst-code group not-prose', className, {
+            'my-5 text-sm shadow hover:shadow-md dark:shadow-2xl dark:shadow-neutral-900': shadow,
             'bg-stone-200/10': background,
-            'border border-l-4 border-l-blue-400 border-gray-200 dark:border-l-blue-400 dark:border-gray-800': border,
-        }), children: [filename && (_jsxs("div", { className: "flex flex-row pl-2 bg-white border-b dark:bg-slate-600 dark:border-slate-300", children: [_jsx(DocumentIcon, { width: "16px", height: "16px", className: "self-center flex-none inline-block text-gray-500 dark:text-gray-100" }), _jsx("div", { className: "self-center p-2 text-sm leading-3 prose text-slate-600 dark:text-white", children: filename })] })), _jsx(SyntaxHighlighter, Object.assign({}, highlighterProps, { className: "block p-3 hljs", children: value })), showCopy && (_jsx(CopyIcon, { text: value, className: classNames('absolute right-1', { 'top-[32px]': filename, 'top-1': !filename }) }))] }));
+            'border border-l-4 border-gray-200 border-l-blue-400 dark:border-l-blue-400 dark:border-gray-800': border,
+        }), children: [filename && (_jsxs("div", { className: "flex flex-row pl-2 bg-white border-b dark:bg-slate-600 dark:border-slate-300", children: [_jsx(DocumentIcon, { width: "16px", height: "16px", className: "inline-block flex-none self-center text-gray-500 myst-code-filename-icon dark:text-gray-100" }), _jsx("div", { className: "self-center p-2 text-sm leading-3 myst-code-filename-title prose text-slate-600 dark:text-white", children: filename })] })), _jsx(SyntaxHighlighter, Object.assign({}, highlighterProps, { className: "block overflow-auto p-3 myst-code-body hljs", children: value })), showCopy && (_jsx(CopyIcon, { text: value, className: classNames('absolute right-1 myst-code-copy-icon', {
+                    'top-[32px]': filename,
+                    'top-1': !filename,
+                }) }))] }));
 }
 const code = ({ node, className }) => {
     const child = (_jsx(CodeBlock, { identifier: node.html_id, "data-mdast-node-type": node.type, "data-mdast-node-id": node.key, value: node.value || '', lang: node.lang, filename: node.filename, emphasizeLines: node.emphasizeLines, showLineNumbers: node.showLineNumbers, startingLineNumber: node.startingLineNumber, shadow: true, border: node.executable, background: !node.executable, className: classNames({ hidden: node.visibility === 'remove' }, node.class, className) }));

package/dist/dropdown.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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]';
+const iconClass = 'myst-dropdown-header-icon inline-block pl-2 mr-2 -translate-y-[1px]';
 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 })] }));
+    return (_jsxs("details", { className: classNames('myst-dropdown 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('myst-dropdown-header 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: "myst-dropdown-header-title 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: "myst-dropdown-body px-4 py-1 details-body", children: children })] }));
 }
 export const DetailsRenderer = ({ node, className }) => {
     const [title, ...rest] = node.children;

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,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"}
+{"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,2CAiFA;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

@@ -37,7 +37,7 @@ const HeaderElement = ({ dropdown, className, children, }) => {
 };
 const iconClass = 'inline-block pl-2 mr-2 self-center flex-none';
 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', {
+    return (_jsxs(WrapperElement, { id: identifier, dropdown: dropdown, className: classNames('myst-exercise 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',
             'dark:border-green-500/60': color === 'green',
@@ -45,7 +45,7 @@ export function Callout({ title, color, dropdown, children, identifier, classNam
             'dark:border-orange-500/60': color === 'orange',
             'dark:border-red-500/60': color === 'red',
             'dark:border-purple-500/60': color === 'purple',
-        }, 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', {
+        }, className), children: [_jsxs(HeaderElement, { dropdown: dropdown, className: classNames('myst-exercise-header 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',
@@ -54,7 +54,7 @@ export function Callout({ title, color, dropdown, children, identifier, classNam
                     'bg-red-50/80 dark:bg-slate-900': color === 'red',
                     'bg-purple-50/80 dark:bg-slate-900': color === 'purple',
                     'cursor-pointer hover:shadow-[inset_0_0_0px_30px_#00000003] dark:hover:shadow-[inset_0_0_0px_30px_#FFFFFF03]': dropdown,
-                }), children: [Icon && (_jsx(Icon, { width: "2rem", height: "2rem", className: classNames('inline-block pl-2 mr-2 self-center flex-none', classNames({
+                }), children: [Icon && (_jsx(Icon, { width: "2rem", height: "2rem", className: classNames('myst-exercise-header-icon inline-block pl-2 mr-2 self-center flex-none', classNames({
                             'text-gray-600': !color || color === 'gray',
                             'text-blue-600': color === 'blue',
                             'text-green-600': color === 'green',
@@ -62,8 +62,8 @@ export function Callout({ title, color, dropdown, children, identifier, classNam
                             'text-orange-600': color === 'orange',
                             'text-red-600': color === 'red',
                             'text-purple-600': color === 'purple',
-                        })) })), _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 })] }));
+                        })) })), _jsx("div", { className: classNames('myst-exercise-title 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('myst-exercise-body px-4', { 'details-body': dropdown }), children: children })] }));
 }
 export const ExerciseRenderer = ({ node, className }) => {
     var _a, _b, _c;

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;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"}
+{"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;AAkIrD,eAAO,MAAM,KAAK,EAAE,YAAY,CAAC,SAAS,CAezC,CAAC;AAEF,QAAA,MAAM,eAAe;;CAEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/image.js

@@ -41,7 +41,9 @@ function Picture({ className, id, src, srcOptimized, urlSource, align = 'center'
     if (src.endsWith('.mp4') || (urlSource === null || urlSource === void 0 ? void 0 : urlSource.endsWith('.mp4'))) {
         return (_jsx(Video, { className: className, id: id, width: width, height: height, align: align, src: src, urlSource: urlSource }));
     }
-    const image = (_jsx("img", { id: id, style: Object.assign({ width: getStyleValue(width), height: getStyleValue(height) }, alignToMargin(align)), src: src, alt: alt, "data-canonical-url": urlSource }));
+    const image = (_jsx("img", { id: id, style: Object.assign({ width: getStyleValue(width), height: getStyleValue(height) }, alignToMargin(align)), src: src, alt: alt, "data-canonical-url": urlSource, 
+        // Don't set className if nested under picture
+        className: srcOptimized ? undefined : className }));
     if (!srcOptimized)
         return image;
     return (_jsxs("picture", { className: className, children: [_jsx("source", { srcSet: srcOptimized, type: "image/webp" }), image] }));

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,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"}
+{"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,2CAiEA;AAED,eAAO,MAAM,aAAa,EAAE,YAAY,CAAC,cAAc,CAqBtD,CAAC;AAEF,QAAA,MAAM,eAAe;;CAEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/proof.js

@@ -70,7 +70,7 @@ const HeaderElement = ({ dropdown, className, children, }) => {
 };
 const iconClass = 'inline-block pl-2 mr-2 self-center flex-none';
 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', {
+    return (_jsxs(WrapperElement, { id: identifier, dropdown: dropdown, className: classNames('myst-proof 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',
             'dark:border-green-500/60': color === 'green',
@@ -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',
-        }, 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', {
+        }, className), children: [_jsxs(HeaderElement, { dropdown: dropdown, className: classNames('myst-proof-header 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',
@@ -87,7 +87,7 @@ export function Proof({ title, kind, color, dropdown, children, identifier, enum
                     'bg-red-50/80 dark:bg-slate-900': color === 'red',
                     'bg-purple-50/80 dark:bg-slate-900': color === 'purple',
                     '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 })] }));
+                }), children: [_jsxs("div", { className: classNames('myst-proof-title 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('myst-proof-body px-4', { 'details-body': dropdown }), children: children })] }));
 }
 export const ProofRenderer = ({ node, className }) => {
     const [title, ...rest] = node.children;

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,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"}
+{"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,2CAkDA;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"}

package/dist/tabs.js

@@ -30,12 +30,12 @@ export function TabSet({ tabs, children, className, }) {
             return;
         setActive(tab === null || tab === void 0 ? void 0 : tab.id);
     }, [tabs, lastClickedTab, setActive]);
-    return (_jsx(TabSetStateProvider, { active: active, children: _jsxs("div", { className: classNames('my-5', className), children: [_jsx("div", { className: "flex flex-row overflow-x-auto border-b border-b-gray-100", children: tabs.map((tab) => {
-                        return (_jsx("div", { className: classNames('flex-none px-3 py-1 font-semibold cursor-pointer', {
-                                'text-blue-600 border-b-2 border-b-blue-600 dark:border-b-white dark:text-white': active === tab.id,
-                                'text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100': active !== tab.id,
+    return (_jsx(TabSetStateProvider, { active: active, children: _jsxs("div", { className: classNames('myst-tab-set my-5', className), children: [_jsx("div", { className: "myst-tab-set-row flex flex-row flex-wrap overflow-x-auto border-b border-b-gray-100", children: tabs.map((tab) => {
+                        return (_jsx("div", { className: classNames('myst-tab-item-header flex-none px-3 py-1 font-semibold cursor-pointer', {
+                                'myst-tab-item-header-active text-blue-600 border-b-2 border-b-blue-600 dark:border-b-white dark:text-white': active === tab.id,
+                                'myst-tab-item-header-inactive text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100': active !== tab.id,
                             }), onClick: () => onClick(tab), children: tab.title }, tab.id));
-                    }) }), _jsx("div", { className: "flex shadow", children: _jsx("div", { className: "w-full px-6", children: children }) })] }) }));
+                    }) }), _jsx("div", { className: "myst-tab-item-body flex shadow", children: _jsx("div", { className: "myst-tab-item-text w-full px-6", children: children }) })] }) }));
 }
 export function TabItem({ id, children, className, }) {
     const active = useContext(TabSetContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myst-to-react",
-  "version": "0.15.2",
+  "version": "0.17.0",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,13 +21,13 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/providers": "^0.15.2",
-    "@scienceicons/react": "^0.0.11",
+    "@myst-theme/providers": "^0.17.0",
+    "@scienceicons/react": "^0.0.13",
     "@radix-ui/react-hover-card": "^1.0.6",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
-    "myst-common": "^1.7.9",
-    "myst-config": "^1.7.9",
+    "myst-common": "^1.8.1",
+    "myst-config": "^1.8.1",
     "myst-spec": "^0.0.5",
     "nanoid": "^4.0.2",
     "react-syntax-highlighter": "15.5.0",