@streamscloud/embeddable 16.0.6 → 16.0.7-1772032565273

package/dist/ads/ad-card/types.d.ts

@@ -1,4 +1,4 @@
-import { AdType, type Currency } from '../../core/enums';
+import type { AdType, Currency } from '../../core/enums';
 export type AdCardModel = {
     id: string;
     type: AdType;

package/dist/ads/ad-card/types.js

@@ -1 +1 @@
-import { AdType } from '../../core/enums';
+export {};

package/dist/articles/article/article-layout.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">import ArticleField from './fields/article-field.svelte';
+import { fieldIsFilled } from './helpers';
+import { generatePaddingsCssVar } from './styles-transformer';
+let { layout, metadata } = $props();
+const filledFields = $derived(layout.fields.filter(fieldIsFilled));
+const styles = $derived.by(() => {
+    if (!layout.styles) {
+        return '';
+    }
+    const mobileStyles = generatePaddingsCssVar({ styles: layout.styles, mobileView: true });
+    const desktopStyles = generatePaddingsCssVar({ styles: layout.styles, mobileView: false });
+    return `--_article-layout--padding--desktop:${desktopStyles};--_article-layout--padding--mobile:${mobileStyles};`;
+});
+</script>
+
+<div class="article-layout" style={styles}>
+  {#each filledFields as field (field.id)}
+    <ArticleField field={field} metadata={metadata} />
+  {/each}
+</div>
+
+<style>.article-layout {
+  display: flex;
+  flex-direction: column;
+  padding: var(--_article-layout--padding--desktop);
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .article-layout {
+    padding: var(--_article-layout--padding--mobile);
+  }
+}</style>

package/dist/articles/article/article-layout.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { FieldMetadata } from './fields/types';
+import type { ArticleLayoutModel } from './types';
+type Props = {
+    layout: ArticleLayoutModel;
+    metadata: FieldMetadata;
+};
+declare const ArticleLayout: import("svelte").Component<Props, {}, "">;
+type ArticleLayout = ReturnType<typeof ArticleLayout>;
+export default ArticleLayout;

package/dist/articles/article/article-section.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">import ArticleLayout from './article-layout.svelte';
+import FactsContainer from './facts-container.svelte';
+import { layoutIsFilled } from './helpers';
+import { generatePaddingsCssVar } from './styles-transformer';
+import { HtmlHelper } from '@streamscloud/kit/core/utils';
+import { HtmlBlock } from '@streamscloud/kit/ui/html-block';
+let { section, metadata } = $props();
+const filledLayouts = $derived(section.layouts.filter(layoutIsFilled));
+const styles = $derived.by(() => {
+    if (!section.styles) {
+        return '';
+    }
+    const mobileStyles = generatePaddingsCssVar({ styles: section.styles, mobileView: true });
+    const desktopStyles = generatePaddingsCssVar({ styles: section.styles, mobileView: false });
+    return `--_article-section--padding--desktop:${desktopStyles};--_article-section--padding--mobile:${mobileStyles};`;
+});
+const sectionFactsText = $derived(section.facts ? HtmlHelper.sanitizeHtml(section.facts) : null);
+</script>
+
+<div class="article-section" style={styles}>
+  <div class="article-section__layouts">
+    {#each filledLayouts as layout (layout.id)}
+      <ArticleLayout layout={layout} metadata={metadata} />
+    {/each}
+  </div>
+  {#if sectionFactsText}
+    <FactsContainer>
+      <HtmlBlock>
+        {@html sectionFactsText}
+      </HtmlBlock>
+    </FactsContainer>
+  {/if}
+</div>
+
+<style>.article-section {
+  display: flex;
+  gap: 2.5rem;
+  padding: var(--_article-section--padding--desktop);
+}
+.article-section__layouts {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.article-section {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .article-section {
+    padding: var(--_article-section--padding--mobile);
+  }
+}</style>

package/dist/articles/article/article-section.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { FieldMetadata } from './fields/types';
+import type { ArticleSectionModel } from './types';
+type Props = {
+    section: ArticleSectionModel;
+    metadata: FieldMetadata;
+};
+declare const ArticleSection: import("svelte").Component<Props, {}, "">;
+type ArticleSection = ReturnType<typeof ArticleSection>;
+export default ArticleSection;

package/dist/articles/article/cmp.article.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import ArticleSection from './article-section.svelte';
+import { sectionIsFilled } from './helpers';
+let { sections, metadata } = $props();
+const filledSections = $derived(sections.filter(sectionIsFilled));
+const fieldMetadata = $derived({ displayDate: metadata.displayDate });
+</script>
+
+<div class="article-container">
+  <div class="article">
+    {#each filledSections as section (section.id)}
+      <ArticleSection section={section} metadata={fieldMetadata} />
+    {/each}
+  </div>
+</div>
+
+<style>.article-container {
+  --_article--min-height: var(--article--min-height, 0);
+  --_article--background: var(--article--background, light-dark(#ffffff, #2e2e2e));
+  --_article--text-color: var(--article--text-color);
+  container-type: inline-size;
+  min-height: var(--_article--min-height);
+}
+
+.article {
+  --article-field--text-color: var(--_article--text-color);
+  min-height: var(--_article--min-height);
+  background: var(--_article--background);
+  padding-bottom: 6.25rem;
+  display: flex;
+  flex-direction: column;
+}</style>

package/dist/articles/article/cmp.article.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ArticleMetadata, ArticleSectionModel } from './types';
+type Props = {
+    sections: ArticleSectionModel[];
+    metadata: ArticleMetadata;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/articles/article/facts-container.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">let { children } = $props();
+export {};
+</script>
+
+<div class="facts-container">
+  {@render children()}
+</div>
+
+<style>.facts-container {
+  --_facts-container--color: var(--facts-container--color, var(--article-field--text-color));
+  color: var(--_facts-container--color);
+  border: 1px solid light-dark(#d1d5db, #4b5563);
+  border-radius: 0.25rem;
+  font-size: 0.8125rem;
+  width: 12.5rem;
+  height: max-content;
+  padding: 1rem;
+  position: relative;
+}
+.facts-container::before {
+  content: " ";
+  position: absolute;
+  top: -0.125rem;
+  left: 0.625rem;
+  width: 1.25rem;
+  border-bottom: 2px solid light-dark(#144ab0, #5a8dec);
+}</style>

package/dist/articles/article/facts-container.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+declare const FactsContainer: import("svelte").Component<Props, {}, "">;
+type FactsContainer = ReturnType<typeof FactsContainer>;
+export default FactsContainer;

package/dist/articles/article/fields/alt-text.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">let { value } = $props();
+</script>
+
+{#if value}
+  <div class="alt-text">{value}</div>
+{/if}
+
+<style>.alt-text {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding: 0.625rem 3.75rem 0;
+  white-space: normal;
+  overflow-wrap: break-word;
+  text-align: center;
+}</style>

package/dist/articles/article/fields/alt-text.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    value: string | null;
+};
+declare const AltText: import("svelte").Component<Props, {}, "">;
+type AltText = ReturnType<typeof AltText>;
+export default AltText;

package/dist/articles/article/fields/article-field.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">import BylineField from './byline-field.svelte';
+import ImageField from './image-field.svelte';
+import MediaField from './media-field.svelte';
+import MediaGalleryField from './media-gallery-field.svelte';
+import RichTextField from './rich-text-field.svelte';
+import TextField from './text-field.svelte';
+import VideoField from './video-field.svelte';
+import { generateMarginsCssVar } from '../styles-transformer';
+let { field, metadata } = $props();
+const styles = $derived.by(() => {
+    const mobileStyles = generateMarginsCssVar({ styles: field.styles, mobileView: true });
+    const desktopStyles = generateMarginsCssVar({ styles: field.styles, mobileView: false });
+    return `--_article-field--margin--desktop:${desktopStyles};--_article-field--margin--mobile:${mobileStyles};`;
+});
+</script>
+
+<div class="article-field" style={styles}>
+  {#if field.fieldData.type === 'BYLINE'}
+    <BylineField field={field} metadata={metadata} />
+  {:else if field.fieldData.type === 'IMAGE'}
+    <ImageField field={field} />
+  {:else if field.fieldData.type === 'MEDIA'}
+    <MediaField field={field} />
+  {:else if field.fieldData.type === 'MEDIA_GALLERY'}
+    <MediaGalleryField field={field} />
+  {:else if field.fieldData.type === 'RICH_TEXT'}
+    <RichTextField field={field} />
+  {:else if field.fieldData.type === 'TEXT'}
+    <TextField field={field} />
+  {:else if field.fieldData.type === 'VIDEO'}
+    <VideoField field={field} />
+  {/if}
+</div>
+
+<style>.article-field {
+  display: flex;
+  flex-direction: column;
+  margin: var(--_article-field--margin--desktop);
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .article-field {
+    margin: var(--_article-field--margin--mobile);
+  }
+}</style>

package/dist/articles/article/fields/article-field.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ArticleFieldModel, FieldMetadata } from './types';
+type Props = {
+    field: ArticleFieldModel;
+    metadata: FieldMetadata;
+};
+declare const ArticleField: import("svelte").Component<Props, {}, "">;
+type ArticleField = ReturnType<typeof ArticleField>;
+export default ArticleField;

package/dist/articles/article/fields/byline-field.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">import { TimeAgo } from '@streamscloud/kit/ui/time-ago';
+let { field, metadata } = $props();
+const fieldData = $derived(field.fieldData.bylineData);
+</script>
+
+<div class="byline-field">
+  <div class="byline-field__author">{fieldData.authorName}</div>
+  <div class="byline-field__metadata">
+    <TimeAgo date={metadata.displayDate} />
+  </div>
+</div>
+
+<style>.byline-field {
+  --_byline-field--text-color: var(--article-field--text-color);
+}
+.byline-field__author {
+  font-size: 0.875em;
+  color: var(--_byline-field--text-color);
+}
+.byline-field__metadata {
+  font-size: 0.75em;
+  color: light-dark(#9ca3af, #d1d5db);
+}</style>

package/dist/articles/article/fields/byline-field.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ArticleFieldModel, FieldMetadata } from './types';
+type Props = {
+    field: ArticleFieldModel;
+    metadata: FieldMetadata;
+};
+declare const BylineField: import("svelte").Component<Props, {}, "">;
+type BylineField = ReturnType<typeof BylineField>;
+export default BylineField;

package/dist/articles/article/fields/image-field.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">import { MediaItemView } from '../../../ui/media-item-view';
+import AltText from './alt-text.svelte';
+let { field } = $props();
+const fieldData = $derived(field.fieldData.imageData);
+</script>
+
+<MediaItemView media={fieldData.image} ratio={fieldData.preferredMediaFormat} />
+<AltText value={fieldData.altText} />

package/dist/articles/article/fields/image-field.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ArticleFieldModel } from './types';
+type Props = {
+    field: ArticleFieldModel;
+};
+declare const ImageField: import("svelte").Component<Props, {}, "">;
+type ImageField = ReturnType<typeof ImageField>;
+export default ImageField;

package/dist/articles/article/fields/media-field.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">import { MediaItemView } from '../../../ui/media-item-view';
+import AltText from './alt-text.svelte';
+let { field } = $props();
+const fieldData = $derived(field.fieldData.mediaData);
+</script>
+
+<MediaItemView media={fieldData.media} ratio={fieldData.preferredMediaFormat} />
+<AltText value={fieldData.altText} />

package/dist/articles/article/fields/media-field.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ArticleFieldModel } from './types';
+type Props = {
+    field: ArticleFieldModel;
+};
+declare const MediaField: import("svelte").Component<Props, {}, "">;
+type MediaField = ReturnType<typeof MediaField>;
+export default MediaField;

package/dist/articles/article/fields/media-gallery-field.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">import { MediaItemsGallery } from '../../../ui/media-items-gallery';
+import AltText from './alt-text.svelte';
+let { field } = $props();
+const fieldData = $derived(field.fieldData.mediaGalleryData);
+</script>
+
+<MediaItemsGallery media={fieldData.media ?? []} singleImageRatio={fieldData.preferredMediaFormat} />
+<AltText value={fieldData.altText} />

package/dist/articles/article/fields/media-gallery-field.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ArticleFieldModel } from './types';
+type Props = {
+    field: ArticleFieldModel;
+};
+declare const MediaGalleryField: import("svelte").Component<Props, {}, "">;
+type MediaGalleryField = ReturnType<typeof MediaGalleryField>;
+export default MediaGalleryField;

package/dist/articles/article/fields/rich-text-field.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import { HtmlHelper } from '@streamscloud/kit/core/utils';
+import { HtmlBlock } from '@streamscloud/kit/ui/html-block';
+let { field } = $props();
+const fieldData = $derived(field.fieldData.richTextData);
+const fieldDataText = $derived(fieldData.text ? HtmlHelper.sanitizeHtml(fieldData.text) : null);
+</script>
+
+{#if fieldDataText}
+  <div class="rich-text-field" style:font-size={`${fieldData.textSize}em`}>
+    <HtmlBlock>
+      {@html fieldDataText}
+    </HtmlBlock>
+  </div>
+{/if}
+
+<style>.rich-text-field {
+  --_rich-text-field--text-color: var(--article-field--text-color);
+  color: var(--_rich-text-field--text-color);
+}</style>

package/dist/articles/article/fields/rich-text-field.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ArticleFieldModel } from './types';
+type Props = {
+    field: ArticleFieldModel;
+};
+declare const RichTextField: import("svelte").Component<Props, {}, "">;
+type RichTextField = ReturnType<typeof RichTextField>;
+export default RichTextField;

package/dist/articles/article/fields/text-field.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">let { field } = $props();
+const fieldData = $derived(field.fieldData.textData);
+export {};
+</script>
+
+<div
+  class="text-field"
+  style:font-size={`${fieldData.textSize}em`}
+  class:text-field--semi-bold={fieldData.textWeight === 'SEMI_BOLD'}
+  class:text-field--bold={fieldData.textWeight === 'BOLD'}>
+  {fieldData.text}
+</div>
+
+<style>.text-field {
+  --_text-field--text-color: var(--article-field--text-color);
+  color: var(--_text-field--text-color);
+  line-height: 1.2;
+}
+.text-field--semi-bold {
+  font-weight: 500;
+}
+.text-field--bold {
+  font-weight: 700;
+}</style>

package/dist/articles/article/fields/text-field.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ArticleFieldModel } from './types';
+type Props = {
+    field: ArticleFieldModel;
+};
+declare const TextField: import("svelte").Component<Props, {}, "">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/dist/articles/article/fields/types.d.ts

@@ -0,0 +1,62 @@
+import type { ArticleFieldType, GalleryFieldMode, MediaFormat, TextFieldMode, TextFieldWeight } from '../../../core/enums';
+import type { MediaItemModel, MediaItemWithMetadataModel } from '../../../core/media';
+export type FieldMetadata = {
+    displayDate: string;
+};
+export type ArticleFieldModel = {
+    id: string;
+    name: string;
+    description: string | null;
+    styles: ArticleFieldStylesModel | null;
+    fieldData: ArticleFieldDataModel;
+};
+export type ArticleFieldStylesModel = {
+    marginTop: number | null;
+    marginBottom: number | null;
+    marginLeft: number | null;
+    marginRight: number | null;
+};
+export type ArticleFieldDataModel = {
+    type: ArticleFieldType;
+    bylineData?: BylineFieldDataModel | null;
+    imageData?: ImageFieldDataModel | null;
+    mediaData?: MediaFieldDataModel | null;
+    mediaGalleryData?: MediaGalleryFieldDataModel | null;
+    richTextData?: RichTextFieldDataModel | null;
+    textData?: TextFieldDataModel | null;
+    videoData?: VideoFieldDataModel | null;
+};
+export type BylineFieldDataModel = {
+    authorName: string | null;
+};
+export type ImageFieldDataModel = {
+    image: MediaItemModel | null;
+    preferredMediaFormat: MediaFormat;
+    altText: string | null;
+};
+export type MediaFieldDataModel = {
+    media: MediaItemModel | null;
+    preferredMediaFormat: MediaFormat;
+    altText: string | null;
+};
+export type MediaGalleryFieldDataModel = {
+    media: MediaItemWithMetadataModel[] | null;
+    galleryMode: GalleryFieldMode;
+    preferredMediaFormat: MediaFormat;
+    altText: string | null;
+};
+export type RichTextFieldDataModel = {
+    text: string | null;
+    textSize: number;
+};
+export type TextFieldDataModel = {
+    text: string | null;
+    textMode: TextFieldMode;
+    textSize: number;
+    textWeight: TextFieldWeight;
+};
+export type VideoFieldDataModel = {
+    video: MediaItemModel | null;
+    preferredMediaFormat: MediaFormat;
+    altText: string | null;
+};

package/dist/articles/article/fields/types.js

@@ -0,0 +1 @@
+export {};

package/dist/articles/article/fields/video-field.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">import { MediaItemView } from '../../../ui/media-item-view';
+import AltText from './alt-text.svelte';
+let { field } = $props();
+const fieldData = $derived(field.fieldData.videoData);
+</script>
+
+<MediaItemView media={fieldData.video} ratio={fieldData.preferredMediaFormat} />
+<AltText value={fieldData.altText} />

package/dist/articles/article/fields/video-field.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ArticleFieldModel } from './types';
+type Props = {
+    field: ArticleFieldModel;
+};
+declare const VideoField: import("svelte").Component<Props, {}, "">;
+type VideoField = ReturnType<typeof VideoField>;
+export default VideoField;

package/dist/articles/article/helpers.d.ts

@@ -0,0 +1,5 @@
+import type { ArticleFieldModel } from './fields/types';
+import type { ArticleLayoutModel, ArticleSectionModel } from './types';
+export declare const fieldIsFilled: (field: ArticleFieldModel) => boolean;
+export declare const layoutIsFilled: (layout: ArticleLayoutModel) => boolean;
+export declare const sectionIsFilled: (section: ArticleSectionModel) => boolean;

package/dist/articles/article/helpers.js

@@ -0,0 +1,27 @@
+export const fieldIsFilled = (field) => {
+    const { fieldData } = field;
+    switch (fieldData.type) {
+        case 'BYLINE':
+            return !!fieldData.bylineData?.authorName;
+        case 'IMAGE':
+            return !!fieldData.imageData?.image?.url;
+        case 'MEDIA':
+            return !!fieldData.mediaData?.media?.url;
+        case 'MEDIA_GALLERY':
+            return !!fieldData.mediaGalleryData?.media?.length;
+        case 'RICH_TEXT':
+            return !!fieldData.richTextData?.text;
+        case 'TEXT':
+            return !!fieldData.textData?.text;
+        case 'VIDEO':
+            return !!fieldData.videoData?.video?.url;
+        default:
+            return false;
+    }
+};
+export const layoutIsFilled = (layout) => {
+    return layout.fields.some(fieldIsFilled);
+};
+export const sectionIsFilled = (section) => {
+    return section.layouts.some(layoutIsFilled) || !!section.facts;
+};

package/dist/articles/article/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Article } from './cmp.article.svelte';
+export { fieldIsFilled, layoutIsFilled, sectionIsFilled } from './helpers';
+export type { ArticleLayoutModel, ArticleLayoutStylesModel, ArticleMetadata, ArticleSectionModel, ArticleSectionStylesModel } from './types';
+export type { ArticleFieldDataModel, ArticleFieldModel, ArticleFieldStylesModel, BylineFieldDataModel, FieldMetadata, ImageFieldDataModel, MediaFieldDataModel, MediaGalleryFieldDataModel, RichTextFieldDataModel, TextFieldDataModel, VideoFieldDataModel } from './fields/types';

package/dist/articles/article/index.js

@@ -0,0 +1,2 @@
+export { default as Article } from './cmp.article.svelte';
+export { fieldIsFilled, layoutIsFilled, sectionIsFilled } from './helpers';

package/dist/articles/article/styles-transformer.d.ts

@@ -0,0 +1,19 @@
+export declare const generatePaddingsCssVar: (data: {
+    styles: {
+        paddingTop?: number | null;
+        paddingBottom?: number | null;
+        paddingLeft?: number | null;
+        paddingRight?: number | null;
+    };
+    mobileView: boolean;
+}) => string;
+export declare const generateMarginsCssVar: (data: {
+    styles: {
+        marginTop?: number | null;
+        marginBottom?: number | null;
+        marginLeft?: number | null;
+        marginRight?: number | null;
+    } | null;
+    mobileView: boolean;
+    useFallbackIfMissing?: boolean;
+}) => string;

package/dist/articles/article/styles-transformer.js

@@ -0,0 +1,36 @@
+export const generatePaddingsCssVar = (data) => {
+    const indents = parsePaddingValues(data);
+    const paddings = [indents.top, indents.right, indents.bottom, indents.left];
+    return paddings.map((p) => p + 'rem').join(' ');
+};
+const parsePaddingValues = (data) => {
+    const { styles, mobileView } = data;
+    const verticalScaleFactor = mobileView ? 0.7 : 1;
+    const horizontalScaleFactor = mobileView ? 0.3 : 1;
+    return {
+        top: styles.paddingTop ? styles.paddingTop * verticalScaleFactor : 0,
+        right: styles.paddingRight ? styles.paddingRight * horizontalScaleFactor : 0,
+        bottom: styles.paddingBottom ? styles.paddingBottom * verticalScaleFactor : 0,
+        left: styles.paddingLeft ? styles.paddingLeft * horizontalScaleFactor : 0
+    };
+};
+export const generateMarginsCssVar = (data) => {
+    const indents = parseMarginValues(data);
+    const margins = [indents.top, indents.right, indents.bottom, indents.left];
+    return margins.map((p) => p + 'rem').join(' ');
+};
+const parseMarginValues = (data) => {
+    const { styles, useFallbackIfMissing = true, mobileView } = data;
+    if (!styles && !useFallbackIfMissing) {
+        return { top: 0, right: 0, bottom: 0, left: 0 };
+    }
+    const parsedStyles = styles || { marginBottom: 0.875 };
+    const verticalScaleFactor = mobileView ? 0.7 : 1;
+    const horizontalScaleFactor = mobileView ? 0.3 : 1;
+    return {
+        top: 'marginTop' in parsedStyles && parsedStyles.marginTop ? parsedStyles.marginTop * verticalScaleFactor : 0,
+        right: 'marginRight' in parsedStyles && parsedStyles.marginRight ? parsedStyles.marginRight * horizontalScaleFactor : 0,
+        bottom: 'marginBottom' in parsedStyles && parsedStyles.marginBottom ? parsedStyles.marginBottom * verticalScaleFactor : 0,
+        left: 'marginLeft' in parsedStyles && parsedStyles.marginLeft ? parsedStyles.marginLeft * horizontalScaleFactor : 0
+    };
+};

package/dist/articles/article/types.d.ts

@@ -0,0 +1,27 @@
+import type { ArticleFieldModel } from './fields/types';
+export type ArticleMetadata = {
+    displayDate: string;
+};
+export type ArticleSectionModel = {
+    id: string;
+    styles: ArticleSectionStylesModel | null;
+    layouts: ArticleLayoutModel[];
+    facts: string | null;
+};
+export type ArticleSectionStylesModel = {
+    paddingTop: number | null;
+    paddingBottom: number | null;
+    paddingLeft: number | null;
+    paddingRight: number | null;
+};
+export type ArticleLayoutModel = {
+    id: string;
+    styles: ArticleLayoutStylesModel | null;
+    fields: ArticleFieldModel[];
+};
+export type ArticleLayoutStylesModel = {
+    paddingTop: number | null;
+    paddingBottom: number | null;
+    paddingLeft: number | null;
+    paddingRight: number | null;
+};

package/dist/articles/article/types.js

@@ -0,0 +1 @@
+export {};