@devtron-labs/devtron-fe-common-lib 0.0.62-beta-3 → 0.0.62-beta-5

package/dist/index.js

@@ -50,7 +50,8 @@ var ROUTES = {
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING: 'app/image-tagging',
     CD_MATERIAL_GET: 'app/cd-pipeline',
-    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list'
+    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list',
+    INFRA_CONFIG_PROFILE: 'infra-config/profile',
 };
 exports.KEY_VALUE = void 0;
 (function (KEY_VALUE) {
@@ -797,9 +798,9 @@ var css_248z$9 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  heig
 styleInject(css_248z$9);
 
 var _g$7;
-function _extends$t() { _extends$t = 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$t.apply(this, arguments); }
+function _extends$w() { _extends$w = 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$w.apply(this, arguments); }
 var SvgIcProgressing = function SvgIcProgressing(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "1em",
@@ -851,8 +852,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$s() {
-  _extends$s = Object.assign || function (target) {
+function _extends$v() {
+  _extends$v = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -866,7 +867,7 @@ function _extends$s() {
     return target;
   };
 
-  return _extends$s.apply(this, arguments);
+  return _extends$v.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$2(source, excluded) {
@@ -1592,7 +1593,7 @@ function ProgressBar(_ref) {
       isIn = _ref.isIn,
       theme = _ref.theme;
 
-  var style = _extends$s({}, userStyle, {
+  var style = _extends$v({}, userStyle, {
     animationDuration: delay + "ms",
     animationPlayState: isRunning ? 'running' : 'paused',
     opacity: hide ? 0 : 1
@@ -1869,9 +1870,9 @@ var ToastContainer = function ToastContainer(props) {
     ,
     id: containerId
   }, getToastToRender(function (position, toastList) {
-    var containerStyle = !toastList.length ? _extends$s({}, style, {
+    var containerStyle = !toastList.length ? _extends$v({}, style, {
       pointerEvents: 'none'
-    }) : _extends$s({}, style);
+    }) : _extends$v({}, style);
     return React.createElement("div", {
       className: getClassName(position),
       style: containerStyle,
@@ -1978,7 +1979,7 @@ function dispatchToast(content, options) {
 
 
 function mergeOptions(type, options) {
-  return _extends$s({}, options, {
+  return _extends$v({}, options, {
     type: options && options.type || type,
     toastId: getToastId(options)
   });
@@ -1995,7 +1996,7 @@ function toast(content, options) {
 }
 
 toast.loading = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$s({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$v({
     isLoading: true,
     autoClose: false,
     closeOnClick: false,
@@ -2011,7 +2012,7 @@ function handlePromise(promise, _ref2, options) {
   var id;
 
   if (pending) {
-    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$s({}, options, pending));
+    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$v({}, options, pending));
   }
 
   var resetParams = {
@@ -2030,7 +2031,7 @@ function handlePromise(promise, _ref2, options) {
       return;
     }
 
-    var baseParams = _extends$s({
+    var baseParams = _extends$v({
       type: type
     }, resetParams, options, {
       data: result
@@ -2041,10 +2042,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$s({}, baseParams, params));
+      toast.update(id, _extends$v({}, baseParams, params));
     } else {
       // using toast.promise without loading
-      toast(params.render, _extends$s({}, baseParams, params));
+      toast(params.render, _extends$v({}, baseParams, params));
     }
 
     return result;
@@ -2068,7 +2069,7 @@ toast.warning = /*#__PURE__*/createToastByType(TYPE.WARNING);
 toast.warn = toast.warning;
 
 toast.dark = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$s({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$v({
     theme: 'dark'
   }, options)));
 };
@@ -2125,7 +2126,7 @@ toast.update = function (toastId, options) {
       var oldOptions = toast.props,
           oldContent = toast.content;
 
-      var nextOptions = _extends$s({}, oldOptions, options, {
+      var nextOptions = _extends$v({}, oldOptions, options, {
         toastId: options.toastId || toastId,
         updateId: generateToastId()
       });
@@ -12066,16 +12067,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$h;
-function _extends$r() { _extends$r = 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$r.apply(this, arguments); }
+var _path$k;
+function _extends$u() { _extends$u = 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$u.apply(this, arguments); }
 var SvgIcCross = function SvgIcCross(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__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"
   })));
@@ -16374,30 +16375,30 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 
 var Tippy = index;
 
-var _path$g;
-function _extends$q() { _extends$q = 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$q.apply(this, arguments); }
+var _path$j;
+function _extends$t() { _extends$t = 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$t.apply(this, arguments); }
 var SvgIcHelp = function SvgIcHelp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__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$f;
-function _extends$p() { _extends$p = 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$p.apply(this, arguments); }
+var _path$i;
+function _extends$s() { _extends$s = 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$s.apply(this, arguments); }
 var SvgIcHelpOutline = function SvgIcHelpOutline(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 17 16",
     width: "1em",
     height: "1em"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__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"
@@ -16449,16 +16450,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$e, _circle, _path2$1;
-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 _path$h, _circle, _path2$2;
+function _extends$r() { _extends$r = 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$r.apply(this, arguments); }
 var SvgInjectTag = function SvgInjectTag(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10 10H3.333",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -16469,7 +16470,7 @@ var SvgInjectTag = function SvgInjectTag(props) {
     cy: 10,
     r: 1.667,
     fill: "#596168"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "m4.415 6.403 5.347-3.008a.486.486 0 0 1 .476 0l5.348 3.008a.486.486 0 0 1 .247.424v5.994a.485.485 0 0 1-.247.424l-5.348 3.007a.485.485 0 0 1-.476 0l-5.347-3.007",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -16486,15 +16487,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$d;
-function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+var _path$g;
+function _extends$q() { _extends$q = 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$q.apply(this, arguments); }
 var SvgIcInfoOutlined = function SvgIcInfoOutlined(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__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"
@@ -16728,15 +16729,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$c;
-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 _path$f;
+function _extends$p() { _extends$p = 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$p.apply(this, arguments); }
 var SvgIcAdd = function SvgIcAdd(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__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"
@@ -16866,8 +16867,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$l() {
-  _extends$l = Object.assign ? Object.assign.bind() : function (target) {
+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) {
@@ -16878,7 +16879,7 @@ function _extends$l() {
     }
     return target;
   };
-  return _extends$l.apply(this, arguments);
+  return _extends$o.apply(this, arguments);
 }
 
 /*
@@ -20419,7 +20420,7 @@ var Menu = function Menu(props) {
       getStyles = props.getStyles,
       innerRef = props.innerRef,
       innerProps = props.innerProps;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('menu', props),
     className: cx({
       menu: true
@@ -20451,7 +20452,7 @@ var MenuList$1 = function MenuList(props) {
       innerProps = props.innerProps,
       innerRef = props.innerRef,
       isMulti = props.isMulti;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('menuList', props),
     className: cx({
       'menu-list': true,
@@ -20482,7 +20483,7 @@ var NoOptionsMessage = function NoOptionsMessage(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('noOptionsMessage', props),
     className: cx({
       'menu-notice': true,
@@ -20499,7 +20500,7 @@ var LoadingMessage = function LoadingMessage(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('loadingMessage', props),
     className: cx({
       'menu-notice': true,
@@ -20587,7 +20588,7 @@ var MenuPortal = /*#__PURE__*/function (_Component2) {
         rect: rect
       }; // same wrapper element whether fixed or portalled
 
-      var menuWrapper = jsx("div", _extends$l({
+      var menuWrapper = jsx("div", _extends$o({
         css: getStyles('menuPortal', state),
         className: cx({
           'menu-portal': true
@@ -20623,7 +20624,7 @@ var SelectContainer = function SelectContainer(props) {
       innerProps = props.innerProps,
       isDisabled = props.isDisabled,
       isRtl = props.isRtl;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('container', props),
     className: cx({
       '--is-disabled': isDisabled,
@@ -20658,7 +20659,7 @@ var ValueContainer = function ValueContainer(props) {
       isMulti = props.isMulti,
       getStyles = props.getStyles,
       hasValue = props.hasValue;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('valueContainer', props),
     className: cx({
       'value-container': true,
@@ -20684,7 +20685,7 @@ var IndicatorsContainer = function IndicatorsContainer(props) {
       cx = props.cx,
       innerProps = props.innerProps,
       getStyles = props.getStyles;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('indicatorsContainer', props),
     className: cx({
       indicators: true
@@ -20715,7 +20716,7 @@ var Svg = function Svg(_ref) {
   var size = _ref.size,
       props = _objectWithoutProperties(_ref, _excluded$2);
 
-  return jsx("svg", _extends$l({
+  return jsx("svg", _extends$o({
     height: size,
     width: size,
     viewBox: "0 0 20 20",
@@ -20726,14 +20727,14 @@ var Svg = function Svg(_ref) {
 };
 
 var CrossIcon = function CrossIcon(props) {
-  return jsx(Svg, _extends$l({
+  return jsx(Svg, _extends$o({
     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$l({
+  return jsx(Svg, _extends$o({
     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"
@@ -20766,7 +20767,7 @@ var DropdownIndicator$1 = function DropdownIndicator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('dropdownIndicator', props),
     className: cx({
       indicator: true,
@@ -20781,7 +20782,7 @@ var ClearIndicator$1 = function ClearIndicator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('clearIndicator', props),
     className: cx({
       indicator: true,
@@ -20811,7 +20812,7 @@ var IndicatorSeparator = function IndicatorSeparator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("span", _extends$l({}, innerProps, {
+  return jsx("span", _extends$o({}, innerProps, {
     css: getStyles('indicatorSeparator', props),
     className: cx({
       'indicator-separator': true
@@ -20866,7 +20867,7 @@ var LoadingIndicator = function LoadingIndicator(props) {
       getStyles = props.getStyles,
       innerProps = props.innerProps,
       isRtl = props.isRtl;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('loadingIndicator', props),
     className: cx({
       indicator: true,
@@ -20927,7 +20928,7 @@ var Control = function Control(props) {
       innerRef = props.innerRef,
       innerProps = props.innerProps,
       menuIsOpen = props.menuIsOpen;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     ref: innerRef,
     css: getStyles('control', props),
     className: cx({
@@ -20959,12 +20960,12 @@ var Group = function Group(props) {
       label = props.label,
       theme = props.theme,
       selectProps = props.selectProps;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('group', props),
     className: cx({
       group: true
     }, className)
-  }, innerProps), jsx(Heading, _extends$l({}, headingProps, {
+  }, innerProps), jsx(Heading, _extends$o({}, headingProps, {
     selectProps: selectProps,
     theme: theme,
     getStyles: getStyles,
@@ -20996,7 +20997,7 @@ var GroupHeading = function GroupHeading(props) {
       _cleanCommonProps.data;
       var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1$1);
 
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('groupHeading', props),
     className: cx({
       'group-heading': true
@@ -21072,7 +21073,7 @@ var Input = function Input(props) {
     }, className),
     css: getStyles('input', props),
     "data-value": value || ''
-  }, jsx("input", _extends$l({
+  }, jsx("input", _extends$o({
     className: cx({
       input: true
     }, inputClassName),
@@ -21142,7 +21143,7 @@ var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove$1(_ref5) {
   var children = _ref5.children,
       innerProps = _ref5.innerProps;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     role: "button"
   }, innerProps), children || jsx(CrossIcon, {
     size: 14
@@ -21231,7 +21232,7 @@ var Option$1 = function Option(props) {
       isSelected = props.isSelected,
       innerRef = props.innerRef,
       innerProps = props.innerProps;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('option', props),
     className: cx({
       option: true,
@@ -21263,7 +21264,7 @@ var Placeholder = function Placeholder(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('placeholder', props),
     className: cx({
       placeholder: true
@@ -21296,7 +21297,7 @@ var SingleValue = function SingleValue(props) {
       getStyles = props.getStyles,
       isDisabled = props.isDisabled,
       innerProps = props.innerProps;
-  return jsx("div", _extends$l({
+  return jsx("div", _extends$o({
     css: getStyles('singleValue', props),
     className: cx({
       'single-value': true,
@@ -21544,7 +21545,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 
 var A11yText = function A11yText(props) {
-  return jsx("span", _extends$l({
+  return jsx("span", _extends$o({
     css: _ref
   }, props));
 };
@@ -22080,7 +22081,7 @@ function DummyInput(_ref) {
   var innerRef = _ref.innerRef,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return jsx("input", _extends$l({
+  return jsx("input", _extends$o({
     ref: innerRef
   }, props, {
     css: /*#__PURE__*/css$2({
@@ -23715,7 +23716,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$l({
+        return /*#__PURE__*/React__namespace.createElement(DummyInput, _extends$o({
           id: id,
           innerRef: this.getInputRef,
           onBlur: this.onInputBlur,
@@ -23729,7 +23730,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         }, ariaAttributes));
       }
 
-      return /*#__PURE__*/React__namespace.createElement(Input, _extends$l({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(Input, _extends$o({}, commonProps, {
         autoCapitalize: "none",
         autoComplete: "off",
         autoCorrect: "off",
@@ -23773,7 +23774,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           isFocused = _this$state5.isFocused;
 
       if (!this.hasValue() || !controlShouldRenderValue) {
-        return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends$l({}, commonProps, {
+        return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends$o({}, commonProps, {
           key: "placeholder",
           isDisabled: isDisabled,
           isFocused: isFocused,
@@ -23787,7 +23788,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$l({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(MultiValue, _extends$o({}, commonProps, {
             components: {
               Container: MultiValueContainer,
               Label: MultiValueLabel,
@@ -23819,7 +23820,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       }
 
       var singleValue = selectValue[0];
-      return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends$l({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends$o({}, commonProps, {
         data: singleValue,
         isDisabled: isDisabled
       }), this.formatOptionLabel(singleValue, 'value'));
@@ -23845,7 +23846,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends$l({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends$o({}, commonProps, {
         innerProps: innerProps,
         isFocused: isFocused
       }));
@@ -23865,7 +23866,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       var innerProps = {
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends$l({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends$o({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -23883,7 +23884,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$l({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(IndicatorSeparator, _extends$o({}, commonProps, {
         isDisabled: isDisabled,
         isFocused: isFocused
       }));
@@ -23903,7 +23904,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends$l({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends$o({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -23966,7 +23967,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           onMouseOver: onHover,
           tabIndex: -1
         };
-        return /*#__PURE__*/React__namespace.createElement(Option, _extends$l({}, commonProps, {
+        return /*#__PURE__*/React__namespace.createElement(Option, _extends$o({}, commonProps, {
           innerProps: innerProps,
           data: data,
           isDisabled: isDisabled,
@@ -23990,7 +23991,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$l({}, commonProps, {
+            return /*#__PURE__*/React__namespace.createElement(Group, _extends$o({}, commonProps, {
               key: groupId,
               data: _data,
               options: options,
@@ -24029,12 +24030,12 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
-      var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends$l({}, commonProps, menuPlacementProps), function (_ref4) {
+      var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends$o({}, 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$l({}, commonProps, menuPlacementProps, {
+        return /*#__PURE__*/React__namespace.createElement(Menu, _extends$o({}, commonProps, menuPlacementProps, {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
@@ -24049,7 +24050,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          return /*#__PURE__*/React__namespace.createElement(MenuList, _extends$l({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(MenuList, _extends$o({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
 
@@ -24064,7 +24065,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$l({}, commonProps, {
+      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React__namespace.createElement(MenuPortal, _extends$o({}, commonProps, {
         appendTo: menuPortalTarget,
         controlElement: this.controlRef,
         menuPlacement: menuPlacement,
@@ -24129,7 +24130,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$l({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(LiveRegion, _extends$o({}, commonProps, {
         id: this.getElementId('live-region'),
         ariaSelection: ariaSelection,
         focusedOption: focusedOption,
@@ -24155,7 +24156,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$l({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(SelectContainer, _extends$o({}, commonProps, {
         className: className,
         innerProps: {
           id: id,
@@ -24163,7 +24164,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         },
         isDisabled: isDisabled,
         isFocused: isFocused
-      }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends$l({}, commonProps, {
+      }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends$o({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,
@@ -24172,9 +24173,9 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         isFocused: isFocused,
         menuIsOpen: menuIsOpen
-      }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends$l({}, commonProps, {
+      }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends$o({}, commonProps, {
         isDisabled: isDisabled
-      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends$l({}, commonProps, {
+      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends$o({}, commonProps, {
         isDisabled: isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
@@ -24247,7 +24248,7 @@ Select$1.defaultProps = defaultProps;
 
 var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var baseSelectProps = useStateManager(props);
-  return /*#__PURE__*/React__namespace.createElement(Select$1, _extends$l({
+  return /*#__PURE__*/React__namespace.createElement(Select$1, _extends$o({
     ref: ref
   }, baseSelectProps));
 });
@@ -24255,9 +24256,9 @@ var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var ReactSelect = StateManagedSelect;
 
 var _g$6;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 var SvgIcAppstatusCancelled = function SvgIcAppstatusCancelled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 28 28",
     width: "1em",
@@ -24278,15 +24279,15 @@ var SvgIcAppstatusCancelled = function SvgIcAppstatusCancelled(props) {
   }))));
 };
 
-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$e;
+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 SvgIcCheck = function SvgIcCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     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$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "#06C",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -24298,9 +24299,9 @@ var SvgIcCheck = function SvgIcCheck(props) {
 };
 
 var _g$5;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+function _extends$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 SvgIcErrorMedium = function SvgIcErrorMedium(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -24629,6 +24630,7 @@ Valid States of Checkbox:
 5. disabled: false, checked: true,  value: INTERMIDIATE
 6. disabled: false, checked: true,  value: CHECKED
 */
+// TODO: Associate label with input element
 var Checkbox$1 = /** @class */ (function (_super) {
     __extends$1(Checkbox, _super);
     function Checkbox() {
@@ -24643,9 +24645,9 @@ var Checkbox$1 = /** @class */ (function (_super) {
 }(React.Component));
 
 var _g$4;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+function _extends$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 SvgIcSearch = function SvgIcSearch(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "1em",
@@ -24662,9 +24664,9 @@ var SvgIcSearch = function SvgIcSearch(props) {
 };
 
 var _g$3;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+function _extends$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 SvgIcErrorCross = function SvgIcErrorCross(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -24686,7 +24688,7 @@ var SvgIcErrorCross = function SvgIcErrorCross(props) {
   }))));
 };
 
-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}";
+var css_248z$5 = ".search-bar:focus, .search-bar:focus-within {\n  outline: none;\n  border: solid 1px var(--B500) !important;\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);
 
 /**
@@ -24768,16 +24770,16 @@ var SearchBar = function (_a) {
     return (jsxRuntime.jsx("div", __assign({ className: containerClassName }, { children: jsxRuntime.jsxs("div", __assign({ className: "search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 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-16" }), jsxRuntime.jsx("input", __assign({ placeholder: "Search", "data-testid": "search-bar", type: "text" }, inputProps, { defaultValue: initialSearchText, className: "search-bar__input bc-n50 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-16 icon-n4 dc__vertical-align-middle" }) })))] })) })));
 };
 
-var _path$a;
-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$d;
+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 SvgIcArrowUpDown = function SvgIcArrowUpDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 12 12",
     fill: "none"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M4.125 8.5 6 10.75 7.875 8.5m-3.75-5L6 1.25 7.875 3.5",
     stroke: "#3B444C",
     strokeWidth: 1.5,
@@ -24786,16 +24788,16 @@ var SvgIcArrowUpDown = function SvgIcArrowUpDown(props) {
   })));
 };
 
-var _path$9;
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+var _path$c;
+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 SvgIcSortArrowDown = function SvgIcSortArrowDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     width: "1em",
     height: "1em",
     viewBox: "0 0 12 12",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M3.5 7.5 6 10m0 0 2.5-2.5M6 10V2",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -24959,9 +24961,9 @@ exports.ConsequenceAction = void 0;
 })(exports.ConsequenceAction || (exports.ConsequenceAction = {}));
 
 var _g$2;
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+function _extends$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 SvgIcInfoFilled = function SvgIcInfoFilled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -25040,16 +25042,16 @@ function DeleteComponent(_a) {
     return (jsxRuntime.jsxs("div", { children: [!showCannotDeleteDialogModal && renderDeleteDialog(), showCannotDeleteDialogModal && renderCannotDeleteDialogModal()] }));
 }
 
-var _path$8;
-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$b;
+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 SvgIcPencil = function SvgIcPencil(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__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,
@@ -25058,19 +25060,19 @@ var SvgIcPencil = function SvgIcPencil(props) {
   })));
 };
 
-var _path$7, _path2, _path3;
-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 _path$a, _path2$1, _path3;
+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 SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     width: "1em",
     height: "1em",
     viewBox: "0 0 12 12",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M3.742 4.674h-2.25v-2.25",
     fill: "#767D84"
-  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M3.742 4.674h-2.25v-2.25",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -25085,15 +25087,15 @@ var SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
   })));
 };
 
-var _path$6;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+var _path$9;
+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 SvgIcMinus = function SvgIcMinus(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 14 14"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#959BA1",
     className: "ic-minus_svg__fill-color",
     fillRule: "evenodd",
@@ -25102,9 +25104,9 @@ var SvgIcMinus = function SvgIcMinus(props) {
 };
 
 var _g$1;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+function _extends$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 SvgIcWarning = function SvgIcWarning(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -25124,9 +25126,9 @@ var SvgIcWarning = function SvgIcWarning(props) {
 };
 
 var _g;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+function _extends$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 SvgIcErrorExclamation = function SvgIcErrorExclamation(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -25143,16 +25145,16 @@ var SvgIcErrorExclamation = function SvgIcErrorExclamation(props) {
   }))));
 };
 
-var _path$5;
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+var _path$8;
+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 SvgIcEnter = function SvgIcEnter(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__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"
   })));
@@ -25558,15 +25560,15 @@ function Grid(_a) {
     return (jsxRuntime.jsx("div", __assign({ className: "flex-wrap flexbox ".concat(container ? containerClass : ''), style: containerStyles }, containerDivProps, { children: children })));
 }
 
-var _path$4;
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+var _path$7;
+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 SvgIcCopy = function SvgIcCopy(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__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"
@@ -28461,9 +28463,9 @@ var translateString = function (stringToTranslate, params) {
             return utils.englishStringTranslator(stringToTranslate, params);
     }
 };
-var getCommonSelectStyle = function (styleOverrides) {
+var getCommonSelectStyle$1 = function (styleOverrides) {
     if (styleOverrides === void 0) { styleOverrides = {}; }
-    return __assign({ menuList: function (base) { return (__assign(__assign({}, base), { paddingTop: 0, paddingBottom: 0 })); }, control: function (base, state) { return (__assign(__assign({}, base), { minHeight: '32px', boxShadow: 'none', backgroundColor: 'var(--N50)', border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)', cursor: 'pointer' })); }, option: function (base, state) { return (__assign(__assign({}, base), { color: 'var(--N900)', backgroundColor: state.isFocused ? 'var(--N100)' : 'white', padding: '10px 12px' })); }, dropdownIndicator: function (base, state) { return (__assign(__assign({}, base), { color: 'var(--N400)', padding: '0 8px', transition: 'all .2s ease', transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)' })); }, valueContainer: function (base, state) { return (__assign(__assign({}, base), { padding: '0 8px', fontWeight: '400', color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color })); }, loadingMessage: function (base) { return (__assign(__assign({}, base), { color: 'var(--N600)' })); }, noOptionsMessage: function (base) { return (__assign(__assign({}, base), { color: 'var(--N600)' })); }, multiValue: function (base, state) {
+    return __assign({ menuList: function (base) { return (__assign(__assign({}, base), { paddingTop: 0, paddingBottom: 0, cursor: 'pointer' })); }, control: function (base, state) { return (__assign(__assign({}, base), { minHeight: '32px', boxShadow: 'none', backgroundColor: 'var(--N50)', border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)', cursor: 'pointer' })); }, option: function (base, state) { return (__assign(__assign({}, base), { color: 'var(--N900)', backgroundColor: state.isFocused ? 'var(--N100)' : 'white', padding: '10px 12px', cursor: 'pointer' })); }, dropdownIndicator: function (base, state) { return (__assign(__assign({}, base), { color: 'var(--N400)', padding: '0 8px', transition: 'all .2s ease', transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)' })); }, valueContainer: function (base, state) { return (__assign(__assign({}, base), { padding: '0 8px', fontWeight: '400', color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color })); }, loadingMessage: function (base) { return (__assign(__assign({}, base), { color: 'var(--N600)' })); }, noOptionsMessage: function (base) { return (__assign(__assign({}, base), { color: 'var(--N600)' })); }, multiValue: function (base, state) {
             return __assign(__assign({}, base), { border: "1px solid var(--N200)", borderRadius: "4px", background: 'white', height: '28px', marginRight: '8px', padding: '2px', fontSize: '12px' });
         } }, styleOverrides);
 };
@@ -28513,15 +28515,15 @@ var getInferredTypeFromValueType = function (value) {
     }
 };
 
-var _path$3;
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+var _path$6;
+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 SvgIcChevronDown = function SvgIcChevronDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#999",
     className: "ic-chevron-down_svg__fill-color",
     fillRule: "nonzero",
@@ -28529,7 +28531,7 @@ var SvgIcChevronDown = function SvgIcChevronDown(props) {
   })));
 };
 
-var commonStyles = getCommonSelectStyle();
+var commonStyles = getCommonSelectStyle$1();
 var MenuList = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     return (jsxRuntime.jsx(components.MenuList, __assign({}, props, { children: Array.isArray(children) ? children.slice(0, 20) : children })));
@@ -28581,9 +28583,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$2;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+function _extends$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 SvgIcRotateDevtron = function SvgIcRotateDevtron(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     width: "1em",
     height: "1em",
     viewBox: "0 0 100 100",
@@ -28718,8 +28720,9 @@ var handleAddCD = function (_a) {
     handleCDSelect(workflowId, ciPipelineId, pipelineType, startNode.id, isWebhookCD, endNodeId, addPipelineType);
 };
 
+// TODO: label association with input
 function CustomInput(_a) {
-    var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange, _b = _a.onFocus, onFocus = _b === void 0 ? function (e) { } : _b, label = _a.label, _c = _a.type, type = _c === void 0 ? 'text' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.labelClassName, labelClassName = _e === void 0 ? '' : _e, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.tabIndex, tabIndex = _g === void 0 ? 1 : _g, _h = _a.dataTestid, dataTestid = _h === void 0 ? '' : _h, _j = _a.isRequiredField, isRequiredField = _j === void 0 ? false : _j, _k = _a.autoFocus, autoFocus = _k === void 0 ? false : _k, _l = _a.rootClassName, rootClassName = _l === void 0 ? '' : _l, _m = _a.autoComplete, autoComplete = _m === void 0 ? 'off' : _m, _o = _a.helperText, helperText = _o === void 0 ? '' : _o, handleOnBlur = _a.handleOnBlur, _p = _a.readOnly, readOnly = _p === void 0 ? false : _p, _q = _a.noTrim, noTrim = _q === void 0 ? false : _q, ref = _a.ref, onKeyPress = _a.onKeyPress, defaultValue = _a.defaultValue, onKeyDown = _a.onKeyDown, required = _a.required, additionalErrorInfo = _a.additionalErrorInfo, _r = _a.inputWrapClassName, inputWrapClassName = _r === void 0 ? '' : _r, _s = _a.inputProps, inputProps = _s === void 0 ? {} : _s;
+    var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange, _b = _a.onFocus, onFocus = _b === void 0 ? function (e) { } : _b, label = _a.label, _c = _a.type, type = _c === void 0 ? 'text' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.labelClassName, labelClassName = _e === void 0 ? '' : _e, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.tabIndex, tabIndex = _g === void 0 ? 0 : _g, _h = _a.dataTestid, dataTestid = _h === void 0 ? '' : _h, _j = _a.isRequiredField, isRequiredField = _j === void 0 ? false : _j, _k = _a.autoFocus, autoFocus = _k === void 0 ? false : _k, _l = _a.rootClassName, rootClassName = _l === void 0 ? '' : _l, _m = _a.autoComplete, autoComplete = _m === void 0 ? 'off' : _m, _o = _a.helperText, helperText = _o === void 0 ? '' : _o, handleOnBlur = _a.handleOnBlur, _p = _a.readOnly, readOnly = _p === void 0 ? false : _p, _q = _a.noTrim, noTrim = _q === void 0 ? false : _q, ref = _a.ref, onKeyPress = _a.onKeyPress, defaultValue = _a.defaultValue, onKeyDown = _a.onKeyDown, required = _a.required, additionalErrorInfo = _a.additionalErrorInfo, _r = _a.inputWrapClassName, inputWrapClassName = _r === void 0 ? '' : _r, _s = _a.inputProps, inputProps = _s === void 0 ? {} : _s;
     function handleError(error) {
         if (!Array.isArray(error)) {
             return [error];
@@ -28850,23 +28853,26 @@ function DraggableWrapper(_a) {
             y: data.y,
         });
     }
-    return (jsxRuntime.jsx("div", __assign({ className: "dc__position-fixed", style: {
+    return (
+    // Since we are using position fixed so we need to disable click on the div so that it does not interfere with the click of other elements
+    jsxRuntime.jsx("div", __assign({ className: "dc__position-fixed dc__disable-click", 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,
+                    pointerEvents: 'auto',
                 } }, { children: children })) })) })));
 }
 
-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 _path$5;
+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 SvgIcDrag = function SvgIcDrag(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     width: "1em",
     height: "1em",
     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$5 || (_path$5 = /*#__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"
   })));
@@ -28988,23 +28994,438 @@ var Pagination = function (_a) {
     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 })] })))] })));
 };
 
+var _path$4, _path2;
+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 SvgIcCpu = function SvgIcCpu(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M12.5 5.625h-5m5 2.5h-5m8.125-5v13.75c0 .345-.28.625-.625.625H5a.625.625 0 0 1-.625-.625V3.125c0-.345.28-.625.625-.625h10c.345 0 .625.28.625.625Z",
+    stroke: "#596168",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M10 15a.937.937 0 1 0 0-1.875A.937.937 0 0 0 10 15Z",
+    fill: "#596168"
+  })));
+};
+
+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 SvgIcMemory = function SvgIcMemory(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M16.25 8.125h1.875m-1.875 3.75h1.875m-16.25-3.75H3.75m-1.875 3.75H3.75m8.125 4.375v1.875m-3.75-1.875v1.875m3.75-16.25V3.75m-3.75-1.875V3.75m-.313 4.063h4.375v4.375H7.814V7.811ZM4.376 3.75h11.25c.345 0 .625.28.625.625v11.25c0 .345-.28.625-.625.625H4.375a.625.625 0 0 1-.625-.625V4.375c0-.345.28-.625.625-.625Z",
+    stroke: "#596168",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+};
+
+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 SvgIcTimer = function SvgIcTimer(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m10 11.041 3.094-3.093M8.125 1.666h3.75m5 9.376a6.875 6.875 0 1 1-13.75 0 6.875 6.875 0 0 1 13.75 0Z",
+    stroke: "#596168",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+};
+
+var _a$2;
 /**
- * User Status received from the API
+ * Unique actions that will be dispatched and,
+ * Keeping some values (cpu_limit, etc) in sync with backend
  */
-exports.UserStatusDto = void 0;
-(function (UserStatusDto) {
-    UserStatusDto["active"] = "active";
-    UserStatusDto["inactive"] = "inactive";
-})(exports.UserStatusDto || (exports.UserStatusDto = {}));
+exports.BuildInfraConfigTypes = void 0;
+(function (BuildInfraConfigTypes) {
+    BuildInfraConfigTypes["CPU_LIMIT"] = "cpu_limit";
+    BuildInfraConfigTypes["CPU_REQUEST"] = "cpu_request";
+    BuildInfraConfigTypes["MEMORY_LIMIT"] = "memory_limit";
+    BuildInfraConfigTypes["MEMORY_REQUEST"] = "memory_request";
+    BuildInfraConfigTypes["BUILD_TIMEOUT"] = "timeout";
+})(exports.BuildInfraConfigTypes || (exports.BuildInfraConfigTypes = {}));
 /**
- * User status for the frontend
+ * Combination of BuildInfraConfigTypes and BuildInfraMetaConfigTypes is going to derive error state and actions(actions will also be derived with BuildInfraInheritActions)
  */
-exports.UserStatus = void 0;
-(function (UserStatus) {
-    UserStatus["active"] = "active";
-    UserStatus["inactive"] = "inactive";
-    UserStatus["temporary"] = "temporaryAccess";
-})(exports.UserStatus || (exports.UserStatus = {}));
+exports.BuildInfraMetaConfigTypes = void 0;
+(function (BuildInfraMetaConfigTypes) {
+    BuildInfraMetaConfigTypes["NAME"] = "name";
+    BuildInfraMetaConfigTypes["DESCRIPTION"] = "description";
+})(exports.BuildInfraMetaConfigTypes || (exports.BuildInfraMetaConfigTypes = {}));
+/**
+ * Would be used as key for few components and would be appending activate and de_activate actions to it
+ */
+exports.BuildInfraLocators = void 0;
+(function (BuildInfraLocators) {
+    BuildInfraLocators["CPU"] = "cpu";
+    BuildInfraLocators["MEMORY"] = "memory";
+    // This name can be also different from BuildInfraConfigTypes[BUILD_TIMEOUT] in case we want to show different label
+    BuildInfraLocators["BUILD_TIMEOUT"] = "timeout";
+})(exports.BuildInfraLocators || (exports.BuildInfraLocators = {}));
+// FIXME: Derive this from BuildInfraLocators
+// Appending the locators from above
+exports.BuildInfraInheritActions = void 0;
+(function (BuildInfraInheritActions) {
+    BuildInfraInheritActions["ACTIVATE_CPU"] = "activate_cpu";
+    BuildInfraInheritActions["DE_ACTIVATE_CPU"] = "de_activate_cpu";
+    BuildInfraInheritActions["ACTIVATE_MEMORY"] = "activate_memory";
+    BuildInfraInheritActions["DE_ACTIVATE_MEMORY"] = "de_activate_memory";
+    BuildInfraInheritActions["ACTIVATE_BUILD_TIMEOUT"] = "activate_timeout";
+    BuildInfraInheritActions["DE_ACTIVATE_BUILD_TIMEOUT"] = "de_activate_timeout";
+})(exports.BuildInfraInheritActions || (exports.BuildInfraInheritActions = {}));
+var BuildInfraConfigActionMap = (_a$2 = {},
+    _a$2[exports.BuildInfraConfigTypes.BUILD_TIMEOUT] = exports.BuildInfraLocators.BUILD_TIMEOUT,
+    _a$2[exports.BuildInfraConfigTypes.CPU_LIMIT] = exports.BuildInfraLocators.CPU,
+    _a$2[exports.BuildInfraConfigTypes.CPU_REQUEST] = exports.BuildInfraLocators.CPU,
+    _a$2[exports.BuildInfraConfigTypes.MEMORY_LIMIT] = exports.BuildInfraLocators.MEMORY,
+    _a$2[exports.BuildInfraConfigTypes.MEMORY_REQUEST] = exports.BuildInfraLocators.MEMORY,
+    _a$2);
+exports.BuildInfraProfileVariants = void 0;
+(function (BuildInfraProfileVariants) {
+    BuildInfraProfileVariants["DEFAULT"] = "DEFAULT";
+    BuildInfraProfileVariants["NORMAL"] = "NORMAL";
+    BuildInfraProfileVariants["CUSTOM"] = "CUSTOM";
+})(exports.BuildInfraProfileVariants || (exports.BuildInfraProfileVariants = {}));
+
+var _a$1;
+var BUILD_INFRA_INPUT_CONSTRAINTS = {
+    // Will not enforce any decimal specification on input field
+    STEP: 'any',
+    MIN: 0,
+    DECIMAL_PLACES: 2,
+};
+var BUILD_INFRA_TEXT = {
+    HEADING: 'Build Infra Configuration',
+    EDIT_SUBMIT: 'Save changes',
+    SAVE_SUBMIT: 'Save',
+    EDIT_CANCEL: 'Cancel',
+    EDIT_DEFAULT_TOOLTIP: 'Efficiently control infrastructure settings such as CPU, Memory, and Build timeout for your build pipelines. Streamline resource management to optimise build time and cost effortlessly.',
+    DESCRIPTION_LABEL: 'Description',
+    DESCRIPTION_PLACEHOLDER: 'Enter a description here',
+    PROFILE_LABEL: 'Profile name',
+    PROFILE_PLACEHOLDER: 'Enter a name eg. java/node/small/medium/large',
+    INHERITING_HEADING_DESCRIPTION: 'Inheriting from default',
+    SUBMIT_BUTTON_TIPPY: {
+        INVALID_INPUT: 'Valid input is required for all mandatory fields.',
+        REQUEST_IN_PROGRESS: 'Request in progress.',
+    },
+    VALIDATE_REQUEST_LIMIT: {
+        REQUEST_LESS_THAN_LIMIT: 'Request should be less than or equal to limit.',
+        CAN_NOT_COMPUTE: 'Request and limit value diff are too high to validate.',
+        REQUEST_DECIMAL_PLACES: "Request should be upto ".concat(BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES, " decimal places."),
+        LIMIT_DECIMAL_PLACES: "Limit should be upto ".concat(BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES, " decimal places."),
+    },
+    getInvalidActionMessage: function (action) { return "Invalid action type: ".concat(action); },
+    getSubmitSuccessMessage: function (profileName, isEdited) {
+        return "".concat(profileName, " profile is ").concat(isEdited ? 'updated' : 'created');
+    },
+    PROFILE_NOT_FOUND: {
+        title: 'Profile not found',
+        subTitle: 'The profile you are looking for does not exist.',
+    },
+    INVALID_FORM_MESSAGE: 'Valid input is required for all mandatory fields.',
+};
+var BUILD_INFRA_BREADCRUMB = {
+    alias: {
+        'global-config': null,
+        'build-infra': {
+            component: jsxRuntime.jsx("h2", __assign({ className: "m-0 cn-9 fs-16 fw-6 lh-32" }, { children: BUILD_INFRA_TEXT.HEADING })),
+            linked: false,
+        },
+    },
+};
+// TODO: move heading to component itself
+var BUILD_INFRA_FORM_FIELDS = [
+    {
+        heading: jsxRuntime.jsx("h3", __assign({ className: "m-0 cn-9 fs-13 fw-6 lh-20 w-240 dc__no-shrink" }, { children: "CPU (Request - Limit)" })),
+        marker: SvgIcCpu,
+        actions: [
+            {
+                actionType: exports.BuildInfraConfigTypes.CPU_REQUEST,
+                label: 'Request',
+                placeholder: 'Type CPU request',
+            },
+            {
+                actionType: exports.BuildInfraConfigTypes.CPU_LIMIT,
+                label: 'Limit',
+                placeholder: 'Type CPU limit',
+            },
+        ],
+        locator: exports.BuildInfraLocators.CPU,
+    },
+    {
+        heading: jsxRuntime.jsx("h3", __assign({ className: "m-0 cn-9 fs-13 fw-6 lh-20 w-240 dc__no-shrink" }, { children: "Memory (Request - Limit)" })),
+        marker: SvgIcMemory,
+        actions: [
+            {
+                actionType: exports.BuildInfraConfigTypes.MEMORY_REQUEST,
+                label: 'Request',
+                placeholder: 'Type memory request',
+            },
+            {
+                actionType: exports.BuildInfraConfigTypes.MEMORY_LIMIT,
+                label: 'Limit',
+                placeholder: 'Type memory limit',
+            },
+        ],
+        locator: exports.BuildInfraLocators.MEMORY,
+    },
+    {
+        heading: jsxRuntime.jsx("h3", __assign({ className: "m-0 cn-9 fs-13 fw-6 lh-20 w-240 dc__no-shrink" }, { children: "Build timeout" })),
+        marker: SvgIcTimer,
+        actions: [
+            {
+                actionType: exports.BuildInfraConfigTypes.BUILD_TIMEOUT,
+                label: 'Timeout',
+                placeholder: 'Type build timeout',
+            },
+        ],
+        locator: exports.BuildInfraLocators.BUILD_TIMEOUT,
+    },
+];
+var PROFILE_INPUT_ERROR_FIELDS = Object.fromEntries(Object.values(__assign(__assign({}, exports.BuildInfraConfigTypes), exports.BuildInfraMetaConfigTypes)).map(function (value) { return [value, null]; }));
+// fields required to be filled before submitting the form in create view, since we pre-populate the form with default values so no need in configs
+var CREATE_MODE_REQUIRED_INPUT_FIELDS = [exports.BuildInfraMetaConfigTypes.NAME];
+var DEFAULT_PROFILE_NAME = 'default';
+var CREATE_PROFILE_BASE_VALUE = {
+    name: '',
+    description: '',
+    type: exports.BuildInfraProfileVariants.NORMAL,
+    appCount: 0,
+};
+var CREATE_VIEW_CHECKED_CONFIGS = (_a$1 = {},
+    _a$1[exports.BuildInfraConfigTypes.CPU_REQUEST] = true,
+    _a$1[exports.BuildInfraConfigTypes.CPU_LIMIT] = true,
+    _a$1);
+var BUILD_INFRA_TEST_IDS = {
+    SUBMIT_BUTTON: 'build-infra-submit-button',
+    CANCEL_BUTTON: 'build-infra-cancel-button',
+};
+
+var Descriptor = function (_a) {
+    var additionalContainerClasses = _a.additionalContainerClasses, breadCrumbs = _a.breadCrumbs, children = _a.children, tippyInfoText = _a.tippyInfoText, tippyAdditionalContent = _a.tippyAdditionalContent;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox dc__content-space dc__align-items-center w-100 ".concat(additionalContainerClasses !== null && additionalContainerClasses !== void 0 ? additionalContainerClasses : '') }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flexbox dc__align-items-center dc__gap-4" }, { children: [jsxRuntime.jsx(BreadCrumb, { breadcrumbs: breadCrumbs }), jsxRuntime.jsx(TippyCustomized, __assign({ theme: exports.TippyTheme.white, className: "w-300 h-100 dc__align-left", placement: "right", Icon: SvgIcHelp, iconClass: "fcv-5", infoText: tippyInfoText !== null && tippyInfoText !== void 0 ? tippyInfoText : BUILD_INFRA_TEXT.EDIT_DEFAULT_TOOLTIP, additionalContent: tippyAdditionalContent, heading: BUILD_INFRA_TEXT.HEADING, showCloseButton: true, trigger: "click", interactive: true }, { children: jsxRuntime.jsx("button", __assign({ className: "p-0 h-20 dc__no-background dc__no-border dc__tab-focus", type: "button", "aria-label": "build-infra-info" }, { children: jsxRuntime.jsx(SvgIcHelpOutline, { className: "icon-dim-20" }) })) }))] })), children] })));
+};
+
+var Footer = function (_a) {
+    var disabled = _a.disabled, handleCancel = _a.handleCancel, editProfile = _a.editProfile, loading = _a.loading;
+    var disableMessage = disabled
+        ? BUILD_INFRA_TEXT.SUBMIT_BUTTON_TIPPY.INVALID_INPUT
+        : BUILD_INFRA_TEXT.SUBMIT_BUTTON_TIPPY.REQUEST_IN_PROGRESS;
+    var getButtonText = function () {
+        if (editProfile) {
+            return BUILD_INFRA_TEXT.EDIT_SUBMIT;
+        }
+        return BUILD_INFRA_TEXT.SAVE_SUBMIT;
+    };
+    var renderTippy = function (children) { return (jsxRuntime.jsx(Tippy, __assign({ content: disableMessage, placement: "top", className: "default-tt", arrow: false }, { children: children }))); };
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex pl pr pb pt h-64 dc__gap-12 dc__border-top dc__content-start" }, { children: [jsxRuntime.jsx(ConditionalWrap, __assign({ condition: disabled || loading, wrap: renderTippy }, { children: jsxRuntime.jsx("div", __assign({ className: "flexbox dc__align-items-center" }, { children: jsxRuntime.jsx("button", __assign({ type: "submit", className: "cta submit h-32 flex", disabled: disabled || loading, "data-testid": BUILD_INFRA_TEST_IDS.SUBMIT_BUTTON }, { children: loading ? jsxRuntime.jsx(Progressing, { size: 16 }) : getButtonText() })) })) })), handleCancel && (jsxRuntime.jsx("button", __assign({ type: "button", className: "cta cancel h-32 flex", disabled: loading, "data-testid": BUILD_INFRA_TEST_IDS.CANCEL_BUTTON, onClick: handleCancel }, { children: BUILD_INFRA_TEXT.EDIT_CANCEL })))] })));
+};
+
+var getBaseProfileObject = function (fromCreateView, profile) {
+    if (fromCreateView) {
+        return CREATE_PROFILE_BASE_VALUE;
+    }
+    return {
+        id: profile.id,
+        name: profile.name,
+        description: profile.description,
+        type: profile.type,
+        appCount: profile.appCount,
+    };
+};
+// Would receive a single profile and return transformed response
+var getTransformedBuildInfraProfileResponse = function (_a) {
+    var _b, _c, _d;
+    var configurationUnits = _a.configurationUnits, defaultConfigurations = _a.defaultConfigurations, profile = _a.profile, fromCreateView = _a.fromCreateView;
+    // Assuming would contain all the keys
+    var defaultConfigurationsMap = (_b = defaultConfigurations === null || defaultConfigurations === void 0 ? void 0 : defaultConfigurations.reduce(function (acc, configuration) {
+        acc[configuration.key] = configuration;
+        return acc;
+    }, {})) !== null && _b !== void 0 ? _b : {};
+    var profileConfigurations = (_d = (_c = profile === null || profile === void 0 ? void 0 : profile.configurations) === null || _c === void 0 ? void 0 : _c.reduce(function (acc, configuration) {
+        acc[configuration.key] = configuration;
+        return acc;
+    }, {})) !== null && _d !== void 0 ? _d : {};
+    var configurations = Object.keys(defaultConfigurationsMap).reduce(function (acc, key) {
+        var _a, _b;
+        var defaultConfiguration = defaultConfigurationsMap[key];
+        var profileConfiguration = ((_a = profileConfigurations[key]) === null || _a === void 0 ? void 0 : _a.profileName) === (profile === null || profile === void 0 ? void 0 : profile.name) ? profileConfigurations[key] : null;
+        // Pushing default value in configurations in case we de-activate the configuration
+        var defaultValue = {
+            value: defaultConfiguration.value,
+            unit: defaultConfiguration.unit,
+        };
+        if (fromCreateView) {
+            acc[key] = {
+                key: key,
+                value: defaultConfiguration.value,
+                unit: defaultConfiguration.unit,
+                active: (_b = CREATE_VIEW_CHECKED_CONFIGS[key]) !== null && _b !== void 0 ? _b : false,
+                defaultValue: defaultValue,
+            };
+            return acc;
+        }
+        if (profileConfiguration) {
+            acc[key] = __assign(__assign({}, profileConfiguration), { defaultValue: defaultValue });
+            return acc;
+        }
+        // Removing id from it since we do not have a configuration
+        // While generating payload, we will check on the basis of id and active flag.
+        acc[key] = {
+            key: key,
+            value: defaultConfiguration.value,
+            // saving profile name as undefined and this would be a check, if we are deriving from default or not
+            unit: defaultConfiguration.unit,
+            active: false,
+            defaultValue: defaultValue,
+        };
+        return acc;
+    }, {});
+    return {
+        configurationUnits: configurationUnits,
+        profile: __assign(__assign({}, (profile && getBaseProfileObject(fromCreateView, profile))), { configurations: configurations }),
+    };
+};
+var getBuildInfraProfileByName = function (_a) {
+    var name = _a.name, fromCreateView = _a.fromCreateView;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response, _b, configurationUnits, defaultConfigurations, profile, error_1;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _c.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, get("".concat(ROUTES.INFRA_CONFIG_PROFILE, "/").concat(name))];
+                case 1:
+                    response = _c.sent();
+                    _b = response.result, configurationUnits = _b.configurationUnits, defaultConfigurations = _b.defaultConfigurations, profile = _b.profile;
+                    return [2 /*return*/, getTransformedBuildInfraProfileResponse({
+                            configurationUnits: configurationUnits,
+                            defaultConfigurations: defaultConfigurations,
+                            profile: profile,
+                            fromCreateView: fromCreateView,
+                        })];
+                case 2:
+                    error_1 = _c.sent();
+                    showError(error_1);
+                    throw error_1;
+                case 3: return [2 /*return*/];
+            }
+        });
+    });
+};
+var getBuildInfraProfilePayload = function (profileInput) {
+    var currentConfigurations = profileInput.configurations;
+    var configurationKeys = Object.keys(currentConfigurations);
+    // would only keep the configurations with id or active flag as true
+    var configurations = configurationKeys.reduce(function (acc, key) {
+        var configuration = currentConfigurations[key];
+        if (configuration.id || configuration.active) {
+            acc.push({
+                id: configuration.id,
+                key: key,
+                value: Number(configuration.value),
+                unit: configuration.unit,
+                active: configuration.active,
+            });
+        }
+        return acc;
+    }, []);
+    var payload = {
+        name: profileInput.name,
+        description: profileInput.description,
+        type: profileInput.type,
+        configurations: configurations,
+    };
+    return payload;
+};
+var updateBuildInfraProfile = function (_a) {
+    var name = _a.name, profileInput = _a.profileInput;
+    var payload = getBuildInfraProfilePayload(profileInput);
+    return put("".concat(ROUTES.INFRA_CONFIG_PROFILE, "/").concat(name), payload);
+};
+var createBuildInfraProfile = function (_a) {
+    var profileInput = _a.profileInput;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var payload;
+        return __generator(this, function (_b) {
+            payload = getBuildInfraProfilePayload(profileInput);
+            return [2 /*return*/, post(ROUTES.INFRA_CONFIG_PROFILE, payload)];
+        });
+    });
+};
+
+// eslint-disable-next-line import/prefer-default-export
+var NOT_FOUND_DEFAULT_TEXT = {
+    title: 'Resource not found',
+    subTitle: 'The resource you are looking for does not exist',
+};
+
+var APIResponseHandler = function (_a) {
+    var _b, _c;
+    var isLoading = _a.isLoading, progressingProps = _a.progressingProps, error = _a.error, notAuthorized = _a.notAuthorized, notFoundText = _a.notFoundText, reloadProps = _a.reloadProps, children = _a.children;
+    // keeping it above loading since, not expected to send a call if not authorized
+    if (notAuthorized) {
+        return jsxRuntime.jsx(ErrorScreenNotAuthorized, {});
+    }
+    if (isLoading) {
+        return jsxRuntime.jsx(Progressing, __assign({}, progressingProps));
+    }
+    if (error) {
+        // TODO: Can extend ErrorScreenNotFound
+        if ((error === null || error === void 0 ? void 0 : error.code) === 404) {
+            return (jsxRuntime.jsx(GenericEmptyState, { title: (_b = notFoundText === null || notFoundText === void 0 ? void 0 : notFoundText.title) !== null && _b !== void 0 ? _b : NOT_FOUND_DEFAULT_TEXT.title, subTitle: (_c = notFoundText === null || notFoundText === void 0 ? void 0 : notFoundText.subTitle) !== null && _c !== void 0 ? _c : NOT_FOUND_DEFAULT_TEXT.subTitle }));
+        }
+        return jsxRuntime.jsx(Reload, __assign({}, reloadProps));
+    }
+    // Had to add this since while using it is throwing ts error
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+};
+
+var getCommonSelectStyle = function (styleOverrides) {
+    if (styleOverrides === void 0) { styleOverrides = {}; }
+    return (__assign({ menuList: function (base) { return (__assign(__assign({}, base), { paddingTop: 0, paddingBottom: 0 })); }, control: function (base, state) { return (__assign(__assign({}, base), { minHeight: '32px', boxShadow: 'none', backgroundColor: 'var(--N50)', border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)', cursor: 'pointer' })); }, option: function (base, state) { return (__assign(__assign({}, base), { color: 'var(--N900)', backgroundColor: state.isFocused ? 'var(--N100)' : 'white', padding: '10px 12px' })); }, dropdownIndicator: function (base, state) { return (__assign(__assign({}, base), { color: 'var(--N400)', padding: '0 8px', transition: 'all .2s ease', transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)' })); }, valueContainer: function (base) { return (__assign(__assign({}, base), { padding: '0 8px', fontWeight: '400' })); }, loadingMessage: function (base) { return (__assign(__assign({}, base), { color: 'var(--N600)' })); }, noOptionsMessage: function (base) { return (__assign(__assign({}, base), { color: 'var(--N600)' })); } }, styleOverrides));
+};
+var getCustomOptionBackgroundColor = function (isSelected, isFocused) {
+    if (isSelected) {
+        return 'var(--B100)';
+    }
+    if (isFocused) {
+        return 'var(--N50)';
+    }
+    return 'var(--white)';
+};
+var getCustomOptionSelectionStyle = function (styleOverrides) {
+    if (styleOverrides === void 0) { styleOverrides = {}; }
+    return function (base, state) { return (__assign(__assign(__assign({}, base), { backgroundColor: getCustomOptionBackgroundColor(state.isSelected, state.isFocused), color: state.isSelected ? 'var(--B500)' : 'var(--N900)', textOverflow: 'ellipsis', fontWeight: '500', overflow: 'hidden', textAlign: 'left', whiteSpace: 'nowrap', cursor: 'pointer', fontSize: '13px' }), styleOverrides)); };
+};
+var SelectOption = function (props) {
+    var selectProps = props.selectProps, data = props.data, showTippy = props.showTippy, style = props.style, placement = props.placement, tippyContent = props.tippyContent, tippyClass = props.tippyClass;
+    selectProps.styles.option = getCustomOptionSelectionStyle(style);
+    var getOption = function () { return (jsxRuntime.jsx("div", __assign({ onClick: stopPropagation }, { children: jsxRuntime.jsx(components.Option, __assign({}, props)) }))); };
+    return showTippy ? (jsxRuntime.jsx(Tippy, __assign({ className: tippyClass || 'default-white', arrow: false, placement: placement || 'right', content: tippyContent || data.label }, { children: getOption() }))) : (getOption());
+};
 
 var BulkSelectionDropdownItems = function (_a) {
     var locator = _a.locator, label = _a.label, isSelected = _a.isSelected, handleBulkSelection = _a.handleBulkSelection, Icon = _a.icon;
@@ -29013,7 +29434,9 @@ var BulkSelectionDropdownItems = function (_a) {
             action: locator,
         });
     };
-    return (jsxRuntime.jsxs("button", __assign({ "data-testid": "bulk-action-".concat(locator), onClick: handleSelect, className: "dc__no-border dc__outline-none-imp w-100 flexbox h-32 dc__align-items-center pt-6 pr-8 pb-6 pl-8 dc__gap-8 ".concat(isSelected ? 'cb-5 bcb-2 fs-13 fw-6 lh-20' : 'dc__no-background cn-9 fs-13 fw-4 lh-20 dc__hover-n50'), type: "button" }, { children: [jsxRuntime.jsx(Icon, { className: "icon-dim-16" }), label] })));
+    return (jsxRuntime.jsxs("button", __assign({ "data-testid": "bulk-action-".concat(locator), onClick: handleSelect, className: "dc__no-border dc__outline-none-imp w-100 flexbox h-32 dc__align-items-center pt-6 pr-8 pb-6 pl-8 dc__gap-8 ".concat(isSelected
+            ? 'cb-5 bcb-1 icon-stroke-b5 fs-13 fw-6 lh-20'
+            : 'dc__no-background cn-9 fs-13 fw-4 lh-20 dc__hover-n50'), type: "button" }, { children: [jsxRuntime.jsx(Icon, { className: "icon-dim-16" }), label] })));
 };
 
 exports.BulkSelectionEvents = void 0;
@@ -29042,7 +29465,8 @@ var BulkSelectionOptionsLabels = (_a = {},
 // Considering application can not be named as *
 var SELECT_ALL_ACROSS_PAGES_LOCATOR = '*';
 var getInvalidActionMessage = function (action) { return "Invalid action ".concat(action, " passed to useBulkSelection"); };
-var BULK_SELECTION_CONTEXT_ERROR = 'useBulkSelection must be used within BulkSelectionContext';
+var BULK_SELECTION_CONTEXT_ERROR = 'useBulkSelection must be used within BulkSelectionContext';
+var CLEAR_SELECTIONS_WARNING = 'Selections on other pages are cleared';
 
 // giving type any here since not exporting this context, rather using it through useBulkSelection hook which is typed
 var BulkSelectionContext = React.createContext({
@@ -29091,6 +29515,7 @@ var BulkSelectionProvider = function (_a) {
                 setSelectedIdentifiers({});
                 break;
             case exports.BulkSelectionEvents.CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION: {
+                toast.info(CLEAR_SELECTIONS_WARNING);
                 setIdentifiersAfterClear(identifiers, selectedIds);
                 break;
             }
@@ -29120,6 +29545,9 @@ var BulkSelectionProvider = function (_a) {
                     _c));
                 break;
             case exports.BulkSelectionEvents.SELECT_ALL_ON_PAGE: {
+                if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+                    toast.info(CLEAR_SELECTIONS_WARNING);
+                }
                 setIdentifiersAfterPageSelection(identifiers);
                 break;
             }
@@ -29280,17 +29708,622 @@ var BulkSelection = function (_a) {
     return (jsxRuntime.jsxs(PopupMenu, __assign({ autoClose: true }, { children: [jsxRuntime.jsxs(PopupMenu.Button, __assign({ isKebab: true, rootClassName: "h-20 flexbox p-0 dc__no-background dc__no-border dc__outline-none-imp", dataTestId: BULK_DROPDOWN_TEST_ID }, { children: [jsxRuntime.jsx(Checkbox$1, { isChecked: isChecked, onChange: noop$1, rootClassName: "icon-dim-20 m-0", value: checkboxValue }), jsxRuntime.jsx(SvgIcChevronDown, { className: "icon-dim-20 fcn-6 dc__no-shrink" })] })), jsxRuntime.jsx(PopupMenu.Body, __assign({ rootClassName: "dc__top-22 w-150 dc__right-0 pt-4 pb-4 pl-0 pr-0 bcn-0 flex column dc__content-start dc__align-start dc__position-abs bcn-0 dc__border dc__border-radius-4-imp" }, { children: BulkSelectionItems.map(function (item) { return (jsxRuntime.jsx(BulkSelectionDropdownItems, { locator: item.locator, label: item.label, isSelected: item.isSelected, icon: item.icon, handleBulkSelection: handleBulkSelection }, item.locator)); }) }))] })));
 };
 
+var FilterChip = function (_a) {
+    var _b, _c;
+    var label = _a.label, value = _a.value, handleRemoveFilter = _a.handleRemoveFilter, _d = _a.getFormattedLabel, getFormattedLabel = _d === void 0 ? noop$1 : _d, _e = _a.getFormattedValue, getFormattedValue = _e === void 0 ? noop$1 : _e;
+    var removeFilter = function () {
+        handleRemoveFilter(label, value);
+    };
+    var labelToDisplay = (_b = getFormattedLabel(label)) !== null && _b !== void 0 ? _b : label;
+    var valueToDisplay = (_c = getFormattedValue(label, value)) !== null && _c !== void 0 ? _c : value;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox flex-align-center br-4 dc__border dc__bg-n50 pl-6 pr-6 pt-2 pb-2 dc__user-select-none h-24 dc__gap-6 fs-12 lh-20 cn-9 fw-4" }, { children: [jsxRuntime.jsx("span", __assign({ className: "fw-6 dc__capitalize" }, { children: labelToDisplay })), jsxRuntime.jsx("span", { className: "dc__divider h-24" }), jsxRuntime.jsx("span", __assign({ className: "dc__ellipsis-right" }, { children: valueToDisplay })), jsxRuntime.jsx("button", __assign({ type: "button", className: "flex p-0 dc__transparent", onClick: removeFilter, "aria-label": "Remove filter" }, { children: jsxRuntime.jsx(SvgIcClose, { className: "icon-dim-12 icon-use-fill-n6" }) }))] })));
+};
+/**
+ * Component for rendering the applied filter chips
+ */
+var FilterChips = function (_a) {
+    var filterConfig = _a.filterConfig, clearFilters = _a.clearFilters, onRemoveFilter = _a.onRemoveFilter, getFormattedLabel = _a.getFormattedLabel, getFormattedValue = _a.getFormattedValue;
+    var handleRemoveFilter = function (filterKey, valueToRemove) {
+        var _a;
+        var updatedFilterConfig = JSON.parse(JSON.stringify(filterConfig));
+        if (Array.isArray(filterConfig[filterKey])) {
+            onRemoveFilter(__assign(__assign({}, updatedFilterConfig), (_a = {}, _a[filterKey] = updatedFilterConfig[filterKey].filter(function (val) { return val !== valueToRemove; }), _a)));
+            return;
+        }
+        if (filterKey in updatedFilterConfig) {
+            delete updatedFilterConfig[filterKey];
+            onRemoveFilter(updatedFilterConfig);
+        }
+    };
+    var chips = Object.entries(filterConfig).filter(function (_a) {
+        var _b = __read(_a, 2), value = _b[1];
+        return (Array.isArray(value) ? value.length : !!value);
+    });
+    return (chips.length > 0 && (jsxRuntime.jsxs("div", __assign({ className: "flexbox pt-6 pb-6 flex-wrap dc__gap-8" }, { children: [chips.map(function (_a) {
+                var _b = __read(_a, 2), filterKey = _b[0], filterValue = _b[1];
+                return Array.isArray(filterValue) ? (filterValue.map(function (filter) { return (jsxRuntime.jsx(FilterChip, { label: filterKey, value: filter, handleRemoveFilter: handleRemoveFilter, getFormattedLabel: getFormattedLabel, getFormattedValue: getFormattedValue }, "".concat(filterKey, "-").concat(filter))); })) : (jsxRuntime.jsx(FilterChip, { label: filterKey, value: filterValue, handleRemoveFilter: handleRemoveFilter, getFormattedLabel: getFormattedLabel, getFormattedValue: getFormattedValue }, filterKey));
+            }), jsxRuntime.jsx("div", __assign({ className: "flex" }, { children: jsxRuntime.jsx("button", __assign({ type: "button", className: "cta text fs-13 lh-20-imp h-20 p-0-imp", onClick: clearFilters }, { children: "Clear All Filters" })) }))] }))));
+};
+
+var MESSAGES = {
+    PROVIDE_A_NUMBER: 'Please provide a number',
+    LOWERCASE_ALPHANUMERIC: 'Only lowercase alphanumeric characters, -, _ or . allowed',
+    CAN_NOT_START_END_WITH_SEPARATORS: 'Cannot start/end with -, _ or .',
+    getMinMaxCharMessage: function (min, max) { return "Minimum ".concat(min, " and maximum ").concat(max, " characters allowed"); },
+    getMaxCharMessage: function (max) { return "Maximum ".concat(max, " characters are allowed"); },
+    VALID_POSITIVE_NUMBER: 'This field should be a valid positive number',
+    VALID_POSITIVE_INTEGER: 'This field should be a valid positive integer',
+    MAX_SAFE_INTEGER: "Maximum allowed value is ".concat(Number.MAX_SAFE_INTEGER),
+};
+var MAX_DESCRIPTION_LENGTH = 300;
+var validateName = function (name) {
+    if (!/^.{3,50}$/.test(name)) {
+        return {
+            isValid: false,
+            message: MESSAGES.getMinMaxCharMessage(3, 50),
+        };
+    }
+    if (!/^[a-z0-9-._]+$/.test(name)) {
+        return {
+            isValid: false,
+            message: MESSAGES.LOWERCASE_ALPHANUMERIC,
+        };
+    }
+    if (!/^(?![-._]).*[^-._]$/.test(name)) {
+        return {
+            isValid: false,
+            message: MESSAGES.CAN_NOT_START_END_WITH_SEPARATORS,
+        };
+    }
+    return {
+        isValid: true,
+    };
+};
+var validateDescription = function (description) {
+    if ((description === null || description === void 0 ? void 0 : description.length) > MAX_DESCRIPTION_LENGTH) {
+        return {
+            isValid: false,
+            message: MESSAGES.getMaxCharMessage(MAX_DESCRIPTION_LENGTH),
+        };
+    }
+    return {
+        isValid: true,
+    };
+};
+var validateRequiredPositiveNumber = function (value) {
+    if (!value) {
+        return {
+            isValid: false,
+            message: MESSAGES.PROVIDE_A_NUMBER,
+        };
+    }
+    // TODO: Look if regex is available for this, since 0002 is not a valid number
+    if (!/^\d+(\.\d+)?$/.test(value.toString())) {
+        return {
+            isValid: false,
+            message: MESSAGES.VALID_POSITIVE_NUMBER,
+        };
+    }
+    var numericValue = Number(value);
+    if (numericValue > Number.MAX_SAFE_INTEGER) {
+        return {
+            isValid: false,
+            message: MESSAGES.MAX_SAFE_INTEGER,
+        };
+    }
+    if (numericValue <= 0) {
+        return {
+            isValid: false,
+            message: MESSAGES.VALID_POSITIVE_NUMBER,
+        };
+    }
+    return {
+        isValid: true,
+    };
+};
+var validateRequiredPositiveInteger = function (value) {
+    if (!value) {
+        return {
+            isValid: false,
+            message: MESSAGES.PROVIDE_A_NUMBER,
+        };
+    }
+    if (!/^\d+$/.test(value.toString())) {
+        return {
+            isValid: false,
+            message: MESSAGES.VALID_POSITIVE_INTEGER,
+        };
+    }
+    var numericValue = Number(value);
+    if (numericValue > Number.MAX_SAFE_INTEGER) {
+        return {
+            isValid: false,
+            message: MESSAGES.MAX_SAFE_INTEGER,
+        };
+    }
+    if (numericValue <= 0) {
+        return {
+            isValid: false,
+            message: MESSAGES.VALID_POSITIVE_INTEGER,
+        };
+    }
+    return {
+        isValid: true,
+    };
+};
+
+// Disabling default export since this is a helper function and we would have to export a lot of functions in future.
+// eslint-disable-next-line import/prefer-default-export
+var highlightSearchText = function (_a) {
+    var searchText = _a.searchText, text = _a.text, highlightClasses = _a.highlightClasses;
+    if (!searchText) {
+        return text;
+    }
+    try {
+        var regex = new RegExp(searchText, 'gi');
+        return text.replace(regex, function (match) { return "<span class=\"".concat(highlightClasses, "\">").concat(match, "</span>"); });
+    }
+    catch (error) {
+        return text;
+    }
+};
+
+var validateRequestLimit = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var request = _a.request, limit = _a.limit, unitsMap = _a.unitsMap;
+    // Request <= Limit
+    // Request and Limit should be numbers can be decimals
+    // Request and Limit should be positive numbers
+    // Request and Limit should be less than Number.MAX_SAFE_INTEGER
+    // Request and Limit should can have at most BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES
+    // Both request and limit should be there
+    var requestNumber = Number(request.value);
+    var limitNumber = Number(limit.value);
+    var requestUnit = Number((_b = unitsMap[request.unit]) === null || _b === void 0 ? void 0 : _b.conversionFactor);
+    var limitUnit = Number((_c = unitsMap[limit.unit]) === null || _c === void 0 ? void 0 : _c.conversionFactor);
+    var requestLimitValidationResponse = {
+        request: {
+            isValid: true,
+        },
+        limit: {
+            isValid: true,
+        },
+    };
+    var requestValidationMessage = validateRequiredPositiveNumber(request.value).message;
+    var limitValidationMessage = validateRequiredPositiveNumber(limit.value).message;
+    if (requestValidationMessage) {
+        requestLimitValidationResponse.request = {
+            message: requestValidationMessage,
+            isValid: false,
+        };
+    }
+    if (limitValidationMessage) {
+        requestLimitValidationResponse.limit = {
+            message: limitValidationMessage,
+            isValid: false,
+        };
+    }
+    if (limitValidationMessage || requestValidationMessage) {
+        return requestLimitValidationResponse;
+    }
+    // only two decimal places are allowed
+    var requestDecimalPlaces = (_e = (_d = String(request.value).split('.')[1]) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0;
+    var limitDecimalPlaces = (_g = (_f = String(limit.value).split('.')[1]) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0;
+    if (requestDecimalPlaces > BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES) {
+        requestLimitValidationResponse.request = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_DECIMAL_PLACES,
+            isValid: false,
+        };
+        return requestLimitValidationResponse;
+    }
+    if (limitDecimalPlaces > BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES) {
+        requestLimitValidationResponse.limit = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.LIMIT_DECIMAL_PLACES,
+            isValid: false,
+        };
+        return requestLimitValidationResponse;
+    }
+    // Assuming requestUnit and requestNumber are not 0
+    // TODO: Communicate this assumption to the backend
+    var limitRequestUnitFactor = limitUnit / requestUnit;
+    var limitRequestFactor = limitNumber / requestNumber;
+    var isDifferenceBigNumber = limitRequestUnitFactor * limitRequestFactor <= Number.MAX_SAFE_INTEGER;
+    if (!isDifferenceBigNumber) {
+        requestLimitValidationResponse.request = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.CAN_NOT_COMPUTE,
+            isValid: false,
+        };
+        return requestLimitValidationResponse;
+    }
+    if (limitRequestUnitFactor * limitRequestFactor < 1) {
+        requestLimitValidationResponse.request = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_LESS_THAN_LIMIT,
+            isValid: false,
+        };
+        return requestLimitValidationResponse;
+    }
+    return requestLimitValidationResponse;
+};
+var getInitialProfileInputErrors = function (fromCreateView) {
+    if (fromCreateView) {
+        var initialProfileInputErrors_1 = __assign({}, PROFILE_INPUT_ERROR_FIELDS);
+        CREATE_MODE_REQUIRED_INPUT_FIELDS.forEach(function (field) {
+            initialProfileInputErrors_1[field] = '';
+        });
+        return initialProfileInputErrors_1;
+    }
+    return __assign({}, PROFILE_INPUT_ERROR_FIELDS);
+};
+var useBuildInfraForm = function (_a) {
+    var name = _a.name, editProfile = _a.editProfile, handleSuccessRedirection = _a.handleSuccessRedirection;
+    var fromCreateView = !name;
+    var _b = __read(useAsync(function () {
+        return getBuildInfraProfileByName({
+            name: name !== null && name !== void 0 ? name : DEFAULT_PROFILE_NAME,
+            fromCreateView: fromCreateView,
+        });
+    }, [name]), 4), isLoading = _b[0], profileResponse = _b[1], responseError = _b[2], reloadRequest = _b[3];
+    // If configuration is existing and is active then use it else use default from profileResponse
+    var _c = __read(React.useState(null), 2), profileInput = _c[0], setProfileInput = _c[1];
+    var _d = __read(React.useState(__assign({}, PROFILE_INPUT_ERROR_FIELDS)), 2), profileInputErrors = _d[0], setProfileInputErrors = _d[1];
+    var _e = __read(React.useState(false), 2), loadingActionRequest = _e[0], setLoadingActionRequest = _e[1];
+    React.useEffect(function () {
+        if (!isLoading && (profileResponse === null || profileResponse === void 0 ? void 0 : profileResponse.configurationUnits) && (profileResponse === null || profileResponse === void 0 ? void 0 : profileResponse.profile)) {
+            setProfileInput(__assign({}, profileResponse.profile));
+            setProfileInputErrors(getInitialProfileInputErrors(fromCreateView));
+        }
+    }, [profileResponse, isLoading]);
+    // NOTE: Currently sending and receiving values as string, but will parse it to number for payload
+    var handleProfileInputChange = function (_a) {
+        var action = _a.action, data = _a.data;
+        var currentInput = __assign({}, profileInput);
+        var currentInputErrors = __assign({}, profileInputErrors);
+        var lastSavedConfiguration = profileResponse.profile.configurations;
+        var currentConfiguration = currentInput.configurations;
+        var _b = data !== null && data !== void 0 ? data : { value: null, unit: null }, value = _b.value, unit = _b.unit;
+        switch (action) {
+            case exports.BuildInfraMetaConfigTypes.DESCRIPTION:
+                currentInput.description = value;
+                currentInputErrors.description = validateDescription(value).message;
+                break;
+            case exports.BuildInfraMetaConfigTypes.NAME:
+                currentInput.name = value;
+                currentInputErrors.name = validateName(value).message;
+                break;
+            case exports.BuildInfraConfigTypes.CPU_LIMIT: {
+                currentConfiguration[exports.BuildInfraConfigTypes.CPU_LIMIT] = __assign(__assign({}, currentConfiguration[exports.BuildInfraConfigTypes.CPU_LIMIT]), { value: value, unit: unit });
+                var _c = validateRequestLimit({
+                    request: {
+                        value: currentConfiguration[exports.BuildInfraConfigTypes.CPU_REQUEST].value,
+                        unit: currentConfiguration[exports.BuildInfraConfigTypes.CPU_REQUEST].unit,
+                    },
+                    limit: {
+                        value: value,
+                        unit: unit,
+                    },
+                    unitsMap: profileResponse.configurationUnits[exports.BuildInfraConfigTypes.CPU_LIMIT],
+                }), request = _c.request, limit = _c.limit;
+                currentInputErrors[exports.BuildInfraConfigTypes.CPU_LIMIT] = limit.message;
+                currentInputErrors[exports.BuildInfraConfigTypes.CPU_REQUEST] = request.message;
+                break;
+            }
+            case exports.BuildInfraConfigTypes.CPU_REQUEST: {
+                currentConfiguration[exports.BuildInfraConfigTypes.CPU_REQUEST] = __assign(__assign({}, currentConfiguration[exports.BuildInfraConfigTypes.CPU_REQUEST]), { value: value, unit: unit });
+                var _d = validateRequestLimit({
+                    request: {
+                        value: value,
+                        unit: unit,
+                    },
+                    limit: {
+                        value: currentConfiguration[exports.BuildInfraConfigTypes.CPU_LIMIT].value,
+                        unit: currentConfiguration[exports.BuildInfraConfigTypes.CPU_LIMIT].unit,
+                    },
+                    unitsMap: profileResponse.configurationUnits[exports.BuildInfraConfigTypes.CPU_LIMIT],
+                }), request = _d.request, limit = _d.limit;
+                currentInputErrors[exports.BuildInfraConfigTypes.CPU_LIMIT] = limit.message;
+                currentInputErrors[exports.BuildInfraConfigTypes.CPU_REQUEST] = request.message;
+                break;
+            }
+            case exports.BuildInfraConfigTypes.MEMORY_LIMIT: {
+                currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_LIMIT] = __assign(__assign({}, currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_LIMIT]), { value: value, unit: unit });
+                var _e = validateRequestLimit({
+                    request: {
+                        value: currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_REQUEST].value,
+                        unit: currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_REQUEST].unit,
+                    },
+                    limit: {
+                        value: value,
+                        unit: unit,
+                    },
+                    unitsMap: profileResponse.configurationUnits[exports.BuildInfraConfigTypes.MEMORY_LIMIT],
+                }), request = _e.request, limit = _e.limit;
+                currentInputErrors[exports.BuildInfraConfigTypes.MEMORY_LIMIT] = limit.message;
+                currentInputErrors[exports.BuildInfraConfigTypes.MEMORY_REQUEST] = request.message;
+                break;
+            }
+            case exports.BuildInfraConfigTypes.MEMORY_REQUEST: {
+                currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_REQUEST] = __assign(__assign({}, currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_REQUEST]), { value: value, unit: unit });
+                var _f = validateRequestLimit({
+                    request: {
+                        value: value,
+                        unit: unit,
+                    },
+                    limit: {
+                        value: currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_LIMIT].value,
+                        unit: currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_LIMIT].unit,
+                    },
+                    unitsMap: profileResponse.configurationUnits[exports.BuildInfraConfigTypes.MEMORY_LIMIT],
+                }), request = _f.request, limit = _f.limit;
+                currentInputErrors[exports.BuildInfraConfigTypes.MEMORY_LIMIT] = limit.message;
+                currentInputErrors[exports.BuildInfraConfigTypes.MEMORY_REQUEST] = request.message;
+                break;
+            }
+            case exports.BuildInfraConfigTypes.BUILD_TIMEOUT: {
+                currentConfiguration[exports.BuildInfraConfigTypes.BUILD_TIMEOUT] = __assign(__assign({}, currentConfiguration[exports.BuildInfraConfigTypes.BUILD_TIMEOUT]), { value: value, unit: unit });
+                currentInputErrors[exports.BuildInfraConfigTypes.BUILD_TIMEOUT] = validateRequiredPositiveInteger(value).message;
+                break;
+            }
+            case exports.BuildInfraInheritActions.ACTIVATE_CPU:
+                currentConfiguration[exports.BuildInfraConfigTypes.CPU_LIMIT] = __assign(__assign({}, lastSavedConfiguration[exports.BuildInfraConfigTypes.CPU_LIMIT]), { value: lastSavedConfiguration[exports.BuildInfraConfigTypes.CPU_LIMIT].value, unit: lastSavedConfiguration[exports.BuildInfraConfigTypes.CPU_LIMIT].unit, active: true });
+                currentConfiguration[exports.BuildInfraConfigTypes.CPU_REQUEST] = __assign(__assign({}, lastSavedConfiguration[exports.BuildInfraConfigTypes.CPU_REQUEST]), { value: lastSavedConfiguration[exports.BuildInfraConfigTypes.CPU_REQUEST].value, unit: lastSavedConfiguration[exports.BuildInfraConfigTypes.CPU_REQUEST].unit, active: true });
+                currentInputErrors[exports.BuildInfraConfigTypes.CPU_LIMIT] = null;
+                currentInputErrors[exports.BuildInfraConfigTypes.CPU_REQUEST] = null;
+                break;
+            case exports.BuildInfraInheritActions.ACTIVATE_MEMORY:
+                currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_LIMIT] = __assign(__assign({}, lastSavedConfiguration[exports.BuildInfraConfigTypes.MEMORY_LIMIT]), { value: lastSavedConfiguration[exports.BuildInfraConfigTypes.MEMORY_LIMIT].value, unit: lastSavedConfiguration[exports.BuildInfraConfigTypes.MEMORY_LIMIT].unit, active: true });
+                currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_REQUEST] = __assign(__assign({}, lastSavedConfiguration[exports.BuildInfraConfigTypes.MEMORY_REQUEST]), { value: lastSavedConfiguration[exports.BuildInfraConfigTypes.MEMORY_REQUEST].value, unit: lastSavedConfiguration[exports.BuildInfraConfigTypes.MEMORY_REQUEST].unit, active: true });
+                currentInputErrors[exports.BuildInfraConfigTypes.MEMORY_LIMIT] = null;
+                currentInputErrors[exports.BuildInfraConfigTypes.MEMORY_REQUEST] = null;
+                break;
+            case exports.BuildInfraInheritActions.ACTIVATE_BUILD_TIMEOUT:
+                currentConfiguration[exports.BuildInfraConfigTypes.BUILD_TIMEOUT] = __assign(__assign({}, lastSavedConfiguration[exports.BuildInfraConfigTypes.BUILD_TIMEOUT]), { value: lastSavedConfiguration[exports.BuildInfraConfigTypes.BUILD_TIMEOUT].value, unit: lastSavedConfiguration[exports.BuildInfraConfigTypes.BUILD_TIMEOUT].unit, active: true });
+                currentInputErrors[exports.BuildInfraConfigTypes.BUILD_TIMEOUT] = null;
+                break;
+            case exports.BuildInfraInheritActions.DE_ACTIVATE_BUILD_TIMEOUT:
+                // Reverting the value and unit to defaultValues
+                currentConfiguration[exports.BuildInfraConfigTypes.BUILD_TIMEOUT] = __assign(__assign({}, currentConfiguration[exports.BuildInfraConfigTypes.BUILD_TIMEOUT]), { value: lastSavedConfiguration[exports.BuildInfraConfigTypes.BUILD_TIMEOUT].defaultValue.value, unit: lastSavedConfiguration[exports.BuildInfraConfigTypes.BUILD_TIMEOUT].defaultValue.unit, active: false });
+                currentInputErrors[exports.BuildInfraConfigTypes.BUILD_TIMEOUT] = null;
+                break;
+            case exports.BuildInfraInheritActions.DE_ACTIVATE_CPU:
+                currentConfiguration[exports.BuildInfraConfigTypes.CPU_LIMIT] = __assign(__assign({}, currentConfiguration[exports.BuildInfraConfigTypes.CPU_LIMIT]), { value: lastSavedConfiguration[exports.BuildInfraConfigTypes.CPU_LIMIT].defaultValue.value, unit: lastSavedConfiguration[exports.BuildInfraConfigTypes.CPU_LIMIT].defaultValue.unit, active: false });
+                currentConfiguration[exports.BuildInfraConfigTypes.CPU_REQUEST] = __assign(__assign({}, currentConfiguration[exports.BuildInfraConfigTypes.CPU_REQUEST]), { value: lastSavedConfiguration[exports.BuildInfraConfigTypes.CPU_REQUEST].defaultValue.value, unit: lastSavedConfiguration[exports.BuildInfraConfigTypes.CPU_REQUEST].defaultValue.unit, active: false });
+                currentInputErrors[exports.BuildInfraConfigTypes.CPU_LIMIT] = null;
+                currentInputErrors[exports.BuildInfraConfigTypes.CPU_REQUEST] = null;
+                break;
+            case exports.BuildInfraInheritActions.DE_ACTIVATE_MEMORY:
+                currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_LIMIT] = __assign(__assign({}, currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_LIMIT]), { value: lastSavedConfiguration[exports.BuildInfraConfigTypes.MEMORY_LIMIT].defaultValue.value, unit: lastSavedConfiguration[exports.BuildInfraConfigTypes.MEMORY_LIMIT].defaultValue.unit, active: false });
+                currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_REQUEST] = __assign(__assign({}, currentConfiguration[exports.BuildInfraConfigTypes.MEMORY_REQUEST]), { value: lastSavedConfiguration[exports.BuildInfraConfigTypes.MEMORY_REQUEST].defaultValue.value, unit: lastSavedConfiguration[exports.BuildInfraConfigTypes.MEMORY_REQUEST].defaultValue.unit, active: false });
+                currentInputErrors[exports.BuildInfraConfigTypes.MEMORY_LIMIT] = null;
+                currentInputErrors[exports.BuildInfraConfigTypes.MEMORY_REQUEST] = null;
+                break;
+            default:
+                throw new Error(BUILD_INFRA_TEXT.getInvalidActionMessage(action));
+        }
+        setProfileInput(currentInput);
+        setProfileInputErrors(currentInputErrors);
+    };
+    var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var hasErrors, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    hasErrors = Object.keys(profileInputErrors).filter(function (item) { return profileInputErrors[item] !== null && profileInputErrors[item] !== undefined; }).length > 0;
+                    if (hasErrors) {
+                        toast.error(BUILD_INFRA_TEXT.INVALID_FORM_MESSAGE);
+                        return [2 /*return*/];
+                    }
+                    setLoadingActionRequest(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 6, , 7]);
+                    if (!editProfile) return [3 /*break*/, 3];
+                    return [4 /*yield*/, updateBuildInfraProfile({ name: name, profileInput: profileInput })];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, createBuildInfraProfile({ profileInput: profileInput })];
+                case 4:
+                    _a.sent();
+                    _a.label = 5;
+                case 5:
+                    setLoadingActionRequest(false);
+                    toast.success(BUILD_INFRA_TEXT.getSubmitSuccessMessage(profileInput.name, editProfile));
+                    if (handleSuccessRedirection) {
+                        handleSuccessRedirection();
+                    }
+                    else {
+                        reloadRequest();
+                    }
+                    return [3 /*break*/, 7];
+                case 6:
+                    err_1 = _a.sent();
+                    showError(err_1);
+                    setLoadingActionRequest(false);
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
+    return {
+        isLoading: isLoading,
+        profileResponse: profileResponse,
+        responseError: responseError,
+        reloadRequest: reloadRequest,
+        profileInput: profileInput,
+        profileInputErrors: profileInputErrors,
+        handleProfileInputChange: handleProfileInputChange,
+        loadingActionRequest: loadingActionRequest,
+        handleSubmit: handleSubmit,
+    };
+};
+var unitSelectorStyles = function () {
+    return getCommonSelectStyle({
+        control: function (base, state) { return (__assign(__assign({}, base), { borderRadius: 0, backgroundColor: 'var(--N0)', border: state.isFocused ? '1px solid var(--B500) !important' : '1px solid var(--N200)', alignItems: 'center', cursor: 'pointer', borderTopRightRadius: '4px', borderBottomRightRadius: '4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', outline: 'none', boxShadow: 'none', '&:hover': {
+                border: '1px solid var(--N400)',
+            } })); },
+        indicatorContainer: function (base) { return (__assign(__assign({}, base), { padding: '0px' })); },
+        dropdownIndicator: function (base, state) { return (__assign(__assign({}, base), { color: 'var(--N600)', transition: 'all .2s ease', transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)' })); },
+        option: function (base, state) { return (__assign(__assign(__assign(__assign(__assign({}, base), { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'pointer' }), (state.isFocused
+            ? {
+                backgroundColor: 'var(--N50)',
+            }
+            : {})), (state.isSelected && {
+            backgroundColor: 'var(--B100)',
+            fontWeight: 600,
+            color: 'var(--B500)',
+        })), { '&:active': {
+                backgroundColor: 'var(--N50)',
+            } })); },
+        valueContainer: function (base) { return (__assign(__assign({}, base), { color: 'var(--N900)', fontSize: '13px', fontWeight: '400', lineHeight: '20px' })); },
+        menuList: function (base) { return (__assign(__assign({}, base), { maxHeight: '164px', height: '100%' })); },
+    });
+};
+
+/**
+ * In case need arise for variants break this CustomInput and Select as a separate component
+ */
+var BuildInfraFormAction = function (_a) {
+    var actionType = _a.actionType, label = _a.label, placeholder = _a.placeholder, error = _a.error, isRequired = _a.isRequired, profileUnitsMap = _a.profileUnitsMap, handleProfileInputChange = _a.handleProfileInputChange, currentUnitName = _a.currentUnitName, currentValue = _a.currentValue;
+    var handleUnitChange = function (selectedUnit) {
+        var data = {
+            unit: selectedUnit.label,
+            value: currentValue,
+        };
+        handleProfileInputChange({ action: actionType, data: data });
+    };
+    var handleInputChange = function (e) {
+        var data = {
+            unit: currentUnitName,
+            value: e.currentTarget.value,
+        };
+        handleProfileInputChange({ action: actionType, data: data });
+    };
+    var unitOptions = React.useMemo(function () {
+        var _a, _b;
+        var units = (_b = (_a = Object.values(profileUnitsMap)) === null || _a === void 0 ? void 0 : _a.map(function (unit) { return ({
+            label: unit.name,
+            value: String(unit.conversionFactor),
+        }); })) !== null && _b !== void 0 ? _b : [];
+        return units.sort(function (a, b) { return Number(a.value) - Number(b.value); });
+    }, [profileUnitsMap]);
+    var currentUnit = React.useMemo(function () { return unitOptions.find(function (unit) { return unit.label === currentUnitName; }); }, [unitOptions, currentUnitName]);
+    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox-col dc__gap-4 dc__mxw-420 w-100 dc__align-start" }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "".concat(actionType, "-input"), className: "fs-13 fw-4 lh-20 cn-7 ".concat(isRequired ? 'dc__required-field' : '') }, { children: label })), jsxRuntime.jsxs("div", __assign({ className: "w-100 flexbox dc__align-items-center" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex-grow-1" }, { children: jsxRuntime.jsx("input", { "data-testid": "".concat(actionType, "-input-field"), name: actionType, type: "number", step: BUILD_INFRA_INPUT_CONSTRAINTS.STEP, min: BUILD_INFRA_INPUT_CONSTRAINTS.MIN, className: "form__input dc__no-right-border dc__no-right-radius", placeholder: placeholder, value: currentValue, onChange: handleInputChange, required: isRequired, autoComplete: "off", id: "".concat(actionType, "-input") }) })), profileUnitsMap && (jsxRuntime.jsx(ReactSelect, { name: "".concat(actionType, "-unit"), className: "bcn-0 dc__mxw-120", options: unitOptions, value: currentUnit, onChange: handleUnitChange, isSearchable: false, components: {
+                            IndicatorSeparator: null,
+                            ClearIndicator: null,
+                        }, styles: unitSelectorStyles() }))] })), error && (jsxRuntime.jsxs("div", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), error] })))] })));
+};
+
+var BuildInfraFormItem = function (_a) {
+    var heading = _a.heading, Marker = _a.marker, children = _a.children, isInheriting = _a.isInheriting, showDivider = _a.showDivider, handleProfileInputChange = _a.handleProfileInputChange, locator = _a.locator, isDefaultProfile = _a.isDefaultProfile;
+    var handleActivationChange = function (e) {
+        var checked = e.currentTarget.checked;
+        var action = (checked ? "activate_".concat(locator) : "de_activate_".concat(locator));
+        handleProfileInputChange({ action: action });
+    };
+    var renderMarker = function () {
+        if (isDefaultProfile) {
+            return jsxRuntime.jsx(Marker, { className: "icon-dim-20 dc__no-shrink" });
+        }
+        return (jsxRuntime.jsx(Checkbox$1, { onChange: handleActivationChange, isChecked: !isInheriting, value: exports.CHECKBOX_VALUE.CHECKED, dataTestId: "".concat(locator, "_marker") }));
+    };
+    // If in configuration active is false, means it is inheriting values from other profile
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flexbox-col dc__gap-8 w-100" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flexbox dc__gap-12 dc__align-start w-100" }, { children: [renderMarker(), jsxRuntime.jsxs("div", __assign({ className: "flexbox-col dc__gap-8 w-100" }, { children: [heading, !isInheriting && children] }))] })) })), showDivider && jsxRuntime.jsx("div", { className: "w-100 dc__border-bottom-n1" })] }));
+};
+
+var BuildInfraProfileDescriptionField = function (_a) {
+    var handleProfileInputChange = _a.handleProfileInputChange, currentValue = _a.currentValue, error = _a.error;
+    var handleChange = function (e) {
+        handleProfileInputChange({
+            action: exports.BuildInfraMetaConfigTypes.DESCRIPTION,
+            data: { value: e.currentTarget.value },
+        });
+    };
+    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox-col dc__gap-4 w-100 dc__align-start" }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "build-infra-profile-description", className: "m-0 fs-13 fw-4 lh-20 cn-7" }, { children: BUILD_INFRA_TEXT.DESCRIPTION_LABEL })), jsxRuntime.jsx("textarea", { "data-testid": "build-infra-profile-description", name: "profile-description", className: "form__textarea mxh-140 dc__hover-border-n300", id: "build-infra-profile-description", placeholder: BUILD_INFRA_TEXT.DESCRIPTION_PLACEHOLDER, value: currentValue, onChange: handleChange }), error && (jsxRuntime.jsxs("div", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), error] })))] })));
+};
+
+var BuildInfraProfileNameField = function (_a) {
+    var handleProfileInputChange = _a.handleProfileInputChange, currentValue = _a.currentValue, error = _a.error;
+    var handleChange = function (e) {
+        handleProfileInputChange({ action: exports.BuildInfraMetaConfigTypes.NAME, data: { value: e.currentTarget.value } });
+    };
+    return (jsxRuntime.jsx("div", __assign({ className: "flexbox-col dc__gap-4 w-100 dc__align-start" }, { children: jsxRuntime.jsx(CustomInput, { name: "profile-name", label: BUILD_INFRA_TEXT.PROFILE_LABEL, labelClassName: "m-0 dc__required-field fs-13 fw-4 lh-20 cn-7", placeholder: BUILD_INFRA_TEXT.PROFILE_PLACEHOLDER, value: currentValue, onChange: handleChange, error: error, required: true, inputWrapClassName: "w-100" }) })));
+};
+
+var InheritingHeader = function (_a) {
+    var defaultHeading = _a.defaultHeading, inheritingData = _a.inheritingData, isInheriting = _a.isInheriting, isDefaultProfile = _a.isDefaultProfile;
+    var inheritingDataString = inheritingData.map(function (data) { var _a; return "".concat(data.value, " ").concat((_a = data.unit) !== null && _a !== void 0 ? _a : ''); }).join(' - ');
+    if (isDefaultProfile || !isInheriting) {
+        // For typing issues
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultHeading });
+    }
+    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox dc__align-items-center dc__content-space w-100" }, { children: [defaultHeading, jsxRuntime.jsxs("div", __assign({ className: "flexbox dc__content-space w-100" }, { children: [jsxRuntime.jsx("span", __assign({ className: "m-0 pt-0 pb-0 pl-4 pr-4 fs-13 lh-20 fw-4 cn-9 dc__ellipsis-right dc__word-break-all flex-grow-1" }, { children: inheritingDataString })), jsxRuntime.jsx("p", __assign({ className: "m-0 cn-7 fs-13 fw-4 lh-20 dc__no-shrink" }, { children: BUILD_INFRA_TEXT.INHERITING_HEADING_DESCRIPTION }))] }))] })));
+};
+var BuildInfraConfigForm = function (_a) {
+    var profileInput = _a.profileInput, profileInputErrors = _a.profileInputErrors, handleProfileInputChange = _a.handleProfileInputChange, isDefaultProfile = _a.isDefaultProfile, unitsMap = _a.unitsMap, configurationContainerLabel = _a.configurationContainerLabel;
+    var currentConfigurations = profileInput === null || profileInput === void 0 ? void 0 : profileInput.configurations;
+    // will get the desired configuration from the currentConfigurations and then check if it is active or not
+    var isInheritingProfileValues = function (actions) {
+        return actions.some(function (action) { return !currentConfigurations[action.actionType].active; });
+    };
+    // Had to show loader for an instance due to batching of state updates not working as expected :/
+    if (!currentConfigurations) {
+        return jsxRuntime.jsx(Progressing, { pageLoader: true });
+    }
+    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox-col dc__mxw-920 dc__gap-16" }, { children: [!isDefaultProfile && (jsxRuntime.jsxs("div", __assign({ className: "flexbox-col dc__gap-12" }, { children: [jsxRuntime.jsx(BuildInfraProfileNameField, { handleProfileInputChange: handleProfileInputChange, currentValue: profileInput.name, error: profileInputErrors.name }), jsxRuntime.jsx(BuildInfraProfileDescriptionField, { handleProfileInputChange: handleProfileInputChange, currentValue: profileInput.description, error: profileInputErrors.description })] }))), jsxRuntime.jsxs("div", __assign({ className: "flexbox-col dc__gap-12" }, { children: [configurationContainerLabel, jsxRuntime.jsx("div", __assign({ className: "w-100 flexbox-col dc__gap-16 br-4 dc__border-n1 p-16" }, { children: BUILD_INFRA_FORM_FIELDS.map(function (field, index) { return (jsxRuntime.jsx(BuildInfraFormItem, __assign({ marker: field.marker, heading: jsxRuntime.jsx(InheritingHeader, { defaultHeading: field.heading, inheritingData: field.actions.map(function (action) { return currentConfigurations[action.actionType]; }), isInheriting: isInheritingProfileValues(field.actions), isDefaultProfile: isDefaultProfile }), showDivider: index !== BUILD_INFRA_FORM_FIELDS.length - 1, isInheriting: isInheritingProfileValues(field.actions), handleProfileInputChange: handleProfileInputChange, locator: field.locator, isDefaultProfile: isDefaultProfile }, { children: jsxRuntime.jsx("div", __assign({ className: "w-50 flexbox dc__gap-12 w-100 dc__align-start" }, { children: field.actions.map(function (action) { return (jsxRuntime.jsx(BuildInfraFormAction, { actionType: action.actionType, label: action.label, placeholder: action.placeholder, error: profileInputErrors[action.actionType], 
+                                    // Assumption is for default profiles all input fields are required
+                                    isRequired: true, profileUnitsMap: unitsMap[action.actionType], handleProfileInputChange: handleProfileInputChange, currentUnitName: currentConfigurations[action.actionType].unit, currentValue: currentConfigurations[action.actionType].value }, action.actionType)); }) })) }), field.locator)); }) }))] }))] })));
+};
+
+exports.UserListSortableKeys = void 0;
+(function (UserListSortableKeys) {
+    UserListSortableKeys["email"] = "email_id";
+    UserListSortableKeys["lastLogin"] = "last_login";
+})(exports.UserListSortableKeys || (exports.UserListSortableKeys = {}));
+/**
+ * User Status received from the API
+ */
+exports.UserStatusDto = void 0;
+(function (UserStatusDto) {
+    UserStatusDto["active"] = "active";
+    UserStatusDto["inactive"] = "inactive";
+})(exports.UserStatusDto || (exports.UserStatusDto = {}));
+/**
+ * User status for the frontend
+ */
+exports.UserStatus = void 0;
+(function (UserStatus) {
+    UserStatus["active"] = "active";
+    UserStatus["inactive"] = "inactive";
+    UserStatus["temporary"] = "temporaryAccess";
+})(exports.UserStatus || (exports.UserStatus = {}));
+
+exports.APIResponseHandler = APIResponseHandler;
 exports.AddCDButton = AddCDButton;
 exports.AppStatus = AppStatus;
+exports.BUILD_INFRA_BREADCRUMB = BUILD_INFRA_BREADCRUMB;
+exports.BUILD_INFRA_FORM_FIELDS = BUILD_INFRA_FORM_FIELDS;
+exports.BUILD_INFRA_INPUT_CONSTRAINTS = BUILD_INFRA_INPUT_CONSTRAINTS;
+exports.BUILD_INFRA_TEST_IDS = BUILD_INFRA_TEST_IDS;
+exports.BUILD_INFRA_TEXT = BUILD_INFRA_TEXT;
 exports.BULK_DROPDOWN_TEST_ID = BULK_DROPDOWN_TEST_ID;
 exports.BULK_SELECTION_CONTEXT_ERROR = BULK_SELECTION_CONTEXT_ERROR;
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
+exports.BuildInfraConfigActionMap = BuildInfraConfigActionMap;
+exports.BuildInfraConfigForm = BuildInfraConfigForm;
+exports.BuildInfraDescriptor = Descriptor;
+exports.BuildInfraFooter = Footer;
 exports.BuildStageVariable = BuildStageVariable;
 exports.BulkSelection = BulkSelection;
 exports.BulkSelectionOptionsLabels = BulkSelectionOptionsLabels;
 exports.BulkSelectionProvider = BulkSelectionProvider;
 exports.CDModalTab = CDModalTab;
+exports.CLEAR_SELECTIONS_WARNING = CLEAR_SELECTIONS_WARNING;
+exports.CREATE_MODE_REQUIRED_INPUT_FIELDS = CREATE_MODE_REQUIRED_INPUT_FIELDS;
+exports.CREATE_PROFILE_BASE_VALUE = CREATE_PROFILE_BASE_VALUE;
+exports.CREATE_VIEW_CHECKED_CONFIGS = CREATE_VIEW_CHECKED_CONFIGS;
 exports.ChartVersionAndTypeSelector = ChartVersionAndTypeSelector;
 exports.Checkbox = Checkbox$1;
 exports.ClearIndicator = ClearIndicator;
@@ -29300,6 +30333,7 @@ exports.ConfirmationDialog = ConfirmationDialog;
 exports.CustomInput = CustomInput;
 exports.CustomSelect = CustomSelect;
 exports.DEFAULT_BASE_PAGE_SIZE = DEFAULT_BASE_PAGE_SIZE;
+exports.DEFAULT_PROFILE_NAME = DEFAULT_PROFILE_NAME;
 exports.DEFAULT_TAG_DATA = DEFAULT_TAG_DATA;
 exports.DOCUMENTATION = DOCUMENTATION;
 exports.DOCUMENTATION_HOME_PAGE = DOCUMENTATION_HOME_PAGE;
@@ -29318,6 +30352,7 @@ exports.EmptyState = EmptyState;
 exports.ErrorScreenManager = ErrorScreenManager;
 exports.ErrorScreenNotAuthorized = ErrorScreenNotAuthorized;
 exports.FALLBACK_REQUEST_TIMEOUT = FALLBACK_REQUEST_TIMEOUT;
+exports.FilterChips = FilterChips;
 exports.ForceDeleteDialog = ForceDeleteDialog;
 exports.GenericEmptyState = GenericEmptyState;
 exports.Grid = Grid;
@@ -29333,6 +30368,7 @@ exports.MultiValueRemove = MultiValueRemove;
 exports.OpaqueModal = OpaqueModal;
 exports.Option = Option;
 exports.PATTERNS = PATTERNS;
+exports.PROFILE_INPUT_ERROR_FIELDS = PROFILE_INPUT_ERROR_FIELDS;
 exports.Pagination = Pagination;
 exports.PopupMenu = PopupMenu;
 exports.Progressing = Progressing;
@@ -29350,6 +30386,7 @@ exports.SELECTED_APPROVAL_TAB_STATE = SELECTED_APPROVAL_TAB_STATE;
 exports.SELECT_ALL_ACROSS_PAGES_LOCATOR = SELECT_ALL_ACROSS_PAGES_LOCATOR;
 exports.ScanVulnerabilitiesTable = ScanVulnerabilitiesTable;
 exports.SearchBar = SearchBar;
+exports.SelectOption = SelectOption;
 exports.ServerError = ServerError;
 exports.ServerErrors = ServerErrors;
 exports.SingleSelectOption = SingleSelectOption;
@@ -29373,6 +30410,7 @@ exports.VisibleModal2 = VisibleModal2;
 exports.abortPreviousRequests = abortPreviousRequests;
 exports.closeOnEscKeyPressed = closeOnEscKeyPressed;
 exports.copyToClipboard = copyToClipboard;
+exports.createBuildInfraProfile = createBuildInfraProfile;
 exports.createGitCommitUrl = createGitCommitUrl;
 exports.customStyles = customStyles;
 exports.debounce = debounce$2;
@@ -29381,7 +30419,10 @@ exports.fetchChartTemplateVersions = fetchChartTemplateVersions;
 exports.genericCDMaterialsService = genericCDMaterialsService;
 exports.get = get;
 exports.getAlphabetIcon = getAlphabetIcon;
+exports.getBuildInfraProfileByName = getBuildInfraProfileByName;
+exports.getCommonSelectStyle = getCommonSelectStyle;
 exports.getCookie = getCookie;
+exports.getCustomOptionSelectionStyle = getCustomOptionSelectionStyle;
 exports.getEmptyArrayOfLength = getEmptyArrayOfLength;
 exports.getFilteredChartVersions = getFilteredChartVersions;
 exports.getInferredTypeFromValueType = getInferredTypeFromValueType;
@@ -29392,11 +30433,13 @@ exports.getLoginInfo = getLoginInfo;
 exports.getRandomColor = getRandomColor;
 exports.getRedirectionProps = getRedirectionProps;
 exports.getTeamListMin = getTeamListMin;
+exports.getTransformedBuildInfraProfileResponse = getTransformedBuildInfraProfileResponse;
 exports.getUnlockedJSON = getUnlockedJSON;
 exports.getUrlWithSearchParams = getUrlWithSearchParams;
 exports.getUserRole = getUserRole;
 exports.handleAddCD = handleAddCD;
 exports.handleUTCTime = handleUTCTime;
+exports.highlightSearchText = highlightSearchText;
 exports.logExceptionToSentry = logExceptionToSentry;
 exports.multiSelectStyles = multiSelectStyles;
 exports.noop = noop$1;
@@ -29410,8 +30453,11 @@ exports.sortCallback = sortCallback;
 exports.stopPropagation = stopPropagation;
 exports.toastAccessDenied = toastAccessDenied;
 exports.trash = trash;
+exports.unitSelectorStyles = unitSelectorStyles;
+exports.updateBuildInfraProfile = updateBuildInfraProfile;
 exports.useAsync = useAsync;
 exports.useBreadcrumb = useBreadcrumb;
+exports.useBuildInfraForm = useBuildInfraForm;
 exports.useBulkSelection = useBulkSelection;
 exports.useClickOutside = useClickOutside;
 exports.useEffectAfterMount = useEffectAfterMount;
@@ -29421,3 +30467,8 @@ exports.useSuperAdmin = useSuperAdmin;
 exports.useThrottledEffect = useThrottledEffect;
 exports.useUrlFilters = useUrlFilters;
 exports.useWindowSize = useWindowSize;
+exports.validateDescription = validateDescription;
+exports.validateName = validateName;
+exports.validateRequestLimit = validateRequestLimit;
+exports.validateRequiredPositiveInteger = validateRequiredPositiveInteger;
+exports.validateRequiredPositiveNumber = validateRequiredPositiveNumber;