@dynatrace/strato-components 3.13.3 → 3.14.1

package/esm/content/terminology-overlay/TerminologyOverlay.sty.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/content/terminology-overlay/TerminologyOverlay.css.ts"],
-  "sourcesContent": ["import './TerminologyOverlay.css';\nexport var trigger = '_1dd8zuz0-3-13-3';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsControlBar.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport { Children, type PropsWithChildren } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  OverlayRightIcon,\n  SplitPanelRightIcon,\n  XmarkIcon,\n} from '@dynatrace/strato-icons';\n\nimport * as styles from './DetailsControlBar.sty.js';\nimport { useDetailsLayoutContext } from './DetailsLayoutContext.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport type { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport { Divider } from '../../divider/Divider.js';\n\n/**\n * Props for the `DetailsControlBar` component that renders layout and close controls inside the details panel.\n * @public\n */\nexport interface DetailsControlBarProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\n/** @internal */\nexport const DetailsControlBar = (props: DetailsControlBarProps) => {\n  const { children, className, ...restProps } = props;\n  const context = useDetailsLayoutContext();\n  const intl = useIntl();\n\n  const hasCustomActions = Children.count(children) > 0;\n\n  const closeLabel = intl.formatMessage({\n    defaultMessage: 'Close details',\n    id: 'UK0OoP7XF++evklW',\n    description: 'Label for the button that closes the details panel.',\n  });\n\n  const switchToOverlayLabel = intl.formatMessage({\n    defaultMessage: 'Switch to overlay',\n    id: '+mEjL2q8RACwzIMR',\n    description:\n      'Label for the button that switches the details panel to overlay mode.',\n  });\n\n  const switchToSplitLabel = intl.formatMessage({\n    defaultMessage: 'Switch to side-by-side',\n    id: 'RST92XLweEz0Qott',\n    description:\n      'Label for the button that switches the details panel to split mode.',\n  });\n\n  const handleClose = () => {\n    context?.setCollapsed(true);\n  };\n\n  const handleLayoutToggle = () => {\n    if (!context) {\n      return;\n    }\n\n    context.setPreferredLayout((prev) =>\n      prev === 'split' ? 'overlay' : 'split',\n    );\n  };\n\n  const showLayoutToggle = context?.mode\n    ? ['overlay', 'split'].includes(context.mode)\n    : false;\n  const isSplit = context?.preferredLayout === 'split';\n\n  return (\n    <div {...restProps} className={clsx(styles.controlBar, className)}>\n      {hasCustomActions && (\n        <div className={styles.customActions}>{children}</div>\n      )}\n      {hasCustomActions && (\n        <Divider orientation=\"vertical\" as=\"hr\" flexItem aria-hidden />\n      )}\n      <div className={styles.defaultActions}>\n        {showLayoutToggle && (\n          <Button\n            aria-label={isSplit ? switchToOverlayLabel : switchToSplitLabel}\n            onClick={handleLayoutToggle}\n          >\n            <Button.Prefix>\n              {isSplit ? <OverlayRightIcon /> : <SplitPanelRightIcon />}\n            </Button.Prefix>\n          </Button>\n        )}\n        <Button\n          aria-label={closeLabel}\n          onClick={handleClose}\n          data-dt-children-name=\"CloseX\"\n        >\n          <Button.Prefix>\n            <XmarkIcon />\n          </Button.Prefix>\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nDetailsControlBar.displayName = 'PageLayout.Details.ControlBar';\n"],
-  "mappings": "AAkFQ,cAKF,YALE;AAlFR,SAAS,YAAY;AACrB,SAAS,gBAAwC;AACjD,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,+BAA+B;AACxC,SAAS,cAAc;AAMvB,SAAS,eAAe;AAejB,MAAM,oBAAoB,CAAC,UAAkC;AAClE,QAAM,EAAE,UAAU,WAAW,GAAG,UAAU,IAAI;AAC9C,QAAM,UAAU,wBAAwB;AACxC,QAAM,OAAO,QAAQ;AAErB,QAAM,mBAAmB,SAAS,MAAM,QAAQ,IAAI;AAEpD,QAAM,aAAa,KAAK,cAAc;AAAA,IACpC,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM,uBAAuB,KAAK,cAAc;AAAA,IAC9C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AAED,QAAM,qBAAqB,KAAK,cAAc;AAAA,IAC5C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AAED,QAAM,cAAc,MAAM;AACxB,aAAS,aAAa,IAAI;AAAA,EAC5B;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,YAAQ;AAAA,MAAmB,CAAC,SAC1B,SAAS,UAAU,YAAY;AAAA,IACjC;AAAA,EACF;AAEA,QAAM,mBAAmB,SAAS,OAC9B,CAAC,WAAW,OAAO,EAAE,SAAS,QAAQ,IAAI,IAC1C;AACJ,QAAM,UAAU,SAAS,oBAAoB;AAE7C,SACE,qBAAC,SAAK,GAAG,WAAW,WAAW,KAAK,OAAO,YAAY,SAAS,GAC7D;AAAA,wBACC,oBAAC,SAAI,WAAW,OAAO,eAAgB,UAAS;AAAA,IAEjD,oBACC,oBAAC,WAAQ,aAAY,YAAW,IAAG,MAAK,UAAQ,MAAC,eAAW,MAAC;AAAA,IAE/D,qBAAC,SAAI,WAAW,OAAO,gBACpB;AAAA,0BACC;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,UAAU,uBAAuB;AAAA,UAC7C,SAAS;AAAA,UAET,8BAAC,OAAO,QAAP,EACE,oBAAU,oBAAC,oBAAiB,IAAK,oBAAC,uBAAoB,GACzD;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,cAAY;AAAA,UACZ,SAAS;AAAA,UACT,yBAAsB;AAAA,UAEtB,8BAAC,OAAO,QAAP,EACC,8BAAC,aAAU,GACb;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,kBAAkB,cAAc;",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsControlBar.css.ts"],
-  "sourcesContent": ["import './DetailsControlBar.css';\nexport var controlBar = '_1y5ro0l0-3-13-3';\nexport var customActions = '_1y5ro0l1-3-13-3';\nexport var defaultActions = '_1y5ro0l2-3-13-3';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
-  "names": []
-}

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

@@ -1,34 +0,0 @@
-._1377n3n0-3-13-3 {
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
-}
-._1377n3n1-3-13-3 {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  height: 100%;
-  overflow-y: auto;
-  position: relative;
-  padding: var(--dt-spacings-size-16, 16px);
-  background-color: var(--dt-colors-background-base-default, #f9f9fa);
-  border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
-}
-._1jgl8s50-3-13-3 ._1377n3n1-3-13-3 {
-  border-top-left-radius: 0;
-}
-._1377n3n2-3-13-3 {
-  box-sizing: border-box;
-  height: 100%;
-  overflow-y: auto;
-}
-._1377n3n3-3-13-3 {
-  box-sizing: border-box;
-  padding: 0;
-}
-._1377n3n4-3-13-3 {
-  box-sizing: border-box;
-  padding: var(--dt-spacings-size-16, 16px);
-  height: 100%;
-}

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

@@ -1,226 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import {
-  forwardRef,
-  memo,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { useIntl } from "react-intl";
-import * as styles from "./DetailsLayout.sty.js";
-import { DetailsLayoutContext } from "./DetailsLayoutContext.js";
-import { Overlay, OVERLAY_HANDLE_WIDTH } from "./Overlay.js";
-import { useLayoutState } from "./useLayoutState.js";
-import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
-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 { convertToPx } from "../../split-layout/width-utils.js";
-import {
-  PageLayoutPortalContext
-} from "../shared/PageLayoutPortalContext.js";
-import { useTeleport } from "../shared/useTeleport.js";
-const SPLIT_HANDLE_WIDTH = 8;
-function DetailsLayoutInner({
-  details,
-  content,
-  containerRef,
-  contentTeleport,
-  panelTeleport
-}) {
-  const intl = useIntl();
-  const layout = useLayoutState({ details, containerRef });
-  const [intendedWidth, setIntendedWidth] = useState();
-  const containerWidth = layout.containerWidth;
-  const controlledWidth = details.config.width;
-  const clampForMode = useCallback(
-    (value) => {
-      switch (layout.mode) {
-        // 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 ?? Infinity,
-            contentMin: content.config.minWidth,
-            handleWidth: details.config.resizable ? SPLIT_HANDLE_WIDTH : 0
-          });
-        default:
-          return value;
-      }
-    },
-    [
-      layout.mode,
-      containerWidth,
-      details.config.minWidth,
-      details.config.maxWidth,
-      details.config.resizable,
-      content.config.minWidth
-    ]
-  );
-  const baseWidth = (() => {
-    if (containerWidth === 0) {
-      return void 0;
-    }
-    if (controlledWidth !== void 0) {
-      return convertToPx(controlledWidth, containerWidth);
-    }
-    return intendedWidth ?? convertToPx(details.config.defaultWidth, containerWidth);
-  })();
-  const panelWidth = baseWidth !== void 0 ? clampForMode(baseWidth) : void 0;
-  const commitWidth = useCallback(
-    (value) => {
-      if (controlledWidth === void 0) {
-        setIntendedWidth(value);
-      }
-      details.config.onResize?.(value);
-    },
-    [controlledWidth, details.config]
-  );
-  const detailsAriaLabel = intl.formatMessage({
-    defaultMessage: "Details",
-    id: "o3A99RFWS+N7bJe8",
-    description: "Accessible label for the details panel."
-  });
-  const contextValue = useMemo(
-    () => ({
-      collapsed: layout.collapsed,
-      setCollapsed: layout.setCollapsed,
-      preferredLayout: layout.preferredLayoutMode,
-      setPreferredLayout: layout.setPreferredLayoutMode,
-      mode: layout.mode
-    }),
-    [
-      layout.collapsed,
-      layout.setCollapsed,
-      layout.preferredLayoutMode,
-      layout.setPreferredLayoutMode,
-      layout.mode
-    ]
-  );
-  const pageLayoutPortalContext = useContext(PageLayoutPortalContext);
-  useSafeLayoutEffect(() => {
-    if (!pageLayoutPortalContext) {
-      return;
-    }
-    pageLayoutPortalContext.registry.register(
-      "detailsLayoutContext",
-      contextValue
-    );
-  }, [pageLayoutPortalContext, contextValue]);
-  const contentClassName = clsx(styles.content, content.domProps.className);
-  const contentNode = /* @__PURE__ */ jsx("main", { ref: content.ref, ...content.domProps, className: contentClassName, children: /* @__PURE__ */ jsx(contentTeleport.Target, {}) });
-  const isSplit = layout.mode === "split";
-  const isOverlay = layout.mode === "overlay";
-  const isDrawer = layout.mode === "drawer";
-  const isMeasuringOverlay = isOverlay && layout.containerWidth === 0;
-  const panelClassName = isSplit ? clsx(styles.panel, details.domProps.className) : void 0;
-  return /* @__PURE__ */ jsxs(DetailsLayoutContext.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ jsx(panelTeleport.Source, { children: details.children }),
-    /* @__PURE__ */ jsxs(SplitLayout, { children: [
-      /* @__PURE__ */ jsx(SplitLayout.Content, { minWidth: content.config.minWidth, children: contentNode }),
-      /* @__PURE__ */ jsx(
-        SplitLayout.Panel,
-        {
-          ...isSplit ? details.domProps : {},
-          ref: isSplit ? details.ref : void 0,
-          minWidth: isSplit ? details.config.minWidth : 0,
-          maxWidth: isSplit ? details.config.maxWidth : 0,
-          defaultWidth: details.config.defaultWidth,
-          width: isSplit ? panelWidth : 0,
-          onResize: commitWidth,
-          resizable: isSplit && details.config.resizable,
-          position: "end",
-          className: panelClassName,
-          "aria-label": isSplit ? detailsAriaLabel : void 0,
-          children: isSplit ? /* @__PURE__ */ jsx(panelTeleport.Target, {}) : null
-        }
-      )
-    ] }),
-    isMeasuringOverlay && /* @__PURE__ */ jsx("div", { hidden: true, "aria-hidden": "true", children: /* @__PURE__ */ jsx(panelTeleport.Target, {}) }),
-    isOverlay && !isMeasuringOverlay && /* @__PURE__ */ jsx(
-      Overlay,
-      {
-        ...details.domProps,
-        ref: details.ref,
-        minWidth: convertToPx(details.config.minWidth, 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,
-        children: /* @__PURE__ */ jsx(panelTeleport.Target, {})
-      }
-    ),
-    isDrawer && /* @__PURE__ */ jsx(
-      Drawer,
-      {
-        ...details.domProps,
-        ref: details.ref,
-        className: clsx(styles.drawer, details.domProps.className),
-        "aria-label": detailsAriaLabel,
-        isDismissed: layout.collapsed,
-        onDismiss: (state) => layout.setCollapsed(state),
-        placement: "right",
-        width: "wide",
-        children: /* @__PURE__ */ jsx("div", { className: styles.drawerContent, children: /* @__PURE__ */ jsx(panelTeleport.Target, {}) })
-      }
-    )
-  ] });
-}
-const DetailsLayout = memo(
-  forwardRef((props, ref) => {
-    const { className: rootClassName, details, content, ...rootProps } = props;
-    const containerRef = useRef(null);
-    const rootRef = useMergeRefs([ref, containerRef]);
-    const contentTeleport = useTeleport();
-    const panelTeleport = useTeleport();
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(contentTeleport.Source, { children: content.children }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ...rootProps,
-          ref: rootRef,
-          className: clsx(styles.layoutRoot, rootClassName),
-          children: details ? /* @__PURE__ */ jsx(
-            DetailsLayoutInner,
-            {
-              details,
-              content,
-              containerRef,
-              contentTeleport,
-              panelTeleport
-            }
-          ) : /* @__PURE__ */ jsx(
-            "main",
-            {
-              ref: content.ref,
-              ...content.domProps,
-              className: clsx(styles.content, content.domProps.className),
-              children: /* @__PURE__ */ jsx(contentTeleport.Target, {})
-            }
-          )
-        }
-      )
-    ] });
-  })
-);
-DetailsLayout.displayName = "DetailsLayout (forwardRef)";
-export {
-  DetailsLayout
-};
-//# sourceMappingURL=DetailsLayout.js.map

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

@@ -1,7 +0,0 @@
-{
-  "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 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  // Split-only: the panel's padding would floor the border-box width of the\n  // 0-width column and reserve space in every other mode (APPDEV-19351).\n  const panelClassName = isSplit\n    ? clsx(styles.panel, details.domProps.className)\n    : undefined;\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={panelClassName}\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": "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",
-  "names": []
-}

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

@@ -1,15 +0,0 @@
-import "../../../core/components/app-root/AppRoot.css";
-import "./DetailsLayout.css";
-var content = "_1377n3n2-3-13-3";
-var drawer = "_1377n3n3-3-13-3";
-var drawerContent = "_1377n3n4-3-13-3";
-var layoutRoot = "_1377n3n0-3-13-3";
-var panel = "_1377n3n1-3-13-3";
-export {
-  content,
-  drawer,
-  drawerContent,
-  layoutRoot,
-  panel
-};
-//# sourceMappingURL=DetailsLayout.sty.js.map

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

@@ -1,7 +0,0 @@
-{
-  "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-13-3';\nexport var drawer = '_1377n3n3-3-13-3';\nexport var drawerContent = '_1377n3n4-3-13-3';\nexport var layoutRoot = '_1377n3n0-3-13-3';\nexport var panel = '_1377n3n1-3-13-3';"],
-  "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/DetailsLayoutContext.js

@@ -1,13 +0,0 @@
-import {
-  createContext,
-  useContext
-} from "react";
-const DetailsLayoutContext = createContext(null);
-function useDetailsLayoutContext() {
-  return useContext(DetailsLayoutContext);
-}
-export {
-  DetailsLayoutContext,
-  useDetailsLayoutContext
-};
-//# sourceMappingURL=DetailsLayoutContext.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayoutContext.ts"],
-  "sourcesContent": ["import {\n  createContext,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n} from 'react';\n\n/**\n * Determines how the details panel is rendered relative to the content.\n * @public\n */\nexport type LayoutMode = 'split' | 'overlay';\n\n/** @internal */\nexport type RenderedLayout = 'split' | 'collapsed' | 'overlay' | 'drawer';\n\n/** @internal */\nexport interface DetailsLayoutContextValue {\n  collapsed: boolean;\n  setCollapsed: Dispatch<SetStateAction<boolean>>;\n  preferredLayout: LayoutMode;\n  setPreferredLayout: Dispatch<SetStateAction<LayoutMode>>;\n  mode: RenderedLayout;\n}\n\n/** @internal */\nexport const DetailsLayoutContext =\n  createContext<DetailsLayoutContextValue | null>(null);\n\n/** @internal */\nexport function useDetailsLayoutContext() {\n  return useContext(DetailsLayoutContext);\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAqBA,MAAM,uBACX,cAAgD,IAAI;AAG/C,SAAS,0BAA0B;AACxC,SAAO,WAAW,oBAAoB;AACxC;",
-  "names": []
-}

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

@@ -1,111 +0,0 @@
-._15qr1eq0-3-13-3 {
-  position: absolute;
-  z-index: 1;
-  right: 0;
-  top: 0;
-  box-sizing: border-box;
-  height: 100%;
-  max-width: 100%;
-  background-color: var(--dt-colors-background-base-default, #f9f9fa);
-  border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
-  border-bottom-left-radius: var(--dt-borders-radius-surface-default, 12px);
-  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-13-3 ._15qr1eq0-3-13-3 {
-  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-13-3 {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  padding: var(--dt-spacings-size-16, 16px);
-  flex-grow: 1;
-}
-._15qr1eq2-3-13-3 {
-  height: 100%;
-  flex-shrink: 0;
-  position: relative;
-  width: var(--dt-spacings-size-8, 8px);
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-._1jgl8s50-3-13-3 ._15qr1eq2-3-13-3 {
-  border-radius: 0;
-  height: 100%;
-  width: var(--dt-spacings-size-8, 8px);
-  left: calc(-1 * var(--dt-spacings-size-4, 4px));
-  transition: none;
-  background-color: transparent;
-}
-._1jgl8s50-3-13-3 ._15qr1eq2-3-13-3::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: var(--dt-borders-width-default, 1px);
-  background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
-  pointer-events: none;
-}
-._1jgl8s50-3-13-3 ._15qr1eq2-3-13-3:hover::before {
-  background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
-}
-._1jgl8s50-3-13-3 ._15qr1eq2-3-13-3:active::before {
-  background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
-}
-._15qr1eq3-3-13-3 {
-  background-color: var(--dt-colors-border-neutral-accent, #595a7d);
-  border: none;
-  border-radius: var(--dt-borders-radius-field-default, 6px);
-  cursor: col-resize;
-  height: var(--dt-spacings-size-36, 36px);
-  left: 3px;
-  margin: 0;
-  padding: 0;
-  touch-action: none;
-  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-13-3:focus-visible {
-  width: 100%;
-}
-._15qr1eq3-3-13-3:hover._15qr1eq3-3-13-3:focus-visible {
-  width: 2px;
-}
-._15qr1eq3-3-13-3:focus-visible, ._15qr1eq3-3-13-3:hover {
-  height: var(--dt-spacings-size-48, 48px);
-  background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
-}
-._15qr1eq3-3-13-3:after {
-  content: "";
-  display: block;
-  height: 100%;
-  left: 50%;
-  position: absolute;
-  top: 0;
-  transform: translateX(-50%);
-  user-select: none;
-  width: 100%;
-}
-._1jgl8s50-3-13-3 ._15qr1eq3-3-13-3 {
-  width: 0;
-  cursor: ew-resize;
-}
-._1jgl8s50-3-13-3 ._15qr1eq2-3-13-3:has(._15qr1eq3-3-13-3:focus-visible)::before {
-  background-color: var(--dt-colors-border-neutral-accent, #595a7d);
-  width: var(--dt-borders-width-emphasized, 2px);
-}
-._1jgl8s50-3-13-3 ._15qr1eq0-3-13-3:has(._15qr1eq3-3-13-3: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-13-3 ._15qr1eq0-3-13-3:has(._15qr1eq3-3-13-3: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-13-3 ._15qr1eq0-3-13-3:has(._15qr1eq3-3-13-3: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.js

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

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/layouts/page-layout/details-layout/Overlay.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport { clsx } from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  memo,\n  type PropsWithChildren,\n  useRef,\n  useState,\n} from 'react';\n\nimport * as styles from './Overlay.sty.js';\nimport { useFocusRing } from '../../../core/hooks/useFocusRing.js';\nimport { clamp } from '../../split-layout/width-utils.js';\n\nexport const OVERLAY_HANDLE_WIDTH = 8;\n\n/** @internal */\nexport interface OverlayProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {\n  resizable?: boolean;\n  onResize?: (width: number) => void;\n  onResizeEnd?: (width: number) => void;\n  minWidth?: number;\n  maxWidth?: number;\n  /**\n   * The controlled content width in px. The overlay renders this width except\n   * while the user is actively dragging the resize handle.\n   */\n  width?: number;\n}\n\n/** @internal */\nexport const Overlay = memo(\n  forwardRef<HTMLDivElement, OverlayProps>((props, forwardedRef) => {\n    const {\n      children,\n      className,\n      style,\n      minWidth = 200,\n      maxWidth = Infinity,\n      width = 300,\n      resizable = true,\n      onResize,\n      onResizeEnd,\n      ...restProps\n    } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useRef<HTMLHRElement>(null);\n\n    const { focusProps, focusClassName } = useFocusRing({\n      focusWithin: true,\n      ignoreModality: true,\n    });\n\n    const dragStartWidth = useRef<number | null>(null);\n    const lastWidthRef = useRef<number | null>(null);\n    const clampContentWidth = (value: number) =>\n      clamp(minWidth, value, maxWidth);\n\n    // While the user is actively dragging, the overlay owns its width locally\n    // for a smooth interaction; otherwise the width is fully controlled by the\n    // `width` prop. Committing the drag clears the local value so the\n    // controlled width takes over again.\n    const [dragWidth, setDragWidth] = useState<number | null>(null);\n\n    const contentWidth = dragWidth ?? clampContentWidth(width);\n\n    const overlayWidth = resizable\n      ? contentWidth + OVERLAY_HANDLE_WIDTH\n      : contentWidth;\n\n    useGesture(\n      {\n        onDragStart: () => {\n          dragStartWidth.current = clampContentWidth(contentWidth);\n        },\n        onDragEnd: () => {\n          const finalWidth =\n            lastWidthRef.current ?? clampContentWidth(contentWidth);\n          dragStartWidth.current = null;\n          lastWidthRef.current = null;\n          setDragWidth(null);\n          onResizeEnd?.(finalWidth);\n        },\n        onDrag: (state) => {\n          if (dragStartWidth.current === null) {\n            return;\n          }\n\n          const nextWidth = clamp(\n            minWidth,\n            dragStartWidth.current + state.movement[0] * -1,\n            maxWidth,\n          );\n          lastWidthRef.current = nextWidth;\n          setDragWidth(nextWidth);\n          onResize?.(nextWidth);\n        },\n      },\n      { target: handleRef },\n    );\n\n    return (\n      <div\n        role=\"dialog\"\n        className={styles.overlay}\n        style={{ ...style, width: overlayWidth }}\n        ref={containerRef}\n      >\n        {resizable ? (\n          <div className={styles.handleContainer}>\n            <hr\n              {...focusProps}\n              ref={handleRef}\n              className={clsx(styles.resizeHandle, focusClassName)}\n              tabIndex={0}\n            />\n          </div>\n        ) : null}\n        <div\n          {...restProps}\n          ref={forwardedRef}\n          className={clsx(styles.overlayContent, className)}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }),\n);\nOverlay.displayName = 'Overlay';\n"],
-  "mappings": "AA0GM,SAQM,KARN;AA1GN,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEf,MAAM,uBAAuB;AAmB7B,MAAM,UAAU;AAAA,EACrB,WAAyC,CAAC,OAAO,iBAAiB;AAChE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,YAAY,OAAsB,IAAI;AAE5C,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD,aAAa;AAAA,MACb,gBAAgB;AAAA,IAClB,CAAC;AAED,UAAM,iBAAiB,OAAsB,IAAI;AACjD,UAAM,eAAe,OAAsB,IAAI;AAC/C,UAAM,oBAAoB,CAAC,UACzB,MAAM,UAAU,OAAO,QAAQ;AAMjC,UAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAE9D,UAAM,eAAe,aAAa,kBAAkB,KAAK;AAEzD,UAAM,eAAe,YACjB,eAAe,uBACf;AAEJ;AAAA,MACE;AAAA,QACE,aAAa,MAAM;AACjB,yBAAe,UAAU,kBAAkB,YAAY;AAAA,QACzD;AAAA,QACA,WAAW,MAAM;AACf,gBAAM,aACJ,aAAa,WAAW,kBAAkB,YAAY;AACxD,yBAAe,UAAU;AACzB,uBAAa,UAAU;AACvB,uBAAa,IAAI;AACjB,wBAAc,UAAU;AAAA,QAC1B;AAAA,QACA,QAAQ,CAAC,UAAU;AACjB,cAAI,eAAe,YAAY,MAAM;AACnC;AAAA,UACF;AAEA,gBAAM,YAAY;AAAA,YAChB;AAAA,YACA,eAAe,UAAU,MAAM,SAAS,CAAC,IAAI;AAAA,YAC7C;AAAA,UACF;AACA,uBAAa,UAAU;AACvB,uBAAa,SAAS;AACtB,qBAAW,SAAS;AAAA,QACtB;AAAA,MACF;AAAA,MACA,EAAE,QAAQ,UAAU;AAAA,IACtB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,OAAO,EAAE,GAAG,OAAO,OAAO,aAAa;AAAA,QACvC,KAAK;AAAA,QAEJ;AAAA,sBACC,oBAAC,SAAI,WAAW,OAAO,iBACrB;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,cAAc,cAAc;AAAA,cACnD,UAAU;AAAA;AAAA,UACZ,GACF,IACE;AAAA,UACJ;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,gBAAgB,SAAS;AAAA,cAE/C;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AACA,QAAQ,cAAc;",
-  "names": []
-}

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

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

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

@@ -1,7 +0,0 @@
-{
-  "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-13-3';\nexport var overlay = '_15qr1eq0-3-13-3';\nexport var overlayContent = '_15qr1eq1-3-13-3';\nexport var resizeHandle = '_15qr1eq3-3-13-3';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,UAAU;AACd,IAAI,iBAAiB;AACrB,IAAI,eAAe;",
-  "names": []
-}