@itilite/iui-user-management 0.4.33 → 0.4.35

package/dist/index.js

@@ -4293,8 +4293,49 @@ function withStore(Component) {
   return WrappedComponent;
 }
 
+var ExpandMoreIcon = function ExpandMoreIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.width,
+    height: props.height,
+    fill: "none",
+    viewBox: "0 0 12 7"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#6B7280",
+    d: "M.293.294a1 1 0 011.414 0L6 4.587 10.293.294a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z"
+  }));
+};
+
+var ExpandLessIcon = function ExpandLessIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.width,
+    height: props.height,
+    fill: "none",
+    viewBox: "0 0 10 6"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#6B7280",
+    d: "M.293.293a1 1 0 011.414 0L5 3.586 8.293.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+  }));
+};
+
+var CrossIcon = function CrossIcon(props) {
+  var _props$color = props.color,
+    color = _props$color === void 0 ? '#6B7280' : _props$color;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.width,
+    height: props.height,
+    fill: "none",
+    viewBox: "0 0 14 14"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: color,
+    d: "M.293.292a1 1 0 011.414 0L7 5.585 12.293.292a1 1 0 111.414 1.415L8.414 7l5.293 5.292a1 1 0 01-1.414 1.415L7 8.414l-5.293 5.293a1 1 0 01-1.414-1.415L5.586 7 .293 1.707a1 1 0 010-1.415z"
+  }));
+};
+
 var AdditionalInfo = function AdditionalInfo(_ref) {
-  var _clsx2;
+  var _clsx;
   var membershipInfoInput = _ref.membershipInfoInput,
     onMemInfoInputChange = _ref.onMemInfoInputChange,
     addMemInfoInput = _ref.addMemInfoInput,
@@ -4323,10 +4364,6 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
       setAdditionalInfoFlag(defaultExpand ? panel : false);
     };
   };
-  var ExpandMore = iuistyles.icons.ExpandMore,
-    ExpandLess = iuistyles.icons.ExpandLess,
-    Add = iuistyles.icons.Add,
-    Cross = iuistyles.icons.Cross;
   var _useSelector = reactRedux.useSelector(function (state) {
       return state.userAddEdit.renderFields;
     }),
@@ -4384,316 +4421,312 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     }
     return null;
   };
-  var getAccordianSummary = function getAccordianSummary() {
+  return /*#__PURE__*/React__default.createElement(iuistyles.IUIAccordion, {
+    expanded: defaultExpand === 'open',
+    onChange: handleChange('open'),
+    className: styles.additionalInfoContainer
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIAccordionSummary, {
+    expandIcon: defaultExpand ? /*#__PURE__*/React__default.createElement(ExpandLessIcon, {
+      width: "12px",
+      height: "7px"
+    }) : /*#__PURE__*/React__default.createElement(ExpandMoreIcon, {
+      width: "12px",
+      height: "7px"
+    }),
+    "aria-controls": "panel1bh-content",
+    id: "panel1bh-header",
+    className: clsx(styles.additionalInfoTitle, (_clsx = {}, _clsx[styles.expandIconAlign] = defaultExpand === 'open', _clsx))
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: clsx(styles.product_info, styles.sectionWrapper)
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 4,
+    className: styles.titleContainer
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+    label: "Additional information",
+    headerType: true,
+    description: "Passport, Membership, Travel preferences..."
+  })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIAccordionDetails, {
+    className: styles.detailsContainer
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: clsx(styles.work_info, styles.sectionWrapper)
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 4
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+    label: "Passport information",
+    headerType: true
+  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 8,
+    lg: 8,
+    xl: 6
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
+  }, passportInfo.map(function (p, i) {
+    var _clsx2;
+    if (!p.visibility) {
+      return null;
+    }
     return /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      container: true,
-      className: clsx(styles.product_info, styles.sectionWrapper)
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
       item: true,
       sm: 12,
-      md: 4,
-      className: styles.titleContainer
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
-      label: "Additional information",
-      headerType: true,
-      description: "Passport, Membership, Travel preferences..."
-    })));
-  };
-  var getAccordianDetails = function getAccordianDetails() {
-    return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      container: true,
-      className: clsx(styles.work_info, styles.sectionWrapper)
+      md: 12,
+      lg: p.type === 'datepicker' ? 2 : p.fullWidth ? 12 : 6,
+      xl: p.type === 'datepicker' ? 2 : p.fullWidth ? 12 : 6,
+      key: i,
+      className: clsx(styles.margin, (_clsx2 = {}, _clsx2[styles.minGridWidth] = p.type === 'datepicker', _clsx2))
+    }, /*#__PURE__*/React__default.createElement(GetInputType, {
+      _p: p,
+      inputState: passportInfoInput,
+      onValueChange: onPassportInfoInputChange,
+      dropdownList: dropdownList,
+      errorArray: errorArray,
+      errorMsg: errorMsgs[p.name],
+      dateFormat: dateFormat
+    }));
+  })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
+    className: styles.dividerColor
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: clsx(styles.personal_info, styles.sectionWrapper)
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 4
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+    label: "Membership information",
+    headerType: true,
+    description: "You can add up to " + maxMembershipInput + " membership details"
+  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 8,
+    lg: 8,
+    xl: 6
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: styles.formFieldsWrapper
+  }, membershipInfoInput.length === 0 && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    className: styles.emptyFieldContainer
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
+    className: styles.emptyFieldDescription
+  }, "No membership details added yet"), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    className: clsx(styles.emptyFieldBtnContainer, styles.rowGap),
+    display: "flex"
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+    buttonText: "Add airline",
+    type: "text",
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
+      width: "10",
+      height: "10",
+      color: "#EC5D25"
+    }),
+    className: styles.paddingTop,
+    onClick: function onClick(e) {
+      return addMemInfoInput('flight');
+    }
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+    buttonText: "Add hotel",
+    type: "text",
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
+      width: "10",
+      height: "10",
+      color: "#EC5D25"
+    }),
+    className: styles.paddingTop,
+    onClick: function onClick(e) {
+      return addMemInfoInput('hotel');
+    }
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+    buttonText: "Add car rental",
+    type: "text",
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
+      width: "10",
+      height: "10",
+      color: "#EC5D25"
+    }),
+    className: styles.paddingTop,
+    onClick: function onClick(e) {
+      return addMemInfoInput('rental_car');
+    }
+  }))), membershipInfoInput.length > 0 && membershipInfoInput.map(function (val, index) {
+    if (index >= maxMembershipInput) {
+      return null;
+    }
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: index.toString()
     }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
       item: true,
-      sm: 12,
-      md: 4
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
-      label: "Passport information",
-      headerType: true
-    })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      item: true,
-      sm: 12,
       md: 8,
-      lg: 8,
+      lg: 6,
       xl: 6
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      container: true,
-      className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
-    }, passportInfo.map(function (p, i) {
-      var _clsx;
-      if (!p.visibility) {
-        return null;
-      }
-      return /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-        item: true,
-        sm: 12,
-        md: 12,
-        lg: p.type === 'datepicker' ? 2 : p.fullWidth ? 12 : 6,
-        xl: p.type === 'datepicker' ? 2 : p.fullWidth ? 12 : 6,
-        key: i,
-        className: clsx(styles.margin, (_clsx = {}, _clsx[styles.minGridWidth] = p.type === 'datepicker', _clsx))
-      }, /*#__PURE__*/React__default.createElement(GetInputType, {
-        _p: p,
-        inputState: passportInfoInput,
-        onValueChange: onPassportInfoInputChange,
-        dropdownList: dropdownList,
-        errorArray: errorArray,
-        errorMsg: errorMsgs[p.name],
-        dateFormat: dateFormat
-      }));
-    })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
-      className: styles.dividerColor
-    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      container: true,
-      className: clsx(styles.personal_info, styles.sectionWrapper)
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      item: true,
-      sm: 12,
-      md: 4
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
-      label: "Membership information",
-      headerType: true,
-      description: "You can add up to " + maxMembershipInput + " membership details"
+    }, /*#__PURE__*/React__default.createElement(MembershipField, {
+      val: val,
+      index: index,
+      key: index.toString()
     })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
       item: true,
-      sm: 12,
       md: 8,
-      lg: 8,
+      lg: 6,
       xl: 6
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      container: true,
-      className: styles.formFieldsWrapper
-    }, membershipInfoInput.length === 0 && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-      className: styles.emptyFieldContainer
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
-      className: styles.emptyFieldDescription
-    }, "No membership details added yet"), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-      className: clsx(styles.emptyFieldBtnContainer, styles.rowGap),
-      display: "flex"
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-      buttonText: "Add airline",
-      type: "text",
-      startIcon: /*#__PURE__*/React__default.createElement(iuistyles.icons.Add, {
-        width: "10",
-        height: "10",
-        color: "#EC5D25"
-      }),
-      className: styles.paddingTop,
-      onClick: function onClick(e) {
-        return addMemInfoInput('flight');
-      }
-    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-      buttonText: "Add hotel",
-      type: "text",
-      startIcon: /*#__PURE__*/React__default.createElement(iuistyles.icons.Add, {
-        width: "10",
-        height: "10",
-        color: "#EC5D25"
-      }),
-      className: styles.paddingTop,
-      onClick: function onClick(e) {
-        return addMemInfoInput('hotel');
-      }
-    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-      buttonText: "Add car rental",
-      type: "text",
-      startIcon: /*#__PURE__*/React__default.createElement(iuistyles.icons.Add, {
-        width: "10",
-        height: "10",
-        color: "#EC5D25"
-      }),
-      className: styles.paddingTop,
-      onClick: function onClick(e) {
-        return addMemInfoInput('rental_car');
-      }
-    }))), membershipInfoInput.length > 0 && membershipInfoInput.map(function (val, index) {
-      if (index >= maxMembershipInput) {
-        return null;
-      }
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-        key: index.toString()
-      }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-        item: true,
-        md: 8,
-        lg: 6,
-        xl: 6
-      }, /*#__PURE__*/React__default.createElement(MembershipField, {
-        val: val,
-        index: index,
-        key: index.toString()
-      })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-        item: true,
-        md: 8,
-        lg: 6,
-        xl: 6
-      }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-        component: "div",
-        display: "flex"
-      }, /*#__PURE__*/React__default.createElement(iuistyles.IUIInput, {
-        label: "Membership number",
-        placeholder: "Enter membership number",
-        fullwidth: false,
-        defaultValue: val.number,
-        onValueChange: function onValueChange(_ref6) {
-          var _value = _ref6._value;
-          return onMemInfoInputChange(index, 'number', _value);
-        }
-      }), /*#__PURE__*/React__default.createElement(iuistyles.IUIIconButton, {
-        style: {
-          marginTop: '30px'
-        },
-        disableRipple: true,
-        onClick: function onClick() {
-          return handleRemoveMemFields(index);
-        },
-        className: styles.backGrdColorOnHover
-      }, /*#__PURE__*/React__default.createElement(Cross, {
-        width: "14",
-        height: "14"
-      })))));
-    }), membershipInfoInput.length < maxMembershipInput && membershipInfoInput.length > 0 && /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      item: true,
-      md: 8,
-      lg: 8,
-      xl: 8
     }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-      className: clsx(styles.emptyFieldBtnContainer, styles.rowGap),
+      component: "div",
       display: "flex"
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-      buttonText: "Add airline",
-      type: "text",
-      startIcon: /*#__PURE__*/React__default.createElement(Add, {
-        width: "10",
-        height: "10",
-        color: "#EC5D25"
-      }),
-      className: styles.paddingTop,
-      onClick: function onClick(e) {
-        return addMemInfoInput('flight');
-      }
-    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-      buttonText: "Add hotel",
-      type: "text",
-      startIcon: /*#__PURE__*/React__default.createElement(Add, {
-        width: "10",
-        height: "10",
-        color: "#EC5D25"
-      }),
-      className: styles.paddingTop,
-      onClick: function onClick(e) {
-        return addMemInfoInput('hotel');
-      }
-    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-      buttonText: "Add car rental",
-      type: "text",
-      startIcon: /*#__PURE__*/React__default.createElement(iuistyles.icons.Add, {
-        width: "10",
-        height: "10",
-        color: "#EC5D25"
-      }),
-      className: styles.paddingTop,
-      onClick: function onClick(e) {
-        return addMemInfoInput('rental_car');
-      }
-    })))))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
-      className: styles.dividerColor
-    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      container: true,
-      className: clsx(styles.personal_info, styles.sectionWrapper)
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      item: true,
-      sm: 12,
-      md: 4
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
-      label: "Travel preferences",
-      headerType: true
-    })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      item: true,
-      sm: 12,
-      md: 8,
-      lg: 8,
-      xl: 6
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      container: true,
-      className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
-    }, travelPreference.map(function (p, i) {
-      if (!p.visibility) {
-        return null;
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIInput, {
+      label: "Membership number",
+      placeholder: "Enter membership number",
+      fullwidth: false,
+      defaultValue: val.number,
+      onValueChange: function onValueChange(_ref6) {
+        var _value = _ref6._value;
+        return onMemInfoInputChange(index, 'number', _value);
       }
-      return /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-        item: true,
-        sm: 12,
-        md: 12,
-        lg: p.fullWidth ? 12 : 6,
-        xl: p.fullWidth ? 12 : 6,
-        key: i,
-        className: clsx(styles.margin)
-      }, /*#__PURE__*/React__default.createElement(GetInputType, {
-        _p: p,
-        inputState: travelPreferenceInfo,
-        onValueChange: travelPreferenceOnChange,
-        dropdownList: dropdownList,
-        errorArray: errorArray,
-        errorMsg: errorMsgs[p.name]
-      }));
-    })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
-      className: styles.dividerColor
-    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      container: true,
-      className: clsx(styles.personal_info, styles.sectionWrapper)
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    }), /*#__PURE__*/React__default.createElement(iuistyles.IUIIconButton, {
+      style: {
+        marginTop: '30px'
+      },
+      disableRipple: true,
+      onClick: function onClick() {
+        return handleRemoveMemFields(index);
+      },
+      className: styles.backGrdColorOnHover
+    }, /*#__PURE__*/React__default.createElement(CrossIcon, {
+      width: "14",
+      height: "14"
+    })))));
+  }), membershipInfoInput.length < maxMembershipInput && membershipInfoInput.length > 0 && /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    md: 8,
+    lg: 8,
+    xl: 8
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    className: clsx(styles.emptyFieldBtnContainer, styles.rowGap),
+    display: "flex"
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+    buttonText: "Add airline",
+    type: "text",
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
+      width: "10",
+      height: "10",
+      color: "#EC5D25"
+    }),
+    className: styles.paddingTop,
+    onClick: function onClick(e) {
+      return addMemInfoInput('flight');
+    }
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+    buttonText: "Add hotel",
+    type: "text",
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
+      width: "10",
+      height: "10",
+      color: "#EC5D25"
+    }),
+    className: styles.paddingTop,
+    onClick: function onClick(e) {
+      return addMemInfoInput('hotel');
+    }
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+    buttonText: "Add car rental",
+    type: "text",
+    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
+      width: "10",
+      height: "10",
+      color: "#EC5D25"
+    }),
+    className: styles.paddingTop,
+    onClick: function onClick(e) {
+      return addMemInfoInput('rental_car');
+    }
+  })))))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
+    className: styles.dividerColor
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: clsx(styles.personal_info, styles.sectionWrapper)
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 4
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+    label: "Travel preferences",
+    headerType: true
+  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 8,
+    lg: 8,
+    xl: 6
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
+  }, travelPreference.map(function (p, i) {
+    if (!p.visibility) {
+      return null;
+    }
+    return /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
       item: true,
       sm: 12,
-      md: 4
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
-      label: "Secure traveler information",
-      headerType: true
-    })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+      md: 12,
+      lg: p.fullWidth ? 12 : 6,
+      xl: p.fullWidth ? 12 : 6,
+      key: i,
+      className: clsx(styles.margin)
+    }, /*#__PURE__*/React__default.createElement(GetInputType, {
+      _p: p,
+      inputState: travelPreferenceInfo,
+      onValueChange: travelPreferenceOnChange,
+      dropdownList: dropdownList,
+      errorArray: errorArray,
+      errorMsg: errorMsgs[p.name]
+    }));
+  })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
+    className: styles.dividerColor
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: clsx(styles.personal_info, styles.sectionWrapper)
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 4
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+    label: "Secure traveler information",
+    headerType: true
+  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 8,
+    lg: 8,
+    xl: 6
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
+  }, secureTravelInfo.map(function (p, i) {
+    if (!p.visibility) {
+      return null;
+    }
+    return /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
       item: true,
       sm: 12,
-      md: 8,
-      lg: 8,
-      xl: 6
-    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-      container: true,
-      className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
-    }, secureTravelInfo.map(function (p, i) {
-      if (!p.visibility) {
-        return null;
-      }
-      return /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
-        item: true,
-        sm: 12,
-        md: 12,
-        lg: p.fullWidth ? 12 : 6,
-        xl: p.fullWidth ? 12 : 6,
-        key: i,
-        className: clsx(styles.margin)
-      }, /*#__PURE__*/React__default.createElement(GetInputType, {
-        _p: p,
-        inputState: secureTravelInputInfo,
-        onValueChange: onSecureTraveelerInfoInputChange,
-        errorArray: errorArray,
-        errorMsg: errorMsgs[p.name]
-      }));
-    })))));
-  };
-  return /*#__PURE__*/React__default.createElement(iuistyles.IUIAccordionMain, {
-    expanded: defaultExpand === 'open',
-    onChange: handleChange('open'),
-    accordionClass: styles.additionalInfoContainer,
-    summaryComponent: getAccordianSummary(),
-    summaryClass: clsx(styles.additionalInfoTitle, (_clsx2 = {}, _clsx2[styles.expandIconAlign] = defaultExpand === 'open', _clsx2)),
-    expandIcon: defaultExpand ? /*#__PURE__*/React__default.createElement(ExpandLess, {
-      width: "12px",
-      height: "7px"
-    }) : /*#__PURE__*/React__default.createElement(ExpandMore, {
-      width: "12px",
-      height: "7px"
-    }),
-    detailsComponent: getAccordianDetails(),
-    detailsClass: styles.detailsContainer
-  });
+      md: 12,
+      lg: p.fullWidth ? 12 : 6,
+      xl: p.fullWidth ? 12 : 6,
+      key: i,
+      className: clsx(styles.margin)
+    }, /*#__PURE__*/React__default.createElement(GetInputType, {
+      _p: p,
+      inputState: secureTravelInputInfo,
+      onValueChange: onSecureTraveelerInfoInputChange,
+      errorArray: errorArray,
+      errorMsg: errorMsgs[p.name]
+    }));
+  }))))));
 };
 
 var styles$3 = {"root":"_b_muK","minWidth":"_3OQXs","bullet":"_1Q5vL","pos":"_6wGWA","cardHeader":"_SWCfJ","pageHeader":"_2ZeWp","buttonHover":"_2Iuy1","cardHeaderBackground":"_3NJWF","actionCustom":"_3Kbfm"};
@@ -6777,7 +6810,7 @@ var fetchBulkactionHistory = function fetchBulkactionHistory(url) {
   };
 };
 
-var styles$5 = {"UUIUserManagementList":"_3WNHx","scrollOverlayMenu":"_2_WEg","overlaysearch":"_1Pbhb","pageHeader":"_1WLpc","buttonWrapper":"_2egTG","headingWrapper":"_1He01","headingSignUpWrapper":"_Q8vqd","heading":"_1uPaO","headingLarge":"_2FsLd","headingMedium":"_nGXA9","headingSmall":"_2rpwF","description":"_25vb9","headerText":"_1Ny9J","letterImage":"_2hr3R","tablewrapper":"_1-RPw","rowText":"_1LXyO","textTransform":"_3kFQS","lightColor":"_3Ghgw","avatarClassName":"_2qO_X","tooltipText":"_151u_","tooltip":"_-LQNH","importModalBodyContainer":"_25xUk","dividerColor":"_2HZv9","w100":"_3vGmU","downloadTemplateContainer":"_3-Xu_","downloadTemplateDescContainer":"_tLw43","labelContainer":"_7TYUZ","downlTempHeader":"__CZpe","downlTempDescription":"_19jEe","downloadTemplateButton":"_1qXtq","fileUploaderContainer":"_1YVz2","colGap":"_3vnY5","deActivateModalContainer":"_28H9H","backdrop":"_1ky1x","errorText":"_26_if","user_list_page_tabs":"_xWE7K","TabLabelCount":"_13pXn","deactivateAlert":"_3hvWz","departmentHeadText":"_3pOsV","deactivateBtn":"_2v6e4"};
+var styles$5 = {"UUIUserManagementList":"_3WNHx","scrollOverlayMenu":"_2_WEg","overlaysearch":"_1Pbhb","pageHeader":"_1WLpc","buttonWrapper":"_2egTG","headingWrapper":"_1He01","headingSignUpWrapper":"_Q8vqd","heading":"_1uPaO","headingLarge":"_2FsLd","headingMedium":"_nGXA9","headingSmall":"_2rpwF","description":"_25vb9","headerText":"_1Ny9J","letterImage":"_2hr3R","tablewrapper":"_1-RPw","rowText":"_1LXyO","textTransform":"_3kFQS","lightColor":"_3Ghgw","avatarClassName":"_2qO_X","tooltipText":"_151u_","tooltip":"_-LQNH","importModalBodyContainer":"_25xUk","dividerColor":"_2HZv9","w100":"_3vGmU","downloadTemplateContainer":"_3-Xu_","downloadTemplateDescContainer":"_tLw43","labelContainer":"_7TYUZ","downlTempHeader":"__CZpe","downlTempDescription":"_19jEe","downloadTemplateButton":"_1qXtq","fileUploaderContainer":"_1YVz2","colGap":"_3vnY5","deActivateModalContainer":"_28H9H","backdrop":"_1ky1x","errorText":"_26_if","deactivateAlert":"_3hvWz","departmentHeadText":"_3pOsV","deactivateBtn":"_2v6e4","user_list_page_tabs":"_xWE7K","TabLabelCount":"_13pXn"};
 
 var BulkUploadModal = function BulkUploadModal(props) {
   var isOpenImportUsersModal = props.isOpenImportUsersModal,
@@ -8038,19 +8071,6 @@ var BulkDownloadIcon = function BulkDownloadIcon(props) {
 
 var classes = {"containedBtn":"_2A4_u","customMiniBox":"_QGIKG","muiBtn":"_3iFbO","outlinedBtn":"_3lQYD","menuList":"_1C8bJ","menuListContainer":"_1N83W","menuItemContainer":"_3VtcE","menuItemtext":"_2xqnU","subTxt":"_3CVzX"};
 
-var ExpandMoreIcon = function ExpandMoreIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: props.width,
-    height: props.height,
-    fill: "none",
-    viewBox: "0 0 12 7"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    fill: "#6B7280",
-    d: "M.293.294a1 1 0 011.414 0L6 4.587 10.293.294a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z"
-  }));
-};
-
 var DropdownBtn = function DropdownBtn(props) {
   var _clsx;
   var _props$buttonText = props.buttonText,
@@ -8685,12 +8705,18 @@ var UserList = function UserList(_ref2) {
   var _useState10 = React.useState(false),
     isApiFetching = _useState10[0],
     setisApiFetching = _useState10[1];
-  var _useState11 = React.useState(false),
-    showInviteModal = _useState11[0],
-    setToggleInviteModal = _useState11[1];
-  var _useState12 = React.useState(''),
-    userIds = _useState12[0],
-    setUserIds = _useState12[1];
+  var _useState11 = React.useState({
+      value: '',
+      label: 'Select approver'
+    }),
+    travelFYI = _useState11[0],
+    setTravelFYI = _useState11[1];
+  var _useState12 = React.useState(false),
+    showInviteModal = _useState12[0],
+    setToggleInviteModal = _useState12[1];
+  var _useState13 = React.useState(''),
+    userIds = _useState13[0],
+    setUserIds = _useState13[1];
   var _React$useState6 = React__default.useState(false),
     overlayMenu = _React$useState6[0],
     setOverlayMenu = _React$useState6[1];
@@ -8717,40 +8743,34 @@ var UserList = function UserList(_ref2) {
   var _React$useState7 = React__default.useState(1),
     signup_page = _React$useState7[0],
     setSignUpPage = _React$useState7[1];
-  var _useState13 = React.useState(5),
-    signup_rowsPerPage = _useState13[0],
-    setSignUpRowsPerPage = _useState13[1];
+  var _useState14 = React.useState(5),
+    signup_rowsPerPage = _useState14[0],
+    setSignUpRowsPerPage = _useState14[1];
   var _React$useState8 = React__default.useState('asc'),
     signup_order = _React$useState8[0],
     setSignUpOrder = _React$useState8[1];
   var _React$useState9 = React__default.useState('fname'),
     signup_orderBy = _React$useState9[0],
     setSignUpOrderBy = _React$useState9[1];
-  var _useState14 = React.useState(''),
-    signup_searchValue = _useState14[0],
-    set_signup_SearchValue = _useState14[1];
-  var _useState15 = React.useState(false),
-    isSignUpSortingChange = _useState15[0],
-    setSignUpSortingChange = _useState15[1];
+  var _useState15 = React.useState(''),
+    signup_searchValue = _useState15[0],
+    set_signup_SearchValue = _useState15[1];
   var _useState16 = React.useState(false),
-    isSignUpSearchingChange = _useState16[0],
-    setSignUpSearchingChange = _useState16[1];
+    isSignUpSortingChange = _useState16[0],
+    setSignUpSortingChange = _useState16[1];
   var _useState17 = React.useState(false),
-    isSignUpSortingChangeTemp = _useState17[0],
-    setSignUpSortingChangeTemp = _useState17[1];
+    isSignUpSearchingChange = _useState17[0],
+    setSignUpSearchingChange = _useState17[1];
   var _useState18 = React.useState(false),
-    isSignUpSearchingChangeTemp = _useState18[0],
-    setSignUpSearchingChangeTemp = _useState18[1];
+    isSignUpSortingChangeTemp = _useState18[0],
+    setSignUpSortingChangeTemp = _useState18[1];
+  var _useState19 = React.useState(false),
+    isSignUpSearchingChangeTemp = _useState19[0],
+    setSignUpSearchingChangeTemp = _useState19[1];
   var _useSelector3 = reactRedux.useSelector(function (state) {
       return state.userList;
     }),
     signupRequestListInfo = _useSelector3.signupRequestListInfo;
-  var _useState19 = React.useState({
-      value: '',
-      label: 'Select approver'
-    }),
-    travelFYI = _useState19[0],
-    setTravelFYI = _useState19[1];
   var openDeactivateModal = function openDeactivateModal() {
     if (Object.values(selected).flat().length === 0 || Object.values(selected).flat() === undefined) {
       IUIToastMessageService$7.warningNotify('Select at least one user to deactivate.');