@desynova-digital/components 9.1.52 → 9.2.0

package/atoms/cardV2/cardV2.js

@@ -38,7 +38,16 @@ var CommonStyles = exports.CommonStyles = (0, _styledComponents.css)(_templateOb
 var DivStyles = exports.DivStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n"])), CommonStyles);
 var BaseParaStyles = exports.BaseParaStyles = _styledComponents["default"].p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: SFUIText-Regular;\n  ", ";\n"])), CommonStyles);
 var BaseButtonStyles = exports.BaseButtonStyles = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: SFUIText-Regular;\n  ", ";\n"])), CommonStyles);
-var CardStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  border-radius: 2px;\n"])));
+var CardStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  width: ", ";\n\n  border: 1px solid transparent;\n  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.18);\n\n  /* \u2705 Center pop baseline */\n  transform: scale(1);\n  transform-origin: 50% 50%;\n\n  /* \u2705 Make it pop above siblings */\n  z-index: 0;\n  isolation: isolate;\n\n  transition:\n    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),\n    box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),\n    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);\n\n  will-change: transform;\n\n  /* \uD83D\uDD25 Glow Layer */\n  &::after {\n    content: '';\n    position: absolute;\n    inset: -2px;\n    border-radius: 10px;\n    pointer-events: none;\n    opacity: 0;\n     transition: all 0.4s ease-out;\n\n    box-shadow: ", ";\n  }\n\n  /* \u2705 Hover = pop from center (NO translate) */\n  &:hover {\n    transform: scale(1.035);\n    z-index: 5;\nborder-color: ", ";\n  }\n    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);\n  }\n\n  &:hover::after {\n    opacity: 1;\n  }\n"])), function (_ref2) {
+  var width = _ref2.width;
+  return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
+}, function (_ref3) {
+  var upload_type = _ref3.upload_type;
+  return upload_type === 'RC' ? "\n          0 0 0 1px rgba(255,140,0,0.45),\n          0 12px 35px rgba(0,0,0,0.55),\n          0 0 28px rgba(255,140,0,0.18)\n        " : "\n          0 0 0 1px rgba(13,247,169,0.45),\n          0 12px 35px rgba(0,0,0,0.55),\n          0 0 28px rgba(13,247,169,0.18)\n        ";
+}, function (_ref4) {
+  var upload_type = _ref4.upload_type;
+  return upload_type === 'RC' ? 'rgba(255, 141, 41, 0.2)' : 'rgba(24, 185, 110, 0.2)';
+});
 var CardV2 = function CardV2(props) {
   var width = props.width,
     type = props.type;
@@ -74,6 +83,7 @@ CardV2.propTypes = {
   ingestDbId: _propTypes["default"].string,
   actionClick: _propTypes["default"].func,
   actions: _propTypes["default"].arrayOf(_propTypes["default"].object),
+  onUploadTypeClick: _propTypes["default"].func,
   theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
   type: _propTypes["default"].oneOf(['asset', 'search']),
   bgColor: _propTypes["default"].oneOf(['primary', 'secondary'])

package/atoms/cardV2/content.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,135 +16,199 @@ 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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, _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);
+})(_templateObject2 || (_templateObject2 = (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) {
+})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  font-family: SFUIText-Medium;\n  -webkit-line-clamp: 2;\n  height: 20px;\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: nowrap;\n\n  .title-text {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n    flex-shrink: 1;\n  }\n\n  .files-associated-icon {\n    margin-left: 7px;\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    color: #afb2ba;\n  }\n\n  .files-associated-icon:hover {\n    color: #00cec6;\n  }\n"])), TextEllipsisStyles, function (_ref) {
   var isTitleClick = _ref.isTitleClick;
   return isTitleClick ? 'pointer' : 'default';
 });
-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';
+var ContentStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n  background-color: ", ";\n  border-radius: 0 0 8px 8px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\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  .meta-row {\n    display: flex;\n    align-items: center;\n    margin-top: 6px;\n    column-gap: 10px;\n  }\n  .category-count {\n    margin-top: 6px;\n    color: #afb2ba;\n    font-family: SFUIText-Regular;\n    font-size: 10px;\n    line-height: 12px;\n  }\n  .meta-badge {\n   ", "\n    font-size: 8px;\n    line-height: 12px;\n    padding: 1px 3px;\n    border-radius: 4px;\n    font-family: SFUIText-Regular;\n    min-height: 12px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .meta-text {\n    color: ", ";\n    font-family: SFUIText-Regular;\n    font-size: 10px;\n    font-style: normal;\n    font-weight: 300;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .footer-row {\n    display: flex;\n    align-items: center;\n    margin-top: 10px;\n    column-gap: 12px;\n    position: relative;\n  }\n  .footer-text {\n    color: #afb2ba;\n    font-family: SFUIText-Regular;\n    font-size: 8px;\n    line-height: 10px;\n    margin-right: 0;\n  }\n  .footer-icons {\n    margin-left: auto;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .footer-icon {\n    color: #afb2ba;\n    font-family: SFUIText-Regular;\n    font-size: 8px;\n    line-height: 12px;\n    display: inline-flex;\n    align-items: center;\n  }\n"])), function (_ref2) {
+  var type = _ref2.type,
+    width = _ref2.width;
+  return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '74px' : '90px';
 }, function (_ref3) {
-  var type = _ref3.type,
-    width = _ref3.width;
+  var width = _ref3.width;
+  return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
+}, function (_ref4) {
+  var type = _ref4.type,
+    width = _ref4.width;
   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;
+}, function (_ref5) {
+  var bgColor = _ref5.bgColor,
+    type = _ref5.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;
+}, function (_ref6) {
+  var upload_type = _ref6.upload_type;
+  var isRC = (upload_type === null || upload_type === void 0 ? void 0 : upload_type.toLowerCase()) === 'rc';
+  var color = isRC ? '#ff6327' : '#00CEC6';
+  var bg = isRC ? 'rgba(255, 99, 39, 0.1)' : 'rgba(0, 206, 198, 0.1)';
+  return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n      border: 1px solid ", ";\n      color: ", ";\n      background-color: ", ";\n    "])), color, color, bg);
+}, function (_ref7) {
+  var upload_type = _ref7.upload_type;
+  return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
 });
+var SeasonEpisodeContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  flex-shrink: 0;\n  padding: 2px 6px;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n  border-radius: 3px;\n  background: rgba(255, 255, 255, 0.1);\n  color: var(--Color-Text-color-Text-500, #999);\n  text-align: center;\n  font-family: 'SFUITEXT-LIGHT';\n  font-size: 8px;\n  font-style: normal;\n  font-weight: 400;\n  height: auto;\n  width: auto;\n  margin-left: 6px;\n  span {\n    padding: 0px 2px;\n  }\n"])));
 var Content = function Content(props) {
   var h1 = props.h1,
     h2 = props.h2,
     h3 = props.h3,
     h4 = props.h4,
     h5 = props.h5,
+    h6 = props.h6,
+    h7 = props.h7,
     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 = (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)) {
-        setTooltipVisibleSection(tooltipSection);
-      }
-    };
-  }, []);
-
-  /**
-   * returns filtered list removing undefined from input array
-   * @function
-   */
-  var getTooltipData = function getTooltipData() {
-    for (var _len = arguments.length, list = new Array(_len), _key = 0; _key < _len; _key++) {
-      list[_key] = arguments[_key];
+    theme = props.theme,
+    upload_type = props.upload_type,
+    icon_status = props.icon_status,
+    asset_type = props.asset_type;
+  var ICON_DIMENSION_MAP = {
+    snp_edit: {
+      width: 10,
+      height: 10
+    },
+    pgm_edit_V2: {
+      width: 13,
+      height: 10
+    },
+    subtitle_assign: {
+      width: 12,
+      height: 10
+    },
+    archive: {
+      width: 10,
+      height: 10
+    },
+    delivery: {
+      width: 13,
+      height: 10
+    },
+    dubbing_review: {
+      width: 7,
+      height: 10
     }
-    return list.map(function (ele) {
-      return ele && "".concat(ele, " ");
-    });
   };
+  var ICON_LABEL_MAP = {
+    snp_edit: 'SNP edit',
+    pgm_edit_V2: 'PGM edit',
+    archive: 'Archive',
+    delivery: 'Delivery',
+    dubbing_review: 'Dubbing Review',
+    subtitle_assign: 'Subtitle',
+    file_ingest: 'Ingest'
+  };
+  var getIconLabel = function getIconLabel(iconName) {
+    return ICON_LABEL_MAP[iconName] || (iconName === null || iconName === void 0 ? void 0 : iconName.replace(/_/g, ' ')) || '';
+  };
+  var STATUS_COLOR_MAP = {
+    Success: '#18B96E',
+    Pending: '#666666',
+    Failed: '#FF6C56',
+    'In Progress': '#FF8D29',
+    'In Queue': '#F9E900'
+  };
+  var footerIcons = (icon_status || []).map(function (item) {
+    var _STATUS_COLOR_MAP$ite, _ICON_DIMENSION_MAP$i;
+    return _objectSpread({
+      name: item.icon,
+      status: item.status,
+      tooltipLabel: "".concat(getIconLabel(item.icon)).concat(item.status ? " : ".concat(item.status) : ''),
+      color: (_STATUS_COLOR_MAP$ite = STATUS_COLOR_MAP[item.status]) !== null && _STATUS_COLOR_MAP$ite !== void 0 ? _STATUS_COLOR_MAP$ite : '#AFB2BA'
+    }, (_ICON_DIMENSION_MAP$i = ICON_DIMENSION_MAP[item.icon]) !== null && _ICON_DIMENSION_MAP$i !== void 0 ? _ICON_DIMENSION_MAP$i : {
+      width: 10,
+      height: 10
+    });
+  });
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isFilesIconHovered = _useState2[0],
+    setIsFilesIconHovered = _useState2[1];
   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)
+    className: "title-parent"
   }, /*#__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
+    color: "#FFF"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "title-text",
+    title: h1
+  }, h1), h2 ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, {
+    title: h2
+  }, h2) : null, show_page_id && asset_type !== 'sports' ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: "files-associated-icon",
+    onMouseEnter: function onMouseEnter() {
+      return setIsFilesIconHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsFilesIconHovered(false);
     }
-  }, h4), h5 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
-    margin: "0"
-  }, h5)), overlapping && overlapping.length && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: "files-associated",
+    width: 8,
+    height: 8,
+    color: isFilesIconHovered ? '#00CEC6' : '#AFB2BA'
+  })) : null)), (h2 || h3 || h4 || h5 || h6 || isSegment) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (h3 || h4) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "meta-row"
+  }, h3 && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "meta-badge",
+    title: h3
+  }, h3), h4 && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "meta-text",
+    title: h4
+  }, h4), isSegment && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
+    className: "segment-indicator"
+  }, "S")), (h5 || h6 || h7) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "footer-row"
+  }, h5 && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "footer-text",
+    title: h5
+  }, h5), h6 && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "footer-text",
+    title: h6
+  }, h6), h7 && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "footer-text",
+    title: h7
+  }, h7), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "footer-icons"
+  }, footerIcons.map(function (icon) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      key: icon.name,
+      className: "footer-icon",
+      title: icon.tooltipLabel
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      name: icon.name,
+      color: icon.color,
+      width: icon.width,
+      height: icon.height
+    }));
+  }))), overlapping && overlapping.length && /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
     theme: props.theme,
     display: "flex",
     className: "overlapping-container"
@@ -182,18 +247,7 @@ var Content = function Content(props) {
   })))), 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))));
+  }, overlapping.length)) || null));
 };
 Content.propTypes = {
   h1: _propTypes["default"].string,
@@ -201,6 +255,8 @@ Content.propTypes = {
   h3: _propTypes["default"].string,
   h4: _propTypes["default"].string,
   h5: _propTypes["default"].string,
+  h6: _propTypes["default"].string,
+  h7: _propTypes["default"].string,
   width: _propTypes["default"].string,
   type: _propTypes["default"].string,
   titleClick: _propTypes["default"].func,

package/atoms/cardV2/thumbnail.js

@@ -15,7 +15,7 @@ var _tokens = require("@desynova-digital/tokens");
 var _icon = _interopRequireDefault(require("../../atoms/icon"));
 var _tokens2 = require("../../../tokens");
 var _cardV = require("./cardV2");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // atoms
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // atoms
 // tokens
 // styles
 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); }
@@ -23,48 +23,51 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: rgba(0, 0, 0, 0.5);\n"])));
 var assetStyles = {
   folder: {
-    backgroundColor: "#121D29",
-    backgroundSize: "inherit"
+    backgroundColor: '#121D29',
+    backgroundSize: 'inherit'
   },
   asset: {
-    backgroundColor: "inherit",
-    backgroundSize: "cover"
+    backgroundColor: 'inherit',
+    backgroundSize: 'cover'
   }
 };
-var ThumbnailStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  background: ", ";\n  background-color: ", ";\n  background-size: ", ";\n  width: ", ";\n  height: ", ";\n\n  .iframe-image-block {\n    cursor: ", ";\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n  .background-block {\n    position: absolute;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n    .circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      background-color: #15212f;\n    }\n    i {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .thumbnail-image-block {\n    cursor: pointer;\n    background: #182738;\n  }\n"])), function (_ref) {
+var HoverActionButton = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  border: none;\n  cursor: pointer;\n  width: 26px;\n  height: 26px;\n  border-radius: 15px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 200ms ease;\n"])), OverlayBackgroundStyles);
+var ThumbnailStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  background: ", ";\n  background-color: ", ";\n  background-size: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 8px 8px 0 0;\n  overflow: hidden;\n\n  .iframe-image-block {\n    cursor: ", ";\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n  .background-block {\n    position: absolute;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n    .circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      background-color: #15212f;\n    }\n    i {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .thumbnail-image-block {\n    cursor: pointer;\n    background: linear-gradient(359deg, #182738 19.98%, #182738 48.97%, rgba(24, 39, 56, 0.42) 99.47%);\n  }\n\n  &:hover ", " {\n    opacity: 1;\n  }\n"])), function (_ref) {
   var thumbnail = _ref.thumbnail;
   return "url(".concat(thumbnail, ") no-repeat 50%");
 }, function (_ref2) {
   var data_type = _ref2.data_type;
-  return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : "inherit";
+  return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : 'inherit';
 }, function (_ref3) {
   var data_type = _ref3.data_type;
-  return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : "cover";
+  return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : 'cover';
 }, function (_ref4) {
   var width = _ref4.width;
-  return width === "sm" ? "90px" : width === "md" ? "125px" : "222px";
+  return width === 'sm' ? '90px' : width === 'md' ? '125px' : '222px';
 }, function (_ref5) {
   var width = _ref5.width;
-  return width === "sm" ? "50px" : width === "md" ? "70px" : "126px";
+  return width === 'sm' ? '50px' : width === 'md' ? '70px' : '110px';
 }, function (_ref6) {
   var isClickPrevented = _ref6.isClickPrevented;
-  return !isClickPrevented ? "pointer" : "default";
-});
-var UploadTypeContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 2;\n  .uploadWrapper {\n    border-radius: 50%;\n    background: ", ";\n\n    color: ", ";\n    width: 25px;\n    height: 25px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .wrapper {\n      font-size: 10px;\n      font-family: \"SFUIText-Regular\";\n      line-height: 1.1;\n      text-transform: uppercase;\n    }\n  }\n"])), function (props) {
-  return props.upload_type === "rc" ? "#FF6327" : _tokens.colors[props.theme].card.themeColor;
+  return !isClickPrevented ? 'pointer' : 'default';
+}, HoverActionButton);
+var UploadTypeContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 2;\n  cursor: pointer;\n  .uploadWrapper {\n    border-radius: 50%;\n    background: ", ";\n\n    color: ", ";\n    width: 25px;\n    height: 25px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .wrapper {\n      font-size: 10px;\n      font-family: 'SFUIText-Regular';\n      line-height: 1.1;\n      text-transform: uppercase;\n    }\n  }\n"])), function (props) {
+  return props.upload_type === 'rc' ? '#FF6327' : _tokens.colors[props.theme].card.themeColor;
 }, function (props) {
-  return props.upload_type === "rc" ? "#FFFFFF" : "#0C141D";
+  return props.upload_type === 'rc' ? '#FFFFFF' : '#15212F';
 });
-var StatusBoxStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  padding: 5px 8px;\n  width: fit-content;\n  border-radius: 15px;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n  ", ";\n\n  .status-color {\n    height: 6px;\n    width: 6px;\n    border-radius: 100%;\n    background-color: ", ";\n    margin-right: 5px;\n  }\n\n  .status-text {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: 1;\n    height: 10px;\n  }\n"])), OverlayBackgroundStyles, function (_ref7) {
+var HoverActionContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-left: 6px;\n"])));
+var StatusBoxStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  padding: 5px 8px;\n  width: fit-content;\n  border-radius: 15px;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n  ", ";\n\n  .status-color {\n    height: 6px;\n    width: 6px;\n    border-radius: 100%;\n    background-color: ", ";\n    margin-right: 5px;\n  }\n\n  .status-text {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: 1;\n    height: 10px;\n  }\n"])), OverlayBackgroundStyles, function (_ref7) {
   var hex = _ref7.hex;
   return hex.background;
 });
 var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
   return /*#__PURE__*/_react["default"].createElement(_cardV.BaseButtonStyles, props);
-})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n\n  .tooltip {\n    position: absolute;\n    bottom: 130%;\n    left: 30%;\n    transform: translateX(-50%);\n    padding: 5px 9px;\n    box-sizing: border-box;\n    background: #000000;\n    color: #fff;\n    border-radius: 10px;\n    visibility: hidden;\n    opacity: 0;\n    z-index: 10;\n    transition: all 350ms ease-in-out 0s;\n    &:after {\n      content: \"\";\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid #000;\n      bottom: -5px;\n      left: 50%;\n    }\n    .details-header {\n      color: #666666;\n      font-family: \"SFUIText-Regular\";\n      text-transform: none;\n      margin-bottom: 8px;\n    }\n    .details-value {\n      color: #999999;\n      font-family: \"SFUIText-Light\";\n      text-transform: none;\n      font-size: 10px;\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n    .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n"])), OverlayBackgroundStyles, function (props) {
+})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n\n  .tooltip {\n    position: absolute;\n    bottom: 130%;\n    left: 30%;\n    transform: translateX(-50%);\n    padding: 5px 9px;\n    box-sizing: border-box;\n    background: #000000;\n    color: #fff;\n    border-radius: 10px;\n    visibility: hidden;\n    opacity: 0;\n    z-index: 10;\n    transition: all 350ms ease-in-out 0s;\n    &:after {\n      content: '';\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid #000;\n      bottom: -5px;\n      left: 50%;\n    }\n    .details-header {\n      color: #666666;\n      font-family: 'SFUIText-Regular';\n      text-transform: none;\n      margin-bottom: 8px;\n    }\n    .details-value {\n      color: #999999;\n      font-family: 'SFUIText-Light';\n      text-transform: none;\n      font-size: 10px;\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n    .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n"])), OverlayBackgroundStyles, function (props) {
   return _tokens.colors[props.theme].card.themeColor;
 });
-var CardHeader = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n"])));
+var CardHeader = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n"])));
+var BottomActionContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  z-index: 3;\n  opacity: 1;\n"])));
 var Thumbnail = function Thumbnail(props) {
   var theme = props.theme,
     width = props.width,
@@ -77,7 +80,9 @@ var Thumbnail = function Thumbnail(props) {
     upload_status = props.upload_status,
     upload_type = props.upload_type,
     file_type = props.file_type,
-    data_type = props.data_type;
+    data_type = props.data_type,
+    onUploadTypeClick = props.onUploadTypeClick,
+    showPointer = props.showPointer;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     statusIndex = _useState2[0],
@@ -91,7 +96,7 @@ var Thumbnail = function Thumbnail(props) {
   var hoverPointerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (actions && actions.length > 0 && actions.some(function (item) {
-      return item.field === "upload" || item.field === "phupload_ingest";
+      return item.field === 'upload' || item.field === 'phupload_ingest';
     }) // can add multiple condition in future to prevent click
     ) {
       setClickPreventation(true);
@@ -106,7 +111,7 @@ var Thumbnail = function Thumbnail(props) {
      * @const
      */
     var index = _tokens2.CARD_ASSET_STATUS.findIndex(function (label) {
-      return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(" ").join("_") : []);
+      return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(' ').join('_') : []);
     });
     setStatusIndex(index);
   }, [upload_status, card_status]);
@@ -121,13 +126,13 @@ var Thumbnail = function Thumbnail(props) {
       var iframeOffsetHeight = offsetHeight / iframeCount;
       var imageChangePoint = offsetWidth / iframeCount;
       var offsetTop = Math.abs(iframeBlockHeight - iframeOffsetHeight) / 2;
-      hoverPointerRef.current.style.left = event.offsetX + "px";
+      hoverPointerRef.current.style.left = event.offsetX + 'px';
       var imageNum = parseInt(event.offsetX / imageChangePoint) || 1;
       var imageTop = iframeOffsetHeight * imageNum + offsetTop;
       if (imageTop > offsetHeight) {
         imageTop = offsetHeight + offsetTop - iframeOffsetHeight;
       }
-      iframeImageRef.current.style.top = "-" + imageTop + "px";
+      iframeImageRef.current.style.top = '-' + imageTop + 'px';
     }
   }, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
 
@@ -138,11 +143,21 @@ var Thumbnail = function Thumbnail(props) {
    */
   var handleThumbnailClick = (0, _react.useCallback)(function (e) {
     if (!isClickPrevented) {
-      actionClick(e, "play", ingest_db_id);
+      actionClick(e, 'play', ingest_db_id);
     } else {
       e.preventDefault();
     }
   }, [isClickPrevented]);
+  var handleActionIconClick = (0, _react.useCallback)(function (e, item) {
+    e.stopPropagation();
+    actionClick(e, item.field);
+  }, [actionClick]);
+  var handleUploadTypeClick = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    if (onUploadTypeClick) {
+      onUploadTypeClick();
+    }
+  }, [onUploadTypeClick]);
   return /*#__PURE__*/_react["default"].createElement(ThumbnailStyles, {
     width: width,
     thumbnail: thumbnail,
@@ -150,14 +165,7 @@ var Thumbnail = function Thumbnail(props) {
     onClick: handleThumbnailClick,
     theme: props.theme,
     data_type: data_type
-  }, /*#__PURE__*/_react["default"].createElement(CardHeader, null, upload_type && /*#__PURE__*/_react["default"].createElement(UploadTypeContainer, {
-    theme: props.theme,
-    upload_type: upload_type && upload_type.toLowerCase()
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "uploadWrapper"
-  }, /*#__PURE__*/_react["default"].createElement("p", {
-    className: "wrapper"
-  }, upload_type))), /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
+  }, /*#__PURE__*/_react["default"].createElement(CardHeader, null, /*#__PURE__*/_react["default"].createElement(_cardV.DivStyles, {
     theme: props.theme,
     className: "asset-card-thumbnail-head",
     display: "flex",
@@ -166,20 +174,15 @@ var Thumbnail = function Thumbnail(props) {
     position: "relative",
     zIndex: "2",
     marginLeft: "auto"
-  }, (card_status || upload_status) && /*#__PURE__*/_react["default"].createElement(StatusBoxStyles, {
-    theme: props.theme,
-    hex: _tokens2.CARD_ASSET_STATUS[statusIndex] ? _tokens2.CARD_ASSET_STATUS[statusIndex].hex : {
-      background: "#AFB2BA"
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "status-color"
-  }), /*#__PURE__*/_react["default"].createElement(_cardV.BaseParaStyles, {
-    theme: props.theme,
-    className: "status-text",
-    display: "inline-block",
-    fontSize: "10px",
-    color: "#FFF"
-  }, card_status || upload_status)) || null, actions && actions.length && actions.map(function (item, i) {
+  }, !showPointer && /*#__PURE__*/_react["default"].createElement(HoverActionContainer, null, /*#__PURE__*/_react["default"].createElement(HoverActionButton, {
+    type: "button",
+    onClick: handleUploadTypeClick
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: "info",
+    width: 14,
+    height: 14,
+    theme: props.theme
+  }))))), actions && actions.length && /*#__PURE__*/_react["default"].createElement(BottomActionContainer, null, actions.map(function (item, i) {
     return item.icon && /*#__PURE__*/_react["default"].createElement(IconButtonStyles, {
       theme: props.theme,
       className: "asset-card-thumbnail-icon-button",
@@ -192,20 +195,19 @@ var Thumbnail = function Thumbnail(props) {
       height: "26px",
       padding: "0px",
       width: "26px",
-      margin: actions.length === i + 1 ? "0" : "0 5px 0px 0px",
+      margin: "0",
       onClick: function onClick(e) {
-        e.stopPropagation();
-        actionClick(e, item.field);
+        return handleActionIconClick(e, item);
       }
     }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
       name: item.icon,
-      width: 14,
-      height: 14,
+      width: 22,
+      height: 24,
       theme: props.theme
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tooltip"
     }, item.title));
-  }) || null)), file_type && !thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
+  })) || null, file_type && !thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "thumbnail-image-block background-block"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "circle"
@@ -227,7 +229,7 @@ var Thumbnail = function Thumbnail(props) {
   })) || null);
 };
 Thumbnail.propTypes = {
-  theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
   width: _propTypes["default"].string,
   thumbnail: _propTypes["default"].string,
   file_type: _propTypes["default"].string,
@@ -236,12 +238,13 @@ Thumbnail.propTypes = {
   card_status: _propTypes["default"].string,
   ingest_db_id: _propTypes["default"].string,
   actions: _propTypes["default"].instanceOf(Array),
-  actionClick: _propTypes["default"].func
+  actionClick: _propTypes["default"].func,
+  onUploadTypeClick: _propTypes["default"].func
 };
 Thumbnail.defaultProps = {
-  theme: "dark",
-  width: "lg",
-  thumbnail: "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png",
-  iframeurl: ""
+  theme: 'dark',
+  width: 'lg',
+  thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
+  iframeurl: ''
 };
 var _default = exports["default"] = Thumbnail;

package/atoms/icon/icons.json

@@ -1874,6 +1874,51 @@
       ],
       "width": 10,
       "height": 10
+    },
+    "files-associated": {
+      "paths": [
+        "M7.11111 7.11111H0.888889V0.888889H4V0H0.888889C0.395556 0 0 0.4 0 0.888889V7.11111C0 7.6 0.395556 8 0.888889 8H7.11111C7.6 8 8 7.6 8 7.11111V4H7.11111V7.11111ZM4.88889 0V0.888889H6.48444L2.11556 5.25778L2.74222 5.88444L7.11111 1.51556V3.11111H8V0H4.88889Z"
+      ],
+      "width": 8,
+      "height": 8,
+      "fill": "#AFB2BA"
+    },
+    "upload_dubbing": {
+      "paths": [
+        "M6 11.6387L6.88125 12.5712L10.375 8.88072V16.9297H11.625V8.88072L15.1125 12.5778L16 11.6387L11 6.34766L6 11.6387Z"
+      ],
+      "width": 22,
+      "height": 24,
+      "fill": "#AFB2BA"
+    },
+    "download_dubbing": {
+      "paths": [
+        "M16 11.6387L15.1188 10.7061L11.625 14.3966V6.34768H10.375V14.3966L6.8875 10.6995L6 11.6387L11 16.9297L16 11.6387Z"
+      ],
+      "width": 22,
+      "height": 24,
+      "fill": "#AFB2BA"
+    },
+    "dubbing_review": {
+      "paths": [
+        "M2.4375 5.85526C2.14583 5.54825 2 5.17544 2 4.73684V1.57895C2 1.14035 2.14583 0.767544 2.4375 0.460526C2.72917 0.153509 3.08333 0 3.5 0C3.91667 0 4.27083 0.153509 4.5625 0.460526C4.85417 0.767544 5 1.14035 5 1.57895V4.73684C5 5.17544 4.85417 5.54825 4.5625 5.85526C4.27083 6.16228 3.91667 6.31579 3.5 6.31579C3.08333 6.31579 2.72917 6.16228 2.4375 5.85526ZM3 10V8.38158C2.13333 8.25877 1.41667 7.85088 0.85 7.1579C0.283333 6.46491 0 5.6579 0 4.73684H1C1 5.46491 1.24375 6.08553 1.73125 6.59868C2.21875 7.11184 2.80833 7.36842 3.5 7.36842C4.19167 7.36842 4.78125 7.11184 5.26875 6.59868C5.75625 6.08553 6 5.46491 6 4.73684H7C7 5.6579 6.71667 6.46491 6.15 7.1579C5.58333 7.85088 4.86667 8.25877 4 8.38158V10H3Z"
+      ],
+      "width": 7,
+      "height": 10
+    },
+    "pgm_edit_V2": {
+      "paths": [
+        "M12.3916 0C12.5115 0.000132674 12.6084 0.0976382 12.6084 0.217773V9.78223C12.6084 9.90236 12.5115 9.99987 12.3916 10H0.217773C0.0977729 10 0 9.90244 0 9.78223V0.217773C0 0.0975561 0.0977729 0 0.217773 0H12.3916ZM0.43457 9.56348H2.17383V7.60742H0.43457V9.56348ZM10.4346 9.56348H12.1738V7.60742H10.4346V9.56348ZM0.43457 4.78809H2.17383V5.22363H0.43457V7.17969H2.17383V5.22363H10.4346V4.78809H12.1738V2.83203H10.4346V4.78809H2.17383V2.83203H0.43457V4.78809ZM10.4346 7.17969H12.1738V5.22363H10.4346V7.17969ZM0.43457 2.39551H2.17383V0.439453H0.43457V2.39551ZM10.4346 0.439453V2.39551H12.1738V0.439453H10.4346Z"
+      ],
+      "width": 13,
+      "height": 10
+    },
+    "file_ingest": {
+      "paths": [
+        "M3.17653 10.3237H7.94132V5.55892H11.1178L5.55892 0L0 5.55892H3.17653V10.3237ZM0 11.912H11.1178V13.5002H0V11.912Z"
+      ],
+      "width": 12,
+      "height": 14
     }
   }
 }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "9.1.52",
+  "version": "9.2.0",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "9.1.52",
+    "@desynova-digital/tokens": "9.2.0",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },