@devtron-labs/devtron-fe-common-lib 0.0.41-beta-8 → 0.0.42-beta-1

package/dist/Common/DevtronProgressing/DevtronProgressing.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DevtronProgressingProps } from './types';
+export declare function DevtronProgressing({ classes, parentClasses }: DevtronProgressingProps): JSX.Element;

package/dist/Common/DevtronProgressing/index.d.ts

@@ -0,0 +1 @@
+export * from './DevtronProgressing';

package/dist/Common/DevtronProgressing/types.d.ts

@@ -0,0 +1,4 @@
+export interface DevtronProgressingProps {
+    classes?: string;
+    parentClasses?: string;
+}

package/dist/Common/index.d.ts

@@ -40,3 +40,4 @@ export { default as Grid } from './Grid/Grid';
 export { default as ClipboardButton } from './ClipboardButton/ClipboardButton';
 export * from './Hooks';
 export { AppStatus } from './AppStatus';
+export * from './DevtronProgressing';

package/dist/index.js

@@ -716,9 +716,9 @@ var css_248z$6 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  heig
 styleInject(css_248z$6);
 
 var _g$6;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 var SvgIcProgressing = function SvgIcProgressing(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "1em",
@@ -770,8 +770,8 @@ EmptyState.Loading = Loading;
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-function _extends$j() {
-  _extends$j = Object.assign || function (target) {
+function _extends$k() {
+  _extends$k = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -785,7 +785,7 @@ function _extends$j() {
     return target;
   };
 
-  return _extends$j.apply(this, arguments);
+  return _extends$k.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$2(source, excluded) {
@@ -1511,7 +1511,7 @@ function ProgressBar(_ref) {
       isIn = _ref.isIn,
       theme = _ref.theme;
 
-  var style = _extends$j({}, userStyle, {
+  var style = _extends$k({}, userStyle, {
     animationDuration: delay + "ms",
     animationPlayState: isRunning ? 'running' : 'paused',
     opacity: hide ? 0 : 1
@@ -1788,9 +1788,9 @@ var ToastContainer = function ToastContainer(props) {
     ,
     id: containerId
   }, getToastToRender(function (position, toastList) {
-    var containerStyle = !toastList.length ? _extends$j({}, style, {
+    var containerStyle = !toastList.length ? _extends$k({}, style, {
       pointerEvents: 'none'
-    }) : _extends$j({}, style);
+    }) : _extends$k({}, style);
     return React.createElement("div", {
       className: getClassName(position),
       style: containerStyle,
@@ -1897,7 +1897,7 @@ function dispatchToast(content, options) {
 
 
 function mergeOptions(type, options) {
-  return _extends$j({}, options, {
+  return _extends$k({}, options, {
     type: options && options.type || type,
     toastId: getToastId(options)
   });
@@ -1914,7 +1914,7 @@ function toast(content, options) {
 }
 
 toast.loading = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$j({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$k({
     isLoading: true,
     autoClose: false,
     closeOnClick: false,
@@ -1930,7 +1930,7 @@ function handlePromise(promise, _ref2, options) {
   var id;
 
   if (pending) {
-    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$j({}, options, pending));
+    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$k({}, options, pending));
   }
 
   var resetParams = {
@@ -1949,7 +1949,7 @@ function handlePromise(promise, _ref2, options) {
       return;
     }
 
-    var baseParams = _extends$j({
+    var baseParams = _extends$k({
       type: type
     }, resetParams, options, {
       data: result
@@ -1960,10 +1960,10 @@ function handlePromise(promise, _ref2, options) {
     } : input; // if the id is set we know that it's an update
 
     if (id) {
-      toast.update(id, _extends$j({}, baseParams, params));
+      toast.update(id, _extends$k({}, baseParams, params));
     } else {
       // using toast.promise without loading
-      toast(params.render, _extends$j({}, baseParams, params));
+      toast(params.render, _extends$k({}, baseParams, params));
     }
 
     return result;
@@ -1987,7 +1987,7 @@ toast.warning = /*#__PURE__*/createToastByType(TYPE.WARNING);
 toast.warn = toast.warning;
 
 toast.dark = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$j({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$k({
     theme: 'dark'
   }, options)));
 };
@@ -2044,7 +2044,7 @@ toast.update = function (toastId, options) {
       var oldOptions = toast.props,
           oldContent = toast.content;
 
-      var nextOptions = _extends$j({}, oldOptions, options, {
+      var nextOptions = _extends$k({}, oldOptions, options, {
         toastId: options.toastId || toastId,
         updateId: generateToastId()
       });
@@ -9834,9 +9834,9 @@ function captureException(exception, captureContext) {
 }
 
 var _g$5;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 var SvgIcWarning = function SvgIcWarning(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -10375,9 +10375,9 @@ var Modal = function (_a) {
 };
 
 var _path$b;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
 var SvgIcCross = function SvgIcCross(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24",
@@ -14683,9 +14683,9 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 var Tippy = index;
 
 var _path$a;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 var SvgIcHelp = function SvgIcHelp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -14698,9 +14698,9 @@ var SvgIcHelp = function SvgIcHelp(props) {
 };
 
 var _path$9;
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
 var SvgIcHelpOutline = function SvgIcHelpOutline(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 17 16",
     width: "1em",
@@ -14758,9 +14758,9 @@ function TippyCustomized(props) {
 }
 
 var _path$8, _circle, _path2$1;
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 var SvgInjectTag = function SvgInjectTag(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20",
@@ -14795,9 +14795,9 @@ function PropagateTagInfo(_a) {
 }
 
 var _path$7;
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 var SvgIcInfoOutlined = function SvgIcInfoOutlined(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -15037,9 +15037,9 @@ var TagDetails = function (_a) {
 };
 
 var _path$6;
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 var SvgIcAdd = function SvgIcAdd(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -15174,8 +15174,8 @@ function ForceDeleteDialog(_a) {
     return (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(DeleteDialog, __assign({ title: forceDeleteDialogTitle, delete: onClickDelete, closeDelete: closeDeleteModal, deletePrefix: "Force " }, { children: jsxRuntime.jsxs(DeleteDialog.Description, { children: [jsxRuntime.jsxs("p", __assign({ className: "mt-12 mb-12 p-8 dc__break-word dc__window-bg" }, { children: ["Error: ", forceDeleteDialogMessage] })), jsxRuntime.jsx("p", { children: "Do you want to force delete?" })] }) })) }));
 }
 
-function _extends$b() {
-  _extends$b = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$c() {
+  _extends$c = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -15186,7 +15186,7 @@ function _extends$b() {
     }
     return target;
   };
-  return _extends$b.apply(this, arguments);
+  return _extends$c.apply(this, arguments);
 }
 
 /*
@@ -18727,7 +18727,7 @@ var Menu = function Menu(props) {
       getStyles = props.getStyles,
       innerRef = props.innerRef,
       innerProps = props.innerProps;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('menu', props),
     className: cx({
       menu: true
@@ -18759,7 +18759,7 @@ var MenuList = function MenuList(props) {
       innerProps = props.innerProps,
       innerRef = props.innerRef,
       isMulti = props.isMulti;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('menuList', props),
     className: cx({
       'menu-list': true,
@@ -18790,7 +18790,7 @@ var NoOptionsMessage = function NoOptionsMessage(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('noOptionsMessage', props),
     className: cx({
       'menu-notice': true,
@@ -18807,7 +18807,7 @@ var LoadingMessage = function LoadingMessage(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('loadingMessage', props),
     className: cx({
       'menu-notice': true,
@@ -18895,7 +18895,7 @@ var MenuPortal = /*#__PURE__*/function (_Component2) {
         rect: rect
       }; // same wrapper element whether fixed or portalled
 
-      var menuWrapper = jsx("div", _extends$b({
+      var menuWrapper = jsx("div", _extends$c({
         css: getStyles('menuPortal', state),
         className: cx({
           'menu-portal': true
@@ -18931,7 +18931,7 @@ var SelectContainer = function SelectContainer(props) {
       innerProps = props.innerProps,
       isDisabled = props.isDisabled,
       isRtl = props.isRtl;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('container', props),
     className: cx({
       '--is-disabled': isDisabled,
@@ -18966,7 +18966,7 @@ var ValueContainer = function ValueContainer(props) {
       isMulti = props.isMulti,
       getStyles = props.getStyles,
       hasValue = props.hasValue;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('valueContainer', props),
     className: cx({
       'value-container': true,
@@ -18992,7 +18992,7 @@ var IndicatorsContainer = function IndicatorsContainer(props) {
       cx = props.cx,
       innerProps = props.innerProps,
       getStyles = props.getStyles;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('indicatorsContainer', props),
     className: cx({
       indicators: true
@@ -19023,7 +19023,7 @@ var Svg = function Svg(_ref) {
   var size = _ref.size,
       props = _objectWithoutProperties(_ref, _excluded$2);
 
-  return jsx("svg", _extends$b({
+  return jsx("svg", _extends$c({
     height: size,
     width: size,
     viewBox: "0 0 20 20",
@@ -19034,14 +19034,14 @@ var Svg = function Svg(_ref) {
 };
 
 var CrossIcon = function CrossIcon(props) {
-  return jsx(Svg, _extends$b({
+  return jsx(Svg, _extends$c({
     size: 20
   }, props), jsx("path", {
     d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
   }));
 };
 var DownChevron = function DownChevron(props) {
-  return jsx(Svg, _extends$b({
+  return jsx(Svg, _extends$c({
     size: 20
   }, props), jsx("path", {
     d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
@@ -19074,7 +19074,7 @@ var DropdownIndicator = function DropdownIndicator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('dropdownIndicator', props),
     className: cx({
       indicator: true,
@@ -19089,7 +19089,7 @@ var ClearIndicator$1 = function ClearIndicator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('clearIndicator', props),
     className: cx({
       indicator: true,
@@ -19119,7 +19119,7 @@ var IndicatorSeparator = function IndicatorSeparator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("span", _extends$b({}, innerProps, {
+  return jsx("span", _extends$c({}, innerProps, {
     css: getStyles('indicatorSeparator', props),
     className: cx({
       'indicator-separator': true
@@ -19174,7 +19174,7 @@ var LoadingIndicator = function LoadingIndicator(props) {
       getStyles = props.getStyles,
       innerProps = props.innerProps,
       isRtl = props.isRtl;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('loadingIndicator', props),
     className: cx({
       indicator: true,
@@ -19235,7 +19235,7 @@ var Control = function Control(props) {
       innerRef = props.innerRef,
       innerProps = props.innerProps,
       menuIsOpen = props.menuIsOpen;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     ref: innerRef,
     css: getStyles('control', props),
     className: cx({
@@ -19267,12 +19267,12 @@ var Group = function Group(props) {
       label = props.label,
       theme = props.theme,
       selectProps = props.selectProps;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('group', props),
     className: cx({
       group: true
     }, className)
-  }, innerProps), jsx(Heading, _extends$b({}, headingProps, {
+  }, innerProps), jsx(Heading, _extends$c({}, headingProps, {
     selectProps: selectProps,
     theme: theme,
     getStyles: getStyles,
@@ -19304,7 +19304,7 @@ var GroupHeading = function GroupHeading(props) {
       _cleanCommonProps.data;
       var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1$1);
 
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('groupHeading', props),
     className: cx({
       'group-heading': true
@@ -19380,7 +19380,7 @@ var Input = function Input(props) {
     }, className),
     css: getStyles('input', props),
     "data-value": value || ''
-  }, jsx("input", _extends$b({
+  }, jsx("input", _extends$c({
     className: cx({
       input: true
     }, inputClassName),
@@ -19450,7 +19450,7 @@ var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove$1(_ref5) {
   var children = _ref5.children,
       innerProps = _ref5.innerProps;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     role: "button"
   }, innerProps), children || jsx(CrossIcon, {
     size: 14
@@ -19539,7 +19539,7 @@ var Option$1 = function Option(props) {
       isSelected = props.isSelected,
       innerRef = props.innerRef,
       innerProps = props.innerProps;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('option', props),
     className: cx({
       option: true,
@@ -19571,7 +19571,7 @@ var Placeholder = function Placeholder(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('placeholder', props),
     className: cx({
       placeholder: true
@@ -19604,7 +19604,7 @@ var SingleValue = function SingleValue(props) {
       getStyles = props.getStyles,
       isDisabled = props.isDisabled,
       innerProps = props.innerProps;
-  return jsx("div", _extends$b({
+  return jsx("div", _extends$c({
     css: getStyles('singleValue', props),
     className: cx({
       'single-value': true,
@@ -19852,7 +19852,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 
 var A11yText = function A11yText(props) {
-  return jsx("span", _extends$b({
+  return jsx("span", _extends$c({
     css: _ref
   }, props));
 };
@@ -20388,7 +20388,7 @@ function DummyInput(_ref) {
   var innerRef = _ref.innerRef,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return jsx("input", _extends$b({
+  return jsx("input", _extends$c({
     ref: innerRef
   }, props, {
     css: /*#__PURE__*/css$2({
@@ -22023,7 +22023,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
 
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
-        return /*#__PURE__*/React__namespace.createElement(DummyInput, _extends$b({
+        return /*#__PURE__*/React__namespace.createElement(DummyInput, _extends$c({
           id: id,
           innerRef: this.getInputRef,
           onBlur: this.onInputBlur,
@@ -22037,7 +22037,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         }, ariaAttributes));
       }
 
-      return /*#__PURE__*/React__namespace.createElement(Input, _extends$b({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(Input, _extends$c({}, commonProps, {
         autoCapitalize: "none",
         autoComplete: "off",
         autoCorrect: "off",
@@ -22081,7 +22081,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           isFocused = _this$state5.isFocused;
 
       if (!this.hasValue() || !controlShouldRenderValue) {
-        return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends$b({}, commonProps, {
+        return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends$c({}, commonProps, {
           key: "placeholder",
           isDisabled: isDisabled,
           isFocused: isFocused,
@@ -22095,7 +22095,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         return selectValue.map(function (opt, index) {
           var isOptionFocused = opt === focusedValue;
           var key = "".concat(_this3.getOptionLabel(opt), "-").concat(_this3.getOptionValue(opt));
-          return /*#__PURE__*/React__namespace.createElement(MultiValue, _extends$b({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(MultiValue, _extends$c({}, commonProps, {
             components: {
               Container: MultiValueContainer,
               Label: MultiValueLabel,
@@ -22127,7 +22127,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       }
 
       var singleValue = selectValue[0];
-      return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends$b({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends$c({}, commonProps, {
         data: singleValue,
         isDisabled: isDisabled
       }), this.formatOptionLabel(singleValue, 'value'));
@@ -22153,7 +22153,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends$b({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends$c({}, commonProps, {
         innerProps: innerProps,
         isFocused: isFocused
       }));
@@ -22173,7 +22173,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       var innerProps = {
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends$b({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends$c({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -22191,7 +22191,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       var commonProps = this.commonProps;
       var isDisabled = this.props.isDisabled;
       var isFocused = this.state.isFocused;
-      return /*#__PURE__*/React__namespace.createElement(IndicatorSeparator, _extends$b({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(IndicatorSeparator, _extends$c({}, commonProps, {
         isDisabled: isDisabled,
         isFocused: isFocused
       }));
@@ -22211,7 +22211,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends$b({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends$c({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -22274,7 +22274,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           onMouseOver: onHover,
           tabIndex: -1
         };
-        return /*#__PURE__*/React__namespace.createElement(Option, _extends$b({}, commonProps, {
+        return /*#__PURE__*/React__namespace.createElement(Option, _extends$c({}, commonProps, {
           innerProps: innerProps,
           data: data,
           isDisabled: isDisabled,
@@ -22298,7 +22298,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
                 groupIndex = item.index;
             var groupId = "".concat(_this4.getElementId('group'), "-").concat(groupIndex);
             var headingId = "".concat(groupId, "-heading");
-            return /*#__PURE__*/React__namespace.createElement(Group, _extends$b({}, commonProps, {
+            return /*#__PURE__*/React__namespace.createElement(Group, _extends$c({}, commonProps, {
               key: groupId,
               data: _data,
               options: options,
@@ -22337,12 +22337,12 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
-      var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends$b({}, commonProps, menuPlacementProps), function (_ref4) {
+      var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends$c({}, commonProps, menuPlacementProps), function (_ref4) {
         var ref = _ref4.ref,
             _ref4$placerProps = _ref4.placerProps,
             placement = _ref4$placerProps.placement,
             maxHeight = _ref4$placerProps.maxHeight;
-        return /*#__PURE__*/React__namespace.createElement(Menu, _extends$b({}, commonProps, menuPlacementProps, {
+        return /*#__PURE__*/React__namespace.createElement(Menu, _extends$c({}, commonProps, menuPlacementProps, {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
@@ -22357,7 +22357,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          return /*#__PURE__*/React__namespace.createElement(MenuList, _extends$b({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(MenuList, _extends$c({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
 
@@ -22372,7 +22372,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       // so we use the same component. the actual portalling logic is forked
       // within the component based on `menuPosition`
 
-      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React__namespace.createElement(MenuPortal, _extends$b({}, commonProps, {
+      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React__namespace.createElement(MenuPortal, _extends$c({}, commonProps, {
         appendTo: menuPortalTarget,
         controlElement: this.controlRef,
         menuPlacement: menuPlacement,
@@ -22437,7 +22437,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           isFocused = _this$state6.isFocused,
           selectValue = _this$state6.selectValue;
       var focusableOptions = this.getFocusableOptions();
-      return /*#__PURE__*/React__namespace.createElement(LiveRegion, _extends$b({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(LiveRegion, _extends$c({}, commonProps, {
         id: this.getElementId('live-region'),
         ariaSelection: ariaSelection,
         focusedOption: focusedOption,
@@ -22463,7 +22463,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           menuIsOpen = _this$props14.menuIsOpen;
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
-      return /*#__PURE__*/React__namespace.createElement(SelectContainer, _extends$b({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(SelectContainer, _extends$c({}, commonProps, {
         className: className,
         innerProps: {
           id: id,
@@ -22471,7 +22471,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         },
         isDisabled: isDisabled,
         isFocused: isFocused
-      }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends$b({}, commonProps, {
+      }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends$c({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,
@@ -22480,9 +22480,9 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         isFocused: isFocused,
         menuIsOpen: menuIsOpen
-      }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends$b({}, commonProps, {
+      }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends$c({}, commonProps, {
         isDisabled: isDisabled
-      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends$b({}, commonProps, {
+      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends$c({}, commonProps, {
         isDisabled: isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
@@ -22555,7 +22555,7 @@ Select$1.defaultProps = defaultProps;
 
 var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var baseSelectProps = useStateManager(props);
-  return /*#__PURE__*/React__namespace.createElement(Select$1, _extends$b({
+  return /*#__PURE__*/React__namespace.createElement(Select$1, _extends$c({
     ref: ref
   }, baseSelectProps));
 });
@@ -22563,9 +22563,9 @@ var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var Select = StateManagedSelect;
 
 var _g$4;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
 var SvgIcAppstatusCancelled = function SvgIcAppstatusCancelled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 28 28",
     width: "1em",
@@ -22587,9 +22587,9 @@ var SvgIcAppstatusCancelled = function SvgIcAppstatusCancelled(props) {
 };
 
 var _path$5;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
 var SvgIcCheck = function SvgIcCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -22606,9 +22606,9 @@ var SvgIcCheck = function SvgIcCheck(props) {
 };
 
 var _g$3;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 var SvgIcErrorMedium = function SvgIcErrorMedium(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -23083,9 +23083,9 @@ exports.ConsequenceAction = void 0;
 })(exports.ConsequenceAction || (exports.ConsequenceAction = {}));
 
 var _g$2;
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 var SvgIcInfoFilled = function SvgIcInfoFilled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -23165,9 +23165,9 @@ function DeleteComponent(_a) {
 }
 
 var _path$4;
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
 var SvgIcPencil = function SvgIcPencil(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20",
@@ -23183,9 +23183,9 @@ var SvgIcPencil = function SvgIcPencil(props) {
 };
 
 var _path$3, _path2, _path3;
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 var SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     width: "1em",
     height: "1em",
     viewBox: "0 0 12 12",
@@ -23210,9 +23210,9 @@ var SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
 };
 
 var _path$2;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 var SvgIcMinus = function SvgIcMinus(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -23226,9 +23226,9 @@ var SvgIcMinus = function SvgIcMinus(props) {
 };
 
 var _g$1;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 var SvgIcErrorExclamation = function SvgIcErrorExclamation(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -23246,9 +23246,9 @@ var SvgIcErrorExclamation = function SvgIcErrorExclamation(props) {
 };
 
 var _path$1;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgIcEnter = function SvgIcEnter(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -23613,9 +23613,9 @@ function useDebouncedEffect(callback, delay, deps) {
 }
 
 var _g;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgIcErrorCross = function SvgIcErrorCross(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -23684,9 +23684,9 @@ function Grid(_a) {
 }
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgIcCopy = function SvgIcCopy(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -23859,6 +23859,55 @@ function AppStatus(_a) {
     return hideStatusMessage ? (iconClass || isVirtualEnv ? (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: false, placement: "top", content: textContent }, { children: jsxRuntime.jsx("div", __assign({ className: "flex" }, { children: renderIcon() })) }))) : (renderIcon())) : (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex mr-6" }, { children: renderIcon() })), jsxRuntime.jsx("p", __assign({ "data-testid": "".concat(status, "-app-status"), className: "dc__truncate-text dc__first-letter-capitalize cn-6 m-0" }, { children: textContent }))] })));
 }
 
+var _style, _rect;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgIcRotateDevtron = function SvgIcRotateDevtron(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 100 100",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _style || (_style = /*#__PURE__*/React__namespace.createElement("style", null, "@keyframes path-fill{0%,30%,to{fill:#3989d9}45%{fill:#abcff3}}@keyframes top-shape{0%,to{transform:translateX(0) translateY(0) rotate(0deg);transform-origin:center center}30%{transform:translateX(0) translateY(0) rotate(10deg);transform-origin:center center}45%{transform:translateX(-6px) translateY(-6px) rotate(15deg);transform-origin:center center}}@keyframes bottom-shape{0%,to{transform:translateX(0) translateY(0) rotate(0deg);transform-origin:center center}30%{transform:translateX(0) translateY(0) rotate(10deg);transform-origin:center center}45%{transform:translateX(6px) translateY(6px) rotate(15deg);transform-origin:center center}}@keyframes rotate-group{0%,44%{transform:rotate(0deg)}to{transform:rotate(360deg);animation-timing-function:ease-in-out}}")), _rect || (_rect = /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 100,
+    height: 100,
+    rx: 20,
+    fill: "#E5F2FF"
+  })), /*#__PURE__*/React__namespace.createElement("g", {
+    style: {
+      animation: "rotate-group 1.2s infinite reverse",
+      transformOrigin: "center center"
+    }
+  }, /*#__PURE__*/React__namespace.createElement("g", {
+    style: {
+      animation: "top-shape 1.2s infinite",
+      transformOrigin: "center center"
+    }
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m59.858 21.95-21.25-.075a5.169 5.169 0 0 0-4.429 2.492l-14.717 24.15a4.896 4.896 0 0 0 .034 5.145L30.913 71.88a3.287 3.287 0 0 0 3.541 1.846 3.334 3.334 0 0 0 2.692-2.813 3.5 3.5 0 0 0-.263-1.883l-.05-.083a3.513 3.513 0 0 0-.346-.563l-1.291-2.075-6.85-10.95a3.158 3.158 0 0 1-.15-3.437c1.979-3.325 6.317-10.417 7.291-11.575a3.626 3.626 0 0 1 2.738-.95l5.396.416a1.616 1.616 0 0 1 1.142 2.5l-2.25 3.48a3.033 3.033 0 0 0-.309.483v.004a2.958 2.958 0 0 0-.25 1.992 2.854 2.854 0 0 0 5.363.604l14.745-22.65c1.146-1.758.009-4.163-2.062-4.27a2.574 2.574 0 0 0-.142-.005Z",
+    fill: "#3989D9",
+    style: {
+      animation: "path-fill 1.2s infinite"
+    }
+  })), /*#__PURE__*/React__namespace.createElement("g", {
+    style: {
+      animation: "bottom-shape 1.2s infinite",
+      transformOrigin: "center center"
+    }
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M65.446 26.238a3.288 3.288 0 0 1 3.55 1.833l11.492 18.162a4.893 4.893 0 0 1 .062 5.146L65.938 75.592a5.167 5.167 0 0 1-4.417 2.512l-21.25.021a2.575 2.575 0 0 1-.142 0c-2.07-.1-3.216-2.5-2.083-4.263l14.646-22.716a2.854 2.854 0 0 1 5.366.579 2.958 2.958 0 0 1-.55 2.483l-2.229 3.488a1.617 1.617 0 0 0 1.15 2.5l5.4.392a3.624 3.624 0 0 0 2.73-.967c.541-.646 2.108-3.125 3.733-5.78l.975-1.595c.966-1.592 1.879-3.125 2.537-4.233a3.157 3.157 0 0 0-.166-3.434l.02-.012-6.92-10.909-1.296-2.07a3.355 3.355 0 0 1-.355-.563l-.05-.075a3.5 3.5 0 0 1-.27-1.887 3.334 3.334 0 0 1 2.679-2.825Z",
+    fill: "#3989D9",
+    style: {
+      animation: "path-fill 1.2s infinite"
+    }
+  }))));
+};
+
+function DevtronProgressing(_a) {
+    var classes = _a.classes, parentClasses = _a.parentClasses;
+    return (jsxRuntime.jsx("div", __assign({ className: parentClasses ? parentClasses : '' }, { children: jsxRuntime.jsx(SvgIcRotateDevtron, { className: classes ? classes : '' }) })));
+}
+
 exports.AppStatus = AppStatus;
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
@@ -23878,6 +23927,7 @@ exports.DebouncedSearch = DebouncedSearch;
 exports.DeleteComponent = DeleteComponent;
 exports.DeleteDialog = DeleteDialog;
 exports.DetailsProgressing = DetailsProgressing;
+exports.DevtronProgressing = DevtronProgressing;
 exports.DialogForm = DialogForm;
 exports.DialogFormSubmit = DialogFormSubmit;
 exports.Drawer = Drawer;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.41-beta-8",
+    "version": "0.0.42-beta-1",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Assets/Icon/ic-rotate-devtron.svg

@@ -0,0 +1,103 @@
+
+<svg width="80" height="80" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+  .svg__loader_group-top {
+    animation: top-shape 1.2s infinite;
+    transform-origin: center center;
+  }
+  .svg__loader_group-bottom {
+    animation: bottom-shape 1.2s infinite;
+    transform-origin: center center;
+  }
+
+  .svg__loader_shapepath-top {
+    animation: path-fill 1.2s infinite;
+    }
+  .svg__loader_shapepath-bottom {
+    animation: path-fill 1.2s infinite;
+    }
+
+  .svg__loader_rotating-group {
+    animation: rotate-group 1.2s infinite reverse;
+    transform-origin: center center;
+    }
+
+  @keyframes path-fill {
+    0% {
+      fill: #3989D9;
+    }
+    30% {
+      fill: #3989D9;
+    }
+    45% {
+      fill: #ABCFF3;
+    }
+    100% {
+      fill: #3989D9;
+    }
+  }
+
+  @keyframes top-shape {
+    0% {
+      transform: translateX(0px) translateY(0px) rotate(0deg);
+      transform-origin: center center;
+    }
+    30% {
+      transform: translateX(0px) translateY(0px) rotate(10deg);
+      transform-origin: center center;
+    }
+    45% {
+      transform: translateX(-6px) translateY(-6px) rotate(15deg);
+      transform-origin: center center;
+    }
+      
+    100% {
+      transform: translateX(0px) translateY(0px) rotate(0deg);
+      transform-origin: center center;
+    }
+  }
+
+  @keyframes bottom-shape {
+    0% {
+      transform: translateX(0px) translateY(0px) rotate(0deg);
+      transform-origin: center center;
+    }
+    30% {
+      transform: translateX(0px) translateY(0px) rotate(10deg);
+      transform-origin: center center;
+    }
+    45% {
+      transform: translateX(6px) translateY(6px) rotate(15deg);
+      transform-origin: center center;
+    }
+      
+    100% {
+      transform: translateX(0px) translateY(0px) rotate(0deg);
+      transform-origin: center center;
+    }
+  }
+  
+  @keyframes rotate-group {
+    0% {
+      transform: rotate(0deg);
+    }
+    44% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+      animation-timing-function: ease-in-out;
+    }
+  }
+  </style>
+<rect width="100" height="100" rx="20" fill="#E5F2FF"/>
+<g class="svg__loader_rotating-group">
+
+  <g class="svg__loader_group-top">
+    <path class="svg__loader_shapepath-top" d="M59.8584 21.95L38.6084 21.875C36.8042 21.8667 35.1292 22.8125 34.1792 24.3667L19.4625 48.5167C18.9899 49.293 18.7427 50.1855 18.7486 51.0943C18.7545 52.0031 19.0132 52.8924 19.4958 53.6625L30.9125 71.8792C31.2183 72.533 31.7308 73.0679 32.3709 73.4015C33.011 73.7351 33.7431 73.8488 34.4542 73.725C35.141 73.5973 35.7703 73.2572 36.2533 72.7525C36.7362 72.2478 37.0485 71.6042 37.1459 70.9125C37.2338 70.2725 37.143 69.6207 36.8834 69.0292L36.8334 68.9458C36.7375 68.7458 36.6167 68.5583 36.4875 68.3833L35.1958 66.3083L28.3458 55.3583C27.9912 54.8612 27.7883 54.2719 27.7617 53.6618C27.735 53.0517 27.8858 52.447 28.1958 51.9208C30.175 48.5958 34.5125 41.5042 35.4875 40.3458C35.854 40.0077 36.2862 39.7489 36.7572 39.5854C37.2282 39.4219 37.7279 39.3574 38.225 39.3958L43.6208 39.8125C43.8939 39.8472 44.1535 39.951 44.3752 40.1142C44.5969 40.2773 44.7733 40.4943 44.8876 40.7447C45.0019 40.9951 45.0504 41.2705 45.0286 41.5448C45.0067 41.8192 44.9151 42.0834 44.7625 42.3125L42.5125 45.7917C42.3947 45.9427 42.2915 46.1045 42.2042 46.275V46.2792C41.8913 46.8936 41.8029 47.5981 41.9542 48.2708C42.0838 48.8505 42.391 49.3753 42.833 49.7721C43.275 50.1689 43.8298 50.4179 44.4201 50.4844C45.0103 50.5509 45.6066 50.4316 46.1259 50.1431C46.6451 49.8546 47.0614 49.4113 47.3167 48.875L62.0625 26.225C63.2084 24.4667 62.0709 22.0625 60 21.9542C59.9528 21.9515 59.9056 21.9501 59.8584 21.95Z" fill="#3989D9"/>
+  </g>
+  <g class="svg__loader_group-bottom">
+    <path class="svg__loader_shapepath-bottom" d="M65.4458 26.2375C66.1567 26.1108 66.8896 26.2217 67.5313 26.553C68.1729 26.8844 68.6876 27.4178 68.9958 28.0709L80.4875 46.2334C81.4833 47.7959 81.5041 49.7959 80.55 51.3792L65.9375 75.5917C65.4801 76.3555 64.8332 76.9882 64.0594 77.4284C63.2855 77.8686 62.4111 78.1014 61.5208 78.1042L40.2708 78.125C40.2236 78.1263 40.1764 78.1263 40.1291 78.125C38.0583 78.025 36.9125 75.625 38.0458 73.8625L52.6916 51.1459C52.9442 50.6078 53.3584 50.162 53.8765 49.8707C54.3946 49.5794 54.9907 49.4571 55.5816 49.5209C56.1725 49.5847 56.7288 49.8313 57.1728 50.2265C57.6168 50.6216 57.9264 51.1455 58.0583 51.725C58.2135 52.3963 58.1295 53.1007 57.8208 53.7167C57.7327 53.8889 57.628 54.0564 57.5083 54.2084L55.2791 57.6959C55.1264 57.9255 55.035 58.1904 55.0135 58.4654C54.9921 58.7403 55.0413 59.0162 55.1566 59.2667C55.2718 59.5173 55.4493 59.7342 55.672 59.8968C55.8947 60.0595 56.1554 60.1624 56.4291 60.1959L61.8291 60.5875C62.3261 60.6226 62.8249 60.5548 63.2944 60.3885C63.764 60.2222 64.1942 59.9609 64.5583 59.6209C65.1 58.975 66.6666 56.4959 68.2916 53.8417L69.2666 52.2459C70.2333 50.6542 71.1458 49.1209 71.8041 48.0125C72.1109 47.4853 72.2584 46.8805 72.2288 46.2712C72.1992 45.6619 71.9938 45.0743 71.6375 44.5792L71.6583 44.5667L64.7375 33.6584L63.4416 31.5875C63.3053 31.4122 63.1866 31.2238 63.0875 31.025L63.0375 30.95C62.7742 30.3581 62.6805 29.7046 62.7666 29.0625C62.8608 28.3703 63.1702 27.7251 63.6509 27.2182C64.1317 26.7113 64.7595 26.3682 65.4458 26.2375Z" fill="#3989D9"/>
+  </g>
+</g>
+</svg>

package/src/Common/DevtronProgressing/DevtronProgressing.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { ReactComponent as ICRotateDevtron } from '../../Assets/Icon/ic-rotate-devtron.svg'
+import { DevtronProgressingProps } from './types'
+
+export function DevtronProgressing({ classes, parentClasses }: DevtronProgressingProps): JSX.Element {
+    return (
+        <div className={parentClasses ? parentClasses : ''}>
+            <ICRotateDevtron className={classes ? classes : ''} />
+        </div>
+    )
+}

package/src/Common/DevtronProgressing/index.ts

@@ -0,0 +1 @@
+export * from './DevtronProgressing'

package/src/Common/DevtronProgressing/types.ts

@@ -0,0 +1,4 @@
+export interface DevtronProgressingProps {
+    classes?: string
+    parentClasses?: string
+}

package/src/Common/index.ts

@@ -40,3 +40,4 @@ export { default as Grid } from './Grid/Grid'
 export { default as ClipboardButton } from './ClipboardButton/ClipboardButton'
 export * from './Hooks'
 export { AppStatus } from './AppStatus'
+export * from './DevtronProgressing'