@gravity-ui/navigation 3.0.0-beta.1 → 3.0.0-beta.3

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

@@ -0,0 +1,26 @@
+import React__default from 'react';
+import { ArrowLeft } from '@gravity-ui/icons';
+import { Button, Icon, Text } from '@gravity-ui/uikit';
+import { Drawer, DrawerItem } from '../../Drawer/Drawer.js';
+import { block } from '../../utils/cn.js';
+import { MOBILE_HEADER_ICON_SIZE } from '../constants.js';
+import i18n from '../i18n/index.js';
+import './OverlapPanel.scss.js';
+
+const b = block('mobile-overlap-panel');
+const OverlapPanel = ({ title, renderContent, className, onClose, action, closeTitle = i18n('overlap_button_close'), visible, topOffset, }) => {
+    return (React__default.createElement(Drawer, { className: b('', { action: Boolean(action) }, className), onVeilClick: onClose, onEscape: onClose, style: {
+            top: topOffset,
+        } },
+        React__default.createElement(DrawerItem, { id: "overlap", visible: visible, className: 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, Icon, IconProps, Text} from '@gravity-ui/uikit';\n\nimport {Drawer, DrawerItem} from '../../Drawer/Drawer';\nimport {block} from '../../utils/cn';\nimport {MOBILE_HEADER_ICON_SIZE} from '../constants';\nimport i18n from '../i18n';\n\nimport './OverlapPanel.scss';\n\nconst b = block('mobile-overlap-panel');\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    return (\n        <Drawer\n            className={b('', {action: Boolean(action)}, className)}\n            onVeilClick={onClose}\n            onEscape={onClose}\n            style={{\n                top: topOffset,\n            }}\n        >\n            <DrawerItem id=\"overlap\" visible={visible} className={b('drawer-item')}>\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\n                            className={b('icon')}\n                            data={CloseIcon}\n                            size={MOBILE_HEADER_ICON_SIZE}\n                        />\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            </DrawerItem>\n        </Drawer>\n    );\n};\n"],"names":["React","CloseIcon"],"mappings":";;;;;;;;;AAYA,MAAM,CAAC,GAAG,KAAK,CAAC,sBAAsB,CAAC;AAoBhC,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,QACIA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACH,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,EAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EAAC,EAAE,SAAS,CAAC,EACtD,WAAW,EAAE,OAAO,EACpB,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE;AACH,YAAA,GAAG,EAAE,SAAS;AACjB,SAAA,EAAA;AAED,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,EAAE,EAAC,SAAS,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAAA;AAClE,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAA;gBACvBA,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,oBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EACD,EAAA,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,IAAI,EAAEC,SAAS,EACf,IAAI,EAAE,uBAAuB,GAC/B,CACG;AACT,gBAAAD,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,gBAAA,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,oBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,uBAAuB,EAAI,CAAA,CACrD,CACZ,CACC;AACN,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAG,EAAA,aAAa,EAAE,CAAO,CAC5C,CACR;AAEjB;;;;"}

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".gn-mobile-overlap-panel{inset:0;position:fixed}.gn-mobile-overlap-panel__drawer-item{box-sizing:border-box;display:flex;flex-direction:column;height:100%;max-height:100%;max-width:100%;width:100%}.gn-mobile-overlap-panel_action .gn-mobile-overlap-panel__title{padding-right:0}.gn-mobile-overlap-panel__close{margin-right:var(--g-spacing-1)}.gn-mobile-overlap-panel__action{margin-left:var(--g-spacing-1)}.gn-mobile-overlap-panel__action.g-button:hover:before,.gn-mobile-overlap-panel__close.g-button:hover:before{background-color:transparent}.gn-mobile-overlap-panel__title{display:inline-block;flex:1;justify-content:center;margin:0;padding-right:40px;text-align:center}.gn-mobile-overlap-panel__content{box-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:0 var(--g-spacing-5)}.gn-mobile-overlap-panel__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--g-spacing-3);padding:var(--g-spacing-1) var(--g-spacing-3)}";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=OverlapPanel.scss.js.map

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

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

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

@@ -0,0 +1,6 @@
+import type { Meta } from '@storybook/react';
+import { OverlapPanelProps } from '../OverlapPanel';
+import './OverlapPanel.scss';
+declare const _default: Meta;
+export default _default;
+export declare const Showcase: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, OverlapPanelProps>;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function PlaceholderText(): React.JSX.Element;

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

@@ -1,2 +1,2 @@
 import * as DefaultOverlapPanelStories from '../__stories__/OverlapPanel.stories';
-export declare const OverlapPanelStories: Omit<import("@storybook/types").StoriesWithPartialProps<import("@storybook/react/dist/types-0fc72a6d").R, typeof DefaultOverlapPanelStories>, keyof import("@storybook/types").Store_CSFExports<import("@storybook/types").Renderer, import("@storybook/types").Args>>;
+export declare const OverlapPanelStories: Omit<import("@storybook/core/types").StoriesWithPartialProps<import("@storybook/react").ReactRenderer, typeof DefaultOverlapPanelStories>, keyof import("@storybook/core/types").Store_CSFExports>;

package/build/esm/components/MobileHeader/__stories__/MobileHeader.stories.d.ts

@@ -0,0 +1,4 @@
+import type { Meta } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const Showcase: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;

package/build/esm/components/MobileHeader/__stories__/MobileHeaderShowcase.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './MobileHeaderShowcase.scss';
+export declare function MobileHeaderShowcase(): React.JSX.Element;

package/build/esm/components/MobileHeader/__stories__/moc.d.ts

@@ -0,0 +1 @@
+export declare const text = "\nDid you attend? He sang by grove ripe -\nThe bard of love, the singer of his mourning.\nWhen fields were silent by the early morning,\nTo sad and simple sounds of a pipe\nDid you attend?\n\nDid you behold in dark of forest leaf\nThe bard of love, the singer of his sadness?\nThe trace of tears, the smile, the utter paleness,\nThe quiet look, full of eternal grief,\nDid you behold?\n\nThen did you sigh when hearing how cries\nThe bard of love, the singer of his dole?\nWhen in the woods you saw the young man, sole,\nAnd met the look of his extinguished eyes,\nThen did you sigh?\n";

package/build/esm/components/MobileHeader/__tests__/helpersPlaywright.d.ts

@@ -1,2 +1,2 @@
 import * as DefaultMobileHeaderStories from '../__stories__/MobileHeader.stories';
-export declare const MobileHeaderStories: Omit<import("@storybook/types").StoriesWithPartialProps<import("@storybook/react/dist/types-0fc72a6d").R, typeof DefaultMobileHeaderStories>, keyof import("@storybook/types").Store_CSFExports<import("@storybook/types").Renderer, import("@storybook/types").Args>>;
+export declare const MobileHeaderStories: Omit<import("@storybook/core/types").StoriesWithPartialProps<import("@storybook/react").ReactRenderer, typeof DefaultMobileHeaderStories>, keyof import("@storybook/core/types").Store_CSFExports>;

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,2 +1,6 @@
-declare const _default: (key: "burger_button_close" | "burger_button_open" | "overlap_button_close", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: ((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>;
+    };
+};
 export default _default;

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/index.js

@@ -0,0 +1,5 @@
+export { MobileHeader } from './MobileHeader.js';
+export { FooterItem as MobileHeaderFooterItem } from './FooterItem/FooterItem.js';
+export { getMobileHeaderCustomEvent } from './utils.js';
+export { MOBILE_HEADER_EVENT_NAMES } from './constants.js';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuItem } from '../types';
 export interface ModalItem {
     visible: boolean;

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.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { block } from '../utils/cn.js';
+import './MobileLogo.scss.js';
+
+const b = block('mobile-logo');
+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 {block} from '../utils/cn';\n\nimport './MobileLogo.scss';\n\nconst b = block('mobile-logo');\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,KAAK,CAAC,aAAa,CAAC;AAMjB,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.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".gn-mobile-logo{align-items:center;display:flex;gap:var(--g-spacing-2);overflow:hidden}.gn-mobile-logo:is(a),.gn-mobile-logo:is(a):active,.gn-mobile-logo:is(a):focus,.gn-mobile-logo:is(a):hover,.gn-mobile-logo:is(a):visited{color:var(--g-color-text-primary);outline:none;text-decoration:none}.gn-mobile-logo__icon{flex-shrink:0}.gn-mobile-logo__title{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}";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=MobileLogo.scss.js.map

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

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

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

@@ -0,0 +1,6 @@
+import type { Meta } from '@storybook/react';
+import { MobileLogo } from '..';
+import type { MobileLogoProps } from '..';
+declare const _default: Meta<typeof MobileLogo>;
+export default _default;
+export declare const Showcase: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, MobileLogoProps>;

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

@@ -1,2 +1,2 @@
 import * as DefaultMobileLogoStories from '../__stories__/MobileLogo.stories';
-export declare const MobileLogoStories: Omit<import("@storybook/types").StoriesWithPartialProps<import("@storybook/react/dist/types-0fc72a6d").R, typeof DefaultMobileLogoStories>, keyof import("@storybook/types").Store_CSFExports<import("@storybook/types").Renderer, import("@storybook/types").Args>>;
+export declare const MobileLogoStories: Omit<import("@storybook/core/types").StoriesWithPartialProps<import("@storybook/react").ReactRenderer, typeof DefaultMobileLogoStories>, keyof import("@storybook/core/types").Store_CSFExports>;

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\ninterface ContextValue extends SelectedSettingsPart {\n    selectedRef?: React.RefObject<HTMLDivElement>;\n}\n\nconst defaultValue: ContextValue = {};\n\nconst context = React.createContext(defaultValue);\ncontext.displayName = 'SettingsSelectionContext';\n\nexport function useSettingsSelectionProviderValue(\n    pages: Record<string, SettingsPage>,\n    selection: SettingsSelection | undefined,\n): ContextValue {\n    const selectedRef = React.useRef<HTMLDivElement>(null);\n\n    const contextValue: ContextValue = 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(): ContextValue {\n    return React.useContext(context);\n}\n"],"names":["React"],"mappings":";;;AAUA,MAAM,YAAY,GAAiB,EAAE;AAErC,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,GAAiBA,cAAK,CAAC,OAAO,CAAC,MAAK;AAClD,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.d.ts

@@ -28,7 +28,7 @@ export interface SettingsGroupProps {
 }
 export interface SettingsPageProps {
     id?: string;
-    title: string;
+    title?: string;
     icon?: IconProps;
     children: React.ReactNode;
 }
@@ -38,8 +38,6 @@ export interface SettingsSectionProps {
     header?: React.ReactNode;
     children: React.ReactNode;
     withBadge?: boolean;
-    showTitle?: boolean;
-    onlyChild?: boolean;
 }
 export interface SettingsItemProps {
     id?: string;

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

@@ -0,0 +1,189 @@
+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 { block } from '../utils/cn.js';
+import { useSettingsSelectionProviderValue, SettingsSelectionContextProvider, useSettingsSelectionContext } from './Selection/context.js';
+import { isSectionSelected } from './Selection/utils.js';
+import { SettingsMenu } from './SettingsMenu/SettingsMenu.js';
+import { SettingsMenuMobile } from './SettingsMenuMobile/SettingsMenuMobile.js';
+import { SettingsSearch } from './SettingsSearch/SettingsSearch.js';
+import { getSettingsFromChildren } from './collect-settings.js';
+import { escapeStringForRegExp } from './helpers.js';
+import i18n from './i18n/index.js';
+import './Settings.scss.js';
+
+const b = block('settings');
+const SettingsContext = React__default.createContext({});
+const useSettingsContext = () => React__default.useContext(SettingsContext);
+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)));
+}
+const getPageTitleById = (menu, activePage) => {
+    for (const firstLevel of menu) {
+        if ('groupTitle' in firstLevel) {
+            for (const secondLevel of firstLevel.items)
+                if (secondLevel.id === activePage)
+                    return secondLevel.title;
+        }
+        else if (firstLevel.id === activePage)
+            return firstLevel.title;
+    }
+    return '';
+};
+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, _b;
+    const { renderSectionRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
+    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 || ((_a = pages[activePage]) === null || _a === undefined ? undefined : _a.hidden)) {
+        activePage = (_b = Object.values(pages).find(({ hidden }) => !hidden)) === null || _b === undefined ? undefined : _b.id;
+    }
+    const handlePageChange = (newPage) => {
+        setCurrentPage((prevPage) => {
+            if (prevPage !== newPage) {
+                onPageChange === null || onPageChange === undefined ? undefined : onPageChange(newPage);
+            }
+            return newPage;
+        });
+    };
+    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]);
+    const renderSetting = ({ title: settingTitle, element }) => {
+        return (React__default.createElement("div", { key: settingTitle, className: b('section-item') }, React__default.cloneElement(element, Object.assign(Object.assign({}, element.props), { highlightedTitle: search && settingTitle ? prepareTitle(settingTitle, search) : settingTitle }))));
+    };
+    const renderSection = (page, section) => {
+        const isSelected = isSectionSelected(selected, page, section);
+        return (React__default.createElement("div", { key: section.title, className: b('section', { selected: isSelected }), ref: isSelected ? selected.selectedRef : undefined },
+            section.title && (React__default.createElement("h3", { className: b('section-heading') }, renderSectionRightAdornment ? (React__default.createElement(Flex, { gap: 2, alignItems: 'center' },
+                section.title,
+                React__default.createElement("div", { className: b('section-right-adornment', {
+                        hidden: showRightAdornmentOnHover,
+                    }) }, renderSectionRightAdornment(section)))) : (section.title))),
+            section.header &&
+                (isMobile ? (React__default.createElement("div", { className: b('section-subheader') }, section.header)) : (section.header)),
+            section.items.map((setting) => (setting.hidden ? null : renderSetting(setting)))));
+    };
+    const renderPageContent = (page) => {
+        if (!page) {
+            return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default.createElement("div", { className: b('not-found') }, emptyPlaceholder));
+        }
+        const filteredSections = pages[page].sections.filter((section) => !section.hidden);
+        return (React__default.createElement(React__default.Fragment, null,
+            !isMobile && (React__default.createElement(Title, { hasSeparator: true, onClose: onClose }, getPageTitleById(menu, page))),
+            React__default.createElement("div", { className: b('content') }, filteredSections.map((section) => renderSection(page, section)))));
+    };
+    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, 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, 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') }, renderPageContent(activePage)))));
+}
+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 titleNode = (React__default.createElement("span", { className: b('item-title', { badge: withBadge }) }, renderTitleComponent(highlightedTitle)));
+    return (React__default.createElement("div", { className: b('item', { align, mode, selected: isSettingSelected }), ref: isSettingSelected ? selected.selectedRef : undefined },
+        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),
+        React__default.createElement("div", { className: b('item-content') }, children)));
+};
+function prepareTitle(string, search) {
+    let temp = string.slice(0);
+    const title = [];
+    const parts = escapeStringForRegExp(search).split(' ').filter(Boolean);
+    let key = 0;
+    for (const part of parts) {
+        const regex = new RegExp(part, 'ig');
+        const match = regex.exec(temp);
+        if (match) {
+            const m = match[0];
+            const i = match.index;
+            if (i > 0) {
+                title.push(temp.slice(0, i));
+            }
+            title.push(React__default.createElement("strong", { key: key++, className: b('found') }, m));
+            temp = temp.slice(i + m.length);
+        }
+    }
+    if (temp) {
+        title.push(temp);
+    }
+    return title;
+}
+
+export { Settings, useSettingsContext };
+//# sourceMappingURL=Settings.js.map