@reuters-graphics/graphics-components 1.1.6 → 2.0.0

package/dist/docs/guides/customising-with-scss.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/blocks';
 import { parameters } from '../utils/docsPage.js';
+import Highlight from '../docs-components/Highlight/Highlight';
 
 import startImg from './imgs/scss-start.png';
 import highlightImg from './imgs/scss-highlight.png';
@@ -13,8 +14,6 @@ import winningImg from './imgs/scss-winning.png';
   parameters={{ ...parameters }}
 />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Customising components with SCSS
 
 One of the most powerful ways to customise components isn't props or, even, Svelte.
@@ -31,13 +30,13 @@ Let's say you wanted to change our `BeforeAfter` component. You want the text ov
 
 <img src={startImg} width="600" />
 
-The first thing you should do is <span className="highlight">check out the elements you want to change in your web inspector</span> and see if CSS can make the change you want.
+The first thing you should do is <Highlight>check out the elements you want to change in your web inspector</Highlight> and see if CSS can make the change you want.
 
 <img src={highlightImg} width="300" style={{ margin: '0 0 1rem' }} />
 
 <img src={inspectorImg} width="100%" />
 
-In our case, we want to change the absolute position of those elements. To test that'll actually work, we can <span className="highlight">try it directly in the inspector first!</span>
+In our case, we want to change the absolute position of those elements. To test that'll actually work, we can <Highlight>try it directly in the inspector first!</Highlight>
 
 <img src={changeImg} width="500" style={{ margin: '0 0 1rem' }} />
 
@@ -49,7 +48,7 @@ First, let's look at the class of the style rule we changed in the inspector:
 
 `figure.before-after-container.s-khJY-w4TYkp5 .overlay-container.before.s-khJY-w4TYkp5`
 
-One thing we always need to do is <span className="highlight">strip out any Svelte class names</span>, i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.
+One thing we always need to do is <Highlight>strip out any Svelte class names</Highlight>, i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.
 
 That leaves us with:
 
@@ -57,7 +56,7 @@ That leaves us with:
 
 But we need our style rule to _beat_ the original style in the CSS cascade, and right now, it's less specific without those class names we stripped.
 
-The easiest way to make sure your style rule wins out is to <span className="highlight">add an ID either directly to the element or to a parent</span>. In our case, let's add an ID through the `BeforeAfter` `id` prop. Now we can use it! (For extra credit, though, we'll drop the `.before` so our new style rule applies to _both_ overlays.)
+The easiest way to make sure your style rule wins out is to <Highlight>add an ID either directly to the element or to a parent</Highlight>. In our case, let's add an ID through the `BeforeAfter` `id` prop. Now we can use it! (For extra credit, though, we'll drop the `.before` so our new style rule applies to _both_ overlays.)
 
 ```scss
 figure#my-before-after .overlay-container {
@@ -83,12 +82,14 @@ div#my-before-after figure .overlay-container {
 }
 ```
 
-We can <span className="highlight">confirm the new style rule is winning by looking at its order back in our web inspector!</span>
+We can <Highlight>confirm the new style rule is winning by looking at its order back in our web inspector!</Highlight>
 
 <img src={winningImg} width="500" style={{ margin: '0 0 1rem' }} />
 
 Done!
 
-#### Can I just... `important!` it?
+### Can I just... `important!` it?
+
+Yep! Just be sure your style rule is **very specific** and not something generic that might apply to other elements in your page like `div.container`.
 
-Yep, as a last result. Just be sure your style rule is **very specific** and not something generic that might apply to other elements like `div.container`.
+Many of the components have `class` or `id` props you can use to attach additional classes or an id that will add more specificity to your components.

package/dist/docs/guides/getting-help.mdx

@@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js';
 
 <Meta title="Guides/Getting help" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Getting help
 
 🚨 **If you're on deadline**, talk to your editor who can point you to the nearest developer.
@@ -15,16 +13,16 @@ If you're _off_ deadline, we use GitHub issues to track things that need fixing
 
 ### Is something wrong in the code?
 
-🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=%F0%9F%90%9B%20bug&assignees=hobbes7878) to create an issue on GitHub and report any bugs you've found. It's **very** helpful if you also share a link to any repo you're working in where you've spotted the bug.
+🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=bug&assignees=hobbes7878) to create an issue on GitHub and report any bugs you've found. It's **very** helpful if you also share a link to any repo you're working in where you've spotted the bug.
 
 ---
 
 ### Is something wrong in the docs?
 
-🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=%F0%9F%93%9A%20documentation&assignees=hobbes7878) and tell us which docs are incorrect, unclear or could otherwise be improved.
+🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=documentation&assignees=hobbes7878) and tell us which docs are incorrect, unclear or could otherwise be improved.
 
 ---
 
 ### Have an idea for a new component or how to improve an existing one?
 
-🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=%F0%9F%9A%80%20new%20feature&assignees=hobbes7878) and tell us more.
+🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=new%20feature&assignees=hobbes7878) and tell us more.

package/dist/docs/guides/graphics-kit.mdx

@@ -1,56 +1,34 @@
 import { Meta } from '@storybook/blocks';
 import { parameters } from '../utils/docsPage.js';
+import Highlight from '../docs-components/Highlight/Highlight';
 
 <Meta
   title="Guides/Using with the Graphics Kit"
   parameters={{ ...parameters }}
 />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Using with the Graphics Kit
 
-If you haven't, check out ["Using Reuters Graphics Components" in the Graphics Kit docs](https://reuters-graphics.github.io/docs_graphics-kit/for_developers/graphics-components/) to get a general idea of how to use components.
-
-## Quickit
-
-Look <span className="highlight">for <strong>🚀 QUICKIT</strong> stories</span> (Quick Kit 🤣🙄) for some of our most commonly used components. These stories
-include easy copy/paste snippets as well as Google Doc block examples that should
-shortcut getting a component working in the Graphics Kit.
-
-(Want a QUICKIT story for another component? [Just ask us!](https://github.com/reuters-graphics/graphics-components/issues/new?labels=%F0%9F%93%9A%20documentation&assignees=hobbes7878))
-
-## FAQs
-
-### How do I write my Google Doc?
+Our graphics components are designed to work seemlessly with the [Graphics Kit](https://github.com/reuters-graphics/bluprint_graphics-kit) as well as just about any Svelte-based page builder.
 
-Many component stories show passing data directly into component props. In the Kit, though, you likely won't be hard-coding things like text strings in your code and instead will get them from a Google Doc.
+**There is, however, one gotcha to watch out for:**
 
-Check out the guide devoted to [using components with Google Docs](?path=/docs/guides-using-with-google-docs--page) for a quick explanation of how to work with Google Docs.
+When working with multimedia files like images or videos, components expect all paths to be <Highlight>absolute URLs.</Highlight>
 
-And, of course, look for a QUICKIT story for your component, which will have a Docs example specific to it.
-
-### How do I use this image/video/etc.?
-
-Remember, all references to images, videos and other media must be _absolute paths_:
-
-✅ `https://.../myImage.jpg`
+✅ `https://reuters.com/graphics/.../myImage.jpg`
 
 ❌ `./myImage.jpg`
 
-In most cases, that means you'll need to prefix relative paths with the special `assets` Svelte module. Many examples in these docs show how to do it. But it's also easy enough to demo again here!
+In the Graphics Kit, that means you'll need to prefix relative paths with the special [`assets`](https://svelte.dev/docs/kit/$app-paths#assets) SvelteKit module that contains the root URL for your project. Many examples in these docs show how to do it. But it's also easy enough to demo again here!
 
 ```svelte
 <script>
   import { FeaturePhoto } from '@reuters-graphics/graphics-components';
 
-  // This is already imported for you in App.svelte
+  // Import the assets module if it's not already there.
   import { assets } from '$app/paths';
 </script>
 
+<!-- Use the assets module to prefix the path to your image. -->
 <FeautrePhoto src="{`${assets}/imgs/myImage.jpg`}" />
 ```
-
-### How do I change this component's styles?
-
-Check out our guide on [customising components with SCSS](?path=/docs/guides-customising-components-with-scss--page)

package/dist/docs/guides/using-docs.mdx

@@ -1,43 +1,47 @@
 import { Meta } from '@storybook/blocks';
 import { parameters } from '../utils/docsPage.js';
+import Highlight from '../docs-components/Highlight/Highlight';
 
 import storiesImg from './imgs/stories.png';
 import introImg from './imgs/intro.png';
 import argsImg from './imgs/argstable.png';
 import frameImg from './imgs/frame.png';
-import copyImg from './imgs/copy-code.png';
 import moreStoriesImg from './imgs/more-stories.png';
 
 <Meta title="Guides/Using these docs" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Using these docs
 
 The docs in this site include interactive examples of how to use our components, explanations of how our basic design system works and helpful docs on SCSS tools you can use to customise your page.
 
+## Prerequisites
+
+Reuters Graphics components are written using Svelte, and we assume in these docs you have a very basic understanding of how those components work.
+
+If you don't, **🛑 STOP NOW** and read ["Bare minimum Svelte"](./?path=/docs/guides-bare-minimum-svelte--docs).
+
 ## How component docs are organised
 
 Component docs are written using a framework called [Storybook](https://storybook.js.org/docs/svelte/get-started/introduction), which creates a page for each component. You can find those pages in left-hand nav on the site.
 
-Each component has a Docs page and one or more "stories" or demos that show how the component works:
+Each component has a Docs page and one or more <Highlight>stories</Highlight> or demos that show how the component works:
 
 <img
   src={storiesImg}
   style={{ maxWidth: '300px', width: '100%', margin: '0 0 2rem' }}
 />
 
-### Parts of a component page
+### Parts of a component docs page
 
-Each component page starts with an intro that includes a little documentation and a code snippet. The intro always shows the simplest way to import and use a component.
+Each component page starts with an intro that includes a little documentation and a code <Highlight>snippet</Highlight>. The intro always shows the simplest way to import and use a component.
 
 <img src={introImg} width="650" style={{ margin: '0 0 2rem' }} />
 
-Next is a **frame** that shows how the component looks. Each story will have its own frame.
+Next is a <Highlight>frame</Highlight> that shows how the component looks. Each story will have its own frame.
 
 <img src={frameImg} width="650" style={{ margin: '0 0 2rem' }} />
 
-Below the story frame is an **args table**. <span className="highlight bold">This is the most important part of every component&rsquo;s page.</span> The args table documents all the [props](https://learn.svelte.dev/tutorial/declaring-props) and [slots](https://learn.svelte.dev/tutorial/slots) a component has, i.e., all the ways you can customise it.
+Below the story frame is an <Highlight>args table</Highlight>. This is the most important part of every component&rsquo;s page. The args table documents all the [props](https://learn.svelte.dev/tutorial/declaring-props) and [slots](https://learn.svelte.dev/tutorial/slots) a component has — i.e., all the ways you can customise it.
 
 <img src={argsImg} width="100%" style={{ margin: '0 0 2rem', maxWidth: 800 }} />
 
@@ -45,10 +49,6 @@ Each prop includes its name and a description with the data type that prop expec
 
 The `Control` column in the table gives you a way to play with the value of that prop in the live demo. Make changes here, and for most components, they'll update the demo frame to reflect your changes.
 
-Click the "Show code" button in the frame to see how your component looks with the props you set.
-
-<img src={copyImg} width="100%" style={{ margin: '2rem 0', maxWidth: 800 }} />
-
 From there, more stories show other ways you might use a component, also with a snippet you can copy into your own page.
 
 <img

package/dist/docs/intro.mdx

@@ -3,8 +3,6 @@ import { parameters } from './utils/docsPage.js';
 
 <Meta title="Intro" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # @reuters-graphics/graphics-components
 
 <p>
@@ -24,7 +22,7 @@ Svelte components, SCSS and more you can use in graphics projects.
 1. Install
 
 ```bash
-yarn add @reuters-graphics/graphics-components
+pnpm i @reuters-graphics/graphics-components
 ```
 
 2. Checkout the [guides](?path=/docs/guides-using-these-docs--page), if you haven't, or dive straight into the docs to start using components.

package/dist/docs/layout/intro.mdx

@@ -3,9 +3,7 @@ import { parameters } from '../utils/docsPage.js';
 
 import WellImg from './article-well.jpg';
 
-<Meta title="Layout/Intro" parameters={{ ...parameters }} />
-
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+<Meta title="Components/Page layout/Intro" parameters={{ ...parameters }} />
 
 # Layout
 

package/dist/docs/styles/colours/intro.mdx

@@ -3,15 +3,13 @@ import { parameters } from '../../utils/docsPage.js';
 
 <Meta title="Styles/Colours/Intro" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Working with colours
 
 Colour palettes are provided as [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) you can use in your own styles. Some are included by default, others can be imported in your global stylesheet and then used.
 
 ```scss
 /* global.scss */
-@import '@reuters-graphics/graphics-components/scss/colours/primary/blue';
+@use '@reuters-graphics/graphics-components/scss/colours/primary/blue';
 
 p {
   color: var(--grey-400); // Included by default

package/dist/docs/styles/colours/primary.mdx

@@ -27,8 +27,6 @@ import roseScheme from '../../../scss/colours/primary/_rose.scss?raw';
 
 <Meta title="Styles/Colours/Primary" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Primary colours
 
 <CopyColourTable

package/dist/docs/styles/colours/thematic.mdx

@@ -8,8 +8,6 @@ import nordScheme from '../../../scss/colours/thematic/_nord.scss?raw';
 
 <Meta title="Styles/Colours/Thematic" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Thematic colours
 
 <CopyColourTable

package/dist/docs/styles/intro.mdx

@@ -3,8 +3,6 @@ import { parameters } from './../utils/docsPage.js';
 
 <Meta title="Styles/Intro" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Styles
 
 This library also includes our main SCSS stylesheets with pre-defined classes you can use to style your page.

package/dist/docs/styles/tokens/accessibility/main.mdx

@@ -7,13 +7,11 @@ import visibilityStyles from '../../../../scss/tokens/accessibility/_visibility.
 
 <Meta title="Styles/Tokens/Accessibility" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Accessibility tokens
 
 <CopyTable
   title="Visibility"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(visibilityStyles, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include mixins.${t};`, false]}
 />

package/dist/docs/styles/tokens/backgrounds/main.mdx

@@ -7,8 +7,6 @@ import backgroundColor from '../../../../scss/tokens/backgrounds/_background-col
 
 <Meta title="Styles/Tokens/Backgrounds" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Background tokens
 
 <CopyTable
@@ -16,5 +14,5 @@ import backgroundColor from '../../../../scss/tokens/backgrounds/_background-col
   mdnLink="background-color"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(backgroundColor, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include mixins.${t};`, false]}
 />

package/dist/docs/styles/tokens/borders/main.mdx

@@ -9,8 +9,6 @@ import borderWidth from '../../../../scss/tokens/borders/_border-width.scss?raw'
 
 <Meta title="Styles/Tokens/Borders" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Border tokens
 
 <CopyTable

package/dist/docs/styles/tokens/flexbox/main.mdx

@@ -16,8 +16,6 @@ import justifySelf from '../../../../scss/tokens/layout/flex/_justify-self.scss?
 
 <Meta title="Styles/Tokens/Flexbox" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Flexbox tokens
 
 Flexbox is a modern way to lay out elements on your page while controling their alignment, distribution, space between and more. If flexbox is new, checkout the excellent [CSS tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

package/dist/docs/styles/tokens/interactivity/_main.mdx

@@ -8,8 +8,6 @@ import pointerEvents from '../../../../scss/tokens/interactivity/_pointer-events
 
 <Meta title="Styles/Tokens/Interactivity" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Interactivity tokens
 
 <CopyTable

package/dist/docs/styles/tokens/intro.mdx

@@ -9,8 +9,6 @@ import color from '../../../scss/tokens/text/_color.scss?inline';
 
 <Meta title="Styles/Tokens/Intro" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Style tokens
 
 All of the components in this library have been styled using a system of tokens. The style tokens give us a lot of flexibility and ultimately make for the most concise CSS possible.
@@ -69,7 +67,7 @@ Here's our table of text colour tokens, which set the `text-color` style.
   mdnLink="color"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(color, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include mixins.${t};`, false]}
 />
 
 This table's tokens can be used through either a class or an SCSS mixin. (The table lets you click-to-copy for either.)
@@ -86,16 +84,14 @@ If you'd like to set the style in SCSS, you'd use the `Include` token like this:
 <p>Lorem ipsum...</p>
 
 <style lang="scss">
-  @import '@reuters-graphics/graphics-components/scss/mixins';
+  @use '@reuters-graphics/graphics-components/scss/mixins' as mixins;
 
   p {
-    @include text-primary;
+    @include mixins.text-primary;
   }
 </style>
 ```
 
-> **Note:** If you're writing SCSS _inside a component_, the `@import` above is required. If you're writing in `global.scss`, this is already included for you.
-
 To use multiple tokens, you'd simply add another class or include:
 
 ```svelte
@@ -104,8 +100,8 @@ To use multiple tokens, you'd simply add another class or include:
 
 ```scss
 p {
-  @include text-primary;
-  @include font-bold;
+  @include mixins.text-primary;
+  @include mixins.font-bold;
 }
 ```
 
@@ -123,6 +119,6 @@ For SCSS includes, the concept is the same, but you need to escape the `!` by ad
 
 ```scss
 p {
-  @include \!font-bold;
+  @include mixins.\!font-bold;
 }
 ```

package/dist/docs/styles/tokens/layout/main.mdx

@@ -12,8 +12,6 @@ import position from '../../../../scss/tokens/layout/_position.scss?raw';
 
 <Meta title="Styles/Tokens/Layout" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Layout tokens
 
 <CopyTable

package/dist/docs/styles/tokens/sizing/main.mdx

@@ -11,8 +11,6 @@ import width from '../../../../scss/tokens/sizing/_width.scss?inline';
 
 <Meta title="Styles/Tokens/Sizing" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Sizing tokens
 
 <CopyTable

package/dist/docs/styles/tokens/spacers/main.mdx

@@ -9,8 +9,6 @@ import fluidPadding from '../../../../scss/tokens/spacers/_fluid-padding.scss?in
 
 <Meta title="Styles/Tokens/Spacers" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Spacer tokens
 
 Spacers include tokens that control static and fluid margins and paddings.
@@ -46,7 +44,7 @@ As a rule of thumb, if you're setting space between or adjacent to _text element
   mdnLink="margin"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(fluidMargin, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include mixins.${t};`, false]}
 />
 
 <CopyTable
@@ -54,5 +52,5 @@ As a rule of thumb, if you're setting space between or adjacent to _text element
   mdnLink="margin"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(fluidPadding, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include mixins.${t};`, false]}
 />

package/dist/docs/styles/tokens/typography/main.mdx

@@ -22,8 +22,6 @@ import './styles.scss';
 
 <Meta title="Styles/Tokens/Typography" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Typography tokens
 
 <CopyTable
@@ -31,7 +29,7 @@ import './styles.scss';
   note="Role tokens group several individual style tokens for common text elements like headers, body text, notes and links. You can use them as a shorthand for our default typography styles."
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(role, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include mixins.${t};`, false]}
 />
 
 <CopyTable
@@ -39,7 +37,7 @@ import './styles.scss';
   mdnLink="color"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(color, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include mixins.${t};`, false]}
 />
 
 <CopyTable
@@ -47,7 +45,7 @@ import './styles.scss';
   mdnLink="font-family"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(fontFamily, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include mixins.${t};`, false]}
 />
 
 <CopyTable
@@ -55,7 +53,7 @@ import './styles.scss';
   mdnLink="font-size"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(fontSize, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include mixins.${t};`, false]}
 />
 
 <CopyTable
@@ -71,7 +69,7 @@ import './styles.scss';
   mdnLink="font-weight"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(fontWeight, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include mixins.${t};`, false]}
 />
 
 <CopyTable
@@ -79,7 +77,7 @@ import './styles.scss';
   mdnLink="letter-spacing"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(letterSpacing, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include mixins.${t};`, false]}
 />
 
 <CopyTable
@@ -87,7 +85,7 @@ import './styles.scss';
   mdnLink="line-height"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(lineHeight, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include mixins.${t};`, false]}
 />
 
 <CopyTable

package/dist/docs/styles/tokens/variables/main.mdx

@@ -8,8 +8,6 @@ import block from '../../../../scss/tokens/variables/_block.scss?raw';
 
 <Meta title="Styles/Tokens/SCSS Variables" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Token variables
 
 These are SCSS mirrors of some of the default CSS variables used in the `Theme`. Use them in places where CSS variables cannot be used. e.g. You can write `media-queries` to target the block widths using the `block` vars, which is not possible using CSS variables.

package/dist/docs/theme-builder/theme-builder.mdx

@@ -3,9 +3,7 @@ import { parameters } from '../utils/docsPage.js';
 
 import ThemeBuilder from './../docs-components/ThemeBuilder/ThemeBuilder.jsx';
 
-<Meta title="Theming/Theme builder" parameters={{ ...parameters }} />
-
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+<Meta title="Components/Theming/Theme builder" parameters={{ ...parameters }} />
 
 # Theme builder
 

package/dist/docs/theming/css-variables.mdx

@@ -1,9 +1,7 @@
 import { Meta } from '@storybook/blocks';
 import { parameters } from '../utils/docsPage.js';
 
-<Meta title="Theming/CSS variables" parameters={{ ...parameters }} />
-
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+<Meta title="Components/Theming/CSS variables" parameters={{ ...parameters }} />
 
 # CSS variables
 

package/dist/index.d.ts

@@ -41,8 +41,5 @@ export { default as Table } from "./components/Table/Table.svelte";
 export { default as ToolsHeader } from "./components/ToolsHeader/ToolsHeader.svelte";
 export { default as Video } from "./components/Video/Video.svelte";
 export { default as Visible } from "./components/Visible/Visible.svelte";
-export { getEndNotesPropsFromDoc } from "./components/EndNotes/docProps.js";
-export { getPhotoPackPropsFromDoc } from "./components/PhotoPack/docProps.js";
-export { getScrollerPropsFromDoc } from "./components/Scroller/docProps.js";
 export { default as Analytics, registerPageview } from "./components/Analytics/Analytics.svelte";
 export { default as Theme, themes } from "./components/Theme/Theme.svelte";

package/dist/index.js

@@ -49,8 +49,3 @@ export { default as Theme, themes } from './components/Theme/Theme.svelte';
 export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
 export { default as Video } from './components/Video/Video.svelte';
 export { default as Visible } from './components/Visible/Visible.svelte';
-
-// Utilities
-export { getEndNotesPropsFromDoc } from './components/EndNotes/docProps.js';
-export { getPhotoPackPropsFromDoc } from './components/PhotoPack/docProps.js';
-export { getScrollerPropsFromDoc } from './components/Scroller/docProps.js';

package/dist/scss/reset/_main.scss

@@ -1,6 +1,6 @@
 @use '../mixins' as *;
-@import 'normalize';
-@import 'typography';
+@forward 'normalize';
+@forward 'typography';
 
 *,
 *:before,