chore(theme): define palette and typographies and override mui styles with this values, also add rtlProvider

src/providers/RtlProvider.tsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import rtlPlugin from 'stylis-plugin-rtl';
+
+// This provider configures Emotion's cache to support RTL.
+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] : [],
+    });
+    setCache(newCache);
+  }, [i18n, i18n.language]);
+
+  return <CacheProvider value={cache}>{children}</CacheProvider>;
+};