diff --git a/package-lock.json b/package-lock.json
index e68e85a..01ff0fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
       },
       "devDependencies": {
         "@diplodoc/babel-preset": "^1.0.3",
-        "@diplodoc/components": "^4.15.4",
+        "@diplodoc/components": "^4.17.1",
         "@diplodoc/lint": "^1.1.1",
         "@diplodoc/openapi-extension": "^2.3.3",
         "@diplodoc/tsconfig": "^1.0.2",
@@ -2017,9 +2017,9 @@
       }
     },
     "node_modules/@diplodoc/components": {
-      "version": "4.15.5",
-      "resolved": "https://registry.npmjs.org/@diplodoc/components/-/components-4.15.5.tgz",
-      "integrity": "sha512-Brwmip7CRmAHTDSzqYILEbxMl0UlqqjcDMvr6Z2478Z4aJY+dEaMqyqtQdns/2fu1voehFNY3DtKqD0gLAl/cQ==",
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@diplodoc/components/-/components-4.17.1.tgz",
+      "integrity": "sha512-5TkYpb4CxrwyScwvn55+SV90Au6FBZIJz3HVYxvEf1jBt97TTBsWJ+qBqYxPtkMHbGJS9gya4azI6MdEzz3jEQ==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
diff --git a/package.json b/package.json
index d782f1d..fbb54c9 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@diplodoc/babel-preset": "^1.0.3",
-    "@diplodoc/components": "^4.15.4",
+    "@diplodoc/components": "^4.17.1",
     "@diplodoc/lint": "^1.1.1",
     "@diplodoc/openapi-extension": "^2.3.3",
     "@diplodoc/tsconfig": "^1.0.2",
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 1620585..e2ae473 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -38,8 +38,8 @@ export type DocAnalytics = {
 };
 
 export interface AppProps {
-    lang: Lang;
-    langs: Lang[];
+    lang: `${Lang}` | Lang;
+    langs: (`${Lang}` | Lang)[];
     router: RouterConfig;
     search?: SearchConfig;
     analytics?: DocAnalytics;
diff --git a/src/components/App/useLangs.ts b/src/components/App/useLangs.ts
index 20cbcbd..1020c53 100644
--- a/src/components/App/useLangs.ts
+++ b/src/components/App/useLangs.ts
@@ -5,7 +5,7 @@ import {useCallback, useMemo} from 'react';
 
 export function useLangs({router, lang, langs}: AppProps) {
     const onChangeLang = useCallback(
-        (lang: Lang) => {
+        (lang: `${Lang}` | Lang) => {
             const path = getLangPath(router, lang);
             window.location.replace(path);
         },
diff --git a/src/components/HeaderControls/index.tsx b/src/components/HeaderControls/index.tsx
index d88a8da..6bfbad8 100644
--- a/src/components/HeaderControls/index.tsx
+++ b/src/components/HeaderControls/index.tsx
@@ -15,9 +15,9 @@ export type Props = {
     onChangeWideFormat: OnChangeCallback;
     showMiniToc: boolean;
     onChangeShowMiniToc: OnChangeCallback;
-    lang: Lang;
-    langs: Lang[];
-    onChangeLang?: (lang: Lang) => void;
+    lang: Lang | `${Lang}`;
+    langs: (Lang | `${Lang}`)[];
+    onChangeLang?: (lang: `${Lang}` | Lang) => void;
 };
 
 export const HeaderControls = memo<Props>(
diff --git a/src/hooks/useLang.ts b/src/hooks/useLang.ts
index 1d1cd0a..5c673a9 100644
--- a/src/hooks/useLang.ts
+++ b/src/hooks/useLang.ts
@@ -1,7 +1,7 @@
 import {createContext, useContext} from 'react';
 import {Lang} from '@diplodoc/components';
 
-const LangContext = createContext<Lang>(Lang.En);
+const LangContext = createContext<`${Lang}` | Lang>(Lang.En);
 
 LangContext.displayName = 'Lang';
 
diff --git a/src/preprocess.ts b/src/preprocess.ts
index cf2a8b5..c111693 100644
--- a/src/preprocess.ts
+++ b/src/preprocess.ts
@@ -32,7 +32,7 @@ export type NavigationData = PageContent<ConstructorNavigaitonData>;
 export type ConfigData = ConstructorPageContent | NavigationData;
 
 export interface PreloadParams {
-    lang: Lang;
+    lang: `${Lang}` | Lang;
     pageName: string;
     pageReferer?: string;
 }
@@ -87,7 +87,7 @@ function replaceTransformer(config: BlocksConfig, newTransformer: TransformerRaw
 
 function transformBlocks(
     blocks: ConstructorBlock[],
-    lang: Lang,
+    lang: `${Lang}` | Lang,
     customYfmTransformer: TransformerRaw,
 ) {
     const customConfig = replaceTransformer(config, customYfmTransformer);
diff --git a/src/utils.ts b/src/utils.ts
index 77b3bfe..32e8e6d 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -63,7 +63,7 @@ export function updateRootClassName(states: {
     });
 }
 
-export function getDirection(lang: Lang): TextDirection {
+export function getDirection(lang: `${Lang}` | Lang): TextDirection {
     const isRTL = RTL_LANGS.includes(lang);
 
     return isRTL ? TextDirection.RTL : TextDirection.LTR;