@ntbjs/react-components 1.1.22 → 1.1.24

package/{MultiLevelCheckboxSelect-cd1ced5d.js → MultiLevelCheckboxSelect-375c4785.js}

@@ -1,20 +1,20 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-06b819a9.js');
+var defaultTheme = require('./defaultTheme-24ea5c47.js');
 var React = require('react');
 var styled = require('styled-components');
-require('./Alert-7bbe87f3.js');
-require('./Badge-dc50d116.js');
-var Popover = require('./Popover-5e9ab515.js');
-require('./Tab-572141e4.js');
-require('./Tabs-9dbd5b85.js');
-require('./Tooltip-5bbe5971.js');
-require('./VerificationStatusIcon-10460fe7.js');
-var Checkbox = require('./Checkbox-876f71f0.js');
+require('./Alert-edd9f6a7.js');
+require('./Badge-00b2f311.js');
+var Popover = require('./Popover-f00121a3.js');
+require('./Tab-d3ee0a3b.js');
+require('./Tabs-243c5e0b.js');
+require('./Tooltip-7dc4676b.js');
+require('./VerificationStatusIcon-f3c44ef8.js');
+var Checkbox = require('./Checkbox-c441fdba.js');
 var lodash = require('lodash');
-var TextInput = require('./TextInput-9e62ab60.js');
-require('./InputGroup-d25c66ad.js');
-var SectionSeparator = require('./SectionSeparator-c9ec6fac.js');
+var TextInput = require('./TextInput-70cb3df7.js');
+require('./InputGroup-3598e37c.js');
+var SectionSeparator = require('./SectionSeparator-43e1647d.js');
 var close = require('./close-1751121a.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -358,7 +358,7 @@ CheckboxTree.propTypes = process.env.NODE_ENV !== "production" ? {
   onRemove: defaultTheme.PropTypes.func.isRequired
 } : {};
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1;
 var MultiLevelCheckboxSelect$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n"])), function (props) {
   return props.theme.primaryFontFamily;
 });
@@ -382,8 +382,8 @@ var PopoverContainer = styled__default["default"].div.attrs(defaultTheme.applyDe
 var PopoverHeader = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
 });
-var SearchContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n"])));
-var OptionsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n  overflow: auto;\n  box-sizing: border-box;\n"])));
+var SearchContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject0 || (_templateObject0 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n"])));
+var OptionsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject1 || (_templateObject1 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n  overflow: auto;\n  box-sizing: border-box;\n"])));
 
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 

package/{MultiSelect-0cfc8d6c.js → MultiSelect-0bdad346.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-06b819a9.js');
+var defaultTheme = require('./defaultTheme-24ea5c47.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var styled = require('styled-components');
 var close = require('./close-1751121a.js');
 var Select = require('react-select');
-var reactSelectCreatable_esm = require('./react-select-creatable.esm-3c7b7450.js');
+var reactSelectCreatable_esm = require('./react-select-creatable.esm-09b1be95.js');
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
 var AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
 var showMoreHeight = 114;
 var sharedStyle = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: 400;\n  position: relative;\n"])), function (props) {
@@ -35,12 +35,12 @@ var Control = styled__default["default"](Select.components.Control).attrs(defaul
 var ValueContainer = styled__default["default"](Select.components.ValueContainer)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    align-items: flex-start;\n    gap: 8px;\n    padding: 0;\n\n    max-height: ", " !important;\n\n    ", "\n  }\n"])), function (props) {
   return props.showMore ? props.error || props.warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
 }, function (props) {
-  return (props.error || props.warning) && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n        border: 1px solid;\n        border-radius: 3px;\n        padding: 4px;\n\n        border-color: ", ";\n      "])), function (props) {
+  return (props.error || props.warning) && styled.css(_templateObject0 || (_templateObject0 = defaultTheme._taggedTemplateLiteral(["\n        border: 1px solid;\n        border-radius: 3px;\n        padding: 4px;\n\n        border-color: ", ";\n      "])), function (props) {
     return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
   });
 });
-var MultiValueWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    border-radius: 3px;\n    margin: 0;\n  }\n"])));
-var MultiValue = styled__default["default"](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    border-radius: 3px;\n    margin: 0;\n\n    ", "\n\n    ", "\n\n    > div {\n      align-items: center;\n      display: flex;\n      font-size: 12px;\n      min-height: 26px;\n\n      :first-of-type {\n        padding: ", ";\n      }\n\n      :last-child:not(:only-child) {\n        padding: 0 8px 0 5px;\n        height: 100%;\n        width: fit-content;\n      }\n\n      :last-child:not(:only-child):hover {\n        background-color: ", ";\n        border-bottom-left-radius: 0;\n        border-top-left-radius: 0;\n        cursor: pointer;\n      }\n\n      svg {\n        stroke: white;\n        stroke-width: 2px;\n        width: 8px;\n      }\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n"])), function (props) {
+var MultiValueWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject1 || (_templateObject1 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    border-radius: 3px;\n    margin: 0;\n  }\n"])));
+var MultiValue = styled__default["default"](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    border-radius: 3px;\n    margin: 0;\n\n    ", "\n\n    ", "\n\n    > div {\n      align-items: center;\n      display: flex;\n      font-size: 12px;\n      min-height: 26px;\n\n      :first-of-type {\n        padding: ", ";\n      }\n\n      :last-of-type:not(:only-child) {\n        padding: 0 8px 0 5px;\n        height: 100%;\n        width: fit-content;\n      }\n\n      :last-of-type:not(:only-child):hover {\n        background-color: ", ";\n        border-bottom-left-radius: 0;\n        border-top-left-radius: 0;\n        cursor: pointer;\n      }\n\n      svg {\n        stroke: white;\n        stroke-width: 2px;\n        width: 8px;\n      }\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n"])), function (props) {
   return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'));
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'));
@@ -49,45 +49,45 @@ var MultiValue = styled__default["default"](Select.components.MultiValue).attrs(
 }, function (props) {
   return props.theme.getColor('red-500');
 });
-var MultiValueRemove = styled__default["default"](Select.components.MultiValueRemove).attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral([""])));
-var Input = styled__default["default"](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n  align-self: center;\n  font-size: ", ";\n  min-width: 150px;\n\n  ", "\n\n  ", "\n  }\n"])), function (props) {
+var MultiValueRemove = styled__default["default"](Select.components.MultiValueRemove).attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral([""])));
+var Input = styled__default["default"](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n  align-self: center;\n  font-size: ", ";\n  min-width: 150px;\n\n  ", "\n\n  ", "\n  }\n"])), function (props) {
   return props.$focused ? '14px' : '12px';
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
 }, function (props) {
-  return !props.$focused && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n\n      :before {\n        height: 100%;\n        white-space: nowrap;\n        width: fit-content;\n        content: '", "';\n      }\n    "])), function (props) {
+  return !props.$focused && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n\n      :before {\n        height: 100%;\n        white-space: nowrap;\n        width: fit-content;\n        content: '", "';\n      }\n    "])), function (props) {
     return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
   }, function (props) {
     return props.edittext;
   });
 });
-var DropdownMenu = styled__default["default"](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 14px;\n\n  ", "\n\n  ", "\n"])), function (props) {
+var DropdownMenu = styled__default["default"](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 14px;\n\n  ", "\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'));
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
 });
-var sharedOptionStyle = styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n\n  :hover {\n    cursor: pointer;\n  }\n"])), function (props) {
-  return props.isFocused && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
+var sharedOptionStyle = styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n\n  :hover {\n    cursor: pointer;\n  }\n"])), function (props) {
+  return props.isFocused && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
 }, function (props) {
-  return props.isSelected && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n\n      ", "\n    "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
+  return props.isSelected && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n\n      ", "\n    "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
 }, function (props) {
-  return props.isFocused && props.isSelected && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
+  return props.isFocused && props.isSelected && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
 });
-var Option = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedOptionStyle);
-var SelectedOption$1 = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n\n  display: flex !important;\n  justify-content: space-between;\n"])), sharedOptionStyle);
-var DropdownOptionDeleteIcon = styled__default["default"](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n  stroke-width: 1px;\n  width: 8px;\n\n  ", "\n"])), function (props) {
+var Option = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedOptionStyle);
+var SelectedOption$1 = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n\n  display: flex !important;\n  justify-content: space-between;\n"])), sharedOptionStyle);
+var DropdownOptionDeleteIcon = styled__default["default"](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  stroke-width: 1px;\n  width: 8px;\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
 });
-var ShowMoreWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n  align-items: end;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  max-height: ", "px;\n  top: 0;\n  width: 100%;\n\n  ", "\n\n  :hover {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n"])), showMoreHeight + 16, function (props) {
+var ShowMoreWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n  align-items: end;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  max-height: ", "px;\n  top: 0;\n  width: 100%;\n\n  ", "\n\n  :hover {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n"])), showMoreHeight + 16, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'));
 });
-var ShowMoreOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n  align-items: end;\n  display: block;\n  height: 100%;\n  max-height: ", "px;\n  left: 0;\n  top: 0;\n  width: 100%;\n\n  ", "\n"])), showMoreHeight, function (props) {
+var ShowMoreOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n  align-items: end;\n  display: block;\n  height: 100%;\n  max-height: ", "px;\n  left: 0;\n  top: 0;\n  width: 100%;\n\n  ", "\n"])), showMoreHeight, function (props) {
   return props.theme.themeProp('background', 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box', 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box');
 });
-var ShowMoreText = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  width: 100%;\n  ", "\n"])), function (props) {
+var ShowMoreText = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  width: 100%;\n  ", "\n"])), function (props) {
   return props.theme.themeProp('background-color', '#121212', '#fefefe');
 });
-var ErrorMessage = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  margin-top: 8px;\n  padding: 0 12px;\n"])), function (props) {
+var ErrorMessage = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  margin-top: 8px;\n  padding: 0 12px;\n"])), function (props) {
   return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
 });
 
@@ -129,9 +129,9 @@ var MultiSelect = React__default["default"].forwardRef(function MultiSelect(_ref
     displayShowMore = _useState8[0],
     setDisplayShowMore = _useState8[1];
   var _useState9 = React.useState(0),
-    _useState10 = defaultTheme._slicedToArray(_useState9, 2),
-    cacheUnique = _useState10[0],
-    setCacheUnique = _useState10[1];
+    _useState0 = defaultTheme._slicedToArray(_useState9, 2),
+    cacheUnique = _useState0[0],
+    setCacheUnique = _useState0[1];
   React.useEffect(function () {
     setSelected(selectedOptions);
   }, [selectedOptions]);

package/{Popover-5e9ab515.js → Popover-f00121a3.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-06b819a9.js');
+var defaultTheme = require('./defaultTheme-24ea5c47.js');
 var lodash = require('lodash');
 var React = require('react');
 var styled = require('styled-components');
 var polished = require('polished');
 var TippyTooltip = require('@tippyjs/react');
-require('./shift-away-subtle-16a9f31b.js');
+require('./shift-away-subtle-dce50395.js');
 var maxSize = require('popper-max-size-modifier');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/ProgressBar-7d31fd95.js

@@ -0,0 +1,154 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-24ea5c47.js');
+var React = require('react');
+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);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
+var getBackgroundColor = function getBackgroundColor(props) {
+  if (props.barColor) {
+    return "background: ".concat(props.barColor, ";");
+  }
+  var 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']
+  };
+  var _ref = colorMap[props.type] || colorMap["default"],
+    _ref2 = defaultTheme._slicedToArray(_ref, 2),
+    darkColor = _ref2[0],
+    lightColor = _ref2[1];
+  return props.theme.themeProp('background', props.theme.getColor(darkColor), props.theme.getColor(lightColor));
+};
+styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n"])), function (props) {
+  return props.theme.primaryFontFamily;
+});
+var Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  font-family: ", ";\n"])), function (props) {
+  return props.height ? "".concat(props.height, "px") : '50px';
+}, function (props) {
+  return props.theme.primaryFontFamily;
+});
+var InnerContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n"])));
+var MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: 100%;\n  flex-direction: row;\n  justify-content: flex-start;\n"])), function (props) {
+  return props.hasLink ? '85%' : '100%';
+});
+var Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  padding-bottom: 5px;\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
+});
+styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  font-weight: 500;\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
+});
+var ProgressBarTrack = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 3px;\n  height: 100%;\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200'));
+});
+var Completed = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 1.2rem;\n  font-weight: 400;\n  height: 100%;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  width: 96px;\n  ", ";\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800'));
+});
+var PercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  right: 10px;\n  font-weight: 400;\n  font-size: 0.875rem;\n  white-space: nowrap;\n  opacity: 0.8;\n  ", ";\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
+});
+var ExternalPercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject0 || (_templateObject0 = defaultTheme._taggedTemplateLiteral(["\n  margin-left: 8px;\n  font-size: 1.2rem;\n  font-weight: 400;\n  font-size: 0.875rem;\n  opacity: 0.9;\n  ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
+});
+var ProgressBarFill = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject1 || (_templateObject1 = defaultTheme._taggedTemplateLiteral(["\n  height: 100%;\n  border-radius: 0 3px 3px 0;\n  width: ", "%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  ", "\n  transition: width 0.3s ease;\n"])), function (props) {
+  return props.percentage;
+}, function (props) {
+  return getBackgroundColor(props);
+});
+var Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  font-weight: 400;\n  width: 15%;\n  opacity: 0.7;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-right: 20px;\n  cursor: pointer;\n  height: 100%;\n  gap: 10px;\n  svg {\n    transition: transform 0.2s ease-in-out;\n  }\n  &:hover svg {\n    transform: translateX(2px);\n  }\n"])));
+var ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  font-weight: 500;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  opacity: ", ";\n  transition: color 0.2s ease-in-out;\n  ", ";\n"])), function (props) {
+  return props.isHovered ? 1 : 0.8;
+}, function (props) {
+  return 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'));
+});
+var StyledArrowIcon = styled__default["default"](arrowForward.SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n  height: 15px;\n  margin-right: 10px;\n  opacity: ", ";\n  transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;\n  transform: ", ";\n\n  ", ";\n"])), function (props) {
+  return props.isHovered ? 1 : 0.8;
+}, function (props) {
+  return props.isHovered ? 'translateX(2px)' : 'translateX(0)';
+}, function (props) {
+  return 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'));
+});
+
+var _excluded = ["totalAssets", "completedAssets", "percentageText", "barColor", "height", "label", "type", "linkText", "onClick"];
+var ProgressBar = function ProgressBar(_ref) {
+  var totalAssets = _ref.totalAssets,
+    completedAssets = _ref.completedAssets,
+    percentageText = _ref.percentageText,
+    barColor = _ref.barColor,
+    height = _ref.height,
+    label = _ref.label,
+    type = _ref.type,
+    linkText = _ref.linkText,
+    onClick = _ref.onClick,
+    props = defaultTheme._objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(false),
+    _useState2 = defaultTheme._slicedToArray(_useState, 2),
+    isLinkHovered = _useState2[0],
+    setIsLinkHovered = _useState2[1];
+  var safeCompletedAssets = Math.max(0, completedAssets);
+  var safeTotalAssets = Math.max(1, totalAssets);
+  var percentage = safeCompletedAssets / safeTotalAssets * 100;
+  var formattedPercentage = "".concat(Math.round(percentage), "%");
+  var isLowPercentage = percentage <= 5;
+  var handleLinkClick = function handleLinkClick(e) {
+    return onClick(e);
+  };
+  var formatNumberNew = function formatNumberNew(num) {
+    if (num < 1000000) {
+      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    } else {
+      var units = ['K', 'M', 'B', 'T'];
+      var unit = Math.floor((num.toString().length - 1) / 3) - 1;
+      var shortNum = num / Math.pow(1000, unit + 1);
+      return shortNum.toFixed(shortNum < 10 ? 1 : 0) + units[unit];
+    }
+  };
+  return React__default["default"].createElement(Container, defaultTheme._extends({
+    height: height
+  }, props), React__default["default"].createElement(Label, null, label), React__default["default"].createElement(InnerContainer, {
+    type: type
+  }, React__default["default"].createElement(Completed, {
+    type: type
+  }, formatNumberNew(completedAssets)), React__default["default"].createElement(ProgressBarTrack, null, React__default["default"].createElement(MetricsContainer, {
+    hasLink: Boolean(linkText)
+  }, React__default["default"].createElement(ProgressBarFill, {
+    type: type,
+    percentage: percentage,
+    barColor: barColor
+  }, !isLowPercentage && React__default["default"].createElement(PercentageIndicator, {
+    hasLink: Boolean(linkText)
+  }, percentageText || formattedPercentage)), isLowPercentage && React__default["default"].createElement(ExternalPercentageIndicator, null, percentageText || formattedPercentage)), linkText && React__default["default"].createElement(Link, {
+    onClick: handleLinkClick,
+    onMouseEnter: function onMouseEnter() {
+      return setIsLinkHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsLinkHovered(false);
+    }
+  }, React__default["default"].createElement(ButtonLink, {
+    isHovered: isLinkHovered
+  }, linkText), React__default["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
+} : {};
+
+exports.ProgressBar = ProgressBar;

package/{Radio-8282d0d6.js → Radio-758fd8f3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-06b819a9.js');
+var defaultTheme = require('./defaultTheme-24ea5c47.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var polished = require('polished');

package/{SectionSeparator-c9ec6fac.js → SectionSeparator-43e1647d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-06b819a9.js');
+var defaultTheme = require('./defaultTheme-24ea5c47.js');
 var React = require('react');
 var styled = require('styled-components');
 

package/{Switch-57f729bb.js → Switch-26547abb.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-06b819a9.js');
+var defaultTheme = require('./defaultTheme-24ea5c47.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var polished = require('polished');

package/{Tab-572141e4.js → Tab-d3ee0a3b.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-06b819a9.js');
+var defaultTheme = require('./defaultTheme-24ea5c47.js');
 var React = require('react');
 var styled = require('styled-components');
 

package/{Tabs-9dbd5b85.js → Tabs-243c5e0b.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-06b819a9.js');
+var defaultTheme = require('./defaultTheme-24ea5c47.js');
 var lodash = require('lodash');
 var React = require('react');
-var Tab = require('./Tab-572141e4.js');
+var Tab = require('./Tab-d3ee0a3b.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1;
 var Tabs$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  ", ";\n"])), function (props) {
   return props.backgroundColor && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), props.backgroundColor);
 });
@@ -45,9 +45,9 @@ var TabContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultT
 var TabHeaderBorder = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  border-top: 1px solid;\n\n  ", ";\n  ", ";\n  ", ";\n"])), function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5');
 }, function (props) {
-  return !props.customPadding && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n      margin: -2px 0;\n    "])));
+  return !props.customPadding && styled.css(_templateObject0 || (_templateObject0 = defaultTheme._taggedTemplateLiteral(["\n      margin: -2px 0;\n    "])));
 }, function (props) {
-  return props.customPadding && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n      margin: -2px ", ";\n    "])), props.customPadding);
+  return props.customPadding && styled.css(_templateObject1 || (_templateObject1 = defaultTheme._taggedTemplateLiteral(["\n      margin: -2px ", ";\n    "])), props.customPadding);
 });
 
 var _excluded = ["children", "defaultMinHeight", "customPadding"];