notion-to-jsx 1.2.6 → 1.2.8

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/Renderer/index.tsx
-import React6, { useState as useState4, useMemo as useMemo2, useCallback } from "react";
+import React6, { useState as useState5, useMemo as useMemo2, useCallback } from "react";
 
 // src/components/Renderer/styles.css.ts
 var container = "styles_container__epva5u0";
@@ -47,7 +47,7 @@ var RichTexts = ({ richTexts }) => {
       case "text": {
         if (text.text) {
           const { text: textData } = text;
-          content3 = textData.link ? renderLink(textData.link, textData.content) : textData.content;
+          content3 = textData.link?.url ? renderLink(textData.link.url, textData.content) : textData.content;
         } else {
           content3 = text.plain_text;
         }
@@ -107,15 +107,88 @@ import { useState } from "react";
 
 // src/components/Renderer/components/Image/styles.css.ts
 import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
-var caption = "styles_caption__2f3ncfc";
+var caption = "styles_caption__2f3ncf7";
 var imageContainer = "styles_imageContainer__2f3ncf0";
-var imageWrapper = _7a4683({ defaultClassName: "styles_imageWrapper__2f3ncf3", variantClassNames: { hasWidth: { true: "styles_imageWrapper_hasWidth_true__2f3ncf4", false: "styles_imageWrapper_hasWidth_false__2f3ncf5" } }, defaultVariants: { hasWidth: false }, compoundVariants: [] });
-var placeholder = "styles_placeholder__2f3ncfb";
-var styledImage = _7a4683({ defaultClassName: "styles_styledImage__2f3ncf6", variantClassNames: { loaded: { true: "styles_styledImage_loaded_true__2f3ncf7", false: "styles_styledImage_loaded_false__2f3ncf8" }, hasAspectRatio: { true: "styles_styledImage_hasAspectRatio_true__2f3ncf9", false: "styles_styledImage_hasAspectRatio_false__2f3ncfa" } }, defaultVariants: { loaded: false, hasAspectRatio: false }, compoundVariants: [] });
+var imageStyle = _7a4683({ defaultClassName: "styles_imageStyle__2f3ncf2", variantClassNames: { loaded: { true: "styles_imageStyle_loaded_true__2f3ncf3", false: "styles_imageStyle_loaded_false__2f3ncf4" }, hasAspectRatio: { true: "styles_imageStyle_hasAspectRatio_true__2f3ncf5", false: "styles_imageStyle_hasAspectRatio_false__2f3ncf6" } }, defaultVariants: { loaded: false, hasAspectRatio: false }, compoundVariants: [] });
+var imageWrapper = "styles_imageWrapper__2f3ncf1";
+var skeletonWrapper = _7a4683({ defaultClassName: "styles_skeletonWrapper__2f3ncf8", variantClassNames: { isLoaded: { true: "styles_skeletonWrapper_isLoaded_true__2f3ncf9", false: "styles_skeletonWrapper_isLoaded_false__2f3ncfa" } }, defaultVariants: { isLoaded: false }, compoundVariants: [] });
+
+// src/components/Skeleton/styles.css.ts
+var circle = "styles_circle__a3g8q93";
+var image = "styles_image__a3g8q94";
+var rect = "styles_rect__a3g8q92";
+var skeleton = "styles_skeleton__a3g8q91";
+
+// src/components/Skeleton/index.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Skeleton = ({
+  variant = "rect",
+  width,
+  height,
+  className
+}) => {
+  const getVariantClass = () => {
+    switch (variant) {
+      case "circle":
+        return circle;
+      case "image":
+        return image;
+      case "rect":
+      default:
+        return rect;
+    }
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: `${skeleton} ${getVariantClass()} ${className || ""}`,
+      style: {
+        width: width || void 0,
+        height: height || void 0
+      }
+    }
+  );
+};
+var Skeleton_default = Skeleton;
 
 // src/components/Renderer/components/Image/Image.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var MAX_WIDTH = 720;
+var getImageTagStyle = (format) => {
+  return format?.block_aspect_ratio ? { aspectRatio: `${format.block_aspect_ratio}` } : void 0;
+};
+var Image = ({
+  src,
+  alt,
+  caption: imageCaption,
+  format,
+  isColumn = false
+}) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: imageContainer, children: [
+    /* @__PURE__ */ jsxs("div", { className: imageWrapper, style: getImageStyles(format, isColumn), children: [
+      /* @__PURE__ */ jsx4("div", { className: skeletonWrapper({ isLoaded }), children: /* @__PURE__ */ jsx4(Skeleton_default, { variant: "image" }) }),
+      /* @__PURE__ */ jsx4(
+        "img",
+        {
+          className: imageStyle({
+            loaded: isLoaded,
+            hasAspectRatio: !!format?.block_aspect_ratio
+          }),
+          src,
+          alt,
+          loading: "lazy",
+          onLoad: () => setIsLoaded(true),
+          width: format?.block_width,
+          height: format?.block_height,
+          style: getImageTagStyle(format)
+        }
+      )
+    ] }),
+    imageCaption && imageCaption.length > 0 && /* @__PURE__ */ jsx4("figcaption", { className: caption, children: /* @__PURE__ */ jsx4(MemoizedRichText, { richTexts: imageCaption }) })
+  ] });
+};
+var Image_default = Image;
 var getImageStyles = (format, isColumn = false) => {
   const getWidthStyle = () => {
     if (!isColumn && format?.block_aspect_ratio && format.block_aspect_ratio < 1) {
@@ -134,73 +207,6 @@ var getImageStyles = (format, isColumn = false) => {
     aspectRatio: getAspectRatioStyle()
   };
 };
-var getImageTagStyle = (format) => {
-  return format?.block_aspect_ratio ? { aspectRatio: `${format.block_aspect_ratio}` } : void 0;
-};
-var Image = ({
-  src,
-  alt,
-  caption: imageCaption,
-  format,
-  isColumn = false
-}) => {
-  const [isLoaded, setIsLoaded] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: imageContainer, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: imageWrapper({
-          hasWidth: !!format?.block_width
-        }),
-        style: getImageStyles(format, isColumn),
-        children: [
-          !isLoaded && /* @__PURE__ */ jsx3("div", { className: placeholder, style: getImageStyles(format, isColumn), children: /* @__PURE__ */ jsx3(
-            "svg",
-            {
-              width: "38",
-              height: "38",
-              viewBox: "0 0 38 38",
-              xmlns: "http://www.w3.org/2000/svg",
-              stroke: "#888",
-              children: /* @__PURE__ */ jsx3("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-                /* @__PURE__ */ jsx3("circle", { strokeOpacity: ".5", cx: "18", cy: "18", r: "18" }),
-                /* @__PURE__ */ jsx3("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx3(
-                  "animateTransform",
-                  {
-                    attributeName: "transform",
-                    type: "rotate",
-                    from: "0 18 18",
-                    to: "360 18 18",
-                    dur: "1s",
-                    repeatCount: "indefinite"
-                  }
-                ) })
-              ] }) })
-            }
-          ) }),
-          /* @__PURE__ */ jsx3(
-            "img",
-            {
-              className: styledImage({
-                loaded: isLoaded,
-                hasAspectRatio: !!format?.block_aspect_ratio
-              }),
-              src,
-              alt,
-              loading: "lazy",
-              onLoad: () => setIsLoaded(true),
-              width: format?.block_width,
-              height: format?.block_height,
-              style: getImageTagStyle(format)
-            }
-          )
-        ]
-      }
-    ),
-    imageCaption && imageCaption.length > 0 && /* @__PURE__ */ jsx3("figcaption", { className: caption, children: /* @__PURE__ */ jsx3(MemoizedRichText, { richTexts: imageCaption }) })
-  ] });
-};
-var Image_default = Image;
 
 // src/components/Renderer/components/Bookmark/styles.css.ts
 var card = "styles_card__qrq8yf1";
@@ -215,20 +221,20 @@ var title = "styles_title__qrq8yf5";
 var urlText = "styles_urlText__qrq8yf9";
 
 // src/components/Renderer/components/Bookmark/Bookmark.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var Bookmark = ({ url, metadata }) => {
-  return /* @__PURE__ */ jsx4("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: link2, children: /* @__PURE__ */ jsxs2("div", { className: card, children: [
+  return /* @__PURE__ */ jsx5("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: link2, children: /* @__PURE__ */ jsxs2("div", { className: card, children: [
     /* @__PURE__ */ jsxs2("div", { className: content, children: [
       /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx4("h4", { className: title, children: metadata?.title || url }),
-        /* @__PURE__ */ jsx4("p", { className: description, children: metadata?.description || "" })
+        /* @__PURE__ */ jsx5("h4", { className: title, children: metadata?.title || url }),
+        /* @__PURE__ */ jsx5("p", { className: description, children: metadata?.description || "" })
       ] }),
       /* @__PURE__ */ jsxs2("div", { className: siteName, children: [
-        metadata?.favicon && /* @__PURE__ */ jsx4("img", { src: metadata.favicon, alt: "", className: favicon }),
-        /* @__PURE__ */ jsx4("span", { className: urlText, children: metadata?.url || "" })
+        metadata?.favicon && /* @__PURE__ */ jsx5("img", { src: metadata.favicon, alt: "", className: favicon }),
+        /* @__PURE__ */ jsx5("span", { className: urlText, children: metadata?.url || "" })
       ] })
     ] }),
-    metadata?.image && /* @__PURE__ */ jsx4("div", { className: previewContainer, children: /* @__PURE__ */ jsx4(
+    metadata?.image && /* @__PURE__ */ jsx5("div", { className: previewContainer, children: /* @__PURE__ */ jsx5(
       "img",
       {
         className: previewImage,
@@ -260,7 +266,7 @@ var preview = "styles_preview__o1p3m11";
 var title2 = "styles_title__o1p3m15";
 
 // src/components/Renderer/components/LinkPreview/LinkPreview.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var fetchGitHubRepoData = async (repoPath) => {
   try {
     const apiUrl = `https://api.github.com/repos/${repoPath}`;
@@ -407,7 +413,7 @@ var LinkPreview = ({ url }) => {
   }, [url]);
   const repoName = repoData?.name || extractRepoPathFromUrl(url)?.split("/")[1] || "Repository";
   const updatedTimeText = repoData?.updated_at ? formatUpdatedTime(repoData.updated_at) : "";
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "a",
     {
       href: url,
@@ -417,7 +423,7 @@ var LinkPreview = ({ url }) => {
       children: linkType === "figma" && figmaData ? (
         // Figma 프리뷰 렌더링
         /* @__PURE__ */ jsxs3("div", { className: preview, children: [
-          /* @__PURE__ */ jsx5("div", { className: iconContainer, children: /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6("div", { className: iconContainer, children: /* @__PURE__ */ jsx6(
             "img",
             {
               src: figmaData.thumbnailUrl || "https://static.figma.com/app/icon/1/favicon.svg",
@@ -426,14 +432,14 @@ var LinkPreview = ({ url }) => {
             }
           ) }),
           /* @__PURE__ */ jsxs3("div", { className: content2, children: [
-            /* @__PURE__ */ jsx5("div", { className: title2, children: figmaData.name }),
-            /* @__PURE__ */ jsx5("div", { className: description2, children: "www.figma.com" })
+            /* @__PURE__ */ jsx6("div", { className: title2, children: figmaData.name }),
+            /* @__PURE__ */ jsx6("div", { className: description2, children: "www.figma.com" })
           ] })
         ] })
       ) : linkType === "github" ? (
         // GitHub 프리뷰 렌더링
         /* @__PURE__ */ jsxs3("div", { className: `${preview} ${githubPreview}`, children: [
-          /* @__PURE__ */ jsx5("div", { className: iconContainer, children: /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6("div", { className: iconContainer, children: /* @__PURE__ */ jsx6(
             "img",
             {
               src: repoData?.owner?.avatar_url || "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
@@ -442,13 +448,13 @@ var LinkPreview = ({ url }) => {
             }
           ) }),
           /* @__PURE__ */ jsxs3("div", { className: `${content2} ${githubContent}`, children: [
-            /* @__PURE__ */ jsx5("div", { className: title2, children: repoName }),
-            /* @__PURE__ */ jsx5("div", { className: description2, children: loading ? "Loading..." : `${repoName} \u2022 ${updatedTimeText}` })
+            /* @__PURE__ */ jsx6("div", { className: title2, children: repoName }),
+            /* @__PURE__ */ jsx6("div", { className: description2, children: loading ? "Loading..." : `${repoName} \u2022 ${updatedTimeText}` })
           ] })
         ] })
       ) : (
         // 기본 링크 프리뷰 렌더링
-        /* @__PURE__ */ jsx5("div", { className: preview, children: /* @__PURE__ */ jsx5("div", { className: content2, children: /* @__PURE__ */ jsx5("div", { className: title2, children: url }) }) })
+        /* @__PURE__ */ jsx6("div", { className: preview, children: /* @__PURE__ */ jsx6("div", { className: content2, children: /* @__PURE__ */ jsx6("div", { className: title2, children: url }) }) })
       )
     }
   );
@@ -479,7 +485,7 @@ var MemoizedLinkPreview = React3.memo(
 );
 
 // src/components/Renderer/components/List/ListBlocksRenderer.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var RecursiveListItem = ({ block, index }) => {
   const blockProps = {
     tabIndex: 0
@@ -487,8 +493,8 @@ var RecursiveListItem = ({ block, index }) => {
   const blockType = block.type;
   const richTexts = block[blockType]?.rich_text;
   return /* @__PURE__ */ jsxs4(ListItem, { ...blockProps, children: [
-    /* @__PURE__ */ jsx6(MemoizedRichText, { richTexts }),
-    block.children && block.children.length > 0 && /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(MemoizedRichText, { richTexts }),
+    block.children && block.children.length > 0 && /* @__PURE__ */ jsx7(
       RecursiveListGroup,
       {
         blocks: block.children,
@@ -503,14 +509,14 @@ var RecursiveListGroup = ({ blocks, type }) => {
     (block) => block.type === `${type}_list_item`
   );
   if (listItems.length === 0) return null;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     List,
     {
       as: type === "numbered" ? "ol" : "ul",
       type,
       role: "list",
       "aria-label": type === "bulleted" ? "Bulleted list" : "Numbered list",
-      children: listItems.map((block, index) => /* @__PURE__ */ jsx6(RecursiveListItem, { block, index }, block.id))
+      children: listItems.map((block, index) => /* @__PURE__ */ jsx7(RecursiveListItem, { block, index }, block.id))
     }
   );
 };
@@ -526,14 +532,14 @@ var ListBlocksRenderer = ({ blocks, startIndex, type }) => {
     }
   }
   const listItems = blocks.slice(startIndex, startIndex + consecutiveItems);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     List,
     {
       as: type === "numbered" ? "ol" : "ul",
       type,
       role: "list",
       "aria-label": type === "bulleted" ? "Bulleted list" : "Numbered list",
-      children: listItems.map((block, index) => /* @__PURE__ */ jsx6(
+      children: listItems.map((block, index) => /* @__PURE__ */ jsx7(
         RecursiveListItem,
         {
           block,
@@ -557,13 +563,13 @@ import Prism from "prismjs";
 import "prismjs/components/prism-typescript";
 import "prismjs/components/prism-jsx";
 import "prismjs/components/prism-tsx";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 if (typeof window !== "undefined") {
   window.Prism = Prism;
 }
 var renderToken = (token, i) => {
   if (typeof token === "string") {
-    return /* @__PURE__ */ jsx7("span", { children: token }, i);
+    return /* @__PURE__ */ jsx8("span", { children: token }, i);
   }
   const content3 = token.content;
   let tokenContent;
@@ -574,7 +580,7 @@ var renderToken = (token, i) => {
   } else {
     tokenContent = content3;
   }
-  return /* @__PURE__ */ jsx7("span", { className: `token ${token.type}`, children: tokenContent }, i);
+  return /* @__PURE__ */ jsx8("span", { className: `token ${token.type}`, children: tokenContent }, i);
 };
 var CodeBlock = ({ code, language, caption: caption2 }) => {
   const tokens = useMemo(() => {
@@ -582,8 +588,8 @@ var CodeBlock = ({ code, language, caption: caption2 }) => {
     return Prism.tokenize(code, prismLanguage);
   }, [code, language]);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx7("pre", { className: `${codeBlock} language-${language}`, children: /* @__PURE__ */ jsx7("code", { className: `language-${language}`, children: tokens.map((token, i) => renderToken(token, i)) }) }),
-    caption2 && /* @__PURE__ */ jsx7("figcaption", { children: /* @__PURE__ */ jsx7(MemoizedRichText, { richTexts: caption2 }) })
+    /* @__PURE__ */ jsx8("pre", { className: `${codeBlock} language-${language}`, children: /* @__PURE__ */ jsx8("code", { className: `language-${language}`, children: tokens.map((token, i) => renderToken(token, i)) }) }),
+    caption2 && /* @__PURE__ */ jsx8("figcaption", { children: /* @__PURE__ */ jsx8(MemoizedRichText, { richTexts: caption2 }) })
   ] });
 };
 var CodeBlock_default = CodeBlock;
@@ -595,34 +601,34 @@ var heading3 = "styles_heading3__90a95g3";
 var paragraph = "styles_paragraph__90a95g0";
 
 // src/components/Renderer/components/Typography/Typography.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Paragraph = ({
   className,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx8("p", { className: paragraph, ...props, children });
+  return /* @__PURE__ */ jsx9("p", { className: paragraph, ...props, children });
 };
 var Heading1 = ({
   className,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx8("h1", { className: heading1, ...props, children });
+  return /* @__PURE__ */ jsx9("h1", { className: heading1, ...props, children });
 };
 var Heading2 = ({
   className,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx8("h2", { className: heading2, ...props, children });
+  return /* @__PURE__ */ jsx9("h2", { className: heading2, ...props, children });
 };
 var Heading3 = ({
   className,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx8("h3", { className: heading3, ...props, children });
+  return /* @__PURE__ */ jsx9("h3", { className: heading3, ...props, children });
 };
 
 // src/components/Renderer/components/Column/styles.css.ts
@@ -630,10 +636,10 @@ var columnContainer = "styles_columnContainer__wle6we0";
 var columnListContainer = "styles_columnListContainer__wle6we1";
 
 // src/components/Renderer/components/Column/Column.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Column = ({ block, onFocus }) => {
   if (!block || !block.children) return null;
-  return /* @__PURE__ */ jsx9("div", { className: columnContainer, children: block.children.map((childBlock, index) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10("div", { className: columnContainer, children: block.children.map((childBlock, index) => /* @__PURE__ */ jsx10(
     BlockRenderer_default,
     {
       block: childBlock,
@@ -647,10 +653,10 @@ var Column = ({ block, onFocus }) => {
 var Column_default = Column;
 
 // src/components/Renderer/components/Column/ColumnList.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var ColumnList = ({ block, onFocus }) => {
   if (!block || !block.children) return null;
-  return /* @__PURE__ */ jsx10("div", { className: columnListContainer, children: block.children.map((column) => /* @__PURE__ */ jsx10(Column_default, { block: column, onFocus }, column.id)) });
+  return /* @__PURE__ */ jsx11("div", { className: columnListContainer, children: block.children.map((column) => /* @__PURE__ */ jsx11(Column_default, { block: column, onFocus }, column.id)) });
 };
 var ColumnList_default = ColumnList;
 
@@ -658,9 +664,9 @@ var ColumnList_default = ColumnList;
 var container2 = "styles_container__mra9n0";
 
 // src/components/Renderer/components/Quote/Quote.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Quote = ({ richTexts, tabIndex }) => {
-  return /* @__PURE__ */ jsx11("blockquote", { className: container2, tabIndex, children: /* @__PURE__ */ jsx11(MemoizedRichText, { richTexts }) });
+  return /* @__PURE__ */ jsx12("blockquote", { className: container2, tabIndex, children: /* @__PURE__ */ jsx12(MemoizedRichText, { richTexts }) });
 };
 var Quote_default = Quote;
 
@@ -674,7 +680,7 @@ var tableCell = "styles_tableCell__1rvbzfo3";
 var tableContainer = "styles_tableContainer__1rvbzfo0";
 
 // src/components/Renderer/components/Table/TableRow.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var TableRow = ({
   rowBlock,
   cellClassName = "",
@@ -684,7 +690,7 @@ var TableRow = ({
     return null;
   }
   const { cells } = rowBlock.table_row;
-  return /* @__PURE__ */ jsx12("tr", { children: cells.map((cell, index) => {
+  return /* @__PURE__ */ jsx13("tr", { children: cells.map((cell, index) => {
     const isFirstCell = index === 0;
     const isLastCell = index === cells.length - 1;
     const isRowHeader = index === rowHeaderIndex;
@@ -692,11 +698,11 @@ var TableRow = ({
     if (isFirstCell) cellClasses.push(firstCell);
     if (isLastCell) cellClasses.push(lastCell);
     if (isRowHeader) cellClasses.push(hasRowHeader);
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "td",
       {
         className: cellClasses.filter(Boolean).join(" "),
-        children: /* @__PURE__ */ jsx12(MemoizedRichText, { richTexts: cell })
+        children: /* @__PURE__ */ jsx13(MemoizedRichText, { richTexts: cell })
       },
       `${rowBlock.id}-cell-${index}`
     );
@@ -705,7 +711,7 @@ var TableRow = ({
 var TableRow_default = TableRow;
 
 // src/components/Renderer/components/Table/Table.tsx
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var Table = ({ block, tabIndex = 0 }) => {
   if (!block.table || !block.children) {
     return null;
@@ -714,16 +720,16 @@ var Table = ({ block, tabIndex = 0 }) => {
   const rows = block.children?.filter(
     (child) => child.type === "table_row"
   ) || [];
-  return /* @__PURE__ */ jsx13("div", { className: tableContainer, children: /* @__PURE__ */ jsx13("table", { className: table, tabIndex, children: rows.length > 0 && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    has_column_header && rows[0] && /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsx13(TableRow_default, { rowBlock: rows[0], cellClassName: headerCell }) }),
-    /* @__PURE__ */ jsx13("tbody", { children: rows.filter(
+  return /* @__PURE__ */ jsx14("div", { className: tableContainer, children: /* @__PURE__ */ jsx14("table", { className: table, tabIndex, children: rows.length > 0 && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    has_column_header && rows[0] && /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14(TableRow_default, { rowBlock: rows[0], cellClassName: headerCell }) }),
+    /* @__PURE__ */ jsx14("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__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         TableRow_default,
         {
           rowBlock: row,
@@ -750,7 +756,7 @@ var toggleIcon = "styles_toggleIcon__p7ue1z2";
 var toggleIconOpen = "styles_toggleIconOpen__p7ue1z3";
 
 // src/components/Renderer/components/Toggle/Toggle.tsx
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var Toggle = ({ block, tabIndex = 0, onFocus }) => {
   const [isOpen, setIsOpen] = useState3(false);
   if (!block.toggle || !block.children) {
@@ -777,12 +783,12 @@ var Toggle = ({ block, tabIndex = 0, onFocus }) => {
         role: "button",
         "aria-expanded": isOpen,
         children: [
-          /* @__PURE__ */ jsx14("span", { className: `${toggleIcon} ${isOpen ? toggleIconOpen : ""}`, children: "\u25B6" }),
-          /* @__PURE__ */ jsx14(RichTexts_default, { richTexts: block.toggle.rich_text })
+          /* @__PURE__ */ jsx15("span", { className: `${toggleIcon} ${isOpen ? toggleIconOpen : ""}`, children: "\u25B6" }),
+          /* @__PURE__ */ jsx15(RichTexts_default, { richTexts: block.toggle.rich_text })
         ]
       }
     ),
-    isOpen && block.children && /* @__PURE__ */ jsx14("div", { className: toggleContent, children: block.children.map((childBlock, index) => /* @__PURE__ */ jsx14(
+    isOpen && block.children && /* @__PURE__ */ jsx15("div", { className: toggleContent, children: block.children.map((childBlock, index) => /* @__PURE__ */ jsx15(
       BlockRenderer_default,
       {
         block: childBlock,
@@ -795,7 +801,7 @@ var Toggle = ({ block, tabIndex = 0, onFocus }) => {
 var Toggle_default = Toggle;
 
 // src/components/Renderer/components/Block/BlockRenderer.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var BlockRenderer = ({
   block,
   onFocus,
@@ -809,17 +815,17 @@ var BlockRenderer = ({
   };
   switch (block.type) {
     case "link_preview":
-      return /* @__PURE__ */ jsx15(MemoizedLinkPreview, { url: block.link_preview.url, ...blockProps });
+      return /* @__PURE__ */ jsx16(MemoizedLinkPreview, { url: block.link_preview.url, ...blockProps });
     case "paragraph":
-      return /* @__PURE__ */ jsx15(Paragraph, { ...blockProps, children: /* @__PURE__ */ jsx15(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
+      return /* @__PURE__ */ jsx16(Paragraph, { ...blockProps, children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
     case "heading_1":
-      return /* @__PURE__ */ jsx15(Heading1, { ...blockProps, children: /* @__PURE__ */ jsx15(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
+      return /* @__PURE__ */ jsx16(Heading1, { ...blockProps, children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
     case "heading_2":
-      return /* @__PURE__ */ jsx15(Heading2, { ...blockProps, children: /* @__PURE__ */ jsx15(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
+      return /* @__PURE__ */ jsx16(Heading2, { ...blockProps, children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
     case "heading_3":
-      return /* @__PURE__ */ jsx15(Heading3, { ...blockProps, children: /* @__PURE__ */ jsx15(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
+      return /* @__PURE__ */ jsx16(Heading3, { ...blockProps, children: /* @__PURE__ */ jsx16(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
     case "code":
-      return /* @__PURE__ */ jsx15("div", { ...blockProps, children: /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16("div", { ...blockProps, children: /* @__PURE__ */ jsx16(
         CodeBlock_default,
         {
           code: block.code.rich_text[0].text.content,
@@ -828,7 +834,7 @@ var BlockRenderer = ({
         }
       ) });
     case "image":
-      return /* @__PURE__ */ jsx15("figure", { ...blockProps, children: /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16("figure", { ...blockProps, children: /* @__PURE__ */ jsx16(
         MemoizedImage,
         {
           src: block.image.file?.url || block.image.external?.url,
@@ -839,7 +845,7 @@ var BlockRenderer = ({
         }
       ) });
     case "bookmark":
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         MemoizedBookmark,
         {
           url: block.bookmark.url,
@@ -847,15 +853,15 @@ var BlockRenderer = ({
         }
       );
     case "column_list":
-      return /* @__PURE__ */ jsx15(ColumnList_default, { block, onFocus });
+      return /* @__PURE__ */ jsx16(ColumnList_default, { block, onFocus });
     case "column":
       return null;
     case "quote":
-      return /* @__PURE__ */ jsx15(Quote_default, { richTexts: block.quote.rich_text, ...blockProps });
+      return /* @__PURE__ */ jsx16(Quote_default, { richTexts: block.quote.rich_text, ...blockProps });
     case "table":
-      return /* @__PURE__ */ jsx15(Table_default2, { block, tabIndex: blockProps.tabIndex });
+      return /* @__PURE__ */ jsx16(Table_default2, { block, tabIndex: blockProps.tabIndex });
     case "toggle":
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         Toggle_default,
         {
           block,
@@ -874,28 +880,47 @@ var darkTheme = "theme_darkTheme__sq3jkb1n";
 var lightTheme = "theme_lightTheme__sq3jkb1m";
 
 // src/components/Title/index.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Title = ({ title: title3 }) => {
-  return /* @__PURE__ */ jsx16(Heading1, { children: title3 });
+  return /* @__PURE__ */ jsx17(Heading1, { children: title3 });
 };
 var Title_default = Title;
 
+// src/components/Cover/index.tsx
+import { useState as useState4 } from "react";
+
 // src/components/Cover/styles.css.ts
-var cover = "styles_cover__p0cp8d0";
+import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
+var coverContainer = "styles_coverContainer__p0cp8d0";
+var imageStyle2 = _7a4684({ defaultClassName: "styles_imageStyle__p0cp8d4", variantClassNames: { isLoaded: { true: "styles_imageStyle_isLoaded_true__p0cp8d5", false: "styles_imageStyle_isLoaded_false__p0cp8d6" } }, defaultVariants: { isLoaded: false }, compoundVariants: [] });
+var skeletonWrapper2 = _7a4684({ 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
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var Cover = ({ src, alt }) => {
-  return /* @__PURE__ */ jsx17("img", { src, alt, className: cover });
+  const [isLoaded, setIsLoaded] = useState4(false);
+  return /* @__PURE__ */ jsxs8("div", { className: coverContainer, children: [
+    /* @__PURE__ */ jsx18("div", { className: skeletonWrapper2({ isLoaded }), children: /* @__PURE__ */ jsx18(Skeleton_default, { variant: "image" }) }),
+    /* @__PURE__ */ jsx18(
+      "img",
+      {
+        src,
+        alt,
+        className: imageStyle2({ isLoaded }),
+        onLoad: () => setIsLoaded(true),
+        loading: "lazy"
+      }
+    )
+  ] });
 };
 var Cover_default = Cover;
 
 // src/components/Renderer/index.tsx
-import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var Renderer = React6.memo(
-  ({ blocks, isDarkMode = false, title: title3, cover: cover2, onBlockFocus }) => {
+  ({ blocks, isDarkMode = false, title: title3, cover, onBlockFocus }) => {
     const theme = isDarkMode ? darkTheme : lightTheme;
-    const [focusedIndex, setFocusedIndex] = useState4(-1);
+    const [focusedIndex, setFocusedIndex] = useState5(-1);
     const handleBlockFocus = useCallback(
       (index) => {
         setFocusedIndex(index);
@@ -912,7 +937,7 @@ var Renderer = React6.memo(
           const listItemType = `${listType}_list_item`;
           if (block.type === listItemType && (i === 0 || blocks[i - 1]?.type !== listItemType)) {
             result.push(
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx19(
                 ListBlocksRenderer_default,
                 {
                   blocks,
@@ -933,7 +958,7 @@ var Renderer = React6.memo(
           continue;
         } else {
           result.push(
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx19(
               BlockRenderer_default,
               {
                 block,
@@ -947,15 +972,15 @@ var Renderer = React6.memo(
       }
       return result;
     }, [blocks, handleBlockFocus]);
-    return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-      cover2 && /* @__PURE__ */ jsx18(Cover_default, { src: cover2, alt: title3 || "Notion page content" }),
-      /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+      cover && /* @__PURE__ */ jsx19(Cover_default, { src: cover, alt: title3 || "Notion page content" }),
+      /* @__PURE__ */ jsxs9(
         "article",
         {
           className: `${theme} ${container}`,
           "aria-label": title3 || "Notion page content",
           children: [
-            title3 && /* @__PURE__ */ jsx18(Title_default, { title: title3 }),
+            title3 && /* @__PURE__ */ jsx19(Title_default, { title: title3 }),
             renderedBlocks
           ]
         }