@quintype/arrow 3.15.1-perf.4 → 3.15.1-perf.5

package/story-elements/StoryElement/index.js

@@ -1,75 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var React = require('react');
-var components = require('@quintype/components');
-var PropTypes = require('prop-types');
-require('@babel/runtime/helpers/asyncToGenerator');
-require('@babel/runtime/helpers/typeof');
-require('@babel/runtime/regenerator');
-require('lodash');
-require('react-timeago');
-require('date-fns-tz');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
-var _excluded$1 = ["element", "render"];
-var withElementWrapper = function withElementWrapper(StoryElement) {
-  return function (props) {
-    var element = props.element,
-        render = props.render,
-        restProps = _objectWithoutProperties__default["default"](props, _excluded$1);
-
-    if (!element) return null;
-    if (render && typeof render === "function") return render(props);
-    return /*#__PURE__*/React__default["default"].createElement(StoryElement, _extends__default["default"]({}, restProps, {
-      element: element
-    }));
-  };
-};
-withElementWrapper.propTypes = {
-  StoryElement: PropTypes__default["default"].element
-};
-
-var shapeConfig = PropTypes__default["default"].shape({
-  "sketches-host": PropTypes__default["default"].string,
-  "cdn-name": PropTypes__default["default"].string,
-  "cdn-image": PropTypes__default["default"].string
-});
-var shapeStory = PropTypes__default["default"].shape({
-  headline: PropTypes__default["default"].string,
-  "last-published-at": PropTypes__default["default"].number,
-  subheadline: PropTypes__default["default"].string
-});
-
-var _excluded = ["element", "story", "config"];
-
-var StoryElementBase = function StoryElementBase(_ref) {
-  var element = _ref.element;
-      _ref.story;
-      _ref.config;
-      var restProps = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({}, restProps, {
-    "data-test-id": "story-elements"
-  }), /*#__PURE__*/React__default["default"].createElement(components.StoryElement, {
-    element: element
-  }));
-};
-
-var StoryElement = withElementWrapper(StoryElementBase);
-StoryElementBase.propTypes = {
-  element: PropTypes__default["default"].object,
-  story: shapeStory,
-  config: shapeConfig
-};
-
-exports.StoryElement = StoryElement;

package/story-elements/Summary/index.js

@@ -1,190 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
-var React = require('react');
-var PropTypes = require('prop-types');
-require('@babel/runtime/helpers/asyncToGenerator');
-require('@babel/runtime/helpers/typeof');
-require('@babel/runtime/regenerator');
-require('lodash');
-require('react-timeago');
-require('date-fns-tz');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
-var _excluded$1 = ["element", "render"];
-var withElementWrapper = function withElementWrapper(StoryElement) {
-  return function (props) {
-    var element = props.element,
-        render = props.render,
-        restProps = _objectWithoutProperties__default["default"](props, _excluded$1);
-
-    if (!element) return null;
-    if (render && typeof render === "function") return render(props);
-    return /*#__PURE__*/React__default["default"].createElement(StoryElement, _extends__default["default"]({}, restProps, {
-      element: element
-    }));
-  };
-};
-withElementWrapper.propTypes = {
-  StoryElement: PropTypes__default["default"].element
-};
-
-var hexToRGB = function hexToRGB(hex) {
-  var r = parseInt(hex.slice(1, 3), 16);
-  var g = parseInt(hex.slice(3, 5), 16);
-  var b = parseInt(hex.slice(5, 7), 16);
-  return {
-    r: r,
-    g: g,
-    b: b
-  };
-};
-var getLuminanceOfColor = function getLuminanceOfColor(hex) {
-  var _hexToRGB = hexToRGB(hex),
-      r = _hexToRGB.r,
-      g = _hexToRGB.g,
-      b = _hexToRGB.b;
-
-  return r * 0.299 + g * 0.587 + b * 0.114;
-};
-var rgbToHex = function rgbToHex() {
-  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgba(255, 255, 255, 0)";
-  var rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
-  return rgba && rgba.length === 4 ? "#" + ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[3], 10).toString(16)).slice(-2) : color;
-};
-var getTextColor = function getTextColor() {
-  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(255,255,255)";
-  var isRegexCheck = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(theme);
-  var getHexValue = !isRegexCheck ? rgbToHex(theme) : theme;
-  var textColor = getLuminanceOfColor(getHexValue) < 155 ? "light" : "dark";
-  return textColor;
-};
-
-var updateContentLinks = function updateContentLinks(content) {
-  var updatedContent = content;
-  var anchorTagsList = content.match(/(<a).*?(>)/g);
-  anchorTagsList && anchorTagsList.forEach(function (anchorTag) {
-    var isTargetPresent = /target=/g.test(anchorTag);
-
-    if (!isTargetPresent) {
-      updatedContent = updatedContent.replace(anchorTag, "<a aria-label='content' target='_blank'".concat(anchorTag.substring(2)));
-    }
-  });
-  return updatedContent;
-};
-var shapeConfig = PropTypes__default["default"].shape({
-  "sketches-host": PropTypes__default["default"].string,
-  "cdn-name": PropTypes__default["default"].string,
-  "cdn-image": PropTypes__default["default"].string
-});
-var shapeStory = PropTypes__default["default"].shape({
-  headline: PropTypes__default["default"].string,
-  "last-published-at": PropTypes__default["default"].number,
-  subheadline: PropTypes__default["default"].string
-});
-
-var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
-var useStateValue = function useStateValue() {
-  return React.useContext(StateContext);
-};
-
-var _excluded = ["element", "template", "opts", "css", "story", "config", "render"];
-var _styleModuleImportMap = {
-  "./summary.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
-    "mobile": "768px",
-    "headline": "summary-m_headline__30sie",
-    "summary": "summary-m_summary__3-CnO",
-    "content": "summary-m_content__37n8C",
-    "summary-header": "summary-m_summary-header__UKVHi",
-    "summary-border": "summary-m_summary-border__M9hrr",
-    "dark": "summary-m_dark__1ZuzR",
-    "light": "summary-m_light__2SYiC",
-    "heading-wrapper": "summary-m_heading-wrapper__23S51",
-    "content-border": "summary-m_content-border__3ilmJ"
-  }
-};
-
-var SummaryBase = function SummaryBase(_ref) {
-  var element = _ref.element,
-      _ref$template = _ref.template,
-      template = _ref$template === void 0 ? "" : _ref$template,
-      _ref$opts = _ref.opts,
-      opts = _ref$opts === void 0 ? {} : _ref$opts,
-      _ref$css = _ref.css,
-      css = _ref$css === void 0 ? {} : _ref$css;
-      _ref.story;
-      _ref.config;
-      _ref.render;
-      var restProps = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-  var configData = useStateValue() || {};
-  var textInvertColor = getTextColor(configData.theme);
-  var content = element.text;
-  if (!content) return null;
-  var headerBgColor = css.headerBgColor;
-  var _opts$isExternalLink = opts.isExternalLink,
-      isExternalLink = _opts$isExternalLink === void 0 ? true : _opts$isExternalLink,
-      _opts$headline = opts.headline,
-      headline = _opts$headline === void 0 ? "Summary" : _opts$headline,
-      _opts$hideHeadline = opts.hideHeadline,
-      hideHeadline = _opts$hideHeadline === void 0 ? false : _opts$hideHeadline;
-  var text = isExternalLink && updateContentLinks(content) || content;
-  var supportedTemplates = ["header", "border"];
-  var templateStyle = supportedTemplates.includes(template) ? "summary-".concat(template) : "summary";
-  var contentBorder = hideHeadline ? "content-border" : "";
-  var renderTemplate = template === "header" || template === "border";
-  var updateHeaderColor = renderTemplate ? "".concat(headerBgColor) : "";
-  var textColor = renderTemplate ? getTextColor(headerBgColor) : "";
-  var updateContentColor = template === "header" ? "" : textInvertColor;
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
-    "data-test-id": "summary"
-  }, restProps, {
-    className: "arrow-component arr--summary-element arr-custom-style " + _getClassName__default["default"](templateStyle, _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
-  }), !hideHeadline && /*#__PURE__*/React__default["default"].createElement("div", {
-    "data-test-id": "summary-headline",
-    className: _getClassName__default["default"]("heading-wrapper ".concat(textInvertColor), _styleModuleImportMap)
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      backgroundColor: updateHeaderColor
-    },
-    className: _getClassName__default["default"]("headline ".concat(textColor, " ").concat(textInvertColor), _styleModuleImportMap)
-  }, headline)), /*#__PURE__*/React__default["default"].createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: text
-    },
-    className: _getClassName__default["default"]("content ".concat(contentBorder, " ").concat(updateContentColor, " ").concat(textInvertColor), _styleModuleImportMap)
-  }));
-};
-
-SummaryBase.propTypes = {
-  element: PropTypes__default["default"].shape({
-    text: PropTypes__default["default"].string
-  }),
-  template: PropTypes__default["default"].string,
-  opts: PropTypes__default["default"].shape({
-    isExternalLink: PropTypes__default["default"].bool,
-    headline: PropTypes__default["default"].string,
-    hideHeadline: PropTypes__default["default"].bool
-  }),
-  story: shapeStory,
-  config: shapeConfig,
-  render: PropTypes__default["default"].func,
-  css: PropTypes__default["default"].shape({
-    headerBgColor: PropTypes__default["default"].string
-  })
-};
-var Summary = withElementWrapper(SummaryBase);
-
-exports.Summary = Summary;

package/story-elements/Summary/styles.arrow.css

@@ -1 +0,0 @@
-.summary-m_headline__TEWCX{font-size:var(--arrow-fs-s);font-weight:var(--arrow-fw-bold)}@media (min-width:768px){.summary-m_headline__TEWCX{font-size:var(--arrow-fs-m)}}.summary-m_summary__xBYz4.arrow-component .summary-m_content__2Z-vi p{font-style:italic}.summary-m_dark__FVeh1,.summary-m_summary-border__88H01.arrow-component .summary-m_content__2Z-vi>p,.summary-m_summary-header__dhazX.arrow-component .summary-m_content__2Z-vi>p,.summary-m_summary__xBYz4.arrow-component .summary-m_content__2Z-vi>p{color:var(--arrow-c-dark);font-size:var(--arrow-fs-s)}@media (min-width:768px){.summary-m_dark__FVeh1,.summary-m_summary-border__88H01.arrow-component .summary-m_content__2Z-vi>p,.summary-m_summary-header__dhazX.arrow-component .summary-m_content__2Z-vi>p,.summary-m_summary__xBYz4.arrow-component .summary-m_content__2Z-vi>p{font-size:var(--arrow-fs-m)}}.summary-m_summary-border__88H01.arrow-component .summary-m_content__2Z-vi.summary-m_light__QzWh->p,.summary-m_summary-header__dhazX.arrow-component .summary-m_content__2Z-vi.summary-m_light__QzWh->p,.summary-m_summary__xBYz4.arrow-component .summary-m_content__2Z-vi.summary-m_light__QzWh->p{color:var(--arrow-c-light)}.summary-m_dark__FVeh1{color:var(--arrow-c-mono1)}.summary-m_light__QzWh-{color:var(--arrow-c-invert-mono1)}.summary-m_summary__xBYz4 .summary-m_headline__TEWCX{font-size:var(--arrow-fs-s);margin-bottom:var(--arrow-spacing-xs)}@media (min-width:768px){.summary-m_summary__xBYz4 .summary-m_headline__TEWCX{font-size:var(--arrow-fs-l)}}.summary-m_summary-header__dhazX .summary-m_headline__TEWCX{background-color:var(--arrow-c-brand1);font-size:var(--arrow-fs-s);padding:var(--arrow-spacing-xs) var(--arrow-spacing-s)}@media (min-width:768px){.summary-m_summary-header__dhazX .summary-m_headline__TEWCX{font-size:var(--arrow-fs-m);padding:var(--arrow-spacing-xs) var(--arrow-spacing-l)}}.summary-m_summary-header__dhazX .summary-m_content__2Z-vi{background-color:var(--arrow-c-invert-mono7);padding:var(--arrow-spacing-s)}@media (min-width:768px){.summary-m_summary-header__dhazX .summary-m_content__2Z-vi{padding:var(--arrow-spacing-l)}}.summary-m_summary-border__88H01 .summary-m_heading-wrapper__aTbSx{display:flex;margin-bottom:-22px}.summary-m_summary-border__88H01 .summary-m_heading-wrapper__aTbSx:before{align-self:center;border-top:1px solid var(--arrow-c-dark);content:" ";position:relative;width:var(--arrow-spacing-m)}.summary-m_summary-border__88H01 .summary-m_heading-wrapper__aTbSx.summary-m_light__QzWh-:before{border-top:1px solid var(--arrow-c-light)}.summary-m_summary-border__88H01 .summary-m_heading-wrapper__aTbSx:after{align-self:center;border-top:1px solid var(--arrow-c-dark);content:" ";flex:1 1 auto;margin-right:0;position:relative}.summary-m_summary-border__88H01 .summary-m_heading-wrapper__aTbSx.summary-m_light__QzWh-:after{border-top:1px solid var(--arrow-c-light)}.summary-m_summary-border__88H01 .summary-m_content__2Z-vi{border:1px solid var(--arrow-c-dark);border-top:none;padding:var(--arrow-spacing-l)}.summary-m_summary-border__88H01 .summary-m_content__2Z-vi.summary-m_light__QzWh-{border:1px solid var(--arrow-c-light)}.summary-m_summary-border__88H01 .summary-m_headline__TEWCX{background-color:var(--arrow-c-brand1);border-radius:2px;line-height:var(--arrow-lh-4);margin:0 var(--arrow-spacing-xs);padding:var(--arrow-spacing-xs) var(--arrow-spacing-l)}.summary-m_summary-border__88H01 .summary-m_content-border__H8Ca0.summary-m_dark__FVeh1{border:1px solid var(--arrow-c-mono5)}.summary-m_summary-border__88H01 .summary-m_content-border__H8Ca0.summary-m_light__QzWh-{border:1px solid var(--arrow-c-invert-mono5)}

package/story-elements/Text/index.js

@@ -1,165 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
-var React = require('react');
-var PropTypes = require('prop-types');
-var lodash = require('lodash');
-require('@babel/runtime/helpers/asyncToGenerator');
-require('@babel/runtime/helpers/typeof');
-require('@babel/runtime/regenerator');
-require('react-timeago');
-require('date-fns-tz');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
-var _excluded$1 = ["element", "render"];
-var withElementWrapper = function withElementWrapper(StoryElement) {
-  return function (props) {
-    var element = props.element,
-        render = props.render,
-        restProps = _objectWithoutProperties__default["default"](props, _excluded$1);
-
-    if (!element) return null;
-    if (render && typeof render === "function") return render(props);
-    return /*#__PURE__*/React__default["default"].createElement(StoryElement, _extends__default["default"]({}, restProps, {
-      element: element
-    }));
-  };
-};
-withElementWrapper.propTypes = {
-  StoryElement: PropTypes__default["default"].element
-};
-
-var hexToRGB = function hexToRGB(hex) {
-  var r = parseInt(hex.slice(1, 3), 16);
-  var g = parseInt(hex.slice(3, 5), 16);
-  var b = parseInt(hex.slice(5, 7), 16);
-  return {
-    r: r,
-    g: g,
-    b: b
-  };
-};
-var getLuminanceOfColor = function getLuminanceOfColor(hex) {
-  var _hexToRGB = hexToRGB(hex),
-      r = _hexToRGB.r,
-      g = _hexToRGB.g,
-      b = _hexToRGB.b;
-
-  return r * 0.299 + g * 0.587 + b * 0.114;
-};
-var rgbToHex = function rgbToHex() {
-  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgba(255, 255, 255, 0)";
-  var rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
-  return rgba && rgba.length === 4 ? "#" + ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[3], 10).toString(16)).slice(-2) : color;
-};
-var getTextColor = function getTextColor() {
-  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(255,255,255)";
-  var isRegexCheck = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(theme);
-  var getHexValue = !isRegexCheck ? rgbToHex(theme) : theme;
-  var textColor = getLuminanceOfColor(getHexValue) < 155 ? "light" : "dark";
-  return textColor;
-};
-
-var updateContentLinks = function updateContentLinks(content) {
-  var updatedContent = content;
-  var anchorTagsList = content.match(/(<a).*?(>)/g);
-  anchorTagsList && anchorTagsList.forEach(function (anchorTag) {
-    var isTargetPresent = /target=/g.test(anchorTag);
-
-    if (!isTargetPresent) {
-      updatedContent = updatedContent.replace(anchorTag, "<a aria-label='content' target='_blank'".concat(anchorTag.substring(2)));
-    }
-  });
-  return updatedContent;
-};
-var shapeConfig = PropTypes__default["default"].shape({
-  "sketches-host": PropTypes__default["default"].string,
-  "cdn-name": PropTypes__default["default"].string,
-  "cdn-image": PropTypes__default["default"].string
-});
-var shapeStory = PropTypes__default["default"].shape({
-  headline: PropTypes__default["default"].string,
-  "last-published-at": PropTypes__default["default"].number,
-  subheadline: PropTypes__default["default"].string
-});
-
-var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
-var useStateValue = function useStateValue() {
-  return React.useContext(StateContext);
-};
-
-var _excluded = ["element", "opts", "css", "story", "config"];
-var _styleModuleImportMap = {
-  "./text.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
-    "mobile": "768px",
-    "promotionalMessage": "text-m_promotionalMessage__CUsPM",
-    "textElement": "text-m_textElement__e3QEt",
-    "dark": "text-m_dark__1TC18",
-    "light": "text-m_light__2cRe8"
-  }
-};
-
-var TextBase = function TextBase(_ref) {
-  var _ref$element = _ref.element,
-      element = _ref$element === void 0 ? {} : _ref$element,
-      _ref$opts = _ref.opts,
-      opts = _ref$opts === void 0 ? {} : _ref$opts,
-      _ref$css = _ref.css,
-      css = _ref$css === void 0 ? {} : _ref$css;
-      _ref.story;
-      _ref.config;
-      var restProps = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-  var content = element.text;
-  if (!content) return null;
-  var configData = useStateValue() || {};
-  var textInvertColor = getTextColor(configData.theme);
-  var textColor = css.textColor;
-  var _opts$isExternalLink = opts.isExternalLink,
-      isExternalLink = _opts$isExternalLink === void 0 ? true : _opts$isExternalLink;
-  var text = isExternalLink && updateContentLinks(content) || content;
-  var isPromotionalMessage = lodash.get(element, ["metadata", "promotional-message"], false);
-  var updatedStyle = isPromotionalMessage ? "promotionalMessage" : "textElement";
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
-    style: !isPromotionalMessage ? {
-      color: textColor
-    } : {},
-    "data-test-id": isPromotionalMessage ? "promotional-message" : "text",
-    dangerouslySetInnerHTML: {
-      __html: text
-    },
-    id: "text-element"
-  }, restProps, {
-    className: "arrow-component arr--text-element " + _getClassName__default["default"]("".concat(updatedStyle, " ").concat(textInvertColor), _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
-  }));
-};
-
-TextBase.propTypes = {
-  element: PropTypes__default["default"].shape({
-    text: PropTypes__default["default"].string
-  }),
-  opts: PropTypes__default["default"].shape({
-    isExternalLink: PropTypes__default["default"].bool
-  }),
-  css: PropTypes__default["default"].shape({
-    hyperlinkColor: PropTypes__default["default"].string,
-    textColor: PropTypes__default["default"].string
-  }),
-  story: shapeStory,
-  config: shapeConfig
-};
-var Text = withElementWrapper(TextBase);
-
-exports.Text = Text;

package/story-elements/Text/styles.arrow.css

@@ -1 +0,0 @@
-.text-m_promotionalMessage__b1CAd p{font-size:var(--arrow-fs-tiny);padding-bottom:var(--arrow-spacing-xxs)}@media (min-width:768px){.text-m_promotionalMessage__b1CAd p{font-size:var(--arrow-fs-xs);padding-bottom:var(--arrow-spacing-xs)}}.text-m_dark__IUPIS,.text-m_textElement__QAAvV p{font-size:var(--arrow-fs-s);line-height:var(--arrow-lh-5)}@media (min-width:768px){.text-m_dark__IUPIS,.text-m_textElement__QAAvV p{font-size:var(--arrow-fs-m)}}.text-m_promotionalMessage__b1CAd a,.text-m_textElement__QAAvV a{color:var(--textElementHyperlinkColor)}.text-m_textElement__QAAvV a:hover{border-bottom:1px solid var(--textElementHyperlinkColor);transition:border .3s ease}.text-m_textElement__QAAvV.text-m_light__KJu2Y p{color:var(--arrow-c-invert-mono2)}.text-m_promotionalMessage__b1CAd a:hover{border-bottom:1px solid;color:var(--arrow-c-brand1);padding-bottom:3px;transition:all .3s ease 0s}.text-m_promotionalMessage__b1CAd.text-m_dark__IUPIS p{color:var(--arrow-c-mono4)}.text-m_promotionalMessage__b1CAd.text-m_light__KJu2Y p{color:var(--arrow-c-invert-mono4)}.text-m_textElement__QAAvV ol,.text-m_textElement__QAAvV ul{list-style:disc none outside;list-style:initial;padding:var(--arrow-spacing-m) 0 0 var(--arrow-spacing-l)}@media (min-width:768px){.text-m_textElement__QAAvV ol,.text-m_textElement__QAAvV ul{padding:var(--arrow-spacing-m) 0 0 var(--arrow-spacing-xl)}}.text-m_textElement__QAAvV ol{list-style:auto}.text-m_textElement__QAAvV .cta-anchor{background-color:var(--arrow-c-brand1);border-radius:var(--arrow-spacing-xxs);box-shadow:0 var(--arrow-spacing-xxs) var(-arrow-spacing-xs) 0 var(--arrow-c-mono6);color:var(--arrow-c-light);display:block;font-size:var(--arrow-fs-s);padding:var(--arrow-spacing-s) var(--arrow-spacing-m);text-align:center}@media (min-width:768px){.text-m_textElement__QAAvV .cta-anchor{display:inline-block;font-size:var(--arrow-fs-m);padding:var(--arrow-spacing-m) var(--arrow-spacing-l)}}

package/story-elements/Video/index.js

@@ -1,81 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var React = require('react');
-var components = require('@quintype/components');
-var PropTypes = require('prop-types');
-require('@babel/runtime/helpers/asyncToGenerator');
-require('@babel/runtime/helpers/typeof');
-require('@babel/runtime/regenerator');
-require('lodash');
-require('react-timeago');
-require('date-fns-tz');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
-var _excluded$1 = ["element", "render"];
-var withElementWrapper = function withElementWrapper(StoryElement) {
-  return function (props) {
-    var element = props.element,
-        render = props.render,
-        restProps = _objectWithoutProperties__default["default"](props, _excluded$1);
-
-    if (!element) return null;
-    if (render && typeof render === "function") return render(props);
-    return /*#__PURE__*/React__default["default"].createElement(StoryElement, _extends__default["default"]({}, restProps, {
-      element: element
-    }));
-  };
-};
-withElementWrapper.propTypes = {
-  StoryElement: PropTypes__default["default"].element
-};
-
-var shapeConfig = PropTypes__default["default"].shape({
-  "sketches-host": PropTypes__default["default"].string,
-  "cdn-name": PropTypes__default["default"].string,
-  "cdn-image": PropTypes__default["default"].string
-});
-var shapeStory = PropTypes__default["default"].shape({
-  headline: PropTypes__default["default"].string,
-  "last-published-at": PropTypes__default["default"].number,
-  subheadline: PropTypes__default["default"].string
-});
-
-var _excluded = ["element", "story", "config", "loadIframeOnClick"];
-
-var Videobase = function Videobase(_ref) {
-  var element = _ref.element;
-      _ref.story;
-      _ref.config;
-      var _ref$loadIframeOnClic = _ref.loadIframeOnClick,
-      loadIframeOnClick = _ref$loadIframeOnClic === void 0 ? false : _ref$loadIframeOnClic,
-      restProps = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
-    className: "video-m_container__MYuWI" + (" " + (restProps ? restProps.className || "" : ""))
-  }, restProps, {
-    "data-test-id": "video"
-  }), /*#__PURE__*/React__default["default"].createElement(components.StoryElement, {
-    element: element,
-    loadIframeOnClick: loadIframeOnClick
-  }));
-};
-
-Videobase.propTypes = {
-  element: PropTypes__default["default"].object,
-  story: shapeStory,
-  config: shapeConfig,
-  loadIframeOnClick: PropTypes__default["default"].bool
-};
-var Video = withElementWrapper(Videobase);
-
-exports.Video = Video;

package/story-elements/Video/styles.arrow.css

@@ -1 +0,0 @@
-.video-m_container__y4b-F .youtube-playBtn{background-color:var(--arrow-c-mono4);border:none;border-radius:50%/10%;cursor:pointer;font-size:0;height:48px;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:70px;z-index:var(--z-index-1)}.video-m_container__y4b-F .youtube-playBtn:hover{background-color:var(--arrow-c-accent4)}.video-m_container__y4b-F .youtube-playBtn:after{border-color:transparent transparent transparent var(--arrow-c-invert-mono3);border-style:solid;border-width:9px 0 9px 18px;content:"";height:0;margin:0 auto;width:0}.video-m_container__y4b-F .thumbnail-wrapper{height:100%;padding-top:56.25%;position:relative;width:100%}.video-m_container__y4b-F .thumbnail-wrapper iframe,.video-m_container__y4b-F .thumbnail-wrapper img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.video-m_container__y4b-F .thumbnail-wrapper iframe{z-index:var(--z-index-9)}.video-m_container__y4b-F .story-element-jsembed .thumbnail-wrapper img{width:100%}.video-m_container__y4b-F .dailymotion-playBtn{background-color:var(--arrow-c-invert-mono5);border:none;border-radius:50%;cursor:pointer;font-size:0;height:64px;left:50%;padding:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:64px;z-index:var(--z-index-1)}.video-m_container__y4b-F .dailymotion-playBtn:hover{background-color:var(--arrow-c-brand1)}.video-m_container__y4b-F .dailymotion-playBtn:after{border-color:transparent transparent transparent var(--arrow-c-invert-mono3);border-style:solid;border-width:12px 0 12px 18px;content:"";height:0;left:3px;margin:0 auto;position:relative;width:0}