From 4d26eb8d8dbcbd34bc0ff5464e9837199fc6ac2e Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Sat, 6 Jul 2024 17:54:16 +0200
Subject: [PATCH] docs(plugin-component): fix imports

---
 docs/src/pages/plugins/component.svelte.md | 10 +++++-----
 packages/plugin-component/README.md        | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/src/pages/plugins/component.svelte.md b/docs/src/pages/plugins/component.svelte.md
index de1e1db4..af02d8ce 100644
--- a/docs/src/pages/plugins/component.svelte.md
+++ b/docs/src/pages/plugins/component.svelte.md
@@ -45,14 +45,14 @@ For example, if you want to use a custom renderer for images:
 
 ```ts
 import { Carta } from 'carta-md';
-import { attachment } from '@cartamd/plugin-attachment';
-import { svelte, initializeComponents } from '@cartamd/plugin-attachment/svelte';
+import { component } from '@cartamd/plugin-component';
+import { svelte, initializeComponents } from '@cartamd/plugin-component/svelte';
 import Image from './Image.svelte';
 
 const mapped = [svelte('img', Image) /* other components ... */];
 
 const carta = new Carta({
-	extensions: [attachment(mapped, initializeComponents)]
+	extensions: [component(mapped, initializeComponents)]
 	// ...
 });
 ```
@@ -64,7 +64,7 @@ You can use custom logic when selecting which nodes to map:
 <Code>
 
 ```ts
-import { svelteCustom } from '@cartamd/plugin-attachment/svelte';
+import { svelteCustom } from '@cartamd/plugin-component/svelte';
 import MyComponent from '...';
 
 const mapped = [
@@ -107,7 +107,7 @@ When pre-rendering content on the server (using the `<PreRendered>` component),
 
 ```svelte
 <script>
-	import { initializeComponents } from '@cartamd/plugin-attachment/svelte';
+	import { initializeComponents } from '@cartamd/plugin-component/svelte';
 	import { onMount } from 'svelte';
 	// ...
 
diff --git a/packages/plugin-component/README.md b/packages/plugin-component/README.md
index 63e25173..35e381bd 100644
--- a/packages/plugin-component/README.md
+++ b/packages/plugin-component/README.md
@@ -28,14 +28,14 @@ For example, if you want to use a custom renderer for images:
 
 ```ts
 import { Carta } from 'carta-md';
-import { attachment } from '@cartamd/plugin-attachment';
-import { svelte, initializeComponents } from '@cartamd/plugin-attachment/svelte';
+import { component } from '@cartamd/plugin-component';
+import { svelte, initializeComponents } from '@cartamd/plugin-component/svelte';
 import Image from './Image.svelte';
 
 const mapped = [svelte('img', Image) /* other components ... */];
 
 const carta = new Carta({
-	extensions: [attachment(mapped, initializeComponents)]
+	extensions: [component(mapped, initializeComponents)]
 	// ...
 });
 ```
@@ -43,7 +43,7 @@ const carta = new Carta({
 You can use custom logic when selecting which nodes to map:
 
 ```ts
-import { svelteCustom } from '@cartamd/plugin-attachment/svelte';
+import { svelteCustom } from '@cartamd/plugin-component/svelte';
 import MyComponent from '...';
 
 const mapped = [
@@ -78,7 +78,7 @@ When pre-rendering content on the server (using the `<PreRendered>` component),
 
 ```svelte
 <script>
-	import { initializeComponents } from '@cartamd/plugin-attachment/svelte';
+	import { initializeComponents } from '@cartamd/plugin-component/svelte';
 	import { onMount } from 'svelte';
 	// ...