@dynatrace/strato-components 3.11.3 → 3.12.1

package/esm/layouts/page/panel.css

@@ -1,37 +1,37 @@
-._1p91g301-3-11-3 {
+._1p91g301-3-12-1 {
   box-sizing: border-box;
   display: flex;
   max-width: 100%;
 }
-._1p91g302-3-11-3 {
+._1p91g302-3-12-1 {
   width: 0;
   position: relative;
 }
-._1p91g303-3-11-3 {
+._1p91g303-3-12-1 {
   flex-shrink: 0;
   position: relative;
   width: 8px;
 }
-._1p91g304-3-11-3 {
+._1p91g304-3-12-1 {
   box-sizing: border-box;
   padding: 0;
 }
-._1p91g305-3-11-3 {
+._1p91g305-3-12-1 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;
 }
-._1p91g306-3-11-3 {
+._1p91g306-3-12-1 {
   line-height: 0;
 }
-._1p91g307-3-11-3 {
+._1p91g307-3-12-1 {
   box-sizing: border-box;
   flex-grow: 1;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   position: relative;
 }
-._1p91g308-3-11-3 {
+._1p91g308-3-12-1 {
   flex-shrink: 0;
   width: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -40,7 +40,7 @@
   height: 100%;
   justify-content: center;
 }
-._1jgl8s50-3-11-3 ._1p91g308-3-11-3 {
+._1jgl8s50-3-12-1 ._1p91g308-3-12-1 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
@@ -50,7 +50,7 @@
   margin-inline: calc(var(--dt-spacings-size-8, 8px) / -2);
   z-index: 1;
 }
-._1jgl8s50-3-11-3 ._1p91g308-3-11-3::before {
+._1jgl8s50-3-12-1 ._1p91g308-3-12-1::before {
   content: "";
   position: absolute;
   top: 0;
@@ -61,13 +61,13 @@
   background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
   pointer-events: none;
 }
-._1jgl8s50-3-11-3 ._1p91g308-3-11-3:hover::before {
+._1jgl8s50-3-12-1 ._1p91g308-3-12-1:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-11-3 ._1p91g308-3-11-3:active::before {
+._1jgl8s50-3-12-1 ._1p91g308-3-12-1:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._1p91g309-3-11-3 {
+._1p91g309-3-12-1 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -80,17 +80,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-11-3:focus-visible {
+._1p91g309-3-12-1:focus-visible {
   width: 100%;
 }
-._1p91g309-3-11-3:hover._1p91g309-3-11-3:focus-visible {
+._1p91g309-3-12-1:hover._1p91g309-3-12-1:focus-visible {
   width: 2px;
 }
-._1p91g309-3-11-3:focus-visible, ._1p91g309-3-11-3:hover {
+._1p91g309-3-12-1:focus-visible, ._1p91g309-3-12-1:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._1p91g309-3-11-3:after {
+._1p91g309-3-12-1:after {
   content: "";
   display: block;
   height: 100%;
@@ -101,11 +101,11 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-11-3 ._1p91g309-3-11-3 {
+._1jgl8s50-3-12-1 ._1p91g309-3-12-1 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-11-3 ._1p91g308-3-11-3:has(._1p91g309-3-11-3:focus-visible)::before {
+._1jgl8s50-3-12-1 ._1p91g308-3-12-1:has(._1p91g309-3-12-1:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
 }

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

@@ -1,16 +1,16 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./panel.css";
 var GAP_SIZE = 8;
-var buttonIcon = "_1p91g306-3-11-3";
-var dismissedPanel = "_1p91g302-3-11-3";
-var drawer = "_1p91g304-3-11-3";
-var drawerContent = "_1p91g305-3-11-3";
-var gap = "_1p91g303-3-11-3";
-var panelContent = "_1p91g307-3-11-3";
-var resizeHandle = "_1p91g309-3-11-3";
-var resizeHandleContainer = "_1p91g308-3-11-3";
-var root = "_1p91g301-3-11-3";
-var rtlPanel = "_1p91g300-3-11-3";
+var buttonIcon = "_1p91g306-3-12-1";
+var dismissedPanel = "_1p91g302-3-12-1";
+var drawer = "_1p91g304-3-12-1";
+var drawerContent = "_1p91g305-3-12-1";
+var gap = "_1p91g303-3-12-1";
+var panelContent = "_1p91g307-3-12-1";
+var resizeHandle = "_1p91g309-3-12-1";
+var resizeHandleContainer = "_1p91g308-3-12-1";
+var root = "_1p91g301-3-12-1";
+var rtlPanel = "_1p91g300-3-12-1";
 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 '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-11-3';\nexport var dismissedPanel = '_1p91g302-3-11-3';\nexport var drawer = '_1p91g304-3-11-3';\nexport var drawerContent = '_1p91g305-3-11-3';\nexport var gap = '_1p91g303-3-11-3';\nexport var panelContent = '_1p91g307-3-11-3';\nexport var resizeHandle = '_1p91g309-3-11-3';\nexport var resizeHandleContainer = '_1p91g308-3-11-3';\nexport var root = '_1p91g301-3-11-3';\nexport var rtlPanel = '_1p91g300-3-11-3';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-12-1';\nexport var dismissedPanel = '_1p91g302-3-12-1';\nexport var drawer = '_1p91g304-3-12-1';\nexport var drawerContent = '_1p91g305-3-12-1';\nexport var gap = '_1p91g303-3-12-1';\nexport var panelContent = '_1p91g307-3-12-1';\nexport var resizeHandle = '_1p91g309-3-12-1';\nexport var resizeHandleContainer = '_1p91g308-3-12-1';\nexport var root = '_1p91g301-3-12-1';\nexport var rtlPanel = '_1p91g300-3-12-1';"],
   "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-11-3 {
+._193kgwe0-3-12-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;
@@ -7,36 +7,36 @@
   grid-template-rows: min-content minmax(0px, 1fr);
   grid-template-areas: "header" "content";
 }
-._1jgl8s50-3-11-3 ._193kgwe0-3-11-3 {
+._1jgl8s50-3-12-1 ._193kgwe0-3-12-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._193kgwe1-3-11-3 {
+._193kgwe1-3-12-1 {
   grid-area: header;
   padding: var(--dt-spacings-size-8, 8px);
   min-width: 0;
-  ._1jgl8s50-3-11-3 & {
+  ._1jgl8s50-3-12-1 & {
     border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
   }
 }
-._193kgwe2-3-11-3 {
+._193kgwe2-3-12-1 {
   grid-area: content;
   min-width: 0;
 }
-._193kgwe3-3-11-3 {
+._193kgwe3-3-12-1 {
   padding: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   height: 100%;
   isolation: isolate;
 }
-._193kgwe4-3-11-3 {
+._193kgwe4-3-12-1 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-11-3 ._193kgwe4-3-11-3 {
+._1jgl8s50-3-12-1 ._193kgwe4-3-12-1 {
   border-top-left-radius: 0;
 }
-._193kgwe5-3-11-3 {
+._193kgwe5-3-12-1 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-11-3 ._193kgwe5-3-11-3 {
+._1jgl8s50-3-12-1 ._193kgwe5-3-12-1 {
   border-top-right-radius: 0;
 }

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

@@ -1,11 +1,11 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./PageLayout.css";
-var content = "_193kgwe3-3-11-3";
-var contentContainer = "_193kgwe2-3-11-3";
-var contentTopLeftRadius = "_193kgwe4-3-11-3";
-var contentTopRightRadius = "_193kgwe5-3-11-3";
-var headerContainer = "_193kgwe1-3-11-3";
-var layoutRoot = "_193kgwe0-3-11-3";
+var content = "_193kgwe3-3-12-1";
+var contentContainer = "_193kgwe2-3-12-1";
+var contentTopLeftRadius = "_193kgwe4-3-12-1";
+var contentTopRightRadius = "_193kgwe5-3-12-1";
+var headerContainer = "_193kgwe1-3-12-1";
+var layoutRoot = "_193kgwe0-3-12-1";
 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 '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-11-3';\nexport var contentContainer = '_193kgwe2-3-11-3';\nexport var contentTopLeftRadius = '_193kgwe4-3-11-3';\nexport var contentTopRightRadius = '_193kgwe5-3-11-3';\nexport var headerContainer = '_193kgwe1-3-11-3';\nexport var layoutRoot = '_193kgwe0-3-11-3';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-12-1';\nexport var contentContainer = '_193kgwe2-3-12-1';\nexport var contentTopLeftRadius = '_193kgwe4-3-12-1';\nexport var contentTopRightRadius = '_193kgwe5-3-12-1';\nexport var headerContainer = '_193kgwe1-3-12-1';\nexport var layoutRoot = '_193kgwe0-3-12-1';"],
   "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-11-3 {
+._1y5ro0l0-3-12-1 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--dt-spacings-size-8, 8px);
 }
-._1y5ro0l1-3-11-3 {
+._1y5ro0l1-3-12-1 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1y5ro0l2-3-11-3 {
+._1y5ro0l2-3-12-1 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);

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

@@ -46,7 +46,7 @@ const DetailsControlBar = (props) => {
   const isSplit = context?.preferredLayout === "split";
   return /* @__PURE__ */ jsxs("div", { ...restProps, className: clsx(styles.controlBar, className), children: [
     hasCustomActions && /* @__PURE__ */ jsx("div", { className: styles.customActions, children }),
-    hasCustomActions && /* @__PURE__ */ jsx(Divider, { orientation: "vertical", as: "hr", flexItem: true }),
+    hasCustomActions && /* @__PURE__ */ jsx(Divider, { orientation: "vertical", as: "hr", flexItem: true, "aria-hidden": true }),
     /* @__PURE__ */ jsxs("div", { className: styles.defaultActions, children: [
       showLayoutToggle && /* @__PURE__ */ jsx(
         Button,

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 { 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-children-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,yBAAsB;AAAA,UAEtB,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 && (\n        <Divider orientation=\"vertical\" as=\"hr\" flexItem aria-hidden />\n      )}\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-children-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,cAKF,YALE;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,oBACC,oBAAC,WAAQ,aAAY,YAAW,IAAG,MAAK,UAAQ,MAAC,eAAW,MAAC;AAAA,IAE/D,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,yBAAsB;AAAA,UAEtB,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-11-3";
-var customActions = "_1y5ro0l1-3-11-3";
-var defaultActions = "_1y5ro0l2-3-11-3";
+var controlBar = "_1y5ro0l0-3-12-1";
+var customActions = "_1y5ro0l1-3-12-1";
+var defaultActions = "_1y5ro0l2-3-12-1";
 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-11-3';\nexport var customActions = '_1y5ro0l1-3-11-3';\nexport var defaultActions = '_1y5ro0l2-3-11-3';"],
+  "sourcesContent": ["import './DetailsControlBar.css';\nexport var controlBar = '_1y5ro0l0-3-12-1';\nexport var customActions = '_1y5ro0l1-3-12-1';\nexport var defaultActions = '_1y5ro0l2-3-12-1';"],
   "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-11-3 {
+._1377n3n0-3-12-1 {
   height: 100%;
   overflow: hidden;
   position: relative;
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1377n3n1-3-11-3 {
+._1377n3n1-3-12-1 {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -15,19 +15,19 @@
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-11-3 ._1377n3n1-3-11-3 {
+._1jgl8s50-3-12-1 ._1377n3n1-3-12-1 {
   border-top-left-radius: 0;
 }
-._1377n3n2-3-11-3 {
+._1377n3n2-3-12-1 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
 }
-._1377n3n3-3-11-3 {
+._1377n3n3-3-12-1 {
   box-sizing: border-box;
   padding: 0;
 }
-._1377n3n4-3-11-3 {
+._1377n3n4-3-12-1 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;

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

@@ -1,10 +1,10 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "./DetailsLayout.css";
-var content = "_1377n3n2-3-11-3";
-var drawer = "_1377n3n3-3-11-3";
-var drawerContent = "_1377n3n4-3-11-3";
-var layoutRoot = "_1377n3n0-3-11-3";
-var panel = "_1377n3n1-3-11-3";
+var content = "_1377n3n2-3-12-1";
+var drawer = "_1377n3n3-3-12-1";
+var drawerContent = "_1377n3n4-3-12-1";
+var layoutRoot = "_1377n3n0-3-12-1";
+var panel = "_1377n3n1-3-12-1";
 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 '../../../core/components/app-root/AppRoot.css';\nimport './DetailsLayout.css';\nexport var content = '_1377n3n2-3-11-3';\nexport var drawer = '_1377n3n3-3-11-3';\nexport var drawerContent = '_1377n3n4-3-11-3';\nexport var layoutRoot = '_1377n3n0-3-11-3';\nexport var panel = '_1377n3n1-3-11-3';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DetailsLayout.css';\nexport var content = '_1377n3n2-3-12-1';\nexport var drawer = '_1377n3n3-3-12-1';\nexport var drawerContent = '_1377n3n4-3-12-1';\nexport var layoutRoot = '_1377n3n0-3-12-1';\nexport var panel = '_1377n3n1-3-12-1';"],
   "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/Overlay.css

@@ -1,4 +1,4 @@
-._15qr1eq0-3-11-3 {
+._15qr1eq0-3-12-1 {
   position: absolute;
   z-index: 1;
   right: 0;
@@ -12,19 +12,19 @@
   box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   display: flex;
 }
-._1jgl8s50-3-11-3 ._15qr1eq0-3-11-3 {
+._1jgl8s50-3-12-1 ._15qr1eq0-3-12-1 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._15qr1eq1-3-11-3 {
+._15qr1eq1-3-12-1 {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   flex-grow: 1;
 }
-._15qr1eq2-3-11-3 {
+._15qr1eq2-3-12-1 {
   height: 100%;
   flex-shrink: 0;
   position: relative;
@@ -33,7 +33,7 @@
   display: flex;
   justify-content: center;
 }
-._1jgl8s50-3-11-3 ._15qr1eq2-3-11-3 {
+._1jgl8s50-3-12-1 ._15qr1eq2-3-12-1 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
@@ -41,7 +41,7 @@
   transition: none;
   background-color: transparent;
 }
-._1jgl8s50-3-11-3 ._15qr1eq2-3-11-3::before {
+._1jgl8s50-3-12-1 ._15qr1eq2-3-12-1::before {
   content: "";
   position: absolute;
   top: 0;
@@ -52,13 +52,13 @@
   background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
   pointer-events: none;
 }
-._1jgl8s50-3-11-3 ._15qr1eq2-3-11-3:hover::before {
+._1jgl8s50-3-12-1 ._15qr1eq2-3-12-1:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-11-3 ._15qr1eq2-3-11-3:active::before {
+._1jgl8s50-3-12-1 ._15qr1eq2-3-12-1:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._15qr1eq3-3-11-3 {
+._15qr1eq3-3-12-1 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -71,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;
 }
-._15qr1eq3-3-11-3:focus-visible {
+._15qr1eq3-3-12-1:focus-visible {
   width: 100%;
 }
-._15qr1eq3-3-11-3:hover._15qr1eq3-3-11-3:focus-visible {
+._15qr1eq3-3-12-1:hover._15qr1eq3-3-12-1:focus-visible {
   width: 2px;
 }
-._15qr1eq3-3-11-3:focus-visible, ._15qr1eq3-3-11-3:hover {
+._15qr1eq3-3-12-1:focus-visible, ._15qr1eq3-3-12-1:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._15qr1eq3-3-11-3:after {
+._15qr1eq3-3-12-1:after {
   content: "";
   display: block;
   height: 100%;
@@ -92,20 +92,20 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-11-3 ._15qr1eq3-3-11-3 {
+._1jgl8s50-3-12-1 ._15qr1eq3-3-12-1 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-11-3 ._15qr1eq2-3-11-3:has(._15qr1eq3-3-11-3:focus-visible)::before {
+._1jgl8s50-3-12-1 ._15qr1eq2-3-12-1:has(._15qr1eq3-3-12-1:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
 }
-._1jgl8s50-3-11-3 ._15qr1eq0-3-11-3:has(._15qr1eq3-3-11-3:hover) {
+._1jgl8s50-3-12-1 ._15qr1eq0-3-12-1:has(._15qr1eq3-3-12-1:hover) {
   box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
 }
-._1jgl8s50-3-11-3 ._15qr1eq0-3-11-3:has(._15qr1eq3-3-11-3:active) {
+._1jgl8s50-3-12-1 ._15qr1eq0-3-12-1:has(._15qr1eq3-3-12-1:active) {
   box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
 }
-._1jgl8s50-3-11-3 ._15qr1eq0-3-11-3:has(._15qr1eq3-3-11-3:focus-visible) {
+._1jgl8s50-3-12-1 ._15qr1eq0-3-12-1:has(._15qr1eq3-3-12-1:focus-visible) {
   box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
 }

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

@@ -1,9 +1,9 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "./Overlay.css";
-var handleContainer = "_15qr1eq2-3-11-3";
-var overlay = "_15qr1eq0-3-11-3";
-var overlayContent = "_15qr1eq1-3-11-3";
-var resizeHandle = "_15qr1eq3-3-11-3";
+var handleContainer = "_15qr1eq2-3-12-1";
+var overlay = "_15qr1eq0-3-12-1";
+var overlayContent = "_15qr1eq1-3-12-1";
+var resizeHandle = "_15qr1eq3-3-12-1";
 export {
   handleContainer,
   overlay,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/Overlay.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './Overlay.css';\nexport var handleContainer = '_15qr1eq2-3-11-3';\nexport var overlay = '_15qr1eq0-3-11-3';\nexport var overlayContent = '_15qr1eq1-3-11-3';\nexport var resizeHandle = '_15qr1eq3-3-11-3';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './Overlay.css';\nexport var handleContainer = '_15qr1eq2-3-12-1';\nexport var overlay = '_15qr1eq0-3-12-1';\nexport var overlayContent = '_15qr1eq1-3-12-1';\nexport var resizeHandle = '_15qr1eq3-3-12-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,UAAU;AACd,IAAI,iBAAiB;AACrB,IAAI,eAAe;",
   "names": []
 }