Merge branch 'main' into greg-ads

2024-01-04 19:31:15 +00:00 · 2024-01-04 19:31:15 +00:00 · 4591bae789
commit 4591bae789
parent de2b32a404 f01a6cc9aa
28 changed files with 385 additions and 336 deletions
--- 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 --allow-empty -m "built package"
+
      - id: canary-release
        name: Create Canary Release
        env:
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@ -6,6 +6,38 @@ on:
  workflow_dispatch:

 jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - id: checkout
+        name: Checkout repository
+        uses: actions/checkout@v3
+
+      - 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 --fix --ext .ts,.js,.svelte src/components
+
  release:
    name: Release
    runs-on: ubuntu-latest
--- 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",
--- 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",
@ -361,4 +362,4 @@
    "url": "https://github.com/reuters-graphics/graphics-components/issues"
  },
  "readme": "ERROR: No README data found!"
-}
+}
--- 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);
--- 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');
  }
--- 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;
--- a/src/components/BodyText/BodyText.stories.svelte
+++ b/src/components/BodyText/BodyText.stories.svelte
@ -93,8 +93,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 +119,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 +127,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 +135,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 +143,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 +151,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;
--- 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>
+</style>
--- 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.
--- 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}"
--- 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;
--- 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
@ -657,6 +652,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 {
--- 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;">
--- 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
--- 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
--- 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())),
    })),
  };
--- 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}
+{/each}
--- 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 {
--- 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 {
--- 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>
+<button
+  on:click="{() => {
+    count += 1;
+  }}">Click Me</button
+>
--- 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>
+  .step {
+    width: 100vw;
+    max-width: 100%;
+    margin: 0 auto;
+    height: 400px;
+  }
+</style>
--- 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>
+  @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>
--- 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,
  },
 };
--- 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 },
  },
-};
+};
--- 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 AdScripts } from './components/AdSlot/AdScripts.svelte';
@ -45,7 +45,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';
--- 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"]
 }
--- 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"