@devtron-labs/devtron-fe-common-lib 0.0.39 → 0.0.40-beta-1

package/dist/index.js

@@ -4,6 +4,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var reactRouterDom = require('react-router-dom');
+var RJSF = require('@rjsf/core');
+var RJSFValidator = require('@rjsf/validator-ajv8');
+var utils = require('@rjsf/utils');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -44,6 +47,7 @@ var ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING: 'app/image-tagging',
+    CD_MATERIAL_GET: 'app/cd-pipeline'
 };
 exports.KEY_VALUE = void 0;
 (function (KEY_VALUE) {
@@ -430,6 +434,24 @@ exports.FilterStates = void 0;
     FilterStates[FilterStates["BLOCKED"] = 1] = "BLOCKED";
     FilterStates[FilterStates["ERROR"] = 2] = "ERROR";
 })(exports.FilterStates || (exports.FilterStates = {}));
+exports.MaterialDataSource = void 0;
+(function (MaterialDataSource) {
+    MaterialDataSource["EXTERNAL"] = "ext";
+})(exports.MaterialDataSource || (exports.MaterialDataSource = {}));
+exports.CDMaterialServiceEnum = void 0;
+(function (CDMaterialServiceEnum) {
+    CDMaterialServiceEnum["ROLLBACK"] = "rollback";
+    CDMaterialServiceEnum["CD_MATERIALS"] = "cd-materials";
+})(exports.CDMaterialServiceEnum || (exports.CDMaterialServiceEnum = {}));
+exports.CDMaterialResourceQuery = void 0;
+(function (CDMaterialResourceQuery) {
+    CDMaterialResourceQuery["PENDING_APPROVAL"] = "PENDING_APPROVAL";
+})(exports.CDMaterialResourceQuery || (exports.CDMaterialResourceQuery = {}));
+exports.CDMaterialFilterQuery = void 0;
+(function (CDMaterialFilterQuery) {
+    CDMaterialFilterQuery["RESOURCE"] = "ELIGIBLE_RESOURCES";
+    CDMaterialFilterQuery["ALL"] = "ALL_RESOURCES";
+})(exports.CDMaterialFilterQuery || (exports.CDMaterialFilterQuery = {}));
 exports.DeploymentAppTypes = void 0;
 (function (DeploymentAppTypes) {
     DeploymentAppTypes["HELM"] = "helm";
@@ -693,13 +715,13 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$6 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 6px;\n}\n.empty-state .subtitle--text-start {\n  text-align: start;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
-styleInject(css_248z$6);
+var css_248z$7 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 6px;\n}\n.empty-state .subtitle--text-start {\n  text-align: start;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
+styleInject(css_248z$7);
 
 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",
@@ -751,8 +773,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];
 
@@ -766,7 +788,7 @@ function _extends$j() {
     return target;
   };
 
-  return _extends$j.apply(this, arguments);
+  return _extends$k.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$2(source, excluded) {
@@ -1492,7 +1514,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
@@ -1769,9 +1791,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,
@@ -1878,7 +1900,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)
   });
@@ -1895,7 +1917,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,
@@ -1911,7 +1933,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 = {
@@ -1930,7 +1952,7 @@ function handlePromise(promise, _ref2, options) {
       return;
     }
 
-    var baseParams = _extends$j({
+    var baseParams = _extends$k({
       type: type
     }, resetParams, options, {
       data: result
@@ -1941,10 +1963,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;
@@ -1968,7 +1990,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)));
 };
@@ -2025,7 +2047,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()
       });
@@ -9815,9 +9837,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",
@@ -10280,8 +10302,8 @@ var VisibleModal = /** @class */ (function (_super) {
     return VisibleModal;
 }(React.Component));
 
-var css_248z$5 = ".drawer {\n  position: absolute;\n  overflow: hidden;\n}\n.drawer.left, .drawer.right {\n  top: 0;\n  bottom: 0;\n  width: 0;\n  transition: width 200ms;\n}\n.drawer.left.show, .drawer.right.show {\n  min-width: var(--minWidth);\n  width: var(--width);\n  max-width: var(--maxWidth);\n}\n.drawer.top, .drawer.bottom {\n  left: 0;\n  right: 0;\n  height: 0;\n  transition: height 200ms;\n}\n.drawer.top.show, .drawer.bottom.show {\n  height: var(--height);\n}\n.drawer.right {\n  right: 0;\n}\n.drawer.left {\n  left: 0;\n}\n.drawer.top {\n  top: 0;\n}\n.drawer.bottom {\n  bottom: 0;\n}";
-styleInject(css_248z$5);
+var css_248z$6 = ".drawer {\n  position: absolute;\n  overflow: hidden;\n}\n.drawer.left, .drawer.right {\n  top: 0;\n  bottom: 0;\n  width: 0;\n  transition: width 200ms;\n}\n.drawer.left.show, .drawer.right.show {\n  min-width: var(--minWidth);\n  width: var(--width);\n  max-width: var(--maxWidth);\n}\n.drawer.top, .drawer.bottom {\n  left: 0;\n  right: 0;\n  height: 0;\n  transition: height 200ms;\n}\n.drawer.top.show, .drawer.bottom.show {\n  height: var(--height);\n}\n.drawer.right {\n  right: 0;\n}\n.drawer.left {\n  left: 0;\n}\n.drawer.top {\n  top: 0;\n}\n.drawer.bottom {\n  bottom: 0;\n}";
+styleInject(css_248z$6);
 
 var Drawer = function (_a) {
     var children = _a.children, position = _a.position, height = _a.height, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, parentClassName = _a.parentClassName, onEscape = _a.onEscape;
@@ -10355,16 +10377,16 @@ var Modal = function (_a) {
         }, id: "popup", className: "".concat(rootClassName, " popup ").concat(modal ? 'modal' : ''), style: __assign({}, style) }, { children: children })), document.getElementById('visible-modal'));
 };
 
-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); }
+var _path$c;
+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",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M19.28 5.78a.75.75 0 0 0-1.06-1.06l1.06 1.06ZM4.72 18.22a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm13.5 1.06a.75.75 0 1 0 1.06-1.06l-1.06 1.06ZM5.78 4.72a.75.75 0 0 0-1.06 1.06l1.06-1.06Zm12.44 0-6.75 6.75 1.06 1.06 6.75-6.75-1.06-1.06Zm-6.75 6.75-6.75 6.75 1.06 1.06 6.75-6.75-1.06-1.06Zm7.81 6.75-6.75-6.75-1.06 1.06 6.75 6.75 1.06-1.06Zm-6.75-6.75L5.78 4.72 4.72 5.78l6.75 6.75 1.06-1.06Z",
     fill: "#596168"
   })));
@@ -14663,38 +14685,38 @@ 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); }
+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); }
 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",
     viewBox: "0 0 24 24"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#767D84",
     fillRule: "evenodd",
     d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm-.205 12.868c-.615 0-1.12.505-1.12 1.12 0 .617.505 1.121 1.12 1.121.615 0 1.12-.504 1.12-1.12 0-.616-.506-1.12-1.12-1.12zM11.863 7c-1.667 0-3.197 1.187-3.196 2.527 0 .546.41.833.888.833 1.325 0 .642-1.803 2.39-1.803.82 0 1.311.438 1.311 1.175 0 1.34-2.39 1.708-2.39 3.334 0 .438.287.915.874.915.902 0 .792-.67 1.12-1.148.438-.642 2.473-1.325 2.473-3.101 0-1.927-1.721-2.732-3.47-2.732z"
   })));
 };
 
-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); }
+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); }
 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",
     height: "1em"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#767D84",
     fillRule: "evenodd",
     d: "M9 1.333a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 9 1.333zm0 1.334C6.054 2.667 3.667 5.054 3.667 8S6.054 13.333 9 13.333 14.333 10.946 14.333 8 11.946 2.667 9 2.667zm-.137 7.245c.41 0 .747.337.747.747s-.337.747-.747.747-.747-.336-.747-.747a.75.75 0 0 1 .747-.747zm.046-5.245c1.166 0 2.313.537 2.313 1.82 0 1.185-1.357 1.64-1.648 2.068-.22.319-.146.766-.747.766-.392 0-.583-.319-.583-.61 0-1.085 1.593-1.33 1.593-2.223 0-.492-.327-.783-.873-.783-1.166 0-.711 1.202-1.594 1.202-.319 0-.592-.191-.592-.556 0-.893 1.02-1.684 2.13-1.684z"
   })));
 };
 
-var css_248z$4 = ".tippy-box[data-animation=shift-toward-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=top][data-state=hidden]{transform:translateY(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=bottom][data-state=hidden]{transform:translateY(5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=left][data-state=hidden]{transform:translateX(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=right][data-state=hidden]{transform:translateX(5px)}";
-styleInject(css_248z$4);
+var css_248z$5 = ".tippy-box[data-animation=shift-toward-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=top][data-state=hidden]{transform:translateY(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=bottom][data-state=hidden]{transform:translateY(5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=left][data-state=hidden]{transform:translateX(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=right][data-state=hidden]{transform:translateX(5px)}";
+styleInject(css_248z$5);
 
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions
@@ -14738,16 +14760,16 @@ function TippyCustomized(props) {
     return (jsxRuntime.jsx(Tippy, __assign({ className: "".concat(isWhiteTheme ? 'tippy-white-container default-white' : 'tippy-black-container default-black', " no-content-padding tippy-shadow ").concat(className), arrow: arrow || false, interactive: interactive || false, placement: placement || 'top', content: getTippyContent(), trigger: trigger || 'mouseenter', onMount: onTippyMount, onClickOutside: closeTippy, showOnCreate: showOnCreate || false, animation: animation || 'fade', duration: duration || 300, visible: props.visible }, { children: children })));
 }
 
-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); }
+var _path$9, _circle, _path2$1;
+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",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10 10H3.333",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -14775,15 +14797,15 @@ function PropagateTagInfo(_a) {
     return (jsxRuntime.jsx(TippyCustomized, __assign({ theme: exports.TippyTheme.white, className: "w-300", placement: "top", Icon: SvgInjectTag, heading: 'Propagate tags to K8s resources', infoText: "", additionalContent: additionalInfo(), showCloseButton: true, trigger: "click", interactive: true, documentationLink: isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS, documentationLinkText: "View Documentation" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flexbox cursor" }, { children: [jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-16 mt-2 mr-4" }), jsxRuntime.jsx("span", { children: "Propagate tags" }), jsxRuntime.jsx(SvgIcHelpOutline, { className: "icon-dim-16 mt-2 ml-4" })] })) })));
 }
 
-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); }
+var _path$8;
+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",
     viewBox: "0 0 20 20"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10 1.667c4.6 0 8.333 3.733 8.333 8.333S14.6 18.333 10 18.333 1.667 14.6 1.667 10 5.4 1.667 10 1.667zm0 1.666A6.67 6.67 0 0 0 3.333 10 6.67 6.67 0 0 0 10 16.667 6.67 6.67 0 0 0 16.667 10 6.67 6.67 0 0 0 10 3.333zm0 5.834c.46 0 .833.373.833.833v3.333a.834.834 0 1 1-1.666 0V10c0-.46.373-.833.833-.833zm0-3.334A.833.833 0 1 1 10 7.5a.833.833 0 0 1 0-1.667z",
     fill: "#06C",
     fillRule: "evenodd"
@@ -15017,15 +15039,15 @@ var TagDetails = function (_a) {
     return (jsxRuntime.jsxs("div", __assign({ className: "flexbox mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ".concat(tagData.propagate ? 'bcn-7' : '', " ").concat(tagData.key.startsWith("devtron.ai/") ? 'cursor-not-allowed bcn-1' : ''), onClick: propagateTagToResource, "data-testid": "propagate-tag-".concat(index) }, { children: jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-20 mt-4 ".concat(tagData.propagate ? 'scn-0' : '') }) })), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.KEY, placeholder: "Enter key", tabIndex: tabIndex - 1, refVar: keyRef, dependentRef: valueRef, tagOptions: suggestedTagsOptions }), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.VALUE, placeholder: "Enter value", tabIndex: tabIndex, refVar: valueRef, dependentRef: keyRef }), jsxRuntime.jsx("div", __assign({ className: "dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top", onClick: deleteTag, "data-testid": "delete-tag-".concat(index) }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-20 mt-4" }) }))] })));
 };
 
-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); }
+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); }
 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",
     viewBox: "0 0 24 24"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     className: "ic-add_svg__fill-color",
     fill: "#999",
     d: "M18 13h-5v5a1 1 0 0 1-2 0v-5H6a1 1 0 0 1 0-2h5V6a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"
@@ -15143,8 +15165,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) {
@@ -15155,7 +15177,7 @@ function _extends$b() {
     }
     return target;
   };
-  return _extends$b.apply(this, arguments);
+  return _extends$c.apply(this, arguments);
 }
 
 /*
@@ -18696,7 +18718,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
@@ -18720,7 +18742,7 @@ var menuListCSS = function menuListCSS(_ref4) {
     WebkitOverflowScrolling: 'touch'
   };
 };
-var MenuList = function MenuList(props) {
+var MenuList$1 = function MenuList(props) {
   var children = props.children,
       className = props.className,
       cx = props.cx,
@@ -18728,7 +18750,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,
@@ -18759,7 +18781,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,
@@ -18776,7 +18798,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,
@@ -18864,7 +18886,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
@@ -18900,7 +18922,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,
@@ -18935,7 +18957,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,
@@ -18961,7 +18983,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
@@ -18992,7 +19014,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",
@@ -19003,14 +19025,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"
@@ -19037,13 +19059,13 @@ var baseCSS = function baseCSS(_ref3) {
 };
 
 var dropdownIndicatorCSS = baseCSS;
-var DropdownIndicator = function DropdownIndicator(props) {
+var DropdownIndicator$1 = function DropdownIndicator(props) {
   var children = props.children,
       className = props.className,
       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,
@@ -19058,7 +19080,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,
@@ -19088,7 +19110,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
@@ -19143,7 +19165,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,
@@ -19204,7 +19226,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({
@@ -19236,12 +19258,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,
@@ -19273,7 +19295,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
@@ -19349,7 +19371,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),
@@ -19419,7 +19441,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
@@ -19508,7 +19530,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,
@@ -19540,7 +19562,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
@@ -19573,7 +19595,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,
@@ -19585,7 +19607,7 @@ var SingleValue = function SingleValue(props) {
 var components = {
   ClearIndicator: ClearIndicator$1,
   Control: Control,
-  DropdownIndicator: DropdownIndicator,
+  DropdownIndicator: DropdownIndicator$1,
   DownChevron: DownChevron,
   CrossIcon: CrossIcon,
   Group: Group,
@@ -19595,7 +19617,7 @@ var components = {
   Input: Input,
   LoadingIndicator: LoadingIndicator,
   Menu: Menu,
-  MenuList: MenuList,
+  MenuList: MenuList$1,
   MenuPortal: MenuPortal,
   LoadingMessage: LoadingMessage,
   NoOptionsMessage: NoOptionsMessage,
@@ -19821,7 +19843,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));
 };
@@ -20357,7 +20379,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({
@@ -21992,7 +22014,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,
@@ -22006,7 +22028,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",
@@ -22050,7 +22072,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,
@@ -22064,7 +22086,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,
@@ -22096,7 +22118,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'));
@@ -22122,7 +22144,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
       }));
@@ -22142,7 +22164,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
@@ -22160,7 +22182,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
       }));
@@ -22180,7 +22202,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
@@ -22243,7 +22265,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,
@@ -22267,7 +22289,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,
@@ -22306,12 +22328,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,
@@ -22326,7 +22348,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);
 
@@ -22341,7 +22363,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,
@@ -22406,7 +22428,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,
@@ -22432,7 +22454,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,
@@ -22440,7 +22462,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,
@@ -22449,9 +22471,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());
     }
@@ -22524,17 +22546,17 @@ 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));
 });
 
-var Select = StateManagedSelect;
+var ReactSelect = 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",
@@ -22555,15 +22577,15 @@ 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); }
+var _path$6;
+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",
     viewBox: "0 0 24 24"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "#06C",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -22575,9 +22597,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",
@@ -22639,11 +22661,11 @@ var multiSelectStyles = {
     valueContainer: function (base, state) { return (__assign(__assign({}, base), { color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color })); },
 };
 var CustomSelect = function (props) {
-    return jsxRuntime.jsx(Select, __assign({}, props));
+    return jsxRuntime.jsx(ReactSelect, __assign({}, props));
 };
 
-var css_248z$3 = ".info-bar-container .info_text .success {\n  background-color: var(--G100);\n}\n.info-bar-container .warn {\n  background: var(--Y100);\n  border: solid var(--Y200);\n}\n.info-bar-container .warn .warning-icon path:nth-child(2) {\n  fill: var(--Y700);\n}\n.info-bar-container .info_bar {\n  background-color: var(--B100);\n  border: 1px solid var(--B200);\n}\n.info-bar-container .error_bar {\n  background-color: var(--R100);\n  border: 1px solid var(--R200);\n}\n.info-bar-container .question-bar {\n  background-color: var(--V100);\n  border: 1px solid var(--V200);\n}";
-styleInject(css_248z$3);
+var css_248z$4 = ".info-bar-container .info_text .success {\n  background-color: var(--G100);\n}\n.info-bar-container .warn {\n  background: var(--Y100);\n  border: solid var(--Y200);\n}\n.info-bar-container .warn .warning-icon path:nth-child(2) {\n  fill: var(--Y700);\n}\n.info-bar-container .info_bar {\n  background-color: var(--B100);\n  border: 1px solid var(--B200);\n}\n.info-bar-container .error_bar {\n  background-color: var(--R100);\n  border: 1px solid var(--R200);\n}\n.info-bar-container .question-bar {\n  background-color: var(--V100);\n  border: 1px solid var(--V200);\n}";
+styleInject(css_248z$4);
 
 function InfoColourBar(_a) {
     var message = _a.message, classname = _a.classname, Icon = _a.Icon, iconClass = _a.iconClass, iconSize = _a.iconSize, renderActionButton = _a.renderActionButton, linkText = _a.linkText, redirectLink = _a.redirectLink, linkOnClick = _a.linkOnClick, linkClass = _a.linkClass, internalLink = _a.internalLink, styles = _a.styles;
@@ -22697,77 +22719,170 @@ function getUserRole(appName) {
 function setImageTags(request, pipelineId, artifactId) {
     return post("".concat(ROUTES.IMAGE_TAGGING, "/").concat(pipelineId, "/").concat(artifactId), request);
 }
-// FIXME: This is only returning materials to cater the case of search in approval but it should be a common function service coming from dashboard.
-var getCDMaterials = function (cdMaterialId, stageType, abortSignal, isApprovalNode, imageTag) {
-    var URL = (!imageTag) ? "app/cd-pipeline/".concat(cdMaterialId, "/material?stage=").concat(stageMap[stageType]) : "app/cd-pipeline/".concat(cdMaterialId, "/material?stage=").concat(stageMap[stageType], "&search=").concat(imageTag);
-    return get(URL, {
-        signal: abortSignal,
-    }).then(function (response) {
-        var _a;
-        var artifacts = (_a = response.result.ci_artifacts) !== null && _a !== void 0 ? _a : [];
-        if (!response.result) {
-            return {
-                materials: [],
-            };
+var processURL = function (url, params) {
+    var validParams = Object.keys(params).filter(function (key) {
+        return params[key] != null;
+    });
+    if (!validParams.length) {
+        return url;
+    }
+    var queryString = validParams
+        .map(function (key) {
+        if (Array.isArray(params[key])) {
+            return "".concat(key, "=").concat(params[key].join(','));
         }
-        else {
-            var materials = artifacts.map(function (material, index) {
-                var _a;
-                var artifactStatusValue = '';
-                var filterState = (_a = material.filterState) !== null && _a !== void 0 ? _a : exports.FilterStates.ALLOWED;
-                return {
-                    index: index,
-                    id: material.id,
-                    deployedTime: material.deployed_time
-                        ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
-                        : 'Not Deployed',
-                    deployedBy: material.deployedBy,
-                    wfrId: material.wfrId,
-                    image: extractImage(material.image),
-                    showChanges: false,
-                    vulnerabilities: [],
-                    buildTime: material.build_time || '',
-                    tab: CDModalTab.Changes,
-                    showSourceInfo: false,
-                    deployed: material.deployed || false,
-                    latest: material.latest || false,
-                    vulnerabilitiesLoading: true,
-                    scanned: material.scanned,
-                    scanEnabled: material.scanEnabled,
-                    isSelected: !material.vulnerable && filterState === exports.FilterStates.ALLOWED && index === 0,
-                    vulnerable: material.vulnerable,
-                    runningOnParentCd: material.runningOnParentCd,
-                    artifactStatus: artifactStatusValue,
-                    userApprovalMetadata: material.userApprovalMetadata,
-                    triggeredBy: material.triggeredBy,
-                    isVirtualEnvironment: material.isVirtualEnvironment,
-                    imageComment: material.imageComment,
-                    imageReleaseTags: material.imageReleaseTags,
-                    materialInfo: material.material_info
-                        ? material.material_info.map(function (mat) {
-                            return {
-                                modifiedTime: mat.modifiedTime ? moment(mat.modifiedTime).format("ddd, DD MMM YYYY, hh:mm A") : '',
-                                commitLink: createGitCommitUrl(mat.url, mat.revision),
-                                author: mat.author || '',
-                                message: mat.message || '',
-                                revision: mat.revision || '',
-                                tag: mat.tag || '',
-                                webhookData: mat.webhookData || '',
-                                url: mat.url || '',
-                                branch: (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
-                                    ? material.ciConfigureSourceValue
-                                    : mat.branch) || '',
-                                type: material.ciConfigureSourceType || '',
-                            };
-                        })
-                        : [],
-                    filterState: filterState,
-                };
-            });
-            return {
-                materials: materials
-            };
+        return "".concat(key, "=").concat(params[key]);
+    })
+        .join('&');
+    return "".concat(url, "?").concat(queryString);
+};
+var cdMaterialListModal = function (artifacts, offset, artifactId, artifactStatus) {
+    if (!artifacts || !artifacts.length)
+        return [];
+    var markFirstSelected = offset === 0;
+    var startIndex = offset;
+    var isImageMarked = false;
+    var materials = artifacts.map(function (material, index) {
+        var _a, _b, _c, _d, _e, _f;
+        var artifactStatusValue = '';
+        var filterState = (_a = material.filterState) !== null && _a !== void 0 ? _a : exports.FilterStates.ALLOWED;
+        if (artifactId && artifactStatus && material.id === artifactId) {
+            artifactStatusValue = artifactStatus;
         }
+        var selectImage = !isImageMarked && markFirstSelected && filterState === exports.FilterStates.ALLOWED ? !material.vulnerable : false;
+        if (selectImage) {
+            isImageMarked = true;
+        }
+        return {
+            index: startIndex + index,
+            id: material.id,
+            deployedTime: material.deployed_time
+                ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
+                : 'Not Deployed',
+            deployedBy: material.deployedBy,
+            wfrId: material.wfrId,
+            tab: CDModalTab.Changes,
+            image: extractImage(material.image),
+            showChanges: false,
+            vulnerabilities: [],
+            buildTime: material.build_time || '',
+            isSelected: selectImage,
+            showSourceInfo: false,
+            deployed: material.deployed || false,
+            latest: material.latest || false,
+            vulnerabilitiesLoading: true,
+            scanned: material.scanned,
+            scanEnabled: material.scanEnabled,
+            vulnerable: material.vulnerable,
+            runningOnParentCd: material.runningOnParentCd,
+            artifactStatus: artifactStatusValue,
+            userApprovalMetadata: material.userApprovalMetadata,
+            triggeredBy: material.triggeredBy,
+            isVirtualEnvironment: material.isVirtualEnvironment,
+            imageComment: material.imageComment,
+            imageReleaseTags: material.imageReleaseTags,
+            // It is going to be null but required in type so can't remove
+            lastExecution: material.lastExecution,
+            materialInfo: material.material_info
+                ? material.material_info.map(function (mat) {
+                    return {
+                        modifiedTime: mat.modifiedTime
+                            ? moment(mat.modifiedTime).format('ddd, DD MMM YYYY, hh:mm A')
+                            : '',
+                        commitLink: createGitCommitUrl(mat.url, mat.revision),
+                        author: mat.author || '',
+                        message: mat.message || '',
+                        revision: mat.revision || '',
+                        tag: mat.tag || '',
+                        webhookData: mat.webhookData || '',
+                        url: mat.url || '',
+                        branch: (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
+                            ? material.ciConfigureSourceValue
+                            : mat.branch) || '',
+                        type: material.ciConfigureSourceType || '',
+                    };
+                })
+                : [],
+            filterState: filterState,
+            appliedFiltersTimestamp: (_b = material.appliedFiltersTimestamp) !== null && _b !== void 0 ? _b : '',
+            appliedFilters: (_c = material.appliedFilters) !== null && _c !== void 0 ? _c : [],
+            appliedFiltersState: (_d = material.appliedFiltersState) !== null && _d !== void 0 ? _d : exports.FilterStates.ALLOWED,
+            createdTime: (_e = material.createdTime) !== null && _e !== void 0 ? _e : '',
+            dataSource: (_f = material.data_source) !== null && _f !== void 0 ? _f : '',
+        };
+    });
+    return materials;
+};
+var processCDMaterialsApprovalInfo = function (enableApproval, cdMaterialsResult) {
+    if (!enableApproval) {
+        return {
+            approvalUsers: [],
+            userApprovalConfig: null,
+            requestedUserId: 0,
+        };
+    }
+    return {
+        approvalUsers: cdMaterialsResult.approvalUsers,
+        userApprovalConfig: cdMaterialsResult.userApprovalConfig,
+        requestedUserId: cdMaterialsResult.requestedUserId,
+    };
+};
+var processCDMaterialsMetaInfo = function (cdMaterialsResult) {
+    var _a, _b, _c, _d;
+    if (!cdMaterialsResult) {
+        return {
+            tagsEditable: false,
+            appReleaseTagNames: [],
+            hideImageTaggingHardDelete: false,
+            resourceFilters: [],
+            totalCount: 0,
+            canApproverDeploy: (_a = cdMaterialsResult.canApproverDeploy) !== null && _a !== void 0 ? _a : false,
+        };
+    }
+    return {
+        appReleaseTagNames: cdMaterialsResult.appReleaseTagNames,
+        tagsEditable: cdMaterialsResult.tagsEditable,
+        hideImageTaggingHardDelete: cdMaterialsResult.hideImageTaggingHardDelete,
+        resourceFilters: (_b = cdMaterialsResult.resourceFilters) !== null && _b !== void 0 ? _b : [],
+        totalCount: (_c = cdMaterialsResult.totalCount) !== null && _c !== void 0 ? _c : 0,
+        canApproverDeploy: (_d = cdMaterialsResult.canApproverDeploy) !== null && _d !== void 0 ? _d : false,
+    };
+};
+var processCDMaterialServiceResponse = function (cdMaterialsResult, stage, offset, filter) {
+    if (!cdMaterialsResult) {
+        return __assign(__assign({ materials: [] }, processCDMaterialsMetaInfo(cdMaterialsResult)), processCDMaterialsApprovalInfo(false, cdMaterialsResult));
+    }
+    var materials = cdMaterialListModal(cdMaterialsResult.ci_artifacts, offset !== null && offset !== void 0 ? offset : 0, cdMaterialsResult.latest_wf_artifact_id, cdMaterialsResult.latest_wf_artifact_status);
+    var approvalInfo = processCDMaterialsApprovalInfo(stage === exports.DeploymentNodeType.CD || stage === exports.DeploymentNodeType.APPROVAL, cdMaterialsResult);
+    var metaInfo = processCDMaterialsMetaInfo(cdMaterialsResult);
+    // TODO: On update of service would remove from here
+    var filteredMaterials = filter && filter === exports.CDMaterialFilterQuery.RESOURCE
+        ? materials.filter(function (material) {
+            return material.filterState === exports.FilterStates.ALLOWED;
+        })
+        : materials;
+    return __assign(__assign({ materials: filteredMaterials }, approvalInfo), metaInfo);
+};
+var getSanitizedQueryParams = function (queryParams) {
+    queryParams.filter; var rest = __rest(queryParams, ["filter"]);
+    return rest;
+};
+var genericCDMaterialsService = function (serviceType, cdMaterialID, stage, signal, queryParams) {
+    if (queryParams === void 0) { queryParams = {}; }
+    // TODO: On update of service would remove from here
+    var manipulatedParams = getSanitizedQueryParams(queryParams);
+    var URL;
+    switch (serviceType) {
+        case exports.CDMaterialServiceEnum.ROLLBACK:
+            URL = processURL("".concat(ROUTES.CD_MATERIAL_GET, "/").concat(cdMaterialID, "/material/rollback"), manipulatedParams);
+            break;
+        // Meant for handling getCDMaterialList
+        default:
+            URL = processURL("".concat(ROUTES.CD_MATERIAL_GET, "/").concat(cdMaterialID, "/material"), __assign(__assign({}, manipulatedParams), { stage: stageMap[stage] }));
+            break;
+    }
+    return get(URL, { signal: signal }).then(function (response) {
+        return processCDMaterialServiceResponse(response.result, stage, queryParams.offset, queryParams.filter);
     });
 };
 function extractImage(image) {
@@ -22807,7 +22922,7 @@ Valid States of Checkbox:
 5. disabled: false, checked: true,  value: INTERMIDIATE
 6. disabled: false, checked: true,  value: CHECKED
 */
-var Checkbox = /** @class */ (function (_super) {
+var Checkbox$1 = /** @class */ (function (_super) {
     __extends(Checkbox, _super);
     function Checkbox() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -22820,8 +22935,8 @@ var Checkbox = /** @class */ (function (_super) {
     return Checkbox;
 }(React.Component));
 
-var css_248z$2 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n.toggle__slider.round {\n  border-radius: 34px;\n}\n.toggle__slider.round:before {\n  border-radius: 50%;\n}\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n.toggle__slider.with-icon {\n  background-color: var(--N000) !important;\n}\n.toggle__slider.with-icon svg {\n  position: absolute;\n  content: \"\";\n  top: -1px;\n  left: -1px;\n  background-color: var(--N300);\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\ninput:checked + .toggle__slider.with-icon svg {\n  transform: translateX(100%);\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}";
-styleInject(css_248z$2);
+var css_248z$3 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n.toggle__slider.round {\n  border-radius: 34px;\n}\n.toggle__slider.round:before {\n  border-radius: 50%;\n}\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n.toggle__slider.with-icon {\n  background-color: var(--N000) !important;\n}\n.toggle__slider.with-icon svg {\n  position: absolute;\n  content: \"\";\n  top: -1px;\n  left: -1px;\n  background-color: var(--N300);\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\ninput:checked + .toggle__slider.with-icon svg {\n  transform: translateX(100%);\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}";
+styleInject(css_248z$3);
 
 var Toggle = function (_a) {
     var _b;
@@ -22845,8 +22960,8 @@ var Toggle = function (_a) {
     return (jsxRuntime.jsxs("label", __assign({}, props, { className: "".concat(rootClassName, " toggle__switch ").concat(disabled ? 'disabled' : ''), style: (_b = {}, _b['--color'] = color, _b) }, { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: !!active, onChange: handleClick, className: "toggle__input" }), jsxRuntime.jsx("span", __assign({ className: "toggle__slider ".concat(Icon ? 'with-icon br-4 dc__border' : 'round'), "data-testid": dataTestId }, { children: Icon && jsxRuntime.jsx(Icon, { className: "icon-dim-20 br-4 p-2 ".concat(iconClass) }) }))] })));
 };
 
-var css_248z$1 = ".modal-body--scan-details {\n    position: fixed;\n    top: 0;\n    right: 0;\n    background: var(--N000);\n    width: 800px;\n}\n\n.security-tab__table {\n    width: 100%;\n}\n\n.security-tab__table-header {\n    border-bottom: solid 1px var(--N200);\n}\n\n.security-cell-header {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.5;\n    letter-spacing: normal;\n    text-transform: uppercase;\n    color: var(--N500);\n}\n\n.dc__security-tab__table-row {\n    font-size: 13px;\n    font-weight: normal;\n    line-height: 1.54;\n    letter-spacing: normal;\n    color: var(--N900);\n    box-shadow: inset 0 -1px 0 0 #f5f5f5;\n}\n\n.security-tab__cell-cve,\n.security-tab__cell-severity,\n.security-tab__cell-package,\n.security-tab__cell-current-ver,\n.security-tab__cell-fixed-ver,\n.security-tab__cell-policy {\n    padding: 10px;\n    max-width: 120px;\n    word-wrap: break-word;\n}\n\n.security-tab__cell-cve {\n    padding-left: 0px;\n    text-align: left;\n    width: 20%;\n}\n\n.security-tab__cell-policy {\n    padding-right: 0px;\n}\n\n.security-tab__cell-policy--whitelist,\n.security-tab__cell-policy--whitelisted {\n    color: var(--G500);\n    text-transform: capitalize;\n}\n\n.security-tab__cell-policy--block {\n    color: var(--R500);\n    text-transform: capitalize;\n}\n\n.scanned-object__results {\n    margin: 0 20px;\n}";
-styleInject(css_248z$1);
+var css_248z$2 = ".modal-body--scan-details {\n    position: fixed;\n    top: 0;\n    right: 0;\n    background: var(--N000);\n    width: 800px;\n}\n\n.security-tab__table {\n    width: 100%;\n}\n\n.security-tab__table-header {\n    border-bottom: solid 1px var(--N200);\n}\n\n.security-cell-header {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.5;\n    letter-spacing: normal;\n    text-transform: uppercase;\n    color: var(--N500);\n}\n\n.dc__security-tab__table-row {\n    font-size: 13px;\n    font-weight: normal;\n    line-height: 1.54;\n    letter-spacing: normal;\n    color: var(--N900);\n    box-shadow: inset 0 -1px 0 0 #f5f5f5;\n}\n\n.security-tab__cell-cve,\n.security-tab__cell-severity,\n.security-tab__cell-package,\n.security-tab__cell-current-ver,\n.security-tab__cell-fixed-ver,\n.security-tab__cell-policy {\n    padding: 10px;\n    max-width: 120px;\n    word-wrap: break-word;\n}\n\n.security-tab__cell-cve {\n    padding-left: 0px;\n    text-align: left;\n    width: 20%;\n}\n\n.security-tab__cell-policy {\n    padding-right: 0px;\n}\n\n.security-tab__cell-policy--whitelist,\n.security-tab__cell-policy--whitelisted {\n    color: var(--G500);\n    text-transform: capitalize;\n}\n\n.security-tab__cell-policy--block {\n    color: var(--R500);\n    text-transform: capitalize;\n}\n\n.scanned-object__results {\n    margin: 0 20px;\n}";
+styleInject(css_248z$2);
 
 function ScanVulnerabilitiesTable(_a) {
     var vulnerabilities = _a.vulnerabilities;
@@ -22861,8 +22976,8 @@ function ScanVulnerabilitiesTable(_a) {
                 })] }) })));
 }
 
-var css_248z = ".radio-group {\n  height: 30px;\n  background: white;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px;\n  border-radius: 4px;\n}\n.radio-group .label,\n.radio-group .radio,\n.radio-group .checkbox {\n  margin: 0;\n}\n.radio-group .radio {\n  height: 100%;\n  width: auto;\n  color: var(--N400);\n  display: flex;\n  align-items: center;\n}\n.radio-group .radio + .radio {\n  margin-top: 0;\n}\n.radio-group input[type=checkbox] {\n  display: contents;\n  overflow: hidden;\n  max-width: 0px;\n  height: 0;\n  opacity: 0;\n  margin: unset;\n}\n.radio-group input + .radio__item-label {\n  padding: 4px 6px;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  transition: all 0.5s;\n  cursor: pointer;\n}\n.radio-group input[type=checkbox]:checked + .radio__item-label {\n  background: #2c3354;\n  color: white;\n  border-radius: 4px;\n}";
-styleInject(css_248z);
+var css_248z$1 = ".radio-group {\n  height: 30px;\n  background: white;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px;\n  border-radius: 4px;\n}\n.radio-group .label,\n.radio-group .radio,\n.radio-group .checkbox {\n  margin: 0;\n}\n.radio-group .radio {\n  height: 100%;\n  width: auto;\n  color: var(--N400);\n  display: flex;\n  align-items: center;\n}\n.radio-group .radio + .radio {\n  margin-top: 0;\n}\n.radio-group input[type=checkbox] {\n  display: contents;\n  overflow: hidden;\n  max-width: 0px;\n  height: 0;\n  opacity: 0;\n  margin: unset;\n}\n.radio-group input + .radio__item-label {\n  padding: 4px 6px;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  transition: all 0.5s;\n  cursor: pointer;\n}\n.radio-group input[type=checkbox]:checked + .radio__item-label {\n  background: #2c3354;\n  color: white;\n  border-radius: 4px;\n}";
+styleInject(css_248z$1);
 
 var RadioContext = React.createContext(null);
 function useRadioContext() {
@@ -22956,9 +23071,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",
@@ -23037,16 +23152,16 @@ function DeleteComponent(_a) {
     return (jsxRuntime.jsxs("div", { children: [!showCannotDeleteDialogModal && renderDeleteDialog(), showCannotDeleteDialogModal && renderCannotDeleteDialogModal()] }));
 }
 
-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); }
+var _path$5;
+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",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10.625 5 15 9.375m-7.5 7.5H3.75a.625.625 0 0 1-.625-.625v-3.491a.625.625 0 0 1 .183-.442l9.375-9.375a.625.625 0 0 1 .884 0l3.491 3.491a.625.625 0 0 1 0 .884L7.5 16.875Z",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -23055,16 +23170,16 @@ 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); }
+var _path$4, _path2, _path3;
+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",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M3.742 4.674h-2.25v-2.25",
     fill: "#767D84"
   })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -23082,15 +23197,15 @@ 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); }
+var _path$3;
+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",
     viewBox: "0 0 14 14"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#959BA1",
     className: "ic-minus_svg__fill-color",
     fillRule: "evenodd",
@@ -23099,9 +23214,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",
@@ -23118,23 +23233,25 @@ 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); }
+var _path$2;
+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",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12.667 4a.667.667 0 0 0-.667.667v2.666a.667.667 0 0 1-.667.667H4.94l.867-.86a.67.67 0 1 0-.947-.947l-2 2a.667.667 0 0 0-.14.22.667.667 0 0 0 0 .507c.032.082.08.157.14.22l2 2a.666.666 0 0 0 .947 0 .667.667 0 0 0 0-.947l-.867-.86h6.393a2 2 0 0 0 2-2V4.667A.667.667 0 0 0 12.667 4Z",
     fill: "#3B444C"
   })));
 };
 
 var ImageTagsContainer = function (_a) {
-    var ciPipelineId = _a.ciPipelineId, artifactId = _a.artifactId, imageComment = _a.imageComment, imageReleaseTags = _a.imageReleaseTags, updateCurrentAppMaterial = _a.updateCurrentAppMaterial, appReleaseTagNames = _a.appReleaseTagNames, setAppReleaseTagNames = _a.setAppReleaseTagNames, tagsEditable = _a.tagsEditable, setTagsEditable = _a.setTagsEditable, toggleCardMode = _a.toggleCardMode, hideHardDelete = _a.hideHardDelete, forceReInit = _a.forceReInit, isSuperAdmin = _a.isSuperAdmin;
+    var 
+    // Setting it to zero in case of external pipeline
+    ciPipelineId = _a.ciPipelineId, artifactId = _a.artifactId, imageComment = _a.imageComment, imageReleaseTags = _a.imageReleaseTags, updateCurrentAppMaterial = _a.updateCurrentAppMaterial, appReleaseTagNames = _a.appReleaseTagNames, setAppReleaseTagNames = _a.setAppReleaseTagNames, tagsEditable = _a.tagsEditable, setTagsEditable = _a.setTagsEditable, toggleCardMode = _a.toggleCardMode, hideHardDelete = _a.hideHardDelete, forceReInit = _a.forceReInit, isSuperAdmin = _a.isSuperAdmin;
     var _b = __read(React.useState(imageReleaseTags ? imageReleaseTags : []), 2), initialTags = _b[0], setInitialTags = _b[1];
     var _c = __read(React.useState(imageComment ? imageComment.comment : ''), 2), initialDescription = _c[0], setInitialDescription = _c[1];
     var _d = __read(React.useState(appReleaseTagNames ? appReleaseTagNames : []), 2), existingTags = _d[0], setExistingTags = _d[1];
@@ -23148,6 +23265,7 @@ var ImageTagsContainer = function (_a) {
     var _m = __read(React.useState([]), 2), hardDeleteTags = _m[0], setHardDeleteTags = _m[1];
     var _o = __read(React.useState(''), 2), descriptionValidationMessage = _o[0], setDescriptionValidationMessage = _o[1];
     var _p = __read(React.useState(''), 2), textInput = _p[0], setTextInput = _p[1];
+    var _q = __read(React.useState(false), 2), loading = _q[0], setLoading = _q[1];
     React.useEffect(function () {
         reInitState();
     }, [imageReleaseTags, imageComment, tagsEditable]);
@@ -23295,7 +23413,8 @@ var ImageTagsContainer = function (_a) {
                 hardDeleteTags: hardDeleteTags,
             };
             // set loading state true
-            setImageTags(payload, ciPipelineId, artifactId)
+            setLoading(true);
+            setImageTags(payload, ciPipelineId !== null && ciPipelineId !== void 0 ? ciPipelineId : 0, artifactId)
                 .then(function (res) {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                 var tags = (_b = (_a = res.result) === null || _a === void 0 ? void 0 : _a.imageReleaseTags) === null || _b === void 0 ? void 0 : _b.map(function (tag) { return ({
@@ -23334,6 +23453,9 @@ var ImageTagsContainer = function (_a) {
                 else {
                     showError(err);
                 }
+            })
+                .finally(function () {
+                setLoading(false);
             });
             return [2 /*return*/];
         });
@@ -23384,10 +23506,10 @@ var ImageTagsContainer = function (_a) {
                         }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag, hideHardDelete: hideHardDelete }, tag.id)); }) })), showTagsWarning && (jsxRuntime.jsxs("div", __assign({ className: "cn-7 mb-8 flex left" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon--info icon-dim-16 mr-2" }), "Tags cannot be edited/removed later"] }))), jsxRuntime.jsx("div", __assign({ className: "cn-7 mt-12" }, { children: "Comment" })), jsxRuntime.jsx("div", __assign({ className: "flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12", "data-testid": "add-image-comment-text-area" }, { children: jsxRuntime.jsx("textarea", { value: newDescription, onChange: handleDescriptionChange, className: "flex left flex-wrap dc__gap-8 dc__description-textarea fs-13", style: { height: '90px !important' } }) })), descriptionValidationMessage !== '' && (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), jsxRuntime.jsx("div", __assign({ className: "form__error" }, { children: descriptionValidationMessage }))] }))), jsxRuntime.jsxs("div", __assign({ className: "w-100 flex right mt-12" }, { children: [jsxRuntime.jsx("button", __assign({ className: "cta flex cancel h-32 lh-32-imp", type: "button", onClick: function (e) {
                                 stopPropagation(e);
                                 handleCancel();
-                            } }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ className: "cta flex h-32 lh-32-imp ml-12", "data-testid": "save-tags-button", type: "button", onClick: function (e) {
+                            }, disabled: loading }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ className: "cta flex h-32 lh-32-imp ml-12", "data-testid": "save-tags-button", type: "button", onClick: function (e) {
                                 stopPropagation(e);
                                 onClickSave();
-                            } }, { children: "Save" }))] }))] }))) : (jsxRuntime.jsxs("div", __assign({ className: "top br-4 bcn-0 image-tags-container flexbox" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10", "data-testid": "image-tags-container-hover" }, { children: jsxRuntime.jsxs("div", __assign({ className: 'w-100' }, { children: [initialDescription && jsxRuntime.jsx("div", __assign({ className: "mb-6 fs-13 lh-20 dc__word-break-all" }, { children: initialDescription })), jsxRuntime.jsx("div", __assign({ className: "flex-wrap flex left" }, { children: initialTags === null || initialTags === void 0 ? void 0 : initialTags.map(function (tag, index) { return (jsxRuntime.jsx(ImageTagButton, { text: tag === null || tag === void 0 ? void 0 : tag.tagName, isSoftDeleted: tag === null || tag === void 0 ? void 0 : tag.deleted, isEditing: isEditing, onSoftDeleteClick: function (e) {
+                            }, disabled: loading }, { children: loading ? jsxRuntime.jsx(Progressing, {}) : 'Save' }))] }))] }))) : (jsxRuntime.jsxs("div", __assign({ className: "top br-4 bcn-0 image-tags-container flexbox" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10", "data-testid": "image-tags-container-hover" }, { children: jsxRuntime.jsxs("div", __assign({ className: 'w-100' }, { children: [initialDescription && jsxRuntime.jsx("div", __assign({ className: "mb-6 fs-13 lh-20 dc__word-break-all" }, { children: initialDescription })), jsxRuntime.jsx("div", __assign({ className: "flex-wrap flex left" }, { children: initialTags === null || initialTags === void 0 ? void 0 : initialTags.map(function (tag, index) { return (jsxRuntime.jsx(ImageTagButton, { text: tag === null || tag === void 0 ? void 0 : tag.tagName, isSoftDeleted: tag === null || tag === void 0 ? void 0 : tag.deleted, isEditing: isEditing, onSoftDeleteClick: function (e) {
                                         stopPropagation(e);
                                         handleTagSoftDelete(index);
                                     }, onHardDeleteClick: function (e) {
@@ -23479,9 +23601,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",
@@ -23549,15 +23671,15 @@ function Grid(_a) {
     return (jsxRuntime.jsx("div", __assign({ className: "flex-wrap flexbox ".concat(container ? containerClass : ''), style: containerStyles }, { children: children })));
 }
 
-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); }
+var _path$1;
+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",
     viewBox: "0 0 20 20"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#767D84",
     fillRule: "evenodd",
     d: "M15.833 6.917a2.5 2.5 0 0 1 2.5 2.5v6.416a2.5 2.5 0 0 1-2.5 2.5H9.417a2.5 2.5 0 0 1-2.5-2.5V9.417a2.5 2.5 0 0 1 2.5-2.5zm0 1.666H9.417a.833.833 0 0 0-.834.834v6.416c0 .46.373.834.834.834h6.416c.46 0 .834-.373.834-.834V9.417a.833.833 0 0 0-.834-.834zM10.75 1.667c1.24 0 2.256.968 2.33 2.19l.003.143v.75a.833.833 0 0 1-1.66.097l-.006-.097V4c0-.34-.255-.62-.583-.661l-.084-.006H4c-.34 0-.62.255-.661.583L3.333 4v6.75c0 .34.255.62.583.661l.084.006h.75a.833.833 0 0 1 .097 1.66l-.097.006H4a2.333 2.333 0 0 1-2.33-2.19l-.003-.143V4c0-1.24.968-2.256 2.19-2.33L4 1.668h6.75z"
@@ -23725,12 +23847,234 @@ 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 FieldRowWithLabel = function (_a) {
+    var showLabel = _a.showLabel, label = _a.label, required = _a.required, children = _a.children, id = _a.id, _b = _a.shouldAlignCenter, shouldAlignCenter = _b === void 0 ? true : _b;
+    return (jsxRuntime.jsxs("div", __assign({ className: showLabel
+            ? "display-grid dc__gap-12 rjsf-form-template__field ".concat(shouldAlignCenter ? 'flex-align-center' : '')
+            : '' }, { children: [showLabel && (jsxRuntime.jsx("label", __assign({ className: "cn-7 fs-13 lh-32 fw-4 flexbox mb-0", htmlFor: id }, { children: !!label && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", __assign({ className: "dc__ellipsis-right" }, { children: label })), required && jsxRuntime.jsx("span", __assign({ className: "cr-5" }, { children: "\u00A0*" }))] })) }))), children] })));
+};
+
+var ActionButton = function (_a) {
+    var canAdd = _a.canAdd, onAddClick = _a.onAddClick, disabled = _a.disabled, readonly = _a.readonly, uiSchema = _a.uiSchema, registry = _a.registry;
+    var AddButton = registry.templates.ButtonTemplates.AddButton;
+    return (canAdd && (jsxRuntime.jsx(AddButton, { onClick: onAddClick, disabled: disabled || readonly, uiSchema: uiSchema, registry: registry })));
+};
+var ArrayFieldTemplate = function (_a) {
+    var canAdd = _a.canAdd, className = _a.className, disabled = _a.disabled, idSchema = _a.idSchema, uiSchema = _a.uiSchema, items = _a.items, onAddClick = _a.onAddClick, readonly = _a.readonly, registry = _a.registry, required = _a.required, title = _a.title;
+    var uiOptions = utils.getUiOptions(uiSchema);
+    var ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
+    var label = uiOptions.title || title;
+    return (jsxRuntime.jsx("fieldset", __assign({ className: className, id: idSchema.$id }, { children: items.length ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [items.map(function (_a, index) {
+                    var key = _a.key, itemProps = __rest(_a, ["key"]);
+                    // Show the title as the label for the first field
+                    var children = __assign(__assign({}, itemProps.children), { props: __assign(__assign({}, itemProps.children.props), { name: index === 0 ? label : '' }) });
+                    return (jsxRuntime.jsx(ArrayFieldItemTemplate, __assign({}, itemProps, { children: children }), key));
+                }), jsxRuntime.jsx(ActionButton, { canAdd: canAdd, onAddClick: onAddClick, disabled: disabled, readonly: readonly, uiSchema: uiSchema, registry: registry })] })) : (jsxRuntime.jsx(FieldRowWithLabel, __assign({ label: label, required: required, showLabel: true, id: idSchema.$id }, { children: jsxRuntime.jsx(ActionButton, { canAdd: canAdd, onAddClick: onAddClick, disabled: disabled, readonly: readonly, uiSchema: uiSchema, registry: registry }) }))) })));
+};
+
+var ArrayFieldItemTemplate = function (_a) {
+    var children = _a.children; _a.className; var disabled = _a.disabled, hasToolbar = _a.hasToolbar, hasRemove = _a.hasRemove, index = _a.index, onDropIndexClick = _a.onDropIndexClick, readonly = _a.readonly, registry = _a.registry, uiSchema = _a.uiSchema;
+    var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
+    return (jsxRuntime.jsxs("div", __assign({ className: "display-grid rjsf-form-template__array-field-item flex-align-center dc__gap-8 mb-12" }, { children: [children, hasToolbar && hasRemove && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(RemoveButton, { disabled: disabled || readonly, onClick: onDropIndexClick(index), uiSchema: uiSchema, registry: registry }) }))] })));
+};
+
+var PLACEHOLDERS = {
+    SELECT: 'Please select an option',
+    INPUT: 'Please enter an input',
+    OBJECT_KEY: 'Please enter a value for the key',
+};
+
+var BaseInputTemplate = RJSF.getDefaultRegistry().templates.BaseInputTemplate;
+var BaseInput = function (_a) {
+    var placeholder = _a.placeholder, props = __rest(_a, ["placeholder"]);
+    return (jsxRuntime.jsx(BaseInputTemplate, __assign({ placeholder: placeholder || PLACEHOLDERS.INPUT }, props, { className: "form__input cn-9 fs-13 lh-20 fw-4" })));
+};
+
+var AddButton = function (_a) {
+    _a.icon; _a.iconType; _a.registry; _a.uiSchema; var props = __rest(_a, ["icon", "iconType", "registry", "uiSchema"]);
+    return (jsxRuntime.jsx("div", __assign({ className: "flexbox flex-justify-end" }, { children: jsxRuntime.jsxs("button", __assign({}, props, { type: "button", className: "dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor", title: "Add" }, { children: [jsxRuntime.jsx(SvgIcAdd, { className: "icon-dim-16 fcb-5" }), jsxRuntime.jsx("span", __assign({ className: "cb-5 fs-13 lh-20" }, { children: "Add" }))] })) })));
+};
+
+var RemoveButton = function (_a) {
+    _a.icon; _a.iconType; _a.registry; _a.uiSchema; var props = __rest(_a, ["icon", "iconType", "registry", "uiSchema"]);
+    return (jsxRuntime.jsx("button", __assign({}, props, { type: "button", className: "dc__outline-none-imp p-0 dc__transparent flex cursor", title: "Remove" }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-16 fcr-5" }) })));
+};
+
+var SubmitButton = function (_a) {
+    var uiSchema = _a.uiSchema;
+    var _b = utils.getSubmitButtonOptions(uiSchema), submitText = _b.submitText, norender = _b.norender, _c = _b.props, submitButtonProps = _c === void 0 ? {} : _c;
+    return norender ? null : (jsxRuntime.jsx("div", __assign({ className: "flexbox flex-justify-end" }, { children: jsxRuntime.jsx("button", __assign({ type: "submit" }, submitButtonProps, { className: "cta ".concat(submitButtonProps.className || '') }, { children: submitText })) })));
+};
+
+var Description = function (_a) {
+    var id = _a.id, description = _a.description;
+    return description && (jsxRuntime.jsxs("div", __assign({ id: id, className: "flex left flex-align-center mt-4 dc__gap-4" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "icon-dim-16 mw-16 info-icon-n5" }), jsxRuntime.jsx("span", __assign({ className: "cn-7 fs-11 fw-4 dc__ellipsis-right" }, { children: description }))] })));
+};
+
+var Field$1 = function (props) {
+    var id = props.id, label = props.label, children = props.children, errors = props.errors, hidden = props.hidden, required = props.required, displayLabel = props.displayLabel, registry = props.registry, uiSchema = props.uiSchema, classNames = props.classNames, schema = props.schema, description = props.description;
+    var uiOptions = utils.getUiOptions(uiSchema);
+    var WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
+    // Object type fields have additional properties for key/value pairs
+    var hasAdditionalProperties = utils.ADDITIONAL_PROPERTY_FLAG in schema;
+    // Label is not displayed for boolean fields by default and hide for object type fields
+    var showLabel = (displayLabel || schema.type === 'boolean') && !hasAdditionalProperties;
+    return hidden ? (jsxRuntime.jsx("div", __assign({ className: "hidden" }, { children: children }))) : (jsxRuntime.jsxs("div", __assign({ className: "".concat(classNames, " mb-12") }, { children: [jsxRuntime.jsx(FieldRowWithLabel, __assign({ label: label, showLabel: showLabel, id: id, required: required }, { children: jsxRuntime.jsx(WrapIfAdditionalTemplate, __assign({}, props, { children: children })) })), description, errors] })));
+};
+
+var FieldErrorTemplate = function (_a) {
+    var _b = _a.errors, errors = _b === void 0 ? [] : _b, idSchema = _a.idSchema;
+    var id = utils.errorId(idSchema);
+    return (errors.length > 0 && (jsxRuntime.jsx("span", __assign({ id: id }, { children: errors
+            .filter(function (elem) { return !!elem; })
+            .map(function (error, index) {
+            return (jsxRuntime.jsxs("span", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), error] }), index));
+        }) }))));
+};
+
+var Field = function (_a) {
+    var disabled = _a.disabled, formData = _a.formData, idSchema = _a.idSchema, onAddClick = _a.onAddClick, properties = _a.properties, readonly = _a.readonly, registry = _a.registry, required = _a.required, schema = _a.schema, title = _a.title, uiSchema = _a.uiSchema;
+    var AddButton = registry.templates.ButtonTemplates.AddButton;
+    var hasAdditionalProperties = !!schema.additionalProperties;
+    var ActionButton = utils.canExpand(schema, uiSchema, formData) && (jsxRuntime.jsx(AddButton, { className: "object-property-expand", onClick: onAddClick(schema), disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }));
+    var Properties = properties.map(function (prop) { return prop.content; });
+    if (hasAdditionalProperties) {
+        if (properties.length) {
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FieldRowWithLabel, __assign({ label: title, required: required, showLabel: true, id: idSchema.$id, shouldAlignCenter: false }, { children: jsxRuntime.jsx("div", { children: Properties }) })), ActionButton] }));
+        }
+        else {
+            return (jsxRuntime.jsx(FieldRowWithLabel, __assign({ label: title, required: required, showLabel: true, id: idSchema.$id }, { children: ActionButton })));
+        }
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [Properties, ActionButton] }));
+};
+var ObjectFieldTemplate = function (props) {
+    var idSchema = props.idSchema, registry = props.registry, required = props.required, schema = props.schema, title = props.title, uiSchema = props.uiSchema;
+    var options = utils.getUiOptions(uiSchema);
+    var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, options);
+    var hasAdditionalProperties = !!schema.additionalProperties;
+    var showTitle = title && !hasAdditionalProperties;
+    return (jsxRuntime.jsxs("fieldset", __assign({ id: idSchema.$id }, { children: [showTitle && (jsxRuntime.jsx(TitleFieldTemplate, { id: utils.titleId(idSchema), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), jsxRuntime.jsx(Field, __assign({}, props))] })));
+};
+
+var TitleField = function (_a) {
+    var id = _a.id, title = _a.title, required = _a.required;
+    return (jsxRuntime.jsxs("legend", __assign({ className: "fs-13 fw-6 cn-9 lh-20 pb-8 dc__border-bottom en-1 mb-12", id: id }, { children: [jsxRuntime.jsx("span", { children: title }), required && jsxRuntime.jsx("span", __assign({ className: "cr-5" }, { children: "\u00A0*" }))] })));
+};
+
+var WrapIfAdditionalTemplate = function (_a) {
+    var id = _a.id, disabled = _a.disabled, label = _a.label, onKeyChange = _a.onKeyChange, onDropPropertyClick = _a.onDropPropertyClick, readonly = _a.readonly, schema = _a.schema, children = _a.children, uiSchema = _a.uiSchema, registry = _a.registry;
+    var templates = registry.templates;
+    var RemoveButton = templates.ButtonTemplates.RemoveButton;
+    var additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: additional ? (jsxRuntime.jsxs("div", __assign({ className: "rjsf-form-template__additional-fields display-grid dc__gap-8 flex-align-center" }, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("input", { type: "text", className: "form__input cn-9 fs-13 lh-20 fw-4", id: "".concat(id, "-key"), onBlur: function (event) { return onKeyChange(event.target.value); }, placeholder: PLACEHOLDERS.OBJECT_KEY, defaultValue: label }) }), jsxRuntime.jsx("div", { children: children }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(RemoveButton, { disabled: disabled || readonly, onClick: onDropPropertyClick(label), uiSchema: uiSchema, registry: registry }) })] }))) : (children) }));
+};
+
+var Checkbox = function (_a) {
+    var id = _a.id, onChange = _a.onChange, value = _a.value, required = _a.required, disabled = _a.disabled, readonly = _a.readonly, autofocus = _a.autofocus, onBlur = _a.onBlur, onFocus = _a.onFocus;
+    var handleEvent = function (e, type) {
+        var _a = e.target, id = _a.id, checked = _a.checked;
+        if (type === 'blur') {
+            onBlur(id, checked);
+        }
+        else if (type === 'focus') {
+            onFocus(id, checked);
+        }
+    };
+    var isSelected = typeof value === 'undefined' ? false : value;
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Toggle, { selected: isSelected, onSelect: onChange, id: id, name: id, required: required, disabled: disabled || readonly, autoFocus: autofocus, rootClassName: "w-32 mb-0 dc__height-inherit", onBlur: function (e) { return handleEvent(e, 'blur'); }, onFocus: function (e) { return handleEvent(e, 'focus'); } }), jsxRuntime.jsx("span", __assign({ className: "dc__capitalize ml-8" }, { children: isSelected.toString() }))] }));
+};
+
+/**
+ * Override for the TranslatableString from RJSF
+ */
+var translateString = function (stringToTranslate, params) {
+    switch (stringToTranslate) {
+        case utils.TranslatableString.NewStringDefault:
+            // Use an empty string for the new additionalProperties string default value
+            return '';
+        default:
+            return utils.englishStringTranslator(stringToTranslate, params);
+    }
+};
+var getCommonSelectStyle = function (styleOverrides) {
+    if (styleOverrides === void 0) { styleOverrides = {}; }
+    return __assign({ menuList: function (base) { return (__assign(__assign({}, base), { paddingTop: 0, paddingBottom: 0 })); }, control: function (base, state) { return (__assign(__assign({}, base), { minHeight: '32px', boxShadow: 'none', backgroundColor: 'var(--N50)', border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)', cursor: 'pointer' })); }, option: function (base, state) { return (__assign(__assign({}, base), { color: 'var(--N900)', backgroundColor: state.isFocused ? 'var(--N100)' : 'white', padding: '10px 12px' })); }, dropdownIndicator: function (base, state) { return (__assign(__assign({}, base), { color: 'var(--N400)', padding: '0 8px', transition: 'all .2s ease', transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)' })); }, valueContainer: function (base) { return (__assign(__assign({}, base), { padding: '0 8px', fontWeight: '400' })); }, loadingMessage: function (base) { return (__assign(__assign({}, base), { color: 'var(--N600)' })); }, noOptionsMessage: function (base) { return (__assign(__assign({}, base), { color: 'var(--N600)' })); } }, styleOverrides);
+};
+
+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); }
+var SvgIcChevronDown = function SvgIcChevronDown(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#999",
+    className: "ic-chevron-down_svg__fill-color",
+    fillRule: "nonzero",
+    d: "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
+  })));
+};
+
+var commonStyles = getCommonSelectStyle();
+var MenuList = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (jsxRuntime.jsx(components.MenuList, __assign({}, props, { children: Array.isArray(children) ? children.slice(0, 20) : children })));
+};
+var DropdownIndicator = function (props) { return (jsxRuntime.jsx(components.DropdownIndicator, __assign({}, props, { children: jsxRuntime.jsx(SvgIcChevronDown, { className: "icon-dim-20 icon-n5", "data-testid": "overview-project-edit-dropdown" }) }))); };
+var Select = function (props) {
+    var id = props.id, _a = props.multiple, multiple = _a === void 0 ? false : _a, options = props.options, value = props.value, disabled = props.disabled, readonly = props.readonly, _b = props.autofocus, autofocus = _b === void 0 ? false : _b, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, placeholder = props.placeholder;
+    var _c = options.enumOptions, selectOptions = _c === void 0 ? [] : _c;
+    var emptyValue = multiple ? [] : '';
+    var handleChange = function (option) {
+        onChange(multiple ? option.map(function (o) { return o.value; }) : option.value);
+    };
+    var getOption = function (value) {
+        return multiple
+            ? selectOptions.filter(function (option) { return value.includes(option.value); })
+            : selectOptions.find(function (option) { return option.value === value; });
+    };
+    return (jsxRuntime.jsx(ReactSelect, { id: id, name: id, isMulti: multiple, value: typeof value === 'undefined' ? emptyValue : getOption(value), autoFocus: autofocus, onChange: handleChange, options: selectOptions, onBlur: function () { return onBlur(id, value); }, onFocus: function () { return onFocus(id, value); }, placeholder: placeholder || PLACEHOLDERS.SELECT, isDisabled: disabled || readonly, styles: __assign(__assign({}, commonStyles), { control: function (base) { return (__assign(__assign(__assign({}, base), commonStyles.control), { backgroundColor: 'var(--N50)' })); } }), components: {
+            IndicatorSeparator: null,
+            DropdownIndicator: DropdownIndicator,
+            MenuList: MenuList,
+        }, menuPlacement: "auto" }));
+};
+
+var widgets = {
+    CheckboxWidget: Checkbox,
+    SelectWidget: Select,
+};
+var templates = {
+    ArrayFieldItemTemplate: ArrayFieldItemTemplate,
+    ArrayFieldTemplate: ArrayFieldTemplate,
+    BaseInputTemplate: BaseInput,
+    ButtonTemplates: { AddButton: AddButton, RemoveButton: RemoveButton, SubmitButton: SubmitButton },
+    DescriptionFieldTemplate: Description,
+    FieldTemplate: Field$1,
+    FieldErrorTemplate: FieldErrorTemplate,
+    ObjectFieldTemplate: ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    WrapIfAdditionalTemplate: WrapIfAdditionalTemplate,
+};
+
+var css_248z = ".rjsf-form-template__field {\n  grid-template-columns: 250px 1fr;\n}\n.rjsf-form-template__additional-fields {\n  grid-template-columns: 1fr 1fr minmax(20px, auto);\n}\n.rjsf-form-template__array-field-item {\n  grid-template-columns: 1fr auto;\n}\n.rjsf-form-template__array-field-item :first-child {\n  margin: 0;\n}";
+styleInject(css_248z);
+
+// Need to use this way because the default import was not working as expected
+// The default import resolves to an object intead of a function
+var Form = RJSF.default;
+var validator = RJSFValidator.default;
+var RJSFForm = function (props) { return (jsxRuntime.jsx(Form, __assign({ noHtml5Validate: true, showErrorList: false, autoComplete: "off" }, props, { validator: validator, templates: __assign(__assign({}, templates), props.templates), widgets: __assign(__assign({}, widgets), props.widgets), translateString: translateString }))); };
+
 exports.AppStatus = AppStatus;
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
 exports.BuildStageVariable = BuildStageVariable;
 exports.CDModalTab = CDModalTab;
-exports.Checkbox = Checkbox;
+exports.Checkbox = Checkbox$1;
 exports.ClearIndicator = ClearIndicator;
 exports.ClipboardButton = ClipboardButton;
 exports.ConditionalWrap = ConditionalWrap;
@@ -23769,6 +24113,7 @@ exports.PopupMenu = PopupMenu;
 exports.Progressing = Progressing;
 exports.PropagateTagInfo = PropagateTagInfo;
 exports.REGISTRY_TYPE_MAP = REGISTRY_TYPE_MAP;
+exports.RJSFForm = RJSFForm;
 exports.ROUTES = ROUTES;
 exports.RadioGroup = RadioGroup$1;
 exports.RadioGroupItem = RadioGroupItem;
@@ -23801,9 +24146,9 @@ exports.closeOnEscKeyPressed = closeOnEscKeyPressed;
 exports.copyToClipboard = copyToClipboard;
 exports.createGitCommitUrl = createGitCommitUrl;
 exports.extractImage = extractImage;
+exports.genericCDMaterialsService = genericCDMaterialsService;
 exports.get = get;
 exports.getAlphabetIcon = getAlphabetIcon;
-exports.getCDMaterials = getCDMaterials;
 exports.getCookie = getCookie;
 exports.getEmptyArrayOfLength = getEmptyArrayOfLength;
 exports.getLoginInfo = getLoginInfo;