@dynatrace/strato-components 3.0.1 → 3.1.1

package/esm/layouts/input-group/InputGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/input-group/InputGroup.css.ts"],
-  "sourcesContent": ["import '../../forms/forms-core/components/form-field/FormField.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessages.css';\nimport './InputGroup.css';\nexport var inputGroup = '_1x4bl8z0-3-0-1';\nexport var inputGroupClassName = 'strato-inputgroup';"],
+  "sourcesContent": ["import '../../forms/forms-core/components/form-field/FormField.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessages.css';\nimport './InputGroup.css';\nexport var inputGroup = '_1x4bl8z0-3-1-1';\nexport var inputGroupClassName = 'strato-inputgroup';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,sBAAsB;",
   "names": []
 }

package/esm/layouts/page/DetailView.css

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

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

@@ -1,6 +1,6 @@
 import "./DetailView.css";
-var content = "_wapl5d1-3-0-1";
-var details = "_wapl5d0-3-0-1";
+var content = "_wapl5d1-3-1-1";
+var details = "_wapl5d0-3-1-1";
 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 './DetailView.css';\nexport var content = '_wapl5d1-3-0-1';\nexport var details = '_wapl5d0-3-0-1';"],
+  "sourcesContent": ["import './DetailView.css';\nexport var content = '_wapl5d1-3-1-1';\nexport var details = '_wapl5d0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,UAAU;",
   "names": []
 }

package/esm/layouts/page/Header.css

@@ -1,4 +1,4 @@
-._150dima0-3-0-1 {
+._150dima0-3-1-1 {
   grid-area: header;
   width: 100%;
   padding: var(--dt-spacings-size-8, 8px);

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

@@ -1,5 +1,5 @@
 import "./Header.css";
-var header = "_150dima0-3-0-1";
+var header = "_150dima0-3-1-1";
 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 './Header.css';\nexport var header = '_150dima0-3-0-1';"],
+  "sourcesContent": ["import './Header.css';\nexport var header = '_150dima0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/page/Main.css

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

package/esm/layouts/page/Main.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef, useRef } from "react";
 import * as styles from "./Main.sty.js";
-import { useRegisterPagePanel } from "./page-context.js";
+import { usePageContext, useRegisterPagePanel } from "./page-context.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 const Main = forwardRef(
   (props, forwardedRef) => {
@@ -19,12 +19,20 @@ const Main = forwardRef(
       ref: mainRef,
       minWidth
     });
+    const { panels } = usePageContext();
+    const hasSidebar = !!panels.sidebar;
+    const hasDetails = !!panels.details && !panels.details.isDismissed;
     return /* @__PURE__ */ jsx(
       "main",
       {
         ...remainingProps,
         ref: mergedRefs,
-        className: clsx(styles.main, className),
+        className: clsx(
+          styles.main,
+          hasSidebar && styles.withSidebar,
+          hasDetails && styles.withDetails,
+          className
+        ),
         style: { ...style, minWidth },
         children: /* @__PURE__ */ jsx("div", { className: styles.content, children })
       }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Main.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useRef, type HTMLAttributes } from 'react';\n\n\nimport * as styles from './Main.sty.js';\nimport { useRegisterPagePanel } from './page-context.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\n/** @public */\nexport interface MainProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps> {\n  /**\n   * The minimum width of the main panel in pixels.\n   * @defaultValue 320\n   */\n  minWidth?: number;\n}\n\n/**\n * The `Main` component is used inside the `Page` component for displaying content in the corresponding panel.\n * It is the only compound that is mandatory for rendering the `Page`.\n * @public\n */\nexport const Main = forwardRef<HTMLDivElement, MainProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      minWidth = 320,\n      className,\n      style,\n      ...remainingProps\n    }: MainProps = props;\n\n    const mainRef = useRef<HTMLDivElement>(null);\n    const mergedRefs = useMergeRefs([mainRef, forwardedRef]);\n\n    useRegisterPagePanel('main', {\n      ref: mainRef,\n      minWidth,\n    });\n\n    return (\n      <main\n        {...remainingProps}\n        ref={mergedRefs}\n        className={clsx(styles.main, className)}\n        style={{ ...style, minWidth }}\n      >\n        <div className={styles.content}>{children}</div>\n      </main>\n    );\n  },\n);\n(Main as typeof Main & { displayName: string }).displayName = 'Page.Main';\n"],
-  "mappings": "AAsDQ;AAtDR,OAAO,UAAU;AACjB,SAAS,YAAY,cAAmC;AAGxD,YAAY,YAAY;AACxB,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAuBtB,MAAM,OAAO;AAAA,EAClB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAe;AAEf,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,aAAa,aAAa,CAAC,SAAS,YAAY,CAAC;AAEvD,yBAAqB,QAAQ;AAAA,MAC3B,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,QACtC,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,QAE5B,8BAAC,SAAI,WAAW,OAAO,SAAU,UAAS;AAAA;AAAA,IAC5C;AAAA,EAEJ;AACF;AACC,KAA+C,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useRef, type HTMLAttributes } from 'react';\n\nimport * as styles from './Main.sty.js';\nimport { usePageContext, useRegisterPagePanel } from './page-context.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\n/** @public */\nexport interface MainProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps> {\n  /**\n   * The minimum width of the main panel in pixels.\n   * @defaultValue 320\n   */\n  minWidth?: number;\n}\n\n/**\n * The `Main` component is used inside the `Page` component for displaying content in the corresponding panel.\n * It is the only compound that is mandatory for rendering the `Page`.\n * @public\n */\nexport const Main = forwardRef<HTMLDivElement, MainProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      minWidth = 320,\n      className,\n      style,\n      ...remainingProps\n    }: MainProps = props;\n\n    const mainRef = useRef<HTMLDivElement>(null);\n    const mergedRefs = useMergeRefs([mainRef, forwardedRef]);\n\n    useRegisterPagePanel('main', {\n      ref: mainRef,\n      minWidth,\n    });\n\n    const { panels } = usePageContext();\n    const hasSidebar = !!panels.sidebar;\n    const hasDetails = !!panels.details && !panels.details.isDismissed;\n\n    return (\n      <main\n        {...remainingProps}\n        ref={mergedRefs}\n        className={clsx(\n          styles.main,\n          hasSidebar && styles.withSidebar,\n          hasDetails && styles.withDetails,\n          className,\n        )}\n        style={{ ...style, minWidth }}\n      >\n        <div className={styles.content}>{children}</div>\n      </main>\n    );\n  },\n);\n\n(Main as typeof Main & { displayName: string }).displayName = 'Page.Main';\n"],
+  "mappings": "AA8DQ;AA9DR,OAAO,UAAU;AACjB,SAAS,YAAY,cAAmC;AAExD,YAAY,YAAY;AACxB,SAAS,gBAAgB,4BAA4B;AACrD,SAAS,oBAAoB;AAuBtB,MAAM,OAAO;AAAA,EAClB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAe;AAEf,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,aAAa,aAAa,CAAC,SAAS,YAAY,CAAC;AAEvD,yBAAqB,QAAQ;AAAA,MAC3B,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAED,UAAM,EAAE,OAAO,IAAI,eAAe;AAClC,UAAM,aAAa,CAAC,CAAC,OAAO;AAC5B,UAAM,aAAa,CAAC,CAAC,OAAO,WAAW,CAAC,OAAO,QAAQ;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW;AAAA,UACT,OAAO;AAAA,UACP,cAAc,OAAO;AAAA,UACrB,cAAc,OAAO;AAAA,UACrB;AAAA,QACF;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,QAE5B,8BAAC,SAAI,WAAW,OAAO,SAAU,UAAS;AAAA;AAAA,IAC5C;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
   "names": []
 }

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

@@ -1,8 +1,12 @@
 import "./Main.css";
-var content = "_5zin931-3-0-1";
-var main = "_5zin930-3-0-1";
+var content = "_5zin931-3-1-1";
+var main = "_5zin930-3-1-1";
+var withDetails = "_5zin933-3-1-1";
+var withSidebar = "_5zin932-3-1-1";
 export {
   content,
-  main
+  main,
+  withDetails,
+  withSidebar
 };
 //# sourceMappingURL=Main.sty.js.map

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

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

package/esm/layouts/page/Page.css

@@ -1,16 +1,7 @@
-._1j29czt0-3-0-1 {
+._1j29czt0-3-1-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;
   height: 100vh;
   overflow: hidden;
-}
-._1j29czt0-3-0-1:has(> ._zdcge90-3-0-1) > ._5zin930-3-0-1 {
-  border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
-}
-._1j29czt0-3-0-1:has(> ._wapl5d0-3-0-1) > ._5zin930-3-0-1 {
-  border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
-}
-._1j29czt0-3-0-1:has(> ._wapl5d0-3-0-1._1p91g302-3-0-1:not(._zdcge99-3-0-1)) > ._5zin930-3-0-1 {
-  border-top-right-radius: 0;
 }

package/esm/layouts/page/Page.js

@@ -18,6 +18,7 @@ import { PanelControlButton } from "./PanelControlButton.js";
 import { Sidebar } from "./Sidebar.js";
 import { useContainerSize } from "../../core/hooks/useContainerSize.js";
 import { useSlots } from "../../core/hooks/useSlots.js";
+const COMPONENT_NAME = "Page";
 function handleRegisterAction(state, payload) {
   const { panel, ref, isControlled, isDismissed, minWidth, breakpoint } = payload;
   if (state[panel]) {
@@ -248,6 +249,7 @@ const PageRoot = (props) => {
       ref: containerRef,
       className: clsx(styles.page, className),
       style: { ...style, ...gridTemplateStyles },
+      "data-dt-component": COMPONENT_NAME,
       children: [
         slots.header,
         /* @__PURE__ */ jsx(pageContext.Provider, { value: ctx, children: otherChildren })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Page.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useCallback,\n  useMemo,\n  useReducer,\n  useRef,\n  type HTMLAttributes,\n  type RefObject,\n} from 'react';\nimport type { Entries } from 'type-fest';\n\n\nimport { DetailView } from './DetailView.js';\nimport { Header } from './Header.js';\nimport { Main } from './Main.js';\nimport {\n  pageContext,\n  type PageContext,\n  type PageLayoutState,\n} from './page-context.js';\nimport type { PagePanelSizes, PanelName } from './page-types.js';\nimport * as styles from './Page.sty.js';\nimport { GAP_SIZE } from './panel.sty.js';\nimport { PanelControlButton } from './PanelControlButton.js';\nimport { Sidebar } from './Sidebar.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\n/** @public */\nexport interface PageProps\n  extends WithChildren,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps>,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Whether animations should be disabled.\n   * If true or 'prefers-reduced-motion' is set to 'reduce', no animations are applied.\n   * @defaultValue false\n   */\n  disableAnimations?: boolean;\n}\n\ninterface RegisterPanelPayload {\n  panel: PanelName;\n  ref: RefObject<HTMLDivElement>;\n  isControlled: boolean;\n  isDismissed: boolean;\n  minWidth?: number;\n  breakpoint?: number;\n}\n\ntype PANELACTION =\n  | { type: 'register'; payload: RegisterPanelPayload }\n  | { type: 'remove'; payload: { panel: PanelName } }\n  | { type: 'dismiss'; payload: { panel: PanelName } }\n  | { type: 'expand'; payload: { panel: PanelName } }\n  | { type: 'toggle'; payload: { panel: PanelName } };\n\nfunction handleRegisterAction(\n  state: PageLayoutState,\n  payload: RegisterPanelPayload,\n): PageLayoutState {\n  const { panel, ref, isControlled, isDismissed, minWidth, breakpoint } =\n    payload;\n\n  if (state[panel]) {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (panel === 'main') {\n    newState[panel] = {\n      ref,\n      isControlled: false,\n      isDismissed: false,\n      minWidth: minWidth ?? 0,\n      breakpoint: 0,\n    };\n    return newState;\n  }\n  newState[panel] = {\n    ref,\n    isControlled,\n    isDismissed,\n    minWidth: minWidth ?? 0,\n    breakpoint: breakpoint ?? 0,\n  };\n\n  return newState;\n}\n\nfunction handleRemoveAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  const newState = { ...state, [panel]: null };\n\n  return newState;\n}\n\nfunction handleDismissAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  if (panel === 'main') {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (!newState[panel]) {\n    return state;\n  }\n\n  const isControlled = newState[panel].isControlled;\n  if (isControlled) {\n    return state;\n  }\n\n  newState[panel] = {\n    ...newState[panel],\n    isDismissed: true,\n  };\n\n  return newState;\n}\n\nfunction handleExpandAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  if (panel === 'main') {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (!newState[panel]) {\n    return state;\n  }\n\n  const isControlled = newState[panel].isControlled;\n  if (isControlled) {\n    return state;\n  }\n\n  newState[panel] = {\n    ...newState[panel],\n    isDismissed: false,\n  };\n\n  return newState;\n}\n\nfunction handleToggleAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  if (panel === 'main') {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (!newState[panel]) {\n    return state;\n  }\n\n  const isControlled = newState[panel].isControlled;\n  if (isControlled) {\n    return state;\n  }\n\n  newState[panel] = {\n    ...newState[panel],\n    isDismissed: !newState[panel].isDismissed,\n  };\n\n  return newState;\n}\n\nfunction pageLayoutReducer(\n  state: PageLayoutState,\n  action: PANELACTION,\n): PageLayoutState {\n  if (action.type === 'register') {\n    return handleRegisterAction(state, action.payload);\n  }\n\n  if (action.type === 'remove') {\n    return handleRemoveAction(state, action.payload);\n  }\n\n  if (action.type === 'dismiss') {\n    return handleDismissAction(state, action.payload);\n  }\n\n  if (action.type === 'expand') {\n    return handleExpandAction(state, action.payload);\n  }\n\n  if (action.type === 'toggle') {\n    return handleToggleAction(state, action.payload);\n  }\n\n  throw Error('invalid action.type');\n}\n\nfunction getGridColumnStyle(\n  panel: {\n    isDismissed: boolean;\n    minWidth?: number;\n    breakpoint?: number;\n  },\n  max: string = 'auto',\n) {\n  const hasDrawer = !window.matchMedia(`(min-width: ${panel.breakpoint}px)`)\n    .matches;\n\n  if (hasDrawer || panel.minWidth === undefined || panel.isDismissed) {\n    return `minmax(min-content, ${max})`;\n  }\n\n  return `minmax(${panel.minWidth + GAP_SIZE}px, ${max})`;\n}\n\nfunction getGridTemplateStyles(panels: PageLayoutState) {\n  let columns = '';\n  let contentAreas = '';\n  let headerAreas = '';\n\n  if (panels.main) {\n    columns = `${getGridColumnStyle(panels.main, '1fr')} ${columns}`;\n    contentAreas = 'main';\n    headerAreas = 'header';\n  }\n\n  if (panels.sidebar) {\n    columns = `${getGridColumnStyle(panels.sidebar)} ${columns}`;\n    contentAreas = `sidebar ${contentAreas}`;\n    headerAreas = `header ${headerAreas}`;\n  }\n\n  if (panels.details) {\n    columns = `${columns} ${getGridColumnStyle(panels.details)}`;\n    contentAreas = `${contentAreas} details`;\n    headerAreas = `${headerAreas} header`;\n  }\n\n  return {\n    gridTemplateColumns: columns,\n    gridTemplateAreas: `\"${headerAreas}\" \"${contentAreas}\"`,\n    gridTemplateRows: 'min-content minmax(0, 1fr)',\n  };\n}\n\nconst PageRoot = (props: PageProps) => {\n  const { children, style, className, ...remainingProps } = props;\n  const [slots, otherChildren] = useSlots(children, {\n    header: Header,\n  });\n\n  const [panels, dispatch] = useReducer(pageLayoutReducer, {\n    sidebar: null,\n    main: null,\n    details: null,\n  });\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerSize = useContainerSize(containerRef);\n\n  const getPanelSizes = useCallback(() => {\n    const sizes: PagePanelSizes = {};\n\n    for (const [key, panel] of Object.entries(panels) as Entries<\n      typeof panels\n    >) {\n      if (!panel?.ref.current) {\n        continue;\n      }\n      const panelSize = parseFloat(getComputedStyle(panel.ref.current).width);\n      sizes[key] = {\n        px: panelSize,\n        '%': (panelSize / containerSize.width) * 100,\n      };\n    }\n\n    return sizes;\n  }, [containerSize.width, panels]);\n\n  const registerPanel = useCallback<PageContext['registerPanel']>(\n    (panelName, { ref, isControlled, isDismissed, minWidth, breakpoint }) => {\n      dispatch({\n        type: 'register',\n        payload: {\n          panel: panelName,\n          ref,\n          isControlled,\n          isDismissed,\n          minWidth,\n          breakpoint,\n        },\n      });\n    },\n    [],\n  );\n\n  const removePanel = useCallback<PageContext['removePanel']>((panelName) => {\n    dispatch({ type: 'remove', payload: { panel: panelName } });\n  }, []);\n\n  const dismissPanel = useCallback<PageContext['dismissPanel']>((panelName) => {\n    dispatch({\n      type: 'dismiss',\n      payload: { panel: panelName },\n    });\n  }, []);\n\n  const expandPanel = useCallback<PageContext['expandPanel']>((panelName) => {\n    dispatch({\n      type: 'expand',\n      payload: { panel: panelName },\n    });\n  }, []);\n\n  const togglePanel = useCallback<PageContext['togglePanel']>((panelName) => {\n    dispatch({\n      type: 'toggle',\n      payload: { panel: panelName },\n    });\n  }, []);\n\n  const gridTemplateStyles = getGridTemplateStyles(panels);\n\n  const ctx = useMemo(\n    () => ({\n      containerSize: containerSize.width,\n      panels,\n      registerPanel,\n      removePanel,\n      dismissPanel,\n      expandPanel,\n      togglePanel,\n      getPanelSizes,\n    }),\n    [\n      containerSize.width,\n      panels,\n      registerPanel,\n      removePanel,\n      dismissPanel,\n      expandPanel,\n      togglePanel,\n      getPanelSizes,\n    ],\n  );\n\n  return (\n    <div\n      {...remainingProps}\n      ref={containerRef}\n      className={clsx(styles.page, className)}\n      style={{ ...style, ...gridTemplateStyles }}\n    >\n      {slots.header}\n      <pageContext.Provider value={ctx}>{otherChildren}</pageContext.Provider>\n    </div>\n  );\n};\n\n/**\n * The `Page` component provides the basic layout for your app with slots for a header, sidebar, main content, and a detail view.\n * The `Main` slot is the only slot that is mandatory for rendering the `Page`; every other slot is optional.\n * @public\n */\nexport const Page = Object.assign(PageRoot, {\n  /** The `Header` component is used inside the `Page` component for displaying content at the very top of the page. */\n  Header,\n  /** The `Sidebar` component is used inside the `Page` component for displaying content in the corresponding panel. */\n  Sidebar,\n  /**\n   * The `Main` component is used inside the `Page` component for displaying content in the corresponding panel.\n   * It is the only compound that is mandatory for rendering the `Page`.\n   */\n  Main,\n  /** The `DetailView` component is used inside the `Page` component for displaying content in the corresponding panel. */\n  DetailView,\n  /**\n   * Use the `PanelControlButton` to get the correct icon for toggling the sidebar / detail view.\n   * Depending on where it is rendered and the current state of the panel, the corresponding icon is rendered.\n   * You can customize the rendered content by passing any children.\n   */\n  PanelControlButton,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type HTMLAttributes,\n  type RefObject,\n  useCallback,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react';\nimport type { Entries } from 'type-fest';\n\nimport { DetailView } from './DetailView.js';\nimport { Header } from './Header.js';\nimport { Main } from './Main.js';\nimport {\n  pageContext,\n  type PageContext,\n  type PageLayoutState,\n} from './page-context.js';\nimport type { PagePanelSizes, PanelName } from './page-types.js';\nimport * as styles from './Page.sty.js';\nimport { GAP_SIZE } from './panel.sty.js';\nimport { PanelControlButton } from './PanelControlButton.js';\nimport { Sidebar } from './Sidebar.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Page';\n\n/** @public */\nexport interface PageProps\n  extends WithChildren,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps>,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Whether animations should be disabled.\n   * If true or 'prefers-reduced-motion' is set to 'reduce', no animations are applied.\n   * @defaultValue false\n   */\n  disableAnimations?: boolean;\n}\n\ninterface RegisterPanelPayload {\n  panel: PanelName;\n  ref: RefObject<HTMLDivElement>;\n  isControlled: boolean;\n  isDismissed: boolean;\n  minWidth?: number;\n  breakpoint?: number;\n}\n\ntype PANELACTION =\n  | { type: 'register'; payload: RegisterPanelPayload }\n  | { type: 'remove'; payload: { panel: PanelName } }\n  | { type: 'dismiss'; payload: { panel: PanelName } }\n  | { type: 'expand'; payload: { panel: PanelName } }\n  | { type: 'toggle'; payload: { panel: PanelName } };\n\nfunction handleRegisterAction(\n  state: PageLayoutState,\n  payload: RegisterPanelPayload,\n): PageLayoutState {\n  const { panel, ref, isControlled, isDismissed, minWidth, breakpoint } =\n    payload;\n\n  if (state[panel]) {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (panel === 'main') {\n    newState[panel] = {\n      ref,\n      isControlled: false,\n      isDismissed: false,\n      minWidth: minWidth ?? 0,\n      breakpoint: 0,\n    };\n    return newState;\n  }\n  newState[panel] = {\n    ref,\n    isControlled,\n    isDismissed,\n    minWidth: minWidth ?? 0,\n    breakpoint: breakpoint ?? 0,\n  };\n\n  return newState;\n}\n\nfunction handleRemoveAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  const newState = { ...state, [panel]: null };\n\n  return newState;\n}\n\nfunction handleDismissAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  if (panel === 'main') {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (!newState[panel]) {\n    return state;\n  }\n\n  const isControlled = newState[panel].isControlled;\n  if (isControlled) {\n    return state;\n  }\n\n  newState[panel] = {\n    ...newState[panel],\n    isDismissed: true,\n  };\n\n  return newState;\n}\n\nfunction handleExpandAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  if (panel === 'main') {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (!newState[panel]) {\n    return state;\n  }\n\n  const isControlled = newState[panel].isControlled;\n  if (isControlled) {\n    return state;\n  }\n\n  newState[panel] = {\n    ...newState[panel],\n    isDismissed: false,\n  };\n\n  return newState;\n}\n\nfunction handleToggleAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  if (panel === 'main') {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (!newState[panel]) {\n    return state;\n  }\n\n  const isControlled = newState[panel].isControlled;\n  if (isControlled) {\n    return state;\n  }\n\n  newState[panel] = {\n    ...newState[panel],\n    isDismissed: !newState[panel].isDismissed,\n  };\n\n  return newState;\n}\n\nfunction pageLayoutReducer(\n  state: PageLayoutState,\n  action: PANELACTION,\n): PageLayoutState {\n  if (action.type === 'register') {\n    return handleRegisterAction(state, action.payload);\n  }\n\n  if (action.type === 'remove') {\n    return handleRemoveAction(state, action.payload);\n  }\n\n  if (action.type === 'dismiss') {\n    return handleDismissAction(state, action.payload);\n  }\n\n  if (action.type === 'expand') {\n    return handleExpandAction(state, action.payload);\n  }\n\n  if (action.type === 'toggle') {\n    return handleToggleAction(state, action.payload);\n  }\n\n  throw Error('invalid action.type');\n}\n\nfunction getGridColumnStyle(\n  panel: {\n    isDismissed: boolean;\n    minWidth?: number;\n    breakpoint?: number;\n  },\n  max: string = 'auto',\n) {\n  const hasDrawer = !window.matchMedia(`(min-width: ${panel.breakpoint}px)`)\n    .matches;\n\n  if (hasDrawer || panel.minWidth === undefined || panel.isDismissed) {\n    return `minmax(min-content, ${max})`;\n  }\n\n  return `minmax(${panel.minWidth + GAP_SIZE}px, ${max})`;\n}\n\nfunction getGridTemplateStyles(panels: PageLayoutState) {\n  let columns = '';\n  let contentAreas = '';\n  let headerAreas = '';\n\n  if (panels.main) {\n    columns = `${getGridColumnStyle(panels.main, '1fr')} ${columns}`;\n    contentAreas = 'main';\n    headerAreas = 'header';\n  }\n\n  if (panels.sidebar) {\n    columns = `${getGridColumnStyle(panels.sidebar)} ${columns}`;\n    contentAreas = `sidebar ${contentAreas}`;\n    headerAreas = `header ${headerAreas}`;\n  }\n\n  if (panels.details) {\n    columns = `${columns} ${getGridColumnStyle(panels.details)}`;\n    contentAreas = `${contentAreas} details`;\n    headerAreas = `${headerAreas} header`;\n  }\n\n  return {\n    gridTemplateColumns: columns,\n    gridTemplateAreas: `\"${headerAreas}\" \"${contentAreas}\"`,\n    gridTemplateRows: 'min-content minmax(0, 1fr)',\n  };\n}\n\nconst PageRoot = (props: PageProps) => {\n  const { children, style, className, ...remainingProps } = props;\n  const [slots, otherChildren] = useSlots(children, {\n    header: Header,\n  });\n\n  const [panels, dispatch] = useReducer(pageLayoutReducer, {\n    sidebar: null,\n    main: null,\n    details: null,\n  });\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerSize = useContainerSize(containerRef);\n\n  const getPanelSizes = useCallback(() => {\n    const sizes: PagePanelSizes = {};\n\n    for (const [key, panel] of Object.entries(panels) as Entries<\n      typeof panels\n    >) {\n      if (!panel?.ref.current) {\n        continue;\n      }\n      const panelSize = parseFloat(getComputedStyle(panel.ref.current).width);\n      sizes[key] = {\n        px: panelSize,\n        '%': (panelSize / containerSize.width) * 100,\n      };\n    }\n\n    return sizes;\n  }, [containerSize.width, panels]);\n\n  const registerPanel = useCallback<PageContext['registerPanel']>(\n    (panelName, { ref, isControlled, isDismissed, minWidth, breakpoint }) => {\n      dispatch({\n        type: 'register',\n        payload: {\n          panel: panelName,\n          ref,\n          isControlled,\n          isDismissed,\n          minWidth,\n          breakpoint,\n        },\n      });\n    },\n    [],\n  );\n\n  const removePanel = useCallback<PageContext['removePanel']>((panelName) => {\n    dispatch({ type: 'remove', payload: { panel: panelName } });\n  }, []);\n\n  const dismissPanel = useCallback<PageContext['dismissPanel']>((panelName) => {\n    dispatch({\n      type: 'dismiss',\n      payload: { panel: panelName },\n    });\n  }, []);\n\n  const expandPanel = useCallback<PageContext['expandPanel']>((panelName) => {\n    dispatch({\n      type: 'expand',\n      payload: { panel: panelName },\n    });\n  }, []);\n\n  const togglePanel = useCallback<PageContext['togglePanel']>((panelName) => {\n    dispatch({\n      type: 'toggle',\n      payload: { panel: panelName },\n    });\n  }, []);\n\n  const gridTemplateStyles = getGridTemplateStyles(panels);\n\n  const ctx = useMemo(\n    () => ({\n      containerSize: containerSize.width,\n      panels,\n      registerPanel,\n      removePanel,\n      dismissPanel,\n      expandPanel,\n      togglePanel,\n      getPanelSizes,\n    }),\n    [\n      containerSize.width,\n      panels,\n      registerPanel,\n      removePanel,\n      dismissPanel,\n      expandPanel,\n      togglePanel,\n      getPanelSizes,\n    ],\n  );\n\n  return (\n    <div\n      {...remainingProps}\n      ref={containerRef}\n      className={clsx(styles.page, className)}\n      style={{ ...style, ...gridTemplateStyles }}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {slots.header}\n      <pageContext.Provider value={ctx}>{otherChildren}</pageContext.Provider>\n    </div>\n  );\n};\n\n/**\n * The `Page` component provides the basic layout for your app with slots for a header, sidebar, main content, and a detail view.\n * The `Main` slot is the only slot that is mandatory for rendering the `Page`; every other slot is optional.\n * @public\n */\nexport const Page = Object.assign(PageRoot, {\n  /** The `Header` component is used inside the `Page` component for displaying content at the very top of the page. */\n  Header,\n  /** The `Sidebar` component is used inside the `Page` component for displaying content in the corresponding panel. */\n  Sidebar,\n  /**\n   * The `Main` component is used inside the `Page` component for displaying content in the corresponding panel.\n   * It is the only compound that is mandatory for rendering the `Page`.\n   */\n  Main,\n  /** The `DetailView` component is used inside the `Page` component for displaying content in the corresponding panel. */\n  DetailView,\n  /**\n   * Use the `PanelControlButton` to get the correct icon for toggling the sidebar / detail view.\n   * Depending on where it is rendered and the current state of the panel, the corresponding icon is rendered.\n   * You can customize the rendered content by passing any children.\n   */\n  PanelControlButton,\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,10 +1,5 @@
-import "./DetailView.css";
-import "./Main.css";
-import "./panel.css";
-import "../../core/styles/focusRingStatic.css";
-import "./Sidebar.css";
 import "./Page.css";
-var page = "_1j29czt0-3-0-1";
+var page = "_1j29czt0-3-1-1";
 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 './DetailView.css';\nimport './Main.css';\nimport './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nimport './Page.css';\nexport var page = '_1j29czt0-3-0-1';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,OAAO;",
+  "sourcesContent": ["import './Page.css';\nexport var page = '_1j29czt0-3-1-1';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/layouts/page/Sidebar.css

@@ -1,16 +1,16 @@
-._zdcge90-3-0-1 {
+._zdcge90-3-1-1 {
   grid-area: sidebar;
   justify-content: flex-end;
 }
-._zdcge91-3-0-1 {
+._zdcge91-3-1-1 {
   flex-shrink: 0;
   height: 100%;
   left: 0;
   position: relative;
   width: 0;
 }
-._zdcge93-3-0-1 {
-  --_zdcge92-3-0-1: 16px;
+._zdcge93-3-1-1 {
+  --_zdcge92-3-1-1: 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-0-1);
-  translate: calc(0px - var(--_zdcge92-3-0-1) * 2);
+  width: var(--_zdcge92-3-1-1);
+  translate: calc(0px - var(--_zdcge92-3-1-1) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1p91g301-3-0-1:is(:hover,:focus-within) ._zdcge93-3-0-1 {
+._1p91g301-3-1-1:is(:hover,:focus-within) ._zdcge93-3-1-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
-  translate: calc(0px - var(--_zdcge92-3-0-1) - var(--_zdcge92-3-0-1) / 2);
+  translate: calc(0px - var(--_zdcge92-3-1-1) - var(--_zdcge92-3-1-1) / 2);
 }
-._zdcge95-3-0-1 {
-  --_zdcge94-3-0-1: 24px;
+._zdcge95-3-1-1 {
+  --_zdcge94-3-1-1: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
-  left: calc(0px - var(--_zdcge94-3-0-1) / 2 + 2px);
+  left: calc(0px - var(--_zdcge94-3-1-1) / 2 + 2px);
 }
-._zdcge96-3-0-1 {
-  width: var(--_zdcge94-3-0-1);
-  height: var(--_zdcge94-3-0-1);
+._zdcge96-3-1-1 {
+  width: var(--_zdcge94-3-1-1);
+  height: var(--_zdcge94-3-1-1);
   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-0-1 {
+._zdcge97-3-1-1 {
   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-0-1:hover {
+._zdcge97-3-1-1:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._zdcge97-3-0-1:focus {
+._zdcge97-3-1-1:focus {
   opacity: 1;
 }
-._1p91g301-3-0-1:hover ._zdcge97-3-0-1 {
+._1p91g301-3-1-1:hover ._zdcge97-3-1-1 {
   opacity: 1;
 }
-._zdcge98-3-0-1 {
+._zdcge98-3-1-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge98-3-0-1:hover {
+._zdcge98-3-1-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge99-3-0-1._1p91g302-3-0-1 {
+._zdcge99-3-1-1._1p91g302-3-1-1 {
   width: var(--dt-spacings-size-16, 16px);
 }
-._zdcge9a-3-0-1 {
+._zdcge9a-3-1-1 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-inline: var(--dt-spacings-size-8, 8px);

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

@@ -1,14 +1,14 @@
 import "./panel.css";
 import "../../core/styles/focusRingStatic.css";
 import "./Sidebar.css";
-var buttonContainer = "_zdcge95-3-0-1";
-var dismissButton = "_zdcge97-3-0-1 _zdcge96-3-0-1";
-var expandButton = "_zdcge98-3-0-1 _zdcge96-3-0-1";
-var hint = "_zdcge93-3-0-1 _z0fq9b4-3-0-1 _z0fq9bc-3-0-1 _z0fq9b6-3-0-1 _z0fq9bb-3-0-1";
-var integratedControls = "_zdcge91-3-0-1";
-var integratedControlsDrawerHeader = "_zdcge9a-3-0-1";
-var integratedControlsPanel = "_zdcge99-3-0-1";
-var sidebar = "_zdcge90-3-0-1";
+var buttonContainer = "_zdcge95-3-1-1";
+var dismissButton = "_zdcge97-3-1-1 _zdcge96-3-1-1";
+var expandButton = "_zdcge98-3-1-1 _zdcge96-3-1-1";
+var hint = "_zdcge93-3-1-1 _z0fq9b4-3-1-1 _z0fq9bc-3-1-1 _z0fq9b6-3-1-1 _z0fq9bb-3-1-1";
+var integratedControls = "_zdcge91-3-1-1";
+var integratedControlsDrawerHeader = "_zdcge9a-3-1-1";
+var integratedControlsPanel = "_zdcge99-3-1-1";
+var sidebar = "_zdcge90-3-1-1";
 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 './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-0-1';\nexport var dismissButton = '_zdcge97-3-0-1 _zdcge96-3-0-1';\nexport var expandButton = '_zdcge98-3-0-1 _zdcge96-3-0-1';\nexport var hint = '_zdcge93-3-0-1 _z0fq9b4-3-0-1 _z0fq9bc-3-0-1 _z0fq9b6-3-0-1 _z0fq9bb-3-0-1';\nexport var integratedControls = '_zdcge91-3-0-1';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-0-1';\nexport var integratedControlsPanel = '_zdcge99-3-0-1';\nexport var sidebar = '_zdcge90-3-0-1';"],
+  "sourcesContent": ["import './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-1-1';\nexport var dismissButton = '_zdcge97-3-1-1 _zdcge96-3-1-1';\nexport var expandButton = '_zdcge98-3-1-1 _zdcge96-3-1-1';\nexport var hint = '_zdcge93-3-1-1 _z0fq9b4-3-1-1 _z0fq9bc-3-1-1 _z0fq9b6-3-1-1 _z0fq9bb-3-1-1';\nexport var integratedControls = '_zdcge91-3-1-1';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-1-1';\nexport var integratedControlsPanel = '_zdcge99-3-1-1';\nexport var sidebar = '_zdcge90-3-1-1';"],
   "mappings": "AAAA,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-0-1 {
+._1p91g301-3-1-1 {
   box-sizing: border-box;
   display: flex;
   max-width: 100%;
 }
-._1p91g302-3-0-1 {
+._1p91g302-3-1-1 {
   width: 0;
   position: relative;
 }
-._1p91g303-3-0-1 {
+._1p91g303-3-1-1 {
   flex-shrink: 0;
   position: relative;
   width: 8px;
 }
-._1p91g304-3-0-1 {
+._1p91g304-3-1-1 {
   box-sizing: border-box;
   padding: 0;
 }
-._1p91g305-3-0-1 {
+._1p91g305-3-1-1 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;
 }
-._1p91g306-3-0-1 {
+._1p91g306-3-1-1 {
   line-height: 0;
 }
-._1p91g307-3-0-1 {
+._1p91g307-3-1-1 {
   box-sizing: border-box;
   flex-grow: 1;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   position: relative;
 }
-._1p91g308-3-0-1 {
+._1p91g308-3-1-1 {
   flex-shrink: 0;
   width: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -40,7 +40,7 @@
   height: 100%;
   justify-content: center;
 }
-._1p91g309-3-0-1 {
+._1p91g309-3-1-1 {
   background: var(--dt-colors-border-neutral-default, #dadbe4);
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
@@ -54,17 +54,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-0-1:focus-visible {
+._1p91g309-3-1-1:focus-visible {
   width: 100%;
 }
-._1p91g309-3-0-1:hover._1p91g309-3-0-1:focus-visible {
+._1p91g309-3-1-1:hover._1p91g309-3-1-1:focus-visible {
   width: 2px;
 }
-._1p91g309-3-0-1:focus-visible, ._1p91g309-3-0-1:hover {
+._1p91g309-3-1-1:focus-visible, ._1p91g309-3-1-1:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._1p91g309-3-0-1:after {
+._1p91g309-3-1-1:after {
   content: "";
   display: block;
   height: 100%;

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

@@ -1,15 +1,15 @@
 import "./panel.css";
 var GAP_SIZE = 8;
-var buttonIcon = "_1p91g306-3-0-1";
-var dismissedPanel = "_1p91g302-3-0-1";
-var drawer = "_1p91g304-3-0-1";
-var drawerContent = "_1p91g305-3-0-1";
-var gap = "_1p91g303-3-0-1";
-var panelContent = "_1p91g307-3-0-1";
-var resizeHandle = "_1p91g309-3-0-1";
-var resizeHandleContainer = "_1p91g308-3-0-1";
-var root = "_1p91g301-3-0-1";
-var rtlPanel = "_1p91g300-3-0-1";
+var buttonIcon = "_1p91g306-3-1-1";
+var dismissedPanel = "_1p91g302-3-1-1";
+var drawer = "_1p91g304-3-1-1";
+var drawerContent = "_1p91g305-3-1-1";
+var gap = "_1p91g303-3-1-1";
+var panelContent = "_1p91g307-3-1-1";
+var resizeHandle = "_1p91g309-3-1-1";
+var resizeHandleContainer = "_1p91g308-3-1-1";
+var root = "_1p91g301-3-1-1";
+var rtlPanel = "_1p91g300-3-1-1";
 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 './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-0-1';\nexport var dismissedPanel = '_1p91g302-3-0-1';\nexport var drawer = '_1p91g304-3-0-1';\nexport var drawerContent = '_1p91g305-3-0-1';\nexport var gap = '_1p91g303-3-0-1';\nexport var panelContent = '_1p91g307-3-0-1';\nexport var resizeHandle = '_1p91g309-3-0-1';\nexport var resizeHandleContainer = '_1p91g308-3-0-1';\nexport var root = '_1p91g301-3-0-1';\nexport var rtlPanel = '_1p91g300-3-0-1';"],
+  "sourcesContent": ["import './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-1-1';\nexport var dismissedPanel = '_1p91g302-3-1-1';\nexport var drawer = '_1p91g304-3-1-1';\nexport var drawerContent = '_1p91g305-3-1-1';\nexport var gap = '_1p91g303-3-1-1';\nexport var panelContent = '_1p91g307-3-1-1';\nexport var resizeHandle = '_1p91g309-3-1-1';\nexport var resizeHandleContainer = '_1p91g308-3-1-1';\nexport var root = '_1p91g301-3-1-1';\nexport var rtlPanel = '_1p91g300-3-1-1';"],
   "mappings": "AAAA,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/split-layout/SplitLayout.css

@@ -0,0 +1,72 @@
+._6q8dk20-3-1-1 {
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: auto;
+  display: flex;
+  position: relative;
+}
+._6q8dk21-3-1-1 {
+  box-sizing: border-box;
+  height: 100%;
+  top: 0;
+  position: relative;
+  flex-shrink: 0;
+}
+._6q8dk22-3-1-1 {
+  flex: 0 0 auto;
+}
+._6q8dk23-3-1-1 {
+  flex: 1 1 0;
+  contain: layout paint;
+}
+._6q8dk24-3-1-1 {
+  width: var(--dt-spacings-size-8, 8px);
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+._6q8dk25-3-1-1 {
+  inset: 0;
+  overflow: visible;
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+}
+._6q8dk25-3-1-1 > * {
+  pointer-events: auto;
+}
+._6q8dk26-3-1-1 {
+  background: var(--dt-colors-border-neutral-default, #dadbe4);
+  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;
+}
+._6q8dk26-3-1-1:focus-visible {
+  width: 100%;
+}
+._6q8dk26-3-1-1:hover._6q8dk26-3-1-1:focus-visible {
+  width: 2px;
+}
+._6q8dk26-3-1-1:focus-visible, ._6q8dk26-3-1-1:hover {
+  height: var(--dt-spacings-size-48, 48px);
+  background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
+}
+._6q8dk26-3-1-1:after {
+  content: "";
+  display: block;
+  height: 100%;
+  left: 50%;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  user-select: none;
+  width: 100%;
+}