From 3db34b8896dcb6e8d8045f933ce3e7d64bc5834a Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 10 Mar 2025 10:05:33 -0700
Subject: [PATCH] updates dependencies, docs

---
 src/components/EndNotes/EndNotes.mdx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/EndNotes/EndNotes.mdx b/src/components/EndNotes/EndNotes.mdx
index 3ab4a92f..d3a4932c 100644
--- a/src/components/EndNotes/EndNotes.mdx
+++ b/src/components/EndNotes/EndNotes.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Canvas } from '@storybook/blocks';
 
 import * as EndNotesStories from './EndNotes.stories.svelte';
 
@@ -6,9 +6,7 @@ import * as EndNotesStories from './EndNotes.stories.svelte';
 
 # EndNotes
 
-End notes includes notes to the main article — usually things like sources, clarifiying notes and minor corrections at the end of a story.
-
-Use it like this:
+The `EndNotes` component adds notes to the main page such as sources, clarifiying notes and minor corrections that come at the end of a story.
 
 ```svelte
 <script>
@@ -33,7 +31,11 @@ Use it like this:
 <EndNotes {notes} />
 ```
 
-... or more commonly, you'll use it with a **ArchieML doc** in the **Graphics Kit** like this:
+<Canvas of={EndNotesStories.Demo} />
+
+## Using with ArchieML docs
+
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
 
 ```yaml
 # ArchieML doc
@@ -49,6 +51,8 @@ text: Editor, Copyeditor
 []
 ```
 
+... which you'll pass to the `EndNotes` component.
+
 ```svelte
 <!-- Graphics Kit -->
 <script>