@dynatrace/strato-components 3.4.0 → 3.5.0

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

@@ -1,4 +1,4 @@
-._15qr1eq0-3-4-0 {
+._15qr1eq0-3-5-0 {
   position: absolute;
   z-index: 1;
   right: 0;
@@ -12,14 +12,19 @@
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   display: flex;
 }
-._15qr1eq1-3-4-0 {
+._1jgl8s50-3-5-0 ._15qr1eq0-3-5-0 {
+  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-5-0 {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   flex-grow: 1;
 }
-._15qr1eq2-3-4-0 {
+._15qr1eq2-3-5-0 {
   height: 100%;
   flex-shrink: 0;
   position: relative;
@@ -28,7 +33,25 @@
   display: flex;
   justify-content: center;
 }
-._15qr1eq3-3-4-0 {
+._1jgl8s50-3-5-0 ._15qr1eq2-3-5-0 {
+  background-color: transparent;
+  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: calc(-1 * var(--dt-spacings-size-4, 4px));
+  transition: none;
+}
+._1jgl8s50-3-5-0 ._15qr1eq2-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 ._15qr1eq2-3-5-0:active {
+  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued-active, #c6c7d5), var(--dt-colors-border-neutral-subdued-active, #c6c7d5));
+}
+._15qr1eq3-3-5-0 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -41,17 +64,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-4-0:focus-visible {
+._15qr1eq3-3-5-0:focus-visible {
   width: 100%;
 }
-._15qr1eq3-3-4-0:hover._15qr1eq3-3-4-0:focus-visible {
+._15qr1eq3-3-5-0:hover._15qr1eq3-3-5-0:focus-visible {
   width: 2px;
 }
-._15qr1eq3-3-4-0:focus-visible, ._15qr1eq3-3-4-0:hover {
+._15qr1eq3-3-5-0:focus-visible, ._15qr1eq3-3-5-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._15qr1eq3-3-4-0:after {
+._15qr1eq3-3-5-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -61,4 +84,21 @@
   transform: translateX(-50%);
   user-select: none;
   width: 100%;
+}
+._1jgl8s50-3-5-0 ._15qr1eq3-3-5-0 {
+  width: 0;
+  cursor: ew-resize;
+}
+._1jgl8s50-3-5-0 ._15qr1eq2-3-5-0:has(._15qr1eq3-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%;
+}
+._1jgl8s50-3-5-0 ._15qr1eq0-3-5-0:has(._15qr1eq3-3-5-0:hover) {
+  box-shadow: var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
+}
+._1jgl8s50-3-5-0 ._15qr1eq0-3-5-0:has(._15qr1eq3-3-5-0:active) {
+  box-shadow: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+}
+._1jgl8s50-3-5-0 ._15qr1eq0-3-5-0:has(._15qr1eq3-3-5-0:focus-visible) {
+  box-shadow: 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.js

@@ -3,9 +3,9 @@ import { useGesture } from "@use-gesture/react";
 import { clsx } from "clsx";
 import {
   forwardRef,
+  memo,
   useRef,
-  useState,
-  memo
+  useState
 } from "react";
 import * as styles from "./Overlay.sty.js";
 import { useFocusRing } from "../../../core/styles/useFocusRing.js";
@@ -68,12 +68,11 @@ const Overlay = memo(
         ref: containerRef,
         children: [
           resizable ? /* @__PURE__ */ jsx("div", { className: styles.handleContainer, children: /* @__PURE__ */ jsx(
-            "div",
+            "hr",
             {
               ...focusProps,
-              role: "separator",
               ref: handleRef,
-              className: clsx(styles.handle, focusClassName),
+              className: clsx(styles.resizeHandle, focusClassName),
               tabIndex: 0
             }
           ) }) : null,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/Overlay.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport { clsx } from 'clsx';\nimport {\n  type PropsWithChildren,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useRef,\n  useState,\n  memo,\n} from 'react';\n\nimport * as styles from './Overlay.sty.js';\nimport { useFocusRing } from '../../../core/styles/useFocusRing.js';\nimport { clamp } from '../../split-layout/width-utils.js';\n\nexport const OVERLAY_HANDLE_WIDTH = 8;\n\n/** @internal */\nexport interface OverlayProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {\n  resizable?: boolean;\n  onResize?: (width: number) => void;\n  minWidth?: number;\n  maxWidth?: number;\n  defaultWidth?: number;\n}\n\n/** @internal */\nexport const Overlay = memo(\n  forwardRef<HTMLDivElement, OverlayProps>((props, forwardedRef) => {\n    const {\n      children,\n      className,\n      style,\n      minWidth = 200,\n      maxWidth = Infinity,\n      defaultWidth = 300,\n      resizable = true,\n      onResize,\n      ...restProps\n    } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useRef<HTMLDivElement>(null);\n\n    const { focusProps, focusClassName } = useFocusRing({\n      focusWithin: true,\n      ignoreModality: true,\n    });\n\n    const dragStartWidth = useRef<number | null>(null);\n    const clampContentWidth = (width: number) =>\n      clamp(minWidth, width, maxWidth);\n    const clampedDefaultWidth = clampContentWidth(defaultWidth);\n    const [resizedWidth, setResizedWidth] = useState<number | null>(null);\n\n    const contentWidth =\n      resizedWidth === null\n        ? clampedDefaultWidth\n        : clampContentWidth(resizedWidth);\n\n    const overlayWidth = resizable\n      ? contentWidth + OVERLAY_HANDLE_WIDTH\n      : contentWidth;\n\n    useGesture(\n      {\n        onDragStart: () => {\n          dragStartWidth.current = clampContentWidth(contentWidth);\n        },\n        onDragEnd: () => {\n          dragStartWidth.current = null;\n        },\n        onDrag: (state) => {\n          if (dragStartWidth.current === null) {\n            return;\n          }\n\n          const nextWidth = clamp(\n            minWidth,\n            dragStartWidth.current + state.movement[0] * -1,\n            maxWidth,\n          );\n          setResizedWidth(nextWidth);\n          onResize?.(nextWidth);\n        },\n      },\n      { target: handleRef },\n    );\n\n    return (\n      <div\n        role=\"dialog\"\n        className={styles.overlay}\n        style={{ ...style, width: overlayWidth }}\n        ref={containerRef}\n      >\n        {resizable ? (\n          <div className={styles.handleContainer}>\n            <div\n              {...focusProps}\n              role=\"separator\"\n              ref={handleRef}\n              className={clsx(styles.handle, focusClassName)}\n              tabIndex={0}\n            />\n          </div>\n        ) : null}\n        <div\n          {...restProps}\n          ref={forwardedRef}\n          className={clsx(styles.overlayContent, className)}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }),\n);\nOverlay.displayName = 'Overlay';\n"],
-  "mappings": "AA4FM,SAQM,KARN;AA5FN,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEf,MAAM,uBAAuB;AAc7B,MAAM,UAAU;AAAA,EACrB,WAAyC,CAAC,OAAO,iBAAiB;AAChE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,YAAY,OAAuB,IAAI;AAE7C,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD,aAAa;AAAA,MACb,gBAAgB;AAAA,IAClB,CAAC;AAED,UAAM,iBAAiB,OAAsB,IAAI;AACjD,UAAM,oBAAoB,CAAC,UACzB,MAAM,UAAU,OAAO,QAAQ;AACjC,UAAM,sBAAsB,kBAAkB,YAAY;AAC1D,UAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AAEpE,UAAM,eACJ,iBAAiB,OACb,sBACA,kBAAkB,YAAY;AAEpC,UAAM,eAAe,YACjB,eAAe,uBACf;AAEJ;AAAA,MACE;AAAA,QACE,aAAa,MAAM;AACjB,yBAAe,UAAU,kBAAkB,YAAY;AAAA,QACzD;AAAA,QACA,WAAW,MAAM;AACf,yBAAe,UAAU;AAAA,QAC3B;AAAA,QACA,QAAQ,CAAC,UAAU;AACjB,cAAI,eAAe,YAAY,MAAM;AACnC;AAAA,UACF;AAEA,gBAAM,YAAY;AAAA,YAChB;AAAA,YACA,eAAe,UAAU,MAAM,SAAS,CAAC,IAAI;AAAA,YAC7C;AAAA,UACF;AACA,0BAAgB,SAAS;AACzB,qBAAW,SAAS;AAAA,QACtB;AAAA,MACF;AAAA,MACA,EAAE,QAAQ,UAAU;AAAA,IACtB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,OAAO,EAAE,GAAG,OAAO,OAAO,aAAa;AAAA,QACvC,KAAK;AAAA,QAEJ;AAAA,sBACC,oBAAC,SAAI,WAAW,OAAO,iBACrB;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,MAAK;AAAA,cACL,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,QAAQ,cAAc;AAAA,cAC7C,UAAU;AAAA;AAAA,UACZ,GACF,IACE;AAAA,UACJ;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,gBAAgB,SAAS;AAAA,cAE/C;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AACA,QAAQ,cAAc;",
+  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport { clsx } from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  memo,\n  type PropsWithChildren,\n  useRef,\n  useState,\n} from 'react';\n\nimport * as styles from './Overlay.sty.js';\nimport { useFocusRing } from '../../../core/styles/useFocusRing.js';\nimport { clamp } from '../../split-layout/width-utils.js';\n\nexport const OVERLAY_HANDLE_WIDTH = 8;\n\n/** @internal */\nexport interface OverlayProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {\n  resizable?: boolean;\n  onResize?: (width: number) => void;\n  minWidth?: number;\n  maxWidth?: number;\n  defaultWidth?: number;\n}\n\n/** @internal */\nexport const Overlay = memo(\n  forwardRef<HTMLDivElement, OverlayProps>((props, forwardedRef) => {\n    const {\n      children,\n      className,\n      style,\n      minWidth = 200,\n      maxWidth = Infinity,\n      defaultWidth = 300,\n      resizable = true,\n      onResize,\n      ...restProps\n    } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useRef<HTMLHRElement>(null);\n\n    const { focusProps, focusClassName } = useFocusRing({\n      focusWithin: true,\n      ignoreModality: true,\n    });\n\n    const dragStartWidth = useRef<number | null>(null);\n    const clampContentWidth = (width: number) =>\n      clamp(minWidth, width, maxWidth);\n    const clampedDefaultWidth = clampContentWidth(defaultWidth);\n    const [resizedWidth, setResizedWidth] = useState<number | null>(null);\n\n    const contentWidth =\n      resizedWidth === null\n        ? clampedDefaultWidth\n        : clampContentWidth(resizedWidth);\n\n    const overlayWidth = resizable\n      ? contentWidth + OVERLAY_HANDLE_WIDTH\n      : contentWidth;\n\n    useGesture(\n      {\n        onDragStart: () => {\n          dragStartWidth.current = clampContentWidth(contentWidth);\n        },\n        onDragEnd: () => {\n          dragStartWidth.current = null;\n        },\n        onDrag: (state) => {\n          if (dragStartWidth.current === null) {\n            return;\n          }\n\n          const nextWidth = clamp(\n            minWidth,\n            dragStartWidth.current + state.movement[0] * -1,\n            maxWidth,\n          );\n          setResizedWidth(nextWidth);\n          onResize?.(nextWidth);\n        },\n      },\n      { target: handleRef },\n    );\n\n    return (\n      <div\n        role=\"dialog\"\n        className={styles.overlay}\n        style={{ ...style, width: overlayWidth }}\n        ref={containerRef}\n      >\n        {resizable ? (\n          <div className={styles.handleContainer}>\n            <hr\n              {...focusProps}\n              ref={handleRef}\n              className={clsx(styles.resizeHandle, focusClassName)}\n              tabIndex={0}\n            />\n          </div>\n        ) : null}\n        <div\n          {...restProps}\n          ref={forwardedRef}\n          className={clsx(styles.overlayContent, className)}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }),\n);\nOverlay.displayName = 'Overlay';\n"],
+  "mappings": "AA4FM,SAQM,KARN;AA5FN,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEf,MAAM,uBAAuB;AAc7B,MAAM,UAAU;AAAA,EACrB,WAAyC,CAAC,OAAO,iBAAiB;AAChE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,YAAY,OAAsB,IAAI;AAE5C,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD,aAAa;AAAA,MACb,gBAAgB;AAAA,IAClB,CAAC;AAED,UAAM,iBAAiB,OAAsB,IAAI;AACjD,UAAM,oBAAoB,CAAC,UACzB,MAAM,UAAU,OAAO,QAAQ;AACjC,UAAM,sBAAsB,kBAAkB,YAAY;AAC1D,UAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AAEpE,UAAM,eACJ,iBAAiB,OACb,sBACA,kBAAkB,YAAY;AAEpC,UAAM,eAAe,YACjB,eAAe,uBACf;AAEJ;AAAA,MACE;AAAA,QACE,aAAa,MAAM;AACjB,yBAAe,UAAU,kBAAkB,YAAY;AAAA,QACzD;AAAA,QACA,WAAW,MAAM;AACf,yBAAe,UAAU;AAAA,QAC3B;AAAA,QACA,QAAQ,CAAC,UAAU;AACjB,cAAI,eAAe,YAAY,MAAM;AACnC;AAAA,UACF;AAEA,gBAAM,YAAY;AAAA,YAChB;AAAA,YACA,eAAe,UAAU,MAAM,SAAS,CAAC,IAAI;AAAA,YAC7C;AAAA,UACF;AACA,0BAAgB,SAAS;AACzB,qBAAW,SAAS;AAAA,QACtB;AAAA,MACF;AAAA,MACA,EAAE,QAAQ,UAAU;AAAA,IACtB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,OAAO,EAAE,GAAG,OAAO,OAAO,aAAa;AAAA,QACvC,KAAK;AAAA,QAEJ;AAAA,sBACC,oBAAC,SAAI,WAAW,OAAO,iBACrB;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,cAAc,cAAc;AAAA,cACnD,UAAU;AAAA;AAAA,UACZ,GACF,IACE;AAAA,UACJ;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,gBAAgB,SAAS;AAAA,cAE/C;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AACA,QAAQ,cAAc;",
   "names": []
 }

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

@@ -1,12 +1,13 @@
+import "../../../core/components/app-root/AppRoot.css";
 import "./Overlay.css";
-var handle = "_15qr1eq3-3-4-0";
-var handleContainer = "_15qr1eq2-3-4-0";
-var overlay = "_15qr1eq0-3-4-0";
-var overlayContent = "_15qr1eq1-3-4-0";
+var handleContainer = "_15qr1eq2-3-5-0";
+var overlay = "_15qr1eq0-3-5-0";
+var overlayContent = "_15qr1eq1-3-5-0";
+var resizeHandle = "_15qr1eq3-3-5-0";
 export {
-  handle,
   handleContainer,
   overlay,
-  overlayContent
+  overlayContent,
+  resizeHandle
 };
 //# sourceMappingURL=Overlay.sty.js.map

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 './Overlay.css';\nexport var handle = '_15qr1eq3-3-4-0';\nexport var handleContainer = '_15qr1eq2-3-4-0';\nexport var overlay = '_15qr1eq0-3-4-0';\nexport var overlayContent = '_15qr1eq1-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,kBAAkB;AACtB,IAAI,UAAU;AACd,IAAI,iBAAiB;",
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './Overlay.css';\nexport var handleContainer = '_15qr1eq2-3-5-0';\nexport var overlay = '_15qr1eq0-3-5-0';\nexport var overlayContent = '_15qr1eq1-3-5-0';\nexport var resizeHandle = '_15qr1eq3-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,UAAU;AACd,IAAI,iBAAiB;AACrB,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/page-layout/shared/portal-slots.js

@@ -60,7 +60,6 @@ const PageLayoutSidebar = forwardRef(
     onCollapsedChange,
     breakpoint = sidebarDefaults.breakpoint,
     onResize,
-    id: _id,
     ...domProps
   }, ref) {
     const { hosts } = usePageLayoutPortalContext();

package/esm/layouts/page-layout/shared/portal-slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/shared/portal-slots.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type PropsWithChildren,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { usePageLayoutPortalContext } from './PageLayoutPortalContext.js';\nimport {\n  contentDefaults,\n  detailsDefaults,\n  sidebarDefaults,\n} from './slot-defaults.js';\nimport { useRegisteredSlot } from './useRegisteredSlot.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport { DetailsControlBar } from '../details-layout/DetailsControlBar.js';\nimport { DetailsLayoutContext } from '../details-layout/DetailsLayoutContext.js';\nimport type { DetailsProps, ContentProps } from '../details-layout/slots.js';\nimport type { SidebarProps } from '../sidebar-layout/slots.js';\n\nconst toRef = <T,>(ref: ForwardedRef<T>) => ref ?? undefined;\n\n/**\n * Returns a stable reference to `value` that only changes identity when one of\n * its own enumerable keys changes (shallow equality). Used to keep registry\n * entries from churning when callers spread anonymous objects (e.g. `domProps`)\n * into them on every render.\n */\nfunction useShallowStable<T extends Record<string, unknown>>(value: T): T {\n  const ref = useRef<T>(value);\n  const prev = ref.current;\n  const prevKeys = Object.keys(prev);\n  const nextKeys = Object.keys(value);\n  let equal = prevKeys.length === nextKeys.length;\n  if (equal) {\n    for (const key of nextKeys) {\n      if (!Object.is(prev[key], value[key])) {\n        equal = false;\n        break;\n      }\n    }\n  }\n  if (!equal) {\n    ref.current = value;\n  }\n  return ref.current;\n}\n\n/**\n * PageLayout.Header - portals children into the header host node and\n * registers layout config via the slot registry in a layout effect.\n * @internal\n */\nexport interface HeaderProps\n  extends PropsWithChildren,\n    MaskingProps,\n    ComponentPropsWithoutRef<'div'> {}\n\nexport const PageLayoutHeader = forwardRef<HTMLDivElement, HeaderProps>(\n  function PageLayoutHeader(\n    { children, ...domProps }: HeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({ domProps: stableDomProps, ref: refValue }),\n      [stableDomProps, refValue],\n    );\n\n    useRegisteredSlot('header', config);\n\n    return createPortal(children, hosts.header);\n  },\n);\n\n/**\n * PageLayout.Sidebar - portals children into the sidebar host node and\n * registers sidebar config via the slot registry in a layout effect.\n * @internal\n */\nexport const PageLayoutSidebar = forwardRef<HTMLDivElement, SidebarProps>(\n  function PageLayoutSidebar(\n    {\n      children,\n      defaultWidth = sidebarDefaults.defaultWidth,\n      minWidth = sidebarDefaults.minWidth,\n      maxWidth = sidebarDefaults.maxWidth,\n      resizable = sidebarDefaults.resizable,\n      collapsed,\n      defaultCollapsed = sidebarDefaults.defaultCollapsed,\n      onCollapsedChange,\n      breakpoint = sidebarDefaults.breakpoint,\n      onResize,\n      id: _id,\n      ...domProps\n    }: SidebarProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: {\n          defaultWidth,\n          minWidth,\n          maxWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          breakpoint,\n          onResize,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        defaultWidth,\n        minWidth,\n        maxWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        breakpoint,\n        onResize,\n        stableDomProps,\n        refValue,\n      ],\n    );\n\n    useRegisteredSlot('sidebar', config);\n\n    return createPortal(children, hosts.sidebar);\n  },\n);\n\n/**\n * PageLayout.Content - portals children into the content host node and\n * registers content config via the slot registry in a layout effect.\n * @internal\n */\nexport const PageLayoutContent = forwardRef<HTMLDivElement, ContentProps>(\n  function PageLayoutContent(\n    {\n      children,\n      minWidth = contentDefaults.minWidth,\n      ...domProps\n    }: ContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: { minWidth },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [minWidth, stableDomProps, refValue],\n    );\n\n    useRegisteredSlot('content', config);\n\n    return createPortal(children, hosts.content);\n  },\n);\n\n/**\n * PageLayout.Details - portals children into the details host node and\n * registers details config via the slot registry in a layout effect.\n *\n * Children are wrapped in `DetailsLayoutContext.Provider` using the value\n * bridged through the slot registry. Without this, `DetailsControlBar` would\n * fall back to the context's default value because the portal originates\n * outside the provider placed by `DetailsLayoutInner`.\n *\n * @internal\n */\nexport const PageLayoutDetails = forwardRef<HTMLDivElement, DetailsProps>(\n  function PageLayoutDetails(\n    {\n      children,\n      minWidth = detailsDefaults.minWidth,\n      maxWidth = detailsDefaults.maxWidth,\n      defaultWidth = detailsDefaults.defaultWidth,\n      resizable = detailsDefaults.resizable,\n      collapsed,\n      defaultCollapsed = detailsDefaults.defaultCollapsed,\n      onCollapsedChange,\n      layout,\n      defaultLayout = detailsDefaults.defaultLayout,\n      onLayoutChange,\n      breakpoint = detailsDefaults.breakpoint,\n      onResize,\n      ...domProps\n    }: DetailsProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts, registry } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: {\n          minWidth,\n          maxWidth,\n          defaultWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          layout,\n          defaultLayout,\n          onLayoutChange,\n          breakpoint,\n          onResize,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        minWidth,\n        maxWidth,\n        defaultWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        layout,\n        defaultLayout,\n        onLayoutChange,\n        breakpoint,\n        onResize,\n        stableDomProps,\n        refValue,\n      ],\n    );\n\n    useRegisteredSlot('details', config);\n\n    const detailsLayoutContext = useSyncExternalStore(\n      registry.subscribe,\n      () => registry.getSnapshot().detailsLayoutContext,\n    );\n\n    return createPortal(\n      <DetailsLayoutContext.Provider value={detailsLayoutContext}>\n        {children}\n      </DetailsLayoutContext.Provider>,\n      hosts.details,\n    );\n  },\n);\n\nexport const PageLayoutDetailsWithControlBar = Object.assign(\n  PageLayoutDetails,\n  { ControlBar: DetailsControlBar },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n  type ForwardedRef,\n  type PropsWithChildren,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { usePageLayoutPortalContext } from './PageLayoutPortalContext.js';\nimport {\n  contentDefaults,\n  detailsDefaults,\n  sidebarDefaults,\n} from './slot-defaults.js';\nimport { useRegisteredSlot } from './useRegisteredSlot.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 { DetailsControlBar } from '../details-layout/DetailsControlBar.js';\nimport { DetailsLayoutContext } from '../details-layout/DetailsLayoutContext.js';\nimport type { DetailsProps, ContentProps } from '../details-layout/slots.js';\nimport type { SidebarProps } from '../sidebar-layout/slots.js';\n\nconst toRef = <T,>(ref: ForwardedRef<T>) => ref ?? undefined;\n\n/**\n * Returns a stable reference to `value` that only changes identity when one of\n * its own enumerable keys changes (shallow equality). Used to keep registry\n * entries from churning when callers spread anonymous objects (e.g. `domProps`)\n * into them on every render.\n */\nfunction useShallowStable<T extends Record<string, unknown>>(value: T): T {\n  const ref = useRef<T>(value);\n  const prev = ref.current;\n  const prevKeys = Object.keys(prev);\n  const nextKeys = Object.keys(value);\n  let equal = prevKeys.length === nextKeys.length;\n  if (equal) {\n    for (const key of nextKeys) {\n      if (!Object.is(prev[key], value[key])) {\n        equal = false;\n        break;\n      }\n    }\n  }\n  if (!equal) {\n    ref.current = value;\n  }\n  return ref.current;\n}\n\n/**\n * PageLayout.Header - portals children into the header host node and\n * registers layout config via the slot registry in a layout effect.\n * @public\n */\nexport interface HeaderProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nexport const PageLayoutHeader = forwardRef<HTMLDivElement, HeaderProps>(\n  function PageLayoutHeader(\n    { children, ...domProps }: HeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({ domProps: stableDomProps, ref: refValue }),\n      [stableDomProps, refValue],\n    );\n\n    useRegisteredSlot('header', config);\n\n    return createPortal(children, hosts.header);\n  },\n);\n\n/**\n * PageLayout.Sidebar - portals children into the sidebar host node and\n * registers sidebar config via the slot registry in a layout effect.\n * @internal\n */\nexport const PageLayoutSidebar = forwardRef<HTMLDivElement, SidebarProps>(\n  function PageLayoutSidebar(\n    {\n      children,\n      defaultWidth = sidebarDefaults.defaultWidth,\n      minWidth = sidebarDefaults.minWidth,\n      maxWidth = sidebarDefaults.maxWidth,\n      resizable = sidebarDefaults.resizable,\n      collapsed,\n      defaultCollapsed = sidebarDefaults.defaultCollapsed,\n      onCollapsedChange,\n      breakpoint = sidebarDefaults.breakpoint,\n      onResize,\n      ...domProps\n    }: SidebarProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: {\n          defaultWidth,\n          minWidth,\n          maxWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          breakpoint,\n          onResize,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        defaultWidth,\n        minWidth,\n        maxWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        breakpoint,\n        onResize,\n        stableDomProps,\n        refValue,\n      ],\n    );\n\n    useRegisteredSlot('sidebar', config);\n\n    return createPortal(children, hosts.sidebar);\n  },\n);\n\n/**\n * PageLayout.Content - portals children into the content host node and\n * registers content config via the slot registry in a layout effect.\n * @internal\n */\nexport const PageLayoutContent = forwardRef<HTMLDivElement, ContentProps>(\n  function PageLayoutContent(\n    {\n      children,\n      minWidth = contentDefaults.minWidth,\n      ...domProps\n    }: ContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: { minWidth },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [minWidth, stableDomProps, refValue],\n    );\n\n    useRegisteredSlot('content', config);\n\n    return createPortal(children, hosts.content);\n  },\n);\n\n/**\n * PageLayout.Details - portals children into the details host node and\n * registers details config via the slot registry in a layout effect.\n *\n * Children are wrapped in `DetailsLayoutContext.Provider` using the value\n * bridged through the slot registry. Without this, `DetailsControlBar` would\n * fall back to the context's default value because the portal originates\n * outside the provider placed by `DetailsLayoutInner`.\n *\n * @internal\n */\nexport const PageLayoutDetails = forwardRef<HTMLDivElement, DetailsProps>(\n  function PageLayoutDetails(\n    {\n      children,\n      minWidth = detailsDefaults.minWidth,\n      maxWidth = detailsDefaults.maxWidth,\n      defaultWidth = detailsDefaults.defaultWidth,\n      resizable = detailsDefaults.resizable,\n      collapsed,\n      defaultCollapsed = detailsDefaults.defaultCollapsed,\n      onCollapsedChange,\n      layout,\n      defaultLayout = detailsDefaults.defaultLayout,\n      onLayoutChange,\n      breakpoint = detailsDefaults.breakpoint,\n      onResize,\n      ...domProps\n    }: DetailsProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts, registry } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: {\n          minWidth,\n          maxWidth,\n          defaultWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          layout,\n          defaultLayout,\n          onLayoutChange,\n          breakpoint,\n          onResize,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        minWidth,\n        maxWidth,\n        defaultWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        layout,\n        defaultLayout,\n        onLayoutChange,\n        breakpoint,\n        onResize,\n        stableDomProps,\n        refValue,\n      ],\n    );\n\n    useRegisteredSlot('details', config);\n\n    const detailsLayoutContext = useSyncExternalStore(\n      registry.subscribe,\n      () => registry.getSnapshot().detailsLayoutContext,\n    );\n\n    return createPortal(\n      <DetailsLayoutContext.Provider value={detailsLayoutContext}>\n        {children}\n      </DetailsLayoutContext.Provider>,\n      hosts.details,\n    );\n  },\n);\n\nexport const PageLayoutDetailsWithControlBar = Object.assign(\n  PageLayoutDetails,\n  { ControlBar: DetailsControlBar },\n);\n"],
+  "mappings": "AAoQM;AApQN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,oBAAoB;AAE7B,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAMlC,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAIrC,MAAM,QAAQ,CAAK,QAAyB,OAAO;AAQnD,SAAS,iBAAoD,OAAa;AACxE,QAAM,MAAM,OAAU,KAAK;AAC3B,QAAM,OAAO,IAAI;AACjB,QAAM,WAAW,OAAO,KAAK,IAAI;AACjC,QAAM,WAAW,OAAO,KAAK,KAAK;AAClC,MAAI,QAAQ,SAAS,WAAW,SAAS;AACzC,MAAI,OAAO;AACT,eAAW,OAAO,UAAU;AAC1B,UAAI,CAAC,OAAO,GAAG,KAAK,GAAG,GAAG,MAAM,GAAG,CAAC,GAAG;AACrC,gBAAQ;AACR;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,MAAI,CAAC,OAAO;AACV,QAAI,UAAU;AAAA,EAChB;AACA,SAAO,IAAI;AACb;AAeO,MAAM,mBAAmB;AAAA,EAC9B,SAASA,kBACP,EAAE,UAAU,GAAG,SAAS,GACxB,KACA;AACA,UAAM,EAAE,MAAM,IAAI,2BAA2B;AAC7C,UAAM,iBAAiB,iBAAiB,QAAQ;AAChD,UAAM,WAAW,MAAM,GAAG;AAC1B,UAAM,SAAS;AAAA,MACb,OAAO,EAAE,UAAU,gBAAgB,KAAK,SAAS;AAAA,MACjD,CAAC,gBAAgB,QAAQ;AAAA,IAC3B;AAEA,sBAAkB,UAAU,MAAM;AAElC,WAAO,aAAa,UAAU,MAAM,MAAM;AAAA,EAC5C;AACF;AAOO,MAAM,oBAAoB;AAAA,EAC/B,SAASC,mBACP;AAAA,IACE;AAAA,IACA,eAAe,gBAAgB;AAAA,IAC/B,WAAW,gBAAgB;AAAA,IAC3B,WAAW,gBAAgB;AAAA,IAC3B,YAAY,gBAAgB;AAAA,IAC5B;AAAA,IACA,mBAAmB,gBAAgB;AAAA,IACnC;AAAA,IACA,aAAa,gBAAgB;AAAA,IAC7B;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,UAAM,EAAE,MAAM,IAAI,2BAA2B;AAC7C,UAAM,iBAAiB,iBAAiB,QAAQ;AAChD,UAAM,WAAW,MAAM,GAAG;AAC1B,UAAM,SAAS;AAAA,MACb,OAAO;AAAA,QACL,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,UAAU;AAAA,QACV,KAAK;AAAA,MACP;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,sBAAkB,WAAW,MAAM;AAEnC,WAAO,aAAa,UAAU,MAAM,OAAO;AAAA,EAC7C;AACF;AAOO,MAAM,oBAAoB;AAAA,EAC/B,SAASC,mBACP;AAAA,IACE;AAAA,IACA,WAAW,gBAAgB;AAAA,IAC3B,GAAG;AAAA,EACL,GACA,KACA;AACA,UAAM,EAAE,MAAM,IAAI,2BAA2B;AAC7C,UAAM,iBAAiB,iBAAiB,QAAQ;AAChD,UAAM,WAAW,MAAM,GAAG;AAC1B,UAAM,SAAS;AAAA,MACb,OAAO;AAAA,QACL,QAAQ,EAAE,SAAS;AAAA,QACnB,UAAU;AAAA,QACV,KAAK;AAAA,MACP;AAAA,MACA,CAAC,UAAU,gBAAgB,QAAQ;AAAA,IACrC;AAEA,sBAAkB,WAAW,MAAM;AAEnC,WAAO,aAAa,UAAU,MAAM,OAAO;AAAA,EAC7C;AACF;AAaO,MAAM,oBAAoB;AAAA,EAC/B,SAASC,mBACP;AAAA,IACE;AAAA,IACA,WAAW,gBAAgB;AAAA,IAC3B,WAAW,gBAAgB;AAAA,IAC3B,eAAe,gBAAgB;AAAA,IAC/B,YAAY,gBAAgB;AAAA,IAC5B;AAAA,IACA,mBAAmB,gBAAgB;AAAA,IACnC;AAAA,IACA;AAAA,IACA,gBAAgB,gBAAgB;AAAA,IAChC;AAAA,IACA,aAAa,gBAAgB;AAAA,IAC7B;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,UAAM,EAAE,OAAO,SAAS,IAAI,2BAA2B;AACvD,UAAM,iBAAiB,iBAAiB,QAAQ;AAChD,UAAM,WAAW,MAAM,GAAG;AAC1B,UAAM,SAAS;AAAA,MACb,OAAO;AAAA,QACL,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,UAAU;AAAA,QACV,KAAK;AAAA,MACP;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,sBAAkB,WAAW,MAAM;AAEnC,UAAM,uBAAuB;AAAA,MAC3B,SAAS;AAAA,MACT,MAAM,SAAS,YAAY,EAAE;AAAA,IAC/B;AAEA,WAAO;AAAA,MACL,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,sBACnC,UACH;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,kCAAkC,OAAO;AAAA,EACpD;AAAA,EACA,EAAE,YAAY,kBAAkB;AAClC;",
   "names": ["PageLayoutHeader", "PageLayoutSidebar", "PageLayoutContent", "PageLayoutDetails"]
 }

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.css

@@ -1,14 +1,14 @@
-._1mr4xg70-3-4-0 {
+._1mr4xg70-3-5-0 {
   height: 100%;
   overflow: hidden;
   position: relative;
 }
-._1mr4xg71-3-4-0 {
+._1mr4xg71-3-5-0 {
   display: flex;
   height: 100%;
   width: 100%;
 }
-._1mr4xg72-3-4-0 {
+._1mr4xg72-3-5-0 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
@@ -16,24 +16,37 @@
   padding: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg73-3-4-0 {
+._1jgl8s50-3-5-0 ._1mr4xg72-3-5-0 {
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+}
+._1mr4xg73-3-5-0 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   flex-grow: 1;
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1mr4xg74-3-4-0 {
+._1mr4xg74-3-5-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg75-3-4-0 {
+._1mr4xg75-3-5-0 {
   position: relative;
   width: var(--dt-spacings-size-16, 16px);
   height: 100%;
   flex-shrink: 0;
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg76-3-4-0 {
+._1jgl8s50-3-5-0 ._1mr4xg75-3-5-0 {
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
+}
+._1jgl8s50-3-5-0 ._1mr4xg75-3-5-0:hover {
+  border-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
+}
+._1jgl8s50-3-5-0 ._1mr4xg75-3-5-0:active {
+  border-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
+}
+._1mr4xg76-3-5-0 {
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
@@ -48,49 +61,54 @@
   translate: calc(0px - var(--dt-spacings-size-16, 16px) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1mr4xg76-3-4-0:hover, ._1mr4xg76-3-4-0:focus, ._1mr4xg75-3-4-0:hover ._1mr4xg76-3-4-0 {
+._1mr4xg76-3-5-0:hover, ._1mr4xg76-3-5-0:focus, ._1mr4xg75-3-5-0:hover ._1mr4xg76-3-5-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   translate: calc(0px - var(--dt-spacings-size-16, 16px) / 2);
 }
-._1mr4xg77-3-4-0 {
+._1jgl8s50-3-5-0 ._1mr4xg76-3-5-0, ._1jgl8s50-3-5-0 ._1mr4xg76-3-5-0:hover, ._1jgl8s50-3-5-0 ._1mr4xg76-3-5-0:focus, ._1jgl8s50-3-5-0 ._1mr4xg75-3-5-0:hover ._1mr4xg76-3-5-0 {
+  border-top-right-radius: 0;
+  translate: 0;
+  box-shadow: none;
+}
+._1mr4xg77-3-5-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
 }
-._1mr4xg78-3-4-0 {
+._1mr4xg78-3-5-0 {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-._1mr4xg79-3-4-0 {
+._1mr4xg79-3-5-0 {
   box-sizing: border-box;
   flex-grow: 1;
 }
-._1mr4xg7a-3-4-0 {
+._1mr4xg7a-3-5-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1mr4xg7c-3-4-0 {
-  --_1mr4xg7b-3-4-0: 24px;
+._1mr4xg7c-3-5-0 {
+  --_1mr4xg7b-3-5-0: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
   left: -2px;
   line-height: 0;
   z-index: 1;
 }
-._1mr4xg7d-3-4-0 {
-  --_1mr4xg7b-3-4-0: 24px;
+._1mr4xg7d-3-5-0 {
+  --_1mr4xg7b-3-5-0: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
   left: 2px;
   line-height: 0;
   z-index: 1;
 }
-._1mr4xg7e-3-4-0 {
-  width: var(--_1mr4xg7b-3-4-0);
-  height: var(--_1mr4xg7b-3-4-0);
+._1mr4xg7e-3-5-0 {
+  width: var(--_1mr4xg7b-3-5-0);
+  height: var(--_1mr4xg7b-3-5-0);
   box-sizing: border-box;
 }
-._1mr4xg7f-3-4-0 {
+._1mr4xg7f-3-5-0 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   opacity: 0;
   box-shadow: 0 0 0 2px var(--dt-colors-background-container-neutral-default, #f2f2f5);
@@ -98,20 +116,52 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._1mr4xg7f-3-4-0:hover {
+._1mr4xg7f-3-5-0:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1mr4xg7f-3-4-0:focus {
+._1mr4xg7f-3-5-0:focus {
+  opacity: 1;
+}
+._1mr4xg72-3-5-0:hover ~ ._1mr4xg74-3-5-0 ._1mr4xg7f-3-5-0, ._1mr4xg74-3-5-0:hover ._1mr4xg7f-3-5-0 {
   opacity: 1;
 }
-._1mr4xg72-3-4-0:hover ~ ._1mr4xg74-3-4-0 ._1mr4xg7f-3-4-0, ._1mr4xg74-3-4-0:hover ._1mr4xg7f-3-4-0 {
+._1jgl8s50-3-5-0 ._1mr4xg72-3-5-0:hover ~ ._1mr4xg74-3-5-0 ._1mr4xg7f-3-5-0, ._1jgl8s50-3-5-0 ._1mr4xg74-3-5-0:hover ._1mr4xg7f-3-5-0 {
   opacity: 1;
+  box-shadow: none;
+}
+._1jgl8s50-3-5-0 ._1mr4xg7f-3-5-0 {
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
+  left: calc(-1 * var(--dt-spacings-size-6, 6px));
+  opacity: 0;
 }
-._1mr4xg7g-3-4-0 {
+._1jgl8s50-3-5-0 ._1mr4xg7f-3-5-0:hover {
+  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+  opacity: 1;
+}
+._1jgl8s50-3-5-0 ._1mr4xg7f-3-5-0:active {
+  background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
+}
+._1jgl8s50-3-5-0 ._1mr4xg7f-3-5-0:focus {
+  opacity: 1;
+}
+._1mr4xg7g-3-5-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg7g-3-4-0:hover {
+._1mr4xg7g-3-5-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   box-shadow: 0 0 0 2px var(--dt-colors-background-container-neutral-default, #f2f2f5);
+}
+._1jgl8s50-3-5-0 ._1mr4xg7g-3-5-0 {
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
+  left: var(--dt-spacings-size-2, 2px);
+}
+._1jgl8s50-3-5-0 ._1mr4xg7g-3-5-0:hover {
+  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+  box-shadow: none;
+}
+._1jgl8s50-3-5-0 ._1mr4xg7g-3-5-0:active {
+  background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.sty.js

@@ -1,20 +1,21 @@
+import "../../../core/components/app-root/AppRoot.css";
 import "../../../core/styles/focusRingStatic.css";
 import "./SidebarLayout.css";
-var collapseButton = "_1mr4xg7f-3-4-0 _1mr4xg7e-3-4-0";
-var collapseButtonContainer = "_1mr4xg7c-3-4-0";
-var collapsedSidebar = "_1mr4xg75-3-4-0";
-var collapsedSidebarWrapper = "_1mr4xg71-3-4-0";
-var content = "_1mr4xg73-3-4-0";
-var drawer = "_1mr4xg77-3-4-0";
-var drawerContent = "_1mr4xg79-3-4-0";
-var drawerContentContainer = "_1mr4xg78-3-4-0";
-var drawerHeader = "_1mr4xg7a-3-4-0";
-var expandButton = "_1mr4xg7g-3-4-0 _1mr4xg7e-3-4-0";
-var expandButtonContainer = "_1mr4xg7d-3-4-0";
-var hint = "_1mr4xg76-3-4-0 _z0fq9b4-3-4-0 _z0fq9bc-3-4-0 _z0fq9b6-3-4-0 _z0fq9bb-3-4-0";
-var layoutRoot = "_1mr4xg70-3-4-0";
-var panel = "_1mr4xg72-3-4-0";
-var resizeHandle = "_1mr4xg74-3-4-0";
+var collapseButton = "_1mr4xg7f-3-5-0 _1mr4xg7e-3-5-0";
+var collapseButtonContainer = "_1mr4xg7c-3-5-0";
+var collapsedSidebar = "_1mr4xg75-3-5-0";
+var collapsedSidebarWrapper = "_1mr4xg71-3-5-0";
+var content = "_1mr4xg73-3-5-0";
+var drawer = "_1mr4xg77-3-5-0";
+var drawerContent = "_1mr4xg79-3-5-0";
+var drawerContentContainer = "_1mr4xg78-3-5-0";
+var drawerHeader = "_1mr4xg7a-3-5-0";
+var expandButton = "_1mr4xg7g-3-5-0 _1mr4xg7e-3-5-0";
+var expandButtonContainer = "_1mr4xg7d-3-5-0";
+var hint = "_1mr4xg76-3-5-0 _z0fq9b4-3-5-0 _z0fq9bd-3-5-0 _z0fq9b6-3-5-0 _z0fq9bc-3-5-0";
+var layoutRoot = "_1mr4xg70-3-5-0";
+var panel = "_1mr4xg72-3-5-0";
+var resizeHandle = "_1mr4xg74-3-5-0";
 export {
   collapseButton,
   collapseButtonContainer,

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/sidebar-layout/SidebarLayout.css.ts"],
-  "sourcesContent": ["import '../../../core/styles/focusRingStatic.css';\nimport './SidebarLayout.css';\nexport var collapseButton = '_1mr4xg7f-3-4-0 _1mr4xg7e-3-4-0';\nexport var collapseButtonContainer = '_1mr4xg7c-3-4-0';\nexport var collapsedSidebar = '_1mr4xg75-3-4-0';\nexport var collapsedSidebarWrapper = '_1mr4xg71-3-4-0';\nexport var content = '_1mr4xg73-3-4-0';\nexport var drawer = '_1mr4xg77-3-4-0';\nexport var drawerContent = '_1mr4xg79-3-4-0';\nexport var drawerContentContainer = '_1mr4xg78-3-4-0';\nexport var drawerHeader = '_1mr4xg7a-3-4-0';\nexport var expandButton = '_1mr4xg7g-3-4-0 _1mr4xg7e-3-4-0';\nexport var expandButtonContainer = '_1mr4xg7d-3-4-0';\nexport var hint = '_1mr4xg76-3-4-0 _z0fq9b4-3-4-0 _z0fq9bc-3-4-0 _z0fq9b6-3-4-0 _z0fq9bb-3-4-0';\nexport var layoutRoot = '_1mr4xg70-3-4-0';\nexport var panel = '_1mr4xg72-3-4-0';\nexport var resizeHandle = '_1mr4xg74-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,0BAA0B;AAC9B,IAAI,mBAAmB;AACvB,IAAI,0BAA0B;AAC9B,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,yBAAyB;AAC7B,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,aAAa;AACjB,IAAI,QAAQ;AACZ,IAAI,eAAe;",
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/focusRingStatic.css';\nimport './SidebarLayout.css';\nexport var collapseButton = '_1mr4xg7f-3-5-0 _1mr4xg7e-3-5-0';\nexport var collapseButtonContainer = '_1mr4xg7c-3-5-0';\nexport var collapsedSidebar = '_1mr4xg75-3-5-0';\nexport var collapsedSidebarWrapper = '_1mr4xg71-3-5-0';\nexport var content = '_1mr4xg73-3-5-0';\nexport var drawer = '_1mr4xg77-3-5-0';\nexport var drawerContent = '_1mr4xg79-3-5-0';\nexport var drawerContentContainer = '_1mr4xg78-3-5-0';\nexport var drawerHeader = '_1mr4xg7a-3-5-0';\nexport var expandButton = '_1mr4xg7g-3-5-0 _1mr4xg7e-3-5-0';\nexport var expandButtonContainer = '_1mr4xg7d-3-5-0';\nexport var hint = '_1mr4xg76-3-5-0 _z0fq9b4-3-5-0 _z0fq9bd-3-5-0 _z0fq9b6-3-5-0 _z0fq9bc-3-5-0';\nexport var layoutRoot = '_1mr4xg70-3-5-0';\nexport var panel = '_1mr4xg72-3-5-0';\nexport var resizeHandle = '_1mr4xg74-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,0BAA0B;AAC9B,IAAI,mBAAmB;AACvB,IAAI,0BAA0B;AAC9B,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,yBAAyB;AAC7B,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,aAAa;AACjB,IAAI,QAAQ;AACZ,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/shared/resize-handle-styles.js

@@ -0,0 +1,50 @@
+import Borders from "@dynatrace/strato-design-tokens/borders";
+import Colors from "@dynatrace/strato-design-tokens/colors";
+import Easings from "@dynatrace/strato-design-tokens/easings";
+import Spacings from "@dynatrace/strato-design-tokens/spacings";
+import Timings from "@dynatrace/strato-design-tokens/timings";
+import { vrResizeHandleOverrides } from "./visual-refresh-overrides.js";
+const resizeHandleStyles = {
+  backgroundColor: Colors.Border.Neutral.Accent,
+  border: "none",
+  borderRadius: Borders.Radius.Field.Default,
+  cursor: "col-resize",
+  height: Spacings.Size36,
+  left: "3px",
+  margin: 0,
+  padding: 0,
+  touchAction: "none",
+  transition: `height ${Timings.Base.Default} ${Easings.FastInSlowOut}`,
+  width: "2px",
+  selectors: {
+    "&:focus-visible": {
+      width: "100%"
+    },
+    // If we click the handle we don't want to apply the extra handling for the boxShadow
+    "&:hover&:focus-visible": {
+      width: "2px"
+    },
+    "&:focus-visible, &:hover": {
+      height: Spacings.Size48,
+      backgroundColor: Colors.Border.Neutral.AccentHover
+    },
+    // The resizing ref is applied to the actual handle to manage the focus state by the ref.
+    // However, this would make only the handle resizable and not the whole separator, hence the after element.
+    "&:after": {
+      content: '""',
+      display: "block",
+      height: "100%",
+      left: "50%",
+      position: "absolute",
+      top: 0,
+      transform: "translateX(-50%)",
+      userSelect: "none",
+      width: "100%"
+    },
+    ...vrResizeHandleOverrides
+  }
+};
+export {
+  resizeHandleStyles
+};
+//# sourceMappingURL=resize-handle-styles.js.map

package/esm/layouts/shared/resize-handle-styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/shared/resize-handle-styles.ts"],
+  "sourcesContent": ["import type { StyleRule } from '@vanilla-extract/css';\n\nimport Borders from '@dynatrace/strato-design-tokens/borders';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport Easings from '@dynatrace/strato-design-tokens/easings';\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport Timings from '@dynatrace/strato-design-tokens/timings';\n\nimport { vrResizeHandleOverrides } from './visual-refresh-overrides.js';\n\nexport const resizeHandleStyles = {\n  backgroundColor: Colors.Border.Neutral.Accent,\n  border: 'none',\n  borderRadius: Borders.Radius.Field.Default,\n  cursor: 'col-resize',\n  height: Spacings.Size36,\n  left: '3px',\n  margin: 0,\n  padding: 0,\n  touchAction: 'none',\n  transition: `height ${Timings.Base.Default} ${Easings.FastInSlowOut}`,\n  width: '2px',\n  selectors: {\n    '&:focus-visible': {\n      width: '100%',\n    },\n    // If we click the handle we don't want to apply the extra handling for the boxShadow\n    '&:hover&:focus-visible': {\n      width: '2px',\n    },\n    '&:focus-visible, &:hover': {\n      height: Spacings.Size48,\n      backgroundColor: Colors.Border.Neutral.AccentHover,\n    },\n    // The resizing ref is applied to the actual handle to manage the focus state by the ref.\n    // However, this would make only the handle resizable and not the whole separator, hence the after element.\n    '&:after': {\n      content: '\"\"',\n      display: 'block',\n      height: '100%',\n      left: '50%',\n      position: 'absolute',\n      top: 0,\n      transform: 'translateX(-50%)',\n      userSelect: 'none',\n      width: '100%',\n    },\n    ...vrResizeHandleOverrides,\n  },\n} satisfies StyleRule;\n"],
+  "mappings": "AAEA,OAAO,aAAa;AACpB,OAAO,YAAY;AACnB,OAAO,aAAa;AACpB,OAAO,cAAc;AACrB,OAAO,aAAa;AAEpB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB;AAAA,EAChC,iBAAiB,OAAO,OAAO,QAAQ;AAAA,EACvC,QAAQ;AAAA,EACR,cAAc,QAAQ,OAAO,MAAM;AAAA,EACnC,QAAQ;AAAA,EACR,QAAQ,SAAS;AAAA,EACjB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY,UAAU,QAAQ,KAAK,OAAO,IAAI,QAAQ,aAAa;AAAA,EACnE,OAAO;AAAA,EACP,WAAW;AAAA,IACT,mBAAmB;AAAA,MACjB,OAAO;AAAA,IACT;AAAA;AAAA,IAEA,0BAA0B;AAAA,MACxB,OAAO;AAAA,IACT;AAAA,IACA,4BAA4B;AAAA,MAC1B,QAAQ,SAAS;AAAA,MACjB,iBAAiB,OAAO,OAAO,QAAQ;AAAA,IACzC;AAAA;AAAA;AAAA,IAGA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,MACV,KAAK;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,OAAO;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EACL;AACF;",
+  "names": []
+}

package/esm/layouts/shared/visual-refresh-overrides.js

@@ -0,0 +1,46 @@
+import Borders from "@dynatrace/strato-design-tokens/borders";
+import Colors from "@dynatrace/strato-design-tokens/colors";
+import Spacings from "@dynatrace/strato-design-tokens/spacings";
+import { dtVisualRefreshEnabled } from "../../core/components/app-root/AppRoot.sty.js";
+const vrResizeHandleContainerBaseOverrides = {
+  backgroundColor: Colors.Background.Base.Default,
+  backgroundImage: `linear-gradient(${Colors.Border.Neutral.Subdued}, ${Colors.Border.Neutral.Subdued})`,
+  backgroundSize: `${Borders.Width.Default} 100%`,
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "center",
+  borderRadius: 0,
+  height: "100%",
+  width: Spacings.Size8,
+  left: 0,
+  transition: "none"
+};
+const vrResizeHandleContainerInteractionOverrides = {
+  [`.${dtVisualRefreshEnabled} &:hover`]: {
+    backgroundImage: `linear-gradient(${Colors.Border.Neutral.SubduedHover}, ${Colors.Border.Neutral.SubduedHover})`
+  },
+  [`.${dtVisualRefreshEnabled} &:active`]: {
+    backgroundImage: `linear-gradient(${Colors.Border.Neutral.SubduedActive}, ${Colors.Border.Neutral.SubduedActive})`
+  }
+};
+const vrResizeHandleContainerOverrides = {
+  [`.${dtVisualRefreshEnabled} &`]: vrResizeHandleContainerBaseOverrides,
+  ...vrResizeHandleContainerInteractionOverrides
+};
+const vrResizeHandleOverrides = {
+  [`.${dtVisualRefreshEnabled} &`]: {
+    width: 0,
+    cursor: "ew-resize"
+  }
+};
+const vrResizeHandleFocusOverrides = {
+  backgroundImage: `linear-gradient(${Colors.Border.Neutral.Accent}, ${Colors.Border.Neutral.Accent})`,
+  backgroundSize: `${Borders.Width.Emphasized} 100%`
+};
+export {
+  vrResizeHandleContainerBaseOverrides,
+  vrResizeHandleContainerInteractionOverrides,
+  vrResizeHandleContainerOverrides,
+  vrResizeHandleFocusOverrides,
+  vrResizeHandleOverrides
+};
+//# sourceMappingURL=visual-refresh-overrides.js.map

package/esm/layouts/shared/visual-refresh-overrides.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/shared/visual-refresh-overrides.ts"],
+  "sourcesContent": ["import Borders from '@dynatrace/strato-design-tokens/borders';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { dtVisualRefreshEnabled } from '../../core/components/app-root/AppRoot.sty.js';\n\nexport const vrResizeHandleContainerBaseOverrides = {\n  backgroundColor: Colors.Background.Base.Default,\n  backgroundImage: `linear-gradient(${Colors.Border.Neutral.Subdued}, ${Colors.Border.Neutral.Subdued})`,\n  backgroundSize: `${Borders.Width.Default} 100%`,\n  backgroundRepeat: 'no-repeat',\n  backgroundPosition: 'center',\n  borderRadius: 0,\n  height: '100%',\n  width: Spacings.Size8,\n  left: 0,\n  transition: 'none',\n};\n\nexport const vrResizeHandleContainerInteractionOverrides = {\n  [`.${dtVisualRefreshEnabled} &:hover`]: {\n    backgroundImage: `linear-gradient(${Colors.Border.Neutral.SubduedHover}, ${Colors.Border.Neutral.SubduedHover})`,\n  },\n  [`.${dtVisualRefreshEnabled} &:active`]: {\n    backgroundImage: `linear-gradient(${Colors.Border.Neutral.SubduedActive}, ${Colors.Border.Neutral.SubduedActive})`,\n  },\n};\n\nexport const vrResizeHandleContainerOverrides = {\n  [`.${dtVisualRefreshEnabled} &`]: vrResizeHandleContainerBaseOverrides,\n  ...vrResizeHandleContainerInteractionOverrides,\n};\n\nexport const vrResizeHandleOverrides = {\n  [`.${dtVisualRefreshEnabled} &`]: {\n    width: 0,\n    cursor: 'ew-resize',\n  },\n};\n\nexport const vrResizeHandleFocusOverrides = {\n  backgroundImage: `linear-gradient(${Colors.Border.Neutral.Accent}, ${Colors.Border.Neutral.Accent})`,\n  backgroundSize: `${Borders.Width.Emphasized} 100%`,\n};\n"],
+  "mappings": "AAAA,OAAO,aAAa;AACpB,OAAO,YAAY;AACnB,OAAO,cAAc;AAErB,SAAS,8BAA8B;AAEhC,MAAM,uCAAuC;AAAA,EAClD,iBAAiB,OAAO,WAAW,KAAK;AAAA,EACxC,iBAAiB,mBAAmB,OAAO,OAAO,QAAQ,OAAO,KAAK,OAAO,OAAO,QAAQ,OAAO;AAAA,EACnG,gBAAgB,GAAG,QAAQ,MAAM,OAAO;AAAA,EACxC,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,OAAO,SAAS;AAAA,EAChB,MAAM;AAAA,EACN,YAAY;AACd;AAEO,MAAM,8CAA8C;AAAA,EACzD,CAAC,IAAI,sBAAsB,UAAU,GAAG;AAAA,IACtC,iBAAiB,mBAAmB,OAAO,OAAO,QAAQ,YAAY,KAAK,OAAO,OAAO,QAAQ,YAAY;AAAA,EAC/G;AAAA,EACA,CAAC,IAAI,sBAAsB,WAAW,GAAG;AAAA,IACvC,iBAAiB,mBAAmB,OAAO,OAAO,QAAQ,aAAa,KAAK,OAAO,OAAO,QAAQ,aAAa;AAAA,EACjH;AACF;AAEO,MAAM,mCAAmC;AAAA,EAC9C,CAAC,IAAI,sBAAsB,IAAI,GAAG;AAAA,EAClC,GAAG;AACL;AAEO,MAAM,0BAA0B;AAAA,EACrC,CAAC,IAAI,sBAAsB,IAAI,GAAG;AAAA,IAChC,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,+BAA+B;AAAA,EAC1C,iBAAiB,mBAAmB,OAAO,OAAO,QAAQ,MAAM,KAAK,OAAO,OAAO,QAAQ,MAAM;AAAA,EACjG,gBAAgB,GAAG,QAAQ,MAAM,UAAU;AAC7C;",
+  "names": []
+}