@ntbjs/react-components 1.1.10 → 1.1.11

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-3e57dc2c.js → AssetGallery-a948de8d.js}

@@ -5,7 +5,7 @@ var lodash = require('lodash');
 var React = require('react');
 var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
 var ResizeObserver = require('resize-observer-polyfill');
-var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-040d2f28.js');
+var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-f3de8047.js');
 var styled = require('styled-components');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
 var warningCircle = require('./warning-circle-24522402.js');
@@ -15,16 +15,16 @@ var Popover = require('./Popover-569cd272.js');
 require('./Tab-f499ecbc.js');
 require('./Tabs-a8c77f71.js');
 var Tooltip = require('./Tooltip-66daf6e3.js');
-require('./VerificationStatusIcon-b574fd21.js');
-var ActionButton = require('./ActionButton-06df3d6c.js');
+require('./VerificationStatusIcon-6fe95a92.js');
+var ActionButton = require('./ActionButton-46735b89.js');
 require('./Button-49f82b31.js');
 require('./Checkbox-68dc38a8.js');
-require('./CompactAutocompleteSelect-86e10ff4.js');
-require('./CompactStarRating-f1e62f3e.js');
-require('./CompactTextInput-c27d33c1.js');
-require('./MultiSelect-4b8d3d0d.js');
+require('./CompactAutocompleteSelect-b68618b3.js');
+require('./CompactStarRating-405e4508.js');
+require('./CompactTextInput-0d53acdf.js');
+require('./MultiSelect-efd60232.js');
 require('./Radio-32d0513a.js');
-require('./TextArea-d8ec6308.js');
+require('./TextArea-57c69d16.js');
 require('./TextInput-0d109708.js');
 require('./Switch-4a41585f.js');
 var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
@@ -327,7 +327,7 @@ var OverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyD
 }, function (props) {
   return (props.selected || props.softSelected) && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 1;\n    "])));
 }, Overlay$1);
-var OverlayInfo$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 15px 12px 10px;\n  color: ", ";\n"])), function (props) {
+var OverlayInfo$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 15px 50px 10px 12px;\n  color: ", ";\n  & span {\n    overflow: hidden;\n    word-wrap: break-word;\n  }\n"])), function (props) {
   return props.theme.getColor('gray-100');
 });
 var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 3px solid;\n  ", ";\n"])), function (props) {
@@ -355,7 +355,7 @@ 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) {
@@ -434,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, {
@@ -444,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
     });
   }
 
@@ -464,6 +466,8 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
 
   var asset = props.asset,
       activeSummaryCard = props.activeSummaryCard,
+      displayVersionCount = props.displayVersionCount,
+      displayVerificationIcon = props.displayVerificationIcon,
       selectable = props.selectable,
       hasHeightAndWidth = props.hasHeightAndWidth,
       selected = props.selected,
@@ -685,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;
@@ -773,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
@@ -812,11 +821,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, isOverlayHovered && React__default['default'].createElement("span", null, asset.title), React__default['default'].createElement(OverlayInfoTop$1, null, React__default['default'].createElement(OverlayInfoTopVersions$1, {
+  })), 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
-  }, renderVersionsBadge()), (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, {
+  }, 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
@@ -844,7 +854,8 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   component: defaultTheme.PropTypes.func,
   scrollPosition: defaultTheme.PropTypes.number,
   collapseExtraInfo: defaultTheme.PropTypes.bool,
-  activeSummaryCard: 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) {
@@ -994,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, {
@@ -1004,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
     });
   }
 
@@ -1204,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
@@ -1359,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,
@@ -1370,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);
@@ -1761,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,
@@ -1776,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,
@@ -1793,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,
@@ -1802,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),
@@ -1858,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,
@@ -1873,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,
@@ -1889,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/{CompactAutocompleteSelect-86e10ff4.js → CompactAutocompleteSelect-b68618b3.js}

@@ -10,7 +10,7 @@ require('./Popover-569cd272.js');
 require('./Tab-f499ecbc.js');
 require('./Tabs-a8c77f71.js');
 var Tooltip = require('./Tooltip-66daf6e3.js');
-require('./VerificationStatusIcon-b574fd21.js');
+require('./VerificationStatusIcon-6fe95a92.js');
 var styled = require('styled-components');
 var Select = require('react-select');
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
@@ -49,7 +49,7 @@ var CompactAutocompleteSelect$1 = styled__default['default'].div.attrs(defaultTh
   return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: not-allowed;\n    "])));
 });
 var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n  flex-basis: 33.33%;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  height: 19px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 2px;\n  ", "\n"])), function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
 }, function (props) {
   return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
 });
@@ -79,8 +79,10 @@ var AutocompletSelect = styled__default['default'](Select__default['default']).a
 var AutocompletCreatableSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), sharedStyle, function (props) {
   return props.disabled && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n    "])));
 });
-var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    ", ";\n\n    height: 22px;\n    min-height: 22px;\n    box-shadow: none;\n    box-sizing: border-box;\n    padding: 1px 3px 0 8.7px;\n    cursor: pointer;\n    border: 1px solid transparent;\n    background-color: transparent;\n    ", "\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", "\n    ", "\n        ", "\n  }\n\n  & .dropdown-indicator {\n    display: none;\n  }\n\n  &:hover .dropdown-indicator {\n    display: flex;\n  }\n\n  &&:hover {\n    border-color: transparent;\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n  }\n"])), function (props) {
-  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
+var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    ", ";\n    ", ";\n\n    height: 22px;\n    min-height: 22px;\n    box-shadow: none;\n    box-sizing: border-box;\n    padding: 1px 3px 0 8.7px;\n    cursor: pointer;\n    border: 1px solid transparent;\n    background-color: transparent;\n    ", "\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", "\n    ", "\n        ", "\n  }\n\n  & .dropdown-indicator {\n    display: none;\n  }\n\n  &:hover .dropdown-indicator {\n    display: flex;\n  }\n\n  &&:hover {\n    border-color: transparent;\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n  }\n"])), function (props) {
+  return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
+}, function (props) {
+  return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
 }, function (props) {
   return props.type && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in-out;\n      "])), function (props) {
     return props.type === 'success' ? fadeIn : fadeOut;

package/{CompactStarRating-f1e62f3e.js → CompactStarRating-405e4508.js}

@@ -8,7 +8,7 @@ require('./Popover-569cd272.js');
 require('./Tab-f499ecbc.js');
 require('./Tabs-a8c77f71.js');
 var Tooltip = require('./Tooltip-66daf6e3.js');
-require('./VerificationStatusIcon-b574fd21.js');
+require('./VerificationStatusIcon-6fe95a92.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -85,8 +85,8 @@ var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.appl
 }, function (props) {
   return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: not-allowed;\n    "])));
 });
-var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  width: 33.33%;\n  display: flex;\n  align-items: center;\n  text-align: left;\n  font: normal normal normal 14px/16px Roboto;\n  letter-spacing: 0px;\n  padding: 0;\n  height: 19px;\n  cursor: default;\n  justify-content: space-between;\n  ", "\n  ", "\n"])), function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  width: 33.33%;\n  display: flex;\n  align-items: center;\n  text-align: left;\n  font: normal normal normal 14px/16px Roboto;\n  letter-spacing: 0px;\n  padding: 0;\n  height: 19px;\n  cursor: default;\n  justify-content: space-between;\n  ", ";\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
 }, function (props) {
   return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
 });
@@ -97,18 +97,24 @@ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDe
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
 });
-var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  width: 66.66%;\n  border-radius: 3px;\n  height: 24px;\n  align-items: center;\n  padding-left: 8px;\n  box-sizing: border-box;\n\n  ", "\n\n  ", "\n\n  ", "\n  &&:not(:hover):not(:focus) {\n    ", ";\n  }\n  &&:hover:not(:focus) {\n    ", "\n\n    ", ";\n\n    ", ";\n  }\n"])), function (props) {
+var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  width: 66.66%;\n  border-radius: 3px;\n  height: 24px;\n  align-items: center;\n  padding-left: 8px;\n  box-sizing: border-box;\n  border: 1px solid;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  &&:not(:hover):not(:focus) {\n    ", ";\n    ", ";\n  }\n  &&:hover:not(:focus) {\n    ", "\n\n    ", ";\n\n    ", ";\n\n    ", ";\n  }\n"])), function (props) {
+  return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
+}, function (props) {
   return props.type === 'success' && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n      animation: ", " 0.5s ease-in-out;\n    "])), function (props) {
     return props.success ? fadeIn : fadeOut;
   });
 }, function (props) {
-  return props.type === 'error' && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n    "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'));
+  return props.type === 'error' && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n      ", "\n    "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
+}, function (props) {
+  return props.type === 'warning' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n      ", "\n    "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#2F2402 ', '#FFFDE8'));
 }, function (props) {
-  return props.type === 'warning' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n    "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
+  return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
 }, function (props) {
-  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
+  return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
 }, function (props) {
   return props.edit && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
+}, function (props) {
+  return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
 }, function (props) {
   return props.type === 'warning' && !props.readOnly && props.theme.themeProp('background', '#806403', '#FFFEBF');
 }, function (props) {

package/{CompactTextInput-c27d33c1.js → CompactTextInput-0d53acdf.js}

@@ -11,7 +11,7 @@ require('./Popover-569cd272.js');
 require('./Tab-f499ecbc.js');
 require('./Tabs-a8c77f71.js');
 var Tooltip = require('./Tooltip-66daf6e3.js');
-require('./VerificationStatusIcon-b574fd21.js');
+require('./VerificationStatusIcon-6fe95a92.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -71,7 +71,7 @@ var CompactTextInput$1 = styled__default['default'].div.attrs(defaultTheme.apply
   return props.theme.primaryFontFamily;
 });
 var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n  flex-basis: 33.33%;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  justify-content: space-between;\n  height: 19px;\n  display: flex;\n  align-items: center;\n  ", "\n"])), function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
 }, function (props) {
   return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: not-allowed;\n    "])));
 });
@@ -105,7 +105,7 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
 }, function (props) {
   return props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
 });
-var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n  box-sizing: border-box;\n  height: 22px;\n  width: 100%;\n  display: block;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  font-family: inherit;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  padding: 1px 10px;\n  ", ";\n  border-radius: 3px;\n  border: 1px solid transparent;\n  text-overflow: ellipsis;\n\n  ", ";\n\n  &&:not(:hover):not(:focus) {\n    ", "\n    ", ";\n    ", ";\n    ", ";\n    ", "\n  }\n\n  &&:hover:not(:focus) {\n\n    ", "\n\n    ", "   \n\n    ", ";\n\n    ", ";\n\n\n    ", "\n      & + ", " {\n        opacity: 1;\n        \n      }\n  }\n\n    ", "\n      ", "\n\n  }\n\n  &&:focus {\n    ", ";\n\n      ", ";\n    \n    ", ";\n\n    ", ";\n    outline: none;\n\n    ", ";\n\n    ", ";\n  }\n\n  &&::placeholder {\n    color: inherit;\n    opacity: 0.6;\n  }\n\n  ", "\n"])), function (props) {
+var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n  box-sizing: border-box;\n  height: 22px;\n  width: 100%;\n  display: block;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  font-family: inherit;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  padding: 1px 10px;\n  ", ";\n  border-radius: 3px;\n  border: 1px solid transparent;\n  text-overflow: ellipsis;\n\n  ", ";\n\n  &&:not(:hover):not(:focus) {\n    ", "\n    ", ";\n    ", ";\n      ", ";\n    ", ";\n    \n    ", "\n  }\n\n  &&:hover:not(:focus) {\n\n    ", "\n\n    ", "   \n\n        ", ";\n\n    ", ";\n\n    ", ";\n\n\n    ", "\n      & + ", " {\n        opacity: 1;\n        \n      }\n  }\n\n    ", "\n      ", "\n\n  }\n\n  &&:focus {\n    ", ";\n\n      ", ";\n    \n    ", ";\n\n    ", ";\n    outline: none;\n\n    ", ";\n\n    ", ";\n  }\n\n  &&::placeholder {\n    color: inherit;\n    opacity: 0.6;\n  }\n\n  ", "\n"])), function (props) {
   return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n      cursor: default;\n    "])));
 }, function (props) {
   return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n    "])));
@@ -128,7 +128,9 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
 }, function (props) {
   return props.type === 'error' && props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
 }, function (props) {
-  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
+  return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
+}, function (props) {
+  return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
 }, function (props) {
   return props.hasLink && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n        &&:not(:focus),\n        &&:read-only {\n          text-decoration: underline;\n          cursor: default;\n          ", "\n        }\n      "])), function (props) {
     return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
@@ -137,6 +139,8 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
   return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
 }, function (props) {
   return props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
+}, function (props) {
+  return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
 }, function (props) {
   return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF');
 }, function (props) {

package/{Instructions-fed010b2.js → Instructions-d7dcc0ce.js}

@@ -4,8 +4,8 @@ var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var lodash = require('lodash');
 var React = require('react');
 var warningCircle = require('./warning-circle-24522402.js');
-var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-86e10ff4.js');
-var TextArea = require('./TextArea-d8ec6308.js');
+var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-b68618b3.js');
+var TextArea = require('./TextArea-57c69d16.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/{MultiLevelCheckboxSelect-040d2f28.js → MultiLevelCheckboxSelect-f3de8047.js}

@@ -9,7 +9,7 @@ var Popover = require('./Popover-569cd272.js');
 require('./Tab-f499ecbc.js');
 require('./Tabs-a8c77f71.js');
 require('./Tooltip-66daf6e3.js');
-require('./VerificationStatusIcon-b574fd21.js');
+require('./VerificationStatusIcon-6fe95a92.js');
 var Checkbox = require('./Checkbox-68dc38a8.js');
 var lodash = require('lodash');
 var TextInput = require('./TextInput-0d109708.js');

package/{MultiSelect-4b8d3d0d.js → MultiSelect-efd60232.js}

@@ -22,7 +22,7 @@ var sharedStyle = styled.css(_templateObject || (_templateObject = defaultTheme.
   return props.theme.primaryFontFamily;
 });
 var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n  flex-basis: 33.33%;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  cursor: pointer;\n  height: 19px;\n  display: flex;\n  align-items: center;\n"])), function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
 });
 var MultiSelect$1 = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedStyle);
 var CreatableMultiSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedStyle);