@dynatrace/strato-components 3.10.4 → 3.11.0

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

@@ -19,7 +19,7 @@ import { useSafeLayoutEffect } from "../../../core/hooks/useSafeLayoutEffect.js"
 import { Drawer } from "../../../overlays/drawer/Drawer.js";
 import { clampPanelWidth } from "../../split-layout/split-sizing-utils.js";
 import { SplitLayout } from "../../split-layout/SplitLayout.js";
-import { clamp, convertToPx } from "../../split-layout/width-utils.js";
+import { convertToPx } from "../../split-layout/width-utils.js";
 import {
   PageLayoutPortalContext
 } from "../shared/PageLayoutPortalContext.js";
@@ -40,22 +40,24 @@ function DetailsLayoutInner({
   const clampForMode = useCallback(
     (value) => {
       switch (layout.mode) {
-        case "overlay": {
-          const min = convertToPx(details.config.minWidth, containerWidth);
-          const max = details.config.resizable ? containerWidth - OVERLAY_HANDLE_WIDTH : containerWidth;
-          return clamp(min, value, max);
-        }
-        case "split": {
+        // Overlay floats over the content, so it reserves no content space; it is
+        // bounded by `maxWidth` (when set) and always by the container edge.
+        case "overlay":
+          return clampPanelWidth(value, containerWidth, {
+            panelMin: details.config.minWidth,
+            panelMax: details.config.maxWidth ?? Infinity,
+            contentMin: 0,
+            handleWidth: details.config.resizable ? OVERLAY_HANDLE_WIDTH : 0
+          });
+        case "split":
           return clampPanelWidth(value, containerWidth, {
             panelMin: details.config.minWidth,
-            panelMax: details.config.maxWidth,
+            panelMax: details.config.maxWidth ?? Infinity,
             contentMin: content.config.minWidth,
             handleWidth: details.config.resizable ? SPLIT_HANDLE_WIDTH : 0
           });
-        }
-        default: {
+        default:
           return value;
-        }
       }
     },
     [
@@ -152,7 +154,10 @@ function DetailsLayoutInner({
         ...details.domProps,
         ref: details.ref,
         minWidth: convertToPx(details.config.minWidth, layout.containerWidth),
-        maxWidth: details.config.resizable ? layout.containerWidth - OVERLAY_HANDLE_WIDTH : layout.containerWidth,
+        maxWidth: Math.min(
+          details.config.maxWidth !== void 0 ? convertToPx(details.config.maxWidth, layout.containerWidth) : Infinity,
+          details.config.resizable ? layout.containerWidth - OVERLAY_HANDLE_WIDTH : layout.containerWidth
+        ),
         width: panelWidth,
         resizable: details.config.resizable,
         onResizeEnd: commitWidth,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayout.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type RefObject,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DetailsLayout.sty.js';\nimport { DetailsLayoutContext } from './DetailsLayoutContext.js';\nimport { Overlay, OVERLAY_HANDLE_WIDTH } from './Overlay.js';\nimport {\n  type ExtractedContentSlot,\n  type ExtractedDetailsSlot,\n} from './slots.js';\nimport { useLayoutState } from './useLayoutState.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useSafeLayoutEffect } from '../../../core/hooks/useSafeLayoutEffect.js';\nimport { Drawer } from '../../../overlays/drawer/Drawer.js';\nimport { clampPanelWidth } from '../../split-layout/split-sizing-utils.js';\nimport { SplitLayout } from '../../split-layout/SplitLayout.js';\nimport { clamp, convertToPx } from '../../split-layout/width-utils.js';\nimport {\n  PageLayoutPortalContext,\n  type PageLayoutPortalContextValue,\n} from '../shared/PageLayoutPortalContext.js';\nimport { useTeleport } from '../shared/useTeleport.js';\n\ntype TeleportPair = ReturnType<typeof useTeleport>;\n\n// Mirrors the resize-handle width used by SplitLayout (useSplitSizing) so the\n// width reported here matches what the split panel actually renders.\nconst SPLIT_HANDLE_WIDTH = 8;\n\nfunction DetailsLayoutInner({\n  details,\n  content,\n  containerRef,\n  contentTeleport,\n  panelTeleport,\n}: {\n  details: ExtractedDetailsSlot;\n  content: ExtractedContentSlot;\n  containerRef: RefObject<HTMLDivElement | null>;\n  contentTeleport: TeleportPair;\n  panelTeleport: TeleportPair;\n}) {\n  const intl = useIntl();\n  const layout = useLayoutState({ details, containerRef });\n\n  const [intendedWidth, setIntendedWidth] = useState<number>();\n\n  const containerWidth = layout.containerWidth;\n  const controlledWidth = details.config.width;\n\n  const clampForMode = useCallback(\n    (value: number) => {\n      switch (layout.mode) {\n        case 'overlay': {\n          const min = convertToPx(details.config.minWidth, containerWidth);\n          const max = details.config.resizable\n            ? containerWidth - OVERLAY_HANDLE_WIDTH\n            : containerWidth;\n          return clamp(min, value, max);\n        }\n        case 'split': {\n          return clampPanelWidth(value, containerWidth, {\n            panelMin: details.config.minWidth,\n            panelMax: details.config.maxWidth,\n            contentMin: content.config.minWidth,\n            handleWidth: details.config.resizable ? SPLIT_HANDLE_WIDTH : 0,\n          });\n        }\n        default: {\n          return value;\n        }\n      }\n    },\n    [\n      layout.mode,\n      containerWidth,\n      details.config.minWidth,\n      details.config.maxWidth,\n      details.config.resizable,\n      content.config.minWidth,\n    ],\n  );\n\n  const baseWidth = (() => {\n    if (containerWidth === 0) {\n      return undefined;\n    }\n    if (controlledWidth !== undefined) {\n      return convertToPx(controlledWidth, containerWidth);\n    }\n    return (\n      intendedWidth ?? convertToPx(details.config.defaultWidth, containerWidth)\n    );\n  })();\n  const panelWidth =\n    baseWidth !== undefined ? clampForMode(baseWidth) : undefined;\n\n  const commitWidth = useCallback(\n    (value: number) => {\n      if (controlledWidth === undefined) {\n        setIntendedWidth(value);\n      }\n      details.config.onResize?.(value);\n    },\n    [controlledWidth, details.config],\n  );\n\n  const detailsAriaLabel = intl.formatMessage({\n    defaultMessage: 'Details',\n    id: 'o3A99RFWS+N7bJe8',\n    description: 'Accessible label for the details panel.',\n  });\n\n  const contextValue = useMemo(\n    () => ({\n      collapsed: layout.collapsed,\n      setCollapsed: layout.setCollapsed,\n      preferredLayout: layout.preferredLayoutMode,\n      setPreferredLayout: layout.setPreferredLayoutMode,\n      mode: layout.mode,\n    }),\n    [\n      layout.collapsed,\n      layout.setCollapsed,\n      layout.preferredLayoutMode,\n      layout.setPreferredLayoutMode,\n      layout.mode,\n    ],\n  );\n\n  // Bridge: DetailsLayoutContext.Provider below only covers the split/overlay\n  // DOM rendered by this component. PageLayout.Details children live in a\n  // different React subtree (they're portaled), so the provider doesn't reach\n  // them. Publish the value through the registry so PageLayoutDetails can\n  // re-wrap its portaled children with a provider of the same value.\n  const pageLayoutPortalContext =\n    useContext<PageLayoutPortalContextValue | null>(PageLayoutPortalContext);\n  useSafeLayoutEffect(() => {\n    if (!pageLayoutPortalContext) {\n      return;\n    }\n    pageLayoutPortalContext.registry.register(\n      'detailsLayoutContext',\n      contextValue,\n    );\n  }, [pageLayoutPortalContext, contextValue]);\n\n  const contentClassName = clsx(styles.content, content.domProps.className);\n  const contentNode = (\n    <main ref={content.ref} {...content.domProps} className={contentClassName}>\n      <contentTeleport.Target />\n    </main>\n  );\n\n  // `main` must always render inside SplitLayout.Content \u2014 never per-mode \u2014 or it remounts and resets scroll position (APPDEV-18829).\n  const isSplit = layout.mode === 'split';\n  const isOverlay = layout.mode === 'overlay';\n  const isDrawer = layout.mode === 'drawer';\n  // Render a hidden panel Target while the overlay container is unmeasured\n  // so the teleport host stays attached across the measure frame.\n  const isMeasuringOverlay = isOverlay && layout.containerWidth === 0;\n\n  return (\n    <DetailsLayoutContext.Provider value={contextValue}>\n      <panelTeleport.Source>{details.children}</panelTeleport.Source>\n      <SplitLayout>\n        <SplitLayout.Content minWidth={content.config.minWidth}>\n          {contentNode}\n        </SplitLayout.Content>\n        <SplitLayout.Panel\n          {...(isSplit ? details.domProps : {})}\n          ref={isSplit ? details.ref : undefined}\n          minWidth={isSplit ? details.config.minWidth : 0}\n          maxWidth={isSplit ? details.config.maxWidth : 0}\n          defaultWidth={details.config.defaultWidth}\n          width={isSplit ? panelWidth : 0}\n          onResize={commitWidth}\n          resizable={isSplit && details.config.resizable}\n          position=\"end\"\n          className={clsx(styles.panel, isSplit && details.domProps.className)}\n          aria-label={isSplit ? detailsAriaLabel : undefined}\n        >\n          {isSplit ? <panelTeleport.Target /> : null}\n        </SplitLayout.Panel>\n      </SplitLayout>\n      {isMeasuringOverlay && (\n        <div hidden aria-hidden=\"true\">\n          <panelTeleport.Target />\n        </div>\n      )}\n      {isOverlay && !isMeasuringOverlay && (\n        <Overlay\n          {...details.domProps}\n          ref={details.ref}\n          minWidth={convertToPx(details.config.minWidth, layout.containerWidth)}\n          maxWidth={\n            details.config.resizable\n              ? layout.containerWidth - OVERLAY_HANDLE_WIDTH\n              : layout.containerWidth\n          }\n          width={panelWidth}\n          resizable={details.config.resizable}\n          onResizeEnd={commitWidth}\n        >\n          <panelTeleport.Target />\n        </Overlay>\n      )}\n      {isDrawer && (\n        <Drawer\n          {...details.domProps}\n          ref={details.ref}\n          className={clsx(styles.drawer, details.domProps.className)}\n          aria-label={detailsAriaLabel}\n          isDismissed={layout.collapsed}\n          onDismiss={(state) => layout.setCollapsed(state)}\n          placement=\"right\"\n          width=\"wide\"\n        >\n          <div className={styles.drawerContent}>\n            <panelTeleport.Target />\n          </div>\n        </Drawer>\n      )}\n    </DetailsLayoutContext.Provider>\n  );\n}\n\n/** @internal */\nexport type LayoutRootProps = {\n  details: ExtractedDetailsSlot | null;\n  content: ExtractedContentSlot;\n} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'content'>;\n\n/** @internal */\nexport const DetailsLayout = memo(\n  forwardRef<HTMLDivElement, LayoutRootProps>((props, ref) => {\n    const { className: rootClassName, details, content, ...rootProps } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rootRef = useMergeRefs([ref, containerRef]);\n\n    const contentTeleport = useTeleport();\n    const panelTeleport = useTeleport();\n\n    return (\n      <>\n        <contentTeleport.Source>{content.children}</contentTeleport.Source>\n        <div\n          {...rootProps}\n          ref={rootRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          {details ? (\n            <DetailsLayoutInner\n              details={details}\n              content={content}\n              containerRef={containerRef}\n              contentTeleport={contentTeleport}\n              panelTeleport={panelTeleport}\n            />\n          ) : (\n            <main\n              ref={content.ref}\n              {...content.domProps}\n              className={clsx(styles.content, content.domProps.className)}\n            >\n              <contentTeleport.Target />\n            </main>\n          )}\n        </div>\n      </>\n    );\n  }),\n);\nDetailsLayout.displayName = 'DetailsLayout (forwardRef)';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DetailsLayout.sty.js';\nimport { DetailsLayoutContext } from './DetailsLayoutContext.js';\nimport { Overlay, OVERLAY_HANDLE_WIDTH } from './Overlay.js';\nimport {\n  type ExtractedContentSlot,\n  type ExtractedDetailsSlot,\n} from './slots.js';\nimport { useLayoutState } from './useLayoutState.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useSafeLayoutEffect } from '../../../core/hooks/useSafeLayoutEffect.js';\nimport { Drawer } from '../../../overlays/drawer/Drawer.js';\nimport { clampPanelWidth } from '../../split-layout/split-sizing-utils.js';\nimport { SplitLayout } from '../../split-layout/SplitLayout.js';\nimport { convertToPx } from '../../split-layout/width-utils.js';\nimport {\n  PageLayoutPortalContext,\n  type PageLayoutPortalContextValue,\n} from '../shared/PageLayoutPortalContext.js';\nimport { useTeleport } from '../shared/useTeleport.js';\n\ntype TeleportPair = ReturnType<typeof useTeleport>;\n\n// Mirrors the resize-handle width used by SplitLayout (useSplitSizing) so the\n// width reported here matches what the split panel actually renders.\nconst SPLIT_HANDLE_WIDTH = 8;\n\nfunction DetailsLayoutInner({\n  details,\n  content,\n  containerRef,\n  contentTeleport,\n  panelTeleport,\n}: {\n  details: ExtractedDetailsSlot;\n  content: ExtractedContentSlot;\n  containerRef: RefObject<HTMLDivElement | null>;\n  contentTeleport: TeleportPair;\n  panelTeleport: TeleportPair;\n}) {\n  const intl = useIntl();\n  const layout = useLayoutState({ details, containerRef });\n\n  const [intendedWidth, setIntendedWidth] = useState<number>();\n\n  const containerWidth = layout.containerWidth;\n  const controlledWidth = details.config.width;\n\n  const clampForMode = useCallback(\n    (value: number) => {\n      switch (layout.mode) {\n        // Overlay floats over the content, so it reserves no content space; it is\n        // bounded by `maxWidth` (when set) and always by the container edge.\n        case 'overlay':\n          return clampPanelWidth(value, containerWidth, {\n            panelMin: details.config.minWidth,\n            panelMax: details.config.maxWidth ?? Infinity,\n            contentMin: 0,\n            handleWidth: details.config.resizable ? OVERLAY_HANDLE_WIDTH : 0,\n          });\n        case 'split':\n          return clampPanelWidth(value, containerWidth, {\n            panelMin: details.config.minWidth,\n            panelMax: details.config.maxWidth ?? Infinity,\n            contentMin: content.config.minWidth,\n            handleWidth: details.config.resizable ? SPLIT_HANDLE_WIDTH : 0,\n          });\n        default:\n          return value;\n      }\n    },\n    [\n      layout.mode,\n      containerWidth,\n      details.config.minWidth,\n      details.config.maxWidth,\n      details.config.resizable,\n      content.config.minWidth,\n    ],\n  );\n\n  const baseWidth = (() => {\n    if (containerWidth === 0) {\n      return undefined;\n    }\n    if (controlledWidth !== undefined) {\n      return convertToPx(controlledWidth, containerWidth);\n    }\n    return (\n      intendedWidth ?? convertToPx(details.config.defaultWidth, containerWidth)\n    );\n  })();\n  const panelWidth =\n    baseWidth !== undefined ? clampForMode(baseWidth) : undefined;\n\n  const commitWidth = useCallback(\n    (value: number) => {\n      if (controlledWidth === undefined) {\n        setIntendedWidth(value);\n      }\n      details.config.onResize?.(value);\n    },\n    [controlledWidth, details.config],\n  );\n\n  const detailsAriaLabel = intl.formatMessage({\n    defaultMessage: 'Details',\n    id: 'o3A99RFWS+N7bJe8',\n    description: 'Accessible label for the details panel.',\n  });\n\n  const contextValue = useMemo(\n    () => ({\n      collapsed: layout.collapsed,\n      setCollapsed: layout.setCollapsed,\n      preferredLayout: layout.preferredLayoutMode,\n      setPreferredLayout: layout.setPreferredLayoutMode,\n      mode: layout.mode,\n    }),\n    [\n      layout.collapsed,\n      layout.setCollapsed,\n      layout.preferredLayoutMode,\n      layout.setPreferredLayoutMode,\n      layout.mode,\n    ],\n  );\n\n  // Bridge: DetailsLayoutContext.Provider below only covers the split/overlay\n  // DOM rendered by this component. PageLayout.Details children live in a\n  // different React subtree (they're portaled), so the provider doesn't reach\n  // them. Publish the value through the registry so PageLayoutDetails can\n  // re-wrap its portaled children with a provider of the same value.\n  const pageLayoutPortalContext =\n    useContext<PageLayoutPortalContextValue | null>(PageLayoutPortalContext);\n  useSafeLayoutEffect(() => {\n    if (!pageLayoutPortalContext) {\n      return;\n    }\n    pageLayoutPortalContext.registry.register(\n      'detailsLayoutContext',\n      contextValue,\n    );\n  }, [pageLayoutPortalContext, contextValue]);\n\n  const contentClassName = clsx(styles.content, content.domProps.className);\n  const contentNode = (\n    <main ref={content.ref} {...content.domProps} className={contentClassName}>\n      <contentTeleport.Target />\n    </main>\n  );\n\n  // `main` must always render inside SplitLayout.Content \u2014 never per-mode \u2014 or it remounts and resets scroll position (APPDEV-18829).\n  const isSplit = layout.mode === 'split';\n  const isOverlay = layout.mode === 'overlay';\n  const isDrawer = layout.mode === 'drawer';\n  // Render a hidden panel Target while the overlay container is unmeasured\n  // so the teleport host stays attached across the measure frame.\n  const isMeasuringOverlay = isOverlay && layout.containerWidth === 0;\n\n  return (\n    <DetailsLayoutContext.Provider value={contextValue}>\n      <panelTeleport.Source>{details.children}</panelTeleport.Source>\n      <SplitLayout>\n        <SplitLayout.Content minWidth={content.config.minWidth}>\n          {contentNode}\n        </SplitLayout.Content>\n        <SplitLayout.Panel\n          {...(isSplit ? details.domProps : {})}\n          ref={isSplit ? (details.ref as Ref<HTMLDivElement>) : undefined}\n          minWidth={isSplit ? details.config.minWidth : 0}\n          maxWidth={isSplit ? details.config.maxWidth : 0}\n          defaultWidth={details.config.defaultWidth}\n          width={isSplit ? panelWidth : 0}\n          onResize={commitWidth}\n          resizable={isSplit && details.config.resizable}\n          position=\"end\"\n          className={clsx(styles.panel, isSplit && details.domProps.className)}\n          aria-label={isSplit ? detailsAriaLabel : undefined}\n        >\n          {isSplit ? <panelTeleport.Target /> : null}\n        </SplitLayout.Panel>\n      </SplitLayout>\n      {isMeasuringOverlay && (\n        <div hidden aria-hidden=\"true\">\n          <panelTeleport.Target />\n        </div>\n      )}\n      {isOverlay && !isMeasuringOverlay && (\n        <Overlay\n          {...details.domProps}\n          ref={details.ref as Ref<HTMLDivElement>}\n          minWidth={convertToPx(details.config.minWidth, layout.containerWidth)}\n          maxWidth={Math.min(\n            details.config.maxWidth !== undefined\n              ? convertToPx(details.config.maxWidth, layout.containerWidth)\n              : Infinity,\n            details.config.resizable\n              ? layout.containerWidth - OVERLAY_HANDLE_WIDTH\n              : layout.containerWidth,\n          )}\n          width={panelWidth}\n          resizable={details.config.resizable}\n          onResizeEnd={commitWidth}\n        >\n          <panelTeleport.Target />\n        </Overlay>\n      )}\n      {isDrawer && (\n        <Drawer\n          {...details.domProps}\n          ref={details.ref as Ref<HTMLDialogElement>}\n          className={clsx(styles.drawer, details.domProps.className)}\n          aria-label={detailsAriaLabel}\n          isDismissed={layout.collapsed}\n          onDismiss={(state) => layout.setCollapsed(state)}\n          placement=\"right\"\n          width=\"wide\"\n        >\n          <div className={styles.drawerContent}>\n            <panelTeleport.Target />\n          </div>\n        </Drawer>\n      )}\n    </DetailsLayoutContext.Provider>\n  );\n}\n\n/** @internal */\nexport type LayoutRootProps = {\n  details: ExtractedDetailsSlot | null;\n  content: ExtractedContentSlot;\n} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'content'>;\n\n/** @internal */\nexport const DetailsLayout = memo(\n  forwardRef<HTMLDivElement, LayoutRootProps>((props, ref) => {\n    const { className: rootClassName, details, content, ...rootProps } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rootRef = useMergeRefs([ref, containerRef]);\n\n    const contentTeleport = useTeleport();\n    const panelTeleport = useTeleport();\n\n    return (\n      <>\n        <contentTeleport.Source>{content.children}</contentTeleport.Source>\n        <div\n          {...rootProps}\n          ref={rootRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          {details ? (\n            <DetailsLayoutInner\n              details={details}\n              content={content}\n              containerRef={containerRef}\n              contentTeleport={contentTeleport}\n              panelTeleport={panelTeleport}\n            />\n          ) : (\n            <main\n              ref={content.ref}\n              {...content.domProps}\n              className={clsx(styles.content, content.domProps.className)}\n            >\n              <contentTeleport.Target />\n            </main>\n          )}\n        </div>\n      </>\n    );\n  }),\n);\nDetailsLayout.displayName = 'DetailsLayout (forwardRef)';\n"],
+  "mappings": "AAkKM,SAkGA,UAlGA,KAeA,YAfA;AAlKN,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,4BAA4B;AACrC,SAAS,SAAS,4BAA4B;AAK9C,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,OAEK;AACP,SAAS,mBAAmB;AAM5B,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,eAAe,EAAE,SAAS,aAAa,CAAC;AAEvD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAiB;AAE3D,QAAM,iBAAiB,OAAO;AAC9B,QAAM,kBAAkB,QAAQ,OAAO;AAEvC,QAAM,eAAe;AAAA,IACnB,CAAC,UAAkB;AACjB,cAAQ,OAAO,MAAM;AAAA;AAAA;AAAA,QAGnB,KAAK;AACH,iBAAO,gBAAgB,OAAO,gBAAgB;AAAA,YAC5C,UAAU,QAAQ,OAAO;AAAA,YACzB,UAAU,QAAQ,OAAO,YAAY;AAAA,YACrC,YAAY;AAAA,YACZ,aAAa,QAAQ,OAAO,YAAY,uBAAuB;AAAA,UACjE,CAAC;AAAA,QACH,KAAK;AACH,iBAAO,gBAAgB,OAAO,gBAAgB;AAAA,YAC5C,UAAU,QAAQ,OAAO;AAAA,YACzB,UAAU,QAAQ,OAAO,YAAY;AAAA,YACrC,YAAY,QAAQ,OAAO;AAAA,YAC3B,aAAa,QAAQ,OAAO,YAAY,qBAAqB;AAAA,UAC/D,CAAC;AAAA,QACH;AACE,iBAAO;AAAA,MACX;AAAA,IACF;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP;AAAA,MACA,QAAQ,OAAO;AAAA,MACf,QAAQ,OAAO;AAAA,MACf,QAAQ,OAAO;AAAA,MACf,QAAQ,OAAO;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,aAAa,MAAM;AACvB,QAAI,mBAAmB,GAAG;AACxB,aAAO;AAAA,IACT;AACA,QAAI,oBAAoB,QAAW;AACjC,aAAO,YAAY,iBAAiB,cAAc;AAAA,IACpD;AACA,WACE,iBAAiB,YAAY,QAAQ,OAAO,cAAc,cAAc;AAAA,EAE5E,GAAG;AACH,QAAM,aACJ,cAAc,SAAY,aAAa,SAAS,IAAI;AAEtD,QAAM,cAAc;AAAA,IAClB,CAAC,UAAkB;AACjB,UAAI,oBAAoB,QAAW;AACjC,yBAAiB,KAAK;AAAA,MACxB;AACA,cAAQ,OAAO,WAAW,KAAK;AAAA,IACjC;AAAA,IACA,CAAC,iBAAiB,QAAQ,MAAM;AAAA,EAClC;AAEA,QAAM,mBAAmB,KAAK,cAAc;AAAA,IAC1C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,WAAW,OAAO;AAAA,MAClB,cAAc,OAAO;AAAA,MACrB,iBAAiB,OAAO;AAAA,MACxB,oBAAoB,OAAO;AAAA,MAC3B,MAAM,OAAO;AAAA,IACf;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,EACF;AAOA,QAAM,0BACJ,WAAgD,uBAAuB;AACzE,sBAAoB,MAAM;AACxB,QAAI,CAAC,yBAAyB;AAC5B;AAAA,IACF;AACA,4BAAwB,SAAS;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,yBAAyB,YAAY,CAAC;AAE1C,QAAM,mBAAmB,KAAK,OAAO,SAAS,QAAQ,SAAS,SAAS;AACxE,QAAM,cACJ,oBAAC,UAAK,KAAK,QAAQ,KAAM,GAAG,QAAQ,UAAU,WAAW,kBACvD,8BAAC,gBAAgB,QAAhB,EAAuB,GAC1B;AAIF,QAAM,UAAU,OAAO,SAAS;AAChC,QAAM,YAAY,OAAO,SAAS;AAClC,QAAM,WAAW,OAAO,SAAS;AAGjC,QAAM,qBAAqB,aAAa,OAAO,mBAAmB;AAElE,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAAO,cACpC;AAAA,wBAAC,cAAc,QAAd,EAAsB,kBAAQ,UAAS;AAAA,IACxC,qBAAC,eACC;AAAA,0BAAC,YAAY,SAAZ,EAAoB,UAAU,QAAQ,OAAO,UAC3C,uBACH;AAAA,MACA;AAAA,QAAC,YAAY;AAAA,QAAZ;AAAA,UACE,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,UACnC,KAAK,UAAW,QAAQ,MAA8B;AAAA,UACtD,UAAU,UAAU,QAAQ,OAAO,WAAW;AAAA,UAC9C,UAAU,UAAU,QAAQ,OAAO,WAAW;AAAA,UAC9C,cAAc,QAAQ,OAAO;AAAA,UAC7B,OAAO,UAAU,aAAa;AAAA,UAC9B,UAAU;AAAA,UACV,WAAW,WAAW,QAAQ,OAAO;AAAA,UACrC,UAAS;AAAA,UACT,WAAW,KAAK,OAAO,OAAO,WAAW,QAAQ,SAAS,SAAS;AAAA,UACnE,cAAY,UAAU,mBAAmB;AAAA,UAExC,oBAAU,oBAAC,cAAc,QAAd,EAAqB,IAAK;AAAA;AAAA,MACxC;AAAA,OACF;AAAA,IACC,sBACC,oBAAC,SAAI,QAAM,MAAC,eAAY,QACtB,8BAAC,cAAc,QAAd,EAAqB,GACxB;AAAA,IAED,aAAa,CAAC,sBACb;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,QAAQ;AAAA,QACZ,KAAK,QAAQ;AAAA,QACb,UAAU,YAAY,QAAQ,OAAO,UAAU,OAAO,cAAc;AAAA,QACpE,UAAU,KAAK;AAAA,UACb,QAAQ,OAAO,aAAa,SACxB,YAAY,QAAQ,OAAO,UAAU,OAAO,cAAc,IAC1D;AAAA,UACJ,QAAQ,OAAO,YACX,OAAO,iBAAiB,uBACxB,OAAO;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QACP,WAAW,QAAQ,OAAO;AAAA,QAC1B,aAAa;AAAA,QAEb,8BAAC,cAAc,QAAd,EAAqB;AAAA;AAAA,IACxB;AAAA,IAED,YACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,QAAQ;AAAA,QACZ,KAAK,QAAQ;AAAA,QACb,WAAW,KAAK,OAAO,QAAQ,QAAQ,SAAS,SAAS;AAAA,QACzD,cAAY;AAAA,QACZ,aAAa,OAAO;AAAA,QACpB,WAAW,CAAC,UAAU,OAAO,aAAa,KAAK;AAAA,QAC/C,WAAU;AAAA,QACV,OAAM;AAAA,QAEN,8BAAC,SAAI,WAAW,OAAO,eACrB,8BAAC,cAAc,QAAd,EAAqB,GACxB;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;AASO,MAAM,gBAAgB;AAAA,EAC3B,WAA4C,CAAC,OAAO,QAAQ;AAC1D,UAAM,EAAE,WAAW,eAAe,SAAS,SAAS,GAAG,UAAU,IAAI;AAErE,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,UAAU,aAAa,CAAC,KAAK,YAAY,CAAC;AAEhD,UAAM,kBAAkB,YAAY;AACpC,UAAM,gBAAgB,YAAY;AAElC,WACE,iCACE;AAAA,0BAAC,gBAAgB,QAAhB,EAAwB,kBAAQ,UAAS;AAAA,MAC1C;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,WAAW,KAAK,OAAO,YAAY,aAAa;AAAA,UAE/C,oBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,QAAQ;AAAA,cACZ,GAAG,QAAQ;AAAA,cACZ,WAAW,KAAK,OAAO,SAAS,QAAQ,SAAS,SAAS;AAAA,cAE1D,8BAAC,gBAAgB,QAAhB,EAAuB;AAAA;AAAA,UAC1B;AAAA;AAAA,MAEJ;AAAA,OACF;AAAA,EAEJ,CAAC;AACH;AACA,cAAc,cAAc;",
   "names": []
 }

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

@@ -1,10 +1,10 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "./DetailsLayout.css";
-var content = "_1377n3n2-3-10-4";
-var drawer = "_1377n3n3-3-10-4";
-var drawerContent = "_1377n3n4-3-10-4";
-var layoutRoot = "_1377n3n0-3-10-4";
-var panel = "_1377n3n1-3-10-4";
+var content = "_1377n3n2-3-11-0";
+var drawer = "_1377n3n3-3-11-0";
+var drawerContent = "_1377n3n4-3-11-0";
+var layoutRoot = "_1377n3n0-3-11-0";
+var panel = "_1377n3n1-3-11-0";
 export {
   content,
   drawer,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayout.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DetailsLayout.css';\nexport var content = '_1377n3n2-3-10-4';\nexport var drawer = '_1377n3n3-3-10-4';\nexport var drawerContent = '_1377n3n4-3-10-4';\nexport var layoutRoot = '_1377n3n0-3-10-4';\nexport var panel = '_1377n3n1-3-10-4';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DetailsLayout.css';\nexport var content = '_1377n3n2-3-11-0';\nexport var drawer = '_1377n3n3-3-11-0';\nexport var drawerContent = '_1377n3n4-3-11-0';\nexport var layoutRoot = '_1377n3n0-3-11-0';\nexport var panel = '_1377n3n1-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,QAAQ;",
   "names": []
 }

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/Overlay.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './Overlay.css';\nexport var handleContainer = '_15qr1eq2-3-10-4';\nexport var overlay = '_15qr1eq0-3-10-4';\nexport var overlayContent = '_15qr1eq1-3-10-4';\nexport var resizeHandle = '_15qr1eq3-3-10-4';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './Overlay.css';\nexport var handleContainer = '_15qr1eq2-3-11-0';\nexport var overlay = '_15qr1eq0-3-11-0';\nexport var overlayContent = '_15qr1eq1-3-11-0';\nexport var resizeHandle = '_15qr1eq3-3-11-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

@@ -137,7 +137,7 @@ const PageLayoutDetails = forwardRef(
   function PageLayoutDetails2({
     children,
     minWidth = detailsDefaults.minWidth,
-    maxWidth = detailsDefaults.maxWidth,
+    maxWidth,
     defaultWidth = detailsDefaults.defaultWidth,
     resizable = detailsDefaults.resizable,
     collapsed,

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 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 {\n  DetailsLayoutContext,\n  type DetailsLayoutContextValue,\n} 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\nconst noop = () => undefined;\n\n/**\n * Placeholder context used while the real `DetailsLayoutInner` value is still\n * being bridged through the slot registry (it is published one commit late via\n * a layout effect). Keeps `DetailsControlBar` from reading a null context on\n * first render when it is correctly placed inside the portaled details\n * children. Replaced by the live value on the next commit.\n */\nconst PENDING_DETAILS_CONTEXT: DetailsLayoutContextValue = {\n  collapsed: false,\n  setCollapsed: noop,\n  preferredLayout: 'split',\n  setPreferredLayout: noop,\n  mode: 'split',\n};\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      onBreakpointTransition,\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          onBreakpointTransition,\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        onBreakpointTransition,\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<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 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      onBreakpointTransition,\n      layout,\n      defaultLayout = detailsDefaults.defaultLayout,\n      onLayoutChange,\n      breakpoint = detailsDefaults.breakpoint,\n      onResize,\n      width,\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          onBreakpointTransition,\n          layout,\n          defaultLayout,\n          onLayoutChange,\n          breakpoint,\n          onResize,\n          width,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        minWidth,\n        maxWidth,\n        defaultWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        onBreakpointTransition,\n        layout,\n        defaultLayout,\n        onLayoutChange,\n        breakpoint,\n        onResize,\n        width,\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    // The bridged value is published one commit late (DetailsLayoutInner\n    // registers it in a layout effect). Until it arrives, provide a non-null\n    // pending value so the portaled ControlBar can read the context on first\n    // render instead of falling back to the provider default.\n    const providedContext = detailsLayoutContext ?? PENDING_DETAILS_CONTEXT;\n\n    return createPortal(\n      <DetailsLayoutContext.Provider value={providedContext}>\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 {\n  DetailsLayoutContext,\n  type DetailsLayoutContextValue,\n} 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\nconst noop = () => undefined;\n\n/**\n * Placeholder context used while the real `DetailsLayoutInner` value is still\n * being bridged through the slot registry (it is published one commit late via\n * a layout effect). Keeps `DetailsControlBar` from reading a null context on\n * first render when it is correctly placed inside the portaled details\n * children. Replaced by the live value on the next commit.\n */\nconst PENDING_DETAILS_CONTEXT: DetailsLayoutContextValue = {\n  collapsed: false,\n  setCollapsed: noop,\n  preferredLayout: 'split',\n  setPreferredLayout: noop,\n  mode: 'split',\n};\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<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      ...domProps\n    }: SidebarProps,\n    ref: ForwardedRef<HTMLElement>,\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          onBreakpointTransition,\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        onBreakpointTransition,\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<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 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<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      ...domProps\n    }: DetailsProps,\n    ref: ForwardedRef<HTMLElement>,\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          onBreakpointTransition,\n          layout,\n          defaultLayout,\n          onLayoutChange,\n          breakpoint,\n          onResize,\n          width,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        minWidth,\n        maxWidth,\n        defaultWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        onBreakpointTransition,\n        layout,\n        defaultLayout,\n        onLayoutChange,\n        breakpoint,\n        onResize,\n        width,\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    // The bridged value is published one commit late (DetailsLayoutInner\n    // registers it in a layout effect). Until it arrives, provide a non-null\n    // pending value so the portaled ControlBar can read the context on first\n    // render instead of falling back to the provider default.\n    const providedContext = detailsLayoutContext ?? PENDING_DETAILS_CONTEXT;\n\n    return createPortal(\n      <DetailsLayoutContext.Provider value={providedContext}>\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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",
   "names": ["PageLayoutHeader", "PageLayoutSidebar", "PageLayoutContent", "PageLayoutDetails"]
 }

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

@@ -7,11 +7,10 @@ const sidebarDefaults = {
   breakpoint: 960
 };
 const contentDefaults = {
-  minWidth: 0
+  minWidth: "50%"
 };
 const detailsDefaults = {
   minWidth: 320,
-  maxWidth: "50%",
   defaultWidth: "25%",
   resizable: true,
   defaultCollapsed: false,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/shared/slot-defaults.ts"],
-  "sourcesContent": ["import type { PanelWidth } from '../../split-layout/width-utils.js';\nimport type { LayoutMode } from '../details-layout/DetailsLayoutContext.js';\n\nexport const sidebarDefaults: {\n  defaultWidth: PanelWidth;\n  minWidth: PanelWidth;\n  maxWidth: PanelWidth;\n  resizable: boolean;\n  defaultCollapsed: boolean;\n  breakpoint: number;\n} = {\n  defaultWidth: '15%',\n  minWidth: 200,\n  maxWidth: '50%',\n  resizable: true,\n  defaultCollapsed: false,\n  breakpoint: 960,\n};\n\nexport const contentDefaults: { minWidth: PanelWidth } = {\n  minWidth: 0,\n};\n\nexport const detailsDefaults: {\n  minWidth: PanelWidth;\n  maxWidth: PanelWidth;\n  defaultWidth: PanelWidth;\n  resizable: boolean;\n  defaultCollapsed: boolean;\n  defaultLayout: LayoutMode;\n  breakpoint: number;\n} = {\n  minWidth: 320,\n  maxWidth: '50%',\n  defaultWidth: '25%',\n  resizable: true,\n  defaultCollapsed: false,\n  defaultLayout: 'split',\n  breakpoint: 600,\n};\n"],
-  "mappings": "AAGO,MAAM,kBAOT;AAAA,EACF,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,YAAY;AACd;AAEO,MAAM,kBAA4C;AAAA,EACvD,UAAU;AACZ;AAEO,MAAM,kBAQT;AAAA,EACF,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,YAAY;AACd;",
+  "sourcesContent": ["import type { PanelWidth } from '../../split-layout/width-utils.js';\nimport type { LayoutMode } from '../details-layout/DetailsLayoutContext.js';\n\nexport const sidebarDefaults: {\n  defaultWidth: PanelWidth;\n  minWidth: PanelWidth;\n  maxWidth: PanelWidth;\n  resizable: boolean;\n  defaultCollapsed: boolean;\n  breakpoint: number;\n} = {\n  defaultWidth: '15%',\n  minWidth: 200,\n  maxWidth: '50%',\n  resizable: true,\n  defaultCollapsed: false,\n  breakpoint: 960,\n};\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: { minWidth: PanelWidth } = {\n  minWidth: '50%',\n};\n\nexport const detailsDefaults: {\n  minWidth: PanelWidth;\n  defaultWidth: PanelWidth;\n  resizable: boolean;\n  defaultCollapsed: boolean;\n  defaultLayout: LayoutMode;\n  breakpoint: number;\n} = {\n  minWidth: 320,\n  defaultWidth: '25%',\n  resizable: true,\n  defaultCollapsed: false,\n  defaultLayout: 'split',\n  breakpoint: 600,\n};\n"],
+  "mappings": "AAGO,MAAM,kBAOT;AAAA,EACF,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,YAAY;AACd;AAKO,MAAM,kBAA4C;AAAA,EACvD,UAAU;AACZ;AAEO,MAAM,kBAOT;AAAA,EACF,UAAU;AAAA,EACV,cAAc;AAAA,EACd,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,YAAY;AACd;",
   "names": []
 }

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

@@ -1,9 +1,9 @@
-._1mr4xg70-3-10-4 {
+._1mr4xg70-3-11-0 {
   height: 100%;
   overflow: hidden;
   position: relative;
 }
-._1mr4xg71-3-10-4 {
+._1mr4xg71-3-11-0 {
   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-10-4 ._1mr4xg71-3-10-4 {
+._1jgl8s50-3-11-0 ._1mr4xg71-3-11-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1mr4xg72-3-10-4 {
+._1mr4xg72-3-11-0 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   flex-grow: 1;
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1mr4xg73-3-10-4 {
+._1mr4xg73-3-11-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg74-3-10-4 {
+._1mr4xg74-3-11-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);
 }
-._1jgl8s50-3-10-4 ._1mr4xg74-3-10-4 {
+._1jgl8s50-3-11-0 ._1mr4xg74-3-11-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-10-4 ._1mr4xg74-3-10-4:hover {
+._1jgl8s50-3-11-0 ._1mr4xg74-3-11-0:hover {
   border-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-10-4 ._1mr4xg74-3-10-4:active {
+._1jgl8s50-3-11-0 ._1mr4xg74-3-11-0:active {
   border-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._1mr4xg75-3-10-4 {
+._1mr4xg75-3-11-0 {
   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-10-4:hover, ._1mr4xg75-3-10-4:focus, ._1mr4xg74-3-10-4:hover ._1mr4xg75-3-10-4 {
+._1mr4xg75-3-11-0:hover, ._1mr4xg75-3-11-0:focus, ._1mr4xg74-3-11-0:hover ._1mr4xg75-3-11-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   translate: calc(0px - var(--dt-spacings-size-16, 16px) / 2);
 }
-._1jgl8s50-3-10-4 ._1mr4xg75-3-10-4, ._1jgl8s50-3-10-4 ._1mr4xg75-3-10-4:hover, ._1jgl8s50-3-10-4 ._1mr4xg75-3-10-4:focus, ._1jgl8s50-3-10-4 ._1mr4xg74-3-10-4:hover ._1mr4xg75-3-10-4 {
+._1jgl8s50-3-11-0 ._1mr4xg75-3-11-0, ._1jgl8s50-3-11-0 ._1mr4xg75-3-11-0:hover, ._1jgl8s50-3-11-0 ._1mr4xg75-3-11-0:focus, ._1jgl8s50-3-11-0 ._1mr4xg74-3-11-0:hover ._1mr4xg75-3-11-0 {
   border-top-right-radius: 0;
   translate: 0;
   box-shadow: none;
 }
-._1mr4xg76-3-10-4 {
+._1mr4xg76-3-11-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
 }
-._1mr4xg77-3-10-4 {
+._1mr4xg77-3-11-0 {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-._1mr4xg78-3-10-4 {
+._1mr4xg78-3-11-0 {
   box-sizing: border-box;
   flex-grow: 1;
 }
-._1mr4xg79-3-10-4 {
+._1mr4xg79-3-11-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1mr4xg7b-3-10-4 {
-  --_1mr4xg7a-3-10-4: 24px;
+._1mr4xg7b-3-11-0 {
+  --_1mr4xg7a-3-11-0: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
   left: -2px;
   line-height: 0;
   z-index: 1;
 }
-._1mr4xg7c-3-10-4 {
-  --_1mr4xg7a-3-10-4: 24px;
+._1mr4xg7c-3-11-0 {
+  --_1mr4xg7a-3-11-0: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
   left: 2px;
   line-height: 0;
   z-index: 1;
 }
-._1mr4xg7d-3-10-4 {
-  width: var(--_1mr4xg7a-3-10-4);
-  height: var(--_1mr4xg7a-3-10-4);
+._1mr4xg7d-3-11-0 {
+  width: var(--_1mr4xg7a-3-11-0);
+  height: var(--_1mr4xg7a-3-11-0);
   box-sizing: border-box;
 }
-._1mr4xg7e-3-10-4 {
+._1mr4xg7e-3-11-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);
@@ -111,52 +111,52 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._1mr4xg7e-3-10-4:hover {
+._1mr4xg7e-3-11-0:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1mr4xg7e-3-10-4:focus-visible {
+._1mr4xg7e-3-11-0:focus-visible {
   opacity: 1;
 }
-._1mr4xg71-3-10-4:hover ~ ._1mr4xg73-3-10-4 ._1mr4xg7e-3-10-4, ._1mr4xg73-3-10-4:hover ._1mr4xg7e-3-10-4 {
+._1mr4xg71-3-11-0:hover ~ ._1mr4xg73-3-11-0 ._1mr4xg7e-3-11-0, ._1mr4xg73-3-11-0:hover ._1mr4xg7e-3-11-0 {
   opacity: 1;
 }
-._1jgl8s50-3-10-4 ._1mr4xg71-3-10-4:hover ~ ._1mr4xg73-3-10-4 ._1mr4xg7e-3-10-4, ._1jgl8s50-3-10-4 ._1mr4xg73-3-10-4:hover ._1mr4xg7e-3-10-4 {
+._1jgl8s50-3-11-0 ._1mr4xg71-3-11-0:hover ~ ._1mr4xg73-3-11-0 ._1mr4xg7e-3-11-0, ._1jgl8s50-3-11-0 ._1mr4xg73-3-11-0:hover ._1mr4xg7e-3-11-0 {
   opacity: 1;
   box-shadow: none;
 }
-._1jgl8s50-3-10-4 ._1mr4xg7e-3-10-4 {
+._1jgl8s50-3-11-0 ._1mr4xg7e-3-11-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;
 }
-._1jgl8s50-3-10-4 ._1mr4xg7e-3-10-4:hover {
+._1jgl8s50-3-11-0 ._1mr4xg7e-3-11-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   opacity: 1;
 }
-._1jgl8s50-3-10-4 ._1mr4xg7e-3-10-4:active {
+._1jgl8s50-3-11-0 ._1mr4xg7e-3-11-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1jgl8s50-3-10-4 ._1mr4xg7e-3-10-4:focus-visible {
+._1jgl8s50-3-11-0 ._1mr4xg7e-3-11-0:focus-visible {
   opacity: 1;
 }
-._1mr4xg7f-3-10-4 {
+._1mr4xg7f-3-11-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg7f-3-10-4:hover {
+._1mr4xg7f-3-11-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-10-4 ._1mr4xg7f-3-10-4 {
+._1jgl8s50-3-11-0 ._1mr4xg7f-3-11-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-10-4 ._1mr4xg7f-3-10-4:hover {
+._1jgl8s50-3-11-0 ._1mr4xg7f-3-11-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   box-shadow: none;
 }
-._1jgl8s50-3-10-4 ._1mr4xg7f-3-10-4:active {
+._1jgl8s50-3-11-0 ._1mr4xg7f-3-11-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }