@amboss/design-system 4.9.4-canary.0 → 4.9.4-canary.2

package/build/cjs/components/Internal/Panel/Panel.d.ts

@@ -3,6 +3,8 @@ import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanel
 /** A size: plain number = pixels; unitless string = percentage ("10%"). */
 type Size = number | string;
 export type PanelItem = {
+    /** Leave a transparent spacing token before this panel's column. */
+    gapBefore?: boolean;
     /** Stable id — used by react-resizable-panels to track the panel and persist
      *  its size, and passed back to `onResize`/`onCollapse`. */
     id: string;

package/build/cjs/components/Internal/Panel/Panel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Panel(){return Panel},get groupResizeBehaviorFor(){return groupResizeBehaviorFor}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_reactresizablepanels=require("react-resizable-panels"),CustomGroup=(0,_styled.default)(_reactresizablepanels.Group,{target:"e7m8rjd0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=(0,_styled.default)("div",{target:"e7m8rjd1",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize,groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size",canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=(0,_reactresizablepanels.useDefaultLayout)({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return _react.default.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];"number"==typeof pct&&collapsible&&pct<.5&&onCollapse(id)}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index});return _react.default.createElement(_react.default.Fragment,{key:item.id},index>0&&_react.default.createElement(_reactresizablepanels.Separator,{disabled:isSeparatorDisabled}),_react.default.createElement(_reactresizablepanels.Panel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,onResize:size=>{!shouldSuppressLayoutCallback?.()&&(size.asPercentage<.5||onResize(item.id,size))},panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},_react.default.createElement(StyledPanelChild,null,item.child)))}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Panel(){return Panel},get groupResizeBehaviorFor(){return groupResizeBehaviorFor}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_reactresizablepanels=require("react-resizable-panels"),CustomGroup=(0,_styled.default)(_reactresizablepanels.Group,{target:"e1qc2hi70",label:"CustomGroup"})({height:"100%",width:"100%"}),CustomSeparator=(0,_styled.default)(_reactresizablepanels.Separator,{target:"e1qc2hi71",label:"CustomSeparator"})(({theme})=>({flexShrink:0,width:theme.variables.size.spacing.xxs})),StyledPanelChild=(0,_styled.default)("div",{target:"e1qc2hi72",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize,groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size",canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=(0,_reactresizablepanels.useDefaultLayout)({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return _react.default.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];"number"==typeof pct&&collapsible&&pct<.5&&onCollapse(id)}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index}),SeparatorComponent=item.gapBefore?CustomSeparator:_reactresizablepanels.Separator;return _react.default.createElement(_react.default.Fragment,{key:item.id},index>0&&_react.default.createElement(SeparatorComponent,{disabled:isSeparatorDisabled}),_react.default.createElement(_reactresizablepanels.Panel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,onResize:size=>{!shouldSuppressLayoutCallback?.()&&(size.asPercentage<.5||onResize(item.id,size))},panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},_react.default.createElement(StyledPanelChild,null,item.child)))}))}

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

@@ -318,6 +318,9 @@ export type ContentProps = {
  * (default: the `xxl` breakpoint) and centred once past it.
  */
 export type SplitProps = ForwardedScrollProps & {
+    /** Panel surface. Defaults to primary.
+     *  TODO: Move background ownership to the client-rendered content. */
+    background?: "primary" | "transparent";
     /** Panel content in source order. `<Layout.SplitHeader />` /
      *  `<Layout.SplitFooter />` children stick to the edges; the rest scrolls. */
     children: React.ReactNode;
@@ -329,6 +332,8 @@ export type SplitProps = ForwardedScrollProps & {
 };
 /** Props of the internal mobile presentation of `Layout.Split`. */
 export type MobileSplitViewProps = ForwardedScrollProps & {
+    /** Surface forwarded from Layout.Split. */
+    background?: SplitProps["background"];
     children: React.ReactNode;
     /** Accessible name; when set, the view renders as a `region` landmark. */
     "aria-label"?: string;
@@ -460,6 +465,8 @@ export type SplitHeaderProps = PanelSlotHeaderProps & {
 };
 export type SplitFooterProps = PanelSlotFooterProps;
 export type PanelContainerProps = ForwardedScrollProps & {
+    /** Panel surface. Defaults to primary. */
+    background?: SplitProps["background"];
     /** Content in source order. Per-panel header/footer components stick to the
      *  edges; everything else scrolls. */
     children: React.ReactNode;

package/build/cjs/components/Layout/BottomBar/LayoutBottomBar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutBottomBar",{enumerable:!0,get:function(){return LayoutBottomBar}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_LayoutPortal=require("../LayoutPortal"),_LayoutBottomBarStyles=require("./LayoutBottomBarStyles"),_useLayout=require("../useLayout"),_getBottomBarLayout=require("./getBottomBarLayout"),_StyledLayoutBottomBar=require("./StyledLayoutBottomBar"),_StyledLayoutBottomBarSection=require("./StyledLayoutBottomBarSection");function LayoutBottomBar({children,"data-e2e-test-id":dataE2eTestId,...accessibleName}){let{leftPanel,content,splitview,rightPanel}=(0,_useLayout.useLayout)(),{sections,cells,rowCount,hasRightPanel}=(0,_getBottomBarLayout.getBottomBarLayout)(children,{leftPanel,content,splitview,rightPanel});return sections.length?_react.default.createElement(_LayoutPortal.LayoutPortal,null,_react.default.createElement(_LayoutBottomBarStyles.LayoutBottomBarStyles,{rowCount:rowCount,hasRightPanel:hasRightPanel}),_react.default.createElement(_StyledLayoutBottomBar.StyledLayoutBottomBar,{...accessibleName,role:"group",hasRightPanel:hasRightPanel,cells:cells,"data-ds-id":"LayoutBottomBar","data-e2e-test-id":dataE2eTestId},sections.map(section=>_react.default.createElement(_StyledLayoutBottomBarSection.StyledLayoutBottomBarSection,{key:section.region,"data-e2e-test-id":section["data-e2e-test-id"],columnIndex:section.columnIndex,rowIndex:section.rowIndex,fullWidth:"full"===section.placement},section.children)))):null}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutBottomBar",{enumerable:!0,get:function(){return LayoutBottomBar}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_react1=require("@emotion/react"),_LayoutPortal=require("../LayoutPortal"),_LayoutCssVars=require("../LayoutCssVars"),_constants=require("../-constants"),_useLayout=require("../useLayout"),_getBottomBarLayout=require("./getBottomBarLayout"),_StyledLayoutBottomBar=require("./StyledLayoutBottomBar"),_StyledLayoutBottomBarSection=require("./StyledLayoutBottomBarSection"),useGlobalCssVariables=(rowCount,hasRightPanel)=>{let rowHeight=(0,_react1.useTheme)().variables.layout.bottomBar.contentHeight.default,bottomBarHeightCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.BOTTOM_BAR_HEIGHT_VAR),rightPanelBottomBarHeightCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR);(0,_react.useLayoutEffect)(()=>{if(!rowCount){bottomBarHeightCssVar.remove(),rightPanelBottomBarHeightCssVar.remove();return}bottomBarHeightCssVar.set(`calc(${rowCount} * ${rowHeight} + env(safe-area-inset-bottom))`),rightPanelBottomBarHeightCssVar.set(hasRightPanel?`var(${_constants.BOTTOM_BAR_HEIGHT_VAR})`:"0px")},[rowCount,rowHeight,hasRightPanel,bottomBarHeightCssVar,rightPanelBottomBarHeightCssVar])};function LayoutBottomBar({children,"data-e2e-test-id":dataE2eTestId,...accessibleName}){let{leftPanel,content,splitview,rightPanel}=(0,_useLayout.useLayout)(),{sections,cells,rowCount,hasRightPanel}=(0,_getBottomBarLayout.getBottomBarLayout)(children,{leftPanel,content,splitview,rightPanel});return(useGlobalCssVariables(rowCount,hasRightPanel),sections.length)?_react.default.createElement(_LayoutPortal.LayoutPortal,null,_react.default.createElement(_StyledLayoutBottomBar.StyledLayoutBottomBar,{...accessibleName,role:"group",hasRightPanel:hasRightPanel,cells:cells,hasSplitColumns:"column"===content.presentation&&"column"===splitview.presentation,"data-ds-id":"LayoutBottomBar","data-e2e-test-id":dataE2eTestId},sections.map(section=>_react.default.createElement(_StyledLayoutBottomBarSection.StyledLayoutBottomBarSection,{key:section.region,"data-e2e-test-id":section["data-e2e-test-id"],columnIndex:section.columnIndex,rowIndex:section.rowIndex,fullWidth:"full"===section.placement},section.children)))):null}

package/build/cjs/components/Layout/BottomBar/StyledLayoutBottomBar.d.ts

@@ -1,6 +1,7 @@
 import type { BottomBarCell } from "./getBottomBarLayout";
 type StyledLayoutBottomBarProps = {
     hasRightPanel: boolean;
+    hasSplitColumns: boolean;
     cells: BottomBarCell[];
 };
 export declare const StyledLayoutBottomBar: import("@emotion/styled").StyledComponent<{

package/build/cjs/components/Layout/BottomBar/StyledLayoutBottomBar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"StyledLayoutBottomBar",{enumerable:!0,get:function(){return StyledLayoutBottomBar}});const _styled=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("@emotion/styled")),_constants=require("../-constants"),getRegionStart=region=>`var(${_constants.PANEL_START_VAR[region]}, 0px)`,getRegionWidth=region=>`var(${_constants.PANEL_WIDTH_VAR[region]}, 0px)`,getBottomBarCellWidth=cell=>{switch(cell.kind){case"leading-gap":return getRegionStart(cell.region);case"trailing-gap":return`max(0px, calc(100% - ${getRegionStart(cell.region)} - ${getRegionWidth(cell.region)}))`;case"column-gap":return`max(0px, calc(${getRegionStart(cell.region)} - ${getRegionStart(cell.previousRegion)} - ${getRegionWidth(cell.previousRegion)}))`;case"flexible-gap":return"minmax(0, 1fr)";default:{let{region,placement,fallback}=cell.section;if("remaining"===placement)return"max-content";if(cell.flexible)return"minmax(0, 1fr)";let columnWidth=cell.fillLeadingSpace?`calc(${getRegionWidth(region)} + ${getRegionStart(region)})`:getRegionWidth(region);return"remaining"===fallback?`minmax(max-content, ${columnWidth})`:columnWidth}}},StyledLayoutBottomBar=(0,_styled.default)("div",{target:"ezpybqs0",label:"StyledLayoutBottomBar"})(({theme,hasRightPanel,cells})=>({display:"grid",gridTemplateColumns:cells.map(getBottomBarCellWidth).join(" ")||"minmax(0, 1fr)",gridAutoRows:theme.variables.layout.bottomBar.contentHeight.default,alignContent:"start",bottom:0,boxShadow:theme.values.elevation[2],boxSizing:"border-box",height:_constants.PAGE_BOTTOM_BAR_INSET,left:0,opacity:`var(${_constants.LAYOUT_REGIONS_READY_VAR}, 0)`,paddingBottom:"env(safe-area-inset-bottom)",position:"absolute",right:hasRightPanel?0:`var(${_constants.PANEL_WIDTH_VAR.rightPanel}, 0px)`,zIndex:theme.variables.zIndex.dropdown}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"StyledLayoutBottomBar",{enumerable:!0,get:function(){return StyledLayoutBottomBar}});const _styled=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("@emotion/styled")),_getBottomBarOuterSpaceStyles=require("./getBottomBarOuterSpaceStyles"),_constants=require("../-constants"),getRegionStart=region=>`var(${_constants.PANEL_START_VAR[region]}, 0px)`,getRegionWidth=region=>`var(${_constants.PANEL_WIDTH_VAR[region]}, 0px)`,getBottomBarCellWidth=cell=>{switch(cell.kind){case"leading-gap":return getRegionStart(cell.region);case"trailing-gap":return`max(0px, calc(100% - ${getRegionStart(cell.region)} - ${getRegionWidth(cell.region)}))`;case"column-gap":return`max(0px, calc(${getRegionStart(cell.region)} - ${getRegionStart(cell.previousRegion)} - ${getRegionWidth(cell.previousRegion)}))`;case"flexible-gap":return"minmax(0, 1fr)";default:{let{region,placement,fallback}=cell.section;if("remaining"===placement)return"max-content";if(cell.flexible)return"minmax(0, 1fr)";let columnWidth=cell.fillLeadingSpace?`calc(${getRegionWidth(region)} + ${getRegionStart(region)})`:getRegionWidth(region);return"remaining"===fallback?`minmax(max-content, ${columnWidth})`:columnWidth}}},StyledLayoutBottomBar=(0,_styled.default)("div",{target:"e7hwo8w0",label:"StyledLayoutBottomBar"})(({theme,hasRightPanel,cells})=>({display:"grid",gridTemplateColumns:cells.map(getBottomBarCellWidth).join(" ")||"minmax(0, 1fr)",gridAutoRows:theme.variables.layout.bottomBar.contentHeight.default,alignContent:"start",bottom:0,boxShadow:theme.values.elevation[2],boxSizing:"border-box",height:_constants.PAGE_BOTTOM_BAR_INSET,left:0,opacity:`var(${_constants.LAYOUT_REGIONS_READY_VAR}, 0)`,paddingBottom:"env(safe-area-inset-bottom)",position:"absolute",right:hasRightPanel?0:`calc(${getRegionWidth("rightPanel")} + min(${getRegionWidth("rightPanel")}, ${theme.variables.size.spacing.xxs}))`,zIndex:theme.variables.zIndex.dropdown}),_getBottomBarOuterSpaceStyles.getBottomBarOuterSpaceStyles);

package/build/cjs/components/Layout/BottomBar/getBottomBarOuterSpaceStyles.d.ts

@@ -0,0 +1,14 @@
+import type { CSSObject, Theme } from "@emotion/react";
+import type { BottomBarCell } from "./getBottomBarLayout";
+type BottomBarOuterSpaceStylesOptions = {
+    theme: Theme;
+    hasRightPanel: boolean;
+    hasSplitColumns: boolean;
+    cells: BottomBarCell[];
+};
+/**
+ * Fills the side margins left by the content/split max-width in the first row.
+ * Region gaps stay transparent; action sizing and placement are unaffected.
+ */
+export declare const getBottomBarOuterSpaceStyles: ({ theme, hasRightPanel, hasSplitColumns, cells, }: BottomBarOuterSpaceStylesOptions) => CSSObject;
+export {};

package/build/cjs/components/Layout/BottomBar/getBottomBarOuterSpaceStyles.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"getBottomBarOuterSpaceStyles",{enumerable:!0,get:function(){return getBottomBarOuterSpaceStyles}});const _constants=require("../-constants"),getRegionEnd=region=>`calc(var(${_constants.PANEL_START_VAR[region]}, 0px) + var(${_constants.PANEL_WIDTH_VAR[region]}, 0px))`,hasColumnActions=(cells,region)=>cells.some(cell=>"section"===cell.kind&&cell.section.region===region&&"column"===cell.section.placement),getBottomBarOuterSpaceStyles=({theme,hasRightPanel,hasSplitColumns,cells})=>{let leftPanelEnd=getRegionEnd("leftPanel"),splitEnd=getRegionEnd("splitview"),rightPanelWidth=`var(${_constants.PANEL_WIDTH_VAR.rightPanel}, 0px)`,rightPanelGap=`min(${rightPanelWidth}, ${theme.variables.size.spacing.xxs})`,contentAreaEnd=hasRightPanel?`calc(100% - ${rightPanelWidth} - ${rightPanelGap})`:"100%";return{"&::before, &::after":{position:"absolute",top:0,height:theme.variables.layout.bottomBar.contentHeight.default,backgroundColor:theme.values.color.background.primary.default,pointerEvents:"none",zIndex:-1},"&::before":{content:hasSplitColumns&&hasColumnActions(cells,"content")?'""':"none",left:leftPanelEnd,width:`max(0px, calc(var(${_constants.PANEL_START_VAR.content}, 0px) - ${leftPanelEnd}))`},"&::after":{content:hasSplitColumns&&hasColumnActions(cells,"splitview")?'""':"none",left:splitEnd,width:`max(0px, calc(${contentAreaEnd} - ${splitEnd}))`}}};

package/build/cjs/components/Layout/Layout.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_LayoutBottomBar=require("./BottomBar/LayoutBottomBar"),_LayoutBottomBarItem=require("./BottomBar/LayoutBottomBarItem"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_LeftNavBar=require("./LeftNavBar/LeftNavBar"),_LeftNavBarFooter=require("./LeftNavBar/LeftNavBarFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_usePortalTargets=require("./usePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=({slotHosts,root,mobileHost})=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),splitviewWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.leftPanel),contentStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.content),splitviewStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.splitview),rightPanelStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.rightPanel),regionsReadyCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.LAYOUT_REGIONS_READY_VAR),publishRegions=(0,_react.useCallback)(()=>{if(!root)return;let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[_constants.Slot.content,contentWidthCssVar,contentStartCssVar],[_constants.Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===_constants.Slot.content||slot===_constants.Slot.splitview),width=isMobileRegion?rootRect.width:rect?.width??0,start=isMobileRegion||!rect?0:rect.left-rootRect.left;widthCssVar.set(`${width}px`),startCssVar.set(`${start}px`)}),regionsReadyCssVar.set("1")},[slotHosts,root,mobileHost,leftPanelWidthCssVar,contentWidthCssVar,splitviewWidthCssVar,rightPanelWidthCssVar,leftPanelStartCssVar,contentStartCssVar,splitviewStartCssVar,rightPanelStartCssVar,regionsReadyCssVar]);(0,_react.useLayoutEffect)(()=>{publishRegions()},[publishRegions]),(0,_react.useLayoutEffect)(()=>{if(!root||"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishRegions);return observer.observe(root),Object.values(slotHosts).forEach(host=>{host&&observer.observe(host)}),()=>observer.disconnect()},[root,slotHosts,publishRegions])},StyledLayout=(0,_styled.default)("div",{target:"e161k5ur0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=(0,_styled.default)("div",{target:"e161k5ur1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=(0,_styled.default)("div",{target:"e161k5ur2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e161k5ur3",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"e161k5ur4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e161k5ur5",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!(declared[slot]&&(isShown(slot)||present[slot])),defaultSizeFor=({slot,panel,panelState})=>slot===_constants.Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[_constants.Slot.leftPanel]&&"offcanvas"===layoutState[_constants.Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile))&&(slot!==_constants.Slot.leftPanel||"sidebar"===layoutState.leftPanel.variant),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.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=(0,_react.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=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.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}=(0,_usePortalTargets.usePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating}),[layoutRoot,setLayoutRoot]=(0,_react.useState)(null),rootPortalTargets=(0,_react.useMemo)(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.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,maxSize:panel?.maxSize,collapsible:slot!==_constants.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.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&declared[id]?.resizable!==!1&&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.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.PanelRowContext.Provider,{value:rowKey},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:rootPortalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{ref:setLayoutRoot,"data-ds-id":"Layout"},_react.default.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.BottomBar=_LayoutBottomBar.LayoutBottomBar,Layout.BottomBarItem=_LayoutBottomBarItem.LayoutBottomBarItem,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftNavBar=_LeftNavBar.LeftNavBar,Layout.LeftNavBarFooter=_LeftNavBarFooter.LeftNavBarFooter,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_LayoutBottomBar=require("./BottomBar/LayoutBottomBar"),_LayoutBottomBarItem=require("./BottomBar/LayoutBottomBarItem"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_LeftNavBar=require("./LeftNavBar/LeftNavBar"),_LeftNavBarFooter=require("./LeftNavBar/LeftNavBarFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_usePortalTargets=require("./usePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=({slotHosts,root,mobileHost})=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),splitviewWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.leftPanel),contentStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.content),splitviewStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.splitview),rightPanelStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.rightPanel),regionsReadyCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.LAYOUT_REGIONS_READY_VAR),publishRegions=(0,_react.useCallback)(()=>{if(!root)return;let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[_constants.Slot.content,contentWidthCssVar,contentStartCssVar],[_constants.Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===_constants.Slot.content||slot===_constants.Slot.splitview),width=isMobileRegion?rootRect.width:rect?.width??0,start=isMobileRegion||!rect?0:rect.left-rootRect.left;widthCssVar.set(`${width}px`),startCssVar.set(`${start}px`)}),regionsReadyCssVar.set("1")},[slotHosts,root,mobileHost,leftPanelWidthCssVar,contentWidthCssVar,splitviewWidthCssVar,rightPanelWidthCssVar,leftPanelStartCssVar,contentStartCssVar,splitviewStartCssVar,rightPanelStartCssVar,regionsReadyCssVar]);(0,_react.useLayoutEffect)(()=>{publishRegions()},[publishRegions]),(0,_react.useLayoutEffect)(()=>{if(!root||"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishRegions);return observer.observe(root),Object.values(slotHosts).forEach(host=>{host&&observer.observe(host)}),()=>observer.disconnect()},[root,slotHosts,publishRegions])},StyledLayout=(0,_styled.default)("div",{target:"e1kh2kot0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=(0,_styled.default)("div",{target:"e1kh2kot1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=(0,_styled.default)("div",{target:"e1kh2kot2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1kh2kot3",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"e1kh2kot4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e1kh2kot5",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!(declared[slot]&&(isShown(slot)||present[slot])),defaultSizeFor=({slot,panel,panelState})=>slot===_constants.Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[_constants.Slot.leftPanel]&&"offcanvas"===layoutState[_constants.Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile))&&(slot!==_constants.Slot.leftPanel||"sidebar"===layoutState.leftPanel.variant),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.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=(0,_react.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=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.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}=(0,_usePortalTargets.usePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating}),[layoutRoot,setLayoutRoot]=(0,_react.useState)(null),rootPortalTargets=(0,_react.useMemo)(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,gapBefore:slot===_constants.Slot.rightPanel,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize,maxSize:panel?.maxSize,collapsible:slot!==_constants.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.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&declared[id]?.resizable!==!1&&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.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.PanelRowContext.Provider,{value:rowKey},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:rootPortalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{ref:setLayoutRoot,"data-ds-id":"Layout"},_react.default.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.BottomBar=_LayoutBottomBar.LayoutBottomBar,Layout.BottomBarItem=_LayoutBottomBarItem.LayoutBottomBarItem,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftNavBar=_LeftNavBar.LeftNavBar,Layout.LeftNavBarFooter=_LeftNavBarFooter.LeftNavBarFooter,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;

package/build/cjs/components/Layout/PanelContainer.d.ts

@@ -6,4 +6,4 @@ import type { PanelContainerProps } from "./-types";
  * (`Layout.LeftPanelHeader` etc.) render anywhere among `children` and stick
  * to the edges; everything else scrolls.
  */
-export declare function PanelContainer({ children, "aria-label": ariaLabel, scrollContainerRef, onScroll, showBorderLeft, showBorderRight, "data-e2e-test-id": dataE2eTestId, }: PanelContainerProps): React.ReactElement;
+export declare function PanelContainer({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, showBorderLeft, showBorderRight, "data-e2e-test-id": dataE2eTestId, }: PanelContainerProps): React.ReactElement;

package/build/cjs/components/Layout/PanelContainer.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelContainer",{enumerable:!0,get:function(){return PanelContainer}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Sandwich=require("../Internal/Sandwich/Sandwich"),_Container=require("../Container/Container"),CustomContainer=(0,_styled.default)(_Container.Container,{shouldForwardProp:prop=>"showBorderLeft"!==prop&&"showBorderRight"!==prop,target:"e1ypgo8f0",label:"CustomContainer"})(({theme,showBorderLeft,showBorderRight})=>({height:"100%",borderLeft:showBorderLeft?`1px solid ${theme.values.color.border.secondary.default}`:void 0,borderRight:showBorderRight?`1px solid ${theme.values.color.border.secondary.default}`:void 0}));function PanelContainer({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,showBorderLeft=!1,showBorderRight=!1,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(CustomContainer,{elevation:0,squareCorners:!0,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,showBorderLeft:showBorderLeft,showBorderRight:showBorderRight,"data-ds-id":"PanelContainer","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Sandwich.Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},children))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelContainer",{enumerable:!0,get:function(){return PanelContainer}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Sandwich=require("../Internal/Sandwich/Sandwich"),_Container=require("../Container/Container"),CustomContainer=(0,_styled.default)(_Container.Container,{shouldForwardProp:prop=>"showBorderLeft"!==prop&&"showBorderRight"!==prop&&"background"!==prop,target:"eetiugt0",label:"CustomContainer"})(({theme,showBorderLeft,showBorderRight,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent",borderLeft:showBorderLeft?`1px solid ${theme.values.color.border.secondary.default}`:void 0,borderRight:showBorderRight?`1px solid ${theme.values.color.border.secondary.default}`:void 0}));function PanelContainer({children,background="primary","aria-label":ariaLabel,scrollContainerRef,onScroll,showBorderLeft=!1,showBorderRight=!1,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(CustomContainer,{elevation:0,squareCorners:!0,background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,showBorderLeft:showBorderLeft,showBorderRight:showBorderRight,"data-ds-id":"PanelContainer","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Sandwich.Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},children))}

package/build/cjs/components/Layout/Split/MobileSplitView/MobileSplitView.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"MobileSplitView",{enumerable:!0,get:function(){return MobileSplitView}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_reactdom=require("react-dom"),_PanelContainer=require("../../PanelContainer"),_StyledMobileSplitSlideLayer=require("./StyledMobileSplitSlideLayer"),_useMobileSplitStack=require("./useMobileSplitStack"),_useMobileSplitView=require("./useMobileSplitView"),MobileSplitView=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let enabled=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),{isSplitViewActive}=(0,_useMobileSplitView.useMobileSplitView)(),{host,registerSplit}=(0,_useMobileSplitStack.useMobileSplitStack)();if((0,_react.useLayoutEffect)(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),!enabled||!host)return null;let offset=(0,_useMobileSplitView.splitViewOffsetFor)(isSplitViewActive);return(0,_reactdom.createPortal)(_react.default.createElement(_StyledMobileSplitSlideLayer.StyledMobileSplitSlideLayer,{layer:"overlay",offset:offset,inert:0===offset?void 0:""},_react.default.createElement(_PanelContainer.PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)),host)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"MobileSplitView",{enumerable:!0,get:function(){return MobileSplitView}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_reactdom=require("react-dom"),_PanelContainer=require("../../PanelContainer"),_StyledMobileSplitSlideLayer=require("./StyledMobileSplitSlideLayer"),_useMobileSplitStack=require("./useMobileSplitStack"),_useMobileSplitView=require("./useMobileSplitView"),MobileSplitView=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let enabled=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),{isSplitViewActive}=(0,_useMobileSplitView.useMobileSplitView)(),{host,registerSplit}=(0,_useMobileSplitStack.useMobileSplitStack)();if((0,_react.useLayoutEffect)(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),!enabled||!host)return null;let offset=(0,_useMobileSplitView.splitViewOffsetFor)(isSplitViewActive);return(0,_reactdom.createPortal)(_react.default.createElement(_StyledMobileSplitSlideLayer.StyledMobileSplitSlideLayer,{layer:"overlay",offset:offset,inert:0===offset?void 0:""},_react.default.createElement(_PanelContainer.PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)),host)};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Split",{enumerable:!0,get:function(){return Split}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_useBreakpoints=require("../../../shared/useBreakpoints"),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_MobileSplitView=require("./MobileSplitView/MobileSplitView"),_SplitDocked=require("./SplitDocked"),Split=({children,"aria-label":ariaLabel,onVisibleChange,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isMobile}=(0,_useBreakpoints.useBreakpoints)(),{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return(0,_registry.useVisibleChange)(isVisible,onVisibleChange),isMobile?_react.default.createElement(_MobileSplitView.MobileSplitView,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):_react.default.createElement(_SplitDocked.SplitDocked,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Split",{enumerable:!0,get:function(){return Split}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_useBreakpoints=require("../../../shared/useBreakpoints"),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_MobileSplitView=require("./MobileSplitView/MobileSplitView"),_SplitDocked=require("./SplitDocked"),Split=({children,background="primary","aria-label":ariaLabel,onVisibleChange,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isMobile}=(0,_useBreakpoints.useBreakpoints)(),{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return(0,_registry.useVisibleChange)(isVisible,onVisibleChange),isMobile?_react.default.createElement(_MobileSplitView.MobileSplitView,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):_react.default.createElement(_SplitDocked.SplitDocked,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SplitDocked",{enumerable:!0,get:function(){return SplitDocked}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_PanelContainer=require("../PanelContainer"),SplitDocked=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return(0,_registry.useDeclarePanel)(_constants.Slot.splitview,{}),(0,_registry.useLayoutPortal)(_constants.Slot.splitview,isVisible?_react.default.createElement(_PanelContainer.PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SplitDocked",{enumerable:!0,get:function(){return SplitDocked}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_PanelContainer=require("../PanelContainer"),SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return(0,_registry.useDeclarePanel)(_constants.Slot.splitview,{}),(0,_registry.useLayoutPortal)(_constants.Slot.splitview,isVisible?_react.default.createElement(_PanelContainer.PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};

package/build/esm/components/Internal/Panel/Panel.d.ts

@@ -3,6 +3,8 @@ import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanel
 /** A size: plain number = pixels; unitless string = percentage ("10%"). */
 type Size = number | string;
 export type PanelItem = {
+    /** Leave a transparent spacing token before this panel's column. */
+    gapBefore?: boolean;
     /** Stable id — used by react-resizable-panels to track the panel and persist
      *  its size, and passed back to `onResize`/`onCollapse`. */
     id: string;

package/build/esm/components/Internal/Panel/Panel.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Group,Panel as ResizablePanel,Separator,useDefaultLayout}from"react-resizable-panels";let CustomGroup=styled(Group,{target:"e7m8rjd0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=styled("div",{target:"e7m8rjd1",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize;export const groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size";let canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);export function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=useDefaultLayout({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return React.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];"number"==typeof pct&&collapsible&&pct<.5&&onCollapse(id)}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index});return React.createElement(React.Fragment,{key:item.id},index>0&&React.createElement(Separator,{disabled:isSeparatorDisabled}),React.createElement(ResizablePanel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,onResize:size=>{!shouldSuppressLayoutCallback?.()&&(size.asPercentage<.5||onResize(item.id,size))},panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},React.createElement(StyledPanelChild,null,item.child)))}))}
+import React from"react";import styled from"@emotion/styled";import{Group,Panel as ResizablePanel,Separator,useDefaultLayout}from"react-resizable-panels";let CustomGroup=styled(Group,{target:"e1qc2hi70",label:"CustomGroup"})({height:"100%",width:"100%"}),CustomSeparator=styled(Separator,{target:"e1qc2hi71",label:"CustomSeparator"})(({theme})=>({flexShrink:0,width:theme.variables.size.spacing.xxs})),StyledPanelChild=styled("div",{target:"e1qc2hi72",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize;export const groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size";let canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);export function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=useDefaultLayout({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return React.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];"number"==typeof pct&&collapsible&&pct<.5&&onCollapse(id)}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index}),SeparatorComponent=item.gapBefore?CustomSeparator:Separator;return React.createElement(React.Fragment,{key:item.id},index>0&&React.createElement(SeparatorComponent,{disabled:isSeparatorDisabled}),React.createElement(ResizablePanel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,onResize:size=>{!shouldSuppressLayoutCallback?.()&&(size.asPercentage<.5||onResize(item.id,size))},panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},React.createElement(StyledPanelChild,null,item.child)))}))}

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

@@ -318,6 +318,9 @@ export type ContentProps = {
  * (default: the `xxl` breakpoint) and centred once past it.
  */
 export type SplitProps = ForwardedScrollProps & {
+    /** Panel surface. Defaults to primary.
+     *  TODO: Move background ownership to the client-rendered content. */
+    background?: "primary" | "transparent";
     /** Panel content in source order. `<Layout.SplitHeader />` /
      *  `<Layout.SplitFooter />` children stick to the edges; the rest scrolls. */
     children: React.ReactNode;
@@ -329,6 +332,8 @@ export type SplitProps = ForwardedScrollProps & {
 };
 /** Props of the internal mobile presentation of `Layout.Split`. */
 export type MobileSplitViewProps = ForwardedScrollProps & {
+    /** Surface forwarded from Layout.Split. */
+    background?: SplitProps["background"];
     children: React.ReactNode;
     /** Accessible name; when set, the view renders as a `region` landmark. */
     "aria-label"?: string;
@@ -460,6 +465,8 @@ export type SplitHeaderProps = PanelSlotHeaderProps & {
 };
 export type SplitFooterProps = PanelSlotFooterProps;
 export type PanelContainerProps = ForwardedScrollProps & {
+    /** Panel surface. Defaults to primary. */
+    background?: SplitProps["background"];
     /** Content in source order. Per-panel header/footer components stick to the
      *  edges; everything else scrolls. */
     children: React.ReactNode;

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

@@ -1 +1 @@
-import React from"react";import{LayoutPortal}from"../LayoutPortal";import{LayoutBottomBarStyles}from"./LayoutBottomBarStyles";import{useLayout}from"../useLayout";import{getBottomBarLayout}from"./getBottomBarLayout";import{StyledLayoutBottomBar}from"./StyledLayoutBottomBar";import{StyledLayoutBottomBarSection}from"./StyledLayoutBottomBarSection";export function LayoutBottomBar({children,"data-e2e-test-id":dataE2eTestId,...accessibleName}){let{leftPanel,content,splitview,rightPanel}=useLayout(),{sections,cells,rowCount,hasRightPanel}=getBottomBarLayout(children,{leftPanel,content,splitview,rightPanel});return sections.length?React.createElement(LayoutPortal,null,React.createElement(LayoutBottomBarStyles,{rowCount:rowCount,hasRightPanel:hasRightPanel}),React.createElement(StyledLayoutBottomBar,{...accessibleName,role:"group",hasRightPanel:hasRightPanel,cells:cells,"data-ds-id":"LayoutBottomBar","data-e2e-test-id":dataE2eTestId},sections.map(section=>React.createElement(StyledLayoutBottomBarSection,{key:section.region,"data-e2e-test-id":section["data-e2e-test-id"],columnIndex:section.columnIndex,rowIndex:section.rowIndex,fullWidth:"full"===section.placement},section.children)))):null}
+import React,{useLayoutEffect}from"react";import{useTheme}from"@emotion/react";import{LayoutPortal}from"../LayoutPortal";import{useLayoutVar}from"../LayoutCssVars";import{BOTTOM_BAR_HEIGHT_VAR,RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}from"../-constants";import{useLayout}from"../useLayout";import{getBottomBarLayout}from"./getBottomBarLayout";import{StyledLayoutBottomBar}from"./StyledLayoutBottomBar";import{StyledLayoutBottomBarSection}from"./StyledLayoutBottomBarSection";let useGlobalCssVariables=(rowCount,hasRightPanel)=>{let rowHeight=useTheme().variables.layout.bottomBar.contentHeight.default,bottomBarHeightCssVar=useLayoutVar(BOTTOM_BAR_HEIGHT_VAR),rightPanelBottomBarHeightCssVar=useLayoutVar(RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR);useLayoutEffect(()=>{if(!rowCount){bottomBarHeightCssVar.remove(),rightPanelBottomBarHeightCssVar.remove();return}bottomBarHeightCssVar.set(`calc(${rowCount} * ${rowHeight} + env(safe-area-inset-bottom))`),rightPanelBottomBarHeightCssVar.set(hasRightPanel?`var(${BOTTOM_BAR_HEIGHT_VAR})`:"0px")},[rowCount,rowHeight,hasRightPanel,bottomBarHeightCssVar,rightPanelBottomBarHeightCssVar])};export function LayoutBottomBar({children,"data-e2e-test-id":dataE2eTestId,...accessibleName}){let{leftPanel,content,splitview,rightPanel}=useLayout(),{sections,cells,rowCount,hasRightPanel}=getBottomBarLayout(children,{leftPanel,content,splitview,rightPanel});return(useGlobalCssVariables(rowCount,hasRightPanel),sections.length)?React.createElement(LayoutPortal,null,React.createElement(StyledLayoutBottomBar,{...accessibleName,role:"group",hasRightPanel:hasRightPanel,cells:cells,hasSplitColumns:"column"===content.presentation&&"column"===splitview.presentation,"data-ds-id":"LayoutBottomBar","data-e2e-test-id":dataE2eTestId},sections.map(section=>React.createElement(StyledLayoutBottomBarSection,{key:section.region,"data-e2e-test-id":section["data-e2e-test-id"],columnIndex:section.columnIndex,rowIndex:section.rowIndex,fullWidth:"full"===section.placement},section.children)))):null}

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBar.d.ts

@@ -1,6 +1,7 @@
 import type { BottomBarCell } from "./getBottomBarLayout";
 type StyledLayoutBottomBarProps = {
     hasRightPanel: boolean;
+    hasSplitColumns: boolean;
     cells: BottomBarCell[];
 };
 export declare const StyledLayoutBottomBar: import("@emotion/styled").StyledComponent<{

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

@@ -1 +1 @@
-import styled from"@emotion/styled";import{LAYOUT_REGIONS_READY_VAR,PAGE_BOTTOM_BAR_INSET,PANEL_WIDTH_VAR,PANEL_START_VAR}from"../-constants";let getRegionStart=region=>`var(${PANEL_START_VAR[region]}, 0px)`,getRegionWidth=region=>`var(${PANEL_WIDTH_VAR[region]}, 0px)`,getBottomBarCellWidth=cell=>{switch(cell.kind){case"leading-gap":return getRegionStart(cell.region);case"trailing-gap":return`max(0px, calc(100% - ${getRegionStart(cell.region)} - ${getRegionWidth(cell.region)}))`;case"column-gap":return`max(0px, calc(${getRegionStart(cell.region)} - ${getRegionStart(cell.previousRegion)} - ${getRegionWidth(cell.previousRegion)}))`;case"flexible-gap":return"minmax(0, 1fr)";default:{let{region,placement,fallback}=cell.section;if("remaining"===placement)return"max-content";if(cell.flexible)return"minmax(0, 1fr)";let columnWidth=cell.fillLeadingSpace?`calc(${getRegionWidth(region)} + ${getRegionStart(region)})`:getRegionWidth(region);return"remaining"===fallback?`minmax(max-content, ${columnWidth})`:columnWidth}}};export const StyledLayoutBottomBar=styled("div",{target:"ezpybqs0",label:"StyledLayoutBottomBar"})(({theme,hasRightPanel,cells})=>({display:"grid",gridTemplateColumns:cells.map(getBottomBarCellWidth).join(" ")||"minmax(0, 1fr)",gridAutoRows:theme.variables.layout.bottomBar.contentHeight.default,alignContent:"start",bottom:0,boxShadow:theme.values.elevation[2],boxSizing:"border-box",height:PAGE_BOTTOM_BAR_INSET,left:0,opacity:`var(${LAYOUT_REGIONS_READY_VAR}, 0)`,paddingBottom:"env(safe-area-inset-bottom)",position:"absolute",right:hasRightPanel?0:`var(${PANEL_WIDTH_VAR.rightPanel}, 0px)`,zIndex:theme.variables.zIndex.dropdown}));
+import styled from"@emotion/styled";import{getBottomBarOuterSpaceStyles}from"./getBottomBarOuterSpaceStyles";import{LAYOUT_REGIONS_READY_VAR,PAGE_BOTTOM_BAR_INSET,PANEL_WIDTH_VAR,PANEL_START_VAR}from"../-constants";let getRegionStart=region=>`var(${PANEL_START_VAR[region]}, 0px)`,getRegionWidth=region=>`var(${PANEL_WIDTH_VAR[region]}, 0px)`,getBottomBarCellWidth=cell=>{switch(cell.kind){case"leading-gap":return getRegionStart(cell.region);case"trailing-gap":return`max(0px, calc(100% - ${getRegionStart(cell.region)} - ${getRegionWidth(cell.region)}))`;case"column-gap":return`max(0px, calc(${getRegionStart(cell.region)} - ${getRegionStart(cell.previousRegion)} - ${getRegionWidth(cell.previousRegion)}))`;case"flexible-gap":return"minmax(0, 1fr)";default:{let{region,placement,fallback}=cell.section;if("remaining"===placement)return"max-content";if(cell.flexible)return"minmax(0, 1fr)";let columnWidth=cell.fillLeadingSpace?`calc(${getRegionWidth(region)} + ${getRegionStart(region)})`:getRegionWidth(region);return"remaining"===fallback?`minmax(max-content, ${columnWidth})`:columnWidth}}};export const StyledLayoutBottomBar=styled("div",{target:"e7hwo8w0",label:"StyledLayoutBottomBar"})(({theme,hasRightPanel,cells})=>({display:"grid",gridTemplateColumns:cells.map(getBottomBarCellWidth).join(" ")||"minmax(0, 1fr)",gridAutoRows:theme.variables.layout.bottomBar.contentHeight.default,alignContent:"start",bottom:0,boxShadow:theme.values.elevation[2],boxSizing:"border-box",height:PAGE_BOTTOM_BAR_INSET,left:0,opacity:`var(${LAYOUT_REGIONS_READY_VAR}, 0)`,paddingBottom:"env(safe-area-inset-bottom)",position:"absolute",right:hasRightPanel?0:`calc(${getRegionWidth("rightPanel")} + min(${getRegionWidth("rightPanel")}, ${theme.variables.size.spacing.xxs}))`,zIndex:theme.variables.zIndex.dropdown}),getBottomBarOuterSpaceStyles);

package/build/esm/components/Layout/BottomBar/getBottomBarOuterSpaceStyles.d.ts

@@ -0,0 +1,14 @@
+import type { CSSObject, Theme } from "@emotion/react";
+import type { BottomBarCell } from "./getBottomBarLayout";
+type BottomBarOuterSpaceStylesOptions = {
+    theme: Theme;
+    hasRightPanel: boolean;
+    hasSplitColumns: boolean;
+    cells: BottomBarCell[];
+};
+/**
+ * Fills the side margins left by the content/split max-width in the first row.
+ * Region gaps stay transparent; action sizing and placement are unaffected.
+ */
+export declare const getBottomBarOuterSpaceStyles: ({ theme, hasRightPanel, hasSplitColumns, cells, }: BottomBarOuterSpaceStylesOptions) => CSSObject;
+export {};

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

@@ -0,0 +1 @@
+import{PANEL_START_VAR,PANEL_WIDTH_VAR}from"../-constants";let getRegionEnd=region=>`calc(var(${PANEL_START_VAR[region]}, 0px) + var(${PANEL_WIDTH_VAR[region]}, 0px))`,hasColumnActions=(cells,region)=>cells.some(cell=>"section"===cell.kind&&cell.section.region===region&&"column"===cell.section.placement);export const getBottomBarOuterSpaceStyles=({theme,hasRightPanel,hasSplitColumns,cells})=>{let leftPanelEnd=getRegionEnd("leftPanel"),splitEnd=getRegionEnd("splitview"),rightPanelWidth=`var(${PANEL_WIDTH_VAR.rightPanel}, 0px)`,rightPanelGap=`min(${rightPanelWidth}, ${theme.variables.size.spacing.xxs})`,contentAreaEnd=hasRightPanel?`calc(100% - ${rightPanelWidth} - ${rightPanelGap})`:"100%";return{"&::before, &::after":{position:"absolute",top:0,height:theme.variables.layout.bottomBar.contentHeight.default,backgroundColor:theme.values.color.background.primary.default,pointerEvents:"none",zIndex:-1},"&::before":{content:hasSplitColumns&&hasColumnActions(cells,"content")?'""':"none",left:leftPanelEnd,width:`max(0px, calc(var(${PANEL_START_VAR.content}, 0px) - ${leftPanelEnd}))`},"&::after":{content:hasSplitColumns&&hasColumnActions(cells,"splitview")?'""':"none",left:splitEnd,width:`max(0px, calc(${contentAreaEnd} - ${splitEnd}))`}}};

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

@@ -1 +1 @@
-import React,{useCallback,useLayoutEffect,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,PANEL_START_VAR,LAYOUT_REGIONS_READY_VAR,Slot}from"./-constants";import{useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{LayoutBottomBar}from"./BottomBar/LayoutBottomBar";import{LayoutBottomBarItem}from"./BottomBar/LayoutBottomBarItem";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,root,mobileHost})=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),splitviewWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=useLayoutVar(PANEL_START_VAR.leftPanel),contentStartCssVar=useLayoutVar(PANEL_START_VAR.content),splitviewStartCssVar=useLayoutVar(PANEL_START_VAR.splitview),rightPanelStartCssVar=useLayoutVar(PANEL_START_VAR.rightPanel),regionsReadyCssVar=useLayoutVar(LAYOUT_REGIONS_READY_VAR),publishRegions=useCallback(()=>{if(!root)return;let targets=[[Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[Slot.content,contentWidthCssVar,contentStartCssVar],[Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===Slot.content||slot===Slot.splitview),width=isMobileRegion?rootRect.width:rect?.width??0,start=isMobileRegion||!rect?0:rect.left-rootRect.left;widthCssVar.set(`${width}px`),startCssVar.set(`${start}px`)}),regionsReadyCssVar.set("1")},[slotHosts,root,mobileHost,leftPanelWidthCssVar,contentWidthCssVar,splitviewWidthCssVar,rightPanelWidthCssVar,leftPanelStartCssVar,contentStartCssVar,splitviewStartCssVar,rightPanelStartCssVar,regionsReadyCssVar]);useLayoutEffect(()=>{publishRegions()},[publishRegions]),useLayoutEffect(()=>{if(!root||"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishRegions);return observer.observe(root),Object.values(slotHosts).forEach(host=>{host&&observer.observe(host)}),()=>observer.disconnect()},[root,slotHosts,publishRegions])},StyledLayout=styled("div",{target:"e161k5ur0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"e161k5ur1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"e161k5ur2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e161k5ur3",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:"e161k5ur4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e161k5ur5",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]),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!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||"sidebar"===layoutState.leftPanel.variant),[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}),[layoutRoot,setLayoutRoot]=useState(null),rootPortalTargets=useMemo(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});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,maxSize:panel?.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)&&declared[id]?.resizable!==!1&&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:rootPortalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{ref:setLayoutRoot,"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.BottomBar=LayoutBottomBar,Layout.BottomBarItem=LayoutBottomBarItem,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,useLayoutEffect,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,PANEL_START_VAR,LAYOUT_REGIONS_READY_VAR,Slot}from"./-constants";import{useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{LayoutBottomBar}from"./BottomBar/LayoutBottomBar";import{LayoutBottomBarItem}from"./BottomBar/LayoutBottomBarItem";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,root,mobileHost})=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),splitviewWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=useLayoutVar(PANEL_START_VAR.leftPanel),contentStartCssVar=useLayoutVar(PANEL_START_VAR.content),splitviewStartCssVar=useLayoutVar(PANEL_START_VAR.splitview),rightPanelStartCssVar=useLayoutVar(PANEL_START_VAR.rightPanel),regionsReadyCssVar=useLayoutVar(LAYOUT_REGIONS_READY_VAR),publishRegions=useCallback(()=>{if(!root)return;let targets=[[Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[Slot.content,contentWidthCssVar,contentStartCssVar],[Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===Slot.content||slot===Slot.splitview),width=isMobileRegion?rootRect.width:rect?.width??0,start=isMobileRegion||!rect?0:rect.left-rootRect.left;widthCssVar.set(`${width}px`),startCssVar.set(`${start}px`)}),regionsReadyCssVar.set("1")},[slotHosts,root,mobileHost,leftPanelWidthCssVar,contentWidthCssVar,splitviewWidthCssVar,rightPanelWidthCssVar,leftPanelStartCssVar,contentStartCssVar,splitviewStartCssVar,rightPanelStartCssVar,regionsReadyCssVar]);useLayoutEffect(()=>{publishRegions()},[publishRegions]),useLayoutEffect(()=>{if(!root||"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishRegions);return observer.observe(root),Object.values(slotHosts).forEach(host=>{host&&observer.observe(host)}),()=>observer.disconnect()},[root,slotHosts,publishRegions])},StyledLayout=styled("div",{target:"e1kh2kot0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"e1kh2kot1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"e1kh2kot2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1kh2kot3",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:"e1kh2kot4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e1kh2kot5",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]),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!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||"sidebar"===layoutState.leftPanel.variant),[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}),[layoutRoot,setLayoutRoot]=useState(null),rootPortalTargets=useMemo(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});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,gapBefore:slot===Slot.rightPanel,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize,maxSize:panel?.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)&&declared[id]?.resizable!==!1&&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:rootPortalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{ref:setLayoutRoot,"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.BottomBar=LayoutBottomBar,Layout.BottomBarItem=LayoutBottomBarItem,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/PanelContainer.d.ts

@@ -6,4 +6,4 @@ import type { PanelContainerProps } from "./-types";
  * (`Layout.LeftPanelHeader` etc.) render anywhere among `children` and stick
  * to the edges; everything else scrolls.
  */
-export declare function PanelContainer({ children, "aria-label": ariaLabel, scrollContainerRef, onScroll, showBorderLeft, showBorderRight, "data-e2e-test-id": dataE2eTestId, }: PanelContainerProps): React.ReactElement;
+export declare function PanelContainer({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, showBorderLeft, showBorderRight, "data-e2e-test-id": dataE2eTestId, }: PanelContainerProps): React.ReactElement;

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Sandwich}from"../Internal/Sandwich/Sandwich";import{Container}from"../Container/Container";let CustomContainer=styled(Container,{shouldForwardProp:prop=>"showBorderLeft"!==prop&&"showBorderRight"!==prop,target:"e1ypgo8f0",label:"CustomContainer"})(({theme,showBorderLeft,showBorderRight})=>({height:"100%",borderLeft:showBorderLeft?`1px solid ${theme.values.color.border.secondary.default}`:void 0,borderRight:showBorderRight?`1px solid ${theme.values.color.border.secondary.default}`:void 0}));export function PanelContainer({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,showBorderLeft=!1,showBorderRight=!1,"data-e2e-test-id":dataE2eTestId}){return React.createElement(CustomContainer,{elevation:0,squareCorners:!0,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,showBorderLeft:showBorderLeft,showBorderRight:showBorderRight,"data-ds-id":"PanelContainer","data-e2e-test-id":dataE2eTestId},React.createElement(Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},children))}
+import React from"react";import styled from"@emotion/styled";import{Sandwich}from"../Internal/Sandwich/Sandwich";import{Container}from"../Container/Container";let CustomContainer=styled(Container,{shouldForwardProp:prop=>"showBorderLeft"!==prop&&"showBorderRight"!==prop&&"background"!==prop,target:"eetiugt0",label:"CustomContainer"})(({theme,showBorderLeft,showBorderRight,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent",borderLeft:showBorderLeft?`1px solid ${theme.values.color.border.secondary.default}`:void 0,borderRight:showBorderRight?`1px solid ${theme.values.color.border.secondary.default}`:void 0}));export function PanelContainer({children,background="primary","aria-label":ariaLabel,scrollContainerRef,onScroll,showBorderLeft=!1,showBorderRight=!1,"data-e2e-test-id":dataE2eTestId}){return React.createElement(CustomContainer,{elevation:0,squareCorners:!0,background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,showBorderLeft:showBorderLeft,showBorderRight:showBorderRight,"data-ds-id":"PanelContainer","data-e2e-test-id":dataE2eTestId},React.createElement(Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},children))}

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

@@ -1 +1 @@
-import React,{useLayoutEffect}from"react";import{createPortal}from"react-dom";import{PanelContainer}from"../../PanelContainer";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{splitViewOffsetFor,useMobileSplitView,useMobileSplitViewEnabled}from"./useMobileSplitView";export const MobileSplitView=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let enabled=useMobileSplitViewEnabled(),{isSplitViewActive}=useMobileSplitView(),{host,registerSplit}=useMobileSplitStack();if(useLayoutEffect(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),!enabled||!host)return null;let offset=splitViewOffsetFor(isSplitViewActive);return createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"overlay",offset:offset,inert:0===offset?void 0:""},React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)),host)};
+import React,{useLayoutEffect}from"react";import{createPortal}from"react-dom";import{PanelContainer}from"../../PanelContainer";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{splitViewOffsetFor,useMobileSplitView,useMobileSplitViewEnabled}from"./useMobileSplitView";export const MobileSplitView=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let enabled=useMobileSplitViewEnabled(),{isSplitViewActive}=useMobileSplitView(),{host,registerSplit}=useMobileSplitStack();if(useLayoutEffect(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),!enabled||!host)return null;let offset=splitViewOffsetFor(isSplitViewActive);return createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"overlay",offset:offset,inert:0===offset?void 0:""},React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)),host)};

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

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

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

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};
+import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amboss/design-system",
-  "version": "4.9.4-canary.0",
+  "version": "4.9.4-canary.2",
   "description": "the design system for AMBOSS products",
   "author": "AMBOSS",
   "license": "ISC",

package/build/cjs/components/Layout/BottomBar/LayoutBottomBarStyles.d.ts

@@ -1,7 +0,0 @@
-import { type ReactElement } from "react";
-type LayoutBottomBarStylesProps = {
-    rowCount: number;
-    hasRightPanel: boolean;
-};
-export declare function LayoutBottomBarStyles({ rowCount, hasRightPanel, }: LayoutBottomBarStylesProps): ReactElement;
-export {};

package/build/cjs/components/Layout/BottomBar/LayoutBottomBarStyles.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutBottomBarStyles",{enumerable:!0,get:function(){return LayoutBottomBarStyles}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_react1=require("@emotion/react"),_constants=require("../-constants");function LayoutBottomBarStyles({rowCount,hasRightPanel}){return _react.default.createElement(_react1.Global,{styles:[theme=>({":root":{[_constants.BOTTOM_BAR_HEIGHT_VAR]:`calc(${rowCount} * ${theme.variables.layout.bottomBar.contentHeight.default} + env(safe-area-inset-bottom))`,[_constants.RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR]:hasRightPanel?`var(${_constants.BOTTOM_BAR_HEIGHT_VAR})`:"0px"}})]})}

package/build/esm/components/Layout/BottomBar/LayoutBottomBarStyles.d.ts

@@ -1,7 +0,0 @@
-import { type ReactElement } from "react";
-type LayoutBottomBarStylesProps = {
-    rowCount: number;
-    hasRightPanel: boolean;
-};
-export declare function LayoutBottomBarStyles({ rowCount, hasRightPanel, }: LayoutBottomBarStylesProps): ReactElement;
-export {};

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

@@ -1 +0,0 @@
-import React from"react";import{Global}from"@emotion/react";import{BOTTOM_BAR_HEIGHT_VAR,RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}from"../-constants";export function LayoutBottomBarStyles({rowCount,hasRightPanel}){return React.createElement(Global,{styles:[theme=>({":root":{[BOTTOM_BAR_HEIGHT_VAR]:`calc(${rowCount} * ${theme.variables.layout.bottomBar.contentHeight.default} + env(safe-area-inset-bottom))`,[RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR]:hasRightPanel?`var(${BOTTOM_BAR_HEIGHT_VAR})`:"0px"}})]})}