diff --git a/bin/buildPackage/index.js b/bin/buildPackage/index.js
index dbb45301..e5db6483 100644
--- a/bin/buildPackage/index.js
+++ b/bin/buildPackage/index.js
@@ -28,6 +28,15 @@ const excludedTypeDefs = [
   '**/*.stories.svelte.d.ts',
 ];
 
+
+const prettifyImport = (filename) => {
+  return filename
+    // strip index.js
+    .replace(/\/index\.js$|(\/[^/]+)\.js$/, '$1')
+    // normalize SCSS partials
+    .replace(/_(.*)\.scss$/, '$1');
+};
+
 /**
  * This is a basic port of sveltekit's own packaging method:
  * https://github.com/sveltejs/kit/tree/master/packages/kit/src/packaging
@@ -65,7 +74,7 @@ const build = async () => {
       await processOther(file);
     }
     if (file === 'index.js') continue; // Always add root index last to exports...
-    pkgExports[`./${file.replace(/\/index\.js$|(\/[^/]+)\.js$/, '$1')}`] = `./dist/${file}`;
+    pkgExports[`./${prettifyImport(file)}`] = `./dist/${file}`;
   }
   pkgExports['.'] = './dist/index.js';
   const pkg = fs.readJSONSync(PACKAGE);
diff --git a/src/components/Article/Article.stories.svelte b/src/components/Article/Article.stories.svelte
index d273e48f..b62b8c60 100644
--- a/src/components/Article/Article.stories.svelte
+++ b/src/components/Article/Article.stories.svelte
@@ -10,7 +10,10 @@
   import Article from './Article.svelte';
   import Block from '../Block/Block.svelte';
 
-  import { withComponentDocs, withStoryDocs } from '$lib/docs/utils/withParams.js';
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '$lib/docs/utils/withParams.js';
 
   const meta = {
     title: 'Layout/Article',
@@ -40,10 +43,7 @@
   </Article>
 </Story>
 
-<Story
-  name="Custom columns"
-  {...withStoryDocs(customWellWidthsDocs)}
->
+<Story name="Custom columns" {...withStoryDocs(customWellWidthsDocs)}>
   <Article id="article-column-widths-demo">
     <div class="article-boundaries">
       <Block id="section-demo" width="narrower">narrower</Block>
@@ -55,7 +55,16 @@
       <Block id="section-demo" width="fluid">fluid</Block>
     </div>
   </Article>
-  <Article id="article-column-widths-demo" columnWidths={{ narrower: 310, narrow: 450, normal: 550, wide: 675, wider: 1400 }}>
+  <Article
+    id="article-column-widths-demo"
+    columnWidths="{{
+      narrower: 310,
+      narrow: 450,
+      normal: 550,
+      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>
@@ -79,7 +88,7 @@
       background-color: #ddd;
       position: relative;
       margin-bottom: 10px;
-      
+
       .article-boundaries {
         padding: 0;
         width: 100%;
@@ -124,4 +133,4 @@
       }
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte
index 5c1d4a4f..2efb6060 100644
--- a/src/components/BeforeAfter/BeforeAfter.stories.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@@ -17,7 +17,7 @@
 
   import {
     withComponentDocs,
-    withStoryDocs
+    withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
 
   const meta = {
diff --git a/src/components/BodyText/BodyText.stories.svelte b/src/components/BodyText/BodyText.stories.svelte
index 40e0c472..ccc9c3c8 100644
--- a/src/components/BodyText/BodyText.stories.svelte
+++ b/src/components/BodyText/BodyText.stories.svelte
@@ -6,9 +6,7 @@
 
   import BodyText from './BodyText.svelte';
 
-  import {
-    withComponentDocs
-  } from '$lib/docs/utils/withParams.js';
+  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
   const meta = {
     title: 'Components/BodyText',
@@ -25,7 +23,7 @@
 
 <Story
   name="Default"
-  args={{
+  args="{{
     text: `Bacon ipsum **dolor amet** cow tongue tri-tip.
   
   Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
@@ -35,5 +33,5 @@
   - Fillet
   
   Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`,
-  }}
+  }}"
 />
diff --git a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
index 53fd8192..5e790637 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
@@ -10,7 +10,7 @@
 
   import {
     withComponentDocs,
-    withStoryDocs
+    withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
 
   const meta = {
@@ -34,23 +34,22 @@
 
 <Story
   name="Default"
-  args={{
+  args="{{
     src: 'https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html',
     id: 'abortion-rights-map',
     ariaLabel: 'map',
     frameTitle: 'Global abortion access',
-  }}
+  }}"
 />
 
 <Story name="With chatter" {...withStoryDocs(withChatterDocs)}>
   <DatawrapperChart
-    frameTitle='Global abortion access'
-    ariaLabel='map'
-    id='abortion-rights-map'
-    src='https://graphics.reuters.com/USA-ABORTION/lgvdwemlbpo/media-embed.html'
+    frameTitle="Global abortion access"
+    ariaLabel="map"
+    id="abortion-rights-map"
+    src="https://graphics.reuters.com/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.\n\nSource: Center for Reproductive Rights'}
-  >
-  </DatawrapperChart>
-</Story>
\ No newline at end of file
+    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.\n\nSource: Center for Reproductive Rights'}"
+  />
+</Story>