@ntbjs/react-components 2.0.0-rc.11 → 2.0.0-rc.13

package/cjs/components/inputs/TextInput/TextInput.styled.js

@@ -19,6 +19,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -32,9 +34,7 @@ let _ = t => t,
   _t20,
   _t21,
   _t22,
-  _t23,
-  _t24,
-  _t25;
+  _t23;
 const activeLabel = styled.css(_t || (_t = _`
   font-size: 0.75rem;
   padding: 0 3px;
@@ -43,7 +43,12 @@ const activeLabel = styled.css(_t || (_t = _`
   left: 8px !important;
   opacity: 1 !important;
 `));
-const Adornment = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Adornment = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
   flex-shrink: 0;
   font-family: inherit;
   font-size: 0.875rem;
@@ -63,7 +68,7 @@ const Adornment = styled__default["default"].div.attrs(defaultTheme.applyDefault
 
   ${0}
   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.isPrefix ? styled.css(_t3 || (_t3 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.$isPrefix ? styled.css(_t3 || (_t3 = _`
           padding-right: 10px;
           border-right: 0;
           border-top-right-radius: 0;
@@ -74,12 +79,14 @@ const Adornment = styled__default["default"].div.attrs(defaultTheme.applyDefault
           border-left: 0;
           border-top-left-radius: 0;
           border-bottom-left-radius: 0;
-        `)), props => props.warning && styled.css(_t5 || (_t5 = _`
+        `)), props => props.$warning && styled.css(_t5 || (_t5 = _`
       border-color: ${0} !important;
-    `), props.theme.getColor('orange-500')), props => props.error && styled.css(_t6 || (_t6 = _`
+    `), props.theme.getColor('orange-500')), props => props.$error && styled.css(_t6 || (_t6 = _`
       border-color: ${0} !important;
     `), props.theme.getColor('red-500')));
-const TextInputWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+const TextInputWrapper = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
   display: flex;
   align-content: center;
 
@@ -89,8 +96,10 @@ const TextInputWrapper = styled__default["default"].div.attrs(defaultTheme.apply
       ${0}
     }
   }
-`), Adornment, props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1));
-const InputIconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+`), Adornment, props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1));
+const InputIconContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
   opacity: 0;
   pointer-events: none;
   border-top-right-radius: 3px;
@@ -112,8 +121,10 @@ const InputIconContainer = styled__default["default"].div.attrs(defaultTheme.app
   > svg {
     width: 12px;
   }
-`), props => props.theme.getColor('gray-400'), props => props.warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43'), props => props.error && props.theme.themeProp('color', '#CB968F', '#CB968F'));
-const TextInputField = styled__default["default"].input.attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
+`), props => props.theme.getColor('gray-400'), props => props.$warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43'), props => props.$error && props.theme.themeProp('color', '#CB968F', '#CB968F'));
+const TextInputField = styled__default["default"].input.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
   display: block;
   width: 100%;
   font-family: inherit;
@@ -124,8 +135,8 @@ const TextInputField = styled__default["default"].input.attrs(defaultTheme.apply
   box-sizing: border-box;
   appearance: none;
   transition: border-color 350ms;
-  height: 2.75rem !important; // important is needed to override the default Foundation styling used in the Mediebank;
-  margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank;
+  height: 2.75rem !important;
+  margin-bottom: 0;
   ${0}
   ${0}
   border: 1px solid;
@@ -142,8 +153,12 @@ const TextInputField = styled__default["default"].input.attrs(defaultTheme.apply
 
     ${0}
   }
-
-
+  &:focus {
+    outline: none !important;
+    box-shadow: none !important;
+   ${0}
+    ${0}
+  }
   &&:hover:not(:focus) {
     ${0};
     transition: background 350ms;
@@ -153,23 +168,22 @@ const TextInputField = styled__default["default"].input.attrs(defaultTheme.apply
     }
   }
 
-  :focus {
-    outline: none;
-    border-color: ${0} !important
-    ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.noBorder || props.readOnly ? 'border-color: transparent !important' : props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.readOnly && styled.css(_t10 || (_t10 = _`
+
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.$noBorder || props.readOnly ? 'border-color: transparent !important' : props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.readOnly && styled.css(_t0 || (_t0 = _`
       user-select: text;
       cursor: default;
-    `)), props => props.warning && styled.css(_t11 || (_t11 = _`
+    `)), props => props.$warning && styled.css(_t1 || (_t1 = _`
       border-color: ${0} !important;
-    `), props.theme.getColor('orange-500')), props => props.error && styled.css(_t12 || (_t12 = _`
+    `), props.theme.getColor('orange-500')), props => props.$error && styled.css(_t10 || (_t10 = _`
       border-color: ${0} !important;
-    `), props.theme.getColor('red-500')), props => props.hasIcon && styled.css(_t13 || (_t13 = _`
+    `), props.theme.getColor('red-500')), props => props.$hasIcon && styled.css(_t11 || (_t11 = _`
       padding-left: 35px;
-    `)), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1), props => props.theme.themeProp('opacity', 0.6, 0.5, 1), props => props.noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')) : 'background: transparent', InputIconContainer, props => props.theme.getColor('gray-600'), props => props.readOnly && styled.css(_t14 || (_t14 = _`
+    `)), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1), props => props.theme.themeProp('opacity', 0.6, 0.5, 1), props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-600')), props => props.readOnly && styled.css(_t12 || (_t12 = _`
         outline: none;
-      `)));
-const TextInputLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_t15 || (_t15 = _`
+      `)), props => props.$noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')) : props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), InputIconContainer);
+const TextInputLabel = styled__default["default"].label.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t13 || (_t13 = _`
   position: absolute;
   top: 15px;
   left: 11px;
@@ -185,19 +199,15 @@ const TextInputLabel = styled__default["default"].label.attrs(defaultTheme.apply
 
   ${0}
 
-
   ${0}
-
-
-   ${0}
-
-   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')), props => props.theme.themeProp('opacity', 0.6, 0.5), props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`), props => (props.hasPlaceholder || props.hasAdornments) && styled.css(_t16 || (_t16 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')), props => props.theme.themeProp('opacity', 0.6, 0.5), props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`), props => (props.$hasPlaceholder || props.$hasAdornments) && styled.css(_t14 || (_t14 = _`
       ${0};
-    `), activeLabel), props => props.hasIcon && styled.css(_t17 || (_t17 = _`
+    `), activeLabel), props => props.$hasIcon && styled.css(_t15 || (_t15 = _`
       left: 35px;
-    `)), props => props.warning && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500')), props => props.error && props.theme.themeProp('color', props.theme.getColor('red-500'), props.theme.getColor('red-500')));
-const TextInputFieldIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
+    `)));
+const TextInputFieldIcon = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t16 || (_t16 = _`
   position: absolute;
   top: 0;
   left: 0;
@@ -211,7 +221,9 @@ const TextInputFieldIcon = styled__default["default"].div.attrs(defaultTheme.app
     transition: opacity 250ms;
   }
 `));
-const TextInput = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t19 || (_t19 = _`
+const TextInput = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t17 || (_t17 = _`
   position: relative;
 
   ${0}
@@ -235,21 +247,22 @@ const TextInput = styled__default["default"].div.attrs(defaultTheme.applyDefault
     ${0}
     ${0} 
   } 
- 
 }
-`), props => props.disabled && styled.css(_t20 || (_t20 = _`
+`), props => props.disabled && styled.css(_t18 || (_t18 = _`
       user-select: none;
       opacity: 0.5;
       cursor: not-allowed;
       > * {
         pointer-events: none;
       }
-    `)), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, props => props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')), props => props.error && styled.css(_t21 || (_t21 = _`
+    `)), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, props => props.$error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')), props => props.$error && styled.css(_t19 || (_t19 = _`
         color: ${0};
-      `), props.theme.getColor('red-500')), props => props.warning && styled.css(_t22 || (_t22 = _`
+      `), props.theme.getColor('red-500')), props => props.$warning && styled.css(_t20 || (_t20 = _`
         color: ${0};
       `), props.theme.getColor('orange-500')));
-const Description = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
+const Description = styled__default["default"].p.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t21 || (_t21 = _`
   margin: 8px 0 0 0;
   padding: 0 0.6875rem;
   font-size: 0.75rem;
@@ -260,9 +273,9 @@ const Description = styled__default["default"].p.attrs(defaultTheme.applyDefault
   ${0}
 
   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.error && styled.css(_t24 || (_t24 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.$error && styled.css(_t22 || (_t22 = _`
       ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))), props => props.warning && styled.css(_t25 || (_t25 = _`
+    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))), props => props.$warning && styled.css(_t23 || (_t23 = _`
       ${0}
     `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))));
 

package/cjs/components/layout/InputGroup/InputGroup.styled.js

@@ -11,7 +11,12 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 let _ = t => t,
   _t;
-const InputGroup = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const InputGroup = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   margin: 8px 0;
 `));
 

package/cjs/components/layout/SectionSeparator/SectionSeparator.js

@@ -7,23 +7,23 @@ var index = require('../../../node_modules/react/index.js');
 var index$1 = require('../../../node_modules/prop-types/index.js');
 var SectionSeparator_styled = require('./SectionSeparator.styled.js');
 
-const _excluded = ["vertical"];
+const _excluded = ["vertical", "margin"];
 const SectionSeparator = index["default"].forwardRef(function SectionSeparator(_ref, forwardedRef) {
   let {
-      vertical
+      vertical = false,
+      margin = 0
     } = _ref,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return index["default"].createElement(SectionSeparator_styled.SectionSeparator, _rollupPluginBabelHelpers["extends"]({
-    vertical: vertical,
+    $vertical: vertical,
+    $margin: margin,
     ref: forwardedRef
   }, props));
 });
 SectionSeparator.propTypes = process.env.NODE_ENV !== "production" ? {
-  vertical: index$1["default"].bool
+  vertical: index$1["default"].bool,
+  margin: index$1["default"].number
 } : {};
-SectionSeparator.defaultProps = {
-  vertical: false
-};
 var SectionSeparator$1 = SectionSeparator;
 
 exports["default"] = SectionSeparator$1;

package/cjs/components/layout/SectionSeparator/SectionSeparator.styled.js

@@ -11,11 +11,18 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 let _ = t => t,
   _t;
-const SectionSeparator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
- height: ${0};
- width: ${0};
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const SectionSeparator = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  height: ${0};
+  width: ${0};
 
- ${0}
-`), props => props.vertical ? '100%' : '1px', props => props.vertical ? '1px' : '100%', props => props.theme.themeProp('background-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200')));
+  ${0}
+
+  ${0}
+`), props => props.$vertical ? '100%' : '1px', props => props.$vertical ? '1px' : '100%', props => props.$vertical ? `margin-left: ${props.$margin}px; margin-right: ${props.$margin}px;` : `margin-top: ${props.$margin}px; margin-bottom: ${props.$margin}px;`, props => props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
 
 exports.SectionSeparator = SectionSeparator;

package/cjs/components/widgets/AssetAction/AssetAction.js

@@ -76,7 +76,7 @@ const AssetAction = index["default"].forwardRef(function AssetAction(_ref, forwa
     ref: refs.setReference
   }, getReferenceProps(), {
     onClick: e => onActionClick(e, action.onClick(asset), itemKey),
-    actionWidthHeight: action.actionWidthHeight
+    $actionWidthHeight: action.actionWidthHeight
   }), action.icon), isOpen && isMounted && index["default"].createElement(AssetAction_styled.Floating, _rollupPluginBabelHelpers["extends"]({
     className: "floating",
     ref: refs.setFloating,

package/cjs/components/widgets/AssetAction/AssetAction.styled.js

@@ -16,10 +16,17 @@ let _ = t => t,
   _t3,
   _t4,
   _t5;
-const AssetAction = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const AssetAction = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   font-family: ${0};
 `), props => props.theme.primaryFontFamily);
-const AssetActionButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+const AssetActionButton = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
   border-radius: 50%;
   width: ${0};
   height: ${0};
@@ -35,8 +42,10 @@ const AssetActionButton = styled__default["default"].div.attrs(defaultTheme.appl
     height: ${0};
     ${0};
   }
-`), props => props.actionWidthHeight ? `${props.actionWidthHeight[0]}px` : 'auto', props => props.actionWidthHeight ? `${props.actionWidthHeight[1]}px` : 'auto', props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.actionWidthHeight ? `${props.actionWidthHeight[0] - 14}px` : 'auto', props => props.actionWidthHeight ? `${props.actionWidthHeight[1] - 14}px` : 'auto', props => props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white')));
-const ActionTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+`), props => props.$actionWidthHeight ? `${props.$actionWidthHeight[0]}px` : 'auto', props => props.$actionWidthHeight ? `${props.$actionWidthHeight[1]}px` : 'auto', props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.$actionWidthHeightactionWidthHeight ? `${props.$actionWidthHeight[0] - 14}px` : 'auto', props => props.$actionWidthHeight ? `${props.$actionWidthHeight[1] - 14}px` : 'auto', props => props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white')));
+const ActionTitle = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
   font-size: 14px;
   border-radius: 4px;
   padding: 8px 12px;
@@ -47,7 +56,9 @@ const ActionTitle = styled__default["default"].div.attrs(defaultTheme.applyDefau
 const StyledFloatingArrow = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
   fill: ${0};
 `), props => props.theme.getColor('gray-700'));
-const Floating = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+const Floating = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
   pointer-events: none;
 `));
 

package/cjs/components/widgets/AssetActionsBase/AssetActionsBase.styled.js

@@ -11,7 +11,12 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 let _ = t => t,
   _t;
-const AssetActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const AssetActions = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   font-family: ${0};
   font-size: 1rem;
   font-weight: 500;

package/cjs/components/widgets/AssetGallery/AssetGallery.js

@@ -10,7 +10,7 @@ var asset_propType = require('./asset.propType.js');
 var AssetGalleryBase = require('./AssetGalleryBase/AssetGalleryBase.js');
 var index$1 = require('../../../_virtual/index.js');
 
-const _excluded = ["assets", "activeSummaryCard", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component", "displayIcon"];
+const _excluded = ["assets", "activeSummaryCard", "viewMode", "thumbnailMaxHeight", "selectable", "customSelectedBorder", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component", "displayIcon"];
 const AssetGallery = index["default"].forwardRef(function AssetGallery(_ref, forwardedRef) {
   let {
       assets,
@@ -18,6 +18,7 @@ const AssetGallery = index["default"].forwardRef(function AssetGallery(_ref, for
       viewMode,
       thumbnailMaxHeight,
       selectable,
+      customSelectedBorder,
       selectedAssetKeys,
       onSelectedChanged,
       softSelectable,
@@ -64,6 +65,7 @@ const AssetGallery = index["default"].forwardRef(function AssetGallery(_ref, for
     displayIcon: displayIcon,
     thumbnailMaxHeight: thumbnailMaxHeight,
     selectable: selectable,
+    customSelectedBorder: customSelectedBorder,
     selectedAssetKeys: selectedAssetKeysInternalState,
     onAssetSelected: onSelected,
     onAssetUnselected: onUnselected,
@@ -82,6 +84,7 @@ AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
   viewMode: index$2["default"].oneOf(['compact', 'grid']),
   thumbnailMaxHeight: index$2["default"].number,
   selectable: index$2["default"].bool,
+  customSelectedBorder: index$2["default"].arrayOf(index$2["default"].string),
   selectedAssetKeys: index$2["default"].oneOfType([index$2["default"].arrayOf(index$2["default"].string), index$2["default"].arrayOf(index$2["default"].number)]),
   onSelectedChanged: index$2["default"].func,
   softSelectable: index$2["default"].bool,
@@ -94,6 +97,7 @@ AssetGallery.defaultProps = {
   viewMode: 'compact',
   thumbnailMaxHeight: 300,
   selectedAssetKeys: [],
+  customSelectedBorder: [],
   activeSummaryCard: false,
   displayIcon: ''
 };

package/cjs/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var index = require('../../../../node_modules/react/index.js');
-var useMergedRefs = require('../../../../node_modules/@restart/hooks/esm/useMergedRefs.js');
+var useMergedRefs = require('../../../../node_modules/@restart/hooks/lib/useMergedRefs.js');
 var lodash = require('lodash');
 var index$2 = require('../../../../node_modules/prop-types/index.js');
 var ResizeObserver = require('resize-observer-polyfill');
@@ -19,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
 
-const _excluded = ["assets", "activeSummaryCard", "displayIcon", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "scrollElement", "onAssetSoftSelectedChanged", "component"];
+const _excluded = ["assets", "activeSummaryCard", "displayIcon", "viewMode", "thumbnailMaxHeight", "selectable", "customSelectedBorder", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "scrollElement", "onAssetSoftSelectedChanged", "component"];
 const AssetGalleryBase = index["default"].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
   let {
       assets: assetsProp,
@@ -28,6 +28,7 @@ const AssetGalleryBase = index["default"].forwardRef(function AssetGalleryBase(_
       viewMode,
       thumbnailMaxHeight,
       selectable,
+      customSelectedBorder,
       selectedAssetKeys,
       onAssetSelected,
       onAssetUnselected,
@@ -353,20 +354,21 @@ const AssetGalleryBase = index["default"].forwardRef(function AssetGalleryBase(_
     extendedSelectMode: Boolean(selectedAssetKeys.length),
     onAssetSelected: onAssetSelected,
     onAssetUnselected: onAssetUnselected,
-    softSelected: softSelectedAssetKey === asset.key,
+    $softSelected: softSelectedAssetKey === asset.key,
     component: component
   }) : index["default"].createElement(AssetGalleryCompactCard["default"], {
     asset: asset,
     activeSummaryCard: activeSummaryCard,
     displayIcon: displayIcon,
-    hasHeightAndWidth: asset.layout.hasHeightAndWidth,
-    collapseExtraInfo: asset.layout.width < 90,
+    $hasHeightAndWidth: asset.layout.hasHeightAndWidth,
+    $collapseExtraInfo: asset.layout.width < 90,
     selectable: 'selectable' in asset ? asset.selectable : selectable,
     selected: selectedAssetKeys.includes(asset.key),
+    customSelectedBorder: customSelectedBorder,
     extendedSelectMode: Boolean(selectedAssetKeys.length),
     onAssetSelected: onAssetSelected,
     onAssetUnselected: onAssetUnselected,
-    softSelected: softSelectedAssetKey === asset.key,
+    $softSelected: softSelectedAssetKey === asset.key,
     component: component
   }))))));
 });
@@ -377,6 +379,7 @@ AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
   viewMode: index$2["default"].oneOf(['compact', 'grid']),
   thumbnailMaxHeight: index$2["default"].number,
   selectable: index$2["default"].bool,
+  customSelectedBorder: index$2["default"].arrayOf(index$2["default"].string),
   selectedAssetKeys: index$2["default"].oneOfType([index$2["default"].arrayOf(index$2["default"].string), index$2["default"].arrayOf(index$2["default"].number)]).isRequired,
   scrollElement: index$2["default"].instanceOf(Element),
   onAssetSelected: index$2["default"].func.isRequired,

package/cjs/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.styled.js

@@ -13,10 +13,17 @@ let _ = t => t,
   _t,
   _t2,
   _t3;
-const AssetGalleryBase = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const AssetGalleryBase = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   position: relative;
 `));
-const GroupLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+const GroupLabel = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
   font-family: ${0};
   ${0}
   display: flex;
@@ -25,7 +32,9 @@ const GroupLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaul
   padding-bottom: 4px;
   box-sizing: border-box;
 `), props => props.theme.primaryFontFamily, props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')));
-const AssetGalleryCardBase = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+const AssetGalleryCardBase = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
   position: absolute;
   top: 0;
   left: 0;

package/cjs/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js

@@ -49,6 +49,7 @@ const AssetGalleryCompactCard = props => {
     selectable,
     hasHeightAndWidth,
     selected,
+    customSelectedBorder,
     extendedSelectMode,
     onAssetSelected,
     onAssetUnselected,
@@ -317,7 +318,7 @@ const AssetGalleryCompactCard = props => {
       footerLeft: (asset === null || asset === void 0 || (_asset$summary3 = asset.summary) === null || _asset$summary3 === void 0 ? void 0 : _asset$summary3.footerLeft) || '',
       footerRight: (asset === null || asset === void 0 || (_asset$summary4 = asset.summary) === null || _asset$summary4 === void 0 ? void 0 : _asset$summary4.footerRight) || '',
       width: 375,
-      compact: true
+      view: 'compact'
     });
   }, [asset]);
   return index["default"].createElement(AssetGalleryCompactCard_styled.AssetGalleryWrapper, {
@@ -347,7 +348,7 @@ const AssetGalleryCompactCard = props => {
     softSelected: softSelected,
     selected: selected
   }), (asset === null || asset === void 0 ? void 0 : asset.actions) && index["default"].createElement(AssetGalleryCompactCard_styled.OverlayInfoTopActions, {
-    isOverlayHovered: isOverlayHovered
+    $isOverlayHovered: isOverlayHovered
   }, index["default"].createElement(AssetActionsBase["default"], {
     actions: asset.actions,
     asset: asset
@@ -365,7 +366,8 @@ const AssetGalleryCompactCard = props => {
     softSelected: softSelected
   }), selectable && index["default"].createElement(AssetGalleryCompactCard_styled.OverlaySelected, {
     selected: selected,
-    softSelected: softSelected
+    softSelected: softSelected,
+    customSelectedBorder: customSelectedBorder
   }), isOpen && isOverlayHovered && isMounted && activeSummaryCard && !isAnySubActionsOpened && index["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: refs.setFloating,
     style: floatingStyles
@@ -384,6 +386,7 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   hasHeightAndWidth: index$2["default"].bool,
   selectable: index$2["default"].bool,
   selected: index$2["default"].bool,
+  customSelectedBorder: index$2["default"].arrayOf(index$2["default"].string),
   extendedSelectMode: index$2["default"].bool,
   onAssetSelected: index$2["default"].func.isRequired,
   onAssetUnselected: index$2["default"].func.isRequired,
@@ -392,7 +395,7 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   scrollPosition: index$2["default"].number,
   collapseExtraInfo: index$2["default"].bool,
   activeSummaryCard: index$2["default"].bool,
-  displayIcon: index$2["default"].oneOf(['versions', 'verifications', ''])
+  displayIcon: index$2["default"].oneOf(['dynamic', 'versions', 'verifications', ''])
 } : {};
 var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(index["default"].memo(AssetGalleryCompactCard, (prevProps, nextProps) => {
   const reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth', 'collapseExtraInfo'];