@alfalab/core-components-navigation-bar-private 1.0.1 → 1.0.2

package/index.css

@@ -7,27 +7,29 @@
     --gap-0: 0px;
     --gap-4: var(--gap-2xs);
     --gap-12: var(--gap-s);
-} .navigation-bar-private__header_1ony2 {
+} .navigation-bar-private__header_wqj9z {
     width: 100%;
     box-sizing: border-box;
-    transition: box-shadow 0.2s ease, background 0.2s ease
-} .navigation-bar-private__header_1ony2.navigation-bar-private__header_1ony2.navigation-bar-private__backgroundImage_1ony2 {
+    transition:
+        box-shadow 0.2s ease,
+        background 0.2s ease;
+} .navigation-bar-private__header_wqj9z.navigation-bar-private__header_wqj9z.navigation-bar-private__backgroundImage_wqj9z {
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
-    } .navigation-bar-private__mainLine_1ony2 {
+    } .navigation-bar-private__mainLine_wqj9z {
     display: flex;
     align-items: stretch;
     justify-content: space-between;
     z-index: 1;
     background-color: inherit;
-} .navigation-bar-private__mainLineSticky_1ony2 {
+} .navigation-bar-private__mainLineSticky_wqj9z {
     position: sticky;
     top: var(--gap-0);
-} .navigation-bar-private__mainLineWithImageBg_1ony2 {
+} .navigation-bar-private__mainLineWithImageBg_wqj9z {
     background-color: transparent;
     background-color: initial;
-} .navigation-bar-private__content_1ony2 {
+} .navigation-bar-private__content_wqj9z {
     color: var(--color-light-text-primary);
     display: flex;
     flex-flow: column nowrap;
@@ -35,28 +37,28 @@
     flex-grow: 1;
     align-self: baseline;
     box-sizing: border-box;
-    min-height: 48px
-} .navigation-bar-private__content_1ony2.navigation-bar-private__withBothAddons_1ony2,
-    .navigation-bar-private__content_1ony2.navigation-bar-private__withCompactTitle_1ony2 {
+    min-height: 48px;
+} .navigation-bar-private__content_wqj9z.navigation-bar-private__withBothAddons_wqj9z,
+    .navigation-bar-private__content_wqj9z.navigation-bar-private__withCompactTitle_wqj9z {
         font-size: 16px;
         line-height: 20px;
         font-weight: 500;
         align-self: center;
         padding-top: var(--gap-4);
-        padding-bottom: var(--gap-4)
-    } .navigation-bar-private__content_1ony2.navigation-bar-private__withBothAddons_1ony2 > .navigation-bar-private__children_1ony2,
-        .navigation-bar-private__content_1ony2.navigation-bar-private__withBothAddons_1ony2 > .navigation-bar-private__title_1ony2,
-        .navigation-bar-private__content_1ony2.navigation-bar-private__withCompactTitle_1ony2 > .navigation-bar-private__children_1ony2,
-        .navigation-bar-private__content_1ony2.navigation-bar-private__withCompactTitle_1ony2 > .navigation-bar-private__title_1ony2 {
+        padding-bottom: var(--gap-4);
+    } .navigation-bar-private__content_wqj9z.navigation-bar-private__withBothAddons_wqj9z > .navigation-bar-private__children_wqj9z,
+        .navigation-bar-private__content_wqj9z.navigation-bar-private__withCompactTitle_wqj9z > .navigation-bar-private__children_wqj9z,
+        .navigation-bar-private__content_wqj9z.navigation-bar-private__withBothAddons_wqj9z > .navigation-bar-private__title_wqj9z,
+        .navigation-bar-private__content_wqj9z.navigation-bar-private__withCompactTitle_wqj9z > .navigation-bar-private__title_wqj9z {
             -webkit-line-clamp: 1;
             word-break: break-all;
-        } .navigation-bar-private__content_1ony2.navigation-bar-private__contentOnBotDesktop_1ony2.navigation-bar-private__contentOnBotDesktop_1ony2 {
+        } .navigation-bar-private__content_wqj9z.navigation-bar-private__contentOnBotDesktop_wqj9z.navigation-bar-private__contentOnBotDesktop_wqj9z {
         padding-top: var(--gap-12);
-    } .navigation-bar-private__content_1ony2.navigation-bar-private__contentOnBotMobile_1ony2.navigation-bar-private__contentOnBotMobile_1ony2 {
+    } .navigation-bar-private__content_wqj9z.navigation-bar-private__contentOnBotMobile_wqj9z.navigation-bar-private__contentOnBotMobile_wqj9z {
         padding-top: var(--gap-12);
-    } .navigation-bar-private__title_1ony2 {
+    } .navigation-bar-private__title_wqj9z {
     word-break: break-word;
-} .navigation-bar-private__subtitle_1ony2 {
+} .navigation-bar-private__subtitle_wqj9z {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -67,11 +69,11 @@
 
     color: var(--color-light-text-secondary);
     word-break: break-all;
-} .navigation-bar-private__addonsWrapper_1ony2 {
+} .navigation-bar-private__addonsWrapper_wqj9z {
     display: flex;
-} .navigation-bar-private__rightAddons_1ony2 {
+} .navigation-bar-private__rightAddons_wqj9z {
     margin-left: auto;
-} .navigation-bar-private__addon_1ony2 {
+} .navigation-bar-private__addon_wqj9z {
     min-width: 48px;
     height: 48px;
     display: flex;
@@ -79,18 +81,18 @@
     align-items: center;
     flex-shrink: 0;
     pointer-events: all;
-} .navigation-bar-private__bottomAddons_1ony2 {
+} .navigation-bar-private__bottomAddons_wqj9z {
     pointer-events: all;
-} .navigation-bar-private__closer_1ony2 {
+} .navigation-bar-private__closer_wqj9z {
     margin-left: auto;
-} .navigation-bar-private__left_1ony2 {
+} .navigation-bar-private__left_wqj9z {
     text-align: left;
-} .navigation-bar-private__center_1ony2 {
+} .navigation-bar-private__center_wqj9z {
     text-align: center;
-} .navigation-bar-private__trim_1ony2 {
-    overflow: hidden
-} .navigation-bar-private__trim_1ony2 .navigation-bar-private__title_1ony2,
-    .navigation-bar-private__trim_1ony2 .navigation-bar-private__children_1ony2 {
+} .navigation-bar-private__trim_wqj9z {
+    overflow: hidden;
+} .navigation-bar-private__trim_wqj9z .navigation-bar-private__title_wqj9z,
+    .navigation-bar-private__trim_wqj9z .navigation-bar-private__children_wqj9z {
         -webkit-line-clamp: 2;
         display: -webkit-box;
         -webkit-box-orient: vertical;

package/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"header":"navigation-bar-private__header_1ony2","backgroundImage":"navigation-bar-private__backgroundImage_1ony2","mainLine":"navigation-bar-private__mainLine_1ony2","mainLineSticky":"navigation-bar-private__mainLineSticky_1ony2","mainLineWithImageBg":"navigation-bar-private__mainLineWithImageBg_1ony2","content":"navigation-bar-private__content_1ony2","withBothAddons":"navigation-bar-private__withBothAddons_1ony2","withCompactTitle":"navigation-bar-private__withCompactTitle_1ony2","children":"navigation-bar-private__children_1ony2","title":"navigation-bar-private__title_1ony2","contentOnBotDesktop":"navigation-bar-private__contentOnBotDesktop_1ony2","contentOnBotMobile":"navigation-bar-private__contentOnBotMobile_1ony2","subtitle":"navigation-bar-private__subtitle_1ony2","addonsWrapper":"navigation-bar-private__addonsWrapper_1ony2","rightAddons":"navigation-bar-private__rightAddons_1ony2","addon":"navigation-bar-private__addon_1ony2","bottomAddons":"navigation-bar-private__bottomAddons_1ony2","closer":"navigation-bar-private__closer_1ony2","left":"navigation-bar-private__left_1ony2","center":"navigation-bar-private__center_1ony2","trim":"navigation-bar-private__trim_1ony2"};
+var styles = {"header":"navigation-bar-private__header_wqj9z","backgroundImage":"navigation-bar-private__backgroundImage_wqj9z","mainLine":"navigation-bar-private__mainLine_wqj9z","mainLineSticky":"navigation-bar-private__mainLineSticky_wqj9z","mainLineWithImageBg":"navigation-bar-private__mainLineWithImageBg_wqj9z","content":"navigation-bar-private__content_wqj9z","withBothAddons":"navigation-bar-private__withBothAddons_wqj9z","withCompactTitle":"navigation-bar-private__withCompactTitle_wqj9z","children":"navigation-bar-private__children_wqj9z","title":"navigation-bar-private__title_wqj9z","contentOnBotDesktop":"navigation-bar-private__contentOnBotDesktop_wqj9z","contentOnBotMobile":"navigation-bar-private__contentOnBotMobile_wqj9z","subtitle":"navigation-bar-private__subtitle_wqj9z","addonsWrapper":"navigation-bar-private__addonsWrapper_wqj9z","rightAddons":"navigation-bar-private__rightAddons_wqj9z","addon":"navigation-bar-private__addon_wqj9z","bottomAddons":"navigation-bar-private__bottomAddons_wqj9z","closer":"navigation-bar-private__closer_wqj9z","left":"navigation-bar-private__left_wqj9z","center":"navigation-bar-private__center_wqj9z","trim":"navigation-bar-private__trim_wqj9z"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.header {\n    width: 100%;\n    box-sizing: border-box;\n    transition: box-shadow 0.2s ease, background 0.2s ease;\n\n    &.header.backgroundImage {\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: cover;\n    }\n}\n\n.mainLine {\n    display: flex;\n    align-items: stretch;\n    justify-content: space-between;\n    z-index: 1;\n    background-color: inherit;\n}\n\n.mainLineSticky {\n    position: sticky;\n    top: var(--gap-0);\n}\n\n.mainLineWithImageBg {\n    background-color: initial;\n}\n\n.content {\n    color: var(--color-light-text-primary);\n    display: flex;\n    flex-flow: column nowrap;\n    justify-content: center;\n    flex-grow: 1;\n    align-self: baseline;\n    box-sizing: border-box;\n    min-height: 48px;\n\n    &.withBothAddons,\n    &.withCompactTitle {\n        @mixin action_component;\n        align-self: center;\n        padding-top: var(--gap-4);\n        padding-bottom: var(--gap-4);\n\n        & > .children,\n        & > .title {\n            -webkit-line-clamp: 1;\n            word-break: break-all;\n        }\n    }\n\n    &.contentOnBotDesktop.contentOnBotDesktop {\n        padding-top: var(--gap-12);\n    }\n\n    &.contentOnBotMobile.contentOnBotMobile {\n        padding-top: var(--gap-12);\n    }\n}\n\n.title {\n    word-break: break-word;\n}\n\n.subtitle {\n    @mixin paragraph_primary_small;\n    @mixin row_limit 1;\n\n    color: var(--color-light-text-secondary);\n    word-break: break-all;\n}\n\n.addonsWrapper {\n    display: flex;\n}\n\n.rightAddons {\n    margin-left: auto;\n}\n\n.addon {\n    min-width: 48px;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    pointer-events: all;\n}\n\n.bottomAddons {\n    pointer-events: all;\n}\n\n.closer {\n    margin-left: auto;\n}\n\n.left {\n    text-align: left;\n}\n\n.center {\n    text-align: center;\n}\n\n.trim {\n    overflow: hidden;\n\n    & .title,\n    & .children {\n        @mixin row_limit 2;\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sCAAsC,CAAC,iBAAiB,CAAC,+CAA+C,CAAC,UAAU,CAAC,wCAAwC,CAAC,gBAAgB,CAAC,8CAA8C,CAAC,qBAAqB,CAAC,mDAAmD,CAAC,SAAS,CAAC,uCAAuC,CAAC,gBAAgB,CAAC,8CAA8C,CAAC,kBAAkB,CAAC,gDAAgD,CAAC,UAAU,CAAC,wCAAwC,CAAC,OAAO,CAAC,qCAAqC,CAAC,qBAAqB,CAAC,mDAAmD,CAAC,oBAAoB,CAAC,kDAAkD,CAAC,UAAU,CAAC,wCAAwC,CAAC,eAAe,CAAC,6CAA6C,CAAC,aAAa,CAAC,2CAA2C,CAAC,OAAO,CAAC,qCAAqC,CAAC,cAAc,CAAC,4CAA4C,CAAC,QAAQ,CAAC,sCAAsC,CAAC,MAAM,CAAC,oCAAoC,CAAC,QAAQ,CAAC,sCAAsC,CAAC,MAAM,CAAC,oCAAoC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.header {\n    width: 100%;\n    box-sizing: border-box;\n    transition:\n        box-shadow 0.2s ease,\n        background 0.2s ease;\n\n    &.header.backgroundImage {\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: cover;\n    }\n}\n\n.mainLine {\n    display: flex;\n    align-items: stretch;\n    justify-content: space-between;\n    z-index: 1;\n    background-color: inherit;\n}\n\n.mainLineSticky {\n    position: sticky;\n    top: var(--gap-0);\n}\n\n.mainLineWithImageBg {\n    background-color: initial;\n}\n\n.content {\n    color: var(--color-light-text-primary);\n    display: flex;\n    flex-flow: column nowrap;\n    justify-content: center;\n    flex-grow: 1;\n    align-self: baseline;\n    box-sizing: border-box;\n    min-height: 48px;\n\n    &.withBothAddons,\n    &.withCompactTitle {\n        @mixin action_component;\n        align-self: center;\n        padding-top: var(--gap-4);\n        padding-bottom: var(--gap-4);\n\n        & > .children,\n        & > .title {\n            -webkit-line-clamp: 1;\n            word-break: break-all;\n        }\n    }\n\n    &.contentOnBotDesktop.contentOnBotDesktop {\n        padding-top: var(--gap-12);\n    }\n\n    &.contentOnBotMobile.contentOnBotMobile {\n        padding-top: var(--gap-12);\n    }\n}\n\n.title {\n    word-break: break-word;\n}\n\n.subtitle {\n    @mixin paragraph_primary_small;\n    @mixin row_limit 1;\n\n    color: var(--color-light-text-secondary);\n    word-break: break-all;\n}\n\n.addonsWrapper {\n    display: flex;\n}\n\n.rightAddons {\n    margin-left: auto;\n}\n\n.addon {\n    min-width: 48px;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    pointer-events: all;\n}\n\n.bottomAddons {\n    pointer-events: all;\n}\n\n.closer {\n    margin-left: auto;\n}\n\n.left {\n    text-align: left;\n}\n\n.center {\n    text-align: center;\n}\n\n.trim {\n    overflow: hidden;\n\n    & .title,\n    & .children {\n        @mixin row_limit 2;\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sCAAsC,CAAC,iBAAiB,CAAC,+CAA+C,CAAC,UAAU,CAAC,wCAAwC,CAAC,gBAAgB,CAAC,8CAA8C,CAAC,qBAAqB,CAAC,mDAAmD,CAAC,SAAS,CAAC,uCAAuC,CAAC,gBAAgB,CAAC,8CAA8C,CAAC,kBAAkB,CAAC,gDAAgD,CAAC,UAAU,CAAC,wCAAwC,CAAC,OAAO,CAAC,qCAAqC,CAAC,qBAAqB,CAAC,mDAAmD,CAAC,oBAAoB,CAAC,kDAAkD,CAAC,UAAU,CAAC,wCAAwC,CAAC,eAAe,CAAC,6CAA6C,CAAC,aAAa,CAAC,2CAA2C,CAAC,OAAO,CAAC,qCAAqC,CAAC,cAAc,CAAC,4CAA4C,CAAC,QAAQ,CAAC,sCAAsC,CAAC,MAAM,CAAC,oCAAoC,CAAC,QAAQ,CAAC,sCAAsC,CAAC,MAAM,CAAC,oCAAoC,CAAC;;;;"}

package/modern/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { NavigationBarPrivateProps } from './types';
+import { type NavigationBarPrivateProps } from './types';
 export declare const NavigationBarPrivate: React.ForwardRefExoticComponent<NavigationBarPrivateProps & React.RefAttributes<HTMLDivElement>>;

package/modern/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport { BackArrowAddon } from './components/back-arrow-addon';\nimport { Closer } from './components/closer';\nimport type { ContentParams, NavigationBarPrivateProps } from './types';\n\nimport styles from './index.module.css';\n\nconst ADDONS_HEIGHT = 48;\n\nexport const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPrivateProps>(\n    (\n        {\n            addonClassName,\n            className,\n            contentClassName,\n            closerClassName,\n            leftAddons,\n            rightAddons,\n            bottomAddons,\n            bottomAddonsClassName,\n            children,\n            align = 'left',\n            trim = true,\n            title,\n            titleSize = 'default',\n            subtitle,\n            hasCloser,\n            closerProps = {},\n            hasBackButton,\n            backButtonClassName,\n            backButtonProps,\n            dataTestId,\n            imageUrl,\n            closerIcon,\n            onClose,\n            view,\n            scrollableParentRef,\n            sticky,\n            onBack,\n            dataName,\n            titleClassName,\n            titleRef,\n        },\n        ref,\n    ) => {\n        const [scrollTop, setScrollTop] = useState(0);\n        const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n        const bottomContentRef = useRef<HTMLDivElement>(null);\n        const headerRef = useRef<HTMLDivElement>(null);\n        const mainLinePaddingTopRef = useRef<string>('0px');\n        const leftAddonsRef = useRef<HTMLDivElement>(null);\n        const rightAddonsRef = useRef<HTMLDivElement>(null);\n\n        const isMobile = view === 'mobile';\n\n        const compactTitle = isMobile && titleSize === 'compact';\n        const hasLeftPart = Boolean(leftAddons || hasBackButton);\n        const hasRightPart = Boolean(rightAddons || hasCloser);\n        const hasContent = Boolean(title || children);\n        const withAnimation = Boolean(isMobile && hasLeftPart && sticky && !compactTitle);\n        const showContentOnTop = hasContent && (compactTitle || !hasLeftPart);\n        const showContentOnBot = hasContent && !compactTitle && hasLeftPart;\n        const showStaticContentOnTop = !withAnimation && showContentOnTop;\n        const showStaticContentOnBot = !withAnimation && showContentOnBot;\n        const showAnimatedContentOnTop =\n            withAnimation && showContentOnBot && scrollTop > ADDONS_HEIGHT;\n        const showAnimatedContentOnBot = withAnimation && showContentOnBot;\n        const headerPaddingTop = mainLinePaddingTopRef.current;\n\n        useLayoutEffect_SAFE_FOR_SSR(() => {\n            if (align === 'center' && (showStaticContentOnTop || showAnimatedContentOnTop)) {\n                const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;\n                const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;\n\n                const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);\n                const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;\n\n                setTitleMargin((prev) => {\n                    const newState = shouldAddLeftMargin\n                        ? { left: marginSize, right: 0 }\n                        : { left: 0, right: marginSize };\n\n                    const isStateChanged =\n                        prev.left !== newState.left || prev.right !== newState.right;\n\n                    return isStateChanged ? newState : prev;\n                });\n            }\n        }, [\n            align,\n            showStaticContentOnTop,\n            showAnimatedContentOnTop,\n            leftAddons,\n            rightAddons,\n            hasBackButton,\n            hasCloser,\n        ]);\n\n        useEffect(() => {\n            const parent = scrollableParentRef?.current;\n\n            const handleScroll = (ev: Event) => {\n                const divElement = ev.target as HTMLDivElement;\n\n                setScrollTop(divElement.scrollTop);\n            };\n\n            if (withAnimation && headerRef.current) {\n                mainLinePaddingTopRef.current = getComputedStyle(headerRef.current).paddingTop;\n            }\n\n            if (withAnimation && parent) {\n                parent.addEventListener('scroll', handleScroll);\n            }\n\n            return () => parent?.removeEventListener('scroll', handleScroll);\n        }, [scrollableParentRef, withAnimation]);\n\n        const renderBackButton = () => {\n            let textOpacity = 1;\n\n            if (withAnimation) {\n                const height = hasContent ? ADDONS_HEIGHT : ADDONS_HEIGHT / 2;\n\n                textOpacity = Math.max(0, 1 - scrollTop / height);\n            } else if (compactTitle) {\n                textOpacity = 0;\n            }\n\n            return (\n                <div className={cn(styles.addon, backButtonClassName)}>\n                    <BackArrowAddon\n                        data-test-id={getDataTestId(dataTestId, 'back-button')}\n                        {...backButtonProps}\n                        textOpacity={textOpacity}\n                        view={view}\n                        onClick={onBack}\n                    />\n                </div>\n            );\n        };\n\n        const renderContent = (args: ContentParams = {}) => {\n            const { extraClassName, wrapperRef, style, hidden, extraAlign } = args;\n\n            return (\n                <div\n                    style={{ ...style, visibility: hidden ? 'hidden' : 'visible' }}\n                    ref={wrapperRef}\n                    className={cn(\n                        styles.content,\n                        extraClassName,\n                        contentClassName,\n                        styles[extraAlign || align],\n                        {\n                            [styles.trim]: trim,\n                            [styles.withCompactTitle]: isMobile && compactTitle && hasContent,\n                        },\n                    )}\n                    aria-hidden={hidden}\n                >\n                    {children && <div className={styles.children}>{children}</div>}\n                    {title && (\n                        <div\n                            className={cn(styles.title, titleClassName)}\n                            data-test-id={hidden ? undefined : getDataTestId(dataTestId, 'title')}\n                            ref={titleRef}\n                        >\n                            {title}\n                        </div>\n                    )}\n                    {compactTitle && subtitle && (\n                        <div\n                            className={styles.subtitle}\n                            data-test-id={getDataTestId(dataTestId, 'subtitle')}\n                        >\n                            {subtitle}\n                        </div>\n                    )}\n                </div>\n            );\n        };\n\n        const renderCloser = () => (\n            <div className={cn(styles.addon, styles.closer, closerClassName)}>\n                <Closer\n                    view={view}\n                    icon={closerIcon}\n                    dataTestId={getDataTestId(dataTestId, 'closer')}\n                    onClose={onClose}\n                    {...closerProps}\n                />\n            </div>\n        );\n\n        return (\n            <div\n                ref={mergeRefs([ref, headerRef])}\n                className={cn(styles.header, className, { [styles.backgroundImage]: imageUrl })}\n                data-test-id={getDataTestId(dataTestId)}\n                style={{\n                    ...(imageUrl && { backgroundImage: `url(${imageUrl})` }),\n                    ...(withAnimation &&\n                        bottomContentRef.current && {\n                            top: -bottomContentRef.current.scrollHeight,\n                        }),\n                }}\n                data-name={dataName}\n            >\n                <div\n                    className={cn(styles.mainLine, {\n                        [styles.mainLineSticky]: withAnimation,\n                        [styles.mainLineWithImageBg]: imageUrl,\n                    })}\n                    style={{\n                        ...(withAnimation\n                            ? {\n                                  marginTop: `-${headerPaddingTop}`,\n                                  paddingTop: headerPaddingTop,\n                              }\n                            : null),\n                    }}\n                >\n                    {hasLeftPart && (\n                        <div className={styles.addonsWrapper} ref={leftAddonsRef}>\n                            {hasBackButton && renderBackButton()}\n                            {leftAddons && (\n                                <div className={cn(styles.addon, addonClassName)}>{leftAddons}</div>\n                            )}\n                        </div>\n                    )}\n\n                    {showStaticContentOnTop &&\n                        renderContent({\n                            ...(align === 'center'\n                                ? {\n                                      style: {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      },\n                                  }\n                                : null),\n                        })}\n\n                    {showAnimatedContentOnTop &&\n                        renderContent({\n                            extraClassName: styles.withBothAddons,\n                            style: {\n                                opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT),\n                                ...(align === 'center'\n                                    ? {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      }\n                                    : null),\n                            },\n                            extraAlign: 'center',\n                        })}\n\n                    {hasRightPart && (\n                        <div\n                            className={cn(styles.addonsWrapper, styles.rightAddons)}\n                            ref={rightAddonsRef}\n                        >\n                            {rightAddons && (\n                                <div className={cn(styles.addon, addonClassName)}>\n                                    {rightAddons}\n                                </div>\n                            )}\n\n                            {hasCloser && renderCloser()}\n                        </div>\n                    )}\n                </div>\n\n                {showAnimatedContentOnBot &&\n                    renderContent({\n                        wrapperRef: bottomContentRef,\n                        extraClassName: styles.underAddons,\n                        style: { opacity: Math.max(0, 1 - scrollTop / ADDONS_HEIGHT) },\n                        hidden: scrollTop / ADDONS_HEIGHT > 1,\n                        extraAlign: 'left',\n                    })}\n\n                {showStaticContentOnBot &&\n                    renderContent({\n                        extraClassName: cn({\n                            [styles.contentOnBotDesktop]: view === 'desktop',\n                            [styles.contentOnBotMobile]: isMobile,\n                        }),\n                        extraAlign: 'left',\n                    })}\n\n                {bottomAddons && (\n                    <div className={cn(styles.bottomAddons, bottomAddonsClassName)}>\n                        {bottomAddons}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\n\nNavigationBarPrivate.displayName = 'NavigationBarPrivate';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport { BackArrowAddon } from './components/back-arrow-addon';\nimport { Closer } from './components/closer';\nimport { type ContentParams, type NavigationBarPrivateProps } from './types';\n\nimport styles from './index.module.css';\n\nconst ADDONS_HEIGHT = 48;\n\nexport const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPrivateProps>(\n    (\n        {\n            addonClassName,\n            className,\n            contentClassName,\n            closerClassName,\n            leftAddons,\n            rightAddons,\n            bottomAddons,\n            bottomAddonsClassName,\n            children,\n            align = 'left',\n            trim = true,\n            title,\n            titleSize = 'default',\n            subtitle,\n            hasCloser,\n            closerProps = {},\n            hasBackButton,\n            backButtonClassName,\n            backButtonProps,\n            dataTestId,\n            imageUrl,\n            closerIcon,\n            onClose,\n            view,\n            scrollableParentRef,\n            sticky,\n            onBack,\n            dataName,\n            titleClassName,\n            titleRef,\n        },\n        ref,\n    ) => {\n        const [scrollTop, setScrollTop] = useState(0);\n        const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n        const bottomContentRef = useRef<HTMLDivElement>(null);\n        const headerRef = useRef<HTMLDivElement>(null);\n        const mainLinePaddingTopRef = useRef<string>('0px');\n        const leftAddonsRef = useRef<HTMLDivElement>(null);\n        const rightAddonsRef = useRef<HTMLDivElement>(null);\n\n        const isMobile = view === 'mobile';\n\n        const compactTitle = isMobile && titleSize === 'compact';\n        const hasLeftPart = Boolean(leftAddons || hasBackButton);\n        const hasRightPart = Boolean(rightAddons || hasCloser);\n        const hasContent = Boolean(title || children);\n        const withAnimation = Boolean(isMobile && hasLeftPart && sticky && !compactTitle);\n        const showContentOnTop = hasContent && (compactTitle || !hasLeftPart);\n        const showContentOnBot = hasContent && !compactTitle && hasLeftPart;\n        const showStaticContentOnTop = !withAnimation && showContentOnTop;\n        const showStaticContentOnBot = !withAnimation && showContentOnBot;\n        const showAnimatedContentOnTop =\n            withAnimation && showContentOnBot && scrollTop > ADDONS_HEIGHT;\n        const showAnimatedContentOnBot = withAnimation && showContentOnBot;\n        const headerPaddingTop = mainLinePaddingTopRef.current;\n\n        useLayoutEffect_SAFE_FOR_SSR(() => {\n            if (align === 'center' && (showStaticContentOnTop || showAnimatedContentOnTop)) {\n                const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;\n                const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;\n\n                const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);\n                const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;\n\n                setTitleMargin((prev) => {\n                    const newState = shouldAddLeftMargin\n                        ? { left: marginSize, right: 0 }\n                        : { left: 0, right: marginSize };\n\n                    const isStateChanged =\n                        prev.left !== newState.left || prev.right !== newState.right;\n\n                    return isStateChanged ? newState : prev;\n                });\n            }\n        }, [\n            align,\n            showStaticContentOnTop,\n            showAnimatedContentOnTop,\n            leftAddons,\n            rightAddons,\n            hasBackButton,\n            hasCloser,\n        ]);\n\n        useEffect(() => {\n            const parent = scrollableParentRef?.current;\n\n            const handleScroll = (ev: Event) => {\n                const divElement = ev.target as HTMLDivElement;\n\n                setScrollTop(divElement.scrollTop);\n            };\n\n            if (withAnimation && headerRef.current) {\n                mainLinePaddingTopRef.current = getComputedStyle(headerRef.current).paddingTop;\n            }\n\n            if (withAnimation && parent) {\n                parent.addEventListener('scroll', handleScroll);\n            }\n\n            return () => parent?.removeEventListener('scroll', handleScroll);\n        }, [scrollableParentRef, withAnimation]);\n\n        const renderBackButton = () => {\n            let textOpacity = 1;\n\n            if (withAnimation) {\n                const height = hasContent ? ADDONS_HEIGHT : ADDONS_HEIGHT / 2;\n\n                textOpacity = Math.max(0, 1 - scrollTop / height);\n            } else if (compactTitle) {\n                textOpacity = 0;\n            }\n\n            return (\n                <div className={cn(styles.addon, backButtonClassName)}>\n                    <BackArrowAddon\n                        data-test-id={getDataTestId(dataTestId, 'back-button')}\n                        {...backButtonProps}\n                        textOpacity={textOpacity}\n                        view={view}\n                        onClick={onBack}\n                    />\n                </div>\n            );\n        };\n\n        const renderContent = (args: ContentParams = {}) => {\n            const { extraClassName, wrapperRef, style, hidden, extraAlign } = args;\n\n            return (\n                <div\n                    style={{ ...style, visibility: hidden ? 'hidden' : 'visible' }}\n                    ref={wrapperRef}\n                    className={cn(\n                        styles.content,\n                        extraClassName,\n                        contentClassName,\n                        styles[extraAlign || align],\n                        {\n                            [styles.trim]: trim,\n                            [styles.withCompactTitle]: isMobile && compactTitle && hasContent,\n                        },\n                    )}\n                    aria-hidden={hidden}\n                >\n                    {children && <div className={styles.children}>{children}</div>}\n                    {title && (\n                        <div\n                            className={cn(styles.title, titleClassName)}\n                            data-test-id={hidden ? undefined : getDataTestId(dataTestId, 'title')}\n                            ref={titleRef}\n                        >\n                            {title}\n                        </div>\n                    )}\n                    {compactTitle && subtitle && (\n                        <div\n                            className={styles.subtitle}\n                            data-test-id={getDataTestId(dataTestId, 'subtitle')}\n                        >\n                            {subtitle}\n                        </div>\n                    )}\n                </div>\n            );\n        };\n\n        const renderCloser = () => (\n            <div className={cn(styles.addon, styles.closer, closerClassName)}>\n                <Closer\n                    view={view}\n                    icon={closerIcon}\n                    dataTestId={getDataTestId(dataTestId, 'closer')}\n                    onClose={onClose}\n                    {...closerProps}\n                />\n            </div>\n        );\n\n        return (\n            <div\n                ref={mergeRefs([ref, headerRef])}\n                className={cn(styles.header, className, { [styles.backgroundImage]: imageUrl })}\n                data-test-id={getDataTestId(dataTestId)}\n                style={{\n                    ...(imageUrl && { backgroundImage: `url(${imageUrl})` }),\n                    ...(withAnimation &&\n                        bottomContentRef.current && {\n                            top: -bottomContentRef.current.scrollHeight,\n                        }),\n                }}\n                data-name={dataName}\n            >\n                <div\n                    className={cn(styles.mainLine, {\n                        [styles.mainLineSticky]: withAnimation,\n                        [styles.mainLineWithImageBg]: imageUrl,\n                    })}\n                    style={{\n                        ...(withAnimation\n                            ? {\n                                  marginTop: `-${headerPaddingTop}`,\n                                  paddingTop: headerPaddingTop,\n                              }\n                            : null),\n                    }}\n                >\n                    {hasLeftPart && (\n                        <div className={styles.addonsWrapper} ref={leftAddonsRef}>\n                            {hasBackButton && renderBackButton()}\n                            {leftAddons && (\n                                <div className={cn(styles.addon, addonClassName)}>{leftAddons}</div>\n                            )}\n                        </div>\n                    )}\n\n                    {showStaticContentOnTop &&\n                        renderContent({\n                            ...(align === 'center'\n                                ? {\n                                      style: {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      },\n                                  }\n                                : null),\n                        })}\n\n                    {showAnimatedContentOnTop &&\n                        renderContent({\n                            extraClassName: styles.withBothAddons,\n                            style: {\n                                opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT),\n                                ...(align === 'center'\n                                    ? {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      }\n                                    : null),\n                            },\n                            extraAlign: 'center',\n                        })}\n\n                    {hasRightPart && (\n                        <div\n                            className={cn(styles.addonsWrapper, styles.rightAddons)}\n                            ref={rightAddonsRef}\n                        >\n                            {rightAddons && (\n                                <div className={cn(styles.addon, addonClassName)}>\n                                    {rightAddons}\n                                </div>\n                            )}\n\n                            {hasCloser && renderCloser()}\n                        </div>\n                    )}\n                </div>\n\n                {showAnimatedContentOnBot &&\n                    renderContent({\n                        wrapperRef: bottomContentRef,\n                        extraClassName: styles.underAddons,\n                        style: { opacity: Math.max(0, 1 - scrollTop / ADDONS_HEIGHT) },\n                        hidden: scrollTop / ADDONS_HEIGHT > 1,\n                        extraAlign: 'left',\n                    })}\n\n                {showStaticContentOnBot &&\n                    renderContent({\n                        extraClassName: cn({\n                            [styles.contentOnBotDesktop]: view === 'desktop',\n                            [styles.contentOnBotMobile]: isMobile,\n                        }),\n                        extraAlign: 'left',\n                    })}\n\n                {bottomAddons && (\n                    <div className={cn(styles.bottomAddons, bottomAddonsClassName)}>\n                        {bottomAddons}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\n\nNavigationBarPrivate.displayName = 'NavigationBarPrivate';\n"],"names":[],"mappings":"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"}

package/modern/components/back-arrow-addon/index.css

@@ -17,48 +17,48 @@
     --color-static-monochrome-white-4: rgba(255, 255, 255, 0.04);
 } :root {
     --navigation-bar-back-arrow-mobile-fill: var(--color-light-neutral-translucent-700);
-} .navigation-bar-private__component_1d17u {
+} .navigation-bar-private__component_10nk7 {
     height: 100%;
     background: var(--color-static-monochrome-white-4);
     -webkit-backdrop-filter: blur(10px);
             backdrop-filter: blur(10px);
     border-radius: var(--border-radius-pill);
-    min-width: 48px
-} .navigation-bar-private__component_1d17u svg > path {
+    min-width: 48px;
+} .navigation-bar-private__component_10nk7 svg > path {
         transition: fill 0.2s ease;
         fill: var(--color-light-neutral-translucent-1300);
-    } .navigation-bar-private__component_1d17u:hover svg > path {
+    } .navigation-bar-private__component_10nk7:hover svg > path {
             fill: var(--color-light-neutral-translucent-1300-hover);
-        } .navigation-bar-private__component_1d17u:active svg > path {
+        } .navigation-bar-private__component_10nk7:active svg > path {
             fill: var(--color-light-neutral-translucent-1300-press);
-        } .navigation-bar-private__mobileComponent_1d17u {
+        } .navigation-bar-private__mobileComponent_10nk7 {
     height: 32px;
     min-width: 32px;
     margin: var(--gap-0) var(--gap-8);
     -webkit-backdrop-filter: none;
             backdrop-filter: none;
     background: none;
-} .navigation-bar-private__flex_1d17u {
+} .navigation-bar-private__flex_10nk7 {
     display: flex;
     align-items: center;
-} .navigation-bar-private__iconWrapper_1d17u {
+} .navigation-bar-private__iconWrapper_10nk7 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     height: 48px;
     margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-12);
-    border-radius: var(--border-radius-circle)
-} .navigation-bar-private__iconWrapper_1d17u + .navigation-bar-private__text_1d17u {
+    border-radius: var(--border-radius-circle);
+} .navigation-bar-private__iconWrapper_10nk7 + .navigation-bar-private__text_10nk7 {
         margin-right: var(--gap-12);
-    } .navigation-bar-private__mobileWrapper_1d17u {
+    } .navigation-bar-private__mobileWrapper_10nk7 {
     width: 32px;
     height: 32px;
     background: var(--color-light-neutral-translucent-100);
     -webkit-backdrop-filter: blur(10px);
             backdrop-filter: blur(10px);
-    margin: var(--gap-0)
-} .navigation-bar-private__mobileWrapper_1d17u + .navigation-bar-private__text_1d17u {
+    margin: var(--gap-0);
+} .navigation-bar-private__mobileWrapper_10nk7 + .navigation-bar-private__text_10nk7 {
         margin: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-8);
-    } .navigation-bar-private__mobileWrapper_1d17u svg > path {
+    } .navigation-bar-private__mobileWrapper_10nk7 svg > path {
         fill: var(--navigation-bar-back-arrow-mobile-fill);
     }

package/modern/components/back-arrow-addon/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"navigation-bar-private__component_1d17u","mobileComponent":"navigation-bar-private__mobileComponent_1d17u","flex":"navigation-bar-private__flex_1d17u","iconWrapper":"navigation-bar-private__iconWrapper_1d17u","text":"navigation-bar-private__text_1d17u","mobileWrapper":"navigation-bar-private__mobileWrapper_1d17u"};
+const styles = {"component":"navigation-bar-private__component_10nk7","mobileComponent":"navigation-bar-private__mobileComponent_10nk7","flex":"navigation-bar-private__flex_10nk7","iconWrapper":"navigation-bar-private__iconWrapper_10nk7","text":"navigation-bar-private__text_10nk7","mobileWrapper":"navigation-bar-private__mobileWrapper_10nk7"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/back-arrow-addon/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/back-arrow-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/colors-monochrome.css';\n@import '../../vars.css';\n\n.component {\n    height: 100%;\n    background: var(--color-static-monochrome-white-4);\n    backdrop-filter: blur(10px);\n    border-radius: var(--border-radius-pill);\n    min-width: 48px;\n\n    & svg > path {\n        transition: fill 0.2s ease;\n        fill: var(--color-light-neutral-translucent-1300);\n    }\n\n    &:hover {\n        & svg > path {\n            fill: var(--color-light-neutral-translucent-1300-hover);\n        }\n    }\n\n    &:active {\n        & svg > path {\n            fill: var(--color-light-neutral-translucent-1300-press);\n        }\n    }\n}\n\n.mobileComponent {\n    height: 32px;\n    min-width: 32px;\n    margin: var(--gap-0) var(--gap-8);\n    backdrop-filter: none;\n    background: none;\n}\n\n.flex {\n    display: flex;\n    align-items: center;\n}\n\n.iconWrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-12);\n    border-radius: var(--border-radius-circle);\n\n    & + .text {\n        margin-right: var(--gap-12);\n    }\n}\n\n.mobileWrapper {\n    width: 32px;\n    height: 32px;\n    background: var(--color-light-neutral-translucent-100);\n    backdrop-filter: blur(10px);\n    margin: var(--gap-0);\n\n    & + .text {\n        margin: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-8);\n    }\n\n    & svg > path {\n        fill: var(--navigation-bar-back-arrow-mobile-fill);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,yCAAyC,CAAC,iBAAiB,CAAC,+CAA+C,CAAC,MAAM,CAAC,oCAAoC,CAAC,aAAa,CAAC,2CAA2C,CAAC,MAAM,CAAC,oCAAoC,CAAC,eAAe,CAAC,6CAA6C,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/back-arrow-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '@alfalab/core-components-vars/src/colors-monochrome.css';\n@import '../../vars.css';\n\n.component {\n    height: 100%;\n    background: var(--color-static-monochrome-white-4);\n    backdrop-filter: blur(10px);\n    border-radius: var(--border-radius-pill);\n    min-width: 48px;\n\n    & svg > path {\n        transition: fill 0.2s ease;\n        fill: var(--color-light-neutral-translucent-1300);\n    }\n\n    &:hover {\n        & svg > path {\n            fill: var(--color-light-neutral-translucent-1300-hover);\n        }\n    }\n\n    &:active {\n        & svg > path {\n            fill: var(--color-light-neutral-translucent-1300-press);\n        }\n    }\n}\n\n.mobileComponent {\n    height: 32px;\n    min-width: 32px;\n    margin: var(--gap-0) var(--gap-8);\n    backdrop-filter: none;\n    background: none;\n}\n\n.flex {\n    display: flex;\n    align-items: center;\n}\n\n.iconWrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-12);\n    border-radius: var(--border-radius-circle);\n\n    & + .text {\n        margin-right: var(--gap-12);\n    }\n}\n\n.mobileWrapper {\n    width: 32px;\n    height: 32px;\n    background: var(--color-light-neutral-translucent-100);\n    backdrop-filter: blur(10px);\n    margin: var(--gap-0);\n\n    & + .text {\n        margin: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-8);\n    }\n\n    & svg > path {\n        fill: var(--navigation-bar-back-arrow-mobile-fill);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,yCAAyC,CAAC,iBAAiB,CAAC,+CAA+C,CAAC,MAAM,CAAC,oCAAoC,CAAC,aAAa,CAAC,2CAA2C,CAAC,MAAM,CAAC,oCAAoC,CAAC,eAAe,CAAC,6CAA6C,CAAC;;;;"}

package/modern/components/closer/Component.d.ts

@@ -1,5 +1,5 @@
-import React, { ButtonHTMLAttributes, ElementType, FC } from 'react';
-import { IconButtonProps } from '@alfalab/core-components-icon-button/modern';
+import React, { type ButtonHTMLAttributes, type ElementType, type FC } from 'react';
+import { type IconButtonProps } from '@alfalab/core-components-icon-button/modern';
 export interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Вид компонента

package/modern/components/closer/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/closer/Component.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, ElementType, FC } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, IconButtonProps } from '@alfalab/core-components-icon-button';\nimport { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';\nimport { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\n\nconst colorStyles = {\n    default: defaultColors,\n    inverted: invertedColors,\n} as const;\n\nexport interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n    /**\n     * Вид компонента\n     */\n    view: 'desktop' | 'mobile';\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Позиция крестика\n     */\n    align?: 'left' | 'right';\n\n    /**\n     * Фиксирует крестик\n     */\n    sticky?: boolean;\n\n    /**\n     * Иконка\n     */\n    icon?: ElementType;\n\n    /**\n     * Набор цветов для компонента\n     */\n    colors?: IconButtonProps['colors'];\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Коллбэк закрытия.\n     */\n    onClose?: (\n        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n        reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick',\n    ) => void;\n}\n\nexport const Closer: FC<CloserProps> = ({\n    view,\n    className,\n    sticky,\n    icon = view === 'desktop' ? CrossHeavyMIcon : CrossMIcon,\n    colors = 'default',\n    dataTestId,\n    onClose,\n    ...restProps\n}) => {\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        onClose?.(event, 'closerClick');\n    };\n\n    return (\n        <div\n            className={cn(styles.closer, className, {\n                [styles.sticky]: sticky,\n            })}\n        >\n            <IconButton\n                size={view === 'desktop' ? 's' : 'xs'}\n                className={cn(styles.button, colorStyles[colors].button, {\n                    [colorStyles[colors].mobile]: view === 'mobile',\n                })}\n                aria-label='закрыть'\n                onClick={handleClick}\n                icon={icon}\n                colors={colors}\n                dataTestId={dataTestId}\n                {...restProps}\n            />\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,QAAQ,EAAE,cAAc;CAClB;AA+CG,MAAA,MAAM,GAAoB,CAAC,EACpC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,GAAG,IAAI,KAAK,SAAS,GAAG,eAAe,GAAG,UAAU,EACxD,MAAM,GAAG,SAAS,EAClB,UAAU,EACV,OAAO,EACP,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AAC/D,QAAA,OAAO,GAAG,KAAK,EAAE,aAAa,CAAC;AACnC,KAAC;IAED,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE;AACpC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;SAC1B,CAAC,EAAA;AAEF,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACP,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,EACrC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;gBACrD,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,IAAI,KAAK,QAAQ;aAClD,CAAC,EAAA,YAAA,EACS,4CAAS,EACpB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,KAClB,SAAS,EAAA,CACf,CACA;AAEd;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/closer/Component.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, type ElementType, type FC } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, type IconButtonProps } from '@alfalab/core-components-icon-button';\nimport { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';\nimport { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\n\nconst colorStyles = {\n    default: defaultColors,\n    inverted: invertedColors,\n} as const;\n\nexport interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n    /**\n     * Вид компонента\n     */\n    view: 'desktop' | 'mobile';\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Позиция крестика\n     */\n    align?: 'left' | 'right';\n\n    /**\n     * Фиксирует крестик\n     */\n    sticky?: boolean;\n\n    /**\n     * Иконка\n     */\n    icon?: ElementType;\n\n    /**\n     * Набор цветов для компонента\n     */\n    colors?: IconButtonProps['colors'];\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Коллбэк закрытия.\n     */\n    onClose?: (\n        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n        reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick',\n    ) => void;\n}\n\nexport const Closer: FC<CloserProps> = ({\n    view,\n    className,\n    sticky,\n    icon = view === 'desktop' ? CrossHeavyMIcon : CrossMIcon,\n    colors = 'default',\n    dataTestId,\n    onClose,\n    ...restProps\n}) => {\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        onClose?.(event, 'closerClick');\n    };\n\n    return (\n        <div\n            className={cn(styles.closer, className, {\n                [styles.sticky]: sticky,\n            })}\n        >\n            <IconButton\n                size={view === 'desktop' ? 's' : 'xs'}\n                className={cn(styles.button, colorStyles[colors].button, {\n                    [colorStyles[colors].mobile]: view === 'mobile',\n                })}\n                aria-label='закрыть'\n                onClick={handleClick}\n                icon={icon}\n                colors={colors}\n                dataTestId={dataTestId}\n                {...restProps}\n            />\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,QAAQ,EAAE,cAAc;CAClB;AA+CG,MAAA,MAAM,GAAoB,CAAC,EACpC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,GAAG,IAAI,KAAK,SAAS,GAAG,eAAe,GAAG,UAAU,EACxD,MAAM,GAAG,SAAS,EAClB,UAAU,EACV,OAAO,EACP,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AAC/D,QAAA,OAAO,GAAG,KAAK,EAAE,aAAa,CAAC;AACnC,KAAC;IAED,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE;AACpC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;SAC1B,CAAC,EAAA;AAEF,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACP,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,EACrC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;gBACrD,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,IAAI,KAAK,QAAQ;aAClD,CAAC,EAAA,YAAA,EACS,4CAAS,EACpB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,KAClB,SAAS,EAAA,CACf,CACA;AAEd;;;;"}

package/modern/components/closer/default.css

@@ -9,11 +9,11 @@
 :root {
     --navigation-bar-closer-mobile-color: var(--color-light-neutral-translucent-700);
 }
-.navigation-bar-private__button_8w8vd {
+.navigation-bar-private__button_3b6g1 {
     background: var(--color-light-monochrome-white-4);
-    color: var(--color-light-neutral-translucent-1300)
+    color: var(--color-light-neutral-translucent-1300);
 }
-.navigation-bar-private__button_8w8vd.navigation-bar-private__mobile_8w8vd {
+.navigation-bar-private__button_3b6g1.navigation-bar-private__mobile_3b6g1 {
         background: var(--color-light-neutral-translucent-100);
         color: var(--navigation-bar-closer-mobile-color);
     }

package/modern/components/closer/default.module.css.js

@@ -1,6 +1,6 @@
 import './default.css';
 
-const defaultColors = {"button":"navigation-bar-private__button_8w8vd","mobile":"navigation-bar-private__mobile_8w8vd"};
+const defaultColors = {"button":"navigation-bar-private__button_3b6g1","mobile":"navigation-bar-private__mobile_3b6g1"};
 
 export { defaultColors as default };
 //# sourceMappingURL=default.module.css.js.map

package/modern/components/closer/index.css

@@ -2,7 +2,7 @@
     --border-radius-circle: 50%;
 } :root {
     --gap-0: 0px;
-} .navigation-bar-private__closer_1xgvz {
+} .navigation-bar-private__closer_15jh6 {
     flex-shrink: 0;
     width: 48px;
     height: 48px;
@@ -10,12 +10,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
-} .navigation-bar-private__button_1xgvz {
+} .navigation-bar-private__button_15jh6 {
     -webkit-backdrop-filter: blur(10px);
             backdrop-filter: blur(10px);
-} .navigation-bar-private__button_1xgvz.navigation-bar-private__button_1xgvz {
+} .navigation-bar-private__button_15jh6.navigation-bar-private__button_15jh6 {
     border-radius: var(--border-radius-circle);
-} .navigation-bar-private__sticky_1xgvz {
+} .navigation-bar-private__sticky_15jh6 {
     position: sticky;
     top: var(--gap-0);
 }

package/modern/components/closer/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"closer":"navigation-bar-private__closer_1xgvz","button":"navigation-bar-private__button_1xgvz","sticky":"navigation-bar-private__sticky_1xgvz"};
+const styles = {"closer":"navigation-bar-private__closer_15jh6","button":"navigation-bar-private__button_15jh6","sticky":"navigation-bar-private__sticky_15jh6"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/closer/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/closer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.closer {\n    flex-shrink: 0;\n    width: 48px;\n    height: 48px;\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.button {\n    backdrop-filter: blur(10px);\n}\n\n.button.button {\n    border-radius: var(--border-radius-circle);\n}\n\n.sticky {\n    position: sticky;\n    top: var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,sCAAsC,CAAC,QAAQ,CAAC,sCAAsC,CAAC,QAAQ,CAAC,sCAAsC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/closer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.closer {\n    flex-shrink: 0;\n    width: 48px;\n    height: 48px;\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.button {\n    backdrop-filter: blur(10px);\n}\n\n.button.button {\n    border-radius: var(--border-radius-circle);\n}\n\n.sticky {\n    position: sticky;\n    top: var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,sCAAsC,CAAC,QAAQ,CAAC,sCAAsC,CAAC,QAAQ,CAAC,sCAAsC,CAAC;;;;"}

package/modern/components/closer/inverted.css

@@ -10,11 +10,11 @@
         --color-light-neutral-translucent-700-inverted
     );
 }
-.navigation-bar-private__button_n9hoq {
+.navigation-bar-private__button_qbrvw {
     background: var(--color-light-monochrome-white-4-inverted);
-    color: var(--color-light-neutral-translucent-1300-inverted)
+    color: var(--color-light-neutral-translucent-1300-inverted);
 }
-.navigation-bar-private__button_n9hoq.navigation-bar-private__mobile_n9hoq {
+.navigation-bar-private__button_qbrvw.navigation-bar-private__mobile_qbrvw {
         background: var(--color-light-neutral-translucent-100-inverted);
         color: var(--navigation-bar-closer-mobile-color-inverted);
     }

package/modern/components/closer/inverted.module.css.js

@@ -1,6 +1,6 @@
 import './inverted.css';
 
-const invertedColors = {"button":"navigation-bar-private__button_n9hoq","mobile":"navigation-bar-private__mobile_n9hoq"};
+const invertedColors = {"button":"navigation-bar-private__button_qbrvw","mobile":"navigation-bar-private__mobile_qbrvw"};
 
 export { invertedColors as default };
 //# sourceMappingURL=inverted.module.css.js.map

package/modern/index.css

@@ -7,27 +7,29 @@
     --gap-0: 0px;
     --gap-4: var(--gap-2xs);
     --gap-12: var(--gap-s);
-} .navigation-bar-private__header_1ony2 {
+} .navigation-bar-private__header_wqj9z {
     width: 100%;
     box-sizing: border-box;
-    transition: box-shadow 0.2s ease, background 0.2s ease
-} .navigation-bar-private__header_1ony2.navigation-bar-private__header_1ony2.navigation-bar-private__backgroundImage_1ony2 {
+    transition:
+        box-shadow 0.2s ease,
+        background 0.2s ease;
+} .navigation-bar-private__header_wqj9z.navigation-bar-private__header_wqj9z.navigation-bar-private__backgroundImage_wqj9z {
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
-    } .navigation-bar-private__mainLine_1ony2 {
+    } .navigation-bar-private__mainLine_wqj9z {
     display: flex;
     align-items: stretch;
     justify-content: space-between;
     z-index: 1;
     background-color: inherit;
-} .navigation-bar-private__mainLineSticky_1ony2 {
+} .navigation-bar-private__mainLineSticky_wqj9z {
     position: sticky;
     top: var(--gap-0);
-} .navigation-bar-private__mainLineWithImageBg_1ony2 {
+} .navigation-bar-private__mainLineWithImageBg_wqj9z {
     background-color: transparent;
     background-color: initial;
-} .navigation-bar-private__content_1ony2 {
+} .navigation-bar-private__content_wqj9z {
     color: var(--color-light-text-primary);
     display: flex;
     flex-flow: column nowrap;
@@ -35,28 +37,28 @@
     flex-grow: 1;
     align-self: baseline;
     box-sizing: border-box;
-    min-height: 48px
-} .navigation-bar-private__content_1ony2.navigation-bar-private__withBothAddons_1ony2,
-    .navigation-bar-private__content_1ony2.navigation-bar-private__withCompactTitle_1ony2 {
+    min-height: 48px;
+} .navigation-bar-private__content_wqj9z.navigation-bar-private__withBothAddons_wqj9z,
+    .navigation-bar-private__content_wqj9z.navigation-bar-private__withCompactTitle_wqj9z {
         font-size: 16px;
         line-height: 20px;
         font-weight: 500;
         align-self: center;
         padding-top: var(--gap-4);
-        padding-bottom: var(--gap-4)
-    } .navigation-bar-private__content_1ony2.navigation-bar-private__withBothAddons_1ony2 > .navigation-bar-private__children_1ony2,
-        .navigation-bar-private__content_1ony2.navigation-bar-private__withBothAddons_1ony2 > .navigation-bar-private__title_1ony2,
-        .navigation-bar-private__content_1ony2.navigation-bar-private__withCompactTitle_1ony2 > .navigation-bar-private__children_1ony2,
-        .navigation-bar-private__content_1ony2.navigation-bar-private__withCompactTitle_1ony2 > .navigation-bar-private__title_1ony2 {
+        padding-bottom: var(--gap-4);
+    } .navigation-bar-private__content_wqj9z.navigation-bar-private__withBothAddons_wqj9z > .navigation-bar-private__children_wqj9z,
+        .navigation-bar-private__content_wqj9z.navigation-bar-private__withCompactTitle_wqj9z > .navigation-bar-private__children_wqj9z,
+        .navigation-bar-private__content_wqj9z.navigation-bar-private__withBothAddons_wqj9z > .navigation-bar-private__title_wqj9z,
+        .navigation-bar-private__content_wqj9z.navigation-bar-private__withCompactTitle_wqj9z > .navigation-bar-private__title_wqj9z {
             -webkit-line-clamp: 1;
             word-break: break-all;
-        } .navigation-bar-private__content_1ony2.navigation-bar-private__contentOnBotDesktop_1ony2.navigation-bar-private__contentOnBotDesktop_1ony2 {
+        } .navigation-bar-private__content_wqj9z.navigation-bar-private__contentOnBotDesktop_wqj9z.navigation-bar-private__contentOnBotDesktop_wqj9z {
         padding-top: var(--gap-12);
-    } .navigation-bar-private__content_1ony2.navigation-bar-private__contentOnBotMobile_1ony2.navigation-bar-private__contentOnBotMobile_1ony2 {
+    } .navigation-bar-private__content_wqj9z.navigation-bar-private__contentOnBotMobile_wqj9z.navigation-bar-private__contentOnBotMobile_wqj9z {
         padding-top: var(--gap-12);
-    } .navigation-bar-private__title_1ony2 {
+    } .navigation-bar-private__title_wqj9z {
     word-break: break-word;
-} .navigation-bar-private__subtitle_1ony2 {
+} .navigation-bar-private__subtitle_wqj9z {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -67,11 +69,11 @@
 
     color: var(--color-light-text-secondary);
     word-break: break-all;
-} .navigation-bar-private__addonsWrapper_1ony2 {
+} .navigation-bar-private__addonsWrapper_wqj9z {
     display: flex;
-} .navigation-bar-private__rightAddons_1ony2 {
+} .navigation-bar-private__rightAddons_wqj9z {
     margin-left: auto;
-} .navigation-bar-private__addon_1ony2 {
+} .navigation-bar-private__addon_wqj9z {
     min-width: 48px;
     height: 48px;
     display: flex;
@@ -79,18 +81,18 @@
     align-items: center;
     flex-shrink: 0;
     pointer-events: all;
-} .navigation-bar-private__bottomAddons_1ony2 {
+} .navigation-bar-private__bottomAddons_wqj9z {
     pointer-events: all;
-} .navigation-bar-private__closer_1ony2 {
+} .navigation-bar-private__closer_wqj9z {
     margin-left: auto;
-} .navigation-bar-private__left_1ony2 {
+} .navigation-bar-private__left_wqj9z {
     text-align: left;
-} .navigation-bar-private__center_1ony2 {
+} .navigation-bar-private__center_wqj9z {
     text-align: center;
-} .navigation-bar-private__trim_1ony2 {
-    overflow: hidden
-} .navigation-bar-private__trim_1ony2 .navigation-bar-private__title_1ony2,
-    .navigation-bar-private__trim_1ony2 .navigation-bar-private__children_1ony2 {
+} .navigation-bar-private__trim_wqj9z {
+    overflow: hidden;
+} .navigation-bar-private__trim_wqj9z .navigation-bar-private__title_wqj9z,
+    .navigation-bar-private__trim_wqj9z .navigation-bar-private__children_wqj9z {
         -webkit-line-clamp: 2;
         display: -webkit-box;
         -webkit-box-orient: vertical;

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"header":"navigation-bar-private__header_1ony2","backgroundImage":"navigation-bar-private__backgroundImage_1ony2","mainLine":"navigation-bar-private__mainLine_1ony2","mainLineSticky":"navigation-bar-private__mainLineSticky_1ony2","mainLineWithImageBg":"navigation-bar-private__mainLineWithImageBg_1ony2","content":"navigation-bar-private__content_1ony2","withBothAddons":"navigation-bar-private__withBothAddons_1ony2","withCompactTitle":"navigation-bar-private__withCompactTitle_1ony2","children":"navigation-bar-private__children_1ony2","title":"navigation-bar-private__title_1ony2","contentOnBotDesktop":"navigation-bar-private__contentOnBotDesktop_1ony2","contentOnBotMobile":"navigation-bar-private__contentOnBotMobile_1ony2","subtitle":"navigation-bar-private__subtitle_1ony2","addonsWrapper":"navigation-bar-private__addonsWrapper_1ony2","rightAddons":"navigation-bar-private__rightAddons_1ony2","addon":"navigation-bar-private__addon_1ony2","bottomAddons":"navigation-bar-private__bottomAddons_1ony2","closer":"navigation-bar-private__closer_1ony2","left":"navigation-bar-private__left_1ony2","center":"navigation-bar-private__center_1ony2","trim":"navigation-bar-private__trim_1ony2"};
+const styles = {"header":"navigation-bar-private__header_wqj9z","backgroundImage":"navigation-bar-private__backgroundImage_wqj9z","mainLine":"navigation-bar-private__mainLine_wqj9z","mainLineSticky":"navigation-bar-private__mainLineSticky_wqj9z","mainLineWithImageBg":"navigation-bar-private__mainLineWithImageBg_wqj9z","content":"navigation-bar-private__content_wqj9z","withBothAddons":"navigation-bar-private__withBothAddons_wqj9z","withCompactTitle":"navigation-bar-private__withCompactTitle_wqj9z","children":"navigation-bar-private__children_wqj9z","title":"navigation-bar-private__title_wqj9z","contentOnBotDesktop":"navigation-bar-private__contentOnBotDesktop_wqj9z","contentOnBotMobile":"navigation-bar-private__contentOnBotMobile_wqj9z","subtitle":"navigation-bar-private__subtitle_wqj9z","addonsWrapper":"navigation-bar-private__addonsWrapper_wqj9z","rightAddons":"navigation-bar-private__rightAddons_wqj9z","addon":"navigation-bar-private__addon_wqj9z","bottomAddons":"navigation-bar-private__bottomAddons_wqj9z","closer":"navigation-bar-private__closer_wqj9z","left":"navigation-bar-private__left_wqj9z","center":"navigation-bar-private__center_wqj9z","trim":"navigation-bar-private__trim_wqj9z"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map