@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/cardV2/content.js

@@ -1,69 +1,44 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-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: ', ';\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 _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _cardV = require('./cardV2');
-
-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) } })); }
-
-var TextEllipsisStyles = (0, _styledComponents.css)(_templateObject);
-
-var ToolTipStyles = (0, _styledComponents2.default)(function (props) {
-  return _react2.default.createElement(_cardV.DivStyles, props);
-})(_templateObject2, function (props) {
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _cardV = require("./cardV2");
+var _icon = _interopRequireDefault(require("../../atoms/icon"));
+var _tokens = require("@desynova-digital/tokens");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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 && {}.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; }
+var TextEllipsisStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var ToolTipStyles = (0, _styledComponents["default"])(function (props) {
+  return /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, props);
+})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
   return props.top ? props.top : '25px';
 });
-
-var ParaStyles = (0, _styledComponents2.default)(function (props) {
-  return _react2.default.createElement(_cardV.BaseParaStyles, props);
-})(_templateObject3, TextEllipsisStyles);
-
-var TitleStyles = (0, _styledComponents2.default)(function (props) {
-  return _react2.default.createElement(_cardV.DivStyles, props);
-})(_templateObject4, TextEllipsisStyles, function (_ref) {
+var ParaStyles = (0, _styledComponents["default"])(function (props) {
+  return /*#__PURE__*/_react["default"].createElement(_cardV.BaseParaStyles, props);
+})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  padding: 0;\n  margin-right: 10px;\n  font-size: 10px;\n  color: #afb2ba;\n  -webkit-line-clamp: 1;\n  height: 10px;\n"])), TextEllipsisStyles);
+var TitleStyles = (0, _styledComponents["default"])(function (props) {
+  return /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, props);
+})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  font-family: SFUIText-Medium;\n  -webkit-line-clamp: 2;\n  height: 27px;\n  cursor: ", ";\n"])), TextEllipsisStyles, function (_ref) {
   var isTitleClick = _ref.isTitleClick;
   return isTitleClick ? 'pointer' : 'default';
 });
-
-var ContentStyles = _styledComponents2.default.div(_templateObject5, function (_ref2) {
+var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (_ref2) {
   var width = _ref2.width;
   return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
 }, function (_ref3) {
   var type = _ref3.type,
-      width = _ref3.width;
-
+    width = _ref3.width;
   if (width === 'sm' && type === 'search') {
     return '0px 13px';
   } else if (type === 'search' && width !== 'sm') {
@@ -71,39 +46,35 @@ var ContentStyles = _styledComponents2.default.div(_templateObject5, function (_
   } else return '13px 15px';
 }, function (_ref4) {
   var bgColor = _ref4.bgColor,
-      type = _ref4.type;
+    type = _ref4.type;
   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) {
   var h1 = props.h1,
-      h2 = props.h2,
-      h3 = props.h3,
-      h4 = props.h4,
-      h5 = props.h5,
-      isSegment = props.isSegment,
-      type = props.type,
-      width = props.width,
-      titleClick = props.titleClick,
-      show_page_id = props.show_page_id,
-      overlapping = props.overlapping,
-      theme = props.theme;
-
+    h2 = props.h2,
+    h3 = props.h3,
+    h4 = props.h4,
+    h5 = props.h5,
+    isSegment = props.isSegment,
+    type = props.type,
+    width = props.width,
+    titleClick = props.titleClick,
+    show_page_id = props.show_page_id,
+    overlapping = props.overlapping,
+    theme = props.theme;
   var _useState = (0, _react.useState)(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      tooltipVisibleSection = _useState2[0],
-      setTooltipVisibleSection = _useState2[1];
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tooltipVisibleSection = _useState2[0],
+    setTooltipVisibleSection = _useState2[1];
 
   /**
    * toogle tooltip -> true / false
    * @function
    */
-
-
   var handleTooltip = (0, _react.useCallback)(function (tooltipSection, tooltipText) {
     return function () {
       if (tooltipText.replace(/ /g, '').length >= (width === 'sm' ? 15 : 33)) {
@@ -117,199 +88,126 @@ var Content = function Content(props) {
    * @function
    */
   var getTooltipData = function getTooltipData() {
-    for (var _len = arguments.length, list = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, list = new Array(_len), _key = 0; _key < _len; _key++) {
       list[_key] = arguments[_key];
     }
-
     return list.map(function (ele) {
-      return ele && ele + ' ';
+      return ele && "".concat(ele, " ");
     });
   };
-
-  return _react2.default.createElement(
-    ContentStyles,
-    _extends({}, props, { className: 'asset-card-content' }),
-    _react2.default.createElement(
-      'div',
-      {
-        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'
-        },
-        h1
-      ),
-      tooltipVisibleSection == 'top' && _react2.default.createElement(
-        ToolTipStyles,
-        {
-          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,
-      {
-        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,
-        { theme: props.theme, display: 'flex' },
-        h2 && _react2.default.createElement(
-          ParaStyles,
-          null,
-          h2
-        ),
-        h3 && _react2.default.createElement(
-          ParaStyles,
-          null,
-          h3
-        ),
-        isSegment && _react2.default.createElement(
-          ParaStyles,
-          { className: 'segment-indicator' },
-          'S'
-        )
-      ),
-      (h4 || h5) && _react2.default.createElement(
-        _cardV.DivStyles,
-        { theme: props.theme, display: 'flex' },
-        h4 && _react2.default.createElement(
-          ParaStyles,
-          { theme: props.theme, style: { marginRight: !h5 && 0 } },
-          h4
-        ),
-        h5 && _react2.default.createElement(
-          ParaStyles,
-          { margin: '0' },
-          h5
-        )
-      ),
-      overlapping && overlapping.length && _react2.default.createElement(
-        _cardV.DivStyles,
-        { 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' },
-          _react2.default.createElement(
-            'div',
-            { className: 'overlappig-popup' },
-            _react2.default.createElement('div', { className: 'popup-pointer' }),
-            _react2.default.createElement(
-              'div',
-              { className: 'overlappig-popup-title' },
-              'Overlapping with:'
-            ),
-            _react2.default.createElement(
-              'div',
-              { className: 'overlapping-episod-list-container' },
-              overlapping.map(function (value, index) {
-                return _react2.default.createElement(
-                  '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') + ' )'
-                      }
-                    }),
-                    _react2.default.createElement(
-                      'div',
-                      null,
-                      _react2.default.createElement(
-                        'div',
-                        { className: 'episod-title' },
-                        value.episode_name
-                      ),
-                      _react2.default.createElement(
-                        'div',
-                        { className: 'episod-details' },
-                        'S' + value.season_no + ' E' + value.episode_no,
-                        _react2.default.createElement(
-                          'span',
-                          { style: { marginLeft: '10px' } },
-                          value.duration,
-                          ' Min'
-                        )
-                      )
-                    )
-                  ),
-                  index != overlapping.length - 1 && _react2.default.createElement('div', { className: 'divider' })
-                );
-              })
-            )
-          )
-        ),
-        overlapping.length > 1 && _react2.default.createElement(
-          ParaStyles,
-          { theme: props.theme, margin: '0' },
-          overlapping.length
-        )
-      ) || null,
-      tooltipVisibleSection == 'bottom' && _react2.default.createElement(
-        ToolTipStyles,
-        {
-          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)
-      )
-    )
-  );
+  return /*#__PURE__*/_react["default"].createElement(ContentStyles, (0, _extends2["default"])({}, props, {
+    className: "asset-card-content"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "title-parent",
+    onMouseOver: handleTooltip('top', h1),
+    onMouseOut: handleTooltip('', h1)
+  }, /*#__PURE__*/_react["default"].createElement(TitleStyles, {
+    theme: props.theme,
+    isTitleClick: show_page_id,
+    onClick: function onClick(e) {
+      return titleClick(e, show_page_id);
+    },
+    fontSize: "14px",
+    color: "#FFF"
+  }, h1), tooltipVisibleSection == 'top' && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
+    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) && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
+    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) && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
+    theme: props.theme,
+    display: "flex"
+  }, h2 && /*#__PURE__*/_react["default"].createElement(ParaStyles, null, h2), h3 && /*#__PURE__*/_react["default"].createElement(ParaStyles, null, h3), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
+    className: "segment-indicator"
+  }, "S")), (h4 || h5) && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
+    theme: props.theme,
+    display: "flex"
+  }, h4 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
+    theme: props.theme,
+    style: {
+      marginRight: !h5 && 0
+    }
+  }, h4), h5 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
+    margin: "0"
+  }, h5)), overlapping && overlapping.length && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
+    theme: props.theme,
+    display: "flex",
+    className: "overlapping-container"
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    theme: props.theme,
+    name: "overlapping"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "overlappig-popup-container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "overlappig-popup"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "popup-pointer"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "overlappig-popup-title"
+  }, "Overlapping with:"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "overlapping-episod-list-container"
+  }, overlapping.map(function (value, index) {
+    return /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "header-container"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "thumbnail",
+      style: {
+        backgroundImage: "url(".concat(value.thumbnail ? value.thumbnail : 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png', " )")
+      }
+    }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "episod-title"
+    }, value.episode_name), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "episod-details"
+    }, "S".concat(value.season_no, " E").concat(value.episode_no), /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        marginLeft: '10px'
+      }
+    }, value.duration, " Min")))), index != overlapping.length - 1 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "divider"
+    }));
+  })))), overlapping.length > 1 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
+    theme: props.theme,
+    margin: "0"
+  }, overlapping.length)) || null, tooltipVisibleSection == 'bottom' && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
+    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))));
 };
-
 Content.propTypes = {
-  h1: _propTypes2.default.string,
-  h2: _propTypes2.default.string,
-  h3: _propTypes2.default.string,
-  h4: _propTypes2.default.string,
-  h5: _propTypes2.default.string,
-  width: _propTypes2.default.string,
-  type: _propTypes2.default.string,
-  titleClick: _propTypes2.default.func,
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
+  h1: _propTypes["default"].string,
+  h2: _propTypes["default"].string,
+  h3: _propTypes["default"].string,
+  h4: _propTypes["default"].string,
+  h5: _propTypes["default"].string,
+  width: _propTypes["default"].string,
+  type: _propTypes["default"].string,
+  titleClick: _propTypes["default"].func,
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
 };
-
 Content.defaultProps = {
   theme: 'dark',
   isSegment: false
 };
-
-exports.default = Content;
+var _default = exports["default"] = Content;

package/atoms/cardV2/index.js

@@ -1,13 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _cardV = require("./cardV2");
-
-var _cardV2 = _interopRequireDefault(_cardV);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _cardV2.default;
+exports["default"] = void 0;
+var _cardV = _interopRequireDefault(require("./cardV2"));
+var _default = exports["default"] = _cardV["default"];