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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Portal, useForkRef} from '@gravity-ui/uikit';\nimport {CSSTransition, Transition} from 'react-transition-group';\n\nimport {block} from '../utils/cn';\n\nimport {type DrawerDirection, useResizableDrawerItem} from './utils';\n\nimport './Drawer.scss';\n\nconst b = block('drawer');\nconst TIMEOUT = 300;\n\nexport interface DrawerItemProps {\n    /** Unique identifier for the drawer item. */\n    id: string;\n\n    /**\n     * Content to be displayed within the drawer item.\n     * @deprecated Use `children` instead.\n     */\n    content?: React.ReactNode;\n\n    /** Content to be displayed within the drawer item, preferable over the deprecated `content`. */\n    children?: React.ReactNode;\n\n    /** Determines whether the drawer item is visible or hidden. */\n    visible: boolean;\n\n    /** Specifies the direction from which the drawer should slide in, `left` by default.\n     * @default left\n     */\n    direction?: DrawerDirection;\n\n    /** Additional custom class name applied to the drawer item. */\n    className?: string;\n\n    /** Determines whether the drawer item can be resized */\n    resizable?: boolean;\n\n    /**\n     * The width of the resizable drawer item.\n     * If not provided, the width will be stored internally.\n     */\n    width?: number;\n\n    /** Called at the start of resizing. */\n    onResizeStart?: VoidFunction;\n\n    /**\n     * Called at the end of resizing. Can be used to save the new width.\n     * @param width The new width of the drawer item\n     */\n    onResize?: (width: number) => void;\n\n    /** The minimum width of the resizable drawer item */\n    minResizeWidth?: number;\n\n    /** The maximum width of the resizable drawer item */\n    maxResizeWidth?: number;\n\n    /**\n     * Keep child components mounted when closed, prioritized over Drawer.keepMounted property\n     * @default false\n     * */\n    keepMounted?: boolean;\n}\n\nexport const DrawerItem = React.forwardRef<HTMLDivElement, DrawerItemProps>(\n    function DrawerItem(props, ref) {\n        const {\n            visible,\n            content,\n            children,\n            direction = 'left',\n            className,\n            resizable,\n            width,\n            minResizeWidth,\n            maxResizeWidth,\n            onResizeStart,\n            onResize,\n            keepMounted = false,\n        } = props;\n\n        const [isInitialRender, setInitialRender] = React.useState(true);\n        const itemRef = React.useRef<HTMLDivElement>(null);\n        const handleRef = useForkRef(ref, itemRef);\n\n        const cssDirection = direction === 'left' ? undefined : direction;\n\n        const {resizedWidth, resizerHandlers} = useResizableDrawerItem({\n            direction,\n            width,\n            minResizeWidth,\n            maxResizeWidth,\n            onResizeStart,\n            onResize,\n        });\n\n        React.useEffect(() => {\n            setInitialRender(true);\n        }, [direction]);\n\n        const resizerElement = resizable ? (\n            <div className={b('resizer', {direction})} {...resizerHandlers}>\n                <div className={b('resizer-handle')} />\n            </div>\n        ) : null;\n\n        return (\n            <CSSTransition\n                in={visible}\n                timeout={TIMEOUT}\n                mountOnEnter={!keepMounted}\n                unmountOnExit={!keepMounted}\n                classNames={b('item-transition', {direction: cssDirection})}\n                nodeRef={itemRef}\n                onEnter={() => setInitialRender(false)}\n                onExit={() => setInitialRender(false)}\n            >\n                <div\n                    ref={handleRef}\n                    className={b(\n                        'item',\n                        {direction: cssDirection, hidden: isInitialRender && !visible},\n                        [className],\n                    )}\n                    style={{width: resizable ? `${resizedWidth}px` : undefined}}\n                >\n                    {resizerElement}\n                    {children ?? content}\n                </div>\n            </CSSTransition>\n        );\n    },\n);\n\ntype DrawerChild = React.ReactElement<DrawerItemProps>;\n\nexport interface DrawerProps {\n    /** Child components to be rendered within the drawer. This can be a single child or an array of children. */\n    children: DrawerChild | DrawerChild[];\n\n    /** Optional additional class names to style the drawer component. */\n    className?: string;\n\n    /** Optional inline styles to be applied to the drawer component. */\n    style?: React.CSSProperties;\n\n    /** Optional additional class names to style the background veil element. */\n    veilClassName?: string;\n\n    /** Optional callback function that is called when the veil (overlay) is clicked. */\n    onVeilClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n\n    /** Optional callback function that is called when the escape key is pressed, if the drawer is open. */\n    onEscape?: () => void;\n\n    /** Optional flag to hide the background darkening */\n    hideVeil?: boolean;\n\n    /** Optional flag to not use `Portal` for drawer */\n    disablePortal?: boolean;\n\n    /**\n     * Keep child components mounted when closed\n     * @default false\n     * */\n    keepMounted?: boolean;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n    className,\n    veilClassName,\n    children,\n    style,\n    onVeilClick,\n    onEscape,\n    hideVeil,\n    disablePortal = true,\n    keepMounted = false,\n}) => {\n    let someItemVisible = false;\n    React.Children.forEach(children, (child) => {\n        if (React.isValidElement<DrawerItemProps>(child) && child.type === DrawerItem) {\n            const childVisible = Boolean(child.props.visible);\n            if (childVisible) {\n                someItemVisible = true;\n            }\n        }\n    });\n\n    React.useEffect(() => {\n        function onKeyDown(event: KeyboardEvent) {\n            if (event.key === 'Escape') {\n                onEscape?.();\n            }\n        }\n        if (someItemVisible) {\n            window.addEventListener('keydown', onKeyDown);\n        }\n        return () => {\n            window.removeEventListener('keydown', onKeyDown);\n        };\n    }, [onEscape, someItemVisible]);\n\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const veilRef = React.useRef<HTMLDivElement>(null);\n\n    const drawer = (\n        <Transition\n            in={someItemVisible}\n            timeout={{enter: 0, exit: TIMEOUT}}\n            mountOnEnter={!keepMounted}\n            unmountOnExit={!keepMounted}\n            nodeRef={containerRef}\n        >\n            {(state) => {\n                const childrenVisible = someItemVisible && state === 'entered';\n                return (\n                    <div ref={containerRef} className={b({hideVeil}, className)} style={style}>\n                        <CSSTransition\n                            in={childrenVisible}\n                            timeout={TIMEOUT}\n                            unmountOnExit\n                            classNames={b('veil-transition')}\n                            nodeRef={veilRef}\n                        >\n                            <div\n                                ref={veilRef}\n                                className={b('veil', {hidden: hideVeil}, veilClassName)}\n                                onClick={onVeilClick}\n                            />\n                        </CSSTransition>\n                        {React.Children.map(children, (child) => {\n                            if (\n                                React.isValidElement<DrawerItemProps>(child) &&\n                                child.type === DrawerItem\n                            ) {\n                                const childVisible = Boolean(child.props.visible);\n                                return React.cloneElement(child, {\n                                    keepMounted,\n                                    ...child.props,\n                                    visible: childVisible && childrenVisible,\n                                });\n                            }\n                            return child;\n                        })}\n                    </div>\n                );\n            }}\n        </Transition>\n    );\n\n    if (disablePortal) {\n        return drawer;\n    }\n\n    return <Portal>{drawer}</Portal>;\n};\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/Drawer/Drawer.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".gn-drawer{--_--item-shadow-default:0 1px 5px 0 var(--g-color-sfx-shadow);--_--item-position:fixed;--_--resizer-width:8px;--_--resizer-color:var(--g-color-base-generic);--_--resizer-handle-color:var(--g-color-line-generic);--_--resizer-handle-color-hover:var(--g-color-line-generic-hover);--_--resizer-z-index:100;--_--veil-background-color:var(--g-color-sfx-veil);pointer-events:none}.gn-drawer_hideVeil{--_--item-shadow:var(--gn-drawer-item-shadow,var(--_--item-shadow-default))}.gn-drawer__item{background-color:var(--g-color-base-background);bottom:0;box-shadow:var(--_--item-shadow,none);height:100%;left:var(--gn-aside-header-size);pointer-events:auto;position:var(--gn-drawer-item-position,var(--_--item-position));top:0;will-change:transform;z-index:var(--gn-drawer-item-z-index)}.gn-drawer__item_direction_right{left:auto;right:0}.gn-drawer__item-transition-enter{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-enter{transform:translate(100%)}.gn-drawer__item-transition-enter-active,.gn-drawer__item-transition_direction_right-enter-active{transform:translate(0);transition:transform .3s}.gn-drawer__item-transition-enter-done,.gn-drawer__item-transition_direction_right-enter-done{filter:blur(0);transform:translateZ(0)}.gn-drawer__item-transition-exit,.gn-drawer__item-transition_direction_right-exit{transform:translate(0)}.gn-drawer__item-transition-exit-active,.gn-drawer__item-transition_direction_right-exit-active{transition:transform .3s}.gn-drawer__item-transition-exit-active{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-exit-active{transform:translate(100%)}.gn-drawer__item-transition-exit-done,.gn-drawer__item-transition_direction_right-exit-done,.gn-drawer__item_hidden{visibility:hidden}.gn-drawer__veil{background-color:var(--gn-drawer-veil-background-color,var(--_--veil-background-color));inset:0;pointer-events:auto;position:absolute;z-index:var(--gn-drawer-veil-z-index)}.gn-drawer__veil_hidden{display:none}.gn-drawer__veil-transition-enter{opacity:0}.gn-drawer__veil-transition-enter-active{opacity:1;transition:opacity .3s}.gn-drawer__veil-transition-exit{opacity:1}.gn-drawer__veil-transition-exit-active{opacity:0;transition:opacity .3s}.gn-drawer__veil-transition-exit-done{visibility:hidden}.gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color,var(--_--resizer-handle-color));border-radius:2px;height:28px;width:2px}.gn-drawer__resizer{align-items:center;background:var(--gn-drawer-item-resizer-color,var(--_--resizer-color));cursor:col-resize;display:flex;flex-direction:column;height:100%;justify-content:center;position:absolute;top:0;width:var(--gn-drawer-item-resizer-width,var(--_--resizer-width));z-index:var(--gn-drawer-item-resizer-z-index,var(--_--resizer-z-index))}.gn-drawer__resizer_direction_right{left:0}.gn-drawer__resizer_direction_left{right:0}.gn-drawer__resizer:hover .gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color-hover,var(--_--resizer-handle-color-hover))}";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Drawer.scss.js.map

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

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

package/build/esm/components/Drawer/__stories__/DisablePortal.d.ts

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

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

@@ -0,0 +1,7 @@
+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>;
+export declare const ResizableItem: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const DisablePortal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const HideVeil: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;

package/build/esm/components/Drawer/__stories__/DrawerShowcase.d.ts

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

package/build/esm/components/Drawer/__stories__/HideVeil.d.ts

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

package/build/esm/components/Drawer/__stories__/ResizableItem.d.ts

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

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

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

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

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

package/build/esm/components/Drawer/utils.d.ts

@@ -24,7 +24,7 @@ export interface UseResizableDrawerItemParams {
 export declare function useResizableDrawerItem(params: UseResizableDrawerItemParams): {
     resizedWidth: number;
     resizerHandlers: {
-        onMouseDown: (e: React.MouseEvent<Element, MouseEvent> | React.TouchEvent<Element>) => void;
-        onTouchStart: (e: React.MouseEvent<Element, MouseEvent> | React.TouchEvent<Element>) => void;
+        onMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
+        onTouchStart: (e: React.MouseEvent | React.TouchEvent) => void;
     };
 };

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

@@ -0,0 +1,84 @@
+import * as React from 'react';
+
+const DRAWER_ITEM_MIN_RESIZE_WIDTH = 200;
+const DRAWER_ITEM_MAX_RESIZE_WIDTH = 800;
+const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;
+function getEventClientX(e) {
+    var _a, _b;
+    return 'touches' in e ? ((_b = (_a = e.touches[0]) === null || _a === undefined ? undefined : _a.clientX) !== null && _b !== undefined ? _b : 0) : e.clientX;
+}
+function useResizeHandlers({ onStart, onMove, onEnd }) {
+    const initialXPosition = React.useRef(0);
+    const currentXPosition = React.useRef(0);
+    const handleMove = React.useCallback((e) => {
+        const currentX = getEventClientX(e);
+        if (currentXPosition.current === currentX) {
+            return;
+        }
+        currentXPosition.current = currentX;
+        const delta = initialXPosition.current - currentX;
+        onMove(delta);
+    }, [onMove]);
+    const handleEnd = React.useCallback((e) => {
+        window.removeEventListener('mousemove', handleMove);
+        window.removeEventListener('touchmove', handleMove);
+        document.body.style.removeProperty('user-select');
+        document.body.style.removeProperty('-webkit-user-select');
+        document.body.style.removeProperty('cursor');
+        const currentX = getEventClientX(e);
+        const delta = initialXPosition.current - currentX;
+        onEnd(delta);
+    }, [handleMove, onEnd]);
+    const handleStart = React.useCallback((e) => {
+        const currentX = getEventClientX(e);
+        initialXPosition.current = currentX;
+        currentXPosition.current = currentX;
+        window.addEventListener('mouseup', handleEnd, { once: true });
+        window.addEventListener('touchend', handleEnd, { once: true });
+        window.addEventListener('touchcancel', handleEnd, { once: true });
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('touchmove', handleMove);
+        document.body.style.setProperty('user-select', 'none');
+        document.body.style.setProperty('-webkit-user-select', 'none');
+        document.body.style.setProperty('cursor', 'col-resize');
+        onStart();
+    }, [handleEnd, handleMove, onStart]);
+    return {
+        onMouseDown: handleStart,
+        onTouchStart: handleStart,
+    };
+}
+function useResizableDrawerItem(params) {
+    const { direction, width, minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH, maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH, onResizeStart, onResize, } = params;
+    const [isResizing, setIsResizing] = React.useState(false);
+    const [resizeDelta, setResizeDelta] = React.useState(0);
+    const [internalWidth, setInternalWidth] = React.useState(width !== null && width !== undefined ? width : DRAWER_ITEM_INITIAL_RESIZE_WIDTH);
+    const getClampedWidth = React.useCallback((width) => Math.min(Math.max(width, minResizeWidth), maxResizeWidth), [minResizeWidth, maxResizeWidth]);
+    const getResizedWidth = React.useCallback((delta) => {
+        const signedDelta = direction === 'right' ? delta : -delta;
+        const newWidth = (width !== null && width !== undefined ? width : internalWidth) + signedDelta;
+        return getClampedWidth(newWidth);
+    }, [width, internalWidth, direction, getClampedWidth]);
+    const onStart = React.useCallback(() => {
+        setIsResizing(true);
+        setResizeDelta(0);
+        onResizeStart === null || onResizeStart === undefined ? undefined : onResizeStart();
+    }, [onResizeStart]);
+    const onMove = React.useCallback((delta) => {
+        setResizeDelta(delta);
+    }, []);
+    const onEnd = React.useCallback((delta) => {
+        const newWidth = getResizedWidth(delta);
+        setIsResizing(false);
+        setInternalWidth(newWidth);
+        onResize === null || onResize === undefined ? undefined : onResize(newWidth);
+    }, [getResizedWidth, onResize]);
+    const displayWidth = isResizing
+        ? getResizedWidth(resizeDelta)
+        : getClampedWidth(width !== null && width !== undefined ? width : internalWidth);
+    const handlers = useResizeHandlers({ onStart, onMove, onEnd });
+    return { resizedWidth: displayWidth, resizerHandlers: handlers };
+}
+
+export { DRAWER_ITEM_INITIAL_RESIZE_WIDTH, DRAWER_ITEM_MAX_RESIZE_WIDTH, DRAWER_ITEM_MIN_RESIZE_WIDTH, useResizableDrawerItem, useResizeHandlers };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/Drawer/utils.ts"],"sourcesContent":["import * as React from 'react';\n\nexport const DRAWER_ITEM_MIN_RESIZE_WIDTH = 200;\nexport const DRAWER_ITEM_MAX_RESIZE_WIDTH = 800;\nexport const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;\n\nexport type DrawerDirection = 'right' | 'left';\nexport type OnResizeHandler = (width: number) => void;\n\nfunction getEventClientX(e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent) {\n    return 'touches' in e ? (e.touches[0]?.clientX ?? 0) : e.clientX;\n}\n\nexport interface UseResizeHandlersParams {\n    onStart: () => void;\n    onMove: (delta: number) => void;\n    onEnd: (delta: number) => void;\n}\n\nexport function useResizeHandlers({onStart, onMove, onEnd}: UseResizeHandlersParams) {\n    const initialXPosition = React.useRef(0);\n    const currentXPosition = React.useRef(0);\n\n    const handleMove = React.useCallback(\n        (e: MouseEvent | TouchEvent) => {\n            const currentX = getEventClientX(e);\n\n            if (currentXPosition.current === currentX) {\n                return;\n            }\n\n            currentXPosition.current = currentX;\n\n            const delta = initialXPosition.current - currentX;\n\n            onMove(delta);\n        },\n        [onMove],\n    );\n\n    const handleEnd = React.useCallback(\n        (e: MouseEvent | TouchEvent) => {\n            window.removeEventListener('mousemove', handleMove);\n            window.removeEventListener('touchmove', handleMove);\n\n            document.body.style.removeProperty('user-select');\n            document.body.style.removeProperty('-webkit-user-select');\n            document.body.style.removeProperty('cursor');\n\n            const currentX = getEventClientX(e);\n            const delta = initialXPosition.current - currentX;\n\n            onEnd(delta);\n        },\n        [handleMove, onEnd],\n    );\n\n    const handleStart = React.useCallback(\n        (e: React.MouseEvent | React.TouchEvent) => {\n            const currentX = getEventClientX(e);\n\n            initialXPosition.current = currentX;\n            currentXPosition.current = currentX;\n\n            window.addEventListener('mouseup', handleEnd, {once: true});\n            window.addEventListener('touchend', handleEnd, {once: true});\n            window.addEventListener('touchcancel', handleEnd, {once: true});\n\n            window.addEventListener('mousemove', handleMove);\n            window.addEventListener('touchmove', handleMove);\n\n            document.body.style.setProperty('user-select', 'none');\n            document.body.style.setProperty('-webkit-user-select', 'none');\n            document.body.style.setProperty('cursor', 'col-resize');\n\n            onStart();\n        },\n        [handleEnd, handleMove, onStart],\n    );\n\n    return {\n        onMouseDown: handleStart,\n        onTouchStart: handleStart,\n    };\n}\n\nexport interface UseResizableDrawerItemParams {\n    direction?: DrawerDirection;\n    width?: number;\n    minResizeWidth?: number;\n    maxResizeWidth?: number;\n    onResizeStart?: VoidFunction;\n    onResize?: OnResizeHandler;\n}\n\nexport function useResizableDrawerItem(params: UseResizableDrawerItemParams) {\n    const {\n        direction,\n        width,\n        minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH,\n        maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH,\n        onResizeStart,\n        onResize,\n    } = params;\n\n    const [isResizing, setIsResizing] = React.useState(false);\n    const [resizeDelta, setResizeDelta] = React.useState(0);\n    const [internalWidth, setInternalWidth] = React.useState(\n        width ?? DRAWER_ITEM_INITIAL_RESIZE_WIDTH,\n    );\n\n    const getClampedWidth = React.useCallback(\n        (width: number) => Math.min(Math.max(width, minResizeWidth), maxResizeWidth),\n        [minResizeWidth, maxResizeWidth],\n    );\n\n    const getResizedWidth = React.useCallback(\n        (delta: number) => {\n            const signedDelta = direction === 'right' ? delta : -delta;\n            const newWidth = (width ?? internalWidth) + signedDelta;\n            return getClampedWidth(newWidth);\n        },\n        [width, internalWidth, direction, getClampedWidth],\n    );\n\n    const onStart = React.useCallback(() => {\n        setIsResizing(true);\n        setResizeDelta(0);\n        onResizeStart?.();\n    }, [onResizeStart]);\n\n    const onMove = React.useCallback((delta: number) => {\n        setResizeDelta(delta);\n    }, []);\n\n    const onEnd = React.useCallback(\n        (delta: number) => {\n            const newWidth = getResizedWidth(delta);\n            setIsResizing(false);\n            setInternalWidth(newWidth);\n            onResize?.(newWidth);\n        },\n        [getResizedWidth, onResize],\n    );\n\n    const displayWidth = isResizing\n        ? getResizedWidth(resizeDelta)\n        : getClampedWidth(width ?? internalWidth);\n\n    const handlers = useResizeHandlers({onStart, onMove, onEnd});\n\n    return {resizedWidth: displayWidth, resizerHandlers: handlers};\n}\n"],"names":[],"mappings":"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"}

package/build/esm/components/Footer/MenuItem/MenuItem.js

@@ -0,0 +1,14 @@
+import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { Menu } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn.js';
+import './MenuItem.scss.js';
+
+const b = block('footer-menu-item');
+const MenuItem = (_a) => {
+    var { text, className } = _a, menuItemProps = __rest(_a, ["text", "className"]);
+    return (React__default.createElement(Menu.Item, Object.assign({ className: b(null, className) }, menuItemProps), text));
+};
+
+export { MenuItem };
+//# sourceMappingURL=MenuItem.js.map

package/build/esm/components/Footer/MenuItem/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Footer/MenuItem/MenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport type {FC} from 'react';\n\nimport {Menu} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {FooterMenuItem} from '../types';\n\nimport './MenuItem.scss';\n\nconst b = block('footer-menu-item');\n\nexport type MenuItemProps = FooterMenuItem;\n\nexport const MenuItem: FC<MenuItemProps> = ({text, className, ...menuItemProps}) => {\n    return (\n        <Menu.Item className={b(null, className)} {...menuItemProps}>\n            {text}\n        </Menu.Item>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;AAUA,MAAM,CAAC,GAAG,KAAK,CAAC,kBAAkB,CAAC;AAItB,MAAA,QAAQ,GAAsB,CAAC,EAAmC,KAAI;QAAvC,EAAC,IAAI,EAAE,SAAS,EAAA,GAAA,EAAmB,EAAd,aAAa,GAAA,MAAA,CAAA,EAAA,EAAlC,qBAAmC,CAAD;IAC1E,QACIA,6BAAC,IAAI,CAAC,IAAI,EAAC,MAAA,CAAA,MAAA,CAAA,EAAA,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAM,EAAA,aAAa,GACtD,IAAI,CACG;AAEpB;;;;"}

package/build/esm/components/Footer/MenuItem/MenuItem.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".gn-footer-menu-item{align-items:center;align-self:stretch;display:flex;height:100%;justify-content:center}.gn-footer-menu-item .g-menu__item-content{color:var(--g-color-text-secondary);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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gn-footer-menu-item[class]:hover{background-color:inherit}.gn-footer-menu-item[class]:hover[href] .g-menu__item-content{color:var(--g-color-text-link-hover)}";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=MenuItem.scss.js.map

package/build/esm/components/Footer/MenuItem/MenuItem.scss.js.map

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

package/build/esm/components/Footer/desktop/Footer.js

@@ -0,0 +1,38 @@
+import React__default, { useRef, useMemo } from 'react';
+import { Menu, DropdownMenu } from '@gravity-ui/uikit';
+import { useOverflowingHorizontalListItems } from '../../../hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.js';
+import { Logo } from '../../Logo/Logo.js';
+import { block } from '../../utils/cn.js';
+import { MenuItem } from '../MenuItem/MenuItem.js';
+import { moreItemsPopupProps } from './constants/moreItemsPopupProps.js';
+import './Footer.scss.js';
+
+const b = block('footer');
+const Footer = ({ className, menuItems: providedMenuItems, withDivider, moreButtonTitle, onMoreButtonClick, view = 'normal', logo, logoWrapperClassName, copyright, }) => {
+    var _a;
+    const menuContainerRef = useRef(null);
+    const menuItems = view === 'clear' ? undefined : providedMenuItems;
+    const { visibleItems, hiddenItems, measured } = useOverflowingHorizontalListItems({
+        containerRef: menuContainerRef,
+        items: menuItems,
+        itemSelector: `.${b('menu-item')}`,
+        moreButtonWidth: 28,
+    });
+    const moreButtonProps = useMemo(() => ({
+        title: moreButtonTitle,
+    }), [moreButtonTitle]);
+    const dropdownMenuItems = useMemo(() => hiddenItems.map((item) => (Object.assign(Object.assign({}, item), { action: item.onClick }))), [hiddenItems]);
+    const shouldRenderLogo = view !== 'clear' && Boolean(logo);
+    const shouldRenderMenu = ((_a = menuItems === null || menuItems === undefined ? undefined : menuItems.length) !== null && _a !== undefined ? _a : 0) > 0;
+    return (React__default.createElement("footer", { className: b({ desktop: true, 'with-divider': withDivider, view }, className) },
+        shouldRenderMenu && (React__default.createElement("div", { className: b('menu', { measured }), ref: menuContainerRef },
+            visibleItems.length > 0 && (React__default.createElement(Menu, { className: b('list') }, visibleItems.map((item, index) => (React__default.createElement(MenuItem, Object.assign({ key: index }, item, { className: b('menu-item', item.className) })))))),
+            dropdownMenuItems.length > 0 && (React__default.createElement(DropdownMenu, { items: dropdownMenuItems, switcherWrapperClassName: b('more-button'), popupProps: moreItemsPopupProps, defaultSwitcherProps: moreButtonProps, onSwitcherClick: onMoreButtonClick })))),
+        React__default.createElement("div", { className: b('right') },
+            React__default.createElement("small", { className: b('copyright', { small: !(menuItems === null || menuItems === undefined ? undefined : menuItems.length) }) }, copyright),
+            shouldRenderLogo && (React__default.createElement("div", { className: logoWrapperClassName },
+                React__default.createElement(Logo, Object.assign({}, logo)))))));
+};
+
+export { Footer };
+//# sourceMappingURL=Footer.js.map

package/build/esm/components/Footer/desktop/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sources":["../../../../../../src/components/Footer/desktop/Footer.tsx"],"sourcesContent":["import React, {useMemo, useRef} from 'react';\nimport type {FC} from 'react';\n\nimport {DropdownMenu, Menu} from '@gravity-ui/uikit';\nimport type {DropdownMenuItem} from '@gravity-ui/uikit';\n\nimport {useOverflowingHorizontalListItems} from '../../../hooks/useOverflowingHorizontalListItems';\nimport {Logo} from '../../Logo';\nimport {block} from '../../utils/cn';\nimport {MenuItem} from '../MenuItem/MenuItem';\nimport {FooterProps} from '../types';\n\nimport {moreItemsPopupProps} from './constants/moreItemsPopupProps';\n\nimport './Footer.scss';\n\nconst b = block('footer');\n\nexport const Footer: FC<FooterProps> = ({\n    className,\n    menuItems: providedMenuItems,\n    withDivider,\n    moreButtonTitle,\n    onMoreButtonClick,\n    view = 'normal',\n    logo,\n    logoWrapperClassName,\n    copyright,\n}) => {\n    const menuContainerRef = useRef<HTMLDivElement>(null);\n\n    const menuItems = view === 'clear' ? undefined : providedMenuItems;\n\n    const {visibleItems, hiddenItems, measured} = useOverflowingHorizontalListItems({\n        containerRef: menuContainerRef,\n        items: menuItems,\n        itemSelector: `.${b('menu-item')}`,\n        moreButtonWidth: 28,\n    });\n\n    const moreButtonProps = useMemo(\n        () => ({\n            title: moreButtonTitle,\n        }),\n        [moreButtonTitle],\n    );\n\n    const dropdownMenuItems = useMemo(\n        () =>\n            hiddenItems.map(\n                (item) =>\n                    ({\n                        ...item,\n                        action: item.onClick,\n                    }) as DropdownMenuItem,\n            ),\n        [hiddenItems],\n    );\n\n    const shouldRenderLogo = view !== 'clear' && Boolean(logo);\n    const shouldRenderMenu = (menuItems?.length ?? 0) > 0;\n\n    return (\n        <footer className={b({desktop: true, 'with-divider': withDivider, view}, className)}>\n            {shouldRenderMenu && (\n                <div className={b('menu', {measured})} ref={menuContainerRef}>\n                    {visibleItems.length > 0 && (\n                        <Menu className={b('list')}>\n                            {visibleItems.map((item, index) => (\n                                <MenuItem\n                                    key={index}\n                                    {...item}\n                                    className={b('menu-item', item.className)}\n                                />\n                            ))}\n                        </Menu>\n                    )}\n                    {dropdownMenuItems.length > 0 && (\n                        <DropdownMenu\n                            items={dropdownMenuItems}\n                            switcherWrapperClassName={b('more-button')}\n                            popupProps={moreItemsPopupProps}\n                            defaultSwitcherProps={moreButtonProps}\n                            onSwitcherClick={onMoreButtonClick}\n                        />\n                    )}\n                </div>\n            )}\n            <div className={b('right')}>\n                <small className={b('copyright', {small: !menuItems?.length})}>{copyright}</small>\n                {shouldRenderLogo && (\n                    <div className={logoWrapperClassName}>\n                        <Logo {...logo!} />\n                    </div>\n                )}\n            </div>\n        </footer>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AAgBA,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC;AAElB,MAAM,MAAM,GAAoB,CAAC,EACpC,SAAS,EACT,SAAS,EAAE,iBAAiB,EAC5B,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,oBAAoB,EACpB,SAAS,GACZ,KAAI;;AACD,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC;AAErD,IAAA,MAAM,SAAS,GAAG,IAAI,KAAK,OAAO,GAAG,SAAS,GAAG,iBAAiB;IAElE,MAAM,EAAC,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG,iCAAiC,CAAC;AAC5E,QAAA,YAAY,EAAE,gBAAgB;AAC9B,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,YAAY,EAAE,CAAI,CAAA,EAAA,CAAC,CAAC,WAAW,CAAC,CAAE,CAAA;AAClC,QAAA,eAAe,EAAE,EAAE;AACtB,KAAA,CAAC;AAEF,IAAA,MAAM,eAAe,GAAG,OAAO,CAC3B,OAAO;AACH,QAAA,KAAK,EAAE,eAAe;AACzB,KAAA,CAAC,EACF,CAAC,eAAe,CAAC,CACpB;AAED,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAC7B,MACI,WAAW,CAAC,GAAG,CACX,CAAC,IAAI,MACD,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACO,IAAI,CAAA,EAAA,EACP,MAAM,EAAE,IAAI,CAAC,OAAO,EACF,CAAA,CAAA,CAC7B,EACL,CAAC,WAAW,CAAC,CAChB;IAED,MAAM,gBAAgB,GAAG,IAAI,KAAK,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;AAC1D,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAA,EAAA,GAAA,SAAS,aAAT,SAAS,KAAA,SAAA,GAAA,SAAA,GAAT,SAAS,CAAE,MAAM,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,CAAC,IAAI,CAAC;AAErD,IAAA,QACIA,cAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,IAAI,EAAC,EAAE,SAAS,CAAC,EAAA;AAC9E,QAAA,gBAAgB,KACbA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAE,GAAG,EAAE,gBAAgB,EAAA;YACvD,YAAY,CAAC,MAAM,GAAG,CAAC,KACpBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAA,EACrB,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC1BA,cAAC,CAAA,aAAA,CAAA,QAAQ,EACL,MAAA,CAAA,MAAA,CAAA,EAAA,GAAG,EAAE,KAAK,EAAA,EACN,IAAI,EAAA,EACR,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,EAC3C,CAAA,CAAA,CACL,CAAC,CACC,CACV;AACA,YAAA,iBAAiB,CAAC,MAAM,GAAG,CAAC,KACzBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACT,KAAK,EAAE,iBAAiB,EACxB,wBAAwB,EAAE,CAAC,CAAC,aAAa,CAAC,EAC1C,UAAU,EAAE,mBAAmB,EAC/B,oBAAoB,EAAE,eAAe,EACrC,eAAe,EAAE,iBAAiB,EACpC,CAAA,CACL,CACC,CACT;AACD,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAA;YACtBA,cAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,EAAC,KAAK,EAAE,EAAC,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,SAAA,GAAA,SAAA,GAAA,SAAS,CAAE,MAAM,CAAA,EAAC,CAAC,EAAG,EAAA,SAAS,CAAS;AACjF,YAAA,gBAAgB,KACbA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,oBAAoB,EAAA;gBAChCA,cAAC,CAAA,aAAA,CAAA,IAAI,oBAAK,IAAK,CAAA,CAAI,CACjB,CACT,CACC,CACD;AAEjB;;;;"}

package/build/esm/components/Footer/desktop/Footer.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".gn-footer_desktop{align-items:center;background:var(--g-color-base-background);display:flex;gap:var(--g-spacing-6);height:40px;justify-content:flex-end;padding:0 var(--g-spacing-6) 0 var(--g-spacing-3)}.gn-footer_desktop .gn-footer__menu{align-items:center;align-self:stretch;display:flex;flex:1;min-width:0;visibility:hidden}.gn-footer_desktop .gn-footer__menu_measured{visibility:visible}.gn-footer_desktop .gn-footer__list[class]{background-color:inherit;display:flex;height:100%;padding:0}.gn-footer_desktop .gn-footer__more-button svg{color:var(--g-color-text-secondary)}.gn-footer_desktop .gn-footer__right{align-items:center;display:flex;gap:var(--g-spacing-5)}.gn-footer_desktop .gn-footer__copyright{color:var(--g-color-text-secondary);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);white-space:nowrap}.gn-footer_desktop .gn-footer__copyright_small{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)}.gn-footer_with-divider{border-top:1px solid var(--g-color-line-generic)}.gn-footer_view_clear{background:transparent;z-index:-1}";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Footer.scss.js.map

package/build/esm/components/Footer/desktop/Footer.scss.js.map

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

package/build/esm/components/Footer/desktop/__stories__/Footer.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+import { Footer } from '..';
+import { FooterProps } from '../../types';
+declare const _default: Meta<typeof Footer>;
+export default _default;
+export declare const Showcase: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, FooterProps>;
+export declare const ManyItems: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, FooterProps>;
+export declare const ClearView: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, FooterProps>;

package/build/esm/components/Footer/desktop/__stories__/FooterShowcase.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FooterProps } from '../../types';
+import './FooterShowcase.scss';
+export declare function FooterShowcase({ className, ...footerProps }: FooterProps): React.JSX.Element;

package/build/esm/components/Footer/desktop/__stories__/moc.d.ts

@@ -0,0 +1,3 @@
+import { FooterMenuItem } from '../../types';
+export declare const menuItems: FooterMenuItem[];
+export declare const longMenuItems: FooterMenuItem[];

package/build/esm/components/Footer/desktop/__tests__/helpersPlaywright.d.ts

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

package/build/esm/components/Footer/desktop/constants/moreItemsPopupProps.js

@@ -0,0 +1,6 @@
+const moreItemsPopupProps = {
+    placement: 'top-start',
+};
+
+export { moreItemsPopupProps };
+//# sourceMappingURL=moreItemsPopupProps.js.map

package/build/esm/components/Footer/desktop/constants/moreItemsPopupProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"moreItemsPopupProps.js","sources":["../../../../../../../src/components/Footer/desktop/constants/moreItemsPopupProps.ts"],"sourcesContent":["import {PopupProps} from '@gravity-ui/uikit';\n\nexport const moreItemsPopupProps: PopupProps = {\n    placement: 'top-start',\n};\n"],"names":[],"mappings":"AAEa,MAAA,mBAAmB,GAAe;AAC3C,IAAA,SAAS,EAAE,WAAW;;;;;"}

package/build/esm/components/Footer/mobile/Footer.js

@@ -0,0 +1,45 @@
+import React__default, { useState, useRef, useCallback } from 'react';
+import { Ellipsis } from '@gravity-ui/icons';
+import { Button, Icon, Sheet, Menu } from '@gravity-ui/uikit';
+import { useOverflowingHorizontalListItems } from '../../../hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.js';
+import { Logo } from '../../Logo/Logo.js';
+import { block } from '../../utils/cn.js';
+import { MenuItem } from '../MenuItem/MenuItem.js';
+import './Footer.scss.js';
+
+const b = block('footer');
+const modalId = 'footer-more-items';
+const MobileFooter = ({ className, menuItems: providedMenuItems, withDivider, moreButtonTitle, onMoreButtonClick, view = 'normal', logo, logoWrapperClassName, copyright, }) => {
+    const [moreItemsMenuVisible, setMoreItemsMenuVisible] = useState(false);
+    const menuContainerRef = useRef(null);
+    const handleOpenMoreItemsMenu = useCallback((event) => {
+        setMoreItemsMenuVisible(true);
+        onMoreButtonClick === null || onMoreButtonClick === undefined ? undefined : onMoreButtonClick(event);
+    }, [onMoreButtonClick]);
+    const handleCloseMoreItemsMenu = useCallback(() => {
+        setMoreItemsMenuVisible(false);
+    }, []);
+    const menuItems = view === 'clear' ? undefined : providedMenuItems;
+    const { visibleItems, hiddenItems, measured } = useOverflowingHorizontalListItems({
+        containerRef: menuContainerRef,
+        items: menuItems,
+        itemSelector: `.${b('menu-item')}`,
+        moreButtonWidth: 28,
+    });
+    const renderMenu = (items) => (React__default.createElement(Menu, { className: b('list') }, items.map((item, index) => (React__default.createElement(MenuItem, Object.assign({ key: index }, item, { className: b('menu-item', item.className) }))))));
+    const shouldRenderLogo = view !== 'clear' && Boolean(logo);
+    return (React__default.createElement("footer", { className: b({ mobile: true, 'with-divider': withDivider, view }, className) },
+        React__default.createElement("div", { className: b('menu', { measured }), ref: menuContainerRef },
+            visibleItems.length > 0 && renderMenu(visibleItems),
+            hiddenItems.length > 0 && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Button, { view: "flat-secondary", size: "l", onClick: handleOpenMoreItemsMenu, title: moreButtonTitle },
+                    React__default.createElement(Icon, { data: Ellipsis, size: 16 })),
+                React__default.createElement(Sheet, { id: modalId, visible: moreItemsMenuVisible, className: b('modal'), contentClassName: b('modal-content'), onClose: handleCloseMoreItemsMenu }, renderMenu(hiddenItems))))),
+        React__default.createElement("div", { className: b('bottom-row') },
+            React__default.createElement("small", { className: b('copyright') }, copyright),
+            shouldRenderLogo && (React__default.createElement("div", { className: logoWrapperClassName },
+                React__default.createElement(Logo, Object.assign({}, logo)))))));
+};
+
+export { MobileFooter };
+//# sourceMappingURL=Footer.js.map

package/build/esm/components/Footer/mobile/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sources":["../../../../../../src/components/Footer/mobile/Footer.tsx"],"sourcesContent":["import React, {useCallback, useRef, useState} from 'react';\nimport type {FC} from 'react';\n\nimport {Ellipsis} from '@gravity-ui/icons';\nimport {Button, Icon, Menu, Sheet} from '@gravity-ui/uikit';\n\nimport {useOverflowingHorizontalListItems} from '../../../hooks/useOverflowingHorizontalListItems';\nimport {Logo} from '../../Logo';\nimport {block} from '../../utils/cn';\nimport {MenuItem} from '../MenuItem/MenuItem';\nimport {FooterMenuItem, FooterProps} from '../types';\n\nimport './Footer.scss';\n\nconst b = block('footer');\n\nconst modalId = 'footer-more-items';\n\nexport const MobileFooter: FC<FooterProps> = ({\n    className,\n    menuItems: providedMenuItems,\n    withDivider,\n    moreButtonTitle,\n    onMoreButtonClick,\n    view = 'normal',\n    logo,\n    logoWrapperClassName,\n    copyright,\n}) => {\n    const [moreItemsMenuVisible, setMoreItemsMenuVisible] = useState(false);\n    const menuContainerRef = useRef<HTMLDivElement>(null);\n\n    const handleOpenMoreItemsMenu = useCallback(\n        (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            setMoreItemsMenuVisible(true);\n            onMoreButtonClick?.(event);\n        },\n        [onMoreButtonClick],\n    );\n\n    const handleCloseMoreItemsMenu = useCallback(() => {\n        setMoreItemsMenuVisible(false);\n    }, []);\n\n    const menuItems = view === 'clear' ? undefined : providedMenuItems;\n\n    const {visibleItems, hiddenItems, measured} = useOverflowingHorizontalListItems({\n        containerRef: menuContainerRef,\n        items: menuItems,\n        itemSelector: `.${b('menu-item')}`,\n        moreButtonWidth: 28,\n    });\n\n    const renderMenu = (items: FooterMenuItem[]) => (\n        <Menu className={b('list')}>\n            {items.map((item, index) => (\n                <MenuItem key={index} {...item} className={b('menu-item', item.className)} />\n            ))}\n        </Menu>\n    );\n\n    const shouldRenderLogo = view !== 'clear' && Boolean(logo);\n\n    return (\n        <footer className={b({mobile: true, 'with-divider': withDivider, view}, className)}>\n            <div className={b('menu', {measured})} ref={menuContainerRef}>\n                {visibleItems.length > 0 && renderMenu(visibleItems)}\n                {hiddenItems.length > 0 && (\n                    <>\n                        <Button\n                            view=\"flat-secondary\"\n                            size=\"l\"\n                            onClick={handleOpenMoreItemsMenu}\n                            title={moreButtonTitle}\n                        >\n                            <Icon data={Ellipsis} size={16} />\n                        </Button>\n                        <Sheet\n                            id={modalId}\n                            visible={moreItemsMenuVisible}\n                            className={b('modal')}\n                            contentClassName={b('modal-content')}\n                            onClose={handleCloseMoreItemsMenu}\n                        >\n                            {renderMenu(hiddenItems)}\n                        </Sheet>\n                    </>\n                )}\n            </div>\n            <div className={b('bottom-row')}>\n                <small className={b('copyright')}>{copyright}</small>\n                {shouldRenderLogo && (\n                    <div className={logoWrapperClassName}>\n                        <Logo {...logo!} />\n                    </div>\n                )}\n            </div>\n        </footer>\n    );\n};\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/Footer/mobile/Footer.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".gn-footer_mobile{background:var(--g-color-base-background);display:flex;flex-direction:column;padding:var(--g-spacing-1) var(--g-spacing-6) var(--g-spacing-3) var(--g-spacing-3)}.gn-footer_mobile .gn-footer_with-divider{border-top:1px solid var(--g-color-line-generic)}.gn-footer_mobile .gn-footer__menu{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--g-spacing-1);visibility:hidden}.gn-footer_mobile .gn-footer__menu_measured{visibility:visible}.gn-footer_mobile .gn-footer__list[class]{background-color:inherit;display:flex;padding:0}.gn-footer_mobile .gn-footer__menu-item{box-sizing:border-box;padding:var(--g-spacing-2) var(--g-spacing-3)}.gn-footer_mobile .gn-footer__bottom-row{align-items:center;display:flex;justify-content:space-between}.gn-footer_mobile .gn-footer__copyright{color:var(--g-color-text-secondary);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);padding:0 var(--g-spacing-3);white-space:nowrap}.gn-footer__modal .gn-footer__menu-item{color:var(--g-color-text-primary);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);height:48px;line-height:var(--g-text-body-2-line-height)}.gn-footer_view_clear{background:transparent;z-index:-1}.gn-footer_view_clear .gn-footer__bottom-row{justify-content:flex-end}";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Footer.scss.js.map

package/build/esm/components/Footer/mobile/Footer.scss.js.map

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

package/build/esm/components/Footer/mobile/__stories__/MobileFooter.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+import { MobileFooter } from '..';
+import { FooterProps } from '../../types';
+declare const _default: Meta<typeof MobileFooter>;
+export default _default;
+export declare const Showcase: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, FooterProps>;
+export declare const ManyItems: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, FooterProps>;
+export declare const ClearView: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, FooterProps>;

package/build/esm/components/Footer/mobile/__stories__/MobileFooterShowcase.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FooterProps } from '../../types';
+import './MobileFooterShowcase.scss';
+export declare function MobileFooterShowcase({ className, ...footerProps }: FooterProps): React.JSX.Element;

package/build/esm/components/Footer/mobile/__stories__/moc.d.ts

@@ -0,0 +1,3 @@
+import { FooterMenuItem } from '../../types';
+export declare const menuItems: FooterMenuItem[];
+export declare const longMenuItems: FooterMenuItem[];

package/build/esm/components/Footer/mobile/__tests__/helpersPlaywright.d.ts

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

package/build/esm/components/FooterItem/FooterItem.js

@@ -0,0 +1,15 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { Item } from '../CompositeBar/Item/Item.js';
+import { ASIDE_HEADER_ICON_SIZE } from '../constants.js';
+import { block } from '../utils/cn.js';
+import './FooterItem.scss.js';
+
+const b = block('footer-item');
+const FooterItem = (_a) => {
+    var { item } = _a, props = __rest(_a, ["item"]);
+    return (React__default.createElement(Item, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_ICON_SIZE }, item), className: b({ compact: props.compact }), onItemClick: item.onItemClick, onItemClickCapture: item.onItemClickCapture })));
+};
+
+export { FooterItem };
+//# sourceMappingURL=FooterItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FooterItem.js","sources":["../../../../../src/components/FooterItem/FooterItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Item, ItemProps} from '../CompositeBar/Item/Item';\nimport {ASIDE_HEADER_ICON_SIZE} from '../constants';\nimport {block} from '../utils/cn';\n\nimport './FooterItem.scss';\n\nconst b = block('footer-item');\n\nexport interface FooterItemProps extends Omit<ItemProps, 'onItemClick' | 'onItemClickCapture'> {\n    compact: boolean;\n}\n\nexport const FooterItem: React.FC<FooterItemProps> = ({item, ...props}) => {\n    return (\n        <Item\n            {...props}\n            item={{iconSize: ASIDE_HEADER_ICON_SIZE, ...item}}\n            className={b({compact: props.compact})}\n            onItemClick={item.onItemClick}\n            onItemClickCapture={item.onItemClickCapture}\n        />\n    );\n};\n"],"names":["React"],"mappings":";;;;;;;AAQA,MAAM,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC;AAMjB,MAAA,UAAU,GAA8B,CAAC,EAAgB,KAAI;AAApB,IAAA,IAAA,EAAC,IAAI,EAAW,GAAA,EAAA,EAAN,KAAK,GAAA,MAAA,CAAA,EAAA,EAAf,QAAgB,CAAD;AACjE,IAAA,QACIA,cAAC,CAAA,aAAA,CAAA,IAAI,oBACG,KAAK,EAAA,EACT,IAAI,EAAG,MAAA,CAAA,MAAA,CAAA,EAAA,QAAQ,EAAE,sBAAsB,IAAK,IAAI,CAAA,EAChD,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAC,CAAC,EACtC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAAA,CAAA,CAC7C;AAEV;;;;"}

package/build/esm/components/FooterItem/FooterItem.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".gn-footer-item{height:40px;width:100%}";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=FooterItem.scss.js.map

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

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

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

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

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

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

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 import type { ListProps } from '@gravity-ui/uikit';
-import type { DrawerProps } from '../Drawer/Drawer';
 import type { HotkeysGroup, HotkeysListItem } from './types';
 import './HotkeysPanel.scss';
 export type HotkeysPanelProps<T> = {
@@ -20,6 +19,5 @@ export type HotkeysPanelProps<T> = {
     listClassName?: string;
     leftOffset?: number | string;
     topOffset?: number | string;
-    preventScrollBody?: DrawerProps['preventScrollBody'];
 } & Omit<ListProps<HotkeysListItem>, 'items' | 'emptyPlaceholder' | 'className' | 'size' | 'renderItem' | 'filterable' | 'autoFocus' | 'filterPlaceholder' | 'filterClassName' | 'filter' | 'filterItem' | 'onFilterEnd' | 'onFilterUpdate'>;
-export declare function HotkeysPanel<T = {}>({ visible, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, preventScrollBody, hotkeys, itemClassName, filterable, filterPlaceholder, title, emptyState, ...listProps }: HotkeysPanelProps<T>): React.JSX.Element;
+export declare function HotkeysPanel<T = {}>({ visible, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable, filterPlaceholder, title, emptyState, ...listProps }: HotkeysPanelProps<T>): React.JSX.Element;

package/build/esm/components/HotkeysPanel/HotkeysPanel.js

@@ -0,0 +1,33 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useMemo, useCallback } from 'react';
+import { Hotkey, TextInput, List } from '@gravity-ui/uikit';
+import { Drawer, DrawerItem } from '../Drawer/Drawer.js';
+import { block } from '../utils/cn.js';
+import { filterHotkeys } from './utils/filterHotkeys.js';
+import { flattenHotkeyGroups } from './utils/flattenHotkeyGroups.js';
+import './HotkeysPanel.scss.js';
+
+const b = block('hotkeys-panel');
+function HotkeysPanel(_a) {
+    var { visible, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable = true, filterPlaceholder, title, emptyState } = _a, listProps = __rest(_a, ["visible", "onClose", "leftOffset", "topOffset", "className", "drawerItemClassName", "filterClassName", "titleClassName", "listClassName", "itemContentClassName", "hotkeys", "itemClassName", "filterable", "filterPlaceholder", "title", "emptyState"]);
+    const [filter, setFilter] = useState('');
+    const hotkeysList = useMemo(() => {
+        const filteredHotkeys = filterHotkeys(hotkeys, filter);
+        return flattenHotkeyGroups(filteredHotkeys);
+    }, [hotkeys, filter]);
+    const renderItem = useCallback((item) => (React__default.createElement("div", { className: b('item-content', { group: item.group }, itemContentClassName), key: item.title },
+        item.title,
+        item.value && React__default.createElement(Hotkey, { className: b('hotkey'), value: item.value }))), []);
+    const drawerItemContent = (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("h2", { className: b('title', titleClassName) }, title),
+        filterable && (React__default.createElement(TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b('search', filterClassName), hasClear: true })),
+        React__default.createElement(List, Object.assign({ className: b('list', listClassName), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
+    return (React__default.createElement(Drawer, { className: b(null, className), onVeilClick: onClose, onEscape: onClose, style: {
+            left: leftOffset,
+            top: topOffset,
+        } },
+        React__default.createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b('drawer-item', drawerItemClassName), content: drawerItemContent })));
+}
+
+export { HotkeysPanel };
+//# sourceMappingURL=HotkeysPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HotkeysPanel.js","sources":["../../../../../src/components/HotkeysPanel/HotkeysPanel.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport type {ReactNode} from 'react';\n\nimport {Hotkey, List, TextInput} from '@gravity-ui/uikit';\nimport type {ListProps} from '@gravity-ui/uikit';\n\nimport {Drawer, DrawerItem} from '../Drawer/Drawer';\nimport {block} from '../utils/cn';\n\nimport type {HotkeysGroup, HotkeysListItem} from './types';\nimport {filterHotkeys} from './utils/filterHotkeys';\nimport {flattenHotkeyGroups} from './utils/flattenHotkeyGroups';\n\nimport './HotkeysPanel.scss';\n\nconst b = block('hotkeys-panel');\n\nexport type HotkeysPanelProps<T> = {\n    hotkeys: HotkeysGroup<T>[];\n    title?: ReactNode;\n    filterable?: boolean;\n    filterPlaceholder?: string;\n    emptyState?: ReactNode;\n    visible: boolean;\n    onClose?: () => void;\n    className?: string;\n    drawerItemClassName?: string;\n    filterClassName?: string;\n    titleClassName?: string;\n    itemContentClassName?: string;\n    listClassName?: string;\n    leftOffset?: number | string;\n    topOffset?: number | string;\n} & Omit<\n    ListProps<HotkeysListItem>,\n    | 'items'\n    | 'emptyPlaceholder'\n    | 'className'\n    | 'size'\n    | 'renderItem'\n    | 'filterable'\n    | 'autoFocus'\n    | 'filterPlaceholder'\n    | 'filterClassName'\n    | 'filter'\n    | 'filterItem'\n    | 'onFilterEnd'\n    | 'onFilterUpdate'\n>;\n\nexport function HotkeysPanel<T = {}>({\n    visible,\n    onClose,\n    leftOffset,\n    topOffset,\n    className,\n    drawerItemClassName,\n    filterClassName,\n    titleClassName,\n    listClassName,\n    itemContentClassName,\n    hotkeys,\n    itemClassName,\n    filterable = true,\n    filterPlaceholder,\n    title,\n    emptyState,\n    ...listProps\n}: HotkeysPanelProps<T>) {\n    const [filter, setFilter] = useState('');\n\n    const hotkeysList = useMemo(() => {\n        const filteredHotkeys = filterHotkeys(hotkeys, filter);\n        return flattenHotkeyGroups(filteredHotkeys);\n    }, [hotkeys, filter]);\n\n    const renderItem = useCallback(\n        (item: HotkeysListItem) => (\n            <div\n                className={b('item-content', {group: item.group}, itemContentClassName)}\n                key={item.title}\n            >\n                {item.title}\n                {item.value && <Hotkey className={b('hotkey')} value={item.value} />}\n            </div>\n        ),\n        [],\n    );\n\n    const drawerItemContent = (\n        <React.Fragment>\n            <h2 className={b('title', titleClassName)}>{title}</h2>\n            {filterable && (\n                <TextInput\n                    value={filter}\n                    onUpdate={setFilter}\n                    placeholder={filterPlaceholder}\n                    autoFocus\n                    className={b('search', filterClassName)}\n                    hasClear\n                />\n            )}\n            <List<HotkeysListItem>\n                className={b('list', listClassName)}\n                virtualized={false}\n                filterable={false}\n                items={hotkeysList}\n                renderItem={renderItem}\n                itemClassName={b('item', itemClassName)}\n                emptyPlaceholder={emptyState as string}\n                {...listProps}\n            />\n        </React.Fragment>\n    );\n\n    return (\n        <Drawer\n            className={b(null, className)}\n            onVeilClick={onClose}\n            onEscape={onClose}\n            style={{\n                left: leftOffset,\n                top: topOffset,\n            }}\n        >\n            <DrawerItem\n                id=\"hotkeys\"\n                visible={visible}\n                className={b('drawer-item', drawerItemClassName)}\n                content={drawerItemContent}\n            />\n        </Drawer>\n    );\n}\n"],"names":["React"],"mappings":";;;;;;;;;AAeA,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC;AAmC1B,SAAU,YAAY,CAAS,EAkBd,EAAA;AAlBc,IAAA,IAAA,EACjC,OAAO,EACP,OAAO,EACP,UAAU,EACV,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,OAAO,EACP,aAAa,EACb,UAAU,GAAG,IAAI,EACjB,iBAAiB,EACjB,KAAK,EACL,UAAU,EAAA,GAAA,EAES,EADhB,SAAS,GAAA,MAAA,CAAA,EAAA,EAjBqB,yPAkBpC,CADe;IAEZ,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;AAExC,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAK;QAC7B,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC;AACtD,QAAA,OAAO,mBAAmB,CAAC,eAAe,CAAC;AAC/C,KAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAErB,IAAA,MAAM,UAAU,GAAG,WAAW,CAC1B,CAAC,IAAqB,MAClBA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAC,CAAC,cAAc,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,EAAE,oBAAoB,CAAC,EACvE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAA;AAEd,QAAA,IAAI,CAAC,KAAK;QACV,IAAI,CAAC,KAAK,IAAIA,cAAC,CAAA,aAAA,CAAA,MAAM,IAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,CAAI,CAClE,CACT,EACD,EAAE,CACL;AAED,IAAA,MAAM,iBAAiB,IACnBA,cAAC,CAAA,aAAA,CAAAA,cAAK,CAAC,QAAQ,EAAA,IAAA;QACXA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,cAAc,CAAC,EAAG,EAAA,KAAK,CAAM;AACtD,QAAA,UAAU,KACPA,cAAC,CAAA,aAAA,CAAA,SAAS,EACN,EAAA,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAA,IAAA,EACT,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,eAAe,CAAC,EACvC,QAAQ,SACV,CACL;QACDA,cAAC,CAAA,aAAA,CAAA,IAAI,kBACD,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,aAAa,CAAC,EACnC,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,KAAK,EAAE,WAAW,EAClB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,CAAC,CAAC,MAAM,EAAE,aAAa,CAAC,EACvC,gBAAgB,EAAE,UAAoB,EAAA,EAClC,SAAS,CACf,CAAA,CACW,CACpB;IAED,QACIA,6BAAC,MAAM,EAAA,EACH,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,WAAW,EAAE,OAAO,EACpB,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE;AACH,YAAA,IAAI,EAAE,UAAU;AAChB,YAAA,GAAG,EAAE,SAAS;AACjB,SAAA,EAAA;QAEDA,cAAC,CAAA,aAAA,CAAA,UAAU,EACP,EAAA,EAAE,EAAC,SAAS,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,aAAa,EAAE,mBAAmB,CAAC,EAChD,OAAO,EAAE,iBAAiB,EAAA,CAC5B,CACG;AAEjB;;;;"}

package/build/esm/components/HotkeysPanel/HotkeysPanel.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".gn-hotkeys-panel{--hotkeys-panel-width:400px;--hotkeys-panel-vertical-padding:18px;--hotkeys-panel-horizontal-padding:24px;inset:0;position:fixed}.gn-hotkeys-panel__drawer-item{box-sizing:border-box;display:flex;flex-direction:column;padding:var(--hotkeys-panel-vertical-padding) 0;width:var(--hotkeys-panel-width)}.gn-hotkeys-panel__title{margin:0 var(--hotkeys-panel-horizontal-padding) 16px var(--hotkeys-panel-horizontal-padding)}.gn-hotkeys-panel__search{box-sizing:border-box;margin-bottom:14px;padding:0 var(--hotkeys-panel-horizontal-padding)}.gn-hotkeys-panel__list{flex:1;overflow-y:auto}.gn-hotkeys-panel__item{height:auto;padding:8px var(--hotkeys-panel-horizontal-padding)}.gn-hotkeys-panel__item.g-list__item_active{background:inherit}.gn-hotkeys-panel__item-content{align-items:baseline;color:var(--g-color-text-primary);display:flex;font-size:var(--g-text-body-1-font-size);justify-content:space-between;line-height:var(--g-text-body-1-line-height);width:100%}.gn-hotkeys-panel__item-content_group{font-size:var(--g-text-body-2-font-size);font-weight:500;line-height:var(--g-text-body-2-line-height)}.gn-hotkeys-panel__hotkey{color:var(--g-color-text-complementary)}";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=HotkeysPanel.scss.js.map