@readme/markdown 7.0.0 → 7.2.0

package/README.md

@@ -64,8 +64,17 @@ Parses mdx to an hast.
 
 #### `plain`
 
-> [!NOTE]
-> unimplemented
+Parses mdx to a plain string.
+
+> [!WARNING]
+> This **does** not `eval` the doc.
+
+#### `tags`
+
+Returns a list of tag names from the doc.
+
+> [!WARNING]
+> This **does** not `eval` the doc.
 
 #### `utils`
 

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/index.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+
+import './style.scss';
+
+export const Tab = ({ children }) => {
+  return (
+    <div className="TabContent">
+      {children}
+    </div>
+  )
+}
+
+const Tabs = ({ children }) => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  return (
+    <div className="TabGroup">
+      <header>
+        <nav className="TabGroup-nav">
+          {children?.map((tab, index: number) => 
+            <button className={`TabGroup-tab${activeTab === index ? '_active' : ''}`} key={tab.props.title} onClick={() => setActiveTab(index)}>
+              {tab.props.title}
+            </button>
+          )}
+        </nav>
+      </header>
+      <section>
+        {children && children[activeTab]}
+      </section>
+    </div>
+  );
+};
+
+export default Tabs;

package/components/Tabs/style.scss

@@ -0,0 +1,29 @@
+.TabGroup {
+  &-nav {
+    border-bottom: solid var(--color-border-default, #{rgba(black, 0.1)});
+    margin-bottom: 15px;
+  }
+  
+  &-tab {
+    background: none;
+    border: 0;
+    color: var(--color-text-minimum, #637288);
+    cursor: pointer;
+    font-weight: 600;
+    padding: 10px;
+
+    &_active {
+      background: none;
+      border: 0;
+      border-bottom: solid var(--blue, #118cfd);
+      color: var(--blue, #118cfd);
+      font-weight: 600;
+      padding: 10px;
+      margin-bottom: -2px;
+    }
+
+    &:hover {
+      color: var(--color-text-muted, #4f5a66);
+    }
+  }
+}

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';
@@ -9,4 +10,5 @@ export { default as HTMLBlock } from './HTMLBlock';
 export { default as Heading } from './Heading';
 export { default as Image } from './Image';
 export { default as Table } from './Table';
+export { default as Tabs, Tab } from './Tabs';
 export { default as TableOfContents } from './TableOfContents';

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/Tabs/index.d.ts

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

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';
@@ -9,4 +10,5 @@ export { default as HTMLBlock } from './HTMLBlock';
 export { default as Heading } from './Heading';
 export { default as Image } from './Image';
 export { default as Table } from './Table';
+export { default as Tabs, Tab } from './Tabs';
 export { default as TableOfContents } from './TableOfContents';

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/index.d.ts

@@ -5,5 +5,5 @@ declare const utils: {
     getHref: any;
     calloutIcons: {};
 };
-export { compile, hast, run, mdast, mdx, plain, remarkPlugins } from './lib';
+export { compile, hast, run, mdast, mdx, plain, remarkPlugins, tags } from './lib';
 export { Components, utils };

package/dist/lib/index.d.ts

@@ -5,5 +5,6 @@ import mdast from './mdast';
 import mdx from './mdx';
 import plain from './plain';
 import run from './run';
+import tags from './tags';
 export type { MdastOpts };
-export { astProcessor, compile, hast, mdast, mdx, plain, run, remarkPlugins };
+export { astProcessor, compile, hast, mdast, mdx, plain, run, remarkPlugins, tags };

package/dist/lib/tags.d.ts

@@ -0,0 +1,2 @@
+declare const tags: (doc: string) => string[];
+export default tags;

package/dist/main.css

@@ -1,4 +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)}
+.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

@@ -13246,6 +13246,7 @@ __webpack_require__.d(__webpack_exports__, {
   plain: () => (/* reexport */ lib_plain),
   remarkPlugins: () => (/* reexport */ remarkPlugins),
   run: () => (/* reexport */ lib_run),
+  tags: () => (/* reexport */ lib_tags),
   utils: () => (/* binding */ utils)
 });
 
@@ -13253,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),
@@ -13263,8 +13266,10 @@ __webpack_require__.d(components_namespaceObject, {
   HTMLBlock: () => (components_HTMLBlock),
   Heading: () => (components_Heading),
   Image: () => (components_Image),
+  Tab: () => (Tab),
   Table: () => (components_Table),
-  TableOfContents: () => (components_TableOfContents)
+  TableOfContents: () => (components_TableOfContents),
+  Tabs: () => (components_Tabs)
 });
 
 // NAMESPACE OBJECT: ./node_modules/micromark/lib/constructs.js
@@ -13295,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
@@ -13337,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('/');
@@ -13480,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);
@@ -13762,6 +13785,21 @@ const Table = (props) => {
 };
 /* harmony default export */ const components_Table = (Table);
 
+;// CONCATENATED MODULE: ./components/Tabs/index.tsx
+
+
+const Tab = ({ children }) => {
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabContent" }, children));
+};
+const Tabs = ({ children }) => {
+    const [activeTab, setActiveTab] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(0);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabGroup" },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("header", null,
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, children === null || children === void 0 ? void 0 : children.map((tab, index) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, key: tab.props.title, onClick: () => setActiveTab(index) }, tab.props.title)))),
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("section", null, children && children[activeTab])));
+};
+/* harmony default export */ const components_Tabs = (Tabs);
+
 ;// CONCATENATED MODULE: ./components/TableOfContents/index.tsx
 
 function TableOfContents({ children }) {
@@ -13789,6 +13827,8 @@ 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
@@ -94062,6 +94102,21 @@ const run_run = async (string, _opts = {}) => {
 };
 /* harmony default export */ const lib_run = (run_run);
 
+;// CONCATENATED MODULE: ./lib/tags.ts
+
+
+
+const tags = (doc) => {
+    const set = new Set();
+    visit(lib_mdast(doc), isMDXElement, (node) => {
+        if (node.name.match(/^[A-Z]/)) {
+            set.add(node.name);
+        }
+    });
+    return Array.from(set);
+};
+/* harmony default export */ const lib_tags = (tags);
+
 ;// CONCATENATED MODULE: ./lib/index.ts
 
 
@@ -94072,6 +94127,7 @@ const run_run = async (string, _opts = {}) => {
 
 
 
+
 ;// CONCATENATED MODULE: ./index.tsx
 
 

package/dist/main.node.js

@@ -7793,6 +7793,7 @@ __webpack_require__.d(__webpack_exports__, {
   plain: () => (/* reexport */ lib_plain),
   remarkPlugins: () => (/* reexport */ remarkPlugins),
   run: () => (/* reexport */ lib_run),
+  tags: () => (/* reexport */ lib_tags),
   utils: () => (/* binding */ utils)
 });
 
@@ -7800,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),
@@ -7810,8 +7813,10 @@ __webpack_require__.d(components_namespaceObject, {
   HTMLBlock: () => (components_HTMLBlock),
   Heading: () => (components_Heading),
   Image: () => (components_Image),
+  Tab: () => (Tab),
   Table: () => (components_Table),
-  TableOfContents: () => (components_TableOfContents)
+  TableOfContents: () => (components_TableOfContents),
+  Tabs: () => (components_Tabs)
 });
 
 // NAMESPACE OBJECT: ./node_modules/micromark/lib/constructs.js
@@ -7842,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('/');
@@ -7960,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);
@@ -13186,6 +13209,21 @@ const Table = (props) => {
 };
 /* harmony default export */ const components_Table = (Table);
 
+;// CONCATENATED MODULE: ./components/Tabs/index.tsx
+
+
+const Tab = ({ children }) => {
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabContent" }, children));
+};
+const Tabs = ({ children }) => {
+    const [activeTab, setActiveTab] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(0);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabGroup" },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("header", null,
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, children === null || children === void 0 ? void 0 : children.map((tab, index) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, key: tab.props.title, onClick: () => setActiveTab(index) }, tab.props.title)))),
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("section", null, children && children[activeTab])));
+};
+/* harmony default export */ const components_Tabs = (Tabs);
+
 ;// CONCATENATED MODULE: ./components/TableOfContents/index.tsx
 
 function TableOfContents({ children }) {
@@ -13213,6 +13251,8 @@ 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; }
@@ -95049,6 +95089,21 @@ const run_run = async (string, _opts = {}) => {
 };
 /* harmony default export */ const lib_run = (run_run);
 
+;// CONCATENATED MODULE: ./lib/tags.ts
+
+
+
+const tags = (doc) => {
+    const set = new Set();
+    visit(lib_mdast(doc), isMDXElement, (node) => {
+        if (node.name.match(/^[A-Z]/)) {
+            set.add(node.name);
+        }
+    });
+    return Array.from(set);
+};
+/* harmony default export */ const lib_tags = (tags);
+
 ;// CONCATENATED MODULE: ./lib/index.ts
 
 
@@ -95059,6 +95114,7 @@ const run_run = async (string, _opts = {}) => {
 
 
 
+
 ;// CONCATENATED MODULE: ./index.tsx
 
 

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.0.0",
+  "version": "7.2.0",
   "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;