Merge pull request #67 from reuters-graphics/storybook-7

Upgrade Storybook to 7.0

.storybook/Theme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 
 export default create({
   base: 'light',

.storybook/main.cjs

@@ -1,43 +0,0 @@
-const { mergeConfig } = require('vite');
-const preprocess = require('../bin/preprocess/index.cjs');
-
-module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.svelte"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  "framework": "@storybook/svelte",
-  "core": {
-    "builder": "@storybook/builder-vite"
-  },
-  "features": {
-    "storyStoreV7": false,
-    "previewMdx2": false, // Until this is fixed: https://github.com/storybookjs/storybook/issues/18556
-  },
-  typescript: {
-    check: false,
-  },
-  async viteFinal(config, { configType }) {
-    return mergeConfig(config, {
-      base: configType === 'PRODUCTION' ? 'https://reuters-graphics.github.io/graphics-components/' : '/',
-      css: {
-        preprocessorOptions: { scss: preprocess.scss },
-      },
-      resolve: {
-        alias: {
-          '@reuters-graphics/graphics-components': './src',
-          '$lib': './src',
-          '$docs': './src/docs',
-        },
-      },
-    });
-  },
-  svelteOptions: {
-    preprocess: preprocess.sveltePreprocess,
-  },
-}

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/svelte-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-svelte-csf',
+  ],
+  framework: '@storybook/svelte-vite',
+  core: { disableTelemetry: true },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import theme from './Theme';
 
 addons.setConfig({
@@ -8,7 +8,6 @@ addons.setConfig({
   panelPosition: 'bottom',
   enableShortcuts: true,
   showToolbar: true,
-  theme: undefined,
   selectedPanel: undefined,
   initialActive: 'sidebar',
   sidebar: {

.storybook/preview.scss

@@ -39,32 +39,36 @@ div.sbdocs-content {
   }
 }
 
-p.sbdocs-p, ul.sbdocs-ul, li.sbdocs-li {
-  font-size: 18px;
-  line-height: 29px;
-  @include font-display;
-
-  .highlight {
-    background-color: rgb(254, 254, 160);
-    padding: 0 4px;
-  }
-  .bold {
-    font-weight: bold;
-  }
-}
-
-a.sbdocs-a {
-  @include font-display;
-  color: $tr-muted-blue;
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
 .sbdocs {
   @include font-display;
 
+  h1 {
+    @include font-display;
+  }
+
+  p, ul, li {
+    font-size: 18px;
+    line-height: 29px;
+    @include font-display;
+  
+    .highlight {
+      background-color: rgb(254, 254, 160);
+      padding: 0 4px;
+    }
+    .bold {
+      font-weight: bold;
+    }
+  }
+
+  a {
+    @include font-display;
+    color: $tr-muted-blue;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   &:not(.sbdocs-preview) {
     code {
       font-size: 90%;
@@ -88,8 +92,6 @@ a.sbdocs-a {
   }
 }
 
-
-
 div.reset-article {
   width: calc(100% + 30px);
   margin-left: -15px;

.storybook/preview.ts

@@ -67,4 +67,4 @@ export const parameters = {
   }
 };
 
-export const decorators = [() => ({ Component: Wrapper })];
+export const decorators = [() => Wrapper];

bin/buildPackage/index.js

@@ -9,7 +9,7 @@ import picomatch from 'picomatch';
 import processOther from './process/other.js';
 import processSvelte from './process/svelte.js';
 import processTypescript from './process/typescript.js';
-import rimraf from 'rimraf';
+import { rimraf } from 'rimraf';
 
 const require = createRequire(import.meta.url);
 

bin/buildPackage/process/svelte.js

@@ -2,8 +2,8 @@ import { DIST, LIB } from './../locations.js';
 
 import fs from 'fs-extra';
 import path from 'path';
-import preprocess from '../../preprocess/index.cjs';
 import { preprocess as svelte } from 'svelte/compiler';
+import { sveltePreprocess } from '../../preprocess/index.js';
 
 const stripLangTags = (source) => 
   source
@@ -13,7 +13,7 @@ const stripLangTags = (source) =>
 export default async (file) => {
   const filename = path.join(LIB, file);
   let source = fs.readFileSync(filename, 'utf8');
-  source = (await svelte(source, preprocess.sveltePreprocess, { filename })).code
+  source = (await svelte(source, sveltePreprocess, { filename })).code
   const writePath = path.join(DIST, file);
   fs.ensureDirSync(path.dirname(writePath));
   fs.writeFileSync(writePath, stripLangTags(source));

bin/newComponent/template/YourComponent/YourComponent.stories.svelte

@@ -13,9 +13,7 @@
   // @ts-ignore
   import SharkImg from './stories/shark.jpg';
 
-  const meta = {
-    title: 'Components/YourComponent',
-    component: YourComponent,
+  const metaProps = {
     ...withComponentDocs(componentDocs),
     // https://storybook.js.org/docs/svelte/essentials/controls
     argTypes: {
@@ -27,7 +25,11 @@
   };
 </script>
 
-<Meta {...meta} />
+<Meta
+  title='Components/YourComponent'
+  component={YourComponent}
+  {...metaProps}
+/>
 
 <Template let:args>
   <YourComponent {...args} />

bin/newComponent/template/YourComponent/stories/docs/component.md

@@ -13,7 +13,7 @@
 
 ---
 
-```svelte
+```html
 <script>
   import { YourComponent } from '@reuters-graphics/graphics-components';
 </script>

bin/preprocess/index.js

@@ -1,11 +1,11 @@
-const autoprefixer = require('autoprefixer');
-const preprocess = require('svelte-preprocess');
+import autoprefixer from 'autoprefixer';
+import preprocess from 'svelte-preprocess';
 
-const scss = {
+export const scss = {
   includePaths: ['src/', 'node_modules/bootstrap/scss/'],
   importer: [
     (url) => {
-      if (/^\$lib/.test(url)){ return { file: `src/${url.replace('$lib', '')}` }; }
+      if (/^\$lib/.test(url)) { return { file: `src/${url.replace('$lib', '')}` }; }
       // Redirect tilde-prefixed imports to node_modules
       if (/^~/.test(url)) { return { file: `node_modules/${url.replace('~', '')}` }; }
       return null;
@@ -14,7 +14,7 @@ const scss = {
   quietDeps: true,
 };
 
-const sveltePreprocess = preprocess({
+export const sveltePreprocess = preprocess({
   preserve: ['ld+json'],
   typescript: true,
   scss,
@@ -22,8 +22,3 @@ const sveltePreprocess = preprocess({
     plugins: [autoprefixer],
   },
 });
-
-module.exports = {
-  scss,
-  sveltePreprocess
-}

docs/0.e90a374750c335ef9b52.manager.bundle.js.LICENSE.txt

@@ -1,8 +0,0 @@
-/**
- * Prism: Lightweight, robust, elegant syntax highlighting
- *
- * @license MIT <https://opensource.org/licenses/MIT>
- * @author Lea Verou <https://lea.verou.me>
- * @namespace
- * @public
- */

docs/5.cc0b259fd92705c30956.manager.bundle.js.LICENSE.txt

@@ -1,31 +0,0 @@
-/**
-    	 * @license
-    	 * Copyright Google Inc. All Rights Reserved.
-    	 *
-    	 * Use of this source code is governed by an MIT-style license that can be
-    	 * found in the LICENSE file at https://angular.io/license
-    	 */
-
-/**
-      	   * @license
-      	   * Copyright Google Inc. All Rights Reserved.
-      	   *
-      	   * Use of this source code is governed by an MIT-style license that can be
-      	   * found in the LICENSE file at https://angular.io/license
-      	   */
-
-/**
-     * @license
-     * Copyright Google Inc. All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-
-/**
-   * @license
-   * Copyright Google Inc. All Rights Reserved.
-   *
-   * Use of this source code is governed by an MIT-style license that can be
-   * found in the LICENSE file at https://angular.io/license
-   */

docs/8.45653ed03d608fc0ec24.manager.bundle.js.LICENSE.txt

@@ -1,12 +0,0 @@
-/*!
- * OverlayScrollbars
- * https://github.com/KingSora/OverlayScrollbars
- *
- * Version: 1.13.0
- *
- * Copyright KingSora | Rene Haas.
- * https://github.com/KingSora
- *
- * Released under the MIT license.
- * Date: 02.08.2020
- */

docs/9.42821f19fb40e6ca259a.manager.bundle.js

@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{942:function(module,exports){module.exports=function(e,n){return n=n||{},new Promise((function(t,r){var s=new XMLHttpRequest,o=[],u=[],i={},a=function(){return{ok:2==(s.status/100|0),statusText:s.statusText,status:s.status,url:s.responseURL,text:function(){return Promise.resolve(s.responseText)},json:function(){return Promise.resolve(s.responseText).then(JSON.parse)},blob:function(){return Promise.resolve(new Blob([s.response]))},clone:a,headers:{keys:function(){return o},entries:function(){return u},get:function(e){return i[e.toLowerCase()]},has:function(e){return e.toLowerCase()in i}}}};for(var l in s.open(n.method||"get",e,!0),s.onload=function(){s.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(e,n,t){o.push(n=n.toLowerCase()),u.push([n,t]),i[n]=i[n]?i[n]+","+t:t})),t(a())},s.onerror=r,s.withCredentials="include"==n.credentials,n.headers)s.setRequestHeader(l,n.headers[l]);s.send(n.body||null)}))}}}]);

docs/assets/Analytics.stories-b8768512.js

@@ -0,0 +1,65 @@
+import{S as F,i as K,s as W,o as H,p as N,j as g,D as v,m as d,a as p,k as b,l as C,b as $,t as y,n as w,d as m,w as G,E as Q}from"./index-25af778d.js";import{p as V,M as Y,T as Z,S as I}from"./collect-stories-cce06d4a.js";import{w as J,a as E}from"./withParams-90715500.js";const P=`Add Google and Chartbeat analytics to your page.
+
+\`\`\`html
+<script>
+  import { Analytics } from '@reuters-graphics/graphics-components';
+
+  const authors = [{ name: 'Jane Doe' }, { name: 'John Doe' }];
+<\/script>
+
+<Analytics authors="{authors}" />
+\`\`\`
+`,U=`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:
+
+\`\`\`html
+<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}
+\`\`\`
+`,q=`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:
+
+\`\`\`html
+<script>
+  import {
+    Analytics,
+    registerPageview,
+  } from '@reuters-graphics/graphics-components';
+  import { afterNavigate } from '$app/navigation';
+  import { onMount } from 'svelte';
+
+  let hasMounted = false;
+
+  onMount(() => {
+    hasMounted = 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 mounted, we can be sure that further navigation is virtual and
+    // register pageviews using this function.
+    if (hasMounted) registerPageview();
+  });
+<\/script>
+
+<Analytics />
+\`\`\`
+`,X="G-W3Q2X6NTNM",O=`https://www.googletagmanager.com/gtag/js?id=${X}`,ee=()=>{if(document.querySelector(`script[src="${O}"]`))return;const a=document.createElement("script"),t=document.getElementsByTagName("script")[0];a.type="text/javascript",a.async=!0,a.src=O,t.parentNode.insertBefore(a,t)},te=()=>{try{window.dataLayer=window.dataLayer||[],window.gtag||(ee(),window.gtag=function(){window.dataLayer.push(arguments)},window.gtag("js",new Date),window.gtag("config",X,{send_page_view:!1}),ne())}catch(a){console.warn(`Error initialising Google Analytics: ${a}`)}},ne=()=>{typeof window>"u"||!window.gtag||window.gtag("event","page_view",{page_location:window.location.origin+window.location.pathname,page_title:document==null?void 0:document.title})},se=52639,R="//static.chartbeat.com/js/chartbeat.js",ae=()=>{if(document.querySelector(`script[src="${R}"]`))return;const a=document.createElement("script"),t=document.getElementsByTagName("script")[0];a.type="text/javascript",a.async=!0,a.src=R,t.parentNode.insertBefore(a,t)},oe=a=>{window._sf_async_config={uid:se,domain:"reuters.com",flickerControl:!1,useCanonical:!0,useCanonicalDomain:!0,sections:"Graphics",authors:a.map(t=>(t==null?void 0:t.name)||"").join(","),...window._sf_async_config||{}};try{ae()}catch(t){console.warn(`Error initialising Chartbeat Analytics: ${t}`)}};function re(a,t,l){let{authors:s=[]}=t;return H(()=>{te(),oe(s)}),a.$$set=r=>{"authors"in r&&l(0,s=r.authors)},[s]}class h extends F{constructor(t){super(),K(this,t,re,null,W,{authors:0})}}h.__docgen={version:3,name:"Analytics.svelte",data:[{keywords:[],visibility:"public",description:"Used to associate a page with its author(s) in Chartbeat.",name:"authors",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"array",type:"array"}}],computed:[],methods:[{keywords:[],visibility:"public",description:"Register virtual pageviews when using client-side routing in multipage applications.",name:"registerPageview",static:!0}],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function ie(a){let t,l,s,r;const n=[a[0]];let c={};for(let o=0;o<n.length;o+=1)c=N(c,n[o]);return t=new h({props:c}),{c(){g(t.$$.fragment),l=v(),s=G("div"),s.textContent="Nothing to see here"},m(o,u){d(t,o,u),p(o,l,u),p(o,s,u),r=!0},p(o,u){const f=u&1?b(n,[C(o[0])]):{};t.$set(f)},i(o){r||($(t.$$.fragment,o),r=!0)},o(o){y(t.$$.fragment,o),r=!1},d(o){w(t,o),o&&m(l),o&&m(s)}}}function le(a){let t,l,s,r;return t=new h({}),{c(){g(t.$$.fragment),l=v(),s=G("div"),s.textContent="Nothing to see here"},m(n,c){d(t,n,c),p(n,l,c),p(n,s,c),r=!0},p:Q,i(n){r||($(t.$$.fragment,n),r=!0)},o(n){y(t.$$.fragment,n),r=!1},d(n){w(t,n),n&&m(l),n&&m(s)}}}function ce(a){let t,l,s,r;return t=new h({}),{c(){g(t.$$.fragment),l=v(),s=G("div"),s.textContent="Nothing to see here"},m(n,c){d(t,n,c),p(n,l,c),p(n,s,c),r=!0},p:Q,i(n){r||($(t.$$.fragment,n),r=!0)},o(n){y(t.$$.fragment,n),r=!1},d(n){w(t,n),n&&m(l),n&&m(s)}}}function pe(a){let t,l,s,r,n,c,o,u,f,_;const A=[{title:"Components/Analytics"},{component:h},J(P)];let S={};for(let e=0;e<A.length;e+=1)S=N(S,A[e]);t=new Y({props:S}),s=new Z({props:{$$slots:{default:[ie,({args:e})=>({0:e}),({args:e})=>e?1:0]},$$scope:{ctx:a}}}),n=new I({props:{name:"Default",args:{authors:[{name:"Jane Doe"},{name:"John Doe"}]}}});const D=[{name:"Environments"},E(U)];let j={$$slots:{default:[le]},$$scope:{ctx:a}};for(let e=0;e<D.length;e+=1)j=N(j,D[e]);o=new I({props:j});const M=[{name:"Multipage apps"},E(q)];let k={$$slots:{default:[ce]},$$scope:{ctx:a}};for(let e=0;e<M.length;e+=1)k=N(k,M[e]);return f=new I({props:k}),{c(){g(t.$$.fragment),l=v(),g(s.$$.fragment),r=v(),g(n.$$.fragment),c=v(),g(o.$$.fragment),u=v(),g(f.$$.fragment)},m(e,i){d(t,e,i),p(e,l,i),d(s,e,i),p(e,r,i),d(n,e,i),p(e,c,i),d(o,e,i),p(e,u,i),d(f,e,i),_=!0},p(e,[i]){const z=i&0?b(A,[A[0],i&0&&{component:h},i&0&&C(J(P))]):{};t.$set(z);const T={};i&3&&(T.$$scope={dirty:i,ctx:e}),s.$set(T);const L=i&0?b(D,[D[0],C(E(U))]):{};i&2&&(L.$$scope={dirty:i,ctx:e}),o.$set(L);const B=i&0?b(M,[M[0],C(E(q))]):{};i&2&&(B.$$scope={dirty:i,ctx:e}),f.$set(B)},i(e){_||($(t.$$.fragment,e),$(s.$$.fragment,e),$(n.$$.fragment,e),$(o.$$.fragment,e),$(f.$$.fragment,e),_=!0)},o(e){y(t.$$.fragment,e),y(s.$$.fragment,e),y(n.$$.fragment,e),y(o.$$.fragment,e),y(f.$$.fragment,e),_=!1},d(e){w(t,e),e&&m(l),w(s,e),e&&m(r),w(n,e),e&&m(c),w(o,e),e&&m(u),w(f,e)}}}class me extends F{constructor(t){super(),K(this,t,null,pe,W,{})}}const x=V(me,{meta:{title:"Components/Analytics"},stories:{"tpl:default":{storyId:"components-analytics--default",name:"default",template:!0,source:`<Analytics {...args} />
+<div>Nothing to see here</div>`,hasArgs:!0},Default:{storyId:"components-analytics--default",name:"Default",template:!1,hasArgs:!1},Environments:{storyId:"components-analytics--environments",name:"Environments",template:!1,source:`<Analytics />
+<div>Nothing to see here</div>`,hasArgs:!1},MultipageApps:{storyId:"components-analytics--multipage-apps",name:"Multipage apps",template:!1,source:`<Analytics />
+<div>Nothing to see here</div>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","environmentsDocs","multipageDocs","Analytics","withComponentDocs","withStoryDocs"]}),de=x.meta,$e=["Default","Environments","MultipageApps"],ye=x.stories.Default,we=x.stories.Environments,ve=x.stories.MultipageApps;export{ye as Default,we as Environments,ve as MultipageApps,$e as __namedExportsOrder,de as default};
+//# sourceMappingURL=Analytics.stories-b8768512.js.map

docs/assets/Article-06c782e7.js

@@ -0,0 +1,2 @@
+import{S as b,i as y,s as _,q as w,w as f,x as u,y as m,a as h,z as p,A as k,u as j,r as g,v,B as A,b as S,t as V,d as W}from"./index-25af778d.js";const E=(s,i)=>(Object.entries(i).forEach(([t,n])=>{s.style.setProperty(`--${t}`,n)}),{update(t){Object.entries(t).forEach(([n,o])=>{s.style.setProperty(`--${n}`,o),delete i[n]}),Object.keys(i).forEach(n=>{s.style.removeProperty(`--${n}`)}),i=t}});function O(s){let i,t,n,o,d,c;const r=s[6].default,a=w(r,s,s[5],null);return{c(){i=f("main"),t=f("article"),a&&a.c(),u(t,"id",s[1]),u(t,"role",s[2]),u(t,"class","svelte-jd0c2r"),m(t,"embedded",s[0])},m(e,l){h(e,i,l),p(i,t),a&&a.m(t,null),o=!0,d||(c=k(n=E.call(null,t,s[3])),d=!0)},p(e,[l]){a&&a.p&&(!o||l&32)&&j(a,r,e,e[5],o?v(r,e[5],l,null):g(e[5]),null),(!o||l&2)&&u(t,"id",e[1]),(!o||l&4)&&u(t,"role",e[2]),n&&A(n.update)&&l&8&&n.update.call(null,e[3]),(!o||l&1)&&m(t,"embedded",e[0])},i(e){o||(S(a,e),o=!0)},o(e){V(a,e),o=!1},d(e){e&&W(i),a&&a.d(e),d=!1,c()}}}function q(s,i,t){let n,{$$slots:o={},$$scope:d}=i,{embedded:c=!1}=i,{id:r=null}=i,{role:a=null}=i,{columnWidths:e={narrower:330,narrow:510,normal:660,wide:930,wider:1200}}=i;return s.$$set=l=>{"embedded"in l&&t(0,c=l.embedded),"id"in l&&t(1,r=l.id),"role"in l&&t(2,a=l.role),"columnWidths"in l&&t(4,e=l.columnWidths),"$$scope"in l&&t(5,d=l.$$scope)},s.$$.update=()=>{s.$$.dirty&16&&t(3,n={"narrower-column-width":e.narrower+"px","narrow-column-width":e.narrow+"px","normal-column-width":e.normal+"px","wide-column-width":e.wide+"px","wider-column-width":e.wider+"px"})},[c,r,a,n,e,d,o]}class C extends b{constructor(i){super(),y(this,i,q,O,_,{embedded:0,id:1,role:2,columnWidths:4})}}C.__docgen={version:3,name:"Article.svelte",data:[{keywords:[],visibility:"public",description:"Set to true for embeddables.",name:"embedded",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"Add an id to the article tag to target it with custom CSS.",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null},{keywords:[],visibility:"public",description:"ARIA role of the article",name:"role",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null},{keywords:[],visibility:"public",description:"Set custom widths for the normal, wide and wider column dimensions",name:"columnWidths",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"}}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"Article content",name:"default"}],refs:[]};export{C as A};
+//# sourceMappingURL=Article-06c782e7.js.map

docs/assets/Article-06c782e7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Article-06c782e7.js","sources":["../../src/actions/cssVariables/index.js","../../src/components/Article/Article.svelte"],"sourcesContent":["// Shamelessly stolen from: https://github.com/kaisermann/svelte-css-vars\nexport default (node, props) => {\n  Object.entries(props).forEach(([key, value]) => {\n    node.style.setProperty(`--${key}`, value);\n  });\n\n  return {\n    update(newProps) {\n      Object.entries(newProps).forEach(([key, value]) => {\n        node.style.setProperty(`--${key}`, value);\n        delete props[key];\n      });\n\n      Object.keys(props).forEach((name) => {\n        node.style.removeProperty(`--${name}`);\n      });\n      props = newProps;\n    },\n  };\n};\n","<!-- @component `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-article--default) -->\n<script lang=\"ts\">\n  /** Set to true for embeddables. */\n  export let embedded: boolean = false;\n\n  /** Add an id to the article tag to target it with custom CSS. */\n  export let id: string | null = null;\n\n  /** ARIA role of the article */\n  export let role: string | null = null;\n\n  interface ColumnWidths {\n    /** Narrower column width */\n    narrower: number;\n    /** Narrow column width */\n    narrow: number;\n    /** Normal column width */\n    normal: number;\n    /** Wide column width */\n    wide: number;\n    /** Wider column width */\n    wider: number;\n  }\n\n  /** Set custom widths for the normal, wide and wider column dimensions */\n  export let columnWidths: ColumnWidths = {\n    narrower: 330,\n    narrow: 510,\n    normal: 660,\n    wide: 930,\n    wider: 1200,\n  };\n\n  import cssVariables from '../../actions/cssVariables/index.js';\n\n  $: columnWidthVars = {\n    'narrower-column-width': columnWidths.narrower + 'px',\n    'narrow-column-width': columnWidths.narrow + 'px',\n    'normal-column-width': columnWidths.normal + 'px',\n    'wide-column-width': columnWidths.wide + 'px',\n    'wider-column-width': columnWidths.wider + 'px',\n  };\n</script>\n\n<main>\n  <article\n    id=\"{id}\"\n    class:embedded\n    role=\"{role}\"\n    use:cssVariables=\"{columnWidthVars}\"\n  >\n    <!-- Article content -->\n    <slot />\n  </article>\n</main>\n\n<style lang=\"scss\">\n  article {\n    width: 100%;\n    display: block;\n    margin: 0;\n    padding: 0 15px;\n    background-color: var(--theme-colour-background, transparent);\n    &.embedded {\n      overflow: auto;\n    }\n  }\n</style>\n"],"names":["cssVariables","node","props","key","value","newProps","name","ctx","insert","target","main","anchor","append","article","embedded","$$props","id","role","columnWidths","columnWidthVars"],"mappings":"mJACA,MAAAA,EAAe,CAACC,EAAMC,KACpB,OAAO,QAAQA,CAAK,EAAE,QAAQ,CAAC,CAACC,EAAKC,CAAK,IAAM,CAC9CH,EAAK,MAAM,YAAY,KAAKE,IAAOC,CAAK,CAC5C,CAAG,EAEM,CACL,OAAOC,EAAU,CACf,OAAO,QAAQA,CAAQ,EAAE,QAAQ,CAAC,CAACF,EAAKC,CAAK,IAAM,CACjDH,EAAK,MAAM,YAAY,KAAKE,IAAOC,CAAK,EACxC,OAAOF,EAAMC,CAAG,CACxB,CAAO,EAED,OAAO,KAAKD,CAAK,EAAE,QAASI,GAAS,CACnCL,EAAK,MAAM,eAAe,KAAKK,GAAM,CAC7C,CAAO,EACDJ,EAAQG,CACT,CACL,iIC4BSE,EAAE,CAAA,CAAA,aAEAA,EAAI,CAAA,CAAA,4DAJfC,EAUMC,EAAAC,EAAAC,CAAA,EATJC,EAQSF,EAAAG,CAAA,8CAJYN,EAAe,CAAA,CAAA,CAAA,wGAH7BA,EAAE,CAAA,CAAA,wBAEAA,EAAI,CAAA,CAAA,0CACQA,EAAe,CAAA,CAAA,iKA9CzB,CAAA,SAAAO,EAAoB,EAAK,EAAAC,EAGzB,CAAA,GAAAC,EAAoB,IAAI,EAAAD,EAGxB,CAAA,KAAAE,EAAsB,IAAI,EAAAF,GAgB1B,aAAAG,EAAY,CACrB,SAAU,IACV,OAAQ,IACR,OAAQ,IACR,KAAM,IACN,MAAO,6NAKNC,EAAe,CAChB,wBAAyBD,EAAa,SAAW,KACjD,sBAAuBA,EAAa,OAAS,KAC7C,sBAAuBA,EAAa,OAAS,KAC7C,oBAAqBA,EAAa,KAAO,KACzC,qBAAsBA,EAAa,MAAQ"}

docs/assets/Article-1368930d.css

@@ -0,0 +1 @@
+article.svelte-jd0c2r{width:100%;display:block;margin:0;padding:0 15px;background-color:var(--theme-colour-background, transparent)}article.embedded.svelte-jd0c2r{overflow:auto}

docs/assets/Article.stories-59a2baab.css

@@ -0,0 +1 @@
+#article-story-basic,#article-column-widths-demo{width:calc(100% + 30px);margin-left:-15px}#article-column-widths-demo{background-color:#ddd;position:relative;margin-bottom:10px}#article-column-widths-demo .article-boundaries{padding:0;width:100%;height:100%;background-color:#bbb}#article-column-widths-demo .article-boundaries.custom div.article-block{background:rgb(211,132,123)}#article-column-widths-demo div.article-block{height:300px;background:#81a1c1;margin-bottom:2px;height:50px;padding-left:3px;color:#fff;font-size:12px}div.demo-container.svelte-1z127ee.svelte-1z127ee{height:300px;background:#ccc;position:relative;font-size:12px}div.demo-container.svelte-1z127ee .background-label.svelte-1z127ee{position:absolute;bottom:0;left:5px;color:#666}div.demo-container.svelte-1z127ee .padding-label.svelte-1z127ee{position:absolute;top:0;left:-17px}div.demo-container.svelte-1z127ee .padding-label span.svelte-1z127ee{font-size:18px}

docs/assets/BeforeAfter.stories-8d451e62.css

@@ -0,0 +1 @@
+figure.before-after-container.svelte-35dp01.svelte-35dp01{overflow:hidden;position:relative;box-sizing:content-box;margin:0 auto}figure.before-after-container.svelte-35dp01 img.svelte-35dp01{top:0;left:0;z-index:20;margin:0;display:block;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;-o-object-fit:cover;object-fit:cover;position:absolute}figure.before-after-container.svelte-35dp01 img.after.svelte-35dp01{z-index:21}figure.before-after-container.svelte-35dp01 img.before.svelte-35dp01{z-index:22}figure.before-after-container.svelte-35dp01 .overlay-container.svelte-35dp01{position:absolute}figure.before-after-container.svelte-35dp01 .overlay-container.svelte-35dp01 p{font-family:var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);font-size:1rem;line-height:1.2rem}figure.before-after-container.svelte-35dp01 .overlay-container.svelte-35dp01 p:last-child{margin-bottom:0}figure.before-after-container.svelte-35dp01 .overlay-container.before.svelte-35dp01{left:0;z-index:23}figure.before-after-container.svelte-35dp01 .overlay-container.after.svelte-35dp01{right:0;z-index:21}.handle.svelte-35dp01.svelte-35dp01{z-index:30;width:40px;height:40px;cursor:move;background:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;border-radius:50px;top:calc(50% - 20px);border:4px solid var(--before-after-handle-colour);opacity:var(--before-after-handle-inactive-opacity, .6)}.handle.svelte-35dp01.svelte-35dp01:hover,.handle.svelte-35dp01.svelte-35dp01:active,.handle.svelte-35dp01.svelte-35dp01:focus{opacity:1}.handle.svelte-35dp01.svelte-35dp01:before,.handle.svelte-35dp01.svelte-35dp01:after{content:"";height:9999px;position:absolute;left:calc(50% - 2px);border:2px solid var(--before-after-handle-colour)}.handle.svelte-35dp01.svelte-35dp01:before{top:40px}.handle.svelte-35dp01.svelte-35dp01:after{bottom:40px}.handle.svelte-35dp01 .arrow-right.svelte-35dp01,.handle.svelte-35dp01 .arrow-left.svelte-35dp01{width:0;height:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border-top:10px solid transparent;border-bottom:10px solid transparent}.handle.svelte-35dp01 .arrow-right.svelte-35dp01{left:19px;bottom:14px;border-left:10px solid var(--before-after-handle-colour)}.handle.svelte-35dp01 .arrow-left.svelte-35dp01{left:3px;top:6px;border-right:10px solid var(--before-after-handle-colour)}aside.before-after-caption.svelte-35dp01.svelte-35dp01{margin:0 auto;font-family:var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);color:var(--theme-colour-text-secondary, #666666)}aside.before-after-caption.svelte-35dp01 p{font-family:var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);color:var(--theme-colour-text-secondary, #666666);font-size:.9rem;line-height:1.2rem}aside.before-after-caption.svelte-35dp01 p:last-of-type{margin-bottom:0}@media (max-width: 540px){aside.before-after-caption.svelte-35dp01 p{font-size:.8rem;line-height:1.1rem}}aside.before-after-caption.svelte-35dp01 p a{color:currentColor;text-decoration:underline}aside.before-after-caption.svelte-35dp01 p a:hover{text-decoration:underline}

docs/assets/Block-404a8115.css

@@ -0,0 +1 @@
+.paragraph-size.svelte-1dum52o{font-size:1.3rem;line-height:2.1rem}.paragraph-size.font-sans.svelte-1dum52o{font-size:1.1rem;line-height:1.75rem}@media (max-width: 540px){.paragraph-size.svelte-1dum52o{font-size:1.1rem;line-height:1.8rem}.paragraph-size.font-sans.svelte-1dum52o{font-size:1rem;line-height:1.6rem}}.paragraph-size.important.svelte-1dum52o{font-size:1.3rem!important;line-height:2.1rem!important}.paragraph-size.important.font-sans.svelte-1dum52o{font-size:1.1rem!important;line-height:1.8rem!important}@media (max-width: 540px){.paragraph-size.important.svelte-1dum52o{font-size:1.1rem!important;line-height:1.8rem!important}.paragraph-size.important.font-sans.svelte-1dum52o{font-size:1rem!important;line-height:1.6rem!important}}.small-size.svelte-1dum52o{font-size:.9rem;line-height:1.2rem}@media (max-width: 540px){.small-size.svelte-1dum52o{font-size:.8rem;line-height:1.1rem}}.small-size.important.svelte-1dum52o{font-size:.9rem!important;line-height:1.2rem!important}@media (max-width: 540px){.small-size.important.svelte-1dum52o{font-size:.8rem!important;line-height:1.1rem!important}}.blockquote-size.svelte-1dum52o{font-size:1.6rem;line-height:2.1rem}@media (max-width: 540px){.blockquote-size.svelte-1dum52o{font-size:1.3rem;line-height:1.9rem}}.blockquote-size.important.svelte-1dum52o{font-size:1.6rem!important;line-height:2rem!important}@media (max-width: 540px){.blockquote-size.important.svelte-1dum52o{font-size:1.3rem!important;line-height:1.8rem!important}}div.article-block.svelte-1dum52o{max-width:var(--normal-column-width, 660px);margin-left:auto;margin-right:auto;margin-top:0}div.article-block.svelte-1dum52o:not(:last-child){margin-bottom:3rem}div.article-block.narrower.svelte-1dum52o{max-width:var(--narrower-column-width, 330px)}div.article-block.narrow.svelte-1dum52o{max-width:var(--narrow-column-width, 510px)}div.article-block.wide.svelte-1dum52o{max-width:var(--wide-column-width, 930px)}div.article-block.wider.svelte-1dum52o{max-width:var(--wider-column-width, 1200px)}div.article-block.widest.svelte-1dum52o{max-width:100%}div.article-block.fluid.svelte-1dum52o{width:calc(100% + 30px);margin-left:-15px;max-width:none}div.article-block.snap.svelte-1dum52o{width:330px}@media (min-width: 540px){div.article-block.snap.svelte-1dum52o:not(.skip-narrow){width:510px}}@media (min-width: 690px){div.article-block.snap.svelte-1dum52o:not(.skip-normal){width:660px}}@media (min-width: 360px){div.article-block.snap.narrower.svelte-1dum52o{width:330px}}@media (min-width: 540px){div.article-block.snap.narrow.svelte-1dum52o{width:510px}}@media (min-width: 960px){div.article-block.snap.wide.svelte-1dum52o{width:930px}}@media (min-width: 960px){div.article-block.snap.wider.svelte-1dum52o:not(.skip-wide){width:930px}}@media (min-width: 1230px){div.article-block.snap.wider.svelte-1dum52o:not(.skip-wider){width:1200px}}div.article-block.snap.widest.svelte-1dum52o,div.article-block.snap.fluid.svelte-1dum52o{width:inherit}div.article-block.snap.fluid.svelte-1dum52o{width:calc(100% + 30px)}

docs/assets/Block-9c89ee1a.js

@@ -0,0 +1,2 @@
+import{S as y,i as k,s as m,q as _,w as h,x as d,y as b,a as p,u as w,r as g,v,b as A,t as S,d as V}from"./index-25af778d.js";function L(l){let e,n,s;const r=l[7].default,i=_(r,l,l[6],null);return{c(){e=h("div"),i&&i.c(),d(e,"id",l[1]),d(e,"class",n="article-block "+l[0]+" "+l[2]+" svelte-1dum52o"),d(e,"role",l[4]),d(e,"aria-label",l[5]),b(e,"snap",l[3]&&l[0]!=="fluid"&&l[0]!=="widest")},m(t,o){p(t,e,o),i&&i.m(e,null),s=!0},p(t,[o]){i&&i.p&&(!s||o&64)&&w(i,r,t,t[6],s?v(r,t[6],o,null):g(t[6]),null),(!s||o&2)&&d(e,"id",t[1]),(!s||o&5&&n!==(n="article-block "+t[0]+" "+t[2]+" svelte-1dum52o"))&&d(e,"class",n),(!s||o&16)&&d(e,"role",t[4]),(!s||o&32)&&d(e,"aria-label",t[5]),(!s||o&13)&&b(e,"snap",t[3]&&t[0]!=="fluid"&&t[0]!=="widest")},i(t){s||(A(i,t),s=!0)},o(t){S(i,t),s=!1},d(t){t&&V(e),i&&i.d(t)}}}function R(l,e,n){let{$$slots:s={},$$scope:r}=e,{width:i="normal"}=e,{id:t=""}=e,{cls:o=""}=e,{snap:c=!1}=e,{role:f=null}=e,{ariaLabel:u=null}=e;return l.$$set=a=>{"width"in a&&n(0,i=a.width),"id"in a&&n(1,t=a.id),"cls"in a&&n(2,o=a.cls),"snap"in a&&n(3,c=a.snap),"role"in a&&n(4,f=a.role),"ariaLabel"in a&&n(5,u=a.ariaLabel),"$$scope"in a&&n(6,r=a.$$scope)},[i,t,o,c,f,u,r,s]}class j extends y{constructor(e){super(),k(this,e,R,L,m,{width:0,id:1,cls:2,snap:3,role:4,ariaLabel:5})}}j.__docgen={version:3,name:"Block.svelte",data:[{keywords:[],visibility:"public",description:"Width of the block within the article well.",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"},{keywords:[],visibility:"public",description:"Add an id to the block tag to target it with custom CSS.",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[],visibility:"public",description:"Add extra classes to the block tag to target it with custom CSS.",name:"cls",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[],visibility:"public",description:"Snap block to column widths, rather than fluidly resizing them.",name:"snap",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block",name:"role",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null},{keywords:[],visibility:"public",description:"ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block",name:"ariaLabel",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"block content",name:"default"}],refs:[]};export{j as B};
+//# sourceMappingURL=Block-9c89ee1a.js.map

docs/assets/Block-9c89ee1a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Block-9c89ee1a.js","sources":["../../src/components/Block/Block.svelte"],"sourcesContent":["<!-- @component `Block` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-block--default) -->\n<script lang=\"ts\">\n  import type { ContainerWidth } from '../@types/global';\n\n  /** Width of the block within the article well. */\n  export let width: ContainerWidth = 'normal';\n\n  /** Add an id to the block tag to target it with custom CSS. */\n  export let id: string = '';\n  /** Add extra classes to the block tag to target it with custom CSS. */\n  export let cls: string = '';\n\n  /** Snap block to column widths, rather than fluidly resizing them. */\n  export let snap: boolean = false;\n\n  /** ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block */\n  export let role: string | null = null;\n\n  /** ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block */\n  export let ariaLabel: string | null = null;\n</script>\n\n<div\n  id=\"{id}\"\n  class=\"article-block {width} {cls}\"\n  class:snap=\"{snap && width !== 'fluid' && width !== 'widest'}\"\n  role=\"{role}\"\n  aria-label=\"{ariaLabel}\"\n>\n  <!-- block content -->\n  <slot />\n</div>\n\n<style lang=\"scss\">\n  @import '../../scss/mixins';\n\n  div.article-block {\n    max-width: var(--normal-column-width, 660px);\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: 0;\n    &:not(:last-child) {\n      margin-bottom: 3rem;\n    }\n\n    &.narrower {\n      max-width: var(--narrower-column-width, 330px);\n    }\n\n    &.narrow {\n      max-width: var(--narrow-column-width, 510px);\n    }\n\n    &.wide {\n      max-width: var(--wide-column-width, 930px);\n    }\n\n    &.wider {\n      max-width: var(--wider-column-width, 1200px);\n    }\n\n    &.widest {\n      max-width: 100%;\n    }\n\n    &.fluid {\n      width: calc(100% + 30px);\n      margin-left: -15px;\n      max-width: none;\n    }\n\n    // Only setup for the default column widths, b/c can't use\n    // CSS vars in media queries.\n    &.snap {\n      @include block-snap-widths;\n    }\n  }\n</style>\n"],"names":["ctx","attr","div","div_class_value","toggle_class","insert","target","anchor","current","dirty","width","$$props","id","cls","snap","role","ariaLabel"],"mappings":"sOAuBOA,EAAE,CAAA,CAAA,EACeC,EAAAC,EAAA,QAAAC,EAAA,iBAAAH,SAAQA,EAAG,CAAA,EAAA,iBAAA,aAE1BA,EAAI,CAAA,CAAA,mBACEA,EAAS,CAAA,CAAA,EAFTI,EAAAF,EAAA,OAAAF,MAAQA,EAAK,CAAA,IAAK,SAAWA,OAAU,QAAQ,UAH9DK,EASKC,EAAAJ,EAAAK,CAAA,sHAREP,EAAE,CAAA,CAAA,GACe,CAAAQ,GAAAC,EAAA,GAAAN,KAAAA,EAAA,iBAAAH,SAAQA,EAAG,CAAA,EAAA,2DAE1BA,EAAI,CAAA,CAAA,+BACEA,EAAS,CAAA,CAAA,cAFTI,EAAAF,EAAA,OAAAF,MAAQA,EAAK,CAAA,IAAK,SAAWA,OAAU,QAAQ,qHApBjD,CAAA,MAAAU,EAAwB,QAAQ,EAAAC,EAGhC,CAAA,GAAAC,EAAa,EAAE,EAAAD,EAEf,CAAA,IAAAE,EAAc,EAAE,EAAAF,EAGhB,CAAA,KAAAG,EAAgB,EAAK,EAAAH,EAGrB,CAAA,KAAAI,EAAsB,IAAI,EAAAJ,EAG1B,CAAA,UAAAK,EAA2B,IAAI,EAAAL"}

docs/assets/Block.stories-9ff09a34.css

@@ -0,0 +1 @@
+#block-demo-article{background-color:#ddd;position:relative;width:calc(100% + 30px);margin-left:-15px}#block-demo-article .article-boundaries{padding:0 0 18px;width:100%;height:100%;background-color:#bbb}#block-demo-article div.article-block{height:100px;background:#81a1c1}#block-demo-article div.article-block.block-snap-widths-demo{margin-bottom:2px;height:40px;font-size:11px}#block-demo-article div.article-block.block-snap-widths-demo.even{background:rgb(211,132,123)}#block-demo-article .label,#block-demo-article div.article-block.block-snap-widths-demo{padding-left:3px;color:#fff}div.container-fluid.svelte-ku86hf.svelte-ku86hf.svelte-ku86hf{padding:25px 0}div.container-fluid.svelte-ku86hf div.row.svelte-ku86hf>div.svelte-ku86hf{background-color:#d3847b;border:1px solid white;border-radius:4px;padding:20px;color:#fff;text-align:center}div.container-fluid.svelte-ku86hf div.row:first-child div.svelte-ku86hf.svelte-ku86hf{background:#81a1c1}

docs/assets/BodyText-a712211f.js

@@ -0,0 +1,2 @@
+import{S as f,i as p,s as d,j as _,m as u,b as y,t as $,n as k,e as l,a as c,d as m,W as x}from"./index-25af778d.js";import{m as r}from"./marked.esm-76161808.js";import{B as b}from"./Block-9c89ee1a.js";function a(o){let s,t=r.parse(o[0])+"",e;return{c(){s=new x(!1),e=l(),s.a=e},m(n,i){s.m(t,n,i),c(n,e,i)},p(n,i){i&1&&t!==(t=r.parse(n[0])+"")&&s.p(t)},d(n){n&&m(e),n&&s.d()}}}function g(o){let s,t=o[0]&&a(o);return{c(){t&&t.c(),s=l()},m(e,n){t&&t.m(e,n),c(e,s,n)},p(e,n){e[0]?t?t.p(e,n):(t=a(e),t.c(),t.m(s.parentNode,s)):t&&(t.d(1),t=null)},d(e){t&&t.d(e),e&&m(s)}}}function v(o){let s,t;return s=new b({props:{cls:"body-text",$$slots:{default:[g]},$$scope:{ctx:o}}}),{c(){_(s.$$.fragment)},m(e,n){u(s,e,n),t=!0},p(e,[n]){const i={};n&3&&(i.$$scope={dirty:n,ctx:e}),s.$set(i)},i(e){t||(y(s.$$.fragment,e),t=!0)},o(e){$(s.$$.fragment,e),t=!1},d(e){k(s,e)}}}function w(o,s,t){let{text:e}=s;return o.$$set=n=>{"text"in n&&t(0,e=n.text)},[e]}class B extends f{constructor(s){super(),p(this,s,w,v,d,{text:0})}}B.__docgen={version:3,name:"BodyText.svelte",data:[{keywords:[{name:"type",description:"{string}"},{name:"required",description:""}],visibility:"public",description:"A markdown text string.",name:"text",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"}}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};export{B};
+//# sourceMappingURL=BodyText-a712211f.js.map

docs/assets/BodyText-a712211f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BodyText-a712211f.js","sources":["../../src/components/BodyText/BodyText.svelte"],"sourcesContent":["<!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-bodytext--default) -->\n<script lang=\"ts\">\n  /**\n   * A markdown text string.\n   * @type {string}\n   * @required\n   */\n  export let text: string;\n\n  import { marked } from 'marked';\n  import Block from '../Block/Block.svelte';\n</script>\n\n<Block cls=\"body-text\">\n  {#if text}\n    {@html marked.parse(text)}\n  {/if}\n</Block>\n\n<!-- svelte-ignore css-unused-selector -->\n<style lang=\"scss\" global>\n  // Technically... we probably should unbind these styles from the component\n  // and import them in the app through a separate scss file.\n  @import '../../scss/mixins';\n\n  div.article-block.body-text {\n    @include body-text;\n  }\n</style>\n"],"names":["marked","ctx","html_tag","raw_value","create_if_block","text","$$props"],"mappings":"gOAeWA,EAAO,MAAMC,EAAI,CAAA,CAAA,EAAA,wFAAjBD,EAAO,MAAMC,EAAI,CAAA,CAAA,EAAA,KAAAC,EAAA,EAAAC,CAAA,iDADrBF,EAAI,CAAA,GAAAG,EAAAH,CAAA,iEAAJA,EAAI,CAAA,qZAPE,KAAAI,CAAY,EAAAC"}

docs/assets/BodyText.stories-bcc1a2cb.js

@@ -0,0 +1,41 @@
+import{S as C,i as S,s as j,p as w,j as c,D as k,m as i,a as x,k as T,l as B,b as u,t as d,n as f,d as y}from"./index-25af778d.js";import{p as M,M as F,T as I,S as q}from"./collect-stories-cce06d4a.js";import{B as g}from"./BodyText-a712211f.js";import{w as _}from"./withParams-90715500.js";import"./marked.esm-76161808.js";import"./Block-9c89ee1a.js";const b=`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:
+
+\`\`\`html
+<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 Google doc in the Graphics Kit like this:
+
+\`\`\`html
+<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}
+\`\`\`
+`;function A(l){let o,a;const n=[l[0]];let m={};for(let e=0;e<n.length;e+=1)m=w(m,n[e]);return o=new g({props:m}),{c(){c(o.$$.fragment)},m(e,r){i(o,e,r),a=!0},p(e,r){const p=r&1?T(n,[B(e[0])]):{};o.$set(p)},i(e){a||(u(o.$$.fragment,e),a=!0)},o(e){d(o.$$.fragment,e),a=!1},d(e){f(o,e)}}}function G(l){let o,a,n,m,e,r;const p=[{title:"Components/BodyText"},{component:g},_(b)];let h={};for(let t=0;t<p.length;t+=1)h=w(h,p[t]);return o=new F({props:h}),n=new I({props:{$$slots:{default:[A,({args:t})=>({0:t}),({args:t})=>t?1:0]},$$scope:{ctx:l}}}),e=new q({props:{name:"Default",args:{text:`Bacon ipsum **dolor amet** cow tongue tri-tip.
+  
+  Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
+
+  - Steak
+  - [Pork chop](https://www.google.com)
+  - Fillet
+  
+  Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`}}}),{c(){c(o.$$.fragment),a=k(),c(n.$$.fragment),m=k(),c(e.$$.fragment)},m(t,s){i(o,t,s),x(t,a,s),i(n,t,s),x(t,m,s),i(e,t,s),r=!0},p(t,[s]){const v=s&0?T(p,[p[0],s&0&&{component:g},s&0&&B(_(b))]):{};o.$set(v);const $={};s&3&&($.$$scope={dirty:s,ctx:t}),n.$set($)},i(t){r||(u(o.$$.fragment,t),u(n.$$.fragment,t),u(e.$$.fragment,t),r=!0)},o(t){d(o.$$.fragment,t),d(n.$$.fragment,t),d(e.$$.fragment,t),r=!1},d(t){f(o,t),t&&y(a),f(n,t),t&&y(m),f(e,t)}}}class V extends C{constructor(o){super(),S(this,o,null,G,j,{})}}const D=M(V,{meta:{title:"Components/BodyText"},stories:{"tpl:default":{storyId:"components-bodytext--default",name:"default",template:!0,source:"<BodyText {...args} />",hasArgs:!0},Default:{storyId:"components-bodytext--default",name:"Default",template:!1,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","BodyText","withComponentDocs"]}),z=D.meta,H=["Default"],J=D.stories.Default;export{J as Default,H as __namedExportsOrder,z as default};
+//# sourceMappingURL=BodyText.stories-bcc1a2cb.js.map

docs/assets/BodyText.stories-bcc1a2cb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BodyText.stories-bcc1a2cb.js","sources":["../../src/components/BodyText/stories/docs/component.md?raw","../../src/components/BodyText/BodyText.stories.svelte"],"sourcesContent":["export default \"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.\\n\\nUse it like this:\\n\\n```html\\n<script>\\n  import { BodyText } from '@reuters-graphics/graphics-components';\\n\\n  const markdownText = `Bacon ipsum **dolor amet** cow tongue tri-tip.\\n  \\n  Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.\\n  \\n  Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`;\\n</script>\\n\\n<BodyText text=\\\"{markdownText}\\\" />\\n```\\n\\n... or more commonly, you'll use it with a Google doc in the Graphics Kit like this:\\n\\n```html\\n<script>\\n  import { BodyText } from '@reuters-graphics/graphics-components';\\n\\n  import content from '$locales/en/content.json';\\n</script>\\n\\n{#each content.blocks as block} {#if block.Type === 'text'}\\n<BodyText text=\\\"{block.Text}\\\" />\\n{/if} {/each}\\n```\\n\"","<script>\n  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n  // @ts-ignore\n  import componentDocs from './stories/docs/component.md?raw';\n\n  import BodyText from './BodyText.svelte';\n\n  import { withComponentDocs } from '$lib/docs/utils/withParams.js';\n</script>\n\n<Meta\n  title=\"Components/BodyText\"\n  component=\"{BodyText}\"\n  {...withComponentDocs(componentDocs)}\n/>\n\n<Template let:args>\n  <BodyText {...args} />\n</Template>\n\n<Story\n  name=\"Default\"\n  args=\"{{\n    text: `Bacon ipsum **dolor amet** cow tongue tri-tip.\n  \n  Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.\n\n  - Steak\n  - [Pork chop](https://www.google.com)\n  - Fillet\n  \n  Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`,\n  }}\"\n/>\n"],"names":["componentDocs","ctx","BodyText","withComponentDocs","dirty","get_spread_object"],"mappings":"+VAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCCkBCC,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,+KALNC,CAAQ,EAChBC,EAAkBH,CAAa,kNAUjC,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iRAXME,CAAQ,EAChBE,EAAA,GAAAC,EAAAF,EAAkBH,CAAa,CAAA"}

docs/assets/DatawrapperChart.stories-f94ba0ad.css

@@ -0,0 +1 @@
+.datawrapper-chart.svelte-13ejpv3{margin:auto}

docs/assets/DocsRenderer-EYKKDMVH-91d97e22.js

@@ -0,0 +1,2 @@
+import{D as n,d as f}from"./chunk-PCJTTTQV-da3c586f.js";import"./iframe-6f6d727c.js";import"../sb-preview/runtime.js";import"./extends-b40c5bac.js";import"./_commonjsHelpers-725317a4.js";import"./index-d475d2ea.js";import"./index-d37d4223.js";import"./index-1a79a776.js";import"./index-356e4a49.js";export{n as DocsRenderer,f as defaultComponents};
+//# sourceMappingURL=DocsRenderer-EYKKDMVH-91d97e22.js.map

docs/assets/DocsRenderer-EYKKDMVH-91d97e22.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocsRenderer-EYKKDMVH-91d97e22.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

docs/assets/DocumentCloud.stories-3407d178.js

@@ -0,0 +1,19 @@
+import{S as $,i as C,s as x,j as m,m as p,b as f,t as g,n as h,w as R,Q as D,x as d,C as w,a as y,d as b,p as v,D as k,k as A,l as S}from"./index-25af778d.js";import{p as M,M as V,T as j,S as B}from"./collect-stories-cce06d4a.js";import{B as E}from"./Block-9c89ee1a.js";import{w as H}from"./withParams-90715500.js";const P=`Embed a document hosted by [DocumentCloud](https://documentcloud.org)
+
+---
+
+The document must have its access level set to public before it can be embedded. The \`slug\` argument can be found after the final slash in the document's URL. For instance, the document included in the example is found at [documentcloud.org/documents/3259984-Trump-Intelligence-Allegations](https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations). The slug is "3259984-Trump-Intelligence-Allegations".
+
+\`\`\`html
+<script>
+  import { DocumentCloud } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<DocumentCloud
+  slug="3259984-Trump-Intelligence-Allegations"
+  altText="These Reports Allege Trump Has Deep Ties To Russia"
+  width="normal"
+/>
+\`\`\`
+`;function F(a){let e,o;return{c(){e=R("iframe"),D(e.src,o="https://embed.documentcloud.org/documents/"+a[1]+"/?embed=1&responsive=1&title=1")||d(e,"src",o),d(e,"title",a[2]),d(e,"width","700"),d(e,"height","540"),w(e,"border","1px solid #aaa"),w(e,"width","100%"),w(e,"height","800px"),w(e,"height","calc(100vh - 100px)"),d(e,"sandbox","allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox")},m(t,l){y(t,e,l)},p(t,l){l&2&&!D(e.src,o="https://embed.documentcloud.org/documents/"+t[1]+"/?embed=1&responsive=1&title=1")&&d(e,"src",o),l&4&&d(e,"title",t[2])},d(t){t&&b(e)}}}function L(a){let e,o;return e=new E({props:{width:a[0],id:a[3],cls:"photo "+a[4],$$slots:{default:[F]},$$scope:{ctx:a}}}),{c(){m(e.$$.fragment)},m(t,l){p(e,t,l),o=!0},p(t,[l]){const n={};l&1&&(n.width=t[0]),l&8&&(n.id=t[3]),l&16&&(n.cls="photo "+t[4]),l&38&&(n.$$scope={dirty:l,ctx:t}),e.$set(n)},i(t){o||(f(e.$$.fragment,t),o=!0)},o(t){g(e.$$.fragment,t),o=!1},d(t){h(e,t)}}}function O(a,e,o){let{width:t="normal"}=e,{slug:l}=e,{altText:n}=e,{id:r=""}=e,{cls:c=""}=e;return a.$$set=i=>{"width"in i&&o(0,t=i.width),"slug"in i&&o(1,l=i.slug),"altText"in i&&o(2,n=i.altText),"id"in i&&o(3,r=i.id),"cls"in i&&o(4,c=i.cls)},[t,l,n,r,c]}class _ extends ${constructor(e){super(),C(this,e,O,L,x,{width:0,slug:1,altText:2,id:3,cls:4})}}_.__docgen={version:3,name:"DocumentCloud.svelte",data:[{keywords:[],visibility:"public",description:"Width of the container, one of: normal, wide, wider, widest or fluid",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"},{keywords:[{name:"required",description:""}],visibility:"public",description:"The unique identifier for the document.",name:"slug",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{keywords:[{name:"required",description:""}],visibility:"public",description:"Alt text for the document.",name:"altText",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{keywords:[],visibility:"public",description:"Add an ID to target with SCSS.",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[],visibility:"public",description:"Add a class to target with SCSS.",name:"cls",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function Q(a){let e,o;const t=[a[1]];let l={};for(let n=0;n<t.length;n+=1)l=v(l,t[n]);return e=new _({props:l}),{c(){m(e.$$.fragment)},m(n,r){p(e,n,r),o=!0},p(n,r){const c=r&2?A(t,[S(n[1])]):{};e.$set(c)},i(n){o||(f(e.$$.fragment,n),o=!0)},o(n){g(e.$$.fragment,n),o=!1},d(n){h(e,n)}}}function U(a){let e,o,t,l,n,r;const c=[{title:"Components/DocumentCloud"},{component:_},a[0]];let i={};for(let s=0;s<c.length;s+=1)i=v(i,c[s]);return e=new V({props:i}),t=new j({props:{$$slots:{default:[Q,({args:s})=>({1:s}),({args:s})=>s?2:0]},$$scope:{ctx:a}}}),n=new B({props:{name:"Default",args:{width:"normal",slug:"3259984-Trump-Intelligence-Allegations",altText:"These Reports Allege Trump Has Deep Ties To Russia"}}}),{c(){m(e.$$.fragment),o=k(),m(t.$$.fragment),l=k(),m(n.$$.fragment)},m(s,u){p(e,s,u),y(s,o,u),p(t,s,u),y(s,l,u),p(n,s,u),r=!0},p(s,[u]){const q=u&1?A(c,[c[0],u&0&&{component:_},u&1&&S(s[0])]):{};e.$set(q);const T={};u&6&&(T.$$scope={dirty:u,ctx:s}),t.$set(T)},i(s){r||(f(e.$$.fragment,s),f(t.$$.fragment,s),f(n.$$.fragment,s),r=!0)},o(s){g(e.$$.fragment,s),g(t.$$.fragment,s),g(n.$$.fragment,s),r=!1},d(s){h(e,s),s&&b(o),h(t,s),s&&b(l),h(n,s)}}}function W(a){return[{...H(P),argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]}}}]}class z extends ${constructor(e){super(),C(this,e,W,U,x,{})}}const I=M(z,{meta:{title:"Components/DocumentCloud"},stories:{"tpl:default":{storyId:"components-documentcloud--default",name:"default",template:!0,source:"<DocumentCloud {...args} />",hasArgs:!0},Default:{storyId:"components-documentcloud--default",name:"Default",template:!1,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","DocumentCloud","withComponentDocs"]}),X=I.meta,Y=["Default"],Z=I.stories.Default;export{Z as Default,Y as __namedExportsOrder,X as default};
+//# sourceMappingURL=DocumentCloud.stories-3407d178.js.map

docs/assets/DocumentCloud.stories-3407d178.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentCloud.stories-3407d178.js","sources":["../../src/components/DocumentCloud/stories/docs/component.md?raw","../../src/components/DocumentCloud/DocumentCloud.svelte","../../src/components/DocumentCloud/DocumentCloud.stories.svelte"],"sourcesContent":["export default \"Embed a document hosted by [DocumentCloud](https://documentcloud.org)\\n\\n---\\n\\nThe document must have its access level set to public before it can be embedded. The `slug` argument can be found after the final slash in the document's URL. For instance, the document included in the example is found at [documentcloud.org/documents/3259984-Trump-Intelligence-Allegations](https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations). The slug is \\\"3259984-Trump-Intelligence-Allegations\\\".\\n\\n```html\\n<script>\\n  import { DocumentCloud } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<DocumentCloud\\n  slug=\\\"3259984-Trump-Intelligence-Allegations\\\"\\n  altText=\\\"These Reports Allege Trump Has Deep Ties To Russia\\\"\\n  width=\\\"normal\\\"\\n/>\\n```\\n\"","<!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DocumentCloud--default) -->\n<script lang=\"ts\">\n  import type { ContainerWidth } from '../@types/global';\n  /** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */\n\n  /**\n   * Width of the container, one of: normal, wide, wider, widest or fluid\n   */\n  export let width: ContainerWidth = 'normal';\n\n  /**\n   * The unique identifier for the document.\n   * @required\n   */\n  export let slug: string;\n\n  /**\n   * Alt text for the document.\n   * @required\n   */\n  export let altText: string;\n\n  /** Add an ID to target with SCSS. */\n  export let id: string = '';\n\n  /** Add a class to target with SCSS. */\n  export let cls: string = '';\n\n  import Block from '../Block/Block.svelte';\n</script>\n\n<Block width=\"{width}\" id=\"{id}\" cls=\"photo {cls}\">\n  <iframe\n    src=\"https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1\"\n    title=\"{altText}\"\n    width=\"700\"\n    height=\"540\"\n    style=\"border: 1px solid #aaa; width: 100%; height: 800px; height: calc(100vh - 100px);\"\n    sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox\"\n  ></iframe>\n</Block>\n","<script>\n  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n  // Don't lose the \"?raw\" in markdown imports!\n  // @ts-ignore\n  import componentDocs from './stories/docs/component.md?raw';\n\n  import DocumentCloud from './DocumentCloud.svelte';\n\n  import { withComponentDocs } from '$docs/utils/withParams.js';\n\n  const metaProps = {\n    ...withComponentDocs(componentDocs),\n    argTypes: {\n      width: {\n        control: 'select',\n        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],\n      },\n    },\n  };\n</script>\n\n<Meta\n  title=\"Components/DocumentCloud\"\n  component=\"{DocumentCloud}\"\n  {...metaProps}\n/>\n\n<Template let:args>\n  <DocumentCloud {...args} />\n</Template>\n\n<Story\n  name=\"Default\"\n  args=\"{{\n    width: 'normal',\n    slug: '3259984-Trump-Intelligence-Allegations',\n    altText: 'These Reports Allege Trump Has Deep Ties To Russia',\n  }}\"\n/>\n"],"names":["componentDocs","ctx","attr","iframe","iframe_src_value","insert","target","anchor","width","$$props","slug","altText","id","cls","DocumentCloud","withComponentDocs"],"mappings":"2TAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wGCiCqCC,EAAI,CAAA,EAAA,gCAAA,GAAAC,EAAAC,EAAA,MAAAC,CAAA,cAC5CH,EAAO,CAAA,CAAA,uQAFjBI,EAOSC,EAAAH,EAAAI,CAAA,uEANyCN,EAAI,CAAA,EAAA,gCAAA,iCAC5CA,EAAO,CAAA,CAAA,qEAHJA,EAAK,CAAA,KAAQA,EAAE,CAAA,eAAeA,EAAG,CAAA,0HAAjCA,EAAK,CAAA,cAAQA,EAAE,CAAA,yBAAeA,EAAG,CAAA,iJAvBnC,GAAA,CAAA,MAAAO,EAAwB,QAAQ,EAAAC,GAMhC,KAAAC,CAAY,EAAAD,GAMZ,QAAAE,CAAe,EAAAF,EAGf,CAAA,GAAAG,EAAa,EAAE,EAAAH,EAGf,CAAA,IAAAI,EAAc,EAAE,EAAAJ,26CCGRR,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,oLALXa,CAAa,EACrBb,EAAS,CAAA,kNAUX,MAAO,SACP,KAAM,yCACN,QAAS,uOAbCa,CAAa,SACrBb,EAAS,CAAA,CAAA,sRAdE,CACV,GAAAc,EAAkBf,CAAa,EAClC,SAAQ,CACN,MAAK,CACH,QAAS,SACT,QAAO,CAAG,SAAU,OAAQ,QAAS,SAAU,OAAO"}

docs/assets/EmbedPreviewerLink.stories-040b5ac9.css

@@ -0,0 +1 @@
+div.svelte-715e2e.svelte-715e2e{position:fixed;bottom:5px;left:10px;font-size:18px}div.svelte-715e2e a.svelte-715e2e{color:#ccc}div.svelte-715e2e a.svelte-715e2e:hover{color:#666}

docs/assets/EmbedPreviewerLink.stories-e14b4f26.js

@@ -0,0 +1,16 @@
+import{S as L,i as P,s as x,e as A,a as _,b as m,g as C,t as p,c as I,d as $,w as g,j as c,x as v,z as T,m as d,E as j,n as u,p as M,D as h,k as S,l as V}from"./index-25af778d.js";import{p as F,M as N,T as U,S as q}from"./collect-stories-cce06d4a.js";import{F as O}from"./fa-0c534c9e.js";import{w as E}from"./withParams-90715500.js";const D=`An embed tool for development in graphics kit.
+
+\`\`\`html
+<script>
+  import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
+
+  import { dev } from '$app/env';
+<\/script>
+
+<EmbedPreviewerLink dev="{dev}" />
+\`\`\`
+`;/*!
+ * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */var R={prefix:"far",iconName:"window-restore",icon:[512,512,[],"f2d2","M464 0H144c-26.5 0-48 21.5-48 48v48H48c-26.5 0-48 21.5-48 48v320c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h48c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-96 464H48V256h320v208zm96-96h-48V144c0-26.5-21.5-48-48-48H144V48h320v320z"]};function y(i){let r,a,e,n;return e=new O({props:{icon:R}}),{c(){r=g("div"),a=g("a"),c(e.$$.fragment),v(a,"rel","external"),v(a,"href","/embed-previewer"),v(a,"class","svelte-715e2e"),v(r,"class","svelte-715e2e")},m(t,l){_(t,r,l),T(r,a),d(e,a,null),n=!0},p:j,i(t){n||(m(e.$$.fragment,t),n=!0)},o(t){p(e.$$.fragment,t),n=!1},d(t){t&&$(r),u(e)}}}function W(i){let r,a,e=i[0]&&y();return{c(){e&&e.c(),r=A()},m(n,t){e&&e.m(n,t),_(n,r,t),a=!0},p(n,[t]){n[0]?e?(e.p(n,t),t&1&&m(e,1)):(e=y(),e.c(),m(e,1),e.m(r.parentNode,r)):e&&(C(),p(e,1,1,()=>{e=null}),I())},i(n){a||(m(e),a=!0)},o(n){p(e),a=!1},d(n){e&&e.d(n),n&&$(r)}}}function B(i,r,a){let{dev:e=!1}=r;return i.$$set=n=>{"dev"in n&&a(0,e=n.dev)},[e]}class w extends L{constructor(r){super(),P(this,r,B,W,x,{dev:0})}}w.__docgen={version:3,name:"EmbedPreviewerLink.svelte",data:[{visibility:"public",description:null,keywords:[],name:"dev",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function G(i){let r,a;const e=[i[0]];let n={};for(let t=0;t<e.length;t+=1)n=M(n,e[t]);return r=new w({props:n}),{c(){c(r.$$.fragment)},m(t,l){d(r,t,l),a=!0},p(t,l){const f=l&1?S(e,[V(t[0])]):{};r.$set(f)},i(t){a||(m(r.$$.fragment,t),a=!0)},o(t){p(r.$$.fragment,t),a=!1},d(t){u(r,t)}}}function J(i){let r,a,e,n,t,l;const f=[{title:"Utilities/EmbedPreviewerLink"},{component:w},E(D)];let b={};for(let s=0;s<f.length;s+=1)b=M(b,f[s]);return r=new N({props:b}),e=new U({props:{$$slots:{default:[G,({args:s})=>({0:s}),({args:s})=>s?1:0]},$$scope:{ctx:i}}}),t=new q({props:{name:"Default",args:{dev:!0}}}),{c(){c(r.$$.fragment),a=h(),c(e.$$.fragment),n=h(),c(t.$$.fragment)},m(s,o){d(r,s,o),_(s,a,o),d(e,s,o),_(s,n,o),d(t,s,o),l=!0},p(s,[o]){const H=o&0?S(f,[f[0],o&0&&{component:w},o&0&&V(E(D))]):{};r.$set(H);const k={};o&3&&(k.$$scope={dirty:o,ctx:s}),e.$set(k)},i(s){l||(m(r.$$.fragment,s),m(e.$$.fragment,s),m(t.$$.fragment,s),l=!0)},o(s){p(r.$$.fragment,s),p(e.$$.fragment,s),p(t.$$.fragment,s),l=!1},d(s){u(r,s),s&&$(a),u(e,s),s&&$(n),u(t,s)}}}class K extends L{constructor(r){super(),P(this,r,null,J,x,{})}}const z=F(K,{meta:{title:"Utilities/EmbedPreviewerLink"},stories:{"tpl:default":{storyId:"utilities-embedpreviewerlink--default",name:"default",template:!0,source:"<EmbedPreviewerLink {...args} />",hasArgs:!0},Default:{storyId:"utilities-embedpreviewerlink--default",name:"Default",template:!1,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","EmbedPreviewerLink","withComponentDocs"]}),ee=z.meta,te=["Default"],re=z.stories.Default;export{re as Default,te as __namedExportsOrder,ee as default};
+//# sourceMappingURL=EmbedPreviewerLink.stories-e14b4f26.js.map

docs/assets/FeaturePhoto.stories-49f91b06.css

@@ -0,0 +1 @@
+figure.svelte-1wfjqh7.svelte-1wfjqh7{width:100%;position:relative}figure.svelte-1wfjqh7 img.svelte-1wfjqh7{width:100%;margin:0}figure.svelte-1wfjqh7 .placeholder.svelte-1wfjqh7{background-color:#ccc;width:100%}figure.svelte-1wfjqh7 div.alt-warning.svelte-1wfjqh7{font-family:Knowledge,Source Sans Pro,Arial,sans-serif;padding:5px 10px;background-color:red;color:#fff;position:absolute;top:0;right:0;font-size:14px;line-height:16px}figure.svelte-1wfjqh7 figcaption.svelte-1wfjqh7{font-weight:400;font-size:.8rem;font-family:var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);color:var(--theme-colour-text-secondary, #666666)}

docs/assets/GraphicBlock-f9e1d390.css

@@ -0,0 +1 @@
+div.svelte-ayeg3m h3{margin-bottom:.5rem;color:var(--theme-colour-text-primary, #404040)}div.svelte-ayeg3m p{-webkit-font-smoothing:antialiased;font-family:Knowledge,Source Sans Pro,Arial,sans-serif;font-size:1.1rem;line-height:1.5rem;color:var(--theme-colour-text-primary, #404040);margin-bottom:1rem}div.svelte-ayeg3m p:last-of-type{margin-bottom:1rem}@media (max-width: 540px){div.svelte-ayeg3m p{font-size:1rem;line-height:1.35rem}}div.svelte-ayeg3m p a{color:currentColor;background-size:1px 1px;background-image:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');background-position:0 1.1rem;background-repeat:repeat-x;text-decoration:none}div.svelte-ayeg3m p a:hover{text-decoration:none}div.svelte-ayeg3m aside p{font-family:Knowledge,Source Sans Pro,Arial,sans-serif;margin-bottom:0;color:var(--theme-colour-text-secondary, #666666);font-size:.9rem;line-height:1.2rem}div.svelte-ayeg3m aside p:last-of-type{margin-bottom:0}@media (max-width: 540px){div.svelte-ayeg3m aside p{font-size:.8rem;line-height:1.1rem}}div.svelte-ayeg3m aside p a{color:currentColor;text-decoration:underline}div.svelte-ayeg3m aside p a:hover{text-decoration:underline}.visually-hidden.svelte-ayeg3m{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;-webkit-clip-path:polygon(0px 0px,0px 0px,0px 0px);clip-path:polygon(0px 0px,0px 0px,0px 0px);white-space:nowrap!important;border:0!important}

docs/assets/GraphicBlock.stories-83456093.css

@@ -0,0 +1 @@
+#g-_ai-chart-box.svelte-v5mpys.svelte-v5mpys,#g-_ai-chart-box.svelte-v5mpys .g-artboard.svelte-v5mpys{margin:0 auto}#g-_ai-chart-box.svelte-v5mpys p.svelte-v5mpys{margin:0}#g-_ai-chart-box.svelte-v5mpys .g-aiAbs.svelte-v5mpys{position:absolute}#g-_ai-chart-box.svelte-v5mpys .g-aiImg.svelte-v5mpys{position:absolute;top:0;display:block;width:100%!important;height:100%;background-size:contain;background-repeat:no-repeat}#g-_ai-chart-box.svelte-v5mpys .g-aiPointText p.svelte-v5mpys{white-space:nowrap}#g-_ai-chart-xs.svelte-v5mpys.svelte-v5mpys{position:relative;overflow:hidden}#g-_ai-chart-xs.svelte-v5mpys p.svelte-v5mpys{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;line-height:14px;height:auto;opacity:1;letter-spacing:0em;font-size:12px;text-align:left;color:#333;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;position:static}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle0.svelte-v5mpys{height:14px}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle1.svelte-v5mpys{font-style:italic;height:14px;text-align:center;color:#717375}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle2.svelte-v5mpys{font-weight:700;line-height:18px;height:18px;letter-spacing:.25em;font-size:15px}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle3.svelte-v5mpys{font-weight:700;line-height:16px;height:16px;font-size:13px}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle4.svelte-v5mpys{line-height:11px;height:11px;font-size:11px;text-align:right}#g-_ai-chart-sm.svelte-v5mpys.svelte-v5mpys{position:relative;overflow:hidden}#g-_ai-chart-sm.svelte-v5mpys p.svelte-v5mpys{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;line-height:17px;height:auto;opacity:1;letter-spacing:0em;font-size:14px;text-align:left;color:#333;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;position:static}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle0.svelte-v5mpys{height:17px}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle1.svelte-v5mpys{font-style:italic;height:17px;text-align:center;color:#717375}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle2.svelte-v5mpys{font-weight:700;line-height:15px;height:15px;letter-spacing:.25em;font-size:12px}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle3.svelte-v5mpys{font-weight:700;height:17px}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle4.svelte-v5mpys{font-weight:300;line-height:16px;height:16px;letter-spacing:.25em;font-size:13px;text-align:center;text-transform:uppercase;color:#86888b}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle5.svelte-v5mpys{line-height:14px;height:14px;font-size:12px}#g-_ai-chart-md.svelte-v5mpys.svelte-v5mpys{position:relative;overflow:hidden}#g-_ai-chart-md.svelte-v5mpys p.svelte-v5mpys{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;line-height:17px;height:auto;opacity:1;letter-spacing:0em;font-size:14px;text-align:left;color:#333;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;position:static}#g-_ai-chart-md.svelte-v5mpys .g-pstyle0.svelte-v5mpys{height:17px}#g-_ai-chart-md.svelte-v5mpys .g-pstyle1.svelte-v5mpys{font-style:italic;height:17px;text-align:center;color:#717375}#g-_ai-chart-md.svelte-v5mpys .g-pstyle2.svelte-v5mpys{font-weight:700;line-height:19px;height:19px;letter-spacing:.25em;font-size:16px}#g-_ai-chart-md.svelte-v5mpys .g-pstyle3.svelte-v5mpys{font-weight:300;height:17px;letter-spacing:.25em;text-align:center;text-transform:uppercase;color:#86888b}#g-_ai-chart-md.svelte-v5mpys .g-pstyle4.svelte-v5mpys{font-weight:700;line-height:19px;height:19px;font-size:16px}#g-_ai-chart-md.svelte-v5mpys .g-pstyle5.svelte-v5mpys{line-height:14px;height:14px;font-size:12px}div.demo-graphic.svelte-16z9wsi.svelte-16z9wsi{height:400px;background-color:#ddd;display:flex;align-items:center;justify-content:center}div.demo-graphic.svelte-16z9wsi img.svelte-16z9wsi{opacity:.4}

docs/assets/Headline-d51172bf.css

@@ -0,0 +1 @@
+header.headline.svelte-r3fe5t.svelte-r3fe5t{text-align:center;margin-top:4rem;margin-bottom:0;color:var(--theme-colour-text-primary, #404040)}header.headline.svelte-r3fe5t h1{font-size:4rem;margin:5px 0;line-height:1.1;font-family:var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);color:var(--theme-colour-text-primary, #404040)}header.headline.svelte-r3fe5t p{font-family:var(--theme-font-family-subhed, "Knowledge", "Source Sans Pro", Arial, sans-serif);color:var(--theme-colour-text-primary, #404040);margin:0;font-weight:200}header.headline.svelte-r3fe5t p.section-title{font-size:1rem;font-weight:800;color:var(--theme-colour-accent, #a00000)}header.headline.svelte-r3fe5t .article-metadata.svelte-r3fe5t{padding:40px 0;font-family:var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);color:var(--theme-colour-text-primary, #404040);text-align:center}header.headline.svelte-r3fe5t .article-metadata .byline-container.svelte-r3fe5t{margin-bottom:2px}header.headline.svelte-r3fe5t .article-metadata .byline.svelte-r3fe5t a{color:var(--theme-colour-text-primary, #404040);text-decoration:none}header.headline.svelte-r3fe5t .article-metadata .dateline-container.svelte-r3fe5t{text-transform:uppercase;color:var(--theme-colour-text-secondary, #666666);font-size:.8rem;line-height:1.2rem;letter-spacing:.2px}header.headline.svelte-r3fe5t div.crown-container.svelte-r3fe5t{display:flex;justify-content:center;align-items:center}

docs/assets/Headline.stories-62f04904.js

@@ -0,0 +1,123 @@
+import{S as ee,i as ne,s as te,p as I,j as d,D,m as u,a as c,k as T,l as C,b as f,t as h,n as $,d as p,w as _,x as i,E as y,M,z as k,Q as se}from"./index-25af778d.js";import{p as ae,M as oe,T as le,S as B}from"./collect-stories-cce06d4a.js";import{H as v}from"./Headline-3a2c7ebf.js";import{w as Q,a as H}from"./withParams-90715500.js";import"./Block-9c89ee1a.js";import"./marked.esm-76161808.js";const F=`Reuters Graphics headline
+
+\`\`\`html
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<Headline
+  hed="{'Reuters Graphics Interactive'}"
+  dek="{'The beginning of a beautiful page'}"
+  section="{'Global news'}"
+/>
+\`\`\`
+`,K=`Add a byline and dateline with \`byline\` and \`dateline\` named slots.
+
+\`\`\`html
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<Headline
+  hed="{'Reuters Graphics Interactive'}"
+  dek="{'The beginning of a beautiful page'}"
+  section="{'Global news'}"
+>
+  <!-- Use named slots to add a byline... -->
+  <span slot="byline">By <strong>Peppa Pig</strong></span>
+  <!-- ...and a dateline. -->
+  <span slot="dateline">Published Jan. 1, 2020</span>
+</Headline>
+\`\`\`
+`,V=`Use the \`hed\` and/or \`dek\` named slots to override those elements with completely custom markup.
+
+\`\`\`html
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<Headline>
+  <h1 slot="hed" class="custom-hed">
+    <span class="small block">The secret to</span>
+    “The Nutcracker's”
+    <span class="small block">success</span>
+  </h1>
+  <p slot="dek" class="custom-dek">
+    How “The Nutcracker” ballet became an
+    <span class="highlight">American holday staple</span>and a financial pillar
+    of ballet companies across the country
+  </p>
+</Headline>
+
+<style lang="scss">
+  h1 {
+    span.block {
+      display: block;
+      &.small {
+        font-size: 1.4rem;
+      }
+    }
+  }
+  p.custom-dek {
+    span {
+      background-color: rgb(255, 255, 154);
+      padding: 2px 4px;
+      margin: 0 4px;
+      font-weight: 600;
+    }
+  }
+</style>
+\`\`\`
+`,X=`Add a crown image in the \`crown\` named slot and override the headline in the \`hed\` named slot.
+
+\`\`\`html
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
+<\/script>
+
+<Headline>
+  <!-- Add a crown -->
+  <img slot="crown" src="{\`\${assets}/images/crown.png\`}" />
+  <!-- Override the hed with a named slot -->
+  <h2 slot="hed" class="spaced font-serif">Europa</h2>
+  <span slot="dateline">Published Jan. 1, 2020</span>
+</Headline>
+\`\`\`
+`,re=""+new URL("crown-7a9383fa.png",import.meta.url).href;function ie(r){let e,s;const n=[r[0]];let o={};for(let a=0;a<n.length;a+=1)o=I(o,n[a]);return e=new v({props:o}),{c(){d(e.$$.fragment)},m(a,m){u(e,a,m),s=!0},p(a,m){const g=m&1?T(n,[C(a[0])]):{};e.$set(g)},i(a){s||(f(e.$$.fragment,a),s=!0)},o(a){h(e.$$.fragment,a),s=!1},d(a){$(e,a)}}}function ce(r){let e;return{c(){e=_("span"),e.innerHTML="By <strong>Peppa Pig</strong>",i(e,"slot","byline")},m(s,n){c(s,e,n)},p:y,d(s){s&&p(e)}}}function pe(r){let e,s,n,o;return{c(){e=_("span"),s=M("Published "),n=_("time"),o=M("Jan. 1, 2020"),i(n,"datetime",new Date("2020-01-01").toISOString()),i(e,"slot","dateline")},m(a,m){c(a,e,m),k(e,s),k(e,n),k(n,o)},p:y,d(a){a&&p(e)}}}function me(r){let e,s;return e=new v({props:{hed:"Reuters Graphics Interactive",dek:"The beginning of a beautiful page",section:"Global news",$$slots:{dateline:[pe],byline:[ce]},$$scope:{ctx:r}}}),{c(){d(e.$$.fragment)},m(n,o){u(e,n,o),s=!0},p(n,o){const a={};o&2&&(a.$$scope={dirty:o,ctx:n}),e.$set(a)},i(n){s||(f(e.$$.fragment,n),s=!0)},o(n){h(e.$$.fragment,n),s=!1},d(n){$(e,n)}}}function de(r){let e;return{c(){e=_("h1"),e.innerHTML=`<span class="small svelte-1lbnlx4">The secret to</span>
+      “The Nutcracker&#39;s”
+      <span class="small svelte-1lbnlx4">success</span>`,i(e,"class","custom-hed svelte-1lbnlx4"),i(e,"slot","hed")},m(s,n){c(s,e,n)},p:y,d(s){s&&p(e)}}}function ue(r){let e;return{c(){e=_("p"),e.innerHTML='How “The Nutcracker” ballet became an <span class="svelte-1lbnlx4">American holday staple</span>and a financial pillar of ballet companies across the country',i(e,"class","custom-dek svelte-1lbnlx4"),i(e,"slot","dek")},m(s,n){c(s,e,n)},p:y,d(s){s&&p(e)}}}function fe(r){let e,s;return e=new v({props:{$$slots:{dek:[ue],hed:[de]},$$scope:{ctx:r}}}),{c(){d(e.$$.fragment)},m(n,o){u(e,n,o),s=!0},p(n,o){const a={};o&2&&(a.$$scope={dirty:o,ctx:n}),e.$set(a)},i(n){s||(f(e.$$.fragment,n),s=!0)},o(n){h(e.$$.fragment,n),s=!1},d(n){$(e,n)}}}function he(r){let e,s;return{c(){e=_("img"),i(e,"slot","crown"),se(e.src,s=re)||i(e,"src",s),i(e,"alt","Illustration of Europe")},m(n,o){c(n,e,o)},p:y,d(n){n&&p(e)}}}function $e(r){let e;return{c(){e=_("h1"),e.textContent="Europa",i(e,"slot","hed"),i(e,"class","spaced font-serif")},m(s,n){c(s,e,n)},p:y,d(s){s&&p(e)}}}function ge(r){let e,s,n,o;return{c(){e=_("span"),s=M("Published "),n=_("time"),o=M("Jan. 1, 2020"),i(n,"datetime",new Date("2020-01-01").toISOString()),i(e,"slot","dateline")},m(a,m){c(a,e,m),k(e,s),k(e,n),k(n,o)},p:y,d(a){a&&p(e)}}}function _e(r){let e,s;return e=new v({props:{$$slots:{dateline:[ge],hed:[$e],crown:[he]},$$scope:{ctx:r}}}),{c(){d(e.$$.fragment)},m(n,o){u(e,n,o),s=!0},p(n,o){const a={};o&2&&(a.$$scope={dirty:o,ctx:n}),e.$set(a)},i(n){s||(f(e.$$.fragment,n),s=!0)},o(n){h(e.$$.fragment,n),s=!1},d(n){$(e,n)}}}function we(r){let e,s,n,o,a,m,g,E,w,N,b,x;const W=[{title:"Components/Headline"},{component:v},Q(F)];let O={};for(let t=0;t<W.length;t+=1)O=I(O,W[t]);e=new oe({props:O}),n=new le({props:{$$slots:{default:[ie,({args:t})=>({0:t}),({args:t})=>t?1:0]},$$scope:{ctx:r}}}),a=new B({props:{name:"Default",args:{section:"World News",hed:"Reuters Graphics interactive"}}});const A=[{name:"With byline"},H(K)];let R={$$slots:{default:[me]},$$scope:{ctx:r}};for(let t=0;t<A.length;t+=1)R=I(R,A[t]);g=new B({props:R});const P=[{name:"Custom hed"},H(V)];let J={$$slots:{default:[fe]},$$scope:{ctx:r}};for(let t=0;t<P.length;t+=1)J=I(J,P[t]);w=new B({props:J});const G=[{name:"With crown"},H(X)];let L={$$slots:{default:[_e]},$$scope:{ctx:r}};for(let t=0;t<G.length;t+=1)L=I(L,G[t]);return b=new B({props:L}),{c(){d(e.$$.fragment),s=D(),d(n.$$.fragment),o=D(),d(a.$$.fragment),m=D(),d(g.$$.fragment),E=D(),d(w.$$.fragment),N=D(),d(b.$$.fragment)},m(t,l){u(e,t,l),c(t,s,l),u(n,t,l),c(t,o,l),u(a,t,l),c(t,m,l),u(g,t,l),c(t,E,l),u(w,t,l),c(t,N,l),u(b,t,l),x=!0},p(t,[l]){const Z=l&0?T(W,[W[0],l&0&&{component:v},l&0&&C(Q(F))]):{};e.$set(Z);const U={};l&3&&(U.$$scope={dirty:l,ctx:t}),n.$set(U);const j=l&0?T(A,[A[0],C(H(K))]):{};l&2&&(j.$$scope={dirty:l,ctx:t}),g.$set(j);const q=l&0?T(P,[P[0],C(H(V))]):{};l&2&&(q.$$scope={dirty:l,ctx:t}),w.$set(q);const z=l&0?T(G,[G[0],C(H(X))]):{};l&2&&(z.$$scope={dirty:l,ctx:t}),b.$set(z)},i(t){x||(f(e.$$.fragment,t),f(n.$$.fragment,t),f(a.$$.fragment,t),f(g.$$.fragment,t),f(w.$$.fragment,t),f(b.$$.fragment,t),x=!0)},o(t){h(e.$$.fragment,t),h(n.$$.fragment,t),h(a.$$.fragment,t),h(g.$$.fragment,t),h(w.$$.fragment,t),h(b.$$.fragment,t),x=!1},d(t){$(e,t),t&&p(s),$(n,t),t&&p(o),$(a,t),t&&p(m),$(g,t),t&&p(E),$(w,t),t&&p(N),$(b,t)}}}class Y extends ee{constructor(e){super(),ne(this,e,null,we,te,{})}}Y.__docgen={version:3,name:"Headline.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const S=ae(Y,{meta:{title:"Components/Headline"},stories:{"tpl:default":{storyId:"components-headline--default",name:"default",template:!0,source:"<Headline {...args} />",hasArgs:!0},Default:{storyId:"components-headline--default",name:"Default",template:!1,hasArgs:!1},WithByline:{storyId:"components-headline--with-byline",name:"With byline",template:!1,source:`<Headline
+  hed="{'Reuters Graphics Interactive'}"
+  dek="{'The beginning of a beautiful page'}"
+  section="{'Global news'}"
+>
+  <!-- Use named slots to add a byline... -->
+  <span slot="byline">By <strong>Peppa Pig</strong></span>
+  <!-- ...and a dateline. -->
+  <span slot="dateline"
+    >Published <time datetime="{new Date('2020-01-01').toISOString()}"
+      >Jan. 1, 2020</time
+    ></span
+  >
+</Headline>`,hasArgs:!1},CustomHed:{storyId:"components-headline--custom-hed",name:"Custom hed",template:!1,source:`<Headline>
+  <h1 class="custom-hed" slot="hed">
+    <span class="small">The secret to</span>
+    “The Nutcracker's”
+    <span class="small">success</span>
+  </h1>
+  <p class="custom-dek" slot="dek">
+    How “The Nutcracker” ballet became an <span>American holday staple</span
+    >and a financial pillar of ballet companies across the country
+  </p>
+</Headline>`,hasArgs:!1},WithCrown:{storyId:"components-headline--with-crown",name:"With crown",template:!1,source:`<Headline>
+  <!-- Add a crown -->
+  <img slot="crown" src="{crownImgSrc}" alt="Illustration of Europe" />
+  <!-- Override the hed with a named slot -->
+  <h1 slot="hed" class="spaced font-serif">Europa</h1>
+  <span slot="dateline"
+    >Published <time datetime="{new Date('2020-01-01').toISOString()}"
+      >Jan. 1, 2020</time
+    ></span
+  >
+</Headline>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","withBylineDocs","customHedDocs","withCrownDocs","crownImgSrc","Headline","withComponentDocs","withStoryDocs"]}),Ie=S.meta,Te=["Default","WithByline","CustomHed","WithCrown"],Ce=S.stories.Default,Se=S.stories.WithByline,xe=S.stories.CustomHed,We=S.stories.WithCrown;export{xe as CustomHed,Ce as Default,Se as WithByline,We as WithCrown,Te as __namedExportsOrder,Ie as default};
+//# sourceMappingURL=Headline.stories-62f04904.js.map

docs/assets/Headline.stories-94b84d2e.css

@@ -0,0 +1 @@
+h1.custom-hed.svelte-1lbnlx4 span.svelte-1lbnlx4{display:block}h1.custom-hed.svelte-1lbnlx4 span.small.svelte-1lbnlx4{font-size:1.4rem}p.custom-dek.svelte-1lbnlx4 span.svelte-1lbnlx4{background-color:#ffff9a;padding:2px 4px;margin:0 4px;font-weight:600}

docs/assets/NoteText.stories-0f84acc8.js

@@ -0,0 +1,27 @@
+import{S as N,i as b,s as v,j as p,m as c,b as f,t as u,n as d,e as S,a as $,d as _,W as F,p as C,D as y,k as I,l as M}from"./index-25af778d.js";import{p as q,M as B,T as E,S as J}from"./collect-stories-cce06d4a.js";import{m as k}from"./marked.esm-76161808.js";import{B as R}from"./Block-9c89ee1a.js";import{w}from"./withParams-90715500.js";const T=`Note text includes notes to the main article — usually things like sources, clarifiying notes and minor corrections at the end of a story.
+
+Note text can be fed a markdown string, but text styling is intentionally restricted in this component. For example, all heading tags are forced to a single font size and weight.
+
+\`\`\`html
+<script>
+  import { NoteText } from '@reuters-graphics/graphics-components';
+
+  const markdownText = \`### Source
+
+Reuters research.
+
+### Credits
+
+People.\`;
+<\/script>
+
+<NoteText text="{markdownText}" />
+\`\`\`
+`;function D(a){let e,n=k.parse(a[0])+"",t;return{c(){e=new F(!1),t=S(),e.a=t},m(o,r){e.m(n,o,r),$(o,t,r)},p(o,r){r&1&&n!==(n=k.parse(o[0])+"")&&e.p(n)},d(o){o&&_(t),o&&e.d()}}}function z(a){let e,n=a[0]&&D(a);return{c(){n&&n.c(),e=S()},m(t,o){n&&n.m(t,o),$(t,e,o)},p(t,o){t[0]?n?n.p(t,o):(n=D(t),n.c(),n.m(e.parentNode,e)):n&&(n.d(1),n=null)},d(t){n&&n.d(t),t&&_(e)}}}function H(a){let e,n;return e=new R({props:{cls:"notes mb-6",$$slots:{default:[z]},$$scope:{ctx:a}}}),{c(){p(e.$$.fragment)},m(t,o){c(e,t,o),n=!0},p(t,[o]){const r={};o&3&&(r.$$scope={dirty:o,ctx:t}),e.$set(r)},i(t){n||(f(e.$$.fragment,t),n=!0)},o(t){u(e.$$.fragment,t),n=!1},d(t){d(e,t)}}}function O(a,e,n){let{text:t}=e;return a.$$set=o=>{"text"in o&&n(0,t=o.text)},[t]}class g extends N{constructor(e){super(),b(this,e,O,H,v,{text:0})}}g.__docgen={version:3,name:"NoteText.svelte",data:[{keywords:[{name:"type",description:"{string}"},{name:"required",description:""}],visibility:"public",description:"A markdown text string.",name:"text",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"}}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function P(a){let e,n;const t=[a[0]];let o={};for(let r=0;r<t.length;r+=1)o=C(o,t[r]);return e=new g({props:o}),{c(){p(e.$$.fragment)},m(r,i){c(e,r,i),n=!0},p(r,i){const m=i&1?I(t,[M(r[0])]):{};e.$set(m)},i(r){n||(f(e.$$.fragment,r),n=!0)},o(r){u(e.$$.fragment,r),n=!1},d(r){d(e,r)}}}function W(a){let e,n,t,o,r,i;const m=[{title:"Components/NoteText"},{component:g},w(T)];let x={};for(let s=0;s<m.length;s+=1)x=C(x,m[s]);return e=new B({props:x}),t=new E({props:{$$slots:{default:[P,({args:s})=>({0:s}),({args:s})=>s?1:0]},$$scope:{ctx:a}}}),r=new J({props:{name:"Default",args:{text:`## Source
+
+[European Forest Fire Information System](https://effis.jrc.ec.europa.eu/); Reuters research
+
+#### Credits
+
+Jane Doe & John Doe`}}}),{c(){p(e.$$.fragment),n=y(),p(t.$$.fragment),o=y(),p(r.$$.fragment)},m(s,l){c(e,s,l),$(s,n,l),c(t,s,l),$(s,o,l),c(r,s,l),i=!0},p(s,[l]){const A=l&0?I(m,[m[0],l&0&&{component:g},l&0&&M(w(T))]):{};e.$set(A);const h={};l&3&&(h.$$scope={dirty:l,ctx:s}),t.$set(h)},i(s){i||(f(e.$$.fragment,s),f(t.$$.fragment,s),f(r.$$.fragment,s),i=!0)},o(s){u(e.$$.fragment,s),u(t.$$.fragment,s),u(r.$$.fragment,s),i=!1},d(s){d(e,s),s&&_(n),d(t,s),s&&_(o),d(r,s)}}}class G extends N{constructor(e){super(),b(this,e,null,W,v,{})}}const j=q(G,{meta:{title:"Components/NoteText"},stories:{"tpl:default":{storyId:"components-notetext--default",name:"default",template:!0,source:"<NoteText {...args} />",hasArgs:!0},Default:{storyId:"components-notetext--default",name:"Default",template:!1,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","NoteText","withComponentDocs"]}),X=j.meta,Y=["Default"],Z=j.stories.Default;export{Z as Default,Y as __namedExportsOrder,X as default};
+//# sourceMappingURL=NoteText.stories-0f84acc8.js.map

docs/assets/NoteText.stories-0f84acc8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoteText.stories-0f84acc8.js","sources":["../../src/components/NoteText/stories/docs/component.md?raw","../../src/components/NoteText/NoteText.svelte","../../src/components/NoteText/NoteText.stories.svelte"],"sourcesContent":["export default \"Note text includes notes to the main article — usually things like sources, clarifiying notes and minor corrections at the end of a story.\\n\\nNote text can be fed a markdown string, but text styling is intentionally restricted in this component. For example, all heading tags are forced to a single font size and weight.\\n\\n```html\\n<script>\\n  import { NoteText } from '@reuters-graphics/graphics-components';\\n\\n  const markdownText = `### Source\\n\\nReuters research.\\n\\n### Credits\\n\\nPeople.`;\\n</script>\\n\\n<NoteText text=\\\"{markdownText}\\\" />\\n```\\n\"","<!-- @component `NoteText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-NoteText--default) -->\n<script lang=\"ts\">\n  /**\n   * A markdown text string.\n   * @type {string}\n   * @required\n   */\n  export let text: string;\n\n  import { marked } from 'marked';\n  import Block from '../Block/Block.svelte';\n</script>\n\n<Block cls=\"notes mb-6\">\n  {#if text}\n    {@html marked.parse(text)}\n  {/if}\n</Block>\n\n<!-- svelte-ignore css-unused-selector -->\n<style lang=\"scss\" global>\n  // Same as body text... we probably should unbind these styles from the component\n  // and import them in the app through a separate scss file.\n  @import '../../scss/mixins';\n\n  div.article-block.notes {\n    @include note-text;\n  }\n</style>\n","<script>\n  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n  // @ts-ignore\n  import componentDocs from './stories/docs/component.md?raw';\n\n  import NoteText from './NoteText.svelte';\n\n  import { withComponentDocs } from '$lib/docs/utils/withParams.js';\n</script>\n\n<Meta\n  title=\"Components/NoteText\"\n  component=\"{NoteText}\"\n  {...withComponentDocs(componentDocs)}\n/>\n\n<Template let:args>\n  <NoteText {...args} />\n</Template>\n\n<Story\n  name=\"Default\"\n  args=\"{{\n    text: `## Source\n\n[European Forest Fire Information System](https://effis.jrc.ec.europa.eu/); Reuters research\n\n#### Credits\n\nJane Doe & John Doe`,\n  }}\"\n/>\n"],"names":["componentDocs","marked","ctx","html_tag","raw_value","create_if_block","text","$$props","NoteText","withComponentDocs","dirty","get_spread_object"],"mappings":"qVAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;wBCeJC,EAAO,MAAMC,EAAI,CAAA,CAAA,EAAA,wFAAjBD,EAAO,MAAMC,EAAI,CAAA,CAAA,EAAA,KAAAC,EAAA,EAAAC,CAAA,iDADrBF,EAAI,CAAA,GAAAG,EAAAH,CAAA,iEAAJA,EAAI,CAAA,sZAPE,KAAAI,CAAY,EAAAC,ihBCWTL,EAAI,CAAA,CAAA,oJAAJA,EAAI,CAAA,CAAA,CAAA,CAAA,+KALNM,CAAQ,EAChBC,EAAkBT,CAAa,kNAUjC,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uMAXMQ,CAAQ,EAChBE,EAAA,GAAAC,EAAAF,EAAkBT,CAAa,CAAA"}

docs/assets/NoteText.stories-b1f5890a.css

@@ -0,0 +1 @@
+.paragraph-size{font-size:1.3rem;line-height:2.1rem}.paragraph-size.font-sans{font-size:1.1rem;line-height:1.75rem}@media (max-width: 540px){.paragraph-size{font-size:1.1rem;line-height:1.8rem}.paragraph-size.font-sans{font-size:1rem;line-height:1.6rem}}.paragraph-size.important{font-size:1.3rem!important;line-height:2.1rem!important}.paragraph-size.important.font-sans{font-size:1.1rem!important;line-height:1.8rem!important}@media (max-width: 540px){.paragraph-size.important{font-size:1.1rem!important;line-height:1.8rem!important}.paragraph-size.important.font-sans{font-size:1rem!important;line-height:1.6rem!important}}.small-size{font-size:.9rem;line-height:1.2rem}@media (max-width: 540px){.small-size{font-size:.8rem;line-height:1.1rem}}.small-size.important{font-size:.9rem!important;line-height:1.2rem!important}@media (max-width: 540px){.small-size.important{font-size:.8rem!important;line-height:1.1rem!important}}.blockquote-size{font-size:1.6rem;line-height:2.1rem}@media (max-width: 540px){.blockquote-size{font-size:1.3rem;line-height:1.9rem}}.blockquote-size.important{font-size:1.6rem!important;line-height:2rem!important}@media (max-width: 540px){.blockquote-size.important{font-size:1.3rem!important;line-height:1.8rem!important}}div.article-block.notes h2,div.article-block.notes h3,div.article-block.notes h4,div.article-block.notes h5,div.article-block.notes h6{font-family:var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);color:var(--theme-colour-text-primary);margin:1rem 0 0;font-size:1rem;letter-spacing:.5px}div.article-block.notes p{font-family:var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);font-size:1rem;font-weight:200;color:var(--theme-colour-text-primary)}div.article-block.notes p a{color:currentColor;background-size:1px 1px;background-image:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');background-position:0 1.1rem;background-repeat:repeat-x;text-decoration:none}div.article-block.notes p a:hover{text-decoration:none}

docs/assets/PaddingReset-66c58345.css

@@ -0,0 +1 @@
+div.svelte-vjyw8p{width:100%;padding:0 15px}

docs/assets/PaddingReset-d848e1b7.js

@@ -0,0 +1,2 @@
+import{S as v,i as g,s as h,e as w,a as _,g as I,t as u,c as F,b as c,d as p,q as m,u as b,r as k,v as y,w as P,x as R}from"./index-25af778d.js";function q(a){let t;const s=a[2].default,n=m(s,a,a[1],null);return{c(){n&&n.c()},m(e,l){n&&n.m(e,l),t=!0},p(e,l){n&&n.p&&(!t||l&2)&&b(n,s,e,e[1],t?y(s,e[1],l,null):k(e[1]),null)},i(e){t||(c(n,e),t=!0)},o(e){u(n,e),t=!1},d(e){n&&n.d(e)}}}function S(a){let t,s;const n=a[2].default,e=m(n,a,a[1],null);return{c(){t=P("div"),e&&e.c(),R(t,"class","svelte-vjyw8p")},m(l,i){_(l,t,i),e&&e.m(t,null),s=!0},p(l,i){e&&e.p&&(!s||i&2)&&b(e,n,l,l[1],s?y(n,l[1],i,null):k(l[1]),null)},i(l){s||(c(e,l),s=!0)},o(l){u(e,l),s=!1},d(l){l&&p(t),e&&e.d(l)}}}function j(a){let t,s,n,e;const l=[S,q],i=[];function f(o,r){return o[0]?0:1}return t=f(a),s=i[t]=l[t](a),{c(){s.c(),n=w()},m(o,r){i[t].m(o,r),_(o,n,r),e=!0},p(o,[r]){let d=t;t=f(o),t===d?i[t].p(o,r):(I(),u(i[d],1,1,()=>{i[d]=null}),F(),s=i[t],s?s.p(o,r):(s=i[t]=l[t](o),s.c()),c(s,1),s.m(n.parentNode,n))},i(o){e||(c(s),e=!0)},o(o){u(s),e=!1},d(o){i[t].d(o),o&&p(n)}}}function C(a,t,s){let{$$slots:n={},$$scope:e}=t,{containerIsFluid:l=!0}=t;return a.$$set=i=>{"containerIsFluid"in i&&s(0,l=i.containerIsFluid),"$$scope"in i&&s(1,e=i.$$scope)},[l,e,n]}class N extends v{constructor(t){super(),g(this,t,C,j,h,{containerIsFluid:0})}}N.__docgen={version:3,name:"PaddingReset.svelte",data:[{keywords:[],visibility:"public",description:"If parent container is fluid, which resets the padding around contained elements.",name:"containerIsFluid",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!0}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"Padded content",name:"default"}],refs:[]};export{N as P};
+//# sourceMappingURL=PaddingReset-d848e1b7.js.map

docs/assets/PaddingReset-d848e1b7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaddingReset-d848e1b7.js","sources":["../../src/components/PaddingReset/PaddingReset.svelte"],"sourcesContent":["<script>\n  /**\n   * If parent container is fluid, which resets the padding around contained elements.\n   */\n  export let containerIsFluid = true;\n</script>\n\n{#if containerIsFluid}\n  <div>\n    <!-- Padded content -->\n    <slot />\n  </div>\n{:else}\n  <!-- Padded content -->\n  <slot />\n{/if}\n\n<style>\n  div {\n    width: 100%;\n    padding: 0 15px;\n  }\n</style>\n"],"names":["insert","target","div","anchor","ctx","containerIsFluid","$$props"],"mappings":"ggBAQEA,EAGKC,EAAAC,EAAAC,CAAA,sOAJFC,EAAgB,CAAA,EAAA,wVAHR,CAAA,iBAAAC,EAAmB,EAAI,EAAAC"}

docs/assets/PaddingReset.stories-44392a17.css

@@ -0,0 +1 @@
+div.svelte-2p4lln{height:30px;width:100%;margin-bottom:2px}div.outer.svelte-2p4lln{background:grey}div.inner.svelte-2p4lln{background:salmon}

docs/assets/PaddingReset.stories-5d891185.js

@@ -0,0 +1,42 @@
+import{S,i as M,s as T,p as R,j as c,D as h,m,a as $,k as B,l as b,b as f,t as u,n as g,d as _,w as D,x as y,E as j}from"./index-25af778d.js";import{p as C,M as F,T as E,S as U}from"./collect-stories-cce06d4a.js";import{P as w}from"./PaddingReset-d848e1b7.js";import{B as q}from"./Block-9c89ee1a.js";import{w as P}from"./withParams-90715500.js";const k=`Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on text that's adajcent to it.
+
+The \`PaddingReset\` component resets padding on the \`Article\` well that's been cancelled by a \`Block\` with a \`fluid\` width.
+
+\`\`\`html
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<Block width="fluid">
+  <!-- An edge-to-edge image -->
+  <img src="https//..." alt="..." width="100%" />
+  <PaddingReset>
+    <p>A caption for the image that will still be padded.</p>
+  </PaddingReset>
+</Block>
+\`\`\`
+
+You can also add the padding conditionally by using the \`containerIsFluid\` prop, which is what many other components in this library do.
+
+\`\`\`html
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+
+  export let src = 'https://...';
+  export let width = 'fluid';
+<\/script>
+
+<Block width="{width}">
+  <img src="{src}" alt="..." width="100%" />
+  <PaddingReset containerIsFluid="{width === 'fluid'}">
+    <p>A caption for the image that will be padded when Block is fluid.</p>
+  </PaddingReset>
+</Block>
+\`\`\`
+`;function O(d){let t;return{c(){t=D("div"),y(t,"class","inner svelte-2p4lln")},m(a,s){$(a,t,s)},p:j,d(a){a&&_(t)}}}function Y(d){let t,a,s,o;const i=[d[0]];let p={$$slots:{default:[O]},$$scope:{ctx:d}};for(let n=0;n<i.length;n+=1)p=R(p,i[n]);return s=new w({props:p}),{c(){t=D("div"),a=h(),c(s.$$.fragment),y(t,"class","outer svelte-2p4lln")},m(n,r){$(n,t,r),$(n,a,r),m(s,n,r),o=!0},p(n,r){const e=r&1?B(i,[b(n[0])]):{};r&2&&(e.$$scope={dirty:r,ctx:n}),s.$set(e)},i(n){o||(f(s.$$.fragment,n),o=!0)},o(n){u(s.$$.fragment,n),o=!1},d(n){n&&_(t),n&&_(a),g(s,n)}}}function z(d){let t,a;return t=new q({props:{width:"fluid",$$slots:{default:[Y]},$$scope:{ctx:d}}}),{c(){c(t.$$.fragment)},m(s,o){m(t,s,o),a=!0},p(s,o){const i={};o&3&&(i.$$scope={dirty:o,ctx:s}),t.$set(i)},i(s){a||(f(t.$$.fragment,s),a=!0)},o(s){u(t.$$.fragment,s),a=!1},d(s){g(t,s)}}}function G(d){let t,a,s,o,i,p;const n=[{title:"Utilities/PaddingReset"},{component:w},P(k)];let r={};for(let e=0;e<n.length;e+=1)r=R(r,n[e]);return t=new F({props:r}),s=new E({props:{$$slots:{default:[z,({args:e})=>({0:e}),({args:e})=>e?1:0]},$$scope:{ctx:d}}}),i=new U({props:{name:"Default",args:{containerIsFluid:!0}}}),{c(){c(t.$$.fragment),a=h(),c(s.$$.fragment),o=h(),c(i.$$.fragment)},m(e,l){m(t,e,l),$(e,a,l),m(s,e,l),$(e,o,l),m(i,e,l),p=!0},p(e,[l]){const I=l&0?B(n,[n[0],l&0&&{component:w},l&0&&b(P(k))]):{};t.$set(I);const v={};l&3&&(v.$$scope={dirty:l,ctx:e}),s.$set(v)},i(e){p||(f(t.$$.fragment,e),f(s.$$.fragment,e),f(i.$$.fragment,e),p=!0)},o(e){u(t.$$.fragment,e),u(s.$$.fragment,e),u(i.$$.fragment,e),p=!1},d(e){g(t,e),e&&_(a),g(s,e),e&&_(o),g(i,e)}}}class x extends S{constructor(t){super(),M(this,t,null,G,T,{})}}x.__docgen={version:3,name:"PaddingReset.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const A=C(x,{meta:{title:"Utilities/PaddingReset"},stories:{"tpl:default":{storyId:"utilities-paddingreset--default",name:"default",template:!0,source:`<Block width="fluid">
+  <div class="outer"></div>
+  <PaddingReset {...args}>
+    <div class="inner"></div>
+  </PaddingReset>
+</Block>`,hasArgs:!0},Default:{storyId:"utilities-paddingreset--default",name:"Default",template:!1,hasArgs:!0}},allocatedIds:["default","Meta","Template","Story","componentDocs","PaddingReset","Block","withComponentDocs"]}),Q=A.meta,V=["Default"],W=A.stories.Default;export{W as Default,V as __namedExportsOrder,Q as default};
+//# sourceMappingURL=PaddingReset.stories-5d891185.js.map

docs/assets/PaddingReset.stories-5d891185.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaddingReset.stories-5d891185.js","sources":["../../src/components/PaddingReset/stories/docs/component.md?raw","../../src/components/PaddingReset/PaddingReset.stories.svelte"],"sourcesContent":["export default \"Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on text that's adajcent to it.\\n\\nThe `PaddingReset` component resets padding on the `Article` well that's been cancelled by a `Block` with a `fluid` width.\\n\\n```html\\n<script>\\n  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';\\n</script>\\n\\n<Block width=\\\"fluid\\\">\\n  <!-- An edge-to-edge image -->\\n  <img src=\\\"https//...\\\" alt=\\\"...\\\" width=\\\"100%\\\" />\\n  <PaddingReset>\\n    <p>A caption for the image that will still be padded.</p>\\n  </PaddingReset>\\n</Block>\\n```\\n\\nYou can also add the padding conditionally by using the `containerIsFluid` prop, which is what many other components in this library do.\\n\\n```html\\n<script>\\n  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';\\n\\n  export let src = 'https://...';\\n  export let width = 'fluid';\\n</script>\\n\\n<Block width=\\\"{width}\\\">\\n  <img src=\\\"{src}\\\" alt=\\\"...\\\" width=\\\"100%\\\" />\\n  <PaddingReset containerIsFluid=\\\"{width === 'fluid'}\\\">\\n    <p>A caption for the image that will be padded when Block is fluid.</p>\\n  </PaddingReset>\\n</Block>\\n```\\n\"","<script>\n  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';\n\n  // @ts-ignore\n  import componentDocs from './stories/docs/component.md?raw';\n\n  import PaddingReset from './PaddingReset.svelte';\n  import Block from '../Block/Block.svelte';\n\n  import { withComponentDocs } from '$lib/docs/utils/withParams.js';\n</script>\n\n<Meta\n  title=\"Utilities/PaddingReset\"\n  component=\"{PaddingReset}\"\n  {...withComponentDocs(componentDocs)}\n/>\n\n<Template let:args>\n  <Block width=\"fluid\">\n    <div class=\"outer\"></div>\n    <PaddingReset {...args}>\n      <div class=\"inner\"></div>\n    </PaddingReset>\n  </Block>\n</Template>\n\n<Story\n  name=\"Default\"\n  args=\"{{\n    containerIsFluid: true,\n  }}\"\n  let:args\n/>\n\n<style lang=\"scss\">\n  div {\n    height: 30px;\n    width: 100%;\n    margin-bottom: 2px;\n    &.outer {\n      background: grey;\n    }\n    &.inner {\n      background: salmon;\n    }\n  }\n</style>\n"],"names":["componentDocs","insert","target","div","anchor","ctx","PaddingReset","withComponentDocs","dirty","get_spread_object"],"mappings":"yVAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;uFCsBTC,EAAwBC,EAAAC,EAAAC,CAAA,yDADRC,EAAI,CAAA,CAAA,oMADtBJ,EAAwBC,EAAAC,EAAAC,CAAA,oDACNC,EAAI,CAAA,CAAA,CAAA,CAAA,igBAPZC,CAAY,EACpBC,EAAkBP,CAAa,4MAejC,KAAA,CAAA,iBAAkB,EAAI,mLAhBZM,CAAY,EACpBE,EAAA,GAAAC,EAAAF,EAAkBP,CAAa,CAAA;;;;;"}

docs/assets/PhotoCarousel.stories-06b9351f.css

@@ -0,0 +1 @@
+@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.carousel-container.svelte-1pvwb00.svelte-1pvwb00{margin-bottom:10px}.carousel-container.svelte-1pvwb00 .photo-slide.svelte-1pvwb00{height:100%;width:100%;position:relative}.carousel-container.svelte-1pvwb00 .photo-slide figure.svelte-1pvwb00{margin:0;width:100%;position:relative}.carousel-container.svelte-1pvwb00 .photo-slide figure img.svelte-1pvwb00{height:100%;width:100%}.carousel-container.svelte-1pvwb00 .photo-slide figure span.credit.svelte-1pvwb00{position:absolute;bottom:4px;left:10px;margin:0;font-size:.7rem;color:#fff;letter-spacing:.75px;text-shadow:-1px -1px 0 #333,1px -1px 0 #333,-1px 1px 0 #333,1px 1px 0 #333;font-family:var(--theme-font-family-note)}.carousel-container.svelte-1pvwb00 .photo-slide figure span.credit.contain-fit.svelte-1pvwb00{left:50%;transform:translate(-50%)}.carousel-container.svelte-1pvwb00 .splide{max-height:100%}.carousel-container.svelte-1pvwb00 .splide__arrows{width:275px;margin:0 auto;display:flex;justify-content:space-between;padding:4px 0 0}.carousel-container.svelte-1pvwb00 .splide__arrows button{display:flex;font-size:12px;height:30px;width:30px;padding:0;justify-content:center;align-items:center;border:1px solid transparent;border-radius:50%;background-color:transparent;color:var(--theme-colour-text-secondary);opacity:.4}.carousel-container.svelte-1pvwb00 .splide__arrows button:hover{opacity:1;border-color:var(--theme-colour-text-secondary);color:var(--theme-colour-text-secondary)}.carousel-container.svelte-1pvwb00 .splide__arrows button:disabled{opacity:.4}.carousel-container.svelte-1pvwb00 .splide__arrows button:disabled:hover{border-color:transparent}.carousel-container.svelte-1pvwb00 ul.splide__pagination{width:200px;padding:0;text-align:center;margin:-26px auto 0;display:flex;flex-wrap:nowrap}.carousel-container.svelte-1pvwb00 ul.splide__pagination li{flex-grow:1}.carousel-container.svelte-1pvwb00 ul.splide__pagination li button{width:100%;height:7px;border-radius:0;margin:0;padding:0;border:1px solid var(--theme-colour-background);background:var(--theme-colour-text-secondary);opacity:.4}.carousel-container.svelte-1pvwb00 ul.splide__pagination li button.is-active{opacity:1}.carousel-container.svelte-1pvwb00 p.caption.svelte-1pvwb00{margin:5px 0 0;font-family:var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);color:var(--theme-colour-text-secondary, #666666);font-size:.85rem;line-height:1.1rem;font-weight:300}p.svelte-6ggfq3{position:absolute;color:#fff;background-color:#0009;font-family:sans-serif;font-size:.8rem;padding:0 5px}p.custom-credit.svelte-6ggfq3{top:0;right:0}p.custom-caption.svelte-6ggfq3{bottom:5px;left:0}

docs/assets/PhotoPack.stories-45b503ec.css

@@ -0,0 +1 @@
+div.photopack-container.svelte-icc27n.svelte-icc27n{display:block;width:100%;margin-bottom:10px}div.photopack-container.svelte-icc27n div.photopack-row.svelte-icc27n{display:flex;justify-content:space-between}div.photopack-container.svelte-icc27n div.photopack-row figure.svelte-icc27n{flex:1;margin:0;padding:0;position:relative}div.photopack-container.svelte-icc27n div.photopack-row figure img.svelte-icc27n{margin:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}div.photopack-container.svelte-icc27n div.photopack-row figure div.alt-warning.svelte-icc27n{font-family:Knowledge,Source Sans Pro,Arial,sans-serif;padding:5px 10px;background-color:red;color:#fff;position:absolute;top:0;right:0;font-size:14px;line-height:16px}div.captions-container.svelte-icc27n div.caption.svelte-icc27n{margin:0 0 .6rem}div.captions-container.svelte-icc27n div.caption.svelte-icc27n:last-of-type{margin-bottom:0}div.captions-container.svelte-icc27n div.caption.svelte-icc27n p{font-size:.85rem;line-height:1.1rem;font-family:var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);color:var(--theme-colour-text-secondary, #666666);margin:0;font-weight:300}

docs/assets/PymChild.stories-5a8c1d50.js

@@ -0,0 +1,31 @@
+import{S as v,i as D,s as b,o as A,p as S,j as c,D as _,m as d,a as y,k,l as x,b as u,t as f,n as h,d as $,w as H}from"./index-25af778d.js";import{w as I,p as T,M as U,T as N,S as q}from"./collect-stories-cce06d4a.js";import{p as E}from"./pym.v1-49c58be6.js";import{w as P}from"./withParams-90715500.js";import"./_commonjsHelpers-725317a4.js";const w=`A Pym.js child instance for embeddables.
+
+\`\`\`html
+<script>
+  import { PymChild } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<PymChild polling="{500}" />
+\`\`\`
+
+You can access the Pym.js child through its store in other components to send custom height updates to parent frames:
+
+\`\`\`html
+<script>
+  import {
+    PymChild,
+    pymChildStore,
+  } from '@reuters-graphics/graphics-components';
+
+  const updateHeight = () => {
+    if ($pymChildStore) $pymChildStore.sendHeight();
+  };
+<\/script>
+
+<PymChild />
+
+<button on:click="{updateHeight}">Update height</button>
+\`\`\`
+`,O=I(null);function V(p,s,r){let{polling:n=500}=s,i;return A(()=>{i=new E.Child({polling:n}),O.set(i)}),p.$$set=o=>{"polling"in o&&r(0,n=o.polling)},[n]}class g extends v{constructor(s){super(),D(this,s,V,null,b,{polling:0})}}g.__docgen={version:3,name:"PymChild.svelte",data:[{keywords:[],visibility:"public",description:"Pym.js polling interval",name:"polling",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:500}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function Y(p){let s,r,n,i;const o=[p[0]];let m={};for(let t=0;t<o.length;t+=1)m=S(m,o[t]);return s=new g({props:m}),{c(){c(s.$$.fragment),r=_(),n=H("div"),n.textContent="Nothing to see here. 😎"},m(t,a){d(s,t,a),y(t,r,a),y(t,n,a),i=!0},p(t,a){const e=a&1?k(o,[x(t[0])]):{};s.$set(e)},i(t){i||(u(s.$$.fragment,t),i=!0)},o(t){f(s.$$.fragment,t),i=!1},d(t){h(s,t),t&&$(r),t&&$(n)}}}function z(p){let s,r,n,i,o,m;const t=[{title:"Utilities/PymChild"},{component:g},P(w)];let a={};for(let e=0;e<t.length;e+=1)a=S(a,t[e]);return s=new U({props:a}),n=new N({props:{$$slots:{default:[Y,({args:e})=>({0:e}),({args:e})=>e?1:0]},$$scope:{ctx:p}}}),o=new q({props:{name:"Default"}}),{c(){c(s.$$.fragment),r=_(),c(n.$$.fragment),i=_(),c(o.$$.fragment)},m(e,l){d(s,e,l),y(e,r,l),d(n,e,l),y(e,i,l),d(o,e,l),m=!0},p(e,[l]){const M=l&0?k(t,[t[0],l&0&&{component:g},l&0&&x(P(w))]):{};s.$set(M);const C={};l&3&&(C.$$scope={dirty:l,ctx:e}),n.$set(C)},i(e){m||(u(s.$$.fragment,e),u(n.$$.fragment,e),u(o.$$.fragment,e),m=!0)},o(e){f(s.$$.fragment,e),f(n.$$.fragment,e),f(o.$$.fragment,e),m=!1},d(e){h(s,e),e&&$(r),h(n,e),e&&$(i),h(o,e)}}}class B extends v{constructor(s){super(),D(this,s,null,z,b,{})}}const j=T(B,{meta:{title:"Utilities/PymChild"},stories:{"tpl:default":{storyId:"utilities-pymchild--default",name:"default",template:!0,source:`<PymChild {...args} />
+<div>Nothing to see here. 😎</div>`,hasArgs:!0},Default:{storyId:"utilities-pymchild--default",name:"Default",template:!1,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","PymChild","withComponentDocs"]}),Q=j.meta,R=["Default"],W=j.stories.Default;export{W as Default,R as __namedExportsOrder,Q as default};
+//# sourceMappingURL=PymChild.stories-5a8c1d50.js.map