@amboss/design-system 4.9.0 → 4.9.2

package/build/cjs/components/Content/ContentBox/constants.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get CONTENT_BOX_TYPE_TO_COLOR_VARIANT(){return CONTENT_BOX_TYPE_TO_COLOR_VARIANT},get CONTENT_BOX_TYPE_TO_ICON(){return CONTENT_BOX_TYPE_TO_ICON},get TEXT_COLOR_BY_COLOR_VARIANT(){return TEXT_COLOR_BY_COLOR_VARIANT}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const CONTENT_BOX_TYPE_TO_COLOR_VARIANT={merke:"success",merkspruch:"info",cave:"error","clinic-box":"neutral","case-link":"success","dgim-negative":"error","dgim-positive":"success","guideline-recommendations":"neutral"},TEXT_COLOR_BY_COLOR_VARIANT={info:"info",warning:"primary",error:"error",success:"success",neutral:"primary"},CONTENT_BOX_TYPE_TO_ICON={merke:"stethoscope",merkspruch:"bulb",cave:"alert-triangle","clinic-box":"stethoscope","case-link":"link","dgim-negative":"dgim","dgim-positive":"dgim","guideline-recommendations":"compass"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get CONTENT_BOX_TYPE_TO_COLOR_VARIANT(){return CONTENT_BOX_TYPE_TO_COLOR_VARIANT},get CONTENT_BOX_TYPE_TO_ICON(){return CONTENT_BOX_TYPE_TO_ICON},get TEXT_COLOR_BY_COLOR_VARIANT(){return TEXT_COLOR_BY_COLOR_VARIANT}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const CONTENT_BOX_TYPE_TO_COLOR_VARIANT={merke:"success",merkspruch:"info",cave:"error","clinic-box":"neutral","case-link":"success","guideline-recommendations":"neutral"},TEXT_COLOR_BY_COLOR_VARIANT={info:"info",warning:"primary",error:"error",success:"success",neutral:"primary"},CONTENT_BOX_TYPE_TO_ICON={merke:"stethoscope",merkspruch:"bulb",cave:"alert-triangle","clinic-box":"stethoscope","case-link":"link","guideline-recommendations":"compass"};

package/build/cjs/components/Content/ContentBox/types.d.ts

@@ -1,2 +1,2 @@
 export type ContentBoxColorVariant = "info" | "error" | "success" | "warning" | "neutral";
-export type ContentBoxType = "merke" | "merkspruch" | "cave" | "clinic-box" | "case-link" | "dgim-negative" | "dgim-positive" | "guideline-recommendations";
+export type ContentBoxType = "merke" | "merkspruch" | "cave" | "clinic-box" | "case-link" | "guideline-recommendations";

package/build/cjs/components/Internal/LayoutFloat/LayoutFloatDragHandleGuard.d.ts

@@ -6,5 +6,7 @@ export type LayoutFloatDragHandleGuardProps = {
  * Shields a header slot's content from the enclosing `LayoutFloatDragHandle`'s
  * `moveProps`: a drag can still start on it, but its own click/arrow-key
  * behavior wins. Inert (guards detached) while the handle isn't draggable.
+ * Renders nothing when there's no content to shield, so an absent slot
+ * doesn't leave an empty flex item behind for `Inline`'s gap to act on.
  */
-export declare function LayoutFloatDragHandleGuard({ children, }: LayoutFloatDragHandleGuardProps): React.ReactElement;
+export declare function LayoutFloatDragHandleGuard({ children, }: LayoutFloatDragHandleGuardProps): React.ReactElement | null;

package/build/cjs/components/Internal/LayoutFloat/LayoutFloatDragHandleGuard.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutFloatDragHandleGuard",{enumerable:!0,get:function(){return LayoutFloatDragHandleGuard}});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")),_useLayoutFloatDragHandleContext=require("./useLayoutFloatDragHandleContext"),StyledSlotDragGuard=(0,_styled.default)("div",{target:"eo2kwnv0",label:"StyledSlotDragGuard"})({display:"contents"});function LayoutFloatDragHandleGuard({children}){let{canDrag,onSlotPointerDown,onSlotPointerCancel,onSlotClickCapture,onSlotKeyDown}=(0,_useLayoutFloatDragHandleContext.useLayoutFloatDragHandleContext)(),guardProps={};return canDrag&&(guardProps={onPointerDown:onSlotPointerDown,onPointerCancel:onSlotPointerCancel,onClickCapture:onSlotClickCapture,onKeyDown:onSlotKeyDown}),_react.default.createElement(StyledSlotDragGuard,guardProps,children)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutFloatDragHandleGuard",{enumerable:!0,get:function(){return LayoutFloatDragHandleGuard}});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")),_useLayoutFloatDragHandleContext=require("./useLayoutFloatDragHandleContext"),StyledSlotDragGuard=(0,_styled.default)("div",{target:"e15tse230",label:"StyledSlotDragGuard"})({display:"contents"});function LayoutFloatDragHandleGuard({children}){let{canDrag,onSlotPointerDown,onSlotPointerCancel,onSlotClickCapture,onSlotKeyDown}=(0,_useLayoutFloatDragHandleContext.useLayoutFloatDragHandleContext)();if(!children)return null;let guardProps={};return canDrag&&(guardProps={onPointerDown:onSlotPointerDown,onPointerCancel:onSlotPointerCancel,onClickCapture:onSlotClickCapture,onKeyDown:onSlotKeyDown}),_react.default.createElement(StyledSlotDragGuard,guardProps,children)}

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 _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:"e11b515r0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=(0,_styled.default)("div",{target:"e11b515r1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=(0,_styled.default)("div",{target:"e11b515r2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded:isContentFaded})})),StyledSlotContent=(0,_styled.default)("div",{target:"e11b515r3",label:"StyledSlotContent"})({width:"max-content"}),StyledTrailingGroup=(0,_styled.default)("div",{target:"e11b515r4",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,{as:title.as,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))))))}
+"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"),_constants=require("../../Layout/-constants"),_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:"e13e79rk0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=(0,_styled.default)("div",{target:"e13e79rk1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=(0,_styled.default)("div",{target:"e13e79rk2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded:isContentFaded})})),StyledSlotContent=(0,_styled.default)("div",{target:"e13e79rk3",label:"StyledSlotContent"})({width:"max-content"}),StyledLeadingContent=(0,_styled.default)("div",{target:"e13e79rk4",label:"StyledLeadingContent"})(({theme,hasTitleInset})=>({paddingLeft:hasTitleInset?theme.variables.size.spacing.xxs:0})),StyledTrailingGroup=(0,_styled.default)("div",{target:"e13e79rk5",label:"StyledTrailingGroup"})({alignSelf:"flex-start",flexShrink:0});function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary",hasTitle=title&&!1!==title.isVisible,hasIcon=hasTitle&&void 0!==title.icon;return _react.default.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Box.Box,{vSpace:_constants.LEFT_BAR_BUTTON_INSET.vSpace,lSpace:hasIcon?"xs":"s",rSpace:_constants.LEFT_BAR_BUTTON_INSET.hSpace},_react.default.createElement(StyledHeaderRow,null,_react.default.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},_react.default.createElement(StyledLeadingContent,{hasTitleInset:!!(hasTitle&&!hasIcon)},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},leftSlot&&_react.default.createElement(StyledSlotContent,null,leftSlot),hasTitle&&_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,{as:title.as,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/Layout/-constants.d.ts

@@ -1,3 +1,4 @@
+import type { SpaceSizes } from "../../types";
 /**
  * Slot keys - the single source of truth. The key *types* (`SlotKey`,
  * `SidePanelKey`, `PanelKey`) are derived from these const values below and
@@ -23,6 +24,16 @@ export type PanelKey = (typeof PANELS)[number];
  *  says otherwise. The store leaves `variant` unset until then, so every
  *  reader resolves it against this. */
 export declare const DEFAULT_LEFT_PANEL_VARIANT = "sidebar";
+/** Both axes of the inset between a bar button and the edge of the left bar's
+ *  column. Shared by `LeftBarToggle`'s own button and `PanelHeader`'s trailing
+ *  slot: the header's control walks down onto the bar's as the panel
+ *  collapses, and the two only land on the same spot because both read this
+ *  one value - on both axes - rather than each writing its own. */
+type BarButtonInset = {
+    hSpace: SpaceSizes;
+    vSpace: SpaceSizes;
+};
+export declare const LEFT_BAR_BUTTON_INSET: BarButtonInset;
 /** Everything but pinned `content`, which never competes for row space. */
 export type TogglableSlotKey = Exclude<SlotKey, typeof Slot.content>;
 /** Slots the app opens/closes, in `PANEL_ORDER`. */
@@ -73,3 +84,4 @@ export declare const PANEL_WIDTH_VAR: {
     readonly content: "--ds-layout-content-width";
     readonly rightPanel: "--ds-layout-rightPanel-width";
 };
+export {};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get BOTTOM_BAR_HEIGHT_VAR(){return BOTTOM_BAR_HEIGHT_VAR},get DEFAULT_LEFT_PANEL_VARIANT(){return DEFAULT_LEFT_PANEL_VARIANT},get PAGE_BOTTOM_BAR_INSET(){return PAGE_BOTTOM_BAR_INSET},get PANELS(){return PANELS},get PANEL_ORDER(){return PANEL_ORDER},get PANEL_WIDTH_VAR(){return PANEL_WIDTH_VAR},get RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR(){return RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR},get RIGHT_PANEL_BOTTOM_BAR_INSET(){return RIGHT_PANEL_BOTTOM_BAR_INSET},get SIDE_PANELS(){return SIDE_PANELS},get SPLIT_MAX_WIDTH_VAR(){return SPLIT_MAX_WIDTH_VAR},get SUBNAV_OFFSET_VAR(){return SUBNAV_OFFSET_VAR},get Slot(){return Slot},get TOGGLABLE_SLOTS(){return TOGGLABLE_SLOTS}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _layoutvars=require("../../web-tokens/layout-vars"),Slot={leftPanel:"leftPanel",content:"content",splitview:"splitview",rightPanel:"rightPanel"},SIDE_PANELS=[Slot.leftPanel,Slot.rightPanel],PANELS=[Slot.content,Slot.splitview],PANEL_ORDER=[Slot.leftPanel,Slot.content,Slot.splitview,Slot.rightPanel],DEFAULT_LEFT_PANEL_VARIANT="sidebar",TOGGLABLE_SLOTS=PANEL_ORDER.filter(slot=>slot!==Slot.content),SUBNAV_OFFSET_VAR=_layoutvars.LAYOUT_VARS.subnavOffset,SPLIT_MAX_WIDTH_VAR=_layoutvars.LAYOUT_VARS.splitMaxWidth,BOTTOM_BAR_HEIGHT_VAR=_layoutvars.LAYOUT_VARS.bottomBarHeight,RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR=_layoutvars.LAYOUT_VARS.rightPanelBottomBarHeight,PAGE_BOTTOM_BAR_INSET=`var(${BOTTOM_BAR_HEIGHT_VAR}, 0px)`,RIGHT_PANEL_BOTTOM_BAR_INSET=`var(${RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}, ${PAGE_BOTTOM_BAR_INSET})`,PANEL_WIDTH_VAR={leftPanel:_layoutvars.LAYOUT_VARS.leftPanelWidth,content:_layoutvars.LAYOUT_VARS.contentWidth,rightPanel:_layoutvars.LAYOUT_VARS.rightPanelWidth};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get BOTTOM_BAR_HEIGHT_VAR(){return BOTTOM_BAR_HEIGHT_VAR},get DEFAULT_LEFT_PANEL_VARIANT(){return DEFAULT_LEFT_PANEL_VARIANT},get LEFT_BAR_BUTTON_INSET(){return LEFT_BAR_BUTTON_INSET},get PAGE_BOTTOM_BAR_INSET(){return PAGE_BOTTOM_BAR_INSET},get PANELS(){return PANELS},get PANEL_ORDER(){return PANEL_ORDER},get PANEL_WIDTH_VAR(){return PANEL_WIDTH_VAR},get RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR(){return RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR},get RIGHT_PANEL_BOTTOM_BAR_INSET(){return RIGHT_PANEL_BOTTOM_BAR_INSET},get SIDE_PANELS(){return SIDE_PANELS},get SPLIT_MAX_WIDTH_VAR(){return SPLIT_MAX_WIDTH_VAR},get SUBNAV_OFFSET_VAR(){return SUBNAV_OFFSET_VAR},get Slot(){return Slot},get TOGGLABLE_SLOTS(){return TOGGLABLE_SLOTS}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _layoutvars=require("../../web-tokens/layout-vars"),Slot={leftPanel:"leftPanel",content:"content",splitview:"splitview",rightPanel:"rightPanel"},SIDE_PANELS=[Slot.leftPanel,Slot.rightPanel],PANELS=[Slot.content,Slot.splitview],PANEL_ORDER=[Slot.leftPanel,Slot.content,Slot.splitview,Slot.rightPanel],DEFAULT_LEFT_PANEL_VARIANT="sidebar",LEFT_BAR_BUTTON_INSET={hSpace:"s",vSpace:"xs"},TOGGLABLE_SLOTS=PANEL_ORDER.filter(slot=>slot!==Slot.content),SUBNAV_OFFSET_VAR=_layoutvars.LAYOUT_VARS.subnavOffset,SPLIT_MAX_WIDTH_VAR=_layoutvars.LAYOUT_VARS.splitMaxWidth,BOTTOM_BAR_HEIGHT_VAR=_layoutvars.LAYOUT_VARS.bottomBarHeight,RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR=_layoutvars.LAYOUT_VARS.rightPanelBottomBarHeight,PAGE_BOTTOM_BAR_INSET=`var(${BOTTOM_BAR_HEIGHT_VAR}, 0px)`,RIGHT_PANEL_BOTTOM_BAR_INSET=`var(${RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}, ${PAGE_BOTTOM_BAR_INSET})`,PANEL_WIDTH_VAR={leftPanel:_layoutvars.LAYOUT_VARS.leftPanelWidth,content:_layoutvars.LAYOUT_VARS.contentWidth,rightPanel:_layoutvars.LAYOUT_VARS.rightPanelWidth};

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

@@ -53,9 +53,6 @@ export type SidePanelStateBase = {
     resizable: boolean;
     /** Current size (px number or "%" string). */
     size?: Size;
-    /** Constraint from config (component prop overrides). */
-    minSize?: Size;
-    maxSize?: Size;
 };
 export type LeftPanelState = SidePanelStateBase & {
     /** Render style. Unset until the config or a `setVariant` provides one;
@@ -90,9 +87,6 @@ export type PanelState = {
     /** content is always visible; splitview is toggleable. */
     visible: boolean;
     size?: Size;
-    /** Constraint from config (component prop overrides). */
-    minSize?: Size;
-    maxSize?: Size;
 };
 export type LayoutState = {
     leftPanel: LeftPanelState;
@@ -107,10 +101,8 @@ export type SidePanelConfig = {
      *  panel's own `resizable` prop overrides this. */
     resizable?: boolean;
     defaultSize?: Size;
-    minSize?: Size;
-    maxSize?: Size;
 };
-export type LeftPanelConfig = Omit<SidePanelConfig, "defaultSize" | "minSize" | "maxSize" | "resizable"> & {
+export type LeftPanelConfig = Omit<SidePanelConfig, "defaultSize" | "resizable"> & {
     /** Presentation the panel starts in. Default `"sidebar"`. */
     variant?: LeftPanelVariant;
 };
@@ -122,8 +114,6 @@ export type RightPanelConfig = SidePanelConfig & {
 export type PanelConfig = {
     defaultVisible?: boolean;
     defaultSize?: Size;
-    minSize?: Size;
-    maxSize?: Size;
 };
 /** The split view carries no size of its own: it takes half of
  *  `Layout.Content`'s column whenever it's open, capped by
@@ -131,21 +121,7 @@ export type PanelConfig = {
 export type SplitConfig = {
     defaultVisible?: boolean;
 };
-/**
- * Master switch for the side/split panels.
- * - `false` (default) - panel markers declare nothing and render nothing;
- *   only `Layout.Content` shows.
- * - `"mobile"` - only the mobile overlay presentations render (left-panel
- *   drawer, right-panel sheet). They are portals, so the resizable row - and
- *   with it the react-resizable-panels library - never mounts. Desktop
- *   viewports show no panels.
- * - `true` - everything: docked resizable columns, float window, drawer,
- *   sheet.
- */
-export type LayoutPanelsMode = boolean | "mobile";
 export type LayoutConfig = {
-    /** See {@link LayoutPanelsMode}. Default `false`. */
-    enablePanels?: LayoutPanelsMode;
     leftPanel?: LeftPanelConfig;
     rightPanel?: RightPanelConfig;
     content?: PanelConfig;
@@ -296,8 +272,6 @@ export type SidePanelProps = ForwardedScrollProps & {
      *  and shrinks around it. Drag-resizing is a separate story - see
      *  `resizable`. */
     defaultSize?: Size;
-    minSize?: Size;
-    maxSize?: Size;
     /** Desktop only: allow drag-resizing the panel's column. Overrides the
      *  provider config's `resizable`. When `false`, the column is fixed at
      *  `defaultSize` - neighbours can't resize it either, though they stay
@@ -317,7 +291,7 @@ export type LeftPanelSlotProps = {
 };
 /** No sizing or resizing props: the left panel always opens to the
  *  `layout.leftPanel.width.open` token. */
-export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "minSize" | "maxSize" | "resizable"> & {
+export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "resizable"> & {
     /** Props forwarded to the panel's internal parts. Required: the left bar
      *  always carries the button that opens the panel, and it is icon-only, so its
      *  accessible name can only come from here. Give it the action - the panel's
@@ -329,9 +303,6 @@ export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "minSize" | "m
 };
 export type ContentProps = {
     children: React.ReactNode;
-    /** Number = pixels, unitless string = percent (e.g. `"30%"`). */
-    minSize?: Size;
-    maxSize?: Size;
 };
 /**
  * The split view has no sizing props - open, it takes half of
@@ -357,7 +328,7 @@ export type MobileSplitViewProps = ForwardedScrollProps & {
 };
 export type LayoutProviderProps = {
     children: React.ReactNode;
-    /** Per-slot defaults (`leftPanel` / `rightPanel` / `content` / `splitview`) - e.g. `defaultVisible`, `defaultSize`, `minSize`, `maxSize`, `collapsible`. */
+    /** Per-slot defaults (`leftPanel` / `rightPanel` / `content` / `splitview`) - e.g. `defaultVisible`, `defaultSize`, `collapsible`. */
     config?: LayoutConfig;
     store?: LayoutStore;
     /** Persistence config for the whole layout namespace. */

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Content",{enumerable:!0,get:function(){return Content}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_ContentSplitBase=require("../Split/MobileSplitView/ContentSplitBase"),_useMobileSplitStack=require("../Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("../Split/MobileSplitView/useMobileSplitView"),_ContentDocked=require("./ContentDocked"),Content=({children,minSize,maxSize})=>{(0,_registry.useDeclarePanel)(_constants.Slot.content,{minSize,maxSize,collapsible:!1});let enabled=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),{host,isSplitPresent}=(0,_useMobileSplitStack.useMobileSplitStack)();return enabled&&isSplitPresent&&null!==host?_react.default.createElement(_ContentSplitBase.ContentSplitBase,null,children):_react.default.createElement(_ContentDocked.ContentDocked,null,children)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Content",{enumerable:!0,get:function(){return Content}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_ContentSplitBase=require("../Split/MobileSplitView/ContentSplitBase"),_useMobileSplitStack=require("../Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("../Split/MobileSplitView/useMobileSplitView"),_ContentDocked=require("./ContentDocked"),Content=({children})=>{(0,_registry.useDeclarePanel)(_constants.Slot.content,{collapsible:!1});let enabled=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),{host,isSplitPresent}=(0,_useMobileSplitStack.useMobileSplitStack)();return enabled&&isSplitPresent&&null!==host?_react.default.createElement(_ContentSplitBase.ContentSplitBase,null,children):_react.default.createElement(_ContentDocked.ContentDocked,null,children)};

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"),_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:"exoyye20",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=(0,_styled.default)("div",{target:"exoyye21",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=(0,_styled.default)("div",{target:"exoyye22",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"exoyye23",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:"exoyye24",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"exoyye25",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;
+"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:"e1izvg960",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=(0,_styled.default)("div",{target:"e1izvg961",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=(0,_styled.default)("div",{target:"e1izvg962",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1izvg963",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:"e1izvg964",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e1izvg965",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!(declared[slot]&&(isShown(slot)||present[slot])),defaultSizeFor=({slot,panel,panelState})=>slot===_constants.Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[_constants.Slot.leftPanel]&&"offcanvas"===layoutState[_constants.Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile))&&!(slot===_constants.Slot.leftPanel&&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,maxSize:panel?.maxSize,collapsible:slot!==_constants.Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),rowKey=panelItems.map(item=>item.id).join(","),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?_react.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&declared[id]?.resizable!==!1&&dispatch({type:"resize",slot:id,size:declared[id]?.lockWidthOnWindowResize?Math.round(size.inPixels):`${size.asPercentage}%`})},onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return _react.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.PanelRowContext.Provider,{value:rowKey},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value: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/LayoutProvider.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutProvider",{enumerable:!0,get:function(){return LayoutProvider}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_context=require("./context"),_LayoutCssVars=require("./LayoutCssVars"),_cssVarStore=require("./cssVarStore"),_reducer=require("./reducer"),_store=require("./store");function LayoutProvider({children,config,store,persistenceKey,storage}){let storeRef=(0,_react.useRef)(null);null===storeRef.current&&(storeRef.current=store??(0,_store.createLayoutStore)((0,_reducer.createInitialState)(config)));let cssVarStoreRef=(0,_react.useRef)(null);null===cssVarStoreRef.current&&(cssVarStoreRef.current=(0,_cssVarStore.createLayoutCssVarStore)());let persistence=(0,_react.useMemo)(()=>({persistenceKey,storage}),[persistenceKey,storage]);return _react.default.createElement(_context.LayoutStoreProvider,{value:storeRef.current},_react.default.createElement(_context.LayoutPanelsEnabledProvider,{value:config?.enablePanels??!1},_react.default.createElement(_context.LayoutPersistenceProvider,{value:persistence},_react.default.createElement(_LayoutCssVars.LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},_react.default.createElement(_LayoutCssVars.LayoutCssVars,null),children))))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutProvider",{enumerable:!0,get:function(){return LayoutProvider}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_context=require("./context"),_LayoutCssVars=require("./LayoutCssVars"),_cssVarStore=require("./cssVarStore"),_reducer=require("./reducer"),_store=require("./store");function LayoutProvider({children,config,store,persistenceKey,storage}){let storeRef=(0,_react.useRef)(null);null===storeRef.current&&(storeRef.current=store??(0,_store.createLayoutStore)((0,_reducer.createInitialState)(config)));let cssVarStoreRef=(0,_react.useRef)(null);null===cssVarStoreRef.current&&(cssVarStoreRef.current=(0,_cssVarStore.createLayoutCssVarStore)());let persistence=(0,_react.useMemo)(()=>({persistenceKey,storage}),[persistenceKey,storage]);return _react.default.createElement(_context.LayoutStoreProvider,{value:storeRef.current},_react.default.createElement(_context.LayoutPersistenceProvider,{value:persistence},_react.default.createElement(_LayoutCssVars.LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},_react.default.createElement(_LayoutCssVars.LayoutCssVars,null),children)))}

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

@@ -1 +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,"data-e2e-test-id":dataE2eTestId,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,"data-e2e-test-id":dataE2eTestId,"aria-controls":leftPanelId,"aria-expanded":isVisible}))}
+"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,"data-e2e-test-id":dataE2eTestId,buttonRef}){let{show,isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],leftPanelId=(0,_useLeftPanelId.useLeftPanelId)();return _react.default.createElement(_Box.Box,{space:_constants.LEFT_BAR_BUTTON_INSET.hSpace,vSpace:_constants.LEFT_BAR_BUTTON_INSET.vSpace},_react.default.createElement(_PictogramButton.PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:show,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,"aria-controls":leftPanelId,"aria-expanded":isVisible}))}

package/build/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_wildcard")._(require("react")),_react1=require("@emotion/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"),LeftPanel=({children,slotProps,collapsible=!0,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],canRender=(0,_context.useCanRenderPanel)(),leftPanelId=(0,_react.useId)(),openWidth=(0,_react1.useTheme)().variables.layout.leftPanel.width.open;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,{slotProps:slotProps,isVisible:isVisible,hide:hide,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),docked=_react.default.createElement(_LeftPanelDocked.LeftPanelDocked,{slotProps:slotProps,"aria-label":ariaLabel,defaultSize:parseFloat(openWidth),collapsible:collapsible,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children);return _react.default.createElement(_useLeftPanelId.LeftPanelIdContext.Provider,{value:leftPanelId},{drawer,offcanvas,sidebar:docked}[state.variant])};
+"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")),_react1=require("@emotion/react"),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_useLeftPanelId=require("../useLeftPanelId"),_LeftPanelDocked=require("./LeftPanelDocked"),_LeftPanelDrawer=require("./LeftPanelDrawer"),_LeftPanelOffcanvas=require("./LeftPanelOffcanvas"),LeftPanel=({children,slotProps,collapsible=!0,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],leftPanelId=(0,_react.useId)(),openWidth=(0,_react1.useTheme)().variables.layout.leftPanel.width.open;(0,_registry.useVisibleChange)(isVisible,onVisibleChange);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,{slotProps:slotProps,isVisible:isVisible,hide:hide,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),docked=_react.default.createElement(_LeftPanelDocked.LeftPanelDocked,{slotProps:slotProps,"aria-label":ariaLabel,defaultSize:parseFloat(openWidth),collapsible:collapsible,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/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"),_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)))};
+"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:"e1gnrffs0",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/RightPanel/RightPanel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanel",{enumerable:!0,get:function(){return RightPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_context=require("../context"),_useBreakpoints=require("../../../shared/useBreakpoints"),_RightPanelDocked=require("./RightPanelDocked"),_RightPanelSheet=require("./RightPanelSheet"),RightPanel=({children,defaultSize=378,minSize=328,maxSize="30%",collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[_constants.Slot.rightPanel]:panel}=(0,_useLayout.useLayout)(),{isVisible,hide}=panel,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),canRender=(0,_context.useCanRenderPanel)();(0,_registry.useDeclarePanel)(_constants.Slot.rightPanel,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0,variant});let resolvedVariant=layoutState[_constants.Slot.rightPanel].variant??variant;return((0,_registry.useRunCallbackOnValueChange)(isVisible,onVisibleChange),(0,_registry.useRunCallbackOnValueChange)(resolvedVariant,onVariantChange),canRender)?isMobile?_react.default.createElement(_RightPanelSheet.RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):_react.default.createElement(_RightPanelDocked.RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanel",{enumerable:!0,get:function(){return RightPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_react1=require("@emotion/react"),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_useBreakpoints=require("../../../shared/useBreakpoints"),_RightPanelDocked=require("./RightPanelDocked"),_RightPanelSheet=require("./RightPanelSheet"),RightPanel=({children,defaultSize=378,collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[_constants.Slot.rightPanel]:panel}=(0,_useLayout.useLayout)(),{isVisible,hide}=panel,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),{minWidth,maxWidth}=(0,_react1.useTheme)().variables.layout.rightPanel;(0,_registry.useDeclarePanel)(_constants.Slot.rightPanel,{defaultSize,minSize:minWidth.default,maxSize:maxWidth.default,collapsible,resizable,lockWidthOnWindowResize:!0,variant});let resolvedVariant=layoutState[_constants.Slot.rightPanel].variant??variant;return(0,_registry.useRunCallbackOnValueChange)(isVisible,onVisibleChange),(0,_registry.useRunCallbackOnValueChange)(resolvedVariant,onVariantChange),isMobile?_react.default.createElement(_RightPanelSheet.RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):_react.default.createElement(_RightPanelDocked.RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)};

package/build/cjs/components/Layout/Split/MobileSplitView/useMobileSplitView.d.ts

@@ -1,5 +1,4 @@
-/** Whether the mobile split stack applies to the current viewport: below the
- *  mobile breakpoint with panels enabled. */
+/** Whether the mobile split stack applies to the current viewport. */
 export declare function useMobileSplitViewEnabled(): boolean;
 /** A view's horizontal rest position in the mobile stack: `-1` (parked off the
  *  left edge), `0` (in view), `1` (parked off the right edge). */

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get contentOffsetFor(){return contentOffsetFor},get splitViewOffsetFor(){return splitViewOffsetFor},get useMobileSplitView(){return useMobileSplitView},get useMobileSplitViewEnabled(){return useMobileSplitViewEnabled}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _useBreakpoints=require("../../../../shared/useBreakpoints"),_constants=require("../../-constants"),_context=require("../../context"),_useLayout=require("../../useLayout");function useMobileSplitViewEnabled(){let{isMobile}=(0,_useBreakpoints.useBreakpoints)(),canRenderPanel=(0,_context.useCanRenderPanel)();return isMobile&&canRenderPanel}const contentOffsetFor=isSplitViewActive=>isSplitViewActive?-1:0,splitViewOffsetFor=isSplitViewActive=>+!isSplitViewActive;function useMobileSplitView(){let{isVisible,show,hide}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return{isSplitViewActive:isVisible,showSplitView:show,showContent:hide}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get contentOffsetFor(){return contentOffsetFor},get splitViewOffsetFor(){return splitViewOffsetFor},get useMobileSplitView(){return useMobileSplitView},get useMobileSplitViewEnabled(){return useMobileSplitViewEnabled}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _useBreakpoints=require("../../../../shared/useBreakpoints"),_constants=require("../../-constants"),_useLayout=require("../../useLayout");function useMobileSplitViewEnabled(){let{isMobile}=(0,_useBreakpoints.useBreakpoints)();return isMobile}const contentOffsetFor=isSplitViewActive=>isSplitViewActive?-1:0,splitViewOffsetFor=isSplitViewActive=>+!isSplitViewActive;function useMobileSplitView(){let{isVisible,show,hide}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return{isSplitViewActive:isVisible,showSplitView:show,showContent:hide}}

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

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

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

@@ -1,20 +1,7 @@
-import type { LayoutPanelsMode, LayoutState, LayoutStorage, LayoutStore } from "./-types";
+import type { LayoutState, LayoutStorage, LayoutStore } from "./-types";
 export declare const LayoutStoreProvider: React.Provider<LayoutStore | null>;
 /** Get the store from context, or throw if used outside the provider. */
 export declare function useLayoutStore(): LayoutStore;
-export declare const LayoutPanelsEnabledProvider: React.Provider<LayoutPanelsMode>;
-/** The panels mode from the nearest `Layout.Provider`'s
- *  `config.enablePanels`; `false` when unset. */
-export declare function useLayoutPanelsEnabled(): LayoutPanelsMode;
-/** TEMPORARY - part of the `enablePanels` kill switch for the staged panels
- *  rollout; remove (together with `LayoutPanelsMode`) once panels are enabled
- *  everywhere.
- *
- *  Whether the calling panel marker may render for the current viewport:
- *  mode `true` always allows; `"mobile"` allows only below the mobile
- *  breakpoint (the overlay presentations - drawer/sheet - which never mount
- *  the resizable row); `false` never allows. */
-export declare function useCanRenderPanel(): boolean;
 /**
  * Persistence config for the layout namespace. Set on `Layout.Provider` (single
  * external surface) and read by the nested `<Layout>`. The Provider only

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutPanelsEnabledProvider(){return LayoutPanelsEnabledProvider},get LayoutPersistenceProvider(){return LayoutPersistenceProvider},get LayoutStoreProvider(){return LayoutStoreProvider},get useCanRenderPanel(){return useCanRenderPanel},get useLayoutPanelsEnabled(){return useLayoutPanelsEnabled},get useLayoutPersistence(){return useLayoutPersistence},get useLayoutSelector(){return useLayoutSelector},get useLayoutStore(){return useLayoutStore}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_useBreakpoints=require("../../shared/useBreakpoints"),LayoutStoreContext=(0,_react.createContext)(null),LayoutStoreProvider=LayoutStoreContext.Provider;function useLayoutStore(){let store=(0,_react.useContext)(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}const LayoutPanelsEnabledContext=(0,_react.createContext)(!1),LayoutPanelsEnabledProvider=LayoutPanelsEnabledContext.Provider;function useLayoutPanelsEnabled(){return(0,_react.useContext)(LayoutPanelsEnabledContext)}function useCanRenderPanel(){let mode=useLayoutPanelsEnabled(),{isMobile}=(0,_useBreakpoints.useBreakpoints)();return!0===mode||"mobile"===mode&&isMobile}const LayoutPersistenceContext=(0,_react.createContext)({}),LayoutPersistenceProvider=LayoutPersistenceContext.Provider;function useLayoutPersistence(){return(0,_react.useContext)(LayoutPersistenceContext)}function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return(0,_react.useSyncExternalStore)(store.subscribe,getSnapshot,getSnapshot)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutPersistenceProvider(){return LayoutPersistenceProvider},get LayoutStoreProvider(){return LayoutStoreProvider},get useLayoutPersistence(){return useLayoutPersistence},get useLayoutSelector(){return useLayoutSelector},get useLayoutStore(){return useLayoutStore}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),LayoutStoreContext=(0,_react.createContext)(null),LayoutStoreProvider=LayoutStoreContext.Provider;function useLayoutStore(){let store=(0,_react.useContext)(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}const LayoutPersistenceContext=(0,_react.createContext)({}),LayoutPersistenceProvider=LayoutPersistenceContext.Provider;function useLayoutPersistence(){return(0,_react.useContext)(LayoutPersistenceContext)}function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return(0,_react.useSyncExternalStore)(store.subscribe,getSnapshot,getSnapshot)}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get createInitialState(){return createInitialState},get layoutReducer(){return layoutReducer}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});function sidePanelFields(config={}){return{kind:"sidePanel",visible:config.defaultVisible??!0,collapsible:config.collapsible??!0,resizable:config.resizable??!0,size:config.defaultSize,minSize:config.minSize,maxSize:config.maxSize}}function panelState(config={}){return{kind:"panel",visible:config.defaultVisible??!0,size:config.defaultSize,minSize:config.minSize,maxSize:config.maxSize}}function createInitialState(config={}){return{leftPanel:{...sidePanelFields({...config.leftPanel,resizable:!1}),variant:config.leftPanel?.variant},rightPanel:{...sidePanelFields({defaultVisible:!1,...config.rightPanel}),variant:config.rightPanel?.variant},content:panelState(config.content),splitview:panelState({defaultVisible:!1,...config.splitview})}}const layoutReducer=(state,action,initial)=>{switch(action.type){case"setVisible":{let slot=state[action.slot];if(slot.visible===action.visible)return state;return{...state,[action.slot]:{...slot,visible:action.visible}}}case"setVariant":{let panel=state[action.panel];if(panel.variant===action.variant)return state;return{...state,[action.panel]:{...panel,variant:action.variant}}}case"resize":{let slot=state[action.slot];if(slot.size===action.size)return state;return{...state,[action.slot]:{...slot,size:action.size}}}case"reset":if(!initial)return state;if(!action.slot)return initial;if(state[action.slot]===initial[action.slot])return state;return{...state,[action.slot]:initial[action.slot]};default:return state}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get createInitialState(){return createInitialState},get layoutReducer(){return layoutReducer}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});function sidePanelFields(config={}){return{kind:"sidePanel",visible:config.defaultVisible??!0,collapsible:config.collapsible??!0,resizable:config.resizable??!0,size:config.defaultSize}}function panelState(config={}){return{kind:"panel",visible:config.defaultVisible??!0,size:config.defaultSize}}function createInitialState(config={}){return{leftPanel:{...sidePanelFields({...config.leftPanel,resizable:!1}),variant:config.leftPanel?.variant},rightPanel:{...sidePanelFields({defaultVisible:!1,...config.rightPanel}),variant:config.rightPanel?.variant},content:panelState(config.content),splitview:panelState({defaultVisible:!1,...config.splitview})}}const layoutReducer=(state,action,initial)=>{switch(action.type){case"setVisible":{let slot=state[action.slot];if(slot.visible===action.visible)return state;return{...state,[action.slot]:{...slot,visible:action.visible}}}case"setVariant":{let panel=state[action.panel];if(panel.variant===action.variant)return state;return{...state,[action.panel]:{...panel,variant:action.variant}}}case"resize":{let slot=state[action.slot];if(slot.size===action.size)return state;return{...state,[action.slot]:{...slot,size:action.size}}}case"reset":if(!initial)return state;if(!action.slot)return initial;if(state[action.slot]===initial[action.slot])return state;return{...state,[action.slot]:initial[action.slot]};default:return state}};

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

@@ -2,7 +2,7 @@ import { type ReactNode } from "react";
 import type { PanelImperativeHandle } from "react-resizable-panels";
 import type { RightPanelVariant, Size, SlotKey } from "./-types";
 export type PortalTargets = Partial<Record<SlotKey, HTMLElement | null>>;
-export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "splitview" | "rightPanel", HTMLElement | null>>>;
+export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "rightPanel" | "splitview", HTMLElement | null>>>;
 /**
  * Portal `children` into the host DOM node registered for `slot`. Returns the
  * portal (or `null` if the host isn't mounted yet). Call unconditionally -
@@ -39,7 +39,7 @@ export declare const PanelRegistryContext: React.Context<PanelRegistry | null>;
 /** Register this slot as a panel for the marker's lifetime. */
 export declare function useDeclarePanel(slot: SlotKey, reg: PanelReg): void;
 export type PanelDeclarations = Partial<Record<SlotKey, PanelReg>>;
-export declare const PanelDeclarationsContext: React.Context<Partial<Record<"content" | "leftPanel" | "splitview" | "rightPanel", PanelReg>>>;
+export declare const PanelDeclarationsContext: React.Context<Partial<Record<"content" | "leftPanel" | "rightPanel" | "splitview", 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

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 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)(""),usePanelRow=()=>(0,_react.useContext)(PanelRowContext),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"),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),{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;(0,_react.useLayoutEffect)(()=>{if(registry)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant])}const PanelDeclarationsContext=(0,_react.createContext)({}),PanelRowContext=(0,_react.createContext)(""),usePanelRow=()=>(0,_react.useContext)(PanelRowContext),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/usePanelDockedSlide.d.ts

@@ -1,5 +1,14 @@
 import type { SidePanelKey } from "./-constants";
 import type { Size } from "./-types";
+type SlidePhase = "idle" | "entering" | "exiting";
+type GetMaxSizeOptions = {
+    collapsedSize?: Size;
+    isVisible: boolean;
+    maxSize?: Size;
+    openSize?: Size;
+    phase: SlidePhase;
+};
+export declare const getMaxSize: ({ collapsedSize, isVisible, maxSize, openSize, phase, }: GetMaxSizeOptions) => Size | undefined;
 export type PanelDockedSlideOptions = {
     /** Which side-panel slot this animates. */
     slot: SidePanelKey;
@@ -38,3 +47,4 @@ export type PanelDockedSlide = {
  * {@link useExitAnimation} and the Drawer's styled components.
  */
 export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, collapsedSize, }: PanelDockedSlideOptions): PanelDockedSlide;
+export {};

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}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize,minSizeFor=({collapsedSize,isVisible,minSize})=>void 0===collapsedSize?minSize:isVisible?minSize??collapsedSize:collapsedSize;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"),[fixedWidth,setFixedWidth]=(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:minSizeFor({collapsedSize,isVisible,minSize}),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{}setFixedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setFixedWidth("entering"===phase?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitsForRelaxedMinimum="exiting"===phase&&hasCollapsedRest,waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&waitsForRelaxedMinimum){frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1));return}let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get getMaxSize(){return getMaxSize},get usePanelDockedSlide(){return usePanelDockedSlide}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_parseDurationMs=require("../../shared/parseDurationMs"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_useLayout=require("./useLayout"),resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize,minSizeFor=({collapsedSize,isVisible,minSize})=>void 0===collapsedSize?minSize:isVisible?minSize??collapsedSize:collapsedSize,getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;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"),[fixedWidth,setFixedWidth]=(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:minSizeFor({collapsedSize,isVisible,minSize}),maxSize:getMaxSize({collapsedSize,isVisible,maxSize,openSize,phase}),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=(0,_parseDurationMs.parseDurationMs)(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setFixedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setFixedWidth("entering"===phase?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&hasCollapsedRest){frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1));return}let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}

package/build/cjs/components/Patterns/Modal/Modal.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Modal",{enumerable:!0,get:function(){return Modal}});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"),_Header=require("../../Typography/Header/Header"),_Stack=require("../../Stack/Stack"),_Container=require("../../Container/Container"),_Box=require("../../Box/Box"),_ButtonGroup=require("../ButtonGroup/ButtonGroup"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_Text=require("../../Typography/Text/Text"),_mediaQueries=require("../../../shared/mediaQueries"),_useScrollDetection=require("../../../shared/useScrollDetection"),_appendId=require("../../../shared/appendId"),_useWindow=require("../../../shared/useWindow"),_Lightbox=require("../../Lightbox/Lightbox"),getDesktopSpace=theme=>theme.variables.size.spacing.l,getDesktopInnerSpace=theme=>theme.variables.size.spacing.xl,getMobileSpace=theme=>theme.variables.size.spacing.m,getMobileInnerSpace=theme=>theme.variables.size.spacing.m,StyledModalWrapper=(0,_styled.default)("div",{target:"eybea2o0",label:"StyledModalWrapper"})(({theme,isFullScreen,size})=>{let fadeInModal=(0,_react.useMemo)(()=>(0,_react1.keyframes)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Modal",{enumerable:!0,get:function(){return Modal}});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"),_Header=require("../../Typography/Header/Header"),_Stack=require("../../Stack/Stack"),_Container=require("../../Container/Container"),_Box=require("../../Box/Box"),_ButtonGroup=require("../ButtonGroup/ButtonGroup"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_Text=require("../../Typography/Text/Text"),_mediaQueries=require("../../../shared/mediaQueries"),_useScrollDetection=require("../../../shared/useScrollDetection"),_appendId=require("../../../shared/appendId"),_useWindow=require("../../../shared/useWindow"),_Lightbox=require("../../Lightbox/Lightbox"),getDesktopSpace=theme=>theme.variables.size.spacing.l,getDesktopInnerSpace=theme=>theme.variables.size.spacing.xl,getMobileSpace=theme=>theme.variables.size.spacing.m,getMobileInnerSpace=theme=>theme.variables.size.spacing.m,StyledModalWrapper=(0,_styled.default)("div",{target:"e1v2szni0",label:"StyledModalWrapper"})(({theme,isFullScreen,size})=>{let fadeInModal=(0,_react.useMemo)(()=>(0,_react1.keyframes)`
       from {
         opacity: ${theme.variables.opacity.hidden};
         transform: translateY(20px);
@@ -7,4 +7,4 @@
           opacity: ${theme.variables.opacity.visible};
         transform: translateY(0);
       }
-    `,[theme.variables.opacity.hidden,theme.variables.opacity.visible]);return{animation:`${fadeInModal} ${theme.variables.animation.modal.open.duration} ${theme.variables.animation.modal.open.delay} ${theme.variables.animation.modal.open.timingFunction} both`,"&:focus":{outline:"none"},...(0,_mediaQueries.useResponsiveValue)({width:[`calc(100% - ${getMobileSpace(theme)} * 2)`,isFullScreen?`calc(100% - ${getDesktopSpace(theme)} * 2)`:theme.variables.size.dimension.modal.width[size]]})}}),StyledInner=(0,_styled.default)("div",{target:"eybea2o1",label:"StyledInner"})(({theme,isFullScreen,size})=>{let mobileVerticalSpace=getMobileSpace(theme),mobileInnerVerticalSpace=getMobileInnerSpace(theme),desktopVerticalSpace=getDesktopSpace(theme),desktopInnerVerticalSpace=getDesktopInnerSpace(theme),fullScreenMobile=`calc(100dvh - ${mobileVerticalSpace} * 2 - ${mobileInnerVerticalSpace} * 2)`;return{display:"flex",...(0,_mediaQueries.useResponsiveValue)({height:["l"===size||isFullScreen?fullScreenMobile:"auto",isFullScreen?`calc(100dvh - ${desktopVerticalSpace} * 2 - ${desktopInnerVerticalSpace} * 2)`:"l"===size?`calc(100dvh - ${desktopVerticalSpace} * 2 - ${desktopInnerVerticalSpace} * 2 - ${theme.variables.size.dimension.modal.margin.l} * 2)`:"auto"],maxHeight:[fullScreenMobile,isFullScreen?"auto":"l"===size?`calc(${theme.variables.size.dimension.modal.maxHeight.l} - ${desktopInnerVerticalSpace} * 2)`:`calc(100dvh - ${desktopVerticalSpace} * 2 - ${desktopInnerVerticalSpace} * 2)`]}),flexDirection:"column",overflow:"hidden"}}),StyledBody=(0,_styled.default)("div",{target:"eybea2o2",label:"StyledBody"})(({theme,borderBottom,borderTop,size,isFullScreen,privateProps})=>({overflowY:"auto",maxHeight:"100%",...(isFullScreen||"l"===size)&&{flex:1},...privateProps?.height&&{height:privateProps?.height},...borderBottom&&{borderBottom:`1px solid ${theme.values.color.divider.primary}`},...borderTop&&{borderTop:`1px solid ${theme.values.color.divider.primary}`}})),StyledImg=(0,_styled.default)("img",{target:"eybea2o3",label:"StyledImg"})(()=>({width:"100%",aspectRatio:"16/9"})),StyledMaxWidth=(0,_styled.default)("div",{target:"eybea2o4",label:"StyledMaxWidth"})(({theme})=>({maxWidth:theme.variables.size.dimension.modal.fullScreenContentWidth,margin:"0 auto",height:"100%"})),StyledXContainer=(0,_styled.default)("div",{target:"eybea2o5",label:"StyledXContainer"})(({theme})=>({position:"absolute",...(0,_mediaQueries.useResponsiveValue)({top:[theme.variables.size.spacing.s,theme.variables.size.spacing.l],right:[theme.variables.size.spacing.s,theme.variables.size.spacing.l]})})),Footer=({children,alignItems=["stretch","right"],isShortViewport})=>_react.default.createElement(_Box.Box,{space:"zero",tSpace:isShortViewport?"m":"l"},_react.default.createElement(_Stack.Stack,{alignItems:alignItems},children)),HorizontalOffset=({children,isFullScreen,isMaxWidthLimit,height})=>_react.default.createElement(_Box.Box,{space:["m","xl"],vSpace:"zero",height:height},isFullScreen&&isMaxWidthLimit?_react.default.createElement(StyledMaxWidth,null,children):children);function getIsShortViewport(window){return void 0!==window&&window.innerHeight<420}function Modal({header,subHeader,labelHeader,children,imageUrl,ImageComponent,secondaryButton,cancelButtonLabel,isDismissible=!0,isFullScreen,isMaxWidthLimit=!0,actionButton,role="dialog",onAction,size="m",privateProps:{skipPortal,height,zeroPadding,tabbableOptions}={skipPortal:!1,height:void 0,zeroPadding:!1},portalContainer,closeButtonAriaLabel="Dismiss Dialog","data-e2e-test-id":dataE2eTestId,imageAlt,initialFocus,...ariaAttributes}){let{"aria-label":ariaLabel,"aria-describedby":ariaDescribedBy,...restAriaAttributes}=ariaAttributes,backdropRef=(0,_react.useRef)(null),subHeaderId=(0,_react.useId)(),window=(0,_useWindow.useWindow)(),{scrollableRef,isScrollBottom,isScrollTop,hasScroll}=(0,_useScrollDetection.useScrollDetection)(),[isShortViewport,setIsShortViewport]=(0,_react.useState)(getIsShortViewport(window));(0,_react.useEffect)(()=>{let resizeObserver;return"undefined"!=typeof ResizeObserver&&backdropRef.current&&(resizeObserver=new ResizeObserver(()=>{setIsShortViewport(getIsShortViewport(window))})).observe(backdropRef.current),()=>{resizeObserver&&resizeObserver.disconnect()}},[window]);let handleClose=()=>{onAction?.("cancel")},hasImage=imageUrl||ImageComponent,HeadingComponent=isShortViewport?_Header.H3:_Header.H2,isImageVisible=!isShortViewport&&!!hasImage,horizontalOffsetProps={isFullScreen,isMaxWidthLimit},closeButton=isDismissible&&_react.default.createElement(StyledXContainer,null,_react.default.createElement(_PictogramButton.PictogramButton,{variant:"tertiary",icon:"x",size:"s",onClick:handleClose,"aria-label":closeButtonAriaLabel,"data-modal-close-btn":!0}));return _react.default.createElement(_Lightbox.Lightbox,{backdropRef:backdropRef,portalContainer:portalContainer,handleClose:handleClose,isDismissible:isDismissible,privateProps:{skipPortal,tabbableOptions},initialFocus:initialFocus},_react.default.createElement(StyledModalWrapper,{role:role,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Modal",isFullScreen:isFullScreen,size:size,"aria-label":ariaLabel||header,"aria-describedby":subHeader?(0,_appendId.appendId)(ariaDescribedBy,subHeaderId):ariaDescribedBy,...restAriaAttributes,"aria-modal":"true",tabIndex:-1},_react.default.createElement(_Container.Container,{elevation:4},_react.default.createElement(_Box.Box,{space:"zero",vSpace:["m","xl"]},_react.default.createElement(StyledInner,{isFullScreen:isFullScreen,size:size},_react.default.createElement(HorizontalOffset,horizontalOffsetProps,_react.default.createElement(_Box.Box,{space:"zero",bSpace:"s"},_react.default.createElement(_Stack.Stack,{space:isImageVisible?["s","l"]:"zero"},isImageVisible&&(imageUrl?_react.default.createElement(_Box.Box,{space:"zero",tSpace:["xl","l"]},_react.default.createElement(StyledImg,{src:imageUrl,alt:imageAlt})):ImageComponent&&_react.default.createElement(ImageComponent,null)),_react.default.createElement(_Stack.Stack,{space:"xxs"},labelHeader&&_react.default.createElement(_Header.H6,{as:"div"},labelHeader),_react.default.createElement(_Stack.Stack,{space:"zero"},header&&_react.default.createElement(HeadingComponent,{as:"h1"},header),subHeader&&_react.default.createElement(_Header.H4,{as:"h2",color:"tertiary",id:subHeaderId},subHeader)))))),_react.default.createElement(StyledBody,{ref:scrollableRef,size:size,isFullScreen:isFullScreen,borderBottom:hasScroll&&!isScrollBottom,borderTop:hasScroll&&!isScrollTop,privateProps:{height}},zeroPadding?children:_react.default.createElement(_Box.Box,{space:"zero",vSpace:"xxxs",height:"100%"},_react.default.createElement(HorizontalOffset,{...horizontalOffsetProps,height:"100%"},children))),(actionButton||cancelButtonLabel||secondaryButton)&&_react.default.createElement(HorizontalOffset,horizontalOffsetProps,_react.default.createElement(Footer,{isShortViewport:isShortViewport},_react.default.createElement(_ButtonGroup.ButtonGroup,{actionButton:actionButton,secondaryButton:secondaryButton,cancelButtonText:cancelButtonLabel,onButtonClick:onAction}))),closeButton)))))}Modal.Stack=({children,...rest})=>_react.default.createElement(_Stack.Stack,{...rest,space:"m"},children),Modal.Text=({children,...rest})=>_react.default.createElement(_Text.Text,{...rest,size:"m",color:"tertiary"},children);
+    `,[theme.variables.opacity.hidden,theme.variables.opacity.visible]);return{animation:`${fadeInModal} ${theme.variables.animation.modal.open.duration} ${theme.variables.animation.modal.open.delay} ${theme.variables.animation.modal.open.timingFunction} both`,"&:focus":{outline:"none"},...(0,_mediaQueries.useResponsiveValue)({width:[`calc(100% - ${getMobileSpace(theme)} * 2)`,isFullScreen?`calc(100% - ${getDesktopSpace(theme)} * 2)`:theme.variables.size.dimension.modal.width[size]]})}}),StyledInner=(0,_styled.default)("div",{target:"e1v2szni1",label:"StyledInner"})(({theme,isFullScreen,size})=>{let mobileVerticalSpace=getMobileSpace(theme),mobileInnerVerticalSpace=getMobileInnerSpace(theme),desktopVerticalSpace=getDesktopSpace(theme),desktopInnerVerticalSpace=getDesktopInnerSpace(theme),fullScreenMobile=`calc(100dvh - ${mobileVerticalSpace} * 2 - ${mobileInnerVerticalSpace} * 2)`;return{display:"flex",...(0,_mediaQueries.useResponsiveValue)({height:["l"===size||isFullScreen?fullScreenMobile:"auto",isFullScreen?`calc(100dvh - ${desktopVerticalSpace} * 2 - ${desktopInnerVerticalSpace} * 2)`:"l"===size?`calc(100dvh - ${desktopVerticalSpace} * 2 - ${desktopInnerVerticalSpace} * 2 - ${theme.variables.size.dimension.modal.margin.l} * 2)`:"auto"],maxHeight:[fullScreenMobile,isFullScreen?"auto":"l"===size?`calc(${theme.variables.size.dimension.modal.maxHeight.l} - ${desktopInnerVerticalSpace} * 2)`:`calc(100dvh - ${desktopVerticalSpace} * 2 - ${desktopInnerVerticalSpace} * 2)`]}),flexDirection:"column",overflow:"hidden"}}),StyledBody=(0,_styled.default)("div",{target:"e1v2szni2",label:"StyledBody"})(({theme,borderBottom,borderTop,size,isFullScreen,privateProps})=>({overflowY:"auto",maxHeight:"100%",...(isFullScreen||"l"===size)&&{flex:1},...privateProps?.height&&{height:privateProps?.height},...borderBottom&&{borderBottom:`1px solid ${theme.values.color.divider.primary}`},...borderTop&&{borderTop:`1px solid ${theme.values.color.divider.primary}`}})),StyledImg=(0,_styled.default)("img",{target:"e1v2szni3",label:"StyledImg"})(()=>({width:"100%",aspectRatio:"16/9"})),StyledMaxWidth=(0,_styled.default)("div",{target:"e1v2szni4",label:"StyledMaxWidth"})(({theme})=>({maxWidth:theme.variables.size.dimension.modal.fullScreenContentWidth,margin:"0 auto",height:"100%"})),StyledXContainer=(0,_styled.default)("div",{target:"e1v2szni5",label:"StyledXContainer"})(({theme})=>({position:"absolute",...(0,_mediaQueries.useResponsiveValue)({top:[theme.variables.size.spacing.s,theme.variables.size.spacing.l],right:[theme.variables.size.spacing.s,theme.variables.size.spacing.l]})})),Footer=({children,alignItems=["stretch","right"],isShortViewport})=>_react.default.createElement(_Box.Box,{space:"zero",tSpace:isShortViewport?"m":"l"},_react.default.createElement(_Stack.Stack,{alignItems:alignItems},children)),HorizontalOffset=({children,isFullScreen,isMaxWidthLimit,height})=>_react.default.createElement(_Box.Box,{space:["m","xl"],vSpace:"zero",height:height},isFullScreen&&isMaxWidthLimit?_react.default.createElement(StyledMaxWidth,null,children):children);function getIsShortViewport(window){return void 0!==window&&window.innerHeight<420}function Modal({header,subHeader,labelHeader,children,imageUrl,ImageComponent,secondaryButton,cancelButtonLabel,isDismissible=!0,isFullScreen,isMaxWidthLimit=!0,actionButton,role="dialog",onAction,size="m",privateProps:{skipPortal,height,zeroPadding,tabbableOptions}={skipPortal:!1,height:void 0,zeroPadding:!1},portalContainer,closeButtonAriaLabel="Dismiss Dialog","data-e2e-test-id":dataE2eTestId,imageAlt,initialFocus,...ariaAttributes}){let{"aria-label":ariaLabel,"aria-describedby":ariaDescribedBy,...restAriaAttributes}=ariaAttributes,backdropRef=(0,_react.useRef)(null),subHeaderId=(0,_react.useId)(),window=(0,_useWindow.useWindow)(),{scrollableRef,isScrollBottom,isScrollTop,hasScroll}=(0,_useScrollDetection.useScrollDetection)(),[isShortViewport,setIsShortViewport]=(0,_react.useState)(getIsShortViewport(window));(0,_react.useEffect)(()=>{let resizeObserver;return"undefined"!=typeof ResizeObserver&&backdropRef.current&&(resizeObserver=new ResizeObserver(()=>{setIsShortViewport(getIsShortViewport(window))})).observe(backdropRef.current),()=>{resizeObserver&&resizeObserver.disconnect()}},[window]);let handleClose=()=>{onAction?.("cancel")},hasImage=imageUrl||ImageComponent,HeadingComponent=isShortViewport?_Header.H3:_Header.H2,isImageVisible=!isShortViewport&&!!hasImage,horizontalOffsetProps={isFullScreen,isMaxWidthLimit},hasHeaderRow=isDismissible||!!(labelHeader||header||subHeader||isImageVisible),closeButton=isDismissible&&_react.default.createElement(StyledXContainer,null,_react.default.createElement(_PictogramButton.PictogramButton,{variant:"tertiary",icon:"x",size:"s",onClick:handleClose,"aria-label":closeButtonAriaLabel,"data-modal-close-btn":!0}));return _react.default.createElement(_Lightbox.Lightbox,{backdropRef:backdropRef,portalContainer:portalContainer,handleClose:handleClose,isDismissible:isDismissible,privateProps:{skipPortal,tabbableOptions},initialFocus:initialFocus},_react.default.createElement(StyledModalWrapper,{role:role,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Modal",isFullScreen:isFullScreen,size:size,"aria-label":ariaLabel||header,"aria-describedby":subHeader?(0,_appendId.appendId)(ariaDescribedBy,subHeaderId):ariaDescribedBy,...restAriaAttributes,"aria-modal":"true",tabIndex:-1},_react.default.createElement(_Container.Container,{elevation:4},_react.default.createElement(_Box.Box,{space:"zero",vSpace:["m","xl"]},_react.default.createElement(StyledInner,{isFullScreen:isFullScreen,size:size},hasHeaderRow&&_react.default.createElement(HorizontalOffset,horizontalOffsetProps,_react.default.createElement(_Box.Box,{space:"zero",bSpace:"s"},_react.default.createElement(_Stack.Stack,{space:isImageVisible?["s","l"]:"zero"},isImageVisible&&(imageUrl?_react.default.createElement(_Box.Box,{space:"zero",tSpace:["xl","l"]},_react.default.createElement(StyledImg,{src:imageUrl,alt:imageAlt})):ImageComponent&&_react.default.createElement(ImageComponent,null)),_react.default.createElement(_Stack.Stack,{space:"xxs"},labelHeader&&_react.default.createElement(_Header.H6,{as:"div"},labelHeader),_react.default.createElement(_Stack.Stack,{space:"zero"},header&&_react.default.createElement(HeadingComponent,{as:"h1"},header),subHeader&&_react.default.createElement(_Header.H4,{as:"h2",color:"tertiary",id:subHeaderId},subHeader)))))),_react.default.createElement(StyledBody,{ref:scrollableRef,size:size,isFullScreen:isFullScreen,borderBottom:hasScroll&&!isScrollBottom,borderTop:hasScroll&&!isScrollTop,privateProps:{height}},zeroPadding?children:_react.default.createElement(_Box.Box,{space:"zero",vSpace:"xxxs",height:"100%"},_react.default.createElement(HorizontalOffset,{...horizontalOffsetProps,height:"100%"},children))),(actionButton||cancelButtonLabel||secondaryButton)&&_react.default.createElement(HorizontalOffset,horizontalOffsetProps,_react.default.createElement(Footer,{isShortViewport:isShortViewport},_react.default.createElement(_ButtonGroup.ButtonGroup,{actionButton:actionButton,secondaryButton:secondaryButton,cancelButtonText:cancelButtonLabel,onButtonClick:onAction}))),closeButton)))))}Modal.Stack=({children,...rest})=>_react.default.createElement(_Stack.Stack,{...rest,space:"m"},children),Modal.Text=({children,...rest})=>_react.default.createElement(_Text.Text,{...rest,size:"m",color:"tertiary"},children);