@alfalab/core-components-navigation-bar 2.0.1 → 2.0.2

package/Component.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export interface NavigationBarProps {
     /**
      * Заголовок

package/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport styles from './index.module.css';\n\nexport interface NavigationBarProps {\n    /**\n     * Заголовок\n     */\n    title?: string;\n\n    /**\n     * Подзаголовок\n     */\n    subtitle?: string;\n\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Выравнивание заголовка\n     * @default center\n     */\n    align?: 'left' | 'center';\n\n    /**\n     * Цвет фона\n     */\n    backgroundColor?: string;\n\n    /**\n     * Наличие бордера\n     */\n    border?: boolean;\n\n    /**\n     * Фиксирует шапку\n     */\n    sticky?: boolean;\n\n    /**\n     * Слот снизу\n     */\n    bottomAddons?: ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: ReactNode;\n\n    /**\n     * Дополнительный класс для контента\n     */\n    contentClassName?: string;\n\n    /**\n     * Дополнительный класс для обертки контента\n     */\n    contentWrapperClassName?: string;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для правого аддона\n     */\n    rightAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для левого аддона\n     */\n    leftAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для нижнего аддона\n     */\n    bottomAddonsClassName?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования.\n     */\n    dataTestId?: string;\n}\n\nexport const NavigationBar = forwardRef<HTMLDivElement, NavigationBarProps>(\n    (\n        {\n            align = 'center',\n            rightAddons,\n            leftAddons,\n            bottomAddons,\n            sticky,\n            border,\n            subtitle,\n            title,\n            children,\n            backgroundColor = 'var(--color-light-base-bg-primary)',\n            contentWrapperClassName,\n            className,\n            contentClassName,\n            rightAddonsClassName,\n            leftAddonsClassName,\n            bottomAddonsClassName,\n            dataTestId,\n        },\n        ref,\n    ) => {\n        const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n        const leftAddonsRef = useRef<HTMLDivElement>(null);\n        const rightAddonsRef = useRef<HTMLDivElement>(null);\n        const hasLeftAddons = leftAddons && align !== 'left';\n\n        // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов\n        useEffect(() => {\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 = prev.left !== newState.left || prev.right !== newState.right;\n\n                return isStateChanged ? newState : prev;\n            });\n        }, [hasLeftAddons, leftAddons, rightAddons]);\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    {\n                        [styles.border]: border,\n                        [styles.sticky]: sticky,\n                    },\n                    className,\n                )}\n                style={{\n                    ...(backgroundColor && { backgroundColor }),\n                }}\n                data-test-id={dataTestId}\n            >\n                <div className={cn(styles.mainLine, styles[align], contentClassName)}>\n                    {hasLeftAddons && (\n                        <div className={cn(styles.addons, leftAddonsClassName)} ref={leftAddonsRef}>\n                            {leftAddons}\n                        </div>\n                    )}\n\n                    {children && <div className={styles.children}>{children}</div>}\n\n                    {title && (\n                        <div\n                            className={cn(styles.content, contentWrapperClassName, {\n                                [styles[align]]: !hasLeftAddons,\n                            })}\n                            style={{\n                                ...(align === 'center'\n                                    ? {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      }\n                                    : null),\n                            }}\n                        >\n                            <div\n                                className={cn(styles.title, {\n                                    [styles[align]]: !hasLeftAddons && !subtitle,\n                                })}\n                                data-test-id={getDataTestId(dataTestId, 'title')}\n                            >\n                                {title}\n                            </div>\n\n                            {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                    {rightAddons && (\n                        <div\n                            className={cn(styles.rightAddons, styles.addons, rightAddonsClassName)}\n                            ref={rightAddonsRef}\n                        >\n                            {rightAddons}\n                        </div>\n                    )}\n                </div>\n\n                {bottomAddons && <div className={bottomAddonsClassName}>{bottomAddons}</div>}\n            </div>\n        );\n    },\n);\n\nNavigationBar.displayName = 'NavigationBar';\n"],"names":["forwardRef","useState","useRef","useEffect","React","cn","styles","__assign","getDataTestId"],"mappings":";;;;;;;;;;;;;;;IA+Fa,aAAa,GAAGA,gBAAU,CACnC,UACI,EAkBC,EACD,GAAG,EAAA;;QAlBC,EAAgB,GAAA,EAAA,CAAA,KAAA,EAAhB,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,QAAQ,GAAA,EAAA,EAChB,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,YAAY,kBAAA,EACZ,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,QAAQ,cAAA,EACR,EAAA,GAAA,EAAA,CAAA,eAAsD,EAAtD,eAAe,GAAG,EAAA,KAAA,MAAA,GAAA,oCAAoC,GAAA,EAAA,EACtD,uBAAuB,GAAA,EAAA,CAAA,uBAAA,EACvB,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,gBAAgB,GAAA,EAAA,CAAA,gBAAA,EAChB,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,qBAAqB,GAAA,EAAA,CAAA,qBAAA,EACrB,UAAU,GAAA,EAAA,CAAA,UAAA;AAIR,IAAA,IAAA,KAAgCC,cAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAA9D,WAAW,QAAA,EAAE,cAAc,QAAmC;AACrE,IAAA,IAAM,aAAa,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAClD,IAAA,IAAM,cAAc,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,IAAM,aAAa,GAAG,UAAU,IAAI,KAAK,KAAK,MAAM;;AAGpD,IAAAC,eAAS,CAAC,YAAA;;QACN,IAAM,eAAe,GAAG,CAAA,CAAA,EAAA,GAAA,aAAa,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,KAAI,CAAC;QAC/D,IAAM,gBAAgB,GAAG,CAAA,CAAA,EAAA,GAAA,cAAc,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,KAAI,CAAC;QAEjE,IAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,GAAG,eAAe,CAAC;AAC/D,QAAA,IAAM,mBAAmB,GAAG,gBAAgB,GAAG,eAAe,GAAG,CAAC;QAElE,cAAc,CAAC,UAAC,IAAI,EAAA;YAChB,IAAM,QAAQ,GAAG;kBACX,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;kBAC5B,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE;AAEpC,YAAA,IAAM,cAAc,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK;YAEnF,OAAO,cAAc,GAAG,QAAQ,GAAG,IAAI;AAC3C,SAAC,CAAC;KACL,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC;AAE5C,IAAA,QACIC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,mBAAE,CACTC,YAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAEZ,YAAA,EAAA,CAACA,YAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACvB,YAAA,EAAA,CAACA,YAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AAE3B,YAAA,EAAA,GAAA,SAAS,CACZ,EACD,KAAK,EAAAC,cAAA,CAAA,EAAA,GACG,eAAe,IAAI,EAAE,eAAe,EAAA,eAAA,EAAE,oBAEhC,UAAU,EAAA;AAExB,QAAAH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,QAAQ,EAAEA,YAAM,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC,EAAA;YAC/D,aAAa,KACVF,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,EAAE,GAAG,EAAE,aAAa,EACrE,EAAA,UAAU,CACT,CACT;YAEA,QAAQ,IAAIF,8CAAK,SAAS,EAAEE,YAAM,CAAC,QAAQ,EAAG,EAAA,QAAQ,CAAO;YAE7D,KAAK,KACFF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,OAAO,EAAE,uBAAuB,GAAA,EAAA,GAAA,EAAA;AACjD,oBAAA,EAAA,CAACA,YAAM,CAAC,KAAK,CAAC,CAAA,GAAG,CAAC,aAAa;AACjC,oBAAA,EAAA,EAAA,EACF,KAAK,EAAAC,cAAA,CAAA,EAAA,GACG,KAAK,KAAK;AACV,sBAAE;wBACI,UAAU,EAAE,WAAW,CAAC,IAAI;wBAC5B,WAAW,EAAE,WAAW,CAAC,KAAK;AACjC;sBACD,IAAI,EAAC,EAAA;AAGf,gBAAAH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,KAAK,GAAA,EAAA,GAAA,EAAA;wBACtB,EAAC,CAAAA,YAAM,CAAC,KAAK,CAAC,IAAG,CAAC,aAAa,IAAI,CAAC,QAAQ;4BAC9C,EACY,cAAA,EAAAE,kCAAa,CAAC,UAAU,EAAE,OAAO,CAAC,EAAA,EAE/C,KAAK,CACJ;gBAEL,QAAQ,KACLJ,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEE,YAAM,CAAC,QAAQ,EACZ,cAAA,EAAAE,kCAAa,CAAC,UAAU,EAAE,UAAU,CAAC,EAAA,EAElD,QAAQ,CACP,CACT,CACC,CACT;YAEA,WAAW,KACRJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,WAAW,EAAEA,YAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,EACtE,GAAG,EAAE,cAAc,EAElB,EAAA,WAAW,CACV,CACT,CACC;QAEL,YAAY,IAAIF,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,qBAAqB,IAAG,YAAY,CAAO,CAC1E;AAEd,CAAC;AAGL,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
+{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { forwardRef, type ReactNode, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport styles from './index.module.css';\n\nexport interface NavigationBarProps {\n    /**\n     * Заголовок\n     */\n    title?: string;\n\n    /**\n     * Подзаголовок\n     */\n    subtitle?: string;\n\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Выравнивание заголовка\n     * @default center\n     */\n    align?: 'left' | 'center';\n\n    /**\n     * Цвет фона\n     */\n    backgroundColor?: string;\n\n    /**\n     * Наличие бордера\n     */\n    border?: boolean;\n\n    /**\n     * Фиксирует шапку\n     */\n    sticky?: boolean;\n\n    /**\n     * Слот снизу\n     */\n    bottomAddons?: ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: ReactNode;\n\n    /**\n     * Дополнительный класс для контента\n     */\n    contentClassName?: string;\n\n    /**\n     * Дополнительный класс для обертки контента\n     */\n    contentWrapperClassName?: string;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для правого аддона\n     */\n    rightAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для левого аддона\n     */\n    leftAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для нижнего аддона\n     */\n    bottomAddonsClassName?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования.\n     */\n    dataTestId?: string;\n}\n\nexport const NavigationBar = forwardRef<HTMLDivElement, NavigationBarProps>(\n    (\n        {\n            align = 'center',\n            rightAddons,\n            leftAddons,\n            bottomAddons,\n            sticky,\n            border,\n            subtitle,\n            title,\n            children,\n            backgroundColor = 'var(--color-light-base-bg-primary)',\n            contentWrapperClassName,\n            className,\n            contentClassName,\n            rightAddonsClassName,\n            leftAddonsClassName,\n            bottomAddonsClassName,\n            dataTestId,\n        },\n        ref,\n    ) => {\n        const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n        const leftAddonsRef = useRef<HTMLDivElement>(null);\n        const rightAddonsRef = useRef<HTMLDivElement>(null);\n        const hasLeftAddons = leftAddons && align !== 'left';\n\n        // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов\n        useEffect(() => {\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 = prev.left !== newState.left || prev.right !== newState.right;\n\n                return isStateChanged ? newState : prev;\n            });\n        }, [hasLeftAddons, leftAddons, rightAddons]);\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    {\n                        [styles.border]: border,\n                        [styles.sticky]: sticky,\n                    },\n                    className,\n                )}\n                style={{\n                    ...(backgroundColor && { backgroundColor }),\n                }}\n                data-test-id={dataTestId}\n            >\n                <div className={cn(styles.mainLine, styles[align], contentClassName)}>\n                    {hasLeftAddons && (\n                        <div className={cn(styles.addons, leftAddonsClassName)} ref={leftAddonsRef}>\n                            {leftAddons}\n                        </div>\n                    )}\n\n                    {children && <div className={styles.children}>{children}</div>}\n\n                    {title && (\n                        <div\n                            className={cn(styles.content, contentWrapperClassName, {\n                                [styles[align]]: !hasLeftAddons,\n                            })}\n                            style={{\n                                ...(align === 'center'\n                                    ? {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      }\n                                    : null),\n                            }}\n                        >\n                            <div\n                                className={cn(styles.title, {\n                                    [styles[align]]: !hasLeftAddons && !subtitle,\n                                })}\n                                data-test-id={getDataTestId(dataTestId, 'title')}\n                            >\n                                {title}\n                            </div>\n\n                            {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                    {rightAddons && (\n                        <div\n                            className={cn(styles.rightAddons, styles.addons, rightAddonsClassName)}\n                            ref={rightAddonsRef}\n                        >\n                            {rightAddons}\n                        </div>\n                    )}\n                </div>\n\n                {bottomAddons && <div className={bottomAddonsClassName}>{bottomAddons}</div>}\n            </div>\n        );\n    },\n);\n\nNavigationBar.displayName = 'NavigationBar';\n"],"names":["forwardRef","useState","useRef","useEffect","React","cn","styles","__assign","getDataTestId"],"mappings":";;;;;;;;;;;;;;;IA+Fa,aAAa,GAAGA,gBAAU,CACnC,UACI,EAkBC,EACD,GAAG,EAAA;;QAlBC,EAAgB,GAAA,EAAA,CAAA,KAAA,EAAhB,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,QAAQ,GAAA,EAAA,EAChB,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,YAAY,kBAAA,EACZ,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,QAAQ,cAAA,EACR,EAAA,GAAA,EAAA,CAAA,eAAsD,EAAtD,eAAe,GAAG,EAAA,KAAA,MAAA,GAAA,oCAAoC,GAAA,EAAA,EACtD,uBAAuB,GAAA,EAAA,CAAA,uBAAA,EACvB,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,gBAAgB,GAAA,EAAA,CAAA,gBAAA,EAChB,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,qBAAqB,GAAA,EAAA,CAAA,qBAAA,EACrB,UAAU,GAAA,EAAA,CAAA,UAAA;AAIR,IAAA,IAAA,KAAgCC,cAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAA9D,WAAW,QAAA,EAAE,cAAc,QAAmC;AACrE,IAAA,IAAM,aAAa,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAClD,IAAA,IAAM,cAAc,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,IAAM,aAAa,GAAG,UAAU,IAAI,KAAK,KAAK,MAAM;;AAGpD,IAAAC,eAAS,CAAC,YAAA;;QACN,IAAM,eAAe,GAAG,CAAA,CAAA,EAAA,GAAA,aAAa,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,KAAI,CAAC;QAC/D,IAAM,gBAAgB,GAAG,CAAA,CAAA,EAAA,GAAA,cAAc,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,KAAI,CAAC;QAEjE,IAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,GAAG,eAAe,CAAC;AAC/D,QAAA,IAAM,mBAAmB,GAAG,gBAAgB,GAAG,eAAe,GAAG,CAAC;QAElE,cAAc,CAAC,UAAC,IAAI,EAAA;YAChB,IAAM,QAAQ,GAAG;kBACX,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;kBAC5B,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE;AAEpC,YAAA,IAAM,cAAc,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK;YAEnF,OAAO,cAAc,GAAG,QAAQ,GAAG,IAAI;AAC3C,SAAC,CAAC;KACL,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC;AAE5C,IAAA,QACIC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,mBAAE,CACTC,YAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAEZ,YAAA,EAAA,CAACA,YAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACvB,YAAA,EAAA,CAACA,YAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AAE3B,YAAA,EAAA,GAAA,SAAS,CACZ,EACD,KAAK,EAAAC,cAAA,CAAA,EAAA,GACG,eAAe,IAAI,EAAE,eAAe,EAAA,eAAA,EAAE,oBAEhC,UAAU,EAAA;AAExB,QAAAH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,QAAQ,EAAEA,YAAM,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC,EAAA;YAC/D,aAAa,KACVF,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,EAAE,GAAG,EAAE,aAAa,EACrE,EAAA,UAAU,CACT,CACT;YAEA,QAAQ,IAAIF,8CAAK,SAAS,EAAEE,YAAM,CAAC,QAAQ,EAAG,EAAA,QAAQ,CAAO;YAE7D,KAAK,KACFF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,OAAO,EAAE,uBAAuB,GAAA,EAAA,GAAA,EAAA;AACjD,oBAAA,EAAA,CAACA,YAAM,CAAC,KAAK,CAAC,CAAA,GAAG,CAAC,aAAa;AACjC,oBAAA,EAAA,EAAA,EACF,KAAK,EAAAC,cAAA,CAAA,EAAA,GACG,KAAK,KAAK;AACV,sBAAE;wBACI,UAAU,EAAE,WAAW,CAAC,IAAI;wBAC5B,WAAW,EAAE,WAAW,CAAC,KAAK;AACjC;sBACD,IAAI,EAAC,EAAA;AAGf,gBAAAH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,KAAK,GAAA,EAAA,GAAA,EAAA;wBACtB,EAAC,CAAAA,YAAM,CAAC,KAAK,CAAC,IAAG,CAAC,aAAa,IAAI,CAAC,QAAQ;4BAC9C,EACY,cAAA,EAAAE,kCAAa,CAAC,UAAU,EAAE,OAAO,CAAC,EAAA,EAE/C,KAAK,CACJ;gBAEL,QAAQ,KACLJ,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEE,YAAM,CAAC,QAAQ,EACZ,cAAA,EAAAE,kCAAa,CAAC,UAAU,EAAE,UAAU,CAAC,EAAA,EAElD,QAAQ,CACP,CACT,CACC,CACT;YAEA,WAAW,KACRJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,WAAW,EAAEA,YAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,EACtE,GAAG,EAAE,cAAc,EAElB,EAAA,WAAW,CACV,CACT,CACC;QAEL,YAAY,IAAIF,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,qBAAqB,IAAG,YAAY,CAAO,CAC1E;AAEd,CAAC;AAGL,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

package/components/action-icon-addon/index.css

@@ -6,11 +6,11 @@
 } :root {
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
-} .navigation-bar__component_1f633 {
+} .navigation-bar__component_143tk {
     height: 100%;
     border-radius: var(--border-radius-pill);
     min-width: 48px;
-} .navigation-bar__iconWrapper_1f633 {
+} .navigation-bar__iconWrapper_143tk {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -18,13 +18,13 @@
     width: 30px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-neutral-translucent-100);
-    vertical-align: middle
-} .navigation-bar__iconWrapper_1f633.navigation-bar__back_1f633 {
+    vertical-align: middle;
+} .navigation-bar__iconWrapper_143tk.navigation-bar__back_143tk {
         background: transparent;
-    } .navigation-bar__floating_1f633 path {
+    } .navigation-bar__floating_143tk path {
         fill: var(--color-light-neutral-translucent-700);
-    } .navigation-bar__floating_1f633:hover path {
+    } .navigation-bar__floating_143tk:hover path {
             fill: var(--color-light-neutral-translucent-700-hover);
-        } .navigation-bar__floating_1f633:active path {
+        } .navigation-bar__floating_143tk:active path {
             fill: var(--color-light-neutral-translucent-700-press);
         }

package/components/action-icon-addon/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"navigation-bar__component_1f633","iconWrapper":"navigation-bar__iconWrapper_1f633","back":"navigation-bar__back_1f633","floating":"navigation-bar__floating_1f633"};
+var styles = {"component":"navigation-bar__component_143tk","iconWrapper":"navigation-bar__iconWrapper_143tk","back":"navigation-bar__back_143tk","floating":"navigation-bar__floating_143tk"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/action-icon-addon/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/action-icon-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    height: 100%;\n    border-radius: var(--border-radius-pill);\n    min-width: 48px;\n}\n\n.iconWrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 30px;\n    width: 30px;\n    border-radius: var(--border-radius-circle);\n    background: var(--color-light-neutral-translucent-100);\n    vertical-align: middle;\n\n    &.back {\n        background: transparent;\n    }\n}\n\n.floating {\n    & path {\n        fill: var(--color-light-neutral-translucent-700);\n    }\n\n    &:hover {\n        & path {\n            fill: var(--color-light-neutral-translucent-700-hover);\n        }\n    }\n\n    &:active {\n        & path {\n            fill: var(--color-light-neutral-translucent-700-press);\n        }\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,aAAa,CAAC,mCAAmC,CAAC,MAAM,CAAC,4BAA4B,CAAC,UAAU,CAAC,gCAAgC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/action-icon-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component {\n    height: 100%;\n    border-radius: var(--border-radius-pill);\n    min-width: 48px;\n}\n\n.iconWrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 30px;\n    width: 30px;\n    border-radius: var(--border-radius-circle);\n    background: var(--color-light-neutral-translucent-100);\n    vertical-align: middle;\n\n    &.back {\n        background: transparent;\n    }\n}\n\n.floating {\n    & path {\n        fill: var(--color-light-neutral-translucent-700);\n    }\n\n    &:hover {\n        & path {\n            fill: var(--color-light-neutral-translucent-700-hover);\n        }\n    }\n\n    &:active {\n        & path {\n            fill: var(--color-light-neutral-translucent-700-press);\n        }\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,aAAa,CAAC,mCAAmC,CAAC,MAAM,CAAC,4BAA4B,CAAC,UAAU,CAAC,gCAAgC,CAAC;;;;"}

package/components/action-text-addon/index.css

@@ -3,8 +3,8 @@
     --gap-m: 16px;
     --gap-8: var(--gap-xs);
     --gap-16: var(--gap-m);
-} .navigation-bar__component_b4ffc {
+} .navigation-bar__component_183p4 {
     height: 100%;
-} .navigation-bar__text_b4ffc {
+} .navigation-bar__text_183p4 {
     padding: var(--gap-8) var(--gap-16);
 }

package/components/action-text-addon/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"navigation-bar__component_b4ffc","text":"navigation-bar__text_b4ffc"};
+var styles = {"component":"navigation-bar__component_183p4","text":"navigation-bar__text_183p4"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/action-text-addon/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/action-text-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    height: 100%;\n}\n\n.text {\n    padding: var(--gap-8) var(--gap-16);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,MAAM,CAAC,4BAA4B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/action-text-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component {\n    height: 100%;\n}\n\n.text {\n    padding: var(--gap-8) var(--gap-16);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,MAAM,CAAC,4BAA4B,CAAC;;;;"}

package/cssm/Component.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export interface NavigationBarProps {
     /**
      * Заголовок

package/cssm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport styles from './index.module.css';\n\nexport interface NavigationBarProps {\n    /**\n     * Заголовок\n     */\n    title?: string;\n\n    /**\n     * Подзаголовок\n     */\n    subtitle?: string;\n\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Выравнивание заголовка\n     * @default center\n     */\n    align?: 'left' | 'center';\n\n    /**\n     * Цвет фона\n     */\n    backgroundColor?: string;\n\n    /**\n     * Наличие бордера\n     */\n    border?: boolean;\n\n    /**\n     * Фиксирует шапку\n     */\n    sticky?: boolean;\n\n    /**\n     * Слот снизу\n     */\n    bottomAddons?: ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: ReactNode;\n\n    /**\n     * Дополнительный класс для контента\n     */\n    contentClassName?: string;\n\n    /**\n     * Дополнительный класс для обертки контента\n     */\n    contentWrapperClassName?: string;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для правого аддона\n     */\n    rightAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для левого аддона\n     */\n    leftAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для нижнего аддона\n     */\n    bottomAddonsClassName?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования.\n     */\n    dataTestId?: string;\n}\n\nexport const NavigationBar = forwardRef<HTMLDivElement, NavigationBarProps>(\n    (\n        {\n            align = 'center',\n            rightAddons,\n            leftAddons,\n            bottomAddons,\n            sticky,\n            border,\n            subtitle,\n            title,\n            children,\n            backgroundColor = 'var(--color-light-base-bg-primary)',\n            contentWrapperClassName,\n            className,\n            contentClassName,\n            rightAddonsClassName,\n            leftAddonsClassName,\n            bottomAddonsClassName,\n            dataTestId,\n        },\n        ref,\n    ) => {\n        const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n        const leftAddonsRef = useRef<HTMLDivElement>(null);\n        const rightAddonsRef = useRef<HTMLDivElement>(null);\n        const hasLeftAddons = leftAddons && align !== 'left';\n\n        // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов\n        useEffect(() => {\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 = prev.left !== newState.left || prev.right !== newState.right;\n\n                return isStateChanged ? newState : prev;\n            });\n        }, [hasLeftAddons, leftAddons, rightAddons]);\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    {\n                        [styles.border]: border,\n                        [styles.sticky]: sticky,\n                    },\n                    className,\n                )}\n                style={{\n                    ...(backgroundColor && { backgroundColor }),\n                }}\n                data-test-id={dataTestId}\n            >\n                <div className={cn(styles.mainLine, styles[align], contentClassName)}>\n                    {hasLeftAddons && (\n                        <div className={cn(styles.addons, leftAddonsClassName)} ref={leftAddonsRef}>\n                            {leftAddons}\n                        </div>\n                    )}\n\n                    {children && <div className={styles.children}>{children}</div>}\n\n                    {title && (\n                        <div\n                            className={cn(styles.content, contentWrapperClassName, {\n                                [styles[align]]: !hasLeftAddons,\n                            })}\n                            style={{\n                                ...(align === 'center'\n                                    ? {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      }\n                                    : null),\n                            }}\n                        >\n                            <div\n                                className={cn(styles.title, {\n                                    [styles[align]]: !hasLeftAddons && !subtitle,\n                                })}\n                                data-test-id={getDataTestId(dataTestId, 'title')}\n                            >\n                                {title}\n                            </div>\n\n                            {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                    {rightAddons && (\n                        <div\n                            className={cn(styles.rightAddons, styles.addons, rightAddonsClassName)}\n                            ref={rightAddonsRef}\n                        >\n                            {rightAddons}\n                        </div>\n                    )}\n                </div>\n\n                {bottomAddons && <div className={bottomAddonsClassName}>{bottomAddons}</div>}\n            </div>\n        );\n    },\n);\n\nNavigationBar.displayName = 'NavigationBar';\n"],"names":["forwardRef","useState","useRef","useEffect","React","cn","styles","__assign","getDataTestId"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, type ReactNode, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport styles from './index.module.css';\n\nexport interface NavigationBarProps {\n    /**\n     * Заголовок\n     */\n    title?: string;\n\n    /**\n     * Подзаголовок\n     */\n    subtitle?: string;\n\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Выравнивание заголовка\n     * @default center\n     */\n    align?: 'left' | 'center';\n\n    /**\n     * Цвет фона\n     */\n    backgroundColor?: string;\n\n    /**\n     * Наличие бордера\n     */\n    border?: boolean;\n\n    /**\n     * Фиксирует шапку\n     */\n    sticky?: boolean;\n\n    /**\n     * Слот снизу\n     */\n    bottomAddons?: ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: ReactNode;\n\n    /**\n     * Дополнительный класс для контента\n     */\n    contentClassName?: string;\n\n    /**\n     * Дополнительный класс для обертки контента\n     */\n    contentWrapperClassName?: string;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для правого аддона\n     */\n    rightAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для левого аддона\n     */\n    leftAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для нижнего аддона\n     */\n    bottomAddonsClassName?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования.\n     */\n    dataTestId?: string;\n}\n\nexport const NavigationBar = forwardRef<HTMLDivElement, NavigationBarProps>(\n    (\n        {\n            align = 'center',\n            rightAddons,\n            leftAddons,\n            bottomAddons,\n            sticky,\n            border,\n            subtitle,\n            title,\n            children,\n            backgroundColor = 'var(--color-light-base-bg-primary)',\n            contentWrapperClassName,\n            className,\n            contentClassName,\n            rightAddonsClassName,\n            leftAddonsClassName,\n            bottomAddonsClassName,\n            dataTestId,\n        },\n        ref,\n    ) => {\n        const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n        const leftAddonsRef = useRef<HTMLDivElement>(null);\n        const rightAddonsRef = useRef<HTMLDivElement>(null);\n        const hasLeftAddons = leftAddons && align !== 'left';\n\n        // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов\n        useEffect(() => {\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 = prev.left !== newState.left || prev.right !== newState.right;\n\n                return isStateChanged ? newState : prev;\n            });\n        }, [hasLeftAddons, leftAddons, rightAddons]);\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    {\n                        [styles.border]: border,\n                        [styles.sticky]: sticky,\n                    },\n                    className,\n                )}\n                style={{\n                    ...(backgroundColor && { backgroundColor }),\n                }}\n                data-test-id={dataTestId}\n            >\n                <div className={cn(styles.mainLine, styles[align], contentClassName)}>\n                    {hasLeftAddons && (\n                        <div className={cn(styles.addons, leftAddonsClassName)} ref={leftAddonsRef}>\n                            {leftAddons}\n                        </div>\n                    )}\n\n                    {children && <div className={styles.children}>{children}</div>}\n\n                    {title && (\n                        <div\n                            className={cn(styles.content, contentWrapperClassName, {\n                                [styles[align]]: !hasLeftAddons,\n                            })}\n                            style={{\n                                ...(align === 'center'\n                                    ? {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      }\n                                    : null),\n                            }}\n                        >\n                            <div\n                                className={cn(styles.title, {\n                                    [styles[align]]: !hasLeftAddons && !subtitle,\n                                })}\n                                data-test-id={getDataTestId(dataTestId, 'title')}\n                            >\n                                {title}\n                            </div>\n\n                            {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                    {rightAddons && (\n                        <div\n                            className={cn(styles.rightAddons, styles.addons, rightAddonsClassName)}\n                            ref={rightAddonsRef}\n                        >\n                            {rightAddons}\n                        </div>\n                    )}\n                </div>\n\n                {bottomAddons && <div className={bottomAddonsClassName}>{bottomAddons}</div>}\n            </div>\n        );\n    },\n);\n\nNavigationBar.displayName = 'NavigationBar';\n"],"names":["forwardRef","useState","useRef","useEffect","React","cn","styles","__assign","getDataTestId"],"mappings":"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"}

package/cssm/components/action-icon-addon/index.module.css

@@ -18,7 +18,7 @@
     width: 30px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-neutral-translucent-100);
-    vertical-align: middle
+    vertical-align: middle;
 } .iconWrapper.back {
         background: transparent;
     } .floating path {

package/cssm/index.module.css

@@ -37,7 +37,7 @@
     flex-grow: 1;
     justify-content: center;
     flex-flow: column nowrap;
-    color: var(--color-light-text-primary)
+    color: var(--color-light-text-primary);
 } .content.left {
         padding: var(--gap-0) var(--gap-16);
     } .content > .title,
@@ -50,7 +50,7 @@
     } .title {
     font-size: 16px;
     line-height: 20px;
-    font-weight: 500
+    font-weight: 500;
 } .title.left {
         font-size: 20px;
         line-height: 28px;

package/esm/Component.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export interface NavigationBarProps {
     /**
      * Заголовок

package/esm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport styles from './index.module.css';\n\nexport interface NavigationBarProps {\n    /**\n     * Заголовок\n     */\n    title?: string;\n\n    /**\n     * Подзаголовок\n     */\n    subtitle?: string;\n\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Выравнивание заголовка\n     * @default center\n     */\n    align?: 'left' | 'center';\n\n    /**\n     * Цвет фона\n     */\n    backgroundColor?: string;\n\n    /**\n     * Наличие бордера\n     */\n    border?: boolean;\n\n    /**\n     * Фиксирует шапку\n     */\n    sticky?: boolean;\n\n    /**\n     * Слот снизу\n     */\n    bottomAddons?: ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: ReactNode;\n\n    /**\n     * Дополнительный класс для контента\n     */\n    contentClassName?: string;\n\n    /**\n     * Дополнительный класс для обертки контента\n     */\n    contentWrapperClassName?: string;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для правого аддона\n     */\n    rightAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для левого аддона\n     */\n    leftAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для нижнего аддона\n     */\n    bottomAddonsClassName?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования.\n     */\n    dataTestId?: string;\n}\n\nexport const NavigationBar = forwardRef<HTMLDivElement, NavigationBarProps>(\n    (\n        {\n            align = 'center',\n            rightAddons,\n            leftAddons,\n            bottomAddons,\n            sticky,\n            border,\n            subtitle,\n            title,\n            children,\n            backgroundColor = 'var(--color-light-base-bg-primary)',\n            contentWrapperClassName,\n            className,\n            contentClassName,\n            rightAddonsClassName,\n            leftAddonsClassName,\n            bottomAddonsClassName,\n            dataTestId,\n        },\n        ref,\n    ) => {\n        const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n        const leftAddonsRef = useRef<HTMLDivElement>(null);\n        const rightAddonsRef = useRef<HTMLDivElement>(null);\n        const hasLeftAddons = leftAddons && align !== 'left';\n\n        // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов\n        useEffect(() => {\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 = prev.left !== newState.left || prev.right !== newState.right;\n\n                return isStateChanged ? newState : prev;\n            });\n        }, [hasLeftAddons, leftAddons, rightAddons]);\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    {\n                        [styles.border]: border,\n                        [styles.sticky]: sticky,\n                    },\n                    className,\n                )}\n                style={{\n                    ...(backgroundColor && { backgroundColor }),\n                }}\n                data-test-id={dataTestId}\n            >\n                <div className={cn(styles.mainLine, styles[align], contentClassName)}>\n                    {hasLeftAddons && (\n                        <div className={cn(styles.addons, leftAddonsClassName)} ref={leftAddonsRef}>\n                            {leftAddons}\n                        </div>\n                    )}\n\n                    {children && <div className={styles.children}>{children}</div>}\n\n                    {title && (\n                        <div\n                            className={cn(styles.content, contentWrapperClassName, {\n                                [styles[align]]: !hasLeftAddons,\n                            })}\n                            style={{\n                                ...(align === 'center'\n                                    ? {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      }\n                                    : null),\n                            }}\n                        >\n                            <div\n                                className={cn(styles.title, {\n                                    [styles[align]]: !hasLeftAddons && !subtitle,\n                                })}\n                                data-test-id={getDataTestId(dataTestId, 'title')}\n                            >\n                                {title}\n                            </div>\n\n                            {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                    {rightAddons && (\n                        <div\n                            className={cn(styles.rightAddons, styles.addons, rightAddonsClassName)}\n                            ref={rightAddonsRef}\n                        >\n                            {rightAddons}\n                        </div>\n                    )}\n                </div>\n\n                {bottomAddons && <div className={bottomAddonsClassName}>{bottomAddons}</div>}\n            </div>\n        );\n    },\n);\n\nNavigationBar.displayName = 'NavigationBar';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, type ReactNode, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport styles from './index.module.css';\n\nexport interface NavigationBarProps {\n    /**\n     * Заголовок\n     */\n    title?: string;\n\n    /**\n     * Подзаголовок\n     */\n    subtitle?: string;\n\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Выравнивание заголовка\n     * @default center\n     */\n    align?: 'left' | 'center';\n\n    /**\n     * Цвет фона\n     */\n    backgroundColor?: string;\n\n    /**\n     * Наличие бордера\n     */\n    border?: boolean;\n\n    /**\n     * Фиксирует шапку\n     */\n    sticky?: boolean;\n\n    /**\n     * Слот снизу\n     */\n    bottomAddons?: ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: ReactNode;\n\n    /**\n     * Дополнительный класс для контента\n     */\n    contentClassName?: string;\n\n    /**\n     * Дополнительный класс для обертки контента\n     */\n    contentWrapperClassName?: string;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для правого аддона\n     */\n    rightAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для левого аддона\n     */\n    leftAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для нижнего аддона\n     */\n    bottomAddonsClassName?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования.\n     */\n    dataTestId?: string;\n}\n\nexport const NavigationBar = forwardRef<HTMLDivElement, NavigationBarProps>(\n    (\n        {\n            align = 'center',\n            rightAddons,\n            leftAddons,\n            bottomAddons,\n            sticky,\n            border,\n            subtitle,\n            title,\n            children,\n            backgroundColor = 'var(--color-light-base-bg-primary)',\n            contentWrapperClassName,\n            className,\n            contentClassName,\n            rightAddonsClassName,\n            leftAddonsClassName,\n            bottomAddonsClassName,\n            dataTestId,\n        },\n        ref,\n    ) => {\n        const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n        const leftAddonsRef = useRef<HTMLDivElement>(null);\n        const rightAddonsRef = useRef<HTMLDivElement>(null);\n        const hasLeftAddons = leftAddons && align !== 'left';\n\n        // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов\n        useEffect(() => {\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 = prev.left !== newState.left || prev.right !== newState.right;\n\n                return isStateChanged ? newState : prev;\n            });\n        }, [hasLeftAddons, leftAddons, rightAddons]);\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    {\n                        [styles.border]: border,\n                        [styles.sticky]: sticky,\n                    },\n                    className,\n                )}\n                style={{\n                    ...(backgroundColor && { backgroundColor }),\n                }}\n                data-test-id={dataTestId}\n            >\n                <div className={cn(styles.mainLine, styles[align], contentClassName)}>\n                    {hasLeftAddons && (\n                        <div className={cn(styles.addons, leftAddonsClassName)} ref={leftAddonsRef}>\n                            {leftAddons}\n                        </div>\n                    )}\n\n                    {children && <div className={styles.children}>{children}</div>}\n\n                    {title && (\n                        <div\n                            className={cn(styles.content, contentWrapperClassName, {\n                                [styles[align]]: !hasLeftAddons,\n                            })}\n                            style={{\n                                ...(align === 'center'\n                                    ? {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      }\n                                    : null),\n                            }}\n                        >\n                            <div\n                                className={cn(styles.title, {\n                                    [styles[align]]: !hasLeftAddons && !subtitle,\n                                })}\n                                data-test-id={getDataTestId(dataTestId, 'title')}\n                            >\n                                {title}\n                            </div>\n\n                            {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                    {rightAddons && (\n                        <div\n                            className={cn(styles.rightAddons, styles.addons, rightAddonsClassName)}\n                            ref={rightAddonsRef}\n                        >\n                            {rightAddons}\n                        </div>\n                    )}\n                </div>\n\n                {bottomAddons && <div className={bottomAddonsClassName}>{bottomAddons}</div>}\n            </div>\n        );\n    },\n);\n\nNavigationBar.displayName = 'NavigationBar';\n"],"names":[],"mappings":"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"}

package/esm/components/action-icon-addon/index.css

@@ -6,11 +6,11 @@
 } :root {
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
-} .navigation-bar__component_1f633 {
+} .navigation-bar__component_143tk {
     height: 100%;
     border-radius: var(--border-radius-pill);
     min-width: 48px;
-} .navigation-bar__iconWrapper_1f633 {
+} .navigation-bar__iconWrapper_143tk {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -18,13 +18,13 @@
     width: 30px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-neutral-translucent-100);
-    vertical-align: middle
-} .navigation-bar__iconWrapper_1f633.navigation-bar__back_1f633 {
+    vertical-align: middle;
+} .navigation-bar__iconWrapper_143tk.navigation-bar__back_143tk {
         background: transparent;
-    } .navigation-bar__floating_1f633 path {
+    } .navigation-bar__floating_143tk path {
         fill: var(--color-light-neutral-translucent-700);
-    } .navigation-bar__floating_1f633:hover path {
+    } .navigation-bar__floating_143tk:hover path {
             fill: var(--color-light-neutral-translucent-700-hover);
-        } .navigation-bar__floating_1f633:active path {
+        } .navigation-bar__floating_143tk:active path {
             fill: var(--color-light-neutral-translucent-700-press);
         }

package/esm/components/action-icon-addon/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"navigation-bar__component_1f633","iconWrapper":"navigation-bar__iconWrapper_1f633","back":"navigation-bar__back_1f633","floating":"navigation-bar__floating_1f633"};
+var styles = {"component":"navigation-bar__component_143tk","iconWrapper":"navigation-bar__iconWrapper_143tk","back":"navigation-bar__back_143tk","floating":"navigation-bar__floating_143tk"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/action-icon-addon/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/action-icon-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    height: 100%;\n    border-radius: var(--border-radius-pill);\n    min-width: 48px;\n}\n\n.iconWrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 30px;\n    width: 30px;\n    border-radius: var(--border-radius-circle);\n    background: var(--color-light-neutral-translucent-100);\n    vertical-align: middle;\n\n    &.back {\n        background: transparent;\n    }\n}\n\n.floating {\n    & path {\n        fill: var(--color-light-neutral-translucent-700);\n    }\n\n    &:hover {\n        & path {\n            fill: var(--color-light-neutral-translucent-700-hover);\n        }\n    }\n\n    &:active {\n        & path {\n            fill: var(--color-light-neutral-translucent-700-press);\n        }\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,aAAa,CAAC,mCAAmC,CAAC,MAAM,CAAC,4BAA4B,CAAC,UAAU,CAAC,gCAAgC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/action-icon-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component {\n    height: 100%;\n    border-radius: var(--border-radius-pill);\n    min-width: 48px;\n}\n\n.iconWrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 30px;\n    width: 30px;\n    border-radius: var(--border-radius-circle);\n    background: var(--color-light-neutral-translucent-100);\n    vertical-align: middle;\n\n    &.back {\n        background: transparent;\n    }\n}\n\n.floating {\n    & path {\n        fill: var(--color-light-neutral-translucent-700);\n    }\n\n    &:hover {\n        & path {\n            fill: var(--color-light-neutral-translucent-700-hover);\n        }\n    }\n\n    &:active {\n        & path {\n            fill: var(--color-light-neutral-translucent-700-press);\n        }\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,aAAa,CAAC,mCAAmC,CAAC,MAAM,CAAC,4BAA4B,CAAC,UAAU,CAAC,gCAAgC,CAAC;;;;"}

package/esm/components/action-text-addon/index.css

@@ -3,8 +3,8 @@
     --gap-m: 16px;
     --gap-8: var(--gap-xs);
     --gap-16: var(--gap-m);
-} .navigation-bar__component_b4ffc {
+} .navigation-bar__component_183p4 {
     height: 100%;
-} .navigation-bar__text_b4ffc {
+} .navigation-bar__text_183p4 {
     padding: var(--gap-8) var(--gap-16);
 }

package/esm/components/action-text-addon/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"navigation-bar__component_b4ffc","text":"navigation-bar__text_b4ffc"};
+var styles = {"component":"navigation-bar__component_183p4","text":"navigation-bar__text_183p4"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/action-text-addon/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/action-text-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    height: 100%;\n}\n\n.text {\n    padding: var(--gap-8) var(--gap-16);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,MAAM,CAAC,4BAA4B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/action-text-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component {\n    height: 100%;\n}\n\n.text {\n    padding: var(--gap-8) var(--gap-16);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,MAAM,CAAC,4BAA4B,CAAC;;;;"}

package/esm/index.css

@@ -10,60 +10,60 @@
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
     --gap-16: var(--gap-m);
-} .navigation-bar__component_1q5nn {
+} .navigation-bar__component_495rc {
     padding: var(--gap-8) var(--gap-4);
     box-sizing: border-box;
     width: 100%;
-} .navigation-bar__sticky_1q5nn {
+} .navigation-bar__sticky_495rc {
     position: sticky;
     top: var(--gap-0);
     z-index: 1;
-} .navigation-bar__border_1q5nn {
+} .navigation-bar__border_495rc {
     box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
-} .navigation-bar__mainLine_1q5nn {
+} .navigation-bar__mainLine_495rc {
     display: flex;
     background-color: inherit;
     justify-content: space-between;
     min-height: 40px;
     align-items: stretch;
-} .navigation-bar__left_1q5nn {
+} .navigation-bar__left_495rc {
     text-align: left;
-} .navigation-bar__center_1q5nn {
+} .navigation-bar__center_495rc {
     text-align: center;
-} .navigation-bar__children_1q5nn {
+} .navigation-bar__children_495rc {
     width: 100%;
-} .navigation-bar__content_1q5nn {
+} .navigation-bar__content_495rc {
     display: flex;
     flex-grow: 1;
     justify-content: center;
     flex-flow: column nowrap;
-    color: var(--color-light-text-primary)
-} .navigation-bar__content_1q5nn.navigation-bar__left_1q5nn {
+    color: var(--color-light-text-primary);
+} .navigation-bar__content_495rc.navigation-bar__left_495rc {
         padding: var(--gap-0) var(--gap-16);
-    } .navigation-bar__content_1q5nn > .navigation-bar__title_1q5nn,
-    .navigation-bar__content_1q5nn > .navigation-bar__subtitle_1q5nn {
+    } .navigation-bar__content_495rc > .navigation-bar__title_495rc,
+    .navigation-bar__content_495rc > .navigation-bar__subtitle_495rc {
         -webkit-line-clamp: 1;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         overflow: hidden;
         word-break: break-all;
-    } .navigation-bar__title_1q5nn {
+    } .navigation-bar__title_495rc {
     font-size: 16px;
     line-height: 20px;
-    font-weight: 500
-} .navigation-bar__title_1q5nn.navigation-bar__left_1q5nn {
+    font-weight: 500;
+} .navigation-bar__title_495rc.navigation-bar__left_495rc {
         font-size: 20px;
         line-height: 28px;
         font-weight: 600;
-    } .navigation-bar__subtitle_1q5nn {
+    } .navigation-bar__subtitle_495rc {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     color: var(--color-light-text-secondary);
-} .navigation-bar__addons_1q5nn {
+} .navigation-bar__addons_495rc {
     min-width: 48px;
     display: flex;
     justify-content: center;
-} .navigation-bar__rightAddons_1q5nn {
+} .navigation-bar__rightAddons_495rc {
     margin-left: auto;
 }

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"navigation-bar__component_1q5nn","sticky":"navigation-bar__sticky_1q5nn","border":"navigation-bar__border_1q5nn","mainLine":"navigation-bar__mainLine_1q5nn","left":"navigation-bar__left_1q5nn","center":"navigation-bar__center_1q5nn","children":"navigation-bar__children_1q5nn","content":"navigation-bar__content_1q5nn","title":"navigation-bar__title_1q5nn","subtitle":"navigation-bar__subtitle_1q5nn","addons":"navigation-bar__addons_1q5nn","rightAddons":"navigation-bar__rightAddons_1q5nn"};
+var styles = {"component":"navigation-bar__component_495rc","sticky":"navigation-bar__sticky_495rc","border":"navigation-bar__border_495rc","mainLine":"navigation-bar__mainLine_495rc","left":"navigation-bar__left_495rc","center":"navigation-bar__center_495rc","children":"navigation-bar__children_495rc","content":"navigation-bar__content_495rc","title":"navigation-bar__title_495rc","subtitle":"navigation-bar__subtitle_495rc","addons":"navigation-bar__addons_495rc","rightAddons":"navigation-bar__rightAddons_495rc"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/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.component {\n    padding: var(--gap-8) var(--gap-4);\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.sticky {\n    position: sticky;\n    top: var(--gap-0);\n    z-index: 1;\n}\n\n.border {\n    box-shadow: 0 1px 0 0 var(--color-light-neutral-300);\n}\n\n.mainLine {\n    display: flex;\n    background-color: inherit;\n    justify-content: space-between;\n    min-height: 40px;\n    align-items: stretch;\n}\n\n.left {\n    text-align: left;\n}\n\n.center {\n    text-align: center;\n}\n\n.children {\n    width: 100%;\n}\n\n.content {\n    display: flex;\n    flex-grow: 1;\n    justify-content: center;\n    flex-flow: column nowrap;\n    color: var(--color-light-text-primary);\n\n    &.left {\n        padding: var(--gap-0) var(--gap-16);\n    }\n\n    & > .title,\n    & > .subtitle {\n        @mixin row_limit 1;\n        word-break: break-all;\n    }\n}\n\n.title {\n    @mixin action_component_primary;\n\n    &.left {\n        @mixin headline-system-mobile_small;\n    }\n}\n\n.subtitle {\n    @mixin paragraph_primary_small;\n    color: var(--color-light-text-secondary);\n}\n\n.addons {\n    min-width: 48px;\n    display: flex;\n    justify-content: center;\n}\n\n.rightAddons {\n    margin-left: auto;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,MAAM,CAAC,4BAA4B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,SAAS,CAAC,+BAA+B,CAAC,OAAO,CAAC,6BAA6B,CAAC,UAAU,CAAC,gCAAgC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,aAAa,CAAC,mCAAmC,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.component {\n    padding: var(--gap-8) var(--gap-4);\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.sticky {\n    position: sticky;\n    top: var(--gap-0);\n    z-index: 1;\n}\n\n.border {\n    box-shadow: 0 1px 0 0 var(--color-light-neutral-300);\n}\n\n.mainLine {\n    display: flex;\n    background-color: inherit;\n    justify-content: space-between;\n    min-height: 40px;\n    align-items: stretch;\n}\n\n.left {\n    text-align: left;\n}\n\n.center {\n    text-align: center;\n}\n\n.children {\n    width: 100%;\n}\n\n.content {\n    display: flex;\n    flex-grow: 1;\n    justify-content: center;\n    flex-flow: column nowrap;\n    color: var(--color-light-text-primary);\n\n    &.left {\n        padding: var(--gap-0) var(--gap-16);\n    }\n\n    & > .title,\n    & > .subtitle {\n        @mixin row_limit 1;\n        word-break: break-all;\n    }\n}\n\n.title {\n    @mixin action_component_primary;\n\n    &.left {\n        @mixin headline-system-mobile_small;\n    }\n}\n\n.subtitle {\n    @mixin paragraph_primary_small;\n    color: var(--color-light-text-secondary);\n}\n\n.addons {\n    min-width: 48px;\n    display: flex;\n    justify-content: center;\n}\n\n.rightAddons {\n    margin-left: auto;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,MAAM,CAAC,4BAA4B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,SAAS,CAAC,+BAA+B,CAAC,OAAO,CAAC,6BAA6B,CAAC,UAAU,CAAC,gCAAgC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,aAAa,CAAC,mCAAmC,CAAC;;;;"}

package/index.css

@@ -10,60 +10,60 @@
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
     --gap-16: var(--gap-m);
-} .navigation-bar__component_1q5nn {
+} .navigation-bar__component_495rc {
     padding: var(--gap-8) var(--gap-4);
     box-sizing: border-box;
     width: 100%;
-} .navigation-bar__sticky_1q5nn {
+} .navigation-bar__sticky_495rc {
     position: sticky;
     top: var(--gap-0);
     z-index: 1;
-} .navigation-bar__border_1q5nn {
+} .navigation-bar__border_495rc {
     box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
-} .navigation-bar__mainLine_1q5nn {
+} .navigation-bar__mainLine_495rc {
     display: flex;
     background-color: inherit;
     justify-content: space-between;
     min-height: 40px;
     align-items: stretch;
-} .navigation-bar__left_1q5nn {
+} .navigation-bar__left_495rc {
     text-align: left;
-} .navigation-bar__center_1q5nn {
+} .navigation-bar__center_495rc {
     text-align: center;
-} .navigation-bar__children_1q5nn {
+} .navigation-bar__children_495rc {
     width: 100%;
-} .navigation-bar__content_1q5nn {
+} .navigation-bar__content_495rc {
     display: flex;
     flex-grow: 1;
     justify-content: center;
     flex-flow: column nowrap;
-    color: var(--color-light-text-primary)
-} .navigation-bar__content_1q5nn.navigation-bar__left_1q5nn {
+    color: var(--color-light-text-primary);
+} .navigation-bar__content_495rc.navigation-bar__left_495rc {
         padding: var(--gap-0) var(--gap-16);
-    } .navigation-bar__content_1q5nn > .navigation-bar__title_1q5nn,
-    .navigation-bar__content_1q5nn > .navigation-bar__subtitle_1q5nn {
+    } .navigation-bar__content_495rc > .navigation-bar__title_495rc,
+    .navigation-bar__content_495rc > .navigation-bar__subtitle_495rc {
         -webkit-line-clamp: 1;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         overflow: hidden;
         word-break: break-all;
-    } .navigation-bar__title_1q5nn {
+    } .navigation-bar__title_495rc {
     font-size: 16px;
     line-height: 20px;
-    font-weight: 500
-} .navigation-bar__title_1q5nn.navigation-bar__left_1q5nn {
+    font-weight: 500;
+} .navigation-bar__title_495rc.navigation-bar__left_495rc {
         font-size: 20px;
         line-height: 28px;
         font-weight: 600;
-    } .navigation-bar__subtitle_1q5nn {
+    } .navigation-bar__subtitle_495rc {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     color: var(--color-light-text-secondary);
-} .navigation-bar__addons_1q5nn {
+} .navigation-bar__addons_495rc {
     min-width: 48px;
     display: flex;
     justify-content: center;
-} .navigation-bar__rightAddons_1q5nn {
+} .navigation-bar__rightAddons_495rc {
     margin-left: auto;
 }

package/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"navigation-bar__component_1q5nn","sticky":"navigation-bar__sticky_1q5nn","border":"navigation-bar__border_1q5nn","mainLine":"navigation-bar__mainLine_1q5nn","left":"navigation-bar__left_1q5nn","center":"navigation-bar__center_1q5nn","children":"navigation-bar__children_1q5nn","content":"navigation-bar__content_1q5nn","title":"navigation-bar__title_1q5nn","subtitle":"navigation-bar__subtitle_1q5nn","addons":"navigation-bar__addons_1q5nn","rightAddons":"navigation-bar__rightAddons_1q5nn"};
+var styles = {"component":"navigation-bar__component_495rc","sticky":"navigation-bar__sticky_495rc","border":"navigation-bar__border_495rc","mainLine":"navigation-bar__mainLine_495rc","left":"navigation-bar__left_495rc","center":"navigation-bar__center_495rc","children":"navigation-bar__children_495rc","content":"navigation-bar__content_495rc","title":"navigation-bar__title_495rc","subtitle":"navigation-bar__subtitle_495rc","addons":"navigation-bar__addons_495rc","rightAddons":"navigation-bar__rightAddons_495rc"};
 
 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.component {\n    padding: var(--gap-8) var(--gap-4);\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.sticky {\n    position: sticky;\n    top: var(--gap-0);\n    z-index: 1;\n}\n\n.border {\n    box-shadow: 0 1px 0 0 var(--color-light-neutral-300);\n}\n\n.mainLine {\n    display: flex;\n    background-color: inherit;\n    justify-content: space-between;\n    min-height: 40px;\n    align-items: stretch;\n}\n\n.left {\n    text-align: left;\n}\n\n.center {\n    text-align: center;\n}\n\n.children {\n    width: 100%;\n}\n\n.content {\n    display: flex;\n    flex-grow: 1;\n    justify-content: center;\n    flex-flow: column nowrap;\n    color: var(--color-light-text-primary);\n\n    &.left {\n        padding: var(--gap-0) var(--gap-16);\n    }\n\n    & > .title,\n    & > .subtitle {\n        @mixin row_limit 1;\n        word-break: break-all;\n    }\n}\n\n.title {\n    @mixin action_component_primary;\n\n    &.left {\n        @mixin headline-system-mobile_small;\n    }\n}\n\n.subtitle {\n    @mixin paragraph_primary_small;\n    color: var(--color-light-text-secondary);\n}\n\n.addons {\n    min-width: 48px;\n    display: flex;\n    justify-content: center;\n}\n\n.rightAddons {\n    margin-left: auto;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,MAAM,CAAC,4BAA4B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,SAAS,CAAC,+BAA+B,CAAC,OAAO,CAAC,6BAA6B,CAAC,UAAU,CAAC,gCAAgC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,aAAa,CAAC,mCAAmC,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.component {\n    padding: var(--gap-8) var(--gap-4);\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.sticky {\n    position: sticky;\n    top: var(--gap-0);\n    z-index: 1;\n}\n\n.border {\n    box-shadow: 0 1px 0 0 var(--color-light-neutral-300);\n}\n\n.mainLine {\n    display: flex;\n    background-color: inherit;\n    justify-content: space-between;\n    min-height: 40px;\n    align-items: stretch;\n}\n\n.left {\n    text-align: left;\n}\n\n.center {\n    text-align: center;\n}\n\n.children {\n    width: 100%;\n}\n\n.content {\n    display: flex;\n    flex-grow: 1;\n    justify-content: center;\n    flex-flow: column nowrap;\n    color: var(--color-light-text-primary);\n\n    &.left {\n        padding: var(--gap-0) var(--gap-16);\n    }\n\n    & > .title,\n    & > .subtitle {\n        @mixin row_limit 1;\n        word-break: break-all;\n    }\n}\n\n.title {\n    @mixin action_component_primary;\n\n    &.left {\n        @mixin headline-system-mobile_small;\n    }\n}\n\n.subtitle {\n    @mixin paragraph_primary_small;\n    color: var(--color-light-text-secondary);\n}\n\n.addons {\n    min-width: 48px;\n    display: flex;\n    justify-content: center;\n}\n\n.rightAddons {\n    margin-left: auto;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,MAAM,CAAC,4BAA4B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,SAAS,CAAC,+BAA+B,CAAC,OAAO,CAAC,6BAA6B,CAAC,UAAU,CAAC,gCAAgC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,aAAa,CAAC,mCAAmC,CAAC;;;;"}

package/modern/Component.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export interface NavigationBarProps {
     /**
      * Заголовок

package/modern/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport styles from './index.module.css';\n\nexport interface NavigationBarProps {\n    /**\n     * Заголовок\n     */\n    title?: string;\n\n    /**\n     * Подзаголовок\n     */\n    subtitle?: string;\n\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Выравнивание заголовка\n     * @default center\n     */\n    align?: 'left' | 'center';\n\n    /**\n     * Цвет фона\n     */\n    backgroundColor?: string;\n\n    /**\n     * Наличие бордера\n     */\n    border?: boolean;\n\n    /**\n     * Фиксирует шапку\n     */\n    sticky?: boolean;\n\n    /**\n     * Слот снизу\n     */\n    bottomAddons?: ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: ReactNode;\n\n    /**\n     * Дополнительный класс для контента\n     */\n    contentClassName?: string;\n\n    /**\n     * Дополнительный класс для обертки контента\n     */\n    contentWrapperClassName?: string;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для правого аддона\n     */\n    rightAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для левого аддона\n     */\n    leftAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для нижнего аддона\n     */\n    bottomAddonsClassName?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования.\n     */\n    dataTestId?: string;\n}\n\nexport const NavigationBar = forwardRef<HTMLDivElement, NavigationBarProps>(\n    (\n        {\n            align = 'center',\n            rightAddons,\n            leftAddons,\n            bottomAddons,\n            sticky,\n            border,\n            subtitle,\n            title,\n            children,\n            backgroundColor = 'var(--color-light-base-bg-primary)',\n            contentWrapperClassName,\n            className,\n            contentClassName,\n            rightAddonsClassName,\n            leftAddonsClassName,\n            bottomAddonsClassName,\n            dataTestId,\n        },\n        ref,\n    ) => {\n        const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n        const leftAddonsRef = useRef<HTMLDivElement>(null);\n        const rightAddonsRef = useRef<HTMLDivElement>(null);\n        const hasLeftAddons = leftAddons && align !== 'left';\n\n        // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов\n        useEffect(() => {\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 = prev.left !== newState.left || prev.right !== newState.right;\n\n                return isStateChanged ? newState : prev;\n            });\n        }, [hasLeftAddons, leftAddons, rightAddons]);\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    {\n                        [styles.border]: border,\n                        [styles.sticky]: sticky,\n                    },\n                    className,\n                )}\n                style={{\n                    ...(backgroundColor && { backgroundColor }),\n                }}\n                data-test-id={dataTestId}\n            >\n                <div className={cn(styles.mainLine, styles[align], contentClassName)}>\n                    {hasLeftAddons && (\n                        <div className={cn(styles.addons, leftAddonsClassName)} ref={leftAddonsRef}>\n                            {leftAddons}\n                        </div>\n                    )}\n\n                    {children && <div className={styles.children}>{children}</div>}\n\n                    {title && (\n                        <div\n                            className={cn(styles.content, contentWrapperClassName, {\n                                [styles[align]]: !hasLeftAddons,\n                            })}\n                            style={{\n                                ...(align === 'center'\n                                    ? {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      }\n                                    : null),\n                            }}\n                        >\n                            <div\n                                className={cn(styles.title, {\n                                    [styles[align]]: !hasLeftAddons && !subtitle,\n                                })}\n                                data-test-id={getDataTestId(dataTestId, 'title')}\n                            >\n                                {title}\n                            </div>\n\n                            {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                    {rightAddons && (\n                        <div\n                            className={cn(styles.rightAddons, styles.addons, rightAddonsClassName)}\n                            ref={rightAddonsRef}\n                        >\n                            {rightAddons}\n                        </div>\n                    )}\n                </div>\n\n                {bottomAddons && <div className={bottomAddonsClassName}>{bottomAddons}</div>}\n            </div>\n        );\n    },\n);\n\nNavigationBar.displayName = 'NavigationBar';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, type ReactNode, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport styles from './index.module.css';\n\nexport interface NavigationBarProps {\n    /**\n     * Заголовок\n     */\n    title?: string;\n\n    /**\n     * Подзаголовок\n     */\n    subtitle?: string;\n\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Выравнивание заголовка\n     * @default center\n     */\n    align?: 'left' | 'center';\n\n    /**\n     * Цвет фона\n     */\n    backgroundColor?: string;\n\n    /**\n     * Наличие бордера\n     */\n    border?: boolean;\n\n    /**\n     * Фиксирует шапку\n     */\n    sticky?: boolean;\n\n    /**\n     * Слот снизу\n     */\n    bottomAddons?: ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: ReactNode;\n\n    /**\n     * Дополнительный класс для контента\n     */\n    contentClassName?: string;\n\n    /**\n     * Дополнительный класс для обертки контента\n     */\n    contentWrapperClassName?: string;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для правого аддона\n     */\n    rightAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для левого аддона\n     */\n    leftAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для нижнего аддона\n     */\n    bottomAddonsClassName?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования.\n     */\n    dataTestId?: string;\n}\n\nexport const NavigationBar = forwardRef<HTMLDivElement, NavigationBarProps>(\n    (\n        {\n            align = 'center',\n            rightAddons,\n            leftAddons,\n            bottomAddons,\n            sticky,\n            border,\n            subtitle,\n            title,\n            children,\n            backgroundColor = 'var(--color-light-base-bg-primary)',\n            contentWrapperClassName,\n            className,\n            contentClassName,\n            rightAddonsClassName,\n            leftAddonsClassName,\n            bottomAddonsClassName,\n            dataTestId,\n        },\n        ref,\n    ) => {\n        const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n        const leftAddonsRef = useRef<HTMLDivElement>(null);\n        const rightAddonsRef = useRef<HTMLDivElement>(null);\n        const hasLeftAddons = leftAddons && align !== 'left';\n\n        // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов\n        useEffect(() => {\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 = prev.left !== newState.left || prev.right !== newState.right;\n\n                return isStateChanged ? newState : prev;\n            });\n        }, [hasLeftAddons, leftAddons, rightAddons]);\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    {\n                        [styles.border]: border,\n                        [styles.sticky]: sticky,\n                    },\n                    className,\n                )}\n                style={{\n                    ...(backgroundColor && { backgroundColor }),\n                }}\n                data-test-id={dataTestId}\n            >\n                <div className={cn(styles.mainLine, styles[align], contentClassName)}>\n                    {hasLeftAddons && (\n                        <div className={cn(styles.addons, leftAddonsClassName)} ref={leftAddonsRef}>\n                            {leftAddons}\n                        </div>\n                    )}\n\n                    {children && <div className={styles.children}>{children}</div>}\n\n                    {title && (\n                        <div\n                            className={cn(styles.content, contentWrapperClassName, {\n                                [styles[align]]: !hasLeftAddons,\n                            })}\n                            style={{\n                                ...(align === 'center'\n                                    ? {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      }\n                                    : null),\n                            }}\n                        >\n                            <div\n                                className={cn(styles.title, {\n                                    [styles[align]]: !hasLeftAddons && !subtitle,\n                                })}\n                                data-test-id={getDataTestId(dataTestId, 'title')}\n                            >\n                                {title}\n                            </div>\n\n                            {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                    {rightAddons && (\n                        <div\n                            className={cn(styles.rightAddons, styles.addons, rightAddonsClassName)}\n                            ref={rightAddonsRef}\n                        >\n                            {rightAddons}\n                        </div>\n                    )}\n                </div>\n\n                {bottomAddons && <div className={bottomAddonsClassName}>{bottomAddons}</div>}\n            </div>\n        );\n    },\n);\n\nNavigationBar.displayName = 'NavigationBar';\n"],"names":[],"mappings":"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"}

package/modern/components/action-icon-addon/index.css

@@ -6,11 +6,11 @@
 } :root {
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
-} .navigation-bar__component_1f633 {
+} .navigation-bar__component_143tk {
     height: 100%;
     border-radius: var(--border-radius-pill);
     min-width: 48px;
-} .navigation-bar__iconWrapper_1f633 {
+} .navigation-bar__iconWrapper_143tk {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -18,13 +18,13 @@
     width: 30px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-neutral-translucent-100);
-    vertical-align: middle
-} .navigation-bar__iconWrapper_1f633.navigation-bar__back_1f633 {
+    vertical-align: middle;
+} .navigation-bar__iconWrapper_143tk.navigation-bar__back_143tk {
         background: transparent;
-    } .navigation-bar__floating_1f633 path {
+    } .navigation-bar__floating_143tk path {
         fill: var(--color-light-neutral-translucent-700);
-    } .navigation-bar__floating_1f633:hover path {
+    } .navigation-bar__floating_143tk:hover path {
             fill: var(--color-light-neutral-translucent-700-hover);
-        } .navigation-bar__floating_1f633:active path {
+        } .navigation-bar__floating_143tk:active path {
             fill: var(--color-light-neutral-translucent-700-press);
         }

package/modern/components/action-icon-addon/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"navigation-bar__component_1f633","iconWrapper":"navigation-bar__iconWrapper_1f633","back":"navigation-bar__back_1f633","floating":"navigation-bar__floating_1f633"};
+const styles = {"component":"navigation-bar__component_143tk","iconWrapper":"navigation-bar__iconWrapper_143tk","back":"navigation-bar__back_143tk","floating":"navigation-bar__floating_143tk"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/action-icon-addon/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/action-icon-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    height: 100%;\n    border-radius: var(--border-radius-pill);\n    min-width: 48px;\n}\n\n.iconWrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 30px;\n    width: 30px;\n    border-radius: var(--border-radius-circle);\n    background: var(--color-light-neutral-translucent-100);\n    vertical-align: middle;\n\n    &.back {\n        background: transparent;\n    }\n}\n\n.floating {\n    & path {\n        fill: var(--color-light-neutral-translucent-700);\n    }\n\n    &:hover {\n        & path {\n            fill: var(--color-light-neutral-translucent-700-hover);\n        }\n    }\n\n    &:active {\n        & path {\n            fill: var(--color-light-neutral-translucent-700-press);\n        }\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,aAAa,CAAC,mCAAmC,CAAC,MAAM,CAAC,4BAA4B,CAAC,UAAU,CAAC,gCAAgC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/action-icon-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component {\n    height: 100%;\n    border-radius: var(--border-radius-pill);\n    min-width: 48px;\n}\n\n.iconWrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 30px;\n    width: 30px;\n    border-radius: var(--border-radius-circle);\n    background: var(--color-light-neutral-translucent-100);\n    vertical-align: middle;\n\n    &.back {\n        background: transparent;\n    }\n}\n\n.floating {\n    & path {\n        fill: var(--color-light-neutral-translucent-700);\n    }\n\n    &:hover {\n        & path {\n            fill: var(--color-light-neutral-translucent-700-hover);\n        }\n    }\n\n    &:active {\n        & path {\n            fill: var(--color-light-neutral-translucent-700-press);\n        }\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,aAAa,CAAC,mCAAmC,CAAC,MAAM,CAAC,4BAA4B,CAAC,UAAU,CAAC,gCAAgC,CAAC;;;;"}

package/modern/components/action-text-addon/index.css

@@ -3,8 +3,8 @@
     --gap-m: 16px;
     --gap-8: var(--gap-xs);
     --gap-16: var(--gap-m);
-} .navigation-bar__component_b4ffc {
+} .navigation-bar__component_183p4 {
     height: 100%;
-} .navigation-bar__text_b4ffc {
+} .navigation-bar__text_183p4 {
     padding: var(--gap-8) var(--gap-16);
 }

package/modern/components/action-text-addon/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"navigation-bar__component_b4ffc","text":"navigation-bar__text_b4ffc"};
+const styles = {"component":"navigation-bar__component_183p4","text":"navigation-bar__text_183p4"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/action-text-addon/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/action-text-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    height: 100%;\n}\n\n.text {\n    padding: var(--gap-8) var(--gap-16);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,MAAM,CAAC,4BAA4B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/action-text-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component {\n    height: 100%;\n}\n\n.text {\n    padding: var(--gap-8) var(--gap-16);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,MAAM,CAAC,4BAA4B,CAAC;;;;"}

package/modern/index.css

@@ -10,60 +10,60 @@
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
     --gap-16: var(--gap-m);
-} .navigation-bar__component_1q5nn {
+} .navigation-bar__component_495rc {
     padding: var(--gap-8) var(--gap-4);
     box-sizing: border-box;
     width: 100%;
-} .navigation-bar__sticky_1q5nn {
+} .navigation-bar__sticky_495rc {
     position: sticky;
     top: var(--gap-0);
     z-index: 1;
-} .navigation-bar__border_1q5nn {
+} .navigation-bar__border_495rc {
     box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
-} .navigation-bar__mainLine_1q5nn {
+} .navigation-bar__mainLine_495rc {
     display: flex;
     background-color: inherit;
     justify-content: space-between;
     min-height: 40px;
     align-items: stretch;
-} .navigation-bar__left_1q5nn {
+} .navigation-bar__left_495rc {
     text-align: left;
-} .navigation-bar__center_1q5nn {
+} .navigation-bar__center_495rc {
     text-align: center;
-} .navigation-bar__children_1q5nn {
+} .navigation-bar__children_495rc {
     width: 100%;
-} .navigation-bar__content_1q5nn {
+} .navigation-bar__content_495rc {
     display: flex;
     flex-grow: 1;
     justify-content: center;
     flex-flow: column nowrap;
-    color: var(--color-light-text-primary)
-} .navigation-bar__content_1q5nn.navigation-bar__left_1q5nn {
+    color: var(--color-light-text-primary);
+} .navigation-bar__content_495rc.navigation-bar__left_495rc {
         padding: var(--gap-0) var(--gap-16);
-    } .navigation-bar__content_1q5nn > .navigation-bar__title_1q5nn,
-    .navigation-bar__content_1q5nn > .navigation-bar__subtitle_1q5nn {
+    } .navigation-bar__content_495rc > .navigation-bar__title_495rc,
+    .navigation-bar__content_495rc > .navigation-bar__subtitle_495rc {
         -webkit-line-clamp: 1;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         overflow: hidden;
         word-break: break-all;
-    } .navigation-bar__title_1q5nn {
+    } .navigation-bar__title_495rc {
     font-size: 16px;
     line-height: 20px;
-    font-weight: 500
-} .navigation-bar__title_1q5nn.navigation-bar__left_1q5nn {
+    font-weight: 500;
+} .navigation-bar__title_495rc.navigation-bar__left_495rc {
         font-size: 20px;
         line-height: 28px;
         font-weight: 600;
-    } .navigation-bar__subtitle_1q5nn {
+    } .navigation-bar__subtitle_495rc {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     color: var(--color-light-text-secondary);
-} .navigation-bar__addons_1q5nn {
+} .navigation-bar__addons_495rc {
     min-width: 48px;
     display: flex;
     justify-content: center;
-} .navigation-bar__rightAddons_1q5nn {
+} .navigation-bar__rightAddons_495rc {
     margin-left: auto;
 }

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"navigation-bar__component_1q5nn","sticky":"navigation-bar__sticky_1q5nn","border":"navigation-bar__border_1q5nn","mainLine":"navigation-bar__mainLine_1q5nn","left":"navigation-bar__left_1q5nn","center":"navigation-bar__center_1q5nn","children":"navigation-bar__children_1q5nn","content":"navigation-bar__content_1q5nn","title":"navigation-bar__title_1q5nn","subtitle":"navigation-bar__subtitle_1q5nn","addons":"navigation-bar__addons_1q5nn","rightAddons":"navigation-bar__rightAddons_1q5nn"};
+const styles = {"component":"navigation-bar__component_495rc","sticky":"navigation-bar__sticky_495rc","border":"navigation-bar__border_495rc","mainLine":"navigation-bar__mainLine_495rc","left":"navigation-bar__left_495rc","center":"navigation-bar__center_495rc","children":"navigation-bar__children_495rc","content":"navigation-bar__content_495rc","title":"navigation-bar__title_495rc","subtitle":"navigation-bar__subtitle_495rc","addons":"navigation-bar__addons_495rc","rightAddons":"navigation-bar__rightAddons_495rc"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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.component {\n    padding: var(--gap-8) var(--gap-4);\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.sticky {\n    position: sticky;\n    top: var(--gap-0);\n    z-index: 1;\n}\n\n.border {\n    box-shadow: 0 1px 0 0 var(--color-light-neutral-300);\n}\n\n.mainLine {\n    display: flex;\n    background-color: inherit;\n    justify-content: space-between;\n    min-height: 40px;\n    align-items: stretch;\n}\n\n.left {\n    text-align: left;\n}\n\n.center {\n    text-align: center;\n}\n\n.children {\n    width: 100%;\n}\n\n.content {\n    display: flex;\n    flex-grow: 1;\n    justify-content: center;\n    flex-flow: column nowrap;\n    color: var(--color-light-text-primary);\n\n    &.left {\n        padding: var(--gap-0) var(--gap-16);\n    }\n\n    & > .title,\n    & > .subtitle {\n        @mixin row_limit 1;\n        word-break: break-all;\n    }\n}\n\n.title {\n    @mixin action_component_primary;\n\n    &.left {\n        @mixin headline-system-mobile_small;\n    }\n}\n\n.subtitle {\n    @mixin paragraph_primary_small;\n    color: var(--color-light-text-secondary);\n}\n\n.addons {\n    min-width: 48px;\n    display: flex;\n    justify-content: center;\n}\n\n.rightAddons {\n    margin-left: auto;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,MAAM,CAAC,4BAA4B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,SAAS,CAAC,+BAA+B,CAAC,OAAO,CAAC,6BAA6B,CAAC,UAAU,CAAC,gCAAgC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,aAAa,CAAC,mCAAmC,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.component {\n    padding: var(--gap-8) var(--gap-4);\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.sticky {\n    position: sticky;\n    top: var(--gap-0);\n    z-index: 1;\n}\n\n.border {\n    box-shadow: 0 1px 0 0 var(--color-light-neutral-300);\n}\n\n.mainLine {\n    display: flex;\n    background-color: inherit;\n    justify-content: space-between;\n    min-height: 40px;\n    align-items: stretch;\n}\n\n.left {\n    text-align: left;\n}\n\n.center {\n    text-align: center;\n}\n\n.children {\n    width: 100%;\n}\n\n.content {\n    display: flex;\n    flex-grow: 1;\n    justify-content: center;\n    flex-flow: column nowrap;\n    color: var(--color-light-text-primary);\n\n    &.left {\n        padding: var(--gap-0) var(--gap-16);\n    }\n\n    & > .title,\n    & > .subtitle {\n        @mixin row_limit 1;\n        word-break: break-all;\n    }\n}\n\n.title {\n    @mixin action_component_primary;\n\n    &.left {\n        @mixin headline-system-mobile_small;\n    }\n}\n\n.subtitle {\n    @mixin paragraph_primary_small;\n    color: var(--color-light-text-secondary);\n}\n\n.addons {\n    min-width: 48px;\n    display: flex;\n    justify-content: center;\n}\n\n.rightAddons {\n    margin-left: auto;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,MAAM,CAAC,4BAA4B,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,SAAS,CAAC,+BAA+B,CAAC,OAAO,CAAC,6BAA6B,CAAC,UAAU,CAAC,gCAAgC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,aAAa,CAAC,mCAAmC,CAAC;;;;"}

package/moderncssm/Component.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export interface NavigationBarProps {
     /**
      * Заголовок

package/moderncssm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport styles from './index.module.css';\n\nexport interface NavigationBarProps {\n    /**\n     * Заголовок\n     */\n    title?: string;\n\n    /**\n     * Подзаголовок\n     */\n    subtitle?: string;\n\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Выравнивание заголовка\n     * @default center\n     */\n    align?: 'left' | 'center';\n\n    /**\n     * Цвет фона\n     */\n    backgroundColor?: string;\n\n    /**\n     * Наличие бордера\n     */\n    border?: boolean;\n\n    /**\n     * Фиксирует шапку\n     */\n    sticky?: boolean;\n\n    /**\n     * Слот снизу\n     */\n    bottomAddons?: ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: ReactNode;\n\n    /**\n     * Дополнительный класс для контента\n     */\n    contentClassName?: string;\n\n    /**\n     * Дополнительный класс для обертки контента\n     */\n    contentWrapperClassName?: string;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для правого аддона\n     */\n    rightAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для левого аддона\n     */\n    leftAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для нижнего аддона\n     */\n    bottomAddonsClassName?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования.\n     */\n    dataTestId?: string;\n}\n\nexport const NavigationBar = forwardRef<HTMLDivElement, NavigationBarProps>(\n    (\n        {\n            align = 'center',\n            rightAddons,\n            leftAddons,\n            bottomAddons,\n            sticky,\n            border,\n            subtitle,\n            title,\n            children,\n            backgroundColor = 'var(--color-light-base-bg-primary)',\n            contentWrapperClassName,\n            className,\n            contentClassName,\n            rightAddonsClassName,\n            leftAddonsClassName,\n            bottomAddonsClassName,\n            dataTestId,\n        },\n        ref,\n    ) => {\n        const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n        const leftAddonsRef = useRef<HTMLDivElement>(null);\n        const rightAddonsRef = useRef<HTMLDivElement>(null);\n        const hasLeftAddons = leftAddons && align !== 'left';\n\n        // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов\n        useEffect(() => {\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 = prev.left !== newState.left || prev.right !== newState.right;\n\n                return isStateChanged ? newState : prev;\n            });\n        }, [hasLeftAddons, leftAddons, rightAddons]);\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    {\n                        [styles.border]: border,\n                        [styles.sticky]: sticky,\n                    },\n                    className,\n                )}\n                style={{\n                    ...(backgroundColor && { backgroundColor }),\n                }}\n                data-test-id={dataTestId}\n            >\n                <div className={cn(styles.mainLine, styles[align], contentClassName)}>\n                    {hasLeftAddons && (\n                        <div className={cn(styles.addons, leftAddonsClassName)} ref={leftAddonsRef}>\n                            {leftAddons}\n                        </div>\n                    )}\n\n                    {children && <div className={styles.children}>{children}</div>}\n\n                    {title && (\n                        <div\n                            className={cn(styles.content, contentWrapperClassName, {\n                                [styles[align]]: !hasLeftAddons,\n                            })}\n                            style={{\n                                ...(align === 'center'\n                                    ? {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      }\n                                    : null),\n                            }}\n                        >\n                            <div\n                                className={cn(styles.title, {\n                                    [styles[align]]: !hasLeftAddons && !subtitle,\n                                })}\n                                data-test-id={getDataTestId(dataTestId, 'title')}\n                            >\n                                {title}\n                            </div>\n\n                            {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                    {rightAddons && (\n                        <div\n                            className={cn(styles.rightAddons, styles.addons, rightAddonsClassName)}\n                            ref={rightAddonsRef}\n                        >\n                            {rightAddons}\n                        </div>\n                    )}\n                </div>\n\n                {bottomAddons && <div className={bottomAddonsClassName}>{bottomAddons}</div>}\n            </div>\n        );\n    },\n);\n\nNavigationBar.displayName = 'NavigationBar';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, type ReactNode, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport styles from './index.module.css';\n\nexport interface NavigationBarProps {\n    /**\n     * Заголовок\n     */\n    title?: string;\n\n    /**\n     * Подзаголовок\n     */\n    subtitle?: string;\n\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Выравнивание заголовка\n     * @default center\n     */\n    align?: 'left' | 'center';\n\n    /**\n     * Цвет фона\n     */\n    backgroundColor?: string;\n\n    /**\n     * Наличие бордера\n     */\n    border?: boolean;\n\n    /**\n     * Фиксирует шапку\n     */\n    sticky?: boolean;\n\n    /**\n     * Слот снизу\n     */\n    bottomAddons?: ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: ReactNode;\n\n    /**\n     * Дополнительный класс для контента\n     */\n    contentClassName?: string;\n\n    /**\n     * Дополнительный класс для обертки контента\n     */\n    contentWrapperClassName?: string;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для правого аддона\n     */\n    rightAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для левого аддона\n     */\n    leftAddonsClassName?: string;\n\n    /**\n     * Дополнительный класс для нижнего аддона\n     */\n    bottomAddonsClassName?: string;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования.\n     */\n    dataTestId?: string;\n}\n\nexport const NavigationBar = forwardRef<HTMLDivElement, NavigationBarProps>(\n    (\n        {\n            align = 'center',\n            rightAddons,\n            leftAddons,\n            bottomAddons,\n            sticky,\n            border,\n            subtitle,\n            title,\n            children,\n            backgroundColor = 'var(--color-light-base-bg-primary)',\n            contentWrapperClassName,\n            className,\n            contentClassName,\n            rightAddonsClassName,\n            leftAddonsClassName,\n            bottomAddonsClassName,\n            dataTestId,\n        },\n        ref,\n    ) => {\n        const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n        const leftAddonsRef = useRef<HTMLDivElement>(null);\n        const rightAddonsRef = useRef<HTMLDivElement>(null);\n        const hasLeftAddons = leftAddons && align !== 'left';\n\n        // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов\n        useEffect(() => {\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 = prev.left !== newState.left || prev.right !== newState.right;\n\n                return isStateChanged ? newState : prev;\n            });\n        }, [hasLeftAddons, leftAddons, rightAddons]);\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    {\n                        [styles.border]: border,\n                        [styles.sticky]: sticky,\n                    },\n                    className,\n                )}\n                style={{\n                    ...(backgroundColor && { backgroundColor }),\n                }}\n                data-test-id={dataTestId}\n            >\n                <div className={cn(styles.mainLine, styles[align], contentClassName)}>\n                    {hasLeftAddons && (\n                        <div className={cn(styles.addons, leftAddonsClassName)} ref={leftAddonsRef}>\n                            {leftAddons}\n                        </div>\n                    )}\n\n                    {children && <div className={styles.children}>{children}</div>}\n\n                    {title && (\n                        <div\n                            className={cn(styles.content, contentWrapperClassName, {\n                                [styles[align]]: !hasLeftAddons,\n                            })}\n                            style={{\n                                ...(align === 'center'\n                                    ? {\n                                          marginLeft: titleMargin.left,\n                                          marginRight: titleMargin.right,\n                                      }\n                                    : null),\n                            }}\n                        >\n                            <div\n                                className={cn(styles.title, {\n                                    [styles[align]]: !hasLeftAddons && !subtitle,\n                                })}\n                                data-test-id={getDataTestId(dataTestId, 'title')}\n                            >\n                                {title}\n                            </div>\n\n                            {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                    {rightAddons && (\n                        <div\n                            className={cn(styles.rightAddons, styles.addons, rightAddonsClassName)}\n                            ref={rightAddonsRef}\n                        >\n                            {rightAddons}\n                        </div>\n                    )}\n                </div>\n\n                {bottomAddons && <div className={bottomAddonsClassName}>{bottomAddons}</div>}\n            </div>\n        );\n    },\n);\n\nNavigationBar.displayName = 'NavigationBar';\n"],"names":[],"mappings":"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"}

package/moderncssm/components/action-icon-addon/index.module.css

@@ -1,3 +1,5 @@
+
+
 .component {
     height: 100%;
     border-radius: var(--border-radius-pill);
@@ -12,7 +14,7 @@
     width: 30px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-neutral-translucent-100);
-    vertical-align: middle
+    vertical-align: middle;
 }
 
 .iconWrapper.back {

package/moderncssm/components/action-text-addon/index.module.css

@@ -1,3 +1,5 @@
+
+
 .component {
     height: 100%;
 }

package/moderncssm/index.module.css

@@ -1,3 +1,5 @@
+
+
 .component {
     padding: var(--gap-8) var(--gap-4);
     box-sizing: border-box;
@@ -39,7 +41,7 @@
     flex-grow: 1;
     justify-content: center;
     flex-flow: column nowrap;
-    color: var(--color-light-text-primary)
+    color: var(--color-light-text-primary);
 }
 
 .content.left {
@@ -58,7 +60,7 @@
 .title {
     font-size: 16px;
     line-height: 20px;
-    font-weight: 500
+    font-weight: 500;
 }
 
 .title.left {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-navigation-bar",
-    "version": "2.0.1",
+    "version": "2.0.2",
     "description": "NavigationBar",
     "keywords": [],
     "license": "MIT",
@@ -12,7 +12,7 @@
     "dependencies": {
         "@alfalab/core-components-button": "^12.0.1",
         "@alfalab/core-components-shared": "^1.1.0",
-        "@alfalab/core-components-typography": "^5.0.1",
+        "@alfalab/core-components-typography": "^5.0.2",
         "@alfalab/icons-glyph": "^2.247.0",
         "classnames": "^2.5.1",
         "tslib": "^2.4.0"
@@ -25,6 +25,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.1.0",
+    "themesVersion": "14.1.2",
     "varsVersion": "10.1.0"
 }

package/src/Component.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, type ReactNode, useEffect, useRef, useState } from 'react';
 import cn from 'classnames';
 
 import { getDataTestId } from '@alfalab/core-components-shared';

package/src/components/action-icon-addon/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 .component {
     height: 100%;

package/src/components/action-text-addon/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 .component {
     height: 100%;

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 .component {
     padding: var(--gap-8) var(--gap-4);