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

package/out/components/quotes-slider/index.css

@@ -0,0 +1,86 @@
+.ktl-quotes-slider-module_quotes-slider_y2xdf {
+    display: block;
+}
+
+@media (min-width: 768px) {
+
+.ktl-quotes-slider-module_content_ycgWG {
+        display: flex
+}
+    }
+
+.ktl-quotes-slider-module_icon-container_tRSxF {
+    display: flex;
+    margin-right: 32px;
+}
+
+@media (max-width: 767px) {
+
+.ktl-quotes-slider-module_icon-container_tRSxF {
+        margin-bottom: 16px
+}
+    }
+
+.ktl-quotes-slider-module_nav_0aZMC {
+    margin-top: 16px;
+}
+
+@media (min-width: 768px) {
+
+.ktl-quotes-slider-module_nav_0aZMC {
+        margin-top: 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center
+}
+    }
+
+.ktl-quotes-slider-module_title_wOsKl p {
+        color: var(--ktl-icon-color-dark);
+    }
+
+.ktl-quotes-slider-module_controls_OuyQ8 {
+    display: flex;
+    align-items: center;
+    color: var(--ktl-icon-color-dark);
+}
+
+@media (max-width: 767px) {
+
+.ktl-quotes-slider-module_controls_OuyQ8 {
+        margin-top: 20px
+}
+    }
+
+.ktl-quotes-slider-module_control_eN3Tf {
+    opacity: 0.5;
+    display: flex;
+    cursor: pointer;
+    transition: opacity .3s;
+    color: var(--ktl-dark-100);
+}
+
+.ktl-quotes-slider-module_control-active_sE-QK {
+    opacity: 0.75;
+}
+
+.ktl-quotes-slider-module_control-active_sE-QK:hover {
+        opacity: 1;
+    }
+
+.ktl-quotes-slider-module_control-prev_9eMAN {
+    transform: scale(-1);
+}
+
+.ktl-quotes-slider-module_slides-count_T0-Ln {
+    margin: 0 30px;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    min-width: 40px;
+    text-align: center;
+}
+
+.ktl-quotes-slider-module_slides-count_T0-Ln p {
+        color: var(--ktl-icon-color-dark);
+    }

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

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

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

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import SwipeableViews from 'react-swipeable-views';
+import cn from 'classnames';
+import SvgQuote from './quote.svg.js';
+import SvgSliderArrow from './slider-arrow.svg.js';
+import styles from './quotes-slider.module.pcss.js';
+
+const QuotesSlider = ({
+  quotes,
+  large
+}) => {
+  const [index, setIndex] = useState(0);
+  const totalSlides = quotes.length;
+  const handleNextSlide = useCallback(() => {
+    if (index + 1 < totalSlides) {
+      setIndex(index + 1);
+    }
+  }, [index]);
+  const handlePrevSlide = useCallback(() => {
+    if (index > 0) {
+      setIndex(index - 1);
+    }
+  }, [index]);
+  const handleChangeIndex = useCallback(i => {
+    setIndex(i);
+  }, [index]);
+  const slideTitle = quotes[index].title;
+  const prevButtonClass = cn([styles.control, styles.controlPrev], {
+    [styles.controlActive]: index > 0
+  });
+  const nextButtonClass = cn(styles.control, {
+    [styles.controlActive]: index + 1 < totalSlides
+  });
+  const quoteTextClass = large ? 'ktl-subtitle' : 'ktl-text-1';
+  return jsx("div", Object.assign({
+    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);
+};
+
+export { QuotesSlider };

package/out/components/quotes-slider/quote.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 SvgQuote = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 51,
+  height: 40,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M51 27.693C51 34.49 45.468 40 38.644 40s-12.356-5.51-12.356-12.307a12.23 12.23 0 0 1 3.457-8.524L49.75 0l1.105 1.144-15.289 14.643c.986-.252 2.013-.4 3.078-.4 6.824 0 12.356 5.51 12.356 12.306ZM12.356 15.386c-1.065 0-2.092.149-3.078.4L24.567 1.145 23.462 0 3.457 19.169A12.23 12.23 0 0 0 0 27.693C0 34.49 5.532 40 12.356 40s12.356-5.51 12.356-12.307c0-6.797-5.532-12.307-12.356-12.307Z",
+  fill: "#27282C"
+})));
+
+export { SvgQuote as default };

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

@@ -0,0 +1,13 @@
+var styles = {
+  "quotesSlider": "ktl-quotes-slider-module_quotes-slider_y2xdf",
+  "content": "ktl-quotes-slider-module_content_ycgWG",
+  "iconContainer": "ktl-quotes-slider-module_icon-container_tRSxF",
+  "nav": "ktl-quotes-slider-module_nav_0aZMC",
+  "title": "ktl-quotes-slider-module_title_wOsKl",
+  "controls": "ktl-quotes-slider-module_controls_OuyQ8",
+  "control": "ktl-quotes-slider-module_control_eN3Tf",
+  "controlActive": "ktl-quotes-slider-module_control-active_sE-QK",
+  "controlPrev": "ktl-quotes-slider-module_control-prev_9eMAN",
+  "slidesCount": "ktl-quotes-slider-module_slides-count_T0-Ln"
+};
+export { styles as default };

package/out/components/quotes-slider/slider-arrow.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 SvgSliderArrow = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 19,
+  height: 14,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M19 7.1 11 14V8.1H0v-2h11V.3l8 6.8Z",
+  fill: "currentColor"
+})));
+
+export { SvgSliderArrow as default };

package/out/components/top-menu/dropdown-menu/arrow-dropdown-icon.svg.js

@@ -0,0 +1,34 @@
+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 SvgArrowDropdownIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
+  viewBox: "0 0 12 6",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "m6 6 5.25-6H.75L6 6Z",
+  fill: "currentColor"
+})));
+
+export { SvgArrowDropdownIcon as default };

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

@@ -0,0 +1,81 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import styles from './dropdown-menu.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+import SvgArrowDropdownIcon from './arrow-dropdown-icon.svg.js';
+import { useTheme } from '@rescui/ui-contexts';
+
+const DropdownMenu = ({
+  homeUrl,
+  title,
+  mobileTitle = 'Overview',
+  items,
+  activeIndex,
+  linkHandler,
+  mobileOverview = true
+}) => {
+  const theme = useTheme();
+  const textCn = useTextStyles();
+  const [portalRoot, setPortalRoot] = React__default.useState(null);
+  React__default.useEffect(() => {
+    if (typeof document !== `undefined`) {
+      setPortalRoot(document.body);
+    }
+  }, []);
+
+  let _items = (mobileOverview ? [{
+    title: mobileTitle,
+    url: homeUrl
+  }] : []).concat(items);
+
+  const _activeIndex = mobileOverview ? activeIndex + 1 : activeIndex;
+
+  const activeItem = _items[_activeIndex];
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  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);
+};
+
+export { DropdownMenu };

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

@@ -0,0 +1,14 @@
+var styles = {
+  "dropdownMenu": "ktl-dropdown-menu-module_dropdown-menu_tq2uU",
+  "button": "ktl-dropdown-menu-module_button_OYsuv",
+  "icon": "ktl-dropdown-menu-module_icon_GGhMI",
+  "dropdownList": "ktl-dropdown-menu-module_dropdown-list_Ylkvt",
+  "fadein": "ktl-dropdown-menu-module_fadein_MySnq",
+  "dropdownItem": "ktl-dropdown-menu-module_dropdown-item_X3tZ-",
+  "dropdownItemActive": "ktl-dropdown-menu-module_dropdown-item-active_99q9X",
+  "overlay": "ktl-dropdown-menu-module_overlay_segRo",
+  "overlayVisible": "ktl-dropdown-menu-module_overlay-visible_MjwEF",
+  "dropdownMenuExpanded": "ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy",
+  "dropdownListDarkTheme": "ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol"
+};
+export { styles as default };

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

@@ -0,0 +1,48 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import classNames from 'classnames';
+import styles from './horizontal-menu.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+
+const HorizontalMenuItem = ({
+  item,
+  isActive,
+  linkHandler
+}) => {
+  const textCn = useTextStyles();
+  const handleLink = useCallback(event => linkHandler(event, item.url), [item]);
+  return isActive ? jsx("span", Object.assign({
+    className: styles.itemActive
+  }, {
+    children: item.title
+  }), item.url) : jsx("a", Object.assign({
+    href: 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);
+};
+
+const HorizontalMenu = ({
+  items,
+  activeIndex,
+  linkHandler
+}) => {
+  const textCn = useTextStyles();
+  return jsx("nav", Object.assign({
+    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);
+};
+
+export { HorizontalMenu };

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

@@ -0,0 +1,6 @@
+var styles = {
+  "horizontalMenu": "ktl-horizontal-menu-module_horizontal-menu_pB2-S",
+  "item": "ktl-horizontal-menu-module_item_yv0RR",
+  "itemActive": "ktl-horizontal-menu-module_item-active_Dot-8"
+};
+export { styles as default };

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

@@ -0,0 +1,224 @@
+: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-overlay-z-index: 900;
+  --ktl-top-menu-z-index: 905;
+  --ktl-header-z-index: 906;
+  --ktl-header-height-mobile: 48px;
+  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+  --rs-font-family-ui: var(--ktl-font-family-inter);
+}
+
+.ktl-top-menu-module_top-menu_PRX9X {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-flow: column;
+  justify-items: stretch;
+  align-items: center;
+  grid-gap: 32px;
+  height: 64px;
+  background: #ffffff;
+  padding: 0 32px;
+  z-index: var(--ktl-top-menu-z-index);
+  box-shadow: inset 0 -1px 0 0 var(--ktl-light-dark-20);
+  transition: color var(--ktl-transition-fast),
+  background-color var(--ktl-transition-fast);
+}
+
+.ktl-top-menu-module_top-menu-dark-theme_aNBxr {
+  background: #1b1b1b;
+  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
+}
+
+.ktl-top-menu-module_logo_CNH2W {
+  text-decoration: none;
+  white-space: nowrap;
+  justify-self: flex-start;
+}
+
+@media (max-width: 640px) {
+  .ktl-top-menu-module_top-menu_PRX9X {
+    height: 48px;
+    padding: 0 16px;
+    grid-gap: 16px;
+  }
+
+  .ktl-top-menu-module_logo_CNH2W {
+    display: none;
+  }
+}
+
+.ktl-horizontal-menu-module_horizontal-menu_pB2-S {
+  display: grid;
+  grid-auto-flow: column;
+  gap: 32px;
+}
+
+.ktl-horizontal-menu-module_item_yv0RR, .ktl-horizontal-menu-module_item_yv0RR:hover {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.ktl-horizontal-menu-module_item-active_Dot-8 {
+  cursor: default;
+  color: var(--ktl-color-primary-light-theme);
+}
+
+@media (max-width: 640px) {
+  .ktl-horizontal-menu-module_horizontal-menu_pB2-S {
+    display: 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-overlay-z-index: 900;
+  --ktl-top-menu-z-index: 905;
+  --ktl-header-z-index: 906;
+  --ktl-header-height-mobile: 48px;
+  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+  --rs-font-family-ui: var(--ktl-font-family-inter);
+}
+
+.ktl-dropdown-menu-module_dropdown-menu_tq2uU {
+  display: none;
+  height: 100%;
+  justify-self: flex-start;
+  white-space: nowrap;
+}
+
+.ktl-dropdown-menu-module_button_OYsuv {
+  border: none;
+  background: none;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.ktl-dropdown-menu-module_icon_GGhMI {
+  width: 12px;
+  height: 6px;
+  margin-left: 6px;
+  transition: transform ease-in-out var(--ktl-transition-xfast);
+}
+
+.ktl-dropdown-menu-module_dropdown-list_Ylkvt {
+  display: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  opacity: 0;
+  -webkit-animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
+          animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
+}
+
+.ktl-dropdown-menu-module_dropdown-item_X3tZ- {
+  padding: 8px 16px;
+  text-decoration: none;
+  transition: color var(--ktl-transition-xfast),
+    background-color var(--ktl-transition-xfast);
+}
+
+.ktl-dropdown-menu-module_dropdown-item_X3tZ-:hover {
+    background: rgba(39, 40, 44, 0.1);
+    color: #27282c;
+  }
+
+.ktl-dropdown-menu-module_dropdown-item_X3tZ-.ktl-dropdown-menu-module_dropdown-item-active_99q9X {
+    background: var(--ktl-dark-100);
+    color: #ffffff;
+  }
+
+.ktl-dropdown-menu-module_overlay_segRo {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background-color: var(--ktl-color-dark-40);
+  z-index: var(--ktl-overlay-z-index);
+  -webkit-animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
+          animation: ktl-dropdown-menu-module_fadein_MySnq ease-out var(--ktl-transition-fast) forwards;
+}
+
+.ktl-dropdown-menu-module_overlay-visible_MjwEF {
+  display: block;
+  opacity: 1;
+}
+
+.ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy .ktl-dropdown-menu-module_icon_GGhMI {
+    transform: scale(1, -1);
+  }
+
+.ktl-dropdown-menu-module_dropdown-menu-expanded_EQefy .ktl-dropdown-menu-module_dropdown-list_Ylkvt {
+    display: flex;
+    flex-direction: column;
+    opacity: 1;
+  }
+
+.ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol {
+  background: var(--ktl-dark-bg-hard);
+}
+
+.ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol .ktl-dropdown-menu-module_dropdown-item_X3tZ-:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #ffffff;
+    }
+
+.ktl-dropdown-menu-module_dropdown-list-dark-theme_P60ol .ktl-dropdown-menu-module_dropdown-item_X3tZ-.ktl-dropdown-menu-module_dropdown-item-active_99q9X {
+      color: var(--ktl-light-text-hard);
+      background: #ffffff;
+    }
+
+@media (max-width: 640px) {
+  .ktl-dropdown-menu-module_dropdown-menu_tq2uU {
+    display: block;
+  }
+}
+
+@-webkit-keyframes ktl-dropdown-menu-module_fadein_MySnq {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ktl-dropdown-menu-module_fadein_MySnq {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

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

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