From 042677856f3895f135d06d77510529f74d55149d Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Thu, 4 Jan 2024 17:30:48 +0000
Subject: [PATCH 1/9] lint workflow and eslint fixes

---
 .github/workflows/release.yaml                |  35 +++
 .vscode/settings.json                         |   2 +-
 package.json                                  |   7 +-
 src/components/Article/Article.stories.svelte |   3 +-
 src/components/BeforeAfter/BeforeAfter.svelte |  14 +-
 src/components/Block/Block.stories.svelte     |   3 +-
 .../BodyText/BodyText.stories.svelte          |  27 +-
 .../EmbedPreviewerLink.svelte                 |   5 +-
 src/components/Framer/Framer.svelte           |   2 +-
 src/components/Framer/Resizer/index.svelte    |   1 +
 src/components/Framer/Typeahead/index.svelte  |  41 +--
 .../Headline/stories/graphic.svelte           |   8 +-
 src/components/HeroHeadline/Hero.svelte       |  20 --
 .../stories/graphics/crash.svelte             |   2 +-
 .../stories/graphics/quakemap.svelte          |   6 -
 src/components/PhotoPack/docProps.ts          |  24 +-
 src/components/Scroller/Embedded/index.svelte |  22 +-
 .../components/ai2svelte/ai-scroller-2.svelte |   7 +-
 .../components/ai2svelte/ai-scroller-3.svelte |   7 +-
 .../basic/InteractiveForeground.svelte        |   6 +-
 .../stories/components/basic/Step.svelte      |  17 +-
 src/components/Sharer/Sharer.svelte           | 249 +++++++++---------
 src/components/Video/Controls.svelte          |   2 +-
 src/docs/docs-components/.eslintrc.cjs        |   2 +-
 src/docs/utils/docsPage.js                    |   4 +-
 src/index.js                                  |   4 +-
 tsconfig.json                                 |  70 ++---
 yarn.lock                                     | 138 ++++++----
 28 files changed, 389 insertions(+), 339 deletions(-)

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 92480385..5ecd6f85 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -6,6 +6,41 @@ on:
   workflow_dispatch:
 
 jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - id: checkout
+        name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.repository.default_branch }}
+
+      - id: setup-node
+        name: Setup Node.JS
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'yarn'
+
+      - id: cache
+        name: Cache node modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: yarn-deps-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            yarn-deps-${{ hashFiles('yarn.lock') }}
+
+      - id: install-deps
+        name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - id: lint
+        name: Lint code
+        run: yarn run eslint --ext .ts,.js,.svelte src
+
   release:
     name: Release
     runs-on: ubuntu-latest
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 84a3065a..eafbee6d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,7 +4,7 @@
   "eslint.validate": ["javascript", "svelte", "jsx"],
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "emmet.excludeLanguages": [
     "markdown",
diff --git a/package.json b/package.json
index aefa9448..5991485a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "scripts": {
     "start": "storybook dev -p 3000",
     "new": "node ./bin/newComponent/index.cjs",
+    "lint": "npx eslint --fix --ext .ts,.js,.svelte src",
     "build:package": "node ./bin/buildPackage/index.js",
     "build:chromatic": "storybook build -o docs",
     "build:docs": "storybook build -o docs && touch ./docs/.nojekyll",
@@ -68,8 +69,8 @@
     "colord": "^2.9.3",
     "css-color-converter": "^2.0.0",
     "deep-object-diff": "^1.1.9",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-jsx": "^11.0.0",
     "eslint-config-standard-react": "^13.0.0",
     "eslint-plugin-import": "^2.27.5",
@@ -78,7 +79,7 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-svelte": "^2.33.1",
+    "eslint-plugin-svelte": "^2.35.1",
     "fs-extra": "^11.1.1",
     "kleur": "^4.1.5",
     "mermaid": "^10.3.0",
diff --git a/src/components/Article/Article.stories.svelte b/src/components/Article/Article.stories.svelte
index 29877c43..efa0b4c4 100644
--- a/src/components/Article/Article.stories.svelte
+++ b/src/components/Article/Article.stories.svelte
@@ -75,8 +75,9 @@
   </Article>
 </Story>
 
+<!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
-  :global {
+  :global(html) {
     #article-story-basic,
     #article-column-widths-demo {
       width: calc(100% + 30px);
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index bdc26b7b..57bd34d4 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -79,6 +79,13 @@
   $: containerHeight =
     containerWidth && heightRatio ? containerWidth * heightRatio : height;
 
+  $: w = (imgOffset && imgOffset.width) || 0;
+  $: x = w * offset;
+  $: figStyle = `width:100%;height:${containerHeight}px;`;
+  $: imgStyle = 'width:100%;height:100%;';
+  $: beforeOverlayClip =
+    x < beforeOverlayWidth ? Math.abs(x - beforeOverlayWidth) : 0;
+
   const onFocus = () => (isFocused = true);
   const onBlur = () => (isFocused = false);
   const handleKeyDown = (e) => {
@@ -130,13 +137,6 @@
     sliding = false;
   };
 
-  $: w = (imgOffset && imgOffset.width) || 0;
-  $: x = w * offset;
-  $: figStyle = `width:100%;height:${containerHeight}px;`;
-  $: imgStyle = 'width:100%;height:100%;';
-  $: beforeOverlayClip =
-    x < beforeOverlayWidth ? Math.abs(x - beforeOverlayWidth) : 0;
-
   if (!(beforeSrc && beforeAlt && afterSrc && afterAlt)) {
     console.warn('Missing required src or alt props for BeforeAfter component');
   }
diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte
index 06798a0b..b56e6b87 100644
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@@ -115,8 +115,9 @@
   </Article>
 </Story>
 
+<!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
-  :global {
+  :global(html) {
     #block-demo-article {
       background-color: #ddd;
       position: relative;
diff --git a/src/components/BodyText/BodyText.stories.svelte b/src/components/BodyText/BodyText.stories.svelte
index 6330724d..5caf230c 100644
--- a/src/components/BodyText/BodyText.stories.svelte
+++ b/src/components/BodyText/BodyText.stories.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+  import { Template, Story } from '@storybook/addon-svelte-csf';
 
   // @ts-ignore
   import componentDocs from './stories/docs/component.md?raw';
@@ -7,13 +7,19 @@
   import BodyText from './BodyText.svelte';
 
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  export const meta = {
+    title: 'Components/BodyText',
+    component: BodyText,
+    ...withComponentDocs(componentDocs),
+  };
 </script>
 
-<Meta
+<!-- <Meta
   title="Components/BodyText"
   component="{BodyText}"
   {...withComponentDocs(componentDocs)}
-/>
+/> -->
 
 <Template let:args>
   <BodyText {...args} />
@@ -93,8 +99,9 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
   }}"
 />
 
+<!-- svelte-ignore css-unused-selector -->
 <style lang="scss" global>
-  %heading-tag {
+  @mixin heading-tag {
     position: absolute;
     top: 0;
     left: -50px;
@@ -118,7 +125,7 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
       position: relative;
       &:before {
         content: 'H2';
-        @extend %heading-tag;
+        @include heading-tag;
         font-size: 22px;
       }
     }
@@ -126,7 +133,7 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
       position: relative;
       &:before {
         content: 'H3';
-        @extend %heading-tag;
+        @include heading-tag;
         font-size: 19px;
       }
     }
@@ -134,7 +141,7 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
       position: relative;
       &:before {
         content: 'H4';
-        @extend %heading-tag;
+        @include heading-tag;
         font-size: 16px;
       }
     }
@@ -142,7 +149,7 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
       position: relative;
       &:before {
         content: 'H5';
-        @extend %heading-tag;
+        @include heading-tag;
         font-size: 15px;
       }
     }
@@ -150,14 +157,14 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
       position: relative;
       &:before {
         content: 'H6';
-        @extend %heading-tag;
+        @include heading-tag;
         font-size: 12px;
       }
     }
     blockquote {
       position: relative;
       &:before {
-        @extend %heading-tag;
+        @include heading-tag;
         content: '“';
         font-size: 3rem;
         line-height: 3rem;
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
index 29d24078..235b69c3 100644
--- a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
@@ -8,12 +8,11 @@
 {#if dev}
   <div>
     <a rel="external" href="/embed-previewer">
-      <Fa icon={faWindowRestore} />
+      <Fa icon="{faWindowRestore}" />
     </a>
   </div>
 {/if}
 
-
 <style lang="scss">
   div {
     position: fixed;
@@ -27,4 +26,4 @@
       }
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Framer/Framer.svelte b/src/components/Framer/Framer.svelte
index 683980e7..cdd9acbc 100644
--- a/src/components/Framer/Framer.svelte
+++ b/src/components/Framer/Framer.svelte
@@ -28,7 +28,7 @@
   $: embedTitles = getUniqNames(embeds);
 
   // @ts-ignore
-  let pymParent;
+  let pymParent; // eslint-disable-line no-unused-vars
 
   const reframe = (embed) => {
     // Bit of hack for handling adding query strings dynamically to embeds.
diff --git a/src/components/Framer/Resizer/index.svelte b/src/components/Framer/Resizer/index.svelte
index 7e950af5..92e2c6eb 100644
--- a/src/components/Framer/Resizer/index.svelte
+++ b/src/components/Framer/Resizer/index.svelte
@@ -106,6 +106,7 @@
       <div
         class="handle"
         tabindex="0"
+        role="button"
         style="left: calc({offset * 100}% - 5px);"
         on:mousedown="{start}"
         on:focus="{onFocus}"
diff --git a/src/components/Framer/Typeahead/index.svelte b/src/components/Framer/Typeahead/index.svelte
index e746d1dc..bce18aef 100644
--- a/src/components/Framer/Typeahead/index.svelte
+++ b/src/components/Framer/Typeahead/index.svelte
@@ -57,6 +57,23 @@
   let prevResults = '';
   let isFocused = false;
 
+  $: options = { pre: '<mark>', post: '</mark>', extract };
+  $: results =
+    value !== ''
+      ? fuzzy
+          .filter(value, data, options)
+          .filter(({ score }) => score > 0)
+          .slice(0, limit)
+          .filter((result) => !filter(result.original))
+          .map((result) => ({ ...result, disabled: disable(result.original) }))
+      : data.map((d) => ({ string: extract(d), original: d }));
+
+  $: resultsId = results.map((result) => extract(result.original)).join('');
+  $: showResults = !hideDropdown && results.length > 0 && isFocused;
+  $: if (showDropdownOnFocus) {
+    showResults = showResults && isFocused;
+  }
+
   afterUpdate(() => {
     if (prevResults !== resultsId && autoselect) {
       selectedIndex = getNextNonDisabledIndex();
@@ -137,23 +154,6 @@
 
   const open = () => (hideDropdown = false);
   const close = () => (hideDropdown = true);
-
-  $: options = { pre: '<mark>', post: '</mark>', extract };
-  $: results =
-    value !== ''
-      ? fuzzy
-          .filter(value, data, options)
-          .filter(({ score }) => score > 0)
-          .slice(0, limit)
-          .filter((result) => !filter(result.original))
-          .map((result) => ({ ...result, disabled: disable(result.original) }))
-      : data.map((d) => ({ string: extract(d), original: d }));
-
-  $: resultsId = results.map((result) => extract(result.original)).join('');
-  $: showResults = !hideDropdown && results.length > 0 && isFocused;
-  $: if (showDropdownOnFocus) {
-    showResults = showResults && isFocused;
-  }
 </script>
 
 <svelte:window
@@ -171,6 +171,7 @@
   aria-haspopup="listbox"
   aria-owns="{id}-listbox"
   class:dropdown="{results.length > 0}"
+  aria-controls="{id}-listbox"
   aria-expanded="{showResults ||
     (isFocused && value.length > 0 && results.length === 0)}"
   id="{id}-typeahead"
@@ -247,6 +248,12 @@
             selectedIndex = index;
             select();
           }}"
+          on:keyup="{(e) => {
+            if (e.key !== 'Enter') return;
+            if (result.disabled) return;
+            selectedIndex = index;
+            select();
+          }}"
           on:mouseenter="{() => {
             if (result.disabled) return;
             selectedIndex = index;
diff --git a/src/components/Headline/stories/graphic.svelte b/src/components/Headline/stories/graphic.svelte
index 6096a6f6..48d1cbd1 100644
--- a/src/components/Headline/stories/graphic.svelte
+++ b/src/components/Headline/stories/graphic.svelte
@@ -10,7 +10,7 @@
   // @ts-ignore
   import chartXl from './graphic-xl.png';
 
-  export let assetsPath = './';
+  // export let assetsPath = './';
   let width = null;
 </script>
 
@@ -22,7 +22,6 @@
       <div
         id="g-graphic-xs-img"
         class="g-aiImg"
-        alt=""
         style="{`background-image: url(${chartXs});`}"
       ></div>
       <div
@@ -90,7 +89,6 @@
       <div
         id="g-graphic-sm-img"
         class="g-aiImg"
-        alt=""
         style="{`background-image: url(${chartSm});`}"
       ></div>
       <div
@@ -215,7 +213,6 @@
       <div
         id="g-graphic-md-img"
         class="g-aiImg"
-        alt=""
         style="{`background-image: url(${chartMd});`}"
       ></div>
 
@@ -349,7 +346,6 @@
       <div
         id="g-graphic-lg-img"
         class="g-aiImg"
-        alt=""
         style="{`background-image: url(${chartLg});`}"
       ></div>
       <div
@@ -489,7 +485,6 @@
       <div
         id="g-graphic-xl-img"
         class="g-aiImg"
-        alt=""
         style="{`background-image: url(${chartXl});`}"
       ></div>
       <div
@@ -656,6 +651,7 @@
 
 <!-- Generated by ai2html v0.100.0 - 2023-08-23 14:09 -->
 <!-- ai file: graphic.ai -->
+<!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
   #g-graphic-box,
   #g-graphic-box .g-artboard {
diff --git a/src/components/HeroHeadline/Hero.svelte b/src/components/HeroHeadline/Hero.svelte
index 123c33c0..93debb0e 100644
--- a/src/components/HeroHeadline/Hero.svelte
+++ b/src/components/HeroHeadline/Hero.svelte
@@ -85,26 +85,6 @@
   import Block from '../Block/Block.svelte';
   import Byline from '../Byline/Byline.svelte';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
-
-  let hedClass;
-  $: {
-    switch (hedSize) {
-      case 'biggest':
-        hedClass = 'text-6xl';
-        break;
-      case 'bigger':
-        hedClass = 'text-5xl';
-        break;
-      case 'big':
-        hedClass = 'text-4xl';
-        break;
-      case 'small':
-        hedClass = 'text-2xl';
-        break;
-      default:
-        hedClass = 'text-3xl';
-    }
-  }
 </script>
 
 <div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">
diff --git a/src/components/HeroHeadline/stories/graphics/crash.svelte b/src/components/HeroHeadline/stories/graphics/crash.svelte
index 3cdc7a56..42f541f1 100644
--- a/src/components/HeroHeadline/stories/graphics/crash.svelte
+++ b/src/components/HeroHeadline/stories/graphics/crash.svelte
@@ -1,5 +1,5 @@
 <script>
-  export let assetsPath = './';
+  // export let assetsPath = './';
   let width = null;
 
   // @ts-ignore
diff --git a/src/components/HeroHeadline/stories/graphics/quakemap.svelte b/src/components/HeroHeadline/stories/graphics/quakemap.svelte
index fe156865..92e99354 100644
--- a/src/components/HeroHeadline/stories/graphics/quakemap.svelte
+++ b/src/components/HeroHeadline/stories/graphics/quakemap.svelte
@@ -1,5 +1,4 @@
 <script>
-  export let assetsPath = './';
   let width = null;
 
   // @ts-ignore
@@ -22,7 +21,6 @@
       <div
         id="g-quake-map-top-xs-img"
         class="g-aiImg"
-        alt=""
         style="{`background-image: url(${chartXs});`}"
       ></div>
       <div
@@ -104,7 +102,6 @@
       <div
         id="g-quake-map-top-sm-img"
         class="g-aiImg"
-        alt=""
         style="{`background-image: url(${chartSm});`}"
       ></div>
       <div
@@ -186,7 +183,6 @@
       <div
         id="g-quake-map-top-md-img"
         class="g-aiImg"
-        alt=""
         style="{`background-image: url(${chartMd});`}"
       ></div>
       <div
@@ -275,7 +271,6 @@
       <div
         id="g-quake-map-top-lg-img"
         class="g-aiImg"
-        alt=""
         style="{`background-image: url(${chartLg});`}"
       ></div>
       <div
@@ -364,7 +359,6 @@
       <div
         id="g-quake-map-top-xl-img"
         class="g-aiImg"
-        alt=""
         style="{`background-image: url(${chartXl});`}"
       ></div>
       <div
diff --git a/src/components/PhotoPack/docProps.ts b/src/components/PhotoPack/docProps.ts
index 67d45899..02fdfd45 100644
--- a/src/components/PhotoPack/docProps.ts
+++ b/src/components/PhotoPack/docProps.ts
@@ -33,24 +33,24 @@ export const getPhotoPackPropsFromDoc = (
     width: docBlock.Width,
     textWidth: docBlock.textWidth,
     gap:
-      docBlock.Gap && isNaN(docBlock.Gap as any)
-        ? null
-        : parseInt(docBlock.Gap),
+      docBlock.Gap && isNaN(docBlock.Gap as any) ?
+        null :
+        parseInt(docBlock.Gap),
     images: docBlock.Images.map((img) => ({
-      src: /^https?:\/\/|^\/\//i.test(img.Src)
-        ? img.Src
-        : urlJoin(assetsPath, img.Src),
+      src: /^https?:\/\/|^\/\//i.test(img.Src) ?
+        img.Src :
+        urlJoin(assetsPath, img.Src),
       altText: img.AltText,
       caption: img.Caption,
       maxHeight:
-        img.MaxHeight && isNaN(img.MaxHeight as any)
-          ? null
-          : parseFloat(img.MaxHeight),
+        img.MaxHeight && isNaN(img.MaxHeight as any) ?
+          null :
+          parseFloat(img.MaxHeight),
     })),
     layouts: docBlock.Layouts.map((layout) => ({
-      breakpoint: isNaN(layout.Breakpoint as any)
-        ? null
-        : parseFloat(layout.Breakpoint),
+      breakpoint: isNaN(layout.Breakpoint as any) ?
+        null :
+        parseFloat(layout.Breakpoint),
       rows: layout.Rows.split(',').map((r) => parseInt(r.trim())),
     })),
   };
diff --git a/src/components/Scroller/Embedded/index.svelte b/src/components/Scroller/Embedded/index.svelte
index 56da44dd..09c615c5 100644
--- a/src/components/Scroller/Embedded/index.svelte
+++ b/src/components/Scroller/Embedded/index.svelte
@@ -2,7 +2,7 @@
   import type { ContainerWidth, ScrollerStep } from '../../@types/global';
 
   export let steps: ScrollerStep[] = [];
-  
+
   type EmbeddedLayout = 'fb' | 'bf';
   export let embeddedLayout: EmbeddedLayout = 'fb';
 
@@ -15,11 +15,19 @@
 {#each steps as step, index}
   <!-- Background first -->
   {#if embeddedLayout === 'bf'}
-    <Background {step} {index} {backgroundWidth} />
-    <Foreground {step} {index} />
-  <!-- Foreground first, default -->
+    <Background
+      step="{step}"
+      index="{index}"
+      backgroundWidth="{backgroundWidth}"
+    />
+    <Foreground step="{step}" index="{index}" />
+    <!-- Foreground first, default -->
   {:else}
-    <Foreground {step} {index} />
-    <Background {step} {index} {backgroundWidth} />
+    <Foreground step="{step}" index="{index}" />
+    <Background
+      step="{step}"
+      index="{index}"
+      backgroundWidth="{backgroundWidth}"
+    />
   {/if}
-{/each}
\ No newline at end of file
+{/each}
diff --git a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte b/src/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte
index 7ec51777..3db94b79 100644
--- a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte
+++ b/src/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte
@@ -23,7 +23,6 @@
       <div
         id="g-step-2-xl-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepXl});"
       ></div>
       <div
@@ -43,7 +42,6 @@
       <div
         id="g-step-2-lg-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepLg});"
       ></div>
       <div
@@ -63,7 +61,6 @@
       <div
         id="g-step-2-md-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepMd});"
       ></div>
       <div
@@ -83,7 +80,6 @@
       <div
         id="g-step-2-sm-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepSm});"
       ></div>
       <div
@@ -103,7 +99,6 @@
       <div
         id="g-step-2-xs-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepXs});"
       ></div>
       <div
@@ -117,11 +112,11 @@
     </div>
   {/if}
 </div>
+
 <!-- End ai2html - 2021-09-30 14:20 -->
 
 <!-- ai file: step-2.ai -->
 
-<!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
   #g-step-2-box,
   #g-step-2-box .g-artboard {
diff --git a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte b/src/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte
index 4bc88d30..0829a58c 100644
--- a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte
+++ b/src/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte
@@ -23,7 +23,6 @@
       <div
         id="g-step-3-xl-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepXl});"
       ></div>
       <div
@@ -43,7 +42,6 @@
       <div
         id="g-step-3-lg-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepLg});"
       ></div>
       <div
@@ -63,7 +61,6 @@
       <div
         id="g-step-3-md-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepMd});"
       ></div>
       <div
@@ -83,7 +80,6 @@
       <div
         id="g-step-3-sm-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepSm});"
       ></div>
       <div
@@ -103,7 +99,6 @@
       <div
         id="g-step-3-xs-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepXs});"
       ></div>
       <div
@@ -117,11 +112,11 @@
     </div>
   {/if}
 </div>
+
 <!-- End ai2html - 2021-09-30 14:28 -->
 
 <!-- ai file: step-3.ai -->
 
-<!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
   #g-step-3-box,
   #g-step-3-box .g-artboard {
diff --git a/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte b/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
index 569f251e..31e721e8 100644
--- a/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
+++ b/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
@@ -6,4 +6,8 @@
 
 <p>The count is {count}</p>
 
-<button on:click="{() => { count += 1; }}">Click Me</button>
\ No newline at end of file
+<button
+  on:click="{() => {
+    count += 1;
+  }}">Click Me</button
+>
diff --git a/src/components/Scroller/stories/components/basic/Step.svelte b/src/components/Scroller/stories/components/basic/Step.svelte
index 332faf38..c8aed70a 100644
--- a/src/components/Scroller/stories/components/basic/Step.svelte
+++ b/src/components/Scroller/stories/components/basic/Step.svelte
@@ -1,13 +1,14 @@
 <script>
   export let colour = 'lightblue';
 </script>
-<div class='step' style={`background: ${colour};`}></div>
+
+<div class="step" style="{`background: ${colour};`}"></div>
 
 <style lang="scss">
-.step {
-  width: 100vw;
-  max-width: 100%;
-  margin: 0 auto;
-  height: 400px;
-}
-</style>
\ No newline at end of file
+  .step {
+    width: 100vw;
+    max-width: 100%;
+    margin: 0 auto;
+    height: 400px;
+  }
+</style>
diff --git a/src/components/Sharer/Sharer.svelte b/src/components/Sharer/Sharer.svelte
index 8651c74c..875e9c78 100644
--- a/src/components/Sharer/Sharer.svelte
+++ b/src/components/Sharer/Sharer.svelte
@@ -1,153 +1,150 @@
 <script>
-import Fa from 'svelte-fa/src/fa.svelte';
-import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faTwitter } from '@fortawesome/free-brands-svg-icons';
-import { faFacebookF } from '@fortawesome/free-brands-svg-icons';
-import { throttle } from 'lodash-es';
-import handleTweet from './utils/twitter';
-import handlePost from './utils/facebook';
-import UAParser from 'ua-parser-js';
-import { onMount } from 'svelte';
+  import Fa from 'svelte-fa/src/fa.svelte';
+  import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
+  import { faTwitter } from '@fortawesome/free-brands-svg-icons';
+  import { faFacebookF } from '@fortawesome/free-brands-svg-icons';
+  import { throttle } from 'lodash-es';
+  import handleTweet from './utils/twitter';
+  import handlePost from './utils/facebook';
+  import UAParser from 'ua-parser-js';
+  import { onMount } from 'svelte';
 
-const uaParser = new UAParser();
+  const uaParser = new UAParser();
 
-const getMetaContent = (property) => {
-  const el = document.querySelector(`meta[property="${property}"]`);
-  if (el) return el.getAttribute('content');
-  return '';
-};
-const handleShare = async function() {
-  if (showSecondaryDialogue) {
-    showSecondaryDialogue = false;
-    return;
-  }
-  if (
-    navigator &&
-    navigator.share &&
-    uaParser.getBrowser().name !== 'Safari'
-  ) {
-    try {
-      await navigator.share({
-        title: getMetaContent('og:title'),
-        text: getMetaContent('og:description'),
-        url: window.location.href,
-      });
-    } catch (err) {
-      console.log('Share error', err);
+  const getMetaContent = (property) => {
+    const el = document.querySelector(`meta[property="${property}"]`);
+    if (el) return el.getAttribute('content');
+    return '';
+  };
+  const handleShare = async function () {
+    if (showSecondaryDialogue) {
+      showSecondaryDialogue = false;
+      return;
     }
-  // Otherwise copy URL to a clipboard
-  } else {
-    showSecondaryDialogue = true;
-  }
-};
-let lastScroll = 0;
-let showShare = false;
-let showSecondaryDialogue = false;
-function handleScroll() {
-  if (lastScroll > window.scrollY) {
-    if (!showShare) {
-      showShare = true;
+    if (
+      navigator &&
+      navigator.share &&
+      uaParser.getBrowser().name !== 'Safari'
+    ) {
+      try {
+        await navigator.share({
+          title: getMetaContent('og:title'),
+          text: getMetaContent('og:description'),
+          url: window.location.href,
+        });
+      } catch (err) {
+        console.log('Share error', err);
+      }
+      // Otherwise copy URL to a clipboard
+    } else {
+      showSecondaryDialogue = true;
     }
-  } else {
-    if (showShare) {
-      if (showSecondaryDialogue) {
-        showSecondaryDialogue = false;
-      } else {
-        showShare = false;
+  };
+  let lastScroll = 0;
+  let showShare = false;
+  let showSecondaryDialogue = false;
+  function handleScroll() {
+    if (lastScroll > window.scrollY) {
+      if (!showShare) {
+        showShare = true;
+      }
+    } else {
+      if (showShare) {
+        if (showSecondaryDialogue) {
+          showSecondaryDialogue = false;
+        } else {
+          showShare = false;
+        }
       }
     }
+    lastScroll = window.scrollY;
   }
-  lastScroll = window.scrollY;
-}
-onMount(() => {
-  window.addEventListener('scroll', throttle(handleScroll, 250));
-});
+  onMount(() => {
+    window.addEventListener('scroll', throttle(handleScroll, 250));
+  });
 </script>
 
-
-<div class="sharetool" class:active={showShare}>
-  <div class="drawer" class:active={showSecondaryDialogue }>
+<div class="sharetool" class:active="{showShare}">
+  <div class="drawer" class:active="{showSecondaryDialogue}">
     <button
-      on:click={handleShare}
+      on:click="{handleShare}"
       title="Share this!"
-      disabled={showSecondaryDialogue}
-      class='box-shadow-low'
+      disabled="{showSecondaryDialogue}"
+      class="box-shadow-low"
     >
-      <div><Fa fw icon={faShareAlt} /></div>
+      <div><Fa fw icon="{faShareAlt}" /></div>
     </button>
-    <button on:click={handleTweet} title="Twitter">
-      <div><Fa fw icon={faTwitter} /></div>
+    <button on:click="{handleTweet}" title="Twitter">
+      <div><Fa fw icon="{faTwitter}" /></div>
     </button>
-    <button on:click={handlePost} title="Facebook">
-      <div><Fa fw icon={faFacebookF} /></div>
+    <button on:click="{handlePost}" title="Facebook">
+      <div><Fa fw icon="{faFacebookF}" /></div>
     </button>
   </div>
 </div>
 
-
 <style lang="scss">
-.sharetool.active {
-  bottom: 10px;
-}
-.sharetool {
-  position: fixed;
-  bottom: -5rem;
-  right: 10px;
-  transition: all 0.2s;
-  z-index: 9999;
-  
-}
-.sharetool button {
-  background: #333;
-  color: white;
-  border: 1px solid white;
-  border-radius: 50%;
-  font-size: 1.25rem;
-  text-align: center;
-  height: 2.25rem;
-  width: 2.25rem;
-  outline: none !important;
-  transition: color 0.2s;
-  cursor: pointer;
-  div {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .sharetool.active {
+    bottom: 10px;
+  }
+  .sharetool {
+    position: fixed;
+    bottom: -5rem;
+    right: 10px;
+    transition: all 0.2s;
+    z-index: 9999;
   }
-}
-.sharetool button:active {
-  transform: translate(1px, 1px);
-}
-.sharetool button:disabled {
-  background: white;
-  color: #ddd;
-  cursor: default;
-  box-shadow: none;
-  pointer-events: none;
-}
-.drawer {
-  width: calc(2.25rem + 4px);
-  overflow-x: hidden;
-  transition: width 0.2s;
-  white-space: nowrap;
-  padding: 2px;
-}
-.drawer.active {
-  width: calc(7.25rem + 4px);
-}
-@media only screen and (max-width: 600px) {
   .sharetool button {
-    font-size: 1.75rem;
-    height: 3rem;
-    width: 3rem;
+    background: #333;
+    color: white;
+    border: 1px solid white;
+    border-radius: 50%;
+    font-size: 1.25rem;
+    text-align: center;
+    height: 2.25rem;
+    width: 2.25rem;
+    outline: none !important;
+    transition: color 0.2s;
+    cursor: pointer;
+    div {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .sharetool button:active {
+    transform: translate(1px, 1px);
+  }
+  .sharetool button:disabled {
+    background: white;
+    color: #ddd;
+    cursor: default;
+    box-shadow: none;
+    pointer-events: none;
   }
   .drawer {
-    width: calc(3rem + 4px);
+    width: calc(2.25rem + 4px);
+    overflow-x: hidden;
+    transition: width 0.2s;
+    white-space: nowrap;
+    padding: 2px;
   }
   .drawer.active {
-    width: calc(9.5rem + 4px);
+    width: calc(7.25rem + 4px);
   }
-}
-</style>
\ No newline at end of file
+  @media only screen and (max-width: 600px) {
+    .sharetool button {
+      font-size: 1.75rem;
+      height: 3rem;
+      width: 3rem;
+    }
+    .drawer {
+      width: calc(3rem + 4px);
+    }
+    .drawer.active {
+      width: calc(9.5rem + 4px);
+    }
+  }
+</style>
diff --git a/src/components/Video/Controls.svelte b/src/components/Video/Controls.svelte
index 692a9665..b76e000d 100644
--- a/src/components/Video/Controls.svelte
+++ b/src/components/Video/Controls.svelte
@@ -29,7 +29,7 @@
 <button
   on:click="{forwardBtnClick}"
   style="
-    opacity: {controlsOpacity}; 
+    opacity: {controlsOpacity};
     top: {controlsPosition === 'top left' || controlsPosition === 'top right'
     ? `${10}px`
     : controlsPosition === 'center'
diff --git a/src/docs/docs-components/.eslintrc.cjs b/src/docs/docs-components/.eslintrc.cjs
index 899ce0ab..64af27da 100644
--- a/src/docs/docs-components/.eslintrc.cjs
+++ b/src/docs/docs-components/.eslintrc.cjs
@@ -31,6 +31,6 @@ module.exports = {
     ],
     'operator-linebreak': ['error', 'after'],
     'space-before-function-paren': ['error', 'never'],
-    'react/prop-types': 'never',
+    'react/prop-types': 0,
   },
 };
diff --git a/src/docs/utils/docsPage.js b/src/docs/utils/docsPage.js
index 594ab386..fbac88b0 100644
--- a/src/docs/utils/docsPage.js
+++ b/src/docs/utils/docsPage.js
@@ -8,6 +8,6 @@ export const parameters = {
     eject: { hidden: true },
     fullscreen: { hidden: true },
     'storybook/background': { hidden: true },
-    'storybook/outline': {hidden: true}
+    'storybook/outline': { hidden: true },
   },
-};
\ No newline at end of file
+};
diff --git a/src/index.js b/src/index.js
index d7666fd8..9aa5f77f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,7 @@ export { default as resizeObserver } from './actions/resizeObserver/index.js';
 // Components
 export {
   default as Analytics,
-  registerPageview,
+  registerPageview
 } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
@@ -43,7 +43,7 @@ export { default as Table } from './components/Table/Table.svelte';
 export {
   default as Theme,
   // @ts-ignore
-  themes,
+  themes
 } from './components/Theme/Theme.svelte';
 export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
 export { default as Video } from './components/Video/Video.svelte';
diff --git a/tsconfig.json b/tsconfig.json
index 18d57aa1..6d98ee92 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,41 +1,41 @@
 {
-	"compilerOptions": {
-		"module": "ESNext",
-		"target": "ESNext",
-		"declaration": true,
-		"isolatedModules": true,
-		"esModuleInterop": true,
-		"moduleResolution": "node",
-		"resolveJsonModule": true,
-		"allowJs": true,
-		"checkJs": true,
-		"emitDeclarationOnly": true,
-		"jsx": "react",
-		"baseUrl": ".",
-		"rootDir": ".",
-		"rootDirs": [".", "docs/docs-components"],
-		"outDir": "dist",
-		"paths": {
-			"$lib": ["src"],
-  		"$lib/*": ["src/*"],
-			"$docs": ["src/docs"],
-			"$docs/*": ["src/docs/*"]
-		},
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ESNext",
+    "declaration": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "checkJs": true,
+    "emitDeclarationOnly": true,
+    "jsx": "react",
+    "baseUrl": ".",
+    "rootDir": ".",
+    "rootDirs": [".", "docs/docs-components"],
+    "outDir": "dist",
+    "paths": {
+      "$lib": ["src"],
+      "$lib/*": ["src/*"],
+      "$docs": ["src/docs"],
+      "$docs/*": ["src/docs/*"]
+    },
     "sourceMap": true,
     "strict": false,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true
-	},
-	"include": [
-		"src/**/*.js",
-		"src/**/*.ts",
-		"src/**/*.svelte",
-		"src/**/*.jsx",
-		"bin/**/*.{js,cjs}",
-		"*.ts",
-		"*.js",
-		"*.cjs",
-		"src/docs/**/*.css"
-	],
-	"exclude": ["dist"]
+  },
+  "include": [
+    "src/**/*.js",
+    "src/**/*.ts",
+    "src/**/*.svelte",
+    "src/**/*.jsx",
+    "bin/**/*.{js,cjs}",
+    "*.ts",
+    "*.js",
+    "*.cjs",
+    "src/docs/**/*.css"
+  ],
+  "exclude": ["dist"]
 }
diff --git a/yarn.lock b/yarn.lock
index 43eede72..4e1a223b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@aashutoshrathi/word-wrap@^1.2.3":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
+  integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
+
 "@americanexpress/css-to-js@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@americanexpress/css-to-js/-/css-to-js-1.0.1.tgz#fcef058d9febcc492a1c941f71ac5177bc2c3f5d"
@@ -2332,6 +2337,11 @@
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.5.1.tgz#cdd35dce4fa1a89a4fd42b1599eb35b3af408884"
   integrity sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==
 
+"@eslint-community/regexpp@^4.6.1":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
+
 "@eslint/eslintrc@^1.0.5":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e"
@@ -2347,14 +2357,14 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/eslintrc@^2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.3.tgz#4910db5505f4d503f27774bf356e3704818a0331"
-  integrity sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.5.2"
+    espree "^9.6.0"
     globals "^13.19.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
@@ -2362,10 +2372,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@8.42.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.42.0.tgz#484a1d638de2911e6f5a30c12f49c7e4a3270fb6"
-  integrity sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw==
+"@eslint/js@8.56.0":
+  version "8.56.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b"
+  integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==
 
 "@evilmartians/lefthook@^1.3.10":
   version "1.3.10"
@@ -2430,12 +2440,12 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "^0.2.36"
 
-"@humanwhocodes/config-array@^0.11.10":
-  version "0.11.10"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
-  integrity sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==
+"@humanwhocodes/config-array@^0.11.13":
+  version "0.11.13"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"
+  integrity sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.1"
+    "@humanwhocodes/object-schema" "^2.0.1"
     debug "^4.1.1"
     minimatch "^3.0.5"
 
@@ -2458,6 +2468,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@humanwhocodes/object-schema@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
+  integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -4441,6 +4456,11 @@
     "@typescript-eslint/types" "5.59.9"
     eslint-visitor-keys "^3.3.0"
 
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
+
 "@yarnpkg/esbuild-plugin-pnp@^3.0.0-rc.10":
   version "3.0.0-rc.15"
   resolved "https://registry.yarnpkg.com/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.15.tgz#4e40e7d2eb28825c9a35ab9d04c363931d7c0e67"
@@ -6471,10 +6491,15 @@ escape-string-regexp@^5.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
 
-eslint-config-prettier@^8.8.0:
-  version "8.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz#bfda738d412adc917fd7b038857110efe98c9348"
-  integrity sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==
+eslint-compat-utils@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/eslint-compat-utils/-/eslint-compat-utils-0.1.2.tgz#f45e3b5ced4c746c127cf724fb074cd4e730d653"
+  integrity sha512-Jia4JDldWnFNIru1Ehx1H5s9/yxiRHY/TimCuUc0jNexew3cF1gI6CYZil1ociakfWO3rRqFjl1mskBblB3RYg==
+
+eslint-config-prettier@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
+  integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
 
 eslint-config-standard-jsx@^11.0.0:
   version "11.0.0"
@@ -6616,16 +6641,17 @@ eslint-plugin-storybook@^0.6.12:
     requireindex "^1.1.0"
     ts-dedent "^2.2.0"
 
-eslint-plugin-svelte@^2.33.1:
-  version "2.33.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-svelte/-/eslint-plugin-svelte-2.33.1.tgz#316dd89e007483154a0d8e49b32d4cebe0c6a0c9"
-  integrity sha512-veYmyjsbt8ikXdaa6pLsgytdlzJpZZKw9vRaQlRBNKaLNmrbsdJulwiWfcDZ7tYJdaVpRB4iDFn/fuPeebxUVg==
+eslint-plugin-svelte@^2.35.1:
+  version "2.35.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-svelte/-/eslint-plugin-svelte-2.35.1.tgz#7b1e3c263b09dbc9293c25fe02d03d309725d2b9"
+  integrity sha512-IF8TpLnROSGy98Z3NrsKXWDSCbNY2ReHDcrYTuXZMbfX7VmESISR78TWgO9zdg4Dht1X8coub5jKwHzP0ExRug==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
     debug "^4.3.1"
+    eslint-compat-utils "^0.1.2"
     esutils "^2.0.3"
-    known-css-properties "^0.28.0"
+    known-css-properties "^0.29.0"
     postcss "^8.4.5"
     postcss-load-config "^3.1.4"
     postcss-safe-parser "^6.0.0"
@@ -6646,7 +6672,7 @@ eslint-scope@5.1.1, eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.0.0:
+eslint-scope@^7.0.0, eslint-scope@^7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
   integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
@@ -6654,7 +6680,7 @@ eslint-scope@^7.0.0:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-scope@^7.1.0, eslint-scope@^7.2.0:
+eslint-scope@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.0.tgz#f21ebdafda02352f103634b96dd47d9f81ca117b"
   integrity sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==
@@ -6686,7 +6712,7 @@ eslint-visitor-keys@^2.0.0, eslint-visitor-keys@^2.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint-visitor-keys@^3.0.0:
+eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
@@ -6745,27 +6771,28 @@ eslint@8.4.1:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-eslint@^8.42.0:
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.42.0.tgz#7bebdc3a55f9ed7167251fe7259f75219cade291"
-  integrity sha512-ulg9Ms6E1WPf67PHaEY4/6E2tEn5/f7FXGzr3t9cBMugOmf1INYvuUwwh1aXQN4MfJ6a5K2iNwP3w4AColvI9A==
+eslint@^8.56.0:
+  version "8.56.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.56.0.tgz#4957ce8da409dc0809f99ab07a1b94832ab74b15"
+  integrity sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
-    "@eslint-community/regexpp" "^4.4.0"
-    "@eslint/eslintrc" "^2.0.3"
-    "@eslint/js" "8.42.0"
-    "@humanwhocodes/config-array" "^0.11.10"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.56.0"
+    "@humanwhocodes/config-array" "^0.11.13"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
-    ajv "^6.10.0"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
     debug "^4.3.2"
     doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.2.0"
-    eslint-visitor-keys "^3.4.1"
-    espree "^9.5.2"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
     esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
@@ -6775,7 +6802,6 @@ eslint@^8.42.0:
     globals "^13.19.0"
     graphemer "^1.4.0"
     ignore "^5.2.0"
-    import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
     is-path-inside "^3.0.3"
@@ -6785,9 +6811,8 @@ eslint@^8.42.0:
     lodash.merge "^4.6.2"
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
-    optionator "^0.9.1"
+    optionator "^0.9.3"
     strip-ansi "^6.0.1"
-    strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
 espree@9.2.0:
@@ -6799,7 +6824,7 @@ espree@9.2.0:
     acorn-jsx "^5.3.1"
     eslint-visitor-keys "^3.1.0"
 
-espree@^9.0.0:
+espree@^9.0.0, espree@^9.6.0, espree@^9.6.1:
   version "9.6.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
   integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
@@ -6817,15 +6842,6 @@ espree@^9.2.0, espree@^9.4.0:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.4.0"
 
-espree@^9.5.2:
-  version "9.5.2"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.5.2.tgz#e994e7dc33a082a7a82dceaf12883a829353215b"
-  integrity sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==
-  dependencies:
-    acorn "^8.8.0"
-    acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.4.1"
-
 esprima@^4.0.0, esprima@~4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
@@ -8254,10 +8270,10 @@ kleur@^4.0.3, kleur@^4.1.5:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
-known-css-properties@^0.28.0:
-  version "0.28.0"
-  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.28.0.tgz#8a8be010f368b3036fe6ab0ef4bbbed972bd6274"
-  integrity sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==
+known-css-properties@^0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.29.0.tgz#e8ba024fb03886f23cb882e806929f32d814158f"
+  integrity sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==
 
 layout-base@^1.0.0:
   version "1.0.2"
@@ -9402,6 +9418,18 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
+optionator@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
+  integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
+  dependencies:
+    "@aashutoshrathi/word-wrap" "^1.2.3"
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+
 ora@^5.4.1:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/ora/-/ora-5.4.1.tgz#1b2678426af4ac4a509008e5e4ac9e9959db9e18"

From 18fc7ba4d2cdfe4a69f63cc824341a2b8c222f77 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Thu, 4 Jan 2024 17:33:37 +0000
Subject: [PATCH 2/9] continue using meta

---
 src/components/BodyText/BodyText.stories.svelte | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/BodyText/BodyText.stories.svelte b/src/components/BodyText/BodyText.stories.svelte
index 5caf230c..3662fcee 100644
--- a/src/components/BodyText/BodyText.stories.svelte
+++ b/src/components/BodyText/BodyText.stories.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
   // @ts-ignore
   import componentDocs from './stories/docs/component.md?raw';
@@ -7,19 +7,13 @@
   import BodyText from './BodyText.svelte';
 
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
-    title: 'Components/BodyText',
-    component: BodyText,
-    ...withComponentDocs(componentDocs),
-  };
 </script>
 
-<!-- <Meta
+<Meta
   title="Components/BodyText"
   component="{BodyText}"
   {...withComponentDocs(componentDocs)}
-/> -->
+/>
 
 <Template let:args>
   <BodyText {...args} />

From 120ac0637f68d46ad4060e24018208cbd4f013d0 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Thu, 4 Jan 2024 17:44:24 +0000
Subject: [PATCH 3/9] eslint

---
 .github/workflows/release.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 5ecd6f85..90b50806 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -39,7 +39,7 @@ jobs:
 
       - id: lint
         name: Lint code
-        run: yarn run eslint --ext .ts,.js,.svelte src
+        run: yarn run eslint --fix --ext .ts,.js,.svelte src
 
   release:
     name: Release

From 7a2c5d90407349cf46a073b56b541b724f8c5cd7 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Thu, 4 Jan 2024 17:52:37 +0000
Subject: [PATCH 4/9] just lint components

---
 .github/workflows/release.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 90b50806..83afed95 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -21,7 +21,7 @@ jobs:
         name: Setup Node.JS
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'yarn'
 
       - id: cache
@@ -39,7 +39,7 @@ jobs:
 
       - id: lint
         name: Lint code
-        run: yarn run eslint --fix --ext .ts,.js,.svelte src
+        run: yarn run eslint --fix --ext .ts,.js,.svelte src/components
 
   release:
     name: Release

From 2023040a645b95781fac03be0ee9e3a05af929cb Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Thu, 4 Jan 2024 18:02:04 +0000
Subject: [PATCH 5/9] silly ref

---
 .github/workflows/release.yaml | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 83afed95..32678909 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -13,15 +13,12 @@ jobs:
       - id: checkout
         name: Checkout repository
         uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-          ref: ${{ github.event.repository.default_branch }}
 
       - id: setup-node
         name: Setup Node.JS
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 16
           cache: 'yarn'
 
       - id: cache

From 14b832963d2e8aa4248c5b6529fb3502705e691c Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Thu, 4 Jan 2024 18:05:17 +0000
Subject: [PATCH 6/9] build package on pre-hook

---
 lefthook.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lefthook.yml b/lefthook.yml
index 325b89b4..85d83b17 100644
--- a/lefthook.yml
+++ b/lefthook.yml
@@ -6,3 +6,5 @@ pre-commit:
     prettier:
       glob: 'src/**/*.{js,scss,md,svelte}'
       run: npx prettier --write {staged_files} && git add .
+    build:
+      run: npm run build:package

From cc53f626b600a5590c7a1a8e6c4c5acba9bc20df Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Thu, 4 Jan 2024 18:17:54 +0000
Subject: [PATCH 7/9] commit build in canary

---
 .github/workflows/canary.yaml | 8 ++++++++
 lefthook.yml                  | 2 --
 package.json                  | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/canary.yaml b/.github/workflows/canary.yaml
index 7bf7a3d9..5c32ebaa 100644
--- a/.github/workflows/canary.yaml
+++ b/.github/workflows/canary.yaml
@@ -52,6 +52,14 @@ jobs:
         name: Build package
         run: npm run build:package
 
+      - id: commit
+        name: Commit
+        run: |
+          git config --global user.name github-actions
+          git config --global user.email github-actions@github.com
+          git add .
+          git commit -m "built package"
+
       - id: canary-release
         name: Create Canary Release
         env:
diff --git a/lefthook.yml b/lefthook.yml
index 85d83b17..325b89b4 100644
--- a/lefthook.yml
+++ b/lefthook.yml
@@ -6,5 +6,3 @@ pre-commit:
     prettier:
       glob: 'src/**/*.{js,scss,md,svelte}'
       run: npx prettier --write {staged_files} && git add .
-    build:
-      run: npm run build:package
diff --git a/package.json b/package.json
index 5991485a..af78695e 100644
--- a/package.json
+++ b/package.json
@@ -362,4 +362,4 @@
     "url": "https://github.com/reuters-graphics/graphics-components/issues"
   },
   "readme": "ERROR: No README data found!"
-}
+}
\ No newline at end of file

From cd6d44779cfb79a355398acb49e0716981ab2214 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Thu, 4 Jan 2024 18:19:55 +0000
Subject: [PATCH 8/9] allow empty commit in canary workflow

---
 .github/workflows/canary.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/canary.yaml b/.github/workflows/canary.yaml
index 5c32ebaa..14f19671 100644
--- a/.github/workflows/canary.yaml
+++ b/.github/workflows/canary.yaml
@@ -58,7 +58,7 @@ jobs:
           git config --global user.name github-actions
           git config --global user.email github-actions@github.com
           git add .
-          git commit -m "built package"
+          git commit --allow-empty -m "built package"
 
       - id: canary-release
         name: Create Canary Release

From 74a23d4286ee38e9bade64505d112fc6cd3541f2 Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Thu, 4 Jan 2024 18:20:50 +0000
Subject: [PATCH 9/9] built package