@jetbrains/ring-ui-built 6.1.1-beta.0 → 7.0.0-beta.2

package/components/_helpers/_rollupPluginBabelHelpers.js

@@ -58,7 +58,7 @@ function _createClass(e, r, t) {
 function _createForOfIteratorHelper(r, e) {
   var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (!t) {
-    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e  ) {
+    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
       t && (r = t);
       var n = 0,
         F = function () {};

package/components/_helpers/header.js

@@ -1,3 +1,3 @@
-var modules_47759f5e = {"dark":"dark_rui_f090","link":"link_rui_20da","active":"active_rui_20da","compensate":"3px","compensated":"calc(var(--ring-unit)*8 - 3px)","light":"light_rui_2ac4","header":"header_rui_30aa","headerSpaced":"headerSpaced_rui_30aa","logo":"logo_rui_30aa","tray":"tray_rui_30aa","trayItemContent":"trayItemContent_rui_30aa","icon":"icon_rui_30aa","main":"main_rui_30aa","rotatable":"rotatable_rui_30aa","rotated":"rotated_rui_30aa","profileEmpty":"profileEmpty_rui_30aa","profile":"profile_rui_30aa profileEmpty_rui_30aa","anchorClassName":"anchorClassName_rui_30aa resetButton_rui_f295","avatarWrapper":"avatarWrapper_rui_30aa","hasUpdates":"hasUpdates_rui_30aa"};
+var modules_47759f5e = {"dark":"dark_rui_f090","link":"link_rui_20da","active":"active_rui_20da","compensate":"3px","compensated":"calc(var(--ring-unit)*8 - 3px)","light":"light_rui_2ac4","header":"header_rui_30aa","headerSpaced":"headerSpaced_rui_30aa","headerVertical":"headerVertical_rui_30aa","logo":"logo_rui_30aa","links":"links_rui_30aa","tray":"tray_rui_30aa","trayItemContent":"trayItemContent_rui_30aa","icon":"icon_rui_30aa","main":"main_rui_30aa","rotatable":"rotatable_rui_30aa","rotated":"rotated_rui_30aa","profileEmpty":"profileEmpty_rui_30aa","profile":"profile_rui_30aa profileEmpty_rui_30aa","anchorClassName":"anchorClassName_rui_30aa resetButton_rui_f295","avatarWrapper":"avatarWrapper_rui_30aa","hasUpdates":"hasUpdates_rui_30aa"};
 
 export { modules_47759f5e as m };

package/components/_helpers/table.js

@@ -1,3 +1,3 @@
-var modules_1db4bbca = {"compensate":"2px","compensated":"calc(var(--ring-unit)*4 - 2px)","top":"-3px","row":"row_rui_a67d","dragHandle":"dragHandle_rui_a67d","light":"light_rui_2ac4","tableWrapper":"tableWrapper_rui_a67d","table":"table_rui_a67d","userSelectNone":"userSelectNone_rui_a67d","headerCell":"headerCell_rui_a67d font-smaller-lower_rui_f295 font-smaller_rui_f295 font-lower_rui_f295 font_rui_f295","headerCellSorted":"headerCellSorted_rui_a67d","headerCellSortable":"headerCellSortable_rui_a67d","sorter":"sorter_rui_a67d","sortedUp":"sortedUp_rui_a67d","icon":"icon_rui_a67d","caption":"caption_rui_a67d","tableHead":"tableHead_rui_a67d","subHeaderSticky":"subHeaderSticky_rui_a67d","disabledHover":"disabledHover_rui_a67d","rowSelected":"rowSelected_rui_a67d","rowFocused":"rowFocused_rui_a67d","cell":"cell_rui_a67d ellipsis_rui_f295","loadingOverlay":"loadingOverlay_rui_a67d","cellUnlimited":"cellUnlimited_rui_a67d","cellRight":"cellRight_rui_a67d","metaColumn":"metaColumn_rui_a67d","headerMetaColumn":"headerMetaColumn_rui_a67d","visibleDragHandle":"visibleDragHandle_rui_a67d","rowCollapseExpandButton":"rowCollapseExpandButton_rui_a67d","draggingRow":"draggingRow_rui_a67d","draggingTable":"draggingTable_rui_a67d","tableMessage":"tableMessage_rui_a67d"};
+var modules_1db4bbca = {"compensate":"2px","compensated":"calc(var(--ring-unit)*4 - 2px)","top":"-3px","row":"row_rui_a67d","dragHandle":"dragHandle_rui_a67d","light":"light_rui_2ac4","tableWrapper":"tableWrapper_rui_a67d","table":"table_rui_a67d","userSelectNone":"userSelectNone_rui_a67d","headerCell":"headerCell_rui_a67d font-smaller-lower_rui_f295 font-smaller_rui_f295 font-lower_rui_f295 font_rui_f295","headerCellSorted":"headerCellSorted_rui_a67d","headerCellSortable":"headerCellSortable_rui_a67d","sorter":"sorter_rui_a67d","sortedUp":"sortedUp_rui_a67d","icon":"icon_rui_a67d","caption":"caption_rui_a67d","tableHead":"tableHead_rui_a67d","subHeaderSticky":"subHeaderSticky_rui_a67d","disabledHover":"disabledHover_rui_a67d","rowSelected":"rowSelected_rui_a67d","rowFocused":"rowFocused_rui_a67d","cell":"cell_rui_a67d ellipsis_rui_f295","loadingOverlay":"loadingOverlay_rui_a67d","wideFirstColumn":"wideFirstColumn_rui_a67d","cellUnlimited":"cellUnlimited_rui_a67d","cellRight":"cellRight_rui_a67d","metaColumn":"metaColumn_rui_a67d","headerMetaColumn":"headerMetaColumn_rui_a67d","visibleDragHandle":"visibleDragHandle_rui_a67d","rowCollapseExpandButton":"rowCollapseExpandButton_rui_a67d","draggingRow":"draggingRow_rui_a67d","draggingTable":"draggingTable_rui_a67d","tableMessage":"tableMessage_rui_a67d"};
 
 export { modules_1db4bbca as m };

package/components/_helpers/theme.js

@@ -1,5 +1,5 @@
 import { i as _slicedToArray, c as _objectWithoutProperties, d as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
-import { useState, useEffect, forwardRef, useMemo, useContext } from 'react';
+import { createContext, useState, useEffect, forwardRef, useMemo, useContext } from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import { PopupTargetContext, PopupTarget } from '../popup/popup.target.js';
@@ -18,6 +18,10 @@ var Theme;
   Theme["LIGHT"] = "light";
   Theme["DARK"] = "dark";
 })(Theme || (Theme = {}));
+var ThemeContext = /*#__PURE__*/createContext({
+  theme: Theme.LIGHT
+});
+var GLOBAL_DARK_CLASS_NAME = 'ring-ui-theme-dark';
 var darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
 function useTheme() {
   var _useState = useState(darkMatcher.matches),
@@ -40,6 +44,7 @@ function useThemeClasses(theme) {
   var resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
   return classNames({
     [modules_59717246.dark]: resolvedTheme === Theme.DARK,
+    [GLOBAL_DARK_CLASS_NAME]: resolvedTheme === Theme.DARK,
     [modules_6381a4b3.light]: resolvedTheme === Theme.LIGHT
   });
 }
@@ -53,10 +58,10 @@ function applyTheme(theme, container) {
   if (theme === Theme.DARK) {
     container.classList.remove(modules_6381a4b3.light);
     container.classList.add(modules_59717246.dark);
-    container.classList.add('ring-ui-theme-dark');
+    container.classList.add(GLOBAL_DARK_CLASS_NAME);
   } else {
     container.classList.remove(modules_59717246.dark);
-    container.classList.remove('ring-ui-theme-dark');
+    container.classList.remove(GLOBAL_DARK_CLASS_NAME);
     container.classList.add(modules_6381a4b3.light);
   }
 }
@@ -73,6 +78,11 @@ var ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref2, ref) {
   var id = useMemo(function () {
     return getUID('popups-with-theme-');
   }, []);
+  var themeValue = useMemo(function () {
+    return {
+      theme: resolvedTheme
+    };
+  }, [resolvedTheme]);
   useEffect(function () {
     if (target != null) {
       applyTheme(resolvedTheme, target);
@@ -80,23 +90,26 @@ var ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref2, ref) {
   }, [resolvedTheme, target]);
   var themeClasses = useThemeClasses(theme);
   var parentTarget = useContext(PopupTargetContext);
-  return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
-    ref: ref,
-    className: target != null ? undefined : classNames(className, themeClasses)
-  }, restProps), {}, {
-    children: passToPopups ? /*#__PURE__*/jsx(PopupTarget, {
-      id: id,
-      children: function children(popupTarget) {
-        return /*#__PURE__*/jsxs(Fragment, {
-          children: [_children, /*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
-            className: themeClasses,
-            children: popupTarget
-          }), parentTarget && getPopupContainer(parentTarget) || document.body)]
-        });
-      }
-    }) : _children
-  }));
+  return /*#__PURE__*/jsx(ThemeContext.Provider, {
+    value: themeValue,
+    children: /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
+      ref: ref,
+      className: target != null ? undefined : classNames(className, themeClasses)
+    }, restProps), {}, {
+      children: passToPopups ? /*#__PURE__*/jsx(PopupTarget, {
+        id: id,
+        children: function children(popupTarget) {
+          return /*#__PURE__*/jsxs(Fragment, {
+            children: [_children, /*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
+              className: themeClasses,
+              children: popupTarget
+            }), parentTarget && getPopupContainer(parentTarget) || document.body)]
+          });
+        }
+      }) : _children
+    }))
+  });
 });
 var Theme$1 = Theme;
 
-export { Theme$1 as T, WithThemeClasses as W, ThemeProvider as a, useThemeClasses as b, applyTheme as c, modules_59717246 as m, useTheme as u };
+export { Theme$1 as T, WithThemeClasses as W, ThemeProvider as a, ThemeContext as b, useThemeClasses as c, applyTheme as d, modules_59717246 as m, useTheme as u };

package/components/auth/auth__core.d.ts

@@ -129,7 +129,7 @@ export default class Auth implements HTTPAuth {
     listeners: Listeners<AuthPayloadMap>;
     http: HTTP;
     private _service;
-    readonly _storage: AuthStorage<number>;
+    readonly _storage: AuthStorage<number> | null;
     private _responseParser;
     private readonly _requestBuilder;
     _backgroundFlow: BackgroundFlow | null;
@@ -174,7 +174,7 @@ export default class Auth implements HTTPAuth {
     /**
      * @return {Promise.<object>}
      */
-    getUser(accessToken?: string | null | undefined): Promise<any>;
+    getUser(accessToken?: string | null | undefined): Promise<any> | undefined;
     /**
      * @return {Promise.<object>}
      */
@@ -197,7 +197,7 @@ export default class Auth implements HTTPAuth {
      */
     login(): Promise<void>;
     switchUser(): Promise<void>;
-    _makeStateFromResponse(authResponse: AuthResponse): AuthState | null;
+    _makeStateFromResponse(authResponse: AuthResponse): AuthState;
     /**
      * Check if the hash contains an access token.
      * If it does, extract the state, compare with

package/components/auth/auth__core.js

@@ -137,7 +137,7 @@ var Auth = /*#__PURE__*/function () {
     _defineProperty(this, "listeners", new Listeners());
     _defineProperty(this, "http", void 0);
     _defineProperty(this, "_service", {});
-    _defineProperty(this, "_storage", void 0);
+    _defineProperty(this, "_storage", null);
     _defineProperty(this, "_responseParser", new AuthResponseParser());
     _defineProperty(this, "_requestBuilder", null);
     _defineProperty(this, "_backgroundFlow", void 0);
@@ -1402,23 +1402,22 @@ var Auth = /*#__PURE__*/function () {
     value: function _makeStateFromResponse(authResponse) {
       var state = authResponse.state;
       if (!state) {
-        throw new Error('No state in AuthResponse');
+        return {};
       }
       var defaultScope = this.config.scope;
-      var urlFromState = null;
       try {
-        urlFromState = new URL(state); // checking if state contains valid URL on same origin, see HUB-11514
-      } catch (_unused2) {
-        return null;
-      }
-      if (urlFromState.origin !== window.location.origin) {
-        throw new Error("State contains URL with different origin: \"".concat(state, "\""));
+        var urlFromState = new URL(state); // checking if state contains valid URL on same origin, see HUB-11514
+        if (urlFromState.origin !== window.location.origin) {
+          return {};
+        }
+        return {
+          restoreLocation: state,
+          created: Date.now(),
+          scopes: defaultScope
+        };
+      } catch (e) {
+        return {};
       }
-      return {
-        restoreLocation: state,
-        created: Date.now(),
-        scopes: defaultScope
-      };
     }
     /**
      * Check if the hash contains an access token.
@@ -1432,7 +1431,8 @@ var Auth = /*#__PURE__*/function () {
     key: "_checkForAuthResponse",
     value: (function () {
       var _checkForAuthResponse2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
-        var authResponse, _this$config4, defaultScope, defaultExpiresIn, cleanHash, stateId, scope, expiresIn, accessToken, newState, scopes, effectiveExpiresIn, expires, _this$_storage12;
+        var _this$_storage12;
+        var authResponse, _this$config4, defaultScope, defaultExpiresIn, cleanHash, stateId, scope, expiresIn, accessToken, newState, scopes, effectiveExpiresIn, expires, _this$_storage13;
         return _regeneratorRuntime().wrap(function _callee20$(_context20) {
           while (1) switch (_context20.prev = _context20.next) {
             case 0:
@@ -1449,42 +1449,34 @@ var Auth = /*#__PURE__*/function () {
               return _context20.abrupt("return", undefined);
             case 5:
               stateId = authResponse.state, scope = authResponse.scope, expiresIn = authResponse.expiresIn, accessToken = authResponse.accessToken;
-              newState = null;
-              if (!stateId) {
-                _context20.next = 12;
-                break;
-              }
-              _context20.next = 10;
-              return this._storage.getState(stateId);
-            case 10:
-              newState = _context20.sent;
-              if (!newState) {
-                newState = this._makeStateFromResponse(authResponse);
-              }
-            case 12:
-              if (newState) {
-                _context20.next = 14;
+              _context20.next = 8;
+              return stateId && ((_this$_storage12 = this._storage) === null || _this$_storage12 === void 0 ? void 0 : _this$_storage12.getState(stateId));
+            case 8:
+              _context20.t0 = _context20.sent;
+              if (_context20.t0) {
+                _context20.next = 11;
                 break;
               }
-              throw new Error("Could not create state where stateId=\"".concat(stateId, "\""));
-            case 14:
+              _context20.t0 = this._makeStateFromResponse(authResponse);
+            case 11:
+              newState = _context20.t0;
               scopes = scope ? scope.split(' ') : newState.scopes || defaultScope || [];
               effectiveExpiresIn = expiresIn ? parseInt(expiresIn, 10) : defaultExpiresIn;
               expires = TokenValidator._epoch() + effectiveExpiresIn;
               if (!(accessToken != null)) {
-                _context20.next = 20;
+                _context20.next = 18;
                 break;
               }
-              _context20.next = 20;
-              return (_this$_storage12 = this._storage) === null || _this$_storage12 === void 0 ? void 0 : _this$_storage12.saveToken({
+              _context20.next = 18;
+              return (_this$_storage13 = this._storage) === null || _this$_storage13 === void 0 ? void 0 : _this$_storage13.saveToken({
                 accessToken,
                 scopes,
                 expires,
                 lifeTime: effectiveExpiresIn
               });
-            case 20:
+            case 18:
               return _context20.abrupt("return", newState);
-            case 21:
+            case 19:
             case "end":
               return _context20.stop();
           }
@@ -1499,7 +1491,7 @@ var Auth = /*#__PURE__*/function () {
     key: "_checkForStateRestoration",
     value: function () {
       var _checkForStateRestoration2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
-        var _this$_storage13;
+        var _this$_storage14;
         var authResponse, stateId;
         return _regeneratorRuntime().wrap(function _callee21$(_context21) {
           while (1) switch (_context21.prev = _context21.next) {
@@ -1510,7 +1502,7 @@ var Auth = /*#__PURE__*/function () {
               }
               stateId = authResponse === null || authResponse === void 0 ? void 0 : authResponse.restoreAuthState;
               _context21.next = 5;
-              return stateId && ((_this$_storage13 = this._storage) === null || _this$_storage13 === void 0 ? void 0 : _this$_storage13.getState(stateId));
+              return stateId && ((_this$_storage14 = this._storage) === null || _this$_storage14 === void 0 ? void 0 : _this$_storage14.getState(stateId));
             case 5:
               _context21.t0 = _context21.sent;
               if (_context21.t0) {

package/components/data-list/data-list.d.ts

@@ -32,7 +32,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             onKeyDown: (e: KeyboardEvent) => void;
             render(): import("react").JSX.Element;
             context: unknown;
-            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
             readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>;
             refs: {
@@ -40,7 +40,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             };
             shouldComponentUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): boolean;
             componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any | null;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any;
             componentDidUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>, snapshot?: any): void;
             componentWillMount?(): void;
             UNSAFE_componentWillMount?(): void;
@@ -59,7 +59,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             onKeyDown: (e: KeyboardEvent) => void;
             render(): import("react").JSX.Element;
             context: unknown;
-            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
             readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>;
             refs: {
@@ -67,7 +67,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             };
             shouldComponentUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): boolean;
             componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any | null;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any;
             componentDidUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>, snapshot?: any): void;
             componentWillMount?(): void;
             UNSAFE_componentWillMount?(): void;

package/components/dialog/dialog.js

@@ -139,6 +139,7 @@ var Dialog = /*#__PURE__*/function (_PureComponent) {
         modal = _this$props3.modal;
       if (this.nativeDialog.current != null) {
         if (show) {
+          this.nativeDialog.current.removeAttribute('open');
           modal ? this.nativeDialog.current.showModal() : this.nativeDialog.current.show();
         } else {
           this.nativeDialog.current.close();

package/components/form/form.js

@@ -1,4 +1,4 @@
-var css = ".light_rui_2ac4,:root{--ring-unit:8px;--ring-line-components:223,229,235;--ring-line-color:rgb(var(--ring-line-components));--ring-borders-components:197,209,219;--ring-borders-color:rgb(var(--ring-borders-components));--ring-icon-components:132,150,173;--ring-icon-color:rgb(var(--ring-icon-components));--ring-icon-secondary-components:153,153,153;--ring-icon-secondary-color:rgb(var(--ring-icon-secondary-components));--ring-border-disabled-components:232,232,232;--ring-border-disabled-color:rgb(var(--ring-border-disabled-components));--ring-border-selected-disabled-components:199,199,199;--ring-border-selected-disabled-color:rgb(var(--ring-border-selected-disabled-components));--ring-icon-disabled-components:212,212,212;--ring-icon-disabled-color:rgb(var(--ring-icon-disabled-components));--ring-border-hover-components:128,198,255;--ring-border-hover-color:rgb(var(--ring-border-hover-components));--ring-icon-hover-components:var(--ring-link-hover-color);--ring-icon-hover-color:var(--ring-link-hover-color);--ring-main-components:0,128,229;--ring-main-color:rgb(var(--ring-main-components));--ring-action-link-components:var(--ring-main-components);--ring-action-link-color:rgb(var(--ring-main-components));--ring-main-hover-components:0,112,204;--ring-main-hover-color:rgb(var(--ring-main-hover-components));--ring-icon-error-components:219,88,96;--ring-icon-error-color:rgb(var(--ring-icon-error-components));--ring-icon-warning-components:237,162,0;--ring-icon-warning-color:rgb(var(--ring-icon-warning-components));--ring-icon-success-components:89,168,105;--ring-icon-success-color:rgb(var(--ring-icon-success-components));--ring-pale-control-components:207,219,229;--ring-pale-control-color:rgb(var(--ring-pale-control-components));--ring-popup-border-components:0,28,54;--ring-popup-border-color:var(--ring-line-color);--ring-popup-shadow-components:rgba(var(--ring-popup-border-components),0.1);--ring-popup-shadow-color:rgba(var(--ring-popup-border-components),0.1);--ring-popup-secondary-shadow-color:rgba(var(--ring-popup-border-components),0.04);--ring-message-shadow-color:rgba(var(--ring-popup-border-components),0.3);--ring-pinned-shadow-components:115,117,119;--ring-pinned-shadow-color:rgb(var(--ring-pinned-shadow-components));--ring-button-danger-hover-components:var(--ring-icon-error-color);--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));--ring-dialog-overlay-components:0,0,0;--ring-dialog-overlay-opacity:0.4;--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);--ring-search-components:102,158,204;--ring-search-color:rgb(var(--ring-search-components));--ring-hint-components:64,99,128;--ring-hint-color:rgb(var(--ring-hint-components));--ring-link-components:15,91,153;--ring-link-color:rgb(var(--ring-link-components));--ring-link-hover-components:255,0,140;--ring-link-hover-color:rgb(var(--ring-link-hover-components));--ring-error-components:169,15,26;--ring-error-color:rgb(var(--ring-error-components));--ring-warning-components:178,92,0;--ring-warning-color:rgb(var(--ring-warning-components));--ring-success-components:12,117,35;--ring-success-color:rgb(var(--ring-success-components));--ring-text-components:31,35,38;--ring-text-color:rgb(var(--ring-text-components));--ring-active-text-color:var(--ring-text-color);--ring-white-text-components:255,255,255;--ring-white-text-color:rgb(var(--ring-white-text-components));--ring-heading-color:var(--ring-text-color);--ring-secondary-components:115,117,119;--ring-secondary-color:rgb(var(--ring-secondary-components));--ring-disabled-components:153,153,153;--ring-disabled-color:rgb(var(--ring-disabled-components));--ring-content-background-components:255,255,255;--ring-content-background-color:rgb(var(--ring-content-background-components));--ring-popup-background-components:255,255,255;--ring-popup-background-color:rgb(var(--ring-popup-background-components));--ring-sidebar-background-components:247,249,250;--ring-sidebar-background-color:rgb(var(--ring-sidebar-background-components));--ring-selected-background-components:212,237,255;--ring-selected-background-color:rgb(var(--ring-selected-background-components));--ring-hover-background-components:235,246,255;--ring-hover-background-color:rgb(var(--ring-hover-background-components));--ring-navigation-background-components:255,255,255;--ring-navigation-background-color:rgb(var(--ring-navigation-background-components));--ring-tag-background-components:230,236,242;--ring-tag-background-color:rgb(var(--ring-tag-background-components));--ring-tag-hover-background-components:211,218,224;--ring-tag-hover-background-color:rgb(var(--ring-tag-hover-background-components));--ring-removed-background-components:255,213,203;--ring-removed-background-color:rgb(var(--ring-removed-background-components));--ring-warning-background-components:250,236,205;--ring-warning-background-color:rgb(var(--ring-warning-background-components));--ring-added-background-components:216,240,216;--ring-added-background-color:rgb(var(--ring-added-background-components));--ring-disabled-background-components:245,245,245;--ring-disabled-background-color:rgb(var(--ring-disabled-background-components));--ring-disabled-selected-background-components:232,232,232;--ring-disabled-selected-background-color:rgb(var(--ring-disabled-selected-background-components));--ring-button-danger-active-components:255,231,232;--ring-button-danger-active-color:rgb(var(--ring-button-danger-active-components));--ring-button-loader-background-components:51,163,255;--ring-button-loader-background:rgb(var(--ring-button-loader-background-components));--ring-button-primary-background-components:26,152,255;--ring-button-primary-background-color:rgb(var(--ring-button-primary-background-components));--ring-table-loader-background-color:rgba(var(--ring-content-background-components),0.5);--ring-code-background-color:var(--ring-content-background-color);--ring-code-components:0,0,0;--ring-code-color:rgb(var(--ring-code-components));--ring-code-comment-components:112,112,112;--ring-code-comment-color:rgb(var(--ring-code-comment-components));--ring-code-meta-components:112,112,112;--ring-code-meta-color:rgb(var(--ring-code-meta-components));--ring-code-keyword-components:0,0,128;--ring-code-keyword-color:rgb(var(--ring-code-keyword-components));--ring-code-tag-background-components:239,239,239;--ring-code-tag-background-color:rgb(var(--ring-code-tag-background-components));--ring-code-tag-color:var(--ring-code-keyword-color);--ring-code-tag-font-weight:var(--ring-font-weight-bold);--ring-code-field-components:102,14,122;--ring-code-field-color:rgb(var(--ring-code-field-components));--ring-code-attribute-components:0,0,255;--ring-code-attribute-color:rgb(var(--ring-code-attribute-components));--ring-code-number-color:var(--ring-code-attribute-color);--ring-code-string-components:0,122,0;--ring-code-string-color:rgb(var(--ring-code-string-components));--ring-code-addition-components:170,222,170;--ring-code-addition-color:rgb(var(--ring-code-addition-components));--ring-code-deletion-components:200,200,200;--ring-code-deletion-color:rgb(var(--ring-code-deletion-components));--ring-border-radius:4px;--ring-border-radius-small:2px;--ring-font-size-larger:16px;--ring-font-size:14px;--ring-font-size-smaller:12px;--ring-line-height-taller:24px;--ring-line-height:20px;--ring-line-height-lower:18px;--ring-line-height-lowest:16px;--ring-ease:0.3s ease-out;--ring-fast-ease:0.15s ease-out;--ring-font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;--ring-font-family-monospace:Menlo,\"Bitstream Vera Sans Mono\",\"Ubuntu Mono\",Consolas,\"Courier New\",Courier,monospace;--ring-font-weight-bold:600;--ring-invisible-element-z-index:-1;--ring-fixed-z-index:1;--ring-overlay-z-index:5;--ring-alert-z-index:6}.ring-form{color:var(--ring-text-color);font-family:var(--ring-font-family);font-size:var(--ring-font-size)}.ring-form_white-bg{background:var(--ring-content-background-color)}.ring-form_border{border:1px solid var(--ring-disabled-color);border-radius:2px}.ring-form_rows .ring-form__label{float:none;max-width:none}.ring-form_rows.ring-form__control{margin-left:0;width:calc(var(--ring-unit)*42)}.ring-form__wrap{margin-bottom:0;padding:calc(var(--ring-unit)*3) calc(var(--ring-unit)*4) 0}.ring-form__header{min-height:13px;padding-bottom:calc(var(--ring-unit)*2)}.ring-form__control__description{color:var(--ring-secondary-color);display:block;font-size:var(--ring-font-size-smaller);line-height:16px!important;max-width:900px;padding-top:calc(var(--ring-unit)/2)}.ring-form__title-img{border:0;float:left;height:calc(var(--ring-unit)*4)}.ring-form__title{display:block;font-weight:var(--ring-font-weight-bold);margin-bottom:calc(var(--ring-unit))}.ring-form__main-title{color:var(--ring-text-color);font-family:var(--ring-font-family);font-size:19px}.ring-form__title_separated{margin:calc(var(--ring-unit)*3) 0}.ring-form__group{margin:calc(var(--ring-unit)*2) 0;position:relative}.ring-form__group:first-child{margin-top:0}.ring-form__group:after{clear:both;content:\"\";display:block}.ring-form__group_united{padding-bottom:0}.ring-form__group .ring_form__group{padding-left:calc(var(--ring-unit)*2);padding-top:0}.ring-form__group .ring_form__group .ring-form__control{margin-left:calc(var(--ring-unit)*18)}.ring-form__group_nested{padding-left:calc(var(--ring-unit)*2);padding-top:0}.ring-form__group_nested .ring-form__control{margin-left:calc(var(--ring-unit)*18)}.ring-form__label{display:inline-block;float:left;line-height:calc(var(--ring-unit)*2);max-width:calc(var(--ring-unit)*18);padding-top:calc(var(--ring-unit)/2);position:relative;top:0;vertical-align:top}.ring-form__label .ring-checkbox__label,.ring-form__label .ring-radio-btn__label{top:-2px}.ring-form__label_title{font-weight:var(--ring-font-weight-bold)}.ring-form__control{line-height:calc(var(--ring-unit)*3);margin-left:calc(var(--ring-unit)*20);min-height:calc(var(--ring-unit)*3);position:relative;vertical-align:top;width:auto}.ring-form__control_text:after{content:\"\";display:inline-block;height:calc(var(--ring-unit)*3);vertical-align:middle}.ring-form__control_secondary{left:calc(var(--ring-unit)*27);position:absolute;top:var(--ring-unit)}.ring-form__control_on{color:var(--ring-success-color)}.ring-form__control_off{color:var(--ring-secondary-color)}.ring-form__control-link{position:relative;top:6px}.ring-form__control_small{margin-left:calc(var(--ring-unit)*16)!important}.ring-form__info{line-height:20px;margin-bottom:calc(var(--ring-unit)*-1 + 2px);margin-left:calc(var(--ring-unit)*20);width:calc(var(--ring-unit)*85)}.ring-form__control__part{margin-right:var(--ring-unit)}.ring-form__group_short{padding-bottom:0;padding-top:calc(var(--ring-unit)/2)}.ring-form__group_short:last-child{padding-bottom:var(--ring-unit)}.ring-form__group_short.ring-form__control{margin-left:calc(var(--ring-unit)*3)}.ring-form_small .ring-form__label{max-width:calc(var(--ring-unit)*12)}.ring-form_small .ring-form__control{margin-left:calc(var(--ring-unit)*16)}";
+var css = ".light_rui_2ac4,:root{--ring-unit:8px;--ring-line-components:223,225,229;--ring-line-color:rgb(var(--ring-line-components));--ring-borders-components:211,213,219;--ring-borders-color:rgb(var(--ring-borders-components));--ring-icon-components:129,133,148;--ring-icon-color:rgb(var(--ring-icon-components));--ring-icon-white-components:255,255,255;--ring-icon-white-color:rgb(var(--ring-icon-white-components));--ring-icon-secondary-components:129,133,148;--ring-icon-secondary-color:rgb(var(--ring-icon-secondary-components));--ring-border-disabled-components:235,236,240;--ring-border-disabled-color:rgb(var(--ring-border-disabled-components));--ring-border-selected-disabled-components:201,204,214;--ring-border-selected-disabled-color:rgb(var(--ring-border-selected-disabled-components));--ring-icon-disabled-components:211,213,219;--ring-icon-disabled-color:rgb(var(--ring-icon-disabled-components));--ring-border-hover-components:160,189,248;--ring-border-hover-color:rgb(var(--ring-border-hover-components));--ring-icon-hover-components:90,93,107;--ring-icon-hover-color:rgb(var(--ring-icon-hover-components));--ring-main-components:53,116,240;--ring-main-color:rgb(var(--ring-main-components));--ring-action-link-components:46,85,163;--ring-action-link-color:rgb(var(--ring-action-link-components));--ring-main-hover-components:51,105,214;--ring-main-hover-color:rgb(var(--ring-main-hover-components));--ring-icon-error-components:219,59,75;--ring-icon-error-color:rgb(var(--ring-icon-error-components));--ring-icon-warning-components:255,175,15;--ring-icon-warning-color:rgb(var(--ring-icon-warning-components));--ring-icon-success-components:85,167,106;--ring-icon-success-color:rgb(var(--ring-icon-success-components));--ring-pale-control-components:194,214,252;--ring-pale-control-color:rgb(var(--ring-pale-control-components));--ring-popup-border-components:0,28,54;--ring-popup-border-color:var(--ring-line-color);--ring-popup-shadow-components:rgba(var(--ring-popup-border-components),0.1);--ring-popup-shadow-color:rgba(var(--ring-popup-border-components),0.1);--ring-popup-secondary-shadow-color:rgba(var(--ring-popup-border-components),0.04);--ring-message-shadow-color:rgba(var(--ring-popup-border-components),0.3);--ring-pinned-shadow-components:108,112,126;--ring-pinned-shadow-color:rgb(var(--ring-pinned-shadow-components));--ring-button-danger-hover-components:var(--ring-icon-error-color);--ring-button-danger-hover-color:var(--ring-icon-error-color);--ring-button-primary-border-components:49,95,189;--ring-button-primary-border-color:rgb(var(--ring-button-primary-border-components));--ring-dialog-overlay-components:0,0,0;--ring-dialog-overlay-opacity:0.4;--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);--ring-search-components:112,156,245;--ring-search-color:rgb(var(--ring-search-components));--ring-hint-components:46,85,163;--ring-hint-color:rgb(var(--ring-hint-components));--ring-link-components:46,85,163;--ring-link-color:rgb(var(--ring-link-components));--ring-link-hover-components:34,60,114;--ring-link-hover-color:rgb(var(--ring-link-hover-components));--ring-error-components:204,54,69;--ring-error-color:rgb(var(--ring-error-components));--ring-warning-components:164,103,4;--ring-warning-color:rgb(var(--ring-warning-components));--ring-success-components:31,117,54;--ring-success-color:rgb(var(--ring-success-components));--ring-text-components:39,40,46;--ring-text-color:rgb(var(--ring-text-components));--ring-active-text-color:var(--ring-text-color);--ring-white-text-components:255,255,255;--ring-white-text-color:rgb(var(--ring-white-text-components));--ring-heading-color:var(--ring-text-color);--ring-secondary-components:108,112,126;--ring-secondary-color:rgb(var(--ring-secondary-components));--ring-disabled-components:168,173,189;--ring-disabled-color:rgb(var(--ring-disabled-components));--ring-content-background-components:255,255,255;--ring-content-background-color:rgb(var(--ring-content-background-components));--ring-popup-background-components:255,255,255;--ring-popup-background-color:rgb(var(--ring-popup-background-components));--ring-sidebar-background-components:247,248,250;--ring-sidebar-background-color:rgb(var(--ring-sidebar-background-components));--ring-selected-background-components:212,226,255;--ring-selected-background-color:rgb(var(--ring-selected-background-components));--ring-hover-background-components:237,243,255;--ring-hover-background-color:rgb(var(--ring-hover-background-components));--ring-navigation-background-components:255,255,255;--ring-navigation-background-color:rgb(var(--ring-navigation-background-components));--ring-tag-background-components:235,236,240;--ring-tag-background-color:rgb(var(--ring-tag-background-components));--ring-tag-hover-background-components:211,213,219;--ring-tag-hover-background-color:rgb(var(--ring-tag-hover-background-components));--ring-removed-background-components:250,212,216;--ring-removed-background-color:rgb(var(--ring-removed-background-components));--ring-warning-background-components:255,241,209;--ring-warning-background-color:rgb(var(--ring-warning-background-components));--ring-added-background-components:197,229,204;--ring-added-background-color:rgb(var(--ring-added-background-components));--ring-disabled-background-components:247,248,250;--ring-disabled-background-color:rgb(var(--ring-disabled-background-components));--ring-disabled-selected-background-components:235,236,240;--ring-disabled-selected-background-color:rgb(var(--ring-disabled-selected-background-components));--ring-button-danger-active-components:250,212,216;--ring-button-danger-active-color:rgb(var(--ring-button-danger-active-components));--ring-button-loader-background-components:70,130,250;--ring-button-loader-background:rgb(var(--ring-button-loader-background-components));--ring-button-primary-background-components:53,116,240;--ring-button-primary-background-color:rgb(var(--ring-button-primary-background-components));--ring-table-loader-background-color:rgba(var(--ring-content-background-components),0.5);--ring-removed-subtle-background-components:255,247,247;--ring-removed-subtle-background-color:rgb(var(--ring-removed-subtle-background-components));--ring-warning-subtle-background-components:255,250,235;--ring-warning-subtle-background-color:rgb(var(--ring-warning-subtle-background-components));--ring-added-subtle-background-components:242,252,243;--ring-added-subtle-background-color:rgb(var(--ring-added-subtle-background-components));--ring-code-background-color:var(--ring-content-background-color);--ring-code-components:0,0,0;--ring-code-color:rgb(var(--ring-code-components));--ring-code-comment-components:140,140,140;--ring-code-comment-color:rgb(var(--ring-code-comment-components));--ring-code-meta-components:158,136,13;--ring-code-meta-color:rgb(var(--ring-code-meta-components));--ring-code-keyword-components:0,51,179;--ring-code-keyword-color:rgb(var(--ring-code-keyword-components));--ring-code-tag-background-components:235,236,240;--ring-code-tag-background-color:rgb(var(--ring-code-tag-background-components));--ring-code-tag-color:var(--ring-code-keyword-color);--ring-code-tag-font-weight:var(--ring-font-weight-bold);--ring-code-field-components:135,16,148;--ring-code-field-color:rgb(var(--ring-code-field-components));--ring-code-attribute-components:23,80,235;--ring-code-attribute-color:rgb(var(--ring-code-attribute-components));--ring-code-number-color:var(--ring-code-attribute-color);--ring-code-string-components:6,125,23;--ring-code-string-color:rgb(var(--ring-code-string-components));--ring-code-addition-components:197,229,204;--ring-code-addition-color:rgb(var(--ring-code-addition-components));--ring-code-deletion-components:223,225,229;--ring-code-deletion-color:rgb(var(--ring-code-deletion-components));--ring-border-radius:4px;--ring-border-radius-small:2px;--ring-font-size-larger:16px;--ring-font-size:14px;--ring-font-size-smaller:12px;--ring-line-height-taller:24px;--ring-line-height:20px;--ring-line-height-lower:18px;--ring-line-height-lowest:16px;--ring-ease:0.3s ease-out;--ring-fast-ease:0.15s ease-out;--ring-font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;--ring-font-family-monospace:Menlo,\"Bitstream Vera Sans Mono\",\"Ubuntu Mono\",Consolas,\"Courier New\",Courier,monospace;--ring-font-weight-bold:600;--ring-invisible-element-z-index:-1;--ring-fixed-z-index:1;--ring-overlay-z-index:5;--ring-alert-z-index:6}.ring-form{color:var(--ring-text-color);font-family:var(--ring-font-family);font-size:var(--ring-font-size)}.ring-form_white-bg{background:var(--ring-content-background-color)}.ring-form_border{border:1px solid var(--ring-disabled-color);border-radius:2px}.ring-form_rows .ring-form__label{float:none;max-width:none}.ring-form_rows.ring-form__control{margin-left:0;width:calc(var(--ring-unit)*42)}.ring-form__wrap{margin-bottom:0;padding:calc(var(--ring-unit)*3) calc(var(--ring-unit)*4) 0}.ring-form__header{min-height:13px;padding-bottom:calc(var(--ring-unit)*2)}.ring-form__control__description{color:var(--ring-secondary-color);display:block;font-size:var(--ring-font-size-smaller);line-height:16px!important;max-width:900px;padding-top:calc(var(--ring-unit)/2)}.ring-form__title-img{border:0;float:left;height:calc(var(--ring-unit)*4)}.ring-form__title{display:block;font-weight:var(--ring-font-weight-bold);margin-bottom:calc(var(--ring-unit))}.ring-form__main-title{color:var(--ring-text-color);font-family:var(--ring-font-family);font-size:19px}.ring-form__title_separated{margin:calc(var(--ring-unit)*3) 0}.ring-form__group{margin:calc(var(--ring-unit)*2) 0;position:relative}.ring-form__group:first-child{margin-top:0}.ring-form__group:after{clear:both;content:\"\";display:block}.ring-form__group_united{padding-bottom:0}.ring-form__group .ring_form__group{padding-left:calc(var(--ring-unit)*2);padding-top:0}.ring-form__group .ring_form__group .ring-form__control{margin-left:calc(var(--ring-unit)*18)}.ring-form__group_nested{padding-left:calc(var(--ring-unit)*2);padding-top:0}.ring-form__group_nested .ring-form__control{margin-left:calc(var(--ring-unit)*18)}.ring-form__label{display:inline-block;float:left;line-height:calc(var(--ring-unit)*2);max-width:calc(var(--ring-unit)*18);padding-top:calc(var(--ring-unit)/2);position:relative;top:0;vertical-align:top}.ring-form__label .ring-checkbox__label,.ring-form__label .ring-radio-btn__label{top:-2px}.ring-form__label_title{font-weight:var(--ring-font-weight-bold)}.ring-form__control{line-height:calc(var(--ring-unit)*3);margin-left:calc(var(--ring-unit)*20);min-height:calc(var(--ring-unit)*3);position:relative;vertical-align:top;width:auto}.ring-form__control_text:after{content:\"\";display:inline-block;height:calc(var(--ring-unit)*3);vertical-align:middle}.ring-form__control_secondary{left:calc(var(--ring-unit)*27);position:absolute;top:var(--ring-unit)}.ring-form__control_on{color:var(--ring-success-color)}.ring-form__control_off{color:var(--ring-secondary-color)}.ring-form__control-link{position:relative;top:6px}.ring-form__control_small{margin-left:calc(var(--ring-unit)*16)!important}.ring-form__info{line-height:20px;margin-bottom:calc(var(--ring-unit)*-1 + 2px);margin-left:calc(var(--ring-unit)*20);width:calc(var(--ring-unit)*85)}.ring-form__control__part{margin-right:var(--ring-unit)}.ring-form__group_short{padding-bottom:0;padding-top:calc(var(--ring-unit)/2)}.ring-form__group_short:last-child{padding-bottom:var(--ring-unit)}.ring-form__group_short.ring-form__control{margin-left:calc(var(--ring-unit)*3)}.ring-form_small .ring-form__label{max-width:calc(var(--ring-unit)*12)}.ring-form_small .ring-form__control{margin-left:calc(var(--ring-unit)*16)}";
 var modules_bbe19eab = {"light":"light_rui_2ac4"};
 
 export { css, modules_bbe19eab as default };

package/components/global/theme.d.ts

@@ -4,6 +4,9 @@ declare enum Theme {
     LIGHT = "light",
     DARK = "dark"
 }
+export declare const ThemeContext: import("react").Context<{
+    theme: Theme.LIGHT | Theme.DARK;
+}>;
 export declare function useTheme(): Theme.LIGHT | Theme.DARK;
 export declare function useThemeClasses(theme: Theme): string;
 export interface WithThemeClassesProps {

package/components/global/theme.js

@@ -4,7 +4,7 @@ import 'classnames';
 import 'react-dom';
 import '../popup/popup.target.js';
 import '../popup/popup.js';
-export { a as ThemeProvider, W as WithThemeClasses, c as applyTheme, T as default, u as useTheme, b as useThemeClasses } from '../_helpers/theme.js';
+export { b as ThemeContext, a as ThemeProvider, W as WithThemeClasses, d as applyTheme, T as default, u as useTheme, c as useThemeClasses } from '../_helpers/theme.js';
 import './get-uid.js';
 import 'react/jsx-runtime';
 import 'prop-types';

package/components/header/header-icon.d.ts

@@ -0,0 +1,32 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ButtonAttrs } from '../button/button';
+import { IconType } from '../icon/icon';
+export interface HeaderIconSpecificProps {
+    icon: string | IconType;
+    rotatable?: boolean | null | undefined;
+}
+export default class HeaderIcon extends Component<ButtonAttrs & HeaderIconSpecificProps> {
+    static propTypes: {
+        icon: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactComponentLike | null | undefined>>>;
+        rotatable: PropTypes.Requireable<boolean>;
+        active: PropTypes.Requireable<boolean>;
+        danger: PropTypes.Requireable<boolean>;
+        delayed: PropTypes.Requireable<boolean>;
+        loader: PropTypes.Requireable<boolean>;
+        primary: PropTypes.Requireable<boolean>;
+        short: PropTypes.Requireable<boolean>;
+        text: PropTypes.Requireable<boolean>;
+        inline: PropTypes.Requireable<boolean>;
+        dropdown: PropTypes.Requireable<boolean>;
+        href: PropTypes.Requireable<string>;
+        target: PropTypes.Requireable<string>;
+        iconSize: PropTypes.Requireable<number>;
+        iconClassName: PropTypes.Requireable<string>;
+        iconSuppressSizeWarning: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    render(): import("react").JSX.Element;
+}

package/components/header/header-icon.js

@@ -0,0 +1,56 @@
+import { _ as _defineProperty, d as _objectSpread2, a as _inherits, b as _createClass, c as _objectWithoutProperties, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Button } from '../button/button.js';
+import { m as modules_47759f5e } from '../_helpers/header.js';
+import { jsx } from 'react/jsx-runtime';
+import 'core-js/modules/es.array.concat.js';
+import '@jetbrains/icons/chevron-down';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon__svg.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.string.starts-with.js';
+import '../global/memoize.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.weak-map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import '../link/clickableLink.js';
+import '../global/controls-height.js';
+import '../_helpers/button__classes.js';
+
+var _excluded = ["className", "rotatable"];
+var HeaderIcon = /*#__PURE__*/function (_Component) {
+  function HeaderIcon() {
+    _classCallCheck(this, HeaderIcon);
+    return _callSuper(this, HeaderIcon, arguments);
+  }
+  _inherits(HeaderIcon, _Component);
+  return _createClass(HeaderIcon, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        rotatable = _this$props.rotatable,
+        restProps = _objectWithoutProperties(_this$props, _excluded);
+      var classes = classNames(modules_47759f5e.icon, className, {
+        [modules_47759f5e.rotatable]: rotatable,
+        [modules_47759f5e.rotated]: rotatable && restProps.active
+      });
+      return /*#__PURE__*/jsx(Button, _objectSpread2(_objectSpread2({}, restProps), {}, {
+        className: classes
+      }));
+    }
+  }]);
+}(Component);
+_defineProperty(HeaderIcon, "propTypes", _objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]).isRequired,
+  rotatable: PropTypes.bool
+}));
+
+export { HeaderIcon as default };

package/components/header/header.d.ts

@@ -4,6 +4,7 @@ import Theme from '../global/theme';
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
     spaced: boolean;
     theme: Theme;
+    vertical: boolean;
 }
 /**
  * @name Header
@@ -20,6 +21,7 @@ declare class Header extends Component<HeaderProps> {
     static defaultProps: {
         spaced: boolean;
         theme: Theme;
+        vertical: boolean;
     };
     render(): import("react").JSX.Element;
 }
@@ -27,6 +29,7 @@ export type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProp
 export default Header;
 export { default as Logo } from './logo';
 export { default as Tray } from './tray';
+export { default as HeaderIcon } from './header-icon';
 export { default as TrayIcon } from './tray-icon';
 export { default as Profile } from './profile';
 export { default as SmartProfile } from './smart-profile';

package/components/header/header.js

@@ -7,7 +7,7 @@ import { m as modules_47759f5e } from '../_helpers/header.js';
 import { jsx } from 'react/jsx-runtime';
 export { default as Logo } from './logo.js';
 export { default as Tray } from './tray.js';
-export { default as TrayIcon } from './tray-icon.js';
+export { default as HeaderIcon, default as TrayIcon } from './header-icon.js';
 export { default as Profile } from './profile.js';
 export { default as SmartProfile } from './smart-profile.js';
 export { default as Services } from './services.js';
@@ -140,7 +140,7 @@ import '../auth/token-validator.js';
 import '@jetbrains/icons/services-20px';
 import '../_helpers/services-link.js';
 
-var _excluded = ["children", "className", "spaced", "theme"];
+var _excluded = ["children", "className", "spaced", "theme", "vertical"];
 var Header = /*#__PURE__*/function (_Component) {
   function Header() {
     _classCallCheck(this, Header);
@@ -155,9 +155,10 @@ var Header = /*#__PURE__*/function (_Component) {
         className = _this$props.className,
         spaced = _this$props.spaced,
         theme = _this$props.theme,
+        vertical = _this$props.vertical,
         restProps = _objectWithoutProperties(_this$props, _excluded);
-      var classes = classNames(modules_47759f5e.header, className, {
-        [modules_47759f5e.headerSpaced]: spaced
+      var classes = classNames(vertical ? modules_47759f5e.headerVertical : modules_47759f5e.header, className, {
+        [modules_47759f5e.headerSpaced]: spaced && !vertical
       });
       var overrideOuterTheme = theme !== Theme.LIGHT;
       var header = /*#__PURE__*/jsx("header", _objectSpread2(_objectSpread2({}, restProps), {}, {
@@ -181,7 +182,8 @@ _defineProperty(Header, "propTypes", {
 });
 _defineProperty(Header, "defaultProps", {
   spaced: true,
-  theme: Theme.DARK
+  theme: Theme.DARK,
+  vertical: false
 });
 
 export { Header as default };

package/components/header/links.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export default function Links({ className, ...restProps }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/components/header/links.js

@@ -0,0 +1,17 @@
+import { c as _objectWithoutProperties, d as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import classNames from 'classnames';
+import ScrollableSection from '../scrollable-section/scrollable-section.js';
+import { m as modules_47759f5e } from '../_helpers/header.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+
+var _excluded = ["className"];
+function Links(_ref) {
+  var className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx(ScrollableSection, _objectSpread2(_objectSpread2({}, restProps), {}, {
+    className: classNames(modules_47759f5e.links, className)
+  }));
+}
+
+export { Links as default };

package/components/header/profile.js

@@ -158,7 +158,8 @@ var Profile = /*#__PURE__*/function (_PureComponent) {
           children: /*#__PURE__*/jsx(Avatar, {
             url: user.profile && user.profile.avatar && user.profile.avatar.url,
             size: size,
-            round: round
+            round: round,
+            username: user.name
           })
         }), showName && /*#__PURE__*/jsx("span", {
           children: user.name

package/components/header/services.js

@@ -11,7 +11,7 @@ import classNames from 'classnames';
 import Dropdown from '../dropdown/dropdown.js';
 import Popup from '../popup/popup.js';
 import { T as Theme, m as modules_59717246 } from '../_helpers/theme.js';
-import TrayIcon from './tray-icon.js';
+import HeaderIcon from './header-icon.js';
 import { S as ServicesLink, m as modules_74a7bf8b } from '../_helpers/services-link.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '../global/data-tests.js';
@@ -69,7 +69,7 @@ var _excluded = ["clientId", "loading", "services", "initShown", "theme"];
 var makeAnchor = function makeAnchor(loading) {
   var Anchor = function Anchor(_ref) {
     var active = _ref.active;
-    return /*#__PURE__*/jsx(TrayIcon, {
+    return /*#__PURE__*/jsx(HeaderIcon, {
       loader: loading,
       active: active,
       icon: servicesIcon,
@@ -107,7 +107,7 @@ var Services = /*#__PURE__*/function (_PureComponent) {
         theme = _this$props.theme,
         props = _objectWithoutProperties(_this$props, _excluded);
       if (!services) {
-        return /*#__PURE__*/jsx(TrayIcon, _objectSpread2(_objectSpread2({}, props), {}, {
+        return /*#__PURE__*/jsx(HeaderIcon, _objectSpread2(_objectSpread2({}, props), {}, {
           loader: loading,
           active: loading,
           icon: servicesIcon,