@devtron-labs/devtron-fe-common-lib 0.0.55-beta-2 → 0.0.55-beta-4

package/dist/index.js

@@ -8,6 +8,7 @@ var vm = require('vm');
 var RJSF = require('@rjsf/core');
 var RJSFValidator = require('@rjsf/validator-ajv8');
 var utils = require('@rjsf/utils');
+var Draggable = require('react-draggable');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -256,7 +257,8 @@ var RepositoryAction = {
     CONTAINER: "CONTAINER",
     CHART_PULL: "CHART_PULL",
     CHART_PUSH: "CHART_PUSH"
-};
+};
+var MAX_Z_INDEX = 2147483647;
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -272,7 +274,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 var extendStatics = function(d, b) {
     extendStatics = Object.setPrototypeOf ||
@@ -375,7 +377,12 @@ function __spreadArray(to, from, pack) {
         }
     }
     return to.concat(ar || Array.prototype.slice.call(from));
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var ServerError = /** @class */ (function () {
     function ServerError(error) {
@@ -745,18 +752,18 @@ function styleInject(css, ref) {
   }
 }
 
-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 css_248z$9 = ".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$9);
 
-var _g$6;
-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); }
+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 SvgIcProgressing = function SvgIcProgressing(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "1em",
     height: "1em"
-  }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$7 || (_g$7 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none"
   }, /*#__PURE__*/React__namespace.createElement("animateTransform", {
     attributeName: "transform",
@@ -803,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$l() {
-  _extends$l = Object.assign || function (target) {
+function _extends$n() {
+  _extends$n = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -818,7 +825,7 @@ function _extends$l() {
     return target;
   };
 
-  return _extends$l.apply(this, arguments);
+  return _extends$n.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$2(source, excluded) {
@@ -1544,7 +1551,7 @@ function ProgressBar(_ref) {
       isIn = _ref.isIn,
       theme = _ref.theme;
 
-  var style = _extends$l({}, userStyle, {
+  var style = _extends$n({}, userStyle, {
     animationDuration: delay + "ms",
     animationPlayState: isRunning ? 'running' : 'paused',
     opacity: hide ? 0 : 1
@@ -1821,9 +1828,9 @@ var ToastContainer = function ToastContainer(props) {
     ,
     id: containerId
   }, getToastToRender(function (position, toastList) {
-    var containerStyle = !toastList.length ? _extends$l({}, style, {
+    var containerStyle = !toastList.length ? _extends$n({}, style, {
       pointerEvents: 'none'
-    }) : _extends$l({}, style);
+    }) : _extends$n({}, style);
     return React.createElement("div", {
       className: getClassName(position),
       style: containerStyle,
@@ -1930,7 +1937,7 @@ function dispatchToast(content, options) {
 
 
 function mergeOptions(type, options) {
-  return _extends$l({}, options, {
+  return _extends$n({}, options, {
     type: options && options.type || type,
     toastId: getToastId(options)
   });
@@ -1947,7 +1954,7 @@ function toast(content, options) {
 }
 
 toast.loading = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$l({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$n({
     isLoading: true,
     autoClose: false,
     closeOnClick: false,
@@ -1963,7 +1970,7 @@ function handlePromise(promise, _ref2, options) {
   var id;
 
   if (pending) {
-    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$l({}, options, pending));
+    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$n({}, options, pending));
   }
 
   var resetParams = {
@@ -1982,7 +1989,7 @@ function handlePromise(promise, _ref2, options) {
       return;
     }
 
-    var baseParams = _extends$l({
+    var baseParams = _extends$n({
       type: type
     }, resetParams, options, {
       data: result
@@ -1993,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$l({}, baseParams, params));
+      toast.update(id, _extends$n({}, baseParams, params));
     } else {
       // using toast.promise without loading
-      toast(params.render, _extends$l({}, baseParams, params));
+      toast(params.render, _extends$n({}, baseParams, params));
     }
 
     return result;
@@ -2020,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$l({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$n({
     theme: 'dark'
   }, options)));
 };
@@ -2077,7 +2084,7 @@ toast.update = function (toastId, options) {
       var oldOptions = toast.props,
           oldContent = toast.content;
 
-      var nextOptions = _extends$l({}, oldOptions, options, {
+      var nextOptions = _extends$n({}, oldOptions, options, {
         toastId: options.toastId || toastId,
         updateId: generateToastId()
       });
@@ -11780,18 +11787,20 @@ var getFilteredChartVersions = function (charts, selectedChartType) {
         chartRefId: item.chartRefId,
     }); });
 };
-function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
-    // It recursively removes empty object keys and empty array keys
+function removeEmptyObjectKeysAndNullValues(obj) {
+    // It recursively removes empty object keys and array values that are null
     for (var key in obj) {
         if (Array.isArray(obj[key])) {
+            if (obj[key].length === 0)
+                continue;
+            obj[key] = obj[key].filter(function (item) { return item !== null; });
             // Check if the array is empty
-            if (obj[key].length === 0 && originaljsonCopy[key].length !== 0) {
-                delete obj[key];
+            if (obj[key].length === 0) {
+                delete obj[key]; // Delete the key if the array is empty
             }
         }
         else if (obj[key] && typeof obj[key] === 'object') {
-            if (removeEmptyObjectKeysAndNullValues(obj[key], originaljsonCopy[key]) &&
-                Object.keys(originaljsonCopy[key]).length !== 0) {
+            if (removeEmptyObjectKeysAndNullValues(obj[key])) {
                 delete obj[key];
             }
         }
@@ -11801,27 +11810,19 @@ function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
     }
     return Object.keys(obj).length === 0;
 }
-function getUnlockedJSON(json, jsonPathArray, removeParentKeysAndEmptyArrays) {
-    if (removeParentKeysAndEmptyArrays === void 0) { removeParentKeysAndEmptyArrays = false; }
-    if (!jsonPathArray.length)
-        return { newDocument: json, removedPatches: [] };
+function getUnlockedJSON(json, jsonPathArray) {
     var jsonCopy = JSON.parse(JSON.stringify(json));
-    var originaljsonCopy = JSON.parse(JSON.stringify(json));
-    var removedPatches = [];
     var patches = jsonPathArray.flatMap(function (jsonPath) {
         var pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' });
-        //reversing patches to handle correct array index deletion
-        pathsToRemove.reverse();
         return pathsToRemove.map(function (result) {
-            //storing removed patches to have functionality of undo
-            removedPatches.push({ op: 'add', path: result.pointer, value: result.value });
-            return { op: 'remove', path: result.pointer };
+            return Array.isArray(result.parent)
+                ? { op: 'replace', path: result.pointer, value: null }
+                : { op: 'remove', path: result.pointer };
         });
     });
     var newDocument = applyPatch(jsonCopy, patches).newDocument;
-    if (removeParentKeysAndEmptyArrays)
-        removeEmptyObjectKeysAndNullValues(newDocument, originaljsonCopy);
-    return { newDocument: newDocument, removedPatches: removedPatches.reverse() };
+    removeEmptyObjectKeysAndNullValues(newDocument);
+    return newDocument;
 }
 function getLockedJSON(json, jsonPathArray) {
     var jsonCopy = JSON.parse(JSON.stringify(json));
@@ -11845,7 +11846,27 @@ 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;
@@ -11897,8 +11918,8 @@ var VisibleModal = /** @class */ (function (_super) {
     return VisibleModal;
 }(React.Component));
 
-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 css_248z$8 = ".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$8);
 
 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;
@@ -11972,16 +11993,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$c;
-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 _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); }
 var SvgIcCross = function SvgIcCross(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__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"
   })));
@@ -16280,38 +16301,38 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 
 var Tippy = index;
 
-var _path$b;
-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 _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); }
 var SvgIcHelp = function SvgIcHelp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__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$a;
-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 _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); }
 var SvgIcHelpOutline = function SvgIcHelpOutline(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 17 16",
     width: "1em",
     height: "1em"
-  }, 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: "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$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);
+var css_248z$7 = ".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$7);
 
 // 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
@@ -16355,16 +16376,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$9, _circle, _path2$1;
-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$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); }
 var SvgInjectTag = function SvgInjectTag(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10 10H3.333",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -16392,15 +16413,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$8;
-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$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); }
 var SvgIcInfoOutlined = function SvgIcInfoOutlined(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__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"
@@ -16634,15 +16655,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$7;
-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$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); }
 var SvgIcAdd = function SvgIcAdd(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  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$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__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"
@@ -16772,8 +16793,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$e() {
-  _extends$e = Object.assign ? Object.assign.bind() : function (target) {
+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) {
@@ -16784,7 +16805,7 @@ function _extends$e() {
     }
     return target;
   };
-  return _extends$e.apply(this, arguments);
+  return _extends$g.apply(this, arguments);
 }
 
 /*
@@ -19612,14 +19633,14 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-function _typeof(obj) {
+function _typeof(o) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
 }
 
 function _classCallCheck(instance, Constructor) {
@@ -19628,20 +19649,20 @@ function _classCallCheck(instance, Constructor) {
   }
 }
 
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : String(i);
 }
 
 function _defineProperties(target, props) {
@@ -19650,7 +19671,7 @@ function _defineProperties(target, props) {
     descriptor.enumerable = descriptor.enumerable || false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+    Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
   }
 }
 function _createClass(Constructor, protoProps, staticProps) {
@@ -19688,7 +19709,7 @@ function _inherits(subClass, superClass) {
 }
 
 function _defineProperty$1(obj, key, value) {
-  key = _toPropertyKey(key);
+  key = toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -20325,7 +20346,7 @@ var Menu = function Menu(props) {
       getStyles = props.getStyles,
       innerRef = props.innerRef,
       innerProps = props.innerProps;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('menu', props),
     className: cx({
       menu: true
@@ -20357,7 +20378,7 @@ var MenuList$1 = function MenuList(props) {
       innerProps = props.innerProps,
       innerRef = props.innerRef,
       isMulti = props.isMulti;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('menuList', props),
     className: cx({
       'menu-list': true,
@@ -20388,7 +20409,7 @@ var NoOptionsMessage = function NoOptionsMessage(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('noOptionsMessage', props),
     className: cx({
       'menu-notice': true,
@@ -20405,7 +20426,7 @@ var LoadingMessage = function LoadingMessage(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('loadingMessage', props),
     className: cx({
       'menu-notice': true,
@@ -20493,7 +20514,7 @@ var MenuPortal = /*#__PURE__*/function (_Component2) {
         rect: rect
       }; // same wrapper element whether fixed or portalled
 
-      var menuWrapper = jsx("div", _extends$e({
+      var menuWrapper = jsx("div", _extends$g({
         css: getStyles('menuPortal', state),
         className: cx({
           'menu-portal': true
@@ -20529,7 +20550,7 @@ var SelectContainer = function SelectContainer(props) {
       innerProps = props.innerProps,
       isDisabled = props.isDisabled,
       isRtl = props.isRtl;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('container', props),
     className: cx({
       '--is-disabled': isDisabled,
@@ -20564,7 +20585,7 @@ var ValueContainer = function ValueContainer(props) {
       isMulti = props.isMulti,
       getStyles = props.getStyles,
       hasValue = props.hasValue;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('valueContainer', props),
     className: cx({
       'value-container': true,
@@ -20590,7 +20611,7 @@ var IndicatorsContainer = function IndicatorsContainer(props) {
       cx = props.cx,
       innerProps = props.innerProps,
       getStyles = props.getStyles;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('indicatorsContainer', props),
     className: cx({
       indicators: true
@@ -20621,7 +20642,7 @@ var Svg = function Svg(_ref) {
   var size = _ref.size,
       props = _objectWithoutProperties(_ref, _excluded$2);
 
-  return jsx("svg", _extends$e({
+  return jsx("svg", _extends$g({
     height: size,
     width: size,
     viewBox: "0 0 20 20",
@@ -20632,14 +20653,14 @@ var Svg = function Svg(_ref) {
 };
 
 var CrossIcon = function CrossIcon(props) {
-  return jsx(Svg, _extends$e({
+  return jsx(Svg, _extends$g({
     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$e({
+  return jsx(Svg, _extends$g({
     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"
@@ -20672,7 +20693,7 @@ var DropdownIndicator$1 = function DropdownIndicator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('dropdownIndicator', props),
     className: cx({
       indicator: true,
@@ -20687,7 +20708,7 @@ var ClearIndicator$1 = function ClearIndicator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('clearIndicator', props),
     className: cx({
       indicator: true,
@@ -20717,7 +20738,7 @@ var IndicatorSeparator = function IndicatorSeparator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("span", _extends$e({}, innerProps, {
+  return jsx("span", _extends$g({}, innerProps, {
     css: getStyles('indicatorSeparator', props),
     className: cx({
       'indicator-separator': true
@@ -20772,7 +20793,7 @@ var LoadingIndicator = function LoadingIndicator(props) {
       getStyles = props.getStyles,
       innerProps = props.innerProps,
       isRtl = props.isRtl;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('loadingIndicator', props),
     className: cx({
       indicator: true,
@@ -20833,7 +20854,7 @@ var Control = function Control(props) {
       innerRef = props.innerRef,
       innerProps = props.innerProps,
       menuIsOpen = props.menuIsOpen;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     ref: innerRef,
     css: getStyles('control', props),
     className: cx({
@@ -20865,12 +20886,12 @@ var Group = function Group(props) {
       label = props.label,
       theme = props.theme,
       selectProps = props.selectProps;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('group', props),
     className: cx({
       group: true
     }, className)
-  }, innerProps), jsx(Heading, _extends$e({}, headingProps, {
+  }, innerProps), jsx(Heading, _extends$g({}, headingProps, {
     selectProps: selectProps,
     theme: theme,
     getStyles: getStyles,
@@ -20902,7 +20923,7 @@ var GroupHeading = function GroupHeading(props) {
       _cleanCommonProps.data;
       var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1$1);
 
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('groupHeading', props),
     className: cx({
       'group-heading': true
@@ -20978,7 +20999,7 @@ var Input = function Input(props) {
     }, className),
     css: getStyles('input', props),
     "data-value": value || ''
-  }, jsx("input", _extends$e({
+  }, jsx("input", _extends$g({
     className: cx({
       input: true
     }, inputClassName),
@@ -21048,7 +21069,7 @@ var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove$1(_ref5) {
   var children = _ref5.children,
       innerProps = _ref5.innerProps;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     role: "button"
   }, innerProps), children || jsx(CrossIcon, {
     size: 14
@@ -21137,7 +21158,7 @@ var Option$1 = function Option(props) {
       isSelected = props.isSelected,
       innerRef = props.innerRef,
       innerProps = props.innerProps;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('option', props),
     className: cx({
       option: true,
@@ -21169,7 +21190,7 @@ var Placeholder = function Placeholder(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('placeholder', props),
     className: cx({
       placeholder: true
@@ -21202,7 +21223,7 @@ var SingleValue = function SingleValue(props) {
       getStyles = props.getStyles,
       isDisabled = props.isDisabled,
       innerProps = props.innerProps;
-  return jsx("div", _extends$e({
+  return jsx("div", _extends$g({
     css: getStyles('singleValue', props),
     className: cx({
       'single-value': true,
@@ -21246,31 +21267,31 @@ function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
     try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
     } finally {
       try {
-        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
       } finally {
-        if (_d) throw _e;
+        if (o) throw n;
       }
     }
-    return _arr;
+    return a;
   }
 }
 
@@ -21450,7 +21471,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 
 var A11yText = function A11yText(props) {
-  return jsx("span", _extends$e({
+  return jsx("span", _extends$g({
     css: _ref
   }, props));
 };
@@ -21986,7 +22007,7 @@ function DummyInput(_ref) {
   var innerRef = _ref.innerRef,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return jsx("input", _extends$e({
+  return jsx("input", _extends$g({
     ref: innerRef
   }, props, {
     css: /*#__PURE__*/css$2({
@@ -23621,7 +23642,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$e({
+        return /*#__PURE__*/React__namespace.createElement(DummyInput, _extends$g({
           id: id,
           innerRef: this.getInputRef,
           onBlur: this.onInputBlur,
@@ -23635,7 +23656,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         }, ariaAttributes));
       }
 
-      return /*#__PURE__*/React__namespace.createElement(Input, _extends$e({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(Input, _extends$g({}, commonProps, {
         autoCapitalize: "none",
         autoComplete: "off",
         autoCorrect: "off",
@@ -23679,7 +23700,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           isFocused = _this$state5.isFocused;
 
       if (!this.hasValue() || !controlShouldRenderValue) {
-        return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends$e({}, commonProps, {
+        return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends$g({}, commonProps, {
           key: "placeholder",
           isDisabled: isDisabled,
           isFocused: isFocused,
@@ -23693,7 +23714,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$e({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(MultiValue, _extends$g({}, commonProps, {
             components: {
               Container: MultiValueContainer,
               Label: MultiValueLabel,
@@ -23725,7 +23746,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       }
 
       var singleValue = selectValue[0];
-      return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends$e({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends$g({}, commonProps, {
         data: singleValue,
         isDisabled: isDisabled
       }), this.formatOptionLabel(singleValue, 'value'));
@@ -23751,7 +23772,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends$e({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends$g({}, commonProps, {
         innerProps: innerProps,
         isFocused: isFocused
       }));
@@ -23771,7 +23792,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       var innerProps = {
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends$e({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends$g({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -23789,7 +23810,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$e({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(IndicatorSeparator, _extends$g({}, commonProps, {
         isDisabled: isDisabled,
         isFocused: isFocused
       }));
@@ -23809,7 +23830,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends$e({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends$g({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -23872,7 +23893,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           onMouseOver: onHover,
           tabIndex: -1
         };
-        return /*#__PURE__*/React__namespace.createElement(Option, _extends$e({}, commonProps, {
+        return /*#__PURE__*/React__namespace.createElement(Option, _extends$g({}, commonProps, {
           innerProps: innerProps,
           data: data,
           isDisabled: isDisabled,
@@ -23896,7 +23917,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$e({}, commonProps, {
+            return /*#__PURE__*/React__namespace.createElement(Group, _extends$g({}, commonProps, {
               key: groupId,
               data: _data,
               options: options,
@@ -23935,12 +23956,12 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
-      var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends$e({}, commonProps, menuPlacementProps), function (_ref4) {
+      var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends$g({}, 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$e({}, commonProps, menuPlacementProps, {
+        return /*#__PURE__*/React__namespace.createElement(Menu, _extends$g({}, commonProps, menuPlacementProps, {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
@@ -23955,7 +23976,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          return /*#__PURE__*/React__namespace.createElement(MenuList, _extends$e({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(MenuList, _extends$g({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
 
@@ -23970,7 +23991,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$e({}, commonProps, {
+      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React__namespace.createElement(MenuPortal, _extends$g({}, commonProps, {
         appendTo: menuPortalTarget,
         controlElement: this.controlRef,
         menuPlacement: menuPlacement,
@@ -24035,7 +24056,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$e({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(LiveRegion, _extends$g({}, commonProps, {
         id: this.getElementId('live-region'),
         ariaSelection: ariaSelection,
         focusedOption: focusedOption,
@@ -24061,7 +24082,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$e({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(SelectContainer, _extends$g({}, commonProps, {
         className: className,
         innerProps: {
           id: id,
@@ -24069,7 +24090,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         },
         isDisabled: isDisabled,
         isFocused: isFocused
-      }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends$e({}, commonProps, {
+      }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends$g({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,
@@ -24078,9 +24099,9 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         isFocused: isFocused,
         menuIsOpen: menuIsOpen
-      }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends$e({}, commonProps, {
+      }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends$g({}, commonProps, {
         isDisabled: isDisabled
-      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends$e({}, commonProps, {
+      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends$g({}, commonProps, {
         isDisabled: isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
@@ -24153,22 +24174,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$e({
+  return /*#__PURE__*/React__namespace.createElement(Select$1, _extends$g({
     ref: ref
   }, baseSelectProps));
 });
 
 var ReactSelect = StateManagedSelect;
 
-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$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 SvgIcAppstatusCancelled = function SvgIcAppstatusCancelled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 28 28",
     width: "1em",
     height: "1em"
-  }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
     transform: "translate(2 2)"
@@ -24184,15 +24205,15 @@ var SvgIcAppstatusCancelled = function SvgIcAppstatusCancelled(props) {
   }))));
 };
 
-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$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 SvgIcCheck = function SvgIcCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     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", {
     stroke: "#06C",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -24203,15 +24224,15 @@ var SvgIcCheck = function SvgIcCheck(props) {
   })));
 };
 
-var _g$4;
-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 _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 SvgIcErrorMedium = function SvgIcErrorMedium(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 21"
-  }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -24271,8 +24292,8 @@ var CustomSelect = function (props) {
     return jsxRuntime.jsx(ReactSelect, __assign({}, props));
 };
 
-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);
+var css_248z$6 = ".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$6);
 
 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;
@@ -24548,8 +24569,126 @@ var Checkbox$1 = /** @class */ (function (_super) {
     return Checkbox;
 }(React.Component));
 
-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 _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$5 = ".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$5);
+
+/**
+ * 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$4 = ".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$4);
 
 var Toggle = function (_a) {
     var _b;
@@ -24573,8 +24712,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$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);
+var css_248z$3 = ".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$3);
 
 function ScanVulnerabilitiesTable(_a) {
     var vulnerabilities = _a.vulnerabilities;
@@ -24589,8 +24728,8 @@ function ScanVulnerabilitiesTable(_a) {
                 })] }) })));
 }
 
-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 css_248z$2 = ".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$2);
 
 var RadioContext = React.createContext(null);
 function useRadioContext() {
@@ -24683,7 +24822,7 @@ exports.ConsequenceAction = void 0;
     ConsequenceAction["ALLOW_FOREVER"] = "ALLOW_FOREVER";
 })(exports.ConsequenceAction || (exports.ConsequenceAction = {}));
 
-var _g$3;
+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 SvgIcInfoFilled = function SvgIcInfoFilled(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
@@ -24691,7 +24830,7 @@ var SvgIcInfoFilled = function SvgIcInfoFilled(props) {
     width: "1em",
     height: "1em",
     viewBox: "0 0 32 32"
-  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -24765,7 +24904,7 @@ function DeleteComponent(_a) {
     return (jsxRuntime.jsxs("div", { children: [!showCannotDeleteDialogModal && renderDeleteDialog(), showCannotDeleteDialogModal && renderCannotDeleteDialogModal()] }));
 }
 
-var _path$5;
+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); }
 var SvgIcPencil = function SvgIcPencil(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
@@ -24774,7 +24913,7 @@ var SvgIcPencil = function SvgIcPencil(props) {
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__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,
@@ -24783,7 +24922,7 @@ var SvgIcPencil = function SvgIcPencil(props) {
   })));
 };
 
-var _path$4, _path2, _path3;
+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); }
 var SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
@@ -24792,7 +24931,7 @@ var SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
     viewBox: "0 0 12 12",
     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: "M3.742 4.674h-2.25v-2.25",
     fill: "#767D84"
   })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -24810,7 +24949,7 @@ var SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
   })));
 };
 
-var _path$3;
+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); }
 var SvgIcMinus = function SvgIcMinus(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
@@ -24818,7 +24957,7 @@ var SvgIcMinus = function SvgIcMinus(props) {
     width: "1em",
     height: "1em",
     viewBox: "0 0 14 14"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#959BA1",
     className: "ic-minus_svg__fill-color",
     fillRule: "evenodd",
@@ -24826,7 +24965,7 @@ var SvgIcMinus = function SvgIcMinus(props) {
   })));
 };
 
-var _g$2;
+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 SvgIcWarning = function SvgIcWarning(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
@@ -24834,7 +24973,7 @@ var SvgIcWarning = function SvgIcWarning(props) {
     width: "1em",
     height: "1em",
     viewBox: "0 0 32 32"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -24848,7 +24987,7 @@ var SvgIcWarning = function SvgIcWarning(props) {
   }))));
 };
 
-var _g$1;
+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 SvgIcErrorExclamation = function SvgIcErrorExclamation(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
@@ -24856,7 +24995,7 @@ var SvgIcErrorExclamation = function SvgIcErrorExclamation(props) {
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -24868,7 +25007,7 @@ var SvgIcErrorExclamation = function SvgIcErrorExclamation(props) {
   }))));
 };
 
-var _path$2;
+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); }
 var SvgIcEnter = function SvgIcEnter(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
@@ -24877,7 +25016,7 @@ var SvgIcEnter = function SvgIcEnter(props) {
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__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"
   })));
@@ -25235,32 +25374,9 @@ function useDebouncedEffect(callback, delay, deps) {
     }, __spreadArray([delay], __read(deps), false));
 }
 
-var _g;
-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 SvgIcErrorCross = function SvgIcErrorCross(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
-    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
@@ -25290,7 +25406,7 @@ function DebouncedSearch(_a) {
 
 // This is meant to be a reusable component that will provide a grid like dynamic layout where xs is the number of columns out of 12 that the item will take up
 function Grid(_a) {
-    var container = _a.container, _b = _a.spacing, spacing = _b === void 0 ? 0 : _b, item = _a.item, xs = _a.xs, _c = _a.containerClass, containerClass = _c === void 0 ? '' : _c, _d = _a.itemClass, itemClass = _d === void 0 ? '' : _d, children = _a.children;
+    var container = _a.container, _b = _a.spacing, spacing = _b === void 0 ? 0 : _b, item = _a.item, xs = _a.xs, _c = _a.containerClass, containerClass = _c === void 0 ? '' : _c, _d = _a.itemClass, itemClass = _d === void 0 ? '' : _d, children = _a.children, containerDivProps = __rest(_a, ["container", "spacing", "item", "xs", "containerClass", "itemClass", "children"]);
     var containerStyles = container ? { gap: spacing + 'px' } : {};
     if (item) {
         var getColumnWidth = function () {
@@ -25301,20 +25417,20 @@ function Grid(_a) {
         var itemStyles = {
             flex: "1 1 ".concat(getColumnWidth()),
         };
-        return (jsxRuntime.jsx("div", __assign({ className: "p-0 ".concat(itemClass), style: itemStyles }, { children: children })));
+        return (jsxRuntime.jsx("div", __assign({ className: "p-0 ".concat(itemClass), style: itemStyles }, containerDivProps, { children: children })));
     }
-    return (jsxRuntime.jsx("div", __assign({ className: "flex-wrap flexbox ".concat(container ? containerClass : ''), style: containerStyles }, { children: children })));
+    return (jsxRuntime.jsx("div", __assign({ className: "flex-wrap flexbox ".concat(container ? containerClass : ''), style: containerStyles }, containerDivProps, { children: children })));
 }
 
-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 SvgIcCopy = function SvgIcCopy(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__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"
@@ -25387,6 +25503,30 @@ var useClickOutside = function (ref, callback) {
     }, [ref, callback]);
 };
 
+var timeout;
+var getSize = function () {
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+};
+var useWindowSize = function () {
+    var _a = __read(React.useState(getSize), 2), windowSize = _a[0], setWindowSize = _a[1];
+    function handleResize(e) {
+        if (timeout) {
+            window.cancelAnimationFrame(timeout);
+        }
+        timeout = window.requestAnimationFrame(function () {
+            setWindowSize(getSize());
+        });
+    }
+    React.useEffect(function () {
+        window.addEventListener('resize', handleResize, false);
+        return function () { return window.removeEventListener('resize', handleResize, false); };
+    }, []);
+    return windowSize;
+};
+
 var StatusConstants = {
     NOT_DEPLOYED: {
         noSpaceLower: 'notdeployed',
@@ -28122,15 +28262,15 @@ var getInferredTypeFromValueType = function (value) {
     }
 };
 
-var _path;
-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 _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 SvgIcChevronDown = function SvgIcChevronDown(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",
     viewBox: "0 0 24 24"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#999",
     className: "ic-chevron-down_svg__fill-color",
     fillRule: "nonzero",
@@ -28180,8 +28320,8 @@ var templates = {
     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);
+var css_248z$1 = ".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$1);
 
 // 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
@@ -28190,9 +28330,9 @@ 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 }))); };
 
 var _style, _rect;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 SvgIcRotateDevtron = function SvgIcRotateDevtron(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     width: "1em",
     height: "1em",
     viewBox: "0 0 100 100",
@@ -28383,6 +28523,220 @@ function CustomInput(_a) {
                 }, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus, readOnly: readOnly, ref: ref, onKeyPress: onKeyPress, defaultValue: defaultValue, onKeyDown: onKeyDown, required: required }), getInputError(), helperText && (jsxRuntime.jsxs("div", __assign({ className: "form__text-field-info" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon form__icon--info" }), jsxRuntime.jsx("p", __assign({ className: "sentence-case" }, { children: helperText }))] })))] })));
 }
 
+exports.DraggablePositionVariant = void 0;
+(function (DraggablePositionVariant) {
+    DraggablePositionVariant["PARENT_BOTTOM_CENTER"] = "PARENT_BOTTOM_CENTER";
+    DraggablePositionVariant["SCREEN_BOTTOM_CENTER"] = "SCREEN_BOTTOM_CENTER";
+    // Can add more based on requirement
+})(exports.DraggablePositionVariant || (exports.DraggablePositionVariant = {}));
+
+/**
+ * TODO: import it as lazy, after it is supported in common
+ * 1. If using react select please use menuPlacement='auto'
+ * 2. dragSelector will be used to identify the grabbable button that will grab the div to drag
+ * 3. parentRef is the reference point from which we will derive the base top:0 ,left: 0 position
+ */
+function DraggableWrapper(_a) {
+    var children = _a.children, _b = _a.zIndex, zIndex = _b === void 0 ? MAX_Z_INDEX : _b, positionVariant = _a.positionVariant, dragSelector = _a.dragSelector, parentRef = _a.parentRef, _c = _a.boundaryGap, boundaryGap = _c === void 0 ? 16 : _c, _d = _a.childDivProps, childDivProps = _d === void 0 ? {} : _d;
+    var windowSize = useWindowSize();
+    var nodeRef = React.useRef(null);
+    var _e = __read(React.useState({
+        x: 0,
+        y: 0,
+    }), 2), position = _e[0], setPosition = _e[1];
+    var getDefaultPosition = function (positionVariant) {
+        var _a, _b, _c, _d, _e, _f;
+        // if this return x: 0, y: 0 then it will be top left corner of parentDiv
+        var parentRect = (_b = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : {
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+            bottom: 0,
+        };
+        var nodeRefHeight = (_d = (_c = nodeRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height) !== null && _d !== void 0 ? _d : 0;
+        var nodeRefWidth = (_f = (_e = nodeRef.current) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect().width) !== null && _f !== void 0 ? _f : 0;
+        switch (positionVariant) {
+            case exports.DraggablePositionVariant.PARENT_BOTTOM_CENTER: {
+                // currently at parentRect.x and need to start to the center of its width and half of node should lie on left of center and other half on right
+                var x = (parentRect.width - nodeRefWidth) / 2;
+                // currently at parentRect.y now parent height can be greater than windowSize.height so taking min
+                // subtracting parentRect.top since window height already contains that
+                var baseY = parentRect.height > windowSize.height ? windowSize.height - parentRect.top : parentRect.height;
+                var y = baseY - nodeRefHeight - boundaryGap;
+                return { x: x, y: y };
+            }
+            // Add more cases for other variants if needed
+            default: {
+                // Since need node to be in center of screen so subtracting width/2 by left of parentRect it will start the node from center but want node's midpoint at center so subtracting node's width from it.
+                var x = windowSize.width / 2 - parentRect.left - nodeRefWidth / 2;
+                // subtracting top since windowSize already contains that
+                var y = windowSize.height - parentRect.top - nodeRefHeight - boundaryGap;
+                return { x: x, y: y };
+            }
+        }
+    };
+    // On change of windowSize we will reset the position to default
+    React.useEffect(function () {
+        var defaultPosition = getDefaultPosition(positionVariant);
+        setPosition(defaultPosition);
+    }, [nodeRef, positionVariant, windowSize]);
+    // Would be called on drag and will not update the state if the new position is out of window screen
+    function handlePositionChange(e, data) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var offsetX = (_b = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) !== null && _b !== void 0 ? _b : 0;
+        var offsetY = (_d = (_c = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().top) !== null && _d !== void 0 ? _d : 0;
+        var nodeRefHeight = (_f = (_e = nodeRef.current) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect().height) !== null && _f !== void 0 ? _f : 0;
+        var nodeRefWidth = (_h = (_g = nodeRef.current) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect().width) !== null && _h !== void 0 ? _h : 0;
+        if (offsetX + data.x + nodeRefWidth + boundaryGap > windowSize.width ||
+            offsetY + data.y + nodeRefHeight + boundaryGap > windowSize.height ||
+            offsetX + data.x < 0 ||
+            offsetY + data.y < 0) {
+            return;
+        }
+        setPosition({
+            x: data.x,
+            y: data.y,
+        });
+    }
+    return (jsxRuntime.jsx("div", __assign({ className: "dc__position-fixed", style: {
+            zIndex: zIndex,
+        } }, { children: jsxRuntime.jsx(Draggable, __assign({ handle: dragSelector, nodeRef: nodeRef, position: position, onDrag: handlePositionChange }, { children: jsxRuntime.jsx("div", __assign({ ref: nodeRef }, childDivProps, { style: {
+                    zIndex: zIndex,
+                } }, { 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 SvgIcDrag = function SvgIcDrag(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M10.334 9.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM5.667 9.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM10.334 5.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM5.667 5.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM10.334 13.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM5.667 13.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
+    fill: "#596168"
+  })));
+};
+
+function DraggableButton(_a) {
+    var dragClassName = _a.dragClassName;
+    return (jsxRuntime.jsx("button", __assign({ type: "button", className: "".concat(dragClassName, " dc__outline-none-imp dc__no-border p-0 dc__transparent h-20") }, { children: jsxRuntime.jsx(SvgIcDrag, { className: "dc__grabbable icon-dim-20 fcn-6" }) })));
+}
+
+var VISIBLE_PAGES_LIMIT = 5;
+var FALLBACK_PAGE_SIZE_OPTIONS = [
+    { value: 20, selected: true },
+    { value: 40, selected: false },
+    { value: 50, selected: false },
+];
+
+/**
+ * Returns an array of pages numbers and whether they are selected, visible or not
+ */
+var createPageArr = function (_a) {
+    var size = _a.size, pageSize = _a.pageSize, selectedPageNo = _a.selectedPageNo;
+    var arr = [];
+    var numberOfPages = Math.ceil(size / pageSize);
+    // we are showing 2 numbers before and after the selected page, so computing the lower and upper bounds
+    var lowerBound = selectedPageNo - 2 < 1 ? 1 : selectedPageNo - 2;
+    var upperBound = selectedPageNo + 2 > numberOfPages ? numberOfPages : selectedPageNo + 2;
+    for (var i = 1; i <= numberOfPages; i++) {
+        arr.push({
+            value: i,
+            selected: i === selectedPageNo,
+            isVisible: upperBound - VISIBLE_PAGES_LIMIT < i && i < lowerBound + VISIBLE_PAGES_LIMIT,
+        });
+    }
+    return arr;
+};
+var getDefaultPageValueOptions = function (pageSizeOptions) {
+    return (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.length) ? pageSizeOptions : FALLBACK_PAGE_SIZE_OPTIONS;
+};
+
+var PageSizeItems = function (_a) {
+    var optionValue = _a.optionValue, options = _a.options, setOptions = _a.setOptions, handleCloseDropdown = _a.handleCloseDropdown, changePageSize = _a.changePageSize;
+    var handlePageSizeSelect = function () {
+        var newOptions = options.map(function (_option) { return ({
+            value: _option.value,
+            selected: _option.value === optionValue,
+        }); });
+        setOptions(__spreadArray([], __read(newOptions), false));
+        handleCloseDropdown();
+        changePageSize(optionValue);
+    };
+    return (jsxRuntime.jsx("div", __assign({ className: "select__item", onClick: handlePageSizeSelect }, { children: optionValue }), optionValue));
+};
+var PageSizeSelector = function (_a) {
+    var pageSizeOptions = _a.pageSizeOptions, pageSize = _a.pageSize, changePageSize = _a.changePageSize;
+    var defaultOptions = getDefaultPageValueOptions(pageSizeOptions).map(function (option) { return ({
+        value: option.value,
+        selected: option.value === pageSize,
+    }); });
+    var _b = __read(React.useState(false), 2), isDropdownOpen = _b[0], setIsDropdownOpen = _b[1];
+    var _c = __read(React.useState(defaultOptions), 2), options = _c[0], setOptions = _c[1];
+    var handleCloseDropdown = function () {
+        setIsDropdownOpen(false);
+    };
+    var handleDropdownToggle = function () {
+        setIsDropdownOpen(!isDropdownOpen);
+    };
+    var dropdownRef = React.useRef(null);
+    useClickOutside(dropdownRef, handleCloseDropdown);
+    var selectedOption = options.find(function (option) { return option.selected; });
+    var font = isDropdownOpen ? 'fa fa-caret-up' : 'fa fa-caret-down';
+    return (jsxRuntime.jsxs("div", __assign({ ref: dropdownRef }, { children: [isDropdownOpen && (jsxRuntime.jsx("div", __assign({ className: "pagination__select-menu" }, { children: options.map(function (_option) { return (jsxRuntime.jsx(PageSizeItems, { optionValue: _option.value, options: options, setOptions: setOptions, handleCloseDropdown: handleCloseDropdown, changePageSize: changePageSize })); }) }))), jsxRuntime.jsxs("button", __assign({ type: "button", className: "select__button", onClick: handleDropdownToggle }, { children: [jsxRuntime.jsx("span", { children: selectedOption ? selectedOption.value : '' }), jsxRuntime.jsx("span", __assign({ className: "select__icon" }, { children: jsxRuntime.jsx("i", { className: font }) }))] }))] })));
+};
+
+var css_248z = ".pagination-wrapper {\n  display: flex;\n  align-items: center;\n  padding: 0px 24px;\n  justify-content: space-between;\n  margin: 0px;\n  background-color: var(--white);\n}\n\n.pagination {\n  margin-top: 16px;\n  margin-bottom: 16px;\n  padding: 0px;\n}\n\n.select {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.select__placeholder {\n  font-size: 12px;\n  font-weight: normal;\n  font-style: normal;\n  font-stretch: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  color: var(--N700);\n  margin-right: 8px;\n}\n\n.pagination__select-menu {\n  padding: 0px;\n  list-style: none;\n  overflow: hidden;\n  border: solid 1px var(--N200);\n  border-radius: 4px;\n  width: 64px;\n  position: absolute;\n  bottom: 31px;\n  background-color: var(--white);\n}\n\n.select__button {\n  width: 64px;\n  background-color: transparent;\n  border-radius: 4px;\n  border: solid 1px var(--N200);\n  padding: 5px 10px;\n  text-align: left;\n}\n\n.select__item {\n  padding: 5px 10px;\n  cursor: pointer;\n}\n\n.select__icon {\n  margin-left: 18px;\n}\n\n.page {\n  margin: 0px 8px;\n  display: inline-block;\n}\n\n.page-number {\n  font-size: 12px;\n  font-weight: normal;\n  font-style: normal;\n  font-stretch: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  color: var(--N700);\n}\n\n.page__button {\n  width: 24px;\n  height: 24px;\n  border-radius: 8px;\n  color: var(--B500);\n  background-color: var(--white);\n  padding: 0px;\n  user-select: none;\n}\n\n.page__button--icon {\n  background-color: var(--white);\n  color: var(--B500);\n}\n\n/* MODIFIERS */\n.page__button--selected {\n  color: var(--white);\n  background-color: var(--B500);\n}\n\n/* States and Selectorys */\n.page__button:disabled {\n  opacity: 0.5;\n}\n\n.select__item:hover {\n  background-color: var(--N50);\n}\n\n.page__button:hover ~ :disabled {\n  background-color: var(--B100);\n}\n\n.page__button--selected:hover {\n  color: var(--white);\n  background-color: var(--B500);\n}\n\n@media (min-width: 1024px) {\n  .pagination {\n    margin: 16px auto;\n  }\n}";
+styleInject(css_248z);
+
+var PageValueItem = function (_a) {
+    var value = _a.value, isSelected = _a.isSelected, selectPage = _a.selectPage;
+    var classes = isSelected ? 'page__button page__button--selected' : 'page__button';
+    var handlePageSelection = function () {
+        selectPage(value);
+    };
+    return (jsxRuntime.jsx("li", __assign({ className: "page" }, { children: jsxRuntime.jsx("button", __assign({ className: classes, onClick: handlePageSelection, type: "button" }, { children: value })) })));
+};
+// NOTE: This component will heavily benefit from data normalization
+var Pagination = function (_a) {
+    var size = _a.size, pageSize = _a.pageSize, offset = _a.offset, changePage = _a.changePage, changePageSize = _a.changePageSize, isPageSizeFix = _a.isPageSizeFix, pageSizeOptions = _a.pageSizeOptions, rootClassName = _a.rootClassName;
+    var _b = __read(React.useState([]), 2), pages = _b[0], setPages = _b[1];
+    React.useEffect(function () {
+        var _pages = createPageArr({ size: size, pageSize: pageSize, selectedPageNo: 1 });
+        setPages(_pages);
+    }, [size, pageSize]);
+    React.useEffect(function () {
+        var selectedPageNo = 1 + Math.floor(offset / pageSize);
+        var _pages = createPageArr({ size: size, pageSize: pageSize, selectedPageNo: selectedPageNo });
+        setPages(_pages);
+    }, [offset]);
+    var selectPage = function (selectedPageNo) {
+        var _pages = createPageArr({ size: size, pageSize: pageSize, selectedPageNo: selectedPageNo });
+        setPages(_pages);
+        changePage(selectedPageNo);
+    };
+    var selectPreviousPage = function () {
+        var currPage = pages.find(function (page) { return page.selected; });
+        var selectedPageNo = currPage.value - 1;
+        selectPage(selectedPageNo);
+    };
+    var selectNextPage = function () {
+        var currPage = pages.find(function (page) { return page.selected; });
+        var selectedPageNo = currPage.value + 1;
+        selectPage(selectedPageNo);
+    };
+    var lastPageNo = offset + pageSize < size ? offset + pageSize : size;
+    var pageNoIndex = pages.findIndex(function (page) { return page.selected; });
+    var visiblePages = pages.filter(function (page) { return page.isVisible; });
+    return (
+    // TODO: Remove pagination-wrapper from dashboard
+    jsxRuntime.jsxs("div", __assign({ className: rootClassName || '' }, { children: [jsxRuntime.jsxs("div", __assign({ className: "page-number" }, { children: [offset + 1, " - ", lastPageNo, " of ", size] })), jsxRuntime.jsxs("ul", __assign({ className: "pagination" }, { children: [jsxRuntime.jsx("li", __assign({ className: "page" }, { children: jsxRuntime.jsx("button", __assign({ className: "page__button page__button--icon", disabled: !pageNoIndex, onClick: selectPreviousPage, type: "button", "aria-label": "Previous page" }, { children: jsxRuntime.jsx("span", __assign({ className: "left-icon" }, { children: jsxRuntime.jsx("i", { className: "fa fa-chevron-left" }) })) })) })), visiblePages.map(function (page) { return (jsxRuntime.jsx(PageValueItem, { value: page.value, isSelected: page.selected, selectPage: selectPage }, page.value)); }), jsxRuntime.jsx("li", __assign({ className: "page" }, { children: jsxRuntime.jsx("button", __assign({ className: "page__button page__button--icon", disabled: pageNoIndex === pages.length - 1, onClick: selectNextPage, type: "button", "aria-label": "Next page" }, { children: jsxRuntime.jsx("span", __assign({ className: "left-icon" }, { children: jsxRuntime.jsx("i", { className: "fa fa-chevron-right" }) })) })) }))] })), !isPageSizeFix && (jsxRuntime.jsxs("div", __assign({ className: "select" }, { children: [jsxRuntime.jsx("span", __assign({ className: "select__placeholder" }, { children: "Rows per page" })), jsxRuntime.jsx(PageSizeSelector, { pageSizeOptions: pageSizeOptions, pageSize: pageSize, changePageSize: changePageSize })] })))] })));
+};
+
 exports.AddCDButton = AddCDButton;
 exports.AppStatus = AppStatus;
 exports.BreadCrumb = BreadCrumb;
@@ -28407,6 +28761,8 @@ exports.DetailsProgressing = DetailsProgressing;
 exports.DevtronProgressing = DevtronProgressing;
 exports.DialogForm = DialogForm;
 exports.DialogFormSubmit = DialogFormSubmit;
+exports.DraggableButton = DraggableButton;
+exports.DraggableWrapper = DraggableWrapper;
 exports.Drawer = Drawer;
 exports.ERROR_EMPTY_SCREEN = ERROR_EMPTY_SCREEN;
 exports.EmptyState = EmptyState;
@@ -28420,6 +28776,7 @@ exports.Host = Host;
 exports.ImageTagButton = ImageTagButton;
 exports.ImageTagsContainer = ImageTagsContainer;
 exports.InfoColourBar = InfoColourBar;
+exports.MAX_Z_INDEX = MAX_Z_INDEX;
 exports.Modal = Modal;
 exports.MultiValueChipContainer = MultiValueChipContainer;
 exports.MultiValueContainer = MultiValueContainer;
@@ -28427,6 +28784,7 @@ exports.MultiValueRemove = MultiValueRemove;
 exports.OpaqueModal = OpaqueModal;
 exports.Option = Option;
 exports.PATTERNS = PATTERNS;
+exports.Pagination = Pagination;
 exports.PopupMenu = PopupMenu;
 exports.Progressing = Progressing;
 exports.PropagateTagInfo = PropagateTagInfo;
@@ -28440,6 +28798,7 @@ exports.RepositoryAction = RepositoryAction;
 exports.ResizableTagTextArea = ResizableTagTextArea;
 exports.ResizableTextarea = ResizableTextarea;
 exports.ScanVulnerabilitiesTable = ScanVulnerabilitiesTable;
+exports.SearchBar = SearchBar;
 exports.ServerError = ServerError;
 exports.ServerErrors = ServerErrors;
 exports.SingleSelectOption = SingleSelectOption;
@@ -28463,6 +28822,7 @@ 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;
@@ -28503,3 +28863,4 @@ exports.useForm = useForm;
 exports.useSearchString = useSearchString;
 exports.useSuperAdmin = useSuperAdmin;
 exports.useThrottledEffect = useThrottledEffect;
+exports.useWindowSize = useWindowSize;