gbc-kyc-kit 3.0.4 → 3.0.6

package/dist/gbc-kyc-kit.es.js

@@ -11415,10 +11415,10 @@ var bind$2 = function bind(fn2, thisArg) {
 };
 var bind$1 = bind$2;
 var toString$9 = Object.prototype.toString;
-var kindOf = function(cache2) {
+var kindOf = function(cache) {
   return function(thing) {
     var str = toString$9.call(thing);
-    return cache2[str] || (cache2[str] = str.slice(8, -1).toLowerCase());
+    return cache[str] || (cache[str] = str.slice(8, -1).toLowerCase());
   };
 }(/* @__PURE__ */ Object.create(null));
 function kindOfTest(type) {
@@ -12739,8 +12739,6 @@ function cloneObject(data2) {
   const isFileListInstance = typeof FileList !== "undefined" ? data2 instanceof FileList : false;
   if (data2 instanceof Date) {
     copy2 = new Date(data2);
-  } else if (data2 instanceof Set) {
-    copy2 = new Set(data2);
   } else if (!(isWeb && (data2 instanceof Blob || isFileListInstance)) && (isArray2 || isObject$6(data2))) {
     copy2 = isArray2 ? [] : {};
     if (!isArray2 && !isPlainObject$1(data2)) {
@@ -12757,18 +12755,18 @@ function cloneObject(data2) {
   }
   return copy2;
 }
-var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+var isKey$4 = (value) => /^\w*$/.test(value);
 var isUndefined = (val) => val === void 0;
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+var stringToPath$2 = (input) => compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
 var get$2 = (object2, path, defaultValue) => {
   if (!path || !isObject$6(object2)) {
     return defaultValue;
   }
-  const result = compact(path.split(/[,[\].]+?/)).reduce((result2, key) => isNullOrUndefined(result2) ? result2 : result2[key], object2);
+  const result = (isKey$4(path) ? [path] : stringToPath$2(path)).reduce((result2, key) => isNullOrUndefined(result2) ? result2 : result2[key], object2);
   return isUndefined(result) || result === object2 ? isUndefined(object2[path]) ? defaultValue : object2[path] : result;
 };
 var isBoolean = (value) => typeof value === "boolean";
-var isKey$4 = (value) => /^\w*$/.test(value);
-var stringToPath$2 = (input) => compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
 var set$1 = (object2, path, value) => {
   let index = -1;
   const tempPath = isKey$4(path) ? [path] : stringToPath$2(path);
@@ -12810,6 +12808,7 @@ const INPUT_VALIDATION_RULES = {
   validate: "validate"
 };
 const HookFormContext = React__default$1.createContext(null);
+HookFormContext.displayName = "HookFormContext";
 const useFormContext = () => React__default$1.useContext(HookFormContext);
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
   const result = {
@@ -12829,6 +12828,7 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
   }
   return result;
 };
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__default$1.useLayoutEffect : React__default$1.useEffect;
 function useFormState(props) {
   const methods = useFormContext();
   const { control = methods.control, disabled, name, exact } = props || {};
@@ -12843,10 +12843,8 @@ function useFormState(props) {
     isValid: false,
     errors: false
   });
-  const _name = React__default$1.useRef(name);
-  _name.current = name;
-  React__default$1.useEffect(() => control._subscribe({
-    name: _name.current,
+  useIsomorphicLayoutEffect(() => control._subscribe({
+    name,
     formState: _localProxyFormState.current,
     exact,
     callback: (formState2) => {
@@ -12855,7 +12853,7 @@ function useFormState(props) {
         ...formState2
       });
     }
-  }), [control, disabled, exact]);
+  }), [name, disabled, exact]);
   React__default$1.useEffect(() => {
     _localProxyFormState.current.isValid && control._setValid(true);
   }, [control]);
@@ -12873,32 +12871,80 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
   isGlobal && (_names.watchAll = true);
   return formValues;
 };
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new WeakSet()) {
+  if (isPrimitive(object1) || isPrimitive(object2)) {
+    return object1 === object2;
+  }
+  if (isDateObject(object1) && isDateObject(object2)) {
+    return object1.getTime() === object2.getTime();
+  }
+  const keys1 = Object.keys(object1);
+  const keys2 = Object.keys(object2);
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
+    return true;
+  }
+  _internal_visited.add(object1);
+  _internal_visited.add(object2);
+  for (const key of keys1) {
+    const val1 = object1[key];
+    if (!keys2.includes(key)) {
+      return false;
+    }
+    if (key !== "ref") {
+      const val2 = object2[key];
+      if (isDateObject(val1) && isDateObject(val2) || isObject$6(val1) && isObject$6(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : val1 !== val2) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
 function useWatch(props) {
   const methods = useFormContext();
-  const { control = methods.control, name, defaultValue, disabled, exact } = props || {};
-  const _name = React__default$1.useRef(name);
+  const { control = methods.control, name, defaultValue, disabled, exact, compute } = props || {};
   const _defaultValue = React__default$1.useRef(defaultValue);
-  _name.current = name;
-  React__default$1.useEffect(() => control._subscribe({
-    name: _name.current,
+  const _compute = React__default$1.useRef(compute);
+  const _computeFormValues = React__default$1.useRef(void 0);
+  _compute.current = compute;
+  const defaultValueMemo = React__default$1.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
+  const [value, updateValue] = React__default$1.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
+  useIsomorphicLayoutEffect(() => control._subscribe({
+    name,
     formState: {
       values: true
     },
     exact,
-    callback: (formState) => !disabled && updateValue(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, _defaultValue.current))
-  }), [control, disabled, exact]);
-  const [value, updateValue] = React__default$1.useState(control._getWatch(name, defaultValue));
+    callback: (formState) => {
+      if (!disabled) {
+        const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current);
+        if (_compute.current) {
+          const computedFormValues = _compute.current(formValues);
+          if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+            updateValue(computedFormValues);
+            _computeFormValues.current = computedFormValues;
+          }
+        } else {
+          updateValue(formValues);
+        }
+      }
+    }
+  }), [control, disabled, name, exact]);
   React__default$1.useEffect(() => control._removeUnmounted());
   return value;
 }
 function useController(props) {
   const methods = useFormContext();
-  const { name, disabled, control = methods.control, shouldUnregister } = props;
+  const { name, disabled, control = methods.control, shouldUnregister, defaultValue } = props;
   const isArrayField = isNameInFieldArray(control._names.array, name);
+  const defaultValueMemo = React__default$1.useMemo(() => get$2(control._formValues, name, get$2(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
   const value = useWatch({
     control,
     name,
-    defaultValue: get$2(control._formValues, name, get$2(control._defaultValues, name, props.defaultValue)),
+    defaultValue: defaultValueMemo,
     exact: true
   });
   const formState = useFormState({
@@ -12912,6 +12958,7 @@ function useController(props) {
     value,
     ...isBoolean(props.disabled) ? { disabled: props.disabled } : {}
   }));
+  _props.current = props;
   const fieldState = React__default$1.useMemo(() => Object.defineProperties({}, {
     invalid: {
       enumerable: true,
@@ -12952,8 +12999,8 @@ function useController(props) {
     const field2 = get$2(control._fields, name);
     if (field2 && elm) {
       field2._f.ref = {
-        focus: () => elm.focus(),
-        select: () => elm.select(),
+        focus: () => elm.focus && elm.focus(),
+        select: () => elm.select && elm.select(),
         setCustomValidity: (message) => elm.setCustomValidity(message),
         reportValidity: () => elm.reportValidity()
       };
@@ -13040,33 +13087,6 @@ var createSubject = () => {
     unsubscribe: unsubscribe2
   };
 };
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-function deepEqual(object1, object2) {
-  if (isPrimitive(object1) || isPrimitive(object2)) {
-    return object1 === object2;
-  }
-  if (isDateObject(object1) && isDateObject(object2)) {
-    return object1.getTime() === object2.getTime();
-  }
-  const keys1 = Object.keys(object1);
-  const keys2 = Object.keys(object2);
-  if (keys1.length !== keys2.length) {
-    return false;
-  }
-  for (const key of keys1) {
-    const val1 = object1[key];
-    if (!keys2.includes(key)) {
-      return false;
-    }
-    if (key !== "ref") {
-      const val2 = object2[key];
-      if (isDateObject(val1) && isDateObject(val2) || isObject$6(val1) && isObject$6(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2) : val1 !== val2) {
-        return false;
-      }
-    }
-  }
-  return true;
-}
 var isEmptyObject = (value) => isObject$6(value) && !Object.keys(value).length;
 var isFileInput = (element) => element.type === "file";
 var isFunction$4 = (value) => typeof value === "function";
@@ -13262,6 +13282,12 @@ function schemaErrorLookup(errors, _fields, name) {
         error: foundError
       };
     }
+    if (foundError && foundError.root && foundError.root.type) {
+      return {
+        name: `${fieldName}.root`,
+        error: foundError.root
+      };
+    }
     names.pop();
   }
   return {
@@ -13470,6 +13496,7 @@ function createFormControl(props = {}) {
   let _formState = {
     submitCount: 0,
     isDirty: false,
+    isReady: false,
     isLoading: isFunction$4(_options.defaultValues),
     isValidating: false,
     isSubmitted: false,
@@ -13482,8 +13509,8 @@ function createFormControl(props = {}) {
     errors: _options.errors || {},
     disabled: _options.disabled || false
   };
-  const _fields = {};
-  let _defaultValues = isObject$6(_options.defaultValues) || isObject$6(_options.values) ? cloneObject(_options.values || _options.defaultValues) || {} : {};
+  let _fields = {};
+  let _defaultValues = isObject$6(_options.defaultValues) || isObject$6(_options.values) ? cloneObject(_options.defaultValues || _options.values) || {} : {};
   let _formValues = _options.shouldUnregister ? {} : cloneObject(_defaultValues);
   let _state = {
     action: false,
@@ -13515,8 +13542,6 @@ function createFormControl(props = {}) {
     array: createSubject(),
     state: createSubject()
   };
-  const validationModeBeforeSubmit = getValidationModes(_options.mode);
-  const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
   const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
   const debounce2 = (callback) => (wait) => {
     clearTimeout(timer);
@@ -13724,7 +13749,15 @@ function createFormControl(props = {}) {
           [...fieldReference.ref.options].forEach((optionRef) => optionRef.selected = fieldValue.includes(optionRef.value));
         } else if (fieldReference.refs) {
           if (isCheckBoxInput(fieldReference.ref)) {
-            fieldReference.refs.length > 1 ? fieldReference.refs.forEach((checkboxRef) => (!checkboxRef.defaultChecked || !checkboxRef.disabled) && (checkboxRef.checked = Array.isArray(fieldValue) ? !!fieldValue.find((data2) => data2 === checkboxRef.value) : fieldValue === checkboxRef.value)) : fieldReference.refs[0] && (fieldReference.refs[0].checked = !!fieldValue);
+            fieldReference.refs.forEach((checkboxRef) => {
+              if (!checkboxRef.defaultChecked || !checkboxRef.disabled) {
+                if (Array.isArray(fieldValue)) {
+                  checkboxRef.checked = !!fieldValue.find((data2) => data2 === checkboxRef.value);
+                } else {
+                  checkboxRef.checked = fieldValue === checkboxRef.value || !!fieldValue;
+                }
+              }
+            });
           } else {
             fieldReference.refs.forEach((radioRef) => radioRef.checked = radioRef.value === fieldValue);
           }
@@ -13746,8 +13779,11 @@ function createFormControl(props = {}) {
   };
   const setValues = (name, value, options) => {
     for (const fieldKey in value) {
+      if (!value.hasOwnProperty(fieldKey)) {
+        return;
+      }
       const fieldValue = value[fieldKey];
-      const fieldName = `${name}.${fieldKey}`;
+      const fieldName = name + "." + fieldKey;
       const field = get$2(_fields, fieldName);
       (_names.array.has(name) || isObject$6(fieldValue) || field && !field._f) && !isDateObject(fieldValue) ? setValues(fieldName, fieldValue, options) : setFieldValue(fieldName, fieldValue, options);
     }
@@ -13772,7 +13808,7 @@ function createFormControl(props = {}) {
     } else {
       field && !field._f && !isNullOrUndefined(cloneValue) ? setValues(name, cloneValue, options) : setFieldValue(name, cloneValue, options);
     }
-    isWatched(name, _names) && _subjects.state.next({ ..._formState });
+    isWatched(name, _names) && _subjects.state.next({ ..._formState, name });
     _subjects.state.next({
       name: _state.mount ? name : void 0,
       values: cloneObject(_formValues)
@@ -13787,6 +13823,8 @@ function createFormControl(props = {}) {
     const _updateIsFieldValueUpdated = (fieldValue) => {
       isFieldValueUpdated = Number.isNaN(fieldValue) || isDateObject(fieldValue) && isNaN(fieldValue.getTime()) || deepEqual(fieldValue, get$2(_formValues, name, fieldValue));
     };
+    const validationModeBeforeSubmit = getValidationModes(_options.mode);
+    const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
     if (field) {
       let error;
       let isValid;
@@ -13918,7 +13956,7 @@ function createFormControl(props = {}) {
     options && options.shouldFocus && ref && ref.focus && ref.focus();
   };
   const watch = (name, defaultValue) => isFunction$4(name) ? _subjects.state.subscribe({
-    next: (payload) => name(_getWatch(void 0, defaultValue), payload)
+    next: (payload) => "values" in payload && name(_getWatch(void 0, defaultValue), payload)
   }) : _getWatch(name, defaultValue, true);
   const _subscribe = (props2) => _subjects.state.subscribe({
     next: (formState) => {
@@ -13926,7 +13964,8 @@ function createFormControl(props = {}) {
         props2.callback({
           values: { ..._formValues },
           ..._formState,
-          ...formState
+          ...formState,
+          defaultValues: _defaultValues
         });
       }
     }
@@ -14068,13 +14107,13 @@ function createFormControl(props = {}) {
     if (_options.resolver) {
       const { errors, values: values2 } = await _runSchema();
       _formState.errors = errors;
-      fieldValues = values2;
+      fieldValues = cloneObject(values2);
     } else {
       await executeBuiltInValidation(_fields);
     }
     if (_names.disabled.size) {
       for (const name of _names.disabled) {
-        set$1(fieldValues, name, void 0);
+        unset(fieldValues, name);
       }
     }
     unset(_formState.errors, "root");
@@ -14160,11 +14199,15 @@ function createFormControl(props = {}) {
             }
           }
         }
-        for (const fieldName of _names.mount) {
-          setValue(fieldName, get$2(values2, fieldName));
+        if (keepStateOptions.keepFieldsRef) {
+          for (const fieldName of _names.mount) {
+            setValue(fieldName, get$2(values2, fieldName));
+          }
+        } else {
+          _fields = {};
         }
       }
-      _formValues = cloneObject(values2);
+      _formValues = _options.shouldUnregister ? keepStateOptions.keepDefaultValues ? cloneObject(_defaultValues) : {} : cloneObject(values2);
       _subjects.array.next({
         values: { ...values2 }
       });
@@ -14227,6 +14270,7 @@ function createFormControl(props = {}) {
       setError,
       _subscribe,
       _runSchema,
+      _focusError,
       _getWatch,
       _getDirty,
       _setValid,
@@ -14311,25 +14355,61 @@ function useForm(props = {}) {
     validatingFields: {},
     errors: props.errors || {},
     disabled: props.disabled || false,
+    isReady: false,
     defaultValues: isFunction$4(props.defaultValues) ? void 0 : props.defaultValues
   });
   if (!_formControl.current) {
-    _formControl.current = {
-      ...props.formControl ? props.formControl : createFormControl(props),
-      formState
-    };
-    if (props.formControl && props.defaultValues && !isFunction$4(props.defaultValues)) {
-      props.formControl.reset(props.defaultValues, props.resetOptions);
+    if (props.formControl) {
+      _formControl.current = {
+        ...props.formControl,
+        formState
+      };
+      if (props.defaultValues && !isFunction$4(props.defaultValues)) {
+        props.formControl.reset(props.defaultValues, props.resetOptions);
+      }
+    } else {
+      const { formControl, ...rest } = createFormControl(props);
+      _formControl.current = {
+        ...rest,
+        formState
+      };
     }
   }
   const control = _formControl.current.control;
   control._options = props;
-  React__default$1.useLayoutEffect(() => control._subscribe({
-    formState: control._proxyFormState,
-    callback: () => updateFormState({ ...control._formState }),
-    reRenderRoot: true
-  }), [control]);
+  useIsomorphicLayoutEffect(() => {
+    const sub = control._subscribe({
+      formState: control._proxyFormState,
+      callback: () => updateFormState({ ...control._formState }),
+      reRenderRoot: true
+    });
+    updateFormState((data2) => ({
+      ...data2,
+      isReady: true
+    }));
+    control._formState.isReady = true;
+    return sub;
+  }, [control]);
   React__default$1.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+  React__default$1.useEffect(() => {
+    if (props.mode) {
+      control._options.mode = props.mode;
+    }
+    if (props.reValidateMode) {
+      control._options.reValidateMode = props.reValidateMode;
+    }
+  }, [control, props.mode, props.reValidateMode]);
+  React__default$1.useEffect(() => {
+    if (props.errors) {
+      control._setErrors(props.errors);
+      control._focusError();
+    }
+  }, [control, props.errors]);
+  React__default$1.useEffect(() => {
+    props.shouldUnregister && control._subjects.state.next({
+      values: control._getWatch()
+    });
+  }, [control, props.shouldUnregister]);
   React__default$1.useEffect(() => {
     if (control._proxyFormState.isDirty) {
       const isDirty = control._getDirty();
@@ -14342,18 +14422,16 @@ function useForm(props = {}) {
   }, [control, formState.isDirty]);
   React__default$1.useEffect(() => {
     if (props.values && !deepEqual(props.values, _values.current)) {
-      control._reset(props.values, control._options.resetOptions);
+      control._reset(props.values, {
+        keepFieldsRef: true,
+        ...control._options.resetOptions
+      });
       _values.current = props.values;
       updateFormState((state) => ({ ...state }));
     } else {
       control._resetDefaultValues();
     }
-  }, [props.values, control]);
-  React__default$1.useEffect(() => {
-    if (props.errors && !isEmptyObject(props.errors)) {
-      control._setErrors(props.errors);
-    }
-  }, [props.errors, control]);
+  }, [control, props.values]);
   React__default$1.useEffect(() => {
     if (!control._state.mount) {
       control._setValid();
@@ -14365,11 +14443,6 @@ function useForm(props = {}) {
     }
     control._removeUnmounted();
   });
-  React__default$1.useEffect(() => {
-    props.shouldUnregister && control._subjects.state.next({
-      values: control._getWatch()
-    });
-  }, [props.shouldUnregister, control]);
   _formControl.current.formState = getProxyFormState(formState, control);
   return _formControl.current;
 }
@@ -14887,12 +14960,12 @@ function memoize$3(func, resolver) {
     throw new TypeError(FUNC_ERROR_TEXT);
   }
   var memoized = function() {
-    var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache2 = memoized.cache;
-    if (cache2.has(key)) {
-      return cache2.get(key);
+    var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache = memoized.cache;
+    if (cache.has(key)) {
+      return cache.get(key);
     }
     var result = func.apply(this, args);
-    memoized.cache = cache2.set(key, result) || cache2;
+    memoized.cache = cache.set(key, result) || cache;
     return result;
   };
   memoized.cache = new (memoize$3.Cache || MapCache$2)();
@@ -14904,12 +14977,12 @@ var memoize$2 = memoize_1;
 var MAX_MEMOIZE_SIZE = 500;
 function memoizeCapped$1(func) {
   var result = memoize$2(func, function(key) {
-    if (cache2.size === MAX_MEMOIZE_SIZE) {
-      cache2.clear();
+    if (cache.size === MAX_MEMOIZE_SIZE) {
+      cache.clear();
     }
     return key;
   });
-  var cache2 = result.cache;
+  var cache = result.cache;
   return result;
 }
 var _memoizeCapped = memoizeCapped$1;
@@ -15425,8 +15498,8 @@ function arraySome$1(array2, predicate) {
   return false;
 }
 var _arraySome = arraySome$1;
-function cacheHas$1(cache2, key) {
-  return cache2.has(key);
+function cacheHas$1(cache, key) {
+  return cache.has(key);
 }
 var _cacheHas = cacheHas$1;
 var SetCache = _SetCache, arraySome = _arraySome, cacheHas = _cacheHas;
@@ -15897,7 +15970,7 @@ Cache.prototype.set = function(key, value) {
   return this._values[key] = value;
 };
 var SPLIT_REGEX = /[^.^\]^[]+|(?=\[\]|\.\.)/g, DIGIT_REGEX = /^\d+$/, LEAD_DIGIT_REGEX = /^\d/, SPEC_CHAR_REGEX = /[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g, CLEAN_QUOTES_REGEX = /^\s*(['"]?)(.*?)(\1)\s*$/, MAX_CACHE_SIZE = 512;
-var pathCache = new Cache(MAX_CACHE_SIZE), setCache = new Cache(MAX_CACHE_SIZE), getCache = new Cache(MAX_CACHE_SIZE);
+var pathCache = new Cache(MAX_CACHE_SIZE), setCache = new Cache(MAX_CACHE_SIZE), getCache$1 = new Cache(MAX_CACHE_SIZE);
 var propertyExpr = {
   Cache,
   split,
@@ -15920,7 +15993,7 @@ var propertyExpr = {
   },
   getter: function(path, safe) {
     var parts = normalizePath(path);
-    return getCache.get(path) || getCache.set(path, function getter(data2) {
+    return getCache$1.get(path) || getCache$1.set(path, function getter(data2) {
       var index = 0, len = parts.length;
       while (index < len) {
         if (data2 != null || !safe)
@@ -18188,7 +18261,6 @@ const BlackListController = (clientId, authorize, inProduction, source2, eventId
   const [csvFile, setCsvFile] = useState(null);
   const fileInputRef = useRef(null);
   const [batchData, setBatchData] = useState({});
-  console.log(inProduction);
   useEffect(() => {
     var _a;
     if (countryCodeAllowed && (geolocation == null ? void 0 : geolocation.data_connection.isocode)) {
@@ -18241,7 +18313,6 @@ const BlackListController = (clientId, authorize, inProduction, source2, eventId
       birth_date: ""
     }
   });
-  console.log(errorsDoc);
   const onSendSubmitDocument = async (data2) => {
     var _a, _b;
     const {
@@ -20258,11 +20329,11 @@ function rulesheet(callback) {
   };
 }
 function memoize$1(fn2) {
-  var cache2 = /* @__PURE__ */ Object.create(null);
+  var cache = /* @__PURE__ */ Object.create(null);
   return function(arg) {
-    if (cache2[arg] === void 0)
-      cache2[arg] = fn2(arg);
-    return cache2[arg];
+    if (cache[arg] === void 0)
+      cache[arg] = fn2(arg);
+    return cache[arg];
   };
 }
 var identifierWithPointTracking = function identifierWithPointTracking2(begin, points, index) {
@@ -20542,11 +20613,11 @@ var createCache = function createCache2(options) {
       currentSheet = sheet;
       stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
       if (shouldCache) {
-        cache2.inserted[serialized.name] = true;
+        cache.inserted[serialized.name] = true;
       }
     };
   }
-  var cache2 = {
+  var cache = {
     key,
     sheet: new StyleSheet({
       key,
@@ -20561,8 +20632,8 @@ var createCache = function createCache2(options) {
     registered: {},
     insert: _insert
   };
-  cache2.sheet.hydrate(nodesToHydrate);
-  return cache2;
+  cache.sheet.hydrate(nodesToHydrate);
+  return cache;
 };
 var reactIs$2 = { exports: {} };
 var reactIs_production_min = {};
@@ -20696,19 +20767,19 @@ function getRegisteredStyles(registered, registeredStyles, classNames) {
   });
   return rawClassName;
 }
-var registerStyles = function registerStyles2(cache2, serialized, isStringTag2) {
-  var className = cache2.key + "-" + serialized.name;
-  if ((isStringTag2 === false || isBrowser$1 === false) && cache2.registered[className] === void 0) {
-    cache2.registered[className] = serialized.styles;
+var registerStyles = function registerStyles2(cache, serialized, isStringTag2) {
+  var className = cache.key + "-" + serialized.name;
+  if ((isStringTag2 === false || isBrowser$1 === false) && cache.registered[className] === void 0) {
+    cache.registered[className] = serialized.styles;
   }
 };
-var insertStyles = function insertStyles2(cache2, serialized, isStringTag2) {
-  registerStyles(cache2, serialized, isStringTag2);
-  var className = cache2.key + "-" + serialized.name;
-  if (cache2.inserted[serialized.name] === void 0) {
+var insertStyles = function insertStyles2(cache, serialized, isStringTag2) {
+  registerStyles(cache, serialized, isStringTag2);
+  var className = cache.key + "-" + serialized.name;
+  if (cache.inserted[serialized.name] === void 0) {
     var current = serialized;
     do {
-      cache2.insert(serialized === current ? "." + className : "", current, cache2.sheet, true);
+      cache.insert(serialized === current ? "." + className : "", current, cache.sheet, true);
       current = current.next;
     } while (current !== void 0);
   }
@@ -20971,8 +21042,8 @@ var EmotionCacheContext = /* @__PURE__ */ React$2.createContext(
 var CacheProvider = EmotionCacheContext.Provider;
 var withEmotionCache = function withEmotionCache2(func) {
   return /* @__PURE__ */ forwardRef(function(props, ref) {
-    var cache2 = useContext(EmotionCacheContext);
-    return func(props, cache2, ref);
+    var cache = useContext(EmotionCacheContext);
+    return func(props, cache, ref);
   });
 };
 var ThemeContext = /* @__PURE__ */ React$2.createContext({});
@@ -20989,28 +21060,28 @@ var createEmotionProps = function createEmotionProps2(type, props) {
   return newProps;
 };
 var Insertion$1 = function Insertion(_ref) {
-  var cache2 = _ref.cache, serialized = _ref.serialized, isStringTag2 = _ref.isStringTag;
-  registerStyles(cache2, serialized, isStringTag2);
+  var cache = _ref.cache, serialized = _ref.serialized, isStringTag2 = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag2);
   useInsertionEffectAlwaysWithSyncFallback(function() {
-    return insertStyles(cache2, serialized, isStringTag2);
+    return insertStyles(cache, serialized, isStringTag2);
   });
   return null;
 };
-var Emotion = /* @__PURE__ */ withEmotionCache(function(props, cache2, ref) {
+var Emotion = /* @__PURE__ */ withEmotionCache(function(props, cache, ref) {
   var cssProp = props.css;
-  if (typeof cssProp === "string" && cache2.registered[cssProp] !== void 0) {
-    cssProp = cache2.registered[cssProp];
+  if (typeof cssProp === "string" && cache.registered[cssProp] !== void 0) {
+    cssProp = cache.registered[cssProp];
   }
   var WrappedComponent = props[typePropName];
   var registeredStyles = [cssProp];
   var className = "";
   if (typeof props.className === "string") {
-    className = getRegisteredStyles(cache2.registered, registeredStyles, props.className);
+    className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
   } else if (props.className != null) {
     className = props.className + " ";
   }
   var serialized = serializeStyles(registeredStyles, void 0, React$2.useContext(ThemeContext));
-  className += cache2.key + "-" + serialized.name;
+  className += cache.key + "-" + serialized.name;
   var newProps = {};
   for (var _key2 in props) {
     if (hasOwn.call(props, _key2) && _key2 !== "css" && _key2 !== typePropName && !isDevelopment$1) {
@@ -21022,7 +21093,7 @@ var Emotion = /* @__PURE__ */ withEmotionCache(function(props, cache2, ref) {
     newProps.ref = ref;
   }
   return /* @__PURE__ */ React$2.createElement(React$2.Fragment, null, /* @__PURE__ */ React$2.createElement(Insertion$1, {
-    cache: cache2,
+    cache,
     serialized,
     isStringTag: typeof WrappedComponent === "string"
   }), /* @__PURE__ */ React$2.createElement(WrappedComponent, newProps));
@@ -21061,22 +21132,22 @@ var jsx = function jsx2(type, props) {
   (function(_JSX) {
   })(JSX || (JSX = _jsx.JSX || (_jsx.JSX = {})));
 })(jsx || (jsx = {}));
-var Global = /* @__PURE__ */ withEmotionCache(function(props, cache2) {
+var Global = /* @__PURE__ */ withEmotionCache(function(props, cache) {
   var styles2 = props.styles;
   var serialized = serializeStyles([styles2], void 0, React$2.useContext(ThemeContext));
   var sheetRef = React$2.useRef();
   useInsertionEffectWithLayoutFallback(function() {
-    var key = cache2.key + "-global";
-    var sheet = new cache2.sheet.constructor({
+    var key = cache.key + "-global";
+    var sheet = new cache.sheet.constructor({
       key,
-      nonce: cache2.sheet.nonce,
-      container: cache2.sheet.container,
-      speedy: cache2.sheet.isSpeedy
+      nonce: cache.sheet.nonce,
+      container: cache.sheet.container,
+      speedy: cache.sheet.isSpeedy
     });
     var rehydrating = false;
     var node2 = document.querySelector('style[data-emotion="' + key + " " + serialized.name + '"]');
-    if (cache2.sheet.tags.length) {
-      sheet.before = cache2.sheet.tags[0];
+    if (cache.sheet.tags.length) {
+      sheet.before = cache.sheet.tags[0];
     }
     if (node2 !== null) {
       rehydrating = true;
@@ -21087,7 +21158,7 @@ var Global = /* @__PURE__ */ withEmotionCache(function(props, cache2) {
     return function() {
       sheet.flush();
     };
-  }, [cache2]);
+  }, [cache]);
   useInsertionEffectWithLayoutFallback(function() {
     var sheetRefCurrent = sheetRef.current;
     var sheet = sheetRefCurrent[0], rehydrating = sheetRefCurrent[1];
@@ -21096,15 +21167,15 @@ var Global = /* @__PURE__ */ withEmotionCache(function(props, cache2) {
       return;
     }
     if (serialized.next !== void 0) {
-      insertStyles(cache2, serialized.next, true);
+      insertStyles(cache, serialized.next, true);
     }
     if (sheet.tags.length) {
       var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
       sheet.before = element;
       sheet.flush();
     }
-    cache2.insert("", serialized, sheet, false);
-  }, [cache2, serialized.name]);
+    cache.insert("", serialized, sheet, false);
+  }, [cache, serialized.name]);
   return null;
 });
 function css() {
@@ -21153,10 +21224,10 @@ var composeShouldForwardProps = function composeShouldForwardProps2(tag, options
   return shouldForwardProp2;
 };
 var Insertion2 = function Insertion3(_ref) {
-  var cache2 = _ref.cache, serialized = _ref.serialized, isStringTag2 = _ref.isStringTag;
-  registerStyles(cache2, serialized, isStringTag2);
+  var cache = _ref.cache, serialized = _ref.serialized, isStringTag2 = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag2);
   useInsertionEffectAlwaysWithSyncFallback(function() {
-    return insertStyles(cache2, serialized, isStringTag2);
+    return insertStyles(cache, serialized, isStringTag2);
   });
   return null;
 };
@@ -21189,7 +21260,7 @@ var createStyled$3 = function createStyled(tag, options) {
         styles2.push(args[i], templateStringsArr[i]);
       }
     }
-    var Styled = withEmotionCache(function(props, cache2, ref) {
+    var Styled = withEmotionCache(function(props, cache, ref) {
       var FinalTag = shouldUseAs && props.as || baseTag;
       var className = "";
       var classInterpolations = [];
@@ -21202,12 +21273,12 @@ var createStyled$3 = function createStyled(tag, options) {
         mergedProps.theme = React$2.useContext(ThemeContext);
       }
       if (typeof props.className === "string") {
-        className = getRegisteredStyles(cache2.registered, classInterpolations, props.className);
+        className = getRegisteredStyles(cache.registered, classInterpolations, props.className);
       } else if (props.className != null) {
         className = props.className + " ";
       }
-      var serialized = serializeStyles(styles2.concat(classInterpolations), cache2.registered, mergedProps);
-      className += cache2.key + "-" + serialized.name;
+      var serialized = serializeStyles(styles2.concat(classInterpolations), cache.registered, mergedProps);
+      className += cache.key + "-" + serialized.name;
       if (targetClassName !== void 0) {
         className += " " + targetClassName;
       }
@@ -21225,7 +21296,7 @@ var createStyled$3 = function createStyled(tag, options) {
         newProps.ref = ref;
       }
       return /* @__PURE__ */ React$2.createElement(React$2.Fragment, null, /* @__PURE__ */ React$2.createElement(Insertion2, {
-        cache: cache2,
+        cache,
         serialized,
         isStringTag: typeof FinalTag === "string"
       }), /* @__PURE__ */ React$2.createElement(FinalTag, newProps));
@@ -21245,10 +21316,10 @@ var createStyled$3 = function createStyled(tag, options) {
       }
     });
     Styled.withComponent = function(nextTag, nextOptions) {
-      var newStyled2 = createStyled(nextTag, _extends$2({}, options, nextOptions, {
+      var newStyled = createStyled(nextTag, _extends$2({}, options, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       }));
-      return newStyled2.apply(void 0, styles2);
+      return newStyled.apply(void 0, styles2);
     };
     return Styled;
   };
@@ -21389,26 +21460,49 @@ var tags = [
   "text",
   "tspan"
 ];
-var newStyled = createStyled$3.bind(null);
+var styled$5 = createStyled$3.bind(null);
 tags.forEach(function(tagName) {
-  newStyled[tagName] = newStyled(tagName);
+  styled$5[tagName] = styled$5(tagName);
 });
-let cache;
-if (typeof document === "object") {
-  cache = createCache({
+function getCache(injectFirst, enableCssLayer) {
+  const emotionCache = createCache({
     key: "css",
-    prepend: true
+    prepend: injectFirst
   });
+  if (enableCssLayer) {
+    const prevInsert = emotionCache.insert;
+    emotionCache.insert = (...args) => {
+      if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      return prevInsert(...args);
+    };
+  }
+  return emotionCache;
 }
+const cacheMap = /* @__PURE__ */ new Map();
 function StyledEngineProvider(props) {
   const {
     injectFirst,
+    enableCssLayer,
     children
   } = props;
-  return injectFirst && cache ? /* @__PURE__ */ jsx$1(CacheProvider, {
-    value: cache,
-    children
-  }) : children;
+  const cache = React$2.useMemo(() => {
+    const cacheKey = `${injectFirst}-${enableCssLayer}`;
+    if (typeof document === "object" && cacheMap.has(cacheKey)) {
+      return cacheMap.get(cacheKey);
+    }
+    const fresh = getCache(injectFirst, enableCssLayer);
+    cacheMap.set(cacheKey, fresh);
+    return fresh;
+  }, [injectFirst, enableCssLayer]);
+  if (injectFirst || enableCssLayer) {
+    return /* @__PURE__ */ jsx$1(CacheProvider, {
+      value: cache,
+      children
+    });
+  }
+  return children;
 }
 function isEmpty$4(obj) {
   return obj === void 0 || obj === null || Object.keys(obj).length === 0;
@@ -21424,14 +21518,14 @@ function GlobalStyles$2(props) {
   });
 }
 /**
- * @mui/styled-engine v5.16.14
+ * @mui/styled-engine v5.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 function styled$4(tag, options) {
-  const stylesFactory = newStyled(tag, options);
+  const stylesFactory = styled$5(tag, options);
   return stylesFactory;
 }
 const internal_processStyles = (tag, processor) => {
@@ -21439,10 +21533,16 @@ const internal_processStyles = (tag, processor) => {
     tag.__emotion_styles = processor(tag.__emotion_styles);
   }
 };
+const wrapper = [];
+function internal_serializeStyles(styles2) {
+  wrapper[0] = styles2;
+  return serializeStyles(wrapper);
+}
 var styledEngine = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   "default": styled$4,
   internal_processStyles,
+  internal_serializeStyles,
   ThemeContext,
   keyframes,
   css,
@@ -21747,12 +21847,12 @@ function style$2(options) {
   return fn2;
 }
 function memoize(fn2) {
-  const cache2 = {};
+  const cache = {};
   return (arg) => {
-    if (cache2[arg] === void 0) {
-      cache2[arg] = fn2(arg);
+    if (cache[arg] === void 0) {
+      cache[arg] = fn2(arg);
     }
-    return cache2[arg];
+    return cache[arg];
   };
 }
 const properties = {
@@ -22413,7 +22513,8 @@ function unstable_createStyleFunctionSx() {
     var _theme$unstable_sxCon;
     const {
       sx,
-      theme = {}
+      theme = {},
+      nested
     } = props || {};
     if (!sx) {
       return null;
@@ -22447,7 +22548,8 @@ function unstable_createStyleFunctionSx() {
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css2[styleKey] = styleFunctionSx2({
                   sx: value,
-                  theme
+                  theme,
+                  nested: true
                 });
               } else {
                 css2 = merge(css2, breakpointsValues);
@@ -22458,6 +22560,11 @@ function unstable_createStyleFunctionSx() {
           }
         }
       });
+      if (!nested && theme.modularCssLayers) {
+        return {
+          "@layer sx": removeUnusedBreakpoints(breakpointsKeys, css2)
+        };
+      }
       return removeUnusedBreakpoints(breakpointsKeys, css2);
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
@@ -22528,13 +22635,36 @@ const systemDefaultTheme$2 = createTheme$2();
 function useTheme$2(defaultTheme2 = systemDefaultTheme$2) {
   return useTheme$3(defaultTheme2);
 }
+function wrapGlobalLayer(styles2) {
+  const serialized = internal_serializeStyles(styles2);
+  if (styles2 !== serialized && serialized.styles) {
+    if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
+      serialized.styles = `@layer global{${serialized.styles}}`;
+    }
+    return serialized;
+  }
+  return styles2;
+}
 function GlobalStyles$1({
   styles: styles2,
   themeId,
   defaultTheme: defaultTheme2 = {}
 }) {
   const upperTheme = useTheme$2(defaultTheme2);
-  const globalStyles = typeof styles2 === "function" ? styles2(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles2;
+  const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+  let globalStyles = typeof styles2 === "function" ? styles2(resolvedTheme) : styles2;
+  if (resolvedTheme.modularCssLayers) {
+    if (Array.isArray(globalStyles)) {
+      globalStyles = globalStyles.map((styleArg) => {
+        if (typeof styleArg === "function") {
+          return wrapGlobalLayer(styleArg(resolvedTheme));
+        }
+        return wrapGlobalLayer(styleArg);
+      });
+    } else {
+      globalStyles = wrapGlobalLayer(globalStyles);
+    }
+  }
   return /* @__PURE__ */ jsx$1(GlobalStyles$2, {
     styles: globalStyles
   });
@@ -22825,6 +22955,12 @@ function isStringTag$1(tag) {
 function shouldForwardProp$1(prop) {
   return prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as";
 }
+function shallowLayer$1(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === "object" && serialized.styles && !serialized.styles.startsWith("@layer")) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
+  }
+  return serialized;
+}
 const systemDefaultTheme$1 = createTheme$2();
 const lowercaseFirstLetter$1 = (string2) => {
   if (!string2) {
@@ -22845,7 +22981,7 @@ function defaultOverridesResolver$1(slot) {
   }
   return (props, styles2) => styles2[slot];
 }
-function processStyleArg$1(callableStyle, _ref) {
+function processStyleArg$1(callableStyle, _ref, layerName) {
   let {
     ownerState
   } = _ref, props = _objectWithoutPropertiesLoose$1(_ref, _excluded$1S);
@@ -22855,7 +22991,7 @@ function processStyleArg$1(callableStyle, _ref) {
   if (Array.isArray(resolvedStylesArg)) {
     return resolvedStylesArg.flatMap((resolvedStyle) => processStyleArg$1(resolvedStyle, _extends$2({
       ownerState
-    }, props)));
+    }, props), layerName));
   }
   if (!!resolvedStylesArg && typeof resolvedStylesArg === "object" && Array.isArray(resolvedStylesArg.variants)) {
     const {
@@ -22879,14 +23015,15 @@ function processStyleArg$1(callableStyle, _ref) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === "function" ? variant.style(_extends$2({
+        const variantStyle = typeof variant.style === "function" ? variant.style(_extends$2({
           ownerState
-        }, props, ownerState)) : variant.style);
+        }, props, ownerState)) : variant.style;
+        result.push(layerName ? shallowLayer$1(internal_serializeStyles(variantStyle), layerName) : variantStyle);
       }
     });
     return result;
   }
-  return resolvedStylesArg;
+  return layerName ? shallowLayer$1(internal_serializeStyles(resolvedStylesArg), layerName) : resolvedStylesArg;
 }
 function createStyled$2(input = {}) {
   const {
@@ -22913,6 +23050,7 @@ function createStyled$2(input = {}) {
       skipSx: inputSkipSx,
       overridesResolver: overridesResolver2 = defaultOverridesResolver$1(lowercaseFirstLetter$1(componentSlot))
     } = inputOptions, options = _objectWithoutPropertiesLoose$1(inputOptions, _excluded3$5);
+    const layerName = componentName && componentName.startsWith("Mui") || !!componentSlot ? "components" : "custom";
     const skipVariantsResolver = inputSkipVariantsResolver !== void 0 ? inputSkipVariantsResolver : componentSlot && componentSlot !== "Root" && componentSlot !== "root" || false;
     const skipSx = inputSkipSx || false;
     let label;
@@ -22930,13 +23068,16 @@ function createStyled$2(input = {}) {
     }, options));
     const transformStyleArg = (stylesArg) => {
       if (typeof stylesArg === "function" && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
-        return (props) => processStyleArg$1(stylesArg, _extends$2({}, props, {
-          theme: resolveTheme$1({
+        return (props) => {
+          const theme = resolveTheme$1({
             theme: props.theme,
             defaultTheme: defaultTheme2,
             themeId
-          })
-        }));
+          });
+          return processStyleArg$1(stylesArg, _extends$2({}, props, {
+            theme
+          }), theme.modularCssLayers ? layerName : void 0);
+        };
       }
       return stylesArg;
     };
@@ -22957,7 +23098,7 @@ function createStyled$2(input = {}) {
           Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
             resolvedStyleOverrides[slotKey] = processStyleArg$1(slotStyle, _extends$2({}, props, {
               theme
-            }));
+            }), theme.modularCssLayers ? "theme" : void 0);
           });
           return overridesResolver2(props, resolvedStyleOverrides);
         });
@@ -22974,7 +23115,7 @@ function createStyled$2(input = {}) {
             variants: themeVariants
           }, _extends$2({}, props, {
             theme
-          }));
+          }), theme.modularCssLayers ? "theme" : void 0);
         });
       }
       if (!skipSx) {
@@ -24569,6 +24710,12 @@ function isStringTag(tag) {
 function shouldForwardProp(prop) {
   return prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as";
 }
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === "object" && serialized.styles && !serialized.styles.startsWith("@layer")) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
+  }
+  return serialized;
+}
 const systemDefaultTheme = createStyled$1.systemDefaultTheme = (0, _createTheme.default)();
 const lowercaseFirstLetter = (string2) => {
   if (!string2) {
@@ -24589,7 +24736,7 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles2) => styles2[slot];
 }
-function processStyleArg(callableStyle, _ref) {
+function processStyleArg(callableStyle, _ref, layerName) {
   let {
     ownerState
   } = _ref, props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded$1L);
@@ -24599,7 +24746,7 @@ function processStyleArg(callableStyle, _ref) {
   if (Array.isArray(resolvedStylesArg)) {
     return resolvedStylesArg.flatMap((resolvedStyle) => processStyleArg(resolvedStyle, (0, _extends2.default)({
       ownerState
-    }, props)));
+    }, props), layerName));
   }
   if (!!resolvedStylesArg && typeof resolvedStylesArg === "object" && Array.isArray(resolvedStylesArg.variants)) {
     const {
@@ -24623,14 +24770,15 @@ function processStyleArg(callableStyle, _ref) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === "function" ? variant.style((0, _extends2.default)({
+        const variantStyle = typeof variant.style === "function" ? variant.style((0, _extends2.default)({
           ownerState
-        }, props, ownerState)) : variant.style);
+        }, props, ownerState)) : variant.style;
+        result.push(layerName ? shallowLayer((0, _styledEngine$1.internal_serializeStyles)(variantStyle), layerName) : variantStyle);
       }
     });
     return result;
   }
-  return resolvedStylesArg;
+  return layerName ? shallowLayer((0, _styledEngine$1.internal_serializeStyles)(resolvedStylesArg), layerName) : resolvedStylesArg;
 }
 function createStyled2(input = {}) {
   const {
@@ -24657,6 +24805,7 @@ function createStyled2(input = {}) {
       skipSx: inputSkipSx,
       overridesResolver: overridesResolver2 = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
     } = inputOptions, options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded3$4);
+    const layerName = componentName && componentName.startsWith("Mui") || !!componentSlot ? "components" : "custom";
     const skipVariantsResolver = inputSkipVariantsResolver !== void 0 ? inputSkipVariantsResolver : componentSlot && componentSlot !== "Root" && componentSlot !== "root" || false;
     const skipSx = inputSkipSx || false;
     let label;
@@ -24674,13 +24823,16 @@ function createStyled2(input = {}) {
     }, options));
     const transformStyleArg = (stylesArg) => {
       if (typeof stylesArg === "function" && stylesArg.__emotion_real !== stylesArg || (0, _deepmerge.isPlainObject)(stylesArg)) {
-        return (props) => processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
-          theme: resolveTheme({
+        return (props) => {
+          const theme = resolveTheme({
             theme: props.theme,
             defaultTheme: defaultTheme2,
             themeId
-          })
-        }));
+          });
+          return processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
+            theme
+          }), theme.modularCssLayers ? layerName : void 0);
+        };
       }
       return stylesArg;
     };
@@ -24701,7 +24853,7 @@ function createStyled2(input = {}) {
           Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
             resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, (0, _extends2.default)({}, props, {
               theme
-            }));
+            }), theme.modularCssLayers ? "theme" : void 0);
           });
           return overridesResolver2(props, resolvedStyleOverrides);
         });
@@ -24718,7 +24870,7 @@ function createStyled2(input = {}) {
             variants: themeVariants
           }, (0, _extends2.default)({}, props, {
             theme
-          }));
+          }), theme.modularCssLayers ? "theme" : void 0);
         });
       }
       if (!skipSx) {
@@ -31635,7 +31787,9 @@ const useUtilityClasses$17 = (ownerState) => {
   };
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = styled$1(ButtonBase$1)(({
+const SwitchBaseRoot = styled$1(ButtonBase$1, {
+  name: "MuiSwitchBase"
+})(({
   ownerState
 }) => _extends$2({
   padding: 9,
@@ -31646,6 +31800,7 @@ const SwitchBaseRoot = styled$1(ButtonBase$1)(({
   marginRight: ownerState.size === "small" ? -3 : -12
 }));
 const SwitchBaseInput = styled$1("input", {
+  name: "MuiSwitchBase",
   shouldForwardProp: rootShouldForwardProp$1
 })({
   cursor: "inherit",
@@ -35708,6 +35863,7 @@ var NativeSelectInput$1 = NativeSelectInput;
 var _span$1;
 const _excluded$12 = ["children", "classes", "className", "label", "notched"];
 const NotchedOutlineRoot$1 = styled$1("fieldset", {
+  name: "MuiNotchedOutlined",
   shouldForwardProp: rootShouldForwardProp$1
 })({
   textAlign: "left",
@@ -35726,6 +35882,7 @@ const NotchedOutlineRoot$1 = styled$1("fieldset", {
   minWidth: "0%"
 });
 const NotchedOutlineLegend = styled$1("legend", {
+  name: "MuiNotchedOutlined",
   shouldForwardProp: rootShouldForwardProp$1
 })(({
   ownerState,
@@ -39270,10 +39427,11 @@ const DocumentReaderController = (dataDocument, clientId, authorize, eventId, so
       };
       const parseReq = {
         method: "POST",
-        path: "api/v1/kyc-kit/document/recognition",
+        path: "api/v1/onboarding/validate",
         inProduction,
         customHeaders,
-        bodyParams: base64
+        bodyParams: base64,
+        service: "services"
       };
       try {
         const res2 = await request2(parseReq);
@@ -39821,11 +39979,8 @@ function SideDocsSelector({
       return;
     const [track] = streamRef.current.getVideoTracks();
     const capabilities = (_a = track.getCapabilities) == null ? void 0 : _a.call(track);
-    const settings = (_b = track.getSettings) == null ? void 0 : _b.call(track);
-    console.log("focus capabilities:", capabilities);
-    console.log("focus settings:", settings);
+    (_b = track.getSettings) == null ? void 0 : _b.call(track);
     if (!capabilities || !capabilities.focusMode) {
-      console.warn("No se puede acceder a las capacidades de enfoque");
       return;
     }
     try {
@@ -39885,7 +40040,6 @@ function SideDocsSelector({
   const handleSwitchCamera = () => {
     setCurrentCameraIndex((prevIndex) => (prevIndex + 1) % cameras.length);
   };
-  console.log("Activate Camera: ", activateCamera, "Distinto de HideCapture Button: ", !hideCaptureButton, "Distinto de Upload document By Phone: ", !uploadDocumentByPhone, "Cantidad de cameras: ", cameras.length);
   return /* @__PURE__ */ jsxs(Box$1, {
     sx: {
       width: "100%"
@@ -40585,8 +40739,6 @@ function DocumentReader({
     uploadDocumentByPhone,
     setUploadDocumentByPhone
   } = DocumentReaderController(dataDocument, clientId, authorize, eventId, source2, inProduction, countryCodeAllowed, validateVpn, successMessage, dualModeRequired);
-  console.log(isLoading, countryCodeAllowed, countryCode);
-  console.log(isLoading, countryCodeAllowed !== null, !countryCode);
   return /* @__PURE__ */ jsxs("div", {
     className: `kit-gbc ${mode} without-shadow ocr`,
     children: [/* @__PURE__ */ jsx$1(k$2, {
@@ -43028,13 +43180,13 @@ function defaultMemoize(func, equalityCheckOrOptions) {
   };
   var _providedOptions$equa = providedOptions.equalityCheck, equalityCheck = _providedOptions$equa === void 0 ? defaultEqualityCheck : _providedOptions$equa, _providedOptions$maxS = providedOptions.maxSize, maxSize = _providedOptions$maxS === void 0 ? 1 : _providedOptions$maxS, resultEqualityCheck = providedOptions.resultEqualityCheck;
   var comparator = createCacheKeyComparator(equalityCheck);
-  var cache2 = maxSize === 1 ? createSingletonCache(comparator) : createLruCache(maxSize, comparator);
+  var cache = maxSize === 1 ? createSingletonCache(comparator) : createLruCache(maxSize, comparator);
   function memoized() {
-    var value = cache2.get(arguments);
+    var value = cache.get(arguments);
     if (value === NOT_FOUND) {
       value = func.apply(null, arguments);
       if (resultEqualityCheck) {
-        var entries = cache2.getEntries();
+        var entries = cache.getEntries();
         var matchingEntry = entries.find(function(entry) {
           return resultEqualityCheck(entry.value, value);
         });
@@ -43042,12 +43194,12 @@ function defaultMemoize(func, equalityCheckOrOptions) {
           value = matchingEntry.value;
         }
       }
-      cache2.put(arguments, value);
+      cache.put(arguments, value);
     }
     return value;
   }
   memoized.clearCache = function() {
-    return cache2.clear();
+    return cache.clear();
   };
   return memoized;
 }
@@ -43198,17 +43350,17 @@ const createSelectorMemoized = (...args) => {
     const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId != null ? instanceId : DEFAULT_INSTANCE_ID;
     const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
     const {
-      cache: cache2
+      cache
     } = cacheContainer;
-    if (cache2.get(cacheKey) && (_cache$get = cache2.get(cacheKey)) != null && _cache$get.get(args)) {
+    if (cache.get(cacheKey) && (_cache$get = cache.get(cacheKey)) != null && _cache$get.get(args)) {
       var _cache$get2;
-      return (_cache$get2 = cache2.get(cacheKey)) == null ? void 0 : _cache$get2.get(args)(state, cacheKey);
+      return (_cache$get2 = cache.get(cacheKey)) == null ? void 0 : _cache$get2.get(args)(state, cacheKey);
     }
     const newSelector = createSelector$1(...args);
-    if (!cache2.get(cacheKey)) {
-      cache2.set(cacheKey, /* @__PURE__ */ new Map());
+    if (!cache.get(cacheKey)) {
+      cache.set(cacheKey, /* @__PURE__ */ new Map());
     }
-    (_cache$get3 = cache2.get(cacheKey)) == null || _cache$get3.set(args, newSelector);
+    (_cache$get3 = cache.get(cacheKey)) == null || _cache$get3.set(args, newSelector);
     return newSelector(state, cacheKey);
   };
   selector.acceptsApiRef = true;
@@ -43604,7 +43756,7 @@ const getRowsStateFromCache = ({
   previousTree,
   previousTreeDepths
 }) => {
-  const cache2 = apiRef.current.caches.rows;
+  const cache = apiRef.current.caches.rows;
   const {
     tree: unProcessedTree,
     treeDepths: unProcessedTreeDepths,
@@ -43613,16 +43765,16 @@ const getRowsStateFromCache = ({
   } = apiRef.current.applyStrategyProcessor("rowTreeCreation", {
     previousTree,
     previousTreeDepths,
-    updates: cache2.updates,
-    dataRowIdToIdLookup: cache2.dataRowIdToIdLookup,
-    dataRowIdToModelLookup: cache2.dataRowIdToModelLookup
+    updates: cache.updates,
+    dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
+    dataRowIdToModelLookup: cache.dataRowIdToModelLookup
   });
   const groupingParamsWithHydrateRows = apiRef.current.unstable_applyPipeProcessors("hydrateRows", {
     tree: unProcessedTree,
     treeDepths: unProcessedTreeDepths,
-    dataRowIdToIdLookup: cache2.dataRowIdToIdLookup,
+    dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
     dataRowIds: unProcessedDataRowIds,
-    dataRowIdToModelLookup: cache2.dataRowIdToModelLookup
+    dataRowIdToModelLookup: cache.dataRowIdToModelLookup
   });
   apiRef.current.caches.rows.updates = {
     type: "partial",
@@ -49568,14 +49720,14 @@ const buildAggregatedFilterApplier = (filterModel, apiRef, disableEval) => {
   };
 };
 const isNotNull = (result) => result != null;
-const filterModelItems = (cache2, apiRef, items) => {
-  if (!cache2.cleanedFilterItems) {
-    cache2.cleanedFilterItems = items.filter((item) => getFilterCallbackFromItem(item, apiRef) !== null);
+const filterModelItems = (cache, apiRef, items) => {
+  if (!cache.cleanedFilterItems) {
+    cache.cleanedFilterItems = items.filter((item) => getFilterCallbackFromItem(item, apiRef) !== null);
   }
-  return cache2.cleanedFilterItems;
+  return cache.cleanedFilterItems;
 };
-const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef, cache2) => {
-  const cleanedFilterItems = filterModelItems(cache2, apiRef, filterModel.items);
+const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef, cache) => {
+  const cleanedFilterItems = filterModelItems(cache, apiRef, filterModel.items);
   const cleanedFilterItemResults = allFilterItemResults.filter(isNotNull);
   const cleanedQuickFilterResults = allQuickFilterResults.filter(isNotNull);
   if (cleanedFilterItemResults.length > 0) {
@@ -54833,7 +54985,7 @@ const useGridRows = (apiRef, props) => {
     return acc;
   }, {}), [currentPage.rows]);
   const throttledRowsChange = React$2.useCallback(({
-    cache: cache2,
+    cache,
     throttle
   }) => {
     const run = () => {
@@ -54851,7 +55003,7 @@ const useGridRows = (apiRef, props) => {
       apiRef.current.forceUpdate();
     };
     timeout.clear();
-    apiRef.current.caches.rows = cache2;
+    apiRef.current.caches.rows = cache;
     if (!throttle) {
       run();
       return;
@@ -54865,16 +55017,16 @@ const useGridRows = (apiRef, props) => {
   }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef, timeout]);
   const setRows = React$2.useCallback((rows) => {
     logger.debug(`Updating all rows, new length ${rows.length}`);
-    const cache2 = createRowsInternalCache({
+    const cache = createRowsInternalCache({
       rows,
       getRowId: props.getRowId,
       loading: props.loading,
       rowCount: props.rowCount
     });
     const prevCache = apiRef.current.caches.rows;
-    cache2.rowsBeforePartialUpdates = prevCache.rowsBeforePartialUpdates;
+    cache.rowsBeforePartialUpdates = prevCache.rowsBeforePartialUpdates;
     throttledRowsChange({
-      cache: cache2,
+      cache,
       throttle: true
     });
   }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
@@ -54896,13 +55048,13 @@ const useGridRows = (apiRef, props) => {
         nonPinnedRowsUpdates.push(update);
       }
     });
-    const cache2 = updateCacheWithNewRows({
+    const cache = updateCacheWithNewRows({
       updates: nonPinnedRowsUpdates,
       getRowId: props.getRowId,
       previousCache: apiRef.current.caches.rows
     });
     throttledRowsChange({
-      cache: cache2,
+      cache,
       throttle: true
     });
   }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
@@ -55081,16 +55233,16 @@ const useGridRows = (apiRef, props) => {
   };
   const groupRows = React$2.useCallback(() => {
     logger.info(`Row grouping pre-processing have changed, regenerating the row tree`);
-    let cache2;
+    let cache;
     if (apiRef.current.caches.rows.rowsBeforePartialUpdates === props.rows) {
-      cache2 = _extends$2({}, apiRef.current.caches.rows, {
+      cache = _extends$2({}, apiRef.current.caches.rows, {
         updates: {
           type: "full",
           rows: gridDataRowIdsSelector(apiRef)
         }
       });
     } else {
-      cache2 = createRowsInternalCache({
+      cache = createRowsInternalCache({
         rows: props.rows,
         getRowId: props.getRowId,
         loading: props.loading,
@@ -55098,7 +55250,7 @@ const useGridRows = (apiRef, props) => {
       });
     }
     throttledRowsChange({
-      cache: cache2,
+      cache,
       throttle: false
     });
   }, [logger, apiRef, props.rows, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);