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

package/atoms/ScrollSnap/index.js

@@ -1,379 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var React = require('react');
-var reactRedux = require('react-redux');
-var PropTypes = require('prop-types');
-var lodash = require('lodash');
-var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
-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 _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
-
-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;
-};
-PropTypes__default["default"].shape({
-  "sketches-host": PropTypes__default["default"].string,
-  "cdn-name": PropTypes__default["default"].string,
-  "cdn-image": PropTypes__default["default"].string
-});
-PropTypes__default["default"].shape({
-  headline: PropTypes__default["default"].string,
-  "last-published-at": PropTypes__default["default"].number,
-  subheadline: PropTypes__default["default"].string
-});
-
-var LeftArrow = function LeftArrow(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? "#333" : _ref$color;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    viewBox: "0 0 10 16"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    fill: "none",
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M17 20H-7V-4h24z",
-    opacity: ".384"
-  }), /*#__PURE__*/React__default["default"].createElement("path", {
-    stroke: color,
-    d: "M9 16L1 8l8-8"
-  })));
-};
-LeftArrow.propTypes = {
-  color: PropTypes__default["default"].string
-};
-
-var RightArrow = function RightArrow(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? "#333" : _ref$color;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    viewBox: "0 0 10 16"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    fill: "none",
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M-7-4h24v24H-7z",
-    opacity: ".384"
-  }), /*#__PURE__*/React__default["default"].createElement("path", {
-    stroke: color,
-    d: "M1 0l8 8-8 8"
-  })));
-};
-RightArrow.propTypes = {
-  color: 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 _styleModuleImportMap$1 = {
-  "./slider-arrow.m.css": {
-    "arrow": "slider-arrow-m_arrow__1eBUU",
-    "left-arrow-dark": "slider-arrow-m_left-arrow-dark__3mTJS",
-    "right-arrow-dark": "slider-arrow-m_right-arrow-dark__3hWZe",
-    "left-arrow-light": "slider-arrow-m_left-arrow-light__2ipUK",
-    "right-arrow-light": "slider-arrow-m_right-arrow-light__3omMU",
-    "left-arrow-ltr": "slider-arrow-m_left-arrow-ltr__1ngNF",
-    "right-arrow-ltr": "slider-arrow-m_right-arrow-ltr__2svWX",
-    "left-arrow-rtl": "slider-arrow-m_left-arrow-rtl__2ynyn",
-    "right-arrow-rtl": "slider-arrow-m_right-arrow-rtl__1GjPz"
-  }
-};
-var SliderArrow = function SliderArrow(_ref) {
-  var selectedIndex = _ref.selectedIndex,
-      previousClick = _ref.previousClick,
-      nextClick = _ref.nextClick,
-      noOfItems = _ref.noOfItems,
-      perView = _ref.perView,
-      languageDirection = _ref.languageDirection;
-
-  if (noOfItems < 1) {
-    return null;
-  }
-
-  var config = useStateValue() || {};
-  var textColor = getTextColor(config.theme);
-
-  var rightArrowView = function rightArrowView() {
-    if (selectedIndex >= noOfItems - perView) return false;
-    return true;
-  };
-
-  var getLeftArrowClassName = languageDirection === "rtl" ? "left-arrow-rtl" : "left-arrow-ltr";
-  var getRightArrowClassName = languageDirection === "rtl" ? "right-arrow-rtl" : "right-arrow-ltr";
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, selectedIndex !== 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: previousClick,
-    className: ("left-arrow ".concat(getLeftArrowClassName) ? "left-arrow ".concat(getLeftArrowClassName) + " " : "") + _getClassName__default["default"]("arrow left-arrow-".concat(textColor, " ").concat(getLeftArrowClassName), _styleModuleImportMap$1)
-  }, /*#__PURE__*/React__default["default"].createElement(LeftArrow, {
-    color: textColor === "dark" ? "#fff" : "#333"
-  })) : null, selectedIndex < noOfItems - 1 && rightArrowView() ? /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: nextClick,
-    className: ("right-arrow ".concat(getRightArrowClassName) ? "right-arrow ".concat(getRightArrowClassName) + " " : "") + _getClassName__default["default"]("arrow right-arrow-".concat(textColor, " ").concat(getRightArrowClassName), _styleModuleImportMap$1)
-  }, /*#__PURE__*/React__default["default"].createElement(RightArrow, {
-    color: textColor === "dark" ? "#fff" : "#333"
-  })) : null);
-};
-SliderArrow.propTypes = {
-  noOfItems: PropTypes.number,
-  perView: PropTypes.number,
-  slideIndicator: PropTypes.string,
-  previousClick: PropTypes.func,
-  nextClick: PropTypes.func,
-  selectedIndex: PropTypes.number,
-  languageDirection: PropTypes.string
-};
-
-var _styleModuleImportMap = {
-  "./slider-indicator.m.css": {
-    "indicators": "slider-indicator-m_indicators__3MNXc",
-    "indicator": "slider-indicator-m_indicator__gTv3x",
-    "indicator-button": "slider-indicator-m_indicator-button__1e82r",
-    "indicator-dots": "slider-indicator-m_indicator-dots__2TR3H",
-    "indicator-dots-dark": "slider-indicator-m_indicator-dots-dark__sGrev",
-    "indicator-dots-light": "slider-indicator-m_indicator-dots-light__2nPn-",
-    "indicator-dashes": "slider-indicator-m_indicator-dashes__DyNCE",
-    "indicator-dashes-dark": "slider-indicator-m_indicator-dashes-dark__VrqJI",
-    "indicator-dashes-light": "slider-indicator-m_indicator-dashes-light__34ESx"
-  }
-};
-var SliderIndicator = function SliderIndicator(_ref) {
-  var indicatorItems = _ref.indicatorItems,
-      indicatorClick = _ref.indicatorClick,
-      selectedIndex = _ref.selectedIndex,
-      indicatorType = _ref.indicatorType;
-
-  if (indicatorItems.length < 1) {
-    return null;
-  }
-
-  var config = useStateValue() || {};
-  var textColor = getTextColor(config.theme);
-  return /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: "slider-indicators slider-indicator-m_indicators__3MNXc"
-  }, indicatorItems.map(function (_, index) {
-    return /*#__PURE__*/React__default["default"].createElement("li", {
-      key: "slider-".concat(index),
-      className: "indicator slider-indicator-m_indicator__gTv3x",
-      onClick: function onClick(e) {
-        return indicatorClick(e, index);
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("button", {
-      "aria-pressed": selectedIndex === index ? "true" : "false",
-      className: ("indicator-button indicator-".concat(indicatorType) ? "indicator-button indicator-".concat(indicatorType) + " " : "") + _getClassName__default["default"]("indicator-button indicator-".concat(indicatorType, " indicator-").concat(indicatorType, "-").concat(textColor), _styleModuleImportMap)
-    }));
-  }));
-};
-SliderIndicator.propTypes = {
-  indicatorItems: PropTypes.array,
-  perView: PropTypes.number,
-  indicatorType: PropTypes.string,
-  indicatorClick: PropTypes.func,
-  selectedIndex: PropTypes.number
-};
-
-var smoothScroll = function smoothScroll(node, topOrLeft, horizontal) {
-  var _node$scrollTo;
-
-  node.scrollTo((_node$scrollTo = {}, _defineProperty__default["default"](_node$scrollTo, horizontal ? "left" : "top", topOrLeft), _defineProperty__default["default"](_node$scrollTo, "behavior", "smooth"), _node$scrollTo));
-};
-
-var updateItemSelection = function updateItemSelection(index, languageDirection, scroller, noOfItems) {
-  var getScrollValue = Math.floor(scroller.current.scrollWidth * (index / noOfItems));
-  var scrollValue = languageDirection === "rtl" ? getScrollValue * -1 : getScrollValue;
-  smoothScroll(scroller.current, scrollValue, true);
-};
-
-var setIndicatorValue = function setIndicatorValue(func, ms) {
-  var timeout;
-  return function () {
-    clearTimeout(timeout);
-    timeout = setTimeout(function () {
-      timeout = null;
-      func();
-    }, ms);
-  };
-};
-
-var ScrollSnap = function ScrollSnap(_ref) {
-  var children = _ref.children,
-      isArrow = _ref.isArrow,
-      interval = _ref.interval,
-      isInfinite = _ref.isInfinite,
-      pauseOnHover = _ref.pauseOnHover,
-      perView = _ref.perView,
-      slideIndicator = _ref.slideIndicator;
-
-  var _useState = React.useState(0),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      selectedIndex = _useState2[0],
-      setSelectedIndex = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      autoScroll = _useState4[0],
-      setAutoScroll = _useState4[1];
-
-  var languageDirection = reactRedux.useSelector(function (state) {
-    return lodash.get(state, ["qt", "config", "language", "direction"], "ltr");
-  });
-  var noOfItems = children ? children.length : 0;
-  var scroller = React.useRef(null);
-  var numberOfIndicatorsToShow = children.length - (perView - 1);
-  var indicatorItems = children.slice(0, numberOfIndicatorsToShow);
-  React.useEffect(function () {
-    if (scroller.current) {
-      scroller.current.addEventListener("scroll", setIndicatorValue(function () {
-        var value = Math.round(scroller.current.scrollLeft / scroller.current.scrollWidth * noOfItems);
-        setSelectedIndex(Math.abs(value));
-      }, 150)); // For Default Selection if selectedIndex is not 0 then manually select it
-
-      if (selectedIndex !== 0) {
-        updateItemSelection(selectedIndex);
-      }
-    }
-
-    return function () {
-      scroller.current.removeEventListener("scroll", setIndicatorValue);
-    };
-  }, []); // Infinite scroll
-
-  React.useEffect(function () {
-    if (isInfinite && !autoScroll) {
-      var timer = setInterval(function () {
-        infiniteScroll();
-      }, interval);
-      return function () {
-        clearInterval(timer);
-      };
-    }
-  }, [isInfinite, autoScroll]);
-
-  var infiniteScroll = function infiniteScroll() {
-    setSelectedIndex(function (value) {
-      var newIndex = value === noOfItems - perView ? 0 : value + 1;
-      updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
-      return newIndex;
-    });
-  };
-
-  var pauseAutoPlay = function pauseAutoPlay() {
-    pauseOnHover && setAutoScroll(!autoScroll);
-  };
-
-  var indicatorClick = function indicatorClick(e, newIndex) {
-    e.preventDefault();
-    e.stopPropagation();
-    setSelectedIndex(newIndex);
-    updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
-  };
-
-  var nextClick = function nextClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (selectedIndex < noOfItems) {
-      var newIndex = selectedIndex + 1;
-      setSelectedIndex(newIndex);
-      updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
-    }
-  };
-
-  var previousClick = function previousClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    var newIndex = selectedIndex - 1;
-    setSelectedIndex(newIndex);
-    updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
-  };
-
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "scroll-snap-container"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "scroll-snap-wrapper scroll-snap-m_wrapper__1Rz9v",
-    onMouseEnter: pauseAutoPlay,
-    onMouseLeave: pauseAutoPlay
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: scroller,
-    className: "scroll-snap-carousel scroll-snap-m_carousel__2m3cg"
-  }, children), isArrow && /*#__PURE__*/React__default["default"].createElement(SliderArrow, {
-    noOfItems: noOfItems,
-    perView: perView,
-    previousClick: previousClick,
-    nextClick: nextClick,
-    selectedIndex: selectedIndex,
-    languageDirection: languageDirection
-  })), children.length > perView && slideIndicator !== "none" && /*#__PURE__*/React__default["default"].createElement(SliderIndicator, {
-    indicatorItems: indicatorItems,
-    indicatorClick: indicatorClick,
-    selectedIndex: selectedIndex,
-    indicatorType: slideIndicator
-  }));
-};
-ScrollSnap.defaultProps = {
-  isArrow: true,
-  isInfinite: false,
-  interval: 4000,
-  pauseOnHover: true,
-  perView: 1,
-  slideIndicator: "dots"
-};
-ScrollSnap.propTypes = {
-  children: PropTypes.array.isRequired,
-  isArrow: PropTypes.bool,
-  isInfinite: PropTypes.bool,
-  interval: PropTypes.number,
-  pauseOnHover: PropTypes.bool,
-  perView: PropTypes.number,
-  slideIndicator: PropTypes.string
-};
-
-exports.ScrollSnap = ScrollSnap;

package/atoms/ScrollSnap/styles.arrow.css

@@ -1 +0,0 @@
-.slider-arrow-m_arrow__INpUj{background-color:var(--arrow-c-light);border:none;border-radius:0;cursor:pointer;opacity:.8;padding:var(--arrow-spacing-l) var(--arrow-spacing-s);position:absolute;top:50%;transform:translateY(-50%)}@media only screen and (max-width:767px){.slider-arrow-m_arrow__INpUj{top:calc(25% + 40px)}}.slider-arrow-m_left-arrow-dark__e-szL,.slider-arrow-m_right-arrow-dark__Ogg-N{background-color:var(--arrow-c-dark)}.slider-arrow-m_left-arrow-light__xiPqr,.slider-arrow-m_right-arrow-light__8ViC-{background-color:var(--arrow-c-light)}.slider-arrow-m_left-arrow-ltr__UQwLC{left:0}.slider-arrow-m_right-arrow-ltr__UIGB-{right:0}.slider-arrow-m_left-arrow-rtl__CfiEr{left:unset;right:0}.slider-arrow-m_left-arrow-rtl__CfiEr svg,.slider-arrow-m_right-arrow-rtl__ggFEW svg{transform:rotate(180deg)}.slider-arrow-m_right-arrow-rtl__ggFEW{left:0;right:unset}.slider-indicator-m_indicators__-js5t{cursor:pointer;display:flex;font-family:var(--arrow-typeface-secondary);justify-content:center;line-height:0;list-style:none;width:100%}.slider-indicator-m_indicator__PUegA{margin:var(--arrow-spacing-xs) 0;padding:4px}.slider-indicator-m_indicator-button__dkypW{background:none;border:none;cursor:pointer;overflow:hidden;padding:var(--arrow-spacing-s) var(--arrow-spacing-xxs)}.slider-indicator-m_indicator-dots__18aAr{background-color:var(--arrow-c-dark);border:1px solid var(--arrow-c-dark);border-radius:50%;height:8px;opacity:.25;padding:0;width:8px}.slider-indicator-m_indicator-dots-dark__yLPBN[aria-pressed=true]{background-color:var(--arrow-c-dark);opacity:1}.slider-indicator-m_indicator-dots-light__xKNGz{background-color:var(--arrow-c-light);border-color:var(--arrow-c-light)}.slider-indicator-m_indicator-dots-light__xKNGz[aria-pressed=true]{background-color:var(--arrow-c-light);opacity:1}.slider-indicator-m_indicator-dashes__ebEny{display:inline-block;height:2px;padding:0;width:var(--arrow-spacing-s)}.slider-indicator-m_indicator-dashes-dark__iSwYt{background-color:var(--arrow-c-dark);opacity:.25}.slider-indicator-m_indicator-dashes-light__a8Ym6{background-color:var(--arrow-c-light);opacity:.25}.slider-indicator-m_indicator-dashes-dark__iSwYt[aria-pressed=true]{background-color:var(--arrow-c-dark);opacity:1}.slider-indicator-m_indicator-dashes-light__a8Ym6[aria-pressed=true]{background-color:var(--arrow-c-light);opacity:1}.scroll-snap-m_wrapper__TiHKq{position:relative}.scroll-snap-m_carousel__8timl{-ms-overflow-style:none;display:flex;justify-content:space-between;overflow:auto;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.scroll-snap-m_carousel__8timl>div{flex-shrink:0;height:100%;overflow:hidden;scroll-snap-align:start;width:100%}.scroll-snap-m_carousel__8timl::-webkit-scrollbar{display:none}.scroll-snap-m_carousel__8timl::-moz-scrollbar{overflow:-moz-scrollbars-none}

package/atoms/SectionTag/index.js

@@ -1,140 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
-var React = require('react');
-var lodash = require('lodash');
-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('react-timeago');
-require('date-fns-tz');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
-var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
-var useStateValue = function useStateValue() {
-  return React.useContext(StateContext);
-};
-
-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;
-};
-PropTypes__default["default"].shape({
-  "sketches-host": PropTypes__default["default"].string,
-  "cdn-name": PropTypes__default["default"].string,
-  "cdn-image": PropTypes__default["default"].string
-});
-PropTypes__default["default"].shape({
-  headline: PropTypes__default["default"].string,
-  "last-published-at": PropTypes__default["default"].number,
-  subheadline: PropTypes__default["default"].string
-});
-
-var _styleModuleImportMap = {
-  "./section.m.css": {
-    "section": "section-m_section__2N4S3",
-    "section-borderBottomSml": "section-m_section-borderBottomSml__2GNbo",
-    "border-bottom": "section-m_border-bottom__3cRoD",
-    "section-borderLeft": "section-m_section-borderLeft__3hKVj",
-    "border-left": "section-m_border-left__2oUyp",
-    "section-solid": "section-m_section-solid__1vB1Q",
-    "dark": "section-m_dark__1r3C4",
-    "light": "section-m_light__306hW"
-  }
-};
-var SectionTag = function SectionTag(_ref) {
-  var story = _ref.story,
-      _ref$template = _ref.template,
-      template = _ref$template === void 0 ? "" : _ref$template,
-      _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "" : _ref$borderColor,
-      isLightTheme = _ref.isLightTheme;
-  var config = useStateValue() || {};
-  var isSection = lodash.get(config, ["showSection"], true);
-  var templateFromRowContext = lodash.get(config, ["sectionTagTemplate"]);
-  var section = lodash.get(story, ["sections", 0], "");
-  var supportedTemplates = ["borderBottomSml", "borderLeft", "solid"];
-  var getUrl = section ? section["section-url"] : "/";
-  var colorToApplyContrast = template === "solid" || templateFromRowContext === "solid" ? borderColor : config.theme;
-  var textColor = isLightTheme ? "light" : getTextColor(colorToApplyContrast);
-  var sectionTagBorderColor = rgbToHex(borderColor);
-  var templateStyle = supportedTemplates.includes(template) ? "section section-".concat(template) : "section";
-
-  if (templateFromRowContext) {
-    templateStyle = supportedTemplates.includes(templateFromRowContext) ? "section section-".concat(templateFromRowContext) : "section";
-  }
-
-  if (!isSection) return null;
-  return /*#__PURE__*/React__default["default"].createElement(components.Link, {
-    href: getUrl,
-    className: "arrow-component arr--section-name",
-    "aria-label": "section-name"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "data-test-id": "sectionTag",
-    style: {
-      backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : ""
-    },
-    className: "section-tag arrow-component " + _getClassName__default["default"]("".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap)
-  }, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "section-m_border-left__2oUyp",
-    style: {
-      color: sectionTagBorderColor
-    }
-  }), section["display-name"] || section["name"], /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "section-m_border-bottom__3cRoD",
-    style: {
-      backgroundColor: "".concat(template === "solid" ? "" : sectionTagBorderColor)
-    }
-  })));
-};
-SectionTag.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes__default["default"].object.isRequired,
-
-  /** The style template for section tag */
-  template: PropTypes__default["default"].oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
-  borderColor: PropTypes__default["default"].string,
-  solidBorderColor: PropTypes__default["default"].string,
-  isLightTheme: PropTypes__default["default"].bool
-};
-SectionTag.defaultProps = {
-  template: "",
-  isLightTheme: false
-};
-
-exports.SectionTag = SectionTag;

package/atoms/SectionTag/styles.arrow.css

@@ -1 +0,0 @@
-.section-m_section__hvZbb{margin-bottom:var(--arrow-spacing-xxs)}@media (min-width:768px){.section-m_section__hvZbb{margin-bottom:var(--arrow-spacing-xs)}}.section-m_section-borderBottomSml__4N3QJ .section-m_border-bottom__QN8bd{height:2px;margin-top:var(--arrow-spacing-xxs);width:20px}.section-m_section-borderLeft__M9ZK8{align-items:baseline;display:flex}.section-m_section-borderLeft__M9ZK8 .section-m_border-left__LCsN3{margin-right:var(--arrow-spacing-xs);max-width:3px;min-width:3px;overflow:hidden}.section-m_section-borderLeft__M9ZK8 .section-m_border-left__LCsN3:before{content:"I";font-family:var(--arrow-sans-serif)}html[dir=rtl] .section-m_border-left__LCsN3{margin-left:var(--arrow-spacing-xs);margin-right:0}.section-m_section-solid__qUoyq{align-self:self-start;color:var(--arrow-c-light);display:inline-flex;padding:var(--arrow-spacing-xxs) var(--arrow-spacing-s)}@media (min-width:768px){.section-m_section-solid__qUoyq{padding:var(--arrow-spacing-xs) var(--arrow-spacing-m)}}.section-m_dark__gUfSN{color:var(--arrow-c-mono2)}.section-m_light__dTk7c{color:var(--arrow-c-invert-mono2)}

package/atoms/Subheadline/index.js

@@ -1,120 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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 _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
-var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
-var useStateValue = function useStateValue() {
-  return React.useContext(StateContext);
-};
-
-function truncate() {
-  var string = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
-  var ellipsis = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  var putEllipsis = ellipsis ? " ..." : "";
-  return typeof string === "string" && string.length > limit ? string.substring(0, limit) + putEllipsis : string;
-}
-
-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;
-};
-PropTypes__default["default"].shape({
-  "sketches-host": PropTypes__default["default"].string,
-  "cdn-name": PropTypes__default["default"].string,
-  "cdn-image": PropTypes__default["default"].string
-});
-PropTypes__default["default"].shape({
-  headline: PropTypes__default["default"].string,
-  "last-published-at": PropTypes__default["default"].number,
-  subheadline: PropTypes__default["default"].string
-});
-
-var _styleModuleImportMap = {
-  "./subheadline.m.css": {
-    "subheadline": "subheadline-m_subheadline__3fd7z",
-    "dark": "subheadline-m_dark__28u00",
-    "light": "subheadline-m_light__2YUOe"
-  }
-};
-var Subheadline = function Subheadline(_ref) {
-  var story = _ref.story,
-      _ref$truncateChars = _ref.truncateChars,
-      truncateChars = _ref$truncateChars === void 0 ? 200 : _ref$truncateChars,
-      lineClamp = _ref.lineClamp,
-      _ref$clazzName = _ref.clazzName,
-      clazzName = _ref$clazzName === void 0 ? "" : _ref$clazzName,
-      forceShowAtom = _ref.forceShowAtom,
-      showFullContent = _ref.showFullContent;
-  var config = useStateValue() || {};
-  var subheadline = forceShowAtom || lodash.get(config, ["showSubheadline"], true);
-  if (!subheadline) return null;
-  var textColor = getTextColor(config.theme);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      WebkitLineClamp: lineClamp
-    },
-    "data-test-id": "subheadline",
-    className: ("p-alt arr--sub-headline arrow-component ".concat(clazzName) ? "p-alt arr--sub-headline arrow-component ".concat(clazzName) + " " : "") + _getClassName__default["default"]("subheadline ".concat(textColor), _styleModuleImportMap)
-  }, showFullContent || typeof lineClamp === "number" ? story.subheadline : truncate(story.subheadline, truncateChars, true));
-};
-Subheadline.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes__default["default"].object.isRequired,
-  //  Restricts the number of lines for subheadline.
-  lineClamp: PropTypes__default["default"].number,
-
-  /** Number of characters to truncate the subheadline */
-  truncateChars: PropTypes__default["default"].number,
-  clazzName: PropTypes__default["default"].string,
-  forceShowAtom: PropTypes__default["default"].bool,
-  showFullContent: PropTypes__default["default"].bool
-};
-Subheadline.defaultProps = {
-  forceShowAtom: false,
-  showFullContent: false
-};
-
-exports.Subheadline = Subheadline;

package/atoms/Subheadline/styles.arrow.css

@@ -1 +0,0 @@
-.subheadline-m_subheadline__7KQiQ{-webkit-box-orient:vertical;display:-webkit-box;margin-bottom:var(--arrow-spacing-xxs);overflow:hidden}@media (min-width:768px){.subheadline-m_subheadline__7KQiQ{margin-bottom:var(--arrow-spacing-xs)}}.subheadline-m_dark__82PuA{color:var(--arrow-c-mono4)}.subheadline-m_light__-SrMN{color:var(--arrow-c-invert-mono4)}