@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/layouts/page/Sidebar.css

@@ -1,16 +1,16 @@
-._zdcge90-3-4-0 {
+._zdcge90-3-5-0 {
   grid-area: sidebar;
   justify-content: flex-end;
 }
-._zdcge91-3-4-0 {
+._zdcge91-3-5-0 {
   flex-shrink: 0;
   height: 100%;
   left: 0;
   position: relative;
   width: 0;
 }
-._zdcge93-3-4-0 {
-  --_zdcge92-3-4-0: 16px;
+._zdcge93-3-5-0 {
+  --_zdcge92-3-5-0: 16px;
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
@@ -20,29 +20,29 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: background-color, translate;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
-  width: var(--_zdcge92-3-4-0);
-  translate: calc(0px - var(--_zdcge92-3-4-0) * 2);
+  width: var(--_zdcge92-3-5-0);
+  translate: calc(0px - var(--_zdcge92-3-5-0) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1p91g301-3-4-0:is(:hover,:focus-within) ._zdcge93-3-4-0 {
+._1p91g301-3-5-0:is(:hover,:focus-within) ._zdcge93-3-5-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
-  translate: calc(0px - var(--_zdcge92-3-4-0) - var(--_zdcge92-3-4-0) / 2);
+  translate: calc(0px - var(--_zdcge92-3-5-0) - var(--_zdcge92-3-5-0) / 2);
 }
-._zdcge95-3-4-0 {
-  --_zdcge94-3-4-0: 24px;
+._zdcge95-3-5-0 {
+  --_zdcge94-3-5-0: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
-  left: calc(0px - var(--_zdcge94-3-4-0) / 2 + 2px);
+  left: calc(0px - var(--_zdcge94-3-5-0) / 2 + 2px);
 }
-._zdcge96-3-4-0 {
-  width: var(--_zdcge94-3-4-0);
-  height: var(--_zdcge94-3-4-0);
+._zdcge96-3-5-0 {
+  width: var(--_zdcge94-3-5-0);
+  height: var(--_zdcge94-3-5-0);
   box-sizing: border-box;
   outline-color: transparent;
   outline-style: var(--dt-borders-style-default, solid);
   outline-width: var(--dt-borders-width-emphasized, 2px);
 }
-._zdcge97-3-4-0 {
+._zdcge97-3-5-0 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   opacity: 0;
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
@@ -50,27 +50,27 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._zdcge97-3-4-0:hover {
+._zdcge97-3-5-0:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._zdcge97-3-4-0:focus {
+._zdcge97-3-5-0:focus {
   opacity: 1;
 }
-._1p91g301-3-4-0:hover ._zdcge97-3-4-0 {
+._1p91g301-3-5-0:hover ._zdcge97-3-5-0 {
   opacity: 1;
 }
-._zdcge98-3-4-0 {
+._zdcge98-3-5-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge98-3-4-0:hover {
+._zdcge98-3-5-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge99-3-4-0._1p91g302-3-4-0 {
+._zdcge99-3-5-0._1p91g302-3-5-0 {
   width: var(--dt-spacings-size-16, 16px);
 }
-._zdcge9a-3-4-0 {
+._zdcge9a-3-5-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-inline: var(--dt-spacings-size-8, 8px);

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

@@ -1,14 +1,15 @@
+import "../../core/components/app-root/AppRoot.css";
 import "./panel.css";
 import "../../core/styles/focusRingStatic.css";
 import "./Sidebar.css";
-var buttonContainer = "_zdcge95-3-4-0";
-var dismissButton = "_zdcge97-3-4-0 _zdcge96-3-4-0";
-var expandButton = "_zdcge98-3-4-0 _zdcge96-3-4-0";
-var hint = "_zdcge93-3-4-0 _z0fq9b4-3-4-0 _z0fq9bc-3-4-0 _z0fq9b6-3-4-0 _z0fq9bb-3-4-0";
-var integratedControls = "_zdcge91-3-4-0";
-var integratedControlsDrawerHeader = "_zdcge9a-3-4-0";
-var integratedControlsPanel = "_zdcge99-3-4-0";
-var sidebar = "_zdcge90-3-4-0";
+var buttonContainer = "_zdcge95-3-5-0";
+var dismissButton = "_zdcge97-3-5-0 _zdcge96-3-5-0";
+var expandButton = "_zdcge98-3-5-0 _zdcge96-3-5-0";
+var hint = "_zdcge93-3-5-0 _z0fq9b4-3-5-0 _z0fq9bd-3-5-0 _z0fq9b6-3-5-0 _z0fq9bc-3-5-0";
+var integratedControls = "_zdcge91-3-5-0";
+var integratedControlsDrawerHeader = "_zdcge9a-3-5-0";
+var integratedControlsPanel = "_zdcge99-3-5-0";
+var sidebar = "_zdcge90-3-5-0";
 export {
   buttonContainer,
   dismissButton,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Sidebar.css.ts"],
-  "sourcesContent": ["import './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-4-0';\nexport var dismissButton = '_zdcge97-3-4-0 _zdcge96-3-4-0';\nexport var expandButton = '_zdcge98-3-4-0 _zdcge96-3-4-0';\nexport var hint = '_zdcge93-3-4-0 _z0fq9b4-3-4-0 _z0fq9bc-3-4-0 _z0fq9b6-3-4-0 _z0fq9bb-3-4-0';\nexport var integratedControls = '_zdcge91-3-4-0';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-4-0';\nexport var integratedControlsPanel = '_zdcge99-3-4-0';\nexport var sidebar = '_zdcge90-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,OAAO;AACX,IAAI,qBAAqB;AACzB,IAAI,iCAAiC;AACrC,IAAI,0BAA0B;AAC9B,IAAI,UAAU;",
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-5-0';\nexport var dismissButton = '_zdcge97-3-5-0 _zdcge96-3-5-0';\nexport var expandButton = '_zdcge98-3-5-0 _zdcge96-3-5-0';\nexport var hint = '_zdcge93-3-5-0 _z0fq9b4-3-5-0 _z0fq9bd-3-5-0 _z0fq9b6-3-5-0 _z0fq9bc-3-5-0';\nexport var integratedControls = '_zdcge91-3-5-0';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-5-0';\nexport var integratedControlsPanel = '_zdcge99-3-5-0';\nexport var sidebar = '_zdcge90-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,OAAO;AACX,IAAI,qBAAqB;AACzB,IAAI,iCAAiC;AACrC,IAAI,0BAA0B;AAC9B,IAAI,UAAU;",
   "names": []
 }

package/esm/layouts/page/panel.css

@@ -1,37 +1,37 @@
-._1p91g301-3-4-0 {
+._1p91g301-3-5-0 {
   box-sizing: border-box;
   display: flex;
   max-width: 100%;
 }
-._1p91g302-3-4-0 {
+._1p91g302-3-5-0 {
   width: 0;
   position: relative;
 }
-._1p91g303-3-4-0 {
+._1p91g303-3-5-0 {
   flex-shrink: 0;
   position: relative;
   width: 8px;
 }
-._1p91g304-3-4-0 {
+._1p91g304-3-5-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._1p91g305-3-4-0 {
+._1p91g305-3-5-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;
 }
-._1p91g306-3-4-0 {
+._1p91g306-3-5-0 {
   line-height: 0;
 }
-._1p91g307-3-4-0 {
+._1p91g307-3-5-0 {
   box-sizing: border-box;
   flex-grow: 1;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   position: relative;
 }
-._1p91g308-3-4-0 {
+._1p91g308-3-5-0 {
   flex-shrink: 0;
   width: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -40,8 +40,25 @@
   height: 100%;
   justify-content: center;
 }
-._1p91g309-3-4-0 {
-  background: var(--dt-colors-border-neutral-default, #dadbe4);
+._1jgl8s50-3-5-0 ._1p91g308-3-5-0 {
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued, #e4e5eb), var(--dt-colors-border-neutral-subdued, #e4e5eb));
+  background-size: var(--dt-borders-width-default, 1px) 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 0;
+  height: 100%;
+  width: var(--dt-spacings-size-8, 8px);
+  left: 0;
+  transition: none;
+}
+._1jgl8s50-3-5-0 ._1p91g308-3-5-0:hover {
+  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued-hover, #d0d1dc), var(--dt-colors-border-neutral-subdued-hover, #d0d1dc));
+}
+._1jgl8s50-3-5-0 ._1p91g308-3-5-0:active {
+  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued-active, #c6c7d5), var(--dt-colors-border-neutral-subdued-active, #c6c7d5));
+}
+._1p91g309-3-5-0 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -54,17 +71,17 @@
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   width: 2px;
 }
-._1p91g309-3-4-0:focus-visible {
+._1p91g309-3-5-0:focus-visible {
   width: 100%;
 }
-._1p91g309-3-4-0:hover._1p91g309-3-4-0:focus-visible {
+._1p91g309-3-5-0:hover._1p91g309-3-5-0:focus-visible {
   width: 2px;
 }
-._1p91g309-3-4-0:focus-visible, ._1p91g309-3-4-0:hover {
+._1p91g309-3-5-0:focus-visible, ._1p91g309-3-5-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._1p91g309-3-4-0:after {
+._1p91g309-3-5-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -74,4 +91,12 @@
   transform: translateX(-50%);
   user-select: none;
   width: 100%;
+}
+._1jgl8s50-3-5-0 ._1p91g309-3-5-0 {
+  width: 0;
+  cursor: ew-resize;
+}
+._1jgl8s50-3-5-0 ._1p91g308-3-5-0:has(._1p91g309-3-5-0:focus-visible) {
+  background-image: linear-gradient(var(--dt-colors-border-neutral-accent, #595a7d), var(--dt-colors-border-neutral-accent, #595a7d));
+  background-size: var(--dt-borders-width-emphasized, 2px) 100%;
 }

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

@@ -1,15 +1,16 @@
+import "../../core/components/app-root/AppRoot.css";
 import "./panel.css";
 var GAP_SIZE = 8;
-var buttonIcon = "_1p91g306-3-4-0";
-var dismissedPanel = "_1p91g302-3-4-0";
-var drawer = "_1p91g304-3-4-0";
-var drawerContent = "_1p91g305-3-4-0";
-var gap = "_1p91g303-3-4-0";
-var panelContent = "_1p91g307-3-4-0";
-var resizeHandle = "_1p91g309-3-4-0";
-var resizeHandleContainer = "_1p91g308-3-4-0";
-var root = "_1p91g301-3-4-0";
-var rtlPanel = "_1p91g300-3-4-0";
+var buttonIcon = "_1p91g306-3-5-0";
+var dismissedPanel = "_1p91g302-3-5-0";
+var drawer = "_1p91g304-3-5-0";
+var drawerContent = "_1p91g305-3-5-0";
+var gap = "_1p91g303-3-5-0";
+var panelContent = "_1p91g307-3-5-0";
+var resizeHandle = "_1p91g309-3-5-0";
+var resizeHandleContainer = "_1p91g308-3-5-0";
+var root = "_1p91g301-3-5-0";
+var rtlPanel = "_1p91g300-3-5-0";
 export {
   GAP_SIZE,
   buttonIcon,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/panel.css.ts"],
-  "sourcesContent": ["import './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-4-0';\nexport var dismissedPanel = '_1p91g302-3-4-0';\nexport var drawer = '_1p91g304-3-4-0';\nexport var drawerContent = '_1p91g305-3-4-0';\nexport var gap = '_1p91g303-3-4-0';\nexport var panelContent = '_1p91g307-3-4-0';\nexport var resizeHandle = '_1p91g309-3-4-0';\nexport var resizeHandleContainer = '_1p91g308-3-4-0';\nexport var root = '_1p91g301-3-4-0';\nexport var rtlPanel = '_1p91g300-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,iBAAiB;AACrB,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,MAAM;AACV,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,WAAW;",
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-5-0';\nexport var dismissedPanel = '_1p91g302-3-5-0';\nexport var drawer = '_1p91g304-3-5-0';\nexport var drawerContent = '_1p91g305-3-5-0';\nexport var gap = '_1p91g303-3-5-0';\nexport var panelContent = '_1p91g307-3-5-0';\nexport var resizeHandle = '_1p91g309-3-5-0';\nexport var resizeHandleContainer = '_1p91g308-3-5-0';\nexport var root = '_1p91g301-3-5-0';\nexport var rtlPanel = '_1p91g300-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,iBAAiB;AACrB,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,MAAM;AACV,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,WAAW;",
   "names": []
 }

package/esm/layouts/page-layout/PageLayout.css

@@ -1,4 +1,4 @@
-._193kgwe0-3-4-0 {
+._193kgwe0-3-5-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;
@@ -7,24 +7,36 @@
   grid-template-rows: min-content minmax(0px, 1fr);
   grid-template-areas: "header" "content";
 }
-._193kgwe1-3-4-0 {
+._1jgl8s50-3-5-0 ._193kgwe0-3-5-0 {
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+}
+._193kgwe1-3-5-0 {
   grid-area: header;
   padding: var(--dt-spacings-size-8, 8px);
   min-width: 0;
+  ._1jgl8s50-3-5-0 & {
+    border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
+  }
 }
-._193kgwe2-3-4-0 {
+._193kgwe2-3-5-0 {
   grid-area: content;
   min-width: 0;
 }
-._193kgwe3-3-4-0 {
+._193kgwe3-3-5-0 {
   padding: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   height: 100%;
   isolation: isolate;
 }
-._193kgwe4-3-4-0 {
+._193kgwe4-3-5-0 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._193kgwe5-3-4-0 {
+._1jgl8s50-3-5-0 ._193kgwe4-3-5-0 {
+  border-top-left-radius: 0;
+}
+._193kgwe5-3-5-0 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
+}
+._1jgl8s50-3-5-0 ._193kgwe5-3-5-0 {
+  border-top-right-radius: 0;
 }

package/esm/layouts/page-layout/PageLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page-layout/PageLayout.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useMemo,\n  useSyncExternalStore,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react';\n\nimport { DetailsLayout } from './details-layout/DetailsLayout.js';\nimport type { ExtractedContentSlot as DetailsContentSlot } from './details-layout/slots.js';\nimport * as styles from './PageLayout.sty.js';\nimport {\n  PageLayoutPortalContext,\n  usePageLayoutPortalContext,\n} from './shared/PageLayoutPortalContext.js';\nimport {\n  PageLayoutContent,\n  PageLayoutDetailsWithControlBar,\n  PageLayoutHeader,\n  PageLayoutSidebar,\n} from './shared/portal-slots.js';\nimport type {\n  DetailsSlotConfig,\n  SidebarSlotConfig,\n} from './shared/slot-config.js';\nimport { contentDefaults } from './shared/slot-defaults.js';\nimport { createSlotRegistry } from './shared/slot-registry.js';\nimport { TeleportTarget } from './shared/TeleportTarget.js';\nimport { useStableHost } from './shared/useStableHost.js';\nimport { SidebarLayout } from './sidebar-layout/SidebarLayout.js';\nimport type { ExtractedContentSlot as SidebarContentSlot } from './sidebar-layout/slots.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\n\n/** @internal */\nexport interface RootProps\n  extends Omit<ComponentPropsWithoutRef<'div'>, 'children'>,\n    BehaviorTrackingProps {\n  children: ReactNode;\n}\n\nfunction resolveOptionalSlot<T extends SidebarSlotConfig | DetailsSlotConfig>(\n  config: T | null,\n  target: ReactNode,\n): (T & { children: ReactNode }) | null {\n  if (!config) {\n    return null;\n  }\n  return { ...config, children: target };\n}\n\n/**\n * This is the container for the horizontal layout below the Header.\n * Subscribes to the slot registry via `useSyncExternalStore`.\n * Re-renders only when registry state changes.\n */\nfunction MainShell() {\n  const { hosts, registry } = usePageLayoutPortalContext();\n  const snapshot = useSyncExternalStore(\n    registry.subscribe,\n    registry.getSnapshot,\n  );\n\n  const sidebarConfig = snapshot.sidebar;\n  const detailsConfig = snapshot.details;\n  const detailsLayoutContext = snapshot.detailsLayoutContext;\n\n  const showTopLeftRadius = sidebarConfig !== null;\n  const showTopRightRadius =\n    detailsConfig !== null && detailsLayoutContext?.mode !== 'collapsed';\n\n  const contentClassName = clsx(\n    styles.content,\n    showTopLeftRadius && styles.contentTopLeftRadius,\n    showTopRightRadius && styles.contentTopRightRadius,\n  );\n\n  const sidebarTarget = useMemo(\n    () => <TeleportTarget host={hosts.sidebar} />,\n    [hosts.sidebar],\n  );\n  const detailsTarget = useMemo(\n    () => <TeleportTarget host={hosts.details} />,\n    [hosts.details],\n  );\n  const contentTarget = useMemo(\n    () => <TeleportTarget host={hosts.content} />,\n    [hosts.content],\n  );\n\n  const sidebarSlot = useMemo(\n    () => resolveOptionalSlot(snapshot.sidebar, sidebarTarget),\n    [snapshot.sidebar, sidebarTarget],\n  );\n  const detailsSlot = useMemo(\n    () => resolveOptionalSlot(snapshot.details, detailsTarget),\n    [snapshot.details, detailsTarget],\n  );\n\n  const contentSlot = useMemo<DetailsContentSlot>(() => {\n    if (snapshot.content) {\n      const { config, domProps, ref } = snapshot.content;\n      return {\n        children: contentTarget,\n        config,\n        domProps: {\n          ...domProps,\n          className: clsx(contentClassName, domProps.className),\n        },\n        ref,\n      };\n    }\n    return {\n      children: undefined,\n      config: { minWidth: contentDefaults.minWidth },\n      domProps: { className: contentClassName },\n    };\n  }, [snapshot.content, contentTarget, contentClassName]);\n\n  const sidebarContentSlot = useMemo<SidebarContentSlot>(\n    () => ({\n      children: <DetailsLayout details={detailsSlot} content={contentSlot} />,\n      config: { minWidth: contentDefaults.minWidth },\n      domProps: {},\n    }),\n    [detailsSlot, contentSlot],\n  );\n\n  return <SidebarLayout sidebar={sidebarSlot} content={sidebarContentSlot} />;\n}\n\n/**\n * Subscribes to the slot registry for header config.\n */\nfunction HeaderShell() {\n  const { hosts, registry } = usePageLayoutPortalContext();\n  const snapshot = useSyncExternalStore(\n    registry.subscribe,\n    registry.getSnapshot,\n  );\n  const headerConfig = snapshot.header;\n\n  if (headerConfig === null) {\n    return null;\n  }\n\n  return (\n    <div\n      {...headerConfig.domProps}\n      ref={headerConfig.ref}\n      className={clsx(styles.headerContainer, headerConfig.domProps.className)}\n    >\n      <TeleportTarget host={hosts.header} />\n    </div>\n  );\n}\n\nconst LayoutRoot = memo(\n  forwardRef<HTMLDivElement, RootProps>((props, forwardedRef) => {\n    const { children, className: rootClassName, ...rootProps } = props;\n\n    const [behavioralTrackingProps, restRootProps] =\n      useBehavioralTrackingProps(rootProps);\n\n    const headerHost = useStableHost();\n    const sidebarHost = useStableHost();\n    const contentHost = useStableHost();\n    const detailsHost = useStableHost();\n\n    const registry = useMemo(() => createSlotRegistry(), []);\n\n    const context = useMemo(\n      () => ({\n        hosts: {\n          header: headerHost,\n          sidebar: sidebarHost,\n          content: contentHost,\n          details: detailsHost,\n        },\n        registry,\n      }),\n      // hosts and registry are stable\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    return (\n      <PageLayoutPortalContext.Provider value={context}>\n        <div\n          {...restRootProps}\n          {...behavioralTrackingProps}\n          ref={forwardedRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          <HeaderShell />\n          <div className={styles.contentContainer}>\n            <MainShell />\n            {children}\n          </div>\n        </div>\n      </PageLayoutPortalContext.Provider>\n    );\n  }),\n);\nLayoutRoot.displayName = 'PageLayout';\n\n/**\n * The `PageLayout` component provides the basic layout for your app with slots for a header, sidebar, main content, and a details panel.\n *\n * @internal\n */\nexport const PageLayout = Object.assign(LayoutRoot, {\n  /** Displays content at the very top of the page. */\n  Header: PageLayoutHeader,\n  /** Displays content in the collapsible, resizable sidebar panel on the left. */\n  Sidebar: PageLayoutSidebar,\n  /**\n   * Displays the styled main content area (padding, background, border-radius).\n   */\n  Content: PageLayoutContent,\n  /** Displays content in the collapsible, resizable details panel on the right. */\n  Details: PageLayoutDetailsWithControlBar,\n});\n\nexport { usePageLayoutPortalContext };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useMemo,\n  useSyncExternalStore,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport { DetailsLayout } from './details-layout/DetailsLayout.js';\nimport type { ExtractedContentSlot as DetailsContentSlot } from './details-layout/slots.js';\nimport * as styles from './PageLayout.sty.js';\nimport {\n  PageLayoutPortalContext,\n  usePageLayoutPortalContext,\n} from './shared/PageLayoutPortalContext.js';\nimport {\n  PageLayoutContent,\n  PageLayoutDetailsWithControlBar,\n  PageLayoutHeader,\n  PageLayoutSidebar,\n} from './shared/portal-slots.js';\nimport type {\n  DetailsSlotConfig,\n  SidebarSlotConfig,\n} from './shared/slot-config.js';\nimport { contentDefaults } from './shared/slot-defaults.js';\nimport { createSlotRegistry } from './shared/slot-registry.js';\nimport { TeleportTarget } from './shared/TeleportTarget.js';\nimport { useStableHost } from './shared/useStableHost.js';\nimport { SidebarLayout } from './sidebar-layout/SidebarLayout.js';\nimport type { ExtractedContentSlot as SidebarContentSlot } from './sidebar-layout/slots.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\n\nfunction resolveOptionalSlot<T extends SidebarSlotConfig | DetailsSlotConfig>(\n  config: T | null,\n  target: ReactNode,\n): (T & { children: ReactNode }) | null {\n  if (!config) {\n    return null;\n  }\n  return { ...config, children: target };\n}\n\n/**\n * This is the container for the horizontal layout below the Header.\n * Subscribes to the slot registry via `useSyncExternalStore`.\n * Re-renders only when registry state changes.\n */\nfunction MainShell() {\n  const { hosts, registry } = usePageLayoutPortalContext();\n  const snapshot = useSyncExternalStore(\n    registry.subscribe,\n    registry.getSnapshot,\n  );\n\n  const sidebarConfig = snapshot.sidebar;\n  const detailsConfig = snapshot.details;\n  const detailsLayoutContext = snapshot.detailsLayoutContext;\n\n  const showTopLeftRadius = sidebarConfig !== null;\n  const showTopRightRadius =\n    detailsConfig !== null && detailsLayoutContext?.mode !== 'collapsed';\n\n  const contentClassName = clsx(\n    styles.content,\n    showTopLeftRadius && styles.contentTopLeftRadius,\n    showTopRightRadius && styles.contentTopRightRadius,\n  );\n\n  const sidebarTarget = useMemo(\n    () => <TeleportTarget host={hosts.sidebar} />,\n    [hosts.sidebar],\n  );\n  const detailsTarget = useMemo(\n    () => <TeleportTarget host={hosts.details} />,\n    [hosts.details],\n  );\n  const contentTarget = useMemo(\n    () => <TeleportTarget host={hosts.content} />,\n    [hosts.content],\n  );\n\n  const sidebarSlot = useMemo(\n    () => resolveOptionalSlot(snapshot.sidebar, sidebarTarget),\n    [snapshot.sidebar, sidebarTarget],\n  );\n  const detailsSlot = useMemo(\n    () => resolveOptionalSlot(snapshot.details, detailsTarget),\n    [snapshot.details, detailsTarget],\n  );\n\n  const contentSlot = useMemo<DetailsContentSlot>(() => {\n    if (snapshot.content) {\n      const { config, domProps, ref } = snapshot.content;\n      return {\n        children: contentTarget,\n        config,\n        domProps: {\n          ...domProps,\n          className: clsx(contentClassName, domProps.className),\n        },\n        ref,\n      };\n    }\n    return {\n      children: undefined,\n      config: { minWidth: contentDefaults.minWidth },\n      domProps: { className: contentClassName },\n    };\n  }, [snapshot.content, contentTarget, contentClassName]);\n\n  const sidebarContentSlot = useMemo<SidebarContentSlot>(\n    () => ({\n      children: <DetailsLayout details={detailsSlot} content={contentSlot} />,\n      config: { minWidth: contentDefaults.minWidth },\n      domProps: {},\n    }),\n    [detailsSlot, contentSlot],\n  );\n\n  return <SidebarLayout sidebar={sidebarSlot} content={sidebarContentSlot} />;\n}\n\n/**\n * Subscribes to the slot registry for header config.\n */\nfunction HeaderShell() {\n  const { hosts, registry } = usePageLayoutPortalContext();\n  const snapshot = useSyncExternalStore(\n    registry.subscribe,\n    registry.getSnapshot,\n  );\n  const headerConfig = snapshot.header;\n\n  if (headerConfig === null) {\n    return null;\n  }\n\n  return (\n    <div\n      {...headerConfig.domProps}\n      ref={headerConfig.ref}\n      className={clsx(styles.headerContainer, headerConfig.domProps.className)}\n    >\n      <TeleportTarget host={hosts.header} />\n    </div>\n  );\n}\n\n/** @public */\nexport interface PageLayoutProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nconst LayoutRoot = memo(\n  forwardRef<HTMLDivElement, PageLayoutProps>((props, forwardedRef) => {\n    const { children, className: rootClassName, ...rootProps } = props;\n\n    const [behavioralTrackingProps, restRootProps] =\n      useBehavioralTrackingProps(rootProps);\n\n    const headerHost = useStableHost();\n    const sidebarHost = useStableHost();\n    const contentHost = useStableHost();\n    const detailsHost = useStableHost();\n\n    const registry = useMemo(() => createSlotRegistry(), []);\n\n    const context = useMemo(\n      () => ({\n        hosts: {\n          header: headerHost,\n          sidebar: sidebarHost,\n          content: contentHost,\n          details: detailsHost,\n        },\n        registry,\n      }),\n      // hosts and registry are stable\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    return (\n      <PageLayoutPortalContext.Provider value={context}>\n        <div\n          {...restRootProps}\n          {...behavioralTrackingProps}\n          ref={forwardedRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          <HeaderShell />\n          <div className={styles.contentContainer}>\n            <MainShell />\n            {children}\n          </div>\n        </div>\n      </PageLayoutPortalContext.Provider>\n    );\n  }),\n);\nLayoutRoot.displayName = 'PageLayout';\n\n/**\n * The `PageLayout` component provides the basic layout for your app with slots for a header, sidebar, main content, and a details panel.\n *\n * Slot components (`Header`, `Sidebar`, `Content`, `Details`) can appear anywhere in the React subtree -\n * inside `<Outlet />`, `<Suspense>`, or any wrapper component. They portal their children into\n * stable DOM positions owned by `PageLayout`.\n * @public\n */\nexport const PageLayout = Object.assign(LayoutRoot, {\n  /** Displays content at the very top of the page. */\n  Header: PageLayoutHeader,\n  /** Displays content in the collapsible, resizable sidebar panel on the left. */\n  Sidebar: PageLayoutSidebar,\n  /**\n   * Displays the styled main content area (padding, background, border-radius).\n   */\n  Content: PageLayoutContent,\n  /** Displays content in the collapsible, resizable details panel on the right. */\n  Details: PageLayoutDetailsWithControlBar,\n});\n\nexport { usePageLayoutPortalContext };\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/layouts/page-layout/PageLayout.sty.js

@@ -1,10 +1,11 @@
+import "../../core/components/app-root/AppRoot.css";
 import "./PageLayout.css";
-var content = "_193kgwe3-3-4-0";
-var contentContainer = "_193kgwe2-3-4-0";
-var contentTopLeftRadius = "_193kgwe4-3-4-0";
-var contentTopRightRadius = "_193kgwe5-3-4-0";
-var headerContainer = "_193kgwe1-3-4-0";
-var layoutRoot = "_193kgwe0-3-4-0";
+var content = "_193kgwe3-3-5-0";
+var contentContainer = "_193kgwe2-3-5-0";
+var contentTopLeftRadius = "_193kgwe4-3-5-0";
+var contentTopRightRadius = "_193kgwe5-3-5-0";
+var headerContainer = "_193kgwe1-3-5-0";
+var layoutRoot = "_193kgwe0-3-5-0";
 export {
   content,
   contentContainer,

package/esm/layouts/page-layout/PageLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page-layout/PageLayout.css.ts"],
-  "sourcesContent": ["import './PageLayout.css';\nexport var content = '_193kgwe3-3-4-0';\nexport var contentContainer = '_193kgwe2-3-4-0';\nexport var contentTopLeftRadius = '_193kgwe4-3-4-0';\nexport var contentTopRightRadius = '_193kgwe5-3-4-0';\nexport var headerContainer = '_193kgwe1-3-4-0';\nexport var layoutRoot = '_193kgwe0-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,mBAAmB;AACvB,IAAI,uBAAuB;AAC3B,IAAI,wBAAwB;AAC5B,IAAI,kBAAkB;AACtB,IAAI,aAAa;",
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-5-0';\nexport var contentContainer = '_193kgwe2-3-5-0';\nexport var contentTopLeftRadius = '_193kgwe4-3-5-0';\nexport var contentTopRightRadius = '_193kgwe5-3-5-0';\nexport var headerContainer = '_193kgwe1-3-5-0';\nexport var layoutRoot = '_193kgwe0-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,mBAAmB;AACvB,IAAI,uBAAuB;AAC3B,IAAI,wBAAwB;AAC5B,IAAI,kBAAkB;AACtB,IAAI,aAAa;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/DetailsControlBar.css

@@ -1,15 +1,15 @@
-._1y5ro0l0-3-4-0 {
+._1y5ro0l0-3-5-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--dt-spacings-size-8, 8px);
 }
-._1y5ro0l1-3-4-0 {
+._1y5ro0l1-3-5-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1y5ro0l2-3-4-0 {
+._1y5ro0l2-3-5-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);

package/esm/layouts/page-layout/details-layout/DetailsControlBar.js

@@ -1,8 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import {
-  Children
-} from "react";
+import { Children } from "react";
 import { useIntl } from "react-intl";
 import {
   OverlayRightIcon,

package/esm/layouts/page-layout/details-layout/DetailsControlBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsControlBar.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  OverlayRightIcon,\n  SplitPanelRightIcon,\n  XmarkIcon,\n} from '@dynatrace/strato-icons';\n\nimport * as styles from './DetailsControlBar.sty.js';\nimport { useDetailsLayoutContext } from './DetailsLayoutContext.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { Divider } from '../../divider/Divider.js';\n\n/**\n * Props for the `DetailsControlBar` component that renders layout and close controls inside the details panel.\n * @internal\n */\nexport interface DetailsControlBarProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\n/** @internal */\nexport const DetailsControlBar = (props: DetailsControlBarProps) => {\n  const { children, className, ...restProps } = props;\n  const context = useDetailsLayoutContext();\n  const intl = useIntl();\n\n  const hasCustomActions = Children.count(children) > 0;\n\n  const closeLabel = intl.formatMessage({\n    defaultMessage: 'Close details',\n    id: 'UK0OoP7XF++evklW',\n    description: 'Label for the button that closes the details panel.',\n  });\n\n  const switchToOverlayLabel = intl.formatMessage({\n    defaultMessage: 'Switch to overlay',\n    id: '+mEjL2q8RACwzIMR',\n    description:\n      'Label for the button that switches the details panel to overlay mode.',\n  });\n\n  const switchToSplitLabel = intl.formatMessage({\n    defaultMessage: 'Switch to side-by-side',\n    id: 'RST92XLweEz0Qott',\n    description:\n      'Label for the button that switches the details panel to split mode.',\n  });\n\n  const handleClose = () => {\n    context?.setCollapsed(true);\n  };\n\n  const handleLayoutToggle = () => {\n    if (!context) {\n      return;\n    }\n\n    context.setPreferredLayout((prev) =>\n      prev === 'split' ? 'overlay' : 'split',\n    );\n  };\n\n  const showLayoutToggle = context?.mode\n    ? ['overlay', 'split'].includes(context.mode)\n    : false;\n  const isSplit = context?.preferredLayout === 'split';\n\n  return (\n    <div {...restProps} className={clsx(styles.controlBar, className)}>\n      {hasCustomActions && (\n        <div className={styles.customActions}>{children}</div>\n      )}\n      {hasCustomActions && <Divider orientation=\"vertical\" as=\"hr\" flexItem />}\n      <div className={styles.defaultActions}>\n        {showLayoutToggle && (\n          <Button\n            aria-label={isSplit ? switchToOverlayLabel : switchToSplitLabel}\n            onClick={handleLayoutToggle}\n          >\n            <Button.Prefix>\n              {isSplit ? <OverlayRightIcon /> : <SplitPanelRightIcon />}\n            </Button.Prefix>\n          </Button>\n        )}\n        <Button\n          aria-label={closeLabel}\n          onClick={handleClose}\n          data-dt-name=\"CloseX\"\n        >\n          <Button.Prefix>\n            <XmarkIcon />\n          </Button.Prefix>\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nDetailsControlBar.displayName = 'PageLayout.Details.ControlBar';\n"],
-  "mappings": "AA6EQ,cAGF,YAHE;AA7ER,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,OAGK;AACP,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,+BAA+B;AACxC,SAAS,cAAc;AACvB,SAAS,eAAe;AAWjB,MAAM,oBAAoB,CAAC,UAAkC;AAClE,QAAM,EAAE,UAAU,WAAW,GAAG,UAAU,IAAI;AAC9C,QAAM,UAAU,wBAAwB;AACxC,QAAM,OAAO,QAAQ;AAErB,QAAM,mBAAmB,SAAS,MAAM,QAAQ,IAAI;AAEpD,QAAM,aAAa,KAAK,cAAc;AAAA,IACpC,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM,uBAAuB,KAAK,cAAc;AAAA,IAC9C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AAED,QAAM,qBAAqB,KAAK,cAAc;AAAA,IAC5C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AAED,QAAM,cAAc,MAAM;AACxB,aAAS,aAAa,IAAI;AAAA,EAC5B;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,YAAQ;AAAA,MAAmB,CAAC,SAC1B,SAAS,UAAU,YAAY;AAAA,IACjC;AAAA,EACF;AAEA,QAAM,mBAAmB,SAAS,OAC9B,CAAC,WAAW,OAAO,EAAE,SAAS,QAAQ,IAAI,IAC1C;AACJ,QAAM,UAAU,SAAS,oBAAoB;AAE7C,SACE,qBAAC,SAAK,GAAG,WAAW,WAAW,KAAK,OAAO,YAAY,SAAS,GAC7D;AAAA,wBACC,oBAAC,SAAI,WAAW,OAAO,eAAgB,UAAS;AAAA,IAEjD,oBAAoB,oBAAC,WAAQ,aAAY,YAAW,IAAG,MAAK,UAAQ,MAAC;AAAA,IACtE,qBAAC,SAAI,WAAW,OAAO,gBACpB;AAAA,0BACC;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,UAAU,uBAAuB;AAAA,UAC7C,SAAS;AAAA,UAET,8BAAC,OAAO,QAAP,EACE,oBAAU,oBAAC,oBAAiB,IAAK,oBAAC,uBAAoB,GACzD;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,cAAY;AAAA,UACZ,SAAS;AAAA,UACT,gBAAa;AAAA,UAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,aAAU,GACb;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,kBAAkB,cAAc;",
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport { Children, type PropsWithChildren } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  OverlayRightIcon,\n  SplitPanelRightIcon,\n  XmarkIcon,\n} from '@dynatrace/strato-icons';\n\nimport * as styles from './DetailsControlBar.sty.js';\nimport { useDetailsLayoutContext } from './DetailsLayoutContext.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport type { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport { Divider } from '../../divider/Divider.js';\n\n/**\n * Props for the `DetailsControlBar` component that renders layout and close controls inside the details panel.\n * @public\n */\nexport interface DetailsControlBarProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\n/** @internal */\nexport const DetailsControlBar = (props: DetailsControlBarProps) => {\n  const { children, className, ...restProps } = props;\n  const context = useDetailsLayoutContext();\n  const intl = useIntl();\n\n  const hasCustomActions = Children.count(children) > 0;\n\n  const closeLabel = intl.formatMessage({\n    defaultMessage: 'Close details',\n    id: 'UK0OoP7XF++evklW',\n    description: 'Label for the button that closes the details panel.',\n  });\n\n  const switchToOverlayLabel = intl.formatMessage({\n    defaultMessage: 'Switch to overlay',\n    id: '+mEjL2q8RACwzIMR',\n    description:\n      'Label for the button that switches the details panel to overlay mode.',\n  });\n\n  const switchToSplitLabel = intl.formatMessage({\n    defaultMessage: 'Switch to side-by-side',\n    id: 'RST92XLweEz0Qott',\n    description:\n      'Label for the button that switches the details panel to split mode.',\n  });\n\n  const handleClose = () => {\n    context?.setCollapsed(true);\n  };\n\n  const handleLayoutToggle = () => {\n    if (!context) {\n      return;\n    }\n\n    context.setPreferredLayout((prev) =>\n      prev === 'split' ? 'overlay' : 'split',\n    );\n  };\n\n  const showLayoutToggle = context?.mode\n    ? ['overlay', 'split'].includes(context.mode)\n    : false;\n  const isSplit = context?.preferredLayout === 'split';\n\n  return (\n    <div {...restProps} className={clsx(styles.controlBar, className)}>\n      {hasCustomActions && (\n        <div className={styles.customActions}>{children}</div>\n      )}\n      {hasCustomActions && <Divider orientation=\"vertical\" as=\"hr\" flexItem />}\n      <div className={styles.defaultActions}>\n        {showLayoutToggle && (\n          <Button\n            aria-label={isSplit ? switchToOverlayLabel : switchToSplitLabel}\n            onClick={handleLayoutToggle}\n          >\n            <Button.Prefix>\n              {isSplit ? <OverlayRightIcon /> : <SplitPanelRightIcon />}\n            </Button.Prefix>\n          </Button>\n        )}\n        <Button\n          aria-label={closeLabel}\n          onClick={handleClose}\n          data-dt-name=\"CloseX\"\n        >\n          <Button.Prefix>\n            <XmarkIcon />\n          </Button.Prefix>\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nDetailsControlBar.displayName = 'PageLayout.Details.ControlBar';\n"],
+  "mappings": "AAkFQ,cAGF,YAHE;AAlFR,SAAS,YAAY;AACrB,SAAS,gBAAwC;AACjD,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,+BAA+B;AACxC,SAAS,cAAc;AAMvB,SAAS,eAAe;AAejB,MAAM,oBAAoB,CAAC,UAAkC;AAClE,QAAM,EAAE,UAAU,WAAW,GAAG,UAAU,IAAI;AAC9C,QAAM,UAAU,wBAAwB;AACxC,QAAM,OAAO,QAAQ;AAErB,QAAM,mBAAmB,SAAS,MAAM,QAAQ,IAAI;AAEpD,QAAM,aAAa,KAAK,cAAc;AAAA,IACpC,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM,uBAAuB,KAAK,cAAc;AAAA,IAC9C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AAED,QAAM,qBAAqB,KAAK,cAAc;AAAA,IAC5C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AAED,QAAM,cAAc,MAAM;AACxB,aAAS,aAAa,IAAI;AAAA,EAC5B;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,YAAQ;AAAA,MAAmB,CAAC,SAC1B,SAAS,UAAU,YAAY;AAAA,IACjC;AAAA,EACF;AAEA,QAAM,mBAAmB,SAAS,OAC9B,CAAC,WAAW,OAAO,EAAE,SAAS,QAAQ,IAAI,IAC1C;AACJ,QAAM,UAAU,SAAS,oBAAoB;AAE7C,SACE,qBAAC,SAAK,GAAG,WAAW,WAAW,KAAK,OAAO,YAAY,SAAS,GAC7D;AAAA,wBACC,oBAAC,SAAI,WAAW,OAAO,eAAgB,UAAS;AAAA,IAEjD,oBAAoB,oBAAC,WAAQ,aAAY,YAAW,IAAG,MAAK,UAAQ,MAAC;AAAA,IACtE,qBAAC,SAAI,WAAW,OAAO,gBACpB;AAAA,0BACC;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,UAAU,uBAAuB;AAAA,UAC7C,SAAS;AAAA,UAET,8BAAC,OAAO,QAAP,EACE,oBAAU,oBAAC,oBAAiB,IAAK,oBAAC,uBAAoB,GACzD;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,cAAY;AAAA,UACZ,SAAS;AAAA,UACT,gBAAa;AAAA,UAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,aAAU,GACb;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,kBAAkB,cAAc;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/DetailsControlBar.sty.js

@@ -1,7 +1,7 @@
 import "./DetailsControlBar.css";
-var controlBar = "_1y5ro0l0-3-4-0";
-var customActions = "_1y5ro0l1-3-4-0";
-var defaultActions = "_1y5ro0l2-3-4-0";
+var controlBar = "_1y5ro0l0-3-5-0";
+var customActions = "_1y5ro0l1-3-5-0";
+var defaultActions = "_1y5ro0l2-3-5-0";
 export {
   controlBar,
   customActions,

package/esm/layouts/page-layout/details-layout/DetailsControlBar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsControlBar.css.ts"],
-  "sourcesContent": ["import './DetailsControlBar.css';\nexport var controlBar = '_1y5ro0l0-3-4-0';\nexport var customActions = '_1y5ro0l1-3-4-0';\nexport var defaultActions = '_1y5ro0l2-3-4-0';"],
+  "sourcesContent": ["import './DetailsControlBar.css';\nexport var controlBar = '_1y5ro0l0-3-5-0';\nexport var customActions = '_1y5ro0l1-3-5-0';\nexport var defaultActions = '_1y5ro0l2-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/DetailsLayout.css

@@ -1,10 +1,10 @@
-._1377n3n0-3-4-0 {
+._1377n3n0-3-5-0 {
   height: 100%;
   overflow: hidden;
   position: relative;
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1377n3n1-3-4-0 {
+._1377n3n1-3-5-0 {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -15,16 +15,19 @@
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1377n3n2-3-4-0 {
+._1jgl8s50-3-5-0 ._1377n3n1-3-5-0 {
+  border-top-left-radius: 0;
+}
+._1377n3n2-3-5-0 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
 }
-._1377n3n3-3-4-0 {
+._1377n3n3-3-5-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._1377n3n4-3-4-0 {
+._1377n3n4-3-5-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;

package/esm/layouts/page-layout/details-layout/DetailsLayout.sty.js

@@ -1,9 +1,10 @@
+import "../../../core/components/app-root/AppRoot.css";
 import "./DetailsLayout.css";
-var content = "_1377n3n2-3-4-0";
-var drawer = "_1377n3n3-3-4-0";
-var drawerContent = "_1377n3n4-3-4-0";
-var layoutRoot = "_1377n3n0-3-4-0";
-var panel = "_1377n3n1-3-4-0";
+var content = "_1377n3n2-3-5-0";
+var drawer = "_1377n3n3-3-5-0";
+var drawerContent = "_1377n3n4-3-5-0";
+var layoutRoot = "_1377n3n0-3-5-0";
+var panel = "_1377n3n1-3-5-0";
 export {
   content,
   drawer,

package/esm/layouts/page-layout/details-layout/DetailsLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayout.css.ts"],
-  "sourcesContent": ["import './DetailsLayout.css';\nexport var content = '_1377n3n2-3-4-0';\nexport var drawer = '_1377n3n3-3-4-0';\nexport var drawerContent = '_1377n3n4-3-4-0';\nexport var layoutRoot = '_1377n3n0-3-4-0';\nexport var panel = '_1377n3n1-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,QAAQ;",
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DetailsLayout.css';\nexport var content = '_1377n3n2-3-5-0';\nexport var drawer = '_1377n3n3-3-5-0';\nexport var drawerContent = '_1377n3n4-3-5-0';\nexport var layoutRoot = '_1377n3n0-3-5-0';\nexport var panel = '_1377n3n1-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,QAAQ;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/DetailsLayoutContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayoutContext.ts"],
-  "sourcesContent": ["import {\n  createContext,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n} from 'react';\n\n/**\n * Determines how the details panel is rendered relative to the content.\n * @internal\n */\nexport type LayoutMode = 'split' | 'overlay';\n\n/** @internal */\nexport type RenderedLayout = 'split' | 'collapsed' | 'overlay' | 'drawer';\n\n/** @internal */\nexport interface DetailsLayoutContextValue {\n  collapsed: boolean;\n  setCollapsed: Dispatch<SetStateAction<boolean>>;\n  preferredLayout: LayoutMode;\n  setPreferredLayout: Dispatch<SetStateAction<LayoutMode>>;\n  mode: RenderedLayout;\n}\n\n/** @internal */\nexport const DetailsLayoutContext =\n  createContext<DetailsLayoutContextValue | null>(null);\n\n/** @internal */\nexport function useDetailsLayoutContext() {\n  return useContext(DetailsLayoutContext);\n}\n"],
+  "sourcesContent": ["import {\n  createContext,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n} from 'react';\n\n/**\n * Determines how the details panel is rendered relative to the content.\n * @public\n */\nexport type LayoutMode = 'split' | 'overlay';\n\n/** @internal */\nexport type RenderedLayout = 'split' | 'collapsed' | 'overlay' | 'drawer';\n\n/** @internal */\nexport interface DetailsLayoutContextValue {\n  collapsed: boolean;\n  setCollapsed: Dispatch<SetStateAction<boolean>>;\n  preferredLayout: LayoutMode;\n  setPreferredLayout: Dispatch<SetStateAction<LayoutMode>>;\n  mode: RenderedLayout;\n}\n\n/** @internal */\nexport const DetailsLayoutContext =\n  createContext<DetailsLayoutContextValue | null>(null);\n\n/** @internal */\nexport function useDetailsLayoutContext() {\n  return useContext(DetailsLayoutContext);\n}\n"],
   "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAqBA,MAAM,uBACX,cAAgD,IAAI;AAG/C,SAAS,0BAA0B;AACxC,SAAO,WAAW,oBAAoB;AACxC;",
   "names": []
 }