@jetbrains/kotlin-web-site-ui 4.1.0-alpha.1 → 4.1.0-alpha.10

package/out/components/header/full-search/chapters/chapters.js

@@ -32,7 +32,10 @@ const Chapters = ({
   }, React__default.createElement("h4", {
     className: classNames(textCn('rs-h4'), styles.headliner)
   }, React__default.createElement("a", {
-    className: classNames(styles.chapterTitle, textCn('rs-link')),
+    className: classNames(styles.chapterTitle, textCn('rs-link', {
+      mode: 'clear',
+      hardness: 'hard'
+    })),
     href: url,
     id: chapterId,
     dangerouslySetInnerHTML: {

package/out/components/header/full-search/full-search.js

@@ -1,17 +1,20 @@
-import React__default, { useState, useContext, useCallback } from 'react';
+import React__default, { useState, useContext, useRef, useCallback, useLayoutEffect } from 'react';
+import useScrollbarSize from 'react-scrollbar-size';
 import { ThemeProvider } from '@rescui/ui-contexts';
 import Input from '@rescui/input';
+import Button from '@rescui/button';
 import Switcher from '@rescui/switcher';
 import { CloseIcon, ErrorIcon } from '@rescui/icons';
-import styles from './full-search.module.pcss.js';
 import { useSearch } from '../search-wrapper/use-search.js';
 import { ResultsList } from './results-list/results-list.js';
 import SearchContext from '../search-wrapper/search-context.js';
+import styles from './full-search.module.pcss.js';
 
 const FullSearch = ({
   searchString,
   killSearch
 }) => {
+  const [isScrollbarCompensated, setIsScrollbarCompensated] = useState(false);
   const [inputValue, setInputValue] = useState(searchString);
   const {
     hits,
@@ -22,37 +25,68 @@ const FullSearch = ({
     matchingOptions,
     setMatching
   } = useContext(SearchContext);
-  const clearSearch = useCallback(() => {
-    setInputValue('');
-  }, []);
+  const ref = useRef(null);
+  const headerRef = useRef(null);
+  const listRef = useRef(null);
+  const isResultsVisible = hits.length > 0 && inputValue;
   const handleSwitcherChange = useCallback(value => {
     setMatching(value);
   }, []);
+  const clearSearch = useCallback(() => {
+    setInputValue('');
+  }, []);
   const handleInputChange = useCallback(e => {
     setInputValue(e.target.value);
-  }, [inputValue]);
+  }, [inputValue]); // Scrollbar compensation
+
+  const {
+    width
+  } = useScrollbarSize();
+  useLayoutEffect(() => {
+    if (headerRef.current && listRef.current) {
+      const countedHeight = headerRef.current.offsetHeight + listRef.current.offsetHeight;
+
+      if (isResultsVisible) {
+        setIsScrollbarCompensated(countedHeight < window.innerWidth);
+      } else {
+        setIsScrollbarCompensated(true);
+      }
+    }
+  }, [hits, inputValue]);
   return React__default.createElement(ThemeProvider, {
     theme: 'light'
   }, React__default.createElement("div", {
-    className: styles.fullSearch
+    className: styles.fullSearch,
+    style: {
+      paddingRight: isScrollbarCompensated ? `${width}px` : 0
+    },
+    tabIndex: 1000,
+    ref: ref
+  }, React__default.createElement("div", {
+    className: styles.header,
+    ref: headerRef
   }, React__default.createElement("div", {
-    className: styles.header
-  }, React__default.createElement("button", {
-    className: styles.closeSearch,
+    className: styles.closeSearch
+  }, React__default.createElement(Button, {
+    mode: 'clear',
+    size: 'l',
+    icon: React__default.createElement(CloseIcon, null),
     onClick: killSearch
-  }, React__default.createElement(CloseIcon, {
-    size: 'l'
   })), React__default.createElement("div", {
     className: styles.wrapper
   }, React__default.createElement(Input, {
     placeholder: 'Search',
     value: inputValue,
-    onClear: clearSearch,
     onChange: handleInputChange,
-    clearIcon: React__default.createElement(ErrorIcon, null),
+    onClear: clearSearch,
+    clearIcon: React__default.createElement("button", {
+      className: styles.fullSearchClearButton
+    }, React__default.createElement(ErrorIcon, {
+      size: 'l'
+    })),
     size: 'l',
     autoFocus: true
-  }), React__default.createElement("div", {
+  }), isResultsVisible && React__default.createElement("div", {
     className: styles.switcher
   }, React__default.createElement(Switcher, {
     value: matching,
@@ -60,7 +94,8 @@ const FullSearch = ({
     options: matchingOptions,
     size: 'xs'
   })))), React__default.createElement("div", {
-    className: styles.wrapper
+    className: styles.wrapper,
+    ref: listRef
   }, inputValue && React__default.createElement(ResultsList, {
     placeholder: placeholder,
     hits: hits

package/out/components/header/full-search/full-search.module.pcss.js

@@ -1,9 +1,10 @@
 var styles = {
   "fullSearch": "ktl-full-search-module_fullSearch_MTU8t",
   "closeSearch": "ktl-full-search-module_closeSearch_5vYDG",
+  "fullSearchClearButton": "ktl-full-search-module_fullSearchClearButton_DGS6T",
   "wrapper": "ktl-full-search-module_wrapper_9rxXb",
   "header": "ktl-full-search-module_header_Wltw0",
-  "switcher": "ktl-full-search-module_switcher_o1RgM",
-  "results": "ktl-full-search-module_results_svcSE"
+  "results": "ktl-full-search-module_results_svcSE",
+  "switcher": "ktl-full-search-module_switcher_o1RgM"
 };
 export { styles as default };

package/out/components/header/full-search/hit-list/hit-list.js

@@ -1,8 +1,8 @@
 import React__default from 'react';
+import classNames from 'classnames';
 import { useTextStyles } from '@rescui/typography';
-import getExtendedHits from '../result/get-extended-hits.js';
+import getExtendedHits from './get-extended-hits.js';
 import { Chapters } from '../chapters/chapters.js';
-import classNames from 'classnames';
 import styles from './hit-list.module.pcss.js';
 
 const HitList = ({
@@ -24,7 +24,10 @@ const HitList = ({
     }, React__default.createElement("h3", {
       className: textCn('rs-h3')
     }, React__default.createElement("a", {
-      className: classNames(styles.titleLink, textCn('rs-link')),
+      className: classNames(styles.titleLink, textCn('rs-link', {
+        mode: 'clear',
+        hardness: 'hard'
+      })),
       href: url,
       dangerouslySetInnerHTML: {
         __html: title

package/out/components/header/full-search/loading/loading.js

@@ -5,7 +5,9 @@ import styles from './loading.module.pcss.js';
 const FullSearchLoader = () => {
   return React__default.createElement("div", {
     className: styles.loader
-  }, React__default.createElement(LoadingIcon, null));
+  }, React__default.createElement(LoadingIcon, {
+    size: 'l'
+  }));
 };
 
 export { FullSearchLoader };

package/out/components/header/header.js

@@ -1,5 +1,6 @@
 import React__default, { forwardRef, useState, useMemo, useRef, useImperativeHandle, useLayoutEffect, useCallback, useEffect } from 'react';
 import { ThemeProvider } from '@rescui/ui-contexts';
+import FocusManager from '@rescui/focus-manager';
 import useResizeObserver from '@react-hook/resize-observer';
 import OutsideClickHandler from 'react-outside-click-handler';
 import { LogoLarge } from './logo-large/logo-large.js';
@@ -26,7 +27,8 @@ const Header = forwardRef(({
   linkHandler,
   isPlayground,
   isUrlActive,
-  searchConfig
+  searchConfig,
+  noScrollClassName
 }, forwardedRef) => {
   const [menuPopupExpanded, setMenuPopupExpanded] = useState(false);
   const [isMenuPopupVisible, setIsMenuPopupVisible] = useState(false);
@@ -60,11 +62,22 @@ const Header = forwardRef(({
   useEffect(() => {
     if (typeof document !== `undefined`) {
       document.addEventListener('keydown', fullSearchKeyHandler);
+      const focusManager = new FocusManager();
       return () => {
         document.removeEventListener('keydown', fullSearchKeyHandler);
+        focusManager.destroy();
       };
     }
   }, [fullSearchKeyHandler]);
+  useEffect(() => {
+    if (typeof document !== `undefined` && noScrollClassName) {
+      if (fullSearchActive) {
+        document.body.classList.add(noScrollClassName);
+      } else {
+        document.body.classList.remove(noScrollClassName);
+      }
+    }
+  }, [fullSearchActive]);
   return React__default.createElement(ThemeProvider, {
     theme: 'dark'
   }, React__default.createElement(SearchWrapper, {

package/out/components/header/index.css

@@ -275,11 +275,12 @@
 .ktl-result-module_result_EKhUw {
     box-sizing: border-box;
     display: block;
-    padding: 16px 32px;
+    padding: 16px;
     text-decoration: none;
 }
     .ktl-result-module_result_EKhUw:hover {
         background: rgba(255, 255, 255, 0.1);
+        text-decoration: none;
     }
     .ktl-result-module_result_EKhUw:focus {
         outline: none;
@@ -292,6 +293,7 @@
 
 .ktl-result-module_resultTitle_DSpAT {
     margin-bottom: 6px;
+    overflow-wrap: break-word;
 }
 
 .ktl-result-module_text_fWBKG {
@@ -300,6 +302,12 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
+
+@media (min-width: 768px) {
+    .ktl-result-module_result_EKhUw {
+        padding: 16px 32px;
+    }
+}
 .ktl-list-module_results_LlxqY {
     box-sizing: border-box;
     max-height: 305px;
@@ -321,6 +329,7 @@
     border-radius: 24px;
     cursor: pointer;
     flex-shrink: 0;
+    transform: translateY(-6px);
 }
 
 .ktl-list-module_advancedSearch_XNy88:hover {
@@ -332,22 +341,49 @@
         box-shadow: rgba(107, 87, 255, 0.8) 0 0 0 4px;
     }
 
+.ktl-list-module_searchString_rJnxa {
+    height: 40px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
 @media (min-width: 768px) {
     .ktl-list-module_results_LlxqY {
         max-height: 434px;
     }
+
     .ktl-list-module_topBar_OO0XT {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-between;
-        padding: 34px 32px 14px 32px;
+        padding: 34px 32px 4px 32px;
     }
 }
 .ktl-empty-module_empty_xh1i- {
     box-sizing: border-box;
     border: 1px solid rgba(255, 255, 255, 0.2);
     background: #323236;
-    padding: 32px;
+    padding: 16px;
+}
+
+.ktl-empty-module_resultString_-8dzl {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    overflow-wrap: break-word;
+}
+
+@media (min-width: 768px) {
+    .ktl-empty-module_empty_xh1i- {
+        padding: 32px;
+    }
+
+    .ktl-empty-module_resultString_-8dzl {
+        -webkit-line-clamp: 2;
+    }
 }
 .ktl-loading-module_loading_CtOhW {
     box-sizing: border-box;
@@ -371,74 +407,27 @@
     transform: translateY(100%);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 640px) and (max-width: 768px) {
     .ktl-quick-search-module_wrapper_kkbQQ {
-        left: 0;
-        right: 0;
+        bottom: 12px;
     }
 }
-.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-quick-search-module_wrapper_kkbQQ {
+        left: 0;
+        right: 0;
     }
 }
 .ktl-loading-module_loader_B2IQl {
-    margin: 24px 0;
+    margin-top: 4px;
 }
     .ktl-loading-module_loader_B2IQl > svg {
         fill: #6B57FF;
     }
 .ktl-empty-module_wrapper_cNB8Y {
     display: block;
+    margin-top: 30px;
 }
 
 .ktl-empty-module_title_p2FMj {
@@ -457,9 +446,13 @@
 }
 
 .ktl-chapters-module_chapterTitle_b6Rdz {
-    border-bottom-color: transparent;
+    //border-bottom-color: transparent;
 }
 
+.ktl-chapters-module_chapterTitle_b6Rdz:hover {
+        //border-bottom-color: #19191C;
+    }
+
 .ktl-chapters-module_chapterTitle_b6Rdz em {
         background: rgba(127, 82, 255, 0.2);
         font-style: normal;
@@ -495,11 +488,7 @@
     margin-top: 12px;
 }
 .ktl-hit-list-module_hitList_1MP6m {
-    margin: 24px 0;
-}
-
-.ktl-hit-list-module_titleLink_rdJ6u {
-    border-bottom-color: transparent;
+    margin: 40px 0 50px 0;
 }
 
 .ktl-hit-list-module_titleLink_rdJ6u em {
@@ -507,11 +496,144 @@
         font-style: normal;
     }
 
+.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-y: auto;
+}
+
+.ktl-full-search-module_closeSearch_5vYDG {
+    position: absolute;
+    top: 40px;
+    right: 40px;
+    display: flex;
+}
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    display: flex;
+    cursor: pointer;
+
+}
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T > svg {
+        opacity: 0.7;
+    }
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T:hover > svg {
+            opacity: 1;
+        }
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T:focus {
+        outline: none;
+        box-shadow: rgba(107, 87, 255, 0.8) 0 0 0 4px;
+        border-radius: 100%;
+    }
+
+.ktl-full-search-module_fullSearchClearButton_DGS6T:focus > svg {
+            opacity: 1;
+        }
+
+.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: 10px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    background: #ffffff;
+    z-index: 10;
+}
+
+.ktl-full-search-module_results_svcSE {
+    margin-top: 14px;
+}
+
+.ktl-full-search-module_switcher_o1RgM {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 14px;
+}
+
+@media (min-width: 768px) {
+    .ktl-full-search-module_fullSearch_MTU8t {
+        display: block;
+    }
+}
+
 .ktl-search-box-module_searchBox_0SgE9 {
     position: relative;
     width: 408px;
 }
 
+.ktl-search-box-module_searchInput_ba2QS {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+}
+
+.ktl-search-box-module_searchMobileClose_fBF7e {
+    margin: 0;
+    padding: 0 8px;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ktl-search-box-module_searchMobileClose_fBF7e > svg {
+        fill: #ffffff;
+    }
+
+.ktl-search-box-module_customClearButton_yecGK {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    display: flex;
+    cursor: pointer;
+}
+
+.ktl-search-box-module_customClearButton_yecGK > svg {
+        fill: #ffffff;
+        opacity: 0.7;
+    }
+
+.ktl-search-box-module_customClearButton_yecGK:hover > svg {
+            opacity: 1;
+        }
+
+.ktl-search-box-module_customClearButton_yecGK:focus {
+        outline: none;
+        box-shadow: rgba(107, 87, 255, 0.8) 0 0 0 4px;
+        border-radius: 100%;
+    }
+
+.ktl-search-box-module_customClearButton_yecGK:focus > svg {
+            opacity: 1;
+        }
+
 @media (max-width: 767px) {
     .ktl-search-box-module_searchBox_0SgE9 {
         background: var(--ktl-dark-100);
@@ -525,6 +647,12 @@
     }
 }
 
+@media (min-width: 768px) {
+    .ktl-search-box-module_searchMobileClose_fBF7e {
+        display: none;
+    }
+}
+
 :root {
   --ktl-light-grey: #f4f4f4;
   --ktl-dark-100: rgba(39, 40, 44, 1);

package/out/components/header/quick-search/empty/empty.js

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { useTextStyles } from '@rescui/typography';
+import classNames from 'classnames';
 import styles from './empty.module.pcss.js';
 
 const EmptyResult = ({
@@ -9,7 +10,7 @@ const EmptyResult = ({
   return React__default.createElement("div", {
     className: styles.empty
   }, React__default.createElement("div", {
-    className: textCn('rs-h4')
+    className: classNames(textCn('rs-h4'), styles.resultString)
   }, placeholder));
 };
 

package/out/components/header/quick-search/empty/empty.module.pcss.js

@@ -1,4 +1,5 @@
 var styles = {
-  "empty": "ktl-empty-module_empty_xh1i-"
+  "empty": "ktl-empty-module_empty_xh1i-",
+  "resultString": "ktl-empty-module_resultString_-8dzl"
 };
 export { styles as default };

package/out/components/header/quick-search/list/list.js

@@ -1,6 +1,7 @@
-import React__default, { useMemo } from 'react';
+import React__default from 'react';
 import { Result } from '../result/result.js';
 import { useTextStyles } from '@rescui/typography';
+import classNames from 'classnames';
 import { isMacOs } from '../../is-macos.js';
 import styles from './list.module.pcss.js';
 
@@ -10,18 +11,19 @@ const ResultsList = ({
   toggleFullSearch
 }) => {
   const textCn = useTextStyles();
-  const controlledSearchString = useMemo(() => searchString.length > 5 ? `${searchString.substring(0, 5)}...` : searchString, [searchString]);
   return React__default.createElement("div", {
     className: styles.results
   }, results.length ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles.topBar
   }, React__default.createElement("div", {
-    className: textCn('rs-text-3')
-  }, "Showing results for \u00AB", controlledSearchString, "\u00BB"), React__default.createElement("button", {
+    className: classNames(textCn('rs-text-3'), styles.searchString)
+  }, "Showing results for \u00AB", searchString, "\u00BB"), React__default.createElement("button", {
     className: styles.advancedSearch,
     onClick: toggleFullSearch
   }, React__default.createElement("div", {
-    className: textCn('rs-text-3')
+    className: classNames(textCn('rs-text-3', {
+      hardness: 'hard'
+    }))
   }, "Advanced search ", isMacOs() ? '⌘K' : 'Ctrl+K'))), results.map((searchResult, index) => React__default.createElement(Result, {
     key: index,
     hit: searchResult

package/out/components/header/quick-search/list/list.module.pcss.js

@@ -1,6 +1,7 @@
 var styles = {
   "results": "ktl-list-module_results_LlxqY",
   "topBar": "ktl-list-module_topBar_OO0XT",
-  "advancedSearch": "ktl-list-module_advancedSearch_XNy88"
+  "advancedSearch": "ktl-list-module_advancedSearch_XNy88",
+  "searchString": "ktl-list-module_searchString_rJnxa"
 };
 export { styles as default };

package/out/components/header/search-box/search-box.js

@@ -5,7 +5,6 @@ import { QuickSearch } from '../quick-search/quick-search.js';
 import { FullSearch } from '../full-search/full-search.js';
 import styles from './search-box.module.pcss.js';
 import { useSearch } from '../search-wrapper/use-search.js';
-import { isMacOs } from '../is-macos.js';
 import { ESC_CODE } from '../key-codes.js';
 
 const SearchBox = ({
@@ -41,19 +40,24 @@ const SearchBox = ({
       };
     }
   }, [escHandler]);
-  const QuickSearchPlaceholder = isMobile ? 'Search' : `${isMacOs() ? '⌘K' : 'Ctrl+K'} for advanced search`;
   return React__default.createElement("div", {
     className: styles.searchBox
+  }, React__default.createElement("div", {
+    className: styles.searchInput
   }, React__default.createElement(Input, {
-    placeholder: QuickSearchPlaceholder,
     iconType: 'left',
     value: searchInput,
     onChange: handleInput,
     onClear: isMobile ? closeHandler : handleClear,
     icon: React__default.createElement(SearchIcon, null),
-    clearIcon: isMobile ? React__default.createElement(CloseIcon, null) : React__default.createElement(ErrorIcon, null),
+    clearIcon: isMobile ? React__default.createElement(CloseIcon, null) : React__default.createElement("button", {
+      className: styles.customClearButton
+    }, React__default.createElement(ErrorIcon, null)),
     autoFocus: true
-  }), searchInput && React__default.createElement(QuickSearch, {
+  }), isMobile && React__default.createElement("button", {
+    className: styles.searchMobileClose,
+    onClick: closeHandler
+  }, React__default.createElement(CloseIcon, null))), searchInput && React__default.createElement(QuickSearch, {
     results: hits,
     searchString: searchInput,
     toggleFullSearch: toggleFullSearch,

package/out/components/header/search-box/search-box.module.pcss.js

@@ -1,4 +1,7 @@
 var styles = {
-  "searchBox": "ktl-search-box-module_searchBox_0SgE9"
+  "searchBox": "ktl-search-box-module_searchBox_0SgE9",
+  "searchInput": "ktl-search-box-module_searchInput_ba2QS",
+  "searchMobileClose": "ktl-search-box-module_searchMobileClose_fBF7e",
+  "customClearButton": "ktl-search-box-module_customClearButton_yecGK"
 };
 export { styles as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.1.0-alpha.1",
+  "version": "4.1.0-alpha.10",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -24,6 +24,7 @@
   },
   "peerDependencies": {
     "@rescui/checkbox": "0.x",
+    "@rescui/focus-manager": "0.x",
     "@rescui/icons": "0.x",
     "@rescui/input": "0.x",
     "@rescui/tooltip": "0.x",
@@ -33,7 +34,8 @@
     "formik": "2.x",
     "react": ">= 16.8.6 < 18",
     "react-dom": ">= 16.8.6 < 18",
-    "react-outside-click-handler": "^1.3.0",
+    "react-outside-click-handler": "1.x",
+    "react-scrollbar-size": "5.x",
     "react-swipeable-views": "0.x",
     "sha.js": "2.x"
   },
@@ -47,8 +49,9 @@
     "@react-hook/resize-observer": "^1.2.5",
     "@rescui/button": "^0.2.1",
     "@rescui/checkbox": "^0.1.0",
-    "@rescui/icons": "^0.2.0",
-    "@rescui/input": "^0.1.2",
+    "@rescui/focus-manager": "^0.1.1",
+    "@rescui/icons": "^0.8.2",
+    "@rescui/input": "^0.4.6",
     "@rescui/switcher": "^0.2.2",
     "@rescui/tooltip": "^0.1.2",
     "@rescui/typography": "^0.7.3",
@@ -110,6 +113,7 @@
     "react-modal": "^3.14.4",
     "react-outside-click-handler": "^1.3.0",
     "react-remove-scroll-bar": "^2.2.0",
+    "react-scrollbar-size": "^5.0.0",
     "react-swipeable-views": "^0.14.0",
     "rollup": "^2.70.1",
     "rollup-plugin-node-externals": "^4.0.0",