@dynatrace/strato-components 3.0.1 → 3.1.1

package/layouts/help-menu/HelpMenu.js

@@ -31,6 +31,7 @@ var import_Button = require("../../buttons/button/Button.js");
 var import_Menu = require("../../navigation/menu/Menu.js");
 var import_Tooltip = require("../../overlays/tooltip/Tooltip.js");
 var import_Flex = require("../flex/Flex.js");
+const COMPONENT_NAME = "HelpMenu";
 const MENU_ITEMS = [
   {
     label: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { defaultMessage: "What's new", id: "TY3F/kE6n91t0TL0" }),
@@ -143,15 +144,7 @@ const HelpMenuButton = ({
   ] });
 };
 const HelpMenu = (props) => {
-  const {
-    entries,
-    children
-    // className,
-    // style,
-    // 'data-dtrum-allow': dataDtrumAllow,
-    // 'data-dtrum-mask': dataDtrumMask,
-    // 'data-testid': dataTestId,
-  } = props;
+  const { entries, children } = props;
   const [isOpen, setIsOpen] = (0, import_react.useState)(false);
   const intl = (0, import_react_intl.useIntl)();
   const label = intl.formatMessage({
@@ -162,82 +155,90 @@ const HelpMenu = (props) => {
     setIsOpen(value);
     props.onOpenChange?.(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu, { open: isOpen, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: label, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.HelpIcon, {}) }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Content, { children: [
-      MENU_ITEMS.map(({ label: label2, key, icon }) => {
-        const entry = entries[key];
-        if (!entry) {
-          return null;
-        }
-        if (entry === "default") {
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            HelpMenuDefaults,
-            {
-              entryKey: key,
-              icon,
-              label: label2
-            },
-            key
-          );
-        }
-        if (Array.isArray(entry)) {
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Sub, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.SubTrigger, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Prefix, { children: icon }),
-              label2
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.SubContent, { children: entry.map((entryChild) => {
-              if ("href" in entryChild) {
-                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  HelpMenuLink,
-                  {
-                    label: entryChild.label,
-                    onSelect: entryChild.onSelect,
-                    href: entryChild.href,
-                    target: entryChild.target
-                  },
-                  entryChild.label
-                );
-              }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_Menu.Menu,
+    {
+      open: isOpen,
+      onOpenChange: handleOpenChange,
+      "data-dt-component": COMPONENT_NAME,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: label, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Trigger, { "data-dt-component": COMPONENT_NAME, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.HelpIcon, {}) }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Content, { children: [
+          MENU_ITEMS.map(({ label: label2, key, icon }) => {
+            const entry = entries[key];
+            if (!entry) {
+              return null;
+            }
+            if (entry === "default") {
               return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                HelpMenuButton,
+                HelpMenuDefaults,
                 {
-                  label: entryChild.label,
-                  onSelect: entryChild.onSelect
+                  entryKey: key,
+                  icon,
+                  label: label2
                 },
-                entryChild.label
+                key
               );
-            }) })
-          ] }, key);
-        }
-        if ("href" in entry) {
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            HelpMenuLink,
-            {
-              label: label2,
-              icon,
-              onSelect: entry.onSelect,
-              href: entry.href,
-              target: entry.target
-            },
-            key
-          );
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          HelpMenuButton,
-          {
-            label: label2,
-            icon,
-            onSelect: entry.onSelect
-          },
-          key
-        );
-      }),
-      children,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpMenuFooter, {})
-    ] })
-  ] });
+            }
+            if (Array.isArray(entry)) {
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Sub, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.SubTrigger, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Prefix, { children: icon }),
+                  label2
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.SubContent, { children: entry.map((entryChild) => {
+                  if ("href" in entryChild) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      HelpMenuLink,
+                      {
+                        label: entryChild.label,
+                        onSelect: entryChild.onSelect,
+                        href: entryChild.href,
+                        target: entryChild.target
+                      },
+                      entryChild.label
+                    );
+                  }
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    HelpMenuButton,
+                    {
+                      label: entryChild.label,
+                      onSelect: entryChild.onSelect
+                    },
+                    entryChild.label
+                  );
+                }) })
+              ] }, key);
+            }
+            if ("href" in entry) {
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                HelpMenuLink,
+                {
+                  label: label2,
+                  icon,
+                  onSelect: entry.onSelect,
+                  href: entry.href,
+                  target: entry.target
+                },
+                key
+              );
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              HelpMenuButton,
+              {
+                label: label2,
+                icon,
+                onSelect: entry.onSelect
+              },
+              key
+            );
+          }),
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpMenuFooter, {})
+        ] })
+      ]
+    }
+  );
 };
 const HelpMenuDefaults = (props) => {
   switch (props.entryKey) {

package/layouts/hooks/useLayoutStyles.d.ts

@@ -1,4 +1,4 @@
-import type { SurfaceProps } from '../surface/Surface.js';
+import type { SurfaceProps } from '../surface/surface-types.js';
 import type { LayoutStyles, DefaultStyles } from '../types/layout.types.js';
 /**
  * Generates layout styles including padding, margin, and size properties.

package/layouts/index.d.ts

@@ -6,7 +6,7 @@ export { Container, useContainerColoring as _useContainerColoring, type Containe
 export type { ContainerOwnProps, ContainerProps, } from './container/Container.js';
 export type { LayoutSizeCSS } from './types/layout.types.js';
 export { Surface } from './surface/Surface.js';
-export type { SurfaceOwnProps, SurfaceProps } from './surface/Surface.js';
+export type { SurfaceOwnProps, SurfaceProps } from './surface/surface-types.js';
 export { surfaceBorderRadius as _surfaceBorderRadius } from './surface/variables.sty.js';
 export { useBreakpoint } from './hooks/useBreakpoint.js';
 export { AppHeader } from './app-header/AppHeader.js';
@@ -48,3 +48,5 @@ export { TitleBar } from './title-bar/TitleBar.js';
 export type { TitleBarProps } from './title-bar/TitleBar.js';
 export { InputGroup, type InputGroupProps } from './input-group/InputGroup.js';
 export { inputGroupClassName } from './input-group/InputGroup.sty.js';
+export { SplitLayout as _SplitLayout, type ContentProps as _SplitLayoutContentProps, type PanelProps as _SplitLayoutPanelProps, type ResizeHandleProps as _SplitLayoutResizeHandleProps, type RootProps as _SplitLayoutRootProps, } from './split-layout/SplitLayout.js';
+export type { PanelWidth } from './split-layout/width-utils.js';

package/layouts/index.js

@@ -31,6 +31,7 @@ __export(layouts_exports, {
   Surface: () => import_Surface.Surface,
   TitleBar: () => import_TitleBar.TitleBar,
   _ActionGroup: () => import_ActionGroup.ActionGroup,
+  _SplitLayout: () => import_SplitLayout.SplitLayout,
   _surfaceBorderRadius: () => import_variables_css.surfaceBorderRadius,
   _useContainerColoring: () => import_Container.useContainerColoring,
   inputGroupClassName: () => import_InputGroup_css.inputGroupClassName,
@@ -56,3 +57,4 @@ var import_page_types = require("./page/page-types.js");
 var import_TitleBar = require("./title-bar/TitleBar.js");
 var import_InputGroup = require("./input-group/InputGroup.js");
 var import_InputGroup_css = require("./input-group/InputGroup.sty.js");
+var import_SplitLayout = require("./split-layout/SplitLayout.js");

package/layouts/input-group/InputGroup.css

@@ -1,46 +1,46 @@
-._1x4bl8z0-3-0-1 > .strato-inputgroup:not(:last-child),
- ._1x4bl8z0-3-0-1 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z0-3-1-1 > .strato-inputgroup:not(:last-child),
+ ._1x4bl8z0-3-1-1 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1x4bl8z0-3-0-1 > .strato-inputgroup:not(:first-child),
- ._1x4bl8z0-3-0-1 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z0-3-1-1 > .strato-inputgroup:not(:first-child),
+ ._1x4bl8z0-3-1-1 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._1x4bl8z0-3-0-1 > ._mvcxum0-3-0-1 {
+._1x4bl8z0-3-1-1 > ._mvcxum0-3-1-1 {
   display: grid;
   align-items: center;
   grid-template-rows: subgrid;
 }
-._1x4bl8z0-3-0-1:has(> ._mvcxum0-3-0-1 > label):has(> ._mvcxum0-3-0-1 > ._1l9bja60-3-0-1:last-child:not(:empty)) > ._mvcxum0-3-0-1 {
+._1x4bl8z0-3-1-1:has(> ._mvcxum0-3-1-1 > label):has(> ._mvcxum0-3-1-1 > ._1l9bja60-3-1-1:last-child:not(:empty)) > ._mvcxum0-3-1-1 {
   grid-row: 1 / span 3;
 }
-._1x4bl8z0-3-0-1:has(> ._mvcxum0-3-0-1 > label):not(:has(> ._mvcxum0-3-0-1 > ._1l9bja60-3-0-1:last-child:not(:empty))) > ._mvcxum0-3-0-1 {
+._1x4bl8z0-3-1-1:has(> ._mvcxum0-3-1-1 > label):not(:has(> ._mvcxum0-3-1-1 > ._1l9bja60-3-1-1:last-child:not(:empty))) > ._mvcxum0-3-1-1 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-0-1:not(:has(> ._mvcxum0-3-0-1 > label)):has(> ._mvcxum0-3-0-1 > ._1l9bja60-3-0-1:last-child:not(:empty)) > ._mvcxum0-3-0-1 {
+._1x4bl8z0-3-1-1:not(:has(> ._mvcxum0-3-1-1 > label)):has(> ._mvcxum0-3-1-1 > ._1l9bja60-3-1-1:last-child:not(:empty)) > ._mvcxum0-3-1-1 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-0-1 > ._mvcxum0-3-0-1 > label {
+._1x4bl8z0-3-1-1 > ._mvcxum0-3-1-1 > label {
   grid-row: 1 / 2;
   align-self: end;
 }
-._1x4bl8z0-3-0-1 > ._mvcxum0-3-0-1:has(> :not(label, ._1l9bja60-3-0-1)) > label {
+._1x4bl8z0-3-1-1 > ._mvcxum0-3-1-1:has(> :not(label, ._1l9bja60-3-1-1)) > label {
   width: 0;
   min-width: 100%;
 }
-._1x4bl8z0-3-0-1 > :not(._mvcxum0-3-0-1) {
+._1x4bl8z0-3-1-1 > :not(._mvcxum0-3-1-1) {
   grid-row: 1 / 2;
 }
-._1x4bl8z0-3-0-1:has(> ._mvcxum0-3-0-1 > label) > :not(._mvcxum0-3-0-1), ._1x4bl8z0-3-0-1:has(> ._mvcxum0-3-0-1 > label) > ._mvcxum0-3-0-1 > :not(label, ._1l9bja60-3-0-1) {
+._1x4bl8z0-3-1-1:has(> ._mvcxum0-3-1-1 > label) > :not(._mvcxum0-3-1-1), ._1x4bl8z0-3-1-1:has(> ._mvcxum0-3-1-1 > label) > ._mvcxum0-3-1-1 > :not(label, ._1l9bja60-3-1-1) {
   grid-row: 2 / 3;
 }
-._1x4bl8z0-3-0-1:has(> ._mvcxum0-3-0-1 > label) > ._mvcxum0-3-0-1 > ._1l9bja60-3-0-1 {
+._1x4bl8z0-3-1-1:has(> ._mvcxum0-3-1-1 > label) > ._mvcxum0-3-1-1 > ._1l9bja60-3-1-1 {
   grid-row: 3 / 4;
   align-self: start;
 }
-._1x4bl8z0-3-0-1 > ._mvcxum0-3-0-1:has(> :not(label, ._1l9bja60-3-0-1)) > ._1l9bja60-3-0-1 ._16z6rg14-3-0-1 {
+._1x4bl8z0-3-1-1 > ._mvcxum0-3-1-1:has(> :not(label, ._1l9bja60-3-1-1)) > ._1l9bja60-3-1-1 ._16z6rg14-3-1-1 {
   width: 0;
   flex: 1 1 auto;
 }

package/layouts/input-group/InputGroup.js

@@ -45,6 +45,8 @@ const InputGroup = /* @__PURE__ */ (0, import_react.forwardRef)((inputGroupProps
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
+    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.
+    "data-dt-component": dataDtComponent = COMPONENT_NAME,
     ...remainingProps
   } = inputGroupProps;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -61,8 +63,8 @@ const InputGroup = /* @__PURE__ */ (0, import_react.forwardRef)((inputGroupProps
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      "data-dt-component": COMPONENT_NAME,
       ...remainingProps,
+      "data-dt-component": dataDtComponent,
       children
     }
   );

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

@@ -26,5 +26,5 @@ var import_FormField_css_ts_vanilla = require("../../forms/forms-core/components
 var import_FormFieldMessageItem_css_ts_vanilla = require("../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css");
 var import_FormFieldMessages_css_ts_vanilla = require("../../forms/forms-core/components/form-field-messages/FormFieldMessages.css");
 var import_InputGroup_css_ts_vanilla = require("./InputGroup.css");
-var inputGroup = "_1x4bl8z0-3-0-1";
+var inputGroup = "_1x4bl8z0-3-1-1";
 var inputGroupClassName = "strato-inputgroup";

package/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/layouts/page/DetailView.sty.js

@@ -23,5 +23,5 @@ __export(DetailView_css_exports, {
 });
 module.exports = __toCommonJS(DetailView_css_exports);
 var import_DetailView_css_ts_vanilla = require("./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";

package/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/layouts/page/Header.sty.js

@@ -22,4 +22,4 @@ __export(Header_css_exports, {
 });
 module.exports = __toCommonJS(Header_css_exports);
 var import_Header_css_ts_vanilla = require("./Header.css");
-var header = "_150dima0-3-0-1";
+var header = "_150dima0-3-1-1";

package/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/layouts/page/Main.js

@@ -52,12 +52,20 @@ const Main = (0, import_react.forwardRef)(
       ref: mainRef,
       minWidth
     });
+    const { panels } = (0, import_page_context.usePageContext)();
+    const hasSidebar = !!panels.sidebar;
+    const hasDetails = !!panels.details && !panels.details.isDismissed;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "main",
       {
         ...remainingProps,
         ref: mergedRefs,
-        className: (0, import_clsx.default)(styles.main, className),
+        className: (0, import_clsx.default)(
+          styles.main,
+          hasSidebar && styles.withSidebar,
+          hasDetails && styles.withDetails,
+          className
+        ),
         style: { ...style, minWidth },
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content, children })
       }

package/layouts/page/Main.sty.d.ts

@@ -1,2 +1,4 @@
 export declare const main: string;
 export declare const content: string;
+export declare const withSidebar: string;
+export declare const withDetails: string;

package/layouts/page/Main.sty.js

@@ -19,9 +19,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var Main_css_exports = {};
 __export(Main_css_exports, {
   content: () => content,
-  main: () => main
+  main: () => main,
+  withDetails: () => withDetails,
+  withSidebar: () => withSidebar
 });
 module.exports = __toCommonJS(Main_css_exports);
 var import_Main_css_ts_vanilla = require("./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";

package/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/layouts/page/Page.js

@@ -44,6 +44,7 @@ var import_PanelControlButton = require("./PanelControlButton.js");
 var import_Sidebar = require("./Sidebar.js");
 var import_useContainerSize = require("../../core/hooks/useContainerSize.js");
 var import_useSlots = require("../../core/hooks/useSlots.js");
+const COMPONENT_NAME = "Page";
 function handleRegisterAction(state, payload) {
   const { panel, ref, isControlled, isDismissed, minWidth, breakpoint } = payload;
   if (state[panel]) {
@@ -274,6 +275,7 @@ const PageRoot = (props) => {
       ref: containerRef,
       className: (0, import_clsx.default)(styles.page, className),
       style: { ...style, ...gridTemplateStyles },
+      "data-dt-component": COMPONENT_NAME,
       children: [
         slots.header,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_page_context.pageContext.Provider, { value: ctx, children: otherChildren })

package/layouts/page/Page.sty.js

@@ -21,10 +21,5 @@ __export(Page_css_exports, {
   page: () => page
 });
 module.exports = __toCommonJS(Page_css_exports);
-var import_DetailView_css_ts_vanilla = require("./DetailView.css");
-var import_Main_css_ts_vanilla = require("./Main.css");
-var import_panel_css_ts_vanilla = require("./panel.css");
-var import_focusRingStatic_css_ts_vanilla = require("../../core/styles/focusRingStatic.css");
-var import_Sidebar_css_ts_vanilla = require("./Sidebar.css");
 var import_Page_css_ts_vanilla = require("./Page.css");
-var page = "_1j29czt0-3-0-1";
+var page = "_1j29czt0-3-1-1";

package/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/layouts/page/Sidebar.sty.js

@@ -31,11 +31,11 @@ module.exports = __toCommonJS(Sidebar_css_exports);
 var import_panel_css_ts_vanilla = require("./panel.css");
 var import_focusRingStatic_css_ts_vanilla = require("../../core/styles/focusRingStatic.css");
 var import_Sidebar_css_ts_vanilla = require("./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";