@jetbrains/ring-ui 6.0.1-beta.0 → 6.0.1

package/components/global/rerender-hoc.js

@@ -1,28 +1,14 @@
-import { createElement } from 'react';
-import { render } from './react-render-adapter';
+import React, { Component, forwardRef } from 'react';
 import composeRefs from './composeRefs';
-/**
- * Wraps a component to add a "rerender" method
- * @param ComposedComponent
- * @param captureNode, whether the wrapper should capture this.node itself. Set to false if the component already has "node" property captured
- * @returns {Rerenderer}
- */
 export default function rerenderHOC(ComposedComponent) {
-    return class Rerenderer extends ComposedComponent {
-        _propsCache = this.props;
-        rerender(props = {}, callback) {
-            let container;
-            try {
-                container = this.node?.parentNode;
-            }
-            finally {
-                if (!container || !(container instanceof Element)) {
-                    throw new Error(`${this.constructor.name} component isn't mounted`);
-                }
-            }
-            this._propsCache = Object.assign({}, this.props, this._propsCache, props);
-            this._propsCache.ref = composeRefs(this._propsCache.ref, callback);
-            render(createElement(this.constructor, this._propsCache), container);
+    class Rerenderer extends Component {
+        state = this.props.props;
+        render() {
+            const ref = composeRefs(this.props.forwardedRef);
+            return (<ComposedComponent {...this.state} ref={instance => ref(instance != null ? { ...instance, rerender: this.setState.bind(this) } : null)}/>);
         }
-    };
+    }
+    return forwardRef(function RerendererForwardRef(props, ref) {
+        return <Rerenderer props={props} forwardedRef={ref}/>;
+    });
 }

package/components/global/variables.css

@@ -17,8 +17,6 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #e8e8e8 */
   --ring-border-selected-disabled-components: 212, 212, 212;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #d4d4d4 */
-  --ring-border-unselected-disabled-components: 232, 232, 232;
-  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #e8e8e8 */ /* TODO remove in 6.0 */
   --ring-icon-disabled-components: 212, 212, 212;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d4d4d4 */
   --ring-border-hover-components: 128, 198, 255;
@@ -51,6 +49,7 @@
   --ring-button-danger-hover-color: var(--ring-icon-error-color);
   --ring-button-primary-border-components: 0, 98, 178;
   --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #0062b2 */
+  --ring-dialog-overlay-components: 0, 0, 0;
   --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
   --ring-dialog-shadow: 0 4px 24px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
 

package/components/global/variables.d.ts

@@ -6,7 +6,6 @@ export interface RingCSSProperties {
     '--ring-icon-color'?: Property.Color;
     '--ring-icon-secondary-color'?: Property.Color;
     '--ring-border-disabled-color'?: Property.BorderColor;
-    '--ring-border-unselected-disabled-color'?: Property.Color;
     '--ring-icon-disabled-color'?: Property.Color;
     '--ring-border-hover-color'?: Property.BorderColor;
     '--ring-icon-hover-color'?: Property.Color;

package/components/global/variables_dark.css

@@ -3,92 +3,96 @@
 :global(.ring-ui-theme-dark),
 .dark,
 :root.dark {
-  --ring-line-components: 71, 81, 89;
-  --ring-line-color: rgb(var(--ring-line-components)); /* #475159 */
-  --ring-borders-components: 64, 99, 128;
-  --ring-borders-color: rgb(var(--ring-borders-components)); /* #406380 */
-  --ring-icon-components: 128, 146, 157;
-  --ring-icon-color: rgb(var(--ring-icon-components)); /* #80929d */
-  --ring-icon-secondary-components: 128, 146, 157;
-  --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #80929d */
-  --ring-border-disabled-components: 54, 54, 54;
-  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #363636 */
+  --ring-line-components: 57, 59, 64;
+  --ring-line-color: rgb(var(--ring-line-components)); /* #393B40 */
+  --ring-borders-components: 90, 93, 99;
+  --ring-borders-color: rgb(var(--ring-borders-components)); /* #5A5D63 */
+  --ring-icon-components: 119, 124, 136;
+  --ring-icon-color: rgb(var(--ring-icon-components)); /* #777C88 */
+  --ring-icon-secondary-components: 121, 126, 139;
+  --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #797E8B */
+  --ring-border-disabled-components: 55, 57, 61;
+  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #37393D */
   --ring-border-selected-disabled-components: 54, 54, 54;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #363636 */
-  --ring-border-unselected-disabled-components: 54, 54, 54;
-  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #363636 */ /* TODO remove in 6.0 */
-  --ring-icon-disabled-components: 80, 82, 83;
-  --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #505253 */
-  --ring-border-hover-components: 112, 177, 230;
-  --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #70b1e6 */
-  --ring-main-components: 0, 142, 255;
-  --ring-main-color: rgb(var(--ring-main-components)); /* #008eff */
-  --ring-action-link-components: var(--ring-main-components);
-  --ring-action-link-color: rgb(var(--ring-main-components)); /* #008eff */
-  --ring-main-hover-components: 0, 126, 229;
-  --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #007ee5 */
-  --ring-icon-error-components: 219, 88, 96;
-  --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #db5860 */
-  --ring-icon-warning-components: 237, 162, 0;
-  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #eda200 */
-  --ring-icon-success-components: 71, 212, 100;
-  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #47d464 */
-  --ring-popup-border-components: 0, 42, 76;
-  --ring-popup-border-color: rgba(var(--ring-popup-border-components), 0.1);
-  --ring-popup-shadow-color: rgba(var(--ring-popup-border-components), 0.15);
+  --ring-icon-disabled-components: 64, 66, 71;
+  --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #404247 */
+  --ring-border-hover-components: 77, 100, 148;
+  --ring-border-hover-color: rgb(var(--ring-border-hover-components)); /* #4D6494 */
+  --ring-main-components: 53, 116, 240;
+  --ring-main-color: rgb(var(--ring-main-components)); /* #3574F0 */
+  --ring-action-link-components: 135, 166, 227;
+  --ring-action-link-color: rgb(var(--ring-action-link-components)); /* #87A6E3 */
+  --ring-main-hover-components: 45, 105, 224;
+  --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #2D69E0 */
+  --ring-icon-error-components: 193, 88, 88;
+  --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #c15858 */
+  --ring-icon-warning-components: 194, 161, 81;
+  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #C2A151 */
+  --ring-icon-success-components: 94, 156, 98;
+  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #5E9C62 */
+  --ring-popup-border-components: 57, 59, 64;
+  --ring-popup-border-color: rgb(var(--ring-popup-border-components)); /* #393b40 */
+  --ring-popup-shadow-color: rgba(0, 0, 0, 0.31);
+  --ring-popup-secondary-shadow-color: rgba(0, 0, 0, 0.37);
   --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
   --ring-pinned-shadow-components: 0, 0, 0;
   --ring-pinned-shadow-color: rgb(var(--ring-pinned-shadow-components)); /* #000 */
   --ring-button-danger-hover-color: var(--ring-error-color);
   --ring-button-primary-border-components: 128, 198, 255;
   --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #80c6ff */
+  --ring-dialog-overlay-components: 0, 0, 0;
+  --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
+  --ring-dialog-shadow: 0 4px 16px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
 
   /* Text */
   --ring-hint-components: 128, 146, 157;
   --ring-hint-color: rgb(var(--ring-hint-components)); /* #80929d */
-  --ring-link-components: 112, 177, 230;
-  --ring-link-color: rgb(var(--ring-link-components)); /* #70b1e6 */
-  --ring-error-components: 219, 88, 96;
-  --ring-error-color: rgb(var(--ring-error-components)); /* #db5860 */
-  --ring-warning-components: 237, 162, 0;
-  --ring-warning-color: rgb(var(--ring-warning-components)); /* #eda200 */
-  --ring-success-components: 71, 212, 100;
-  --ring-success-color: rgb(var(--ring-success-components)); /* #47d464 */
-  --ring-text-components: 187, 187, 187;
-  --ring-text-color: rgb(var(--ring-text-components)); /* #bbb */
+  --ring-link-components: 133, 166, 227;
+  --ring-link-color: rgb(var(--ring-link-components)); /* #87A6E3 */
+  --ring-link-hover-components: 224, 103, 178;
+  --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #E067B2 */
+  --ring-error-components: 222, 99, 99;
+  --ring-error-color: rgb(var(--ring-error-components)); /* #DE6363 */
+  --ring-warning-components: 218, 179, 88;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #DAB358 */
+  --ring-success-components: 109, 182, 115;
+  --ring-success-color: rgb(var(--ring-success-components)); /* #6DB673 */
+  --ring-text-components: 195, 198, 204;
+  --ring-text-color: rgb(var(--ring-text-components)); /* #C3C6CC */
   --ring-active-text-components: 255, 255, 255;
   --ring-active-text-color: rgb(var(--ring-active-text-components)); /* #fff */
   --ring-heading-color: var(--ring-text-color);
-  --ring-secondary-components: 128, 146, 157;
-  --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #80929d */
-  --ring-disabled-components: 81, 95, 104;
-  --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #515F68 */
+  --ring-secondary-components: 137, 141, 148;
+  --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #898D94 */
+  --ring-disabled-components: 100, 103, 110;
+  --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #64676E */
 
   /* Background */
-  --ring-content-background-components: 35, 39, 43;
-  --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #23272b */
-  --ring-popup-background-components: 17, 19, 20;
-  --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #111314 */
-  --ring-sidebar-background-components: 40, 52, 61;
-  --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #28343d */
-  --ring-selected-background-components: 6, 38, 64;
-  --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #062640 */
-  --ring-hover-background-components: 11, 26, 38;
-  --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #0b1a26 */
+  --ring-content-background-components: 37, 38, 41;
+  --ring-content-background-color: rgb(var(--ring-content-background-components)); /* #252629 */
+  --ring-popup-background-components: 41, 43, 46;
+  --ring-popup-background-color: rgb(var(--ring-popup-background-components)); /* #292B2E */
+  --ring-sidebar-background-components: 32, 33, 36;
+  --ring-sidebar-background-color: rgb(var(--ring-sidebar-background-components)); /* #202124 */
+  --ring-selected-background-components: 49, 67, 105;
+  --ring-selected-background-color: rgb(var(--ring-selected-background-components)); /* #314369 */
+  --ring-hover-background-components: 40, 51, 71;
+  --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #283347 */
   --ring-navigation-background-components: 17, 19, 20;
   --ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #111314 */
-  --ring-tag-background-components: 62, 77, 89;
-  --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #3e4d59 */
-  --ring-tag-hover-background-components: 51, 62, 71;
-  --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #333e47 */
-  --ring-removed-background-components: 143, 82, 71;
-  --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #8f5247 */
-  --ring-warning-background-components: 89, 61, 1;
-  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #593d01 */
-  --ring-added-background-components: 54, 89, 71;
-  --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #365947 */
-  --ring-disabled-background-components: 44, 47, 51;
-  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #2C2F33 */
+  --ring-tag-background-components: 53, 55, 59;
+  --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #35373B */
+  --ring-tag-hover-background-components: 50, 52, 57;
+  --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #323439 */
+  --ring-removed-background-components: 95, 53, 53;
+  --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #5f3535 */
+  --ring-warning-background-components: 94, 77, 51;
+  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #5e4d33 */
+  --ring-added-background-components: 51, 76, 53;
+  --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #334c35 */
+  --ring-disabled-background-components: 38, 40, 43;
+  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #26282B */
   --ring-disabled-selected-background-components: 44, 47, 51;
   --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #2C2F33 */
   --ring-button-danger-active-components: 38, 8, 10;

package/components/grid/grid.css

@@ -1,10 +1,10 @@
 @import "../global/variables.css";
 
-@value unit, breakpoint-small, breakpoint-middle, breakpoint-large  from "../global/global.css";
+@value breakpoint-small, breakpoint-middle, breakpoint-large  from "../global/global.css";
 @value large-screen-media, middle-screen-media, small-screen-media from "../global/global.css";
-@value gutterWidth: (unit*2);
+@value gutterWidth: (var(--ring-unit) * 2);
 @value gutterCompensation: calc(gutterWidth / -2);
-@value outerMargin: calc(unit*2);
+@value outerMargin: calc(var(--ring-unit) * 2);
 @value containerSmall: calc(breakpoint-small + gutterWidth);
 @value containerMedium: calc(breakpoint-middle + gutterWidth);
 @value containerLarge: calc(breakpoint-large + gutterWidth);
@@ -28,7 +28,7 @@
 }
 
 .container-fluid {
-  min-width: calc(unit * 40);
+  min-width: calc(var(--ring-unit) * 40);
   padding-right: outerMargin;
   padding-left: outerMargin;
 }
@@ -48,8 +48,8 @@
 }
 
 .col {
-  margin-top: unit;
-  margin-bottom: unit;
+  margin-top: var(--ring-unit);
+  margin-bottom: var(--ring-unit);
 }
 
 .col.reverse {

package/components/grid/row.js

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import styles from './grid.css';
 const ModifierType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg']);
 const modifierKeys = [
-    'start', 'center', 'end',
-    'around', 'between',
-    'top', 'middle', 'baseline', 'bottom',
+    'start', 'center', 'end', // text-align, justify-content
+    'around', 'between', // justify-content
+    'top', 'middle', 'baseline', 'bottom', // align-items
     'first', 'last' // order
 ];
 /**

package/components/group/group.css

@@ -1,9 +1,7 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .group {
   & > *:not(:last-child) {
-    margin-right: unit;
+    margin-right: var(--ring-unit);
   }
 }

package/components/header/header.css

@@ -1,11 +1,9 @@
 @import "../global/variables.css";
 
 @value dark from "../global/variables_dark.css";
-@value unit from "../global/global.css";
 @value link, active from "../link/link.css";
-@value height: calc(unit * 8);
 @value compensate: 3px;
-@value compensated: calc(height - compensate);
+@value compensated: calc(calc(var(--ring-unit) * 8) - compensate);
 
 :root {
   --ring-header-link-color: var(--ring-link-color);
@@ -22,7 +20,7 @@
   align-items: center;
 
   box-sizing: border-box;
-  height: height;
+  height: calc(var(--ring-unit) * 8);
 
   color: var(--ring-text-color);
 
@@ -34,8 +32,8 @@
     display: inline-block;
 
     box-sizing: border-box;
-    height: height;
-    padding: 0 calc(unit * 1.5) compensate;
+    height: calc(var(--ring-unit) * 8);
+    padding: 0 calc(var(--ring-unit) * 1.5) compensate;
   }
 
   /* override link */
@@ -50,11 +48,11 @@
 
 .headerSpaced {
   & > *:first-child {
-    padding-left: calc(unit * 4);
+    padding-left: calc(var(--ring-unit) * 4);
   }
 
   & > *:last-child {
-    padding-right: calc(unit * 4);
+    padding-right: calc(var(--ring-unit) * 4);
   }
 }
 
@@ -62,7 +60,7 @@
   display: inline-flex;
   align-items: center;
 
-  height: height;
+  height: calc(var(--ring-unit) * 8);
 
   color: var(--ring-navigation-background-color);
 
@@ -90,7 +88,7 @@
 }
 
 .icon {
-  width: calc(unit * 5);
+  width: calc(var(--ring-unit) * 5);
 
   text-align: center;
 
@@ -101,7 +99,7 @@
 .icon.icon {
   height: compensated;
 
-  padding-top: calc(unit / 2);
+  padding-top: calc(var(--ring-unit) / 2);
 
   line-height: compensated;
 }
@@ -125,7 +123,7 @@
 
   width: auto;
   height: compensated;
-  padding-left: unit;
+  padding-left: var(--ring-unit);
 
   vertical-align: bottom;
 }
@@ -159,8 +157,8 @@
 
     display: block;
 
-    width: unit;
-    height: unit;
+    width: var(--ring-unit);
+    height: var(--ring-unit);
 
     content: "";
 

package/components/header/profile.js

@@ -93,7 +93,7 @@ export default class Profile extends PureComponent {
             {
                 rgItemType: PopupMenu.ListProps.Type.LINK,
                 label: translations?.profile ?? translate('profile'),
-                target: '_self',
+                target: '_self', // Full page reload in Angular
                 href: profileUrl,
                 LinkComponent
             },

package/components/header/services-link.js

@@ -15,14 +15,12 @@ export default class ServicesLink extends PureComponent {
     render() {
         const { service, ...props } = this.props;
         return (<Link target="_self" href={service.homeUrl} {...props}>
-        {WrapText => (service.iconUrl
+        {service.iconUrl
                 ? [
                     <span key="icon" className={styles.itemLogo} style={{ backgroundImage: `url(${service.iconUrl})` }}/>,
-                    <div key="text">
-              <WrapText>{service.name}</WrapText>
-            </div>
+                    <div key="text">{service.name}</div>
                 ]
-                : <WrapText>{service.name}</WrapText>)}
+                : service.name}
       </Link>);
     }
 }

package/components/header/services.css

@@ -1,10 +1,8 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .services {
-  max-width: calc(calc(unit * 50) + 2px);
-  padding: calc(unit * 4) calc(unit * 4) calc(unit * 3);
+  max-width: calc(calc(var(--ring-unit) * 50) + 2px);
+  padding: calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 3);
 
   background-color: var(--ring-navigation-background-color);
 
@@ -20,8 +18,8 @@
   overflow-x: hidden;
 
   box-sizing: border-box;
-  width: calc(unit * 14);
-  height: calc(unit * 14);
+  width: calc(var(--ring-unit) * 14);
+  height: calc(var(--ring-unit) * 14);
 
   text-align: center;
   text-overflow: ellipsis;
@@ -31,7 +29,7 @@
   line-height: initial;
 
   &::after {
-    height: calc(unit * 14);
+    height: calc(var(--ring-unit) * 14);
 
     vertical-align: middle;
   }
@@ -45,9 +43,9 @@
 .itemLogo {
   display: inline-block;
 
-  width: calc(unit * 6);
-  height: calc(unit * 6);
-  margin: calc(unit * 2) 0 calc(unit + 1px);
+  width: calc(var(--ring-unit) * 6);
+  height: calc(var(--ring-unit) * 6);
+  margin: calc(var(--ring-unit) * 2) 0 calc(var(--ring-unit) + 1px);
 
   background-repeat: no-repeat;
   background-size: contain;
@@ -64,7 +62,7 @@
 
 .line {
   height: 1px;
-  margin: calc(unit * 4) 0 calc(unit * 2);
+  margin: calc(var(--ring-unit) * 4) 0 calc(var(--ring-unit) * 2);
 
   background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
 }
@@ -73,11 +71,11 @@
   display: inline-block;
 
   width: 100%;
-  margin-bottom: calc(unit * 2);
+  margin-bottom: calc(var(--ring-unit) * 2);
 
   text-decoration: none;
 
-  line-height: calc(unit * 2);
+  line-height: calc(var(--ring-unit) * 2);
 
   &,
   &:visited {
@@ -85,7 +83,7 @@
   }
 
   &:last-child {
-    margin-bottom: calc(unit * -3);
+    margin-bottom: calc(var(--ring-unit) * -3);
   }
 }
 

package/components/header/smart-services.d.ts

@@ -2,6 +2,7 @@ import React, { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import Auth from '../auth/auth';
 import HTTP from '../http/http';
+import { Service } from './services-link';
 export interface SmartServicesProps extends HTMLAttributes<HTMLElement> {
     auth: Auth;
 }
@@ -20,6 +21,6 @@ export default class SmartServices extends Component<SmartServicesProps> {
     http?: HTTP;
     stopLoading: () => void;
     getServicesContent: () => void;
-    getServices(fields: string): Promise<any> | undefined;
+    getServices(fields: string): Promise<Service[]> | undefined;
     render(): React.JSX.Element | null;
 }

package/components/heading/heading.css

@@ -1,30 +1,42 @@
 @import "../global/variables.css";
 
-.heading {
-  composes: font from "../global/global.css";
-
-  margin-top: var(--ring-line-height);
+.contentWithHeadings {
+  & h1,
+  &:is(h1),
+  & h2,
+  &:is(h2),
+  & h3,
+  &:is(h3),
+  & h4,
+  &:is(h4) {
+    margin-top: var(--ring-line-height);
 
-  &:first-child {
-    margin-top: 0;
+    &:first-child {
+      margin-top: 0;
+    }
   }
 
+
+  & :is(h1, h2),
   &:is(h1, h2) {
     margin-bottom: 8px;
 
     color: var(--ring-heading-color);
   }
 
+  & h1,
   &:is(h1) {
     font-size: 24px;
     line-height: 28px;
   }
 
+  & h2,
   &:is(h2) {
     font-size: 20px;
     line-height: 24px;
   }
 
+  & h3,
   &:is(h3) {
     margin-bottom: 0;
 
@@ -32,6 +44,7 @@
     line-height: 22px;
   }
 
+  & h4,
   &:is(h4) {
     margin-bottom: 1px;
 
@@ -44,6 +57,11 @@
   }
 }
 
+.heading {
+  composes: font from "../global/global.css";
+  composes: contentWithHeadings;
+}
+
 .caps {
   letter-spacing: 2px;
   text-transform: uppercase;

package/components/http/http.d.ts

@@ -41,14 +41,14 @@ export default class HTTP implements Partial<HTTPAuth> {
     private _storeRequestMeta;
     private _processResponse;
     private static _isErrorStatus;
-    fetch: <T = any>(url: string, params?: FetchParams) => Promise<T>;
+    fetch: <T = unknown>(url: string, params?: FetchParams) => Promise<T>;
     authorizedFetch(...args: Parameters<HTTP['_performRequest']>): Promise<any>;
-    request: <T = any>(url: string, params?: RequestParams) => Promise<T>;
+    request: <T = unknown>(url: string, params?: RequestParams) => Promise<T>;
     getMetaForResponse: (response: object) => Partial<Response> | undefined;
-    get: <T = any>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
-    post: <T = any>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
-    delete: <T = any>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
-    put: <T = any>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    get: <T = unknown>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    post: <T = unknown>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    delete: <T = unknown>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    put: <T = unknown>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
     /**
      * Usage: const {promise, abort} = http.abortify(http.get<{id: string}>)('http://test.com');
      * @param method

package/components/http/http.js

@@ -123,8 +123,6 @@ export default class HTTP {
     static _isErrorStatus(status) {
         return status < STATUS_OK_IF_MORE_THAN || status >= STATUS_BAD_IF_MORE_THAN;
     }
-    // TODO: Replace any to never/unknown in next release and remove eslint-disable
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     fetch = async (url, params = {}) => {
         const { body, query = {}, ...fetchConfig } = params;
         const response = await this._fetch(this._makeRequestUrl(url, query), {
@@ -138,8 +136,6 @@ export default class HTTP {
         const response = await this._performRequest(...args);
         return this._processResponse(response);
     }
-    // TODO: Replace any to never/unknown in next release and remove eslint-disable
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     request = async (url, params) => {
         let token = await this.requestToken?.();
         let response = await this._performRequest(url, token, params);
@@ -163,26 +159,18 @@ export default class HTTP {
         }
     };
     getMetaForResponse = (response) => this._requestsMeta.get(response);
-    // TODO: Replace any to never/unknown in next release and remove eslint-disable
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     get = (url, params) => (this.request(url, {
         ...params,
         method: 'GET'
     }));
-    // TODO: Replace any to never/unknown in next release and remove eslint-disable
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     post = (url, params) => (this.request(url, {
         ...params,
         method: 'POST'
     }));
-    // TODO: Replace any to never/unknown in next release and remove eslint-disable
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     delete = (url, params) => (this.request(url, {
         ...params,
         method: 'DELETE'
     }));
-    // TODO: Replace any to never/unknown in next release and remove eslint-disable
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     put = (url, params) => (this.request(url, {
         ...params,
         method: 'PUT'