@twreporter/react-article-components 2.3.1 → 2.4.0-rc.1

package/lib/components/body/image-diff.js

@@ -11,9 +11,9 @@ var _multimedia = _interopRequireDefault(require("./multimedia"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _slider = _interopRequireWildcard(require("./slider"));
-var _theme = _interopRequireDefault(require("../../constants/theme"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _color = require("@twreporter/core/lib/constants/color");
+var _theme = require("@twreporter/core/lib/constants/theme");
 var _get = _interopRequireDefault(require("lodash/get"));
 var _templateObject, _templateObject2, _templateObject3; // lodash
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -59,11 +59,11 @@ var getResponsiveBackground = function getResponsiveBackground(imageSetPropKey)
 };
 var sharedStyleOfIndicatorPointer = /*#__PURE__*/(0, _styledComponents.css)(["padding-top:4px;text-align:center;font-size:12px;display:block;position:absolute;top:0;width:24px;height:24px;background:", ";color:", ";"], _color.colorGrayscale.white, function (props) {
   switch (props.theme.name) {
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return _color.colorSupportive.heavy;
-    case _theme["default"].article.v2.pink:
+    case _theme.ARTICLE_THEME.v2.pink:
       return _color.COLOR_PINK_ARTICLE.pink;
-    case _theme["default"].article.v2["default"]:
+    case _theme.ARTICLE_THEME.v2["default"]:
     default:
       return _color.colorSupportive.main;
   }
@@ -71,7 +71,7 @@ var sharedStyleOfIndicatorPointer = /*#__PURE__*/(0, _styledComponents.css)(["pa
 var ImageContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "image-diff__ImageContainer",
   componentId: "sc-1y1eq1w-0"
-})(["overflow:hidden;position:relative;width:100%;padding-bottom:", ";>div{position:absolute;top:0;left:0;width:100%;height:100%;}", ",", "{background-repeat:no-repeat;background-size:auto 100%;background-position:left center;}", "{", "}", "{", "}", "{width:3px;background:", ";&::after{content:\"", "\";", " left:0;transform:translateX(-100%);border-radius:0 0 0 100%;text-align:right;padding-right:3px;}&::before{content:\"", "\";", " right:0;transform:translateX(100%);border-radius:0 0 100% 0;text-align:left;padding-left:3px;}}"], function (props) {
+})(["overflow:hidden;position:relative;width:100%;padding-bottom:", ";> div{position:absolute;top:0;left:0;width:100%;height:100%;}", ",", "{background-repeat:no-repeat;background-size:auto 100%;background-position:left center;}", "{", "}", "{", "}", "{width:3px;background:", ";&::after{content:'", "';", " left:0;transform:translateX(-100%);border-radius:0 0 0 100%;text-align:right;padding-right:3px;}&::before{content:'", "';", " right:0;transform:translateX(100%);border-radius:0 0 100% 0;text-align:left;padding-left:3px;}}"], function (props) {
   return "".concat(100 * props.$heightWidthRatio, "%");
 }, _slider.Progress, _slider.Rail, _slider.Progress, getResponsiveBackground('leftImageSet'), _slider.Rail, getResponsiveBackground('rightImageSet'), _slider.Indicator, _color.colorGrayscale.white, unicodeToString('25C4'), sharedStyleOfIndicatorPointer, unicodeToString('25BA'), sharedStyleOfIndicatorPointer);
 var ImageDiff = exports["default"] = /*#__PURE__*/function (_PureComponent) {

package/lib/components/body/infobox.js

@@ -11,11 +11,11 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
 var _css = _interopRequireDefault(require("../../constants/css"));
-var _theme = _interopRequireDefault(require("../../constants/theme"));
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 var _anchor = require("../../constants/anchor");
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _color = require("@twreporter/core/lib/constants/color");
+var _theme = require("@twreporter/core/lib/constants/theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // constants
 // twreporter
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -58,11 +58,11 @@ var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 });
 function getContainerStyles(themeName) {
   switch (themeName) {
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.colorSupportive.heavy);
-    case _theme["default"].article.v2.pink:
+    case _theme.ARTICLE_THEME.v2.pink:
       return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.COLOR_PINK_ARTICLE.pink);
-    case _theme["default"].article.v2["default"]:
+    case _theme.ARTICLE_THEME.v2["default"]:
     default:
       return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.colorSupportive.main);
   }

package/lib/components/body/multimedia.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _theme = _interopRequireDefault(require("../../constants/theme"));
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 var _color = require("@twreporter/core/lib/constants/color");
+var _theme = require("@twreporter/core/lib/constants/theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -65,11 +65,11 @@ var mockup = {
 
 function getCaptionStyles(themeName) {
   switch (themeName) {
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color.colorGrayscale.gray300, _color.colorGrayscale.gray400);
-    case _theme["default"].article.v2.pink:
+    case _theme.ARTICLE_THEME.v2.pink:
       return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color.colorGrayscale.gray700, _color.COLOR_PINK_ARTICLE.pink);
-    case _theme["default"].article.v2["default"]:
+    case _theme.ARTICLE_THEME.v2["default"]:
     default:
       return (0, _styledComponents.css)(["color:", ";&::after{border-color:", ";}"], _color.colorGrayscale.gray700, _color.colorSupportive.main);
   }

package/lib/components/body/paragraph.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _color = require("@twreporter/core/lib/constants/color");
+var _theme = require("@twreporter/core/lib/constants/theme");
 var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
 var _css = _interopRequireDefault(require("../../constants/css"));
-var _theme = _interopRequireDefault(require("../../constants/theme"));
 var _get = _interopRequireDefault(require("lodash/get"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -32,7 +32,7 @@ var P = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   return props.$forTrackingSection ? "font-size: ".concat(props.theme.fontSizeOffset + 16, "px") : '';
 }, function (props) {
   switch (props.theme.name) {
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return (0, _styledComponents.css)(["strong{color:", ";}"], _color.colorGrayscale.gray300);
     default:
       return '';

package/lib/components/body/slideshow/index.js

@@ -14,9 +14,9 @@ var _map = _interopRequireDefault(require("lodash/map"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _theme = _interopRequireDefault(require("../../../constants/theme"));
 var _typography = _interopRequireDefault(require("../../../constants/typography"));
 var _color = require("@twreporter/core/lib/constants/color");
+var _theme = require("@twreporter/core/lib/constants/theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -219,11 +219,11 @@ var SlideshowFlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig(
 }, _mediaQuery["default"].tabletAndBelow(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), mockup.desktop.container.width), _mediaQuery["default"].hdOnly(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), mockup.hd.container.width));
 function getSlideshowFlexBoxStyles(themeName) {
   switch (themeName) {
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}"], PrevButton, _color.colorGrayscale.gray400, ImageNumberCircle, _color.colorSupportive.main, _color.COLOR_PINK_ARTICLE.darkBlue, ImageNumber, _color.COLOR_PINK_ARTICLE.darkBlue);
-    case _theme["default"].article.v2.pink:
+    case _theme.ARTICLE_THEME.v2.pink:
       return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}"], PrevButton, _color.colorGrayscale.gray300, ImageNumberCircle, _color.COLOR_PINK_ARTICLE.pink, _color.colorGrayscale.white, ImageNumber, _color.colorGrayscale.white);
-    case _theme["default"].article.v2["default"]:
+    case _theme.ARTICLE_THEME.v2["default"]:
     default:
       return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}"], PrevButton, _color.colorGrayscale.gray300, ImageNumberCircle, _color.colorSupportive.main, _color.colorGrayscale.white, ImageNumber, _color.colorGrayscale.white);
   }

package/lib/components/leading/embedded.js

@@ -0,0 +1,145 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _reactRouterDom = require("react-router-dom");
+var _headline = require("@twreporter/react-components/lib/text/headline");
+var _paragraph = require("@twreporter/react-components/lib/text/paragraph");
+var _color = require("@twreporter/core/lib/constants/color");
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _leading = _interopRequireDefault(require("../../constants/prop-types/leading"));
+var _embeddedCode = _interopRequireDefault(require("../body/embedded-code"));
+var _map = _interopRequireDefault(require("lodash/map"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10; // @twreporter
+// constants
+// component
+// lodash
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _ = {
+  map: _map["default"]
+};
+var EmbeddedBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "embedded__EmbeddedBlock",
+  componentId: "sc-1uuttwk-0"
+})(["max-width:100%;max-height:100%;"]);
+var ContentBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "embedded__ContentBlock",
+  componentId: "sc-1uuttwk-1"
+})(["width:100%;display:flex;margin-top:16px;margin-bottom:64px;justify-content:space-between;", " ", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 1280px;\n    margin: 16px auto 64px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: 0 48px;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex-direction: column;\n    width: 66.7%;\n    margin: 16px auto 64px;\n    "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n    padding: 0 24px;\n  "]))));
+var TitleBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "embedded__TitleBlock",
+  componentId: "sc-1uuttwk-2"
+})(["display:flex;flex-direction:column;gap:16px;order:1;", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 940px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width:calc(740px + (50% - 550px));\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    order: 2;\n  "]))));
+var CaptionBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "embedded__CaptionBlock",
+  componentId: "sc-1uuttwk-3"
+})(["order:2;", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 265px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: 180px;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    order: 1;\n    margin-bottom: 32px;\n  "]))));
+var Caption = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
+  displayName: "embedded__Caption",
+  componentId: "sc-1uuttwk-4"
+})(["color:", ";"], _color.colorGrayscale.gray600);
+var Title = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H1).withConfig({
+  displayName: "embedded__Title",
+  componentId: "sc-1uuttwk-5"
+})(["color:", ";"], _color.colorGrayscale.gray800);
+var SubTitle = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H5).withConfig({
+  displayName: "embedded__SubTitle",
+  componentId: "sc-1uuttwk-6"
+})(["color:", ";"], _color.colorGrayscale.gray800);
+var TopicTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "embedded__TopicTitle",
+  componentId: "sc-1uuttwk-7"
+})(["padding:8px 10px;color:", ";border:1px solid ", ";width:fit-content;cursor:pointer;"], _color.colorSupportive.heavy, _color.colorSupportive.main);
+var spin = /*#__PURE__*/(0, _styledComponents.keyframes)(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
+var Loader = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  displayName: "embedded__Loader",
+  componentId: "sc-1uuttwk-8"
+})(["width:32px;height:32px;border:2px solid ", ";border-top-color:", ";border-radius:50%;display:inline-block;box-sizing:border-box;animation:", " 1s linear infinite;"], _color.colorGrayscale.gray400, _color.colorGrayscale.gray600, spin);
+var LoaderContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "embedded__LoaderContainer",
+  componentId: "sc-1uuttwk-9"
+})(["width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;"]);
+var Embedded = function Embedded(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    topicHref = _ref.topicHref,
+    shortTitle = _ref.shortTitle,
+    isTopicPublished = _ref.isTopicPublished,
+    embedded = _ref.embedded;
+  var navigate = (0, _reactRouterDom.useHistory)();
+  var _useState = (0, _react.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    captionText = _useState2[0],
+    setCaptionText = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    embeddedCode = _useState4[0],
+    setEmbeddedCode = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isLoading = _useState6[0],
+    setIsLoading = _useState6[1];
+  var onTopicClick = function onTopicClick() {
+    navigate.push(topicHref);
+  };
+  var handleIsLoaded = function handleIsLoaded() {
+    setIsLoading(false);
+  };
+  (0, _react.useEffect)(function () {
+    if (embedded.length > 0) {
+      _.map(embedded, function (code) {
+        switch (code.type) {
+          case 'embedded-code':
+          case 'embeddedCode':
+          case 'embeddedcode':
+            var content = code.content;
+            if (content.length > 0) {
+              var caption = content[0].caption;
+              if (caption) {
+                setCaptionText(caption);
+              }
+              setEmbeddedCode(code);
+            }
+            break;
+        }
+      });
+    }
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", null, isLoading ? /*#__PURE__*/_react["default"].createElement(LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(Loader, null)) : null, embeddedCode ? /*#__PURE__*/_react["default"].createElement(EmbeddedBlock, null, /*#__PURE__*/_react["default"].createElement(_embeddedCode["default"], {
+    data: embeddedCode,
+    showCaption: !captionText,
+    handleIsLoaded: handleIsLoaded
+  })) : null, /*#__PURE__*/_react["default"].createElement(ContentBlock, null, /*#__PURE__*/_react["default"].createElement(TitleBlock, null, isTopicPublished && shortTitle ? /*#__PURE__*/_react["default"].createElement(TopicTitle, {
+    onClick: onTopicClick
+  }, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+    text: shortTitle,
+    weight: _paragraph.P2.Weight.BOLD
+  })) : null, subtitle && /*#__PURE__*/_react["default"].createElement(SubTitle, {
+    text: subtitle
+  }), /*#__PURE__*/_react["default"].createElement(Title, {
+    text: title
+  })), captionText ? /*#__PURE__*/_react["default"].createElement(CaptionBlock, null, /*#__PURE__*/_react["default"].createElement(Caption, {
+    text: captionText
+  })) : null));
+};
+Embedded.propTypes = _objectSpread({}, _leading["default"].embedded);
+var _default = exports["default"] = Embedded;

package/lib/components/leading/index.js

@@ -9,11 +9,13 @@ var _fullscreen = _interopRequireDefault(require("./fullscreen"));
 var _normal = _interopRequireDefault(require("./normal"));
 var _pink = _interopRequireDefault(require("./pink"));
 var _small = _interopRequireDefault(require("./small"));
+var _embedded = _interopRequireDefault(require("./embedded"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var _default = exports["default"] = {
   Extend: _extend["default"],
   Fullscreen: _fullscreen["default"],
   Normal: _normal["default"],
   Pink: _pink["default"],
-  Small: _small["default"]
+  Small: _small["default"],
+  Embedded: _embedded["default"]
 };

package/lib/components/leading/normal.js

@@ -10,11 +10,11 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholder"));
 var _leading = _interopRequireDefault(require("../../constants/prop-types/leading"));
-var _theme = _interopRequireDefault(require("../../constants/theme"));
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _color = require("@twreporter/core/lib/constants/color");
 var _headline = require("@twreporter/react-components/lib/text/headline");
+var _theme = require("@twreporter/core/lib/constants/theme");
 var _get = _interopRequireDefault(require("lodash/get"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21; // components
 // constants
@@ -78,9 +78,9 @@ var BackgroundBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 }, _mediaQuery["default"].hdOnly(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    padding-top: 100px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    padding-top: 48px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    padding-top: 32px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    padding-top: 30px;\n  "]))));
 function getBackgroundBlockStyles(themeName) {
   switch (themeName) {
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return (0, _styledComponents.css)(["background-color:", ";", "{color:", ";}", "{color:", ";border-color:", ";}", ",", "{color:", ";}"], _color.COLOR_PINK_ARTICLE.darkBlue, FigCaption, _color.colorGrayscale.gray600, Topic, _color.colorSupportive.main, _color.colorSupportive.heavy, Subtitle, Title, _color.colorGrayscale.gray300);
-    case _theme["default"].article.v2["default"]:
+    case _theme.ARTICLE_THEME.v2["default"]:
     default:
       return (0, _styledComponents.css)(["background-color:", ";", "{color:", ";}", "{color:", ";border-color:", ";}", ",", "{color:", ";}"], _color.colorGrayscale.gray100, FigCaption, _color.colorGrayscale.gray600, Topic, _color.colorSupportive.heavy, _color.colorSupportive.main, Subtitle, Title, _color.colorGrayscale.gray800);
   }

package/lib/components/related/card.js

@@ -12,9 +12,9 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 var _related = _interopRequireDefault(require("../../constants/prop-types/related"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _theme = _interopRequireDefault(require("../../constants/theme"));
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 var _color = require("@twreporter/core/lib/constants/color");
+var _theme = require("@twreporter/core/lib/constants/theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -87,11 +87,11 @@ var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 }, _mediaQuery["default"].tabletAndBelow(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    height: auto;\n    width: 100%;\n    min-height: 152px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockup["default"].desktop.thumbnail.width), _mediaQuery["default"].hdOnly(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockup["default"].hd.thumbnail.width));
 function getBlockStyles(themeName) {
   switch (themeName) {
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color.colorSupportive.main, Title, _color.colorGrayscale.gray300, StyledImg, _color.colorGrayscale.gray400);
-    case _theme["default"].article.v2.pink:
+    case _theme.ARTICLE_THEME.v2.pink:
       return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color.COLOR_PINK_ARTICLE.darkPink, Title, _color.colorGrayscale.gray800, StyledImg, _color.colorGrayscale.gray200);
-    case _theme["default"].article.v2["default"]:
+    case _theme.ARTICLE_THEME.v2["default"]:
     default:
       return (0, _styledComponents.css)(["", "{color:", ";}", "{color:", ";}", "{background-color:", ";}"], Category, _color.colorSupportive.heavy, Title, _color.colorGrayscale.gray800, StyledImg, _color.colorGrayscale.gray200);
   }

package/lib/components/related/index.js

@@ -9,10 +9,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _list = _interopRequireDefault(require("./list"));
-var _theme = _interopRequireDefault(require("../../constants/theme"));
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _color = require("@twreporter/core/lib/constants/color");
+var _theme = require("@twreporter/core/lib/constants/theme");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _map = _interopRequireDefault(require("lodash/map"));
@@ -56,10 +56,10 @@ var Descriptor = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "sc-1m76x7g-1"
 })(["", " ", " ", " ", " ", " ", " ", ""], function (props) {
   switch (props.theme.name) {
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return (0, _styledComponents.css)(["color:", ";", ""], _color.colorGrayscale.gray600, _mediaQuery["default"].desktopAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            border-color: ", ";\n            &::after {\n              border-color: ", ";\n            }\n          "])), _color.colorGrayscale.gray400, _color.colorGrayscale.gray400));
-    case _theme["default"].article.v2.pink:
-    case _theme["default"].article.v2["default"]:
+    case _theme.ARTICLE_THEME.v2.pink:
+    case _theme.ARTICLE_THEME.v2["default"]:
     default:
       return (0, _styledComponents.css)(["color:", ";", ""], _color.colorGrayscale.gray600, _mediaQuery["default"].desktopAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            border-color: ", ";\n            &::after {\n              border-color: ", ";\n            }\n          "])), _color.colorGrayscale.gray300, _color.colorGrayscale.gray300));
   }

package/lib/components/related/list.js

@@ -11,11 +11,11 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _mockup = _interopRequireDefault(require("./mockup"));
 var _card = _interopRequireDefault(require("./card"));
-var _theme = _interopRequireDefault(require("../../constants/theme"));
 var _related = _interopRequireDefault(require("../../constants/prop-types/related"));
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _color = require("@twreporter/core/lib/constants/color");
+var _theme = require("@twreporter/core/lib/constants/theme");
 var _get = _interopRequireDefault(require("lodash/get"));
 var _map = _interopRequireDefault(require("lodash/map"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // components
@@ -47,10 +47,10 @@ var _ = {
 var fadeIn = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{opacity:0;}to{opacity:1;}"]);
 var selectButtonColors = function selectButtonColors(theme) {
   switch (theme) {
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return (0, _styledComponents.css)(["color:", ";background-color:", "1a;&:hover{color:", ";background-color:", ";}"], _color.colorGrayscale.gray300, _color.colorGrayscale.white, _color.colorGrayscale.white, _color.colorGrayscale.gray400);
-    case _theme["default"].article.v2.pink:
-    case _theme["default"].article.v2["default"]:
+    case _theme.ARTICLE_THEME.v2.pink:
+    case _theme.ARTICLE_THEME.v2["default"]:
     default:
       return (0, _styledComponents.css)(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray300, _color.colorGrayscale.gray800, _color.colorGrayscale.gray400);
   }
@@ -72,7 +72,7 @@ var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "uykdc6-2"
 })(["border-style:solid;border-width:0 0.5px 0.5px 0;border-color:", ";margin-bottom:40px;animation:", " 400ms ease-in-out;", " ", " ", " ", " ", ""], function (props) {
   switch (props.theme.name) {
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return _color.colorGrayscale.gray400;
     default:
       return _color.colorGrayscale.gray300;

package/lib/components/separation-curve.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = SeparationCurve;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _theme = _interopRequireDefault(require("../constants/theme"));
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 var _color = require("@twreporter/core/lib/constants/color");
-var _templateObject;
+var _theme = require("@twreporter/core/lib/constants/theme");
+var _templateObject; // @twreporter
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var Separation = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -18,11 +18,11 @@ var Separation = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "s2ekrq-0"
 })(["width:192px;margin:40px auto;", " >svg>path{fill:", ";}"], _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 270px;\n  "]))), function (props) {
   switch (props.theme.name) {
-    case _theme["default"].article.v2.pink:
+    case _theme.ARTICLE_THEME.v2.pink:
       return _color.COLOR_PINK_ARTICLE.pink;
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return _color.colorSupportive.heavy;
-    case _theme["default"].article.v2["default"]:
+    case _theme.ARTICLE_THEME.v2["default"]:
     default:
       return _color.colorSupportive.main;
   }

package/lib/constants/css.js

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _styledComponents = require("styled-components");
-var _theme = _interopRequireDefault(require("./theme"));
 var _typography = _interopRequireDefault(require("./typography"));
 var _color = require("@twreporter/core/lib/constants/color");
+var _theme = require("@twreporter/core/lib/constants/theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function getParagraphTextStyles(themeName) {
   switch (themeName) {
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return (0, _styledComponents.css)(["color:", ";"], _color.colorGrayscale.gray300);
-    case _theme["default"].article.v2.pink:
-    case _theme["default"].article.v2["default"]:
+    case _theme.ARTICLE_THEME.v2.pink:
+    case _theme.ARTICLE_THEME.v2["default"]:
     default:
       return (0, _styledComponents.css)(["color:", ";"], _color.colorGrayscale.gray800);
   }
@@ -26,11 +26,11 @@ var paragraphText = /*#__PURE__*/(0, _styledComponents.css)(["", " font-size:",
 }, _typography["default"].font.weight.normal);
 function getLinkChildrenStyles(themeName) {
   switch (themeName) {
-    case _theme["default"].article.v2.photo:
+    case _theme.ARTICLE_THEME.v2.photo:
       return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color.colorSupportive.main, _color.colorGrayscale.gray400, _color.colorSupportive.main);
-    case _theme["default"].article.v2.pink:
+    case _theme.ARTICLE_THEME.v2.pink:
       return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color.COLOR_PINK_ARTICLE.blue, _color.colorGrayscale.gray300, _color.COLOR_PINK_ARTICLE.blue);
-    case _theme["default"].article.v2["default"]:
+    case _theme.ARTICLE_THEME.v2["default"]:
     default:
       return (0, _styledComponents.css)(["a:link,a:visited,a:active{color:", ";text-decoration:none;border-bottom:1px solid ", ";}a:hover{border-color:", ";}"], _color.colorSupportive.heavy, _color.colorGrayscale.gray300, _color.colorSupportive.heavy);
   }

package/lib/constants/prop-types/leading.js

@@ -38,5 +38,8 @@ var _default = exports["default"] = {
       tiny: _imgWithPlaceholder["default"].imagePropType,
       mobile: _imgWithPlaceholder["default"].imagePropType
     })
+  }),
+  embedded: _objectSpread(_objectSpread({}, leading), {}, {
+    embedded: _propTypes["default"].object
   })
 };

package/lib/managers/layout-manager.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _leading = _interopRequireDefault(require("../components/leading"));
 var _get = _interopRequireDefault(require("lodash/get"));
-var _theme = _interopRequireDefault(require("../constants/theme"));
+var _theme = require("@twreporter/core/lib/constants/theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -54,9 +54,12 @@ var LayoutManager = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "getLeadingComponent",
     value: function getLeadingComponent() {
-      if (this.theme === _theme["default"].article.v2.pink) {
+      if (this.theme === _theme.ARTICLE_THEME.v2.pink) {
         return _leading["default"].Pink;
       }
+      if (this.theme === _theme.ARTICLE_THEME.v2.embedded) {
+        return _leading["default"].Embedded;
+      }
       switch (_.get(this.post, 'hero_image_size')) {
         case 'extend':
           return _leading["default"].Extend;
@@ -114,7 +117,8 @@ var LayoutManager = exports["default"] = /*#__PURE__*/function () {
         portraitPoster: {
           tiny: _.get(post, 'leading_image_portrait.resized_targets.tiny'),
           mobile: _.get(post, 'leading_image_portrait.resized_targets.mobile')
-        }
+        },
+        embedded: _.get(post, 'leading_embedded.api_data', [])
       };
     }
   }]);

package/lib/managers/theme-manager.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _theme2 = _interopRequireDefault(require("../constants/theme"));
+var _theme2 = require("@twreporter/core/lib/constants/theme");
 var _color = require("@twreporter/core/lib/constants/color");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -92,15 +91,15 @@ var ThemeManager = exports["default"] = /*#__PURE__*/function () {
       var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var _theme = theme || this.theme;
       switch (_theme) {
-        case _theme2["default"].article.v2.pink:
+        case _theme2.ARTICLE_THEME.v2.pink:
           {
             return ThemeManager.colors.pink;
           }
-        case _theme2["default"].article.v2.photo:
+        case _theme2.ARTICLE_THEME.v2.photo:
           {
             return ThemeManager.colors.photo;
           }
-        case _theme2["default"].article.v2["default"]:
+        case _theme2.ARTICLE_THEME.v2["default"]:
         default:
           {
             return ThemeManager.colors["default"];

package/lib/managers/ui-manager.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 var _layoutManager = _interopRequireDefault(require("./layout-manager"));
 var _themeManager = _interopRequireDefault(require("./theme-manager"));
 var _get = _interopRequireDefault(require("lodash/get"));
-var _theme = _interopRequireDefault(require("../constants/theme"));
+var _theme = require("@twreporter/core/lib/constants/theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -57,7 +57,7 @@ var UIManager = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "getTheme",
     value: function getTheme() {
-      return _.get(this.post, 'style', _theme["default"].article.v2["default"]);
+      return _.get(this.post, 'style', _theme.ARTICLE_THEME.v2["default"]);
     }
 
     /**
@@ -107,7 +107,7 @@ var UIManager = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "toRenderSeparationLineBetweenLeadingAndBody",
     value: function toRenderSeparationLineBetweenLeadingAndBody() {
-      if (this.getTheme() === _theme["default"].article.v2["default"] && this.getLeadingImageSize() !== _heroImageSize.fullscreen && this.getLeadingImageSize() !== _heroImageSize.extend) {
+      if (this.getTheme() === _theme.ARTICLE_THEME.v2["default"] && this.getLeadingImageSize() !== _heroImageSize.fullscreen && this.getLeadingImageSize() !== _heroImageSize.extend) {
         return true;
       }
       return false;