@reuters-graphics/graphics-components 1.1.7 → 2.0.1

package/dist/actions/cssVariables/cssVariables.mdx

@@ -3,8 +3,6 @@ import { parameters } from '../../docs/utils/docsPage.js';
 
 <Meta title="Actions/cssVariables" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # `cssVariables`
 
 An action you can use to easily set [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) on HTML elements. Useful for passing JavaScript values to your component SCSS like this:

package/dist/actions/resizeObserver/resizeObserver.mdx

@@ -3,8 +3,6 @@ import { parameters } from '../../docs/utils/docsPage.js';
 
 <Meta title="Actions/resizeObserver" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # `resizeObserver`
 
 An action you can use to easily to check when a DOM element's dimensions change using the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). Use it like this:

package/dist/components/AdSlot/InlineAd.stories.svelte

@@ -1,14 +1,16 @@
-<script>import { Template, Story, Meta } from "@storybook/addon-svelte-csf";
+<script context="module">import InlineAd from "./InlineAd.svelte";
 import adDocs from "./stories/docs/inline.md?raw";
-import AdScripts from "./AdScripts.svelte";
-import InlineAd from "./InlineAd.svelte";
 import { withComponentDocs } from "./../../docs/utils/withParams";
-const meta = {
+export const meta = {
+  title: "Components/Ads & analytics/InlineAd",
+  component: InlineAd,
   ...withComponentDocs(adDocs)
 };
 </script>
 
-<Meta title="Components/InlineAd" component="{InlineAd}" {...meta} />
+<script>import { Template, Story } from "@storybook/addon-svelte-csf";
+import AdScripts from "./AdScripts.svelte";
+</script>
 
 <Template>
   <div>

package/dist/components/AdSlot/InlineAd.stories.svelte.d.ts

@@ -1,4 +1,11 @@
 import { SvelteComponent } from "svelte";
+export declare const meta: {
+    parameters: {
+        docs: any;
+    };
+    title: string;
+    component: typeof InlineAd;
+};
 declare const __propDef: {
     props: Record<string, never>;
     events: {

package/dist/components/AdSlot/InlineAd.svelte

@@ -1,4 +1,4 @@
-<!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) -->
+<!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-inlinead--docs) -->
 <script>import Block from "../Block/Block.svelte";
 import ResponsiveAd from "./ResponsiveAd.svelte";
 export let id = "";

package/dist/components/AdSlot/InlineAd.svelte.d.ts

@@ -15,7 +15,7 @@ declare const __propDef: {
 export type InlineAdProps = typeof __propDef.props;
 export type InlineAdEvents = typeof __propDef.events;
 export type InlineAdSlots = typeof __propDef.slots;
-/** `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) */
+/** `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-inlinead--docs) */
 export default class InlineAd extends SvelteComponent<InlineAdProps, InlineAdEvents, InlineAdSlots> {
 }
 export {};

package/dist/components/AdSlot/LeaderboardAd.stories.svelte

@@ -1,21 +1,18 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import adDocs from './stories/docs/leaderboard.md?raw';
+<script context="module">import LeaderboardAd from "./LeaderboardAd.svelte";
+import adDocs from "./stories/docs/leaderboard.md?raw";
+import { withComponentDocs } from "./../../docs/utils/withParams";
+export const meta = {
+  title: "Components/Ads & analytics/LeaderboardAd",
+  component: LeaderboardAd,
+  ...withComponentDocs(adDocs)
+};
+</script>
 
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
   import AdScripts from './AdScripts.svelte';
-  import LeaderboardAd from './LeaderboardAd.svelte';
-
-  import { withComponentDocs } from './../../docs/utils/withParams';
-
-  const meta = {
-    ...withComponentDocs(adDocs),
-  };
 </script>
 
-<Meta title="Components/LeaderboardAd" component="{LeaderboardAd}" {...meta} />
-
 <Template>
   <div>
     <AdScripts />

package/dist/components/AdSlot/LeaderboardAd.stories.svelte.d.ts

@@ -1,25 +1,23 @@
-/** @typedef {typeof __propDef.props}  LeaderboardAdProps */
-/** @typedef {typeof __propDef.events}  LeaderboardAdEvents */
-/** @typedef {typeof __propDef.slots}  LeaderboardAdSlots */
-export default class LeaderboardAd extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LeaderboardAdProps = typeof __propDef.props;
-export type LeaderboardAdEvents = typeof __propDef.events;
-export type LeaderboardAdSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof LeaderboardAd;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type LeaderboardAdProps = typeof __propDef.props;
+export type LeaderboardAdEvents = typeof __propDef.events;
+export type LeaderboardAdSlots = typeof __propDef.slots;
+export default class LeaderboardAd extends SvelteComponent<LeaderboardAdProps, LeaderboardAdEvents, LeaderboardAdSlots> {
+}
 export {};

package/dist/components/AdSlot/LeaderboardAd.svelte

@@ -1,4 +1,4 @@
-<!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-LeaderboardAd--default) -->
+<!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-leaderboardad--docs) -->
 <script>import ResponsiveAd from "./ResponsiveAd.svelte";
 import { onMount } from "svelte";
 export let id = "";

package/dist/components/AdSlot/LeaderboardAd.svelte.d.ts

@@ -14,7 +14,7 @@ declare const __propDef: {
 export type LeaderboardAdProps = typeof __propDef.props;
 export type LeaderboardAdEvents = typeof __propDef.events;
 export type LeaderboardAdSlots = typeof __propDef.slots;
-/** `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-LeaderboardAd--default) */
+/** `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-leaderboardad--docs) */
 export default class LeaderboardAd extends SvelteComponent<LeaderboardAdProps, LeaderboardAdEvents, LeaderboardAdSlots> {
 }
 export {};

package/dist/components/AdSlot/SponsorshipAd.stories.svelte

@@ -1,21 +1,19 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+<script context="module">import SponsorshipAd from "./SponsorshipAd.svelte";
+import adDocs from "./stories/docs/sponsorship.md?raw";
+import { withComponentDocs } from "./../../docs/utils/withParams";
+export const meta = {
+  title: "Components/Ads & analytics/SponsorshipAd",
+  component: SponsorshipAd,
+  ...withComponentDocs(adDocs)
+};
+</script>
 
-  // @ts-ignore raw
-  import adDocs from './stories/docs/sponsorship.md?raw';
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
 
   import AdScripts from './AdScripts.svelte';
-  import SponsorshipAd from './SponsorshipAd.svelte';
-
-  import { withComponentDocs } from './../../docs/utils/withParams';
-
-  const meta = {
-    ...withComponentDocs(adDocs),
-  };
 </script>
 
-<Meta title="Components/SponsorshipAd" component="{SponsorshipAd}" {...meta} />
-
 <Template>
   <div>
     <AdScripts />

package/dist/components/AdSlot/SponsorshipAd.stories.svelte.d.ts

@@ -1,25 +1,23 @@
-/** @typedef {typeof __propDef.props}  SponsorshipAdProps */
-/** @typedef {typeof __propDef.events}  SponsorshipAdEvents */
-/** @typedef {typeof __propDef.slots}  SponsorshipAdSlots */
-export default class SponsorshipAd extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SponsorshipAdProps = typeof __propDef.props;
-export type SponsorshipAdEvents = typeof __propDef.events;
-export type SponsorshipAdSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof SponsorshipAd;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type SponsorshipAdProps = typeof __propDef.props;
+export type SponsorshipAdEvents = typeof __propDef.events;
+export type SponsorshipAdSlots = typeof __propDef.slots;
+export default class SponsorshipAd extends SvelteComponent<SponsorshipAdProps, SponsorshipAdEvents, SponsorshipAdSlots> {
+}
 export {};

package/dist/components/AdSlot/SponsorshipAd.svelte

@@ -1,4 +1,4 @@
-<!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) -->
+<!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-sponsorshipad--docs) -->
 <script>import Block from "../Block/Block.svelte";
 import ResponsiveAd from "./ResponsiveAd.svelte";
 export let id = "";

package/dist/components/AdSlot/SponsorshipAd.svelte.d.ts

@@ -17,7 +17,7 @@ declare const __propDef: {
 export type SponsorshipAdProps = typeof __propDef.props;
 export type SponsorshipAdEvents = typeof __propDef.events;
 export type SponsorshipAdSlots = typeof __propDef.slots;
-/** `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) */
+/** `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-sponsorshipad--docs) */
 export default class SponsorshipAd extends SvelteComponent<SponsorshipAdProps, SponsorshipAdEvents, SponsorshipAdSlots> {
 }
 export {};

package/dist/components/Analytics/Analytics.stories.svelte

@@ -1,23 +1,18 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import environmentsDocs from './stories/docs/environments.md?raw';
-  // @ts-ignore raw
-  import multipageDocs from './stories/docs/multipage.md?raw';
-
-  import Analytics from './Analytics.svelte';
-
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
+<script context="module">import Analytics from "./Analytics.svelte";
+import componentDocs from "./stories/docs/component.md?raw";
+import environmentsDocs from "./stories/docs/environments.md?raw";
+import multipageDocs from "./stories/docs/multipage.md?raw";
+import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Ads & analytics/Analytics",
+  component: Analytics,
+  ...withComponentDocs(componentDocs)
+};
 </script>
 
-<Meta
-  title="Components/Analytics"
-  component="{Analytics}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <Analytics {...args} />

package/dist/components/Analytics/Analytics.stories.svelte.d.ts

@@ -1,25 +1,23 @@
-/** @typedef {typeof __propDef.props}  AnalyticsProps */
-/** @typedef {typeof __propDef.events}  AnalyticsEvents */
-/** @typedef {typeof __propDef.slots}  AnalyticsSlots */
-export default class Analytics extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type AnalyticsProps = typeof __propDef.props;
-export type AnalyticsEvents = typeof __propDef.events;
-export type AnalyticsSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof Analytics;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type AnalyticsProps = typeof __propDef.props;
+export type AnalyticsEvents = typeof __propDef.events;
+export type AnalyticsSlots = typeof __propDef.slots;
+export default class Analytics extends SvelteComponent<AnalyticsProps, AnalyticsEvents, AnalyticsSlots> {
+}
 export {};

package/dist/components/Analytics/Analytics.svelte

@@ -11,7 +11,7 @@
   }
 </script>
 
-<!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Analytics--default) -->
+<!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) -->
 <script>export let authors = [];
 import { onMount } from "svelte";
 import { ga, chartbeat, parsely } from "./providers";

package/dist/components/Analytics/Analytics.svelte.d.ts

@@ -19,7 +19,7 @@ declare const __propDef: {
 export type AnalyticsProps = typeof __propDef.props;
 export type AnalyticsEvents = typeof __propDef.events;
 export type AnalyticsSlots = typeof __propDef.slots;
-/** `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Analytics--default) */
+/** `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) */
 export default class Analytics extends SvelteComponent<AnalyticsProps, AnalyticsEvents, AnalyticsSlots> {
 }
 export {};

package/dist/components/Article/Article.stories.svelte

@@ -1,19 +1,17 @@
-<script>import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+<script context="module">import Article from "./Article.svelte";
 import componentDocs from "./stories/docs/component.md?raw";
 import customWellWidthsDocs from "./stories/docs/customWellWidths.md?raw";
-import Article from "./Article.svelte";
-import Block from "../Block/Block.svelte";
-import {
-  withComponentDocs,
-  withStoryDocs
-} from "../../docs/utils/withParams.js";
+import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Page Layout/Article",
+  component: Article,
+  ...withComponentDocs(componentDocs)
+};
 </script>
 
-<Meta
-  title="Layout/Article"
-  component="{Article}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>import { Template, Story } from "@storybook/addon-svelte-csf";
+import Block from "../Block/Block.svelte";
+</script>
 
 <Template let:args>
   <Article {...args} />

package/dist/components/Article/Article.stories.svelte.d.ts

@@ -1,4 +1,11 @@
 import { SvelteComponent } from "svelte";
+export declare const meta: {
+    parameters: {
+        docs: any;
+    };
+    title: string;
+    component: typeof Article;
+};
 declare const __propDef: {
     props: Record<string, never>;
     events: {

package/dist/components/Article/Article.svelte

@@ -1,4 +1,4 @@
-<!-- @component `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-article--default) -->
+<!-- @component `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-article--docs) -->
 <script>export let embedded = false;
 export let id = null;
 export let role = null;

package/dist/components/Article/Article.svelte.d.ts

@@ -29,7 +29,7 @@ declare const __propDef: {
 export type ArticleProps = typeof __propDef.props;
 export type ArticleEvents = typeof __propDef.events;
 export type ArticleSlots = typeof __propDef.slots;
-/** `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-article--default) */
+/** `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-article--docs) */
 export default class Article extends SvelteComponent<ArticleProps, ArticleEvents, ArticleSlots> {
 }
 export {};

package/dist/components/BeforeAfter/BeforeAfter.stories.svelte

@@ -1,39 +1,31 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import withOverlaysDocs from './stories/docs/withOverlays.md?raw';
-  // @ts-ignore raw
-  import ariaDescriptionsDocs from './stories/docs/ariaDescriptions.md?raw';
+<script context="module">import BeforeAfter from "./BeforeAfter.svelte";
+import componentDocs from "./stories/docs/component.md?raw";
+import withOverlaysDocs from "./stories/docs/withOverlays.md?raw";
+import ariaDescriptionsDocs from "./stories/docs/ariaDescriptions.md?raw";
+import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Graphics/BeforeAfter",
+  component: BeforeAfter,
+  ...withComponentDocs(componentDocs),
+  argTypes: {
+    handleColour: { control: "color" },
+    width: {
+      control: "select",
+      options: ["normal", "wide", "wider", "widest", "fluid"]
+    }
+  }
+};
+</script>
 
-  import BeforeAfter from './BeforeAfter.svelte';
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
 
   // @ts-ignore raw
   import beforeImg from './stories/myrne-before.jpg';
   // @ts-ignore raw
   import afterImg from './stories/myrne-after.jpg';
-
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '../../lib/docs/utils/withParams.js';
-
-  const metaProps = {
-    ...withComponentDocs(componentDocs),
-    argTypes: {
-      handleColour: { control: 'color' },
-      width: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
-      },
-    },
-  };
 </script>
 
-<Meta title="Components/BeforeAfter" component="{BeforeAfter}" {...metaProps} />
-
 <Template let:args>
   <BeforeAfter {...args} />
 </Template>

package/dist/components/BeforeAfter/BeforeAfter.stories.svelte.d.ts

@@ -1,25 +1,32 @@
-/** @typedef {typeof __propDef.props}  BeforeAfterProps */
-/** @typedef {typeof __propDef.events}  BeforeAfterEvents */
-/** @typedef {typeof __propDef.slots}  BeforeAfterSlots */
-export default class BeforeAfter extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type BeforeAfterProps = typeof __propDef.props;
-export type BeforeAfterEvents = typeof __propDef.events;
-export type BeforeAfterSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    argTypes: {
+        handleColour: {
+            control: string;
+        };
+        width: {
+            control: string;
+            options: string[];
+        };
+    };
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof BeforeAfter;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type BeforeAfterProps = typeof __propDef.props;
+export type BeforeAfterEvents = typeof __propDef.events;
+export type BeforeAfterSlots = typeof __propDef.slots;
+export default class BeforeAfter extends SvelteComponent<BeforeAfterProps, BeforeAfterEvents, BeforeAfterSlots> {
+}
 export {};

package/dist/components/BeforeAfter/BeforeAfter.svelte

@@ -1,4 +1,4 @@
-<!-- @component `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-beforeafter--default) -->
+<!-- @component `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-beforeafter--docs) -->
 <script>import { throttle } from "lodash-es";
 import { onMount } from "svelte";
 import Block from "../Block/Block.svelte";

package/dist/components/BeforeAfter/BeforeAfter.svelte.d.ts

@@ -58,7 +58,7 @@ declare const __propDef: {
 export type BeforeAfterProps = typeof __propDef.props;
 export type BeforeAfterEvents = typeof __propDef.events;
 export type BeforeAfterSlots = typeof __propDef.slots;
-/** `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-beforeafter--default) */
+/** `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-beforeafter--docs) */
 export default class BeforeAfter extends SvelteComponent<BeforeAfterProps, BeforeAfterEvents, BeforeAfterSlots> {
 }
 export {};

package/dist/components/Block/Block.stories.svelte

@@ -1,42 +1,34 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import customLayoutsDocs from './stories/docs/customLayouts.md?raw';
-  // @ts-ignore raw
-  import snapWidthsDocs from './stories/docs/snapWidths.md?raw';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import customLayoutsDocs from "./stories/docs/customLayouts.md?raw";
+import snapWidthsDocs from "./stories/docs/snapWidths.md?raw";
+import Block from "./Block.svelte";
+import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Page layout/Block",
+  component: Block,
+  ...withComponentDocs(componentDocs),
+  argTypes: {
+    width: {
+      control: "select",
+      options: [
+        "narrower",
+        "narrow",
+        "normal",
+        "wide",
+        "wider",
+        "widest",
+        "fluid"
+      ]
+    }
+  }
+};
+</script>
 
-  import Block from './Block.svelte';
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
   import Article from '../Article/Article.svelte';
-
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '../../docs/utils/withParams.js';
-
-  const metaProps = {
-    ...withComponentDocs(componentDocs),
-    argTypes: {
-      width: {
-        control: 'select',
-        options: [
-          'narrower',
-          'narrow',
-          'normal',
-          'wide',
-          'wider',
-          'widest',
-          'fluid',
-        ],
-      },
-    },
-  };
 </script>
 
-<Meta title="Layout/Block" component="{Block}" {...metaProps} />
-
 <Template let:args>
   <Article id="block-demo-article">
     <div class="article-boundaries">