diff --git a/src/components/BeforeAfter/BeforeAfter.mdx b/src/components/BeforeAfter/BeforeAfter.mdx
index 3ce6f1e3..e85451b9 100644
--- a/src/components/BeforeAfter/BeforeAfter.mdx
+++ b/src/components/BeforeAfter/BeforeAfter.mdx
@@ -11,7 +11,7 @@ The `BeforeAfter` component shows a before-and-after comparison of an image.
 ```svelte
 <script>
   import { BeforeAfter } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // If using in the Graphics Kit
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
 </script>
 
 <BeforeAfter
diff --git a/src/components/PhotoPack/PhotoPack.mdx b/src/components/PhotoPack/PhotoPack.mdx
index a76ec09e..c8bb19c4 100644
--- a/src/components/PhotoPack/PhotoPack.mdx
+++ b/src/components/PhotoPack/PhotoPack.mdx
@@ -57,60 +57,61 @@ You can define as many layouts for as many images as you like.
 
 <Canvas of={PhotoPackStories.Demo} />
 
-## ArchieML
+## Using with ArchieML docs
+
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
 
 ```yaml
+# ArchieML doc
 [blocks]
-# ...
-
 type: photo-pack
-id: my-photo-pack
-class: mb-2
-width: wide
-textWidth: normal
-gap: 10
-[.images]
-  src: images/my-img-1.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
+id: my-photo-pack # Optional
+class: mb-2 # Optional
+width: wide # Optional
+textWidth: normal # Optional
+gap: 10 # Optional; must be a number.
 
-  src: images/my-img-2.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
+# Array of image metadata
+  [.images]
+    src: images/my-img-1.jpg
+    altText: Alt text
+    caption: Lorem ipsum. REUTERS/Photog
 
-  src: images/my-img-3.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
+    src: images/my-img-2.jpg
+    altText: Alt text
+    caption: Lorem ipsum. REUTERS/Photog
 
-  src: images/my-img-4.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
+    ...
+  []
 
-  src: images/my-img-5.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
-[]
-
-# ...
 []
 ```
 
+... which you'll parse out of a ArchieML block object before passing to the `PhotoPack` component.
+
+> **Important ❗**: The prop `gap` must be a number. ArchieML renders all values -- including numbers -- as strings, so convert the `prop` value to a number before passing it to `PhotoPack`.
+
 ```svelte
 <!-- App.svelte -->
+<script>
+  import { PhotoPack } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+  import { fixSrcPathArray } from '$utils/paths'; // 👈 If using in the Graphics Kit...
+
+  import content from '$locales/en/content.json';
+</script>
+
 {#each content.blocks as block}
-  {#if block.type === 'text'}
-    <!-- ... -->
-  {:else if block.type === 'photo-pack'}
+  {#if block.type === 'photo-pack'}
+    <!-- Pass `assets` into the image source in Graphics Kit -->
+    <!-- @TODO - Update this doc once the util to derive `images` with `assets` in the image src path is written and tested. See ticket https://github.com/reuters-graphics/bluprint_graphics-kit/issues/164 -->
     <PhotoPack
       id={block.id}
       class={block.class}
       width={block.width}
       textWidth={block.textWidth}
-      images={block.images.map((img) => ({
-        src: `${assets}/${img.src}`,
-        altText: img.altText,
-        caption: img.caption,
-      }))}
+      gap={Number(block.gap)}
+      images={fixSrcPathArray(block.images)}
       layouts={[
         { breakpoint: 750, rows: [2, 3] },
         { breakpoint: 450, rows: [1, 2, 2] },
@@ -122,6 +123,4 @@ gap: 10
 {/each}
 ```
 
-## Misisng alt text
-
-If any of your images is missing `altText` a small warning will overlay the photo.
+<Canvas of={PhotoPackStories.ArchieML} />
diff --git a/src/components/PhotoPack/PhotoPack.stories.svelte b/src/components/PhotoPack/PhotoPack.stories.svelte
index 0c0ef376..1cd4b8ed 100644
--- a/src/components/PhotoPack/PhotoPack.stories.svelte
+++ b/src/components/PhotoPack/PhotoPack.stories.svelte
@@ -51,36 +51,49 @@
     { breakpoint: 750, rows: [1, 3] },
   ];
 
+  const archieMLImages = [
+    {
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194630Z_544493697_UP1E.jpeg',
+      caption:
+        "Spain's Sergio Busquets and Aymeric Laporte react before a Germany goal is disallowed following a VAR review.",
+      altText: 'alt text',
+    },
+    {
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194619Z_2007900040_UP1.jpeg',
+      caption:
+        "Spain's Sergio Busquets fouls Germany's Jamal Musiala before being shown yellow card.",
+      altText: 'alt text',
+    },
+    {
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194619Z_635809122_UP1E.jpeg',
+      caption:
+        "Spain's Sergio Busquets is shown a yellow card by referee Danny Desmond Makkelie.",
+      altText: 'alt text',
+    },
+    {
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T191015Z_1293757566_UP1.jpeg',
+      caption:
+        "Spain's Sergio Busquets in action with Germany's Thomas Muller.",
+      altText: 'alt text',
+    },
+    {
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T203612Z_1399473226_UP1.jpeg',
+      caption: "Spain's Alvaro Morata celebrates scoring their first goal.",
+      altText: 'alt text',
+    },
+  ];
   const archieMLBlock = {
-    type: 'photo-pack',
     id: 'my-photo-pack',
     class: 'mb-2',
     width: 'wide',
     textWidth: 'normal',
-    gap: '15',
-    images: defaultImages,
+    gap: Number('15'),
+    images: archieMLImages,
     layouts: [
       { breakpoint: 750, rows: [2, 3] },
       { breakpoint: 450, rows: [1, 2, 2] },
     ],
   };
-
-  const altTextImages = [
-    {
-      altText: 'alt text',
-      src: 'https://via.placeholder.com/1024x768.jpg',
-      caption:
-        'A residential building destroyed by shelling in the settlement of Borodyanka in the Kyiv region, Ukraine March 3, 2022. Picture taken with a drone. REUTERS/Maksim Levin',
-      maxHeight: 400,
-    },
-    {
-      src: 'https://via.placeholder.com/1640x1180.jpg',
-      altText: '',
-      caption:
-        'Surveillance footage shows a missile hitting a residential building in Kyiv, Ukraine, February 26, 2022, in this still image taken from a video obtained by REUTERS',
-    },
-  ];
-  const altTextLayouts = [{ breakpoint: 450, rows: [2] }];
 </script>
 
 <Story
@@ -92,14 +105,4 @@
     layouts: defaultLayouts,
   }}
 />
-
-<Story
-  name="Missing altText"
-  exportName="MissingAltText"
-  args={{
-    width: 'wide',
-    textWidth: 'normal',
-    images: altTextImages,
-    layouts: altTextLayouts,
-  }}
-/>
+<Story name="ArchieML" args={archieMLBlock} />
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index 399d6454..6d13c172 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -7,7 +7,6 @@
   // Utils
   import { random4 } from '../../utils';
   import { groupRows } from './utils';
-  // import { groupRows } from './utils';
 
   // Types
   export interface Image {