From fd585030a07c509fd5ef7cc160d3c5a6f96d5ac2 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Fri, 18 Apr 2025 21:22:38 +0100
Subject: [PATCH] passes svelte-check

---
 .../cssVariables/{index.js => index.ts}       |  4 +--
 .../resizeObserver/{index.js => index.ts}     |  6 ++--
 .../Analytics/providers/chartbeat.ts          |  2 +-
 src/components/Analytics/providers/ga.ts      |  2 +-
 src/components/Article/Article.svelte         |  2 +-
 src/components/Byline/Byline.svelte           | 13 ++++----
 .../DatawrapperChart/DatawrapperChart.svelte  | 15 ++++-----
 .../demo/ai2svelte/ai-chart.svelte            | 10 +-----
 src/components/Headline/demo/graphic.svelte   |  2 +-
 .../HeroHeadline/demo/graphics/crash.svelte   |  8 +----
 .../demo/graphics/quakemap.svelte             |  2 +-
 .../PhotoPack/PhotoPack.stories.svelte        |  6 ++--
 .../Scroller/ScrollerBase/index.svelte        | 15 ++++-----
 .../components/ai2svelte/ai-foreground.svelte |  5 ---
 .../components/ai2svelte/ai-scroller-1.svelte |  9 ++----
 .../components/ai2svelte/ai-scroller-2.svelte |  4 +--
 .../components/ai2svelte/ai-scroller-3.svelte |  4 +--
 src/components/SiteFooter/LegalLinks.svelte   |  2 +-
 src/components/Theme/@types/component.ts      | 10 +++---
 src/components/Theme/Theme.svelte             |  5 ++-
 .../Theme/utils/{flatten.js => flatten.ts}    | 18 ++++++++---
 src/components/Theme/utils/merge.js           | 23 --------------
 src/components/Theme/utils/merge.ts           | 31 +++++++++++++++++++
 src/components/Visible/Visible.mdx            | 14 +++++----
 .../Visible/stories/snippets/default.svelte   | 13 --------
 src/globals.d.ts                              |  2 +-
 src/index.js                                  |  6 ++--
 src/journalize.d.ts                           | 19 ++++++++++++
 tsconfig.json                                 |  2 ++
 29 files changed, 129 insertions(+), 125 deletions(-)
 rename src/actions/cssVariables/{index.js => index.ts} (80%)
 rename src/actions/resizeObserver/{index.js => index.ts} (75%)
 rename src/components/Theme/utils/{flatten.js => flatten.ts} (56%)
 delete mode 100644 src/components/Theme/utils/merge.js
 create mode 100644 src/components/Theme/utils/merge.ts
 delete mode 100644 src/components/Visible/stories/snippets/default.svelte
 create mode 100644 src/journalize.d.ts

diff --git a/src/actions/cssVariables/index.js b/src/actions/cssVariables/index.ts
similarity index 80%
rename from src/actions/cssVariables/index.js
rename to src/actions/cssVariables/index.ts
index 177a077d..47b23267 100644
--- a/src/actions/cssVariables/index.js
+++ b/src/actions/cssVariables/index.ts
@@ -1,11 +1,11 @@
 // Shamelessly stolen from: https://github.com/kaisermann/svelte-css-vars
-export default (node, props) => {
+export default (node: HTMLElement, props: Record<string, string>) => {
   Object.entries(props).forEach(([key, value]) => {
     node.style.setProperty(`--${key}`, value);
   });
 
   return {
-    update(newProps) {
+    update(newProps: Record<string, string>) {
       Object.entries(newProps).forEach(([key, value]) => {
         node.style.setProperty(`--${key}`, value);
         delete props[key];
diff --git a/src/actions/resizeObserver/index.js b/src/actions/resizeObserver/index.ts
similarity index 75%
rename from src/actions/resizeObserver/index.js
rename to src/actions/resizeObserver/index.ts
index b3de9bf2..10cf6991 100644
--- a/src/actions/resizeObserver/index.js
+++ b/src/actions/resizeObserver/index.ts
@@ -1,8 +1,8 @@
 // Shamelessly stolen from https://github.com/sveltejs/svelte/issues/7583#issue-1260717165
-let observer;
-let callbacks;
+let observer: ResizeObserver;
+let callbacks: WeakMap<Element, (el: Element) => unknown>;
 
-export default (element, onResize) => {
+export default (element: HTMLElement, onResize: (el: Element) => unknown) => {
   if (!observer) {
     callbacks = new WeakMap();
     observer = new ResizeObserver((entries) => {
diff --git a/src/components/Analytics/providers/chartbeat.ts b/src/components/Analytics/providers/chartbeat.ts
index 8e84f117..aedea3a0 100644
--- a/src/components/Analytics/providers/chartbeat.ts
+++ b/src/components/Analytics/providers/chartbeat.ts
@@ -12,7 +12,7 @@ const attachScript = () => {
   e.type = 'text/javascript';
   e.async = true;
   e.src = URL;
-  n.parentNode.insertBefore(e, n);
+  n.parentNode!.insertBefore(e, n);
 };
 
 export default (authors: { name: string }[]) => {
diff --git a/src/components/Analytics/providers/ga.ts b/src/components/Analytics/providers/ga.ts
index 5de53158..6bd02d1d 100644
--- a/src/components/Analytics/providers/ga.ts
+++ b/src/components/Analytics/providers/ga.ts
@@ -12,7 +12,7 @@ const attachScript = () => {
   e.type = 'text/javascript';
   e.async = true;
   e.src = URL;
-  n.parentNode.insertBefore(e, n);
+  n.parentNode!.insertBefore(e, n);
 };
 
 export default () => {
diff --git a/src/components/Article/Article.svelte b/src/components/Article/Article.svelte
index ee8f8266..56b86043 100644
--- a/src/components/Article/Article.svelte
+++ b/src/components/Article/Article.svelte
@@ -13,7 +13,7 @@
     wider: number;
   }
 
-  import cssVariables from '../../actions/cssVariables/index.js';
+  import cssVariables from '../../actions/cssVariables/index';
   interface Props {
     /** Set to true for embeddables. */
     embedded?: boolean;
diff --git a/src/components/Byline/Byline.svelte b/src/components/Byline/Byline.svelte
index 1f5950c3..ae41a269 100644
--- a/src/components/Byline/Byline.svelte
+++ b/src/components/Byline/Byline.svelte
@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `Byline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-byline--docs) -->
 <script lang="ts">
   import { getAuthorPageUrl } from '../../utils';
@@ -145,14 +144,16 @@
             {@render updated()}
           </time>
         </div>
-      {:else if isValidDate(publishTime) && isValidDate(updateTime)}
+      {:else if isValidDate(publishTime) && isValidDate(updateTime || '')}
         <div class="whitespace-nowrap inline-block">
           Last updated
           <time datetime={updateTime}>
-            {#if areSameDay(new Date(publishTime), new Date(updateTime))}
-              {formatTime(updateTime)}
+            {#if areSameDay(new Date(publishTime), new Date(updateTime || new Date()))}
+              {formatTime(updateTime || '')}
             {:else}
-              {apdate(new Date(updateTime))}&nbsp;&nbsp;{formatTime(updateTime)}
+              {apdate(
+                new Date(updateTime || new Date())
+              )}&nbsp;&nbsp;{formatTime(updateTime || '')}
             {/if}
           </time>
         </div>
@@ -164,7 +165,7 @@
 <style lang="scss">
   @use '../../scss/mixins' as *;
 
-  .byline-container {
+  .byline {
     a {
       &:hover {
         text-decoration-line: underline;
diff --git a/src/components/DatawrapperChart/DatawrapperChart.svelte b/src/components/DatawrapperChart/DatawrapperChart.svelte
index 47864058..b2fd86d5 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.svelte
@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <!-- @component `DatawrapperChart` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-datawrapperchart--docs) -->
 <script lang="ts">
   import { onMount, onDestroy, type Snippet } from 'svelte';
@@ -9,9 +8,9 @@
 
   interface Props {
     /** Title of the graphic */
-    title: string | null;
+    title?: string;
     /** Description of the graphic, passed in as a markdown string. */
-    description: string | null;
+    description?: string;
     /**
      * iframe title
      */
@@ -19,7 +18,7 @@
     /**
      * Notes to the graphic, passed in as a markdown string.
      */
-    notes: string | null;
+    notes?: string;
     /**
      * iframe aria label
      */
@@ -49,10 +48,10 @@
   }
 
   let {
-    title = null,
-    description = null,
+    title,
+    description,
     frameTitle = '',
-    notes = null,
+    notes,
     ariaLabel = '',
     id = '',
     src,
@@ -65,11 +64,13 @@
 
   let frameElement: HTMLElement;
 
+  // eslint-disable-next-line
   const frameFiller = (e: any) => {
     if (void 0 !== e.data['datawrapper-height']) {
       const t = [frameElement];
       for (const a in e.data['datawrapper-height']) {
         for (let r = 0; r < t.length; r++) {
+          // @ts-ignore OK here
           if (t[r].contentWindow === e.source) {
             t[r].style.height = e.data['datawrapper-height'][a] + 'px';
           }
diff --git a/src/components/GraphicBlock/demo/ai2svelte/ai-chart.svelte b/src/components/GraphicBlock/demo/ai2svelte/ai-chart.svelte
index 9b9c11fe..704b6eaf 100644
--- a/src/components/GraphicBlock/demo/ai2svelte/ai-chart.svelte
+++ b/src/components/GraphicBlock/demo/ai2svelte/ai-chart.svelte
@@ -6,13 +6,8 @@
   import chartSm from '../imgs/ai-chart-sm.png';
   // @ts-ignore img
   import chartMd from '../imgs/ai-chart-md.png';
-  interface Props {
-    // svelte-ignore unused-export-let
-    basePath?: string;
-  }
 
-  let { basePath = './' }: Props = $props();
-  let width = $state(null);
+  let width = $state<number>();
 </script>
 
 <!-- Generated by ai2html v0.100.0 - 2021-09-29 12:37 -->
@@ -25,7 +20,6 @@
       <div
         id="g-_ai-chart-xs-img"
         class="g-aiImg"
-        alt=""
         style={`background-image: url(${chartXs});`}
       ></div>
       <div
@@ -158,7 +152,6 @@
       <div
         id="g-_ai-chart-sm-img"
         class="g-aiImg"
-        alt=""
         style={`background-image: url(${chartSm});`}
       ></div>
       <div
@@ -291,7 +284,6 @@
       <div
         id="g-_ai-chart-md-img"
         class="g-aiImg"
-        alt=""
         style={`background-image: url(${chartMd});`}
       ></div>
       <div
diff --git a/src/components/Headline/demo/graphic.svelte b/src/components/Headline/demo/graphic.svelte
index bfccbab4..b202a85d 100644
--- a/src/components/Headline/demo/graphic.svelte
+++ b/src/components/Headline/demo/graphic.svelte
@@ -11,7 +11,7 @@
   import chartXl from './graphic-xl.png';
 
   // export let assetsPath = './';
-  let width = $state(null);
+  let width = $state();
 </script>
 
 <div id="g-graphic-box" bind:clientWidth={width}>
diff --git a/src/components/HeroHeadline/demo/graphics/crash.svelte b/src/components/HeroHeadline/demo/graphics/crash.svelte
index 1fc73b82..ea7ca990 100644
--- a/src/components/HeroHeadline/demo/graphics/crash.svelte
+++ b/src/components/HeroHeadline/demo/graphics/crash.svelte
@@ -1,6 +1,6 @@
 <script>
   // export let assetsPath = './';
-  let width = $state(null);
+  let width = $state();
 
   // @ts-ignore img
   import chartXs from './CRASH_1-xs.jpeg';
@@ -26,7 +26,6 @@
       <div
         id="g-CRASH_1-xs-img"
         class="g-aiImg"
-        alt=""
         style={`background-image: url(${chartXs});`}
       ></div>
       <div
@@ -79,7 +78,6 @@
       <div
         id="g-CRASH_1-sm-img"
         class="g-aiImg"
-        alt=""
         style={`background-image: url(${chartSm});`}
       ></div>
       <div
@@ -132,7 +130,6 @@
       <div
         id="g-CRASH_1-md-img"
         class="g-aiImg"
-        alt=""
         style={`background-image: url(${chartMd});`}
       ></div>
       <div
@@ -193,7 +190,6 @@
       <div
         id="g-CRASH_1-lg-img"
         class="g-aiImg"
-        alt=""
         style={`background-image: url(${chartLg});`}
       ></div>
       <div
@@ -254,7 +250,6 @@
       <div
         id="g-CRASH_1-xl-img"
         class="g-aiImg"
-        alt=""
         style={`background-image: url(${chartXl});`}
       ></div>
       <div
@@ -315,7 +310,6 @@
       <div
         id="g-CRASH_1-xl_copy-img"
         class="g-aiImg"
-        alt=""
         style={`background-image: url(${chartXxl});`}
       ></div>
       <div
diff --git a/src/components/HeroHeadline/demo/graphics/quakemap.svelte b/src/components/HeroHeadline/demo/graphics/quakemap.svelte
index 5ca06cdd..30fba5c2 100644
--- a/src/components/HeroHeadline/demo/graphics/quakemap.svelte
+++ b/src/components/HeroHeadline/demo/graphics/quakemap.svelte
@@ -1,5 +1,5 @@
 <script>
-  let width = $state(null);
+  let width = $state();
 
   // @ts-ignore raw
   import chartXs from './quake-map-top-xs.jpeg';
diff --git a/src/components/PhotoPack/PhotoPack.stories.svelte b/src/components/PhotoPack/PhotoPack.stories.svelte
index 1cd4b8ed..b512d389 100644
--- a/src/components/PhotoPack/PhotoPack.stories.svelte
+++ b/src/components/PhotoPack/PhotoPack.stories.svelte
@@ -18,7 +18,7 @@
   });
 </script>
 
-<script>
+<script lang="ts">
   const defaultImages = [
     {
       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',
@@ -85,8 +85,8 @@
   const archieMLBlock = {
     id: 'my-photo-pack',
     class: 'mb-2',
-    width: 'wide',
-    textWidth: 'normal',
+    width: 'wide' as const,
+    textWidth: 'normal' as const,
     gap: Number('15'),
     images: archieMLImages,
     layouts: [
diff --git a/src/components/Scroller/ScrollerBase/index.svelte b/src/components/Scroller/ScrollerBase/index.svelte
index 4f3d95d1..807f05ff 100644
--- a/src/components/Scroller/ScrollerBase/index.svelte
+++ b/src/components/Scroller/ScrollerBase/index.svelte
@@ -128,15 +128,16 @@
   let background: HTMLElement;
   let left;
   // Target compiler option to es6 or higher for NodeListOf<T> to be iterable.
-  let sections: NodeListOf<HTMLElement>;
+  let sections: ReturnType<typeof document.querySelectorAll> | undefined =
+    $state();
   let wh = $state(0);
   let fixed = $state(false);
   let offset_top = 0;
   let width = 1;
 
-  let top_px = Math.round(top * wh);
-  let bottom_px = Math.round(bottom * wh);
-  let threshold_px = Math.round(threshold * wh);
+  let top_px = $derived(Math.round(top * wh));
+  let bottom_px = $derived(Math.round(bottom * wh));
+  let threshold_px = $derived(Math.round(threshold * wh));
 
   let style = $derived(`
 		position: ${fixed ? 'fixed' : 'absolute'};
@@ -194,11 +195,11 @@
       fixed = true;
     }
 
-    for (let i = 0; i < sections.length; i++) {
-      const section = sections[i];
+    for (let i = 0; i < sections!.length; i++) {
+      const section = sections![i];
       const { top } = section.getBoundingClientRect();
 
-      const next = sections[i + 1];
+      const next = sections![i + 1];
       const bottom = next ? next.getBoundingClientRect().top : fg.bottom;
 
       offset = (threshold_px - top) / (bottom - top);
diff --git a/src/components/Scroller/demo/components/ai2svelte/ai-foreground.svelte b/src/components/Scroller/demo/components/ai2svelte/ai-foreground.svelte
index e4109cf6..6af40a5d 100644
--- a/src/components/Scroller/demo/components/ai2svelte/ai-foreground.svelte
+++ b/src/components/Scroller/demo/components/ai2svelte/ai-foreground.svelte
@@ -12,7 +12,6 @@
       <div
         id="g-Body-issues-key-xs-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepXs});"
       ></div>
       <div
@@ -110,8 +109,4 @@
     font-weight: 400;
     height: 19px;
   }
-
-  /* Custom CSS */
-  .text {
-  }
 </style>
diff --git a/src/components/Scroller/demo/components/ai2svelte/ai-scroller-1.svelte b/src/components/Scroller/demo/components/ai2svelte/ai-scroller-1.svelte
index 6293b3d0..df60d003 100644
--- a/src/components/Scroller/demo/components/ai2svelte/ai-scroller-1.svelte
+++ b/src/components/Scroller/demo/components/ai2svelte/ai-scroller-1.svelte
@@ -1,11 +1,11 @@
-<script>
+<script lang="ts">
   // Hard-coding for demo purposes only...
   import stepXl from './images/step-1-xl.png';
   import stepLg from './images/step-1-lg.png';
   import stepMd from './images/step-1-md.png';
   import stepSm from './images/step-1-sm.png';
   import stepXs from './images/step-1-xs.png';
-  let width = $state();
+  let width = $state<number>();
 </script>
 
 <!-- Generated by ai2html v0.100.0 - 2021-09-30 14:21 -->
@@ -18,7 +18,6 @@
       <div
         id="g-step-1-xl-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepXl});"
       ></div>
     </div>
@@ -30,7 +29,6 @@
       <div
         id="g-step-1-lg-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepLg});"
       ></div>
     </div>
@@ -42,7 +40,6 @@
       <div
         id="g-step-1-md-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepMd});"
       ></div>
     </div>
@@ -54,7 +51,6 @@
       <div
         id="g-step-1-sm-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepSm});"
       ></div>
     </div>
@@ -66,7 +62,6 @@
       <div
         id="g-step-1-xs-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepXs});"
       ></div>
     </div>
diff --git a/src/components/Scroller/demo/components/ai2svelte/ai-scroller-2.svelte b/src/components/Scroller/demo/components/ai2svelte/ai-scroller-2.svelte
index 021c14ec..18a5870f 100644
--- a/src/components/Scroller/demo/components/ai2svelte/ai-scroller-2.svelte
+++ b/src/components/Scroller/demo/components/ai2svelte/ai-scroller-2.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   // Hard-coding for demo purposes only...
   // @ts-ignore img
   import stepXl from './images/step-2-xl.png';
@@ -10,7 +10,7 @@
   import stepSm from './images/step-2-sm.png';
   // @ts-ignore img
   import stepXs from './images/step-2-xs.png';
-  let width = $state(null);
+  let width = $state<null | number>(null);
 </script>
 
 <!-- Generated by ai2html v0.100.0 - 2021-09-30 14:20 -->
diff --git a/src/components/Scroller/demo/components/ai2svelte/ai-scroller-3.svelte b/src/components/Scroller/demo/components/ai2svelte/ai-scroller-3.svelte
index bab2159e..33538e06 100644
--- a/src/components/Scroller/demo/components/ai2svelte/ai-scroller-3.svelte
+++ b/src/components/Scroller/demo/components/ai2svelte/ai-scroller-3.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   // Hard-coding for demo purposes only...
   // @ts-ignore img
   import stepXl from './images/step-3-xl.png';
@@ -10,7 +10,7 @@
   import stepSm from './images/step-3-sm.png';
   // @ts-ignore img
   import stepXs from './images/step-3-xs.png';
-  let width = $state(null);
+  let width = $state<null | number>(null);
 </script>
 
 <!-- Generated by ai2html v0.100.0 - 2021-09-30 14:28 -->
diff --git a/src/components/SiteFooter/LegalLinks.svelte b/src/components/SiteFooter/LegalLinks.svelte
index 0984115f..8a3d485a 100644
--- a/src/components/SiteFooter/LegalLinks.svelte
+++ b/src/components/SiteFooter/LegalLinks.svelte
@@ -37,7 +37,7 @@
       </section>
       <p class="disclaimer">
         All quotes delayed a minimum of 15 minutes. <a
-          href={normalizeUrl(links.disclaimer_link)}
+          href={normalizeUrl(links.disclaimer_link || '')}
           >See here for a complete list of exchanges and delays</a
         >.
       </p>
diff --git a/src/components/Theme/@types/component.ts b/src/components/Theme/@types/component.ts
index c3a8a6f6..7a0f889f 100644
--- a/src/components/Theme/@types/component.ts
+++ b/src/components/Theme/@types/component.ts
@@ -1,4 +1,4 @@
-interface Colour {
+export interface Colour {
   background: string;
   'text-primary': string;
   'text-secondary': string;
@@ -8,7 +8,7 @@ interface Colour {
   'brand-shadow': string;
 }
 
-interface FontFamily {
+export interface FontFamily {
   serif: string;
   'sans-serif': string;
   monospace: string;
@@ -18,7 +18,7 @@ interface FontFamily {
   note: string;
 }
 
-interface FontSize {
+export interface FontSize {
   xxs: string;
   xs: string;
   sm: string;
@@ -32,12 +32,12 @@ interface FontSize {
   '6xl': string;
 }
 
-interface Font {
+export interface Font {
   family: FontFamily;
   size: FontSize;
 }
 
-interface CustomFont {
+export interface CustomFont {
   family?: Partial<FontFamily>;
   size?: Partial<FontSize>;
 }
diff --git a/src/components/Theme/Theme.svelte b/src/components/Theme/Theme.svelte
index f1d4da89..8185c7e4 100644
--- a/src/components/Theme/Theme.svelte
+++ b/src/components/Theme/Theme.svelte
@@ -4,15 +4,14 @@
   import dark from './themes/dark.js';
   /**
    * Pre-made themes you can import.
-   * @type {{ light, dark }}
    */
   export const themes = { light, dark };
 </script>
 
 <script lang="ts">
   // Utils
-  import flatten from './utils/flatten';
-  import mergeThemes from './utils/merge';
+  import flatten from './utils/flatten.js';
+  import mergeThemes from './utils/merge.js';
 
   // Types
   import type { CustomTheme } from './@types/component';
diff --git a/src/components/Theme/utils/flatten.js b/src/components/Theme/utils/flatten.ts
similarity index 56%
rename from src/components/Theme/utils/flatten.js
rename to src/components/Theme/utils/flatten.ts
index 2a07e7cb..ae84fcfd 100644
--- a/src/components/Theme/utils/flatten.js
+++ b/src/components/Theme/utils/flatten.ts
@@ -1,4 +1,5 @@
-function isBuffer(obj) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isBuffer(obj: any): boolean {
   return (
     obj &&
     obj.constructor &&
@@ -7,13 +8,20 @@ function isBuffer(obj) {
   );
 }
 
-const transformKey = (key) => key.replace(/[^a-z0-9-]/gi, '');
+const transformKey = (key: string): string => key.replace(/[^a-z0-9-]/gi, '');
 
-export default function flatten(target) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function flatten<T extends Record<string, any>>(target: T) {
   const delimiter = '-';
-  const output = {};
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const output: Record<string, any> = {};
 
-  function step(object, prev, currentDepth = 1) {
+  function step(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    object: Record<string, any>,
+    prev?: string,
+    currentDepth = 1
+  ): void {
     Object.keys(object).forEach(function (key) {
       const value = object[key];
       const isArray = Array.isArray(value);
diff --git a/src/components/Theme/utils/merge.js b/src/components/Theme/utils/merge.js
deleted file mode 100644
index a892c4ab..00000000
--- a/src/components/Theme/utils/merge.js
+++ /dev/null
@@ -1,23 +0,0 @@
-function isObject(item) {
-  return item && typeof item === 'object' && !Array.isArray(item);
-}
-
-/**
- * Deep merges theme objects.
- */
-export default function merge(target, ...sources) {
-  if (!sources.length) return target;
-  const source = sources.shift();
-
-  if (isObject(target) && isObject(source)) {
-    for (const key in source) {
-      if (isObject(source[key])) {
-        if (!target[key]) Object.assign(target, { [key]: {} });
-        merge(target[key], source[key]);
-      } else {
-        Object.assign(target, { [key]: source[key] });
-      }
-    }
-  }
-  return merge(target, ...sources);
-}
diff --git a/src/components/Theme/utils/merge.ts b/src/components/Theme/utils/merge.ts
new file mode 100644
index 00000000..8e0ebc48
--- /dev/null
+++ b/src/components/Theme/utils/merge.ts
@@ -0,0 +1,31 @@
+import type { Theme, CustomTheme } from '../@types/component';
+
+function isObject(item: unknown): item is Record<string, unknown> {
+  return item !== null && typeof item === 'object' && !Array.isArray(item);
+}
+
+/**
+ * Deep merges theme objects.
+ */
+export default function merge<T extends Record<string, unknown>>(
+  target: T,
+  ...sources: (Theme | CustomTheme)[]
+): T {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        merge(
+          target[key] as Record<string, unknown>,
+          source[key] as Record<string, unknown>
+        );
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+  return merge(target, ...sources);
+}
diff --git a/src/components/Visible/Visible.mdx b/src/components/Visible/Visible.mdx
index 13342628..f3c25b59 100644
--- a/src/components/Visible/Visible.mdx
+++ b/src/components/Visible/Visible.mdx
@@ -19,12 +19,14 @@ By default, `visible` will switch between `false` and `true` whenever the elemen
   import { Visible } from '@reuters-graphics/graphics-components';
 </script>
 
-<Visible let:visible>
-  {#if visible}
-    <p>Visible!</p>
-  {:else}
-    <p>Not yet visible.</p>
-  {/if}
+<Visible>
+  {#snippet children(visible)}
+    {#if visible}
+      <p>Visible!</p>
+    {:else}
+      <p>Not yet visible.</p>
+    {/if}
+  {/snippet}
 </Visible>
 ```
 
diff --git a/src/components/Visible/stories/snippets/default.svelte b/src/components/Visible/stories/snippets/default.svelte
deleted file mode 100644
index e84555a3..00000000
--- a/src/components/Visible/stories/snippets/default.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-  import { Visible } from '@reuters-graphics/graphics-components';
-</script>
-
-<Visible>
-  {#snippet children({ visible })}
-    {#if visible}
-      <p>Visible!</p>
-    {:else}
-      <p>Not yet visible.</p>
-    {/if}
-  {/snippet}
-</Visible>
diff --git a/src/globals.d.ts b/src/globals.d.ts
index 95acb207..d39fe602 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -32,4 +32,4 @@ declare global {
   }
 }
 
-export {};
+export { };
diff --git a/src/index.js b/src/index.js
index aaa8a3de..b0504362 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 // Actions
-export { default as cssVariables } from './actions/cssVariables/index.js';
-export { default as resizeObserver } from './actions/resizeObserver/index.js';
+export { default as cssVariables } from './actions/cssVariables/index';
+export { default as resizeObserver } from './actions/resizeObserver/index';
 
 // Components
 export {
@@ -28,7 +28,7 @@ export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svel
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
-export { pym } from './components/PymChild/state.svelte.js';
+export { pym } from './components/PymChild/state.svelte';
 export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
 export { default as ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
diff --git a/src/journalize.d.ts b/src/journalize.d.ts
new file mode 100644
index 00000000..4f37650c
--- /dev/null
+++ b/src/journalize.d.ts
@@ -0,0 +1,19 @@
+declare module 'journalize' {
+  /**
+   * Returns an AP-formatted date string that corresponds with the supplied
+   * Date. If an `input` is not passed, it will use the result of `new Date();`.
+   *
+   * @param date - The supplied Date
+   * @returns The converted date as a string
+   */
+  export function apdate(date?: Date): string;
+
+  /**
+   * Alters a string or number to include commas. If `val` is undefined or null,
+   * an empty string is returned.
+   *
+   * @param val The supplied value
+   * @returns The converted value
+   */
+  export function intcomma(val: number | string): string;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 9e966673..f627b3e6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
+    "lib": ["DOM", "ESNext"],
     "module": "ESNext",
     "target": "ESNext",
     "declaration": true,
@@ -30,6 +31,7 @@
     "*.ts",
     "*.js",
     "*.cjs",
+    "src/journalize.d.ts",
     "src/docs/**/*.css"
   ],
   "exclude": ["dist", "eslint.config.js", "bin/newComponent/template/**/*"]