@jetbrains/kotlin-web-site-ui 4.0.0-alpha.2 → 4.1.0-alpha.0

package/out/components/header/index.css

@@ -272,6 +272,259 @@
     }
 }
 
+.ktl-result-module_result_EKhUw {
+    box-sizing: border-box;
+    display: block;
+    padding: 16px 32px;
+    text-decoration: none;
+}
+    .ktl-result-module_result_EKhUw:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
+    .ktl-result-module_result_EKhUw:focus {
+        outline: none;
+        background: rgba(255, 255, 255, 0.1);
+    }
+    .ktl-result-module_result_EKhUw em {
+        background-color: rgba(127,82,255,0.3);
+        font-style: normal;
+    }
+
+.ktl-result-module_resultTitle_DSpAT {
+    margin-bottom: 6px;
+}
+
+.ktl-result-module_text_fWBKG {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+.ktl-list-module_results_LlxqY {
+    box-sizing: border-box;
+    max-height: 305px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #323236;
+    color: #fff;
+    overflow-y: scroll;
+}
+
+.ktl-list-module_topBar_OO0XT {
+    display: none;
+}
+
+.ktl-list-module_advancedSearch_XNy88 {
+    display: inline-block;
+    background: transparent;
+    border: 0;
+    padding: 6px 16px;
+    border-radius: 24px;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.ktl-list-module_advancedSearch_XNy88:hover {
+        background: rgba(255, 255, 255, .1);
+    }
+
+.ktl-list-module_advancedSearch_XNy88:focus {
+        outline: none;
+        box-shadow: rgba(107, 87, 255, 0.8) 0 0 0 4px;
+    }
+
+@media (min-width: 768px) {
+    .ktl-list-module_results_LlxqY {
+        max-height: 434px;
+    }
+    .ktl-list-module_topBar_OO0XT {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 34px 32px 14px 32px;
+    }
+}
+.ktl-empty-module_empty_xh1i- {
+    box-sizing: border-box;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #323236;
+    padding: 32px;
+}
+.ktl-loading-module_loading_CtOhW {
+    box-sizing: border-box;
+    height: 92px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #323236;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: left;
+}
+    .ktl-loading-module_loading_CtOhW > svg {
+        fill: #6B57FF;
+    }
+.ktl-quick-search-module_wrapper_kkbQQ {
+    box-sizing: border-box;
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: -8px;
+    transform: translateY(100%);
+}
+
+@media (min-width: 768px) {
+    .ktl-quick-search-module_wrapper_kkbQQ {
+        left: 0;
+        right: 0;
+    }
+}
+.ktl-full-search-module_fullSearch_MTU8t {
+    display: none;
+    box-sizing: border-box;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #ffffff;
+    overflow: scroll;
+}
+
+.ktl-full-search-module_closeSearch_5vYDG {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    position: absolute;
+    top: 40px;
+    right: 40px;
+}
+
+.ktl-full-search-module_wrapper_9rxXb {
+    max-width: 704px;
+    margin: 0 auto;
+}
+
+.ktl-full-search-module_header_Wltw0 {
+    width: 100%;
+    padding-top: 120px;
+    padding-bottom: 24px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    background: #ffffff;
+    z-index: 10;
+}
+
+.ktl-full-search-module_switcher_o1RgM {
+    margin-top: 14px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.ktl-full-search-module_results_svcSE {
+    margin-top: 14px;
+}
+
+@media (min-width: 768px) {
+    .ktl-full-search-module_fullSearch_MTU8t {
+        display: block;
+    }
+}
+.ktl-loading-module_loader_B2IQl {
+    margin: 24px 0;
+}
+    .ktl-loading-module_loader_B2IQl > svg {
+        fill: #6B57FF;
+    }
+.ktl-empty-module_wrapper_cNB8Y {
+    display: block;
+}
+
+.ktl-empty-module_title_p2FMj {
+    margin-bottom: 24px;
+}
+
+.ktl-empty-module_image_6Xr6L {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+}
+.ktl-chapters-module_chapters_J0wLB {
+    border-left: 1px solid var(--ktl-light-dark-20);
+    padding-left: 12px;
+    margin-top: 24px;
+}
+
+.ktl-chapters-module_chapterTitle_b6Rdz {
+    border-bottom-color: transparent;
+}
+
+.ktl-chapters-module_chapterTitle_b6Rdz em {
+        background: rgba(127, 82, 255, 0.2);
+        font-style: normal;
+    }
+
+.ktl-chapters-module_singleChapter_zSmx2:not(:last-child) {
+        margin-bottom: 12px;
+    }
+
+.ktl-chapters-module_headliner_ZBuf9 {
+    margin: 0;
+}
+
+.ktl-chapters-module_snippet_yROJo {
+    margin-top: 8px;
+    color: rgba(39, 40, 44, 0.7);
+}
+
+.ktl-chapters-module_snippet_yROJo em {
+        background: rgba(127, 82, 255, 0.2);
+        font-style: normal;
+    }
+
+.ktl-chapters-module_extraSection_lsZfw {
+    display: none;
+}
+
+.ktl-chapters-module_visibleSection_wQyvM {
+    display: block;
+}
+
+.ktl-chapters-module_moreButton_98oqy {
+    margin-top: 12px;
+}
+.ktl-hit-list-module_hitList_1MP6m {
+    margin: 24px 0;
+}
+
+.ktl-hit-list-module_titleLink_rdJ6u {
+    border-bottom-color: transparent;
+}
+
+.ktl-hit-list-module_titleLink_rdJ6u em {
+        background: rgba(127, 82, 255, 0.2);
+        font-style: normal;
+    }
+
+.ktl-search-box-module_searchBox_0SgE9 {
+    position: relative;
+    width: 408px;
+}
+
+@media (max-width: 767px) {
+    .ktl-search-box-module_searchBox_0SgE9 {
+        background: var(--ktl-dark-100);
+        width: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 4px;
+    }
+}
+
 :root {
   --ktl-light-grey: #f4f4f4;
   --ktl-dark-100: rgba(39, 40, 44, 1);

package/out/components/popup/popup.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import ReactModal from 'react-modal';
 import { LayeringConsumer, LayeringProvider } from '@rescui/ui-contexts';
 import { CloseIcon, LoadingIcon } from '@rescui/icons';
@@ -17,45 +17,39 @@ const Popup = ({
   ariaHideApp = false,
   ...restProps
 }) => {
-  return jsx(LayeringConsumer, {
-    children: ({
-      popupZIndex
-    }) => jsx(LayeringProvider, Object.assign({
-      baseLayer: "popup"
-    }, {
-      children: jsxs(ReactModal, Object.assign({
-        isOpen: isOpen,
-        className: styles.popup,
-        overlayClassName: styles.overlay,
-        onRequestClose: onRequestClose,
-        shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
-        shouldCloseOnEsc: shouldCloseOnEsc
-      }, restProps, {
-        ariaHideApp: ariaHideApp,
-        style: {
-          overlay: {
-            zIndex: popupZIndex
-          }
-        }
-      }, {
-        children: [!busy && showOuterCloseButton && jsx(Button, {
-          mode: 'rock',
-          theme: 'light',
-          icon: jsx(CloseIcon, {}, void 0),
-          className: styles.close,
-          onClick: onRequestClose,
-          "data-test": "close-button"
-        }, void 0), busy ? jsx(LoadingIcon, {
-          size: "l",
-          theme: "dark",
-          mode: "rock",
-          "data-test": "loading-icon"
-        }, void 0) : children, jsx(RemoveScrollBar, {
-          gapMode: "margin"
-        }, void 0)]
-      }), void 0)
-    }), void 0)
-  }, void 0);
+  return React.createElement(LayeringConsumer, null, ({
+    popupZIndex
+  }) => React.createElement(LayeringProvider, {
+    baseLayer: "popup"
+  }, React.createElement(ReactModal, Object.assign({
+    isOpen: isOpen,
+    className: styles.popup,
+    overlayClassName: styles.overlay,
+    onRequestClose: onRequestClose,
+    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
+    shouldCloseOnEsc: shouldCloseOnEsc
+  }, restProps, {
+    ariaHideApp: ariaHideApp,
+    style: {
+      overlay: {
+        zIndex: popupZIndex
+      }
+    }
+  }), !busy && showOuterCloseButton && React.createElement(Button, {
+    mode: 'rock',
+    theme: 'light',
+    icon: React.createElement(CloseIcon, null),
+    className: styles.close,
+    onClick: onRequestClose,
+    "data-test": "close-button"
+  }), busy ? React.createElement(LoadingIcon, {
+    size: "l",
+    theme: "dark",
+    mode: "rock",
+    "data-test": "loading-icon"
+  }) : children, React.createElement(RemoveScrollBar, {
+    gapMode: "margin"
+  }))));
 };
 
 export { Popup };

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

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useCallback } from 'react';
+import React__default, { useState, useCallback } from 'react';
 import SwipeableViews from 'react-swipeable-views';
 import cn from 'classnames';
 import SvgQuote from './quote.svg.js';
@@ -33,68 +32,39 @@ const QuotesSlider = ({
     [styles.controlActive]: index + 1 < totalSlides
   });
   const quoteTextClass = large ? 'ktl-subtitle' : 'ktl-text-1';
-  return jsx("div", Object.assign({
+  return React__default.createElement("div", {
     className: styles.quotesSlider
-  }, {
-    children: jsxs("div", Object.assign({
-      className: styles.content
-    }, {
-      children: [jsx("div", Object.assign({
-        className: styles.iconContainer
-      }, {
-        children: jsx(SvgQuote, {}, void 0)
-      }), void 0), jsxs("div", {
-        children: [quotes.length > 1 ? jsx(SwipeableViews, Object.assign({
-          index: index,
-          onChangeIndex: handleChangeIndex
-        }, {
-          children: quotes.map((quote, i) => jsx("p", Object.assign({
-            className: quoteTextClass
-          }, {
-            children: quote.text
-          }), i))
-        }), void 0) : jsx("p", Object.assign({
-          className: quoteTextClass
-        }, {
-          children: quotes[0].text
-        }), void 0), jsxs("div", Object.assign({
-          className: styles.nav
-        }, {
-          children: [jsx("div", Object.assign({
-            className: styles.title
-          }, {
-            children: jsx("p", Object.assign({
-              className: "ktl-text-2"
-            }, {
-              children: slideTitle
-            }), void 0)
-          }), void 0), quotes.length > 1 && jsxs("div", Object.assign({
-            className: styles.controls
-          }, {
-            children: [jsx("div", Object.assign({
-              className: prevButtonClass,
-              onClick: handlePrevSlide
-            }, {
-              children: jsx(SvgSliderArrow, {}, void 0)
-            }), void 0), jsx("div", Object.assign({
-              className: styles.slidesCount
-            }, {
-              children: jsxs("p", Object.assign({
-                className: "ktl-text-2"
-              }, {
-                children: [index + 1, "/", totalSlides]
-              }), void 0)
-            }), void 0), jsx("div", Object.assign({
-              className: nextButtonClass,
-              onClick: handleNextSlide
-            }, {
-              children: jsx(SvgSliderArrow, {}, void 0)
-            }), void 0)]
-          }), void 0)]
-        }), void 0)]
-      }, void 0)]
-    }), void 0)
-  }), void 0);
+  }, React__default.createElement("div", {
+    className: styles.content
+  }, React__default.createElement("div", {
+    className: styles.iconContainer
+  }, React__default.createElement(SvgQuote, null)), React__default.createElement("div", null, quotes.length > 1 ? React__default.createElement(SwipeableViews, {
+    index: index,
+    onChangeIndex: handleChangeIndex
+  }, quotes.map((quote, i) => React__default.createElement("p", {
+    className: quoteTextClass,
+    key: i
+  }, quote.text))) : React__default.createElement("p", {
+    className: quoteTextClass
+  }, quotes[0].text), React__default.createElement("div", {
+    className: styles.nav
+  }, React__default.createElement("div", {
+    className: styles.title
+  }, React__default.createElement("p", {
+    className: "ktl-text-2"
+  }, slideTitle)), quotes.length > 1 && React__default.createElement("div", {
+    className: styles.controls
+  }, React__default.createElement("div", {
+    className: prevButtonClass,
+    onClick: handlePrevSlide
+  }, React__default.createElement(SvgSliderArrow, null)), React__default.createElement("div", {
+    className: styles.slidesCount
+  }, React__default.createElement("p", {
+    className: "ktl-text-2"
+  }, index + 1, "/", totalSlides)), React__default.createElement("div", {
+    className: nextButtonClass,
+    onClick: handleNextSlide
+  }, React__default.createElement(SvgSliderArrow, null)))))));
 };
 
 export { QuotesSlider };

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

@@ -1,4 +1,3 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
@@ -37,45 +36,34 @@ const DropdownMenu = ({
 
   const handleClick = () => setIsExpanded(!isExpanded);
 
-  return jsxs(Fragment, {
-    children: [jsxs("div", Object.assign({
-      className: classNames(styles.dropdownMenu, {
-        [styles.dropdownMenuExpanded]: isExpanded
-      }),
-      onClick: handleClick
-    }, {
-      children: [jsxs("button", Object.assign({
-        className: classNames(styles.button, textCn('rs-text-2')),
-        "aria-haspopup": "true"
-      }, {
-        children: [jsx("span", {
-          children: activeItem.title
-        }, void 0), jsx(SvgArrowDropdownIcon, {
-          className: styles.icon
-        }, void 0)]
-      }), void 0), jsx("nav", Object.assign({
-        className: classNames(styles.dropdownList, {
-          [styles.dropdownListDarkTheme]: theme === 'dark'
-        })
-      }, {
-        children: _items.map((item, index) => jsx("a", Object.assign({
-          href: item.url,
-          className: classNames(styles.dropdownItem, textCn('rs-text-2'), {
-            [styles.dropdownItemActive]: index === _activeIndex
-          }),
-          onClick: event => linkHandler?.(event, item.url),
-          target: item.isExternal ? '_blank' : undefined
-        }, {
-          children: item.title
-        }), item.url))
-      }), void 0)]
-    }), void 0), !!portalRoot && ReactDOM.createPortal(jsx("div", {
-      className: classNames(styles.overlay, {
-        [styles.overlayVisible]: isExpanded
-      }),
-      onClick: handleClick
-    }, void 0), portalRoot)]
-  }, void 0);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: classNames(styles.dropdownMenu, {
+      [styles.dropdownMenuExpanded]: isExpanded
+    }),
+    onClick: handleClick
+  }, React__default.createElement("button", {
+    className: classNames(styles.button, textCn('rs-text-2')),
+    "aria-haspopup": "true"
+  }, React__default.createElement("span", null, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
+    className: styles.icon
+  })), React__default.createElement("nav", {
+    className: classNames(styles.dropdownList, {
+      [styles.dropdownListDarkTheme]: theme === 'dark'
+    })
+  }, _items.map((item, index) => React__default.createElement("a", {
+    key: item.url,
+    href: item.url,
+    className: classNames(styles.dropdownItem, textCn('rs-text-2'), {
+      [styles.dropdownItemActive]: index === _activeIndex
+    }),
+    onClick: event => linkHandler?.(event, item.url),
+    target: item.isExternal ? '_blank' : undefined
+  }, item.title)))), !!portalRoot && ReactDOM.createPortal(React__default.createElement("div", {
+    className: classNames(styles.overlay, {
+      [styles.overlayVisible]: isExpanded
+    }),
+    onClick: handleClick
+  }), portalRoot));
 };
 
 export { DropdownMenu };

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

@@ -1,5 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
-import { useCallback } from 'react';
+import React__default, { useCallback } from 'react';
 import classNames from 'classnames';
 import styles from './horizontal-menu.module.pcss.js';
 import { useTextStyles } from '@rescui/typography';
@@ -11,21 +10,19 @@ const HorizontalMenuItem = ({
 }) => {
   const textCn = useTextStyles();
   const handleLink = useCallback(event => linkHandler(event, item.url), [item]);
-  return isActive ? jsx("span", Object.assign({
+  return isActive ? React__default.createElement("span", {
+    key: item.url,
     className: styles.itemActive
-  }, {
-    children: item.title
-  }), item.url) : jsx("a", Object.assign({
+  }, item.title) : React__default.createElement("a", {
     href: item.url,
+    key: item.url,
     className: classNames(styles.item, textCn('rs-link', {
       hardness: 'average',
       mode: 'clear'
     })),
     onClick: handleLink,
     target: item.isExternal ? '_blank' : undefined
-  }, {
-    children: item.title
-  }), item.url);
+  }, item.title);
 };
 
 const HorizontalMenu = ({
@@ -34,15 +31,14 @@ const HorizontalMenu = ({
   linkHandler
 }) => {
   const textCn = useTextStyles();
-  return jsx("nav", Object.assign({
+  return React__default.createElement("nav", {
     className: classNames(styles.horizontalMenu, textCn('rs-text-2'))
-  }, {
-    children: items.map((item, index) => jsx(HorizontalMenuItem, {
-      isActive: index === activeIndex,
-      item: item,
-      linkHandler: linkHandler
-    }, item.url))
-  }), void 0);
+  }, items.map((item, index) => React__default.createElement(HorizontalMenuItem, {
+    key: item.url,
+    isActive: index === activeIndex,
+    item: item,
+    linkHandler: linkHandler
+  })));
 };
 
 export { HorizontalMenu };

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
 import { useTheme } from '@rescui/ui-contexts';
 import classNames from 'classnames';
 import styles from './top-menu.module.pcss.js';
@@ -20,32 +20,28 @@ const TopMenu = ({
 }) => {
   const theme = useTheme();
   const textCn = useTextStyles();
-  return jsxs("div", Object.assign({
+  return React__default.createElement("div", {
     className: classNames(styles.topMenu, className, {
       [styles.topMenuDarkTheme]: theme === 'dark'
     }),
     ref: forwardedRef
-  }, {
-    children: [jsx("a", Object.assign({
-      href: homeUrl,
-      className: classNames(styles.logo, textCn('rs-h3')),
-      onClick: event => linkHandler(event, homeUrl)
-    }, {
-      children: title
-    }), void 0), jsx(DropdownMenu, {
-      items: items,
-      activeIndex: activeIndex,
-      linkHandler: linkHandler,
-      title: title,
-      mobileTitle: mobileTitle,
-      homeUrl: homeUrl,
-      mobileOverview: mobileOverview
-    }, void 0), jsx(HorizontalMenu, {
-      items: items,
-      activeIndex: activeIndex,
-      linkHandler: linkHandler
-    }, void 0), children]
-  }), void 0);
+  }, React__default.createElement("a", {
+    href: homeUrl,
+    className: classNames(styles.logo, textCn('rs-h3')),
+    onClick: event => linkHandler(event, homeUrl)
+  }, title), React__default.createElement(DropdownMenu, {
+    items: items,
+    activeIndex: activeIndex,
+    linkHandler: linkHandler,
+    title: title,
+    mobileTitle: mobileTitle,
+    homeUrl: homeUrl,
+    mobileOverview: mobileOverview
+  }), React__default.createElement(HorizontalMenu, {
+    items: items,
+    activeIndex: activeIndex,
+    linkHandler: linkHandler
+  }), children);
 };
 
 export { TopMenu };