@jetbrains/kotlin-web-site-ui 4.8.0-alpha.1 → 4.8.0-alpha.12

package/out/components/common/index.css

@@ -0,0 +1,8 @@
+:focus-visible, :focus[data-focus-method=key] {
+        outline: none;
+        box-shadow: var(--ktl-focus-outline);
+    }
+    :root {
+        --rs-h2-font-size-mobile: var(--rs-h2-font-size, 35px);
+        --rs-h2-line-height-mobile: var(--rs-h2-line-height, 42px);
+    }

package/out/components/common/index.js

@@ -0,0 +1 @@
+import './index.css';

package/out/components/footer/footer.js

@@ -1,5 +1,4 @@
 import React__default from 'react';
-import { useTheme } from '@rescui/ui-contexts';
 import { SocialList } from './social-list/social-list.js';
 import { NavList } from './nav/nav-list.js';
 import { Logo } from './logo/logo.js';
@@ -12,15 +11,11 @@ const Footer = ({
   className
 }) => {
   const textCn = useTextStyles();
-  const theme = useTheme();
   const linkClass = textCn('rs-link', {
-    hardness: 'hard',
-    mode: 'clear'
+    hardness: 'hard'
   });
   return React__default.createElement("footer", {
-    className: classNames(styles.footer, className, {
-      [styles.footerDarkTheme]: theme === 'dark'
-    }),
+    className: classNames(styles.footer, className),
     ref: forwardedRef
   }, React__default.createElement("div", {
     className: 'ktl-layout ktl-layout--center'
@@ -37,18 +32,18 @@ const Footer = ({
   }, React__default.createElement("div", {
     className: styles.motto
   }, "Supported and developed by\u00A0", React__default.createElement("a", {
-    className: classNames(linkClass, styles.underlinedLink),
+    className: classNames(linkClass),
     href: "https://www.jetbrains.com/",
     target: "_blank"
   }, "JetBrains"), "."), React__default.createElement("div", {
     className: styles.copyright
   }, "Kotlin\u2122 is\u00A0protected under the", ' ', React__default.createElement("a", {
-    className: classNames(linkClass, styles.underlinedLink),
+    className: classNames(linkClass),
     href: "https://kotlinlang.org/foundation/kotlin-foundation.html"
   }, "Kotlin\u00A0Foundation"), ' ', React__default.createElement("br", {
     className: styles.copyrightBreakLine
-  }), "and licensed under the", ' ', React__default.createElement("a", {
-    className: classNames(linkClass, styles.underlinedLink),
+  }), "and\u00A0licensed under the", ' ', React__default.createElement("a", {
+    className: classNames(linkClass),
     target: "_blank",
     href: "https://github.com/JetBrains/kotlin-web-site/blob/master/LICENSE"
   }, "Apache 2\u00A0license"), "."))));

package/out/components/footer/footer.module.pcss.js

@@ -1,7 +1,5 @@
 var styles = {
   "footer": "ktl-footer-module_footer_m67Up",
-  "footerDarkTheme": "ktl-footer-module_footer-dark-theme_YUAFI",
-  "underlinedLink": "ktl-footer-module_underlined-link_G0wkq",
   "socialListArea": "ktl-footer-module_social-list-area_bS3eE",
   "socialListTitle": "ktl-footer-module_social-list-title_HPzIP",
   "textArea": "ktl-footer-module_text-area_flccc",

package/out/components/footer/index.css

@@ -5,14 +5,14 @@
 }
 
   @media (max-width: 616px) {.ktl-social-list-module_social-list_K2Nqu {
-    -moz-column-gap: 16px;
-         column-gap: 16px
+    -moz-column-gap: var(--ktl-box-block-l);
+         column-gap: var(--ktl-box-block-l)
 }
   }
 
   @media (max-width: 472px) {.ktl-social-list-module_social-list_K2Nqu {
-    -moz-column-gap: 16px;
-         column-gap: 16px;
+    -moz-column-gap: var(--ktl-box-block-l);
+         column-gap: var(--ktl-box-block-l);
     grid-template-columns: repeat(3, -webkit-min-content);
     grid-template-columns: repeat(3, min-content);
     grid-auto-flow: row
@@ -40,7 +40,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {
@@ -71,13 +71,13 @@
 }
 
   @media (max-width: 616px) {.ktl-nav-list-module_nav-list_-k4np {
-    padding: 24px 0;
-    margin: 24px 0 0;
+    padding: var(--ktl-box-section-s) 0;
+    margin: var(--ktl-box-section-s) 0 0;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 24px
+    gap: var(--ktl-box-section-s)
 }
   }
 
@@ -105,7 +105,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {
@@ -126,7 +126,7 @@
   padding-right: 12px;
   margin-right: 12px;
   margin-top: 12px;
-  line-height: 32px;
+  line-height: var(--ktl-box-section-s);
   position: relative;
 }
 
@@ -136,9 +136,9 @@
   right: 0;
   top: 50%;
   width: 1px;
-  height: 12px;
+  height: var(--ktl-box-section-s);
   transform: translateY(-50%);
-  background-color: rgba(39, 40, 44, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 .ktl-nav-item-module_nav-item_isoyN:last-child {
@@ -190,7 +190,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {
@@ -208,56 +208,43 @@
 }
 
 .ktl-footer-module_footer_m67Up {
-  background: var(--ktl-light-grey);
-  padding: 72px 0;
+  background: var(--ktl-dark-100);
+  padding: var(--ktl-box-page-m) 0;
   min-width: 320px;
   box-sizing: border-box;
-  font-family: var(--ktl-font-family-inter);
   text-rendering:optimizeLegibility;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
 }
 
-.ktl-footer-module_footer-dark-theme_YUAFI {
-  background: var(--ktl-dark-100);
-}
-
-.ktl-footer-module_footer-dark-theme_YUAFI .ktl-footer-module_underlined-link_G0wkq {
-    border-color: inherit;
-  }
-
 .ktl-footer-module_social-list-area_bS3eE {
   display: flex;
   align-items: center;
 }
 
 .ktl-footer-module_social-list-title_HPzIP {
-  margin-right: 8px;
+  margin-right: var(--ktl-box-block-m);
 }
 
 .ktl-footer-module_text-area_flccc {
-  margin-top: 8px;
+  margin-top: var(--ktl-box-block-m);
 }
 
 .ktl-footer-module_logo-area_SsNTa {
-  margin-top: 72px;
+  margin-top: var(--ktl-box-page-m);
 }
 
 .ktl-footer-module_copyright_XjtgY {
   display: inline;
 }
 
-.ktl-footer-module_underlined-link_G0wkq {
-  border-color: var(--ktl-light-dark-20);
-}
-
 .ktl-footer-module_copyrightBreakLine_0hI7E {
   display: none;
 }
 
 @media (max-width: 808px) {
   .ktl-footer-module_footer_m67Up {
-    padding: 48px 0;
+    padding: var(--ktl-box-section-l) 0;
   }
 }
 
@@ -267,7 +254,7 @@
   }
 
   .ktl-footer-module_logo-area_SsNTa {
-    margin-top: 24px;
+    margin-top: var(--ktl-box-section-s);
   }
 
   .ktl-footer-module_copyrightBreakLine_0hI7E {
@@ -277,7 +264,11 @@
 
 @media (max-width: 472px) {
   .ktl-footer-module_footer_m67Up {
-    padding: 24px 0;
+    padding: var(--ktl-box-section-s) 0 var(--ktl-box-section-l);
+  }
+
+  .ktl-footer-module_copyrightBreakLine_0hI7E {
+    display: none;
   }
 }
 .ktl-layout {

package/out/components/footer/social-list/social-item/social-item.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { useTheme } from '@rescui/ui-contexts';
 import classNames from 'classnames';
 import styles from './social-item.module.pcss.js';
-import { Button } from '@rescui/button';
+import Button from '@rescui/button';
 
 const SocialItem = ({
   socialNetwork

package/out/components/header/index.css

@@ -41,7 +41,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {
@@ -106,7 +106,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {
@@ -270,7 +270,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {
@@ -748,7 +748,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {
@@ -826,7 +826,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {
@@ -899,7 +899,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {

package/out/components/nav-item/index.css

@@ -0,0 +1,52 @@
+.ktl-nav-item-module_navItem_gRy22 {
+    padding: 0 12px;
+    height: 52px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    box-sizing: border-box;
+    border: 0;
+    background: none;
+    color: #ffffff;
+}
+
+    .ktl-nav-item-module_navItem_gRy22:hover {
+        background: rgba(255, 255, 255, 0.10);
+    }
+
+    .ktl-nav-item-module_navItem_gRy22:active {
+        box-shadow: #8979ff 0 0 0 4px;
+        outline: none
+    }
+
+.ktl-nav-item-module_rightIcon_XlxMF {
+    flex-direction: row-reverse;
+}
+
+.ktl-nav-item-module_navItemActive_gI8Nv::after {
+        content: '';
+        width: 100%;
+        height: 2px;
+        background: #ffffff;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+    }
+
+.ktl-nav-item-module_title_9VXwr {
+    display: block;
+}
+
+.ktl-nav-item-module_titleWithIcon_CVqpS {
+    margin-left: 8px;
+}
+
+.ktl-nav-item-module_titleWithIconRight_FwEnm {
+    margin-left: 0;
+    margin-right: 8px;
+}
+
+.ktl-nav-item-module_titleWithoutIcon_XgnMl {
+    margin: 0;
+}

package/out/components/nav-item/index.js

@@ -0,0 +1,34 @@
+import './index.css';
+import React from 'react';
+import cn from 'classnames';
+import styles from './nav-item.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+
+const NavItem = ({
+  children,
+  icon,
+  active,
+  iconPosition,
+  onClick
+}) => {
+  const textCn = useTextStyles();
+  const navItemClass = cn(styles.navItem, {
+    [styles.navItemActive]: active,
+    [styles.rightIcon]: iconPosition === 'right'
+  });
+  const textStyles = cn(styles.title, {
+    [styles.titleWithIcon]: icon,
+    [styles.titleWithIconRight]: iconPosition === 'right',
+    [styles.titleWithoutIcon]: !children
+  });
+  return React.createElement("button", {
+    className: navItemClass,
+    onClick: onClick
+  }, icon ? icon : null, React.createElement("div", {
+    className: cn(textCn('rs-text-2', {
+      hardness: 'hard'
+    }), textStyles)
+  }, children));
+};
+
+export { NavItem, NavItem as default };

package/out/components/nav-item/nav-item.module.pcss.js

@@ -0,0 +1,10 @@
+var styles = {
+  "navItem": "ktl-nav-item-module_navItem_gRy22",
+  "rightIcon": "ktl-nav-item-module_rightIcon_XlxMF",
+  "navItemActive": "ktl-nav-item-module_navItemActive_gI8Nv",
+  "title": "ktl-nav-item-module_title_9VXwr",
+  "titleWithIcon": "ktl-nav-item-module_titleWithIcon_CVqpS",
+  "titleWithIconRight": "ktl-nav-item-module_titleWithIconRight_FwEnm",
+  "titleWithoutIcon": "ktl-nav-item-module_titleWithoutIcon_XgnMl"
+};
+export { styles as default };

package/out/components/sidebar/index.css

@@ -0,0 +1,108 @@
+.ktl-sidebar-module_popup_bidR1 {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 910;
+
+    --ktf-header-animation-timing: 250ms;
+    --ktf-header-animation-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ktl-sidebar-module_popup_bidR1::before {
+    display: block;
+    content: '';
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+
+    visibility: visible;
+    -webkit-backdrop-filter: blur(4px);
+            backdrop-filter: blur(4px);
+
+    transition: background-color var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
+      visibility var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
+      -webkit-backdrop-filter var(--ktf-header-animation-function) var(--ktf-header-animation-timing);
+
+    transition: background-color var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
+      visibility var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
+      backdrop-filter var(--ktf-header-animation-function) var(--ktf-header-animation-timing);
+
+    transition: background-color var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
+      visibility var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
+      backdrop-filter var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
+      -webkit-backdrop-filter var(--ktf-header-animation-function) var(--ktf-header-animation-timing);
+    will-change: background-color, visible;
+}
+
+.ktl-sidebar-module_popup_bidR1.ktl-sidebar-module_tabletMode_vcf0T {
+        --ktl-sidebar-width: 320px;
+    }
+
+.ktl-sidebar-module_popup_bidR1.ktl-sidebar-module_mobileMode_yCmFY {
+        --ktl-sidebar-width:  100%;
+    }
+
+@media (min-width: 473px) {
+
+.ktl-sidebar-module_popup_bidR1:not(:is(.ktl-sidebar-module_tabletMode_vcf0T, .ktl-sidebar-module_mobileMode_yCmFY)) {
+            --ktl-sidebar-width: 320px
+    }
+        }
+
+@media (max-width: 472px) {
+
+.ktl-sidebar-module_popup_bidR1:not(:is(.ktl-sidebar-module_tabletMode_vcf0T, .ktl-sidebar-module_mobileMode_yCmFY)) {
+            --ktl-sidebar-width: 100%
+    }
+        }
+
+.ktl-sidebar-module_content_SzdiT {
+    margin-left: auto;
+    height: 100%;
+    max-width: 100%;
+    width: var(--ktl-sidebar-width, auto);
+}
+
+.ktl-sidebar-module_dark_GNaUl::before {
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+
+.ktl-sidebar-module_dark_GNaUl > .ktl-sidebar-module_content_SzdiT {
+        background-color: var(--ktl-dark-100);
+    }
+
+.ktl-sidebar-module_light_OnGcf::before {
+        background-color: rgba(0, 0, 0, 0.62);
+    }
+
+.ktl-sidebar-module_light_OnGcf > .ktl-sidebar-module_content_SzdiT {
+        background-color: #fff;
+    }
+
+.ktl-sidebar-module_popup_bidR1 > .ktl-sidebar-module_content_SzdiT {
+    transform: translateX(0);
+
+    transition: transform var(--ktf-header-animation-function) var(--ktf-header-animation-timing),
+    visibility var(--ktf-header-animation-function) var(--ktf-header-animation-timing);
+    will-change: transform;
+}
+
+.ktl-sidebar-module_close_lN33m {
+    --ktf-header-animation-timing: 300ms;
+    pointer-events: none;
+}
+
+.ktl-sidebar-module_close_lN33m::before {
+        background: rgba(0, 0, 0, 0);
+        visibility: hidden;
+    }
+
+.ktl-sidebar-module_close_lN33m > .ktl-sidebar-module_content_SzdiT {
+        transform: translateX(100%);
+        visibility: hidden;
+    }

package/out/components/sidebar/index.js

@@ -0,0 +1,2 @@
+import './index.css';
+export { Sidebar, SidebarContext, useSidebarContext } from './sidebar.js';

package/out/components/sidebar/sidebar.js

@@ -0,0 +1,50 @@
+import React, { createContext, useContext, useRef, useCallback } from 'react';
+import cn from 'classnames';
+import { RemoveScrollBar } from 'react-remove-scroll-bar';
+import { useTheme } from '@rescui/ui-contexts';
+import styles from './sidebar.module.css.js';
+const SidebarContext = createContext({});
+
+function useSidebarContext() {
+  return useContext(SidebarContext);
+}
+
+function Sidebar({
+  className,
+  classNameContent,
+  mode,
+  children,
+  isOpen,
+  onClose
+}) {
+  const ref = useRef(null);
+  const theme = useTheme();
+  const onToggleClick = useCallback(e => {
+    if (e.currentTarget == e.target) onClose();
+  }, [onClose]);
+  const classes = cn(className, styles.popup, styles[theme || 'light'], {
+    [styles.close]: !isOpen,
+    [styles[`${mode}Mode`]]: Boolean(mode && styles[`${mode}Mode`])
+  });
+  const disableProps = {};
+
+  if (!isOpen) {
+    disableProps.tabIndex = -1;
+    disableProps.role = 'none';
+  }
+
+  return React.createElement(SidebarContext.Provider, {
+    value: {
+      onClose
+    }
+  }, React.createElement("div", {
+    className: classes,
+    onClick: onToggleClick,
+    ...disableProps
+  }, isOpen && React.createElement(RemoveScrollBar, null), React.createElement("div", {
+    ref: ref,
+    className: cn(classNameContent, styles.content)
+  }, children)));
+}
+
+export { Sidebar, SidebarContext, useSidebarContext };

package/out/components/sidebar/sidebar.module.css.js

@@ -0,0 +1,10 @@
+var styles = {
+  "popup": "ktl-sidebar-module_popup_bidR1",
+  "tabletMode": "ktl-sidebar-module_tabletMode_vcf0T",
+  "mobileMode": "ktl-sidebar-module_mobileMode_yCmFY",
+  "content": "ktl-sidebar-module_content_SzdiT",
+  "dark": "ktl-sidebar-module_dark_GNaUl",
+  "light": "ktl-sidebar-module_light_OnGcf",
+  "close": "ktl-sidebar-module_close_lN33m"
+};
+export { styles as default };

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

@@ -0,0 +1,36 @@
+.ktl-popup-module_popup_b34tS {
+    display: flex;
+    flex-direction: column;
+}
+
+.ktl-popup-module_menu_wZMEB {
+    padding: 0;
+    margin: 0;
+}
+
+.ktl-menu-header-module_header_nm8jO {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: var(--ktl-box-block-l);
+    border-bottom: 1px solid transparent;
+    margin-bottom: var(--ktl-box-block-m);
+}
+
+.ktl-menu-header-module_light_3UtZR {
+    border-bottom-color: var(--ktl-divider-color);
+}
+
+.ktl-menu-header-module_dark_jdymL {
+    border-bottom-color: rgba(255, 255, 255, 0.30);
+}
+
+.ktl-menu-header-module_header_nm8jO > .ktl-menu-header-module_trigger_FbJ59 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 52px;
+    height: 52px;
+}

package/out/components/sidebar-menu/index.js

@@ -0,0 +1,3 @@
+import './index.css';
+export { SidebarMenu } from './sidebar-menu.js';
+export { SidebarMenuHeader } from './menu-header.js';

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import cn from 'classnames';
+import { useTheme } from '@rescui/ui-contexts';
+import { CloseIcon } from '@rescui/icons';
+import { Button } from '@rescui/button';
+import { useSidebarContext } from '@jetbrains/kotlin-web-site-ui/out/components/sidebar';
+import styles from './menu-header.module.css.js';
+
+function SidebarMenuHeader({
+  className,
+  children,
+  onClose
+}) {
+  const theme = useTheme();
+  const {
+    onClose: onCloseContext
+  } = useSidebarContext();
+  const close = onClose || onCloseContext;
+  return React.createElement("div", {
+    className: cn(styles[theme || 'light'], className, styles.header)
+  }, children, React.createElement(Button, {
+    "aria-label": "close menu",
+    mode: "clear",
+    className: styles.trigger,
+    onClick: close,
+    icon: React.createElement(CloseIcon, null)
+  }));
+}
+
+export { SidebarMenuHeader };

package/out/components/sidebar-menu/menu-header.module.css.js

@@ -0,0 +1,7 @@
+var styles = {
+  "header": "ktl-menu-header-module_header_nm8jO",
+  "light": "ktl-menu-header-module_light_3UtZR",
+  "dark": "ktl-menu-header-module_dark_jdymL",
+  "trigger": "ktl-menu-header-module_trigger_FbJ59"
+};
+export { styles as default };

package/out/components/sidebar-menu/menu-item.js

@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react';
+import { MenuItem } from '@rescui/menu';
+
+function SidebarMenuItem({
+  index,
+  isActive,
+  onClick,
+  ...props
+}) {
+  const handleClick = useCallback(e => {
+    if (onClick) onClick(e, index);
+  }, [onClick, index]);
+  return React.createElement(MenuItem, {
+    selected: isActive,
+    ...props,
+    onClick: handleClick
+  });
+}
+
+export { SidebarMenuItem };

package/out/components/sidebar-menu/popup.module.css.js

@@ -0,0 +1,5 @@
+var styles = {
+  "popup": "ktl-popup-module_popup_b34tS",
+  "menu": "ktl-popup-module_menu_wZMEB"
+};
+export { styles as default };

package/out/components/sidebar-menu/sidebar-menu.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import cn from 'classnames';
+import { Menu } from '@rescui/menu';
+import { Sidebar } from '@jetbrains/kotlin-web-site-ui/out/components/sidebar';
+import { SidebarMenuItem } from './menu-item.js';
+import styles from './popup.module.css.js';
+import '@rescui/ui-contexts';
+import '@rescui/icons';
+import '@rescui/button';
+
+function SidebarMenu({
+  className,
+  before,
+  activeIndex,
+  items,
+  onItemClick,
+  ...props
+}) {
+  return React.createElement(Sidebar, { ...props,
+    className: cn(className, styles.popup)
+  }, before, React.createElement(Menu, {
+    className: styles.menu
+  }, items.map((item, i) => React.createElement(SidebarMenuItem, {
+    key: i,
+    isActive: i === activeIndex,
+    index: i,
+    ...item,
+    onClick: onItemClick
+  }))));
+}
+
+export { SidebarMenu };

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

@@ -17,7 +17,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {
@@ -109,7 +109,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {

package/out/components/typography/index.css

@@ -17,7 +17,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {

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

@@ -17,7 +17,7 @@
   --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-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
 }
 
 :root {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.8.0-alpha.1",
+  "version": "4.8.0-alpha.12",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -48,15 +48,16 @@
     "@babel/preset-typescript": "^7.13.0",
     "@babel/register": "^7.11.5",
     "@react-hook/resize-observer": "^1.2.5",
-    "@rescui/button": "^0.9.4",
+    "@rescui/button": "^0.10.0",
     "@rescui/checkbox": "^0.1.0",
     "@rescui/focus-manager": "^0.1.1",
     "@rescui/icons": "^0.12.0",
     "@rescui/input": "^0.4.6",
+    "@rescui/menu": "^0.9.4",
     "@rescui/switcher": "^0.2.2",
     "@rescui/tooltip": "^0.1.2",
-    "@rescui/typography": "^0.7.3",
-    "@rescui/ui-contexts": "^0.1.3",
+    "@rescui/typography": "^0.11.0",
+    "@rescui/ui-contexts": "^0.4.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",