@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/index.js

@@ -1,12 +1,8 @@
 // Actions
-export { default as cssVariables } from './actions/cssVariables/index.js';
-export { default as resizeObserver } from './actions/resizeObserver/index.js';
-
+export { default as cssVariables } from './actions/cssVariables/index';
+export { default as resizeObserver } from './actions/resizeObserver/index';
 // Components
-export {
-  default as Analytics,
-  registerPageview,
-} from './components/Analytics/Analytics.svelte';
+export { default as Analytics, registerPageview, } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';
 export { default as AdScripts } from './components/AdSlot/AdScripts.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
@@ -20,18 +16,15 @@ export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.
 export { default as Framer } from './components/Framer/Framer.svelte';
 export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';
-export { default as HeroHeadline } from './components/HeroHeadline/Hero.svelte';
+export { default as HeroHeadline } from './components/HeroHeadline/HeroHeadline.svelte';
 export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
 export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
 export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svelte';
-export { default as Markdown } from './components/Markdown/Markdown.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
-export { default as PhotoCarousel } from './components/PhotoCarousel/PhotoCarousel.svelte';
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
-export { pymChildStore } from './components/PymChild/stores.js';
-export { staticMarkdown } from './components/Markdown/stores.js';
+export { pym } from './components/PymChild/state.svelte';
 export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
 export { default as ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';

package/dist/journalize.d.ts

@@ -0,0 +1,19 @@
+declare module 'journalize' {
+  /**
+   * Returns an AP-formatted date string that corresponds with the supplied
+   * Date. If an `input` is not passed, it will use the result of `new Date();`.
+   *
+   * @param date - The supplied Date
+   * @returns The converted date as a string
+   */
+  export function apdate(date?: Date): string;
+
+  /**
+   * Alters a string or number to include commas. If `val` is undefined or null,
+   * an empty string is returned.
+   *
+   * @param val The supplied value
+   * @returns The converted value
+   */
+  export function intcomma(val: number | string): string;
+}

package/dist/scss/tokens/text/mixins/_font-family.scss

@@ -56,7 +56,8 @@
   font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif !important;
 }
 @mixin \!font-knowledge {
-  font-family: 'Knowledge', 'Source Sans Pro', Arial, Helvetica, sans-serif !important;
+  font-family:
+    'Knowledge', 'Source Sans Pro', Arial, Helvetica, sans-serif !important;
 }
 @mixin \!font-freight-text {
   font-family: 'FreightText', serif !important;

package/dist/utils/index.d.ts

@@ -0,0 +1,6 @@
+/** Helper function to generate a random 4-character string */
+export declare const random4: () => string;
+/**
+ * Custom function that returns an author page URL.
+ */
+export declare const getAuthorPageUrl: (author: string) => string;

package/dist/utils/index.js

@@ -0,0 +1,12 @@
+import slugify from 'slugify';
+/** Helper function to generate a random 4-character string */
+export const random4 = () => Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+/**
+ * Custom function that returns an author page URL.
+ */
+export const getAuthorPageUrl = (author) => {
+    const authorSlug = slugify(author.trim(), { lower: true });
+    return `https://www.reuters.com/authors/${authorSlug}/`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -17,102 +17,83 @@
     "dist"
   ],
   "engines": {
-    "node": ">=18.20"
+    "node": ">=20.18"
   },
   "peerDependencies": {
-    "svelte": ">=4"
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.10",
-    "@chromatic-com/storybook": "^1.7.0",
-    "@reuters-graphics/yaks-eslint": "^0.0.6",
-    "@reuters-graphics/yaks-prettier": "^0.0.4",
-    "@storybook/addon-actions": "^8.4.4",
-    "@storybook/addon-backgrounds": "^8.4.4",
-    "@storybook/addon-controls": "^8.4.4",
-    "@storybook/addon-docs": "^8.4.4",
-    "@storybook/addon-interactions": "^8.4.4",
-    "@storybook/addon-links": "^8.4.4",
-    "@storybook/addon-mdx-gfm": "^8.4.4",
-    "@storybook/addon-measure": "^8.4.4",
-    "@storybook/addon-outline": "^8.4.4",
-    "@storybook/addon-svelte-csf": "^4.1.7",
-    "@storybook/addon-toolbars": "^8.4.4",
-    "@storybook/addon-viewport": "^8.4.4",
-    "@storybook/blocks": "^8.4.4",
-    "@storybook/builder-vite": "^8.4.4",
-    "@storybook/components": "^8.4.4",
-    "@storybook/csf": "^0.1.12",
-    "@storybook/manager-api": "^8.4.4",
-    "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/svelte": "^8.4.4",
-    "@storybook/svelte-vite": "^8.4.4",
-    "@storybook/test": "^8.4.4",
-    "@storybook/theming": "^8.4.4",
-    "@sveltejs/package": "^2.3.4",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@changesets/cli": "^2.29.2",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@reuters-graphics/yaks-eslint": "^0.1.1",
+    "@reuters-graphics/yaks-prettier": "^0.1.1",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-svelte-csf": "5.0.0-next.28",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/components": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/svelte": "^8.6.12",
+    "@storybook/sveltekit": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/css": "^0.0.37",
-    "@types/eslint": "^9.6.0",
+    "@types/eslint": "^9.6.1",
     "@types/fs-extra": "^11.0.4",
-    "@types/google-publisher-tag": "^1.20240219.0",
+    "@types/google-publisher-tag": "^1.20250210.0",
     "@types/gtag.js": "^0.0.12",
     "@types/lodash-es": "^4.17.12",
-    "@types/mdx": "^2.0.5",
-    "@types/node": "^22.9.1",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^22.14.1",
     "@types/prompts": "^2.4.9",
-    "@types/proper-url-join": "^2.1.1",
+    "@types/proper-url-join": "^2.1.5",
     "@types/pym.js": "^1.3.2",
-    "@types/react": "^18.3.12",
-    "@types/react-syntax-highlighter": "^15.5.7",
-    "change-case": "^4.1.2",
-    "chromatic": "^7.1.0",
+    "@types/react": "^18.3.20",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "chromatic": "^11.28.2",
     "css": "^3.0.0",
     "css-color-converter": "^2.0.0",
     "deep-object-diff": "^1.1.9",
-    "eslint": "9.14.0",
-    "eslint-plugin-mdx": "^3.1.5",
-    "eslint-plugin-react": "^7.37.2",
-    "fs-extra": "^11.1.1",
-    "kleur": "^4.1.5",
-    "knip": "^5.27.2",
-    "mermaid": "^10.9.1",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.41",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
+    "eslint": "^9.25.0",
+    "eslint-plugin-mdx": "^3.4.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-storybook": "^0.12.0",
+    "knip": "^5.50.5",
+    "mermaid": "^10.9.3",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.3.3",
     "prism-themes": "^1.9.0",
-    "prompts": "^2.4.2",
     "prop-types": "^15.8.1",
-    "publint": "^0.2.10",
-    "react": "^18.2.0",
+    "publint": "^0.3.12",
+    "react": "^18.3.1",
     "react-colorful": "^5.6.1",
-    "react-dom": "^18.2.0",
-    "react-syntax-highlighter": "^15.5.0",
-    "remark-gfm": "^4.0.0",
-    "rimraf": "^5.0.0",
-    "sass": "^1.81.0",
-    "storybook": "^8.4.4",
-    "svelte": "^4.2.18",
-    "svelte-loader": "^3.2.3",
-    "tiny-glob": "^0.2.9",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.2"
+    "react-dom": "^18.3.1",
+    "react-syntax-highlighter": "^15.6.1",
+    "rimraf": "^6.0.1",
+    "sass": "^1.86.3",
+    "storybook": "^8.6.12",
+    "svelte": "^5.28.1",
+    "svelte-check": "^4.1.6",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.2"
   },
   "dependencies": {
-    "@fortawesome/free-regular-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@splidejs/svelte-splide": "^0.2.9",
-    "@sveltejs/svelte-scroller": "^2.0.7",
-    "dayjs": "^1.11.3",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@reuters-graphics/svelte-markdown": "^0.0.3",
+    "@sveltejs/kit": "^2.0.0",
+    "dayjs": "^1.11.13",
+    "es-toolkit": "^1.35.0",
     "journalize": "^2.6.0",
-    "lodash-es": "^4.17.21",
-    "marked": "^4.0.8",
-    "proper-url-join": "^2.1.1",
+    "proper-url-join": "^2.1.2",
     "pym.js": "^1.3.2",
     "slugify": "^1.6.6",
-    "svelte-fa": "^2.4.0",
-    "svelte-intersection-observer": "^0.10.0",
-    "svelte-search": "^2.0.1"
+    "svelte-fa": "^4.0.3",
+    "svelte-intersection-observer": "^1.0.0"
   },
   "exports": {
     ".": {
@@ -129,11 +110,12 @@
   },
   "scripts": {
     "start": "storybook dev -p 3000",
-    "new": "node ./bin/newComponent/index.cjs",
     "lint": "eslint --fix",
     "format": "prettier . --write",
     "build": "rimraf ./dist && svelte-package -i ./src && publint",
     "build:docs": "storybook build -o docs",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "changeset:version": "changeset version",
     "changeset:publish": "git add --all && changeset publish",
     "knip": "knip"

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

@@ -1,11 +0,0 @@
-Add Google and Chartbeat analytics to your page.
-
-```svelte
-<script>
-  import { Analytics } from '@reuters-graphics/graphics-components';
-
-  const authors = [{ name: 'Jane Doe' }, { name: 'John Doe' }];
-</script>
-
-<Analytics authors="{authors}" />
-```

package/dist/components/Analytics/stories/docs/environments.md

@@ -1,17 +0,0 @@
-Generally, you only want to send page analytics in production environments.
-
-In a SvelteKit context, you can use `$app` stores to restrict when you send analytics.
-
-For example, the following excludes analytics from pages in development or hosted on our preview server:
-
-```svelte
-<script>
-  import { Analytics } from '@reuters-graphics/graphics-components';
-  import { dev } from '$app/environment';
-  import { page } from '$app/stores';
-</script>
-
-{#if !dev && $page.url?.hostname !== 'graphics.thomsonreuters.com'}
-  <Analytics />
-{/if}
-```

package/dist/components/Analytics/stories/docs/multipage.md

@@ -1,31 +0,0 @@
-If you're using analytics to measure a multipage newsapp that uses [client-side routing](https://kit.svelte.dev/docs/glossary#routing), then you may need to trigger analytics after virtual page navigation.
-
-This component also exports a function you can call to register pageviews.
-
-For example, here's how you can use SvelteKit's [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) lifecycle to capture additional pageviews:
-
-```svelte
-<script>
-  import {
-    Analytics,
-    registerPageview,
-  } from '@reuters-graphics/graphics-components';
-  import { afterNavigate } from '$app/navigation';
-
-  let isFirstPageview = true;
-
-  afterNavigate(() => {
-    // We shouldn't fire on initial page load because the Analytics component
-    // already registers a reader's first pageview. After this component
-    // has initially mounted, we can be sure that further navigation is virtual
-    // and register pageviews using this function.
-    if (!isFirstPageview) {
-      registerPageview();
-    } else {
-      isFirstPageview = false;
-    }
-  });
-</script>
-
-<Analytics />
-```

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

@@ -1,13 +0,0 @@
-The `Article` component contains all the content of our story and also establishes the dimensions of our article well, the default central trunk of our page layout.
-
-> 📌 In most cases, **you won't need to mess with the `Article` component** because it's already included in our rigs for you!
-
-```svelte
-<script>
-  import { Article } from '@reuters-graphics/graphics-components';
-</script>
-
-<Article>
-  <!-- The story stuff goes in here! -->
-</Article>
-```

package/dist/components/Article/stories/docs/customWellWidths.md

@@ -1,87 +0,0 @@
-The `Article` component also creates several column dimensions inside our article well. The standard widths of columns follow a basic class scheme:
-
-- `narrower` A bit narrower than narrow...
-- `narrow` A bit narrower than the text column
-- `normal` **The main width of the body text column**
-- `wide` A bit wider than the text column
-- `wider` A bit wider than wide...
-- `widest` Edge-to-edge, but _excluding_ the left and right padding on `Article`
-- `fluid` Fully edge-to-edge
-
-When combined with the `Block` component, you can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` column widths.
-
-> **For most pages, you shouldn't customise the column widths.** Other tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside your code. The main exception is SREP stories.
-
-```svelte
-<Article
-  columnWidths="{{
-    narrower: 310,
-    narrow: 450,
-    normal: 550,
-    wide: 675,
-    wider: 1400,
-  }}"
->
-  <Block width="narrower" />
-  <Block width="narrow" />
-  <Block width="normal" />
-  <Block width="wide" />
-  <Block width="wider" />
-  <Block width="widest" />
-  <Block width="fluid" />
-</Article>
-```
-
-If you're not using our `Block` component, you can still inherit the column widths from `Article` to create your own custom container with the article well dimensions by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this:
-
-```svelte
-<div class="my-special-container">
-  <!-- Stuffs... -->
-</div>
-
-<style lang="scss">
-  div.my-special-container {
-    max-width: var(--wide-column-width);
-  }
-</style>
-```
-
-... or you can make your component entirely configurable within the article well doing something like this:
-
-```svelte
-<script>
-  export let width = 'normal';
-</script>
-
-<div class="my-special-container {width}">
-  <!-- Stuffs... -->
-</div>
-
-<style lang="scss">
-  div.my-special-container {
-    max-width: var(--normal-column-width);
-    &.narrower {
-      max-width: var(--narrower-column-width);
-    }
-    &.narrow {
-      max-width: var(--narrow-column-width);
-    }
-    &.wide {
-      max-width: var(--wide-column-width);
-    }
-    &.wider {
-      max-width: var(--wider-column-width);
-    }
-    &.widest {
-      max-width: 100%;
-    }
-    &.fluid {
-      width: calc(100% + 30px);
-      margin-left: -15px;
-      max-width: none;
-    }
-  }
-</style>
-```
-
-Here's an example of how custom\* `columnWidths` can be used to change the article well columns:

package/dist/components/BeforeAfter/stories/docs/ariaDescriptions.md

@@ -1,35 +0,0 @@
-Use text elements in your overlays as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your images by setting an ID on text elements within each overlay with the `description` [slot prop](https://svelte.dev/tutorial/slot-props).
-
-> **💡 TIP:** You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but you can use these descriptions to provide more information or context that the reader might also need.
-
-```svelte
-  <BeforeAfter
-    beforeSrc="{beforeImg}"
-    beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-    afterSrc="{afterImg}"
-    afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
-  >
-    <div slot="beforeOverlay" class="overlay p-3 before">
-      <p class="h4 font-bold">July 7, 2020</p>
-      <p class="body-note">Initially, this site was far smaller.</p>
-    </div>
-    <div slot="afterOverlay" class="overlay p-3 after">
-      <p class="h4 font-bold">Oct. 20, 2020</p>
-      <p class="body-note">But then forces built up.</p>
-    </div>
-    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
-  </BeforeAfter>
-
-  <style lang="scss">
-    .overlay {
-      background: rgba(0, 0, 0, 0.45);
-      max-width: 350px;
-      &.after {
-        text-align: right;
-      }
-      p {
-        color: #ffffff;
-      }
-    }
-  </style>
-```

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

@@ -1,15 +0,0 @@
-A before and after image comparison component.
-
-```svelte
-<script>
-  import { BeforeAfter } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // If using in the Graphics Kit
-</script>
-
-<BeforeAfter
-  beforeSrc="{`${assets}/images/before-after/myrne-before.jpg`}"
-  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-  afterSrc="{`${assets}/images/before-after/myrne-after.jpg`}"
-  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
-/>
-```

package/dist/components/BeforeAfter/stories/docs/withOverlays.md

@@ -1,33 +0,0 @@
-Add overlays with the `beforeOverlay` and `afterOverlay` slots and a caption to the `caption` slot, then style these elements to match your page design as below.
-
-```svelte
-<BeforeAfter
-  beforeSrc="{beforeImg}"
-  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-  afterSrc="{afterImg}"
-  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
->
-  <div slot="beforeOverlay" class="overlay p-3 before">
-    <p class="h4 font-bold">July 7, 2020</p>
-    <p class="body-note">Initially, this site was far smaller.</p>
-  </div>
-  <div slot="afterOverlay" class="overlay p-3 after">
-    <p class="h4 font-bold">Oct. 20, 2020</p>
-    <p class="body-note">But then forces built up.</p>
-  </div>
-  <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
-</BeforeAfter>
-
-<style lang="scss">
-  .overlay {
-    background: rgba(0, 0, 0, 0.45);
-    max-width: 350px;
-    &.after {
-      text-align: right;
-    }
-    p {
-      color: #ffffff;
-    }
-  }
-</style>
-```

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

@@ -1,15 +0,0 @@
-The `Block` component is the basic building block of stories, a responsive container that wraps each section of your piece.
-
-Blocks are stacked vertically within the well created by the [`Article`](./?path=/docs/layout-article) component. They can have different widths on larger screens depending on the `width` prop.
-
-> 📌 Many of our other components already use the `Block` component, internally. You'll usually only need to use it yourself if you're making something custom.
-
-```svelte
-<script>
-  import { Block } from '@reuters-graphics/graphics-components';
-</script>
-
-<Block width="normal">
-  <!-- Your stuff for this block -->
-</Block>
-```

package/dist/components/Block/stories/docs/customLayouts.md

@@ -1,13 +0,0 @@
-Our article well is designed to provide a basic responsive layout for you, but it's also made to get out of the way quickly when you need to do something custom.
-
-If you need to get really radical, the easiest way is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework.
-
-```svelte
-<Block width="fluid">
-  <div class="my-radical-container">
-    <!-- Now, you have full control! -->
-  </div>
-</Block>
-```
-
-The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

package/dist/components/Block/stories/docs/snapWidths.md

@@ -1,50 +0,0 @@
-Normally, `Block` containers resize fluidly below the original `width`. Sometimes, though, you may want the container to snap to the next breakpoint -- for example, if you have a static graphic that looks fine at the set block breakpoints, but isn't so great at widths inbetween.
-
-You can use the `snap` prop to force the container to snap to each block width successively as the window sizes down.
-
-```svelte
-<Block width="wider" snap="{true}">
-  <!-- Your stuff for this block -->
-</Block>
-```
-
-If you want to skip certain block widths entirely, you can add one or more class of `skip-{block width class}` to the `Block`.
-
-```svelte
-<!-- Will skip wide and go straight to normal column width on resize. -->
-<Block width="wider" snap="{true}" class="skip-wide">
-  <!-- Your stuff for this block -->
-</Block>
-```
-
-This is probably easier to see in action than explain in words, so resize the window to get a better picture of how it all works.
-
-> **NOTE:** The snap width breakpoints only work on `Block` components with widths `wider` and below. `widest` and `fluid` are both **always** fluid, since they go edge-to-edge.
-
-#### Using with custom column widths
-
-Snap width breakpoints are hard-coded to the default article well column widths, so if you set custom `columnWidths` on the `Article` tag (**rare!**), you can't use this functionality without a little extra work.
-
-Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Now, defined a few SCSS variables corresponding to your custom column widths and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints.
-
-```svelte
-<Block width="wider" snap="{true}" class="custom-blocks">
-  <!-- Your stuff for this block -->
-</Block>
-
-<style lang="scss">
-  $column-width-narrower: 310px;
-  $column-width-narrow: 450px;
-  $column-width-normal: 600px;
-  $column-width-wide: 860px;
-  $column-width-wider: 1400px;
-
-  @use '@reuters-graphics/graphics-components/scss/mixins' as mixins;
-
-  :global {
-    div.custom-blocks {
-      @include mixins.block-snap-widths;
-    }
-  }
-</style>
-```

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

@@ -1,46 +0,0 @@
-The `BodyText` creates the main text of your page. You can pass the `text` prop a [markdown-formatted](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) string, which will be parsed into paragraphs, headers, lists, blockquotes or whatever else you need.
-
-Use it like this:
-
-```svelte
-<script>
-  import { BodyText } from '@reuters-graphics/graphics-components';
-
-  const markdownText = `Bacon ipsum **dolor amet** cow tongue tri-tip.
-  
-  Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
-  
-  Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`;
-</script>
-
-<BodyText text="{markdownText}" />
-```
-
-... or more commonly, you'll use it with a ArchieML doc in the Graphics Kit like this:
-
-```yaml
-[blocks]
-
-type: text
-text: Lorem ipsum ...
-
-... etc.
-:end
-
-[]
-```
-
-```svelte
-<script>
-  import { BodyText } from '@reuters-graphics/graphics-components';
-
-  import content from '$locales/en/content.json';
-</script>
-
-{#each content.blocks as block}
-  {#if block.type === 'text'}
-    <BodyText text="{block.text}" />
-  <!-- ... -->
-  {/if}
-{/each}
-```