@jetbrains/kotlin-web-site-ui 4.10.0-alpha.0 → 4.10.0-alpha.2

package/out/components/footer/index.css

@@ -41,6 +41,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -106,6 +114,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -190,6 +206,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {

package/out/components/footer-compact/index.css

@@ -34,6 +34,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -106,6 +114,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -178,6 +194,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {

package/out/components/header/index.css

@@ -42,6 +42,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -107,6 +115,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -271,6 +287,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -749,6 +773,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -827,6 +859,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -900,6 +940,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -926,6 +974,13 @@
         border-bottom: 1px solid rgba(255, 255, 255, 0.3);
     }
 
+.ktl-menu-list-module_menu-item-group_mFvUE + .ktl-menu-list-module_menu-item-group_mFvUE {
+    margin-top: 0;
+    padding-top: 0;
+
+    border-top: none;
+}
+
 .ktl-logo-small-module_logo-small_iGY12 {
   flex-grow: 1;
   display: flex;

package/out/components/header/index.js

@@ -1,4 +1,4 @@
 import './index.css';
 import { Header } from './header.js';
 export { Header as default } from './header.js';
-export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_LIBRARIES_TITLE, MULTIPLATFORM_LIBRARIES_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, getNavScheme } from './nav-scheme.js';
+export { ANDROID_TITLE, ANDROID_URL, API_OVERVIEW_TITLE, API_OVERVIEW_URL, API_TITLE, COMMUNITY_TITLE, COMMUNITY_URL, CORE_API_TITLE, CORE_API_URL, COROUTINES_API_TITLE, COROUTINES_API_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DATETIME_API_TITLE, DATETIME_API_URL, DOCS_NAVIGATION_ITEMS, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, IO_API_TITLE, IO_API_URL, KGP_TITLE, KGP_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, KTOR_TITLE, KTOR_URL, METADATA_JVM_TITLE, METADATA_JVM_URL, MULTIPLATFORM_LIBRARIES_TITLE, MULTIPLATFORM_LIBRARIES_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERIALIZATION_API_TITLE, SERIALIZATION_API_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, TEST_API_TITLE, TEST_API_URL, getNavScheme } from './nav-scheme.js';

package/out/components/header/nav-scheme.js

@@ -29,6 +29,34 @@ const KOTLIN_DOCS_TITLE = 'Kotlin';
 const KOTLIN_DOCS_URL = `/docs/home.html`;
 const KMM_DOCS_TITLE = 'KMM';
 const KMM_DOCS_URL = `/docs/mobile/home.html`;
+const API_TITLE = 'API';
+const API_OVERVIEW_TITLE = 'APIs overview';
+const API_OVERVIEW_URL = '/docs/api-references.html';
+const CORE_API_TITLE = 'Standard library (stdlib)';
+const CORE_API_URL = '/api/core/kotlin-stdlib/';
+const TEST_API_TITLE = 'Test library (kotlin.test)';
+const TEST_API_URL = '/api/core/kotlin-test/';
+const COROUTINES_API_TITLE = 'Coroutines (kotlinx.coroutines)';
+const COROUTINES_API_URL = '/api/kotlinx.coroutines/kotlinx-coroutines-core/';
+const SERIALIZATION_API_TITLE = 'Serialization (kotlinx.serialization)';
+const SERIALIZATION_API_URL = '/api/kotlinx.serialization/kotlinx-serialization-core/';
+const IO_API_TITLE = 'Kotlin I/O library (kotlinx-io)';
+const IO_API_URL = '/api/kotlinx-io/';
+const DATETIME_API_TITLE = 'Date and time (kotlinx-datetime)';
+const DATETIME_API_URL = '/api/kotlinx-datetime/';
+const METADATA_JVM_TITLE = 'JVM Metadata (kotlin-metadata-jvm)';
+const METADATA_JVM_URL = '/api/kotlinx-metadata-jvm/';
+const KGP_TITLE = 'Kotlin Gradle plugins';
+const KGP_URL = '/api/kotlin-gradle-plugin/';
+const KTOR_TITLE = 'Ktor';
+const KTOR_URL = 'https://api.ktor.io/';
+const DOCS_NAVIGATION_ITEMS = [{
+  url: '/docs/home.html',
+  title: 'Language guide'
+}, {
+  url: '/docs/multiplatform/get-started.html',
+  title: 'Multiplatform development'
+}];
 const navScheme = [{
   title: HOME_TITLE,
   url: HOME_URL
@@ -50,7 +78,42 @@ const navScheme = [{
   }]
 }, {
   title: DOCS_TITLE,
-  url: KOTLIN_DOCS_URL
+  url: KOTLIN_DOCS_URL,
+  items: DOCS_NAVIGATION_ITEMS
+}, {
+  title: API_TITLE,
+  url: null,
+  items: [{
+    title: API_OVERVIEW_TITLE,
+    url: API_OVERVIEW_URL
+  }, {
+    title: CORE_API_TITLE,
+    url: CORE_API_URL
+  }, {
+    title: TEST_API_TITLE,
+    url: TEST_API_URL
+  }, {
+    title: COROUTINES_API_TITLE,
+    url: COROUTINES_API_URL
+  }, {
+    title: SERIALIZATION_API_TITLE,
+    url: SERIALIZATION_API_URL
+  }, {
+    title: IO_API_TITLE,
+    url: IO_API_URL
+  }, {
+    title: DATETIME_API_TITLE,
+    url: DATETIME_API_URL
+  }, {
+    title: METADATA_JVM_TITLE,
+    url: METADATA_JVM_URL
+  }, {
+    title: KGP_TITLE,
+    url: KGP_URL
+  }, {
+    title: KTOR_TITLE,
+    url: KTOR_URL
+  }]
 }, {
   title: COMMUNITY_TITLE,
   url: COMMUNITY_URL
@@ -63,9 +126,6 @@ const navScheme = [{
   items: [{
     title: PLAY_TITLE_FULL,
     url: PLAY_URL
-  }, {
-    title: PLAY_EXAMPLES_TITLE,
-    url: PLAY_EXAMPLES_URL
   }, {
     title: PLAY_KOANS_TITLE,
     url: PLAY_KOANS_URL
@@ -117,6 +177,10 @@ function makeExternalUrl(url, currentUrl, isPlayground) {
   if (isPlayground) {
     if (url.startsWith(PLAY_URL)) {
       return url.replace(PLAY_URL, '/');
+    }
+
+    if (url.startsWith('https://')) {
+      return url;
     } else {
       return `${KOTLINLANG_URL}${url}`;
     }
@@ -125,4 +189,4 @@ function makeExternalUrl(url, currentUrl, isPlayground) {
   return url;
 }
 
-export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_LIBRARIES_TITLE, MULTIPLATFORM_LIBRARIES_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, getNavScheme };
+export { ANDROID_TITLE, ANDROID_URL, API_OVERVIEW_TITLE, API_OVERVIEW_URL, API_TITLE, COMMUNITY_TITLE, COMMUNITY_URL, CORE_API_TITLE, CORE_API_URL, COROUTINES_API_TITLE, COROUTINES_API_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DATETIME_API_TITLE, DATETIME_API_URL, DOCS_NAVIGATION_ITEMS, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, IO_API_TITLE, IO_API_URL, KGP_TITLE, KGP_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, KTOR_TITLE, KTOR_URL, METADATA_JVM_TITLE, METADATA_JVM_URL, MULTIPLATFORM_LIBRARIES_TITLE, MULTIPLATFORM_LIBRARIES_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERIALIZATION_API_TITLE, SERIALIZATION_API_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, TEST_API_TITLE, TEST_API_URL, getNavScheme };

package/out/components/sub-navigation/horizontal-menu/horizontal-menu.js

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import styles from './horizontal-menu.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+
+const HorizontalMenuItem = ({
+  item,
+  isActive,
+  linkHandler
+}) => {
+  useTextStyles();
+  const handleLink = useCallback(event => linkHandler(event, item.url), [item]);
+  return isActive ? React.createElement("span", {
+    key: item.url,
+    className: styles.itemActive
+  }, item.title) : React.createElement("a", {
+    href: item.url,
+    key: item.url,
+    className: styles.item,
+    onClick: handleLink,
+    target: item.isExternal ? '_blank' : undefined,
+    rel: "noreferrer"
+  }, item.title);
+};
+
+const HorizontalMenu = ({
+  items,
+  activeIndex,
+  linkHandler
+}) => {
+  const textCn = useTextStyles();
+  return React.createElement("nav", {
+    className: classNames(styles.horizontalMenu, textCn('rs-text-2'))
+  }, items.map((item, index) => React.createElement(HorizontalMenuItem, {
+    key: item.url,
+    isActive: index === activeIndex,
+    item: item,
+    linkHandler: linkHandler
+  })));
+};
+
+export { HorizontalMenu };

package/out/components/sub-navigation/horizontal-menu/horizontal-menu.module.pcss.js

@@ -0,0 +1,6 @@
+var styles = {
+  "horizontalMenu": "ktl-horizontal-menu-module_horizontal-menu_bRQN9",
+  "item": "ktl-horizontal-menu-module_item_vmotC",
+  "itemActive": "ktl-horizontal-menu-module_item-active_gSpD6"
+};
+export { styles as default };

package/out/components/sub-navigation/index.css

@@ -0,0 +1,146 @@
+:root {
+  --ktl-light-grey: #f4f4f4;
+  --ktl-dark-100: rgba(39, 40, 44, 1);
+  --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
+  --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
+  --ktl-color-white-light: rgba(255, 255, 255, 0.75);
+  --ktl-transition-xfast: 100ms;
+  --ktl-transition-fast: 300ms;
+  --ktl-color-primary-light-theme: #7f52ff;
+  --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
+  --ktl-light-text-hard: rgba(39, 40, 44, 1);
+  --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
+  --ktl-divider-color: rgba(25, 25, 28, .2);
+  --ktl-overlay-z-index: 900;
+  --ktl-top-menu-z-index: 905;
+  --ktl-header-z-index: 906;
+  --ktl-mobile-dropdown-list-z-index: 907;
+  --ktl-header-height-mobile: 52px;
+  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
+}
+
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
+.ktl-sub-navigation-module_sub-navigation_dGfIT {
+  --sub-navigation-text-color: var(--website-ui-text-color);
+  --sub-navigation-background-color: #fff;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  height: 64px;
+  background-color: var(--sub-navigation-background-color);
+  padding: 0 32px;
+  overflow: auto;
+}
+
+@media (max-width: 640px) {
+
+.ktl-sub-navigation-module_sub-navigation_dGfIT {
+    height: var(--ktl-header-height-mobile);
+    padding: 0 6px 0 4px;
+    gap: 16px
+}
+  }
+
+.ktl-sub-navigation-module_sub-navigation-dark-theme_s4fQ7 {
+  --sub-navigation-background-color: rgba(16, 16, 16, 1);
+  --sub-navigation-text-color: var(--website-ui-text-color-dark);
+  color: var(--sub-navigation-text-color);
+}
+
+.ktl-sub-navigation-module_logo_Jm6Jd {
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--sub-navigation-text-color) !important;
+  text-decoration: none;
+}
+
+.ktl-sub-navigation-module_logo_Jm6Jd:focus-visible {
+    outline: var(--website-ui-focus-outline);
+  }
+
+@media (max-width: 640px) {
+
+.ktl-sub-navigation-module_logo_Jm6Jd {
+    display: none
+}
+  }
+
+:root {
+  --horizontal-menu-item-padding: 12px;
+}
+
+.ktl-horizontal-menu-module_horizontal-menu_bRQN9 {
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+  align-items: center;
+  height: 100%;
+  margin-right: calc(-1 * var(--horizontal-menu-item-padding));
+}
+
+.ktl-horizontal-menu-module_item_vmotC, .ktl-horizontal-menu-module_item-active_gSpD6 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  box-sizing: border-box;
+  text-align: center;
+  white-space: nowrap;
+  padding: var(--horizontal-menu-item-padding);
+  text-decoration: none;
+  color: var(--sub-navigation-text-color) !important;
+}
+
+.ktl-horizontal-menu-module_item_vmotC:focus-visible, .ktl-horizontal-menu-module_item-active_gSpD6:focus-visible {
+    outline: var(--website-ui-focus-outline);
+    outline-offset: -4px;
+  }
+
+.ktl-horizontal-menu-module_item_vmotC:after, .ktl-horizontal-menu-module_item-active_gSpD6:after {
+    content: '';
+    display: none;
+    height: 2px;
+    position: absolute;
+    bottom: 4px;
+    left: var(--horizontal-menu-item-padding);
+    right: var(--horizontal-menu-item-padding);
+    background-color: var(--sub-navigation-text-color);
+  }
+
+.ktl-horizontal-menu-module_item_vmotC:hover {
+  background-color: rgba(255, 255, 255, 0.10);
+}
+
+.ktl-horizontal-menu-module_item-active_gSpD6 {
+  cursor: default;
+}
+
+.ktl-horizontal-menu-module_item-active_gSpD6:after {
+    display: block;
+  }

package/out/components/sub-navigation/index.js

@@ -0,0 +1,3 @@
+import './index.css';
+import { SubNavigation } from './sub-navigation.js';
+export { SubNavigation as default } from './sub-navigation.js';

package/out/components/sub-navigation/sub-navigation.js

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import { useTheme } from '@rescui/ui-contexts';
+import classNames from 'classnames';
+import styles from './sub-navigation.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+import { HorizontalMenu } from './horizontal-menu/horizontal-menu.js';
+const SubNavigation = forwardRef(({
+  homeUrl,
+  title,
+  activeIndex,
+  items,
+  linkHandler = () => null,
+  className,
+  children
+}) => {
+  const theme = useTheme();
+  const textCn = useTextStyles();
+  return React.createElement("div", {
+    className: classNames(styles.subNavigation, className, {
+      [styles.subNavigationDarkTheme]: theme === 'dark'
+    })
+  }, title && React.createElement("a", {
+    href: homeUrl,
+    className: classNames(styles.logo, textCn('rs-text-2')),
+    onClick: event => linkHandler(event, homeUrl)
+  }, title), React.createElement(HorizontalMenu, {
+    items: items,
+    activeIndex: activeIndex,
+    linkHandler: linkHandler
+  }), children);
+});
+export { SubNavigation };

package/out/components/sub-navigation/sub-navigation.module.pcss.js

@@ -0,0 +1,6 @@
+var styles = {
+  "subNavigation": "ktl-sub-navigation-module_sub-navigation_dGfIT",
+  "subNavigationDarkTheme": "ktl-sub-navigation-module_sub-navigation-dark-theme_s4fQ7",
+  "logo": "ktl-sub-navigation-module_logo_Jm6Jd"
+};
+export { styles as default };

package/out/components/top-menu/index.css

@@ -18,6 +18,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -110,6 +118,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {

package/out/components/typography/index.css

@@ -18,6 +18,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {

package/out/components/youtube-player/index.css

@@ -18,6 +18,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.10.0-alpha.0",
+  "version": "4.10.0-alpha.2",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -32,8 +32,8 @@
     "@rescui/ui-contexts": "0.x",
     "algoliasearch": "4.x",
     "formik": "2.x",
-    "react": ">= 16.8.6",
-    "react-dom": ">= 16.8.6",
+    "react": ">= 16.8.6 < 18",
+    "react-dom": ">= 16.8.6 < 18",
     "react-outside-click-handler": "1.x",
     "react-remove-scroll-bar": "2.x",
     "react-scrollbar-size": "5.x",