@jetbrains/kotlin-web-site-ui 4.1.2 → 4.2.0-alpha.0

package/out/components/footer/index.css

@@ -29,7 +29,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
@@ -85,7 +86,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
@@ -141,7 +143,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }

package/out/components/header/header.js

@@ -35,6 +35,7 @@ const Header = forwardRef(({
   const [isSearchBoxVisible, setSearchBoxVisible] = useState(false);
   const [fullSearchActive, setFullSearchActive] = useState(false);
   const items = useMemo(() => getNavScheme(isUrlActive, currentUrl, isPlayground), [isUrlActive, currentUrl, isPlayground]);
+  const itemsWithoutHomeSection = useMemo(() => items.slice(1), [items]);
   const headerRef = useRef(null);
   useImperativeHandle(forwardedRef, () => headerRef.current);
   useLayoutEffect(() => {
@@ -102,7 +103,7 @@ const Header = forwardRef(({
     fullSearchActive: fullSearchActive,
     setFullSearchActive: setFullSearchActive
   })) : React__default.createElement(React__default.Fragment, null, !isMenuPopupVisible && React__default.createElement(HorizontalMenu, {
-    items: items,
+    items: itemsWithoutHomeSection,
     theme: dropdownTheme,
     linkHandler: linkHandler
   }), React__default.createElement(SearchButton, {

package/out/components/header/index.css

@@ -38,7 +38,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
@@ -84,7 +85,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
@@ -226,7 +228,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
@@ -671,64 +674,27 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
 .ktl-menu-popup-module_menu-popup_Q68IE {
-  display: none;
-  padding: 8px 0;
-  background: var(--ktl-dark-100);
-  position: fixed;
-  top: var(--ktl-header-height-mobile);
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow: auto;
-  z-index: var(--ktl-top-menu-z-index);
-}
-
-.ktl-menu-popup-module_menu-item_fPvF- {
-  --level: 0;
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-  color: rgba(255, 255, 255, 0.75);
-  text-decoration: none;
-  padding: 8px 16px 8px calc(16px + (var(--level) * 24px));
-  transition: color var(--ktl-transition-xfast),
-    background-color var(--ktl-transition-xfast);
-}
-
-.ktl-menu-popup-module_menu-item_fPvF-:hover {
-    color: rgba(255, 255, 255, 1);
-    background: rgba(255, 255, 255, 0.1);
-    text-decoration: none;
-  }
-
-.ktl-menu-popup-module_menu-item_fPvF-.ktl-menu-popup-module_active_iqTAj {
-    color: var(--ktl-light-text-hard);
-    background: rgba(255, 255, 255, 1);
-    cursor: default;
-    text-decoration: none;
-  }
-
-.ktl-menu-popup-module_menu-item_fPvF-.ktl-menu-popup-module_active-with-child_tAzCG {
-    background: none;
-    color: rgba(255, 255, 255, 1);
-  }
-
-.ktl-menu-popup-module_menu-item-root_gA9d2 {
-  font-size: 20px;
-  line-height: 32px;
-  font-weight: 600;
+    display: none;
+    padding: 8px 0;
+    background: var(--ktl-dark-100);
+    position: fixed;
+    top: var(--ktl-header-height-mobile);
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: auto;
+    z-index: var(--ktl-top-menu-z-index);
 }
 
 .ktl-menu-popup-module_menu-popup-expanded_ggrp9 {
-  display: block;
+    display: block;
 }
 
 .ktl-menu-button-module_button_wB9Mx {
@@ -756,6 +722,97 @@
     color: #ffffff;
   }
 
+: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-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;
+  --rs-font-family-ui: var(--ktl-font-family-inter);
+}
+
+.ktl-menu-list-item-module_menu-item_Aruue {
+    --level: 0;
+    display: flex;
+    align-items: center;
+    font-size: 19px;
+    line-height: 28px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.75);
+    text-decoration: none;
+    padding: 12px 16px 12px 16px;
+    transition: color var(--ktl-transition-xfast),
+    background-color var(--ktl-transition-xfast);
+}
+
+.ktl-menu-list-item-module_menu-item_Aruue:hover {
+        color: rgba(255, 255, 255, 1);
+        background: rgba(255, 255, 255, 0.1);
+        text-decoration: none;
+    }
+
+.ktl-menu-list-item-module_menu-item_Aruue.ktl-menu-list-item-module_active_jHfJR {
+        color: var(--ktl-light-text-hard);
+        background: rgba(255, 255, 255, 1);
+        cursor: default;
+        text-decoration: none;
+    }
+
+.ktl-menu-list-item-module_menu-item_Aruue.ktl-menu-list-item-module_active-with-child_ier2a {
+        background: none;
+        color: rgba(255, 255, 255, 0.7);
+    }
+
+.ktl-menu-list-item-module_menu-item-root_Rzcqb:not(a) {
+        font-size: 13px;
+        text-transform: uppercase;
+        line-height: 28px;
+        color: rgba(255, 255, 255, 0.7);
+    }
+
+: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-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;
+  --rs-font-family-ui: var(--ktl-font-family-inter);
+}
+
+.ktl-menu-list-module_menu-item-group_mFvUE {
+    margin: 8px 0;
+    padding: 8px 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.ktl-menu-list-module_menu-item-group_mFvUE:not(:last-child) {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    }
+
 .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, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_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, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme } from './nav-scheme.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_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_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, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme } from './nav-scheme.js';

package/out/components/header/menu-popup/menu-list/menu-list.js

@@ -0,0 +1,33 @@
+import React__default, { Fragment } from 'react';
+import { MenuListItem } from '../menu-list-item/menu-list-item.js';
+import styles from './menu-list.module.pcss.js';
+
+const MenuList = ({
+  items,
+  level,
+  linkHandler
+}) => {
+  return React__default.createElement(React__default.Fragment, null, items.map((item, i) => React__default.createElement(Fragment, {
+    key: i
+  }, item.items && item.items.length > 0 ? React__default.createElement("div", {
+    className: styles.menuItemGroup
+  }, React__default.createElement(MenuListItem, {
+    item: item,
+    level: level,
+    linkHandler: linkHandler
+  }), item.items && item.items.length > 0 && React__default.createElement(MenuList, {
+    items: item.items,
+    level: level + 1,
+    linkHandler: linkHandler
+  })) : React__default.createElement(React__default.Fragment, null, React__default.createElement(MenuListItem, {
+    item: item,
+    level: level,
+    linkHandler: linkHandler
+  }), item.items && React__default.createElement(MenuList, {
+    items: item.items,
+    level: level + 1,
+    linkHandler: linkHandler
+  })))));
+};
+
+export { MenuList };

package/out/components/header/menu-popup/menu-list/menu-list.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "menuItemGroup": "ktl-menu-list-module_menu-item-group_mFvUE"
+};
+export { styles as default };

package/out/components/header/menu-popup/menu-list-item/menu-list-item.js

@@ -0,0 +1,28 @@
+import React__default, { useCallback } from 'react';
+import classNames from 'classnames';
+import styles from './menu-list-item.module.pcss.js';
+
+const MenuListItem = ({
+  item,
+  level,
+  linkHandler
+}) => {
+  const Tag = item.url ? 'a' : 'span';
+  const style = {
+    '--level': level
+  };
+  const handleClick = useCallback(event => linkHandler && item.url && linkHandler(event, item.url), []);
+  return React__default.createElement(Tag, Object.assign({}, item.url ? {
+    href: item.url,
+    onClick: handleClick
+  } : {}, {
+    className: classNames(styles.menuItem, {
+      [styles.menuItemRoot]: level === 0,
+      [styles.active]: item.isActive,
+      [styles.activeWithChild]: item.items && item.items.length
+    }),
+    style: style
+  }), item.title);
+};
+
+export { MenuListItem };

package/out/components/header/menu-popup/menu-list-item/menu-list-item.module.pcss.js

@@ -0,0 +1,7 @@
+var styles = {
+  "menuItem": "ktl-menu-list-item-module_menu-item_Aruue",
+  "active": "ktl-menu-list-item-module_active_jHfJR",
+  "activeWithChild": "ktl-menu-list-item-module_active-with-child_ier2a",
+  "menuItemRoot": "ktl-menu-list-item-module_menu-item-root_Rzcqb"
+};
+export { styles as default };

package/out/components/header/menu-popup/menu-popup.js

@@ -1,51 +1,11 @@
-import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback, Fragment } from 'react';
+import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
 import styles from './menu-popup.module.pcss.js';
 import classNames from 'classnames';
 import { MenuButton } from './menu-button/menu-button.js';
+import { MenuList } from './menu-list/menu-list.js';
 import { useTextStyles } from '@rescui/typography';
 import { clearAllBodyScrollLocks, enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
 
-const MenuListItem = ({
-  item,
-  level,
-  linkHandler
-}) => {
-  const Tag = item.url ? 'a' : 'span';
-  const style = {
-    '--level': level
-  };
-  const handleClick = useCallback(event => linkHandler && item.url && linkHandler(event, item.url), []);
-  return React__default.createElement(Tag, Object.assign({}, item.url ? {
-    href: item.url,
-    onClick: handleClick
-  } : {}, {
-    className: classNames(styles.menuItem, {
-      [styles.menuItemRoot]: level === 0,
-      [styles.active]: item.isActive,
-      [styles.activeWithChild]: item.items && item.items.length
-    }),
-    style: style
-  }), item.title);
-};
-
-const MenuList = ({
-  items,
-  level,
-  linkHandler
-}) => {
-  return React__default.createElement(React__default.Fragment, null, items.map((item, i) => React__default.createElement(Fragment, {
-    key: i
-  }, React__default.createElement(MenuListItem, {
-    item: item,
-    level: level,
-    linkHandler: linkHandler
-  }), item.items && item.items.length > 0 && React__default.createElement(MenuList, {
-    items: item.items,
-    level: level + 1,
-    linkHandler: linkHandler
-  }))));
-};
-
 const MenuPopup = ({
   items,
   isExpanded,

package/out/components/header/menu-popup/menu-popup.module.pcss.js

@@ -1,9 +1,5 @@
 var styles = {
   "menuPopup": "ktl-menu-popup-module_menu-popup_Q68IE",
-  "menuItem": "ktl-menu-popup-module_menu-item_fPvF-",
-  "active": "ktl-menu-popup-module_active_iqTAj",
-  "activeWithChild": "ktl-menu-popup-module_active-with-child_tAzCG",
-  "menuItemRoot": "ktl-menu-popup-module_menu-item-root_gA9d2",
   "menuPopupExpanded": "ktl-menu-popup-module_menu-popup-expanded_ggrp9"
 };
 export { styles as default };

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

@@ -1,4 +1,6 @@
 import { PLAYGROUND_URL, KOTLINLANG_URL } from './consts.js';
+const HOME_TITLE = 'Home';
+const HOME_URL = '/';
 const SOLUTIONS_TITLE = 'Solutions';
 const MULTIPLATFORM_MOBILE_TITLE = 'Multiplatform Mobile';
 const MULTIPLATFORM_MOBILE_URL = `/lp/mobile/`;
@@ -32,6 +34,9 @@ const KOTLIN_DOCS_URL = `/docs/home.html`;
 const KMM_DOCS_TITLE = 'KMM';
 const KMM_DOCS_URL = `/docs/mobile/home.html`;
 const navScheme = [{
+  title: HOME_TITLE,
+  url: HOME_URL
+}, {
   title: SOLUTIONS_TITLE,
   url: null,
   items: [{
@@ -80,8 +85,9 @@ const navScheme = [{
   }]
 }];
 
-function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground) {
-  return navScheme.map(({
+function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground, withoutHomeSection) {
+  const controlledNavScheme = withoutHomeSection ? navScheme.slice(1) : navScheme;
+  return controlledNavScheme.map(({
     title,
     url,
     items
@@ -132,4 +138,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, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_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, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme };
+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_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, MULTIPLATFORM_OTHERS_TITLE, MULTIPLATFORM_OTHERS_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_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, WEB_FRONTEND_TITLE, WEB_FRONTEND_URL, getNavScheme };

package/out/components/top-menu/dropdown-menu/dropdown-menu.js

@@ -5,6 +5,8 @@ import styles from './dropdown-menu.module.pcss.js';
 import { useTextStyles } from '@rescui/typography';
 import SvgArrowDropdownIcon from './arrow-dropdown-icon.svg.js';
 import { useTheme } from '@rescui/ui-contexts';
+import Button from '@rescui/button';
+import { CloseIcon } from '@rescui/icons';
 
 const DropdownMenu = ({
   homeUrl,
@@ -39,11 +41,11 @@ const DropdownMenu = ({
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: classNames(styles.dropdownMenu, {
       [styles.dropdownMenuExpanded]: isExpanded
-    }),
-    onClick: handleClick
+    })
   }, React__default.createElement("button", {
     className: classNames(styles.button, textCn('rs-text-2')),
-    "aria-haspopup": "true"
+    "aria-haspopup": "true",
+    onClick: handleClick
   }, React__default.createElement("span", {
     className: styles.buttonText
   }, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
@@ -52,10 +54,18 @@ const DropdownMenu = ({
     className: classNames(styles.dropdownList, {
       [styles.dropdownListDarkTheme]: theme === 'dark'
     })
-  }, _items.map((item, index) => React__default.createElement("a", {
+  }, React__default.createElement("div", {
+    className: styles.dropdownHeader
+  }, React__default.createElement("div", {
+    className: textCn('rs-text-2')
+  }, title), React__default.createElement(Button, {
+    mode: 'clear',
+    icon: React__default.createElement(CloseIcon, null),
+    onClick: handleClick
+  })), _items.map((item, index) => React__default.createElement("a", {
     key: item.url,
     href: item.url,
-    className: classNames(styles.dropdownItem, textCn('rs-text-2'), {
+    className: classNames(styles.dropdownItem, textCn('rs-text-1'), {
       [styles.dropdownItemActive]: index === _activeIndex
     }),
     onClick: event => linkHandler?.(event, item.url),

package/out/components/top-menu/dropdown-menu/dropdown-menu.module.pcss.js

@@ -1,13 +1,14 @@
 var styles = {
+  "overlay": "ktl-dropdown-menu-module_overlay_segRo",
+  "fadein": "ktl-dropdown-menu-module_fadein_MySnq",
   "dropdownMenu": "ktl-dropdown-menu-module_dropdown-menu_tq2uU",
   "button": "ktl-dropdown-menu-module_button_OYsuv",
   "buttonText": "ktl-dropdown-menu-module_button-text_SJmh-",
   "icon": "ktl-dropdown-menu-module_icon_GGhMI",
+  "dropdownHeader": "ktl-dropdown-menu-module_dropdown-header_fa92T",
   "dropdownList": "ktl-dropdown-menu-module_dropdown-list_Ylkvt",
-  "fadein": "ktl-dropdown-menu-module_fadein_MySnq",
   "dropdownItem": "ktl-dropdown-menu-module_dropdown-item_X3tZ-",
   "dropdownItemActive": "ktl-dropdown-menu-module_dropdown-item-active_99q9X",
-  "overlay": "ktl-dropdown-menu-module_overlay_segRo",
   "overlayVisible": "ktl-dropdown-menu-module_overlay-visible_MjwEF",
   "dropdownMenuExpanded": "ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy",
   "dropdownListDarkTheme": "ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol"

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

@@ -13,7 +13,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
@@ -29,7 +30,6 @@
   height: 64px;
   background: #ffffff;
   padding: 0 32px;
-  z-index: var(--ktl-top-menu-z-index);
   box-shadow: inset 0 -1px 0 0 var(--ktl-light-dark-20);
   transition: color var(--ktl-transition-fast),
   background-color var(--ktl-transition-fast);
@@ -48,7 +48,7 @@
 
 @media (max-width: 640px) {
   .ktl-top-menu-module_top-menu_PRX9X {
-    height: 48px;
+    height: var(--ktl-header-height-mobile);
     padding: 0 16px;
     grid-gap: 16px;
     grid-template-columns: 1fr auto;
@@ -96,140 +96,154 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+.ktl-dropdown-menu-module_overlay_segRo {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    background-color: var(--ktl-color-dark-40);
+    z-index: var(--ktl-overlay-z-index);
+    -webkit-animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
+            animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
+}
+
 .ktl-dropdown-menu-module_dropdown-menu_tq2uU {
-  display: none;
-  height: 100%;
-  justify-self: flex-start;
-  white-space: nowrap;
-  min-width: 0;
-  max-width: 100%;
+    display: none;
+    height: 100%;
+    justify-self: flex-start;
+    white-space: nowrap;
+    min-width: 0;
+    max-width: 100%;
 }
 
 .ktl-dropdown-menu-module_button_OYsuv {
-  border: none;
-  background: none;
-  height: 100%;
-  max-width: 100%;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
+    border: none;
+    background: none;
+    height: 100%;
+    max-width: 100%;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
 }
 
 .ktl-dropdown-menu-module_button-text_SJmh- {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 0 1 auto;
 }
 
 .ktl-dropdown-menu-module_icon_GGhMI {
-  width: 12px;
-  height: 6px;
-  margin-left: 6px;
-  transition: transform ease-in-out var(--ktl-transition-xfast);
-  flex: 0 0 auto;
+    width: 12px;
+    height: 6px;
+    margin-left: 6px;
+    transition: transform ease-in-out var(--ktl-transition-xfast);
+    flex: 0 0 auto;
+}
+
+.ktl-dropdown-menu-module_dropdown-header_fa92T {
+    display: flex;
+    color: #ffffff;
+    align-items: center;
+    height: var(--ktl-header-height-mobile);
+    padding: 0 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    justify-content: space-between;
 }
 
 .ktl-dropdown-menu-module_dropdown-list_Ylkvt {
-  display: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  background: #ffffff;
-  opacity: 0;
-  -webkit-animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
-          animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #ffffff;
+    opacity: 0;
+    -webkit-animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
+            animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
+    z-index: var(--ktl-mobile-dropdown-list-z-index);
 }
 
 .ktl-dropdown-menu-module_dropdown-item_X3tZ- {
-  padding: 8px 16px;
-  text-decoration: none;
-  transition: color var(--ktl-transition-xfast),
+    padding: 12px 16px;
+    text-decoration: none;
+    transition: color var(--ktl-transition-xfast),
     background-color var(--ktl-transition-xfast);
 }
 
 .ktl-dropdown-menu-module_dropdown-item_X3tZ-:hover {
-    background: rgba(39, 40, 44, 0.1);
-    color: #27282c;
-  }
+        background: rgba(39, 40, 44, 0.1);
+        color: #27282c;
+    }
 
 .ktl-dropdown-menu-module_dropdown-item_X3tZ-.ktl-dropdown-menu-module_dropdown-item-active_99q9X {
-    background: var(--ktl-dark-100);
-    color: #ffffff;
-  }
-
-.ktl-dropdown-menu-module_overlay_segRo {
-  display: none;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  background-color: var(--ktl-color-dark-40);
-  z-index: var(--ktl-overlay-z-index);
-  -webkit-animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
-          animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
-}
+        background: var(--ktl-dark-100);
+        color: #ffffff;
+    }
 
 .ktl-dropdown-menu-module_overlay-visible_MjwEF {
-  display: block;
-  opacity: 1;
+    display: block;
+    opacity: 1;
 }
 
 .ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy .ktl-dropdown-menu-module_icon_GGhMI {
-    transform: scale(1, -1);
-  }
+        transform: scale(1, -1);
+    }
 
 .ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy .ktl-dropdown-menu-module_dropdown-list_Ylkvt {
-    display: flex;
-    flex-direction: column;
-    opacity: 1;
-  }
+        display: flex;
+        flex-direction: column;
+        opacity: 1;
+    }
 
 .ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol {
-  background: var(--ktl-dark-bg-hard);
+    background: var(--ktl-dark-bg-hard);
 }
 
 .ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol .ktl-dropdown-menu-module_dropdown-item_X3tZ-:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: #ffffff;
-    }
+            background: rgba(255, 255, 255, 0.1);
+            color: #ffffff;
+        }
 
 .ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol .ktl-dropdown-menu-module_dropdown-item_X3tZ-.ktl-dropdown-menu-module_dropdown-item-active_99q9X {
-      color: var(--ktl-light-text-hard);
-      background: #ffffff;
-    }
+            color: var(--ktl-light-text-hard);
+            background: #ffffff;
+        }
 
 @media (max-width: 640px) {
-  .ktl-dropdown-menu-module_dropdown-menu_tq2uU {
-    display: block;
-  }
+    .ktl-dropdown-menu-module_dropdown-menu_tq2uU {
+        display: block;
+    }
 }
 
 @-webkit-keyframes ktl-dropdown-menu-module_fadein_MySnq {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
 
 @keyframes ktl-dropdown-menu-module_fadein_MySnq {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }

package/out/components/typography/index.css

@@ -13,7 +13,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }

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

@@ -13,7 +13,8 @@
   --ktl-overlay-z-index: 900;
   --ktl-top-menu-z-index: 905;
   --ktl-header-z-index: 906;
-  --ktl-header-height-mobile: 48px;
+  --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;
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.1.2",
+  "version": "4.2.0-alpha.0",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [