@gravity-ui/navigation 3.7.2 → 3.7.3

package/build/cjs/components/Settings/Selection/context.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import { SelectedSettingsPart, SettingsPage } from '../collect-settings';
 import { SettingsSelection } from './types';
-interface ContextValue extends SelectedSettingsPart {
+export interface SettingsSelectionProviderContextValue extends SelectedSettingsPart {
     selectedRef?: React.RefObject<HTMLDivElement>;
 }
-export declare function useSettingsSelectionProviderValue(pages: Record<string, SettingsPage>, selection: SettingsSelection | undefined): ContextValue;
-export declare const SettingsSelectionContextProvider: React.Provider<ContextValue>;
-export declare function useSettingsSelectionContext(): ContextValue;
-export {};
+export declare function useSettingsSelectionProviderValue(pages: Record<string, SettingsPage>, selection: SettingsSelection | undefined): SettingsSelectionProviderContextValue;
+export declare const SettingsSelectionContextProvider: React.Provider<SettingsSelectionProviderContextValue>;
+export declare function useSettingsSelectionContext(): SettingsSelectionProviderContextValue;

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

@@ -1,60 +1,6 @@
 import React from 'react';
-import { IconProps } from '@gravity-ui/uikit';
-import { SettingsSelection } from './Selection';
-import type { SettingsPageSection } from './collect-settings';
+import type { SettingsGroupProps, SettingsItemProps, SettingsPageProps, SettingsProps, SettingsSectionProps } from './types';
 import './Settings.scss';
-export interface SettingsProps {
-    children: React.ReactNode;
-    title?: string;
-    filterPlaceholder?: string;
-    emptyPlaceholder?: string;
-    initialPage?: string;
-    initialSearch?: string;
-    selection?: SettingsSelection;
-    onPageChange?: (page: string | undefined) => void;
-    renderNotFound?: () => React.ReactNode;
-    renderLoading?: () => React.ReactNode;
-    loading?: boolean;
-    view?: 'normal' | 'mobile';
-    onClose?: () => void;
-    renderRightAdornment?: (item: SettingsItemProps) => React.ReactNode;
-    renderSectionRightAdornment?: (section: SettingsPageSection) => React.ReactNode;
-    showRightAdornmentOnHover?: boolean;
-}
-export interface SettingsGroupProps {
-    id?: string;
-    groupTitle: string;
-    children: React.ReactNode;
-}
-export interface SettingsPageProps {
-    id?: string;
-    title?: string;
-    icon?: IconProps;
-    children: React.ReactNode;
-}
-export interface SettingsSectionProps {
-    id?: string;
-    title: string;
-    header?: React.ReactNode;
-    children: React.ReactNode;
-    withBadge?: boolean;
-    hideTitle?: boolean;
-}
-export interface SettingsItemProps {
-    id?: string;
-    labelId?: string;
-    title: string;
-    highlightedTitle?: React.ReactNode | null;
-    renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
-    align?: 'top' | 'center';
-    children: React.ReactNode;
-    withBadge?: boolean;
-    mode?: 'row';
-    description?: React.ReactNode;
-}
-export interface SettingsContextType extends Pick<SettingsProps, 'renderRightAdornment' | 'renderSectionRightAdornment' | 'showRightAdornmentOnHover'> {
-}
-export declare const useSettingsContext: () => SettingsContextType;
 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/cjs/components/Settings/SettingsContext/SettingsContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SettingsContextType } from './types';
+export declare const SettingsContext: React.Context<SettingsContextType>;

package/build/cjs/components/Settings/SettingsContext/types.d.ts

@@ -0,0 +1,3 @@
+import type { SettingsProps } from '../types';
+export interface SettingsContextType extends Pick<SettingsProps, 'renderRightAdornment' | 'renderSectionRightAdornment' | 'showRightAdornmentOnHover'> {
+}

package/build/cjs/components/Settings/SettingsContext/useSettingsContext.d.ts

@@ -0,0 +1 @@
+export declare const useSettingsContext: () => import("./types").SettingsContextType;

package/build/cjs/components/Settings/SettingsPage/SettingsPageComponent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SettingsSelectionProviderContextValue } from '../Selection/context';
+import { SettingsMenu as CollectSettingsSettingsMenu, SettingsPage } from '../collect-settings';
+import { SettingsContentProps } from '../types';
+type Props = {
+    menu: CollectSettingsSettingsMenu;
+    pages: Record<string, SettingsPage>;
+    page: string | undefined;
+    isMobile: boolean;
+    search: string;
+    selected: SettingsSelectionProviderContextValue;
+} & Pick<SettingsContentProps, 'renderNotFound' | 'emptyPlaceholder' | 'onClose'>;
+export declare const SettingsPageComponent: ({ menu, pages, selected, isMobile, search, page, renderNotFound, emptyPlaceholder, onClose, }: Props) => React.ReactElement;
+export {};

package/build/cjs/components/Settings/SettingsPage/getPageTitleById.d.ts

@@ -0,0 +1,2 @@
+import type { SettingsMenu as SettingsMenuType } from '../collect-settings';
+export declare const getPageTitleById: (menu: SettingsMenuType, activePage: string) => string;

package/build/cjs/components/Settings/SettingsRow/SettingsRow.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SettingsItem } from '../collect-settings';
+export declare const SettingRow: {
+    ({ title: settingTitle, element, search, }: SettingsItem & {
+        search: string;
+    }): React.ReactElement;
+    displayName: string;
+};

package/build/cjs/components/Settings/SettingsRow/prepareTitle.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function prepareTitle(string: string, search: string): React.ReactNode[];

package/build/cjs/components/Settings/SettingsSection.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SettingsPageSection } from './collect-settings';
+export declare const SettingsSection: React.ForwardRefExoticComponent<SettingsPageSection & {
+    search: string;
+    isMobile: boolean;
+    isSelected: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/build/cjs/components/Settings/b.d.ts

@@ -0,0 +1 @@
+export declare const b: import("@bem-react/classname").ClassNameFormatter;

package/build/cjs/components/Settings/index.d.ts

@@ -1,2 +1,5 @@
 export * from './Selection';
 export * from './Settings';
+export type { SettingsContextType } from './SettingsContext/types';
+export { useSettingsContext } from './SettingsContext/useSettingsContext';
+export type { SettingsProps, SettingsGroupProps, SettingsPageProps, SettingsSectionProps, SettingsItemProps, } from './types';

package/build/cjs/components/Settings/types.d.ts

@@ -1,4 +1,7 @@
-import { IconProps } from '@gravity-ui/uikit';
+import type React from 'react';
+import type { IconProps } from '@gravity-ui/uikit';
+import type { SettingsSelection } from './Selection';
+import type { SettingsPageSection } from './collect-settings';
 export interface GroupItem {
     groupTitle: string;
     items: Item[];
@@ -18,4 +21,54 @@ export interface SettingsMenuProps {
     focusItemId?: string;
     className?: string;
 }
+export interface SettingsProps {
+    children: React.ReactNode;
+    title?: string;
+    filterPlaceholder?: string;
+    emptyPlaceholder?: string;
+    initialPage?: string;
+    initialSearch?: string;
+    selection?: SettingsSelection;
+    onPageChange?: (page: string | undefined) => void;
+    renderNotFound?: () => React.ReactNode;
+    renderLoading?: () => React.ReactNode;
+    loading?: boolean;
+    view?: 'normal' | 'mobile';
+    onClose?: () => void;
+    renderRightAdornment?: (item: SettingsItemProps) => React.ReactNode;
+    renderSectionRightAdornment?: (section: SettingsPageSection) => React.ReactNode;
+    showRightAdornmentOnHover?: boolean;
+}
+export interface SettingsGroupProps {
+    id?: string;
+    groupTitle: string;
+    children: React.ReactNode;
+}
+export interface SettingsPageProps {
+    id?: string;
+    title?: string;
+    icon?: IconProps;
+    children: React.ReactNode;
+}
+export interface SettingsSectionProps {
+    id?: string;
+    title: string;
+    header?: React.ReactNode;
+    children: React.ReactNode;
+    withBadge?: boolean;
+    hideTitle?: boolean;
+}
+export interface SettingsItemProps {
+    id?: string;
+    labelId?: string;
+    title: string;
+    highlightedTitle?: React.ReactNode | null;
+    renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
+    align?: 'top' | 'center';
+    children: React.ReactNode;
+    withBadge?: boolean;
+    mode?: 'row';
+    description?: React.ReactNode;
+}
+export type SettingsContentProps = Omit<SettingsProps, 'loading' | 'renderLoading'>;
 export {};

package/build/cjs/{index-DmbAkuY3.js → index-CP_uL7BD.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
-var index = require('./index-CwssjteA.js');
+var index = require('./index-DXB2_bQS.js');
 require('@bem-react/classname');
 require('@gravity-ui/icons');
 require('@gravity-ui/uikit/i18n');
@@ -67,4 +67,4 @@ const TopAlert = ({ alert, className, mobileView = false }) => {
 };
 
 exports.TopAlert = TopAlert;
-//# sourceMappingURL=index-DmbAkuY3.js.map
+//# sourceMappingURL=index-CP_uL7BD.js.map

package/build/cjs/{index-DmbAkuY3.js.map → index-CP_uL7BD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-DmbAkuY3.js","sources":["../../../src/components/TopAlert/useTopAlertHeight.ts","../../../src/components/TopAlert/TopAlert.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nimport {TopAlertProps} from '../types';\n\ntype TopAlertHeightControls = {\n    alertRef: React.RefObject<HTMLDivElement>;\n    updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nexport const useTopAlertHeight = ({alert}: {alert?: TopAlertProps}): TopAlertHeightControls => {\n    const alertRef = React.useRef<HTMLDivElement>(null);\n\n    const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {\n        const gRootElement = document\n            .getElementsByClassName(G_ROOT_CLASS_NAME)\n            .item(0) as HTMLElement | null;\n        gRootElement?.style.setProperty('--gn-top-alert-height', clientHeight + 'px');\n    }, []);\n\n    const updateTopSize = React.useCallback(() => {\n        setAsideTopPanelHeight(alertRef.current?.clientHeight || 0);\n    }, [setAsideTopPanelHeight]);\n\n    React.useLayoutEffect(() => {\n        const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n        if (alert) {\n            window.addEventListener('resize', updateTopSizeDebounce);\n            updateTopSizeDebounce();\n        }\n        return () => {\n            window.removeEventListener('resize', updateTopSizeDebounce);\n            setAsideTopPanelHeight(0);\n        };\n    }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);\n\n    return {\n        alertRef,\n        updateTopSize,\n    };\n};\n","import React from 'react';\n\nimport {Alert, Text} from '@gravity-ui/uikit';\n\nimport {TopAlertProps} from '../types';\nimport {block} from '../utils/cn';\n\nimport {useTopAlertHeight} from './useTopAlertHeight';\n\nimport './TopAlert.scss';\n\nconst b = block('top-alert');\n\ntype Props = {\n    alert?: TopAlertProps;\n    className?: string;\n    mobileView?: boolean;\n};\n\nexport const TopAlert = ({alert, className, mobileView = false}: Props) => {\n    const {alertRef, updateTopSize} = useTopAlertHeight({alert});\n\n    const [opened, setOpened] = React.useState(true);\n\n    const handleClose = React.useCallback(() => {\n        setOpened(false);\n        alert?.onCloseTopAlert?.();\n    }, [alert]);\n\n    React.useEffect(() => {\n        if (!opened) {\n            updateTopSize();\n        }\n    }, [opened, updateTopSize]);\n\n    if (!alert || !alert.message) {\n        return null;\n    }\n\n    return (\n        <div\n            ref={alertRef}\n            className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}\n        >\n            {opened && (\n                <Alert\n                    className={b('', {\n                        centered: alert.centered,\n                        dense: alert.dense,\n                    })}\n                    corners=\"square\"\n                    layout=\"horizontal\"\n                    align={alert.align}\n                    theme={alert.theme || 'warning'}\n                    view={alert.view}\n                    icon={alert.icon}\n                    title={alert.title}\n                    message={\n                        mobileView ? (\n                            <Text ellipsisLines={5} variant=\"body-2\">\n                                {alert.message}\n                            </Text>\n                        ) : (\n                            alert.message\n                        )\n                    }\n                    actions={alert.actions}\n                    onClose={alert.closable ? handleClose : undefined}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["debounceFn","block","Alert","Text"],"mappings":"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"}
+{"version":3,"file":"index-CP_uL7BD.js","sources":["../../../src/components/TopAlert/useTopAlertHeight.ts","../../../src/components/TopAlert/TopAlert.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nimport {TopAlertProps} from '../types';\n\ntype TopAlertHeightControls = {\n    alertRef: React.RefObject<HTMLDivElement>;\n    updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nexport const useTopAlertHeight = ({alert}: {alert?: TopAlertProps}): TopAlertHeightControls => {\n    const alertRef = React.useRef<HTMLDivElement>(null);\n\n    const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {\n        const gRootElement = document\n            .getElementsByClassName(G_ROOT_CLASS_NAME)\n            .item(0) as HTMLElement | null;\n        gRootElement?.style.setProperty('--gn-top-alert-height', clientHeight + 'px');\n    }, []);\n\n    const updateTopSize = React.useCallback(() => {\n        setAsideTopPanelHeight(alertRef.current?.clientHeight || 0);\n    }, [setAsideTopPanelHeight]);\n\n    React.useLayoutEffect(() => {\n        const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n        if (alert) {\n            window.addEventListener('resize', updateTopSizeDebounce);\n            updateTopSizeDebounce();\n        }\n        return () => {\n            window.removeEventListener('resize', updateTopSizeDebounce);\n            setAsideTopPanelHeight(0);\n        };\n    }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);\n\n    return {\n        alertRef,\n        updateTopSize,\n    };\n};\n","import React from 'react';\n\nimport {Alert, Text} from '@gravity-ui/uikit';\n\nimport {TopAlertProps} from '../types';\nimport {block} from '../utils/cn';\n\nimport {useTopAlertHeight} from './useTopAlertHeight';\n\nimport './TopAlert.scss';\n\nconst b = block('top-alert');\n\ntype Props = {\n    alert?: TopAlertProps;\n    className?: string;\n    mobileView?: boolean;\n};\n\nexport const TopAlert = ({alert, className, mobileView = false}: Props) => {\n    const {alertRef, updateTopSize} = useTopAlertHeight({alert});\n\n    const [opened, setOpened] = React.useState(true);\n\n    const handleClose = React.useCallback(() => {\n        setOpened(false);\n        alert?.onCloseTopAlert?.();\n    }, [alert]);\n\n    React.useEffect(() => {\n        if (!opened) {\n            updateTopSize();\n        }\n    }, [opened, updateTopSize]);\n\n    if (!alert || !alert.message) {\n        return null;\n    }\n\n    return (\n        <div\n            ref={alertRef}\n            className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}\n        >\n            {opened && (\n                <Alert\n                    className={b('', {\n                        centered: alert.centered,\n                        dense: alert.dense,\n                    })}\n                    corners=\"square\"\n                    layout=\"horizontal\"\n                    align={alert.align}\n                    theme={alert.theme || 'warning'}\n                    view={alert.view}\n                    icon={alert.icon}\n                    title={alert.title}\n                    message={\n                        mobileView ? (\n                            <Text ellipsisLines={5} variant=\"body-2\">\n                                {alert.message}\n                            </Text>\n                        ) : (\n                            alert.message\n                        )\n                    }\n                    actions={alert.actions}\n                    onClose={alert.closable ? handleClose : undefined}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["debounceFn","block","Alert","Text"],"mappings":"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"}

package/build/cjs/{index-CwssjteA.js → index-DXB2_bQS.js}

@@ -138,10 +138,10 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$u = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.gn-aside-header_compact .gn-aside-header__aside{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button .gn-aside-header__logo-icon-place{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.gn-aside-header__panels{inset:var(--gn-top-alert-height,0) 0 0;max-height:calc(100vh - var(--gn-top-alert-height, 0));overflow:auto;position:fixed;z-index:var(--gn-aside-header-panel-z-index,98)}.gn-aside-header__panel{height:100%}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__top-alert{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.gn-aside-header__content{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
+var css_248z$u = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.gn-aside-header_compact .gn-aside-header__aside{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button .gn-aside-header__logo-icon-place{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.gn-aside-header__panels{--gn-drawer-z-index:var(--gn-aside-header-panel-z-index,98);display:flex;flex-direction:column;inset:var(--gn-top-alert-height,0) 0 0;max-height:calc(100vh - var(--gn-top-alert-height, 0));overflow:auto;position:fixed}.gn-aside-header__panel{flex-grow:1;height:auto}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__top-alert{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.gn-aside-header__content{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
 styleInject(css_248z$u);
 
-const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-DmbAkuY3.js'); }).then((module) => ({ default: module.TopAlert })));
+const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-CP_uL7BD.js'); }).then((module) => ({ default: module.TopAlert })));
 const Layout = ({ compact, className, children, topAlert }) => {
     const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
     const asideHeaderContextValue = React.useMemo(() => ({ size, compact }), [compact, size]);
@@ -4589,7 +4589,7 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
 
 const Panels = () => {
     const { panelItems, onClosePanel, size } = useAsideHeaderInnerContext();
-    return panelItems ? (React.createElement(Drawer, { className: b$v('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React.createElement(DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
+    return panelItems ? (React.createElement(Drawer, { className: b$v('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React.createElement(DrawerItem, Object.assign({ key: item.id, className: b$v('panel') }, item)))))) : null;
 };
 
 const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
@@ -5188,23 +5188,9 @@ function requireIdentity () {
 var identityExports = requireIdentity();
 var identity = /*@__PURE__*/getDefaultExportFromCjs(identityExports);
 
-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;
-    }
-}
+const SettingsContext = React.createContext({});
+
+const useSettingsContext = () => React.useContext(SettingsContext);
 
 var css_248z$c = ".gn-settings-menu__group-heading{display:inline-block;font-weight:var(--g-text-accent-font-weight);line-height:18px;margin-bottom:12px;padding:0 20px}.gn-settings-menu__group+.gn-settings-menu__group{margin-top:24px}.gn-settings-menu__item+.gn-settings-menu__group{margin-top:8px}.gn-settings-menu__item{align-items:center;color:var(--g-color-text-primary);cursor:pointer;display:flex;height:40px;padding:0 20px}.gn-settings-menu__item-icon{color:var(--g-color-text-misc);margin-right:5px}.gn-settings-menu__item:hover,.gn-settings-menu__item_focused{background:var(--g-color-base-simple-hover)}.gn-settings-menu__item_selected{background:var(--g-color-base-selection)}.gn-settings-menu__item_selected.gn-settings-menu__item_focused,.gn-settings-menu__item_selected:hover{background:var(--g-color-base-selection-hover)}.gn-settings-menu__item_disabled{color:var(--g-color-text-secondary);cursor:auto}.gn-settings-menu__item_disabled:hover{background:none}.gn-settings-menu__item_disabled .gn-settings-menu__item-icon{color:var(--g-color-base-misc-heavy)}.gn-settings-menu__item_badge{position:relative}.gn-settings-menu__item_badge: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}";
 styleInject(css_248z$c);
@@ -5311,7 +5297,97 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
         React.createElement(legacy.Tabs, { items: tabItems, className: b$c(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
 };
 
-const b$b = block('settings-search');
+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;
+    }
+}
+
+const b$b = block('settings');
+
+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.createElement("strong", { key: key++, className: b$b('found') }, m));
+            temp = temp.slice(i + m.length);
+        }
+    }
+    if (temp) {
+        title.push(temp);
+    }
+    return title;
+}
+
+const SettingRow = ({ title: settingTitle, element, search, }) => {
+    return (React.createElement("div", { className: b$b('section-item') }, React.cloneElement(element, Object.assign(Object.assign({}, element.props), { highlightedTitle: search && settingTitle ? prepareTitle(settingTitle, search) : settingTitle }))));
+};
+SettingRow.displayName = 'SettingRow';
+
+const SettingsSection = React.forwardRef((_a, ref) => {
+    var { search, isMobile, isSelected } = _a, section = __rest(_a, ["search", "isMobile", "isSelected"]);
+    const { renderSectionRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
+    return (React.createElement("div", { className: b$b('section', { selected: isSelected }), ref: isSelected ? ref : undefined },
+        section.title && !section.hideTitle && (React.createElement("h3", { className: b$b('section-heading') }, renderSectionRightAdornment ? (React.createElement(uikit.Flex, { gap: 2, alignItems: 'center' },
+            section.title,
+            React.createElement("div", { className: b$b('section-right-adornment', {
+                    hidden: showRightAdornmentOnHover,
+                }) }, renderSectionRightAdornment(section)))) : (section.title))),
+        section.header &&
+            (isMobile ? (React.createElement("div", { className: b$b('section-subheader') }, section.header)) : (section.header)),
+        section.items.map((setting) => setting.hidden ? null : (React.createElement(SettingRow, Object.assign({}, setting, { key: setting.title, search: search }))))));
+});
+SettingsSection.displayName = 'SettingsSection';
+
+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 '';
+};
+
+const SettingsPageComponent = ({ menu, pages, selected, isMobile, search, page, renderNotFound, emptyPlaceholder, onClose, }) => {
+    if (!page) {
+        return typeof renderNotFound === 'function' ? (React.createElement(React.Fragment, null, renderNotFound())) : (React.createElement("div", { className: b$b('not-found') }, emptyPlaceholder));
+    }
+    const filteredSections = pages[page].sections.filter((section) => !section.hidden);
+    return (React.createElement(React.Fragment, null,
+        !isMobile && (React.createElement(Title, { hasSeparator: true, onClose: onClose }, getPageTitleById(menu, page))),
+        React.createElement("div", { className: b$b('content') }, filteredSections.map((section) => {
+            const isSelected = isSectionSelected(selected, page, section);
+            return (React.createElement(SettingsSection, Object.assign({ isSelected: isSelected, isMobile: isMobile, search: search }, section, { key: section.title })));
+        }))));
+};
+
+const b$a = block('settings-search');
 function SettingsSearch({ className, initialValue, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, selection, }) {
     const [value, setValue] = React.useState(initialValue !== null && initialValue !== undefined ? initialValue : '');
     const onChangeDebounced = debounceFn(onChange, debounce);
@@ -5328,7 +5404,7 @@ function SettingsSearch({ className, initialValue, onChange, debounce = 200, inp
         // Remove any search, if selection is passed
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selection]);
-    return (React.createElement("div", { className: b$b(null, className) },
+    return (React.createElement("div", { className: b$a(null, className) },
         React.createElement(uikit.TextInput, { value: value, controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate, controlProps: {
                 'aria-label': i18n$1('label_search'),
             } })));
@@ -5337,32 +5413,16 @@ function SettingsSearch({ className, initialValue, onChange, debounce = 200, inp
 var css_248z$a = ".gn-settings{display:grid;grid-template-columns:216px 1fr;height:100%;width:834px}.gn-settings_view_mobile{display:block;height:calc(80vh - 56px);overflow-x:hidden;width:auto}@supports (height:90dvh){.gn-settings_view_mobile{height:calc(90dvh - 56px)}}.gn-settings_view_mobile.gn-settings_loading{text-align:center}.gn-settings_view_mobile .gn-settings__loader{margin-top:20px}.gn-settings_view_mobile .gn-settings__search{margin:4px 0 16px;padding:0 20px}.gn-settings_view_mobile .gn-settings__page{overflow-y:visible}.gn-settings_view_mobile .gn-settings__tabs .g-tabs__item:first-child{margin-left:20px}.gn-settings_view_mobile .gn-settings__tabs .g-tabs__item:last-child{margin-right:20px}.gn-settings_view_mobile .gn-settings__section-heading{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)}.gn-settings_view_mobile .gn-settings__section-subheader{color:var(--g-color-text-secondary)}.gn-settings_view_mobile .gn-settings__section-heading+.gn-settings-subheader{margin-top:8px}.gn-settings_view_mobile .gn-settings__section-item{margin-top:0}.gn-settings_view_mobile .gn-settings__section-heading+.gn-settings__section-item,.gn-settings_view_mobile .gn-settings__section-subheader+.gn-settings__section-item{margin-top:30px}.gn-settings_view_mobile .gn-settings__section-item+.gn-settings__section-item{margin-top:22px}.gn-settings_view_mobile .gn-settings__item:not(.gn-settings_view_mobile .gn-settings__item_mode_row){gap:8px;grid-template-columns:1fr}.gn-settings_view_mobile .gn-settings__item-heading{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)}.gn-settings_view_mobile .gn-settings__item-description{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)}.gn-settings_view_mobile .gn-settings__item_mode_row{grid-template-columns:1fr auto}.gn-settings_view_mobile .gn-settings__item_mode_row .gn-settings__item-heading{padding-right:20px}.gn-settings_view_mobile .gn-settings__item-content{width:100%}.gn-settings_view_mobile .gn-settings__not-found{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}.gn-settings_loading{grid-template-columns:auto}.gn-settings__loader{place-self:center}.gn-settings__not-found{display:grid;height:100%;place-items:center}.gn-settings__menu{border-right:1px solid var(--g-color-line-generic)}.gn-settings__heading{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}.gn-settings__search{margin:0 20px 16px}.gn-settings__page{overflow-y:auto}.gn-settings__content{padding:20px}.gn-settings__section-right-adornment_hidden{opacity:0;transition:opacity .2s}.gn-settings__section-heading:hover .gn-settings__section-right-adornment_hidden{opacity:1}.gn-settings__section-heading{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}.gn-settings__section-item{margin-top:24px}.gn-settings__section+.gn-settings__section{margin-top:32px}.gn-settings__section:only-child .gn-settings__section-item:first-of-type{margin-top:0}.gn-settings__section:only-child .gn-settings__section-heading{display:none}.gn-settings__item{display:grid;grid-template-columns:216px 1fr;justify-items:start}.gn-settings__item_align_top{align-items:start}.gn-settings__item_align_center{align-items:center}.gn-settings__item-title_badge{position:relative}.gn-settings__item-title_badge:after{background-color:var(--g-color-text-danger);border-radius:50%;content:\"\";display:block;height:6px;position:absolute;right:-8px;top:1px;width:6px}.gn-settings__item-description{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}.gn-settings__item-right-adornment_hidden{opacity:0;transition:opacity .2s}.gn-settings__item:hover .gn-settings__item-right-adornment_hidden{opacity:1}.gn-settings__item_selected,.gn-settings__section_selected{background:var(--g-color-base-selection);border-radius:8px;margin-left:-8px;padding:8px}.gn-settings__found{background:var(--g-color-base-selection);font-weight:var(--g-text-accent-font-weight)}";
 styleInject(css_248z$a);
 
-const b$a = block('settings');
-const SettingsContext = React.createContext({});
-const useSettingsContext = () => React.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.createElement("div", { className: b$a({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React.createElement(uikit.Loader, { className: b$a('loader'), size: "m" }))));
+        return (React.createElement("div", { className: b$b({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React.createElement(uikit.Loader, { className: b$b('loader'), size: "m" }))));
     }
     return (React.createElement(SettingsContext.Provider, { value: { renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover } },
         React.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$1('label_title'), filterPlaceholder = i18n$1('label_filter-placeholder'), emptyPlaceholder = i18n$1('label_empty-placeholder'), view, onPageChange, onClose, }) {
     var _a;
-    const { renderSectionRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
     const [search, setSearch] = React.useState(initialSearch !== null && initialSearch !== undefined ? initialSearch : '');
     const { menu, pages } = getSettingsFromChildren(children, search);
     const selected = useSettingsSelectionProviderValue(pages, selection);
@@ -5419,35 +5479,11 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
             selected.selectedRef.current.scrollIntoView();
         }
     }, [selected.selectedRef]);
-    const renderSetting = ({ title: settingTitle, element }) => {
-        return (React.createElement("div", { key: settingTitle, className: b$a('section-item') }, React.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.createElement("div", { key: section.title, className: b$a('section', { selected: isSelected }), ref: isSelected ? selected.selectedRef : undefined },
-            section.title && !section.hideTitle && (React.createElement("h3", { className: b$a('section-heading') }, renderSectionRightAdornment ? (React.createElement(uikit.Flex, { gap: 2, alignItems: 'center' },
-                section.title,
-                React.createElement("div", { className: b$a('section-right-adornment', {
-                        hidden: showRightAdornmentOnHover,
-                    }) }, renderSectionRightAdornment(section)))) : (section.title))),
-            section.header &&
-                (isMobile ? (React.createElement("div", { className: b$a('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.createElement("div", { className: b$a('not-found') }, emptyPlaceholder));
-        }
-        const filteredSections = pages[page].sections.filter((section) => !section.hidden);
-        return (React.createElement(React.Fragment, null,
-            !isMobile && (React.createElement(Title, { hasSeparator: true, onClose: onClose }, getPageTitleById(menu, page))),
-            React.createElement("div", { className: b$a('content') }, filteredSections.map((section) => renderSection(page, section)))));
-    };
     return (React.createElement(SettingsSelectionContextProvider, { value: selected },
-        React.createElement("div", { className: b$a({ view }) },
+        React.createElement("div", { className: b$b({ view }) },
             isMobile ? (React.createElement(React.Fragment, null,
-                React.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$a('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
-                React.createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b$a('tabs') }))) : (React.createElement("div", { className: b$a('menu'), onClick: () => {
+                React.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$b('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
+                React.createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b$b('tabs') }))) : (React.createElement("div", { className: b$b('menu'), onClick: () => {
                     if (searchInputRef.current) {
                         searchInputRef.current.focus();
                     }
@@ -5459,9 +5495,10 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
                     }
                 } },
                 React.createElement(Title, null, title),
-                React.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$a('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
+                React.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$b('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
                 React.createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
-            React.createElement("div", { className: b$a('page') }, renderPageContent(activePage)))));
+            React.createElement("div", { className: b$b('page') },
+                React.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.createElement(React.Fragment, null, children);
@@ -5477,40 +5514,17 @@ Settings.Item = function SettingsItem(setting) {
     const selected = useSettingsSelectionContext();
     const isSettingSelected = selected.setting && selected.setting.id === id;
     const { renderRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
-    const titleNode = (React.createElement("span", { className: b$a('item-title', { badge: withBadge }) }, renderTitleComponent(highlightedTitle)));
-    return (React.createElement("div", { className: b$a('item', { align, mode, selected: isSettingSelected }), ref: isSettingSelected ? selected.selectedRef : undefined },
-        React.createElement("label", { className: b$a('item-heading'), id: labelId },
-            renderRightAdornment ? (React.createElement(uikit.Flex, { className: b$a('item-title-wrapper'), gap: 3 },
+    const titleNode = (React.createElement("span", { className: b$b('item-title', { badge: withBadge }) }, renderTitleComponent(highlightedTitle)));
+    return (React.createElement("div", { className: b$b('item', { align, mode, selected: isSettingSelected }), ref: isSettingSelected ? selected.selectedRef : undefined },
+        React.createElement("label", { className: b$b('item-heading'), id: labelId },
+            renderRightAdornment ? (React.createElement(uikit.Flex, { className: b$b('item-title-wrapper'), gap: 3 },
                 titleNode,
-                React.createElement("div", { className: b$a('item-right-adornment', {
+                React.createElement("div", { className: b$b('item-right-adornment', {
                         hidden: showRightAdornmentOnHover,
                     }) }, renderRightAdornment(setting)))) : (titleNode),
-            description ? React.createElement("span", { className: b$a('item-description') }, description) : null),
-        React.createElement("div", { className: b$a('item-content') }, children)));
+            description ? React.createElement("span", { className: b$b('item-description') }, description) : null),
+        React.createElement("div", { className: b$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.createElement("strong", { key: key++, className: b$a('found') }, m));
-            temp = temp.slice(i + m.length);
-        }
-    }
-    if (temp) {
-        title.push(temp);
-    }
-    return title;
-}
 
 const useForwardRef = (ref, initialValue = null) => {
     const targetRef = React.useRef(initialValue);
@@ -5689,7 +5703,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
 var css_248z$4 = ".gn-mobile-header{--mobile-header-min-heigth:50px;--mobile-header-icon-size:20px;background-color:var(--g-color-base-background)}.gn-mobile-header__header-container{background-color:var(--g-color-base-background);position:sticky;top:0;z-index:var(--gn-mobile-header-z-index,100)}.gn-mobile-header__header{align-items:center;border-bottom:1px solid var(--g-color-line-generic);box-sizing:border-box;display:flex;justify-content:space-between;padding:0 10px}.gn-mobile-header__burger{padding:12px}.gn-mobile-header__panel-item{--gn-drawer-item-position:var(--gn-mobile-header-panel-position,absolute)}.gn-mobile-header__burger-menu,.gn-mobile-header__panel-item{background-color:var(--g-color-base-background);max-height:100%;max-width:90vw;width:320px}.gn-mobile-header__user-menu{overflow-y:auto}.gn-mobile-header__overlap-panel,.gn-mobile-header__panels{z-index:var(--gn-mobile-header-panel-z-index,98)}.gn-mobile-header__panels{inset:var(--mobile-header-min-heigth) 0 0;overflow:hidden;position:fixed}.gn-mobile-header__panel-item{top:unset}.gn-mobile-header__content{overflow:auto}";
 styleInject(css_248z$4);
 
-const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-DmbAkuY3.js'); }).then((module) => ({ default: module.TopAlert })));
+const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-CP_uL7BD.js'); }).then((module) => ({ default: module.TopAlert })));
 const b$4 = block('mobile-header');
 const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
     const targetRef = useForwardRef(ref);
@@ -6008,4 +6022,4 @@ exports.styleInject = styleInject;
 exports.useAsideHeaderContext = useAsideHeaderContext;
 exports.useSettingsContext = useSettingsContext;
 exports.useSettingsSelectionContext = useSettingsSelectionContext;
-//# sourceMappingURL=index-CwssjteA.js.map
+//# sourceMappingURL=index-DXB2_bQS.js.map