@cakemail-org/ui-components-v2 2.2.90 → 2.2.91

package/dist/esm/index.js

@@ -34,7 +34,7 @@ import TableHead from '@mui/material/TableHead';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import Collapse from '@mui/material/Collapse';
 import Select from '@mui/material/Select';
-import { DatePicker as DatePicker$1, TimePicker as TimePicker$1, DateTimePicker as DateTimePicker$1, MultiSectionDigitalClock, DateCalendar as DateCalendar$1, StaticDateTimePicker } from '@mui/x-date-pickers';
+import { DateCalendar as DateCalendar$1, DatePicker as DatePicker$1, StaticDateTimePicker, MultiSectionDigitalClock, DateTimePicker as DateTimePicker$1, TimePicker as TimePicker$1 } from '@mui/x-date-pickers';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { getNameList } from 'country-list';
@@ -1238,7 +1238,7 @@ const defer = () => {
 };
 const makeString = object => {
   if (object == null) return '';
-  return '' + object;
+  return String(object);
 };
 const copy$1 = (a, s, t) => {
   a.forEach(m => {
@@ -1246,7 +1246,7 @@ const copy$1 = (a, s, t) => {
   });
 };
 const lastOfPathSeparatorRegExp = /###/g;
-const cleanKey = key => key && key.indexOf('###') > -1 ? key.replace(lastOfPathSeparatorRegExp, '.') : key;
+const cleanKey = key => key && key.includes('###') ? key.replace(lastOfPathSeparatorRegExp, '.') : key;
 const canNotTraverseDeeper = object => !object || isString(object);
 const getLastOfPath = (object, path, Empty) => {
   const stack = !isString(path) ? path : path.split('.');
@@ -1331,7 +1331,7 @@ const deepExtend = (target, source, overwrite) => {
   return target;
 };
 const regexEscape = str => str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
-var _entityMap = {
+const _entityMap = {
   '&': '&',
   '<': '&lt;',
   '>': '&gt;',
@@ -1370,7 +1370,7 @@ const looksLikeObjectPathRegExpCache = new RegExpCache(20);
 const looksLikeObjectPath = (key, nsSeparator, keySeparator) => {
   nsSeparator = nsSeparator || '';
   keySeparator = keySeparator || '';
-  const possibleChars = chars.filter(c => nsSeparator.indexOf(c) < 0 && keySeparator.indexOf(c) < 0);
+  const possibleChars = chars.filter(c => !nsSeparator.includes(c) && !keySeparator.includes(c));
   if (possibleChars.length === 0) return true;
   const r = looksLikeObjectPathRegExpCache.getRegExp(`(${possibleChars.map(c => c === '?' ? '\\?' : c).join('|')})`);
   let matched = !r.test(key);
@@ -1403,7 +1403,7 @@ const deepFind = (obj, path, keySeparator = '.') => {
       nextPath += tokens[j];
       next = current[nextPath];
       if (next !== undefined) {
-        if (['string', 'number', 'boolean'].indexOf(typeof next) > -1 && j < tokens.length - 1) {
+        if (['string', 'number', 'boolean'].includes(typeof next) && j < tokens.length - 1) {
           continue;
         }
         i += j - i + 1;
@@ -1414,7 +1414,7 @@ const deepFind = (obj, path, keySeparator = '.') => {
   }
   return current;
 };
-const getCleanedCode = code => code?.replace('_', '-');
+const getCleanedCode = code => code?.replace(/_/g, '-');
 
 const consoleLogger = {
   type: 'logger',
@@ -1494,6 +1494,14 @@ class EventEmitter {
     }
     this.observers[event].delete(listener);
   }
+  once(event, listener) {
+    const wrapper = (...args) => {
+      listener(...args);
+      this.off(event, wrapper);
+    };
+    this.on(event, wrapper);
+    return this;
+  }
   emit(event, ...args) {
     if (this.observers[event]) {
       const cloned = Array.from(this.observers[event].entries());
@@ -1507,7 +1515,7 @@ class EventEmitter {
       const cloned = Array.from(this.observers['*'].entries());
       cloned.forEach(([observer, numTimesAdded]) => {
         for (let i = 0; i < numTimesAdded; i++) {
-          observer.apply(observer, [event, ...args]);
+          observer(event, ...args);
         }
       });
     }
@@ -1530,7 +1538,7 @@ class ResourceStore extends EventEmitter {
     }
   }
   addNamespaces(ns) {
-    if (this.options.ns.indexOf(ns) < 0) {
+    if (!this.options.ns.includes(ns)) {
       this.options.ns.push(ns);
     }
   }
@@ -1544,7 +1552,7 @@ class ResourceStore extends EventEmitter {
     const keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
     const ignoreJSONStructure = options.ignoreJSONStructure !== undefined ? options.ignoreJSONStructure : this.options.ignoreJSONStructure;
     let path;
-    if (lng.indexOf('.') > -1) {
+    if (lng.includes('.')) {
       path = lng.split('.');
     } else {
       path = [lng, ns];
@@ -1559,7 +1567,7 @@ class ResourceStore extends EventEmitter {
       }
     }
     const result = getPath$1(this.data, path);
-    if (!result && !ns && !key && lng.indexOf('.') > -1) {
+    if (!result && !ns && !key && lng.includes('.')) {
       lng = path[0];
       ns = path[1];
       key = path.slice(2).join('.');
@@ -1573,7 +1581,7 @@ class ResourceStore extends EventEmitter {
     const keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
     let path = [lng, ns];
     if (key) path = path.concat(keySeparator ? key.split(keySeparator) : key);
-    if (lng.indexOf('.') > -1) {
+    if (lng.includes('.')) {
       path = lng.split('.');
       value = ns;
       ns = path[1];
@@ -1597,7 +1605,7 @@ class ResourceStore extends EventEmitter {
     skipCopy: false
   }) {
     let path = [lng, ns];
-    if (lng.indexOf('.') > -1) {
+    if (lng.includes('.')) {
       path = lng.split('.');
       deep = resources;
       resources = ns;
@@ -1657,7 +1665,36 @@ var postProcessor = {
   }
 };
 
-const checkedLoadedFor = {};
+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());
+  const keySeparator = opts?.keySeparator ?? '.';
+  const nsSeparator = opts?.nsSeparator ?? ':';
+  if (path.length > 1 && nsSeparator) {
+    const ns = opts?.ns;
+    const nsArray = Array.isArray(ns) ? ns : null;
+    if (nsArray && nsArray.length > 1 && nsArray.slice(1).includes(path[0])) {
+      return `${path[0]}${nsSeparator}${path.slice(1).join(keySeparator)}`;
+    }
+  }
+  return path.join(keySeparator);
+}
+
 const shouldHandleAsObject = res => !isString(res) && typeof res !== 'boolean' && typeof res !== 'number';
 class Translator extends EventEmitter {
   constructor(services, options = {}) {
@@ -1668,6 +1705,7 @@ class Translator extends EventEmitter {
       this.options.keySeparator = '.';
     }
     this.logger = baseLogger.create('translator');
+    this.checkedLoadedFor = {};
   }
   changeLanguage(lng) {
     if (lng) this.language = lng;
@@ -1680,14 +1718,19 @@ class Translator extends EventEmitter {
     };
     if (key == null) return false;
     const resolved = this.resolve(key, opt);
-    return resolved?.res !== undefined;
+    if (resolved?.res === undefined) return false;
+    const isObject = shouldHandleAsObject(resolved.res);
+    if (opt.returnObjects === false && isObject) {
+      return false;
+    }
+    return true;
   }
   extractFromKey(key, opt) {
     let nsSeparator = opt.nsSeparator !== undefined ? opt.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 wouldCheckForNsInKey = nsSeparator && key.indexOf(nsSeparator) > -1;
+    const wouldCheckForNsInKey = nsSeparator && key.includes(nsSeparator);
     const seemsNaturalLanguage = !this.options.userDefinedKeySeparator && !opt.keySeparator && !this.options.userDefinedNsSeparator && !opt.nsSeparator && !looksLikeObjectPath(key, nsSeparator, keySeparator);
     if (wouldCheckForNsInKey && !seemsNaturalLanguage) {
       const m = key.match(this.interpolator.nestingRegexp);
@@ -1698,7 +1741,7 @@ class Translator extends EventEmitter {
         };
       }
       const parts = key.split(nsSeparator);
-      if (nsSeparator !== keySeparator || nsSeparator === keySeparator && this.options.ns.indexOf(parts[0]) > -1) namespaces = parts.shift();
+      if (nsSeparator !== keySeparator || nsSeparator === keySeparator && this.options.ns.includes(parts[0])) namespaces = parts.shift();
       key = parts.join(keySeparator);
     }
     return {
@@ -1713,12 +1756,20 @@ class Translator extends EventEmitter {
     if (typeof opt !== 'object' && this.options.overloadTranslationOptionHandler) {
       opt = this.options.overloadTranslationOptionHandler(arguments);
     }
-    if (typeof options === 'object') opt = {
+    if (typeof opt === 'object') opt = {
       ...opt
     };
     if (!opt) opt = {};
     if (keys == null) return '';
+    if (typeof keys === 'function') keys = keysFromSelector(keys, {
+      ...this.options,
+      ...opt
+    });
     if (!Array.isArray(keys)) keys = [String(keys)];
+    keys = keys.map(k => typeof k === 'function' ? keysFromSelector(k, {
+      ...this.options,
+      ...opt
+    }) : String(k));
     const returnDetails = opt.returnDetails !== undefined ? opt.returnDetails : this.options.returnDetails;
     const keySeparator = opt.keySeparator !== undefined ? opt.keySeparator : this.options.keySeparator;
     const {
@@ -1777,7 +1828,7 @@ class Translator extends EventEmitter {
     }
     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 (handleAsObjectInI18nFormat && resForObjHndl && handleAsObject && !noObject.includes(resType) && !(isString(joinArrays) && Array.isArray(resForObjHndl))) {
       if (!opt.returnObjects && !this.options.returnObjects) {
         if (!this.options.returnedObjectHandler) {
           this.logger.warn('accessing an object - but returnObjects options is not enabled!');
@@ -1873,7 +1924,7 @@ class Translator extends EventEmitter {
           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) {
+              if (needsZeroSuffixLookup && opt[`defaultValue${this.options.pluralSeparator}zero`] && !suffixes.includes(`${this.options.pluralSeparator}zero`)) {
                 suffixes.push(`${this.options.pluralSeparator}zero`);
               }
               suffixes.forEach(suffix => {
@@ -1965,6 +2016,10 @@ class Translator extends EventEmitter {
     let usedLng;
     let usedNS;
     if (isString(keys)) keys = [keys];
+    if (Array.isArray(keys)) keys = keys.map(k => typeof k === 'function' ? keysFromSelector(k, {
+      ...this.options,
+      ...opt
+    }) : k);
     keys.forEach(k => {
       if (this.isValidLookup(found)) return;
       const extracted = this.extractFromKey(k, opt);
@@ -1979,8 +2034,8 @@ class Translator extends EventEmitter {
       namespaces.forEach(ns => {
         if (this.isValidLookup(found)) return;
         usedNS = ns;
-        if (!checkedLoadedFor[`${codes[0]}-${ns}`] && this.utils?.hasLoadedNamespace && !this.utils?.hasLoadedNamespace(usedNS)) {
-          checkedLoadedFor[`${codes[0]}-${ns}`] = true;
+        if (!this.checkedLoadedFor[`${codes[0]}-${ns}`] && this.utils?.hasLoadedNamespace && !this.utils?.hasLoadedNamespace(usedNS)) {
+          this.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!!!');
         }
         codes.forEach(code => {
@@ -1995,22 +2050,22 @@ class Translator extends EventEmitter {
             const zeroSuffix = `${this.options.pluralSeparator}zero`;
             const ordinalPrefix = `${this.options.pluralSeparator}ordinal${this.options.pluralSeparator}`;
             if (needsPluralHandling) {
-              finalKeys.push(key + pluralSuffix);
-              if (opt.ordinal && pluralSuffix.indexOf(ordinalPrefix) === 0) {
+              if (opt.ordinal && pluralSuffix.startsWith(ordinalPrefix)) {
                 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 || '_'}${opt.context}`;
               finalKeys.push(contextKey);
               if (needsPluralHandling) {
-                finalKeys.push(contextKey + pluralSuffix);
-                if (opt.ordinal && pluralSuffix.indexOf(ordinalPrefix) === 0) {
+                if (opt.ordinal && pluralSuffix.startsWith(ordinalPrefix)) {
                   finalKeys.push(contextKey + pluralSuffix.replace(ordinalPrefix, this.options.pluralSeparator));
                 }
+                finalKeys.push(contextKey + pluralSuffix);
                 if (needsZeroSuffixLookup) {
                   finalKeys.push(contextKey + zeroSuffix);
                 }
@@ -2068,7 +2123,7 @@ class Translator extends EventEmitter {
   static hasDefaultValue(options) {
     const prefix = 'defaultValue';
     for (const option in options) {
-      if (Object.prototype.hasOwnProperty.call(options, option) && prefix === option.substring(0, prefix.length) && undefined !== options[option]) {
+      if (Object.prototype.hasOwnProperty.call(options, option) && option.startsWith(prefix) && undefined !== options[option]) {
         return true;
       }
     }
@@ -2084,7 +2139,7 @@ class LanguageUtil {
   }
   getScriptPartFromCode(code) {
     code = getCleanedCode(code);
-    if (!code || code.indexOf('-') < 0) return null;
+    if (!code || !code.includes('-')) return null;
     const p = code.split('-');
     if (p.length === 2) return null;
     p.pop();
@@ -2093,12 +2148,12 @@ class LanguageUtil {
   }
   getLanguagePartFromCode(code) {
     code = getCleanedCode(code);
-    if (!code || code.indexOf('-') < 0) return code;
+    if (!code || !code.includes('-')) return code;
     const p = code.split('-');
     return this.formatLanguageCode(p[0]);
   }
   formatLanguageCode(code) {
-    if (isString(code) && code.indexOf('-') > -1) {
+    if (isString(code) && code.includes('-')) {
       let formattedCode;
       try {
         formattedCode = Intl.getCanonicalLocales(code)[0];
@@ -2118,7 +2173,7 @@ class LanguageUtil {
     if (this.options.load === 'languageOnly' || this.options.nonExplicitSupportedLngs) {
       code = this.getLanguagePartFromCode(code);
     }
-    return !this.supportedLngs || !this.supportedLngs.length || this.supportedLngs.indexOf(code) > -1;
+    return !this.supportedLngs || !this.supportedLngs.length || this.supportedLngs.includes(code);
   }
   getBestMatchFromCodes(codes) {
     if (!codes) return null;
@@ -2136,10 +2191,11 @@ class LanguageUtil {
         const lngOnly = this.getLanguagePartFromCode(code);
         if (this.isSupportedCode(lngOnly)) return found = lngOnly;
         found = this.options.supportedLngs.find(supportedLng => {
-          if (supportedLng === lngOnly) return supportedLng;
-          if (supportedLng.indexOf('-') < 0 && lngOnly.indexOf('-') < 0) return;
-          if (supportedLng.indexOf('-') > 0 && lngOnly.indexOf('-') < 0 && supportedLng.substring(0, supportedLng.indexOf('-')) === lngOnly) return supportedLng;
-          if (supportedLng.indexOf(lngOnly) === 0 && lngOnly.length > 1) return supportedLng;
+          if (supportedLng === lngOnly) return true;
+          if (!supportedLng.includes('-') && !lngOnly.includes('-')) return false;
+          if (supportedLng.includes('-') && !lngOnly.includes('-') && supportedLng.slice(0, supportedLng.indexOf('-')) === lngOnly) return true;
+          if (supportedLng.startsWith(lngOnly) && lngOnly.length > 1) return true;
+          return false;
         });
       });
     }
@@ -2170,7 +2226,7 @@ class LanguageUtil {
         this.logger.warn(`rejecting language code not found in supportedLngs: ${c}`);
       }
     };
-    if (isString(code) && (code.indexOf('-') > -1 || code.indexOf('_') > -1)) {
+    if (isString(code) && (code.includes('-') || code.includes('_'))) {
       if (this.options.load !== 'languageOnly') addCode(this.formatLanguageCode(code));
       if (this.options.load !== 'languageOnly' && this.options.load !== 'currentOnly') addCode(this.getScriptPartFromCode(code));
       if (this.options.load !== 'currentOnly') addCode(this.getLanguagePartFromCode(code));
@@ -2178,7 +2234,7 @@ class LanguageUtil {
       addCode(this.formatLanguageCode(code));
     }
     fallbackCodes.forEach(fc => {
-      if (codes.indexOf(fc) < 0) addCode(this.formatLanguageCode(fc));
+      if (!codes.includes(fc)) addCode(this.formatLanguageCode(fc));
     });
     return codes;
   }
@@ -2205,9 +2261,6 @@ class PluralResolver {
     this.logger = baseLogger.create('pluralResolver');
     this.pluralRulesCache = {};
   }
-  addRule(lng, obj) {
-    this.rules[lng] = obj;
-  }
   clearCache() {
     this.pluralRulesCache = {};
   }
@@ -2227,7 +2280,7 @@ class PluralResolver {
         type
       });
     } catch (err) {
-      if (!Intl) {
+      if (typeof Intl === 'undefined') {
         this.logger.error('No Intl support, please use an Intl polyfill!');
         return dummyRule;
       }
@@ -2329,7 +2382,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;
@@ -2337,7 +2390,7 @@ class Interpolator {
     let replaces;
     const defaultData = this.options && this.options.interpolation && this.options.interpolation.defaultVariables || {};
     const handleFormat = key => {
-      if (key.indexOf(this.formatSeparator) < 0) {
+      if (!key.includes(this.formatSeparator)) {
         const path = deepFindWithDefaults(data, defaultData, key, this.options.keySeparator, this.options.ignoreJSONStructure);
         return this.alwaysFormat ? this.format(path, undefined, lng, {
           ...options,
@@ -2407,14 +2460,14 @@ class Interpolator {
     let clonedOptions;
     const handleHasOptions = (key, inheritedOptions) => {
       const sep = this.nestingOptionsSeparator;
-      if (key.indexOf(sep) < 0) return key;
-      const c = key.split(new RegExp(`${sep}[ ]*{`));
+      if (!key.includes(sep)) return key;
+      const c = key.split(new RegExp(`${regexEscape(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 % 2 !== 0) {
+      if ((matchedSingleQuotes?.length ?? 0) % 2 === 0 && !matchedDoubleQuotes || (matchedDoubleQuotes?.length ?? 0) % 2 !== 0) {
         optionsString = optionsString.replace(/'/g, '"');
       }
       try {
@@ -2427,7 +2480,7 @@ class Interpolator {
         this.logger.warn(`failed parsing options string in nesting for key ${key}`, e);
         return `${key}${sep}${optionsString}`;
       }
-      if (clonedOptions.defaultValue && clonedOptions.defaultValue.indexOf(this.prefix) > -1) delete clonedOptions.defaultValue;
+      if (clonedOptions.defaultValue && clonedOptions.defaultValue.includes(this.prefix)) delete clonedOptions.defaultValue;
       return key;
     };
     while (match = this.nestingRegexp.exec(str)) {
@@ -2466,13 +2519,13 @@ class Interpolator {
 const parseFormatStr = formatStr => {
   let formatName = formatStr.toLowerCase().trim();
   const formatOptions = {};
-  if (formatStr.indexOf('(') > -1) {
+  if (formatStr.includes('(')) {
     const p = formatStr.split('(');
     formatName = p[0].toLowerCase().trim();
-    const optStr = p[1].substring(0, p[1].length - 1);
-    if (formatName === 'currency' && optStr.indexOf(':') < 0) {
+    const optStr = p[1].slice(0, -1);
+    if (formatName === 'currency' && !optStr.includes(':')) {
       if (!formatOptions.currency) formatOptions.currency = optStr.trim();
-    } else if (formatName === 'relativetime' && optStr.indexOf(':') < 0) {
+    } else if (formatName === 'relativetime' && !optStr.includes(':')) {
       if (!formatOptions.range) formatOptions.range = optStr.trim();
     } else {
       const opts = optStr.split(';');
@@ -2566,9 +2619,11 @@ class Formatter {
     this.formats[name.toLowerCase().trim()] = createCachedFormatter(fc);
   }
   format(value, format, lng, options = {}) {
+    if (!format) return value;
+    if (value == null) return value;
     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);
+    if (formats.length > 1 && formats[0].indexOf('(') > 1 && !formats[0].includes(')') && formats.find(f => f.includes(')'))) {
+      const lastIndex = formats.findIndex(f => f.includes(')'));
       formats[0] = [formats[0], ...formats.splice(1, lastIndex)].join(this.formatSeparator);
     }
     const result = formats.reduce((mem, f) => {
@@ -2722,7 +2777,7 @@ class Connector extends EventEmitter {
       }
       if (err && data && tried < this.maxRetries) {
         setTimeout(() => {
-          this.read.call(this, lng, ns, fcName, tried + 1, wait * 2, callback);
+          this.read(lng, ns, fcName, tried + 1, wait * 2, callback);
         }, wait);
         return;
       }
@@ -2826,7 +2881,6 @@ const get = () => ({
   nonExplicitSupportedLngs: false,
   load: 'all',
   preload: false,
-  simplifyPluralSuffix: true,
   keySeparator: '.',
   nsSeparator: ':',
   pluralSeparator: '_',
@@ -2863,7 +2917,6 @@ const get = () => ({
   },
   interpolation: {
     escapeValue: true,
-    format: value => value,
     prefix: '{{',
     suffix: '}}',
     formatSeparator: ',',
@@ -2880,10 +2933,9 @@ 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.includes('cimode')) {
     options.supportedLngs = options.supportedLngs.concat(['cimode']);
   }
-  if (typeof options.initImmediate === 'boolean') options.initAsync = options.initImmediate;
   return options;
 };
 
@@ -2925,7 +2977,7 @@ class I18n extends EventEmitter {
     if (options.defaultNS == null && options.ns) {
       if (isString(options.ns)) {
         options.defaultNS = options.ns;
-      } else if (options.ns.indexOf('translation') < 0) {
+      } else if (!options.ns.includes('translation')) {
         options.defaultNS = options.ns[0];
       }
     }
@@ -2945,6 +2997,9 @@ class I18n extends EventEmitter {
     if (options.nsSeparator !== undefined) {
       this.options.userDefinedNsSeparator = options.nsSeparator;
     }
+    if (typeof this.options.overloadTranslationOptionHandler !== 'function') {
+      this.options.overloadTranslationOptionHandler = defOpts.overloadTranslationOptionHandler;
+    }
     const createClassOnDemand = ClassOrObject => {
       if (!ClassOrObject) return null;
       if (typeof ClassOrObject === 'function') return new ClassOrObject();
@@ -2969,14 +3024,9 @@ class I18n extends EventEmitter {
       s.resourceStore = this.store;
       s.languageUtils = lu;
       s.pluralResolver = new PluralResolver(lu, {
-        prepend: this.options.pluralSeparator,
-        simplifyPluralSuffix: this.options.simplifyPluralSuffix
+        prepend: this.options.pluralSeparator
       });
-      const usingLegacyFormatFunction = this.options.interpolation.format && this.options.interpolation.format !== defOpts.interpolation.format;
-      if (usingLegacyFormatFunction) {
-        this.logger.warn(`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)) {
+      if (formatter) {
         s.formatter = createClassOnDemand(formatter);
         if (s.formatter.init) s.formatter.init(s, this.options);
         this.options.interpolation.format = s.formatter.format.bind(s.formatter);
@@ -3059,7 +3109,7 @@ class I18n extends EventEmitter {
         const lngs = this.services.languageUtils.toResolveHierarchy(lng);
         lngs.forEach(l => {
           if (l === 'cimode') return;
-          if (toLoad.indexOf(l) < 0) toLoad.push(l);
+          if (!toLoad.includes(l)) toLoad.push(l);
         });
       };
       if (!usedLng) {
@@ -3124,16 +3174,16 @@ class I18n extends EventEmitter {
   }
   setResolvedLanguage(l) {
     if (!l || !this.languages) return;
-    if (['cimode', 'dev'].indexOf(l) > -1) return;
+    if (['cimode', 'dev'].includes(l)) return;
     for (let li = 0; li < this.languages.length; li++) {
       const lngInLngs = this.languages[li];
-      if (['cimode', 'dev'].indexOf(lngInLngs) > -1) continue;
+      if (['cimode', 'dev'].includes(lngInLngs)) continue;
       if (this.store.hasLanguageSomeTranslations(lngInLngs)) {
         this.resolvedLanguage = lngInLngs;
         break;
       }
     }
-    if (!this.resolvedLanguage && this.languages.indexOf(l) < 0 && this.store.hasLanguageSomeTranslations(l)) {
+    if (!this.resolvedLanguage && !this.languages.includes(l) && this.store.hasLanguageSomeTranslations(l)) {
       this.resolvedLanguage = l;
       this.languages.unshift(l);
     }
@@ -3205,11 +3255,20 @@ class I18n extends EventEmitter {
       o.lngs = o.lngs || fixedT.lngs;
       o.ns = o.ns || fixedT.ns;
       if (o.keyPrefix !== '') o.keyPrefix = o.keyPrefix || keyPrefix || fixedT.keyPrefix;
+      const selectorOpts = {
+        ...this.options,
+        ...o
+      };
+      if (typeof o.keyPrefix === 'function') o.keyPrefix = keysFromSelector(o.keyPrefix, selectorOpts);
       const keySeparator = this.options.keySeparator || '.';
       let resultKey;
       if (o.keyPrefix && Array.isArray(key)) {
-        resultKey = key.map(k => `${o.keyPrefix}${keySeparator}${k}`);
+        resultKey = key.map(k => {
+          if (typeof k === 'function') k = keysFromSelector(k, selectorOpts);
+          return `${o.keyPrefix}${keySeparator}${k}`;
+        });
       } else {
+        if (typeof key === 'function') key = keysFromSelector(key, selectorOpts);
         resultKey = o.keyPrefix ? `${o.keyPrefix}${keySeparator}${key}` : key;
       }
       return this.t(resultKey, o);
@@ -3266,7 +3325,7 @@ class I18n extends EventEmitter {
     }
     if (isString(ns)) ns = [ns];
     ns.forEach(n => {
-      if (this.options.ns.indexOf(n) < 0) this.options.ns.push(n);
+      if (!this.options.ns.includes(n)) this.options.ns.push(n);
     });
     this.loadResources(err => {
       deferred.resolve();
@@ -3278,7 +3337,7 @@ class I18n extends EventEmitter {
     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));
+    const newLngs = lngs.filter(lng => !preloaded.includes(lng) && this.services.languageUtils.isSupportedCode(lng));
     if (!newLngs.length) {
       if (callback) callback();
       return Promise.resolve();
@@ -3293,20 +3352,22 @@ class I18n extends EventEmitter {
   dir(lng) {
     if (!lng) lng = this.resolvedLanguage || (this.languages?.length > 0 ? this.languages[0] : this.language);
     if (!lng) return 'rtl';
-    if (Intl.Locale) {
+    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';
+    return rtlLngs.includes(languageUtils.getLanguagePartFromCode(lng)) || lng.toLowerCase().indexOf('-arab') > 1 ? 'rtl' : 'ltr';
   }
   static createInstance(options = {}, callback) {
-    return new I18n(options, callback);
+    const instance = new I18n(options, callback);
+    instance.createInstance = I18n.createInstance;
+    return instance;
   }
   cloneInstance(options = {}, callback = noop) {
     const forkResourceStore = options.forkResourceStore;
@@ -3348,6 +3409,19 @@ class I18n extends EventEmitter {
       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);
+    }
     clone.translator = new Translator(clone.services, mergedOptions);
     clone.translator.on('*', (event, ...args) => {
       clone.emit(event, ...args);
@@ -3370,7 +3444,6 @@ class I18n extends EventEmitter {
   }
 }
 const instance = I18n.createInstance();
-instance.createInstance = I18n.createInstance;
 
 instance.createInstance;
 instance.dir;
@@ -9252,7 +9325,7 @@ function EmptyContent(_a) {
             button && button));
 }
 
-var css_248z$c = ".fileUpload-component-v2 {\n  position: relative;\n  width: 100%;\n}\n.fileUpload-component-v2 > .fileUploadContainer {\n  box-sizing: border-box;\n  text-align: center;\n  cursor: pointer;\n  width: 100%;\n  padding: 3rem 2rem;\n  display: flex;\n  position: relative;\n}\n.fileUpload-component-v2 > .fileUploadContainer fieldset {\n  position: absolute;\n  margin: 0;\n  padding: 0 0 0 1rem !important;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  border: 1px dashed var(--pebble, #EAEAEA);\n  text-align: left;\n  position: absolute;\n  padding-inline: 0.75em;\n  margin-inline: unset;\n}\n.fileUpload-component-v2 > .fileUploadContainer img {\n  max-width: 100%;\n}\n.fileUpload-component-v2 > .fileUploadContainer.hasDropdown fieldset {\n  border-bottom-right-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n.fileUpload-component-v2 .dropdown-component-v2 {\n  flex: 1;\n  margin-top: 0;\n  position: relative;\n  left: 1px;\n  width: calc(100% - 2px);\n}\n.fileUpload-component-v2 .dropdown-component-v2 > .MuiInputBase-root {\n  max-width: unset;\n  border-top-right-radius: 0 !important;\n  border-top-left-radius: 0 !important;\n}\n.fileUpload-component-v2 .dropdown-component-v2 > .MuiInputBase-root:not(:focus):not(:hover):not(:active) {\n  outline-color: var(--secondary-brand-color, var(--teal, #0ABDAE));\n}";
+var css_248z$c = ".fileUpload-component-v2 {\n  position: relative;\n  width: 100%;\n}\n.fileUpload-component-v2 > .fileUploadContainer {\n  box-sizing: border-box;\n  text-align: center;\n  cursor: pointer;\n  width: 100%;\n  padding: 3rem 2rem;\n  display: flex;\n  position: relative;\n}\n.fileUpload-component-v2 > .fileUploadContainer fieldset {\n  position: absolute;\n  margin: 0;\n  padding: 0 0 0 1rem !important;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  border: 1px dashed var(--pebble, #EAEAEA);\n  text-align: left;\n  position: absolute;\n  padding-inline: 0.75em;\n  margin-inline: unset;\n}\n.fileUpload-component-v2 > .fileUploadContainer img {\n  max-width: 100%;\n}\n.fileUpload-component-v2 > .fileUploadContainer.hasDropdown fieldset {\n  border-bottom-right-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n.fileUpload-component-v2 .dropdown-component-v2 {\n  flex: 1;\n  margin-top: 0;\n  position: relative;\n  left: 1px;\n  width: calc(100% - 2px);\n}\n.fileUpload-component-v2 .dropdown-component-v2 > .MuiInputBase-root:not(:focus):not(:hover):not(:active) {\n  outline-color: var(--secondary-brand-color, var(--teal, #0ABDAE));\n}\n.fileUpload-component-v2 .dropdown-component-v2 > .MuiInputBase-root {\n  max-width: unset;\n  border-top-right-radius: 0 !important;\n  border-top-left-radius: 0 !important;\n}";
 styleInject(css_248z$c);
 
 function FileUpload(_a) {
@@ -12430,6 +12503,7 @@ var ListPageModel = /** @class */ (function () {
             return __generator(this, function (_a) {
                 dataToUpdate = page || this.toJson();
                 return [2 /*return*/, updatePage({ id: this.id, page: dataToUpdate }).then(function (data) {
+                        debugger;
                         trackEvent(EEvents.PAGE_UPDATED, {
                             id: _this.id,
                             name: dataToUpdate === null || dataToUpdate === void 0 ? void 0 : dataToUpdate.name,
@@ -15972,7 +16046,7 @@ var propTypesExports = propTypes.exports;
 var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
 
 /**
- * @mui/styled-engine v7.2.0
+ * @mui/styled-engine v7.3.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -16034,8 +16108,8 @@ function requireReactIs_production () {
 	  REACT_PORTAL_TYPE = Symbol.for("react.portal"),
 	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
 	  REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	  REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-	var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	  REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	  REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
 	  REACT_CONTEXT_TYPE = Symbol.for("react.context"),
 	  REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
 	  REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
@@ -16205,8 +16279,8 @@ function requireReactIs_development () {
 	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
 	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
 	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	      REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-	    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	      REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	      REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
 	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
 	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
 	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
@@ -16447,7 +16521,7 @@ function createBreakpoints(breakpoints) {
  * For using in `sx` prop to sort the breakpoint from low to high.
  * Note: this function does not work and will not support multiple units.
  *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
- *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
+ *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 even though 40rem > 300px
  */
 function sortContainerQueries(theme, css) {
   if (!theme.containerQueries) {
@@ -16476,7 +16550,7 @@ function getContainerQuery(theme, shorthand) {
   const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     if (process.env.NODE_ENV !== 'production') {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.' : formatMuiErrorMessage(18, `(${shorthand})`));
+      throw /* minify-error */new Error(`MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.');
     }
     return null;
   }