@desynova-digital/components 8.19.63 → 9.0.0

package/atoms/cardV2/content.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,30 +8,32 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-var _templateObject = _taggedTemplateLiteral(["\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"]),
-    _templateObject2 = _taggedTemplateLiteral(["\n  font-family: SFUIText-Regular;\n  top: ", ";\n  word-break: break-all;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    margin-left: -5px;\n    border-width: 5px;\n    border-style: solid;\n    border-color: transparent transparent #000;\n  }\n"], ["\n  font-family: SFUIText-Regular;\n  top: ", ";\n  word-break: break-all;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    margin-left: -5px;\n    border-width: 5px;\n    border-style: solid;\n    border-color: transparent transparent #000;\n  }\n"]),
-    _templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  padding: 0;\n  margin-right: 10px;\n  font-size: 10px;\n  color: #afb2ba;\n  -webkit-line-clamp: 1;\n  height: 10px;\n"], ["\n  ", ";\n  padding: 0;\n  margin-right: 10px;\n  font-size: 10px;\n  color: #afb2ba;\n  -webkit-line-clamp: 1;\n  height: 10px;\n"]),
-    _templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  font-family: SFUIText-Medium;\n  -webkit-line-clamp: 2;\n  height: 27px;\n  cursor: ", ";\n"], ["\n  ", ";\n  font-family: SFUIText-Medium;\n  -webkit-line-clamp: 2;\n  height: 27px;\n  cursor: ", ";\n"]),
-    _templateObject5 = _taggedTemplateLiteral(["\n  height: 74px;\n  width: ", ";\n  padding: ", ";\n  background-color: ", ";\n\n  .title-parent {\n    position: relative;\n  }\n\n  .segment-indicator {\n    position: relative;\n    color: #fff;\n    padding-left: 10px;\n    &:before {\n      display: inline-block;\n      content: \" \";\n      width: 6px;\n      height: 6px;\n      position: absolute;\n      top: 2px;\n      left: 0px;\n      background: rgb(0, 206, 198);\n      border-radius: 50%;\n    }\n  }\n  .overlapping-container {\n    justify-content: center;\n    align-items: center;\n    height: 11px;\n    position: relative;\n    .overlappig-popup-container{\n      position:absolute;\n      bottom:100%;\n      margin-right:110px;\n      pointer-events: none;\n      opacity:0;\n      transition: opacity 0.3s ease-out;\n      padding-bottom:10px;\n\n    .overlappig-popup{\n      font-family: SFUIText-Regular;\n      background: #182738;\n      box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n      border-radius: 2px;\n      padding:12px;\n      width:300px;\n      z-index:10;\n\n      .popup-pointer{\n        content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-bottom: 5px solid #00cec6;\n    bottom: 5px;\n    left: 66%;\n    -webkit-transform: rotate(180deg);\n    -ms-transform: translate(180deg);\n    transform: translate(180deg);\n      }\n     \n      .overlapping-episod-list-container{\n      max-height:165px;\n      overflow:scroll;\n      ::-webkit-scrollbar {\n        display: none;\n      }\n      -ms-overflow-style: none;  /* IE and Edge */\n      scrollbar-width: none;\n      }\n     \n      .divider{\n        height:1px;\n        width:100%;\n        margin:10px 0;\n        background:#303F51;\n      }\n      .header-container{\n        display:flex;\n        position:relative;\n        .thumbnail{\n            width:100px;\n            height:55px;\n            background-size:cover !important;\n            background-repeat:no-repeat !important;\n            margin-right:10px;\n            border-radius:2px;\n        }\n        .episod-title{\n            font-size:12px;\n            margin-bottom:8px;\n            max-width:180px;\n            line-height:14px;\n            color:#fff;\n        }\n        .episod-details{\n            font-size:10px;\n            color:#AFB2BA;\n        }\n    }\n     \n      .overlappig-popup-title{\n        font-size: 12px;\n        line-height: 12px;\n        color: #AFB2BA;\n        margin-bottom:15px;\n      }\n    }\n  }\n    \n\n\n    :hover{\n      .overlappig-popup-container {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n    p {\n      font-size: 12px;\n      margin-left: 5px;\n      height: 12px\n    }\n  }\n"], ["\n  height: 74px;\n  width: ", ";\n  padding: ", ";\n  background-color: ", ";\n\n  .title-parent {\n    position: relative;\n  }\n\n  .segment-indicator {\n    position: relative;\n    color: #fff;\n    padding-left: 10px;\n    &:before {\n      display: inline-block;\n      content: \" \";\n      width: 6px;\n      height: 6px;\n      position: absolute;\n      top: 2px;\n      left: 0px;\n      background: rgb(0, 206, 198);\n      border-radius: 50%;\n    }\n  }\n  .overlapping-container {\n    justify-content: center;\n    align-items: center;\n    height: 11px;\n    position: relative;\n    .overlappig-popup-container{\n      position:absolute;\n      bottom:100%;\n      margin-right:110px;\n      pointer-events: none;\n      opacity:0;\n      transition: opacity 0.3s ease-out;\n      padding-bottom:10px;\n\n    .overlappig-popup{\n      font-family: SFUIText-Regular;\n      background: #182738;\n      box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n      border-radius: 2px;\n      padding:12px;\n      width:300px;\n      z-index:10;\n\n      .popup-pointer{\n        content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-bottom: 5px solid #00cec6;\n    bottom: 5px;\n    left: 66%;\n    -webkit-transform: rotate(180deg);\n    -ms-transform: translate(180deg);\n    transform: translate(180deg);\n      }\n     \n      .overlapping-episod-list-container{\n      max-height:165px;\n      overflow:scroll;\n      ::-webkit-scrollbar {\n        display: none;\n      }\n      -ms-overflow-style: none;  /* IE and Edge */\n      scrollbar-width: none;\n      }\n     \n      .divider{\n        height:1px;\n        width:100%;\n        margin:10px 0;\n        background:#303F51;\n      }\n      .header-container{\n        display:flex;\n        position:relative;\n        .thumbnail{\n            width:100px;\n            height:55px;\n            background-size:cover !important;\n            background-repeat:no-repeat !important;\n            margin-right:10px;\n            border-radius:2px;\n        }\n        .episod-title{\n            font-size:12px;\n            margin-bottom:8px;\n            max-width:180px;\n            line-height:14px;\n            color:#fff;\n        }\n        .episod-details{\n            font-size:10px;\n            color:#AFB2BA;\n        }\n    }\n     \n      .overlappig-popup-title{\n        font-size: 12px;\n        line-height: 12px;\n        color: #AFB2BA;\n        margin-bottom:15px;\n      }\n    }\n  }\n    \n\n\n    :hover{\n      .overlappig-popup-container {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n    p {\n      font-size: 12px;\n      margin-left: 5px;\n      height: 12px\n    }\n  }\n"]);
+var _templateObject = _taggedTemplateLiteral(['\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n'], ['\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  font-family: SFUIText-Regular;\n  top: ', ';\n  word-break: break-all;\n\n  &:after {\n    content: \'\';\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    margin-left: -5px;\n    border-width: 5px;\n    border-style: solid;\n    border-color: transparent transparent #000;\n  }\n'], ['\n  font-family: SFUIText-Regular;\n  top: ', ';\n  word-break: break-all;\n\n  &:after {\n    content: \'\';\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    margin-left: -5px;\n    border-width: 5px;\n    border-style: solid;\n    border-color: transparent transparent #000;\n  }\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  ', ';\n  padding: 0;\n  margin-right: 10px;\n  font-size: 10px;\n  color: #afb2ba;\n  -webkit-line-clamp: 1;\n  height: 10px;\n'], ['\n  ', ';\n  padding: 0;\n  margin-right: 10px;\n  font-size: 10px;\n  color: #afb2ba;\n  -webkit-line-clamp: 1;\n  height: 10px;\n']),
+    _templateObject4 = _taggedTemplateLiteral(['\n  ', ';\n  font-family: SFUIText-Medium;\n  -webkit-line-clamp: 2;\n  height: 27px;\n  cursor: ', ';\n'], ['\n  ', ';\n  font-family: SFUIText-Medium;\n  -webkit-line-clamp: 2;\n  height: 27px;\n  cursor: ', ';\n']),
+    _templateObject5 = _taggedTemplateLiteral(['\n  height: 74px;\n  width: ', ';\n  padding: ', ';\n  background-color: ', ';\n\n  .title-parent {\n    position: relative;\n  }\n\n  .segment-indicator {\n    position: relative;\n    color: #fff;\n    padding-left: 10px;\n    &:before {\n      display: inline-block;\n      content: \' \';\n      width: 6px;\n      height: 6px;\n      position: absolute;\n      top: 2px;\n      left: 0px;\n      background: ', ';\n      border-radius: 50%;\n    }\n  }\n  .overlapping-container {\n    justify-content: center;\n    align-items: center;\n    height: 11px;\n    position: relative;\n    .overlappig-popup-container {\n      position: absolute;\n      bottom: 100%;\n      margin-right: 110px;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 0.3s ease-out;\n      padding-bottom: 10px;\n\n      .overlappig-popup {\n        font-family: SFUIText-Regular;\n        background: #182738;\n        box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n        border-radius: 2px;\n        padding: 12px;\n        width: 300px;\n        z-index: 10;\n\n        .popup-pointer {\n          content: \'\';\n          position: absolute;\n          width: 0;\n          height: 0;\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-bottom: 5px solid ', ';\n\n          bottom: 5px;\n          left: 66%;\n          -webkit-transform: rotate(180deg);\n          -ms-transform: translate(180deg);\n          transform: translate(180deg);\n        }\n\n        .overlapping-episod-list-container {\n          max-height: 165px;\n          overflow: scroll;\n          ::-webkit-scrollbar {\n            display: none;\n          }\n          -ms-overflow-style: none; /* IE and Edge */\n          scrollbar-width: none;\n        }\n\n        .divider {\n          height: 1px;\n          width: 100%;\n          margin: 10px 0;\n          background: #303f51;\n        }\n        .header-container {\n          display: flex;\n          position: relative;\n          .thumbnail {\n            width: 100px;\n            height: 55px;\n            background-size: cover !important;\n            background-repeat: no-repeat !important;\n            margin-right: 10px;\n            border-radius: 2px;\n          }\n          .episod-title {\n            font-size: 12px;\n            margin-bottom: 8px;\n            max-width: 180px;\n            line-height: 14px;\n            color: #fff;\n          }\n          .episod-details {\n            font-size: 10px;\n            color: #afb2ba;\n          }\n        }\n\n        .overlappig-popup-title {\n          font-size: 12px;\n          line-height: 12px;\n          color: #afb2ba;\n          margin-bottom: 15px;\n        }\n      }\n    }\n\n    :hover {\n      .overlappig-popup-container {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n    p {\n      font-size: 12px;\n      margin-left: 5px;\n      height: 12px;\n    }\n  }\n'], ['\n  height: 74px;\n  width: ', ';\n  padding: ', ';\n  background-color: ', ';\n\n  .title-parent {\n    position: relative;\n  }\n\n  .segment-indicator {\n    position: relative;\n    color: #fff;\n    padding-left: 10px;\n    &:before {\n      display: inline-block;\n      content: \' \';\n      width: 6px;\n      height: 6px;\n      position: absolute;\n      top: 2px;\n      left: 0px;\n      background: ', ';\n      border-radius: 50%;\n    }\n  }\n  .overlapping-container {\n    justify-content: center;\n    align-items: center;\n    height: 11px;\n    position: relative;\n    .overlappig-popup-container {\n      position: absolute;\n      bottom: 100%;\n      margin-right: 110px;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 0.3s ease-out;\n      padding-bottom: 10px;\n\n      .overlappig-popup {\n        font-family: SFUIText-Regular;\n        background: #182738;\n        box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n        border-radius: 2px;\n        padding: 12px;\n        width: 300px;\n        z-index: 10;\n\n        .popup-pointer {\n          content: \'\';\n          position: absolute;\n          width: 0;\n          height: 0;\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-bottom: 5px solid ', ';\n\n          bottom: 5px;\n          left: 66%;\n          -webkit-transform: rotate(180deg);\n          -ms-transform: translate(180deg);\n          transform: translate(180deg);\n        }\n\n        .overlapping-episod-list-container {\n          max-height: 165px;\n          overflow: scroll;\n          ::-webkit-scrollbar {\n            display: none;\n          }\n          -ms-overflow-style: none; /* IE and Edge */\n          scrollbar-width: none;\n        }\n\n        .divider {\n          height: 1px;\n          width: 100%;\n          margin: 10px 0;\n          background: #303f51;\n        }\n        .header-container {\n          display: flex;\n          position: relative;\n          .thumbnail {\n            width: 100px;\n            height: 55px;\n            background-size: cover !important;\n            background-repeat: no-repeat !important;\n            margin-right: 10px;\n            border-radius: 2px;\n          }\n          .episod-title {\n            font-size: 12px;\n            margin-bottom: 8px;\n            max-width: 180px;\n            line-height: 14px;\n            color: #fff;\n          }\n          .episod-details {\n            font-size: 10px;\n            color: #afb2ba;\n          }\n        }\n\n        .overlappig-popup-title {\n          font-size: 12px;\n          line-height: 12px;\n          color: #afb2ba;\n          margin-bottom: 15px;\n        }\n      }\n    }\n\n    :hover {\n      .overlappig-popup-container {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n    p {\n      font-size: 12px;\n      margin-left: 5px;\n      height: 12px;\n    }\n  }\n']);
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require("prop-types");
+var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styledComponents = require("styled-components");
+var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-var _cardV = require("./cardV2");
+var _cardV = require('./cardV2');
 
-var _icon = require("../../atoms/icon");
+var _icon = require('../../atoms/icon');
 
 var _icon2 = _interopRequireDefault(_icon);
 
+var _tokens = require('@desynova-digital/tokens');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -41,7 +43,7 @@ var TextEllipsisStyles = (0, _styledComponents.css)(_templateObject);
 var ToolTipStyles = (0, _styledComponents2.default)(function (props) {
   return _react2.default.createElement(_cardV.DivStyles, props);
 })(_templateObject2, function (props) {
-  return props.top ? props.top : "25px";
+  return props.top ? props.top : '25px';
 });
 
 var ParaStyles = (0, _styledComponents2.default)(function (props) {
@@ -52,25 +54,29 @@ var TitleStyles = (0, _styledComponents2.default)(function (props) {
   return _react2.default.createElement(_cardV.DivStyles, props);
 })(_templateObject4, TextEllipsisStyles, function (_ref) {
   var isTitleClick = _ref.isTitleClick;
-  return isTitleClick ? "pointer" : "default";
+  return isTitleClick ? 'pointer' : 'default';
 });
 
 var ContentStyles = _styledComponents2.default.div(_templateObject5, function (_ref2) {
   var width = _ref2.width;
-  return width === "sm" ? "auto" : width === "md" ? "125px" : "222px";
+  return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
 }, function (_ref3) {
   var type = _ref3.type,
       width = _ref3.width;
 
-  if (width === "sm" && type === "search") {
-    return "0px 13px";
-  } else if (type === "search" && width !== "sm") {
-    return "13px 0px";
-  } else return "13px 15px";
+  if (width === 'sm' && type === 'search') {
+    return '0px 13px';
+  } else if (type === 'search' && width !== 'sm') {
+    return '13px 0px';
+  } else return '13px 15px';
 }, function (_ref4) {
   var bgColor = _ref4.bgColor,
       type = _ref4.type;
-  return type === "search" ? "transparent" : bgColor === "secondary" && type !== "search" ? "#0C141D" : "#15212F";
+  return type === 'search' ? 'transparent' : bgColor === 'secondary' && type !== 'search' ? '#0C141D' : '#15212F';
+}, function (props) {
+  return _tokens.colors[props.theme].filter.rgbthemeColor;
+}, function (props) {
+  return _tokens.colors[props.theme].card.themeColor;
 });
 
 var Content = function Content(props) {
@@ -84,7 +90,8 @@ var Content = function Content(props) {
       width = props.width,
       titleClick = props.titleClick,
       show_page_id = props.show_page_id,
-      overlapping = props.overlapping;
+      overlapping = props.overlapping,
+      theme = props.theme;
 
   var _useState = (0, _react.useState)(''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -99,7 +106,7 @@ var Content = function Content(props) {
 
   var handleTooltip = (0, _react.useCallback)(function (tooltipSection, tooltipText) {
     return function () {
-      if (tooltipText.replace(/ /g, "").length >= (width === "sm" ? 15 : 33)) {
+      if (tooltipText.replace(/ /g, '').length >= (width === 'sm' ? 15 : 33)) {
         setTooltipVisibleSection(tooltipSection);
       }
     };
@@ -115,57 +122,64 @@ var Content = function Content(props) {
     }
 
     return list.map(function (ele) {
-      return ele && ele + " ";
+      return ele && ele + ' ';
     });
   };
 
   return _react2.default.createElement(
     ContentStyles,
-    _extends({}, props, { className: "asset-card-content" }),
+    _extends({}, props, { className: 'asset-card-content' }),
     _react2.default.createElement(
-      "div",
+      'div',
       {
-        className: "title-parent",
-        onMouseOver: handleTooltip("top", h1),
-        onMouseOut: handleTooltip("", h1)
+        className: 'title-parent',
+        onMouseOver: handleTooltip('top', h1),
+        onMouseOut: handleTooltip('', h1)
       },
       _react2.default.createElement(
         TitleStyles,
         {
+          theme: props.theme,
           isTitleClick: show_page_id,
           onClick: function onClick(e) {
             return titleClick(e, show_page_id);
           },
-          fontSize: "14px",
-          color: "#FFF"
+          fontSize: '14px',
+          color: '#FFF'
         },
         h1
       ),
-      tooltipVisibleSection == "top" && _react2.default.createElement(
+      tooltipVisibleSection == 'top' && _react2.default.createElement(
         ToolTipStyles,
         {
-          width: "100%",
-          padding: "0.5rem",
-          borderRadius: "0.25rem",
-          position: "absolute",
-          zIndex: "1",
-          bgColor: "#000",
-          fontSize: "12px",
-          color: "#FFF",
-          top: "30px"
+          theme: props.theme,
+          width: '100%',
+          padding: '0.5rem',
+          borderRadius: '0.25rem',
+          position: 'absolute',
+          zIndex: '1',
+          bgColor: '#000',
+          fontSize: '12px',
+          color: '#FFF',
+          top: '30px'
         },
         h1
       )
     ),
     (h2 || h3 || h4 || h5 || isSegment) && _react2.default.createElement(
       _cardV.DivStyles,
-      { display: "flex", justify: "space-between", margin: "10px 0 0 0", position: "relative",
-        onMouseOver: handleTooltip("bottom", getTooltipData(h2, h3, h4, h5).toString().replaceAll(",", '')),
-        onMouseOut: handleTooltip("", getTooltipData(h2, h3, h4, h5).toString().replaceAll(",", ''))
+      {
+        theme: props.theme,
+        display: 'flex',
+        justify: 'space-between',
+        margin: '10px 0 0 0',
+        position: 'relative',
+        onMouseOver: handleTooltip('bottom', getTooltipData(h2, h3, h4, h5).toString().replaceAll(',', '')),
+        onMouseOut: handleTooltip('', getTooltipData(h2, h3, h4, h5).toString().replaceAll(',', ''))
       },
       (h2 || h3 || isSegment) && _react2.default.createElement(
         _cardV.DivStyles,
-        { display: "flex" },
+        { theme: props.theme, display: 'flex' },
         h2 && _react2.default.createElement(
           ParaStyles,
           null,
@@ -178,73 +192,78 @@ var Content = function Content(props) {
         ),
         isSegment && _react2.default.createElement(
           ParaStyles,
-          { className: "segment-indicator" },
-          "S"
+          { className: 'segment-indicator' },
+          'S'
         )
       ),
       (h4 || h5) && _react2.default.createElement(
         _cardV.DivStyles,
-        { display: "flex" },
+        { theme: props.theme, display: 'flex' },
         h4 && _react2.default.createElement(
           ParaStyles,
-          { style: { marginRight: !h5 && 0 } },
+          { theme: props.theme, style: { marginRight: !h5 && 0 } },
           h4
         ),
         h5 && _react2.default.createElement(
           ParaStyles,
-          { margin: "0" },
+          { margin: '0' },
           h5
         )
       ),
       overlapping && overlapping.length && _react2.default.createElement(
         _cardV.DivStyles,
-        { display: "flex", className: "overlapping-container" },
-        _react2.default.createElement(_icon2.default, { name: "overlapping" }),
+        { theme: props.theme, display: 'flex', className: 'overlapping-container' },
+        _react2.default.createElement(_icon2.default, { theme: props.theme, name: 'overlapping' }),
         _react2.default.createElement(
-          "div",
-          { className: "overlappig-popup-container" },
+          'div',
+          { className: 'overlappig-popup-container' },
           _react2.default.createElement(
-            "div",
-            { className: "overlappig-popup" },
-            _react2.default.createElement("div", { className: "popup-pointer" }),
+            'div',
+            { className: 'overlappig-popup' },
+            _react2.default.createElement('div', { className: 'popup-pointer' }),
             _react2.default.createElement(
-              "div",
-              { className: "overlappig-popup-title" },
-              "Overlapping with:"
+              'div',
+              { className: 'overlappig-popup-title' },
+              'Overlapping with:'
             ),
             _react2.default.createElement(
-              "div",
-              { className: "overlapping-episod-list-container" },
+              'div',
+              { className: 'overlapping-episod-list-container' },
               overlapping.map(function (value, index) {
                 return _react2.default.createElement(
-                  "span",
+                  'span',
                   null,
                   _react2.default.createElement(
-                    "div",
-                    { className: "header-container" },
-                    _react2.default.createElement("div", { className: "thumbnail", style: { backgroundImage: "url(" + (value.thumbnail ? value.thumbnail : "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png") + " )" } }),
+                    'div',
+                    { className: 'header-container' },
+                    _react2.default.createElement('div', {
+                      className: 'thumbnail',
+                      style: {
+                        backgroundImage: 'url(' + (value.thumbnail ? value.thumbnail : 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png') + ' )'
+                      }
+                    }),
                     _react2.default.createElement(
-                      "div",
+                      'div',
                       null,
                       _react2.default.createElement(
-                        "div",
-                        { className: "episod-title" },
+                        'div',
+                        { className: 'episod-title' },
                         value.episode_name
                       ),
                       _react2.default.createElement(
-                        "div",
-                        { className: "episod-details" },
-                        "S" + value.season_no + " E" + value.episode_no,
+                        'div',
+                        { className: 'episod-details' },
+                        'S' + value.season_no + ' E' + value.episode_no,
                         _react2.default.createElement(
-                          "span",
-                          { style: { marginLeft: "10px" } },
+                          'span',
+                          { style: { marginLeft: '10px' } },
                           value.duration,
-                          " Min"
+                          ' Min'
                         )
                       )
                     )
                   ),
-                  index != overlapping.length - 1 && _react2.default.createElement("div", { className: "divider" })
+                  index != overlapping.length - 1 && _react2.default.createElement('div', { className: 'divider' })
                 );
               })
             )
@@ -252,22 +271,23 @@ var Content = function Content(props) {
         ),
         overlapping.length > 1 && _react2.default.createElement(
           ParaStyles,
-          { margin: "0" },
+          { theme: props.theme, margin: '0' },
           overlapping.length
         )
       ) || null,
-      tooltipVisibleSection == "bottom" && _react2.default.createElement(
+      tooltipVisibleSection == 'bottom' && _react2.default.createElement(
         ToolTipStyles,
         {
-          width: "100%",
-          padding: "0.5rem",
-          borderRadius: "0.25rem",
-          position: "absolute",
-          zIndex: "1",
-          bgColor: "#000",
-          fontSize: "12px",
-          color: "#FFF",
-          top: "15px"
+          theme: props.theme,
+          width: '100%',
+          padding: '0.5rem',
+          borderRadius: '0.25rem',
+          position: 'absolute',
+          zIndex: '1',
+          bgColor: '#000',
+          fontSize: '12px',
+          color: '#FFF',
+          top: '15px'
         },
         getTooltipData(h2, h3, h4, h5)
       )
@@ -283,10 +303,12 @@ Content.propTypes = {
   h5: _propTypes2.default.string,
   width: _propTypes2.default.string,
   type: _propTypes2.default.string,
-  titleClick: _propTypes2.default.func
+  titleClick: _propTypes2.default.func,
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
 };
 
 Content.defaultProps = {
+  theme: 'dark',
   isSegment: false
 };