@jetbrains/kotlin-web-site-ui 4.8.0-alpha.0 → 4.8.0-alpha.10

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,44 +11,42 @@ const Footer = ({
   className
 }) => {
   const textCn = useTextStyles();
-  const theme = useTheme();
   const linkClass = textCn('rs-link', {
-    hardness: 'pale',
-    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'
   }, React__default.createElement("div", {
     className: styles.socialListArea
   }, React__default.createElement("div", {
-    className: classNames(textCn('rs-h4'), styles.socialListTitle)
-  }, "Stay in touch:"), React__default.createElement(SocialList, null)), React__default.createElement(NavList, {
-    className: styles.navListArea
+    className: classNames(textCn('rs-text-2'), styles.socialListTitle)
+  }, "Stay in touch:"), React__default.createElement(SocialList, null)), React__default.createElement(NavList, null), React__default.createElement(Logo, {
+    className: styles.logoArea
   }), React__default.createElement("div", {
     className: classNames(textCn('rs-text-3', {
-      hardness: 'pale'
+      hardness: 'hard'
     }), styles.textArea)
   }, React__default.createElement("div", {
+    className: styles.motto
+  }, "Supported and developed by\u00A0", React__default.createElement("a", {
+    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"), ' ', "and licensed under the", ' ', React__default.createElement("a", {
-    className: classNames(linkClass, styles.underlinedLink),
+  }, "Kotlin\u00A0Foundation"), ' ', React__default.createElement("br", {
+    className: styles.copyrightBreakLine
+  }), "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"), "."), ' ', React__default.createElement("div", {
-    className: styles.motto
-  }, "Supported and developed by\u00A0", React__default.createElement("a", {
-    className: classNames(linkClass, styles.underlinedLink),
-    href: "https://www.jetbrains.com/",
-    target: "_blank"
-  }, "JetBrains"))), React__default.createElement(Logo, {
-    className: styles.logoArea
-  }));
+  }, "Apache 2\u00A0license"), "."))));
 };
 
 export { Footer };

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

@@ -1,13 +1,10 @@
 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",
-  "navListArea": "ktl-footer-module_nav-list-area_7JJh0",
   "textArea": "ktl-footer-module_text-area_flccc",
   "logoArea": "ktl-footer-module_logo-area_SsNTa",
   "copyright": "ktl-footer-module_copyright_XjtgY",
-  "motto": "ktl-footer-module_motto_SiU1V"
+  "copyrightBreakLine": "ktl-footer-module_copyrightBreakLine_0hI7E"
 };
 export { styles as default };

package/out/components/footer/index.css

@@ -1,19 +1,26 @@
 .ktl-social-list-module_social-list_K2Nqu {
   display: grid;
-  -moz-column-gap: 18px;
-       column-gap: 18px;
   grid-auto-flow: column;
   justify-content: start;
-  margin: -6px 0;
 }
 
-  @media (max-width: 480px) {
-    .ktl-social-list-module_social-list_K2Nqu {
-      -moz-column-gap: 8px;
-           column-gap: 8px;
-    }
+  @media (max-width: 616px) {.ktl-social-list-module_social-list_K2Nqu {
+    -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: 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
+}
   }
 
+
+
 :root {
   --ktl-light-grey: #f4f4f4;
   --ktl-dark-100: rgba(39, 40, 44, 1);
@@ -33,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 {
@@ -51,33 +58,10 @@
 }
 
 .ktl-social-item-module_social-item_GpKEF {
-  width: 36px;
-  height: 36px;
-  padding: 6px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  border-radius: 50%;
-  transition: color var(--ktl-transition-xfast),
-    background-color var(--ktl-transition-xfast);
-  color: var(--ktl-icon-color-dark);
 }
 
-.ktl-social-item-module_social-item_GpKEF:hover,
-  .ktl-social-item-module_social-item_GpKEF :focus {
-    color: var(--ktl-icon-color-dark);
-    background: rgba(39, 40, 44, 0.05);
-  }
-
-.ktl-social-item-module_social-item-dark-theme_rOJWT {
-  color: var(--ktl-color-white-light);
-}
-
-.ktl-social-item-module_social-item-dark-theme_rOJWT:hover, .ktl-social-item-module_social-item-dark-theme_rOJWT:focus {
-    color: var(--ktl-color-white-light);
-    background: rgba(255, 255, 255, 0.1);
-  }
 .ktl-nav-list-module_nav-list_-k4np {
   display: flex;
   flex-wrap: wrap;
@@ -86,6 +70,22 @@
   list-style: none;
 }
 
+  @media (max-width: 616px) {.ktl-nav-list-module_nav-list_-k4np {
+    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: var(--ktl-box-section-s)
+}
+  }
+
+  @media (max-width: 472px) {.ktl-nav-list-module_nav-list_-k4np {
+    grid-template-columns: 1fr
+}
+  }
+
 :root {
   --ktl-light-grey: #f4f4f4;
   --ktl-dark-100: rgba(39, 40, 44, 1);
@@ -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 {
@@ -125,7 +125,8 @@
 .ktl-nav-item-module_nav-item_isoyN {
   padding-right: 12px;
   margin-right: 12px;
-  line-height: 32px;
+  margin-top: 12px;
+  line-height: var(--ktl-box-section-s);
   position: relative;
 }
 
@@ -135,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.5);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 .ktl-nav-item-module_nav-item_isoyN:last-child {
@@ -146,18 +147,30 @@
 }
 
 .ktl-nav-item-module_nav-item-dark-theme_FijdH:not(:last-child)::after {
-    background-color: rgba(255, 255, 255, 0.50)
+    background-color: rgba(255, 255, 255, 0.2)
   }
 
-@media (min-width: 640px) {
+@media (max-width: 616px) {
   .ktl-nav-item-module_nav-item_isoyN {
-    line-height: 1.5;
+    margin: 0;
+    padding: 0;
   }
+
+    .ktl-nav-item-module_nav-item_isoyN:not(:last-child)::after {
+      display: none;
+    }
 }
 .ktl-logo-module_link_bNecp {
   text-decoration: none;
+  height: 60px;
+  width: 60px;
+  display: block;
 }
 
+  .ktl-logo-module_link_bNecp:hover {
+    text-decoration: none;
+  }
+
 :root {
   --ktl-light-grey: #f4f4f4;
   --ktl-dark-100: rgba(39, 40, 44, 1);
@@ -177,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 {
@@ -195,96 +208,123 @@
 }
 
 .ktl-footer-module_footer_m67Up {
-  background: var(--ktl-light-grey);
-  padding: 32px 16px 16px;
+  background: var(--ktl-dark-100);
+  padding: var(--ktl-box-page-m) 0;
   min-width: 320px;
   box-sizing: border-box;
-  display: grid;
-  grid-template-columns: auto 75px;
-  grid-template-rows: auto;
-  grid-template-areas:
-    'social-list social-list'
-    'nav-list nav-list'
-    'text logo';
-  grid-column-gap: 16px;
-  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_footer_m67Up :focus-visible, .ktl-footer-module_footer_m67Up :focus[data-focus-method=key] {
+    outline: none;
+    box-shadow: var(--ktl-focus-outline);
   }
 
 .ktl-footer-module_social-list-area_bS3eE {
-  grid-area: social-list;
+  display: flex;
+  align-items: center;
 }
 
 .ktl-footer-module_social-list-title_HPzIP {
-  margin-bottom: 8px;
-}
-
-.ktl-footer-module_nav-list-area_7JJh0 {
-  grid-area: nav-list;
-  margin: 24px 0 32px;
+  margin-right: var(--ktl-box-block-m);
 }
 
 .ktl-footer-module_text-area_flccc {
-  grid-area: text;
+  margin-top: var(--ktl-box-block-m);
 }
 
 .ktl-footer-module_logo-area_SsNTa {
-  grid-area: logo;
+  margin-top: var(--ktl-box-page-m);
 }
 
 .ktl-footer-module_copyright_XjtgY {
   display: inline;
 }
 
-.ktl-footer-module_motto_SiU1V {
-  display: inline;
-}
-
-.ktl-footer-module_underlined-link_G0wkq {
-  border-color: var(--ktl-light-dark-20);
+.ktl-footer-module_copyrightBreakLine_0hI7E {
+  display: none;
 }
 
-@media (min-width: 641px) {
+@media (max-width: 808px) {
   .ktl-footer-module_footer_m67Up {
-    padding: 32px;
-    grid-template-columns: auto 60px;
-    grid-template-areas:
-      'social-list logo'
-      'nav-list logo'
-      'text text';
+    padding: var(--ktl-box-section-l) 0;
   }
+}
 
-  .ktl-footer-module_text-area_flccc {
-    display: flex;
-    justify-content: space-between;
+@media (max-width: 616px) {
+  .ktl-footer-module_social-list-area_bS3eE {
+    display: block;
   }
 
-  .ktl-footer-module_motto_SiU1V {
-    margin-left: 16px;
-    text-align: right;
+  .ktl-footer-module_logo-area_SsNTa {
+    margin-top: var(--ktl-box-section-s);
   }
 
-  .ktl-footer-module_social-list-area_bS3eE {
-    display: flex;
-    align-items: center;
+  .ktl-footer-module_copyrightBreakLine_0hI7E {
+    display: inline;
   }
+}
 
-  .ktl-footer-module_social-list-title_HPzIP {
-    margin-bottom: 0;
-    margin-right: 24px;
+@media (max-width: 472px) {
+  .ktl-footer-module_footer_m67Up {
+    padding: var(--ktl-box-section-s) 0 var(--ktl-box-section-l);
   }
 
-  .ktl-footer-module_nav-list-area_7JJh0 {
-    margin: 16px 0;
+  .ktl-footer-module_copyrightBreakLine_0hI7E {
+    display: none;
   }
 }
+.ktl-layout {
+        --ktl-layout-spacing: 72px;
+        --ktl-layout-width: 1144px;
+    }
+
+        @media (max-width: 1190px) {.ktl-layout {
+            --ktl-layout-width: 952px;
+    }
+        }
+
+        @media (max-width: 1000px) {.ktl-layout {
+            --ktl-layout-spacing: 48px;
+            --ktl-layout-width: 760px;
+    }
+        }
+
+        @media (max-width: 808px) {.ktl-layout {
+            --ktl-layout-width: 568px;
+    }
+        }
+
+        @media (max-width: 616px) {.ktl-layout {
+            --ktl-layout-width: 424px;
+    }
+        }
+
+        @media (max-width: 472px) {.ktl-layout {
+            --ktl-layout-width: 328px;
+    }
+        }
+
+        @media (max-width: 374px) {.ktl-layout {
+            --ktl-layout-width: 272px;
+    }
+        }
+
+        .ktl-layout {
+
+        box-sizing: border-box;
+        width: var(--ktl-layout-width);
+
+        transition: width 200ms;
+        will-change: width;
+}
+    .ktl-layout--center {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .ktl-layout--spacing {
+        margin-top: var(--ktl-layout-spacing);
+        margin-bottom: var(--ktl-layout-spacing);
+    }

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

@@ -18,7 +18,7 @@ const NavItem = ({
     href: data.url,
     title: data.title,
     className: classNames(textCn('rs-link', {
-      hardness: 'average',
+      hardness: 'hard',
       mode: 'clear'
     }))
   }, data.title));

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

@@ -1,38 +1,33 @@
-import SvgGithubLogo from './svg/github-logo.svg.js';
-import SvgRedditLogo from './svg/reddit-logo.svg.js';
-import SvgSlackLogo from './svg/slack-logo.svg.js';
-import SvgStackoverflowLogo from './svg/stackoverflow-logo.svg.js';
-import SvgTwitterLogo from './svg/twitter-logo.svg.js';
-import SvgYoutubeLogo from './svg/youtube-logo.svg.js';
+import { GitHubIcon, TwitterIcon, SlackIcon, RedditIcon, StackOverflowIcon, YoutubeIcon } from '@rescui/icons';
 const socialList = [{
   url: 'https://github.com/JetBrains/kotlin',
   title: 'Kotlin on GitHub',
   logoAlt: 'GitHub logo',
-  icon: SvgGithubLogo
+  icon: GitHubIcon
 }, {
   url: 'https://twitter.com/kotlin',
   title: 'Kotlin on Twitter',
   logoAlt: 'Twitter logo',
-  icon: SvgTwitterLogo
+  icon: TwitterIcon
 }, {
   url: 'https://surveys.jetbrains.com/s3/kotlin-slack-sign-up',
   title: 'Kotlin Slack',
   logoAlt: 'Slack logo',
-  icon: SvgSlackLogo
+  icon: SlackIcon
 }, {
   url: 'https://www.reddit.com/r/Kotlin/',
   title: 'Kotlin on Reddit',
   logoAlt: 'Reddit logo',
-  icon: SvgRedditLogo
+  icon: RedditIcon
 }, {
   url: 'https://stackoverflow.com/questions/tagged/kotlin',
   title: 'Kotlin on Stack Overflow',
   logoAlt: 'Stack Overflow logo',
-  icon: SvgStackoverflowLogo
+  icon: StackOverflowIcon
 }, {
   url: 'https://www.youtube.com/channel/UCP7uiEZIqci43m22KDl0sNw',
   title: 'Kotlin on YouTube',
   logoAlt: 'YouTube logo',
-  icon: SvgYoutubeLogo
+  icon: YoutubeIcon
 }];
 export { socialList };

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

@@ -2,20 +2,24 @@ 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';
 
 const SocialItem = ({
   socialNetwork
 }) => {
   const SocialIcon = socialNetwork.icon;
   const theme = useTheme();
-  return React__default.createElement("a", {
+  return React__default.createElement(Button, {
+    mode: 'clear',
+    size: 'l',
     target: "_blank",
+    href: socialNetwork.url,
+    title: socialNetwork.title,
     className: classNames(styles.socialItem, {
       [styles.socialItemDarkTheme]: theme === 'dark'
     }),
-    href: socialNetwork.url,
-    title: socialNetwork.title
-  }, React__default.createElement(SocialIcon, null));
+    icon: React__default.createElement(SocialIcon, null)
+  });
 };
 
 export { SocialItem };

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

@@ -1,5 +1,4 @@
 var styles = {
-  "socialItem": "ktl-social-item-module_social-item_GpKEF",
-  "socialItemDarkTheme": "ktl-social-item-module_social-item-dark-theme_rOJWT"
+  "socialItem": "ktl-social-item-module_social-item_GpKEF"
 };
 export { styles as default };

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/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.0",
+  "version": "4.8.0-alpha.10",
   "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.2.1",
+    "@rescui/button": "^0.10.0",
     "@rescui/checkbox": "^0.1.0",
     "@rescui/focus-manager": "^0.1.1",
-    "@rescui/icons": "^0.8.2",
+    "@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",

package/out/components/footer/social-list/svg/github-logo.svg.js

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-var _path;
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const SvgGithubLogo = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 18,
-  height: 18,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M17.9 9.2a8.94 8.94 0 0 1-6.4 8.6.392.392 0 0 1-.4-.4v-3a1.58 1.58 0 0 0-.5-1.2 3.734 3.734 0 0 0 3.9-3.4 4.244 4.244 0 0 0-.9-3.5c.29-.79.217-1.669-.2-2.4a7.24 7.24 0 0 0-2.4.9c-1.44-.4-2.96-.4-4.4 0a4.62 4.62 0 0 0-2.3-.9h-.1A2.75 2.75 0 0 0 4 6.3a4.075 4.075 0 0 0-.9 3.5A3.81 3.81 0 0 0 7 13.2c-.198.148-.34.36-.4.6a2.638 2.638 0 0 0-.1.7 1.943 1.943 0 0 1-2.2-.5c-.5-.8-.9-1.2-1.4-1.3-.5-.1-.6.2-.6.2.079.26.26.476.5.6.387.216.674.575.8 1a1.827 1.827 0 0 0 1.2 1.2 3.915 3.915 0 0 0 1.9 0v1.7a.297.297 0 0 1-.4.3A8.82 8.82 0 0 1 0 9.2a8.95 8.95 0 0 1 17.9 0Z",
-  fill: "currentColor"
-})));
-
-export { SvgGithubLogo as default };

package/out/components/footer/social-list/svg/reddit-logo.svg.js

@@ -1,33 +0,0 @@
-import * as React from 'react';
-
-var _path;
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const SvgRedditLogo = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 20,
-  height: 18,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  d: "M20 9.068a2.183 2.183 0 0 0-2.186-2.186 2.2 2.2 0 0 0-1.524.61c-1.505-1.076-3.566-1.775-5.86-1.865L11.434.932l3.261.699a1.559 1.559 0 0 0 3.119-.072A1.56 1.56 0 0 0 16.254 0c-.609 0-1.147.358-1.397.878l-3.638-.77a.381.381 0 0 0-.287.053.347.347 0 0 0-.161.251L9.659 5.645c-2.33.072-4.426.77-5.95 1.864a2.2 2.2 0 0 0-1.523-.61 2.183 2.183 0 0 0-.896 4.176c-.036.22-.054.441-.053.664 0 3.368 3.924 6.11 8.763 6.11s8.764-2.723 8.764-6.11c0-.223-.018-.444-.054-.664A2.208 2.208 0 0 0 20 9.069Zm-15.018 1.56a1.56 1.56 0 0 1 3.118 0c0 .86-.698 1.559-1.559 1.559-.86.017-1.559-.7-1.559-1.56Zm8.728 4.139c-1.076 1.075-3.119 1.147-3.71 1.147-.61 0-2.652-.09-3.71-1.147a.4.4 0 0 1 0-.573.4.4 0 0 1 .574 0c.68.68 2.115.913 3.136.913 1.022 0 2.473-.232 3.136-.913a.401.401 0 0 1 .574 0 .436.436 0 0 1 0 .573Zm-.287-2.563a1.56 1.56 0 0 1 0-3.118c.86 0 1.56.699 1.56 1.56 0 .841-.7 1.558-1.56 1.558Z",
-  fill: "currentColor"
-})));
-
-export { SvgRedditLogo as default };

package/out/components/footer/social-list/svg/slack-logo.svg.js

@@ -1,33 +0,0 @@
-import * as React from 'react';
-
-var _path;
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const SvgSlackLogo = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 18,
-  height: 18,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  d: "M6.63 9.49a1.895 1.895 0 0 0-1.89 1.89v4.73a1.89 1.89 0 1 0 3.78 0v-4.73a1.895 1.895 0 0 0-1.89-1.89ZM.01 11.38a1.89 1.89 0 1 0 3.78 0V9.49H1.91a1.897 1.897 0 0 0-1.9 1.89ZM6.63 0a1.89 1.89 0 1 0 0 3.78h1.89v-1.9A1.886 1.886 0 0 0 6.63 0ZM1.89 8.53h4.74a1.89 1.89 0 1 0 0-3.78H1.89a1.89 1.89 0 0 0 0 3.78Zm14.2-3.79a1.895 1.895 0 0 0-1.89 1.89v1.89h1.89a1.89 1.89 0 1 0 0-3.78ZM9.48 1.89v4.74a1.89 1.89 0 1 0 3.78 0V1.89a1.89 1.89 0 1 0-3.78 0Zm3.78 14.22a1.895 1.895 0 0 0-1.89-1.89H9.48v1.89a1.89 1.89 0 1 0 3.78 0Zm2.85-6.62h-4.74a1.89 1.89 0 1 0 0 3.78h4.74a1.89 1.89 0 1 0 0-3.78Z",
-  fill: "currentColor"
-})));
-
-export { SvgSlackLogo as default };

package/out/components/footer/social-list/svg/stackoverflow-logo.svg.js

@@ -1,36 +0,0 @@
-import * as React from 'react';
-
-var _path, _path2;
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const SvgStackoverflowLogo = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 16,
-  height: 19,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  d: "M13.527 17.27V12.19h1.685v6.764H0v-6.763h1.685v5.078h11.842Z",
-  fill: "currentColor"
-})), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-  d: "m3.546 11.71 8.274 1.73.35-1.664-8.274-1.73-.35 1.664ZM4.64 7.77l7.661 3.568.7-1.532-7.66-3.59-.7 1.554Zm2.123-3.765 6.501 5.407 1.073-1.292-6.501-5.406-1.073 1.291ZM10.966 0 9.609 1.007l5.034 6.785L16 6.785 10.966 0ZM3.37 15.562h8.448v-1.685H3.371v1.685Z",
-  fill: "currentColor"
-})));
-
-export { SvgStackoverflowLogo as default };

package/out/components/footer/social-list/svg/twitter-logo.svg.js

@@ -1,33 +0,0 @@
-import * as React from 'react';
-
-var _path;
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const SvgTwitterLogo = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 20,
-  height: 17,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  d: "M6.29 16.25A11.59 11.59 0 0 0 18 4.58v-.53a8.3 8.3 0 0 0 2-2.13 8.36 8.36 0 0 1-2.36.65A4.16 4.16 0 0 0 19.45.3a8.19 8.19 0 0 1-2.61 1 4.11 4.11 0 0 0-7 3.75A11.7 11.7 0 0 1 1.39.75a4.11 4.11 0 0 0 1.27 5.48A4.06 4.06 0 0 1 .8 5.71a4.11 4.11 0 0 0 3.29 4 4.13 4.13 0 0 1-1.85.07 4.12 4.12 0 0 0 3.83 2.85A8.25 8.25 0 0 1 1 14.47a7.94 7.94 0 0 1-1-.06 11.69 11.69 0 0 0 6.29 1.84Z",
-  fill: "currentColor"
-})));
-
-export { SvgTwitterLogo as default };

package/out/components/footer/social-list/svg/youtube-logo.svg.js

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-var _path;
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-const SvgYoutubeLogo = props => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 24,
-  height: 24,
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M21.005 5.617c.43.633.702 1.36.795 2.119.124 1.146.191 2.299.2 3.452v1.618a34.375 34.375 0 0 1-.2 3.454 4.808 4.808 0 0 1-.795 2.116 2.772 2.772 0 0 1-2.003.904c-2.8.215-7.002.222-7.002.222s-5.2-.05-6.8-.214a3.27 3.27 0 0 1-2.205-.912 4.8 4.8 0 0 1-.795-2.117 34.354 34.354 0 0 1-.2-3.453v-1.618c.009-1.154.075-2.306.2-3.452.093-.76.365-1.486.795-2.12a2.76 2.76 0 0 1 2.003-.901c2.799-.217 6.997-.217 6.997-.217h.01s4.198 0 6.997.217a2.76 2.76 0 0 1 2.003.902ZM15.755 12 9.501 8.249v7.502L15.754 12Z",
-  fill: "currentColor"
-})));
-
-export { SvgYoutubeLogo as default };

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

@@ -1,46 +0,0 @@
-.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_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

@@ -1,34 +0,0 @@
-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("div", {
-    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

@@ -1,10 +0,0 @@
-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 };