@zengenti/contensis-react-base 3.0.2-beta.2 → 3.0.2-beta.21

package/esm/forms.js

@@ -1,8 +1,8 @@
 import { produce } from 'immer';
-import { takeEvery, takeLatest, put, call, select, all } from '@redux-saga/core/effects';
+import { takeEvery, takeLatest, put, select, all, call } from '@redux-saga/core/effects';
 import { createSelector } from 'reselect';
 import { selectors as selectors$1 } from '@zengenti/contensis-react-base/routing';
-import React, { createContext, useState, useEffect } from 'react';
+import React, { createContext, useState, useEffect, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
 import styled, { ThemeProvider as ThemeProvider$1, css } from 'styled-components';
@@ -26,7 +26,8 @@ const SET_FIELD_ERROR = `${ACTION_PREFIX}SET_FIELD_ERROR`;
 const SET_DATE_RANGE_VALUES = `${ACTION_PREFIX}SET_DATE_RANGE_VALUES`;
 const SET_FORM_ENTRIES = `${ACTION_PREFIX}SET_FORM_ENTRIES`;
 const SET_SUCCESS_MESSAGE = `${ACTION_PREFIX}SET_SUCCESS_MESSAGE`;
-const SET_CHECKBOX_VALUE = `${ACTION_PREFIX}SET_CHECKBOX_VALUE`;
+const SET_MULTIPLE_CHECKBOX_VALUE = `${ACTION_PREFIX}SET_MULTIPLE_CHECKBOX_VALUE`;
+const SET_SINGLE_CHECKBOX_VALUE = `${ACTION_PREFIX}SET_SINGLE_CHECKBOX_VALUE`;
 
 const initialSettings = {
   recaptcha: {
@@ -75,7 +76,6 @@ var reducer = produce((state, action) => {
         state[formId] = initialFormData;
         return;
       }
-
     case SET_FORM_DATA:
       {
         const {
@@ -96,7 +96,6 @@ var reducer = produce((state, action) => {
         state[formId].settings = settings;
         return;
       }
-
     case SET_CURRENT_PAGE:
       {
         const {
@@ -110,7 +109,6 @@ var reducer = produce((state, action) => {
         state[formId].pagingInfo.pageCount = pageCount;
         return;
       }
-
     case SET_FIELD_VALUE:
       {
         const {
@@ -121,32 +119,40 @@ var reducer = produce((state, action) => {
         state[formId].data[id] = value;
         return;
       }
-
     case SET_DEFAULT_FIELD_VALUE:
       {
         const {
           formId,
           value
         } = action || {};
-        state[formId].data = value;
+        state[formId].data = {
+          ...state[formId].data,
+          ...value
+        };
         return;
       }
-
-    case SET_CHECKBOX_VALUE:
+    case SET_SINGLE_CHECKBOX_VALUE:
       {
         const {
           formId,
           id,
-          value,
-          isChecked
+          value
         } = action || {};
-        let values = state[formId].data[id] || [];
-        if (isChecked) state[formId].data[id] = { ...values,
+        state[formId].data[id] = value;
+        return;
+      }
+    case SET_MULTIPLE_CHECKBOX_VALUE:
+      {
+        const {
+          formId,
+          id,
+          label,
           value
-        };else state[formId].data[id] = values.filter(v => v !== value);
+        } = action || {};
+        const checked = state[formId].data[id] || [];
+        if (value) state[formId].data[id] = [...checked, label];else state[formId].data[id] = checked.filter(v => v !== label);
         return;
       }
-
     case SET_DATE_RANGE_VALUES:
       {
         const {
@@ -158,7 +164,6 @@ var reducer = produce((state, action) => {
         state[formId].data[id][dateType] = value;
         return;
       }
-
     case SET_FIELD_ERROR:
       {
         const {
@@ -168,7 +173,6 @@ var reducer = produce((state, action) => {
         state[formId].fieldErrors = value;
         return;
       }
-
     case SET_SUBMITTING_FORM:
       {
         const {
@@ -178,7 +182,6 @@ var reducer = produce((state, action) => {
         state[formId].status.isSubmitting = isSubmitting;
         return;
       }
-
     case SUBMIT_FORM_SUCCESS:
       {
         const {
@@ -190,7 +193,6 @@ var reducer = produce((state, action) => {
         state[formId].status.validation.sent = false;
         return;
       }
-
     case SUBMIT_FORM_FOR_VALIDATION:
       {
         const {
@@ -202,17 +204,15 @@ var reducer = produce((state, action) => {
         state[formId].status.hasError = false;
         return;
       }
-
     case SET_SUCCESS_MESSAGE:
       {
         const {
           formId,
           message
         } = action || {};
-        state[formId].status.message.success = message;
+        state[formId].status.messages.success = message;
         return;
       }
-
     case SUBMIT_FORM_ERROR:
       {
         const {
@@ -223,7 +223,6 @@ var reducer = produce((state, action) => {
         state[formId].status.validation.sent = false;
         return;
       }
-
     case SET_FORM_ENTRIES:
       {
         const {
@@ -239,7 +238,6 @@ var reducer = produce((state, action) => {
         state[formId].entries = entryObject;
         return;
       }
-
     case SET_ERROR:
       {
         const {
@@ -249,7 +247,6 @@ var reducer = produce((state, action) => {
         state[formId].status.isSubmitting = false;
         return;
       }
-
     default:
       return state;
   }
@@ -259,7 +256,6 @@ const selectForms = state => state.forms;
 const makeSelectPagedFields = formId => createSelector(selectForms, forms => {
   if (forms !== null && forms !== void 0 && forms[formId]) {
     var _forms$formId, _forms$formId2;
-
     const pagingInfo = forms === null || forms === void 0 ? void 0 : (_forms$formId = forms[formId]) === null || _forms$formId === void 0 ? void 0 : _forms$formId.pagingInfo;
     const fields = forms === null || forms === void 0 ? void 0 : (_forms$formId2 = forms[formId]) === null || _forms$formId2 === void 0 ? void 0 : _forms$formId2.fields;
     if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0 && pagingInfo.pageCount > 1) return fields.filter(f => f.groupId == pagingInfo.currentPageId);else return fields;
@@ -267,77 +263,62 @@ const makeSelectPagedFields = formId => createSelector(selectForms, forms => {
 });
 const makeSelectFormStatus = formId => createSelector(selectForms, forms => {
   var _forms$formId3;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId3 = forms[formId]) === null || _forms$formId3 === void 0 ? void 0 : _forms$formId3.status;
 });
 const makeSelectPagingInfo = formId => createSelector(selectForms, forms => {
   var _forms$formId4;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId4 = forms[formId]) === null || _forms$formId4 === void 0 ? void 0 : _forms$formId4.pagingInfo;
 });
 const makeSelectFormSettings = formId => createSelector(selectForms, forms => {
   var _forms$formId5;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId5 = forms[formId]) === null || _forms$formId5 === void 0 ? void 0 : _forms$formId5.settings;
 });
 const makeSelectFormFieldErrors = formId => createSelector(selectForms, forms => {
   var _forms$formId6;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId6 = forms[formId]) === null || _forms$formId6 === void 0 ? void 0 : _forms$formId6.fieldErrors;
 });
 const makeSelectFormEntries = formId => createSelector(selectForms, forms => {
   var _forms$formId7;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId7 = forms[formId]) === null || _forms$formId7 === void 0 ? void 0 : _forms$formId7.entries;
 });
 const makeSelectFormPostData = formId => createSelector(selectForms, forms => {
   var _forms$formId8;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId8 = forms[formId]) === null || _forms$formId8 === void 0 ? void 0 : _forms$formId8.data;
 });
 const makeSelectIsLoading = formId => createSelector(selectForms, forms => {
   var _forms$formId9;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId9 = forms[formId]) === null || _forms$formId9 === void 0 ? void 0 : _forms$formId9.status.isLoading;
 });
 const makeSelectIsSubmitting = formId => createSelector(selectForms, forms => {
   var _forms$formId10;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId10 = forms[formId]) === null || _forms$formId10 === void 0 ? void 0 : _forms$formId10.status.isSubmitting;
 });
 const makeSelectHasSuccess = formId => createSelector(selectForms, forms => {
   var _forms$formId11;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId11 = forms[formId]) === null || _forms$formId11 === void 0 ? void 0 : _forms$formId11.status.hasSuccess;
 });
 const makeSelectHasError = formId => createSelector(selectForms, forms => {
   var _forms$formId12;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId12 = forms[formId]) === null || _forms$formId12 === void 0 ? void 0 : _forms$formId12.status.hasError;
 });
 const makeSelectFormFields = formId => createSelector(selectForms, forms => {
   var _forms$formId13;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId13 = forms[formId]) === null || _forms$formId13 === void 0 ? void 0 : _forms$formId13.fields;
 });
 const makeSelectDefaultLang = formId => createSelector(selectForms, forms => {
   var _forms$formId14;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId14 = forms[formId]) === null || _forms$formId14 === void 0 ? void 0 : _forms$formId14.defaultLanguage;
 });
 const makeSelectFormSuccessMessage = formId => createSelector(selectForms, forms => {
   var _forms$formId15;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId15 = forms[formId]) === null || _forms$formId15 === void 0 ? void 0 : _forms$formId15.status.messages.success;
 });
 const makeSelectFormValidationSent = formId => createSelector(selectForms, forms => {
   var _forms$formId16;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId16 = forms[formId]) === null || _forms$formId16 === void 0 ? void 0 : _forms$formId16.status.validation.sent;
 });
-const makeSelectFormGroup$1 = formId => createSelector(selectForms, forms => {
+const makeSelectFormGroup = formId => createSelector(selectForms, forms => {
   var _forms$formId17;
-
   return forms === null || forms === void 0 ? void 0 : (_forms$formId17 = forms[formId]) === null || _forms$formId17 === void 0 ? void 0 : _forms$formId17.groups;
 });
 const selectors = {
@@ -356,7 +337,7 @@ const selectors = {
   makeSelectDefaultLang,
   makeSelectFormSuccessMessage,
   makeSelectFormValidationSent,
-  makeSelectFormGroup: makeSelectFormGroup$1,
+  makeSelectFormGroup,
   makeSelectHasError
 };
 
@@ -400,11 +381,11 @@ const postForm = async formObj => {
   const submitted = await request(URI, options);
   return submitted;
 };
-
 const request = async (url, options) => {
   return fetch(url, options).then(response => response.json()).then(result => {
     return result;
-  }) // eslint-disable-next-line no-console
+  })
+  // eslint-disable-next-line no-console
   .catch(error => console.log('error', error));
 };
 
@@ -412,14 +393,12 @@ const domains = ['1033edge.com', '11mail.com', '123.com', '123box.net', '123indi
 
 const doA11yValidation = (v, field, formValidationSent) => {
   const error = doValidateField(field, v);
-
   if (JSON.stringify(field.validations) !== '{}') {
     if (((v === null || v === void 0 ? void 0 : v.length) >= 1 || formValidationSent) && (error === null || error === void 0 ? void 0 : error.fieldId) === field.id) return 'true';else if ((v === null || v === void 0 ? void 0 : v.length) >= 1) return 'false';else return '';
   }
 };
 const doValidateField = (field, value) => {
   var _field$validations, _field$validations$re;
-
   const isRequired = field.validations && field.validations.required;
   const minLength = field.validations && field.validations.minLength;
   const maxLength = field.validations && field.validations.maxLength;
@@ -427,10 +406,8 @@ const doValidateField = (field, value) => {
   const integer = field.dataType === 'integer';
   const decimal = field.dataType === 'decimal';
   const isBusinessEmail = field.id === 'businessEmail';
-
   if (isRequired && (value === null || value === void 0 ? void 0 : value.length) <= 0) {
     var _isRequired$message, _field$name;
-
     const errorMessage = (isRequired === null || isRequired === void 0 ? void 0 : (_isRequired$message = isRequired.message) === null || _isRequired$message === void 0 ? void 0 : _isRequired$message['en-GB']) || `${(_field$name = field.name) === null || _field$name === void 0 ? void 0 : _field$name['en-GB']} is required`;
     return {
       fieldId: field.id,
@@ -438,7 +415,6 @@ const doValidateField = (field, value) => {
       message: errorMessage
     };
   }
-
   if (minLength && minLength.value > value.length) {
     const errorMessage = minLength.message ? minLength.message['en-GB'] : `Minimum characters ${minLength.value}`;
     return {
@@ -447,7 +423,6 @@ const doValidateField = (field, value) => {
       message: errorMessage
     };
   }
-
   if (maxLength && maxLength.value < value.length) {
     const errorMessage = maxLength.message && maxLength.message['en-GB'] ? maxLength.message['en-GB'] : `Maximum characters ${maxLength.value}`;
     return {
@@ -457,14 +432,10 @@ const doValidateField = (field, value) => {
     };
   }
   /** Check Regex and Business Emails */
-
-
   if (hasRegex && value.length >= 1) {
     var _r$message;
-
     const r = field.validations.regex;
     const msg = (r === null || r === void 0 ? void 0 : (_r$message = r.message) === null || _r$message === void 0 ? void 0 : _r$message['en-GB']) || `${field.name['en-GB']} is invalid`;
-
     if (isValidRegex(field, value) && isBusinessEmail) {
       if (!isBusinessEmailValid(field, value)) {
         return {
@@ -481,10 +452,8 @@ const doValidateField = (field, value) => {
       };
     }
   }
-
   if (integer) {
     const isInteger = value % 1 === 0;
-
     if (!isInteger) {
       const errorMessage = `${value} is not an ${field.dataType}`;
       return {
@@ -494,10 +463,8 @@ const doValidateField = (field, value) => {
       };
     }
   }
-
   if (decimal) {
     const isDecimal = value % 1 !== 0;
-
     if (!isDecimal) {
       const errorMessage = `${value} is not an ${field.dataType}`;
       return {
@@ -508,13 +475,11 @@ const doValidateField = (field, value) => {
     }
   }
 };
-
 const isValidRegex = (field, value) => {
   const regex = field.validations.regex.pattern;
   const regexPattern = RegExp(regex);
   if (!regexPattern.test(value)) return false;else return true;
 };
-
 const isBusinessEmailValid = (field, value) => {
   const domain = value.split('@').pop();
   if (!domains.includes(domain)) return true;else return false;
@@ -522,7 +487,6 @@ const isBusinessEmailValid = (field, value) => {
 
 const doCreateMessage = (type, minLength, maxLength, currentLength, defaultLanguage) => {
   if (!type) return null;
-
   switch (type) {
     case 'min':
       {
@@ -530,28 +494,24 @@ const doCreateMessage = (type, minLength, maxLength, currentLength, defaultLangu
         const minLengthVal = minLength && minLength.value;
         const errorMessage = minLength && minLength.message && minLength.message[defaultLanguage];
         const minText = `Minimum of ${minLengthVal.toString()} characters`;
-
         if (errorMessage) {
           return errorMessage;
         } else {
           return minText;
         }
       }
-
     case 'max':
       {
         if (!maxLength) return;
         const maxLengthVal = maxLength && maxLength.value;
         const errorMessage = maxLength && maxLength.message && maxLength.message[defaultLanguage];
         const maxText = `Maximum of ${maxLengthVal.toString()} characters`;
-
         if (errorMessage) {
           return errorMessage;
         } else {
           return maxText;
         }
       }
-
     case 'between':
       {
         if (!maxLength || !minLength) return;
@@ -559,7 +519,6 @@ const doCreateMessage = (type, minLength, maxLength, currentLength, defaultLangu
         const maxLengthVal = maxLength && maxLength.value;
         const errorMessage = minLength && minLength.message && minLength.message[defaultLanguage];
         const rangeText = `Between ${minLengthVal.toString()}-${maxLengthVal.toString()} characters)`;
-
         if (errorMessage) {
           return errorMessage;
         } else if (currentLength < minLengthVal) {
@@ -572,16 +531,16 @@ const doCreateMessage = (type, minLength, maxLength, currentLength, defaultLangu
           return rangeText;
         }
       }
-
     default:
       return null;
   }
 };
 const getFieldType = field => {
   var _field$editor, _field$editor$propert;
-
   if (!field) return null;
-
+  if (field.id === 'country' && field.dataType === 'string') {
+    return 'country';
+  }
   if (field.dataType === 'string' && field.editor && field.editor.id === 'multiline') {
     return 'textarea';
   } else if (field.dataType === 'string' && field.editor && field.editor.id === 'list-dropdown') {
@@ -605,8 +564,9 @@ const getFieldType = field => {
   }
 };
 
-const sagas = [takeEvery(SUBMIT_FORM_SUCCESS, onFormSuccess), takeEvery(SUBMIT_FORM_FOR_VALIDATION, doValidateForm), takeEvery(SUBMIT_FORM, onSubmitForm), takeEvery(SET_FORM_ID, doFetchForm), takeLatest(VALIDATE_FIELD, onValidateField$1), takeEvery(PAGE_FORWARD, doTogglePage), takeEvery(PAGE_BACK, doTogglePage), takeEvery(SET_FORM_DATA, getEntryPickerData), takeLatest(SET_FORM_DATA, setDefaultValueFields)];
-
+const sagas = [takeEvery(SUBMIT_FORM_SUCCESS, onFormSuccess), takeEvery(SUBMIT_FORM_FOR_VALIDATION, doValidateForm), takeEvery(SUBMIT_FORM, onSubmitForm), takeEvery(SET_FORM_ID, doFetchForm),
+// takeLatest(VALIDATE_FIELD, onValidateField),
+takeEvery(PAGE_FORWARD, doTogglePage), takeEvery(PAGE_BACK, doTogglePage), takeEvery(SET_FORM_DATA, getEntryPickerData), takeLatest(SET_FORM_DATA, setDefaultValueFields)];
 function* doValidateForm(action) {
   const {
     formId
@@ -617,89 +577,51 @@ function* doValidateForm(action) {
     formId
   });
 }
+// function* onValidateField(action) {
+//   const { formId, id, value } = action;
+//   if (value?.length >= 1) yield call(onValidateSingleField, formId, id, value);
+// }
 
-function* onValidateField$1(action) {
-  const {
-    formId,
-    id,
-    value
-  } = action;
-  if ((value === null || value === void 0 ? void 0 : value.length) >= 1) yield call(onValidateSingleField, formId, id, value);
-}
-
-function* validateGroupfields(formId, groupId) {
+function* onValidateGroupFields(formId, groupId) {
   const state = yield select();
   const selectPostData = makeSelectFormPostData(formId);
   const postData = selectPostData(state);
   const selectFormFields = makeSelectFormFields(formId);
   const fields = selectFormFields(state);
-  const groupFields = fields.filter(f => f.groupid == groupId);
-  let newErrors = [];
+  const groupFields = fields.filter(f => f.groupId == groupId);
+  let errors = [];
   groupFields.forEach(field => {
-    let val = '';
-
-    if (postData[field.id]) {
-      val = postData[field.id];
-    }
-
-    const err = doValidateField(field, val);
-    if (err) newErrors.push(err);
+    let value = '';
+    if (postData[field.id]) value = postData[field.id];
+    const error = doValidateField(field, value);
+    if (error) errors.push(error);
   });
   yield put({
     type: SET_FIELD_ERROR,
     formId: formId,
-    value: newErrors
+    value: errors
   });
+  return errors;
 }
-
 function* onValidateAllFields(formId) {
   const state = yield select();
   const selectPostData = makeSelectFormPostData(formId);
   const postData = selectPostData(state);
   const selectFormFields = makeSelectFormFields(formId);
   const fields = selectFormFields(state);
-  let newErrors = [];
+  const errors = [];
   fields.forEach(field => {
-    let val = '';
-
-    if (postData[field.id]) {
-      val = postData[field.id];
-    }
-
-    const err = doValidateField(field, val);
-    if (err) newErrors.push(err);
+    let value = '';
+    if (postData[field.id]) value = postData[field.id];
+    const error = doValidateField(field, value);
+    if (error) errors.push(error);
   });
   yield put({
     type: SET_FIELD_ERROR,
     formId: formId,
-    value: newErrors
+    value: errors
   });
 }
-
-function* onValidateSingleField(formId, fieldId, value) {
-  const state = yield select();
-  const selectFormFields = makeSelectFormFields(formId);
-  const fields = selectFormFields(state);
-  const selectFormFieldErrors = makeSelectFormFieldErrors(formId);
-  const errors = selectFormFieldErrors(state);
-  const fieldData = fields.find(f => f.id == fieldId);
-  const newErrors = []; //loop through current errors to remove any of the item we currently edit
-
-  errors.forEach(error => {
-    if (error.fieldId !== fieldId) {
-      //push any existing errors to new array
-      newErrors.push(error);
-    }
-  });
-  const err = doValidateField(fieldData, value);
-  if (err) newErrors.push(err);
-  yield put({
-    type: SET_FIELD_ERROR,
-    formId: formId,
-    value: newErrors
-  });
-}
-
 function* doTogglePage(action) {
   const {
     formId,
@@ -708,30 +630,34 @@ function* doTogglePage(action) {
   const state = yield select();
   const selectFormGroups = makeSelectFormGroup(formId);
   const formGroups = selectFormGroups(state);
-
   if (action.type === PAGE_FORWARD) {
-    yield validateGroupfields(formId, formGroups[pageIndex].id);
+    const errors = yield onValidateGroupFields(formId, formGroups[pageIndex - 1].id);
+    if (errors && errors.length <= 0) {
+      yield put({
+        type: SET_CURRENT_PAGE,
+        formId: formId,
+        pageId: formGroups[pageIndex].id,
+        pageCount: formGroups.length,
+        pageIndex: pageIndex
+      });
+    }
+  } else if (action.type === PAGE_BACK) {
+    yield put({
+      type: SET_CURRENT_PAGE,
+      formId: formId,
+      pageId: formGroups[pageIndex].id,
+      pageCount: formGroups.length,
+      pageIndex: pageIndex
+    });
   }
-
-  yield put({
-    type: SET_CURRENT_PAGE,
-    formId: formId,
-    pageId: formGroups[pageIndex].id,
-    pageCount: formGroups.length,
-    pageIndex: pageIndex
-  });
 }
-
 function* doFetchForm(action) {
   var _schema$groups;
-
   const formId = action.formId;
   const schema = yield getFormSchema(formId);
   const groups = schema === null || schema === void 0 ? void 0 : (_schema$groups = schema.groups) === null || _schema$groups === void 0 ? void 0 : _schema$groups.filter(group => group.id !== 'private' && group.id !== 'settings');
-
   if (formId && schema) {
     var _schema$groups2, _submitButtonText$def;
-
     if ((schema === null || schema === void 0 ? void 0 : (_schema$groups2 = schema.groups) === null || _schema$groups2 === void 0 ? void 0 : _schema$groups2.length) > 0) {
       yield put({
         type: SET_CURRENT_PAGE,
@@ -741,10 +667,10 @@ function* doFetchForm(action) {
         pageCount: groups.length
       });
     }
-
     const submitButtonText = schema.fields.find(f => f.id === 'submitButtonText');
     const fields = schema === null || schema === void 0 ? void 0 : schema.fields.map(field => {
-      return { ...field,
+      return {
+        ...field,
         type: getFieldType(field)
       };
     });
@@ -760,27 +686,26 @@ function* doFetchForm(action) {
     });
   }
 }
-
 function* onFormSuccess(action) {
   const state = yield select();
   const selectFormFields = makeSelectFormFields(action.formId);
   const fields = selectFormFields(state);
   const redirect = fields.find(f => f.id === 'formSettingsRedirect');
   const message = fields.find(f => f.id === 'formSettingsMessage');
-
   if (redirect !== null && redirect !== void 0 && redirect.default) {
     window.location.href = redirect.default['en-GB'];
   }
-
   if (message !== null && message !== void 0 && message.default) {
-    yield put({
-      type: SET_SUCCESS_MESSAGE,
-      message: message.default['en-GB'],
-      formId: action.formId
-    });
+    const m = message.default['en-GB'];
+    if (m) {
+      yield put({
+        type: SET_SUCCESS_MESSAGE,
+        message: m,
+        formId: action.formId
+      });
+    }
   }
 }
-
 function* onSubmitForm(action) {
   const {
     formId
@@ -789,10 +714,8 @@ function* onSubmitForm(action) {
   const selectFormFieldErrors = makeSelectFormFieldErrors(formId);
   const errors = selectFormFieldErrors(state);
   const canSubmit = (errors === null || errors === void 0 ? void 0 : errors.length) === 0;
-
   if (canSubmit) {
     var _formResObj$sys;
-
     yield put({
       type: SET_SUBMITTING_FORM,
       isSubmitting: true,
@@ -805,7 +728,6 @@ function* onSubmitForm(action) {
       formPost: rawData.data
     };
     const formResObj = yield postForm(formObj);
-
     if (formResObj !== null && formResObj !== void 0 && (_formResObj$sys = formResObj.sys) !== null && _formResObj$sys !== void 0 && _formResObj$sys.id) {
       yield put({
         type: SUBMIT_FORM_SUCCESS,
@@ -819,7 +741,6 @@ function* onSubmitForm(action) {
     }
   }
 }
-
 function* setDefaultValueFields(action) {
   const {
     formId,
@@ -831,15 +752,12 @@ function* setDefaultValueFields(action) {
   fields.forEach(field => {
     if (field.dataType == 'string' && field.default) {
       const val = field.default[defaultLanguage];
-
       if (val) {
         fieldObj[field.id] = val;
       }
     }
-
     if (field.id == 'sourceEntry') {
       const val = entryId;
-
       if (val) {
         fieldObj[field.id] = val;
       }
@@ -851,7 +769,6 @@ function* setDefaultValueFields(action) {
     value: fieldObj
   });
 }
-
 function* getEntryPickerData(action) {
   const {
     formId,
@@ -859,7 +776,6 @@ function* getEntryPickerData(action) {
   } = action;
   const entriesToGet = fields.filter(f => f.dataFormat == 'entry');
   let entriesList = [];
-
   if (entriesToGet) {
     entriesList = yield all(entriesToGet.map(entry => {
       const entriesObj = {
@@ -882,7 +798,6 @@ const action = (type, payload = {}) => ({
   type,
   ...payload
 });
-
 const onSubmit = formId => action(SUBMIT_FORM_FOR_VALIDATION, {
   formId
 });
@@ -894,11 +809,16 @@ const setValue = (formId, id, value) => action(SET_FIELD_VALUE, {
   id,
   value
 });
-const setCheckboxValue = (formId, id, value, isChecked) => action(SET_CHECKBOX_VALUE, {
+const setSingleCheckboxValue = (formId, id, value) => action(SET_SINGLE_CHECKBOX_VALUE, {
   formId,
   id,
-  value,
-  isChecked
+  value
+});
+const setMultipleCheckboxValue = (formId, id, label, value) => action(SET_MULTIPLE_CHECKBOX_VALUE, {
+  formId,
+  id,
+  label,
+  value
 });
 const setDateRangeValues = (formId, id, dateType, value) => action(SET_DATE_RANGE_VALUES, {
   formId,
@@ -923,15 +843,14 @@ const actions = {
   onSubmit,
   setFormId,
   setValue,
-  setCheckboxValue,
-  setDateRangeValues,
+  setSingleCheckboxValue,
+  setMultipleCheckboxValue,
   onValidateField,
   doTogglePageForward,
   doTogglePageBack
 };
 
 const ThemeContext = /*#__PURE__*/createContext();
-
 const ThemeProvider = ({
   children,
   theme
@@ -942,7 +861,6 @@ const ThemeProvider = ({
     theme: theme
   }, children));
 };
-
 ThemeProvider.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   theme: PropTypes.object
@@ -988,7 +906,7 @@ const FormStyled = styled.form.withConfig({
   theme,
   useDefaultTheme
 }) => {
-  return css(["", ""], useDefaultTheme && css(["> div:not(:first-child){margin-top:16px;}padding:0 16px;.success-message{font-size:18px;margin:0;}.visuallyHidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}.loading{display:block;margin:24px auto;}label{display:inline-block;.isRequired{color:", ";}}input,textarea,select{display:block;font-family:inherit;background-color:", ";border-radius:3px;border:1px solid ", ";height:40px;padding:8px;margin-top:4px;width:100%;}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px ", " inset;}textarea{height:200px;resize:none;}[aria-invalid='false']{background:", ";border:1px solid ", ";&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus,&:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px", " inset;}}[aria-invalid='true']{background:", ";border:1px solid ", ";&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus,&:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px", " inset;}}input ~ .svg{position:absolute;right:8px;top:50%;transform:translateY(-50%);}textarea ~ .svg{position:absolute;right:8px;top:8px;}"], theme.colors.red_darker, theme.colors.white, theme.colors.light_grey_darkest, theme.colors.white, theme.colors.green_lightest, theme.colors.green_darker, theme.colors.green_lightest, theme.colors.red_lightest, theme.colors.red_darker, theme.colors.red_lightest));
+  return css(["", ""], useDefaultTheme && css(["> div:not(:first-child){margin-top:16px;}padding:0 16px;.success-message{font-size:18px;margin:0;}.visuallyHidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}.loading{display:block;margin:24px auto;}label{display:inline-block;.isRequired{color:", ";}}input,textarea,select{display:block;font-family:inherit;background-color:", ";border-radius:3px;border:1px solid ", ";height:40px;padding:8px;margin-top:4px;width:100%;}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px ", " inset;}textarea{height:200px;resize:none;}[aria-invalid='false']{background:", ";border:1px solid ", ";&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus,&:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px", " inset;}}[aria-invalid='true']{background:", ";border:1px solid ", ";&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus,&:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px", " inset;}}input ~ .svg{position:absolute;right:8px;top:50%;transform:translateY(-50%);}textarea ~ .svg{position:absolute;right:8px;top:8px;}button:not(:last-of-type){margin-right:16px;}"], theme.colors.red_darker, theme.colors.white, theme.colors.light_grey_darkest, theme.colors.white, theme.colors.green_lightest, theme.colors.green_darker, theme.colors.green_lightest, theme.colors.red_lightest, theme.colors.red_darker, theme.colors.red_lightest));
 });
 
 const Label = ({
@@ -1001,13 +919,12 @@ const Label = ({
   return /*#__PURE__*/React.createElement("label", {
     className: `${className} ${isHidden ? 'visuallyHidden' : ''}`,
     htmlFor: id
-  }, label, isRequired && /*#__PURE__*/React.createElement("span", {
-    className: "isRequired"
-  }, "*"), isRequired && /*#__PURE__*/React.createElement("span", {
-    className: "visuallyHidden"
-  }, " (required)"));
+  }, label, isRequired ? /*#__PURE__*/React.createElement("span", {
+    className: "label__required"
+  }, "(required)") : /*#__PURE__*/React.createElement("span", {
+    className: "label__optional"
+  }, "(optional)"));
 };
-
 Label.propTypes = {
   className: PropTypes.string,
   label: PropTypes.string,
@@ -1065,7 +982,6 @@ const TextfieldStyled = styled.div.withConfig({
 }) => {
   return css(["display:", ";"], isHidden ? 'none' : 'block');
 });
-
 const Textfield = ({
   className,
   field,
@@ -1157,7 +1073,6 @@ const Textfield = ({
     d: "m2 8 4.418 4.667L14 4.659l-1.246-1.326-6.336 6.692-3.18-3.332L2 8Z"
   }))));
 };
-
 Textfield.propTypes = {
   className: PropTypes.string,
   field: PropTypes.any,
@@ -1264,7 +1179,6 @@ const Textarea = ({
     d: "m2 8 4.418 4.667L14 4.659l-1.246-1.326-6.336 6.692-3.18-3.332L2 8Z"
   }))));
 };
-
 Textarea.propTypes = {
   className: PropTypes.string,
   field: PropTypes.any,
@@ -1302,7 +1216,6 @@ const HiddenField = ({
     isHidden: true
   });
 };
-
 HiddenField.propTypes = {
   className: PropTypes.string,
   id: PropTypes.string,
@@ -1350,7 +1263,6 @@ const Dropdown = ({
     }, val[defaultLanguage]);
   })));
 };
-
 Dropdown.propTypes = {
   className: PropTypes.string,
   formId: PropTypes.string,
@@ -1370,11 +1282,9 @@ const CheckboxStyled = styled.div.withConfig({
 }) => {
   return css(["", ""], useDefaultTheme && css([".checkbox-wrapper{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;input{height:auto;width:auto;margin:0 4px 0 0;}label{display:inline-block;}}"]));
 });
-
 const Checkbox = ({
   className,
   formId,
-  setCheckboxValue,
   id,
   type,
   label,
@@ -1387,18 +1297,16 @@ const Checkbox = ({
   // NF change rules of hooks
   let isDefaultChecked = defaultValue && defaultValue[defaultLanguage];
   const [isChecked, setIsChecked] = useState(isDefaultChecked || '');
-
+  const dispatch = useDispatch();
   switch (type) {
     case 'multiple':
       {
         if (!validations) return null;
         const isRequired = validations && validations.required ? true : false;
         const cbValues = validations && validations.allowedValues && validations.allowedValues.values;
-
-        const _handleChange = (value, isChecked) => {
-          setCheckboxValue(formId, id, value, isChecked);
+        const _handleChange = (label, value) => {
+          dispatch(setMultipleCheckboxValue(formId, id, label, value));
         };
-
         if (!cbValues || cbValues.length < 1) return null;
         return /*#__PURE__*/React.createElement(CheckboxStyled, {
           className: `checkbox-container`,
@@ -1419,21 +1327,19 @@ const Checkbox = ({
             value: val[defaultLanguage],
             className: `${className ? className : ''} input-checkbox`,
             onChange: e => _handleChange(e.target.value, e.target.checked)
-          }), /*#__PURE__*/React.createElement(Label, {
+          }), /*#__PURE__*/React.createElement("label", {
+            className: "label-checkbox",
             id: `checkbox-${idx}`,
-            label: val[defaultLanguage],
-            className: "label-checkbox"
-          }));
+            htmlFor: `checkbox-${idx}`
+          }, val[defaultLanguage]));
         }));
       }
-
     case 'single':
       {
-        const _handleChange = isChecked => {
-          setIsChecked(isChecked);
-          setCheckboxValue(formId, id, isChecked);
+        const _handleChange = value => {
+          setIsChecked(value);
+          dispatch(setSingleCheckboxValue(formId, id, value));
         };
-
         return /*#__PURE__*/React.createElement(CheckboxStyled, {
           className: `checkbox-container`,
           useDefaultTheme: useDefaultTheme
@@ -1455,14 +1361,12 @@ const Checkbox = ({
       }
   }
 };
-
 Checkbox.propTypes = {
   className: PropTypes.string,
   formId: PropTypes.string,
   id: PropTypes.string,
   type: PropTypes.string,
   label: PropTypes.string,
-  setCheckboxValue: PropTypes.func,
   validations: PropTypes.object,
   defaultLanguage: PropTypes.string,
   name: PropTypes.object,
@@ -1477,7 +1381,6 @@ const RadioButtonStyled = styled.div.withConfig({
 }) => {
   return css(["", ""], useDefaultTheme && css([".radio-wrapper{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;input{height:auto;width:auto;margin:0 4px 0 0;}label{display:inline-block;}}"]));
 });
-
 const RadioButton = ({
   className,
   formId,
@@ -1514,14 +1417,13 @@ const RadioButton = ({
       onChange: e => {
         setValue(formId, id, e.target.value);
       }
-    }), /*#__PURE__*/React.createElement(Label, {
+    }), /*#__PURE__*/React.createElement("label", {
+      className: "label-radio",
       id: val[defaultLanguage],
-      label: val[defaultLanguage],
-      className: "label-radio"
-    }));
+      htmlFor: val[defaultLanguage]
+    }, val[defaultLanguage]));
   }));
 };
-
 RadioButton.propTypes = {
   className: PropTypes.string,
   formId: PropTypes.string,
@@ -1553,6 +1455,7 @@ RadioButton.propTypes = {
 //m > minutes, eg ...T16:05:00 = 5
 //t > abbreviated AM / PM, e.g. A or P
 //tt > AM / PM, e.g. AM or PM
+
 const formatDate = (date, format = 'dd MMMM yyyy') => {
   if (!date) return null;
   const dateObj = new Date(date);
@@ -1564,8 +1467,9 @@ const formatDate = (date, format = 'dd MMMM yyyy') => {
   const dayNameInt = dateObj.getDay();
   const timeArr = dateString[1].split(':');
   const hour = timeArr[0];
-  const minute = timeArr[1]; //convert to abstract strings to avoid character replacement along the chain, eg. Monday would match 'M' month single parameter
+  const minute = timeArr[1];
 
+  //convert to abstract strings to avoid character replacement along the chain, eg. Monday would match 'M' month single parameter
   const YEAR = ['&&', '&'];
   const MONTH = ['££££', '£££', '££', '£'];
   const DAY = ['%%%%', '%%%', '%%', '%'];
@@ -1577,16 +1481,13 @@ const formatDate = (date, format = 'dd MMMM yyyy') => {
   .replace('MMMM', MONTH[0]).replace('MMM', MONTH[1]).replace('MM', MONTH[2]).replace('M', MONTH[3]).replace('dddd', DAY[0]).replace('ddd', DAY[1]).replace('dd', DAY[2]).replace('d', DAY[3]).replace('HH', HOUR24[0]).replace('H', HOUR24[1]).replace('hh', HOUR12[0]).replace('h', HOUR12[1]).replace('mm', MINUTE[0]).replace('m', MINUTE[1]).replace('tt', TF[0]).replace('t', TF[1]).replace(YEAR[0], year).replace(YEAR[1], year.slice(-2)).replace(MONTH[0], monthsLong[parseInt(month, 10)]).replace(MONTH[1], monthsShort[parseInt(month, 10)]).replace(MONTH[2], month).replace(MONTH[3], parseInt(month, 10)).replace(DAY[0], daysLong[dayNameInt]).replace(DAY[1], daysShort[dayNameInt]).replace(DAY[2], day).replace(DAY[3], parseInt(day, 10)).replace(HOUR24[0], hour).replace(HOUR24[1], parseInt(hour, 10)).replace(HOUR12[0], parseHour(hour)).replace(HOUR12[1], parseInt(parseHour(hour), 10)).replace(MINUTE[0], minute).replace(MINUTE[1], parseInt(minute, 10)).replace(TF[0], parseTF(hour)).replace(TF[1], parseTF(hour).slice(0, -1));
   return formattedDate;
 };
-
 const monthsShort = ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 const monthsLong = ['', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 const daysShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const daysLong = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-
 const parseHour = hour => {
   return hour > 12 ? hour - 12 : hour;
 };
-
 const parseTF = hour => {
   return hour > 11 ? 'PM' : 'AM';
 };
@@ -1604,13 +1505,11 @@ const SingleDate = ({
   const onlyPassedDates = validations && validations.pastDateTime;
   const d = new Date();
   const todaysDate = d.toISOString();
-
   const _handleChange = (formId, id, value) => {
     const d = new Date(value);
     const isoDate = d.toISOString();
     setValue(formId, id, isoDate);
   };
-
   return /*#__PURE__*/React.createElement("div", {
     className: "date-container"
   }, /*#__PURE__*/React.createElement(Label, {
@@ -1627,7 +1526,6 @@ const SingleDate = ({
     onChange: e => _handleChange(formId, id, e.target.value)
   }));
 };
-
 SingleDate.propTypes = {
   className: PropTypes.string,
   formId: PropTypes.string,
@@ -1646,7 +1544,6 @@ const DateRangeStyled = styled.div.withConfig({
 }) => {
   return css(["", ""], useDefaultTheme && css([".daterange-wrapper{display:flex;flex-direction:column;input{&:first-child{margin:0 0 8px 0;}}}"]));
 });
-
 const DateRange = ({
   className,
   id,
@@ -1662,15 +1559,12 @@ const DateRange = ({
   const todaysDate = d.toISOString();
   const [toDate, setToDate] = useState('');
   const [fromDate, setFromDate] = useState('');
-
   const _handleDateChange = (dateType, formId, id, value) => {
     _updateDateProps(dateType, value);
-
     const d = new Date(value);
     const isoDate = d.toISOString();
     setDateRangeValues(formId, id, dateType, isoDate);
   };
-
   const _updateDateProps = (type, date) => {
     switch (type) {
       case 'from':
@@ -1680,7 +1574,6 @@ const DateRange = ({
           setFromDate(newDate);
           break;
         }
-
       case 'to':
         {
           const d = new Date(date);
@@ -1688,12 +1581,10 @@ const DateRange = ({
           setToDate(newDate);
           break;
         }
-
       default:
         return;
     }
   };
-
   return /*#__PURE__*/React.createElement(DateRangeStyled, {
     className: `daterange-container`,
     useDefaultTheme: useDefaultTheme
@@ -1730,7 +1621,6 @@ const DateRange = ({
     onChange: e => _handleDateChange('to', formId, id, e.target.value)
   })));
 };
-
 DateRange.propTypes = {
   className: PropTypes.string,
   formId: PropTypes.string,
@@ -1750,7 +1640,6 @@ const EntryPickerStyled = styled.div.withConfig({
 }) => {
   return css(["", ""], useDefaultTheme && css([".radio-wrapper,.checkbox-wrapper{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;input{height:auto;width:auto;margin:0 4px 0 0;}label{display:inline-block;}}"]));
 });
-
 const EntryPicker = ({
   className,
   results,
@@ -1765,7 +1654,6 @@ const EntryPicker = ({
   if (!results || results.length > 3) return null;
   const isRequired = validations && validations.required ? true : false;
   let valArr = [];
-
   const _handleChange = (formId, id, value, isChecked) => {
     if (type === 'checkbox') {
       if (isChecked) {
@@ -1773,13 +1661,11 @@ const EntryPicker = ({
       } else if (!isChecked) {
         valArr = valArr.filter(valItem => valItem !== value);
       }
-
       setValue(formId, id, valArr);
     } else {
       setValue(formId, id, value);
     }
   };
-
   return /*#__PURE__*/React.createElement(EntryPickerStyled, {
     className: `${type}-container`,
     useDefaultTheme: useDefaultTheme
@@ -1806,7 +1692,6 @@ const EntryPicker = ({
     }));
   }));
 };
-
 EntryPicker.propTypes = {
   className: PropTypes.string,
   results: PropTypes.array,
@@ -1819,6 +1704,1352 @@ EntryPicker.propTypes = {
   formId: PropTypes.string
 };
 
+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);
+}
+
+const countries = [{
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1e8.svg",
+  "country": "Ascension Island",
+  "code": "ac"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1e9.svg",
+  "country": "Andorra",
+  "code": "ad"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1ea.svg",
+  "country": "United Arab Emirates",
+  "code": "ae"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1eb.svg",
+  "country": "Afghanistan",
+  "code": "af"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1ec.svg",
+  "country": "Antigua & Barbuda",
+  "code": "ag"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1ee.svg",
+  "country": "Anguilla",
+  "code": "ai"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f1.svg",
+  "country": "Albania",
+  "code": "al"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f2.svg",
+  "country": "Armenia",
+  "code": "am"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f4.svg",
+  "country": "Angola",
+  "code": "ad"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f6.svg",
+  "country": "Antarctica",
+  "code": "aq"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f7.svg",
+  "country": "Argentina",
+  "code": "ar"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f8.svg",
+  "country": "American Samoa",
+  "code": "as"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1f9.svg",
+  "country": "Austria",
+  "code": "at"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1fa.svg",
+  "country": "Australia",
+  "code": "au"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1fc.svg",
+  "country": "Aruba",
+  "code": "aw"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1fd.svg",
+  "country": "Åland Islands",
+  "code": "ax"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e6-1f1ff.svg",
+  "country": "Azerbaijan",
+  "code": "az"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1e6.svg",
+  "country": "Bosnia & Herzegovina",
+  "code": "ba"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1e7.svg",
+  "country": "Barbados",
+  "code": "bb"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1e9.svg",
+  "country": "Bangladesh",
+  "code": "bd"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1ea.svg",
+  "country": "Belgium",
+  "code": "be"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1eb.svg",
+  "country": "Burkina Faso",
+  "code": "bf"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1ec.svg",
+  "country": "Bulgaria",
+  "code": "bg"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1ed.svg",
+  "country": "Bahrain",
+  "code": "bh"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1ee.svg",
+  "country": "Burundi",
+  "code": "bi"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1ef.svg",
+  "country": "Benin",
+  "code": "bj"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f1.svg",
+  "country": "St. Barthélemy",
+  "code": "bl"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f2.svg",
+  "country": "Bermuda",
+  "code": "bm"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f3.svg",
+  "country": "Brunei",
+  "code": "bn"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f4.svg",
+  "country": "Bolivia",
+  "code": "bo"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f6.svg",
+  "country": "Caribbean Netherlands"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f7.svg",
+  "country": "Brazil",
+  "code": "br"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f8.svg",
+  "country": "Bahamas",
+  "code": "bs"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1f9.svg",
+  "country": "Bhutan",
+  "code": "bt"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1fb.svg",
+  "country": "Bouvet Island",
+  "code": "bv"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1fc.svg",
+  "country": "Botswana",
+  "code": "bw"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1fe.svg",
+  "country": "Belarus",
+  "code": "by"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e7-1f1ff.svg",
+  "country": "Belize",
+  "code": "bz"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1e6.svg",
+  "country": "Canada",
+  "code": "ca"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1e8.svg",
+  "country": "Cocos (Keeling) Islands",
+  "code": "cc"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1e9.svg",
+  "country": "Congo - Kinshasa",
+  "code": "cg"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1eb.svg",
+  "country": "Central African Republic",
+  "code": "cf"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1ec.svg",
+  "country": "Congo - Brazzaville",
+  "code": "cd"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1ed.svg",
+  "country": "Switzerland",
+  "code": "ch"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1ee.svg",
+  "country": "Côte d’Ivoire",
+  "code": "ci"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f0.svg",
+  "country": "Cook Islands",
+  "code": "ck"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f1.svg",
+  "country": "Chile",
+  "code": "cl"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f2.svg",
+  "country": "Cameroon",
+  "code": "cm"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f3.svg",
+  "country": "China",
+  "code": "cn"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f4.svg",
+  "country": "Colombia",
+  "code": "co"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f5.svg",
+  "country": "Clipperton Island",
+  "code": "cp"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1f7.svg",
+  "country": "Costa Rica",
+  "code": "cr"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1fa.svg",
+  "country": "Cuba",
+  "code": "cu"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1fb.svg",
+  "country": "Cape Verde",
+  "code": "cv"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1fc.svg",
+  "country": "Curaçao",
+  "code": "cw"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1fd.svg",
+  "country": "Christmas Island",
+  "code": "cx"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1fe.svg",
+  "country": "Cyprus",
+  "code": "cy"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e8-1f1ff.svg",
+  "country": "Czechia",
+  "code": "cz"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1ea.svg",
+  "country": "Germany",
+  "code": "de"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1ec.svg",
+  "country": "Diego Garcia",
+  "code": "dg"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1ef.svg",
+  "country": "Djibouti",
+  "code": "dj"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1f0.svg",
+  "country": "Denmark",
+  "code": "dk"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1f2.svg",
+  "country": "Dominica",
+  "code": "dm"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1f4.svg",
+  "country": "Dominican Republic",
+  "code": "do"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1e9-1f1ff.svg",
+  "country": "Algeria",
+  "code": "dz"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1e6.svg",
+  "country": "Ceuta & Melilla",
+  "code": "ea"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1e8.svg",
+  "country": "Ecuador",
+  "code": "ec"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1ea.svg",
+  "country": "Estonia",
+  "code": "ee"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1ec.svg",
+  "country": "Egypt",
+  "code": "eg"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1ed.svg",
+  "country": "Western Sahara",
+  "code": "eh"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1f7.svg",
+  "country": "Eritrea",
+  "code": "er"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1f8.svg",
+  "country": "Spain",
+  "code": "es"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1f9.svg",
+  "country": "Ethiopia",
+  "code": "et"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ea-1f1fa.svg",
+  "country": "European Union",
+  "code": "eu"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1eb-1f1ee.svg",
+  "country": "Finland",
+  "code": "fi"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1eb-1f1ef.svg",
+  "country": "Fiji",
+  "code": "fj"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1eb-1f1f0.svg",
+  "country": "Falkland Islands",
+  "code": "fk"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1eb-1f1f2.svg",
+  "country": "Micronesia",
+  "code": "fm"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1eb-1f1f4.svg",
+  "country": "Faroe Islands",
+  "code": "fo"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1eb-1f1f7.svg",
+  "country": "France",
+  "code": "fr"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1e6.svg",
+  "country": "Gabon",
+  "code": "ga"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1e7.svg",
+  "country": "United Kingdom",
+  "code": "gb"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1e9.svg",
+  "country": "Grenada",
+  "code": "gd"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1ea.svg",
+  "country": "Georgia",
+  "code": "ge"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1eb.svg",
+  "country": "French Guiana",
+  "code": "gf"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1ec.svg",
+  "country": "Guernsey",
+  "code": "gg"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1ed.svg",
+  "country": "Ghana",
+  "code": "gh"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1ee.svg",
+  "country": "Gibraltar",
+  "code": "gi"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f1.svg",
+  "country": "Greenland",
+  "code": "gl"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f2.svg",
+  "country": "Gambia",
+  "code": "gm"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f3.svg",
+  "country": "Guinea",
+  "code": "gn"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f5.svg",
+  "country": "Guadeloupe",
+  "code": "gp"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f6.svg",
+  "country": "Equatorial Guinea",
+  "code": "gq"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f7.svg",
+  "country": "Greece",
+  "code": "gr"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f8.svg",
+  "country": "South Georgia & South', Sandwich Islands",
+  "code": "gs"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1f9.svg",
+  "country": "Guatemala",
+  "code": "gt"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1fa.svg",
+  "country": "Guam",
+  "code": "gu"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1fc.svg",
+  "country": "Guinea-Bissau",
+  "code": "gw"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ec-1f1fe.svg",
+  "country": "Guyana",
+  "code": "gy"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ed-1f1f0.svg",
+  "country": "Hong Kong SAR China",
+  "code": "hk"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ed-1f1f2.svg",
+  "country": "Heard & McDonald Islands",
+  "code": "hm"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ed-1f1f3.svg",
+  "country": "Honduras",
+  "code": "hn"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ed-1f1f7.svg",
+  "country": "Croatia",
+  "code": "hr"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ed-1f1f9.svg",
+  "country": "Haiti",
+  "code": "ht"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ed-1f1fa.svg",
+  "country": "Hungary",
+  "code": "hu"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1e8.svg",
+  "country": "Canary Islands",
+  "code": "ic"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1e9.svg",
+  "country": "Indonesia",
+  "code": "id"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1ea.svg",
+  "country": "Ireland",
+  "code": "ie"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f1.svg",
+  "country": "Israel",
+  "code": "il"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f2.svg",
+  "country": "Isle of Man",
+  "code": "im"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f3.svg",
+  "country": "India",
+  "code": "in"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f4.svg",
+  "country": "British Indian Ocean Territory",
+  "code": "io"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f6.svg",
+  "country": "Iraq",
+  "code": "iq"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f7.svg",
+  "country": "Iran"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f8.svg",
+  "country": "Iceland",
+  "code": "is"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ee-1f1f9.svg",
+  "country": "Italy",
+  "code": "it"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ef-1f1ea.svg",
+  "country": "Jersey",
+  "code": "je"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ef-1f1f2.svg",
+  "country": "Jamaica",
+  "code": "jm"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ef-1f1f4.svg",
+  "country": "Jordan",
+  "code": "jo"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ef-1f1f5.svg",
+  "country": "Japan",
+  "code": "jp"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1ea.svg",
+  "country": "Kenya",
+  "code": "ke"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1ec.svg",
+  "country": "Kyrgyzstan",
+  "code": "kg"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1ed.svg",
+  "country": "Cambodia",
+  "code": "kh"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1ee.svg",
+  "country": "Kiribati",
+  "code": "ki"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1f2.svg",
+  "country": "Comoros",
+  "code": "km"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1f3.svg",
+  "country": "St. Kitts & Nevis",
+  "code": "kn"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1f5.svg",
+  "country": "North Korea",
+  "code": "kp"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1f7.svg",
+  "country": "South Korea",
+  "code": "kr"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1fc.svg",
+  "country": "Kuwait",
+  "code": "kw"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1fe.svg",
+  "country": "Cayman Islands",
+  "code": "ky"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f0-1f1ff.svg",
+  "country": "Kazakhstan",
+  "code": "kz"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1e6.svg",
+  "country": "Laos",
+  "code": "la"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1e7.svg",
+  "country": "Lebanon",
+  "code": "lb"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1e8.svg",
+  "country": "St. Lucia",
+  "code": "lc"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1ee.svg",
+  "country": "Liechtenstein",
+  "code": "li"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1f0.svg",
+  "country": "Sri Lanka",
+  "code": "lk"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1f7.svg",
+  "country": "Liberia",
+  "code": "lr"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1f8.svg",
+  "country": "Lesotho",
+  "code": "ls"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1f9.svg",
+  "country": "Lithuania",
+  "code": "lt"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1fa.svg",
+  "country": "Luxembourg",
+  "code": "lu"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1fb.svg",
+  "country": "Latvia",
+  "code": "lv"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f1-1f1fe.svg",
+  "country": "Libya",
+  "code": "ly"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1e6.svg",
+  "country": "Morocco",
+  "code": "ma"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1e8.svg",
+  "country": "Monaco",
+  "code": "mc"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1e9.svg",
+  "country": "Moldova",
+  "code": "md"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1ea.svg",
+  "country": "Montenegro",
+  "code": "me"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1eb.svg",
+  "country": "St. Martin",
+  "code": "mf"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1ec.svg",
+  "country": "Madagascar",
+  "code": "mg"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1ed.svg",
+  "country": "Marshall Islands",
+  "code": "mh"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f0.svg",
+  "country": "North Macedonia",
+  "code": "mk"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f1.svg",
+  "country": "Mali",
+  "code": "ml"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f2.svg",
+  "country": "Myanmar (Burma)",
+  "code": "mm"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f3.svg",
+  "country": "Mongolia",
+  "code": "mn"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f4.svg",
+  "country": "Macao Sar China",
+  "code": "mo"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f5.svg",
+  "country": "Northern Mariana Islands",
+  "code": "mp"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f6.svg",
+  "country": "Martinique",
+  "code": "mq"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f7.svg",
+  "country": "Mauritania",
+  "code": "mr"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f8.svg",
+  "country": "Montserrat",
+  "code": "ms"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1f9.svg",
+  "country": "Malta",
+  "code": "mt"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1fa.svg",
+  "country": "Mauritius",
+  "code": "mu"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1fb.svg",
+  "country": "Maldives",
+  "code": "mv"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1fc.svg",
+  "country": "Malawi",
+  "code": "mw"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1fd.svg",
+  "country": "Mexico",
+  "code": "mx"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1fe.svg",
+  "country": "Malaysia",
+  "code": "my"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f2-1f1ff.svg",
+  "country": "Mozambique",
+  "code": "mz"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1e6.svg",
+  "country": "Namibia",
+  "code": "na"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1e8.svg",
+  "country": "New Caledonia",
+  "code": "nc"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1ea.svg",
+  "country": "Niger",
+  "code": "ne"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1eb.svg",
+  "country": "Norfolk Island",
+  "code": "nf"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1ec.svg",
+  "country": "Nigeria",
+  "code": "ng"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1ee.svg",
+  "country": "Nicaragua",
+  "code": "ni"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1f1.svg",
+  "country": "Netherlands",
+  "code": "nl"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1f4.svg",
+  "country": "Norway",
+  "code": "no"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1f5.svg",
+  "country": "Nepal",
+  "code": "np"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1f7.svg",
+  "country": "Nauru",
+  "code": "nr"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1fa.svg",
+  "country": "Niue",
+  "code": "nu"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f3-1f1ff.svg",
+  "country": "New Zealand",
+  "code": "nz"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f4-1f1f2.svg",
+  "country": "Oman",
+  "code": "om"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1e6.svg",
+  "country": "Panama",
+  "code": "pa"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1ea.svg",
+  "country": "Peru",
+  "code": "pe"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1eb.svg",
+  "country": "French Polynesia",
+  "code": "pf"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1ec.svg",
+  "country": "Papua New Guinea",
+  "code": "pg"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1ed.svg",
+  "country": "Philippines",
+  "code": "ph"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f0.svg",
+  "country": "Pakistan",
+  "code": "pk"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f1.svg",
+  "country": "Poland",
+  "code": "pl"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f2.svg",
+  "country": "St. Pierre & Miquelon",
+  "code": "pm"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f3.svg",
+  "country": "Pitcairn Islands",
+  "code": "pn"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f7.svg",
+  "country": "Puerto Rico",
+  "code": "pr"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f8.svg",
+  "country": "Palestinian Territories",
+  "code": "ps"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1f9.svg",
+  "country": "Portugal",
+  "code": "pt"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1fc.svg",
+  "country": "Palau",
+  "code": "pw"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f5-1f1fe.svg",
+  "country": "Paraguay",
+  "code": "py"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f6-1f1e6.svg",
+  "country": "Qatar",
+  "code": "qa"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f7-1f1ea.svg",
+  "country": "Réunion",
+  "code": "re"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f7-1f1f4.svg",
+  "country": "Romania",
+  "code": "ro"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f7-1f1f8.svg",
+  "country": "Serbia",
+  "code": "yu"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f7-1f1fa.svg",
+  "country": "Russia",
+  "code": "ru"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f7-1f1fc.svg",
+  "country": "Rwanda",
+  "code": "rw"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1e6.svg",
+  "country": "Saudi Arabia",
+  "code": "sa"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1e7.svg",
+  "country": "Solomon Islands",
+  "code": "sb"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1e8.svg",
+  "country": "Seychelles",
+  "code": "sc"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1e9.svg",
+  "country": "Sudan",
+  "code": "sd"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1ea.svg",
+  "country": "Sweden",
+  "code": "se"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1ec.svg",
+  "country": "Singapore",
+  "code": "sg"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1ed.svg",
+  "country": "St. Helena",
+  "code": "sh"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1ee.svg",
+  "country": "Slovenia",
+  "code": "si"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1ef.svg",
+  "country": "Svalbard & Jan Mayen",
+  "code": "sj"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f0.svg",
+  "country": "Slovakia",
+  "code": "sk"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f1.svg",
+  "country": "Sierra Leone",
+  "code": "sl"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f2.svg",
+  "country": "San Marino",
+  "code": "sm"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f3.svg",
+  "country": "Senegal",
+  "code": "sn"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f4.svg",
+  "country": "Somalia",
+  "code": "so"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f7.svg",
+  "country": "Suriname",
+  "code": "sr"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f8.svg",
+  "country": "South Sudan",
+  "code": "ss"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1f9.svg",
+  "country": "São Tomé & Príncipe",
+  "code": "st"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1fb.svg",
+  "country": "El Salvador",
+  "code": "sv"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1fd.svg",
+  "country": "Sint Maarten",
+  "code": "sx"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1fe.svg",
+  "country": "Syria",
+  "code": "sy"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f8-1f1ff.svg",
+  "country": "Eswatini",
+  "code": "sz"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1e6.svg",
+  "country": "Tristan Da Cunha",
+  "code": "sh"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1e8.svg",
+  "country": "Turks & Caicos Islands",
+  "code": "tc"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1e9.svg",
+  "country": "Chad",
+  "code": "td"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1eb.svg",
+  "country": "French Southern Territories",
+  "code": "tf"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1ec.svg",
+  "country": "Togo",
+  "code": "tg"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1ed.svg",
+  "country": "Thailand",
+  "code": "th"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1ef.svg",
+  "country": "Tajikistan",
+  "code": "tj"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f0.svg",
+  "country": "Tokelau",
+  "code": "tk"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f1.svg",
+  "country": "Timor-Leste",
+  "code": "tl"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f2.svg",
+  "country": "Turkmenistan",
+  "code": "tm"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f3.svg",
+  "country": "Tunisia",
+  "code": "tn"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f4.svg",
+  "country": "Tonga",
+  "code": "to"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f7.svg",
+  "country": "Turkey",
+  "code": "tr"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1f9.svg",
+  "country": "Trinidad & Tobago",
+  "code": "tt"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1fb.svg",
+  "country": "Tuvalu",
+  "code": "tv"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1fc.svg",
+  "country": "Taiwan",
+  "code": "tw"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1f9-1f1ff.svg",
+  "country": "Tanzania",
+  "code": "tz"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1e6.svg",
+  "country": "Ukraine",
+  "code": "ua"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1ec.svg",
+  "country": "Uganda",
+  "code": "ug"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1f2.svg",
+  "country": "U.S. Outlying Islands",
+  "code": "um"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1f3.svg",
+  "country": "United Nations",
+  "code": "un"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1f8.svg",
+  "country": "United States",
+  "code": "us"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1fe.svg",
+  "country": "Uruguay",
+  "code": "uy"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fa-1f1ff.svg",
+  "country": "Uzbekistan",
+  "code": "uz"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1e6.svg",
+  "country": "Vatican City",
+  "code": "va"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1e8.svg",
+  "country": "St. Vincent & Grenadines",
+  "code": "vc"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1ea.svg",
+  "country": "Venezuela",
+  "code": "ve"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1ec.svg",
+  "country": "British Virgin Islands",
+  "code": "vg"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1ee.svg",
+  "country": "U.S. Virgin Islands",
+  "code": "vi"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1f3.svg",
+  "country": "Vietnam",
+  "code": "vn"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fb-1f1fa.svg",
+  "country": "Vanuatu",
+  "code": "vu"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fc-1f1eb.svg",
+  "country": "Wallis & Futuna",
+  "code": "wf"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fc-1f1f8.svg",
+  "country": "Samoa",
+  "code": "ws"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fd-1f1f0.svg",
+  "country": "Kosovo",
+  "code": "xk"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fe-1f1ea.svg",
+  "country": "Yemen",
+  "code": "ye"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1fe-1f1f9.svg",
+  "country": "Mayotte",
+  "code": "yt"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ff-1f1e6.svg",
+  "country": "South Africa",
+  "code": "za"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ff-1f1f2.svg",
+  "country": "Zambia",
+  "code": "zm"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f1ff-1f1fc.svg",
+  "country": "Zimbabwe",
+  "code": "zw"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f3f4-e0067-e0062-e0065-e006e-e0067-e007f.svg",
+  "country": "England",
+  "code": "uk"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f3f4-e0067-e0062-e0073-e0063-e0074-e007f.svg",
+  "country": "Scotland",
+  "code": "uk"
+}, {
+  "flag": "https://twemoji.maxcdn.com/2/svg/1f3f4-e0067-e0062-e0077-e006c-e0073-e007f.svg",
+  "country": "Wales",
+  "code": "uk"
+}];
+
+const useClickOutside = (ref, callback) => {
+  useEffect(() => {
+    const element = ref === null || ref === void 0 ? void 0 : ref.current;
+    const listener = evt => {
+      if (!element || element.contains(evt.target)) return;
+      callback(evt);
+    };
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, callback]);
+};
+const useKeyPress = targetKey => {
+  const [pressed, setPressed] = useState(false);
+  useEffect(() => {
+    const onKeydown = e => {
+      const keyPressed = e.key;
+      if (keyPressed === targetKey) setPressed(true);
+    };
+    const onKeyup = e => {
+      const keyPressed = e.key;
+      if (keyPressed === targetKey) setPressed(false);
+    };
+    window.addEventListener('keydown', onKeydown);
+    window.addEventListener('keyup', onKeyup);
+    return () => {
+      window.removeEventListener('keydown', onKeydown);
+      window.removeEventListener('keyup', onKeyup);
+    };
+  }, [targetKey]);
+  return pressed;
+};
+const CountrySelectStyled = styled.div.withConfig({
+  displayName: "country__CountrySelectStyled",
+  componentId: "sc-93yqgk-0"
+})(["", ";"], ({
+  theme
+}) => {
+  return css(["div[aria-hidden=\"true\"]{display:none;}[aria-invalid='true']{background:#F9D7D7!important;border:1px solid #ca2121 !important;}[aria-invalid='false']{background:#D5FCE9 !important;border:1px solid #008A48 !important;}.country-select__label{display:block;margin:0 0 8px;}.country-select__wrapper{padding:16px 8px;margin:8px 0 0;}.country-select__btn--toggle{padding:8px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:inherit;background:#fff;border-radius:3px;border:1px solid #949494;height:40px;width:100%;max-width:100%;padding:8px;.country-select__icons{margin-left:auto;display:flex;align-items:center;}}.country-select__input{margin:0 8px 16px;font-family:inherit;background-color:#fff;border-radius:3px;border:1px solid #949494;height:40px;width:100%;max-width:calc(100% - 16px);padding:8px;}.country-select__options{overflow-y:scroll;height:247px;list-style:none;padding:0;margin:0;}.country-select__option{padding:8px;display:flex;align-items:center;cursor:pointer;background:transparent;border:none;width:100%;svg{margin-right:4px;}}img{margin-left:4px;width:16px;height:16px;}.required{color:", ";}"], theme.colors.red_darker);
+});
+const CountrySelect = ({
+  formId,
+  id,
+  field,
+  validations,
+  defaultValue
+}) => {
+  var _options$filter, _options$filter$;
+  const [options, setOptions] = useState(countries);
+  const [selected, setSelected] = useState(defaultValue || '');
+  const [toggled, toggleDropdown] = useState(false);
+  useEffect(() => {
+    if (defaultValue) {
+      var _countries$filter, _countries$filter$;
+      const defaultCountry = ((_countries$filter = countries.filter(({
+        country
+      }) => country === defaultValue)) === null || _countries$filter === void 0 ? void 0 : (_countries$filter$ = _countries$filter[0]) === null || _countries$filter$ === void 0 ? void 0 : _countries$filter$.country) || '';
+      if (defaultCountry) setSelected(defaultCountry);
+    }
+  }, [defaultValue]);
+  const isRequired = validations && validations.required ? true : false;
+  const onChange = value => {
+    if (value && value.length >= 1) {
+      const opts = countries;
+      const optsfiltered = opts.filter(({
+        country
+      }) => country.toLowerCase().includes(value.toLowerCase()));
+      setOptions(optsfiltered);
+    } else setOptions(countries);
+  };
+
+  // Validation
+  const dispatch = useDispatch();
+  const selectFormValidationSent = makeSelectFormValidationSent(formId);
+  const formValidationSent = useSelector(selectFormValidationSent);
+  const [a11yInvalid, setA11yInvalid] = useState('');
+  useEffect(() => {
+    if (formValidationSent) setA11yInvalid(doA11yValidation(selected, field, true));
+  }, [formValidationSent]);
+  const elOptionRef = useRef();
+  const elContainerRef = useRef();
+  const close = () => toggleDropdown(false);
+  useClickOutside(elContainerRef, close);
+
+  // Keyboard Navigation
+  const isArrowUpPressed = useKeyPress('ArrowUp');
+  const isArrowDownPressed = useKeyPress('ArrowDown');
+  const isEscapePressed = useKeyPress('Escape');
+  const [initState, setInitState] = useState({
+    selectedIndex: -1
+  });
+  const updateState = (type, i) => {
+    const max = options.length - 1;
+    if (type === 'ARROW_UP') {
+      let updatedState = {
+        ...initState
+      };
+      const updatedIndex = updatedState.selectedIndex !== 0 ? updatedState.selectedIndex - 1 : max;
+      updatedState.selectedIndex = updatedIndex;
+      setInitState(updatedState);
+    }
+    if (type === 'ARROW_DOWN') {
+      let updatedState = {
+        ...initState
+      };
+      const updatedIndex = updatedState.selectedIndex !== max ? updatedState.selectedIndex + 1 : 0;
+      updatedState.selectedIndex = updatedIndex;
+      setInitState(updatedState);
+    }
+    if (type === 'SELECT') {
+      let updatedState = {
+        ...initState
+      };
+      updatedState.selectedIndex = i;
+      setInitState(updatedState);
+    }
+  };
+  useEffect(() => {
+    if (toggled) {
+      if (isArrowDownPressed) updateState('ARROW_DOWN');
+      if (isArrowUpPressed) updateState('ARROW_UP');
+      if (isEscapePressed) toggleDropdown(false);
+      doFocus();
+    }
+  }, [toggled, isArrowDownPressed, isArrowUpPressed, isEscapePressed]);
+  const doFocus = () => {
+    var _element$;
+    const attr = `[aria-pressed="true"]`;
+    const element = document.querySelectorAll(attr);
+    if (element && element.length >= 1) (_element$ = element[0]) === null || _element$ === void 0 ? void 0 : _element$.focus();
+  };
+  return /*#__PURE__*/React.createElement(CountrySelectStyled, {
+    ref: elContainerRef,
+    role: "region",
+    id: "country",
+    "aria-live": "polite"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "country-select__label",
+    role: "label",
+    "aria-label": `Select a country ${isRequired ? 'required' : 'optional'} ${selected}`,
+    htmlFor: "country"
+  }, "Select a country", isRequired ? /*#__PURE__*/React.createElement("span", {
+    className: "label__required"
+  }, "(required)") : /*#__PURE__*/React.createElement("span", {
+    className: "label__optional"
+  }, "(optional)")), /*#__PURE__*/React.createElement("button", {
+    className: "country-select__btn--toggle",
+    "aria-controls": "country",
+    "aria-invalid": a11yInvalid,
+    "aria-expanded": toggled,
+    onClick: e => {
+      e.preventDefault();
+      toggleDropdown(!toggled);
+    }
+  }, selected, selected && /*#__PURE__*/React.createElement("img", {
+    src: (_options$filter = options.filter(opt => opt.country === selected)) === null || _options$filter === void 0 ? void 0 : (_options$filter$ = _options$filter[0]) === null || _options$filter$ === void 0 ? void 0 : _options$filter$.flag,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Open the Country select searchable dropdown"), /*#__PURE__*/React.createElement("div", {
+    className: "country-select__icons"
+  }, toggled ? /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    fill: "none",
+    focusable: "false",
+    "aria-hidden": "true",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#333",
+    d: "m7 15 4.293-4.293L15.586 15 17 13.586l-5.707-5.707-5.707 5.707L7 15Z"
+  })) : /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    fill: "none",
+    focusable: "false",
+    "aria-hidden": "true",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#333",
+    d: "m16 8-4.293 4.293L7.414 8 6 9.414l5.707 5.707 5.707-5.707L16 8Z"
+  })), a11yInvalid == 'true' && /*#__PURE__*/React.createElement("svg", {
+    className: "svg",
+    xmlns: "http://www.w3.org/2000/svg",
+    focusable: "false",
+    "aria-hidden": "true",
+    role: "presentation",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#333",
+    d: "M12.2 3.807a.664.664 0 0 0-.94 0L8 7.06 4.74 3.8a.665.665 0 0 0-.94.94L7.06 8 3.8 11.26a.664.664 0 1 0 .94.94L8 8.94l3.26 3.26a.665.665 0 0 0 .94-.94L8.94 8l3.26-3.26a.668.668 0 0 0 0-.933Z"
+  })), a11yInvalid == 'false' && /*#__PURE__*/React.createElement("svg", {
+    className: "svg",
+    xmlns: "http://www.w3.org/2000/svg",
+    focusable: "false",
+    "aria-hidden": "true",
+    role: "presentation",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#333",
+    d: "m2 8 4.418 4.667L14 4.659l-1.246-1.326-6.336 6.692-3.18-3.332L2 8Z"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "country-select__wrapper",
+    "aria-hidden": !toggled
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "search-country-name",
+    className: "sr-only"
+  }, "Search country name"), /*#__PURE__*/React.createElement("input", {
+    id: "search-country-name",
+    className: "country-select__input",
+    placeholder: "Search country name",
+    onChange: e => {
+      e.preventDefault();
+      onChange(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement("ul", {
+    id: "contry",
+    role: "select",
+    name: "country",
+    className: "country-select__options"
+  }, options.map((option, i) => {
+    const isSelected = selected === option.country;
+    return /*#__PURE__*/React.createElement("li", {
+      key: i,
+      "aria-hidden": isSelected,
+      "aria-selected": isSelected,
+      role: "option"
+    }, /*#__PURE__*/React.createElement(CountryOption, {
+      onClick: e => {
+        e.preventDefault();
+        setSelected(option.country);
+        dispatch(setValue(formId, id, e.target.value));
+        setA11yInvalid(doA11yValidation(e.target.value, field, formValidationSent));
+      },
+      onKeyDown: e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          setSelected(option.country);
+          dispatch(setValue(formId, id, e.target.value));
+          setA11yInvalid(doA11yValidation(e.target.value, field, formValidationSent));
+          updateState('SELECT', i);
+          e.target.blur();
+        }
+      },
+      ref: elOptionRef,
+      value: option.country,
+      "aria-pressed": i === initState.selectedIndex,
+      tabIndex: 0
+    }, isSelected && /*#__PURE__*/React.createElement("svg", {
+      focusable: "false",
+      "aria-hidden": "true",
+      role: "presentation",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16px",
+      height: "16px",
+      viewBox: "0 0 24 24",
+      fill: "none"
+    }, /*#__PURE__*/React.createElement("path", {
+      fill: "#333",
+      d: "m3 12 6.627 7L21 6.988 19.131 5 9.627 15.038 4.856 10.04 3 12Z"
+    })), option.country, /*#__PURE__*/React.createElement("img", {
+      src: option.flag,
+      alt: ""
+    })));
+  }))));
+};
+const CountryOption = /*#__PURE__*/forwardRef(function SelectItem(props, ref = null) {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: "country-select__option",
+    role: "option",
+    ref: ref
+  }, rest), children);
+});
+
 const FormComposer = ({
   fields,
   formData,
@@ -1829,13 +3060,11 @@ const FormComposer = ({
   defaultLanguage,
   errors,
   useDefaultTheme,
-  entries,
-  setCheckboxValue
+  entries
 }) => {
   if (!fields || fields.length < 1) return null;
   return fields.map((field, idx) => {
     if (!field) return null;
-
     switch (field.type) {
       case 'number':
       case 'textfield':
@@ -1857,7 +3086,6 @@ const FormComposer = ({
             useDefaultTheme: useDefaultTheme
           });
         }
-
       case 'textarea':
         {
           return /*#__PURE__*/React.createElement(Textarea, {
@@ -1877,7 +3105,6 @@ const FormComposer = ({
             errors: errors
           });
         }
-
       case 'dropdown':
         {
           return /*#__PURE__*/React.createElement(Dropdown, {
@@ -1892,7 +3119,6 @@ const FormComposer = ({
             useDefaultTheme: useDefaultTheme
           });
         }
-
       case 'checkbox':
         {
           return /*#__PURE__*/React.createElement(Checkbox, {
@@ -1906,11 +3132,9 @@ const FormComposer = ({
             formId: formId,
             defaultValue: formData && formData[field.id] || field.default,
             type: field.dataType === 'boolean' ? 'single' : 'multiple',
-            useDefaultTheme: useDefaultTheme,
-            setCheckboxValue: setCheckboxValue
+            useDefaultTheme: useDefaultTheme
           });
         }
-
       case 'radio':
         {
           return /*#__PURE__*/React.createElement(RadioButton, {
@@ -1925,7 +3149,6 @@ const FormComposer = ({
             useDefaultTheme: useDefaultTheme
           });
         }
-
       case 'entryPicker':
         {
           const type = field.dataType === 'objectArray' ? 'checkbox' : 'radio';
@@ -1942,7 +3165,6 @@ const FormComposer = ({
             formId: formId
           });
         }
-
       case 'date':
         {
           return /*#__PURE__*/React.createElement(SingleDate, {
@@ -1956,7 +3178,6 @@ const FormComposer = ({
             useDefaultTheme: useDefaultTheme
           });
         }
-
       case 'dateRange':
         {
           return /*#__PURE__*/React.createElement(DateRange, {
@@ -1969,7 +3190,6 @@ const FormComposer = ({
             useDefaultTheme: useDefaultTheme
           });
         }
-
       case 'hidden':
         {
           return /*#__PURE__*/React.createElement(HiddenField, {
@@ -1982,10 +3202,21 @@ const FormComposer = ({
             placeholder: field.editor
           });
         }
+      case 'country':
+        {
+          var _field$default;
+          return /*#__PURE__*/React.createElement(CountrySelect, {
+            key: `${field.id}-${idx}`,
+            formId: formId,
+            field: field,
+            id: field.id,
+            validations: field.validations,
+            defaultValue: field === null || field === void 0 ? void 0 : (_field$default = field.default) === null || _field$default === void 0 ? void 0 : _field$default[defaultLanguage]
+          });
+        }
     }
   });
 };
-
 FormComposer.propTypes = {
   fields: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   formData: PropTypes.object,
@@ -1996,8 +3227,7 @@ FormComposer.propTypes = {
   setDateRangeValues: PropTypes.func,
   defaultLanguage: PropTypes.string,
   errors: PropTypes.array,
-  useDefaultTheme: PropTypes.bool,
-  setCheckboxValue: PropTypes.func
+  useDefaultTheme: PropTypes.bool
 };
 
 const Loader = ({
@@ -2058,7 +3288,7 @@ const Button = ({
   useDefaultTheme
 }) => {
   return /*#__PURE__*/React.createElement(ButtonStyled, {
-    className: `${className ? className : ''} btnSubmit`,
+    className: className,
     type: type,
     onClick: () => action(),
     disabled: loading,
@@ -2106,23 +3336,13 @@ const Form = ({
   onCustomSubmit
 }) => {
   const dispatch = useDispatch();
-
   const _setFormId = formId => dispatch(setFormId(formId));
-
   const _setValue = (formId, id, value) => dispatch(setValue(formId, id, value));
-
-  const _setCheckboxValue = (formId, id, value, isChecked) => dispatch(setCheckboxValue(formId, id, value, isChecked));
-
   const _setDateRangeValues = (formId, id, dateType, value) => dispatch(setDateRangeValues(formId, id, dateType, value));
-
   const _onValidateField = (formId, id, value) => dispatch(onValidateField(formId, id, value));
-
   const _doTogglePageForward = (formId, pageIndex) => dispatch(doTogglePageForward(formId, pageIndex));
-
   const _doTogglePageBack = (formId, pageIndex) => dispatch(doTogglePageBack(formId, pageIndex));
-
   const _onSubmit = formId => dispatch(onSubmit(formId));
-
   useEffect(() => {
     if (formId) _setFormId(formId);
   }, [formId]);
@@ -2134,7 +3354,6 @@ const Form = ({
   const selectFormFieldErrors = makeSelectFormFieldErrors(formId);
   const selectFormEntries = makeSelectFormEntries(formId);
   const selectFormPostData = makeSelectFormPostData(formId);
-  const selectFormValidationSent = makeSelectFormValidationSent(formId);
   const status = useSelector(selectFormStatus);
   const fields = useSelector(selectFormFields);
   const pagingInfo = useSelector(selectPagingInfo);
@@ -2143,8 +3362,6 @@ const Form = ({
   const errors = useSelector(selectFormFieldErrors);
   const entries = useSelector(selectFormEntries);
   const formData = useSelector(selectFormPostData);
-  const validate = useSelector(selectFormValidationSent);
-
   if (pagingInfo && pagingInfo.pageCount > 1) {
     const isLastPage = pagingInfo.pageCount == pagingInfo.pageIndex + 1;
     return /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -2153,12 +3370,7 @@ const Form = ({
       className: className,
       id: formId,
       useDefaultTheme: useDefaultTheme
-    }, !(status !== null && status !== void 0 && status.hasSuccess) && !(status !== null && status !== void 0 && status.isLoading) && /*#__PURE__*/React.createElement(React.Fragment, null, pagingInfo.pageIndex > 0 && /*#__PURE__*/React.createElement(Button, {
-      type: "button",
-      text: "Go Back",
-      action: () => _doTogglePageBack(formId, pagingInfo.pageIndex - 1),
-      useDefaultTheme: useDefaultTheme
-    }), /*#__PURE__*/React.createElement(FormComposer, {
+    }, !(status !== null && status !== void 0 && status.hasSuccess) && !(status !== null && status !== void 0 && status.isLoading) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormComposer, {
       fields: fields,
       formData: formData,
       formId: formId,
@@ -2169,20 +3381,26 @@ const Form = ({
       pagingInfo: pagingInfo,
       useDefaultTheme: useDefaultTheme,
       entries: entries,
-      setDateRangeValues: _setDateRangeValues,
-      setCheckboxValue: _setCheckboxValue
+      setDateRangeValues: _setDateRangeValues
+    }), pagingInfo.pageIndex > 0 && /*#__PURE__*/React.createElement(Button, {
+      className: "form__btn--prev",
+      type: "button",
+      text: "Go Back",
+      action: () => _doTogglePageBack(formId, pagingInfo.pageIndex - 1),
+      useDefaultTheme: useDefaultTheme
     }), !isLastPage && /*#__PURE__*/React.createElement(Button, {
+      className: "form__btn--next",
       type: "button",
       text: "Next",
       action: () => _doTogglePageForward(formId, pagingInfo.pageIndex + 1),
       useDefaultTheme: useDefaultTheme
     }), isLastPage && /*#__PURE__*/React.createElement(Button, {
+      className: "form__btn--submit",
       text: (settings === null || settings === void 0 ? void 0 : settings.submitButtonText) || "Submit",
       type: "button",
-      loading: status === null || status === void 0 ? void 0 : status.isLoading,
+      loading: status === null || status === void 0 ? void 0 : status.isSubmitting,
       action: () => {
         _onSubmit(formId);
-
         if (onCustomSubmit) onCustomSubmit();
       },
       useDefaultTheme: useDefaultTheme
@@ -2193,7 +3411,7 @@ const Form = ({
       color: "#333"
     }), (status === null || status === void 0 ? void 0 : status.hasSuccess) && (status === null || status === void 0 ? void 0 : status.messages.success) && /*#__PURE__*/React.createElement("p", {
       className: "success-message"
-    }, status.messages.success), (errors === null || errors === void 0 ? void 0 : errors.length) >= 1 && validate && /*#__PURE__*/React.createElement("div", {
+    }, status.messages.success), (errors === null || errors === void 0 ? void 0 : errors.length) >= 1 && /*#__PURE__*/React.createElement("div", {
       className: "form__errors",
       role: "alert"
     }, errors === null || errors === void 0 ? void 0 : errors.map(({
@@ -2221,15 +3439,14 @@ const Form = ({
       defaultLanguage: defaultLanguage,
       errors: errors,
       useDefaultTheme: useDefaultTheme,
-      entries: entries,
-      setCheckboxValue: _setCheckboxValue
+      entries: entries
     }), /*#__PURE__*/React.createElement(Button, {
+      className: "form__btn--submit",
       loading: status === null || status === void 0 ? void 0 : status.isSubmitting,
       text: (settings === null || settings === void 0 ? void 0 : settings.submitButtonText) || "Submit",
       type: "button",
       action: () => {
         _onSubmit(formId);
-
         if (onCustomSubmit) onCustomSubmit();
       },
       useDefaultTheme: useDefaultTheme
@@ -2240,7 +3457,7 @@ const Form = ({
       color: "#333"
     }), (status === null || status === void 0 ? void 0 : status.hasSuccess) && (status === null || status === void 0 ? void 0 : status.messages.success) && /*#__PURE__*/React.createElement("p", {
       className: "success-message"
-    }, status.messages.success), (errors === null || errors === void 0 ? void 0 : errors.length) >= 1 && validate && /*#__PURE__*/React.createElement("div", {
+    }, status.messages.success), (errors === null || errors === void 0 ? void 0 : errors.length) >= 1 && /*#__PURE__*/React.createElement("div", {
       className: "form__errors",
       role: "alert"
     }, errors === null || errors === void 0 ? void 0 : errors.map(({
@@ -2254,7 +3471,6 @@ const Form = ({
     }))));
   }
 };
-
 Form.propTypes = {
   className: PropTypes.string,
   formId: PropTypes.string,