@gravity-ui/navigation 3.11.0 → 4.0.1

package/build/esm/components/MobileHeader/OverlapPanel/OverlapPanel.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { IconProps } from '@gravity-ui/uikit';
-import './OverlapPanel.scss';
 interface OverlapPanelActionProps {
     icon: IconProps['data'];
     className?: string;

package/build/esm/components/MobileHeader/OverlapPanel/OverlapPanel.js

@@ -0,0 +1,25 @@
+import './OverlapPanel.css';
+import React__default from 'react';
+import { ArrowLeft } from '@gravity-ui/icons';
+import { Drawer, Button, Icon, Text } from '@gravity-ui/uikit';
+import { createBlock } from '../../utils/cn.js';
+import { MOBILE_HEADER_ICON_SIZE } from '../constants.js';
+import i18n from '../i18n/index.js';
+import styles from './OverlapPanel.module.scss.js';
+
+const b = createBlock('mobile-overlap-panel', styles);
+const OverlapPanel = ({ title, renderContent, className, onClose, action, closeTitle = i18n('overlap_button_close'), visible, topOffset, }) => {
+    const topOffsetValue = typeof topOffset === 'number' ? `${topOffset}px` : topOffset;
+    const drawerStyle = React__default.useMemo(() => ({ top: `calc(${topOffsetValue} + var(--gn-top-alert-height, 0px))` }), [topOffsetValue]);
+    return (React__default.createElement(Drawer, { className: b('', { action: Boolean(action) }, className), open: visible, onOpenChange: (open) => !open && onClose(), style: drawerStyle, contentClassName: b('drawer-item') },
+        React__default.createElement("div", { className: b('header') },
+            React__default.createElement(Button, { size: "l", view: "flat", className: b('close'), onClick: onClose, "aria-label": closeTitle },
+                React__default.createElement(Icon, { className: b('icon'), data: ArrowLeft, size: MOBILE_HEADER_ICON_SIZE })),
+            React__default.createElement(Text, { whiteSpace: "nowrap", ellipsis: true, variant: 'subheader-2', className: b('title'), as: title ? 'h2' : undefined }, title),
+            action && (React__default.createElement(Button, { size: "l", type: "button", view: "flat", onClick: action.onClick, className: b('action'), "aria-label": action.title },
+                React__default.createElement(Icon, { data: action.icon, size: MOBILE_HEADER_ICON_SIZE })))),
+        React__default.createElement("div", { className: b('content') }, renderContent())));
+};
+
+export { OverlapPanel };
+//# sourceMappingURL=OverlapPanel.js.map

package/build/esm/components/MobileHeader/OverlapPanel/OverlapPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlapPanel.js","sources":["../../../../../../src/components/MobileHeader/OverlapPanel/OverlapPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ArrowLeft as CloseIcon} from '@gravity-ui/icons';\nimport {Button, Drawer, Icon, IconProps, Text} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../utils/cn';\nimport {MOBILE_HEADER_ICON_SIZE} from '../constants';\nimport i18n from '../i18n';\n\nimport styles from './OverlapPanel.module.scss';\n\nconst b = createBlock('mobile-overlap-panel', styles);\n\ninterface OverlapPanelActionProps {\n    icon: IconProps['data'];\n    className?: string;\n    onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    title: string;\n}\n\nexport interface OverlapPanelProps {\n    className?: string;\n    title?: string;\n    onClose: () => void;\n    action?: OverlapPanelActionProps;\n    renderContent: () => React.ReactNode;\n    closeTitle?: string;\n    visible: boolean;\n    topOffset?: number | string;\n}\n\nexport const OverlapPanel = ({\n    title,\n    renderContent,\n    className,\n    onClose,\n    action,\n    closeTitle = i18n('overlap_button_close'),\n    visible,\n    topOffset,\n}: OverlapPanelProps) => {\n    const topOffsetValue = typeof topOffset === 'number' ? `${topOffset}px` : topOffset;\n\n    const drawerStyle = React.useMemo(\n        () => ({top: `calc(${topOffsetValue} + var(--gn-top-alert-height, 0px))`}),\n        [topOffsetValue],\n    );\n\n    return (\n        <Drawer\n            className={b('', {action: Boolean(action)}, className)}\n            open={visible}\n            onOpenChange={(open) => !open && onClose()}\n            style={drawerStyle}\n            contentClassName={b('drawer-item')}\n        >\n            <div className={b('header')}>\n                <Button\n                    size=\"l\"\n                    view=\"flat\"\n                    className={b('close')}\n                    onClick={onClose}\n                    aria-label={closeTitle}\n                >\n                    <Icon className={b('icon')} data={CloseIcon} size={MOBILE_HEADER_ICON_SIZE} />\n                </Button>\n                <Text\n                    whiteSpace=\"nowrap\"\n                    ellipsis\n                    variant={'subheader-2'}\n                    className={b('title')}\n                    as={title ? ('h2' as const) : undefined}\n                >\n                    {title}\n                </Text>\n                {action && (\n                    <Button\n                        size=\"l\"\n                        type=\"button\"\n                        view=\"flat\"\n                        onClick={action.onClick}\n                        className={b('action')}\n                        aria-label={action.title}\n                    >\n                        <Icon data={action.icon} size={MOBILE_HEADER_ICON_SIZE} />\n                    </Button>\n                )}\n            </div>\n            <div className={b('content')}>{renderContent()}</div>\n        </Drawer>\n    );\n};\n"],"names":["React","CloseIcon"],"mappings":";;;;;;;;AAWA,MAAM,CAAC,GAAG,WAAW,CAAC,sBAAsB,EAAE,MAAM,CAAC;AAoB9C,MAAM,YAAY,GAAG,CAAC,EACzB,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,UAAU,GAAG,IAAI,CAAC,sBAAsB,CAAC,EACzC,OAAO,EACP,SAAS,GACO,KAAI;AACpB,IAAA,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,GAAG,CAAA,EAAG,SAAS,CAAI,EAAA,CAAA,GAAG,SAAS;IAEnF,MAAM,WAAW,GAAGA,cAAK,CAAC,OAAO,CAC7B,OAAO,EAAC,GAAG,EAAE,CAAA,KAAA,EAAQ,cAAc,CAAA,mCAAA,CAAqC,EAAC,CAAC,EAC1E,CAAC,cAAc,CAAC,CACnB;IAED,QACIA,6BAAC,MAAM,EAAA,EACH,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,EAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EAAC,EAAE,SAAS,CAAC,EACtD,IAAI,EAAE,OAAO,EACb,YAAY,EAAE,CAAC,IAAI,KAAK,CAAC,IAAI,IAAI,OAAO,EAAE,EAC1C,KAAK,EAAE,WAAW,EAClB,gBAAgB,EAAE,CAAC,CAAC,aAAa,CAAC,EAAA;AAElC,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAA;YACvBA,cAAC,CAAA,aAAA,CAAA,MAAM,IACH,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,OAAO,EAAE,OAAO,EAAA,YAAA,EACJ,UAAU,EAAA;AAEtB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAEC,SAAS,EAAE,IAAI,EAAE,uBAAuB,GAAI,CACzE;AACT,YAAAD,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,UAAU,EAAC,QAAQ,EACnB,QAAQ,EACR,IAAA,EAAA,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,EAAE,EAAE,KAAK,GAAI,IAAc,GAAG,SAAS,EAAA,EAEtC,KAAK,CACH;AACN,YAAA,MAAM,KACHA,cAAC,CAAA,aAAA,CAAA,MAAM,IACH,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACV,YAAA,EAAA,MAAM,CAAC,KAAK,EAAA;AAExB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,uBAAuB,EAAI,CAAA,CACrD,CACZ,CACC;AACN,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAG,EAAA,aAAa,EAAE,CAAO,CAChD;AAEjB;;;;"}

package/build/esm/components/MobileHeader/OverlapPanel/OverlapPanel.module.scss.js

@@ -0,0 +1,4 @@
+var styles = {"gn-mobile-overlap-panel":"OverlapPanel-module__gn-mobile-overlap-panel___W8VR0","gnMobileOverlapPanel":"OverlapPanel-module__gn-mobile-overlap-panel___W8VR0","gn-mobile-overlap-panel__drawer-item":"OverlapPanel-module__gn-mobile-overlap-panel__drawer-item___2lhdo","gnMobileOverlapPanelDrawerItem":"OverlapPanel-module__gn-mobile-overlap-panel__drawer-item___2lhdo","gn-mobile-overlap-panel_action":"OverlapPanel-module__gn-mobile-overlap-panel_action___nATrv","gnMobileOverlapPanelAction":"OverlapPanel-module__gn-mobile-overlap-panel__action___4sWLx","gn-mobile-overlap-panel__title":"OverlapPanel-module__gn-mobile-overlap-panel__title___vAnEf","gnMobileOverlapPanelTitle":"OverlapPanel-module__gn-mobile-overlap-panel__title___vAnEf","gn-mobile-overlap-panel__close":"OverlapPanel-module__gn-mobile-overlap-panel__close___SsbJs","gnMobileOverlapPanelClose":"OverlapPanel-module__gn-mobile-overlap-panel__close___SsbJs","gn-mobile-overlap-panel__action":"OverlapPanel-module__gn-mobile-overlap-panel__action___4sWLx","g-button":"OverlapPanel-module__g-button___uZtJf","gButton":"OverlapPanel-module__g-button___uZtJf","gn-mobile-overlap-panel__content":"OverlapPanel-module__gn-mobile-overlap-panel__content___6zjwy","gnMobileOverlapPanelContent":"OverlapPanel-module__gn-mobile-overlap-panel__content___6zjwy","gn-mobile-overlap-panel__header":"OverlapPanel-module__gn-mobile-overlap-panel__header___ZW5bl","gnMobileOverlapPanelHeader":"OverlapPanel-module__gn-mobile-overlap-panel__header___ZW5bl"};
+
+export { styles as default };
+//# sourceMappingURL=OverlapPanel.module.scss.js.map

package/build/esm/components/MobileHeader/OverlapPanel/OverlapPanel.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlapPanel.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/build/esm/components/MobileHeader/constants.js

@@ -0,0 +1,14 @@
+const MOBILE_ITEM_HEIGHT = 48;
+const MOBILE_HEADER_COMPACT_HEIGHT = 50;
+const MOBILE_HEADER_EXPANDED_HEIGHT = 120;
+const MOBILE_HEADER_ICON_SIZE = 20;
+const MOBILE_HEADER_EVENT_NAMES = {
+    toggleEvent: 'MOBILE_PANEL_TOGGLE',
+    closeEvent: 'MOBILE_PANEL_CLOSE',
+    openEvent: 'MOBILE_PANEL_OPEN',
+};
+const BURGER_PANEL_ITEM_ID = 'burger';
+const OVERLAP_PANEL_ITEM_ID = 'overlap';
+
+export { BURGER_PANEL_ITEM_ID, MOBILE_HEADER_COMPACT_HEIGHT, MOBILE_HEADER_EVENT_NAMES, MOBILE_HEADER_EXPANDED_HEIGHT, MOBILE_HEADER_ICON_SIZE, MOBILE_ITEM_HEIGHT, OVERLAP_PANEL_ITEM_ID };
+//# sourceMappingURL=constants.js.map

package/build/esm/components/MobileHeader/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../src/components/MobileHeader/constants.ts"],"sourcesContent":["import {ItemEventsConfig} from './types';\n\nexport const MOBILE_ITEM_HEIGHT = 48;\nexport const MOBILE_HEADER_COMPACT_HEIGHT = 50;\nexport const MOBILE_HEADER_EXPANDED_HEIGHT = 120;\nexport const MOBILE_HEADER_ICON_SIZE = 20;\n\nexport const MOBILE_HEADER_EVENT_NAMES: ItemEventsConfig = {\n    toggleEvent: 'MOBILE_PANEL_TOGGLE',\n    closeEvent: 'MOBILE_PANEL_CLOSE',\n    openEvent: 'MOBILE_PANEL_OPEN',\n};\n\nexport const BURGER_PANEL_ITEM_ID = 'burger';\nexport const OVERLAP_PANEL_ITEM_ID = 'overlap';\n"],"names":[],"mappings":"AAEO,MAAM,kBAAkB,GAAG;AAC3B,MAAM,4BAA4B,GAAG;AACrC,MAAM,6BAA6B,GAAG;AACtC,MAAM,uBAAuB,GAAG;AAE1B,MAAA,yBAAyB,GAAqB;AACvD,IAAA,WAAW,EAAE,qBAAqB;AAClC,IAAA,UAAU,EAAE,oBAAoB;AAChC,IAAA,SAAS,EAAE,mBAAmB;;AAG3B,MAAM,oBAAoB,GAAG;AAC7B,MAAM,qBAAqB,GAAG;;;;"}

package/build/esm/components/MobileHeader/i18n/en.json.js

@@ -0,0 +1,11 @@
+var burger_button_close = "Close menu";
+var burger_button_open = "Open menu";
+var overlap_button_close = "Close";
+var en = {
+	burger_button_close: burger_button_close,
+	burger_button_open: burger_button_open,
+	overlap_button_close: overlap_button_close
+};
+
+export { burger_button_close, burger_button_open, en as default, overlap_button_close };
+//# sourceMappingURL=en.json.js.map

package/build/esm/components/MobileHeader/i18n/en.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/build/esm/components/MobileHeader/i18n/index.d.ts

@@ -1,4 +1,12 @@
 declare const _default: ((key: "burger_button_close" | "burger_button_open" | "overlap_button_close", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "burger_button_close" | "burger_button_open" | "overlap_button_close", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "burger_button_close" | "burger_button_open" | "overlap_button_close", params?: import("@gravity-ui/i18n").Params) => string;
+    };
     keysetData: {
         "gn-MobileHeader": Record<"burger_button_close" | "burger_button_open" | "overlap_button_close", import("@gravity-ui/i18n").KeyData>;
     };

package/build/esm/components/MobileHeader/i18n/index.js

@@ -0,0 +1,10 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../utils/cn.js';
+import en from './en.json.js';
+import ru from './ru.json.js';
+
+const COMPONENT = 'MobileHeader';
+var i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}${COMPONENT}`);
+
+export { i18n as default };
+//# sourceMappingURL=index.js.map

package/build/esm/components/MobileHeader/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/MobileHeader/i18n/index.ts"],"sourcesContent":["import {addComponentKeysets} from '@gravity-ui/uikit/i18n';\n\nimport {NAMESPACE} from '../../utils/cn';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nconst COMPONENT = 'MobileHeader';\nexport default addComponentKeysets({en, ru}, `${NAMESPACE}${COMPONENT}`);\n"],"names":[],"mappings":";;;;;AAOA,MAAM,SAAS,GAAG,cAAc;AAChC,WAAe,mBAAmB,CAAC,EAAC,EAAE,EAAE,EAAE,EAAC,EAAE,CAAA,EAAG,SAAS,CAAA,EAAG,SAAS,CAAA,CAAE,CAAC;;;;"}

package/build/esm/components/MobileHeader/i18n/ru.json.js

@@ -0,0 +1,11 @@
+var burger_button_close = "Закрыть меню";
+var burger_button_open = "Открыть меню";
+var overlap_button_close = "Закрыть";
+var ru = {
+	burger_button_close: burger_button_close,
+	burger_button_open: burger_button_open,
+	overlap_button_close: overlap_button_close
+};
+
+export { burger_button_close, burger_button_open, ru as default, overlap_button_close };
+//# sourceMappingURL=ru.json.js.map

package/build/esm/components/MobileHeader/i18n/ru.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ru.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/build/esm/components/MobileHeader/types.d.ts

@@ -10,9 +10,10 @@ export interface ModalItem {
     onClose?: () => void;
 }
 type MobileMenuItemType = 'regular' | 'divider';
-export interface MobileMenuItem extends Omit<MenuItem, 'tooltipText' | 'pinned' | 'rightAdornment' | 'afterMoreButton' | 'itemWrapper' | 'onItemClick'> {
+export interface MobileMenuItem extends Omit<MenuItem, 'tooltipText' | 'pinned' | 'rightAdornment' | 'afterMoreButton' | 'itemWrapper' | 'onItemClick' | 'href'> {
     type?: MobileMenuItemType;
     closeMenuOnClick?: boolean;
+    link?: string;
     onItemClick?: (item: MobileMenuItem) => void;
     itemWrapper?: (node: React.ReactNode, item: MobileMenuItem) => React.ReactNode;
 }

package/build/esm/components/MobileHeader/utils.js

@@ -0,0 +1,20 @@
+import { MOBILE_ITEM_HEIGHT } from './constants.js';
+
+const getItemHeight = (item) => {
+    switch (item.type) {
+        case 'divider':
+            return 1;
+        default:
+            return MOBILE_ITEM_HEIGHT;
+    }
+};
+const getSelectedItemIndex = (items) => {
+    const index = items.findIndex(({ current }) => Boolean(current));
+    return index === -1 ? undefined : index;
+};
+const getMobileHeaderCustomEvent = (eventName, detail) => {
+    return new CustomEvent(eventName, { detail });
+};
+
+export { getItemHeight, getMobileHeaderCustomEvent, getSelectedItemIndex };
+//# sourceMappingURL=utils.js.map

package/build/esm/components/MobileHeader/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/MobileHeader/utils.ts"],"sourcesContent":["import {MOBILE_ITEM_HEIGHT} from './constants';\nimport {MobileHeaderEventOptions, MobileMenuItem} from './types';\n\nexport const getItemHeight = (item: MobileMenuItem) => {\n    switch (item.type) {\n        case 'divider':\n            return 1;\n        default:\n            return MOBILE_ITEM_HEIGHT;\n    }\n};\n\nexport const getSelectedItemIndex = (items: MobileMenuItem[]) => {\n    const index = items.findIndex(({current}) => Boolean(current));\n\n    return index === -1 ? undefined : index;\n};\n\nexport const getMobileHeaderCustomEvent = (\n    eventName: string,\n    detail?: MobileHeaderEventOptions,\n) => {\n    return new CustomEvent<MobileHeaderEventOptions>(eventName, {detail});\n};\n"],"names":[],"mappings":";;AAGa,MAAA,aAAa,GAAG,CAAC,IAAoB,KAAI;AAClD,IAAA,QAAQ,IAAI,CAAC,IAAI;AACb,QAAA,KAAK,SAAS;AACV,YAAA,OAAO,CAAC;AACZ,QAAA;AACI,YAAA,OAAO,kBAAkB;;AAErC;AAEa,MAAA,oBAAoB,GAAG,CAAC,KAAuB,KAAI;AAC5D,IAAA,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,EAAC,OAAO,EAAC,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;AAE9D,IAAA,OAAO,KAAK,KAAK,EAAE,GAAG,SAAS,GAAG,KAAK;AAC3C;MAEa,0BAA0B,GAAG,CACtC,SAAiB,EACjB,MAAiC,KACjC;IACA,OAAO,IAAI,WAAW,CAA2B,SAAS,EAAE,EAAC,MAAM,EAAC,CAAC;AACzE;;;;"}

package/build/esm/components/MobileLogo/MobileLogo.css

@@ -0,0 +1 @@
+.MobileLogo-module__gn-mobile-logo___YNl4-{align-items:center;display:flex;gap:var(--g-spacing-2);overflow:hidden}.MobileLogo-module__gn-mobile-logo___YNl4-:is(a), .MobileLogo-module__gn-mobile-logo___YNl4-:is(a):active, .MobileLogo-module__gn-mobile-logo___YNl4-:is(a):focus, .MobileLogo-module__gn-mobile-logo___YNl4-:is(a):hover, .MobileLogo-module__gn-mobile-logo___YNl4-:is(a):visited{color:var(--g-color-text-primary);outline:none;text-decoration:none}.MobileLogo-module__gn-mobile-logo__icon___bfC4-{flex-shrink:0}.MobileLogo-module__gn-mobile-logo__title___fMNw5{font-family:var(--g-text-header-font-family);font-size:var(--g-text-header-1-font-size);font-weight:var(--g-text-header-font-weight);line-height:var(--g-text-header-1-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/build/esm/components/MobileLogo/MobileLogo.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { LogoProps } from '../types';
-import './MobileLogo.scss';
 export interface MobileLogoProps extends LogoProps {
     compact: boolean;
 }

package/build/esm/components/MobileLogo/MobileLogo.js

@@ -0,0 +1,31 @@
+import './MobileLogo.css';
+import React__default from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { createBlock } from '../utils/cn.js';
+import styles from './MobileLogo.module.scss.js';
+
+const b = createBlock('mobile-logo', styles);
+const MobileLogo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 32, textSize = 20, href = '/', target = '_self', wrapper, onClick, className, }) => {
+    const hasWrapper = typeof wrapper === 'function';
+    let logoIcon;
+    if (iconSrc) {
+        logoIcon = (React__default.createElement("img", { alt: "logo icon", src: iconSrc, width: iconSize, height: iconSize, className: iconClassName }));
+    }
+    else if (icon) {
+        logoIcon = React__default.createElement(Icon, { data: icon, size: iconSize, className: b('icon', iconClassName) });
+    }
+    let logoTitle;
+    if (typeof text === 'function') {
+        logoTitle = text();
+    }
+    else {
+        logoTitle = (React__default.createElement("span", { className: b('title'), style: { fontSize: textSize } }, text));
+    }
+    const logo = (React__default.createElement(React__default.Fragment, null,
+        logoIcon,
+        logoTitle));
+    return hasWrapper ? (React__default.createElement("div", { className: b(null, className), onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", { href: href, target: target, ref: target === '_self' ? undefined : 'noreferrer', className: b(null, className), onClick: onClick }, logo));
+};
+
+export { MobileLogo };
+//# sourceMappingURL=MobileLogo.js.map

package/build/esm/components/MobileLogo/MobileLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileLogo.js","sources":["../../../../../src/components/MobileLogo/MobileLogo.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {LogoProps} from '../types';\nimport {createBlock} from '../utils/cn';\n\nimport styles from './MobileLogo.module.scss';\n\nconst b = createBlock('mobile-logo', styles);\n\nexport interface MobileLogoProps extends LogoProps {\n    compact: boolean;\n}\n\nexport const MobileLogo: React.FC<MobileLogoProps> = ({\n    text,\n    compact,\n    icon,\n    iconSrc,\n    iconClassName,\n    iconSize = 32,\n    textSize = 20,\n    href = '/',\n    target = '_self',\n    wrapper,\n    onClick,\n    className,\n}) => {\n    const hasWrapper = typeof wrapper === 'function';\n\n    let logoIcon;\n\n    if (iconSrc) {\n        logoIcon = (\n            <img\n                alt=\"logo icon\"\n                src={iconSrc}\n                width={iconSize}\n                height={iconSize}\n                className={iconClassName}\n            />\n        );\n    } else if (icon) {\n        logoIcon = <Icon data={icon} size={iconSize} className={b('icon', iconClassName)} />;\n    }\n\n    let logoTitle: React.ReactNode;\n\n    if (typeof text === 'function') {\n        logoTitle = text();\n    } else {\n        logoTitle = (\n            <span className={b('title')} style={{fontSize: textSize}}>\n                {text}\n            </span>\n        );\n    }\n\n    const logo = (\n        <React.Fragment>\n            {logoIcon}\n            {logoTitle}\n        </React.Fragment>\n    );\n\n    return hasWrapper ? (\n        <div className={b(null, className)} onClick={onClick}>\n            {wrapper(logo, compact)}\n        </div>\n    ) : (\n        <a\n            href={href}\n            target={target}\n            ref={target === '_self' ? undefined : 'noreferrer'}\n            className={b(null, className)}\n            onClick={onClick}\n        >\n            {logo}\n        </a>\n    );\n};\n"],"names":["React"],"mappings":";;;;;AASA,MAAM,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,MAAM,CAAC;AAM/B,MAAA,UAAU,GAA8B,CAAC,EAClD,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,OAAO,EACP,aAAa,EACb,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,GAAG,EACV,MAAM,GAAG,OAAO,EAChB,OAAO,EACP,OAAO,EACP,SAAS,GACZ,KAAI;AACD,IAAA,MAAM,UAAU,GAAG,OAAO,OAAO,KAAK,UAAU;AAEhD,IAAA,IAAI,QAAQ;IAEZ,IAAI,OAAO,EAAE;QACT,QAAQ,IACJA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAC,WAAW,EACf,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,QAAQ,EAChB,SAAS,EAAE,aAAa,EAC1B,CAAA,CACL;;SACE,IAAI,IAAI,EAAE;QACb,QAAQ,GAAGA,6BAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,aAAa,CAAC,EAAA,CAAI;;AAGxF,IAAA,IAAI,SAA0B;AAE9B,IAAA,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;QAC5B,SAAS,GAAG,IAAI,EAAE;;SACf;QACH,SAAS,IACLA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAC,EACnD,EAAA,IAAI,CACF,CACV;;AAGL,IAAA,MAAM,IAAI,IACNA,cAAC,CAAA,aAAA,CAAAA,cAAK,CAAC,QAAQ,EAAA,IAAA;QACV,QAAQ;QACR,SAAS,CACG,CACpB;AAED,IAAA,OAAO,UAAU,IACbA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAC/C,EAAA,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CACrB,KAENA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACI,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,KAAK,OAAO,GAAG,SAAS,GAAG,YAAY,EAClD,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,OAAO,EAAE,OAAO,EAAA,EAEf,IAAI,CACL,CACP;AACL;;;;"}

package/build/esm/components/MobileLogo/MobileLogo.module.scss.js

@@ -0,0 +1,4 @@
+var styles = {"gn-mobile-logo":"MobileLogo-module__gn-mobile-logo___YNl4-","gnMobileLogo":"MobileLogo-module__gn-mobile-logo___YNl4-","gn-mobile-logo__icon":"MobileLogo-module__gn-mobile-logo__icon___bfC4-","gnMobileLogoIcon":"MobileLogo-module__gn-mobile-logo__icon___bfC4-","gn-mobile-logo__title":"MobileLogo-module__gn-mobile-logo__title___fMNw5","gnMobileLogoTitle":"MobileLogo-module__gn-mobile-logo__title___fMNw5"};
+
+export { styles as default };
+//# sourceMappingURL=MobileLogo.module.scss.js.map

package/build/esm/components/MobileLogo/MobileLogo.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileLogo.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/build/esm/components/Settings/Selection/context.js

@@ -0,0 +1,22 @@
+import React__default from 'react';
+import { getSelectedSettingsPart } from '../collect-settings.js';
+
+const defaultValue = {};
+const context = React__default.createContext(defaultValue);
+context.displayName = 'SettingsSelectionContext';
+function useSettingsSelectionProviderValue(pages, selection) {
+    const selectedRef = React__default.useRef(null);
+    const contextValue = React__default.useMemo(() => {
+        if (!selection)
+            return { selectedRef };
+        return Object.assign({ selectedRef }, getSelectedSettingsPart(pages, selection));
+    }, [pages, selection]);
+    return contextValue;
+}
+const SettingsSelectionContextProvider = context.Provider;
+function useSettingsSelectionContext() {
+    return React__default.useContext(context);
+}
+
+export { SettingsSelectionContextProvider, useSettingsSelectionContext, useSettingsSelectionProviderValue };
+//# sourceMappingURL=context.js.map

package/build/esm/components/Settings/Selection/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../../../src/components/Settings/Selection/context.ts"],"sourcesContent":["import React from 'react';\n\nimport {SelectedSettingsPart, SettingsPage, getSelectedSettingsPart} from '../collect-settings';\n\nimport {SettingsSelection} from './types';\n\nexport interface SettingsSelectionProviderContextValue extends SelectedSettingsPart {\n    selectedRef?: React.RefObject<HTMLDivElement>;\n}\n\nconst defaultValue: SettingsSelectionProviderContextValue = {};\n\nconst context = React.createContext(defaultValue);\ncontext.displayName = 'SettingsSelectionContext';\n\nexport function useSettingsSelectionProviderValue(\n    pages: Record<string, SettingsPage>,\n    selection: SettingsSelection | undefined,\n): SettingsSelectionProviderContextValue {\n    const selectedRef = React.useRef<HTMLDivElement>(null);\n\n    const contextValue: SettingsSelectionProviderContextValue = React.useMemo(() => {\n        if (!selection) return {selectedRef};\n\n        return {selectedRef, ...getSelectedSettingsPart(pages, selection)};\n    }, [pages, selection]);\n\n    return contextValue;\n}\n\nexport const SettingsSelectionContextProvider = context.Provider;\n\nexport function useSettingsSelectionContext(): SettingsSelectionProviderContextValue {\n    return React.useContext(context);\n}\n"],"names":["React"],"mappings":";;;AAUA,MAAM,YAAY,GAA0C,EAAE;AAE9D,MAAM,OAAO,GAAGA,cAAK,CAAC,aAAa,CAAC,YAAY,CAAC;AACjD,OAAO,CAAC,WAAW,GAAG,0BAA0B;AAEhC,SAAA,iCAAiC,CAC7C,KAAmC,EACnC,SAAwC,EAAA;IAExC,MAAM,WAAW,GAAGA,cAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;AAEtD,IAAA,MAAM,YAAY,GAA0CA,cAAK,CAAC,OAAO,CAAC,MAAK;AAC3E,QAAA,IAAI,CAAC,SAAS;YAAE,OAAO,EAAC,WAAW,EAAC;QAEpC,OAAQ,MAAA,CAAA,MAAA,CAAA,EAAA,WAAW,IAAK,uBAAuB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAE;AACvE,KAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;AAEtB,IAAA,OAAO,YAAY;AACvB;AAEa,MAAA,gCAAgC,GAAG,OAAO,CAAC;SAExC,2BAA2B,GAAA;AACvC,IAAA,OAAOA,cAAK,CAAC,UAAU,CAAC,OAAO,CAAC;AACpC;;;;"}

package/build/esm/components/Settings/Selection/utils.js

@@ -0,0 +1,20 @@
+function isSectionSelected(selected, pageId, section) {
+    var _a;
+    if (!selected.section || selected.setting) {
+        return false;
+    }
+    else if (selected.section.id && selected.section.id === section.id) {
+        return true;
+    }
+    else if (((_a = selected.page) === null || _a === undefined ? undefined : _a.id) === pageId &&
+        selected.section.title &&
+        selected.section.title === section.title) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+
+export { isSectionSelected };
+//# sourceMappingURL=utils.js.map

package/build/esm/components/Settings/Selection/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/Settings/Selection/utils.ts"],"sourcesContent":["import {SelectedSettingsPart, SettingsPageSection} from '../collect-settings';\n\nexport function isSectionSelected(\n    selected: SelectedSettingsPart,\n    pageId: string,\n    section: SettingsPageSection,\n) {\n    if (!selected.section || selected.setting) {\n        return false;\n    } else if (selected.section.id && selected.section.id === section.id) {\n        return true;\n    } else if (\n        selected.page?.id === pageId &&\n        selected.section.title &&\n        selected.section.title === section.title\n    ) {\n        return true;\n    } else {\n        return false;\n    }\n}\n"],"names":[],"mappings":"SAEgB,iBAAiB,CAC7B,QAA8B,EAC9B,MAAc,EACd,OAA4B,EAAA;;IAE5B,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE;AACvC,QAAA,OAAO,KAAK;;AACT,SAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAE;AAClE,QAAA,OAAO,IAAI;;SACR,IACH,CAAA,MAAA,QAAQ,CAAC,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,EAAE,MAAK,MAAM;QAC5B,QAAQ,CAAC,OAAO,CAAC,KAAK;QACtB,QAAQ,CAAC,OAAO,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,EAC1C;AACE,QAAA,OAAO,IAAI;;SACR;AACH,QAAA,OAAO,KAAK;;AAEpB;;;;"}

package/build/esm/components/Settings/Settings.css

@@ -0,0 +1 @@
+.Settings-module__gn-settings___RP-Ow{display:grid;grid-template-columns:216px 1fr;height:100%;width:834px}.Settings-module__gn-settings_view_mobile___4DAjN{display:block;height:calc(80vh - 56px);overflow-x:hidden;width:auto}@supports (height:90dvh){.Settings-module__gn-settings_view_mobile___4DAjN{height:calc(90dvh - 56px)}}.Settings-module__gn-settings_view_mobile___4DAjN.Settings-module__gn-settings_loading___PpULI{text-align:center}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__loader___68JGV{margin-top:20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__search___2xBLH{margin:4px 0 16px;padding:0 20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__page___pbx2Y{overflow-y:visible}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__tabs___-Z5T9 .Settings-module__g-tabs__item___tsOZs:first-child{margin-left:20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__tabs___-Z5T9 .Settings-module__g-tabs__item___tsOZs:last-child{margin-right:20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-heading___gPmIo{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-3-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-3-line-height)}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-subheader___fl8WB{color:var(--g-color-text-secondary)}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-heading___gPmIo+.Settings-module__gn-settings-subheader___WAPMz{margin-top:8px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-item___2NG92{margin-top:0}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-heading___gPmIo+.Settings-module__gn-settings__section-item___2NG92, .Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-subheader___fl8WB+.Settings-module__gn-settings__section-item___2NG92{margin-top:30px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__section-item___2NG92+.Settings-module__gn-settings__section-item___2NG92{margin-top:22px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item___rCuSR:not(.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item_mode_row___k5s8p){gap:8px;grid-template-columns:1fr}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item-heading___1zCRl{font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-2-line-height)}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item-description___8rQUz{font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-1-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-1-line-height)}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item_mode_row___k5s8p{grid-template-columns:1fr auto}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item_mode_row___k5s8p .Settings-module__gn-settings__item-heading___1zCRl{padding-right:20px}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__item-content___1InnS{width:100%}.Settings-module__gn-settings_view_mobile___4DAjN .Settings-module__gn-settings__not-found___eIxBf{color:var(--g-color-text-hint);font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);justify-items:start;line-height:var(--g-text-body-2-line-height);margin:20px 0 0 20px}.Settings-module__gn-settings_loading___PpULI{grid-template-columns:auto}.Settings-module__gn-settings__loader___68JGV{place-self:center}.Settings-module__gn-settings__not-found___eIxBf{display:grid;height:100%;place-items:center}.Settings-module__gn-settings__menu___3XZde{border-right:1px solid var(--g-color-line-generic)}.Settings-module__gn-settings__heading___mLHq2{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);margin:20px 20px 0}.Settings-module__gn-settings__search___2xBLH{margin:0 20px 16px}.Settings-module__gn-settings__page___pbx2Y{overflow-y:auto}.Settings-module__gn-settings__content___tQ2hC{padding:20px}.Settings-module__gn-settings__section-right-adornment_hidden___wn9-S{opacity:0;transition:opacity .2s}.Settings-module__gn-settings__section-heading___gPmIo:hover .Settings-module__gn-settings__section-right-adornment_hidden___wn9-S{opacity:1}.Settings-module__gn-settings__section-heading___gPmIo{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);margin:0}.Settings-module__gn-settings__section-item___2NG92{margin-top:24px}.Settings-module__gn-settings__section___c6u3X+.Settings-module__gn-settings__section___c6u3X{margin-top:32px}.Settings-module__gn-settings__section___c6u3X:only-child .Settings-module__gn-settings__section-item___2NG92:first-of-type{margin-top:0}.Settings-module__gn-settings__section___c6u3X:only-child .Settings-module__gn-settings__section-heading___gPmIo{display:none}.Settings-module__gn-settings__item___rCuSR{display:grid;grid-template-columns:216px 1fr;justify-items:start}.Settings-module__gn-settings__item_title_hide___w1l3N{grid-template-columns:1fr;justify-items:normal}.Settings-module__gn-settings__item_align_top___sPweP{align-items:start}.Settings-module__gn-settings__item_align_center___GdjES{align-items:center}.Settings-module__gn-settings__item-title_badge___pTkg2{position:relative}.Settings-module__gn-settings__item-title_badge___pTkg2:after{background-color:var(--g-color-text-danger);border-radius:50%;content:"";display:block;height:6px;position:absolute;right:-8px;top:1px;width:6px}.Settings-module__gn-settings__item-description___8rQUz{color:var(--g-color-text-secondary);display:block;font-family:var(--g-text-caption-font-family);font-size:var(--g-text-caption-2-font-size);font-weight:var(--g-text-caption-font-weight);line-height:var(--g-text-caption-2-line-height);margin-top:2px;padding-right:20px}.Settings-module__gn-settings__item-right-adornment_hidden___9zgNP{opacity:0;transition:opacity .2s}.Settings-module__gn-settings__item___rCuSR:hover .Settings-module__gn-settings__item-right-adornment_hidden___9zgNP{opacity:1}.Settings-module__gn-settings__item_selected___e4r3Y, .Settings-module__gn-settings__section_selected___YOdnN{background:var(--g-color-base-selection);border-radius:8px;margin-left:-8px;padding:8px}.Settings-module__gn-settings__found___PDgmI{background:var(--g-color-base-selection);font-weight:var(--g-text-accent-font-weight)}

package/build/esm/components/Settings/Settings.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { SettingsGroupProps, SettingsItemProps, SettingsPageProps, SettingsProps, SettingsSectionProps } from './types';
-import './Settings.scss';
 export declare function Settings({ loading, renderLoading, children, view, renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover, ...props }: SettingsProps): React.JSX.Element;
 export declare namespace Settings {
     var Group: ({ children }: SettingsGroupProps) => React.JSX.Element;

package/build/esm/components/Settings/Settings.js

@@ -0,0 +1,140 @@
+import './Settings.css';
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { Loader, Flex } from '@gravity-ui/uikit';
+import identity from '../../_virtual/identity.js';
+import { Title } from '../Title/Title.js';
+import { useSettingsSelectionProviderValue, SettingsSelectionContextProvider, useSettingsSelectionContext } from './Selection/context.js';
+import { SettingsContext } from './SettingsContext/SettingsContext.js';
+import { useSettingsContext } from './SettingsContext/useSettingsContext.js';
+import { SettingsMenu } from './SettingsMenu/SettingsMenu.js';
+import { SettingsMenuMobile } from './SettingsMenuMobile/SettingsMenuMobile.js';
+import { SettingsPageComponent } from './SettingsPage/SettingsPageComponent.js';
+import { useAllResultsPage } from './SettingsSearch/AllResultsPage.js';
+import { SettingsSearch } from './SettingsSearch/SettingsSearch.js';
+import { b } from './b.js';
+import { getSettingsFromChildren } from './collect-settings.js';
+import i18n from './i18n/index.js';
+
+function Settings(_a) {
+    var { loading, renderLoading, children, view = 'normal', renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover = true } = _a, props = __rest(_a, ["loading", "renderLoading", "children", "view", "renderRightAdornment", "renderSectionRightAdornment", "showRightAdornmentOnHover"]);
+    if (loading) {
+        return (React__default.createElement("div", { className: b({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React__default.createElement(Loader, { className: b('loader'), size: "m" }))));
+    }
+    return (React__default.createElement(SettingsContext.Provider, { value: { renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover } },
+        React__default.createElement(SettingsContent, Object.assign({ view: view }, props), children)));
+}
+function SettingsContent({ initialPage, initialSearch, selection, children, renderNotFound, title = i18n('label_title'), filterPlaceholder = i18n('label_filter-placeholder'), emptyPlaceholder = i18n('label_empty-placeholder'), view, onPageChange, onClose, }) {
+    var _a;
+    const [search, setSearch] = React__default.useState(initialSearch !== null && initialSearch !== undefined ? initialSearch : '');
+    const { menu, pages } = getSettingsFromChildren(children, search);
+    const selected = useSettingsSelectionProviderValue(pages, selection);
+    const pageKeys = Object.keys(pages);
+    const selectionInitialPage = selected.page && pageKeys.includes(selected.page.id) ? selected.page.id : undefined;
+    const [selectedPage, setCurrentPage] = React__default.useState(selectionInitialPage ||
+        (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined));
+    const searchInputRef = React__default.useRef(null);
+    const menuRef = React__default.useRef(null);
+    const isMobile = view === 'mobile';
+    React__default.useEffect(() => {
+        var _a;
+        (_a = menuRef.current) === null || _a === undefined ? undefined : _a.clearFocus();
+    }, [search]);
+    React__default.useEffect(() => {
+        const handler = () => {
+            var _a;
+            (_a = menuRef.current) === null || _a === undefined ? undefined : _a.clearFocus();
+        };
+        window.addEventListener('click', handler);
+        return () => {
+            window.removeEventListener('click', handler);
+        };
+    }, []);
+    let activePage = selectedPage;
+    if (!activePage || !pages[activePage] || pages[activePage].hidden) {
+        activePage = (_a = Object.values(pages).find(({ hidden }) => !hidden)) === null || _a === undefined ? undefined : _a.id;
+    }
+    const handlePageChange = (newPage) => {
+        setCurrentPage((prevPage) => {
+            if (prevPage !== newPage && !isFakePage(newPage)) {
+                onPageChange === null || onPageChange === undefined ? undefined : onPageChange(newPage);
+            }
+            return newPage;
+        });
+    };
+    const { isAllSearchPage } = useAllResultsPage({ pages, handlePageChange });
+    function isFakePage(page) {
+        return isAllSearchPage(page);
+    }
+    React__default.useEffect(() => {
+        if (activePage !== selectedPage) {
+            handlePageChange(activePage);
+        }
+    });
+    React__default.useEffect(() => {
+        if (!selectionInitialPage)
+            return;
+        setCurrentPage(selectionInitialPage);
+    }, [selectionInitialPage]);
+    React__default.useEffect(() => {
+        var _a;
+        if ((_a = selected.selectedRef) === null || _a === undefined ? undefined : _a.current) {
+            selected.selectedRef.current.scrollIntoView();
+        }
+    }, [selected.selectedRef]);
+    return (React__default.createElement(SettingsSelectionContextProvider, { value: selected },
+        React__default.createElement("div", { className: b({ view }) },
+            isMobile ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
+                React__default.createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b('tabs') }))) : (React__default.createElement("div", { className: b('menu'), onClick: () => {
+                    if (searchInputRef.current) {
+                        searchInputRef.current.focus();
+                    }
+                }, onKeyDown: (event) => {
+                    if (menuRef.current) {
+                        if (menuRef.current.handleKeyDown(event)) {
+                            event.preventDefault();
+                        }
+                    }
+                } },
+                React__default.createElement(Title, null, title),
+                React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
+                React__default.createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
+            React__default.createElement("div", { className: b('page') },
+                React__default.createElement(SettingsPageComponent, { menu: menu, pages: pages, selected: selected, search: search, isMobile: isMobile, page: activePage, emptyPlaceholder: emptyPlaceholder, renderNotFound: renderNotFound, onClose: onClose })))));
+}
+Settings.Group = function SettingsGroup({ children }) {
+    return React__default.createElement(React__default.Fragment, null, children);
+};
+Settings.Page = function SettingsPage({ children }) {
+    return React__default.createElement(React__default.Fragment, null, children);
+};
+Settings.Section = function SettingsSection({ children }) {
+    return React__default.createElement(React__default.Fragment, null, children);
+};
+Settings.Item = function SettingsItem(setting) {
+    const { id, labelId, highlightedTitle, children, align = 'center', withBadge, renderTitleComponent = identity, mode, description, } = setting;
+    const selected = useSettingsSelectionContext();
+    const isSettingSelected = selected.setting && selected.setting.id === id;
+    const { renderRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
+    const titleComponent = renderTitleComponent(highlightedTitle);
+    const titleNode = React__default.createElement("span", { className: b('item-title', { badge: withBadge }) }, titleComponent);
+    const showTitle = titleComponent !== null;
+    return (React__default.createElement("div", { className: b('item', {
+            align,
+            mode,
+            selected: isSettingSelected,
+            title: showTitle ? 'show' : 'hide',
+        }), ref: isSettingSelected ? selected.selectedRef : undefined },
+        showTitle ? (React__default.createElement("label", { className: b('item-heading'), id: labelId },
+            renderRightAdornment ? (React__default.createElement(Flex, { className: b('item-title-wrapper'), gap: 3 },
+                titleNode,
+                React__default.createElement("div", { className: b('item-right-adornment', {
+                        hidden: showRightAdornmentOnHover,
+                    }) }, renderRightAdornment(setting)))) : (titleNode),
+            description ? (React__default.createElement("span", { className: b('item-description') }, description)) : null)) : null,
+        React__default.createElement("div", { className: b('item-content') }, children)));
+};
+
+export { Settings };
+//# sourceMappingURL=Settings.js.map

package/build/esm/components/Settings/Settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.js","sources":["../../../../../src/components/Settings/Settings.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Flex, Loader} from '@gravity-ui/uikit';\nimport identity from 'lodash/identity';\n\nimport {Title} from '../Title';\n\nimport {\n    SettingsSelectionContextProvider,\n    useSettingsSelectionContext,\n    useSettingsSelectionProviderValue,\n} from './Selection/context';\nimport {SettingsContext} from './SettingsContext/SettingsContext';\nimport {useSettingsContext} from './SettingsContext/useSettingsContext';\nimport {SettingsMenu, SettingsMenuInstance} from './SettingsMenu/SettingsMenu';\nimport {SettingsMenuMobile} from './SettingsMenuMobile/SettingsMenuMobile';\nimport {SettingsPageComponent} from './SettingsPage/SettingsPageComponent';\nimport {useAllResultsPage} from './SettingsSearch/AllResultsPage';\nimport {SettingsSearch} from './SettingsSearch/SettingsSearch';\nimport {b} from './b';\nimport {getSettingsFromChildren} from './collect-settings';\nimport i18n from './i18n';\nimport type {\n    SettingsContentProps,\n    SettingsGroupProps,\n    SettingsItemProps,\n    SettingsPageProps,\n    SettingsProps,\n    SettingsSectionProps,\n} from './types';\n\nexport function Settings({\n    loading,\n    renderLoading,\n    children,\n    view = 'normal',\n    renderRightAdornment,\n    renderSectionRightAdornment,\n    showRightAdornmentOnHover = true,\n    ...props\n}: SettingsProps) {\n    if (loading) {\n        return (\n            <div className={b({loading: true, view})}>\n                {typeof renderLoading === 'function' ? (\n                    renderLoading()\n                ) : (\n                    <Loader className={b('loader')} size=\"m\" />\n                )}\n            </div>\n        );\n    }\n\n    return (\n        <SettingsContext.Provider\n            value={{renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover}}\n        >\n            <SettingsContent view={view} {...props}>\n                {children}\n            </SettingsContent>\n        </SettingsContext.Provider>\n    );\n}\n\nfunction SettingsContent({\n    initialPage,\n    initialSearch,\n    selection,\n    children,\n    renderNotFound,\n    title = i18n('label_title'),\n    filterPlaceholder = i18n('label_filter-placeholder'),\n    emptyPlaceholder = i18n('label_empty-placeholder'),\n    view,\n    onPageChange,\n    onClose,\n}: SettingsContentProps) {\n    const [search, setSearch] = React.useState(initialSearch ?? '');\n    const {menu, pages} = getSettingsFromChildren(children, search);\n\n    const selected = useSettingsSelectionProviderValue(pages, selection);\n\n    const pageKeys = Object.keys(pages);\n    const selectionInitialPage =\n        selected.page && pageKeys.includes(selected.page.id) ? selected.page.id : undefined;\n    const [selectedPage, setCurrentPage] = React.useState<string | undefined>(\n        selectionInitialPage ||\n            (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined),\n    );\n    const searchInputRef = React.useRef<HTMLInputElement>(null);\n    const menuRef = React.useRef<SettingsMenuInstance>(null);\n    const isMobile = view === 'mobile';\n\n    React.useEffect(() => {\n        menuRef.current?.clearFocus();\n    }, [search]);\n\n    React.useEffect(() => {\n        const handler = () => {\n            menuRef.current?.clearFocus();\n        };\n        window.addEventListener('click', handler);\n        return () => {\n            window.removeEventListener('click', handler);\n        };\n    }, []);\n\n    let activePage = selectedPage;\n\n    if (!activePage || !pages[activePage] || pages[activePage].hidden) {\n        activePage = Object.values(pages).find(({hidden}) => !hidden)?.id;\n    }\n\n    const handlePageChange = (newPage: string | undefined) => {\n        setCurrentPage((prevPage) => {\n            if (prevPage !== newPage && !isFakePage(newPage)) {\n                onPageChange?.(newPage);\n            }\n            return newPage;\n        });\n    };\n\n    const {isAllSearchPage} = useAllResultsPage({pages, handlePageChange});\n\n    function isFakePage(page: string | undefined) {\n        return isAllSearchPage(page);\n    }\n\n    React.useEffect(() => {\n        if (activePage !== selectedPage) {\n            handlePageChange(activePage);\n        }\n    });\n\n    React.useEffect(() => {\n        if (!selectionInitialPage) return;\n        setCurrentPage(selectionInitialPage);\n    }, [selectionInitialPage]);\n\n    React.useEffect(() => {\n        if (selected.selectedRef?.current) {\n            selected.selectedRef.current.scrollIntoView();\n        }\n    }, [selected.selectedRef]);\n\n    return (\n        <SettingsSelectionContextProvider value={selected}>\n            <div className={b({view})}>\n                {isMobile ? (\n                    <React.Fragment>\n                        <SettingsSearch\n                            inputRef={searchInputRef}\n                            className={b('search')}\n                            initialValue={initialSearch}\n                            selection={selection}\n                            onChange={setSearch}\n                            autoFocus={false}\n                            inputSize={'xl'}\n                        />\n                        <SettingsMenuMobile\n                            items={menu}\n                            onChange={handlePageChange}\n                            activeItemId={activePage}\n                            className={b('tabs')}\n                        />\n                    </React.Fragment>\n                ) : (\n                    <div\n                        className={b('menu')}\n                        onClick={() => {\n                            if (searchInputRef.current) {\n                                searchInputRef.current.focus();\n                            }\n                        }}\n                        onKeyDown={(event) => {\n                            if (menuRef.current) {\n                                if (menuRef.current.handleKeyDown(event)) {\n                                    event.preventDefault();\n                                }\n                            }\n                        }}\n                    >\n                        <Title>{title}</Title>\n                        <SettingsSearch\n                            inputRef={searchInputRef}\n                            className={b('search')}\n                            initialValue={initialSearch}\n                            selection={selection}\n                            onChange={setSearch}\n                            placeholder={filterPlaceholder}\n                            autoFocus\n                        />\n                        <SettingsMenu\n                            ref={menuRef}\n                            items={menu}\n                            onChange={handlePageChange}\n                            activeItemId={activePage}\n                        />\n                    </div>\n                )}\n                <div className={b('page')}>\n                    <SettingsPageComponent\n                        menu={menu}\n                        pages={pages}\n                        selected={selected}\n                        search={search}\n                        isMobile={isMobile}\n                        page={activePage}\n                        emptyPlaceholder={emptyPlaceholder}\n                        renderNotFound={renderNotFound}\n                        onClose={onClose}\n                    />\n                </div>\n            </div>\n        </SettingsSelectionContextProvider>\n    );\n}\n\nSettings.Group = function SettingsGroup({children}: SettingsGroupProps) {\n    return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Page = function SettingsPage({children}: SettingsPageProps) {\n    return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Section = function SettingsSection({children}: SettingsSectionProps) {\n    return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Item = function SettingsItem(setting: SettingsItemProps) {\n    const {\n        id,\n        labelId,\n        highlightedTitle,\n        children,\n        align = 'center',\n        withBadge,\n        renderTitleComponent = identity,\n        mode,\n        description,\n    } = setting;\n\n    const selected = useSettingsSelectionContext();\n    const isSettingSelected = selected.setting && selected.setting.id === id;\n\n    const {renderRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n    const titleComponent = renderTitleComponent(highlightedTitle);\n    const titleNode = <span className={b('item-title', {badge: withBadge})}>{titleComponent}</span>;\n\n    const showTitle = titleComponent !== null;\n\n    return (\n        <div\n            className={b('item', {\n                align,\n                mode,\n                selected: isSettingSelected,\n                title: showTitle ? 'show' : 'hide',\n            })}\n            ref={isSettingSelected ? selected.selectedRef : undefined}\n        >\n            {showTitle ? (\n                <label className={b('item-heading')} id={labelId}>\n                    {renderRightAdornment ? (\n                        <Flex className={b('item-title-wrapper')} gap={3}>\n                            {titleNode}\n                            <div\n                                className={b('item-right-adornment', {\n                                    hidden: showRightAdornmentOnHover,\n                                })}\n                            >\n                                {renderRightAdornment(setting)}\n                            </div>\n                        </Flex>\n                    ) : (\n                        titleNode\n                    )}\n                    {description ? (\n                        <span className={b('item-description')}>{description}</span>\n                    ) : null}\n                </label>\n            ) : null}\n            <div className={b('item-content')}>{children}</div>\n        </div>\n    );\n};\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/Settings/Settings.module.scss.js

@@ -0,0 +1,4 @@
+var styles = {"gn-settings":"Settings-module__gn-settings___RP-Ow","gnSettings":"Settings-module__gn-settings___RP-Ow","gn-settings_view_mobile":"Settings-module__gn-settings_view_mobile___4DAjN","gnSettingsViewMobile":"Settings-module__gn-settings_view_mobile___4DAjN","gn-settings_loading":"Settings-module__gn-settings_loading___PpULI","gnSettingsLoading":"Settings-module__gn-settings_loading___PpULI","gn-settings__loader":"Settings-module__gn-settings__loader___68JGV","gnSettingsLoader":"Settings-module__gn-settings__loader___68JGV","gn-settings__search":"Settings-module__gn-settings__search___2xBLH","gnSettingsSearch":"Settings-module__gn-settings__search___2xBLH","gn-settings__page":"Settings-module__gn-settings__page___pbx2Y","gnSettingsPage":"Settings-module__gn-settings__page___pbx2Y","gn-settings__tabs":"Settings-module__gn-settings__tabs___-Z5T9","gnSettingsTabs":"Settings-module__gn-settings__tabs___-Z5T9","g-tabs__item":"Settings-module__g-tabs__item___tsOZs","gTabsItem":"Settings-module__g-tabs__item___tsOZs","gn-settings__section-heading":"Settings-module__gn-settings__section-heading___gPmIo","gnSettingsSectionHeading":"Settings-module__gn-settings__section-heading___gPmIo","gn-settings__section-subheader":"Settings-module__gn-settings__section-subheader___fl8WB","gnSettingsSectionSubheader":"Settings-module__gn-settings__section-subheader___fl8WB","gn-settings-subheader":"Settings-module__gn-settings-subheader___WAPMz","gnSettingsSubheader":"Settings-module__gn-settings-subheader___WAPMz","gn-settings__section-item":"Settings-module__gn-settings__section-item___2NG92","gnSettingsSectionItem":"Settings-module__gn-settings__section-item___2NG92","gn-settings__item":"Settings-module__gn-settings__item___rCuSR","gnSettingsItem":"Settings-module__gn-settings__item___rCuSR","gn-settings__item_mode_row":"Settings-module__gn-settings__item_mode_row___k5s8p","gnSettingsItemModeRow":"Settings-module__gn-settings__item_mode_row___k5s8p","gn-settings__item-heading":"Settings-module__gn-settings__item-heading___1zCRl","gnSettingsItemHeading":"Settings-module__gn-settings__item-heading___1zCRl","gn-settings__item-description":"Settings-module__gn-settings__item-description___8rQUz","gnSettingsItemDescription":"Settings-module__gn-settings__item-description___8rQUz","gn-settings__item-content":"Settings-module__gn-settings__item-content___1InnS","gnSettingsItemContent":"Settings-module__gn-settings__item-content___1InnS","gn-settings__not-found":"Settings-module__gn-settings__not-found___eIxBf","gnSettingsNotFound":"Settings-module__gn-settings__not-found___eIxBf","gn-settings__menu":"Settings-module__gn-settings__menu___3XZde","gnSettingsMenu":"Settings-module__gn-settings__menu___3XZde","gn-settings__heading":"Settings-module__gn-settings__heading___mLHq2","gnSettingsHeading":"Settings-module__gn-settings__heading___mLHq2","gn-settings__content":"Settings-module__gn-settings__content___tQ2hC","gnSettingsContent":"Settings-module__gn-settings__content___tQ2hC","gn-settings__section-right-adornment_hidden":"Settings-module__gn-settings__section-right-adornment_hidden___wn9-S","gnSettingsSectionRightAdornmentHidden":"Settings-module__gn-settings__section-right-adornment_hidden___wn9-S","gn-settings__section":"Settings-module__gn-settings__section___c6u3X","gnSettingsSection":"Settings-module__gn-settings__section___c6u3X","gn-settings__item_title_hide":"Settings-module__gn-settings__item_title_hide___w1l3N","gnSettingsItemTitleHide":"Settings-module__gn-settings__item_title_hide___w1l3N","gn-settings__item_align_top":"Settings-module__gn-settings__item_align_top___sPweP","gnSettingsItemAlignTop":"Settings-module__gn-settings__item_align_top___sPweP","gn-settings__item_align_center":"Settings-module__gn-settings__item_align_center___GdjES","gnSettingsItemAlignCenter":"Settings-module__gn-settings__item_align_center___GdjES","gn-settings__item-title_badge":"Settings-module__gn-settings__item-title_badge___pTkg2","gnSettingsItemTitleBadge":"Settings-module__gn-settings__item-title_badge___pTkg2","gn-settings__item-right-adornment_hidden":"Settings-module__gn-settings__item-right-adornment_hidden___9zgNP","gnSettingsItemRightAdornmentHidden":"Settings-module__gn-settings__item-right-adornment_hidden___9zgNP","gn-settings__item_selected":"Settings-module__gn-settings__item_selected___e4r3Y","gnSettingsItemSelected":"Settings-module__gn-settings__item_selected___e4r3Y","gn-settings__section_selected":"Settings-module__gn-settings__section_selected___YOdnN","gnSettingsSectionSelected":"Settings-module__gn-settings__section_selected___YOdnN","gn-settings__found":"Settings-module__gn-settings__found___PDgmI","gnSettingsFound":"Settings-module__gn-settings__found___PDgmI"};
+
+export { styles as default };
+//# sourceMappingURL=Settings.module.scss.js.map

package/build/esm/components/Settings/Settings.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/build/esm/components/Settings/SettingsContext/SettingsContext.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+const SettingsContext = React__default.createContext({});
+
+export { SettingsContext };
+//# sourceMappingURL=SettingsContext.js.map

package/build/esm/components/Settings/SettingsContext/SettingsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsContext.js","sources":["../../../../../../src/components/Settings/SettingsContext/SettingsContext.tsx"],"sourcesContent":["import React from 'react';\n\nimport type {SettingsContextType} from './types';\n\nexport const SettingsContext = React.createContext<SettingsContextType>({});\n"],"names":["React"],"mappings":";;AAIa,MAAA,eAAe,GAAGA,cAAK,CAAC,aAAa,CAAsB,EAAE;;;;"}

package/build/esm/components/Settings/SettingsContext/useSettingsContext.js

@@ -0,0 +1,7 @@
+import React__default from 'react';
+import { SettingsContext } from './SettingsContext.js';
+
+const useSettingsContext = () => React__default.useContext(SettingsContext);
+
+export { useSettingsContext };
+//# sourceMappingURL=useSettingsContext.js.map

package/build/esm/components/Settings/SettingsContext/useSettingsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSettingsContext.js","sources":["../../../../../../src/components/Settings/SettingsContext/useSettingsContext.tsx"],"sourcesContent":["import React from 'react';\n\nimport {SettingsContext} from './SettingsContext';\n\nexport const useSettingsContext = () => React.useContext(SettingsContext);\n"],"names":["React"],"mappings":";;;AAIO,MAAM,kBAAkB,GAAG,MAAMA,cAAK,CAAC,UAAU,CAAC,eAAe;;;;"}

package/build/esm/components/Settings/SettingsMenu/SettingsMenu.css

@@ -0,0 +1 @@
+.SettingsMenu-module__gn-settings-menu__group-heading___b3rMA{display:inline-block;font-weight:var(--g-text-accent-font-weight);line-height:18px;margin-bottom:12px;padding:0 20px}.SettingsMenu-module__gn-settings-menu__group___zBrCj+.SettingsMenu-module__gn-settings-menu__group___zBrCj{margin-top:24px}.SettingsMenu-module__gn-settings-menu__item___QGz0Y+.SettingsMenu-module__gn-settings-menu__group___zBrCj{margin-top:8px}.SettingsMenu-module__gn-settings-menu__item___QGz0Y{align-items:center;color:var(--g-color-text-primary);cursor:pointer;display:flex;height:40px;padding:0 20px}.SettingsMenu-module__gn-settings-menu__item-icon___B-h-X{color:var(--g-color-text-misc);margin-right:5px}.SettingsMenu-module__gn-settings-menu__item___QGz0Y:hover, .SettingsMenu-module__gn-settings-menu__item_focused___pKQBC{background:var(--g-color-base-simple-hover)}.SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr{background:var(--g-color-base-selection)}.SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr.SettingsMenu-module__gn-settings-menu__item_focused___pKQBC, .SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr:hover{background:var(--g-color-base-selection-hover)}.SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8{color:var(--g-color-text-secondary);cursor:auto}.SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8:hover{background:none}.SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8 .SettingsMenu-module__gn-settings-menu__item-icon___B-h-X{color:var(--g-color-base-misc-heavy)}.SettingsMenu-module__gn-settings-menu__item_badge___I-O-X{position:relative}.SettingsMenu-module__gn-settings-menu__item_badge___I-O-X:after{background-color:var(--g-color-text-danger);border-radius:50%;content:"";display:block;height:6px;position:absolute;right:9px;top:calc(50% - 3px);width:6px}

package/build/esm/components/Settings/SettingsMenu/SettingsMenu.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { SettingsMenuProps } from '../types';
-import './SettingsMenu.scss';
 export interface SettingsMenuInstance {
     handleKeyDown(event: React.KeyboardEvent): boolean;
     clearFocus(): void;