diff --git a/packages/svelte-notion-page/package.json b/packages/svelte-notion-page/package.json
index 65933ee..09958b1 100644
--- a/packages/svelte-notion-page/package.json
+++ b/packages/svelte-notion-page/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@cozy-blog/svelte-notion-page",
-	"version": "0.0.20",
+	"version": "0.0.23",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && svelte-package",
@@ -24,9 +24,10 @@
 		"@storybook/svelte": "^7.0.0-beta.31",
 		"@storybook/sveltekit": "^7.0.0-beta.31",
 		"@storybook/testing-library": "^0.0.13",
-		"@sveltejs/adapter-auto": "^1.0.0",
-		"@sveltejs/kit": "^1.0.0",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^1.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/he": "^1.2.0",
 		"@types/katex": "^0.16.0",
 		"@types/prismjs": "^1.26.0",
@@ -40,17 +41,17 @@
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.20",
 		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.8.1",
+		"prettier-plugin-svelte": "^2.10.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"storybook": "^7.0.0-beta.31",
-		"svelte": "^3.54.0",
-		"svelte-check": "^2.9.2",
+		"svelte": "^4.0.0",
+		"svelte-check": "^3.4.3",
 		"tailwindcss": "^3.2.4",
 		"ts-dedent": "^2.2.0",
 		"tslib": "^2.4.1",
-		"typescript": "^4.9.3",
-		"vite": "^4.0.0"
+		"typescript": "^5.0.0",
+		"vite": "^5.0.0"
 	},
 	"type": "module",
 	"dependencies": {
@@ -64,4 +65,4 @@
 		"svelte-legos": "^0.2.1",
 		"svelte-youtube-embed": "^0.1.8"
 	}
-}
+}
\ No newline at end of file
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Audio.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Audio.svelte
index 2903c77..4f684e9 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Audio.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Audio.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { AudioProps } from '$lib/types';
+	import type { AudioArgs } from '$lib/types';
 	import RichText from './base/richtext/RichText.svelte';
 
-	export let props: AudioProps;
+	export let props: AudioArgs;
 	const {
 		audio: { type, file, external, caption }
 	} = props;
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Bookmark.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Bookmark.svelte
index 37d3b6e..c07d23a 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Bookmark.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Bookmark.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { BookmarkProps } from '$lib/types';
+	import type { BookmarkArgs } from '$lib/types';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: BookmarkProps;
+	export let props: BookmarkArgs;
 	const {
 		bookmark: { url, caption }
 	} = props;
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/BulletedListItem.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/BulletedListItem.svelte
index 53086c5..f4942d2 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/BulletedListItem.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/BulletedListItem.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { BulletedListItemProps } from '$lib/types';
+	import type { BulletedListItemArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import { bulletedListItemMarker } from '$lib/utils/listItemMarker';
 	import RichText from './base/richtext/RichText.svelte';
 
-	export let props: BulletedListItemProps;
+	export let props: BulletedListItemArgs;
 
 	const {
 		bulleted_list_item: { color, rich_text: texts }
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Callout.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Callout.svelte
index df1666c..9b0a384 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Callout.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Callout.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { CalloutProps } from '$lib/types';
+	import type { CalloutArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: CalloutProps;
+	export let props: CalloutArgs;
 	const {
 		callout: { color, rich_text: texts, icon }
 	} = props;
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Code/Code.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Code/Code.svelte
index 1a84ffd..0eb2186 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Code/Code.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Code/Code.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { CodeProps } from '$lib/types';
+	import type { CodeArgs } from '$lib/types';
 	import copyToClipboard from 'clipboard-copy';
 	import RichText from '../base/richtext/RichText.svelte';
 	import { fade, fly } from 'svelte/transition';
@@ -15,7 +15,7 @@
 	import loadSql from './support-language/sql';
 	import loadTypescript from './support-language/typescript';
 
-	export let props: CodeProps;
+	export let props: CodeArgs;
 
 	/*
 	prismjs가 기본적으로 지원하는 언어: 
@@ -92,7 +92,7 @@
 	{/if}
 
 	{#if copied}
-		<div in:fly={{ y: 40 }} out:fade class="notion-code-copy-tooltip">
+		<div in:fly|global={{ y: 40 }} out:fade|global class="notion-code-copy-tooltip">
 			<div>{'Copied'}</div>
 		</div>
 	{/if}
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/ColumnList.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/ColumnList.svelte
index da3e6ab..e63109a 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/ColumnList.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/ColumnList.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type {  ColumnListProps } from '$lib/types';
-	export let props: ColumnListProps;
+	import type { ColumnListArgs } from '$lib/types';
+	export let props: ColumnListArgs;
 	const columnCount = props.blocks?.length || 0;
 </script>
 
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Equation.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Equation.svelte
index 6e5349a..c944f20 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Equation.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Equation.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { EquationProps } from '$lib/types';
+	import type { EquationArgs } from '$lib/types';
 	import renderEquation from '$lib/utils/renderEquation';
 
-	export let props: EquationProps;
+	export let props: EquationArgs;
 	const {
 		equation: { expression }
 	} = props;
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Heading1.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Heading1.svelte
index d5fec1d..bc178f1 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Heading1.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Heading1.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { Heading_1_Props } from '$lib/types';
+	import type { Heading_1_Args } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: Heading_1_Props;
+	export let props: Heading_1_Args;
 	const {
 		heading_1: { color, rich_text: texts, is_toggleable }
 	} = props;
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Heading2.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Heading2.svelte
index 9e35b5f..5b1b194 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Heading2.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Heading2.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { Heading_2_Props } from '$lib/types';
+	import type { Heading_2_Args } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: Heading_2_Props;
+	export let props: Heading_2_Args;
 	const {
 		heading_2: { color, rich_text: texts, is_toggleable }
 	} = props;
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Heading3.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Heading3.svelte
index 09fe196..631f920 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Heading3.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Heading3.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import type { Heading_3_Props } from '$lib/types';
+	import type { Heading_3_Args } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: Heading_3_Props;
+	export let props: Heading_3_Args;
 	const {
 		heading_3: { color, rich_text: texts, is_toggleable }
 	} = props;
-	let open = false
+	let open = false;
 
 	// Give id to make it convenient to write TableOfContents
-	export let id = texts.map(({plain_text}) => plain_text).join('')
+	export let id = texts.map(({ plain_text }) => plain_text).join('');
 </script>
 
 <div
-	id={id}
+	{id}
 	class:notion-toggle-open={open}
 	class={`${getColorCss(color)} notion-block notion-h3 notion-toggle`}
 >
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Image/Image.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Image/Image.svelte
index 07f9602..88d5267 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Image/Image.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Image/Image.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import type { ImageProps, ContextedBlock } from '$lib/types';
+	import type { ImageArgs, ContextedBlock } from '$lib/types';
 	import RichText from '../base/richtext/RichText.svelte';
 	import ImageViewer from './ImageViewer.svelte';
 
-	export let props: ImageProps;
+	export let style = ''
+	export let props: ImageArgs;
 	const { image } = props;
 	const { type, caption } = image;
 	export let convertUrl: (url: string) => string = (url) => url;
@@ -53,7 +54,7 @@
 	}
 </script>
 
-<div class="notion-block notion-image">
+<div style={style} class="notion-block notion-image">
 	<div class="notion-image-content">
 		{#if url}
 			<ImageViewer bind:opened {initialIndex} {urls} />
@@ -81,10 +82,4 @@
 		display: flex;
 		flex-direction: column;
 	}
-
-	.notion-image-content img {
-		width: 100%;
-		margin: 0 auto;
-		object-fit: contain;
-	}
 </style>
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Image/ImageViewer.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Image/ImageViewer.svelte
index e691e79..63410cf 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Image/ImageViewer.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Image/ImageViewer.svelte
@@ -184,7 +184,7 @@
 		tabindex="0"
 		on:mousemove={handleHideCursorOnMouseStop}
 		use:focusAction={opened}
-		transition:fade={{ duration: 200 }}
+		transition:fade|global={{ duration: 200 }}
 		class:hide-cursor={!cursorVisible}
 		class="notion-viewer-container"
 	>
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/NumberedListItem.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/NumberedListItem.svelte
index 903aea5..cd3fd8e 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/NumberedListItem.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/NumberedListItem.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { NumberedListItemProps } from '$lib/types';
+	import type { NumberedListItemArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import { numberedListItemMarker } from '$lib/utils/listItemMarker';
 	import RichText from './base/richtext/RichText.svelte';
 
-	export let props: NumberedListItemProps;
+	export let props: NumberedListItemArgs;
 	const {
 		numbered_list_item: { rich_text: texts, color }
 	} = props;
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Paragraph.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Paragraph.svelte
index 6609846..093ec3d 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Paragraph.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Paragraph.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { ParagraphProps } from '$lib/types';
+	import type { ParagraphArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: ParagraphProps;
+	export let props: ParagraphArgs;
 	const {
 		paragraph: { color, rich_text: texts }
 	} = props;
@@ -26,5 +26,4 @@
 	.notion-paragraph-content {
 		padding: 3px 2px;
 	}
-
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Quote.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Quote.svelte
index a718aeb..a2e510f 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Quote.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Quote.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { QuoteProps } from '$lib/types';
+	import type { QuoteArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
 
-	export let props: QuoteProps;
+	export let props: QuoteArgs;
 	const {
 		quote: { color, rich_text: texts }
 	} = props;
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/SyncedBlock.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/SyncedBlock.svelte
index bdce25b..efe1a86 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/SyncedBlock.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/SyncedBlock.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { SyncedBlockProps } from '$lib/types';
-	export let props: SyncedBlockProps;
+	import type { SyncedBlockArgs } from '$lib/types';
+	export let props: SyncedBlockArgs;
 </script>
 
 <div class="notion-block notion-synced-block">
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Table.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Table.svelte
index 965cf84..59b4cfd 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Table.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Table.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { TableProps } from '$lib/types';
-	export let props: TableProps;
+	import type { TableArgs } from '$lib/types';
+	export let props: TableArgs;
 	const {
 		table: { has_column_header, has_row_header }
 	} = props;
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/TableRow.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/TableRow.svelte
index ee5bbac..2b8a5c6 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/TableRow.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/TableRow.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { TableRowProps } from '$lib/types';
+	import type { TableRowArgs } from '$lib/types';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: TableRowProps;
+	export let props: TableRowArgs;
 	const {
 		table_row: { cells }
 	} = props;
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Todo.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Todo.svelte
index 17a907e..2b2d6d2 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Todo.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Todo.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { TodoProps } from '$lib/types';
+	import type { TodoArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
 	import CheckBox from './base/CheckBox.svelte';
-	export let props: TodoProps;
+	export let props: TodoArgs;
 
 	const {
 		to_do: { color, rich_text: texts, checked }
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Toggle.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Toggle.svelte
index 1630de2..ae1c9e8 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Toggle.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Toggle.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { ToggleProps } from '$lib/types';
+	import type { ToggleArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: ToggleProps;
+	export let props: ToggleArgs;
 	const {
 		toggle: { color, rich_text: texts }
 	} = props;
@@ -21,7 +21,7 @@
 			<RichText props={texts} />
 		</p>
 	</div>
-	<slot/>
+	<slot />
 </div>
 
 <style>
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/Video.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/Video.svelte
index b4540fe..2ca4b59 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/Video.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/Video.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type {  VideoProps } from '$lib/types';
+	import type { VideoArgs } from '$lib/types';
 	import RichText from './base/richtext/RichText.svelte';
 	import { getYoutubeId } from '$lib/utils/getYoutubeId';
 
-	export let props: VideoProps;
+	export let props: VideoArgs;
 	const {
 		video: { type, file, external, caption }
 	} = props;
@@ -20,7 +20,7 @@
 
 			{#if youtubeId}
 				<iframe
-          style="width: 100%; aspect-ratio: 560 / 315;"
+					style="width: 100%; aspect-ratio: 560 / 315;"
 					src="https://www.youtube.com/embed/{youtubeId}"
 					title="YouTube video player"
 					frameborder="0"
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/RichText.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/RichText.svelte
index ebfdb25..6ebe825 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/RichText.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/RichText.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { TextProps } from '$lib/types';
+	import type { TextArgs } from '$lib/types';
 	import Text from './component/Text.svelte';
 	import Equation from './component/Equation.svelte';
-	export let props: TextProps[];
+	export let props: TextArgs[];
 	const configs = {
 		text: Text,
 		equation: Equation
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/component/Equation.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/component/Equation.svelte
index 6dd8fb5..75af2da 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/component/Equation.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/component/Equation.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { EquationProps } from '$lib/types';
-	export let props: EquationProps;
+	import type { EquationArgs } from '$lib/types';
+	export let props: EquationArgs;
 	import renderEquation from '$lib/utils/renderEquation';
 	const {
 		equation: { expression }
diff --git a/packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/component/Text.svelte b/packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/component/Text.svelte
index aad13a9..2068882 100644
--- a/packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/component/Text.svelte
+++ b/packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/component/Text.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { TextProps } from '$lib/types';
+	import type { TextArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import he from 'he';
-	export let props: TextProps;
+	export let props: TextArgs;
 	const {
 		href,
 		text: { content },
diff --git a/packages/svelte-notion-page/src/lib/types.ts b/packages/svelte-notion-page/src/lib/types.ts
index bc0d5b1..71f6f27 100644
--- a/packages/svelte-notion-page/src/lib/types.ts
+++ b/packages/svelte-notion-page/src/lib/types.ts
@@ -19,7 +19,7 @@ export type BlockContext = {
 	};
 };
 
-export type TextProps = {
+export type TextArgs = {
 	type: 'text';
 	text: {
 		content: string;
@@ -39,14 +39,14 @@ export type TextProps = {
 	href?: string | null;
 };
 
-export type ParagraphProps = {
+export type ParagraphArgs = {
 	paragraph: {
 		color: string;
-		rich_text: TextProps[];
+		rich_text: TextArgs[];
 	};
 } & ContextedBlock;
 
-export type EquationProps = {
+export type EquationArgs = {
 	type: 'equation';
 	inline?: boolean;
 	equation: {
@@ -54,74 +54,74 @@ export type EquationProps = {
 	};
 };
 
-export type CodeProps = {
+export type CodeArgs = {
 	type: 'code';
 	code: {
 		caption: [];
 		language: string;
-		rich_text: TextProps[];
+		rich_text: TextArgs[];
 	};
 } & ContextedBlock;
 
-export type Heading_1_Props = {
+export type Heading_1_Args = {
 	type: 'heading_1';
-	heading_1: HeadingProps;
+	heading_1: HeadingArgs;
 } & ContextedBlock;
 
-export type Heading_2_Props = {
+export type Heading_2_Args = {
 	type: 'heading_2';
-	heading_2: HeadingProps;
+	heading_2: HeadingArgs;
 } & ContextedBlock;
 
-export type Heading_3_Props = {
+export type Heading_3_Args = {
 	type: 'heading_3';
-	heading_3: HeadingProps;
+	heading_3: HeadingArgs;
 } & ContextedBlock;
 
-export type HeadingProps = {
+export type HeadingArgs = {
 	is_toggleable: boolean;
 	color: string;
-	rich_text: TextProps[];
+	rich_text: TextArgs[];
 };
 
-export type ColumnListProps = { type: 'column_list' } & Block;
-export type ColumnProps = { type: 'column' } & Block;
-export type BulletedListItemProps = {
+export type ColumnListArgs = { type: 'column_list' } & Block;
+export type ColumnArgs = { type: 'column' } & Block;
+export type BulletedListItemArgs = {
 	type: 'bulleted_list_item';
-	bulleted_list_item: { color: string; rich_text: TextProps[] };
+	bulleted_list_item: { color: string; rich_text: TextArgs[] };
 } & ContextedBlock;
 
-export type NumberedListItemProps = {
+export type NumberedListItemArgs = {
 	type: 'numbered_list_item';
-	numbered_list_item: { color: string; rich_text: TextProps[] };
+	numbered_list_item: { color: string; rich_text: TextArgs[] };
 } & ContextedBlock;
 
-export type TodoProps = {
+export type TodoArgs = {
 	type: 'to_do';
 	to_do: {
 		color: string;
 		checked: boolean;
-		rich_text: TextProps[];
+		rich_text: TextArgs[];
 	};
 } & ContextedBlock;
 
-export type ToggleProps = {
+export type ToggleArgs = {
 	type: 'toggle';
 	toggle: {
 		color: string;
-		rich_text: TextProps[];
+		rich_text: TextArgs[];
 	};
 } & ContextedBlock;
 
-export type QuoteProps = {
+export type QuoteArgs = {
 	type: 'quote';
 	quote: {
 		color: string;
-		rich_text: TextProps[];
+		rich_text: TextArgs[];
 	};
 } & ContextedBlock;
 
-export type CalloutProps = {
+export type CalloutArgs = {
 	type: 'callout';
 	callout: {
 		icon: {
@@ -135,22 +135,22 @@ export type CalloutProps = {
 			};
 		};
 		color: string;
-		rich_text: TextProps[];
+		rich_text: TextArgs[];
 	};
 } & ContextedBlock;
 
-export type ImageProps = {
+export type ImageArgs = {
 	type: 'image';
 	image:
 		| {
-				caption: TextProps[];
+				caption: TextArgs[];
 				type: 'file';
 				file: {
 					url: string;
 				};
 		  }
 		| {
-				caption: TextProps[];
+				caption: TextArgs[];
 				type: 'external';
 				external?: {
 					url: string;
@@ -158,10 +158,10 @@ export type ImageProps = {
 		  };
 } & ContextedBlock;
 
-export type VideoProps = {
+export type VideoArgs = {
 	type: 'video';
 	video: {
-		caption: TextProps[];
+		caption: TextArgs[];
 		type: 'external' | 'file';
 		file?: {
 			url: string;
@@ -172,17 +172,17 @@ export type VideoProps = {
 	};
 } & ContextedBlock;
 
-export type DividerProps = {
+export type DividerArgs = {
 	type: 'divider';
 	divider: {
 		//
 	};
 } & ContextedBlock;
 
-export type AudioProps = {
+export type AudioArgs = {
 	type: 'audio';
 	audio: {
-		caption: TextProps[];
+		caption: TextArgs[];
 		type: 'external' | 'file';
 		file?: {
 			url: string;
@@ -193,7 +193,7 @@ export type AudioProps = {
 	};
 } & ContextedBlock;
 
-export type TableProps = {
+export type TableArgs = {
 	table: {
 		table_width: number;
 		has_column_header: boolean;
@@ -201,20 +201,20 @@ export type TableProps = {
 	};
 } & ContextedBlock;
 
-export type TableRowProps = {
+export type TableRowArgs = {
 	table_row: {
-		cells: TextProps[][];
+		cells: TextArgs[][];
 	};
 };
 
-export type BookmarkProps = {
+export type BookmarkArgs = {
 	type: 'bookmark';
 	bookmark: {
-		caption: TextProps[];
+		caption: TextArgs[];
 		url: string;
 	};
 } & ContextedBlock;
 
-export type SyncedBlockProps = {
+export type SyncedBlockArgs = {
 	type: 'synced_block';
 };
diff --git a/packages/svelte-notion-page/svelte.config.js b/packages/svelte-notion-page/svelte.config.js
index 87f198f..fd14cc8 100644
--- a/packages/svelte-notion-page/svelte.config.js
+++ b/packages/svelte-notion-page/svelte.config.js
@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {