@ntbjs/react-components 1.2.0-rc.8 → 1.2.0-rc.80

package/{ActionButton-06df3d6c.js → ActionButton-46735b89.js}

@@ -11,7 +11,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject, _templateObject2;
-var ActionButton$1 = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  height: 40px;\n  width: 40px;\n  border: 0;\n  color: inherit;\n  background-color: transparent;\n  ", "\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 0 0;\n  transition: background-size 250ms ease;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    opacity: 0.5;\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  svg {\n    width: 100%;\n    max-height: 20px;\n    max-width: 20px;\n    pointer-events: none;\n    transition: color 250ms;\n  }\n"])), function (props) {
+var ActionButton$1 = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  border: 0;\n  color: inherit;\n  background-color: transparent;\n  ", "\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 0 0;\n  transition: background-size 250ms ease;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    opacity: 0.5;\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  svg {\n    width: 100%;\n    max-height: 20px;\n    max-width: 20px;\n    pointer-events: none;\n    transition: color 250ms;\n  }\n"])), function (props) {
+  return "".concat(props.buttonWidthHeight[0], "px");
+}, function (props) {
+  return "".concat(props.buttonWidthHeight[1], "px");
+}, function (props) {
   var _props$backgroundColo, _props$backgroundColo2, _props$backgroundColo3, _props$backgroundColo4;
 
   var darkThemeBgColor = (_props$backgroundColo = props === null || props === void 0 ? void 0 : (_props$backgroundColo2 = props.backgroundColors) === null || _props$backgroundColo2 === void 0 ? void 0 : _props$backgroundColo2[0]) !== null && _props$backgroundColo !== void 0 ? _props$backgroundColo : props.theme.getColor('gray-600');
@@ -30,13 +34,15 @@ var ActionButton = React__default['default'].forwardRef(function ActionButton(_r
       disabled = _ref.disabled,
       active = _ref.active,
       onClick = _ref.onClick,
-      props = defaultTheme._objectWithoutProperties(_ref, ["icon", "disabled", "active", "onClick"]);
+      buttonWidthHeight = _ref.buttonWidthHeight,
+      props = defaultTheme._objectWithoutProperties(_ref, ["icon", "disabled", "active", "onClick", "buttonWidthHeight"]);
 
   return React__default['default'].createElement(ActionButton$1, defaultTheme._extends({
     ref: forwardedRef,
     disabled: disabled,
     active: active,
-    onClick: onClick
+    onClick: onClick,
+    buttonWidthHeight: buttonWidthHeight
   }, props), icon);
 });
 ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -44,10 +50,12 @@ ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
   disabled: defaultTheme.PropTypes.bool,
   active: defaultTheme.PropTypes.bool,
   onClick: defaultTheme.PropTypes.func,
-  backgroundColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string)
+  backgroundColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
+  buttonWidthHeight: defaultTheme.PropTypes.array
 } : {};
 ActionButton.defaultProps = {
-  onClick: function onClick() {}
+  onClick: function onClick() {},
+  buttonWidthHeight: [40, 40]
 };
 
 exports.ActionButton = ActionButton;

package/{AssetGallery-46f5cbef.js → AssetGallery-71d9aeac.js}

@@ -5,30 +5,30 @@ var lodash = require('lodash');
 var React = require('react');
 var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
 var ResizeObserver = require('resize-observer-polyfill');
-var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-418de626.js');
+var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-24c88aaa.js');
 var styled = require('styled-components');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
 var warningCircle = require('./warning-circle-24522402.js');
 var Alert = require('./Alert-13b75102.js');
 var Badge = require('./Badge-aec841c8.js');
-var Popover = require('./Popover-6afb3779.js');
+var Popover = require('./Popover-569cd272.js');
 require('./Tab-f499ecbc.js');
-require('./Tabs-c2261e7e.js');
-var Tooltip = require('./Tooltip-6b6f0b0a.js');
-require('./VerificationStatusIcon-b574fd21.js');
-var ActionButton = require('./ActionButton-06df3d6c.js');
-require('./Button-353f5bbc.js');
+require('./Tabs-ea48ce3e.js');
+var Tooltip = require('./Tooltip-66daf6e3.js');
+require('./VerificationStatusIcon-6fe95a92.js');
+var ActionButton = require('./ActionButton-46735b89.js');
+require('./Button-49f82b31.js');
 require('./Checkbox-68dc38a8.js');
-require('./CompactAutocompleteSelect-e99629df.js');
-require('./CompactStarRating-5dc2131c.js');
-require('./CompactTextInput-fa11fda0.js');
+require('./CompactAutocompleteSelect-9425bd2e.js');
+require('./CompactStarRating-7d7ad40e.js');
+require('./CompactTextInput-86d0b82c.js');
 require('./MultiSelect-4b8d3d0d.js');
 require('./Radio-32d0513a.js');
-require('./TextArea-1689b8d8.js');
+require('./TextArea-a215d377.js');
 require('./TextInput-0d109708.js');
 require('./Switch-4a41585f.js');
 var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
-var ContextMenuItem = require('./ContextMenuItem-1fe17ed5.js');
+var ContextMenuItem = require('./ContextMenuItem-ba2b697e.js');
 var polished = require('polished');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -170,7 +170,7 @@ var GroupLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultT
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
 });
-var AssetGalleryCardBase = styled__default['default'].div(_templateObject3$3 || (_templateObject3$3 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin: 0;\n  z-index: 1;\n  will-change: transform, width, height;\n\n  &:hover {\n    z-index: 2;\n  }\n"])));
+var AssetGalleryCardBase = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$3 || (_templateObject3$3 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin: 0;\n  z-index: 1;\n  will-change: transform, width, height;\n\n  &:hover {\n    z-index: 2;\n  }\n"])));
 
 var css_248z = ".lazy-load-image-background.opacity {\n  opacity: 0;\n}\n\n.lazy-load-image-background.opacity.lazy-load-image-loaded {\n  opacity: 1;\n  transition: opacity .3s;\n}\n";
 defaultTheme.styleInject(css_248z);
@@ -222,7 +222,8 @@ var FooterLeft = styled__default['default'].div.attrs(defaultTheme.applyDefaultT
 var FooterRight = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13$2 || (_templateObject13$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 4px;\n  }\n"])));
 
 var SummaryCard = React__default['default'].forwardRef(function AssetSummaryCard(_ref, forwardedRef) {
-  var title = _ref.title,
+  var activeSummaryCard = _ref.activeSummaryCard,
+      title = _ref.title,
       description = _ref.description,
       instructions = _ref.instructions,
       instructionsType = _ref.instructionsType,
@@ -232,13 +233,14 @@ var SummaryCard = React__default['default'].forwardRef(function AssetSummaryCard
       footerRight = _ref.footerRight,
       width = _ref.width,
       useBorder = _ref.useBorder,
-      props = defaultTheme._objectWithoutProperties(_ref, ["title", "description", "instructions", "instructionsType", "headerLeft", "headerRight", "footerLeft", "footerRight", "width", "useBorder"]);
+      props = defaultTheme._objectWithoutProperties(_ref, ["activeSummaryCard", "title", "description", "instructions", "instructionsType", "headerLeft", "headerRight", "footerLeft", "footerRight", "width", "useBorder"]);
 
   var shouldRenderInstructions = !!instructions;
   var shouldRenderHeader = !!headerLeft || !!headerRight;
   var shouldRenderFooter = !!footerLeft || !!footerRight;
   var shouldAddGutterAfterInstructions = shouldRenderInstructions && shouldRenderFooter;
   var shouldAddGutterAfterTitle = !!title && (!!description || !!instructions || shouldRenderFooter);
+  if (!activeSummaryCard) return null;
   return React__default['default'].createElement(SummaryCard$1, defaultTheme._extends({
     ref: forwardedRef,
     width: width,
@@ -267,6 +269,7 @@ var SummaryCard = React__default['default'].forwardRef(function AssetSummaryCard
   }));
 });
 SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  activeSummaryCard: defaultTheme.PropTypes.bool,
   title: defaultTheme.PropTypes.string,
   description: defaultTheme.PropTypes.string,
   instructions: defaultTheme.PropTypes.string,
@@ -287,29 +290,30 @@ SummaryCard.defaultProps = {
   headerRight: null,
   footerLeft: null,
   footerRight: null,
-  useBorder: false
+  useBorder: false,
+  activeSummaryCard: false
 };
 
 var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1;
 var AssetGalleryWrapper$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
   return props.disabled && styled.css(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
 });
-var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  box-sizing: border-box;\n  cursor: pointer;\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n  video {\n    width: 100%;\n    height: 100%;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
-  return props.selected ? 3 : 0;
-}, function (props) {
-  return props.selected ? 3 : 0;
+var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  box-sizing: border-box;\n  cursor: pointer;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", "\n  video {\n    width: 100%;\n    height: 100%;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
+  return props.selected ? 1 : 0;
 }, function (props) {
-  return props.selected ? 3 : 0;
+  return props.selected ? 1 : 0;
 }, function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
+  return props.selected ? 1 : 0;
 }, function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
 }, function (props) {
   return props.disabled && styled.css(_templateObject4$1 || (_templateObject4$1 = defaultTheme._taggedTemplateLiteral(["\n      pointer-events: none;\n      opacity: 0.4;\n    "])));
 }, function (props) {
   return props.extendedSelectMode && styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
 });
-var Figure$1 = styled__default['default'].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  .lazy-load-image-background {\n    display: block !important;\n  }\n\n  img,\n  video,\n  .audio {\n    display: block;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
+var Figure$1 = styled__default['default'].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  .lazy-load-image-background {\n    display: block !important;\n  }\n\n  img {\n    display: block;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n"])), function (props) {
   return props.hasHeightAndWidth ? styled.css(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: cover;\n          "]))) : styled.css(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: contain;\n          "])));
 });
 var FigureOverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  inset: 0;\n  opacity: ", ";\n  background-color: ", ";\n"])), function (props) {
@@ -318,7 +322,7 @@ var FigureOverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.
   return props.selected ? '#ACCEF7' : 'transparent';
 });
 var Overlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n"])));
-var OverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", "\n\n  ", "\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
+var OverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", "\n  ", "\n    ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
   return !props.selected ? styled.css(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n          background: radial-gradient(\n            ellipse at center,\n            rgba(0, 0, 0, 0.3) 27%,\n            rgba(0, 0, 0, 0.5) 60%,\n            rgba(0, 0, 0, 0.7) 90%\n          );\n        "]))) : null;
 }, function (props) {
   return (props.selected || props.softSelected) && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 1;\n    "])));
@@ -351,11 +355,11 @@ var OverlayInfoTopActions$1 = styled__default['default'].div.attrs(defaultTheme.
 }, function (props) {
   return props.isOverlayHovered ? 1 : 0;
 });
-var OverlayInfoTopVersions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 1;\n  display: ", ";\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), function (props) {
+var OverlayInfoTopLeft = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 1;\n  display: ", ";\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), function (props) {
   return props !== null && props !== void 0 && props.collapseExtraInfo ? 'none' : 'block';
 }, Overlay$1);
 var OverlayInfoTopWarning$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21$1 || (_templateObject21$1 = defaultTheme._taggedTemplateLiteral(["\n  margin-left: auto;\n  height: 24px;\n  width: 24px;\n  border-radius: 50%;\n  box-sizing: border-box;\n  padding: ", ";\n  background-color: ", ";\n  opacity: 1;\n\n  svg {\n    width: 100%;\n    color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), function (props) {
-  return props.type === 'error' ? 0 : '4px';
+  return props.type === 'error' ? 0 : '3px 4px';
 }, function (props) {
   return props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100');
 }, function (props) {
@@ -430,7 +434,8 @@ var ComputedActionButton$1 = React__default['default'].forwardRef(function Compu
       className: className,
       icon: newProps.icon,
       backgroundColors: ['black', 'white'],
-      onClick: newProps.onClick
+      onClick: newProps.onClick,
+      buttonWidthHeight: newProps.actionButtonWidthHeight
     }));
   } else {
     newProps.children = React__default['default'].createElement(ActionButton.ActionButton, {
@@ -440,7 +445,8 @@ var ComputedActionButton$1 = React__default['default'].forwardRef(function Compu
       className: className,
       icon: newProps.icon,
       onClick: newProps.onClick,
-      backgroundColors: ['black', 'white']
+      backgroundColors: ['black', 'white'],
+      buttonWidthHeight: newProps.actionButtonWidthHeight
     });
   }
 
@@ -456,10 +462,12 @@ var ComputedActionButton$1 = React__default['default'].forwardRef(function Compu
 });
 
 var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
-  var _asset$note, _asset$note2;
+  var _asset$note, _asset$note2, _asset$note3, _asset$note4;
 
   var asset = props.asset,
       activeSummaryCard = props.activeSummaryCard,
+      displayVersionCount = props.displayVersionCount,
+      displayVerificationIcon = props.displayVerificationIcon,
       selectable = props.selectable,
       hasHeightAndWidth = props.hasHeightAndWidth,
       selected = props.selected,
@@ -481,7 +489,6 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       openedSubActions = _React$useState4[0],
       updateOpenedSubActions = _React$useState4[1];
 
-  console.log('activeSummaryCard', activeSummaryCard);
   React.useEffect(function () {
     var _asset$actions;
 
@@ -682,6 +689,10 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       horizontalPadding: 8
     });
   }, [asset]);
+  var renderVerificationBadge = React.useCallback(function () {
+    if (!(asset !== null && asset !== void 0 && asset.verifications)) return null;
+    return asset === null || asset === void 0 ? void 0 : asset.verifications;
+  }, [asset]);
   var renderMediaBadge = React.useCallback(function () {
     var badgeIcon = null;
     var badgeContent = null;
@@ -716,6 +727,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     var _asset$summary, _asset$summary2, _asset$summary3, _asset$summary4, _asset$summary5, _asset$summary6, _asset$summary7, _asset$summary8;
 
     return React__default['default'].createElement(SummaryCard, {
+      activeSummaryCard: activeSummaryCard,
       title: (asset === null || asset === void 0 ? void 0 : (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.title) || '',
       description: (asset === null || asset === void 0 ? void 0 : (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.description) || '',
       instructions: (asset === null || asset === void 0 ? void 0 : (_asset$summary3 = asset.summary) === null || _asset$summary3 === void 0 ? void 0 : _asset$summary3.instructions) || '',
@@ -741,10 +753,10 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     draggable: asset.draggable,
     innerRef: dragRef,
     selected: selected
-  }, asset.previewUrl && renderPreview(asset), React__default['default'].createElement(Popover.Popover, {
+  }, asset.previewUrl && renderPreview(asset), activeSummaryCard ? React__default['default'].createElement(Popover.Popover, {
     content: renderPopoverContent(),
     placement: 'bottom',
-    visible: isOverlayHovered && !isAnySubActionsOpened && activeSummaryCard,
+    visible: isOverlayHovered && !isAnySubActionsOpened,
     zIndex: 10000
   }, React__default['default'].createElement(Overlay$1, {
     ref: cardRef,
@@ -758,8 +770,9 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
   }, asset.actions && asset.actions.map(function (action, index) {
     return React__default['default'].createElement(Tooltip.Tooltip, {
       key: "".concat(asset.key, "-").concat(action.title),
-      content: action.title
+      content: React__default['default'].createElement("span", null, action.title)
     }, React__default['default'].createElement(Fragment$1, {
+      key: "".concat(asset.key, "-").concat(action.title),
       as: ComputedActionButton$1,
       component: action.component,
       className: action.className,
@@ -768,11 +781,12 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       subActions: action.subActions,
       onClick: function onClick(event) {
         return onActionClick(event, action, index);
-      }
+      },
+      actionButtonWidthHeight: action.actionButtonWidthHeight
     }));
-  })), React__default['default'].createElement(OverlayInfo$1, null, React__default['default'].createElement(OverlayInfoTop$1, null, React__default['default'].createElement(OverlayInfoTopVersions$1, {
+  })), React__default['default'].createElement(OverlayInfo$1, null, React__default['default'].createElement(OverlayInfoTop$1, null, React__default['default'].createElement(OverlayInfoTopLeft, {
     collapseExtraInfo: collapseExtraInfo
-  }, renderVersionsBadge()), (asset === null || asset === void 0 ? void 0 : (_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopWarning$1, {
+  }, displayVersionCount && renderVersionsBadge() || displayVerificationIcon && renderVerificationBadge()), (asset === null || asset === void 0 ? void 0 : (_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopWarning$1, {
     type: asset === null || asset === void 0 ? void 0 : (_asset$note2 = asset.note) === null || _asset$note2 === void 0 ? void 0 : _asset$note2.type
   }, React__default['default'].createElement(warningCircle.SvgWarningCircle, null))), React__default['default'].createElement(OverlayInfoBottom$1, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton$1, {
     selected: selected
@@ -785,12 +799,52 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
   }), selectable && React__default['default'].createElement(OverlaySelected$1, {
     selected: selected,
     softSelected: softSelected
-  }))), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay$1, null, asset.overlay)));
+  }))) : React__default['default'].createElement(Overlay$1, {
+    ref: cardRef,
+    onMouseEnter: mouseHasEnteredOverlay,
+    onMouseLeave: mouseHasLeftOverlay
+  }, React__default['default'].createElement(OverlayBackdrop$1, {
+    softSelected: softSelected,
+    selected: selected
+  }), React__default['default'].createElement(OverlayInfoTopActions$1, {
+    isOverlayHovered: isOverlayHovered
+  }, asset.actions && asset.actions.map(function (action, index) {
+    return React__default['default'].createElement(Tooltip.Tooltip, {
+      key: "".concat(asset.key, "-").concat(action.title),
+      content: React__default['default'].createElement("span", null, action.title)
+    }, React__default['default'].createElement(Fragment$1, {
+      as: ComputedActionButton$1,
+      component: action.component,
+      className: action.className,
+      icon: action.icon,
+      isSubActionsOpened: shouldOpenSubActions(index),
+      subActions: action.subActions,
+      onClick: function onClick(event) {
+        return onActionClick(event, action, index);
+      },
+      actionButtonWidthHeight: action.actionButtonWidthHeight
+    }));
+  })), React__default['default'].createElement(OverlayInfo$1, null, isOverlayHovered && React__default['default'].createElement("span", null, asset.title), React__default['default'].createElement(OverlayInfoTop$1, null, React__default['default'].createElement(OverlayInfoTopLeft, {
+    collapseExtraInfo: collapseExtraInfo
+  }, displayVersionCount && renderVersionsBadge() || displayVerificationIcon && renderVerificationBadge()), (asset === null || asset === void 0 ? void 0 : (_asset$note3 = asset.note) === null || _asset$note3 === void 0 ? void 0 : _asset$note3.title) && React__default['default'].createElement(OverlayInfoTopWarning$1, {
+    type: asset === null || asset === void 0 ? void 0 : (_asset$note4 = asset.note) === null || _asset$note4 === void 0 ? void 0 : _asset$note4.type
+  }, React__default['default'].createElement(warningCircle.SvgWarningCircle, null))), React__default['default'].createElement(OverlayInfoBottom$1, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton$1, {
+    selected: selected
+  }, React__default['default'].createElement(SvgCheckRectangleFilled, {
+    onClick: onSelectClick
+  })), React__default['default'].createElement(OverlayInfoBottomMediaIcon$1, null, renderMediaBadge()))), asset.completed && React__default['default'].createElement(OverlayCompleted, {
+    softSelected: softSelected
+  }), asset.hasError && React__default['default'].createElement(OverlayHasError, {
+    softSelected: softSelected
+  }), selectable && React__default['default'].createElement(OverlaySelected$1, {
+    selected: selected,
+    softSelected: softSelected
+  })), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay$1, null, asset.overlay)));
 };
 
 AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   asset: defaultTheme.PropTypes.shape(assetShapeWithLayout).isRequired,
-  hasHeightAndWidth: defaultTheme.PropTypes.bool.isRequired,
+  hasHeightAndWidth: defaultTheme.PropTypes.bool,
   selectable: defaultTheme.PropTypes.bool,
   selected: defaultTheme.PropTypes.bool,
   extendedSelectMode: defaultTheme.PropTypes.bool,
@@ -799,7 +853,9 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   softSelected: defaultTheme.PropTypes.bool.isRequired,
   component: defaultTheme.PropTypes.func,
   scrollPosition: defaultTheme.PropTypes.number,
-  collapseExtraInfo: defaultTheme.PropTypes.bool
+  collapseExtraInfo: defaultTheme.PropTypes.bool,
+  activeSummaryCard: defaultTheme.PropTypes.bool,
+  actionButtonWidthHeight: defaultTheme.PropTypes.array
 } : {};
 AssetGalleryCompactCard.defaultProps = {};
 var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
@@ -912,7 +968,6 @@ var ComputedRootComponent = function ComputedRootComponent(_ref) {
   }, newProps));
 };
 
-ComputedRootComponent.propTypes = process.env.NODE_ENV !== "production" ? {} : {};
 var ComputedActionButton = React__default['default'].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
   var component = _ref2.component,
       className = _ref2.className,
@@ -950,7 +1005,8 @@ var ComputedActionButton = React__default['default'].forwardRef(function Compute
       className: className,
       icon: newProps.icon,
       backgroundColors: ['black', 'white'],
-      onClick: newProps.onClick
+      onClick: newProps.onClick,
+      buttonWidthHeight: newProps.actionButtonWidthHeight
     }));
   } else {
     newProps.children = React__default['default'].createElement(ActionButton.ActionButton, {
@@ -960,7 +1016,8 @@ var ComputedActionButton = React__default['default'].forwardRef(function Compute
       className: className,
       icon: newProps.icon,
       onClick: newProps.onClick,
-      backgroundColors: ['black', 'white']
+      backgroundColors: ['black', 'white'],
+      buttonWidthHeight: newProps.actionButtonWidthHeight
     });
   }
 
@@ -1139,7 +1196,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     }), React__default['default'].createElement(Overlay, {
       ref: cardRef
     }, React__default['default'].createElement(OverlayBackdrop, {
-      softSelected: softSelected,
+      $softSelected: softSelected,
       selected: selected
     }), React__default['default'].createElement(OverlayInfo, null, React__default['default'].createElement(OverlayInfoTop, null, React__default['default'].createElement(OverlayInfoTopVersions, null, renderVersionsBadge()), (asset === null || asset === void 0 ? void 0 : (_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopWarning, {
       type: asset === null || asset === void 0 ? void 0 : (_asset$note2 = asset.note) === null || _asset$note2 === void 0 ? void 0 : _asset$note2.type
@@ -1150,6 +1207,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
         key: "".concat(asset.key, "-").concat(action.title),
         content: action.title
       }, React__default['default'].createElement(Fragment, {
+        key: "".concat(asset.key, "-").concat(action.title),
         as: ComputedActionButton,
         component: action.component,
         className: action.className,
@@ -1159,7 +1217,8 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
         onClick: function onClick(event) {
           return onActionClick(event, action, index);
         },
-        subActions: action === null || action === void 0 ? void 0 : action.subActions
+        subActions: action === null || action === void 0 ? void 0 : action.subActions,
+        actionButtonWidthHeight: action.actionButtonWidthHeight
       }));
     }))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
       selected: selected
@@ -1167,7 +1226,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
       onClick: onSelectClick
     })), React__default['default'].createElement(OverlayInfoBottomMediaIcon, null, renderMediaBadge()))), selectable && React__default['default'].createElement(OverlaySelected, {
       selected: selected,
-      softSelected: softSelected
+      $softSelected: softSelected
     })), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay, null, asset.overlay));
   }
 
@@ -1255,6 +1314,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     var _asset$summary, _asset$summary2, _asset$summary3, _asset$summary4, _asset$summary5, _asset$summary6;
 
     return React__default['default'].createElement(SummaryCard, {
+      activeSummaryCard: true,
       title: (asset === null || asset === void 0 ? void 0 : (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.title) || '',
       description: (asset === null || asset === void 0 ? void 0 : (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.description) || '',
       instructions: (asset === null || asset === void 0 ? void 0 : (_asset$summary3 = asset.summary) === null || _asset$summary3 === void 0 ? void 0 : _asset$summary3.instructions) || '',
@@ -1277,13 +1337,13 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     draggable: asset.draggable,
     innerRef: dragRef,
     selected: selected,
-    softSelected: softSelected,
+    $softSelected: softSelected,
     completed: asset === null || asset === void 0 ? void 0 : asset.completed,
-    hasError: asset === null || asset === void 0 ? void 0 : asset.hasError
+    $hasError: asset === null || asset === void 0 ? void 0 : asset.hasError
   }, React__default['default'].createElement(ContentWrapper, {
     layout: asset.layout,
     ref: cardRef,
-    softSelected: softSelected,
+    $softSelected: softSelected,
     selected: selected
   }, React__default['default'].createElement(Asset, {
     "data-id": "ss",
@@ -1313,6 +1373,8 @@ var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React
 var AssetGalleryBase = React__default['default'].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
   var assetsProp = _ref.assets,
       activeSummaryCard = _ref.activeSummaryCard,
+      displayVersionCount = _ref.displayVersionCount,
+      displayVerificationIcon = _ref.displayVerificationIcon,
       viewMode = _ref.viewMode,
       thumbnailMaxHeight = _ref.thumbnailMaxHeight,
       selectable = _ref.selectable,
@@ -1324,7 +1386,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       scrollElementProp = _ref.scrollElement,
       onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
       component = _ref.component,
-      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "activeSummaryCard", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "scrollElement", "onAssetSoftSelectedChanged", "component"]);
+      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "activeSummaryCard", "displayVersionCount", "displayVerificationIcon", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "scrollElement", "onAssetSoftSelectedChanged", "component"]);
 
   var assetGalleryDOMNode = React.useRef();
   var assetGalleryCompactRef = useMergedRefs.useMergedRefs(forwardedRef, assetGalleryDOMNode);
@@ -1699,7 +1761,9 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       style: {
         transform: "translate3d(".concat(asset.layout.translateX, "px, ").concat(asset.layout.translateY, "px, 0)"),
         width: "".concat(asset.layout.width, "px"),
-        height: "".concat(asset.layout.height, "px")
+        height: "".concat(asset.layout.height, "px"),
+        display: 'flex',
+        justifyContent: 'center'
       }
     }, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
       asset: asset,
@@ -1713,6 +1777,8 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
     }) : React__default['default'].createElement(AssetGalleryCompactCard$1, {
       asset: asset,
       activeSummaryCard: activeSummaryCard,
+      displayVersionCount: displayVersionCount,
+      displayVerificationIcon: displayVerificationIcon,
       hasHeightAndWidth: asset.layout.hasHeightAndWidth,
       collapseExtraInfo: asset.layout.width < 90,
       selectable: 'selectable' in asset ? asset.selectable : selectable,
@@ -1728,6 +1794,8 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
 AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
   assets: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape(assetShape)),
   activeSummaryCard: defaultTheme.PropTypes.bool,
+  displayVersionCount: defaultTheme.PropTypes.bool,
+  displayVerificationIcon: defaultTheme.PropTypes.bool,
   viewMode: defaultTheme.PropTypes.oneOf(['compact', 'grid']),
   thumbnailMaxHeight: defaultTheme.PropTypes.number,
   selectable: defaultTheme.PropTypes.bool,
@@ -1745,6 +1813,8 @@ AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
 var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_ref, forwardedRef) {
   var assets = _ref.assets,
       activeSummaryCard = _ref.activeSummaryCard,
+      displayVersionCount = _ref.displayVersionCount,
+      displayVerificationIcon = _ref.displayVerificationIcon,
       viewMode = _ref.viewMode,
       thumbnailMaxHeight = _ref.thumbnailMaxHeight,
       selectable = _ref.selectable,
@@ -1754,7 +1824,7 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
       scrollElement = _ref.scrollElement,
       onSoftSelectedChanged = _ref.onSoftSelectedChanged,
       component = _ref.component,
-      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "activeSummaryCard", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component"]);
+      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "activeSummaryCard", "displayVersionCount", "displayVerificationIcon", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component"]);
 
   var _useState = React.useState(selectedAssetKeys || []),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -1810,6 +1880,8 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
     ref: forwardedRef,
     assets: assets,
     activeSummaryCard: activeSummaryCard,
+    displayVersionCount: displayVersionCount,
+    displayVerificationIcon: displayVerificationIcon,
     thumbnailMaxHeight: thumbnailMaxHeight,
     selectable: selectable,
     selectedAssetKeys: selectedAssetKeysInternalState,
@@ -1825,6 +1897,8 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
 });
 AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
   assets: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape(assetShape)),
+  displayVersionCount: defaultTheme.PropTypes.bool,
+  displayVerificationIcon: defaultTheme.PropTypes.bool,
   activeSummaryCard: defaultTheme.PropTypes.bool,
   viewMode: defaultTheme.PropTypes.oneOf(['compact', 'grid']),
   thumbnailMaxHeight: defaultTheme.PropTypes.number,
@@ -1841,7 +1915,8 @@ AssetGallery.defaultProps = {
   viewMode: 'compact',
   thumbnailMaxHeight: 300,
   selectedAssetKeys: [],
-  activeSummaryCard: false
+  activeSummaryCard: false,
+  displayVerificationIcon: true
 };
 
 exports.AssetGallery = AssetGallery;

package/{AssetPreviewTopBar-c28715f7.js → AssetPreviewTopBar-912c3469.js}

@@ -46,7 +46,9 @@ function SvgArrowBack(props) {
 }
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  box-sizing: border-box;\n  align-items: center;\n  border-bottom: 1px solid;\n  color: inherit;\n  display: flex;\n  font-family: ", ";\n  font-weight: 400;\n  min-height: 72px;\n  padding: 0 24px;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (props) {
+var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  box-sizing: border-box;\n  align-items: center;\n  border-bottom: ", ";\n  color: inherit;\n  display: flex;\n  font-family: ", ";\n  font-weight: 400;\n  min-height: 72px;\n  padding: 0 24px;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (props) {
+  return props.border ? "1px solid" : "none";
+}, function (props) {
   return props.theme.primaryFontFamily;
 }, function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'));
@@ -68,11 +70,13 @@ var AssetPreviewTopBar = React__default['default'].forwardRef(function AssetPrev
       leftText = _ref.leftText,
       buttons = _ref.buttons,
       shadow = _ref.shadow,
-      props = defaultTheme._objectWithoutProperties(_ref, ["onBackButtonClick", "backButtonText", "backButtonAsClose", "leftText", "buttons", "shadow"]);
+      border = _ref.border,
+      props = defaultTheme._objectWithoutProperties(_ref, ["onBackButtonClick", "backButtonText", "backButtonAsClose", "leftText", "buttons", "shadow", "border"]);
 
   return React__default['default'].createElement(AssetPreviewTopBar$1, defaultTheme._extends({
     ref: forwardedRef,
-    shadow: shadow
+    shadow: shadow,
+    border: border
   }, props), React__default['default'].createElement(BackButtonContainer, {
     onClick: onBackButtonClick
   }, backButtonAsClose ? React__default['default'].createElement(close.SvgClose, null) : React__default['default'].createElement(SvgArrowBack, null), backButtonText), leftText && React__default['default'].createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default['default'].createElement(ButtonsContainer, null, buttons.map(function (button, index) {
@@ -87,6 +91,7 @@ AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   backButtonAsClose: defaultTheme.PropTypes.bool,
   leftText: defaultTheme.PropTypes.string,
   shadow: defaultTheme.PropTypes.bool,
+  border: defaultTheme.PropTypes.bool,
   buttons: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.node)
 } : {};
 AssetPreviewTopBar.defaultProps = {};

package/{Button-353f5bbc.js → Button-49f82b31.js}

@@ -3,7 +3,7 @@
 var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
-var Popover = require('./Popover-6afb3779.js');
+var Popover = require('./Popover-569cd272.js');
 var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
 var expandMore = require('./expand-more-94585605.js');