@jetbrains/kotlin-web-site-ui 4.5.1 → 4.6.0

package/out/components/cta-block/index.js

@@ -1,3 +1,30 @@
 import './index.css';
-import { CtaBlock } from './cta-block.js';
-export { CtaBlock as default } from './cta-block.js';
+import React from 'react';
+import styles from './cta-block.module.pcss.js';
+
+const CtaBlock = ({
+  topTitle,
+  mainTitle,
+  children,
+  buttons
+}) => {
+  return React.createElement("div", {
+    className: styles.wrapper
+  }, React.createElement("div", {
+    className: "ktl-container"
+  }, topTitle && React.createElement("div", {
+    className: styles.topTitle
+  }, React.createElement("div", {
+    className: "ktl-text-2 ktl-text-2_theme_dark"
+  }, topTitle)), React.createElement("div", {
+    className: styles.mainTitle
+  }, React.createElement("h2", {
+    className: "ktl-hero ktl-hero_theme_dark"
+  }, mainTitle)), children && React.createElement("div", {
+    className: styles.content
+  }, children), React.createElement("div", null), buttons && React.createElement("div", {
+    className: styles.buttons
+  }, buttons)));
+};
+
+export { CtaBlock };

package/out/components/cta-block-v2/cta-block.module.pcss.js

@@ -0,0 +1,9 @@
+var styles = {
+  "wrapper": "ktl-cta-block-module_wrapper_U-RIE",
+  "topTitle": "ktl-cta-block-module_top-title_ve70f",
+  "mainTitle": "ktl-cta-block-module_main-title_JbxBG",
+  "content": "ktl-cta-block-module_content_lCnnn",
+  "buttons": "ktl-cta-block-module_buttons_ObAIt",
+  "layout": "ktl-cta-block-module_layout_J-jWe"
+};
+export { styles as default };

package/out/components/cta-block-v2/index.css

@@ -0,0 +1,20 @@
+.ktl-cta-block-module_wrapper_U-RIE {
+    background: radial-gradient(
+            89.53% 145.96% at 0.34% 100.79%,
+            #EF4857 0%,
+            #DE4970 17.58%,
+            #B44DB0 50.31%,
+            #7F52FF 97.03%
+    );
+
+    padding: var(--ktl-box-page-m) 0;
+}
+
+.ktl-cta-block-module_top-title_ve70f, .ktl-cta-block-module_main-title_JbxBG, .ktl-cta-block-module_content_lCnnn, .ktl-cta-block-module_buttons_ObAIt {
+    margin-top: 0;
+    margin-bottom: var(--ktl-box-section-s);
+}
+
+.ktl-cta-block-module_layout_J-jWe > .ktl-cta-block-module_top-title_ve70f:last-child, .ktl-cta-block-module_layout_J-jWe > .ktl-cta-block-module_main-title_JbxBG:last-child, .ktl-cta-block-module_layout_J-jWe > .ktl-cta-block-module_content_lCnnn:last-child, .ktl-cta-block-module_layout_J-jWe > .ktl-cta-block-module_buttons_ObAIt:last-child {
+        margin-bottom: 0;
+    }

package/out/components/cta-block-v2/index.js

@@ -0,0 +1,47 @@
+import './index.css';
+import React from 'react';
+import cn from 'classnames';
+import { ThemeProvider } from '@rescui/ui-contexts';
+import { useTextStyles } from '@rescui/typography';
+import styles from './cta-block.module.pcss.js';
+
+function Cta({
+  className,
+  classTopTitle,
+  topTitle,
+  classMainTitle,
+  mainTitle,
+  classContent,
+  children,
+  classButtons,
+  buttons
+}) {
+  const textCn = useTextStyles();
+  return React.createElement("div", {
+    className: cn(className, styles.wrapper)
+  }, React.createElement("div", {
+    className: cn(styles.layout, 'ktl-layout ktl-layout--center')
+  }, topTitle && React.createElement("div", {
+    className: cn(classTopTitle, styles.topTitle, textCn('rs-text-2', {
+      hardness: 'hard'
+    }))
+  }, topTitle), React.createElement("h2", {
+    className: cn(classMainTitle, styles.mainTitle, textCn('rs-h2'))
+  }, mainTitle), children && React.createElement("div", {
+    className: cn(classContent, styles.content)
+  }, children), buttons && React.createElement("div", {
+    className: cn(classButtons, styles.buttons)
+  }, buttons)));
+}
+
+function CtaBlock({
+  theme,
+  ...props
+}) {
+  return React.createElement(ThemeProvider, {
+    theme: theme || 'dark'
+  }, React.createElement(Cta, { ...props
+  }));
+}
+
+export { CtaBlock };

package/out/components/footer/index.css

@@ -36,6 +36,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-social-item-module_social-item_GpKEF {
   width: 36px;
   height: 36px;
@@ -94,6 +108,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-nav-item-module_nav-item_isoyN {
   padding-right: 12px;
   margin-right: 12px;
@@ -152,6 +180,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-footer-module_footer_m67Up {
   background: var(--ktl-light-grey);
   padding: 32px 16px 16px;

package/out/components/header/index.css

@@ -44,6 +44,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-header-module_header-menu_wh71L {
   position: relative;
   padding: 0 32px;
@@ -90,6 +104,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-horizontal-menu-module_nav_gbA7M {
   display: block;
 }
@@ -240,6 +268,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-search-button-module_button_YHJPv {
   display: flex;
   visibility: hidden;
@@ -704,6 +746,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-menu-popup-module_menu-popup_Q68IE {
     display: none;
     padding: 8px 0 56px 0;
@@ -768,6 +824,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-menu-list-item-module_menu-item_Aruue {
     --level: 0;
     display: flex;
@@ -827,6 +897,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-menu-list-module_menu-item-group_mFvUE {
     margin: 8px 0 8px 0;
     padding: 4px 0 8px 0;

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

@@ -20,6 +20,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-top-menu-module_top-menu_PRX9X {
   position: relative;
   display: grid;
@@ -98,6 +112,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-vertical-menu-module_vertical-menu_aLIbw {
     display: block;
     height: 100%;

package/out/components/typography/hooks.js

@@ -1,6 +1,6 @@
 import { useTheme } from '@rescui/ui-contexts';
 import { createTextCn } from './create-text-cn.js';
 
-const useTextStyles = () => createTextCn(useTheme());
+const useTextStyles = theme => createTextCn(useTheme(theme));
 
 export { useTextStyles };

package/out/components/typography/index.css

@@ -20,6 +20,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-hero {
         font-family: var(--ktl-font-family-inter);
         color: var(--ktl-light-text-hard);

package/out/components/youtube-player/index.css

@@ -20,6 +20,20 @@
   --rs-font-family-ui: var(--ktl-font-family-inter);
 }
 
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
 .ktl-youtube-player-module_youtube-player_aSb0a {
   position: relative;
   width: 100%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [

package/out/components/cta-block/cta-block.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import styles from './cta-block.module.pcss.js';
-
-const CtaBlock = ({
-  topTitle,
-  mainTitle,
-  children,
-  buttons
-}) => {
-  return React.createElement("div", {
-    className: styles.wrapper
-  }, React.createElement("div", {
-    className: 'ktl-container'
-  }, topTitle && React.createElement("div", {
-    className: styles.topTitle
-  }, React.createElement("div", {
-    className: 'ktl-text-2 ktl-text-2_theme_dark'
-  }, topTitle)), React.createElement("div", {
-    className: styles.mainTitle
-  }, React.createElement("h2", {
-    className: 'ktl-hero ktl-hero_theme_dark'
-  }, mainTitle)), children && React.createElement("div", {
-    className: styles.content
-  }, children), React.createElement("div", null), buttons && React.createElement("div", {
-    className: styles.buttons
-  }, buttons)));
-};
-
-export { CtaBlock };