notion-to-jsx 1.2.7 → 1.2.8

package/dist/index.js

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Renderer/index.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 
 // src/components/Renderer/styles.css.ts
 var container = "styles_container__epva5u0";
@@ -83,7 +83,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;
         }
@@ -143,15 +143,88 @@ var import_react = require("react");
 
 // src/components/Renderer/components/Image/styles.css.ts
 var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
-var caption = "styles_caption__2f3ncfc";
+var caption = "styles_caption__2f3ncf7";
 var imageContainer = "styles_imageContainer__2f3ncf0";
-var imageWrapper = (0, import_createRuntimeFn3.createRuntimeFn)({ 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 = (0, import_createRuntimeFn3.createRuntimeFn)({ 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 = (0, import_createRuntimeFn3.createRuntimeFn)({ 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 = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "styles_skeletonWrapper__2f3ncf8", variantClassNames: { isLoaded: { true: "styles_skeletonWrapper_isLoaded_true__2f3ncf9", false: "styles_skeletonWrapper_isLoaded_false__2f3ncfa" } }, defaultVariants: { isLoaded: false }, compoundVariants: [] });
 
-// src/components/Renderer/components/Image/Image.tsx
+// 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
 var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsx)(
+    "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
+var import_jsx_runtime4 = require("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] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: imageContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: imageWrapper, style: getImageStyles(format, isColumn), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: skeletonWrapper({ isLoaded }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Skeleton_default, { variant: "image" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)("figcaption", { className: caption, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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) {
@@ -170,73 +243,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] = (0, import_react.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: imageContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        className: imageWrapper({
-          hasWidth: !!format?.block_width
-        }),
-        style: getImageStyles(format, isColumn),
-        children: [
-          !isLoaded && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: placeholder, style: getImageStyles(format, isColumn), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "svg",
-            {
-              width: "38",
-              height: "38",
-              viewBox: "0 0 38 38",
-              xmlns: "http://www.w3.org/2000/svg",
-              stroke: "#888",
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { strokeOpacity: ".5", cx: "18", cy: "18", r: "18" }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "animateTransform",
-                  {
-                    attributeName: "transform",
-                    type: "rotate",
-                    from: "0 18 18",
-                    to: "360 18 18",
-                    dur: "1s",
-                    repeatCount: "indefinite"
-                  }
-                ) })
-              ] }) })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "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__ */ (0, import_jsx_runtime3.jsx)("figcaption", { className: caption, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MemoizedRichText, { richTexts: imageCaption }) })
-  ] });
-};
-var Image_default = Image;
 
 // src/components/Renderer/components/Bookmark/styles.css.ts
 var card = "styles_card__qrq8yf1";
@@ -251,20 +257,20 @@ var title = "styles_title__qrq8yf5";
 var urlText = "styles_urlText__qrq8yf9";
 
 // src/components/Renderer/components/Bookmark/Bookmark.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Bookmark = ({ url, metadata }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: link2, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: card, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { className: title, children: metadata?.title || url }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: description, children: metadata?.description || "" })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: link2, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: card, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: content, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h4", { className: title, children: metadata?.title || url }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: description, children: metadata?.description || "" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: siteName, children: [
-        metadata?.favicon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: metadata.favicon, alt: "", className: favicon }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: urlText, children: metadata?.url || "" })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: siteName, children: [
+        metadata?.favicon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: metadata.favicon, alt: "", className: favicon }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: urlText, children: metadata?.url || "" })
       ] })
     ] }),
-    metadata?.image && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: previewContainer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    metadata?.image && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: previewContainer, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "img",
       {
         className: previewImage,
@@ -296,7 +302,7 @@ var preview = "styles_preview__o1p3m11";
 var title2 = "styles_title__o1p3m15";
 
 // src/components/Renderer/components/LinkPreview/LinkPreview.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var fetchGitHubRepoData = async (repoPath) => {
   try {
     const apiUrl = `https://api.github.com/repos/${repoPath}`;
@@ -443,7 +449,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__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "a",
     {
       href: url,
@@ -452,8 +458,8 @@ var LinkPreview = ({ url }) => {
       className: link3,
       children: linkType === "figma" && figmaData ? (
         // Figma 프리뷰 렌더링
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: preview, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: preview, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "img",
             {
               src: figmaData.thumbnailUrl || "https://static.figma.com/app/icon/1/favicon.svg",
@@ -461,15 +467,15 @@ var LinkPreview = ({ url }) => {
               className: icon
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: content2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: title2, children: figmaData.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: description2, children: "www.figma.com" })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: content2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: title2, children: figmaData.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: description2, children: "www.figma.com" })
           ] })
         ] })
       ) : linkType === "github" ? (
         // GitHub 프리뷰 렌더링
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${preview} ${githubPreview}`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${preview} ${githubPreview}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "img",
             {
               src: repoData?.owner?.avatar_url || "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
@@ -477,14 +483,14 @@ var LinkPreview = ({ url }) => {
               className: icon
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${content2} ${githubContent}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: title2, children: repoName }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: description2, children: loading ? "Loading..." : `${repoName} \u2022 ${updatedTimeText}` })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${content2} ${githubContent}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: title2, children: repoName }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: description2, children: loading ? "Loading..." : `${repoName} \u2022 ${updatedTimeText}` })
           ] })
         ] })
       ) : (
         // 기본 링크 프리뷰 렌더링
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: preview, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: content2, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: title2, children: url }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: preview, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: content2, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: title2, children: url }) }) })
       )
     }
   );
@@ -515,16 +521,16 @@ var MemoizedLinkPreview = import_react3.default.memo(
 );
 
 // src/components/Renderer/components/List/ListBlocksRenderer.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var RecursiveListItem = ({ block, index }) => {
   const blockProps = {
     tabIndex: 0
   };
   const blockType = block.type;
   const richTexts = block[blockType]?.rich_text;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ListItem, { ...blockProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MemoizedRichText, { richTexts }),
-    block.children && block.children.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ListItem, { ...blockProps, 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,
@@ -539,14 +545,14 @@ var RecursiveListGroup = ({ blocks, type }) => {
     (block) => block.type === `${type}_list_item`
   );
   if (listItems.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     List,
     {
       as: type === "numbered" ? "ol" : "ul",
       type,
       role: "list",
       "aria-label": type === "bulleted" ? "Bulleted list" : "Numbered list",
-      children: listItems.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RecursiveListItem, { block, index }, block.id))
+      children: listItems.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RecursiveListItem, { block, index }, block.id))
     }
   );
 };
@@ -562,14 +568,14 @@ var ListBlocksRenderer = ({ blocks, startIndex, type }) => {
     }
   }
   const listItems = blocks.slice(startIndex, startIndex + consecutiveItems);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     List,
     {
       as: type === "numbered" ? "ol" : "ul",
       type,
       role: "list",
       "aria-label": type === "bulleted" ? "Bulleted list" : "Numbered list",
-      children: listItems.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: listItems.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         RecursiveListItem,
         {
           block,
@@ -593,13 +599,13 @@ var import_prismjs = __toESM(require("prismjs"));
 var import_prism_typescript = require("prismjs/components/prism-typescript");
 var import_prism_jsx = require("prismjs/components/prism-jsx");
 var import_prism_tsx = require("prismjs/components/prism-tsx");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 if (typeof window !== "undefined") {
   window.Prism = import_prismjs.default;
 }
 var renderToken = (token, i) => {
   if (typeof token === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: token }, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: token }, i);
   }
   const content3 = token.content;
   let tokenContent;
@@ -610,16 +616,16 @@ var renderToken = (token, i) => {
   } else {
     tokenContent = content3;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `token ${token.type}`, children: tokenContent }, i);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `token ${token.type}`, children: tokenContent }, i);
 };
 var CodeBlock = ({ code, language, caption: caption2 }) => {
   const tokens = (0, import_react4.useMemo)(() => {
     const prismLanguage = import_prismjs.default.languages[language] || import_prismjs.default.languages.plaintext;
     return import_prismjs.default.tokenize(code, prismLanguage);
   }, [code, language]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { className: `${codeBlock} language-${language}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: `language-${language}`, children: tokens.map((token, i) => renderToken(token, i)) }) }),
-    caption2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("figcaption", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MemoizedRichText, { richTexts: caption2 }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: `${codeBlock} language-${language}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: `language-${language}`, children: tokens.map((token, i) => renderToken(token, i)) }) }),
+    caption2 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("figcaption", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MemoizedRichText, { richTexts: caption2 }) })
   ] });
 };
 var CodeBlock_default = CodeBlock;
@@ -631,34 +637,34 @@ var heading3 = "styles_heading3__90a95g3";
 var paragraph = "styles_paragraph__90a95g0";
 
 // src/components/Renderer/components/Typography/Typography.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Paragraph = ({
   className,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: paragraph, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: paragraph, ...props, children });
 };
 var Heading1 = ({
   className,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h1", { className: heading1, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: heading1, ...props, children });
 };
 var Heading2 = ({
   className,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: heading2, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: heading2, ...props, children });
 };
 var Heading3 = ({
   className,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: heading3, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: heading3, ...props, children });
 };
 
 // src/components/Renderer/components/Column/styles.css.ts
@@ -666,10 +672,10 @@ var columnContainer = "styles_columnContainer__wle6we0";
 var columnListContainer = "styles_columnListContainer__wle6we1";
 
 // src/components/Renderer/components/Column/Column.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Column = ({ block, onFocus }) => {
   if (!block || !block.children) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: columnContainer, children: block.children.map((childBlock, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  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,
@@ -683,10 +689,10 @@ var Column = ({ block, onFocus }) => {
 var Column_default = Column;
 
 // src/components/Renderer/components/Column/ColumnList.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ColumnList = ({ block, onFocus }) => {
   if (!block || !block.children) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: columnListContainer, children: block.children.map((column) => /* @__PURE__ */ (0, import_jsx_runtime10.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, onFocus }, column.id)) });
 };
 var ColumnList_default = ColumnList;
 
@@ -694,9 +700,9 @@ var ColumnList_default = ColumnList;
 var container2 = "styles_container__mra9n0";
 
 // src/components/Renderer/components/Quote/Quote.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Quote = ({ richTexts, tabIndex }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("blockquote", { className: container2, tabIndex, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MemoizedRichText, { richTexts }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("blockquote", { className: container2, tabIndex, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MemoizedRichText, { richTexts }) });
 };
 var Quote_default = Quote;
 
@@ -710,7 +716,7 @@ var tableCell = "styles_tableCell__1rvbzfo3";
 var tableContainer = "styles_tableContainer__1rvbzfo0";
 
 // src/components/Renderer/components/Table/TableRow.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var TableRow = ({
   rowBlock,
   cellClassName = "",
@@ -720,7 +726,7 @@ var TableRow = ({
     return null;
   }
   const { cells } = rowBlock.table_row;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: cells.map((cell, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: cells.map((cell, index) => {
     const isFirstCell = index === 0;
     const isLastCell = index === cells.length - 1;
     const isRowHeader = index === rowHeaderIndex;
@@ -728,11 +734,11 @@ var TableRow = ({
     if (isFirstCell) cellClasses.push(firstCell);
     if (isLastCell) cellClasses.push(lastCell);
     if (isRowHeader) cellClasses.push(hasRowHeader);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "td",
       {
         className: cellClasses.filter(Boolean).join(" "),
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MemoizedRichText, { richTexts: cell })
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MemoizedRichText, { richTexts: cell })
       },
       `${rowBlock.id}-cell-${index}`
     );
@@ -741,7 +747,7 @@ var TableRow = ({
 var TableRow_default = TableRow;
 
 // src/components/Renderer/components/Table/Table.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Table = ({ block, tabIndex = 0 }) => {
   if (!block.table || !block.children) {
     return null;
@@ -750,16 +756,16 @@ var Table = ({ block, tabIndex = 0 }) => {
   const rows = block.children?.filter(
     (child) => child.type === "table_row"
   ) || [];
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: tableContainer, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("table", { className: table, tabIndex, children: rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    has_column_header && rows[0] && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TableRow_default, { rowBlock: rows[0], cellClassName: headerCell }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: rows.filter(
+  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: [
+    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) => {
       if (has_column_header && rowIndex === 0) {
         return null;
       }
       const actualRowIndex = has_column_header ? rowIndex - 1 : rowIndex;
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         TableRow_default,
         {
           rowBlock: row,
@@ -786,7 +792,7 @@ var toggleIcon = "styles_toggleIcon__p7ue1z2";
 var toggleIconOpen = "styles_toggleIconOpen__p7ue1z3";
 
 // src/components/Renderer/components/Toggle/Toggle.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var Toggle = ({ block, tabIndex = 0, onFocus }) => {
   const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
   if (!block.toggle || !block.children) {
@@ -801,8 +807,8 @@ var Toggle = ({ block, tabIndex = 0, onFocus }) => {
       handleToggle();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: toggleContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: toggleContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: toggleHeader,
@@ -813,12 +819,12 @@ var Toggle = ({ block, tabIndex = 0, onFocus }) => {
         role: "button",
         "aria-expanded": isOpen,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${toggleIcon} ${isOpen ? toggleIconOpen : ""}`, children: "\u25B6" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RichTexts_default, { richTexts: block.toggle.rich_text })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: `${toggleIcon} ${isOpen ? toggleIconOpen : ""}`, children: "\u25B6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RichTexts_default, { richTexts: block.toggle.rich_text })
         ]
       }
     ),
-    isOpen && block.children && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: toggleContent, children: block.children.map((childBlock, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    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,
@@ -831,7 +837,7 @@ var Toggle = ({ block, tabIndex = 0, onFocus }) => {
 var Toggle_default = Toggle;
 
 // src/components/Renderer/components/Block/BlockRenderer.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var BlockRenderer = ({
   block,
   onFocus,
@@ -845,17 +851,17 @@ var BlockRenderer = ({
   };
   switch (block.type) {
     case "link_preview":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemoizedLinkPreview, { url: block.link_preview.url, ...blockProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoizedLinkPreview, { url: block.link_preview.url, ...blockProps });
     case "paragraph":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Paragraph, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Paragraph, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
     case "heading_1":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading1, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Heading1, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
     case "heading_2":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading2, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Heading2, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
     case "heading_3":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading3, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Heading3, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
     case "code":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         CodeBlock_default,
         {
           code: block.code.rich_text[0].text.content,
@@ -864,7 +870,7 @@ var BlockRenderer = ({
         }
       ) });
     case "image":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("figure", { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("figure", { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         MemoizedImage,
         {
           src: block.image.file?.url || block.image.external?.url,
@@ -875,7 +881,7 @@ var BlockRenderer = ({
         }
       ) });
     case "bookmark":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         MemoizedBookmark,
         {
           url: block.bookmark.url,
@@ -883,15 +889,15 @@ var BlockRenderer = ({
         }
       );
     case "column_list":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColumnList_default, { block, onFocus });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ColumnList_default, { block, onFocus });
     case "column":
       return null;
     case "quote":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Quote_default, { richTexts: block.quote.rich_text, ...blockProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Quote_default, { richTexts: block.quote.rich_text, ...blockProps });
     case "table":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Table_default2, { block, tabIndex: blockProps.tabIndex });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Table_default2, { block, tabIndex: blockProps.tabIndex });
     case "toggle":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Toggle_default,
         {
           block,
@@ -910,36 +916,55 @@ var darkTheme = "theme_darkTheme__sq3jkb1n";
 var lightTheme = "theme_lightTheme__sq3jkb1m";
 
 // src/components/Title/index.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Title = ({ title: title3 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Heading1, { children: title3 });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Heading1, { children: title3 });
 };
 var Title_default = Title;
 
+// src/components/Cover/index.tsx
+var import_react6 = require("react");
+
 // src/components/Cover/styles.css.ts
-var cover = "styles_cover__p0cp8d0";
+var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
+var coverContainer = "styles_coverContainer__p0cp8d0";
+var imageStyle2 = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "styles_imageStyle__p0cp8d4", variantClassNames: { isLoaded: { true: "styles_imageStyle_isLoaded_true__p0cp8d5", false: "styles_imageStyle_isLoaded_false__p0cp8d6" } }, defaultVariants: { isLoaded: false }, compoundVariants: [] });
+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_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var Cover = ({ src, alt }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src, alt, className: cover });
+  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)(
+      "img",
+      {
+        src,
+        alt,
+        className: imageStyle2({ isLoaded }),
+        onLoad: () => setIsLoaded(true),
+        loading: "lazy"
+      }
+    )
+  ] });
 };
 var Cover_default = Cover;
 
 // src/components/Renderer/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Renderer = import_react6.default.memo(
-  ({ blocks, isDarkMode = false, title: title3, cover: cover2, onBlockFocus }) => {
+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_react6.useState)(-1);
-    const handleBlockFocus = (0, import_react6.useCallback)(
+    const [focusedIndex, setFocusedIndex] = (0, import_react7.useState)(-1);
+    const handleBlockFocus = (0, import_react7.useCallback)(
       (index) => {
         setFocusedIndex(index);
         onBlockFocus?.(index);
       },
       [onBlockFocus]
     );
-    const renderedBlocks = (0, import_react6.useMemo)(() => {
+    const renderedBlocks = (0, import_react7.useMemo)(() => {
       const result = [];
       for (let i = 0; i < blocks.length; i++) {
         const block = blocks[i];
@@ -948,7 +973,7 @@ var Renderer = import_react6.default.memo(
           const listItemType = `${listType}_list_item`;
           if (block.type === listItemType && (i === 0 || blocks[i - 1]?.type !== listItemType)) {
             result.push(
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 ListBlocksRenderer_default,
                 {
                   blocks,
@@ -969,7 +994,7 @@ var Renderer = import_react6.default.memo(
           continue;
         } else {
           result.push(
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               BlockRenderer_default,
               {
                 block,
@@ -983,15 +1008,15 @@ var Renderer = import_react6.default.memo(
       }
       return result;
     }, [blocks, handleBlockFocus]);
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-      cover2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Cover_default, { src: cover2, alt: title3 || "Notion page content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    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_runtime18.jsx)(Title_default, { title: title3 }),
+            title3 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Title_default, { title: title3 }),
             renderedBlocks
           ]
         }