@amboss/design-system 4.7.1 → 4.8.1-canary.0

package/build/cjs/components/Content/ContentBrandName/ContentBrandName.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import type { ForbiddenProp } from "../../../types/type-helpers";
+export type ContentBrandNameProps = {
+    /** The brand name as marked in the content, e.g. "Aspirin®", optionally wrapping a link */
+    children: React.ReactNode;
+    "data-e2e-test-id"?: string;
+} & ({
+    /**
+     * The user may not see brand names (HWG). The name is blurred, cannot be
+     * selected or focused, ignores pointer events and is hidden from
+     * assistive technology; the root keeps pointer events so a consumer can
+     * attach an explanatory popover. Copied text is not masked here; the
+     * consumer owns clipboard masking.
+     */
+    isCensored: true;
+    /**
+     * Localised text announced in place of the hidden name, e.g. "brand name
+     * hidden". Required while censored: the blur only conveys "withheld"
+     * visually, and hiding content from assistive technology requires an
+     * equivalent to be exposed (WCAG 1.3.1, WAI-ARIA aria-hidden rules).
+     */
+    censoredLabel: string;
+} | {
+    isCensored: false;
+    censoredLabel?: ForbiddenProp<"Fix: `censoredLabel` applies only when `isCensored` is true.">;
+});
+/**
+ * A drug brand name inside content text, censored for users without a
+ * confirmed healthcare profession. The ref and any extra props land on the
+ * root span for anchoring and measuring; the root is not interactive, so a
+ * keyboard-operable explanation needs a focusable trigger from the consumer.
+ */
+export declare const ContentBrandName: React.ForwardRefExoticComponent<ContentBrandNameProps & React.RefAttributes<HTMLSpanElement>>;

package/build/cjs/components/Content/ContentBrandName/ContentBrandName.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentBrandName",{enumerable:!0,get:function(){return ContentBrandName}});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")),_ScreenReaderText=require("../../Utilities/ScreenReaderText/ScreenReaderText"),ORIGINAL_TABINDEX_ATTRIBUTE="data-ds-censored-tabindex",removeFromTabOrder=element=>{element.hasAttribute(ORIGINAL_TABINDEX_ATTRIBUTE)||(element.setAttribute(ORIGINAL_TABINDEX_ATTRIBUTE,element.getAttribute("tabindex")??""),element.setAttribute("tabindex","-1"))},restoreTabOrder=root=>{root.querySelectorAll(`[${ORIGINAL_TABINDEX_ATTRIBUTE}]`).forEach(element=>{let originalTabIndex=element.getAttribute(ORIGINAL_TABINDEX_ATTRIBUTE);originalTabIndex?element.setAttribute("tabindex",originalTabIndex):element.removeAttribute("tabindex"),element.removeAttribute(ORIGINAL_TABINDEX_ATTRIBUTE)})},StyledBrandName=(0,_styled.default)("span",{target:"e1m4wjkh0",label:"StyledBrandName"})(({isCensored})=>({...isCensored&&{display:"inline-block",userSelect:"none"}})),StyledBrandNameText=(0,_styled.default)("span",{target:"e1m4wjkh1",label:"StyledBrandNameText"})(({isCensored})=>({...isCensored&&{filter:"blur(5px)",pointerEvents:"none"}})),ContentBrandName=_react.default.forwardRef(({children,isCensored,censoredLabel,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let blockDescendantFocus=(0,_react.useCallback)(node=>{node&&(node.toggleAttribute("inert",isCensored),"boolean"!=typeof node.inert&&(isCensored?node.querySelectorAll("a[href], button, input, select, textarea, [tabindex]").forEach(removeFromTabOrder):restoreTabOrder(node)))},[isCensored]);return _react.default.createElement(StyledBrandName,{ref:ref,"data-ds-id":"ContentBrandName","data-e2e-test-id":dataE2eTestId,isCensored:isCensored,...rest},_react.default.createElement(StyledBrandNameText,{ref:blockDescendantFocus,isCensored:isCensored,"aria-hidden":isCensored||void 0,onFocusCapture:isCensored?event=>{event.target instanceof HTMLElement&&(removeFromTabOrder(event.target),event.target.blur())}:void 0},children),isCensored&&_react.default.createElement(_ScreenReaderText.ScreenReaderText,{as:"span"},censoredLabel))});

package/build/cjs/components/Content/ContentCaseText/ContentCaseText.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type ContentCaseTextProps = {
+    /** Already-rendered case description: ContentHeading, ContentText, ContentList */
+    children: React.ReactNode;
+    /** Forwarded so the block can serve as a `styled()` target */
+    className?: string;
+    "data-e2e-test-id"?: string;
+};
+export declare function ContentCaseText({ children, className, "data-e2e-test-id": dataE2eTestId, }: ContentCaseTextProps): React.ReactElement;

package/build/cjs/components/Content/ContentCaseText/ContentCaseText.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentCaseText",{enumerable:!0,get:function(){return ContentCaseText}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),StyledCaseText=(0,/*#__PURE__*/_interop_require_default._(require("@emotion/styled")).default)("div",{target:"eo3vtj70",label:"StyledCaseText"})(({theme})=>({position:"relative",padding:theme.variables.size.spacing.m,borderRadius:theme.variables.size.borderRadius.s,backgroundColor:theme.values.color.background.secondary.default,'& > [data-ds-id="ContentHeading"]:first-child':{marginTop:0},"& > :last-child":{marginBottom:0}}));function ContentCaseText({children,className,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(StyledCaseText,{className:className,"data-ds-id":"ContentCaseText","data-e2e-test-id":dataE2eTestId},children)}

package/build/cjs/components/Content/ContentCitation/ContentCitation.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import type { TextProps } from "../../Typography/Text";
+import type { ContentColor } from "../types";
+import { ContentCitationLink } from "./ContentCitationLink";
+import { ContentCitationLookupLink } from "./ContentCitationLookupLink";
+import { ContentCitationTitle } from "./ContentCitationTitle";
+export type ContentCitationProps = {
+    /** The composed citation: text, `ContentCitation.Title`, `ContentCitation.Link`, `ContentCitation.LookupLink` */
+    children: React.ReactNode;
+    /** Text color, as on ContentText */
+    color?: ContentColor | TextProps["color"];
+    /** Provides additional line-height, as on ContentText */
+    isSpacedOut?: boolean;
+    as?: TextProps["as"];
+    "data-e2e-test-id"?: string;
+};
+/**
+ * One bibliographic citation as content text. The consumer composes the
+ * wording, punctuation and order; the parts provide the visual treatment.
+ */
+export declare function ContentCitation({ children, color, isSpacedOut, as, "data-e2e-test-id": dataE2eTestId, }: ContentCitationProps): React.ReactElement;
+export declare namespace ContentCitation {
+    var Title: typeof ContentCitationTitle;
+    var Link: typeof ContentCitationLink;
+    var LookupLink: typeof ContentCitationLookupLink;
+}

package/build/cjs/components/Content/ContentCitation/ContentCitation.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentCitation",{enumerable:!0,get:function(){return ContentCitation}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_ContentText=require("../ContentText/ContentText"),_ContentCitationLink=require("./ContentCitationLink"),_ContentCitationLookupLink=require("./ContentCitationLookupLink");function ContentCitation({children,color,isSpacedOut=!1,as,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_ContentText.ContentText,{"data-ds-id":"ContentCitation","data-e2e-test-id":dataE2eTestId,color:color,isSpacedOut:isSpacedOut,as:as},children)}ContentCitation.Title=require("./ContentCitationTitle").ContentCitationTitle,ContentCitation.Link=_ContentCitationLink.ContentCitationLink,ContentCitation.LookupLink=_ContentCitationLookupLink.ContentCitationLookupLink;

package/build/cjs/components/Content/ContentCitation/ContentCitationLink.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export type ContentCitationLinkProps = {
+    /** Link text: the work title, DOI or URL */
+    children: React.ReactNode;
+    href: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    /**
+     * Visually hidden, localised cue that the link opens in a new tab, e.g.
+     * "(opens in a new tab)". Appended to the link's accessible name.
+     */
+    newTabLabel?: string;
+    "data-e2e-test-id"?: string;
+};
+export declare const CITATION_LINK_ICON_BASELINE_OFFSET = "-1px";
+/** A link inside a citation (title, DOI, URL), opening in a new tab. */
+export declare function ContentCitationLink({ children, href, onClick, newTabLabel, "data-e2e-test-id": dataE2eTestId, }: ContentCitationLinkProps): React.ReactElement;

package/build/cjs/components/Content/ContentCitation/ContentCitationLink.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get CITATION_LINK_ICON_BASELINE_OFFSET(){return CITATION_LINK_ICON_BASELINE_OFFSET},get ContentCitationLink(){return ContentCitationLink}};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")),_ContentLink=require("../ContentLink/ContentLink"),_Icon=require("../../Icon/Icon"),_ScreenReaderText=require("../../Utilities/ScreenReaderText/ScreenReaderText"),CITATION_LINK_ICON_BASELINE_OFFSET="-1px",StyledLinkText=(0,_styled.default)("span",{target:"e18a1ij30",label:"StyledLinkText"})({overflowWrap:["break-word","anywhere"]}),StyledCitationLink=(0,_styled.default)("span",{target:"e18a1ij31",label:"StyledCitationLink"})(({theme})=>({marginRight:theme.variables.size.spacing.xs,"& svg":{marginLeft:theme.variables.size.spacing.xxs,marginBottom:CITATION_LINK_ICON_BASELINE_OFFSET}}));function ContentCitationLink({children,href,onClick,newTabLabel,"data-e2e-test-id":dataE2eTestId}){let linkRef=(0,_react.useRef)(null);return _react.default.createElement(StyledCitationLink,{ref:linkRef,"data-ds-id":"ContentCitationLink"},_react.default.createElement(_ContentLink.ContentLink,{href:href,target:"_blank",rel:"noopener noreferrer",color:"primary",onClick:onClick,"data-e2e-test-id":dataE2eTestId},_react.default.createElement(StyledLinkText,null,children),newTabLabel&&_react.default.createElement(_ScreenReaderText.ScreenReaderText,{as:"span"}," ",newTabLabel),_react.default.createElement(_Icon.Icon,{inline:!0,name:"external-link",size:"s",color:"tertiary",hoverable:linkRef})))}

package/build/cjs/components/Content/ContentCitation/ContentCitationLookupLink.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export type ContentCitationLookupLinkProps = {
+    /** Link text, e.g. "Open in Read by QxMD" */
+    children: React.ReactNode;
+    href: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    /**
+     * Visually hidden, localised cue that the link opens in a new tab, e.g.
+     * "(opens in a new tab)". Appended to the link's accessible name.
+     */
+    newTabLabel?: string;
+    "data-e2e-test-id"?: string;
+};
+/** Accent-coloured lookup after the citation, e.g. an external literature search. */
+export declare function ContentCitationLookupLink({ children, href, onClick, newTabLabel, "data-e2e-test-id": dataE2eTestId, }: ContentCitationLookupLinkProps): React.ReactElement;

package/build/cjs/components/Content/ContentCitation/ContentCitationLookupLink.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentCitationLookupLink",{enumerable:!0,get:function(){return ContentCitationLookupLink}});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")),_ContentLink=require("../ContentLink/ContentLink"),_Icon=require("../../Icon/Icon"),_ScreenReaderText=require("../../Utilities/ScreenReaderText/ScreenReaderText"),_ContentCitationLink=require("./ContentCitationLink"),StyledLookupLink=(0,_styled.default)("span",{target:"exd44bo0",label:"StyledLookupLink"})(({theme})=>({whiteSpace:"nowrap","& svg":{marginLeft:theme.variables.size.spacing.xxs,marginBottom:_ContentCitationLink.CITATION_LINK_ICON_BASELINE_OFFSET}}));function ContentCitationLookupLink({children,href,onClick,newTabLabel,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(StyledLookupLink,{"data-ds-id":"ContentCitationLookupLink"},_react.default.createElement(_ContentLink.ContentLink,{href:href,target:"_blank",rel:"noopener noreferrer",color:"accent",onClick:onClick,"data-e2e-test-id":dataE2eTestId},_react.default.createElement("span",null,children),newTabLabel&&_react.default.createElement(_ScreenReaderText.ScreenReaderText,{as:"span"}," ",newTabLabel),_react.default.createElement(_Icon.Icon,{inline:!0,name:"external-link",size:"s",color:"inherit"})))}

package/build/cjs/components/Content/ContentCitation/ContentCitationTitle.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type ContentCitationTitleProps = {
+    /** Title of the cited work or periodical */
+    children: React.ReactNode;
+    "data-e2e-test-id"?: string;
+};
+/** Title of a cited work or periodical, rendered in italics. */
+export declare function ContentCitationTitle({ children, "data-e2e-test-id": dataE2eTestId, }: ContentCitationTitleProps): React.ReactElement;

package/build/cjs/components/Content/ContentCitation/ContentCitationTitle.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentCitationTitle",{enumerable:!0,get:function(){return ContentCitationTitle}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),StyledCite=(0,/*#__PURE__*/_interop_require_default._(require("@emotion/styled")).default)("cite",{target:"e1w99dcz0",label:"StyledCite"})({fontStyle:"italic"});function ContentCitationTitle({children,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(StyledCite,{"data-ds-id":"ContentCitationTitle","data-e2e-test-id":dataE2eTestId},children)}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanelProps } from "react-resizable-panels";
+import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanelProps, PanelSize } from "react-resizable-panels";
 /** A size: plain number = pixels; unitless string = percentage ("10%"). */
 type Size = number | string;
 export type PanelItem = {
@@ -37,8 +37,12 @@ export type PanelProps = {
     /** Persist sizes (keyed by `persistenceKey` + the current panel-id set). */
     persistenceKey?: string;
     storage?: LayoutStorage;
-    /** Reports a settled drag-resize (size as a "%" string). */
-    onResize: (id: string, size: string) => void;
+    /** Reports a panel's size whenever its column is measured at a new one -
+     *  after a drag, a window resize, or a sibling opening. Both units come from
+     *  the library's own measurement of the column, so a consumer remembering
+     *  a width never has to read the DOM for it. Collapses are reported through
+     *  `onCollapse` instead, never as a size. */
+    onResize: (id: string, size: PanelSize) => void;
     /** Reports a drag past `minSize` on a collapsible panel. */
     onCollapse: (id: string) => void;
     /** Ref callback for a panel's imperative handle (resize/getSize), used to

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:"e1q4b9dw0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=(0,_styled.default)("div",{target:"e1q4b9dw1",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];if("number"==typeof pct){if(collapsible&&pct<.5)return void onCollapse(id);pct>=.5&&onResize(id,`${pct}%`)}}))}},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,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:"ervy0ss0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=(0,_styled.default)("div",{target:"ervy0ss1",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)))}))}

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

@@ -5,8 +5,9 @@ import type { IconProps } from "../../Icon/Icon";
  * panel's accessible name comes from its `aria-label`.
  */
 export type PanelHeaderTitle = {
-    /** Visible title label. */
-    label: string;
+    /** Visible title label. Clamped, so a label that outruns the header
+     *  truncates on one line rather than reflowing the panel body beneath it. */
+    label: React.ReactNode;
     /** Optional leading icon. Decorative — the visible label names it. */
     icon?: Omit<IconProps, "size" | "aria-label" | "aria-labelledby" | "role">;
     /** Show the title block. Default `true`. */
@@ -17,8 +18,11 @@ export type PanelHeaderProps = {
     leftSlot?: React.ReactNode;
     /** Title block (icon + heading), rendered after `leftSlot`. */
     title?: PanelHeaderTitle;
-    /** Rendered at the header end, vertically centered. */
+    /** Rendered at the header end, aligned to the top of multi-line content. */
     rightSlot?: React.ReactNode;
+    /** Fade the leading group out. `rightSlot` is left solid: it is the control
+     *  that travels down onto the left bar's own and has to survive the dissolve. */
+    isContentFaded?: boolean;
     "data-e2e-test-id"?: string;
 };
 /**
@@ -28,4 +32,4 @@ export type PanelHeaderProps = {
  * carries the semantics (heading, buttons). Place it inside `Sandwich.Header`
  * to get the sticky positioning and scroll separator.
  */
-export declare function PanelHeader({ leftSlot, title, rightSlot, "data-e2e-test-id": dataE2eTestId, }: PanelHeaderProps): React.ReactElement;
+export declare function PanelHeader({ leftSlot, title, rightSlot, isContentFaded, "data-e2e-test-id": dataE2eTestId, }: PanelHeaderProps): React.ReactElement;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header");function PanelHeader({leftSlot,title,rightSlot,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Inline.Inline,{alignItems:"spaceBetween",vAlignItems:"center",noWrap:!0,fullWidth:!0},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,leftSlot,title&&!1!==title.isVisible&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_TextClamped.TextClamped,{as:"span"},_react.default.createElement(_Header.H5,{color:colorTitleItems},title.label))))),_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});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")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_mixins=require("../../../shared/mixins"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header"),StyledHeaderSurface=(0,_styled.default)("div",{target:"e1ck2tjp0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=(0,_styled.default)("div",{target:"e1ck2tjp1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=(0,_styled.default)("div",{target:"e1ck2tjp2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded:isContentFaded})})),StyledSlotContent=(0,_styled.default)("div",{target:"e1ck2tjp3",label:"StyledSlotContent"})({width:"max-content"}),StyledTrailingGroup=(0,_styled.default)("div",{target:"e1ck2tjp4",label:"StyledTrailingGroup"})({alignSelf:"flex-start",flexShrink:0});function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return _react.default.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Box.Box,{space:"s",vSpace:"xs"},_react.default.createElement(StyledHeaderRow,null,_react.default.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,leftSlot&&_react.default.createElement(StyledSlotContent,null,leftSlot),title&&!1!==title.isVisible&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_TextClamped.TextClamped,{as:"span"},_react.default.createElement(_Header.H5,{color:colorTitleItems},title.label)))))),_react.default.createElement(StyledTrailingGroup,null,_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))))}

package/build/cjs/components/Internal/Sandwich/-types.d.ts

@@ -7,6 +7,11 @@ export type SandwichProps = {
     onScroll?: React.UIEventHandler<HTMLDivElement>;
     /** Forwarded to the scroll container element (e.g. for scroll restoration). */
     scrollRef?: React.Ref<HTMLDivElement>;
+    /** Hides the scroll region's scrollbar and stops it scrolling sideways. For
+     *  frames too narrow to spare a scrollbar's width - which are the frames
+     *  holding content wider than themselves, clipped at the edge. The region
+     *  still scrolls vertically by wheel and keyboard. */
+    hideScrollbar?: boolean;
 };
 /**
  * Separator visibility:

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

@@ -12,7 +12,7 @@ import { SandwichFooter } from "./SandwichFooter";
  * content is scrolled under them; edge state is shared through context (see
  * `useSandwichContext.tsx`).
  */
-declare function SandwichRoot({ children, scrollRef, onScroll, }: SandwichProps): React.ReactElement;
+declare function SandwichRoot({ children, scrollRef, onScroll, hideScrollbar, }: SandwichProps): React.ReactElement;
 /**
  * Compound export: `Sandwich` with `.Header` / `.Footer` attached.
  * Object.assign keeps the static sub-components typed on the root

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Sandwich",{enumerable:!0,get:function(){return Sandwich}});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")),_useSandwichContext=require("./useSandwichContext"),_SandwichHeader=require("./SandwichHeader"),_SandwichFooter=require("./SandwichFooter"),useScrollEdgeTracking=({scrollRef,onScroll,setEdges})=>{let[containerEl,setContainerEl]=(0,_react.useState)(null),[contentEl,setContentEl]=(0,_react.useState)(null),setContainerRef=(0,_react.useCallback)(node=>{setContainerEl(node),"function"==typeof scrollRef?scrollRef(node):scrollRef&&(scrollRef.current=node)},[scrollRef]),recalculateEdges=(0,_react.useCallback)(()=>{if(!containerEl)return;let{scrollTop,scrollHeight,clientHeight}=containerEl;setEdges({atTop:scrollTop<=1,atBottom:scrollTop+clientHeight>=scrollHeight-1})},[containerEl,setEdges]),onContainerScroll=(0,_react.useCallback)(event=>{recalculateEdges(),onScroll?.(event)},[recalculateEdges,onScroll]);return(0,_react.useLayoutEffect)(recalculateEdges,[recalculateEdges]),(0,_react.useEffect)(()=>{if("undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(()=>recalculateEdges());return containerEl&&observer.observe(containerEl),contentEl&&observer.observe(contentEl),()=>observer.disconnect()},[containerEl,contentEl,recalculateEdges]),{setContainerRef,setContentRef:setContentEl,onContainerScroll}},useSandwichEdgesState=()=>{let[edges,setEdgesState]=(0,_react.useState)({atTop:!0,atBottom:!0}),setEdges=(0,_react.useCallback)(next=>{setEdgesState(prev=>{let merged={...prev,...next};return merged.atTop===prev.atTop&&merged.atBottom===prev.atBottom?prev:merged})},[]);return(0,_react.useMemo)(()=>({...edges,setEdges}),[edges,setEdges])},StyledRoot=(0,_styled.default)("div",{target:"ejnp4220",label:"StyledRoot"})({height:"100%",display:"flex",flexDirection:"column",position:"relative"}),StyledEdgeSlot=(0,_styled.default)("div",{target:"ejnp4221",label:"StyledEdgeSlot"})({flex:"0 0 auto"}),StyledScrollBody=(0,_styled.default)("div",{target:"ejnp4222",label:"StyledScrollBody"})({flex:"1 1 auto",minHeight:0,overflowY:"auto",position:"relative"}),StyledScrollContent=(0,_styled.default)("div",{target:"ejnp4223",label:"StyledScrollContent"})({minHeight:"100%",display:"flex",flexDirection:"column"}),Sandwich=Object.assign(function({children,scrollRef,onScroll}){let edgesValue=useSandwichEdgesState(),{setContainerRef,setContentRef,onContainerScroll}=useScrollEdgeTracking({scrollRef,onScroll,setEdges:edgesValue.setEdges}),[headerSlotNode,setHeaderSlotNode]=(0,_react.useState)(null),[footerSlotNode,setFooterSlotNode]=(0,_react.useState)(null),contextValue=(0,_react.useMemo)(()=>({...edgesValue,headerSlotNode,footerSlotNode}),[edgesValue,headerSlotNode,footerSlotNode]);return _react.default.createElement(_useSandwichContext.SandwichProvider,{value:contextValue},_react.default.createElement(StyledRoot,{"data-ds-id":"Sandwich"},_react.default.createElement(StyledEdgeSlot,{ref:setHeaderSlotNode}),_react.default.createElement(StyledScrollBody,{ref:setContainerRef,onScroll:onContainerScroll,tabIndex:0,"data-ds-id":"SandwichBody"},_react.default.createElement(StyledScrollContent,{ref:setContentRef},children)),_react.default.createElement(StyledEdgeSlot,{ref:setFooterSlotNode})))},{Header:_SandwichHeader.SandwichHeader,Footer:_SandwichFooter.SandwichFooter});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Sandwich",{enumerable:!0,get:function(){return Sandwich}});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")),_useSandwichContext=require("./useSandwichContext"),_SandwichHeader=require("./SandwichHeader"),_SandwichFooter=require("./SandwichFooter"),useScrollEdgeTracking=({scrollRef,onScroll,setEdges})=>{let[containerEl,setContainerEl]=(0,_react.useState)(null),[contentEl,setContentEl]=(0,_react.useState)(null),setContainerRef=(0,_react.useCallback)(node=>{setContainerEl(node),"function"==typeof scrollRef?scrollRef(node):scrollRef&&(scrollRef.current=node)},[scrollRef]),recalculateEdges=(0,_react.useCallback)(()=>{if(!containerEl)return;let{scrollTop,scrollHeight,clientHeight}=containerEl;setEdges({atTop:scrollTop<=1,atBottom:scrollTop+clientHeight>=scrollHeight-1})},[containerEl,setEdges]),onContainerScroll=(0,_react.useCallback)(event=>{recalculateEdges(),onScroll?.(event)},[recalculateEdges,onScroll]);return(0,_react.useLayoutEffect)(recalculateEdges,[recalculateEdges]),(0,_react.useEffect)(()=>{if("undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(()=>recalculateEdges());return containerEl&&observer.observe(containerEl),contentEl&&observer.observe(contentEl),()=>observer.disconnect()},[containerEl,contentEl,recalculateEdges]),{setContainerRef,setContentRef:setContentEl,onContainerScroll}},useSandwichEdgesState=()=>{let[edges,setEdgesState]=(0,_react.useState)({atTop:!0,atBottom:!0}),setEdges=(0,_react.useCallback)(next=>{setEdgesState(prev=>{let merged={...prev,...next};return merged.atTop===prev.atTop&&merged.atBottom===prev.atBottom?prev:merged})},[]);return(0,_react.useMemo)(()=>({...edges,setEdges}),[edges,setEdges])},StyledRoot=(0,_styled.default)("div",{target:"e13bq2vk0",label:"StyledRoot"})({height:"100%",display:"flex",flexDirection:"column",position:"relative"}),StyledEdgeSlot=(0,_styled.default)("div",{target:"e13bq2vk1",label:"StyledEdgeSlot"})({flex:"0 0 auto"}),StyledScrollBody=(0,_styled.default)("div",{target:"e13bq2vk2",label:"StyledScrollBody"})(({hideScrollbar})=>({flex:"1 1 auto",minHeight:0,overflowY:"auto",position:"relative",...hideScrollbar&&{scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},overflowX:"hidden"}})),StyledScrollContent=(0,_styled.default)("div",{target:"e13bq2vk3",label:"StyledScrollContent"})({minHeight:"100%",display:"flex",flexDirection:"column"}),Sandwich=Object.assign(function({children,scrollRef,onScroll,hideScrollbar=!1}){let edgesValue=useSandwichEdgesState(),{setContainerRef,setContentRef,onContainerScroll}=useScrollEdgeTracking({scrollRef,onScroll,setEdges:edgesValue.setEdges}),[headerSlotNode,setHeaderSlotNode]=(0,_react.useState)(null),[footerSlotNode,setFooterSlotNode]=(0,_react.useState)(null),contextValue=(0,_react.useMemo)(()=>({...edgesValue,headerSlotNode,footerSlotNode}),[edgesValue,headerSlotNode,footerSlotNode]);return _react.default.createElement(_useSandwichContext.SandwichProvider,{value:contextValue},_react.default.createElement(StyledRoot,{"data-ds-id":"Sandwich"},_react.default.createElement(StyledEdgeSlot,{ref:setHeaderSlotNode}),_react.default.createElement(StyledScrollBody,{ref:setContainerRef,onScroll:onContainerScroll,tabIndex:0,hideScrollbar:hideScrollbar,"data-ds-id":"SandwichBody"},_react.default.createElement(StyledScrollContent,{ref:setContentRef},children)),_react.default.createElement(StyledEdgeSlot,{ref:setFooterSlotNode})))},{Header:_SandwichHeader.SandwichHeader,Footer:_SandwichFooter.SandwichFooter});

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

@@ -15,7 +15,9 @@ import type { SandwichSeparator } from "../Internal/Sandwich/-types";
 export type Size = number | string;
 /**
  * - `sidebar` - in-flow resizable panel.
- * - `offcanvas` - detached desktop overlay. ⚠️ **RESERVED - not implemented yet.**
+ * - `offcanvas` - detached desktop overlay. ⚠️ **RESERVED on the right panel -
+ *   not implemented there yet.** Implemented for the left panel, which declares
+ *   it through {@link LeftPanelVariant}.
  *   Currently treated like `sidebar` (renders in-flow); the overlay
  *   implementation lands in a later commit.
  * - `float` - detached floating window pinned to the bottom-right viewport
@@ -29,11 +31,15 @@ export type Variant = "sidebar" | "offcanvas" | "float";
 export type RightPanelVariant = Variant;
 /**
  * - `sidebar` - in-flow resizable column.
- * - `drawer` - modal overlay pinned to the left edge. Out of the resizable row,
- *   so it costs no docked column - the mobile presentation, and what a rule
- *   switches to when the budget has no column left.
+ * - `drawer` - modal overlay pinned to the left edge, with a backdrop and a
+ *   focus trap. Out of the resizable row, so it costs no docked column - the
+ *   mobile presentation.
+ * - `offcanvas` - the same overlay without the dialog: no backdrop, no focus
+ *   trap, the page behind stays live. Also out of the row, so it is what a rule
+ *   switches to when the docked budget has no column left but the panel should
+ *   stay reachable rather than be hidden.
  */
-export type LeftPanelVariant = "sidebar" | "drawer";
+export type LeftPanelVariant = "sidebar" | "drawer" | "offcanvas";
 export type { PanelKey, SidePanelKey, SlotKey };
 /** Everything both side panels hold. `variant` is declared per slot below, so
  *  each panel's state only admits the variants it can actually render. */
@@ -245,7 +251,8 @@ export type LeftPanelHandle = PanelHandleActions & {
     state: LeftPanelState & {
         variant: LeftPanelVariant;
     };
-    /** Switch render variant: an in-flow column, or the modal drawer. */
+    /** Switch render variant: an in-flow column, the modal drawer, or the
+     *  non-modal offcanvas overlay. */
     setVariant: (variant: LeftPanelVariant) => void;
 };
 export type RightPanelHandle = PanelHandleActions & {
@@ -302,7 +309,28 @@ export type SidePanelProps = ForwardedScrollProps & {
     /** Called whenever the panel's visibility changes, with the new value. */
     onVisibleChange?: (visible: boolean) => void;
 };
-export type LeftPanelProps = SidePanelProps & {
+export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "minSize" | "maxSize"> & {
+    /** Pixels. Unlike the other panels the left panel takes no percentage: with a
+     *  left bar its content is pinned to this width and clipped as the column narrows,
+     *  and a percentage would resolve against the narrowing column instead of the
+     *  width it opens to - so the content would reflow mid-slide, which is the one
+     *  thing the pin exists to prevent.
+     *
+     *  Sets the column's starting width only: the docked panel keeps that width
+     *  when the window resizes, and `Layout.Content` grows and shrinks around it.
+     *  Drag-resizing is a separate story - see `resizable`. */
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    /** Props forwarded to the panel's internal parts. Required: the left bar
+     *  always carries the button that opens the panel, and it is icon-only, so its
+     *  accessible name can only come from here. Give it the action - the panel's
+     *  own `aria-label` already names the region it opens. */
+    slotProps: {
+        toggleButton: {
+            "aria-label": string;
+        };
+    };
     /** Accessible name for the panel. Used to label the modal drawer it renders
      *  as on mobile (`role="dialog"`). Ignored by the docked desktop panel. */
     "aria-label": string;
@@ -377,8 +405,31 @@ export type PanelSlotFooterProps = {
     children: React.ReactNode;
     "data-e2e-test-id"?: string;
 };
-export type LeftPanelHeaderProps = PanelSlotHeaderProps;
+export type LeftPanelHeaderProps = PanelSlotHeaderProps & {
+    /** Title block (icon + heading), rendered after `leftSlot`. Reach for it
+     *  rather than `leftSlot` for a title that can outrun the header: the block
+     *  clamps, where `leftSlot` keeps its content at full width and lets the
+     *  header clip it. */
+    title?: PanelHeaderTitle;
+    /** Rendered beneath the title row, still inside the header: content that
+     *  belongs with the header rather than with the scrolling body, such as a
+     *  progress strip or a filter row. It sticks with the header and dissolves
+     *  with it when the panel narrows to its bar. */
+    children?: React.ReactNode;
+};
 export type LeftPanelFooterProps = PanelSlotFooterProps;
+/**
+ * Left bar contents for a `Layout.LeftPanel` whose left bar differs from its panel.
+ * Holds the button that opens the panel, plus the consumer's own navigation.
+ */
+export type LeftNavBarProps = {
+    /** Content in source order; `Layout.LeftNavBarFooter` sticks to the bottom,
+     *  everything else scrolls. Optional - a left bar that carries nothing but the
+     *  button that opens the panel is a left bar too. */
+    children?: React.ReactNode;
+    "data-e2e-test-id"?: string;
+};
+export type LeftNavBarFooterProps = PanelSlotFooterProps;
 /**
  * Title shown in the right panel header, after `leftSlot`. Visual only — the
  * panel's accessible name comes from `Layout.RightPanel`'s `aria-label`.
@@ -441,12 +492,17 @@ export type PanelContainerProps = ForwardedScrollProps & {
     /** Content in source order. Per-panel header/footer components stick to the
      *  edges; everything else scrolls. */
     children: React.ReactNode;
+    /** DOM id of the container, so a control outside the panel can reference it. */
+    id?: string;
     /** Accessible name; when set, the container renders as a `region` landmark. */
     "aria-label"?: string;
     /** Draws a separator border on the panel's left edge. */
     showBorderLeft?: boolean;
     /** Draws a separator border on the panel's right edge. */
     showBorderRight?: boolean;
+    /** Hides the scroll region's scrollbar - for panels too narrow to spare its
+     *  width. */
+    hideScrollbar?: boolean;
     "data-e2e-test-id"?: string;
 };
 export type RightPanelProps = SidePanelProps & {

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

@@ -7,6 +7,8 @@ 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";
@@ -19,6 +21,8 @@ declare function LayoutBase({ children, persistenceKey, storage, rules, addition
 type LayoutComponent = typeof LayoutBase & {
     Provider: typeof LayoutProvider;
     LeftPanel: typeof LeftPanel;
+    LeftNavBar: typeof LeftNavBar;
+    LeftNavBarFooter: typeof LeftNavBarFooter;
     LeftPanelHeader: typeof LeftPanelHeader;
     LeftPanelFooter: typeof LeftPanelFooter;
     RightPanel: typeof RightPanel;

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"),_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"),_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=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel);(0,_react.useEffect)(()=>{let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar],[_constants.Slot.content,contentWidthCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=(0,_styled.default)("div",{target:"e1kuzc310",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=(0,_styled.default)("div",{target:"e1kuzc311",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1kuzc312",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:"e1kuzc313",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e1kuzc314",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]),panelsEnabled=(0,_context.useLayoutPanelsEnabled)(),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile)),[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});useGlobalCssVariables(slotHosts);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??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==_constants.Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),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)=>dispatch({type:"resize",slot:id,size}),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.LayoutPortalContext.Provider,{value:portalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{"data-ds-id":"Layout"},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.LeftPanel=_LeftPanel.LeftPanel,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"),_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=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel);(0,_react.useEffect)(()=>{let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar],[_constants.Slot.content,contentWidthCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=(0,_styled.default)("div",{target:"e1no219g0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=(0,_styled.default)("div",{target:"e1no219g1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=(0,_styled.default)("div",{target:"e1no219g2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1no219g3",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:"e1no219g4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e1no219g5",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]),panelsEnabled=(0,_context.useLayoutPanelsEnabled)(),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!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&&hasOffcanvasLeftBar),[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});useGlobalCssVariables(slotHosts);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??panelState.minSize,maxSize:panel?.maxSize??panelState.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)&&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:portalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{"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.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/LeftNavBar/LeftNavBar.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { LeftNavBarProps } from "../-types";
+/**
+ * What `Layout.LeftPanel` shows in the left bar beneath the button that opens
+ * it, for panels whose left bar carries something other than the panel's own
+ * leading column - persistent destinations beside an article outline, say.
+ * Author it among the panel's children; it renders into the layer behind the
+ * panel, so opening widens that one column rather than adding a second box.
+ *
+ * Optional: the bar keeps its open button either way. This only fills the strip
+ * below it, on its own terms - scrolling, and sticking a
+ * `Layout.LeftNavBarFooter` to the bottom.
+ *
+ * Renders nothing where the panel has no left bar, so the mobile drawer shows
+ * the panel's own content alone even though the left bar is authored among it.
+ */
+export declare function LeftNavBar({ children, "data-e2e-test-id": dataE2eTestId, }: LeftNavBarProps): React.ReactElement | null;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftNavBar",{enumerable:!0,get:function(){return LeftNavBar}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_reactdom=require("react-dom"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_useLeftBarContext=require("../LeftPanel/useLeftBarContext"),StyledNavBarFrame=(0,_styled.default)("div",{target:"e1e9dsmx0",label:"StyledNavBarFrame"})({height:"100%"});function LeftNavBar({children,"data-e2e-test-id":dataE2eTestId}){let{slotNode}=(0,_useLeftBarContext.useLeftBarContext)();return slotNode?(0,_reactdom.createPortal)(_react.default.createElement(StyledNavBarFrame,{"data-ds-id":"LeftNavBar","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Sandwich.Sandwich,{hideScrollbar:!0},children)),slotNode):null}

package/build/cjs/components/Layout/LeftNavBar/LeftNavBarFooter.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { LeftNavBarFooterProps } from "../-types";
+/**
+ * Optional sticky footer for `Layout.LeftNavBar` - place it among the left bar's
+ * children; it sticks to the bottom while the rest of the content scrolls.
+ */
+export declare function LeftNavBarFooter({ children, "data-e2e-test-id": dataE2eTestId, }: LeftNavBarFooterProps): React.ReactElement;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftNavBarFooter",{enumerable:!0,get:function(){return LeftNavBarFooter}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich");function LeftNavBarFooter({children,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},children)}

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

@@ -0,0 +1,45 @@
+import React from "react";
+import type { CSSObject, Theme } from "@emotion/react";
+import type { ForwardedScrollProps } from "../-types";
+/**
+ * The box the layers live in: one surface, one divider, and a clip. Shared by
+ * the two presentations that carry a left bar - the in-row column and the offcanvas
+ * overlay - which differ only in how they are positioned and sized.
+ *
+ * The surface is painted here, once and constantly, so nothing new appears
+ * mid-collapse: were each layer to paint its own, fading the panel's would only
+ * uncover the left bar's, identical and full-width, and the dissolve would reveal
+ * nothing.
+ *
+ * The divider is overlaid on the trailing edge rather than declared as a border,
+ * so it costs the box no width - the left bar's leading column and the header's
+ * trailing button are placed against the full width, and a border would put them
+ * half a pixel out.
+ */
+export declare const getLeftBarColumnStyles: (theme: Theme) => CSSObject;
+/**
+ * Where the box's top edge sits: below a sticky subnav, by the offset the subnav
+ * publishes, and at the host's top when no subnav is mounted. The edge moves
+ * with the subnav, so the transition is the one the subnav slides with, and
+ * the two travel as one. `RightPanelDocked` tracks the same var the same way,
+ * so the two side panels stay level.
+ */
+export declare const LEFT_BAR_TOP_INSET: string;
+export declare const getLeftBarTopTransition: (theme: Theme) => string;
+export type LeftBarLayersProps = ForwardedScrollProps & {
+    children: React.ReactNode;
+    isVisible: boolean;
+    /** Width the panel's content holds on to while the box is narrower. */
+    openWidth: string;
+    /** Accessible name for the left bar's open button. */
+    toggleButtonLabel: string;
+    "aria-label"?: string;
+};
+/**
+ * The left bar and the panel, stacked in one box. Whichever of the two is showing,
+ * the box's width alone does the animating: content and footer hold `openWidth`
+ * and are clipped as it narrows, so nothing in them moves, while the header is
+ * left to narrow with the box - which walks its trailing control down into the
+ * left bar.
+ */
+export declare const LeftBarLayers: React.FC<LeftBarLayersProps>;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LEFT_BAR_TOP_INSET(){return LEFT_BAR_TOP_INSET},get LeftBarLayers(){return LeftBarLayers},get getLeftBarColumnStyles(){return getLeftBarColumnStyles},get getLeftBarTopTransition(){return getLeftBarTopTransition}};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")),_useDocument=require("../../../shared/useDocument"),_mixins=require("../../../shared/mixins"),_constants=require("../-constants"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_useLeftPanelId=require("../useLeftPanelId"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext"),_useLeftBarContext=require("./useLeftBarContext"),_LeftBarToggle=require("./LeftBarToggle"),getLeftBarColumnStyles=theme=>({overflow:"hidden",backgroundColor:theme.values.color.background.primary.default,"&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:1,backgroundColor:theme.values.color.border.secondary.default}}),LEFT_BAR_TOP_INSET=`var(${_constants.SUBNAV_OFFSET_VAR}, 0px)`,getLeftBarTopTransition=theme=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return`top ${duration} ${timingFunction}`},StyledLeftBarLayer=(0,_styled.default)("div",{target:"e1oedn8k0",label:"StyledLeftBarLayer"})(({isPanelOpen})=>({position:"absolute",inset:0,display:"flex",flexDirection:"column",visibility:isPanelOpen?"hidden":"visible"})),StyledNavBarSlot=(0,_styled.default)("div",{target:"e1oedn8k1",label:"StyledNavBarSlot"})({flex:"1 1 auto",minHeight:0}),StyledPanelLayer=(0,_styled.default)("div",{target:"e1oedn8k2",label:"StyledPanelLayer"})(({theme,isPanelOpen})=>{let{duration}=theme.variables.animation.navSlide.collapse;return{position:"absolute",inset:0,overflow:"hidden",visibility:isPanelOpen?"visible":"hidden",transition:isPanelOpen?"none":`visibility 0s linear ${duration}`,"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledFadingContent=(0,_styled.default)("div",{target:"e1oedn8k3",label:"StyledFadingContent"})(({theme,isFaded,pinnedContentWidth})=>({display:"flex",flexDirection:"column",flex:"1 0 auto",minWidth:pinnedContentWidth,...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded})})),handOverFocus=({document,from,to})=>{from&&to&&from.contains(document.activeElement)&&to.focus()},LeftBarLayers=({children,isVisible,openWidth,toggleButtonLabel,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=(0,_useLeftPanelId.useLeftPanelId)(),document=(0,_useDocument.useDocument)(),leftBarLayerRef=(0,_react.useRef)(null),panelLayerRef=(0,_react.useRef)(null),toggleRef=(0,_react.useRef)(null),[leftBarSlotNode,setLeftBarSlotNode]=(0,_react.useState)(null),leftBarSlot=(0,_react.useMemo)(()=>({slotNode:leftBarSlotNode}),[leftBarSlotNode]),isContentFaded=!isVisible,collapseState=(0,_react.useMemo)(()=>({isContentFaded,pinnedContentWidth:openWidth}),[isContentFaded,openWidth]),wasVisible=(0,_react.useRef)(isVisible);return(0,_react.useEffect)(()=>{isVisible!==wasVisible.current&&(wasVisible.current=isVisible,handOverFocus({document,from:isVisible?leftBarLayerRef.current:panelLayerRef.current,to:isVisible?panelLayerRef.current:toggleRef.current}))},[isVisible,document]),_react.default.createElement(_useLeftBarContext.LeftBarProvider,{value:leftBarSlot},_react.default.createElement(StyledLeftBarLayer,{isPanelOpen:isVisible,ref:leftBarLayerRef},_react.default.createElement(_LeftBarToggle.LeftBarToggle,{"aria-label":toggleButtonLabel,buttonRef:toggleRef}),_react.default.createElement(StyledNavBarSlot,{ref:setLeftBarSlotNode})),_react.default.createElement(StyledPanelLayer,{ref:panelLayerRef,isPanelOpen:isVisible,id:leftPanelId,tabIndex:-1,role:ariaLabel?"region":void 0,"aria-label":ariaLabel},_react.default.createElement(_Sandwich.Sandwich,{hideScrollbar:!0,scrollRef:scrollContainerRef,onScroll:onScroll},_react.default.createElement(_useLeftPanelCollapseContext.LeftPanelCollapseProvider,{value:collapseState},_react.default.createElement(StyledFadingContent,{isFaded:isContentFaded,pinnedContentWidth:openWidth},children)))))};

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

@@ -0,0 +1,15 @@
+import React from "react";
+export type LeftBarToggleProps = {
+    /** Accessible name for the button, which is icon-only. */
+    "aria-label"?: string;
+    /** Handed out so the layer above can put focus here when the panel closes -
+     *  this is the control that replaces the one the panel is taking away. */
+    buttonRef?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * The one control the left bar always carries: the button that opens the panel
+ * back up. It belongs to the bar rather than to `Layout.LeftNavBar` - which only
+ * adds content beneath it - because a panel that authored no nav bar would
+ * otherwise close to a strip with no way back out of it.
+ */
+export declare function LeftBarToggle({ "aria-label": ariaLabel, buttonRef, }: LeftBarToggleProps): React.ReactElement;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftBarToggle",{enumerable:!0,get:function(){return LeftBarToggle}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Box=require("../../Box/Box"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useLeftPanelId=require("../useLeftPanelId");function LeftBarToggle({"aria-label":ariaLabel,buttonRef}){let{show,isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],leftPanelId=(0,_useLeftPanelId.useLeftPanelId)();return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs"},_react.default.createElement(_PictogramButton.PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:show,"aria-label":ariaLabel,"aria-controls":leftPanelId,"aria-expanded":isVisible}))}