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

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

@@ -11,6 +11,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -24,9 +26,7 @@ let _ = t => t,
   _t20,
   _t21,
   _t22,
-  _t23,
-  _t24,
-  _t25;
+  _t23;
 const activeLabel = css(_t || (_t = _`
   font-size: 0.75rem;
   padding: 0 3px;
@@ -35,7 +35,12 @@ const activeLabel = css(_t || (_t = _`
   left: 8px !important;
   opacity: 1 !important;
 `));
-const Adornment = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Adornment = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   flex-shrink: 0;
   font-family: inherit;
   font-size: 0.875rem;
@@ -55,7 +60,7 @@ const Adornment = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
 
   ${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 ? 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 ? css(_t3 || (_t3 = _`
           padding-right: 10px;
           border-right: 0;
           border-top-right-radius: 0;
@@ -66,12 +71,14 @@ const Adornment = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
           border-left: 0;
           border-top-left-radius: 0;
           border-bottom-left-radius: 0;
-        `)), props => props.warning && css(_t5 || (_t5 = _`
+        `)), props => props.$warning && css(_t5 || (_t5 = _`
       border-color: ${0} !important;
-    `), props.theme.getColor('orange-500')), props => props.error && css(_t6 || (_t6 = _`
+    `), props.theme.getColor('orange-500')), props => props.$error && css(_t6 || (_t6 = _`
       border-color: ${0} !important;
     `), props.theme.getColor('red-500')));
-const TextInputWrapper = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+const TextInputWrapper = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t7 || (_t7 = _`
   display: flex;
   align-content: center;
 
@@ -81,8 +88,10 @@ const TextInputWrapper = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
       ${0}
     }
   }
-`), Adornment, props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1));
-const InputIconContainer = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+`), Adornment, props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1));
+const InputIconContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   opacity: 0;
   pointer-events: none;
   border-top-right-radius: 3px;
@@ -104,8 +113,10 @@ const InputIconContainer = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   > 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.input.attrs(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.input.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t9 || (_t9 = _`
   display: block;
   width: 100%;
   font-family: inherit;
@@ -116,8 +127,8 @@ const TextInputField = styled.input.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
   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;
@@ -134,8 +145,12 @@ const TextInputField = styled.input.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
 
     ${0}
   }
-
-
+  &:focus {
+    outline: none !important;
+    box-shadow: none !important;
+   ${0}
+    ${0}
+  }
   &&:hover:not(:focus) {
     ${0};
     transition: background 350ms;
@@ -145,23 +160,22 @@ const TextInputField = styled.input.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
     }
   }
 
-  :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 && 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 && css(_t0 || (_t0 = _`
       user-select: text;
       cursor: default;
-    `)), props => props.warning && css(_t11 || (_t11 = _`
+    `)), props => props.$warning && css(_t1 || (_t1 = _`
       border-color: ${0} !important;
-    `), props.theme.getColor('orange-500')), props => props.error && css(_t12 || (_t12 = _`
+    `), props.theme.getColor('orange-500')), props => props.$error && css(_t10 || (_t10 = _`
       border-color: ${0} !important;
-    `), props.theme.getColor('red-500')), props => props.hasIcon && css(_t13 || (_t13 = _`
+    `), props.theme.getColor('red-500')), props => props.$hasIcon && 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 && 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 && css(_t12 || (_t12 = _`
         outline: none;
-      `)));
-const TextInputLabel = styled.label.attrs(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.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t13 || (_t13 = _`
   position: absolute;
   top: 15px;
   left: 11px;
@@ -177,19 +191,15 @@ const TextInputLabel = styled.label.attrs(applyDefaultTheme)(_t15 || (_t15 = _`
 
   ${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) && 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) && css(_t14 || (_t14 = _`
       ${0};
-    `), activeLabel), props => props.hasIcon && css(_t17 || (_t17 = _`
+    `), activeLabel), props => props.$hasIcon && 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.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
+    `)));
+const TextInputFieldIcon = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t16 || (_t16 = _`
   position: absolute;
   top: 0;
   left: 0;
@@ -203,7 +213,9 @@ const TextInputFieldIcon = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _
     transition: opacity 250ms;
   }
 `));
-const TextInput = styled.div.attrs(applyDefaultTheme)(_t19 || (_t19 = _`
+const TextInput = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t17 || (_t17 = _`
   position: relative;
 
   ${0}
@@ -227,21 +239,22 @@ const TextInput = styled.div.attrs(applyDefaultTheme)(_t19 || (_t19 = _`
     ${0}
     ${0} 
   } 
- 
 }
-`), props => props.disabled && css(_t20 || (_t20 = _`
+`), props => props.disabled && 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 && 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 && css(_t19 || (_t19 = _`
         color: ${0};
-      `), props.theme.getColor('red-500')), props => props.warning && css(_t22 || (_t22 = _`
+      `), props.theme.getColor('red-500')), props => props.$warning && css(_t20 || (_t20 = _`
         color: ${0};
       `), props.theme.getColor('orange-500')));
-const Description = styled.p.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
+const Description = styled.p.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t21 || (_t21 = _`
   margin: 8px 0 0 0;
   padding: 0 0.6875rem;
   font-size: 0.75rem;
@@ -252,9 +265,9 @@ const Description = styled.p.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
   ${0}
 
   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.error && css(_t24 || (_t24 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.$error && css(_t22 || (_t22 = _`
       ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))), props => props.warning && css(_t25 || (_t25 = _`
+    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))), props => props.$warning && css(_t23 || (_t23 = _`
       ${0}
     `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))));
 

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

@@ -3,7 +3,12 @@ import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
 
 let _ = t => t,
   _t;
-const InputGroup = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const InputGroup = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   margin: 8px 0;
 `));
 

package/esm/components/layout/SectionSeparator/SectionSeparator.js

@@ -3,23 +3,23 @@ import React from '../../../node_modules/react/index.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { SectionSeparator as SectionSeparator$2 } from './SectionSeparator.styled.js';
 
-const _excluded = ["vertical"];
+const _excluded = ["vertical", "margin"];
 const SectionSeparator = React.forwardRef(function SectionSeparator(_ref, forwardedRef) {
   let {
-      vertical
+      vertical = false,
+      margin = 0
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(SectionSeparator$2, _extends({
-    vertical: vertical,
+    $vertical: vertical,
+    $margin: margin,
     ref: forwardedRef
   }, props));
 });
 SectionSeparator.propTypes = process.env.NODE_ENV !== "production" ? {
-  vertical: PropTypes.bool
+  vertical: PropTypes.bool,
+  margin: PropTypes.number
 } : {};
-SectionSeparator.defaultProps = {
-  vertical: false
-};
 var SectionSeparator$1 = SectionSeparator;
 
 export { SectionSeparator$1 as default };

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

@@ -3,11 +3,18 @@ import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
 
 let _ = t => t,
   _t;
-const SectionSeparator = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
- height: ${0};
- width: ${0};
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const SectionSeparator = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(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')));
 
 export { SectionSeparator };

package/esm/components/widgets/AssetAction/AssetAction.js

@@ -72,7 +72,7 @@ const AssetAction = React.forwardRef(function AssetAction(_ref, forwardedRef) {
     ref: refs.setReference
   }, getReferenceProps(), {
     onClick: e => onActionClick(e, action.onClick(asset), itemKey),
-    actionWidthHeight: action.actionWidthHeight
+    $actionWidthHeight: action.actionWidthHeight
   }), action.icon), isOpen && isMounted && React.createElement(Floating, _extends({
     className: "floating",
     ref: refs.setFloating,

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

@@ -8,10 +8,17 @@ let _ = t => t,
   _t3,
   _t4,
   _t5;
-const AssetAction = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const AssetAction = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   font-family: ${0};
 `), props => props.theme.primaryFontFamily);
-const AssetActionButton = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+const AssetActionButton = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   border-radius: 50%;
   width: ${0};
   height: ${0};
@@ -27,8 +34,10 @@ const AssetActionButton = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
     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.div.attrs(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.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   font-size: 14px;
   border-radius: 4px;
   padding: 8px 12px;
@@ -39,7 +48,9 @@ const ActionTitle = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
 const StyledFloatingArrow = styled(FloatingArrow).attrs(applyDefaultTheme)(_t4 || (_t4 = _`
   fill: ${0};
 `), props => props.theme.getColor('gray-700'));
-const Floating = styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
+const Floating = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t5 || (_t5 = _`
   pointer-events: none;
 `));
 

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

@@ -3,7 +3,12 @@ import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
 
 let _ = t => t,
   _t;
-const AssetActions = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const AssetActions = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   font-family: ${0};
   font-size: 1rem;
   font-weight: 500;

package/esm/components/widgets/AssetGallery/AssetGallery.js

@@ -6,7 +6,7 @@ import { assetShape } from './asset.propType.js';
 import AssetGalleryBase from './AssetGalleryBase/AssetGalleryBase.js';
 import { r as react } from '../../../_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 = React.forwardRef(function AssetGallery(_ref, forwardedRef) {
   let {
       assets,
@@ -14,6 +14,7 @@ const AssetGallery = React.forwardRef(function AssetGallery(_ref, forwardedRef)
       viewMode,
       thumbnailMaxHeight,
       selectable,
+      customSelectedBorder,
       selectedAssetKeys,
       onSelectedChanged,
       softSelectable,
@@ -60,6 +61,7 @@ const AssetGallery = React.forwardRef(function AssetGallery(_ref, forwardedRef)
     displayIcon: displayIcon,
     thumbnailMaxHeight: thumbnailMaxHeight,
     selectable: selectable,
+    customSelectedBorder: customSelectedBorder,
     selectedAssetKeys: selectedAssetKeysInternalState,
     onAssetSelected: onSelected,
     onAssetUnselected: onUnselected,
@@ -78,6 +80,7 @@ AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
   viewMode: PropTypes.oneOf(['compact', 'grid']),
   thumbnailMaxHeight: PropTypes.number,
   selectable: PropTypes.bool,
+  customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
   selectedAssetKeys: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
   onSelectedChanged: PropTypes.func,
   softSelectable: PropTypes.bool,
@@ -90,6 +93,7 @@ AssetGallery.defaultProps = {
   viewMode: 'compact',
   thumbnailMaxHeight: 300,
   selectedAssetKeys: [],
+  customSelectedBorder: [],
   activeSummaryCard: false,
   displayIcon: ''
 };

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

@@ -1,6 +1,6 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from '../../../../node_modules/react/index.js';
-import useMergedRefs from '../../../../node_modules/@restart/hooks/esm/useMergedRefs.js';
+import useMergedRefs from '../../../../node_modules/@restart/hooks/lib/useMergedRefs.js';
 import { throttle } from 'lodash';
 import PropTypes from '../../../../node_modules/prop-types/index.js';
 import ResizeObserver from 'resize-observer-polyfill';
@@ -11,7 +11,7 @@ import AssetGalleryGridCard from './AssetGalleryGridCard/AssetGalleryGridCard.js
 import AssetGalleryCompactCard from './AssetGalleryCompactCard/AssetGalleryCompactCard.js';
 import { r as react } from '../../../../_virtual/index.js';
 
-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 = React.forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
   let {
       assets: assetsProp,
@@ -20,6 +20,7 @@ const AssetGalleryBase = React.forwardRef(function AssetGalleryBase(_ref, forwar
       viewMode,
       thumbnailMaxHeight,
       selectable,
+      customSelectedBorder,
       selectedAssetKeys,
       onAssetSelected,
       onAssetUnselected,
@@ -345,20 +346,21 @@ const AssetGalleryBase = React.forwardRef(function AssetGalleryBase(_ref, forwar
     extendedSelectMode: Boolean(selectedAssetKeys.length),
     onAssetSelected: onAssetSelected,
     onAssetUnselected: onAssetUnselected,
-    softSelected: softSelectedAssetKey === asset.key,
+    $softSelected: softSelectedAssetKey === asset.key,
     component: component
   }) : React.createElement(AssetGalleryCompactCard, {
     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
   }))))));
 });
@@ -369,6 +371,7 @@ AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
   viewMode: PropTypes.oneOf(['compact', 'grid']),
   thumbnailMaxHeight: PropTypes.number,
   selectable: PropTypes.bool,
+  customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
   selectedAssetKeys: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
   scrollElement: PropTypes.instanceOf(Element),
   onAssetSelected: PropTypes.func.isRequired,

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

@@ -5,10 +5,17 @@ let _ = t => t,
   _t,
   _t2,
   _t3;
-const AssetGalleryBase = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const AssetGalleryBase = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   position: relative;
 `));
-const GroupLabel = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+const GroupLabel = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   font-family: ${0};
   ${0}
   display: flex;
@@ -17,7 +24,9 @@ const GroupLabel = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   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.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+const AssetGalleryCardBase = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   position: absolute;
   top: 0;
   left: 0;

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

@@ -45,6 +45,7 @@ const AssetGalleryCompactCard = props => {
     selectable,
     hasHeightAndWidth,
     selected,
+    customSelectedBorder,
     extendedSelectMode,
     onAssetSelected,
     onAssetUnselected,
@@ -313,7 +314,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 React.createElement(AssetGalleryWrapper, {
@@ -343,7 +344,7 @@ const AssetGalleryCompactCard = props => {
     softSelected: softSelected,
     selected: selected
   }), (asset === null || asset === void 0 ? void 0 : asset.actions) && React.createElement(OverlayInfoTopActions, {
-    isOverlayHovered: isOverlayHovered
+    $isOverlayHovered: isOverlayHovered
   }, React.createElement(AssetActionsBase, {
     actions: asset.actions,
     asset: asset
@@ -361,7 +362,8 @@ const AssetGalleryCompactCard = props => {
     softSelected: softSelected
   }), selectable && React.createElement(OverlaySelected, {
     selected: selected,
-    softSelected: softSelected
+    softSelected: softSelected,
+    customSelectedBorder: customSelectedBorder
   }), isOpen && isOverlayHovered && isMounted && activeSummaryCard && !isAnySubActionsOpened && React.createElement("div", _extends({
     ref: refs.setFloating,
     style: floatingStyles
@@ -380,6 +382,7 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   hasHeightAndWidth: PropTypes.bool,
   selectable: PropTypes.bool,
   selected: PropTypes.bool,
+  customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
   extendedSelectMode: PropTypes.bool,
   onAssetSelected: PropTypes.func.isRequired,
   onAssetUnselected: PropTypes.func.isRequired,
@@ -388,7 +391,7 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   scrollPosition: PropTypes.number,
   collapseExtraInfo: PropTypes.bool,
   activeSummaryCard: PropTypes.bool,
-  displayIcon: PropTypes.oneOf(['versions', 'verifications', ''])
+  displayIcon: PropTypes.oneOf(['dynamic', 'versions', 'verifications', ''])
 } : {};
 var AssetGalleryCompactCard$1 = trackWindowScroll(React.memo(AssetGalleryCompactCard, (prevProps, nextProps) => {
   const reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth', 'collapseExtraInfo'];