@ntbjs/react-components 1.2.0-rc.2 → 1.2.0-rc.20

package/{ActionButton-761050a9.js → ActionButton-06df3d6c.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-c137e17f.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
 var polished = require('polished');

package/{Alert-96814023.js → Alert-13b75102.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-c137e17f.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
 var lodash = require('lodash');
@@ -28,7 +28,7 @@ var Alert$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultThem
 }, function (props) {
   return props.align === 'center' ? 'center' : 'left';
 });
-var AlertRender = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  ", "\n  ", "\n  ", ";\n\n  svg {\n    width: 12px;\n    height: 12px;\n    padding-right: 5px;\n  }\n\n  span {\n    flex: 1;\n    ", "\n  }\n"])), function (props) {
+var AlertRender = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  ", "\n  ", "\n  ", ";\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n\n  span {\n    flex: 1;\n    padding-left: 5px;\n    ", ";\n  }\n"])), function (props) {
   return props.lineHeight ? "line-height: ".concat(props.lineHeight, "px;") : null;
 }, function (props) {
   return props.fontSize ? "font-size: ".concat(props.fontSize, "px;") : null;

package/{AssetGallery-52724211.js → AssetGallery-95776546.js}

@@ -1,33 +1,34 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-c137e17f.js');
-var React = require('react');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var lodash = require('lodash');
+var React = require('react');
 var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
 var ResizeObserver = require('resize-observer-polyfill');
+var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-4d9d84cd.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-96814023.js');
-var Badge = require('./Badge-fa94dca8.js');
-var Popover = require('./Popover-155cbac8.js');
-require('./Tab-8fec1dba.js');
-require('./Tabs-96e366bf.js');
-var Tooltip = require('./Tooltip-a175e9f5.js');
-require('./VerificationStatusIcon-a88b1f8d.js');
-var ActionButton = require('./ActionButton-761050a9.js');
-require('./Button-5071dc6b.js');
-require('./Checkbox-dd2cf216.js');
-require('./CompactAutocompleteSelect-d4147107.js');
-require('./CompactStarRating-ca1943af.js');
-require('./CompactTextInput-c5e38aae.js');
-require('./MultiSelect-87614192.js');
-require('./Radio-dd81f5d4.js');
-require('./TextArea-4d90d02c.js');
-require('./TextInput-e6035fb0.js');
-require('./Switch-c004ea6d.js');
-var ContextMenu = require('./ContextMenu-bd818e55.js');
-var ContextMenuItem = require('./ContextMenuItem-10af8b2f.js');
-var styled = require('styled-components');
+var Alert = require('./Alert-13b75102.js');
+var Badge = require('./Badge-aec841c8.js');
+var Popover = require('./Popover-e4ecb887.js');
+require('./Tab-f499ecbc.js');
+require('./Tabs-4d7742bc.js');
+var Tooltip = require('./Tooltip-6b6f0b0a.js');
+require('./VerificationStatusIcon-b574fd21.js');
+var ActionButton = require('./ActionButton-06df3d6c.js');
+require('./Button-c38d56a0.js');
+require('./Checkbox-68dc38a8.js');
+require('./CompactAutocompleteSelect-43e79e21.js');
+require('./CompactStarRating-9c81ca6e.js');
+require('./CompactTextInput-4388f2f2.js');
+require('./MultiSelect-4b8d3d0d.js');
+require('./Radio-32d0513a.js');
+require('./TextArea-65525d5a.js');
+require('./TextInput-0d109708.js');
+require('./Switch-4a41585f.js');
+var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
+var ContextMenuItem = require('./ContextMenuItem-1fe17ed5.js');
 var polished = require('polished');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -113,8 +114,6 @@ function SvgPlay(props) {
   }, props), _ref);
 }
 
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 var assetShape = {
   key: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]).isRequired,
   previewUrl: defaultTheme.PropTypes.string,
@@ -164,6 +163,15 @@ var assetShapeWithLayout = defaultTheme._objectSpread2(defaultTheme._objectSprea
   }).isRequired
 });
 
+var _templateObject$3, _templateObject2$3, _templateObject3$3;
+var AssetGalleryBase$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$3 || (_templateObject$3 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
+var GroupLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$3 || (_templateObject2$3 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  ", "\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  padding-bottom: 4px;\n  box-sizing: border-box;\n"])), function (props) {
+  return props.theme.primaryFontFamily;
+}, 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 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);
 
@@ -184,15 +192,15 @@ var convertMsToHMS = function convertMsToHMS(ms) {
   return hmsString;
 };
 
-var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2;
-var SummaryCard$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$3 || (_templateObject$3 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  ", "\n"])), function (props) {
+var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2;
+var SummaryCard$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  ", "\n"])), function (props) {
   return props.width ? "".concat(props.width, "px") : '100%';
 }, function (props) {
   return props.useBorder ? props.theme.themeProp('border', "1px solid ".concat(props.theme.getColor('gray-500')), "1px solid ".concat(props.theme.getColor('gray-300'))) : null;
 });
-var Gutter = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$3 || (_templateObject2$3 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  padding-bottom: ", "px;\n"])), function (props) {
+var Gutter = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  padding-bottom: ", "px;\n"])), function (props) {
   if (props.renderAsMargin) {
-    return styled.css(_templateObject3$3 || (_templateObject3$3 = defaultTheme._taggedTemplateLiteral(["\n        margin-bottom: ", "px;\n      "])), props.gutter || 8);
+    return styled.css(_templateObject3$2 || (_templateObject3$2 = defaultTheme._taggedTemplateLiteral(["\n        margin-bottom: ", "px;\n      "])), props.gutter || 8);
   } else {
     return styled.css(_templateObject4$2 || (_templateObject4$2 = defaultTheme._taggedTemplateLiteral(["\n        padding-bottom: ", "px;\n      "])), props.gutter || 8);
   }
@@ -282,12 +290,18 @@ SummaryCard.defaultProps = {
   useBorder: false
 };
 
-var _templateObject$2, _templateObject2$2, _templateObject3$2, _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$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
-  return props.disabled && styled.css(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
+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$2 || (_templateObject3$2 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  padding: ", "px;\n  box-sizing: border-box;\n  cursor: pointer;\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) {
+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;
+}, function (props) {
+  return props.selected ? 3 : 0;
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
 }, function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
 }, function (props) {
@@ -445,6 +459,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
   var _asset$note, _asset$note2;
 
   var asset = props.asset,
+      activeSummaryCard = props.activeSummaryCard,
       selectable = props.selectable,
       hasHeightAndWidth = props.hasHeightAndWidth,
       selected = props.selected,
@@ -697,24 +712,17 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     return React__default['default'].createElement(React__default['default'].Fragment, null, renderVersionsBadge(), renderMediaBadge());
   }, [asset]);
   var renderPopoverContent = React.useCallback(function () {
-    var _asset$summary = asset.summary,
-        title = _asset$summary.title,
-        description = _asset$summary.description,
-        instructions = _asset$summary.instructions,
-        instructionsType = _asset$summary.instructionsType,
-        headerLeft = _asset$summary.headerLeft,
-        headerRight = _asset$summary.headerRight,
-        footerLeft = _asset$summary.footerLeft,
-        footerRight = _asset$summary.footerRight;
+    var _asset$summary, _asset$summary2, _asset$summary3, _asset$summary4, _asset$summary5, _asset$summary6, _asset$summary7, _asset$summary8;
+
     return React__default['default'].createElement(SummaryCard, {
-      title: title ? title : '',
-      description: description ? description : '',
-      instructions: instructions ? instructions : '',
-      instructionsType: instructionsType ? instructionsType : '',
-      headerRight: headerRight,
-      headerLeft: React__default['default'].createElement(React__default['default'].Fragment, null, renderSummaryCardHeaderLeft(), headerLeft),
-      footerLeft: footerLeft,
-      footerRight: footerRight,
+      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) || '',
+      instructionsType: (asset === null || asset === void 0 ? void 0 : (_asset$summary4 = asset.summary) === null || _asset$summary4 === void 0 ? void 0 : _asset$summary4.instructionsType) || '',
+      headerRight: (asset === null || asset === void 0 ? void 0 : (_asset$summary5 = asset.summary) === null || _asset$summary5 === void 0 ? void 0 : _asset$summary5.headerRight) || '',
+      headerLeft: React__default['default'].createElement(React__default['default'].Fragment, null, renderSummaryCardHeaderLeft(), (asset === null || asset === void 0 ? void 0 : (_asset$summary6 = asset.summary) === null || _asset$summary6 === void 0 ? void 0 : _asset$summary6.headerLeft) || ''),
+      footerLeft: (asset === null || asset === void 0 ? void 0 : (_asset$summary7 = asset.summary) === null || _asset$summary7 === void 0 ? void 0 : _asset$summary7.footerLeft) || '',
+      footerRight: (asset === null || asset === void 0 ? void 0 : (_asset$summary8 = asset.summary) === null || _asset$summary8 === void 0 ? void 0 : _asset$summary8.footerRight) || '',
       width: 375
     });
   }, [asset]);
@@ -735,7 +743,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
   }, asset.previewUrl && renderPreview(asset), React__default['default'].createElement(Popover.Popover, {
     content: renderPopoverContent(),
     placement: 'bottom',
-    visible: isOverlayHovered && !isAnySubActionsOpened,
+    visible: isOverlayHovered && !isAnySubActionsOpened && activeSummaryCard,
     zIndex: 10000
   }, React__default['default'].createElement(Overlay$1, {
     ref: cardRef,
@@ -800,11 +808,11 @@ var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(Re
   });
 }));
 
-var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
-var AssetGalleryWrapper = 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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+var AssetGalleryWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
+  return props.disabled && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
 });
-var AssetGalleryGridCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  height: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border-width: ", "px;\n  border-style: solid;\n  text-decoration: none;\n  cursor: pointer;\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  ", ";\n"])), function (props) {
+var AssetGalleryGridCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  height: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border-width: ", "px;\n  border-style: solid;\n  text-decoration: none;\n  cursor: pointer;\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  ", ";\n"])), function (props) {
   var selected = props.selected,
       softSelected = props.softSelected,
       hasError = props.hasError,
@@ -1243,20 +1251,15 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     });
   }, [asset]);
   var renderSummary = React.useCallback(function () {
-    var _asset$summary = asset.summary,
-        title = _asset$summary.title,
-        description = _asset$summary.description,
-        instructions = _asset$summary.instructions,
-        instructionsType = _asset$summary.instructionsType,
-        footerLeft = _asset$summary.footerLeft,
-        footerRight = _asset$summary.footerRight;
+    var _asset$summary, _asset$summary2, _asset$summary3, _asset$summary4, _asset$summary5, _asset$summary6;
+
     return React__default['default'].createElement(SummaryCard, {
-      title: title ? title : '',
-      description: description ? description : '',
-      instructions: instructions ? instructions : '',
-      instructionsType: instructionsType ? instructionsType : '',
-      footerLeft: footerLeft,
-      footerRight: footerRight
+      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) || '',
+      instructionsType: (asset === null || asset === void 0 ? void 0 : (_asset$summary4 = asset.summary) === null || _asset$summary4 === void 0 ? void 0 : _asset$summary4.instructionsType) || '',
+      footerLeft: (asset === null || asset === void 0 ? void 0 : (_asset$summary5 = asset.summary) === null || _asset$summary5 === void 0 ? void 0 : _asset$summary5.footerLeft) || '',
+      footerRight: (asset === null || asset === void 0 ? void 0 : (_asset$summary6 = asset.summary) === null || _asset$summary6 === void 0 ? void 0 : _asset$summary6.footerRight) || ''
     });
   }, [asset]);
   return React__default['default'].createElement(AssetGalleryWrapper, {
@@ -1306,17 +1309,9 @@ var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React
   });
 }));
 
-var _templateObject, _templateObject2, _templateObject3;
-var AssetGalleryBase$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
-var GroupLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  ", "\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  padding-bottom: 4px;\n  box-sizing: border-box;\n"])), function (props) {
-  return props.theme.primaryFontFamily;
-}, function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
-});
-var AssetGalleryCardBase = styled__default['default'].div(_templateObject3 || (_templateObject3 = 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 AssetGalleryBase = React__default['default'].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
   var assetsProp = _ref.assets,
+      activeSummaryCard = _ref.activeSummaryCard,
       viewMode = _ref.viewMode,
       thumbnailMaxHeight = _ref.thumbnailMaxHeight,
       selectable = _ref.selectable,
@@ -1328,7 +1323,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       scrollElementProp = _ref.scrollElement,
       onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
       component = _ref.component,
-      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "scrollElement", "onAssetSoftSelectedChanged", "component"]);
+      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "activeSummaryCard", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "scrollElement", "onAssetSoftSelectedChanged", "component"]);
 
   var assetGalleryDOMNode = React.useRef();
   var assetGalleryCompactRef = useMergedRefs.useMergedRefs(forwardedRef, assetGalleryDOMNode);
@@ -1357,7 +1352,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
   var previousYOffset = React.useRef(isBrowser ? scrollElement.pageYOffset : 0);
   var latestYOffset = React.useRef(isBrowser ? scrollElement.pageYOffset : 0);
   var scrollDirection = React.useRef('down');
-  useIsomorphicLayoutEffect(function () {
+  MultiLevelCheckboxSelect.useIsomorphicLayoutEffect(function () {
     if (!assetGalleryDOMNode.current) return;
     var throttledOnResize = lodash.throttle(onResize, 1);
     var resizeObserver = new ResizeObserver__default['default'](throttledOnResize);
@@ -1716,6 +1711,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       component: component
     }) : React__default['default'].createElement(AssetGalleryCompactCard$1, {
       asset: asset,
+      activeSummaryCard: activeSummaryCard,
       hasHeightAndWidth: asset.layout.hasHeightAndWidth,
       collapseExtraInfo: asset.layout.width < 90,
       selectable: 'selectable' in asset ? asset.selectable : selectable,
@@ -1730,6 +1726,7 @@ 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,
   viewMode: defaultTheme.PropTypes.oneOf(['compact', 'grid']),
   thumbnailMaxHeight: defaultTheme.PropTypes.number,
   selectable: defaultTheme.PropTypes.bool,
@@ -1746,6 +1743,7 @@ AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
 
 var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_ref, forwardedRef) {
   var assets = _ref.assets,
+      activeSummaryCard = _ref.activeSummaryCard,
       viewMode = _ref.viewMode,
       thumbnailMaxHeight = _ref.thumbnailMaxHeight,
       selectable = _ref.selectable,
@@ -1755,7 +1753,7 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
       scrollElement = _ref.scrollElement,
       onSoftSelectedChanged = _ref.onSoftSelectedChanged,
       component = _ref.component,
-      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component"]);
+      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "activeSummaryCard", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component"]);
 
   var _useState = React.useState(selectedAssetKeys || []),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -1810,6 +1808,7 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
   return React__default['default'].createElement(AssetGalleryBase, defaultTheme._extends({
     ref: forwardedRef,
     assets: assets,
+    activeSummaryCard: activeSummaryCard,
     thumbnailMaxHeight: thumbnailMaxHeight,
     selectable: selectable,
     selectedAssetKeys: selectedAssetKeysInternalState,
@@ -1825,6 +1824,7 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
 });
 AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
   assets: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape(assetShape)),
+  activeSummaryCard: defaultTheme.PropTypes.bool,
   viewMode: defaultTheme.PropTypes.oneOf(['compact', 'grid']),
   thumbnailMaxHeight: defaultTheme.PropTypes.number,
   selectable: defaultTheme.PropTypes.bool,
@@ -1839,7 +1839,8 @@ AssetGallery.defaultProps = {
   assets: [],
   viewMode: 'compact',
   thumbnailMaxHeight: 300,
-  selectedAssetKeys: []
+  selectedAssetKeys: [],
+  activeSummaryCard: false
 };
 
 exports.AssetGallery = AssetGallery;

package/{AssetPreviewTopBar-ade10c15.js → AssetPreviewTopBar-c28715f7.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-c137e17f.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
 var close = require('./close-ebf2f3cf.js');

package/{Badge-fa94dca8.js → Badge-aec841c8.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-c137e17f.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
 

package/{Button-5071dc6b.js → Button-c38d56a0.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-c137e17f.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
-var Popover = require('./Popover-155cbac8.js');
-var ContextMenu = require('./ContextMenu-bd818e55.js');
+var Popover = require('./Popover-e4ecb887.js');
+var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
 var expandMore = require('./expand-more-94585605.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/{Checkbox-dd2cf216.js → Checkbox-68dc38a8.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-c137e17f.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var lodash = require('lodash');
@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 var checkboxSize = '18px';
 var Checkbox$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
 var CheckIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 0;\n  transform: scale(0.1);\n  transition: all 200ms;\n  position: absolute;\n  width: 12px;\n  top: 4px;\n  left: 3px;\n  color: ", ";\n\n  svg {\n    width: 100%;\n    display: block;\n  }\n"])), function (props) {
@@ -20,24 +20,26 @@ var CheckIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTh
 var IndeterminateCheckIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 0;\n  transform: scale(0.1);\n  transition: all 200ms;\n  position: absolute;\n  height: 2px;\n  top: 8px;\n  left: 4px;\n  background: ", ";\n  width: 10px;\n"])), function (props) {
   return props.theme.getColor('gray-100');
 });
-var CheckboxLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  display: inline-flex;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  min-height: ", ";\n  text-align: left;\n  flex-wrap: wrap;\n  flex: 1;\n  line-height: ", ";\n  margin-right: auto;\n\n  & input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    margin: 0;\n  }\n\n  &::before {\n    content: '';\n    border: 2px solid ", ";\n    border-radius: 2px;\n    transition: all 200ms;\n    width: ", ";\n    height: ", ";\n    box-sizing: border-box;\n  }\n\n  &:has(input[type='checkbox']:checked) {\n    &::before {\n      background: ", ";\n      border-color: ", ";\n    }\n  }\n\n  &:has(input[type='checkbox']:not([data-indeterminate='true']):checked) {\n    ", " {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  &:has(input[type='checkbox'][data-indeterminate='true']:checked) {\n    ", " {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  ", "\n\n  ", "\n"])), checkboxSize, checkboxSize, function (props) {
+var CheckboxLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  display: inline-flex;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  min-height: ", ";\n  text-align: left;\n  flex-wrap: wrap;\n  flex: 1;\n  line-height: ", ";\n  margin-right: auto;\n\n  & input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    margin: 0;\n  }\n\n  &::before {\n    content: '';\n    border: 2px solid ", ";\n    border-radius: 2px;\n    transition: all 200ms;\n    width: ", ";\n    height: ", ";\n    box-sizing: border-box;\n    ", "\n  }\n\n  &:has(input[type='checkbox']:checked) {\n    &::before {\n      background: ", ";\n      border-color: ", ";\n    }\n  }\n\n  &:has(input[type='checkbox']:not([data-indeterminate='true']):checked) {\n    ", " {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  &:has(input[type='checkbox'][data-indeterminate='true']:checked) {\n    ", " {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  ", "\n\n  ", "\n"])), checkboxSize, checkboxSize, function (props) {
   return props.theme.getColor('gray-300');
 }, checkboxSize, checkboxSize, function (props) {
+  return props.muted && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n        opacity: 0.75;\n      "])));
+}, function (props) {
   return props.theme.getColor('emerald-500');
 }, function (props) {
   return props.theme.getColor('emerald-500');
 }, CheckIcon, IndeterminateCheckIcon, function (props) {
-  return props.readOnly && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: default;\n      pointer-events: none;\n      user-select: text;\n    "])));
+  return props.readOnly && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: default;\n      pointer-events: none;\n      user-select: text;\n    "])));
 }, function (props) {
-  return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: not-allowed;\n    "])));
+  return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: not-allowed;\n    "])));
 });
-var CheckboxVisualLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  padding-left: 10px;\n  font-weight: 400;\n  font-size: 0.875rem;\n  flex: 1;\n\n  ", ";\n"])), function (props) {
+var CheckboxVisualLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  padding-left: 10px;\n  font-weight: 400;\n  font-size: 0.875rem;\n  flex: 1;\n\n  ", ";\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
 });
-var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  margin: 0.375rem 0 0 0;\n  font-size: 0.75rem;\n  line-height: 1.333;\n\n  ", ";\n\n  ", "\n"])), function (props) {
+var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  margin: 0.375rem 0 0 0;\n  font-size: 0.75rem;\n  line-height: 1.333;\n\n  ", ";\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
 }, function (props) {
-  return props.error && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n      content: 'error';\n      ", "\n    "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
+  return props.error && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n      content: 'error';\n      ", "\n    "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
 });
 
 var Checkbox = React__default['default'].forwardRef(function Checkbox(_ref, forwardedRef) {
@@ -50,6 +52,7 @@ var Checkbox = React__default['default'].forwardRef(function Checkbox(_ref, forw
       description = _ref.description,
       error = _ref.error,
       indeterminate = _ref.indeterminate,
+      muted = _ref.muted,
       label = _ref.label,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
@@ -85,6 +88,7 @@ var Checkbox = React__default['default'].forwardRef(function Checkbox(_ref, forw
     style: style
   }, React__default['default'].createElement(CheckboxLabel, {
     disabled: disabled,
+    muted: muted,
     readOnly: readOnly,
     htmlFor: uniqueId
   }, React__default['default'].createElement("input", {
@@ -121,6 +125,7 @@ Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
   description: defaultTheme.PropTypes.string,
   error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
   indeterminate: defaultTheme.PropTypes.bool,
+  muted: defaultTheme.PropTypes.bool,
   onChange: defaultTheme.PropTypes.func,
   onBlur: defaultTheme.PropTypes.func,
   className: defaultTheme.PropTypes.string,

package/{CompactAutocompleteSelect-d4147107.js → CompactAutocompleteSelect-43e79e21.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-c137e17f.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var lodash = require('lodash');
 var nanoid = require('nanoid');
 var React = require('react');
-var check = require('./check-555d831b.js');
 var styled = require('styled-components');
 var Select = require('react-select');
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
@@ -73,28 +72,28 @@ 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 2.5px 0 8px;\n    cursor: pointer;\n    border: 1px solid transparent;\n    background-color: transparent;\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"])), function (props) {
+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  & .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"])), function (props) {
   return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
 }, function (props) {
-  return props.state && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in-out;\n      "])), function (props) {
-    return props.state === 'success' ? fadeIn : fadeOut;
+  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;
   });
 }, function (props) {
-  return props.state === 'warning' && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFF36C');
+  return props.type === 'warning' && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFF36C');
 }, function (props) {
-  return props.state === 'error' && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#fbeae6');
+  return props.type === 'error' && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#fbeae6');
 }, function (props) {
   return props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'));
 }, function (props) {
-  return props.state === 'warning' && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-500'));
+  return props.type === 'warning' && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-500'));
 }, function (props) {
-  return props.state === 'error' && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500'));
+  return props.type === 'error' && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500'));
 }, function (props) {
   return !props.isFocused && props.theme.themeProp('background-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
 }, function (props) {
-  return props.state === 'warning' && !props.isFocused && props.theme.themeProp('background', '#816600', '#F4E21E');
+  return props.type === 'warning' && !props.isFocused && props.theme.themeProp('background', '#816600', '#F4E21E');
 }, function (props) {
-  return props.state === 'error' && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
+  return props.type === 'error' && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
 });
 var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    min-height: 22px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    padding: 6px;\n    cursor: pointer;\n    padding: 1px 13px;\n    ", "\n    ", "\n    ", "\n      ", "\n  }\n  svg {\n    width: 15px;\n    margin: 0 9px 0 0;\n  }\n  a {\n    display: flex;\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
@@ -106,9 +105,9 @@ var Option$1 = styled__default['default'](Select.components.Option).attrs(defaul
   return props.isFocused && props.isSelected && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n        ", "\n      "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
 });
 var Placeholder = styled__default['default'](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    ", "\n    ", ";\n  }\n"])), function (props) {
-  return (props.state === 'error' || props.state === 'warning') && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n        ", "\n      "])), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
+  return (props.type === 'error' || props.type === 'warning') && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n        ", "\n      "])), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
 }, function (props) {
-  return (props.state === 'error' || props.state === 'warning') && props.theme.themeProp('opacity', '0.6', '0.6');
+  return (props.type === 'error' || props.type === 'warning') && props.theme.themeProp('opacity', '0.6', '0.6');
 });
 var SingleValue$1 = styled__default['default'](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    ", ";\n  }\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
@@ -155,8 +154,10 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
       edit = _ref.edit,
       disabled = _ref.disabled,
       hidden = _ref.hidden,
-      state = _ref.state,
-      props = defaultTheme._objectWithoutProperties(_ref, ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "edit", "disabled", "hidden", "state"]);
+      type = _ref.type,
+      loadingIcon = _ref.loadingIcon,
+      successIcon = _ref.successIcon,
+      props = defaultTheme._objectWithoutProperties(_ref, ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "edit", "disabled", "hidden", "type", "loadingIcon", "successIcon"]);
 
   var _useState = React.useState(nanoid.nanoid()),
       _useState2 = defaultTheme._slicedToArray(_useState, 1),
@@ -181,20 +182,20 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
     return React__default['default'].createElement(Control, defaultTheme._extends({
       className: "select-control",
       edit: edit,
-      state: state
+      type: type
     }, props));
   };
 
   var ValueContainer$1 = React.useMemo(function () {
     var valueContainer = function valueContainer(props) {
       return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(ValueContainer, defaultTheme._extends({
-        state: state
+        type: type
       }, props)));
     };
 
     valueContainer.displayName = 'ValueContainerWrapper';
     return valueContainer;
-  }, [state]);
+  }, [type]);
   var Input$1 = React.useMemo(function () {
     var selectInput = function selectInput(props) {
       return React__default['default'].createElement(Input, defaultTheme._extends({
@@ -219,7 +220,7 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
   var Placeholder$1 = function Placeholder$1(props) {
     return React__default['default'].createElement(Placeholder, defaultTheme._extends({
       className: "select-placeholder",
-      state: state
+      type: type
     }, props));
   };
 
@@ -325,10 +326,7 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
   }, React__default['default'].createElement(InputContainer, null, label && React__default['default'].createElement(Label, {
     htmlFor: uniqueId,
     disabled: disabled
-  }, label, React__default['default'].createElement(SuccessContainer, null, state === 'loading' && React__default['default'].createElement(check._default, {
-    color: '#b0b6b9',
-    size: 15
-  }), state === 'success' && React__default['default'].createElement(check.SvgCheck, null))), loadOptions ? creatable ? React__default['default'].createElement(AsyncCreatableAutocompleteSelect, defaultTheme._extends({
+  }, label, React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), loadOptions ? creatable ? React__default['default'].createElement(AsyncCreatableAutocompleteSelect, defaultTheme._extends({
     $hasLabel: !lodash.isEmpty(label)
   }, sharedSelectProps, props)) : React__default['default'].createElement(AsyncAutocompleteSelect, defaultTheme._extends({
     $hasLabel: !lodash.isEmpty(label)
@@ -355,7 +353,9 @@ CompactAutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   onUpdateCallback: defaultTheme.PropTypes.func,
   creatable: defaultTheme.PropTypes.bool,
   disabled: defaultTheme.PropTypes.bool,
-  state: defaultTheme.PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success'])
+  type: defaultTheme.PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),
+  loadingIcon: defaultTheme.PropTypes.element,
+  successIcon: defaultTheme.PropTypes.element
 } : {};
 CompactAutocompleteSelect.defaultProps = {
   noOptionsMessageFunc: function noOptionsMessageFunc(inputValue) {
@@ -372,7 +372,7 @@ CompactAutocompleteSelect.defaultProps = {
   error: false,
   warning: false,
   hidden: false,
-  state: ''
+  type: ''
 };
 
 var Option = function Option(props) {