@dynatrace/strato-components 3.7.1 → 3.8.0

package/esm/layouts/app-header/action-group/ActionButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/ActionButton.css.ts"],
-  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-7-1';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-7-1',variantClassNames:{density:{'default':'_otmjah1-3-7-1',condensed:'_otmjah2-3-7-1'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-7-1';"],
+  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-8-0';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-8-0',variantClassNames:{density:{'default':'_otmjah1-3-8-0',condensed:'_otmjah2-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,WAAW;AACf,IAAI,UAAU,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,WAAU,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnL,IAAI,wBAAwB;",
   "names": []
 }

package/esm/layouts/app-header/action-group/ActionGroup.css

@@ -1,4 +1,4 @@
-._1d2ks7u0-3-7-1 {
+._1d2ks7u0-3-8-0 {
   position: absolute;
   visibility: hidden;
   z-index: -1;

package/esm/layouts/app-header/action-group/ActionGroup.sty.js

@@ -1,5 +1,5 @@
 import "./ActionGroup.css";
-var actionGroupHiddenItemCSS = "_1d2ks7u0-3-7-1";
+var actionGroupHiddenItemCSS = "_1d2ks7u0-3-8-0";
 export {
   actionGroupHiddenItemCSS
 };

package/esm/layouts/app-header/action-group/ActionGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/ActionGroup.css.ts"],
-  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-7-1';"],
+  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,2BAA2B;",
   "names": []
 }

package/esm/layouts/app-header/action-group/NavItem.css

@@ -1,13 +1,13 @@
-._bf74pw2-3-7-1 {
+._bf74pw2-3-8-0 {
   position: relative;
 }
-._bf74pw2-3-7-1._bf74pw0-3-7-1:not(._bf74pw1-3-7-1), ._bf74pw2-3-7-1.active:not(._bf74pw1-3-7-1) {
+._bf74pw2-3-8-0._bf74pw0-3-8-0:not(._bf74pw1-3-8-0), ._bf74pw2-3-8-0.active:not(._bf74pw1-3-8-0) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._bf74pw2-3-7-1._bf74pw0-3-7-1:not(._bf74pw1-3-7-1):hover, ._bf74pw2-3-7-1.active:not(._bf74pw1-3-7-1):hover {
+._bf74pw2-3-8-0._bf74pw0-3-8-0:not(._bf74pw1-3-8-0):hover, ._bf74pw2-3-8-0.active:not(._bf74pw1-3-8-0):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._bf74pw2-3-7-1._bf74pw0-3-7-1::after, ._bf74pw2-3-7-1.active::after {
+._bf74pw2-3-8-0._bf74pw0-3-8-0::after, ._bf74pw2-3-8-0.active::after {
   content: "";
   position: absolute;
   width: 20px;

package/esm/layouts/app-header/action-group/NavItem.sty.js

@@ -1,7 +1,7 @@
 import "./NavItem.css";
-var button = "_bf74pw2-3-7-1";
-var isDisabled = "_bf74pw1-3-7-1";
-var isSelected = "_bf74pw0-3-7-1";
+var button = "_bf74pw2-3-8-0";
+var isDisabled = "_bf74pw1-3-8-0";
+var isSelected = "_bf74pw0-3-8-0";
 export {
   button,
   isDisabled,

package/esm/layouts/app-header/action-group/NavItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/NavItem.css.ts"],
-  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-7-1';\nexport var isDisabled = '_bf74pw1-3-7-1';\nexport var isSelected = '_bf74pw0-3-7-1';"],
+  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-8-0';\nexport var isDisabled = '_bf74pw1-3-8-0';\nexport var isSelected = '_bf74pw0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,aAAa;AACjB,IAAI,aAAa;",
   "names": []
 }

package/esm/layouts/app-header/app-icon/AppIcon.css

@@ -1,4 +1,4 @@
-@keyframes _1dtfpz50-3-7-1 {
+@keyframes _1dtfpz50-3-8-0 {
   0% {
     opacity: 0;
   }
@@ -6,11 +6,11 @@
     opacity: 1;
   }
 }
-._1dtfpz51-3-7-1 {
+._1dtfpz51-3-8-0 {
   object-fit: contain;
 }
-._1dtfpz52-3-7-1 {
-  animation-name: _1dtfpz50-3-7-1;
+._1dtfpz52-3-8-0 {
+  animation-name: _1dtfpz50-3-8-0;
   animation-duration: var(--dt-animations-fade-in-duration-slow, 350ms);
   animation-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
 }

package/esm/layouts/app-header/app-icon/AppIcon.sty.js

@@ -1,6 +1,6 @@
 import "./AppIcon.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var icon = _7a468({ defaultClassName: "_1dtfpz51-3-7-1", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var icon = _7a468({ defaultClassName: "_1dtfpz51-3-8-0", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   icon
 };

package/esm/layouts/app-header/app-icon/AppIcon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/app-icon/AppIcon.css.ts"],
-  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-7-1',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-7-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-8-0',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-8-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/container/Container.css

@@ -1,11 +1,11 @@
-._f32lcd0-3-7-1 {
+._f32lcd0-3-8-0 {
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-radius: var(--dt-borders-radius-container-default, 9px);
-  color: var(--_6levse0-3-7-1);
-  border-color: var(--_6levse2-3-7-1);
-  background-color: var(--_6levse1-3-7-1);
+  color: var(--_6levse0-3-8-0);
+  border-color: var(--_6levse2-3-8-0);
+  background-color: var(--_6levse1-3-8-0);
 }
-._1jgl8s50-3-7-1 ._f32lcd0-3-7-1 {
+._1jgl8s50-3-8-0 ._f32lcd0-3-8-0 {
   border-width: var(--dt-borders-width-default, 1px);
 }

package/esm/layouts/container/Container.sty.js

@@ -1,7 +1,7 @@
 import "../../core/components/app-root/AppRoot.css";
 import "../../styles/container.css";
 import "./Container.css";
-var containerCSS = "_f32lcd0-3-7-1";
+var containerCSS = "_f32lcd0-3-8-0";
 export {
   containerCSS
 };

package/esm/layouts/container/Container.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/container/Container.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-7-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/divider/Divider.css

@@ -1,21 +1,21 @@
-._1thxv8m0-3-7-1 {
+._1thxv8m0-3-8-0 {
   border: none;
   margin: 0;
   overflow-wrap: break-word;
-  background-color: var(--_k096v42-3-7-1);
+  background-color: var(--_k096v42-3-8-0);
 }
-._1thxv8m1-3-7-1 {
+._1thxv8m1-3-8-0 {
   width: 100%;
   height: var(--dt-borders-width-default, 1px);
 }
-._1thxv8m2-3-7-1 {
+._1thxv8m2-3-8-0 {
   width: var(--dt-borders-width-default, 1px);
   height: 100%;
 }
-._1thxv8m5-3-7-1 {
+._1thxv8m5-3-8-0 {
   flex-shrink: 0;
 }
-._1thxv8m6-3-7-1 {
+._1thxv8m6-3-8-0 {
   flex-shrink: 0;
   width: var(--dt-borders-width-default, 1px);
   height: auto;

package/esm/layouts/divider/Divider.sty.js

@@ -1,7 +1,7 @@
 import "../../core/utils/colorUtils.css";
 import "./Divider.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-7-1", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-7-1", vertical: "_1thxv8m2-3-7-1" }, flexItem: { true: "_1thxv8m3-3-7-1", false: "_1thxv8m4-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-7-1"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-7-1"]] });
+var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-8-0", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-8-0", vertical: "_1thxv8m2-3-8-0" }, flexItem: { true: "_1thxv8m3-3-8-0", false: "_1thxv8m4-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-8-0"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-8-0"]] });
 export {
   dividerCSS
 };

package/esm/layouts/divider/Divider.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/divider/Divider.css.ts"],
-  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'_1thxv8m0-3-7-1',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-7-1',vertical:'_1thxv8m2-3-7-1'},flexItem:{true:'_1thxv8m3-3-7-1',false:'_1thxv8m4-3-7-1'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-7-1'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-7-1']]});"],
+  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'_1thxv8m0-3-8-0',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-8-0',vertical:'_1thxv8m2-3-8-0'},flexItem:{true:'_1thxv8m3-3-8-0',false:'_1thxv8m4-3-8-0'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-8-0'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-8-0']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,aAAY,cAAa,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,aAAY,YAAW,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/layouts/index.ts"],
-  "sourcesContent": ["export { Flex, type FlexOwnProps, type FlexProps } from './flex/Flex.js';\nexport { Grid, type GridOwnProps, type GridProps } from './grid/Grid.js';\nexport { Divider } from './divider/Divider.js';\nexport type { DividerProps } from './divider/Divider.js';\nexport {\n  Container,\n  useContainerColoring as _useContainerColoring,\n  type ContainerColoring as _ContainerColoring,\n} from './container/Container.js';\nexport type {\n  ContainerOwnProps,\n  ContainerProps,\n} from './container/Container.js';\nexport type { LayoutSizeCSS } from './types/layout.types.js';\nexport { Surface } from './surface/Surface.js';\nexport type { SurfaceOwnProps, SurfaceProps } from './surface/surface-types.js';\nexport { surfaceBorderRadius as _surfaceBorderRadius } from './surface/variables.sty.js';\nexport { useBreakpoint } from './hooks/useBreakpoint.js';\nexport { AppHeader } from './app-header/AppHeader.js';\nexport type { AppHeaderProps } from './app-header/AppHeader.js';\nexport type {\n  AppHeaderActionButtonOwnProps,\n  AppHeaderActionButtonProps,\n} from './app-header/ActionButton.js';\nexport type { AppHeaderActionItemsProps } from './app-header/ActionItems.js';\nexport type { ActionItemGroupProps } from './app-header/ActionItemGroup.js';\nexport { HelpMenu } from './help-menu/HelpMenu.js';\nexport type {\n  HelpMenuProps,\n  HelpMenuButtonEntry,\n  HelpMenuLinkEntry,\n  HelpMenuChildrenEntry,\n  HelpMenuCustomLinkEntry,\n  HelpMenuCustomItemEntry,\n  HelpMenuDefault,\n  HelpMenuDefaultableEntry,\n  HelpMenuExpandableEntry,\n  HelpMenuDependency,\n} from './help-menu/HelpMenu.js';\nexport type {\n  AppHeaderNavigationProps,\n  AppHeaderNavigationItemOwnProps,\n  AppHeaderNavigationItemProps,\n  // exported with alternate name for backwards compatibility\n  AppHeaderNavigationProps as AppHeaderNavItemsProps,\n} from './app-header/Navigation.js';\nexport type { AppIconProps } from './app-header/app-icon/AppIcon.js';\nexport { Logo, Logo as AppNavLink } from './app-header/Logo.js';\nexport type {\n  AppHeaderLogoProps,\n  AppHeaderLogoOwnProps,\n  // exported with alternate name for backwards compatibility\n  AppHeaderLogoProps as AppNavLinkProps,\n  AppHeaderLogoOwnProps as AppNavLinkOwnProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AppNavLinkInternalOwnProps, // exported for backwards compatibility\n} from './app-header/Logo.js';\nexport type {\n  ActionButtonOwnProps,\n  ActionButtonProps,\n} from './app-header/action-group/ActionButton.js';\nexport { ActionGroup as _ActionGroup } from './app-header/action-group/ActionGroup.js';\nexport type { ActionGroupProps as _ActionGroupProps } from './app-header/action-group/ActionGroup.js';\nexport type {\n  NavItemProps,\n  NavItemOwnProps,\n} from './app-header/action-group/NavItem.js';\nexport type { GroupProps } from './app-header/action-group/Group.js';\n\nexport type {\n  ControlledDetailViewProps,\n  DetailViewOwnProps,\n  DetailViewProps,\n  UncontrolledDetailViewProps,\n} from './page/DetailView.js';\nexport type { HeaderProps } from './page/Header.js';\nexport type { MainProps } from './page/Main.js';\nexport { Page } from './page/Page.js';\nexport type { PageProps } from './page/Page.js';\nexport { panelSizeUnits } from './page/panel-types.js';\nexport type {\n  PanelSize,\n  PanelSizeUnit,\n  Direction as _Direction,\n} from './page/panel-types.js';\nexport type { PanelControlButtonProps } from './page/PanelControlButton.js';\nexport type {\n  ControlledSidebarProps,\n  SidebarOwnProps,\n  SidebarProps,\n  UncontrolledSidebarProps,\n} from './page/Sidebar.js';\nexport { pagePanels } from './page/page-types.js';\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  DismissiblePagePanels,\n  PagePanelSizes,\n  PanelName,\n  /** @deprecated Use `PanelName` instead. */\n  PanelName as PagePanels,\n  ControlledPagePanelProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PagePanelProps,\n  UncontrolledPagePanelProps,\n} from './page/page-types.js';\n\nexport type { TitleBarActionProps } from './title-bar/Action.js';\nexport type { TitleBarNavigationProps } from './title-bar/Navigation.js';\nexport type { TitleBarPrefixProps } from './title-bar/Prefix.js';\nexport type { TitleBarSubtitleProps } from './title-bar/Subtitle.js';\nexport type { TitleBarSuffixProps } from './title-bar/Suffix.js';\nexport type { TitleBarTitleProps } from './title-bar/Title.js';\nexport { TitleBar } from './title-bar/TitleBar.js';\nexport type { TitleBarProps } from './title-bar/TitleBar.js';\n\nexport { InputGroup, type InputGroupProps } from './input-group/InputGroup.js';\nexport { inputGroupClassName } from './input-group/InputGroup.sty.js';\n\nexport { SplitLayout as _SplitLayout } from './split-layout/SplitLayout.js';\nexport type { SplitLayoutProps as _SplitLayoutProps } from './split-layout/SplitLayout.js';\nexport type { ResizeHandleProps as _SplitLayoutResizeHandleProps } from './split-layout/slots.js';\nexport { PageLayout } from './page-layout/PageLayout.js';\nexport type { ResizablePanelProps } from './split-layout/slots.js';\nexport type { PanelWidth } from './split-layout/width-utils.js';\nexport type { PageLayoutProps } from './page-layout/PageLayout.js';\nexport type { CollapsiblePanel } from './page-layout/shared/collapsible.js';\nexport type { HeaderProps as PageLayoutHeaderProps } from './page-layout/shared/portal-slots.js';\nexport type { SidebarProps as PageLayoutSidebarProps } from './page-layout/sidebar-layout/slots.js';\nexport type { DetailsProps as PageLayoutDetailsProps } from './page-layout/details-layout/slots.js';\nexport type { ContentProps as PageLayoutContentProps } from './split-layout/slots.js';\nexport type { LayoutMode as PageLayoutDetailsLayoutMode } from './page-layout/details-layout/DetailsLayoutContext.js';\nexport type { DetailsControlBarProps as PageLayoutDetailsControlBarProps } from './page-layout/details-layout/slots.js';\n"],
-  "mappings": "AAAA,SAAS,YAA+C;AACxD,SAAS,YAA+C;AACxD,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACwB;AAAA,OAEnB;AAMP,SAAS,eAAe;AAExB,SAAgC,2BAA4B;AAC5D,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAQ1B,SAAS,gBAAgB;AAqBzB,SAAS,MAAc,QAARA,aAA0B;AAczC,SAAwB,mBAAoB;AAgB5C,SAAS,YAAY;AAErB,SAAS,sBAAsB;AAa/B,SAAS,kBAAkB;AAoB3B,SAAS,gBAAgB;AAGzB,SAAS,kBAAwC;AACjD,SAAS,2BAA2B;AAEpC,SAAwB,mBAAoB;AAG5C,SAAS,kBAAkB;",
+  "sourcesContent": ["export { Flex, type FlexOwnProps, type FlexProps } from './flex/Flex.js';\nexport { Grid, type GridOwnProps, type GridProps } from './grid/Grid.js';\nexport { Divider } from './divider/Divider.js';\nexport type { DividerProps } from './divider/Divider.js';\nexport {\n  Container,\n  useContainerColoring as _useContainerColoring,\n  type ContainerColoring as _ContainerColoring,\n} from './container/Container.js';\nexport type {\n  ContainerOwnProps,\n  ContainerProps,\n} from './container/Container.js';\nexport type { LayoutSizeCSS } from './types/layout.types.js';\nexport { Surface } from './surface/Surface.js';\nexport type { SurfaceOwnProps, SurfaceProps } from './surface/surface-types.js';\nexport { surfaceBorderRadius as _surfaceBorderRadius } from './surface/variables.sty.js';\nexport { useBreakpoint } from './hooks/useBreakpoint.js';\nexport { AppHeader } from './app-header/AppHeader.js';\nexport type { AppHeaderProps } from './app-header/AppHeader.js';\nexport type {\n  AppHeaderActionButtonOwnProps,\n  AppHeaderActionButtonProps,\n} from './app-header/ActionButton.js';\nexport type { AppHeaderActionItemsProps } from './app-header/ActionItems.js';\nexport type { ActionItemGroupProps } from './app-header/ActionItemGroup.js';\nexport { HelpMenu } from './help-menu/HelpMenu.js';\nexport type {\n  HelpMenuProps,\n  HelpMenuButtonEntry,\n  HelpMenuLinkEntry,\n  HelpMenuChildrenEntry,\n  HelpMenuCustomLinkEntry,\n  HelpMenuCustomItemEntry,\n  HelpMenuDefault,\n  HelpMenuDefaultableEntry,\n  HelpMenuExpandableEntry,\n  HelpMenuDependency,\n} from './help-menu/HelpMenu.js';\nexport type {\n  AppHeaderNavigationProps,\n  AppHeaderNavigationItemOwnProps,\n  AppHeaderNavigationItemProps,\n  // exported with alternate name for backwards compatibility\n  AppHeaderNavigationProps as AppHeaderNavItemsProps,\n} from './app-header/Navigation.js';\nexport type { AppIconProps } from './app-header/app-icon/AppIcon.js';\nexport { Logo, Logo as AppNavLink } from './app-header/Logo.js';\nexport type {\n  AppHeaderLogoProps,\n  AppHeaderLogoOwnProps,\n  // exported with alternate name for backwards compatibility\n  AppHeaderLogoProps as AppNavLinkProps,\n  AppHeaderLogoOwnProps as AppNavLinkOwnProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AppNavLinkInternalOwnProps, // exported for backwards compatibility\n} from './app-header/Logo.js';\nexport type {\n  ActionButtonOwnProps,\n  ActionButtonProps,\n} from './app-header/action-group/ActionButton.js';\nexport { ActionGroup as _ActionGroup } from './app-header/action-group/ActionGroup.js';\nexport type { ActionGroupProps as _ActionGroupProps } from './app-header/action-group/ActionGroup.js';\nexport type {\n  NavItemProps,\n  NavItemOwnProps,\n} from './app-header/action-group/NavItem.js';\nexport type { GroupProps } from './app-header/action-group/Group.js';\n\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  ControlledDetailViewProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  DetailViewOwnProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  DetailViewProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  UncontrolledDetailViewProps,\n} from './page/DetailView.js';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { HeaderProps } from './page/Header.js';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { MainProps } from './page/Main.js';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { Page } from './page/Page.js';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { PageProps } from './page/Page.js';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { panelSizeUnits } from './page/panel-types.js';\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PanelSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PanelSizeUnit,\n  Direction as _Direction,\n} from './page/panel-types.js';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { PanelControlButtonProps } from './page/PanelControlButton.js';\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  ControlledSidebarProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  SidebarOwnProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  SidebarProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  UncontrolledSidebarProps,\n} from './page/Sidebar.js';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { pagePanels } from './page/page-types.js';\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  DismissiblePagePanels,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PagePanelSizes,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PanelName,\n  /** @deprecated Use `PanelName` instead. */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PanelName as PagePanels,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  ControlledPagePanelProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PagePanelProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  UncontrolledPagePanelProps,\n} from './page/page-types.js';\n\nexport type { TitleBarActionProps } from './title-bar/Action.js';\nexport type { TitleBarNavigationProps } from './title-bar/Navigation.js';\nexport type { TitleBarPrefixProps } from './title-bar/Prefix.js';\nexport type { TitleBarSubtitleProps } from './title-bar/Subtitle.js';\nexport type { TitleBarSuffixProps } from './title-bar/Suffix.js';\nexport type { TitleBarTitleProps } from './title-bar/Title.js';\nexport { TitleBar } from './title-bar/TitleBar.js';\nexport type { TitleBarProps } from './title-bar/TitleBar.js';\n\nexport { InputGroup, type InputGroupProps } from './input-group/InputGroup.js';\nexport { inputGroupClassName } from './input-group/InputGroup.sty.js';\n\nexport { SplitLayout as _SplitLayout } from './split-layout/SplitLayout.js';\nexport type { SplitLayoutProps as _SplitLayoutProps } from './split-layout/SplitLayout.js';\nexport type { ResizeHandleProps as _SplitLayoutResizeHandleProps } from './split-layout/slots.js';\nexport { PageLayout } from './page-layout/PageLayout.js';\nexport type { ResizablePanelProps } from './split-layout/slots.js';\nexport type { PanelWidth } from './split-layout/width-utils.js';\nexport type { PageLayoutProps } from './page-layout/PageLayout.js';\nexport type { CollapsiblePanel } from './page-layout/shared/collapsible.js';\nexport type { HeaderProps as PageLayoutHeaderProps } from './page-layout/shared/portal-slots.js';\nexport type { SidebarProps as PageLayoutSidebarProps } from './page-layout/sidebar-layout/slots.js';\nexport type { DetailsProps as PageLayoutDetailsProps } from './page-layout/details-layout/slots.js';\nexport type { ContentProps as PageLayoutContentProps } from './split-layout/slots.js';\nexport type { LayoutMode as PageLayoutDetailsLayoutMode } from './page-layout/details-layout/DetailsLayoutContext.js';\nexport type { DetailsControlBarProps as PageLayoutDetailsControlBarProps } from './page-layout/details-layout/slots.js';\n"],
+  "mappings": "AAAA,SAAS,YAA+C;AACxD,SAAS,YAA+C;AACxD,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACwB;AAAA,OAEnB;AAMP,SAAS,eAAe;AAExB,SAAgC,2BAA4B;AAC5D,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAQ1B,SAAS,gBAAgB;AAqBzB,SAAS,MAAc,QAARA,aAA0B;AAczC,SAAwB,mBAAoB;AAuB5C,SAAS,YAAY;AAIrB,SAAS,sBAAsB;AAqB/B,SAAS,kBAAkB;AAyB3B,SAAS,gBAAgB;AAGzB,SAAS,kBAAwC;AACjD,SAAS,2BAA2B;AAEpC,SAAwB,mBAAoB;AAG5C,SAAS,kBAAkB;",
   "names": ["Logo"]
 }

package/esm/layouts/input-group/InputGroup.css

@@ -1,64 +1,64 @@
-._1jgl8s50-3-7-1 ._1x4bl8z0-3-7-1 {
+._1jgl8s50-3-8-0 ._1x4bl8z0-3-8-0 {
   gap: var(--dt-spacings-size-0, 0);
 }
-._1jgl8s50-3-7-1 ._1x4bl8z0-3-7-1 > *:not(:first-child),
- ._1jgl8s50-3-7-1 ._1x4bl8z0-3-7-1 > *:not(:first-child, ._1x4bl8z0-3-7-1) > .strato-inputgroup,
- ._1jgl8s50-3-7-1 ._1x4bl8z0-3-7-1 > ._1x4bl8z0-3-7-1 + * {
+._1jgl8s50-3-8-0 ._1x4bl8z0-3-8-0 > *:not(:first-child),
+ ._1jgl8s50-3-8-0 ._1x4bl8z0-3-8-0 > *:not(:first-child, ._1x4bl8z0-3-8-0) > .strato-inputgroup,
+ ._1jgl8s50-3-8-0 ._1x4bl8z0-3-8-0 > ._1x4bl8z0-3-8-0 + * {
   margin-left: -1px;
   box-sizing: content-box;
 }
-._1jgl8s50-3-7-1 ._1x4bl8z0-3-7-1 > *,
- ._1jgl8s50-3-7-1 ._1x4bl8z0-3-7-1 > * > .strato-inputgroup {
+._1jgl8s50-3-8-0 ._1x4bl8z0-3-8-0 > *,
+ ._1jgl8s50-3-8-0 ._1x4bl8z0-3-8-0 > * > .strato-inputgroup {
   position: relative;
-  z-index: var(--_bx32h5-3-7-1);
+  z-index: var(--_bx32h5-3-8-0);
 }
-._1jgl8s50-3-7-1 ._1x4bl8z0-3-7-1 > *:focus-within,
- ._1jgl8s50-3-7-1 ._1x4bl8z0-3-7-1 > * > .strato-inputgroup:focus-within {
+._1jgl8s50-3-8-0 ._1x4bl8z0-3-8-0 > *:focus-within,
+ ._1jgl8s50-3-8-0 ._1x4bl8z0-3-8-0 > * > .strato-inputgroup:focus-within {
   z-index: 6;
 }
-._1x4bl8z0-3-7-1 > .strato-inputgroup:not(:last-child),
- ._1x4bl8z0-3-7-1 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z0-3-8-0 > .strato-inputgroup:not(:last-child),
+ ._1x4bl8z0-3-8-0 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1x4bl8z0-3-7-1 > .strato-inputgroup:not(:first-child),
- ._1x4bl8z0-3-7-1 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z0-3-8-0 > .strato-inputgroup:not(:first-child),
+ ._1x4bl8z0-3-8-0 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._1x4bl8z0-3-7-1 > ._mvcxum0-3-7-1 {
+._1x4bl8z0-3-8-0 > ._mvcxum0-3-8-0 {
   display: grid;
   align-items: center;
   grid-template-rows: subgrid;
 }
-._1x4bl8z0-3-7-1:has(> ._mvcxum0-3-7-1 > label):has(> ._mvcxum0-3-7-1 > ._1l9bja60-3-7-1:last-child:not(:empty)) > ._mvcxum0-3-7-1 {
+._1x4bl8z0-3-8-0:has(> ._mvcxum0-3-8-0 > label):has(> ._mvcxum0-3-8-0 > ._1l9bja60-3-8-0:last-child:not(:empty)) > ._mvcxum0-3-8-0 {
   grid-row: 1 / span 3;
 }
-._1x4bl8z0-3-7-1:has(> ._mvcxum0-3-7-1 > label):not(:has(> ._mvcxum0-3-7-1 > ._1l9bja60-3-7-1:last-child:not(:empty))) > ._mvcxum0-3-7-1 {
+._1x4bl8z0-3-8-0:has(> ._mvcxum0-3-8-0 > label):not(:has(> ._mvcxum0-3-8-0 > ._1l9bja60-3-8-0:last-child:not(:empty))) > ._mvcxum0-3-8-0 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-7-1:not(:has(> ._mvcxum0-3-7-1 > label)):has(> ._mvcxum0-3-7-1 > ._1l9bja60-3-7-1:last-child:not(:empty)) > ._mvcxum0-3-7-1 {
+._1x4bl8z0-3-8-0:not(:has(> ._mvcxum0-3-8-0 > label)):has(> ._mvcxum0-3-8-0 > ._1l9bja60-3-8-0:last-child:not(:empty)) > ._mvcxum0-3-8-0 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-7-1 > ._mvcxum0-3-7-1 > label {
+._1x4bl8z0-3-8-0 > ._mvcxum0-3-8-0 > label {
   grid-row: 1 / 2;
   align-self: end;
 }
-._1x4bl8z0-3-7-1 > ._mvcxum0-3-7-1:has(> :not(label, ._1l9bja60-3-7-1)) > label {
+._1x4bl8z0-3-8-0 > ._mvcxum0-3-8-0:has(> :not(label, ._1l9bja60-3-8-0)) > label {
   width: 0;
   min-width: 100%;
 }
-._1x4bl8z0-3-7-1 > :not(._mvcxum0-3-7-1) {
+._1x4bl8z0-3-8-0 > :not(._mvcxum0-3-8-0) {
   grid-row: 1 / 2;
 }
-._1x4bl8z0-3-7-1:has(> ._mvcxum0-3-7-1 > label) > :not(._mvcxum0-3-7-1), ._1x4bl8z0-3-7-1:has(> ._mvcxum0-3-7-1 > label) > ._mvcxum0-3-7-1 > :not(label, ._1l9bja60-3-7-1) {
+._1x4bl8z0-3-8-0:has(> ._mvcxum0-3-8-0 > label) > :not(._mvcxum0-3-8-0), ._1x4bl8z0-3-8-0:has(> ._mvcxum0-3-8-0 > label) > ._mvcxum0-3-8-0 > :not(label, ._1l9bja60-3-8-0) {
   grid-row: 2 / 3;
 }
-._1x4bl8z0-3-7-1:has(> ._mvcxum0-3-7-1 > label) > ._mvcxum0-3-7-1 > ._1l9bja60-3-7-1 {
+._1x4bl8z0-3-8-0:has(> ._mvcxum0-3-8-0 > label) > ._mvcxum0-3-8-0 > ._1l9bja60-3-8-0 {
   grid-row: 3 / 4;
   align-self: start;
 }
-._1x4bl8z0-3-7-1 > ._mvcxum0-3-7-1:has(> :not(label, ._1l9bja60-3-7-1)) > ._1l9bja60-3-7-1 ._16z6rg14-3-7-1 {
+._1x4bl8z0-3-8-0 > ._mvcxum0-3-8-0:has(> :not(label, ._1l9bja60-3-8-0)) > ._1l9bja60-3-8-0 ._16z6rg14-3-8-0 {
   width: 0;
   flex: 1 1 auto;
 }

package/esm/layouts/input-group/InputGroup.sty.js

@@ -4,7 +4,7 @@ import "../../forms/forms-core/components/form-field-messages/FormFieldMessageIt
 import "../../forms/forms-core/components/form-field-messages/FormFieldMessages.css";
 import "../../styles/field.css";
 import "./InputGroup.css";
-var inputGroup = "_1x4bl8z0-3-7-1";
+var inputGroup = "_1x4bl8z0-3-8-0";
 var inputGroupClassName = "strato-inputgroup";
 export {
   inputGroup,

package/esm/layouts/input-group/InputGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/input-group/InputGroup.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../forms/forms-core/components/form-field/FormField.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessages.css';\nimport '../../styles/field.css';\nimport './InputGroup.css';\nexport var inputGroup = '_1x4bl8z0-3-7-1';\nexport var inputGroupClassName = 'strato-inputgroup';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../forms/forms-core/components/form-field/FormField.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessages.css';\nimport '../../styles/field.css';\nimport './InputGroup.css';\nexport var inputGroup = '_1x4bl8z0-3-8-0';\nexport var inputGroupClassName = 'strato-inputgroup';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,sBAAsB;",
   "names": []
 }

package/esm/layouts/page/DetailView.css

@@ -1,11 +1,11 @@
-._wapl5d0-3-7-1 {
+._wapl5d0-3-8-0 {
   grid-area: details;
   flex-direction: row-reverse;
 }
-._wapl5d1-3-7-1 {
+._wapl5d1-3-8-0 {
   background: var(--dt-colors-background-base-default, #f9f9fa);
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-7-1 ._wapl5d1-3-7-1 {
+._1jgl8s50-3-8-0 ._wapl5d1-3-8-0 {
   border-top-left-radius: 0;
 }

package/esm/layouts/page/DetailView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/DetailView.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useCallback, useRef, type HTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\n\nimport * as styles from './DetailView.sty.js';\nimport { useKeepMounted } from './keepMounted.js';\nimport { usePageContext, useRegisterPagePanel } from './page-context.js';\nimport type {\n  ControlledPagePanelProps,\n  PagePanelSizes,\n  PanelName,\n  UncontrolledPagePanelProps,\n} from './page-types.js';\nimport type { PanelSize } from './panel-types.js';\nimport * as panelStyles from './panel.sty.js';\nimport { Panel } from './Panel.js';\nimport { useWatchBreakpoint } from './useWatchBreakpoint.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Drawer } from '../../overlays/drawer/Drawer.js';\n\n/** @public */\nexport interface DetailViewOwnProps\n  extends WithChildren,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onResize' | keyof StylingProps>,\n    StylingProps,\n    DataTestId {\n  /**\n   * The desired width of the sidebar.\n   * Depending on the available screen width and other panel configurations,\n   * the size of the panel might not match the `preferredWidth` exactly.\n   * @defaultValue 15%\n   */\n  preferredWidth?: PanelSize;\n  /**\n   * The minimum width of the sidebar in pixels.\n   * @defaultValue 200\n   */\n  minWidth?: number;\n  /**\n   * Screen size below which the overlay Drawer will be shown.\n   * @defaultValue 640\n   */\n  breakpoint?: number;\n  /**\n   * If the sidebar's width can be resized (by drag and drop)\n   * @defaultValue true\n   */\n  resizable?: boolean;\n  /**\n   * Defines if the Sidebar content will be kept in the DOM, even if the content\n   * is not shown to the user.\n   * @defaultValue false\n   */\n  keepMounted?: boolean;\n  /**\n   * Notifies the user if an action happened that should change the dismissed state\n   * like clicking on the backdrop on mobile.\n   * The returned state is only a recommendation and might differ from what the actual\n   * state of the panel should be.\n   */\n  onDismissChange?: (state: boolean, reason: string) => void;\n  /**\n   * Callback triggered after resizing is finished with the new panel sizes of\n   * all existing panels and the newly applied panel width (in px).\n   */\n  onResize?: (sizes: PagePanelSizes, width: number) => void;\n}\n\n/** @public */\nexport interface ControlledDetailViewProps\n  extends DetailViewOwnProps,\n    ControlledPagePanelProps {}\n\n/** @public */\nexport interface UncontrolledDetailViewProps\n  extends DetailViewOwnProps,\n    UncontrolledPagePanelProps {}\n\n/** @public */\nexport type DetailViewProps =\n  | ControlledDetailViewProps\n  | UncontrolledDetailViewProps;\n\n/**\n * The `DetailView` component is used inside the `Page` component for displaying content in the corresponding panel.\n * @public\n */\nexport const DetailView = forwardRef<HTMLDivElement, DetailViewProps>(\n  (props, forwardedRef) => {\n    const {\n      breakpoint = 1280,\n      className,\n      defaultDismissed,\n      dismissed,\n      minWidth = 320,\n      onDismissChange,\n      onResize,\n      resizable = true,\n      preferredWidth = '25%',\n      style,\n      children,\n      keepMounted = false,\n      ...restProps\n    }: DetailViewProps = props;\n\n    const panelId = useId();\n    const panelName: PanelName = 'details';\n    const panelRef = useRef<HTMLDivElement>(null);\n    const mergedRefs = useMergeRefs([panelRef, forwardedRef]);\n    const intl = useIntl();\n\n    const page = usePageContext();\n\n    const panel = useRegisterPagePanel(panelName, {\n      ref: panelRef,\n      isControlled: dismissed !== undefined,\n      isDismissed: dismissed ?? props.defaultDismissed,\n      minWidth,\n      breakpoint,\n    });\n\n    const setIsDismissedWithReason = useCallback(\n      (value: boolean, reason: string) => {\n        if (value === true) {\n          page.dismissPanel(panelName);\n        } else {\n          page.expandPanel(panelName);\n        }\n        onDismissChange?.(value, reason);\n      },\n      [onDismissChange, page, panelName],\n    );\n\n    const aboveBreakpoint = useWatchBreakpoint({\n      breakpoint,\n      callback: setIsDismissedWithReason,\n    });\n\n    const panelChildren = useKeepMounted({ children, keepMounted });\n\n    if (!panel) {\n      return null;\n    }\n\n    const label = intl.formatMessage({\n      defaultMessage: 'Detail View',\n      id: 'rR+xf1BGWvDgZVww',\n    });\n\n    const isDisplayedAsDismissed = !aboveBreakpoint || panel.isDismissed;\n\n    return (\n      <Panel\n        name={panelName}\n        id={panelId}\n        className={clsx(\n          isDisplayedAsDismissed && panelStyles.dismissedPanel,\n          styles.details,\n        )}\n        aria-label={label}\n      >\n        <Panel.Content\n          {...restProps}\n          containerSize={page.containerSize}\n          ref={mergedRefs}\n          label={label}\n          onResize={(width) => onResize?.(page.getPanelSizes(), width)}\n          preferredWidth={preferredWidth}\n          minWidth={minWidth}\n          handle={resizable === true ? 'left' : 'hidden'}\n          isDismissed={isDisplayedAsDismissed}\n          className={clsx(styles.content, className)}\n          style={style}\n        >\n          {panelChildren}\n        </Panel.Content>\n\n        {!aboveBreakpoint ? (\n          <Drawer\n            className={panelStyles.drawer}\n            isDismissed={panel.isDismissed}\n            onDismiss={setIsDismissedWithReason}\n            placement=\"right\"\n            width=\"wide\"\n          >\n            <div {...restProps} className={panelStyles.drawerContent}>\n              {children}\n            </div>\n          </Drawer>\n        ) : null}\n      </Panel>\n    );\n  },\n);\n(DetailView as typeof DetailView & { displayName: string }).displayName =\n  'Page.DetailView';\n"],
-  "mappings": "AA6JM,SASE,KATF;AA7JN,OAAO,UAAU;AACjB,SAAS,YAAY,aAAa,cAAmC;AACrE,SAAS,eAAe;AAGxB,YAAY,YAAY;AACxB,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB,4BAA4B;AAQrD,YAAY,iBAAiB;AAC7B,SAAS,aAAa;AACtB,SAAS,0BAA0B;AACnC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAI7B,SAAS,cAAc;AAqEhB,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,GAAG;AAAA,IACL,IAAqB;AAErB,UAAM,UAAU,MAAM;AACtB,UAAM,YAAuB;AAC7B,UAAM,WAAW,OAAuB,IAAI;AAC5C,UAAM,aAAa,aAAa,CAAC,UAAU,YAAY,CAAC;AACxD,UAAM,OAAO,QAAQ;AAErB,UAAM,OAAO,eAAe;AAE5B,UAAM,QAAQ,qBAAqB,WAAW;AAAA,MAC5C,KAAK;AAAA,MACL,cAAc,cAAc;AAAA,MAC5B,aAAa,aAAa,MAAM;AAAA,MAChC;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,2BAA2B;AAAA,MAC/B,CAAC,OAAgB,WAAmB;AAClC,YAAI,UAAU,MAAM;AAClB,eAAK,aAAa,SAAS;AAAA,QAC7B,OAAO;AACL,eAAK,YAAY,SAAS;AAAA,QAC5B;AACA,0BAAkB,OAAO,MAAM;AAAA,MACjC;AAAA,MACA,CAAC,iBAAiB,MAAM,SAAS;AAAA,IACnC;AAEA,UAAM,kBAAkB,mBAAmB;AAAA,MACzC;AAAA,MACA,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,gBAAgB,eAAe,EAAE,UAAU,YAAY,CAAC;AAE9D,QAAI,CAAC,OAAO;AACV,aAAO;AAAA,IACT;AAEA,UAAM,QAAQ,KAAK,cAAc;AAAA,MAC/B,gBAAgB;AAAA,MAChB,IAAI;AAAA,IACN,CAAC;AAED,UAAM,yBAAyB,CAAC,mBAAmB,MAAM;AAEzD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,WAAW;AAAA,UACT,0BAA0B,YAAY;AAAA,UACtC,OAAO;AAAA,QACT;AAAA,QACA,cAAY;AAAA,QAEZ;AAAA;AAAA,YAAC,MAAM;AAAA,YAAN;AAAA,cACE,GAAG;AAAA,cACJ,eAAe,KAAK;AAAA,cACpB,KAAK;AAAA,cACL;AAAA,cACA,UAAU,CAAC,UAAU,WAAW,KAAK,cAAc,GAAG,KAAK;AAAA,cAC3D;AAAA,cACA;AAAA,cACA,QAAQ,cAAc,OAAO,SAAS;AAAA,cACtC,aAAa;AAAA,cACb,WAAW,KAAK,OAAO,SAAS,SAAS;AAAA,cACzC;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UAEC,CAAC,kBACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,YAAY;AAAA,cACvB,aAAa,MAAM;AAAA,cACnB,WAAW;AAAA,cACX,WAAU;AAAA,cACV,OAAM;AAAA,cAEN,8BAAC,SAAK,GAAG,WAAW,WAAW,YAAY,eACxC,UACH;AAAA;AAAA,UACF,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACC,WAA2D,cAC1D;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useCallback, useRef, type HTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DetailView.sty.js';\nimport { useKeepMounted } from './keepMounted.js';\nimport { usePageContext, useRegisterPagePanel } from './page-context.js';\nimport type {\n  ControlledPagePanelProps,\n  PagePanelSizes,\n  PanelName,\n  UncontrolledPagePanelProps,\n} from './page-types.js';\nimport type { PanelSize } from './panel-types.js';\nimport * as panelStyles from './panel.sty.js';\nimport { Panel } from './Panel.js';\nimport { useWatchBreakpoint } from './useWatchBreakpoint.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Drawer } from '../../overlays/drawer/Drawer.js';\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Details` instead.\n */\nexport interface DetailViewOwnProps\n  extends WithChildren,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onResize' | keyof StylingProps>,\n    StylingProps,\n    DataTestId {\n  /**\n   * The desired width of the sidebar.\n   * Depending on the available screen width and other panel configurations,\n   * the size of the panel might not match the `preferredWidth` exactly.\n   * @defaultValue 15%\n   */\n  preferredWidth?: PanelSize;\n  /**\n   * The minimum width of the sidebar in pixels.\n   * @defaultValue 200\n   */\n  minWidth?: number;\n  /**\n   * Screen size below which the overlay Drawer will be shown.\n   * @defaultValue 640\n   */\n  breakpoint?: number;\n  /**\n   * If the sidebar's width can be resized (by drag and drop)\n   * @defaultValue true\n   */\n  resizable?: boolean;\n  /**\n   * Defines if the Sidebar content will be kept in the DOM, even if the content\n   * is not shown to the user.\n   * @defaultValue false\n   */\n  keepMounted?: boolean;\n  /**\n   * Notifies the user if an action happened that should change the dismissed state\n   * like clicking on the backdrop on mobile.\n   * The returned state is only a recommendation and might differ from what the actual\n   * state of the panel should be.\n   */\n  onDismissChange?: (state: boolean, reason: string) => void;\n  /**\n   * Callback triggered after resizing is finished with the new panel sizes of\n   * all existing panels and the newly applied panel width (in px).\n   */\n  onResize?: (sizes: PagePanelSizes, width: number) => void;\n}\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Details` instead.\n */\nexport interface ControlledDetailViewProps\n  extends DetailViewOwnProps,\n    ControlledPagePanelProps {}\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Details` instead.\n */\nexport interface UncontrolledDetailViewProps\n  extends DetailViewOwnProps,\n    UncontrolledPagePanelProps {}\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Details` instead.\n */\nexport type DetailViewProps =\n  | ControlledDetailViewProps\n  | UncontrolledDetailViewProps;\n\n/**\n * The `DetailView` component is used inside the `Page` component for displaying content in the corresponding panel.\n * @public\n * @deprecated The `Page.DetailView` component is deprecated. Please use `PageLayout.Details` instead.\n */\nexport const DetailView = forwardRef<HTMLDivElement, DetailViewProps>(\n  (props, forwardedRef) => {\n    const {\n      breakpoint = 1280,\n      className,\n      defaultDismissed,\n      dismissed,\n      minWidth = 320,\n      onDismissChange,\n      onResize,\n      resizable = true,\n      preferredWidth = '25%',\n      style,\n      children,\n      keepMounted = false,\n      ...restProps\n    }: DetailViewProps = props;\n\n    const panelId = useId();\n    const panelName: PanelName = 'details';\n    const panelRef = useRef<HTMLDivElement>(null);\n    const mergedRefs = useMergeRefs([panelRef, forwardedRef]);\n    const intl = useIntl();\n\n    const page = usePageContext();\n\n    const panel = useRegisterPagePanel(panelName, {\n      ref: panelRef,\n      isControlled: dismissed !== undefined,\n      isDismissed: dismissed ?? props.defaultDismissed,\n      minWidth,\n      breakpoint,\n    });\n\n    const setIsDismissedWithReason = useCallback(\n      (value: boolean, reason: string) => {\n        if (value === true) {\n          page.dismissPanel(panelName);\n        } else {\n          page.expandPanel(panelName);\n        }\n        onDismissChange?.(value, reason);\n      },\n      [onDismissChange, page, panelName],\n    );\n\n    const aboveBreakpoint = useWatchBreakpoint({\n      breakpoint,\n      callback: setIsDismissedWithReason,\n    });\n\n    const panelChildren = useKeepMounted({ children, keepMounted });\n\n    if (!panel) {\n      return null;\n    }\n\n    const label = intl.formatMessage({\n      defaultMessage: 'Detail View',\n      id: 'rR+xf1BGWvDgZVww',\n    });\n\n    const isDisplayedAsDismissed = !aboveBreakpoint || panel.isDismissed;\n\n    return (\n      <Panel\n        name={panelName}\n        id={panelId}\n        className={clsx(\n          isDisplayedAsDismissed && panelStyles.dismissedPanel,\n          styles.details,\n        )}\n        aria-label={label}\n      >\n        <Panel.Content\n          {...restProps}\n          containerSize={page.containerSize}\n          ref={mergedRefs}\n          label={label}\n          onResize={(width) => onResize?.(page.getPanelSizes(), width)}\n          preferredWidth={preferredWidth}\n          minWidth={minWidth}\n          handle={resizable === true ? 'left' : 'hidden'}\n          isDismissed={isDisplayedAsDismissed}\n          className={clsx(styles.content, className)}\n          style={style}\n        >\n          {panelChildren}\n        </Panel.Content>\n\n        {!aboveBreakpoint ? (\n          <Drawer\n            className={panelStyles.drawer}\n            isDismissed={panel.isDismissed}\n            onDismiss={setIsDismissedWithReason}\n            placement=\"right\"\n            width=\"wide\"\n          >\n            <div {...restProps} className={panelStyles.drawerContent}>\n              {children}\n            </div>\n          </Drawer>\n        ) : null}\n      </Panel>\n    );\n  },\n);\n(DetailView as typeof DetailView & { displayName: string }).displayName =\n  'Page.DetailView';\n"],
+  "mappings": "AAyKM,SASE,KATF;AAzKN,OAAO,UAAU;AACjB,SAAS,YAAY,aAAa,cAAmC;AACrE,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB,4BAA4B;AAQrD,YAAY,iBAAiB;AAC7B,SAAS,aAAa;AACtB,SAAS,0BAA0B;AACnC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAI7B,SAAS,cAAc;AAkFhB,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,GAAG;AAAA,IACL,IAAqB;AAErB,UAAM,UAAU,MAAM;AACtB,UAAM,YAAuB;AAC7B,UAAM,WAAW,OAAuB,IAAI;AAC5C,UAAM,aAAa,aAAa,CAAC,UAAU,YAAY,CAAC;AACxD,UAAM,OAAO,QAAQ;AAErB,UAAM,OAAO,eAAe;AAE5B,UAAM,QAAQ,qBAAqB,WAAW;AAAA,MAC5C,KAAK;AAAA,MACL,cAAc,cAAc;AAAA,MAC5B,aAAa,aAAa,MAAM;AAAA,MAChC;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,2BAA2B;AAAA,MAC/B,CAAC,OAAgB,WAAmB;AAClC,YAAI,UAAU,MAAM;AAClB,eAAK,aAAa,SAAS;AAAA,QAC7B,OAAO;AACL,eAAK,YAAY,SAAS;AAAA,QAC5B;AACA,0BAAkB,OAAO,MAAM;AAAA,MACjC;AAAA,MACA,CAAC,iBAAiB,MAAM,SAAS;AAAA,IACnC;AAEA,UAAM,kBAAkB,mBAAmB;AAAA,MACzC;AAAA,MACA,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,gBAAgB,eAAe,EAAE,UAAU,YAAY,CAAC;AAE9D,QAAI,CAAC,OAAO;AACV,aAAO;AAAA,IACT;AAEA,UAAM,QAAQ,KAAK,cAAc;AAAA,MAC/B,gBAAgB;AAAA,MAChB,IAAI;AAAA,IACN,CAAC;AAED,UAAM,yBAAyB,CAAC,mBAAmB,MAAM;AAEzD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,WAAW;AAAA,UACT,0BAA0B,YAAY;AAAA,UACtC,OAAO;AAAA,QACT;AAAA,QACA,cAAY;AAAA,QAEZ;AAAA;AAAA,YAAC,MAAM;AAAA,YAAN;AAAA,cACE,GAAG;AAAA,cACJ,eAAe,KAAK;AAAA,cACpB,KAAK;AAAA,cACL;AAAA,cACA,UAAU,CAAC,UAAU,WAAW,KAAK,cAAc,GAAG,KAAK;AAAA,cAC3D;AAAA,cACA;AAAA,cACA,QAAQ,cAAc,OAAO,SAAS;AAAA,cACtC,aAAa;AAAA,cACb,WAAW,KAAK,OAAO,SAAS,SAAS;AAAA,cACzC;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UAEC,CAAC,kBACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,YAAY;AAAA,cACvB,aAAa,MAAM;AAAA,cACnB,WAAW;AAAA,cACX,WAAU;AAAA,cACV,OAAM;AAAA,cAEN,8BAAC,SAAK,GAAG,WAAW,WAAW,YAAY,eACxC,UACH;AAAA;AAAA,UACF,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACC,WAA2D,cAC1D;",
   "names": []
 }

package/esm/layouts/page/DetailView.sty.js

@@ -1,7 +1,7 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./DetailView.css";
-var content = "_wapl5d1-3-7-1";
-var details = "_wapl5d0-3-7-1";
+var content = "_wapl5d1-3-8-0";
+var details = "_wapl5d0-3-8-0";
 export {
   content,
   details

package/esm/layouts/page/DetailView.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/DetailView.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './DetailView.css';\nexport var content = '_wapl5d1-3-7-1';\nexport var details = '_wapl5d0-3-7-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './DetailView.css';\nexport var content = '_wapl5d1-3-8-0';\nexport var details = '_wapl5d0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,UAAU;",
   "names": []
 }

package/esm/layouts/page/Header.css

@@ -1,9 +1,9 @@
-._150dima0-3-7-1 {
+._150dima0-3-8-0 {
   grid-area: header;
   width: 100%;
   padding: var(--dt-spacings-size-8, 8px);
   box-sizing: border-box;
-  ._1jgl8s50-3-7-1 & {
+  ._1jgl8s50-3-8-0 & {
     border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
   }
 }

package/esm/layouts/page/Header.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Header.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport type { HTMLAttributes } from 'react';\n\nimport * as styles from './Header.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\n\n/** @public */\nexport interface HeaderProps\n  extends WithChildren,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps>,\n    StylingProps,\n    DataTestId {}\n\n/**\n * The `Header` component is used inside the `Page` component for displaying content at the very top of the page.\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n  const {\n    children,\n    className,\n    style,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: HeaderProps = props;\n\n  return (\n    <div\n      className={clsx(className, styles.header)}\n      style={style}\n      data-testid={dataTestId}\n      {...remainingProps}\n    >\n      {children}\n    </div>\n  );\n};\nHeader.displayName = 'Page.Header';\n"],
-  "mappings": "AA8BI;AA9BJ,OAAO,UAAU;AAGjB,YAAY,YAAY;AAiBjB,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAiB;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,WAAW,OAAO,MAAM;AAAA,MACxC;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AACA,OAAO,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport type { HTMLAttributes } from 'react';\n\nimport * as styles from './Header.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Header` instead.\n */\nexport interface HeaderProps\n  extends WithChildren,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps>,\n    StylingProps,\n    DataTestId {}\n\n/**\n * The `Header` component is used inside the `Page` component for displaying content at the very top of the page.\n * @public\n * @deprecated The `Page.Header` component is deprecated. Please use `PageLayout.Header` instead.\n */\nexport const Header = (props: HeaderProps) => {\n  const {\n    children,\n    className,\n    style,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: HeaderProps = props;\n\n  return (\n    <div\n      className={clsx(className, styles.header)}\n      style={style}\n      data-testid={dataTestId}\n      {...remainingProps}\n    >\n      {children}\n    </div>\n  );\n};\nHeader.displayName = 'Page.Header';\n"],
+  "mappings": "AAiCI;AAjCJ,OAAO,UAAU;AAGjB,YAAY,YAAY;AAoBjB,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAiB;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,WAAW,OAAO,MAAM;AAAA,MACxC;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AACA,OAAO,cAAc;",
   "names": []
 }

package/esm/layouts/page/Header.sty.js

@@ -1,6 +1,6 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./Header.css";
-var header = "_150dima0-3-7-1";
+var header = "_150dima0-3-8-0";
 export {
   header
 };

package/esm/layouts/page/Header.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Header.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Header.css';\nexport var header = '_150dima0-3-7-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Header.css';\nexport var header = '_150dima0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/page/Main.css

@@ -1,23 +1,23 @@
-._5zin930-3-7-1 {
+._5zin930-3-8-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   grid-area: main;
   overflow: hidden;
 }
-._5zin931-3-7-1 {
+._5zin931-3-8-0 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
 }
-._5zin932-3-7-1 {
+._5zin932-3-8-0 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-7-1 ._5zin932-3-7-1 {
+._1jgl8s50-3-8-0 ._5zin932-3-8-0 {
   border-radius: 0;
 }
-._5zin933-3-7-1 {
+._5zin933-3-8-0 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-7-1 ._5zin933-3-7-1 {
+._1jgl8s50-3-8-0 ._5zin933-3-8-0 {
   border-radius: 0;
 }

package/esm/layouts/page/Main.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Main.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useRef, type HTMLAttributes } from 'react';\n\nimport * as styles from './Main.sty.js';\nimport { usePageContext, useRegisterPagePanel } from './page-context.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\n/** @public */\nexport interface MainProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps> {\n  /**\n   * The minimum width of the main panel in pixels.\n   * @defaultValue 320\n   */\n  minWidth?: number;\n}\n\n/**\n * The `Main` component is used inside the `Page` component for displaying content in the corresponding panel.\n * It is the only compound that is mandatory for rendering the `Page`.\n * @public\n */\nexport const Main = forwardRef<HTMLDivElement, MainProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      minWidth = 320,\n      className,\n      style,\n      ...remainingProps\n    }: MainProps = props;\n\n    const mainRef = useRef<HTMLDivElement>(null);\n    const mergedRefs = useMergeRefs([mainRef, forwardedRef]);\n\n    useRegisterPagePanel('main', {\n      ref: mainRef,\n      minWidth,\n    });\n\n    const { panels } = usePageContext();\n    const hasSidebar = !!panels.sidebar;\n    const hasDetails = !!panels.details && !panels.details.isDismissed;\n\n    return (\n      <main\n        {...remainingProps}\n        ref={mergedRefs}\n        className={clsx(\n          styles.main,\n          hasSidebar && styles.withSidebar,\n          hasDetails && styles.withDetails,\n          className,\n        )}\n        style={{ ...style, minWidth }}\n      >\n        <div className={styles.content}>{children}</div>\n      </main>\n    );\n  },\n);\n\n(Main as typeof Main & { displayName: string }).displayName = 'Page.Main';\n"],
-  "mappings": "AA8DQ;AA9DR,OAAO,UAAU;AACjB,SAAS,YAAY,cAAmC;AAExD,YAAY,YAAY;AACxB,SAAS,gBAAgB,4BAA4B;AACrD,SAAS,oBAAoB;AAuBtB,MAAM,OAAO;AAAA,EAClB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAe;AAEf,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,aAAa,aAAa,CAAC,SAAS,YAAY,CAAC;AAEvD,yBAAqB,QAAQ;AAAA,MAC3B,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAED,UAAM,EAAE,OAAO,IAAI,eAAe;AAClC,UAAM,aAAa,CAAC,CAAC,OAAO;AAC5B,UAAM,aAAa,CAAC,CAAC,OAAO,WAAW,CAAC,OAAO,QAAQ;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW;AAAA,UACT,OAAO;AAAA,UACP,cAAc,OAAO;AAAA,UACrB,cAAc,OAAO;AAAA,UACrB;AAAA,QACF;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,QAE5B,8BAAC,SAAI,WAAW,OAAO,SAAU,UAAS;AAAA;AAAA,IAC5C;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useRef, type HTMLAttributes } from 'react';\n\nimport * as styles from './Main.sty.js';\nimport { usePageContext, useRegisterPagePanel } from './page-context.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Content` instead.\n */\nexport interface MainProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps> {\n  /**\n   * The minimum width of the main panel in pixels.\n   * @defaultValue 320\n   */\n  minWidth?: number;\n}\n\n/**\n * The `Main` component is used inside the `Page` component for displaying content in the corresponding panel.\n * It is the only compound that is mandatory for rendering the `Page`.\n * @public\n * @deprecated The `Page.Main` component is deprecated. Please use `PageLayout.Content` instead.\n */\nexport const Main = forwardRef<HTMLDivElement, MainProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      minWidth = 320,\n      className,\n      style,\n      ...remainingProps\n    }: MainProps = props;\n\n    const mainRef = useRef<HTMLDivElement>(null);\n    const mergedRefs = useMergeRefs([mainRef, forwardedRef]);\n\n    useRegisterPagePanel('main', {\n      ref: mainRef,\n      minWidth,\n    });\n\n    const { panels } = usePageContext();\n    const hasSidebar = !!panels.sidebar;\n    const hasDetails = !!panels.details && !panels.details.isDismissed;\n\n    return (\n      <main\n        {...remainingProps}\n        ref={mergedRefs}\n        className={clsx(\n          styles.main,\n          hasSidebar && styles.withSidebar,\n          hasDetails && styles.withDetails,\n          className,\n        )}\n        style={{ ...style, minWidth }}\n      >\n        <div className={styles.content}>{children}</div>\n      </main>\n    );\n  },\n);\n\n(Main as typeof Main & { displayName: string }).displayName = 'Page.Main';\n"],
+  "mappings": "AAkEQ;AAlER,OAAO,UAAU;AACjB,SAAS,YAAY,cAAmC;AAExD,YAAY,YAAY;AACxB,SAAS,gBAAgB,4BAA4B;AACrD,SAAS,oBAAoB;AA2BtB,MAAM,OAAO;AAAA,EAClB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAe;AAEf,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,aAAa,aAAa,CAAC,SAAS,YAAY,CAAC;AAEvD,yBAAqB,QAAQ;AAAA,MAC3B,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAED,UAAM,EAAE,OAAO,IAAI,eAAe;AAClC,UAAM,aAAa,CAAC,CAAC,OAAO;AAC5B,UAAM,aAAa,CAAC,CAAC,OAAO,WAAW,CAAC,OAAO,QAAQ;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW;AAAA,UACT,OAAO;AAAA,UACP,cAAc,OAAO;AAAA,UACrB,cAAc,OAAO;AAAA,UACrB;AAAA,QACF;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,QAE5B,8BAAC,SAAI,WAAW,OAAO,SAAU,UAAS;AAAA;AAAA,IAC5C;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
   "names": []
 }

package/esm/layouts/page/Main.sty.js

@@ -1,9 +1,9 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./Main.css";
-var content = "_5zin931-3-7-1";
-var main = "_5zin930-3-7-1";
-var withDetails = "_5zin933-3-7-1";
-var withSidebar = "_5zin932-3-7-1";
+var content = "_5zin931-3-8-0";
+var main = "_5zin930-3-8-0";
+var withDetails = "_5zin933-3-8-0";
+var withSidebar = "_5zin932-3-8-0";
 export {
   content,
   main,

package/esm/layouts/page/Main.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Main.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Main.css';\nexport var content = '_5zin931-3-7-1';\nexport var main = '_5zin930-3-7-1';\nexport var withDetails = '_5zin933-3-7-1';\nexport var withSidebar = '_5zin932-3-7-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Main.css';\nexport var content = '_5zin931-3-8-0';\nexport var main = '_5zin930-3-8-0';\nexport var withDetails = '_5zin933-3-8-0';\nexport var withSidebar = '_5zin932-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,cAAc;",
   "names": []
 }