@itilite/iui-user-management 0.0.6 → 0.0.8

package/dist/index.css

@@ -357,6 +357,23 @@
   padding: 10px;
   border-radius: 20px;
 }
+
+._2ZeWp {
+  padding: 45px 40px;
+}
+
+._2Iuy1 {
+  margin-left: 10px;
+}
+._2Iuy1:hover {
+  background-color: rgba(229, 228, 228, 0.231372549) !important;
+}
+
+._3NJWF {
+  background-color: #ec6131;
+  border-radius: 20px;
+  color: white;
+}
 ._2LqsB {
   background-color: #ffffff;
 }
@@ -994,4 +1011,27 @@
   border-radius: 6px;
   padding: 16px;
   word-break: break-word;
+}
+
+._20Qv9 {
+  width: 435px;
+}
+
+._36au5 {
+  padding: 45px 40px;
+}
+
+._tULrl {
+  font-weight: normal;
+  color: #6b7280;
+  font-family: "Inter", sans-serif;
+  font-size: 0.875rem;
+}
+
+._3W_ZV {
+  font-weight: 500;
+  color: #374151;
+  font-family: "Inter", sans-serif;
+  font-size: 1rem;
+  line-height: 150%;
 }

package/dist/index.js

@@ -1182,7 +1182,7 @@ function GetInputType(_ref) {
       }));
 
     case 'checkbox':
-      return /*#__PURE__*/React__default.createElement(iuistyles.IUICheckBox, {
+      return /*#__PURE__*/React__default.createElement(iuistyles.IUICheckboxButton, {
         label: _p.label,
         isCheckbox: true,
         customHandler: customHandler,
@@ -2899,12 +2899,12 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
   }), !isProfile && fieldsInfo.length > 0 && /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Edit approver labels",
     type: "text",
-    iconComponent: /*#__PURE__*/React__default.createElement(PencilIcon, {
+    startIcon: /*#__PURE__*/React__default.createElement(PencilIcon, {
       width: "13.59",
       height: "13.59",
       color: "#EC5D25"
     }),
-    onClickHandler: openEditAproverModal
+    onClick: openEditAproverModal
   })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
     item: true,
     sm: 12,
@@ -2949,12 +2949,12 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: fieldsInfo.length ? 'Add another approver' : 'Add an approver',
     type: "text",
-    iconComponent: /*#__PURE__*/React__default.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
-    onClickHandler: addFields
+    onClick: addFields
   })) : null, type === 'travel' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, fieldsInfo.length || !isProfile ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
     item: true,
     sm: 6,
@@ -3237,13 +3237,13 @@ var CustomFields = function CustomFields(_ref) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Add custom field",
     type: "text",
-    iconComponent: /*#__PURE__*/React__default.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
     className: styles.paddingTop,
-    onClickHandler: openCustomFieldModal
+    onClick: openCustomFieldModal
   }))), customFields.length > 0 && customFields.map(function (p, i) {
     if (i >= maxCustomAttributes) {
       return null;
@@ -3271,13 +3271,13 @@ var CustomFields = function CustomFields(_ref) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Add custom field",
     type: "text",
-    iconComponent: /*#__PURE__*/React__default.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
     className: styles.paddingTop,
-    onClickHandler: openCustomFieldModal
+    onClick: openCustomFieldModal
   }))))), /*#__PURE__*/React__default.createElement(AddCustomFieldModal, {
     isOpenModal: isOpenModal,
     closeModalHandler: function closeModalHandler() {
@@ -4240,25 +4240,25 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Add airline",
     type: "text",
-    iconComponent: /*#__PURE__*/React__default.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
     className: styles.paddingTop,
-    onClickHandler: function onClickHandler(e) {
+    onClick: function onClick(e) {
       return addMemInfoInput('flight');
     }
   }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Add hotel",
     type: "text",
-    iconComponent: /*#__PURE__*/React__default.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
     className: styles.paddingTop,
-    onClickHandler: function onClickHandler(e) {
+    onClick: function onClick(e) {
       return addMemInfoInput('hotel');
     }
   }))), membershipInfoInput.length > 0 && membershipInfoInput.map(function (val, index) {
@@ -4321,25 +4321,25 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Add airline",
     type: "text",
-    iconComponent: /*#__PURE__*/React__default.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
     className: styles.paddingTop,
-    onClickHandler: function onClickHandler(e) {
+    onClick: function onClick(e) {
       return addMemInfoInput('flight');
     }
   }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Add hotel",
     type: "text",
-    iconComponent: /*#__PURE__*/React__default.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
     className: styles.paddingTop,
-    onClickHandler: function onClickHandler(e) {
+    onClick: function onClick(e) {
       return addMemInfoInput('hotel');
     }
   })))))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
@@ -4428,7 +4428,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
   }))))));
 };
 
-var styles$3 = {"root":"_b_muK","minWidth":"_3OQXs","bullet":"_1Q5vL","pos":"_6wGWA","cardHeader":"_SWCfJ"};
+var styles$3 = {"root":"_b_muK","minWidth":"_3OQXs","bullet":"_1Q5vL","pos":"_6wGWA","cardHeader":"_SWCfJ","pageHeader":"_2ZeWp","buttonHover":"_2Iuy1","cardHeaderBackground":"_3NJWF"};
 
 var VerificationError = function VerificationError(_ref) {
   var config = _ref.config,
@@ -4438,8 +4438,11 @@ var VerificationError = function VerificationError(_ref) {
       errMsg = _ref$errMsg === void 0 ? "You don't have valid role or Permission to access this page" : _ref$errMsg;
   var history = reactRouterDom.useHistory();
   return /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    component: "div"
+    component: "div",
+    className: styles$3.pageHeader
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUICard, {
+    headerComponentTitle: title,
+    cardHeaderClassName: styles$3.cardHeaderBackground,
     headerComponent: /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
       gutterBottom: true,
       variant: "h4",
@@ -4447,11 +4450,13 @@ var VerificationError = function VerificationError(_ref) {
     }, title),
     description: errMsg,
     actionComponent: /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+      className: styles$3.buttonHover,
+      buttonText: "Back to Homepage",
       size: "small",
       onClick: function onClick() {
         return history.push(config.routes.fallbackUrl);
       }
-    }, "Back to Homepage")
+    })
   }));
 };
 
@@ -5891,14 +5896,14 @@ var UserAddEdit = function UserAddEdit(props) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Cancel",
     type: "outlined",
-    onClickHandler: handleCancelNavigation
+    onClick: handleCancelNavigation
   })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
     className: "pageHeader--button-single button-right"
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Save",
     type: "contained",
-    onClickHandler: formSubmitHandler,
+    onClick: formSubmitHandler,
     disabled: isPageLoading || productAccess.travel === false && productAccess.expense === false || !!doesFormHasError()
   }))))), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
@@ -6586,7 +6591,7 @@ var BulkUploadModal = function BulkUploadModal(props) {
   }, "Use this template with predefined columns and add users to your team")), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     type: "text",
     buttonText: "Download template",
-    onClickHandler: downloadTemplate,
+    onClick: downloadTemplate,
     isLink: true
   })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
     className: clsx(styles$5.dividerColor, styles$5.w100)
@@ -6825,8 +6830,8 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   };
 
   var CustomStepIcon = function CustomStepIcon(step) {
-    if ((importStatus === 1 || importStatus === 2 || importStatus === 4) && step.step === Number(activeStep)) {
-      return /*#__PURE__*/React__default.createElement(iuistyles.IUIRadio, {
+    if ((importStatus === 1 || importStatus === 2 || importStatus === 4) && step === Number(activeStep)) {
+      return /*#__PURE__*/React__default.createElement(iuistyles.IUIPrimaryRadio, {
         checked: true,
         className: clsx(styles$4.customRadioEach),
         size: "small",
@@ -6834,16 +6839,16 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
       });
     }
 
-    if ((importStatus === 1 || importStatus === 2 || importStatus === 4) && step.step !== Number(activeStep)) {
-      return /*#__PURE__*/React__default.createElement(iuistyles.IUIRadio, {
+    if ((importStatus === 1 || importStatus === 2 || importStatus === 4) && step !== Number(activeStep)) {
+      return /*#__PURE__*/React__default.createElement(iuistyles.IUIPrimaryRadio, {
         className: clsx(styles$4.customRadioEach),
         size: "small",
         disabled: true
       });
     }
 
-    if (importStatus === 3 && step.step === Number(activeStep)) {
-      return /*#__PURE__*/React__default.createElement(iuistyles.IUIRadio, {
+    if (importStatus === 3 && step === Number(activeStep)) {
+      return /*#__PURE__*/React__default.createElement(iuistyles.IUIPrimaryRadio, {
         checked: true,
         className: clsx(styles$4.customRadioEach),
         size: "small",
@@ -6851,7 +6856,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
       });
     }
 
-    if (importStatus === 3 && step.step !== Number(activeStep)) {
+    if (importStatus === 3 && step !== Number(activeStep)) {
       return /*#__PURE__*/React__default.createElement(CheckCircleIcon, {
         width: "20",
         height: "20",
@@ -6956,7 +6961,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     activeStep: activeStep,
     nonLinear: true,
     className: styles$4.stepper,
-    icon: /*#__PURE__*/React__default.createElement(CustomStepIcon, null),
+    CustomStepIcon: CustomStepIcon,
     steps: steps
   }), importStatus === 1 && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     display: "flex",
@@ -7105,13 +7110,13 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Download invalid records",
     type: "text",
-    onClickHandler: function onClickHandler() {
+    onClick: function onClick() {
       return handleDownloadRecords('failure');
     }
   }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Upload again",
     type: "text",
-    onClickHandler: importUserHandler
+    onClick: importUserHandler
   }))), (+userBulkImportInfo.success > 0 || +userBulkImportInfo.exist_users > 0) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
     className: styles$4.divider
   }), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, null, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
@@ -7136,7 +7141,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIFormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(iuistyles.IUICheckBox, {
       handleCheckBoxHandler: handleExistingUserUpdation,
-      checkboxFlag: canUpdateExistingUsers
+      checked: canUpdateExistingUsers
     }),
     label: "Update any existing users",
     className: clsx(styles$4.checkboxlabel, (_clsx5 = {}, _clsx5[styles$4.disabledText] = +userBulkImportInfo.exist_users === 0, _clsx5)),
@@ -7150,7 +7155,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: importStatus !== 1 ? 'Import ' + handleImportNumbers() : 'Importing ' + handleImportNumbers(),
     type: "contained",
-    onClickHandler: handleImportUploadRecords,
+    onClick: handleImportUploadRecords,
     disabled: importStatus === 1
   }))))), importStatus === 3 && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     className: styles$4.completedContainer
@@ -7167,7 +7172,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, userBulkImportInfo.total_records, /*#__PURE__*/React__default.createElement("span", null, ' ', +userBulkImportInfo.total_records === 1 ? 'total record' : 'total records', ' ')), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Download records",
     type: "text",
-    onClickHandler: function onClickHandler() {
+    onClick: function onClick() {
       return handleDownloadRecords('total');
     }
   })), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, null), +userBulkImportInfo.success > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
@@ -7179,7 +7184,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, userBulkImportInfo.success, ' ', /*#__PURE__*/React__default.createElement("span", null, ' ', +userBulkImportInfo.success === 1 ? 'new user added ' : 'new users added ', ' ')), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Download records",
     type: "text",
-    onClickHandler: function onClickHandler() {
+    onClick: function onClick() {
       return handleDownloadRecords('success');
     }
   })), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, null)), +userBulkImportInfo.exist_users > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
@@ -7191,7 +7196,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, userBulkImportInfo.exist_users, ' ', /*#__PURE__*/React__default.createElement("span", null, ' ', +userBulkImportInfo.exist_users === 1 ? 'existing user updated' : 'existing users updated', ' ')), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Download records",
     type: "text",
-    onClickHandler: function onClickHandler() {
+    onClick: function onClick() {
       return handleDownloadRecords('exist');
     }
   })), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, null)), +userBulkImportInfo.failure > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
@@ -7203,7 +7208,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, userBulkImportInfo.failure, ' ', /*#__PURE__*/React__default.createElement("span", null, ' ', +userBulkImportInfo.failure === 1 ? 'invalid record' : 'invalid records', ' ')), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Download records",
     type: "text",
-    onClickHandler: function onClickHandler() {
+    onClick: function onClick() {
       return handleDownloadRecords('failure');
     }
   })), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, null))))), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
@@ -7795,8 +7800,8 @@ var StickyHeadTable = function StickyHeadTable(props) {
       _props$handleSelectAl = props.handleSelectAllClick,
       handleSelectAllClick = _props$handleSelectAl === void 0 ? function () {} : _props$handleSelectAl,
       selected = props.selected,
-      _props$handleSingleCh = props.handleSingleCheckIUIBoxClick,
-      handleSingleCheckIUIBoxClick = _props$handleSingleCh === void 0 ? function () {} : _props$handleSingleCh,
+      _props$handleSingleCh = props.handleSingleCheckBoxClick,
+      handleSingleCheckBoxClick = _props$handleSingleCh === void 0 ? function () {} : _props$handleSingleCh,
       orderBy = props.orderBy,
       order = props.order,
       _props$onRequestSort = props.onRequestSort,
@@ -7924,7 +7929,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
     cell: function cell(row) {
       return /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
         buttonText: "Edit",
-        onClickHandler: function onClickHandler() {
+        onClick: function onClick() {
           return onEditHandler(row.id);
         }
       });
@@ -7945,7 +7950,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
     rowsPerPage: rowsPerPage,
     handleSelectAllClick: handleSelectAllClick,
     selected: selected,
-    handleSingleCheckIUIBoxClick: handleSingleCheckIUIBoxClick,
+    handleSingleCheckBoxClick: handleSingleCheckBoxClick,
     orderBy: orderBy,
     order: order,
     searchHide: false,
@@ -7953,7 +7958,8 @@ var StickyHeadTable = function StickyHeadTable(props) {
     onRequestSort: onRequestSort,
     onSearchHandler: onSearchHandler,
     isDataFetching: isDataFetching,
-    disableRowCheckbox: disableRowCheckbox
+    disableRowCheckbox: disableRowCheckbox,
+    searchBoxWidth: "400px"
   });
 };
 
@@ -8108,9 +8114,11 @@ var UserList = function UserList(_ref) {
     setSearchingChangeTemp(!isSearchingChangeTemp);
   };
 
-  var handleSingleCheckIUIBoxClick = function handleSingleCheckIUIBoxClick(event, id, page) {
+  var handleSingleCheckBoxClick = function handleSingleCheckBoxClick(event, id, page) {
     var _extends4;
 
+    console.log('test');
+
     var selectedTemp = _extends({}, selected);
 
     if (!(page in selectedTemp)) {
@@ -8313,11 +8321,11 @@ var UserList = function UserList(_ref) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Export all users",
     type: "outlined",
-    iconComponent: /*#__PURE__*/React__default.createElement(ExportIcon, {
+    startIcon: /*#__PURE__*/React__default.createElement(ExportIcon, {
       width: "12",
       height: "12"
     }),
-    onClickHandler: handleExportUsers
+    onClick: handleExportUsers
   })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
     className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
@@ -8331,12 +8339,12 @@ var UserList = function UserList(_ref) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Add user",
     type: "contained",
-    iconComponent: /*#__PURE__*/React__default.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
       width: "9",
       height: "9",
       color: "white"
     }),
-    onClickHandler: handleAddPageNavigation
+    onClick: handleAddPageNavigation
   })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
     display: "flex",
@@ -8353,7 +8361,7 @@ var UserList = function UserList(_ref) {
     handleActiveUser: handleActiveUser,
     handleSelectAllClick: handleSelectAllClick,
     selected: selected,
-    handleSingleCheckIUIBoxClick: handleSingleCheckIUIBoxClick,
+    handleSingleCheckBoxClick: handleSingleCheckBoxClick,
     orderBy: orderBy,
     order: order,
     onRequestSort: onRequestSort,
@@ -8417,40 +8425,53 @@ function Header(props) {
     component: "div",
     display: "flex",
     justifyContent: "space-between",
-    alignItems: "center"
+    alignItems: "center",
+    flexWrap: "wrap",
+    style: {
+      gap: '1rem'
+    }
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    component: "div",
+    display: "flex",
+    flexDirection: "column",
+    style: {
+      gap: '0.5rem'
+    }
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    component: "div"
+    component: "div",
+    className: styles$5.headingWrapper
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
     variant: "h3",
     className: clsx(styles$5.heading, styles$5.headingLarge)
   }, isILadmin === 1 && companyName + " - ", " ", headingName)), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    component: "div",
+    className: styles$5.headingWrapper
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
+    variant: "body2",
+    className: clsx(styles$5.description)
+  }, subHeading))), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
     className: styles$5.buttonWrapper,
     display: "flex",
     justifyContent: "space-between",
-    alignItems: "center"
+    alignItems: "center",
+    alignSelf: "flex-start"
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
     className: "pageHeader--button-single button-right"
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     type: "contained",
     buttonText: "+ Add " + name.toLowerCase(),
-    onClickHandler: HeaderButton
+    onClick: HeaderButton
   })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center"
-  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    component: "div",
-    className: styles$5.headingWrapper
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
-    variant: "body2",
-    className: clsx(styles$5.description)
-  }, subHeading))));
+  })));
 }
 
-var styles$7 = {"sidebar__container":"_1EFxC","sidebar__wrapper":"_3Mk3_","sidebar__navlinks":"_29KVG","sidebar__navlinks-title":"_2Eg7m","MuiListItem-button":"_3yWwI","Mui-selected":"_3Ou88","buttonWidth":"_13tv0","onBoardText":"_HUoW-","iconStyle":"_3k0Fb","iconLayout":"_v3GT2","baseAlert":"_12zY5"};
+var styles$7 = {"sidebar__container":"_1EFxC","sidebar__wrapper":"_3Mk3_","sidebar__navlinks":"_29KVG","sidebar__navlinks-title":"_2Eg7m","MuiListItem-button":"_3yWwI","Mui-selected":"_3Ou88","buttonWidth":"_13tv0","onBoardText":"_HUoW-","iconStyle":"_3k0Fb","iconLayout":"_v3GT2","baseAlert":"_12zY5","headingWrapper":"_20Qv9","pageHeader":"_36au5","description":"_tULrl","headerText":"_3W_ZV"};
 
 function Listview(_ref) {
   var data = _ref.data,
@@ -8509,19 +8530,19 @@ function Listview(_ref) {
       }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
         buttonText: "Edit",
         className: styles$7.buttonWidth,
-        onClickHandler: function onClickHandler() {
+        onClick: function onClick() {
           return handleEditDialog(row);
         }
       }), row.no_of_users > 0 ? /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
         buttonText: "Delete",
         className: styles$7.buttonWidth,
-        onClickHandler: function onClickHandler() {
+        onClick: function onClick() {
           return handleDeleteDialog(row, true);
         }
       }) : /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
         buttonText: "Delete",
         className: styles$7.buttonWidth,
-        onClickHandler: function onClickHandler() {
+        onClick: function onClick() {
           return handleDeleteDialog(row, false);
         }
       }));
@@ -9227,12 +9248,12 @@ var PageHeader = function PageHeader() {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Add custom field",
     type: "contained",
-    iconComponent: /*#__PURE__*/React__default.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
       width: "9",
       height: "9",
       color: "white"
     }),
-    onClickHandler: handleAddCustomField
+    onClick: handleAddCustomField
   })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
     display: "flex",
@@ -9299,7 +9320,7 @@ function CustomFieldsTable() {
       className: styles$6.actionButtons
     }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
       buttonText: "Edit",
-      onClickHandler: function onClickHandler() {
+      onClick: function onClick() {
         return handleEdit(row);
       }
     })));