@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/cardV2/thumbnail.js

@@ -1,54 +1,26 @@
-'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 _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  background: rgba(0, 0, 0, 0.5);\n'], ['\n  background: rgba(0, 0, 0, 0.5);\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\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'], ['\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']),
-    _templateObject3 = _taggedTemplateLiteral(['\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'], ['\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']),
-    _templateObject4 = _taggedTemplateLiteral(['\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'], ['\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']),
-    _templateObject5 = _taggedTemplateLiteral(['\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'], ['\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']),
-    _templateObject6 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n'], ['\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _icon = require('../../atoms/icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-var _tokens2 = require('../../../tokens');
-
-var _cardV = require('./cardV2');
-
-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) } })); }
-// atoms
-
-
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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
 // tokens
-
-
 // styles
-
-
-var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject);
-
+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 OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: rgba(0, 0, 0, 0.5);\n"])));
 var assetStyles = {
   "folder": {
     backgroundColor: '#121D29',
@@ -56,12 +28,12 @@ var assetStyles = {
   },
   "asset": {
     backgroundColor: 'inherit',
-    backgroundSize: 'cover' }
+    backgroundSize: 'cover'
+  }
 };
-
-var ThumbnailStyles = _styledComponents2.default.div(_templateObject2, function (_ref) {
+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 thumbnail = _ref.thumbnail;
-  return 'url(' + thumbnail + ') no-repeat 50%';
+  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';
@@ -78,50 +50,42 @@ var ThumbnailStyles = _styledComponents2.default.div(_templateObject2, function
   var isClickPrevented = _ref6.isClickPrevented;
   return !isClickPrevented ? 'pointer' : 'default';
 });
-
-var UploadTypeContainer = _styledComponents2.default.div(_templateObject3, function (props) {
+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;
 }, function (props) {
   return props.upload_type === 'rc' ? '#FFFFFF' : '#0C141D';
 });
-
-var StatusBoxStyles = _styledComponents2.default.div(_templateObject4, OverlayBackgroundStyles, function (_ref7) {
+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 hex = _ref7.hex;
   return hex.background;
 });
-
-var IconButtonStyles = (0, _styledComponents2.default)(function (props) {
-  return _react2.default.createElement(_cardV.BaseButtonStyles, props);
-})(_templateObject5, OverlayBackgroundStyles, function (props) {
+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) {
   return _tokens.colors[props.theme].card.themeColor;
 });
-
-var CardHeader = _styledComponents2.default.div(_templateObject6);
-
+var CardHeader = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n"])));
 var Thumbnail = function Thumbnail(props) {
   var theme = props.theme,
-      width = props.width,
-      thumbnail = props.thumbnail,
-      iframeurl = props.iframeurl,
-      card_status = props.card_status,
-      actions = props.actions,
-      ingest_db_id = props.ingest_db_id,
-      actionClick = props.actionClick,
-      upload_status = props.upload_status,
-      upload_type = props.upload_type,
-      file_type = props.file_type,
-      data_type = props.data_type;
-
+    width = props.width,
+    thumbnail = props.thumbnail,
+    iframeurl = props.iframeurl,
+    card_status = props.card_status,
+    actions = props.actions,
+    ingest_db_id = props.ingest_db_id,
+    actionClick = props.actionClick,
+    upload_status = props.upload_status,
+    upload_type = props.upload_type,
+    file_type = props.file_type,
+    data_type = props.data_type;
   var _useState = (0, _react.useState)(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      statusIndex = _useState2[0],
-      setStatusIndex = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    statusIndex = _useState2[0],
+    setStatusIndex = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isClickPrevented = _useState4[0],
-      setClickPreventation = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isClickPrevented = _useState4[0],
+    setClickPreventation = _useState4[1];
   var iframeImageBlockRef = (0, _react.useRef)(null);
   var iframeImageRef = (0, _react.useRef)(null);
   var hoverPointerRef = (0, _react.useRef)(null);
@@ -130,10 +94,9 @@ var Thumbnail = function Thumbnail(props) {
       return item.field === 'upload' || item.field === 'phupload_ingest';
     }) // can add multiple condition in future to prevent click
     ) {
-        setClickPreventation(true);
-      }
+      setClickPreventation(true);
+    }
   }, [actions && JSON.stringify(actions).length > 0]);
-
   (0, _react.useEffect)(function () {
     /**
      * will return the hex based status passed
@@ -147,7 +110,6 @@ var Thumbnail = function Thumbnail(props) {
     });
     setStatusIndex(index);
   }, [upload_status, card_status]);
-
   var handleMouseMove = (0, _react.useCallback)(function () {
     if (iframeImageBlockRef && hoverPointerRef && iframeImageRef) {
       var iframeBlockHeight = iframeImageBlockRef.current.offsetHeight;
@@ -181,137 +143,105 @@ var Thumbnail = function Thumbnail(props) {
       e.preventDefault();
     }
   }, [isClickPrevented]);
-  return _react2.default.createElement(
-    ThumbnailStyles,
-    {
-      width: width,
-      thumbnail: thumbnail,
-      isClickPrevented: isClickPrevented,
-      onClick: handleThumbnailClick,
+  return /*#__PURE__*/_react["default"].createElement(ThumbnailStyles, {
+    width: width,
+    thumbnail: thumbnail,
+    isClickPrevented: isClickPrevented,
+    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, {
+    theme: props.theme,
+    className: "asset-card-thumbnail-head",
+    display: "flex",
+    justify: "flex-end",
+    align: "center",
+    position: "relative",
+    zIndex: "2",
+    marginLeft: "auto"
+  }, (card_status || upload_status) && statusIndex > -1 && /*#__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) {
+    return item.icon && /*#__PURE__*/_react["default"].createElement(IconButtonStyles, {
       theme: props.theme,
-      data_type: data_type
-    },
-    _react2.default.createElement(
-      CardHeader,
-      null,
-      upload_type && _react2.default.createElement(
-        UploadTypeContainer,
-        {
-          theme: props.theme,
-          upload_type: upload_type && upload_type.toLowerCase()
-        },
-        _react2.default.createElement(
-          'div',
-          { className: 'uploadWrapper' },
-          _react2.default.createElement(
-            'p',
-            { className: 'wrapper' },
-            upload_type
-          )
-        )
-      ),
-      _react2.default.createElement(
-        _cardV.DivStyles,
-        {
-          theme: props.theme,
-          className: 'asset-card-thumbnail-head',
-          display: 'flex',
-          justify: 'flex-end',
-          align: 'center',
-          position: 'relative',
-          zIndex: '2',
-          marginLeft: 'auto'
-        },
-        (card_status || upload_status) && statusIndex > -1 && _react2.default.createElement(
-          StatusBoxStyles,
-          {
-            theme: props.theme,
-            hex: _tokens2.CARD_ASSET_STATUS[statusIndex] ? _tokens2.CARD_ASSET_STATUS[statusIndex].hex : { background: '#AFB2BA' }
-          },
-          _react2.default.createElement('div', { className: 'status-color' }),
-          _react2.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) {
-          return item.icon && _react2.default.createElement(
-            IconButtonStyles,
-            {
-              theme: props.theme,
-              className: 'asset-card-thumbnail-icon-button',
-              type: 'button',
-              key: i,
-              position: 'relative',
-              border: 'none',
-              cursor: 'pointer',
-              borderRadius: '15px',
-              height: '26px',
-              padding: '0px',
-              width: '26px',
-              margin: actions.length === i + 1 ? '0' : '0 5px 0px 0px',
-              onClick: function onClick(e) {
-                e.stopPropagation();
-                actionClick(e, item.field);
-              }
-            },
-            _react2.default.createElement(_icon2.default, { name: item.icon, width: 14, height: 14, theme: props.theme }),
-            _react2.default.createElement(
-              'div',
-              { className: 'tooltip' },
-              item.title
-            )
-          );
-        }) || null
-      )
-    ),
-    file_type && !thumbnail ? _react2.default.createElement(
-      'div',
-      { className: 'thumbnail-image-block background-block' },
-      _react2.default.createElement(
-        'div',
-        { className: 'circle' },
-        _react2.default.createElement(_icon2.default, { name: file_type + '-icon', width: 20, height: 20 })
-      )
-    ) : null,
-    iframeurl && _react2.default.createElement(
-      'div',
-      {
-        onMouseMove: handleMouseMove,
-        className: 'iframe-image-block background-block',
-        ref: iframeImageBlockRef
-      },
-      _react2.default.createElement('div', { className: 'hover-pointer', ref: hoverPointerRef }),
-      _react2.default.createElement('img', { ref: iframeImageRef, className: 'iframe-image', src: iframeurl })
-    ) || null
-  );
+      className: "asset-card-thumbnail-icon-button",
+      type: "button",
+      key: i,
+      position: "relative",
+      border: "none",
+      cursor: "pointer",
+      borderRadius: "15px",
+      height: "26px",
+      padding: "0px",
+      width: "26px",
+      margin: actions.length === i + 1 ? '0' : '0 5px 0px 0px',
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        actionClick(e, item.field);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      name: item.icon,
+      width: 14,
+      height: 14,
+      theme: props.theme
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tooltip"
+    }, item.title));
+  }) || null)), file_type && !thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "thumbnail-image-block background-block"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "circle"
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: "".concat(file_type, "-icon"),
+    width: 20,
+    height: 20
+  }))) : null, iframeurl && /*#__PURE__*/_react["default"].createElement("div", {
+    onMouseMove: handleMouseMove,
+    className: "iframe-image-block background-block",
+    ref: iframeImageBlockRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "hover-pointer",
+    ref: hoverPointerRef
+  }), /*#__PURE__*/_react["default"].createElement("img", {
+    ref: iframeImageRef,
+    className: "iframe-image",
+    src: iframeurl
+  })) || null);
 };
-
 Thumbnail.propTypes = {
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
-  width: _propTypes2.default.string,
-  thumbnail: _propTypes2.default.string,
-  file_type: _propTypes2.default.string,
-  iframeurl: _propTypes2.default.string,
-  upload_status: _propTypes2.default.string,
-  card_status: _propTypes2.default.string,
-  ingest_db_id: _propTypes2.default.string,
-  actions: _propTypes2.default.instanceOf(Array),
-  actionClick: _propTypes2.default.func
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  width: _propTypes["default"].string,
+  thumbnail: _propTypes["default"].string,
+  file_type: _propTypes["default"].string,
+  iframeurl: _propTypes["default"].string,
+  upload_status: _propTypes["default"].string,
+  card_status: _propTypes["default"].string,
+  ingest_db_id: _propTypes["default"].string,
+  actions: _propTypes["default"].instanceOf(Array),
+  actionClick: _propTypes["default"].func
 };
-
 Thumbnail.defaultProps = {
   theme: 'dark',
   width: 'lg',
   thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
   iframeurl: ''
 };
-
-exports.default = Thumbnail;
+var _default = exports["default"] = Thumbnail;