@hh.ru/magritte-ui-nav-bar 1.3.2 → 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.
@@ -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-2","actionsContainer":"magritte-actions-container___CBgYW_1-3-2","actions-no-children":"magritte-actions-no-children___rgJUl_1-3-2","actionsNoChildren":"magritte-actions-no-children___rgJUl_1-3-2","actions-left-slot":"magritte-actions-left-slot___DNOj0_1-3-2","actionsLeftSlot":"magritte-actions-left-slot___DNOj0_1-3-2","actions-right-slot":"magritte-actions-right-slot___aodtj_1-3-2","actionsRightSlot":"magritte-actions-right-slot___aodtj_1-3-2","navbar-transparent-end":"magritte-navbar-transparent-end___6KqLR_1-3-2","navbarTransparentEnd":"magritte-navbar-transparent-end___6KqLR_1-3-2","actions-start-stage":"magritte-actions-start-stage___MJ67a_1-3-2","actionsStartStage":"magritte-actions-start-stage___MJ67a_1-3-2","actions-side-slot-content":"magritte-actions-side-slot-content___TlHrX_1-3-2","actionsSideSlotContent":"magritte-actions-side-slot-content___TlHrX_1-3-2","actions-icon-morph":"magritte-actions-icon-morph___-nNgW_1-3-2","actionsIconMorph":"magritte-actions-icon-morph___-nNgW_1-3-2","navbar-transparent-start":"magritte-navbar-transparent-start___wysv0_1-3-2","navbarTransparentStart":"magritte-navbar-transparent-start___wysv0_1-3-2","actions-end-stage":"magritte-actions-end-stage___qHtTV_1-3-2","actionsEndStage":"magritte-actions-end-stage___qHtTV_1-3-2","navbar-not-transparent":"magritte-navbar-not-transparent___5KZNp_1-3-2","navbarNotTransparent":"magritte-navbar-not-transparent___5KZNp_1-3-2","actions-only-stage":"magritte-actions-only-stage___cg10A_1-3-2","actionsOnlyStage":"magritte-actions-only-stage___cg10A_1-3-2","actions-side-slot-content-clone":"magritte-actions-side-slot-content-clone___jDxVm_1-3-2","actionsSideSlotContentClone":"magritte-actions-side-slot-content-clone___jDxVm_1-3-2","actions-center-slot":"magritte-actions-center-slot___hLAy6_1-3-2","actionsCenterSlot":"magritte-actions-center-slot___hLAy6_1-3-2","actions-center-slot-centered":"magritte-actions-center-slot-centered___merXQ_1-3-2","actionsCenterSlotCentered":"magritte-actions-center-slot-centered___merXQ_1-3-2","title-container-wrapper":"magritte-title-container-wrapper___DQUcj_1-3-2","titleContainerWrapper":"magritte-title-container-wrapper___DQUcj_1-3-2","title-main-part":"magritte-title-main-part___npoHN_1-3-2","titleMainPart":"magritte-title-main-part___npoHN_1-3-2","title-left-slot":"magritte-title-left-slot___HTE7h_1-3-2","titleLeftSlot":"magritte-title-left-slot___HTE7h_1-3-2","title-container":"magritte-title-container___y9AIx_1-3-2","titleContainer":"magritte-title-container___y9AIx_1-3-2","subtitle-container":"magritte-subtitle-container___nVUBu_1-3-2","subtitleContainer":"magritte-subtitle-container___nVUBu_1-3-2","centered":"magritte-centered___Y2mlP_1-3-2","title-morph-item":"magritte-title-morph-item___t7Wf3_1-3-2","titleMorphItem":"magritte-title-morph-item___t7Wf3_1-3-2","title":"magritte-title___ZbLgP_1-3-2","pane-content":"magritte-pane-content___UVmC6_1-3-2","paneContent":"magritte-pane-content___UVmC6_1-3-2","pane-background":"magritte-pane-background___PDZAX_1-3-2","paneBackground":"magritte-pane-background___PDZAX_1-3-2","morph-item":"magritte-morph-item___8kF46_1-3-2","morphItem":"magritte-morph-item___8kF46_1-3-2","morph-item-top":"magritte-morph-item-top___WPEkn_1-3-2","morphItemTop":"magritte-morph-item-top___WPEkn_1-3-2","morph-item-bottom":"magritte-morph-item-bottom___zNbsF_1-3-2","morphItemBottom":"magritte-morph-item-bottom___zNbsF_1-3-2","morph-item-left":"magritte-morph-item-left___T6AMW_1-3-2","morphItemLeft":"magritte-morph-item-left___T6AMW_1-3-2","morph-item-right":"magritte-morph-item-right___EuT1E_1-3-2","morphItemRight":"magritte-morph-item-right___EuT1E_1-3-2","pane":"magritte-pane___f8eFC_1-3-2","start-state-container":"magritte-start-state-container___giBVb_1-3-2","startStateContainer":"magritte-start-state-container___giBVb_1-3-2","end-state-container":"magritte-end-state-container___uiW8Q_1-3-2","endStateContainer":"magritte-end-state-container___uiW8Q_1-3-2","content-container":"magritte-content-container___7s7vv_1-3-2","contentContainer":"magritte-content-container___7s7vv_1-3-2","next-pane":"magritte-next-pane___H2oxQ_1-3-2","nextPane":"magritte-next-pane___H2oxQ_1-3-2","nav-bar":"magritte-nav-bar___RRGe0_1-3-2","navBar":"magritte-nav-bar___RRGe0_1-3-2","nav-bar-overlay":"magritte-nav-bar-overlay___Mq5ZD_1-3-2","navBarOverlay":"magritte-nav-bar-overlay___Mq5ZD_1-3-2","nav-bar-overlay-wrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-3-2","navBarOverlayWrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-3-2","nav-bar-content-container":"magritte-nav-bar-content-container___H-WMO_1-3-2","navBarContentContainer":"magritte-nav-bar-content-container___H-WMO_1-3-2","nav-bar-panes-container":"magritte-nav-bar-panes-container___5ZDLa_1-3-2","navBarPanesContainer":"magritte-nav-bar-panes-container___5ZDLa_1-3-2","nav-bar-progressive-blur":"magritte-nav-bar-progressive-blur___qyeUV_1-3-2","navBarProgressiveBlur":"magritte-nav-bar-progressive-blur___qyeUV_1-3-2","nav-bar-stage":"magritte-nav-bar-stage___amDz7_1-3-2","navBarStage":"magritte-nav-bar-stage___amDz7_1-3-2","metrics-mode":"magritte-metrics-mode___h38aX_1-3-2","metricsMode":"magritte-metrics-mode___h38aX_1-3-2","layout-morph":"magritte-layout-morph___I3SPy_1-3-2","layoutMorph":"magritte-layout-morph___I3SPy_1-3-2","animation-stage-progress":"magritte-animation-stage-progress___5FthT_1-3-2","animationStageProgress":"magritte-animation-stage-progress___5FthT_1-3-2","layout-morph-start":"magritte-layout-morph-start___9-krP_1-3-2","layoutMorphStart":"magritte-layout-morph-start___9-krP_1-3-2","layout-morph-end":"magritte-layout-morph-end___LIg4d_1-3-2","layoutMorphEnd":"magritte-layout-morph-end___LIg4d_1-3-2","divider-container":"magritte-divider-container___-NdWi_1-3-2","dividerContainer":"magritte-divider-container___-NdWi_1-3-2"};
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-BvrJHXdN.js.map
116
+ //# sourceMappingURL=NavBar-CsMoS3xA.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NavBar-BvrJHXdN.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":"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"}
package/index.css CHANGED
@@ -1,101 +1,101 @@
1
1
  :root{
2
- --magritte-color-background-body-v24-3-0:#ffffff;
2
+ --magritte-color-background-body-v24-4-0:#ffffff;
3
3
  }
4
4
 
5
5
  .magritte-night-theme{
6
- --magritte-color-background-body-v24-3-0:#000000;
6
+ --magritte-color-background-body-v24-4-0:#000000;
7
7
  }
8
- .magritte-actions-container___CBgYW_1-3-2{
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-2{
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-2,
18
- .magritte-actions-right-slot___aodtj_1-3-2{
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-2 .magritte-actions-start-stage___MJ67a_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > .magritte-actions-icon-morph___-nNgW_1-3-2:first-child,
23
- .magritte-navbar-transparent-start___wysv0_1-3-2 .magritte-actions-end-stage___qHtTV_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > .magritte-actions-icon-morph___-nNgW_1-3-2:first-child,
24
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-start-stage___MJ67a_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > .magritte-actions-icon-morph___-nNgW_1-3-2:first-child,
25
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-end-stage___qHtTV_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > .magritte-actions-icon-morph___-nNgW_1-3-2:first-child,
26
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > .magritte-actions-icon-morph___-nNgW_1-3-2:first-child{
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-2 .magritte-actions-start-stage___MJ67a_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > .magritte-actions-icon-morph___-nNgW_1-3-2:last-child,
30
- .magritte-navbar-transparent-start___wysv0_1-3-2 .magritte-actions-end-stage___qHtTV_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > .magritte-actions-icon-morph___-nNgW_1-3-2:last-child,
31
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-start-stage___MJ67a_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > .magritte-actions-icon-morph___-nNgW_1-3-2:last-child,
32
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-end-stage___qHtTV_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > .magritte-actions-icon-morph___-nNgW_1-3-2:last-child,
33
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > .magritte-actions-icon-morph___-nNgW_1-3-2:last-child{
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-2 .magritte-actions-start-stage___MJ67a_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :last-child,
37
- .magritte-navbar-transparent-start___wysv0_1-3-2 .magritte-actions-end-stage___qHtTV_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :last-child,
38
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-start-stage___MJ67a_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :last-child,
39
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-end-stage___qHtTV_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :last-child,
40
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :last-child,
41
- .magritte-navbar-transparent-end___6KqLR_1-3-2 .magritte-actions-start-stage___MJ67a_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-3-2),
42
- .magritte-navbar-transparent-start___wysv0_1-3-2 .magritte-actions-end-stage___qHtTV_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-3-2),
43
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-start-stage___MJ67a_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-3-2),
44
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-end-stage___qHtTV_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-3-2),
45
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-3-2){
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-2 .magritte-actions-start-stage___MJ67a_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :first-child,
49
- .magritte-navbar-transparent-start___wysv0_1-3-2 .magritte-actions-end-stage___qHtTV_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :first-child,
50
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-start-stage___MJ67a_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :first-child,
51
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-end-stage___qHtTV_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :first-child,
52
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :first-child,
53
- .magritte-navbar-transparent-end___6KqLR_1-3-2 .magritte-actions-start-stage___MJ67a_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-3-2),
54
- .magritte-navbar-transparent-start___wysv0_1-3-2 .magritte-actions-end-stage___qHtTV_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-3-2),
55
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-start-stage___MJ67a_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-3-2),
56
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-end-stage___qHtTV_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-3-2),
57
- .magritte-navbar-not-transparent___5KZNp_1-3-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-3-2){
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-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :first-child,
61
- .magritte-navbar-transparent-start___wysv0_1-3-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :first-child{
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-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :last-child,
65
- .magritte-navbar-transparent-start___wysv0_1-3-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :last-child{
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-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :first-child,
69
- .magritte-navbar-transparent-end___6KqLR_1-3-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :first-child{
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-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-right-slot___aodtj_1-3-2 .magritte-actions-side-slot-content___TlHrX_1-3-2 > :last-child,
73
- .magritte-navbar-transparent-end___6KqLR_1-3-2 .magritte-actions-only-stage___cg10A_1-3-2 .magritte-actions-left-slot___DNOj0_1-3-2 .magritte-actions-side-slot-content-clone___jDxVm_1-3-2 > :last-child{
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-2{
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-2.magritte-actions-center-slot-centered___merXQ_1-3-2{
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-2,
85
- .magritte-actions-side-slot-content-clone___jDxVm_1-3-2{
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-2{
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-2{
98
+ .magritte-title-container-wrapper___DQUcj_1-3-4{
99
99
  display:flex;
100
100
  flex-direction:row;
101
101
  align-items:center;
@@ -103,89 +103,89 @@
103
103
  min-width:0;
104
104
  gap:12px;
105
105
  }
106
- .magritte-title-main-part___npoHN_1-3-2{
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-2{
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-2{
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-2{
123
+ .magritte-subtitle-container___nVUBu_1-3-4{
124
124
  display:flex;
125
125
  }
126
- .magritte-centered___Y2mlP_1-3-2 .magritte-subtitle-container___nVUBu_1-3-2,
127
- .magritte-centered___Y2mlP_1-3-2 .magritte-title-container___y9AIx_1-3-2{
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-2{
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-2{
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-2{
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-2{
144
+ .magritte-pane-background___PDZAX_1-3-4{
145
145
  position:absolute;
146
- background-color:var(--magritte-ui-nav-bar-background-color-override, var(--magritte-ui-container-background-color-override, var(--magritte-color-background-body-v24-3-0)));
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;
148
148
  inset:0;
149
149
  z-index:-1;
150
150
  transform-origin:0 0;
151
151
  }
152
- .magritte-navbar-transparent-start___wysv0_1-3-2 .magritte-pane-background___PDZAX_1-3-2{
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-2 .magritte-pane-background___PDZAX_1-3-2{
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-2 .magritte-pane-background___PDZAX_1-3-2{
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-2{
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-2{
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-2{
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-2{
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-2{
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-2{
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-2{
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-2{
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-2{
197
+ .magritte-content-container___7s7vv_1-3-4{
198
198
  box-sizing:border-box;
199
199
  }
200
- .magritte-next-pane___H2oxQ_1-3-2{
200
+ .magritte-next-pane___H2oxQ_1-3-4{
201
201
  position:relative;
202
202
  }
203
- .magritte-nav-bar___RRGe0_1-3-2{
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-2 .magritte-nav-bar-overlay-wrapper___y1VpY_1-3-2{
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-2{
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-2{
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-2{
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-2 :not(.magritte-next-pane___H2oxQ_1-3-2) .magritte-nav-bar-stage___amDz7_1-3-2,
232
- .magritte-nav-bar-content-container___H-WMO_1-3-2 :not(.magritte-next-pane___H2oxQ_1-3-2) .nav-bar-layout-animation-stage-start,
233
- .magritte-nav-bar-content-container___H-WMO_1-3-2 :not(.magritte-next-pane___H2oxQ_1-3-2) .nav-bar-layout-animation-stage-end{
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-2{
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-2 .magritte-morph-item___8kF46_1-3-2,
240
- .magritte-metrics-mode___h38aX_1-3-2 .magritte-pane___f8eFC_1-3-2,
241
- .magritte-metrics-mode___h38aX_1-3-2 .magritte-next-pane___H2oxQ_1-3-2{
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-2,
253
- .nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-3-2{
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-2{
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-2 .magritte-layout-morph___I3SPy_1-3-2 > *{
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-2{
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-2{
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-2{
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-2{
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-2{
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-2{
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-2{
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-BvrJHXdN.js';
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';
@@ -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-BvrJHXdN.js';
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.2",
3
+ "version": "1.3.4",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -29,12 +29,12 @@
29
29
  "dependencies": {
30
30
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.10",
31
31
  "@hh.ru/magritte-common-use-when-font-loaded": "1.0.13",
32
- "@hh.ru/magritte-design-tokens": "24.3.0",
32
+ "@hh.ru/magritte-design-tokens": "24.4.0",
33
33
  "@hh.ru/magritte-internal-custom-scroll": "2.1.0",
34
- "@hh.ru/magritte-ui-divider": "3.0.15",
35
- "@hh.ru/magritte-ui-icon": "13.10.0",
36
- "@hh.ru/magritte-ui-layer": "3.2.0",
34
+ "@hh.ru/magritte-ui-divider": "3.0.16",
35
+ "@hh.ru/magritte-ui-icon": "13.10.1",
36
+ "@hh.ru/magritte-ui-layer": "3.2.1",
37
37
  "@hh.ru/magritte-ui-mock-component": "1.1.6"
38
38
  },
39
- "gitHead": "c9930c21240dac1610236be666e8d0c45c60f4bc"
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-BvrJHXdN.js';
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';
@@ -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-BvrJHXdN.js';
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';
@@ -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-BvrJHXdN.js';
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-BvrJHXdN.js';
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-BvrJHXdN.js';
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-BvrJHXdN.js';
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
  // должна быть над ним, иначе исчезающий контент будет накладываться поверх панели пока
@@ -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 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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"}
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-BvrJHXdN.js';
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';
@@ -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-BvrJHXdN.js';
5
+ import { s as styles } from '../NavBar-CsMoS3xA.js';
6
6
  import 'react';
7
7
  import 'motion/react';
8
8
  import '../internal/MetricsProvider.js';