@devtron-labs/devtron-fe-common-lib 0.0.53-beta-5 → 0.0.53-beta-6

package/dist/index.js

@@ -752,18 +752,18 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$8 = ".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$8);
+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$7;
-function _extends$o() { _extends$o = 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$o.apply(this, arguments); }
+var _g$6;
+function _extends$n() { _extends$n = 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$n.apply(this, arguments); }
 var SvgIcProgressing = function SvgIcProgressing(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "1em",
     height: "1em"
-  }, props), _g$7 || (_g$7 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none"
   }, /*#__PURE__*/React__namespace.createElement("animateTransform", {
     attributeName: "transform",
@@ -810,8 +810,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$n() {
-  _extends$n = Object.assign || function (target) {
+function _extends$m() {
+  _extends$m = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -825,7 +825,7 @@ function _extends$n() {
     return target;
   };
 
-  return _extends$n.apply(this, arguments);
+  return _extends$m.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$2(source, excluded) {
@@ -1551,7 +1551,7 @@ function ProgressBar(_ref) {
       isIn = _ref.isIn,
       theme = _ref.theme;
 
-  var style = _extends$n({}, userStyle, {
+  var style = _extends$m({}, userStyle, {
     animationDuration: delay + "ms",
     animationPlayState: isRunning ? 'running' : 'paused',
     opacity: hide ? 0 : 1
@@ -1828,9 +1828,9 @@ var ToastContainer = function ToastContainer(props) {
     ,
     id: containerId
   }, getToastToRender(function (position, toastList) {
-    var containerStyle = !toastList.length ? _extends$n({}, style, {
+    var containerStyle = !toastList.length ? _extends$m({}, style, {
       pointerEvents: 'none'
-    }) : _extends$n({}, style);
+    }) : _extends$m({}, style);
     return React.createElement("div", {
       className: getClassName(position),
       style: containerStyle,
@@ -1937,7 +1937,7 @@ function dispatchToast(content, options) {
 
 
 function mergeOptions(type, options) {
-  return _extends$n({}, options, {
+  return _extends$m({}, options, {
     type: options && options.type || type,
     toastId: getToastId(options)
   });
@@ -1954,7 +1954,7 @@ function toast(content, options) {
 }
 
 toast.loading = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$n({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$m({
     isLoading: true,
     autoClose: false,
     closeOnClick: false,
@@ -1970,7 +1970,7 @@ function handlePromise(promise, _ref2, options) {
   var id;
 
   if (pending) {
-    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$n({}, options, pending));
+    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$m({}, options, pending));
   }
 
   var resetParams = {
@@ -1989,7 +1989,7 @@ function handlePromise(promise, _ref2, options) {
       return;
     }
 
-    var baseParams = _extends$n({
+    var baseParams = _extends$m({
       type: type
     }, resetParams, options, {
       data: result
@@ -2000,10 +2000,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$n({}, baseParams, params));
+      toast.update(id, _extends$m({}, baseParams, params));
     } else {
       // using toast.promise without loading
-      toast(params.render, _extends$n({}, baseParams, params));
+      toast(params.render, _extends$m({}, baseParams, params));
     }
 
     return result;
@@ -2027,7 +2027,7 @@ toast.warning = /*#__PURE__*/createToastByType(TYPE.WARNING);
 toast.warn = toast.warning;
 
 toast.dark = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$n({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$m({
     theme: 'dark'
   }, options)));
 };
@@ -2084,7 +2084,7 @@ toast.update = function (toastId, options) {
       var oldOptions = toast.props,
           oldContent = toast.content;
 
-      var nextOptions = _extends$n({}, oldOptions, options, {
+      var nextOptions = _extends$m({}, oldOptions, options, {
         toastId: options.toastId || toastId,
         updateId: generateToastId()
       });
@@ -11846,27 +11846,7 @@ function getLockedJSON(json, jsonPathArray) {
         });
     });
     return resultJson['$'];
-}
-/**
- * Returns a debounced variant of the function
- */
-var debounce$2 = function (func, timeout) {
-    if (timeout === void 0) { timeout = 500; }
-    var timer;
-    return function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        var context = this;
-        if (timer)
-            clearTimeout(timer);
-        timer = setTimeout(function () {
-            timer = null;
-            func.apply(context, args);
-        }, timeout);
-    };
-};
+}
 
 function Progressing(_a) {
     var pageLoader = _a.pageLoader, size = _a.size, theme = _a.theme, styles = _a.styles, fillColor = _a.fillColor;
@@ -11918,8 +11898,8 @@ var VisibleModal = /** @class */ (function (_super) {
     return VisibleModal;
 }(React.Component));
 
-var css_248z$7 = ".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$7);
+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;
@@ -11994,9 +11974,9 @@ var Modal = function (_a) {
 };
 
 var _path$d;
-function _extends$m() { _extends$m = 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$m.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 SvgIcCross = function SvgIcCross(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24",
@@ -16302,9 +16282,9 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 var Tippy = index;
 
 var _path$c;
-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); }
+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); }
 var SvgIcHelp = function SvgIcHelp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -16317,9 +16297,9 @@ var SvgIcHelp = function SvgIcHelp(props) {
 };
 
 var _path$b;
-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$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 SvgIcHelpOutline = function SvgIcHelpOutline(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 17 16",
     width: "1em",
@@ -16331,8 +16311,8 @@ var SvgIcHelpOutline = function SvgIcHelpOutline(props) {
   })));
 };
 
-var css_248z$6 = ".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$6);
+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
@@ -16377,9 +16357,9 @@ function TippyCustomized(props) {
 }
 
 var _path$a, _circle, _path2$1;
-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); }
+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 SvgInjectTag = function SvgInjectTag(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20",
@@ -16414,9 +16394,9 @@ function PropagateTagInfo(_a) {
 }
 
 var _path$9;
-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$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 SvgIcInfoOutlined = function SvgIcInfoOutlined(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -16656,9 +16636,9 @@ var TagDetails = function (_a) {
 };
 
 var _path$8;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+function _extends$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 SvgIcAdd = function SvgIcAdd(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -16793,8 +16773,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$g() {
-  _extends$g = Object.assign ? Object.assign.bind() : function (target) {
+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) {
@@ -16805,7 +16785,7 @@ function _extends$g() {
     }
     return target;
   };
-  return _extends$g.apply(this, arguments);
+  return _extends$f.apply(this, arguments);
 }
 
 /*
@@ -20346,7 +20326,7 @@ var Menu = function Menu(props) {
       getStyles = props.getStyles,
       innerRef = props.innerRef,
       innerProps = props.innerProps;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('menu', props),
     className: cx({
       menu: true
@@ -20378,7 +20358,7 @@ var MenuList$1 = function MenuList(props) {
       innerProps = props.innerProps,
       innerRef = props.innerRef,
       isMulti = props.isMulti;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('menuList', props),
     className: cx({
       'menu-list': true,
@@ -20409,7 +20389,7 @@ var NoOptionsMessage = function NoOptionsMessage(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('noOptionsMessage', props),
     className: cx({
       'menu-notice': true,
@@ -20426,7 +20406,7 @@ var LoadingMessage = function LoadingMessage(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('loadingMessage', props),
     className: cx({
       'menu-notice': true,
@@ -20514,7 +20494,7 @@ var MenuPortal = /*#__PURE__*/function (_Component2) {
         rect: rect
       }; // same wrapper element whether fixed or portalled
 
-      var menuWrapper = jsx("div", _extends$g({
+      var menuWrapper = jsx("div", _extends$f({
         css: getStyles('menuPortal', state),
         className: cx({
           'menu-portal': true
@@ -20550,7 +20530,7 @@ var SelectContainer = function SelectContainer(props) {
       innerProps = props.innerProps,
       isDisabled = props.isDisabled,
       isRtl = props.isRtl;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('container', props),
     className: cx({
       '--is-disabled': isDisabled,
@@ -20585,7 +20565,7 @@ var ValueContainer = function ValueContainer(props) {
       isMulti = props.isMulti,
       getStyles = props.getStyles,
       hasValue = props.hasValue;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('valueContainer', props),
     className: cx({
       'value-container': true,
@@ -20611,7 +20591,7 @@ var IndicatorsContainer = function IndicatorsContainer(props) {
       cx = props.cx,
       innerProps = props.innerProps,
       getStyles = props.getStyles;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('indicatorsContainer', props),
     className: cx({
       indicators: true
@@ -20642,7 +20622,7 @@ var Svg = function Svg(_ref) {
   var size = _ref.size,
       props = _objectWithoutProperties(_ref, _excluded$2);
 
-  return jsx("svg", _extends$g({
+  return jsx("svg", _extends$f({
     height: size,
     width: size,
     viewBox: "0 0 20 20",
@@ -20653,14 +20633,14 @@ var Svg = function Svg(_ref) {
 };
 
 var CrossIcon = function CrossIcon(props) {
-  return jsx(Svg, _extends$g({
+  return jsx(Svg, _extends$f({
     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$g({
+  return jsx(Svg, _extends$f({
     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"
@@ -20693,7 +20673,7 @@ var DropdownIndicator$1 = function DropdownIndicator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('dropdownIndicator', props),
     className: cx({
       indicator: true,
@@ -20708,7 +20688,7 @@ var ClearIndicator$1 = function ClearIndicator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('clearIndicator', props),
     className: cx({
       indicator: true,
@@ -20738,7 +20718,7 @@ var IndicatorSeparator = function IndicatorSeparator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("span", _extends$g({}, innerProps, {
+  return jsx("span", _extends$f({}, innerProps, {
     css: getStyles('indicatorSeparator', props),
     className: cx({
       'indicator-separator': true
@@ -20793,7 +20773,7 @@ var LoadingIndicator = function LoadingIndicator(props) {
       getStyles = props.getStyles,
       innerProps = props.innerProps,
       isRtl = props.isRtl;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('loadingIndicator', props),
     className: cx({
       indicator: true,
@@ -20854,7 +20834,7 @@ var Control = function Control(props) {
       innerRef = props.innerRef,
       innerProps = props.innerProps,
       menuIsOpen = props.menuIsOpen;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     ref: innerRef,
     css: getStyles('control', props),
     className: cx({
@@ -20886,12 +20866,12 @@ var Group = function Group(props) {
       label = props.label,
       theme = props.theme,
       selectProps = props.selectProps;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('group', props),
     className: cx({
       group: true
     }, className)
-  }, innerProps), jsx(Heading, _extends$g({}, headingProps, {
+  }, innerProps), jsx(Heading, _extends$f({}, headingProps, {
     selectProps: selectProps,
     theme: theme,
     getStyles: getStyles,
@@ -20923,7 +20903,7 @@ var GroupHeading = function GroupHeading(props) {
       _cleanCommonProps.data;
       var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1$1);
 
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('groupHeading', props),
     className: cx({
       'group-heading': true
@@ -20999,7 +20979,7 @@ var Input = function Input(props) {
     }, className),
     css: getStyles('input', props),
     "data-value": value || ''
-  }, jsx("input", _extends$g({
+  }, jsx("input", _extends$f({
     className: cx({
       input: true
     }, inputClassName),
@@ -21069,7 +21049,7 @@ var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove$1(_ref5) {
   var children = _ref5.children,
       innerProps = _ref5.innerProps;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     role: "button"
   }, innerProps), children || jsx(CrossIcon, {
     size: 14
@@ -21158,7 +21138,7 @@ var Option$1 = function Option(props) {
       isSelected = props.isSelected,
       innerRef = props.innerRef,
       innerProps = props.innerProps;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('option', props),
     className: cx({
       option: true,
@@ -21190,7 +21170,7 @@ var Placeholder = function Placeholder(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('placeholder', props),
     className: cx({
       placeholder: true
@@ -21223,7 +21203,7 @@ var SingleValue = function SingleValue(props) {
       getStyles = props.getStyles,
       isDisabled = props.isDisabled,
       innerProps = props.innerProps;
-  return jsx("div", _extends$g({
+  return jsx("div", _extends$f({
     css: getStyles('singleValue', props),
     className: cx({
       'single-value': true,
@@ -21471,7 +21451,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 
 var A11yText = function A11yText(props) {
-  return jsx("span", _extends$g({
+  return jsx("span", _extends$f({
     css: _ref
   }, props));
 };
@@ -22007,7 +21987,7 @@ function DummyInput(_ref) {
   var innerRef = _ref.innerRef,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return jsx("input", _extends$g({
+  return jsx("input", _extends$f({
     ref: innerRef
   }, props, {
     css: /*#__PURE__*/css$2({
@@ -23642,7 +23622,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$g({
+        return /*#__PURE__*/React__namespace.createElement(DummyInput, _extends$f({
           id: id,
           innerRef: this.getInputRef,
           onBlur: this.onInputBlur,
@@ -23656,7 +23636,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         }, ariaAttributes));
       }
 
-      return /*#__PURE__*/React__namespace.createElement(Input, _extends$g({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(Input, _extends$f({}, commonProps, {
         autoCapitalize: "none",
         autoComplete: "off",
         autoCorrect: "off",
@@ -23700,7 +23680,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           isFocused = _this$state5.isFocused;
 
       if (!this.hasValue() || !controlShouldRenderValue) {
-        return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends$g({}, commonProps, {
+        return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends$f({}, commonProps, {
           key: "placeholder",
           isDisabled: isDisabled,
           isFocused: isFocused,
@@ -23714,7 +23694,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$g({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(MultiValue, _extends$f({}, commonProps, {
             components: {
               Container: MultiValueContainer,
               Label: MultiValueLabel,
@@ -23746,7 +23726,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       }
 
       var singleValue = selectValue[0];
-      return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends$g({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends$f({}, commonProps, {
         data: singleValue,
         isDisabled: isDisabled
       }), this.formatOptionLabel(singleValue, 'value'));
@@ -23772,7 +23752,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends$g({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends$f({}, commonProps, {
         innerProps: innerProps,
         isFocused: isFocused
       }));
@@ -23792,7 +23772,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       var innerProps = {
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends$g({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends$f({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -23810,7 +23790,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$g({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(IndicatorSeparator, _extends$f({}, commonProps, {
         isDisabled: isDisabled,
         isFocused: isFocused
       }));
@@ -23830,7 +23810,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends$g({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends$f({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -23893,7 +23873,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           onMouseOver: onHover,
           tabIndex: -1
         };
-        return /*#__PURE__*/React__namespace.createElement(Option, _extends$g({}, commonProps, {
+        return /*#__PURE__*/React__namespace.createElement(Option, _extends$f({}, commonProps, {
           innerProps: innerProps,
           data: data,
           isDisabled: isDisabled,
@@ -23917,7 +23897,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$g({}, commonProps, {
+            return /*#__PURE__*/React__namespace.createElement(Group, _extends$f({}, commonProps, {
               key: groupId,
               data: _data,
               options: options,
@@ -23956,12 +23936,12 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
-      var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends$g({}, commonProps, menuPlacementProps), function (_ref4) {
+      var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends$f({}, 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$g({}, commonProps, menuPlacementProps, {
+        return /*#__PURE__*/React__namespace.createElement(Menu, _extends$f({}, commonProps, menuPlacementProps, {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
@@ -23976,7 +23956,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          return /*#__PURE__*/React__namespace.createElement(MenuList, _extends$g({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(MenuList, _extends$f({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
 
@@ -23991,7 +23971,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$g({}, commonProps, {
+      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React__namespace.createElement(MenuPortal, _extends$f({}, commonProps, {
         appendTo: menuPortalTarget,
         controlElement: this.controlRef,
         menuPlacement: menuPlacement,
@@ -24056,7 +24036,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$g({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(LiveRegion, _extends$f({}, commonProps, {
         id: this.getElementId('live-region'),
         ariaSelection: ariaSelection,
         focusedOption: focusedOption,
@@ -24082,7 +24062,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$g({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(SelectContainer, _extends$f({}, commonProps, {
         className: className,
         innerProps: {
           id: id,
@@ -24090,7 +24070,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         },
         isDisabled: isDisabled,
         isFocused: isFocused
-      }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends$g({}, commonProps, {
+      }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends$f({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,
@@ -24099,9 +24079,9 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         isFocused: isFocused,
         menuIsOpen: menuIsOpen
-      }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends$g({}, commonProps, {
+      }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends$f({}, commonProps, {
         isDisabled: isDisabled
-      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends$g({}, commonProps, {
+      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends$f({}, commonProps, {
         isDisabled: isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
@@ -24174,22 +24154,22 @@ Select$1.defaultProps = defaultProps;
 
 var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var baseSelectProps = useStateManager(props);
-  return /*#__PURE__*/React__namespace.createElement(Select$1, _extends$g({
+  return /*#__PURE__*/React__namespace.createElement(Select$1, _extends$f({
     ref: ref
   }, baseSelectProps));
 });
 
 var ReactSelect = StateManagedSelect;
 
-var _g$6;
-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 _g$5;
+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 SvgIcAppstatusCancelled = function SvgIcAppstatusCancelled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 28 28",
     width: "1em",
     height: "1em"
-  }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
     transform: "translate(2 2)"
@@ -24206,9 +24186,9 @@ var SvgIcAppstatusCancelled = function SvgIcAppstatusCancelled(props) {
 };
 
 var _path$7;
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+function _extends$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 SvgIcCheck = function SvgIcCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -24224,15 +24204,15 @@ var SvgIcCheck = function SvgIcCheck(props) {
   })));
 };
 
-var _g$5;
-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 _g$4;
+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 SvgIcErrorMedium = function SvgIcErrorMedium(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 21"
-  }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -24292,8 +24272,8 @@ var CustomSelect = function (props) {
     return jsxRuntime.jsx(ReactSelect, __assign({}, props));
 };
 
-var css_248z$5 = ".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$5);
+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;
@@ -24409,6 +24389,8 @@ var cdMaterialListModal = function (artifacts, offset, artifactId, artifactStatu
             isVirtualEnvironment: material.isVirtualEnvironment,
             imageComment: material.imageComment,
             imageReleaseTags: material.imageReleaseTags,
+            hasDuplicateImages: material.hasDuplicateImages,
+            isSuperseded: material.isSuperseded,
             // It is going to be null but required in type so can't remove
             lastExecution: material.lastExecution,
             materialInfo: material.material_info
@@ -24569,124 +24551,6 @@ var Checkbox$1 = /** @class */ (function (_super) {
     return Checkbox;
 }(React.Component));
 
-var _g$4;
-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 SvgIcSearch = function SvgIcSearch(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    width: "1em",
-    height: "1em"
-  }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M0 0h24v24H0z"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#959BA1",
-    d: "M10 2a8 8 0 0 1 6.32 12.905l5.044 5.045a1 1 0 1 1-1.414 1.414l-5.045-5.043A8 8 0 1 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12z"
-  }))));
-};
-
-var _g$3;
-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 SvgIcErrorCross = function SvgIcErrorCross(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 32 32"
-  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
-    transform: "translate(2.667 2.667)",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__namespace.createElement("rect", {
-    width: 26.667,
-    height: 26.667,
-    className: "ic-error-cross_svg__fill-color",
-    fill: "#596168",
-    rx: 13.333
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#FFF",
-    fillRule: "nonzero",
-    d: "M8.62 8.62a1.332 1.332 0 0 1 1.885 0l2.828 2.827 2.829-2.828a1.334 1.334 0 0 1 1.777-.097l.108.097a1.333 1.333 0 0 1 0 1.886l-2.828 2.828 2.828 2.829c.486.486.519 1.254.098 1.777l-.098.108a1.332 1.332 0 0 1-1.885 0l-2.83-2.828-2.827 2.828a1.334 1.334 0 0 1-1.777.098l-.109-.098a1.333 1.333 0 0 1 0-1.885l2.828-2.83-2.828-2.827a1.334 1.334 0 0 1-.097-1.777z"
-  }))));
-};
-
-var css_248z$4 = ".search-bar:focus, .search-bar:focus-within {\n  outline: none;\n  border: solid 1px var(--B500);\n}\n.search-bar__input:focus, .search-bar__input:focus-visible {\n  border: none;\n  outline: none;\n}\n.search-bar__icon {\n  z-index: 1;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n}\n.search-bar__clear-button {\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n}";
-styleInject(css_248z$4);
-
-/**
- * Generic search input component with support for enter based and debounced search
- * Note: The component is uncontrolled
- *
- * @example Usage with default debounced search
- * ```tsx
- * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce />
- * ```
- *
- * @example Initial search text
- * ```tsx
- * <SearchBar initialSearchText="Keyword" />
- * ```
- *
- * @example Custom width
- * ```tsx
- * <SearchBar containerClassName="w-300" />
- * ```
- *
- * @example Trigger search on enter key press
- * ```tsx
- * <SearchBar handleEnter={triggerSearchApi} />
- * ```
- *
- * @example Custom timeout for debounced search
- * ```tsx
- * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce debounceTimeout={500} />
- * ```
- *
- * @example Placeholder for the search
- * ```tsx
- * <SearchBar inputProps={{ placeholder: 'Enter search text' }} />
- * ```
- */
-var SearchBar = function (_a) {
-    var _b = _a.initialSearchText, initialSearchText = _b === void 0 ? '' : _b, _c = _a.handleSearchChange, handleSearchChange = _c === void 0 ? function () { } : _c, _d = _a.handleEnter, handleEnter = _d === void 0 ? function () { } : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, containerClassName = _a.containerClassName, _f = _a.shouldDebounce, shouldDebounce = _f === void 0 ? false : _f, _g = _a.debounceTimeout, debounceTimeout = _g === void 0 ? 300 : _g;
-    var _h = __read(React.useState(!!initialSearchText), 2), showClearButton = _h[0], setShowClearButton = _h[1];
-    var inputRef = React.useRef();
-    var debouncedSearchChange = React.useCallback(debounce$2(handleSearchChange, debounceTimeout), [
-        handleSearchChange,
-        debounceTimeout,
-    ]);
-    var handleChange = function (e) {
-        var value = e.target.value;
-        setShowClearButton(!!value);
-        if (shouldDebounce) {
-            debouncedSearchChange(value);
-        }
-        else {
-            handleSearchChange(value);
-        }
-    };
-    var _applySearch = function (value) {
-        handleSearchChange(value);
-        handleEnter(value);
-    };
-    var handleKeyDown = function (e) {
-        var key = e.key;
-        if (key === 'Enter') {
-            var inputTarget = e.target;
-            var value = inputTarget.value.trim();
-            _applySearch(value);
-        }
-    };
-    var clearSearch = function () {
-        inputRef.current.value = '';
-        _applySearch('');
-    };
-    return (jsxRuntime.jsx("div", __assign({ className: containerClassName }, { children: jsxRuntime.jsxs("div", __assign({ className: "search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32" }, { children: [jsxRuntime.jsx(SvgIcSearch, { className: "search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" }), jsxRuntime.jsx("input", __assign({ placeholder: "Search", "data-testid": "search-bar", type: "text" }, inputProps, { defaultValue: initialSearchText, className: "search-bar__input bcn-0 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ".concat(showClearButton ? 'pr-30' : 'pr-10'), onChange: handleChange, onKeyDown: handleKeyDown, ref: inputRef })), showClearButton && (jsxRuntime.jsx("button", __assign({ className: "flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5", type: "button", onClick: clearSearch, "aria-label": "Clear search" }, { children: jsxRuntime.jsx(SvgIcErrorCross, { className: "icon-dim-18 icon-n4 dc__vertical-align-middle" }) })))] })) })));
-};
-
 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);
 
@@ -24822,15 +24686,15 @@ exports.ConsequenceAction = void 0;
     ConsequenceAction["ALLOW_FOREVER"] = "ALLOW_FOREVER";
 })(exports.ConsequenceAction || (exports.ConsequenceAction = {}));
 
-var _g$2;
-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 _g$3;
+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 SvgIcInfoFilled = function SvgIcInfoFilled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 32 32"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -24905,9 +24769,9 @@ function DeleteComponent(_a) {
 }
 
 var _path$6;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
 var SvgIcPencil = function SvgIcPencil(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20",
@@ -24923,9 +24787,9 @@ var SvgIcPencil = function SvgIcPencil(props) {
 };
 
 var _path$5, _path2, _path3;
-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 SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     width: "1em",
     height: "1em",
     viewBox: "0 0 12 12",
@@ -24950,9 +24814,9 @@ var SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
 };
 
 var _path$4;
-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 SvgIcMinus = function SvgIcMinus(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",
@@ -24965,15 +24829,15 @@ var SvgIcMinus = function SvgIcMinus(props) {
   })));
 };
 
-var _g$1;
-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 _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); }
 var SvgIcWarning = function SvgIcWarning(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 32 32"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -24987,15 +24851,15 @@ var SvgIcWarning = function SvgIcWarning(props) {
   }))));
 };
 
-var _g;
-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 _g$1;
+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 SvgIcErrorExclamation = function SvgIcErrorExclamation(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -25008,9 +24872,9 @@ var SvgIcErrorExclamation = function SvgIcErrorExclamation(props) {
 };
 
 var _path$3;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 var SvgIcEnter = function SvgIcEnter(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -25374,9 +25238,32 @@ function useDebouncedEffect(callback, delay, deps) {
     }, __spreadArray([delay], __read(deps), false));
 }
 
+var _g;
+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 SvgIcErrorCross = function SvgIcErrorCross(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 32 32"
+  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    transform: "translate(2.667 2.667)",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 26.667,
+    height: 26.667,
+    className: "ic-error-cross_svg__fill-color",
+    fill: "#596168",
+    rx: 13.333
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#FFF",
+    fillRule: "nonzero",
+    d: "M8.62 8.62a1.332 1.332 0 0 1 1.885 0l2.828 2.827 2.829-2.828a1.334 1.334 0 0 1 1.777-.097l.108.097a1.333 1.333 0 0 1 0 1.886l-2.828 2.828 2.828 2.829c.486.486.519 1.254.098 1.777l-.098.108a1.332 1.332 0 0 1-1.885 0l-2.83-2.828-2.827 2.828a1.334 1.334 0 0 1-1.777.098l-.109-.098a1.333 1.333 0 0 1 0-1.885l2.828-2.83-2.828-2.827a1.334 1.334 0 0 1-.097-1.777z"
+  }))));
+};
+
 /**
- * @deprecated Use `SearchBar` component instead.
- *
  * @param onSearch - Callback function to be called on search
  * @param Icon - (Optional) Icon to be shown before the input
  * @param iconClass - (Optional) Class for the icon
@@ -28686,7 +28573,6 @@ exports.RepositoryAction = RepositoryAction;
 exports.ResizableTagTextArea = ResizableTagTextArea;
 exports.ResizableTextarea = ResizableTextarea;
 exports.ScanVulnerabilitiesTable = ScanVulnerabilitiesTable;
-exports.SearchBar = SearchBar;
 exports.ServerError = ServerError;
 exports.ServerErrors = ServerErrors;
 exports.SingleSelectOption = SingleSelectOption;
@@ -28710,7 +28596,6 @@ exports.closeOnEscKeyPressed = closeOnEscKeyPressed;
 exports.copyToClipboard = copyToClipboard;
 exports.createGitCommitUrl = createGitCommitUrl;
 exports.customStyles = customStyles;
-exports.debounce = debounce$2;
 exports.extractImage = extractImage;
 exports.fetchChartTemplateVersions = fetchChartTemplateVersions;
 exports.genericCDMaterialsService = genericCDMaterialsService;