@reuters-graphics/graphics-components 1.0.30 → 1.1.0

package/dist/components/PhotoCarousel/PhotoCarousel.svelte

@@ -1,67 +1,36 @@
 <!-- @component `PhotoCarousel` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-PhotoCarousel--default) -->
-<script>/** Width of the component within the text well. */
-export let width = 'wider';
-/**
- * Set a different width for captions within the text well, for example,
- * "normal" to keep captions inline with the rest of the text well.
- * Can't ever be wider than `width`.
- * @type {string}
- */
-export let textWidth = 'normal';
-/** Add an ID to target with SCSS. */
-export let id = '';
-/** Add a class to target with SCSS. */
-let cls = '';
+<script>export let width = "wider";
+export let textWidth = "normal";
+export let id = "";
+let cls = "";
 export { cls as class };
-/**
- * Array of photos.
- * @required
- */
 export let photos = [];
-/**
- * Max height of the carousel
- */
 export let maxHeight = 660;
-/**
- * Default Image object-fit style, either `cover` or `contain`.
- */
-export let defaultImageObjectFit = 'cover';
-/**
- * Default image object-position style, e.g., `center center` or `50% 50%`.
- */
-export let defaultImageObjectPosition = 'center center';
-/**
- * ARIA label for the carousel.
- * @required
- */
-export let carouselAriaLabel = 'Photo gallery';
-/**
- * Set height of the carousel as a ratio of its width
- * as long as its below whatever you set in `maxHeight`.
- */
+export let defaultImageObjectFit = "cover";
+export let defaultImageObjectPosition = "center center";
+export let carouselAriaLabel = "Photo gallery";
 export let heightRatio = 0.68;
-/**
- * Number of images to preload ahead of the active image.
- */
 export let preloadImages = 1;
-import Block from '../Block/Block.svelte';
-import { Splide, SplideSlide, SplideTrack } from '@splidejs/svelte-splide';
-import '@splidejs/svelte-splide/css/core';
-import Fa from 'svelte-fa/src/fa.svelte';
-import { faChevronLeft, faChevronRight, } from '@fortawesome/free-solid-svg-icons';
-import { fly } from 'svelte/transition';
-import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+import Block from "../Block/Block.svelte";
+import { Splide, SplideSlide, SplideTrack } from "@splidejs/svelte-splide";
+import "@splidejs/svelte-splide/css/core";
+import Fa from "svelte-fa/src/fa.svelte";
+import {
+  faChevronLeft,
+  faChevronRight
+} from "@fortawesome/free-solid-svg-icons";
+import { fly } from "svelte/transition";
+import PaddingReset from "../PaddingReset/PaddingReset.svelte";
 let containerWidth;
 let activeImageIndex = 0;
-$: carouselHeight = containerWidth
-    ? Math.min(containerWidth * heightRatio, maxHeight)
-    : maxHeight;
+$: carouselHeight = containerWidth ? Math.min(containerWidth * heightRatio, maxHeight) : maxHeight;
 const handleActiveChange = (e) => {
-    activeImageIndex = e.detail.dest;
+  if (!e) return;
+  activeImageIndex = e.detail.dest;
 };
 </script>
 
-<Block width="{width}" id="{id}" class="photo-carousel fmy-6 {cls}">
+<Block {width} {id} class="photo-carousel fmy-6 {cls}">
   <div class="carousel-container" bind:clientWidth="{containerWidth}">
     <Splide
       hasTrack="{false}"
@@ -76,7 +45,7 @@ const handleActiveChange = (e) => {
     >
       <div class="image-container">
         <SplideTrack>
-          {#each photos as photo, i}
+          {#each photos as photo}
             <SplideSlide>
               <div class="photo-slide w-full h-full relative">
                 <figure
@@ -176,7 +145,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   display: flex;
   justify-content: space-between;
 }
-.carousel-container :global(.splide__arrows) :global(button) {
+.carousel-container :global(.splide__arrows button) {
   display: flex;
   font-size: 14px;
   height: 30px;
@@ -190,21 +159,21 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   color: var(--theme-colour-text-secondary);
   opacity: 0.4;
 }
-.carousel-container :global(.splide__arrows) :global(button.splide__arrow--prev) {
+.carousel-container :global(.splide__arrows button.splide__arrow--prev) {
   padding-right: 7px;
 }
-.carousel-container :global(.splide__arrows) :global(button.splide__arrow--next) {
+.carousel-container :global(.splide__arrows button.splide__arrow--next) {
   padding-left: 7px;
 }
-.carousel-container :global(.splide__arrows) :global(button:hover) {
+.carousel-container :global(.splide__arrows button:hover) {
   opacity: 1;
   border-color: var(--theme-colour-text-secondary);
   color: var(--theme-colour-text-secondary);
 }
-.carousel-container :global(.splide__arrows) :global(button:disabled) {
+.carousel-container :global(.splide__arrows button:disabled) {
   opacity: 0.4;
 }
-.carousel-container :global(.splide__arrows) :global(button:disabled:hover) {
+.carousel-container :global(.splide__arrows button:disabled:hover) {
   border-color: transparent;
 }
 .carousel-container :global(ul.splide__pagination) {
@@ -215,11 +184,11 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   display: flex;
   flex-wrap: nowrap;
 }
-.carousel-container :global(ul.splide__pagination) :global(li) {
+.carousel-container :global(ul.splide__pagination li) {
   flex-grow: 1;
   margin-top: -9px;
 }
-.carousel-container :global(ul.splide__pagination) :global(li) :global(button) {
+.carousel-container :global(ul.splide__pagination li button) {
   width: 100%;
   height: 7px;
   border-radius: 0;
@@ -228,6 +197,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   background: var(--theme-colour-text-secondary);
   opacity: 0.4;
 }
-.carousel-container :global(ul.splide__pagination) :global(li) :global(button.is-active) {
+.carousel-container :global(ul.splide__pagination li button.is-active) {
   opacity: 1;
 }</style>

package/dist/{@types/components → components}/PhotoCarousel/PhotoCarousel.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import '@splidejs/svelte-splide/css/core';
 declare const __propDef: {
     props: {
@@ -60,17 +60,19 @@ declare const __propDef: {
     };
     slots: {
         credit: {
-            credit: string;
+            credit: string | undefined;
         };
         caption: {
-            caption: string;
+            caption: string | undefined;
         };
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type PhotoCarouselProps = typeof __propDef.props;
 export type PhotoCarouselEvents = typeof __propDef.events;
 export type PhotoCarouselSlots = typeof __propDef.slots;
 /** `PhotoCarousel` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-PhotoCarousel--default) */
-export default class PhotoCarousel extends SvelteComponentTyped<PhotoCarouselProps, PhotoCarouselEvents, PhotoCarouselSlots> {
+export default class PhotoCarousel extends SvelteComponent<PhotoCarouselProps, PhotoCarouselEvents, PhotoCarouselSlots> {
 }
 export {};

package/dist/components/PhotoCarousel/stories/docs/component.md

@@ -0,0 +1,21 @@
+A simple, accessible photo carousel with lazy-loading and mobile swipe built in.
+
+```svelte
+<script>
+  import { PhotoCarousel } from '@reuters-graphics/graphics-components';
+
+  const photos = [
+    {
+      src: 'https://.../myImage.jpg',
+      altText: 'A picture of...',
+      caption: 'My caption...', // Optional
+      credit: 'REUTERS/Jane Doe', // Optional
+      objectFit: 'contain', // Optional
+      objectPosition: '50% 50%', // Optional
+    },
+    // ...
+  ];
+</script>
+
+<PhotoCarousel photos="{photos}" />
+```

package/dist/components/PhotoCarousel/stories/docs/withCustom.md

@@ -0,0 +1,27 @@
+Use named slots to style your own custom credits and/or captions.
+
+```svelte
+<PhotoCarousel photos="{photos}">
+  <p slot="credit" class="custom-credit" let:credit>{credit}</p>
+  <p slot="caption" class="custom-caption" let:caption>{caption}</p>
+</PhotoCarousel>
+
+<style lang="scss">
+  p {
+    position: absolute;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.6);
+    font-family: sans-serif;
+    font-size: 0.8rem;
+    padding: 0 5px;
+    &.custom-credit {
+      top: 0;
+      right: 0;
+    }
+    &.custom-caption {
+      bottom: 5px;
+      left: 0;
+    }
+  }
+</style>
+```

package/dist/components/PhotoCarousel/stories/photos.json

@@ -0,0 +1,72 @@
+[
+  {
+    "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.",
+    "credit": "REUTERS/Molly Darlington"
+  },
+  {
+    "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.",
+    "credit": "REUTERS/Kai Pfaffenbach"
+  },
+  {
+    "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.",
+    "credit": "REUTERS/Albert Gea"
+  },
+  {
+    "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.",
+    "credit": "REUTERS/John Sibley"
+  },
+  {
+    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T181411Z_1_MTZXEIBR0QNN.jpeg",
+    "caption": "Spain fans inside the stadium before the match.",
+    "credit": "REUTERS/Albert Gea"
+  },
+  {
+    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194827Z_345059331_UP1E.jpeg",
+    "caption": "Spain's Gavi.",
+    "credit": "REUTERS/Fabrizio Bensch"
+  },
+  {
+    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T175149Z_1_MTZXEIBR0PMD.jpeg",
+    "caption": "",
+    "credit": "REUTERS/John Sibley"
+  },
+  {
+    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T203232Z_890709671_UP1E.jpeg",
+    "caption": "Spain's Alvaro Morata scores their first goal.",
+    "credit": "REUTERS/Kai Pfaffenbach"
+  },
+  {
+    "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.",
+    "credit": "REUTERS/Molly Darlington"
+  },
+  {
+    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T204305Z_1795686896_UP1.jpeg",
+    "caption": "Germany's Niclas Fullkrug scores their first goal.",
+    "credit": "REUTERS/Molly Darlington"
+  },
+  {
+    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T204528Z_151067034_UP1E.jpeg",
+    "caption": "Germany's Niclas Fullkrug celebrates scoring their first goal.",
+    "credit": "REUTERS/Molly Darlington"
+  },
+  {
+    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T205041Z_2076149593_UP1.jpeg",
+    "caption": "Spain coach Luis Enrique.",
+    "credit": "REUTERS/John Sibley"
+  },
+  {
+    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T205604Z_1468073277_UP1.jpeg",
+    "caption": "Germany's Manuel Neuer applauds fans after the match.",
+    "credit": "REUTERS/Kai Pfaffenbach"
+  },
+  {
+    "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T205854Z_408619749_UP1E.jpeg",
+    "caption": "Spain players applaud fans after the match.",
+    "credit": "REUTERS/Albert Gea"
+  }
+]

package/dist/components/PhotoPack/PhotoPack.stories.svelte

@@ -0,0 +1,153 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore raw
+  import quickitDocs from './stories/docs/quickit.md?raw';
+  // @ts-ignore raw
+  import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
+
+  import PhotoPack from './PhotoPack.svelte';
+  import { getPhotoPackPropsFromDoc } from './docProps';
+
+  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+      textWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  };
+
+  const defaultImages = [
+    {
+      src: 'https://via.placeholder.com/1024x768.jpg',
+      altText: 'alt text',
+      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: 'alt text',
+      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',
+    },
+    {
+      src: 'https://via.placeholder.com/1200x900.jpg',
+      altText: 'alt text',
+      caption:
+        'People walk past the remains of a missile at a bus terminal in Kyiv, Ukraine March 4, 2022. REUTERS/Valentyn Ogirenko',
+    },
+    {
+      src: 'https://via.placeholder.com/1024x768.jpg',
+      altText: 'alt text',
+      caption:
+        'People walk past the remains of a missile at a bus terminal. REUTERS/Valentyn Ogirenko',
+    },
+  ];
+
+  const defaultLayouts = [
+    { breakpoint: 450, rows: [1, 2, 1] },
+    { breakpoint: 750, rows: [1, 3] },
+  ];
+
+  const quickItBlock = {
+    Type: 'photo-pack',
+    ID: 'my-photo-pack',
+    Class: 'mb-2',
+    Width: 'wide',
+    textWidth: 'normal',
+    Gap: '15',
+    Images: [
+      {
+        Src: 'https://via.placeholder.com/1024x768.jpg',
+        AltText: 'alt text',
+        Caption: 'Lorem ipsum. Reuters/Photog',
+        MaxHeight: '600',
+      },
+      {
+        Src: 'https://via.placeholder.com/1024x768.jpg',
+        AltText: 'alt text',
+        Caption: 'Lorem ipsum. Reuters/Photog',
+      },
+      {
+        Src: 'https://via.placeholder.com/1024x768.jpg',
+        AltText: 'alt text',
+        Caption: 'Lorem ipsum. Reuters/Photog',
+      },
+      {
+        Src: 'https://via.placeholder.com/1024x768.jpg',
+        AltText: 'alt text',
+        Caption: 'Lorem ipsum. Reuters/Photog',
+      },
+      {
+        Src: 'https://via.placeholder.com/1024x768.jpg',
+        AltText: 'alt text',
+        Caption: 'Lorem ipsum. Reuters/Photog',
+      },
+    ],
+    Layouts: [
+      { Breakpoint: '750', Rows: '2,3' },
+      { Breakpoint: '450', Rows: '1, 2, 2' },
+    ],
+  };
+
+  const altTextImages = [
+    {
+      src: 'https://via.placeholder.com/1024x768.jpg',
+      altText: 'alt text',
+      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>
+
+<Meta title="Components/PhotoPack" component="{PhotoPack}" {...metaProps} />
+
+<Template let:args>
+  <PhotoPack {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    width: 'wide',
+    textWidth: 'normal',
+    images: defaultImages,
+    layouts: defaultLayouts,
+  }}"
+/>
+
+<Story
+  name="🚀 QUICKIT"
+  {...withStoryDocs(quickitDocs)}
+  args="{getPhotoPackPropsFromDoc(quickItBlock)}"
+/>
+
+<Story
+  name="Missing altText"
+  args="{{
+    width: 'wide',
+    textWidth: 'normal',
+    images: altTextImages,
+    layouts: altTextLayouts,
+  }}"
+  {...withStoryDocs(missingAltTextDocs)}
+/>

package/dist/components/PhotoPack/PhotoPack.stories.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  PhotoPackProps */
+/** @typedef {typeof __propDef.events}  PhotoPackEvents */
+/** @typedef {typeof __propDef.slots}  PhotoPackSlots */
+export default class PhotoPack extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PhotoPackProps = typeof __propDef.props;
+export type PhotoPackEvents = typeof __propDef.events;
+export type PhotoPackSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/PhotoPack/PhotoPack.svelte

@@ -1,74 +1,43 @@
 <!-- @component `PhotoPack` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-PhotoPack--default) -->
-<script>/**
- * Array of image objects
- * @required
- */
-export let images = [];
-/**
- * Array of layout objects
- * @required
- */
+<script>export let images = [];
 export let layouts = [];
-/**
- * Gap between images.
- * @type {number}
- */
 export let gap = 15;
-const random4 = () => Math.floor((1 + Math.random()) * 0x10000)
-    .toString(16)
-    .substring(1);
-/**
- * Add an ID to target with SCSS. Should be unique from all other elements.
- * @type {string}
- */
-export let id = 'photopack-' + random4() + random4();
-/**
- * Add a class to target with SCSS.
- * @type {string}
- */
-let cls = '';
+const random4 = () => Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
+export let id = "photopack-" + random4() + random4();
+let cls = "";
 export { cls as class };
-/** Width of the component within the text well. */
-export let width = 'normal';
-/**
- * Set a different width for captions within the text well, for example,
- * "normal" to keep captions inline with the rest of the text well.
- * Can't ever be wider than `width`.
- * @type {string}
- */
-export let textWidth = 'normal';
-import Block from '../Block/Block.svelte';
-import PaddingReset from '../PaddingReset/PaddingReset.svelte';
-import Markdown from '../Markdown/Markdown.svelte';
+export let width = "normal";
+export let textWidth = "normal";
+import Block from "../Block/Block.svelte";
+import PaddingReset from "../PaddingReset/PaddingReset.svelte";
+import Markdown from "../Markdown/Markdown.svelte";
 let containerWidth;
-const groupRows = (images, layout) => {
-    // Default layout, one img per row
-    if (!layout)
-        return images.map((img) => [img]);
-    // Otherwise, chunk into rows according to layout scheme
-    let i = 0;
-    const rows = [];
-    for (const rowLength of layout.rows) {
-        const row = [];
-        for (const imgI of [...Array(rowLength).keys()]) {
-            row.push(images[imgI + i]);
-        }
-        rows.push(row);
-        i += rowLength;
+const groupRows = (images2, layout2) => {
+  if (!layout2) return images2.map((img) => [img]);
+  let i = 0;
+  const rows2 = [];
+  for (const rowLength of layout2.rows) {
+    const row = [];
+    for (const imgI of [...Array(rowLength).keys()]) {
+      row.push(images2[imgI + i]);
     }
-    return rows;
+    rows2.push(row);
+    i += rowLength;
+  }
+  return rows2;
 };
-// Sort so breakpoints always descend
-$: layouts.sort((a, b) => (a.breakpoint < b.breakpoint ? 1 : -1));
-$: layout = layouts.find((l) => 
-// Must have valid rows schema, i.e., adds to the total number of images
-l.rows.reduce((a, b) => a + b, 0) === images.length &&
-    // Breakpoint is higher than container width
-    (containerWidth || 0) >= l.breakpoint);
+$: layouts.sort((a, b) => a.breakpoint < b.breakpoint ? 1 : -1);
+$: layout = layouts.find(
+  (l) => (
+    // Must have valid rows schema, i.e., adds to the total number of images
+    l.rows.reduce((a, b) => a + b, 0) === images.length && // Breakpoint is higher than container width
+    (containerWidth || 0) >= l.breakpoint
+  )
+);
 $: rows = groupRows(images, layout);
 </script>
 
-<Block width="{width}" id="{id}" class="photopack fmy-6 {cls}">
+<Block {width} {id} class="photopack fmy-6 {cls}">
   <div class="photopack-container w-full" bind:clientWidth="{containerWidth}">
     {#each rows as row, ri}
       <div
@@ -125,7 +94,6 @@ div.photopack-container div.photopack-row figure div.alt-warning {
   top: 0;
   right: 0;
 }
-
 .notes :global(.photopack-captions-container .caption p) {
   font-family: var(--theme-font-family-note);
   color: var(--theme-colour-text-secondary);

package/dist/{@types/components → components}/PhotoPack/PhotoPack.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -41,11 +41,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type PhotoPackProps = typeof __propDef.props;
 export type PhotoPackEvents = typeof __propDef.events;
 export type PhotoPackSlots = typeof __propDef.slots;
 /** `PhotoPack` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-PhotoPack--default) */
-export default class PhotoPack extends SvelteComponentTyped<PhotoPackProps, PhotoPackEvents, PhotoPackSlots> {
+export default class PhotoPack extends SvelteComponent<PhotoPackProps, PhotoPackEvents, PhotoPackSlots> {
 }
 export {};

package/dist/{@types/components → components}/PhotoPack/docProps.d.ts

@@ -19,19 +19,19 @@ interface Block {
     Layouts: BlockLayout[];
 }
 export declare const getPhotoPackPropsFromDoc: (docBlock: Block, assetsPath?: string) => {
-    id: string;
-    cls: string;
+    id: string | undefined;
+    cls: string | undefined;
     width: string;
-    textWidth: string;
-    gap: number;
+    textWidth: string | undefined;
+    gap: number | null;
     images: {
         src: string;
         altText: string;
-        caption: string;
-        maxHeight: number;
+        caption: string | undefined;
+        maxHeight: number | null;
     }[];
     layouts: {
-        breakpoint: number;
+        breakpoint: number | null;
         rows: number[];
     }[];
 };