Added global default parameters.__svelteCsf to use rawCode. Avoid treating boolean props like stackBackground as color controls

package.json

@@ -1,24 +1,15 @@
 {
   "name": "hypnagaga",
-  "version": "2.2.10",
+  "version": "0.0.1",
   "type": "module",
   "private": true,
   "scripts": {
     "start": "vite dev --open",
-    "stories:sync": "npx rngs-io stories sync",
+    "dev:components": "pnpm --filter @reuters-graphics/graphics-components exec svelte-package --watch",
-    "preview": "npm-run-all publish:preview stories:autolink publish:git-commit",
-    "upload": "npx graphics-publisher upload",
-    "upload:quick": "npx graphics-publisher upload:quick",
-    "pub": "npm-run-all publish:publish stories:autolink publish:git-commit",
     "build": "vite build",
     "build:preview": "PREVIEW=true vite build",
     "mods": "tsx ./bin/mods/index.ts mods",
     "savile": "savile row ./src/statics/images",
-    "stories:unconfig": "tsx ./bin/mods/index.ts unconfig-rngs-io",
-    "stories:new": "npx rngs-io stories new --template",
-    "stories:connect": "npx rngs-io stories connect",
-    "stories:autolink": "npx rngs-io stories autolink --name page-en",
-    "stories:live": "npx rngs-io stories live preview",
     "get-google": "npx graphics google:get-docs google.json",
     "lock-google": "npx graphics google:lock-docs google.json",
     "publish:preview": "npx graphics-publisher preview",
@@ -42,7 +33,6 @@
     "@reuters-graphics/graphics-bin": "^1.1.8",
     "@reuters-graphics/graphics-kit-publisher": "^3.1.2",
     "@reuters-graphics/illustrator-exports": "^0.0.2",
-    "@reuters-graphics/rngs-io-client": "^0.1.12",
     "@reuters-graphics/savile": "^0.0.4",
     "@reuters-graphics/vite-plugin-purge-styles": "^0.0.3",
     "@reuters-graphics/yaks-eslint": "^0.1.1",
@@ -100,7 +90,7 @@
     ]
   },
   "dependencies": {
-    "@reuters-graphics/graphics-components": "^3.2.1",
+    "@reuters-graphics/graphics-components": "workspace:*",
     "language-tags": "^1.0.9"
   },
   "reuters": {
@@ -108,4 +98,4 @@
     "preview": ""
   },
   "homepage": ""
-}
+}

packages/graphics-components/.storybook/preview.ts

@@ -18,13 +18,16 @@ const preview: Preview = {
   decorators: [() => Wrapper],
   tags: ['autodocs', 'autodocs', 'autodocs', 'autodocs'],
   parameters: {
+    // NOTE The following line is a workaround for an addon-svelte-csf runtime bug. That package assumes `context.parameters.__svelteCsf` always exists.
+    __svelteCsf: { rawCode: '' },
     viewMode: 'docs',
     previewTabs: { 'storybook/docs/panel': { index: -1 } },
     controls: {
       expanded: true,
       sort: 'requiredFirst',
       matchers: {
-        color: /(background|colour|Colour)$/i,
+        // NOTE Only treat explicit color props as color controls to avoid booleans like `stackBackground`
+        color: /(colour|Colour)$/i,
         date: /Date$/,
       },
     },

packages/graphics-components/docs/assets/Analytics-C-J0rAPw.js

@@ -0,0 +1,53 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as s}from"./index-Z-6k0Xrj.js";import{A as a}from"./Analytics.stories-zZWSWRWk.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./index-client-BAw8T8-V.js";import"./svelte-head-xbEMkVns.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";function i(t){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...r(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:a}),`
+`,e.jsx(n.h1,{id:"analytics",children:"Analytics"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"Analytics"})," component adds Google and Chartbeat analytics to your page."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { Analytics } from '@reuters-graphics/graphics-components';
+
+  const authors = [{ name: 'Jane Doe' }, { name: 'John Doe' }];
+<\/script>
+
+<Analytics {authors} />
+`})}),`
+`,e.jsx(n.h2,{id:"environments",children:"Environments"}),`
+`,e.jsx(n.p,{children:"Generally, you only want to send page analytics in production environments."}),`
+`,e.jsxs(n.p,{children:["In a SvelteKit context, you can use ",e.jsx(n.code,{children:"$app"})," stores to restrict when you send analytics."]}),`
+`,e.jsx(n.p,{children:"For example, the following excludes analytics from pages in development or hosted on our preview server:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<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}
+`})}),`
+`,e.jsx(n.h2,{id:"multipage-apps",children:"Multipage apps"}),`
+`,e.jsxs(n.p,{children:["If you're using analytics to measure a multipage newsapp that uses ",e.jsx(n.a,{href:"https://kit.svelte.dev/docs/glossary#routing",rel:"nofollow",children:"client-side routing"}),", then you may need to trigger analytics after virtual page navigation."]}),`
+`,e.jsx(n.p,{children:"This component exports a function you can call to register pageviews."}),`
+`,e.jsxs(n.p,{children:["For example, here's how you can use SvelteKit's ",e.jsx(n.a,{href:"https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate",rel:"nofollow",children:e.jsx(n.code,{children:"afterNavigate"})})," lifecycle to capture additional pageviews:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import {
+    Analytics,
+    registerPageview,
+  } from '@reuters-graphics/graphics-components';
+  import { afterNavigate } from '$app/navigation';
+
+  let isFirstPageview = true;
+
+  afterNavigate(() => {
+    // We shouldn't fire on initial page load because the Analytics component
+    // already registers a reader's first pageview. After this component
+    // has initially mounted, we can be sure that further navigation is virtual
+    // and register pageviews using this function.
+    if (!isFirstPageview) {
+      registerPageview();
+    } else {
+      isFirstPageview = false;
+    }
+  });
+<\/script>
+
+<Analytics />
+`})})]})}function $(t={}){const{wrapper:n}={...r(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{$ as default};

packages/graphics-components/docs/assets/Analytics.stories-zZWSWRWk.js

@@ -0,0 +1,8 @@
+import{f as s,a as n,k as g,p as u}from"./props-b4vEeO_8.js";import{F as f,C as y,G as i,B as r}from"./runtime-C3rQLW--.js";import{i as _}from"./lifecycle-F2p_Qkk3.js";import{c as h,d as v}from"./create-runtime-stories-7AWWVphH.js";import{o as A}from"./index-client-BAw8T8-V.js";import{h as D}from"./svelte-head-xbEMkVns.js";import{s as b}from"./attributes-Cg6aLqN3.js";const k=52639,C=e=>{window._sf_async_config={uid:k,domain:"reuters.com",flickerControl:!1,useCanonical:!0,useCanonicalDomain:!0,sections:"Graphics",authors:e.map(t=>(t==null?void 0:t.name)||"").join(","),...window._sf_async_config||{}}},G=()=>{try{window.dataLayer=window.dataLayer||[],window.gtag||(window.gtag=function(){window.dataLayer.push(arguments)},window.gtag("js",new Date),T())}catch(e){console.warn(`Error initialising Google Analytics: ${e}`)}},T=()=>{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})};var M=g(s(`<link href="https://www.googletagmanager.com" rel="preconnect"/> <script>
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      'gtm.start': new Date().getTime(),
+      event: 'gtm.js',
+    });
+  <\/script> <script async>
+  <\/script>`,1)),j=s("<noscript></noscript>");function c(e){const t="GTM-P9TTSWG2";var o=j();D(p=>{var a=M(),w=f(y(a),4);b(w,"src",`https://www.googletagmanager.com/gtm.js?id=${t}`),n(p,a)}),n(e,o)}c.__docgen={version:3,name:"GTM.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function d(e,t){r(t,!0);let o=u(t,"authors",19,()=>[]);A(()=>{G(),C(o())}),c(e),i()}d.__docgen={data:[{name:"authors",visibility:"public",description:"Used to associate a page with its author(s) in Chartbeat.",keywords:[],kind:"let",type:{kind:"type",type:"array",text:"Author[]"},static:!1,readonly:!1,defaultValue:"[]"}],name:"Analytics.svelte"};const m={title:"Components/Ads & analytics/Analytics",component:d},{Story:L}=v();function l(e,t){r(t,!1),_(),L(e,{name:"Demo",tags:["!autodocs","!dev"],args:{authors:[{name:"Jane Doe"},{name:"John Doe"}]},parameters:{__svelteCsf:{rawCode:"<Analytics {...args} />"}}}),i()}l.__docgen={version:3,name:"Analytics.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const S=h(l,m),x=["Demo"],O=S.Demo,F=Object.freeze(Object.defineProperty({__proto__:null,Demo:O,__namedExportsOrder:x,default:m},Symbol.toStringTag,{value:"Module"}));export{F as A};

packages/graphics-components/docs/assets/Article-BNxFMzR1.js

@@ -0,0 +1,98 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as t}from"./index-CO-0pc0F.js";import{M as r,C as o}from"./index-Z-6k0Xrj.js";import{A as c,D as l,C as d}from"./Article.stories--ZLEYFGa.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./Block-D3Ui8rd-.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Article-DL33WKIV.js";import"./actions-BHcvdwVC.js";function i(s){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:c}),`
+`,e.jsx(n.h1,{id:"article",children:"Article"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"Article"})," component contains all the contents of our story."]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["📌 In most cases, ",e.jsxs(n.strong,{children:["you don't need to mess with the ",e.jsx(n.code,{children:"Article"})," component"]})," because it's already set up in the graphics kit."]}),`
+`]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { Article } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<Article>
+  <!-- The story content goes here! -->
+</Article>
+`})}),`
+`,e.jsx(o,{of:l}),`
+`,e.jsx(n.h2,{id:"custom-column-widths",children:"Custom column widths"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"Article"})," component also establishes the widths of columns that contain individual sections of the story, such as text, photos, and charts. The default column widths follow a basic class scheme:"]}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"narrower"})," The narrowest..."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"narrow"})," A bit narrower than the default body text column"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"normal"})," ",e.jsx(n.strong,{children:"The default width of the body text column"})]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"wide"})," A bit wider"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"wider"})," A bit wider than wide..."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"widest"})," Edge-to-edge, but ",e.jsx(n.em,{children:"excluding"})," the left and right padding on ",e.jsx(n.code,{children:"Article"})]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"fluid"})," Fully edge-to-edge"]}),`
+`]}),`
+`,e.jsxs(n.p,{children:["You can set custom column widths by passing an object to the ",e.jsx(n.code,{children:"columnWidths"})," prop with pixel values for the ",e.jsx(n.code,{children:"narrower"}),", ",e.jsx(n.code,{children:"narrow"}),", ",e.jsx(n.code,{children:"normal"}),", ",e.jsx(n.code,{children:"wide"})," and ",e.jsx(n.code,{children:"wider"})," classes. These can then be used by the ",e.jsx(n.code,{children:"Block"})," component or other elements housed inside ",e.jsx(n.code,{children:"<Article>"}),"."]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"For most graphics kit pages, you shouldn't customise the column widths."})," Other Reuters tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside graphics kit. The main exception is SREP stories."]}),`
+`]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- Set custom column widths -->
+<Article
+  columnWidths={{
+    narrower: 310,
+    narrow: 450,
+    normal: 550,
+    wide: 675,
+    wider: 1400,
+  }}
+>
+  <!-- Custom column widths get passed down to the \`Block\` component -->
+  <Block width="narrower" />
+  <Block width="narrow" />
+  <Block width="normal" />
+  <Block width="wide" />
+  <Block width="wider" />
+  <Block width="widest" />
+  <Block width="fluid" />
+</Article>
+`})}),`
+`,e.jsxs(n.p,{children:["If you're not using our ",e.jsx(n.code,{children:"Block"})," component, you can still inherit the column widths from ",e.jsx(n.code,{children:"Article"})," and create your own custom containers by using ",e.jsx(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",rel:"nofollow",children:"CSS variables"})," like this:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<div class="my-special-container">
+  <!-- Story content -->
+</div>
+
+<style lang="scss">
+  div.my-special-container {
+    max-width: var(--wide-column-width);
+  }
+</style>
+`})}),`
+`,e.jsx(n.p,{children:"... or you can make your column widths entirely configurable by adding classes and manually specifying widths:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  let { width = 'normal' } = $props();
+<\/script>
+
+<div class="my-special-container {width}">
+  <!-- Story content -->
+</div>
+
+<style lang="scss">
+  div.my-special-container {
+    max-width: var(--normal-column-width);
+    &.narrower {
+      max-width: var(--narrower-column-width);
+    }
+    &.narrow {
+      max-width: var(--narrow-column-width);
+    }
+    &.wide {
+      max-width: var(--wide-column-width);
+    }
+    &.wider {
+      max-width: var(--wider-column-width);
+    }
+    &.widest {
+      max-width: 100%;
+    }
+    &.fluid {
+      width: calc(100% + 30px);
+      margin-inline-start: -15px;
+      max-width: none;
+    }
+  }
+</style>
+`})}),`
+`,e.jsxs(n.p,{children:["Here's an example of how ",e.jsx("span",{className:"custom",children:"custom"})," ",e.jsx(n.code,{children:"columnWidths"})," can be used to change column widths:"]}),`
+`,e.jsx(o,{of:d})]})}function q(s={}){const{wrapper:n}={...t(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(i,{...s})}):i(s)}export{q as default};

packages/graphics-components/docs/assets/Article-COymFJvU.css

@@ -0,0 +1 @@
+h3.svelte-1ls25i7{text-align:center}span.custom{color:#d3847b;font-weight:600}#article-story-basic,#article-column-widths-demo{width:calc(100% + 30px);margin-inline-start:-15px}#article-column-widths-demo{background-color:#ddd;position:relative;margin-block-end: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:#d3847b}#article-column-widths-demo div.article-block{height:300px;background:#81a1c1;margin-block-end:2px;height:50px;padding-inline-start:3px;color:#fff;font-size:1rem}div.demo-container.svelte-1ls25i7{height:300px;background:#ccc;position:relative}div.demo-container.svelte-1ls25i7 .background-label:where(.svelte-1ls25i7){font-size:1.5rem;position:absolute;top:40%;left:40%;color:#666}div.demo-container.svelte-1ls25i7 .padding-label:where(.svelte-1ls25i7){font-size:1rem;position:absolute;top:0;left:-17px}div.demo-container.svelte-1ls25i7 .padding-label:where(.svelte-1ls25i7) span:where(.svelte-1ls25i7){font-size:18px}

packages/graphics-components/docs/assets/Article-DL33WKIV.js

@@ -0,0 +1,7 @@
+import{p as n,f as h,a as b}from"./props-b4vEeO_8.js";import{J as k,G as v,B as x,I as u,n as g,k as _,N as A}from"./runtime-C3rQLW--.js";import{s as j}from"./snippet-C5kbqVpq.js";import{a as S}from"./actions-BHcvdwVC.js";import{s as p,a as W}from"./attributes-Cg6aLqN3.js";const s=(a,e)=>(Object.entries(e).forEach(([i,t])=>{a.style.setProperty(`--${i}`,t)}),{update(i){Object.entries(i).forEach(([t,d])=>{a.style.setProperty(`--${t}`,d),delete e[t]}),Object.keys(e).forEach(t=>{a.style.removeProperty(`--${t}`)}),e=i}});var V=h('<main id="main-content"><article><!></article></main>');function E(a,e){x(e,!0);let i=n(e,"embedded",3,!1),t=n(e,"id",3,""),d=n(e,"role",3,null),r=n(e,"columnWidths",19,()=>({narrower:330,narrow:510,normal:660,wide:930,wider:1200})),y=A(()=>({"narrower-column-width":r().narrower+"px","narrow-column-width":r().narrow+"px","normal-column-width":r().normal+"px","wide-column-width":r().wide+"px","wider-column-width":r().wider+"px"}));var c=V(),l=u(c);let m;var f=u(l);j(f,()=>e.children??g),S(l,(o,w)=>s==null?void 0:s(o,w),()=>_(y)),k(o=>{p(l,"id",t()),p(l,"role",d()),m=W(l,1,"svelte-jd0c2r",null,m,o)},[()=>({embedded:i()})]),b(a,c),v()}E.__docgen={data:[{name:"embedded",visibility:"public",description:"Set to true for embeddables.",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"false"},{name:"id",visibility:"public",description:"Add an id to the article tag to target it with custom CSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'},{name:"role",visibility:"public",description:"ARIA role of the article",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:"null"},{name:"columnWidths",visibility:"public",description:"Set custom widths for the normal, wide and wider column dimensions",keywords:[],kind:"let",type:{kind:"type",type:"object",text:"ColumnWidths"},static:!1,readonly:!1,defaultValue:`{
+      narrower: 330,
+      narrow: 510,
+      normal: 660,
+      wide: 930,
+      wider: 1200,
+    }`},{name:"children",visibility:"public",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1}],name:"Article.svelte"};export{E as A};

packages/graphics-components/docs/assets/Article-DUCorNFS.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}

packages/graphics-components/docs/assets/Article.stories--ZLEYFGa.js

@@ -0,0 +1,39 @@
+import{f as v,a as t,t as r}from"./props-b4vEeO_8.js";import{B as z,C,F as d,I as b,G as E}from"./runtime-C3rQLW--.js";import{i as F}from"./lifecycle-F2p_Qkk3.js";import{c as G,d as I}from"./create-runtime-stories-7AWWVphH.js";import{B as i}from"./Block-D3Ui8rd-.js";import{A as h}from"./Article-DL33WKIV.js";const g={title:"Components/Page layout/Article",component:h},{Story:A}=I();var N=v('<div class="demo-container svelte-1ls25i7"><div class="background-label svelte-1ls25i7">Article well</div> <div class="padding-label svelte-1ls25i7"><span class="svelte-1ls25i7">⇤</span>15px padding</div></div>'),R=v('<div class="article-boundaries"><!> <!> <!> <!> <!> <!> <!></div>'),T=v('<div class="article-boundaries custom"><!> <!> <!> <!> <!> <!> <!></div>'),q=v('<h3 class="svelte-1ls25i7">Default column widths</h3> <!> <h3 class="svelte-1ls25i7">Custom column widths</h3> <!>',1),H=v("<!> <!>",1);function y(S,O){z(O,!1),F();var P=H(),x=C(P);A(x,{name:"Demo",children:(_,M)=>{h(_,{id:"article-story-basic",children:($,p)=>{var f=N();t($,f)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Article id="article-story-basic">
+  <div class="demo-container">
+    <div class="background-label">Article well</div>
+    <div class="padding-label"><span>⇤</span>15px padding</div>
+  </div>
+</Article>`}}});var j=d(x,2);A(j,{name:"Custom columns",exportName:"CustomColumns",children:(_,M)=>{var $=q(),p=d(C($),2);h(p,{id:"article-column-widths-demo",children:(k,W)=>{var l=R(),n=b(l);i(n,{id:"section-demo",width:"narrower",children:(e,s)=>{var o=r("narrower");t(e,o)},$$slots:{default:!0}});var a=d(n,2);i(a,{id:"section-demo",width:"narrow",children:(e,s)=>{var o=r("narrow");t(e,o)},$$slots:{default:!0}});var c=d(a,2);i(c,{id:"section-demo",children:(e,s)=>{var o=r("normal");t(e,o)},$$slots:{default:!0}});var m=d(c,2);i(m,{id:"section-demo",width:"wide",children:(e,s)=>{var o=r("wide");t(e,o)},$$slots:{default:!0}});var u=d(m,2);i(u,{id:"section-demo",width:"wider",children:(e,s)=>{var o=r("wider");t(e,o)},$$slots:{default:!0}});var w=d(u,2);i(w,{id:"section-demo",width:"widest",children:(e,s)=>{var o=r("widest");t(e,o)},$$slots:{default:!0}});var B=d(w,2);i(B,{id:"section-demo",width:"fluid",children:(e,s)=>{var o=r("fluid");t(e,o)},$$slots:{default:!0}}),t(k,l)},$$slots:{default:!0}});var f=d(p,4);h(f,{id:"article-column-widths-demo",columnWidths:{narrower:250,narrow:400,normal:500,wide:675,wider:1400},children:(k,W)=>{var l=T(),n=b(l);i(n,{id:"section-demo",width:"narrower",children:(e,s)=>{var o=r("narrower");t(e,o)},$$slots:{default:!0}});var a=d(n,2);i(a,{id:"section-demo",width:"narrow",children:(e,s)=>{var o=r("narrow");t(e,o)},$$slots:{default:!0}});var c=d(a,2);i(c,{id:"section-demo",children:(e,s)=>{var o=r("normal");t(e,o)},$$slots:{default:!0}});var m=d(c,2);i(m,{id:"section-demo",width:"wide",children:(e,s)=>{var o=r("wide");t(e,o)},$$slots:{default:!0}});var u=d(m,2);i(u,{id:"section-demo",width:"wider",children:(e,s)=>{var o=r("wider");t(e,o)},$$slots:{default:!0}});var w=d(u,2);i(w,{id:"section-demo",width:"widest",children:(e,s)=>{var o=r("widest");t(e,o)},$$slots:{default:!0}});var B=d(w,2);i(B,{id:"section-demo",width:"fluid",children:(e,s)=>{var o=r("fluid");t(e,o)},$$slots:{default:!0}}),t(k,l)},$$slots:{default:!0}}),t(_,$)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<h3>Default column widths</h3>
+
+<Article id="article-column-widths-demo">
+  <div class="article-boundaries">
+    <Block id="section-demo" width="narrower">narrower</Block>
+    <Block id="section-demo" width="narrow">narrow</Block>
+    <Block id="section-demo">normal</Block>
+    <Block id="section-demo" width="wide">wide</Block>
+    <Block id="section-demo" width="wider">wider</Block>
+    <Block id="section-demo" width="widest">widest</Block>
+    <Block id="section-demo" width="fluid">fluid</Block>
+  </div>
+</Article>
+<h3>Custom column widths</h3>
+<Article
+  id="article-column-widths-demo"
+  columnWidths={{
+    narrower: 250,
+    narrow: 400,
+    normal: 500,
+    wide: 675,
+    wider: 1400,
+  }}
+>
+  <div class="article-boundaries custom">
+    <Block id="section-demo" width="narrower">narrower</Block>
+    <Block id="section-demo" width="narrow">narrow</Block>
+    <Block id="section-demo">normal</Block>
+    <Block id="section-demo" width="wide">wide</Block>
+    <Block id="section-demo" width="wider">wider</Block>
+    <Block id="section-demo" width="widest">widest</Block>
+    <Block id="section-demo" width="fluid">fluid</Block>
+  </div>
+</Article>`}}}),t(S,P),E()}y.__docgen={version:3,name:"Article.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const D=G(y,g),J=["Demo","CustomColumns"],K=D.Demo,L=D.CustomColumns,ee=Object.freeze(Object.defineProperty({__proto__:null,CustomColumns:L,Demo:K,__namedExportsOrder:J,default:g},Symbol.toStringTag,{value:"Module"}));export{ee as A,L as C,K as D};

packages/graphics-components/docs/assets/BeforeAfter-DDcFHJ8k.js

@@ -0,0 +1,90 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as a}from"./index-CO-0pc0F.js";import{M as i,C as n}from"./index-Z-6k0Xrj.js";import{B as l,D as o,W as c}from"./BeforeAfter.stories-Cfh_2tOI.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./size-DMdj3-I9.js";import"./this-CrUBQEQ_.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./index-CX1x869l.js";import"./throttle-CHB1Npaq.js";function s(r){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...a(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{of:l}),`
+`,e.jsx(t.h1,{id:"beforeafter",children:"BeforeAfter"}),`
+`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"BeforeAfter"})," component shows a before-and-after comparison of an image."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script>
+  import { BeforeAfter } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+<\/script>
+
+<BeforeAfter
+  beforeSrc={\`\${assets}/images/before-after/myrne-before.jpg\`}
+  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+  afterSrc={\`\${assets}/images/before-after/myrne-after.jpg\`}
+  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+/>
+`})}),`
+`,e.jsx(n,{of:o}),`
+`,e.jsx(t.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
+`,e.jsx(t.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-yaml",children:`# ArchieML doc
+[blocks]
+
+type: before-after
+beforeSrc: images/before-after/myrne-before.jpg
+beforeAlt: Satellite image of Russian base at Myrne taken on July 7, 2020.
+afterSrc: images/before-after/myrne-after.jpg
+afterAlt: Satellite image of Russian base at Myrne taken on Oct. 20, 2020.
+
+[]
+`})}),`
+`,e.jsxs(t.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",e.jsx(t.code,{children:"BeforeAfter"})," component."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<!-- App.svelte -->
+{#each content.blocks as block}
+  {#if block.type === 'before-after'}
+    <BeforeAfter
+      beforeSrc={\`\${assets}/\${block.beforeSrc}\`}
+      beforeAlt={block.beforeAlt}
+      afterSrc={\`\${assets}/\${block.afterSrc}\`}
+      afterAlt={block.afterAlt}
+    />
+  {/if}
+{/each}
+`})}),`
+`,e.jsx(n,{of:o}),`
+`,e.jsx(t.h2,{id:"adding-text",children:"Adding text"}),`
+`,e.jsxs(t.p,{children:["To add text overlays and captions, use ",e.jsx(t.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippets"})," for ",e.jsx(t.code,{children:"beforeOverlay"}),", ",e.jsx(t.code,{children:"afterOverlay"})," and ",e.jsx(t.code,{children:"caption"}),". You can style the snippets to match your page design, like in ",e.jsx(t.a,{href:"./?path=/story/components-multimedia-beforeafter--with-overlays",children:"this demo"}),"."]}),`
+`,e.jsxs(t.blockquote,{children:[`
+`,e.jsxs(t.p,{children:["💡",e.jsx(t.strong,{children:"NOTE:"})," The text in the overlays are used as ",e.jsx(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby",rel:"nofollow",children:"ARIA descriptions"})," for your before and after images. You must always use the ",e.jsx(t.code,{children:"beforeAlt"})," / ",e.jsx(t.code,{children:"afterAlt"})," props to label your image for visually impaired readers, but these ARIA descriptions provide additional information or context that the reader might need."]}),`
+`]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<BeforeAfter
+  beforeSrc={beforeImg}
+  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+  afterSrc={afterImg}
+  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+>
+  <!-- Optional custom text overlay for the before image -->
+  {#snippet beforeOverlay()}
+    <div class="overlay p-3 before text-left">
+      <p class="h4 font-bold">July 7, 2020</p>
+      <p class="body-note">Initially, this site was far smaller.</p>
+    </div>
+  {/snippet}
+
+  <!-- Optional custom text overlay for the after image -->
+  {#snippet afterOverlay()}
+    <div class="overlay p-3 after text-right">
+      <p class="h4 font-bold">Oct. 20, 2020</p>
+      <p class="body-note">But then forces built up.</p>
+    </div>
+  {/snippet}
+
+  <!-- Optional custom caption for both images -->
+  {#snippet caption()}
+    <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
+  {/snippet}
+</BeforeAfter>
+
+<style lang="scss">
+  .overlay {
+    background: rgba(0, 0, 0, 0.45);
+    max-width: 350px;
+    &.after {
+      text-align: right;
+    }
+    p {
+      color: #ffffff;
+    }
+  }
+</style>
+`})}),`
+`,e.jsx(n,{of:c})]})}function C(r={}){const{wrapper:t}={...a(),...r.components};return t?e.jsx(t,{...r,children:e.jsx(s,{...r})}):s(r)}export{C as default};

packages/graphics-components/docs/assets/BeforeAfter-DEYDGJjI.css

@@ -0,0 +1 @@
+button.before-after-container.svelte-1stam79{box-sizing:content-box;text-align:inherit}button.before-after-container.svelte-1stam79 img:where(.svelte-1stam79){top:0;left:0;z-index:20}button.before-after-container.svelte-1stam79 img.after:where(.svelte-1stam79){z-index:21}button.before-after-container.svelte-1stam79 img.before:where(.svelte-1stam79){z-index:22}button.before-after-container.svelte-1stam79 img:where(.svelte-1stam79){-webkit-user-select:none;user-select:none}button.before-after-container.svelte-1stam79 .overlay-container:where(.svelte-1stam79){top:0}button.before-after-container.svelte-1stam79 .overlay-container:where(.svelte-1stam79) :first-child{margin-block-start:0}button.before-after-container.svelte-1stam79 .overlay-container:where(.svelte-1stam79) :last-child{margin-block-end:0}button.before-after-container.svelte-1stam79 .overlay-container.before:where(.svelte-1stam79){left:0;z-index:23}button.before-after-container.svelte-1stam79 .overlay-container.after:where(.svelte-1stam79){right:0;z-index:21}.handle.svelte-1stam79{z-index:30;width:40px;height:40px;cursor:move;background:none;-webkit-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);box-shadow:1px 1px 3px #333}.handle.svelte-1stam79:hover,.handle.svelte-1stam79:active,.handle.svelte-1stam79:focus{opacity:1}.handle.svelte-1stam79:before,.handle.svelte-1stam79:after{content:"";box-shadow:0 0 3px #333;height:9999px;position:absolute;left:calc(50% - 2px);border:2px solid var(--before-after-handle-colour)}.handle.svelte-1stam79:before{top:40px}.handle.svelte-1stam79:after{bottom:40px}.handle.svelte-1stam79 .arrow-right:where(.svelte-1stam79),.handle.svelte-1stam79 .arrow-left:where(.svelte-1stam79){width:0;height:0;-webkit-user-select:none;user-select:none;position:relative;border-block-start:10px solid transparent;border-block-end:10px solid transparent}.handle.svelte-1stam79 .arrow-right:where(.svelte-1stam79){inset-inline-start:19px;inset-block-end:14px;border-inline-start:10px solid var(--before-after-handle-colour)}.handle.svelte-1stam79 .arrow-left:where(.svelte-1stam79){inset-inline-start:3px;inset-block-start:6px;border-inline-end:10px solid var(--before-after-handle-colour)}.before-after-caption.svelte-1stam79 p{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-block-start:clamp(.31rem,.31rem + 0vw,.31rem);margin-block-end:clamp(.56rem,.52rem + .21vw,.69rem)}

packages/graphics-components/docs/assets/Block-CgERQZd_.js

@@ -0,0 +1,69 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as i}from"./index-CO-0pc0F.js";import{M as c,C as s}from"./index-Z-6k0Xrj.js";import{B as r,D as l,C as a,S as d}from"./Block.stories-DTERDOok.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./Block-D3Ui8rd-.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Article-DL33WKIV.js";import"./actions-BHcvdwVC.js";function t(n){const o={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(c,{of:r}),`
+`,e.jsx(o.h1,{id:"block",children:"Block"}),`
+`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"Block"})," component is the basic building block of pages, a responsive container that wraps around each section of your piece."]}),`
+`,e.jsxs(o.p,{children:["Blocks are stacked vertically within the well created by the ",e.jsx(o.a,{href:"./?path=/docs/components-page-layout-article--docs",children:"Article"})," component. They can have different widths on larger screens depending on the ",e.jsx(o.code,{children:"width"})," prop."]}),`
+`,e.jsxs(o.blockquote,{children:[`
+`,e.jsxs(o.p,{children:["📌 Many of our other components already use the ",e.jsx(o.code,{children:"Block"})," component internally. You'll usually only need to use it yourself if you're making something custom."]}),`
+`]}),`
+`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<script>
+  import { Block } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<Block>
+  <!-- Contents for this block goes here -->
+</Block>
+`})}),`
+`,e.jsx(s,{of:l}),`
+`,e.jsx(o.h2,{id:"custom-layouts",children:"Custom layouts"}),`
+`,e.jsx(o.p,{children:"Our article well is designed to provide a basic responsive layout for you, but it also lets you customise."}),`
+`,e.jsxs(o.p,{children:["The radical but easiest way to do this is to create a ",e.jsx(o.code,{children:"Block"})," with a ",e.jsx(o.code,{children:"fluid"})," width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework."]}),`
+`,e.jsxs(o.p,{children:["The demo below does exactly that to create an edge-to-edge grid with ",e.jsx(o.a,{href:"https://css-tricks.com/snippets/css/a-guide-to-flexbox/",rel:"nofollow",children:"flexbox"}),"."]}),`
+`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<Block width="fluid">
+  <div class="my-radical-container">
+    <!-- Now, you have full control over layout! -->
+  </div>
+</Block>
+`})}),`
+`,e.jsx(s,{of:a}),`
+`,e.jsx(o.h2,{id:"snap-widths",children:"Snap widths"}),`
+`,e.jsxs(o.p,{children:["Normally, ",e.jsx(o.code,{children:"Block"})," containers resize fluidly below the original ",e.jsx(o.code,{children:"width"}),". Sometimes, though, you may want the container to snap to the next breakpoint -- for example, if you have a static graphic that looks fine at the set block breakpoints, but isn't so great at widths inbetween."]}),`
+`,e.jsxs(o.p,{children:["You can use the ",e.jsx(o.code,{children:"snap"})," prop to force the container to snap to each block width successively as the window sizes down."]}),`
+`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<Block width="wider" snap={true}>
+  <!-- Contents for this block -->
+</Block>
+`})}),`
+`,e.jsx(s,{of:d}),`
+`,e.jsxs(o.p,{children:["If you want to skip certain block widths entirely, you can add one or more class of ",e.jsx(o.code,{children:"skip-{block width class}"})," to the ",e.jsx(o.code,{children:"Block"}),"."]}),`
+`,e.jsxs(o.blockquote,{children:[`
+`,e.jsxs(o.p,{children:[e.jsx(o.strong,{children:"NOTE:"})," The snap width breakpoints only work on ",e.jsx(o.code,{children:"Block"})," components with widths ",e.jsx(o.code,{children:"wider"})," and below. ",e.jsx(o.code,{children:"widest"})," and ",e.jsx(o.code,{children:"fluid"})," are both ",e.jsx(o.strong,{children:"always"})," fluid, since they go edge-to-edge."]}),`
+`]}),`
+`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<!-- Will skip wide and go straight to normal column width on resize. -->
+<Block width="wider" snap={true} class="skip-wide">
+  <!-- Contents for this block -->
+</Block>
+`})}),`
+`,e.jsxs(o.p,{children:["This is probably easier to see in action than explain in words, so ",e.jsx(o.a,{href:"./?path=/docs/components-page-layout-block--snap-skip-widths",children:"resize the demo"})," to get a better picture of how it all works."]}),`
+`,e.jsx(o.h2,{id:"using-with-custom-column-widths",children:"Using with custom column widths"}),`
+`,e.jsxs(o.p,{children:["Snap width breakpoints are hard-coded to the default article well column widths, so if you set custom ",e.jsx(o.code,{children:"columnWidths"})," on the ",e.jsx(o.a,{href:"./?path=/docs/components-page-layout-article--docs",children:"Article"})," component (",e.jsx(o.strong,{children:"rare!"}),"), you need to do a littie work to use this functionality."]}),`
+`,e.jsxs(o.p,{children:["Luckily, it's still pretty easy. Just add a ",e.jsx(o.code,{children:"cls"})," or ",e.jsx(o.code,{children:"id"})," to your ",e.jsx(o.code,{children:"Block"})," so you can target it with some custom SCSS. Then define a few SCSS variables corresponding to your custom column widths, and use the ",e.jsx(o.code,{children:"block-snap-widths"})," SCSS mixin to get the same functionality at your custom breakpoints."]}),`
+`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<Block width="wider" snap={true} class="custom-blocks">
+  <!-- Contents for this block -->
+</Block>
+
+<style lang="scss">
+  // Define custom column widths
+  $column-width-narrower: 310px;
+  $column-width-narrow: 450px;
+  $column-width-normal: 600px;
+  $column-width-wide: 860px;
+  $column-width-wider: 1400px;
+
+  @use '@reuters-graphics/graphics-components/scss/mixins' as mixins;
+
+  :global {
+    div.custom-blocks {
+      @include mixins.block-snap-widths; // Use the \`block-snap-widths\` mixin
+    }
+  }
+</style>
+`})})]})}function $(n={}){const{wrapper:o}={...i(),...n.components};return o?e.jsx(o,{...n,children:e.jsx(t,{...n})}):t(n)}export{$ as default};

packages/graphics-components/docs/assets/Block-D3Ui8rd-.js

@@ -0,0 +1 @@
+import{p as i,f as y,a as f}from"./props-b4vEeO_8.js";import{J as k,I as u}from"./runtime-C3rQLW--.js";import{s as b}from"./snippet-C5kbqVpq.js";import{s as a,a as m}from"./attributes-Cg6aLqN3.js";var w=y("<div><!></div>");function g(n,t){let l=i(t,"width",3,"normal"),r=i(t,"id",3,""),o=i(t,"class",3,""),d=i(t,"snap",3,!1);var e=w();let s;var c=u(e);b(c,()=>t.children),k(p=>{a(e,"id",r()),s=m(e,1,`article-block fmx-auto ${l()??""} ${o()??""}`,"svelte-1bpn7zi",s,p),a(e,"role",t.role),a(e,"aria-label",t.ariaLabel)},[()=>({snap:d()&&l()!=="fluid"&&l()!=="widest"})]),f(n,e)}g.__docgen={data:[{name:"children",visibility:"public",description:"Content that goes inside `<Block>`",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1},{name:"width",visibility:"public",description:"Width of the block within the article well.",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"narrower",text:'"narrower"'},{kind:"const",type:"string",value:"narrow",text:'"narrow"'},{kind:"const",type:"string",value:"normal",text:'"normal"'},{kind:"const",type:"string",value:"wide",text:'"wide"'},{kind:"const",type:"string",value:"wider",text:'"wider"'},{kind:"const",type:"string",value:"widest",text:'"widest"'},{kind:"const",type:"string",value:"fluid",text:'"fluid"'}],text:'"narrower" | "narrow" | "normal" | "wide" | "wider" | "widest" | "fluid"'},static:!1,readonly:!1,defaultValue:'"normal"'},{name:"id",visibility:"public",description:"Add an id to the block tag to target it with custom CSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'},{name:"class",visibility:"public",description:"Add custom classes to the block tag to target it with custom CSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"snap",visibility:"public",description:"Snap block to column widths, rather than fluidly resizing them.",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"false"},{name:"role",visibility:"public",description:"ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"ariaLabel",visibility:"public",description:"ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1}],name:"Block.svelte"};export{g as B};

packages/graphics-components/docs/assets/Block-Dn5YcMWK.css

@@ -0,0 +1 @@
+h4.svelte-j0m1tv{text-align:center}#block-demo-article{background-color:#ddd;position:relative;width:calc(100% + 30px);margin-inline-start:-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-block-end:2px;height:40px;font-size:11px}#block-demo-article div.article-block.block-snap-widths-demo.even{background:#d3847b}#block-demo-article .label,#block-demo-article div.article-block.block-snap-widths-demo{padding-inline-start:3px;color:#fff;font-weight:500}div#block-flex-example.svelte-j0m1tv{padding:25px 0}div#block-flex-example.svelte-j0m1tv div.row:where(.svelte-j0m1tv){display:flex}div#block-flex-example.svelte-j0m1tv div.row:where(.svelte-j0m1tv)>div:where(.svelte-j0m1tv){background-color:#d3847b;border:1px solid white;border-radius:4px;padding:20px;color:#fff;text-align:center;flex-grow:1}div#block-flex-example.svelte-j0m1tv div.row:where(.svelte-j0m1tv):first-child div:where(.svelte-j0m1tv){background:#81a1c1}

packages/graphics-components/docs/assets/Block-EqPu4gZF.css

@@ -0,0 +1 @@
+.article-block.svelte-1bpn7zi{max-width:var(--normal-column-width, 660px)}.article-block.narrower.svelte-1bpn7zi{max-width:var(--narrower-column-width, 330px)}.article-block.narrow.svelte-1bpn7zi{max-width:var(--narrow-column-width, 510px)}.article-block.wide.svelte-1bpn7zi{max-width:var(--wide-column-width, 930px)}.article-block.wider.svelte-1bpn7zi{max-width:var(--wider-column-width, 1200px)}.article-block.widest.svelte-1bpn7zi{max-width:100%}.article-block.fluid.svelte-1bpn7zi{width:calc(100% + 30px);margin-inline-start:-15px;max-width:none}.article-block.snap.svelte-1bpn7zi{width:330px}@media (min-width: 540px){.article-block.snap.svelte-1bpn7zi:not(.skip-narrow){width:510px}}@media (min-width: 690px){.article-block.snap.svelte-1bpn7zi:not(.skip-normal){width:660px}}@media (min-width: 360px){.article-block.snap.narrower.svelte-1bpn7zi{width:330px}}@media (min-width: 540px){.article-block.snap.narrow.svelte-1bpn7zi{width:510px}}@media (min-width: 960px){.article-block.snap.wide.svelte-1bpn7zi{width:930px}}@media (min-width: 960px){.article-block.snap.wider.svelte-1bpn7zi:not(.skip-wide){width:930px}}@media (min-width: 1230px){.article-block.snap.wider.svelte-1bpn7zi:not(.skip-wider){width:1200px}}.article-block.snap.widest.svelte-1bpn7zi,.article-block.snap.fluid.svelte-1bpn7zi{width:inherit}.article-block.snap.fluid.svelte-1bpn7zi{width:calc(100% + 30px)}

packages/graphics-components/docs/assets/Block.stories-DTERDOok.js

@@ -0,0 +1,79 @@
+import{f as c,a as o,t as r}from"./props-b4vEeO_8.js";import{B as R,C as E,F as l,I as _,G as M}from"./runtime-C3rQLW--.js";import{i as T}from"./lifecycle-F2p_Qkk3.js";import{c as z,d as F}from"./create-runtime-stories-7AWWVphH.js";import{B as t}from"./Block-D3Ui8rd-.js";import{A as b}from"./Article-DL33WKIV.js";const g={title:"Components/Page layout/Block",component:t,tags:["autodocs"],argTypes:{width:{control:"select",options:["narrower","narrow","normal","wide","wider","widest","fluid"]}}},{Story:u}=F();var G=c('<div class="label">Block</div>'),I=c('<div class="article-boundaries"><div class="label">Article</div> <!></div>'),q=c('<div id="block-flex-example" class="svelte-j0m1tv"><div class="row svelte-j0m1tv"><div class="col svelte-j0m1tv">Column</div> <div class="col-6 svelte-j0m1tv">Column</div> <div class="col svelte-j0m1tv">Column</div></div> <div class="row svelte-j0m1tv"><div class="col svelte-j0m1tv">Column</div> <div class="col svelte-j0m1tv">Column</div></div></div>'),H=c('<div class="label">Block</div>'),J=c('<div class="article-boundaries"><div class="label">Article</div> <h4 class="svelte-j0m1tv">snap widths</h4> <!></div>'),K=c('<div class="article-boundaries"><div class="label">Article</div> <h4 class="svelte-j0m1tv">Regular layout</h4> <!> <!> <!> <!> <!> <h4 class="svelte-j0m1tv">with snap and skip</h4> <!> <!> <!> <!> <!></div>'),Q=c("<!> <!> <!> <!>",1);function W(D,L){R(L,!1),T();var f=Q(),B=E(f);u(B,{name:"Demo",children:(d,k)=>{b(d,{id:"block-demo-article",children:(i,$)=>{var a=I(),v=l(_(a),2);t(v,{children:(p,w)=>{var m=G();o(p,m)},$$slots:{default:!0}}),o(i,a)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Article id="block-demo-article">
+  <div class="article-boundaries">
+    <div class="label">Article</div>
+    <Block>
+      <div class="label">Block</div>
+    </Block>
+  </div>
+</Article>`}}});var C=l(B,2);u(C,{name:"Custom layout",exportName:"CustomLayout",children:(d,k)=>{t(d,{width:"fluid",children:(i,$)=>{var a=q();o(i,a)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Block width="fluid">
+  <!-- Enter bootstrap grid! -->
+  <div id="block-flex-example">
+    <div class="row">
+      <div class="col">Column</div>
+      <div class="col-6">Column</div>
+      <div class="col">Column</div>
+    </div>
+    <div class="row">
+      <div class="col">Column</div>
+      <div class="col">Column</div>
+    </div>
+  </div>
+</Block>`}}});var P=l(C,2);u(P,{name:"Snap widths",exportName:"SnapWidthsBasic",children:(d,k)=>{b(d,{id:"block-demo-article",children:(i,$)=>{var a=J(),v=l(_(a),4);t(v,{snap:!0,children:(p,w)=>{var m=H();o(p,m)},$$slots:{default:!0}}),o(i,a)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Article id="block-demo-article">
+  <div class="article-boundaries">
+    <div class="label">Article</div>
+    <h4>snap widths</h4>
+    <Block snap={true}>
+      <div class="label">Block</div>
+    </Block>
+  </div>
+</Article>`}}});var N=l(P,2);u(N,{name:"Snap and skip widths",exportName:"SnapSkipWidths",children:(d,k)=>{b(d,{id:"block-demo-article",children:(i,$)=>{var a=K(),v=l(_(a),4);t(v,{width:"narrower",snap:!0,class:"block-snap-widths-demo",children:(s,n)=>{var e=r("narrower");o(s,e)},$$slots:{default:!0}});var p=l(v,2);t(p,{width:"narrow",snap:!0,class:"block-snap-widths-demo",children:(s,n)=>{var e=r("narrow");o(s,e)},$$slots:{default:!0}});var w=l(p,2);t(w,{width:"normal",snap:!0,class:"block-snap-widths-demo",children:(s,n)=>{var e=r("normal");o(s,e)},$$slots:{default:!0}});var m=l(w,2);t(m,{width:"wide",snap:!0,class:"block-snap-widths-demo",children:(s,n)=>{var e=r("wide");o(s,e)},$$slots:{default:!0}});var x=l(m,2);t(x,{width:"wider",snap:!0,class:"block-snap-widths-demo",children:(s,n)=>{var e=r("wider");o(s,e)},$$slots:{default:!0}});var S=l(x,4);t(S,{width:"narrower",snap:!0,class:"block-snap-widths-demo even",children:(s,n)=>{var e=r("narrower");o(s,e)},$$slots:{default:!0}});var A=l(S,2);t(A,{width:"narrow",snap:!0,class:"block-snap-widths-demo even",children:(s,n)=>{var e=r("narrow");o(s,e)},$$slots:{default:!0}});var j=l(A,2);t(j,{width:"normal",snap:!0,class:"block-snap-widths-demo even skip-narrow",children:(s,n)=>{var e=r("normal.skip-narrow");o(s,e)},$$slots:{default:!0}});var y=l(j,2);t(y,{width:"wide",snap:!0,class:"block-snap-widths-demo even skip-normal skip-narrow",children:(s,n)=>{var e=r("wide.skip-normal.skip-narrow");o(s,e)},$$slots:{default:!0}});var O=l(y,2);t(O,{width:"wider",snap:!0,class:"block-snap-widths-demo even skip-wide",children:(s,n)=>{var e=r("wider.skip-wide");o(s,e)},$$slots:{default:!0}}),o(i,a)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Article id="block-demo-article">
+  <div class="article-boundaries">
+    <div class="label">Article</div>
+    <h4>Regular layout</h4>
+
+    <Block width="narrower" snap={true} class="block-snap-widths-demo">
+      narrower
+    </Block>
+    <Block width="narrow" snap={true} class="block-snap-widths-demo">
+      narrow
+    </Block>
+    <Block width="normal" snap={true} class="block-snap-widths-demo">
+      normal
+    </Block>
+    <Block width="wide" snap={true} class="block-snap-widths-demo">
+      wide
+    </Block>
+    <Block width="wider" snap={true} class="block-snap-widths-demo">
+      wider
+    </Block>
+
+    <h4>with snap and skip</h4>
+    <Block width="narrower" snap={true} class="block-snap-widths-demo even">
+      narrower
+    </Block>
+    <Block width="narrow" snap={true} class="block-snap-widths-demo even">
+      narrow
+    </Block>
+    <Block
+      width="normal"
+      snap={true}
+      class="block-snap-widths-demo even skip-narrow"
+    >
+      normal.skip-narrow
+    </Block>
+    <Block
+      width="wide"
+      snap={true}
+      class="block-snap-widths-demo even skip-normal skip-narrow"
+    >
+      wide.skip-normal.skip-narrow
+    </Block>
+    <Block
+      width="wider"
+      snap={true}
+      class="block-snap-widths-demo even skip-wide"
+    >
+      wider.skip-wide
+    </Block>
+  </div>
+</Article>`}}}),o(D,f),M()}W.__docgen={version:3,name:"Block.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const h=z(W,g),U=["Demo","CustomLayout","SnapWidthsBasic","SnapSkipWidths"],V=h.Demo,X=h.CustomLayout,Y=h.SnapWidthsBasic,Z=h.SnapSkipWidths,rs=Object.freeze(Object.defineProperty({__proto__:null,CustomLayout:X,Demo:V,SnapSkipWidths:Z,SnapWidthsBasic:Y,__namedExportsOrder:U,default:g},Symbol.toStringTag,{value:"Module"}));export{rs as B,X as C,V as D,Y as S};

packages/graphics-components/docs/assets/BodyText-BNA5x5L_.css

@@ -0,0 +1 @@
+.body-text-custom-styles-story span.highlight{background:#eee8aa;padding:2px 4px}

packages/graphics-components/docs/assets/BodyText-CXnxLnBi.js

@@ -0,0 +1 @@
+import{p as e}from"./props-b4vEeO_8.js";import{M as d}from"./Markdown-DUxFwijc.js";import{B as n}from"./Block-D3Ui8rd-.js";function l(i,t){let s=e(t,"class",3,""),r=e(t,"id",3,"");n(i,{get id(){return r()},get class(){return`fmy-6 ${s()??""}`},children:(a,o)=>{d(a,{get source(){return t.text}})},$$slots:{default:!0}})}l.__docgen={data:[{name:"text",visibility:"public",description:"A markdown text string.",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"class",visibility:"public",description:"Add a class to target with SCSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"id",visibility:"public",description:"Add an id to the block tag to target it with custom CSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'}],name:"BodyText.svelte"};export{l as B};

packages/graphics-components/docs/assets/BodyText-shAzNhCa.js

@@ -0,0 +1,81 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as a}from"./index-CO-0pc0F.js";import{M as c,C as t}from"./index-Z-6k0Xrj.js";import{B as i,D as o,T as l,C as d}from"./BodyText.stories-Dj7yaN6K.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./BodyText-CXnxLnBi.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Block-D3Ui8rd-.js";function r(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...a(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(c,{of:i}),`
+`,e.jsx(n.h1,{id:"bodytext",children:"BodyText"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"BodyText"})," component creates the main text of your page. You can pass the ",e.jsx(n.code,{children:"text"})," prop a ",e.jsx(n.a,{href:"https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet",rel:"nofollow",children:"markdown-formatted"})," string, which will be parsed into paragraphs, headers, lists, links, blockquotes and other markdown-supported elements."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<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.
+
+- Steak
+- [Pork chop](https://www.google.com)
+- Fillet
+  
+Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.\`;
+<\/script>
+
+<BodyText text={markdownText} />
+`})}),`
+`,e.jsx(t,{of:o}),`
+`,e.jsx(n.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
+`,e.jsx(n.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-yaml",children:`# ArchieML doc
+[blocks]
+
+type: text
+text: Bacon ipsum ...
+
+... etc.
+:end
+
+[]
+`})}),`
+`,e.jsxs(n.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",e.jsx(n.code,{children:"BodyText"})," component."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
+<script>
+  import { BodyText } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+<\/script>
+
+{#each content.blocks as block}
+  {#if block.type === 'text'}
+    <BodyText text={block.text} />
+  {/if}
+{/each}
+`})}),`
+`,e.jsx(t,{of:o}),`
+`,e.jsx(n.h2,{id:"styling-text",children:"Styling text"}),`
+`,e.jsxs(n.p,{children:["Styles are built in for many text elements created by ",e.jsx(n.code,{children:"BodyText"}),", including headings, ordered and unordered lists, links, blockquotes and even drop caps (using a ",e.jsx(n.code,{children:'"drop-cap"'})," classed span)."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<BodyText
+  text="<span class='drop-cap'>R</span>eprehenderit hamburger pork bresaola ..."
+/>
+`})}),`
+`,e.jsx(t,{of:l}),`
+`,e.jsx(n.h3,{id:"custom-styles",children:"Custom styles"}),`
+`,e.jsx(n.p,{children:"To add your own styling, you can write styles in a global SCSS stylesheet:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<BodyText
+  text="Venison shoulder <span class='highlight'>ham hock</span> ham leberkas."
+/>
+`})}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// global.scss
+span.highlight {
+  background: palegoldenrod;
+  padding: 2px 4px;
+}
+`})}),`
+`,e.jsx(t,{of:d}),`
+`,e.jsxs(n.p,{children:["If you want to make sure styles for one portion of text don't apply other parts of the page, add a ",e.jsx(n.code,{children:"class"})," to BodyText to use as an additional selector."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<BodyText
+  class="my-special-text-block"
+  text="Venison shoulder <span class='highlight'>ham hock</span> ham leberkas."
+/>
+`})}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// global.scss
+.my-special-text-block {
+  span.highlight {
+    background: palegoldenrod;
+    padding: 2px 4px;
+  }
+}
+`})})]})}function L(s={}){const{wrapper:n}={...a(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(r,{...s})}):r(s)}export{L as default};

packages/graphics-components/docs/assets/BodyText.stories-Dj7yaN6K.js

@@ -0,0 +1,60 @@
+import{f as m,a as d}from"./props-b4vEeO_8.js";import{B as p,C as h,F as s,G as b}from"./runtime-C3rQLW--.js";import{i as k}from"./lifecycle-F2p_Qkk3.js";import{c as g,d as f}from"./create-runtime-stories-7AWWVphH.js";import{B as y}from"./BodyText-CXnxLnBi.js";const i={title:"Components/Text elements/BodyText",component:y},{Story:e}=f();var v=m("<!> <!> <!>",1);function l(n,c){p(c,!1),k();var a=v(),t=h(a);e(t,{name:"Demo",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.`},parameters:{__svelteCsf:{rawCode:"<BodyText {...args} />"}}});var r=s(t,2);e(r,{name:"Typography sample",exportName:"TypographySample",tags:["!autodocs","!dev"],args:{class:"body-text-typography-example-story",text:`<span class='drop-cap'>R</span>eprehenderit hamburger pork bresaola, dolore chuck sirloin landjaeger ham hock [tempor meatball](https://baconipsum.com/) alcatra nostrud pork belly. Culpa pork belly doner ea jowl, elit deserunt leberkas cow shoulder ham hock dolore.
+
+## Biltong turducken ground round kevin
+
+Pig est irure buffalo ullamco. Sunt beef ribs tri-tip, chislic officia sint dolor. Spare ribs drumstick ground round, irure duis cillum id chicken est ipsum ut. 
+
+Qui cupidatat chislic buffalo consequat deserunt. 
+
+Andouille sint shankle quis velit nostrud chislic meatloaf culpa labore corned beef chuck spare ribs. Filet mignon eu shankle in, meatloaf ut dolor ham hock ut.
+
+### Venison shoulder ham hock ham leberkas flank beef ribs fatback, jerky meatball ham hock
+  
+Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig. Veniam laboris sunt chislic. Aute doner porchetta nulla, tongue venison ad ex in do.
+
+- Steak
+    - Capicola 
+- [Pork chop](https://www.google.com)
+- Fillet landjaeger commodo
+
+Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.
+
+Minim id buffalo dolore ad, **boudin chicken laboris** excepteur qui eiusmod. 
+
+#### Jerky prosciutto burgdoggen
+
+Sirloin beef flank labore cillum venison pariatur cow nulla ut irure in consequat proident velit. Jerky meatball pig nulla irure laboris fatback et rump ut dolore.
+
+Biltong enim consequat pork chop, flank ea.
+
+> Officia ball tip sed tenderloin dolore. Est magna enim, turkey in turducken flank jowl ad lorem buffalo ground
+> > Ronald McDonald
+
+Flank bacon sint dolore porchetta strip steak. Tail capicola flank nostrud meatball consequat pastrami lorem cupidatat chuck drumstick ham hock bresaola sint.
+
+##### Venison pork chop
+
+Alcatra bacon mollit boudin. Capicola ut tongue biltong, cow cillum pariatur sausage.
+
+1. Minim ribeye
+2. Prosciutto laborum
+3. Salami doner irure
+
+Consectetur ribeye consequat pork capicola. T-bone ad laborum beef ribs picanha.
+
+###### Alcatra bacon mollit boudin
+
+Tempor tail doner chicken incididunt beef ribs. Ad ullamco in cupim venison. Leberkas rump ullamco adipisicing, laboris excepteur voluptate.
+
+Ham hock id porchetta elit. Sint spare ribs aute buffalo.
+
+<p class='body-correction'>Correction: Lorem ispsum dolor sit amet ameno dorime.</p>
+`},parameters:{__svelteCsf:{rawCode:"<BodyText {...args} />"}}});var u=s(r,2);e(u,{name:"Custom styles",exportName:"CustomStyles",tags:["!autodocs","!dev"],args:{class:"body-text-custom-styles-story",text:'Venison shoulder <span class="highlight">ham hock</span> ham leberkas.'},parameters:{__svelteCsf:{rawCode:"<BodyText {...args} />"}}}),d(n,a),b()}l.__docgen={version:3,name:"BodyText.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const o=g(l,i),x=["Demo","TypographySample","CustomStyles"],_=o.Demo,S=o.TypographySample,C=o.CustomStyles,F=Object.freeze(Object.defineProperty({__proto__:null,CustomStyles:C,Demo:_,TypographySample:S,__namedExportsOrder:x,default:i},Symbol.toStringTag,{value:"Module"}));export{F as B,C,_ as D,S as T};

packages/graphics-components/docs/assets/Byline-CKwG9hDU.js

@@ -0,0 +1,83 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as a}from"./index-CO-0pc0F.js";import{M as o,C as s}from"./index-Z-6k0Xrj.js";import{B as r,D as p,C as l,a as c}from"./Byline.stories-CX-euSiO.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./Byline-BhU2Zjcl.js";import"./each-CVpBMMjG.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./index-CX1x869l.js";import"./Block-D3Ui8rd-.js";import"./journalize-K6hK94UL.js";function i(t){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...a(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{of:r}),`
+`,e.jsx(n.h1,{id:"byline",children:"Byline"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"Byline"})," component adds a byline, published and updated datelines to your page."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { Byline } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<Byline
+  authors={[
+    'Dea Bankova',
+    'Prasanta Kumar Dutta',
+    'Anurag Rao',
+    'Mariano Zafra',
+  ]}
+  publishTime="2021-09-12T00:00:00.000Z"
+  updateTime="2021-09-12T12:57:00.000Z"
+/>
+`})}),`
+`,e.jsx(n.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
+`,e.jsx(n.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-yaml",children:`# ArchieML doc
+[authors]
+* Dea Bankova
+* Prasanta Kumar Dutta
+* Anurag Rao
+* Mariano Zafra
+[]
+publishTime: 2021-09-12T00:00:00.000Z
+updateTime: 2021-09-12T12:57:00.000Z
+`})}),`
+`,e.jsxs(n.p,{children:["... which you'll pass to the ",e.jsx(n.code,{children:"Byline"})," component."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { Byline } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+<\/script>
+
+<Byline
+  authors={content.authors}
+  publishTime={content.publishTime}
+  updateTime={content.updateTime}
+/>
+`})}),`
+`,e.jsx(s,{of:p}),`
+`,e.jsx(n.h2,{id:"custom-byline-published-and-updated-datelines",children:"Custom byline, published and updated datelines"}),`
+`,e.jsxs(n.p,{children:["Use ",e.jsx(n.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippets"})," to customise the byline, published and updated datelines."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
+  <!-- Optional custom byline -->
+  {#snippet byline()}
+    <strong>BY REUTERS GRAPHICS</strong>
+  {/snippet}
+
+  <!-- Optional custom published dateline -->
+  {#snippet published()}
+    PUBLISHED on some custom date and time
+  {/snippet}
+
+  <!-- Optional custom updated dateline -->
+  {#snippet updated()}
+    <em>Updated every 5 minutes</em>
+  {/snippet}
+</Byline>
+`})}),`
+`,e.jsx(s,{of:l}),`
+`,e.jsx(n.h2,{id:"custom-author-page",children:"Custom author page"}),`
+`,e.jsxs(n.p,{children:["By default, the ",e.jsx(n.code,{children:"Byline"})," component will hyperlink each author's byline to their Reuters.com page, formatted ",e.jsx(n.code,{children:"https://www.reuters.com/authors/{author-slug}/"}),"."]}),`
+`,e.jsxs(n.p,{children:["To hyperlink to different pages or email addresses, pass a custom function to the ",e.jsx(n.code,{children:"getAuthorPage"})," prop."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- Pass a custom function as \`getAuthorPage\` -->
+<Byline
+  authors={[
+    'Dea Bankova',
+    'Prasanta Kumar Dutta',
+    'Anurag Rao',
+    'Mariano Zafra',
+  ]}
+  publishTime="2021-09-12T00:00:00Z"
+  updateTime="2021-09-12T13:57:00Z"
+  getAuthorPage={(author) => {
+    return \`mailto:\${author.replace(' ', '')}@example.com\`;
+  }}
+/>
+`})}),`
+`,e.jsx(s,{of:c}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{})})]})}function L(t={}){const{wrapper:n}={...a(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{L as default};

packages/graphics-components/docs/assets/Byline-FhF0lCpY.css

@@ -0,0 +1 @@
+@charset "UTF-8";.byline.svelte-anwoqg a:where(.svelte-anwoqg):hover{text-decoration-line:underline}@media (min-width: 330px){.dateline.svelte-anwoqg div:where(.svelte-anwoqg):not(:last-child):after{content:"·";margin:0 2px 0 5px}}

packages/graphics-components/docs/assets/Byline.stories-CX-euSiO.js

@@ -0,0 +1,11 @@
+import{f as r,a as s,t as f}from"./props-b4vEeO_8.js";import{B as h,C as y,k as C,D as T,F as p,G as B}from"./runtime-C3rQLW--.js";import{i as b}from"./lifecycle-F2p_Qkk3.js";import{c as S,d as D}from"./create-runtime-stories-7AWWVphH.js";import{B as d}from"./Byline-BhU2Zjcl.js";const l={title:"Components/Text elements/Byline",component:d,tags:["autodocs"],argTypes:{align:{control:"select",options:["auto","center"]}}},{Story:o}=D();var P=r("<strong>BY REUTERS GRAPHICS</strong>"),A=r("<em>Updated every 5 minutes</em>"),R=r("<!> <!> <!>",1);function c(g,_){h(_,!1),b();var i=R(),m=y(i);{let e=T(()=>({authors:["Dea Bankova","Prasanta Kumar Dutta","Anurag Rao","Mariano Zafra"],publishTime:new Date("2021-09-12").toISOString(),updateTime:new Date("2021-09-12T13:57:00").toISOString()}));o(m,{name:"Demo",get args(){return C(e)},parameters:{__svelteCsf:{rawCode:"<Byline {...args} />"}}})}var u=p(m,2);o(u,{name:"Customised",tags:["!autodocs","!dev"],children:(e,w)=>{d(e,{publishTime:"2021-09-12T00:00:00Z",updateTime:"2021-09-12T13:57:00Z",byline:t=>{var a=P();s(t,a)},published:t=>{var a=f("PUBLISHED on some custom date and time");s(t,a)},updated:t=>{var a=A();s(t,a)},$$slots:{byline:!0,published:!0,updated:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
+  {#snippet byline()}
+    <strong>BY REUTERS GRAPHICS</strong>
+  {/snippet}
+  {#snippet published()}
+    PUBLISHED on some custom date and time
+  {/snippet}
+  {#snippet updated()}
+    <em>Updated every 5 minutes</em>
+  {/snippet}
+</Byline>`}}});var v=p(u,2);o(v,{name:"Custom author page",exportName:"CustomAuthorPage",tags:["!autodocs","!dev"],args:{authors:["Dea Bankova","Prasanta Kumar Dutta","Anurag Rao","Mariano Zafra"],publishTime:"2021-09-12T00:00:00Z",updateTime:"2021-09-12T13:57:00Z",getAuthorPage:e=>`mailto:${e.replace(" ","")}@example.com`},parameters:{__svelteCsf:{rawCode:"<Byline {...args} />"}}}),s(g,i),B()}c.__docgen={version:3,name:"Byline.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const n=S(c,l),$=["Demo","Customised","CustomAuthorPage"],Z=n.Demo,x=n.Customised,E=n.CustomAuthorPage,K=Object.freeze(Object.defineProperty({__proto__:null,CustomAuthorPage:E,Customised:x,Demo:Z,__namedExportsOrder:$,default:l},Symbol.toStringTag,{value:"Module"}));export{K as B,x as C,Z as D,E as a};

packages/graphics-components/docs/assets/DatawrapperChart-BBvguXT3.js

@@ -0,0 +1,3 @@
+import{p as r,f as T,a as y,c as u}from"./props-b4vEeO_8.js";import{o as E,a as G}from"./index-client-BAw8T8-V.js";import{G as B,B as F,C as f,F as g,I as q,J as I}from"./runtime-C3rQLW--.js";import{i as k}from"./svelte-component-C8Ginrj8.js";import{s as h}from"./snippet-C5kbqVpq.js";import{s as l}from"./attributes-Cg6aLqN3.js";import{b as J}from"./this-CrUBQEQ_.js";import{G as M}from"./GraphicBlock-uLJTqaY1.js";var N=T('<!> <div class="datawrapper-chart"><iframe frameborder="0" data-chromatic="ignore" style="width: 0; min-width: 100% !important; border: none;"></iframe></div> <!>',1);function P(v,t){F(t,!0);let x=r(t,"frameTitle",3,""),b=r(t,"ariaLabel",3,""),_=r(t,"id",3,""),S=r(t,"scrolling",3,"no"),C=r(t,"width",3,"normal"),D=r(t,"textWidth",3,"normal"),p;const w=n=>{if(n.data["datawrapper-height"]!==void 0){const d=[p];for(const o in n.data["datawrapper-height"])for(let i=0;i<d.length;i++)d[i].contentWindow===n.source&&(d[i].style.height=n.data["datawrapper-height"][o]+"px")}};E(()=>{typeof window<"u"&&window.addEventListener("message",w)}),G(()=>{typeof window<"u"&&window.removeEventListener("message",w)}),M(v,{get width(){return C()},get textWidth(){return D()},get title(){return t.title},get description(){return t.description},get notes(){return t.notes},children:(n,d)=>{var o=N(),i=f(o);{var L=e=>{var s=u(),c=f(s);h(c,()=>t.titleSnippet),y(e,s)};k(i,e=>{t.titleSnippet&&e(L)})}var m=g(i,2),a=q(m);J(a,e=>p=e,()=>p);var V=g(m,2);{var W=e=>{var s=u(),c=f(s);h(c,()=>t.notesSnippet),y(e,s)};k(V,e=>{t.notesSnippet&&e(W)})}I(()=>{l(a,"title",x()),l(a,"aria-label",b()),l(a,"id",_()),l(a,"src",t.src),l(a,"scrolling",S())}),y(n,o)},$$slots:{default:!0}}),B()}P.__docgen={data:[{name:"title",visibility:"public",description:"Title of the graphic",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"description",visibility:"public",description:"Description of the graphic, passed in as a markdown string.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"frameTitle",visibility:"public",description:"iframe title",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'},{name:"notes",visibility:"public",description:"Notes to the graphic, passed in as a markdown string.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"ariaLabel",visibility:"public",description:"iframe aria label",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'},{name:"id",visibility:"public",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'},{name:"src",visibility:"public",description:"Datawrapper embed URL",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"scrolling",visibility:"public",description:"iframe scrolling option",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"auto",text:'"auto"'},{kind:"const",type:"string",value:"yes",text:'"yes"'},{kind:"const",type:"string",value:"no",text:'"no"'}],text:'"auto" | "yes" | "no"'},static:!1,readonly:!1,defaultValue:'"no"'},{name:"width",visibility:"public",description:"Width of the chart within the text well.",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"narrower",text:'"narrower"'},{kind:"const",type:"string",value:"narrow",text:'"narrow"'},{kind:"const",type:"string",value:"normal",text:'"normal"'},{kind:"const",type:"string",value:"wide",text:'"wide"'},{kind:"const",type:"string",value:"wider",text:'"wider"'},{kind:"const",type:"string",value:"widest",text:'"widest"'},{kind:"const",type:"string",value:"fluid",text:'"fluid"'}],text:'"narrower" | "narrow" | "normal" | "wide" | "wider" | "widest" | "fluid"'},static:!1,readonly:!1,defaultValue:'"normal"'},{name:"textWidth",visibility:"public",description:`Set a different width for the text within the text well, for example,
+"normal" to keep the title, description and notes inline with the rest
+of the text well. Can't ever be wider than \`width\`.`,keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"narrower",text:'"narrower"'},{kind:"const",type:"string",value:"narrow",text:'"narrow"'},{kind:"const",type:"string",value:"normal",text:'"normal"'},{kind:"const",type:"string",value:"wide",text:'"wide"'},{kind:"const",type:"string",value:"wider",text:'"wider"'},{kind:"const",type:"string",value:"widest",text:'"widest"'},{kind:"const",type:"string",value:"fluid",text:'"fluid"'}],text:'"narrower" | "narrow" | "normal" | "wide" | "wider" | "widest" | "fluid"'},static:!1,readonly:!1,defaultValue:'"normal"'},{name:"titleSnippet",visibility:"public",description:"Custom headline and chatter snippet",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1},{name:"notesSnippet",visibility:"public",description:"Custom notes and source snippet",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1}],name:"DatawrapperChart.svelte"};export{P as D};

packages/graphics-components/docs/assets/DatawrapperChart-DnYBzkOc.js

@@ -0,0 +1,29 @@
+import{j as t}from"./index-bIIEL2MP.js";import{useMDXComponents as i}from"./index-CO-0pc0F.js";import{M as o,C as n}from"./index-Z-6k0Xrj.js";import{D as s,a as h,W as p}from"./DatawrapperChart.stories-BMkI3dxO.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./DatawrapperChart-BBvguXT3.js";import"./index-client-BAw8T8-V.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./this-CrUBQEQ_.js";import"./GraphicBlock-uLJTqaY1.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";function a(r){const e={code:"code",em:"em",h1:"h1",h2:"h2",h5:"h5",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...i(),...r.components};return t.jsxs(t.Fragment,{children:[t.jsx(o,{of:s}),`
+`,t.jsx(e.h1,{id:"datawrapperchart",children:"DatawrapperChart"}),`
+`,t.jsx(e.p,{children:"Easily add a responsive Datawrapper embed on your page."}),`
+`,t.jsx(e.pre,{children:t.jsx(e.code,{className:"language-svelte",children:`<script>
+  import { DatawrapperChart } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<DatawrapperChart
+  title="Global abortion access"
+  ariaLabel="map"
+  id="abortion-rights-map"
+  src="https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html"
+/>
+`})}),`
+`,t.jsxs(e.h5,{id:"getting-the-chart-url-for-src",children:["Getting the chart URL for ",t.jsx(e.code,{children:"src"})]}),`
+`,t.jsxs(e.p,{children:["Copy the source url for the Datawrapper chart in the ",t.jsx(e.code,{children:"src"}),` prop.
+You can get this from the published url on Reuters Graphics.`]}),`
+`,t.jsxs(e.ul,{children:[`
+`,t.jsx(e.li,{children:"Publish the chart on Datawrapper."}),`
+`,t.jsxs(e.li,{children:["Go to the ",t.jsx(e.strong,{children:"Datawrapper charts"})," Teams channel, wait for the graphic to finish publishing."]}),`
+`,t.jsxs(e.li,{children:["Inside ",t.jsx(e.strong,{children:"Embed code (for developers only)"}),", find and copy the url inside the ",t.jsx(e.code,{children:"src"})," prop. (It ends in ",t.jsx(e.code,{children:"media-embed.html"}),".)"]}),`
+`]}),`
+`,t.jsxs(e.p,{children:[t.jsx(e.strong,{children:"Note:"})," There is no need to update the url if you update the chart inside Datawrapper. Any changes will be automatically reflected."]}),`
+`,t.jsx(n,{of:h}),`
+`,t.jsx(e.h2,{id:"with-chatter",children:"With chatter"}),`
+`,t.jsx(e.p,{children:"By default, Datawrapper will export your chart with the chart chatter like title, description and notes."}),`
+`,t.jsxs(e.p,{children:["At the moment, these don't ",t.jsx(e.em,{children:"exactly"})," match our styles and can't be made to fit into the article well."]}),`
+`,t.jsx(e.p,{children:"Instead, it's often better to remove all the text from your Datawrapper chart before publishing it and add that text back via the component props."}),`
+`,t.jsx(n,{of:p})]})}function X(r={}){const{wrapper:e}={...i(),...r.components};return e?t.jsx(e,{...r,children:t.jsx(a,{...r})}):a(r)}export{X as default};

packages/graphics-components/docs/assets/DatawrapperChart.stories-BMkI3dxO.js

@@ -0,0 +1,3 @@
+import{f as m,a as c}from"./props-b4vEeO_8.js";import{B as l,C as d,F as f,G as h}from"./runtime-C3rQLW--.js";import{i as g}from"./lifecycle-F2p_Qkk3.js";import{c as u,d as w}from"./create-runtime-stories-7AWWVphH.js";import{D as b}from"./DatawrapperChart-BBvguXT3.js";const r={title:"Components/Graphics/DatawrapperChart",component:b,tags:["autodocs"],argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]}}},{Story:e}=w();var C=m("<!> <!>",1);function o(i,n){l(n,!1),g();var t=C(),a=d(t);e(a,{name:"Demo",args:{src:"https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html",id:"abortion-rights-map",ariaLabel:"map",frameTitle:"Global abortion access"},parameters:{__svelteCsf:{rawCode:"<DatawrapperChart {...args} />"}}});var p=f(a,2);e(p,{name:"With chatter",tags:["!autodocs"],args:{frameTitle:"Global abortion access",ariaLabel:"map",id:"abortion-rights-map",src:"https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html",title:"Global abortion access",description:"A map of worldwide access to abortion.",notes:`Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.
+
+Source: Center for Reproductive Rights`},parameters:{__svelteCsf:{rawCode:"<DatawrapperChart {...args} />"}}}),c(i,t),h()}o.__docgen={version:3,name:"DatawrapperChart.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const s=u(o,r),_=["Demo","WithChatter"],D=s.Demo,v=s.WithChatter,A=Object.freeze(Object.defineProperty({__proto__:null,Demo:D,WithChatter:v,__namedExportsOrder:_,default:r},Symbol.toStringTag,{value:"Module"}));export{A as D,v as W,D as a};

packages/graphics-components/docs/assets/DocsRenderer-CFRXHY34-Y9VJFKUT.js

@@ -0,0 +1,2 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-CO-0pc0F.js","./index-bIIEL2MP.js","./_commonjsHelpers-D6-XlEtG.js","./iframe-CzjIX-qr.js"])))=>i.map(i=>d[i]);
+import{_ as h}from"./iframe-CzjIX-qr.js";import{a as E,r as a,R as n}from"./index-bIIEL2MP.js";import{H as d,A as R,c as v,D as f}from"./index-Z-6k0Xrj.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";var s={},m;function w(){if(m)return s;m=1;var e=E();return s.createRoot=e.createRoot,s.hydrateRoot=e.hydrateRoot,s}var _=w(),i=new Map;function y(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var x=({callback:e,children:t})=>{let r=a.useRef();return a.useLayoutEffect(()=>{r.current!==e&&(r.current=e,e())},[e]),t};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((r,o)=>{e=r,t=o}),resolve:e,reject:t}});var C=async(e,t,r)=>{let o=await g(t,r);if(y()){o.render(e);return}let{promise:u,resolve:c}=Promise.withResolvers();return o.render(a.createElement(x,{callback:c},e)),u},D=(e,t)=>{let r=i.get(e);r&&(r.unmount(),i.delete(e))},g=async(e,t)=>{let r=i.get(e);return r||(r=_.createRoot(e,t),i.set(e,r)),r},A={code:v,a:R,...d},M=class extends a.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:n.createElement(n.Fragment,null,t)}},S=class{constructor(){this.render=async(e,t,r)=>{let o={...A,...t==null?void 0:t.components},u=f;return new Promise((c,p)=>{h(async()=>{const{MDXProvider:l}=await import("./index-CO-0pc0F.js");return{MDXProvider:l}},__vite__mapDeps([0,1,2,3]),import.meta.url).then(({MDXProvider:l})=>C(n.createElement(M,{showException:p,key:Math.random()},n.createElement(l,{components:o},n.createElement(u,{context:e,docsParameter:t}))),r)).then(()=>c())})},this.unmount=e=>{D(e)}}};export{S as DocsRenderer,A as defaultComponents};

packages/graphics-components/docs/assets/DocumentCloud-tVQNprWr.js

@@ -0,0 +1,15 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as s}from"./index-CO-0pc0F.js";import{M as r,C as c}from"./index-Z-6k0Xrj.js";import{D as l,a as i}from"./DocumentCloud.stories-MTL-Zap_.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Block-D3Ui8rd-.js";function t(n){const o={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...s(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:l}),`
+`,e.jsx(o.h1,{id:"documentcloud",children:"DocumentCloud"}),`
+`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"DocumentCloud"})," component embeds a document hosted by ",e.jsx(o.a,{href:"https://documentcloud.org",rel:"nofollow",children:"DocumentCloud"}),"."]}),`
+`,e.jsxs(o.p,{children:["The document must have its access level set to ",e.jsx(o.strong,{children:"public"})," before it can be embedded. The ",e.jsx(o.code,{children:"slug"})," can be found after the final slash in the document's URL."]}),`
+`,e.jsxs(o.p,{children:["For instance, the document included in the example is found at ",e.jsx(o.a,{href:"https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations",rel:"nofollow",children:"documentcloud.org/documents/3259984-Trump-Intelligence-Allegations"}),". The ",e.jsx(o.code,{children:"slug"})," is ",e.jsx(o.code,{children:"3259984-Trump-Intelligence-Allegations"}),"."]}),`
+`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<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"
+/>
+`})}),`
+`,e.jsx(c,{of:i})]})}function I(n={}){const{wrapper:o}={...s(),...n.components};return o?e.jsx(o,{...n,children:e.jsx(t,{...n})}):t(n)}export{I as default};

packages/graphics-components/docs/assets/DocumentCloud.stories-MTL-Zap_.js

@@ -0,0 +1 @@
+import{p as o,f as m,a as p}from"./props-b4vEeO_8.js";import{J as f,B as y,G as w}from"./runtime-C3rQLW--.js";import{i as g}from"./lifecycle-F2p_Qkk3.js";import{c as k,d as v}from"./create-runtime-stories-7AWWVphH.js";import{s}from"./attributes-Cg6aLqN3.js";import{B as h}from"./Block-D3Ui8rd-.js";var x=m('<iframe class="h-screen" sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"></iframe>');function n(t,e){let l=o(e,"width",3,"normal"),d=o(e,"id",3,""),c=o(e,"class",3,"");h(t,{get width(){return l()},get id(){return d()},get class(){return`photo fmy-6 ${c()??""}`},children:(u,S)=>{var i=x();f(()=>{s(i,"src",`https://embed.documentcloud.org/documents/${e.slug??""}/?embed=1&responsive=1&title=1`),s(i,"title",e.altText)}),p(u,i)},$$slots:{default:!0}})}n.__docgen={data:[{name:"slug",visibility:"public",description:"The unique identifier for the document.",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"altText",visibility:"public",description:"Alt text for the document.",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"width",visibility:"public",description:"Width of the container, one of: normal, wide, wider, widest or fluid",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"narrower",text:'"narrower"'},{kind:"const",type:"string",value:"narrow",text:'"narrow"'},{kind:"const",type:"string",value:"normal",text:'"normal"'},{kind:"const",type:"string",value:"wide",text:'"wide"'},{kind:"const",type:"string",value:"wider",text:'"wider"'},{kind:"const",type:"string",value:"widest",text:'"widest"'},{kind:"const",type:"string",value:"fluid",text:'"fluid"'}],text:'"narrower" | "narrow" | "normal" | "wide" | "wider" | "widest" | "fluid"'},static:!1,readonly:!1,defaultValue:'"normal"'},{name:"id",visibility:"public",description:"Add an ID to target with SCSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'},{name:"class",visibility:"public",description:"Add a class to target with SCSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1}],name:"DocumentCloud.svelte"};const r={title:"Components/Multimedia/DocumentCloud",component:n,argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]}}},{Story:_}=v();function a(t,e){y(e,!1),g(),_(t,{name:"Demo",args:{slug:"3259984-Trump-Intelligence-Allegations",altText:"These Reports Allege Trump Has Deep Ties To Russia"},parameters:{__svelteCsf:{rawCode:"<DocumentCloud {...args} />"}}}),w()}a.__docgen={version:3,name:"DocumentCloud.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const b=k(a,r),D=["Demo"],C=b.Demo,R=Object.freeze(Object.defineProperty({__proto__:null,Demo:C,__namedExportsOrder:D,default:r},Symbol.toStringTag,{value:"Module"}));export{R as D,C as a};

packages/graphics-components/docs/assets/EmbedPreviewerLink-BBB0-Hvu.css

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

packages/graphics-components/docs/assets/EmbedPreviewerLink-DiIi8u7g.js

@@ -0,0 +1,11 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as n}from"./index-CO-0pc0F.js";import{M as i}from"./index-Z-6k0Xrj.js";import{E as m}from"./EmbedPreviewerLink.stories-pYDu8PuK.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./svelte-component-C8Ginrj8.js";import"./fa-layers-text.svelte_svelte_type_style_lang-rD9gd1As.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./this-CrUBQEQ_.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./get-C3XmtPLd.js";function o(t){const r={code:"code",h1:"h1",p:"p",pre:"pre",...n(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{of:m}),`
+`,e.jsx(r.h1,{id:"embedpreviewerlink",children:"EmbedPreviewerLink"}),`
+`,e.jsxs(r.p,{children:["The ",e.jsx(r.code,{children:"EmbedPreviewerLink"})," component is a tool for previewing the embeds in development. It adds an icon at the bottom of the page that, when clicked, opens a previewer with the embeds."]}),`
+`,e.jsx(r.pre,{children:e.jsx(r.code,{className:"language-svelte",children:`<script>
+  import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
+
+  import { dev } from '$app/env';
+<\/script>
+
+<EmbedPreviewerLink {dev} />
+`})})]})}function P(t={}){const{wrapper:r}={...n(),...t.components};return r?e.jsx(r,{...t,children:e.jsx(o,{...t})}):o(t)}export{P as default};

packages/graphics-components/docs/assets/EmbedPreviewerLink.stories-pYDu8PuK.js

@@ -0,0 +1,5 @@
+import{p as _,c as b,a,f as u}from"./props-b4vEeO_8.js";import{C as w,I as i,B as k,G as L}from"./runtime-C3rQLW--.js";import{i as y}from"./lifecycle-F2p_Qkk3.js";import{i as g}from"./svelte-component-C8Ginrj8.js";import{F as E}from"./fa-layers-text.svelte_svelte_type_style_lang-rD9gd1As.js";import{c as P,d as h}from"./create-runtime-stories-7AWWVphH.js";/*!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */const x={prefix:"far",iconName:"window-restore",icon:[512,512,[],"f2d2","M432 48L208 48c-17.7 0-32 14.3-32 32l0 16-48 0 0-16c0-44.2 35.8-80 80-80L432 0c44.2 0 80 35.8 80 80l0 224c0 44.2-35.8 80-80 80l-16 0 0-48 16 0c17.7 0 32-14.3 32-32l0-224c0-17.7-14.3-32-32-32zM48 448c0 8.8 7.2 16 16 16l256 0c8.8 0 16-7.2 16-16l0-192L48 256l0 192zM64 128l256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 192c0-35.3 28.7-64 64-64z"]};var M=u('<div class="svelte-715e2e"><a rel="external" href="/embed-previewer" class="svelte-715e2e"><!></a></div>');function n(e,t){let c=_(t,"dev",3,!1);var r=b(),m=w(r);{var v=o=>{var s=M(),f=i(s),p=i(f);E(p,{get icon(){return x}}),a(o,s)};g(m,o=>{c()&&o(v)})}a(e,r)}n.__docgen={data:[{name:"dev",visibility:"public",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"false"}],name:"EmbedPreviewerLink.svelte"};const l={title:"Components/Utilities/EmbedPreviewerLink",component:n},{Story:S}=h();function d(e,t){k(t,!1),y(),S(e,{name:"Demo",tags:["!autodocs","!dev"],args:{dev:!0},parameters:{__svelteCsf:{rawCode:"<EmbedPreviewerLink {...args} />"}}}),L()}d.__docgen={version:3,name:"EmbedPreviewerLink.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const z=P(d,l),C=["Demo"],D=z.Demo,I=Object.freeze(Object.defineProperty({__proto__:null,Demo:D,__namedExportsOrder:C,default:l},Symbol.toStringTag,{value:"Module"}));export{I as E};

packages/graphics-components/docs/assets/EndNotes-CGicz0_R.css

@@ -0,0 +1 @@
+.note-title.svelte-bd3gyg p{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-block-start:clamp(.31rem,.31rem + 0vw,.31rem);margin-block-end:clamp(.56rem,.52rem + .21vw,.69rem);color:var(--theme-colour-text-primary);font-weight:500;letter-spacing:0em;margin-block-start:clamp(.88rem,.83rem + .21vw,1rem);margin-block-end:.125rem;text-transform:none}.note-content.svelte-bd3gyg p{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-block-start:clamp(.31rem,.31rem + 0vw,.31rem);margin-block-end:clamp(.56rem,.52rem + .21vw,.69rem);margin-block-start:0}

packages/graphics-components/docs/assets/EndNotes-CKQAJYQ_.js

@@ -0,0 +1,50 @@
+import{j as t}from"./index-bIIEL2MP.js";import{useMDXComponents as i}from"./index-CO-0pc0F.js";import{M as c,C as o}from"./index-Z-6k0Xrj.js";import{E as a,D as s}from"./EndNotes.stories-gsDePbQ7.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./each-CVpBMMjG.js";import"./Block-D3Ui8rd-.js";import"./snippet-C5kbqVpq.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Markdown-DUxFwijc.js";import"./svelte-component-C8Ginrj8.js";import"./create-runtime-stories-7AWWVphH.js";import"./get-C3XmtPLd.js";function r(e){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...i(),...e.components};return t.jsxs(t.Fragment,{children:[t.jsx(c,{of:a}),`
+`,t.jsx(n.h1,{id:"endnotes",children:"EndNotes"}),`
+`,t.jsxs(n.p,{children:["The ",t.jsx(n.code,{children:"EndNotes"})," component adds notes such as sources, clarifiying notes and minor corrections that come at the end of a story."]}),`
+`,t.jsx(n.pre,{children:t.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { EndNotes } from '@reuters-graphics/graphics-components';
+
+  const notes = [
+    {
+      title: 'Note',
+      text: 'Data is current as of today.',
+    },
+    {
+      title: 'Sources',
+      text: 'Data, Inc.',
+    },
+    {
+      title: 'Edited by',
+      text: '<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor',
+    },
+  ];
+<\/script>
+
+<EndNotes {notes} />
+`})}),`
+`,t.jsx(o,{of:s}),`
+`,t.jsx(n.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
+`,t.jsx(n.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
+`,t.jsx(n.pre,{children:t.jsx(n.code,{className:"language-yaml",children:`# ArchieML doc
+[endNotes]
+title: Note
+text: Data is current as of today
+
+title: Sources
+text: Data, Inc.
+
+title: Edited by
+text: Editor, Copyeditor
+[]
+`})}),`
+`,t.jsxs(n.p,{children:["... which you'll pass to the ",t.jsx(n.code,{children:"EndNotes"})," component."]}),`
+`,t.jsx(n.pre,{children:t.jsx(n.code,{className:"language-svelte",children:`<!-- graphics kit -->
+<script>
+  import { EndNotes } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+<\/script>
+
+<EndNotes notes={content.endNotes} />
+`})}),`
+`,t.jsx(o,{of:s})]})}function A(e={}){const{wrapper:n}={...i(),...e.components};return n?t.jsx(n,{...e,children:t.jsx(r,{...e})}):r(e)}export{A as default};

packages/graphics-components/docs/assets/EndNotes.stories-gsDePbQ7.js

@@ -0,0 +1 @@
+import{c as h,a as m,f as x}from"./props-b4vEeO_8.js";import{C as l,k as s,I as c,F as N,B as D,D as k,G as w}from"./runtime-C3rQLW--.js";import{i as S}from"./lifecycle-F2p_Qkk3.js";import{e as C,i as $}from"./each-CVpBMMjG.js";import{B as M}from"./Block-D3Ui8rd-.js";import{M as p}from"./Markdown-DUxFwijc.js";import{c as B,d as O}from"./create-runtime-stories-7AWWVphH.js";var j=x('<div class="note-title svelte-bd3gyg"><!></div> <div class="note-content svelte-bd3gyg"><!></div>',1);function f(e,t){M(e,{class:"notes fmt-6 fmb-8",children:(o,r)=>{var a=h(),u=l(a);C(u,17,()=>t.notes,$,(g,n)=>{var i=j(),d=l(i),y=c(d);p(y,{get source(){return s(n).title}});var E=N(d,2),b=c(E);p(b,{get source(){return s(n).text}}),m(g,i)}),m(o,a)},$$slots:{default:!0}})}f.__docgen={data:[{name:"notes",visibility:"public",description:"An array of endnote items.",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"array",text:"EndNote[]"},static:!1,readonly:!1}],name:"EndNotes.svelte"};const _={title:"Components/Text elements/EndNotes",component:f},{Story:q}=O();function v(e,t){D(t,!1);const o=[{title:"Note",text:"Data is current as of today."},{title:"Sources",text:"Data, Inc."},{title:"Edited by",text:'<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor'}];S();{let r=k(()=>({notes:o}));q(e,{name:"Demo",get args(){return s(r)},parameters:{__svelteCsf:{rawCode:"<EndNotes {...args} />"}}})}w()}v.__docgen={version:3,name:"EndNotes.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const I=B(v,_),P=["Demo"],T=I.Demo,K=Object.freeze(Object.defineProperty({__proto__:null,Demo:T,__namedExportsOrder:P,default:_},Symbol.toStringTag,{value:"Module"}));export{T as D,K as E};

packages/graphics-components/docs/assets/FeaturePhoto-Cv-aGc_F.js

@@ -0,0 +1,53 @@
+import{j as t}from"./index-bIIEL2MP.js";import{useMDXComponents as s}from"./index-CO-0pc0F.js";import{M as i,C as n}from"./index-Z-6k0Xrj.js";import{F as a,D as c,M as p}from"./FeaturePhoto.stories-BycxEqUA.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./FeaturePhoto-CKELMwR8.js";import"./index-client-BAw8T8-V.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./this-CrUBQEQ_.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./shark-D70DK9Ak.js";function r(o){const e={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...s(),...o.components};return t.jsxs(t.Fragment,{children:[t.jsx(i,{of:a}),`
+`,t.jsx(e.h1,{id:"featurephoto",children:"FeaturePhoto"}),`
+`,t.jsxs(e.p,{children:["The ",t.jsx(e.code,{children:"FeaturePhoto"})," component adds a full-width photo."]}),`
+`,t.jsx(e.pre,{children:t.jsx(e.code,{className:"language-svelte",children:`<script>
+  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+<\/script>
+
+<FeaturePhoto
+  src={\`\${assets}/images/myImage.jpg\`}
+  altText="Some alt text"
+  caption="A caption"
+/>
+`})}),`
+`,t.jsx(n,{of:c}),`
+`,t.jsx(e.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
+`,t.jsx(e.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
+`,t.jsx(e.pre,{children:t.jsx(e.code,{className:"language-yaml",children:`# ArchieML doc
+[blocks]
+
+type: photo
+width: normal
+src: images/shark.jpg
+altText: The king of the sea
+caption: Carcharodon carcharias - REUTERS
+
+[]
+`})}),`
+`,t.jsxs(e.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",t.jsx(e.code,{children:"FeaturePhoto"})," component."]}),`
+`,t.jsx(e.pre,{children:t.jsx(e.code,{className:"language-svelte",children:`<!-- App.svelte -->
+<script>
+  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+  import { assets } from '$app/paths';
+<\/script>
+
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+    <!-- ... -->
+  {:else if block.type === 'photo'}
+    <FeaturePhoto
+      width={block.width}
+      src={\`\${assets}/\${block.src}\`}
+      altText={block.altText}
+      caption={block.caption}
+    />
+  {/if}
+{/each}
+`})}),`
+`,t.jsx(e.h2,{id:"missing-alt-text",children:"Missing alt text"}),`
+`,t.jsxs(e.p,{children:[t.jsx(e.code,{children:"altText"})," is required in this component. If your photo is missing it, a small red text box will overlay the image."]}),`
+`,t.jsx(n,{of:p})]})}function E(o={}){const{wrapper:e}={...s(),...o.components};return e?t.jsx(e,{...o,children:t.jsx(r,{...o})}):r(o)}export{E as default};

packages/graphics-components/docs/assets/FeaturePhoto-itMYks95.css

@@ -0,0 +1 @@
+.placeholder.svelte-g9m2b0{background-color:#ccc}div.alt-warning.svelte-g9m2b0{background-color:red;color:#fff;top:0;right:0}

packages/graphics-components/docs/assets/FeaturePhoto.stories-BycxEqUA.js

@@ -0,0 +1 @@
+import{f,a as u}from"./props-b4vEeO_8.js";import{B as _,C as h,k as r,D as s,F as g,G as v}from"./runtime-C3rQLW--.js";import{i as w}from"./lifecycle-F2p_Qkk3.js";import{c as x,d as F}from"./create-runtime-stories-7AWWVphH.js";import{F as T}from"./FeaturePhoto-CKELMwR8.js";import{s as a}from"./shark-D70DK9Ak.js";const n={title:"Components/Multimedia/FeaturePhoto",component:T,argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]},textWidth:{control:"select",options:["normal","wide","wider","widest","fluid"]}}},{Story:i}=F();var M=f("<!> <!>",1);function m(d,c){_(c,!1),w();var t=M(),o=h(t);{let e=s(()=>({src:a,altText:"A shark!",caption:"Carcharodon carcharias - REUTERS"}));i(o,{name:"Demo",get args(){return r(e)},parameters:{__svelteCsf:{rawCode:"<FeaturePhoto {...args} />"}}})}var p=g(o,2);{let e=s(()=>({src:a,caption:"Carcharodon carcharias - REUTERS"}));i(p,{name:"Missing altText",exportName:"MissingAltText",get args(){return r(e)},parameters:{__svelteCsf:{rawCode:"<FeaturePhoto {...args} />"}}})}u(d,t),v()}m.__docgen={version:3,name:"FeaturePhoto.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const l=x(m,n),C=["Demo","MissingAltText"],P=l.Demo,S=l.MissingAltText,k=Object.freeze(Object.defineProperty({__proto__:null,Demo:P,MissingAltText:S,__namedExportsOrder:C,default:n},Symbol.toStringTag,{value:"Module"}));export{P as D,k as F,S as M};

packages/graphics-components/docs/assets/Framer-DirZ80hc.js

@@ -0,0 +1,11 @@
+import{j as r}from"./index-bIIEL2MP.js";import{useMDXComponents as m}from"./index-CO-0pc0F.js";import{M as i}from"./index-Z-6k0Xrj.js";import{F as n}from"./Framer.stories-qwqOFlBE.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./fa-layers-text.svelte_svelte_type_style_lang-rD9gd1As.js";import"./this-CrUBQEQ_.js";import"./index-C3C5q_jF.js";import"./pym.v1-C8pfgSnW.js";import"./index-D7HDsfES.js";import"./window-DXjFTZv5.js";import"./each-CVpBMMjG.js";import"./html-CPeakWmR.js";import"./index-client-BAw8T8-V.js";import"./input-DRdNoobV.js";import"./ReutersGraphicsLogo-DRqDkotX.js";function e(o){const t={code:"code",h1:"h1",p:"p",pre:"pre",...m(),...o.components};return r.jsxs(r.Fragment,{children:[r.jsx(i,{of:n}),`
+`,r.jsx(t.h1,{id:"featurephoto",children:"FeaturePhoto"}),`
+`,r.jsx(t.p,{children:"An embed tool for development in the graphics kit."}),`
+`,r.jsx(t.pre,{children:r.jsx(t.code,{className:"language-svelte",children:`<script>
+  import { Framer } from '@reuters-graphics/graphics-components';
+
+  const embeds = ['/embeds/my-chart/index.html'];
+<\/script>
+
+<Framer {embeds} />
+`})})]})}function R(o={}){const{wrapper:t}={...m(),...o.components};return t?r.jsx(t,{...o,children:r.jsx(e,{...o})}):e(o)}export{R as default};

packages/graphics-components/docs/assets/GraphicBlock-BKVwKRbz.css

@@ -0,0 +1 @@
+#g-_ai-chart-box.svelte-v5mpys,#g-_ai-chart-box.svelte-v5mpys .g-artboard:where(.svelte-v5mpys){margin:0 auto}#g-_ai-chart-box.svelte-v5mpys p:where(.svelte-v5mpys){margin:0}#g-_ai-chart-box.svelte-v5mpys .g-aiAbs:where(.svelte-v5mpys){position:absolute}#g-_ai-chart-box.svelte-v5mpys .g-aiImg:where(.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:where(.svelte-v5mpys) p:where(.svelte-v5mpys){white-space:nowrap}#g-_ai-chart-xs.svelte-v5mpys{position:relative;overflow:hidden}#g-_ai-chart-xs.svelte-v5mpys p:where(.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:where(.svelte-v5mpys){height:14px}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle1:where(.svelte-v5mpys){font-style:italic;height:14px;text-align:center;color:#717375}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle2:where(.svelte-v5mpys){font-weight:700;line-height:18px;height:18px;letter-spacing:.25em;font-size:15px}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle3:where(.svelte-v5mpys){font-weight:700;line-height:16px;height:16px;font-size:13px}#g-_ai-chart-xs.svelte-v5mpys .g-pstyle4:where(.svelte-v5mpys){line-height:11px;height:11px;font-size:11px;text-align:right}#g-_ai-chart-sm.svelte-v5mpys{position:relative;overflow:hidden}#g-_ai-chart-sm.svelte-v5mpys p:where(.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:where(.svelte-v5mpys){height:17px}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle1:where(.svelte-v5mpys){font-style:italic;height:17px;text-align:center;color:#717375}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle2:where(.svelte-v5mpys){font-weight:700;line-height:15px;height:15px;letter-spacing:.25em;font-size:12px}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle3:where(.svelte-v5mpys){font-weight:700;height:17px}#g-_ai-chart-sm.svelte-v5mpys .g-pstyle4:where(.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:where(.svelte-v5mpys){line-height:14px;height:14px;font-size:12px}#g-_ai-chart-md.svelte-v5mpys{position:relative;overflow:hidden}#g-_ai-chart-md.svelte-v5mpys p:where(.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:where(.svelte-v5mpys){height:17px}#g-_ai-chart-md.svelte-v5mpys .g-pstyle1:where(.svelte-v5mpys){font-style:italic;height:17px;text-align:center;color:#717375}#g-_ai-chart-md.svelte-v5mpys .g-pstyle2:where(.svelte-v5mpys){font-weight:700;line-height:19px;height:19px;letter-spacing:.25em;font-size:16px}#g-_ai-chart-md.svelte-v5mpys .g-pstyle3:where(.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:where(.svelte-v5mpys){font-weight:700;line-height:19px;height:19px;font-size:16px}#g-_ai-chart-md.svelte-v5mpys .g-pstyle5:where(.svelte-v5mpys){line-height:14px;height:14px;font-size:12px}div.demo-graphic.svelte-1wxpad3{height:400px;background-color:#ddd;display:flex;align-items:center;justify-content:center}div.demo-graphic.svelte-1wxpad3 img:where(.svelte-1wxpad3){opacity:.4}table.svelte-1wxpad3{width:100%;border-collapse:collapse}table.svelte-1wxpad3 th:where(.svelte-1wxpad3),table.svelte-1wxpad3 td:where(.svelte-1wxpad3){border:1px solid #ddd;padding:8px}table.svelte-1wxpad3 th:where(.svelte-1wxpad3){background-color:#f2f2f2}

packages/graphics-components/docs/assets/GraphicBlock-CtY-4dtQ.css

@@ -0,0 +1 @@
+div.container.svelte-xomc5c{display:contents}div.container.svelte-xomc5c .article-block.graphic p{margin-block-start:0;margin-block-end:clamp(.56rem,.52rem + .21vw,.69rem);font-family:var(--theme-font-family-note);font-size:calc(.9 * var(--theme-font-size-base));color:var(--theme-colour-text-primary);line-height:1.3;font-weight:300}div.container.svelte-xomc5c .article-block.graphic aside p{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-block-end:clamp(.56rem,.52rem + .21vw,.69rem);margin-block-start:clamp(.31rem,.31rem + 0vw,.31rem);margin-block-end:clamp(.31rem,.31rem + 0vw,.31rem)}

packages/graphics-components/docs/assets/GraphicBlock-qOp3_mvY.js

@@ -0,0 +1,181 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as a,C as s}from"./index-Z-6k0Xrj.js";import{G as o,D as c,A as h,C as l,a as p,b as d}from"./GraphicBlock.stories-HeBLcngG.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./GraphicBlock-uLJTqaY1.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";import"./size-DMdj3-I9.js";function i(n){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...r(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:o}),`
+`,e.jsx(t.h1,{id:"graphicblock",children:"GraphicBlock"}),`
+`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"GraphicBlock"})," component is a special derivative of the ",e.jsx(t.a,{href:"?path=/docs/components-page-layout-block--docs",children:"Block"})," component that wraps around your graphic. It also adds a title, description, notes and other text elements."]}),`
+`,e.jsxs(t.p,{children:["Many other Reuters Graphics components use ",e.jsx(t.code,{children:"GraphicBlock"})," to wrap graphics with styled text."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script>
+  import { GraphicBlock } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<GraphicBlock
+  title="Title for my chart"
+  description="Some description for your chart."
+  notes={\`Note: Data current as of Aug. 2, 2022.\\n\\nSource: [Google research](https://google.com)\`}
+>
+  <!-- Your chart goes here -->
+  <div id="my-chart" />
+</GraphicBlock>
+`})}),`
+`,e.jsx(s,{of:c}),`
+`,e.jsx(t.h2,{id:"using-with-ai2svelte-and-archieml-docs",children:"Using with ai2svelte and ArchieML docs"}),`
+`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"GraphicBlock"})," component is built to handle ",e.jsx(t.a,{href:"https://github.com/reuters-graphics/ai2svelte",rel:"nofollow",children:"ai2svelte"})," graphics in graphics kit."]}),`
+`,e.jsx(t.p,{children:"You'll likely get your text value from an ArchieML doc..."}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-yaml",children:`# ArchieML doc
+[blocks]
+type: ai-graphic
+width: normal
+chart: AiMap # IMPORTANT: This must match the name of the ai2svelte chart you import in App.svelte
+title: Earthquake in Haiti
+description: The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021.
+notes: \\Note: A shakemap represents the ground shaking produced by an earthquake.
+
+\\Source: USGIS
+:end
+altText: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
+:end
+[]
+`})}),`
+`,e.jsxs(t.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",e.jsx(t.code,{children:"GraphicBlock"})," component."]}),`
+`,e.jsxs(t.p,{children:["To pass your ai2svelte graphic into ",e.jsx(t.code,{children:"GraphicBlock"})," component, import your ai2svelte graphic at the top of ",e.jsx(t.code,{children:"App.svelte"})," and add it to the ",e.jsx(t.code,{children:"aiCharts"})," object."]}),`
+`,e.jsxs(t.blockquote,{children:[`
+`,e.jsxs(t.p,{children:[e.jsx(t.strong,{children:"Important❗:"})," Make sure that the value for ",e.jsx(t.code,{children:"chart"})," in the ArchieML doc matches the name of the ai2svelte file imported in ",e.jsx(t.code,{children:"App.svelte"}),"."]}),`
+`]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<!-- App.svelte -->
+<script>
+  // IMPORTANT: The name of your ai2svelte chart must match \`chart\` in your ArchieML doc
+  import AiMap from './ai2svelte/my-map.svelte';
+  // Error handler for missing ai2svelte charts
+  import LogBlock from './components/dev/LogBlock.svelte';
+
+  // If using with the graphics kit
+  import { assets } from '$app/paths';
+
+  // A built-in helper function in Graphis Kit for validating container width
+  import { containerWidth } from '$utils/propValidators';
+
+  // Add your imported ai2svelte charts to this object
+  const aiCharts = {
+    AiMap,
+    // Other ai2svelte graphics...
+  };
+<\/script>
+
+<!-- Loop through ArchieML blocks -->
+{#each content.blocks as block}
+  {#if block.type === 'ai-graphic'}
+    {#if !aiCharts[block.chart]}
+      <!-- Error message for when the ai2svelte chart is missing -->
+      <LogBlock message={\`Unable to find "\${block.chart}" in aiCharts\`} />
+    {:else}
+      <!-- Get the ai2svelte graphic specified by \`chart\` in ArchieML -->
+      {@const AiChart = aiCharts[block.chart]}
+      <GraphicBlock
+        id={block.chart}
+        width={containerWidth(block.width)}
+        title={block.title}
+        description={block.description}
+        notes={block.notes}
+        ariaDescription={block.altText}
+      >
+        <!-- In graphics kit, pass the \`assetsPath\` prop -->
+        <AiChart assetsPath={assets || '/'} />
+      </GraphicBlock>
+    {/if}
+  {/if}
+{/each}
+`})}),`
+`,e.jsx(s,{of:h}),`
+`,e.jsx(t.h2,{id:"custom-text",children:"Custom text"}),`
+`,e.jsxs(t.p,{children:["You can override the default styles for title and notes by making your own custom elements and passing them as ",e.jsx(t.code,{children:"title"})," and ",e.jsx(t.code,{children:"notes"})," ",e.jsx(t.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippets"})," instead of as strings:"]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<GraphicBlock>
+  <!-- Custom title snippet -->
+  {#snippet title()}
+    <h5>My smaller title</h5>
+  {/snippet}
+
+  <!-- Your graphic -->
+  <div id="my-chart"></div>
+
+  <!-- Custom notes snippet -->
+  {#snippet notes()}
+    <aside>
+      <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
+    </aside>
+  {/snippet}
+</GraphicBlock>
+`})}),`
+`,e.jsx(s,{of:l}),`
+`,e.jsx(t.h2,{id:"aria-descriptions",children:"ARIA descriptions"}),`
+`,e.jsxs(t.p,{children:["If the text in your chart isn't easily read by screen readers — for example, a map with annotations that wouldn't make sense without the visual — add an ",e.jsx(t.code,{children:"ariaDescription"})," that describes the chart."]}),`
+`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"ariaDescription"})," string will be processed as markdown, so you can add multiple paragraphs, links, headers, etc. in markdown."]}),`
+`,e.jsxs(t.blockquote,{children:[`
+`,e.jsxs(t.p,{children:[e.jsx(t.strong,{children:"Note:"})," When you set an ",e.jsx(t.code,{children:"ariaDescription"}),", your graphic will be automatically wrapped in a div with ",e.jsx(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden",rel:"nofollow",children:'aria-hidden="true"'}),", which tells screen readers to read the hidden ARIA description and skip the text in the graphic."]}),`
+`]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<GraphicBlock
+  title="Earthquake in Haiti"
+  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+  ariaDescription="A map showing the shake intensity produced by the earthquake."
+>
+  <!-- In graphics kit, pass the \`assetsPath\` prop -->
+  <AiChart assetsPath={assets || '/'} />
+</GraphicBlock>
+`})}),`
+`,e.jsx(s,{of:p}),`
+`,e.jsx(t.h2,{id:"custom-aria-descriptions",children:"Custom ARIA descriptions"}),`
+`,e.jsxs(t.p,{children:["Sometimes, instead of a simple sentence, we want to provide a data table or something more complex as an ARIA description. To do this, pass the custom elements as an ",e.jsx(t.code,{children:"ariaDescription"})," ",e.jsx(t.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippet"})," instead of as a string, as in the ",e.jsx(t.a,{href:"?path=/docs/components-graphics-graphicblock--docs#aria-descriptions",children:"example above"}),"."]}),`
+`,e.jsxs(t.p,{children:[e.jsx(t.a,{href:"https://accessibility.psu.edu/images/charts/",rel:"nofollow",children:"Read this"})," for more information on using screen reader data tables for charts."]}),`
+`,e.jsxs(t.blockquote,{children:[`
+`,e.jsxs(t.p,{children:[e.jsx(t.strong,{children:"Note:"})," The ",e.jsx(t.code,{children:"customAria"})," snippet will override the ",e.jsx(t.code,{children:"ariaDescription"})," and will also hide the text in your graphic from screen readers."]}),`
+`]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<GraphicBlock
+  title="Earthquake in Haiti"
+  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+>
+  <!-- In graphics kit, pass the \`assetsPath\` prop -->
+  <AiChart assetsPath={assets || '/'} />
+
+  <!-- Custom ARIA description snippet -->
+  {#snippet ariaDescription()}
+    <p>
+      A shakemap shows the intensity of the 7.2-magnitude earthquake that struck
+      Haiti at 8:29 a.m. EST, Aug. 14, 2021.
+    </p>
+    <table>
+      <tbody>
+        <tr>
+          <th>City</th>
+          <th>Felt shake strength</th>
+        </tr>
+        <tr>
+          <td>Les Cayes</td>
+          <td>Very strong</td>
+        </tr>
+        <tr>
+          <td>Jeremie</td>
+          <td>Strong</td>
+        </tr>
+      </tbody>
+    </table>
+  {/snippet}
+</GraphicBlock>
+
+<!-- Optionally, style the visually hidden table nicely for sighted readers who use screen readers -->
+<style lang="scss">
+  table {
+    width: 100%;
+    border-collapse: collapse;
+
+    th,
+    td {
+      border: 1px solid #ddd;
+      padding: 8px;
+    }
+
+    th {
+      background-color: #f2f2f2;
+    }
+  }
+</style>
+`})}),`
+`,e.jsx(s,{of:d})]})}function R(n={}){const{wrapper:t}={...r(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(i,{...n})}):i(n)}export{R as default};

packages/graphics-components/docs/assets/Headline-Cv_LyF7m.js

@@ -0,0 +1,122 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as o,C as t}from"./index-Z-6k0Xrj.js";import{H as a,D as c,B as p,C as l,a as d,b as h}from"./Headline.stories-D7G2C9TY.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./Headline-C-tkYFZ6.js";import"./Block-D3Ui8rd-.js";import"./Byline-BhU2Zjcl.js";import"./each-CVpBMMjG.js";import"./index-CX1x869l.js";import"./journalize-K6hK94UL.js";import"./Markdown-DUxFwijc.js";import"./size-DMdj3-I9.js";function i(s){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{of:a}),`
+`,e.jsx(n.h1,{id:"headline",children:"Headline"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"Headline"})," component creates headlines in the legacy Reuters Graphics style, with the text centred on the page."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<Headline
+  hed="Reuters Graphics Interactive"
+  dek="The beginning of a beautiful page"
+  section="World News"
+/>
+`})}),`
+`,e.jsx(t,{of:c}),`
+`,e.jsx(n.h2,{id:"with-bylines-and-dateline",children:"With bylines and dateline"}),`
+`,e.jsxs(n.p,{children:["Optionally, you can add authors and a publish time to the headline, which the ",e.jsx(n.code,{children:"Headline"})," component internally renders with the ",e.jsx(n.a,{href:"./?path=/docs/components-text-elements-byline--docs",children:"Byline"})," component."]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note"}),": Since ",e.jsx(n.code,{children:"Headline"})," uses ",e.jsx(n.code,{children:"Byline"}),", you can customise the author page hyperlink and bylines with the ",e.jsx(n.code,{children:"getAuthorPage"}),", ",e.jsx(n.code,{children:"byline"}),", ",e.jsx(n.code,{children:"published"})," and ",e.jsx(n.code,{children:"updated"})," props."]}),`
+`]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<Headline
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  section={'Global news'}
+  authors={['Jane Doe']}
+  publishTime={new Date('2020-01-01').toISOString()}
+  getAuthorPage={(author) => \`mailto:\${author.replace(' ', '')}@example.com\`}
+/>
+`})}),`
+`,e.jsx(t,{of:p}),`
+`,e.jsx(n.h2,{id:"custom-hed-and-dek",children:"Custom hed and dek"}),`
+`,e.jsxs(n.p,{children:["Use the ",e.jsx(n.code,{children:"hed"})," and/or ",e.jsx(n.code,{children:"dek"})," ",e.jsx(n.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippets"})," to override those elements with custom elements."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<Headline width="wide">
+  <!-- Custom hed snippet -->
+  {#snippet hed()}
+    <h1 class="custom-hed">
+      <span class="small block text-base">The secret to</span>
+      “The Nutcracker's”
+      <span class="small block text-base fpt-1">success</span>
+    </h1>
+  {/snippet}
+
+  <!-- Custom dek snippet -->
+  {#snippet dek()}
+    <p class="custom-dek !fmt-3">
+      How “The Nutcracker” ballet became an<span
+        class="font-medium mx-1 px-1.5 py-1">American holday staple</span
+      >and a financial pillar of ballet companies across the country
+    </p>
+  {/snippet}
+</Headline>
+
+<!-- Custom styles -->
+<style lang="scss">
+  .custom-hed {
+    line-height: 0.9;
+  }
+  .custom-dek {
+    span {
+      background-color: #fde68a;
+    }
+  }
+</style>
+`})}),`
+`,e.jsx(t,{of:l}),`
+`,e.jsx(n.h2,{id:"with-crown-image",children:"With crown image"}),`
+`,e.jsxs(n.p,{children:["To add a crown image, use the ",e.jsx(n.code,{children:"crown"})," ",e.jsx(n.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippet"}),"."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
+<\/script>
+
+<Headline
+  class="!fmt-3"
+  hed="Europa"
+  publishTime={new Date('2020-01-01').toISOString()}
+>
+  <!-- Add a crown -->
+  {#snippet crown()}
+    <img
+      src={crownImgSrc}
+      width="100"
+      class="mx-auto mb-0"
+      alt="Illustration of Europe"
+    />
+  {/snippet}
+</Headline>
+`})}),`
+`,e.jsx(t,{of:d}),`
+`,e.jsx(n.h2,{id:"with-crown-graphic",children:"With crown graphic"}),`
+`,e.jsx(n.p,{children:"Add a full graphic or any other component in the crown."}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // If in Graphis Kit
+
+  import Map from './ai2svelte/graphic.svelte'; // Import the crown graphic component
+<\/script>
+
+<Headline
+  width="wider"
+  class="!fmt-1"
+  hed={'Unfriendly skies'}
+  dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
+  section={'Ukraine Crisis'}
+  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+  publishTime={new Date('2022-03-04').toISOString()}
+>
+  <!-- Add a crown graphic -->
+  {#snippet crown()}
+    <!-- Pass \`assetsPath\` if in graphics kit -->
+    <Map assetsPath={assets || '/'} />
+  {/snippet}
+</Headline>
+`})}),`
+`,e.jsx(t,{of:h})]})}function U(s={}){const{wrapper:n}={...r(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(i,{...s})}):i(s)}export{U as default};

packages/graphics-components/docs/assets/Headline-DeohdQEz.css

@@ -0,0 +1 @@
+#g-graphic-box.svelte-16vt91t,#g-graphic-box.svelte-16vt91t .g-artboard:where(.svelte-16vt91t){margin:0 auto}#g-graphic-box.svelte-16vt91t p:where(.svelte-16vt91t){margin:0}#g-graphic-box.svelte-16vt91t .g-aiAbs:where(.svelte-16vt91t){position:absolute}#g-graphic-box.svelte-16vt91t .g-aiImg:where(.svelte-16vt91t){position:absolute;top:0;display:block;width:100%!important;height:100%;background-size:contain;background-repeat:no-repeat}#g-graphic-box.svelte-16vt91t .g-aiPointText:where(.svelte-16vt91t) p:where(.svelte-16vt91t){white-space:nowrap}#g-graphic-xs.svelte-16vt91t{position:relative;overflow:hidden}#g-graphic-xs.svelte-16vt91t p:where(.svelte-16vt91t){font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:300;line-height:16px;opacity:1;letter-spacing:0em;font-size:14px;text-align:left;color:#000;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;height:auto;position:static}#g-graphic-xs.svelte-16vt91t .g-pstyle1:where(.svelte-16vt91t){font-weight:200;height:16px;font-size:12px;text-align:center}#g-graphic-xs.svelte-16vt91t .g-pstyle2:where(.svelte-16vt91t){font-weight:200;height:16px;font-size:12px;text-align:right}#g-graphic-xs.svelte-16vt91t .g-pstyle3:where(.svelte-16vt91t){font-weight:600;height:16px;font-size:12px;text-align:center}#g-graphic-sm.svelte-16vt91t{position:relative;overflow:hidden}#g-graphic-sm.svelte-16vt91t p:where(.svelte-16vt91t){font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:200;line-height:16px;height:auto;opacity:1;letter-spacing:0em;font-size:12px;text-align:left;color:#000;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;position:static}#g-graphic-sm.svelte-16vt91t .g-pstyle0:where(.svelte-16vt91t){height:16px}#g-graphic-sm.svelte-16vt91t .g-pstyle1:where(.svelte-16vt91t){height:16px;text-align:center}#g-graphic-sm.svelte-16vt91t .g-pstyle2:where(.svelte-16vt91t){height:16px;text-align:right}#g-graphic-sm.svelte-16vt91t .g-pstyle3:where(.svelte-16vt91t){font-weight:600;height:16px;text-align:center}#g-graphic-md.svelte-16vt91t{position:relative;overflow:hidden}#g-graphic-md.svelte-16vt91t p:where(.svelte-16vt91t){font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:300;line-height:16px;opacity:1;letter-spacing:0em;font-size:14px;text-align:left;color:#000;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;height:auto;position:static}#g-graphic-md.svelte-16vt91t .g-pstyle0:where(.svelte-16vt91t){font-weight:200;height:16px;font-size:12px}#g-graphic-md.svelte-16vt91t .g-pstyle1:where(.svelte-16vt91t){font-weight:200;height:16px;font-size:12px;text-align:center}#g-graphic-md.svelte-16vt91t .g-pstyle2:where(.svelte-16vt91t){font-weight:200;height:16px;font-size:12px;text-align:right}#g-graphic-md.svelte-16vt91t .g-pstyle3:where(.svelte-16vt91t){font-weight:600;height:16px;font-size:12px;text-align:center}#g-graphic-lg.svelte-16vt91t{position:relative;overflow:hidden}#g-graphic-lg.svelte-16vt91t p:where(.svelte-16vt91t){font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:200;line-height:18px;height:auto;opacity:1;letter-spacing:0em;font-size:14px;text-align:left;color:#000;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;position:static}#g-graphic-lg.svelte-16vt91t .g-pstyle0:where(.svelte-16vt91t){height:18px;text-align:center}#g-graphic-lg.svelte-16vt91t .g-pstyle1:where(.svelte-16vt91t){height:18px}#g-graphic-lg.svelte-16vt91t .g-pstyle2:where(.svelte-16vt91t){height:18px;text-align:right}#g-graphic-lg.svelte-16vt91t .g-pstyle3:where(.svelte-16vt91t){font-weight:600;height:18px;text-align:center}#g-graphic-xl.svelte-16vt91t{position:relative;overflow:hidden}#g-graphic-xl.svelte-16vt91t p:where(.svelte-16vt91t){font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:200;line-height:18px;height:auto;opacity:1;letter-spacing:0em;font-size:14px;text-align:left;color:#000;text-transform:none;padding-bottom:0;padding-top:0;mix-blend-mode:normal;font-style:normal;position:static}#g-graphic-xl.svelte-16vt91t .g-pstyle0:where(.svelte-16vt91t){height:18px;text-align:center}#g-graphic-xl.svelte-16vt91t .g-pstyle1:where(.svelte-16vt91t){height:18px}#g-graphic-xl.svelte-16vt91t .g-pstyle2:where(.svelte-16vt91t){height:18px;text-align:right}#g-graphic-xl.svelte-16vt91t .g-pstyle3:where(.svelte-16vt91t){font-weight:600;height:18px;text-align:center}.custom-hed.svelte-1rrl70a{line-height:.9}.custom-dek.svelte-1rrl70a span:where(.svelte-1rrl70a){background-color:#fde68a}

packages/graphics-components/docs/assets/Headline-FrVY8_BO.css

@@ -0,0 +1 @@
+.headline-wrapper.svelte-1fvnqbd .dek{max-width:660px}.headline-wrapper.svelte-1fvnqbd .dek p{margin-block-start:0;font-family:var(--theme-font-family-note);line-height:1.3;font-weight:300;margin-block-end:clamp(.88rem,.83rem + .21vw,1rem)}

packages/graphics-components/docs/assets/Headpile-CIpsY1ep.css

@@ -0,0 +1 @@
+.headshot-wrapper.svelte-1c9hxol{width:7rem;height:6.75rem;position:relative;margin-block-start:-1.75rem;margin-block-end:-1.75rem;border-radius:.25rem;overflow:hidden}.background.svelte-1c9hxol{position:absolute;inset-block-end:0;inset-inline-start:0;width:7rem;height:4.75rem;display:inline-block;border-radius:.25rem}.headshot.svelte-1c9hxol{display:inline-block;width:100%;height:100%;background-size:106%;background-position:center bottom;background-repeat:no-repeat;position:absolute;inset-block-end:0;inset-inline-start:0;overflow:hidden}.wrapper-profile.svelte-na5x9x{display:flex;align-items:flex-start;justify-content:start;gap:1rem;width:100%;min-height:5.5rem}.title.svelte-na5x9x{font-weight:700;font-size:var(--theme-font-size-base);line-height:1}@media (max-width: 450px){.title.svelte-na5x9x{font-size:calc(.9 * var(--theme-font-size-base, 1rem))}}.role.svelte-na5x9x{border-block-start:.5px solid var(--tr-muted-grey);margin-inline-start:-.75rem;padding-inline-start:.75rem;margin-block-start:.25rem;padding-block-start:.25rem;font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-sm);font-weight:300;line-height:1.15;margin-block-end:clamp(1.13rem,1.06rem + .31vw,1.31rem)}@media (max-width: 450px){.role.svelte-na5x9x{font-size:var(--theme-font-size-xs)}}.description.svelte-na5x9x p{font-family:var(--theme-font-family-note);font-size:calc(.9 * var(--theme-font-size-base, 1rem));font-weight:300;margin-block-end:0;text-wrap:pretty}.description.desktop.svelte-na5x9x{display:block}.description.mobile.svelte-na5x9x{display:none}@media (max-width: 600px){.description.desktop.svelte-na5x9x{display:none}.description.mobile.svelte-na5x9x{display:block}}div.figures.svelte-1tuv41n{display:flex;flex-direction:column;gap:2.75rem}

packages/graphics-components/docs/assets/Headpile-CV7fJOsE.js

@@ -0,0 +1,27 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as o}from"./index-CO-0pc0F.js";import{M as r,C as a}from"./index-Z-6k0Xrj.js";import{H as s,D as p}from"./Headpile.stories-DLox4_QV.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./each-CVpBMMjG.js";import"./Block-D3Ui8rd-.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Markdown-DUxFwijc.js";function i(t){const n={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...o(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:s}),`
+`,e.jsx(n.h1,{id:"headpile",children:"Headpile"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"Headpile"})," component is a headshot-bulleted list of people, identifying them with their names, roles and a short description of their significance to a story."]}),`
+`,e.jsxs(n.p,{children:["It's designed to be used with headshots that have had their background removed, which can be done in the ",e.jsx(n.a,{href:"https://support.apple.com/en-gb/guide/preview/prvw15636/mac?#apd320b3b1b750a4",rel:"nofollow",children:"Preview app"})," on macOS."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { Headpile } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+<\/script>
+
+<Headpile
+  figures={[
+    {
+      img: \`\${assets}/images/person-A.jpg\`,
+      name: 'General Abdel Fattah al-Burhan',
+      role: "Sudan's Sovereign Council Chief and military commander",
+      text: 'Burhan was little known in public life until taking part in the coup ...',
+    },
+    {
+      img: \`\${assets}/images/person-B.jpg\`,
+      name: 'General Mohamed Hamdan Dagalo',
+      role: 'Leader of the Sudanese paramilitary Rapid Support Forces (RSF)',
+      text: 'Popularly known as Hemedti, Dagalo rose from lowly beginnings ...',
+    },
+  ]}
+/>
+`})}),`
+`,e.jsx(a,{of:p})]})}function F(t={}){const{wrapper:n}={...o(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{F as default};

packages/graphics-components/docs/assets/HeroHeadline-DjvJYRTs.js

@@ -0,0 +1,283 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as t}from"./index-CO-0pc0F.js";import{M as r,C as o}from"./index-Z-6k0Xrj.js";import{H as a,P as d,T as h,A as c,V as l,I as p,C as m}from"./HeroHeadline.stories-BIueMLFQ.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Block-D3Ui8rd-.js";import"./GraphicBlock-uLJTqaY1.js";import"./PaddingReset-_TGvg1_B.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";import"./Headline-C-tkYFZ6.js";import"./Byline-BhU2Zjcl.js";import"./index-CX1x869l.js";import"./journalize-K6hK94UL.js";import"./FeaturePhoto-CKELMwR8.js";import"./index-client-BAw8T8-V.js";import"./this-CrUBQEQ_.js";import"./SiteHeader-D-9D6sLa.js";import"./ReutersLogo-B33L6wtg.js";import"./window-DXjFTZv5.js";import"./index-TQx7jkZs.js";import"./time-7uMnD1vs.js";import"./advancedFormat-DF-l3-BJ.js";import"./dayjs.min-CfWDS3UC.js";import"./Video-yHzv19g_.js";import"./size-DMdj3-I9.js";import"./slot-B1isFuVn.js";import"./fa-layers-text.svelte_svelte_type_style_lang-rD9gd1As.js";import"./index-C3C5q_jF.js";function i(s){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...t(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:a}),`
+`,e.jsx(n.h1,{id:"heroheadline",children:"HeroHeadline"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"HeroHeadline"})," component creates a Reuters Graphics headline with a hero media, which can be a graphic, photo, video or other media."]}),`
+`,e.jsxs(n.p,{children:["By default, the hero is in the background, i.e., the headline and dek are stacked on top of the hero. You can unstack and insert the hero media inline -- i.e., before or after the headline -- by setting ",e.jsx(n.code,{children:"stacked: false"}),". ",e.jsx(n.a,{href:"?/iframe.html?viewMode=docs&id=components-text-elements-heroheadline--docs&globals=&args=#inline-hero",children:"Read more."})]}),`
+`,e.jsx(n.h2,{id:"photo-hero",children:"Photo hero"}),`
+`,e.jsxs(n.p,{children:["To use a photo as the hero, simply pass the image source to the ",e.jsx(n.code,{children:"img"})," prop."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
+<script>
+  import { HeroHeadline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+
+  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
+<\/script>
+
+<HeroHeadline
+  {embedded}
+  img={\`\${assets}/images/polar-bear.jpg\`}
+  ariaDescription="A photo of a polar bear"
+  notes="Photo by REUTERS"
+  section={'World News'}
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  authors={['Jane Doe', 'John Doe']}
+/>
+`})}),`
+`,e.jsx(o,{of:d}),`
+`,e.jsx(n.h2,{id:"transparent-site-header",children:"Transparent site header"}),`
+`,e.jsxs(n.p,{children:["In the graphics kit, set styles in ",e.jsx(n.code,{children:"global.scss"})," to make the Reuters site header transparent and make the hero go all the way to the top of the page:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// global.scss
+.nav-container {
+  background-color: transparent !important;
+}
+.nav-container .inner {
+  background-color: transparent !important;
+  border: none !important;
+}
+.hero-wrapper {
+  margin-block-start: -64px;
+}
+`})}),`
+`,e.jsx(o,{of:h}),`
+`,e.jsx(n.h2,{id:"ai2svelte-hero",children:"Ai2svelte hero"}),`
+`,e.jsxs(n.p,{children:["To use an ai2svelte graphic as the hero, wrap your ai2svelte component in a ",e.jsx(n.code,{children:"GraphicBlock"})," component and insert it inside ",e.jsx(n.code,{children:"HeroHeadline"}),"."]}),`
+`,e.jsxs(n.p,{children:["To customise styles, use CSS to target the class passed to ",e.jsx(n.code,{children:"HeroHeadline"}),"."]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," Pass ",e.jsx(n.code,{children:"notes"})," and ",e.jsx(n.code,{children:"ariaDescription"})," to the ",e.jsx(n.code,{children:"GraphicBlock"})," component to provide additional information about the ai2svelte graphic."]}),`
+`]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
+<script>
+  import {
+    HeroHeadline,
+    GraphicBlock,
+  } from '@reuters-graphics/graphics-components';
+
+  import QuakeMap from './ai2svelte/graphic.svelte'; // Your ai2svelte component
+
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+
+  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
+<\/script>
+
+<HeroHeadline
+  {embedded}
+  hed="Earthquake devastates Afghanistan"
+  hedSize="big"
+  hedWidth="wide"
+  class="custom-hero mb-0"
+  authors={[
+    'Anand Katakam',
+    'Vijdan Mohammad Kawoosa',
+    'Adolfo Arranz',
+    'Wen Foo',
+    'Simon Scarr',
+    'Aman Bhargava',
+    'Jitesh Chowdhury',
+    'Manas Sharma',
+    'Aditi Bhandari',
+  ]}
+  publishTime={new Date('2022-06-24').toISOString()}
+>
+  <GraphicBlock
+    width="widest"
+    role="figure"
+    class="my-0"
+    ariaDescription="Earthquake impact map"
+  >
+    <!-- Pass \`assetsPath\` if in graphics kit -->
+    <QuakeMap assetsPath={assets || '/'} />
+  </GraphicBlock>
+</HeroHeadline>
+`})}),`
+`,e.jsxs(n.p,{children:["Add styles in ",e.jsx(n.code,{children:"global.scss"}),":"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// global.scss
+// Customise styles using the class (e.g. \`custom-hero\` here) passed to \`HeroHeadline\`
+.hero-wrapper {
+  .custom-hero.headline {
+    // Adjust vertical positioning
+    align-items: flex-end !important;
+
+    @media (max-width: 1100px) {
+      // Adjust line length of title
+      max-width: var(--normal-column-width) !important;
+    }
+  }
+
+  // Make hero shorter than 100vh
+  --heroHeight: 85svh;
+
+  @media (max-width: 960px) {
+    --heroHeight: 65svh;
+  }
+
+  // For small height
+  @media (max-height: 850px) {
+    --heroHeight: 100svh;
+  }
+
+  // Custom hero sizing for landscape mobile
+  @media (max-width: 960px) and (orientation: landscape) {
+    --heroHeight: 200svh;
+  }
+}
+
+// Override default fixed height for hero layout in embeds
+.hero-wrapper.embedded {
+  --heroHeight: 1000px;
+}
+`})}),`
+`,e.jsx(o,{of:c}),`
+`,e.jsx(n.h2,{id:"video-hero",children:"Video hero"}),`
+`,e.jsxs(n.p,{children:["To add a video as the hero, use the ",e.jsx(n.a,{href:"?path=/docs/components-multimedia-video--docs",children:"Video"})," component. To customise styles, use CSS to target the class passed to ",e.jsx(n.code,{children:"HeroHeadline"}),"."]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," Pass ",e.jsx(n.code,{children:"notes"})," and ",e.jsx(n.code,{children:"ariaDescription"})," to the ",e.jsx(n.code,{children:"GraphicBlock"})," component to provide additional information about the video."]}),`
+`]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+
+  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
+<\/script>
+
+<HeroHeadline
+  {embedded}
+  class="video-hero"
+  hed="The conflict in Ethiopia"
+  hedSize="bigger"
+  hedWidth="wide"
+  authors={['Aditi Bhandari ', 'David Lewis']}
+  publishTime={new Date('2020-12-18').toISOString()}
+>
+  <Video
+    width="widest"
+    class="my-0"
+    showControls={false}
+    preloadVideo="auto"
+    playVideoWhenInView={false}
+    src={\`\${assets}/videos/intro.mp4\`}
+    poster={\`\${assets}/images/video-poster-intro.jpg\`}
+    notes="Drone footage from the Village 8 refugee camp in Sudan."
+    ariaDescription="Aerial footage of people houses in refugee camp"
+  />
+</HeroHeadline>
+`})}),`
+`,e.jsxs(n.p,{children:["Add styles in ",e.jsx(n.code,{children:"global.scss"}),":"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// global.scss
+// Customise styles using the class (e.g. \`video-hero\` here) passed to \`HeroHeadline\`
+.hero-wrapper {
+  --heroHeight: calc(100svh - 60px);
+  .video-hero.headline {
+    header {
+      // Adjust vertical position as offset from default center
+      top: calc(50svh - 250px);
+    }
+
+    h1 {
+      color: #ffd430;
+      text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+    }
+  }
+}
+`})}),`
+`,e.jsx(o,{of:l}),`
+`,e.jsx(n.h2,{id:"inline-hero",children:"Inline hero"}),`
+`,e.jsxs(n.p,{children:["To use a photo, graphic, video, etc. as an inline hero -- i.e., to make the hero appear ",e.jsx(n.em,{children:"after"})," the headline and dek, instead of stacked underneath -- set ",e.jsx(n.code,{children:"stacked"})," to ",e.jsx(n.code,{children:"false"}),". Otherwise, add your hero media in the same way as documented above."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
+<script>
+  import {
+    HeroHeadline,
+    GraphicBlock,
+  } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+
+  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
+<\/script>
+
+<!-- Set \`stacked\` to \`false\` -->
+<HeroHeadline
+  {embedded}
+  stacked={false}
+  section="Global news"
+  hed="The plunge from 29,000 feet"
+  dek="How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes."
+  class="mb-0"
+  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+  publishTime={new Date('2020-01-01').toISOString()}
+>
+  <GraphicBlock
+    width="widest"
+    role="figure"
+    class="my-0"
+    ariaDescription="Earthquake impact map"
+    notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
+  >
+    <!-- Pass \`assetsPath\` if in graphics kit -->
+    <CrashMap assetsPath={assets || '/'} />
+  </GraphicBlock>
+</HeroHeadline>
+`})}),`
+`,e.jsx(o,{of:p}),`
+`,e.jsx(n.h2,{id:"custom-hed-dek-and-byline",children:"Custom hed, dek and byline"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"HeroHeadline"})," component internally uses the ",e.jsx(n.a,{href:"?path=/docs/components-text-elements-headline--docs",children:"Headline"})," component to render the headline and dek, which lets you to customise the headline and dek by passing ",e.jsx(n.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippets"})," into the ",e.jsx(n.code,{children:"hed"})," and ",e.jsx(n.code,{children:"dek"})," props."]}),`
+`,e.jsxs(n.p,{children:["Since ",e.jsx(n.code,{children:"Headline"})," internally uses the ",e.jsx(n.a,{href:"?path=/docs/components-text-elements-headline--docs",children:"Byline"})," component, you can also customise the author page hyperlink and bylines with the ",e.jsx(n.code,{children:"getAuthorPage"}),", ",e.jsx(n.code,{children:"byline"}),", ",e.jsx(n.code,{children:"published"})," and ",e.jsx(n.code,{children:"updated"})," props."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
+<HeroHeadline
+  class="custom-hed"
+  authors={[
+    'Prasanta Kumar Dutta',
+    'Dea Bankova',
+    'Aditi Bhandari',
+    'Anurag Rao',
+  ]}
+  publishTime={new Date('2023-05-11').toISOString()}
+  img={eurovisImgSrc}
+  getAuthorPage={(author) => {
+    return \`mailto:\${author.replace(' ', '')}@example.com\`;
+  }}
+>
+  <!-- Custom hed snippet -->
+  {#snippet hed()}
+    <h1>
+      <div class="body-note">A visual guide to</div>
+      <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
+    </h1>
+  {/snippet}
+
+  <!-- Custom dek snippet -->
+  {#snippet dek()}
+    <div class="dek">
+      <p>
+        Performers from 37 countries are coming together May 9-13 in Liverpool,
+        England, for the 67th annual Eurovision Song Contest. The winner gets
+        the trophy and their country gets the right to host next year’s event,
+        produced by the European Broadcasting Union (EBU).
+      </p>
+    </div>
+  {/snippet}
+</HeroHeadline>
+`})}),`
+`,e.jsxs(n.p,{children:["Add styles in ",e.jsx(n.code,{children:"global.scss"}),":"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// global.scss
+.custom-hed {
+  h1 {
+    .body-note {
+      color: #ffffff;
+    }
+    .title {
+      color: #ffffff;
+      text-shadow: 1px 1px 8px #ff7c88;
+      filter: drop-shadow(0px 0px 12px #ff7c88);
+    }
+  }
+
+  .dek {
+    margin-block-start: 1rem;
+    p {
+      color: #ffffff;
+      text-shadow: 1px 1px 8px #ff7c88;
+      filter: drop-shadow(0px 0px 12px #ff7c88);
+    }
+  }
+}
+`})}),`
+`,e.jsx(o,{of:m})]})}function ne(s={}){const{wrapper:n}={...t(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(i,{...s})}):i(s)}export{ne as default};

packages/graphics-components/docs/assets/Highlight-rHebhLku.js

@@ -0,0 +1 @@
+import{R as r}from"./index-bIIEL2MP.js";const a=({children:o})=>{const e={backgroundColor:"#FFF8DC",padding:"0.15em 0.25em",border:"1px solid rgb(255 239 177)",boxShadow:"0 1px 2px rgba(0, 0, 0, 0.1)",fontWeight:"bold"};return r.createElement("span",{style:e},o)};export{a as H};

packages/graphics-components/docs/assets/HorizontalScroller-FLaiLtE4.js

@@ -0,0 +1,386 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as t}from"./index-CO-0pc0F.js";import{M as i}from"./index-Z-6k0Xrj.js";import{H as s}from"./HorizontalScroller.stories-BB6MtQQl.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./window-DXjFTZv5.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./tweened-4Ja_XIbT.js";import"./index-client-BAw8T8-V.js";import"./actions-BHcvdwVC.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./size-DMdj3-I9.js";import"./this-CrUBQEQ_.js";import"./each-CVpBMMjG.js";import"./BodyText-CXnxLnBi.js";import"./Markdown-DUxFwijc.js";import"./Block-D3Ui8rd-.js";import"./DatawrapperChart-BBvguXT3.js";import"./GraphicBlock-uLJTqaY1.js";import"./PaddingReset-_TGvg1_B.js";import"./Headline-C-tkYFZ6.js";import"./Byline-BhU2Zjcl.js";import"./index-CX1x869l.js";import"./journalize-K6hK94UL.js";import"./html-CPeakWmR.js";import"./ScrollerBase-DJMKplMV.js";const l=""+new URL("illustrator-CMBieaIY.png",import.meta.url).href;function r(o){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{of:s}),`
+`,e.jsx(n.h1,{id:"horizontalscroller",children:"HorizontalScroller"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"HorizontalScroller"})," component creates a horizontal scrolling section that scrolls through any child content wider than ",e.jsx(n.code,{children:"100vw"}),"."]}),`
+`,e.jsxs(n.p,{children:["To use ",e.jsx(n.code,{children:"HorizontalScroller"}),", wrap it around the content that you want to horizontally scroll through. The scroll length is controlled by the height of the ",e.jsx(n.code,{children:"HorizontalScroller"})," container, which is set by the prop ",e.jsx(n.code,{children:"height"}),". ",e.jsx(n.code,{children:"height"})," defaults to ",e.jsx(n.code,{children:"200lvh"}),", but you can adjust this to any valid CSS height value such as ",e.jsx(n.code,{children:"1200px"})," or ",e.jsx(n.code,{children:"400lvh"}),"."]}),`
+`,e.jsxs(n.p,{children:["The child content inside the ",e.jsx(n.code,{children:"HorizontalScroller"})," must be wider than ",e.jsx(n.code,{children:"100vw"})," so that there is overflow to horizontal scroll through. By default, only the top ",e.jsx(n.code,{children:"100lvh"})," of the child content is visible. You can use CSS ",e.jsx(n.code,{children:"transform: translate()"})," on the child content to adjust its vertical positioning within the visible area."]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["💡TIP: Use ",e.jsx(n.code,{children:"lvh"})," or ",e.jsx(n.code,{children:"svh"})," units instead of ",e.jsx(n.code,{children:"vh"})," unit for the height, as ",e.jsx(n.a,{href:"https://www.w3.org/TR/css-values-4/#large-viewport-size",rel:"nofollow",children:"these units"})," are more reliable on mobile or other devices where elements such as the address bar toggle between being shown and hidden."]}),`
+`]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["💡TIP: Set the ",e.jsx(n.code,{children:"showDebugInfo"})," prop to ",e.jsx(n.code,{children:"true"})," to visualise the scroll progress and other useful information."]}),`
+`]}),`
+`,e.jsxs(n.p,{children:["See the full list of available props under the ",e.jsx(n.code,{children:"Controls"})," tab in the ",e.jsx(n.a,{href:"?path=/story/components-graphics-horizontalscroller--demo",children:"demo"}),"."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script lang="ts">
+  import {
+    HorizontalScroller,
+    Block,
+  } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<!-- Wrap \`HorizontalScroller\` in a fluid container for a full bleed experience -->
+<Block width="fluid">
+  <!-- Optionally set \`height\` prop to adjust scroll length. Defaults to \`200lvh\` -->
+  <HorizontalScroller>
+    <!-- Child content wider than 100vw. Only the top 100lvh is visible. -->
+    <div style="width: 400vw; height: 100lvh;">
+      <img
+        src="my-wide-image.jpg"
+        alt="alt text"
+        style="width: 100%; height: 100%; object-fit: cover; padding: 0; margin: 0;"
+      />
+    </div>
+  </HorizontalScroller>
+</Block>
+`})}),`
+`,e.jsx(n.h2,{id:"controlling-scroll-behaviour-with-stops-and-easing",children:"Controlling scroll behaviour with stops and easing"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"HorizontalScroller"})," allows you to control the horizontal scroll behaviour and pacing with various props."]}),`
+`,e.jsx(n.p,{children:e.jsxs(n.strong,{children:[e.jsx(n.code,{children:"stops"}),":"]})}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"stops"})," is an optional prop that accepts an array of numbers between ",e.jsx(n.code,{children:"0"})," and ",e.jsx(n.code,{children:"1"}),". At these points, which corresponds to the scroll ",e.jsx(n.code,{children:"progress"})," values, the scrolling stops or slows down. This is useful for adding custom pauses based on progress."]}),`
+`,e.jsxs(n.p,{children:["For example, as shown in the demo below, if you define ",e.jsx(n.code,{children:"stops"})," as ",e.jsx(n.code,{children:"[0.2, 0.5, 0.9]"}),", the scrolling will pause or slow down at these ",e.jsx(n.code,{children:"progress"})," values as the user scrolls through the ",e.jsx(n.code,{children:"HorizontalScroller"})," section."]}),`
+`,e.jsx(n.p,{children:e.jsxs(n.strong,{children:[e.jsx(n.code,{children:"scrubbed"}),":"]})}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"scrubbed"})," prop controls whether the scrolling is tied exactly to the scroll position (",e.jsx(n.code,{children:"scrubbed: true"}),") or is smoothed out (",e.jsx(n.code,{children:"scrubbed: false"}),"). This prop defaults to ",e.jsx(n.code,{children:"true"}),"."]}),`
+`,e.jsxs(n.p,{children:["If ",e.jsx(n.code,{children:"scrubbed"})," is set to ",e.jsx(n.code,{children:"false"})," and ",e.jsx(n.code,{children:"stops"})," are defined, the scrolling transitions smoothly between the stop values."]}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"easing"})})," and ",e.jsx(n.strong,{children:e.jsx(n.code,{children:"duration"})}),":"]}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"easing"})," accepts any easing function from ",e.jsx(n.code,{children:"svelte/easing"})," or a custom easing function, while ",e.jsx(n.code,{children:"duration"})," sets the time, in milliseconds, for each transition between stops."]}),`
+`,e.jsxs(n.p,{children:["So, if the stops are at irregular intervals — for example, ",e.jsx(n.code,{children:"[0.2, 0.9]"})," — the scroll to the first stop will be much quicker than the scroll to the second stop since the distance to travel is different but the duration of the transition is the same."]}),`
+`,e.jsxs(n.p,{children:["By default, ",e.jsx(n.code,{children:"duration"})," is set to ",e.jsx(n.code,{children:"400"})," milliseconds."]}),`
+`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-horizontalscroller--with-stops",children:"Demo"})}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script lang="ts">
+  import {
+    HorizontalScroller,
+    Block,
+  } from '@reuters-graphics/graphics-components';
+  import { quartInOut } from 'svelte/easing';
+<\/script>
+
+<!-- Wrap \`HorizontalScroller\` in a fluid container for a full bleed experience -->
+<Block width="fluid">
+  <HorizontalScroller
+    stops={[0.2, 0.5, 0.9]}
+    duration={400}
+    scrubbed={false}
+    easing={quartInOut}
+    showDebugInfo={true}
+  >
+    <!-- Child content wider than 100vw. Only the top 100lvh is visible. -->
+    <div style="width: 200vw; height: 100lvh;">
+      <img
+        src="my-wide-image.jpg"
+        alt="alt text"
+        style="width: 100%; height: 100%; object-fit: cover; padding: 0; margin: 0;"
+      />
+    </div>
+  </HorizontalScroller>
+</Block>
+`})}),`
+`,e.jsx(n.h2,{id:"extended-boundaries",children:"Extended boundaries"}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"HorizontalScroller"})," has ",e.jsx(n.code,{children:"mappedStart"})," and ",e.jsx(n.code,{children:"mappedEnd"})," props, which extend the horizontal scroll boundaries beyond the default 0 to 1 range. This is useful when you want to create an overscroll effect or have more control over the horizontal scroll range. By default, these values are set to 0 and 1 respectively."]}),`
+`,e.jsxs(n.p,{children:["If using custom ",e.jsx(n.code,{children:"mappedStart"})," and ",e.jsx(n.code,{children:"mappedEnd"})," values, you must also set ",e.jsx(n.code,{children:"stops"})," values that are within the mapped range."]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:["💡TIP: In the debugging info box, ",e.jsx(n.code,{children:"Progress"})," indicates the raw scroll progress value between ",e.jsx(n.code,{children:"0"})," and ",e.jsx(n.code,{children:"1"}),". ",e.jsx(n.code,{children:"Mapped Progress"})," indicates the vertical progress mapped to ",e.jsx(n.code,{children:"mappedStart"})," and ",e.jsx(n.code,{children:"mappedEnd"}),". If they are not set, ",e.jsx(n.code,{children:"Mapped Progress"})," is bound between 0 and 1 and matches ",e.jsx(n.code,{children:"Progress"}),". ",e.jsx(n.code,{children:"Eased Progress"})," indicates the scroll progress with any stops and easing applied. ",e.jsx(n.code,{children:"Eased Progress"})," is what reflects the actual transition of the horizontal scroll position."]}),`
+`]}),`
+`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-horizontalscroller--extended-boundaries",children:"Demo"})}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script lang="ts">
+  import {
+    HorizontalScroller,
+    Block,
+  } from '@reuters-graphics/graphics-components';
+  import { quartInOut } from 'svelte/easing';
+<\/script>
+
+<!-- Wrap \`HorizontalScroller\` in a fluid container for a full bleed experience -->
+<Block width="fluid">
+  <HorizontalScroller
+    mappedStart={-0.5}
+    mappedEnd={1.5}
+    stops={[0, 1]}
+    showDebugInfo={true}
+    easing={quartInOut}
+  >
+    <!-- Child content wider than 100vw. Only the top 100lvh is visible. -->
+    <div style="width: 200vw; height: 100lvh;">
+      <img
+        src="my-wide-image.jpg"
+        alt="alt text"
+        style="width: 100%; height: 100%; object-fit: cover; padding: 0; margin: 0;"
+      />
+    </div>
+  </HorizontalScroller>
+</Block>
+`})}),`
+`,e.jsx(n.h2,{id:"with-ai2svelte-components",children:"With ai2svelte components"}),`
+`,e.jsxs(n.p,{children:["With ",e.jsx(n.a,{href:"https://reuters-graphics.github.io/ai2svelte/",rel:"nofollow",children:"ai2svelte"})," v1.0.3 onwards, you can export your ai2svelte graphic with a wider-than-viewport layout and use it directly inside ",e.jsx(n.code,{children:"HorizontalScroller"})," to create horizontally scrolling graphics."]}),`
+`,e.jsx(n.p,{children:"To do that, follow these steps:"}),`
+`,e.jsxs(n.ol,{children:[`
+`,e.jsxs(n.li,{children:["In Illustrator, rename your artboard with the breakpoint at which you want that artboard to be visible on the page. For example, to make the XL artboard visible on viewports wider than 1200px, rename it to ",e.jsx(n.code,{children:"xl:1200"}),". You can have multiple artboards with different breakpoints."]}),`
+`,e.jsx(n.li,{children:"Add these properties to the ai2svelte settings and run the script to export the component."}),`
+`]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-yaml",children:`include_resizer_css: false
+respect_height: true
+allow_overflow: true
+`})}),`
+`,e.jsx("img",{src:l,alt:"Screenshot showing Illustrator document with artboard panel"}),`
+`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-horizontalscroller--scrollable-ai-2-svelte",children:"Demo"})}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script lang="ts">
+  import {
+    HorizontalScroller,
+    Block,
+  } from '@reuters-graphics/graphics-components';
+  import AiGraphic from './ai2svelte/ai-graphic.svelte';
+
+  // If using with the graphics kit
+  import { assets } from '$app/paths';
+
+  // Optional easing function
+  import { sineInOut } from 'svelte/easing';
+<\/script>
+
+<!-- Wrap \`HorizontalScroller\` in a fluid container for a full bleed experience -->
+<Block width="fluid">
+  <HorizontalScroller height="800lvh" easing={sineInOut} showDebugInfo>
+    <AiGraphic assetsPath={assets} />
+  </HorizontalScroller>
+</Block>
+`})}),`
+`,e.jsx(n.h2,{id:"with-ai2svelte-components-advanced",children:"With ai2svelte components: advanced"}),`
+`,e.jsxs(n.p,{children:["You can use the bound prop ",e.jsx(n.code,{children:"progress"})," to create advanced interactivity with an ai2svelte graphic."]}),`
+`,e.jsxs(n.p,{children:["The demo below has 2 advanced interactions: fade in/out of caption boxes based on scroll position and parallax movement of a ",e.jsx(n.code,{children:"png"})," layer."]}),`
+`,e.jsx(n.h3,{id:"captions-fading-inout",children:"Captions fading in/out"}),`
+`,e.jsxs(n.p,{children:["Caption boxes are exported as ",e.jsx(n.code,{children:"htext"})," ",e.jsx(n.a,{href:"https://reuters-graphics.github.io/ai2svelte/users/tagged-layers/",rel:"nofollow",children:"tagged layers"})," in ai2svelte. In this example, we use the ",e.jsx(n.code,{children:"handleScroll()"})," function to check the position of each caption box relative to the viewport width and set its opacity to ",e.jsx(n.code,{children:"1"})," (visible) or ",e.jsx(n.code,{children:"0"})," (hidden) based on whether the caption box is within the ",e.jsx(n.code,{children:"threshold"})," of the viewport. In Adobe Illustrator, set ",e.jsx(n.code,{children:"override_text: true"})," in the ai2svelte export settings to allow custom HTML content in tagged text layers."]}),`
+`,e.jsx(n.h3,{id:"parallax-effect-with-png-layer",children:"Parallax effect with png layer"}),`
+`,e.jsxs(n.p,{children:["This demo has a tagged ",e.jsx(n.code,{children:"png"})," ",e.jsx(n.a,{href:"https://reuters-graphics.github.io/ai2svelte/users/tagged-layers/",rel:"nofollow",children:"layer"}),", which contains the foreground overlay image. The ",e.jsx(n.code,{children:"handleScroll()"})," function uses the bound ",e.jsx(n.code,{children:"progress"})," value to calculate a horizontal translation for the ",e.jsx(n.code,{children:"png"})," layer, creating a parallax effect as the user scrolls through the ",e.jsx(n.code,{children:"HorizontalScroller"}),"."]}),`
+`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-horizontalscroller--scrollable-ai-2-svelte-advanced",children:"Demo"})}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script lang="ts">
+  import {
+    HorizontalScroller,
+    Block,
+  } from '@reuters-graphics/graphics-components';
+  import AiGraphic from './ai2svelte/ai-graphic.svelte';
+  import { sineInOut } from 'svelte/easing';
+
+  // If using with the graphics kit
+  import { assets } from '$app/paths';
+
+  // bind progress for advanced interactivity
+  let progress: number = $state(0);
+  let pngLayer: HTMLElement | null;
+  let captions: HTMLElement[] | null;
+  let threshold = 0.8;
+  let screenWidth: number = $state(0);
+
+  function handleScroll() {
+    // Create a parallax movement for the foreground png layer
+    if (pngLayer) {
+      pngLayer.style.transform = \`scale(1.5) translateX(\${map(progress, 0, 1, -15, 85)}%)\`;
+    }
+
+    // For each caption, checks if position of the caption is below the threshold.
+    // If it is, show it. If not, hide it
+    if (captions?.length) {
+      captions.forEach((caption) => {
+        let captionWidth = caption.getBoundingClientRect().width;
+        let captionMidpoint =
+          caption.getBoundingClientRect().left + captionWidth / 2;
+
+        if (
+          captionMidpoint < screenWidth * threshold &&
+          caption.style.opacity !== '1'
+        ) {
+          caption.style.opacity = '1';
+        } else if (
+          captionMidpoint > screenWidth * threshold &&
+          caption.style.opacity !== '0'
+        ) {
+          caption.style.opacity = '0';
+        }
+      });
+    }
+  }
+
+  // Refetch new captions and png image every time the artboard changes
+  function onArtboardChange(artboard: HTMLElement) {
+    pngLayer = artboard.querySelector('.g-png-layer-overlay');
+    captions = Array.from(artboard.querySelectorAll('.g-captions'));
+
+    if (pngLayer) {
+      window.removeEventListener('scroll', handleScroll);
+      window.addEventListener('scroll', handleScroll, {
+        passive: true,
+      });
+
+      // to translate overlay layer on initial load
+      handleScroll();
+    }
+  }
+<\/script>
+
+<!-- Wrap \`HorizontalScroller\` in a fluid container for a full bleed experience -->
+<Block width="fluid">
+  <HorizontalScroller
+    height="800lvh"
+    bind:progress
+    easing={sineInOut}
+    showDebugInfo={true}
+  >
+    <AiGraphic
+      assetsPath={assets}
+      {onArtboardChange}
+      taggedText={{
+        htext: {
+          captions: {
+            caption1:
+              '<div class="scroller-caption"><strong>Caption 1!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
+            caption2:
+              '<div class="scroller-caption"><strong>Caption 2!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
+            caption3:
+              '<div class="scroller-caption"><strong>Caption 3!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
+            caption4:
+              '<div class="scroller-caption"><strong>Caption 4!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
+          },
+        },
+      }}
+    />
+  </HorizontalScroller>
+</Block>
+
+<style lang="scss">
+  :global(.scroller-caption) {
+    padding: 1rem;
+    margin: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 8px;
+    color: white;
+    filter: drop-shadow(0px 2px 16px rgba(0, 0, 0, 0.2));
+  }
+</style>
+`})}),`
+`,e.jsx(n.h2,{id:"with-custom-child-components",children:"With custom child components"}),`
+`,e.jsxs(n.p,{children:["You can create a custom horizontal layout with any component and pass it as a child to the ",e.jsx(n.code,{children:"HorizontalScroller"}),". Here's an example with ",e.jsx(n.code,{children:"DatawrapperChart"}),", ",e.jsx(n.code,{children:"Headline"})," and ai2svelte components laid out in a horizontal scroll."]}),`
+`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-horizontalscroller--custom-children",children:"Demo"})}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script lang="ts">
+  import {
+    Block,
+    DatawrapperChart,
+    Headline,
+    HorizontalScroller,
+  } from '@reuters-graphics/graphics-components';
+  import AiChart from './ai2svelte/ai-chart.svelte';
+<\/script>
+
+<!-- Wrap \`HorizontalScroller\` in a fluid container for a full bleed experience -->
+<Block width="fluid">
+  <HorizontalScroller>
+    <div id="horizontal-stack">
+      <div style="width: 100vw;">
+        <DatawrapperChart
+          title="Global abortion access"
+          ariaLabel="map"
+          id="abortion-rights-map"
+          src="https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html"
+          frameTitle=""
+          scrolling="no"
+          textWidth="normal"
+          width="wider"
+        />
+      </div>
+      <div style="width: 100vw;">
+        <Headline
+          hed="Reuters Graphics Interactive"
+          dek="The beginning of a beautiful page"
+          section="World News"
+        />
+      </div>
+      <div style="width: 100vw;">
+        <Block width="normal">
+          <AiChart />
+        </Block>
+      </div>
+    </div>
+  </HorizontalScroller>
+</Block>
+
+<style lang="scss">
+  #horizontal-stack {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    gap: 10vw;
+    height: 100%;
+  }
+</style>
+`})}),`
+`,e.jsx(n.h2,{id:"with-scrollerbase",children:"With ScrollerBase"}),`
+`,e.jsxs(n.p,{children:["You can also integrate HorizontalScroller with ",e.jsx(n.code,{children:"ScrollerBase"})," for a horizontal scroll with vertical captions."]}),`
+`,e.jsxs(n.p,{children:["When using ",e.jsx(n.code,{children:"HorizontalScroller"})," with ",e.jsx(n.code,{children:"ScrollerBase"})," or other scrollers, you must:"]}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:["Create a ",e.jsx(n.code,{children:"progress"})," state variable and bind it to both ",e.jsx(n.code,{children:"ScrollerBase"})," and ",e.jsx(n.code,{children:"HorizontalScroller"})]}),`
+`,e.jsxs(n.li,{children:["Set ",e.jsx(n.code,{children:"HorizontalScroller"}),"'s ",e.jsx(n.code,{children:"height"})," to ",e.jsx(n.code,{children:"100lvh"})]}),`
+`,e.jsxs(n.li,{children:["Set ",e.jsx(n.code,{children:"handleScroll"})," to ",e.jsx(n.code,{children:"false"})]}),`
+`]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"⚠️ Warning:"})," It is not recommended to use HorizontalScroller with vertical ScrollerBase. This example is only to serve the purpose of demonstrating how to control the HorizontalScroller with an external progress value (ScrollerBase's progress in this case)."]}),`
+`]}),`
+`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-horizontalscroller--with-scroller-base",children:"Demo"})}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script lang="ts">
+  import {
+    HorizontalScroller,
+    ScrollerBase,
+    Block,
+  } from '@reuters-graphics/graphics-components';
+  import AiGraphic from './ai2svelte/ai-graphic.svelte';
+  import { circInOut } from 'svelte/easing';
+
+  // Optional: Bind your own variables to use them in your code.
+  let progress = $state(0);
+<\/script>
+
+<ScrollerBase bind:progress query="div.step-foreground-container">
+  {#snippet backgroundSnippet()}
+    <!-- Wrap \`HorizontalScroller\` in a fluid container for a full bleed experience -->
+    <Block width="fluid">
+      <HorizontalScroller
+        bind:progress
+        height="100lvh"
+        handleScroll={false}
+        showDebugInfo={true}
+      >
+        <AiGraphic />
+      </HorizontalScroller>
+    </Block>
+  {/snippet}
+  {#snippet foregroundSnippet()}
+    <!-- Add custom foreground HTML or component -->
+    <div class="step-foreground-container"><p>Step 1</p></div>
+    <div class="step-foreground-container"><p>Step 2</p></div>
+    <div class="step-foreground-container"><p>Step 3</p></div>
+    <div class="step-foreground-container"><p>Step 4</p></div>
+    <div class="step-foreground-container"><p>Step 5</p></div>
+  {/snippet}
+</ScrollerBase>
+
+<style lang="scss">
+  .step-foreground-container {
+    height: 100vh;
+    width: 50%;
+    background-color: rgba(0, 0, 0, 0);
+    padding: 1em;
+    margin: 0 auto 10px 0;
+    position: relative;
+    left: 50%;
+    transform: translate(-50%, 0);
+
+    p {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      padding: 1rem;
+      background-color: rgba(0, 0, 0, 0.8);
+      border-radius: 4px;
+      color: white;
+    }
+  }
+</style>
+`})})]})}function _(o={}){const{wrapper:n}={...t(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(r,{...o})}):r(o)}export{_ as default};

packages/graphics-components/docs/assets/InfoBox-D-Ln6AyH.js

@@ -0,0 +1,96 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as i}from"./index-CO-0pc0F.js";import{M as a,C as o}from"./index-Z-6k0Xrj.js";import{I as d,D as s,L as c,C as h}from"./InfoBox.stories-4cOKgJf0.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Block-D3Ui8rd-.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";import"./BodyText-CXnxLnBi.js";function r(n){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:d}),`
+`,e.jsx(t.h1,{id:"infobox",children:"InfoBox"}),`
+`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"InfoBox"})," component creates a stylised text box that provides additional information that needs to be visually separate from the main content flow, such as methodology, detailed notes about data and extra context."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<InfoBox
+  title="About this data"
+  text={'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \\n\\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}
+  notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
+/>
+`})}),`
+`,e.jsx(o,{of:s}),`
+`,e.jsx(t.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
+`,e.jsx(t.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-yaml",children:`# Archie ML doc
+[blocks]
+
+type: info-box
+title: What you need to know about the war
+text: Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day.
+
+Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.
+:end
+notes: [Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)
+[]
+`})}),`
+`,e.jsxs(t.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",e.jsx(t.code,{children:"InfoBox"})," component."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<!-- graphics kit -->
+<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+<\/script>
+
+# Graphics kit
+{#each content.blocks as block}
+  {#if block.type === 'info-box'}
+    <InfoBox title={block.title} text={block.text} notes={block.notes} />
+    <!-- ... -->
+  {/if}
+{/each}
+`})}),`
+`,e.jsx(o,{of:s}),`
+`,e.jsx(t.h2,{id:"lists",children:"Lists"}),`
+`,e.jsxs(t.p,{children:["Use markdown to add lists to ",e.jsx(t.code,{children:"InfoBox"}),"."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<InfoBox
+  title="What you need to know about the war"
+  text={"- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices.\\n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes.\\n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines."}
+  notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
+/>
+`})}),`
+`,e.jsx(o,{of:c}),`
+`,e.jsx(t.h2,{id:"customisation",children:"Customisation"}),`
+`,e.jsxs(t.p,{children:["Use ",e.jsx(t.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippets"})," to customise the ",e.jsx(t.code,{children:"InfoBox"}),", such as adding tables, icons and thumbnail images."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<InfoBox title="About this data">
+  <!-- Optional custom header -->
+  {#snippet header()}
+    <h3>Global video game market</h3>
+  {/snippet}
+  <!-- Optional custom body -->
+  {#snippet body()}
+    <table>
+      <thead>
+        <tr>
+          <th>Year</th>
+          <th>Market size ($bln)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>2024</td>
+          <td>274.63</td>
+        </tr>
+        <tr>
+          <td>2023</td>
+          <td>281.77</td>
+        </tr>
+        <tr>
+          <td>2022</td>
+          <td>249.55</td>
+        </tr>
+      </tbody>
+    </table>
+  {/snippet}
+  <!-- Optional custom footer -->
+  {#snippet updated()}
+    <div class="text-xs font-note">Source: Precedence Research</div>
+  {/snippet}
+</InfoBox>
+`})}),`
+`,e.jsx(o,{of:h})]})}function D(n={}){const{wrapper:t}={...i(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(r,{...n})}):r(n)}export{D as default};

packages/graphics-components/docs/assets/InfoBox-MbaErvcV.css

@@ -0,0 +1 @@
+.infobox.svelte-l47an2 .article-block{border-color:var(--theme-colour-brand-rules)}.infobox.light.svelte-l47an2 .article-block{background-color:#fafafa}.infobox.dark.svelte-l47an2 .article-block{background-color:#fafafa1a}.infobox.svelte-l47an2 .header p{font-family:var(--theme-font-family-subhed);line-height:1.3;font-size:var(--theme-font-size-sm);color:var(--theme-colour-text-secondary);font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-block-start:clamp(1.13rem,1.06rem + .31vw,1.31rem);margin-block-end:clamp(.31rem,.31rem + 0vw,.31rem);margin-block-start:0;margin-block-end:0}.infobox.svelte-l47an2 .body p{margin-block-start:0;margin-block-end:clamp(.56rem,.52rem + .21vw,.69rem);font-family:var(--theme-font-family-note);font-size:calc(.9 * var(--theme-font-size-base));color:var(--theme-colour-text-primary);line-height:1.3;font-size:var(--theme-font-size-sm);font-weight:300}.infobox.svelte-l47an2 .body p:last-child{margin-block-end:0}.infobox.svelte-l47an2 .body ul,.infobox.svelte-l47an2 .body ol{margin-block-start:0;margin-block-end:clamp(.56rem,.52rem + .21vw,.69rem);font-family:var(--theme-font-family-note);font-size:calc(.9 * var(--theme-font-size-base));color:var(--theme-colour-text-primary);line-height:1.3;font-size:var(--theme-font-size-sm);font-weight:300;margin-block-end:0}.infobox.svelte-l47an2 .body ul li,.infobox.svelte-l47an2 .body ol li{margin-block-start:0;margin-block-start:clamp(.56rem,.52rem + .21vw,.69rem);margin-block-end:clamp(.56rem,.52rem + .21vw,.69rem)}.infobox.svelte-l47an2 .body ul li:last-child,.infobox.svelte-l47an2 .body ol li:last-child{margin-block-end:0}.infobox.svelte-l47an2 .footer p{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-block-start:clamp(.31rem,.31rem + 0vw,.31rem);margin-block-end:clamp(.56rem,.52rem + .21vw,.69rem)}.infobox.svelte-l47an2 .footer p:last-child{margin-block-end:0}h3.svelte-1kq9q1w{margin:0}table.svelte-1kq9q1w{width:100%;border-collapse:collapse;border-spacing:0}th.svelte-1kq9q1w,td.svelte-1kq9q1w{border:1px solid #ddd;padding:8px;text-align:center}th.svelte-1kq9q1w{background-color:#f2f2f2}

packages/graphics-components/docs/assets/InlineAd-C9En6aKX.js

@@ -0,0 +1,43 @@
+import{j as n}from"./index-bIIEL2MP.js";import{useMDXComponents as t}from"./index-CO-0pc0F.js";import{M as i,C as s}from"./index-Z-6k0Xrj.js";import{I as p,D as d}from"./InlineAd.stories-Cl0PEmJ1.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./ResponsiveAd-CbJNHDhi.js";import"./index-client-BAw8T8-V.js";import"./svelte-head-xbEMkVns.js";import"./throttle-CHB1Npaq.js";import"./svelte-component-C8Ginrj8.js";import"./key-BFGg-sHz.js";import"./window-DXjFTZv5.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Block-D3Ui8rd-.js";import"./snippet-C5kbqVpq.js";import"./create-runtime-stories-7AWWVphH.js";import"./get-C3XmtPLd.js";function o(r){const e={blockquote:"blockquote",code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...t(),...r.components};return n.jsxs(n.Fragment,{children:[n.jsx(i,{of:p}),`
+`,n.jsx(e.h1,{id:"inlinead",children:"InlineAd"}),`
+`,n.jsx(e.p,{children:"Add programmatic ads inline on your page."}),`
+`,n.jsxs(e.blockquote,{children:[`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"IMPORTANT!"})," Make sure ads are only used on dotcom pages, never on embeds."]}),`
+`]}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<!-- +page.svelte -->
+<script>
+  import { AdScripts } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<!-- Include AdScripts only ONCE per page for any type of ad -->
+<AdScripts />
+`})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<!-- App.svelte -->
+<script>
+  import { InlineAd } from '@reuters-graphics/graphics-components';
+
+  let { embedded = false } = $props();
+<\/script>
+
+{#each content.blocks as block}
+  <!-- ... -->
+
+  {#if block.Type === 'inline-ad'}
+    <!-- Check if in an embed context! -->
+    {#if !embedded}
+      <InlineAd />
+    {/if}
+  {/if}
+
+  <!-- ... -->
+{/each}
+`})}),`
+`,n.jsxs(e.p,{children:["You may add ",n.jsx(e.strong,{children:"up to three"})," inline ads per page, but must set the ",n.jsx(e.code,{children:"n"})," prop on multiple ads in sequential order, 1 - 3."]}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<!-- First inline ad on the page -->
+<InlineAd n={1} />
+<!-- ... second ... -->
+<InlineAd n={2} />
+<!-- ... third and final. -->
+<InlineAd n={3} />
+`})}),`
+`,n.jsx(s,{of:d})]})}function E(r={}){const{wrapper:e}={...t(),...r.components};return e?n.jsx(e,{...r,children:n.jsx(o,{...r})}):o(r)}export{E as default};

packages/graphics-components/docs/assets/InlineAd-CZhBE-HY.css

@@ -0,0 +1 @@
+div.ad-block.svelte-1fg4mkm{border-bottom:1px solid var(--theme-colour-brand-rules);border-top:1px solid var(--theme-colour-brand-rules)}div.ad-block.svelte-1fg4mkm div.ad-label:where(.svelte-1fg4mkm){font-family:Knowledge,Source Sans Pro,Arial,Helvetica,sans-serif;font-size:14px;margin:6px 0;line-height:1.333;color:var(--theme-colour-text-secondary);width:100%;text-align:center}div.ad-block.svelte-1fg4mkm div.ad-container:where(.svelte-1fg4mkm){display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:415px}@media (max-width: 767.9px){div.ad-block.svelte-1fg4mkm div.ad-container:where(.svelte-1fg4mkm){min-height:320px}}div.ad-block.svelte-1fg4mkm div.ad-container:where(.svelte-1fg4mkm) div.ad-slot__inner:where(.svelte-1fg4mkm){margin:auto 0;width:100%;max-width:100%;flex:unset}div.ad-block.svelte-1fg4mkm div.ad-container:where(.svelte-1fg4mkm) div.ad-slot__inner:where(.svelte-1fg4mkm)>div:where(.svelte-1fg4mkm){display:block}div.ad-block.svelte-1fg4mkm div.ad-container:where(.svelte-1fg4mkm) div.ad-slot__inner:where(.svelte-1fg4mkm)>div:where(.svelte-1fg4mkm) div[data-freestar-ad]{display:flex;flex-direction:column;justify-content:center;align-items:center}

packages/graphics-components/docs/assets/InlineAd.stories-Cl0PEmJ1.js

@@ -0,0 +1,5 @@
+import{p as o,f as c,a as m}from"./props-b4vEeO_8.js";import{F as d,I as n,B as b,G as A}from"./runtime-C3rQLW--.js";import{i as S}from"./lifecycle-F2p_Qkk3.js";import{R as x,A as I}from"./ResponsiveAd-CbJNHDhi.js";import{B as h}from"./Block-D3Ui8rd-.js";import{c as w,d as D}from"./create-runtime-stories-7AWWVphH.js";var C=c('<div class="ad-block svelte-1fg4mkm"><div class="ad-label svelte-1fg4mkm">Advertisement · Scroll to continue</div> <div class="ad-container svelte-1fg4mkm"><div class="ad-slot__inner svelte-1fg4mkm"><div class="svelte-1fg4mkm"><!></div></div></div></div>');function a(t,e){let s=o(e,"id",3,""),i=o(e,"class",3,"my-12");const u=`reuters_desktop_native_${o(e,"n",3,1)()}`;h(t,{get id(){return s()},get class(){return`freestar-adslot ${i()??""}`},children:(f,j)=>{var l=C(),y=d(n(l),2),_=n(y),k=n(_),g=n(k);x(g,{get desktopPlacementName(){return u}}),m(f,l)},$$slots:{default:!0}})}a.__docgen={data:[{name:"id",visibility:"public",description:"Add an ID to target with SCSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'},{name:"n",visibility:"public",description:"Number of the inline ad in sequence. Use to add multiple inline ads to a page.",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"number",value:1,text:"1"},{kind:"const",type:"number",value:2,text:"2"},{kind:"const",type:"number",value:3,text:"3"},{kind:"const",type:"string",value:"1",text:'"1"'},{kind:"const",type:"string",value:"2",text:'"2"'},{kind:"const",type:"string",value:"3",text:'"3"'}],text:'1 | 2 | 3 | "1" | "2" | "3"'},static:!1,readonly:!1,defaultValue:"1"},{name:"class",visibility:"public",description:"Add a class to target with SCSS. Defaults to `my-12`.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1}],name:"InlineAd.svelte"};const P=t=>{var e=N(),s=n(e);I(s,{});var i=d(s,2);a(i,{});var r=d(i,2);a(r,{}),m(t,e)},v={title:"Components/Ads & analytics/InlineAd",component:a},{Story:B}=D();var N=c("<div><!> <!> <!></div>");function p(t,e){b(e,!1),S(),B(t,{name:"Demo",get children(){return P},parameters:{__svelteCsf:{rawCode:`<div>
+  <AdScripts />
+  <InlineAd />
+  <InlineAd />
+</div>`}}}),A()}p.__docgen={version:3,name:"InlineAd.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const O=w(p,v),R=["Demo"],$=O.Demo,G=Object.freeze(Object.defineProperty({__proto__:null,Demo:$,__namedExportsOrder:R,default:v},Symbol.toStringTag,{value:"Module"}));export{$ as D,G as I};

packages/graphics-components/docs/assets/LeaderboardAd-Cvs3dlFa.css

@@ -0,0 +1 @@
+.leaderboard__sticky.svelte-g0kawd{position:initial;top:-275px;transition:top .4s ease-in-out;z-index:1030}.leaderboard__sticky.sticky.svelte-g0kawd{position:sticky;top:0}.leaderboard__sticky.unstick.svelte-g0kawd{top:-275px}div.ad-block.svelte-g0kawd{width:100%;background:#f4f4f4;display:flex;justify-content:center;flex-direction:column;align-items:center;height:var(--height)}div.ad-block.svelte-g0kawd .ad-slot__container:where(.svelte-g0kawd){height:0px;min-height:var(--height);align-items:center;display:flex;justify-content:center}div.ad-block.svelte-g0kawd .ad-slot__container:where(.svelte-g0kawd) .ad-slot__inner:where(.svelte-g0kawd){max-width:100%}div.svelte-wiwpes{min-height:200vh;background-size:40px 40px;background-image:linear-gradient(to right,lightgrey 1px,transparent 1px),linear-gradient(to bottom,lightgrey 1px,transparent 1px)}

packages/graphics-components/docs/assets/LeaderboardAd-DeshHDBd.js

@@ -0,0 +1,23 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as n}from"./index-CO-0pc0F.js";import{M as a,C as d}from"./index-Z-6k0Xrj.js";import{L as s,D as i}from"./LeaderboardAd.stories-BX43dAlC.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./ResponsiveAd-CbJNHDhi.js";import"./index-client-BAw8T8-V.js";import"./svelte-head-xbEMkVns.js";import"./throttle-CHB1Npaq.js";import"./svelte-component-C8Ginrj8.js";import"./key-BFGg-sHz.js";import"./window-DXjFTZv5.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./get-C3XmtPLd.js";function t(o){const r={blockquote:"blockquote",code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...n(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:s}),`
+`,e.jsx(r.h1,{id:"leaderboardad",children:"LeaderboardAd"}),`
+`,e.jsx(r.p,{children:"Add a leaderboard ad to your page."}),`
+`,e.jsxs(r.blockquote,{children:[`
+`,e.jsxs(r.p,{children:[e.jsx(r.strong,{children:"IMPORTANT!"})," Make sure ads are only used on dotcom pages, never on embeds."]}),`
+`]}),`
+`,e.jsx(r.pre,{children:e.jsx(r.code,{className:"language-svelte",children:`<!-- +page.svelte -->
+<script>
+  import {
+    AdScripts,
+    LeaderboardAd,
+    SiteHeader,
+  } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<!-- Include AdScripts only ONCE per page for any type of ad -->
+<AdScripts />
+
+<!-- ALWAYS put the leaderboard ad directly above the SiteHeader -->
+<LeaderboardAd />
+<SiteHeader />
+`})}),`
+`,e.jsx(d,{of:i})]})}function X(o={}){const{wrapper:r}={...n(),...o.components};return r?e.jsx(r,{...o,children:e.jsx(t,{...o})}):t(o)}export{X as default};

packages/graphics-components/docs/assets/LeaderboardAd.stories-BX43dAlC.js

@@ -0,0 +1,4 @@
+import{p as u,f as w,a as b}from"./props-b4vEeO_8.js";import{J as T,G as y,B as k,k as r,a4 as c,N as E,a3 as i,I as s,F as z}from"./runtime-C3rQLW--.js";import{i as M}from"./lifecycle-F2p_Qkk3.js";import{R as O,A as R}from"./ResponsiveAd-CbJNHDhi.js";import{o as j}from"./index-client-BAw8T8-V.js";import{a as I,s as N}from"./attributes-Cg6aLqN3.js";import{s as P}from"./style-DvJ3IcV1.js";import{b as W}from"./window-DXjFTZv5.js";import{c as B,d as F}from"./create-runtime-stories-7AWWVphH.js";var G=w('<div><div class="ad-block svelte-g0kawd"><div class="ad-slot__container svelte-g0kawd"><div class="ad-slot__inner svelte-g0kawd"><div><!></div></div></div></div></div>');function v(a,e){k(e,!0);let d=u(e,"id",3,""),n=u(e,"class",3,""),m=c(1200),p=E(()=>r(m)<1024?110:275);const A="reuters_desktop_leaderboard_atf";let l=c(!1),_=c(!1);j(()=>{const t=()=>{window.scrollY>=r(p)*1.1&&(i(l,!0),setTimeout(()=>{i(_,!0),setTimeout(()=>{i(l,!1)},400)},1500),window.removeEventListener("scroll",t))};return window.addEventListener("scroll",t),()=>{window.removeEventListener("scroll",t)}});var o=G();let f;var h=s(o),L=s(h),D=s(L),x=s(D),C=s(x);O(C,{desktopPlacementName:A}),T(t=>{f=I(o,1,`freestar-adslot leaderboard__sticky ${n()??""}`,"svelte-g0kawd",f,t),N(o,"id",d()),P(o,`--height: ${r(p)??""}px;`)},[()=>({sticky:r(l),unstick:r(_)})]),W("innerWidth",t=>i(m,t,!0)),b(a,o),y()}v.__docgen={data:[{name:"id",visibility:"public",description:"Add an ID to target with SCSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'},{name:"class",visibility:"public",description:"Add a class to target with SCSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1}],name:"LeaderboardAd.svelte"};const J=a=>{var e=Y(),d=s(e);R(d,{});var n=z(d,2);v(n,{}),b(a,e)},g={title:"Components/Ads & analytics/LeaderboardAd",component:v},{Story:V}=F();var Y=w('<div class="svelte-wiwpes"><!> <!></div>');function S(a,e){k(e,!1),M(),V(a,{name:"Demo",get children(){return J},parameters:{__svelteCsf:{rawCode:`<div>
+  <AdScripts />
+  <LeaderboardAd />
+</div>`}}}),y()}S.__docgen={version:3,name:"LeaderboardAd.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const q=B(S,g),H=["Demo"],K=q.Demo,re=Object.freeze(Object.defineProperty({__proto__:null,Demo:K,__namedExportsOrder:H,default:g},Symbol.toStringTag,{value:"Module"}));export{K as D,re as L};

packages/graphics-components/docs/assets/Lottie-Bt8KBVq8.js

@@ -0,0 +1,325 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as i}from"./index-Z-6k0Xrj.js";import{L as s}from"./Lottie.stories-BvAQoFVB.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./index-client-BAw8T8-V.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./size-DMdj3-I9.js";import"./this-CrUBQEQ_.js";import"./tweened-4Ja_XIbT.js";import"./isEqualsSameValueZero-lFn2qCcO.js";import"./index-CCfEE_8A.js";import"./Block-D3Ui8rd-.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";import"./Headline-C-tkYFZ6.js";import"./Byline-BhU2Zjcl.js";import"./index-CX1x869l.js";import"./journalize-K6hK94UL.js";import"./Theme-BVfrVjCx.js";import"./flatten-CQmJgKju.js";import"./BodyText-CXnxLnBi.js";import"./ScrollerBase-DJMKplMV.js";import"./window-DXjFTZv5.js";const l=""+new URL("marker-DA6SPHlh.jpg",import.meta.url).href;function o(n){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{of:s}),`
+`,e.jsx(t.h1,{id:"lottie",children:"Lottie"}),`
+`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"Lottie"})," component uses the ",e.jsx(t.a,{href:"https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/",rel:"nofollow",children:"dotLottie-web"})," library to render Lottie animations."]}),`
+`,e.jsx(t.h2,{id:"how-to-prepare-lottie-files",children:"How to prepare Lottie files"}),`
+`,e.jsxs(t.p,{children:[e.jsx(t.a,{href:"https://lottiefiles.com/",rel:"nofollow",children:"LottieFiles"})," is the official platform for creating and editing Lottie animations. The free version of LottieFiles has limited features, so ",e.jsx(t.a,{href:"https://exchange.adobe.com/apps/cc/12557/bodymovin",rel:"nofollow",children:"Bodymovin"})," remains a popular, free way to export Lottie animations as JSON files."]}),`
+`,e.jsxs(t.p,{children:[e.jsx(t.a,{href:"https://dotlottie.io/",rel:"nofollow",children:"dotLottie"})," is another common format for Lottie files. This format bundles the Lottie JSON file and any associated assets, such as images and fonts, into a single compressed file with the extension ",e.jsx(t.code,{children:".lottie"}),"."]}),`
+`,e.jsxs(t.p,{children:["This ",e.jsx(t.code,{children:"Lottie"})," component is flexible and supports both ",e.jsx(t.code,{children:"dotLottie"})," and JSON Lottie files. For best performance it is recommended that you convert your Lottie JSON file into a ",e.jsx(t.code,{children:".zip"})," file by following these steps:"]}),`
+`,e.jsxs(t.ol,{children:[`
+`,e.jsxs(t.li,{children:["Export your Lottie animation as a JSON file using ",e.jsx(t.a,{href:"https://exchange.adobe.com/apps/cc/12557/bodymovin",rel:"nofollow",children:"Bodymovin"})," or another Lottie exporter."]}),`
+`,e.jsxs(t.li,{children:["Use the ",e.jsx(t.a,{href:"https://lottiefiles.com/tools/lottie-to-dotlottie",rel:"nofollow",children:"LottieFiles converter"})," to convert the JSON file into a ",e.jsx(t.code,{children:".lottie"})," file."]}),`
+`,e.jsxs(t.li,{children:["Change the file extension to ",e.jsx(t.code,{children:".zip"})," from ",e.jsx(t.code,{children:".lottie"}),". This ensures full compatibility with the Reuters graphics publisher while maintaining the benefits of dotLottie format's compression and optimisation."]}),`
+`]}),`
+`,e.jsx(t.h2,{id:"when-not-to-use-lottie",children:"When not to use Lottie"}),`
+`,e.jsx(t.p,{children:"Lottie animations are great for lightweight, scalable animations. However, they may not be suitable for all use cases. Consider the following before using Lottie:"}),`
+`,e.jsxs(t.ul,{children:[`
+`,e.jsxs(t.li,{children:[`
+`,e.jsxs(t.p,{children:[e.jsx(t.strong,{children:"Huge raster images"}),": Lottie is best suited for simple to moderately complex animations. Animations with large raster images may not render well or could lead to performance issues. In such cases, consider using a ",e.jsx(t.a,{href:"?path=/docs/components-multimedia-video--docs",children:"Video"})," component or a ",e.jsx(t.a,{href:"?path=/docs/components-graphics-scrollervideo--docs",children:"ScrollerVideo"})," component instead."]}),`
+`]}),`
+`,e.jsxs(t.li,{children:[`
+`,e.jsxs(t.p,{children:[e.jsx(t.strong,{children:"Complex effects"}),": Some advanced effects and features available in After Effects may not be fully supported in Lottie, which could lead to discrepancies between the original design and the rendered animation. Check the ",e.jsx(t.a,{href:"https://lottiefiles.com/supported-features",rel:"nofollow",children:"Lottie documentation"})," for a list of supported features."]}),`
+`]}),`
+`,e.jsxs(t.li,{children:[`
+`,e.jsxs(t.p,{children:[e.jsx(t.strong,{children:"Text rendering"}),": Lottie renders text as vector shapes. If you need DOM text for accessibility or CSS manipulation, consider using HTML/CSS animations instead."]}),`
+`]}),`
+`,e.jsxs(t.li,{children:[`
+`,e.jsxs(t.p,{children:[e.jsx(t.strong,{children:"SVG DOM manipulation"}),": Lottie renders animations on a canvas. If you need to manipulate individual elements of the animation using JavaScript or CSS, consider using SVG animations instead."]}),`
+`]}),`
+`]}),`
+`,e.jsx(t.h2,{id:"basic-demo",children:"Basic demo"}),`
+`,e.jsxs(t.p,{children:["To use the ",e.jsx(t.code,{children:"Lottie"})," component, import it and provide the Lottie animation source. The height of the container defaults to ",e.jsx(t.code,{children:"100lvh"}),", but you can adjust this to any valid CSS height value such as ",e.jsx(t.code,{children:"1200px"})," or ",e.jsx(t.code,{children:"200lvh"})," with the ",e.jsx(t.code,{children:"height"})," prop."]}),`
+`,e.jsxs(t.p,{children:[e.jsxs(t.strong,{children:["Use ",e.jsx(t.code,{children:"lvh"})," or ",e.jsx(t.code,{children:"svh"})," units instead of ",e.jsx(t.code,{children:"vh"})]})," as ",e.jsx(t.a,{href:"https://www.w3.org/TR/css-values-4/#large-viewport-size",rel:"nofollow",children:"these units"})," are more reliable on mobile and other devices where elements such as the address bar appear and disappear and affect the height."]}),`
+`,e.jsxs(t.p,{children:["The component also provides a ",e.jsx(t.code,{children:"width"})," prop to set the width of the Lottie container. While the ",e.jsx(t.code,{children:"width"})," prop defaults to ",e.jsx(t.code,{children:"fluid"}),", it allows any ",e.jsx(t.code,{children:"ContainerWidth"})," value such as ",e.jsx(t.code,{children:"narrower"}),", ",e.jsx(t.code,{children:"narrow"}),", ",e.jsx(t.code,{children:"normal"}),", ",e.jsx(t.code,{children:"wide"}),", ",e.jsx(t.code,{children:"wider"}),", ",e.jsx(t.code,{children:"widest"}),", ",e.jsx(t.code,{children:"fluid"}),", or a custom CSS width value like ",e.jsx(t.code,{children:"600px"})," or ",e.jsx(t.code,{children:"80vw"}),"."]}),`
+`,e.jsxs(t.p,{children:["If importing the Lottie file directly into a Svelte component, make sure to append ",e.jsx(t.strong,{children:"?url"})," to the import statement (see example below). This ensures that the file is treated as a URL."]}),`
+`,e.jsxs(t.blockquote,{children:[`
+`,e.jsxs(t.p,{children:["💡TIP: Set ",e.jsx(t.code,{children:"showDebugInfo"})," prop to ",e.jsx(t.code,{children:"true"})," to display information about the component state."]}),`
+`]}),`
+`,e.jsx(t.p,{children:e.jsx(t.a,{href:"?path=/story/components-graphics-scrollerlottie--demo",children:"Demo"})}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script lang="ts">
+  import { Lottie } from '@reuters-graphics/graphics-components';
+
+  // Import Lottie file
+  import MyLottie from './lottie/my-lottie.zip?url'; // Append **?url** to the file path
+<\/script>
+
+<Lottie src={MyLottie} autoplay={true} showDebugInfo={true} />
+`})}),`
+`,e.jsx(t.h2,{id:"using-with-archieml",children:"Using with ArchieML"}),`
+`,e.jsxs(t.p,{children:["If you are using ",e.jsx(t.code,{children:"Lottie"})," with ArchieML, store your Lottie zip file in the ",e.jsx(t.code,{children:"src/statics/lottie/"})," folder."]}),`
+`,e.jsx(t.p,{children:"With the graphics kit, you'll likely get your text and prop values from an ArchieML doc..."}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-yaml",children:`# ArchieML doc
+[blocks]
+  type: lottie
+
+  # Lottie file stored in \`src/statics/lottie/\` folder
+  src: lottie/LottieFile.zip
+  autoplay: true
+  loop: true
+  showDebugInfo: true
+[]
+`})}),`
+`,e.jsxs(t.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",e.jsx(t.code,{children:"Lottie"})," component."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script lang="ts">
+  import { Lottie } from '@reuters-graphics/graphics-components';
+
+  // Graphics kit only
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
+<\/script>
+
+{#each content.blocks as block}
+  <!-- Inside the content.blocks for loop... -->
+  {#if block.type == 'lottie'}
+    <Lottie
+      src={\`\${assets}/\${block.src}\`}
+      autoplay={truthy(block.autoplay)}
+      loop={truthy(block.loop)}
+      showDebugInfo={truthy(block.showDebugInfo)}
+    />
+  {/if}
+{/each}
+`})}),`
+`,e.jsx(t.h2,{id:"playing-a-segment",children:"Playing a segment"}),`
+`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"Lottie"})," component can play a specific segment of the Lottie animation using the ",e.jsx(t.code,{children:"segment"})," prop. The ",e.jsx(t.code,{children:"segment"})," prop expects an array of two numbers representing the start and end frames of the segment."]}),`
+`,e.jsx(t.p,{children:e.jsx(t.a,{href:"?path=/story/components-graphics-scrollerlottie--segment",children:"Demo"})}),`
+`,e.jsx(t.p,{children:"With the graphics kit, you'll likely get your text and prop values from an ArchieML doc..."}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-yaml",children:`# ArchieML doc
+[blocks]
+  type: lottie
+  showDebugInfo: true
+  loop: true
+
+  # Optionally, set playback speed
+  speed: 0.5
+
+  # Lottie file stored in \`src/statics/lottie/\` folder
+  src: lottie/LottieFile.zip
+  [.segment]
+    start: 0
+    end: 20
+  []
+[]
+`})}),`
+`,e.jsxs(t.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",e.jsx(t.code,{children:"Lottie"})," component."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script lang="ts">
+  import { Lottie } from '@reuters-graphics/graphics-components';
+
+  // Graphics kit only
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
+<\/script>
+
+{#each content.blocks as block}
+  <!-- Inside the content.blocks for loop... -->
+  {#if block.type == 'lottie'}
+    <Lottie
+      src={\`\${assets}/\${block.src}\`}
+      segment={[parseInt(block.segment.start), parseInt(block.segment.end)]}
+      showDebugInfo={truthy(block.showDebugInfo)}
+      loop={truthy(block.loop)}
+      speed={parseInt(block.speed)}
+    />
+  {/if}
+{/each}
+`})}),`
+`,e.jsx(t.h2,{id:"markers",children:"Markers"}),`
+`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"Lottie"})," component can also play a specific portion of the Lottie animation using markers set in ",e.jsx(t.a,{href:"https://helpx.adobe.com/in/after-effects/using/layer-markers-composition-markers.html",rel:"nofollow",children:"AfterEffects"}),"."]}),`
+`,e.jsxs(t.p,{children:["The list of available markers, which can be passed into the ",e.jsx(t.code,{children:"marker"})," prop, can be found in the debug info box that appears when ",e.jsx(t.code,{children:"showDebugInfo"})," is set to ",e.jsx(t.code,{children:"true"}),"."]}),`
+`,e.jsxs(t.p,{children:["When setting markers in AfterEffects, ensure that the ",e.jsx(t.strong,{children:"Comment"})," section of the Composition Marker contains only the name of your marker:"]}),`
+`,e.jsx("img",{src:l,alt:"Composition Marker Dialog"}),`
+`,e.jsx(t.p,{children:e.jsx(t.a,{href:"?path=/story/components-graphics-scrollerlottie--marker",children:"Demo"})}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script lang="ts">
+  import { Lottie } from '@reuters-graphics/graphics-components';
+
+  // Import Lottie file
+  import MyLottie from './lottie/my-lottie.zip?url'; // Append **?url** to the file path
+<\/script>
+
+<Lottie src={MyLottie} marker="myMarker" />
+`})}),`
+`,e.jsx(t.h2,{id:"switching-themes",children:"Switching themes"}),`
+`,e.jsxs(t.p,{children:[e.jsx(t.a,{href:"https://lottiefiles.com/theming",rel:"nofollow",children:"Lottie Creator"})," allows you to define multiple colour themes for your animation. You can switch between these themes using the ",e.jsx(t.code,{children:"theme"})," prop."]}),`
+`,e.jsxs(t.p,{children:["Available themes can be found in the debug info when the ",e.jsx(t.code,{children:"showDebugInfo"})," prop is set to ",e.jsx(t.code,{children:"true"}),"."]}),`
+`,e.jsxs(t.p,{children:["You can set multiple themes and switch between them dynamically -- for example, based on the ",e.jsx(t.code,{children:"progress"})," of the animation."]}),`
+`,e.jsx(t.p,{children:e.jsx(t.a,{href:"?path=/story/components-graphics-scrollerlottie--themes",children:"Demo"})}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script lang="ts">
+  import { Lottie } from '@reuters-graphics/graphics-components';
+  import MyLottie from './lottie/my-lottie.zip?url';
+
+  // Set a bindable \`progress\` variable to pass into \`<Lottie />\`
+  let progress = $state(0);
+<\/script>
+
+<Lottie
+  src={MyLottie}
+  bind:progress
+  themeId={progress < 0.33 ? 'Water'
+  : progress < 0.66 ? 'air'
+  : 'earth'}
+  autoplay
+  showDebugInfo
+/>
+`})}),`
+`,e.jsxs(t.h2,{id:"using-with-scrollerbase",children:["Using with ",e.jsx(t.code,{children:"ScrollerBase"})]}),`
+`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"Lottie"})," component can be used with the ",e.jsx(t.code,{children:"ScrollerBase"})," component to create a more complex scrolling experience. ",e.jsx(t.code,{children:"ScrollerBase"})," provides a scrollable container sets the ",e.jsx(t.code,{children:"Lottie"})," component as a background."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script lang="ts">
+  import { Lottie, ScrollerBase } from '@reuters-graphics/graphics-components';
+  import MyLottie from './lottie/my-lottie.zip?url';
+
+  // Pass \`progress\` as \`videoPercentage\` to Lottie
+  let progress = $state(0);
+<\/script>
+
+<ScrollerBase bind:progress query="div.step-foreground-container">
+  {#snippet backgroundSnippet()}
+    <!-- Pass bindable prop \`progress\` as \`progress\` -->
+    <Lottie src={MyLottie} {progress} height="100lvh" showDebugInfo />
+  {/snippet}
+  {#snippet foregroundSnippet()}
+    <div class="step-foreground-container">
+      <h3 class="text-center">Step 1</h3>
+    </div>
+    <div class="step-foreground-container">
+      <h3 class="text-center">Step 2</h3>
+    </div>
+    <div class="step-foreground-container">
+      <h3 class="text-center">Step 3</h3>
+    </div>
+  {/snippet}
+</ScrollerBase>
+
+<style lang="scss">
+  .step-foreground-container {
+    height: 100lvh;
+    width: 50%;
+    margin: 0 auto;
+
+    h3 {
+      background-color: antiquewhite;
+      text-align: center;
+    }
+  }
+</style>
+`})}),`
+`,e.jsx(t.h2,{id:"with-foregrounds",children:"With foregrounds"}),`
+`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"Lottie"})," component can also be used with the ",e.jsx(t.code,{children:"LottieForeground"})," component to display foreground elements at specific times in the animation."]}),`
+`,e.jsxs(t.p,{children:[e.jsx(t.a,{href:"?path=/story/components-graphics-scrollerlottie--with-foregrounds",children:"Demo"}),"."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script lang="ts">
+  import { Lottie, ScrollerBase } from '@reuters-graphics/graphics-components';
+  import MyLottie from './lottie/my-lottie.zip?url';
+<\/script>
+
+<Lottie src={MyLottie} autoplay>
+  <!-- Foreground 1: Headline component as foreground -->
+  <LottieForeground
+    startFrame={0}
+    endFrame={50}
+    position="center center"
+    backgroundColour="rgba(0, 0, 0)"
+  >
+    <div class="headline-container">
+      <Theme base="dark">
+        <Headline
+          hed="Headline"
+          dek="This is an example of using a Svelte component as the foreground."
+          authors={['Jane Doe', 'John Doe']}
+        />
+      </Theme>
+    </div>
+  </LottieForeground>
+
+  <!-- Foreground 2: Text only -->
+  <LottieForeground
+    startFrame={50}
+    endFrame={100}
+    text="Foreground caption between frames 50 and 100."
+    position="bottom center"
+    backgroundColour="rgba(0, 0, 0)"
+    width="wide"
+  />
+</Lottie>
+`})}),`
+`,e.jsx(t.h3,{id:"using-with-archieml-1",children:"Using with ArchieML"}),`
+`,e.jsx(t.p,{children:"With the graphics kit, you'll likely get your text and prop values from an ArchieML doc..."}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-yaml",children:`# ArchieML doc
+[blocks]
+  type: lottie
+
+  # Lottie file stored in \`src/statics/lottie/\` folder
+  src: lottie/LottieFile.zip
+
+  # Array of foregrounds
+  [.foregrounds]
+
+    # Foreground 1: Headline component
+    startFrame: 0 # When in the animation to start showing the foreground
+    endFrame: 50 # When to stop showing the foreground
+
+    # Set foreground type
+    type: component
+
+    # Set props to pass into \`LottieForeground\`
+    {.foregroundProps}
+      componentName: Headline
+      hed: Headline
+      dek: Some deck text
+      [.authors]
+        * Jane Doe
+        * John Smith
+      []
+    {}
+
+  # Foreground 2: Text only
+    startFrame: 50
+    endFrame: 100
+
+    # Set foreground type
+    type: text
+
+    # If the foreground type is \`text\`, set text prop here
+    {.foregroundProps}
+      text: Some text for the foreground
+    {}
+
+[]
+`})}),`
+`,e.jsxs(t.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",e.jsx(t.code,{children:"Lottie"})," component."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script lang="ts">
+  import {
+    Lottie,
+    LottieForeground,
+  } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
+
+  // Make an object of components to use as foregrounds
+  const Components = $state({
+    Headline,
+  });
+<\/script>
+
+{#each content.blocks as block}
+  <!-- Inside the content.blocks for loop... -->
+  {#if block.type == 'lottie'}
+    <Lottie src={\`\${assets}/\${block.src}\`}>
+      {#each block.foregrounds as foreground}
+        {#if foreground.type == 'text'}
+          <LottieForeground
+            startFrame={parseInt(foreground.startFrame)}
+            endFrame={parseInt(foreground.endFrame)}
+            text={foreground.foregroundProps.text}
+          />
+        {:else if foreground.type == 'component'}
+          {@const Component =
+            Components[foreground.foregroundProps.componentName]}
+          <LottieForeground
+            startFrame={parseInt(foreground.startFrame)}
+            endFrame={parseInt(foreground.endFrame)}
+          >
+            <Component {...foreground.foregroundProps} />
+          </LottieForeground>
+        {/if}
+      {/each}
+    </Lottie>
+  {/if}
+{/each}
+`})})]})}function U(n={}){const{wrapper:t}={...r(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(o,{...n})}):o(n)}export{U as default};

packages/graphics-components/docs/assets/Lottie-DWdopHea.css

@@ -0,0 +1 @@
+.debug-info.svelte-1vr1rmh{position:absolute;top:0;left:0;background-color:#000;z-index:3;margin:0;width:50vmin;min-width:50vmin;padding:8px;border-radius:8px;overflow:auto;resize:horizontal;opacity:.6;transition:opacity .3s ease;filter:drop-shadow(0 0 16px rgba(0,0,0,.5))}@media (prefers-reduced-motion: no-preference){.debug-info.svelte-1vr1rmh{interpolate-size:allow-keywords}}.debug-info.svelte-1vr1rmh::details-content{opacity:0;block-size:0;overflow-y:clip;transition:content-visibility .4s allow-discrete,opacity .4s,block-size .4s cubic-bezier(.87,0,.13,1)}.debug-info[open].svelte-1vr1rmh::details-content{opacity:1;block-size:auto}.debug-info.svelte-1vr1rmh .title:where(.svelte-1vr1rmh){width:100%;font-family:var(--theme-font-family-monospace);color:#fff;margin:0}.debug-info.svelte-1vr1rmh :where(.svelte-1vr1rmh){-webkit-user-select:none;user-select:none}.debug-info[open].svelte-1vr1rmh{opacity:1}div.state-debug.svelte-1vr1rmh{display:grid;width:100%;padding:8px 8px 16px;grid-template-columns:20vmin 1fr;align-items:center;gap:.75rem .25rem;background-color:#1e1e1e;border-radius:4px;margin-top:8px}p.svelte-1vr1rmh{font-size:var(--theme-font-size-xxs);font-family:var(--theme-font-family-monospace);padding:0;margin:0;color:#ffffffb3;overflow-wrap:anywhere;line-height:100%;font-variant:tabular-nums}.state-value.svelte-1vr1rmh{color:#fff}#video-progress-bar.svelte-1vr1rmh{width:100%;background-color:#fff3;height:2px;border-radius:50px}#video-progress-bar.svelte-1vr1rmh div:where(.svelte-1vr1rmh){background-color:#fff;border-radius:50px}.tag.svelte-1vr1rmh{padding:.1rem .2rem;border-radius:4px;background-color:#fff3;text-transform:uppercase;font-weight:500}.lottie-block{position:relative;height:100%;width:100%;margin:0 auto}.lottie-block .lottie-container.svelte-1wsttly{width:100%;height:100%}.lottie-block canvas.svelte-1wsttly{width:100%;height:100%;display:block}.debug-border.svelte-1wsttly{border:1px dashed lightgray}.lottie-foreground-container.svelte-1ky8fv5{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}.lottie-foreground-container.svelte-1ky8fv5 .lottie-foreground:where(.svelte-1ky8fv5){width:100%;height:100%}.lottie-foreground-block{position:absolute;width:100%;max-width:594px;height:100%}.lottie-foreground-block.center{left:50%;transform:translate(-50%)}.lottie-foreground-block.left{left:0}.lottie-foreground-block.right{right:0}@media (max-width: 1200px){.lottie-foreground-block{left:50%;transform:translate(-50%)}}.foreground-text{position:absolute;left:50%;width:100%;border-radius:.25rem;padding-block:clamp(1.69rem,1.58rem + .52vw,2rem);padding-inline:clamp(1.13rem,1.06rem + .31vw,1.31rem);margin:0}.foreground-text *{margin:0;padding:0}.foreground-text.center{top:50%;transform:translate(-50%,-50%)}.foreground-text.top{top:0;transform:translate(-50%,50%)}.foreground-text.bottom{top:100%;transform:translate(-50%,-150%)}.step-foreground-container.svelte-gz1xq0{height:100lvh;width:50%;margin:0 auto;display:flex;align-items:center;justify-content:center}.step-foreground-container.svelte-gz1xq0 h3:where(.svelte-gz1xq0){width:100%;background-color:#faebd7;text-align:center}.lottie-foreground-container header{padding:2rem;background-color:#000}.lottie-foreground-container .foreground-text p{color:#fff!important}.headline-container.svelte-1cnwpnh{width:100%;height:100%;position:absolute;display:flex;justify-content:center;align-items:center}

packages/graphics-components/docs/assets/PaddingReset-BcYz2EVa.js

@@ -0,0 +1,40 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as o}from"./index-CO-0pc0F.js";import{M as d,C as s}from"./index-Z-6k0Xrj.js";import{P as r,D as a}from"./PaddingReset.stories-C_8B9mUz.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./PaddingReset-_TGvg1_B.js";import"./Block-D3Ui8rd-.js";function i(t){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...o(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(d,{of:r}),`
+`,e.jsx(n.h1,{id:"paddingreset",children:"PaddingReset"}),`
+`,e.jsxs(n.p,{children:["Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on adjacent text such as notes or captions. The ",e.jsx(n.code,{children:"PaddingReset"})," component resets our normal well padding inside a ",e.jsx(n.code,{children:"fluid"})," container."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<Block width="fluid">
+  <!-- Edge-to-edge image -->
+  <img src="https:..." alt="Alt text" class="fmb-1" />
+
+  <!-- Wrap text in \`PaddingReset\`to add padding back in -->
+  <PaddingReset>
+    <div class="body-note">
+      A caption for the image that is padded when Block is fluid.
+    </div>
+  </PaddingReset>
+</Block>
+`})}),`
+`,e.jsx(s,{of:a}),`
+`,e.jsx(n.h2,{id:"conditional-padding",children:"Conditional padding"}),`
+`,e.jsxs(n.p,{children:["You can add the padding conditionally by setting the ",e.jsx(n.code,{children:"containerIsFluid"})," prop to ",e.jsx(n.code,{children:"true"})," when the ",e.jsx(n.code,{children:"Block"})," width is ",e.jsx(n.code,{children:"fluid"}),", which is what many other components in this library do."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+
+  let { src = 'https://...', width = 'fluid' } = $props();
+<\/script>
+
+<Block {width}>
+  <!-- Edge-to-edge image -->
+  <img src="https:..." alt="Alt text" class="fmb-1" />
+
+  <!-- Set conditional padding with the \`containerIsFluid\` prop -->
+  <PaddingReset containerIsFluid={width === 'fluid'}>
+    <div class="body-note">
+      A caption for the image that is padded when Block is fluid.
+    </div>
+  </PaddingReset>
+</Block>
+`})})]})}function M(t={}){const{wrapper:n}={...o(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{M as default};

packages/graphics-components/docs/assets/PaddingReset-DUkbHEFQ.css

@@ -0,0 +1 @@
+code.svelte-1m7udx5{line-height:1;margin:0 2px;padding:3px 5px;white-space:nowrap;border-radius:3px;font-size:13px;border:1px solid rgb(236,244,249);color:#2e3438e6;background-color:#f7fafc}

packages/graphics-components/docs/assets/PaddingReset-UGLpq4dv.css

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

packages/graphics-components/docs/assets/PaddingReset-_TGvg1_B.js

@@ -0,0 +1 @@
+import{p as v,c as d,a as n,f as u}from"./props-b4vEeO_8.js";import{C as o,I as y}from"./runtime-C3rQLW--.js";import{s}from"./snippet-C5kbqVpq.js";import{i as _}from"./svelte-component-C8Ginrj8.js";var b=u('<div class="svelte-18wc8xh"><!></div>');function h(l,t){let c=v(t,"containerIsFluid",3,!0);var r=d(),f=o(r);{var p=e=>{var i=b(),a=y(i);s(a,()=>t.children),n(e,i)},m=e=>{var i=d(),a=o(i);s(a,()=>t.children),n(e,i)};_(f,e=>{c()?e(p):e(m,!1)})}n(l,r)}h.__docgen={data:[{name:"containerIsFluid",visibility:"public",description:"Set to `true` if the parent container is fluid.",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"true"},{name:"children",visibility:"public",description:"Content to be padded.",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1}],name:"PaddingReset.svelte"};export{h as P};

packages/graphics-components/docs/assets/PaddingReset.stories-C_8B9mUz.js

@@ -0,0 +1,11 @@
+import{f as o,a as s}from"./props-b4vEeO_8.js";import{B as h,C as g,F as _,J as v,G as P}from"./runtime-C3rQLW--.js";import{s as k}from"./attributes-Cg6aLqN3.js";import{i as $}from"./lifecycle-F2p_Qkk3.js";import{c as b,d as R}from"./create-runtime-stories-7AWWVphH.js";import{P as a}from"./PaddingReset-_TGvg1_B.js";import{B as w}from"./Block-D3Ui8rd-.js";const B=""+new URL("shark-BvMOz9gh.jpg",import.meta.url).href,r={title:"Components/Page layout/PaddingReset",component:a},{Story:y}=R();var S=o('<div class="body-note">A caption for the image that is padded when its containing <code class="svelte-1m7udx5">Block</code> is fluid.</div>'),D=o('<img alt="shark" class="fmb-1"/> <!>',1);function i(n,d){h(d,!1);let l="fluid";$(),y(n,{name:"Demo",children:(c,j)=>{w(c,{width:l,children:(m,x)=>{var e=D(),t=g(e),f=_(t,2);a(f,{containerIsFluid:!0,children:(p,M)=>{var u=S();s(p,u)},$$slots:{default:!0}}),v(()=>k(t,"src",B)),s(m,e)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<!-- Fluid block -->
+<Block {width}>
+  <img src={sharkSrc} alt="shark" class="fmb-1" />
+  <PaddingReset containerIsFluid={width === 'fluid' ? true : false}>
+    <div class="body-note">
+      A caption for the image that is padded when its containing <code
+        >Block</code
+      > is fluid.
+    </div>
+  </PaddingReset>
+</Block>`}}}),P()}i.__docgen={version:3,name:"PaddingReset.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const C=b(i,r),F=["Demo"],O=C.Demo,T=Object.freeze(Object.defineProperty({__proto__:null,Demo:O,__namedExportsOrder:F,default:r},Symbol.toStringTag,{value:"Module"}));export{O as D,T as P};

packages/graphics-components/docs/assets/PhotoPack-C-U-qlAD.css

@@ -0,0 +1 @@
+div.photopack-container.svelte-3q24ef div.photopack-row:where(.svelte-3q24ef) figure:where(.svelte-3q24ef) div.alt-warning:where(.svelte-3q24ef){background-color:red;color:#fff;top:0;right:0}.notes.svelte-3q24ef .photopack-captions-container .caption p{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-block-start:clamp(.31rem,.31rem + 0vw,.31rem);margin-block-end:clamp(.56rem,.52rem + .21vw,.69rem)}

packages/graphics-components/docs/assets/PhotoPack-E5K1A3BJ.js

@@ -0,0 +1,150 @@
+import{j as n}from"./index-bIIEL2MP.js";import{useMDXComponents as i}from"./index-CO-0pc0F.js";import{M as a,C as t}from"./index-Z-6k0Xrj.js";import{P as r,D as c,A as l}from"./PhotoPack.stories-BdYLyS8k.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./each-CVpBMMjG.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./size-DMdj3-I9.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./Markdown-DUxFwijc.js";import"./index-CX1x869l.js";function s(o){const e={blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...i(),...o.components};return n.jsxs(n.Fragment,{children:[n.jsx(a,{of:r}),`
+`,n.jsx(e.h1,{id:"photopack",children:"PhotoPack"}),`
+`,n.jsxs(e.p,{children:["The ",n.jsx(e.code,{children:"PhotoPack"})," component makes simple photo grids with custom layouts at various breakpoints."]}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.code,{children:"images"})," are defined with their src, alt text, captions and an optional ",n.jsx(e.code,{children:"maxHeight"}),", which ensures that an image is no taller than that height in any layout."]}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-javascript",children:`const images = [
+  {
+    src: 'https://...',
+    altText: 'Alt text',
+    caption: 'Lorem ipsum. REUTERS/Photog',
+    // Optional max-height of images across all layouts
+    maxHeight: 800,
+  },
+  // ...
+];
+`})}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.code,{children:"layouts"})," optionally define how images are laid out at different breakpoints. You can customise the layouts and group images into ",n.jsx(e.code,{children:"rows"})," above a certain ",n.jsx(e.code,{children:"breakpoint"})," by specifying the number of images that should go in that row. For example:"]}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-javascript",children:`const layouts = [
+  {
+    breakpoint: 450,
+    rows: [1, 2, 1],
+  },
+];
+`})}),`
+`,n.jsxs(e.p,{children:["... tells the component that when the ",n.jsx(e.code,{children:"PhotoPack"})," container is 450 pixels or wider, it should group the 4 images in 3 rows: 1 in the first, 2 in the second and 1 in the last."]}),`
+`,n.jsx(e.p,{children:"If you don't specify any layouts, the component will use a default responsive layout based on the number of images in your pack."}),`
+`,n.jsx(e.p,{children:"You can define as many layouts for as many images as you like."}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<script>
+  import { PhotoPack } from '@reuters-graphics/graphics-components';
+
+  /** Array of photo metadata */
+  const images = [
+    {
+      src: 'https://...',
+      altText: 'Alt text',
+      caption: 'Lorem ipsum. REUTERS/Photog',
+      // Optional max-height of images across all layouts
+      maxHeight: 800,
+    },
+    // ...
+  ];
+
+  /** Set the number of photos in each row at various breakpoints */
+  const layouts = [
+    {
+      breakpoint: 450, // Applies to containers wider than 450px
+      rows: [1, 2, 1], // Number of photos in each row
+    },
+    // Another layout for containers wider than 750px
+    { breakpoint: 750, rows: [1, 3] },
+  ];
+<\/script>
+
+<PhotoPack {images} {layouts} />
+`})}),`
+`,n.jsx(t,{of:c}),`
+`,n.jsx(e.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
+`,n.jsx(e.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-yaml",children:`# ArchieML doc
+[blocks]
+type: photo-pack
+id: my-photo-pack # Optional
+class: mb-2 # Optional
+width: wide # Optional
+textWidth: normal # Optional
+gap: 10 # Optional; must be a number.
+
+# Array of image metadata
+  [.images]
+    src: images/my-img-1.jpg
+    altText: Alt text
+    caption: Lorem ipsum. REUTERS/Photog
+
+    src: images/my-img-2.jpg
+    altText: Alt text
+    caption: Lorem ipsum. REUTERS/Photog
+
+    ...
+  []
+
+[]
+`})}),`
+`,n.jsxs(e.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",n.jsx(e.code,{children:"PhotoPack"})," component."]}),`
+`,n.jsxs(e.blockquote,{children:[`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Important ❗"}),": The prop ",n.jsx(e.code,{children:"gap"})," must be a number. ArchieML renders all values -- including numbers -- as strings, so convert the ",n.jsx(e.code,{children:"prop"})," value to a number before passing it to ",n.jsx(e.code,{children:"PhotoPack"}),"."]}),`
+`]}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<!-- App.svelte -->
+<script>
+  import { PhotoPack } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+
+  import content from '$locales/en/content.json';
+<\/script>
+
+{#each content.blocks as block}
+  {#if block.type === 'photo-pack'}
+    <!-- Pass \`assets\` into the image source in graphics kit -->
+    <PhotoPack
+      id={block.id}
+      class={block.class}
+      width={block.width}
+      textWidth={block.textWidth}
+      gap={Number(block.gap)}
+      images={block.images.map((img) => ({
+        ...img,
+        src: \`\${assets}/\${img.src}\`,
+      }))}
+      layouts={[
+        { breakpoint: 750, rows: [2, 3] },
+        { breakpoint: 450, rows: [1, 2, 2] },
+      ]}
+    />
+  {/if}
+{/each}
+`})}),`
+`,n.jsx(t,{of:l}),`
+`,n.jsx(e.h2,{id:"smart-default-layouts",children:"Smart default layouts"}),`
+`,n.jsxs(e.p,{children:["If you don't specify the ",n.jsx(e.code,{children:"layouts"})," prop, ",n.jsx(e.code,{children:"PhotoPack"})," will automatically generate responsive layouts based on the number of images and the container width."]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"How it works:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Desktop"})," (1024px+): Number of images per row depends on container width:",`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"normal"}),": max 2 per row"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"wide"})," / ",n.jsx(e.code,{children:"wider"}),": max 3 per row"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"widest"})," / ",n.jsx(e.code,{children:"fluid"}),": max 4 per row"]}),`
+`]}),`
+`]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Tablet"})," (768px+): Always max 2 per row"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Mobile"})," (below 768px): 1 per row"]}),`
+`]}),`
+`,n.jsxs(e.p,{children:["The smart defaults use a ",n.jsx(e.strong,{children:"bottom-heavy distribution"}),", meaning earlier rows have fewer images (making them larger and more prominent), while later rows have more images."]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Examples:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:["5 images, ",n.jsx(e.code,{children:"wide"})," container, desktop: ",n.jsx(e.code,{children:"[2, 3]"})," (2 in first row, 3 in second)"]}),`
+`,n.jsxs(e.li,{children:["7 images, ",n.jsx(e.code,{children:"widest"})," container, desktop: ",n.jsx(e.code,{children:"[3, 4]"})," (3 in first row, 4 in second)"]}),`
+`,n.jsxs(e.li,{children:["4 images, any container, desktop: ",n.jsx(e.code,{children:"[2, 2]"})," (evenly distributed)"]}),`
+`]}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-svelte",children:`<script>
+  import { PhotoPack } from '@reuters-graphics/graphics-components';
+
+  const images = [
+    { src: \`\${assets}/image1.jpg\`, altText: 'Photo 1', caption: 'Caption 1' },
+    { src: \`\${assets}/image2.jpg\`, altText: 'Photo 2', caption: 'Caption 2' },
+    { src: \`\${assets}/image3.jpg\`, altText: 'Photo 3', caption: 'Caption 3' },
+    { src: \`\${assets}/image4.jpg\`, altText: 'Photo 4', caption: 'Caption 4' },
+  ];
+<\/script>
+
+<!-- No layouts prop = smart defaults! -->
+<PhotoPack {images} width="wide" />
+`})})]})}function $(o={}){const{wrapper:e}={...i(),...o.components};return e?n.jsx(e,{...o,children:n.jsx(s,{...o})}):s(o)}export{$ as default};

packages/graphics-components/docs/assets/PymChild-BXN5mFOj.js

@@ -0,0 +1,22 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as i}from"./index-Z-6k0Xrj.js";import{P as s}from"./PymChild.stories-Dl4xYtZ5.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./index-client-BAw8T8-V.js";import"./pym.v1-C8pfgSnW.js";function o(t){const n={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...r(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{of:s}),`
+`,e.jsx(n.h1,{id:"pymchild",children:"PymChild"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"PymChild"})," component creates a ",e.jsx(n.a,{href:"https://blog.apps.npr.org/pym.js/",rel:"nofollow",children:"Pym.js"})," child instance for embeddables."]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { PymChild } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<PymChild polling={500} />
+`})}),`
+`,e.jsxs(n.p,{children:["You can access the Pym.js child via ",e.jsx(n.code,{children:"pym"})," in other components to send custom height updates to parent frames:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
+  import { PymChild, pym } from '@reuters-graphics/graphics-components';
+
+  const updateHeight = () => {
+    if (pym.child) pym.child.sendHeight();
+  };
+<\/script>
+
+<PymChild />
+
+<button onclick={updateHeight}>Update height</button>
+`})})]})}function v(t={}){const{wrapper:n}={...r(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(o,{...t})}):o(t)}export{v as default};

packages/graphics-components/docs/assets/PymChild.stories-Dl4xYtZ5.js

@@ -0,0 +1 @@
+import{p as a}from"./props-b4vEeO_8.js";import{ae as d,G as o,B as i}from"./runtime-C3rQLW--.js";import{i as p}from"./lifecycle-F2p_Qkk3.js";import{c,d as y}from"./create-runtime-stories-7AWWVphH.js";import{o as u}from"./index-client-BAw8T8-V.js";import{p as f}from"./pym.v1-C8pfgSnW.js";const _=d({child:null});function s(t,e){i(e,!0);let r=a(e,"polling",3,500);u(()=>{let m=new f.Child({polling:r()});_.child=m}),o()}s.__docgen={data:[{name:"polling",visibility:"public",description:"Pym.js polling interval",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"500"}],name:"PymChild.svelte"};const n={title:"Components/Utilities/PymChild",component:s},{Story:h}=y();function l(t,e){i(e,!1),p(),h(t,{name:"Demo",tags:["!autodocs","!dev"],parameters:{__svelteCsf:{rawCode:"<PymChild {...args} />"}}}),o()}l.__docgen={version:3,name:"PymChild.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const C=c(l,n),g=["Demo"],P=C.Demo,D=Object.freeze(Object.defineProperty({__proto__:null,Demo:P,__namedExportsOrder:g,default:n},Symbol.toStringTag,{value:"Module"}));export{D as P};

packages/graphics-components/docs/assets/ReferralBlock-BGN_l1hf.js

@@ -0,0 +1,3 @@
+import{p as c,c as ae,a as g,f as P}from"./props-b4vEeO_8.js";import{o as le}from"./index-client-BAw8T8-V.js";import{a4 as D,ae as re,C as se,G as oe,B as de,k as e,a3 as E,I as r,F as k,J as I}from"./runtime-C3rQLW--.js";import{i as F,s as h}from"./svelte-component-C8Ginrj8.js";import{e as ce,i as fe}from"./each-CVpBMMjG.js";import{s as v,a as y}from"./attributes-Cg6aLqN3.js";import{b as ue}from"./size-DMdj3-I9.js";import{g as me}from"./time-7uMnD1vs.js";import{B as ve}from"./Block-D3Ui8rd-.js";const ye=o=>{const t="https://www.reuters.com";try{return new URL(o)}catch{try{return new URL(o,t)}catch{return null}}},J=o=>{if(typeof window>"u"||typeof window.location>"u")return!1;const t=ye(o);return t?window.location.origin===t.origin&&window.location.pathname===t.pathname:!1},pe=o=>{const{redirect_url:t,canonical_url:p}=o;return t?!J(t):p?!J(p):!0};var we=P("<div> </div>"),ge=P('<div class="referral svelte-1fkj9me"><a class="svelte-1fkj9me"><div class="referral-pack flex justify-around my-0 mx-auto"><div><div class="kicker m-0 body-caption leading-tighter svelte-1fkj9me" data-chromatic="ignore"> </div> <div class="title m-0 body-caption leading-tighter svelte-1fkj9me" data-chromatic="ignore"> </div> <div class="publish-time body-caption leading-tighter svelte-1fkj9me" data-chromatic="ignore"> </div></div> <div><img class="block object-cover m-0 w-full svelte-1fkj9me" data-chromatic="ignore"/></div></div></a></div>'),ke=P("<div><!> <div></div></div>");function he(o,t){de(t,!0);let p=c(t,"section",3,"/world/"),R=c(t,"number",3,4),U=c(t,"linkTarget",3,"_self"),A=c(t,"heading",3,""),M=c(t,"width",3,"wide"),q=c(t,"id",3,""),G=c(t,"class",3,"fmy-8"),a=D(0);const H="recent-stories-by-sections-v1",K="articles-by-collection-alias-or-id-v1";let b=D(re([]));le(async()=>{var x;if(typeof window>"u"||((x=window==null?void 0:window.location)==null?void 0:x.hostname)!=="www.reuters.com")return;const d=!!t.collection,_=d?K:H;try{const w=(await(await fetch(`https://www.reuters.com/pf/api/v3/content/fetch/${_}?`+new URLSearchParams({query:JSON.stringify({section_ids:d?void 0:p(),collection_alias:d?t.collection:void 0,size:20,website:"reuters"})}))).json()).result.articles.filter(i=>{var l;return(i==null?void 0:i.headline_category)||((l=i==null?void 0:i.kicker)==null?void 0:l.name)}).filter(i=>{var l;return(l=i==null?void 0:i.thumbnail)==null?void 0:l.url}).filter(i=>{var l;return!((l=i==null?void 0:i.content)!=null&&l.third_party)}).filter(pe).slice(0,R());E(b,w,!0)}catch{console.warn("Unable to fetch referral links.")}});var L=ae(),Q=se(L);{var X=d=>{ve(d,{get width(){return M()},get id(){return q()},get class(){return`referrals-block ${G()??""}`},children:(_,x)=>{var u=ke();let j;var w=r(u);{var i=s=>{var n=we();let m;var f=r(n);I(C=>{m=y(n,1,"heading h4 font-bold svelte-1fkj9me",null,m,C),h(f,A())},[()=>({stacked:e(a)&&e(a)<750})]),g(s,n)};F(w,s=>{A()&&s(i)})}var l=k(w,2);let T;ce(l,21,()=>e(b),fe,(s,n)=>{var m=ge(),f=r(m),C=r(f),S=r(C);let B;var N=r(S),Y=r(N),V=k(N,2),Z=r(V),$=k(V,2),ee=r($),O=k(S,2);let W;var z=r(O);I((te,ie,ne)=>{v(f,"href",`https://www.reuters.com${e(n).canonical_url??""}`),v(f,"target",U()),v(f,"rel",U()==="_blank"?"noreferrer":null),B=y(S,1,"headline svelte-1fkj9me",null,B,te),h(Y,e(n).headline_category||e(n).kicker.name),h(Z,e(n).title),h(ee,ie),W=y(O,1,"image-container block m-0 overflow-hidden relative svelte-1fkj9me",null,W,ne),v(z,"src",e(n).thumbnail.url),v(z,"alt",e(n).thumbnail.alt_text||e(n).thumbnail.caption)},[()=>({xs:e(a)&&e(a)<450}),()=>me(new Date(e(n).display_time)),()=>({xs:e(a)&&e(a)<450})]),g(s,m)}),I((s,n)=>{j=y(u,1,"block-container svelte-1fkj9me",null,j,s),T=y(l,1,"referral-container inline-flex flex-wrap w-full justify-between svelte-1fkj9me",null,T,n)},[()=>({stacked:e(a)&&e(a)<750}),()=>({stacked:e(a)&&e(a)<750,xs:e(a)&&e(a)<450})]),ue(u,"clientWidth",s=>E(a,s)),g(_,u)},$$slots:{default:!0}})};F(Q,d=>{e(b).length===R()&&d(X)})}g(o,L),oe()}he.__docgen={data:[{name:"section",visibility:"public",description:`Section ID, which is often the URL path to the section page on reuters.com.
+
+Note that not all section pages will be available in the recent stories by section API.`,keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"/world/"'},{name:"collection",visibility:"public",description:"Collection alias, as defined in Arc Collections editor.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"number",visibility:"public",description:"Number of referrals to show.",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"4"},{name:"linkTarget",visibility:"public",description:"Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"_self"'},{name:"heading",visibility:"public",description:"Add a heading to the referral block.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'},{name:"width",visibility:"public",description:"Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid'",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"normal",text:'"normal"'},{kind:"const",type:"string",value:"wide",text:'"wide"'},{kind:"const",type:"string",value:"wider",text:'"wider"'},{kind:"const",type:"string",value:"widest",text:'"widest"'},{kind:"const",type:"string",value:"fluid",text:'"fluid"'}],text:'"normal" | "wide" | "wider" | "widest" | "fluid"'},static:!1,readonly:!1,defaultValue:'"wide"'},{name:"id",visibility:"public",description:"Add an ID to target with SCSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'},{name:"class",visibility:"public",description:"Add a class to target with SCSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1}],name:"ReferralBlock.svelte"};export{he as R};

packages/graphics-components/docs/assets/ReferralBlock-igi16w5i.css

@@ -0,0 +1 @@
+div.block-container.stacked.svelte-1fkj9me{display:flex;flex-direction:column;align-items:center}div.heading.svelte-1fkj9me{margin-block-start:0;font-family:Knowledge,sans-serif}div.heading.stacked.svelte-1fkj9me{max-width:450px}.referral-container.svelte-1fkj9me a:where(.svelte-1fkj9me){text-decoration:none}.referral-container.stacked.svelte-1fkj9me{max-width:450px}.referral-container.stacked.svelte-1fkj9me .referral:where(.svelte-1fkj9me){width:100%}.referral-container.stacked.svelte-1fkj9me .referral:where(.svelte-1fkj9me) .headline:where(.svelte-1fkj9me){width:calc(100% - 7rem)}.referral-container.svelte-1fkj9me .referral:where(.svelte-1fkj9me){display:block;width:calc(50% - 30px);max-width:450px;margin-block-start:clamp(.31rem,.31rem + 0vw,.31rem);margin-block-end:clamp(.31rem,.31rem + 0vw,.31rem)}.referral-container.svelte-1fkj9me .referral:where(.svelte-1fkj9me):hover .title:where(.svelte-1fkj9me){text-decoration:underline}.referral-container.svelte-1fkj9me .referral:where(.svelte-1fkj9me):hover img:where(.svelte-1fkj9me){filter:brightness(85%)}.referral-container.svelte-1fkj9me .referral:where(.svelte-1fkj9me) .headline:where(.svelte-1fkj9me){display:inline-block;width:calc(100% - 9rem);padding-inline-end:clamp(.56rem,.52rem + .21vw,.69rem)}.referral-container.svelte-1fkj9me .referral:where(.svelte-1fkj9me) .headline:where(.svelte-1fkj9me) .kicker:where(.svelte-1fkj9me){font-size:var(--theme-font-size-xxs);font-family:Knowledge,sans-serif}.referral-container.svelte-1fkj9me .referral:where(.svelte-1fkj9me) .headline:where(.svelte-1fkj9me) .title:where(.svelte-1fkj9me){font-weight:500;font-size:var(--theme-font-size-sm);color:var(--theme-colour-text-primary);font-family:Knowledge,sans-serif}.referral-container.svelte-1fkj9me .referral:where(.svelte-1fkj9me) .headline:where(.svelte-1fkj9me) .publish-time:where(.svelte-1fkj9me){font-size:var(--theme-font-size-xxs);font-family:Knowledge,sans-serif}.referral-container.svelte-1fkj9me .referral:where(.svelte-1fkj9me) .image-container:where(.svelte-1fkj9me){border-radius:.25rem;border:1px solid var(--theme-colour-brand-rules);width:9rem}.referral-container.svelte-1fkj9me .referral:where(.svelte-1fkj9me) .image-container.xs:where(.svelte-1fkj9me){width:7rem}.referral-container.svelte-1fkj9me .referral:where(.svelte-1fkj9me) .image-container:where(.svelte-1fkj9me) img:where(.svelte-1fkj9me){width:100%;height:100%;object-fit:cover;transition:filter .1s}

packages/graphics-components/docs/assets/ReferralBlock-vmOM73Gg.js

@@ -0,0 +1,29 @@
+import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as n}from"./index-CO-0pc0F.js";import{M as c,C as t}from"./index-Z-6k0Xrj.js";import{R as i,D as l,B as p}from"./ReferralBlock.stories-CQ3fF4Xy.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./ReferralBlock-BGN_l1hf.js";import"./index-client-BAw8T8-V.js";import"./each-CVpBMMjG.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./size-DMdj3-I9.js";import"./time-7uMnD1vs.js";import"./advancedFormat-DF-l3-BJ.js";import"./dayjs.min-CfWDS3UC.js";import"./Block-D3Ui8rd-.js";function s(o){const r={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...n(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(c,{of:i}),`
+`,e.jsx(r.h1,{id:"referralblock",children:"ReferralBlock"}),`
+`,e.jsxs(r.p,{children:["The ",e.jsx(r.code,{children:"ReferralBlock"})," component creates a set of referral links from recent Reuters.com stories using the ",e.jsx(r.a,{href:"https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?query=%7B%22section_ids%22%3A%22%2Fworld%2F%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D",rel:"nofollow",children:"recent stories by section API"}),"."]}),`
+`,e.jsxs(r.blockquote,{children:[`
+`,e.jsxs(r.p,{children:["Note: The ",e.jsx(r.code,{children:"section"})," or ",e.jsx(r.code,{children:"collection"})," prop determines which section or collection stories are from."]}),`
+`,e.jsxs(r.p,{children:["You can get the section ID from the URL for the Reuters.com section pages. For example, the section ID for ",e.jsx(r.a,{href:"https://www.reuters.com/world/europe/",rel:"nofollow",children:"World - Europe"})," stories at ",e.jsx(r.code,{children:"www.reuters.com/world/europe/"})," would be ",e.jsx(r.code,{children:"/world/europe/"}),". (The leading and trailing slashes are required!)"]}),`
+`,e.jsx(r.p,{children:"You should get the collection alias from the dotcom team."}),`
+`]}),`
+`,e.jsx(r.pre,{children:e.jsx(r.code,{className:"language-svelte",children:`<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<ReferralBlock
+  section="/lifestyle/sports/"
+  class="fmy-0"
+  heading="More World Cup coverage"
+/>
+`})}),`
+`,e.jsx(t,{of:l}),`
+`,e.jsx(r.h2,{id:"collections",children:"Collections"}),`
+`,e.jsx(r.p,{children:"TK - Check if this is still relevant."}),`
+`,e.jsx(r.pre,{children:e.jsx(r.code,{className:"language-svelte",children:`<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+<\/script>
+
+<ReferralBlock collection="x-trump" number={6} class="fmy-8" />
+`})}),`
+`,e.jsx(t,{of:p}),`
+`,e.jsx(r.pre,{children:e.jsx(r.code,{})})]})}function X(o={}){const{wrapper:r}={...n(),...o.components};return r?e.jsx(r,{...o,children:e.jsx(s,{...o})}):s(o)}export{X as default};

packages/graphics-components/docs/assets/ReferralBlock.stories-CQ3fF4Xy.js

@@ -0,0 +1 @@
+import{f as c,a as m}from"./props-b4vEeO_8.js";import{B as f,C as p,F as d,G as u}from"./runtime-C3rQLW--.js";import{i as _}from"./lifecycle-F2p_Qkk3.js";import{c as g,d as y}from"./create-runtime-stories-7AWWVphH.js";import{R as B}from"./ReferralBlock-BGN_l1hf.js";const s={title:"Components/Page furniture/ReferralBlock",component:B,argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]},section:{control:"select",options:["/world/","/world/europe/","/lifestyle/","/lifestyle/sports/","/legal/","/business/","/business/energy/"]},number:{control:"select",options:[2,4,6,8]}}},{Story:r}=y();var v=c("<!> <!>",1);function t(a,n){f(n,!1),_();var e=v(),o=p(e);r(o,{name:"Demo",args:{section:"/lifestyle/sports/",class:"fmy-0",heading:"More World Cup coverage"},parameters:{__svelteCsf:{rawCode:"<ReferralBlock {...args} />"}}});var i=d(o,2);r(i,{name:"By collection",exportName:"ByCollection",args:{collection:"x-trump",number:6,class:"fmy-8",heading:"The latest Trump coverage"},parameters:{__svelteCsf:{rawCode:"<ReferralBlock {...args} />"}}}),m(a,e),u()}t.__docgen={version:3,name:"ReferralBlock.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const l=g(t,s),C=["Demo","ByCollection"],R=l.Demo,w=l.ByCollection,x=Object.freeze(Object.defineProperty({__proto__:null,ByCollection:w,Demo:R,__namedExportsOrder:C,default:s},Symbol.toStringTag,{value:"Module"}));export{w as B,R as D,x as R};