@ntbjs/react-components 2.0.0-rc.26 → 2.0.0-rc.28

package/build/{InfoCard-d0fdf377.js → widgets/InfoCard/InfoCard.js}

@@ -1,17 +1,10 @@
-'use strict';
+import { _ as _extends } from '../../_rollupPluginBabelHelpers-c245b26a.js';
+import React__default, { useState } from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../defaultTheme-1bcc2541.js';
+import styled from 'styled-components';
+import { S as SvgArrowForward } from '../../arrow-forward-ad12c5f3.js';
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
-var React = require('react');
-var defaultTheme = require('./defaultTheme-d9a7342e.js');
-var styled = require('styled-components');
-var arrowForward = require('./arrow-forward-d7c77ae3.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Container = styled.div.attrs(applyDefaultTheme)`
   font-family: ${props => props.theme.primaryFontFamily};
   font-size: 1rem;
   font-weight: 500;
@@ -23,7 +16,7 @@ const Container = styled__default["default"].div.attrs(defaultTheme.applyDefault
   align-items: center;
   padding: 5px 0;
 `;
-const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const MetricsContainer = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -32,31 +25,31 @@ const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.apply
   gap: 5px;
   padding-left: 15px;
 `;
-const IconTotalContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const IconTotalContainer = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
 `;
-const Total = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Total = styled.div.attrs(applyDefaultTheme)`
   font-size: 1.22rem;
   font-weight: 700;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
 `;
-const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Label = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   font-weight: 400;
   opacity: 0.8;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500'))};
 `;
-const IconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const IconContainer = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   justify-content: center;
   align-items: center;
   width: 18px;
   margin-top: -0.05rem;
 `;
-const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Link = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   font-weight: 400;
   width: 30%;
@@ -75,7 +68,7 @@ const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme
     transform: translateX(2px);
   }
 `;
-const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const ButtonLink = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   font-weight: 500;
   height: 100%;
@@ -86,7 +79,7 @@ const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaul
   transition: color 0.2s ease-in-out;
   ${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.SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)`
+const StyledArrowIcon = styled(SvgArrowForward).attrs(applyDefaultTheme)`
   height: 15px;
   margin-right: 10px;
   opacity: ${props => props.$isHovered ? 1 : 0.8};
@@ -96,7 +89,7 @@ const StyledArrowIcon = styled__default["default"](arrowForward.SvgArrowForward)
   ${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'))};
 `;
 
-const InfoCard = React__default["default"].forwardRef(function InfoCard({
+const InfoCard = React__default.forwardRef(function InfoCard({
   icon,
   total,
   label,
@@ -105,28 +98,28 @@ const InfoCard = React__default["default"].forwardRef(function InfoCard({
   height,
   ...props
 }, forwardedRef) {
-  const [isLinkHovered, setIsLinkHovered] = React.useState(false);
+  const [isLinkHovered, setIsLinkHovered] = useState(false);
   const handleLinkClick = e => onClick(e);
-  return React__default["default"].createElement(Container, _rollupPluginBabelHelpers._extends({
+  return React__default.createElement(Container, _extends({
     height: height,
     ref: forwardedRef
-  }, props), React__default["default"].createElement(MetricsContainer, null, React__default["default"].createElement(IconTotalContainer, null, React__default["default"].createElement(IconContainer, null, icon), React__default["default"].createElement(Total, null, total)), React__default["default"].createElement(Label, null, label)), linkLabel && onClick && React__default["default"].createElement(Link, {
+  }, props), React__default.createElement(MetricsContainer, null, React__default.createElement(IconTotalContainer, null, React__default.createElement(IconContainer, null, icon), React__default.createElement(Total, null, total)), React__default.createElement(Label, null, label)), linkLabel && onClick && React__default.createElement(Link, {
     onClick: handleLinkClick,
     onMouseEnter: () => setIsLinkHovered(true),
     onMouseLeave: () => setIsLinkHovered(false)
-  }, React__default["default"].createElement(ButtonLink, {
+  }, React__default.createElement(ButtonLink, {
     $isHovered: isLinkHovered
-  }, linkLabel), React__default["default"].createElement(StyledArrowIcon, {
+  }, linkLabel), React__default.createElement(StyledArrowIcon, {
     $isHovered: isLinkHovered
   })));
 });
 InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
-  icon: defaultTheme.PropTypes.element.isRequired,
-  total: defaultTheme.PropTypes.number.isRequired,
-  label: defaultTheme.PropTypes.string.isRequired,
-  linkLabel: defaultTheme.PropTypes.string,
-  onClick: defaultTheme.PropTypes.func,
-  height: defaultTheme.PropTypes.number
+  icon: PropTypes.element.isRequired,
+  total: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  linkLabel: PropTypes.string,
+  onClick: PropTypes.func,
+  height: PropTypes.number
 } : {};
 
-exports.InfoCard = InfoCard;
+export { InfoCard as default };

package/build/widgets/Instructions/Instructions.js

@@ -0,0 +1,255 @@
+import { _ as _extends } from '../../_rollupPluginBabelHelpers-c245b26a.js';
+import { isFunction } from 'lodash';
+import { a as applyDefaultTheme, P as PropTypes } from '../../defaultTheme-1bcc2541.js';
+import React__default, { useState, useEffect, useCallback } from 'react';
+import { S as SvgWarningCircle } from '../../warning-circle-24f3efcd.js';
+import { C as CompactAutocompleteSelect } from '../../CompactAutocompleteSelect-52c49513.js';
+import { T as TextArea } from '../../TextArea-1e5b9201.js';
+import styled from 'styled-components';
+import 'nanoid';
+import '../../Alert-e6847a22.js';
+import '../../Badge-d93586a9.js';
+import '../../Popover-20050b91.js';
+import 'polished';
+import '@tippyjs/react';
+import '../../shift-away-subtle-0dd94a03.js';
+import 'popper-max-size-modifier';
+import '../../Tab-04d435c3.js';
+import '../../Tabs-74d1ea8a.js';
+import '../../Tooltip-c1d1199e.js';
+import '../../VerificationStatusIcon-49cb1c1b.js';
+import 'react-select';
+import 'react-select-async-paginate';
+import 'react-select/creatable';
+import '../../close-a5d37608.js';
+import '../../expand-more-c5523c46.js';
+import '@restart/hooks/useMergedRefs';
+import '../../edit-note-283a0e15.js';
+
+const Instructions$1 = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  ${props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
+`;
+const TopBarContainer = styled.div.attrs(applyDefaultTheme)`
+  position: absolute;
+  display: flex;
+  width: 100%;
+  margin-top: 0;
+  transition: margin-top 120ms;
+  &&.slide-in {
+    margin-top: -24px;
+  }
+  ${props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
+
+  ${props => props.initialHover && props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
+`;
+const SelectContainer = styled.div.attrs(applyDefaultTheme)`
+  width: 100%;
+  margin: 0 2px;
+`;
+const InstructionsArea = styled.div.attrs(applyDefaultTheme)`
+  margin: 2px 2px -2px 2px;
+`;
+
+const Instructions = React__default.forwardRef(function Instructions({
+  clickToAdd,
+  customAddMessage,
+  selectedOption,
+  loadOptions,
+  readOnly,
+  disabled,
+  hidden,
+  name,
+  lightBackground,
+  autoSelect,
+  subscribeCurrentValue: subscribeCurrentValueProp,
+  onChange: onChangeProp,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
+  onUpdateCallback,
+  availableOptions,
+  loadingMessageFunc,
+  placeholder,
+  type,
+  selectType,
+  edit,
+  rows,
+  showMore,
+  showMoreText,
+  showLessText,
+  isExpanded,
+  loadingIcon,
+  successIcon,
+  padding,
+  ...props
+}, forwardedRef) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [selected, setSelected] = useState({});
+  const [addInstructions, setAddInstructions] = useState(clickToAdd);
+  const [customMessage, setCustomMessage] = useState(customAddMessage);
+  const [background, setBackground] = useState(lightBackground);
+  const [initialHover, setInitialHover] = useState(true);
+  const [currentValue, setCurrentValue] = useState();
+  useEffect(() => {
+    if (isFunction(subscribeCurrentValueProp)) {
+      subscribeCurrentValueProp(currentValue);
+    }
+  }, [currentValue]);
+  useEffect(() => {
+    handleChange(selected);
+  }, [selected]);
+  useEffect(() => {
+    if (selectedOption) {
+      setCurrentValue(selectedOption.value);
+    }
+  }, [selectedOption]);
+  useEffect(() => {
+    if (addInstructions) {
+      setCurrentValue(customMessage);
+      setInitialHover(true);
+    }
+  }, [addInstructions, handleOnFocus]);
+  const onChange = useCallback(event => {
+    setCurrentValue(event.target.value);
+    if (isFunction(onChangeProp)) {
+      onChangeProp(event);
+    }
+  }, [onChangeProp]);
+  const onFocus = useCallback(event => {
+    if (autoSelect) {
+      event.target.select();
+    }
+    if (isFunction(onFocusProp)) {
+      onFocusProp(event);
+    }
+    if (event.target.value === customMessage) {
+      setCurrentValue('');
+    }
+  }, [autoSelect, readOnly, onFocusProp]);
+  const onBlur = useCallback(event => {
+    if (isFunction(onBlurProp)) {
+      onBlurProp(event);
+    }
+  }, [onBlurProp]);
+  const handleMouseOver = () => {
+    setIsHovered(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  const handleOnFocus = () => {
+    if (customMessage === currentValue) {
+      setCurrentValue('');
+    }
+  };
+  const handleChange = selected => {
+    if (selected === null) {
+      setSelected({});
+      setAddInstructions(true);
+      setBackground(true);
+      setInitialHover(true);
+      setCustomMessage(customAddMessage);
+    } else {
+      setSelected(selected);
+      setCurrentValue(selected.value);
+      setAddInstructions(false);
+      setBackground(false);
+      setInitialHover(false);
+      onUpdateCallback(selected);
+    }
+  };
+  const sharedSelectProps = {
+    options: loadOptions ? undefined : availableOptions,
+    loadOptions: loadOptions,
+    loadingMessage: loadingMessageFunc,
+    placeholder: placeholder
+  };
+  if (hidden) return null;
+  return React__default.createElement(Instructions$1, _extends({
+    ref: forwardedRef,
+    initialHover: initialHover,
+    onMouseDown: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  }, props), !readOnly && !disabled && React__default.createElement(TopBarContainer, {
+    initialHover: initialHover,
+    className: isHovered && !readOnly && !disabled && 'slide-in'
+  }, React__default.createElement(SelectContainer, null, React__default.createElement(CompactAutocompleteSelect, _extends({
+    type: selectType,
+    value: selectedOption,
+    creatable: false,
+    onChange: handleChange
+  }, sharedSelectProps)))), React__default.createElement(InstructionsArea, {
+    type: type
+  }, React__default.createElement(TextArea, {
+    noBorder: true,
+    instructionsTextArea: true,
+    type: type,
+    lightBackground: background,
+    readOnly: readOnly,
+    disabled: disabled,
+    name: name,
+    isExpanded: isExpanded,
+    edit: edit,
+    value: currentValue === null ? '' : currentValue,
+    onFocus: onFocus,
+    onChange: onChange,
+    onBlur: onBlur,
+    rows: rows,
+    showMore: showMore,
+    showMoreText: showMoreText,
+    showLessText: showLessText,
+    icon: React__default.createElement(SvgWarningCircle, null),
+    loadingIcon: loadingIcon,
+    successIcon: successIcon,
+    padding: padding
+  })));
+});
+Instructions.defaultProps = {
+  clickToAdd: false,
+  lightBackground: false,
+  autoSelect: true,
+  hidden: false,
+  edit: false,
+  disabled: false,
+  readOnly: false,
+  type: '',
+  selectType: '',
+  padding: 'medium',
+  onUpdateCallback: () => {}
+};
+Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  selectedOption: PropTypes.any,
+  loadOptions: PropTypes.func,
+  loadingMessageFunc: PropTypes.func,
+  clickToAdd: PropTypes.bool,
+  customAddMessage: PropTypes.string,
+  autoSelect: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  hidden: PropTypes.bool,
+  showMore: PropTypes.bool,
+  showMoreText: PropTypes.string,
+  showLessText: PropTypes.string,
+  availableOptions: PropTypes.arrayOf(PropTypes.object),
+  lightBackground: PropTypes.bool,
+  edit: PropTypes.bool,
+  options: PropTypes.array,
+  subscribeCurrentValue: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onUpdateCallback: PropTypes.func,
+  type: PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'instructions-warning', 'loading', 'success']),
+  selectType: PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
+  isExpanded: PropTypes.func,
+  loadingIcon: PropTypes.element,
+  successIcon: PropTypes.element,
+  padding: PropTypes.oneOf(['', 'small', 'medium', 'large'])
+} : {};
+
+export { Instructions as default };

package/build/{ProgressBar-2d26c1fb.js → widgets/ProgressBar/ProgressBar.js}

@@ -1,15 +1,8 @@
-'use strict';
-
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
-var React = require('react');
-var defaultTheme = require('./defaultTheme-d9a7342e.js');
-var styled = require('styled-components');
-var arrowForward = require('./arrow-forward-d7c77ae3.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+import { _ as _extends } from '../../_rollupPluginBabelHelpers-c245b26a.js';
+import React__default, { useState } from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../defaultTheme-1bcc2541.js';
+import styled from 'styled-components';
+import { S as SvgArrowForward } from '../../arrow-forward-ad12c5f3.js';
 
 const getBackgroundColor = props => {
   if (props.barColor) {
@@ -25,21 +18,21 @@ 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)`
+styled.p.attrs(applyDefaultTheme)`
   font-family: ${props => props.theme.primaryFontFamily};
   font-size: 1rem;
   font-weight: 500;
 `;
-const Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Container = styled.div.attrs(applyDefaultTheme)`
   width: 100%;
   height: ${props => props.height ? `${props.height}px` : '50px'};
   font-family: ${props => props.theme.primaryFontFamily};
 `;
-const InnerContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const InnerContainer = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   height: 100%;
 `;
-const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const MetricsContainer = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -49,17 +42,17 @@ const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.apply
   flex-direction: row;
   justify-content: flex-start;
 `;
-const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Label = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   padding-bottom: 5px;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
 `;
-styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   font-weight: 500;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
 `;
-const ProgressBarTrack = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const ProgressBarTrack = styled.div.attrs(applyDefaultTheme)`
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -70,7 +63,7 @@ const ProgressBarTrack = styled__default["default"].div.attrs(defaultTheme.apply
   height: 100%;
   ${props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50'))}
 `;
-const Completed = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Completed = styled.div.attrs(applyDefaultTheme)`
   font-size: 1.2rem;
   font-weight: 400;
   height: 100%;
@@ -80,7 +73,7 @@ const Completed = styled__default["default"].div.attrs(defaultTheme.applyDefault
   width: 96px;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800'))};
 `;
-const PercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const PercentageIndicator = styled.div.attrs(applyDefaultTheme)`
   position: absolute;
   right: 10px;
   font-weight: 400;
@@ -89,7 +82,7 @@ const PercentageIndicator = styled__default["default"].div.attrs(defaultTheme.ap
   opacity: 0.8;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))};
 `;
-const ExternalPercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const ExternalPercentageIndicator = styled.div.attrs(applyDefaultTheme)`
   margin-left: 8px;
   font-size: 1.2rem;
   font-weight: 400;
@@ -99,7 +92,7 @@ const ExternalPercentageIndicator = styled__default["default"].div.attrs(default
   display: flex;
   align-items: center;
 `;
-const ProgressBarFill = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const ProgressBarFill = styled.div.attrs(applyDefaultTheme)`
   height: 100%;
   border-radius: 0 3px 3px 0;
   width: ${props => props.percentage}%;
@@ -110,7 +103,7 @@ const ProgressBarFill = styled__default["default"].div.attrs(defaultTheme.applyD
   ${props => getBackgroundColor(props)}
   transition: width 0.3s ease;
 `;
-const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Link = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   font-weight: 400;
   width: 15%;
@@ -129,7 +122,7 @@ const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme
     transform: translateX(2px);
   }
 `;
-const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const ButtonLink = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   font-weight: 500;
   height: 100%;
@@ -139,7 +132,7 @@ const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaul
   transition: color 0.2s ease-in-out;
   ${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.SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)`
+const StyledArrowIcon = styled(SvgArrowForward).attrs(applyDefaultTheme)`
   height: 15px;
   margin-right: 10px;
   opacity: ${props => props.$isHovered ? 1 : 0.8};
@@ -161,7 +154,7 @@ const ProgressBar = ({
   onClick,
   ...props
 }) => {
-  const [isLinkHovered, setIsLinkHovered] = React.useState(false);
+  const [isLinkHovered, setIsLinkHovered] = useState(false);
   const safeCompletedAssets = Math.max(0, completedAssets);
   const safeTotalAssets = Math.max(1, totalAssets);
   const percentage = safeCompletedAssets / safeTotalAssets * 100;
@@ -178,40 +171,40 @@ const ProgressBar = ({
       return shortNum.toFixed(shortNum < 10 ? 1 : 0) + units[unit];
     }
   };
-  return React__default["default"].createElement(Container, _rollupPluginBabelHelpers._extends({
+  return React__default.createElement(Container, _extends({
     height: height
-  }, props), React__default["default"].createElement(Label, null, label), React__default["default"].createElement(InnerContainer, {
+  }, props), React__default.createElement(Label, null, label), React__default.createElement(InnerContainer, {
     type: type
-  }, React__default["default"].createElement(Completed, {
+  }, React__default.createElement(Completed, {
     type: type
-  }, formatNumberNew(completedAssets)), React__default["default"].createElement(ProgressBarTrack, null, React__default["default"].createElement(MetricsContainer, {
+  }, formatNumberNew(completedAssets)), React__default.createElement(ProgressBarTrack, null, React__default.createElement(MetricsContainer, {
     hasLink: Boolean(linkText)
-  }, React__default["default"].createElement(ProgressBarFill, {
+  }, React__default.createElement(ProgressBarFill, {
     type: type,
     percentage: percentage,
     barColor: barColor
-  }, !isLowPercentage && React__default["default"].createElement(PercentageIndicator, {
+  }, !isLowPercentage && React__default.createElement(PercentageIndicator, {
     hasLink: Boolean(linkText)
-  }, percentageText || formattedPercentage)), isLowPercentage && React__default["default"].createElement(ExternalPercentageIndicator, null, percentageText || formattedPercentage)), linkText && React__default["default"].createElement(Link, {
+  }, percentageText || formattedPercentage)), isLowPercentage && React__default.createElement(ExternalPercentageIndicator, null, percentageText || formattedPercentage)), linkText && React__default.createElement(Link, {
     onClick: handleLinkClick,
     onMouseEnter: () => setIsLinkHovered(true),
     onMouseLeave: () => setIsLinkHovered(false)
-  }, React__default["default"].createElement(ButtonLink, {
+  }, React__default.createElement(ButtonLink, {
     $isHovered: isLinkHovered
-  }, linkText), React__default["default"].createElement(StyledArrowIcon, {
+  }, linkText), React__default.createElement(StyledArrowIcon, {
     $isHovered: isLinkHovered
   })))));
 };
 ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
-  totalAssets: defaultTheme.PropTypes.number.isRequired,
-  completedAssets: defaultTheme.PropTypes.number.isRequired,
-  percentageText: defaultTheme.PropTypes.string,
-  barColor: defaultTheme.PropTypes.string,
-  height: defaultTheme.PropTypes.number,
-  label: defaultTheme.PropTypes.string,
-  type: defaultTheme.PropTypes.string,
-  linkText: defaultTheme.PropTypes.string,
-  onClick: defaultTheme.PropTypes.func
+  totalAssets: PropTypes.number.isRequired,
+  completedAssets: PropTypes.number.isRequired,
+  percentageText: PropTypes.string,
+  barColor: PropTypes.string,
+  height: PropTypes.number,
+  label: PropTypes.string,
+  type: PropTypes.string,
+  linkText: PropTypes.string,
+  onClick: PropTypes.func
 } : {};
 
-exports.ProgressBar = ProgressBar;
+export { ProgressBar as default };