@dynatrace/strato-components 3.11.1 → 3.11.3

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 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": "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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  // 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,10 +1,10 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "./DetailsLayout.css";
-var content = "_1377n3n2-3-11-1";
-var drawer = "_1377n3n3-3-11-1";
-var drawerContent = "_1377n3n4-3-11-1";
-var layoutRoot = "_1377n3n0-3-11-1";
-var panel = "_1377n3n1-3-11-1";
+var content = "_1377n3n2-3-11-3";
+var drawer = "_1377n3n3-3-11-3";
+var drawerContent = "_1377n3n4-3-11-3";
+var layoutRoot = "_1377n3n0-3-11-3";
+var panel = "_1377n3n1-3-11-3";
 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-11-1';\nexport var drawer = '_1377n3n3-3-11-1';\nexport var drawerContent = '_1377n3n4-3-11-1';\nexport var layoutRoot = '_1377n3n0-3-11-1';\nexport var panel = '_1377n3n1-3-11-1';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DetailsLayout.css';\nexport var content = '_1377n3n2-3-11-3';\nexport var drawer = '_1377n3n3-3-11-3';\nexport var drawerContent = '_1377n3n4-3-11-3';\nexport var layoutRoot = '_1377n3n0-3-11-3';\nexport var panel = '_1377n3n1-3-11-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/Overlay.css

@@ -1,4 +1,4 @@
-._15qr1eq0-3-11-1 {
+._15qr1eq0-3-11-3 {
   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-11-1 ._15qr1eq0-3-11-1 {
+._1jgl8s50-3-11-3 ._15qr1eq0-3-11-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-11-1 {
+._15qr1eq1-3-11-3 {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   flex-grow: 1;
 }
-._15qr1eq2-3-11-1 {
+._15qr1eq2-3-11-3 {
   height: 100%;
   flex-shrink: 0;
   position: relative;
@@ -33,7 +33,7 @@
   display: flex;
   justify-content: center;
 }
-._1jgl8s50-3-11-1 ._15qr1eq2-3-11-1 {
+._1jgl8s50-3-11-3 ._15qr1eq2-3-11-3 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
@@ -41,7 +41,7 @@
   transition: none;
   background-color: transparent;
 }
-._1jgl8s50-3-11-1 ._15qr1eq2-3-11-1::before {
+._1jgl8s50-3-11-3 ._15qr1eq2-3-11-3::before {
   content: "";
   position: absolute;
   top: 0;
@@ -52,13 +52,13 @@
   background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
   pointer-events: none;
 }
-._1jgl8s50-3-11-1 ._15qr1eq2-3-11-1:hover::before {
+._1jgl8s50-3-11-3 ._15qr1eq2-3-11-3:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-11-1 ._15qr1eq2-3-11-1:active::before {
+._1jgl8s50-3-11-3 ._15qr1eq2-3-11-3:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._15qr1eq3-3-11-1 {
+._15qr1eq3-3-11-3 {
   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-11-1:focus-visible {
+._15qr1eq3-3-11-3:focus-visible {
   width: 100%;
 }
-._15qr1eq3-3-11-1:hover._15qr1eq3-3-11-1:focus-visible {
+._15qr1eq3-3-11-3:hover._15qr1eq3-3-11-3:focus-visible {
   width: 2px;
 }
-._15qr1eq3-3-11-1:focus-visible, ._15qr1eq3-3-11-1:hover {
+._15qr1eq3-3-11-3:focus-visible, ._15qr1eq3-3-11-3:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._15qr1eq3-3-11-1:after {
+._15qr1eq3-3-11-3:after {
   content: "";
   display: block;
   height: 100%;
@@ -92,20 +92,20 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-11-1 ._15qr1eq3-3-11-1 {
+._1jgl8s50-3-11-3 ._15qr1eq3-3-11-3 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-11-1 ._15qr1eq2-3-11-1:has(._15qr1eq3-3-11-1:focus-visible)::before {
+._1jgl8s50-3-11-3 ._15qr1eq2-3-11-3:has(._15qr1eq3-3-11-3:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
 }
-._1jgl8s50-3-11-1 ._15qr1eq0-3-11-1:has(._15qr1eq3-3-11-1:hover) {
+._1jgl8s50-3-11-3 ._15qr1eq0-3-11-3:has(._15qr1eq3-3-11-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-11-1 ._15qr1eq0-3-11-1:has(._15qr1eq3-3-11-1:active) {
+._1jgl8s50-3-11-3 ._15qr1eq0-3-11-3:has(._15qr1eq3-3-11-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-11-1 ._15qr1eq0-3-11-1:has(._15qr1eq3-3-11-1:focus-visible) {
+._1jgl8s50-3-11-3 ._15qr1eq0-3-11-3:has(._15qr1eq3-3-11-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.sty.js

@@ -1,9 +1,9 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "./Overlay.css";
-var handleContainer = "_15qr1eq2-3-11-1";
-var overlay = "_15qr1eq0-3-11-1";
-var overlayContent = "_15qr1eq1-3-11-1";
-var resizeHandle = "_15qr1eq3-3-11-1";
+var handleContainer = "_15qr1eq2-3-11-3";
+var overlay = "_15qr1eq0-3-11-3";
+var overlayContent = "_15qr1eq1-3-11-3";
+var resizeHandle = "_15qr1eq3-3-11-3";
 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-11-1';\nexport var overlay = '_15qr1eq0-3-11-1';\nexport var overlayContent = '_15qr1eq1-3-11-1';\nexport var resizeHandle = '_15qr1eq3-3-11-1';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './Overlay.css';\nexport var handleContainer = '_15qr1eq2-3-11-3';\nexport var overlay = '_15qr1eq0-3-11-3';\nexport var overlayContent = '_15qr1eq1-3-11-3';\nexport var resizeHandle = '_15qr1eq3-3-11-3';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,UAAU;AACd,IAAI,iBAAiB;AACrB,IAAI,eAAe;",
   "names": []
 }

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

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

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.sty.js

@@ -1,20 +1,20 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "../../../core/styles/focusRingStatic.css";
 import "./SidebarLayout.css";
-var collapseButton = "_1mr4xg7e-3-11-1 _1mr4xg7d-3-11-1";
-var collapseButtonContainer = "_1mr4xg7b-3-11-1";
-var collapsedSidebar = "_1mr4xg74-3-11-1";
-var content = "_1mr4xg72-3-11-1";
-var drawer = "_1mr4xg76-3-11-1";
-var drawerContent = "_1mr4xg78-3-11-1";
-var drawerContentContainer = "_1mr4xg77-3-11-1";
-var drawerHeader = "_1mr4xg79-3-11-1";
-var expandButton = "_1mr4xg7f-3-11-1 _1mr4xg7d-3-11-1";
-var expandButtonContainer = "_1mr4xg7c-3-11-1";
-var hint = "_1mr4xg75-3-11-1 _z0fq9b4-3-11-1 _z0fq9bd-3-11-1 _z0fq9b6-3-11-1 _z0fq9bc-3-11-1";
-var layoutRoot = "_1mr4xg70-3-11-1";
-var panel = "_1mr4xg71-3-11-1";
-var resizeHandle = "_1mr4xg73-3-11-1";
+var collapseButton = "_1mr4xg7e-3-11-3 _1mr4xg7d-3-11-3";
+var collapseButtonContainer = "_1mr4xg7b-3-11-3";
+var collapsedSidebar = "_1mr4xg74-3-11-3";
+var content = "_1mr4xg72-3-11-3";
+var drawer = "_1mr4xg76-3-11-3";
+var drawerContent = "_1mr4xg78-3-11-3";
+var drawerContentContainer = "_1mr4xg77-3-11-3";
+var drawerHeader = "_1mr4xg79-3-11-3";
+var expandButton = "_1mr4xg7f-3-11-3 _1mr4xg7d-3-11-3";
+var expandButtonContainer = "_1mr4xg7c-3-11-3";
+var hint = "_1mr4xg75-3-11-3 _z0fq9b4-3-11-3 _z0fq9bd-3-11-3 _z0fq9b6-3-11-3 _z0fq9bc-3-11-3";
+var layoutRoot = "_1mr4xg70-3-11-3";
+var panel = "_1mr4xg71-3-11-3";
+var resizeHandle = "_1mr4xg73-3-11-3";
 export {
   collapseButton,
   collapseButtonContainer,

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/sidebar-layout/SidebarLayout.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/focusRingStatic.css';\nimport './SidebarLayout.css';\nexport var collapseButton = '_1mr4xg7e-3-11-1 _1mr4xg7d-3-11-1';\nexport var collapseButtonContainer = '_1mr4xg7b-3-11-1';\nexport var collapsedSidebar = '_1mr4xg74-3-11-1';\nexport var content = '_1mr4xg72-3-11-1';\nexport var drawer = '_1mr4xg76-3-11-1';\nexport var drawerContent = '_1mr4xg78-3-11-1';\nexport var drawerContentContainer = '_1mr4xg77-3-11-1';\nexport var drawerHeader = '_1mr4xg79-3-11-1';\nexport var expandButton = '_1mr4xg7f-3-11-1 _1mr4xg7d-3-11-1';\nexport var expandButtonContainer = '_1mr4xg7c-3-11-1';\nexport var hint = '_1mr4xg75-3-11-1 _z0fq9b4-3-11-1 _z0fq9bd-3-11-1 _z0fq9b6-3-11-1 _z0fq9bc-3-11-1';\nexport var layoutRoot = '_1mr4xg70-3-11-1';\nexport var panel = '_1mr4xg71-3-11-1';\nexport var resizeHandle = '_1mr4xg73-3-11-1';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/focusRingStatic.css';\nimport './SidebarLayout.css';\nexport var collapseButton = '_1mr4xg7e-3-11-3 _1mr4xg7d-3-11-3';\nexport var collapseButtonContainer = '_1mr4xg7b-3-11-3';\nexport var collapsedSidebar = '_1mr4xg74-3-11-3';\nexport var content = '_1mr4xg72-3-11-3';\nexport var drawer = '_1mr4xg76-3-11-3';\nexport var drawerContent = '_1mr4xg78-3-11-3';\nexport var drawerContentContainer = '_1mr4xg77-3-11-3';\nexport var drawerHeader = '_1mr4xg79-3-11-3';\nexport var expandButton = '_1mr4xg7f-3-11-3 _1mr4xg7d-3-11-3';\nexport var expandButtonContainer = '_1mr4xg7c-3-11-3';\nexport var hint = '_1mr4xg75-3-11-3 _z0fq9b4-3-11-3 _z0fq9bd-3-11-3 _z0fq9b6-3-11-3 _z0fq9bc-3-11-3';\nexport var layoutRoot = '_1mr4xg70-3-11-3';\nexport var panel = '_1mr4xg71-3-11-3';\nexport var resizeHandle = '_1mr4xg73-3-11-3';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,0BAA0B;AAC9B,IAAI,mBAAmB;AACvB,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,yBAAyB;AAC7B,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,aAAa;AACjB,IAAI,QAAQ;AACZ,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/split-layout/SplitLayout.css

@@ -1,11 +1,11 @@
-._6q8dk20-3-11-1 {
+._6q8dk20-3-11-3 {
   height: 100%;
   overflow-y: hidden;
   overflow-x: auto;
   display: flex;
   position: relative;
 }
-._6q8dk21-3-11-1 {
+._6q8dk21-3-11-3 {
   box-sizing: border-box;
   height: 100%;
   top: 0;
@@ -13,21 +13,21 @@
   flex-shrink: 0;
   overflow-y: auto;
 }
-._6q8dk22-3-11-1 {
+._6q8dk22-3-11-3 {
   flex: 0 0 auto;
 }
-._6q8dk23-3-11-1 {
+._6q8dk23-3-11-3 {
   flex: 1 1 0;
   contain: layout paint;
 }
-._6q8dk24-3-11-1 {
+._6q8dk24-3-11-3 {
   width: var(--dt-spacings-size-8, 8px);
   align-items: center;
   display: flex;
   justify-content: center;
   overflow-y: visible;
 }
-._1jgl8s50-3-11-1 ._6q8dk24-3-11-1 {
+._1jgl8s50-3-11-3 ._6q8dk24-3-11-3 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
@@ -37,7 +37,7 @@
   margin-inline: calc(var(--dt-spacings-size-8, 8px) / -2);
   z-index: 1;
 }
-._1jgl8s50-3-11-1 ._6q8dk24-3-11-1::before {
+._1jgl8s50-3-11-3 ._6q8dk24-3-11-3::before {
   content: "";
   position: absolute;
   top: 0;
@@ -48,23 +48,23 @@
   background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
   pointer-events: none;
 }
-._1jgl8s50-3-11-1 ._6q8dk24-3-11-1:hover::before {
+._1jgl8s50-3-11-3 ._6q8dk24-3-11-3:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-11-1 ._6q8dk24-3-11-1:active::before {
+._1jgl8s50-3-11-3 ._6q8dk24-3-11-3:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._6q8dk25-3-11-1 {
+._6q8dk25-3-11-3 {
   inset: 0;
   overflow: visible;
   pointer-events: none;
   position: absolute;
   z-index: 1;
 }
-._6q8dk25-3-11-1 > * {
+._6q8dk25-3-11-3 > * {
   pointer-events: auto;
 }
-._6q8dk26-3-11-1 {
+._6q8dk26-3-11-3 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -77,17 +77,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;
 }
-._6q8dk26-3-11-1:focus-visible {
+._6q8dk26-3-11-3:focus-visible {
   width: 100%;
 }
-._6q8dk26-3-11-1:hover._6q8dk26-3-11-1:focus-visible {
+._6q8dk26-3-11-3:hover._6q8dk26-3-11-3:focus-visible {
   width: 2px;
 }
-._6q8dk26-3-11-1:focus-visible, ._6q8dk26-3-11-1:hover {
+._6q8dk26-3-11-3:focus-visible, ._6q8dk26-3-11-3:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._6q8dk26-3-11-1:after {
+._6q8dk26-3-11-3:after {
   content: "";
   display: block;
   height: 100%;
@@ -98,14 +98,14 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-11-1 ._6q8dk26-3-11-1 {
+._1jgl8s50-3-11-3 ._6q8dk26-3-11-3 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-11-1 ._6q8dk24-3-11-1:has(._6q8dk26-3-11-1:focus-visible)::before {
+._1jgl8s50-3-11-3 ._6q8dk24-3-11-3:has(._6q8dk26-3-11-3:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
 }
-:root._1jgl8s50-3-11-1 {
+:root._1jgl8s50-3-11-3 {
   --_dt-split-handle-ew: 0;
 }

package/esm/layouts/split-layout/SplitLayout.sty.js

@@ -1,12 +1,12 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./SplitLayout.css";
-var column = "_6q8dk21-3-11-1";
-var contentShellContainer = "_6q8dk23-3-11-1 _6q8dk21-3-11-1";
-var handleColumn = "_6q8dk24-3-11-1 _6q8dk21-3-11-1";
-var handleDecorations = "_6q8dk25-3-11-1";
-var layout = "_6q8dk20-3-11-1";
-var panelShellContainer = "_6q8dk22-3-11-1 _6q8dk21-3-11-1";
-var resizeHandle = "_6q8dk26-3-11-1";
+var column = "_6q8dk21-3-11-3";
+var contentShellContainer = "_6q8dk23-3-11-3 _6q8dk21-3-11-3";
+var handleColumn = "_6q8dk24-3-11-3 _6q8dk21-3-11-3";
+var handleDecorations = "_6q8dk25-3-11-3";
+var layout = "_6q8dk20-3-11-3";
+var panelShellContainer = "_6q8dk22-3-11-3 _6q8dk21-3-11-3";
+var resizeHandle = "_6q8dk26-3-11-3";
 export {
   column,
   contentShellContainer,

package/esm/layouts/split-layout/SplitLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/split-layout/SplitLayout.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './SplitLayout.css';\nexport var column = '_6q8dk21-3-11-1';\nexport var contentShellContainer = '_6q8dk23-3-11-1 _6q8dk21-3-11-1';\nexport var handleColumn = '_6q8dk24-3-11-1 _6q8dk21-3-11-1';\nexport var handleDecorations = '_6q8dk25-3-11-1';\nexport var layout = '_6q8dk20-3-11-1';\nexport var panelShellContainer = '_6q8dk22-3-11-1 _6q8dk21-3-11-1';\nexport var resizeHandle = '_6q8dk26-3-11-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './SplitLayout.css';\nexport var column = '_6q8dk21-3-11-3';\nexport var contentShellContainer = '_6q8dk23-3-11-3 _6q8dk21-3-11-3';\nexport var handleColumn = '_6q8dk24-3-11-3 _6q8dk21-3-11-3';\nexport var handleDecorations = '_6q8dk25-3-11-3';\nexport var layout = '_6q8dk20-3-11-3';\nexport var panelShellContainer = '_6q8dk22-3-11-3 _6q8dk21-3-11-3';\nexport var resizeHandle = '_6q8dk26-3-11-3';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,SAAS;AACb,IAAI,wBAAwB;AAC5B,IAAI,eAAe;AACnB,IAAI,oBAAoB;AACxB,IAAI,SAAS;AACb,IAAI,sBAAsB;AAC1B,IAAI,eAAe;",
   "names": []
 }