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

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

@@ -13,6 +13,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -30,19 +32,26 @@ let _ = t => t,
   _t24,
   _t25,
   _t26,
-  _t27,
-  _t28,
-  _t29;
-const AssetGalleryWrapper = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  _t27;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const AssetGalleryWrapper = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   ${0};
 `), props => props.disabled && css(_t2 || (_t2 = _`
       cursor: not-allowed;
     `)));
-const Reference = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+const Reference = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   width: 100%;
   height: 100%;
 `));
-const AssetGalleryCompactCard = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
+const AssetGalleryCompactCard = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t4 || (_t4 = _`
   display: block;
   height: 100%;
   padding-left: ${0}px;
@@ -98,25 +107,31 @@ const Figure = styled.figure(_t7 || (_t7 = _`
     width: 100%;
     ${0}
   }
-`), props => props.hasHeightAndWidth ? css(_t8 || (_t8 = _`
+`), props => props.$hasHeightAndWidth ? css(_t8 || (_t8 = _`
             object-fit: cover;
           `)) : css(_t9 || (_t9 = _`
             object-fit: contain;
           `)));
-const FigureOverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
+const FigureOverlayBackdrop = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t0 || (_t0 = _`
   position: absolute;
   inset: 0;
   opacity: ${0};
   background-color: ${0};
 `), props => props.selected ? 0.6 : 0, props => props.selected ? '#ACCEF7' : 'transparent');
-const Overlay = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
+const Overlay = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t1 || (_t1 = _`
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 `));
-const OverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t12 || (_t12 = _`
+const OverlayBackdrop = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t10 || (_t10 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -130,17 +145,19 @@ const OverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t12 || (_t12 = _`
     ${0}:hover & {
     opacity: 1;
   }
-`), props => !props.selected ? css(_t13 || (_t13 = _`
+`), props => !props.selected ? css(_t11 || (_t11 = _`
           background: radial-gradient(
             ellipse at center,
             rgba(0, 0, 0, 0.3) 27%,
             rgba(0, 0, 0, 0.5) 60%,
             rgba(0, 0, 0, 0.7) 90%
           );
-        `)) : null, props => (props.selected || props.softSelected) && css(_t14 || (_t14 = _`
+        `)) : null, props => (props.selected || props.$softSelected) && css(_t12 || (_t12 = _`
       opacity: 1;
     `)), Overlay);
-const OverlayInfo = styled.div.attrs(applyDefaultTheme)(_t15 || (_t15 = _`
+const OverlayInfo = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t13 || (_t13 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -156,7 +173,9 @@ const OverlayInfo = styled.div.attrs(applyDefaultTheme)(_t15 || (_t15 = _`
     word-wrap: break-word;
   }
 `), props => props.theme.getColor('gray-100'));
-const OverlayCompleted = styled.div.attrs(applyDefaultTheme)(_t16 || (_t16 = _`
+const OverlayCompleted = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t14 || (_t14 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -167,10 +186,12 @@ const OverlayCompleted = styled.div.attrs(applyDefaultTheme)(_t16 || (_t16 = _`
   border: 3px solid;
   ${0};
 `), props => {
-  if (props.softSelected) return null;
+  if (props.$softSelected) return null;
   return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'), rgba(props.theme.getColor('emerald-500'), 0.7));
 });
-const OverlayHasError = styled.div.attrs(applyDefaultTheme)(_t17 || (_t17 = _`
+const OverlayHasError = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t15 || (_t15 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -181,10 +202,12 @@ const OverlayHasError = styled.div.attrs(applyDefaultTheme)(_t17 || (_t17 = _`
   border: 3px solid;
   ${0}
 `), props => {
-  if (props.softSelected) return null;
+  if (props.$softSelected) return null;
   return props.theme.themeProp('border-color', props.theme.getColor('red-600'), rgba(props.theme.getColor('red-500'), 0.7));
 });
-const OverlaySelected = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
+const OverlaySelected = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t16 || (_t16 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -197,15 +220,21 @@ const OverlaySelected = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
 
   ${0};
 `), props => {
-  if (props.softSelected) {
+  if (props.$softSelected) {
     return props.theme.themeProp('border-color', rgba(props.theme.getColor('gray-100'), 0.5), rgba(props.theme.getColor('gray-700'), 0.5));
   }
   if (props.selected) {
-    return props.theme.themeProp('border-color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
+    if (props.customSelectedBorder) {
+      return props.theme.themeProp('border-color', props.customSelectedBorder[0], props.customSelectedBorder[1]);
+    } else {
+      return props.theme.themeProp('border-color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
+    }
   }
   return props.theme.themeProp('border-color', 'transparent', 'transparent');
 });
-const OverlayInfoTop = styled.div.attrs(applyDefaultTheme)(_t19 || (_t19 = _`
+const OverlayInfoTop = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t17 || (_t17 = _`
   position: absolute;
   left: 0;
   right: 0;
@@ -213,7 +242,9 @@ const OverlayInfoTop = styled.div.attrs(applyDefaultTheme)(_t19 || (_t19 = _`
   padding: 8px;
   display: flex;
 `));
-const OverlayInfoTopActions = styled.div.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
+const OverlayInfoTopActions = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t18 || (_t18 = _`
   position: absolute;
   top: 0;
   right: 0;
@@ -226,16 +257,20 @@ const OverlayInfoTopActions = styled.div.attrs(applyDefaultTheme)(_t20 || (_t20
   ${0}
 
   opacity: ${0};
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.isOverlayHovered ? 1 : 0);
-const OverlayInfoTopLeft = styled.div.attrs(applyDefaultTheme)(_t21 || (_t21 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.$isOverlayHovered ? 1 : 0);
+const OverlayInfoTopLeft = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t19 || (_t19 = _`
   opacity: 1;
   display: ${0};
 
   ${0}:hover & {
     opacity: 0;
   }
-`), props => props !== null && props !== void 0 && props.collapseExtraInfo ? 'none' : 'block', Overlay);
-const OverlayInfoTopWarning = styled.div.attrs(applyDefaultTheme)(_t22 || (_t22 = _`
+`), props => props !== null && props !== void 0 && props.$collapseExtraInfo ? 'none' : 'block', Overlay);
+const OverlayInfoTopWarning = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t20 || (_t20 = _`
   margin-left: auto;
   height: 24px;
   width: 24px;
@@ -254,7 +289,9 @@ const OverlayInfoTopWarning = styled.div.attrs(applyDefaultTheme)(_t22 || (_t22
     opacity: 0;
   }
 `), props => props.type === 'error' ? 0 : '3px 4px', props => props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100'), props => props.type === 'error' ? props.theme.getColor('gray-100') : props.theme.getColor('gray-700'), Overlay);
-const OverlayInfoBottom = styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
+const OverlayInfoBottom = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t21 || (_t21 = _`
   position: absolute;
   left: 0;
   right: 0;
@@ -262,7 +299,9 @@ const OverlayInfoBottom = styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
   padding: 8px;
   display: flex;
 `));
-const OverlayInfoBottomSelectButton = styled.div.attrs(applyDefaultTheme)(_t24 || (_t24 = _`
+const OverlayInfoBottomSelectButton = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t22 || (_t22 = _`
   opacity: ${0};
   flex-shrink: 0;
   cursor: pointer;
@@ -280,7 +319,9 @@ const OverlayInfoBottomSelectButton = styled.div.attrs(applyDefaultTheme)(_t24 |
     opacity: 1;
   }
 `), props => props.selected ? 1 : 0, props => props.selected ? 1 : 0.5, Overlay);
-const OverlayInfoBottomMediaIcon = styled.div.attrs(applyDefaultTheme)(_t25 || (_t25 = _`
+const OverlayInfoBottomMediaIcon = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t23 || (_t23 = _`
   margin-left: auto;
   opacity: 1;
 
@@ -288,7 +329,9 @@ const OverlayInfoBottomMediaIcon = styled.div.attrs(applyDefaultTheme)(_t25 || (
     opacity: 0;
   }
 `), Overlay);
-const ConsumerDefinedOverlay = styled.div.attrs(applyDefaultTheme)(_t26 || (_t26 = _`
+const ConsumerDefinedOverlay = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t24 || (_t24 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -296,15 +339,19 @@ const ConsumerDefinedOverlay = styled.div.attrs(applyDefaultTheme)(_t26 || (_t26
   right: 0;
   pointer-events: none;
 `));
-styled.div(_t27 || (_t27 = _`
+styled.div(_t25 || (_t25 = _`
   margin: 4px;
 `));
-styled.div.attrs(applyDefaultTheme)(_t28 || (_t28 = _`
+styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t26 || (_t26 = _`
   ${0}
   padding: 4px 8px;
   border-radius: 4px;
 `), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')));
-const StyledFloatingArrow = styled(FloatingArrow).attrs(applyDefaultTheme)(_t29 || (_t29 = _`
+const StyledFloatingArrow = styled(FloatingArrow).withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t27 || (_t27 = _`
   ${0}
 `), props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white')));
 

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

@@ -342,7 +342,7 @@ const AssetGalleryGridCard = props => {
       instructionsType: 'warning',
       footerLeft: (asset === null || asset === void 0 || (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.footerLeft) || '',
       footerRight: (asset === null || asset === void 0 || (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.footerRight) || '',
-      compact: false
+      view: 'grid'
     });
   }, [asset]);
   return React.createElement(AssetGalleryWrapper, {

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

@@ -12,6 +12,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -26,9 +28,7 @@ let _ = t => t,
   _t21,
   _t22,
   _t23,
-  _t24,
-  _t25,
-  _t26;
+  _t24;
 const AssetGalleryWrapper = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
   ${0};
 `), props => props.disabled && css(_t2 || (_t2 = _`
@@ -66,7 +66,7 @@ const AssetGalleryGridCard = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _
     `)), props => props.extendedSelectMode && css(_t5 || (_t5 = _`
       cursor: pointer;
     `)), props => {
-  if (props.softSelected) {
+  if (props.$softSelected) {
     return props.theme.themeProp('border-color', rgba(props.theme.getColor('gray-100'), 0.5), rgba(props.theme.getColor('gray-700'), 0.5));
   }
   if (props.selected) {
@@ -87,7 +87,7 @@ const ContentWrapper = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   padding: ${0}px;
   padding-top: 35px;
   height: 100%;
-`), props => props.selected || props.softSelected ? 4 : 0);
+`), props => props.selected || props.$softSelected ? 4 : 0);
 const Asset = styled.div(_t7 || (_t7 = _`
   display: flex;
   flex-direction: column;
@@ -138,23 +138,23 @@ const Figure = styled.figure(_t8 || (_t8 = _`
   }
 `), props => props.hasHeightAndWidth ? css(_t9 || (_t9 = _`
             object-fit: cover;
-          `)) : css(_t10 || (_t10 = _`
+          `)) : css(_t0 || (_t0 = _`
             object-fit: contain;
           `)));
-const FigureOverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
+const FigureOverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t1 || (_t1 = _`
   position: absolute;
   inset: 0;
   opacity: ${0};
   background-color: ${0};
 `), props => props.selected ? 0.6 : 0, props => props.selected ? '#ACCEF7' : 'transparent');
-const Overlay = styled.div.attrs(applyDefaultTheme)(_t12 || (_t12 = _`
+const Overlay = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 `));
-const OverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t13 || (_t13 = _`
+const OverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -173,17 +173,17 @@ const OverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t13 || (_t13 = _`
   ${0}:hover & {
     opacity: 1;
   }
-`), props => !props.selected ? css(_t14 || (_t14 = _`
+`), props => !props.selected ? css(_t12 || (_t12 = _`
           background: radial-gradient(
             ellipse at center,
             rgba(0, 0, 0, 0.3) 27%,
             rgba(0, 0, 0, 0.5) 60%,
             rgba(0, 0, 0, 0.7) 90%
           );
-        `)) : null, props => (props.selected || props.softSelected) && css(_t15 || (_t15 = _`
+        `)) : null, props => (props.selected || props.$softSelected) && css(_t13 || (_t13 = _`
       opacity: 1;
     `)), Overlay, AssetGalleryGridCard);
-const OverlayInfo = styled.div.attrs(applyDefaultTheme)(_t16 || (_t16 = _`
+const OverlayInfo = styled.div.attrs(applyDefaultTheme)(_t14 || (_t14 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -195,7 +195,7 @@ const OverlayInfo = styled.div.attrs(applyDefaultTheme)(_t16 || (_t16 = _`
   padding: 15px 12px 10px;
   color: ${0};
 `), props => props.theme.getColor('gray-100'));
-const OverlaySelected = styled.div.attrs(applyDefaultTheme)(_t17 || (_t17 = _`
+const OverlaySelected = styled.div.attrs(applyDefaultTheme)(_t15 || (_t15 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -203,7 +203,7 @@ const OverlaySelected = styled.div.attrs(applyDefaultTheme)(_t17 || (_t17 = _`
   right: 0;
   pointer-events: none;
 `));
-const OverlayInfoTop = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
+const OverlayInfoTop = styled.div.attrs(applyDefaultTheme)(_t16 || (_t16 = _`
   position: absolute;
   left: 0;
   right: 0;
@@ -211,14 +211,14 @@ const OverlayInfoTop = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
   padding: 8px;
   display: flex;
 `));
-const OverlayInfoTopVersions = styled.div.attrs(applyDefaultTheme)(_t19 || (_t19 = _`
+const OverlayInfoTopVersions = styled.div.attrs(applyDefaultTheme)(_t17 || (_t17 = _`
   opacity: 1;
 
   ${0}:hover & {
     opacity: 0;
   }
 `), AssetGalleryGridCard);
-const OverlayInfoTopWarning = styled.div.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
+const OverlayInfoTopWarning = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
   margin-left: auto;
   height: 24px;
   width: 24px;
@@ -237,7 +237,7 @@ const OverlayInfoTopWarning = styled.div.attrs(applyDefaultTheme)(_t20 || (_t20
     opacity: 0;
   }
 `), props => props.type === 'error' ? 0 : '4px', props => props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100'), props => props.type === 'error' ? props.theme.getColor('gray-100') : props.theme.getColor('gray-700'), AssetGalleryGridCard);
-const OverlayInfoTopActions = styled.div.attrs(applyDefaultTheme)(_t21 || (_t21 = _`
+const OverlayInfoTopActions = styled.div.attrs(applyDefaultTheme)(_t19 || (_t19 = _`
   position: absolute;
   top: 0;
   right: 0;
@@ -251,7 +251,7 @@ const OverlayInfoTopActions = styled.div.attrs(applyDefaultTheme)(_t21 || (_t21
 
   opacity: ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.isCardHovered ? 1 : 0);
-const OverlayInfoBottom = styled.div.attrs(applyDefaultTheme)(_t22 || (_t22 = _`
+const OverlayInfoBottom = styled.div.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
   position: absolute;
   left: 0;
   right: 0;
@@ -259,7 +259,7 @@ const OverlayInfoBottom = styled.div.attrs(applyDefaultTheme)(_t22 || (_t22 = _`
   padding: 8px;
   display: flex;
 `));
-const OverlayInfoBottomSelectButton = styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
+const OverlayInfoBottomSelectButton = styled.div.attrs(applyDefaultTheme)(_t21 || (_t21 = _`
   opacity: ${0};
   flex-shrink: 0;
   cursor: pointer;
@@ -280,14 +280,14 @@ const OverlayInfoBottomSelectButton = styled.div.attrs(applyDefaultTheme)(_t23 |
     opacity: 1;
   }
 `), props => props.selected ? 1 : 0, props => props.selected ? 1 : 0.5, Overlay, AssetGalleryGridCard);
-const OverlayInfoBottomMediaIcon = styled.div.attrs(applyDefaultTheme)(_t24 || (_t24 = _`
+const OverlayInfoBottomMediaIcon = styled.div.attrs(applyDefaultTheme)(_t22 || (_t22 = _`
   margin-left: auto;
   opacity: 1;
   ${0}:hover & {
     opacity: 0;
   }
 `), AssetGalleryGridCard);
-const ConsumerDefinedOverlay = styled.div.attrs(applyDefaultTheme)(_t25 || (_t25 = _`
+const ConsumerDefinedOverlay = styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -295,7 +295,7 @@ const ConsumerDefinedOverlay = styled.div.attrs(applyDefaultTheme)(_t25 || (_t25
   right: 0;
   pointer-events: none;
 `));
-const Fragment = styled.div(_t26 || (_t26 = _`
+const Fragment = styled.div(_t24 || (_t24 = _`
   margin: 4px;
 `));
 

package/esm/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js

@@ -20,8 +20,8 @@ const AssetPreviewTopBar = React.forwardRef(function AssetPreviewTopBar(_ref, fo
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(AssetPreviewTopBar$2, _extends({
     ref: forwardedRef,
-    shadow: shadow,
-    border: border,
+    $shadow: shadow,
+    $border: border,
     disabled: disabled
   }, props), React.createElement(BackButtonContainer, {
     onClick: onBackButtonClick,

package/esm/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.js

@@ -9,7 +9,12 @@ let _ = t => t,
   _t5,
   _t6,
   _t7;
-const AssetPreviewTopBar = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const AssetPreviewTopBar = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   box-sizing: border-box;
   align-items: center;
   border-bottom: ${0};
@@ -26,10 +31,12 @@ const AssetPreviewTopBar = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
   ${0}
 
       ${0}
-`), props => props.border ? `1px solid` : `none`, props => props.theme.primaryFontFamily, props => props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200')), props => props.shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9'), props => props.disabled && css(_t2 || (_t2 = _`
-      cursor: not-allowed;
-    `)));
-const BackButtonContainer = styled.a.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+`), props => props.$border ? `1px solid` : `none`, props => props.theme.primaryFontFamily, props => props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200')), props => props.$shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9'), props => props.disabled && css(_t2 || (_t2 = _`
+          cursor: not-allowed;
+        `)));
+const BackButtonContainer = styled.a.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   align-items: center;
   display: flex;
   font-size: 1.125rem;
@@ -65,13 +72,17 @@ const BackHoverEffect = styled.div(_t5 || (_t5 = _`
     transform: translateX(-2px);
   }
 `));
-const LeftText = styled.span.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+const LeftText = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   font-size: 1.125rem;
   margin-left: 16px;
 
   ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')));
-const ButtonsContainer = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+const ButtonsContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t7 || (_t7 = _`
   align-items: center;
   display: flex;
   margin-left: auto;

package/esm/components/widgets/ContextMenu/ContextMenu.js

@@ -9,9 +9,10 @@ const ContextMenu = React.forwardRef(function ContextMenu(_ref, forwardedRef) {
       children
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== 'sublevel'));
   return React.createElement(ContextMenu$2, _extends({
     ref: forwardedRef
-  }, props, {
+  }, filteredProps, {
     role: "menu"
   }), children);
 });

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

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

package/esm/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js

@@ -17,11 +17,11 @@ const ContextMenuItem = React.forwardRef(function ContextMenuItem(_ref, forwarde
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(ContextMenuItem$2, _extends({
     ref: forwardedRef,
-    icon: icon,
+    $icon: icon,
     onClick: onClickEffect,
-    hoverColors: hoverColors,
-    hoverBackgroundColors: hoverBackgroundColors,
-    opensSublevel: opensSublevel,
+    $hoverColors: hoverColors,
+    $hoverBackgroundColors: hoverBackgroundColors,
+    $openssublevel: opensSublevel,
     className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'
   }, props, {
     role: "menuitem"

package/esm/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js

@@ -8,7 +8,12 @@ let _ = t => t,
   _t4,
   _t5,
   _t6;
-const ContextMenuItem = styled.span.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const ContextMenuItem = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   align-items: center;
   cursor: pointer;
   display: flex;
@@ -44,18 +49,20 @@ const ContextMenuItem = styled.span.attrs(applyDefaultTheme)(_t || (_t = _`
   ${0}
 
   ${0}
-`), props => props.theme.primaryFontFamily, props => props.opensSublevel ? '0 8px' : '0 28px 0 8px', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')), props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE'), props => !props.icon && css(_t2 || (_t2 = _`
+`), props => props.theme.primaryFontFamily, props => props.$openssublevel ? '0 8px' : '0 28px 0 8px', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')), props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE'), props => !props.$icon && css(_t2 || (_t2 = _`
       padding-left: 28px;
-    `)), props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')), props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')), props => props.hoverColors && props.hoverColors[0] && props.hoverColors[1] && css(_t3 || (_t3 = _`
+    `)), props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')), props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')), props => props.$openssublevelhoverColors && props.$hoverColors[0] && props.$hoverColors[1] && css(_t3 || (_t3 = _`
       &&:hover {
         ${0}
       }
-    `), props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])), props => props.hoverBackgroundColors && props.hoverBackgroundColors[0] && props.hoverBackgroundColors[1] && css(_t4 || (_t4 = _`
+    `), props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])), props => props.$hoverBackgroundColors && props.$hoverBackgroundColors[0] && props.$hoverBackgroundColors[1] && css(_t4 || (_t4 = _`
       &&:hover {
         ${0}
       }
-    `), props => props.theme.themeProp('background-color', props.hoverBackgroundColors[0], props.hoverBackgroundColors[1])));
-const IconContainer = styled.span.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
+    `), props => props.theme.themeProp('background-color', props.$hoverBackgroundColors[0], props.$hoverBackgroundColors[1])));
+const IconContainer = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t5 || (_t5 = _`
   align-items: center;
   display: flex;
   height: fit-content;
@@ -66,7 +73,9 @@ const IconContainer = styled.span.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
     height: 12px;
   }
 `));
-const SublevelIconContainer = styled.span.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+const SublevelIconContainer = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   align-items: center;
   display: flex;
   height: fit-content;

package/esm/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js

@@ -3,7 +3,12 @@ import { applyDefaultTheme } from '../../../../utils/defaultTheme.js';
 
 let _ = t => t,
   _t;
-const ContextMenuItemsGroup = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const ContextMenuItemsGroup = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   :not(:last-child) {
     border-bottom: 1px solid;
 

package/esm/components/widgets/InfoCard/InfoCard.js

@@ -2,6 +2,7 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import React from '../../../node_modules/react/index.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { Container, MetricsContainer, IconTotalContainer, IconContainer, Total, Label, Link, ButtonLink, StyledArrowIcon } from './InfoCard.styled.js';
+import { r as react } from '../../../_virtual/index.js';
 
 const _excluded = ["icon", "total", "label", "linkLabel", "onClick", "height"];
 const InfoCard = React.forwardRef(function InfoCard(_ref, forwardedRef) {
@@ -14,13 +15,20 @@ const InfoCard = React.forwardRef(function InfoCard(_ref, forwardedRef) {
       height
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const [isLinkHovered, setIsLinkHovered] = react.exports.useState(false);
   const handleLinkClick = e => onClick(e);
   return React.createElement(Container, _extends({
     height: height,
     ref: forwardedRef
   }, props), React.createElement(MetricsContainer, null, React.createElement(IconTotalContainer, null, React.createElement(IconContainer, null, icon), React.createElement(Total, null, total)), React.createElement(Label, null, label)), linkLabel && onClick && React.createElement(Link, {
-    onClick: handleLinkClick
-  }, React.createElement(ButtonLink, null, linkLabel), React.createElement(StyledArrowIcon, null)));
+    onClick: handleLinkClick,
+    onMouseEnter: () => setIsLinkHovered(true),
+    onMouseLeave: () => setIsLinkHovered(false)
+  }, React.createElement(ButtonLink, {
+    $isHovered: isLinkHovered
+  }, linkLabel), React.createElement(StyledArrowIcon, {
+    $isHovered: isLinkHovered
+  })));
 });
 InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
   icon: PropTypes.element.isRequired,