@hh.ru/magritte-ui-nav-bar 1.0.1

package/public/Pane.js

@@ -0,0 +1,79 @@
+import './../index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Children, isValidElement, cloneElement } from 'react';
+import { useMotionValue, motion } from 'motion/react';
+import { MorphStoreProvider } from '../internal/MorphStore.js';
+import { usePaneStore, PaneContext } from '../internal/PaneStore.js';
+import { useSyncMotionValue } from '../internal/useSyncMotionValue.js';
+import { useInitOnce, useStoreSyncedTransform, lerp } from '../internal/utils.js';
+import { EnvironmentFingerprintProvider } from './EnvironmentFingerprintNode.js';
+import { LayoutStage } from './LayoutStage.js';
+import { Stage } from './Stage.js';
+import { s as styles } from '../NavBar-CrD8CEWb.js';
+import '../internal/KeyedSubscriptions.js';
+import 'motion';
+import '../internal/MetricsProvider.js';
+import 'classnames';
+import '@hh.ru/magritte-common-use-when-font-loaded';
+import '@hh.ru/magritte-ui-divider';
+import '@hh.ru/magritte-ui-layer';
+import '../internal/ProgressiveBlur.js';
+import '../internal/useAnimationRanges.js';
+import '../internal/useBindScrollToAnimationProgress.js';
+import '../internal/useDivider.js';
+import '../internal/useNavBarMetrics.js';
+import '../internal/useResetFocus.js';
+import '../internal/useScrollAdapter.js';
+import '@hh.ru/magritte-internal-custom-scroll';
+import '../internal/useSnapScroll.js';
+
+const renderPaneChilds = (children, foldable) => {
+    const items = Children.toArray(children);
+    const stageContainers = items.filter((child) => isValidElement(child) && child.type === Stage);
+    const layoutStageContainers = items.filter((child) => isValidElement(child) && child.type === LayoutStage);
+    if ((stageContainers.length === 0 && layoutStageContainers.length === 0) || foldable) {
+        return jsx(Stage, { animationStage: "only", children: children });
+    }
+    if (layoutStageContainers.length > 0) {
+        return cloneElement(layoutStageContainers[0]);
+    }
+    stageContainers.length = Math.min(stageContainers.length, 2);
+    return stageContainers.map((child, index) => {
+        return cloneElement(child, {
+            ...child.props,
+            animationStage: stageContainers.length === 1 ? 'only' : ['start', 'end'][index],
+        });
+    });
+};
+const Pane = ({ children, nextPane, foldable, animationProgress }) => {
+    const paneStore = usePaneStore();
+    const y = useMotionValue(0);
+    const nextPaneY = useMotionValue(0);
+    const backgroundScale = useMotionValue(1);
+    const backgroundY = useMotionValue(0);
+    useSyncMotionValue(paneStore.get('motionValue'), animationProgress);
+    const contentHeight = useMotionValue('auto');
+    useInitOnce(() => paneStore.onChange('startHeight', () => contentHeight.set(paneStore.get('startHeight') ?? 'auto')));
+    paneStore.set({ foldable });
+    useStoreSyncedTransform(paneStore.get('motionValue'), paneStore, ['startHeight', 'endHeight'], () => ({
+        start: paneStore.get('startHeight') ?? 0,
+        end: paneStore.get('endHeight') ?? paneStore.get('startHeight') ?? 0,
+    }), (height, progress) => {
+        const heightDiff = height.end - height.start;
+        const shift = foldable ? progress * -height.start : 0;
+        y.set(shift);
+        nextPaneY.set(progress * heightDiff);
+        backgroundY.set(-shift);
+        backgroundScale.set(height.start === 0 ? 1 : lerp(height.start, foldable ? 0 : height.end, progress) / height.start);
+    });
+    return (jsxs(motion.div, { className: styles.pane, style: { y: foldable ? y : 0 }, children: [jsx(EnvironmentFingerprintProvider, { children: jsxs(motion.div, { className: styles.paneContent, style: { height: contentHeight }, children: [jsx(PaneContext.Provider, { value: paneStore, children: jsx(MorphStoreProvider, { children: renderPaneChilds(children, !!foldable) }) }), jsx(motion.div, { className: styles.paneBackground, "data-foldable": foldable, style: { scaleY: backgroundScale, y: backgroundY } })] }) }), !!nextPane && (jsx(motion.div, { className: styles.nextPane, 
+                // если foldable уезжаем под контент, если нет то надо быть над контентом панели идущей перед
+                // т.к. если контент сверху становится меньше, то во время фейда следующая панель
+                // должна быть над ним, иначе исчезающий контент будет накладываться поверх панели пока
+                // не дойдем до конечной точки анимации, выглядит некрасиво
+                style: { y: nextPaneY, zIndex: nextPane.props.foldable ? 0 : 3 }, children: nextPane }))] }));
+};
+const ExternalPane = Pane;
+
+export { ExternalPane, Pane };
+//# sourceMappingURL=Pane.js.map

package/public/Pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pane.js","sources":["../../src/public/Pane.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    isValidElement,\n    type FC,\n    type ReactNode,\n    type JSXElementConstructor,\n    type PropsWithChildren,\n    type ReactElement,\n} from 'react';\nimport { useMotionValue, motion, type MotionValue } from 'motion/react';\n\nimport { MorphStoreProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { PaneContext, usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { lerp, useInitOnce, useStoreSyncedTransform } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { EnvironmentFingerprintProvider } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { LayoutStage } from '@hh.ru/magritte-ui-nav-bar/public/LayoutStage';\nimport { Stage, type StageProps } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport type InternalPaneProps = PropsWithChildren<{\n    foldable?: boolean;\n    nextPane?: ReactElement<InternalPaneProps, JSXElementConstructor<InternalPaneProps>> | null;\n    animationProgress?: MotionValue<number>;\n}>;\nexport type ExternalPaneProps = PropsWithChildren<{\n    /**\n     * Включает режим когда панель \"схлопывается\" под стоящую над ней панель.\n     */\n    foldable?: boolean;\n    /**\n     * Принимает MotionValue значение которого будет обновляться синхронно с анимацией панели.\n     * Прогресс анимации представляется в виде числа 0..1\n     * Предназначен для синхронизации внешних анимаций с анимацией панели.\n     */\n    animationProgress?: MotionValue<number>;\n}>;\n\nexport type PaneElement = ReactElement<ExternalPaneProps, JSXElementConstructor<ExternalPaneProps>>;\n\nconst renderPaneChilds = (children: ReactNode, foldable: boolean) => {\n    const items = Children.toArray(children);\n    const stageContainers = items.filter((child) => isValidElement(child) && child.type === Stage) as ReactElement<\n        StageProps,\n        JSXElementConstructor<StageProps>\n    >[];\n    const layoutStageContainers = items.filter(\n        (child) => isValidElement(child) && child.type === LayoutStage\n    ) as ReactElement<PropsWithChildren, JSXElementConstructor<PropsWithChildren>>[];\n\n    if ((stageContainers.length === 0 && layoutStageContainers.length === 0) || foldable) {\n        return <Stage animationStage=\"only\">{children}</Stage>;\n    }\n\n    if (layoutStageContainers.length > 0) {\n        return cloneElement(layoutStageContainers[0]);\n    }\n\n    stageContainers.length = Math.min(stageContainers.length, 2);\n\n    return stageContainers.map((child, index) => {\n        return cloneElement(child, {\n            ...child.props,\n            animationStage: stageContainers.length === 1 ? 'only' : (['start', 'end'] as const)[index],\n        });\n    });\n};\n\nexport const Pane: FC<InternalPaneProps> = ({ children, nextPane, foldable, animationProgress }) => {\n    const paneStore = usePaneStore();\n\n    const y = useMotionValue(0);\n    const nextPaneY = useMotionValue(0);\n    const backgroundScale = useMotionValue(1);\n    const backgroundY = useMotionValue(0);\n    useSyncMotionValue(paneStore.get('motionValue'), animationProgress);\n\n    const contentHeight = useMotionValue<number | 'auto'>('auto');\n    useInitOnce(() =>\n        paneStore.onChange('startHeight', () => contentHeight.set(paneStore.get('startHeight') ?? 'auto'))\n    );\n\n    paneStore.set({ foldable });\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        paneStore,\n        ['startHeight', 'endHeight'],\n        () => ({\n            start: paneStore.get('startHeight') ?? 0,\n            end: paneStore.get('endHeight') ?? paneStore.get('startHeight') ?? 0,\n        }),\n        (height, progress) => {\n            const heightDiff = height.end - height.start;\n            const shift = foldable ? progress * -height.start : 0;\n            y.set(shift);\n            nextPaneY.set(progress * heightDiff);\n            backgroundY.set(-shift);\n            backgroundScale.set(\n                height.start === 0 ? 1 : lerp(height.start, foldable ? 0 : height.end, progress) / height.start\n            );\n        }\n    );\n\n    return (\n        <motion.div className={styles.pane} style={{ y: foldable ? y : 0 }}>\n            <EnvironmentFingerprintProvider>\n                <motion.div className={styles.paneContent} style={{ height: contentHeight }}>\n                    <PaneContext.Provider value={paneStore}>\n                        <MorphStoreProvider>{renderPaneChilds(children, !!foldable)}</MorphStoreProvider>\n                    </PaneContext.Provider>\n                    <motion.div\n                        className={styles.paneBackground}\n                        data-foldable={foldable}\n                        style={{ scaleY: backgroundScale, y: backgroundY }}\n                    />\n                </motion.div>\n            </EnvironmentFingerprintProvider>\n\n            {!!nextPane && (\n                <motion.div\n                    className={styles.nextPane}\n                    // если foldable уезжаем под контент, если нет то надо быть над контентом панели идущей перед\n                    // т.к. если контент сверху становится меньше, то во время фейда следующая панель\n                    // должна быть над ним, иначе исчезающий контент будет накладываться поверх панели пока\n                    // не дойдем до конечной точки анимации, выглядит некрасиво\n                    style={{ y: nextPaneY, zIndex: nextPane.props.foldable ? 0 : 3 }}\n                >\n                    {nextPane}\n                </motion.div>\n            )}\n        </motion.div>\n    );\n};\n\nexport const ExternalPane = Pane as FC<PropsWithChildren<ExternalPaneProps>>;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/public/Stage.d.ts

@@ -0,0 +1,10 @@
+import { type FC, type PropsWithChildren } from 'react';
+import { HTMLMotionProps } from 'motion/react';
+type AnimationStage = 'start' | 'end' | 'only';
+export declare const useAnimationStage: () => AnimationStage;
+export type StageProps = PropsWithChildren<{
+    animationStage?: AnimationStage;
+} & HTMLMotionProps<'div'>>;
+export declare const Stage: FC<StageProps>;
+export declare const ExternalStage: FC<PropsWithChildren>;
+export {};

package/public/Stage.js

@@ -0,0 +1,43 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useRef } from 'react';
+import classNames from 'classnames';
+import { useTransform, motion } from 'motion/react';
+import { useMeasureAuto } from '../internal/MetricsProvider.js';
+import { usePaneStore } from '../internal/PaneStore.js';
+import { EnvironmentFingerprintNode } from './EnvironmentFingerprintNode.js';
+import { s as styles } from '../NavBar-CrD8CEWb.js';
+import '../internal/utils.js';
+import 'motion';
+import '../internal/KeyedSubscriptions.js';
+import '@hh.ru/magritte-ui-divider';
+import '@hh.ru/magritte-ui-layer';
+import '../internal/ProgressiveBlur.js';
+import '../internal/useAnimationRanges.js';
+import '../internal/useBindScrollToAnimationProgress.js';
+import '../internal/useDivider.js';
+import '../internal/useNavBarMetrics.js';
+import '../internal/useResetFocus.js';
+import '../internal/useScrollAdapter.js';
+import '@hh.ru/magritte-internal-custom-scroll';
+import '../internal/useSnapScroll.js';
+import '../internal/useSyncMotionValue.js';
+
+const AnimationStageContext = createContext('only');
+const useAnimationStage = () => useContext(AnimationStageContext);
+const Stage = ({ children, animationStage = 'only', ...rest }) => {
+    const rootRef = useRef(null);
+    const paneStore = usePaneStore();
+    const isStartState = animationStage === 'start' || animationStage === 'only';
+    const isEndState = animationStage === 'end' || animationStage === 'only';
+    const isOnly = animationStage === 'only';
+    const motionValue = paneStore.get('motionValue');
+    const opacity = useTransform(motionValue, [0, 1], isStartState ? [1, 0] : [0, 1]);
+    const pointerEvents = useTransform(motionValue, (value) => (isStartState && value === 0) || (isEndState && value === 1) ? 'auto' : 'none');
+    useMeasureAuto(rootRef, (rect) => paneStore.set({ top: rect.top, [isStartState ? 'startHeight' : 'endHeight']: rect.height }), [animationStage, paneStore]);
+    return (jsx(motion.div, { ...rest, className: isStartState ? styles.startStateContainer : styles.endStateContainer, style: isOnly && !paneStore.get('foldable') ? {} : { opacity, pointerEvents }, children: jsx(EnvironmentFingerprintNode, { ref: rootRef, className: classNames(styles.contentContainer, styles.navBarStage), children: jsx(AnimationStageContext.Provider, { value: animationStage ?? 'only', children: children }) }) }));
+};
+const ExternalStage = Stage;
+
+export { ExternalStage, Stage, useAnimationStage };
+//# sourceMappingURL=Stage.js.map

package/public/Stage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stage.js","sources":["../../src/public/Stage.tsx"],"sourcesContent":["import { createContext, useContext, useRef, type FC, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { useTransform, motion, HTMLMotionProps } from 'motion/react';\n\nimport { useMeasureAuto } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { EnvironmentFingerprintNode } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\n\nimport styles from './nav-bar.less';\n\ntype AnimationStage = 'start' | 'end' | 'only';\n\nconst AnimationStageContext = createContext<AnimationStage>('only');\n\nexport const useAnimationStage = (): AnimationStage => useContext(AnimationStageContext);\n\nexport type StageProps = PropsWithChildren<{ animationStage?: AnimationStage } & HTMLMotionProps<'div'>>;\n\nexport const Stage: FC<StageProps> = ({ children, animationStage = 'only', ...rest }) => {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const paneStore = usePaneStore();\n    const isStartState = animationStage === 'start' || animationStage === 'only';\n    const isEndState = animationStage === 'end' || animationStage === 'only';\n    const isOnly = animationStage === 'only';\n    const motionValue = paneStore.get('motionValue');\n    const opacity = useTransform(motionValue, [0, 1], isStartState ? [1, 0] : [0, 1]);\n    const pointerEvents = useTransform(motionValue, (value) =>\n        (isStartState && value === 0) || (isEndState && value === 1) ? 'auto' : 'none'\n    );\n\n    useMeasureAuto(\n        rootRef,\n        (rect) => paneStore.set({ top: rect.top, [isStartState ? 'startHeight' : 'endHeight']: rect.height }),\n        [animationStage, paneStore]\n    );\n\n    return (\n        <motion.div\n            {...rest}\n            className={isStartState ? styles.startStateContainer : styles.endStateContainer}\n            style={isOnly && !paneStore.get('foldable') ? {} : { opacity, pointerEvents }}\n        >\n            <EnvironmentFingerprintNode\n                ref={rootRef}\n                className={classNames(styles.contentContainer, styles.navBarStage)}\n            >\n                <AnimationStageContext.Provider value={animationStage ?? 'only'}>\n                    {children}\n                </AnimationStageContext.Provider>\n            </EnvironmentFingerprintNode>\n        </motion.div>\n    );\n};\n\nexport const ExternalStage = Stage as FC<PropsWithChildren>;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,qBAAqB,GAAG,aAAa,CAAiB,MAAM,CAAC,CAAC;AAEvD,MAAA,iBAAiB,GAAG,MAAsB,UAAU,CAAC,qBAAqB,EAAE;AAI5E,MAAA,KAAK,GAAmB,CAAC,EAAE,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,GAAG,IAAI,EAAE,KAAI;AACpF,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC7C,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM,CAAC;IAC7E,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM,CAAC;AACzE,IAAA,MAAM,MAAM,GAAG,cAAc,KAAK,MAAM,CAAC;IACzC,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;AACjD,IAAA,MAAM,OAAO,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAClF,IAAA,MAAM,aAAa,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,KAAK,KAClD,CAAC,YAAY,IAAI,KAAK,KAAK,CAAC,MAAM,UAAU,IAAI,KAAK,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,CACjF,CAAC;AAEF,IAAA,cAAc,CACV,OAAO,EACP,CAAC,IAAI,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,YAAY,GAAG,aAAa,GAAG,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EACrG,CAAC,cAAc,EAAE,SAAS,CAAC,CAC9B,CAAC;AAEF,IAAA,QACIA,GAAC,CAAA,MAAM,CAAC,GAAG,EAAA,EAAA,GACH,IAAI,EACR,SAAS,EAAE,YAAY,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,iBAAiB,EAC/E,KAAK,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,aAAa,EAAE,YAE7EA,GAAC,CAAA,0BAA0B,IACvB,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,WAAW,CAAC,EAElE,QAAA,EAAAA,GAAA,CAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,IAAI,MAAM,EAC1D,QAAA,EAAA,QAAQ,GACoB,EACR,CAAA,EAAA,CACpB,EACf;AACN,EAAE;AAEK,MAAM,aAAa,GAAG;;;;"}

package/public/TitleContainer.d.ts

@@ -0,0 +1,24 @@
+import { type FC, type ReactNode } from 'react';
+export interface TitleContainerProps {
+    /**
+     * Контент левого слота
+     */
+    left?: ReactNode;
+    /**
+     * Контент слота для заголовка
+     */
+    title?: ReactNode;
+    /**
+     * Контент слота для подзаголовка
+     */
+    subtitle?: ReactNode;
+    /**
+     * Контент слота справа от заголовка
+     */
+    icon?: ReactNode;
+    /**
+     * Позволяет выровнять по горизонтали контент слотов для заголовка и подзаголовка
+     */
+    centered?: boolean;
+}
+export declare const TitleContainer: FC<TitleContainerProps>;

package/public/TitleContainer.js

@@ -0,0 +1,34 @@
+import './../index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { Morph } from './Morph.js';
+import { s as styles } from '../NavBar-CrD8CEWb.js';
+import 'react';
+import 'motion/react';
+import '../internal/MetricsProvider.js';
+import '../internal/utils.js';
+import '../internal/MorphStore.js';
+import '../internal/KeyedSubscriptions.js';
+import '../internal/PaneStore.js';
+import 'motion';
+import './EnvironmentFingerprintNode.js';
+import './Stage.js';
+import '@hh.ru/magritte-ui-divider';
+import '@hh.ru/magritte-ui-layer';
+import '../internal/ProgressiveBlur.js';
+import '../internal/useAnimationRanges.js';
+import '../internal/useBindScrollToAnimationProgress.js';
+import '../internal/useDivider.js';
+import '../internal/useNavBarMetrics.js';
+import '../internal/useResetFocus.js';
+import '../internal/useScrollAdapter.js';
+import '@hh.ru/magritte-internal-custom-scroll';
+import '../internal/useSnapScroll.js';
+import '../internal/useSyncMotionValue.js';
+
+const TitleContainer = ({ left, title, icon, subtitle, centered = false }) => {
+    return (jsxs("div", { className: styles.titleContainerWrapper, children: [!!left && (jsx("div", { className: styles.titleLeftSlot, children: jsx(Morph, { id: "title-component-left-slot", className: styles.titleMorphItem, children: left }) })), jsxs("div", { className: classNames(styles.titleMainPart, { [styles.centered]: centered }), children: [jsxs("div", { className: styles.titleContainer, children: [jsx("div", { className: styles.title, children: !!title && (jsx(Morph, { id: "title-component-title", className: styles.titleMorphItem, horizontalPositionAlign: "left", children: title })) }), jsx("div", { className: styles.titleInlineContainer, children: !!icon && (jsx(Morph, { id: "title-component-inline-slot", className: styles.titleMorphItem, children: icon })) })] }), jsx("div", { className: styles.subtitleContainer, children: !!subtitle && (jsx(Morph, { id: "title-component-subtitle", className: styles.titleMorphItem, horizontalPositionAlign: "left", children: subtitle })) })] })] }));
+};
+
+export { TitleContainer };
+//# sourceMappingURL=TitleContainer.js.map

package/public/TitleContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleContainer.js","sources":["../../src/public/TitleContainer.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport { Morph } from '@hh.ru/magritte-ui-nav-bar/public/Morph';\n\nimport styles from './nav-bar.less';\n\nexport interface TitleContainerProps {\n    /**\n     * Контент левого слота\n     */\n    left?: ReactNode;\n    /**\n     * Контент слота для заголовка\n     */\n    title?: ReactNode;\n    /**\n     * Контент слота для подзаголовка\n     */\n    subtitle?: ReactNode;\n    /**\n     * Контент слота справа от заголовка\n     */\n    icon?: ReactNode;\n    /**\n     * Позволяет выровнять по горизонтали контент слотов для заголовка и подзаголовка\n     */\n    centered?: boolean;\n}\n\nexport const TitleContainer: FC<TitleContainerProps> = ({ left, title, icon, subtitle, centered = false }) => {\n    return (\n        <div className={styles.titleContainerWrapper}>\n            {!!left && (\n                <div className={styles.titleLeftSlot}>\n                    <Morph id=\"title-component-left-slot\" className={styles.titleMorphItem}>\n                        {left}\n                    </Morph>\n                </div>\n            )}\n            <div className={classNames(styles.titleMainPart, { [styles.centered]: centered })}>\n                <div className={styles.titleContainer}>\n                    <div className={styles.title}>\n                        {!!title && (\n                            <Morph\n                                id=\"title-component-title\"\n                                className={styles.titleMorphItem}\n                                horizontalPositionAlign=\"left\"\n                            >\n                                {title}\n                            </Morph>\n                        )}\n                    </div>\n                    <div className={styles.titleInlineContainer}>\n                        {!!icon && (\n                            <Morph id=\"title-component-inline-slot\" className={styles.titleMorphItem}>\n                                {icon}\n                            </Morph>\n                        )}\n                    </div>\n                </div>\n                <div className={styles.subtitleContainer}>\n                    {!!subtitle && (\n                        <Morph\n                            id=\"title-component-subtitle\"\n                            className={styles.titleMorphItem}\n                            horizontalPositionAlign=\"left\"\n                        >\n                            {subtitle}\n                        </Morph>\n                    )}\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Ba,MAAA,cAAc,GAA4B,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAI;AACzG,IAAA,QACIA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAA,QAAA,EAAA,CACvC,CAAC,CAAC,IAAI,KACHC,aAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAChC,QAAA,EAAAA,GAAA,CAAC,KAAK,EAAC,EAAA,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,MAAM,CAAC,cAAc,EACjE,QAAA,EAAA,IAAI,GACD,EACN,CAAA,CACT,EACDD,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ,EAAE,CAAC,EAAA,QAAA,EAAA,CAC7EA,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EACjC,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,QAAA,EACvB,CAAC,CAAC,KAAK,KACJA,IAAC,KAAK,EAAA,EACF,EAAE,EAAC,uBAAuB,EAC1B,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,uBAAuB,EAAC,MAAM,EAE7B,QAAA,EAAA,KAAK,GACF,CACX,EAAA,CACC,EACNA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,oBAAoB,EAAA,QAAA,EACtC,CAAC,CAAC,IAAI,KACHA,IAAC,KAAK,EAAA,EAAC,EAAE,EAAC,6BAA6B,EAAC,SAAS,EAAE,MAAM,CAAC,cAAc,EACnE,QAAA,EAAA,IAAI,EACD,CAAA,CACX,GACC,CACJ,EAAA,CAAA,EACNA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA,QAAA,EACnC,CAAC,CAAC,QAAQ,KACPA,GAAA,CAAC,KAAK,EACF,EAAA,EAAE,EAAC,0BAA0B,EAC7B,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,uBAAuB,EAAC,MAAM,EAAA,QAAA,EAE7B,QAAQ,EACL,CAAA,CACX,GACC,CACJ,EAAA,CAAA,CAAA,EAAA,CACJ,EACR;AACN;;;;"}