willba-component-library 0.3.26 → 0.4.0

package/lib/index.js

@@ -242,6 +242,331 @@ var useAwaitRender = function () {
         return null;
 };
 
+function warn() {
+  if (console && console.warn) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (typeof args[0] === 'string') args[0] = `react-i18next:: ${args[0]}`;
+    console.warn(...args);
+  }
+}
+const alreadyWarned = {};
+function warnOnce() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+  if (typeof args[0] === 'string' && alreadyWarned[args[0]]) return;
+  if (typeof args[0] === 'string') alreadyWarned[args[0]] = new Date();
+  warn(...args);
+}
+const loadedClb = (i18n, cb) => () => {
+  if (i18n.isInitialized) {
+    cb();
+  } else {
+    const initialized = () => {
+      setTimeout(() => {
+        i18n.off('initialized', initialized);
+      }, 0);
+      cb();
+    };
+    i18n.on('initialized', initialized);
+  }
+};
+function loadNamespaces(i18n, ns, cb) {
+  i18n.loadNamespaces(ns, loadedClb(i18n, cb));
+}
+function loadLanguages(i18n, lng, ns, cb) {
+  if (typeof ns === 'string') ns = [ns];
+  ns.forEach(n => {
+    if (i18n.options.ns.indexOf(n) < 0) i18n.options.ns.push(n);
+  });
+  i18n.loadLanguages(lng, loadedClb(i18n, cb));
+}
+function oldI18nextHasLoadedNamespace(ns, i18n) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const lng = i18n.languages[0];
+  const fallbackLng = i18n.options ? i18n.options.fallbackLng : false;
+  const lastLng = i18n.languages[i18n.languages.length - 1];
+  if (lng.toLowerCase() === 'cimode') return true;
+  const loadNotPending = (l, n) => {
+    const loadState = i18n.services.backendConnector.state[`${l}|${n}`];
+    return loadState === -1 || loadState === 2;
+  };
+  if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18n.services.backendConnector.backend && i18n.isLanguageChangingTo && !loadNotPending(i18n.isLanguageChangingTo, ns)) return false;
+  if (i18n.hasResourceBundle(lng, ns)) return true;
+  if (!i18n.services.backendConnector.backend || i18n.options.resources && !i18n.options.partialBundledLanguages) return true;
+  if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
+  return false;
+}
+function hasLoadedNamespace(ns, i18n) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!i18n.languages || !i18n.languages.length) {
+    warnOnce('i18n.languages were undefined or empty', i18n.languages);
+    return true;
+  }
+  const isNewerI18next = i18n.options.ignoreJSONStructure !== undefined;
+  if (!isNewerI18next) {
+    return oldI18nextHasLoadedNamespace(ns, i18n, options);
+  }
+  return i18n.hasLoadedNamespace(ns, {
+    lng: options.lng,
+    precheck: (i18nInstance, loadNotPending) => {
+      if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18nInstance.services.backendConnector.backend && i18nInstance.isLanguageChangingTo && !loadNotPending(i18nInstance.isLanguageChangingTo, ns)) return false;
+    }
+  });
+}
+
+const matchHtmlEntity = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g;
+const htmlEntities = {
+  '&amp;': '&',
+  '&#38;': '&',
+  '&lt;': '<',
+  '&#60;': '<',
+  '&gt;': '>',
+  '&#62;': '>',
+  '&apos;': "'",
+  '&#39;': "'",
+  '&quot;': '"',
+  '&#34;': '"',
+  '&nbsp;': ' ',
+  '&#160;': ' ',
+  '&copy;': '©',
+  '&#169;': '©',
+  '&reg;': '®',
+  '&#174;': '®',
+  '&hellip;': '…',
+  '&#8230;': '…',
+  '&#x2F;': '/',
+  '&#47;': '/'
+};
+const unescapeHtmlEntity = m => htmlEntities[m];
+const unescape = text => text.replace(matchHtmlEntity, unescapeHtmlEntity);
+
+let defaultOptions$1 = {
+  bindI18n: 'languageChanged',
+  bindI18nStore: '',
+  transEmptyNodeValue: '',
+  transSupportBasicHtmlNodes: true,
+  transWrapTextNodes: '',
+  transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'],
+  useSuspense: true,
+  unescape
+};
+function setDefaults() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  defaultOptions$1 = {
+    ...defaultOptions$1,
+    ...options
+  };
+}
+function getDefaults() {
+  return defaultOptions$1;
+}
+
+let i18nInstance;
+function setI18n(instance) {
+  i18nInstance = instance;
+}
+function getI18n() {
+  return i18nInstance;
+}
+
+const initReactI18next = {
+  type: '3rdParty',
+  init(instance) {
+    setDefaults(instance.options.react);
+    setI18n(instance);
+  }
+};
+
+const I18nContext = React.createContext();
+class ReportNamespaces {
+  constructor() {
+    this.usedNamespaces = {};
+  }
+  addUsedNamespaces(namespaces) {
+    namespaces.forEach(ns => {
+      if (!this.usedNamespaces[ns]) this.usedNamespaces[ns] = true;
+    });
+  }
+  getUsedNamespaces() {
+    return Object.keys(this.usedNamespaces);
+  }
+}
+
+const usePrevious = (value, ignore) => {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    ref.current = ignore ? ref.current : value;
+  }, [value, ignore]);
+  return ref.current;
+};
+function useTranslation(ns) {
+  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    i18n: i18nFromProps
+  } = props;
+  const {
+    i18n: i18nFromContext,
+    defaultNS: defaultNSFromContext
+  } = React.useContext(I18nContext) || {};
+  const i18n = i18nFromProps || i18nFromContext || getI18n();
+  if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
+  if (!i18n) {
+    warnOnce('You will need to pass in an i18next instance by using initReactI18next');
+    const notReadyT = (k, optsOrDefaultValue) => {
+      if (typeof optsOrDefaultValue === 'string') return optsOrDefaultValue;
+      if (optsOrDefaultValue && typeof optsOrDefaultValue === 'object' && typeof optsOrDefaultValue.defaultValue === 'string') return optsOrDefaultValue.defaultValue;
+      return Array.isArray(k) ? k[k.length - 1] : k;
+    };
+    const retNotReady = [notReadyT, {}, false];
+    retNotReady.t = notReadyT;
+    retNotReady.i18n = {};
+    retNotReady.ready = false;
+    return retNotReady;
+  }
+  if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
+  const i18nOptions = {
+    ...getDefaults(),
+    ...i18n.options.react,
+    ...props
+  };
+  const {
+    useSuspense,
+    keyPrefix
+  } = i18nOptions;
+  let namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
+  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
+  if (i18n.reportNamespaces.addUsedNamespaces) i18n.reportNamespaces.addUsedNamespaces(namespaces);
+  const ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every(n => hasLoadedNamespace(n, i18n, i18nOptions));
+  function getT() {
+    return i18n.getFixedT(props.lng || null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
+  }
+  const [t, setT] = React.useState(getT);
+  let joinedNS = namespaces.join();
+  if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
+  const previousJoinedNS = usePrevious(joinedNS);
+  const isMounted = React.useRef(true);
+  React.useEffect(() => {
+    const {
+      bindI18n,
+      bindI18nStore
+    } = i18nOptions;
+    isMounted.current = true;
+    if (!ready && !useSuspense) {
+      if (props.lng) {
+        loadLanguages(i18n, props.lng, namespaces, () => {
+          if (isMounted.current) setT(getT);
+        });
+      } else {
+        loadNamespaces(i18n, namespaces, () => {
+          if (isMounted.current) setT(getT);
+        });
+      }
+    }
+    if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
+      setT(getT);
+    }
+    function boundReset() {
+      if (isMounted.current) setT(getT);
+    }
+    if (bindI18n && i18n) i18n.on(bindI18n, boundReset);
+    if (bindI18nStore && i18n) i18n.store.on(bindI18nStore, boundReset);
+    return () => {
+      isMounted.current = false;
+      if (bindI18n && i18n) bindI18n.split(' ').forEach(e => i18n.off(e, boundReset));
+      if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(e => i18n.store.off(e, boundReset));
+    };
+  }, [i18n, joinedNS]);
+  const isInitial = React.useRef(true);
+  React.useEffect(() => {
+    if (isMounted.current && !isInitial.current) {
+      setT(getT);
+    }
+    isInitial.current = false;
+  }, [i18n, keyPrefix]);
+  const ret = [t, i18n, ready];
+  ret.t = t;
+  ret.i18n = i18n;
+  ret.ready = ready;
+  if (ready) return ret;
+  if (!ready && !useSuspense) return ret;
+  throw new Promise(resolve => {
+    if (props.lng) {
+      loadLanguages(i18n, props.lng, namespaces, () => resolve());
+    } else {
+      loadNamespaces(i18n, namespaces, () => resolve());
+    }
+  });
+}
+
+function I18nextProvider(_ref) {
+  let {
+    i18n,
+    defaultNS,
+    children
+  } = _ref;
+  const value = React.useMemo(() => ({
+    i18n,
+    defaultNS
+  }), [i18n, defaultNS]);
+  return React.createElement(I18nContext.Provider, {
+    value
+  }, children);
+}
+
+var useUpdateTranslations = function (_a) {
+    var language = _a.language;
+    var i18n = useTranslation().i18n;
+    React.useEffect(function () {
+        if (language && i18n.language !== language) {
+            i18n.changeLanguage(language);
+        }
+    }, [language, i18n]);
+};
+
+// TODO - Refactor and rename this hook
+var useCloseFilterSection = function (_a) {
+    var handleSelectedFilter = _a.handleSelectedFilter;
+    var filterSectionRef = React.useRef(null);
+    React.useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (filterSectionRef.current &&
+                !filterSectionRef.current.contains(event.target)) {
+                handleSelectedFilter(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [filterSectionRef]);
+    return { filterSectionRef: filterSectionRef };
+};
+
+var useAutoFocus = function (autoFocus) {
+    var ref = React.useRef(null);
+    React.useEffect(function () {
+        if (!autoFocus || !ref.current)
+            return;
+        var attemptFocus = function (attempts) {
+            if (attempts === void 0) { attempts = 0; }
+            if (attempts > 20 || !ref.current)
+                return;
+            var focusable = ref.current.querySelector('button:not([disabled]), [tabindex]:not([tabindex="-1"])');
+            if (focusable) {
+                focusable.focus();
+            }
+            else {
+                requestAnimationFrame(function () { return attemptFocus(attempts + 1); });
+            }
+        };
+        requestAnimationFrame(function () { return attemptFocus(); });
+    }, [autoFocus]);
+    return ref;
+};
+
 const isString = obj => typeof obj === 'string';
 const defer = () => {
   let res;
@@ -302,7 +627,7 @@ const setPath = (object, path, newValue) => {
     e = `${p[p.length - 1]}.${e}`;
     p = p.slice(0, p.length - 1);
     last = getLastOfPath(object, p, Object);
-    if (last?.obj && typeof last.obj[`${last.k}.${e}`] !== 'undefined') {
+    if (last && last.obj && typeof last.obj[`${last.k}.${e}`] !== 'undefined') {
       last.obj = undefined;
     }
   }
@@ -322,7 +647,6 @@ const getPath = (object, path) => {
     k
   } = getLastOfPath(object, path);
   if (!obj) return undefined;
-  if (!Object.prototype.hasOwnProperty.call(obj, k)) return undefined;
   return obj[k];
 };
 const getPathWithDefaults = (data, defaultData, key) => {
@@ -400,12 +724,10 @@ const looksLikeObjectPath = (key, nsSeparator, keySeparator) => {
   }
   return matched;
 };
-const deepFind = (obj, path, keySeparator = '.') => {
+const deepFind = function (obj, path) {
+  let keySeparator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '.';
   if (!obj) return undefined;
-  if (obj[path]) {
-    if (!Object.prototype.hasOwnProperty.call(obj, path)) return undefined;
-    return obj[path];
-  }
+  if (obj[path]) return obj[path];
   const tokens = path.split(keySeparator);
   let current = obj;
   for (let i = 0; i < tokens.length;) {
@@ -432,7 +754,7 @@ const deepFind = (obj, path, keySeparator = '.') => {
   }
   return current;
 };
-const getCleanedCode = code => code?.replace('_', '-');
+const getCleanedCode = code => code && code.replace('_', '-');
 
 const consoleLogger = {
   type: 'logger',
@@ -446,29 +768,43 @@ const consoleLogger = {
     this.output('error', args);
   },
   output(type, args) {
-    console?.[type]?.apply?.(console, args);
+    if (console && console[type]) console[type].apply(console, args);
   }
 };
 class Logger {
-  constructor(concreteLogger, options = {}) {
+  constructor(concreteLogger) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     this.init(concreteLogger, options);
   }
-  init(concreteLogger, options = {}) {
+  init(concreteLogger) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     this.prefix = options.prefix || 'i18next:';
     this.logger = concreteLogger || consoleLogger;
     this.options = options;
     this.debug = options.debug;
   }
-  log(...args) {
+  log() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
     return this.forward(args, 'log', '', true);
   }
-  warn(...args) {
+  warn() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
     return this.forward(args, 'warn', '', true);
   }
-  error(...args) {
+  error() {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
     return this.forward(args, 'error', '');
   }
-  deprecate(...args) {
+  deprecate() {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
     return this.forward(args, 'warn', 'WARNING DEPRECATED: ', true);
   }
   forward(args, lvl, prefix, debugOnly) {
@@ -512,10 +848,14 @@ class EventEmitter {
     }
     this.observers[event].delete(listener);
   }
-  emit(event, ...args) {
+  emit(event) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
     if (this.observers[event]) {
       const cloned = Array.from(this.observers[event].entries());
-      cloned.forEach(([observer, numTimesAdded]) => {
+      cloned.forEach(_ref => {
+        let [observer, numTimesAdded] = _ref;
         for (let i = 0; i < numTimesAdded; i++) {
           observer(...args);
         }
@@ -523,7 +863,8 @@ class EventEmitter {
     }
     if (this.observers['*']) {
       const cloned = Array.from(this.observers['*'].entries());
-      cloned.forEach(([observer, numTimesAdded]) => {
+      cloned.forEach(_ref2 => {
+        let [observer, numTimesAdded] = _ref2;
         for (let i = 0; i < numTimesAdded; i++) {
           observer.apply(observer, [event, ...args]);
         }
@@ -533,10 +874,11 @@ class EventEmitter {
 }
 
 class ResourceStore extends EventEmitter {
-  constructor(data, options = {
-    ns: ['translation'],
-    defaultNS: 'translation'
-  }) {
+  constructor(data) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      ns: ['translation'],
+      defaultNS: 'translation'
+    };
     super();
     this.data = data || {};
     this.options = options;
@@ -558,7 +900,8 @@ class ResourceStore extends EventEmitter {
       this.options.ns.splice(index, 1);
     }
   }
-  getResource(lng, ns, key, options = {}) {
+  getResource(lng, ns, key) {
+    let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
     const keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
     const ignoreJSONStructure = options.ignoreJSONStructure !== undefined ? options.ignoreJSONStructure : this.options.ignoreJSONStructure;
     let path;
@@ -583,11 +926,12 @@ class ResourceStore extends EventEmitter {
       key = path.slice(2).join('.');
     }
     if (result || !ignoreJSONStructure || !isString(key)) return result;
-    return deepFind(this.data?.[lng]?.[ns], key, keySeparator);
+    return deepFind(this.data && this.data[lng] && this.data[lng][ns], key, keySeparator);
   }
-  addResource(lng, ns, key, value, options = {
-    silent: false
-  }) {
+  addResource(lng, ns, key, value) {
+    let options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
+      silent: false
+    };
     const keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
     let path = [lng, ns];
     if (key) path = path.concat(keySeparator ? key.split(keySeparator) : key);
@@ -600,9 +944,10 @@ class ResourceStore extends EventEmitter {
     setPath(this.data, path, value);
     if (!options.silent) this.emit('added', lng, ns, key, value);
   }
-  addResources(lng, ns, resources, options = {
-    silent: false
-  }) {
+  addResources(lng, ns, resources) {
+    let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
+      silent: false
+    };
     for (const m in resources) {
       if (isString(resources[m]) || Array.isArray(resources[m])) this.addResource(lng, ns, m, resources[m], {
         silent: true
@@ -610,10 +955,11 @@ class ResourceStore extends EventEmitter {
     }
     if (!options.silent) this.emit('added', lng, ns, resources);
   }
-  addResourceBundle(lng, ns, resources, deep, overwrite, options = {
-    silent: false,
-    skipCopy: false
-  }) {
+  addResourceBundle(lng, ns, resources, deep, overwrite) {
+    let options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {
+      silent: false,
+      skipCopy: false
+    };
     let path = [lng, ns];
     if (lng.indexOf('.') > -1) {
       path = lng.split('.');
@@ -647,6 +993,10 @@ class ResourceStore extends EventEmitter {
   }
   getResourceBundle(lng, ns) {
     if (!ns) ns = this.options.defaultNS;
+    if (this.options.compatibilityAPI === 'v1') return {
+      ...{},
+      ...this.getResource(lng, ns)
+    };
     return this.getResource(lng, ns);
   }
   getDataByLanguage(lng) {
@@ -669,37 +1019,16 @@ var postProcessor = {
   },
   handle(processors, value, key, options, translator) {
     processors.forEach(processor => {
-      value = this.processors[processor]?.process(value, key, options, translator) ?? value;
+      if (this.processors[processor]) value = this.processors[processor].process(value, key, options, translator);
     });
     return value;
   }
 };
 
-const PATH_KEY = Symbol('i18next/PATH_KEY');
-function createProxy() {
-  const state = [];
-  const handler = Object.create(null);
-  let proxy;
-  handler.get = (target, key) => {
-    proxy?.revoke?.();
-    if (key === PATH_KEY) return state;
-    state.push(key);
-    proxy = Proxy.revocable(target, handler);
-    return proxy.proxy;
-  };
-  return Proxy.revocable(Object.create(null), handler).proxy;
-}
-function keysFromSelector(selector, opts) {
-  const {
-    [PATH_KEY]: path
-  } = selector(createProxy());
-  return path.join(opts?.keySeparator ?? '.');
-}
-
 const checkedLoadedFor = {};
-const shouldHandleAsObject = res => !isString(res) && typeof res !== 'boolean' && typeof res !== 'number';
 class Translator extends EventEmitter {
-  constructor(services, options = {}) {
+  constructor(services) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     super();
     copy(['resourceStore', 'languageUtils', 'pluralResolver', 'interpolator', 'backendConnector', 'i18nFormat', 'utils'], services, this);
     this.options = options;
@@ -711,28 +1040,23 @@ class Translator extends EventEmitter {
   changeLanguage(lng) {
     if (lng) this.language = lng;
   }
-  exists(key, o = {
-    interpolation: {}
-  }) {
-    const opt = {
-      ...o
+  exists(key) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      interpolation: {}
     };
-    if (key == null) return false;
-    const resolved = this.resolve(key, opt);
-    if (resolved?.res === undefined) return false;
-    const isObject = shouldHandleAsObject(resolved.res);
-    if (opt.returnObjects === false && isObject) {
+    if (key === undefined || key === null) {
       return false;
     }
-    return true;
+    const resolved = this.resolve(key, options);
+    return resolved && resolved.res !== undefined;
   }
-  extractFromKey(key, opt) {
-    let nsSeparator = opt.nsSeparator !== undefined ? opt.nsSeparator : this.options.nsSeparator;
+  extractFromKey(key, options) {
+    let nsSeparator = options.nsSeparator !== undefined ? options.nsSeparator : this.options.nsSeparator;
     if (nsSeparator === undefined) nsSeparator = ':';
-    const keySeparator = opt.keySeparator !== undefined ? opt.keySeparator : this.options.keySeparator;
-    let namespaces = opt.ns || this.options.defaultNS || [];
+    const keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
+    let namespaces = options.ns || this.options.defaultNS || [];
     const wouldCheckForNsInKey = nsSeparator && key.indexOf(nsSeparator) > -1;
-    const seemsNaturalLanguage = !this.options.userDefinedKeySeparator && !opt.keySeparator && !this.options.userDefinedNsSeparator && !opt.nsSeparator && !looksLikeObjectPath(key, nsSeparator, keySeparator);
+    const seemsNaturalLanguage = !this.options.userDefinedKeySeparator && !options.keySeparator && !this.options.userDefinedNsSeparator && !options.nsSeparator && !looksLikeObjectPath(key, nsSeparator, keySeparator);
     if (wouldCheckForNsInKey && !seemsNaturalLanguage) {
       const m = key.match(this.interpolator.nestingRegexp);
       if (m && m.length > 0) {
@@ -750,36 +1074,28 @@ class Translator extends EventEmitter {
       namespaces: isString(namespaces) ? [namespaces] : namespaces
     };
   }
-  translate(keys, o, lastKey) {
-    let opt = typeof o === 'object' ? {
-      ...o
-    } : o;
-    if (typeof opt !== 'object' && this.options.overloadTranslationOptionHandler) {
-      opt = this.options.overloadTranslationOptionHandler(arguments);
+  translate(keys, options, lastKey) {
+    if (typeof options !== 'object' && this.options.overloadTranslationOptionHandler) {
+      options = this.options.overloadTranslationOptionHandler(arguments);
     }
-    if (typeof opt === 'object') opt = {
-      ...opt
+    if (typeof options === 'object') options = {
+      ...options
     };
-    if (!opt) opt = {};
-    if (keys == null) return '';
-    if (typeof keys === 'function') keys = keysFromSelector(keys, {
-      ...this.options,
-      ...opt
-    });
+    if (!options) options = {};
+    if (keys === undefined || keys === null) return '';
     if (!Array.isArray(keys)) keys = [String(keys)];
-    const returnDetails = opt.returnDetails !== undefined ? opt.returnDetails : this.options.returnDetails;
-    const keySeparator = opt.keySeparator !== undefined ? opt.keySeparator : this.options.keySeparator;
+    const returnDetails = options.returnDetails !== undefined ? options.returnDetails : this.options.returnDetails;
+    const keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
     const {
       key,
       namespaces
-    } = this.extractFromKey(keys[keys.length - 1], opt);
+    } = this.extractFromKey(keys[keys.length - 1], options);
     const namespace = namespaces[namespaces.length - 1];
-    let nsSeparator = opt.nsSeparator !== undefined ? opt.nsSeparator : this.options.nsSeparator;
-    if (nsSeparator === undefined) nsSeparator = ':';
-    const lng = opt.lng || this.language;
-    const appendNamespaceToCIMode = opt.appendNamespaceToCIMode || this.options.appendNamespaceToCIMode;
-    if (lng?.toLowerCase() === 'cimode') {
+    const lng = options.lng || this.language;
+    const appendNamespaceToCIMode = options.appendNamespaceToCIMode || this.options.appendNamespaceToCIMode;
+    if (lng && lng.toLowerCase() === 'cimode') {
       if (appendNamespaceToCIMode) {
+        const nsSeparator = options.nsSeparator || this.options.nsSeparator;
         if (returnDetails) {
           return {
             res: `${namespace}${nsSeparator}${key}`,
@@ -787,7 +1103,7 @@ class Translator extends EventEmitter {
             exactUsedKey: key,
             usedLng: lng,
             usedNS: namespace,
-            usedParams: this.getUsedParamsDetails(opt)
+            usedParams: this.getUsedParamsDetails(options)
           };
         }
         return `${namespace}${nsSeparator}${key}`;
@@ -799,84 +1115,69 @@ class Translator extends EventEmitter {
           exactUsedKey: key,
           usedLng: lng,
           usedNS: namespace,
-          usedParams: this.getUsedParamsDetails(opt)
+          usedParams: this.getUsedParamsDetails(options)
         };
       }
       return key;
     }
-    const resolved = this.resolve(keys, opt);
-    let res = resolved?.res;
-    const resUsedKey = resolved?.usedKey || key;
-    const resExactUsedKey = resolved?.exactUsedKey || key;
+    const resolved = this.resolve(keys, options);
+    let res = resolved && resolved.res;
+    const resUsedKey = resolved && resolved.usedKey || key;
+    const resExactUsedKey = resolved && resolved.exactUsedKey || key;
+    const resType = Object.prototype.toString.apply(res);
     const noObject = ['[object Number]', '[object Function]', '[object RegExp]'];
-    const joinArrays = opt.joinArrays !== undefined ? opt.joinArrays : this.options.joinArrays;
+    const joinArrays = options.joinArrays !== undefined ? options.joinArrays : this.options.joinArrays;
     const handleAsObjectInI18nFormat = !this.i18nFormat || this.i18nFormat.handleAsObject;
-    const needsPluralHandling = opt.count !== undefined && !isString(opt.count);
-    const hasDefaultValue = Translator.hasDefaultValue(opt);
-    const defaultValueSuffix = needsPluralHandling ? this.pluralResolver.getSuffix(lng, opt.count, opt) : '';
-    const defaultValueSuffixOrdinalFallback = opt.ordinal && needsPluralHandling ? this.pluralResolver.getSuffix(lng, opt.count, {
-      ordinal: false
-    }) : '';
-    const needsZeroSuffixLookup = needsPluralHandling && !opt.ordinal && opt.count === 0;
-    const defaultValue = needsZeroSuffixLookup && opt[`defaultValue${this.options.pluralSeparator}zero`] || opt[`defaultValue${defaultValueSuffix}`] || opt[`defaultValue${defaultValueSuffixOrdinalFallback}`] || opt.defaultValue;
-    let resForObjHndl = res;
-    if (handleAsObjectInI18nFormat && !res && hasDefaultValue) {
-      resForObjHndl = defaultValue;
-    }
-    const handleAsObject = shouldHandleAsObject(resForObjHndl);
-    const resType = Object.prototype.toString.apply(resForObjHndl);
-    if (handleAsObjectInI18nFormat && resForObjHndl && handleAsObject && noObject.indexOf(resType) < 0 && !(isString(joinArrays) && Array.isArray(resForObjHndl))) {
-      if (!opt.returnObjects && !this.options.returnObjects) {
+    const handleAsObject = !isString(res) && typeof res !== 'boolean' && typeof res !== 'number';
+    if (handleAsObjectInI18nFormat && res && handleAsObject && noObject.indexOf(resType) < 0 && !(isString(joinArrays) && Array.isArray(res))) {
+      if (!options.returnObjects && !this.options.returnObjects) {
         if (!this.options.returnedObjectHandler) {
           this.logger.warn('accessing an object - but returnObjects options is not enabled!');
         }
-        const r = this.options.returnedObjectHandler ? this.options.returnedObjectHandler(resUsedKey, resForObjHndl, {
-          ...opt,
+        const r = this.options.returnedObjectHandler ? this.options.returnedObjectHandler(resUsedKey, res, {
+          ...options,
           ns: namespaces
         }) : `key '${key} (${this.language})' returned an object instead of string.`;
         if (returnDetails) {
           resolved.res = r;
-          resolved.usedParams = this.getUsedParamsDetails(opt);
+          resolved.usedParams = this.getUsedParamsDetails(options);
           return resolved;
         }
         return r;
       }
       if (keySeparator) {
-        const resTypeIsArray = Array.isArray(resForObjHndl);
+        const resTypeIsArray = Array.isArray(res);
         const copy = resTypeIsArray ? [] : {};
         const newKeyToUse = resTypeIsArray ? resExactUsedKey : resUsedKey;
-        for (const m in resForObjHndl) {
-          if (Object.prototype.hasOwnProperty.call(resForObjHndl, m)) {
+        for (const m in res) {
+          if (Object.prototype.hasOwnProperty.call(res, m)) {
             const deepKey = `${newKeyToUse}${keySeparator}${m}`;
-            if (hasDefaultValue && !res) {
-              copy[m] = this.translate(deepKey, {
-                ...opt,
-                defaultValue: shouldHandleAsObject(defaultValue) ? defaultValue[m] : undefined,
-                ...{
-                  joinArrays: false,
-                  ns: namespaces
-                }
-              });
-            } else {
-              copy[m] = this.translate(deepKey, {
-                ...opt,
-                ...{
-                  joinArrays: false,
-                  ns: namespaces
-                }
-              });
-            }
-            if (copy[m] === deepKey) copy[m] = resForObjHndl[m];
+            copy[m] = this.translate(deepKey, {
+              ...options,
+              ...{
+                joinArrays: false,
+                ns: namespaces
+              }
+            });
+            if (copy[m] === deepKey) copy[m] = res[m];
           }
         }
         res = copy;
       }
     } else if (handleAsObjectInI18nFormat && isString(joinArrays) && Array.isArray(res)) {
       res = res.join(joinArrays);
-      if (res) res = this.extendTranslation(res, keys, opt, lastKey);
+      if (res) res = this.extendTranslation(res, keys, options, lastKey);
     } else {
       let usedDefault = false;
       let usedKey = false;
+      const needsPluralHandling = options.count !== undefined && !isString(options.count);
+      const hasDefaultValue = Translator.hasDefaultValue(options);
+      const defaultValueSuffix = needsPluralHandling ? this.pluralResolver.getSuffix(lng, options.count, options) : '';
+      const defaultValueSuffixOrdinalFallback = options.ordinal && needsPluralHandling ? this.pluralResolver.getSuffix(lng, options.count, {
+        ordinal: false
+      }) : '';
+      const needsZeroSuffixLookup = needsPluralHandling && !options.ordinal && options.count === 0 && this.pluralResolver.shouldUseIntlApi();
+      const defaultValue = needsZeroSuffixLookup && options[`defaultValue${this.options.pluralSeparator}zero`] || options[`defaultValue${defaultValueSuffix}`] || options[`defaultValue${defaultValueSuffixOrdinalFallback}`] || options.defaultValue;
       if (!this.isValidLookup(res) && hasDefaultValue) {
         usedDefault = true;
         res = defaultValue;
@@ -885,47 +1186,47 @@ class Translator extends EventEmitter {
         usedKey = true;
         res = key;
       }
-      const missingKeyNoValueFallbackToKey = opt.missingKeyNoValueFallbackToKey || this.options.missingKeyNoValueFallbackToKey;
+      const missingKeyNoValueFallbackToKey = options.missingKeyNoValueFallbackToKey || this.options.missingKeyNoValueFallbackToKey;
       const resForMissing = missingKeyNoValueFallbackToKey && usedKey ? undefined : res;
       const updateMissing = hasDefaultValue && defaultValue !== res && this.options.updateMissing;
       if (usedKey || usedDefault || updateMissing) {
         this.logger.log(updateMissing ? 'updateKey' : 'missingKey', lng, namespace, key, updateMissing ? defaultValue : res);
         if (keySeparator) {
           const fk = this.resolve(key, {
-            ...opt,
+            ...options,
             keySeparator: false
           });
           if (fk && fk.res) this.logger.warn('Seems the loaded translations were in flat JSON format instead of nested. Either set keySeparator: false on init or make sure your translations are published in nested format.');
         }
         let lngs = [];
-        const fallbackLngs = this.languageUtils.getFallbackCodes(this.options.fallbackLng, opt.lng || this.language);
+        const fallbackLngs = this.languageUtils.getFallbackCodes(this.options.fallbackLng, options.lng || this.language);
         if (this.options.saveMissingTo === 'fallback' && fallbackLngs && fallbackLngs[0]) {
           for (let i = 0; i < fallbackLngs.length; i++) {
             lngs.push(fallbackLngs[i]);
           }
         } else if (this.options.saveMissingTo === 'all') {
-          lngs = this.languageUtils.toResolveHierarchy(opt.lng || this.language);
+          lngs = this.languageUtils.toResolveHierarchy(options.lng || this.language);
         } else {
-          lngs.push(opt.lng || this.language);
+          lngs.push(options.lng || this.language);
         }
         const send = (l, k, specificDefaultValue) => {
           const defaultForMissing = hasDefaultValue && specificDefaultValue !== res ? specificDefaultValue : resForMissing;
           if (this.options.missingKeyHandler) {
-            this.options.missingKeyHandler(l, namespace, k, defaultForMissing, updateMissing, opt);
-          } else if (this.backendConnector?.saveMissing) {
-            this.backendConnector.saveMissing(l, namespace, k, defaultForMissing, updateMissing, opt);
+            this.options.missingKeyHandler(l, namespace, k, defaultForMissing, updateMissing, options);
+          } else if (this.backendConnector && this.backendConnector.saveMissing) {
+            this.backendConnector.saveMissing(l, namespace, k, defaultForMissing, updateMissing, options);
           }
           this.emit('missingKey', l, namespace, k, res);
         };
         if (this.options.saveMissing) {
           if (this.options.saveMissingPlurals && needsPluralHandling) {
             lngs.forEach(language => {
-              const suffixes = this.pluralResolver.getSuffixes(language, opt);
-              if (needsZeroSuffixLookup && opt[`defaultValue${this.options.pluralSeparator}zero`] && suffixes.indexOf(`${this.options.pluralSeparator}zero`) < 0) {
+              const suffixes = this.pluralResolver.getSuffixes(language, options);
+              if (needsZeroSuffixLookup && options[`defaultValue${this.options.pluralSeparator}zero`] && suffixes.indexOf(`${this.options.pluralSeparator}zero`) < 0) {
                 suffixes.push(`${this.options.pluralSeparator}zero`);
               }
               suffixes.forEach(suffix => {
-                send([language], key + suffix, opt[`defaultValue${suffix}`] || defaultValue);
+                send([language], key + suffix, options[`defaultValue${suffix}`] || defaultValue);
               });
             });
           } else {
@@ -933,80 +1234,87 @@ class Translator extends EventEmitter {
           }
         }
       }
-      res = this.extendTranslation(res, keys, opt, resolved, lastKey);
-      if (usedKey && res === key && this.options.appendNamespaceToMissingKey) {
-        res = `${namespace}${nsSeparator}${key}`;
-      }
+      res = this.extendTranslation(res, keys, options, resolved, lastKey);
+      if (usedKey && res === key && this.options.appendNamespaceToMissingKey) res = `${namespace}:${key}`;
       if ((usedKey || usedDefault) && this.options.parseMissingKeyHandler) {
-        res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}${nsSeparator}${key}` : key, usedDefault ? res : undefined, opt);
+        if (this.options.compatibilityAPI !== 'v1') {
+          res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}:${key}` : key, usedDefault ? res : undefined);
+        } else {
+          res = this.options.parseMissingKeyHandler(res);
+        }
       }
     }
     if (returnDetails) {
       resolved.res = res;
-      resolved.usedParams = this.getUsedParamsDetails(opt);
+      resolved.usedParams = this.getUsedParamsDetails(options);
       return resolved;
     }
     return res;
   }
-  extendTranslation(res, key, opt, resolved, lastKey) {
-    if (this.i18nFormat?.parse) {
+  extendTranslation(res, key, options, resolved, lastKey) {
+    var _this = this;
+    if (this.i18nFormat && this.i18nFormat.parse) {
       res = this.i18nFormat.parse(res, {
         ...this.options.interpolation.defaultVariables,
-        ...opt
-      }, opt.lng || this.language || resolved.usedLng, resolved.usedNS, resolved.usedKey, {
+        ...options
+      }, options.lng || this.language || resolved.usedLng, resolved.usedNS, resolved.usedKey, {
         resolved
       });
-    } else if (!opt.skipInterpolation) {
-      if (opt.interpolation) this.interpolator.init({
-        ...opt,
+    } else if (!options.skipInterpolation) {
+      if (options.interpolation) this.interpolator.init({
+        ...options,
         ...{
           interpolation: {
             ...this.options.interpolation,
-            ...opt.interpolation
+            ...options.interpolation
           }
         }
       });
-      const skipOnVariables = isString(res) && (opt?.interpolation?.skipOnVariables !== undefined ? opt.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables);
+      const skipOnVariables = isString(res) && (options && options.interpolation && options.interpolation.skipOnVariables !== undefined ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables);
       let nestBef;
       if (skipOnVariables) {
         const nb = res.match(this.interpolator.nestingRegexp);
         nestBef = nb && nb.length;
       }
-      let data = opt.replace && !isString(opt.replace) ? opt.replace : opt;
+      let data = options.replace && !isString(options.replace) ? options.replace : options;
       if (this.options.interpolation.defaultVariables) data = {
         ...this.options.interpolation.defaultVariables,
         ...data
       };
-      res = this.interpolator.interpolate(res, data, opt.lng || this.language || resolved.usedLng, opt);
+      res = this.interpolator.interpolate(res, data, options.lng || this.language || resolved.usedLng, options);
       if (skipOnVariables) {
         const na = res.match(this.interpolator.nestingRegexp);
         const nestAft = na && na.length;
-        if (nestBef < nestAft) opt.nest = false;
+        if (nestBef < nestAft) options.nest = false;
       }
-      if (!opt.lng && resolved && resolved.res) opt.lng = this.language || resolved.usedLng;
-      if (opt.nest !== false) res = this.interpolator.nest(res, (...args) => {
-        if (lastKey?.[0] === args[0] && !opt.context) {
-          this.logger.warn(`It seems you are nesting recursively key: ${args[0]} in key: ${key[0]}`);
+      if (!options.lng && this.options.compatibilityAPI !== 'v1' && resolved && resolved.res) options.lng = this.language || resolved.usedLng;
+      if (options.nest !== false) res = this.interpolator.nest(res, function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        if (lastKey && lastKey[0] === args[0] && !options.context) {
+          _this.logger.warn(`It seems you are nesting recursively key: ${args[0]} in key: ${key[0]}`);
           return null;
         }
-        return this.translate(...args, key);
-      }, opt);
-      if (opt.interpolation) this.interpolator.reset();
+        return _this.translate(...args, key);
+      }, options);
+      if (options.interpolation) this.interpolator.reset();
     }
-    const postProcess = opt.postProcess || this.options.postProcess;
+    const postProcess = options.postProcess || this.options.postProcess;
     const postProcessorNames = isString(postProcess) ? [postProcess] : postProcess;
-    if (res != null && postProcessorNames?.length && opt.applyPostProcessor !== false) {
+    if (res !== undefined && res !== null && postProcessorNames && postProcessorNames.length && options.applyPostProcessor !== false) {
       res = postProcessor.handle(postProcessorNames, res, key, this.options && this.options.postProcessPassResolved ? {
         i18nResolved: {
           ...resolved,
-          usedParams: this.getUsedParamsDetails(opt)
+          usedParams: this.getUsedParamsDetails(options)
         },
-        ...opt
-      } : opt, this);
+        ...options
+      } : options, this);
     }
     return res;
   }
-  resolve(keys, opt = {}) {
+  resolve(keys) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     let found;
     let usedKey;
     let exactUsedKey;
@@ -1015,19 +1323,19 @@ class Translator extends EventEmitter {
     if (isString(keys)) keys = [keys];
     keys.forEach(k => {
       if (this.isValidLookup(found)) return;
-      const extracted = this.extractFromKey(k, opt);
+      const extracted = this.extractFromKey(k, options);
       const key = extracted.key;
       usedKey = key;
       let namespaces = extracted.namespaces;
       if (this.options.fallbackNS) namespaces = namespaces.concat(this.options.fallbackNS);
-      const needsPluralHandling = opt.count !== undefined && !isString(opt.count);
-      const needsZeroSuffixLookup = needsPluralHandling && !opt.ordinal && opt.count === 0;
-      const needsContextHandling = opt.context !== undefined && (isString(opt.context) || typeof opt.context === 'number') && opt.context !== '';
-      const codes = opt.lngs ? opt.lngs : this.languageUtils.toResolveHierarchy(opt.lng || this.language, opt.fallbackLng);
+      const needsPluralHandling = options.count !== undefined && !isString(options.count);
+      const needsZeroSuffixLookup = needsPluralHandling && !options.ordinal && options.count === 0 && this.pluralResolver.shouldUseIntlApi();
+      const needsContextHandling = options.context !== undefined && (isString(options.context) || typeof options.context === 'number') && options.context !== '';
+      const codes = options.lngs ? options.lngs : this.languageUtils.toResolveHierarchy(options.lng || this.language, options.fallbackLng);
       namespaces.forEach(ns => {
         if (this.isValidLookup(found)) return;
         usedNS = ns;
-        if (!checkedLoadedFor[`${codes[0]}-${ns}`] && this.utils?.hasLoadedNamespace && !this.utils?.hasLoadedNamespace(usedNS)) {
+        if (!checkedLoadedFor[`${codes[0]}-${ns}`] && this.utils && this.utils.hasLoadedNamespace && !this.utils.hasLoadedNamespace(usedNS)) {
           checkedLoadedFor[`${codes[0]}-${ns}`] = true;
           this.logger.warn(`key "${usedKey}" for languages "${codes.join(', ')}" won't get resolved as namespace "${usedNS}" was not yet loaded`, 'This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!');
         }
@@ -1035,30 +1343,30 @@ class Translator extends EventEmitter {
           if (this.isValidLookup(found)) return;
           usedLng = code;
           const finalKeys = [key];
-          if (this.i18nFormat?.addLookupKeys) {
-            this.i18nFormat.addLookupKeys(finalKeys, key, code, ns, opt);
+          if (this.i18nFormat && this.i18nFormat.addLookupKeys) {
+            this.i18nFormat.addLookupKeys(finalKeys, key, code, ns, options);
           } else {
             let pluralSuffix;
-            if (needsPluralHandling) pluralSuffix = this.pluralResolver.getSuffix(code, opt.count, opt);
+            if (needsPluralHandling) pluralSuffix = this.pluralResolver.getSuffix(code, options.count, options);
             const zeroSuffix = `${this.options.pluralSeparator}zero`;
             const ordinalPrefix = `${this.options.pluralSeparator}ordinal${this.options.pluralSeparator}`;
             if (needsPluralHandling) {
-              if (opt.ordinal && pluralSuffix.indexOf(ordinalPrefix) === 0) {
+              finalKeys.push(key + pluralSuffix);
+              if (options.ordinal && pluralSuffix.indexOf(ordinalPrefix) === 0) {
                 finalKeys.push(key + pluralSuffix.replace(ordinalPrefix, this.options.pluralSeparator));
               }
-              finalKeys.push(key + pluralSuffix);
               if (needsZeroSuffixLookup) {
                 finalKeys.push(key + zeroSuffix);
               }
             }
             if (needsContextHandling) {
-              const contextKey = `${key}${this.options.contextSeparator || '_'}${opt.context}`;
+              const contextKey = `${key}${this.options.contextSeparator}${options.context}`;
               finalKeys.push(contextKey);
               if (needsPluralHandling) {
-                if (opt.ordinal && pluralSuffix.indexOf(ordinalPrefix) === 0) {
+                finalKeys.push(contextKey + pluralSuffix);
+                if (options.ordinal && pluralSuffix.indexOf(ordinalPrefix) === 0) {
                   finalKeys.push(contextKey + pluralSuffix.replace(ordinalPrefix, this.options.pluralSeparator));
                 }
-                finalKeys.push(contextKey + pluralSuffix);
                 if (needsZeroSuffixLookup) {
                   finalKeys.push(contextKey + zeroSuffix);
                 }
@@ -1069,7 +1377,7 @@ class Translator extends EventEmitter {
           while (possibleKey = finalKeys.pop()) {
             if (!this.isValidLookup(found)) {
               exactUsedKey = possibleKey;
-              found = this.getResource(code, ns, possibleKey, opt);
+              found = this.getResource(code, ns, possibleKey, options);
             }
           }
         });
@@ -1086,11 +1394,13 @@ class Translator extends EventEmitter {
   isValidLookup(res) {
     return res !== undefined && !(!this.options.returnNull && res === null) && !(!this.options.returnEmptyString && res === '');
   }
-  getResource(code, ns, key, options = {}) {
-    if (this.i18nFormat?.getResource) return this.i18nFormat.getResource(code, ns, key, options);
+  getResource(code, ns, key) {
+    let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    if (this.i18nFormat && this.i18nFormat.getResource) return this.i18nFormat.getResource(code, ns, key, options);
     return this.resourceStore.getResource(code, ns, key, options);
   }
-  getUsedParamsDetails(options = {}) {
+  getUsedParamsDetails() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const optionsKeys = ['defaultValue', 'ordinal', 'context', 'replace', 'lng', 'lngs', 'fallbackLng', 'ns', 'keySeparator', 'nsSeparator', 'returnObjects', 'returnDetails', 'joinArrays', 'postProcess', 'interpolation'];
     const useOptionsReplaceForData = options.replace && !isString(options.replace);
     let data = useOptionsReplaceForData ? options.replace : options;
@@ -1124,6 +1434,7 @@ class Translator extends EventEmitter {
   }
 }
 
+const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1);
 class LanguageUtil {
   constructor(options) {
     this.options = options;
@@ -1147,18 +1458,31 @@ class LanguageUtil {
   }
   formatLanguageCode(code) {
     if (isString(code) && code.indexOf('-') > -1) {
-      let formattedCode;
-      try {
-        formattedCode = Intl.getCanonicalLocales(code)[0];
-      } catch (e) {}
-      if (formattedCode && this.options.lowerCaseLng) {
-        formattedCode = formattedCode.toLowerCase();
+      if (typeof Intl !== 'undefined' && typeof Intl.getCanonicalLocales !== 'undefined') {
+        try {
+          let formattedCode = Intl.getCanonicalLocales(code)[0];
+          if (formattedCode && this.options.lowerCaseLng) {
+            formattedCode = formattedCode.toLowerCase();
+          }
+          if (formattedCode) return formattedCode;
+        } catch (e) {}
       }
-      if (formattedCode) return formattedCode;
+      const specialCases = ['hans', 'hant', 'latn', 'cyrl', 'cans', 'mong', 'arab'];
+      let p = code.split('-');
       if (this.options.lowerCaseLng) {
-        return code.toLowerCase();
+        p = p.map(part => part.toLowerCase());
+      } else if (p.length === 2) {
+        p[0] = p[0].toLowerCase();
+        p[1] = p[1].toUpperCase();
+        if (specialCases.indexOf(p[1].toLowerCase()) > -1) p[1] = capitalize(p[1].toLowerCase());
+      } else if (p.length === 3) {
+        p[0] = p[0].toLowerCase();
+        if (p[1].length === 2) p[1] = p[1].toUpperCase();
+        if (p[0] !== 'sgn' && p[2].length === 2) p[2] = p[2].toUpperCase();
+        if (specialCases.indexOf(p[1].toLowerCase()) > -1) p[1] = capitalize(p[1].toLowerCase());
+        if (specialCases.indexOf(p[2].toLowerCase()) > -1) p[2] = capitalize(p[2].toLowerCase());
       }
-      return code;
+      return p.join('-');
     }
     return this.options.cleanCode || this.options.lowerCaseLng ? code.toLowerCase() : code;
   }
@@ -1179,8 +1503,6 @@ class LanguageUtil {
     if (!found && this.options.supportedLngs) {
       codes.forEach(code => {
         if (found) return;
-        const lngScOnly = this.getScriptPartFromCode(code);
-        if (this.isSupportedCode(lngScOnly)) return found = lngScOnly;
         const lngOnly = this.getLanguagePartFromCode(code);
         if (this.isSupportedCode(lngOnly)) return found = lngOnly;
         found = this.options.supportedLngs.find(supportedLng => {
@@ -1208,7 +1530,7 @@ class LanguageUtil {
     return found || [];
   }
   toResolveHierarchy(code, fallbackCode) {
-    const fallbackCodes = this.getFallbackCodes((fallbackCode === false ? [] : fallbackCode) || this.options.fallbackLng || [], code);
+    const fallbackCodes = this.getFallbackCodes(fallbackCode || this.options.fallbackLng || [], code);
     const codes = [];
     const addCode = c => {
       if (!c) return;
@@ -1232,6 +1554,125 @@ class LanguageUtil {
   }
 }
 
+let sets = [{
+  lngs: ['ach', 'ak', 'am', 'arn', 'br', 'fil', 'gun', 'ln', 'mfe', 'mg', 'mi', 'oc', 'pt', 'pt-BR', 'tg', 'tl', 'ti', 'tr', 'uz', 'wa'],
+  nr: [1, 2],
+  fc: 1
+}, {
+  lngs: ['af', 'an', 'ast', 'az', 'bg', 'bn', 'ca', 'da', 'de', 'dev', 'el', 'en', 'eo', 'es', 'et', 'eu', 'fi', 'fo', 'fur', 'fy', 'gl', 'gu', 'ha', 'hi', 'hu', 'hy', 'ia', 'it', 'kk', 'kn', 'ku', 'lb', 'mai', 'ml', 'mn', 'mr', 'nah', 'nap', 'nb', 'ne', 'nl', 'nn', 'no', 'nso', 'pa', 'pap', 'pms', 'ps', 'pt-PT', 'rm', 'sco', 'se', 'si', 'so', 'son', 'sq', 'sv', 'sw', 'ta', 'te', 'tk', 'ur', 'yo'],
+  nr: [1, 2],
+  fc: 2
+}, {
+  lngs: ['ay', 'bo', 'cgg', 'fa', 'ht', 'id', 'ja', 'jbo', 'ka', 'km', 'ko', 'ky', 'lo', 'ms', 'sah', 'su', 'th', 'tt', 'ug', 'vi', 'wo', 'zh'],
+  nr: [1],
+  fc: 3
+}, {
+  lngs: ['be', 'bs', 'cnr', 'dz', 'hr', 'ru', 'sr', 'uk'],
+  nr: [1, 2, 5],
+  fc: 4
+}, {
+  lngs: ['ar'],
+  nr: [0, 1, 2, 3, 11, 100],
+  fc: 5
+}, {
+  lngs: ['cs', 'sk'],
+  nr: [1, 2, 5],
+  fc: 6
+}, {
+  lngs: ['csb', 'pl'],
+  nr: [1, 2, 5],
+  fc: 7
+}, {
+  lngs: ['cy'],
+  nr: [1, 2, 3, 8],
+  fc: 8
+}, {
+  lngs: ['fr'],
+  nr: [1, 2],
+  fc: 9
+}, {
+  lngs: ['ga'],
+  nr: [1, 2, 3, 7, 11],
+  fc: 10
+}, {
+  lngs: ['gd'],
+  nr: [1, 2, 3, 20],
+  fc: 11
+}, {
+  lngs: ['is'],
+  nr: [1, 2],
+  fc: 12
+}, {
+  lngs: ['jv'],
+  nr: [0, 1],
+  fc: 13
+}, {
+  lngs: ['kw'],
+  nr: [1, 2, 3, 4],
+  fc: 14
+}, {
+  lngs: ['lt'],
+  nr: [1, 2, 10],
+  fc: 15
+}, {
+  lngs: ['lv'],
+  nr: [1, 2, 0],
+  fc: 16
+}, {
+  lngs: ['mk'],
+  nr: [1, 2],
+  fc: 17
+}, {
+  lngs: ['mnk'],
+  nr: [0, 1, 2],
+  fc: 18
+}, {
+  lngs: ['mt'],
+  nr: [1, 2, 11, 20],
+  fc: 19
+}, {
+  lngs: ['or'],
+  nr: [2, 1],
+  fc: 2
+}, {
+  lngs: ['ro'],
+  nr: [1, 2, 20],
+  fc: 20
+}, {
+  lngs: ['sl'],
+  nr: [5, 1, 2, 3],
+  fc: 21
+}, {
+  lngs: ['he', 'iw'],
+  nr: [1, 2, 20, 21],
+  fc: 22
+}];
+let _rulesPluralsTypes = {
+  1: n => Number(n > 1),
+  2: n => Number(n != 1),
+  3: n => 0,
+  4: n => Number(n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2),
+  5: n => Number(n == 0 ? 0 : n == 1 ? 1 : n == 2 ? 2 : n % 100 >= 3 && n % 100 <= 10 ? 3 : n % 100 >= 11 ? 4 : 5),
+  6: n => Number(n == 1 ? 0 : n >= 2 && n <= 4 ? 1 : 2),
+  7: n => Number(n == 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2),
+  8: n => Number(n == 1 ? 0 : n == 2 ? 1 : n != 8 && n != 11 ? 2 : 3),
+  9: n => Number(n >= 2),
+  10: n => Number(n == 1 ? 0 : n == 2 ? 1 : n < 7 ? 2 : n < 11 ? 3 : 4),
+  11: n => Number(n == 1 || n == 11 ? 0 : n == 2 || n == 12 ? 1 : n > 2 && n < 20 ? 2 : 3),
+  12: n => Number(n % 10 != 1 || n % 100 == 11),
+  13: n => Number(n !== 0),
+  14: n => Number(n == 1 ? 0 : n == 2 ? 1 : n == 3 ? 2 : 3),
+  15: n => Number(n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2),
+  16: n => Number(n % 10 == 1 && n % 100 != 11 ? 0 : n !== 0 ? 1 : 2),
+  17: n => Number(n == 1 || n % 10 == 1 && n % 100 != 11 ? 0 : 1),
+  18: n => Number(n == 0 ? 0 : n == 1 ? 1 : 2),
+  19: n => Number(n == 1 ? 0 : n == 0 || n % 100 > 1 && n % 100 < 11 ? 1 : n % 100 > 10 && n % 100 < 20 ? 2 : 3),
+  20: n => Number(n == 1 ? 0 : n == 0 || n % 100 > 0 && n % 100 < 20 ? 1 : 2),
+  21: n => Number(n % 100 == 1 ? 1 : n % 100 == 2 ? 2 : n % 100 == 3 || n % 100 == 4 ? 3 : 0),
+  22: n => Number(n == 1 ? 0 : n == 2 ? 1 : (n < 0 || n > 10) && n % 10 == 0 ? 2 : 3)
+};
+const nonIntlVersions = ['v1', 'v2', 'v3'];
+const intlVersions = ['v4'];
 const suffixesOrder = {
   zero: 0,
   one: 1,
@@ -1240,74 +1681,129 @@ const suffixesOrder = {
   many: 4,
   other: 5
 };
-const dummyRule = {
-  select: count => count === 1 ? 'one' : 'other',
-  resolvedOptions: () => ({
-    pluralCategories: ['one', 'other']
-  })
+const createRules = () => {
+  const rules = {};
+  sets.forEach(set => {
+    set.lngs.forEach(l => {
+      rules[l] = {
+        numbers: set.nr,
+        plurals: _rulesPluralsTypes[set.fc]
+      };
+    });
+  });
+  return rules;
 };
 class PluralResolver {
-  constructor(languageUtils, options = {}) {
+  constructor(languageUtils) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     this.languageUtils = languageUtils;
     this.options = options;
     this.logger = baseLogger.create('pluralResolver');
+    if ((!this.options.compatibilityJSON || intlVersions.includes(this.options.compatibilityJSON)) && (typeof Intl === 'undefined' || !Intl.PluralRules)) {
+      this.options.compatibilityJSON = 'v3';
+      this.logger.error('Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill. Will fallback to the compatibilityJSON v3 format handling.');
+    }
+    this.rules = createRules();
     this.pluralRulesCache = {};
   }
+  addRule(lng, obj) {
+    this.rules[lng] = obj;
+  }
   clearCache() {
     this.pluralRulesCache = {};
   }
-  getRule(code, options = {}) {
-    const cleanedCode = getCleanedCode(code === 'dev' ? 'en' : code);
-    const type = options.ordinal ? 'ordinal' : 'cardinal';
-    const cacheKey = JSON.stringify({
-      cleanedCode,
-      type
-    });
-    if (cacheKey in this.pluralRulesCache) {
-      return this.pluralRulesCache[cacheKey];
-    }
-    let rule;
-    try {
-      rule = new Intl.PluralRules(cleanedCode, {
+  getRule(code) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (this.shouldUseIntlApi()) {
+      const cleanedCode = getCleanedCode(code === 'dev' ? 'en' : code);
+      const type = options.ordinal ? 'ordinal' : 'cardinal';
+      const cacheKey = JSON.stringify({
+        cleanedCode,
         type
       });
-    } catch (err) {
-      if (typeof Intl === 'undefined') {
-        this.logger.error('No Intl support, please use an Intl polyfill!');
-        return dummyRule;
+      if (cacheKey in this.pluralRulesCache) {
+        return this.pluralRulesCache[cacheKey];
+      }
+      let rule;
+      try {
+        rule = new Intl.PluralRules(cleanedCode, {
+          type
+        });
+      } catch (err) {
+        if (!code.match(/-|_/)) return;
+        const lngPart = this.languageUtils.getLanguagePartFromCode(code);
+        rule = this.getRule(lngPart, options);
       }
-      if (!code.match(/-|_/)) return dummyRule;
-      const lngPart = this.languageUtils.getLanguagePartFromCode(code);
-      rule = this.getRule(lngPart, options);
+      this.pluralRulesCache[cacheKey] = rule;
+      return rule;
     }
-    this.pluralRulesCache[cacheKey] = rule;
-    return rule;
+    return this.rules[code] || this.rules[this.languageUtils.getLanguagePartFromCode(code)];
   }
-  needsPlural(code, options = {}) {
-    let rule = this.getRule(code, options);
-    if (!rule) rule = this.getRule('dev', options);
-    return rule?.resolvedOptions().pluralCategories.length > 1;
+  needsPlural(code) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const rule = this.getRule(code, options);
+    if (this.shouldUseIntlApi()) {
+      return rule && rule.resolvedOptions().pluralCategories.length > 1;
+    }
+    return rule && rule.numbers.length > 1;
   }
-  getPluralFormsOfKey(code, key, options = {}) {
+  getPluralFormsOfKey(code, key) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     return this.getSuffixes(code, options).map(suffix => `${key}${suffix}`);
   }
-  getSuffixes(code, options = {}) {
-    let rule = this.getRule(code, options);
-    if (!rule) rule = this.getRule('dev', options);
-    if (!rule) return [];
-    return rule.resolvedOptions().pluralCategories.sort((pluralCategory1, pluralCategory2) => suffixesOrder[pluralCategory1] - suffixesOrder[pluralCategory2]).map(pluralCategory => `${this.options.prepend}${options.ordinal ? `ordinal${this.options.prepend}` : ''}${pluralCategory}`);
+  getSuffixes(code) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const rule = this.getRule(code, options);
+    if (!rule) {
+      return [];
+    }
+    if (this.shouldUseIntlApi()) {
+      return rule.resolvedOptions().pluralCategories.sort((pluralCategory1, pluralCategory2) => suffixesOrder[pluralCategory1] - suffixesOrder[pluralCategory2]).map(pluralCategory => `${this.options.prepend}${options.ordinal ? `ordinal${this.options.prepend}` : ''}${pluralCategory}`);
+    }
+    return rule.numbers.map(number => this.getSuffix(code, number, options));
   }
-  getSuffix(code, count, options = {}) {
+  getSuffix(code, count) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     const rule = this.getRule(code, options);
     if (rule) {
-      return `${this.options.prepend}${options.ordinal ? `ordinal${this.options.prepend}` : ''}${rule.select(count)}`;
+      if (this.shouldUseIntlApi()) {
+        return `${this.options.prepend}${options.ordinal ? `ordinal${this.options.prepend}` : ''}${rule.select(count)}`;
+      }
+      return this.getSuffixRetroCompatible(rule, count);
     }
     this.logger.warn(`no plural rule found for: ${code}`);
-    return this.getSuffix('dev', count, options);
+    return '';
+  }
+  getSuffixRetroCompatible(rule, count) {
+    const idx = rule.noAbs ? rule.plurals(count) : rule.plurals(Math.abs(count));
+    let suffix = rule.numbers[idx];
+    if (this.options.simplifyPluralSuffix && rule.numbers.length === 2 && rule.numbers[0] === 1) {
+      if (suffix === 2) {
+        suffix = 'plural';
+      } else if (suffix === 1) {
+        suffix = '';
+      }
+    }
+    const returnSuffix = () => this.options.prepend && suffix.toString() ? this.options.prepend + suffix.toString() : suffix.toString();
+    if (this.options.compatibilityJSON === 'v1') {
+      if (suffix === 1) return '';
+      if (typeof suffix === 'number') return `_plural_${suffix.toString()}`;
+      return returnSuffix();
+    } else if (this.options.compatibilityJSON === 'v2') {
+      return returnSuffix();
+    } else if (this.options.simplifyPluralSuffix && rule.numbers.length === 2 && rule.numbers[0] === 1) {
+      return returnSuffix();
+    }
+    return this.options.prepend && idx.toString() ? this.options.prepend + idx.toString() : idx.toString();
+  }
+  shouldUseIntlApi() {
+    return !nonIntlVersions.includes(this.options.compatibilityJSON);
   }
 }
 
-const deepFindWithDefaults = (data, defaultData, key, keySeparator = '.', ignoreJSONStructure = true) => {
+const deepFindWithDefaults = function (data, defaultData, key) {
+  let keySeparator = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '.';
+  let ignoreJSONStructure = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
   let path = getPathWithDefaults(data, defaultData, key);
   if (!path && ignoreJSONStructure && isString(key)) {
     path = deepFind(data, key, keySeparator);
@@ -1317,13 +1813,15 @@ const deepFindWithDefaults = (data, defaultData, key, keySeparator = '.', ignore
 };
 const regexSafe = val => val.replace(/\$/g, '$$$$');
 class Interpolator {
-  constructor(options = {}) {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     this.logger = baseLogger.create('interpolator');
     this.options = options;
-    this.format = options?.interpolation?.format || (value => value);
+    this.format = options.interpolation && options.interpolation.format || (value => value);
     this.init(options);
   }
-  init(options = {}) {
+  init() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     if (!options.interpolation) options.interpolation = {
       escapeValue: true
     };
@@ -1366,7 +1864,7 @@ class Interpolator {
   }
   resetRegExp() {
     const getOrResetRegExp = (existingRegExp, pattern) => {
-      if (existingRegExp?.source === pattern) {
+      if (existingRegExp && existingRegExp.source === pattern) {
         existingRegExp.lastIndex = 0;
         return existingRegExp;
       }
@@ -1374,7 +1872,7 @@ class Interpolator {
     };
     this.regexp = getOrResetRegExp(this.regexp, `${this.prefix}(.+?)${this.suffix}`);
     this.regexpUnescape = getOrResetRegExp(this.regexpUnescape, `${this.prefix}${this.unescapePrefix}(.+?)${this.unescapeSuffix}${this.suffix}`);
-    this.nestingRegexp = getOrResetRegExp(this.nestingRegexp, `${this.nestingPrefix}((?:[^()"']+|"[^"]*"|'[^']*'|\\((?:[^()]|"[^"]*"|'[^']*')*\\))*?)${this.nestingSuffix}`);
+    this.nestingRegexp = getOrResetRegExp(this.nestingRegexp, `${this.nestingPrefix}(.+?)${this.nestingSuffix}`);
   }
   interpolate(str, data, lng, options) {
     let match;
@@ -1400,8 +1898,8 @@ class Interpolator {
       });
     };
     this.resetRegExp();
-    const missingInterpolationHandler = options?.missingInterpolationHandler || this.options.missingInterpolationHandler;
-    const skipOnVariables = options?.interpolation?.skipOnVariables !== undefined ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
+    const missingInterpolationHandler = options && options.missingInterpolationHandler || this.options.missingInterpolationHandler;
+    const skipOnVariables = options && options.interpolation && options.interpolation.skipOnVariables !== undefined ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
     const todos = [{
       regex: this.regexpUnescape,
       safeValue: val => regexSafe(val)
@@ -1446,20 +1944,21 @@ class Interpolator {
     });
     return str;
   }
-  nest(str, fc, options = {}) {
+  nest(str, fc) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     let match;
     let value;
     let clonedOptions;
     const handleHasOptions = (key, inheritedOptions) => {
       const sep = this.nestingOptionsSeparator;
       if (key.indexOf(sep) < 0) return key;
-      const c = key.split(new RegExp(`${regexEscape(sep)}[ ]*{`));
+      const c = key.split(new RegExp(`${sep}[ ]*{`));
       let optionsString = `{${c[1]}`;
       key = c[0];
       optionsString = this.interpolate(optionsString, clonedOptions);
       const matchedSingleQuotes = optionsString.match(/'/g);
       const matchedDoubleQuotes = optionsString.match(/"/g);
-      if ((matchedSingleQuotes?.length ?? 0) % 2 === 0 && !matchedDoubleQuotes || (matchedDoubleQuotes?.length ?? 0) % 2 !== 0) {
+      if (matchedSingleQuotes && matchedSingleQuotes.length % 2 === 0 && !matchedDoubleQuotes || matchedDoubleQuotes.length % 2 !== 0) {
         optionsString = optionsString.replace(/'/g, '"');
       }
       try {
@@ -1483,10 +1982,12 @@ class Interpolator {
       clonedOptions = clonedOptions.replace && !isString(clonedOptions.replace) ? clonedOptions.replace : clonedOptions;
       clonedOptions.applyPostProcessor = false;
       delete clonedOptions.defaultValue;
-      const keyEndIndex = /{.*}/.test(match[1]) ? match[1].lastIndexOf('}') + 1 : match[1].indexOf(this.formatSeparator);
-      if (keyEndIndex !== -1) {
-        formatters = match[1].slice(keyEndIndex).split(this.formatSeparator).map(elem => elem.trim()).filter(Boolean);
-        match[1] = match[1].slice(0, keyEndIndex);
+      let doReduce = false;
+      if (match[0].indexOf(this.formatSeparator) !== -1 && !/{.*}/.test(match[1])) {
+        const r = match[1].split(this.formatSeparator).map(elem => elem.trim());
+        match[1] = r.shift();
+        formatters = r;
+        doReduce = true;
       }
       value = fc(handleHasOptions.call(this, match[1].trim(), clonedOptions), clonedOptions);
       if (value && match[0] === str && !isString(value)) return value;
@@ -1495,7 +1996,7 @@ class Interpolator {
         this.logger.warn(`missed to resolve ${match[1]} for nesting ${str}`);
         value = '';
       }
-      if (formatters.length) {
+      if (doReduce) {
         value = formatters.reduce((v, f) => this.format(v, f, options.lng, {
           ...options,
           interpolationkey: match[1].trim()
@@ -1541,68 +2042,68 @@ const parseFormatStr = formatStr => {
 };
 const createCachedFormatter = fn => {
   const cache = {};
-  return (v, l, o) => {
-    let optForCache = o;
-    if (o && o.interpolationkey && o.formatParams && o.formatParams[o.interpolationkey] && o[o.interpolationkey]) {
+  return (val, lng, options) => {
+    let optForCache = options;
+    if (options && options.interpolationkey && options.formatParams && options.formatParams[options.interpolationkey] && options[options.interpolationkey]) {
       optForCache = {
         ...optForCache,
-        [o.interpolationkey]: undefined
+        [options.interpolationkey]: undefined
       };
     }
-    const key = l + JSON.stringify(optForCache);
-    let frm = cache[key];
-    if (!frm) {
-      frm = fn(getCleanedCode(l), o);
-      cache[key] = frm;
+    const key = lng + JSON.stringify(optForCache);
+    let formatter = cache[key];
+    if (!formatter) {
+      formatter = fn(getCleanedCode(lng), options);
+      cache[key] = formatter;
     }
-    return frm(v);
+    return formatter(val);
   };
 };
-const createNonCachedFormatter = fn => (v, l, o) => fn(getCleanedCode(l), o)(v);
 class Formatter {
-  constructor(options = {}) {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     this.logger = baseLogger.create('formatter');
     this.options = options;
-    this.init(options);
-  }
-  init(services, options = {
-    interpolation: {}
-  }) {
-    this.formatSeparator = options.interpolation.formatSeparator || ',';
-    const cf = options.cacheInBuiltFormats ? createCachedFormatter : createNonCachedFormatter;
     this.formats = {
-      number: cf((lng, opt) => {
+      number: createCachedFormatter((lng, opt) => {
         const formatter = new Intl.NumberFormat(lng, {
           ...opt
         });
         return val => formatter.format(val);
       }),
-      currency: cf((lng, opt) => {
+      currency: createCachedFormatter((lng, opt) => {
         const formatter = new Intl.NumberFormat(lng, {
           ...opt,
           style: 'currency'
         });
         return val => formatter.format(val);
       }),
-      datetime: cf((lng, opt) => {
+      datetime: createCachedFormatter((lng, opt) => {
         const formatter = new Intl.DateTimeFormat(lng, {
           ...opt
         });
         return val => formatter.format(val);
       }),
-      relativetime: cf((lng, opt) => {
+      relativetime: createCachedFormatter((lng, opt) => {
         const formatter = new Intl.RelativeTimeFormat(lng, {
           ...opt
         });
         return val => formatter.format(val, opt.range || 'day');
       }),
-      list: cf((lng, opt) => {
+      list: createCachedFormatter((lng, opt) => {
         const formatter = new Intl.ListFormat(lng, {
           ...opt
         });
         return val => formatter.format(val);
       })
     };
+    this.init(options);
+  }
+  init(services) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      interpolation: {}
+    };
+    this.formatSeparator = options.interpolation.formatSeparator || ',';
   }
   add(name, fc) {
     this.formats[name.toLowerCase().trim()] = fc;
@@ -1610,7 +2111,8 @@ class Formatter {
   addCached(name, fc) {
     this.formats[name.toLowerCase().trim()] = createCachedFormatter(fc);
   }
-  format(value, format, lng, options = {}) {
+  format(value, format, lng) {
+    let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
     const formats = format.split(this.formatSeparator);
     if (formats.length > 1 && formats[0].indexOf('(') > 1 && formats[0].indexOf(')') < 0 && formats.find(f => f.indexOf(')') > -1)) {
       const lastIndex = formats.findIndex(f => f.indexOf(')') > -1);
@@ -1624,7 +2126,7 @@ class Formatter {
       if (this.formats[formatName]) {
         let formatted = mem;
         try {
-          const valOptions = options?.formatParams?.[options.interpolationkey] || {};
+          const valOptions = options && options.formatParams && options.formatParams[options.interpolationkey] || {};
           const l = valOptions.locale || valOptions.lng || options.locale || options.lng || lng;
           formatted = this.formats[formatName](mem, l, {
             ...formatOptions,
@@ -1651,7 +2153,8 @@ const removePending = (q, name) => {
   }
 };
 class Connector extends EventEmitter {
-  constructor(backend, store, services, options = {}) {
+  constructor(backend, store, services) {
+    let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
     super();
     this.backend = backend;
     this.store = store;
@@ -1666,7 +2169,9 @@ class Connector extends EventEmitter {
     this.retryTimeout = options.retryTimeout >= 1 ? options.retryTimeout : 350;
     this.state = {};
     this.queue = [];
-    this.backend?.init?.(services, options.backend, options);
+    if (this.backend && this.backend.init) {
+      this.backend.init(services, options.backend, options);
+    }
   }
   queueLoad(languages, namespaces, options, callback) {
     const toLoad = {};
@@ -1745,7 +2250,10 @@ class Connector extends EventEmitter {
     this.emit('loaded', loaded);
     this.queue = this.queue.filter(q => !q.done);
   }
-  read(lng, ns, fcName, tried = 0, wait = this.retryTimeout, callback) {
+  read(lng, ns, fcName) {
+    let tried = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    let wait = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : this.retryTimeout;
+    let callback = arguments.length > 5 ? arguments[5] : undefined;
     if (!lng.length) return callback(null, {});
     if (this.readingCalls >= this.maxParallelReads) {
       this.waitingReads.push({
@@ -1789,7 +2297,9 @@ class Connector extends EventEmitter {
     }
     return fc(lng, ns, resolver);
   }
-  prepareLoading(languages, namespaces, options = {}, callback) {
+  prepareLoading(languages, namespaces) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    let callback = arguments.length > 3 ? arguments[3] : undefined;
     if (!this.backend) {
       this.logger.warn('No backend was added via i18next.use. Will not load resources.');
       return callback && callback();
@@ -1813,7 +2323,8 @@ class Connector extends EventEmitter {
       reload: true
     }, callback);
   }
-  loadOne(name, prefix = '') {
+  loadOne(name) {
+    let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     const s = name.split('|');
     const lng = s[0];
     const ns = s[1];
@@ -1823,13 +2334,15 @@ class Connector extends EventEmitter {
       this.loaded(name, err, data);
     });
   }
-  saveMissing(languages, namespace, key, fallbackValue, isUpdate, options = {}, clb = () => {}) {
-    if (this.services?.utils?.hasLoadedNamespace && !this.services?.utils?.hasLoadedNamespace(namespace)) {
+  saveMissing(languages, namespace, key, fallbackValue, isUpdate) {
+    let options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
+    let clb = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : () => {};
+    if (this.services.utils && this.services.utils.hasLoadedNamespace && !this.services.utils.hasLoadedNamespace(namespace)) {
       this.logger.warn(`did not save key "${key}" as the namespace "${namespace}" was not yet loaded`, 'This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!');
       return;
     }
     if (key === undefined || key === null || key === '') return;
-    if (this.backend?.create) {
+    if (this.backend && this.backend.create) {
       const opts = {
         ...options,
         isUpdate
@@ -1862,7 +2375,7 @@ class Connector extends EventEmitter {
 
 const get = () => ({
   debug: false,
-  initAsync: true,
+  initImmediate: true,
   ns: ['translation'],
   defaultNS: ['translation'],
   fallbackLng: ['dev'],
@@ -1918,17 +2431,15 @@ const get = () => ({
     nestingOptionsSeparator: ',',
     maxReplaces: 1000,
     skipOnVariables: true
-  },
-  cacheInBuiltFormats: true
+  }
 });
 const transformOptions = options => {
   if (isString(options.ns)) options.ns = [options.ns];
   if (isString(options.fallbackLng)) options.fallbackLng = [options.fallbackLng];
   if (isString(options.fallbackNS)) options.fallbackNS = [options.fallbackNS];
-  if (options.supportedLngs?.indexOf?.('cimode') < 0) {
+  if (options.supportedLngs && options.supportedLngs.indexOf('cimode') < 0) {
     options.supportedLngs = options.supportedLngs.concat(['cimode']);
   }
-  if (typeof options.initImmediate === 'boolean') options.initAsync = options.initImmediate;
   return options;
 };
 
@@ -1941,17 +2452,10 @@ const bindMemberFunctions = inst => {
     }
   });
 };
-let supportNoticeShown = false;
-const usesLocize = inst => {
-  if (inst?.modules?.backend?.name?.indexOf('Locize') > 0) return true;
-  if (inst?.modules?.backend?.constructor?.name?.indexOf('Locize') > 0) return true;
-  if (inst?.options?.backend?.backends) {
-    if (inst.options.backend.backends.some(b => b?.name?.indexOf('Locize') > 0 || b?.constructor?.name?.indexOf('Locize') > 0)) return true;
-  }
-  return false;
-};
 class I18n extends EventEmitter {
-  constructor(options = {}, callback) {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let callback = arguments.length > 1 ? arguments[1] : undefined;
     super();
     this.options = transformOptions(options);
     this.services = {};
@@ -1961,7 +2465,7 @@ class I18n extends EventEmitter {
     };
     bindMemberFunctions(this);
     if (callback && !this.isInitialized && !options.isClone) {
-      if (!this.options.initAsync) {
+      if (!this.options.initImmediate) {
         this.init(options, callback);
         return this;
       }
@@ -1970,13 +2474,16 @@ class I18n extends EventEmitter {
       }, 0);
     }
   }
-  init(options = {}, callback) {
+  init() {
+    var _this = this;
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let callback = arguments.length > 1 ? arguments[1] : undefined;
     this.isInitializing = true;
     if (typeof options === 'function') {
       callback = options;
       options = {};
     }
-    if (options.defaultNS == null && options.ns) {
+    if (!options.defaultNS && options.defaultNS !== false && options.ns) {
       if (isString(options.ns)) {
         options.defaultNS = options.ns;
       } else if (options.ns.indexOf('translation') < 0) {
@@ -1989,23 +2496,18 @@ class I18n extends EventEmitter {
       ...this.options,
       ...transformOptions(options)
     };
-    this.options.interpolation = {
-      ...defOpts.interpolation,
-      ...this.options.interpolation
-    };
+    if (this.options.compatibilityAPI !== 'v1') {
+      this.options.interpolation = {
+        ...defOpts.interpolation,
+        ...this.options.interpolation
+      };
+    }
     if (options.keySeparator !== undefined) {
       this.options.userDefinedKeySeparator = options.keySeparator;
     }
     if (options.nsSeparator !== undefined) {
       this.options.userDefinedNsSeparator = options.nsSeparator;
     }
-    if (typeof this.options.overloadTranslationOptionHandler !== 'function') {
-      this.options.overloadTranslationOptionHandler = defOpts.overloadTranslationOptionHandler;
-    }
-    if (this.options.showSupportNotice !== false && !usesLocize(this) && !supportNoticeShown) {
-      if (typeof console !== 'undefined' && typeof console.info !== 'undefined') console.info('🌐 i18next is maintained with support from Locize — consider powering your project with managed localization (AI, CDN, integrations): https://locize.com 💙');
-      supportNoticeShown = true;
-    }
     const createClassOnDemand = ClassOrObject => {
       if (!ClassOrObject) return null;
       if (typeof ClassOrObject === 'function') return new ClassOrObject();
@@ -2020,7 +2522,7 @@ class I18n extends EventEmitter {
       let formatter;
       if (this.modules.formatter) {
         formatter = this.modules.formatter;
-      } else {
+      } else if (typeof Intl !== 'undefined') {
         formatter = Formatter;
       }
       const lu = new LanguageUtil(this.options);
@@ -2031,15 +2533,12 @@ class I18n extends EventEmitter {
       s.languageUtils = lu;
       s.pluralResolver = new PluralResolver(lu, {
         prepend: this.options.pluralSeparator,
+        compatibilityJSON: this.options.compatibilityJSON,
         simplifyPluralSuffix: this.options.simplifyPluralSuffix
       });
-      const usingLegacyFormatFunction = this.options.interpolation.format && this.options.interpolation.format !== defOpts.interpolation.format;
-      if (usingLegacyFormatFunction) {
-        this.logger.deprecate(`init: you are still using the legacy format function, please use the new approach: https://www.i18next.com/translation-function/formatting`);
-      }
       if (formatter && (!this.options.interpolation.format || this.options.interpolation.format === defOpts.interpolation.format)) {
         s.formatter = createClassOnDemand(formatter);
-        if (s.formatter.init) s.formatter.init(s, this.options);
+        s.formatter.init(s, this.options);
         this.options.interpolation.format = s.formatter.format.bind(s.formatter);
       }
       s.interpolator = new Interpolator(this.options);
@@ -2047,8 +2546,11 @@ class I18n extends EventEmitter {
         hasLoadedNamespace: this.hasLoadedNamespace.bind(this)
       };
       s.backendConnector = new Connector(createClassOnDemand(this.modules.backend), s.resourceStore, s, this.options);
-      s.backendConnector.on('*', (event, ...args) => {
-        this.emit(event, ...args);
+      s.backendConnector.on('*', function (event) {
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
+        }
+        _this.emit(event, ...args);
       });
       if (this.modules.languageDetector) {
         s.languageDetector = createClassOnDemand(this.modules.languageDetector);
@@ -2059,8 +2561,11 @@ class I18n extends EventEmitter {
         if (s.i18nFormat.init) s.i18nFormat.init(this);
       }
       this.translator = new Translator(this.services, this.options);
-      this.translator.on('*', (event, ...args) => {
-        this.emit(event, ...args);
+      this.translator.on('*', function (event) {
+        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+          args[_key2 - 1] = arguments[_key2];
+        }
+        _this.emit(event, ...args);
       });
       this.modules.external.forEach(m => {
         if (m.init) m.init(this);
@@ -2077,13 +2582,15 @@ class I18n extends EventEmitter {
     }
     const storeApi = ['getResource', 'hasResourceBundle', 'getResourceBundle', 'getDataByLanguage'];
     storeApi.forEach(fcName => {
-      this[fcName] = (...args) => this.store[fcName](...args);
+      this[fcName] = function () {
+        return _this.store[fcName](...arguments);
+      };
     });
     const storeApiChained = ['addResource', 'addResources', 'addResourceBundle', 'removeResourceBundle'];
     storeApiChained.forEach(fcName => {
-      this[fcName] = (...args) => {
-        this.store[fcName](...args);
-        return this;
+      this[fcName] = function () {
+        _this.store[fcName](...arguments);
+        return _this;
       };
     });
     const deferred = defer();
@@ -2097,22 +2604,23 @@ class I18n extends EventEmitter {
         deferred.resolve(t);
         callback(err, t);
       };
-      if (this.languages && !this.isInitialized) return finish(null, this.t.bind(this));
+      if (this.languages && this.options.compatibilityAPI !== 'v1' && !this.isInitialized) return finish(null, this.t.bind(this));
       this.changeLanguage(this.options.lng, finish);
     };
-    if (this.options.resources || !this.options.initAsync) {
+    if (this.options.resources || !this.options.initImmediate) {
       load();
     } else {
       setTimeout(load, 0);
     }
     return deferred;
   }
-  loadResources(language, callback = noop) {
+  loadResources(language) {
+    let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
     let usedCallback = callback;
     const usedLng = isString(language) ? language : this.language;
     if (typeof language === 'function') usedCallback = language;
     if (!this.options.resources || this.options.partialBundledLanguages) {
-      if (usedLng?.toLowerCase() === 'cimode' && (!this.options.preload || this.options.preload.length === 0)) return usedCallback();
+      if (usedLng && usedLng.toLowerCase() === 'cimode' && (!this.options.preload || this.options.preload.length === 0)) return usedCallback();
       const toLoad = [];
       const append = lng => {
         if (!lng) return;
@@ -2129,7 +2637,9 @@ class I18n extends EventEmitter {
       } else {
         append(usedLng);
       }
-      this.options.preload?.forEach?.(l => append(l));
+      if (this.options.preload) {
+        this.options.preload.forEach(l => append(l));
+      }
       this.services.backendConnector.load(toLoad, this.options.ns, e => {
         if (!e && !this.resolvedLanguage && this.language) this.setResolvedLanguage(this.language);
         usedCallback(e);
@@ -2194,542 +2704,249 @@ class I18n extends EventEmitter {
         break;
       }
     }
-    if (!this.resolvedLanguage && this.languages.indexOf(l) < 0 && this.store.hasLanguageSomeTranslations(l)) {
-      this.resolvedLanguage = l;
-      this.languages.unshift(l);
-    }
   }
   changeLanguage(lng, callback) {
+    var _this2 = this;
     this.isLanguageChangingTo = lng;
     const deferred = defer();
     this.emit('languageChanging', lng);
-    const setLngProps = l => {
-      this.language = l;
-      this.languages = this.services.languageUtils.toResolveHierarchy(l);
-      this.resolvedLanguage = undefined;
-      this.setResolvedLanguage(l);
-    };
-    const done = (err, l) => {
-      if (l) {
-        if (this.isLanguageChangingTo === lng) {
-          setLngProps(l);
-          this.translator.changeLanguage(l);
-          this.isLanguageChangingTo = undefined;
-          this.emit('languageChanged', l);
-          this.logger.log('languageChanged', l);
-        }
-      } else {
-        this.isLanguageChangingTo = undefined;
-      }
-      deferred.resolve((...args) => this.t(...args));
-      if (callback) callback(err, (...args) => this.t(...args));
-    };
-    const setLng = lngs => {
-      if (!lng && !lngs && this.services.languageDetector) lngs = [];
-      const fl = isString(lngs) ? lngs : lngs && lngs[0];
-      const l = this.store.hasLanguageSomeTranslations(fl) ? fl : this.services.languageUtils.getBestMatchFromCodes(isString(lngs) ? [lngs] : lngs);
-      if (l) {
-        if (!this.language) {
-          setLngProps(l);
-        }
-        if (!this.translator.language) this.translator.changeLanguage(l);
-        this.services.languageDetector?.cacheUserLanguage?.(l);
-      }
-      this.loadResources(l, err => {
-        done(err, l);
-      });
-    };
-    if (!lng && this.services.languageDetector && !this.services.languageDetector.async) {
-      setLng(this.services.languageDetector.detect());
-    } else if (!lng && this.services.languageDetector && this.services.languageDetector.async) {
-      if (this.services.languageDetector.detect.length === 0) {
-        this.services.languageDetector.detect().then(setLng);
-      } else {
-        this.services.languageDetector.detect(setLng);
-      }
-    } else {
-      setLng(lng);
-    }
-    return deferred;
-  }
-  getFixedT(lng, ns, keyPrefix) {
-    const fixedT = (key, opts, ...rest) => {
-      let o;
-      if (typeof opts !== 'object') {
-        o = this.options.overloadTranslationOptionHandler([key, opts].concat(rest));
-      } else {
-        o = {
-          ...opts
-        };
-      }
-      o.lng = o.lng || fixedT.lng;
-      o.lngs = o.lngs || fixedT.lngs;
-      o.ns = o.ns || fixedT.ns;
-      if (o.keyPrefix !== '') o.keyPrefix = o.keyPrefix || keyPrefix || fixedT.keyPrefix;
-      const keySeparator = this.options.keySeparator || '.';
-      let resultKey;
-      if (o.keyPrefix && Array.isArray(key)) {
-        resultKey = key.map(k => {
-          if (typeof k === 'function') k = keysFromSelector(k, {
-            ...this.options,
-            ...opts
-          });
-          return `${o.keyPrefix}${keySeparator}${k}`;
-        });
-      } else {
-        if (typeof key === 'function') key = keysFromSelector(key, {
-          ...this.options,
-          ...opts
-        });
-        resultKey = o.keyPrefix ? `${o.keyPrefix}${keySeparator}${key}` : key;
-      }
-      return this.t(resultKey, o);
-    };
-    if (isString(lng)) {
-      fixedT.lng = lng;
-    } else {
-      fixedT.lngs = lng;
-    }
-    fixedT.ns = ns;
-    fixedT.keyPrefix = keyPrefix;
-    return fixedT;
-  }
-  t(...args) {
-    return this.translator?.translate(...args);
-  }
-  exists(...args) {
-    return this.translator?.exists(...args);
-  }
-  setDefaultNamespace(ns) {
-    this.options.defaultNS = ns;
-  }
-  hasLoadedNamespace(ns, options = {}) {
-    if (!this.isInitialized) {
-      this.logger.warn('hasLoadedNamespace: i18next was not initialized', this.languages);
-      return false;
-    }
-    if (!this.languages || !this.languages.length) {
-      this.logger.warn('hasLoadedNamespace: i18n.languages were undefined or empty', this.languages);
-      return false;
-    }
-    const lng = options.lng || this.resolvedLanguage || this.languages[0];
-    const fallbackLng = this.options ? this.options.fallbackLng : false;
-    const lastLng = this.languages[this.languages.length - 1];
-    if (lng.toLowerCase() === 'cimode') return true;
-    const loadNotPending = (l, n) => {
-      const loadState = this.services.backendConnector.state[`${l}|${n}`];
-      return loadState === -1 || loadState === 0 || loadState === 2;
-    };
-    if (options.precheck) {
-      const preResult = options.precheck(this, loadNotPending);
-      if (preResult !== undefined) return preResult;
-    }
-    if (this.hasResourceBundle(lng, ns)) return true;
-    if (!this.services.backendConnector.backend || this.options.resources && !this.options.partialBundledLanguages) return true;
-    if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
-    return false;
-  }
-  loadNamespaces(ns, callback) {
-    const deferred = defer();
-    if (!this.options.ns) {
-      if (callback) callback();
-      return Promise.resolve();
-    }
-    if (isString(ns)) ns = [ns];
-    ns.forEach(n => {
-      if (this.options.ns.indexOf(n) < 0) this.options.ns.push(n);
-    });
-    this.loadResources(err => {
-      deferred.resolve();
-      if (callback) callback(err);
-    });
-    return deferred;
-  }
-  loadLanguages(lngs, callback) {
-    const deferred = defer();
-    if (isString(lngs)) lngs = [lngs];
-    const preloaded = this.options.preload || [];
-    const newLngs = lngs.filter(lng => preloaded.indexOf(lng) < 0 && this.services.languageUtils.isSupportedCode(lng));
-    if (!newLngs.length) {
-      if (callback) callback();
-      return Promise.resolve();
-    }
-    this.options.preload = preloaded.concat(newLngs);
-    this.loadResources(err => {
-      deferred.resolve();
-      if (callback) callback(err);
-    });
-    return deferred;
-  }
-  dir(lng) {
-    if (!lng) lng = this.resolvedLanguage || (this.languages?.length > 0 ? this.languages[0] : this.language);
-    if (!lng) return 'rtl';
-    try {
-      const l = new Intl.Locale(lng);
-      if (l && l.getTextInfo) {
-        const ti = l.getTextInfo();
-        if (ti && ti.direction) return ti.direction;
-      }
-    } catch (e) {}
-    const rtlLngs = ['ar', 'shu', 'sqr', 'ssh', 'xaa', 'yhd', 'yud', 'aao', 'abh', 'abv', 'acm', 'acq', 'acw', 'acx', 'acy', 'adf', 'ads', 'aeb', 'aec', 'afb', 'ajp', 'apc', 'apd', 'arb', 'arq', 'ars', 'ary', 'arz', 'auz', 'avl', 'ayh', 'ayl', 'ayn', 'ayp', 'bbz', 'pga', 'he', 'iw', 'ps', 'pbt', 'pbu', 'pst', 'prp', 'prd', 'ug', 'ur', 'ydd', 'yds', 'yih', 'ji', 'yi', 'hbo', 'men', 'xmn', 'fa', 'jpr', 'peo', 'pes', 'prs', 'dv', 'sam', 'ckb'];
-    const languageUtils = this.services?.languageUtils || new LanguageUtil(get());
-    if (lng.toLowerCase().indexOf('-latn') > 1) return 'ltr';
-    return rtlLngs.indexOf(languageUtils.getLanguagePartFromCode(lng)) > -1 || lng.toLowerCase().indexOf('-arab') > 1 ? 'rtl' : 'ltr';
-  }
-  static createInstance(options = {}, callback) {
-    const instance = new I18n(options, callback);
-    instance.createInstance = I18n.createInstance;
-    return instance;
-  }
-  cloneInstance(options = {}, callback = noop) {
-    const forkResourceStore = options.forkResourceStore;
-    if (forkResourceStore) delete options.forkResourceStore;
-    const mergedOptions = {
-      ...this.options,
-      ...options,
-      ...{
-        isClone: true
-      }
+    const setLngProps = l => {
+      this.language = l;
+      this.languages = this.services.languageUtils.toResolveHierarchy(l);
+      this.resolvedLanguage = undefined;
+      this.setResolvedLanguage(l);
     };
-    const clone = new I18n(mergedOptions);
-    if (options.debug !== undefined || options.prefix !== undefined) {
-      clone.logger = clone.logger.clone(options);
-    }
-    const membersToCopy = ['store', 'services', 'language'];
-    membersToCopy.forEach(m => {
-      clone[m] = this[m];
-    });
-    clone.services = {
-      ...this.services
+    const done = (err, l) => {
+      if (l) {
+        setLngProps(l);
+        this.translator.changeLanguage(l);
+        this.isLanguageChangingTo = undefined;
+        this.emit('languageChanged', l);
+        this.logger.log('languageChanged', l);
+      } else {
+        this.isLanguageChangingTo = undefined;
+      }
+      deferred.resolve(function () {
+        return _this2.t(...arguments);
+      });
+      if (callback) callback(err, function () {
+        return _this2.t(...arguments);
+      });
     };
-    clone.services.utils = {
-      hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
+    const setLng = lngs => {
+      if (!lng && !lngs && this.services.languageDetector) lngs = [];
+      const l = isString(lngs) ? lngs : this.services.languageUtils.getBestMatchFromCodes(lngs);
+      if (l) {
+        if (!this.language) {
+          setLngProps(l);
+        }
+        if (!this.translator.language) this.translator.changeLanguage(l);
+        if (this.services.languageDetector && this.services.languageDetector.cacheUserLanguage) this.services.languageDetector.cacheUserLanguage(l);
+      }
+      this.loadResources(l, err => {
+        done(err, l);
+      });
     };
-    if (forkResourceStore) {
-      const clonedData = Object.keys(this.store.data).reduce((prev, l) => {
-        prev[l] = {
-          ...this.store.data[l]
-        };
-        prev[l] = Object.keys(prev[l]).reduce((acc, n) => {
-          acc[n] = {
-            ...prev[l][n]
-          };
-          return acc;
-        }, prev[l]);
-        return prev;
-      }, {});
-      clone.store = new ResourceStore(clonedData, mergedOptions);
-      clone.services.resourceStore = clone.store;
-    }
-    if (options.interpolation) {
-      const defOpts = get();
-      const mergedInterpolation = {
-        ...defOpts.interpolation,
-        ...this.options.interpolation,
-        ...options.interpolation
-      };
-      const mergedForInterpolator = {
-        ...mergedOptions,
-        interpolation: mergedInterpolation
-      };
-      clone.services.interpolator = new Interpolator(mergedForInterpolator);
+    if (!lng && this.services.languageDetector && !this.services.languageDetector.async) {
+      setLng(this.services.languageDetector.detect());
+    } else if (!lng && this.services.languageDetector && this.services.languageDetector.async) {
+      if (this.services.languageDetector.detect.length === 0) {
+        this.services.languageDetector.detect().then(setLng);
+      } else {
+        this.services.languageDetector.detect(setLng);
+      }
+    } else {
+      setLng(lng);
     }
-    clone.translator = new Translator(clone.services, mergedOptions);
-    clone.translator.on('*', (event, ...args) => {
-      clone.emit(event, ...args);
-    });
-    clone.init(mergedOptions, callback);
-    clone.translator.options = mergedOptions;
-    clone.translator.backendConnector.services.utils = {
-      hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
-    };
-    return clone;
+    return deferred;
   }
-  toJSON() {
-    return {
-      options: this.options,
-      store: this.store,
-      language: this.language,
-      languages: this.languages,
-      resolvedLanguage: this.resolvedLanguage
+  getFixedT(lng, ns, keyPrefix) {
+    var _this3 = this;
+    const fixedT = function (key, opts) {
+      let options;
+      if (typeof opts !== 'object') {
+        for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
+          rest[_key3 - 2] = arguments[_key3];
+        }
+        options = _this3.options.overloadTranslationOptionHandler([key, opts].concat(rest));
+      } else {
+        options = {
+          ...opts
+        };
+      }
+      options.lng = options.lng || fixedT.lng;
+      options.lngs = options.lngs || fixedT.lngs;
+      options.ns = options.ns || fixedT.ns;
+      if (options.keyPrefix !== '') options.keyPrefix = options.keyPrefix || keyPrefix || fixedT.keyPrefix;
+      const keySeparator = _this3.options.keySeparator || '.';
+      let resultKey;
+      if (options.keyPrefix && Array.isArray(key)) {
+        resultKey = key.map(k => `${options.keyPrefix}${keySeparator}${k}`);
+      } else {
+        resultKey = options.keyPrefix ? `${options.keyPrefix}${keySeparator}${key}` : key;
+      }
+      return _this3.t(resultKey, options);
     };
-  }
-}
-const instance = I18n.createInstance();
-
-instance.createInstance;
-instance.dir;
-instance.init;
-instance.loadResources;
-instance.reloadResources;
-instance.use;
-instance.changeLanguage;
-instance.getFixedT;
-instance.t;
-instance.exists;
-instance.setDefaultNamespace;
-instance.hasLoadedNamespace;
-instance.loadNamespaces;
-instance.loadLanguages;
-
-function warn() {
-  if (console && console.warn) {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if (isString(lng)) {
+      fixedT.lng = lng;
+    } else {
+      fixedT.lngs = lng;
     }
-    if (typeof args[0] === 'string') args[0] = `react-i18next:: ${args[0]}`;
-    console.warn(...args);
-  }
-}
-const alreadyWarned = {};
-function warnOnce() {
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
+    fixedT.ns = ns;
+    fixedT.keyPrefix = keyPrefix;
+    return fixedT;
   }
-  if (typeof args[0] === 'string' && alreadyWarned[args[0]]) return;
-  if (typeof args[0] === 'string') alreadyWarned[args[0]] = new Date();
-  warn(...args);
-}
-const loadedClb = (i18n, cb) => () => {
-  if (i18n.isInitialized) {
-    cb();
-  } else {
-    const initialized = () => {
-      setTimeout(() => {
-        i18n.off('initialized', initialized);
-      }, 0);
-      cb();
-    };
-    i18n.on('initialized', initialized);
+  t() {
+    return this.translator && this.translator.translate(...arguments);
   }
-};
-function loadNamespaces(i18n, ns, cb) {
-  i18n.loadNamespaces(ns, loadedClb(i18n, cb));
-}
-function loadLanguages(i18n, lng, ns, cb) {
-  if (typeof ns === 'string') ns = [ns];
-  ns.forEach(n => {
-    if (i18n.options.ns.indexOf(n) < 0) i18n.options.ns.push(n);
-  });
-  i18n.loadLanguages(lng, loadedClb(i18n, cb));
-}
-function oldI18nextHasLoadedNamespace(ns, i18n) {
-  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  const lng = i18n.languages[0];
-  const fallbackLng = i18n.options ? i18n.options.fallbackLng : false;
-  const lastLng = i18n.languages[i18n.languages.length - 1];
-  if (lng.toLowerCase() === 'cimode') return true;
-  const loadNotPending = (l, n) => {
-    const loadState = i18n.services.backendConnector.state[`${l}|${n}`];
-    return loadState === -1 || loadState === 2;
-  };
-  if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18n.services.backendConnector.backend && i18n.isLanguageChangingTo && !loadNotPending(i18n.isLanguageChangingTo, ns)) return false;
-  if (i18n.hasResourceBundle(lng, ns)) return true;
-  if (!i18n.services.backendConnector.backend || i18n.options.resources && !i18n.options.partialBundledLanguages) return true;
-  if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
-  return false;
-}
-function hasLoadedNamespace(ns, i18n) {
-  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  if (!i18n.languages || !i18n.languages.length) {
-    warnOnce('i18n.languages were undefined or empty', i18n.languages);
-    return true;
+  exists() {
+    return this.translator && this.translator.exists(...arguments);
   }
-  const isNewerI18next = i18n.options.ignoreJSONStructure !== undefined;
-  if (!isNewerI18next) {
-    return oldI18nextHasLoadedNamespace(ns, i18n, options);
+  setDefaultNamespace(ns) {
+    this.options.defaultNS = ns;
   }
-  return i18n.hasLoadedNamespace(ns, {
-    lng: options.lng,
-    precheck: (i18nInstance, loadNotPending) => {
-      if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18nInstance.services.backendConnector.backend && i18nInstance.isLanguageChangingTo && !loadNotPending(i18nInstance.isLanguageChangingTo, ns)) return false;
+  hasLoadedNamespace(ns) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (!this.isInitialized) {
+      this.logger.warn('hasLoadedNamespace: i18next was not initialized', this.languages);
+      return false;
     }
-  });
-}
-
-const matchHtmlEntity = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g;
-const htmlEntities = {
-  '&amp;': '&',
-  '&#38;': '&',
-  '&lt;': '<',
-  '&#60;': '<',
-  '&gt;': '>',
-  '&#62;': '>',
-  '&apos;': "'",
-  '&#39;': "'",
-  '&quot;': '"',
-  '&#34;': '"',
-  '&nbsp;': ' ',
-  '&#160;': ' ',
-  '&copy;': '©',
-  '&#169;': '©',
-  '&reg;': '®',
-  '&#174;': '®',
-  '&hellip;': '…',
-  '&#8230;': '…',
-  '&#x2F;': '/',
-  '&#47;': '/'
-};
-const unescapeHtmlEntity = m => htmlEntities[m];
-const unescape = text => text.replace(matchHtmlEntity, unescapeHtmlEntity);
-
-let defaultOptions$1 = {
-  bindI18n: 'languageChanged',
-  bindI18nStore: '',
-  transEmptyNodeValue: '',
-  transSupportBasicHtmlNodes: true,
-  transWrapTextNodes: '',
-  transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'],
-  useSuspense: true,
-  unescape
-};
-function setDefaults() {
-  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions$1 = {
-    ...defaultOptions$1,
-    ...options
-  };
-}
-function getDefaults() {
-  return defaultOptions$1;
-}
-
-let i18nInstance;
-function setI18n(instance) {
-  i18nInstance = instance;
-}
-function getI18n() {
-  return i18nInstance;
-}
-
-const initReactI18next = {
-  type: '3rdParty',
-  init(instance) {
-    setDefaults(instance.options.react);
-    setI18n(instance);
-  }
-};
-
-const I18nContext = React.createContext();
-class ReportNamespaces {
-  constructor() {
-    this.usedNamespaces = {};
+    if (!this.languages || !this.languages.length) {
+      this.logger.warn('hasLoadedNamespace: i18n.languages were undefined or empty', this.languages);
+      return false;
+    }
+    const lng = options.lng || this.resolvedLanguage || this.languages[0];
+    const fallbackLng = this.options ? this.options.fallbackLng : false;
+    const lastLng = this.languages[this.languages.length - 1];
+    if (lng.toLowerCase() === 'cimode') return true;
+    const loadNotPending = (l, n) => {
+      const loadState = this.services.backendConnector.state[`${l}|${n}`];
+      return loadState === -1 || loadState === 0 || loadState === 2;
+    };
+    if (options.precheck) {
+      const preResult = options.precheck(this, loadNotPending);
+      if (preResult !== undefined) return preResult;
+    }
+    if (this.hasResourceBundle(lng, ns)) return true;
+    if (!this.services.backendConnector.backend || this.options.resources && !this.options.partialBundledLanguages) return true;
+    if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
+    return false;
   }
-  addUsedNamespaces(namespaces) {
-    namespaces.forEach(ns => {
-      if (!this.usedNamespaces[ns]) this.usedNamespaces[ns] = true;
+  loadNamespaces(ns, callback) {
+    const deferred = defer();
+    if (!this.options.ns) {
+      if (callback) callback();
+      return Promise.resolve();
+    }
+    if (isString(ns)) ns = [ns];
+    ns.forEach(n => {
+      if (this.options.ns.indexOf(n) < 0) this.options.ns.push(n);
     });
+    this.loadResources(err => {
+      deferred.resolve();
+      if (callback) callback(err);
+    });
+    return deferred;
   }
-  getUsedNamespaces() {
-    return Object.keys(this.usedNamespaces);
+  loadLanguages(lngs, callback) {
+    const deferred = defer();
+    if (isString(lngs)) lngs = [lngs];
+    const preloaded = this.options.preload || [];
+    const newLngs = lngs.filter(lng => preloaded.indexOf(lng) < 0 && this.services.languageUtils.isSupportedCode(lng));
+    if (!newLngs.length) {
+      if (callback) callback();
+      return Promise.resolve();
+    }
+    this.options.preload = preloaded.concat(newLngs);
+    this.loadResources(err => {
+      deferred.resolve();
+      if (callback) callback(err);
+    });
+    return deferred;
   }
-}
-
-const usePrevious = (value, ignore) => {
-  const ref = React.useRef();
-  React.useEffect(() => {
-    ref.current = ignore ? ref.current : value;
-  }, [value, ignore]);
-  return ref.current;
-};
-function useTranslation(ns) {
-  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const {
-    i18n: i18nFromProps
-  } = props;
-  const {
-    i18n: i18nFromContext,
-    defaultNS: defaultNSFromContext
-  } = React.useContext(I18nContext) || {};
-  const i18n = i18nFromProps || i18nFromContext || getI18n();
-  if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
-  if (!i18n) {
-    warnOnce('You will need to pass in an i18next instance by using initReactI18next');
-    const notReadyT = (k, optsOrDefaultValue) => {
-      if (typeof optsOrDefaultValue === 'string') return optsOrDefaultValue;
-      if (optsOrDefaultValue && typeof optsOrDefaultValue === 'object' && typeof optsOrDefaultValue.defaultValue === 'string') return optsOrDefaultValue.defaultValue;
-      return Array.isArray(k) ? k[k.length - 1] : k;
-    };
-    const retNotReady = [notReadyT, {}, false];
-    retNotReady.t = notReadyT;
-    retNotReady.i18n = {};
-    retNotReady.ready = false;
-    return retNotReady;
+  dir(lng) {
+    if (!lng) lng = this.resolvedLanguage || (this.languages && this.languages.length > 0 ? this.languages[0] : this.language);
+    if (!lng) return 'rtl';
+    const rtlLngs = ['ar', 'shu', 'sqr', 'ssh', 'xaa', 'yhd', 'yud', 'aao', 'abh', 'abv', 'acm', 'acq', 'acw', 'acx', 'acy', 'adf', 'ads', 'aeb', 'aec', 'afb', 'ajp', 'apc', 'apd', 'arb', 'arq', 'ars', 'ary', 'arz', 'auz', 'avl', 'ayh', 'ayl', 'ayn', 'ayp', 'bbz', 'pga', 'he', 'iw', 'ps', 'pbt', 'pbu', 'pst', 'prp', 'prd', 'ug', 'ur', 'ydd', 'yds', 'yih', 'ji', 'yi', 'hbo', 'men', 'xmn', 'fa', 'jpr', 'peo', 'pes', 'prs', 'dv', 'sam', 'ckb'];
+    const languageUtils = this.services && this.services.languageUtils || new LanguageUtil(get());
+    return rtlLngs.indexOf(languageUtils.getLanguagePartFromCode(lng)) > -1 || lng.toLowerCase().indexOf('-arab') > 1 ? 'rtl' : 'ltr';
   }
-  if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
-  const i18nOptions = {
-    ...getDefaults(),
-    ...i18n.options.react,
-    ...props
-  };
-  const {
-    useSuspense,
-    keyPrefix
-  } = i18nOptions;
-  let namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
-  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
-  if (i18n.reportNamespaces.addUsedNamespaces) i18n.reportNamespaces.addUsedNamespaces(namespaces);
-  const ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every(n => hasLoadedNamespace(n, i18n, i18nOptions));
-  function getT() {
-    return i18n.getFixedT(props.lng || null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
+  static createInstance() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let callback = arguments.length > 1 ? arguments[1] : undefined;
+    return new I18n(options, callback);
   }
-  const [t, setT] = React.useState(getT);
-  let joinedNS = namespaces.join();
-  if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
-  const previousJoinedNS = usePrevious(joinedNS);
-  const isMounted = React.useRef(true);
-  React.useEffect(() => {
-    const {
-      bindI18n,
-      bindI18nStore
-    } = i18nOptions;
-    isMounted.current = true;
-    if (!ready && !useSuspense) {
-      if (props.lng) {
-        loadLanguages(i18n, props.lng, namespaces, () => {
-          if (isMounted.current) setT(getT);
-        });
-      } else {
-        loadNamespaces(i18n, namespaces, () => {
-          if (isMounted.current) setT(getT);
-        });
+  cloneInstance() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+    const forkResourceStore = options.forkResourceStore;
+    if (forkResourceStore) delete options.forkResourceStore;
+    const mergedOptions = {
+      ...this.options,
+      ...options,
+      ...{
+        isClone: true
       }
-    }
-    if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
-      setT(getT);
-    }
-    function boundReset() {
-      if (isMounted.current) setT(getT);
-    }
-    if (bindI18n && i18n) i18n.on(bindI18n, boundReset);
-    if (bindI18nStore && i18n) i18n.store.on(bindI18nStore, boundReset);
-    return () => {
-      isMounted.current = false;
-      if (bindI18n && i18n) bindI18n.split(' ').forEach(e => i18n.off(e, boundReset));
-      if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(e => i18n.store.off(e, boundReset));
     };
-  }, [i18n, joinedNS]);
-  const isInitial = React.useRef(true);
-  React.useEffect(() => {
-    if (isMounted.current && !isInitial.current) {
-      setT(getT);
+    const clone = new I18n(mergedOptions);
+    if (options.debug !== undefined || options.prefix !== undefined) {
+      clone.logger = clone.logger.clone(options);
     }
-    isInitial.current = false;
-  }, [i18n, keyPrefix]);
-  const ret = [t, i18n, ready];
-  ret.t = t;
-  ret.i18n = i18n;
-  ret.ready = ready;
-  if (ready) return ret;
-  if (!ready && !useSuspense) return ret;
-  throw new Promise(resolve => {
-    if (props.lng) {
-      loadLanguages(i18n, props.lng, namespaces, () => resolve());
-    } else {
-      loadNamespaces(i18n, namespaces, () => resolve());
+    const membersToCopy = ['store', 'services', 'language'];
+    membersToCopy.forEach(m => {
+      clone[m] = this[m];
+    });
+    clone.services = {
+      ...this.services
+    };
+    clone.services.utils = {
+      hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
+    };
+    if (forkResourceStore) {
+      clone.store = new ResourceStore(this.store.data, mergedOptions);
+      clone.services.resourceStore = clone.store;
     }
-  });
+    clone.translator = new Translator(clone.services, mergedOptions);
+    clone.translator.on('*', function (event) {
+      for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
+        args[_key4 - 1] = arguments[_key4];
+      }
+      clone.emit(event, ...args);
+    });
+    clone.init(mergedOptions, callback);
+    clone.translator.options = mergedOptions;
+    clone.translator.backendConnector.services.utils = {
+      hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
+    };
+    return clone;
+  }
+  toJSON() {
+    return {
+      options: this.options,
+      store: this.store,
+      language: this.language,
+      languages: this.languages,
+      resolvedLanguage: this.resolvedLanguage
+    };
+  }
 }
+const instance = I18n.createInstance();
+instance.createInstance = I18n.createInstance;
+
+instance.createInstance;
+instance.dir;
+instance.init;
+instance.loadResources;
+instance.reloadResources;
+instance.use;
+instance.changeLanguage;
+instance.getFixedT;
+instance.t;
+instance.exists;
+instance.setDefaultNamespace;
+instance.hasLoadedNamespace;
+instance.loadNamespaces;
+instance.loadLanguages;
 
 var locations$1 = {
 	label: "Location",
@@ -2871,70 +3088,30 @@ var fiCommon = {
 	errors: errors
 };
 
-var urlParams = typeof window !== 'undefined'
-    ? new URLSearchParams(window.location.search)
-    : null;
-var localeFromUrl = (urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('locale')) || 'fi';
-instance.use(initReactI18next).init({
-    resources: {
-        en: { filterBar: enFilterBar, common: enCommon },
-        fi: { filterBar: fiFilterBar, common: fiCommon },
-    },
-    lng: localeFromUrl,
-    fallbackLng: 'fi',
-    interpolation: {
-        escapeValue: false,
-    },
-});
-
-var useUpdateTranslations = function (_a) {
-    var language = _a.language;
-    var _b = __read(React.useState(0), 2); _b[0]; var setRerenderKey = _b[1];
-    React.useEffect(function () {
-        instance.changeLanguage(language);
-        setRerenderKey(function (prevKey) { return prevKey + 1; });
-    }, [language]);
+var resources = {
+    en: { filterBar: enFilterBar, common: enCommon },
+    fi: { filterBar: fiFilterBar, common: fiCommon },
 };
-
-// TODO - Refactor and rename this hook
-var useCloseFilterSection = function (_a) {
-    var handleSelectedFilter = _a.handleSelectedFilter;
-    var filterSectionRef = React.useRef(null);
-    React.useEffect(function () {
-        var handleClickOutside = function (event) {
-            if (filterSectionRef.current &&
-                !filterSectionRef.current.contains(event.target)) {
-                handleSelectedFilter(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [filterSectionRef]);
-    return { filterSectionRef: filterSectionRef };
+var readLocaleFromUrl = function () {
+    if (typeof window === 'undefined')
+        return null;
+    return new URLSearchParams(window.location.search).get('locale');
+};
+var createI18nInstance = function (language) {
+    var instance$1 = instance.createInstance();
+    instance$1.use(initReactI18next).init({
+        resources: resources,
+        lng: language || readLocaleFromUrl() || 'fi',
+        fallbackLng: 'fi',
+        interpolation: { escapeValue: false },
+    });
+    return instance$1;
 };
 
-var useAutoFocus = function (autoFocus) {
-    var ref = React.useRef(null);
-    React.useEffect(function () {
-        if (!autoFocus || !ref.current)
-            return;
-        var attemptFocus = function (attempts) {
-            if (attempts === void 0) { attempts = 0; }
-            if (attempts > 20 || !ref.current)
-                return;
-            var focusable = ref.current.querySelector('button:not([disabled]), [tabindex]:not([tabindex="-1"])');
-            if (focusable) {
-                focusable.focus();
-            }
-            else {
-                requestAnimationFrame(function () { return attemptFocus(attempts + 1); });
-            }
-        };
-        requestAnimationFrame(function () { return attemptFocus(); });
-    }, [autoFocus]);
-    return ref;
+var I18nProvider = function (_a) {
+    var language = _a.language, children = _a.children;
+    var i18n = React.useMemo(function () { return createI18nInstance(language); }, []);
+    return React.createElement(I18nextProvider, { i18n: i18n }, children);
 };
 
 var css_248z$j = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n  user-select: none;\n}\n\n.will-filter-bar-select-button.disabled {\n  cursor: not-allowed;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid;\n}\n\n.will-filter-bar-select-button .select-button-label {\n  color: var(--will-black);\n  font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n  color: var(--will-black);\n  font-weight: 400;\n  opacity: 0.5;\n  white-space: nowrap;\n  min-height: 19px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.will-filter-bar-select-button .select-button-description span {\n  font: inherit;\n}\n\n.will-filter-bar-select-button .select-button-label.active,\n.will-filter-bar-select-button .select-button-description.active {\n  font-weight: 700;\n  font-size: 15px;\n  opacity: 1;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n  }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 15px 0;\n  }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-description {\n    white-space: wrap;\n  }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none;\n  }\n}\n";
@@ -12231,7 +12408,7 @@ var FilterControls = function () {
                 tabsRef.current = el;
             }
         } },
-        ((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && locations.data.length > 1 && (React.createElement(React.Fragment, null,
+        !!((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && locations.data.length > 1 && (React.createElement(React.Fragment, null,
             React.createElement(SelectButton, { ref: function (el) { return (buttonRefs.current[FilterSections.LOCATIONS] = el); }, label: t('locations.label'), description: parsedLocations, onClick: function (e) {
                     previouslyFocusedButtonRef.current = e.currentTarget;
                     handleSelectedFilter(FilterSections.LOCATIONS);
@@ -12277,12 +12454,12 @@ styleInject(css_248z$2);
 var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n@media (max-width: 960px) {\n  .will-root {\n    width: 100%;\n    min-width: auto;\n  }\n}\n\n/* Common */\n\n.will-filter-bar-controls.dark,\n.will-filter-bar-panels.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-controls.light,\n.will-filter-bar-panels.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n";
 styleInject(css_248z$1);
 
-var FilterBar = function (_a) {
+var FilterBar = function (props) { return (React.createElement(I18nProvider, { language: props.language },
+    React.createElement(FilterBarInner, __assign$2({}, props)))); };
+var FilterBarInner = function (_a) {
     var language = _a.language, ageCategories = _a.ageCategories, _b = _a.redirectUrl, redirectUrl = _b === void 0 ? REDIRECT_URL_FALLBACK : _b, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs, outerLoading = _a.outerLoading, locations = _a.locations;
     var themePalette = useTheme({ palette: palette });
-    // Translations
     useUpdateTranslations({ language: language });
-    // Display component after fully loaded
     useAwaitRender();
     return (React.createElement(FilterBarProvider, { language: language, ageCategories: ageCategories, redirectUrl: redirectUrl, palette: palette, onSubmit: onSubmit, fullWidth: fullWidth, disableCalendarDates: disableCalendarDates, mode: mode, tabs: tabs, outerLoading: outerLoading, locations: locations },
         React.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
@@ -12449,7 +12626,11 @@ var renderCalendarErrorMessage = function (_a) {
 var css_248z = ".will-root .will-calendar-wrapper {\n    box-shadow: var(--will-box-shadow-dark);\n    border-radius: 20px;\n    background-color: var(--will-white);\n    position: absolute;\n    top: 0;\n    left: 0;\n   \n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n   padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n    display: flex;\n    justify-content: space-between;\n    border-bottom: 1px solid var(--will-grey);\n    align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n    border-top: 1px solid var(--will-grey);\n}\n\n/* Footer actions */\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n    display: flex;\n    justify-content: space-between;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n    margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n    margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n    display: flex;\n    min-height: 20.5px;\n    margin-top: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error {\n    display: flex;\n    max-width: 80%;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error span {\n    display: inline-block;\n    margin-left: 10px;\n}\n\n@media (max-width: 960px) {\n    .will-root .will-calendar-wrapper {\n        width: -webkit-fill-available;\n        margin: 0 -6%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-header,\n    .will-root .will-calendar-wrapper .will-calendar-main,\n    .will-root .will-calendar-wrapper .will-calendar-footer {\n        padding: 20px 10px;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n        flex-direction: column;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates  {\n        text-align: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n       justify-content: center;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n       flex-direction: column;\n       width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n        width: 100%;\n        margin-top: 10px;\n     }\n\n     .will-root .will-calendar-wrapper .will-calendar-footer-error {\n        max-width: 100%;\n    }\n\n    .will-root .will-calendar-wrapper .will-calendar-footer-error span {\n        text-align: center;\n        margin-left: 5px;\n    }\n  }\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n    position: initial;\n}";
 styleInject(css_248z);
 
-function FilterCalendar(_a) {
+function FilterCalendar(props) {
+    return (React.createElement(I18nProvider, { language: props.language },
+        React.createElement(FilterCalendarInner, __assign$2({}, props))));
+}
+function FilterCalendarInner(_a) {
     var calendarOffset = _a.calendarOffset, language = _a.language, palette = _a.palette, onSubmit = _a.onSubmit, outerDisableCalendarDates = _a.disableCalendarDates, toggleCalendar = _a.toggleCalendar, loadingData = _a.loadingData, setToggleCalendar = _a.setToggleCalendar, requestDates = _a.requestDates, showFeedback = _a.showFeedback, noActiveSelection = _a.noActiveSelection, outerRangeContext = _a.rangeContext;
     var themePalette = useTheme({ palette: palette });
     // Translations