@jetbrains/kotlin-web-site-ui 0.0.0-foundation-changes.1

package/out/components/header/index.js

@@ -0,0 +1,4 @@
+import './index.css';
+import { Header } from './header.js';
+export { Header as default } from './header.js';
+export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_LIBRARIES_TITLE, MULTIPLATFORM_LIBRARIES_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, getNavScheme } from './nav-scheme.js';

package/out/components/header/is-macos.js

@@ -0,0 +1,5 @@
+function isMacOs() {
+  return window.navigator.appVersion.indexOf('Mac') !== -1;
+}
+
+export { isMacOs };

package/out/components/header/key-codes.js

@@ -0,0 +1,3 @@
+const ESC_CODE = 27;
+const KEY_K_CODE = 75;
+export { ESC_CODE, KEY_K_CODE };

package/out/components/header/logo-large/kotlin-logo-large.svg.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+var _path, _path2, _path3, _defs;
+
+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 SvgKotlinLogoLarge = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 98,
+  height: 22,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M43.314 1.067h-4.031L30.5 10.422V1.098H27.27v20.273H30.5v-9.82l8.814 9.82h4.177l-9.397-10.484 9.22-9.82Z",
+  fill: "#fff"
+})), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+  d: "M54.303 7.186c-1.153-.66-2.45-.994-3.901-.994-1.478 0-2.803.33-3.973.994a7.042 7.042 0 0 0-2.735 2.758c-.65 1.179-.976 2.515-.976 4.01 0 1.494.325 2.835.972 4.01a6.967 6.967 0 0 0 2.716 2.758c1.166.659 2.486.993 3.964.993 1.46 0 2.766-.33 3.923-.993a6.941 6.941 0 0 0 2.694-2.759c.642-1.178.963-2.515.963-4.01 0-1.494-.32-2.83-.963-4.009a6.949 6.949 0 0 0-2.684-2.758Zm-.204 9.328c-.357.74-.859 1.314-1.505 1.73-.646.415-1.392.622-2.233.622-.85 0-1.604-.207-2.26-.623a4.184 4.184 0 0 1-1.528-1.73c-.361-.74-.542-1.589-.542-2.555 0-.966.185-1.815.551-2.555a4.177 4.177 0 0 1 1.537-1.73c.656-.415 1.415-.623 2.278-.623.832 0 1.573.208 2.22.623a4.125 4.125 0 0 1 1.5 1.73c.353.74.529 1.59.529 2.555-.009.962-.19 1.815-.547 2.556ZM64.555 2.836h-3.132v2.52c0 .397-.095.695-.29.889-.194.198-.492.298-.899.298h-1.537v2.664h2.667v7.978c0 .83.167 1.562.506 2.194a3.591 3.591 0 0 0 1.442 1.472c.624.348 1.36.52 2.21.52h2.391v-2.782h-1.798c-.466 0-.841-.163-1.13-.483-.29-.325-.434-.75-.434-1.282V9.207h3.448V6.543h-3.448V2.836h.004ZM73.68.286h-3.186V21.37h3.187V.286ZM80.498.312H77.28v3.273h3.218V.312ZM80.466 6.544H77.28V21.37h3.186V6.544ZM96.67 8.99a4.969 4.969 0 0 0-1.899-2.054c-.818-.492-1.772-.74-2.866-.74-1.161 0-2.178.284-3.05.848-.697.447-1.257 1.052-1.7 1.797l-.018-2.298H84.09V21.37h3.191v-8.298c0-.8.154-1.513.457-2.136a3.39 3.39 0 0 1 1.293-1.45c.556-.342 1.202-.514 1.948-.514.669 0 1.238.14 1.717.42.48.28.841.682 1.085 1.201.249.52.37 1.142.37 1.87v8.907h3.192v-9.355c0-1.138-.226-2.149-.674-3.025Z",
+  fill: "#fff"
+})), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
+  d: "M20 21H0V1h20L9.793 10.855 20 21Z",
+  fill: "url(#kotlin-logo-large_svg__a)"
+})), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("radialGradient", {
+  id: "kotlin-logo-large_svg__a",
+  cx: 0,
+  cy: 0,
+  r: 1,
+  gradientUnits: "userSpaceOnUse",
+  gradientTransform: "translate(19.335 1.822) scale(22.9097)"
+}, /*#__PURE__*/React.createElement("stop", {
+  offset: 0.003,
+  stopColor: "#EF4857"
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: 0.469,
+  stopColor: "#D211EC"
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: 1,
+  stopColor: "#7F52FF"
+})))));
+
+export { SvgKotlinLogoLarge as default };

package/out/components/header/logo-large/logo-large.js

@@ -0,0 +1,34 @@
+import React__default from 'react';
+import styles from './logo-large.module.pcss.js';
+import SvgKotlinLogoLarge from './kotlin-logo-large.svg.js';
+import classNames from 'classnames';
+import { useTextStyles } from '@rescui/typography';
+import { KOTLINLANG_URL } from '../consts.js';
+
+const LogoLarge = ({
+  productWebUrl,
+  className
+}) => {
+  const version = productWebUrl ? getProductVersion(productWebUrl) : null;
+  const textCn = useTextStyles();
+  return React__default.createElement("div", {
+    className: classNames(styles.container, className, textCn('rs-text-3', {
+      hardness: 'average'
+    }))
+  }, React__default.createElement("a", {
+    className: styles.link,
+    href: KOTLINLANG_URL,
+    "aria-label": "Kotlin Home Page"
+  }, React__default.createElement(SvgKotlinLogoLarge, null)), version && React__default.createElement("a", {
+    className: classNames(styles.versionTag),
+    href: productWebUrl,
+    target: "_blank"
+  }, version));
+};
+
+function getProductVersion(productWebUrl) {
+  const match = /v?\d+\.\d+\.\d+$/.exec(productWebUrl);
+  return match ? match[0] : null;
+}
+
+export { LogoLarge };

package/out/components/header/logo-large/logo-large.module.pcss.js

@@ -0,0 +1,6 @@
+var styles = {
+  "container": "ktl-logo-large-module_container_35w4p",
+  "link": "ktl-logo-large-module_link_AOGas",
+  "versionTag": "ktl-logo-large-module_version-tag_k12Hw"
+};
+export { styles as default };

package/out/components/header/logo-small/kotlin-logo-small.svg.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+var _path, _defs;
+
+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 SvgKotlinLogoSmall = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 20,
+  height: 20,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M20 20H0V0h20L9.793 9.855 20 20Z",
+  fill: "url(#kotlin-logo-small_svg__a)"
+})), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("radialGradient", {
+  id: "kotlin-logo-small_svg__a",
+  cx: 0,
+  cy: 0,
+  r: 1,
+  gradientUnits: "userSpaceOnUse",
+  gradientTransform: "translate(19.335 .822) scale(22.9097)"
+}, /*#__PURE__*/React.createElement("stop", {
+  offset: 0.003,
+  stopColor: "#EF4857"
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: 0.469,
+  stopColor: "#D211EC"
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: 1,
+  stopColor: "#7F52FF"
+})))));
+
+export { SvgKotlinLogoSmall as default };

package/out/components/header/logo-small/logo-small.js

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import SvgKotlinLogoSmall from './kotlin-logo-small.svg.js';
+import styles from './logo-small.module.pcss.js';
+import classNames from 'classnames';
+import { useTextStyles } from '@rescui/typography';
+import { KOTLINLANG_URL } from '../consts.js';
+
+const LogoSmall = ({
+  homeTitle,
+  homeUrl,
+  className
+}) => {
+  const textCn = useTextStyles();
+  return React__default.createElement("div", {
+    className: classNames(styles.logoSmall, className)
+  }, React__default.createElement("a", {
+    href: KOTLINLANG_URL,
+    className: styles.iconWrap
+  }, React__default.createElement(SvgKotlinLogoSmall, {
+    className: styles.icon
+  })), React__default.createElement("a", {
+    href: homeUrl,
+    className: classNames(styles.link, textCn('rs-h4'))
+  }, homeTitle));
+};
+
+export { LogoSmall };

package/out/components/header/logo-small/logo-small.module.pcss.js

@@ -0,0 +1,7 @@
+var styles = {
+  "logoSmall": "ktl-logo-small-module_logo-small_iGY12",
+  "link": "ktl-logo-small-module_link_SKXAa",
+  "iconWrap": "ktl-logo-small-module_icon-wrap_6hRnO",
+  "icon": "ktl-logo-small-module_icon_NyEog"
+};
+export { styles as default };

package/out/components/header/menu-popup/menu-button/menu-button.js

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import styles from './menu-button.module.pcss.js';
+import classNames from 'classnames';
+import Button from '@rescui/button';
+import { CloseIcon, HamburgerIcon } from '@rescui/icons';
+
+const MenuButton = ({
+  onClick,
+  isExpanded
+}) => {
+  return React__default.createElement(Button, {
+    type: "button",
+    className: classNames(styles.button),
+    "aria-haspopup": "true",
+    "aria-label": "Open the navigation",
+    onClick: onClick,
+    size: 'l',
+    mode: 'clear',
+    icon: isExpanded ? React__default.createElement(CloseIcon, null) : React__default.createElement(HamburgerIcon, null)
+  });
+};
+
+export { MenuButton };

package/out/components/header/menu-popup/menu-button/menu-button.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "button": "ktl-menu-button-module_button_wB9Mx"
+};
+export { styles as default };

package/out/components/header/menu-popup/menu-list/menu-list.js

@@ -0,0 +1,33 @@
+import React__default, { Fragment } from 'react';
+import { MenuListItem } from '../menu-list-item/menu-list-item.js';
+import styles from './menu-list.module.pcss.js';
+
+const MenuList = ({
+  items,
+  level,
+  linkHandler
+}) => {
+  return React__default.createElement(React__default.Fragment, null, items.map((item, i) => React__default.createElement(Fragment, {
+    key: i
+  }, item.items && item.items.length > 0 ? React__default.createElement("div", {
+    className: styles.menuItemGroup
+  }, React__default.createElement(MenuListItem, {
+    item: item,
+    level: level,
+    linkHandler: linkHandler
+  }), item.items && item.items.length > 0 && React__default.createElement(MenuList, {
+    items: item.items,
+    level: level + 1,
+    linkHandler: linkHandler
+  })) : React__default.createElement(React__default.Fragment, null, React__default.createElement(MenuListItem, {
+    item: item,
+    level: level,
+    linkHandler: linkHandler
+  }), item.items && React__default.createElement(MenuList, {
+    items: item.items,
+    level: level + 1,
+    linkHandler: linkHandler
+  })))));
+};
+
+export { MenuList };

package/out/components/header/menu-popup/menu-list/menu-list.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "menuItemGroup": "ktl-menu-list-module_menu-item-group_mFvUE"
+};
+export { styles as default };

package/out/components/header/menu-popup/menu-list-item/menu-list-item.js

@@ -0,0 +1,28 @@
+import React__default, { useCallback } from 'react';
+import classNames from 'classnames';
+import styles from './menu-list-item.module.pcss.js';
+
+const MenuListItem = ({
+  item,
+  level,
+  linkHandler
+}) => {
+  const Tag = item.url ? 'a' : 'span';
+  const style = {
+    '--level': level
+  };
+  const handleClick = useCallback(event => linkHandler && item.url && linkHandler(event, item.url), []);
+  return React__default.createElement(Tag, { ...(item.url ? {
+      href: item.url,
+      onClick: handleClick
+    } : {}),
+    className: classNames(styles.menuItem, {
+      [styles.menuItemRoot]: level === 0,
+      [styles.active]: item.isActive,
+      [styles.activeWithChild]: item.items && item.items.length
+    }),
+    style: style
+  }, item.title);
+};
+
+export { MenuListItem };

package/out/components/header/menu-popup/menu-list-item/menu-list-item.module.pcss.js

@@ -0,0 +1,7 @@
+var styles = {
+  "menuItem": "ktl-menu-list-item-module_menu-item_Aruue",
+  "active": "ktl-menu-list-item-module_active_jHfJR",
+  "activeWithChild": "ktl-menu-list-item-module_active-with-child_ier2a",
+  "menuItemRoot": "ktl-menu-list-item-module_menu-item-root_Rzcqb"
+};
+export { styles as default };

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

@@ -0,0 +1,55 @@
+import React__default, { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
+import styles from './menu-popup.module.pcss.js';
+import classNames from 'classnames';
+import { MenuButton } from './menu-button/menu-button.js';
+import { MenuList } from './menu-list/menu-list.js';
+import { useTextStyles } from '@rescui/typography';
+import { clearAllBodyScrollLocks, enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
+
+const MenuPopup = ({
+  items,
+  isExpanded,
+  setExpand,
+  headerRef,
+  linkHandler
+}) => {
+  const navRef = useRef(null);
+  const textCn = useTextStyles();
+  const [navStyle, setNavStyle] = useState({});
+  useEffect(() => {
+    return () => {
+      setExpand(false);
+      clearAllBodyScrollLocks();
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (headerRef.current) {
+      setNavStyle({
+        top: headerRef.current.getBoundingClientRect().bottom
+      });
+    }
+  }, [isExpanded, headerRef]);
+  const handleClick = useCallback(() => {
+    if (navRef.current) {
+      isExpanded ? enableBodyScroll(navRef.current) : disableBodyScroll(navRef.current);
+    }
+
+    setExpand(!isExpanded);
+  }, [isExpanded, navRef]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(MenuButton, {
+    onClick: handleClick,
+    isExpanded: isExpanded
+  }), React__default.createElement("nav", {
+    style: navStyle,
+    ref: navRef,
+    className: classNames(styles.menuPopup, textCn('rs-text-2'), {
+      [styles.menuPopupExpanded]: isExpanded
+    })
+  }, React__default.createElement(MenuList, {
+    items: items,
+    level: 0,
+    linkHandler: linkHandler
+  })));
+};
+
+export { MenuPopup };

package/out/components/header/menu-popup/menu-popup.module.pcss.js

@@ -0,0 +1,5 @@
+var styles = {
+  "menuPopup": "ktl-menu-popup-module_menu-popup_Q68IE",
+  "menuPopupExpanded": "ktl-menu-popup-module_menu-popup-expanded_ggrp9"
+};
+export { styles as default };

package/out/components/header/nav-scheme.js

@@ -0,0 +1,133 @@
+import { PLAYGROUND_URL, KOTLINLANG_URL } from './consts.js';
+const HOME_TITLE = 'Home';
+const HOME_URL = '/';
+const SOLUTIONS_TITLE = 'Solutions';
+const MULTIPLATFORM_MOBILE_TITLE = 'Multiplatform';
+const MULTIPLATFORM_MOBILE_URL = `/lp/mobile/`;
+const SERVER_SIDE_TITLE = 'Server-side';
+const SERVER_SIDE_URL = `/lp/server-side/`;
+const MULTIPLATFORM_LIBRARIES_TITLE = 'Multiplatform libraries';
+const MULTIPLATFORM_LIBRARIES_URL = '/docs/multiplatform-library.html';
+const DATA_SCIENCE_TITLE = 'Data science';
+const DATA_SCIENCE_URL = `/docs/data-science-overview.html`;
+const ANDROID_TITLE = 'Android';
+const ANDROID_URL = `/docs/android-overview.html`;
+const DOCS_TITLE = 'Docs';
+const DOCS_URL = `/docs/home.html`;
+const COMMUNITY_TITLE = 'Community';
+const COMMUNITY_URL = `/community/`;
+const TEACH_TITLE = 'Teach';
+const TEACH_URL = `/education/`;
+const PLAY_TITLE = 'Play';
+const PLAY_TITLE_FULL = 'Playground';
+const PLAY_URL = PLAYGROUND_URL;
+const PLAY_HANDSON_URL = `${PLAY_URL}hands-on`;
+const PLAY_HANDSON_TITLE = 'Hands-on';
+const PLAY_EXAMPLES_URL = `${PLAY_URL}byExample`;
+const PLAY_EXAMPLES_TITLE = 'Examples';
+const PLAY_KOANS_URL = `${PLAY_URL}koans`;
+const PLAY_KOANS_TITLE = 'Koans';
+const KOTLIN_DOCS_TITLE = 'Kotlin';
+const KOTLIN_DOCS_URL = `/docs/home.html`;
+const KMM_DOCS_TITLE = 'KMM';
+const KMM_DOCS_URL = `/docs/mobile/home.html`;
+const navScheme = [{
+  title: HOME_TITLE,
+  url: HOME_URL
+}, {
+  title: SOLUTIONS_TITLE,
+  url: null,
+  items: [{
+    title: MULTIPLATFORM_MOBILE_TITLE,
+    url: MULTIPLATFORM_MOBILE_URL
+  }, {
+    title: SERVER_SIDE_TITLE,
+    url: SERVER_SIDE_URL
+  }, {
+    title: DATA_SCIENCE_TITLE,
+    url: DATA_SCIENCE_URL
+  }, {
+    title: ANDROID_TITLE,
+    url: ANDROID_URL
+  }]
+}, {
+  title: DOCS_TITLE,
+  url: KOTLIN_DOCS_URL
+}, {
+  title: COMMUNITY_TITLE,
+  url: COMMUNITY_URL
+}, {
+  title: TEACH_TITLE,
+  url: TEACH_URL
+}, {
+  title: PLAY_TITLE,
+  url: null,
+  items: [{
+    title: PLAY_TITLE_FULL,
+    url: PLAY_URL
+  }, {
+    title: PLAY_HANDSON_TITLE,
+    url: PLAY_HANDSON_URL
+  }, {
+    title: PLAY_EXAMPLES_TITLE,
+    url: PLAY_EXAMPLES_URL
+  }, {
+    title: PLAY_KOANS_TITLE,
+    url: PLAY_KOANS_URL
+  }]
+}];
+
+function getNavScheme(isUrlActive = (url, currentUrl) => url === currentUrl, currentUrl, isPlayground, withoutHomeSection) {
+  const controlledNavScheme = withoutHomeSection ? navScheme.slice(1) : navScheme;
+  return controlledNavScheme.map(({
+    title,
+    url,
+    items
+  }) => {
+    if (url && currentUrl) {
+      url = makeExternalUrl(url, currentUrl, !!isPlayground);
+    }
+
+    const item = {
+      title,
+      url
+    };
+    let isActive = isUrlActive(url, currentUrl);
+    item.items = items?.map(({
+      title,
+      url: childUrl
+    }) => {
+      if (childUrl && currentUrl) {
+        childUrl = makeExternalUrl(childUrl, currentUrl, !!isPlayground);
+      }
+
+      let childActive = isUrlActive(childUrl, currentUrl);
+
+      if (childActive) {
+        isActive = childActive;
+      }
+
+      return {
+        title,
+        url: childUrl,
+        isActive: childActive
+      };
+    }) ?? [];
+    item.isActive = isActive;
+    return item;
+  });
+}
+
+function makeExternalUrl(url, currentUrl, isPlayground) {
+  if (isPlayground) {
+    if (url.startsWith(PLAY_URL)) {
+      return url.replace(PLAY_URL, '/');
+    } else {
+      return `${KOTLINLANG_URL}${url}`;
+    }
+  }
+
+  return url;
+}
+
+export { ANDROID_TITLE, ANDROID_URL, COMMUNITY_TITLE, COMMUNITY_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, MULTIPLATFORM_LIBRARIES_TITLE, MULTIPLATFORM_LIBRARIES_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_HANDSON_TITLE, PLAY_HANDSON_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, getNavScheme };

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

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

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

@@ -0,0 +1,5 @@
+var styles = {
+  "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

@@ -0,0 +1,37 @@
+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';
+import { SearchResultView } from '../../header.js';
+
+const ResultsList = ({
+  results,
+  searchString,
+  toggleFullSearch,
+  resultListViewType
+}) => {
+  const textCn = useTextStyles();
+  return React__default.createElement("div", {
+    className: classNames(styles.results),
+    "data-test": 'quick-search-results'
+  }, results.length ? React__default.createElement(React__default.Fragment, null, resultListViewType === SearchResultView.Narrow && React__default.createElement("div", {
+    className: styles.topBar
+  }, React__default.createElement("div", {
+    className: classNames(textCn('rs-text-3'), styles.searchString)
+  }, "Showing results for \u00AB", searchString, "\u00BB"), React__default.createElement("button", {
+    className: styles.advancedSearch,
+    onClick: toggleFullSearch,
+    "data-test": 'advanced-search-button'
+  }, React__default.createElement("div", {
+    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
+  }))) : null);
+};
+
+export { ResultsList };

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

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

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { LoadingIcon } from '@rescui/icons';
+import styles from './loading.module.pcss.js';
+
+const LoadingResults = () => {
+  return React__default.createElement("div", {
+    className: styles.loading
+  }, React__default.createElement(LoadingIcon, {
+    theme: 'dark',
+    size: 'l'
+  }));
+};
+
+export { LoadingResults };

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

@@ -0,0 +1,4 @@
+var styles = {
+  "loading": "ktl-loading-module_loading_CtOhW"
+};
+export { styles as default };

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

@@ -0,0 +1,48 @@
+import React__default from 'react';
+import { ThemeProvider } from '@rescui/ui-contexts';
+import classNames from 'classnames';
+import { ResultsList } from './list/list.js';
+import { EmptyResult } from './empty/empty.js';
+import { LoadingResults } from './loading/loading.js';
+import styles from './quick-search.module.pcss.js';
+
+const QuickSearch = ({
+  results,
+  searchString,
+  toggleFullSearch,
+  placeholder,
+  quickSearchBoxViewType
+}) => {
+  const wrapperClassName = classNames(styles.wrapper, {
+    [styles.apiReferenceWrapper]: quickSearchBoxViewType
+  });
+
+  if (placeholder) {
+    return React__default.createElement(ThemeProvider, {
+      theme: 'dark'
+    }, React__default.createElement("div", {
+      className: wrapperClassName
+    }, React__default.createElement(EmptyResult, {
+      placeholder: placeholder
+    })));
+  }
+
+  if (results.length > 0) {
+    return React__default.createElement(ThemeProvider, {
+      theme: 'dark'
+    }, React__default.createElement("div", {
+      className: wrapperClassName
+    }, React__default.createElement(ResultsList, {
+      results: results,
+      searchString: searchString,
+      toggleFullSearch: toggleFullSearch,
+      resultListViewType: quickSearchBoxViewType
+    })));
+  }
+
+  return React__default.createElement("div", {
+    className: wrapperClassName
+  }, React__default.createElement(LoadingResults, null));
+};
+
+export { QuickSearch };

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

@@ -0,0 +1,5 @@
+var styles = {
+  "wrapper": "ktl-quick-search-module_wrapper_kkbQQ",
+  "apiReferenceWrapper": "ktl-quick-search-module_apiReferenceWrapper_jv98t"
+};
+export { styles as default };