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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanel",{enumerable:!0,get:function(){return LeftPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_context=require("../context"),_LeftPanelDocked=require("./LeftPanelDocked"),_LeftPanelDrawer=require("./LeftPanelDrawer"),LeftPanel=({children,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],canRender=(0,_context.useCanRenderPanel)();(0,_registry.useVisibleChange)(isVisible,onVisibleChange);let isDrawer="drawer"===state.variant;return canRender?isDrawer?_react.default.createElement(_LeftPanelDrawer.LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):_react.default.createElement(_LeftPanelDocked.LeftPanelDocked,{"aria-label":ariaLabel,defaultSize:defaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanel",{enumerable:!0,get:function(){return LeftPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_context=require("../context"),_useLeftPanelId=require("../useLeftPanelId"),_LeftPanelDocked=require("./LeftPanelDocked"),_LeftPanelDrawer=require("./LeftPanelDrawer"),_LeftPanelOffcanvas=require("./LeftPanelOffcanvas"),pixelsOf=size=>"number"==typeof size?size:void 0,defaultSizeOf=({defaultSize,minSize,state})=>defaultSize??minSize??pixelsOf(state.size)??pixelsOf(state.minSize)??320,LeftPanel=({children,slotProps,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],canRender=(0,_context.useCanRenderPanel)(),leftPanelId=(0,_react.useId)(),resolvedDefaultSize=defaultSizeOf({defaultSize,minSize,state});if((0,_registry.useVisibleChange)(isVisible,onVisibleChange),!canRender)return null;let drawer=_react.default.createElement(_LeftPanelDrawer.LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),offcanvas=_react.default.createElement(_LeftPanelOffcanvas.LeftPanelOffcanvas,{toggleButtonLabel:slotProps.toggleButton["aria-label"],isVisible:isVisible,hide:hide,openWidth:`${resolvedDefaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),docked=_react.default.createElement(_LeftPanelDocked.LeftPanelDocked,{toggleButtonLabel:slotProps.toggleButton["aria-label"],"aria-label":ariaLabel,defaultSize:resolvedDefaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children);return _react.default.createElement(_useLeftPanelId.LeftPanelIdContext.Provider,{value:leftPanelId},{drawer,offcanvas,sidebar:docked}[state.variant])};

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

@@ -1,11 +1,15 @@
 import React from "react";
-import type { ForwardedScrollProps, Size } from "../-types";
+import type { ForwardedScrollProps } from "../-types";
 export type LeftPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
+    /** Accessible name for the left bar's open button. */
+    toggleButtonLabel: string;
     "aria-label"?: string;
-    defaultSize?: Size;
-    minSize?: Size;
-    maxSize?: Size;
+    /** Pixel width the column widens to. Resolved by `LeftPanel` from its own
+     *  prop and the provider config, so it is always a width. */
+    defaultSize: number;
+    minSize?: number;
+    maxSize?: number;
     collapsible?: boolean;
     resizable?: boolean;
 };
@@ -13,9 +17,15 @@ export type LeftPanelDockedProps = ForwardedScrollProps & {
  * Docked (desktop) left panel. Declares the `leftPanel` slot and portals its
  * content into the Group's host - an in-flow, resizable column whose width
  * slides open/closed via {@link usePanelDockedSlide} (when collapsible). Content
- * lives in a {@link PanelContainer} so `Layout.LeftPanelHeader` /
+ * lives in {@link LeftBarLayers} so `Layout.LeftPanelHeader` /
  * `Layout.LeftPanelFooter` children stick to the edges. The mobile presentation
  * lives in {@link LeftPanelDrawer}; `LeftPanel` picks between the two by
  * breakpoint.
+ *
+ * The column never leaves the row: it rests at the left bar's width and widens
+ * to `defaultSize`. Content and footer hold the open width and are clipped, so
+ * nothing in them moves - the panel simply shows less of itself. The header is
+ * left to narrow with the column, which walks a control at its trailing edge
+ * down into the left bar.
  */
 export declare const LeftPanelDocked: React.FC<LeftPanelDockedProps>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDocked",{enumerable:!0,get:function(){return LeftPanelDocked}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_usePanelDockedSlide=require("../usePanelDockedSlide"),_PanelSlideBody=require("../PanelSlideBody"),_PanelContainer=require("../PanelContainer"),LeftPanelDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let{isMounted,pinnedWidth}=(0,_usePanelDockedSlide.usePanelDockedSlide)({slot:_constants.Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0});return(0,_registry.useLayoutPortal)(_constants.Slot.leftPanel,isMounted?_react.default.createElement(_PanelSlideBody.PanelSlideBody,{anchor:"right",pinnedWidth:pinnedWidth},_react.default.createElement(_PanelContainer.PanelContainer,{showBorderRight:!0,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDocked",{enumerable:!0,get:function(){return LeftPanelDocked}});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")),_react1=require("@emotion/react"),_constants=require("../-constants"),_registry=require("../registry"),_usePanelDockedSlide=require("../usePanelDockedSlide"),_LeftBarLayers=require("./LeftBarLayers"),_useLayout=require("../useLayout"),StyledLeftBarColumn=(0,_styled.default)("div",{target:"e1apd56i0",label:"StyledLeftBarColumn"})(({theme})=>({position:"absolute",left:0,right:0,top:_LeftBarLayers.LEFT_BAR_TOP_INSET,bottom:_constants.PAGE_BOTTOM_BAR_INSET,transition:(0,_LeftBarLayers.getLeftBarTopTransition)(theme),"@media (prefers-reduced-motion: reduce)":{transition:"none"},...(0,_LeftBarLayers.getLeftBarColumnStyles)(theme)})),LeftPanelDocked=({children,toggleButtonLabel,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let theme=(0,_react1.useTheme)(),{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel];return(0,_usePanelDockedSlide.usePanelDockedSlide)({slot:_constants.Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0,collapsedSize:parseFloat(theme.variables.size.dimension.leftNavBar.width)}),(0,_registry.useLayoutPortal)(_constants.Slot.leftPanel,_react.default.createElement(StyledLeftBarColumn,null,_react.default.createElement(_LeftBarLayers.LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:`${defaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDrawer",{enumerable:!0,get:function(){return LeftPanelDrawer}});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")),_Drawer=require("../../Internal/Drawer/Drawer"),_PanelContainer=require("../PanelContainer"),StyledLeftPanelBody=(0,_styled.default)("div",{target:"e1pciy730",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"}),LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>_react.default.createElement(_Drawer.Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},_react.default.createElement(StyledLeftPanelBody,null,_react.default.createElement(_PanelContainer.PanelContainer,{scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDrawer",{enumerable:!0,get:function(){return LeftPanelDrawer}});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")),_Drawer=require("../../Internal/Drawer/Drawer"),_PanelContainer=require("../PanelContainer"),_useLeftPanelId=require("../useLeftPanelId"),StyledLeftPanelBody=(0,_styled.default)("div",{target:"e158aetq0",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"}),LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=(0,_useLeftPanelId.useLeftPanelId)();return _react.default.createElement(_Drawer.Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},_react.default.createElement(StyledLeftPanelBody,null,_react.default.createElement(_PanelContainer.PanelContainer,{id:leftPanelId,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelFooter",{enumerable:!0,get:function(){return LeftPanelFooter}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich");function LeftPanelFooter({children,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},children)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelFooter",{enumerable:!0,get:function(){return LeftPanelFooter}});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")),_mixins=require("../../../shared/mixins"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext"),StyledFadingFooter=(0,_styled.default)("div",{target:"emmyo1o0",label:"StyledFadingFooter"})(({theme,isFaded,pinnedContentWidth})=>({minWidth:pinnedContentWidth,...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded})}));function LeftPanelFooter({children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,pinnedContentWidth}=(0,_useLeftPanelCollapseContext.useLeftPanelCollapseContext)();return _react.default.createElement(_Sandwich.Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(StyledFadingFooter,{isFaded:isContentFaded,pinnedContentWidth:pinnedContentWidth},children))}

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

@@ -1,7 +1,9 @@
 import React from "react";
 import type { LeftPanelHeaderProps } from "../-types";
 /**
- * Optional sticky header for `Layout.LeftPanel` - place it among the panel's
- * children; it sticks to the top while the rest of the content scrolls.
+ * Header for the left panel. Place among `Layout.LeftPanel`'s children; it
+ * sticks to the top while the rest of the content scrolls. Content is a left
+ * slot, an optional title, a right slot, and beneath them whatever is passed as
+ * `children`.
  */
-export declare function LeftPanelHeader({ leftSlot, rightSlot, "data-e2e-test-id": dataE2eTestId, }: LeftPanelHeaderProps): React.ReactElement;
+export declare function LeftPanelHeader({ leftSlot, title, rightSlot, children, "data-e2e-test-id": dataE2eTestId, }: LeftPanelHeaderProps): React.ReactElement;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelHeader",{enumerable:!0,get:function(){return LeftPanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader");function LeftPanelHeader({leftSlot,rightSlot,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:leftSlot,rightSlot:rightSlot}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelHeader",{enumerable:!0,get:function(){return LeftPanelHeader}});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")),_getLeftPanelFadeStyles=require("../../../shared/mixins/getLeftPanelFadeStyles"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext"),StyledHeaderStrip=(0,_styled.default)("div",{target:"e1asip2n0",label:"StyledHeaderStrip"})(({theme,isFaded,pinnedContentWidth})=>({minWidth:pinnedContentWidth,...(0,_getLeftPanelFadeStyles.getLeftPanelFadeStyles)({theme,isFaded})}));function LeftPanelHeader({leftSlot,title,rightSlot,children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,pinnedContentWidth}=(0,_useLeftPanelCollapseContext.useLeftPanelCollapseContext)();return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:rightSlot,isContentFaded:isContentFaded}),children&&_react.default.createElement(StyledHeaderStrip,{isFaded:isContentFaded,pinnedContentWidth:pinnedContentWidth},children))}

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

@@ -0,0 +1,29 @@
+import React from "react";
+import type { ForwardedScrollProps } from "../-types";
+export type LeftPanelOffcanvasProps = ForwardedScrollProps & {
+    children: React.ReactNode;
+    /** Accessible name for the left bar's open button. */
+    toggleButtonLabel: string;
+    isVisible: boolean;
+    hide: () => void;
+    openWidth: string;
+    "aria-label"?: string;
+};
+/**
+ * Left panel as a non-modal overlay: a drawer without the dialog. Used when the
+ * docked budget has no column left but the panel should stay reachable - it
+ * opens over the row instead of taking a column from it, and instead of being
+ * hidden outright. The left bar stays on screen throughout; only the mobile drawer
+ * gives it up.
+ *
+ * Deliberately not a {@link Drawer}: a Drawer traps focus, claims `aria-modal`
+ * and covers the viewport with a click-catching layer. Here the page behind
+ * stays live and usable, so the panel is a plain `region` (named by
+ * `aria-label`) that happens to be layered - nothing about it is modal.
+ *
+ * It still dismisses like something laid over the page, because that is what it
+ * is: Escape and a click beyond its edge both close it back to its left bar. Only
+ * while it is open - closed, it is just the left bar, and the left bar is not something
+ * to dismiss.
+ */
+export declare const LeftPanelOffcanvas: React.FC<LeftPanelOffcanvasProps>;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelOffcanvas",{enumerable:!0,get:function(){return LeftPanelOffcanvas}});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")),_react1=require("@emotion/react"),_LeftBarLayers=require("./LeftBarLayers"),_constants=require("../-constants"),_registry=require("../registry"),_useOnEscapePress=require("../../../shared/useOnEscapePress"),_useOutsideClick=require("../../../shared/useOutsideClick"),getOffcanvasBoxStyles=(theme,{isVisible,leftBarWidth,openWidth})=>({position:"absolute",left:0,top:_LeftBarLayers.LEFT_BAR_TOP_INSET,bottom:_constants.PAGE_BOTTOM_BAR_INSET,zIndex:1,width:isVisible?openWidth:leftBarWidth}),StyledOffcanvasShadow=(0,_styled.default)("div",{target:"exeyzov0",label:"StyledOffcanvasShadow"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),pointerEvents:"none",boxShadow:theme.values.elevation[2],opacity:box.isVisible?theme.variables.opacity.visible:theme.variables.opacity.hidden,transition:[`width ${duration} ${timingFunction}`,`opacity ${duration} ${timingFunction}`,(0,_LeftBarLayers.getLeftBarTopTransition)(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledOffcanvasColumn=(0,_styled.default)("div",{target:"exeyzov1",label:"StyledOffcanvasColumn"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),transition:[`width ${duration} ${timingFunction}`,(0,_LeftBarLayers.getLeftBarTopTransition)(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"},...(0,_LeftBarLayers.getLeftBarColumnStyles)(theme)}}),LeftPanelOffcanvas=({children,toggleButtonLabel,isVisible,hide,openWidth,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let theme=(0,_react1.useTheme)();(0,_registry.useDeclarePanel)(_constants.Slot.leftPanel,{});let columnRef=(0,_react.useRef)(null);(0,_useOnEscapePress.useOnEscapePress)(event=>{isVisible&&(event.preventDefault(),hide())},[isVisible,hide]),(0,_useOutsideClick.useOutsideClick)(columnRef,hide,isVisible);let box={isVisible,leftBarWidth:theme.variables.size.dimension.leftNavBar.width,openWidth};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(StyledOffcanvasShadow,{...box,"aria-hidden":!0}),_react.default.createElement(StyledOffcanvasColumn,{...box,ref:columnRef},_react.default.createElement(_LeftBarLayers.LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

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

@@ -0,0 +1,11 @@
+export type LeftBarSlot = {
+    /** Static host the left bar's content portals into. Null until the layer
+     *  behind the panel has mounted, and never provided at all by the
+     *  presentations that carry no left bar - which is how `Layout.LeftNavBar`
+     *  knows to render nothing on mobile, where the drawer shows the panel's own
+     *  content alone. */
+    slotNode: HTMLElement | null;
+};
+export declare const LeftBarProvider: React.Provider<LeftBarSlot>;
+/** The left bar slot behind the left panel, if this presentation has one. */
+export declare function useLeftBarContext(): LeftBarSlot;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LeftBarProvider(){return LeftBarProvider},get useLeftBarContext(){return useLeftBarContext}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),LeftBarContext=(0,_react.createContext)({slotNode:null}),LeftBarProvider=LeftBarContext.Provider;function useLeftBarContext(){return(0,_react.useContext)(LeftBarContext)}

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LeftPanelCollapseProvider(){return LeftPanelCollapseProvider},get useLeftPanelCollapseContext(){return useLeftPanelCollapseContext}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),LeftPanelCollapseContext=(0,_react.createContext)({isContentFaded:!1}),LeftPanelCollapseProvider=LeftPanelCollapseContext.Provider;function useLeftPanelCollapseContext(){return(0,_react.useContext)(LeftPanelCollapseContext)}

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

@@ -40,6 +40,17 @@ export declare const PanelRegistryContext: React.Context<PanelRegistry>;
 export declare function useDeclarePanel(slot: SlotKey, reg: PanelReg): void;
 export type PanelDeclarations = Partial<Record<SlotKey, PanelReg>>;
 export declare const PanelDeclarationsContext: React.Context<Partial<Record<"content" | "leftPanel" | "splitview" | "rightPanel", PanelReg>>>;
+/**
+ * The ids of the columns in the resizable row, in order, joined with commas.
+ * Changes when a column joins or leaves the row, and only then. A column that
+ * has to hold a width of its own across such a change - the left bar column,
+ * which react-resizable-panels would otherwise put back at whatever width it
+ * had the last time the same set of columns was on screen - re-checks its rest
+ * against it.
+ */
+export declare const PanelRowContext: React.Context<string>;
+/** The row's current column set, as a stable key. Empty outside a Layout. */
+export declare function usePanelRow(): string;
 /**
  * Keeps an animating-out panel in the resizable row while its exit plays - the
  * Group would otherwise drop the column the instant it's hidden. The panel

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutPortalContext(){return LayoutPortalContext},get PanelAnimationContext(){return PanelAnimationContext},get PanelDeclarationsContext(){return PanelDeclarationsContext},get PanelPresenceContext(){return PanelPresenceContext},get PanelRegistryContext(){return PanelRegistryContext},get useDeclarePanel(){return useDeclarePanel},get useLayoutPortal(){return useLayoutPortal},get usePanelAnimationControl(){return usePanelAnimationControl},get usePanelPresence(){return usePanelPresence},get useRunCallbackOnValueChange(){return useRunCallbackOnValueChange},get useVisibleChange(){return useVisibleChange}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_reactdom=require("react-dom"),_constants=require("./-constants"),_context=require("./context"),LayoutPortalContext=(0,_react.createContext)({});function useLayoutPortal(slot,children){let slotNode=(0,_react.useContext)(LayoutPortalContext)[slot]??null;return slotNode?(0,_reactdom.createPortal)(children,slotNode):null}const PanelRegistryContext=(0,_react.createContext)(null);function useDeclarePanel(slot,reg){let registry=(0,_react.useContext)(PanelRegistryContext),declarationEnabled=!0===(0,_context.useLayoutPanelsEnabled)()||slot===_constants.Slot.content,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;(0,_react.useLayoutEffect)(()=>{if(registry&&declarationEnabled)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,declarationEnabled,slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant])}const PanelDeclarationsContext=(0,_react.createContext)({}),PanelPresenceContext=(0,_react.createContext)(null);function usePanelPresence(slot,isPresent){let presence=(0,_react.useContext)(PanelPresenceContext);(0,_react.useLayoutEffect)(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}const PanelAnimationContext=(0,_react.createContext)(null);function usePanelAnimationControl(){return(0,_react.useContext)(PanelAnimationContext)}function useRunCallbackOnValueChange(value,onChange){let prev=(0,_react.useRef)(value);(0,_react.useEffect)(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutPortalContext(){return LayoutPortalContext},get PanelAnimationContext(){return PanelAnimationContext},get PanelDeclarationsContext(){return PanelDeclarationsContext},get PanelPresenceContext(){return PanelPresenceContext},get PanelRegistryContext(){return PanelRegistryContext},get PanelRowContext(){return PanelRowContext},get useDeclarePanel(){return useDeclarePanel},get useLayoutPortal(){return useLayoutPortal},get usePanelAnimationControl(){return usePanelAnimationControl},get usePanelPresence(){return usePanelPresence},get usePanelRow(){return usePanelRow},get useRunCallbackOnValueChange(){return useRunCallbackOnValueChange},get useVisibleChange(){return useVisibleChange}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_reactdom=require("react-dom"),_constants=require("./-constants"),_context=require("./context"),LayoutPortalContext=(0,_react.createContext)({});function useLayoutPortal(slot,children){let slotNode=(0,_react.useContext)(LayoutPortalContext)[slot]??null;return slotNode?(0,_reactdom.createPortal)(children,slotNode):null}const PanelRegistryContext=(0,_react.createContext)(null);function useDeclarePanel(slot,reg){let registry=(0,_react.useContext)(PanelRegistryContext),declarationEnabled=!0===(0,_context.useLayoutPanelsEnabled)()||slot===_constants.Slot.content,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;(0,_react.useLayoutEffect)(()=>{if(registry&&declarationEnabled)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,declarationEnabled,slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant])}const PanelDeclarationsContext=(0,_react.createContext)({}),PanelRowContext=(0,_react.createContext)("");function usePanelRow(){return(0,_react.useContext)(PanelRowContext)}const PanelPresenceContext=(0,_react.createContext)(null);function usePanelPresence(slot,isPresent){let presence=(0,_react.useContext)(PanelPresenceContext);(0,_react.useLayoutEffect)(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}const PanelAnimationContext=(0,_react.createContext)(null);function usePanelAnimationControl(){return(0,_react.useContext)(PanelAnimationContext)}function useRunCallbackOnValueChange(value,onChange){let prev=(0,_react.useRef)(value);(0,_react.useEffect)(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"DEFAULT_LAYOUT_RULES",{enumerable:!0,get:function(){return DEFAULT_LAYOUT_RULES}});const DEFAULT_LAYOUT_RULES={maxDockedPanels:{xs:1,m:2,l:3},rightPanel:{priority:1,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.rightPanel.setVariant("float")}},splitview:{priority:2,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.splitview.hide()}},leftPanel:{priority:3,condition:({isLowPrio,isMobile,layout})=>{let variant=isMobile||isLowPrio?"drawer":"sidebar";variant!==layout.leftPanel.state.variant&&(layout.leftPanel.setVariant(variant),"drawer"!==variant||isMobile||layout.leftPanel.hide())}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"DEFAULT_LAYOUT_RULES",{enumerable:!0,get:function(){return DEFAULT_LAYOUT_RULES}});const leftPanelVariantFor=({isMobile,isLowPrio})=>isMobile?"drawer":isLowPrio?"offcanvas":"sidebar",DEFAULT_LAYOUT_RULES={maxDockedPanels:{xs:1,m:2,l:3},rightPanel:{priority:1,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.rightPanel.setVariant("float")}},splitview:{priority:2,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.splitview.hide()}},leftPanel:{priority:3,condition:({isLowPrio,isMobile,layout})=>{let variant=leftPanelVariantFor({isMobile,isLowPrio});variant!==layout.leftPanel.state.variant&&(layout.leftPanel.setVariant(variant),"offcanvas"===variant&&layout.leftPanel.hide())}}};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useLayoutRules",{enumerable:!0,get:function(){return useLayoutRules}});const _react=require("react"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),DEFAULT_PRIORITY={[_constants.Slot.rightPanel]:1,[_constants.Slot.splitview]:2,[_constants.Slot.leftPanel]:3},maxDockedFor=(maxDockedPanels,breakpoints)=>{let{xs,m=xs,l=m}=maxDockedPanels;return breakpoints.isMobile?xs:breakpoints.isTablet?m:l},isDockedPanel=({state,declared,slot})=>!!declared[slot]&&!!state[slot].visible&&(slot===_constants.Slot.rightPanel?"float"!==state.rightPanel.variant:slot!==_constants.Slot.leftPanel||"drawer"!==state.leftPanel.variant),resolveLowPrioSlots=({rules,state,declared,breakpoints})=>{let freeSlots=Math.max(0,maxDockedFor(rules.maxDockedPanels,breakpoints)-1),priorityFor=slot=>rules[slot]?.priority??DEFAULT_PRIORITY[slot],outranks=(slot,other)=>{let byPriority=priorityFor(slot)-priorityFor(other);return 0!==byPriority?byPriority<0:_constants.PANEL_ORDER.indexOf(slot)<_constants.PANEL_ORDER.indexOf(other)},countStrongerDocked=slot=>_constants.TOGGLABLE_SLOTS.filter(other=>other!==slot&&isDockedPanel({state,declared,slot:other})&&outranks(other,slot)).length;return _constants.TOGGLABLE_SLOTS.filter(slot=>countStrongerDocked(slot)>=freeSlots)};function useLayoutRules({layout,declared,rules,additionalData}){let layoutRef=(0,_react.useRef)(layout);layoutRef.current=layout;let{isMobile,isTablet,isDesktop}=(0,_useBreakpoints.useBreakpoints)(),{state}=layout;(0,_react.useEffect)(()=>{if(!rules)return;let lowPrioSlots=resolveLowPrioSlots({rules,state,declared,breakpoints:{isMobile,isTablet,isDesktop}});_constants.TOGGLABLE_SLOTS.forEach(slot=>{let condition=rules[slot]?.condition;condition&&condition({...additionalData,isLowPrio:lowPrioSlots.includes(slot),isMobile,isTablet,isDesktop,layout:layoutRef.current})})},[rules,additionalData,state,declared,isMobile,isTablet,isDesktop])}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useLayoutRules",{enumerable:!0,get:function(){return useLayoutRules}});const _react=require("react"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),DEFAULT_PRIORITY={[_constants.Slot.rightPanel]:1,[_constants.Slot.splitview]:2,[_constants.Slot.leftPanel]:3},maxDockedFor=(maxDockedPanels,breakpoints)=>{let{xs,m=xs,l=m}=maxDockedPanels;return breakpoints.isMobile?xs:breakpoints.isTablet?m:l},isDockedPanel=({state,declared,slot})=>!!declared[slot]&&!!state[slot].visible&&(slot===_constants.Slot.rightPanel?"float"!==state.rightPanel.variant:slot!==_constants.Slot.leftPanel||"sidebar"===state.leftPanel.variant),resolveLowPrioSlots=({rules,state,declared,breakpoints})=>{let freeSlots=Math.max(0,maxDockedFor(rules.maxDockedPanels,breakpoints)-1),priorityFor=slot=>rules[slot]?.priority??DEFAULT_PRIORITY[slot],outranks=(slot,other)=>{let byPriority=priorityFor(slot)-priorityFor(other);return 0!==byPriority?byPriority<0:_constants.PANEL_ORDER.indexOf(slot)<_constants.PANEL_ORDER.indexOf(other)},countStrongerDocked=slot=>_constants.TOGGLABLE_SLOTS.filter(other=>other!==slot&&isDockedPanel({state,declared,slot:other})&&outranks(other,slot)).length;return _constants.TOGGLABLE_SLOTS.filter(slot=>countStrongerDocked(slot)>=freeSlots)};function useLayoutRules({layout,declared,rules,additionalData}){let layoutRef=(0,_react.useRef)(layout);layoutRef.current=layout;let{isMobile,isTablet,isDesktop}=(0,_useBreakpoints.useBreakpoints)(),{state}=layout;(0,_react.useEffect)(()=>{if(!rules)return;let lowPrioSlots=resolveLowPrioSlots({rules,state,declared,breakpoints:{isMobile,isTablet,isDesktop}});_constants.TOGGLABLE_SLOTS.forEach(slot=>{let condition=rules[slot]?.condition;condition&&condition({...additionalData,isLowPrio:lowPrioSlots.includes(slot),isMobile,isTablet,isDesktop,layout:layoutRef.current})})},[rules,additionalData,state,declared,isMobile,isTablet,isDesktop])}

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

@@ -0,0 +1,6 @@
+/** DOM id of the rendered left panel, generated once per `Layout`. Lets a
+ *  control living OUTSIDE the panel - the nav left bar's open button - point
+ *  `aria-controls` at it without the two components knowing each other. Empty
+ *  outside a `Layout`, where there is no panel to reference. */
+export declare const LeftPanelIdContext: React.Context<string>;
+export declare const useLeftPanelId: () => string;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LeftPanelIdContext(){return LeftPanelIdContext},get useLeftPanelId(){return useLeftPanelId}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),LeftPanelIdContext=(0,_react.createContext)(""),useLeftPanelId=()=>(0,_react.useContext)(LeftPanelIdContext);

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

@@ -14,6 +14,12 @@ export type PanelDockedSlideOptions = {
     /** Forwarded to the declaration: lock the column's width when the window
      *  resizes. Doesn't affect the slide, which resizes the column outright. */
     lockWidthOnWindowResize?: boolean;
+    /** Width the column rests at while hidden, instead of collapsing to nothing.
+     *  Set it and the column never unmounts: closing narrows it to this, opening
+     *  widens it back, so one box carries both states (a nav left bar that widens
+     *  into the panel). The column stops being collapsible - there is no zero to
+     *  collapse to - and this becomes its `minSize` while it is hidden. */
+    collapsedSize?: Size;
 };
 export type PanelDockedSlide = {
     /** Whether the panel's content should render at all (entering, open, or
@@ -26,10 +32,9 @@ export type PanelDockedSlide = {
 /**
  * Animates a docked side panel's open/close as a width slide on its
  * `react-resizable-panels` column, pushing neighbouring content smoothly
- * instead of snapping. Slot-generic - works for either side panel; render the
- * returned state with {@link PanelSlideBody}. Falls back to an instant
- * open/close when the panel isn't collapsible, no handle is available, or
- * reduced motion is requested. The mobile modal-drawer lifecycle lives in
+ * instead of snapping. Slot-generic - works for either side panel. Falls back to
+ * an instant open/close when the panel isn't collapsible, no handle is
+ * available, or reduced motion is requested. The mobile modal-drawer lifecycle lives in
  * {@link useExitAnimation} and the Drawer's styled components.
  */
-export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, }: PanelDockedSlideOptions): PanelDockedSlide;
+export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, collapsedSize, }: PanelDockedSlideOptions): PanelDockedSlide;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"usePanelDockedSlide",{enumerable:!0,get:function(){return usePanelDockedSlide}});const _react=require("react"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_useLayout=require("./useLayout"),parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}};function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize}){let{isVisible,state}=(0,_useLayout.useLayout)()[slot],theme=(0,_react1.useTheme)(),window=(0,_useWindow.useWindow)(),animation=(0,_registry.usePanelAnimationControl)(),reducedMotion=(0,_prefersReducedMotion.prefersReducedMotion)(window),[isMounted,setIsMounted]=(0,_react.useState)(isVisible),[phase,setPhase]=(0,_react.useState)("idle"),[pinnedWidth,setPinnedWidth]=(0,_react.useState)(null),[prevVisible,setPrevVisible]=(0,_react.useState)(isVisible);return isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0)),(0,_registry.useDeclarePanel)(slot,{defaultSize:"entering"===phase&&collapsible&&!reducedMotion?0:defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize}),(0,_registry.usePanelPresence)(slot,isMounted),(0,_react.useLayoutEffect)(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setPinnedWidth(null),"exiting"===phase&&setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let targetPx=resolveSizePx(targetSize,element.closest("[data-group]")?.getBoundingClientRect().width??null);setPinnedWidth("entering"===phase?targetPx:handle.getSize().inPixels),setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return!collapsible||reducedMotion?settle(animation?.getHandle(slot)??null):waitForColumn(0),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,animation,window,theme]),{isMounted,pinnedWidth}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"usePanelDockedSlide",{enumerable:!0,get:function(){return usePanelDockedSlide}});const _react=require("react"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_useLayout=require("./useLayout"),parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize;function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=(0,_useLayout.useLayout)()[slot],theme=(0,_react1.useTheme)(),window=(0,_useWindow.useWindow)(),animation=(0,_registry.usePanelAnimationControl)(),rowKey=(0,_registry.usePanelRow)(),reducedMotion=(0,_prefersReducedMotion.prefersReducedMotion)(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=(0,_react.useState)(isVisible),[phase,setPhase]=(0,_react.useState)("idle"),[pinnedWidth,setPinnedWidth]=(0,_react.useState)(null),[prevVisible,setPrevVisible]=(0,_react.useState)(isVisible);isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;(0,_registry.useDeclarePanel)(slot,{defaultSize:mountDefaultSizeFor({collapsedSize,defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:hasCollapsedRest&&!isVisible?collapsedSize:minSize??collapsedSize,maxSize,collapsible:isCollapsible,resizable,lockWidthOnWindowResize}),(0,_registry.usePanelPresence)(slot,hasCollapsedRest||isMounted);let latestRest=(0,_react.useRef)({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},(0,_react.useLayoutEffect)(()=>{if(!hasCollapsedRest)return;let frame=0,cancelled=!1,resizeToRest=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){let rest=latestRest.current;if("idle"!==rest.phase)return;let restSize=rest.isVisible?rest.openSize??minSize:collapsedSize;try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return Promise.resolve().then(()=>resizeToRest(0)),()=>{cancelled=!0,window.cancelAnimationFrame(frame)}},[rowKey]),(0,_react.useLayoutEffect)(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setPinnedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setPinnedWidth("entering"===phase?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitsForRelaxedMinimum="exiting"===phase&&hasCollapsedRest,waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&waitsForRelaxedMinimum){frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1));return}let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme]),{isMounted:hasCollapsedRest||isMounted,pinnedWidth}}

package/build/cjs/index.d.ts

@@ -29,6 +29,14 @@ export * from "./components/Composite/FilterDialog/FilterDialog";
 export * from "./components/Container";
 export * from "./components/Content/ContentBadge/ContentBadge";
 export * from "./components/Content/ContentBox/ContentBox";
+export * from "./components/Content/ContentBrandName/ContentBrandName";
+export * from "./components/Content/ContentBox/constants";
+export type { ContentBoxColorVariant, ContentBoxType, } from "./components/Content/ContentBox/types";
+export * from "./components/Content/ContentCaseText/ContentCaseText";
+export * from "./components/Content/ContentCitation/ContentCitation";
+export { ContentCitationLink, type ContentCitationLinkProps, } from "./components/Content/ContentCitation/ContentCitationLink";
+export * from "./components/Content/ContentCitation/ContentCitationLookupLink";
+export * from "./components/Content/ContentCitation/ContentCitationTitle";
 export * from "./components/Content/ContentCheckbox/ContentCheckbox";
 export * from "./components/Content/ContentFontResizer";
 export * from "./components/Content/ContentHeading/ContentHeading";
@@ -72,6 +80,8 @@ export * from "./components/Image/Image";
 export * from "./components/Inline/Inline";
 export * from "./components/InlineMessage/InlineMessage";
 export * from "./components/InteractiveBox/InteractiveBox";
+export * from "./components/Kbd/Kbd";
+export * from "./components/KbdGroup/KbdGroup";
 export * from "./components/Layout";
 export * from "./components/Lightbox/Lightbox";
 export * from "./components/Link/Link";

package/build/cjs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get CacheProvider(){return _react.CacheProvider},get ThemeProvider(){return _react.ThemeProvider},get createCache(){return _cache.default},get dark(){return dark},get light(){return light}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _export_star=require("@swc/helpers/_/_export_star"),_interop_require_default=require("@swc/helpers/_/_interop_require_default"),_visualConfig=require("./web-tokens/visualConfig"),_cache=/*#__PURE__*/_interop_require_default._(require("@emotion/cache")),_react=require("@emotion/react");_export_star._(require("./components/AccessCardItem/AccessCardItem"),exports),_export_star._(require("./components/AIButton/AIButton"),exports),_export_star._(require("./components/AIFloatingButton/AIFloatingButton"),exports),_export_star._(require("./components/Avatar/Avatar"),exports),_export_star._(require("./components/AvatarGroup/AvatarGroup"),exports),_export_star._(require("./components/Badge/Badge"),exports),_export_star._(require("./components/BinaryFeedback/BinaryFeedback"),exports),_export_star._(require("./components/Box/Box"),exports),_export_star._(require("./components/BulkActionsToolbar/BulkActionsToolbar"),exports),_export_star._(require("./components/Button/Button"),exports),_export_star._(require("./components/Callout/Callout"),exports),_export_star._(require("./components/Card/Card"),exports),_export_star._(require("./components/Card/CardBox/CardBox"),exports),_export_star._(require("./components/CatalogCard/CatalogCard"),exports),_export_star._(require("./components/ChatMessage"),exports),_export_star._(require("./components/ChatResponse"),exports),_export_star._(require("./components/CheckboxCard/CheckboxCard"),exports),_export_star._(require("./components/Collapsible/Collapsible"),exports),_export_star._(require("./components/ColorIndicator/ColorIndicator"),exports),_export_star._(require("./components/ColorPicker/ColorPicker"),exports),_export_star._(require("./components/Column/Columns"),exports),_export_star._(require("./components/Composite/FilterDialog/FilterDialog"),exports),_export_star._(require("./components/Container"),exports),_export_star._(require("./components/Content/ContentBadge/ContentBadge"),exports),_export_star._(require("./components/Content/ContentBox/ContentBox"),exports),_export_star._(require("./components/Content/ContentCheckbox/ContentCheckbox"),exports),_export_star._(require("./components/Content/ContentFontResizer"),exports),_export_star._(require("./components/Content/ContentHeading/ContentHeading"),exports),_export_star._(require("./components/Content/ContentLink/ContentLink"),exports),_export_star._(require("./components/Content/ContentList"),exports),_export_star._(require("./components/Content/ContentPictogramButton/ContentPictogramButton"),exports),_export_star._(require("./components/Content/ContentTable"),exports),_export_star._(require("./components/Content/ContentTableModal/ContentTableModal"),exports),_export_star._(require("./components/Content/ContentText/ContentText"),exports),_export_star._(require("./components/Content/DosageButton"),exports),_export_star._(require("./components/Content/ReferenceButton"),exports),_export_star._(require("./components/CountButton/CountButton"),exports),_export_star._(require("./components/DataTable"),exports),_export_star._(require("./components/DataTable/DataTableToolbar/DataTableToolbar"),exports),_export_star._(require("./components/Divider/Divider"),exports),_export_star._(require("./components/DropdownMenu/DropdownMenu"),exports),_export_star._(require("./components/EntityList"),exports),_export_star._(require("./components/EntityTree"),exports),_export_star._(require("./components/Form/Checkbox/Checkbox"),exports),_export_star._(require("./components/Form/Combobox/Combobox"),exports),_export_star._(require("./components/Form/DateInput/DateInput"),exports),_export_star._(require("./components/Form/DatePicker"),exports),_export_star._(require("./components/Form/FormFieldGroup/FormFieldGroup"),exports),_export_star._(require("./components/Form/Input"),exports),_export_star._(require("./components/Form/MaskedInput/MaskedInput"),exports),_export_star._(require("./components/Form/PasswordInput"),exports),_export_star._(require("./components/Form/Radio/Radio"),exports),_export_star._(require("./components/Form/RadioButton/RadioButton"),exports),_export_star._(require("./components/Form/RangeInput/RangeInput"),exports),_export_star._(require("./components/Form/SearchInput/SearchInput"),exports),_export_star._(require("./components/Form/SegmentedControl/SegmentedControl"),exports),_export_star._(require("./components/Form/Select"),exports),_export_star._(require("./components/Form/Textarea/Textarea"),exports),_export_star._(require("./components/Form/Toggle/Toggle"),exports),_export_star._(require("./components/Form/ToggleButton/ToggleButton"),exports),_export_star._(require("./components/Form/ToolbarToggle/ToolbarToggle"),exports),_export_star._(require("./components/Grid/Grid"),exports),_export_star._(require("./components/Icon/Icon"),exports),_export_star._(require("./components/IconTile/IconTile"),exports),_export_star._(require("./components/Image/Image"),exports),_export_star._(require("./components/Inline/Inline"),exports),_export_star._(require("./components/InlineMessage/InlineMessage"),exports),_export_star._(require("./components/InteractiveBox/InteractiveBox"),exports),_export_star._(require("./components/Layout"),exports),_export_star._(require("./components/Lightbox/Lightbox"),exports),_export_star._(require("./components/Link/Link"),exports),_export_star._(require("./components/LoadingSpinner/LoadingSpinner"),exports),_export_star._(require("./components/Logo/Logo"),exports),_export_star._(require("./components/MediaItem"),exports),_export_star._(require("./components/MediaViewerBar/MediaViewerBar"),exports),_export_star._(require("./components/MediaViewerCarousel/MediaViewerCarousel"),exports),_export_star._(require("./components/NavBar"),exports),_export_star._(require("./components/Notification/Notification"),exports),_export_star._(require("./components/Pagination/Pagination"),exports),_export_star._(require("./components/Patterns/ButtonGroup/ButtonGroup"),exports),_export_star._(require("./components/Patterns/EmptyState/EmptyState"),exports),_export_star._(require("./components/Patterns/Modal/Modal"),exports),_export_star._(require("./components/PictogramButton/PictogramButton"),exports),_export_star._(require("./components/Popover/Popover"),exports),_export_star._(require("./components/ProgressBar/ProgressBar"),exports),_export_star._(require("./components/PromptButton/PromptButton"),exports),_export_star._(require("./components/PromptButtonGroup/PromptButtonGroup"),exports),_export_star._(require("./components/PromptInput/PromptInput"),exports),_export_star._(require("./components/QBankRichText/QBankRichText"),exports),_export_star._(require("./components/RadioCard/RadioCard"),exports),_export_star._(require("./components/RangePopover/RangePopover"),exports),_export_star._(require("./components/RoundButton/RoundButton"),exports),_export_star._(require("./components/SearchResult/SearchResult"),exports),_export_star._(require("./components/SegmentedProgressBar/SegmentedProgressBar"),exports),_export_star._(require("./components/Sheet/Sheet"),exports),_export_star._(require("./components/SplashCard/SplashCard"),exports),_export_star._(require("./components/SplashCardMedia/SplashCardMedia"),exports),_export_star._(require("./components/Stack/Stack"),exports),_export_star._(require("./components/StatusIndicator/StatusIndicator"),exports),_export_star._(require("./components/SubThemeProvider/SubThemeProvider"),exports),_export_star._(require("./components/Tabs/Tabs"),exports),_export_star._(require("./components/Tag/Tag"),exports),_export_star._(require("./components/TagGroup/TagGroup"),exports),_export_star._(require("./components/Toast"),exports),_export_star._(require("./components/Toggletip/Toggletip"),exports),_export_star._(require("./components/Tooltip/Tooltip"),exports),_export_star._(require("./components/Tutorialtip/Tutorialtip"),exports),_export_star._(require("./components/Typography/Header"),exports),_export_star._(require("./components/Typography/StyledText/StyledText"),exports),_export_star._(require("./components/Typography/Text"),exports),_export_star._(require("./components/Typography/TextClamped/TextClamped"),exports),_export_star._(require("./components/UserHighlightTooltip/UserHighlightTooltip"),exports),_export_star._(require("./components/Utilities/AnimatedBorder/useAnimatedBorder"),exports),_export_star._(require("./components/Utilities/ContainerQuery/ContainerQuery"),exports),_export_star._(require("./components/Utilities/Expandable/Expandable"),exports),_export_star._(require("./components/Utilities/ScreenReaderText/ScreenReaderText"),exports),_export_star._(require("./shared/useSelectionRange"),exports);const{dark,light}=_visualConfig.ambossVisualConfiguration;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get CacheProvider(){return _react.CacheProvider},get ContentCitationLink(){return _ContentCitationLink.ContentCitationLink},get ThemeProvider(){return _react.ThemeProvider},get createCache(){return _cache.default},get dark(){return dark},get light(){return light}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _export_star=require("@swc/helpers/_/_export_star"),_interop_require_default=require("@swc/helpers/_/_interop_require_default"),_visualConfig=require("./web-tokens/visualConfig"),_cache=/*#__PURE__*/_interop_require_default._(require("@emotion/cache")),_react=require("@emotion/react");_export_star._(require("./components/AccessCardItem/AccessCardItem"),exports),_export_star._(require("./components/AIButton/AIButton"),exports),_export_star._(require("./components/AIFloatingButton/AIFloatingButton"),exports),_export_star._(require("./components/Avatar/Avatar"),exports),_export_star._(require("./components/AvatarGroup/AvatarGroup"),exports),_export_star._(require("./components/Badge/Badge"),exports),_export_star._(require("./components/BinaryFeedback/BinaryFeedback"),exports),_export_star._(require("./components/Box/Box"),exports),_export_star._(require("./components/BulkActionsToolbar/BulkActionsToolbar"),exports),_export_star._(require("./components/Button/Button"),exports),_export_star._(require("./components/Callout/Callout"),exports),_export_star._(require("./components/Card/Card"),exports),_export_star._(require("./components/Card/CardBox/CardBox"),exports),_export_star._(require("./components/CatalogCard/CatalogCard"),exports),_export_star._(require("./components/ChatMessage"),exports),_export_star._(require("./components/ChatResponse"),exports),_export_star._(require("./components/CheckboxCard/CheckboxCard"),exports),_export_star._(require("./components/Collapsible/Collapsible"),exports),_export_star._(require("./components/ColorIndicator/ColorIndicator"),exports),_export_star._(require("./components/ColorPicker/ColorPicker"),exports),_export_star._(require("./components/Column/Columns"),exports),_export_star._(require("./components/Composite/FilterDialog/FilterDialog"),exports),_export_star._(require("./components/Container"),exports),_export_star._(require("./components/Content/ContentBadge/ContentBadge"),exports),_export_star._(require("./components/Content/ContentBox/ContentBox"),exports),_export_star._(require("./components/Content/ContentBrandName/ContentBrandName"),exports),_export_star._(require("./components/Content/ContentBox/constants"),exports),_export_star._(require("./components/Content/ContentCaseText/ContentCaseText"),exports),_export_star._(require("./components/Content/ContentCitation/ContentCitation"),exports);const _ContentCitationLink=require("./components/Content/ContentCitation/ContentCitationLink");_export_star._(require("./components/Content/ContentCitation/ContentCitationLookupLink"),exports),_export_star._(require("./components/Content/ContentCitation/ContentCitationTitle"),exports),_export_star._(require("./components/Content/ContentCheckbox/ContentCheckbox"),exports),_export_star._(require("./components/Content/ContentFontResizer"),exports),_export_star._(require("./components/Content/ContentHeading/ContentHeading"),exports),_export_star._(require("./components/Content/ContentLink/ContentLink"),exports),_export_star._(require("./components/Content/ContentList"),exports),_export_star._(require("./components/Content/ContentPictogramButton/ContentPictogramButton"),exports),_export_star._(require("./components/Content/ContentTable"),exports),_export_star._(require("./components/Content/ContentTableModal/ContentTableModal"),exports),_export_star._(require("./components/Content/ContentText/ContentText"),exports),_export_star._(require("./components/Content/DosageButton"),exports),_export_star._(require("./components/Content/ReferenceButton"),exports),_export_star._(require("./components/CountButton/CountButton"),exports),_export_star._(require("./components/DataTable"),exports),_export_star._(require("./components/DataTable/DataTableToolbar/DataTableToolbar"),exports),_export_star._(require("./components/Divider/Divider"),exports),_export_star._(require("./components/DropdownMenu/DropdownMenu"),exports),_export_star._(require("./components/EntityList"),exports),_export_star._(require("./components/EntityTree"),exports),_export_star._(require("./components/Form/Checkbox/Checkbox"),exports),_export_star._(require("./components/Form/Combobox/Combobox"),exports),_export_star._(require("./components/Form/DateInput/DateInput"),exports),_export_star._(require("./components/Form/DatePicker"),exports),_export_star._(require("./components/Form/FormFieldGroup/FormFieldGroup"),exports),_export_star._(require("./components/Form/Input"),exports),_export_star._(require("./components/Form/MaskedInput/MaskedInput"),exports),_export_star._(require("./components/Form/PasswordInput"),exports),_export_star._(require("./components/Form/Radio/Radio"),exports),_export_star._(require("./components/Form/RadioButton/RadioButton"),exports),_export_star._(require("./components/Form/RangeInput/RangeInput"),exports),_export_star._(require("./components/Form/SearchInput/SearchInput"),exports),_export_star._(require("./components/Form/SegmentedControl/SegmentedControl"),exports),_export_star._(require("./components/Form/Select"),exports),_export_star._(require("./components/Form/Textarea/Textarea"),exports),_export_star._(require("./components/Form/Toggle/Toggle"),exports),_export_star._(require("./components/Form/ToggleButton/ToggleButton"),exports),_export_star._(require("./components/Form/ToolbarToggle/ToolbarToggle"),exports),_export_star._(require("./components/Grid/Grid"),exports),_export_star._(require("./components/Icon/Icon"),exports),_export_star._(require("./components/IconTile/IconTile"),exports),_export_star._(require("./components/Image/Image"),exports),_export_star._(require("./components/Inline/Inline"),exports),_export_star._(require("./components/InlineMessage/InlineMessage"),exports),_export_star._(require("./components/InteractiveBox/InteractiveBox"),exports),_export_star._(require("./components/Kbd/Kbd"),exports),_export_star._(require("./components/KbdGroup/KbdGroup"),exports),_export_star._(require("./components/Layout"),exports),_export_star._(require("./components/Lightbox/Lightbox"),exports),_export_star._(require("./components/Link/Link"),exports),_export_star._(require("./components/LoadingSpinner/LoadingSpinner"),exports),_export_star._(require("./components/Logo/Logo"),exports),_export_star._(require("./components/MediaItem"),exports),_export_star._(require("./components/MediaViewerBar/MediaViewerBar"),exports),_export_star._(require("./components/MediaViewerCarousel/MediaViewerCarousel"),exports),_export_star._(require("./components/NavBar"),exports),_export_star._(require("./components/Notification/Notification"),exports),_export_star._(require("./components/Pagination/Pagination"),exports),_export_star._(require("./components/Patterns/ButtonGroup/ButtonGroup"),exports),_export_star._(require("./components/Patterns/EmptyState/EmptyState"),exports),_export_star._(require("./components/Patterns/Modal/Modal"),exports),_export_star._(require("./components/PictogramButton/PictogramButton"),exports),_export_star._(require("./components/Popover/Popover"),exports),_export_star._(require("./components/ProgressBar/ProgressBar"),exports),_export_star._(require("./components/PromptButton/PromptButton"),exports),_export_star._(require("./components/PromptButtonGroup/PromptButtonGroup"),exports),_export_star._(require("./components/PromptInput/PromptInput"),exports),_export_star._(require("./components/QBankRichText/QBankRichText"),exports),_export_star._(require("./components/RadioCard/RadioCard"),exports),_export_star._(require("./components/RangePopover/RangePopover"),exports),_export_star._(require("./components/RoundButton/RoundButton"),exports),_export_star._(require("./components/SearchResult/SearchResult"),exports),_export_star._(require("./components/SegmentedProgressBar/SegmentedProgressBar"),exports),_export_star._(require("./components/Sheet/Sheet"),exports),_export_star._(require("./components/SplashCard/SplashCard"),exports),_export_star._(require("./components/SplashCardMedia/SplashCardMedia"),exports),_export_star._(require("./components/Stack/Stack"),exports),_export_star._(require("./components/StatusIndicator/StatusIndicator"),exports),_export_star._(require("./components/SubThemeProvider/SubThemeProvider"),exports),_export_star._(require("./components/Tabs/Tabs"),exports),_export_star._(require("./components/Tag/Tag"),exports),_export_star._(require("./components/TagGroup/TagGroup"),exports),_export_star._(require("./components/Toast"),exports),_export_star._(require("./components/Toggletip/Toggletip"),exports),_export_star._(require("./components/Tooltip/Tooltip"),exports),_export_star._(require("./components/Tutorialtip/Tutorialtip"),exports),_export_star._(require("./components/Typography/Header"),exports),_export_star._(require("./components/Typography/StyledText/StyledText"),exports),_export_star._(require("./components/Typography/Text"),exports),_export_star._(require("./components/Typography/TextClamped/TextClamped"),exports),_export_star._(require("./components/UserHighlightTooltip/UserHighlightTooltip"),exports),_export_star._(require("./components/Utilities/AnimatedBorder/useAnimatedBorder"),exports),_export_star._(require("./components/Utilities/ContainerQuery/ContainerQuery"),exports),_export_star._(require("./components/Utilities/Expandable/Expandable"),exports),_export_star._(require("./components/Utilities/ScreenReaderText/ScreenReaderText"),exports),_export_star._(require("./shared/useSelectionRange"),exports);const{dark,light}=_visualConfig.ambossVisualConfiguration;

package/build/cjs/shared/mixins/getLeftPanelFadeStyles.d.ts

@@ -0,0 +1,19 @@
+import type { CSSObject, Theme } from "@emotion/react";
+type PanelContentFadeOptions = {
+    theme: Theme;
+    /** Whether the content is currently faded out. */
+    isFaded: boolean;
+};
+/**
+ * Fades a docked panel's content out across its collapse, and back in at once
+ * when it reopens - the panel covers the left bar the instant it is shown, so
+ * there is nothing to reveal on the way in.
+ *
+ * Runs on the column's own slide timing, so the two move together.
+ *
+ * Applied per part rather than to the whole panel: a control at the header's
+ * trailing edge travels down onto the left bar's own and has to stay solid the
+ * whole way, so it is left out.
+ */
+export declare function getLeftPanelFadeStyles({ theme, isFaded, }: PanelContentFadeOptions): CSSObject;
+export {};

package/build/cjs/shared/mixins/getLeftPanelFadeStyles.js

@@ -0,0 +1 @@
+"use strict";function getLeftPanelFadeStyles({theme,isFaded}){let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{opacity:isFaded?theme.variables.opacity.hidden:theme.variables.opacity.visible,transition:isFaded?`opacity ${duration} ${timingFunction}`:"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"getLeftPanelFadeStyles",{enumerable:!0,get:function(){return getLeftPanelFadeStyles}});

package/build/cjs/shared/mixins/index.d.ts

@@ -6,4 +6,5 @@ export { getBaseButtonStyles } from "./Button/getBaseButtonStyles";
 export { getPressedStyles } from "./Button/getPressedStyles";
 export { getPillStyles } from "./Button/getPillStyles";
 export { getFocusStyles } from "./getFocusStyles";
+export { getLeftPanelFadeStyles } from "./getLeftPanelFadeStyles";
 export { getPrimaryVariantStyles, getSecondaryVariantStyles, getTertiaryVariantStyles, } from "./Button/getVariantStyles";

package/build/cjs/shared/mixins/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get getBaseButtonStyles(){return _getBaseButtonStyles.getBaseButtonStyles},get getButtonAppearanceReset(){return _getButtonAppearanceReset.getButtonAppearanceReset},get getDisabledStyles(){return _getDisabledStyles.getDisabledStyles},get getFocusStyles(){return _getFocusStyles.getFocusStyles},get getInputTextPlaceholder(){return _getInputTextPlaceholder.getInputTextPlaceholder},get getInputTextStyles(){return _getInputTextStyles.getInputTextStyles},get getPillStyles(){return _getPillStyles.getPillStyles},get getPressedStyles(){return _getPressedStyles.getPressedStyles},get getPrimaryVariantStyles(){return _getVariantStyles.getPrimaryVariantStyles},get getSecondaryVariantStyles(){return _getVariantStyles.getSecondaryVariantStyles},get getTertiaryVariantStyles(){return _getVariantStyles.getTertiaryVariantStyles}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _getInputTextPlaceholder=require("./TextInput/getInputTextPlaceholder"),_getInputTextStyles=require("./TextInput/getInputTextStyles"),_getDisabledStyles=require("./Button/getDisabledStyles"),_getButtonAppearanceReset=require("./Button/getButtonAppearanceReset"),_getBaseButtonStyles=require("./Button/getBaseButtonStyles"),_getPressedStyles=require("./Button/getPressedStyles"),_getPillStyles=require("./Button/getPillStyles"),_getFocusStyles=require("./getFocusStyles"),_getVariantStyles=require("./Button/getVariantStyles");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get getBaseButtonStyles(){return _getBaseButtonStyles.getBaseButtonStyles},get getButtonAppearanceReset(){return _getButtonAppearanceReset.getButtonAppearanceReset},get getDisabledStyles(){return _getDisabledStyles.getDisabledStyles},get getFocusStyles(){return _getFocusStyles.getFocusStyles},get getInputTextPlaceholder(){return _getInputTextPlaceholder.getInputTextPlaceholder},get getInputTextStyles(){return _getInputTextStyles.getInputTextStyles},get getLeftPanelFadeStyles(){return _getLeftPanelFadeStyles.getLeftPanelFadeStyles},get getPillStyles(){return _getPillStyles.getPillStyles},get getPressedStyles(){return _getPressedStyles.getPressedStyles},get getPrimaryVariantStyles(){return _getVariantStyles.getPrimaryVariantStyles},get getSecondaryVariantStyles(){return _getVariantStyles.getSecondaryVariantStyles},get getTertiaryVariantStyles(){return _getVariantStyles.getTertiaryVariantStyles}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _getInputTextPlaceholder=require("./TextInput/getInputTextPlaceholder"),_getInputTextStyles=require("./TextInput/getInputTextStyles"),_getDisabledStyles=require("./Button/getDisabledStyles"),_getButtonAppearanceReset=require("./Button/getButtonAppearanceReset"),_getBaseButtonStyles=require("./Button/getBaseButtonStyles"),_getPressedStyles=require("./Button/getPressedStyles"),_getPillStyles=require("./Button/getPillStyles"),_getFocusStyles=require("./getFocusStyles"),_getLeftPanelFadeStyles=require("./getLeftPanelFadeStyles"),_getVariantStyles=require("./Button/getVariantStyles");