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

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

@@ -1,102 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var defaultTheme = require('../../../../utils/defaultTheme.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6;
-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;
-  font-family: ${0};
-  font-size: 0.875rem;
-  font-weight: normal;
-  height: 31px;
-  min-width: 160px;
-  padding: ${0};
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  :not(:last-of-type) {
-    border-bottom: 1px solid;
-
-    ${0}
-  }
-
-  :last-of-type {
-    height: 32px;
-  }
-
-  &:hover {
-    cursor: pointer;
-
-    ${0}
-  }
-
-  ${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 = _`
-      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.$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 = _`
-      &&:hover {
-        ${0}
-      }
-    `), 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;
-  max-width: 12px;
-  margin-right: 8px;
-
-  svg {
-    height: 12px;
-  }
-`));
-const SublevelIconContainer = styled__default["default"].span.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
-  align-items: center;
-  display: flex;
-  height: fit-content;
-  max-width: 12px;
-  margin-left: auto;
-  margin-right: 8px;
-  padding-left: 24px;
-
-  svg {
-    height: 12px;
-  }
-`));
-
-exports.ContextMenuItem = ContextMenuItem;
-exports.IconContainer = IconContainer;
-exports.SublevelIconContainer = SublevelIconContainer;

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

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var ContextMenuItem = require('../../../ContextMenuItem.js');
-
-
-
-exports["default"] = ContextMenuItem["default"];

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

@@ -1,28 +0,0 @@
-'use strict';
-
-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 ContextMenuItemsGroup_styled = require('./ContextMenuItemsGroup.styled.js');
-
-const _excluded = ["children"];
-const ContextMenuItemsGroup = index["default"].forwardRef(function ContextMenuItemsGroup(_ref, forwardedRef) {
-  let {
-      children
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return index["default"].createElement(ContextMenuItemsGroup_styled.ContextMenuItemsGroup, _rollupPluginBabelHelpers["extends"]({
-    ref: forwardedRef
-  }, props, {
-    role: "group"
-  }), children);
-});
-ContextMenuItemsGroup.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: index$1["default"].arrayOf(index$1["default"].node)
-} : {};
-ContextMenuItemsGroup.defaultProps = {};
-var ContextMenuItemsGroup$1 = ContextMenuItemsGroup;
-
-exports["default"] = ContextMenuItemsGroup$1;

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

@@ -1,35 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var defaultTheme = require('../../../../utils/defaultTheme.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-let _ = t => 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;
-
-    ${0}
-  }
-
-  > * {
-    border-bottom: none !important;
-  }
-
-  > *:not(:last-child) {
-    height: 32px;
-  }
-`), props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')));
-
-exports.ContextMenuItemsGroup = ContextMenuItemsGroup;

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

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var ContextMenuItemsGroup = require('../../../ContextMenuItemsGroup.js');
-
-
-
-exports["default"] = ContextMenuItemsGroup["default"];

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

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var ContextMenu = require('../../ContextMenu.js');
-
-
-
-exports["default"] = ContextMenu["default"];

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

@@ -1,47 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../../../node_modules/react/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) {
-  let {
-      icon,
-      total,
-      label,
-      linkLabel,
-      onClick,
-      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,
-    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$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;
-
-exports["default"] = InfoCard$1;

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

@@ -1,137 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var defaultTheme = require('../../../utils/defaultTheme.js');
-var arrowForward = require('../../../icons/arrow-forward.svg.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8,
-  _t9;
-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;
-  ${0};
-  height: ${0};
-  border-radius: 3px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 5px 0;
-`), 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;
-  align-items: flex-start;
-  width: 70%;
-  gap: 5px;
-  padding-left: 15px;
-`));
-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.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.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.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.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
-  font-size: 0.875rem;
-  font-weight: 400;
-  width: 30%;
-  opacity: 0.7;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-right: 20px;
-  cursor: pointer;
-  height: 100%;
-  gap: 10px;
-  svg {
-    transition: transform 0.2s ease-in-out;
-  }
-  &:hover svg {
-    transform: translateX(2px);
-  }
-`));
-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.$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.$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;
-exports.IconContainer = IconContainer;
-exports.IconTotalContainer = IconTotalContainer;
-exports.Label = Label;
-exports.Link = Link;
-exports.MetricsContainer = MetricsContainer;
-exports.StyledArrowIcon = StyledArrowIcon;
-exports.Total = Total;

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

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var InfoCard = require('../../InfoCard.js');
-
-
-
-exports["default"] = InfoCard["default"];

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

@@ -1,79 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.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 => {
-  let {
-      totalAssets,
-      completedAssets,
-      percentageText,
-      barColor,
-      height,
-      label,
-      type,
-      linkText,
-      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);
-  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$1["default"].createElement(ProgressBar_styled.Label, null, label), index$1["default"].createElement(ProgressBar_styled.InnerContainer, {
-    type: type
-  }, 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,
-    barColor: barColor
-  }, !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$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;
-
-exports["default"] = ProgressBar$1;

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

@@ -1,210 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var defaultTheme = require('../../../utils/defaultTheme.js');
-var arrowForward = require('../../../icons/arrow-forward.svg.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _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};`;
-  }
-  const colorMap = {
-    success: ['emerald-600', 'emerald-300'],
-    error: ['red-600', 'cercise-200'],
-    warning: ['orange-600', 'orange-400'],
-    none: ['gray-500', 'gray-300'],
-    default: ['emerald-600', 'emerald-500']
-  };
-  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.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.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 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;
-  align-items: center;
-  width: ${0};
-  height: 100%;
-  flex-direction: row;
-  justify-content: flex-start;
-`), 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.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.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  border-radius: 3px;
-  height: 100%;
-  ${0}
-`), 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%;
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  width: 96px;
-  ${0};
-`), 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;
-  font-size: 0.875rem;
-  white-space: nowrap;
-  opacity: 0.8;
-  ${0};
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
-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}%;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  ${0}
-  transition: width 0.3s ease;
-`), 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%;
-  opacity: 0.7;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-right: 20px;
-  cursor: pointer;
-  height: 100%;
-  gap: 10px;
-  svg {
-    transition: transform 0.2s ease-in-out;
-  }
-  &:hover svg {
-    transform: translateX(2px);
-  }
-`));
-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.$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.$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;
-exports.PercentageIndicator = PercentageIndicator;
-exports.ProgressBarFill = ProgressBarFill;
-exports.ProgressBarTrack = ProgressBarTrack;
-exports.StyledArrowIcon = StyledArrowIcon;