@dynatrace/strato-components 3.13.3 → 3.14.1

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

@@ -0,0 +1,214 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useMemo,
+  useRef
+} from "react";
+import { createPortal } from "react-dom";
+import { usePageLayoutPortalContext } from "./PageLayoutPortalContext.js";
+import {
+  contentDefaults,
+  detailsDefaults,
+  sidebarDefaults
+} from "./slot-defaults.js";
+import { useRegisteredSlot } from "./useRegisteredSlot.js";
+import { useCallbackRef } from "../../../../core/hooks/useCallbackRef.js";
+import { DetailsControlBar } from "../../details-region/DetailsControlBar.js";
+import { DetailsRegionContext } from "../../details-region/DetailsRegionContext.js";
+import { useMountValue } from "../panel-state/useMountValue.js";
+import {
+  useDetailsPanelState,
+  useSidebarPanelState
+} from "../panel-state/usePanelState.js";
+const toRef = (ref) => ref ?? void 0;
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function valuesEqual(a, b) {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (!isPlainObject(a) || !isPlainObject(b)) {
+    return false;
+  }
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) {
+    return false;
+  }
+  return aKeys.every((key) => Object.is(a[key], b[key]));
+}
+function useShallowStable(value) {
+  const ref = useRef(value);
+  const prev = ref.current;
+  const prevKeys = Object.keys(prev);
+  const nextKeys = Object.keys(value);
+  let equal = prevKeys.length === nextKeys.length;
+  if (equal) {
+    for (const key of nextKeys) {
+      if (!valuesEqual(Reflect.get(prev, key), Reflect.get(value, key))) {
+        equal = false;
+        break;
+      }
+    }
+  }
+  if (!equal) {
+    ref.current = value;
+  }
+  return ref.current;
+}
+function useSlotEntry(config, domProps, ref, state) {
+  const stableConfig = useShallowStable(config);
+  const stableDomProps = useShallowStable(domProps);
+  const refValue = toRef(ref);
+  return useMemo(
+    () => ({
+      config: stableConfig,
+      domProps: stableDomProps,
+      ref: refValue,
+      state
+    }),
+    [stableConfig, stableDomProps, refValue, state]
+  );
+}
+const PageLayoutHeader = forwardRef(
+  function PageLayoutHeader2({ children, ...domProps }, ref) {
+    const { hosts } = usePageLayoutPortalContext();
+    const entry = useSlotEntry(
+      {},
+      domProps,
+      ref,
+      void 0
+    );
+    useRegisteredSlot("header", entry);
+    return createPortal(children, hosts.header);
+  }
+);
+const PageLayoutSidebar = forwardRef(
+  function PageLayoutSidebar2({
+    children,
+    defaultWidth = sidebarDefaults.defaultWidth,
+    minWidth = sidebarDefaults.minWidth,
+    maxWidth = sidebarDefaults.maxWidth,
+    resizable = sidebarDefaults.resizable,
+    collapsed,
+    defaultCollapsed = sidebarDefaults.defaultCollapsed,
+    onCollapsedChange,
+    onBreakpointTransition,
+    breakpoint = sidebarDefaults.breakpoint,
+    onResize,
+    label,
+    // `position` is fixed by the layout and the sidebar's `width` is driven
+    // by its own drag state, so neither may reach the rendered element.
+    position: _position,
+    width: _width,
+    ...domProps
+  }, ref) {
+    const { containers, hosts } = usePageLayoutPortalContext();
+    const emitCollapsedChange = useCallbackRef(onCollapsedChange);
+    const emitBreakpointTransition = useCallbackRef(onBreakpointTransition);
+    const emitResize = useCallbackRef(onResize);
+    const mountDefaultWidth = useMountValue(defaultWidth);
+    const config = {
+      defaultWidth: mountDefaultWidth,
+      minWidth,
+      maxWidth,
+      resizable,
+      collapsed,
+      defaultCollapsed,
+      onCollapsedChange: emitCollapsedChange,
+      onBreakpointTransition: emitBreakpointTransition,
+      breakpoint,
+      onResize: emitResize,
+      label
+    };
+    const state = useSidebarPanelState({
+      sidebar: { config },
+      containerRef: containers.sidebar
+    });
+    const entry = useSlotEntry(config, domProps, ref, state);
+    useRegisteredSlot("sidebar", entry);
+    return createPortal(children, hosts.sidebar);
+  }
+);
+const PageLayoutContent = forwardRef(
+  function PageLayoutContent2({
+    children,
+    minWidth = contentDefaults.minWidth,
+    ...domProps
+  }, ref) {
+    const { hosts } = usePageLayoutPortalContext();
+    const entry = useSlotEntry({ minWidth }, domProps, ref, void 0);
+    useRegisteredSlot("content", entry);
+    return createPortal(children, hosts.content);
+  }
+);
+const PageLayoutDetails = forwardRef(
+  function PageLayoutDetails2({
+    children,
+    minWidth = detailsDefaults.minWidth,
+    maxWidth,
+    defaultWidth = detailsDefaults.defaultWidth,
+    resizable = detailsDefaults.resizable,
+    collapsed,
+    defaultCollapsed = detailsDefaults.defaultCollapsed,
+    onCollapsedChange,
+    onBreakpointTransition,
+    layout,
+    defaultLayout = detailsDefaults.defaultLayout,
+    onLayoutChange,
+    breakpoint = detailsDefaults.breakpoint,
+    onResize,
+    width,
+    label,
+    // `position` is fixed by the layout, so it may not reach the rendered
+    // element.
+    position: _position,
+    ...domProps
+  }, ref) {
+    const { containers, hosts } = usePageLayoutPortalContext();
+    const emitCollapsedChange = useCallbackRef(onCollapsedChange);
+    const emitBreakpointTransition = useCallbackRef(onBreakpointTransition);
+    const emitLayoutChange = useCallbackRef(onLayoutChange);
+    const emitResize = useCallbackRef(onResize);
+    const mountDefaultWidth = useMountValue(defaultWidth);
+    const config = {
+      minWidth,
+      maxWidth,
+      defaultWidth: mountDefaultWidth,
+      resizable,
+      collapsed,
+      defaultCollapsed,
+      onCollapsedChange: emitCollapsedChange,
+      onBreakpointTransition: emitBreakpointTransition,
+      layout,
+      defaultLayout,
+      onLayoutChange: emitLayoutChange,
+      breakpoint,
+      onResize: emitResize,
+      width,
+      label
+    };
+    const state = useDetailsPanelState({
+      details: { config },
+      containerRef: containers.details
+    });
+    const entry = useSlotEntry(config, domProps, ref, state);
+    useRegisteredSlot("details", entry);
+    return createPortal(
+      /* @__PURE__ */ jsx(DetailsRegionContext.Provider, { value: state, children }),
+      hosts.details
+    );
+  }
+);
+const PageLayoutDetailsWithControlBar = Object.assign(
+  PageLayoutDetails,
+  { ControlBar: DetailsControlBar }
+);
+export {
+  PageLayoutContent,
+  PageLayoutDetails,
+  PageLayoutDetailsWithControlBar,
+  PageLayoutHeader,
+  PageLayoutSidebar
+};
+//# sourceMappingURL=portal-slots.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/layouts/page-layout/shared/slots/portal-slots.tsx"],
+  "sourcesContent": ["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type PropsWithChildren,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { usePageLayoutPortalContext } from './PageLayoutPortalContext.js';\nimport type { HeaderConfig, SlotEntry } from './slot-config.js';\nimport {\n  contentDefaults,\n  detailsDefaults,\n  sidebarDefaults,\n} from './slot-defaults.js';\nimport { useRegisteredSlot } from './useRegisteredSlot.js';\nimport { useCallbackRef } from '../../../../core/hooks/useCallbackRef.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 type { ContentProps } from '../../../split-layout/slots.js';\nimport { DetailsControlBar } from '../../details-region/DetailsControlBar.js';\nimport { DetailsRegionContext } from '../../details-region/DetailsRegionContext.js';\nimport type { DetailsProps } from '../../details-region/slots.js';\nimport type { SidebarProps } from '../../sidebar-region/slots.js';\nimport { useMountValue } from '../panel-state/useMountValue.js';\nimport {\n  useDetailsPanelState,\n  useSidebarPanelState,\n} from '../panel-state/usePanelState.js';\n\nconst toRef = <T,>(ref: ForwardedRef<T>) => ref ?? undefined;\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\n/**\n * Compares two values of the same key. Plain objects are compared one level\n * deeper, because `style` is a DOM prop consumers write inline: a fresh object\n * of identical values would otherwise change the entry on every render and\n * notify the layout shells, which is the churn `useCallbackRef` already\n * prevents for the callback props.\n */\nfunction valuesEqual(a: unknown, b: unknown): boolean {\n  if (Object.is(a, b)) {\n    return true;\n  }\n  if (!isPlainObject(a) || !isPlainObject(b)) {\n    return false;\n  }\n  const aKeys = Object.keys(a);\n  if (aKeys.length !== Object.keys(b).length) {\n    return false;\n  }\n  return aKeys.every((key) => Object.is(a[key], b[key]));\n}\n\n/**\n * Returns a stable reference to `value` that only changes identity when one of\n * its own enumerable keys changes. Used to keep registry entries from churning\n * when callers spread anonymous objects (e.g. `domProps`) into them on every\n * render. Nesting deeper than one level inside a key is still compared by\n * identity.\n */\nfunction useShallowStable<T extends object>(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 (!valuesEqual(Reflect.get(prev, key), Reflect.get(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 * Builds the single value a slot registers, keeping its identity stable for as\n * long as the config values, the DOM props, the ref and the panel state are\n * unchanged. The only place a registry entry is built.\n *\n * The config is shallow-compared rather than memoized against a dependency\n * array. Those arrays mirrored the config object key for key with nothing\n * checking that the two agreed, so a forgotten entry silently froze the\n * registered value: no error, no re-render, the panel just stopped reacting to\n * that prop.\n *\n * `state` is passed in rather than derived here because the panel state hooks\n * read the config to compute it. Feeding them the finished entry instead would\n * make the entry its own input.\n */\nfunction useSlotEntry<C extends object, E extends HTMLElement, S>(\n  config: C,\n  domProps: ComponentPropsWithoutRef<'div'>,\n  ref: ForwardedRef<E>,\n  state: S,\n): SlotEntry<C, E, S> {\n  const stableConfig = useShallowStable(config);\n  const stableDomProps = useShallowStable(domProps);\n  const refValue = toRef(ref);\n  return useMemo(\n    () => ({\n      config: stableConfig,\n      domProps: stableDomProps,\n      ref: refValue,\n      state,\n    }),\n    [stableConfig, stableDomProps, refValue, state],\n  );\n}\n\n/**\n * Props for the PageLayout.Header slot component.\n * @public\n */\nexport interface HeaderProps\n  extends\n    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 entry = useSlotEntry<HeaderConfig, HTMLDivElement, undefined>(\n      {},\n      domProps,\n      ref,\n      undefined,\n    );\n\n    useRegisteredSlot('header', entry);\n\n    return createPortal(children, hosts.header);\n  },\n);\n\n/**\n * PageLayout.Sidebar - portals children into the sidebar host node and\n * registers its config and panel state as one registry entry in a layout\n * effect.\n *\n * The panel state is owned here rather than in `SidebarRegion` so that it\n * lives exactly as long as the consumer's slot element does.\n *\n * @internal\n */\nexport const PageLayoutSidebar = forwardRef<HTMLElement, 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      onBreakpointTransition,\n      breakpoint = sidebarDefaults.breakpoint,\n      onResize,\n      label,\n      // `position` is fixed by the layout and the sidebar's `width` is driven\n      // by its own drag state, so neither may reach the rendered element.\n      position: _position,\n      width: _width,\n      ...domProps\n    }: SidebarProps,\n    ref: ForwardedRef<HTMLElement>,\n  ) {\n    const { containers, hosts } = usePageLayoutPortalContext();\n\n    // Consumers pass inline arrows, so the raw callback props must not reach\n    // the registered config or its identity would change on every render and\n    // the registry would notify the layout shells every time.\n    const emitCollapsedChange = useCallbackRef(onCollapsedChange);\n    const emitBreakpointTransition = useCallbackRef(onBreakpointTransition);\n    const emitResize = useCallbackRef(onResize);\n    const mountDefaultWidth = useMountValue(defaultWidth);\n\n    const config = {\n      defaultWidth: mountDefaultWidth,\n      minWidth,\n      maxWidth,\n      resizable,\n      collapsed,\n      defaultCollapsed,\n      onCollapsedChange: emitCollapsedChange,\n      onBreakpointTransition: emitBreakpointTransition,\n      breakpoint,\n      onResize: emitResize,\n      label,\n    };\n\n    // The state hook reads config values, not the config's identity, so the\n    // unmemoized literal is safe to hand it and keeps the entry out of its\n    // own dependency chain.\n    const state = useSidebarPanelState({\n      sidebar: { config },\n      containerRef: containers.sidebar,\n    });\n\n    const entry = useSlotEntry(config, domProps, ref, state);\n\n    useRegisteredSlot('sidebar', entry);\n\n    return createPortal(children, hosts.sidebar);\n  },\n);\n\n/** @internal */\nexport const PageLayoutContent = forwardRef<HTMLElement, ContentProps>(\n  function PageLayoutContent(\n    {\n      children,\n      minWidth = contentDefaults.minWidth,\n      ...domProps\n    }: ContentProps,\n    ref: ForwardedRef<HTMLElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const entry = useSlotEntry({ minWidth }, domProps, ref, undefined);\n\n    useRegisteredSlot('content', entry);\n\n    return createPortal(children, hosts.content);\n  },\n);\n\n/**\n * PageLayout.Details - portals children into the details host node and\n * registers its config and panel state as one registry entry in a layout\n * effect.\n *\n * The panel state is owned here rather than in `DetailsRegion` so that it\n * lives exactly as long as the consumer's slot element does, and\n * children are wrapped in `DetailsRegionContext.Provider` because the portal\n * originates outside the layout's own subtree.\n *\n * @internal\n */\nexport const PageLayoutDetails = forwardRef<HTMLElement, DetailsProps>(\n  function PageLayoutDetails(\n    {\n      children,\n      minWidth = detailsDefaults.minWidth,\n      maxWidth,\n      defaultWidth = detailsDefaults.defaultWidth,\n      resizable = detailsDefaults.resizable,\n      collapsed,\n      defaultCollapsed = detailsDefaults.defaultCollapsed,\n      onCollapsedChange,\n      onBreakpointTransition,\n      layout,\n      defaultLayout = detailsDefaults.defaultLayout,\n      onLayoutChange,\n      breakpoint = detailsDefaults.breakpoint,\n      onResize,\n      width,\n      label,\n      // `position` is fixed by the layout, so it may not reach the rendered\n      // element.\n      position: _position,\n      ...domProps\n    }: DetailsProps,\n    ref: ForwardedRef<HTMLElement>,\n  ) {\n    const { containers, hosts } = usePageLayoutPortalContext();\n\n    // Consumers pass inline arrows, so the raw callback props must not reach\n    // the registered config or its identity would change on every render and\n    // the registry would notify the layout shells every time.\n    const emitCollapsedChange = useCallbackRef(onCollapsedChange);\n    const emitBreakpointTransition = useCallbackRef(onBreakpointTransition);\n    const emitLayoutChange = useCallbackRef(onLayoutChange);\n    const emitResize = useCallbackRef(onResize);\n    const mountDefaultWidth = useMountValue(defaultWidth);\n\n    const config = {\n      minWidth,\n      maxWidth,\n      defaultWidth: mountDefaultWidth,\n      resizable,\n      collapsed,\n      defaultCollapsed,\n      onCollapsedChange: emitCollapsedChange,\n      onBreakpointTransition: emitBreakpointTransition,\n      layout,\n      defaultLayout,\n      onLayoutChange: emitLayoutChange,\n      breakpoint,\n      onResize: emitResize,\n      width,\n      label,\n    };\n\n    // The state hook reads config values, not the config's identity, so the\n    // unmemoized literal is safe to hand it and keeps the entry out of its\n    // own dependency chain.\n    const state = useDetailsPanelState({\n      details: { config },\n      containerRef: containers.details,\n    });\n\n    const entry = useSlotEntry(config, domProps, ref, state);\n\n    useRegisteredSlot('details', entry);\n\n    return createPortal(\n      <DetailsRegionContext.Provider value={state}>\n        {children}\n      </DetailsRegionContext.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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",
+  "names": ["PageLayoutHeader", "PageLayoutSidebar", "PageLayoutContent", "PageLayoutDetails"]
+}

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/layouts/page-layout/shared/slots/slot-defaults.ts"],
+  "sourcesContent": ["import type { ContentProps } from '../../../split-layout/slots.js';\nimport type { DetailsProps } from '../../details-region/slots.js';\nimport type { SidebarProps } from '../../sidebar-region/slots.js';\n\n/**\n * Defaults each slot component applies to its own props. Checked against the\n * props they default, so a default can never drift from the type of the prop\n * it seeds.\n */\nexport const sidebarDefaults = {\n  defaultWidth: '15%',\n  minWidth: 200,\n  maxWidth: '50%',\n  resizable: true,\n  defaultCollapsed: false,\n  breakpoint: 960,\n} satisfies Partial<SidebarProps>;\n\n// The content pane reserves half the details region. In split this caps the\n// details panel at ~50% (its old `maxWidth` default, expressed at the content\n// layer); in overlay the panel floats, so the reserve does not constrain it.\nexport const contentDefaults = {\n  minWidth: '50%',\n} satisfies Partial<ContentProps>;\n\nexport const detailsDefaults = {\n  minWidth: 320,\n  defaultWidth: '25%',\n  resizable: true,\n  defaultCollapsed: false,\n  defaultLayout: 'split',\n  breakpoint: 600,\n} satisfies Partial<DetailsProps>;\n"],
+  "mappings": "AASO,MAAM,kBAAkB;AAAA,EAC7B,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,YAAY;AACd;AAKO,MAAM,kBAAkB;AAAA,EAC7B,UAAU;AACZ;AAEO,MAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,cAAc;AAAA,EACd,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,YAAY;AACd;",
+  "names": []
+}

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

@@ -0,0 +1,50 @@
+const INITIAL_STATE = Object.freeze({
+  header: null,
+  sidebar: null,
+  content: null,
+  details: null
+});
+function createSlotRegistry() {
+  let state = INITIAL_STATE;
+  let frozenSnapshot = INITIAL_STATE;
+  const listeners = /* @__PURE__ */ new Set();
+  const owners = /* @__PURE__ */ new Map();
+  function notify() {
+    frozenSnapshot = Object.freeze({ ...state });
+    for (const listener of listeners) {
+      listener();
+    }
+  }
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const getSnapshot = () => frozenSnapshot;
+  const register = (slot, entry, owner) => {
+    const currentOwner = owners.get(slot);
+    if (currentOwner !== void 0 && currentOwner !== owner) {
+      console.error(
+        `[PageLayout] The "${slot}" slot is already registered by another element; the latest registration wins while both sets of children stay in the DOM. This usually indicates two PageLayout slot elements of the same kind rendered at once.`
+      );
+    }
+    owners.set(slot, owner);
+    if (state[slot] === entry) {
+      return;
+    }
+    state = { ...state, [slot]: entry };
+    notify();
+  };
+  const unregister = (slot, owner) => {
+    if (owners.get(slot) !== owner) {
+      return;
+    }
+    owners.delete(slot);
+    state = { ...state, [slot]: null };
+    notify();
+  };
+  return { subscribe, getSnapshot, register, unregister };
+}
+export {
+  createSlotRegistry
+};
+//# sourceMappingURL=slot-registry.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/layouts/page-layout/shared/slots/slot-registry.ts"],
+  "sourcesContent": ["import type {\n  ContentSlotEntry,\n  DetailsSlotEntry,\n  HeaderSlotEntry,\n  SidebarSlotEntry,\n} from './slot-config.js';\n\n/** @internal */\nexport interface SlotRegistryState {\n  header: HeaderSlotEntry | null;\n  sidebar: SidebarSlotEntry | null;\n  content: ContentSlotEntry | null;\n  details: DetailsSlotEntry | null;\n}\n\n/**\n * Identity of the element that currently holds a slot. Compared by reference,\n * so each slot component must hold one value for its whole lifetime.\n *\n * @internal\n */\nexport type SlotOwner = object;\n\n/** @internal */\nexport interface SlotRegistry {\n  subscribe: (listener: () => void) => () => void;\n  getSnapshot: () => SlotRegistryState;\n  register: <K extends keyof SlotRegistryState>(\n    slot: K,\n    entry: NonNullable<SlotRegistryState[K]>,\n    owner: SlotOwner,\n  ) => void;\n  unregister: (slot: keyof SlotRegistryState, owner: SlotOwner) => void;\n}\n\n// Frozen like every later snapshot, and shared by every registry instance, so\n// a reader that mutates it would corrupt all subsequent layouts.\nconst INITIAL_STATE: SlotRegistryState = Object.freeze({\n  header: null,\n  sidebar: null,\n  content: null,\n  details: null,\n});\n\n/** @internal */\nexport function createSlotRegistry(): SlotRegistry {\n  let state: SlotRegistryState = INITIAL_STATE;\n  let frozenSnapshot: SlotRegistryState = INITIAL_STATE;\n  const listeners = new Set<() => void>();\n  const owners = new Map<keyof SlotRegistryState, SlotOwner>();\n\n  function notify() {\n    frozenSnapshot = Object.freeze({ ...state });\n    for (const listener of listeners) {\n      listener();\n    }\n  }\n\n  const subscribe: SlotRegistry['subscribe'] = (listener) => {\n    listeners.add(listener);\n    return () => listeners.delete(listener);\n  };\n\n  const getSnapshot: SlotRegistry['getSnapshot'] = () => frozenSnapshot;\n\n  const register: SlotRegistry['register'] = (slot, entry, owner) => {\n    const currentOwner = owners.get(slot);\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      currentOwner !== undefined &&\n      currentOwner !== owner\n    ) {\n      // Two slot elements of the same kind portal their children into the same\n      // host node, so both sets of children render stacked while only this\n      // last registration is ever read. Almost always a bug.\n      //\n      // Reported rather than tolerated because the state is not fully\n      // recoverable: only one owner is tracked, so if this registrant\n      // unmounts first the slot clears while the earlier element is still\n      // mounted and will not re-register on its own.\n      // oxlint-disable-next-line no-console\n      console.error(\n        `[PageLayout] The \"${slot}\" slot is already registered by another element; ` +\n          'the latest registration wins while both sets of children stay in the DOM. ' +\n          'This usually indicates two PageLayout slot elements of the same kind rendered at once.',\n      );\n    }\n    owners.set(slot, owner);\n\n    if (state[slot] === entry) {\n      // Callers are expected to memoize the registered entry (see portal-slots.tsx).\n      return;\n    }\n    state = { ...state, [slot]: entry };\n    notify();\n  };\n\n  const unregister: SlotRegistry['unregister'] = (slot, owner) => {\n    if (owners.get(slot) !== owner) {\n      // A replacement already took the slot over. React runs the outgoing\n      // element's cleanup after the incoming one's effect, so clearing here\n      // would drop a live registration and make the slot vanish.\n      return;\n    }\n    owners.delete(slot);\n    state = { ...state, [slot]: null };\n    notify();\n  };\n\n  return { subscribe, getSnapshot, register, unregister };\n}\n"],
+  "mappings": "AAqCA,MAAM,gBAAmC,OAAO,OAAO;AAAA,EACrD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX,CAAC;AAGM,SAAS,qBAAmC;AACjD,MAAI,QAA2B;AAC/B,MAAI,iBAAoC;AACxC,QAAM,YAAY,oBAAI,IAAgB;AACtC,QAAM,SAAS,oBAAI,IAAwC;AAE3D,WAAS,SAAS;AAChB,qBAAiB,OAAO,OAAO,EAAE,GAAG,MAAM,CAAC;AAC3C,eAAW,YAAY,WAAW;AAChC,eAAS;AAAA,IACX;AAAA,EACF;AAEA,QAAM,YAAuC,CAAC,aAAa;AACzD,cAAU,IAAI,QAAQ;AACtB,WAAO,MAAM,UAAU,OAAO,QAAQ;AAAA,EACxC;AAEA,QAAM,cAA2C,MAAM;AAEvD,QAAM,WAAqC,CAAC,MAAM,OAAO,UAAU;AACjE,UAAM,eAAe,OAAO,IAAI,IAAI;AACpC,QAEE,iBAAiB,UACjB,iBAAiB,OACjB;AAUA,cAAQ;AAAA,QACN,qBAAqB,IAAI;AAAA,MAG3B;AAAA,IACF;AACA,WAAO,IAAI,MAAM,KAAK;AAEtB,QAAI,MAAM,IAAI,MAAM,OAAO;AAEzB;AAAA,IACF;AACA,YAAQ,EAAE,GAAG,OAAO,CAAC,IAAI,GAAG,MAAM;AAClC,WAAO;AAAA,EACT;AAEA,QAAM,aAAyC,CAAC,MAAM,UAAU;AAC9D,QAAI,OAAO,IAAI,IAAI,MAAM,OAAO;AAI9B;AAAA,IACF;AACA,WAAO,OAAO,IAAI;AAClB,YAAQ,EAAE,GAAG,OAAO,CAAC,IAAI,GAAG,KAAK;AACjC,WAAO;AAAA,EACT;AAEA,SAAO,EAAE,WAAW,aAAa,UAAU,WAAW;AACxD;",
+  "names": []
+}

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

@@ -0,0 +1,16 @@
+import { useRef } from "react";
+import { usePageLayoutPortalContext } from "./PageLayoutPortalContext.js";
+import { useSafeLayoutEffect } from "../../../../core/hooks/useSafeLayoutEffect.js";
+function useRegisteredSlot(slotName, entry) {
+  const { registry } = usePageLayoutPortalContext();
+  const ownerRef = useRef({});
+  useSafeLayoutEffect(() => {
+    const owner = ownerRef.current;
+    registry.register(slotName, entry, owner);
+    return () => registry.unregister(slotName, owner);
+  }, [registry, slotName, entry]);
+}
+export {
+  useRegisteredSlot
+};
+//# sourceMappingURL=useRegisteredSlot.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/layouts/page-layout/shared/slots/useRegisteredSlot.ts"],
+  "sourcesContent": ["import { useRef } from 'react';\n\nimport { usePageLayoutPortalContext } from './PageLayoutPortalContext.js';\nimport type { SlotOwner, SlotRegistryState } from './slot-registry.js';\nimport { useSafeLayoutEffect } from '../../../../core/hooks/useSafeLayoutEffect.js';\n\n/**\n * Registers `entry` for `slotName` in the slot registry on mount and\n * unregisters on unmount. Re-registers when `entry` identity changes.\n *\n * Uses a layout effect so the registration is observable before the next\n * paint: the layout shells (`MainShell`, `HeaderShell`) need to see the\n * registered entry in the same commit as the slot component mounts to avoid\n * a frame of unstyled content.\n *\n * Callers must keep `entry` referentially stable, which is what `useSlotEntry`\n * is for, so the effect only re-runs when something meaningful changes.\n *\n * Each caller registers under an owner identity that lives as long as the\n * component instance, so a cleanup that runs after a replacement has already\n * claimed the slot cannot clear the live registration.\n *\n * @internal\n */\nexport function useRegisteredSlot<K extends keyof SlotRegistryState>(\n  slotName: K,\n  entry: NonNullable<SlotRegistryState[K]>,\n): void {\n  const { registry } = usePageLayoutPortalContext();\n  const ownerRef = useRef<SlotOwner>({});\n  useSafeLayoutEffect(() => {\n    const owner = ownerRef.current;\n    registry.register(slotName, entry, owner);\n    return () => registry.unregister(slotName, owner);\n  }, [registry, slotName, entry]);\n}\n"],
+  "mappings": "AAAA,SAAS,cAAc;AAEvB,SAAS,kCAAkC;AAE3C,SAAS,2BAA2B;AAoB7B,SAAS,kBACd,UACA,OACM;AACN,QAAM,EAAE,SAAS,IAAI,2BAA2B;AAChD,QAAM,WAAW,OAAkB,CAAC,CAAC;AACrC,sBAAoB,MAAM;AACxB,UAAM,QAAQ,SAAS;AACvB,aAAS,SAAS,UAAU,OAAO,KAAK;AACxC,WAAO,MAAM,SAAS,WAAW,UAAU,KAAK;AAAA,EAClD,GAAG,CAAC,UAAU,UAAU,KAAK,CAAC;AAChC;",
+  "names": []
+}

package/esm/layouts/page-layout/shared/{TeleportTarget.js → teleport/teleport.js}

@@ -1,5 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef } from "react";
+function useStableHost() {
+  const hostRef = useRef(null);
+  if (hostRef.current === null) {
+    const el = document.createElement("div");
+    el.style.display = "contents";
+    hostRef.current = el;
+  }
+  return hostRef.current;
+}
 function TeleportTarget({ host }) {
   const containerRef = useRef(null);
   useLayoutEffect(() => {
@@ -17,6 +26,7 @@ function TeleportTarget({ host }) {
   return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { display: "contents" } });
 }
 export {
-  TeleportTarget
+  TeleportTarget,
+  useStableHost
 };
-//# sourceMappingURL=TeleportTarget.js.map
+//# sourceMappingURL=teleport.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/layouts/page-layout/shared/teleport/teleport.tsx"],
+  "sourcesContent": ["import { useLayoutEffect, useRef } from 'react';\n\n/**\n * Creates a stable `<div style=\"display:contents\">` DOM element on first\n * render and returns the same element on every subsequent render.\n *\n * The element is created lazily on first access via `useRef`, not via\n * `useMemo`, so StrictMode / cache-eviction cannot cause it to be recreated\n * and break referential stability for callers that capture it\n * (e.g. `createPortal`).\n *\n * @internal\n */\nexport function useStableHost(): HTMLDivElement {\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  return hostRef.current;\n}\n\n/**\n * Places a host node from `useStableHost` into the DOM at this component's\n * mount point. Uses `appendChild` in a `useLayoutEffect` so the host node is\n * moved (not cloned) when `TeleportTarget` remounts in a different position,\n * preserving the React subtree portaled into the host.\n *\n * Together with `createPortal(children, host)` this lets a subtree survive the\n * layout switching between split / overlay / collapsed / drawer modes: React\n * never unmounts it, because only the DOM node moves.\n *\n * @internal\n */\nexport function TeleportTarget({ host }: { host: HTMLDivElement }) {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container || host.parentNode === container) {\n      return;\n    }\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      host.parentNode !== null &&\n      container.ownerDocument.contains(host.parentNode)\n    ) {\n      // Moving a host out of a parent that is still mounted in the document\n      // silently steals the portaled subtree from whoever rendered the other\n      // Target. Almost always a bug: two TeleportTargets rendering for the\n      // same host at the same time.\n      //\n      // Legitimate single-Target moves (e.g. a layout switching between\n      // split/drawer branches) don't hit this path because React unmounts the\n      // old Target's wrapper before the new Target's effect runs, leaving the\n      // host's previous parent detached from the document.\n      // oxlint-disable-next-line no-console\n      console.error(\n        '[TeleportTarget] Host node already has a live parent elsewhere; ' +\n          'moving it will detach the subtree from its previous mount point. ' +\n          'This usually indicates two TeleportTargets rendering for the same host.',\n      );\n    }\n    container.appendChild(host);\n  });\n\n  return <div ref={containerRef} style={{ display: 'contents' }} />;\n}\n"],
+  "mappings": "AAmES;AAnET,SAAS,iBAAiB,cAAc;AAajC,SAAS,gBAAgC;AAC9C,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,SAAO,QAAQ;AACjB;AAcO,SAAS,eAAe,EAAE,KAAK,GAA6B;AACjE,QAAM,eAAe,OAAuB,IAAI;AAEhD,kBAAgB,MAAM;AACpB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,aAAa,KAAK,eAAe,WAAW;AAC/C;AAAA,IACF;AACA,QAEE,KAAK,eAAe,QACpB,UAAU,cAAc,SAAS,KAAK,UAAU,GAChD;AAWA,cAAQ;AAAA,QACN;AAAA,MAGF;AAAA,IACF;AACA,cAAU,YAAY,IAAI;AAAA,EAC5B,CAAC;AAED,SAAO,oBAAC,SAAI,KAAK,cAAc,OAAO,EAAE,SAAS,WAAW,GAAG;AACjE;",
+  "names": []
+}

package/esm/layouts/page-layout/{sidebar-layout/CollapsedSidebarRail.js → sidebar-region/SidebarHint.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronSmallRightDoubleIcon } from "@dynatrace/strato-icons";
-import * as styles from "./SidebarLayout.sty.js";
+import * as styles from "./SidebarRegion.sty.js";
 import { Button } from "../../../buttons/button/Button.js";
 import { Tooltip } from "../../../overlays/tooltip/Tooltip.js";
 function SidebarHint({
@@ -21,8 +21,7 @@ function SidebarHint({
         type: "button",
         onClick: expand,
         tabIndex: -1,
-        "aria-hidden": "true",
-        "aria-label": expandSidebarLabel
+        "aria-hidden": "true"
       }
     ),
     /* @__PURE__ */ jsx("div", { className: styles.expandButtonContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: expandSidebarLabel, children: /* @__PURE__ */ jsx(
@@ -45,4 +44,4 @@ function SidebarHint({
 export {
   SidebarHint
 };
-//# sourceMappingURL=CollapsedSidebarRail.js.map
+//# sourceMappingURL=SidebarHint.js.map

package/esm/layouts/page-layout/sidebar-region/SidebarHint.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/sidebar-region/SidebarHint.tsx"],
+  "sourcesContent": ["import { type Ref } from 'react';\n\nimport { ChevronSmallRightDoubleIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './SidebarRegion.sty.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\n\ninterface SidebarHintProps {\n  panelId: string;\n  expandSidebarLabel: string;\n  expandButtonRef: Ref<HTMLButtonElement>;\n  /**\n   * Called when the user activates the rail to expand the sidebar. Receives\n   * the new collapsed state, which is always `false` from this component but\n   * matches the controlled-collapse callback shape used elsewhere.\n   */\n  onCollapsedChange: (collapsed: boolean) => void;\n  /**\n   * Whether the panel controlled by the expand button is currently collapsed.\n   * In `collapsed` mode this is always `true`, but in `drawer` mode the\n   * drawer can be open while the rail is still rendered, in which case this\n   * must reflect the live state for assistive technologies.\n   */\n  isCollapsed?: boolean;\n}\n\n/**\n * The narrow vertical hint rendered when the sidebar is collapsed (in either\n * the `collapsed` mode or the `drawer` mode while the drawer is dismissed).\n * Suggests to the user that there is a sidebar outside the frame, which can be expanded.\n *\n * @internal\n */\nexport function SidebarHint({\n  panelId,\n  expandSidebarLabel,\n  expandButtonRef,\n  onCollapsedChange,\n  isCollapsed = true,\n}: SidebarHintProps) {\n  const expand = () => {\n    onCollapsedChange(false);\n  };\n\n  return (\n    <div className={styles.collapsedSidebar} id={panelId}>\n      <button\n        className={styles.hint}\n        type=\"button\"\n        onClick={expand}\n        // A decorative wide click target: the labelled button beside it is the\n        // one assistive technology sees.\n        tabIndex={-1}\n        aria-hidden=\"true\"\n      />\n      <div className={styles.expandButtonContainer}>\n        <Tooltip text={expandSidebarLabel}>\n          <Button\n            className={styles.expandButton}\n            aria-expanded={!isCollapsed}\n            ref={expandButtonRef}\n            aria-controls={panelId}\n            aria-label={expandSidebarLabel}\n            size=\"condensed\"\n            data-dt-children-name=\"ExpandCollapse\"\n            data-dt-properties=\"state:expand\"\n            onClick={expand}\n          >\n            <Button.Prefix>\n              <ChevronSmallRightDoubleIcon />\n            </Button.Prefix>\n          </Button>\n        </Tooltip>\n      </div>\n    </div>\n  );\n}\n"],
+  "mappings": "AA8CI,SACE,KADF;AA5CJ,SAAS,mCAAmC;AAE5C,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,eAAe;AA4BjB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAAqB;AACnB,QAAM,SAAS,MAAM;AACnB,sBAAkB,KAAK;AAAA,EACzB;AAEA,SACE,qBAAC,SAAI,WAAW,OAAO,kBAAkB,IAAI,SAC3C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,MAAK;AAAA,QACL,SAAS;AAAA,QAGT,UAAU;AAAA,QACV,eAAY;AAAA;AAAA,IACd;AAAA,IACA,oBAAC,SAAI,WAAW,OAAO,uBACrB,8BAAC,WAAQ,MAAM,oBACb;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,iBAAe,CAAC;AAAA,QAChB,KAAK;AAAA,QACL,iBAAe;AAAA,QACf,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,yBAAsB;AAAA,QACtB,sBAAmB;AAAA,QACnB,SAAS;AAAA,QAET,8BAAC,OAAO,QAAP,EACC,8BAAC,+BAA4B,GAC/B;AAAA;AAAA,IACF,GACF,GACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/{layouts/page-layout/sidebar-layout/SidebarLayout.css → esm/layouts/page-layout/sidebar-region/SidebarRegion.css}

@@ -1,9 +1,9 @@
-._1mr4xg70-3-13-3 {
+._cgf7ui0-3-14-1 {
   height: 100%;
   overflow: hidden;
   position: relative;
 }
-._1mr4xg71-3-13-3 {
+._cgf7ui1-3-14-1 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
@@ -11,37 +11,37 @@
   padding: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1jgl8s50-3-13-3 ._1mr4xg71-3-13-3 {
+._1jgl8s50-3-14-1 ._cgf7ui1-3-14-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1mr4xg72-3-13-3 {
+._cgf7ui2-3-14-1 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   flex-grow: 1;
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1mr4xg73-3-13-3 {
+._cgf7ui3-3-14-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg74-3-13-3 {
+._cgf7ui4-3-14-1 {
   position: relative;
   width: var(--dt-spacings-size-16, 16px);
   height: 100%;
   flex-shrink: 0;
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1jgl8s50-3-13-3 ._1mr4xg74-3-13-3 {
+._1jgl8s50-3-14-1 ._cgf7ui4-3-14-1 {
   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-13-3 ._1mr4xg74-3-13-3:hover {
+._1jgl8s50-3-14-1 ._cgf7ui4-3-14-1:hover {
   border-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-13-3 ._1mr4xg74-3-13-3:active {
+._1jgl8s50-3-14-1 ._cgf7ui4-3-14-1:active {
   border-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._1mr4xg75-3-13-3 {
+._cgf7ui5-3-14-1 {
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
@@ -56,54 +56,54 @@
   translate: calc(0px - var(--dt-spacings-size-16, 16px) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1mr4xg75-3-13-3:hover, ._1mr4xg75-3-13-3:focus, ._1mr4xg74-3-13-3:hover ._1mr4xg75-3-13-3 {
+._cgf7ui5-3-14-1:hover, ._cgf7ui5-3-14-1:focus, ._cgf7ui4-3-14-1:hover ._cgf7ui5-3-14-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   translate: calc(0px - var(--dt-spacings-size-16, 16px) / 2);
 }
-._1jgl8s50-3-13-3 ._1mr4xg75-3-13-3, ._1jgl8s50-3-13-3 ._1mr4xg75-3-13-3:hover, ._1jgl8s50-3-13-3 ._1mr4xg75-3-13-3:focus, ._1jgl8s50-3-13-3 ._1mr4xg74-3-13-3:hover ._1mr4xg75-3-13-3 {
+._1jgl8s50-3-14-1 ._cgf7ui5-3-14-1, ._1jgl8s50-3-14-1 ._cgf7ui5-3-14-1:hover, ._1jgl8s50-3-14-1 ._cgf7ui5-3-14-1:focus, ._1jgl8s50-3-14-1 ._cgf7ui4-3-14-1:hover ._cgf7ui5-3-14-1 {
   border-top-right-radius: 0;
   translate: 0;
   box-shadow: none;
 }
-._1mr4xg76-3-13-3 {
+._cgf7ui6-3-14-1 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
 }
-._1mr4xg77-3-13-3 {
+._cgf7ui7-3-14-1 {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-._1mr4xg78-3-13-3 {
+._cgf7ui8-3-14-1 {
   box-sizing: border-box;
   flex-grow: 1;
 }
-._1mr4xg79-3-13-3 {
+._cgf7ui9-3-14-1 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1mr4xg7b-3-13-3 {
-  --_1mr4xg7a-3-13-3: 24px;
+._cgf7uib-3-14-1 {
+  --_cgf7uia-3-14-1: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
   left: -2px;
   line-height: 0;
   z-index: 1;
 }
-._1mr4xg7c-3-13-3 {
-  --_1mr4xg7a-3-13-3: 24px;
+._cgf7uic-3-14-1 {
+  --_cgf7uia-3-14-1: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
   left: 2px;
   line-height: 0;
   z-index: 1;
 }
-._1mr4xg7d-3-13-3 {
-  width: var(--_1mr4xg7a-3-13-3);
-  height: var(--_1mr4xg7a-3-13-3);
+._cgf7uid-3-14-1 {
+  width: var(--_cgf7uia-3-14-1);
+  height: var(--_cgf7uia-3-14-1);
   box-sizing: border-box;
 }
-._1mr4xg7e-3-13-3 {
+._cgf7uie-3-14-1 {
   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);
@@ -111,52 +111,52 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._1mr4xg7e-3-13-3:hover {
+._cgf7uie-3-14-1:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1mr4xg7e-3-13-3:focus-visible {
+._cgf7uie-3-14-1:focus-visible {
   opacity: 1;
 }
-._1mr4xg71-3-13-3:hover ~ ._1mr4xg73-3-13-3 ._1mr4xg7e-3-13-3, ._1mr4xg73-3-13-3:hover ._1mr4xg7e-3-13-3 {
+._cgf7ui1-3-14-1:hover ~ ._cgf7ui3-3-14-1 ._cgf7uie-3-14-1, ._cgf7ui3-3-14-1:hover ._cgf7uie-3-14-1 {
   opacity: 1;
 }
-._1jgl8s50-3-13-3 ._1mr4xg71-3-13-3:hover ~ ._1mr4xg73-3-13-3 ._1mr4xg7e-3-13-3, ._1jgl8s50-3-13-3 ._1mr4xg73-3-13-3:hover ._1mr4xg7e-3-13-3 {
+._1jgl8s50-3-14-1 ._cgf7ui1-3-14-1:hover ~ ._cgf7ui3-3-14-1 ._cgf7uie-3-14-1, ._1jgl8s50-3-14-1 ._cgf7ui3-3-14-1:hover ._cgf7uie-3-14-1 {
   opacity: 1;
   box-shadow: none;
 }
-._1jgl8s50-3-13-3 ._1mr4xg7e-3-13-3 {
+._1jgl8s50-3-14-1 ._cgf7uie-3-14-1 {
   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;
 }
-._1jgl8s50-3-13-3 ._1mr4xg7e-3-13-3:hover {
+._1jgl8s50-3-14-1 ._cgf7uie-3-14-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   opacity: 1;
 }
-._1jgl8s50-3-13-3 ._1mr4xg7e-3-13-3:active {
+._1jgl8s50-3-14-1 ._cgf7uie-3-14-1:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1jgl8s50-3-13-3 ._1mr4xg7e-3-13-3:focus-visible {
+._1jgl8s50-3-14-1 ._cgf7uie-3-14-1:focus-visible {
   opacity: 1;
 }
-._1mr4xg7f-3-13-3 {
+._cgf7uif-3-14-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg7f-3-13-3:hover {
+._cgf7uif-3-14-1: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-13-3 ._1mr4xg7f-3-13-3 {
+._1jgl8s50-3-14-1 ._cgf7uif-3-14-1 {
   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-13-3 ._1mr4xg7f-3-13-3:hover {
+._1jgl8s50-3-14-1 ._cgf7uif-3-14-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   box-shadow: none;
 }
-._1jgl8s50-3-13-3 ._1mr4xg7f-3-13-3:active {
+._1jgl8s50-3-14-1 ._cgf7uif-3-14-1:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }