feat: add digits input, complete signin form

src/providers/CustomThemeProvider.tsx

@@ -19,7 +19,7 @@ export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
           palette: lightPalette,
         },
         dark: {
-          palette: darkPalette, 
+          palette: darkPalette,
         },
       },
       cssVariables: {

src/providers/RtlProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
@@ -9,17 +9,14 @@ export const RtlProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const { i18n } = useTranslation();
-  const [cache, setCache] = useState(createCache({ key: 'css' }));
 
-  useEffect(() => {
-    const newDir = i18n.dir(i18n.language);
-
-    const newCache = createCache({
-      key: 'css',
-      stylisPlugins: newDir === 'rtl' ? [rtlPlugin] : [],
+  const cacheRtl = useMemo(() => {
+    const isRtl = i18n.dir(i18n.language) === 'rtl';
+    return createCache({
+      key: isRtl ? 'muirtl' : 'muiltr',
+      stylisPlugins: isRtl ? [rtlPlugin] : [],
     });
-    setCache(newCache);
-  }, [i18n, i18n.language]);
+  }, [i18n]);
 
-  return <CacheProvider value={cache}>{children}</CacheProvider>;
+  return <CacheProvider value={cacheRtl}>{children}</CacheProvider>;
 };