@reuters-graphics/graphics-components 0.0.1-beta.1 → 0.0.1-beta.12

package/README.md

@@ -2,6 +2,8 @@
 
 # ⚙️ graphics-components
 
+[![npm version](https://badge.fury.io/js/@reuters-graphics%2Fgraphics-components.svg)](https://badge.fury.io/js/@reuters-graphics%2Fgraphics-components)
+
 Svelte components, SCSS and more for Reuters Graphics pages.
 
 [Read the docs.](https://reuters-graphics.github.io/graphics-components/)

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

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         /** Set to true for embeddables. */ embedded?: boolean;
         /** Add an id to the article tag to target it with custom CSS. */ id?: string | null;
-        /** ARIA role of the article. */ role?: string | null;
+        /** ARIA role of the article */ role?: string | null;
         /** Set custom widths for the normal, wide and wider column dimensions */ columnWidths?: {
             /** Narrower column width */
             narrower: number;

package/dist/@types/components/PaddingReset/PaddingReset.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  PaddingResetProps */
+/** @typedef {typeof __propDef.events}  PaddingResetEvents */
+/** @typedef {typeof __propDef.slots}  PaddingResetSlots */
+export default class PaddingReset extends SvelteComponentTyped<{
+    containerIsFluid?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type PaddingResetProps = typeof __propDef.props;
+export type PaddingResetEvents = typeof __propDef.events;
+export type PaddingResetSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        containerIsFluid?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/components/SEO/SEO.svelte.d.ts

@@ -1,6 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        /**
+           * [URL origin](https://developer.mozilla.org/en-US/docs/Web/API/URL/origin) for the page.
+           * @required
+           * @type {string}
+           */ origin?: string;
         /**
            * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
            * @required

package/dist/@types/index.d.ts

@@ -10,6 +10,8 @@ export { default as GraphicBlock } from "./components/GraphicBlock/GraphicBlock.
 export { default as Headline } from "./components/Headline/Headline.svelte";
 export { default as Hero } from "./components/Hero/Hero.svelte";
 export { default as NoteText } from "./components/NoteText/NoteText.svelte";
+export { default as PaddingReset } from "./components/PaddingReset/PaddingReset.svelte";
+export { default as PhotoPack } from "./components/PhotoPack/PhotoPack.svelte";
 export { default as PymChild } from "./components/PymChild/PymChild.svelte";
 export { default as ReutersLogo } from "./components/ReutersLogo/ReutersLogo.svelte";
 export { default as Scroller } from "./components/Scroller/Scroller.svelte";
@@ -20,5 +22,5 @@ export { default as SiteHeader } from "./components/SiteHeader/SiteHeader.svelte
 export { default as Spinner } from "./components/Spinner/Spinner.svelte";
 export { default as Video } from "./components/Video/Video.svelte";
 export { default as Visible } from "./components/Visible/Visible.svelte";
-export { getPhotoPackPropsFromDoc } from "./components/PhotoPack/docProps";
+export { getPhotoPackPropsFromDoc } from "./components/PhotoPack/docProps.js";
 export { default as Theme, themes } from "./components/Theme/Theme.svelte";

package/dist/components/Article/Article.svelte

@@ -2,7 +2,7 @@
 export let embedded = false;
 /** Add an id to the article tag to target it with custom CSS. */
 export let id = null;
-/** ARIA role of the article. */
+/** ARIA role of the article */
 export let role = null;
 /** Set custom widths for the normal, wide and wider column dimensions */
 export let columnWidths = {
@@ -12,7 +12,7 @@ export let columnWidths = {
     wide: 930,
     wider: 1200,
 };
-import cssVariables from '$lib/actions/cssVariables/index.js';
+import cssVariables from '../../actions/cssVariables/index.js';
 $: columnWidthVars = {
     'narrower-column-width': columnWidths.narrower + 'px',
     'narrow-column-width': columnWidths.narrow + 'px',

package/dist/components/BeforeAfter/BeforeAfter.svelte

@@ -1,6 +1,7 @@
 <script>import { throttle } from 'lodash-es';
 import { onMount } from 'svelte';
 import Block from '../Block/Block.svelte';
+import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 /** Width of the chart within the text well. */
 export let width = 'normal'; // options: wide, wider, widest, fluid
 /** Height of the component */
@@ -205,10 +206,12 @@ onMount(() => {
       </figure>
     </div>
     {#if $$slots.caption}
-      <aside class="before-after-caption" id="{`${id}-caption`}">
-        <!-- Caption for image credits -->
-        <slot name="caption" />
-      </aside>
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
+        <aside class="before-after-caption" id="{`${id}-caption`}">
+          <!-- Caption for image credits -->
+          <slot name="caption" />
+        </aside>
+      </PaddingReset>
     {/if}
   </Block>
 {/if}

package/dist/components/FeaturePhoto/FeaturePhoto.svelte

@@ -1,5 +1,6 @@
 <script>import { onMount } from 'svelte';
 import Block from '../Block/Block.svelte';
+import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 /**
  * Photo src
  * @type {string}
@@ -60,18 +61,16 @@ onMount(() => {
 </script>
 
 <Block width="{width}" cls="photo">
-  <figure
-    bind:this="{container}"
-    aria-label="media"
-    class:fluid="{width === 'fluid'}"
-  >
+  <figure bind:this="{container}" aria-label="media">
     {#if !lazy || (intersectable && intersecting)}
       <img src="{src}" alt="{altText}" />
     {:else}
       <div class="placeholder" height="{`${height}px`}"></div>
     {/if}
     {#if caption}
-      <figcaption>{caption}</figcaption>
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
+        <figcaption>{caption}</figcaption>
+      </PaddingReset>
     {/if}
     {#if !altText}
       <div class="alt-warning">altText</div>
@@ -107,7 +106,4 @@ figure figcaption {
   font-size: 0.8rem;
   font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
   color: var(--theme-colour-text-secondary, #666666);
-}
-figure.fluid figcaption {
-  padding-left: 15px;
 }</style>

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -55,7 +55,7 @@ export let ariaDescription = null;
 import AriaHidden from './AriaHidden.svelte';
 import TextBlock from './TextBlock.svelte';
 import Block from '../Block/Block.svelte';
-import PaddingReset from '../PaddingReset/index.svelte';
+import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 import { marked } from 'marked';
 </script>
 
@@ -69,14 +69,14 @@ import { marked } from 'marked';
 >
   <div>
     {#if $$slots.title}
-      <PaddingReset width="{width}">
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
           <!-- Custom title content -->
           <slot name="title" />
         </TextBlock>
       </PaddingReset>
     {:else if title}
-      <PaddingReset width="{width}">
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
           <h3>{title}</h3>
           {#if description}
@@ -100,14 +100,14 @@ import { marked } from 'marked';
       </div>
     {/if}
     {#if $$slots.notes}
-      <PaddingReset width="{width}">
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
           <!-- Custom notes content -->
           <slot name="notes" />
         </TextBlock>
       </PaddingReset>
     {:else if notes}
-      <PaddingReset width="{width}">
+      <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
           <aside>
             {@html marked(notes)}

package/dist/components/NoteText/NoteText.svelte

@@ -8,7 +8,7 @@ import { marked } from 'marked';
 import Block from '../Block/Block.svelte';
 </script>
 
-<Block cls="notes">
+<Block cls="notes mb-4">
   {#if text}
     {@html marked.parse(text)}
   {/if}

package/dist/components/PaddingReset/PaddingReset.svelte

@@ -0,0 +1,22 @@
+<script>
+  /**
+   * If parent container is fluid, which resets the padding around contained elements.
+   */
+  export let containerIsFluid = true;
+</script>
+
+{#if containerIsFluid}
+  <div>
+    <!-- Padded content -->
+    <slot />
+  </div>
+{:else}
+  <!-- Padded content -->
+  <slot />
+{/if}
+
+<style>
+  div {
+    width: 100%;
+    padding: 0 15px;
+  }</style>

package/dist/components/PhotoPack/PhotoPack.svelte

@@ -36,7 +36,7 @@ export let width = 'normal';
  */
 export let captionWidth = 'normal';
 import Block from '../Block/Block.svelte';
-import PaddingReset from '../PaddingReset/index.svelte';
+import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 import { marked } from 'marked';
 let containerWidth;
 const groupRows = (images, layout) => {
@@ -89,7 +89,7 @@ $: rows = groupRows(images, layout);
       </div>
     {/each}
   </div>
-  <PaddingReset width="{width}">
+  <PaddingReset containerIsFluid="{width === 'fluid'}">
     <Block width="{captionWidth}">
       <div class="captions-container">
         {#each rows as row, ri}

package/dist/components/SEO/SEO.svelte

@@ -1,5 +1,11 @@
 <script>import analytics from './analytics';
 import publisherTags from './publisherTags';
+/**
+ * [URL origin](https://developer.mozilla.org/en-US/docs/Web/API/URL/origin) for the page.
+ * @required
+ * @type {string}
+ */
+export let origin = '';
 /**
  * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
  * @required
@@ -59,9 +65,10 @@ export let authors = [];
  * Whether to inject Google Analytics code for this page.
  */
 export let includeAnalytics = false;
+$: canonicalUrl = origin + url.pathname;
 // Only fire analytics on prod sites
 if (typeof window !== 'undefined' && includeAnalytics) {
-    analytics(url, seoTitle);
+    analytics(canonicalUrl, seoTitle);
     publisherTags();
 }
 const orgLdJson = {
@@ -81,10 +88,10 @@ const articleLdJson = {
     '@context': 'http://schema.org',
     '@type': 'NewsArticle',
     headline: seoTitle,
-    url: url.href,
+    url: canonicalUrl,
     mainEntityOfPage: {
         '@type': 'WebPage',
-        '@id': url.href,
+        '@id': canonicalUrl,
     },
     thumbnailUrl: shareImgPath,
     image: [
@@ -117,7 +124,7 @@ const articleLdJson = {
   <html lang="{lang}"></html>
   <title>{seoTitle}</title>
   <meta name="description" content="{seoDescription}" />
-  <link rel="canonical" href="{url.href}" />
+  <link rel="canonical" href="{canonicalUrl}" />
   <link
     rel="shortcut icon"
     type="image/x-icon"
@@ -142,7 +149,7 @@ const articleLdJson = {
     sizes="96x96"
   />
 
-  <meta property="og:url" content="{url.href}" />
+  <meta property="og:url" content="{canonicalUrl}" />
   <meta property="og:type" content="article" />
   <meta property="og:title" content="{shareTitle}" itemprop="name" />
   <meta
@@ -150,17 +157,13 @@ const articleLdJson = {
     content="{shareDescription}"
     itemprop="description"
   />
-  <meta
-    property="og:image"
-    content="{shareImgPath}"
-    itemprop="image"
-  />
+  <meta property="og:image" content="{shareImgPath}" itemprop="image" />
   <meta property="og:site_name" content="Reuters" />
 
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:site" content="@ReutersGraphics" />
   <meta name="twitter:creator" content="@ReutersGraphics" />
-  <meta name="twitter:domain" content="{url.origin}" />
+  <meta name="twitter:domain" content="{origin}" />
   <meta name="twitter:title" content="{shareTitle}" />
   <meta name="twitter:description" content="{shareDescription}" />
   <meta name="twitter:image:src" content="{shareImgPath}" />

package/dist/components/SiteFooter/SiteFooter.svelte

@@ -10,6 +10,7 @@ export let referrals = [];
 </script>
 
 <footer
+  class="my-0"
   style="{`
     --nav-background: var(--theme-colour-background, #fff);
     --nav-primary: var(--theme-colour-text-primary, #404040);
@@ -26,7 +27,7 @@ export let referrals = [];
 
 <!-- svelte-ignore css-unused-selector -->
 <style>footer {
-  margin-top: 4rem;
+  margin-top: 0;
   background-color: var(--nav-background, #fff);
 }
 footer div {

package/dist/components/SiteHeader/MobileMenu/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { ReutersLogo } from '../../../index.js';
+  import ReutersLogo from '../../ReutersLogo/ReutersLogo.svelte';
   import CloseIcon from '../svgs/Close.svelte';
   import { normalizeUrl } from '../NavBar/utils/index.js';
 

package/dist/components/SiteHeader/SiteHeader.svelte

@@ -1,4 +1,4 @@
-<script>import { ReutersLogo } from '../../index.js';
+<script>import ReutersLogo from '../ReutersLogo/ReutersLogo.svelte';
 import NavBar from './NavBar/index.svelte';
 import data from './data.json';
 import { setContext } from 'svelte';

package/dist/components/Theme/Theme.svelte

@@ -17,18 +17,16 @@ export let theme = {};
  * explicitly set.
  */
 export let base = 'light';
-import cssVariables from '../../actions/cssVariables';
 import flatten from './utils/flatten';
 import mergeThemes from './utils/merge';
 /** @type {Theme} */
 $: mergedTheme = mergeThemes({}, themes[base] || themes.light, theme);
+$: cssVariables = Object.entries(flatten({ theme: mergedTheme }))
+    .map(([key, value]) => `--${key}: ${value};`)
+    .join(' ');
 </script>
 
-<div
-  class="theme"
-  style="display: contents;"
-  use:cssVariables="{flatten({ theme: mergedTheme })}"
->
+<div class="theme" style="{cssVariables}" style:display="contents">
   <!-- Clients can override the theme above by attaching custom properties to this element. -->
   <div class="theme-client-override" style="display: contents;">
     <!-- Themed content -->

package/dist/index.js

@@ -11,6 +11,8 @@ export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.
 export { default as Headline } from './components/Headline/Headline.svelte';
 export { default as Hero } from './components/Hero/Hero.svelte';
 export { default as NoteText } from './components/NoteText/NoteText.svelte';
+export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
+export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
 export { default as Scroller } from './components/Scroller/Scroller.svelte';
@@ -28,4 +30,4 @@ export { default as Video } from './components/Video/Video.svelte';
 export { default as Visible } from './components/Visible/Visible.svelte';
 
 // Utilities
-export { getPhotoPackPropsFromDoc } from './components/PhotoPack/docProps';
+export { getPhotoPackPropsFromDoc } from './components/PhotoPack/docProps.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.12",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -11,7 +11,8 @@
     "build:package": "node ./bin/buildPackage/index.js",
     "build:docs": "build-storybook -o docs && touch ./docs/.nojekyll",
     "build": "npm-run-all build:package build:docs",
-    "prepublishOnly": "npm run build:package"
+    "prepublishOnly": "npm run build:package",
+    "postversion": "git push origin && git push origin --tags"
   },
   "license": "MIT",
   "types": "dist/@types/index.d.ts",
@@ -112,7 +113,7 @@
     "./components/Headline/Headline.svelte": "./dist/components/Headline/Headline.svelte",
     "./components/Hero/Hero.svelte": "./dist/components/Hero/Hero.svelte",
     "./components/NoteText/NoteText.svelte": "./dist/components/NoteText/NoteText.svelte",
-    "./components/PaddingReset/index.svelte": "./dist/components/PaddingReset/index.svelte",
+    "./components/PaddingReset/PaddingReset.svelte": "./dist/components/PaddingReset/PaddingReset.svelte",
     "./components/PhotoPack/PhotoPack.svelte": "./dist/components/PhotoPack/PhotoPack.svelte",
     "./components/PhotoPack/docProps.ts": "./dist/components/PhotoPack/docProps.ts",
     "./components/PymChild/PymChild.svelte": "./dist/components/PymChild/PymChild.svelte",
@@ -160,11 +161,11 @@
     "./components/SiteHeader/NavBar/utils": "./dist/components/SiteHeader/NavBar/utils/index.js",
     "./components/SiteHeader/SiteHeader.svelte": "./dist/components/SiteHeader/SiteHeader.svelte",
     "./components/SiteHeader/data.json": "./dist/components/SiteHeader/data.json",
-    "./components/SiteHeader/scss/_breakpoints.scss": "./dist/components/SiteHeader/scss/_breakpoints.scss",
-    "./components/SiteHeader/scss/_colors.scss": "./dist/components/SiteHeader/scss/_colors.scss",
-    "./components/SiteHeader/scss/_eases.scss": "./dist/components/SiteHeader/scss/_eases.scss",
-    "./components/SiteHeader/scss/_grids.scss": "./dist/components/SiteHeader/scss/_grids.scss",
-    "./components/SiteHeader/scss/_z-indexes.scss": "./dist/components/SiteHeader/scss/_z-indexes.scss",
+    "./components/SiteHeader/scss/breakpoints": "./dist/components/SiteHeader/scss/_breakpoints.scss",
+    "./components/SiteHeader/scss/colors": "./dist/components/SiteHeader/scss/_colors.scss",
+    "./components/SiteHeader/scss/eases": "./dist/components/SiteHeader/scss/_eases.scss",
+    "./components/SiteHeader/scss/grids": "./dist/components/SiteHeader/scss/_grids.scss",
+    "./components/SiteHeader/scss/z-indexes": "./dist/components/SiteHeader/scss/_z-indexes.scss",
     "./components/SiteHeader/svgs/Close.svelte": "./dist/components/SiteHeader/svgs/Close.svelte",
     "./components/SiteHeader/svgs/Menu.svelte": "./dist/components/SiteHeader/svgs/Menu.svelte",
     "./components/Spinner/Spinner.svelte": "./dist/components/Spinner/Spinner.svelte",
@@ -177,34 +178,35 @@
     "./components/Video/Controls.svelte": "./dist/components/Video/Controls.svelte",
     "./components/Video/Video.svelte": "./dist/components/Video/Video.svelte",
     "./components/Visible/Visible.svelte": "./dist/components/Visible/Visible.svelte",
-    "./scss/_mixins.scss": "./dist/scss/_mixins.scss",
-    "./scss/_variables.scss": "./dist/scss/_variables.scss",
-    "./scss/bootstrap/_main.scss": "./dist/scss/bootstrap/_main.scss",
-    "./scss/bootstrap/_variables.scss": "./dist/scss/bootstrap/_variables.scss",
-    "./scss/colours/thematic/_nord.scss": "./dist/scss/colours/thematic/_nord.scss",
-    "./scss/colours/thematic/_tr.scss": "./dist/scss/colours/thematic/_tr.scss",
-    "./scss/components/_hero-title.scss": "./dist/scss/components/_hero-title.scss",
-    "./scss/fonts/_font-faces.scss": "./dist/scss/fonts/_font-faces.scss",
-    "./scss/fonts/_mixins.scss": "./dist/scss/fonts/_mixins.scss",
-    "./scss/fonts/_rules.scss": "./dist/scss/fonts/_rules.scss",
-    "./scss/fonts/_variables.scss": "./dist/scss/fonts/_variables.scss",
-    "./scss/main.scss": "./dist/scss/main.scss",
-    "./scss/mixins/_block.scss": "./dist/scss/mixins/_block.scss",
-    "./scss/mixins/_body-text.scss": "./dist/scss/mixins/_body-text.scss",
-    "./scss/mixins/_graphic.scss": "./dist/scss/mixins/_graphic.scss",
-    "./scss/mixins/_note-text.scss": "./dist/scss/mixins/_note-text.scss",
-    "./scss/mixins/_visually-hidden.scss": "./dist/scss/mixins/_visually-hidden.scss",
-    "./scss/spacers/_rules.scss": "./dist/scss/spacers/_rules.scss",
-    "./scss/spacers/_variables.scss": "./dist/scss/spacers/_variables.scss",
-    "./scss/typography/_box-shadow.scss": "./dist/scss/typography/_box-shadow.scss",
-    "./scss/typography/_font-size.scss": "./dist/scss/typography/_font-size.scss",
-    "./scss/typography/_letter-spacing.scss": "./dist/scss/typography/_letter-spacing.scss",
-    "./scss/typography/_main.scss": "./dist/scss/typography/_main.scss",
-    "./scss/typography/_mixins.scss": "./dist/scss/typography/_mixins.scss",
-    "./scss/typography/_rules.scss": "./dist/scss/typography/_rules.scss",
-    "./scss/typography/_text-shadow.scss": "./dist/scss/typography/_text-shadow.scss",
-    "./scss/typography/_transform.scss": "./dist/scss/typography/_transform.scss",
-    "./scss/typography/_variables.scss": "./dist/scss/typography/_variables.scss",
+    "./scss/mixins": "./dist/scss/_mixins.scss",
+    "./scss/variables": "./dist/scss/_variables.scss",
+    "./scss/bootstrap/main": "./dist/scss/bootstrap/_main.scss",
+    "./scss/bootstrap/variables": "./dist/scss/bootstrap/_variables.scss",
+    "./scss/colours/thematic/nord": "./dist/scss/colours/thematic/_nord.scss",
+    "./scss/colours/thematic/tr": "./dist/scss/colours/thematic/_tr.scss",
+    "./scss/components/hero-title": "./dist/scss/components/_hero-title.scss",
+    "./scss/fonts/font-faces": "./dist/scss/fonts/_font-faces.scss",
+    "./scss/fonts/mixins": "./dist/scss/fonts/_mixins.scss",
+    "./scss/fonts/rules": "./dist/scss/fonts/_rules.scss",
+    "./scss/fonts/variables": "./dist/scss/fonts/_variables.scss",
+    "./scss/main": "./dist/scss/main.scss",
+    "./scss/mixins/block": "./dist/scss/mixins/_block.scss",
+    "./scss/mixins/body-text": "./dist/scss/mixins/_body-text.scss",
+    "./scss/mixins/graphic": "./dist/scss/mixins/_graphic.scss",
+    "./scss/mixins/note-text": "./dist/scss/mixins/_note-text.scss",
+    "./scss/mixins/visually-hidden": "./dist/scss/mixins/_visually-hidden.scss",
+    "./scss/spacers/rules": "./dist/scss/spacers/_rules.scss",
+    "./scss/spacers/variables": "./dist/scss/spacers/_variables.scss",
+    "./scss/typography/box-shadow": "./dist/scss/typography/_box-shadow.scss",
+    "./scss/typography/font-size": "./dist/scss/typography/_font-size.scss",
+    "./scss/typography/letter-spacing": "./dist/scss/typography/_letter-spacing.scss",
+    "./scss/typography/main": "./dist/scss/typography/_main.scss",
+    "./scss/typography/mixins": "./dist/scss/typography/_mixins.scss",
+    "./scss/typography/rules": "./dist/scss/typography/_rules.scss",
+    "./scss/typography/text-shadow": "./dist/scss/typography/_text-shadow.scss",
+    "./scss/typography/transform": "./dist/scss/typography/_transform.scss",
+    "./scss/typography/variables": "./dist/scss/typography/_variables.scss",
     ".": "./dist/index.js"
-  }
+  },
+  "svelte": "./dist/index.js"
 }

package/dist/@types/components/PaddingReset/index.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  IndexProps */
-/** @typedef {typeof __propDef.events}  IndexEvents */
-/** @typedef {typeof __propDef.slots}  IndexSlots */
-export default class Index extends SvelteComponentTyped<{
-    width?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        width?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/dist/components/PaddingReset/index.svelte

@@ -1,17 +0,0 @@
-<script>
-  export let width = 'normal';
-</script>
-
-{#if width === 'fluid'}
-  <div>
-    <slot />
-  </div>
-{:else}
-  <slot />
-{/if}
-
-<style>
-  div {
-    width: 100%;
-    padding: 0 15px;
-  }</style>