@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/layouts/container/Container.css

@@ -1,8 +1,11 @@
-._f32lcd0-3-4-0 {
+._f32lcd0-3-5-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-4-0);
-  border-color: var(--_6levse2-3-4-0);
-  background-color: var(--_6levse1-3-4-0);
+  color: var(--_6levse0-3-5-0);
+  border-color: var(--_6levse2-3-5-0);
+  background-color: var(--_6levse1-3-5-0);
+}
+._1jgl8s50-3-5-0 ._f32lcd0-3-5-0 {
+  border-width: var(--dt-borders-width-default, 1px);
 }

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

@@ -1,6 +1,7 @@
+import "../../core/components/app-root/AppRoot.css";
 import "../../styles/container.css";
 import "./Container.css";
-var containerCSS = "_f32lcd0-3-4-0";
+var containerCSS = "_f32lcd0-3-5-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 '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,eAAe;",
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/divider/Divider.css

@@ -1,21 +1,21 @@
-._1thxv8m0-3-4-0 {
+._1thxv8m0-3-5-0 {
   border: none;
   margin: 0;
   overflow-wrap: break-word;
-  background-color: var(--_k096v42-3-4-0);
+  background-color: var(--_k096v42-3-5-0);
 }
-._1thxv8m1-3-4-0 {
+._1thxv8m1-3-5-0 {
   width: 100%;
   height: var(--dt-borders-width-default, 1px);
 }
-._1thxv8m2-3-4-0 {
+._1thxv8m2-3-5-0 {
   width: var(--dt-borders-width-default, 1px);
   height: 100%;
 }
-._1thxv8m5-3-4-0 {
+._1thxv8m5-3-5-0 {
   flex-shrink: 0;
 }
-._1thxv8m6-3-4-0 {
+._1thxv8m6-3-5-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-4-0", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-4-0", vertical: "_1thxv8m2-3-4-0" }, flexItem: { true: "_1thxv8m3-3-4-0", false: "_1thxv8m4-3-4-0" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-4-0"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-4-0"]] });
+var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-5-0", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-5-0", vertical: "_1thxv8m2-3-5-0" }, flexItem: { true: "_1thxv8m3-3-5-0", false: "_1thxv8m4-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-5-0"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-5-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-4-0',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-4-0',vertical:'_1thxv8m2-3-4-0'},flexItem:{true:'_1thxv8m3-3-4-0',false:'_1thxv8m4-3-4-0'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-4-0'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-4-0']]});"],
+  "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-5-0',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-5-0',vertical:'_1thxv8m2-3-5-0'},flexItem:{true:'_1thxv8m3-3-5-0',false:'_1thxv8m4-3-5-0'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-5-0'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-5-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

@@ -18,18 +18,8 @@ import { pagePanels } from "./page/page-types.js";
 import { TitleBar } from "./title-bar/TitleBar.js";
 import { InputGroup } from "./input-group/InputGroup.js";
 import { inputGroupClassName } from "./input-group/InputGroup.sty.js";
-import {
-  SplitLayout
-} from "./split-layout/SplitLayout.js";
-import {
-  SidebarLayout
-} from "./page-layout/sidebar-layout/SidebarLayout.js";
-import {
-  DetailsLayout
-} from "./page-layout/details-layout/DetailsLayout.js";
-import {
-  PageLayout
-} from "./page-layout/PageLayout.js";
+import { SplitLayout } from "./split-layout/SplitLayout.js";
+import { PageLayout } from "./page-layout/PageLayout.js";
 export {
   AppHeader,
   Logo2 as AppNavLink,
@@ -41,12 +31,10 @@ export {
   InputGroup,
   Logo,
   Page,
+  PageLayout,
   Surface,
   TitleBar,
   ActionGroup as _ActionGroup,
-  DetailsLayout as _DetailsLayout,
-  PageLayout as _PageLayout,
-  SidebarLayout as _SidebarLayout,
   SplitLayout as _SplitLayout,
   surfaceBorderRadius as _surfaceBorderRadius,
   useContainerColoring as _useContainerColoring,

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} 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 {\n  SplitLayout as _SplitLayout,\n  type ContentProps as _SplitLayoutContentProps,\n  type PanelProps as _SplitLayoutPanelProps,\n  type ResizeHandleProps as _SplitLayoutResizeHandleProps,\n  type RootProps as _SplitLayoutRootProps,\n} from './split-layout/SplitLayout.js';\nexport type { PanelWidth } from './split-layout/width-utils.js';\nexport type { CollapsibleProps as _CollapsibleProps } from './page-layout/shared/collapsible.js';\nexport {\n  SidebarLayout as _SidebarLayout,\n  type LayoutRootProps as _SidebarLayoutRootProps,\n} from './page-layout/sidebar-layout/SidebarLayout.js';\nexport type {\n  SidebarProps as _PageLayoutSidebarProps,\n  ExtractedSidebarSlot as _ExtractedSidebarSlot,\n  ExtractedContentSlot as _SidebarExtractedContentSlot,\n} from './page-layout/sidebar-layout/slots.js';\nexport {\n  DetailsLayout as _DetailsLayout,\n  type LayoutRootProps as _DetailsLayoutRootProps,\n} from './page-layout/details-layout/DetailsLayout.js';\nexport type {\n  DetailsProps as _PageLayoutDetailsProps,\n  DetailsControlBarProps as _PageLayoutDetailsControlBarProps,\n  ExtractedDetailsSlot as _ExtractedDetailsSlot,\n  ExtractedContentSlot as _DetailsExtractedContentSlot,\n} from './page-layout/details-layout/slots.js';\nexport type { LayoutMode as _DetailsLayoutLayoutMode } from './page-layout/details-layout/DetailsLayoutContext.js';\nexport {\n  PageLayout as _PageLayout,\n  type RootProps as _PageLayoutRootProps,\n} from './page-layout/PageLayout.js';\nexport type { HeaderProps as _PageLayoutHeaderProps } from './page-layout/shared/portal-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;AAkBzB,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;AAAA,EACiB;AAAA,OAKV;AAGP;AAAA,EACmB;AAAA,OAEZ;AAMP;AAAA,EACmB;AAAA,OAEZ;AAQP;AAAA,EACgB;AAAA,OAET;",
+  "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} 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;AAkBzB,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;",
   "names": ["Logo"]
 }

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

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

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { forwardRef } from "react";
+import { Children, forwardRef } from "react";
 import * as styles from "./InputGroup.sty.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { Grid } from "../grid/Grid.js";
@@ -18,6 +18,9 @@ const InputGroup = /* @__PURE__ */ forwardRef((inputGroupProps, ref) => {
     ...remainingProps
   } = inputGroupProps;
   const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  if (Children.count(children) === 0) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     Grid,
     {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/input-group/InputGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type PropsWithChildren } from 'react';\n\nimport * as styles from './InputGroup.sty.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { Grid } from '../grid/Grid.js';\n\nconst COMPONENT_NAME = 'InputGroup';\n\n/**\n * Props for the InputGroup component.\n * @public\n */\nexport interface InputGroupProps\n  extends PropsWithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {}\n\n/**\n * The `InputGroup` component is the outermost layout component of a field\n * component (for example `TextInput`), providing support for grouping.\n * @public\n */\nexport const InputGroup = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  InputGroupProps\n>((inputGroupProps, ref) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n    'data-dt-component': dataDtComponent = COMPONENT_NAME,\n    ...remainingProps\n  } = inputGroupProps;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  return (\n    <Grid\n      ref={ref}\n      gridAutoFlow=\"column\"\n      gridAutoRows=\"max-content\"\n      justifyContent=\"start\"\n      columnGap={2}\n      rowGap={4}\n      className={clsx(consumerClassName, styles.inputGroup)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...restProps}\n      {...behavioralTrackingProps}\n      data-dt-component={dataDtComponent}\n    >\n      {children}\n    </Grid>\n  );\n});\n\n(InputGroup as typeof InputGroup & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AAiDI;AAjDJ,OAAO,UAAU;AACjB,SAAS,kBAA0C;AAEnD,YAAY,YAAY;AACxB,SAAS,kCAAkC;AAK3C,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAkBhB,MAAM,aAA6B,2BAGxC,CAAC,iBAAiB,QAAQ;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA;AAAA,IAEpB,qBAAqB,kBAAkB;AAAA,IACvC,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAa;AAAA,MACb,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,WAAW,KAAK,mBAAmB,OAAO,UAAU;AAAA,MACpD,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { Children, forwardRef, type PropsWithChildren } from 'react';\n\nimport * as styles from './InputGroup.sty.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { Grid } from '../grid/Grid.js';\n\nconst COMPONENT_NAME = 'InputGroup';\n\n/**\n * Props for the InputGroup component.\n * @public\n */\nexport interface InputGroupProps\n  extends PropsWithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {}\n\n/**\n * The `InputGroup` component is the outermost layout component of a field\n * component (for example `TextInput`), providing support for grouping.\n * @public\n */\nexport const InputGroup = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  InputGroupProps\n>((inputGroupProps, ref) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n    'data-dt-component': dataDtComponent = COMPONENT_NAME,\n    ...remainingProps\n  } = inputGroupProps;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  // If there are no children, we don't want to render the component at all to avoid unnecessary DOM elements.\n  if (Children.count(children) === 0) {\n    return null;\n  }\n\n  return (\n    <Grid\n      ref={ref}\n      gridAutoFlow=\"column\"\n      gridAutoRows=\"max-content\"\n      justifyContent=\"start\"\n      columnGap={2}\n      rowGap={4}\n      className={clsx(consumerClassName, styles.inputGroup)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...restProps}\n      {...behavioralTrackingProps}\n      data-dt-component={dataDtComponent}\n    >\n      {children}\n    </Grid>\n  );\n});\n\n(InputGroup as typeof InputGroup & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAsDI;AAtDJ,OAAO,UAAU;AACjB,SAAS,UAAU,kBAA0C;AAE7D,YAAY,YAAY;AACxB,SAAS,kCAAkC;AAK3C,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAkBhB,MAAM,aAA6B,2BAGxC,CAAC,iBAAiB,QAAQ;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA;AAAA,IAEpB,qBAAqB,kBAAkB;AAAA,IACvC,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAG3C,MAAI,SAAS,MAAM,QAAQ,MAAM,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAa;AAAA,MACb,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,WAAW,KAAK,mBAAmB,OAAO,UAAU;AAAA,MACpD,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
   "names": []
 }

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

@@ -2,8 +2,9 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../forms/forms-core/components/form-field/FormField.css";
 import "../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css";
 import "../../forms/forms-core/components/form-field-messages/FormFieldMessages.css";
+import "../../styles/field.css";
 import "./InputGroup.css";
-var inputGroup = "_1x4bl8z0-3-4-0";
+var inputGroup = "_1x4bl8z0-3-5-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 './InputGroup.css';\nexport var inputGroup = '_1x4bl8z0-3-4-0';\nexport var inputGroupClassName = 'strato-inputgroup';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,sBAAsB;",
+  "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-5-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,8 +1,11 @@
-._wapl5d0-3-4-0 {
+._wapl5d0-3-5-0 {
   grid-area: details;
   flex-direction: row-reverse;
 }
-._wapl5d1-3-4-0 {
+._wapl5d1-3-5-0 {
   background: var(--dt-colors-background-base-default, #f9f9fa);
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
+}
+._1jgl8s50-3-5-0 ._wapl5d1-3-5-0 {
+  border-top-left-radius: 0;
 }

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

@@ -1,6 +1,7 @@
+import "../../core/components/app-root/AppRoot.css";
 import "./DetailView.css";
-var content = "_wapl5d1-3-4-0";
-var details = "_wapl5d0-3-4-0";
+var content = "_wapl5d1-3-5-0";
+var details = "_wapl5d0-3-5-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 './DetailView.css';\nexport var content = '_wapl5d1-3-4-0';\nexport var details = '_wapl5d0-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,UAAU;",
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './DetailView.css';\nexport var content = '_wapl5d1-3-5-0';\nexport var details = '_wapl5d0-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,UAAU;",
   "names": []
 }

package/esm/layouts/page/Header.css

@@ -1,6 +1,9 @@
-._150dima0-3-4-0 {
+._150dima0-3-5-0 {
   grid-area: header;
   width: 100%;
   padding: var(--dt-spacings-size-8, 8px);
   box-sizing: border-box;
+  ._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);
+  }
 }

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

@@ -1,5 +1,6 @@
+import "../../core/components/app-root/AppRoot.css";
 import "./Header.css";
-var header = "_150dima0-3-4-0";
+var header = "_150dima0-3-5-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 './Header.css';\nexport var header = '_150dima0-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;",
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Header.css';\nexport var header = '_150dima0-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/page/Main.css

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

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

@@ -1,8 +1,9 @@
+import "../../core/components/app-root/AppRoot.css";
 import "./Main.css";
-var content = "_5zin931-3-4-0";
-var main = "_5zin930-3-4-0";
-var withDetails = "_5zin933-3-4-0";
-var withSidebar = "_5zin932-3-4-0";
+var content = "_5zin931-3-5-0";
+var main = "_5zin930-3-5-0";
+var withDetails = "_5zin933-3-5-0";
+var withSidebar = "_5zin932-3-5-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 './Main.css';\nexport var content = '_5zin931-3-4-0';\nexport var main = '_5zin930-3-4-0';\nexport var withDetails = '_5zin933-3-4-0';\nexport var withSidebar = '_5zin932-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,cAAc;",
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Main.css';\nexport var content = '_5zin931-3-5-0';\nexport var main = '_5zin930-3-5-0';\nexport var withDetails = '_5zin933-3-5-0';\nexport var withSidebar = '_5zin932-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,cAAc;",
   "names": []
 }

package/esm/layouts/page/Page.css

@@ -1,7 +1,10 @@
-._1j29czt0-3-4-0 {
+._1j29czt0-3-5-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;
   height: 100vh;
   overflow: hidden;
+}
+._1jgl8s50-3-5-0 ._1j29czt0-3-5-0 {
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }

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

@@ -1,5 +1,6 @@
+import "../../core/components/app-root/AppRoot.css";
 import "./Page.css";
-var page = "_1j29czt0-3-4-0";
+var page = "_1j29czt0-3-5-0";
 export {
   page
 };

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

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

package/esm/layouts/page/Panel.js

@@ -5,8 +5,8 @@ import {
   forwardRef,
   useCallback,
   useEffect,
-  useRef,
-  useMemo
+  useMemo,
+  useRef
 } from "react";
 import { useIntl } from "react-intl";
 import { KeepMountedProvider } from "./keepMounted.js";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Panel.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useMemo,\n  type HTMLAttributes,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { KeepMountedProvider } from './keepMounted.js';\nimport type { PanelName } from './page-types.js';\nimport { panelContext } from './panel-context.js';\nimport type { PanelSize } from './panel-types.js';\nimport * as styles from './panel.sty.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\ninterface PanelRootProps\n  extends WithChildren,\n    StylingProps,\n    HTMLAttributes<HTMLDivElement> {\n  name: PanelName;\n}\n\nconst PanelRoot = (props: PanelRootProps) => {\n  const { className, id, style, children, name }: PanelRootProps = props;\n\n  const ctx = useMemo(() => ({ name }), [name]);\n\n  return (\n    <panelContext.Provider value={ctx}>\n      <KeepMountedProvider>\n        <aside\n          {...props}\n          id={id}\n          className={clsx(styles.root, className)}\n          style={style}\n        >\n          {children}\n        </aside>\n      </KeepMountedProvider>\n    </panelContext.Provider>\n  );\n};\n\ninterface PanelContentProps extends WithChildren, StylingProps {\n  isDismissed?: boolean; // To retain the size when dismissing and expanding the panel, we need to handle the dismissed display mode inside\n  /** @defaultValue `right` */\n  handle?: 'left' | 'right' | 'hidden';\n  /** Descriptive label for the panel. */\n  label: string;\n  /**\n   * The minimum width of the sidebar in pixels.\n   * @defaultValue 200\n   */\n  minWidth?: number;\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  /** Callback triggered after resizing is finished. */\n  onResize?: (width: number) => void;\n  /** Available size of the containing element. Used to calculate size with relative units. */\n  containerSize: number;\n}\n\nconst PanelContent = forwardRef<HTMLDivElement, PanelContentProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className,\n      handle = 'right',\n      isDismissed,\n      label,\n      minWidth,\n      onResize,\n      preferredWidth,\n      style,\n      containerSize,\n      ...restProps\n    }: PanelContentProps = props;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const panelRefs = useMergeRefs([panelRef, forwardedRef]);\n\n    const handleRef = useRef<HTMLHRElement>(null);\n\n    const draggedSize = useRef<number>();\n    const wasResized = useRef(false);\n\n    const setPanelSize = useCallback(\n      (size: number) => {\n        if (!panelRef.current) {\n          return;\n        }\n\n        let sizeToApply = Math.floor(size * 1000) / 1000;\n        draggedSize.current = sizeToApply;\n\n        // users can resize out of bounds and create negative size values. we dont want to apply those as css\n        if (size < 0) {\n          return;\n        }\n\n        if (minWidth && sizeToApply < minWidth) {\n          sizeToApply = minWidth;\n        }\n\n        panelRef.current.style.setProperty('width', `${sizeToApply}px`);\n      },\n      [minWidth],\n    );\n\n    const ensurePanelSizeMatchesComputedWidth = useCallback(\n      (element: HTMLElement, size: number) => {\n        const actualWidth = parseFloat(getComputedStyle(element).width);\n        if (size !== actualWidth) {\n          setPanelSize(actualWidth);\n        }\n        return actualWidth;\n      },\n      [setPanelSize],\n    );\n\n    const handleDrag = useCallback(\n      (deltaX: number) => {\n        if (!draggedSize.current) {\n          return;\n        }\n        setPanelSize(\n          draggedSize.current + deltaX * (handle === 'right' ? 1 : -1),\n        );\n        wasResized.current = true;\n      },\n      [handle, setPanelSize],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      const size = ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n      onResize?.(size);\n    }, [ensurePanelSizeMatchesComputedWidth, onResize]);\n\n    const handleDragStart = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n    }, [ensurePanelSizeMatchesComputedWidth]);\n\n    useGesture(\n      {\n        onDragStart: handleDragStart,\n        onDragEnd: handleDragEnd,\n        onDrag: ({ delta: [deltaX] }) => handleDrag(deltaX),\n      },\n      {\n        target: handleRef,\n        eventOptions: { passive: false },\n        drag: { filterTaps: true },\n      },\n    );\n\n    useEffect(\n      function initializePanelSize() {\n        if (!panelRef.current || wasResized.current || isDismissed) {\n          return;\n        }\n\n        if (typeof preferredWidth === 'number') {\n          setPanelSize(preferredWidth);\n          return;\n        }\n\n        // percentage based values on grid children use the available space of the area, not the full grid container\n        if (preferredWidth?.includes('%')) {\n          const size = containerSize * (parseFloat(preferredWidth) / 100);\n          setPanelSize(size);\n          return;\n        }\n\n        if (preferredWidth?.includes('px')) {\n          const size = parseFloat(preferredWidth);\n          setPanelSize(size);\n          return;\n        }\n\n        // for all other units we let the browser compute the size\n        if (typeof preferredWidth === 'string') {\n          panelRef.current.style.setProperty('width', preferredWidth);\n          const size = parseFloat(getComputedStyle(panelRef.current).width);\n          setPanelSize(size);\n          return;\n        }\n\n        const size = parseFloat(getComputedStyle(panelRef.current).width);\n        setPanelSize(size);\n      },\n      [containerSize, preferredWidth, setPanelSize, isDismissed],\n    );\n\n    if (isDismissed) {\n      return null;\n    }\n\n    return (\n      <>\n        <div\n          {...restProps}\n          ref={panelRefs}\n          className={clsx(styles.panelContent, className)}\n          style={{ ...style, minWidth, width: draggedSize.current }}\n        >\n          {children}\n        </div>\n\n        <div className={styles.resizeHandleContainer}>\n          {handle !== 'hidden' ? (\n            <ResizeHandle\n              panelName={label}\n              panelSize={draggedSize.current}\n              ref={handleRef}\n            />\n          ) : null}\n        </div>\n      </>\n    );\n  },\n);\n\ninterface ResizeHandleProps {\n  panelName: string;\n  panelSize?: number;\n}\n\nconst ResizeHandle = forwardRef<HTMLHRElement, ResizeHandleProps>(\n  (props, ref) => {\n    const { panelName, panelSize = 0 } = props;\n\n    const intl = useIntl();\n    const { focusProps, focusClassName } = useFocusRing({\n      focusWithin: true,\n      ignoreModality: true,\n    });\n\n    return (\n      <hr\n        {...focusProps}\n        ref={ref}\n        className={clsx(styles.resizeHandle, focusClassName)}\n        aria-valuenow={panelSize}\n        aria-valuetext={`${Math.round(panelSize)}px`}\n        aria-orientation=\"vertical\"\n        aria-label={intl.formatMessage(\n          {\n            defaultMessage: 'Resize {label} panel',\n            id: 'Ym3RUHtaLVFsGlaM',\n            description:\n              'Label for the resize handle of the panel to resize it with drag and drop or keyboard.',\n          },\n          { label: panelName },\n        )}\n        tabIndex={0}\n        data-dt-name=\"Resize\"\n      />\n    );\n  },\n);\n\nexport const Panel = Object.assign(PanelRoot, {\n  Content: PanelContent,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { KeepMountedProvider } from './keepMounted.js';\nimport type { PanelName } from './page-types.js';\nimport { panelContext } from './panel-context.js';\nimport type { PanelSize } from './panel-types.js';\nimport * as styles from './panel.sty.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\ninterface PanelRootProps\n  extends WithChildren,\n    StylingProps,\n    HTMLAttributes<HTMLDivElement> {\n  name: PanelName;\n}\n\nconst PanelRoot = (props: PanelRootProps) => {\n  const { className, id, style, children, name }: PanelRootProps = props;\n\n  const ctx = useMemo(() => ({ name }), [name]);\n\n  return (\n    <panelContext.Provider value={ctx}>\n      <KeepMountedProvider>\n        <aside\n          {...props}\n          id={id}\n          className={clsx(styles.root, className)}\n          style={style}\n        >\n          {children}\n        </aside>\n      </KeepMountedProvider>\n    </panelContext.Provider>\n  );\n};\n\ninterface PanelContentProps extends WithChildren, StylingProps {\n  isDismissed?: boolean; // To retain the size when dismissing and expanding the panel, we need to handle the dismissed display mode inside\n  /** @defaultValue `right` */\n  handle?: 'left' | 'right' | 'hidden';\n  /** Descriptive label for the panel. */\n  label: string;\n  /**\n   * The minimum width of the sidebar in pixels.\n   * @defaultValue 200\n   */\n  minWidth?: number;\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  /** Callback triggered after resizing is finished. */\n  onResize?: (width: number) => void;\n  /** Available size of the containing element. Used to calculate size with relative units. */\n  containerSize: number;\n}\n\nconst PanelContent = forwardRef<HTMLDivElement, PanelContentProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className,\n      handle = 'right',\n      isDismissed,\n      label,\n      minWidth,\n      onResize,\n      preferredWidth,\n      style,\n      containerSize,\n      ...restProps\n    }: PanelContentProps = props;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const panelRefs = useMergeRefs([panelRef, forwardedRef]);\n\n    const handleRef = useRef<HTMLHRElement>(null);\n\n    const draggedSize = useRef<number>();\n    const wasResized = useRef(false);\n\n    const setPanelSize = useCallback(\n      (size: number) => {\n        if (!panelRef.current) {\n          return;\n        }\n\n        let sizeToApply = Math.floor(size * 1000) / 1000;\n        draggedSize.current = sizeToApply;\n\n        // users can resize out of bounds and create negative size values. we dont want to apply those as css\n        if (size < 0) {\n          return;\n        }\n\n        if (minWidth && sizeToApply < minWidth) {\n          sizeToApply = minWidth;\n        }\n\n        panelRef.current.style.setProperty('width', `${sizeToApply}px`);\n      },\n      [minWidth],\n    );\n\n    const ensurePanelSizeMatchesComputedWidth = useCallback(\n      (element: HTMLElement, size: number) => {\n        const actualWidth = parseFloat(getComputedStyle(element).width);\n        if (size !== actualWidth) {\n          setPanelSize(actualWidth);\n        }\n        return actualWidth;\n      },\n      [setPanelSize],\n    );\n\n    const handleDrag = useCallback(\n      (deltaX: number) => {\n        if (!draggedSize.current) {\n          return;\n        }\n        setPanelSize(\n          draggedSize.current + deltaX * (handle === 'right' ? 1 : -1),\n        );\n        wasResized.current = true;\n      },\n      [handle, setPanelSize],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      const size = ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n      onResize?.(size);\n    }, [ensurePanelSizeMatchesComputedWidth, onResize]);\n\n    const handleDragStart = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n    }, [ensurePanelSizeMatchesComputedWidth]);\n\n    useGesture(\n      {\n        onDragStart: handleDragStart,\n        onDragEnd: handleDragEnd,\n        onDrag: ({ delta: [deltaX] }) => handleDrag(deltaX),\n      },\n      {\n        target: handleRef,\n        eventOptions: { passive: false },\n        drag: { filterTaps: true },\n      },\n    );\n\n    useEffect(\n      function initializePanelSize() {\n        if (!panelRef.current || wasResized.current || isDismissed) {\n          return;\n        }\n\n        if (typeof preferredWidth === 'number') {\n          setPanelSize(preferredWidth);\n          return;\n        }\n\n        // percentage based values on grid children use the available space of the area, not the full grid container\n        if (preferredWidth?.includes('%')) {\n          const size = containerSize * (parseFloat(preferredWidth) / 100);\n          setPanelSize(size);\n          return;\n        }\n\n        if (preferredWidth?.includes('px')) {\n          const size = parseFloat(preferredWidth);\n          setPanelSize(size);\n          return;\n        }\n\n        // for all other units we let the browser compute the size\n        if (typeof preferredWidth === 'string') {\n          panelRef.current.style.setProperty('width', preferredWidth);\n          const size = parseFloat(getComputedStyle(panelRef.current).width);\n          setPanelSize(size);\n          return;\n        }\n\n        const size = parseFloat(getComputedStyle(panelRef.current).width);\n        setPanelSize(size);\n      },\n      [containerSize, preferredWidth, setPanelSize, isDismissed],\n    );\n\n    if (isDismissed) {\n      return null;\n    }\n\n    return (\n      <>\n        <div\n          {...restProps}\n          ref={panelRefs}\n          className={clsx(styles.panelContent, className)}\n          style={{ ...style, minWidth, width: draggedSize.current }}\n        >\n          {children}\n        </div>\n\n        <div className={styles.resizeHandleContainer}>\n          {handle !== 'hidden' ? (\n            <ResizeHandle\n              panelName={label}\n              panelSize={draggedSize.current}\n              ref={handleRef}\n            />\n          ) : null}\n        </div>\n      </>\n    );\n  },\n);\n\ninterface ResizeHandleProps {\n  panelName: string;\n  panelSize?: number;\n}\n\nconst ResizeHandle = forwardRef<HTMLHRElement, ResizeHandleProps>(\n  (props, ref) => {\n    const { panelName, panelSize = 0 } = props;\n\n    const intl = useIntl();\n    const { focusProps, focusClassName } = useFocusRing({\n      focusWithin: true,\n      ignoreModality: true,\n    });\n\n    return (\n      <hr\n        {...focusProps}\n        ref={ref}\n        className={clsx(styles.resizeHandle, focusClassName)}\n        aria-valuenow={panelSize}\n        aria-valuetext={`${Math.round(panelSize)}px`}\n        aria-orientation=\"vertical\"\n        aria-label={intl.formatMessage(\n          {\n            defaultMessage: 'Resize {label} panel',\n            id: 'Ym3RUHtaLVFsGlaM',\n            description:\n              'Label for the resize handle of the panel to resize it with drag and drop or keyboard.',\n          },\n          { label: panelName },\n        )}\n        tabIndex={0}\n        data-dt-name=\"Resize\"\n      />\n    );\n  },\n);\n\nexport const Panel = Object.assign(PanelRoot, {\n  Content: PanelContent,\n});\n"],
+  "mappings": "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",
   "names": ["size"]
 }