@amboss/design-system 4.3.2 → 4.3.4

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

@@ -1,6 +1,7 @@
 import type React from "react";
 import type { PanelKey, SidePanelKey, SlotKey } from "./-constants";
 import type { PanelHeaderTitle } from "../Internal/PanelHeader/PanelHeader";
+import type { SandwichSeparator } from "../Internal/Sandwich/-types";
 /**
  * Surface = compound components (`Layout.LeftPanel` / `Layout.RightPanel` /
  * `Layout.Content` / `Layout.Split`) + one control hook
@@ -65,7 +66,9 @@ export type RightPanelState = SidePanelStateBase & {
 };
 /** Either side panel, for code that handles both. */
 export type SidePanelState = LeftPanelState | RightPanelState;
-/** Actions every slot handle exposes, whatever its state shape. */
+/** Actions every slot handle exposes, whatever its state shape. No `resize`:
+ *  sizes are declarative (`defaultSize` on the panel, then drag), and the
+ *  content/split pair is CSS-split, so an imperative size wouldn't hold. */
 export type PanelHandleActions = {
     /** Whether the slot is currently shown. */
     isVisible: boolean;
@@ -73,8 +76,6 @@ export type PanelHandleActions = {
     show: () => void;
     /** Hide the slot. */
     hide: () => void;
-    /** Set the slot size (number = px, unitless string = %). */
-    resize: (size: Size) => void;
     /** Restore this slot to its config default (hides it for page panels). */
     reset: () => void;
 };
@@ -119,6 +120,12 @@ export type PanelConfig = {
     minSize?: Size;
     maxSize?: Size;
 };
+/** The split view carries no size of its own: it takes half of
+ *  `Layout.Content`'s column whenever it's open, capped by
+ *  `--ds-layout-split-max-width`. */
+export type SplitConfig = {
+    defaultVisible?: boolean;
+};
 /**
  * Master switch for the side/split panels.
  * - `false` (default) - panel markers declare nothing and render nothing;
@@ -134,10 +141,16 @@ export type LayoutPanelsMode = boolean | "mobile";
 export type LayoutConfig = {
     /** See {@link LayoutPanelsMode}. Default `false`. */
     enablePanels?: LayoutPanelsMode;
+    /** Slots whose markers may mount later, counted as declared for the
+     *  solo-vs-resizable decision - so a marker nested inside another panel
+     *  (which must mount after its ancestor) doesn't flip the mode and remount
+     *  everything once it appears. Renders nothing itself; `splitview` never
+     *  needs it, since it shares `content`'s column rather than a row slot. */
+    reservedSlots?: SlotKey[];
     leftPanel?: LeftPanelConfig;
     rightPanel?: RightPanelConfig;
     content?: PanelConfig;
-    splitview?: PanelConfig;
+    splitview?: SplitConfig;
 };
 /**
  * A layer over the store: `maxDockedPanels` sets columns per breakpoint (pinned
@@ -262,7 +275,14 @@ export type LayoutValue = {
     content: PanelHandle;
     splitview: PanelHandle;
 };
-export type SidePanelProps = {
+/** Forwarded to a panel's underlying scroll container (scroll restoration,
+ *  custom scroll handling). Shared by every panel-like slot backed by a
+ *  {@link PanelContainer} - `leftPanel`, `rightPanel`, `splitview`. */
+export type ForwardedScrollProps = {
+    scrollContainerRef?: React.Ref<HTMLDivElement>;
+    onScroll?: React.UIEventHandler<HTMLDivElement>;
+};
+export type SidePanelProps = ForwardedScrollProps & {
     /** Panel content in source order. Header/footer components
      *  (e.g. `<Layout.LeftPanelHeader />`) stick to the edges; the rest scrolls. */
     children: React.ReactNode;
@@ -277,8 +297,8 @@ export type SidePanelProps = {
      *  provider config's `resizable`, which defaults `false` for the left panel
      *  and `true` for the right. When `false`, the column is fixed at
      *  `defaultSize` - neighbours can't resize it either, though they stay
-     *  resizable against each other. Showing and hiding the panel still works.
-     *  No effect on the mobile drawer/sheet. */
+     *  resizable against each other. Showing and hiding the panel still works. No
+     *  effect on the mobile drawer/sheet. */
     resizable?: boolean;
     /** Called whenever the panel's visibility changes, with the new value. */
     onVisibleChange?: (visible: boolean) => void;
@@ -294,27 +314,27 @@ export type ContentProps = {
     minSize?: Size;
     maxSize?: Size;
 };
-export type SplitProps = {
+/**
+ * The split view has no sizing props - open, it takes half of
+ * `Layout.Content`'s column, the pair capped by `--ds-layout-split-max-width`
+ * (default: the `xxl` breakpoint) and centred once past it.
+ */
+export type SplitProps = ForwardedScrollProps & {
     /** Panel content in source order. `<Layout.SplitHeader />` /
      *  `<Layout.SplitFooter />` children stick to the edges; the rest scrolls. */
     children: React.ReactNode;
     /** Accessible name; when set, the panel renders as a `region` landmark. */
     "aria-label"?: string;
-    /** Number = pixels, unitless string = percent (e.g. `"30%"`). */
-    defaultSize?: Size;
-    minSize?: Size;
-    maxSize?: Size;
-    /** Desktop only: allow drag-resizing the column. Default `true`. When
-     *  `false`, the column is fixed at `defaultSize` - it has no drag handle of
-     *  its own and neighbours can't resize it, though they stay resizable against
-     *  each other. No effect on mobile (a full-area view). */
-    resizable?: boolean;
+    /** Called whenever the panel's visibility changes, with the new value. */
+    onVisibleChange?: (visible: boolean) => void;
+    "data-e2e-test-id"?: string;
 };
 /** Props of the internal mobile presentation of `Layout.Split`. */
-export type MobileSplitViewProps = {
+export type MobileSplitViewProps = ForwardedScrollProps & {
     children: React.ReactNode;
     /** Accessible name; when set, the view renders as a `region` landmark. */
     "aria-label"?: string;
+    "data-e2e-test-id"?: string;
 };
 export type LayoutProviderProps = {
     children: React.ReactNode;
@@ -394,18 +414,36 @@ export type RightPanelHeaderProps = PanelSlotHeaderProps & {
     slotProps: RightPanelHeaderSlotProps;
 };
 export type RightPanelFooterProps = PanelSlotFooterProps;
-export type SplitHeaderProps = PanelSlotHeaderProps;
+/**
+ * Title shown in the split view header, after `leftSlot`. Visual only — the
+ * panel's accessible name comes from `Layout.Split`'s `aria-label`.
+ */
+export type SplitHeaderTitle = PanelHeaderTitle;
+export type SplitHeaderSlotProps = {
+    /** Props for the built-in close button, rendered after `rightSlot`. Clicking
+     *  it hides the panel. Omit to render none - useful when a consumer
+     *  intercepts the close action itself via its own button and
+     *  `onVisibleChange`. */
+    closeButton?: {
+        "aria-label": string;
+    };
+};
+export type SplitHeaderProps = PanelSlotHeaderProps & {
+    /** Title block (icon + heading), rendered after `leftSlot`. */
+    title?: SplitHeaderTitle;
+    /** Props forwarded to internal sub-components. */
+    slotProps?: SplitHeaderSlotProps;
+    /** Bottom divider visibility. `"auto"` (default) shows it only once content
+     *  is scrolled under the header; `"always"` / `"never"` override that. */
+    showSeparator?: SandwichSeparator;
+};
 export type SplitFooterProps = PanelSlotFooterProps;
-export type PanelContainerProps = {
+export type PanelContainerProps = ForwardedScrollProps & {
     /** Content in source order. Per-panel header/footer components stick to the
      *  edges; everything else scrolls. */
     children: React.ReactNode;
     /** Accessible name; when set, the container renders as a `region` landmark. */
     "aria-label"?: string;
-    /** Forwarded to the scroll container element (scroll restoration etc.). */
-    scrollContainerRef?: React.Ref<HTMLDivElement>;
-    /** Forwarded to the scroll container's scroll handler. */
-    onScroll?: React.UIEventHandler<HTMLDivElement>;
     /** Draws a separator border on the panel's left edge. */
     showBorderLeft?: boolean;
     /** Draws a separator border on the panel's right edge. */
@@ -418,10 +456,6 @@ export type RightPanelProps = SidePanelProps & {
     /** Presentation the panel starts in on first load. Runtime state from then on
      *  (the header's toggle, `setVariant`). Default `"sidebar"`. */
     variant?: RightPanelVariant;
-    /** Forwarded to the scrollable body element (scroll restoration etc.). */
-    scrollContainerRef?: React.Ref<HTMLDivElement>;
-    /** Forwarded to the scrollable body's scroll handler. */
-    onScroll?: React.UIEventHandler<HTMLDivElement>;
     /** Called whenever the panel's render variant changes (docked ↔ float),
      *  with the new value. Not called on initial mount. */
     onVariantChange?: (variant: RightPanelVariant) => void;

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

@@ -1 +1 @@
-import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PANEL_ORDER,PANEL_WIDTH_VAR,Slot}from"./-constants";import{useLayoutPanelsEnabled,useLayoutPersistence}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext}from"./registry";import{useFloatablePortalTargets}from"./useFloatablePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel);useEffect(()=>{let targets=[[Slot.content,contentWidthCssVar],[Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=styled("div",{target:"elbydir0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledSoloHost=styled("div",{target:"elbydir1",label:"StyledSoloHost"})({position:"relative",height:"100%",width:"100%"}),StyledMobileSplitStackHost=styled("div",{target:"elbydir2",label:"StyledMobileSplitStackHost"})({position:"absolute",inset:0,overflow:"hidden",pointerEvents:"none"});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 persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=useLayoutPanelsEnabled(),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile)),[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}=useFloatablePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let declaredSlots=PANEL_ORDER.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],defaultSizeFor=slot=>{if(slot!==Slot.content)return declared[slot]?.defaultSize??layoutState[slot].size},panelItems=PANEL_ORDER.filter(slot=>declared[slot]&&(isShown(slot)||present[slot])).map(slot=>({id:slot,defaultSize:defaultSizeFor(slot),minSize:declared[slot]?.minSize??layoutState[slot].minSize,maxSize:declared[slot]?.maxSize??layoutState[slot].maxSize,collapsible:slot!==Slot.content&&(declared[slot]?.collapsible??!0),resizable:declared[slot]?.resizable??resizableFromState(layoutState[slot])})),soloHost=soloSlot&&isShown(soloSlot)?React.createElement(StyledSoloHost,{ref:slotHostRefs[soloSlot]}):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,hostFor:id=>slotHostRefs[id],onResize:(id,size)=>panelCallbacks[id].resize(size),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(LayoutPortalContext.Provider,{value:portalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{"data-ds-id":"Layout"},isSolo?soloHost:panelGroup,isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=LayoutProvider,Layout.LeftPanel=LeftPanel,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;
+import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PANEL_ORDER,PANEL_WIDTH_VAR,Slot}from"./-constants";import{useLayoutPanelsEnabled,useLayoutPersistence,useLayoutReservedSlots,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext}from"./registry";import{useFloatablePortalTargets}from"./useFloatablePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel);useEffect(()=>{let targets=[[Slot.content,contentWidthCssVar],[Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=styled("div",{target:"e1oaall10",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=styled("div",{target:"e1oaall11",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1oaall12",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:"100%",width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"e1oaall13",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e1oaall14",label:"StyledMobileSplitStackHost"})({position:"absolute",inset:0,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=(slot,declared,layoutState)=>{if(slot===Slot.content)return;let declaredSize=declared[slot]?.defaultSize;return void 0!==declaredSize?declaredSize:declared[slot]?.resizable!==!1?layoutState[slot].size:void 0},childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=useLayoutPanelsEnabled(),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile)),[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}=useFloatablePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),reservedSlots=useLayoutReservedSlots(),hostedSlotCount=rowSlots.filter(slot=>declared[slot]||reservedSlots.includes(slot)).length,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=>({id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor(slot,declared,layoutState),minSize:declared[slot]?.minSize??layoutState[slot].minSize,maxSize:declared[slot]?.maxSize??layoutState[slot].maxSize,collapsible:slot!==Slot.content&&(declared[slot]?.collapsible??!0),resizable:declared[slot]?.resizable??resizableFromState(layoutState[slot])})),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)=>dispatch({type:"resize",slot:id,size}),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(LayoutPortalContext.Provider,{value:portalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{"data-ds-id":"Layout"},hostedSlotCount<=1?soloHost:panelGroup,isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=LayoutProvider,Layout.LeftPanel=LeftPanel,Layout.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/LayoutProvider.js

@@ -1 +1 @@
-import React,{useMemo,useRef}from"react";import{LayoutPanelsEnabledProvider,LayoutPersistenceProvider,LayoutStoreProvider}from"./context";import{LayoutCssVars,LayoutCssVarStoreProvider}from"./LayoutCssVars";import{createLayoutCssVarStore}from"./cssVarStore";import{createInitialState}from"./reducer";import{createLayoutStore}from"./store";export function LayoutProvider({children,config,store,persistenceKey,storage}){let storeRef=useRef(null);null===storeRef.current&&(storeRef.current=store??createLayoutStore(createInitialState(config)));let cssVarStoreRef=useRef(null);null===cssVarStoreRef.current&&(cssVarStoreRef.current=createLayoutCssVarStore());let persistence=useMemo(()=>({persistenceKey,storage}),[persistenceKey,storage]);return React.createElement(LayoutStoreProvider,{value:storeRef.current},React.createElement(LayoutPanelsEnabledProvider,{value:config?.enablePanels??!1},React.createElement(LayoutPersistenceProvider,{value:persistence},React.createElement(LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},React.createElement(LayoutCssVars,null),children))))}
+import React,{useMemo,useRef}from"react";import{LayoutPanelsEnabledProvider,LayoutPersistenceProvider,LayoutReservedSlotsProvider,LayoutStoreProvider}from"./context";import{LayoutCssVars,LayoutCssVarStoreProvider}from"./LayoutCssVars";import{createLayoutCssVarStore}from"./cssVarStore";import{createInitialState}from"./reducer";import{createLayoutStore}from"./store";export function LayoutProvider({children,config,store,persistenceKey,storage}){let storeRef=useRef(null);null===storeRef.current&&(storeRef.current=store??createLayoutStore(createInitialState(config)));let cssVarStoreRef=useRef(null);null===cssVarStoreRef.current&&(cssVarStoreRef.current=createLayoutCssVarStore());let reservedSlotsRef=useRef(null);null===reservedSlotsRef.current&&(reservedSlotsRef.current=config?.reservedSlots??[]);let persistence=useMemo(()=>({persistenceKey,storage}),[persistenceKey,storage]);return React.createElement(LayoutStoreProvider,{value:storeRef.current},React.createElement(LayoutPanelsEnabledProvider,{value:config?.enablePanels??!1},React.createElement(LayoutReservedSlotsProvider,{value:reservedSlotsRef.current},React.createElement(LayoutPersistenceProvider,{value:persistence},React.createElement(LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},React.createElement(LayoutCssVars,null),children)))))}

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

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{useCanRenderPanel}from"../context";import{LeftPanelDocked}from"./LeftPanelDocked";import{LeftPanelDrawer}from"./LeftPanelDrawer";export const LeftPanel=({children,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel})=>{let{isVisible,hide,state}=useLayout()[Slot.leftPanel],canRender=useCanRenderPanel();useVisibleChange(isVisible,onVisibleChange);let isDrawer="drawer"===state.variant;return canRender?isDrawer?React.createElement(LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel},children):React.createElement(LeftPanelDocked,{"aria-label":ariaLabel,defaultSize:defaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable},children):null};
+import React from"react";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{useCanRenderPanel}from"../context";import{LeftPanelDocked}from"./LeftPanelDocked";import{LeftPanelDrawer}from"./LeftPanelDrawer";export const LeftPanel=({children,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=useLayout()[Slot.leftPanel],canRender=useCanRenderPanel();useVisibleChange(isVisible,onVisibleChange);let isDrawer="drawer"===state.variant;return canRender?isDrawer?React.createElement(LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(LeftPanelDocked,{"aria-label":ariaLabel,defaultSize:defaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):null};

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

@@ -1,6 +1,6 @@
 import React from "react";
-import type { Size } from "../-types";
-export type LeftPanelDockedProps = {
+import type { ForwardedScrollProps, Size } from "../-types";
+export type LeftPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
     "aria-label"?: string;
     defaultSize?: Size;

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

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useLayoutPortal}from"../registry";import{usePanelDockedSlide}from"../usePanelDockedSlide";import{PanelSlideBody}from"../PanelSlideBody";import{PanelContainer}from"../PanelContainer";export const LeftPanelDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable})=>{let{isMounted,pinnedWidth}=usePanelDockedSlide({slot:Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable});return useLayoutPortal(Slot.leftPanel,isMounted?React.createElement(PanelSlideBody,{anchor:"right",pinnedWidth:pinnedWidth},React.createElement(PanelContainer,{showBorderRight:!0,"aria-label":ariaLabel},children)):null)};
+import React from"react";import{Slot}from"../-constants";import{useLayoutPortal}from"../registry";import{usePanelDockedSlide}from"../usePanelDockedSlide";import{PanelSlideBody}from"../PanelSlideBody";import{PanelContainer}from"../PanelContainer";export const LeftPanelDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let{isMounted,pinnedWidth}=usePanelDockedSlide({slot:Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable});return useLayoutPortal(Slot.leftPanel,isMounted?React.createElement(PanelSlideBody,{anchor:"right",pinnedWidth:pinnedWidth},React.createElement(PanelContainer,{showBorderRight:!0,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)):null)};

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

@@ -1,5 +1,6 @@
 import React from "react";
-export type LeftPanelDrawerProps = {
+import type { ForwardedScrollProps } from "../-types";
+export type LeftPanelDrawerProps = ForwardedScrollProps & {
     children: React.ReactNode;
     isVisible: boolean;
     hide: () => void;

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Drawer}from"../../Internal/Drawer/Drawer";import{PanelContainer}from"../PanelContainer";let StyledLeftPanelBody=styled("div",{target:"e14wbnl40",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"});export const LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel})=>React.createElement(Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},React.createElement(StyledLeftPanelBody,null,React.createElement(PanelContainer,null,children)));
+import React from"react";import styled from"@emotion/styled";import{Drawer}from"../../Internal/Drawer/Drawer";import{PanelContainer}from"../PanelContainer";let StyledLeftPanelBody=styled("div",{target:"e1pciy730",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"});export const LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>React.createElement(Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},React.createElement(StyledLeftPanelBody,null,React.createElement(PanelContainer,{scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));

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

@@ -1,13 +1,11 @@
 import React from "react";
-import type { RightPanelVariant } from "../-types";
-export type RightPanelDockedProps = {
+import type { ForwardedScrollProps, RightPanelVariant } from "../-types";
+export type RightPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
     isVisible: boolean;
     /** Docked column vs. minimized floating window - only the border differs here. */
     variant: RightPanelVariant;
     "aria-label": string;
-    scrollContainerRef?: React.Ref<HTMLDivElement>;
-    onScroll?: React.UIEventHandler<HTMLDivElement>;
 };
 /**
  * Docked (desktop) right panel. Portals its content into the `rightPanel` slot's

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

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

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

@@ -1,11 +1,10 @@
 import React from "react";
-export type RightPanelSheetProps = {
+import type { ForwardedScrollProps } from "../-types";
+export type RightPanelSheetProps = ForwardedScrollProps & {
     children: React.ReactNode;
     isVisible: boolean;
     hide: () => void;
     "aria-label": string;
-    scrollContainerRef?: React.Ref<HTMLDivElement>;
-    onScroll?: React.UIEventHandler<HTMLDivElement>;
 };
 /**
  * Mobile right panel. Renders its content as a bottom {@link Sheet} instead of an

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{PanelContainer}from"../PanelContainer";import{Sheet,SHEET_MAX_HEIGHT}from"../../Sheet/Sheet";let StyledSheetPanelShell=styled("div",{target:"e1wbhy260",label:"StyledSheetPanelShell"})({height:SHEET_MAX_HEIGHT});export const RightPanelSheet=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>React.createElement(Sheet,{isVisible:isVisible,onClose:hide,hasBackdrop:!0,dismissOnOutsideClick:!0,disableInitialFocus:!0},React.createElement(StyledSheetPanelShell,null,React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));
+import React from"react";import styled from"@emotion/styled";import{PanelContainer}from"../PanelContainer";import{Sheet,SHEET_MAX_HEIGHT}from"../../Sheet/Sheet";let StyledSheetPanelShell=styled("div",{target:"eqso66w0",label:"StyledSheetPanelShell"})({height:SHEET_MAX_HEIGHT});export const RightPanelSheet=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>React.createElement(Sheet,{isVisible:isVisible,onClose:hide,hasBackdrop:!0,dismissOnOutsideClick:!0,disableInitialFocus:!0},React.createElement(StyledSheetPanelShell,null,React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));

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

@@ -1 +1 @@
-import React from"react";import{createPortal}from"react-dom";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{contentOffsetFor,useMobileSplitView}from"./useMobileSplitView";export const ContentSplitBase=({children})=>{let{isSplitViewActive}=useMobileSplitView(),{host}=useMobileSplitStack();return host?createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"base",offset:contentOffsetFor(isSplitViewActive)},children),host):null};
+import React from"react";import{createPortal}from"react-dom";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{contentOffsetFor,useMobileSplitView}from"./useMobileSplitView";export const ContentSplitBase=({children})=>{let{isSplitViewActive}=useMobileSplitView(),{host}=useMobileSplitStack();if(!host)return null;let offset=contentOffsetFor(isSplitViewActive);return createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"base",offset:offset,inert:0===offset?void 0:""},children),host)};

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})=>{let enabled=useMobileSplitViewEnabled(),{isSplitViewActive}=useMobileSplitView(),{host,registerSplit}=useMobileSplitStack();return(useLayoutEffect(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),enabled&&host)?createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"overlay",offset:splitViewOffsetFor(isSplitViewActive)},React.createElement(PanelContainer,{"aria-label":ariaLabel},children)),host):null};
+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)};

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

@@ -8,7 +8,9 @@ export type MobileSplitLayer = keyof typeof LAYER_Z_INDEX;
  * One layer of the two-view mobile split. Slides to `offset` - -1 (parked to the
  * left), 0 (in view), 1 (parked to the right) - so switching pushes the outgoing
  * view toward the side it rests on while the incoming one slides in from the
- * opposite edge, like a Drawer.
+ * opposite edge, like a Drawer. A parked layer is `inert`: besides blocking
+ * pointer events, this keeps its controls out of the tab order and hidden from
+ * assistive tech while it sits off-screen.
  */
 export declare const StyledMobileSplitSlideLayer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

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

@@ -1 +1 @@
-import styled from"@emotion/styled";let OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2};export const StyledMobileSplitSlideLayer=styled("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"e187cevn0",label:"StyledMobileSplitSlideLayer"})(({theme,offset,layer})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"absolute",inset:0,zIndex:LAYER_Z_INDEX[layer],transform:OFFSET_TRANSFORM[offset],transition:`transform ${duration} ${timingFunction}`,pointerEvents:0===offset?"auto":"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}});
+import styled from"@emotion/styled";let OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2};export const StyledMobileSplitSlideLayer=styled("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"et3u54n0",label:"StyledMobileSplitSlideLayer"})(({theme,offset,layer})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"absolute",inset:0,zIndex:LAYER_Z_INDEX[layer],transform:OFFSET_TRANSFORM[offset],transition:`transform ${duration} ${timingFunction}`,pointerEvents:0===offset?"auto":"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}});

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

@@ -1,10 +1,9 @@
 import React from "react";
 import type { SplitProps } from "../-types";
 /**
- * Split view panel. Picks its presentation by breakpoint: an in-flow resizable
- * column on desktop ({@link SplitDocked}) and a full-area {@link MobileSplitView}
- * that slides over `content` on mobile. Both are driven by the same state - the
- * `splitview` slot's visibility (`useLayout().splitview` / `useMobileSplitView`)
- * - so showing or hiding the split behaves identically on either breakpoint.
+ * Split view panel. Picks its presentation by breakpoint: an in-flow column
+ * beside `Layout.Content` on desktop ({@link SplitDocked}, always half its
+ * width) or a full-area {@link MobileSplitView} on mobile - both driven by the
+ * same `splitview` slot visibility, so open/close behaves identically either way.
  */
 export declare const Split: React.FC<SplitProps>;

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

@@ -1 +1 @@
-import React from"react";import{useBreakpoints}from"../../../shared/useBreakpoints";import{useCanRenderPanel}from"../context";import{MobileSplitView}from"./MobileSplitView/MobileSplitView";import{SplitDocked}from"./SplitDocked";export const Split=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,resizable})=>{let{isMobile}=useBreakpoints();return useCanRenderPanel()?isMobile?React.createElement(MobileSplitView,{"aria-label":ariaLabel},children):React.createElement(SplitDocked,{"aria-label":ariaLabel,defaultSize:defaultSize,minSize:minSize,maxSize:maxSize,resizable:resizable},children):null};
+import React from"react";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{useCanRenderPanel}from"../context";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],canRender=useCanRenderPanel();return(useVisibleChange(isVisible,onVisibleChange),canRender)?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):null};

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

@@ -2,7 +2,7 @@ import React from "react";
 import type { SplitProps } from "../-types";
 /**
  * Desktop split view. Declares the `splitview` slot and portals its content
- * while visible - an in-flow resizable column beside `content`.
+ * while visible - the right-hand half of `Layout.Content`'s column.
  * `Layout.SplitHeader` / `Layout.SplitFooter` children stick to the panel
  * edges; the remaining content scrolls.
  */

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

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,resizable})=>{let{isVisible}=useLayout()[Slot.splitview],canResize=!1!==resizable;return useDeclarePanel(Slot.splitview,{defaultSize,minSize,maxSize,collapsible:canResize,resizable:canResize}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{"aria-label":ariaLabel,showBorderLeft:!0},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,"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)};

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

@@ -1,7 +1,9 @@
 import React from "react";
 import type { SplitHeaderProps } from "../-types";
 /**
- * Optional sticky header for `Layout.Split` - place it among the panel's
- * children; it sticks to the top while the rest of the content scrolls.
+ * Optional sticky header for `Layout.Split` - sticks to the top while the rest
+ * scrolls. Renders `title` after `leftSlot` and, when `slotProps.closeButton`
+ * is supplied, a close button after `rightSlot` that hides the panel - shown
+ * on mobile too, since `MobileSplitView` has no other way to dismiss it.
  */
-export declare function SplitHeader({ leftSlot, rightSlot, "data-e2e-test-id": dataE2eTestId, }: SplitHeaderProps): React.ReactElement;
+export declare function SplitHeader({ leftSlot, rightSlot, title, slotProps, showSeparator, "data-e2e-test-id": dataE2eTestId, }: SplitHeaderProps): React.ReactElement;

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

@@ -1 +1 @@
-import React from"react";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";export function SplitHeader({leftSlot,rightSlot,"data-e2e-test-id":dataE2eTestId}){return React.createElement(Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},React.createElement(PanelHeader,{leftSlot:leftSlot,rightSlot:rightSlot}))}
+import React from"react";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{PictogramButton}from"../../PictogramButton/PictogramButton";export function SplitHeader({leftSlot,rightSlot,title,slotProps,showSeparator,"data-e2e-test-id":dataE2eTestId}){let{hide}=useLayout()[Slot.splitview],closeButtonSlotProps=slotProps?.closeButton;return React.createElement(Sandwich.Header,{showSeparator:showSeparator,"data-e2e-test-id":dataE2eTestId},React.createElement(PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:React.createElement(React.Fragment,null,rightSlot,closeButtonSlotProps&&React.createElement(PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":closeButtonSlotProps["aria-label"],onClick:hide}))}))}

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

@@ -1,4 +1,4 @@
-import type { LayoutPanelsMode, LayoutState, LayoutStorage, LayoutStore } from "./-types";
+import type { LayoutPanelsMode, LayoutState, LayoutStorage, LayoutStore, SlotKey } from "./-types";
 export declare const LayoutStoreProvider: React.Provider<LayoutStore>;
 /** Get the store from context, or throw if used outside the provider. */
 export declare function useLayoutStore(): LayoutStore;
@@ -15,6 +15,10 @@ export declare function useLayoutPanelsEnabled(): LayoutPanelsMode;
  *  breakpoint (the overlay presentations - drawer/sheet - which never mount
  *  the resizable row); `false` never allows. */
 export declare function useCanRenderPanel(): boolean;
+export declare const LayoutReservedSlotsProvider: React.Provider<("content" | "leftPanel" | "splitview" | "rightPanel")[]>;
+/** Slots the nearest `Layout.Provider` reserved for markers that mount later.
+ *  See `LayoutConfig.reservedSlots`. */
+export declare function useLayoutReservedSlots(): SlotKey[];
 /**
  * Persistence config for the layout namespace. Set on `Layout.Provider` (single
  * external surface) and read by the nested `<Layout>`. The Provider only

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

@@ -1 +1 @@
-import{createContext,useContext,useSyncExternalStore}from"react";import{useBreakpoints}from"../../shared/useBreakpoints";let LayoutStoreContext=createContext(null);export const LayoutStoreProvider=LayoutStoreContext.Provider;export function useLayoutStore(){let store=useContext(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}let LayoutPanelsEnabledContext=createContext(!1);export const LayoutPanelsEnabledProvider=LayoutPanelsEnabledContext.Provider;export function useLayoutPanelsEnabled(){return useContext(LayoutPanelsEnabledContext)}export function useCanRenderPanel(){let mode=useLayoutPanelsEnabled(),{isMobile}=useBreakpoints();return!0===mode||"mobile"===mode&&isMobile}let LayoutPersistenceContext=createContext({});export const LayoutPersistenceProvider=LayoutPersistenceContext.Provider;export function useLayoutPersistence(){return useContext(LayoutPersistenceContext)}export function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return useSyncExternalStore(store.subscribe,getSnapshot,getSnapshot)}
+import{createContext,useContext,useSyncExternalStore}from"react";import{useBreakpoints}from"../../shared/useBreakpoints";let LayoutStoreContext=createContext(null);export const LayoutStoreProvider=LayoutStoreContext.Provider;export function useLayoutStore(){let store=useContext(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}let LayoutPanelsEnabledContext=createContext(!1);export const LayoutPanelsEnabledProvider=LayoutPanelsEnabledContext.Provider;export function useLayoutPanelsEnabled(){return useContext(LayoutPanelsEnabledContext)}export function useCanRenderPanel(){let mode=useLayoutPanelsEnabled(),{isMobile}=useBreakpoints();return!0===mode||"mobile"===mode&&isMobile}let LayoutReservedSlotsContext=createContext([]);export const LayoutReservedSlotsProvider=LayoutReservedSlotsContext.Provider;export function useLayoutReservedSlots(){return useContext(LayoutReservedSlotsContext)}let LayoutPersistenceContext=createContext({});export const LayoutPersistenceProvider=LayoutPersistenceContext.Provider;export function useLayoutPersistence(){return useContext(LayoutPersistenceContext)}export function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return useSyncExternalStore(store.subscribe,getSnapshot,getSnapshot)}

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

@@ -1,4 +1,3 @@
-export { SUBNAV_OFFSET_VAR, PANEL_WIDTH_VAR } from "./-constants";
 export { Layout } from "./Layout";
 export { LayoutProvider } from "./LayoutProvider";
 export { useLayoutVar } from "./LayoutCssVars";

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

@@ -1 +1 @@
-export{SUBNAV_OFFSET_VAR,PANEL_WIDTH_VAR}from"./-constants";export{Layout}from"./Layout";export{LayoutProvider}from"./LayoutProvider";export{useLayoutVar}from"./LayoutCssVars";export{useLayout}from"./useLayout";export{DEFAULT_LAYOUT_RULES}from"./rules";export{useMobileSplitView}from"./Split/MobileSplitView/useMobileSplitView";export{useAutoScrollToBottom}from"./useAutoScrollToBottom";export{createLayoutStore}from"./store";export{createInitialState,layoutReducer}from"./reducer";export*from"./-types";
+export{Layout}from"./Layout";export{LayoutProvider}from"./LayoutProvider";export{useLayoutVar}from"./LayoutCssVars";export{useLayout}from"./useLayout";export{DEFAULT_LAYOUT_RULES}from"./rules";export{useMobileSplitView}from"./Split/MobileSplitView/useMobileSplitView";export{useAutoScrollToBottom}from"./useAutoScrollToBottom";export{createLayoutStore}from"./store";export{createInitialState,layoutReducer}from"./reducer";export*from"./-types";

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

@@ -1 +1 @@
-import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{PanelDeclarationsContext}from"./registry";let selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),resize:size=>dispatch({type:"resize",slot,size}),reset:()=>dispatch({type:"reset",slot})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(PanelDeclarationsContext),{dispatch}=store;return{state,leftPanel:{state:{...state.leftPanel,variant:state.leftPanel.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}
+import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{PanelDeclarationsContext}from"./registry";let selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),reset:()=>dispatch({type:"reset",slot})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(PanelDeclarationsContext),{dispatch}=store;return{state,leftPanel:{state:{...state.leftPanel,variant:state.leftPanel.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}

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

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

package/build/esm/components/Typography/Text/Text.js

@@ -1 +1 @@
-import React,{createContext,useMemo,forwardRef}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{useResponsiveStyles}from"../../../shared/mediaQueries";export const TextContext=createContext(null);export const getTextLineHeight=({theme,size})=>({xs:theme.variables.size.lineHeight.m,s:theme.variables.size.lineHeight.l,m:theme.variables.size.lineHeight.xl,l:theme.variables.size.lineHeight.xl})[size];export const getTextFontSize=({theme,size})=>theme.variables.size.font[size];let StyledText=styled("p",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop&&"transform"!==prop,target:"e1qum5j60",label:"StyledText"})(({theme,align,weight,size,transform,hyphens,overflowWrap,color,userSelect,variant})=>({fontFamily:theme.variables.fontFamily.lato,margin:0,textTransform:transform,textAlign:align,fontWeight:theme.variables.weight[weight],color:theme.values.color.text[color]?.default??theme.values.color.text.primary.default,...userSelect&&{userSelect},...variant&&{color:theme.values.color.text[variant].default,..."primary"===variant&&{color:theme.values.color.text.accent.default},..."secondary"===variant&&{color:theme.values.color.text.primary.default}},fontSize:getTextFontSize({theme,size}),lineHeight:getTextLineHeight({theme,size}),...useResponsiveStyles({hyphens:[hyphens,{none:"none",auto:"auto",manual:"manual"}]}),overflowWrap}));export const Text=forwardRef(({size="m",weight="normal",transform="none",as="p",color:colorProp="primary",align="left",hyphens="none",overflowWrap="normal",variant,userSelect,"data-e2e-test-id":dataE2eTestId,children,...rest},ref)=>{let color=colorProp;variant&&(color="primary"===variant?"accent":"secondary"===variant?"primary":variant);let contextValues=useMemo(()=>({color,size,weight}),[color,size,weight]);return React.createElement(StyledText,{ref:ref,variant:variant,size:size,weight:weight,transform:transform,as:as,color:color,align:align,hyphens:hyphens,overflowWrap:overflowWrap,userSelect:userSelect,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Text",...rest},React.createElement(TextContext.Provider,{value:contextValues},children))});
+import React,{createContext,useMemo,forwardRef}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{useResponsiveStyles}from"../../../shared/mediaQueries";export const TextContext=createContext(null);export const getTextLineHeight=({theme,size})=>({xxs:theme.variables.size.lineHeight.m,xs:theme.variables.size.lineHeight.m,s:theme.variables.size.lineHeight.l,m:theme.variables.size.lineHeight.xl,l:theme.variables.size.lineHeight.xl})[size];export const getTextFontSize=({theme,size})=>theme.variables.size.font[size];let StyledText=styled("p",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop&&"transform"!==prop,target:"erh4t6l0",label:"StyledText"})(({theme,align,weight,size,transform,hyphens,overflowWrap,color,userSelect,variant})=>({fontFamily:theme.variables.fontFamily.lato,margin:0,textTransform:transform,textAlign:align,fontWeight:theme.variables.weight[weight],color:theme.values.color.text[color]?.default??theme.values.color.text.primary.default,...userSelect&&{userSelect},...variant&&{color:theme.values.color.text[variant].default,..."primary"===variant&&{color:theme.values.color.text.accent.default},..."secondary"===variant&&{color:theme.values.color.text.primary.default}},fontSize:getTextFontSize({theme,size}),lineHeight:getTextLineHeight({theme,size}),...useResponsiveStyles({hyphens:[hyphens,{none:"none",auto:"auto",manual:"manual"}]}),overflowWrap}));export const Text=forwardRef(({size="m",weight="normal",transform="none",as="p",color:colorProp="primary",align="left",hyphens="none",overflowWrap="normal",variant,userSelect,"data-e2e-test-id":dataE2eTestId,children,...rest},ref)=>{let color=colorProp;variant&&(color="primary"===variant?"accent":"secondary"===variant?"primary":variant);let contextValues=useMemo(()=>({color,size,weight}),[color,size,weight]);return React.createElement(StyledText,{ref:ref,variant:variant,size:size,weight:weight,transform:transform,as:as,color:color,align:align,hyphens:hyphens,overflowWrap:overflowWrap,userSelect:userSelect,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Text",...rest},React.createElement(TextContext.Provider,{value:contextValues},children))});

package/build/esm/types/index.d.ts

@@ -15,9 +15,9 @@ export type { ForbiddenProp, MissingProps, WithoutMissingBranch, } from "./type-
  * union with a standalone "no accessible name" branch.
  */
 export declare function asValidProps<T>(props: T): WithoutMissingBranch<T>;
-export declare const LinkTextSizeRuntype: Union<[Literal<"xs">, Literal<"s">, Literal<"m">, Literal<"l">]>;
+export declare const LinkTextSizeRuntype: Union<[Literal<"xxs">, Literal<"xs">, Literal<"s">, Literal<"m">, Literal<"l">]>;
 export type LinkTextSize = Static<typeof LinkTextSizeRuntype>;
-export declare const TextSizeRuntype: Union<[Literal<"xs">, Literal<"s">, Literal<"m">, Literal<"l">]>;
+export declare const TextSizeRuntype: Union<[Literal<"xxs">, Literal<"xs">, Literal<"s">, Literal<"m">, Literal<"l">]>;
 export type TextSize = Static<typeof TextSizeRuntype>;
 export declare const InputTextSizeRuntype: Union<[Literal<"s">, Literal<"m">]>;
 export type InputTextSize = Static<typeof InputTextSizeRuntype>;

package/build/esm/types/index.js

@@ -1 +1 @@
-import{Literal,Union}from"runtypes";export function asValidProps(props){return props}export const LinkTextSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const TextSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const InputTextSizeRuntype=Union(Literal("s"),Literal("m"));export const BaseTagSizeRuntype=Union(Literal("s"),Literal("m"));export const BorderRadiusRuntype=Union(Literal("none"),Literal("xs"),Literal("s"),Literal("m"));export const TextAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"));export const HorizontalAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"),Literal("spaceBetween"));export const VerticalAlignmentRuntype=Union(Literal("top"),Literal("bottom"),Literal("center"),Literal("stretch"));export const StackVerticalAlignmentRuntype=Union(Literal("top"),Literal("bottom"),Literal("center"),Literal("spaceBetween"));export const LightboxVerticalAlignmentRuntype=Union(Literal("top"),Literal("center"));export const StackHorizontalAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"),Literal("stretch"));export const SpaceSizesRuntype=Union(Literal("zero"),Literal("xxxs"),Literal("xxs"),Literal("xs"),Literal("s"),Literal("m"),Literal("l"),Literal("xl"),Literal("xxl"));export const ColumsSizesRuntype=Union(Literal(1),Literal(2),Literal(3),Literal(4),Literal(5),Literal(6),Literal(7),Literal(8),Literal(9),Literal(10),Literal(11),Literal(12),Literal("auto"),Literal("narrow"),Literal("fill"));export const ColumnAlignmentRunType=Union(Literal("auto"),Literal("start"),Literal("center"),Literal("end"));export const OrderRuntype=Union(Literal("first"),Literal("last"),Literal("unset"));export const BaseVariationsRuntype=Union(Literal("primary"),Literal("secondary"),Literal("tertiary"));export const BaseColorsRuntype=Union(BaseVariationsRuntype,Literal("accent"),Literal("onAccent"));export const AIButtonVariationsRuntype=Union(BaseVariationsRuntype,Literal("gradient"));export const PictogramVariationsRuntype=Union(Literal("secondary"),Literal("tertiary"),Literal("quaternary"));export const TextColorsRuntype=Union(BaseColorsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"));export const TextVariationsRuntype=Union(BaseVariationsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"));export const TextWeightRuntype=Union(Literal("normal"),Literal("bold"),Literal("black"),Literal("inherit"));export const IconsColorsRuntime=Union(BaseColorsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"),Literal("inherit"),Literal("brand"),Literal("quaternary"),Literal("ai"));export const IconsVariationsRuntype=Union(BaseVariationsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"),Literal("inherit"),Literal("brand"));export const IconSizesRuntype=Union(Literal("s"),Literal("m"),Literal("l"));export const CalloutVariationsRuntype=Union(Literal("info"),Literal("success"),Literal("error"),Literal("warning"),Literal("neutral"),Literal("ai"));export const LinkVariationsRuntype=Union(BaseVariationsRuntype);export const LinkColorsRuntype=Union(BaseColorsRuntype);export const ButtonSizeRuntype=Union(Literal("s"),Literal("m"),Literal("l"));export const RoundButtonSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"));export const DropdownMenuSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"));export const HyphensRuntype=Union(Literal("auto"),Literal("none"),Literal("manual"));export const OverflowWrapRuntype=Union(Literal("normal"),Literal("break-word"));export const ToggleSizeRuntype=Union(Literal("s"),Literal("m"));export const ListSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const PromptInputSizesRuntype=Union(Literal("s"),Literal("m"));export const MediaItemSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"),Literal("l"),Literal("xl"));
+import{Literal,Union}from"runtypes";export function asValidProps(props){return props}export const LinkTextSizeRuntype=Union(Literal("xxs"),Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const TextSizeRuntype=Union(Literal("xxs"),Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const InputTextSizeRuntype=Union(Literal("s"),Literal("m"));export const BaseTagSizeRuntype=Union(Literal("s"),Literal("m"));export const BorderRadiusRuntype=Union(Literal("none"),Literal("xs"),Literal("s"),Literal("m"));export const TextAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"));export const HorizontalAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"),Literal("spaceBetween"));export const VerticalAlignmentRuntype=Union(Literal("top"),Literal("bottom"),Literal("center"),Literal("stretch"));export const StackVerticalAlignmentRuntype=Union(Literal("top"),Literal("bottom"),Literal("center"),Literal("spaceBetween"));export const LightboxVerticalAlignmentRuntype=Union(Literal("top"),Literal("center"));export const StackHorizontalAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"),Literal("stretch"));export const SpaceSizesRuntype=Union(Literal("zero"),Literal("xxxs"),Literal("xxs"),Literal("xs"),Literal("s"),Literal("m"),Literal("l"),Literal("xl"),Literal("xxl"));export const ColumsSizesRuntype=Union(Literal(1),Literal(2),Literal(3),Literal(4),Literal(5),Literal(6),Literal(7),Literal(8),Literal(9),Literal(10),Literal(11),Literal(12),Literal("auto"),Literal("narrow"),Literal("fill"));export const ColumnAlignmentRunType=Union(Literal("auto"),Literal("start"),Literal("center"),Literal("end"));export const OrderRuntype=Union(Literal("first"),Literal("last"),Literal("unset"));export const BaseVariationsRuntype=Union(Literal("primary"),Literal("secondary"),Literal("tertiary"));export const BaseColorsRuntype=Union(BaseVariationsRuntype,Literal("accent"),Literal("onAccent"));export const AIButtonVariationsRuntype=Union(BaseVariationsRuntype,Literal("gradient"));export const PictogramVariationsRuntype=Union(Literal("secondary"),Literal("tertiary"),Literal("quaternary"));export const TextColorsRuntype=Union(BaseColorsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"));export const TextVariationsRuntype=Union(BaseVariationsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"));export const TextWeightRuntype=Union(Literal("normal"),Literal("bold"),Literal("black"),Literal("inherit"));export const IconsColorsRuntime=Union(BaseColorsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"),Literal("inherit"),Literal("brand"),Literal("quaternary"),Literal("ai"));export const IconsVariationsRuntype=Union(BaseVariationsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"),Literal("inherit"),Literal("brand"));export const IconSizesRuntype=Union(Literal("s"),Literal("m"),Literal("l"));export const CalloutVariationsRuntype=Union(Literal("info"),Literal("success"),Literal("error"),Literal("warning"),Literal("neutral"),Literal("ai"));export const LinkVariationsRuntype=Union(BaseVariationsRuntype);export const LinkColorsRuntype=Union(BaseColorsRuntype);export const ButtonSizeRuntype=Union(Literal("s"),Literal("m"),Literal("l"));export const RoundButtonSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"));export const DropdownMenuSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"));export const HyphensRuntype=Union(Literal("auto"),Literal("none"),Literal("manual"));export const OverflowWrapRuntype=Union(Literal("normal"),Literal("break-word"));export const ToggleSizeRuntype=Union(Literal("s"),Literal("m"));export const ListSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const PromptInputSizesRuntype=Union(Literal("s"),Literal("m"));export const MediaItemSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"),Literal("l"),Literal("xl"));

package/build/esm/web-tokens/layout-vars.d.ts

@@ -1,6 +1,7 @@
 export declare const LAYOUT_VARS: {
     readonly contentWidth: "--ds-layout-content-width";
     readonly rightPanelWidth: "--ds-layout-rightPanel-width";
+    readonly splitMaxWidth: "--ds-layout-split-max-width";
     readonly subnavOffset: "--ds-layout-subnav-offset";
     readonly floatWidth: "--ds-layout-float-width";
     readonly floatHeight: "--ds-layout-float-height";

package/build/esm/web-tokens/layout-vars.js

@@ -1 +1 @@
-export const LAYOUT_VARS={contentWidth:"--ds-layout-content-width",rightPanelWidth:"--ds-layout-rightPanel-width",subnavOffset:"--ds-layout-subnav-offset",floatWidth:"--ds-layout-float-width",floatHeight:"--ds-layout-float-height"};
+export const LAYOUT_VARS={contentWidth:"--ds-layout-content-width",rightPanelWidth:"--ds-layout-rightPanel-width",splitMaxWidth:"--ds-layout-split-max-width",subnavOffset:"--ds-layout-subnav-offset",floatWidth:"--ds-layout-float-width",floatHeight:"--ds-layout-float-height"};

package/build/esm/web-tokens/layout-vars.ts

@@ -4,6 +4,7 @@
 export const LAYOUT_VARS = {
   contentWidth: "--ds-layout-content-width",
   rightPanelWidth: "--ds-layout-rightPanel-width",
+  splitMaxWidth: "--ds-layout-split-max-width",
   subnavOffset: "--ds-layout-subnav-offset",
   floatWidth: "--ds-layout-float-width",
   floatHeight: "--ds-layout-float-height",

package/build/esm/web-tokens/visualConfig.d.ts

@@ -212,6 +212,11 @@ type Variables = {
                 "default": string;
             };
         };
+        "split": {
+            "maxWidth": {
+                "default": string;
+            };
+        };
         "subnav": {
             "offset": {
                 "default": string;