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

package/cjs/components/widgets/InfoCard/InfoCard.js

@@ -4,8 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var index = require('../../../node_modules/react/index.js');
-var index$1 = require('../../../node_modules/prop-types/index.js');
+var index$2 = require('../../../node_modules/prop-types/index.js');
 var InfoCard_styled = require('./InfoCard.styled.js');
+var index$1 = require('../../../_virtual/index.js');
 
 const _excluded = ["icon", "total", "label", "linkLabel", "onClick", "height"];
 const InfoCard = index["default"].forwardRef(function InfoCard(_ref, forwardedRef) {
@@ -18,21 +19,28 @@ const InfoCard = index["default"].forwardRef(function InfoCard(_ref, forwardedRe
       height
     } = _ref,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const [isLinkHovered, setIsLinkHovered] = index$1.react.exports.useState(false);
   const handleLinkClick = e => onClick(e);
   return index["default"].createElement(InfoCard_styled.Container, _rollupPluginBabelHelpers["extends"]({
     height: height,
     ref: forwardedRef
   }, props), index["default"].createElement(InfoCard_styled.MetricsContainer, null, index["default"].createElement(InfoCard_styled.IconTotalContainer, null, index["default"].createElement(InfoCard_styled.IconContainer, null, icon), index["default"].createElement(InfoCard_styled.Total, null, total)), index["default"].createElement(InfoCard_styled.Label, null, label)), linkLabel && onClick && index["default"].createElement(InfoCard_styled.Link, {
-    onClick: handleLinkClick
-  }, index["default"].createElement(InfoCard_styled.ButtonLink, null, linkLabel), index["default"].createElement(InfoCard_styled.StyledArrowIcon, null)));
+    onClick: handleLinkClick,
+    onMouseEnter: () => setIsLinkHovered(true),
+    onMouseLeave: () => setIsLinkHovered(false)
+  }, index["default"].createElement(InfoCard_styled.ButtonLink, {
+    $isHovered: isLinkHovered
+  }, linkLabel), index["default"].createElement(InfoCard_styled.StyledArrowIcon, {
+    $isHovered: isLinkHovered
+  })));
 });
 InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
-  icon: index$1["default"].element.isRequired,
-  total: index$1["default"].number.isRequired,
-  label: index$1["default"].string.isRequired,
-  linkLabel: index$1["default"].string,
-  onClick: index$1["default"].func,
-  height: index$1["default"].number
+  icon: index$2["default"].element.isRequired,
+  total: index$2["default"].number.isRequired,
+  label: index$2["default"].string.isRequired,
+  linkLabel: index$2["default"].string,
+  onClick: index$2["default"].func,
+  height: index$2["default"].number
 } : {};
 var InfoCard$1 = InfoCard;
 

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

@@ -20,7 +20,12 @@ let _ = t => t,
   _t7,
   _t8,
   _t9;
-const Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Container = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   font-family: ${0};
   font-size: 1rem;
   font-weight: 500;
@@ -31,8 +36,10 @@ const Container = styled__default["default"].div.attrs(defaultTheme.applyDefault
   flex-direction: row;
   align-items: center;
   padding: 5px 0;
-`), props => props.theme.primaryFontFamily, props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')), props => props.height ? `${props.height}px` : '50px');
-const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+`), props => props.theme.primaryFontFamily, props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50')), props => props.height ? `${props.height}px` : '50px');
+const MetricsContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -41,31 +48,41 @@ const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.apply
   gap: 5px;
   padding-left: 15px;
 `));
-const IconTotalContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+const IconTotalContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
 `));
-const Total = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+const Total = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
   font-size: 1.22rem;
   font-weight: 700;
   ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
-const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+const Label = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
   font-size: 0.875rem;
   font-weight: 400;
   opacity: 0.8;
   ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500')));
-const IconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+const IconContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
   display: flex;
   justify-content: center;
   align-items: center;
   width: 18px;
   margin-top: -0.05rem;
 `));
-const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+const Link = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
   font-size: 0.875rem;
   font-weight: 400;
   width: 30%;
@@ -84,20 +101,30 @@ const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme
     transform: translateX(2px);
   }
 `));
-const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+const ButtonLink = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
   font-size: 0.875rem;
   font-weight: 500;
   height: 100%;
   display: flex;
   align-items: center;
   white-space: nowrap;
+  opacity: ${0};
+  transition: color 0.2s ease-in-out;
   ${0};
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('black')));
-const StyledArrowIcon = styled__default["default"](arrowForward.ReactComponent).attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
-  height: 20px;
+`), props => props.$isHovered ? 1 : 0.8, props => props.$isHovered ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
+const StyledArrowIcon = styled__default["default"](arrowForward.ReactComponent).withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
+  height: 15px;
   margin-right: 10px;
+  opacity: ${0};
+  transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;
+  transform: ${0};
+
   ${0};
-`), props => props.theme.themeProp('fill', props.theme.getColor('gray-100'), props.theme.getColor('black')));
+`), props => props.$isHovered ? 1 : 0.8, props => props.$isHovered ? 'translateX(2px)' : 'translateX(0)', props => props.$isHovered ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')));
 
 exports.ButtonLink = ButtonLink;
 exports.Container = Container;

package/cjs/components/widgets/ProgressBar/ProgressBar.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../../../node_modules/react/index.js');
-var index$1 = require('../../../node_modules/prop-types/index.js');
+var index$1 = require('../../../node_modules/react/index.js');
+var index$2 = require('../../../node_modules/prop-types/index.js');
 var ProgressBar_styled = require('./ProgressBar.styled.js');
+var index = require('../../../_virtual/index.js');
 
 const _excluded = ["totalAssets", "completedAssets", "percentageText", "barColor", "height", "label", "type", "linkText", "onClick"];
 const ProgressBar = _ref => {
@@ -21,37 +22,57 @@ const ProgressBar = _ref => {
       onClick
     } = _ref,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const [isLinkHovered, setIsLinkHovered] = index.react.exports.useState(false);
   const safeCompletedAssets = Math.max(0, completedAssets);
   const safeTotalAssets = Math.max(1, totalAssets);
   const percentage = safeCompletedAssets / safeTotalAssets * 100;
   const formattedPercentage = `${Math.round(percentage)}%`;
+  const isLowPercentage = percentage <= 5;
   const handleLinkClick = e => onClick(e);
-  return index["default"].createElement(ProgressBar_styled.Container, _rollupPluginBabelHelpers["extends"]({
+  const formatNumberNew = num => {
+    if (num < 1000000) {
+      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    } else {
+      const units = ['K', 'M', 'B', 'T'];
+      const unit = Math.floor((num.toString().length - 1) / 3) - 1;
+      const shortNum = num / Math.pow(1000, unit + 1);
+      return shortNum.toFixed(shortNum < 10 ? 1 : 0) + units[unit];
+    }
+  };
+  return index$1["default"].createElement(ProgressBar_styled.Container, _rollupPluginBabelHelpers["extends"]({
     height: height
-  }, props), index["default"].createElement(ProgressBar_styled.Label, null, label), index["default"].createElement(ProgressBar_styled.ProgressBarTrack, null, index["default"].createElement(ProgressBar_styled.MetricsContainer, {
-    hasLink: Boolean(linkText)
-  }, index["default"].createElement(ProgressBar_styled.Completed, {
+  }, props), index$1["default"].createElement(ProgressBar_styled.Label, null, label), index$1["default"].createElement(ProgressBar_styled.InnerContainer, {
     type: type
-  }, safeCompletedAssets), index["default"].createElement(ProgressBar_styled.ProgressBarFill, {
+  }, index$1["default"].createElement(ProgressBar_styled.Completed, {
+    type: type
+  }, formatNumberNew(completedAssets)), index$1["default"].createElement(ProgressBar_styled.ProgressBarTrack, null, index$1["default"].createElement(ProgressBar_styled.MetricsContainer, {
+    $hasLink: Boolean(linkText)
+  }, index$1["default"].createElement(ProgressBar_styled.ProgressBarFill, {
     type: type,
-    percentage: percentage,
+    $percentage: percentage,
     barColor: barColor
-  }, index["default"].createElement(ProgressBar_styled.PercentageIndicator, {
-    hasLink: Boolean(linkText)
-  }, percentageText || formattedPercentage))), linkText && index["default"].createElement(ProgressBar_styled.Link, {
-    onClick: handleLinkClick
-  }, index["default"].createElement(ProgressBar_styled.ButtonLink, null, linkText), index["default"].createElement(ProgressBar_styled.StyledArrowIcon, null))));
+  }, !isLowPercentage && index$1["default"].createElement(ProgressBar_styled.PercentageIndicator, {
+    $hasLink: Boolean(linkText)
+  }, percentageText || formattedPercentage)), isLowPercentage && index$1["default"].createElement(ProgressBar_styled.ExternalPercentageIndicator, null, percentageText || formattedPercentage)), linkText && index$1["default"].createElement(ProgressBar_styled.Link, {
+    onClick: handleLinkClick,
+    onMouseEnter: () => setIsLinkHovered(true),
+    onMouseLeave: () => setIsLinkHovered(false)
+  }, index$1["default"].createElement(ProgressBar_styled.ButtonLink, {
+    $isHovered: isLinkHovered
+  }, linkText), index$1["default"].createElement(ProgressBar_styled.StyledArrowIcon, {
+    $isHovered: isLinkHovered
+  })))));
 };
 ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
-  totalAssets: index$1["default"].number.isRequired,
-  completedAssets: index$1["default"].number.isRequired,
-  percentageText: index$1["default"].string,
-  barColor: index$1["default"].string,
-  height: index$1["default"].number,
-  label: index$1["default"].string,
-  type: index$1["default"].string,
-  linkText: index$1["default"].string,
-  onClick: index$1["default"].func
+  totalAssets: index$2["default"].number.isRequired,
+  completedAssets: index$2["default"].number.isRequired,
+  percentageText: index$2["default"].string,
+  barColor: index$2["default"].string,
+  height: index$2["default"].number,
+  label: index$2["default"].string,
+  type: index$2["default"].string,
+  linkText: index$2["default"].string,
+  onClick: index$2["default"].func
 } : {};
 var ProgressBar$1 = ProgressBar;
 

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

@@ -20,9 +20,14 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
 const getBackgroundColor = props => {
   if (props.barColor) {
     return `background: ${props.barColor};`;
@@ -37,17 +42,29 @@ const getBackgroundColor = props => {
   const [darkColor, lightColor] = colorMap[props.type] || colorMap.default;
   return props.theme.themeProp('background', props.theme.getColor(darkColor), props.theme.getColor(lightColor));
 };
-styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+styled__default["default"].p.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   font-family: ${0};
   font-size: 1rem;
   font-weight: 500;
 `), props => props.theme.primaryFontFamily);
-const Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+const Container = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
   width: 100%;
   height: ${0};
   font-family: ${0};
 `), props => props.height ? `${props.height}px` : '50px', props => props.theme.primaryFontFamily);
-const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+const InnerContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  display: flex;
+  height: 100%;
+`));
+const MetricsContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -56,17 +73,24 @@ const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.apply
   height: 100%;
   flex-direction: row;
   justify-content: flex-start;
-`), props => props.hasLink ? '85%' : '100%');
-const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+`), props => props.$hasLink ? '85%' : '100%');
+const Label = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
   font-size: 0.875rem;
+  padding-bottom: 5px;
   ${0}
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')));
-styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
   font-size: 0.875rem;
   font-weight: 500;
   ${0}
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')));
-const ProgressBarTrack = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+const ProgressBarTrack = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -76,20 +100,22 @@ const ProgressBarTrack = styled__default["default"].div.attrs(defaultTheme.apply
   border-radius: 3px;
   height: 100%;
   ${0}
-`), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')));
-const Completed = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+`), props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50')));
+const Completed = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
   font-size: 1.2rem;
   font-weight: 400;
   height: 100%;
-  padding: 0 8px;
-  border-radius: 3px 0 0 3px;
-  border-right: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
   display: flex;
   align-items: center;
-  ${0}
+  width: 96px;
   ${0};
-`), props => getBackgroundColor(props), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800')));
-const PercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800')));
+const PercentageIndicator = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
   position: absolute;
   right: 10px;
   font-weight: 400;
@@ -98,7 +124,21 @@ const PercentageIndicator = styled__default["default"].div.attrs(defaultTheme.ap
   opacity: 0.8;
   ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
-const ProgressBarFill = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
+const ExternalPercentageIndicator = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t0 || (_t0 = _`
+  margin-left: 8px;
+  font-size: 1.2rem;
+  font-weight: 400;
+  font-size: 0.875rem;
+  opacity: 0.9;
+  ${0};
+  display: flex;
+  align-items: center;
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
+const ProgressBarFill = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t1 || (_t1 = _`
   height: 100%;
   border-radius: 0 3px 3px 0;
   width: ${0}%;
@@ -108,8 +148,10 @@ const ProgressBarFill = styled__default["default"].div.attrs(defaultTheme.applyD
   justify-content: flex-end;
   ${0}
   transition: width 0.3s ease;
-`), props => props.percentage, props => getBackgroundColor(props));
-const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
+`), props => props.$percentage, props => getBackgroundColor(props));
+const Link = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
   font-size: 0.875rem;
   font-weight: 400;
   width: 15%;
@@ -128,23 +170,37 @@ const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme
     transform: translateX(2px);
   }
 `));
-const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
+const ButtonLink = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
   font-size: 0.875rem;
   font-weight: 500;
   height: 100%;
   display: flex;
   align-items: center;
+  opacity: ${0};
+  transition: color 0.2s ease-in-out;
   ${0};
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
-const StyledArrowIcon = styled__default["default"](arrowForward.ReactComponent).attrs(defaultTheme.applyDefaultTheme)(_t12 || (_t12 = _`
+`), props => props.$isHovered ? 1 : 0.8, props => props.$isHovered ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
+const StyledArrowIcon = styled__default["default"](arrowForward.ReactComponent).withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t12 || (_t12 = _`
   height: 15px;
   margin-right: 10px;
+  opacity: ${0};
+  transition:
+    transform 0.2s ease-in-out,
+    fill 0.2s ease-in-out;
+  transform: ${0};
+
   ${0};
-`), props => props.theme.themeProp('fill', props.theme.getColor('gray-100'), props.theme.getColor('black')));
+`), props => props.$isHovered ? 1 : 0.8, props => props.$isHovered ? 'translateX(2px)' : 'translateX(0)', props => props.$isHovered ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')));
 
 exports.ButtonLink = ButtonLink;
 exports.Completed = Completed;
 exports.Container = Container;
+exports.ExternalPercentageIndicator = ExternalPercentageIndicator;
+exports.InnerContainer = InnerContainer;
 exports.Label = Label;
 exports.Link = Link;
 exports.MetricsContainer = MetricsContainer;

package/cjs/components/widgets/SummaryCard/SummaryCard.js

@@ -32,20 +32,21 @@ const SummaryCard = index["default"].forwardRef(function AssetSummaryCard(_ref,
   const shouldAddGutterAfterInstructions = shouldRenderInstructions && shouldRenderFooter;
   const shouldAddGutterAfterTitle = !!title && (!!description || !!instructions || shouldRenderFooter);
   if (!activeSummaryCard) return null;
+  const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== 'compact'));
   return index["default"].createElement(SummaryCard_styled.SummaryCard, _rollupPluginBabelHelpers["extends"]({
     ref: forwardedRef,
     width: width,
-    useBorder: useBorder
-  }, props, {
+    $useBorder: useBorder
+  }, filteredProps, {
     view: view
   }), shouldRenderHeader && index["default"].createElement(index["default"].Fragment, null, index["default"].createElement(SummaryCard_styled.Gutter, {
-    gutter: 8
+    $gutter: 8
   }), index["default"].createElement(SummaryCard_styled.Header, null, index["default"].createElement(SummaryCard_styled.HeaderLeft, null, headerLeft), index["default"].createElement(SummaryCard_styled.HeaderRight, null, headerRight))), index["default"].createElement(SummaryCard_styled.Gutter, {
-    gutter: shouldRenderHeader ? 8 : 16
+    $gutter: shouldRenderHeader ? 8 : 16
   }), title && index["default"].createElement(SummaryCard_styled.Title, null, title), shouldAddGutterAfterTitle && index["default"].createElement(SummaryCard_styled.Gutter, {
-    gutter: 4
+    $gutter: 4
   }), description && index["default"].createElement(SummaryCard_styled.Description, null, description), index["default"].createElement(SummaryCard_styled.Gutter, {
-    gutter: 16
+    $gutter: 16
   }), shouldRenderInstructions && index["default"].createElement(SummaryCard_styled.Instruction, null, index["default"].createElement(Alert["default"], {
     icon: index["default"].createElement(warningCircle.ReactComponent, null),
     alertMessage: instructions,
@@ -56,9 +57,9 @@ const SummaryCard = index["default"].forwardRef(function AssetSummaryCard(_ref,
     width: width,
     lineClamp: 1
   })), shouldAddGutterAfterInstructions && index["default"].createElement(SummaryCard_styled.Gutter, {
-    gutter: 16
+    $gutter: 16
   }), shouldRenderFooter && index["default"].createElement(SummaryCard_styled.Footer, null, index["default"].createElement(SummaryCard_styled.FooterLeft, null, footerLeft), index["default"].createElement(SummaryCard_styled.FooterRight, null, footerRight)), shouldRenderFooter && index["default"].createElement(SummaryCard_styled.Gutter, {
-    gutter: 16
+    $gutter: 16
   }));
 });
 SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {

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

@@ -20,12 +20,17 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
-  _t12,
-  _t13,
-  _t14;
-const SummaryCard = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  _t12;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const SummaryCard = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   display: flex;
   flex-direction: column;
   border-radius: 4px;
@@ -33,28 +38,34 @@ const SummaryCard = styled__default["default"].div.attrs(defaultTheme.applyDefau
   ${0};
 
   ${0}
-`), props => props.width ? `${props.width}px` : '100%', props => props.compact ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent', props => props.useBorder ? props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-500')}`, `1px solid ${props.theme.getColor('gray-300')}`) : null);
-const Gutter = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+`), props => props.width ? `${props.width}px` : '100%', props => props.view === 'compact' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent', props => props.$useBorder ? props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-500')}`, `1px solid ${props.theme.getColor('gray-300')}`) : null);
+const Gutter = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
   ${0}
   padding-bottom: ${0}px;
 `), props => {
   if (props.renderAsMargin) {
     return styled.css(_t3 || (_t3 = _`
         margin-bottom: ${0}px;
-      `), props.gutter || 8);
+      `), props.$gutter || 8);
   } else {
     return styled.css(_t4 || (_t4 = _`
         padding-bottom: ${0}px;
-      `), props.gutter || 8);
+      `), props.$gutter || 8);
   }
-}, props => props.gutter || 8);
-const Header = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+}, props => props.$gutter || 8);
+const Header = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
 `));
-const HeaderLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+const HeaderLeft = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -63,7 +74,9 @@ const HeaderLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaul
     margin-right: 4px;
   }
 `));
-const HeaderRight = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+const HeaderRight = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -72,7 +85,9 @@ const HeaderRight = styled__default["default"].div.attrs(defaultTheme.applyDefau
     margin-left: 4px;
   }
 `));
-const Title = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+const Title = styled__default["default"].span.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
   display: inline-block;
   padding: 0 16px;
   font: normal normal 500 14px/19px Roboto;
@@ -86,7 +101,9 @@ const Title = styled__default["default"].span.attrs(defaultTheme.applyDefaultThe
 
   ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')));
-const Description = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
+const Description = styled__default["default"].span.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
   padding: 0 16px;
   text-align: left;
   font: normal normal normal 12px/16px Roboto;
@@ -100,14 +117,20 @@ const Description = styled__default["default"].span.attrs(defaultTheme.applyDefa
 
   ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')));
-const Instruction = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _``));
-const Footer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
+const Instruction = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t0 || (_t0 = _``));
+const Footer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t1 || (_t1 = _`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
 `));
-const FooterLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t12 || (_t12 = _`
+const FooterLeft = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -116,7 +139,9 @@ const FooterLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaul
     margin-right: 4px;
   }
 `));
-const FooterRight = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t13 || (_t13 = _`
+const FooterRight = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -125,7 +150,9 @@ const FooterRight = styled__default["default"].div.attrs(defaultTheme.applyDefau
     margin-left: 4px;
   }
 `));
-styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_t14 || (_t14 = _`
+styled__default["default"](react.FloatingArrow).withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t12 || (_t12 = _`
   ${0}
 `), props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white')));
 

package/cjs/components/widgets/widgets/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var AssetGallery = require('../AssetGallery/AssetGallery.js');
 var ContextMenu = require('../ContextMenu/ContextMenu.js');
 var AssetPreviewTopBar = require('../AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js');
-var Instructions = require('../Instructions/Instructions.js');
 var SummaryCard = require('../SummaryCard/SummaryCard.js');
 var AssetActionsBase = require('../AssetActionsBase/AssetActionsBase.js');
 var AssetAction = require('../AssetAction/AssetAction.js');
@@ -17,7 +16,6 @@ var InfoCard = require('../InfoCard/InfoCard.js');
 exports.AssetGallery = AssetGallery["default"];
 exports.ContextMenu = ContextMenu["default"];
 exports.AssetPreviewTopBar = AssetPreviewTopBar["default"];
-exports.Instructions = Instructions["default"];
 exports.SummaryCard = SummaryCard["default"];
 exports.AssetActionBase = AssetActionsBase["default"];
 exports.AssetAction = AssetAction["default"];