@desynova-digital/components 9.1.21 → 9.1.22

package/molecules/filter/filter.js

@@ -25,8 +25,7 @@ var _tag = _interopRequireDefault(require("../../atoms/tag"));
 var _icon = _interopRequireDefault(require("../../atoms/icon"));
 var _constants = require("./constants");
 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; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
@@ -76,10 +75,10 @@ var Filter = /*#__PURE__*/function (_Component) {
     var _this;
     (0, _classCallCheck2["default"])(this, Filter);
     _this = _callSuper(this, Filter, [props]);
-    /**
-     * This function handle the onChange event in the filter.
-     * @param {Object} groupItem GUI elements for the particular section
-     * @param {Object} optionItem the item from the options of that section
+    /**
+     * This function handle the onChange event in the filter.
+     * @param {Object} groupItem GUI elements for the particular section
+     * @param {Object} optionItem the item from the options of that section
      */
     (0, _defineProperty2["default"])(_this, "onSelection", function (groupItem, optionItem) {
       var selectedFiltersObj = _this.state.selectedFiltersObj;
@@ -105,9 +104,9 @@ var Filter = /*#__PURE__*/function (_Component) {
               var multiple = filters[groupItem.field].value || []; // initial from filters object
               filters[groupItem.field].label = groupItem.title;
 
-              /*
-               * multiselect will always have groupItem.title as filter Title
-               * because we cant show option.title as its value changes
+              /*
+               * multiselect will always have groupItem.title as filter Title
+               * because we cant show option.title as its value changes
                */
 
               var optionIndex = multiple.findIndex(function (item) {
@@ -190,10 +189,10 @@ var Filter = /*#__PURE__*/function (_Component) {
       }
       _this.changeFilters("selected", filters);
     });
-    /**
-     * This function performs action based on forAction on filters object
-     * @param {String} forAction action performed on the filter object
-     * @param {Object} filters Object containing current filters selected values
+    /**
+     * This function performs action based on forAction on filters object
+     * @param {String} forAction action performed on the filter object
+     * @param {Object} filters Object containing current filters selected values
      */
     (0, _defineProperty2["default"])(_this, "changeFilters", function (forAction, filters) {
       var initialFilters = _this.props.initialFilters;
@@ -215,10 +214,10 @@ var Filter = /*#__PURE__*/function (_Component) {
         }
       });
     });
-    /**
-     * This function hadles the onchange event for search input field inside filter
-     * @param {string} query Input Filed value
-     * @param {string} permission Type of dashboard
+    /**
+     * This function hadles the onchange event for search input field inside filter
+     * @param {string} query Input Filed value
+     * @param {string} permission Type of dashboard
      */
     (0, _defineProperty2["default"])(_this, "handleDebounce", (0, _lodash.debounce)(function (permission, query) {
       if (query.length > 1) _this.props.handleUserIdFilterChange(permission, query);
@@ -230,10 +229,10 @@ var Filter = /*#__PURE__*/function (_Component) {
       if (selectedFiltersObj[element.field]) {
         if (element.select_type === "select") {
           if (element.field === "date") {
-            /*
-             * for date we have value as Object which contains fromDate and toDate
-             * so we add "key" in that object and check based on that key
-             * key is nothing but the value of selected label
+            /*
+             * for date we have value as Object which contains fromDate and toDate
+             * so we add "key" in that object and check based on that key
+             * key is nothing but the value of selected label
              */
             selectedStyle = selectedFiltersObj[element.field].value.key === option.field ? "checked" : "";
           } else {
@@ -274,9 +273,9 @@ var Filter = /*#__PURE__*/function (_Component) {
       }
       return "".concat(element.title === "Date" ? "" : "".concat(element.title, ": ")).concat(label);
     });
-    /**
-     * This function toggle filters menu - show & hide.
-     * @param {boolean} flag contains value true/false to show/ hide filter.
+    /**
+     * This function toggle filters menu - show & hide.
+     * @param {boolean} flag contains value true/false to show/ hide filter.
      */
     (0, _defineProperty2["default"])(_this, "toggleFiltersMenu", function (flag) {
       var selectedFilters = _this.props.selectedFilters;
@@ -312,9 +311,9 @@ var Filter = /*#__PURE__*/function (_Component) {
         }
       }
     });
-    /**
-     * This function hides the dropdown list when user clicks outside the area of input box
-     * @param {Object} e click event that gets fired.
+    /**
+     * This function hides the dropdown list when user clicks outside the area of input box
+     * @param {Object} e click event that gets fired.
      */
     (0, _defineProperty2["default"])(_this, "toggleDropDown", function (e) {
       var showDropDownOptions = _this.state.showDropDownOptions;
@@ -324,9 +323,9 @@ var Filter = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    /**
-     * This function applies the selected filter based on forData.
-     * @param {string} forData action that needs to be performed on the filter.
+    /**
+     * This function applies the selected filter based on forData.
+     * @param {string} forData action that needs to be performed on the filter.
      */
     (0, _defineProperty2["default"])(_this, "applyFilters", function (forData) {
       var _this$state = _this.state,
@@ -363,10 +362,10 @@ var Filter = /*#__PURE__*/function (_Component) {
         applyFilters(selectedFiltersObj, "apply");
       }
     });
-    /**
-     * This function takes the current user object from the dropdown list and checks if it is pre-selected.
-     * @param {Objec} user object that contains details for the user
-     * @returns the name of class with active state or not.
+    /**
+     * This function takes the current user object from the dropdown list and checks if it is pre-selected.
+     * @param {Objec} user object that contains details for the user
+     * @returns the name of class with active state or not.
      */
     (0, _defineProperty2["default"])(_this, "getClassName", function (user, indx) {
       var _this$state2 = _this.state,
@@ -379,8 +378,8 @@ var Filter = /*#__PURE__*/function (_Component) {
         return index >= 0 ? "dropdown-options active" : "dropdown-options";
       }
     });
-    /**
-     * This function reset userIds in the filter.
+    /**
+     * This function reset userIds in the filter.
      */
     (0, _defineProperty2["default"])(_this, "resetSelectedUserFilter", function () {
       _this.setState({
@@ -657,10 +656,10 @@ var Filter = /*#__PURE__*/function (_Component) {
   return (0, _createClass2["default"])(Filter, [{
     key: "onKeyDown",
     value:
-    /**
-     * This function handles the keypress traverse over the dropdown option list
-     * @param {Object} e the event object that is fired
-     * @param {Object} groupItem Object containing groupitem details
+    /**
+     * This function handles the keypress traverse over the dropdown option list
+     * @param {Object} e the event object that is fired
+     * @param {Object} groupItem Object containing groupitem details
      */
     function onKeyDown(e, groupItem) {
       var autoSelectIndex = this.state.autoSelectIndex;

package/molecules/graphDetailCard/graphDetailCard.js

@@ -22,8 +22,7 @@ var _verticalBarGraph = _interopRequireDefault(require("../../atoms/graphs/verti
 var _circleDonut = _interopRequireDefault(require("../../atoms/graphs/circleDonut"));
 var _circleNested = _interopRequireDefault(require("../../atoms/graphs/circleNested"));
 var _templateObject, _templateObject2;
-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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var propTypes = {};

package/molecules/pageHeader/index.js

@@ -12,6 +12,5 @@ Object.defineProperty(exports, "StyledPageHeader", {
 });
 exports["default"] = void 0;
 var _pageHeader = _interopRequireWildcard(require("./pageHeader"));
-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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var _default = exports["default"] = _pageHeader["default"];

package/molecules/richTextInput/RichTextInput.js

@@ -20,8 +20,7 @@ var _quillDelta = _interopRequireDefault(require("quill-delta"));
 var _utils = require("../../_helpers/utils");
 var _excluded = ["maxLength", "defaultValue", "label", "showLengthCount", "errorMessage", "value", "autoFocus", "onChange", "handleSave", "editType"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var RichTextInputDiv = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  i,\n  em {\n    font-style: italic;\n  }\n  strong {\n    font-weight: bold;\n  }\n  .quill-editor-content {\n    white-space: pre-wrap; /* Preserve whitespace and line breaks */\n  }\n  background: transparent;\n  font-family: \"SFUIText-Medium\";\n  position: relative;\n  width: 92%;\n  margin-bottom: 10px;\n  margin-top: 10px;\n  display: block;\n  .ql-container.ql-snow {\n    border: none;\n    position: relative;\n  }\n  .ql-editor {\n    padding: 0;\n  }\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > div:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > div ~ label.floaton {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n"])));
 var CountWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n"])));
 var RichTextInputError = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n"])), function (props) {
@@ -68,10 +67,10 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     };
   });
 
-  /**
-   *
-   * @param {*} str
-   * @returns
+  /**
+   *
+   * @param {*} str
+   * @returns
    */
   var changeEmToI = function changeEmToI(str) {
     var updatedStr = str.replace(/\n/g, '').replace(/<br\s*\/?>/gi, '').replace(/<\/?p>/gi, '').replace(/<[/]?em>/g, function (match) {
@@ -268,10 +267,10 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, errorMessage), maxLength && showLengthCount && quillInstance.current && /*#__PURE__*/_react["default"].createElement(CountWrapper, null, charCount, "/", maxLength));
 });
 
-/**
- *
- * @param {*} props
- * @returns
+/**
+ *
+ * @param {*} props
+ * @returns
  */
 var returnPadding = function returnPadding(props) {
   var digitCount = props.maxLength.toString().length;

package/molecules/table/table.js

@@ -34,9 +34,8 @@ var _permissionIconMap = _interopRequireDefault(require("../../../tokens/permiss
 var _TableErrorScreen = _interopRequireDefault(require("../../molecules/errorScreen/TableErrorScreen"));
 var _inputText = _interopRequireDefault(require("../../atoms/inputText"));
 var _Shimmer = _interopRequireDefault(require("../../atoms/loader/ShimmerComponent/Shimmer"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
-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" != _typeof3(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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var Table = /*#__PURE__*/function (_Component) {
@@ -1388,7 +1387,7 @@ TableInner.Cell = _styledComponents["default"].td(_templateObject8 || (_template
   return _tokens.colors[props.theme].table.border;
 });
 Table.Body = _styledComponents["default"].tbody(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""])));
-Table.Row = _styledComponents["default"].tr(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  .show-row {\n    transform: rotate(-180deg);\n    -webkit-transform: rotate(-180deg);\n    -moz-transform: rotate(-180deg);\n    -ms-transform: rotate(-180deg);\n    -o-transform: rotate(-180deg);\n  }\n  .hide-row {\n    transform: rotate(0deg);\n    -webkit-transform: rotate(0deg);\n    -moz-transform: rotate(0deg);\n    -ms-transform: rotate(0deg);\n    -o-transform: rotate(0deg);\n  }\n  .show-row,\n  .hide-row {\n    transition: transform 0.5s ease-in-out;\n    -webkit-transition: transform 0.5s ease-in-out;\n    -moz-transition: transform 0.5s ease-in-out;\n    -ms-transition: transform 0.5s ease-in-out;\n    -o-transition: transform 0.5s ease-in-out;\n    text-align: right;\n    cursor: pointer;\n  }\n\n  &.selected-row > td,\n  &.selected-row:nth-child(even) > td {\n    background: ", ";\n  }\n\n  &:nth-child(even) > td {\n    background: ", ";\n  }\n\n  &:hover {\n    .asset-play {\n      color: ", ";\n    }\n  }\n\n  ", " {\n    margin: 0px;\n    box-shadow: 0px 0px 0px transparent;\n    ", ";\n  }\n"])), function (props) {
+Table.Row = _styledComponents["default"].tr(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["\n  .show-row {\n    transform: rotate(-180deg);\n    -webkit-transform: rotate(-180deg);\n    -moz-transform: rotate(-180deg);\n    -ms-transform: rotate(-180deg);\n    -o-transform: rotate(-180deg);\n  }\n  .hide-row {\n    transform: rotate(0deg);\n    -webkit-transform: rotate(0deg);\n    -moz-transform: rotate(0deg);\n    -ms-transform: rotate(0deg);\n    -o-transform: rotate(0deg);\n  }\n  .show-row,\n  .hide-row {\n    transition: transform 0.5s ease-in-out;\n    -webkit-transition: transform 0.5s ease-in-out;\n    -moz-transition: transform 0.5s ease-in-out;\n    -ms-transition: transform 0.5s ease-in-out;\n    -o-transition: transform 0.5s ease-in-out;\n    text-align: right;\n    cursor: pointer;\n  }\n\n  &.selected-row > td,\n  &.selected-row:nth-child(even) > td {\n    background: ", ";\n  }\n\n  &:nth-child(even) > td {\n    background: ", ";\n  }\n\n  &:hover {\n    .asset-play {\n      color: ", ";\n    }\n  }\n\n  ", " {\n    margin: 0px;\n    box-shadow: 0px 0px 0px transparent;\n    ", ";\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].table.rowSelectedBackground;
 }, function (props) {
   return _tokens.colors[props.theme].table.evenRowBackground;
@@ -1397,7 +1396,7 @@ Table.Row = _styledComponents["default"].tr(_templateObject10 || (_templateObjec
 }, Table.Card, function (props) {
   if (typeof props.theme === 'string') return 'background:' + _tokens.colors[props.theme].table.innerTableBackground;
 });
-Table.Cell = _styledComponents["default"].td(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: 'SFUIText-Regular';\n  font-size: 12px;\n  letter-spacing: 0.4px;\n  color: ", "; \n  padding: 7px 14px;\n // border-top: 1px solid ", "; \n  text-align: left;\n  vertical-align: middle;\n  line-height: 2;\n  width: ", ";\n  max-width:  ", ";\n\n  &.tableHolder{\n    padding:0px;\n  }\n\n  .asset-play {\n    cursor: pointer;\n    background-color: transparent;\n    border: none;\n    color: #dddddd;\n    &:hover, &:focus {\n      outline: none;\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  .icon-circle {\n    border-radius: 50%;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    i {\n      line-height: 0;\n    }\n  }\n\n    // max-width: 0;\n    // overflow: hidden;\n    // text-overflow: ellipsis;\n    // white-space: nowrap;\n\n    & > div.text-box {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      &.text-linkexpired {\n        color: #FF6C56;\n      }\n    }\n  & > div.action-icons-cell{\n    white-space: nowrap;\n\n    .tooltip-block {\n      top: -50px;\n    }\n    \n    .action-item-btn {\n      padding: 0 15px;\n      cursor: pointer;\n      background-color: transparent;\n\n      &.nested {\n        border-bottom: 1px solid #303f51;\n        display: flex;\n        padding: 10px;\n        align-items: center;\n        &>div:first-child{\n          margin-right:10px;\n        }\n        &:last-child{\n          border-bottom: 0px none;\n        }\n      }\n\n      &:hover {\n        transition: color 0.4s ease-out;\n        color: ", ";\n        path{\n          fill: ", ";\n          transition: fill 0.4s ease-out;\n        }\n      }\n    }\n\n\n    &>button{\n      margin-right: 15px;\n      display: inline-flex;\n    }\n    &>button:last-child{\n      margin-right: 0px;\n    }\n\n    .more-action-holder {\n      position: relative;\n\n      &:hover {\n      .more-action-list-box{\n        display:block;\n      }\n      .more-action-icon{\n        transition: all 0.4s ease-out;\n        background: ", ";\n      }\n    }\n\n      .more-action-icon{\n        height: 24px;\n        width: 24px;\n        background: #303f51;\n        border-radius: 50%;\n        padding: 0px 10px;\n        transform: translate(0px, -1px);\n      }\n      .more-action-list-box{\n        position: absolute;\n        z-index:100;\n        display:none;\n        //display:block;\n        padding-top: 11px;\n        transform: translate(-136px,-2px);\n        \n        .more-action-list {\n          box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n          background: ", ";\n          min-width: 200px;\n        }\n\n        &:before{\n          content: '';\n          position: absolute;\n          /* left: 42%; */\n          /* top: 100%; */\n          width: 0;\n          height: 0;\n          \n          border-left: 4px solid transparent;\n          border-right: 4px solid transparent;\n          border-bottom: 6px solid ", ";\n          transform: translate(144px,-6px);\n        }\n\n      }\n\n    }\n  }\n\n  .nested-table {\n    background: #182738;\n    border-left: 2px solid ", ";\n  }\n\n\n"])), function (props) {
+Table.Cell = _styledComponents["default"].td(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: 'SFUIText-Regular';\n  font-size: 12px;\n  letter-spacing: 0.4px;\n  color: ", "; \n  padding: 7px 14px;\n // border-top: 1px solid ", "; \n  text-align: left;\n  vertical-align: middle;\n  line-height: 2;\n  width: ", ";\n  max-width:  ", ";\n\n  &.tableHolder{\n    padding:0px;\n  }\n\n  .asset-play {\n    cursor: pointer;\n    background-color: transparent;\n    border: none;\n    color: #dddddd;\n    &:hover, &:focus {\n      outline: none;\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  .icon-circle {\n    border-radius: 50%;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    i {\n      line-height: 0;\n    }\n  }\n\n    // max-width: 0;\n    // overflow: hidden;\n    // text-overflow: ellipsis;\n    // white-space: nowrap;\n\n    & > div.text-box {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      &.text-linkexpired {\n        color: #FF6C56;\n      }\n    }\n  & > div.action-icons-cell{\n    white-space: nowrap;\n\n    .tooltip-block {\n      top: -50px;\n    }\n    \n    .action-item-btn {\n      padding: 0 15px;\n      cursor: pointer;\n      background-color: transparent;\n\n      &.nested {\n        border-bottom: 1px solid #303f51;\n        display: flex;\n        padding: 10px;\n        align-items: center;\n        &>div:first-child{\n          margin-right:10px;\n        }\n        &:last-child{\n          border-bottom: 0px none;\n        }\n      }\n\n      &:hover {\n        transition: color 0.4s ease-out;\n        color: ", ";\n        path{\n          fill: ", ";\n          transition: fill 0.4s ease-out;\n        }\n      }\n    }\n\n\n    &>button{\n      margin-right: 15px;\n      display: inline-flex;\n    }\n    &>button:last-child{\n      margin-right: 0px;\n    }\n\n    .more-action-holder {\n      position: relative;\n\n      &:hover {\n      .more-action-list-box{\n        display:block;\n      }\n      .more-action-icon{\n        transition: all 0.4s ease-out;\n        background: ", ";\n      }\n    }\n\n      .more-action-icon{\n        height: 24px;\n        width: 24px;\n        background: #303f51;\n        border-radius: 50%;\n        padding: 0px 10px;\n        transform: translate(0px, -1px);\n      }\n      .more-action-list-box{\n        position: absolute;\n        z-index:100;\n        display:none;\n        //display:block;\n        padding-top: 11px;\n        transform: translate(-136px,-2px);\n        \n        .more-action-list {\n          box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n          background: ", ";\n          min-width: 200px;\n        }\n\n        &:before{\n          content: '';\n          position: absolute;\n          /* left: 42%; */\n          /* top: 100%; */\n          width: 0;\n          height: 0;\n          \n          border-left: 4px solid transparent;\n          border-right: 4px solid transparent;\n          border-bottom: 6px solid ", ";\n          transform: translate(144px,-6px);\n        }\n\n      }\n\n    }\n  }\n\n  .nested-table {\n    background: #182738;\n    border-left: 2px solid ", ";\n  }\n\n\n"])), function (props) {
   return _tokens.colors[props.theme].table.tdColor;
 }, function (props) {
   return _tokens.colors[props.theme].table.border;
@@ -1420,11 +1419,11 @@ Table.Cell = _styledComponents["default"].td(_templateObject11 || (_templateObje
 }, function (props) {
   return _tokens.colors[props.theme].table.CellNestedTableBorderLeft;
 });
-var TableTitleLoadingInitial = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 30px;\n  position: absolute;\n  left: -1px;\n  z-index: 2;\n  display: flex;\n  width: 100%;\n  top: -1px;\n"])));
-var DubbingStatusStyles = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  .detail-block {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    &:not(:last-child) {\n      margin-right: 7px;\n    }\n\n    .status-color {\n      width: 7px;\n      height: 7px;\n      margin-right: 6px;\n      border-radius: 100%;\n      background: rgba(255, 255, 255, 0.3);\n      &.approved {\n        background: ", ";\n      }\n      &.rejected {\n        background: #ef5350;\n      }\n    }\n    .language-name {\n      text-transform: capitalize;\n      font-size: 12px;\n      font-family: SFUIText-Regular;\n      color: #fff;\n    }\n  }\n"])), function (props) {
+var TableTitleLoadingInitial = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 30px;\n  position: absolute;\n  left: -1px;\n  z-index: 2;\n  display: flex;\n  width: 100%;\n  top: -1px;\n"])));
+var DubbingStatusStyles = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  .detail-block {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    &:not(:last-child) {\n      margin-right: 7px;\n    }\n\n    .status-color {\n      width: 7px;\n      height: 7px;\n      margin-right: 6px;\n      border-radius: 100%;\n      background: rgba(255, 255, 255, 0.3);\n      &.approved {\n        background: ", ";\n      }\n      &.rejected {\n        background: #ef5350;\n      }\n    }\n    .language-name {\n      text-transform: capitalize;\n      font-size: 12px;\n      font-family: SFUIText-Regular;\n      color: #fff;\n    }\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].table.ApprovedBackground;
 });
-var SelectAllButton = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: ", ";\n  border-radius: 50%;\n  cursor: pointer;\n  position: absolute;\n  left: 14px;\n  z-index: 2;\n  top: 75px;\n  .input-select-all-button {\n    height: 0px;\n    width: 0px;\n    display: none;\n  }\n  .label-select-all-button {\n    position: relative;\n    cursor: pointer;\n    display: flex;\n    margin: 0px;\n    height: 20px;\n    align-items: center;\n    border-radius: 50%;\n    background: ", ";\n    .span-select-all-button {\n      display: ", ";\n      position: absolute;\n      top: 10px;\n      left: 5px;\n      border-right: 2px solid transparent;\n      border-bottom: 2px solid transparent;\n      transform: rotate(45deg);\n      transform-origin: 0 100%;\n      animation: ", ";\n    }\n  }\n"])), function (props) {
+var SelectAllButton = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: ", ";\n  border-radius: 50%;\n  cursor: pointer;\n  position: absolute;\n  left: 14px;\n  z-index: 2;\n  top: 75px;\n  .input-select-all-button {\n    height: 0px;\n    width: 0px;\n    display: none;\n  }\n  .label-select-all-button {\n    position: relative;\n    cursor: pointer;\n    display: flex;\n    margin: 0px;\n    height: 20px;\n    align-items: center;\n    border-radius: 50%;\n    background: ", ";\n    .span-select-all-button {\n      display: ", ";\n      position: absolute;\n      top: 10px;\n      left: 5px;\n      border-right: 2px solid transparent;\n      border-bottom: 2px solid transparent;\n      transform: rotate(45deg);\n      transform-origin: 0 100%;\n      animation: ", ";\n    }\n  }\n"])), function (props) {
   return props.isActive ? '1px solid #9E9E9E' : '';
 }, function (props) {
   return !props.isActive ? '#49dad0' : '';

package/molecules/videoPlayer/videoPlayer.js

@@ -20,7 +20,7 @@ var _icon = _interopRequireDefault(require("../../atoms/icon"));
 var _image = _interopRequireDefault(require("../../atoms/image"));
 var _thematicBreak = _interopRequireDefault(require("../../atoms/thematicBreak"));
 var _tabs = _interopRequireDefault(require("../../molecules/tabs"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var PlayerContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    height: 100%;\n"])));
@@ -32,11 +32,11 @@ var BigPlayButton = (0, _styledComponents["default"])(_button["default"])(_templ
 var SDPlayerBorder = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n    opacity: 0.3;\n    border: solid 1px #ffffff;\n    top: 50%;\n    left: 50%;\n    -webkit-transform: translate(-50%,-50%);\n    -ms-transform: translate(-50%,-50%);\n    -o-transform: translate(-50%,-50%);\n    -moz-transform: translate(-50%,-50%);\n    transform: translate(-50%,-50%);\n    position: absolute;\n    padding-left: 75%;\n    height: 100%;\n"])));
 var PlayerControlBlock = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    height: 60px;\n    position: relative;\n"])));
 var SeekBar = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    height: 4px;\n    position: relative;\n    cursor: pointer;\n    .seekbar-bg {\n        background: rgba(0,0,0,0.3);\n        width: 100%;\n        height: 100%;\n    }\n    .play-progress {\n        position: absolute;\n        width: 0px;\n        height: 100%;\n        left: 0;\n        top: 0;\n        background: #00cec6;\n        &:after {\n            content: '';\n            width: 12px;\n            height: 12px;\n            position: absolute;\n            background: #00cec6;\n            border-radius: 100%;\n            right: -6px;\n            top: -5px;\n            box-shadow: 0 0 14px 1px #00cec6;\n        }\n    }\n"])));
-var PlayerControls = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n    height: calc(100% - 4px);\n    background: #000000;\n    display: flex;\n    justify-content: space-between;\n    padding: 0 10px;\n    align-items: center;\n    .controls-left, .controls-right {\n        display: flex;\n        align-items: center;\n        ", " {\n            background: transparent;\n            border: none;\n            margin: 0 10px;\n        }\n    }\n    .controls-left{\n        .video-time-display {\n            display: flex;\n            align-items: center;\n            font-family: SFUIText-Regular;\n            font-size: 12px;\n            letter-spacing: -0.6px;\n            .video-time {\n                margin: 0 2px;\n                &.video-end-time, &.video-time-seperator {\n                    color: #888888;\n                }\n                &.video-current-time {\n                    color: #ffffff;\n                    min-width: 64px;\n                }\n            }\n        }\n    }\n"])), _button["default"].Element);
-var CommentBox = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    background-color: #333333;\n    align-items: center;\n    justify-content: space-between;\n    ", " {\n        height: 100%;\n        color: #ccc;\n        padding: 15px 10px 15px 20px;\n        border-bottom: none;\n    }\n    ", " {\n        margin: 0;\n        background: #333333;\n        border: none;\n        ", " {\n            svg {\n                path {\n                    fill: #00cec6;\n                }\n            }\n        }\n    }\n"])), _inputText["default"].Element, _button["default"].Element, _icon["default"].Element);
-var Carousal = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n    height: 91px;\n    background: #000000;\n"])));
-var VideoDetailsWrapper = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 36.33%;\n    .tab-block {\n        height: 100%;\n        .tab-container {\n            padding: 20px;\n            text-align: left;\n            .info-block {\n                width: 33.33%;\n                display: inline-block;\n                padding-bottom: 25px;\n                &:last-child{\n                    width: 100%;\n                }\n                .info-header {\n                    font-family: SFUIText-Regular;\n                    font-size: 10px;\n                    color: #666666;\n                    color: #cccccc;\n                    margin-bottom: 20px;\n                }\n                .info-value {\n                    font-family: SFUIText-Regular;\n                    font-size: 14px;\n                    color: #333333;\n                    color: #ffffff;\n                }\n            }\n            &.scenes-tab {\n                hr {\n                    border-color: #eeeeee;\n                    border-color: #4e5c6c;\n                }\n                .scenes-synopsis {\n                    .info-header {\n                        font-family: SFUIText-Regular;\n                        font-size: 12px;\n                        color: #333333;\n                        color: #cccccc;\n                        text-transform: uppercase;\n                        margin-bottom: 10px;\n                    }\n                    .synopsis {\n                        font-family: SFUIText-Regular;\n                        font-size: 12px;\n                        line-height: 1.33;\n                        color: #666666;\n                        color: #ffffff;\n                        margin-bottom: 10px;\n                    }\n                }\n                .scenes-wrapper {\n                    .scene-container{\n                        &:last-child {\n                            hr {\n                                display: none;\n                            }\n                        }\n                        .scene-block {\n                            display: flex;\n                            justify-content: flex-start;\n                            align-items: flex-start;\n                            cursor: pointer;\n                            &:hover{\n                                .scene-image {\n                                    ", " {\n                                        display: inline-block;\n                                    }\n                                }\n                            }\n                            .scene-image {\n                                width: 70px;\n                                height: 70px;\n                                border-radius: 100%;\n                                overflow: hidden;\n                                position: relative;\n                                ", " {\n                                    display: none;\n                                    position: absolute;\n                                    top: 50%;\n                                    left: 50%;\n                                    transform: translate(-50%, -50%);\n                                    -webkit-transform: translate(-50%, -50%);\n                                    -moz-transform: translate(-50%, -50%);\n                                    -ms-transform: translate(-50%, -50%);\n                                    -o-transform: translate(-50%, -50%);\n                                }\n                            }\n                            .scene-details {\n                                margin-left: 15px;\n                                .scene-name {\n                                    font-family: SFUIText-Medium;\n                                    font-size: 12px;\n                                    font-weight: 500;\n                                    font-style: normal;\n                                    font-stretch: normal;\n                                    line-height: normal;\n                                    letter-spacing: normal;\n                                    color: #333333;\n                                    color: #ffffff;\n                                    margin-bottom: 5px;\n                                }\n                                .scene-time {\n                                    font-family: SFUIText-Medium;\n                                    font-size: 12px;\n                                    font-weight: 500;\n                                    font-style: normal;\n                                    font-stretch: normal;\n                                    line-height: normal;\n                                    letter-spacing: normal;\n                                    color: #888888;\n                                    color: #aaaaaa;\n                                    margin-bottom: 5px;\n                                }\n                                .scene-tags-block {\n                                    display: flex;\n                                    justify-content: flex-start;\n                                    align-items: flex-start;\n                                    .scene-tags {\n                                        font-family: SFUIText-Medium;\n                                        font-size: 12px;\n                                        font-weight: 500;\n                                        font-style: normal;\n                                        font-stretch: normal;\n                                        line-height: 1.17;\n                                        letter-spacing: normal;\n                                        color: #c7c5c5;\n                                        color: #999999;\n                                        margin-right: 5px;\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n            &.comments-tab {\n                padding: 0;\n                position: relative;\n                width: 100%;\n                height: 100%;\n                .comments-section {\n                    padding: 10px 0;\n                    height: calc(100% - 73px);\n                    overflow: auto;\n                    top: 0;\n                    position: absolute;\n                    left: 0;\n                    width: 100%;\n                    .comments-details {\n                        padding: 10px 20px 10px 20px;\n                        .comments-count {\n                            font-size: 14px;\n                            font-weight: normal;\n                            font-family: SFUIText-Regular;\n                            font-style: normal;\n                            font-stretch: normal;\n                            line-height: normal;\n                            letter-spacing: normal;\n                            color: #333333;\n                            color: #cccccc;\n                        }\n                    }\n                    .comments-container {\n                        .comment-wrapper {\n                            padding: 20px;\n                            cursor: pointer;\n                            &:hover {\n                                background: #f5f5f5;\n                                background: #304153;\n                            }\n                            .comment-block, .reply-block {\n                                .comment-header {\n                                    display: flex;\n                                    justify-content: flex-start;\n                                    align-items: center;\n                                    margin-bottom: 10px;\n                                    position: relative;\n                                    z-index: 2;\n                                    img {\n                                        width: 30px;\n                                        height: 30px;\n                                        border-radius: 100%;\n                                        left: auto;\n                                        top: auto;\n                                        transform: none;\n                                    }\n                                    .user-name {\n                                        padding: 0px 20px 0px 10px;\n                                        font-family: SFUIText-Medium;\n                                        font-size: 12px;\n                                        font-weight: 500;\n                                        font-style: normal;\n                                        font-stretch: normal;\n                                        line-height: normal;\n                                        letter-spacing: normal;\n                                        color: #333333;\n                                        color: #ffffff;\n                                    }\n                                    .video-time {\n                                        opacity: 0.8;\n                                        font-family: SFUIText-Regular;\n                                        font-size: 12px;\n                                        font-weight: normal;\n                                        font-style: normal;\n                                        font-stretch: normal;\n                                        line-height: normal;\n                                        letter-spacing: normal;\n                                        color: #626260;\n                                        color: #cccccc;\n                                        text-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);\n                                    }\n                                    .comment-time {\n                                        opacity: 0.2;\n                                        opacity: 1;\n                                        font-family: SFUIText-Regular;\n                                        font-size: 12px;\n                                        font-weight: normal;\n                                        font-style: normal;\n                                        font-stretch: normal;\n                                        line-height: normal;\n                                        letter-spacing: normal;\n                                        color: #000000;\n                                        color: #aaaaaa;\n                                        margin-left: 20px;\n                                    }\n                                }\n                                .comment-body {\n                                    p {\n                                        font-family: SFUIText-Regular;\n                                        font-size: 13px;\n                                        font-weight: 300;\n                                        font-style: normal;\n                                        font-stretch: normal;\n                                        line-height: 1.38;\n                                        letter-spacing: normal;\n                                        color: #333333;\n                                        color: #ffffff;\n                                    }\n                                }\n                            }\n                            .reply-wrapper {\n                                .reply-block {\n                                    padding-left: 20px;\n                                    padding-top: 15px;\n                                    position: relative;\n                                    &:after {\n                                        content: '';\n                                        position: absolute;\n                                        width: 1px;\n                                        height: 100%;\n                                        background: #cccccc;\n                                        background: #4e5c6c;\n                                        top: 15px;\n                                        z-index: 0;\n                                        left: 35px;\n                                    }\n                                    &:last-child {\n                                        &:after {\n                                            display: none;\n                                        }\n                                    }\n                                    .comment-body {\n                                        padding-left: 40px;\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n                .approval-block {\n                    height: 73px;\n                    display: flex;\n                    justify-content: space-evenly;\n                    align-items: center;\n                    padding: 0 10px;\n                    background: #121d29;\n                    background: #ffffff;\n                    position: absolute;\n                    width: 100%;\n                    bottom: 0;\n                    ", " {\n                        font-size: 12px;\n                        margin: 0 10px;\n                    }\n                }\n            }\n            &.tags-tab {\n                .tag-header {\n                    font-family: SFUIText-Regular;\n                    font-size: 12px;\n                    font-weight: normal;\n                    font-style: normal;\n                    font-stretch: normal;\n                    line-height: normal;\n                    letter-spacing: normal;\n                    color: #cccccc;\n                }\n                .characters-list {\n                    margin: 10px 0;\n                    .actor-tag {\n                        width: 70px;\n                        height: 70px;\n                        border-radius: 100%;\n                        background: #121d29;\n                        display: inline-block;\n                        vertical-align: middle;\n                        margin: 10px;\n                        position: relative;\n                        overflow: hidden;\n                        cursor: pointer;\n                        border: 1px solid transparent;\n                        &.actor-selected, &:hover {\n                            border: 1px solid #00cec6;\n                            .actor-name-wrapper {\n                                display: block;\n                            }\n                        }\n                        ", " {\n                            positon: absolute;\n                        }\n                        .actor-name-wrapper {\n                            display: none;\n                            position: absolute;\n                            width: 100%;\n                            height: 100%;\n                            top: 0;\n                            left: 0;\n                            background: rgba(0,0,0,0.8);\n                            .actor-name {\n                                position: absolute;\n                                top: 50%;\n                                left: 50%;\n                                transform: translate(-50%, -50%);\n                                -webkit-transform: translate(-50%, -50%);\n                                -moz-transform: translate(-50%, -50%);\n                                -ms-transform: translate(-50%, -50%);\n                                -o-transform: translate(-50%, -50%);\n                                width: 60px;\n                                text-align: center;\n                                font-family: SFUIText-Medium;\n                                font-size: 10px;\n                                letter-spacing: 0px;\n                                color: #ffffff;\n                                word-break: break-word;\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n"])), _icon["default"].Element, _icon["default"].Element, _button["default"].Element, _image["default"].Element);
-var MarkerBlock = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n    position: absolute;\n    width: 100%;\n    height: 10px;\n    left:0;\n    bottom: 15px;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    .scene-marker {\n        background: #00cec6;\n        position: relative;\n        height: 100%;\n        display: inline-block;\n        vertical-align: top;\n    }\n"])));
+var PlayerControls = _styledComponents["default"].div(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["\n    height: calc(100% - 4px);\n    background: #000000;\n    display: flex;\n    justify-content: space-between;\n    padding: 0 10px;\n    align-items: center;\n    .controls-left, .controls-right {\n        display: flex;\n        align-items: center;\n        ", " {\n            background: transparent;\n            border: none;\n            margin: 0 10px;\n        }\n    }\n    .controls-left{\n        .video-time-display {\n            display: flex;\n            align-items: center;\n            font-family: SFUIText-Regular;\n            font-size: 12px;\n            letter-spacing: -0.6px;\n            .video-time {\n                margin: 0 2px;\n                &.video-end-time, &.video-time-seperator {\n                    color: #888888;\n                }\n                &.video-current-time {\n                    color: #ffffff;\n                    min-width: 64px;\n                }\n            }\n        }\n    }\n"])), _button["default"].Element);
+var CommentBox = _styledComponents["default"].div(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    background-color: #333333;\n    align-items: center;\n    justify-content: space-between;\n    ", " {\n        height: 100%;\n        color: #ccc;\n        padding: 15px 10px 15px 20px;\n        border-bottom: none;\n    }\n    ", " {\n        margin: 0;\n        background: #333333;\n        border: none;\n        ", " {\n            svg {\n                path {\n                    fill: #00cec6;\n                }\n            }\n        }\n    }\n"])), _inputText["default"].Element, _button["default"].Element, _icon["default"].Element);
+var Carousal = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n    height: 91px;\n    background: #000000;\n"])));
+var VideoDetailsWrapper = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 36.33%;\n    .tab-block {\n        height: 100%;\n        .tab-container {\n            padding: 20px;\n            text-align: left;\n            .info-block {\n                width: 33.33%;\n                display: inline-block;\n                padding-bottom: 25px;\n                &:last-child{\n                    width: 100%;\n                }\n                .info-header {\n                    font-family: SFUIText-Regular;\n                    font-size: 10px;\n                    color: #666666;\n                    color: #cccccc;\n                    margin-bottom: 20px;\n                }\n                .info-value {\n                    font-family: SFUIText-Regular;\n                    font-size: 14px;\n                    color: #333333;\n                    color: #ffffff;\n                }\n            }\n            &.scenes-tab {\n                hr {\n                    border-color: #eeeeee;\n                    border-color: #4e5c6c;\n                }\n                .scenes-synopsis {\n                    .info-header {\n                        font-family: SFUIText-Regular;\n                        font-size: 12px;\n                        color: #333333;\n                        color: #cccccc;\n                        text-transform: uppercase;\n                        margin-bottom: 10px;\n                    }\n                    .synopsis {\n                        font-family: SFUIText-Regular;\n                        font-size: 12px;\n                        line-height: 1.33;\n                        color: #666666;\n                        color: #ffffff;\n                        margin-bottom: 10px;\n                    }\n                }\n                .scenes-wrapper {\n                    .scene-container{\n                        &:last-child {\n                            hr {\n                                display: none;\n                            }\n                        }\n                        .scene-block {\n                            display: flex;\n                            justify-content: flex-start;\n                            align-items: flex-start;\n                            cursor: pointer;\n                            &:hover{\n                                .scene-image {\n                                    ", " {\n                                        display: inline-block;\n                                    }\n                                }\n                            }\n                            .scene-image {\n                                width: 70px;\n                                height: 70px;\n                                border-radius: 100%;\n                                overflow: hidden;\n                                position: relative;\n                                ", " {\n                                    display: none;\n                                    position: absolute;\n                                    top: 50%;\n                                    left: 50%;\n                                    transform: translate(-50%, -50%);\n                                    -webkit-transform: translate(-50%, -50%);\n                                    -moz-transform: translate(-50%, -50%);\n                                    -ms-transform: translate(-50%, -50%);\n                                    -o-transform: translate(-50%, -50%);\n                                }\n                            }\n                            .scene-details {\n                                margin-left: 15px;\n                                .scene-name {\n                                    font-family: SFUIText-Medium;\n                                    font-size: 12px;\n                                    font-weight: 500;\n                                    font-style: normal;\n                                    font-stretch: normal;\n                                    line-height: normal;\n                                    letter-spacing: normal;\n                                    color: #333333;\n                                    color: #ffffff;\n                                    margin-bottom: 5px;\n                                }\n                                .scene-time {\n                                    font-family: SFUIText-Medium;\n                                    font-size: 12px;\n                                    font-weight: 500;\n                                    font-style: normal;\n                                    font-stretch: normal;\n                                    line-height: normal;\n                                    letter-spacing: normal;\n                                    color: #888888;\n                                    color: #aaaaaa;\n                                    margin-bottom: 5px;\n                                }\n                                .scene-tags-block {\n                                    display: flex;\n                                    justify-content: flex-start;\n                                    align-items: flex-start;\n                                    .scene-tags {\n                                        font-family: SFUIText-Medium;\n                                        font-size: 12px;\n                                        font-weight: 500;\n                                        font-style: normal;\n                                        font-stretch: normal;\n                                        line-height: 1.17;\n                                        letter-spacing: normal;\n                                        color: #c7c5c5;\n                                        color: #999999;\n                                        margin-right: 5px;\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n            &.comments-tab {\n                padding: 0;\n                position: relative;\n                width: 100%;\n                height: 100%;\n                .comments-section {\n                    padding: 10px 0;\n                    height: calc(100% - 73px);\n                    overflow: auto;\n                    top: 0;\n                    position: absolute;\n                    left: 0;\n                    width: 100%;\n                    .comments-details {\n                        padding: 10px 20px 10px 20px;\n                        .comments-count {\n                            font-size: 14px;\n                            font-weight: normal;\n                            font-family: SFUIText-Regular;\n                            font-style: normal;\n                            font-stretch: normal;\n                            line-height: normal;\n                            letter-spacing: normal;\n                            color: #333333;\n                            color: #cccccc;\n                        }\n                    }\n                    .comments-container {\n                        .comment-wrapper {\n                            padding: 20px;\n                            cursor: pointer;\n                            &:hover {\n                                background: #f5f5f5;\n                                background: #304153;\n                            }\n                            .comment-block, .reply-block {\n                                .comment-header {\n                                    display: flex;\n                                    justify-content: flex-start;\n                                    align-items: center;\n                                    margin-bottom: 10px;\n                                    position: relative;\n                                    z-index: 2;\n                                    img {\n                                        width: 30px;\n                                        height: 30px;\n                                        border-radius: 100%;\n                                        left: auto;\n                                        top: auto;\n                                        transform: none;\n                                    }\n                                    .user-name {\n                                        padding: 0px 20px 0px 10px;\n                                        font-family: SFUIText-Medium;\n                                        font-size: 12px;\n                                        font-weight: 500;\n                                        font-style: normal;\n                                        font-stretch: normal;\n                                        line-height: normal;\n                                        letter-spacing: normal;\n                                        color: #333333;\n                                        color: #ffffff;\n                                    }\n                                    .video-time {\n                                        opacity: 0.8;\n                                        font-family: SFUIText-Regular;\n                                        font-size: 12px;\n                                        font-weight: normal;\n                                        font-style: normal;\n                                        font-stretch: normal;\n                                        line-height: normal;\n                                        letter-spacing: normal;\n                                        color: #626260;\n                                        color: #cccccc;\n                                        text-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);\n                                    }\n                                    .comment-time {\n                                        opacity: 0.2;\n                                        opacity: 1;\n                                        font-family: SFUIText-Regular;\n                                        font-size: 12px;\n                                        font-weight: normal;\n                                        font-style: normal;\n                                        font-stretch: normal;\n                                        line-height: normal;\n                                        letter-spacing: normal;\n                                        color: #000000;\n                                        color: #aaaaaa;\n                                        margin-left: 20px;\n                                    }\n                                }\n                                .comment-body {\n                                    p {\n                                        font-family: SFUIText-Regular;\n                                        font-size: 13px;\n                                        font-weight: 300;\n                                        font-style: normal;\n                                        font-stretch: normal;\n                                        line-height: 1.38;\n                                        letter-spacing: normal;\n                                        color: #333333;\n                                        color: #ffffff;\n                                    }\n                                }\n                            }\n                            .reply-wrapper {\n                                .reply-block {\n                                    padding-left: 20px;\n                                    padding-top: 15px;\n                                    position: relative;\n                                    &:after {\n                                        content: '';\n                                        position: absolute;\n                                        width: 1px;\n                                        height: 100%;\n                                        background: #cccccc;\n                                        background: #4e5c6c;\n                                        top: 15px;\n                                        z-index: 0;\n                                        left: 35px;\n                                    }\n                                    &:last-child {\n                                        &:after {\n                                            display: none;\n                                        }\n                                    }\n                                    .comment-body {\n                                        padding-left: 40px;\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n                .approval-block {\n                    height: 73px;\n                    display: flex;\n                    justify-content: space-evenly;\n                    align-items: center;\n                    padding: 0 10px;\n                    background: #121d29;\n                    background: #ffffff;\n                    position: absolute;\n                    width: 100%;\n                    bottom: 0;\n                    ", " {\n                        font-size: 12px;\n                        margin: 0 10px;\n                    }\n                }\n            }\n            &.tags-tab {\n                .tag-header {\n                    font-family: SFUIText-Regular;\n                    font-size: 12px;\n                    font-weight: normal;\n                    font-style: normal;\n                    font-stretch: normal;\n                    line-height: normal;\n                    letter-spacing: normal;\n                    color: #cccccc;\n                }\n                .characters-list {\n                    margin: 10px 0;\n                    .actor-tag {\n                        width: 70px;\n                        height: 70px;\n                        border-radius: 100%;\n                        background: #121d29;\n                        display: inline-block;\n                        vertical-align: middle;\n                        margin: 10px;\n                        position: relative;\n                        overflow: hidden;\n                        cursor: pointer;\n                        border: 1px solid transparent;\n                        &.actor-selected, &:hover {\n                            border: 1px solid #00cec6;\n                            .actor-name-wrapper {\n                                display: block;\n                            }\n                        }\n                        ", " {\n                            positon: absolute;\n                        }\n                        .actor-name-wrapper {\n                            display: none;\n                            position: absolute;\n                            width: 100%;\n                            height: 100%;\n                            top: 0;\n                            left: 0;\n                            background: rgba(0,0,0,0.8);\n                            .actor-name {\n                                position: absolute;\n                                top: 50%;\n                                left: 50%;\n                                transform: translate(-50%, -50%);\n                                -webkit-transform: translate(-50%, -50%);\n                                -moz-transform: translate(-50%, -50%);\n                                -ms-transform: translate(-50%, -50%);\n                                -o-transform: translate(-50%, -50%);\n                                width: 60px;\n                                text-align: center;\n                                font-family: SFUIText-Medium;\n                                font-size: 10px;\n                                letter-spacing: 0px;\n                                color: #ffffff;\n                                word-break: break-word;\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n"])), _icon["default"].Element, _icon["default"].Element, _button["default"].Element, _image["default"].Element);
+var MarkerBlock = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n    position: absolute;\n    width: 100%;\n    height: 10px;\n    left:0;\n    bottom: 15px;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    .scene-marker {\n        background: #00cec6;\n        position: relative;\n        height: 100%;\n        display: inline-block;\n        vertical-align: top;\n    }\n"])));
 var Player = /*#__PURE__*/function (_React$Component) {
   function Player(props) {
     var _this;

package/package.json

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