@dynatrace/strato-components 3.1.1 → 3.2.0

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

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useGesture } from "@use-gesture/react";
+import { clsx } from "clsx";
+import {
+  forwardRef,
+  useRef,
+  useState,
+  memo
+} from "react";
+import * as styles from "./Overlay.sty.js";
+import { useFocusRing } from "../../../core/styles/useFocusRing.js";
+import { clamp } from "../../split-layout/width-utils.js";
+const OVERLAY_HANDLE_WIDTH = 8;
+const Overlay = memo(
+  forwardRef((props, forwardedRef) => {
+    const {
+      children,
+      className,
+      style,
+      minWidth = 200,
+      maxWidth = Infinity,
+      defaultWidth = 300,
+      resizable = true,
+      onResize,
+      ...restProps
+    } = props;
+    const containerRef = useRef(null);
+    const handleRef = useRef(null);
+    const { focusProps, focusClassName } = useFocusRing({ focusWithin: true });
+    const dragStartWidth = useRef(null);
+    const maxContentWidth = maxWidth;
+    const clampContentWidth = (width) => clamp(minWidth, width, maxContentWidth);
+    const clampedDefaultWidth = clampContentWidth(defaultWidth);
+    const [resizedWidth, setResizedWidth] = useState(null);
+    const contentWidth = resizedWidth === null ? clampedDefaultWidth : clampContentWidth(resizedWidth);
+    const overlayWidth = resizable ? contentWidth + OVERLAY_HANDLE_WIDTH : contentWidth;
+    useGesture(
+      {
+        onDragStart: () => {
+          dragStartWidth.current = clampContentWidth(contentWidth);
+        },
+        onDragEnd: () => {
+          dragStartWidth.current = null;
+        },
+        onDrag: (state) => {
+          if (dragStartWidth.current === null) {
+            return;
+          }
+          const nextWidth = clamp(
+            minWidth,
+            dragStartWidth.current + state.movement[0] * -1,
+            maxContentWidth
+          );
+          setResizedWidth(nextWidth);
+          onResize?.(nextWidth);
+        }
+      },
+      { target: handleRef }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.overlay,
+        style: { ...style, width: overlayWidth },
+        ref: containerRef,
+        children: [
+          resizable ? /* @__PURE__ */ jsx("div", { className: styles.handleContainer, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...focusProps,
+              role: "separator",
+              ref: handleRef,
+              className: clsx(styles.handle, focusClassName),
+              tabIndex: 0
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...restProps,
+              ref: forwardedRef,
+              className: clsx(styles.overlayContent, className),
+              children
+            }
+          )
+        ]
+      }
+    );
+  })
+);
+Overlay.displayName = "Overlay";
+export {
+  OVERLAY_HANDLE_WIDTH,
+  Overlay
+};
+//# sourceMappingURL=Overlay.js.map

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

@@ -0,0 +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({ focusWithin: true });\n\n    const dragStartWidth = useRef<number | null>(null);\n    const maxContentWidth = maxWidth;\n    const clampContentWidth = (width: number) =>\n      clamp(minWidth, width, maxContentWidth);\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            maxContentWidth,\n          );\n          setResizedWidth(nextWidth);\n          onResize?.(nextWidth);\n        },\n      },\n      { target: handleRef },\n    );\n\n    return (\n      <div\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": "AA0FM,SAOM,KAPN;AA1FN,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,EAAE,aAAa,KAAK,CAAC;AAEzE,UAAM,iBAAiB,OAAsB,IAAI;AACjD,UAAM,kBAAkB;AACxB,UAAM,oBAAoB,CAAC,UACzB,MAAM,UAAU,OAAO,eAAe;AACxC,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,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;",
+  "names": []
+}

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

@@ -0,0 +1,12 @@
+import "./Overlay.css";
+var handle = "_15qr1eq3-3-2-0";
+var handleContainer = "_15qr1eq2-3-2-0";
+var overlay = "_15qr1eq0-3-2-0";
+var overlayContent = "_15qr1eq1-3-2-0";
+export {
+  handle,
+  handleContainer,
+  overlay,
+  overlayContent
+};
+//# sourceMappingURL=Overlay.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/details-layout/Overlay.css.ts"],
+  "sourcesContent": ["import './Overlay.css';\nexport var handle = '_15qr1eq3-3-2-0';\nexport var handleContainer = '_15qr1eq2-3-2-0';\nexport var overlay = '_15qr1eq0-3-2-0';\nexport var overlayContent = '_15qr1eq1-3-2-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,kBAAkB;AACtB,IAAI,UAAU;AACd,IAAI,iBAAiB;",
+  "names": []
+}

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

@@ -0,0 +1,101 @@
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  memo
+} from "react";
+import {
+  DetailsControlBar
+} from "./DetailsControlBar.js";
+const DetailsSlotBase = memo(
+  forwardRef((_props, _ref) => null)
+);
+const DetailsSlot = Object.assign(DetailsSlotBase, {
+  ControlBar: DetailsControlBar
+});
+const ContentSlot = memo(
+  forwardRef((_props, _ref) => null)
+);
+function isDetailsSlot(element) {
+  return element.type === DetailsSlot;
+}
+function isContentSlot(element) {
+  return element.type === ContentSlot;
+}
+function extractSlotsProps(children) {
+  let details = null;
+  let content = null;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+    if (isDetailsSlot(child)) {
+      if (details) {
+        throw new Error("DetailsLayout: only one Details slot is allowed");
+      }
+      const {
+        children: detailsChildren,
+        minWidth = 320,
+        maxWidth = "50%",
+        defaultWidth = "25%",
+        resizable = true,
+        collapsed,
+        defaultCollapsed = false,
+        onCollapsedChange,
+        layout,
+        defaultLayout = "split",
+        onLayoutChange,
+        breakpoint = 600,
+        onResize,
+        ...domProps
+      } = child.props;
+      details = {
+        children: detailsChildren,
+        config: {
+          minWidth,
+          maxWidth,
+          defaultWidth,
+          resizable,
+          collapsed,
+          defaultCollapsed,
+          onCollapsedChange,
+          layout,
+          defaultLayout,
+          onLayoutChange,
+          breakpoint,
+          onResize
+        },
+        domProps,
+        ref: "ref" in child ? child.ref : void 0
+      };
+      return;
+    }
+    if (isContentSlot(child)) {
+      if (content) {
+        throw new Error("DetailsLayout: only one Content slot is allowed");
+      }
+      const {
+        children: contentChildren,
+        minWidth = 0,
+        ...domProps
+      } = child.props;
+      content = {
+        children: contentChildren,
+        config: { minWidth },
+        domProps,
+        ref: "ref" in child ? child.ref : void 0
+      };
+      return;
+    }
+  });
+  if (!content) {
+    throw new Error("DetailsLayout: Content slot is required");
+  }
+  return { details, content };
+}
+export {
+  ContentSlot,
+  DetailsSlot,
+  extractSlotsProps
+};
+//# sourceMappingURL=slots.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/details-layout/slots.ts"],
+  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  memo,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport {\n  DetailsControlBar,\n  type DetailsControlBarProps,\n} from './DetailsControlBar.js';\nimport type { LayoutMode } from './DetailsLayoutContext.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type {\n  PanelProps as SplitPanelProps,\n  ContentProps as SplitContentProps,\n} from '../../split-layout/SplitLayout.js';\nimport type { PanelWidth } from '../../split-layout/width-utils.js';\n\n/** @internal */\nexport interface DetailsProps extends SplitPanelProps, MaskingProps {\n  /** Whether the details panel is collapsed (controlled). */\n  collapsed?: boolean;\n  /**\n   * Default value for the collapsed state (uncontrolled).\n   * @defaultValue false\n   */\n  defaultCollapsed?: boolean;\n  /** Fired when the collapsed state changes or should change. */\n  onCollapsedChange?: (value: boolean) => void;\n  /** The current layout mode of the details panel (controlled). */\n  layout?: LayoutMode;\n  /**\n   * Default layout mode of the details panel (uncontrolled).\n   * @defaultValue 'split'\n   */\n  defaultLayout?: LayoutMode;\n  /** Fired when the layout mode changes or should change. */\n  onLayoutChange?: (value: LayoutMode) => void;\n  /**\n   * Container width in pixels below which the details panel renders as an overlay instead of a split layout.\n   * @defaultValue 600\n   */\n  breakpoint?: number;\n}\nconst DetailsSlotBase = memo(\n  forwardRef<HTMLDivElement, DetailsProps>((_props, _ref) => null),\n);\n\n/** @internal */\nexport const DetailsSlot = Object.assign(DetailsSlotBase, {\n  ControlBar: DetailsControlBar,\n});\n\nexport type { DetailsControlBarProps };\n\n/** @internal */\nexport type ContentProps = SplitContentProps;\n/** @internal */\nexport const ContentSlot = memo(\n  forwardRef<HTMLDivElement, ContentProps>((_props, _ref) => null),\n);\n\nfunction isDetailsSlot(\n  element: ReactElement,\n): element is ReactElement<DetailsProps> {\n  return element.type === DetailsSlot;\n}\n\nfunction isContentSlot(\n  element: ReactElement,\n): element is ReactElement<ContentProps> {\n  return element.type === ContentSlot;\n}\n\n/** @internal */\nexport interface ExtractedDetailsSlot {\n  children?: ReactNode;\n  config: {\n    minWidth: PanelWidth;\n    maxWidth: PanelWidth;\n    defaultWidth: PanelWidth;\n    resizable: boolean;\n    collapsed?: boolean;\n    defaultCollapsed: boolean;\n    onCollapsedChange?: (value: boolean) => void;\n    layout?: LayoutMode;\n    defaultLayout: LayoutMode;\n    onLayoutChange?: (value: LayoutMode) => void;\n    breakpoint: number;\n    onResize?: (value: number) => void;\n  };\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** @internal */\nexport interface ExtractedContentSlot {\n  children?: ReactNode;\n  config: { minWidth: PanelWidth };\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** @internal */\nexport function extractSlotsProps(children: ReactNode): {\n  details: ExtractedDetailsSlot | null;\n  content: ExtractedContentSlot;\n} {\n  let details: ExtractedDetailsSlot | null = null;\n  let content: ExtractedContentSlot | null = null;\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    if (isDetailsSlot(child)) {\n      if (details) {\n        throw new Error('DetailsLayout: only one Details slot is allowed');\n      }\n\n      const {\n        children: detailsChildren,\n        minWidth = 320,\n        maxWidth = '50%',\n        defaultWidth = '25%',\n        resizable = true,\n        collapsed,\n        defaultCollapsed = false,\n        onCollapsedChange,\n        layout,\n        defaultLayout = 'split',\n        onLayoutChange,\n        breakpoint = 600,\n        onResize,\n        ...domProps\n      } = child.props;\n\n      details = {\n        children: detailsChildren,\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,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n      return;\n    }\n\n    if (isContentSlot(child)) {\n      if (content) {\n        throw new Error('DetailsLayout: only one Content slot is allowed');\n      }\n\n      const {\n        children: contentChildren,\n        minWidth = 0,\n        ...domProps\n      } = child.props;\n\n      content = {\n        children: contentChildren,\n        config: { minWidth },\n        domProps,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n      return;\n    }\n  });\n\n  if (!content) {\n    throw new Error('DetailsLayout: Content slot is required');\n  }\n\n  return { details, content };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAEP;AAAA,EACE;AAAA,OAEK;AAmCP,MAAM,kBAAkB;AAAA,EACtB,WAAyC,CAAC,QAAQ,SAAS,IAAI;AACjE;AAGO,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD,YAAY;AACd,CAAC;AAOM,MAAM,cAAc;AAAA,EACzB,WAAyC,CAAC,QAAQ,SAAS,IAAI;AACjE;AAEA,SAAS,cACP,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AAEA,SAAS,cACP,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AAgCO,SAAS,kBAAkB,UAGhC;AACA,MAAI,UAAuC;AAC3C,MAAI,UAAuC;AAE3C,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,CAAC,eAAe,KAAK,GAAG;AAC1B;AAAA,IACF;AAEA,QAAI,cAAc,KAAK,GAAG;AACxB,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,iDAAiD;AAAA,MACnE;AAEA,YAAM;AAAA,QACJ,UAAU;AAAA,QACV,WAAW;AAAA,QACX,WAAW;AAAA,QACX,eAAe;AAAA,QACf,YAAY;AAAA,QACZ;AAAA,QACA,mBAAmB;AAAA,QACnB;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA,GAAG;AAAA,MACL,IAAI,MAAM;AAEV,gBAAU;AAAA,QACR,UAAU;AAAA,QACV,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;AAAA,QACA,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AACA;AAAA,IACF;AAEA,QAAI,cAAc,KAAK,GAAG;AACxB,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,iDAAiD;AAAA,MACnE;AAEA,YAAM;AAAA,QACJ,UAAU;AAAA,QACV,WAAW;AAAA,QACX,GAAG;AAAA,MACL,IAAI,MAAM;AAEV,gBAAU;AAAA,QACR,UAAU;AAAA,QACV,QAAQ,EAAE,SAAS;AAAA,QACnB;AAAA,QACA,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC3D;AAEA,SAAO,EAAE,SAAS,QAAQ;AAC5B;",
+  "names": []
+}

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

@@ -0,0 +1,59 @@
+import { useRef, useState } from "react";
+import useResizeObserver from "use-resize-observer";
+import { useControllableState } from "../../../core/hooks/useControllableState.js";
+function useLayoutState({
+  details,
+  containerRef
+}) {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [preferredLayoutMode, setPreferredLayoutMode] = useControllableState({
+    value: details?.config.layout,
+    defaultValue: details?.config.defaultLayout,
+    onChange: details?.config.onLayoutChange
+  });
+  const [collapsed, setCollapsed] = useControllableState({
+    value: details?.config.collapsed,
+    defaultValue: details?.config.defaultCollapsed ?? false,
+    onChange: details?.config.onCollapsedChange
+  });
+  const prevBelowBreakpointRef = useRef(null);
+  useResizeObserver({
+    ref: containerRef,
+    onResize: (size) => {
+      if (!size.width || !details) {
+        return;
+      }
+      setContainerWidth(size.width);
+      const isBelowBreakpoint2 = size.width < details.config.breakpoint;
+      const prevBelowBreakpoint = prevBelowBreakpointRef.current;
+      prevBelowBreakpointRef.current = isBelowBreakpoint2;
+      if (prevBelowBreakpoint === isBelowBreakpoint2) {
+        return;
+      }
+      setCollapsed(isBelowBreakpoint2);
+    }
+  });
+  let isBelowBreakpoint = false;
+  if (details && containerWidth !== 0 && containerWidth < details.config.breakpoint) {
+    isBelowBreakpoint = true;
+  }
+  let mode = !details ? "collapsed" : preferredLayoutMode ?? "split";
+  if (collapsed) {
+    mode = "collapsed";
+  }
+  if (isBelowBreakpoint) {
+    mode = "drawer";
+  }
+  return {
+    containerWidth,
+    collapsed,
+    setCollapsed,
+    preferredLayoutMode,
+    setPreferredLayoutMode,
+    mode
+  };
+}
+export {
+  useLayoutState
+};
+//# sourceMappingURL=useLayoutState.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/details-layout/useLayoutState.ts"],
+  "sourcesContent": ["import { useRef, useState, type RefObject } from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport type { ExtractedDetailsSlot } from './slots.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\n\ntype RenderedLayout = 'split' | 'collapsed' | 'overlay' | 'drawer';\n\n/** @internal */\nexport function useLayoutState({\n  details,\n  containerRef,\n}: {\n  details: ExtractedDetailsSlot | null;\n  containerRef: RefObject<HTMLDivElement>;\n}) {\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  const [preferredLayoutMode, setPreferredLayoutMode] = useControllableState({\n    value: details?.config.layout,\n    defaultValue: details?.config.defaultLayout,\n    onChange: details?.config.onLayoutChange,\n  });\n\n  const [collapsed, setCollapsed] = useControllableState({\n    value: details?.config.collapsed,\n    defaultValue: details?.config.defaultCollapsed ?? false,\n    onChange: details?.config.onCollapsedChange,\n  });\n\n  /**\n   * Tracks whether the container was below the breakpoint on the previous\n   * resize event. `null` means no measurement has been taken yet.\n   *\n   * We only force-collapse/expand when the container *crosses* the\n   * breakpoint threshold. Without this guard, any resize event while the\n   * container stays on the same side of the breakpoint (e.g. a re-measure\n   * triggered by a DOM layout change after a mode switch) would call\n   * `setCollapsed(false)` and silently undo a user-initiated collapse.\n   */\n  const prevBelowBreakpointRef = useRef<boolean | null>(null);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: (size) => {\n      if (!size.width || !details) {\n        return;\n      }\n\n      setContainerWidth(size.width);\n\n      const isBelowBreakpoint = size.width < details.config.breakpoint;\n      const prevBelowBreakpoint = prevBelowBreakpointRef.current;\n      prevBelowBreakpointRef.current = isBelowBreakpoint;\n\n      if (prevBelowBreakpoint === isBelowBreakpoint) {\n        return;\n      }\n\n      setCollapsed(isBelowBreakpoint);\n    },\n  });\n\n  let isBelowBreakpoint = false;\n  if (\n    details &&\n    containerWidth !== 0 &&\n    containerWidth < details.config.breakpoint\n  ) {\n    isBelowBreakpoint = true;\n  }\n\n  let mode: RenderedLayout = !details\n    ? 'collapsed'\n    : preferredLayoutMode ?? 'split';\n  if (collapsed) {\n    mode = 'collapsed';\n  }\n  if (isBelowBreakpoint) {\n    mode = 'drawer';\n  }\n\n  return {\n    containerWidth,\n    collapsed,\n    setCollapsed,\n    preferredLayoutMode,\n    setPreferredLayoutMode,\n    mode,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,QAAQ,gBAAgC;AACjD,OAAO,uBAAuB;AAG9B,SAAS,4BAA4B;AAK9B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAEtD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,qBAAqB;AAAA,IACzE,OAAO,SAAS,OAAO;AAAA,IACvB,cAAc,SAAS,OAAO;AAAA,IAC9B,UAAU,SAAS,OAAO;AAAA,EAC5B,CAAC;AAED,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,IACrD,OAAO,SAAS,OAAO;AAAA,IACvB,cAAc,SAAS,OAAO,oBAAoB;AAAA,IAClD,UAAU,SAAS,OAAO;AAAA,EAC5B,CAAC;AAYD,QAAM,yBAAyB,OAAuB,IAAI;AAE1D,oBAAkB;AAAA,IAChB,KAAK;AAAA,IACL,UAAU,CAAC,SAAS;AAClB,UAAI,CAAC,KAAK,SAAS,CAAC,SAAS;AAC3B;AAAA,MACF;AAEA,wBAAkB,KAAK,KAAK;AAE5B,YAAMA,qBAAoB,KAAK,QAAQ,QAAQ,OAAO;AACtD,YAAM,sBAAsB,uBAAuB;AACnD,6BAAuB,UAAUA;AAEjC,UAAI,wBAAwBA,oBAAmB;AAC7C;AAAA,MACF;AAEA,mBAAaA,kBAAiB;AAAA,IAChC;AAAA,EACF,CAAC;AAED,MAAI,oBAAoB;AACxB,MACE,WACA,mBAAmB,KACnB,iBAAiB,QAAQ,OAAO,YAChC;AACA,wBAAoB;AAAA,EACtB;AAEA,MAAI,OAAuB,CAAC,UACxB,cACA,uBAAuB;AAC3B,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AACA,MAAI,mBAAmB;AACrB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": ["isBelowBreakpoint"]
+}

package/esm/layouts/page-layout/shared/collapsible.js

@@ -0,0 +1 @@
+//# sourceMappingURL=collapsible.js.map

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

@@ -0,0 +1,112 @@
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  memo
+} from "react";
+import {
+  ContentSlot,
+  DetailsSlot
+} from "../details-layout/slots.js";
+import { SidebarSlot } from "../sidebar-layout/slots.js";
+const ProxySlot = memo(
+  forwardRef(() => null)
+);
+ProxySlot.displayName = "PageLayout.Proxy";
+function isSidebarSlot(element) {
+  return element.type === SidebarSlot;
+}
+function isContentSlot(element) {
+  return element.type === ContentSlot;
+}
+function isDetailsSlot(element) {
+  return element.type === DetailsSlot;
+}
+function isProxySlot(element) {
+  return element.type === ProxySlot;
+}
+function extractHorizontalSlots(children, context, { allowProxy = true } = {}) {
+  let sidebar = null;
+  let content = null;
+  let proxy = null;
+  let details = null;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+    if (isSidebarSlot(child)) {
+      if (sidebar) {
+        throw new Error(`${context}: only one Sidebar slot is allowed`);
+      }
+      const { children: slotChildren, ...props } = child.props;
+      sidebar = {
+        children: slotChildren,
+        props,
+        ref: "ref" in child ? child.ref : void 0
+      };
+      return;
+    }
+    if (isContentSlot(child)) {
+      if (content) {
+        throw new Error(`${context}: only one Content slot is allowed`);
+      }
+      if (proxy) {
+        throw new Error(
+          `${context}: Content and Proxy slots are mutually exclusive`
+        );
+      }
+      const { children: slotChildren, ...props } = child.props;
+      content = {
+        children: slotChildren,
+        props,
+        ref: "ref" in child ? child.ref : void 0
+      };
+      return;
+    }
+    if (isProxySlot(child)) {
+      if (!allowProxy) {
+        return;
+      }
+      if (proxy) {
+        throw new Error(`${context}: only one Proxy slot is allowed`);
+      }
+      if (content) {
+        throw new Error(
+          `${context}: Content and Proxy slots are mutually exclusive`
+        );
+      }
+      const { children: slotChildren, ...props } = child.props;
+      proxy = {
+        children: slotChildren,
+        props,
+        ref: "ref" in child ? child.ref : void 0
+      };
+      return;
+    }
+    if (isDetailsSlot(child)) {
+      if (details) {
+        throw new Error(`${context}: only one Details slot is allowed`);
+      }
+      const { children: slotChildren, ...props } = child.props;
+      details = {
+        children: slotChildren,
+        props,
+        ref: "ref" in child ? child.ref : void 0
+      };
+      return;
+    }
+  });
+  if (!content && !proxy) {
+    throw new Error(`${context}: either Content or Proxy slot is required`);
+  }
+  return { sidebar, content, proxy, details };
+}
+export {
+  ProxySlot,
+  extractHorizontalSlots,
+  isContentSlot,
+  isDetailsSlot,
+  isProxySlot,
+  isSidebarSlot
+};
+//# sourceMappingURL=slots.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/shared/slots.ts"],
+  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  memo,\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport {\n  type ContentProps,\n  type DetailsProps,\n  ContentSlot,\n  DetailsSlot,\n} from '../details-layout/slots.js';\nimport { type SidebarProps, SidebarSlot } from '../sidebar-layout/slots.js';\n\nexport type { ContentProps, DetailsProps, SidebarProps };\n\nexport type ExtractedSlot<\n  TProps = object,\n  TRef extends HTMLElement = HTMLDivElement,\n> = {\n  children?: ReactNode;\n  props: TProps;\n  ref?: Ref<TRef>;\n};\n\nexport type ExtractedSidebarSlot = ExtractedSlot<SidebarProps>;\nexport type ExtractedContentSlot = ExtractedSlot<ContentProps>;\nexport type ExtractedDetailsSlot = ExtractedSlot<DetailsProps>;\n\n/** @internal */\nexport interface ProxyProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\nexport type ExtractedProxySlot = ExtractedSlot<ProxyProps>;\n\nexport const ProxySlot = memo(\n  forwardRef<HTMLDivElement, ProxyProps>(() => null),\n);\nProxySlot.displayName = 'PageLayout.Proxy';\n\nexport function isSidebarSlot(\n  element: ReactElement,\n): element is ReactElement<SidebarProps> {\n  return element.type === SidebarSlot;\n}\n\nexport function isContentSlot(\n  element: ReactElement,\n): element is ReactElement<ContentProps> {\n  return element.type === ContentSlot;\n}\n\nexport function isDetailsSlot(\n  element: ReactElement,\n): element is ReactElement<DetailsProps> {\n  return element.type === DetailsSlot;\n}\n\nexport function isProxySlot(\n  element: ReactElement,\n): element is ReactElement<ProxyProps> {\n  return element.type === ProxySlot;\n}\n\n/**\n * Extracts Sidebar, Content, Proxy, and Details slots from `children`.\n *\n * @param children - The children to extract slots from.\n * @param context - Component name used in error messages, e.g. `\"PageLayout.SubLayout\"`.\n * @param options.allowProxy - Whether the Proxy slot is accepted. Defaults to `true`.\n * @internal\n */\nexport function extractHorizontalSlots(\n  children: ReactNode,\n  context: string,\n  { allowProxy = true }: { allowProxy?: boolean } = {},\n): {\n  sidebar: ExtractedSidebarSlot | null;\n  content: ExtractedContentSlot | null;\n  proxy: ExtractedProxySlot | null;\n  details: ExtractedDetailsSlot | null;\n} {\n  let sidebar: ExtractedSidebarSlot | null = null;\n  let content: ExtractedContentSlot | null = null;\n  let proxy: ExtractedProxySlot | null = null;\n  let details: ExtractedDetailsSlot | null = null;\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    if (isSidebarSlot(child)) {\n      if (sidebar) {\n        throw new Error(`${context}: only one Sidebar slot is allowed`);\n      }\n      const { children: slotChildren, ...props } = child.props;\n      sidebar = {\n        children: slotChildren,\n        props,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n      return;\n    }\n\n    if (isContentSlot(child)) {\n      if (content) {\n        throw new Error(`${context}: only one Content slot is allowed`);\n      }\n      if (proxy) {\n        throw new Error(\n          `${context}: Content and Proxy slots are mutually exclusive`,\n        );\n      }\n      const { children: slotChildren, ...props } = child.props;\n      content = {\n        children: slotChildren,\n        props,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n      return;\n    }\n\n    if (isProxySlot(child)) {\n      if (!allowProxy) {\n        return;\n      }\n      if (proxy) {\n        throw new Error(`${context}: only one Proxy slot is allowed`);\n      }\n      if (content) {\n        throw new Error(\n          `${context}: Content and Proxy slots are mutually exclusive`,\n        );\n      }\n      const { children: slotChildren, ...props } = child.props;\n      proxy = {\n        children: slotChildren,\n        props,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n      return;\n    }\n\n    if (isDetailsSlot(child)) {\n      if (details) {\n        throw new Error(`${context}: only one Details slot is allowed`);\n      }\n      const { children: slotChildren, ...props } = child.props;\n      details = {\n        children: slotChildren,\n        props,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n      return;\n    }\n  });\n\n  if (!content && !proxy) {\n    throw new Error(`${context}: either Content or Proxy slot is required`);\n  }\n\n  return { sidebar, content, proxy, details };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAMK;AAEP;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AACP,SAA4B,mBAAmB;AAwBxC,MAAM,YAAY;AAAA,EACvB,WAAuC,MAAM,IAAI;AACnD;AACA,UAAU,cAAc;AAEjB,SAAS,cACd,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AAEO,SAAS,cACd,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AAEO,SAAS,cACd,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AAEO,SAAS,YACd,SACqC;AACrC,SAAO,QAAQ,SAAS;AAC1B;AAUO,SAAS,uBACd,UACA,SACA,EAAE,aAAa,KAAK,IAA8B,CAAC,GAMnD;AACA,MAAI,UAAuC;AAC3C,MAAI,UAAuC;AAC3C,MAAI,QAAmC;AACvC,MAAI,UAAuC;AAE3C,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,CAAC,eAAe,KAAK,GAAG;AAC1B;AAAA,IACF;AAEA,QAAI,cAAc,KAAK,GAAG;AACxB,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,GAAG,OAAO,oCAAoC;AAAA,MAChE;AACA,YAAM,EAAE,UAAU,cAAc,GAAG,MAAM,IAAI,MAAM;AACnD,gBAAU;AAAA,QACR,UAAU;AAAA,QACV;AAAA,QACA,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AACA;AAAA,IACF;AAEA,QAAI,cAAc,KAAK,GAAG;AACxB,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,GAAG,OAAO,oCAAoC;AAAA,MAChE;AACA,UAAI,OAAO;AACT,cAAM,IAAI;AAAA,UACR,GAAG,OAAO;AAAA,QACZ;AAAA,MACF;AACA,YAAM,EAAE,UAAU,cAAc,GAAG,MAAM,IAAI,MAAM;AACnD,gBAAU;AAAA,QACR,UAAU;AAAA,QACV;AAAA,QACA,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AACA;AAAA,IACF;AAEA,QAAI,YAAY,KAAK,GAAG;AACtB,UAAI,CAAC,YAAY;AACf;AAAA,MACF;AACA,UAAI,OAAO;AACT,cAAM,IAAI,MAAM,GAAG,OAAO,kCAAkC;AAAA,MAC9D;AACA,UAAI,SAAS;AACX,cAAM,IAAI;AAAA,UACR,GAAG,OAAO;AAAA,QACZ;AAAA,MACF;AACA,YAAM,EAAE,UAAU,cAAc,GAAG,MAAM,IAAI,MAAM;AACnD,cAAQ;AAAA,QACN,UAAU;AAAA,QACV;AAAA,QACA,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AACA;AAAA,IACF;AAEA,QAAI,cAAc,KAAK,GAAG;AACxB,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,GAAG,OAAO,oCAAoC;AAAA,MAChE;AACA,YAAM,EAAE,UAAU,cAAc,GAAG,MAAM,IAAI,MAAM;AACnD,gBAAU;AAAA,QACR,UAAU;AAAA,QACV;AAAA,QACA,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,CAAC,WAAW,CAAC,OAAO;AACtB,UAAM,IAAI,MAAM,GAAG,OAAO,4CAA4C;AAAA,EACxE;AAEA,SAAO,EAAE,SAAS,SAAS,OAAO,QAAQ;AAC5C;",
+  "names": []
+}

package/esm/layouts/page-layout/shared/useTeleport.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+function useTeleport() {
+  const hostRef = useRef(null);
+  if (hostRef.current === null) {
+    const el = document.createElement("div");
+    el.style.display = "contents";
+    hostRef.current = el;
+  }
+  const host = hostRef.current;
+  return useMemo(
+    () => ({
+      /**
+       * Renders `children` into `host` via a React portal.
+       * Must be rendered exactly **once** and must not be rendered conditionally.
+       */
+      Source: function TeleportSource({ children }) {
+        return createPortal(children, host);
+      },
+      /**
+       * Places the `host` element in the DOM at the point where this
+       * component is mounted. When `Slot` moves between different parents
+       * the DOM node is re-appended without React unmounting it.
+       */
+      Slot: function TeleportSlot() {
+        const ref = useRef(null);
+        useLayoutEffect(() => {
+          const container = ref.current;
+          if (container && host.parentNode !== container) {
+            container.appendChild(host);
+          }
+        });
+        return /* @__PURE__ */ jsx("div", { ref, style: { display: "contents" } });
+      }
+    }),
+    [host]
+  );
+}
+export {
+  useTeleport
+};
+//# sourceMappingURL=useTeleport.js.map

package/esm/layouts/page-layout/shared/useTeleport.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/shared/useTeleport.tsx"],
+  "sourcesContent": ["import { type ReactNode, useLayoutEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\n/**\n * Creates a stable DOM element whose React subtree\n * survives parent re-mounts. Call `Source` once (outside any conditional\n * branches) to declare *what* to render, and place `Slot` wherever the\n * content should appear in the DOM.\n *\n * Because the host `<div>` is created once and only moved via\n * `appendChild` in a `useLayoutEffect`, React never unmounts the\n * subtree when the layout switches between split / overlay / collapsed /\n * drawer modes.\n *\n * @example\n * ```tsx\n * const content = useTeleport();\n * const panel = useTeleport();\n *\n * // Always rendered \u2013 defines *what* goes into each slot.\n * <content.Source>main area</content.Source>\n * <panel.Source>sidebar / details</panel.Source>\n *\n * // Placed in the appropriate layout branch.\n * {mode === 'split' ? <content.Slot /> : null}\n * {mode === 'drawer' ? <panel.Slot /> : null}\n * ```\n *\n * @internal\n */\nexport function useTeleport() {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  if (hostRef.current === null) {\n    const el = document.createElement('div');\n    el.style.display = 'contents';\n    hostRef.current = el;\n  }\n  const host = hostRef.current;\n\n  return useMemo(\n    () => ({\n      /**\n       * Renders `children` into `host` via a React portal.\n       * Must be rendered exactly **once** and must not be rendered conditionally.\n       */\n      Source: function TeleportSource({ children }: { children: ReactNode }) {\n        return createPortal(children, host);\n      },\n\n      /**\n       * Places the `host` element in the DOM at the point where this\n       * component is mounted. When `Slot` moves between different parents\n       * the DOM node is re-appended without React unmounting it.\n       */\n      Slot: function TeleportSlot() {\n        const ref = useRef<HTMLDivElement>(null);\n\n        useLayoutEffect(() => {\n          const container = ref.current;\n          if (container && host.parentNode !== container) {\n            container.appendChild(host);\n          }\n        });\n\n        return <div ref={ref} style={{ display: 'contents' }} />;\n      },\n    }),\n    [host],\n  );\n}\n"],
+  "mappings": "AAgEe;AAhEf,SAAyB,iBAAiB,SAAS,cAAc;AACjE,SAAS,oBAAoB;AA6BtB,SAAS,cAAc;AAC5B,QAAM,UAAU,OAA8B,IAAI;AAClD,MAAI,QAAQ,YAAY,MAAM;AAC5B,UAAM,KAAK,SAAS,cAAc,KAAK;AACvC,OAAG,MAAM,UAAU;AACnB,YAAQ,UAAU;AAAA,EACpB;AACA,QAAM,OAAO,QAAQ;AAErB,SAAO;AAAA,IACL,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKL,QAAQ,SAAS,eAAe,EAAE,SAAS,GAA4B;AACrE,eAAO,aAAa,UAAU,IAAI;AAAA,MACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOA,MAAM,SAAS,eAAe;AAC5B,cAAM,MAAM,OAAuB,IAAI;AAEvC,wBAAgB,MAAM;AACpB,gBAAM,YAAY,IAAI;AACtB,cAAI,aAAa,KAAK,eAAe,WAAW;AAC9C,sBAAU,YAAY,IAAI;AAAA,UAC5B;AAAA,QACF,CAAC;AAED,eAAO,oBAAC,SAAI,KAAU,OAAO,EAAE,SAAS,WAAW,GAAG;AAAA,MACxD;AAAA,IACF;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,111 @@
+._1mr4xg70-3-2-0 {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+._1mr4xg71-3-2-0 {
+  box-sizing: border-box;
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
+  padding: var(--dt-spacings-size-16, 16px);
+  background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
+}
+._1mr4xg72-3-2-0 {
+  box-sizing: border-box;
+  height: 100%;
+  overflow-y: auto;
+  flex-grow: 1;
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
+}
+._1mr4xg73-3-2-0 {
+  background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
+}
+._1mr4xg74-3-2-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);
+}
+._1mr4xg75-3-2-0 {
+  background-color: transparent;
+  border-width: 0;
+  cursor: pointer;
+  height: 100%;
+  padding: 0;
+  position: absolute;
+  inset: 0;
+  transition-duration: var(--dt-animations-hover-duration-base, 150ms);
+  transition-property: background-color, translate;
+  transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
+  width: var(--dt-spacings-size-16, 16px);
+  translate: calc(0px - var(--dt-spacings-size-16, 16px) * 2);
+  border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
+}
+._1mr4xg75-3-2-0:hover, ._1mr4xg75-3-2-0:focus, ._1mr4xg74-3-2-0:hover ._1mr4xg75-3-2-0 {
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  translate: calc(0px - var(--dt-spacings-size-16, 16px) / 2);
+}
+._1mr4xg76-3-2-0 {
+  box-sizing: border-box;
+  padding: 0;
+}
+._1mr4xg77-3-2-0 {
+  box-sizing: border-box;
+  padding: var(--dt-spacings-size-16, 16px);
+  height: 100%;
+}
+._1mr4xg78-3-2-0 {
+  display: flex;
+  gap: var(--dt-spacings-size-4, 4px);
+  padding-inline: var(--dt-spacings-size-8, 8px);
+  padding-top: var(--dt-spacings-size-8, 8px);
+}
+._1mr4xg7a-3-2-0 {
+  --_1mr4xg79-3-2-0: 24px;
+  position: absolute;
+  top: var(--dt-spacings-size-20, 20px);
+  left: -2px;
+  line-height: 0;
+  z-index: 1;
+}
+._1mr4xg7b-3-2-0 {
+  --_1mr4xg79-3-2-0: 24px;
+  position: absolute;
+  top: var(--dt-spacings-size-20, 20px);
+  left: 2px;
+  line-height: 0;
+  z-index: 1;
+}
+._1mr4xg7c-3-2-0 {
+  width: var(--_1mr4xg79-3-2-0);
+  height: var(--_1mr4xg79-3-2-0);
+  box-sizing: border-box;
+}
+._1mr4xg7d-3-2-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);
+  transition-duration: var(--dt-animations-hover-duration-base, 150ms);
+  transition-property: all;
+  transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
+}
+._1mr4xg7d-3-2-0:hover {
+  opacity: 1;
+  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+}
+._1mr4xg7d-3-2-0:focus {
+  opacity: 1;
+}
+._1mr4xg71-3-2-0:hover ~ ._1mr4xg73-3-2-0 ._1mr4xg7d-3-2-0, ._1mr4xg73-3-2-0:hover ._1mr4xg7d-3-2-0 {
+  opacity: 1;
+}
+._1mr4xg7e-3-2-0 {
+  background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
+}
+._1mr4xg7e-3-2-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);
+}