notion-to-jsx 1.2.9 → 1.2.11

package/dist/index.js

@@ -30,19 +30,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Renderer: () => Renderer
+  Renderer: () => Renderer_default
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Renderer/index.tsx
-var import_react7 = __toESM(require("react"));
-
-// src/components/Renderer/styles.css.ts
-var container = "styles_container__epva5u0";
+var import_react7 = require("react");
 
 // src/components/Renderer/components/List/styles.css.ts
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var list = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "styles_list__es8vim0", variantClassNames: { type: { bulleted: "styles_list_type_bulleted__es8vim1", numbered: "styles_list_type_numbered__es8vim2" } }, defaultVariants: {}, compoundVariants: [] });
+var list = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "styles_list__es8vim0", variantClassNames: { type: { bulleted_list_item: "styles_list_type_bulleted_list_item__es8vim1", numbered_list_item: "styles_list_type_numbered_list_item__es8vim2" } }, defaultVariants: {}, compoundVariants: [] });
 var listItem = "styles_listItem__es8vim3";
 
 // src/components/Renderer/components/List/List.tsx
@@ -65,7 +62,7 @@ var ListItem = ({
 };
 
 // src/components/Renderer/components/MemoizedComponents.tsx
-var import_react3 = __toESM(require("react"));
+var import_react3 = require("react");
 
 // src/components/Renderer/components/RichText/styles.css.ts
 var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -498,22 +495,16 @@ var LinkPreview = ({ url }) => {
 var LinkPreview_default = LinkPreview;
 
 // src/components/Renderer/components/MemoizedComponents.tsx
-var MemoizedRichText = import_react3.default.memo(
-  RichTexts_default,
-  (prev, next) => {
-    return JSON.stringify(prev.richTexts) === JSON.stringify(next.richTexts);
-  }
-);
-var MemoizedImage = import_react3.default.memo(Image_default, (prev, next) => {
+var MemoizedRichText = (0, import_react3.memo)(RichTexts_default, (prev, next) => {
+  return JSON.stringify(prev.richTexts) === JSON.stringify(next.richTexts);
+});
+var MemoizedImage = (0, import_react3.memo)(Image_default, (prev, next) => {
   return prev.src === next.src && prev.alt === next.alt && JSON.stringify(prev.caption) === JSON.stringify(next.caption);
 });
-var MemoizedBookmark = import_react3.default.memo(
-  Bookmark_default,
-  (prev, next) => {
-    return prev.url === next.url;
-  }
-);
-var MemoizedLinkPreview = import_react3.default.memo(
+var MemoizedBookmark = (0, import_react3.memo)(Bookmark_default, (prev, next) => {
+  return prev.url === next.url;
+});
+var MemoizedLinkPreview = (0, import_react3.memo)(
   LinkPreview_default,
   (prev, next) => {
     return prev.url === next.url;
@@ -522,46 +513,46 @@ var MemoizedLinkPreview = import_react3.default.memo(
 
 // src/components/Renderer/components/List/ListBlocksRenderer.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var RecursiveListItem = ({ block, index }) => {
-  const blockProps = {
-    tabIndex: 0
-  };
+var RecursiveListItem = ({ block }) => {
   const blockType = block.type;
-  const richTexts = block[blockType]?.rich_text;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ListItem, { ...blockProps, children: [
+  let content3;
+  if (blockType === "bulleted_list_item") {
+    content3 = block.bulleted_list_item;
+  } else {
+    content3 = block.numbered_list_item;
+  }
+  const richTexts = content3.rich_text;
+  const filteredChildren = block.children?.filter(
+    (child) => child.type === blockType
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ListItem, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MemoizedRichText, { richTexts }),
-    block.children && block.children.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      RecursiveListGroup,
-      {
-        blocks: block.children,
-        type: blockType.split("_")[0]
-      }
-    )
+    filteredChildren && filteredChildren.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RecursiveListGroup, { blocks: filteredChildren, type: blockType })
   ] });
 };
 var RecursiveListGroup = ({ blocks, type }) => {
   if (!blocks || blocks.length === 0) return null;
-  const listItems = blocks.filter(
-    (block) => block.type === `${type}_list_item`
-  );
-  if (listItems.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     List,
     {
-      as: type === "numbered" ? "ol" : "ul",
+      as: type === "numbered_list_item" ? "ol" : "ul",
       type,
       role: "list",
-      "aria-label": type === "bulleted" ? "Bulleted list" : "Numbered list",
-      children: listItems.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RecursiveListItem, { block, index }, block.id))
+      "aria-label": type,
+      children: blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RecursiveListItem, { block }, block.id))
     }
   );
 };
-var ListBlocksRenderer = ({ blocks, startIndex, type }) => {
+var ListBlocksRenderer = ({
+  blocks,
+  startIndex,
+  type
+}) => {
   let consecutiveItems = 0;
   for (let i = startIndex; i < blocks.length; i++) {
     const block = blocks[i];
     if (!block) break;
-    if (block.type === `${type}_list_item`) {
+    if (block.type === type) {
       consecutiveItems++;
     } else {
       break;
@@ -571,18 +562,11 @@ var ListBlocksRenderer = ({ blocks, startIndex, type }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     List,
     {
-      as: type === "numbered" ? "ol" : "ul",
+      as: type === "numbered_list_item" ? "ol" : "ul",
       type,
       role: "list",
-      "aria-label": type === "bulleted" ? "Bulleted list" : "Numbered list",
-      children: listItems.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        RecursiveListItem,
-        {
-          block,
-          index: startIndex + index
-        },
-        block.id
-      ))
+      "aria-label": type,
+      children: listItems.map((block) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RecursiveListItem, { block }, block.id))
     }
   );
 };
@@ -673,36 +657,27 @@ var columnListContainer = "styles_columnListContainer__wle6we1";
 
 // src/components/Renderer/components/Column/Column.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Column = ({ block, onFocus }) => {
+var Column = ({ block }) => {
   if (!block || !block.children) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: columnContainer, children: block.children.map((childBlock, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    BlockRenderer_default,
-    {
-      block: childBlock,
-      onFocus,
-      index,
-      isColumn: true
-    },
-    childBlock.id
-  )) });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: columnContainer, children: block.children.map((childBlock) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BlockRenderer_default, { block: childBlock, isColumn: true }, childBlock.id)) });
 };
 var Column_default = Column;
 
 // src/components/Renderer/components/Column/ColumnList.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var ColumnList = ({ block, onFocus }) => {
+var ColumnList = ({ block }) => {
   if (!block || !block.children) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: columnListContainer, children: block.children.map((column) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Column_default, { block: column, onFocus }, column.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: columnListContainer, children: block.children.map((column) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Column_default, { block: column }, column.id)) });
 };
 var ColumnList_default = ColumnList;
 
 // src/components/Renderer/components/Quote/styles.css.ts
-var container2 = "styles_container__mra9n0";
+var container = "styles_container__mra9n0";
 
 // src/components/Renderer/components/Quote/Quote.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var Quote = ({ richTexts, tabIndex }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("blockquote", { className: container2, tabIndex, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MemoizedRichText, { richTexts }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("blockquote", { className: container, tabIndex, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MemoizedRichText, { richTexts }) });
 };
 var Quote_default = Quote;
 
@@ -748,23 +723,18 @@ var TableRow_default = TableRow;
 
 // src/components/Renderer/components/Table/Table.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var Table = ({ block, tabIndex = 0 }) => {
+var Table = ({ block }) => {
   if (!block.table || !block.children) {
     return null;
   }
   const { table_width, has_column_header, has_row_header } = block.table;
-  const rows = block.children?.filter(
-    (child) => child.type === "table_row"
-  ) || [];
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: tableContainer, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("table", { className: table, tabIndex, children: rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+  const rows = block.children?.filter((child) => child.type === "table_row") || [];
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: tableContainer, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("table", { className: table, children: rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
     has_column_header && rows[0] && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TableRow_default, { rowBlock: rows[0], cellClassName: headerCell }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: rows.filter(
-      (row) => row !== void 0 && row.type === "table_row"
-    ).map((row, rowIndex) => {
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: rows.filter((row) => row !== void 0 && row.type === "table_row").map((row, rowIndex) => {
       if (has_column_header && rowIndex === 0) {
         return null;
       }
-      const actualRowIndex = has_column_header ? rowIndex - 1 : rowIndex;
       return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         TableRow_default,
         {
@@ -793,7 +763,7 @@ var toggleIconOpen = "styles_toggleIconOpen__p7ue1z3";
 
 // src/components/Renderer/components/Toggle/Toggle.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Toggle = ({ block, tabIndex = 0, onFocus }) => {
+var Toggle = ({ block }) => {
   const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
   if (!block.toggle || !block.children) {
     return null;
@@ -814,8 +784,6 @@ var Toggle = ({ block, tabIndex = 0, onFocus }) => {
         className: toggleHeader,
         onClick: handleToggle,
         onKeyDown: handleKeyDown,
-        tabIndex,
-        onFocus,
         role: "button",
         "aria-expanded": isOpen,
         children: [
@@ -824,56 +792,94 @@ var Toggle = ({ block, tabIndex = 0, onFocus }) => {
         ]
       }
     ),
-    isOpen && block.children && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: toggleContent, children: block.children.map((childBlock, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      BlockRenderer_default,
-      {
-        block: childBlock,
-        index
-      },
-      childBlock.id
-    )) })
+    isOpen && block.children && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: toggleContent, children: block.children.map((childBlock) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BlockRenderer_default, { block: childBlock }, childBlock.id)) })
   ] });
 };
 var Toggle_default = Toggle;
 
-// src/components/Renderer/components/Block/BlockRenderer.tsx
+// src/components/Renderer/components/Video/styles.css.ts
+var videoCaption = "styles_videoCaption__15b9vkb2";
+var videoContainer = "styles_videoContainer__15b9vkb0";
+var videoPlayer = "styles_videoPlayer__15b9vkb1";
+
+// src/components/Renderer/components/Video/Video.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var BlockRenderer = ({
-  block,
-  onFocus,
-  index,
-  isColumn = false
-}) => {
+var Video = ({ block }) => {
+  if (block.type !== "video" || !block.video) {
+    return null;
+  }
+  const { type, external, caption: caption2 } = block.video;
+  let videoUrl = "";
+  if (type === "external") {
+    videoUrl = getVideoEmbedUrl(external?.url);
+  }
+  if (!videoUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: "\uBE44\uB514\uC624\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: videoContainer, children: [
+    videoUrl.includes("youtube.com/embed/") ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "iframe",
+      {
+        className: videoPlayer,
+        src: videoUrl,
+        title: "YouTube video player",
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+        allowFullScreen: true
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { children: [
+      "\uC678\uBD80 \uBE44\uB514\uC624 \uB9C1\uD06C:",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { href: videoUrl, target: "_blank", rel: "noopener noreferrer", children: videoUrl })
+    ] }),
+    caption2 && caption2.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("figcaption", { className: videoCaption, children: caption2.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: c.plain_text }, i)) })
+  ] });
+};
+var getVideoEmbedUrl = (url) => {
+  if (!url) return "";
+  if (url.includes("youtu.be/")) {
+    const videoId = url.split("youtu.be/")[1]?.split("?")[0];
+    if (videoId) {
+      return `https://www.youtube.com/embed/${videoId}`;
+    }
+  } else if (url.includes("youtube.com/watch?v=")) {
+    const videoId = url.split("watch?v=")[1]?.split("&")[0];
+    if (videoId) {
+      return `https://www.youtube.com/embed/${videoId}`;
+    }
+  }
+  return url;
+};
+var Video_default = Video;
+
+// src/components/Renderer/components/Block/BlockRenderer.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var BlockRenderer = ({ block, isColumn = false }) => {
   if (!block) return null;
-  const blockProps = {
-    tabIndex: 0,
-    onFocus
-  };
   switch (block.type) {
     case "link_preview":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoizedLinkPreview, { url: block.link_preview.url, ...blockProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MemoizedLinkPreview, { url: block.link_preview.url });
     case "paragraph":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Paragraph, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Paragraph, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
     case "heading_1":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Heading1, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Heading1, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
     case "heading_2":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Heading2, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Heading2, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
     case "heading_3":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Heading3, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Heading3, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
     case "code":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         CodeBlock_default,
         {
-          code: block.code.rich_text[0].text.content,
+          code: block.code.rich_text[0]?.text?.content || "",
           language: block.code.language,
-          caption: block.code.caption?.[0]?.plain_text
+          caption: block.code.caption
         }
       ) });
     case "image":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("figure", { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("figure", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         MemoizedImage,
         {
-          src: block.image.file?.url || block.image.external?.url,
+          src: block.image.file?.url || block.image.external?.url || "",
           alt: block.image.caption?.[0]?.plain_text || "",
           caption: block.image.caption,
           format: block.image.format,
@@ -881,7 +887,7 @@ var BlockRenderer = ({
         }
       ) });
     case "bookmark":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         MemoizedBookmark,
         {
           url: block.bookmark.url,
@@ -889,36 +895,27 @@ var BlockRenderer = ({
         }
       );
     case "column_list":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ColumnList_default, { block, onFocus });
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColumnList_default, { block });
     case "column":
       return null;
     case "quote":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Quote_default, { richTexts: block.quote.rich_text, ...blockProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Quote_default, { richTexts: block.quote.rich_text });
     case "table":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Table_default2, { block, tabIndex: blockProps.tabIndex });
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Table_default2, { block });
     case "toggle":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        Toggle_default,
-        {
-          block,
-          tabIndex: blockProps.tabIndex,
-          onFocus
-        }
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Toggle_default, { block });
+    case "video":
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Video_default, { block });
     default:
       return null;
   }
 };
 var BlockRenderer_default = BlockRenderer;
 
-// src/styles/theme.css.ts
-var darkTheme = "theme_darkTheme__sq3jkb1n";
-var lightTheme = "theme_lightTheme__sq3jkb1m";
-
 // src/components/Title/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var Title = ({ title: title3 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Heading1, { children: title3 });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Heading1, { children: title3 });
 };
 var Title_default = Title;
 
@@ -932,12 +929,12 @@ var imageStyle2 = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassNam
 var skeletonWrapper2 = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "styles_skeletonWrapper__p0cp8d1", variantClassNames: { isLoaded: { true: "styles_skeletonWrapper_isLoaded_true__p0cp8d2", false: "styles_skeletonWrapper_isLoaded_false__p0cp8d3" } }, defaultVariants: { isLoaded: false }, compoundVariants: [] });
 
 // src/components/Cover/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Cover = ({ src, alt }) => {
   const [isLoaded, setIsLoaded] = (0, import_react6.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: coverContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: skeletonWrapper2({ isLoaded }), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Skeleton_default, { variant: "image" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: coverContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: skeletonWrapper2({ isLoaded }), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Skeleton_default, { variant: "image" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "img",
       {
         src,
@@ -951,80 +948,68 @@ var Cover = ({ src, alt }) => {
 };
 var Cover_default = Cover;
 
+// src/components/Renderer/styles.css.ts
+var container2 = "styles_container__epva5u0";
+
+// src/styles/theme.css.ts
+var darkTheme = "theme_darkTheme__sq3jkb1n";
+var lightTheme = "theme_lightTheme__sq3jkb1m";
+
 // src/components/Renderer/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Renderer = import_react7.default.memo(
-  ({ blocks, isDarkMode = false, title: title3, cover, onBlockFocus }) => {
-    const theme = isDarkMode ? darkTheme : lightTheme;
-    const [focusedIndex, setFocusedIndex] = (0, import_react7.useState)(-1);
-    const handleBlockFocus = (0, import_react7.useCallback)(
-      (index) => {
-        setFocusedIndex(index);
-        onBlockFocus?.(index);
-      },
-      [onBlockFocus]
-    );
-    const renderedBlocks = (0, import_react7.useMemo)(() => {
-      const result = [];
-      for (let i = 0; i < blocks.length; i++) {
-        const block = blocks[i];
-        if (!block) break;
-        const handleListItem = (listType) => {
-          const listItemType = `${listType}_list_item`;
-          if (block.type === listItemType && (i === 0 || blocks[i - 1]?.type !== listItemType)) {
-            result.push(
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                ListBlocksRenderer_default,
-                {
-                  blocks,
-                  startIndex: i,
-                  type: listType
-                },
-                block.id
-              )
-            );
-            while (i + 1 < blocks.length && blocks[i + 1] && blocks[i + 1]?.type === listItemType) {
-              i++;
-            }
-            return true;
-          }
-          return false;
-        };
-        if (handleListItem("bulleted") || handleListItem("numbered")) {
-          continue;
-        } else {
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Renderer = (0, import_react7.memo)(({ blocks, isDarkMode = false, title: title3, cover }) => {
+  const theme = isDarkMode ? darkTheme : lightTheme;
+  const renderedBlocks = (0, import_react7.useMemo)(() => {
+    const result = [];
+    for (let i = 0; i < blocks.length; i++) {
+      const block = blocks[i];
+      if (!block) break;
+      const handleListItem = (listType) => {
+        const listItemType = `${listType}_list_item`;
+        if (block.type === listItemType && (i === 0 || blocks[i - 1]?.type !== listItemType)) {
           result.push(
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              BlockRenderer_default,
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              ListBlocksRenderer_default,
               {
-                block,
-                index: i,
-                onFocus: () => handleBlockFocus(i)
+                blocks,
+                startIndex: i,
+                type: listItemType
               },
               block.id
             )
           );
+          while (i + 1 < blocks.length && blocks[i + 1] && blocks[i + 1]?.type === listItemType) {
+            i++;
+          }
+          return true;
         }
+        return false;
+      };
+      if (handleListItem("bulleted") || handleListItem("numbered")) {
+        continue;
+      } else {
+        result.push(/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BlockRenderer_default, { block }, block.id));
       }
-      return result;
-    }, [blocks, handleBlockFocus]);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-      cover && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Cover_default, { src: cover, alt: title3 || "Notion page content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-        "article",
-        {
-          className: `${theme} ${container}`,
-          "aria-label": title3 || "Notion page content",
-          children: [
-            title3 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Title_default, { title: title3 }),
-            renderedBlocks
-          ]
-        }
-      )
-    ] });
-  }
-);
+    }
+    return result;
+  }, [blocks]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    cover && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Cover_default, { src: cover, alt: title3 || "Notion page content" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "article",
+      {
+        className: `${theme} ${container2}`,
+        "aria-label": title3 || "Notion page content",
+        children: [
+          title3 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Title_default, { title: title3 }),
+          renderedBlocks
+        ]
+      }
+    )
+  ] });
+});
 Renderer.displayName = "Renderer";
+var Renderer_default = Renderer;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Renderer