@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/layouts/page/DetailView.css

@@ -1,11 +1,11 @@
-._wapl5d0-3-5-2 {
+._wapl5d0-3-7-0 {
   grid-area: details;
   flex-direction: row-reverse;
 }
-._wapl5d1-3-5-2 {
+._wapl5d1-3-7-0 {
   background: var(--dt-colors-background-base-default, #f9f9fa);
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-5-2 ._wapl5d1-3-5-2 {
+._1jgl8s50-3-7-0 ._wapl5d1-3-7-0 {
   border-top-left-radius: 0;
 }

package/esm/layouts/page/DetailView.sty.js

@@ -1,7 +1,7 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./DetailView.css";
-var content = "_wapl5d1-3-5-2";
-var details = "_wapl5d0-3-5-2";
+var content = "_wapl5d1-3-7-0";
+var details = "_wapl5d0-3-7-0";
 export {
   content,
   details

package/esm/layouts/page/DetailView.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/DetailView.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './DetailView.css';\nexport var content = '_wapl5d1-3-5-2';\nexport var details = '_wapl5d0-3-5-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './DetailView.css';\nexport var content = '_wapl5d1-3-7-0';\nexport var details = '_wapl5d0-3-7-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,UAAU;",
   "names": []
 }

package/esm/layouts/page/Header.css

@@ -1,9 +1,9 @@
-._150dima0-3-5-2 {
+._150dima0-3-7-0 {
   grid-area: header;
   width: 100%;
   padding: var(--dt-spacings-size-8, 8px);
   box-sizing: border-box;
-  ._1jgl8s50-3-5-2 & {
+  ._1jgl8s50-3-7-0 & {
     border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
   }
 }

package/esm/layouts/page/Header.sty.js

@@ -1,6 +1,6 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./Header.css";
-var header = "_150dima0-3-5-2";
+var header = "_150dima0-3-7-0";
 export {
   header
 };

package/esm/layouts/page/Header.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Header.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Header.css';\nexport var header = '_150dima0-3-5-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Header.css';\nexport var header = '_150dima0-3-7-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/page/Main.css

@@ -1,23 +1,23 @@
-._5zin930-3-5-2 {
+._5zin930-3-7-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   grid-area: main;
   overflow: hidden;
 }
-._5zin931-3-5-2 {
+._5zin931-3-7-0 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
 }
-._5zin932-3-5-2 {
+._5zin932-3-7-0 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-5-2 ._5zin932-3-5-2 {
+._1jgl8s50-3-7-0 ._5zin932-3-7-0 {
   border-radius: 0;
 }
-._5zin933-3-5-2 {
+._5zin933-3-7-0 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-5-2 ._5zin933-3-5-2 {
+._1jgl8s50-3-7-0 ._5zin933-3-7-0 {
   border-radius: 0;
 }

package/esm/layouts/page/Main.sty.js

@@ -1,9 +1,9 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./Main.css";
-var content = "_5zin931-3-5-2";
-var main = "_5zin930-3-5-2";
-var withDetails = "_5zin933-3-5-2";
-var withSidebar = "_5zin932-3-5-2";
+var content = "_5zin931-3-7-0";
+var main = "_5zin930-3-7-0";
+var withDetails = "_5zin933-3-7-0";
+var withSidebar = "_5zin932-3-7-0";
 export {
   content,
   main,

package/esm/layouts/page/Main.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Main.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Main.css';\nexport var content = '_5zin931-3-5-2';\nexport var main = '_5zin930-3-5-2';\nexport var withDetails = '_5zin933-3-5-2';\nexport var withSidebar = '_5zin932-3-5-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Main.css';\nexport var content = '_5zin931-3-7-0';\nexport var main = '_5zin930-3-7-0';\nexport var withDetails = '_5zin933-3-7-0';\nexport var withSidebar = '_5zin932-3-7-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,cAAc;",
   "names": []
 }

package/esm/layouts/page/Page.css

@@ -1,10 +1,10 @@
-._1j29czt0-3-5-2 {
+._1j29czt0-3-7-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;
   height: 100vh;
   overflow: hidden;
 }
-._1jgl8s50-3-5-2 ._1j29czt0-3-5-2 {
+._1jgl8s50-3-7-0 ._1j29czt0-3-7-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }

package/esm/layouts/page/Page.sty.js

@@ -1,6 +1,6 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./Page.css";
-var page = "_1j29czt0-3-5-2";
+var page = "_1j29czt0-3-7-0";
 export {
   page
 };

package/esm/layouts/page/Page.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Page.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Page.css';\nexport var page = '_1j29czt0-3-5-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Page.css';\nexport var page = '_1j29czt0-3-7-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/layouts/page/Panel.js

@@ -12,8 +12,8 @@ import { useIntl } from "react-intl";
 import { KeepMountedProvider } from "./keepMounted.js";
 import { panelContext } from "./panel-context.js";
 import * as styles from "./panel.sty.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
 const PanelRoot = (props) => {
   const { className, id, style, children, name } = props;
   const ctx = useMemo(() => ({ name }), [name]);

package/esm/layouts/page/Panel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Panel.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { KeepMountedProvider } from './keepMounted.js';\nimport type { PanelName } from './page-types.js';\nimport { panelContext } from './panel-context.js';\nimport type { PanelSize } from './panel-types.js';\nimport * as styles from './panel.sty.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\ninterface PanelRootProps\n  extends WithChildren,\n    StylingProps,\n    HTMLAttributes<HTMLDivElement> {\n  name: PanelName;\n}\n\nconst PanelRoot = (props: PanelRootProps) => {\n  const { className, id, style, children, name }: PanelRootProps = props;\n\n  const ctx = useMemo(() => ({ name }), [name]);\n\n  return (\n    <panelContext.Provider value={ctx}>\n      <KeepMountedProvider>\n        <aside\n          {...props}\n          id={id}\n          className={clsx(styles.root, className)}\n          style={style}\n        >\n          {children}\n        </aside>\n      </KeepMountedProvider>\n    </panelContext.Provider>\n  );\n};\n\ninterface PanelContentProps extends WithChildren, StylingProps {\n  isDismissed?: boolean; // To retain the size when dismissing and expanding the panel, we need to handle the dismissed display mode inside\n  /** @defaultValue `right` */\n  handle?: 'left' | 'right' | 'hidden';\n  /** Descriptive label for the panel. */\n  label: string;\n  /**\n   * The minimum width of the sidebar in pixels.\n   * @defaultValue 200\n   */\n  minWidth?: number;\n  /**\n   * The desired width of the sidebar.\n   * Depending on the available screen width and other panel configurations,\n   * the size of the panel might not match the `preferredWidth` exactly.\n   * @defaultValue 15%\n   */\n  preferredWidth?: PanelSize;\n  /** Callback triggered after resizing is finished. */\n  onResize?: (width: number) => void;\n  /** Available size of the containing element. Used to calculate size with relative units. */\n  containerSize: number;\n}\n\nconst PanelContent = forwardRef<HTMLDivElement, PanelContentProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className,\n      handle = 'right',\n      isDismissed,\n      label,\n      minWidth,\n      onResize,\n      preferredWidth,\n      style,\n      containerSize,\n      ...restProps\n    }: PanelContentProps = props;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const panelRefs = useMergeRefs([panelRef, forwardedRef]);\n\n    const handleRef = useRef<HTMLHRElement>(null);\n\n    const draggedSize = useRef<number>();\n    const wasResized = useRef(false);\n\n    const setPanelSize = useCallback(\n      (size: number) => {\n        if (!panelRef.current) {\n          return;\n        }\n\n        let sizeToApply = Math.floor(size * 1000) / 1000;\n        draggedSize.current = sizeToApply;\n\n        // users can resize out of bounds and create negative size values. we dont want to apply those as css\n        if (size < 0) {\n          return;\n        }\n\n        if (minWidth && sizeToApply < minWidth) {\n          sizeToApply = minWidth;\n        }\n\n        panelRef.current.style.setProperty('width', `${sizeToApply}px`);\n      },\n      [minWidth],\n    );\n\n    const ensurePanelSizeMatchesComputedWidth = useCallback(\n      (element: HTMLElement, size: number) => {\n        const actualWidth = parseFloat(getComputedStyle(element).width);\n        if (size !== actualWidth) {\n          setPanelSize(actualWidth);\n        }\n        return actualWidth;\n      },\n      [setPanelSize],\n    );\n\n    const handleDrag = useCallback(\n      (deltaX: number) => {\n        if (!draggedSize.current) {\n          return;\n        }\n        setPanelSize(\n          draggedSize.current + deltaX * (handle === 'right' ? 1 : -1),\n        );\n        wasResized.current = true;\n      },\n      [handle, setPanelSize],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      const size = ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n      onResize?.(size);\n    }, [ensurePanelSizeMatchesComputedWidth, onResize]);\n\n    const handleDragStart = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n    }, [ensurePanelSizeMatchesComputedWidth]);\n\n    useGesture(\n      {\n        onDragStart: handleDragStart,\n        onDragEnd: handleDragEnd,\n        onDrag: ({ delta: [deltaX] }) => handleDrag(deltaX),\n      },\n      {\n        target: handleRef,\n        eventOptions: { passive: false },\n        drag: { filterTaps: true },\n      },\n    );\n\n    useEffect(\n      function initializePanelSize() {\n        if (!panelRef.current || wasResized.current || isDismissed) {\n          return;\n        }\n\n        if (typeof preferredWidth === 'number') {\n          setPanelSize(preferredWidth);\n          return;\n        }\n\n        // percentage based values on grid children use the available space of the area, not the full grid container\n        if (preferredWidth?.includes('%')) {\n          const size = containerSize * (parseFloat(preferredWidth) / 100);\n          setPanelSize(size);\n          return;\n        }\n\n        if (preferredWidth?.includes('px')) {\n          const size = parseFloat(preferredWidth);\n          setPanelSize(size);\n          return;\n        }\n\n        // for all other units we let the browser compute the size\n        if (typeof preferredWidth === 'string') {\n          panelRef.current.style.setProperty('width', preferredWidth);\n          const size = parseFloat(getComputedStyle(panelRef.current).width);\n          setPanelSize(size);\n          return;\n        }\n\n        const size = parseFloat(getComputedStyle(panelRef.current).width);\n        setPanelSize(size);\n      },\n      [containerSize, preferredWidth, setPanelSize, isDismissed],\n    );\n\n    if (isDismissed) {\n      return null;\n    }\n\n    return (\n      <>\n        <div\n          {...restProps}\n          ref={panelRefs}\n          className={clsx(styles.panelContent, className)}\n          style={{ ...style, minWidth, width: draggedSize.current }}\n        >\n          {children}\n        </div>\n\n        <div className={styles.resizeHandleContainer}>\n          {handle !== 'hidden' ? (\n            <ResizeHandle\n              panelName={label}\n              panelSize={draggedSize.current}\n              ref={handleRef}\n            />\n          ) : null}\n        </div>\n      </>\n    );\n  },\n);\n\ninterface ResizeHandleProps {\n  panelName: string;\n  panelSize?: number;\n}\n\nconst ResizeHandle = forwardRef<HTMLHRElement, ResizeHandleProps>(\n  (props, ref) => {\n    const { panelName, panelSize = 0 } = props;\n\n    const intl = useIntl();\n    const { focusProps, focusClassName } = useFocusRing({\n      focusWithin: true,\n      ignoreModality: true,\n    });\n\n    return (\n      <hr\n        {...focusProps}\n        ref={ref}\n        className={clsx(styles.resizeHandle, focusClassName)}\n        aria-valuenow={panelSize}\n        aria-valuetext={`${Math.round(panelSize)}px`}\n        aria-orientation=\"vertical\"\n        aria-label={intl.formatMessage(\n          {\n            defaultMessage: 'Resize {label} panel',\n            id: 'Ym3RUHtaLVFsGlaM',\n            description:\n              'Label for the resize handle of the panel to resize it with drag and drop or keyboard.',\n          },\n          { label: panelName },\n        )}\n        tabIndex={0}\n        data-dt-name=\"Resize\"\n      />\n    );\n  },\n);\n\nexport const Panel = Object.assign(PanelRoot, {\n  Content: PanelContent,\n});\n"],
+  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { KeepMountedProvider } from './keepMounted.js';\nimport type { PanelName } from './page-types.js';\nimport { panelContext } from './panel-context.js';\nimport type { PanelSize } from './panel-types.js';\nimport * as styles from './panel.sty.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\ninterface PanelRootProps\n  extends WithChildren,\n    StylingProps,\n    HTMLAttributes<HTMLDivElement> {\n  name: PanelName;\n}\n\nconst PanelRoot = (props: PanelRootProps) => {\n  const { className, id, style, children, name }: PanelRootProps = props;\n\n  const ctx = useMemo(() => ({ name }), [name]);\n\n  return (\n    <panelContext.Provider value={ctx}>\n      <KeepMountedProvider>\n        <aside\n          {...props}\n          id={id}\n          className={clsx(styles.root, className)}\n          style={style}\n        >\n          {children}\n        </aside>\n      </KeepMountedProvider>\n    </panelContext.Provider>\n  );\n};\n\ninterface PanelContentProps extends WithChildren, StylingProps {\n  isDismissed?: boolean; // To retain the size when dismissing and expanding the panel, we need to handle the dismissed display mode inside\n  /** @defaultValue `right` */\n  handle?: 'left' | 'right' | 'hidden';\n  /** Descriptive label for the panel. */\n  label: string;\n  /**\n   * The minimum width of the sidebar in pixels.\n   * @defaultValue 200\n   */\n  minWidth?: number;\n  /**\n   * The desired width of the sidebar.\n   * Depending on the available screen width and other panel configurations,\n   * the size of the panel might not match the `preferredWidth` exactly.\n   * @defaultValue 15%\n   */\n  preferredWidth?: PanelSize;\n  /** Callback triggered after resizing is finished. */\n  onResize?: (width: number) => void;\n  /** Available size of the containing element. Used to calculate size with relative units. */\n  containerSize: number;\n}\n\nconst PanelContent = forwardRef<HTMLDivElement, PanelContentProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className,\n      handle = 'right',\n      isDismissed,\n      label,\n      minWidth,\n      onResize,\n      preferredWidth,\n      style,\n      containerSize,\n      ...restProps\n    }: PanelContentProps = props;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const panelRefs = useMergeRefs([panelRef, forwardedRef]);\n\n    const handleRef = useRef<HTMLHRElement>(null);\n\n    const draggedSize = useRef<number>();\n    const wasResized = useRef(false);\n\n    const setPanelSize = useCallback(\n      (size: number) => {\n        if (!panelRef.current) {\n          return;\n        }\n\n        let sizeToApply = Math.floor(size * 1000) / 1000;\n        draggedSize.current = sizeToApply;\n\n        // users can resize out of bounds and create negative size values. we dont want to apply those as css\n        if (size < 0) {\n          return;\n        }\n\n        if (minWidth && sizeToApply < minWidth) {\n          sizeToApply = minWidth;\n        }\n\n        panelRef.current.style.setProperty('width', `${sizeToApply}px`);\n      },\n      [minWidth],\n    );\n\n    const ensurePanelSizeMatchesComputedWidth = useCallback(\n      (element: HTMLElement, size: number) => {\n        const actualWidth = parseFloat(getComputedStyle(element).width);\n        if (size !== actualWidth) {\n          setPanelSize(actualWidth);\n        }\n        return actualWidth;\n      },\n      [setPanelSize],\n    );\n\n    const handleDrag = useCallback(\n      (deltaX: number) => {\n        if (!draggedSize.current) {\n          return;\n        }\n        setPanelSize(\n          draggedSize.current + deltaX * (handle === 'right' ? 1 : -1),\n        );\n        wasResized.current = true;\n      },\n      [handle, setPanelSize],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      const size = ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n      onResize?.(size);\n    }, [ensurePanelSizeMatchesComputedWidth, onResize]);\n\n    const handleDragStart = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n    }, [ensurePanelSizeMatchesComputedWidth]);\n\n    useGesture(\n      {\n        onDragStart: handleDragStart,\n        onDragEnd: handleDragEnd,\n        onDrag: ({ delta: [deltaX] }) => handleDrag(deltaX),\n      },\n      {\n        target: handleRef,\n        eventOptions: { passive: false },\n        drag: { filterTaps: true },\n      },\n    );\n\n    useEffect(\n      function initializePanelSize() {\n        if (!panelRef.current || wasResized.current || isDismissed) {\n          return;\n        }\n\n        if (typeof preferredWidth === 'number') {\n          setPanelSize(preferredWidth);\n          return;\n        }\n\n        // percentage based values on grid children use the available space of the area, not the full grid container\n        if (preferredWidth?.includes('%')) {\n          const size = containerSize * (parseFloat(preferredWidth) / 100);\n          setPanelSize(size);\n          return;\n        }\n\n        if (preferredWidth?.includes('px')) {\n          const size = parseFloat(preferredWidth);\n          setPanelSize(size);\n          return;\n        }\n\n        // for all other units we let the browser compute the size\n        if (typeof preferredWidth === 'string') {\n          panelRef.current.style.setProperty('width', preferredWidth);\n          const size = parseFloat(getComputedStyle(panelRef.current).width);\n          setPanelSize(size);\n          return;\n        }\n\n        const size = parseFloat(getComputedStyle(panelRef.current).width);\n        setPanelSize(size);\n      },\n      [containerSize, preferredWidth, setPanelSize, isDismissed],\n    );\n\n    if (isDismissed) {\n      return null;\n    }\n\n    return (\n      <>\n        <div\n          {...restProps}\n          ref={panelRefs}\n          className={clsx(styles.panelContent, className)}\n          style={{ ...style, minWidth, width: draggedSize.current }}\n        >\n          {children}\n        </div>\n\n        <div className={styles.resizeHandleContainer}>\n          {handle !== 'hidden' ? (\n            <ResizeHandle\n              panelName={label}\n              panelSize={draggedSize.current}\n              ref={handleRef}\n            />\n          ) : null}\n        </div>\n      </>\n    );\n  },\n);\n\ninterface ResizeHandleProps {\n  panelName: string;\n  panelSize?: number;\n}\n\nconst ResizeHandle = forwardRef<HTMLHRElement, ResizeHandleProps>(\n  (props, ref) => {\n    const { panelName, panelSize = 0 } = props;\n\n    const intl = useIntl();\n    const { focusProps, focusClassName } = useFocusRing({\n      focusWithin: true,\n      ignoreModality: true,\n    });\n\n    return (\n      <hr\n        {...focusProps}\n        ref={ref}\n        className={clsx(styles.resizeHandle, focusClassName)}\n        aria-valuenow={panelSize}\n        aria-valuetext={`${Math.round(panelSize)}px`}\n        aria-orientation=\"vertical\"\n        aria-label={intl.formatMessage(\n          {\n            defaultMessage: 'Resize {label} panel',\n            id: 'Ym3RUHtaLVFsGlaM',\n            description:\n              'Label for the resize handle of the panel to resize it with drag and drop or keyboard.',\n          },\n          { label: panelName },\n        )}\n        tabIndex={0}\n        data-dt-name=\"Resize\"\n      />\n    );\n  },\n);\n\nexport const Panel = Object.assign(PanelRoot, {\n  Content: PanelContent,\n});\n"],
   "mappings": "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",
   "names": ["size"]
 }

package/esm/layouts/page/Sidebar.css

@@ -1,16 +1,16 @@
-._zdcge90-3-5-2 {
+._zdcge90-3-7-0 {
   grid-area: sidebar;
   justify-content: flex-end;
 }
-._zdcge91-3-5-2 {
+._zdcge91-3-7-0 {
   flex-shrink: 0;
   height: 100%;
   left: 0;
   position: relative;
   width: 0;
 }
-._zdcge93-3-5-2 {
-  --_zdcge92-3-5-2: 16px;
+._zdcge93-3-7-0 {
+  --_zdcge92-3-7-0: 16px;
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
@@ -20,29 +20,29 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: background-color, translate;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
-  width: var(--_zdcge92-3-5-2);
-  translate: calc(0px - var(--_zdcge92-3-5-2) * 2);
+  width: var(--_zdcge92-3-7-0);
+  translate: calc(0px - var(--_zdcge92-3-7-0) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1p91g301-3-5-2:is(:hover,:focus-within) ._zdcge93-3-5-2 {
+._1p91g301-3-7-0:is(:hover,:focus-within) ._zdcge93-3-7-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
-  translate: calc(0px - var(--_zdcge92-3-5-2) - var(--_zdcge92-3-5-2) / 2);
+  translate: calc(0px - var(--_zdcge92-3-7-0) - var(--_zdcge92-3-7-0) / 2);
 }
-._zdcge95-3-5-2 {
-  --_zdcge94-3-5-2: 24px;
+._zdcge95-3-7-0 {
+  --_zdcge94-3-7-0: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
-  left: calc(0px - var(--_zdcge94-3-5-2) / 2 + 2px);
+  left: calc(0px - var(--_zdcge94-3-7-0) / 2 + 2px);
 }
-._zdcge96-3-5-2 {
-  width: var(--_zdcge94-3-5-2);
-  height: var(--_zdcge94-3-5-2);
+._zdcge96-3-7-0 {
+  width: var(--_zdcge94-3-7-0);
+  height: var(--_zdcge94-3-7-0);
   box-sizing: border-box;
   outline-color: transparent;
   outline-style: var(--dt-borders-style-default, solid);
   outline-width: var(--dt-borders-width-emphasized, 2px);
 }
-._zdcge97-3-5-2 {
+._zdcge97-3-7-0 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   opacity: 0;
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
@@ -50,27 +50,27 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._zdcge97-3-5-2:hover {
+._zdcge97-3-7-0:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._zdcge97-3-5-2:focus {
+._zdcge97-3-7-0:focus {
   opacity: 1;
 }
-._1p91g301-3-5-2:hover ._zdcge97-3-5-2 {
+._1p91g301-3-7-0:hover ._zdcge97-3-7-0 {
   opacity: 1;
 }
-._zdcge98-3-5-2 {
+._zdcge98-3-7-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge98-3-5-2:hover {
+._zdcge98-3-7-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge99-3-5-2._1p91g302-3-5-2 {
+._zdcge99-3-7-0._1p91g302-3-7-0 {
   width: var(--dt-spacings-size-16, 16px);
 }
-._zdcge9a-3-5-2 {
+._zdcge9a-3-7-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-inline: var(--dt-spacings-size-8, 8px);

package/esm/layouts/page/Sidebar.sty.js

@@ -2,14 +2,14 @@ import "../../core/components/app-root/AppRoot.css";
 import "./panel.css";
 import "../../core/styles/focusRingStatic.css";
 import "./Sidebar.css";
-var buttonContainer = "_zdcge95-3-5-2";
-var dismissButton = "_zdcge97-3-5-2 _zdcge96-3-5-2";
-var expandButton = "_zdcge98-3-5-2 _zdcge96-3-5-2";
-var hint = "_zdcge93-3-5-2 _z0fq9b4-3-5-2 _z0fq9bd-3-5-2 _z0fq9b6-3-5-2 _z0fq9bc-3-5-2";
-var integratedControls = "_zdcge91-3-5-2";
-var integratedControlsDrawerHeader = "_zdcge9a-3-5-2";
-var integratedControlsPanel = "_zdcge99-3-5-2";
-var sidebar = "_zdcge90-3-5-2";
+var buttonContainer = "_zdcge95-3-7-0";
+var dismissButton = "_zdcge97-3-7-0 _zdcge96-3-7-0";
+var expandButton = "_zdcge98-3-7-0 _zdcge96-3-7-0";
+var hint = "_zdcge93-3-7-0 _z0fq9b4-3-7-0 _z0fq9bd-3-7-0 _z0fq9b6-3-7-0 _z0fq9bc-3-7-0";
+var integratedControls = "_zdcge91-3-7-0";
+var integratedControlsDrawerHeader = "_zdcge9a-3-7-0";
+var integratedControlsPanel = "_zdcge99-3-7-0";
+var sidebar = "_zdcge90-3-7-0";
 export {
   buttonContainer,
   dismissButton,

package/esm/layouts/page/Sidebar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Sidebar.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-5-2';\nexport var dismissButton = '_zdcge97-3-5-2 _zdcge96-3-5-2';\nexport var expandButton = '_zdcge98-3-5-2 _zdcge96-3-5-2';\nexport var hint = '_zdcge93-3-5-2 _z0fq9b4-3-5-2 _z0fq9bd-3-5-2 _z0fq9b6-3-5-2 _z0fq9bc-3-5-2';\nexport var integratedControls = '_zdcge91-3-5-2';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-5-2';\nexport var integratedControlsPanel = '_zdcge99-3-5-2';\nexport var sidebar = '_zdcge90-3-5-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-7-0';\nexport var dismissButton = '_zdcge97-3-7-0 _zdcge96-3-7-0';\nexport var expandButton = '_zdcge98-3-7-0 _zdcge96-3-7-0';\nexport var hint = '_zdcge93-3-7-0 _z0fq9b4-3-7-0 _z0fq9bd-3-7-0 _z0fq9b6-3-7-0 _z0fq9bc-3-7-0';\nexport var integratedControls = '_zdcge91-3-7-0';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-7-0';\nexport var integratedControlsPanel = '_zdcge99-3-7-0';\nexport var sidebar = '_zdcge90-3-7-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,OAAO;AACX,IAAI,qBAAqB;AACzB,IAAI,iCAAiC;AACrC,IAAI,0BAA0B;AAC9B,IAAI,UAAU;",
   "names": []
 }

package/esm/layouts/page/panel.css

@@ -1,37 +1,37 @@
-._1p91g301-3-5-2 {
+._1p91g301-3-7-0 {
   box-sizing: border-box;
   display: flex;
   max-width: 100%;
 }
-._1p91g302-3-5-2 {
+._1p91g302-3-7-0 {
   width: 0;
   position: relative;
 }
-._1p91g303-3-5-2 {
+._1p91g303-3-7-0 {
   flex-shrink: 0;
   position: relative;
   width: 8px;
 }
-._1p91g304-3-5-2 {
+._1p91g304-3-7-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._1p91g305-3-5-2 {
+._1p91g305-3-7-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;
 }
-._1p91g306-3-5-2 {
+._1p91g306-3-7-0 {
   line-height: 0;
 }
-._1p91g307-3-5-2 {
+._1p91g307-3-7-0 {
   box-sizing: border-box;
   flex-grow: 1;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   position: relative;
 }
-._1p91g308-3-5-2 {
+._1p91g308-3-7-0 {
   flex-shrink: 0;
   width: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -40,25 +40,34 @@
   height: 100%;
   justify-content: center;
 }
-._1jgl8s50-3-5-2 ._1p91g308-3-5-2 {
-  background-color: var(--dt-colors-background-base-default, #f9f9fa);
-  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued, #e4e5eb), var(--dt-colors-border-neutral-subdued, #e4e5eb));
-  background-size: var(--dt-borders-width-default, 1px) 100%;
-  background-repeat: no-repeat;
-  background-position: center;
+._1jgl8s50-3-7-0 ._1p91g308-3-7-0 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
   left: 0;
   transition: none;
+  background-color: transparent;
+  margin-inline: calc(var(--dt-spacings-size-8, 8px) / -2);
+  z-index: 1;
 }
-._1jgl8s50-3-5-2 ._1p91g308-3-5-2:hover {
-  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued-hover, #d0d1dc), var(--dt-colors-border-neutral-subdued-hover, #d0d1dc));
+._1jgl8s50-3-7-0 ._1p91g308-3-7-0::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-7-0 ._1p91g308-3-7-0:hover::before {
+  background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-5-2 ._1p91g308-3-5-2:active {
-  background-image: linear-gradient(var(--dt-colors-border-neutral-subdued-active, #c6c7d5), var(--dt-colors-border-neutral-subdued-active, #c6c7d5));
+._1jgl8s50-3-7-0 ._1p91g308-3-7-0:active::before {
+  background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._1p91g309-3-5-2 {
+._1p91g309-3-7-0 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -71,17 +80,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;
 }
-._1p91g309-3-5-2:focus-visible {
+._1p91g309-3-7-0:focus-visible {
   width: 100%;
 }
-._1p91g309-3-5-2:hover._1p91g309-3-5-2:focus-visible {
+._1p91g309-3-7-0:hover._1p91g309-3-7-0:focus-visible {
   width: 2px;
 }
-._1p91g309-3-5-2:focus-visible, ._1p91g309-3-5-2:hover {
+._1p91g309-3-7-0:focus-visible, ._1p91g309-3-7-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._1p91g309-3-5-2:after {
+._1p91g309-3-7-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -92,11 +101,11 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-5-2 ._1p91g309-3-5-2 {
+._1jgl8s50-3-7-0 ._1p91g309-3-7-0 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-5-2 ._1p91g308-3-5-2:has(._1p91g309-3-5-2:focus-visible) {
-  background-image: linear-gradient(var(--dt-colors-border-neutral-accent, #595a7d), var(--dt-colors-border-neutral-accent, #595a7d));
-  background-size: var(--dt-borders-width-emphasized, 2px) 100%;
+._1jgl8s50-3-7-0 ._1p91g308-3-7-0:has(._1p91g309-3-7-0:focus-visible)::before {
+  background-color: var(--dt-colors-border-neutral-accent, #595a7d);
+  width: var(--dt-borders-width-emphasized, 2px);
 }

package/esm/layouts/page/panel.sty.js

@@ -1,16 +1,16 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./panel.css";
 var GAP_SIZE = 8;
-var buttonIcon = "_1p91g306-3-5-2";
-var dismissedPanel = "_1p91g302-3-5-2";
-var drawer = "_1p91g304-3-5-2";
-var drawerContent = "_1p91g305-3-5-2";
-var gap = "_1p91g303-3-5-2";
-var panelContent = "_1p91g307-3-5-2";
-var resizeHandle = "_1p91g309-3-5-2";
-var resizeHandleContainer = "_1p91g308-3-5-2";
-var root = "_1p91g301-3-5-2";
-var rtlPanel = "_1p91g300-3-5-2";
+var buttonIcon = "_1p91g306-3-7-0";
+var dismissedPanel = "_1p91g302-3-7-0";
+var drawer = "_1p91g304-3-7-0";
+var drawerContent = "_1p91g305-3-7-0";
+var gap = "_1p91g303-3-7-0";
+var panelContent = "_1p91g307-3-7-0";
+var resizeHandle = "_1p91g309-3-7-0";
+var resizeHandleContainer = "_1p91g308-3-7-0";
+var root = "_1p91g301-3-7-0";
+var rtlPanel = "_1p91g300-3-7-0";
 export {
   GAP_SIZE,
   buttonIcon,

package/esm/layouts/page/panel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/panel.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-5-2';\nexport var dismissedPanel = '_1p91g302-3-5-2';\nexport var drawer = '_1p91g304-3-5-2';\nexport var drawerContent = '_1p91g305-3-5-2';\nexport var gap = '_1p91g303-3-5-2';\nexport var panelContent = '_1p91g307-3-5-2';\nexport var resizeHandle = '_1p91g309-3-5-2';\nexport var resizeHandleContainer = '_1p91g308-3-5-2';\nexport var root = '_1p91g301-3-5-2';\nexport var rtlPanel = '_1p91g300-3-5-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-7-0';\nexport var dismissedPanel = '_1p91g302-3-7-0';\nexport var drawer = '_1p91g304-3-7-0';\nexport var drawerContent = '_1p91g305-3-7-0';\nexport var gap = '_1p91g303-3-7-0';\nexport var panelContent = '_1p91g307-3-7-0';\nexport var resizeHandle = '_1p91g309-3-7-0';\nexport var resizeHandleContainer = '_1p91g308-3-7-0';\nexport var root = '_1p91g301-3-7-0';\nexport var rtlPanel = '_1p91g300-3-7-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,iBAAiB;AACrB,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,MAAM;AACV,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,WAAW;",
   "names": []
 }

package/esm/layouts/page-layout/PageLayout.css

@@ -1,4 +1,4 @@
-._193kgwe0-3-5-2 {
+._193kgwe0-3-7-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;
@@ -7,36 +7,36 @@
   grid-template-rows: min-content minmax(0px, 1fr);
   grid-template-areas: "header" "content";
 }
-._1jgl8s50-3-5-2 ._193kgwe0-3-5-2 {
+._1jgl8s50-3-7-0 ._193kgwe0-3-7-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._193kgwe1-3-5-2 {
+._193kgwe1-3-7-0 {
   grid-area: header;
   padding: var(--dt-spacings-size-8, 8px);
   min-width: 0;
-  ._1jgl8s50-3-5-2 & {
+  ._1jgl8s50-3-7-0 & {
     border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
   }
 }
-._193kgwe2-3-5-2 {
+._193kgwe2-3-7-0 {
   grid-area: content;
   min-width: 0;
 }
-._193kgwe3-3-5-2 {
+._193kgwe3-3-7-0 {
   padding: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   height: 100%;
   isolation: isolate;
 }
-._193kgwe4-3-5-2 {
+._193kgwe4-3-7-0 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-5-2 ._193kgwe4-3-5-2 {
+._1jgl8s50-3-7-0 ._193kgwe4-3-7-0 {
   border-top-left-radius: 0;
 }
-._193kgwe5-3-5-2 {
+._193kgwe5-3-7-0 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-5-2 ._193kgwe5-3-5-2 {
+._1jgl8s50-3-7-0 ._193kgwe5-3-7-0 {
   border-top-right-radius: 0;
 }

package/esm/layouts/page-layout/PageLayout.sty.js

@@ -1,11 +1,11 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./PageLayout.css";
-var content = "_193kgwe3-3-5-2";
-var contentContainer = "_193kgwe2-3-5-2";
-var contentTopLeftRadius = "_193kgwe4-3-5-2";
-var contentTopRightRadius = "_193kgwe5-3-5-2";
-var headerContainer = "_193kgwe1-3-5-2";
-var layoutRoot = "_193kgwe0-3-5-2";
+var content = "_193kgwe3-3-7-0";
+var contentContainer = "_193kgwe2-3-7-0";
+var contentTopLeftRadius = "_193kgwe4-3-7-0";
+var contentTopRightRadius = "_193kgwe5-3-7-0";
+var headerContainer = "_193kgwe1-3-7-0";
+var layoutRoot = "_193kgwe0-3-7-0";
 export {
   content,
   contentContainer,

package/esm/layouts/page-layout/PageLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page-layout/PageLayout.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-5-2';\nexport var contentContainer = '_193kgwe2-3-5-2';\nexport var contentTopLeftRadius = '_193kgwe4-3-5-2';\nexport var contentTopRightRadius = '_193kgwe5-3-5-2';\nexport var headerContainer = '_193kgwe1-3-5-2';\nexport var layoutRoot = '_193kgwe0-3-5-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-7-0';\nexport var contentContainer = '_193kgwe2-3-7-0';\nexport var contentTopLeftRadius = '_193kgwe4-3-7-0';\nexport var contentTopRightRadius = '_193kgwe5-3-7-0';\nexport var headerContainer = '_193kgwe1-3-7-0';\nexport var layoutRoot = '_193kgwe0-3-7-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,mBAAmB;AACvB,IAAI,uBAAuB;AAC3B,IAAI,wBAAwB;AAC5B,IAAI,kBAAkB;AACtB,IAAI,aAAa;",
   "names": []
 }

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

@@ -1,15 +1,15 @@
-._1y5ro0l0-3-5-2 {
+._1y5ro0l0-3-7-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--dt-spacings-size-8, 8px);
 }
-._1y5ro0l1-3-5-2 {
+._1y5ro0l1-3-7-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1y5ro0l2-3-5-2 {
+._1y5ro0l2-3-7-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);