@readme/markdown 7.1.0 → 7.2.1

package/components/Accordion/index.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+
+import './style.scss';
+
+const Accordion = ({ children, icon, iconColor, title }) => {
+  return (
+    <details className="Accordion">
+      <summary className="Accordion-title">
+       {icon && <i className={`Accordion-icon fa ${icon}`} style={{ color: `${iconColor}` }}></i>}
+       {title}
+      </summary>
+      <div className="Accordion-content">{children}</div>
+    </details>
+  );
+};
+
+export default Accordion;

package/components/Accordion/style.scss

@@ -0,0 +1,40 @@
+.Accordion {
+  background: rgba(var(--color-bg-page-rgb, white), 1);
+  border: 1px solid var(--color-border-default, rgba(black, 0.1));
+  border-radius: 5px;
+
+  &-title {
+    align-items: center;
+    background: white;
+    border: 0;
+    border-radius: 5px;
+    color: var(--color-text-default, #384248);
+    cursor: pointer;
+    display: flex;
+    font-size: 16px;
+    padding: 15px;
+    position: relative;
+    text-align: left;
+    width: 100%;
+
+    &:hover {
+      background: var(--color-bg-hover, #{rgba(black, 0.05)});
+    }
+
+    .Accordion[open] & {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  &-icon {
+    color: var(--project-color-primary, inherit);
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+
+  &-content {
+    color: var(--color-text-muted, #4f5a66);
+    padding: 10px 15px 0 15px;
+  }
+}

package/components/Cards/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import './style.scss';
+
+export const Card = ({ children, href, icon, iconColor, target, title }) => {
+  const Tag = href ? 'a' : 'div';
+  return (
+    <Tag className="Card" href={href} target={target}>
+      {icon && <i className={`Card-icon fa ${icon}`} style={{ color: `${iconColor}` }}></i>}
+      {title && <h3 className='Card-title'>{title}</h3>}
+      <div className="Card-content">{children}</div>
+    </Tag>
+  )
+}
+
+const CardsGrid = ({ columns = 2, children }) => {
+  columns = columns >= 2 ? columns : 2;
+  return (
+    <div className="CardsGrid" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
+      {children}
+    </div>
+  );
+};
+
+export default CardsGrid;

package/components/Cards/style.scss

@@ -0,0 +1,47 @@
+.CardsGrid {
+  display: grid;
+  gap: 20px;
+
+  .Card {
+    padding: 15px;
+    padding-bottom: 0;
+    backdrop-filter: blur(20px);
+    background: rgba(var(--color-bg-page-rgb, white), 1);
+    border: 1px solid var(--color-border-default, rgba(black, 0.1));
+    border-radius: 5px;
+    box-shadow: 0 1px 2px #{rgba(black, 0.05)}, 0 2px 5px #{rgba(black, 0.02)};
+
+    &-top {
+      display: inline-flex;
+      flex-direction: row;
+    }
+
+    &-icon {
+      color: var(--project-color-primary, inherit);
+      font-size: 20px;
+    }
+
+    &-title {
+      color: var(--color-text-default, #384248);
+      
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    &-content {
+      color: var(--color-text-muted, #4f5a66);
+    }
+  }
+
+  a.Card:not([href=""]) {
+    text-decoration: none;
+    color: inherit;
+
+    &:hover {
+      background: var(--color-bg-hover, #{rgba(black, 0.05)});
+    }
+  }
+
+
+}

package/components/Tabs/style.scss

@@ -19,6 +19,7 @@
       color: var(--blue, #118cfd);
       font-weight: 600;
       padding: 10px;
+      margin-bottom: -2px;
     }
 
     &:hover {

package/components/index.ts

@@ -1,6 +1,7 @@
+export { default as Accordion } from './Accordion';
 export { default as Anchor } from './Anchor';
 export { default as Callout } from './Callout';
-export { default as Cards } from './CardsGrid';
+export { default as Cards, Card } from './Cards';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
 export { default as Embed } from './Embed';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import './style.scss';
+declare const Accordion: ({ children, icon, iconColor, title }: {
+    children: any;
+    icon: any;
+    iconColor: any;
+    title: any;
+}) => React.JSX.Element;
+export default Accordion;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import './style.scss';
+export declare const Card: ({ children, href, icon, iconColor, target, title }: {
+    children: any;
+    href: any;
+    icon: any;
+    iconColor: any;
+    target: any;
+    title: any;
+}) => React.JSX.Element;
+declare const CardsGrid: ({ columns, children }: {
+    columns?: number;
+    children: any;
+}) => React.JSX.Element;
+export default CardsGrid;

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
+export { default as Accordion } from './Accordion';
 export { default as Anchor } from './Anchor';
 export { default as Callout } from './Callout';
-export { default as Cards } from './CardsGrid';
+export { default as Cards, Card } from './Cards';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
 export { default as Embed } from './Embed';

package/dist/enums.d.ts

@@ -3,6 +3,8 @@ export declare enum NodeTypes {
     codeTabs = "code-tabs",
     embedBlock = "embed-block",
     emoji = "gemoji",
+    figcaption = "figcaption",
+    figure = "figure",
     glossary = "readme-glossary-item",
     htmlBlock = "html-block",
     i = "i",

package/dist/example/RenderError.d.ts

@@ -18,6 +18,6 @@ declare class RenderError extends React.Component<PropsWithChildren<Props>, Stat
     componentDidCatch(error: any, info: {
         componentStack: any;
     }): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode>;
 }
 export default RenderError;

package/dist/main.css

@@ -1,5 +1,6 @@
-.CardsGrid{display:grid;gap:20px}.CardsGrid .Card{padding:10px;backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,.1);border-radius:5px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),0 2px 5px rgba(0, 0, 0, 0.02)}
-.TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-weight:600;padding:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--blue, #118cfd);color:var(--blue, #118cfd);font-weight:600;padding:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}
+.Accordion{background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px}.Accordion-title{align-items:center;background:#fff;border:0;border-radius:5px;color:var(--color-text-default, #384248);cursor:pointer;display:flex;font-size:16px;padding:15px;position:relative;text-align:left;width:100%}.Accordion-title:hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}.Accordion[open] .Accordion-title{border-bottom-left-radius:0;border-bottom-right-radius:0}.Accordion-icon{color:var(--project-color-primary, inherit);margin-left:5px;margin-right:5px}.Accordion-content{color:var(--color-text-muted, #4f5a66);padding:10px 15px 0 15px}
+.CardsGrid{display:grid;gap:20px}.CardsGrid .Card{padding:15px;padding-bottom:0;backdrop-filter:blur(20px);background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),0 2px 5px rgba(0, 0, 0, 0.02)}.CardsGrid .Card-top{display:inline-flex;flex-direction:row}.CardsGrid .Card-icon{color:var(--project-color-primary, inherit);font-size:20px}.CardsGrid .Card-title{color:var(--color-text-default, #384248)}.CardsGrid .Card-title:first-child{margin-top:0}.CardsGrid .Card-content{color:var(--color-text-muted, #4f5a66)}.CardsGrid a.Card:not([href=""]){text-decoration:none;color:inherit}.CardsGrid a.Card:not([href=""]):hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}
+.TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-weight:600;padding:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--blue, #118cfd);color:var(--blue, #118cfd);font-weight:600;padding:10px;margin-bottom:-2px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}
 /* BASICS */
 
 .CodeMirror {

package/dist/main.js

@@ -13254,9 +13254,11 @@ __webpack_require__.d(__webpack_exports__, {
 var components_namespaceObject = {};
 __webpack_require__.r(components_namespaceObject);
 __webpack_require__.d(components_namespaceObject, {
+  Accordion: () => (components_Accordion),
   Anchor: () => (components_Anchor),
   Callout: () => (components_Callout),
-  Cards: () => (components_CardsGrid),
+  Card: () => (Card),
+  Cards: () => (Cards),
   Code: () => (components_Code),
   CodeTabs: () => (components_CodeTabs),
   Embed: () => (components_Embed),
@@ -13298,6 +13300,21 @@ __webpack_require__.d(util_types_namespaceObject, {
   spaceSeparated: () => (spaceSeparated)
 });
 
+// EXTERNAL MODULE: external {"amd":"react","commonjs":"react","commonjs2":"react","root":"React","umd":"react"}
+var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_ = __webpack_require__(1307);
+var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default = /*#__PURE__*/__webpack_require__.n(external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_);
+;// CONCATENATED MODULE: ./components/Accordion/index.tsx
+
+
+const Accordion = ({ children, icon, iconColor, title }) => {
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("details", { className: "Accordion" },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("summary", { className: "Accordion-title" },
+            icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Accordion-icon fa ${icon}`, style: { color: `${iconColor}` } }),
+            title),
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Accordion-content" }, children)));
+};
+/* harmony default export */ const components_Accordion = (Accordion);
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.js
 var es_symbol = __webpack_require__(3534);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.description.js
@@ -13340,9 +13357,6 @@ var es_regexp_exec = __webpack_require__(7136);
 var es_string_match = __webpack_require__(8636);
 // EXTERNAL MODULE: ./node_modules/prop-types/index.js
 var prop_types = __webpack_require__(5556);
-// EXTERNAL MODULE: external {"amd":"react","commonjs":"react","commonjs2":"react","root":"React","umd":"react"}
-var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_ = __webpack_require__(1307);
-var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default = /*#__PURE__*/__webpack_require__.n(external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_);
 ;// CONCATENATED MODULE: ./contexts/BaseUrl.js
 
 var BaseUrlContext = /*#__PURE__*/external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createContext('/');
@@ -13483,15 +13497,21 @@ const Callout = (props) => {
 };
 /* harmony default export */ const components_Callout = (Callout);
 
-;// CONCATENATED MODULE: ./components/CardsGrid/index.tsx
+;// CONCATENATED MODULE: ./components/Cards/index.tsx
 
 
-const Card = ({ children }) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Card" }, children);
+const Card = ({ children, href, icon, iconColor, target, title }) => {
+    const Tag = href ? 'a' : 'div';
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Tag, { className: "Card", href: href, target: target },
+        icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Card-icon fa ${icon}`, style: { color: `${iconColor}` } }),
+        title && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("h3", { className: 'Card-title' }, title),
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Card-content" }, children)));
+};
 const CardsGrid = ({ columns = 2, children }) => {
     columns = columns >= 2 ? columns : 2;
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CardsGrid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` } }, external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().Children.map(children, e => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Card, null, e)))));
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CardsGrid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` } }, children));
 };
-/* harmony default export */ const components_CardsGrid = (CardsGrid);
+/* harmony default export */ const Cards = (CardsGrid);
 
 // EXTERNAL MODULE: ./node_modules/copy-to-clipboard/index.js
 var copy_to_clipboard = __webpack_require__(7965);
@@ -13808,6 +13828,7 @@ function TableOfContents({ children }) {
 
 
 
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.to-primitive.js
 var es_symbol_to_primitive = __webpack_require__(6611);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.filter.js
@@ -47716,6 +47737,8 @@ var NodeTypes;
     NodeTypes["codeTabs"] = "code-tabs";
     NodeTypes["embedBlock"] = "embed-block";
     NodeTypes["emoji"] = "gemoji";
+    NodeTypes["figcaption"] = "figcaption";
+    NodeTypes["figure"] = "figure";
     NodeTypes["glossary"] = "readme-glossary-item";
     NodeTypes["htmlBlock"] = "html-block";
     NodeTypes["i"] = "i";
@@ -47962,6 +47985,19 @@ const reformatHTML = (html, indent = 2) => {
     // const indented = cleaned.split('\n').map((line: string) => `${tab}${line}`).join('\n');
     return cleaned;
 };
+const toAttributes = (object, keys = []) => {
+    let attributes = [];
+    Object.entries(object).forEach(([name, value]) => {
+        if (keys.length > 0 && !keys.includes(name))
+            return;
+        attributes.push({
+            type: 'mdxJsxAttribute',
+            name,
+            value: value,
+        });
+    });
+    return attributes;
+};
 
 ;// CONCATENATED MODULE: ./processor/transform/images.ts
 
@@ -47971,10 +48007,8 @@ const reformatHTML = (html, indent = 2) => {
 const imageTransformer = () => (tree) => {
     visit(tree, 'paragraph', (node, i, parent) => {
         var _a;
-        // check if inline 
-        if (parent.type !== 'root' ||
-            ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 1 ||
-            node.children[0].type !== 'image')
+        // check if inline
+        if (parent.type !== 'root' || ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 1 || node.children[0].type !== 'image')
             return;
         const [{ alt, url, title }] = node.children;
         const newNode = {
@@ -65198,6 +65232,8 @@ const readmeComponents = (opts) => () => tree => {
 ;// CONCATENATED MODULE: ./processor/transform/readme-to-mdx.ts
 
 
+
+const imageAttrs = ['align', 'alt', 'caption', 'border', 'src', 'title', 'width', 'lazy', 'className'];
 const readmeToMdx = () => tree => {
     // Unwrap pinned nodes, replace rdme-pin with its child node
     visit(tree, 'rdme-pin', (node, i, parent) => {
@@ -65205,22 +65241,56 @@ const readmeToMdx = () => tree => {
         parent.children.splice(i, 1, newNode);
     });
     visit(tree, NodeTypes.tutorialTile, (tile, index, parent) => {
-        const attributes = ['backgroundColor', 'emoji', 'id', 'link', 'slug', 'title'].map(name => {
-            const value = tile[name];
-            delete tile[name];
-            return {
-                type: 'mdxJsxAttribute',
-                name,
-                value,
-            };
-        });
         parent.children.splice(index, 1, {
             type: 'mdxJsxFlowElement',
             name: 'TutorialTile',
-            attributes,
+            attributes: toAttributes(tile, ['backgroundColor', 'emoji', 'id', 'link', 'slug', 'title']),
             children: [],
         });
     });
+    visit(tree, 'figure', (figure, index, parent) => {
+        const [image, caption] = figure.children;
+        parent.children.splice(index, 1, {
+            type: 'mdxJsxFlowElement',
+            name: 'Image',
+            attributes: toAttributes(image, imageAttrs),
+            children: caption.children,
+        });
+    });
+    const hasExtra = (attributes) => !!attributes.find(attr => !['alt', 'src', 'title'].includes(attr.name));
+    visit(tree, 'image', (image, index, parent) => {
+        if (!('data' in image))
+            return;
+        const attributes = toAttributes(image.data.hProperties, imageAttrs);
+        if (hasExtra(attributes)) {
+            parent.children.splice(index, 1, {
+                type: 'mdxJsxFlowElement',
+                name: 'Image',
+                attributes,
+                children: [],
+            });
+        }
+    });
+    visit(tree, NodeTypes.imageBlock, (image, index, parent) => {
+        const attributes = toAttributes(image.data.hProperties, imageAttrs);
+        if (hasExtra(attributes)) {
+            parent.children.splice(index, 1, {
+                type: 'mdxJsxFlowElement',
+                name: 'Image',
+                attributes,
+                children: [],
+            });
+        }
+        else {
+            parent.children.splice(index, 1, {
+                type: 'image',
+                children: [],
+                url: image.url,
+                title: image.title,
+                alt: image.alt,
+            });
+        }
+    });
     return tree;
 };
 /* harmony default export */ const readme_to_mdx = (readmeToMdx);
@@ -82636,24 +82706,6 @@ ${reformatHTML(html)}
 };
 /* harmony default export */ const html_block = (htmlBlock);
 
-;// CONCATENATED MODULE: ./processor/compile/image.ts
-
-const compile_image_image = (node) => {
-    var _a;
-    const attributes = formatHProps(node);
-    const hProps = getHProps(node);
-    const hPropKeys = getHPropKeys(node);
-    const ImageBlock = `<Image ${attributes} />`;
-    const MDImage = `![${(_a = node.alt) !== null && _a !== void 0 ? _a : ''}](${hProps.src ? hProps.src : node.url}${node.title ? ` "${node.title}")` : ')'}`;
-    if (Boolean(attributes)) {
-        if (hPropKeys.includes('src') && (hPropKeys.includes('width') || hPropKeys.includes('border') || hPropKeys.includes('align'))) {
-            return ImageBlock;
-        }
-    }
-    return MDImage;
-};
-/* harmony default export */ const compile_image = (compile_image_image);
-
 ;// CONCATENATED MODULE: ./node_modules/hast-util-from-parse5/node_modules/hastscript/lib/create-h.js
 /**
  * @typedef {import('hast').Element} Element
@@ -93850,7 +93902,12 @@ const compatibility = (node) => {
 /* harmony default export */ const compile_compatibility = (compatibility);
 
 ;// CONCATENATED MODULE: ./processor/compile/variable.ts
-const variable = (node) => `{user.${node.data.hProperties.name}}`;
+const variable = (node) => {
+    // @note: coming from RDMD, it's set as `variable`. But when mdx is parsed,
+    // it's set as `name`
+    const name = node.data.hProperties.variable || node.data.hProperties.name;
+    return `{user.${name}}`;
+};
 /* harmony default export */ const compile_variable = (variable);
 
 ;// CONCATENATED MODULE: ./processor/compile/index.ts
@@ -93862,7 +93919,6 @@ const variable = (node) => `{user.${node.data.hProperties.name}}`;
 
 
 
-
 function compilers() {
     const data = this.data();
     const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
@@ -93873,7 +93929,6 @@ function compilers() {
         [NodeTypes.emoji]: compile_gemoji,
         [NodeTypes.glossary]: compile_compatibility,
         [NodeTypes.htmlBlock]: html_block,
-        [NodeTypes.imageBlock]: compile_image,
         [NodeTypes.reusableContent]: compile_compatibility,
         [NodeTypes.variable]: compile_variable,
         embed: compile_compatibility,
@@ -93903,8 +93958,8 @@ const mdx_mdx = (tree, { hast = false } = {}) => {
         .use(div)
         .use(readme_to_mdx)
         .use(tables_to_jsx)
-        .use(remarkStringify)
-        .use(processor_compile);
+        .use(processor_compile)
+        .use(remarkStringify);
     return processor.stringify(processor.runSync(tree));
 };
 /* harmony default export */ const lib_mdx = (mdx_mdx);

package/dist/main.node.js

@@ -7801,9 +7801,11 @@ __webpack_require__.d(__webpack_exports__, {
 var components_namespaceObject = {};
 __webpack_require__.r(components_namespaceObject);
 __webpack_require__.d(components_namespaceObject, {
+  Accordion: () => (components_Accordion),
   Anchor: () => (components_Anchor),
   Callout: () => (components_Callout),
-  Cards: () => (components_CardsGrid),
+  Card: () => (Card),
+  Cards: () => (Cards),
   Code: () => (components_Code),
   CodeTabs: () => (components_CodeTabs),
   Embed: () => (components_Embed),
@@ -7845,11 +7847,23 @@ __webpack_require__.d(util_types_namespaceObject, {
   spaceSeparated: () => (spaceSeparated)
 });
 
-// EXTERNAL MODULE: ./node_modules/prop-types/index.js
-var prop_types = __webpack_require__(556);
 // EXTERNAL MODULE: external {"amd":"react","commonjs":"react","commonjs2":"react","root":"React","umd":"react"}
 var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_ = __webpack_require__(137);
 var external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default = /*#__PURE__*/__webpack_require__.n(external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_);
+;// CONCATENATED MODULE: ./components/Accordion/index.tsx
+
+
+const Accordion = ({ children, icon, iconColor, title }) => {
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("details", { className: "Accordion" },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("summary", { className: "Accordion-title" },
+            icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Accordion-icon fa ${icon}`, style: { color: `${iconColor}` } }),
+            title),
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Accordion-content" }, children)));
+};
+/* harmony default export */ const components_Accordion = (Accordion);
+
+// EXTERNAL MODULE: ./node_modules/prop-types/index.js
+var prop_types = __webpack_require__(556);
 ;// CONCATENATED MODULE: ./contexts/BaseUrl.js
 
 const BaseUrlContext = /*#__PURE__*/external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createContext('/');
@@ -7963,15 +7977,21 @@ const Callout = (props) => {
 };
 /* harmony default export */ const components_Callout = (Callout);
 
-;// CONCATENATED MODULE: ./components/CardsGrid/index.tsx
+;// CONCATENATED MODULE: ./components/Cards/index.tsx
 
 
-const Card = ({ children }) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Card" }, children);
+const Card = ({ children, href, icon, iconColor, target, title }) => {
+    const Tag = href ? 'a' : 'div';
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Tag, { className: "Card", href: href, target: target },
+        icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: `Card-icon fa ${icon}`, style: { color: `${iconColor}` } }),
+        title && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("h3", { className: 'Card-title' }, title),
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Card-content" }, children)));
+};
 const CardsGrid = ({ columns = 2, children }) => {
     columns = columns >= 2 ? columns : 2;
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CardsGrid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` } }, external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().Children.map(children, e => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Card, null, e)))));
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CardsGrid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` } }, children));
 };
-/* harmony default export */ const components_CardsGrid = (CardsGrid);
+/* harmony default export */ const Cards = (CardsGrid);
 
 // EXTERNAL MODULE: ./node_modules/copy-to-clipboard/index.js
 var copy_to_clipboard = __webpack_require__(965);
@@ -13232,6 +13252,7 @@ function TableOfContents({ children }) {
 
 
 
+
 ;// CONCATENATED MODULE: ./options.js
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -48703,6 +48724,8 @@ var NodeTypes;
     NodeTypes["codeTabs"] = "code-tabs";
     NodeTypes["embedBlock"] = "embed-block";
     NodeTypes["emoji"] = "gemoji";
+    NodeTypes["figcaption"] = "figcaption";
+    NodeTypes["figure"] = "figure";
     NodeTypes["glossary"] = "readme-glossary-item";
     NodeTypes["htmlBlock"] = "html-block";
     NodeTypes["i"] = "i";
@@ -48949,6 +48972,19 @@ const reformatHTML = (html, indent = 2) => {
     // const indented = cleaned.split('\n').map((line: string) => `${tab}${line}`).join('\n');
     return cleaned;
 };
+const toAttributes = (object, keys = []) => {
+    let attributes = [];
+    Object.entries(object).forEach(([name, value]) => {
+        if (keys.length > 0 && !keys.includes(name))
+            return;
+        attributes.push({
+            type: 'mdxJsxAttribute',
+            name,
+            value: value,
+        });
+    });
+    return attributes;
+};
 
 ;// CONCATENATED MODULE: ./processor/transform/images.ts
 
@@ -48958,10 +48994,8 @@ const reformatHTML = (html, indent = 2) => {
 const imageTransformer = () => (tree) => {
     visit(tree, 'paragraph', (node, i, parent) => {
         var _a;
-        // check if inline 
-        if (parent.type !== 'root' ||
-            ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 1 ||
-            node.children[0].type !== 'image')
+        // check if inline
+        if (parent.type !== 'root' || ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 1 || node.children[0].type !== 'image')
             return;
         const [{ alt, url, title }] = node.children;
         const newNode = {
@@ -66185,6 +66219,8 @@ const readmeComponents = (opts) => () => tree => {
 ;// CONCATENATED MODULE: ./processor/transform/readme-to-mdx.ts
 
 
+
+const imageAttrs = ['align', 'alt', 'caption', 'border', 'src', 'title', 'width', 'lazy', 'className'];
 const readmeToMdx = () => tree => {
     // Unwrap pinned nodes, replace rdme-pin with its child node
     visit(tree, 'rdme-pin', (node, i, parent) => {
@@ -66192,22 +66228,56 @@ const readmeToMdx = () => tree => {
         parent.children.splice(i, 1, newNode);
     });
     visit(tree, NodeTypes.tutorialTile, (tile, index, parent) => {
-        const attributes = ['backgroundColor', 'emoji', 'id', 'link', 'slug', 'title'].map(name => {
-            const value = tile[name];
-            delete tile[name];
-            return {
-                type: 'mdxJsxAttribute',
-                name,
-                value,
-            };
-        });
         parent.children.splice(index, 1, {
             type: 'mdxJsxFlowElement',
             name: 'TutorialTile',
-            attributes,
+            attributes: toAttributes(tile, ['backgroundColor', 'emoji', 'id', 'link', 'slug', 'title']),
             children: [],
         });
     });
+    visit(tree, 'figure', (figure, index, parent) => {
+        const [image, caption] = figure.children;
+        parent.children.splice(index, 1, {
+            type: 'mdxJsxFlowElement',
+            name: 'Image',
+            attributes: toAttributes(image, imageAttrs),
+            children: caption.children,
+        });
+    });
+    const hasExtra = (attributes) => !!attributes.find(attr => !['alt', 'src', 'title'].includes(attr.name));
+    visit(tree, 'image', (image, index, parent) => {
+        if (!('data' in image))
+            return;
+        const attributes = toAttributes(image.data.hProperties, imageAttrs);
+        if (hasExtra(attributes)) {
+            parent.children.splice(index, 1, {
+                type: 'mdxJsxFlowElement',
+                name: 'Image',
+                attributes,
+                children: [],
+            });
+        }
+    });
+    visit(tree, NodeTypes.imageBlock, (image, index, parent) => {
+        const attributes = toAttributes(image.data.hProperties, imageAttrs);
+        if (hasExtra(attributes)) {
+            parent.children.splice(index, 1, {
+                type: 'mdxJsxFlowElement',
+                name: 'Image',
+                attributes,
+                children: [],
+            });
+        }
+        else {
+            parent.children.splice(index, 1, {
+                type: 'image',
+                children: [],
+                url: image.url,
+                title: image.title,
+                alt: image.alt,
+            });
+        }
+    });
     return tree;
 };
 /* harmony default export */ const readme_to_mdx = (readmeToMdx);
@@ -83623,24 +83693,6 @@ ${reformatHTML(html)}
 };
 /* harmony default export */ const html_block = (htmlBlock);
 
-;// CONCATENATED MODULE: ./processor/compile/image.ts
-
-const compile_image_image = (node) => {
-    var _a;
-    const attributes = formatHProps(node);
-    const hProps = getHProps(node);
-    const hPropKeys = getHPropKeys(node);
-    const ImageBlock = `<Image ${attributes} />`;
-    const MDImage = `![${(_a = node.alt) !== null && _a !== void 0 ? _a : ''}](${hProps.src ? hProps.src : node.url}${node.title ? ` "${node.title}")` : ')'}`;
-    if (Boolean(attributes)) {
-        if (hPropKeys.includes('src') && (hPropKeys.includes('width') || hPropKeys.includes('border') || hPropKeys.includes('align'))) {
-            return ImageBlock;
-        }
-    }
-    return MDImage;
-};
-/* harmony default export */ const compile_image = (compile_image_image);
-
 ;// CONCATENATED MODULE: ./node_modules/hast-util-from-parse5/node_modules/hastscript/lib/create-h.js
 /**
  * @typedef {import('hast').Element} Element
@@ -94837,7 +94889,12 @@ const compatibility = (node) => {
 /* harmony default export */ const compile_compatibility = (compatibility);
 
 ;// CONCATENATED MODULE: ./processor/compile/variable.ts
-const variable = (node) => `{user.${node.data.hProperties.name}}`;
+const variable = (node) => {
+    // @note: coming from RDMD, it's set as `variable`. But when mdx is parsed,
+    // it's set as `name`
+    const name = node.data.hProperties.variable || node.data.hProperties.name;
+    return `{user.${name}}`;
+};
 /* harmony default export */ const compile_variable = (variable);
 
 ;// CONCATENATED MODULE: ./processor/compile/index.ts
@@ -94849,7 +94906,6 @@ const variable = (node) => `{user.${node.data.hProperties.name}}`;
 
 
 
-
 function compilers() {
     const data = this.data();
     const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
@@ -94860,7 +94916,6 @@ function compilers() {
         [NodeTypes.emoji]: compile_gemoji,
         [NodeTypes.glossary]: compile_compatibility,
         [NodeTypes.htmlBlock]: html_block,
-        [NodeTypes.imageBlock]: compile_image,
         [NodeTypes.reusableContent]: compile_compatibility,
         [NodeTypes.variable]: compile_variable,
         embed: compile_compatibility,
@@ -94890,8 +94945,8 @@ const mdx_mdx = (tree, { hast = false } = {}) => {
         .use(transform_div)
         .use(readme_to_mdx)
         .use(tables_to_jsx)
-        .use(remarkStringify)
-        .use(processor_compile);
+        .use(processor_compile)
+        .use(remarkStringify);
     return processor.stringify(processor.runSync(tree));
 };
 /* harmony default export */ const lib_mdx = (mdx_mdx);

package/dist/processor/utils.d.ts

@@ -1,5 +1,6 @@
 import { Node } from 'mdast';
 import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx';
+import { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
 /**
  * Formats the hProperties of a node as a string, so they can be compiled back into JSX/MDX.
  * This currently sets all the values to a string since we process/compile the MDX on the fly
@@ -75,3 +76,4 @@ export declare const formatHTML: (html: string) => string;
  * @returns {string} re-formatted HTML
  */
 export declare const reformatHTML: (html: string, indent?: number) => string;
+export declare const toAttributes: (object: Record<string, any>, keys?: string[]) => MdxJsxAttribute[];

package/package.json

@@ -2,7 +2,7 @@
   "name": "@readme/markdown",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
-  "version": "7.1.0",
+  "version": "7.2.1",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",

package/components/CardsGrid/index.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import './style.scss';
-
-const Card = ({ children }) => <div className="Card">{children}</div>;
-
-const CardsGrid = ({ columns = 2, children }) => {
-  columns = columns >= 2 ? columns : 2;
-  return (
-    <div className="CardsGrid" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
-      {React.Children.map(children, e => (
-        <Card>{e}</Card>
-      ))}
-    </div>
-  );
-};
-
-export default CardsGrid;

package/components/CardsGrid/style.scss

@@ -1,12 +0,0 @@
-.CardsGrid {
-  display: grid;
-  gap: 20px;
-
-  .Card {
-    padding: 10px;
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(black, 0.1);
-    border-radius: 5px;
-    box-shadow: 0 1px 2px #{rgba(black, 0.05)}, 0 2px 5px #{rgba(black, 0.02)};
-  }
-}

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import './style.scss';
-declare const CardsGrid: ({ columns, children }: {
-    columns?: number;
-    children: any;
-}) => React.JSX.Element;
-export default CardsGrid;

package/dist/processor/compile/image.d.ts

@@ -1,3 +0,0 @@
-import type { ImageBlock } from 'types';
-declare const image: (node: ImageBlock) => string;
-export default image;