@amboss/design-system 4.8.2-canary.0 → 4.9.0

package/build/esm/components/Layout/-types.d.ts

@@ -103,15 +103,14 @@ export type LayoutState = {
 export type SidePanelConfig = {
     defaultVisible?: boolean;
     collapsible?: boolean;
-    /** Desktop only: allow drag-resizing the panel's column. Defaults `false` for
-     *  the left panel, `true` for the right. The panel's own `resizable` prop
-     *  overrides this. */
+    /** Desktop only: allow drag-resizing the panel's column. Default `true`. The
+     *  panel's own `resizable` prop overrides this. */
     resizable?: boolean;
     defaultSize?: Size;
     minSize?: Size;
     maxSize?: Size;
 };
-export type LeftPanelConfig = SidePanelConfig & {
+export type LeftPanelConfig = Omit<SidePanelConfig, "defaultSize" | "minSize" | "maxSize" | "resizable"> & {
     /** Presentation the panel starts in. Default `"sidebar"`. */
     variant?: LeftPanelVariant;
 };
@@ -300,8 +299,7 @@ export type SidePanelProps = ForwardedScrollProps & {
     minSize?: Size;
     maxSize?: Size;
     /** Desktop only: allow drag-resizing the panel's column. Overrides the
-     *  provider config's `resizable`, which defaults `false` for the left panel
-     *  and `true` for the right. When `false`, the column is fixed at
+     *  provider config's `resizable`. When `false`, the column is fixed at
      *  `defaultSize` - neighbours can't resize it either, though they stay
      *  resizable against each other. Showing and hiding the panel still works. No
      *  effect on the mobile drawer/sheet. */
@@ -309,28 +307,22 @@ export type SidePanelProps = ForwardedScrollProps & {
     /** Called whenever the panel's visibility changes, with the new value. */
     onVisibleChange?: (visible: boolean) => void;
 };
-export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "minSize" | "maxSize"> & {
-    /** Pixels. Unlike the other panels the left panel takes no percentage: with a
-     *  left bar its content is pinned to this width and clipped as the column narrows,
-     *  and a percentage would resolve against the narrowing column instead of the
-     *  width it opens to - so the content would reflow mid-slide, which is the one
-     *  thing the pin exists to prevent.
-     *
-     *  Sets the column's starting width only: the docked panel keeps that width
-     *  when the window resizes, and `Layout.Content` grows and shrinks around it.
-     *  Drag-resizing is a separate story - see `resizable`. */
-    defaultSize?: number;
-    minSize?: number;
-    maxSize?: number;
+/** Props the left panel hands to the parts it renders itself. */
+export type LeftPanelSlotProps = {
+    toggleButton: {
+        /** Accessible name for the left bar's open button, which is icon-only. */
+        "aria-label": string;
+        "data-e2e-test-id"?: string;
+    };
+};
+/** No sizing or resizing props: the left panel always opens to the
+ *  `layout.leftPanel.width.open` token. */
+export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "minSize" | "maxSize" | "resizable"> & {
     /** Props forwarded to the panel's internal parts. Required: the left bar
      *  always carries the button that opens the panel, and it is icon-only, so its
      *  accessible name can only come from here. Give it the action - the panel's
      *  own `aria-label` already names the region it opens. */
-    slotProps: {
-        toggleButton: {
-            "aria-label": string;
-        };
-    };
+    slotProps: LeftPanelSlotProps;
     /** Accessible name for the panel. Used to label the modal drawer it renders
      *  as on mobile (`role="dialog"`). Ignored by the docked desktop panel. */
     "aria-label": string;

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

@@ -1 +1 @@
-import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PAGE_BOTTOM_BAR_INSET,PANEL_ORDER,PANEL_WIDTH_VAR,Slot}from"./-constants";import{useLayoutPanelsEnabled,useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{LeftNavBar}from"./LeftNavBar/LeftNavBar";import{LeftNavBarFooter}from"./LeftNavBar/LeftNavBarFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext,PanelRowContext}from"./registry";import{usePortalTargets}from"./usePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel);useEffect(()=>{let targets=[[Slot.leftPanel,leftPanelWidthCssVar],[Slot.content,contentWidthCssVar],[Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=styled("div",{target:"e1no219g0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"e1no219g1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"e1no219g2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1no219g3",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"e1no219g4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e1no219g5",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=({slot,panel,panelState})=>slot===Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{"data-ds-id":"PanelHost",ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=useLayoutPanelsEnabled(),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[Slot.leftPanel]&&"offcanvas"===layoutState[Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile))&&!(slot===Slot.leftPanel&&hasOffcanvasLeftBar),[present,setPresent]=useState({}),presence=useMemo(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=useRef({}),panelElements=useRef({}),resizeSuppressed=useRef({}),animationControl=useMemo(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=useMemo(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=useCallback(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=useMemo(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=usePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:Slot.content,declared,present,isShown}),contentColumn=React.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.content]}),isSplitOpen&&React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),rowKey=panelItems.map(item=>item.id).join(","),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&dispatch({type:"resize",slot:id,size:declared[id]?.lockWidthOnWindowResize?Math.round(size.inPixels):`${size.asPercentage}%`})},onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return React.createElement(PanelRegistryContext.Provider,{value:registry},React.createElement(PanelDeclarationsContext.Provider,{value:declared},React.createElement(PanelPresenceContext.Provider,{value:presence},React.createElement(PanelAnimationContext.Provider,{value:animationControl},React.createElement(PanelRowContext.Provider,{value:rowKey},React.createElement(LayoutPortalContext.Provider,{value:portalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{"data-ds-id":"Layout"},React.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=LayoutProvider,Layout.LeftPanel=LeftPanel,Layout.LeftNavBar=LeftNavBar,Layout.LeftNavBarFooter=LeftNavBarFooter,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;
+import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PAGE_BOTTOM_BAR_INSET,PANEL_ORDER,PANEL_WIDTH_VAR,Slot}from"./-constants";import{useLayoutPanelsEnabled,useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{LeftNavBar}from"./LeftNavBar/LeftNavBar";import{LeftNavBarFooter}from"./LeftNavBar/LeftNavBarFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext,PanelRowContext}from"./registry";import{usePortalTargets}from"./usePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel);useEffect(()=>{let targets=[[Slot.leftPanel,leftPanelWidthCssVar],[Slot.content,contentWidthCssVar],[Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=styled("div",{target:"exoyye20",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"exoyye21",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"exoyye22",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"exoyye23",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"exoyye24",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"exoyye25",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!(declared[slot]&&(isShown(slot)||present[slot])),defaultSizeFor=({slot,panel,panelState})=>slot===Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{"data-ds-id":"PanelHost",ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=useLayoutPanelsEnabled(),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[Slot.leftPanel]&&"offcanvas"===layoutState[Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile))&&!(slot===Slot.leftPanel&&hasOffcanvasLeftBar),[present,setPresent]=useState({}),presence=useMemo(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=useRef({}),panelElements=useRef({}),resizeSuppressed=useRef({}),animationControl=useMemo(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=useMemo(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=useCallback(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=useMemo(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=usePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:Slot.content,declared,present,isShown}),contentColumn=React.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.content]}),isSplitOpen&&React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),rowKey=panelItems.map(item=>item.id).join(","),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&dispatch({type:"resize",slot:id,size:declared[id]?.lockWidthOnWindowResize?Math.round(size.inPixels):`${size.asPercentage}%`})},onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return React.createElement(PanelRegistryContext.Provider,{value:registry},React.createElement(PanelDeclarationsContext.Provider,{value:declared},React.createElement(PanelPresenceContext.Provider,{value:presence},React.createElement(PanelAnimationContext.Provider,{value:animationControl},React.createElement(PanelRowContext.Provider,{value:rowKey},React.createElement(LayoutPortalContext.Provider,{value:portalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{"data-ds-id":"Layout"},React.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=LayoutProvider,Layout.LeftPanel=LeftPanel,Layout.LeftNavBar=LeftNavBar,Layout.LeftNavBarFooter=LeftNavBarFooter,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { LayoutCssVarStore } from "./cssVarStore";
-export declare const LayoutCssVarStoreProvider: React.Provider<LayoutCssVarStore>;
+export declare const LayoutCssVarStoreProvider: React.Provider<LayoutCssVarStore | null>;
 /** Imperative handle to one registered layout var. */
 export type LayoutVarHandle = {
     set: (value: string) => void;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { CSSObject, Theme } from "@emotion/react";
-import type { ForwardedScrollProps } from "../-types";
+import type { ForwardedScrollProps, LeftPanelSlotProps } from "../-types";
 /**
  * The box the layers live in: one surface, one divider, and a clip. Shared by
  * the two presentations that carry a left bar - the in-row column and the offcanvas
@@ -31,8 +31,7 @@ export type LeftBarLayersProps = ForwardedScrollProps & {
     isVisible: boolean;
     /** Width the panel's content holds on to while the box is narrower. */
     openWidth: string;
-    /** Accessible name for the left bar's open button. */
-    toggleButtonLabel: string;
+    slotProps: LeftPanelSlotProps;
     "aria-label"?: string;
 };
 /**

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

@@ -1 +1 @@
-import React,{useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{useDocument}from"../../../shared/useDocument";import{getLeftPanelFadeStyles}from"../../../shared/mixins";import{SUBNAV_OFFSET_VAR}from"../-constants";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{useLeftPanelId}from"../useLeftPanelId";import{LeftPanelCollapseProvider}from"./useLeftPanelCollapseContext";import{LeftBarProvider}from"./useLeftBarContext";import{LeftBarToggle}from"./LeftBarToggle";export const getLeftBarColumnStyles=theme=>({overflow:"hidden",backgroundColor:theme.values.color.background.primary.default,"&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:1,backgroundColor:theme.values.color.border.secondary.default}});export const LEFT_BAR_TOP_INSET=`var(${SUBNAV_OFFSET_VAR}, 0px)`;export const getLeftBarTopTransition=theme=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return`top ${duration} ${timingFunction}`};let StyledLeftBarLayer=styled("div",{target:"e1oedn8k0",label:"StyledLeftBarLayer"})(({isPanelOpen})=>({position:"absolute",inset:0,display:"flex",flexDirection:"column",visibility:isPanelOpen?"hidden":"visible"})),StyledNavBarSlot=styled("div",{target:"e1oedn8k1",label:"StyledNavBarSlot"})({flex:"1 1 auto",minHeight:0}),StyledPanelLayer=styled("div",{target:"e1oedn8k2",label:"StyledPanelLayer"})(({theme,isPanelOpen})=>{let{duration}=theme.variables.animation.navSlide.collapse;return{position:"absolute",inset:0,overflow:"hidden",visibility:isPanelOpen?"visible":"hidden",transition:isPanelOpen?"none":`visibility 0s linear ${duration}`,"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledFadingContent=styled("div",{target:"e1oedn8k3",label:"StyledFadingContent"})(({theme,isFaded,pinnedContentWidth})=>({display:"flex",flexDirection:"column",flex:"1 0 auto",minWidth:pinnedContentWidth,...getLeftPanelFadeStyles({theme,isFaded})})),handOverFocus=({document,from,to})=>{from&&to&&from.contains(document.activeElement)&&to.focus()};export const LeftBarLayers=({children,isVisible,openWidth,toggleButtonLabel,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=useLeftPanelId(),document=useDocument(),leftBarLayerRef=useRef(null),panelLayerRef=useRef(null),toggleRef=useRef(null),[leftBarSlotNode,setLeftBarSlotNode]=useState(null),leftBarSlot=useMemo(()=>({slotNode:leftBarSlotNode}),[leftBarSlotNode]),isContentFaded=!isVisible,collapseState=useMemo(()=>({isContentFaded,pinnedContentWidth:openWidth}),[isContentFaded,openWidth]),wasVisible=useRef(isVisible);return useEffect(()=>{isVisible!==wasVisible.current&&(wasVisible.current=isVisible,handOverFocus({document,from:isVisible?leftBarLayerRef.current:panelLayerRef.current,to:isVisible?panelLayerRef.current:toggleRef.current}))},[isVisible,document]),React.createElement(LeftBarProvider,{value:leftBarSlot},React.createElement(StyledLeftBarLayer,{isPanelOpen:isVisible,ref:leftBarLayerRef},React.createElement(LeftBarToggle,{"aria-label":toggleButtonLabel,buttonRef:toggleRef}),React.createElement(StyledNavBarSlot,{ref:setLeftBarSlotNode})),React.createElement(StyledPanelLayer,{ref:panelLayerRef,isPanelOpen:isVisible,id:leftPanelId,tabIndex:-1,role:ariaLabel?"region":void 0,"aria-label":ariaLabel},React.createElement(Sandwich,{hideScrollbar:!0,scrollRef:scrollContainerRef,onScroll:onScroll},React.createElement(LeftPanelCollapseProvider,{value:collapseState},React.createElement(StyledFadingContent,{isFaded:isContentFaded,pinnedContentWidth:openWidth},children)))))};
+import React,{useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{useDocument}from"../../../shared/useDocument";import{getLeftPanelFadeStyles}from"../../../shared/mixins";import{SUBNAV_OFFSET_VAR}from"../-constants";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{useLeftPanelId}from"../useLeftPanelId";import{LeftPanelCollapseProvider}from"./useLeftPanelCollapseContext";import{LeftBarProvider}from"./useLeftBarContext";import{LeftBarToggle}from"./LeftBarToggle";export const getLeftBarColumnStyles=theme=>({overflow:"hidden",backgroundColor:theme.values.color.background.primary.default,"&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:1,backgroundColor:theme.values.color.border.secondary.default}});export const LEFT_BAR_TOP_INSET=`var(${SUBNAV_OFFSET_VAR}, 0px)`;export const getLeftBarTopTransition=theme=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return`top ${duration} ${timingFunction}`};let StyledLeftBarLayer=styled("div",{target:"e1gwfcgt0",label:"StyledLeftBarLayer"})(({isPanelOpen})=>({position:"absolute",inset:0,display:"flex",flexDirection:"column",visibility:isPanelOpen?"hidden":"visible"})),StyledNavBarSlot=styled("div",{target:"e1gwfcgt1",label:"StyledNavBarSlot"})({flex:"1 1 auto",minHeight:0}),StyledPanelLayer=styled("div",{target:"e1gwfcgt2",label:"StyledPanelLayer"})(({theme,isPanelOpen})=>{let{duration}=theme.variables.animation.navSlide.collapse;return{position:"absolute",inset:0,overflow:"hidden",visibility:isPanelOpen?"visible":"hidden",transition:isPanelOpen?"none":`visibility 0s linear ${duration}`,"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledFadingContent=styled("div",{target:"e1gwfcgt3",label:"StyledFadingContent"})(({theme,isFaded,fixedContentWidth})=>({display:"flex",flexDirection:"column",flex:"1 0 auto",minWidth:fixedContentWidth,...getLeftPanelFadeStyles({theme,isFaded})})),handOverFocus=({document,from,to})=>{from&&to&&from.contains(document.activeElement)&&to.focus()};export const LeftBarLayers=({children,isVisible,openWidth,slotProps,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=useLeftPanelId(),document=useDocument(),leftBarLayerRef=useRef(null),panelLayerRef=useRef(null),toggleRef=useRef(null),[leftBarSlotNode,setLeftBarSlotNode]=useState(null),leftBarSlot=useMemo(()=>({slotNode:leftBarSlotNode}),[leftBarSlotNode]),isContentFaded=!isVisible,collapseState=useMemo(()=>({isContentFaded,fixedContentWidth:openWidth}),[isContentFaded,openWidth]),wasVisible=useRef(isVisible);return useEffect(()=>{isVisible!==wasVisible.current&&(wasVisible.current=isVisible,handOverFocus({document,from:isVisible?leftBarLayerRef.current:panelLayerRef.current,to:isVisible?panelLayerRef.current:toggleRef.current}))},[isVisible,document]),React.createElement(LeftBarProvider,{value:leftBarSlot},React.createElement(StyledLeftBarLayer,{isPanelOpen:isVisible,ref:leftBarLayerRef},React.createElement(LeftBarToggle,{...slotProps.toggleButton,buttonRef:toggleRef}),React.createElement(StyledNavBarSlot,{ref:setLeftBarSlotNode})),React.createElement(StyledPanelLayer,{ref:panelLayerRef,isPanelOpen:isVisible,id:leftPanelId,tabIndex:-1,role:ariaLabel?"region":void 0,"aria-label":ariaLabel},React.createElement(Sandwich,{hideScrollbar:!0,scrollRef:scrollContainerRef,onScroll:onScroll},React.createElement(LeftPanelCollapseProvider,{value:collapseState},React.createElement(StyledFadingContent,{isFaded:isContentFaded,fixedContentWidth:openWidth},children)))))};

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

@@ -1,7 +1,6 @@
 import React from "react";
-export type LeftBarToggleProps = {
-    /** Accessible name for the button, which is icon-only. */
-    "aria-label"?: string;
+import type { LeftPanelSlotProps } from "../-types";
+export type LeftBarToggleProps = LeftPanelSlotProps["toggleButton"] & {
     /** Handed out so the layer above can put focus here when the panel closes -
      *  this is the control that replaces the one the panel is taking away. */
     buttonRef?: React.Ref<HTMLButtonElement>;
@@ -12,4 +11,4 @@ export type LeftBarToggleProps = {
  * adds content beneath it - because a panel that authored no nav bar would
  * otherwise close to a strip with no way back out of it.
  */
-export declare function LeftBarToggle({ "aria-label": ariaLabel, buttonRef, }: LeftBarToggleProps): React.ReactElement;
+export declare function LeftBarToggle({ "aria-label": ariaLabel, "data-e2e-test-id": dataE2eTestId, buttonRef, }: LeftBarToggleProps): React.ReactElement;

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

@@ -1 +1 @@
-import React from"react";import{Box}from"../../Box/Box";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{useLeftPanelId}from"../useLeftPanelId";export function LeftBarToggle({"aria-label":ariaLabel,buttonRef}){let{show,isVisible}=useLayout()[Slot.leftPanel],leftPanelId=useLeftPanelId();return React.createElement(Box,{space:"s",vSpace:"xs"},React.createElement(PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:show,"aria-label":ariaLabel,"aria-controls":leftPanelId,"aria-expanded":isVisible}))}
+import React from"react";import{Box}from"../../Box/Box";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{useLeftPanelId}from"../useLeftPanelId";export function LeftBarToggle({"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,buttonRef}){let{show,isVisible}=useLayout()[Slot.leftPanel],leftPanelId=useLeftPanelId();return React.createElement(Box,{space:"s",vSpace:"xs"},React.createElement(PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:show,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,"aria-controls":leftPanelId,"aria-expanded":isVisible}))}

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

@@ -1,8 +1,8 @@
 import React from "react";
 import type { LeftPanelProps } from "../-types";
 /**
- * Left side panel. Picks its presentation by breakpoint: an in-flow resizable
- * column on desktop ({@link LeftPanelDocked}) and a modal left-edge drawer on
+ * Left side panel. Picks its presentation by breakpoint: an in-flow column on
+ * desktop ({@link LeftPanelDocked}) and a modal left-edge drawer on
  * mobile ({@link LeftPanelDrawer}). Both are driven by the same `leftPanel`
  * layout state, so `useLayout()` controls it the same way at any width.
  */

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

@@ -1 +1 @@
-import React,{useId}from"react";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{useCanRenderPanel}from"../context";import{LeftPanelIdContext}from"../useLeftPanelId";import{LeftPanelDocked}from"./LeftPanelDocked";import{LeftPanelDrawer}from"./LeftPanelDrawer";import{LeftPanelOffcanvas}from"./LeftPanelOffcanvas";let pixelsOf=size=>"number"==typeof size?size:void 0,defaultSizeOf=({defaultSize,minSize,state})=>defaultSize??minSize??pixelsOf(state.size)??pixelsOf(state.minSize)??320;export const LeftPanel=({children,slotProps,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=useLayout()[Slot.leftPanel],canRender=useCanRenderPanel(),leftPanelId=useId(),resolvedDefaultSize=defaultSizeOf({defaultSize,minSize,state});if(useVisibleChange(isVisible,onVisibleChange),!canRender)return null;let drawer=React.createElement(LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),offcanvas=React.createElement(LeftPanelOffcanvas,{toggleButtonLabel:slotProps.toggleButton["aria-label"],isVisible:isVisible,hide:hide,openWidth:`${resolvedDefaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),docked=React.createElement(LeftPanelDocked,{toggleButtonLabel:slotProps.toggleButton["aria-label"],"aria-label":ariaLabel,defaultSize:resolvedDefaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable,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{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{useCanRenderPanel}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{isVisible,hide,state}=useLayout()[Slot.leftPanel],canRender=useCanRenderPanel(),leftPanelId=useId(),openWidth=useTheme().variables.layout.leftPanel.width.open;if(useVisibleChange(isVisible,onVisibleChange),!canRender)return null;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])};

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

@@ -1,21 +1,16 @@
 import React from "react";
-import type { ForwardedScrollProps } from "../-types";
+import type { ForwardedScrollProps, LeftPanelSlotProps } from "../-types";
 export type LeftPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
-    /** Accessible name for the left bar's open button. */
-    toggleButtonLabel: string;
+    slotProps: LeftPanelSlotProps;
     "aria-label"?: string;
-    /** Pixel width the column widens to. Resolved by `LeftPanel` from its own
-     *  prop and the provider config, so it is always a width. */
+    /** Pixel width the column widens to. */
     defaultSize: number;
-    minSize?: number;
-    maxSize?: number;
     collapsible?: boolean;
-    resizable?: boolean;
 };
 /**
  * Docked (desktop) left panel. Declares the `leftPanel` slot and portals its
- * content into the Group's host - an in-flow, resizable column whose width
+ * content into the Group's host - an in-flow column whose width
  * slides open/closed via {@link usePanelDockedSlide} (when collapsible). Content
  * lives in {@link LeftBarLayers} so `Layout.LeftPanelHeader` /
  * `Layout.LeftPanelFooter` children stick to the edges. The mobile presentation

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:"e1apd56i0",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,toggleButtonLabel,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let theme=useTheme(),{isVisible}=useLayout()[Slot.leftPanel];return usePanelDockedSlide({slot:Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0,collapsedSize:parseFloat(theme.variables.size.dimension.leftNavBar.width)}),useLayoutPortal(Slot.leftPanel,React.createElement(StyledLeftBarColumn,null,React.createElement(LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:`${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{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)))};

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{getLeftPanelFadeStyles}from"../../../shared/mixins";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{useLeftPanelCollapseContext}from"./useLeftPanelCollapseContext";let StyledFadingFooter=styled("div",{target:"emmyo1o0",label:"StyledFadingFooter"})(({theme,isFaded,pinnedContentWidth})=>({minWidth:pinnedContentWidth,...getLeftPanelFadeStyles({theme,isFaded})}));export function LeftPanelFooter({children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,pinnedContentWidth}=useLeftPanelCollapseContext();return React.createElement(Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},React.createElement(StyledFadingFooter,{isFaded:isContentFaded,pinnedContentWidth:pinnedContentWidth},children))}
+import React from"react";import styled from"@emotion/styled";import{getLeftPanelFadeStyles}from"../../../shared/mixins";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{useLeftPanelCollapseContext}from"./useLeftPanelCollapseContext";let StyledFadingFooter=styled("div",{target:"eqmipoc0",label:"StyledFadingFooter"})(({theme,isFaded,fixedContentWidth})=>({minWidth:fixedContentWidth,...getLeftPanelFadeStyles({theme,isFaded})}));export function LeftPanelFooter({children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,fixedContentWidth}=useLeftPanelCollapseContext();return React.createElement(Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},React.createElement(StyledFadingFooter,{isFaded:isContentFaded,fixedContentWidth:fixedContentWidth},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:"e1asip2n0",label:"StyledHeaderStrip"})(({theme,isFaded,pinnedContentWidth})=>({minWidth:pinnedContentWidth,...getLeftPanelFadeStyles({theme,isFaded})}));export function LeftPanelHeader({leftSlot,title,rightSlot,children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,pinnedContentWidth}=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,pinnedContentWidth:pinnedContentWidth},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:"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))}

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

@@ -1,9 +1,8 @@
 import React from "react";
-import type { ForwardedScrollProps } from "../-types";
+import type { ForwardedScrollProps, LeftPanelSlotProps } from "../-types";
 export type LeftPanelOffcanvasProps = ForwardedScrollProps & {
     children: React.ReactNode;
-    /** Accessible name for the left bar's open button. */
-    toggleButtonLabel: string;
+    slotProps: LeftPanelSlotProps;
     isVisible: boolean;
     hide: () => void;
     openWidth: string;

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

@@ -1 +1 @@
-import React,{useRef}from"react";import styled from"@emotion/styled";import{useTheme}from"@emotion/react";import{LEFT_BAR_TOP_INSET,LeftBarLayers,getLeftBarColumnStyles,getLeftBarTopTransition}from"./LeftBarLayers";import{PAGE_BOTTOM_BAR_INSET,Slot}from"../-constants";import{useDeclarePanel}from"../registry";import{useOnEscapePress}from"../../../shared/useOnEscapePress";import{useOutsideClick}from"../../../shared/useOutsideClick";let getOffcanvasBoxStyles=(theme,{isVisible,leftBarWidth,openWidth})=>({position:"absolute",left:0,top:LEFT_BAR_TOP_INSET,bottom:PAGE_BOTTOM_BAR_INSET,zIndex:1,width:isVisible?openWidth:leftBarWidth}),StyledOffcanvasShadow=styled("div",{target:"exeyzov0",label:"StyledOffcanvasShadow"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),pointerEvents:"none",boxShadow:theme.values.elevation[2],opacity:box.isVisible?theme.variables.opacity.visible:theme.variables.opacity.hidden,transition:[`width ${duration} ${timingFunction}`,`opacity ${duration} ${timingFunction}`,getLeftBarTopTransition(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledOffcanvasColumn=styled("div",{target:"exeyzov1",label:"StyledOffcanvasColumn"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),transition:[`width ${duration} ${timingFunction}`,getLeftBarTopTransition(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"},...getLeftBarColumnStyles(theme)}});export const LeftPanelOffcanvas=({children,toggleButtonLabel,isVisible,hide,openWidth,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let theme=useTheme();useDeclarePanel(Slot.leftPanel,{});let columnRef=useRef(null);useOnEscapePress(event=>{isVisible&&(event.preventDefault(),hide())},[isVisible,hide]),useOutsideClick(columnRef,hide,isVisible);let box={isVisible,leftBarWidth:theme.variables.size.dimension.leftNavBar.width,openWidth};return React.createElement(React.Fragment,null,React.createElement(StyledOffcanvasShadow,{...box,"aria-hidden":!0}),React.createElement(StyledOffcanvasColumn,{...box,ref:columnRef},React.createElement(LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};
+import React,{useRef}from"react";import styled from"@emotion/styled";import{useTheme}from"@emotion/react";import{LEFT_BAR_TOP_INSET,LeftBarLayers,getLeftBarColumnStyles,getLeftBarTopTransition}from"./LeftBarLayers";import{PAGE_BOTTOM_BAR_INSET,Slot}from"../-constants";import{useDeclarePanel}from"../registry";import{useOnEscapePress}from"../../../shared/useOnEscapePress";import{useOutsideClick}from"../../../shared/useOutsideClick";let getOffcanvasBoxStyles=(theme,{isVisible,leftBarWidth,openWidth})=>({position:"absolute",left:0,top:LEFT_BAR_TOP_INSET,bottom:PAGE_BOTTOM_BAR_INSET,zIndex:1,width:isVisible?openWidth:leftBarWidth}),StyledOffcanvasShadow=styled("div",{target:"elm45s90",label:"StyledOffcanvasShadow"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),pointerEvents:"none",boxShadow:theme.values.elevation[2],opacity:box.isVisible?theme.variables.opacity.visible:theme.variables.opacity.hidden,transition:[`width ${duration} ${timingFunction}`,`opacity ${duration} ${timingFunction}`,getLeftBarTopTransition(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledOffcanvasColumn=styled("div",{target:"elm45s91",label:"StyledOffcanvasColumn"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),transition:[`width ${duration} ${timingFunction}`,getLeftBarTopTransition(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"},...getLeftBarColumnStyles(theme)}});export const LeftPanelOffcanvas=({children,slotProps,isVisible,hide,openWidth,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let theme=useTheme();useDeclarePanel(Slot.leftPanel,{});let columnRef=useRef(null);useOnEscapePress(event=>{isVisible&&(event.preventDefault(),hide())},[isVisible,hide]),useOutsideClick(columnRef,hide,isVisible);let box={isVisible,leftBarWidth:theme.variables.size.dimension.leftNavBar.width,openWidth};return React.createElement(React.Fragment,null,React.createElement(StyledOffcanvasShadow,{...box,"aria-hidden":!0}),React.createElement(StyledOffcanvasColumn,{...box,ref:columnRef},React.createElement(LeftBarLayers,{isVisible:isVisible,slotProps:slotProps,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

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

@@ -8,4 +8,4 @@ export type LeftBarSlot = {
 };
 export declare const LeftBarProvider: React.Provider<LeftBarSlot>;
 /** The left bar slot behind the left panel, if this presentation has one. */
-export declare function useLeftBarContext(): LeftBarSlot;
+export declare const useLeftBarContext: () => LeftBarSlot;

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

@@ -1 +1 @@
-import{createContext,useContext}from"react";let LeftBarContext=createContext({slotNode:null});export const LeftBarProvider=LeftBarContext.Provider;export function useLeftBarContext(){return useContext(LeftBarContext)}
+import{createContext,useContext}from"react";let LeftBarContext=createContext({slotNode:null});export const LeftBarProvider=LeftBarContext.Provider;export const useLeftBarContext=()=>useContext(LeftBarContext);

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

@@ -2,10 +2,10 @@
 export type LeftPanelCollapseState = {
     /** The content is dissolving into the left bar beneath it. */
     isContentFaded: boolean;
-    /** Width the content holds on to while the column narrows around it, clipped
+    /** Width the content is held at while the column narrows around it, clipped
      *  at the column's edge so nothing inside reflows on the way down. */
-    pinnedContentWidth?: string;
+    fixedContentWidth?: string;
 };
 export declare const LeftPanelCollapseProvider: React.Provider<LeftPanelCollapseState>;
 /** How the left panel's parts have to behave while its column narrows. */
-export declare function useLeftPanelCollapseContext(): LeftPanelCollapseState;
+export declare const useLeftPanelCollapseContext: () => LeftPanelCollapseState;

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

@@ -1 +1 @@
-import{createContext,useContext}from"react";let LeftPanelCollapseContext=createContext({isContentFaded:!1});export const LeftPanelCollapseProvider=LeftPanelCollapseContext.Provider;export function useLeftPanelCollapseContext(){return useContext(LeftPanelCollapseContext)}
+import{createContext,useContext}from"react";let LeftPanelCollapseContext=createContext({isContentFaded:!1});export const LeftPanelCollapseProvider=LeftPanelCollapseContext.Provider;export const useLeftPanelCollapseContext=()=>useContext(LeftPanelCollapseContext);

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: React.Context<MobileSplitStackValue>;
+export declare const MobileSplitStackContext: React.Context<MobileSplitStackValue | null>;
 export declare const useMobileSplitStack: () => MobileSplitStackValue;

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

@@ -1,5 +1,5 @@
 import type { LayoutPanelsMode, LayoutState, LayoutStorage, LayoutStore } from "./-types";
-export declare const LayoutStoreProvider: React.Provider<LayoutStore>;
+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;
 export declare const LayoutPanelsEnabledProvider: React.Provider<LayoutPanelsMode>;

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,minSize:config.minSize,maxSize:config.maxSize}}function panelState(config={}){return{kind:"panel",visible:config.defaultVisible??!0,size:config.defaultSize,minSize:config.minSize,maxSize:config.maxSize}}export function createInitialState(config={}){return{leftPanel:{...sidePanelFields({resizable:!1,...config.leftPanel}),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,minSize:config.minSize,maxSize:config.maxSize}}function panelState(config={}){return{kind:"panel",visible:config.defaultVisible??!0,size:config.defaultSize,minSize:config.minSize,maxSize:config.maxSize}}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}};

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

@@ -2,7 +2,7 @@ import { type ReactNode } from "react";
 import type { PanelImperativeHandle } from "react-resizable-panels";
 import type { RightPanelVariant, Size, SlotKey } from "./-types";
 export type PortalTargets = Partial<Record<SlotKey, HTMLElement | null>>;
-export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "splitview" | "rightPanel", HTMLElement>>>;
+export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "splitview" | "rightPanel", HTMLElement | null>>>;
 /**
  * Portal `children` into the host DOM node registered for `slot`. Returns the
  * portal (or `null` if the host isn't mounted yet). Call unconditionally -
@@ -35,7 +35,7 @@ export type PanelRegistry = {
     register: (slot: SlotKey, reg: PanelReg) => void;
     unregister: (slot: SlotKey) => void;
 };
-export declare const PanelRegistryContext: React.Context<PanelRegistry>;
+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>>;
@@ -50,7 +50,7 @@ export declare const PanelDeclarationsContext: React.Context<Partial<Record<"con
  */
 export declare const PanelRowContext: React.Context<string>;
 /** The row's current column set, as a stable key. Empty outside a Layout. */
-export declare function usePanelRow(): string;
+export declare const usePanelRow: () => string;
 /**
  * Keeps an animating-out panel in the resizable row while its exit plays - the
  * Group would otherwise drop the column the instant it's hidden. The panel
@@ -60,7 +60,7 @@ export declare function usePanelRow(): string;
 export type PanelPresence = {
     setPresent: (slot: SlotKey, isPresent: boolean) => void;
 };
-export declare const PanelPresenceContext: React.Context<PanelPresence>;
+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;
@@ -82,7 +82,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: React.Context<PanelAnimationControl>;
+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";import{Slot}from"./-constants";import{useLayoutPanelsEnabled}from"./context";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),declarationEnabled=!0===useLayoutPanelsEnabled()||slot===Slot.content,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;useLayoutEffect(()=>{if(registry&&declarationEnabled)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,declarationEnabled,slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant])}export const PanelDeclarationsContext=createContext({});export const PanelRowContext=createContext("");export function usePanelRow(){return 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";import{Slot}from"./-constants";import{useLayoutPanelsEnabled}from"./context";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),declarationEnabled=!0===useLayoutPanelsEnabled()||slot===Slot.content,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;useLayoutEffect(()=>{if(registry&&declarationEnabled)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,declarationEnabled,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)}

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

@@ -1 +1 @@
-import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{PanelDeclarationsContext}from"./registry";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;return{state,leftPanel:{state:{...state.leftPanel,variant:state.leftPanel.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{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:{state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}
+import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";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;return{state,leftPanel:{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:{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:{state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{state:state.splitview,...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{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||"sidebar"===state.leftPanel.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),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/usePanelDockedSlide.d.ts

@@ -27,7 +27,7 @@ export type PanelDockedSlide = {
     isMounted: boolean;
     /** Body width (px) while the column slides; `null` at rest, where the body
      *  fills the column and the panel stays resizable. */
-    pinnedWidth: number | null;
+    fixedWidth: number | null;
 };
 /**
  * Animates a docked side panel's open/close as a width slide on its

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

@@ -1 +1 @@
-import{useLayoutEffect,useRef,useState}from"react";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence,usePanelRow}from"./registry";import{useLayout}from"./useLayout";let parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},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;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"),[pinnedWidth,setPinnedWidth]=useState(null),[prevVisible,setPrevVisible]=useState(isVisible);isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;useDeclarePanel(slot,{defaultSize:mountDefaultSizeFor({collapsedSize,defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:hasCollapsedRest&&!isVisible?collapsedSize:minSize??collapsedSize,maxSize,collapsible:isCollapsible,resizable,lockWidthOnWindowResize}),usePanelPresence(slot,hasCollapsedRest||isMounted);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{duration,timingFunction}=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):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{}setPinnedWidth(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);setPinnedWidth("entering"===phase?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)},waitsForRelaxedMinimum="exiting"===phase&&hasCollapsedRest,waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&waitsForRelaxedMinimum){frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1));return}let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(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]),{isMounted:hasCollapsedRest||isMounted,pinnedWidth}}
+import{useLayoutEffect,useRef,useState}from"react";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence,usePanelRow}from"./registry";import{useLayout}from"./useLayout";let parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},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})=>void 0===collapsedSize?minSize:isVisible?minSize??collapsedSize: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),[prevVisible,setPrevVisible]=useState(isVisible);isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;useDeclarePanel(slot,{defaultSize:mountDefaultSizeFor({collapsedSize,defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:minSizeFor({collapsedSize,isVisible,minSize}),maxSize,collapsible:isCollapsible,resizable,lockWidthOnWindowResize}),usePanelPresence(slot,hasCollapsedRest||isMounted);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{duration,timingFunction}=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):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?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)},waitsForRelaxedMinimum="exiting"===phase&&hasCollapsedRest,waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&waitsForRelaxedMinimum){frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1));return}let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(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]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}

package/build/esm/components/Lightbox/Lightbox.js

@@ -1,8 +1,8 @@
-import React,{useRef}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{useOutsideClickDeactivatesWithinPortal}from"../../shared/useOutsideClickDeactivatesWithinPortal";import{FOCUSABLE_SELECTOR}from"../../shared/focusableSelector";import{Portal,usePortalContainerElement}from"../Portal/Portal";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{useResponsiveStyles}from"../../shared/mediaQueries";import{DialogContext}from"../Patterns/Dialog/DialogContext";export const StyledBackdrop=styled("div",{target:"e1vcr7130",label:"StyledBackdrop"})(({theme,justifyContent})=>{let fadeInBackdrop=keyframes`
+import React,{useRef}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{useOutsideClickDeactivatesWithinPortal}from"../../shared/useOutsideClickDeactivatesWithinPortal";import{FOCUSABLE_SELECTOR}from"../../shared/focusableSelector";import{Portal,usePortalContainerElement}from"../Portal/Portal";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{useResponsiveStyles}from"../../shared/mediaQueries";import{DialogContext}from"../Patterns/Dialog/DialogContext";export const StyledBackdrop=styled("div",{target:"ehzm4j60",label:"StyledBackdrop"})(({theme,justifyContent})=>{let fadeInBackdrop=keyframes`
     from {
       opacity: ${theme.variables.opacity.hidden};
     }
     to {
       opacity: ${theme.variables.opacity.visible};
     }
-  `;return{position:"fixed",top:0,left:0,zIndex:theme.variables.zIndex.modal,width:"100%",height:"100dvh",background:theme.values.color.background.backdrop.default,display:"flex",flexDirection:"column",...useResponsiveStyles({justifyContent:[justifyContent,{top:"flex-start",center:"center"}]}),alignItems:"center",flex:"1 0 auto",animation:`${fadeInBackdrop} ${theme.variables.animation.modalBackdrop.open.duration} ${theme.variables.animation.modalBackdrop.open.timingFunction} both`}});export const StyledChildrenWrapper=styled("div",{target:"e1vcr7131",label:"StyledChildrenWrapper"})({display:"contents"});export function Lightbox({backdropRef,portalContainer,initialFocus,isDismissible=!0,children,handleClose,justifyContent="center",privateProps:{skipPortal,tabbableOptions}={skipPortal:!1}}){let portalContainerElement=usePortalContainerElement(portalContainer),modalRef=useRef(null),handleClickOutsideDeactivates=useOutsideClickDeactivatesWithinPortal({portalContainerElement,outerRef:backdropRef,isDismissible}),getFocusTarget=()=>{let container=modalRef?.current?.firstElementChild,firstFocusable=container?.querySelector(FOCUSABLE_SELECTOR);return firstFocusable||container||document.body},getInitialFocus=()=>"string"==typeof initialFocus?initialFocus:initialFocus?.current??getFocusTarget(),content=React.createElement(StyledBackdrop,{ref:backdropRef,justifyContent:justifyContent,"data-ds-id":"Lightbox"},React.createElement(FocusTrapWrapper,{active:!0,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:handleClickOutsideDeactivates,escapeDeactivates:isDismissible,preventScroll:!0,initialFocus:()=>getInitialFocus(),fallbackFocus:()=>getFocusTarget(),...tabbableOptions&&{tabbableOptions},...handleClose&&{onPostDeactivate:handleClose}}},React.createElement(StyledChildrenWrapper,{ref:modalRef},children)));return skipPortal?content:React.createElement(DialogContext.Provider,{value:!0},React.createElement(Portal,{portalContainer:portalContainer},content))}
+  `;return{position:"fixed",top:0,left:0,zIndex:theme.variables.zIndex.modal,width:"100%",height:"100dvh",background:theme.values.color.background.backdrop.default,display:"flex",flexDirection:"column",...useResponsiveStyles({justifyContent:[justifyContent,{top:"flex-start",center:"center"}]}),alignItems:"center",flex:"1 0 auto",animation:`${fadeInBackdrop} ${theme.variables.animation.modalBackdrop.open.duration} ${theme.variables.animation.modalBackdrop.open.timingFunction} both`}});export const StyledChildrenWrapper=styled("div",{target:"ehzm4j61",label:"StyledChildrenWrapper"})({display:"contents"});export function Lightbox({backdropRef,portalContainer,initialFocus,isDismissible=!0,children,handleClose,justifyContent="center",privateProps:{skipPortal,tabbableOptions}={skipPortal:!1}}){let portalContainerElement=usePortalContainerElement(portalContainer),modalRef=useRef(null),handleClickOutsideDeactivates=useOutsideClickDeactivatesWithinPortal({portalContainerElement,outerRef:backdropRef,isDismissible}),getFocusTarget=()=>{let container=modalRef?.current?.firstElementChild,firstFocusable=container?.querySelector(FOCUSABLE_SELECTOR);return firstFocusable||container||document.body},getInitialFocus=()=>"string"==typeof initialFocus?initialFocus:initialFocus?.current??getFocusTarget(),content=React.createElement(StyledBackdrop,{ref:backdropRef,justifyContent:justifyContent,"data-ds-id":"Lightbox"},React.createElement(FocusTrapWrapper,{active:!0,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:handleClickOutsideDeactivates,escapeDeactivates:isDismissible,preventScroll:!0,initialFocus:()=>getInitialFocus(),fallbackFocus:()=>getFocusTarget(),...tabbableOptions&&{tabbableOptions},...handleClose&&{onPostDeactivate:handleClose}}},React.createElement(StyledChildrenWrapper,{ref:modalRef},children)));return skipPortal?content:React.createElement(DialogContext.Provider,{value:!0},React.createElement(Portal,{portalContainer:portalContainer},content))}

package/build/esm/components/Link/Link.js

@@ -1 +1 @@
-import React,{useContext}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{TextContext}from"../Typography/Text/Text";import{Icon}from"../Icon/Icon";let StyledLink=styled("a",{shouldForwardProp:prop=>isPropValid(prop)&&"inline"!==prop,target:"e1viewf50",label:"StyledLink"})(({theme,weight,size,color,inline})=>({cursor:"pointer",background:"none",border:"none",padding:0,fontSize:theme.variables.size.font[size]??"inherit",fontWeight:theme.variables.weight[weight]??"inherit",lineHeight:({xxs:theme.variables.size.lineHeight.m,xs:theme.variables.size.lineHeight.xl,s:theme.variables.size.lineHeight.l,m:theme.variables.size.lineHeight.xl,l:theme.variables.size.lineHeight.xl})[size],fontFamily:theme.variables.fontFamily.lato,textDecorationLine:inline?"underline":"none",color:color?theme.values.color.text[color].default:"inherit",...("primary"===color||"secondary"===color||"tertiary"===color)&&{textDecorationColor:theme.values.color.text.underline.default},"&:hover":{textDecorationLine:"underline",textDecorationThickness:"0.125em",...("primary"===color||"secondary"===color||"tertiary"===color)&&{textDecorationColor:theme.values.color.text.underline.hover,color:theme.values.color.text[color].hover}}})),StyledIcon=styled(Icon,{target:"e1viewf51",label:"StyledIcon"})(({position,theme})=>({..."left"===position&&{marginRight:theme.variables.size.spacing.xxs},..."right"===position&&{marginLeft:theme.variables.size.spacing.xxs}}));export const Link=React.forwardRef(({weight,color:colorProp,size,variant,inline,iconLeft,iconRight,children,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let inheritPropsFromText=useContext(TextContext),linkColor=variant?"primary"===variant?"accent":"secondary"===variant?"primary":variant:colorProp||(inheritPropsFromText?.color?inheritPropsFromText?.color:inline?void 0:"accent"),isInlineLink=inline||!!inheritPropsFromText,linkContent=!isInlineLink&&(iconLeft||iconRight)?React.createElement(React.Fragment,null,iconLeft&&React.createElement(StyledIcon,{"aria-hidden":!0,size:"s",name:iconLeft.name,color:iconLeft.color??linkColor,inline:!0,position:"left"}),children,iconRight&&React.createElement(StyledIcon,{"aria-hidden":!0,size:"s",name:iconRight.name,color:iconRight.color??linkColor,inline:!0,position:"right"})):children;return React.createElement(StyledLink,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Link",ref:ref,inline:isInlineLink,color:linkColor,size:size||inheritPropsFromText?.size,weight:weight||inheritPropsFromText?.weight,...rest},linkContent)});
+import React,{useContext}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{forwardRefPolymorphic}from"../../shared/forwardRefPolymorphic";import{TextContext}from"../Typography/Text/Text";import{Icon}from"../Icon/Icon";let StyledLink=styled("a",{shouldForwardProp:prop=>isPropValid(prop)&&"inline"!==prop,target:"ert2rd50",label:"StyledLink"})(({theme,weight,size,color,inline})=>({cursor:"pointer",background:"none",border:"none",padding:0,fontSize:(size&&theme.variables.size.font[size])??"inherit",fontWeight:(weight&&theme.variables.weight[weight])??"inherit",lineHeight:size?({xxs:theme.variables.size.lineHeight.m,xs:theme.variables.size.lineHeight.xl,s:theme.variables.size.lineHeight.l,m:theme.variables.size.lineHeight.xl,l:theme.variables.size.lineHeight.xl})[size]:void 0,fontFamily:theme.variables.fontFamily.lato,textDecorationLine:inline?"underline":"none",color:color?theme.values.color.text[color].default:"inherit",...("primary"===color||"secondary"===color||"tertiary"===color)&&{textDecorationColor:theme.values.color.text.underline.default},"&:hover":{textDecorationLine:"underline",textDecorationThickness:"0.125em",...("primary"===color||"secondary"===color||"tertiary"===color)&&{textDecorationColor:theme.values.color.text.underline.hover,color:theme.values.color.text[color].hover}}})),StyledIcon=styled(Icon,{target:"ert2rd51",label:"StyledIcon"})(({position,theme})=>({..."left"===position&&{marginRight:theme.variables.size.spacing.xxs},..."right"===position&&{marginLeft:theme.variables.size.spacing.xxs}}));export const Link=forwardRefPolymorphic(({weight,color:colorProp,size,variant,inline,iconLeft,iconRight,children,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let inheritPropsFromText=useContext(TextContext),linkColor=variant?"primary"===variant?"accent":"secondary"===variant?"primary":variant:colorProp||(inheritPropsFromText?.color?inheritPropsFromText?.color:inline?void 0:"accent"),isInlineLink=inline||!!inheritPropsFromText,linkContent=!isInlineLink&&(iconLeft||iconRight)?React.createElement(React.Fragment,null,iconLeft&&React.createElement(StyledIcon,{"aria-hidden":!0,size:"s",name:iconLeft.name,color:iconLeft.color??linkColor,inline:!0,position:"left"}),children,iconRight&&React.createElement(StyledIcon,{"aria-hidden":!0,size:"s",name:iconRight.name,color:iconRight.color??linkColor,inline:!0,position:"right"})):children;return React.createElement(StyledLink,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Link",ref:ref,inline:isInlineLink,color:linkColor,size:size||inheritPropsFromText?.size,weight:weight||inheritPropsFromText?.weight,...rest},linkContent)});

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

@@ -3,6 +3,7 @@ import type { Property } from "csstype";
 import type { Hyphens, MediaItemSize, PolymorphicComponentPropsWithRef } from "../../types";
 import { type IconName } from "../Icon/Icon";
 export declare const mediaSize: Record<MediaItemSize, number>;
+export declare const getMediaSize: (size: MediaItemSize | undefined) => number | undefined;
 export type MediaItemProps = {
     src: string;
     title: string;

package/build/esm/components/MediaItem/MediaItem.js

@@ -1 +1 @@
-import React,{useState}from"react";import styled from"@emotion/styled";import{Icon}from"../Icon/Icon";import{Stack}from"../Stack/Stack";import{TextClamped}from"../Typography/TextClamped/TextClamped";import{Inline}from"../Inline/Inline";import{Image}from"../Image/Image";import{ContentText}from"../Content/ContentText/ContentText";export const mediaSize={xs:80,s:88,m:110,l:128,xl:204};let StyledTextClamped=styled(TextClamped,{target:"eclnczy0",label:"StyledTextClamped"})(),StyledMedia=styled("div",{target:"eclnczy1",label:"StyledMedia"})(({squareByWidth,srcError})=>({height:"100%",...squareByWidth&&{position:"absolute",left:0,bottom:0,top:0,right:0},...srcError&&{display:"flex",alignItems:"center",justifyContent:"center"}})),StyledOverlay=styled("div",{target:"eclnczy2",label:"StyledOverlay"})(()=>({position:"absolute",left:0,bottom:0,top:0,right:0})),StyledButton=styled("button",{target:"eclnczy3",label:"StyledButton"})(({theme,size,width,isActive})=>({padding:0,backgroundColor:theme.values.color.background.transparent.default,border:"none",cursor:"pointer",borderRadius:theme.variables.size.borderRadius.s,width:mediaSize[size]||width||"100%",outlineOffset:"1px",outline:`solid 2px ${theme.values.color.background.transparent.default}`,transition:"all 0.3s ease",[`&:hover ${StyledTextClamped}, &:active ${StyledTextClamped}`]:{color:theme.values.color.text.primary.default},[`&:hover ${StyledOverlay}`]:{backgroundColor:theme.values.color.mediaItem.overlay.hover},[`&:active ${StyledOverlay}`]:{backgroundColor:theme.values.color.mediaItem.overlay.active},...!isActive&&{"&:focus-visible":{outlineWidth:"2px",outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio:0)":{"&:focus-visible":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}}},...isActive&&{outlineColor:theme.values.color.border.secondary.active}})),StyledMediaContainer=styled("div",{target:"eclnczy4",label:"StyledMediaContainer"})(({theme,size,height,backgroundColor,squareByWidth,srcError})=>({overflow:"hidden",border:"1px solid",borderColor:theme.values.color.border.secondary.default,borderRadius:theme.variables.size.borderRadius.s,position:"relative",backgroundClip:"padding-box",backgroundColor:theme.values.color.mediaItem.background[backgroundColor],height:mediaSize[size]||height||"auto",...squareByWidth&&{paddingTop:"calc(100% - 2px)",height:"auto"},...srcError&&{backgroundColor:theme.values.color.background.transparent.active}})),StyledIconContainer=styled("div",{target:"eclnczy5",label:"StyledIconContainer"})(({theme})=>({position:"absolute",left:theme.variables.size.spacing.xxs,bottom:theme.variables.size.spacing.xxs,overflow:"hidden",borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.mediaItem.categoryIcon.background.default,padding:theme.variables.size.spacing.xxs,color:theme.values.color.text.onAccent.default}));export const MediaItem=React.forwardRef(({"data-e2e-test-id":dataE2eTestId,as,src,title,showTitle=!0,fit="cover",categoryIcon,categoryLabel,categoryPlacement="outside",size,width,height,backgroundColor="transparent",hyphens="none",squareByWidth=!1,isActive,...rest},ref)=>{let[srcError,setSrcError]=useState(!1),showCategoryOver=categoryIcon&&(!size&&"inside"===categoryPlacement||"xs"===size||"s"===size||"m"===size),showCategoryUnder=categoryIcon&&categoryLabel&&(!size&&"outside"===categoryPlacement||"l"===size||"xl"===size),textSize=["xs","s","m"].includes(size)?"xs":"s",noVisibleText=!showTitle&&!showCategoryUnder;return React.createElement(StyledButton,{"data-ds-id":"MediaItem","data-e2e-test-id":dataE2eTestId,as:as,ref:ref,size:size,width:width,isActive:isActive,...rest,"aria-label":noVisibleText?title:void 0},React.createElement(Stack,{space:"xs"},React.createElement(StyledMediaContainer,{size:size,height:height,backgroundColor:backgroundColor,squareByWidth:squareByWidth,srcError:srcError},React.createElement(StyledMedia,{squareByWidth:squareByWidth,srcError:srcError},srcError?React.createElement(Icon,{name:"image-broken",color:"tertiary"}):React.createElement(Image,{src:src,fit:fit,title:title,alt:title,width:"100%",height:"100%","aria-hidden":"true",onError:()=>{setSrcError(!0)}})),React.createElement(StyledOverlay,null),showCategoryOver&&React.createElement(StyledIconContainer,null,React.createElement(Icon,{name:categoryIcon,size:"s",color:"inherit"}))),(showCategoryUnder||showTitle)&&React.createElement(Stack,{space:"xxs"},showCategoryUnder&&React.createElement(Inline,{space:"xxs",vAlignItems:"center"},React.createElement(Icon,{name:categoryIcon,color:"quaternary",size:"s"}),React.createElement(ContentText,{color:"tertiary",size:"xs",transform:"uppercase",weight:"bold"},categoryLabel)),showTitle&&React.createElement(StyledTextClamped,{size:textSize,color:"secondary",lines:3,hyphens:hyphens,overflowWrap:"break-word"},title))))});
+import React,{useState}from"react";import styled from"@emotion/styled";import{forwardRefPolymorphic}from"../../shared/forwardRefPolymorphic";import{Icon}from"../Icon/Icon";import{Stack}from"../Stack/Stack";import{TextClamped}from"../Typography/TextClamped/TextClamped";import{Inline}from"../Inline/Inline";import{Image}from"../Image/Image";import{ContentText}from"../Content/ContentText/ContentText";export const mediaSize={xs:80,s:88,m:110,l:128,xl:204};export const getMediaSize=size=>size?mediaSize[size]:void 0;let StyledTextClamped=styled(TextClamped,{target:"e1oxgvtl0",label:"StyledTextClamped"})(),StyledMedia=styled("div",{target:"e1oxgvtl1",label:"StyledMedia"})(({squareByWidth,srcError})=>({height:"100%",...squareByWidth&&{position:"absolute",left:0,bottom:0,top:0,right:0},...srcError&&{display:"flex",alignItems:"center",justifyContent:"center"}})),StyledOverlay=styled("div",{target:"e1oxgvtl2",label:"StyledOverlay"})(()=>({position:"absolute",left:0,bottom:0,top:0,right:0})),StyledButton=styled("button",{target:"e1oxgvtl3",label:"StyledButton"})(({theme,size,width,isActive})=>({padding:0,backgroundColor:theme.values.color.background.transparent.default,border:"none",cursor:"pointer",borderRadius:theme.variables.size.borderRadius.s,width:getMediaSize(size)||width||"100%",outlineOffset:"1px",outline:`solid 2px ${theme.values.color.background.transparent.default}`,transition:"all 0.3s ease",[`&:hover ${StyledTextClamped}, &:active ${StyledTextClamped}`]:{color:theme.values.color.text.primary.default},[`&:hover ${StyledOverlay}`]:{backgroundColor:theme.values.color.mediaItem.overlay.hover},[`&:active ${StyledOverlay}`]:{backgroundColor:theme.values.color.mediaItem.overlay.active},...!isActive&&{"&:focus-visible":{outlineWidth:"2px",outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio:0)":{"&:focus-visible":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}}},...isActive&&{outlineColor:theme.values.color.border.secondary.active}})),StyledMediaContainer=styled("div",{target:"e1oxgvtl4",label:"StyledMediaContainer"})(({theme,size,height,backgroundColor,squareByWidth,srcError})=>({overflow:"hidden",border:"1px solid",borderColor:theme.values.color.border.secondary.default,borderRadius:theme.variables.size.borderRadius.s,position:"relative",backgroundClip:"padding-box",backgroundColor:theme.values.color.mediaItem.background[backgroundColor],height:getMediaSize(size)||height||"auto",...squareByWidth&&{paddingTop:"calc(100% - 2px)",height:"auto"},...srcError&&{backgroundColor:theme.values.color.background.transparent.active}})),StyledIconContainer=styled("div",{target:"e1oxgvtl5",label:"StyledIconContainer"})(({theme})=>({position:"absolute",left:theme.variables.size.spacing.xxs,bottom:theme.variables.size.spacing.xxs,overflow:"hidden",borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.mediaItem.categoryIcon.background.default,padding:theme.variables.size.spacing.xxs,color:theme.values.color.text.onAccent.default}));export const MediaItem=forwardRefPolymorphic(({"data-e2e-test-id":dataE2eTestId,as,src,title,showTitle=!0,fit="cover",categoryIcon,categoryLabel,categoryPlacement="outside",size,width,height,backgroundColor="transparent",hyphens="none",squareByWidth=!1,isActive,...rest},ref)=>{let[srcError,setSrcError]=useState(!1),showCategoryOver=categoryIcon&&(!size&&"inside"===categoryPlacement||"xs"===size||"s"===size||"m"===size),showCategoryUnder=categoryIcon&&categoryLabel&&(!size&&"outside"===categoryPlacement||"l"===size||"xl"===size),textSize=size&&["xs","s","m"].includes(size)?"xs":"s",noVisibleText=!showTitle&&!showCategoryUnder;return React.createElement(StyledButton,{"data-ds-id":"MediaItem","data-e2e-test-id":dataE2eTestId,as:as,ref:ref,size:size,width:width,isActive:isActive,...rest,"aria-label":noVisibleText?title:void 0},React.createElement(Stack,{space:"xs"},React.createElement(StyledMediaContainer,{size:size,height:height,backgroundColor:backgroundColor,squareByWidth:squareByWidth,srcError:srcError},React.createElement(StyledMedia,{squareByWidth:squareByWidth,srcError:srcError},srcError?React.createElement(Icon,{name:"image-broken",color:"tertiary"}):React.createElement(Image,{src:src,fit:fit,title:title,alt:title,width:"100%",height:"100%","aria-hidden":"true",onError:()=>{setSrcError(!0)}})),React.createElement(StyledOverlay,null),showCategoryOver&&React.createElement(StyledIconContainer,null,React.createElement(Icon,{name:categoryIcon,size:"s",color:"inherit"}))),(showCategoryUnder||showTitle)&&React.createElement(Stack,{space:"xxs"},showCategoryUnder&&React.createElement(Inline,{space:"xxs",vAlignItems:"center"},React.createElement(Icon,{name:categoryIcon,color:"quaternary",size:"s"}),React.createElement(ContentText,{color:"tertiary",size:"xs",transform:"uppercase",weight:"bold"},categoryLabel)),showTitle&&React.createElement(StyledTextClamped,{size:textSize,color:"secondary",lines:3,hyphens:hyphens,overflowWrap:"break-word"},title))))});

package/build/esm/components/MediaItem/MediaItemSkeleton.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Skeleton}from"../Skeleton/Skeleton";import{Stack}from"../Stack/Stack";import{TextSkeleton}from"../Typography/Text";import{mediaSize}from"./MediaItem";let StyledMediaContainer=styled("div",{target:"eyz5nci0",label:"StyledMediaContainer"})(({squareByWidth})=>({...squareByWidth&&{position:"relative",paddingTop:"100%"}})),StyledMedia=styled("div",{target:"eyz5nci1",label:"StyledMedia"})(({squareByWidth,width,height})=>({width,height,...squareByWidth&&{position:"absolute",inset:0}}));export function MediaItemSkeleton({size,showTitle=!0,width,height,squareByWidth,"data-e2e-test-id":dataE2eTestId}){let mediaSizePx=mediaSize[size]&&`${mediaSize[size]}px`,mediaItemWidth=mediaSizePx||width||"100%",mediaItemHeight=mediaSizePx||height||"auto";return React.createElement(Stack,{space:"xs","data-e2e-test-id":dataE2eTestId,"data-ds-id":"MediaItemSkeleton"},React.createElement(StyledMediaContainer,{squareByWidth:squareByWidth},React.createElement(StyledMedia,{width:mediaItemWidth,height:mediaItemHeight,squareByWidth:squareByWidth},React.createElement(Skeleton,{borderRadius:"s"}))),showTitle&&React.createElement(TextSkeleton,{size:"xs"===size||"s"===size?"xs":"s",lines:2,width:mediaItemWidth}))}
+import React from"react";import styled from"@emotion/styled";import{Skeleton}from"../Skeleton/Skeleton";import{Stack}from"../Stack/Stack";import{TextSkeleton}from"../Typography/Text";import{getMediaSize}from"./MediaItem";let StyledMediaContainer=styled("div",{target:"e1f6kpba0",label:"StyledMediaContainer"})(({squareByWidth})=>({...squareByWidth&&{position:"relative",paddingTop:"100%"}})),StyledMedia=styled("div",{target:"e1f6kpba1",label:"StyledMedia"})(({squareByWidth,width,height})=>({width,height,...squareByWidth&&{position:"absolute",inset:0}}));export function MediaItemSkeleton({size,showTitle=!0,width,height,squareByWidth,"data-e2e-test-id":dataE2eTestId}){let mediaSizeValue=getMediaSize(size),mediaSizePx=mediaSizeValue&&`${mediaSizeValue}px`,mediaItemWidth=mediaSizePx||width||"100%",mediaItemHeight=mediaSizePx||height||"auto";return React.createElement(Stack,{space:"xs","data-e2e-test-id":dataE2eTestId,"data-ds-id":"MediaItemSkeleton"},React.createElement(StyledMediaContainer,{squareByWidth:squareByWidth},React.createElement(StyledMedia,{width:mediaItemWidth,height:mediaItemHeight,squareByWidth:squareByWidth},React.createElement(Skeleton,{borderRadius:"s"}))),showTitle&&React.createElement(TextSkeleton,{size:"xs"===size||"s"===size?"xs":"s",lines:2,width:mediaItemWidth}))}