@hh.ru/magritte-ui-nav-bar 1.3.3 → 1.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{NavBar-QwbK2-9W.js → NavBar-CsMoS3xA.js} +2 -2
- package/{NavBar-QwbK2-9W.js.map → NavBar-CsMoS3xA.js.map} +1 -1
- package/index.css +109 -94
- package/index.js +1 -1
- package/internal/PaneStore.js +1 -1
- package/package.json +2 -2
- package/public/Actions.js +1 -1
- package/public/LayoutMorph.js +1 -1
- package/public/LayoutStage.js +1 -1
- package/public/Morph.js +1 -1
- package/public/NavBar.js +1 -1
- package/public/Pane.js +3 -3
- package/public/Pane.js.map +1 -1
- package/public/Stage.js +1 -1
- package/public/TitleContainer.js +1 -1
|
@@ -15,7 +15,7 @@ import { useSnapScroll } from './internal/useSnapScroll.js';
|
|
|
15
15
|
import { useSyncMotionValue } from './internal/useSyncMotionValue.js';
|
|
16
16
|
import { useInitOnce, scheduleMicro, scheduleMacro, remap } from './internal/utils.js';
|
|
17
17
|
|
|
18
|
-
var styles = {"actions-container":"magritte-actions-container___CBgYW_1-3-
|
|
18
|
+
var styles = {"actions-container":"magritte-actions-container___CBgYW_1-3-4","actionsContainer":"magritte-actions-container___CBgYW_1-3-4","actions-no-children":"magritte-actions-no-children___rgJUl_1-3-4","actionsNoChildren":"magritte-actions-no-children___rgJUl_1-3-4","actions-left-slot":"magritte-actions-left-slot___DNOj0_1-3-4","actionsLeftSlot":"magritte-actions-left-slot___DNOj0_1-3-4","actions-right-slot":"magritte-actions-right-slot___aodtj_1-3-4","actionsRightSlot":"magritte-actions-right-slot___aodtj_1-3-4","navbar-transparent-end":"magritte-navbar-transparent-end___6KqLR_1-3-4","navbarTransparentEnd":"magritte-navbar-transparent-end___6KqLR_1-3-4","actions-start-stage":"magritte-actions-start-stage___MJ67a_1-3-4","actionsStartStage":"magritte-actions-start-stage___MJ67a_1-3-4","actions-side-slot-content":"magritte-actions-side-slot-content___TlHrX_1-3-4","actionsSideSlotContent":"magritte-actions-side-slot-content___TlHrX_1-3-4","actions-icon-morph":"magritte-actions-icon-morph___-nNgW_1-3-4","actionsIconMorph":"magritte-actions-icon-morph___-nNgW_1-3-4","navbar-transparent-start":"magritte-navbar-transparent-start___wysv0_1-3-4","navbarTransparentStart":"magritte-navbar-transparent-start___wysv0_1-3-4","actions-end-stage":"magritte-actions-end-stage___qHtTV_1-3-4","actionsEndStage":"magritte-actions-end-stage___qHtTV_1-3-4","navbar-not-transparent":"magritte-navbar-not-transparent___5KZNp_1-3-4","navbarNotTransparent":"magritte-navbar-not-transparent___5KZNp_1-3-4","actions-only-stage":"magritte-actions-only-stage___cg10A_1-3-4","actionsOnlyStage":"magritte-actions-only-stage___cg10A_1-3-4","actions-side-slot-content-clone":"magritte-actions-side-slot-content-clone___jDxVm_1-3-4","actionsSideSlotContentClone":"magritte-actions-side-slot-content-clone___jDxVm_1-3-4","actions-center-slot":"magritte-actions-center-slot___hLAy6_1-3-4","actionsCenterSlot":"magritte-actions-center-slot___hLAy6_1-3-4","actions-center-slot-centered":"magritte-actions-center-slot-centered___merXQ_1-3-4","actionsCenterSlotCentered":"magritte-actions-center-slot-centered___merXQ_1-3-4","title-container-wrapper":"magritte-title-container-wrapper___DQUcj_1-3-4","titleContainerWrapper":"magritte-title-container-wrapper___DQUcj_1-3-4","title-main-part":"magritte-title-main-part___npoHN_1-3-4","titleMainPart":"magritte-title-main-part___npoHN_1-3-4","title-left-slot":"magritte-title-left-slot___HTE7h_1-3-4","titleLeftSlot":"magritte-title-left-slot___HTE7h_1-3-4","title-container":"magritte-title-container___y9AIx_1-3-4","titleContainer":"magritte-title-container___y9AIx_1-3-4","subtitle-container":"magritte-subtitle-container___nVUBu_1-3-4","subtitleContainer":"magritte-subtitle-container___nVUBu_1-3-4","centered":"magritte-centered___Y2mlP_1-3-4","title-morph-item":"magritte-title-morph-item___t7Wf3_1-3-4","titleMorphItem":"magritte-title-morph-item___t7Wf3_1-3-4","title":"magritte-title___ZbLgP_1-3-4","pane-content":"magritte-pane-content___UVmC6_1-3-4","paneContent":"magritte-pane-content___UVmC6_1-3-4","pane-background":"magritte-pane-background___PDZAX_1-3-4","paneBackground":"magritte-pane-background___PDZAX_1-3-4","morph-item":"magritte-morph-item___8kF46_1-3-4","morphItem":"magritte-morph-item___8kF46_1-3-4","morph-item-top":"magritte-morph-item-top___WPEkn_1-3-4","morphItemTop":"magritte-morph-item-top___WPEkn_1-3-4","morph-item-bottom":"magritte-morph-item-bottom___zNbsF_1-3-4","morphItemBottom":"magritte-morph-item-bottom___zNbsF_1-3-4","morph-item-left":"magritte-morph-item-left___T6AMW_1-3-4","morphItemLeft":"magritte-morph-item-left___T6AMW_1-3-4","morph-item-right":"magritte-morph-item-right___EuT1E_1-3-4","morphItemRight":"magritte-morph-item-right___EuT1E_1-3-4","pane":"magritte-pane___f8eFC_1-3-4","start-state-container":"magritte-start-state-container___giBVb_1-3-4","startStateContainer":"magritte-start-state-container___giBVb_1-3-4","end-state-container":"magritte-end-state-container___uiW8Q_1-3-4","endStateContainer":"magritte-end-state-container___uiW8Q_1-3-4","content-container":"magritte-content-container___7s7vv_1-3-4","contentContainer":"magritte-content-container___7s7vv_1-3-4","next-pane":"magritte-next-pane___H2oxQ_1-3-4","nextPane":"magritte-next-pane___H2oxQ_1-3-4","nav-bar":"magritte-nav-bar___RRGe0_1-3-4","navBar":"magritte-nav-bar___RRGe0_1-3-4","nav-bar-overlay":"magritte-nav-bar-overlay___Mq5ZD_1-3-4","navBarOverlay":"magritte-nav-bar-overlay___Mq5ZD_1-3-4","nav-bar-overlay-wrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-3-4","navBarOverlayWrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-3-4","nav-bar-content-container":"magritte-nav-bar-content-container___H-WMO_1-3-4","navBarContentContainer":"magritte-nav-bar-content-container___H-WMO_1-3-4","nav-bar-panes-container":"magritte-nav-bar-panes-container___5ZDLa_1-3-4","navBarPanesContainer":"magritte-nav-bar-panes-container___5ZDLa_1-3-4","nav-bar-progressive-blur":"magritte-nav-bar-progressive-blur___qyeUV_1-3-4","navBarProgressiveBlur":"magritte-nav-bar-progressive-blur___qyeUV_1-3-4","nav-bar-stage":"magritte-nav-bar-stage___amDz7_1-3-4","navBarStage":"magritte-nav-bar-stage___amDz7_1-3-4","last-pane":"magritte-last-pane___Hf2No_1-3-4","lastPane":"magritte-last-pane___Hf2No_1-3-4","metrics-mode":"magritte-metrics-mode___h38aX_1-3-4","metricsMode":"magritte-metrics-mode___h38aX_1-3-4","layout-morph":"magritte-layout-morph___I3SPy_1-3-4","layoutMorph":"magritte-layout-morph___I3SPy_1-3-4","animation-stage-progress":"magritte-animation-stage-progress___5FthT_1-3-4","animationStageProgress":"magritte-animation-stage-progress___5FthT_1-3-4","layout-morph-start":"magritte-layout-morph-start___9-krP_1-3-4","layoutMorphStart":"magritte-layout-morph-start___9-krP_1-3-4","layout-morph-end":"magritte-layout-morph-end___LIg4d_1-3-4","layoutMorphEnd":"magritte-layout-morph-end___LIg4d_1-3-4","divider-container":"magritte-divider-container___-NdWi_1-3-4","dividerContainer":"magritte-divider-container___-NdWi_1-3-4"};
|
|
19
19
|
|
|
20
20
|
const NavBarContext = createContext(null);
|
|
21
21
|
const useNavBarContext = () => useContext(NavBarContext);
|
|
@@ -113,4 +113,4 @@ const NavBar = ({ children, transparent = false, startTriggerPosition = 'start',
|
|
|
113
113
|
};
|
|
114
114
|
|
|
115
115
|
export { NavBar as N, styles as s, useNavBarContext as u };
|
|
116
|
-
//# sourceMappingURL=NavBar-
|
|
116
|
+
//# sourceMappingURL=NavBar-CsMoS3xA.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavBar-QwbK2-9W.js","sources":["../src/public/NavBar.tsx"],"sourcesContent":["import React, { createContext, type RefObject, useContext, useLayoutEffect, useRef, type FC } from 'react';\nimport classNames from 'classnames';\nimport { motion, type MotionStyle, MotionValue, frame } from 'motion/react';\n\nimport { Divider, type ShowDivider } from '@hh.ru/magritte-ui-divider';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { MetricsProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useAnimationRanges } from '@hh.ru/magritte-ui-nav-bar/internal/useAnimationRanges';\nimport { useBindScrollToAnimationProgress } from '@hh.ru/magritte-ui-nav-bar/internal/useBindScrollToAnimationProgress';\nimport { useNavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';\nimport { useResetFocus } from '@hh.ru/magritte-ui-nav-bar/internal/useResetFocus';\nimport { useScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';\nimport { useSnapScroll } from '@hh.ru/magritte-ui-nav-bar/internal/useSnapScroll';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { remap, scheduleMicro, scheduleMacro, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { type PaneElement, type InternalPaneProps } from '@hh.ru/magritte-ui-nav-bar/public/Pane';\n\nimport styles from './nav-bar.less';\n\ntype PaneStoreContextValue = ((store: PaneStore) => VoidFunction) | null;\nconst NavBarContext = createContext<PaneStoreContextValue>(null);\n\nexport const useNavBarContext = (): PaneStoreContextValue => useContext(NavBarContext);\n\nexport interface NavBarProps {\n /**\n * В качестве потомков могут передаваться только компоненты <Pane />\n */\n children: PaneElement | PaneElement[];\n /**\n * Управляет режимом прозрачности:\n * -- Прозрачность отключена (`false`)\n * -- Прозрачный всегда (`true`)\n * -- Прозрачный в начале анимации (`start`)\n * -- Прозрачный в конце анимации (`end`)\n */\n transparent?: 'start' | 'end' | boolean;\n /**\n * Управляет позицией триггера начала анимации\n */\n startTriggerPosition?: 'start' | 'full-area' | RefObject<HTMLElement | null>;\n /**\n * Управляет позицией триггера конца анимации. Если не передан вычисляется автоматически на основе изменения\n * высоты навбара в процессе анимации и позиции триггера начала анмиации. Если передано число, то интерпретируется\n * как отступ в пикселях от позиции триггера старта анимации.\n */\n endTriggerPosition?: RefObject<HTMLElement | null> | number;\n /**\n * Включает режим когда NavBar не занимает место в лейауте и контент располагается под ним.\n */\n overlay?: boolean;\n /**\n * Управляет режимом автодоскролла. По умолчанию включен.\n */\n snapScroll?: boolean;\n /**\n * Управляет режимом отображения дивайдера:\n * - `false` дивайдер отключен\n * - `always` дивайдер отображается постоянно\n * - `with-scroll` дивайдер отображается только когда контент подскроллен под NavBar\n */\n showDivider?: ShowDivider;\n /**\n * Принимает MotionValue значение которого будет обновляться синхронно с анимацией всего NavBar.\n * Прогресс анимации представляется в виде числа 0..1\n * Предназначен для синхронизации внешних анимаций с анимациями NavBar.\n */\n animationProgress?: MotionValue<number>;\n}\n\nexport const NavBar: FC<NavBarProps> = ({\n children,\n transparent = false,\n startTriggerPosition = 'start',\n endTriggerPosition,\n overlay = false,\n snapScroll: scrollSnapping = true,\n showDivider = false,\n animationProgress,\n}) => {\n const paneStoreRegistry = useInitOnce(() => new Set<PaneStore>());\n const prevFullHeight = useRef<null | number>(0);\n const rootRef = useRef<HTMLDivElement>(null);\n\n const [scrollAdapter, scrollPosition] = useScrollAdapter(rootRef);\n const [getMetrics, invalidateMetrics] = useNavBarMetrics(paneStoreRegistry, rootRef, scrollAdapter);\n const [getAnimationRanges, invalidateAnimationRanges] = useAnimationRanges(paneStoreRegistry, getMetrics);\n const [bindScrollToAnimation, getClosestStops, totalAnimationProgress, dividerStyle] =\n useBindScrollToAnimationProgress(\n scrollPosition,\n getMetrics,\n getAnimationRanges,\n scrollAdapter,\n startTriggerPosition,\n endTriggerPosition\n );\n const snapScroll = useSnapScroll(\n scrollPosition,\n totalAnimationProgress,\n scrollAdapter,\n getClosestStops,\n scrollSnapping\n );\n\n // При получении размеров важно дождаться применения MotionValue к DOM, поэтому используем frame.render\n const bindScrollToAnimationScheduled = useInitOnce(() => scheduleMicro(() => frame.render(bindScrollToAnimation)));\n useResetFocus(rootRef, totalAnimationProgress);\n useSyncMotionValue(totalAnimationProgress, animationProgress);\n\n const dividerVisibility =\n // eslint-disable-next-line no-nested-ternary\n showDivider === 'with-scroll' ? dividerStyle.visibility : showDivider ? 'visible' : 'hidden';\n\n const registerPaneStore = useInitOnce(() => {\n const subscriptions: VoidFunction[] = [];\n\n const updateAnimationParams = () => {\n subscriptions.length = 0;\n invalidateMetrics();\n invalidateAnimationRanges();\n bindScrollToAnimationScheduled();\n const navBarMetrics = getMetrics();\n const fullPanesStartHeight = navBarMetrics.bottom - navBarMetrics.top;\n\n let scroll = scrollAdapter.getScrollTop();\n if (prevFullHeight.current !== null && scroll !== 0) {\n const heightDelta = fullPanesStartHeight - prevFullHeight.current;\n scroll += heightDelta;\n\n requestAnimationFrame(() => {\n scrollPosition.jump(scrollAdapter.getScrollTop() - 1);\n scrollPosition.jump(scrollAdapter.getScrollTop());\n });\n }\n\n const animationRanges = getAnimationRanges();\n [...paneStoreRegistry.values()].forEach((paneStore) => {\n const range = animationRanges.get(paneStore.get('id'));\n if (!range) {\n return;\n }\n const remapFn = remap(\n range[0] === 0 && range[1] === 0\n ? [0, 1]\n : [range[0] / navBarMetrics.animationHeight, range[1] / navBarMetrics.animationHeight],\n [0, 1]\n );\n const motionValue = paneStore.get('motionValue');\n motionValue.set(remapFn(totalAnimationProgress.get()));\n subscriptions.push(totalAnimationProgress.on('change', (value) => motionValue.set(remapFn(value))));\n });\n\n prevFullHeight.current = fullPanesStartHeight;\n };\n\n // основной триггер запуска updateAnimationParams это изменения размеров, обработка которых происходит\n // в очереди микрозадач, поэтому откладываем запуск функции до перехдоа к макрозадачам, чтобы сократить\n // количество вызовов при массовых изменениях\n const onChange = scheduleMacro(updateAnimationParams);\n\n return (paneStore: PaneStore) => {\n const unsubscribe = paneStore.onChange(\n ['startHeight', 'endHeight', 'top', 'foldable', 'animated'],\n onChange\n );\n paneStoreRegistry.add(paneStore);\n return () => {\n paneStoreRegistry.delete(paneStore);\n unsubscribe();\n };\n };\n });\n\n useLayoutEffect(() => {\n bindScrollToAnimation();\n snapScroll();\n if (!rootRef.current || (typeof startTriggerPosition === 'string' && !endTriggerPosition)) {\n return void 0;\n }\n return scrollAdapter.onResize(bindScrollToAnimationScheduled);\n }, [\n startTriggerPosition,\n endTriggerPosition,\n bindScrollToAnimation,\n bindScrollToAnimationScheduled,\n snapScroll,\n scrollAdapter,\n ]);\n\n // Вкладываем панели друг в друга через проп nextPane\n const items = React.Children.toArray(children) as PaneElement[];\n\n const nested = items.reduceRight<PaneElement | null>((acc, child) => {\n return React.cloneElement<InternalPaneProps>(child, {\n ...child.props,\n nextPane: acc,\n }) as PaneElement;\n }, null);\n\n return (\n <Layer layer=\"navigation-bar\">\n <MetricsProvider\n className={classNames(styles.navBar, {\n [styles.navbarTransparentStart]: transparent === 'start',\n [styles.navbarTransparentEnd]: transparent === 'end',\n [styles.navbarNotTransparent]: !transparent,\n [styles.navBarOverlay]: overlay,\n })}\n ref={rootRef}\n measureClassName={styles.metricsMode}\n >\n <div className={styles.navBarOverlayWrapper}>\n <div className={styles.navBarContentContainer}>\n <motion.div\n style={{ '--magritte-ui-navbar-animation-progress': totalAnimationProgress } as MotionStyle}\n className={styles.navBarPanesContainer}\n >\n <NavBarContext.Provider value={registerPaneStore}>{nested}</NavBarContext.Provider>\n </motion.div>\n <motion.div\n className={styles.dividerContainer}\n style={{ ...dividerStyle, visibility: dividerVisibility }}\n >\n <Divider />\n </motion.div>\n </div>\n </div>\n </MetricsProvider>\n </Layer>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NavBar-CsMoS3xA.js","sources":["../src/public/NavBar.tsx"],"sourcesContent":["import React, { createContext, type RefObject, useContext, useLayoutEffect, useRef, type FC } from 'react';\nimport classNames from 'classnames';\nimport { motion, type MotionStyle, MotionValue, frame } from 'motion/react';\n\nimport { Divider, type ShowDivider } from '@hh.ru/magritte-ui-divider';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { MetricsProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useAnimationRanges } from '@hh.ru/magritte-ui-nav-bar/internal/useAnimationRanges';\nimport { useBindScrollToAnimationProgress } from '@hh.ru/magritte-ui-nav-bar/internal/useBindScrollToAnimationProgress';\nimport { useNavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';\nimport { useResetFocus } from '@hh.ru/magritte-ui-nav-bar/internal/useResetFocus';\nimport { useScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';\nimport { useSnapScroll } from '@hh.ru/magritte-ui-nav-bar/internal/useSnapScroll';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { remap, scheduleMicro, scheduleMacro, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { type PaneElement, type InternalPaneProps } from '@hh.ru/magritte-ui-nav-bar/public/Pane';\n\nimport styles from './nav-bar.less';\n\ntype PaneStoreContextValue = ((store: PaneStore) => VoidFunction) | null;\nconst NavBarContext = createContext<PaneStoreContextValue>(null);\n\nexport const useNavBarContext = (): PaneStoreContextValue => useContext(NavBarContext);\n\nexport interface NavBarProps {\n /**\n * В качестве потомков могут передаваться только компоненты <Pane />\n */\n children: PaneElement | PaneElement[];\n /**\n * Управляет режимом прозрачности:\n * -- Прозрачность отключена (`false`)\n * -- Прозрачный всегда (`true`)\n * -- Прозрачный в начале анимации (`start`)\n * -- Прозрачный в конце анимации (`end`)\n */\n transparent?: 'start' | 'end' | boolean;\n /**\n * Управляет позицией триггера начала анимации\n */\n startTriggerPosition?: 'start' | 'full-area' | RefObject<HTMLElement | null>;\n /**\n * Управляет позицией триггера конца анимации. Если не передан вычисляется автоматически на основе изменения\n * высоты навбара в процессе анимации и позиции триггера начала анмиации. Если передано число, то интерпретируется\n * как отступ в пикселях от позиции триггера старта анимации.\n */\n endTriggerPosition?: RefObject<HTMLElement | null> | number;\n /**\n * Включает режим когда NavBar не занимает место в лейауте и контент располагается под ним.\n */\n overlay?: boolean;\n /**\n * Управляет режимом автодоскролла. По умолчанию включен.\n */\n snapScroll?: boolean;\n /**\n * Управляет режимом отображения дивайдера:\n * - `false` дивайдер отключен\n * - `always` дивайдер отображается постоянно\n * - `with-scroll` дивайдер отображается только когда контент подскроллен под NavBar\n */\n showDivider?: ShowDivider;\n /**\n * Принимает MotionValue значение которого будет обновляться синхронно с анимацией всего NavBar.\n * Прогресс анимации представляется в виде числа 0..1\n * Предназначен для синхронизации внешних анимаций с анимациями NavBar.\n */\n animationProgress?: MotionValue<number>;\n}\n\nexport const NavBar: FC<NavBarProps> = ({\n children,\n transparent = false,\n startTriggerPosition = 'start',\n endTriggerPosition,\n overlay = false,\n snapScroll: scrollSnapping = true,\n showDivider = false,\n animationProgress,\n}) => {\n const paneStoreRegistry = useInitOnce(() => new Set<PaneStore>());\n const prevFullHeight = useRef<null | number>(0);\n const rootRef = useRef<HTMLDivElement>(null);\n\n const [scrollAdapter, scrollPosition] = useScrollAdapter(rootRef);\n const [getMetrics, invalidateMetrics] = useNavBarMetrics(paneStoreRegistry, rootRef, scrollAdapter);\n const [getAnimationRanges, invalidateAnimationRanges] = useAnimationRanges(paneStoreRegistry, getMetrics);\n const [bindScrollToAnimation, getClosestStops, totalAnimationProgress, dividerStyle] =\n useBindScrollToAnimationProgress(\n scrollPosition,\n getMetrics,\n getAnimationRanges,\n scrollAdapter,\n startTriggerPosition,\n endTriggerPosition\n );\n const snapScroll = useSnapScroll(\n scrollPosition,\n totalAnimationProgress,\n scrollAdapter,\n getClosestStops,\n scrollSnapping\n );\n\n // При получении размеров важно дождаться применения MotionValue к DOM, поэтому используем frame.render\n const bindScrollToAnimationScheduled = useInitOnce(() => scheduleMicro(() => frame.render(bindScrollToAnimation)));\n useResetFocus(rootRef, totalAnimationProgress);\n useSyncMotionValue(totalAnimationProgress, animationProgress);\n\n const dividerVisibility =\n // eslint-disable-next-line no-nested-ternary\n showDivider === 'with-scroll' ? dividerStyle.visibility : showDivider ? 'visible' : 'hidden';\n\n const registerPaneStore = useInitOnce(() => {\n const subscriptions: VoidFunction[] = [];\n\n const updateAnimationParams = () => {\n subscriptions.length = 0;\n invalidateMetrics();\n invalidateAnimationRanges();\n bindScrollToAnimationScheduled();\n const navBarMetrics = getMetrics();\n const fullPanesStartHeight = navBarMetrics.bottom - navBarMetrics.top;\n\n let scroll = scrollAdapter.getScrollTop();\n if (prevFullHeight.current !== null && scroll !== 0) {\n const heightDelta = fullPanesStartHeight - prevFullHeight.current;\n scroll += heightDelta;\n\n requestAnimationFrame(() => {\n scrollPosition.jump(scrollAdapter.getScrollTop() - 1);\n scrollPosition.jump(scrollAdapter.getScrollTop());\n });\n }\n\n const animationRanges = getAnimationRanges();\n [...paneStoreRegistry.values()].forEach((paneStore) => {\n const range = animationRanges.get(paneStore.get('id'));\n if (!range) {\n return;\n }\n const remapFn = remap(\n range[0] === 0 && range[1] === 0\n ? [0, 1]\n : [range[0] / navBarMetrics.animationHeight, range[1] / navBarMetrics.animationHeight],\n [0, 1]\n );\n const motionValue = paneStore.get('motionValue');\n motionValue.set(remapFn(totalAnimationProgress.get()));\n subscriptions.push(totalAnimationProgress.on('change', (value) => motionValue.set(remapFn(value))));\n });\n\n prevFullHeight.current = fullPanesStartHeight;\n };\n\n // основной триггер запуска updateAnimationParams это изменения размеров, обработка которых происходит\n // в очереди микрозадач, поэтому откладываем запуск функции до перехдоа к макрозадачам, чтобы сократить\n // количество вызовов при массовых изменениях\n const onChange = scheduleMacro(updateAnimationParams);\n\n return (paneStore: PaneStore) => {\n const unsubscribe = paneStore.onChange(\n ['startHeight', 'endHeight', 'top', 'foldable', 'animated'],\n onChange\n );\n paneStoreRegistry.add(paneStore);\n return () => {\n paneStoreRegistry.delete(paneStore);\n unsubscribe();\n };\n };\n });\n\n useLayoutEffect(() => {\n bindScrollToAnimation();\n snapScroll();\n if (!rootRef.current || (typeof startTriggerPosition === 'string' && !endTriggerPosition)) {\n return void 0;\n }\n return scrollAdapter.onResize(bindScrollToAnimationScheduled);\n }, [\n startTriggerPosition,\n endTriggerPosition,\n bindScrollToAnimation,\n bindScrollToAnimationScheduled,\n snapScroll,\n scrollAdapter,\n ]);\n\n // Вкладываем панели друг в друга через проп nextPane\n const items = React.Children.toArray(children) as PaneElement[];\n\n const nested = items.reduceRight<PaneElement | null>((acc, child) => {\n return React.cloneElement<InternalPaneProps>(child, {\n ...child.props,\n nextPane: acc,\n }) as PaneElement;\n }, null);\n\n return (\n <Layer layer=\"navigation-bar\">\n <MetricsProvider\n className={classNames(styles.navBar, {\n [styles.navbarTransparentStart]: transparent === 'start',\n [styles.navbarTransparentEnd]: transparent === 'end',\n [styles.navbarNotTransparent]: !transparent,\n [styles.navBarOverlay]: overlay,\n })}\n ref={rootRef}\n measureClassName={styles.metricsMode}\n >\n <div className={styles.navBarOverlayWrapper}>\n <div className={styles.navBarContentContainer}>\n <motion.div\n style={{ '--magritte-ui-navbar-animation-progress': totalAnimationProgress } as MotionStyle}\n className={styles.navBarPanesContainer}\n >\n <NavBarContext.Provider value={registerPaneStore}>{nested}</NavBarContext.Provider>\n </motion.div>\n <motion.div\n className={styles.dividerContainer}\n style={{ ...dividerStyle, visibility: dividerVisibility }}\n >\n <Divider />\n </motion.div>\n </div>\n </div>\n </MetricsProvider>\n </Layer>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,MAAM,aAAa,GAAG,aAAa,CAAwB,IAAI,CAAC,CAAC;AAEpD,MAAA,gBAAgB,GAAG,MAA6B,UAAU,CAAC,aAAa,EAAE;AAgDhF,MAAM,MAAM,GAAoB,CAAC,EACpC,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,oBAAoB,GAAG,OAAO,EAC9B,kBAAkB,EAClB,OAAO,GAAG,KAAK,EACf,UAAU,EAAE,cAAc,GAAG,IAAI,EACjC,WAAW,GAAG,KAAK,EACnB,iBAAiB,GACpB,KAAI;IACD,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,IAAI,GAAG,EAAa,CAAC,CAAC;AAClE,IAAA,MAAM,cAAc,GAAG,MAAM,CAAgB,CAAC,CAAC,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,MAAM,CAAC,aAAa,EAAE,cAAc,CAAC,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAClE,IAAA,MAAM,CAAC,UAAU,EAAE,iBAAiB,CAAC,GAAG,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC;AACpG,IAAA,MAAM,CAAC,kBAAkB,EAAE,yBAAyB,CAAC,GAAG,kBAAkB,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;IAC1G,MAAM,CAAC,qBAAqB,EAAE,eAAe,EAAE,sBAAsB,EAAE,YAAY,CAAC,GAChF,gCAAgC,CAC5B,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,oBAAoB,EACpB,kBAAkB,CACrB,CAAC;AACN,IAAA,MAAM,UAAU,GAAG,aAAa,CAC5B,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,cAAc,CACjB,CAAC;;IAGF,MAAM,8BAA8B,GAAG,WAAW,CAAC,MAAM,aAAa,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;AACnH,IAAA,aAAa,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC;AAC/C,IAAA,kBAAkB,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC;AAE9D,IAAA,MAAM,iBAAiB;;IAEnB,WAAW,KAAK,aAAa,GAAG,YAAY,CAAC,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEjG,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;QACvC,MAAM,aAAa,GAAmB,EAAE,CAAC;QAEzC,MAAM,qBAAqB,GAAG,MAAK;AAC/B,YAAA,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;AACzB,YAAA,iBAAiB,EAAE,CAAC;AACpB,YAAA,yBAAyB,EAAE,CAAC;AAC5B,YAAA,8BAA8B,EAAE,CAAC;AACjC,YAAA,MAAM,aAAa,GAAG,UAAU,EAAE,CAAC;YACnC,MAAM,oBAAoB,GAAG,aAAa,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC;AAEtE,YAAA,IAAI,MAAM,GAAG,aAAa,CAAC,YAAY,EAAE,CAAC;YAC1C,IAAI,cAAc,CAAC,OAAO,KAAK,IAAI,IAAI,MAAM,KAAK,CAAC,EAAE;AACjD,gBAAA,MAAM,WAAW,GAAG,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC;gBAClE,MAAM,IAAI,WAAW,CAAC;gBAEtB,qBAAqB,CAAC,MAAK;oBACvB,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC;oBACtD,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,CAAC,CAAC;AACtD,iBAAC,CAAC,CAAC;aACN;AAED,YAAA,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;AAC7C,YAAA,CAAC,GAAG,iBAAiB,CAAC,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,KAAI;AAClD,gBAAA,MAAM,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;gBACvD,IAAI,CAAC,KAAK,EAAE;oBACR,OAAO;iBACV;AACD,gBAAA,MAAM,OAAO,GAAG,KAAK,CACjB,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;AAC5B,sBAAE,CAAC,CAAC,EAAE,CAAC,CAAC;sBACN,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,eAAe,CAAC,EAC1F,CAAC,CAAC,EAAE,CAAC,CAAC,CACT,CAAC;gBACF,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;gBACjD,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,sBAAsB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;gBACvD,aAAa,CAAC,IAAI,CAAC,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAK,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AACxG,aAAC,CAAC,CAAC;AAEH,YAAA,cAAc,CAAC,OAAO,GAAG,oBAAoB,CAAC;AAClD,SAAC,CAAC;;;;AAKF,QAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAEtD,OAAO,CAAC,SAAoB,KAAI;YAC5B,MAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,CAClC,CAAC,aAAa,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,CAAC,EAC3D,QAAQ,CACX,CAAC;AACF,YAAA,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AACjC,YAAA,OAAO,MAAK;AACR,gBAAA,iBAAiB,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AACpC,gBAAA,WAAW,EAAE,CAAC;AAClB,aAAC,CAAC;AACN,SAAC,CAAC;AACN,KAAC,CAAC,CAAC;IAEH,eAAe,CAAC,MAAK;AACjB,QAAA,qBAAqB,EAAE,CAAC;AACxB,QAAA,UAAU,EAAE,CAAC;AACb,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,KAAK,OAAO,oBAAoB,KAAK,QAAQ,IAAI,CAAC,kBAAkB,CAAC,EAAE;YACvF,OAAO,KAAK,CAAC,CAAC;SACjB;AACD,QAAA,OAAO,aAAa,CAAC,QAAQ,CAAC,8BAA8B,CAAC,CAAC;AAClE,KAAC,EAAE;QACC,oBAAoB;QACpB,kBAAkB;QAClB,qBAAqB;QACrB,8BAA8B;QAC9B,UAAU;QACV,aAAa;AAChB,KAAA,CAAC,CAAC;;IAGH,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAkB,CAAC;IAEhE,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAqB,CAAC,GAAG,EAAE,KAAK,KAAI;AAChE,QAAA,OAAO,KAAK,CAAC,YAAY,CAAoB,KAAK,EAAE;YAChD,GAAG,KAAK,CAAC,KAAK;AACd,YAAA,QAAQ,EAAE,GAAG;AAChB,SAAA,CAAgB,CAAC;KACrB,EAAE,IAAI,CAAC,CAAC;AAET,IAAA,QACIA,GAAC,CAAA,KAAK,IAAC,KAAK,EAAC,gBAAgB,EACzB,QAAA,EAAAA,GAAA,CAAC,eAAe,EAAA,EACZ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;AACjC,gBAAA,CAAC,MAAM,CAAC,sBAAsB,GAAG,WAAW,KAAK,OAAO;AACxD,gBAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,WAAW,KAAK,KAAK;AACpD,gBAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,CAAC,WAAW;AAC3C,gBAAA,CAAC,MAAM,CAAC,aAAa,GAAG,OAAO;AAClC,aAAA,CAAC,EACF,GAAG,EAAE,OAAO,EACZ,gBAAgB,EAAE,MAAM,CAAC,WAAW,EAEpC,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,EAAA,QAAA,EACvCC,cAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,EACzC,QAAA,EAAA,CAAAD,GAAA,CAAC,MAAM,CAAC,GAAG,IACP,KAAK,EAAE,EAAE,yCAAyC,EAAE,sBAAsB,EAAiB,EAC3F,SAAS,EAAE,MAAM,CAAC,oBAAoB,EAAA,QAAA,EAEtCA,GAAC,CAAA,aAAa,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,iBAAiB,YAAG,MAAM,EAAA,CAA0B,GAC1E,EACbA,GAAA,CAAC,MAAM,CAAC,GAAG,IACP,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAClC,KAAK,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,iBAAiB,EAAE,YAEzDA,GAAC,CAAA,OAAO,KAAG,EACF,CAAA,CAAA,EAAA,CACX,GACJ,EACQ,CAAA,EAAA,CACd,EACV;AACN;;;;"}
|
package/index.css
CHANGED
|
@@ -5,97 +5,97 @@
|
|
|
5
5
|
.magritte-night-theme{
|
|
6
6
|
--magritte-color-background-body-v24-4-0:#000000;
|
|
7
7
|
}
|
|
8
|
-
.magritte-actions-container___CBgYW_1-3-
|
|
8
|
+
.magritte-actions-container___CBgYW_1-3-4{
|
|
9
9
|
display:flex;
|
|
10
10
|
flex-direction:row;
|
|
11
11
|
gap:12px;
|
|
12
12
|
min-height:40px;
|
|
13
13
|
}
|
|
14
|
-
.magritte-actions-no-children___rgJUl_1-3-
|
|
14
|
+
.magritte-actions-no-children___rgJUl_1-3-4{
|
|
15
15
|
justify-content:space-between;
|
|
16
16
|
}
|
|
17
|
-
.magritte-actions-left-slot___DNOj0_1-3-
|
|
18
|
-
.magritte-actions-right-slot___aodtj_1-3-
|
|
17
|
+
.magritte-actions-left-slot___DNOj0_1-3-4,
|
|
18
|
+
.magritte-actions-right-slot___aodtj_1-3-4{
|
|
19
19
|
display:grid;
|
|
20
20
|
flex:0 0 auto;
|
|
21
21
|
}
|
|
22
|
-
.magritte-navbar-transparent-end___6KqLR_1-3-
|
|
23
|
-
.magritte-navbar-transparent-start___wysv0_1-3-
|
|
24
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
25
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
26
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
22
|
+
.magritte-navbar-transparent-end___6KqLR_1-3-4 .magritte-actions-start-stage___MJ67a_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > .magritte-actions-icon-morph___-nNgW_1-3-4:first-child,
|
|
23
|
+
.magritte-navbar-transparent-start___wysv0_1-3-4 .magritte-actions-end-stage___qHtTV_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > .magritte-actions-icon-morph___-nNgW_1-3-4:first-child,
|
|
24
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-start-stage___MJ67a_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > .magritte-actions-icon-morph___-nNgW_1-3-4:first-child,
|
|
25
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-end-stage___qHtTV_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > .magritte-actions-icon-morph___-nNgW_1-3-4:first-child,
|
|
26
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > .magritte-actions-icon-morph___-nNgW_1-3-4:first-child{
|
|
27
27
|
margin-left:-8px;
|
|
28
28
|
}
|
|
29
|
-
.magritte-navbar-transparent-end___6KqLR_1-3-
|
|
30
|
-
.magritte-navbar-transparent-start___wysv0_1-3-
|
|
31
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
32
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
33
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
29
|
+
.magritte-navbar-transparent-end___6KqLR_1-3-4 .magritte-actions-start-stage___MJ67a_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > .magritte-actions-icon-morph___-nNgW_1-3-4:last-child,
|
|
30
|
+
.magritte-navbar-transparent-start___wysv0_1-3-4 .magritte-actions-end-stage___qHtTV_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > .magritte-actions-icon-morph___-nNgW_1-3-4:last-child,
|
|
31
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-start-stage___MJ67a_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > .magritte-actions-icon-morph___-nNgW_1-3-4:last-child,
|
|
32
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-end-stage___qHtTV_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > .magritte-actions-icon-morph___-nNgW_1-3-4:last-child,
|
|
33
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > .magritte-actions-icon-morph___-nNgW_1-3-4:last-child{
|
|
34
34
|
margin-right:-8px;
|
|
35
35
|
}
|
|
36
|
-
.magritte-navbar-transparent-end___6KqLR_1-3-
|
|
37
|
-
.magritte-navbar-transparent-start___wysv0_1-3-
|
|
38
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
39
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
40
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
41
|
-
.magritte-navbar-transparent-end___6KqLR_1-3-
|
|
42
|
-
.magritte-navbar-transparent-start___wysv0_1-3-
|
|
43
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
44
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
45
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
36
|
+
.magritte-navbar-transparent-end___6KqLR_1-3-4 .magritte-actions-start-stage___MJ67a_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :last-child,
|
|
37
|
+
.magritte-navbar-transparent-start___wysv0_1-3-4 .magritte-actions-end-stage___qHtTV_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :last-child,
|
|
38
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-start-stage___MJ67a_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :last-child,
|
|
39
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-end-stage___qHtTV_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :last-child,
|
|
40
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :last-child,
|
|
41
|
+
.magritte-navbar-transparent-end___6KqLR_1-3-4 .magritte-actions-start-stage___MJ67a_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-3-4),
|
|
42
|
+
.magritte-navbar-transparent-start___wysv0_1-3-4 .magritte-actions-end-stage___qHtTV_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-3-4),
|
|
43
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-start-stage___MJ67a_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-3-4),
|
|
44
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-end-stage___qHtTV_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-3-4),
|
|
45
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-3-4){
|
|
46
46
|
--magritte-ui-icon-margin-right-override:-8px;
|
|
47
47
|
}
|
|
48
|
-
.magritte-navbar-transparent-end___6KqLR_1-3-
|
|
49
|
-
.magritte-navbar-transparent-start___wysv0_1-3-
|
|
50
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
51
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
52
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
53
|
-
.magritte-navbar-transparent-end___6KqLR_1-3-
|
|
54
|
-
.magritte-navbar-transparent-start___wysv0_1-3-
|
|
55
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
56
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
57
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
48
|
+
.magritte-navbar-transparent-end___6KqLR_1-3-4 .magritte-actions-start-stage___MJ67a_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :first-child,
|
|
49
|
+
.magritte-navbar-transparent-start___wysv0_1-3-4 .magritte-actions-end-stage___qHtTV_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :first-child,
|
|
50
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-start-stage___MJ67a_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :first-child,
|
|
51
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-end-stage___qHtTV_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :first-child,
|
|
52
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :first-child,
|
|
53
|
+
.magritte-navbar-transparent-end___6KqLR_1-3-4 .magritte-actions-start-stage___MJ67a_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-3-4),
|
|
54
|
+
.magritte-navbar-transparent-start___wysv0_1-3-4 .magritte-actions-end-stage___qHtTV_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-3-4),
|
|
55
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-start-stage___MJ67a_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-3-4),
|
|
56
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-end-stage___qHtTV_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-3-4),
|
|
57
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-3-4){
|
|
58
58
|
--magritte-ui-icon-margin-left-override:-8px;
|
|
59
59
|
}
|
|
60
|
-
.magritte-navbar-transparent-start___wysv0_1-3-
|
|
61
|
-
.magritte-navbar-transparent-start___wysv0_1-3-
|
|
60
|
+
.magritte-navbar-transparent-start___wysv0_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :first-child,
|
|
61
|
+
.magritte-navbar-transparent-start___wysv0_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :first-child{
|
|
62
62
|
--magritte-ui-icon-margin-left-override:calc(-8px * var(--magritte-ui-navbar-animation-progress));
|
|
63
63
|
}
|
|
64
|
-
.magritte-navbar-transparent-start___wysv0_1-3-
|
|
65
|
-
.magritte-navbar-transparent-start___wysv0_1-3-
|
|
64
|
+
.magritte-navbar-transparent-start___wysv0_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :last-child,
|
|
65
|
+
.magritte-navbar-transparent-start___wysv0_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :last-child{
|
|
66
66
|
--magritte-ui-icon-margin-right-override:calc(-8px * var(--magritte-ui-navbar-animation-progress));
|
|
67
67
|
}
|
|
68
|
-
.magritte-navbar-transparent-end___6KqLR_1-3-
|
|
69
|
-
.magritte-navbar-transparent-end___6KqLR_1-3-
|
|
68
|
+
.magritte-navbar-transparent-end___6KqLR_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :first-child,
|
|
69
|
+
.magritte-navbar-transparent-end___6KqLR_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :first-child{
|
|
70
70
|
--magritte-ui-icon-margin-left-override:calc(-8px * (1 - var(--magritte-ui-navbar-animation-progress)));
|
|
71
71
|
}
|
|
72
|
-
.magritte-navbar-transparent-end___6KqLR_1-3-
|
|
73
|
-
.magritte-navbar-transparent-end___6KqLR_1-3-
|
|
72
|
+
.magritte-navbar-transparent-end___6KqLR_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-right-slot___aodtj_1-3-4 .magritte-actions-side-slot-content___TlHrX_1-3-4 > :last-child,
|
|
73
|
+
.magritte-navbar-transparent-end___6KqLR_1-3-4 .magritte-actions-only-stage___cg10A_1-3-4 .magritte-actions-left-slot___DNOj0_1-3-4 .magritte-actions-side-slot-content-clone___jDxVm_1-3-4 > :last-child{
|
|
74
74
|
--magritte-ui-icon-margin-right-override:calc(-8px * (1 - var(--magritte-ui-navbar-animation-progress)));
|
|
75
75
|
}
|
|
76
|
-
.magritte-actions-center-slot___hLAy6_1-3-
|
|
76
|
+
.magritte-actions-center-slot___hLAy6_1-3-4{
|
|
77
77
|
display:flex;
|
|
78
78
|
flex:1 1 auto;
|
|
79
79
|
min-width:0;
|
|
80
80
|
}
|
|
81
|
-
.magritte-actions-center-slot___hLAy6_1-3-
|
|
81
|
+
.magritte-actions-center-slot___hLAy6_1-3-4.magritte-actions-center-slot-centered___merXQ_1-3-4{
|
|
82
82
|
justify-content:center;
|
|
83
83
|
}
|
|
84
|
-
.magritte-actions-side-slot-content___TlHrX_1-3-
|
|
85
|
-
.magritte-actions-side-slot-content-clone___jDxVm_1-3-
|
|
84
|
+
.magritte-actions-side-slot-content___TlHrX_1-3-4,
|
|
85
|
+
.magritte-actions-side-slot-content-clone___jDxVm_1-3-4{
|
|
86
86
|
grid-area:1 / 1;
|
|
87
87
|
display:flex;
|
|
88
88
|
align-items:center;
|
|
89
89
|
gap:4px;
|
|
90
90
|
}
|
|
91
|
-
.magritte-actions-side-slot-content-clone___jDxVm_1-3-
|
|
91
|
+
.magritte-actions-side-slot-content-clone___jDxVm_1-3-4{
|
|
92
92
|
visibility:hidden;
|
|
93
93
|
z-index:0;
|
|
94
94
|
pointer-events:none;
|
|
95
95
|
user-select:none;
|
|
96
96
|
contain:style layout;
|
|
97
97
|
}
|
|
98
|
-
.magritte-title-container-wrapper___DQUcj_1-3-
|
|
98
|
+
.magritte-title-container-wrapper___DQUcj_1-3-4{
|
|
99
99
|
display:flex;
|
|
100
100
|
flex-direction:row;
|
|
101
101
|
align-items:center;
|
|
@@ -103,45 +103,45 @@
|
|
|
103
103
|
min-width:0;
|
|
104
104
|
gap:12px;
|
|
105
105
|
}
|
|
106
|
-
.magritte-title-main-part___npoHN_1-3-
|
|
106
|
+
.magritte-title-main-part___npoHN_1-3-4{
|
|
107
107
|
display:flex;
|
|
108
108
|
flex-direction:column;
|
|
109
109
|
flex:0 1 auto;
|
|
110
110
|
min-width:0;
|
|
111
111
|
}
|
|
112
|
-
.magritte-title-left-slot___HTE7h_1-3-
|
|
112
|
+
.magritte-title-left-slot___HTE7h_1-3-4{
|
|
113
113
|
display:flex;
|
|
114
114
|
align-items:center;
|
|
115
115
|
flex:0 0 auto;
|
|
116
116
|
}
|
|
117
|
-
.magritte-title-container___y9AIx_1-3-
|
|
117
|
+
.magritte-title-container___y9AIx_1-3-4{
|
|
118
118
|
display:flex;
|
|
119
119
|
flex-direction:row;
|
|
120
120
|
align-items:center;
|
|
121
121
|
gap:5px;
|
|
122
122
|
}
|
|
123
|
-
.magritte-subtitle-container___nVUBu_1-3-
|
|
123
|
+
.magritte-subtitle-container___nVUBu_1-3-4{
|
|
124
124
|
display:flex;
|
|
125
125
|
}
|
|
126
|
-
.magritte-centered___Y2mlP_1-3-
|
|
127
|
-
.magritte-centered___Y2mlP_1-3-
|
|
126
|
+
.magritte-centered___Y2mlP_1-3-4 .magritte-subtitle-container___nVUBu_1-3-4,
|
|
127
|
+
.magritte-centered___Y2mlP_1-3-4 .magritte-title-container___y9AIx_1-3-4{
|
|
128
128
|
justify-content:center;
|
|
129
129
|
}
|
|
130
|
-
.magritte-title-morph-item___t7Wf3_1-3-
|
|
130
|
+
.magritte-title-morph-item___t7Wf3_1-3-4{
|
|
131
131
|
display:flex;
|
|
132
132
|
min-width:0;
|
|
133
133
|
}
|
|
134
|
-
.magritte-title___ZbLgP_1-3-
|
|
134
|
+
.magritte-title___ZbLgP_1-3-4{
|
|
135
135
|
display:flex;
|
|
136
136
|
flex:0 1 auto;
|
|
137
137
|
min-width:0;
|
|
138
138
|
}
|
|
139
|
-
.magritte-pane-content___UVmC6_1-3-
|
|
139
|
+
.magritte-pane-content___UVmC6_1-3-4{
|
|
140
140
|
position:relative;
|
|
141
141
|
pointer-events:none;
|
|
142
142
|
z-index:2;
|
|
143
143
|
}
|
|
144
|
-
.magritte-pane-background___PDZAX_1-3-
|
|
144
|
+
.magritte-pane-background___PDZAX_1-3-4{
|
|
145
145
|
position:absolute;
|
|
146
146
|
background-color:var(--magritte-ui-nav-bar-background-color-override, var(--magritte-ui-container-background-color-override, var(--magritte-color-background-body-v24-4-0)));
|
|
147
147
|
opacity:0;
|
|
@@ -149,43 +149,43 @@
|
|
|
149
149
|
z-index:-1;
|
|
150
150
|
transform-origin:0 0;
|
|
151
151
|
}
|
|
152
|
-
.magritte-navbar-transparent-start___wysv0_1-3-
|
|
152
|
+
.magritte-navbar-transparent-start___wysv0_1-3-4 .magritte-pane-background___PDZAX_1-3-4{
|
|
153
153
|
opacity:calc(var(--magritte-ui-navbar-animation-progress) * 0.95);
|
|
154
154
|
}
|
|
155
|
-
.magritte-navbar-transparent-end___6KqLR_1-3-
|
|
155
|
+
.magritte-navbar-transparent-end___6KqLR_1-3-4 .magritte-pane-background___PDZAX_1-3-4{
|
|
156
156
|
opacity:calc((1 - var(--magritte-ui-navbar-animation-progress)) * 0.95);
|
|
157
157
|
}
|
|
158
|
-
.magritte-navbar-not-transparent___5KZNp_1-3-
|
|
158
|
+
.magritte-navbar-not-transparent___5KZNp_1-3-4 .magritte-pane-background___PDZAX_1-3-4{
|
|
159
159
|
opacity:0.95;
|
|
160
160
|
}
|
|
161
|
-
.magritte-morph-item___8kF46_1-3-
|
|
161
|
+
.magritte-morph-item___8kF46_1-3-4{
|
|
162
162
|
line-height:0;
|
|
163
163
|
transform-origin:var(--magritte-ui-morph-item-transform-origin-x, center) var(--magritte-ui-morph-item-transform-origin-y, center);
|
|
164
164
|
}
|
|
165
|
-
.magritte-morph-item-top___WPEkn_1-3-
|
|
165
|
+
.magritte-morph-item-top___WPEkn_1-3-4{
|
|
166
166
|
--magritte-ui-morph-item-transform-origin-y:top;
|
|
167
167
|
}
|
|
168
|
-
.magritte-morph-item-bottom___zNbsF_1-3-
|
|
168
|
+
.magritte-morph-item-bottom___zNbsF_1-3-4{
|
|
169
169
|
--magritte-ui-morph-item-transform-origin-y:bottom;
|
|
170
170
|
}
|
|
171
|
-
.magritte-morph-item-left___T6AMW_1-3-
|
|
171
|
+
.magritte-morph-item-left___T6AMW_1-3-4{
|
|
172
172
|
--magritte-ui-morph-item-transform-origin-x:left;
|
|
173
173
|
}
|
|
174
|
-
.magritte-morph-item-right___EuT1E_1-3-
|
|
174
|
+
.magritte-morph-item-right___EuT1E_1-3-4{
|
|
175
175
|
--magritte-ui-morph-item-transform-origin-x:right;
|
|
176
176
|
}
|
|
177
|
-
.magritte-pane___f8eFC_1-3-
|
|
177
|
+
.magritte-pane___f8eFC_1-3-4{
|
|
178
178
|
position:relative;
|
|
179
179
|
overflow:hidden;
|
|
180
180
|
pointer-events:none;
|
|
181
181
|
}
|
|
182
|
-
.magritte-start-state-container___giBVb_1-3-
|
|
182
|
+
.magritte-start-state-container___giBVb_1-3-4{
|
|
183
183
|
position:relative;
|
|
184
184
|
z-index:1;
|
|
185
185
|
box-sizing:border-box;
|
|
186
186
|
pointer-events:auto;
|
|
187
187
|
}
|
|
188
|
-
.magritte-end-state-container___uiW8Q_1-3-
|
|
188
|
+
.magritte-end-state-container___uiW8Q_1-3-4{
|
|
189
189
|
position:absolute;
|
|
190
190
|
z-index:0;
|
|
191
191
|
top:0;
|
|
@@ -194,51 +194,66 @@
|
|
|
194
194
|
pointer-events:none;
|
|
195
195
|
opacity:0;
|
|
196
196
|
}
|
|
197
|
-
.magritte-content-container___7s7vv_1-3-
|
|
197
|
+
.magritte-content-container___7s7vv_1-3-4{
|
|
198
198
|
box-sizing:border-box;
|
|
199
199
|
}
|
|
200
|
-
.magritte-next-pane___H2oxQ_1-3-
|
|
200
|
+
.magritte-next-pane___H2oxQ_1-3-4{
|
|
201
201
|
position:relative;
|
|
202
202
|
}
|
|
203
|
-
.magritte-nav-bar___RRGe0_1-3-
|
|
203
|
+
.magritte-nav-bar___RRGe0_1-3-4{
|
|
204
204
|
top:0;
|
|
205
205
|
position:sticky;
|
|
206
206
|
pointer-events:none;
|
|
207
207
|
overflow-anchor:none;
|
|
208
208
|
z-index:10;
|
|
209
209
|
}
|
|
210
|
-
.magritte-nav-bar-overlay___Mq5ZD_1-3-
|
|
210
|
+
.magritte-nav-bar-overlay___Mq5ZD_1-3-4 .magritte-nav-bar-overlay-wrapper___y1VpY_1-3-4{
|
|
211
211
|
position:absolute;
|
|
212
212
|
inset:0;
|
|
213
213
|
}
|
|
214
|
-
.magritte-nav-bar-content-container___H-WMO_1-3-
|
|
214
|
+
.magritte-nav-bar-content-container___H-WMO_1-3-4{
|
|
215
215
|
display:grid;
|
|
216
216
|
position:relative;
|
|
217
217
|
}
|
|
218
|
-
.magritte-nav-bar-panes-container___5ZDLa_1-3-
|
|
218
|
+
.magritte-nav-bar-panes-container___5ZDLa_1-3-4{
|
|
219
219
|
position:relative;
|
|
220
220
|
z-index:1;
|
|
221
221
|
grid-area:1 / 1;
|
|
222
222
|
min-width:0;
|
|
223
223
|
}
|
|
224
|
-
.magritte-nav-bar-progressive-blur___qyeUV_1-3-
|
|
224
|
+
.magritte-nav-bar-progressive-blur___qyeUV_1-3-4{
|
|
225
225
|
position:relative;
|
|
226
226
|
z-index:0;
|
|
227
227
|
transform-origin:0 0;
|
|
228
228
|
grid-area:1 / 1;
|
|
229
229
|
min-width:0;
|
|
230
230
|
}
|
|
231
|
-
.magritte-nav-bar-content-container___H-WMO_1-3-
|
|
232
|
-
.magritte-nav-bar-content-container___H-WMO_1-3-
|
|
233
|
-
.magritte-nav-bar-content-container___H-WMO_1-3-
|
|
231
|
+
.magritte-nav-bar-content-container___H-WMO_1-3-4 .magritte-nav-bar-stage___amDz7_1-3-4,
|
|
232
|
+
.magritte-nav-bar-content-container___H-WMO_1-3-4 .nav-bar-layout-animation-stage-start,
|
|
233
|
+
.magritte-nav-bar-content-container___H-WMO_1-3-4 .nav-bar-layout-animation-stage-end{
|
|
234
234
|
padding-top:calc(8px + var(--magritte-ui-nav-bar-padding-top-override, 0px));
|
|
235
235
|
}
|
|
236
|
-
.magritte-nav-bar-stage___amDz7_1-3-
|
|
236
|
+
.magritte-nav-bar-content-container___H-WMO_1-3-4 .magritte-next-pane___H2oxQ_1-3-4 .magritte-nav-bar-stage___amDz7_1-3-4,
|
|
237
|
+
.magritte-nav-bar-content-container___H-WMO_1-3-4 .magritte-next-pane___H2oxQ_1-3-4 .nav-bar-layout-animation-stage-start,
|
|
238
|
+
.magritte-nav-bar-content-container___H-WMO_1-3-4 .magritte-next-pane___H2oxQ_1-3-4 .nav-bar-layout-animation-stage-end{
|
|
239
|
+
padding-top:8px;
|
|
240
|
+
}
|
|
241
|
+
.magritte-last-pane___Hf2No_1-3-4 .magritte-nav-bar-stage___amDz7_1-3-4,
|
|
242
|
+
.magritte-last-pane___Hf2No_1-3-4 .nav-bar-layout-animation-stage-start,
|
|
243
|
+
.magritte-last-pane___Hf2No_1-3-4 .nav-bar-layout-animation-stage-end{
|
|
244
|
+
padding-bottom:var(--magritte-ui-nav-bar-stage-padding-bottom-override, 8px);
|
|
245
|
+
}
|
|
246
|
+
.magritte-next-pane___H2oxQ_1-3-4 .magritte-last-pane___Hf2No_1-3-4 .magritte-nav-bar-stage___amDz7_1-3-4,
|
|
247
|
+
.magritte-next-pane___H2oxQ_1-3-4 .magritte-last-pane___Hf2No_1-3-4 .nav-bar-layout-animation-stage-start,
|
|
248
|
+
.magritte-next-pane___H2oxQ_1-3-4 .magritte-last-pane___Hf2No_1-3-4 .nav-bar-layout-animation-stage-end{
|
|
249
|
+
padding-bottom:var(--magritte-ui-nav-bar-stage-padding-bottom-override, 16px);
|
|
250
|
+
}
|
|
251
|
+
.magritte-nav-bar-stage___amDz7_1-3-4{
|
|
237
252
|
padding:8px var(--magritte-ui-nav-bar-stage-horizontal-padding-override, 16px);
|
|
238
253
|
}
|
|
239
|
-
.magritte-metrics-mode___h38aX_1-3-
|
|
240
|
-
.magritte-metrics-mode___h38aX_1-3-
|
|
241
|
-
.magritte-metrics-mode___h38aX_1-3-
|
|
254
|
+
.magritte-metrics-mode___h38aX_1-3-4 .magritte-morph-item___8kF46_1-3-4,
|
|
255
|
+
.magritte-metrics-mode___h38aX_1-3-4 .magritte-pane___f8eFC_1-3-4,
|
|
256
|
+
.magritte-metrics-mode___h38aX_1-3-4 .magritte-next-pane___H2oxQ_1-3-4{
|
|
242
257
|
transform:none !important;
|
|
243
258
|
}
|
|
244
259
|
.nav-bar-layout-animation-stage-end,
|
|
@@ -249,41 +264,41 @@
|
|
|
249
264
|
height:auto !important;
|
|
250
265
|
transform:none !important;
|
|
251
266
|
}
|
|
252
|
-
.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-3-
|
|
253
|
-
.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-3-
|
|
267
|
+
.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-3-4,
|
|
268
|
+
.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-3-4{
|
|
254
269
|
position:static !important;
|
|
255
270
|
width:auto !important;
|
|
256
271
|
height:auto !important;
|
|
257
272
|
transform:none !important;
|
|
258
273
|
}
|
|
259
|
-
.magritte-layout-morph___I3SPy_1-3-
|
|
274
|
+
.magritte-layout-morph___I3SPy_1-3-4{
|
|
260
275
|
display:block;
|
|
261
276
|
position:absolute;
|
|
262
277
|
transform-origin:var(--magritte-ui-morph-item-transform-origin-x, center) var(--magritte-ui-morph-item-transform-origin-y, center);
|
|
263
278
|
z-index:3;
|
|
264
279
|
}
|
|
265
|
-
.magritte-animation-stage-progress___5FthT_1-3-
|
|
280
|
+
.magritte-animation-stage-progress___5FthT_1-3-4 .magritte-layout-morph___I3SPy_1-3-4 > *{
|
|
266
281
|
margin:0 !important;
|
|
267
282
|
}
|
|
268
|
-
.magritte-layout-morph-start___9-krP_1-3-
|
|
283
|
+
.magritte-layout-morph-start___9-krP_1-3-4{
|
|
269
284
|
z-index:2;
|
|
270
285
|
}
|
|
271
|
-
.magritte-layout-morph-end___LIg4d_1-3-
|
|
286
|
+
.magritte-layout-morph-end___LIg4d_1-3-4{
|
|
272
287
|
z-index:1;
|
|
273
288
|
}
|
|
274
|
-
.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-3-
|
|
289
|
+
.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-3-4{
|
|
275
290
|
display:contents;
|
|
276
291
|
}
|
|
277
|
-
.nav-bar-layout-animation-stage-start .magritte-layout-morph-end___LIg4d_1-3-
|
|
292
|
+
.nav-bar-layout-animation-stage-start .magritte-layout-morph-end___LIg4d_1-3-4{
|
|
278
293
|
display:none;
|
|
279
294
|
}
|
|
280
|
-
.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-3-
|
|
295
|
+
.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-3-4{
|
|
281
296
|
display:contents;
|
|
282
297
|
}
|
|
283
|
-
.nav-bar-layout-animation-stage-end .magritte-layout-morph-start___9-krP_1-3-
|
|
298
|
+
.nav-bar-layout-animation-stage-end .magritte-layout-morph-start___9-krP_1-3-4{
|
|
284
299
|
display:none;
|
|
285
300
|
}
|
|
286
|
-
.magritte-divider-container___-NdWi_1-3-
|
|
301
|
+
.magritte-divider-container___-NdWi_1-3-4{
|
|
287
302
|
position:absolute;
|
|
288
303
|
width:100%;
|
|
289
304
|
bottom:0;
|
package/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
export { Actions } from './public/Actions.js';
|
|
3
|
-
export { N as NavBar } from './NavBar-
|
|
3
|
+
export { N as NavBar } from './NavBar-CsMoS3xA.js';
|
|
4
4
|
export { ExternalPane as Pane } from './public/Pane.js';
|
|
5
5
|
export { ExternalStage as Stage } from './public/Stage.js';
|
|
6
6
|
export { Morph } from './public/Morph.js';
|
package/internal/PaneStore.js
CHANGED
|
@@ -3,7 +3,7 @@ import { createContext, useContext, useId, useLayoutEffect } from 'react';
|
|
|
3
3
|
import { motionValue } from 'motion';
|
|
4
4
|
import { KeyedSubscriptions } from './KeyedSubscriptions.js';
|
|
5
5
|
import { useInitOnce } from './utils.js';
|
|
6
|
-
import { u as useNavBarContext } from '../NavBar-
|
|
6
|
+
import { u as useNavBarContext } from '../NavBar-CsMoS3xA.js';
|
|
7
7
|
import 'react/jsx-runtime';
|
|
8
8
|
import 'classnames';
|
|
9
9
|
import 'motion/react';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-nav-bar",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.4",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
"@hh.ru/magritte-ui-layer": "3.2.1",
|
|
37
37
|
"@hh.ru/magritte-ui-mock-component": "1.1.6"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "83d85ed3ddca2987dfacd2e84d6bf207d6b1bb97"
|
|
40
40
|
}
|
package/public/Actions.js
CHANGED
|
@@ -6,7 +6,7 @@ import { isIconElement } from '@hh.ru/magritte-ui-icon';
|
|
|
6
6
|
import { EnvironmentFingerprintNode } from './EnvironmentFingerprintNode.js';
|
|
7
7
|
import { Morph } from './Morph.js';
|
|
8
8
|
import { useAnimationStage } from './Stage.js';
|
|
9
|
-
import { s as styles } from '../NavBar-
|
|
9
|
+
import { s as styles } from '../NavBar-CsMoS3xA.js';
|
|
10
10
|
import '../internal/MetricsProvider.js';
|
|
11
11
|
import '../internal/utils.js';
|
|
12
12
|
import 'motion';
|
package/public/LayoutMorph.js
CHANGED
|
@@ -10,7 +10,7 @@ import { usePaneStore } from '../internal/PaneStore.js';
|
|
|
10
10
|
import { useInert } from '../internal/useInert.js';
|
|
11
11
|
import { useActualRef, useStoreSyncedTransform, lerp, calcMorphParams } from '../internal/utils.js';
|
|
12
12
|
import { AnimationStageContext } from './LayoutStage.js';
|
|
13
|
-
import { s as styles } from '../NavBar-
|
|
13
|
+
import { s as styles } from '../NavBar-CsMoS3xA.js';
|
|
14
14
|
import '../internal/KeyedSubscriptions.js';
|
|
15
15
|
import 'motion';
|
|
16
16
|
import '@hh.ru/magritte-common-use-when-font-loaded';
|
package/public/LayoutStage.js
CHANGED
|
@@ -9,7 +9,7 @@ import { MorphStoreProvider, useMorphStore } from '../internal/MorphStore.js';
|
|
|
9
9
|
import { usePaneStore } from '../internal/PaneStore.js';
|
|
10
10
|
import { useInitOnce } from '../internal/utils.js';
|
|
11
11
|
import { EnvironmentFingerprintNode, useEnvironmentFingerprint } from './EnvironmentFingerprintNode.js';
|
|
12
|
-
import { s as styles } from '../NavBar-
|
|
12
|
+
import { s as styles } from '../NavBar-CsMoS3xA.js';
|
|
13
13
|
import '../internal/KeyedSubscriptions.js';
|
|
14
14
|
import 'motion';
|
|
15
15
|
import '@hh.ru/magritte-ui-divider';
|
package/public/Morph.js
CHANGED
|
@@ -9,7 +9,7 @@ import { usePaneStore } from '../internal/PaneStore.js';
|
|
|
9
9
|
import { useStoreSyncedTransform, calcMorphParams, lerp } from '../internal/utils.js';
|
|
10
10
|
import { useEnvironmentFingerprint } from './EnvironmentFingerprintNode.js';
|
|
11
11
|
import { useAnimationStage } from './Stage.js';
|
|
12
|
-
import { s as styles } from '../NavBar-
|
|
12
|
+
import { s as styles } from '../NavBar-CsMoS3xA.js';
|
|
13
13
|
import '../internal/KeyedSubscriptions.js';
|
|
14
14
|
import 'motion';
|
|
15
15
|
import '../internal/useInert.js';
|
package/public/NavBar.js
CHANGED
|
@@ -14,7 +14,7 @@ import '../internal/useScrollAdapter.js';
|
|
|
14
14
|
import '../internal/useSnapScroll.js';
|
|
15
15
|
import '../internal/useSyncMotionValue.js';
|
|
16
16
|
import '../internal/utils.js';
|
|
17
|
-
export { N as NavBar, u as useNavBarContext } from '../NavBar-
|
|
17
|
+
export { N as NavBar, u as useNavBarContext } from '../NavBar-CsMoS3xA.js';
|
|
18
18
|
import 'motion';
|
|
19
19
|
import '@hh.ru/magritte-internal-custom-scroll';
|
|
20
20
|
//# sourceMappingURL=NavBar.js.map
|
package/public/Pane.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import './../index.css';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { Children, isValidElement, cloneElement } from 'react';
|
|
4
|
+
import classNames from 'classnames';
|
|
4
5
|
import { useMotionValue, motion } from 'motion/react';
|
|
5
6
|
import { MorphStoreProvider } from '../internal/MorphStore.js';
|
|
6
7
|
import { usePaneStore, PaneContext } from '../internal/PaneStore.js';
|
|
@@ -9,11 +10,10 @@ import { useInitOnce, useStoreSyncedTransform, lerp } from '../internal/utils.js
|
|
|
9
10
|
import { EnvironmentFingerprintProvider } from './EnvironmentFingerprintNode.js';
|
|
10
11
|
import { LayoutStage } from './LayoutStage.js';
|
|
11
12
|
import { Stage } from './Stage.js';
|
|
12
|
-
import { s as styles } from '../NavBar-
|
|
13
|
+
import { s as styles } from '../NavBar-CsMoS3xA.js';
|
|
13
14
|
import '../internal/KeyedSubscriptions.js';
|
|
14
15
|
import 'motion';
|
|
15
16
|
import '../internal/MetricsProvider.js';
|
|
16
|
-
import 'classnames';
|
|
17
17
|
import '@hh.ru/magritte-common-use-when-font-loaded';
|
|
18
18
|
import '../internal/useInert.js';
|
|
19
19
|
import '@hh.ru/magritte-ui-divider';
|
|
@@ -65,7 +65,7 @@ const Pane = ({ children, nextPane, foldable, animationProgress }) => {
|
|
|
65
65
|
backgroundY.set(-shift);
|
|
66
66
|
backgroundScale.set(height.start === 0 ? 1 : lerp(height.start, foldable ? 0 : height.end, progress) / height.start);
|
|
67
67
|
});
|
|
68
|
-
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,
|
|
68
|
+
return (jsxs(motion.div, { className: classNames(styles.pane, { [styles.lastPane]: !nextPane }), 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,
|
|
69
69
|
// если foldable уезжаем под контент, если нет то надо быть над контентом панели идущей перед
|
|
70
70
|
// т.к. если контент сверху становится меньше, то во время фейда следующая панель
|
|
71
71
|
// должна быть над ним, иначе исчезающий контент будет накладываться поверх панели пока
|
package/public/Pane.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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 classNames from 'classnames';\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\n className={classNames(styles.pane, { [styles.lastPane]: !nextPane })}\n style={{ y: foldable ? y : 0 }}\n >\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.js
CHANGED
|
@@ -7,7 +7,7 @@ import { useMeasureAuto } from '../internal/MetricsProvider.js';
|
|
|
7
7
|
import { usePaneStore } from '../internal/PaneStore.js';
|
|
8
8
|
import { useInert } from '../internal/useInert.js';
|
|
9
9
|
import { EnvironmentFingerprintNode } from './EnvironmentFingerprintNode.js';
|
|
10
|
-
import { s as styles } from '../NavBar-
|
|
10
|
+
import { s as styles } from '../NavBar-CsMoS3xA.js';
|
|
11
11
|
import '../internal/utils.js';
|
|
12
12
|
import 'motion';
|
|
13
13
|
import '../internal/KeyedSubscriptions.js';
|
package/public/TitleContainer.js
CHANGED
|
@@ -2,7 +2,7 @@ import './../index.css';
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { Morph } from './Morph.js';
|
|
5
|
-
import { s as styles } from '../NavBar-
|
|
5
|
+
import { s as styles } from '../NavBar-CsMoS3xA.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
import 'motion/react';
|
|
8
8
|
import '../internal/MetricsProvider.js';
|