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

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

@@ -12,7 +12,12 @@ let _ = t => t,
   _t7,
   _t8,
   _t9;
-const Container = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Container = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   font-family: ${0};
   font-size: 1rem;
   font-weight: 500;
@@ -23,8 +28,10 @@ const Container = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
   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.div.attrs(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.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -33,31 +40,41 @@ const MetricsContainer = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   gap: 5px;
   padding-left: 15px;
 `));
-const IconTotalContainer = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+const IconTotalContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
 `));
-const Total = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
+const Total = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(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.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
+const Label = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(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.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+const IconContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   display: flex;
   justify-content: center;
   align-items: center;
   width: 18px;
   margin-top: -0.05rem;
 `));
-const Link = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+const Link = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t7 || (_t7 = _`
   font-size: 0.875rem;
   font-weight: 400;
   width: 30%;
@@ -76,19 +93,29 @@ const Link = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
     transform: translateX(2px);
   }
 `));
-const ButtonLink = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+const ButtonLink = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(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(SvgArrowForward).attrs(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(SvgArrowForward).withConfig({
+  shouldForwardProp
+}).attrs(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')));
 
 export { ButtonLink, Container, IconContainer, IconTotalContainer, Label, Link, MetricsContainer, StyledArrowIcon, Total };

package/esm/components/widgets/ProgressBar/ProgressBar.js

@@ -1,7 +1,8 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from '../../../node_modules/react/index.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
-import { Container, Label, ProgressBarTrack, MetricsContainer, Completed, ProgressBarFill, PercentageIndicator, Link, ButtonLink, StyledArrowIcon } from './ProgressBar.styled.js';
+import { Container, Label, InnerContainer, Completed, ProgressBarTrack, MetricsContainer, ProgressBarFill, PercentageIndicator, ExternalPercentageIndicator, Link, ButtonLink, StyledArrowIcon } from './ProgressBar.styled.js';
+import { r as react } from '../../../_virtual/index.js';
 
 const _excluded = ["totalAssets", "completedAssets", "percentageText", "barColor", "height", "label", "type", "linkText", "onClick"];
 const ProgressBar = _ref => {
@@ -17,26 +18,46 @@ const ProgressBar = _ref => {
       onClick
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const [isLinkHovered, setIsLinkHovered] = 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);
+  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 React.createElement(Container, _extends({
     height: height
-  }, props), React.createElement(Label, null, label), React.createElement(ProgressBarTrack, null, React.createElement(MetricsContainer, {
-    hasLink: Boolean(linkText)
+  }, props), React.createElement(Label, null, label), React.createElement(InnerContainer, {
+    type: type
   }, React.createElement(Completed, {
     type: type
-  }, safeCompletedAssets), React.createElement(ProgressBarFill, {
+  }, formatNumberNew(completedAssets)), React.createElement(ProgressBarTrack, null, React.createElement(MetricsContainer, {
+    $hasLink: Boolean(linkText)
+  }, React.createElement(ProgressBarFill, {
     type: type,
-    percentage: percentage,
+    $percentage: percentage,
     barColor: barColor
-  }, React.createElement(PercentageIndicator, {
-    hasLink: Boolean(linkText)
-  }, percentageText || formattedPercentage))), linkText && React.createElement(Link, {
-    onClick: handleLinkClick
-  }, React.createElement(ButtonLink, null, linkText), React.createElement(StyledArrowIcon, null))));
+  }, !isLowPercentage && React.createElement(PercentageIndicator, {
+    $hasLink: Boolean(linkText)
+  }, percentageText || formattedPercentage)), isLowPercentage && React.createElement(ExternalPercentageIndicator, null, percentageText || formattedPercentage)), linkText && React.createElement(Link, {
+    onClick: handleLinkClick,
+    onMouseEnter: () => setIsLinkHovered(true),
+    onMouseLeave: () => setIsLinkHovered(false)
+  }, React.createElement(ButtonLink, {
+    $isHovered: isLinkHovered
+  }, linkText), React.createElement(StyledArrowIcon, {
+    $isHovered: isLinkHovered
+  })))));
 };
 ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
   totalAssets: PropTypes.number.isRequired,

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

@@ -12,9 +12,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};`;
@@ -29,17 +34,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.p.attrs(applyDefaultTheme)(_t || (_t = _`
+styled.p.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   font-family: ${0};
   font-size: 1rem;
   font-weight: 500;
 `), props => props.theme.primaryFontFamily);
-const Container = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+const Container = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   width: 100%;
   height: ${0};
   font-family: ${0};
 `), props => props.height ? `${props.height}px` : '50px', props => props.theme.primaryFontFamily);
-const MetricsContainer = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+const InnerContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+  display: flex;
+  height: 100%;
+`));
+const MetricsContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t4 || (_t4 = _`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -48,17 +65,24 @@ const MetricsContainer = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   height: 100%;
   flex-direction: row;
   justify-content: flex-start;
-`), props => props.hasLink ? '85%' : '100%');
-const Label = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
+`), props => props.$hasLink ? '85%' : '100%');
+const Label = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(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.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
+styled.div.withConfig({
+  shouldForwardProp
+}).attrs(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.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+const ProgressBarTrack = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t7 || (_t7 = _`
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -68,20 +92,22 @@ const ProgressBarTrack = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   border-radius: 3px;
   height: 100%;
   ${0}
-`), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')));
-const Completed = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+`), props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50')));
+const Completed = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(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.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800')));
+const PercentageIndicator = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t9 || (_t9 = _`
   position: absolute;
   right: 10px;
   font-weight: 400;
@@ -90,7 +116,21 @@ const PercentageIndicator = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   opacity: 0.8;
   ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
-const ProgressBarFill = styled.div.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
+const ExternalPercentageIndicator = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(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.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t1 || (_t1 = _`
   height: 100%;
   border-radius: 0 3px 3px 0;
   width: ${0}%;
@@ -100,8 +140,10 @@ const ProgressBarFill = styled.div.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
   justify-content: flex-end;
   ${0}
   transition: width 0.3s ease;
-`), props => props.percentage, props => getBackgroundColor(props));
-const Link = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
+`), props => props.$percentage, props => getBackgroundColor(props));
+const Link = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t10 || (_t10 = _`
   font-size: 0.875rem;
   font-weight: 400;
   width: 15%;
@@ -120,18 +162,30 @@ const Link = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
     transform: translateX(2px);
   }
 `));
-const ButtonLink = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
+const ButtonLink = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(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(SvgArrowForward).attrs(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(SvgArrowForward).withConfig({
+  shouldForwardProp
+}).attrs(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')));
 
-export { ButtonLink, Completed, Container, Label, Link, MetricsContainer, PercentageIndicator, ProgressBarFill, ProgressBarTrack, StyledArrowIcon };
+export { ButtonLink, Completed, Container, ExternalPercentageIndicator, InnerContainer, Label, Link, MetricsContainer, PercentageIndicator, ProgressBarFill, ProgressBarTrack, StyledArrowIcon };

package/esm/components/widgets/SummaryCard/SummaryCard.js

@@ -28,20 +28,21 @@ const SummaryCard = React.forwardRef(function AssetSummaryCard(_ref, forwardedRe
   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 React.createElement(SummaryCard$2, _extends({
     ref: forwardedRef,
     width: width,
-    useBorder: useBorder
-  }, props, {
+    $useBorder: useBorder
+  }, filteredProps, {
     view: view
   }), shouldRenderHeader && React.createElement(React.Fragment, null, React.createElement(Gutter, {
-    gutter: 8
+    $gutter: 8
   }), React.createElement(Header, null, React.createElement(HeaderLeft, null, headerLeft), React.createElement(HeaderRight, null, headerRight))), React.createElement(Gutter, {
-    gutter: shouldRenderHeader ? 8 : 16
+    $gutter: shouldRenderHeader ? 8 : 16
   }), title && React.createElement(Title, null, title), shouldAddGutterAfterTitle && React.createElement(Gutter, {
-    gutter: 4
+    $gutter: 4
   }), description && React.createElement(Description, null, description), React.createElement(Gutter, {
-    gutter: 16
+    $gutter: 16
   }), shouldRenderInstructions && React.createElement(Instruction, null, React.createElement(Alert, {
     icon: React.createElement(SvgWarningCircle, null),
     alertMessage: instructions,
@@ -52,9 +53,9 @@ const SummaryCard = React.forwardRef(function AssetSummaryCard(_ref, forwardedRe
     width: width,
     lineClamp: 1
   })), shouldAddGutterAfterInstructions && React.createElement(Gutter, {
-    gutter: 16
+    $gutter: 16
   }), shouldRenderFooter && React.createElement(Footer, null, React.createElement(FooterLeft, null, footerLeft), React.createElement(FooterRight, null, footerRight)), shouldRenderFooter && React.createElement(Gutter, {
-    gutter: 16
+    $gutter: 16
   }));
 });
 SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {

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

@@ -12,12 +12,17 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
-  _t12,
-  _t13,
-  _t14;
-const SummaryCard = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  _t12;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const SummaryCard = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   display: flex;
   flex-direction: column;
   border-radius: 4px;
@@ -25,28 +30,34 @@ const SummaryCard = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
   ${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.div.attrs(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.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   ${0}
   padding-bottom: ${0}px;
 `), props => {
   if (props.renderAsMargin) {
     return css(_t3 || (_t3 = _`
         margin-bottom: ${0}px;
-      `), props.gutter || 8);
+      `), props.$gutter || 8);
   } else {
     return css(_t4 || (_t4 = _`
         padding-bottom: ${0}px;
-      `), props.gutter || 8);
+      `), props.$gutter || 8);
   }
-}, props => props.gutter || 8);
-const Header = styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
+}, props => props.$gutter || 8);
+const Header = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t5 || (_t5 = _`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
 `));
-const HeaderLeft = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+const HeaderLeft = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -55,7 +66,9 @@ const HeaderLeft = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
     margin-right: 4px;
   }
 `));
-const HeaderRight = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+const HeaderRight = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t7 || (_t7 = _`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -64,7 +77,9 @@ const HeaderRight = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
     margin-left: 4px;
   }
 `));
-const Title = styled.span.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+const Title = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   display: inline-block;
   padding: 0 16px;
   font: normal normal 500 14px/19px Roboto;
@@ -78,7 +93,9 @@ const Title = styled.span.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
 
   ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')));
-const Description = styled.span.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
+const Description = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t9 || (_t9 = _`
   padding: 0 16px;
   text-align: left;
   font: normal normal normal 12px/16px Roboto;
@@ -92,14 +109,20 @@ const Description = styled.span.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
 
   ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')));
-const Instruction = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _``));
-const Footer = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
+const Instruction = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t0 || (_t0 = _``));
+const Footer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t1 || (_t1 = _`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
 `));
-const FooterLeft = styled.div.attrs(applyDefaultTheme)(_t12 || (_t12 = _`
+const FooterLeft = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t10 || (_t10 = _`
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -108,7 +131,9 @@ const FooterLeft = styled.div.attrs(applyDefaultTheme)(_t12 || (_t12 = _`
     margin-right: 4px;
   }
 `));
-const FooterRight = styled.div.attrs(applyDefaultTheme)(_t13 || (_t13 = _`
+const FooterRight = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t11 || (_t11 = _`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -117,7 +142,9 @@ const FooterRight = styled.div.attrs(applyDefaultTheme)(_t13 || (_t13 = _`
     margin-left: 4px;
   }
 `));
-styled(FloatingArrow).attrs(applyDefaultTheme)(_t14 || (_t14 = _`
+styled(FloatingArrow).withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t12 || (_t12 = _`
   ${0}
 `), props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white')));
 

package/esm/components/widgets/widgets/index.js

@@ -1,7 +1,6 @@
 export { default as AssetGallery } from '../AssetGallery/AssetGallery.js';
 export { default as ContextMenu } from '../ContextMenu/ContextMenu.js';
 export { default as AssetPreviewTopBar } from '../AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js';
-export { default as Instructions } from '../Instructions/Instructions.js';
 export { default as SummaryCard } from '../SummaryCard/SummaryCard.js';
 export { default as AssetActionBase } from '../AssetActionsBase/AssetActionsBase.js';
 export { default as AssetAction } from '../AssetAction/AssetAction.js';

package/esm/node_modules/@emotion/cache/dist/{emotion-cache.browser.esm.js → emotion-cache.esm.js}

@@ -1,4 +1,6 @@
 import { StyleSheet } from '../../sheet/dist/emotion-sheet.esm.js';
+import weakMemoize from '../../weak-memoize/dist/emotion-weak-memoize.esm.js';
+import memoize from '../../memoize/dist/emotion-memoize.esm.js';
 import { middleware, rulesheet } from '../../../stylis/src/Middleware.js';
 import { RULESET, KEYFRAMES, DECLARATION, WEBKIT, MS, MOZ } from '../../../stylis/src/Enum.js';
 import { combine, replace, hash, charat, strlen, indexof, match, from } from '../../../stylis/src/Utility.js';
@@ -6,6 +8,8 @@ import { serialize, stringify } from '../../../stylis/src/Serializer.js';
 import { copy, dealloc, alloc, next, token, peek, delimit, slice, position } from '../../../stylis/src/Tokenizer.js';
 import { compile } from '../../../stylis/src/Parser.js';
 
+var isBrowser = typeof document !== 'undefined';
+
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
   var previous = 0;
   var character = 0;
@@ -343,12 +347,17 @@ var prefixer = function prefixer(element, index, children, callback) {
   }
 };
 
+var getServerStylisCache = isBrowser ? undefined : weakMemoize(function () {
+  return memoize(function () {
+    return {};
+  });
+});
 var defaultStylisPlugins = [prefixer];
 
 var createCache = function createCache(options) {
   var key = options.key;
 
-  if (key === 'css') {
+  if (isBrowser && key === 'css') {
     var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
     // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
     // note this very very intentionally targets all style elements regardless of the key to ensure
@@ -378,7 +387,7 @@ var createCache = function createCache(options) {
   var container;
   var nodesToHydrate = [];
 
-  {
+  if (isBrowser) {
     container = options.container || document.head;
     Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
     // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
@@ -397,7 +406,7 @@ var createCache = function createCache(options) {
 
   var omnipresentPlugins = [compat, removeLabel];
 
-  {
+  if (!getServerStylisCache) {
     var currentSheet;
     var finalizingPlugins = [stringify, rulesheet(function (rule) {
       currentSheet.insert(rule);
@@ -417,6 +426,55 @@ var createCache = function createCache(options) {
         cache.inserted[serialized.name] = true;
       }
     };
+  } else {
+    var _finalizingPlugins = [stringify];
+
+    var _serializer = middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
+
+    var _stylis = function _stylis(styles) {
+      return serialize(compile(styles), _serializer);
+    };
+
+    var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
+
+    var getRules = function getRules(selector, serialized) {
+      var name = serialized.name;
+
+      if (serverStylisCache[name] === undefined) {
+        serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+      }
+
+      return serverStylisCache[name];
+    };
+
+    _insert = function _insert(selector, serialized, sheet, shouldCache) {
+      var name = serialized.name;
+      var rules = getRules(selector, serialized);
+
+      if (cache.compat === undefined) {
+        // in regular mode, we don't set the styles on the inserted cache
+        // since we don't need to and that would be wasting memory
+        // we return them so that they are rendered in a style tag
+        if (shouldCache) {
+          cache.inserted[name] = true;
+        }
+
+        return rules;
+      } else {
+        // in compat mode, we put the styles on the inserted cache so
+        // that emotion-server can pull out the styles
+        // except when we don't want to cache it which was in Global but now
+        // is nowhere but we don't want to do a major right now
+        // and just in case we're going to leave the case here
+        // it's also not affecting client side bundle size
+        // so it's really not a big deal
+        if (shouldCache) {
+          cache.inserted[name] = rules;
+        } else {
+          return rules;
+        }
+      }
+    };
   }
 
   var cache = {