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

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

@@ -21,6 +21,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -38,19 +40,26 @@ let _ = t => t,
   _t24,
   _t25,
   _t26,
-  _t27,
-  _t28,
-  _t29;
-const AssetGalleryWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  _t27;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const AssetGalleryWrapper = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   ${0};
 `), props => props.disabled && styled.css(_t2 || (_t2 = _`
       cursor: not-allowed;
     `)));
-const Reference = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+const Reference = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
   width: 100%;
   height: 100%;
 `));
-const AssetGalleryCompactCard = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+const AssetGalleryCompactCard = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
   display: block;
   height: 100%;
   padding-left: ${0}px;
@@ -106,25 +115,31 @@ const Figure = styled__default["default"].figure(_t7 || (_t7 = _`
     width: 100%;
     ${0}
   }
-`), props => props.hasHeightAndWidth ? styled.css(_t8 || (_t8 = _`
+`), props => props.$hasHeightAndWidth ? styled.css(_t8 || (_t8 = _`
             object-fit: cover;
           `)) : styled.css(_t9 || (_t9 = _`
             object-fit: contain;
           `)));
-const FigureOverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
+const FigureOverlayBackdrop = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
+const Overlay = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t1 || (_t1 = _`
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 `));
-const OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t12 || (_t12 = _`
+const OverlayBackdrop = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -138,17 +153,19 @@ const OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyD
     ${0}:hover & {
     opacity: 1;
   }
-`), props => !props.selected ? styled.css(_t13 || (_t13 = _`
+`), props => !props.selected ? styled.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) && styled.css(_t14 || (_t14 = _`
+        `)) : null, props => (props.selected || props.$softSelected) && styled.css(_t12 || (_t12 = _`
       opacity: 1;
     `)), Overlay);
-const OverlayInfo = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t15 || (_t15 = _`
+const OverlayInfo = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t13 || (_t13 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -164,7 +181,9 @@ const OverlayInfo = styled__default["default"].div.attrs(defaultTheme.applyDefau
     word-wrap: break-word;
   }
 `), props => props.theme.getColor('gray-100'));
-const OverlayCompleted = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t16 || (_t16 = _`
+const OverlayCompleted = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t14 || (_t14 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -175,10 +194,12 @@ const OverlayCompleted = styled__default["default"].div.attrs(defaultTheme.apply
   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'), polished.rgba(props.theme.getColor('emerald-500'), 0.7));
 });
-const OverlayHasError = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t17 || (_t17 = _`
+const OverlayHasError = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t15 || (_t15 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -189,10 +210,12 @@ const OverlayHasError = styled__default["default"].div.attrs(defaultTheme.applyD
   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'), polished.rgba(props.theme.getColor('red-500'), 0.7));
 });
-const OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
+const OverlaySelected = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t16 || (_t16 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -205,15 +228,21 @@ const OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyD
 
   ${0};
 `), props => {
-  if (props.softSelected) {
+  if (props.$softSelected) {
     return props.theme.themeProp('border-color', polished.rgba(props.theme.getColor('gray-100'), 0.5), polished.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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t19 || (_t19 = _`
+const OverlayInfoTop = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t17 || (_t17 = _`
   position: absolute;
   left: 0;
   right: 0;
@@ -221,7 +250,9 @@ const OverlayInfoTop = styled__default["default"].div.attrs(defaultTheme.applyDe
   padding: 8px;
   display: flex;
 `));
-const OverlayInfoTopActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t20 || (_t20 = _`
+const OverlayInfoTopActions = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
   position: absolute;
   top: 0;
   right: 0;
@@ -234,16 +265,20 @@ const OverlayInfoTopActions = styled__default["default"].div.attrs(defaultTheme.
   ${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__default["default"].div.attrs(defaultTheme.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__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t22 || (_t22 = _`
+`), props => props !== null && props !== void 0 && props.$collapseExtraInfo ? 'none' : 'block', Overlay);
+const OverlayInfoTopWarning = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t20 || (_t20 = _`
   margin-left: auto;
   height: 24px;
   width: 24px;
@@ -262,7 +297,9 @@ const OverlayInfoTopWarning = styled__default["default"].div.attrs(defaultTheme.
     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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
+const OverlayInfoBottom = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t21 || (_t21 = _`
   position: absolute;
   left: 0;
   right: 0;
@@ -270,7 +307,9 @@ const OverlayInfoBottom = styled__default["default"].div.attrs(defaultTheme.appl
   padding: 8px;
   display: flex;
 `));
-const OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t24 || (_t24 = _`
+const OverlayInfoBottomSelectButton = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t22 || (_t22 = _`
   opacity: ${0};
   flex-shrink: 0;
   cursor: pointer;
@@ -288,7 +327,9 @@ const OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defau
     opacity: 1;
   }
 `), props => props.selected ? 1 : 0, props => props.selected ? 1 : 0.5, Overlay);
-const OverlayInfoBottomMediaIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t25 || (_t25 = _`
+const OverlayInfoBottomMediaIcon = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
   margin-left: auto;
   opacity: 1;
 
@@ -296,7 +337,9 @@ const OverlayInfoBottomMediaIcon = styled__default["default"].div.attrs(defaultT
     opacity: 0;
   }
 `), Overlay);
-const ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t26 || (_t26 = _`
+const ConsumerDefinedOverlay = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t24 || (_t24 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -304,15 +347,19 @@ const ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme
   right: 0;
   pointer-events: none;
 `));
-styled__default["default"].div(_t27 || (_t27 = _`
+styled__default["default"].div(_t25 || (_t25 = _`
   margin: 4px;
 `));
-styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t28 || (_t28 = _`
+styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.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__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_t29 || (_t29 = _`
+const StyledFloatingArrow = styled__default["default"](react.FloatingArrow).withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t27 || (_t27 = _`
   ${0}
 `), props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white')));
 

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

@@ -346,7 +346,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 index["default"].createElement(AssetGalleryGridCard_styled.AssetGalleryWrapper, {

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

@@ -20,6 +20,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -34,9 +36,7 @@ let _ = t => t,
   _t21,
   _t22,
   _t23,
-  _t24,
-  _t25,
-  _t26;
+  _t24;
 const AssetGalleryWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   ${0};
 `), props => props.disabled && styled.css(_t2 || (_t2 = _`
@@ -74,7 +74,7 @@ const AssetGalleryGridCard = styled__default["default"].div.attrs(defaultTheme.a
     `)), props => props.extendedSelectMode && styled.css(_t5 || (_t5 = _`
       cursor: pointer;
     `)), props => {
-  if (props.softSelected) {
+  if (props.$softSelected) {
     return props.theme.themeProp('border-color', polished.rgba(props.theme.getColor('gray-100'), 0.5), polished.rgba(props.theme.getColor('gray-700'), 0.5));
   }
   if (props.selected) {
@@ -95,7 +95,7 @@ const ContentWrapper = styled__default["default"].div.attrs(defaultTheme.applyDe
   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__default["default"].div(_t7 || (_t7 = _`
   display: flex;
   flex-direction: column;
@@ -146,23 +146,23 @@ const Figure = styled__default["default"].figure(_t8 || (_t8 = _`
   }
 `), props => props.hasHeightAndWidth ? styled.css(_t9 || (_t9 = _`
             object-fit: cover;
-          `)) : styled.css(_t10 || (_t10 = _`
+          `)) : styled.css(_t0 || (_t0 = _`
             object-fit: contain;
           `)));
-const FigureOverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
+const FigureOverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t12 || (_t12 = _`
+const Overlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 `));
-const OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t13 || (_t13 = _`
+const OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -181,17 +181,17 @@ const OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyD
   ${0}:hover & {
     opacity: 1;
   }
-`), props => !props.selected ? styled.css(_t14 || (_t14 = _`
+`), props => !props.selected ? styled.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) && styled.css(_t15 || (_t15 = _`
+        `)) : null, props => (props.selected || props.$softSelected) && styled.css(_t13 || (_t13 = _`
       opacity: 1;
     `)), Overlay, AssetGalleryGridCard);
-const OverlayInfo = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t16 || (_t16 = _`
+const OverlayInfo = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t14 || (_t14 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -203,7 +203,7 @@ const OverlayInfo = styled__default["default"].div.attrs(defaultTheme.applyDefau
   padding: 15px 12px 10px;
   color: ${0};
 `), props => props.theme.getColor('gray-100'));
-const OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t17 || (_t17 = _`
+const OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t15 || (_t15 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -211,7 +211,7 @@ const OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyD
   right: 0;
   pointer-events: none;
 `));
-const OverlayInfoTop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
+const OverlayInfoTop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t16 || (_t16 = _`
   position: absolute;
   left: 0;
   right: 0;
@@ -219,14 +219,14 @@ const OverlayInfoTop = styled__default["default"].div.attrs(defaultTheme.applyDe
   padding: 8px;
   display: flex;
 `));
-const OverlayInfoTopVersions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t19 || (_t19 = _`
+const OverlayInfoTopVersions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t17 || (_t17 = _`
   opacity: 1;
 
   ${0}:hover & {
     opacity: 0;
   }
 `), AssetGalleryGridCard);
-const OverlayInfoTopWarning = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t20 || (_t20 = _`
+const OverlayInfoTopWarning = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
   margin-left: auto;
   height: 24px;
   width: 24px;
@@ -245,7 +245,7 @@ const OverlayInfoTopWarning = styled__default["default"].div.attrs(defaultTheme.
     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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t21 || (_t21 = _`
+const OverlayInfoTopActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t19 || (_t19 = _`
   position: absolute;
   top: 0;
   right: 0;
@@ -259,7 +259,7 @@ const OverlayInfoTopActions = styled__default["default"].div.attrs(defaultTheme.
 
   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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t22 || (_t22 = _`
+const OverlayInfoBottom = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t20 || (_t20 = _`
   position: absolute;
   left: 0;
   right: 0;
@@ -267,7 +267,7 @@ const OverlayInfoBottom = styled__default["default"].div.attrs(defaultTheme.appl
   padding: 8px;
   display: flex;
 `));
-const OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
+const OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t21 || (_t21 = _`
   opacity: ${0};
   flex-shrink: 0;
   cursor: pointer;
@@ -288,14 +288,14 @@ const OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defau
     opacity: 1;
   }
 `), props => props.selected ? 1 : 0, props => props.selected ? 1 : 0.5, Overlay, AssetGalleryGridCard);
-const OverlayInfoBottomMediaIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t24 || (_t24 = _`
+const OverlayInfoBottomMediaIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t22 || (_t22 = _`
   margin-left: auto;
   opacity: 1;
   ${0}:hover & {
     opacity: 0;
   }
 `), AssetGalleryGridCard);
-const ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t25 || (_t25 = _`
+const ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -303,7 +303,7 @@ const ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme
   right: 0;
   pointer-events: none;
 `));
-const Fragment = styled__default["default"].div(_t26 || (_t26 = _`
+const Fragment = styled__default["default"].div(_t24 || (_t24 = _`
   margin: 4px;
 `));
 

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

@@ -24,8 +24,8 @@ const AssetPreviewTopBar = index["default"].forwardRef(function AssetPreviewTopB
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return index["default"].createElement(AssetPreviewTopBar_styled.AssetPreviewTopBar, _rollupPluginBabelHelpers["extends"]({
     ref: forwardedRef,
-    shadow: shadow,
-    border: border,
+    $shadow: shadow,
+    $border: border,
     disabled: disabled
   }, props), index["default"].createElement(AssetPreviewTopBar_styled.BackButtonContainer, {
     onClick: onBackButtonClick,

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

@@ -17,7 +17,12 @@ let _ = t => t,
   _t5,
   _t6,
   _t7;
-const AssetPreviewTopBar = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const AssetPreviewTopBar = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   box-sizing: border-box;
   align-items: center;
   border-bottom: ${0};
@@ -34,10 +39,12 @@ const AssetPreviewTopBar = styled__default["default"].div.attrs(defaultTheme.app
   ${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 && styled.css(_t2 || (_t2 = _`
-      cursor: not-allowed;
-    `)));
-const BackButtonContainer = styled__default["default"].a.attrs(defaultTheme.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 && styled.css(_t2 || (_t2 = _`
+          cursor: not-allowed;
+        `)));
+const BackButtonContainer = styled__default["default"].a.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
   align-items: center;
   display: flex;
   font-size: 1.125rem;
@@ -73,13 +80,17 @@ const BackHoverEffect = styled__default["default"].div(_t5 || (_t5 = _`
     transform: translateX(-2px);
   }
 `));
-const LeftText = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+const LeftText = styled__default["default"].span.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+const ButtonsContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
   align-items: center;
   display: flex;
   margin-left: auto;

package/cjs/components/widgets/ContextMenu/ContextMenu.js

@@ -13,9 +13,10 @@ const ContextMenu = index["default"].forwardRef(function ContextMenu(_ref, forwa
       children
     } = _ref,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== 'sublevel'));
   return index["default"].createElement(ContextMenu_styled.ContextMenu, _rollupPluginBabelHelpers["extends"]({
     ref: forwardedRef
-  }, props, {
+  }, filteredProps, {
     role: "menu"
   }), children);
 });

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

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

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

@@ -21,11 +21,11 @@ const ContextMenuItem = index["default"].forwardRef(function ContextMenuItem(_re
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return index["default"].createElement(ContextMenuItem_styled.ContextMenuItem, _rollupPluginBabelHelpers["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/cjs/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js

@@ -16,7 +16,12 @@ let _ = t => t,
   _t4,
   _t5,
   _t6;
-const ContextMenuItem = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const ContextMenuItem = styled__default["default"].span.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   align-items: center;
   cursor: pointer;
   display: flex;
@@ -52,18 +57,20 @@ const ContextMenuItem = styled__default["default"].span.attrs(defaultTheme.apply
   ${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 && styled.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 && styled.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] && styled.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] && styled.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] && styled.css(_t4 || (_t4 = _`
+    `), props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])), props => props.$hoverBackgroundColors && props.$hoverBackgroundColors[0] && props.$hoverBackgroundColors[1] && styled.css(_t4 || (_t4 = _`
       &&:hover {
         ${0}
       }
-    `), props => props.theme.themeProp('background-color', props.hoverBackgroundColors[0], props.hoverBackgroundColors[1])));
-const IconContainer = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+    `), props => props.theme.themeProp('background-color', props.$hoverBackgroundColors[0], props.$hoverBackgroundColors[1])));
+const IconContainer = styled__default["default"].span.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
   align-items: center;
   display: flex;
   height: fit-content;
@@ -74,7 +81,9 @@ const IconContainer = styled__default["default"].span.attrs(defaultTheme.applyDe
     height: 12px;
   }
 `));
-const SublevelIconContainer = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+const SublevelIconContainer = styled__default["default"].span.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
   align-items: center;
   display: flex;
   height: fit-content;

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

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