@multiplatform.one/markdown 7.4.1 → 7.5.0

package/dist/cjs/mdxComponents.cjs

@@ -28,16 +28,17 @@ __export(mdxComponents_exports, {
 module.exports = __toCommonJS(mdxComponents_exports);
 var import_components = require("@multiplatform.one/components");
 var import_theme = require("@multiplatform.one/theme");
+var import_tokenPx = require("./shared/tokenPx.cjs");
 var import_router = require("@multiplatform.one/router");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_ExternalIcon = require("./ExternalIcon/index.cjs");
 var import_Hr = require("./Hr/index.cjs");
 var import_icons = require("./icons/index.cjs");
-var import_Li = require("./Li/index.cjs");
+var import_List = require("./components/List.cjs");
+var import_Image = require("./components/Image.cjs");
 var import_MdxCodeBlock = require("./MdxCodeBlock/index.cjs");
 var import_Table = require("./Table/index.cjs");
-var import_Ul = require("./Ul/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const code = ({
   hero: _hero,
@@ -77,167 +78,228 @@ function MdxBlockquote({
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const railWidth = knobProps.borderRadius.borderWidth;
+  const inset = knobProps.panelPadding.padding;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     marginVertical: "$4",
-    paddingHorizontal: knobProps.panelPadding.padding,
+    paddingHorizontal: inset,
     ...(import_tamagui.isWeb ? {
       style: {
-        marginInlineStart: 12,
-        borderInlineStartWidth: 1,
-        borderInlineStartStyle: "solid"
+        marginInlineStart: inset,
+        borderInlineStartWidth: railWidth,
+        borderInlineStartStyle: railWidth ? "solid" : "none"
       }
     } : {
       style: {
-        marginInlineStart: 12
+        marginInlineStart: inset
       },
-      borderStartWidth: 1
+      borderStartWidth: railWidth
     }),
     borderColor: "$borderColor",
     justifyContent: "center",
     ...props,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
       whiteSpace: "revert",
-      size: "$8",
-      lineHeight: "$9",
-      fontWeight: "300",
+      size: knobProps.sizeToken,
+      ...knobProps.body,
       color: "$color",
       opacity: 0.65,
       children: (0, import_components.unwrapText)(children)
     })
   });
 }
+function MdxHeading({
+  Component,
+  children,
+  id,
+  size,
+  color,
+  marginTop,
+  marginBottom,
+  dataHeading,
+  link,
+  ...props
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const heading = /* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {
+    maxWidth: "100%",
+    position: "relative",
+    width: link ? "fit-content" : void 0,
+    size,
+    color,
+    marginTop: link ? void 0 : marginTop,
+    marginBottom: link ? void 0 : marginBottom,
+    ...(dataHeading ? {
+      "data-heading": true
+    } : {}),
+    ...knobProps.heading,
+    ...props,
+    children
+  });
+  if (!link) return heading;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(LinkHeading, {
+    "data-heading": true,
+    marginTop,
+    marginBottom,
+    id,
+    children: [heading, getNonTextChildren(children)]
+  });
+}
+function MdxAnchor({
+  href = "",
+  children,
+  ...props
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_router.Link, {
+    href,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, {
+      render: "span",
+      fontSize: "inherit",
+      display: "inline",
+      cursor: "pointer",
+      ...knobProps.body,
+      focusVisibleStyle: {
+        outlineColor: "$outlineColor",
+        outlineWidth: 2,
+        outlineStyle: "solid",
+        outlineOffset: 2
+      },
+      ...props,
+      children: [children, typeof href === "string" && href.startsWith("http") ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: ["\xA0", /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "inherit",
+          display: "inline-flex",
+          y: 2,
+          style: {
+            marginLeft: -1
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ExternalIcon.ExternalIcon, {})
+        })]
+      }) : null]
+    })
+  });
+}
+function MdxStrong(props) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+    render: "strong",
+    fontSize: "inherit",
+    ...knobProps.body,
+    ...props,
+    fontWeight: "700"
+  });
+}
+function MdxP(props) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+    render: "p",
+    display: "block",
+    size: knobProps.sizeToken,
+    marginVertical: "$2",
+    ...knobProps.body,
+    ...props
+  });
+}
+function MdxList({
+  ordered,
+  children,
+  start
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_List.MarkdownList, {
+    ordered,
+    start,
+    children: import_react.Children.toArray(children).map(child => typeof child === "string" ? null : child)
+  });
+}
 const mdxComponents = {
-  h1: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H1, {
-    fontFamily: "$mono",
+  h1: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(MdxHeading, {
+    Component: import_tamagui.H1,
     width: "max-content",
-    position: "relative",
     marginBottom: "$2",
     ...props
   }),
   h2: ({
     children,
     ...props
-  }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H2, {
-    position: "relative",
+  }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(MdxHeading, {
+    Component: import_tamagui.H2,
+    dataHeading: true,
     width: "fit-content",
-    marginTop: "$8",
-    marginBottom: "$4",
-    "data-heading": true,
     size: "$9",
     color: "$color12",
+    marginTop: "$8",
+    marginBottom: "$4",
     ...props,
     children
   }),
-  h3: ({
-    children,
-    id,
-    ...props
-  }) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(LinkHeading, {
-    "data-heading": true,
+  h3: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(MdxHeading, {
+    Component: import_tamagui.H3,
+    link: true,
+    dataHeading: true,
+    size: "$8",
+    color: "$color11",
     marginTop: "$6",
     marginBottom: "$2",
-    id,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-      maxWidth: "100%",
-      position: "relative",
-      width: "fit-content",
-      size: "$8",
-      color: "$color11",
-      fontWeight: "600",
-      ...props,
-      children
-    }), getNonTextChildren(children)]
+    ...props
   }),
-  h4: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H4, {
-    position: "relative",
+  h4: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(MdxHeading, {
+    Component: import_tamagui.H4,
+    dataHeading: true,
     width: "fit-content",
-    marginTop: "$8",
-    marginBottom: "$2",
     size: "$8",
     color: "$color8",
-    "data-heading": true,
-    ...props,
-    fontWeight: "400"
+    marginTop: "$8",
+    marginBottom: "$2",
+    ...props
   }),
-  h5: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+  h5: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(MdxHeading, {
+    Component: import_tamagui.H5,
     size: "$6",
-    fontWeight: "600",
     marginTop: "$4",
     ...props
   }),
-  h6: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H6, {
+  h6: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(MdxHeading, {
+    Component: import_tamagui.H6,
     marginTop: "$4",
     ...props
   }),
-  p: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
-    render: "p",
-    display: "block",
-    size: "$6",
-    marginVertical: "$2",
+  p: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(MdxP, {
     ...props
   }),
-  a: ({
-    href = "",
-    children,
+  a: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(MdxAnchor, {
     ...props
-  }) => {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_router.Link, {
-      href,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, {
-        render: "span",
-        fontSize: "inherit",
-        display: "inline",
-        cursor: "pointer",
-        focusVisibleStyle: {
-          outlineColor: "$outlineColor",
-          outlineWidth: 2,
-          outlineStyle: "solid",
-          outlineOffset: 2
-        },
-        ...props,
-        children: [children, typeof href === "string" && href.startsWith("http") ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-          children: ["\xA0", /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "inherit",
-            display: "inline-flex",
-            y: 2,
-            style: {
-              marginLeft: -1
-            },
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ExternalIcon.ExternalIcon, {})
-          })]
-        }) : null]
-      })
-    });
-  },
+  }),
   hr: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Hr.HR, {
     ...props
   }),
   ul: ({
     children
-  }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Ul.UL, {
-    render: "ul",
-    marginVertical: "$4",
-    children: import_react.Children.toArray(children).map(x => typeof x === "string" ? null : x)
+  }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(MdxList, {
+    ordered: false,
+    children
   }),
-  ol: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-    ...props,
-    render: "ol",
-    marginBottom: "$3"
+  ol: ({
+    children,
+    start
+  }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(MdxList, {
+    ordered: true,
+    start: typeof start === "number" ? start : Number(start) || void 0,
+    children
   }),
-  li: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Li.LI, {
-    render: "li",
-    size: "$6",
-    marginBottom: "$1.5",
-    style: {
-      listStyleType: "disc"
-    },
+  li: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_List.MarkdownListItem, {
     children: props.children
   }),
-  strong: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
-    render: "strong",
-    fontSize: "inherit",
-    ...props,
-    fontWeight: "700"
+  strong: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(MdxStrong, {
+    ...props
   }),
   em: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
     render: "em",
@@ -252,14 +314,18 @@ const mdxComponents = {
     textDecorationLine: "line-through"
   }),
   img: ({
+    src,
+    alt,
+    title,
     ...props
   }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     render: "span",
     marginVertical: "$6",
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      render: "img",
-      ...props,
-      maxWidth: "100%"
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Image.MarkdownImage, {
+      src,
+      alt,
+      title,
+      ...props
     })
   }),
   pre: ({
@@ -296,6 +362,7 @@ const LinkHeading = ({
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const iconPx = (0, import_tokenPx.tokenPx)(knobProps.label.fontSize, 12, "fontSize");
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     render: "a",
     "data-heading": true,
@@ -310,7 +377,7 @@ const LinkHeading = ({
       render: "span",
       opacity: 0.3,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.LinkIcon, {
-        size: 12
+        size: iconPx
       })
     })]
   });