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

package/out/components/breakpoints/constants.js

@@ -1,4 +1,5 @@
 const POINTS = {
+  MS: 374,
   MM: 472,
   TS: 616,
   TM: 808,

package/out/components/breakpoints/hooks.js

@@ -1,6 +1,10 @@
 import { useMedia } from 'the-platform/useMedia';
 import { BREAKPOINTS_MAX_MEDIA } from './constants.js';
 
+function useMS() {
+  return useMedia(BREAKPOINTS_MAX_MEDIA.MS, false);
+}
+
 function useMM() {
   return useMedia(BREAKPOINTS_MAX_MEDIA.MM, false);
 }
@@ -25,4 +29,4 @@ function useDS() {
   return useMedia(BREAKPOINTS_MAX_MEDIA.DS, false);
 }
 
-export { useDM, useDS, useMM, useTL, useTM, useTS };
+export { useDM, useDS, useMM, useMS, useTL, useTM, useTS };

package/out/components/breakpoints/index.js

@@ -1,2 +1,2 @@
 export { BREAKPOINTS, BREAKPOINTS_KEYS, BREAKPOINTS_MAX_MEDIA, BREAKPOINTS_MIN_MEDIA } from './constants.js';
-export { useDM, useDS, useMM, useTL, useTM, useTS } from './hooks.js';
+export { useDM, useDS, useMM, useMS, useTL, useTM, useTS } from './hooks.js';

package/out/components/breakpoints/media.pcss

@@ -1,9 +1,11 @@
+@custom-media --ktl-ms-min (min-width: 375px);
 @custom-media --ktl-mm-min (min-width: 473px);
 @custom-media --ktl-ts-min (min-width: 617px);
 @custom-media --ktl-tm-min (min-width: 809px);
 @custom-media --ktl-tl-min (min-width: 1001px);
 @custom-media --ktl-ds-min (min-width: 1191px);
 @custom-media --ktl-dm-min (min-width: 1281px);
+@custom-media --ktl-ms (max-width: 374px);
 @custom-media --ktl-mm (max-width: 472px);
 @custom-media --ktl-ts (max-width: 616px);
 @custom-media --ktl-tm (max-width: 808px);

package/out/components/cta-block-v2/index.css

@@ -1,11 +1,5 @@
 .ktl-cta-block-module_wrapper_U-RIE {
-    background: radial-gradient(
-            89.53% 145.96% at 0.34% 100.79%,
-            #EF4857 0%,
-            #DE4970 17.58%,
-            #B44DB0 50.31%,
-            #7F52FF 97.03%
-    );
+    background: linear-gradient(90deg, #E54857 0%, #C811E2 50%, #7F52FF 100%);
 
     padding: var(--ktl-box-page-m) 0;
 }

package/out/components/footer/footer.js

@@ -45,7 +45,8 @@ const Footer = ({
   }), "and\u00A0licensed under the", ' ', React__default.createElement("a", {
     className: classNames(linkClass),
     target: "_blank",
-    href: "https://github.com/JetBrains/kotlin-web-site/blob/master/LICENSE"
+    href: "https://github.com/JetBrains/kotlin-web-site/blob/master/LICENSE",
+    rel: "noreferrer"
   }, "Apache 2\u00A0license"), "."))));
 };
 

package/out/components/footer/index.css

@@ -298,7 +298,12 @@
         }
 
         @media (max-width: 472px) {.ktl-layout {
-            --ktl-layout-width: 316px;
+            --ktl-layout-width: 328px;
+    }
+        }
+
+        @media (max-width: 374px) {.ktl-layout {
+            --ktl-layout-width: 272px;
     }
         }
 

package/out/components/footer/logo/logo.js

@@ -6,7 +6,9 @@ import styles from './logo.module.pcss.js';
 const Logo = props => React__default.createElement("a", {
   href: "https://jetbrains.com",
   target: "_blank",
-  className: classNames(props.className, styles.link)
+  className: classNames(props.className, styles.link),
+  "aria-label": "jetbrains.com link",
+  rel: "noreferrer"
 }, React__default.createElement(SvgJetbrainsLogo, null));
 
 export { Logo };

package/out/components/footer-compact/footer.js

@@ -0,0 +1,55 @@
+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';
+import classNames from 'classnames';
+import styles from './footer.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+
+const Footer = ({
+  forwardedRef,
+  className
+}) => {
+  const textCn = useTextStyles();
+  const theme = useTheme();
+  const linkClass = textCn('rs-link', {
+    hardness: 'pale',
+    mode: 'clear'
+  });
+  return React__default.createElement("footer", {
+    className: classNames(styles.footer, className, {
+      [styles.footerDarkTheme]: theme === 'dark'
+    }),
+    ref: forwardedRef
+  }, 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
+  }), React__default.createElement("div", {
+    className: classNames(textCn('rs-text-3', {
+      hardness: 'pale'
+    }), styles.textArea)
+  }, React__default.createElement("div", {
+    className: styles.copyright
+  }, "Kotlin\u2122 is\u00A0protected under the", ' ', React__default.createElement("a", {
+    className: classNames(linkClass, styles.underlinedLink),
+    href: "https://kotlinlang.org/foundation/kotlin-foundation.html"
+  }, "Kotlin\u00A0Foundation"), ' ', "and licensed under the", ' ', React__default.createElement("a", {
+    className: classNames(linkClass, styles.underlinedLink),
+    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
+  }));
+};
+
+export { Footer };

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

@@ -0,0 +1,13 @@
+var styles = {
+  "footer": "ktl-footer-module_footer_GHyqk",
+  "footerDarkTheme": "ktl-footer-module_footer-dark-theme_tSipV",
+  "underlinedLink": "ktl-footer-module_underlined-link_qo8UM",
+  "socialListArea": "ktl-footer-module_social-list-area_2f-iy",
+  "socialListTitle": "ktl-footer-module_social-list-title_X7tJv",
+  "navListArea": "ktl-footer-module_nav-list-area_Oblb8",
+  "textArea": "ktl-footer-module_text-area_T8lpL",
+  "logoArea": "ktl-footer-module_logo-area_zYm8W",
+  "copyright": "ktl-footer-module_copyright_tho-X",
+  "motto": "ktl-footer-module_motto_6KpB8"
+};
+export { styles as default };

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

@@ -0,0 +1,286 @@
+.ktl-social-list-module_social-list_in8ys {
+  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_in8ys {
+      -moz-column-gap: 8px;
+           column-gap: 8px;
+    }
+  }
+
+:root {
+  --ktl-light-grey: #f4f4f4;
+  --ktl-dark-100: rgba(39, 40, 44, 1);
+  --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
+  --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
+  --ktl-color-white-light: rgba(255, 255, 255, 0.75);
+  --ktl-transition-xfast: 100ms;
+  --ktl-transition-fast: 300ms;
+  --ktl-color-primary-light-theme: #7f52ff;
+  --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
+  --ktl-light-text-hard: rgba(39, 40, 44, 1);
+  --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
+  --ktl-divider-color: rgba(25, 25, 28, .2);
+  --ktl-overlay-z-index: 900;
+  --ktl-top-menu-z-index: 905;
+  --ktl-header-z-index: 906;
+  --ktl-mobile-dropdown-list-z-index: 907;
+  --ktl-header-height-mobile: 52px;
+  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+}
+
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
+.ktl-social-item-module_social-item_uHRCi {
+  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_uHRCi:hover,
+  .ktl-social-item-module_social-item_uHRCi :focus {
+    color: var(--ktl-icon-color-dark);
+    background: rgba(39, 40, 44, 0.05);
+  }
+
+.ktl-social-item-module_social-item-dark-theme_2OCoQ {
+  color: var(--ktl-color-white-light);
+}
+
+.ktl-social-item-module_social-item-dark-theme_2OCoQ:hover, .ktl-social-item-module_social-item-dark-theme_2OCoQ:focus {
+    color: var(--ktl-color-white-light);
+    background: rgba(255, 255, 255, 0.1);
+  }
+.ktl-nav-list-module_nav-list_6OvZp {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:root {
+  --ktl-light-grey: #f4f4f4;
+  --ktl-dark-100: rgba(39, 40, 44, 1);
+  --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
+  --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
+  --ktl-color-white-light: rgba(255, 255, 255, 0.75);
+  --ktl-transition-xfast: 100ms;
+  --ktl-transition-fast: 300ms;
+  --ktl-color-primary-light-theme: #7f52ff;
+  --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
+  --ktl-light-text-hard: rgba(39, 40, 44, 1);
+  --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
+  --ktl-divider-color: rgba(25, 25, 28, .2);
+  --ktl-overlay-z-index: 900;
+  --ktl-top-menu-z-index: 905;
+  --ktl-header-z-index: 906;
+  --ktl-mobile-dropdown-list-z-index: 907;
+  --ktl-header-height-mobile: 52px;
+  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+}
+
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
+.ktl-nav-item-module_nav-item_VvPZQ {
+  padding-right: 12px;
+  margin-right: 12px;
+  line-height: 32px;
+  position: relative;
+}
+
+.ktl-nav-item-module_nav-item_VvPZQ:not(:last-child)::after {
+  position: absolute;
+  content: '';
+  right: 0;
+  top: 50%;
+  width: 1px;
+  height: 12px;
+  transform: translateY(-50%);
+  background-color: rgba(39, 40, 44, 0.5);
+}
+
+.ktl-nav-item-module_nav-item_VvPZQ:last-child {
+  padding-right: 0;
+  margin-right: 0;
+}
+
+.ktl-nav-item-module_nav-item-dark-theme_cbYse:not(:last-child)::after {
+    background-color: rgba(255, 255, 255, 0.50)
+  }
+
+@media (min-width: 640px) {
+  .ktl-nav-item-module_nav-item_VvPZQ {
+    line-height: 1.5;
+  }
+}
+.ktl-logo-module_link_jGqR8 {
+  text-decoration: none;
+}
+
+:root {
+  --ktl-light-grey: #f4f4f4;
+  --ktl-dark-100: rgba(39, 40, 44, 1);
+  --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
+  --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
+  --ktl-color-white-light: rgba(255, 255, 255, 0.75);
+  --ktl-transition-xfast: 100ms;
+  --ktl-transition-fast: 300ms;
+  --ktl-color-primary-light-theme: #7f52ff;
+  --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
+  --ktl-light-text-hard: rgba(39, 40, 44, 1);
+  --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
+  --ktl-divider-color: rgba(25, 25, 28, .2);
+  --ktl-overlay-z-index: 900;
+  --ktl-top-menu-z-index: 905;
+  --ktl-header-z-index: 906;
+  --ktl-mobile-dropdown-list-z-index: 907;
+  --ktl-header-height-mobile: 52px;
+  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+}
+
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
+.ktl-footer-module_footer_GHyqk {
+  background: var(--ktl-light-grey);
+  padding: 32px 16px 16px;
+  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;
+}
+
+.ktl-footer-module_footer-dark-theme_tSipV {
+  background: var(--ktl-dark-100);
+}
+
+.ktl-footer-module_footer-dark-theme_tSipV .ktl-footer-module_underlined-link_qo8UM {
+    border-color: inherit;
+  }
+
+.ktl-footer-module_social-list-area_2f-iy {
+  grid-area: social-list;
+}
+
+.ktl-footer-module_social-list-title_X7tJv {
+  margin-bottom: 8px;
+}
+
+.ktl-footer-module_nav-list-area_Oblb8 {
+  grid-area: nav-list;
+  margin: 24px 0 32px;
+}
+
+.ktl-footer-module_text-area_T8lpL {
+  grid-area: text;
+}
+
+.ktl-footer-module_logo-area_zYm8W {
+  grid-area: logo;
+}
+
+.ktl-footer-module_copyright_tho-X {
+  display: inline;
+}
+
+.ktl-footer-module_motto_6KpB8 {
+  display: inline;
+}
+
+.ktl-footer-module_underlined-link_qo8UM {
+  border-color: var(--ktl-light-dark-20);
+}
+
+@media (min-width: 641px) {
+  .ktl-footer-module_footer_GHyqk {
+    padding: 32px;
+    grid-template-columns: auto 60px;
+    grid-template-areas:
+      'social-list logo'
+      'nav-list logo'
+      'text text';
+  }
+
+  .ktl-footer-module_text-area_T8lpL {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .ktl-footer-module_motto_6KpB8 {
+    margin-left: 16px;
+    text-align: right;
+  }
+
+  .ktl-footer-module_social-list-area_2f-iy {
+    display: flex;
+    align-items: center;
+  }
+
+  .ktl-footer-module_social-list-title_X7tJv {
+    margin-bottom: 0;
+    margin-right: 24px;
+  }
+
+  .ktl-footer-module_nav-list-area_Oblb8 {
+    margin: 16px 0;
+  }
+}

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

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

package/out/components/footer-compact/logo/jetbrains-logo.svg.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+var _path, _path2, _path3;
+
+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 SvgJetbrainsLogo = props => /*#__PURE__*/React.createElement("svg", _extends({
+  viewBox: "0 0 60 60",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M60 0H0v60h60V0Z",
+  fill: "#000"
+})), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+  d: "M27.648 48.706H5.178v3.765h22.47v-3.765ZM4.941 15.765l1.765-1.647c.47.588.941.941 1.53.941.705 0 1.058-.47 1.058-1.412V7.412H12v6.235c0 1.177-.353 2.118-.94 2.706-.59.588-1.53.941-2.707.941-1.765.118-2.706-.588-3.412-1.529ZM12.586 7.53h7.883v2.235h-5.177v1.529h4.706v2.118h-4.706v1.53h5.294v2.352h-7.882l-.118-9.765ZM24 9.882h-2.941V7.53h8.588v2.353h-2.941v7.412H24V9.882ZM5.177 19.53h5.06c1.175 0 2.117.352 2.705.823.353.353.588.941.588 1.647 0 1.177-.588 1.765-1.53 2.235 1.177.353 1.883 1.06 1.883 2.353 0 1.647-1.412 2.706-3.647 2.706H5.177V19.53Zm5.647 3.058c0-.588-.47-.823-1.176-.823H7.883v1.764H9.53c.824-.117 1.294-.352 1.294-.94Zm-.94 2.824H7.764v1.765h2.118c.824 0 1.294-.353 1.294-.942 0-.588-.47-.823-1.294-.823ZM14.352 19.53h4.588c1.53 0 2.471.352 3.177 1.058.588.589.823 1.294.823 2.236 0 1.53-.823 2.47-2 3.058l2.353 3.412h-3.058l-2-2.94h-1.177v2.94h-2.706V19.53Zm4.47 4.705c.942 0 1.413-.47 1.413-1.176 0-.824-.589-1.177-1.412-1.177h-1.765v2.353h1.765Z",
+  fill: "#fff"
+})), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
+  d: "M26.119 19.53h2.588l4.117 9.882h-2.94l-.707-1.765h-3.764l-.706 1.765h-2.824l4.236-9.883Zm2.352 5.882-1.058-2.706-1.06 2.706h2.118ZM33.177 19.53h2.706v9.764h-2.706V19.53ZM36.588 19.53h2.471l4 5.176v-5.177h2.706v9.765h-2.353L39.294 24v5.412h-2.706v-9.883ZM46 27.883l1.529-1.765c.941.824 2 1.177 3.176 1.177.706 0 1.177-.236 1.177-.706s-.353-.588-1.647-.941c-2.118-.47-3.647-1.06-3.647-3.06 0-1.764 1.411-3.176 3.764-3.176 1.648 0 2.942.47 4 1.294l-1.411 1.883c-.942-.588-1.883-.941-2.706-.941-.706 0-.941.235-.941.588 0 .47.353.588 1.647.941 2.235.47 3.647 1.177 3.647 3.059 0 2-1.53 3.176-4 3.176-1.765.118-3.412-.47-4.589-1.53Z",
+  fill: "#fff"
+})));
+
+export { SvgJetbrainsLogo as default };

package/out/components/footer-compact/logo/logo.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import SvgJetbrainsLogo from './jetbrains-logo.svg.js';
+import styles from './logo.module.pcss.js';
+
+const Logo = props => React__default.createElement("a", {
+  href: "https://jetbrains.com",
+  target: "_blank",
+  className: classNames(props.className, styles.link)
+}, React__default.createElement(SvgJetbrainsLogo, null));
+
+export { Logo };

package/out/components/footer-compact/logo/logo.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "link": "ktl-logo-module_link_jGqR8"
+};
+export { styles as default };

package/out/components/footer-compact/nav/nav-data.js

@@ -0,0 +1,30 @@
+const navList = [{
+  url: 'https://kotlinlang.org/docs/contribute.html',
+  title: 'Contributing to Kotlin'
+}, {
+  url: 'https://kotlinlang.org/docs/releases.html',
+  title: 'Releases'
+}, {
+  url: 'https://kotlinlang.org/assets/kotlin-media-kit.pdf',
+  title: 'Press Kit'
+}, {
+  url: 'https://kotlinlang.org/docs/security.html',
+  title: 'Security'
+}, {
+  url: 'https://blog.jetbrains.com/kotlin/',
+  title: 'Blog',
+  isTargetBlank: true
+}, {
+  url: 'https://youtrack.jetbrains.com/issues/KT',
+  title: 'Issue Tracker',
+  isTargetBlank: true
+}, {
+  url: 'https://resources.jetbrains.com/storage/products/kotlin/docs/kotlin_logos.zip',
+  title: 'Brand assets',
+  isTargetBlank: true
+}, {
+  url: 'https://www.jetbrains.com/careers/jobs/?team=Kotlin',
+  title: 'Careers',
+  isTargetBlank: true
+}];
+export { navList };

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

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import { useTheme } from '@rescui/ui-contexts';
+import classNames from 'classnames';
+import styles from './nav-item.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+
+const NavItem = ({
+  data
+}) => {
+  const textCn = useTextStyles();
+  const theme = useTheme();
+  return React__default.createElement("li", {
+    className: classNames(styles.navItem, textCn('rs-text-2'), {
+      [styles.navItemDarkTheme]: theme == 'dark'
+    })
+  }, React__default.createElement("a", {
+    target: data.isTargetBlank ? '_blank' : undefined,
+    href: data.url,
+    title: data.title,
+    className: classNames(textCn('rs-link', {
+      hardness: 'average',
+      mode: 'clear'
+    }))
+  }, data.title));
+};
+
+export { NavItem };

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

@@ -0,0 +1,5 @@
+var styles = {
+  "navItem": "ktl-nav-item-module_nav-item_VvPZQ",
+  "navItemDarkTheme": "ktl-nav-item-module_nav-item-dark-theme_cbYse"
+};
+export { styles as default };

package/out/components/footer-compact/nav/nav-list.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import styles from './nav-list.module.pcss.js';
+import { navList } from './nav-data.js';
+import { NavItem } from './nav-item.js';
+
+const NavList = props => React__default.createElement("nav", {
+  className: props.className
+}, React__default.createElement("ul", {
+  className: styles.navList
+}, navList.map(value => React__default.createElement(NavItem, {
+  key: value.url,
+  data: value
+}))));
+
+export { NavList };

package/out/components/footer-compact/nav/nav-list.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "navList": "ktl-nav-list-module_nav-list_6OvZp"
+};
+export { styles as default };

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

@@ -0,0 +1,38 @@
+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';
+const socialList = [{
+  url: 'https://github.com/JetBrains/kotlin',
+  title: 'Kotlin on GitHub',
+  logoAlt: 'GitHub logo',
+  icon: SvgGithubLogo
+}, {
+  url: 'https://twitter.com/kotlin',
+  title: 'Kotlin on Twitter',
+  logoAlt: 'Twitter logo',
+  icon: SvgTwitterLogo
+}, {
+  url: 'https://surveys.jetbrains.com/s3/kotlin-slack-sign-up',
+  title: 'Kotlin Slack',
+  logoAlt: 'Slack logo',
+  icon: SvgSlackLogo
+}, {
+  url: 'https://www.reddit.com/r/Kotlin/',
+  title: 'Kotlin on Reddit',
+  logoAlt: 'Reddit logo',
+  icon: SvgRedditLogo
+}, {
+  url: 'https://stackoverflow.com/questions/tagged/kotlin',
+  title: 'Kotlin on Stack Overflow',
+  logoAlt: 'Stack Overflow logo',
+  icon: SvgStackoverflowLogo
+}, {
+  url: 'https://www.youtube.com/channel/UCP7uiEZIqci43m22KDl0sNw',
+  title: 'Kotlin on YouTube',
+  logoAlt: 'YouTube logo',
+  icon: SvgYoutubeLogo
+}];
+export { socialList };

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

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { useTheme } from '@rescui/ui-contexts';
+import classNames from 'classnames';
+import styles from './social-item.module.pcss.js';
+
+const SocialItem = ({
+  socialNetwork
+}) => {
+  const SocialIcon = socialNetwork.icon;
+  const theme = useTheme();
+  return React__default.createElement("a", {
+    target: "_blank",
+    className: classNames(styles.socialItem, {
+      [styles.socialItemDarkTheme]: theme === 'dark'
+    }),
+    href: socialNetwork.url,
+    title: socialNetwork.title
+  }, React__default.createElement(SocialIcon, null));
+};
+
+export { SocialItem };

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

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

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

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import styles from './social-list.module.pcss.js';
+import { socialList } from './social-data.js';
+import { SocialItem } from './social-item/social-item.js';
+
+const SocialList = () => React__default.createElement("div", {
+  className: styles.socialList
+}, socialList.map(socialNetwork => React__default.createElement(SocialItem, {
+  key: socialNetwork.url,
+  socialNetwork: socialNetwork
+})));
+
+export { SocialList };

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

@@ -0,0 +1,4 @@
+var styles = {
+  "socialList": "ktl-social-list-module_social-list_in8ys"
+};
+export { styles as default };

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

@@ -0,0 +1,35 @@
+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-compact/social-list/svg/reddit-logo.svg.js

@@ -0,0 +1,33 @@
+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-compact/social-list/svg/slack-logo.svg.js

@@ -0,0 +1,33 @@
+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-compact/social-list/svg/stackoverflow-logo.svg.js

@@ -0,0 +1,36 @@
+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-compact/social-list/svg/twitter-logo.svg.js

@@ -0,0 +1,33 @@
+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: 24,
+  height: 24,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M13.317 10.775 19.146 4h-1.381l-5.061 5.883L8.662 4H4l6.112 8.896L4 20h1.381l5.344-6.212L14.994 20h4.662l-6.339-9.225zm-1.891 2.199-.62-.886L5.88 5.04H8l3.977 5.688.62.886 5.168 7.393h-2.121l-4.218-6.033z",
+  fill: "currentColor"
+})));
+
+export { SvgTwitterLogo as default };

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

@@ -0,0 +1,35 @@
+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/header/menu-popup/menu-popup.js

@@ -31,7 +31,9 @@ const MenuPopup = ({
   }, [isExpanded, headerRef]);
   const handleClick = useCallback(() => {
     if (navRef.current) {
-      isExpanded ? enableBodyScroll(navRef.current) : disableBodyScroll(navRef.current);
+      isExpanded ? enableBodyScroll(navRef.current) : disableBodyScroll(navRef.current, {
+        reserveScrollBarGap: true
+      });
     }
 
     setExpand(!isExpanded);

package/out/components/layout/index.css

@@ -25,7 +25,12 @@
         }
 
         @media (max-width: 472px) {.ktl-layout {
-            --ktl-layout-width: 316px;
+            --ktl-layout-width: 328px;
+    }
+        }
+
+        @media (max-width: 374px) {.ktl-layout {
+            --ktl-layout-width: 272px;
     }
         }
 

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

@@ -99,6 +99,14 @@
     background: var(--ktl-color-primary-light-theme);
   }
 
+.ktl-youtube-player-module_play-button_inversed_ENTdT {
+    background: #19191C;
+  }
+
+.ktl-youtube-player-module_play-button_inversed_ENTdT svg {
+      fill: #ffffff;
+    }
+
 .ktl-youtube-player-module_hide_w9Dr2 {
   display: none;
 }

package/out/components/youtube-player/youtube-player.js

@@ -10,6 +10,7 @@ var YoutubePlayButtonMode;
   YoutubePlayButtonMode[YoutubePlayButtonMode["White"] = 0] = "White";
   YoutubePlayButtonMode[YoutubePlayButtonMode["Black"] = 1] = "Black";
   YoutubePlayButtonMode[YoutubePlayButtonMode["Primary"] = 2] = "Primary";
+  YoutubePlayButtonMode[YoutubePlayButtonMode["Inversed"] = 3] = "Inversed";
 })(YoutubePlayButtonMode || (YoutubePlayButtonMode = {}));
 
 var YoutubePlayerMode;
@@ -128,11 +129,13 @@ const YoutubePlayer = ({
     className: styles.imagePreview
   }), React__default.createElement("button", {
     type: "button",
+    "aria-label": "Play video",
     className: classNames(styles.playButton, {
       [styles.hide]: showVideo && !videoLoading,
       [styles.playButtonWhite]: playButtonMode === YoutubePlayButtonMode.White,
       [styles.playButtonBlack]: playButtonMode === YoutubePlayButtonMode.Black,
-      [styles.playButtonPrimary]: playButtonMode === YoutubePlayButtonMode.Primary
+      [styles.playButtonPrimary]: playButtonMode === YoutubePlayButtonMode.Primary,
+      [styles.playButtonInversed]: playButtonMode === YoutubePlayButtonMode.Inversed
     })
   }, videoLoading ? React__default.createElement(SvgLoading24, {
     className: styles.iconLoading

package/out/components/youtube-player/youtube-player.module.pcss.js

@@ -7,6 +7,7 @@ var styles = {
   "playButtonWhite": "ktl-youtube-player-module_play-button_white_jsj-J",
   "playButtonBlack": "ktl-youtube-player-module_play-button_black_N4JvM",
   "playButtonPrimary": "ktl-youtube-player-module_play-button_primary_rk5oW",
+  "playButtonInversed": "ktl-youtube-player-module_play-button_inversed_ENTdT",
   "hide": "ktl-youtube-player-module_hide_w9Dr2",
   "imagePreview": "ktl-youtube-player-module_image-preview_qXCFf",
   "showVideo": "ktl-youtube-player-module_show-video_Y1Ri-",

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-dropms.1",
+  "version": "4.8.0",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [