@micromag/transforms 0.2.286

package/es/apple-news.js

@@ -0,0 +1,2157 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { validate as validate$1, stripTags } from '@micromag/transforms/utils';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import isString from 'lodash/isString';
+import isInteger from 'lodash/isInteger';
+import isNumber from 'lodash/isNumber';
+import isEmpty from 'lodash/isEmpty';
+import hash from 'object-hash';
+
+var getArticleComponents = function getArticleComponents(story) {
+  var _ref = story || {},
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? null : _ref$title,
+      _ref$metadata = _ref.metadata,
+      metadata = _ref$metadata === void 0 ? {} : _ref$metadata,
+      _ref$components = _ref.components,
+      components = _ref$components === void 0 ? [] : _ref$components;
+
+  var _ref2 = metadata || {},
+      _ref2$description = _ref2.description,
+      description = _ref2$description === void 0 ? 'Ma description' : _ref2$description;
+
+  var heading1 = title ? {
+    role: 'heading1',
+    text: title,
+    format: 'html'
+  } : null;
+  var heading2 = description ? {
+    role: 'heading2',
+    text: description,
+    format: 'html'
+  } : null;
+  var titleScreen = components.reduce(function (comp, next, i) {
+    if (comp === null && i < 3) {
+      if (next.type.indexOf('title') !== false) {
+        return next;
+      }
+    }
+
+    return comp;
+  }, null);
+  var imageComponent = null;
+
+  if (titleScreen !== null) {
+    var _ref3 = titleScreen || {},
+        _ref3$image = _ref3.image,
+        image = _ref3$image === void 0 ? null : _ref3$image,
+        _ref3$background = _ref3.background,
+        background = _ref3$background === void 0 ? null : _ref3$background;
+
+    if (image !== null) {
+      imageComponent = {
+        role: 'image',
+        URL: image.url
+      };
+    } else if (background !== null && background.image !== null) {
+      imageComponent = {
+        role: 'image',
+        URL: background.image.url
+      };
+    }
+  }
+
+  var headerComponents = [imageComponent, heading1, heading2].filter(function (it) {
+    return it !== null;
+  });
+  return {
+    components: headerComponents.length > 0 ? [{
+      role: 'header',
+      components: headerComponents,
+      layout: 'header'
+    }] : []
+  };
+};
+
+var name$f = "Format\\TextStyle";
+var description$f = "The object for defining the text style (font family, size, color, and so on) that you can apply to ranges of text.";
+var version$f = "1.7+";
+var from_class$f = null;
+var typed$f = null;
+var url$f = "https://developer.apple.com/documentation/apple_news/textstyle";
+var properties$f = [{
+  name: "backgroundColor",
+  type: "Color",
+  required: false,
+  description: "The background color for text lines. The value defaults to transparent.",
+  typed: false
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalTextStyle",
+  required: false,
+  description: "An array of text style properties that can be applied conditionally, and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "fontFamily",
+  type: "string",
+  required: false,
+  description: "The font family to use for text rendering, for example Gill Sans. Using a combination of fontFamily, fontWeight, fontWidth and fontStyle you can define the appearance of the text. News automatically selects the appropriate font variant from the available variants in that family.",
+  typed: false
+}, {
+  name: "fontName",
+  type: "string",
+  required: false,
+  description: "The fontName to refer to an explicit font variant’s PostScript name, such as GillSans-Bold. Alternatively, you can use a combination of fontFamily, fontWeight, fontWidth and/or fontStyle to have News automatically select the appropriate variant depending on the text formatting used.",
+  typed: false
+}, {
+  name: "fontSize",
+  type: "integer",
+  required: false,
+  description: "The size of the font, in points. By default, the font size will be inherited from a parent component or a default style. As a best practice, try not to go below 16 points for body text. The fontSize may be automatically resized for different device sizes or for iOS devices with Larger Accessibility Sizes enabled.",
+  typed: false
+}, {
+  name: "fontStyle",
+  type: "enum:string",
+  required: false,
+  description: "The font style to apply for the selected font.",
+  enum_values: ["normal", "italic", "oblique"],
+  typed: false
+}, {
+  name: "fontWeight",
+  type: "enum:integer|string",
+  required: false,
+  description: "The font weight to apply for font selection. In addition to explicit weights (named or numerical), lighter and bolder are available, to set text in a lighter or bolder font as compared to its surrounding text.",
+  enum_values: [100, 200, 300, 400, 500, 600, 700, 800, 900, "thin", "extra-light", "extralight", "ultra-light", "light", "regular", "normal", "book", "roman", "medium", "semi-bold", "semibold", "demi-bold", "demibold", "bold", "extra-bold", "extrabold", "ultra-bold", "ultrabold", "black", "heavy", "lighter", "bolder"],
+  typed: false
+}, {
+  name: "fontWidth",
+  type: "enum:string",
+  required: false,
+  description: "The font width for font selection (known in CSS as font-stretch). Defines the width characteristics of a font variant between normal, condensed and expanded. Some font families have separate families assigned for different widths (for example, Avenir Next and Avenir Next Condensed), so make sure that the fontFamily you select supports the specified fontWidth.",
+  enum_values: ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"],
+  typed: false
+}, {
+  name: "orderedListItems",
+  type: "Format\\ListItemStyle",
+  required: false,
+  description: "An object for use with text components with HTML markup. You can create text styles containing an orderedListItems definition to configure how list items inside <ol> tags should be displayed.",
+  typed: false
+}, {
+  name: "strikethrough",
+  type: ["Format\\TextDecoration", "boolean"],
+  required: false,
+  description: "The text strikethrough. Set strikethrough to true to use the text color inherited from the textColor property as the strikethrough color, or provide a text decoration definition with a different color. By default strikethrough is omitted (false).",
+  typed: false
+}, {
+  name: "stroke",
+  type: "Format\\TextStrokeStyle",
+  required: false,
+  description: "The stroke style for the text outline. By default, stroke will be omitted.",
+  typed: false
+}, {
+  name: "textColor",
+  type: "Color",
+  required: false,
+  description: "The text color.",
+  typed: false
+}, {
+  name: "textShadow",
+  type: "Format\\Shadow",
+  required: false,
+  description: "The text shadow for this style.",
+  typed: false
+}, {
+  name: "textTransform",
+  type: "enum:string",
+  required: false,
+  description: "The transform to apply to the text.",
+  enum_values: ["uppercase", "lowercase", "capitalize", "none"],
+  typed: false
+}, {
+  name: "tracking",
+  type: "number",
+  required: false,
+  description: "The amount of tracking (spacing between characters) in text, as a percentage of the fontSize. The actual spacing between letters is determined by combining information from the font and font size.",
+  "default": 0,
+  typed: false
+}, {
+  name: "underline",
+  type: ["Format\\TextDecoration", "boolean"],
+  required: false,
+  description: "The text underlining. This style can be used for links. Set underline to true to use the text color as the underline color, or provide a text decoration with a different color. By default underline is omitted (false).",
+  typed: false
+}, {
+  name: "unorderedListItems",
+  type: "Format\\ListItemStyle",
+  required: false,
+  description: "An object for use with text components with HTML markup. You can create text styles containing an unorderedListItems definition to configure how list items inside <ul> tags should be displayed.",
+  typed: false
+}, {
+  name: "verticalAlignment",
+  type: "enum:string",
+  required: false,
+  description: "The vertical alignment of the text. You can use this property for superscripts and subscripts.",
+  enum_values: ["superscript", "subscript", "baseline"],
+  typed: false
+}];
+var TextStyleDefinition = {
+  name: name$f,
+  description: description$f,
+  version: version$f,
+  from_class: from_class$f,
+  "extends": null,
+  typed: typed$f,
+  url: url$f,
+  properties: properties$f
+};
+
+var TextStyle = function TextStyle() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$fontFamily = _ref.fontFamily,
+      fontFamily = _ref$fontFamily === void 0 ? null : _ref$fontFamily,
+      _ref$fontSize = _ref.fontSize,
+      fontSize = _ref$fontSize === void 0 ? null : _ref$fontSize,
+      _ref$lineHeight = _ref.lineHeight,
+      lineHeight = _ref$lineHeight === void 0 ? null : _ref$lineHeight,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? null : _ref$color;
+
+  var content = {
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    lineHeight: lineHeight ? Math.floor(fontSize * lineHeight) : null,
+    textColor: color && color.color ? color.color : null
+  };
+  return validate$1(content, TextStyleDefinition);
+};
+
+var getArticleTextStyles = function getArticleTextStyles() {
+  // const { theme = {} } = story || {};
+  // const { textStyle = {} } = theme || {};
+  // const { heading1 = {}, text = {} } = textStyle || {};
+  // const titleStyles = TextStyle(heading1);
+  // const textStyles = TextStyle(text);
+  var fontSize = 18;
+  var lineHeight = 1.35;
+  var titleStyles = TextStyle({
+    fontFamily: 'Futura',
+    // stylelint-disable-line
+    fontSize: fontSize * 2,
+    fontWeight: 'bold',
+    lineHeight: lineHeight
+  });
+  var textStyles = TextStyle({
+    fontFamily: 'Palatino',
+    // stylelint-disable-line
+    fontSize: fontSize,
+    lineHeight: lineHeight
+  });
+  return {
+    componentTextStyles: {
+      "default": _objectSpread({
+        textColor: '#000',
+        linkStyle: {
+          textColor: '#F0F',
+          underline: true
+        }
+      }, textStyles !== null ? textStyles : {}),
+      'default-heading1': _objectSpread(_objectSpread({}, titleStyles !== null ? titleStyles : {}), {}, {
+        fontSize: fontSize * 2,
+        lineHeight: 36,
+        fontWeight: 'regular',
+        fontWidth: 'expanded',
+        textTransform: 'uppercase'
+      }),
+      'default-heading2': _objectSpread(_objectSpread({}, titleStyles !== null ? titleStyles : {}), {}, {
+        fontSize: 26,
+        fontWeight: 'regular',
+        fontWidth: 'expanded',
+        textTransform: 'uppercase'
+      }),
+      'default-title': _objectSpread(_objectSpread({}, titleStyles !== null ? titleStyles : {}), {}, {
+        fontSize: 26,
+        fontWeight: 'regular',
+        fontWidth: 'expanded',
+        textTransform: 'uppercase'
+      }),
+      'default-body': _objectSpread({}, textStyles !== null ? textStyles : {}),
+      'default-text': _objectSpread({}, textStyles !== null ? textStyles : {}),
+      'default-quote': _objectSpread(_objectSpread({}, textStyles !== null ? textStyles : {}), {}, {
+        fontSize: 26
+      }),
+      'style-author': _objectSpread(_objectSpread({}, textStyles !== null ? textStyles : {}), {}, {
+        fontStyle: 'italic'
+      })
+    }
+  };
+};
+
+var name$e = "Format\\Layout";
+var description$e = "The object for defining columns, gutters, and margins for your article’s designed width.";
+var version$e = "1.7+";
+var from_class$e = null;
+var typed$e = null;
+var url$e = "https://developer.apple.com/documentation/apple_news/layout";
+var properties$e = [{
+  name: "columns",
+  type: "integer",
+  required: true,
+  description: "The number of columns this article was designed for. You must have at least one column.",
+  minimum: 1,
+  typed: false
+}, {
+  name: "width",
+  type: "integer",
+  required: true,
+  description: "The width (in points) this article was designed for. This property is used to calculate down-scaling scenarios for smaller devices.",
+  minimum: 1,
+  typed: false
+}, {
+  name: "gutter",
+  type: "integer",
+  required: false,
+  description: "The gutter size for the article (in points). The gutter provides spacing between columns. This property should always be an even number; odd numbers are rounded up to the next even number. If this property is omitted, a default gutter size of 20 is applied. If the gutter is negative, the number will be set to 0.",
+  "default": 20,
+  minimum: 0,
+  typed: false
+}, {
+  name: "margin",
+  type: "integer",
+  required: false,
+  description: "The outer (left and right) margins of the article, in points. If this property is omitted, a default article margin of 60 is applied. If the margin is negative, the number is set to 0. If the margin is greater than or equal to the width/2, the article delivery fails.",
+  "default": 60,
+  minimum: 0,
+  typed: false
+}];
+var LayoutDefinition = {
+  name: name$e,
+  description: description$e,
+  version: version$e,
+  from_class: from_class$e,
+  "extends": null,
+  typed: typed$e,
+  url: url$e,
+  properties: properties$e
+};
+
+var Layout = function Layout() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? 8 : _ref$columns,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 768 : _ref$width,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? 60 : _ref$margin,
+      _ref$gutter = _ref.gutter,
+      gutter = _ref$gutter === void 0 ? 20 : _ref$gutter;
+
+  var content = {
+    columns: columns,
+    width: width,
+    margin: margin,
+    gutter: gutter
+  };
+  return validate$1(content, LayoutDefinition);
+};
+
+var name$d = "Format\\ComponentLayout";
+var description$d = "The object for defining the positioning for a specific component within the article’s column system.";
+var version$d = "1.7+";
+var from_class$d = null;
+var typed$d = null;
+var url$d = "https://developer.apple.com/documentation/apple_news/componentlayout";
+var properties$d = [{
+  name: "columnSpan",
+  type: "integer",
+  required: false,
+  description: "A number that indicates how many columns the component spans, based on the number of columns in the document.",
+  minimum: 1,
+  typed: false
+}, {
+  name: "columnStart",
+  type: "integer",
+  required: false,
+  description: "A number that indicates which column the component‘s start position is in, based on the number of columns in the document or parent container.",
+  minimum: 0,
+  typed: false
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalComponentLayout",
+  required: false,
+  description: "An array of component layout properties that can be applied conditionally, and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "contentInset",
+  type: ["Format\\ContentInset", "boolean"],
+  required: false,
+  description: "A value that defines a content inset for the component. If applied, the inset is equivalent to half the document gutter. For example, if the article's layout sets the document gutter to 40pt, the content inset is 20 points.",
+  typed: false
+}, {
+  name: "horizontalContentAlignment",
+  type: "enum:string",
+  required: false,
+  description: "A string value that sets the alignment of the content within the component. This property applies only when the width of the content is less than the width of the component.",
+  "default": "center",
+  enum_values: ["left", "center", "right"],
+  typed: false
+}, {
+  name: "ignoreDocumentGutter",
+  type: "enum:boolean|string",
+  required: false,
+  description: "A value that indicates whether the gutters (if any) to the left and right of the component should be ignored. The gutter size is defined in the Layout object at the root level of the document.",
+  enum_values: ["none", "left", "right", "both", true, false],
+  typed: false
+}, {
+  name: "ignoreDocumentMargin",
+  type: "enum:boolean|string",
+  required: false,
+  description: "A value that indicates whether a document’s margins should be respected or ignored by the parent container. Ignoring document margins will position the component at the edge of the display. This property affects the layout only if the component is in the first or last column.",
+  enum_values: ["none", "left", "right", "both", true, false],
+  typed: false
+}, {
+  name: "margin",
+  type: ["Format\\Margin", "integer"],
+  required: false,
+  description: "A value that sets the margins for the top and bottom of the component, as a single integer that gets applied to the top and bottom margins, or as an object containing separate properties for top and bottom.",
+  typed: false
+}, {
+  name: "maximumContentWidth",
+  type: ["SupportedUnits", "integer"],
+  required: false,
+  description: "A value that sets the maximum width of the content within the component. Specify this value as an integer in points or using one of the available units of measure for components. See Specifying Measurements for Components.",
+  typed: false
+}, {
+  name: "minimumHeight",
+  type: ["SupportedUnits", "integer"],
+  required: false,
+  description: "A value that sets the minimum height of the component. A component is taller than its defined minimumHeight when the contents require the component to be taller. The minimum height can be defined as an integer in points or using one of the available units of measure for components. See Specifying Measurements for Components.",
+  typed: false
+}, {
+  name: "minimumWidth",
+  type: ["SupportedUnits", "integer"],
+  required: false,
+  description: "A value that defines the minimum width of the layout when used within a Container with HorizontalStackDisplay as the specified contentDisplay type. The minimum width can be defined as an integer in points or using one of the available units of measure for components. See Specifying Measurements for Components.",
+  typed: false
+}, {
+  name: "maximumWidth",
+  type: ["SupportedUnits", "integer"],
+  required: false,
+  description: "A value that defines the maximum width of the layout when used within a Container with HorizontalStackDisplay as the specified contentDisplay type. The maximum width can be defined as an integer in points or using one of the available units of measure for components. See Specifying Measurements for Components.",
+  typed: false
+}, {
+  name: "padding",
+  type: ["Format\\Padding", "SupportedUnits", "integer"],
+  required: false,
+  description: "A value that defines the padding between the content of the component and the edges of the component. Padding can be defined as an integer in points or using one of the available units of measure for components. See Specifying Measurements for Components.",
+  typed: false
+}];
+var ComponentLayoutDefinition = {
+  name: name$d,
+  description: description$d,
+  version: version$d,
+  from_class: from_class$d,
+  "extends": null,
+  typed: typed$d,
+  url: url$d,
+  properties: properties$d
+};
+
+var ComponentLayout = function ComponentLayout() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$columnStart = _ref.columnStart,
+      columnStart = _ref$columnStart === void 0 ? 0 : _ref$columnStart,
+      _ref$columnSpan = _ref.columnSpan,
+      columnSpan = _ref$columnSpan === void 0 ? 12 : _ref$columnSpan,
+      _ref$marginTop = _ref.marginTop,
+      marginTop = _ref$marginTop === void 0 ? 0 : _ref$marginTop,
+      _ref$marginBottom = _ref.marginBottom,
+      marginBottom = _ref$marginBottom === void 0 ? 20 : _ref$marginBottom;
+
+  var content = {
+    columnStart: columnStart,
+    columnSpan: columnSpan,
+    margin: {
+      top: marginTop,
+      bottom: marginBottom
+    }
+  };
+  return validate$1(content, ComponentLayoutDefinition);
+};
+
+var getArticleLayouts = function getArticleLayouts() {
+  // const { theme = {} } = newStory || {};
+  // const { textStyle = {} } = theme || {};
+  // const { heading1 = {}, text = {} } = textStyle || {};
+  // const titleStyles = TextStyle(heading1);
+  var layoutStyles = Layout();
+  var componentLayoutStyles = ComponentLayout();
+  var defaultMargin = 20;
+  return {
+    layout: _objectSpread({}, layoutStyles !== null ? layoutStyles : {}),
+    componentLayouts: {
+      "default": _objectSpread({}, componentLayoutStyles !== null ? componentLayoutStyles : {}),
+      container: {
+        margin: {
+          bottom: 40
+        }
+      },
+      header: {
+        ignoreDocumentMargin: true,
+        ignoreDocumentGutter: true,
+        margin: {
+          bottom: 40
+        }
+      },
+      title: {
+        margin: {
+          bottom: 10
+        }
+      },
+      heading1: {
+        margin: {
+          bottom: 10
+        }
+      },
+      heading2: {
+        margin: {
+          bottom: 10
+        }
+      },
+      text: {
+        margin: {
+          bottom: defaultMargin
+        }
+      },
+      photo: {
+        margin: {
+          bottom: defaultMargin
+        }
+      },
+      image: {
+        margin: {
+          bottom: defaultMargin
+        }
+      },
+      gallery: {
+        margin: {
+          bottom: defaultMargin
+        }
+      },
+      mosaic: {
+        margin: {
+          bottom: defaultMargin
+        }
+      },
+      audio: {
+        margin: {
+          bottom: defaultMargin
+        }
+      },
+      video: {
+        margin: {
+          bottom: defaultMargin
+        }
+      },
+      map: {
+        margin: {
+          bottom: defaultMargin
+        }
+      },
+      quote: {
+        columnStart: 1,
+        columnSpan: 5,
+        contentInset: {
+          left: false
+        },
+        margin: {
+          right: 20,
+          bottom: defaultMargin
+        }
+      }
+    }
+  };
+};
+
+var name$c = "Format\\DocumentStyle";
+var description$c = "The object for setting the background color for your article.";
+var version$c = "1.7+";
+var from_class$c = null;
+var typed$c = null;
+var url$c = "https://developer.apple.com/documentation/apple_news/documentstyle";
+var properties$c = [{
+  name: "backgroundColor",
+  type: "Color",
+  required: false,
+  description: "The article’s background color. The value defaults to white.",
+  typed: false
+}];
+var DocumentStyleDefinition = {
+  name: name$c,
+  description: description$c,
+  version: version$c,
+  from_class: from_class$c,
+  "extends": null,
+  typed: typed$c,
+  url: url$c,
+  properties: properties$c
+};
+
+var DocumentStyle = function DocumentStyle() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? null : _ref$backgroundColor;
+
+  var content = {
+    backgroundColor: backgroundColor
+  };
+  return validate$1(content, DocumentStyleDefinition);
+};
+
+var getArticleDocumentStyle = function getArticleDocumentStyle() {
+  var documentStyle = DocumentStyle({
+    backgroundColor: '#FFF'
+  });
+  return {
+    documentStyle: documentStyle
+  };
+};
+
+var name$b = "Format\\ArticleDocument";
+var description$b = "The root object of an Apple News article, containing required properties, metadata, content, layout, and styles.";
+var version$b = "1.7+";
+var from_class$b = null;
+var typed$b = null;
+var url$b = "https://developer.apple.com/documentation/apple_news/articledocument";
+var properties$b = [{
+  name: "components",
+  type: "array:Format\\Component",
+  required: true,
+  description: "An array of components that form the content of this article. Components have different roles and types, such as Photo and Music.",
+  typed: true
+}, {
+  name: "componentTextStyles",
+  type: "Format\\ComponentTextStyles",
+  required: true,
+  description: "The component text styles that can be referred to by components in this document. Each article.json file must have, at minimum, a default component text style named default. Defaults by component role can also be set. See Defining and Using Text Styles.",
+  typed: false
+}, {
+  name: "identifier",
+  type: "string",
+  required: true,
+  description: "An unique, publisher-provided identifier for this article. This identifier must remain constant; it cannot change when the article is updated.",
+  typed: false
+}, {
+  name: "language",
+  type: "string",
+  required: true,
+  description: "A code that indicates the language of the article. Use the IANA.org language subtag registry to find the appropriate code; e.g., en for English, or the more specific en_UK for English (U.K.) or en_US for English (U.S.).",
+  typed: false
+}, {
+  name: "layout",
+  type: "Format\\Layout",
+  required: true,
+  description: "The article’s column system. Apple News Format layouts make it possible to recreate print design on iPhone, iPad, iPod touch and Mac. Layout information is also used to calculate relative positioning and size for these devices. See Planning the Layout for Your Article.",
+  typed: false
+}, {
+  name: "title",
+  type: "string",
+  required: true,
+  description: "The article title or headline. Should be plain text; formatted text (HTML or Markdown) is not supported.",
+  typed: false
+}, {
+  name: "version",
+  type: "string",
+  required: true,
+  description: "The version of Apple News Format used in the JSON document.",
+  typed: false
+}, {
+  name: "advertisingSettings",
+  type: "Format\\AdvertisingSettings",
+  required: false,
+  description: "An advertisement to be inserted at a position that is both possible and optimal. You can specify what bannerType you want to have automatically inserted.",
+  typed: false
+}, {
+  name: "autoplacement",
+  type: "Format\\AutoPlacement",
+  required: false,
+  description: "The metadata, appearance, and placement of advertising and related content components within Apple News Format articles.",
+  typed: false
+}, {
+  name: "componentLayouts",
+  type: "Format\\ComponentLayouts",
+  required: false,
+  description: "The article-level ComponentLayout objects that can be referred to by their key within the ComponentLayouts object. See Positioning the Content in Your Article.",
+  typed: false
+}, {
+  name: "componentStyles",
+  type: "Format\\ComponentStyles",
+  required: false,
+  description: "The component styles that can be referred to by components within this document. See Enhancing Your Articles with Styles.",
+  typed: false
+}, {
+  name: "documentStyle",
+  type: "Format\\DocumentStyle",
+  required: false,
+  description: "An object containing the background color of the article.",
+  typed: false
+}, {
+  name: "metadata",
+  type: "Format\\Metadata",
+  required: false,
+  description: "The article's metadata, such as publication date, ad campaign data, and other information that is not part of the core article content.",
+  typed: false
+}, {
+  name: "subtitle",
+  type: "string",
+  required: false,
+  description: "The article subtitle. Should be plain text; formatted text (HTML or Markdown) is not supported.",
+  typed: false
+}, {
+  name: "textStyles",
+  type: "Format\\TextStyles",
+  required: false,
+  description: "The TextStyle objects available to use inline for text in Text components. See Using HTML with Apple News Format, Using Markdown with Apple News Format, and InlineTextStyle.",
+  typed: false
+}];
+var ArticleDefinition = {
+  name: name$b,
+  description: description$b,
+  version: version$b,
+  from_class: from_class$b,
+  "extends": null,
+  typed: typed$b,
+  url: url$b,
+  properties: properties$b
+};
+
+var validate = function validate() {
+  var content = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var definition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var validated = content ? Object.keys(content).reduce(function (values, name) {
+    var value = content[name] || null; // Find the reference
+
+    if (definition && definition.properties) {
+      var property = definition.properties.find(function (prop) {
+        return prop.name === name;
+      }) || null;
+
+      if (property !== null) {
+        var isValid = true;
+
+        switch (property.type) {
+          case 'string':
+            isValid = isString(value);
+            break;
+
+          case 'integer':
+            isValid = isInteger(value);
+            break;
+
+          case 'float':
+            isValid = isNumber(value);
+            break;
+
+          default:
+            isValid = value !== null;
+            break;
+        } // Skip the whole thing it cause it aint gonna work
+
+
+        if (!isValid && property.required) {
+          console.log('VALIDATION ERROR: SKIPPED BECAUSE REQUIRED', content, name); // eslint-disable-line
+
+          return null;
+        }
+
+        if (values !== null && isValid) {
+          return _objectSpread(_objectSpread({}, values), {}, _defineProperty({}, name, value));
+        }
+
+        console.log('VALIDATION ERROR: VALID TYPE', name, content); // eslint-disable-line
+      }
+    }
+
+    return values;
+  }, {}) : {};
+  return !isEmpty(validated) ? validated : null;
+};
+
+var Article = function Article(story, settings) {
+  // console.log('ARTICLE', story); // eslint-disable-line
+  var _story$title = story.title,
+      title = _story$title === void 0 ? 'Article' : _story$title;
+
+  var _ref = settings || {},
+      _ref$identifier = _ref.identifier,
+      identifier = _ref$identifier === void 0 ? 'testArticle' : _ref$identifier;
+
+  var content = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    title: title,
+    version: "".concat(1, ".0").toString(),
+    // Note: for some reason only 1.0 works
+    identifier: identifier,
+    language: 'fr',
+    layout: {},
+    documentStyle: {},
+    components: [],
+    componentStyles: {},
+    componentTextStyles: {},
+    componentLayouts: {}
+  }, getArticleDocumentStyle()), getArticleTextStyles()), getArticleLayouts()), getArticleComponents(story)); // console.log('KONTENT', content);
+
+
+  return validate(content, ArticleDefinition);
+};
+
+var name$a = "Format\\Audio";
+var description$a = "The component for adding a playable audio clip.";
+var version$a = "1.7+";
+var from_class$a = null;
+var typed$a = null;
+var url$a = "https://developer.apple.com/documentation/apple_news/audio";
+var properties$a = [{
+  name: "role",
+  type: "string",
+  required: true,
+  description: "Always audio for this component.",
+  value: "audio",
+  read_only: true,
+  typed: false
+}, {
+  name: "URL",
+  type: "uri",
+  required: true,
+  description: "The URL of an audio file (http or https only). This component supports all AVPlayer audio formats, including the following:",
+  typed: false
+}, {
+  name: "accessibilityCaption",
+  type: "string",
+  required: false,
+  description: "A caption that describes the content of the audio file. The text is used for VoiceOver for iOS and VoiceOver for macOS. If accessibilityCaption is not provided, the caption value is used for VoiceOver for iOS and VoiceOver for macOS.",
+  typed: false
+}, {
+  name: "anchor",
+  type: "Format\\Anchor",
+  required: false,
+  description: "An object that defines vertical alignment with another component.",
+  typed: false
+}, {
+  name: "animation",
+  type: "Format\\ComponentAnimation",
+  required: false,
+  description: "An object that defines an animation to be applied to the component.",
+  typed: true
+}, {
+  name: "behavior",
+  type: "Format\\Behavior",
+  required: false,
+  description: "An object that defines behavior for a component, like Parallax or Springy.",
+  typed: true
+}, {
+  name: "caption",
+  type: "string",
+  required: false,
+  description: "A caption that describes the content of the audio file. This text is also used by VoiceOver for iOS and VoiceOver for macOS if accessibilityCaption is not provided, or it can be shown when the audio cannot be played.",
+  typed: false
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalComponent",
+  required: false,
+  description: "An array of component properties that can be applied conditionally, and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "explicitContent",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that indicates the audio may contain explicit content.",
+  typed: false
+}, {
+  name: "hidden",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that determines whether the component is hidden.",
+  "default": "false",
+  typed: false
+}, {
+  name: "identifier",
+  type: "string",
+  required: false,
+  description: "An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.",
+  typed: false
+}, {
+  name: "imageURL",
+  type: "string",
+  required: false,
+  description: "The URL of an image file that represents the audio file, such as a cover image.",
+  typed: false
+}, {
+  name: "layout",
+  type: ["Format\\ComponentLayout", "string"],
+  required: false,
+  description: "An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "style",
+  type: ["Format\\ComponentStyle", "string"],
+  required: false,
+  description: "An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.",
+  typed: false
+}];
+var AudioDefinition = {
+  name: name$a,
+  description: description$a,
+  version: version$a,
+  from_class: from_class$a,
+  "extends": "Format\\Component",
+  typed: typed$a,
+  url: url$a,
+  properties: properties$a
+};
+
+var MediaElement = function MediaElement(story, media) {
+  var role = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'audio';
+  var definition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  var _story$componentLayou = story.componentLayouts,
+      componentLayouts = _story$componentLayou === void 0 ? {} : _story$componentLayou;
+
+  var _ref = media || {},
+      url = _ref.url;
+
+  var content = _objectSpread(_objectSpread({
+    role: role
+  }, componentLayouts[role] ? {
+    layout: role
+  } : {}), {}, {
+    URL: url
+  });
+
+  var component = validate$1(content, definition);
+  return {
+    story: story,
+    component: role === 'audio' ? component : component // Figure out HLS for videos
+
+  };
+};
+
+var Audio = function Audio(story, audio) {
+  return MediaElement(story, audio, 'audio', AudioDefinition);
+};
+
+var name$9 = "Format\\Text";
+var description$9 = "Properties shared by all text component types.";
+var version$9 = "1.7+";
+var from_class$9 = null;
+var typed$9 = null;
+var url$9 = "https://developer.apple.com/documentation/apple_news/text";
+var properties$9 = [{
+  name: "role",
+  type: "string",
+  required: true,
+  description: "The role of a text component depends on the type of content it contains. For example, a PullQuote should have a role of pullquote, and for text in the article body, the role should be body. See Component.",
+  typed: false
+}, {
+  name: "text",
+  type: "string",
+  required: true,
+  description: "The text to display in the article, including any formatting tags depending on the format property.",
+  typed: false
+}, {
+  name: "additions",
+  type: "array:Format\\Addition",
+  required: false,
+  description: "An array of all the additions that should be applied to ranges of the component's text.",
+  typed: false
+}, {
+  name: "anchor",
+  type: "Format\\Anchor",
+  required: false,
+  description: "An object that defines vertical alignment with another component.",
+  typed: false
+}, {
+  name: "animation",
+  type: "Format\\ComponentAnimation",
+  required: false,
+  description: "An object that defines an animation to be applied to the component.",
+  typed: true
+}, {
+  name: "behavior",
+  type: "Format\\Behavior",
+  required: false,
+  description: "An object that defines behavior for a component, like Parallax or Springy.",
+  typed: true
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalText",
+  required: false,
+  description: "An array of text component properties that can be applied conditionally, and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "format",
+  type: "enum:string",
+  required: false,
+  description: "The formatting or markup method applied to the text.",
+  "default": "none",
+  enum_values: ["markdown", "html", "none"],
+  typed: false
+}, {
+  name: "hidden",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that determines whether the component is hidden.",
+  "default": "false",
+  typed: false
+}, {
+  name: "identifier",
+  type: "string",
+  required: false,
+  description: "An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.",
+  typed: false
+}, {
+  name: "inlineTextStyles",
+  type: "array:Format\\InlineTextStyle",
+  required: false,
+  description: "An array of InlineTextStyle objects you can use to apply different text styles to ranges of text. For each InlineTextStyle, you should supply a rangeStart, rangeLength, and either a text style or the identifier of a text style that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "layout",
+  type: ["Format\\ComponentLayout", "string"],
+  required: false,
+  description: "An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "style",
+  type: ["Format\\ComponentStyle", "string"],
+  required: false,
+  description: "An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "textStyle",
+  type: ["Format\\ComponentTextStyle", "string"],
+  required: false,
+  description: "An inline ComponentTextStyle object that contains styling information, or a string reference to a ComponentTextStyle object that is defined at the top level of the document.",
+  typed: false
+}];
+var TextDefinition = {
+  name: name$9,
+  description: description$9,
+  version: version$9,
+  from_class: from_class$9,
+  "extends": "Format\\Component",
+  typed: typed$9,
+  url: url$9,
+  properties: properties$9
+};
+
+var TextElement = function TextElement(story, text) {
+  var role = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'text';
+  var definition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  var props = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+  var _story$componentLayou = story.componentLayouts,
+      componentLayouts = _story$componentLayou === void 0 ? {} : _story$componentLayou;
+
+  var _ref = text || {},
+      _ref$body = _ref.body,
+      body = _ref$body === void 0 ? null : _ref$body,
+      _ref$textStyle = _ref.textStyle,
+      textStyle = _ref$textStyle === void 0 ? null : _ref$textStyle;
+
+  var style = textStyle ? TextStyle(textStyle) : null;
+  var styleName = style !== null ? hash(style) : null;
+  var hasStyle = style !== null && styleName !== null;
+
+  var content = _objectSpread(_objectSpread({
+    role: role
+  }, componentLayouts[role] ? {
+    layout: role
+  } : {}), {}, {
+    text: body,
+    format: 'html'
+  }, props);
+
+  var component = definition ? validate$1(content, definition) : null;
+  return {
+    story: _objectSpread(_objectSpread({}, story), {}, {
+      componentStyles: _objectSpread(_objectSpread({}, story.componentStyles || {}), component !== null && hasStyle ? _defineProperty({}, styleName, style) : {})
+    }),
+    component: component
+  };
+};
+
+var Author = function Author(story, text) {
+  return TextElement(story, text, 'text', TextDefinition, {
+    textStyle: 'style-author'
+  });
+};
+
+var name$8 = "Format\\Container";
+var description$8 = "Properties shared by all container types.";
+var version$8 = "1.7+";
+var from_class$8 = null;
+var typed$8 = null;
+var url$8 = "https://developer.apple.com/documentation/apple_news/container";
+var properties$8 = [{
+  name: "role",
+  type: "string",
+  required: true,
+  description: "Always container for this component.",
+  value: "container",
+  read_only: true,
+  typed: false
+}, {
+  name: "additions",
+  type: "array:Format\\ComponentLink",
+  required: false,
+  description: "An array of ComponentLink objects. This can be used to create a ComponentLink, allowing a link to anywhere in News. Adding a link to a container component makes the entire component interactable. Any links used in its child components are not interactable.",
+  typed: false
+}, {
+  name: "anchor",
+  type: "Format\\Anchor",
+  required: false,
+  description: "An object that defines vertical alignment with another component.",
+  typed: false
+}, {
+  name: "animation",
+  type: "Format\\ComponentAnimation",
+  required: false,
+  description: "An object that defines an animation to be applied to the component.",
+  typed: true
+}, {
+  name: "behavior",
+  type: "Format\\Behavior",
+  required: false,
+  description: "An object that defines behavior for a component, like Parallax or Springy.",
+  typed: true
+}, {
+  name: "components",
+  type: "array:Format\\Component",
+  required: false,
+  description: "An array of components to display as child components. Child components are positioned and rendered relative to their parent component.",
+  typed: true
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalContainer",
+  required: false,
+  description: "An array of container properties that can be applied conditionally, and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "contentDisplay",
+  type: ["Format\\CollectionDisplay", "Format\\HorizontalStackDisplay"],
+  required: false,
+  description: "The object that defines the way child components should be positioned within this container component. A HorizontalStackDisplay for example, allows for displaying child components side-by-side.",
+  typed: false
+}, {
+  name: "hidden",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that determines whether the component is hidden.",
+  "default": "false",
+  typed: false
+}, {
+  name: "identifier",
+  type: "string",
+  required: false,
+  description: "An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.",
+  typed: false
+}, {
+  name: "layout",
+  type: ["Format\\ComponentLayout", "string"],
+  required: false,
+  description: "An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "style",
+  type: ["Format\\ComponentStyle", "string"],
+  required: false,
+  description: "An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.",
+  typed: false
+}];
+var ContainerDefinition = {
+  name: name$8,
+  description: description$8,
+  version: version$8,
+  from_class: from_class$8,
+  "extends": "Format\\Component",
+  typed: typed$8,
+  url: url$8,
+  properties: properties$8
+};
+
+var Container = function Container(story, components) {
+  var content = {
+    role: 'container',
+    components: components
+  };
+  var component = validate$1(content, ContainerDefinition);
+  return {
+    story: story,
+    component: components && components.length > 0 ? component : null
+  };
+};
+
+var name$7 = "Format\\Gallery";
+var description$7 = "The component for displaying a sequence of images in a specific order as a horizontal strip.";
+var version$7 = "1.7+";
+var from_class$7 = null;
+var typed$7 = null;
+var url$7 = "https://developer.apple.com/documentation/apple_news/gallery";
+var properties$7 = [{
+  name: "items",
+  type: "array:Format\\GalleryItem",
+  required: true,
+  description: "An array of the images that appear in the gallery. The order used in the array is the order of the images in the gallery. Gallery items can be JPEG (with .jpg or .jpeg extension), PNG, or GIF images.",
+  typed: false
+}, {
+  name: "role",
+  type: "string",
+  required: true,
+  description: "Always gallery for this component.",
+  value: "gallery",
+  read_only: true,
+  typed: false
+}, {
+  name: "anchor",
+  type: "Format\\Anchor",
+  required: false,
+  description: "An object that defines vertical alignment with another component.",
+  typed: false
+}, {
+  name: "animation",
+  type: "Format\\ComponentAnimation",
+  required: false,
+  description: "An object that defines an animation to be applied to the component.",
+  typed: true
+}, {
+  name: "behavior",
+  type: "Format\\Behavior",
+  required: false,
+  description: "An object that defines behavior for a component, like Parallax or Springy.",
+  typed: true
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalComponent",
+  required: false,
+  description: "An array of component properties that can be applied conditionally, and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "hidden",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that determines whether the component is hidden.",
+  "default": "false",
+  typed: false
+}, {
+  name: "identifier",
+  type: "string",
+  required: false,
+  description: "An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.",
+  typed: false
+}, {
+  name: "layout",
+  type: ["Format\\ComponentLayout", "string"],
+  required: false,
+  description: "An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "style",
+  type: ["Format\\ComponentStyle", "string"],
+  required: false,
+  description: "An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.",
+  typed: false
+}];
+var GalleryDefinition = {
+  name: name$7,
+  description: description$7,
+  version: version$7,
+  from_class: from_class$7,
+  "extends": "Format\\Component",
+  typed: typed$7,
+  url: url$7,
+  properties: properties$7
+};
+
+var GalleryElement = function GalleryElement(story, gallery) {
+  var role = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'gallery';
+  var definition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  var _story$componentLayou = story.componentLayouts,
+      componentLayouts = _story$componentLayou === void 0 ? {} : _story$componentLayou;
+
+  var _ref = gallery || {},
+      _ref$images = _ref.images,
+      images = _ref$images === void 0 ? [] : _ref$images;
+
+  var galleryImages = images !== null ? images.map(function (image) {
+    if (image == null) {
+      return null;
+    }
+
+    var _ref2 = image || {},
+        _ref2$media = _ref2.media,
+        media = _ref2$media === void 0 ? null : _ref2$media,
+        _ref2$url = _ref2.url,
+        url = _ref2$url === void 0 ? null : _ref2$url,
+        _ref2$caption = _ref2.caption,
+        caption = _ref2$caption === void 0 ? null : _ref2$caption;
+
+    var mediaUrl = media !== null && media.url ? media.url : null;
+    var imageUrl = url !== null ? url : null;
+    var hasUrl = imageUrl || mediaUrl;
+    var imageCaption = caption !== null && caption.body ? stripTags(caption.body) : null;
+    return hasUrl ? _objectSpread({
+      URL: imageUrl || mediaUrl
+    }, imageCaption !== null ? {
+      caption: imageCaption
+    } : {}) : null;
+  }).filter(function (i) {
+    return i !== null;
+  }) : [];
+
+  var content = _objectSpread(_objectSpread({
+    role: role
+  }, componentLayouts[role] ? {
+    layout: role
+  } : {}), {}, {
+    items: galleryImages
+  });
+
+  var component = validate$1(content, definition);
+  return {
+    story: story,
+    component: component
+  };
+};
+
+var Gallery = function Gallery(story, gallery) {
+  return GalleryElement(story, gallery, 'gallery', GalleryDefinition);
+};
+
+var name$6 = "Format\\Heading";
+var description$6 = "The text component for adding a heading.";
+var version$6 = "1.7+";
+var from_class$6 = null;
+var typed$6 = null;
+var url$6 = "https://developer.apple.com/documentation/apple_news/heading";
+var properties$6 = [{
+  name: "role",
+  type: "enum:string",
+  required: true,
+  description: "Always one of these roles for this component: heading, heading1, heading2, heading3, heading4, heading5, or heading6.",
+  enum_values: ["heading", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6"],
+  value: "heading",
+  typed: false
+}, {
+  name: "text",
+  type: "string",
+  required: true,
+  description: "The text to display in the article, including any formatting tags depending on the format property.",
+  typed: false
+}, {
+  name: "additions",
+  type: "array:Format\\Addition",
+  required: false,
+  description: "An array of all the additions that should be applied to ranges of the component's text.",
+  typed: false
+}, {
+  name: "anchor",
+  type: "Format\\Anchor",
+  required: false,
+  description: "An object that defines vertical alignment with another component.",
+  typed: false
+}, {
+  name: "animation",
+  type: "Format\\ComponentAnimation",
+  required: false,
+  description: "An object that defines an animation to be applied to the component.",
+  typed: true
+}, {
+  name: "behavior",
+  type: "Format\\Behavior",
+  required: false,
+  description: "An object that defines behavior for a component, like Parallax or Springy.",
+  typed: true
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalText",
+  required: false,
+  description: "An array of text components that can be applied conditionally, and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "format",
+  type: "enum:string",
+  required: false,
+  description: "The formatting or markup method applied to the text.",
+  "default": "none",
+  enum_values: ["markdown", "html", "none"],
+  typed: false
+}, {
+  name: "hidden",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that determines whether the component is hidden.",
+  "default": "false",
+  typed: false
+}, {
+  name: "identifier",
+  type: "string",
+  required: false,
+  description: "An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.",
+  typed: false
+}, {
+  name: "inlineTextStyles",
+  type: "array:Format\\InlineTextStyle",
+  required: false,
+  description: "An array of InlineTextStyle objects that you can use to apply different text styles to ranges of text. For each InlineTextStyle, you should supply a rangeStart, a rangeLength, and either a TextStyle object or the identifier of a TextStyle that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "layout",
+  type: ["Format\\ComponentLayout", "string"],
+  required: false,
+  description: "An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "style",
+  type: ["Format\\ComponentStyle", "string"],
+  required: false,
+  description: "An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "textStyle",
+  type: ["Format\\ComponentTextStyle", "string"],
+  required: false,
+  description: "An inline ComponentTextStyle object that contains styling information, or a string reference to a ComponentTextStyle object that is defined at the top level of the document.",
+  typed: false
+}];
+var HeadingDefinition = {
+  name: name$6,
+  description: description$6,
+  version: version$6,
+  from_class: from_class$6,
+  "extends": "Format\\Text",
+  typed: typed$6,
+  url: url$6,
+  properties: properties$6
+};
+
+var Heading1 = function Heading1(story, heading) {
+  return TextElement(story, heading, 'heading1', HeadingDefinition);
+};
+
+var Heading2 = function Heading2(story, heading) {
+  return TextElement(story, heading, 'heading2', HeadingDefinition);
+};
+
+var name$5 = "Format\\Image";
+var description$5 = "The component for displaying JPEG, PNG, or GIF images.";
+var version$5 = "1.7+";
+var from_class$5 = null;
+var typed$5 = null;
+var url$5 = "https://developer.apple.com/documentation/apple_news/image";
+var properties$5 = [{
+  name: "role",
+  type: "string",
+  required: true,
+  description: "Always image for this component.",
+  value: "image",
+  read_only: true,
+  typed: false
+}, {
+  name: "URL",
+  type: "uri",
+  required: true,
+  description: "The URL of an image file.",
+  typed: false
+}, {
+  name: "accessibilityCaption",
+  type: "string",
+  required: false,
+  description: "A caption that describes the image. The text is used for VoiceOver for iOS and VoiceOver for macOS. If accessibilityCaption is not provided, the caption value is used for VoiceOver for iOS and VoiceOver for macOS.",
+  typed: false
+}, {
+  name: "additions",
+  type: "array:Format\\ComponentLink",
+  required: false,
+  description: "An array of ComponentLink objects. This can be used to create a ComponentLink, allowing a link to anywhere in News.",
+  typed: false
+}, {
+  name: "anchor",
+  type: "Format\\Anchor",
+  required: false,
+  description: "An object that defines vertical alignment with another component.",
+  typed: false
+}, {
+  name: "animation",
+  type: "Format\\ComponentAnimation",
+  required: false,
+  description: "An object that defines an animation to be applied to the component.",
+  typed: true
+}, {
+  name: "behavior",
+  type: "Format\\Behavior",
+  required: false,
+  description: "An object that defines behavior for a component, like Parallax or Springy.",
+  typed: true
+}, {
+  name: "caption",
+  type: ["Format\\CaptionDescriptor", "string"],
+  required: false,
+  description: "A caption that describes the image. The text is seen when the image is in full screen. This text is also used by VoiceOver for iOS and VoiceOver for macOS, if accessibilityCaption text is not provided. The caption text does not appear in the main article view. To display a caption in the main article view, use the Caption component.",
+  typed: false
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalComponent",
+  required: false,
+  description: "An array of component properties that can be applied conditionally, and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "explicitContent",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that indicates the image may contain explicit content.",
+  typed: false
+}, {
+  name: "hidden",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that determines whether the component is hidden.",
+  "default": "false",
+  typed: false
+}, {
+  name: "identifier",
+  type: "string",
+  required: false,
+  description: "An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.",
+  typed: false
+}, {
+  name: "layout",
+  type: ["Format\\ComponentLayout", "string"],
+  required: false,
+  description: "An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "style",
+  type: ["Format\\ComponentStyle", "string"],
+  required: false,
+  description: "An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.",
+  typed: false
+}];
+var ImageDefinition = {
+  name: name$5,
+  description: description$5,
+  version: version$5,
+  from_class: from_class$5,
+  "extends": "Format\\Component",
+  typed: typed$5,
+  url: url$5,
+  properties: properties$5
+};
+
+var ImageElement = function ImageElement(story, image) {
+  var role = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'image';
+  var definition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  var _story$componentLayou = story.componentLayouts,
+      componentLayouts = _story$componentLayou === void 0 ? {} : _story$componentLayou;
+
+  var _ref = image || {},
+      url = _ref.url;
+
+  var content = _objectSpread(_objectSpread({
+    role: role
+  }, componentLayouts[role] ? {
+    layout: role
+  } : {}), {}, {
+    URL: url
+  });
+
+  var component = validate$1(content, definition);
+  return {
+    story: story,
+    component: component
+  };
+};
+
+var Image = function Image(story, image) {
+  return ImageElement(story, image, 'image', ImageDefinition);
+};
+
+var name$4 = "Format\\Map";
+var description$4 = "The component for adding a map.";
+var version$4 = "1.7+";
+var from_class$4 = null;
+var typed$4 = null;
+var url$4 = "https://developer.apple.com/documentation/apple_news/map";
+var properties$4 = [{
+  name: "latitude",
+  type: "number",
+  required: true,
+  description: "The latitude of the map’s center. Provide both a latitude and longitude, or an array of items.",
+  typed: false
+}, {
+  name: "longitude",
+  type: "number",
+  required: true,
+  description: "The longitude of the map’s center. Provide both a latitude and longitude, or an array of items.",
+  typed: false
+}, {
+  name: "role",
+  type: "string",
+  required: true,
+  description: "Always map for this component.",
+  value: "map",
+  read_only: true,
+  typed: false
+}, {
+  name: "accessibilityCaption",
+  type: "string",
+  required: false,
+  description: "The caption that describes what is visible on the map. The text is used for VoiceOver for iOS and VoiceOver for macOS. The value in this property should describe the contents of the map for non-sighted users. If accessibilityCaption is not provided the caption value is used for VoiceOver for iOS and VoiceOver for macOS.",
+  typed: false
+}, {
+  name: "anchor",
+  type: "Format\\Anchor",
+  required: false,
+  description: "An object that defines vertical alignment with another component.",
+  typed: false
+}, {
+  name: "animation",
+  type: "Format\\ComponentAnimation",
+  required: false,
+  description: "An object that defines an animation to be applied to the component.",
+  typed: true
+}, {
+  name: "behavior",
+  type: "Format\\Behavior",
+  required: false,
+  description: "An object that defines behavior for a component, like Parallax or Springy.",
+  typed: true
+}, {
+  name: "caption",
+  type: "string",
+  required: false,
+  description: "A string that describes what is displayed on the map. The caption is displayed in the full screen version of the map. This text is also used by VoiceOver for iOS and VoiceOver for macOS, if accessibilityCaption text is not provided.",
+  typed: false
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalComponent",
+  required: false,
+  description: "An array of component properties that can be applied conditionally, and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "hidden",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that determines whether the component is hidden.",
+  "default": "false",
+  typed: false
+}, {
+  name: "identifier",
+  type: "string",
+  required: false,
+  description: "An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.",
+  typed: false
+}, {
+  name: "items",
+  type: "array:Format\\MapItem",
+  required: false,
+  description: "An array of MapItems. If latitude and longitude are not set, at least one item containing latitude and longitude should be added to the items array.",
+  typed: false
+}, {
+  name: "layout",
+  type: ["Format\\ComponentLayout", "string"],
+  required: false,
+  description: "An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "mapType",
+  type: "enum:string",
+  required: false,
+  description: "A string that defines the type of map to display by default.",
+  "default": "standard",
+  enum_values: ["standard", "hybrid", "satellite"],
+  typed: false
+}, {
+  name: "span",
+  type: "Format\\MapSpan",
+  required: false,
+  description: "An object for defining the visible area of a map, relative to its center. A span is defined in deltas for latitude and longitude.",
+  typed: false
+}, {
+  name: "style",
+  type: ["Format\\ComponentStyle", "string"],
+  required: false,
+  description: "An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.",
+  typed: false
+}];
+var MapDefinition = {
+  name: name$4,
+  description: description$4,
+  version: version$4,
+  from_class: from_class$4,
+  "extends": "Format\\Component",
+  typed: typed$4,
+  url: url$4,
+  properties: properties$4
+};
+
+var MapElement = function MapElement(story, map) {
+  var role = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'map';
+  var definition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  var _story$componentLayou = story.componentLayouts,
+      componentLayouts = _story$componentLayou === void 0 ? {} : _story$componentLayou;
+
+  var _ref = map || {},
+      _ref$latitude = _ref.latitude,
+      latitude = _ref$latitude === void 0 ? null : _ref$latitude,
+      _ref$longitude = _ref.longitude,
+      longitude = _ref$longitude === void 0 ? null : _ref$longitude;
+
+  var content = _objectSpread(_objectSpread({
+    role: role
+  }, componentLayouts[role] ? {
+    layout: role
+  } : {}), {}, {
+    latitude: latitude,
+    longitude: longitude
+  });
+
+  var component = validate$1(content, definition);
+  return {
+    story: story,
+    component: component
+  };
+};
+
+var Map = function Map(story, map) {
+  return MapElement(story, map, 'map', MapDefinition);
+};
+
+var name$3 = "Format\\Mosaic";
+var description$3 = "The component for displaying a set of images as tiles in no particular order.";
+var version$3 = "1.7+";
+var from_class$3 = null;
+var typed$3 = null;
+var url$3 = "https://developer.apple.com/documentation/apple_news/mosaic";
+var properties$3 = [{
+  name: "items",
+  type: "array:Format\\GalleryItem",
+  required: true,
+  description: "An array of the images that will appear in the mosaic. The order used in the array may affect layout and positioning in the mosaic, depending on the device or width. Gallery items can be JPEG (with .jpg or .jpeg extension), PNG, or GIF images. If the GIF is animated, the animation plays only in full screen.",
+  typed: false
+}, {
+  name: "role",
+  type: "string",
+  required: true,
+  description: "Always mosaic for this component.",
+  value: "mosaic",
+  read_only: true,
+  typed: false
+}, {
+  name: "anchor",
+  type: "Format\\Anchor",
+  required: false,
+  description: "An object that defines vertical alignment with another component.",
+  typed: false
+}, {
+  name: "animation",
+  type: "Format\\ComponentAnimation",
+  required: false,
+  description: "An object that defines an animation to be applied to the component.",
+  typed: true
+}, {
+  name: "behavior",
+  type: "Format\\Behavior",
+  required: false,
+  description: "An object that defines behavior for a component, like Parallax or Springy.",
+  typed: true
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalComponent",
+  required: false,
+  description: "An array of component properties that can be applied conditionally, and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "hidden",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that determines whether the component is hidden.",
+  "default": "false",
+  typed: false
+}, {
+  name: "identifier",
+  type: "string",
+  required: false,
+  description: "An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.",
+  typed: false
+}, {
+  name: "layout",
+  type: ["Format\\ComponentLayout", "string"],
+  required: false,
+  description: "An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "style",
+  type: ["Format\\ComponentStyle", "string"],
+  required: false,
+  description: "An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.",
+  typed: false
+}];
+var MosaicDefinition = {
+  name: name$3,
+  description: description$3,
+  version: version$3,
+  from_class: from_class$3,
+  "extends": "Format\\Component",
+  typed: typed$3,
+  url: url$3,
+  properties: properties$3
+};
+
+var Mosaic = function Mosaic(story, mosaic) {
+  return GalleryElement(story, mosaic, 'mosaic', MosaicDefinition);
+};
+
+var name$2 = "Format\\Quote";
+var description$2 = "The component for including a quote.";
+var version$2 = "1.7+";
+var from_class$2 = null;
+var typed$2 = null;
+var url$2 = "https://developer.apple.com/documentation/apple_news/quote";
+var properties$2 = [{
+  name: "role",
+  type: "string",
+  required: true,
+  description: "Always quote for this component.",
+  value: "quote",
+  read_only: true,
+  typed: false
+}, {
+  name: "text",
+  type: "string",
+  required: true,
+  description: "The text to display in the article, including any formatting tags depending on the format property.",
+  typed: false
+}, {
+  name: "additions",
+  type: "array:Format\\Addition",
+  required: false,
+  description: "An array of all the additions that should be applied to ranges of the component's text.",
+  typed: false
+}, {
+  name: "anchor",
+  type: "Format\\Anchor",
+  required: false,
+  description: "An object that defines vertical alignment with another component.",
+  typed: false
+}, {
+  name: "animation",
+  type: "Format\\ComponentAnimation",
+  required: false,
+  description: "An object that defines an animation to be applied to the component.",
+  typed: true
+}, {
+  name: "behavior",
+  type: "Format\\Behavior",
+  required: false,
+  description: "An object that defines behavior for a component, like Parallax or Springy.",
+  typed: true
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalText",
+  required: false,
+  description: "An array of text components that can be applied conditionally and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "format",
+  type: "enum:string",
+  required: false,
+  description: "The formatting or markup method applied to the text.",
+  "default": "none",
+  enum_values: ["markdown", "html", "none"],
+  typed: false
+}, {
+  name: "hidden",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that determines whether the component is hidden.",
+  "default": "false",
+  typed: false
+}, {
+  name: "identifier",
+  type: "string",
+  required: false,
+  description: "An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.",
+  typed: false
+}, {
+  name: "inlineTextStyles",
+  type: "array:Format\\InlineTextStyle",
+  required: false,
+  description: "An array of InlineTextStyle objects that you can use to apply different text styles to ranges of text. For each InlineTextStyle, you should supply a rangeStart, rangeLength, and either a TextStyle object or the identifier of a TextStyle that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "layout",
+  type: ["Format\\ComponentLayout", "string"],
+  required: false,
+  description: "An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "style",
+  type: ["Format\\ComponentStyle", "string"],
+  required: false,
+  description: "An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "textStyle",
+  type: ["Format\\ComponentTextStyle", "string"],
+  required: false,
+  description: "An inline ComponentTextStyle object that contains styling information, or a string reference to a ComponentTextStyle object that is defined at the top level of the document.",
+  typed: false
+}];
+var QuoteDefinition = {
+  name: name$2,
+  description: description$2,
+  version: version$2,
+  from_class: from_class$2,
+  "extends": "Format\\Text",
+  typed: typed$2,
+  url: url$2,
+  properties: properties$2
+};
+
+var Quote = function Quote(story, quote) {
+  return TextElement(story, quote, 'quote', QuoteDefinition);
+};
+
+var name$1 = "Format\\Title";
+var description$1 = "The component for adding an article title.";
+var version$1 = "1.7+";
+var from_class$1 = null;
+var typed$1 = null;
+var url$1 = "https://developer.apple.com/documentation/apple_news/title";
+var properties$1 = [{
+  name: "role",
+  type: "string",
+  required: true,
+  description: "Always title for this component.",
+  value: "title",
+  read_only: true,
+  typed: false
+}, {
+  name: "text",
+  type: "string",
+  required: true,
+  description: "The text to display in the article, including any formatting tags depending on the format property.",
+  typed: false
+}, {
+  name: "additions",
+  type: "array:Format\\Addition",
+  required: false,
+  description: "An array of all the additions that should be applied to ranges of the component's text.",
+  typed: false
+}, {
+  name: "anchor",
+  type: "Format\\Anchor",
+  required: false,
+  description: "An object that defines vertical alignment with another component.",
+  typed: false
+}, {
+  name: "animation",
+  type: "Format\\ComponentAnimation",
+  required: false,
+  description: "An object that defines an animation to be applied to the component.",
+  typed: true
+}, {
+  name: "behavior",
+  type: "Format\\Behavior",
+  required: false,
+  description: "An object that defines behavior for a component, like Parallax or Springy.",
+  typed: true
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalText",
+  required: false,
+  description: "An array of text components that can be applied conditionally, and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "format",
+  type: "enum:string",
+  required: false,
+  description: "The formatting or markup method applied to the text.",
+  "default": "none",
+  enum_values: ["markdown", "html", "none"],
+  typed: false
+}, {
+  name: "hidden",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that determines whether the component is hidden.",
+  "default": "false",
+  typed: false
+}, {
+  name: "identifier",
+  type: "string",
+  required: false,
+  description: "An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.",
+  typed: false
+}, {
+  name: "inlineTextStyles",
+  type: "array:Format\\InlineTextStyle",
+  required: false,
+  description: "An array of InlineTextStyle objects that you can use to apply different text styles to ranges of text. For each InlineTextStyle, you should supply a rangeStart, a rangeLength, and either a TextStyle object or the identifier of a TextStyle that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "layout",
+  type: ["Format\\ComponentLayout", "string"],
+  required: false,
+  description: "An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "style",
+  type: ["Format\\ComponentStyle", "string"],
+  required: false,
+  description: "An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "textStyle",
+  type: ["Format\\ComponentTextStyle", "string"],
+  required: false,
+  description: "An inline ComponentTextStyle object that contains styling information, or a string reference to a ComponentTextStyle object that is defined at the top level of the document.",
+  typed: false
+}];
+var TitleDefinition = {
+  name: name$1,
+  description: description$1,
+  version: version$1,
+  from_class: from_class$1,
+  "extends": "Format\\Text",
+  typed: typed$1,
+  url: url$1,
+  properties: properties$1
+};
+
+var Subtitle = function Subtitle(story, subtitle) {
+  return TextElement(story, subtitle, 'title', TitleDefinition);
+};
+
+var Text = function Text(story, text) {
+  return TextElement(story, text, 'text', TextDefinition);
+};
+
+var Title = function Title(story, title) {
+  return TextElement(story, title, 'title', TitleDefinition);
+};
+
+var name = "Format\\Video";
+var description = "The component for adding a video.";
+var version = "1.7+";
+var from_class = null;
+var typed = null;
+var url = "https://developer.apple.com/documentation/apple_news/video";
+var properties = [{
+  name: "role",
+  type: "string",
+  required: true,
+  description: "Always video for this component.",
+  value: "video",
+  read_only: true,
+  typed: false
+}, {
+  name: "URL",
+  type: "uri",
+  required: true,
+  description: "The URL of a video file that can be played using AVPlayer. HTTP Live Streaming (HLS) is highly recommended (.M3U8). For more information on HLS, refer to the iOS developer documentation on HTTP Live Streaming, especially the following sections of the HTTP Live Streaming Overview:",
+  typed: false
+}, {
+  name: "accessibilityCaption",
+  type: "string",
+  required: false,
+  description: "A caption that describes the content of the video. The text is used for VoiceOver for iOS and VoiceOver for macOS. If accessibilityCaption is not provided, the caption value is used for VoiceOver for iOS and VoiceOver for macOS.",
+  typed: false
+}, {
+  name: "anchor",
+  type: "Format\\Anchor",
+  required: false,
+  description: "An object that defines vertical alignment with another component.",
+  typed: false
+}, {
+  name: "animation",
+  type: "Format\\ComponentAnimation",
+  required: false,
+  description: "An object that defines an animation to be applied to the component.",
+  typed: true
+}, {
+  name: "aspectRatio",
+  type: "number",
+  required: false,
+  description: "The aspect ratio of the video: width divided by height. The aspect ratio determines the height of the video player.",
+  "default": 1.777,
+  typed: false
+}, {
+  name: "behavior",
+  type: "Format\\Behavior",
+  required: false,
+  description: "An object that defines behavior for a component, like Parallax or Springy.",
+  typed: true
+}, {
+  name: "caption",
+  type: "string",
+  required: false,
+  description: "A caption that describes the content of the video file. This text is also used by VoiceOver for iOS and VoiceOver for macOS if accessibilityCaption is not provided, or it can be shown when the video cannot be played.",
+  typed: false
+}, {
+  name: "conditional",
+  type: "array:Format\\ConditionalComponent",
+  required: false,
+  description: "An array of component properties that can be applied conditionally, and the conditions that cause them to be applied.",
+  typed: false
+}, {
+  name: "explicitContent",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that indicates that the video or its still image may contain explicit content.",
+  typed: false
+}, {
+  name: "hidden",
+  type: "boolean",
+  required: false,
+  description: "A Boolean value that determines whether the component is hidden.",
+  "default": "false",
+  typed: false
+}, {
+  name: "identifier",
+  type: "string",
+  required: false,
+  description: "An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.",
+  typed: false
+}, {
+  name: "layout",
+  type: ["Format\\ComponentLayout", "string"],
+  required: false,
+  description: "An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.",
+  typed: false
+}, {
+  name: "stillURL",
+  type: "uri",
+  required: false,
+  description: "The URL of an image file that should be shown when the video has not yet been played.",
+  typed: false
+}, {
+  name: "style",
+  type: ["Format\\ComponentStyle", "string"],
+  required: false,
+  description: "An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.",
+  typed: false
+}];
+var VideoDefinition = {
+  name: name,
+  description: description,
+  version: version,
+  from_class: from_class,
+  "extends": "Format\\Component",
+  typed: typed,
+  url: url,
+  properties: properties
+};
+
+var Video = function Video(story, video) {
+  return MediaElement(story, video, 'video', VideoDefinition);
+};
+
+export { Article, Audio, Author, Container, Gallery, Heading1, Heading2, Image, Map, Mosaic, Quote, Subtitle, Text, TextStyle, Title, Video };