@amboss/design-system 4.19.0 → 4.19.2-canary.0

package/build/esm/components/Layout/LeftPanel/LeftPanel.js

@@ -1 +1 @@
-import React,{useId}from"react";import{useTheme}from"@emotion/react";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{LeftPanelIdContext}from"../useLeftPanelId";import{LeftPanelDocked}from"./LeftPanelDocked";import{LeftPanelDrawer}from"./LeftPanelDrawer";import{LeftPanelOffcanvas}from"./LeftPanelOffcanvas";export const LeftPanel=({children,slotProps,collapsible=!0,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=useLayout()[Slot.leftPanel],leftPanelId=useId(),openWidth=useTheme().variables.layout.leftPanel.width.open;useVisibleChange(isVisible,onVisibleChange);let drawer=React.createElement(LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),offcanvas=React.createElement(LeftPanelOffcanvas,{slotProps:slotProps,isVisible:isVisible,hide:hide,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),docked=React.createElement(LeftPanelDocked,{slotProps:slotProps,"aria-label":ariaLabel,defaultSize:parseFloat(openWidth),collapsible:collapsible,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children);return React.createElement(LeftPanelIdContext.Provider,{value:leftPanelId},{drawer,offcanvas,sidebar:docked}[state.variant])};
+import React,{useId}from"react";import{useTheme}from"@emotion/react";import{DEFAULT_LEFT_PANEL_VARIANT,Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayoutSelector,useLayoutStore}from"../context";import{LeftPanelIdContext}from"../useLeftPanelId";import{LeftPanelDocked}from"./LeftPanelDocked";import{LeftPanelDrawer}from"./LeftPanelDrawer";import{LeftPanelOffcanvas}from"./LeftPanelOffcanvas";export const LeftPanel=({children,slotProps,collapsible=!0,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let state=useLayoutSelector(layoutState=>layoutState.leftPanel),{dispatch}=useLayoutStore(),isVisible=state.visible,hide=()=>dispatch({type:"setVisible",slot:Slot.leftPanel,visible:!1}),leftPanelId=useId(),openWidth=useTheme().variables.layout.leftPanel.width.open;useVisibleChange(isVisible,onVisibleChange);let drawer=React.createElement(LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),offcanvas=React.createElement(LeftPanelOffcanvas,{slotProps:slotProps,isVisible:isVisible,hide:hide,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),docked=React.createElement(LeftPanelDocked,{slotProps:slotProps,"aria-label":ariaLabel,defaultSize:parseFloat(openWidth),collapsible:collapsible,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children);return React.createElement(LeftPanelIdContext.Provider,{value:leftPanelId},{drawer,offcanvas,sidebar:docked}[state.variant??DEFAULT_LEFT_PANEL_VARIANT])};

package/build/esm/components/Layout/LeftPanel/LeftPanelDocked.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{useTheme}from"@emotion/react";import{PAGE_BOTTOM_BAR_INSET,Slot}from"../-constants";import{useLayoutPortal}from"../registry";import{usePanelDockedSlide}from"../usePanelDockedSlide";import{LEFT_BAR_TOP_INSET,LeftBarLayers,getLeftBarColumnStyles,getLeftBarTopTransition}from"./LeftBarLayers";import{useLayout}from"../useLayout";let StyledLeftBarColumn=styled("div",{target:"e1crtgka0",label:"StyledLeftBarColumn"})(({theme})=>({position:"absolute",left:0,right:0,top:LEFT_BAR_TOP_INSET,bottom:PAGE_BOTTOM_BAR_INSET,transition:getLeftBarTopTransition(theme),"@media (prefers-reduced-motion: reduce)":{transition:"none"},...getLeftBarColumnStyles(theme)}));export const LeftPanelDocked=({children,slotProps,"aria-label":ariaLabel,defaultSize,collapsible=!0,scrollContainerRef,onScroll})=>{let theme=useTheme(),{isVisible}=useLayout()[Slot.leftPanel],{fixedWidth}=usePanelDockedSlide({slot:Slot.leftPanel,defaultSize,collapsible,resizable:!1,lockWidthOnWindowResize:!0,collapsedSize:parseFloat(theme.variables.size.dimension.leftNavBar.width)});return useLayoutPortal(Slot.leftPanel,React.createElement(StyledLeftBarColumn,null,React.createElement(LeftBarLayers,{isVisible:isVisible,slotProps:slotProps,openWidth:`${fixedWidth??defaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};
+import React from"react";import styled from"@emotion/styled";import{useTheme}from"@emotion/react";import{PAGE_BOTTOM_BAR_INSET,Slot}from"../-constants";import{useLayoutPortal}from"../registry";import{usePanelDockedSlide}from"../usePanelDockedSlide";import{LEFT_BAR_TOP_INSET,LeftBarLayers,getLeftBarColumnStyles,getLeftBarTopTransition}from"./LeftBarLayers";import{useLayoutSelector}from"../context";let StyledLeftBarColumn=styled("div",{target:"ehfszj0",label:"StyledLeftBarColumn"})(({theme})=>({position:"absolute",left:0,right:0,top:LEFT_BAR_TOP_INSET,bottom:PAGE_BOTTOM_BAR_INSET,transition:getLeftBarTopTransition(theme),"@media (prefers-reduced-motion: reduce)":{transition:"none"},...getLeftBarColumnStyles(theme)}));export const LeftPanelDocked=({children,slotProps,"aria-label":ariaLabel,defaultSize,collapsible=!0,scrollContainerRef,onScroll})=>{let theme=useTheme(),isVisible=useLayoutSelector(state=>state.leftPanel.visible),{fixedWidth}=usePanelDockedSlide({slot:Slot.leftPanel,defaultSize,collapsible,resizable:!1,lockWidthOnWindowResize:!0,collapsedSize:parseFloat(theme.variables.size.dimension.leftNavBar.width)});return useLayoutPortal(Slot.leftPanel,React.createElement(StyledLeftBarColumn,null,React.createElement(LeftBarLayers,{isVisible:isVisible,slotProps:slotProps,openWidth:`${fixedWidth??defaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

package/build/esm/components/Layout/LeftPanel/LeftPanelHeader.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{getLeftPanelFadeStyles}from"../../../shared/mixins/getLeftPanelFadeStyles";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{useLeftPanelCollapseContext}from"./useLeftPanelCollapseContext";let StyledHeaderStrip=styled("div",{target:"e183h5z80",label:"StyledHeaderStrip"})(({theme,isFaded,fixedContentWidth})=>({minWidth:fixedContentWidth,...getLeftPanelFadeStyles({theme,isFaded})}));export function LeftPanelHeader({leftSlot,title,rightSlot,children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,fixedContentWidth}=useLeftPanelCollapseContext();return React.createElement(Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},React.createElement(PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:rightSlot,isContentFaded:isContentFaded}),children&&React.createElement(StyledHeaderStrip,{isFaded:isContentFaded,fixedContentWidth:fixedContentWidth},children))}
+import React from"react";import styled from"@emotion/styled";import{getLeftPanelFadeStyles}from"../../../shared/mixins/getLeftPanelFadeStyles";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{useLeftPanelCollapseContext}from"./useLeftPanelCollapseContext";let StyledHeaderStrip=styled("div",{target:"elzurng0",label:"StyledHeaderStrip"})(({theme,isFaded,fixedContentWidth})=>({minWidth:fixedContentWidth,...getLeftPanelFadeStyles({theme,isFaded})}));export function LeftPanelHeader({leftSlot,title,rightSlot,children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,fixedContentWidth}=useLeftPanelCollapseContext();return React.createElement(Sandwich.Header,{showSeparator:isContentFaded?"never":"always","data-e2e-test-id":dataE2eTestId},React.createElement(PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:rightSlot,isContentFaded:isContentFaded}),children&&React.createElement(StyledHeaderStrip,{isFaded:isContentFaded,fixedContentWidth:fixedContentWidth},children))}

package/build/esm/components/Layout/LeftPanel/useLeftBarContext.d.ts

@@ -6,6 +6,6 @@ export type LeftBarSlot = {
      *  content alone. */
     slotNode: HTMLElement | null;
 };
-export declare const LeftBarProvider: import("react").Provider<LeftBarSlot>;
+export declare const LeftBarProvider: React.Provider<LeftBarSlot>;
 /** The left bar slot behind the left panel, if this presentation has one. */
 export declare const useLeftBarContext: () => LeftBarSlot;

package/build/esm/components/Layout/LeftPanel/useLeftPanelCollapseContext.d.ts

@@ -6,6 +6,6 @@ export type LeftPanelCollapseState = {
      *  at the column's edge so nothing inside reflows on the way down. */
     fixedContentWidth?: string;
 };
-export declare const LeftPanelCollapseProvider: import("react").Provider<LeftPanelCollapseState>;
+export declare const LeftPanelCollapseProvider: React.Provider<LeftPanelCollapseState>;
 /** How the left panel's parts have to behave while its column narrows. */
 export declare const useLeftPanelCollapseContext: () => LeftPanelCollapseState;

package/build/esm/components/Layout/RightPanel/RightPanel.js

@@ -1 +1 @@
-import React from"react";import{useTheme}from"@emotion/react";import{Slot}from"../-constants";import{useDeclarePanel,useRunCallbackOnValueChange}from"../registry";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{RightPanelDocked}from"./RightPanelDocked";import{RightPanelSheet}from"./RightPanelSheet";export const RightPanel=({children,defaultSize,collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[Slot.rightPanel]:panel}=useLayout(),{isVisible,hide}=panel,{isMobile}=useBreakpoints(),{width,minWidth,maxWidth}=useTheme().variables.layout.rightPanel,resolvedDefaultSize=defaultSize??width.open;useDeclarePanel(Slot.rightPanel,{defaultSize:resolvedDefaultSize,minSize:minWidth.default,maxSize:maxWidth.default,collapsible,resizable,lockWidthOnWindowResize:"number"==typeof resolvedDefaultSize||resolvedDefaultSize.trim().endsWith("px"),variant});let resolvedVariant=layoutState[Slot.rightPanel].variant??variant;return useRunCallbackOnValueChange(isVisible,onVisibleChange),useRunCallbackOnValueChange(resolvedVariant,onVariantChange),isMobile?React.createElement(RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)};
+import React from"react";import{useTheme}from"@emotion/react";import{Slot}from"../-constants";import{useDeclarePanel,useRunCallbackOnValueChange}from"../registry";import{useLayoutSelector,useLayoutStore}from"../context";import{useBreakpoints}from"../../../shared/useBreakpoints";import{RightPanelDocked}from"./RightPanelDocked";import{RightPanelSheet}from"./RightPanelSheet";export const RightPanel=({children,defaultSize,collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let state=useLayoutSelector(layoutState=>layoutState.rightPanel),{dispatch}=useLayoutStore(),isVisible=state.visible,{isMobile}=useBreakpoints(),{width,minWidth,maxWidth}=useTheme().variables.layout.rightPanel,resolvedDefaultSize=defaultSize??width.open;useDeclarePanel(Slot.rightPanel,{defaultSize:resolvedDefaultSize,minSize:minWidth.default,maxSize:maxWidth.default,collapsible,resizable,lockWidthOnWindowResize:"number"==typeof resolvedDefaultSize||resolvedDefaultSize.trim().endsWith("px"),variant});let resolvedVariant=state.variant??variant;return useRunCallbackOnValueChange(isVisible,onVisibleChange),useRunCallbackOnValueChange(resolvedVariant,onVariantChange),isMobile?React.createElement(RightPanelSheet,{isVisible:isVisible,hide:()=>dispatch({type:"setVisible",slot:Slot.rightPanel,visible:!1}),"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)};

package/build/esm/components/Layout/RightPanel/RightPanelDocked.d.ts

@@ -3,7 +3,7 @@ import type { ForwardedScrollProps, RightPanelVariant } from "../-types";
 export type RightPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
     isVisible: boolean;
-    /** Docked column vs. floating window, without page insets or the left border. */
+    /** Docked column vs. floating window, without page insets. */
     variant: RightPanelVariant;
     "aria-label": string;
 };

package/build/esm/components/Layout/RightPanel/RightPanelDocked.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{RIGHT_PANEL_BOTTOM_BAR_INSET,Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useLayoutPortal}from"../registry";import{PanelContainer}from"../PanelContainer";let StyledRightPanelSlot=styled("div",{target:"e1qlsvva0",label:"StyledRightPanelSlot"})(({theme,isFloating})=>({position:"absolute",left:0,right:0,bottom:isFloating?0:RIGHT_PANEL_BOTTOM_BAR_INSET,top:isFloating?0:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:isFloating?"none":`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}));export const RightPanelDocked=({children,isVisible,variant,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>useLayoutPortal(Slot.rightPanel,isVisible?React.createElement(StyledRightPanelSlot,{isFloating:"float"===variant},React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,showBorderLeft:"float"!==variant},children)):null);
+import React from"react";import styled from"@emotion/styled";import{RIGHT_PANEL_BOTTOM_BAR_INSET,Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useLayoutPortal}from"../registry";import{PanelContainer}from"../PanelContainer";let StyledRightPanelSlot=styled("div",{target:"ejaw8en0",label:"StyledRightPanelSlot"})(({theme,isFloating})=>({position:"absolute",left:0,right:0,bottom:isFloating?0:RIGHT_PANEL_BOTTOM_BAR_INSET,top:isFloating?0:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:isFloating?"none":`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}));export const RightPanelDocked=({children,isVisible,variant,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>useLayoutPortal(Slot.rightPanel,isVisible?React.createElement(StyledRightPanelSlot,{isFloating:"float"===variant},React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)):null);

package/build/esm/components/Layout/Split/LayoutSplitColumns.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { PanelDeclarations } from "../registry";
+import type { SplitState } from "../-types";
+type LayoutSplitColumnsProps = {
+    /** Whether the desktop split shares the content area. */
+    isSplitOpen: boolean;
+    /** Public marker declarations supply initial sizes and minima. */
+    declared: PanelDeclarations;
+    /** Requested width is kept independently from temporarily constrained geometry. */
+    splitState: SplitState;
+    /** Stable portal carriers preserve state and focus when widths change. */
+    contentHostRef: (element: HTMLElement | null) => void;
+    splitHostRef: (element: HTMLElement | null) => void;
+    "data-e2e-test-id"?: string;
+};
+/** Shared desktop geometry. The outer panel row still owns neighboring panels. */
+export declare function LayoutSplitColumns({ isSplitOpen, declared, splitState, contentHostRef, splitHostRef, "data-e2e-test-id": dataE2eTestId, }: LayoutSplitColumnsProps): React.ReactElement;
+export {};

package/build/esm/components/Layout/Split/LayoutSplitColumns.js

@@ -0,0 +1 @@
+import React,{useEffect,useId,useLayoutEffect,useRef,useState}from"react";import{Global}from"@emotion/react";import styled from"@emotion/styled";import{useMove}from"@react-aria/interactions";import{useWindow}from"../../../shared/useWindow";import{PAGE_BOTTOM_BAR_INSET}from"../-constants";import{useLayoutStore}from"../context";let RESIZING_CURSOR_STYLES={"*, *::before, *::after":{cursor:"col-resize !important"}},StyledColumns=styled("div",{target:"e1brkhop0",label:"StyledColumns"})(({theme,isSplitOpen})=>({position:"relative",display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",overflow:isSplitOpen?"hidden":void 0,...isSplitOpen&&{gap:theme.variables.size.spacing.xxs,maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto"}})),StyledContentHost=styled("div",{target:"e1brkhop1",label:"StyledContentHost"})(({columnWidth,overlapOffset})=>({position:"relative",height:"100%",width:columnWidth??"100%",minWidth:0,flexShrink:0,marginInlineEnd:overlapOffset})),StyledSplitHost=styled("div",{target:"e1brkhop2",label:"StyledSplitHost"})(({columnWidth,isOverlapping})=>({position:isOverlapping?"absolute":"relative",...isOverlapping&&{right:0,top:0},height:"100%",width:columnWidth,maxWidth:"100%",flexShrink:0})),StyledSeparator=styled("div",{target:"e1brkhop3",label:"StyledSeparator"})(({theme,position,isOverlapping,canResize})=>({position:"absolute",top:0,bottom:0,left:position,width:theme.variables.size.spacing.xxs,"&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:isOverlapping?1:"100%",backgroundColor:theme.values.color.divider.primary,pointerEvents:"none"},cursor:canResize?"col-resize":"default",touchAction:"none",userSelect:"none","&:focus":{outline:"none","&::after":{left:"50%",right:"auto",width:0,outlineWidth:1,outlineStyle:"solid",outlineColor:"Highlight",outlineOffset:0,"@media (-webkit-min-device-pixel-ratio:0)":{outlineColor:"-webkit-focus-ring-color"}}}})),resolveSplitSize=size=>{if(void 0===size)return{fraction:.5,pixels:0};if("number"==typeof size)return{fraction:0,pixels:Number.isFinite(size)?size:0};let parsed=Number.parseFloat(size);return Number.isFinite(parsed)?size.endsWith("px")?{fraction:0,pixels:parsed}:{fraction:parsed/100,pixels:0}:{fraction:.5,pixels:0}};export function LayoutSplitColumns({isSplitOpen,declared,splitState,contentHostRef,splitHostRef,"data-e2e-test-id":dataE2eTestId}){let{dispatch}=useLayoutStore(),currentWindow=useWindow(),splitId=useId(),columnRef=useRef(null),separatorRef=useRef(null),[dimensions,setDimensions]=useState({width:0,gap:0}),[resizeReference,setResizeReference]=useState(null),{width:available,gap}=dimensions;useLayoutEffect(()=>{let column=columnRef.current;if(!column||!currentWindow)return;let measureColumns=()=>{let{width}=column.getBoundingClientRect(),separator=separatorRef.current,measuredGap=separator?.getBoundingClientRect().width??0;setDimensions(previous=>previous.width===width&&previous.gap===measuredGap?previous:{width,gap:measuredGap})};if(measureColumns(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(measureColumns);return observer.observe(column),separatorRef.current&&observer.observe(separatorRef.current),()=>observer.disconnect()},[currentWindow,isSplitOpen]);let contentMinimumSize=resolveSplitSize(declared.content?.minSize??0),splitMinimumSize=Math.max(0,Number(declared.splitview?.minSize??0)),contentMinimum=Math.min(available,Math.max(0,available*contentMinimumSize.fraction+contentMinimumSize.pixels)),splitMinimum=Math.min(available,splitMinimumSize),allowsOverlap="overlap"===splitState.resizeBehavior,maximumSize=resolveSplitSize(declared.splitview?.maxSize??"90%"),splitMaximum=Math.max(0,Math.min(available,available*maximumSize.fraction+maximumSize.pixels)),maximum=allowsOverlap?splitMaximum:Math.min(splitMaximum,Math.max(0,available-contentMinimum-gap)),minimum=Math.min(splitMinimum,maximum),initialSize=resolveSplitSize(splitState.size??declared.splitview?.defaultSize),{fraction,pixels}=resizeReference&&splitState.size===resizeReference.size?{fraction:.5,pixels:resizeReference.size-resizeReference.available/2}:{fraction:initialSize.fraction,pixels:initialSize.pixels-gap*initialSize.fraction},splitWidth=Math.min(maximum,Math.max(minimum,available*fraction+pixels)),remaining=Math.max(0,available-splitWidth-gap),contentMinimumWidth=`max(0px, calc(${100*contentMinimumSize.fraction}% + ${contentMinimumSize.pixels}px))`,splitMaximumWidth=`max(0px, min(100%, calc(${100*maximumSize.fraction}% + ${maximumSize.pixels}px)))`,maximumWidth=allowsOverlap?splitMaximumWidth:`min(${splitMaximumWidth}, max(0px, calc(100% - ${contentMinimumWidth} - ${gap}px)))`,splitColumnWidth=`min(${maximumWidth}, max(${splitMinimumSize}px, calc(${100*fraction}% + ${pixels}px)))`,remainingWidth=`max(0px, calc(100% - ${splitColumnWidth} - ${gap}px))`,contentWidth=allowsOverlap?`min(100%, max(${contentMinimumWidth}, ${remainingWidth}))`:remainingWidth,isOverlapping=isSplitOpen&&allowsOverlap&&remaining<contentMinimum,canResize=declared.splitview?.resizable??splitState.resizable??!1,dragWidth=useRef(splitWidth),[isPointerResizing,setIsPointerResizing]=useState(!1);useEffect(()=>{if(isSplitOpen&&canResize||setIsPointerResizing(!1),!isPointerResizing||!currentWindow)return;let stopResizeCursor=()=>setIsPointerResizing(!1);return currentWindow.addEventListener("blur",stopResizeCursor),()=>currentWindow.removeEventListener("blur",stopResizeCursor)},[isPointerResizing,isSplitOpen,canResize,currentWindow]),useLayoutEffect(()=>{dispatch({type:"setSplitOverlap",overlapping:isOverlapping})},[dispatch,isOverlapping,splitState.isOverlapping]);let resizeSplit=width=>{let nextWidth=Math.min(maximum,Math.max(minimum,width));setResizeReference({size:nextWidth,available}),dispatch({type:"resize",slot:"splitview",size:nextWidth})},{moveProps}=useMove({onMoveStart:()=>{dragWidth.current=splitWidth,separatorRef.current?.focus(),setIsPointerResizing(!0)},onMove:event=>{dragWidth.current-=event.deltaX,resizeSplit(dragWidth.current)},onMoveEnd:()=>setIsPointerResizing(!1)});return React.createElement(StyledColumns,{ref:columnRef,isSplitOpen:isSplitOpen,"data-e2e-test-id":dataE2eTestId},isPointerResizing&&isSplitOpen&&canResize&&React.createElement(Global,{styles:[RESIZING_CURSOR_STYLES]}),React.createElement(StyledContentHost,{ref:contentHostRef,columnWidth:isSplitOpen?contentWidth:void 0,overlapOffset:isSplitOpen?`min(0px, calc(${remainingWidth} - ${contentWidth}))`:void 0}),isSplitOpen&&React.createElement(React.Fragment,null,React.createElement(StyledSplitHost,{ref:splitHostRef,id:splitId,columnWidth:splitColumnWidth,isOverlapping:isOverlapping}),React.createElement(StyledSeparator,{...canResize?moveProps:{},ref:separatorRef,position:remainingWidth,isOverlapping:isOverlapping,canResize:canResize,role:"separator","aria-orientation":"vertical","aria-controls":splitId,"aria-label":declared.splitview?.resizeHandleLabel,"aria-valuemin":minimum,"aria-valuemax":maximum,"aria-valuenow":splitWidth,"aria-disabled":!canResize||minimum===maximum,tabIndex:-1,onKeyDown:void 0})))}

package/build/esm/components/Layout/Split/MobileSplitView/StyledMobileSplitSlideLayer.d.ts

@@ -18,5 +18,5 @@ export declare const StyledMobileSplitSlideLayer: import("@emotion/styled").Styl
 } & {
     offset: MobileSplitViewOffset;
     layer: MobileSplitLayer;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/build/esm/components/Layout/Split/MobileSplitView/useMobileSplitStack.d.ts

@@ -16,5 +16,5 @@ export type MobileSplitStackValue = {
  * front isn't stored here - it derives from the `splitview` slot's visibility
  * (see {@link useMobileSplitView}).
  */
-export declare const MobileSplitStackContext: import("react").Context<MobileSplitStackValue | null>;
+export declare const MobileSplitStackContext: React.Context<MobileSplitStackValue | null>;
 export declare const useMobileSplitStack: () => MobileSplitStackValue;

package/build/esm/components/Layout/Split/Split.d.ts

@@ -2,8 +2,7 @@ import React from "react";
 import type { SplitProps } from "../-types";
 /**
  * Split view panel. Picks its presentation by breakpoint: an in-flow column
- * beside `Layout.Content` on desktop ({@link SplitDocked}, always half its
- * width) or a full-area {@link MobileSplitView} on mobile - both driven by the
+ * beside `Layout.Content` on desktop ({@link SplitDocked}) or a full-area {@link MobileSplitView} on mobile - both driven by the
  * same `splitview` slot visibility, so open/close behaves identically either way.
  */
 export declare const Split: React.FC<SplitProps>;

package/build/esm/components/Layout/Split/Split.js

@@ -1 +1 @@
-import React from"react";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{MobileSplitView}from"./MobileSplitView/MobileSplitView";import{SplitDocked}from"./SplitDocked";export const Split=({children,background="primary","aria-label":ariaLabel,onVisibleChange,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isMobile}=useBreakpoints(),{isVisible}=useLayout()[Slot.splitview];return useVisibleChange(isVisible,onVisibleChange),isMobile?React.createElement(MobileSplitView,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):React.createElement(SplitDocked,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)};
+import React from"react";import{useBreakpoints}from"../../../shared/useBreakpoints";import{useVisibleChange}from"../registry";import{useLayoutSelector}from"../context";import{MobileSplitView}from"./MobileSplitView/MobileSplitView";import{SplitDocked}from"./SplitDocked";export const Split=({children,defaultSize,minWidth,maxWidth,resizable,slotProps,background="primary","aria-label":ariaLabel,onVisibleChange,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isMobile}=useBreakpoints();return useVisibleChange(useLayoutSelector(state=>state.splitview.visible),onVisibleChange),isMobile?React.createElement(MobileSplitView,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):React.createElement(SplitDocked,{defaultSize:defaultSize,minWidth:minWidth,maxWidth:maxWidth,resizable:resizable,slotProps:slotProps,background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)};

package/build/esm/components/Layout/Split/SplitDocked.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import type { SplitProps } from "../-types";
 /**
  * Desktop split view. Declares the `splitview` slot and portals its content
- * while visible - the right-hand half of `Layout.Content`'s column. Content
+ * while visible inside the shared Content/Split area. Content
  * tracks the `--ds-layout-subnav-offset` var, so an expanded subnav never
  * covers the panel's top edge. `Layout.SplitHeader` / `Layout.SplitFooter`
  * children stick to the panel edges; the remaining content scrolls.

package/build/esm/components/Layout/Split/SplitDocked.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";let StyledSplitSlot=styled("div",{target:"e1ldbp5v0",label:"StyledSplitSlot"})(({theme})=>({position:"absolute",right:0,left:0,bottom:0,top:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}));export const SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(StyledSplitSlot,null,React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)):null)};
+import React from"react";import styled from"@emotion/styled";import{Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayoutSelector}from"../context";import{PanelContainer}from"../PanelContainer";let StyledSplitSlot=styled("div",{target:"e16xyoeh0",label:"StyledSplitSlot"})(({theme})=>({position:"absolute",right:0,left:0,bottom:0,top:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}));export const SplitDocked=({children,defaultSize,minWidth,maxWidth,resizable,slotProps,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let isVisible=useLayoutSelector(state=>state.splitview.visible);return useDeclarePanel(Slot.splitview,{defaultSize,minSize:minWidth,maxSize:maxWidth,resizable,resizeHandleLabel:slotProps?.resizeHandle?.["aria-label"]??ariaLabel}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(StyledSplitSlot,null,React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)):null)};

package/build/esm/components/Layout/Split/SplitHeader.js

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{PanelHeaderCloseButton}from"../../Internal/PanelHeader/PanelHeaderCloseButton";export function SplitHeader({leftSlot,rightSlot,title,slotProps,showSeparator,"data-e2e-test-id":dataE2eTestId}){let{hide}=useLayout()[Slot.splitview],closeButtonSlotProps=slotProps?.closeButton;return React.createElement(Sandwich.Header,{showSeparator:showSeparator,"data-e2e-test-id":dataE2eTestId},React.createElement(PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:React.createElement(React.Fragment,null,rightSlot,closeButtonSlotProps&&React.createElement(PanelHeaderCloseButton,{"aria-label":closeButtonSlotProps["aria-label"],onClick:hide}))}))}
+import React from"react";import{Slot}from"../-constants";import{useLayoutStore}from"../context";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{PanelHeaderCloseButton}from"../../Internal/PanelHeader/PanelHeaderCloseButton";export function SplitHeader({leftSlot,rightSlot,title,slotProps,showSeparator,"data-e2e-test-id":dataE2eTestId}){let{dispatch}=useLayoutStore(),closeButtonSlotProps=slotProps?.closeButton,headerRightSlot=React.createElement(React.Fragment,null,rightSlot,closeButtonSlotProps&&React.createElement(PanelHeaderCloseButton,{"aria-label":closeButtonSlotProps["aria-label"],onClick:()=>dispatch({type:"setVisible",slot:Slot.splitview,visible:!1})}));return React.createElement(Sandwich.Header,{showSeparator:showSeparator,"data-e2e-test-id":dataE2eTestId},React.createElement(PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:headerRightSlot}))}

package/build/esm/components/Layout/context.d.ts

@@ -1,5 +1,5 @@
 import type { LayoutState, LayoutStorage, LayoutStore } from "./-types";
-export declare const LayoutStoreProvider: import("react").Provider<LayoutStore | null>;
+export declare const LayoutStoreProvider: React.Provider<LayoutStore | null>;
 /** Get the store from context, or throw if used outside the provider. */
 export declare function useLayoutStore(): LayoutStore;
 /**
@@ -11,7 +11,7 @@ export type LayoutPersistence = {
     persistenceKey?: string;
     storage?: LayoutStorage;
 };
-export declare const LayoutPersistenceProvider: import("react").Provider<LayoutPersistence>;
+export declare const LayoutPersistenceProvider: React.Provider<LayoutPersistence>;
 /** Persistence config from the nearest `Layout.Provider` (empty if none). */
 export declare function useLayoutPersistence(): LayoutPersistence;
 /**

package/build/esm/components/Layout/reducer.js

@@ -1 +1 @@
-function sidePanelFields(config={}){return{kind:"sidePanel",visible:config.defaultVisible??!0,collapsible:config.collapsible??!0,resizable:config.resizable??!0,size:config.defaultSize}}function panelState(config={}){return{kind:"panel",visible:config.defaultVisible??!0,size:config.defaultSize}}export function createInitialState(config={}){return{leftPanel:{...sidePanelFields({...config.leftPanel,resizable:!1}),variant:config.leftPanel?.variant},rightPanel:{...sidePanelFields({defaultVisible:!1,...config.rightPanel}),variant:config.rightPanel?.variant},content:panelState(config.content),splitview:panelState({defaultVisible:!1,...config.splitview})}}export const layoutReducer=(state,action,initial)=>{switch(action.type){case"setVisible":{let slot=state[action.slot];if(slot.visible===action.visible)return state;return{...state,[action.slot]:{...slot,visible:action.visible}}}case"setVariant":{let panel=state[action.panel];if(panel.variant===action.variant)return state;return{...state,[action.panel]:{...panel,variant:action.variant}}}case"resize":{let slot=state[action.slot];if(slot.size===action.size)return state;return{...state,[action.slot]:{...slot,size:action.size}}}case"reset":if(!initial)return state;if(!action.slot)return initial;if(state[action.slot]===initial[action.slot])return state;return{...state,[action.slot]:initial[action.slot]};default:return state}};
+function sidePanelFields(config={}){return{kind:"sidePanel",visible:config.defaultVisible??!0,collapsible:config.collapsible??!0,resizable:config.resizable??!0,size:config.defaultSize}}function panelState(config={}){return{kind:"panel",visible:config.defaultVisible??!0,size:config.defaultSize}}export function createInitialState(config={}){return{leftPanel:{...sidePanelFields({...config.leftPanel,resizable:!1}),variant:config.leftPanel?.variant},rightPanel:{...sidePanelFields({defaultVisible:!1,...config.rightPanel}),variant:config.rightPanel?.variant},content:panelState(config.content),splitview:{...panelState({defaultVisible:!1,...config.splitview}),resizable:config.splitview?.resizable??!1}}}export const layoutReducer=(state,action,initial)=>{switch(action.type){case"setVisible":{let slot=state[action.slot];if(slot.visible===action.visible)return state;return{...state,[action.slot]:{...slot,visible:action.visible}}}case"setVariant":{let panel=state[action.panel];if(panel.variant===action.variant)return state;return{...state,[action.panel]:{...panel,variant:action.variant}}}case"setSplitResizeBehavior":if((state.splitview.resizeBehavior??"clamp")===action.behavior)return state;return{...state,splitview:{...state.splitview,resizeBehavior:action.behavior}};case"setSplitOverlap":if(!!state.splitview.isOverlapping===action.overlapping)return state;return{...state,splitview:{...state.splitview,isOverlapping:action.overlapping}};case"resize":{let slot=state[action.slot];if(slot.size===action.size)return state;return{...state,[action.slot]:{...slot,size:action.size}}}case"reset":if(!initial)return state;if(!action.slot)return initial;if(state[action.slot]===initial[action.slot])return state;return{...state,[action.slot]:initial[action.slot]};default:return state}};

package/build/esm/components/Layout/registry.d.ts

@@ -5,7 +5,7 @@ export type PortalTargets = Partial<Record<SlotKey, HTMLElement | null>>;
 type LayoutPortalTargets = PortalTargets & {
     root?: HTMLElement | null;
 };
-export declare const LayoutPortalContext: import("react").Context<LayoutPortalTargets>;
+export declare const LayoutPortalContext: React.Context<LayoutPortalTargets>;
 /**
  * Portal `children` into the host DOM node registered for `slot`. Returns the
  * portal (or `null` if the host isn't mounted yet). Call unconditionally -
@@ -20,6 +20,8 @@ export declare function useLayoutPortal(slot: SlotKey | "root", children: ReactN
  */
 export type PanelReg = {
     defaultSize?: Size;
+    /** Accessible name for an independently resizable Split separator. */
+    resizeHandleLabel?: string;
     minSize?: Size;
     maxSize?: Size;
     collapsible?: boolean;
@@ -38,11 +40,11 @@ export type PanelRegistry = {
     register: (slot: SlotKey, reg: PanelReg) => void;
     unregister: (slot: SlotKey) => void;
 };
-export declare const PanelRegistryContext: import("react").Context<PanelRegistry | null>;
+export declare const PanelRegistryContext: React.Context<PanelRegistry | null>;
 /** Register this slot as a panel for the marker's lifetime. */
 export declare function useDeclarePanel(slot: SlotKey, reg: PanelReg): void;
 export type PanelDeclarations = Partial<Record<SlotKey, PanelReg>>;
-export declare const PanelDeclarationsContext: import("react").Context<Partial<Record<"content" | "leftPanel" | "rightPanel" | "splitview", PanelReg>>>;
+export declare const PanelDeclarationsContext: React.Context<Partial<Record<"content" | "leftPanel" | "rightPanel" | "splitview", PanelReg>>>;
 /**
  * The ids of the columns in the resizable row, in order, joined with commas.
  * Changes when a column joins or leaves the row, and only then. A column that
@@ -51,7 +53,7 @@ export declare const PanelDeclarationsContext: import("react").Context<Partial<R
  * had the last time the same set of columns was on screen - re-checks its rest
  * against it.
  */
-export declare const PanelRowContext: import("react").Context<string>;
+export declare const PanelRowContext: React.Context<string>;
 /** The row's current column set, as a stable key. Empty outside a Layout. */
 export declare const usePanelRow: () => string;
 /**
@@ -63,7 +65,7 @@ export declare const usePanelRow: () => string;
 export type PanelPresence = {
     setPresent: (slot: SlotKey, isPresent: boolean) => void;
 };
-export declare const PanelPresenceContext: import("react").Context<PanelPresence | null>;
+export declare const PanelPresenceContext: React.Context<PanelPresence | null>;
 /** Report this slot's live presence so the Layout keeps its column mounted
  *  through the exit animation. No-op outside a Layout. */
 export declare function usePanelPresence(slot: SlotKey, isPresent: boolean): void;
@@ -85,7 +87,7 @@ export type PanelAnimationControl = {
     /** Mute the Group's resize/collapse/persist callbacks for a slot mid-slide. */
     setResizeSuppressed: (slot: SlotKey, suppressed: boolean) => void;
 };
-export declare const PanelAnimationContext: import("react").Context<PanelAnimationControl | null>;
+export declare const PanelAnimationContext: React.Context<PanelAnimationControl | null>;
 /** Access the Layout's panel-animation control. Null outside a Layout. */
 export declare function usePanelAnimationControl(): PanelAnimationControl | null;
 /** Run `onChange(value)` when `value` transitions (not on initial mount). */

package/build/esm/components/Layout/registry.js

@@ -1 +1 @@
-import{createContext,useContext,useEffect,useLayoutEffect,useRef}from"react";import{createPortal}from"react-dom";export const LayoutPortalContext=createContext({});export function useLayoutPortal(slot,children){let slotNode=useContext(LayoutPortalContext)[slot]??null;return slotNode?createPortal(children,slotNode):null}export const PanelRegistryContext=createContext(null);export function useDeclarePanel(slot,reg){let registry=useContext(PanelRegistryContext),{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;useLayoutEffect(()=>{if(registry)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant])}export const PanelDeclarationsContext=createContext({});export const PanelRowContext=createContext("");export const usePanelRow=()=>useContext(PanelRowContext);export const PanelPresenceContext=createContext(null);export function usePanelPresence(slot,isPresent){let presence=useContext(PanelPresenceContext);useLayoutEffect(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}export const PanelAnimationContext=createContext(null);export function usePanelAnimationControl(){return useContext(PanelAnimationContext)}export function useRunCallbackOnValueChange(value,onChange){let prev=useRef(value);useEffect(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}export function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}
+import{createContext,useContext,useEffect,useLayoutEffect,useRef}from"react";import{createPortal}from"react-dom";export const LayoutPortalContext=createContext({});export function useLayoutPortal(slot,children){let slotNode=useContext(LayoutPortalContext)[slot]??null;return slotNode?createPortal(children,slotNode):null}export const PanelRegistryContext=createContext(null);export function useDeclarePanel(slot,reg){let registry=useContext(PanelRegistryContext),{defaultSize,resizeHandleLabel,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;useLayoutEffect(()=>{if(registry)return registry.register(slot,{defaultSize,resizeHandleLabel,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,slot,defaultSize,resizeHandleLabel,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant])}export const PanelDeclarationsContext=createContext({});export const PanelRowContext=createContext("");export const usePanelRow=()=>useContext(PanelRowContext);export const PanelPresenceContext=createContext(null);export function usePanelPresence(slot,isPresent){let presence=useContext(PanelPresenceContext);useLayoutEffect(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}export const PanelAnimationContext=createContext(null);export function usePanelAnimationControl(){return useContext(PanelAnimationContext)}export function useRunCallbackOnValueChange(value,onChange){let prev=useRef(value);useEffect(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}export function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}

package/build/esm/components/Layout/useLayout.js

@@ -1 +1 @@
-import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{usePanelAnimations}from"./usePanelAnimations";import{useBreakpoints}from"../../shared/useBreakpoints";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{PanelDeclarationsContext}from"./registry";import{DEFAULT_LEFT_PANEL_VARIANT}from"./-constants";let selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),reset:()=>dispatch({type:"reset",slot})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(PanelDeclarationsContext),{dispatch}=store,{isMobile}=useBreakpoints(),animations=usePanelAnimations(),mobileStack=useContext(MobileSplitStackContext),presentationFor=slot=>state[slot].visible&&("splitview"===slot&&isMobile?mobileStack?.isSplitPresent:declared[slot])?"content"===slot?isMobile&&mobileStack?.isSplitPresent&&state.splitview.visible?"hidden":"column":"splitview"===slot?"column":"leftPanel"===slot?(state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT)==="sidebar"?"column":"overlay":isMobile||(state.rightPanel.variant??declared.rightPanel?.variant)==="float"?"overlay":"column":"hidden";return{state,leftPanel:{presentation:presentationFor("leftPanel"),animation:animations.leftPanel??null,state:{...state.leftPanel,variant:state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{presentation:presentationFor("rightPanel"),animation:animations.rightPanel??null,state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{presentation:presentationFor("content"),animation:animations.content??null,state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{presentation:presentationFor("splitview"),animation:animations.splitview??null,state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}
+import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{usePanelAnimations}from"./usePanelAnimations";import{useBreakpoints}from"../../shared/useBreakpoints";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{PanelDeclarationsContext}from"./registry";import{DEFAULT_LEFT_PANEL_VARIANT}from"./-constants";let selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),reset:()=>dispatch({type:"reset",slot})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(PanelDeclarationsContext),{dispatch}=store,{isMobile}=useBreakpoints(),animations=usePanelAnimations(),mobileStack=useContext(MobileSplitStackContext),presentationFor=slot=>state[slot].visible&&("splitview"===slot&&isMobile?mobileStack?.isSplitPresent:declared[slot])?"content"===slot?isMobile&&mobileStack?.isSplitPresent&&state.splitview.visible?"hidden":"column":"splitview"===slot?!isMobile&&state.splitview.isOverlapping?"overlay":"column":"leftPanel"===slot?(state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT)==="sidebar"?"column":"overlay":isMobile||(state.rightPanel.variant??declared.rightPanel?.variant)==="float"?"overlay":"column":"hidden";return{state,leftPanel:{presentation:presentationFor("leftPanel"),animation:animations.leftPanel??null,state:{...state.leftPanel,variant:state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{presentation:presentationFor("rightPanel"),animation:animations.rightPanel??null,state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{presentation:presentationFor("content"),animation:animations.content??null,state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{presentation:presentationFor("splitview"),animation:animations.splitview??null,state:state.splitview,setResizeBehavior:behavior=>dispatch({type:"setSplitResizeBehavior",behavior}),...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}

package/build/esm/components/Layout/useLayoutRules.js

@@ -1 +1 @@
-import{useEffect,useRef}from"react";import{useBreakpoints}from"../../shared/useBreakpoints";import{DEFAULT_LEFT_PANEL_VARIANT,PANEL_ORDER,Slot,TOGGLABLE_SLOTS}from"./-constants";let DEFAULT_PRIORITY={[Slot.rightPanel]:1,[Slot.splitview]:2,[Slot.leftPanel]:3},maxDockedFor=(maxDockedPanels,breakpoints)=>{let{xs,m=xs,l=m}=maxDockedPanels;return breakpoints.isMobile?xs:breakpoints.isTablet?m:l},isDockedPanel=({state,declared,slot})=>!!declared[slot]&&!!state[slot].visible&&(slot===Slot.rightPanel?"float"!==state.rightPanel.variant:slot!==Slot.leftPanel||(state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT)===DEFAULT_LEFT_PANEL_VARIANT),resolveLowPrioSlots=({rules,state,declared,breakpoints})=>{let freeSlots=Math.max(0,maxDockedFor(rules.maxDockedPanels,breakpoints)-1),priorityFor=slot=>rules[slot]?.priority??DEFAULT_PRIORITY[slot],outranks=(slot,other)=>{let byPriority=priorityFor(slot)-priorityFor(other);return 0!==byPriority?byPriority<0:PANEL_ORDER.indexOf(slot)<PANEL_ORDER.indexOf(other)},countStrongerDocked=slot=>TOGGLABLE_SLOTS.filter(other=>other!==slot&&isDockedPanel({state,declared,slot:other})&&outranks(other,slot)).length;return TOGGLABLE_SLOTS.filter(slot=>countStrongerDocked(slot)>=freeSlots)};export function useLayoutRules({layout,declared,rules,additionalData}){let layoutRef=useRef(layout);layoutRef.current=layout;let{isMobile,isTablet,isDesktop}=useBreakpoints(),{state}=layout;useEffect(()=>{if(!rules)return;let lowPrioSlots=resolveLowPrioSlots({rules,state,declared,breakpoints:{isMobile,isTablet,isDesktop}});TOGGLABLE_SLOTS.forEach(slot=>{let condition=rules[slot]?.condition;condition&&condition({...additionalData,isLowPrio:lowPrioSlots.includes(slot),isMobile,isTablet,isDesktop,layout:layoutRef.current})})},[rules,additionalData,state,declared,isMobile,isTablet,isDesktop])}
+import{useEffect,useRef}from"react";import{useBreakpoints}from"../../shared/useBreakpoints";import{DEFAULT_LEFT_PANEL_VARIANT,PANEL_ORDER,Slot,TOGGLABLE_SLOTS}from"./-constants";let DEFAULT_PRIORITY={[Slot.rightPanel]:1,[Slot.splitview]:2,[Slot.leftPanel]:3},maxDockedFor=(maxDockedPanels,breakpoints)=>{let{xs,m=xs,l=m}=maxDockedPanels;return breakpoints.isMobile?xs:breakpoints.isTablet?m:l},isDockedPanel=({state,declared,slot})=>!!declared[slot]&&!!state[slot].visible&&(slot===Slot.rightPanel?"float"!==state.rightPanel.variant:slot===Slot.leftPanel?(state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT)===DEFAULT_LEFT_PANEL_VARIANT:!state.splitview.isOverlapping),resolveLowPrioSlots=({rules,state,declared,breakpoints})=>{let freeSlots=Math.max(0,maxDockedFor(rules.maxDockedPanels,breakpoints)-1),priorityFor=slot=>rules[slot]?.priority??DEFAULT_PRIORITY[slot],outranks=(slot,other)=>{let byPriority=priorityFor(slot)-priorityFor(other);return 0!==byPriority?byPriority<0:PANEL_ORDER.indexOf(slot)<PANEL_ORDER.indexOf(other)},countStrongerDocked=slot=>TOGGLABLE_SLOTS.filter(other=>other!==slot&&isDockedPanel({state,declared,slot:other})&&outranks(other,slot)).length;return TOGGLABLE_SLOTS.filter(slot=>countStrongerDocked(slot)>=freeSlots)};export function useLayoutRules({layout,declared,rules,additionalData}){let layoutRef=useRef(layout);layoutRef.current=layout;let{isMobile,isTablet,isDesktop}=useBreakpoints(),{state}=layout;useEffect(()=>{if(!rules)return;let lowPrioSlots=resolveLowPrioSlots({rules,state,declared,breakpoints:{isMobile,isTablet,isDesktop}});TOGGLABLE_SLOTS.forEach(slot=>{let condition=rules[slot]?.condition;condition&&condition({...additionalData,isLowPrio:lowPrioSlots.includes(slot),isMobile,isTablet,isDesktop,layout:layoutRef.current})})},[rules,additionalData,state,declared,isMobile,isTablet,isDesktop])}

package/build/esm/components/Layout/useLeftPanelId.d.ts

@@ -2,5 +2,5 @@
  *  control living OUTSIDE the panel - the nav left bar's open button - point
  *  `aria-controls` at it without the two components knowing each other. Empty
  *  outside a `Layout`, where there is no panel to reference. */
-export declare const LeftPanelIdContext: import("react").Context<string>;
+export declare const LeftPanelIdContext: React.Context<string>;
 export declare const useLeftPanelId: () => string;

package/build/esm/components/Layout/usePanelAnimations.d.ts

@@ -5,7 +5,7 @@ type PanelAnimationsStore = {
     subscribe: (listener: () => void) => () => void;
     set: (slot: SlotKey, animation: PanelAnimation | null) => void;
 };
-export declare const PanelAnimationsProvider: import("react").Provider<PanelAnimationsStore | null>;
+export declare const PanelAnimationsProvider: React.Provider<PanelAnimationsStore | null>;
 export declare const usePanelAnimationsStore: () => PanelAnimationsStore | null;
 export declare const createPanelAnimationsStore: () => PanelAnimationsStore;
 export declare const usePanelAnimations: () => Animations;

package/build/esm/components/Layout/usePanelDockedSlide.js

@@ -1 +1 @@
-import{useLayoutEffect,useMemo,useRef,useState}from"react";import{flushSync}from"react-dom";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{parseDurationMs}from"../../shared/parseDurationMs";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence,usePanelRow}from"./registry";import{usePanelAnimationsStore}from"./usePanelAnimations";import{useLayout}from"./useLayout";let resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize,minSizeFor=({collapsedSize,isVisible,minSize,phase})=>void 0===collapsedSize?minSize:isVisible&&"idle"===phase?minSize??collapsedSize:collapsedSize;export const getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),rowKey=usePanelRow(),reducedMotion=prefersReducedMotion(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[fixedWidth,setFixedWidth]=useState(null),animations=usePanelAnimationsStore(),panelSlideAnimation=useMemo(()=>{let timing=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open;return{property:"flex-grow",duration:reducedMotion?0:parseDurationMs(timing.duration),easing:timing.timingFunction}},[theme,hasCollapsedRest,reducedMotion]);useLayoutEffect(()=>{animations?.set(slot,"idle"===phase||reducedMotion||!collapsible&&!hasCollapsedRest?null:panelSlideAnimation)},[animations,slot,phase,panelSlideAnimation,reducedMotion,collapsible,hasCollapsedRest]),useLayoutEffect(()=>()=>animations?.set(slot,null),[animations,slot]);let[prevVisible,setPrevVisible]=useState(isVisible),declaredMountSize=useRef(hasCollapsedRest&&!isVisible?collapsedSize:state.size??defaultSize),chosenOpenSize=useRef(state.size??defaultSize),needsRestCorrection=useRef(!1);isVisible!==prevVisible&&(chosenOpenSize.current=state.size??defaultSize,needsRestCorrection.current=!0,hasCollapsedRest&&setFixedWidth(resolveSizePx(state.size??defaultSize,null)),setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;useDeclarePanel(slot,{defaultSize:hasCollapsedRest?declaredMountSize.current:mountDefaultSizeFor({defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:minSizeFor({collapsedSize,isVisible,minSize,phase}),maxSize:getMaxSize({collapsedSize,isVisible,maxSize,openSize,phase}),collapsible:isCollapsible,resizable:(!hasCollapsedRest||!!isVisible&&"idle"===phase)&&resizable,lockWidthOnWindowResize}),usePanelPresence(slot,hasCollapsedRest||isMounted),useLayoutEffect(()=>{if(!hasCollapsedRest||"idle"!==phase||!needsRestCorrection.current)return;let restSize=isVisible?chosenOpenSize.current:collapsedSize,cancelled=!1;return animation?.setResizeSuppressed(slot,!0),Promise.resolve().then(()=>{if(cancelled)return;let handle=animation?.getHandle(slot);try{handle&&isHandleReady(handle)&&void 0!==restSize&&flushSync(()=>handle.resize(restSize))}finally{needsRestCorrection.current=!1,animation?.setResizeSuppressed(slot,!1)}}),()=>{cancelled=!0,animation?.setResizeSuppressed(slot,!1)}},[phase,hasCollapsedRest,isVisible,collapsedSize,animation,slot]);let latestRest=useRef({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},useLayoutEffect(()=>{if(!hasCollapsedRest)return;let frame=0,cancelled=!1,resizeToRest=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){let rest=latestRest.current;if("idle"!==rest.phase)return;let restSize=rest.isVisible?rest.openSize??minSize:collapsedSize;try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return Promise.resolve().then(()=>resizeToRest(0)),()=>{cancelled=!0,window.cancelAnimationFrame(frame)}},[rowKey]),useLayoutEffect(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let durationMs=panelSlideAnimation.duration,setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`${panelSlideAnimation.property} ${panelSlideAnimation.duration}ms ${panelSlideAnimation.easing}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setFixedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setFixedWidth("entering"===phase||hasCollapsedRest?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&hasCollapsedRest)return void Promise.resolve().then(()=>waitForColumn(attempt+1));let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;if(handle&&element&&isHandleReady(handle)){if(hasCollapsedRest){let startSize="entering"===phase?collapsedSize:chosenOpenSize.current;void 0!==startSize&&flushSync(()=>handle.resize(startSize))}runSlide(handle,element);return}if("exiting"===phase||!animation||attempt>=30)return void settle(handle);frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme,panelSlideAnimation]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}
+import{useLayoutEffect,useMemo,useRef,useState}from"react";import{flushSync}from"react-dom";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{parseDurationMs}from"../../shared/parseDurationMs";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence,usePanelRow}from"./registry";import{usePanelAnimationsStore}from"./usePanelAnimations";import{useLayoutSelector}from"./context";let resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize,minSizeFor=({collapsedSize,isVisible,minSize,phase})=>void 0===collapsedSize?minSize:isVisible&&"idle"===phase?minSize??collapsedSize:collapsedSize;export const getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let state=useLayoutSelector(layoutState=>layoutState[slot]),isVisible=state.visible,theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),rowKey=usePanelRow(),reducedMotion=prefersReducedMotion(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[fixedWidth,setFixedWidth]=useState(null),animations=usePanelAnimationsStore(),panelSlideAnimation=useMemo(()=>{let timing=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open;return{property:"flex-grow",duration:reducedMotion?0:parseDurationMs(timing.duration),easing:timing.timingFunction}},[theme,hasCollapsedRest,reducedMotion]);useLayoutEffect(()=>{animations?.set(slot,"idle"===phase||reducedMotion||!collapsible&&!hasCollapsedRest?null:panelSlideAnimation)},[animations,slot,phase,panelSlideAnimation,reducedMotion,collapsible,hasCollapsedRest]),useLayoutEffect(()=>()=>animations?.set(slot,null),[animations,slot]);let[prevVisible,setPrevVisible]=useState(isVisible),declaredMountSize=useRef(hasCollapsedRest&&!isVisible?collapsedSize:state.size??defaultSize),chosenOpenSize=useRef(state.size??defaultSize),needsRestCorrection=useRef(!1);isVisible!==prevVisible&&(chosenOpenSize.current=state.size??defaultSize,needsRestCorrection.current=!0,hasCollapsedRest&&setFixedWidth(resolveSizePx(state.size??defaultSize,null)),setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;useDeclarePanel(slot,{defaultSize:hasCollapsedRest?declaredMountSize.current:mountDefaultSizeFor({defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:minSizeFor({collapsedSize,isVisible,minSize,phase}),maxSize:getMaxSize({collapsedSize,isVisible,maxSize,openSize,phase}),collapsible:isCollapsible,resizable:(!hasCollapsedRest||!!isVisible&&"idle"===phase)&&resizable,lockWidthOnWindowResize}),usePanelPresence(slot,hasCollapsedRest||isMounted),useLayoutEffect(()=>{if(!hasCollapsedRest||"idle"!==phase||!needsRestCorrection.current)return;let restSize=isVisible?chosenOpenSize.current:collapsedSize,cancelled=!1;return animation?.setResizeSuppressed(slot,!0),Promise.resolve().then(()=>{if(cancelled)return;let handle=animation?.getHandle(slot);try{handle&&isHandleReady(handle)&&void 0!==restSize&&flushSync(()=>handle.resize(restSize))}finally{needsRestCorrection.current=!1,animation?.setResizeSuppressed(slot,!1)}}),()=>{cancelled=!0,animation?.setResizeSuppressed(slot,!1)}},[phase,hasCollapsedRest,isVisible,collapsedSize,animation,slot]);let latestRest=useRef({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},useLayoutEffect(()=>{if(!hasCollapsedRest)return;let frame=0,cancelled=!1,resizeToRest=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){let rest=latestRest.current;if("idle"!==rest.phase)return;let restSize=rest.isVisible?rest.openSize??minSize:collapsedSize;try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return Promise.resolve().then(()=>resizeToRest(0)),()=>{cancelled=!0,window.cancelAnimationFrame(frame)}},[rowKey]),useLayoutEffect(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let durationMs=panelSlideAnimation.duration,setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`${panelSlideAnimation.property} ${panelSlideAnimation.duration}ms ${panelSlideAnimation.easing}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setFixedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setFixedWidth("entering"===phase||hasCollapsedRest?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&hasCollapsedRest)return void Promise.resolve().then(()=>waitForColumn(attempt+1));let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;if(handle&&element&&isHandleReady(handle)){if(hasCollapsedRest){let startSize="entering"===phase?collapsedSize:chosenOpenSize.current;void 0!==startSize&&flushSync(()=>handle.resize(startSize))}runSlide(handle,element);return}if("exiting"===phase||!animation||attempt>=30)return void settle(handle);frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme,panelSlideAnimation]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}

package/build/esm/components/NavBar/NavBar.d.ts

@@ -1,11 +1,5 @@
 import React from "react";
-import { NavBarSubMenuContainer } from "./NavBarSubMenuContainer";
-import { NavBarDropdownTriggerButton } from "./NavBarDropdownTriggerButton";
-import { NavBarSearchInput } from "./NavBarSearchInput";
 import { NavBarOverlayBar } from "./NavBarOverlayBar";
-import { PrimaryNavContainer, PrimaryNav } from "./NavBarPrimaryNav";
-import { PrimaryNavLinkItem } from "./NavBarPrimaryNavLinkItem";
-import { SecondaryNav } from "./NavBarSecondaryNav";
 import { NavBarName } from "./types";
 type NavBarProps = React.PropsWithChildren<{
     subTheme: NavBarName;
@@ -13,13 +7,23 @@ type NavBarProps = React.PropsWithChildren<{
 }>;
 export declare function NavBar({ children, subTheme, isCompact, }: NavBarProps): React.ReactElement;
 export declare namespace NavBar {
-    export { PrimaryNavContainer };
-    export { PrimaryNav };
-    export { PrimaryNavLinkItem as PrimaryNavItem };
-    export { NavBarSubMenuContainer as SubMenuContainer };
-    export { NavBarOverlayBar as OverlayBar };
-    export { SecondaryNav };
-    export { NavBarDropdownTriggerButton as DropdownTriggerButton };
-    export { NavBarSearchInput as SearchInput };
+    var PrimaryNavContainer: typeof import("./NavBarPrimaryNav").PrimaryNavContainer;
+    var PrimaryNav: typeof import("./NavBarPrimaryNav").PrimaryNav;
+    var PrimaryNavItem: React.ForwardRefExoticComponent<{
+        label: string;
+        isActive?: boolean;
+        as?: React.ElementType;
+        to?: string;
+    } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & React.RefAttributes<HTMLAnchorElement>>;
+    var SubMenuContainer: React.ForwardRefExoticComponent<{
+        "data-e2e-test-id"?: string;
+        children: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>>;
+    var OverlayBar: typeof NavBarOverlayBar;
+    var SecondaryNav: typeof import("./NavBarSecondaryNav").SecondaryNav;
+    var DropdownTriggerButton: React.ForwardRefExoticComponent<Pick<import("../..").ButtonProps, "onFocus" | "onBlur" | "onClick" | "disabled"> & {
+        children?: React.ReactNode | undefined;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    var SearchInput: React.ForwardRefExoticComponent<import("./NavBarSearchInput").NavBarSearchInputProps & React.RefAttributes<HTMLButtonElement>>;
 }
 export {};

package/build/esm/components/NavBar/NavBarContext.d.ts

@@ -6,6 +6,6 @@ type NavBarContextValue = {
     primaryNavRef: RefObject<HTMLElement>;
     secondaryNavRef: RefObject<HTMLElement>;
 };
-export declare const NavBarContext: import("react").Context<NavBarContextValue>;
+export declare const NavBarContext: React.Context<NavBarContextValue>;
 export declare function useNavBarContext(): NavBarContextValue;
 export {};

package/build/esm/components/NavBar/NavBarDropdownTriggerButton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { ButtonProps } from "../Button/Button";
-export declare const NavBarDropdownTriggerButton: React.ForwardRefExoticComponent<Pick<ButtonProps, "disabled" | "onBlur" | "onClick" | "onFocus"> & {
+export declare const NavBarDropdownTriggerButton: React.ForwardRefExoticComponent<Pick<ButtonProps, "onFocus" | "onBlur" | "onClick" | "disabled"> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/build/esm/components/Patterns/Dialog/DialogContext.d.ts

@@ -1 +1 @@
-export declare const DialogContext: import("react").Context<boolean>;
+export declare const DialogContext: React.Context<boolean>;

package/build/esm/components/Patterns/EmptyState/EmptyState.d.ts

@@ -21,8 +21,8 @@ export type EmptyStateProps = {
 };
 export declare function EmptyState({ title, titleAs, description, variant, icon, children, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: EmptyStateProps): React.ReactElement;
 export declare namespace EmptyState {
-    export { EmptyStateButtonGroup as ButtonGroup };
-    export { EmptyStateLink as Link };
+    var ButtonGroup: typeof EmptyStateButtonGroup;
+    var Link: typeof EmptyStateLink;
 }
 declare function EmptyStateButtonGroup<C extends React.ElementType = "button">({ ...rest }: Omit<ButtonGroupProps<C>, "buttonSize">): React.ReactElement;
 type EmptyStateLinkProps<C extends React.ElementType> = Omit<PolymorphicComponentPropsWithRef<C, LinkProps>, "size" | "color" | "weight" | "ref"> & {

package/build/esm/components/Patterns/Modal/Modal.d.ts

@@ -102,11 +102,9 @@ type ImageProps = {
     ImageComponent: React.ElementType<any>;
 };
 export type ModalProps = BaseProps & ConditionalRoleProps & LabelProps & ImageProps & Pick<PortalProps, "portalContainer">;
-declare const ModalStack: ({ children, ...rest }: Omit<StackProps, "space">) => React.JSX.Element;
-declare const ModalText: ({ children, ...rest }: Omit<TextProps, "size" | "variant">) => React.JSX.Element;
 export declare function Modal({ header, subHeader, labelHeader, children, imageUrl, ImageComponent, secondaryButton, cancelButtonLabel, isDismissible, isFullScreen, isMaxWidthLimit, actionButton, role, onAction, size, privateProps: { skipPortal, height, zeroPadding, tabbableOptions }, portalContainer, closeButtonAriaLabel, "data-e2e-test-id": dataE2eTestId, imageAlt, initialFocus, ...ariaAttributes }: ModalProps): React.ReactElement;
 export declare namespace Modal {
-    export { ModalStack as Stack };
-    export { ModalText as Text };
+    var Stack: ({ children, ...rest }: Omit<StackProps, "space">) => React.JSX.Element;
+    var Text: ({ children, ...rest }: Omit<TextProps, "size" | "variant">) => React.JSX.Element;
 }
 export {};

package/build/esm/components/Patterns/Popover/PopoverContext.d.ts

@@ -6,4 +6,4 @@ export type PopoverContextValue = {
      */
     portalContainer?: HTMLElement | null;
 };
-export declare const PopoverContext: import("react").Context<PopoverContextValue>;
+export declare const PopoverContext: React.Context<PopoverContextValue>;

package/build/esm/components/PromptInput/PromptInput.d.ts

@@ -70,5 +70,5 @@ export declare const PromptInput: React.ForwardRefExoticComponent<{
     onEnterKey: () => void;
     /** Renders an icon to the left inside the textarea */
     leftIcon?: IconName;
-} & Omit<PromptTextAreaProps, "hasAutocomplete" | "hasLeftIcon" | "isAutocompleteListOpen" | "selectedListItem" | "size"> & Pick<AutocompleteListProps, "autocompleteListFooter" | "autocompleteListItems" | "portalContainer"> & React.RefAttributes<HTMLTextAreaElement>>;
+} & Omit<PromptTextAreaProps, "size" | "selectedListItem" | "isAutocompleteListOpen" | "hasAutocomplete" | "hasLeftIcon"> & Pick<AutocompleteListProps, "portalContainer" | "autocompleteListItems" | "autocompleteListFooter"> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/build/esm/components/RadioCard/RadioCard.d.ts

@@ -13,4 +13,4 @@ export declare const RadioCard: React.ForwardRefExoticComponent<{
     renderContent?: (params: {
         isSelected: boolean;
     }) => React.ReactNode;
-} & Omit<RadioProps, "errorMessages" | "hideLabel" | "hint"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<RadioProps, "errorMessages" | "hint" | "hideLabel"> & React.RefAttributes<HTMLInputElement>>;

package/build/esm/components/SearchResult/SearchResult.d.ts

@@ -33,9 +33,7 @@ export type SearchResultProps = {
     /** The test id for the result's primary target. */
     "data-e2e-test-id"?: string;
 };
-declare const defaultProps: Partial<SearchResultProps>;
 export declare function SearchResult({ title, subtitle, icon, details, body, secondaryTargets, link, labels, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: SearchResultProps): React.ReactElement;
 export declare namespace SearchResult {
-    export { defaultProps };
+    var defaultProps: Partial<SearchResultProps>;
 }
-export {};

package/build/esm/components/SubThemeProvider/SubThemeContext.d.ts

@@ -1 +1 @@
-export declare const SubThemeContext: import("react").Context<import("./SubThemeProvider").SubThemeName | null | undefined>;
+export declare const SubThemeContext: React.Context<import("./SubThemeProvider").SubThemeName | null | undefined>;

package/build/esm/components/Tooltip/FloatingPositionedContext.d.ts

@@ -5,4 +5,4 @@
  * trap scans for focusable elements only once, on activation, and elements
  * under a `visibility: hidden` ancestor never count as focusable.
  */
-export declare const FloatingPositionedContext: import("react").Context<boolean>;
+export declare const FloatingPositionedContext: React.Context<boolean>;

package/build/esm/components/Utilities/ContainerQuery/ContainerQueryContext.d.ts

@@ -1,2 +1,2 @@
 import type { ContainerQueryBreakpoints } from "../../../shared/mediaQueries";
-export declare const ContainerQueryContext: import("react").Context<ContainerQueryBreakpoints | undefined>;
+export declare const ContainerQueryContext: React.Context<ContainerQueryBreakpoints | undefined>;

package/build/esm/components/Utilities/ScreenReaderText/ScreenReaderText.d.ts

@@ -1,4 +1,4 @@
 export declare const ScreenReaderText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/esm/shared/components/SelectableButton.d.ts

@@ -15,4 +15,4 @@ export declare const SelectableButton: import("@emotion/styled").StyledComponent
     as?: React.ElementType;
 } & {
     isActive?: boolean;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+}, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;