@jetbrains/kotlin-web-site-ui 4.13.0 → 4.14.0

package/out/components/header/header.js

@@ -22,7 +22,7 @@ var SearchResultView;
   SearchResultView[SearchResultView["Wide"] = 1] = "Wide";
 })(SearchResultView || (SearchResultView = {}));
 
-const MENU_POPUP_BREAKPOINT = 870;
+const MENU_POPUP_BREAKPOINT = 960;
 const Header = forwardRef(({
   productWebUrl,
   hasSearch = false,

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

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React__default, { useState, useEffect } from 'react';
 import styles from './horizontal-menu.module.pcss.js';
 import { useTextStyles } from '@rescui/typography';
+import { DownOutlineIcon } from '@rescui/icons';
 
 const DropdownMenu = ({
   items,
@@ -57,7 +58,7 @@ const HorizontalMenuItem = ({
       [styles.itemActive]: item.isActive,
       [styles.expanded]: isExpanded && !!item.items?.length
     })
-  }, item.title), !!item.items?.length && React__default.createElement(DropdownMenu, {
+  }, item.title, !!item.items?.length && React__default.createElement(DownOutlineIcon, null)), !!item.items?.length && React__default.createElement(DropdownMenu, {
     items: item.items,
     isExpanded: isExpanded,
     alignRight: isLast,

package/out/components/header/index.css

@@ -88,7 +88,7 @@
   box-shadow: none;
 }
 
-@media (max-width: 870px) {
+@media (max-width: 960px) {
   .ktl-header-module_header-menu_wh71L {
     padding: 0 0 0 16px;
     height: var(--ktl-header-height-mobile);
@@ -157,7 +157,9 @@
 }
 
 .ktl-horizontal-menu-module_menu-item_CXDEW {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 4px;
   line-height: 60px !important;
   color: rgba(255, 255, 255, 0.75);
   border-top: 2px solid transparent;
@@ -261,7 +263,7 @@
   }
 }
 
-@media (max-width: 870px) {
+@media (max-width: 960px) {
   .ktl-horizontal-menu-module_nav_gbA7M {
     display: none;
   }
@@ -341,7 +343,7 @@
     color: #ffffff;
   }
 
-@media (max-width: 870px) {
+@media (max-width: 960px) {
 
 .ktl-search-button-module_button_YHJPv {
     display: none
@@ -379,7 +381,7 @@
     overflow: hidden;
 }
 
-@media (min-width: 871px) {
+@media (min-width: 961px) {
     .ktl-result-module_result_EKhUw {
         padding: 16px 32px;
     }
@@ -425,7 +427,7 @@
     overflow: hidden;
 }
 
-@media (min-width: 871px) {
+@media (min-width: 961px) {
     .ktl-list-module_results_LlxqY {
         max-height: 434px;
     }
@@ -452,7 +454,7 @@
     overflow-wrap: break-word;
 }
 
-@media (min-width: 871px) {
+@media (min-width: 961px) {
     .ktl-empty-module_empty_xh1i- {
         padding: 32px;
     }
@@ -491,7 +493,7 @@
 }*/
 
 
-@media (min-width: 871px) {
+@media (min-width: 961px) {
     .ktl-quick-search-module_wrapper_kkbQQ {
         left: 0;
         right: 0;
@@ -499,7 +501,7 @@
 }
 
 
-@media (min-width: 871px) and (max-width: 1024px) {
+@media (min-width: 961px) and (max-width: 1024px) {
     .ktl-quick-search-module_apiReferenceWrapper_jv98t {
         width: calc(100vw - 64px);
         left: auto;
@@ -669,7 +671,7 @@
     margin-top: 14px;
 }
 
-@media (min-width: 871px) {
+@media (min-width: 961px) {
     .ktl-full-search-module_fullSearch_MTU8t {
         display: block;
     }
@@ -734,7 +736,7 @@
             opacity: 1;
         }
 
-@media (max-width: 870px) {
+@media (max-width: 960px) {
     .ktl-search-box-module_searchBox_0SgE9 {
         background: var(--ktl-dark-100);
         width: auto;
@@ -747,7 +749,7 @@
     }
 }
 
-@media (min-width: 871px) {
+@media (min-width: 961px) {
     .ktl-search-box-module_searchMobileClose_fBF7e {
         display: none;
     }

package/out/components/layout-v2/index.css

@@ -5,42 +5,42 @@
         --ktl-layout-width: 1144px;
     }
 
-        @media (--ktl-ds-in) {.ktl-layout-v2,
+        @media (width <= 1190px) {.ktl-layout-v2,
     .ktl-layout-to-2 .ktl-layout,
     .ktl-layout-to-2 .ktl-layout {
             --ktl-layout-width: 952px;
     }
         }
 
-        @media (--ktl-tl-less) {.ktl-layout-v2,
+        @media (width <= 808px) {.ktl-layout-v2,
     .ktl-layout-to-2 .ktl-layout,
     .ktl-layout-to-2 .ktl-layout {
             --ktl-layout-spacing: 48px;
     }
         }
 
-        @media (--ktl-tl-in) {.ktl-layout-v2,
+        @media (width <= 1000px) {.ktl-layout-v2,
     .ktl-layout-to-2 .ktl-layout,
     .ktl-layout-to-2 .ktl-layout {
             --ktl-layout-width: 760px;
     }
         }
 
-        @media (--ktl-ts-in) {.ktl-layout-v2,
+        @media (width <= 808px) {.ktl-layout-v2,
     .ktl-layout-to-2 .ktl-layout,
     .ktl-layout-to-2 .ktl-layout {
             --ktl-layout-width: 568px;
     }
         }
 
-        @media (--ktl-ml-in) {.ktl-layout-v2,
+        @media (width <= 640px) {.ktl-layout-v2,
     .ktl-layout-to-2 .ktl-layout,
     .ktl-layout-to-2 .ktl-layout {
             --ktl-layout-width: 424px;
     }
         }
 
-        @media (--ktl-ms-in) {.ktl-layout-v2,
+        @media (width <= 472px) {.ktl-layout-v2,
     .ktl-layout-to-2 .ktl-layout,
     .ktl-layout-to-2 .ktl-layout {
             --ktl-layout-width: 312px;

package/out/components/quotes-slider/quotes-slider.js

@@ -1,5 +1,5 @@
 import React__default, { useState, useCallback } from 'react';
-import SwipeableViews from 'react-swipeable-views';
+import SwipeableViews from 'react-swipeable-views-react-18-fix';
 import { ArrowLeftIcon, ArrowRightIcon } from '@rescui/icons';
 import { useTheme } from '@rescui/ui-contexts';
 import { useTextStyles } from '@rescui/typography';

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

@@ -69,7 +69,7 @@
   justify-self: flex-start;
 }
 
-@media (max-width: 870px) {
+@media (max-width: 960px) {
   .ktl-top-menu-module_top-menu_PRX9X {
     height: var(--ktl-header-height-mobile);
     padding: 0 6px 0 4px;
@@ -181,6 +181,10 @@
     color: black;
 }
 
+.ktl-vertical-menu-module_icon-dark-theme_mwAfx {
+    color: white;
+}
+
 .ktl-vertical-menu-module_dropdown-header_77lTy {
     /* workaround */
     margin-top: calc(var(--ktl-header-height-mobile) * -1);

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

@@ -6,7 +6,7 @@ import { useTextStyles } from '@rescui/typography';
 import { HorizontalMenu } from './horizontal-menu/horizontal-menu.js';
 import { VerticalMenu } from './vertical-menu/vertical-menu.js';
 import useResizeObserver from '@react-hook/resize-observer';
-const BREAKPOINT_XS = 870;
+const BREAKPOINT_XS = 960;
 const TopMenu = forwardRef(({
   homeUrl,
   title,

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

@@ -20,6 +20,7 @@ const VerticalMenu = ({
   topMenuRef
 }) => {
   const textCn = useTextStyles();
+  const theme = useTheme();
 
   const _items = (mobileOverview ? [{
     title: mobileTitle,
@@ -55,7 +56,9 @@ const VerticalMenu = ({
       hardness: 'hard'
     })
   }, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
-    className: styles.icon
+    className: classNames(styles.icon, {
+      [styles.iconDarkTheme]: theme === 'dark'
+    })
   })), !!portalRoot && isExpanded && createPortal(React__default.createElement(VerticalMenuDropDown, {
     title: title,
     activeIndex: _activeIndex,

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

@@ -3,6 +3,7 @@ var styles = {
   "button": "ktl-vertical-menu-module_button_zqr20",
   "buttonText": "ktl-vertical-menu-module_button-text_aXith",
   "icon": "ktl-vertical-menu-module_icon_-Ieat",
+  "iconDarkTheme": "ktl-vertical-menu-module_icon-dark-theme_mwAfx",
   "dropdownHeader": "ktl-vertical-menu-module_dropdown-header_77lTy",
   "stickyHeader": "ktl-vertical-menu-module_sticky-header_BlLzL",
   "dropdownList": "ktl-vertical-menu-module_dropdown-list_N3KWV",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -25,19 +25,18 @@
   "peerDependencies": {
     "@rescui/checkbox": "0.x",
     "@rescui/focus-manager": "0.x",
-    "@rescui/icons": "0.x",
+    "@rescui/icons": "1.x",
     "@rescui/input": "0.x",
     "@rescui/tooltip": "0.x",
     "@rescui/typography": "0.x",
     "@rescui/ui-contexts": "0.x",
     "algoliasearch": "4.x",
     "formik": "2.x",
-    "react": ">= 16.8.6 < 18",
-    "react-dom": ">= 16.8.6 < 18",
+    "react": ">= 16.8.6",
+    "react-dom": ">= 16.8.6",
     "react-outside-click-handler": "1.x",
     "react-remove-scroll-bar": "2.x",
     "react-scrollbar-size": "5.x",
-    "react-swipeable-views": "0.x",
     "sha.js": "2.x"
   },
   "devDependencies": {
@@ -51,7 +50,7 @@
     "@rescui/button": "^0.10.0",
     "@rescui/checkbox": "^0.1.0",
     "@rescui/focus-manager": "^0.1.1",
-    "@rescui/icons": "^0.16.13",
+    "@rescui/icons": "^1.6.2",
     "@rescui/input": "^0.4.6",
     "@rescui/menu": "^0.9.4",
     "@rescui/switcher": "^0.2.2",
@@ -124,6 +123,7 @@
     "react-remove-scroll-bar": "^2.2.0",
     "react-scrollbar-size": "^5.0.0",
     "react-swipeable-views": "^0.14.0",
+    "react-swipeable-views-react-18-fix": "^0.14.1",
     "require-from-string": "^2.0.2",
     "rollup": "^2.70.1",
     "rollup-plugin-node-externals": "^4.0.0",