myst-to-react 0.9.7 → 0.9.9

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;AAI1D,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;AAsBF,eAAO,MAAM,aAAa,EAAE,YAAY,CAAC,KAAK,CAoB7C,CAAC;AAEF,QAAA,MAAM,eAAe;;CAEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/aside.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MyST } from './MyST.js';
+import classNames from 'classnames';
 function getAsideClass(kind) {
     switch (kind) {
         case 'topic':
@@ -20,11 +21,11 @@ function getAsideClass(kind) {
 }
 export const AsideRenderer = ({ node }) => {
     const [title, ...rest] = node.children;
-    const className = getAsideClass(node.kind);
+    const classes = getAsideClass(node.kind);
     if (title.type !== 'admonitionTitle') {
-        return (_jsx("aside", { className: className.container, children: _jsx(MyST, { ast: node.children }) }));
+        return (_jsx("aside", { className: classNames(classes.container, node.class), children: _jsx(MyST, { ast: node.children }) }));
     }
-    return (_jsxs("aside", { className: className.container, children: [_jsx("div", { className: className.title, children: _jsx(MyST, { ast: title }) }), _jsx("div", { className: className.body, children: _jsx(MyST, { ast: rest }) })] }));
+    return (_jsxs("aside", { className: classNames(classes.container, node.class), children: [_jsx("div", { className: classes.title, children: _jsx(MyST, { ast: title }) }), _jsx("div", { className: classes.body, children: _jsx(MyST, { ast: rest }) })] }));
 };
 const ASIDE_RENDERERS = {
     aside: AsideRenderer,

package/dist/code.js

@@ -44,7 +44,7 @@ export function CodeBlock(props) {
                 }, customStyle: { padding: '0.8rem' }, children: value }), showCopy && (_jsx(CopyIcon, { text: value, className: classNames('absolute right-1', { 'top-[32px]': filename, 'top-1': !filename }) }))] }));
 }
 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, 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' }) }));
+    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, 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) }));
 };
 function isColor(maybeColorHash) {
     if (!maybeColorHash || maybeColorHash.length > 9)

package/dist/iframe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../src/iframe.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAuB1D,eAAO,MAAM,MAAM,EAAE,YAiCpB,CAAC;AAEF,QAAA,MAAM,gBAAgB;;CAErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../src/iframe.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAwB1D,eAAO,MAAM,MAAM,EAAE,YAiCpB,CAAC;AAEF,QAAA,MAAM,gBAAgB;;CAErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/iframe.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
 /** This is duplicated in image, but a bit different logic */
 function getStyleValue(width) {
     if (typeof width === 'number' && Number.isNaN(width)) {
@@ -23,7 +24,7 @@ function getStyleValue(width) {
 }
 export const IFrame = ({ node }) => {
     const width = getStyleValue(node.width) || 70;
-    return (_jsx("div", { id: node.label || undefined, style: { textAlign: node.align || 'center' }, className: "leading-[0]", 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), 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;AAmHrD,eAAO,MAAM,KAAK,EAAE,YAAY,CAAC,SAAS,CAczC,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;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"}

package/dist/image.js

@@ -31,22 +31,24 @@ function alignToMargin(align) {
             return {};
     }
 }
-function Video({ id, src, urlSource, align = 'center', width, height, }) {
-    return (_jsx("video", { id: id, style: Object.assign({ width: getStyleValue(width), height: getStyleValue(height) }, alignToMargin(align)), src: src, "data-canonical-url": urlSource, autoPlay: true, 
+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, 
         // For autoplay, the element needs to be muted to actually start!
         muted: true, "webkit-playsinline": "true", playsInline: true, loop: true }));
 }
-function Picture({ id, src, srcOptimized, urlSource, align = 'center', alt, width, height, }) {
+function Picture({ className, id, src, srcOptimized, urlSource, align = 'center', alt, width, height, }) {
     if (src.endsWith('.mp4') || (urlSource === null || urlSource === void 0 ? void 0 : urlSource.endsWith('.mp4'))) {
-        return (_jsx(Video, { id: id, width: width, height: height, align: align, src: src, urlSource: urlSource }));
+        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 }));
     if (!srcOptimized)
         return image;
-    return (_jsxs("picture", { children: [_jsx("source", { srcSet: srcOptimized, type: "image/webp" }), image] }));
+    return (_jsxs("picture", { className: className, children: [_jsx("source", { srcSet: srcOptimized, type: "image/webp" }), image] }));
 }
 export const Image = ({ node }) => {
-    return (_jsx(Picture, { 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, 
+    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, 
         // Note that sourceUrl is for backwards compatibility
         urlSource: node.urlSource || node.sourceUrl }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myst-to-react",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/providers": "^0.9.7",
+    "@myst-theme/providers": "^0.9.9",
     "@scienceicons/react": "^0.0.6",
     "@radix-ui/react-hover-card": "^1.0.6",
     "buffer": "^6.0.3",