@texonom/nreact 1.2.11 → 1.3.0-beta.0

package/build/dev/index.js

@@ -2,7 +2,7 @@ import {
   CollectionColumnTitle,
   PropertyIcon,
   iconMap
-} from "./chunk-CWNFRR32.js";
+} from "./chunk-PM5CWL6O.js";
 import {
   Asset,
   AssetWrapper,
@@ -22,7 +22,6 @@ import {
   Search,
   SearchDialog,
   Text,
-  cs,
   dummyLink,
   formatDate,
   formatNotionDateTime,
@@ -33,13 +32,13 @@ import {
   isUrl,
   require_lodash,
   useNotionContext
-} from "./chunk-VHTSGS2P.js";
+} from "./chunk-N6EDMIQD.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues,
   __toESM
-} from "./chunk-JX5CEG3A.js";
+} from "./chunk-Q4G2SZRD.js";
 
 // src/renderer.tsx
 import React9 from "react";
@@ -62,7 +61,7 @@ var Audio = ({ block, className }) => {
   var _a, _b, _c;
   const { recordMap } = useNotionContext();
   const source = recordMap.signed_urls[block.id] || ((_c = (_b = (_a = block.properties) == null ? void 0 : _a.source) == null ? void 0 : _b[0]) == null ? void 0 : _c[0]);
-  return /* @__PURE__ */ React.createElement("div", { className: cs("notion-audio", className) }, /* @__PURE__ */ React.createElement("audio", { controls: true, preload: "none", src: source }));
+  return /* @__PURE__ */ React.createElement("div", { className: `notion-audio ${className || ""}` }, /* @__PURE__ */ React.createElement("audio", { controls: true, preload: "none", src: source }));
 };
 
 // src/components/file.tsx
@@ -80,7 +79,7 @@ var File = ({ block, className }) => {
   var _a, _b, _c, _d, _e;
   const { components, recordMap } = useNotionContext();
   const source = recordMap.signed_urls[block.id] || ((_c = (_b = (_a = block.properties) == null ? void 0 : _a.source) == null ? void 0 : _b[0]) == null ? void 0 : _c[0]);
-  return /* @__PURE__ */ React3.createElement("div", { className: cs("notion-file", className) }, /* @__PURE__ */ React3.createElement(components.Link, { className: "notion-file-link", href: source, target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React3.createElement(FileIcon, { className: "notion-file-icon" }), /* @__PURE__ */ React3.createElement("div", { className: "notion-file-info" }, /* @__PURE__ */ React3.createElement("div", { className: "notion-file-title" }, /* @__PURE__ */ React3.createElement(Text, { value: ((_d = block.properties) == null ? void 0 : _d.title) || [["File"]], block })), ((_e = block.properties) == null ? void 0 : _e.size) && /* @__PURE__ */ React3.createElement("div", { className: "notion-file-size" }, /* @__PURE__ */ React3.createElement(Text, { value: block.properties.size, block })))));
+  return /* @__PURE__ */ React3.createElement("div", { className: `notion-file ${className || ""}` }, /* @__PURE__ */ React3.createElement(components.Link, { className: "notion-file-link", href: source, target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React3.createElement(FileIcon, { className: "notion-file-icon" }), /* @__PURE__ */ React3.createElement("div", { className: "notion-file-info" }, /* @__PURE__ */ React3.createElement("div", { className: "notion-file-title" }, /* @__PURE__ */ React3.createElement(Text, { value: ((_d = block.properties) == null ? void 0 : _d.title) || [["File"]], block })), ((_e = block.properties) == null ? void 0 : _e.size) && /* @__PURE__ */ React3.createElement("div", { className: "notion-file-size" }, /* @__PURE__ */ React3.createElement(Text, { value: block.properties.size, block })))));
 };
 
 // src/components/google-drive.tsx
@@ -97,7 +96,7 @@ var GoogleDrive = ({ block, className }) => {
     domain = url.hostname;
   } catch (err) {
   }
-  return /* @__PURE__ */ React4.createElement("div", { className: cs("notion-google-drive", className) }, /* @__PURE__ */ React4.createElement(components.Link, { className: "notion-google-drive-link", href: properties.url, target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React4.createElement("div", { className: "notion-google-drive-preview" }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React4.createElement("div", { className: `notion-google-drive ${className || ""}` }, /* @__PURE__ */ React4.createElement(components.Link, { className: "notion-google-drive-link", href: properties.url, target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React4.createElement("div", { className: "notion-google-drive-preview" }, /* @__PURE__ */ React4.createElement(
     GracefulImage,
     {
       src: mapImageUrl(properties.thumbnail, block),
@@ -161,18 +160,16 @@ var PageAside = ({ toc, activeSection, setActiveSection, pageAside, hasToc, hasA
   }, [hasToc, actionSectionScrollSpy]);
   if (!hasAside)
     return null;
-  return /* @__PURE__ */ React5.createElement("aside", { className: cs("notion-aside", className) }, hasToc && /* @__PURE__ */ React5.createElement("div", { className: "notion-aside-table-of-contents" }, /* @__PURE__ */ React5.createElement("div", { className: "notion-aside-table-of-contents-header" }, "Table of Contents"), /* @__PURE__ */ React5.createElement("nav", { className: "notion-table-of-contents" }, toc.map((tocItem) => {
+  return /* @__PURE__ */ React5.createElement("aside", { className: `notion-aside ${className || ""}` }, hasToc && /* @__PURE__ */ React5.createElement("div", { className: "notion-aside-table-of-contents" }, /* @__PURE__ */ React5.createElement("div", { className: "notion-aside-table-of-contents-header" }, "Table of Contents"), /* @__PURE__ */ React5.createElement("nav", { className: "notion-table-of-contents" }, toc.map((tocItem) => {
     const id = uuidToId(tocItem.id);
     return /* @__PURE__ */ React5.createElement(
       "a",
       {
         key: id,
         href: `#${id}`,
-        className: cs(
-          "notion-table-of-contents-item",
-          `notion-table-of-contents-item-indent-level-${tocItem.indentLevel}`,
-          activeSection === id && "notion-table-of-contents-active-item"
-        )
+        className: `notion-table-of-contents-item
+                    notion-table-of-contents-item-indent-level-${tocItem.indentLevel}
+                    ${activeSection === id && "notion-table-of-contents-active-item"}`
       },
       /* @__PURE__ */ React5.createElement(
         "span",
@@ -227,7 +224,6 @@ var Block = (props) => {
   const {
     components,
     fullPage,
-    darkMode,
     recordMap,
     mapPageUrl,
     mapImageUrl,
@@ -257,8 +253,8 @@ var Block = (props) => {
   if (!block)
     return null;
   if (level === 0 && block.type === "collection_view") {
-    ;
-    block.type = "collection_view_page";
+    const view_block = block;
+    view_block.type = "collection_view_page";
   }
   const blockId = hideBlockId ? "notion-block" : `notion-block-${uuidToId2(block.id)}`;
   switch (block.type) {
@@ -289,7 +285,7 @@ var Block = (props) => {
           const hasToc = showTableOfContents && toc.length >= minTableOfContentsItems;
           const hasAside = (hasToc || pageAside) && !page_full_width;
           const hasPageCover = pageCover || page_cover;
-          return /* @__PURE__ */ React8.createElement("div", { className: cs("notion", "notion-app", darkMode ? "dark" : "light", blockId, className) }, /* @__PURE__ */ React8.createElement("div", { className: "notion-viewport" }), /* @__PURE__ */ React8.createElement("div", { className: "notion-frame" }, !disableHeader && /* @__PURE__ */ React8.createElement(components.Header, { block }), header, /* @__PURE__ */ React8.createElement("div", { className: "notion-page-scroller" }, hasPageCover && (pageCover ? pageCover : /* @__PURE__ */ React8.createElement("div", { className: "notion-page-cover-wrapper" }, /* @__PURE__ */ React8.createElement(
+          return /* @__PURE__ */ React8.createElement("div", { className: `notion notion-app ${blockId} ${className || ""}` }, /* @__PURE__ */ React8.createElement("div", { className: "notion-viewport" }), /* @__PURE__ */ React8.createElement("div", { className: "notion-frame" }, !disableHeader && /* @__PURE__ */ React8.createElement(components.Header, { block }), header, /* @__PURE__ */ React8.createElement("div", { className: "notion-page-scroller" }, hasPageCover && (pageCover ? pageCover : /* @__PURE__ */ React8.createElement("div", { className: "notion-page-cover-wrapper" }, /* @__PURE__ */ React8.createElement(
             LazyImage,
             {
               src: mapImageUrl(page_cover, block),
@@ -301,16 +297,14 @@ var Block = (props) => {
           ))), /* @__PURE__ */ React8.createElement(
             "main",
             {
-              className: cs(
-                "notion-page",
-                hasPageCover ? "notion-page-has-cover" : "notion-page-no-cover",
-                page_icon ? "notion-page-has-icon" : "notion-page-no-icon",
-                isPageIconUrl ? "notion-page-has-image-icon" : "notion-page-has-text-icon",
-                "notion-full-page",
-                page_full_width && "notion-full-width",
-                page_small_text && "notion-small-text",
-                bodyClassName
-              )
+              className: `notion-page
+                      ${hasPageCover ? "notion-page-has-cover" : "notion-page-no-cover"}
+                      ${page_icon ? "notion-page-has-icon" : "notion-page-no-icon"}
+                      ${isPageIconUrl ? "notion-page-has-image-icon" : "notion-page-has-text-icon"}
+                      notion-full-page
+                      ${page_full_width && "notion-full-width"}
+                      ${page_small_text && "notion-small-text"}
+                      ${bodyClassName}`
             },
             page_icon && /* @__PURE__ */ React8.createElement(PageIcon, { block, defaultIcon: defaultPageIcon, inline: false }),
             pageHeader,
@@ -319,11 +313,9 @@ var Block = (props) => {
             block.type !== "collection_view_page" && /* @__PURE__ */ React8.createElement(
               "div",
               {
-                className: cs(
-                  "notion-page-content",
-                  hasAside && "notion-page-content-has-aside",
-                  hasToc && "notion-page-content-has-toc"
-                )
+                className: `notion-page-content
+                          ${hasAside && "notion-page-content-has-aside"}
+                          ${hasToc && "notion-page-content-has-toc"}`
               },
               /* @__PURE__ */ React8.createElement("article", { className: "notion-page-content-inner" }, children),
               hasAside && /* @__PURE__ */ React8.createElement(
@@ -344,16 +336,13 @@ var Block = (props) => {
           return /* @__PURE__ */ React8.createElement(
             "main",
             {
-              className: cs(
-                "notion",
-                darkMode ? "dark" : "light",
-                "notion-page",
-                page_full_width && "notion-full-width",
-                page_small_text && "notion-small-text",
-                blockId,
-                className,
-                bodyClassName
-              )
+              className: `notion
+                notion-page
+                ${page_full_width && "notion-full-width"}
+                ${page_small_text && "notion-small-text"}
+                ${blockId}
+                ${className || ""}
+                ${bodyClassName}`
             },
             /* @__PURE__ */ React8.createElement("div", { className: "notion-viewport" }),
             pageHeader,
@@ -367,7 +356,7 @@ var Block = (props) => {
         return /* @__PURE__ */ React8.createElement(
           components.PageLink,
           {
-            className: cs("notion-page-link", blockColor && `notion-${blockColor}`, blockId),
+            className: `notion-page-link ${blockColor && `notion-${blockColor}`} ${blockId}`,
             href: mapPageUrl(block.id)
           },
           /* @__PURE__ */ React8.createElement(PageTitle, { block })
@@ -399,14 +388,12 @@ var Block = (props) => {
       const isH1 = block.type === "header";
       const isH2 = block.type === "sub_header";
       const isH3 = block.type === "sub_sub_header";
-      const classNameStr = cs(
-        isH1 && "notion-h notion-h1",
-        isH2 && "notion-h notion-h2",
-        isH3 && "notion-h notion-h3",
-        blockColor && `notion-${blockColor}`,
-        indentLevelClass,
-        blockId
-      );
+      const classNameStr = `${isH1 && "notion-h notion-h1"}
+        ${isH2 && "notion-h notion-h2"}
+        ${isH3 && "notion-h notion-h3"}
+        ${blockColor && `notion-${blockColor}`}
+        ${indentLevelClass},
+        ${blockId}`;
       const innerHeader = /* @__PURE__ */ React8.createElement("span", null, /* @__PURE__ */ React8.createElement("div", { id, className: "notion-header-anchor" }), !((_f = block.format) == null ? void 0 : _f.toggleable) && /* @__PURE__ */ React8.createElement("a", { className: "notion-hash-link", href: `#${id}`, title }, /* @__PURE__ */ React8.createElement(LinkIcon, null)), /* @__PURE__ */ React8.createElement("span", { className: "notion-h-title" }, /* @__PURE__ */ React8.createElement(Text, { value: block.properties.title, block })));
       let headerBlock = null;
       if (isH1)
@@ -416,21 +403,21 @@ var Block = (props) => {
       else
         headerBlock = /* @__PURE__ */ React8.createElement("h4", { className: classNameStr, "data-id": id }, innerHeader);
       if ((_g = block.format) == null ? void 0 : _g.toggleable)
-        return /* @__PURE__ */ React8.createElement("details", { className: cs("notion-toggle", blockId) }, /* @__PURE__ */ React8.createElement("summary", null, headerBlock), /* @__PURE__ */ React8.createElement("div", null, children));
+        return /* @__PURE__ */ React8.createElement("details", { className: `notion-toggle ${blockId}` }, /* @__PURE__ */ React8.createElement("summary", null, headerBlock), /* @__PURE__ */ React8.createElement("div", null, children));
       else
         return headerBlock;
     }
     case "divider":
-      return /* @__PURE__ */ React8.createElement("hr", { className: cs("notion-hr", blockId) });
+      return /* @__PURE__ */ React8.createElement("hr", { className: `notion-hr ${blockId}` });
     case "text": {
       if (!block.properties && !((_h = block.content) == null ? void 0 : _h.length))
-        return /* @__PURE__ */ React8.createElement("div", { className: cs("notion-blank", blockId) }, "\xA0");
+        return /* @__PURE__ */ React8.createElement("div", { className: `notion-blank ${blockId}` }, "\xA0");
       const blockColor = (_i = block.format) == null ? void 0 : _i.block_color;
-      return /* @__PURE__ */ React8.createElement("div", { className: cs("notion-text", blockColor && `notion-${blockColor}`, blockId) }, ((_j = block.properties) == null ? void 0 : _j.title) && /* @__PURE__ */ React8.createElement(Text, { value: block.properties.title, block }), children && /* @__PURE__ */ React8.createElement("div", { className: "notion-text-children" }, children));
+      return /* @__PURE__ */ React8.createElement("div", { className: `notion-text ${blockColor && `notion-${blockColor}`} ${blockId}` }, ((_j = block.properties) == null ? void 0 : _j.title) && /* @__PURE__ */ React8.createElement(Text, { value: block.properties.title, block }), children && /* @__PURE__ */ React8.createElement("div", { className: "notion-text-children" }, children));
     }
     case "bulleted_list":
     case "numbered_list": {
-      const wrapList = (content, start2) => block.type === "bulleted_list" ? /* @__PURE__ */ React8.createElement("ul", { className: cs("notion-list", "notion-list-disc", blockId) }, content) : /* @__PURE__ */ React8.createElement("ol", { start: start2, className: cs("notion-list", "notion-list-numbered", blockId) }, content);
+      const wrapList = (content, start2) => block.type === "bulleted_list" ? /* @__PURE__ */ React8.createElement("ul", { className: `notion-list notion-list-disc ${blockId}` }, content) : /* @__PURE__ */ React8.createElement("ol", { start: start2, className: `notion-list notion-list-numbered ${blockId}` }, content);
       let output = null;
       if (block.content)
         output = /* @__PURE__ */ React8.createElement(React8.Fragment, null, block.properties && /* @__PURE__ */ React8.createElement("li", null, /* @__PURE__ */ React8.createElement(Text, { value: block.properties.title, block })), wrapList(children));
@@ -470,7 +457,7 @@ var Block = (props) => {
     case "code":
       return /* @__PURE__ */ React8.createElement(components.Code, { block });
     case "column_list":
-      return /* @__PURE__ */ React8.createElement("div", { className: cs("notion-row", blockId) }, children);
+      return /* @__PURE__ */ React8.createElement("div", { className: `notion-row ${blockId}` }, children);
     case "column": {
       const spacerWidth = `min(32px, 4vw)`;
       const ratio = ((_o = block.format) == null ? void 0 : _o.column_ratio) || 0.5;
@@ -478,13 +465,13 @@ var Block = (props) => {
       const columns = ((_q = parent == null ? void 0 : parent.content) == null ? void 0 : _q.length) || Math.max(2, Math.ceil(1 / ratio));
       const width = `calc((100% - (${columns - 1} * ${spacerWidth})) * ${ratio})`;
       const style = { width };
-      return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("div", { className: cs("notion-column", blockId), style }, children), /* @__PURE__ */ React8.createElement("div", { className: "notion-spacer" }));
+      return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("div", { className: `notion-column ${blockId}`, style }, children), /* @__PURE__ */ React8.createElement("div", { className: "notion-spacer" }));
     }
     case "quote": {
       if (!block.properties)
         return null;
       const blockColor = (_r = block.format) == null ? void 0 : _r.block_color;
-      return /* @__PURE__ */ React8.createElement("blockquote", { className: cs("notion-quote", blockColor && `notion-${blockColor}`, blockId) }, /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(Text, { value: block.properties.title, block })), children);
+      return /* @__PURE__ */ React8.createElement("blockquote", { className: `notion-quote ${blockColor && `notion-${blockColor}`} ${blockId}` }, /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(Text, { value: block.properties.title, block })), children);
     }
     case "collection_view":
       return /* @__PURE__ */ React8.createElement(components.Collection, { block, className: blockId, ctx });
@@ -495,7 +482,7 @@ var Block = (props) => {
         return /* @__PURE__ */ React8.createElement(
           "div",
           {
-            className: cs("notion-callout", ((_s = block.format) == null ? void 0 : _s.block_color) && `notion-${(_t = block.format) == null ? void 0 : _t.block_color}_co`, blockId)
+            className: `notion-callout ${((_s = block.format) == null ? void 0 : _s.block_color) && `notion-${(_t = block.format) == null ? void 0 : _t.block_color}_co`} ${blockId}`
           },
           /* @__PURE__ */ React8.createElement(PageIcon, { block }),
           /* @__PURE__ */ React8.createElement("div", { className: "notion-callout-text" }, /* @__PURE__ */ React8.createElement(Text, { value: (_u = block.properties) == null ? void 0 : _u.title, block }), children)
@@ -522,7 +509,7 @@ var Block = (props) => {
         {
           target: "_blank",
           rel: "noopener noreferrer",
-          className: cs("notion-bookmark", ((_w = block.format) == null ? void 0 : _w.block_color) && `notion-${block.format.block_color}`, blockId),
+          className: `notion-bookmark ${((_w = block.format) == null ? void 0 : _w.block_color) && `notion-${block.format.block_color}`} ${blockId}`,
           href: link[0][0]
         },
         /* @__PURE__ */ React8.createElement("div", null, title && /* @__PURE__ */ React8.createElement("div", { className: "notion-bookmark-title" }, /* @__PURE__ */ React8.createElement(Text, { value: [[title]], block })), ((_x = block.properties) == null ? void 0 : _x.description) && /* @__PURE__ */ React8.createElement("div", { className: "notion-bookmark-description" }, /* @__PURE__ */ React8.createElement(Text, { value: (_y = block.properties) == null ? void 0 : _y.description, block })), /* @__PURE__ */ React8.createElement("div", { className: "notion-bookmark-link" }, ((_z = block.format) == null ? void 0 : _z.bookmark_icon) && /* @__PURE__ */ React8.createElement("div", { className: "notion-bookmark-link-icon" }, /* @__PURE__ */ React8.createElement(LazyImage, { src: mapImageUrl((_A = block.format) == null ? void 0 : _A.bookmark_icon, block), alt: title })), /* @__PURE__ */ React8.createElement("div", { className: "notion-bookmark-link-text" }, /* @__PURE__ */ React8.createElement(Text, { value: link, block })))),
@@ -539,14 +526,14 @@ var Block = (props) => {
       ));
     }
     case "toggle":
-      return /* @__PURE__ */ React8.createElement("details", { className: cs("notion-toggle", blockId) }, /* @__PURE__ */ React8.createElement("summary", null, /* @__PURE__ */ React8.createElement(Text, { value: (_E = block.properties) == null ? void 0 : _E.title, block })), /* @__PURE__ */ React8.createElement("div", null, children));
+      return /* @__PURE__ */ React8.createElement("details", { className: `notion-toggle ${blockId}` }, /* @__PURE__ */ React8.createElement("summary", null, /* @__PURE__ */ React8.createElement(Text, { value: (_E = block.properties) == null ? void 0 : _E.title, block })), /* @__PURE__ */ React8.createElement("div", null, children));
     case "table_of_contents": {
       const page = getBlockParentPage(block, recordMap);
       if (!page)
         return null;
       const toc = getPageTableOfContents(page, recordMap);
       const blockColor = (_F = block.format) == null ? void 0 : _F.block_color;
-      return /* @__PURE__ */ React8.createElement("div", { className: cs("notion-table-of-contents", blockColor && `notion-${blockColor}`, blockId) }, toc.map((tocItem) => /* @__PURE__ */ React8.createElement("a", { key: tocItem.id, href: `#${uuidToId2(tocItem.id)}`, className: "notion-table-of-contents-item" }, /* @__PURE__ */ React8.createElement(
+      return /* @__PURE__ */ React8.createElement("div", { className: `notion-table-of-contents ${blockColor && `notion-${blockColor}`} ${blockId}` }, toc.map((tocItem) => /* @__PURE__ */ React8.createElement("a", { key: tocItem.id, href: `#${uuidToId2(tocItem.id)}`, className: "notion-table-of-contents-item" }, /* @__PURE__ */ React8.createElement(
         "span",
         {
           className: "notion-table-of-contents-item-body",
@@ -560,10 +547,10 @@ var Block = (props) => {
     }
     case "to_do": {
       const isChecked = ((_I = (_H = (_G = block.properties) == null ? void 0 : _G.checked) == null ? void 0 : _H[0]) == null ? void 0 : _I[0]) === "Yes";
-      return /* @__PURE__ */ React8.createElement("div", { className: cs("notion-to-do", blockId) }, /* @__PURE__ */ React8.createElement("div", { className: "notion-to-do-item" }, /* @__PURE__ */ React8.createElement(components.Checkbox, { blockId, isChecked }), /* @__PURE__ */ React8.createElement("div", { className: cs("notion-to-do-body", isChecked && `notion-to-do-checked`) }, /* @__PURE__ */ React8.createElement(Text, { value: (_J = block.properties) == null ? void 0 : _J.title, block }))), /* @__PURE__ */ React8.createElement("div", { className: "notion-to-do-children" }, children));
+      return /* @__PURE__ */ React8.createElement("div", { className: `notion-to-do ${blockId}` }, /* @__PURE__ */ React8.createElement("div", { className: "notion-to-do-item" }, /* @__PURE__ */ React8.createElement(components.Checkbox, { blockId, isChecked }), /* @__PURE__ */ React8.createElement("div", { className: `notion-to-do-body ${isChecked && `notion-to-do-checked`}` }, /* @__PURE__ */ React8.createElement(Text, { value: (_J = block.properties) == null ? void 0 : _J.title, block }))), /* @__PURE__ */ React8.createElement("div", { className: "notion-to-do-children" }, children));
     }
     case "transclusion_container":
-      return /* @__PURE__ */ React8.createElement("div", { className: cs("notion-sync-block", blockId) }, children);
+      return /* @__PURE__ */ React8.createElement("div", { className: `notion-sync-block ${blockId}` }, children);
     case "transclusion_reference":
       return /* @__PURE__ */ React8.createElement(SyncPointerBlock, __spreadValues({ block, level: level + 1 }, props));
     case "alias": {
@@ -573,10 +560,10 @@ var Block = (props) => {
         console.debug('"alias" missing block', blockPointerId);
         return null;
       }
-      return /* @__PURE__ */ React8.createElement(components.PageLink, { className: cs("notion-page-link", blockPointerId), href: mapPageUrl(blockPointerId) }, /* @__PURE__ */ React8.createElement(PageTitle, { block: linkedBlock }));
+      return /* @__PURE__ */ React8.createElement(components.PageLink, { className: `notion-page-link ${blockPointerId}}`, href: mapPageUrl(blockPointerId) }, /* @__PURE__ */ React8.createElement(PageTitle, { block: linkedBlock }));
     }
     case "table":
-      return /* @__PURE__ */ React8.createElement("table", { className: cs("notion-simple-table", blockId) }, /* @__PURE__ */ React8.createElement("tbody", null, children));
+      return /* @__PURE__ */ React8.createElement("table", { className: `notion-simple-table ${blockId}` }, /* @__PURE__ */ React8.createElement("tbody", null, children));
     case "table_row": {
       const tableBlock = (_N = recordMap.block[block.parent_id]) == null ? void 0 : _N.value;
       const order = (_O = tableBlock.format) == null ? void 0 : _O.table_block_column_order;
@@ -584,7 +571,7 @@ var Block = (props) => {
       const backgroundColor = (_Q = block.format) == null ? void 0 : _Q.block_color;
       if (!tableBlock || !order)
         return null;
-      return /* @__PURE__ */ React8.createElement("tr", { className: cs("notion-simple-table-row", backgroundColor && `notion-${backgroundColor}`, blockId) }, order.map((column) => {
+      return /* @__PURE__ */ React8.createElement("tr", { className: `notion-simple-table-row ${backgroundColor && `notion-${backgroundColor}`} ${blockId}` }, order.map((column) => {
         var _a2, _b2, _c2;
         const color = (_a2 = formatMap == null ? void 0 : formatMap[column]) == null ? void 0 : _a2.color;
         return /* @__PURE__ */ React8.createElement(
@@ -607,7 +594,6 @@ var Block = (props) => {
         console.debug("Unsupported type " + block.type, JSON.stringify(block, null, 2));
       return /* @__PURE__ */ React8.createElement("div", null);
   }
-  return null;
 };
 
 // src/renderer.tsx
@@ -752,7 +738,6 @@ export {
   SearchDialog,
   SyncPointerBlock,
   Text,
-  cs,
   dummyLink,
   formatDate,
   formatNotionDateTime,