@devtron-labs/devtron-fe-common-lib 0.0.25 → 0.0.26-beta-3

package/dist/Common/DebouncedSearch/DebouncedSearch.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { DebouncedSearchProps } from './Types';
+/**
+ * @param onSearch - Callback function to be called on search
+ * @param Icon - (Optional) Icon to be shown before the input
+ * @param iconClass - (Optional) Class for the icon
+ * @param children - (Optional) In case we want to add another button or any other element
+ * @param placeholder - (Optional) Placeholder for the input
+ * @param containerClass - (Optional) Class for the container
+ * @param inputClass - (Optional) Class for the input field
+ * @param debounceTimeout - (Optional) Timeout for the debounce with default value of 500ms
+ * @param clearSearch - (Optional) To clear the search text
+ * @param showClearIcon - (Optional) To show the clear icon default value is true
+ */
+export default function DebouncedSearch({ onSearch, Icon, children, placeholder, containerClass, iconClass, inputClass, debounceTimeout, clearSearch, showClearIcon, }: DebouncedSearchProps): JSX.Element;

package/dist/Common/DebouncedSearch/Types.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface DebouncedSearchProps {
+    onSearch: (query: string) => void;
+    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    placeholder?: string;
+    inputClass?: string;
+    containerClass?: string;
+    iconClass?: string;
+    children?: React.ReactNode;
+    debounceTimeout?: number;
+    clearSearch?: boolean;
+    showClearIcon?: boolean;
+}

package/dist/Common/DebouncedSearch/Utils.d.ts

@@ -0,0 +1 @@
+export declare function useDebouncedEffect(callback: any, delay: any, deps?: unknown[]): void;

package/dist/Common/Grid/Grid.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { GridProps } from './types';
+export default function Grid({ container, spacing, item, xs, containerClass, itemClass, children, }: GridProps): JSX.Element;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface GridProps {
+    container?: boolean;
+    spacing?: number;
+    item?: boolean;
+    xs?: number;
+    containerClass?: string;
+    itemClass?: string;
+    children?: React.ReactNode;
+}

package/dist/Common/Helper.d.ts

@@ -42,4 +42,5 @@ export declare function CustomInput({ name, value, error, onChange, onBlur, onFo
 }): JSX.Element;
 export declare function handleUTCTime(ts: string, isRelativeTime?: boolean): string;
 export declare function useSearchString(): UseSearchString;
+export declare const closeOnEscKeyPressed: (e: any, actionClose: () => void) => void;
 export {};

package/dist/Common/index.d.ts

@@ -35,3 +35,5 @@ export { default as DeleteComponent } from './DeleteComponentModal/DeleteCompone
 export * from './ImageTags';
 export * from './ImageTags.Types';
 export * from './ResizableTextarea';
+export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch';
+export { default as Grid } from './Grid/Grid';

package/dist/index.js

@@ -685,15 +685,15 @@ function styleInject(css, ref) {
 var css_248z$6 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  width: 300px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 20px;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  width: 300px;\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
 styleInject(css_248z$6);
 
-var _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); }
+var _g$6;
+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 SvgIcProgressing = function SvgIcProgressing(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "1em",
     height: "1em"
-  }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none"
   }, /*#__PURE__*/React__namespace.createElement("animateTransform", {
     attributeName: "transform",
@@ -740,8 +740,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$h() {
-  _extends$h = Object.assign || function (target) {
+function _extends$i() {
+  _extends$i = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -755,7 +755,7 @@ function _extends$h() {
     return target;
   };
 
-  return _extends$h.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$2(source, excluded) {
@@ -1481,7 +1481,7 @@ function ProgressBar(_ref) {
       isIn = _ref.isIn,
       theme = _ref.theme;
 
-  var style = _extends$h({}, userStyle, {
+  var style = _extends$i({}, userStyle, {
     animationDuration: delay + "ms",
     animationPlayState: isRunning ? 'running' : 'paused',
     opacity: hide ? 0 : 1
@@ -1758,9 +1758,9 @@ var ToastContainer = function ToastContainer(props) {
     ,
     id: containerId
   }, getToastToRender(function (position, toastList) {
-    var containerStyle = !toastList.length ? _extends$h({}, style, {
+    var containerStyle = !toastList.length ? _extends$i({}, style, {
       pointerEvents: 'none'
-    }) : _extends$h({}, style);
+    }) : _extends$i({}, style);
     return React.createElement("div", {
       className: getClassName(position),
       style: containerStyle,
@@ -1867,7 +1867,7 @@ function dispatchToast(content, options) {
 
 
 function mergeOptions(type, options) {
-  return _extends$h({}, options, {
+  return _extends$i({}, options, {
     type: options && options.type || type,
     toastId: getToastId(options)
   });
@@ -1884,7 +1884,7 @@ function toast(content, options) {
 }
 
 toast.loading = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$h({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$i({
     isLoading: true,
     autoClose: false,
     closeOnClick: false,
@@ -1900,7 +1900,7 @@ function handlePromise(promise, _ref2, options) {
   var id;
 
   if (pending) {
-    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$h({}, options, pending));
+    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$i({}, options, pending));
   }
 
   var resetParams = {
@@ -1919,7 +1919,7 @@ function handlePromise(promise, _ref2, options) {
       return;
     }
 
-    var baseParams = _extends$h({
+    var baseParams = _extends$i({
       type: type
     }, resetParams, options, {
       data: result
@@ -1930,10 +1930,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$h({}, baseParams, params));
+      toast.update(id, _extends$i({}, baseParams, params));
     } else {
       // using toast.promise without loading
-      toast(params.render, _extends$h({}, baseParams, params));
+      toast(params.render, _extends$i({}, baseParams, params));
     }
 
     return result;
@@ -1957,7 +1957,7 @@ toast.warning = /*#__PURE__*/createToastByType(TYPE.WARNING);
 toast.warn = toast.warning;
 
 toast.dark = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$h({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$i({
     theme: 'dark'
   }, options)));
 };
@@ -2014,7 +2014,7 @@ toast.update = function (toastId, options) {
       var oldOptions = toast.props,
           oldContent = toast.content;
 
-      var nextOptions = _extends$h({}, oldOptions, options, {
+      var nextOptions = _extends$i({}, oldOptions, options, {
         toastId: options.toastId || toastId,
         updateId: generateToastId()
       });
@@ -4109,15 +4109,15 @@ function captureException(exception, captureContext) {
   return getCurrentHub().captureException(exception, { captureContext });
 }
 
-var _g$4;
-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 _g$5;
+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 SvgIcWarning = function SvgIcWarning(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 32 32"
-  }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -10099,7 +10099,12 @@ function useSearchString() {
         return agg;
     }, {});
     return { queryParams: queryParams, searchParams: searchParams };
-}
+}
+var closeOnEscKeyPressed = function (e, actionClose) {
+    if (e.keyCode === 27 || e.key === 'Escape') {
+        actionClose();
+    }
+};
 
 function Progressing(_a) {
     var pageLoader = _a.pageLoader, size = _a.size, theme = _a.theme, styles = _a.styles, fillColor = _a.fillColor;
@@ -10227,9 +10232,9 @@ var Modal = function (_a) {
 };
 
 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); }
+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 SvgIcCross = function SvgIcCross(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24",
@@ -14535,9 +14540,9 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 var Tippy = index;
 
 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); }
+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 SvgIcHelp = function SvgIcHelp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -14550,9 +14555,9 @@ var SvgIcHelp = function SvgIcHelp(props) {
 };
 
 var _path$8;
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 var SvgIcHelpOutline = function SvgIcHelpOutline(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 17 16",
     width: "1em",
@@ -14610,9 +14615,9 @@ function TippyCustomized(props) {
 }
 
 var _path$7, _circle, _path2$1;
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 var SvgInjectTag = function SvgInjectTag(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20",
@@ -14647,9 +14652,9 @@ function PropagateTagInfo(_a) {
 }
 
 var _path$6;
-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); }
+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 SvgIcInfoOutlined = function SvgIcInfoOutlined(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -14883,9 +14888,9 @@ var TagDetails = function (_a) {
 };
 
 var _path$5;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
 var SvgIcAdd = function SvgIcAdd(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -15008,8 +15013,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$9() {
-  _extends$9 = Object.assign ? Object.assign.bind() : function (target) {
+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) {
@@ -15020,7 +15025,7 @@ function _extends$9() {
     }
     return target;
   };
-  return _extends$9.apply(this, arguments);
+  return _extends$a.apply(this, arguments);
 }
 
 /*
@@ -18561,7 +18566,7 @@ var Menu = function Menu(props) {
       getStyles = props.getStyles,
       innerRef = props.innerRef,
       innerProps = props.innerProps;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('menu', props),
     className: cx({
       menu: true
@@ -18593,7 +18598,7 @@ var MenuList = function MenuList(props) {
       innerProps = props.innerProps,
       innerRef = props.innerRef,
       isMulti = props.isMulti;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('menuList', props),
     className: cx({
       'menu-list': true,
@@ -18624,7 +18629,7 @@ var NoOptionsMessage = function NoOptionsMessage(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('noOptionsMessage', props),
     className: cx({
       'menu-notice': true,
@@ -18641,7 +18646,7 @@ var LoadingMessage = function LoadingMessage(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('loadingMessage', props),
     className: cx({
       'menu-notice': true,
@@ -18729,7 +18734,7 @@ var MenuPortal = /*#__PURE__*/function (_Component2) {
         rect: rect
       }; // same wrapper element whether fixed or portalled
 
-      var menuWrapper = jsx("div", _extends$9({
+      var menuWrapper = jsx("div", _extends$a({
         css: getStyles('menuPortal', state),
         className: cx({
           'menu-portal': true
@@ -18765,7 +18770,7 @@ var SelectContainer = function SelectContainer(props) {
       innerProps = props.innerProps,
       isDisabled = props.isDisabled,
       isRtl = props.isRtl;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('container', props),
     className: cx({
       '--is-disabled': isDisabled,
@@ -18800,7 +18805,7 @@ var ValueContainer = function ValueContainer(props) {
       isMulti = props.isMulti,
       getStyles = props.getStyles,
       hasValue = props.hasValue;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('valueContainer', props),
     className: cx({
       'value-container': true,
@@ -18826,7 +18831,7 @@ var IndicatorsContainer = function IndicatorsContainer(props) {
       cx = props.cx,
       innerProps = props.innerProps,
       getStyles = props.getStyles;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('indicatorsContainer', props),
     className: cx({
       indicators: true
@@ -18857,7 +18862,7 @@ var Svg = function Svg(_ref) {
   var size = _ref.size,
       props = _objectWithoutProperties(_ref, _excluded$2);
 
-  return jsx("svg", _extends$9({
+  return jsx("svg", _extends$a({
     height: size,
     width: size,
     viewBox: "0 0 20 20",
@@ -18868,14 +18873,14 @@ var Svg = function Svg(_ref) {
 };
 
 var CrossIcon = function CrossIcon(props) {
-  return jsx(Svg, _extends$9({
+  return jsx(Svg, _extends$a({
     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$9({
+  return jsx(Svg, _extends$a({
     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"
@@ -18908,7 +18913,7 @@ var DropdownIndicator = function DropdownIndicator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('dropdownIndicator', props),
     className: cx({
       indicator: true,
@@ -18923,7 +18928,7 @@ var ClearIndicator$1 = function ClearIndicator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('clearIndicator', props),
     className: cx({
       indicator: true,
@@ -18953,7 +18958,7 @@ var IndicatorSeparator = function IndicatorSeparator(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("span", _extends$9({}, innerProps, {
+  return jsx("span", _extends$a({}, innerProps, {
     css: getStyles('indicatorSeparator', props),
     className: cx({
       'indicator-separator': true
@@ -19008,7 +19013,7 @@ var LoadingIndicator = function LoadingIndicator(props) {
       getStyles = props.getStyles,
       innerProps = props.innerProps,
       isRtl = props.isRtl;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('loadingIndicator', props),
     className: cx({
       indicator: true,
@@ -19069,7 +19074,7 @@ var Control = function Control(props) {
       innerRef = props.innerRef,
       innerProps = props.innerProps,
       menuIsOpen = props.menuIsOpen;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     ref: innerRef,
     css: getStyles('control', props),
     className: cx({
@@ -19101,12 +19106,12 @@ var Group = function Group(props) {
       label = props.label,
       theme = props.theme,
       selectProps = props.selectProps;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('group', props),
     className: cx({
       group: true
     }, className)
-  }, innerProps), jsx(Heading, _extends$9({}, headingProps, {
+  }, innerProps), jsx(Heading, _extends$a({}, headingProps, {
     selectProps: selectProps,
     theme: theme,
     getStyles: getStyles,
@@ -19138,7 +19143,7 @@ var GroupHeading = function GroupHeading(props) {
       _cleanCommonProps.data;
       var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1$1);
 
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('groupHeading', props),
     className: cx({
       'group-heading': true
@@ -19214,7 +19219,7 @@ var Input = function Input(props) {
     }, className),
     css: getStyles('input', props),
     "data-value": value || ''
-  }, jsx("input", _extends$9({
+  }, jsx("input", _extends$a({
     className: cx({
       input: true
     }, inputClassName),
@@ -19284,7 +19289,7 @@ var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove$1(_ref5) {
   var children = _ref5.children,
       innerProps = _ref5.innerProps;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     role: "button"
   }, innerProps), children || jsx(CrossIcon, {
     size: 14
@@ -19373,7 +19378,7 @@ var Option$1 = function Option(props) {
       isSelected = props.isSelected,
       innerRef = props.innerRef,
       innerProps = props.innerProps;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('option', props),
     className: cx({
       option: true,
@@ -19405,7 +19410,7 @@ var Placeholder = function Placeholder(props) {
       cx = props.cx,
       getStyles = props.getStyles,
       innerProps = props.innerProps;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('placeholder', props),
     className: cx({
       placeholder: true
@@ -19438,7 +19443,7 @@ var SingleValue = function SingleValue(props) {
       getStyles = props.getStyles,
       isDisabled = props.isDisabled,
       innerProps = props.innerProps;
-  return jsx("div", _extends$9({
+  return jsx("div", _extends$a({
     css: getStyles('singleValue', props),
     className: cx({
       'single-value': true,
@@ -19686,7 +19691,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 
 var A11yText = function A11yText(props) {
-  return jsx("span", _extends$9({
+  return jsx("span", _extends$a({
     css: _ref
   }, props));
 };
@@ -20222,7 +20227,7 @@ function DummyInput(_ref) {
   var innerRef = _ref.innerRef,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return jsx("input", _extends$9({
+  return jsx("input", _extends$a({
     ref: innerRef
   }, props, {
     css: /*#__PURE__*/css$2({
@@ -21857,7 +21862,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$9({
+        return /*#__PURE__*/React__namespace.createElement(DummyInput, _extends$a({
           id: id,
           innerRef: this.getInputRef,
           onBlur: this.onInputBlur,
@@ -21871,7 +21876,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         }, ariaAttributes));
       }
 
-      return /*#__PURE__*/React__namespace.createElement(Input, _extends$9({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(Input, _extends$a({}, commonProps, {
         autoCapitalize: "none",
         autoComplete: "off",
         autoCorrect: "off",
@@ -21915,7 +21920,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           isFocused = _this$state5.isFocused;
 
       if (!this.hasValue() || !controlShouldRenderValue) {
-        return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends$9({}, commonProps, {
+        return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends$a({}, commonProps, {
           key: "placeholder",
           isDisabled: isDisabled,
           isFocused: isFocused,
@@ -21929,7 +21934,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$9({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(MultiValue, _extends$a({}, commonProps, {
             components: {
               Container: MultiValueContainer,
               Label: MultiValueLabel,
@@ -21961,7 +21966,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       }
 
       var singleValue = selectValue[0];
-      return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends$9({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends$a({}, commonProps, {
         data: singleValue,
         isDisabled: isDisabled
       }), this.formatOptionLabel(singleValue, 'value'));
@@ -21987,7 +21992,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends$9({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends$a({}, commonProps, {
         innerProps: innerProps,
         isFocused: isFocused
       }));
@@ -22007,7 +22012,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       var innerProps = {
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends$9({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends$a({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -22025,7 +22030,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$9({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(IndicatorSeparator, _extends$a({}, commonProps, {
         isDisabled: isDisabled,
         isFocused: isFocused
       }));
@@ -22045,7 +22050,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends$9({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends$a({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -22108,7 +22113,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           onMouseOver: onHover,
           tabIndex: -1
         };
-        return /*#__PURE__*/React__namespace.createElement(Option, _extends$9({}, commonProps, {
+        return /*#__PURE__*/React__namespace.createElement(Option, _extends$a({}, commonProps, {
           innerProps: innerProps,
           data: data,
           isDisabled: isDisabled,
@@ -22132,7 +22137,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$9({}, commonProps, {
+            return /*#__PURE__*/React__namespace.createElement(Group, _extends$a({}, commonProps, {
               key: groupId,
               data: _data,
               options: options,
@@ -22171,12 +22176,12 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
-      var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends$9({}, commonProps, menuPlacementProps), function (_ref4) {
+      var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends$a({}, 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$9({}, commonProps, menuPlacementProps, {
+        return /*#__PURE__*/React__namespace.createElement(Menu, _extends$a({}, commonProps, menuPlacementProps, {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
@@ -22191,7 +22196,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          return /*#__PURE__*/React__namespace.createElement(MenuList, _extends$9({}, commonProps, {
+          return /*#__PURE__*/React__namespace.createElement(MenuList, _extends$a({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
 
@@ -22206,7 +22211,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$9({}, commonProps, {
+      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React__namespace.createElement(MenuPortal, _extends$a({}, commonProps, {
         appendTo: menuPortalTarget,
         controlElement: this.controlRef,
         menuPlacement: menuPlacement,
@@ -22271,7 +22276,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$9({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(LiveRegion, _extends$a({}, commonProps, {
         id: this.getElementId('live-region'),
         ariaSelection: ariaSelection,
         focusedOption: focusedOption,
@@ -22297,7 +22302,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$9({}, commonProps, {
+      return /*#__PURE__*/React__namespace.createElement(SelectContainer, _extends$a({}, commonProps, {
         className: className,
         innerProps: {
           id: id,
@@ -22305,7 +22310,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         },
         isDisabled: isDisabled,
         isFocused: isFocused
-      }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends$9({}, commonProps, {
+      }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends$a({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,
@@ -22314,9 +22319,9 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         isFocused: isFocused,
         menuIsOpen: menuIsOpen
-      }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends$9({}, commonProps, {
+      }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends$a({}, commonProps, {
         isDisabled: isDisabled
-      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends$9({}, commonProps, {
+      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends$a({}, commonProps, {
         isDisabled: isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
@@ -22389,22 +22394,22 @@ Select$1.defaultProps = defaultProps;
 
 var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var baseSelectProps = useStateManager(props);
-  return /*#__PURE__*/React__namespace.createElement(Select$1, _extends$9({
+  return /*#__PURE__*/React__namespace.createElement(Select$1, _extends$a({
     ref: ref
   }, baseSelectProps));
 });
 
 var Select = StateManagedSelect;
 
-var _g$3;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+var _g$4;
+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 SvgIcAppstatusCancelled = function SvgIcAppstatusCancelled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 28 28",
     width: "1em",
     height: "1em"
-  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
     transform: "translate(2 2)"
@@ -22421,9 +22426,9 @@ var SvgIcAppstatusCancelled = function SvgIcAppstatusCancelled(props) {
 };
 
 var _path$4;
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 var SvgIcCheck = function SvgIcCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -22439,15 +22444,15 @@ var SvgIcCheck = function SvgIcCheck(props) {
   })));
 };
 
-var _g$2;
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+var _g$3;
+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 SvgIcErrorMedium = function SvgIcErrorMedium(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 21"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -22816,15 +22821,15 @@ exports.ConsequenceAction = void 0;
     ConsequenceAction["ALLOW_FOREVER"] = "ALLOW_FOREVER";
 })(exports.ConsequenceAction || (exports.ConsequenceAction = {}));
 
-var _g$1;
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+var _g$2;
+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 SvgIcInfoFilled = function SvgIcInfoFilled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 32 32"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -22899,9 +22904,9 @@ function DeleteComponent(_a) {
 }
 
 var _path$3;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 var SvgIcPencil = function SvgIcPencil(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20",
@@ -22917,9 +22922,9 @@ var SvgIcPencil = function SvgIcPencil(props) {
 };
 
 var _path$2, _path2, _path3;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 var SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     width: "1em",
     height: "1em",
     viewBox: "0 0 12 12",
@@ -22944,9 +22949,9 @@ var SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
 };
 
 var _path$1;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgIcMinus = function SvgIcMinus(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -22959,15 +22964,15 @@ var SvgIcMinus = function SvgIcMinus(props) {
   })));
 };
 
-var _g;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _g$1;
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgIcErrorExclamation = function SvgIcErrorExclamation(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -22980,9 +22985,9 @@ var SvgIcErrorExclamation = function SvgIcErrorExclamation(props) {
 };
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgIcEnter = function SvgIcEnter(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -23348,6 +23353,95 @@ var ResizableTextarea = function (_a) {
     return (jsxRuntime.jsx("textarea", __assign({ "data-testid": dataTestId, ref: function (el) { return (_textRef.current = el); }, value: text, placeholder: placeholder, className: "dc__resizable-textarea ".concat(className), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, style: { lineHeight: "".concat(lineHeight, "px"), padding: "".concat(padding, "px") }, spellCheck: false, disabled: disabled }, props)));
 };
 
+function useDebouncedEffect(callback, delay, deps) {
+    if (deps === void 0) { deps = []; }
+    // function will be executed only after the specified time once the user stops firing the event.
+    var firstUpdate = React.useRef(true);
+    React.useEffect(function () {
+        if (firstUpdate.current) {
+            firstUpdate.current = false;
+            return;
+        }
+        var handler = setTimeout(function () {
+            callback();
+        }, delay);
+        return function () {
+            clearTimeout(handler);
+        };
+    }, __spreadArray([delay], __read(deps), false));
+}
+
+var _g;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgIcErrorCross = function SvgIcErrorCross(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 32 32"
+  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    transform: "translate(2.667 2.667)",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 26.667,
+    height: 26.667,
+    className: "ic-error-cross_svg__fill-color",
+    fill: "#596168",
+    rx: 13.333
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#FFF",
+    fillRule: "nonzero",
+    d: "M8.62 8.62a1.332 1.332 0 0 1 1.885 0l2.828 2.827 2.829-2.828a1.334 1.334 0 0 1 1.777-.097l.108.097a1.333 1.333 0 0 1 0 1.886l-2.828 2.828 2.828 2.829c.486.486.519 1.254.098 1.777l-.098.108a1.332 1.332 0 0 1-1.885 0l-2.83-2.828-2.827 2.828a1.334 1.334 0 0 1-1.777.098l-.109-.098a1.333 1.333 0 0 1 0-1.885l2.828-2.83-2.828-2.827a1.334 1.334 0 0 1-.097-1.777z"
+  }))));
+};
+
+/**
+ * @param onSearch - Callback function to be called on search
+ * @param Icon - (Optional) Icon to be shown before the input
+ * @param iconClass - (Optional) Class for the icon
+ * @param children - (Optional) In case we want to add another button or any other element
+ * @param placeholder - (Optional) Placeholder for the input
+ * @param containerClass - (Optional) Class for the container
+ * @param inputClass - (Optional) Class for the input field
+ * @param debounceTimeout - (Optional) Timeout for the debounce with default value of 500ms
+ * @param clearSearch - (Optional) To clear the search text
+ * @param showClearIcon - (Optional) To show the clear icon default value is true
+ */
+function DebouncedSearch(_a) {
+    var onSearch = _a.onSearch, Icon = _a.Icon, children = _a.children, placeholder = _a.placeholder, _b = _a.containerClass, containerClass = _b === void 0 ? '' : _b, _c = _a.iconClass, iconClass = _c === void 0 ? '' : _c, _d = _a.inputClass, inputClass = _d === void 0 ? '' : _d, _e = _a.debounceTimeout, debounceTimeout = _e === void 0 ? 500 : _e, clearSearch = _a.clearSearch, _f = _a.showClearIcon, showClearIcon = _f === void 0 ? true : _f;
+    var _g = __read(React.useState(''), 2), searchText = _g[0], setSearchText = _g[1];
+    React.useEffect(function () {
+        setSearchText('');
+    }, [clearSearch]);
+    var handleSearchTextChange = function (e) {
+        setSearchText(e.target.value);
+    };
+    var handleClearSearch = function () {
+        setSearchText('');
+    };
+    useDebouncedEffect(function () { return onSearch(searchText); }, debounceTimeout, [searchText, onSearch]);
+    return (jsxRuntime.jsxs("div", __assign({ className: containerClass }, { children: [Icon && jsxRuntime.jsx(Icon, { className: iconClass }), jsxRuntime.jsx("input", { type: "text", className: inputClass, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Search', value: searchText, onChange: handleSearchTextChange, autoFocus: true, "data-testid": "debounced-search" }), showClearIcon && !!searchText && (jsxRuntime.jsx("button", __assign({ type: "button", className: "dc__outline-none-imp dc__no-border p-0 bc-n50 flex", onClick: handleClearSearch, "data-testid": "clear-search" }, { children: jsxRuntime.jsx(SvgIcErrorCross, { className: "icon-dim-20 icon-n6" }) }))), children] })));
+}
+
+// This is meant to be a reusable component that will provide a grid like dynamic layout where xs is the number of columns out of 12 that the item will take up
+function Grid(_a) {
+    var container = _a.container, _b = _a.spacing, spacing = _b === void 0 ? 0 : _b, item = _a.item, xs = _a.xs, _c = _a.containerClass, containerClass = _c === void 0 ? '' : _c, _d = _a.itemClass, itemClass = _d === void 0 ? '' : _d, children = _a.children;
+    var containerStyles = container ? { gap: spacing + 'px' } : {};
+    if (item) {
+        var getColumnWidth = function () {
+            var percentageWidth = (xs / 12) * 100;
+            // DONT CHANGE IT FROM CALC SINCE CALC CONVERTS TO PX which is needed to handle text overflow
+            return "calc(".concat(percentageWidth, "%)");
+        };
+        var itemStyles = {
+            flex: "1 1 ".concat(getColumnWidth()),
+        };
+        return (jsxRuntime.jsx("div", __assign({ className: "p-0 ".concat(itemClass), style: itemStyles }, { children: children })));
+    }
+    return (jsxRuntime.jsx("div", __assign({ className: "flex-wrap flexbox ".concat(container ? containerClass : ''), style: containerStyles }, { children: children })));
+}
+
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
 exports.BuildStageVariable = BuildStageVariable;
@@ -23361,6 +23455,7 @@ exports.CustomSelect = CustomSelect;
 exports.DEFAULT_TAG_DATA = DEFAULT_TAG_DATA;
 exports.DOCUMENTATION = DOCUMENTATION;
 exports.DOCUMENTATION_HOME_PAGE = DOCUMENTATION_HOME_PAGE;
+exports.DebouncedSearch = DebouncedSearch;
 exports.DeleteComponent = DeleteComponent;
 exports.DeleteDialog = DeleteDialog;
 exports.DetailsProgressing = DetailsProgressing;
@@ -23373,6 +23468,7 @@ exports.ErrorScreenManager = ErrorScreenManager;
 exports.ErrorScreenNotAuthorized = ErrorScreenNotAuthorized;
 exports.ForceDeleteDialog = ForceDeleteDialog;
 exports.GenericEmptyState = GenericEmptyState;
+exports.Grid = Grid;
 exports.Host = Host;
 exports.ImageTagButton = ImageTagButton;
 exports.ImageTagsContainer = ImageTagsContainer;
@@ -23416,6 +23512,7 @@ exports.TriggerTypeMap = TriggerTypeMap;
 exports.URLS = URLS;
 exports.VisibleModal = VisibleModal;
 exports.VisibleModal2 = VisibleModal2;
+exports.closeOnEscKeyPressed = closeOnEscKeyPressed;
 exports.createGitCommitUrl = createGitCommitUrl;
 exports.extractImage = extractImage;
 exports.get = get;

package/package.json

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

package/src/Assets/Icon/ic-error-cross.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(2.667 2.667)">
+            <rect width="26.667" height="26.667" class="fill-color" fill="#596168" rx="13.333"/>
+            <path fill="#FFF" fill-rule="nonzero" d="M8.62 8.62c.52-.521 1.364-.521 1.885 0l2.828 2.827 2.829-2.828a1.334 1.334 0 0 1 1.777-.097l.108.097c.521.521.521 1.365 0 1.886l-2.828 2.828 2.828 2.829c.486.486.519 1.254.098 1.777l-.098.108c-.52.521-1.365.521-1.885 0l-2.83-2.828-2.827 2.828a1.334 1.334 0 0 1-1.777.098l-.109-.098a1.333 1.333 0 0 1 0-1.885l2.828-2.83-2.828-2.827a1.334 1.334 0 0 1-.097-1.777z"/>
+        </g>
+    </g>
+</svg>

package/src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react'
+import { useDebouncedEffect } from './Utils'
+import { ReactComponent as ICClear } from '../../Assets/Icon/ic-error-cross.svg'
+import { DebouncedSearchProps } from './Types'
+
+/**
+ * @param onSearch - Callback function to be called on search
+ * @param Icon - (Optional) Icon to be shown before the input
+ * @param iconClass - (Optional) Class for the icon
+ * @param children - (Optional) In case we want to add another button or any other element
+ * @param placeholder - (Optional) Placeholder for the input
+ * @param containerClass - (Optional) Class for the container
+ * @param inputClass - (Optional) Class for the input field
+ * @param debounceTimeout - (Optional) Timeout for the debounce with default value of 500ms
+ * @param clearSearch - (Optional) To clear the search text
+ * @param showClearIcon - (Optional) To show the clear icon default value is true
+ */
+export default function DebouncedSearch({
+    onSearch,
+    Icon,
+    children,
+    placeholder,
+    containerClass = '',
+    iconClass = '',
+    inputClass = '',
+    debounceTimeout = 500,
+    clearSearch,
+    showClearIcon = true,
+}: DebouncedSearchProps) {
+    const [searchText, setSearchText] = useState<string>('')
+
+    useEffect(() => {
+        setSearchText('')
+    }, [clearSearch])
+
+    const handleSearchTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchText(e.target.value)
+    }
+
+    const handleClearSearch = () => {
+        setSearchText('')
+    }
+
+    useDebouncedEffect(() => onSearch(searchText), debounceTimeout, [searchText, onSearch])
+
+    return (
+        <div className={containerClass}>
+            {Icon && <Icon className={iconClass} />}
+
+            <input
+                type="text"
+                className={inputClass}
+                placeholder={placeholder ?? 'Search'}
+                value={searchText}
+                onChange={handleSearchTextChange}
+                autoFocus
+                data-testid="debounced-search"
+            />
+
+            {showClearIcon && !!searchText && (
+                <button
+                    type="button"
+                    className="dc__outline-none-imp dc__no-border p-0 bc-n50 flex"
+                    onClick={handleClearSearch}
+                    data-testid="clear-search"
+                >
+                    <ICClear className="icon-dim-20 icon-n6" />
+                </button>
+            )}
+
+            {/* In case we want to add another button or something  */}
+            {children}
+        </div>
+    )
+}

package/src/Common/DebouncedSearch/Types.ts

@@ -0,0 +1,12 @@
+export interface DebouncedSearchProps {
+    onSearch: (query: string) => void
+    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+    placeholder?: string
+    inputClass?: string
+    containerClass?: string
+    iconClass?: string
+    children?: React.ReactNode
+    debounceTimeout?: number
+    clearSearch?: boolean
+    showClearIcon?: boolean
+}

package/src/Common/DebouncedSearch/Utils.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react'
+
+export function useDebouncedEffect(callback, delay, deps: unknown[] = []) {
+    // function will be executed only after the specified time once the user stops firing the event.
+    const firstUpdate = useRef(true)
+    useEffect(() => {
+        if (firstUpdate.current) {
+            firstUpdate.current = false
+            return
+        }
+        const handler = setTimeout(() => {
+            callback()
+        }, delay)
+
+        return () => {
+            clearTimeout(handler)
+        }
+    }, [delay, ...deps])
+}

package/src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ReactComponent as ICClear } from '../../../../assets/icons/ic-error.svg'
+import DebouncedSearch from '../DebouncedSearch'
+
+jest.mock('../../helpers/Helpers', () => ({
+    useDebouncedEffect: jest.fn().mockImplementation((fn) => fn()),
+}))
+
+describe('When DebouncedSearch mounts', () => {
+    it('should have a input field', () => {
+        render(<DebouncedSearch onSearch={jest.fn()} />)
+        expect(screen.getByRole('textbox')).toBeTruthy()
+    })
+
+    it('should have a clear icon when clearSearch is true and user has typed something', () => {
+        const { getByTestId } = render(<DebouncedSearch onSearch={jest.fn()} clearSearch debounceTimeout={0} />)
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
+        expect(getByTestId('clear-search')).toBeTruthy()
+    })
+
+    it('should call onSearch when input value changes', () => {
+        const onSearch = jest.fn()
+        render(<DebouncedSearch onSearch={onSearch} debounceTimeout={0} />)
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
+        expect(onSearch).toHaveBeenCalled()
+    })
+
+    it('should clear input value when clear icon is clicked', () => {
+        const { container } = render(<DebouncedSearch onSearch={jest.fn()} clearSearch debounceTimeout={0} />)
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
+        const inputBar = container.querySelector('input')
+        expect(inputBar.value).toBe('test')
+        fireEvent.click(screen.getByRole('button'))
+        expect(inputBar.value).toBe('')
+    })
+
+    it('should have a placeholder', () => {
+        render(<DebouncedSearch onSearch={jest.fn()} placeholder="test" />)
+        expect(screen.getByPlaceholderText('test')).toBeTruthy()
+    })
+
+    it('should not show clear icon when showClearIcon is false', () => {
+        render(<DebouncedSearch onSearch={jest.fn()} showClearIcon={false} />)
+        expect(screen.queryByRole('button')).toBeNull()
+    })
+
+    it('should have a custom Icon', () => {
+        const { container } = render(<DebouncedSearch onSearch={jest.fn()} Icon={ICClear} iconClass="icon-class" />)
+        expect(container.querySelector('.icon-class')).toBeTruthy()
+    })
+
+    it('should support children', () => {
+        render(
+            <DebouncedSearch onSearch={jest.fn()}>
+                <div>test</div>
+            </DebouncedSearch>,
+        )
+        expect(screen.getByText('test')).toBeTruthy()
+    })
+})

package/src/Common/Grid/Grid.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { GridProps } from './types'
+
+// This is meant to be a reusable component that will provide a grid like dynamic layout where xs is the number of columns out of 12 that the item will take up
+export default function Grid({
+    container,
+    spacing = 0,
+    item,
+    xs,
+    containerClass = '',
+    itemClass = '',
+    children,
+}: GridProps) {
+    const containerStyles = container ? { gap: spacing + 'px' } : {}
+
+    if (item) {
+        const getColumnWidth = () => {
+            const percentageWidth = (xs / 12) * 100
+            // DONT CHANGE IT FROM CALC SINCE CALC CONVERTS TO PX which is needed to handle text overflow
+            return `calc(${percentageWidth}%)`
+        }
+
+        const itemStyles = {
+            flex: `1 1 ${getColumnWidth()}`,
+        }
+
+        return (
+            <div className={`p-0 ${itemClass}`} style={itemStyles}>
+                {children}
+            </div>
+        )
+    }
+
+    return (
+        <div className={`flex-wrap flexbox ${container ? containerClass : ''}`} style={containerStyles}>
+            {children}
+        </div>
+    )
+}

package/src/Common/Grid/types.ts

@@ -0,0 +1,9 @@
+export interface GridProps {
+    container?: boolean
+    spacing?: number
+    item?: boolean
+    xs?: number
+    containerClass?: string
+    itemClass?: string
+    children?: React.ReactNode
+}

package/src/Common/Helper.tsx

@@ -369,3 +369,8 @@ export function useSearchString(): UseSearchString {
 }
 
 
+export const closeOnEscKeyPressed = (e: any, actionClose: () => void) => {
+    if (e.keyCode === 27 || e.key === 'Escape')  {
+        actionClose()
+    }
+}

package/src/Common/index.ts

@@ -34,4 +34,6 @@ export * from './Policy.Types'
 export { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent'
 export * from './ImageTags'
 export * from './ImageTags.Types'
-export * from './ResizableTextarea'
+export * from './ResizableTextarea'
+export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch'
+export { default as Grid } from './Grid/Grid'