@dynatrace/strato-components 3.1.3 → 3.2.0

package/esm/layouts/app-header/action-group/NavItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/NavItem.css.ts"],
-  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-1-3';\nexport var isDisabled = '_bf74pw1-3-1-3';\nexport var isSelected = '_bf74pw0-3-1-3';"],
+  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-2-0';\nexport var isDisabled = '_bf74pw1-3-2-0';\nexport var isSelected = '_bf74pw0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,aAAa;AACjB,IAAI,aAAa;",
   "names": []
 }

package/esm/layouts/app-header/app-icon/AppIcon.css

@@ -1,4 +1,4 @@
-@keyframes _1dtfpz50-3-1-3 {
+@keyframes _1dtfpz50-3-2-0 {
   0% {
     opacity: 0;
   }
@@ -6,11 +6,11 @@
     opacity: 1;
   }
 }
-._1dtfpz51-3-1-3 {
+._1dtfpz51-3-2-0 {
   object-fit: contain;
 }
-._1dtfpz52-3-1-3 {
-  animation-name: _1dtfpz50-3-1-3;
+._1dtfpz52-3-2-0 {
+  animation-name: _1dtfpz50-3-2-0;
   animation-duration: var(--dt-animations-fade-in-duration-slow, 350ms);
   animation-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
 }

package/esm/layouts/app-header/app-icon/AppIcon.js

@@ -59,7 +59,8 @@ const AppIconRoot = (props) => {
       className: clsx(styles.icon({ fadeIn }), consumerClassName),
       style: consumerStyle,
       ...remainingProps,
-      "data-dt-component": COMPONENT_NAME
+      "data-dt-component": COMPONENT_NAME,
+      "data-dt-name": COMPONENT_NAME
     }
   );
 };
@@ -67,7 +68,7 @@ const appIconQueryClient = new QueryClient();
 const AppIcon = (props) => {
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: appIconQueryClient, children: /* @__PURE__ */ jsx(AppIconRoot, { ...props }) });
 };
-AppIcon.displayName = "AppIcon";
+AppIcon.displayName = COMPONENT_NAME;
 export {
   AppIcon
 };

package/esm/layouts/app-header/app-icon/AppIcon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/app-icon/AppIcon.tsx"],
-  "sourcesContent": ["import {\n  QueryClient,\n  QueryClientProvider,\n  useQuery,\n} from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { getAppId, getAppVersion } from '@dynatrace-sdk/app-environment';\n\nimport * as styles from './AppIcon.sty.js';\nimport { FallbackIcon } from './FallbackIcon.js';\nimport { fetchIcon } from './icon-utils.js';\nimport { Skeleton } from '../../../content/skeleton/Skeleton.js';\nimport { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { isProduction } from '../../../core/utils/is-node-environment.js';\n\nconst COMPONENT_NAME = 'AppIcon';\n\n// #region Typings\n/**\n * Accepted properties for the AppIcon.\n * @public\n */\nexport interface AppIconProps\n  extends AriaLabelingProps,\n    WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * The path to the app icon. If not specified, the icon from the app registry is retrieved automatically.\n   */\n  src?: string;\n  /**\n   * The alternative text representation for the image when it's not loaded. If not specified, the app name is used.\n   */\n  alt?: string;\n}\n// #endregion\n\nconst AppIconRoot = (props: AppIconProps) => {\n  const [fadeIn, setFadeIn] = useState(false);\n\n  const sdkAppId = useMemo(getAppId, []);\n  const sdkAppVersion = useMemo(getAppVersion, []);\n  const {\n    src = `/platform/app-engine/registry/v1/app-icons/${sdkAppId}?appVersion=${encodeURIComponent(\n      sdkAppVersion,\n    )}`,\n    alt,\n    children,\n    className: consumerClassName,\n    style: consumerStyle = {},\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: AppIconProps = props;\n  const {\n    data: iconSrc,\n    isLoading,\n    isError,\n  } = useQuery({\n    queryKey: ['app-icon', src],\n    queryFn: () => fetchIcon(src),\n    retry: isProduction() ? undefined : false,\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setFadeIn(isLoading);\n    }\n  }, [isLoading]);\n\n  if (isLoading) {\n    return <Skeleton width={20} height={20} />;\n  }\n\n  if (isError) {\n    return <FallbackIcon size={20} />;\n  }\n\n  return (\n    <img\n      src={iconSrc}\n      data-testid={dataTestId}\n      width={20}\n      height={20}\n      alt={alt}\n      className={clsx(styles.icon({ fadeIn }), consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    />\n  );\n};\n\nconst appIconQueryClient = new QueryClient();\n\n/**\n * The `AppIcon` component renders the icon used for the app on the platform.\n * You can also provide a link to an icon to render that icon instead.\n * @public\n */\nexport const AppIcon = (props: AppIconProps) => {\n  return (\n    <QueryClientProvider client={appIconQueryClient}>\n      <AppIconRoot {...props} />\n    </QueryClientProvider>\n  );\n};\n\nAppIcon.displayName = 'AppIcon';\n"],
-  "mappings": "AA4EW;AA5EX;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,UAAU;AACjB,SAAS,WAAW,SAAS,gBAAgB;AAE7C,SAAS,UAAU,qBAAqB;AAExC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAKzB,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB;AAuBvB,MAAM,cAAc,CAAC,UAAwB;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,WAAW,QAAQ,UAAU,CAAC,CAAC;AACrC,QAAM,gBAAgB,QAAQ,eAAe,CAAC,CAAC;AAC/C,QAAM;AAAA,IACJ,MAAM,8CAA8C,QAAQ,eAAe;AAAA,MACzE;AAAA,IACF,CAAC;AAAA,IACD;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO,gBAAgB,CAAC;AAAA,IACxB,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAkB;AAClB,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IAAI,SAAS;AAAA,IACX,UAAU,CAAC,YAAY,GAAG;AAAA,IAC1B,SAAS,MAAM,UAAU,GAAG;AAAA,IAC5B,OAAO,aAAa,IAAI,SAAY;AAAA,EACtC,CAAC;AAED,YAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,SAAS;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,MAAI,WAAW;AACb,WAAO,oBAAC,YAAS,OAAO,IAAI,QAAQ,IAAI;AAAA,EAC1C;AAEA,MAAI,SAAS;AACX,WAAO,oBAAC,gBAAa,MAAM,IAAI;AAAA,EACjC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa;AAAA,MACb,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA,WAAW,KAAK,OAAO,KAAK,EAAE,OAAO,CAAC,GAAG,iBAAiB;AAAA,MAC1D,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,qBAAmB;AAAA;AAAA,EACrB;AAEJ;AAEA,MAAM,qBAAqB,IAAI,YAAY;AAOpC,MAAM,UAAU,CAAC,UAAwB;AAC9C,SACE,oBAAC,uBAAoB,QAAQ,oBAC3B,8BAAC,eAAa,GAAG,OAAO,GAC1B;AAEJ;AAEA,QAAQ,cAAc;",
+  "sourcesContent": ["import {\n  QueryClient,\n  QueryClientProvider,\n  useQuery,\n} from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { getAppId, getAppVersion } from '@dynatrace-sdk/app-environment';\n\nimport * as styles from './AppIcon.sty.js';\nimport { FallbackIcon } from './FallbackIcon.js';\nimport { fetchIcon } from './icon-utils.js';\nimport { Skeleton } from '../../../content/skeleton/Skeleton.js';\nimport { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { isProduction } from '../../../core/utils/is-node-environment.js';\n\nconst COMPONENT_NAME = 'AppIcon';\n\n// #region Typings\n/**\n * Accepted properties for the AppIcon.\n * @public\n */\nexport interface AppIconProps\n  extends AriaLabelingProps,\n    WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * The path to the app icon. If not specified, the icon from the app registry is retrieved automatically.\n   */\n  src?: string;\n  /**\n   * The alternative text representation for the image when it's not loaded. If not specified, the app name is used.\n   */\n  alt?: string;\n}\n// #endregion\n\nconst AppIconRoot = (props: AppIconProps) => {\n  const [fadeIn, setFadeIn] = useState(false);\n\n  const sdkAppId = useMemo(getAppId, []);\n  const sdkAppVersion = useMemo(getAppVersion, []);\n  const {\n    src = `/platform/app-engine/registry/v1/app-icons/${sdkAppId}?appVersion=${encodeURIComponent(\n      sdkAppVersion,\n    )}`,\n    alt,\n    children,\n    className: consumerClassName,\n    style: consumerStyle = {},\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: AppIconProps = props;\n  const {\n    data: iconSrc,\n    isLoading,\n    isError,\n  } = useQuery({\n    queryKey: ['app-icon', src],\n    queryFn: () => fetchIcon(src),\n    retry: isProduction() ? undefined : false,\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setFadeIn(isLoading);\n    }\n  }, [isLoading]);\n\n  if (isLoading) {\n    return <Skeleton width={20} height={20} />;\n  }\n\n  if (isError) {\n    return <FallbackIcon size={20} />;\n  }\n\n  return (\n    <img\n      src={iconSrc}\n      data-testid={dataTestId}\n      width={20}\n      height={20}\n      alt={alt}\n      className={clsx(styles.icon({ fadeIn }), consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n      data-dt-name={COMPONENT_NAME}\n    />\n  );\n};\n\nconst appIconQueryClient = new QueryClient();\n\n/**\n * The `AppIcon` component renders the icon used for the app on the platform.\n * You can also provide a link to an icon to render that icon instead.\n * @public\n */\nexport const AppIcon = (props: AppIconProps) => {\n  return (\n    <QueryClientProvider client={appIconQueryClient}>\n      <AppIconRoot {...props} />\n    </QueryClientProvider>\n  );\n};\n\nAppIcon.displayName = COMPONENT_NAME;\n"],
+  "mappings": "AA4EW;AA5EX;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,UAAU;AACjB,SAAS,WAAW,SAAS,gBAAgB;AAE7C,SAAS,UAAU,qBAAqB;AAExC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAKzB,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB;AAuBvB,MAAM,cAAc,CAAC,UAAwB;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,WAAW,QAAQ,UAAU,CAAC,CAAC;AACrC,QAAM,gBAAgB,QAAQ,eAAe,CAAC,CAAC;AAC/C,QAAM;AAAA,IACJ,MAAM,8CAA8C,QAAQ,eAAe;AAAA,MACzE;AAAA,IACF,CAAC;AAAA,IACD;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO,gBAAgB,CAAC;AAAA,IACxB,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAkB;AAClB,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IAAI,SAAS;AAAA,IACX,UAAU,CAAC,YAAY,GAAG;AAAA,IAC1B,SAAS,MAAM,UAAU,GAAG;AAAA,IAC5B,OAAO,aAAa,IAAI,SAAY;AAAA,EACtC,CAAC;AAED,YAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,SAAS;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,MAAI,WAAW;AACb,WAAO,oBAAC,YAAS,OAAO,IAAI,QAAQ,IAAI;AAAA,EAC1C;AAEA,MAAI,SAAS;AACX,WAAO,oBAAC,gBAAa,MAAM,IAAI;AAAA,EACjC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa;AAAA,MACb,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA,WAAW,KAAK,OAAO,KAAK,EAAE,OAAO,CAAC,GAAG,iBAAiB;AAAA,MAC1D,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,qBAAmB;AAAA,MACnB,gBAAc;AAAA;AAAA,EAChB;AAEJ;AAEA,MAAM,qBAAqB,IAAI,YAAY;AAOpC,MAAM,UAAU,CAAC,UAAwB;AAC9C,SACE,oBAAC,uBAAoB,QAAQ,oBAC3B,8BAAC,eAAa,GAAG,OAAO,GAC1B;AAEJ;AAEA,QAAQ,cAAc;",
   "names": []
 }

package/esm/layouts/app-header/app-icon/AppIcon.sty.js

@@ -1,6 +1,6 @@
 import "./AppIcon.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var icon = _7a468({ defaultClassName: "_1dtfpz51-3-1-3", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
+var icon = _7a468({ defaultClassName: "_1dtfpz51-3-2-0", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   icon
 };

package/esm/layouts/app-header/app-icon/AppIcon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/app-icon/AppIcon.css.ts"],
-  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-1-3',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-1-3'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-2-0',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-2-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/container/Container.css

@@ -1,8 +1,8 @@
-._f32lcd0-3-1-3 {
+._f32lcd0-3-2-0 {
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-radius: var(--dt-borders-radius-container-default, 9px);
-  color: var(--_6levse0-3-1-3);
-  border-color: var(--_6levse2-3-1-3);
-  background-color: var(--_6levse1-3-1-3);
+  color: var(--_6levse0-3-2-0);
+  border-color: var(--_6levse2-3-2-0);
+  background-color: var(--_6levse1-3-2-0);
 }

package/esm/layouts/container/Container.sty.js

@@ -1,6 +1,6 @@
 import "../../styles/container.css";
 import "./Container.css";
-var containerCSS = "_f32lcd0-3-1-3";
+var containerCSS = "_f32lcd0-3-2-0";
 export {
   containerCSS
 };

package/esm/layouts/container/Container.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/container/Container.css.ts"],
-  "sourcesContent": ["import '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-1-3';"],
+  "sourcesContent": ["import '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/divider/Divider.css

@@ -1,21 +1,21 @@
-._1thxv8m0-3-1-3 {
+._1thxv8m0-3-2-0 {
   border: none;
   margin: 0;
   overflow-wrap: break-word;
-  background-color: var(--_k096v42-3-1-3);
+  background-color: var(--_k096v42-3-2-0);
 }
-._1thxv8m1-3-1-3 {
+._1thxv8m1-3-2-0 {
   width: 100%;
   height: var(--dt-borders-width-default, 1px);
 }
-._1thxv8m2-3-1-3 {
+._1thxv8m2-3-2-0 {
   width: var(--dt-borders-width-default, 1px);
   height: 100%;
 }
-._1thxv8m5-3-1-3 {
+._1thxv8m5-3-2-0 {
   flex-shrink: 0;
 }
-._1thxv8m6-3-1-3 {
+._1thxv8m6-3-2-0 {
   flex-shrink: 0;
   width: var(--dt-borders-width-default, 1px);
   height: auto;

package/esm/layouts/divider/Divider.sty.js

@@ -1,7 +1,7 @@
 import "../../core/utils/colorUtils.css";
 import "./Divider.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-1-3", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-1-3", vertical: "_1thxv8m2-3-1-3" }, flexItem: { true: "_1thxv8m3-3-1-3", false: "_1thxv8m4-3-1-3" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-1-3"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-1-3"]] });
+var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-2-0", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-2-0", vertical: "_1thxv8m2-3-2-0" }, flexItem: { true: "_1thxv8m3-3-2-0", false: "_1thxv8m4-3-2-0" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-2-0"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-2-0"]] });
 export {
   dividerCSS
 };

package/esm/layouts/divider/Divider.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/divider/Divider.css.ts"],
-  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'_1thxv8m0-3-1-3',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-1-3',vertical:'_1thxv8m2-3-1-3'},flexItem:{true:'_1thxv8m3-3-1-3',false:'_1thxv8m4-3-1-3'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-1-3'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-1-3']]});"],
+  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'_1thxv8m0-3-2-0',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-2-0',vertical:'_1thxv8m2-3-2-0'},flexItem:{true:'_1thxv8m3-3-2-0',false:'_1thxv8m4-3-2-0'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-2-0'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-2-0']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,aAAY,cAAa,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,aAAY,YAAW,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/help-menu/HelpMenu.js

@@ -131,7 +131,14 @@ const HelpMenuButton = ({
   ] });
 };
 const HelpMenu = (props) => {
-  const { entries, children } = props;
+  const {
+    entries,
+    onOpenChange,
+    children,
+    "data-testid": dataTestId,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow
+  } = props;
   const [isOpen, setIsOpen] = useState(false);
   const intl = useIntl();
   const label = intl.formatMessage({
@@ -140,7 +147,7 @@ const HelpMenu = (props) => {
   });
   const handleOpenChange = (value) => {
     setIsOpen(value);
-    props.onOpenChange?.(value);
+    onOpenChange?.(value);
   };
   return /* @__PURE__ */ jsxs(
     Menu,
@@ -148,8 +155,18 @@ const HelpMenu = (props) => {
       open: isOpen,
       onOpenChange: handleOpenChange,
       "data-dt-component": COMPONENT_NAME,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
       children: [
-        /* @__PURE__ */ jsx(Tooltip, { text: label, children: /* @__PURE__ */ jsx(Menu.Trigger, { "data-dt-component": COMPONENT_NAME, children: /* @__PURE__ */ jsx(Button, { "aria-label": label, children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(HelpIcon, {}) }) }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { text: label, children: /* @__PURE__ */ jsx(
+          Menu.Trigger,
+          {
+            "data-dt-component": COMPONENT_NAME,
+            "data-dt-name": "OpenMenu",
+            children: /* @__PURE__ */ jsx(Button, { "aria-label": label, children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(HelpIcon, {}) }) })
+          }
+        ) }),
         /* @__PURE__ */ jsxs(Menu.Content, { children: [
           MENU_ITEMS.map(({ label: label2, key, icon }) => {
             const entry = entries[key];

package/esm/layouts/help-menu/HelpMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/help-menu/HelpMenu.tsx"],
-  "sourcesContent": ["import { type ReactNode, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport {\n  DescriptionIcon,\n  ExternalLinkIcon,\n  FeedbackIcon,\n  GuideIcon,\n  HelpIcon,\n  InformationIcon,\n  KeyboardIcon,\n  PlayIcon,\n  WhatsNewIcon,\n} from '@dynatrace/strato-icons';\nimport { getAppId, getAppVersion } from '@dynatrace-sdk/app-environment';\nimport { sendIntent } from '@dynatrace-sdk/navigation';\n\nimport { Button } from '../../buttons/button/Button.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport { Flex } from '../flex/Flex.js';\n\nconst COMPONENT_NAME = 'HelpMenu';\n\ntype MenuItem = {\n  label: ReactNode;\n  icon: ReactNode;\n  key: keyof HelpMenuProps['entries'];\n};\n\nconst MENU_ITEMS: MenuItem[] = [\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"What's new\" id=\"TY3F/kE6n91t0TL0\" />\n    ),\n    icon: <WhatsNewIcon />,\n    key: 'whatsNew',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"Get started\" id=\"kOQNUENAg02eeaTY\" />\n    ),\n    icon: <GuideIcon />,\n    key: 'getStarted',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"Documentation\" id=\"npzzIhowJGIZhj8d\" />\n    ),\n    icon: <DescriptionIcon />,\n    key: 'documentation',\n  },\n  {\n    label: (\n      <FormattedMessage\n        defaultMessage=\"Keyboard shortcuts\"\n        id=\"JmaVR5qUnuxE3qnb\"\n      />\n    ),\n    icon: <KeyboardIcon />,\n    key: 'keyboardShortcuts',\n  },\n  {\n    label: (\n      <FormattedMessage\n        defaultMessage=\"Try in Playground\"\n        id=\"Nar807M4NJhqMw/T\"\n      />\n    ),\n    icon: <PlayIcon />,\n    key: 'playground',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"Share feedback\" id=\"Ia87HCOLBoxMcV9t\" />\n    ),\n    icon: <FeedbackIcon />,\n    key: 'feedback',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"About this app\" id=\"9/nhbjHpPPAhMbHo\" />\n    ),\n    icon: <InformationIcon />,\n    key: 'about',\n  },\n] as const;\n\nconst HelpMenuFooter = () => {\n  const version = getAppVersion();\n  if (!version) {\n    return null;\n  }\n  return (\n    <Menu.Label>\n      <div\n        style={{\n          maxWidth: 500,\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: 'nowrap',\n        }}\n      >\n        <FormattedMessage\n          defaultMessage=\"Version {version}\"\n          description=\"App version label\"\n          id=\"W2KEm8AIcM8pOixf\"\n          values={{ version }}\n        />\n      </div>\n    </Menu.Label>\n  );\n};\n\nconst HelpMenuLink = ({\n  href,\n  target = '_blank',\n  onSelect,\n  label,\n  icon,\n  ...rest\n}: {\n  href: string;\n  target?: string;\n  onSelect?: () => void;\n  label: ReactNode;\n  icon?: ReactNode;\n}) => {\n  return (\n    <Menu.Link\n      {...rest}\n      onClick={() => onSelect?.()}\n      href={href}\n      target={target}\n    >\n      {icon ? <Menu.Prefix>{icon}</Menu.Prefix> : null}\n      <Flex justifyContent=\"space-between\" width=\"inherit\">\n        {label}\n        <ExternalLinkIcon style={{ flexShrink: 0 }} />\n      </Flex>\n    </Menu.Link>\n  );\n};\n\nconst HelpMenuButton = ({\n  onSelect,\n  label,\n  icon,\n  ...rest\n}: {\n  onSelect: () => void;\n  label: ReactNode;\n  icon?: ReactNode;\n}) => {\n  return (\n    <Menu.Item onSelect={onSelect} {...rest}>\n      {icon ? <Menu.Prefix>{icon}</Menu.Prefix> : null}\n      {label}\n    </Menu.Item>\n  );\n};\n\n/** @public */\nexport type HelpMenuButtonEntry = {\n  onSelect: () => void;\n};\n\n/** @public */\nexport type HelpMenuLinkEntry = {\n  href: string;\n  /** Specify how to open the linked content. */\n  target?: string;\n  onSelect?: () => void;\n};\n\n/**\n * Use the default behavior via app configuration / SDKs\n * @public\n **/\nexport type HelpMenuDefault = 'default';\n\n/** @public */\nexport interface HelpMenuCustomLinkEntry extends HelpMenuLinkEntry {\n  label: string;\n}\n/** @public */\nexport interface HelpMenuCustomItemEntry extends HelpMenuButtonEntry {\n  label: string;\n}\n/** @public */\nexport type HelpMenuChildrenEntry = Array<\n  HelpMenuCustomLinkEntry | HelpMenuCustomItemEntry\n>;\n\n/** @public */\nexport interface HelpMenuProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  entries: {\n    whatsNew?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuDefault;\n    getStarted?:\n      | HelpMenuButtonEntry\n      | HelpMenuLinkEntry\n      | HelpMenuChildrenEntry;\n    documentation?:\n      | HelpMenuButtonEntry\n      | HelpMenuLinkEntry\n      | HelpMenuChildrenEntry;\n    keyboardShortcuts?:\n      | HelpMenuButtonEntry\n      | HelpMenuLinkEntry\n      | HelpMenuDefault;\n    playground?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuDefault;\n    feedback?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuChildrenEntry;\n    about?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuDefault;\n  };\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * A prebuilt menu as entrypoint for app specific help links and actions.\n * @public\n */\nexport const HelpMenu = (props: HelpMenuProps) => {\n  const { entries, children } = props;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const intl = useIntl();\n\n  const label = intl.formatMessage({\n    defaultMessage: 'Help',\n    id: 'xHrhU3DP4e0nge7c',\n  });\n\n  const handleOpenChange = (value: boolean) => {\n    setIsOpen(value);\n    props.onOpenChange?.(value);\n  };\n\n  return (\n    <Menu\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <Tooltip text={label}>\n        <Menu.Trigger data-dt-component={COMPONENT_NAME}>\n          <Button aria-label={label}>\n            <Button.Prefix>\n              <HelpIcon />\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n      </Tooltip>\n      <Menu.Content>\n        {MENU_ITEMS.map(({ label, key, icon }) => {\n          const entry = entries[key];\n          if (!entry) {\n            return null;\n          }\n\n          if (entry === 'default') {\n            return (\n              <HelpMenuDefaults\n                key={key}\n                entryKey={key}\n                icon={icon}\n                label={label}\n              />\n            );\n          }\n\n          if (Array.isArray(entry)) {\n            return (\n              <Menu.Sub key={key}>\n                <Menu.SubTrigger>\n                  <Menu.Prefix>{icon}</Menu.Prefix>\n                  {label}\n                </Menu.SubTrigger>\n                <Menu.SubContent>\n                  {entry.map((entryChild) => {\n                    if ('href' in entryChild) {\n                      return (\n                        <HelpMenuLink\n                          key={entryChild.label}\n                          label={entryChild.label}\n                          onSelect={entryChild.onSelect}\n                          href={entryChild.href}\n                          target={entryChild.target}\n                        />\n                      );\n                    }\n                    return (\n                      <HelpMenuButton\n                        key={entryChild.label}\n                        label={entryChild.label}\n                        onSelect={entryChild.onSelect}\n                      />\n                    );\n                  })}\n                </Menu.SubContent>\n              </Menu.Sub>\n            );\n          }\n\n          if ('href' in entry) {\n            return (\n              <HelpMenuLink\n                key={key}\n                label={label}\n                icon={icon}\n                onSelect={entry.onSelect}\n                href={entry.href}\n                target={entry.target}\n              />\n            );\n          }\n          return (\n            <HelpMenuButton\n              key={key}\n              label={label}\n              icon={icon}\n              onSelect={entry.onSelect}\n            />\n          );\n        })}\n        {children}\n        <HelpMenuFooter />\n      </Menu.Content>\n    </Menu>\n  );\n};\n\nconst HelpMenuDefaults = (props: {\n  label: ReactNode;\n  entryKey: keyof HelpMenuProps['entries'];\n  icon: ReactNode;\n}) => {\n  switch (props.entryKey) {\n    case 'whatsNew':\n      return (\n        <HelpMenuButton\n          onSelect={() =>\n            sendIntent(\n              {\n                appId: getAppId(),\n                version: getAppVersion(),\n              },\n              {\n                recommendedAppId: 'dynatrace.hub',\n                recommendedIntentId: 'view_app_releases_add_on_intent',\n              },\n            )\n          }\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    case 'keyboardShortcuts':\n      return (\n        <HelpMenuButton\n          onSelect={() => {\n            // This is a workaround to call the keyboard modal for now.\n            // In the future this should be called via an sdk.\n            // It is not yet clear yet in which sdk this will be available.\n            // If it is available this will be replaced.\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (globalThis as any).dtRuntime?.uiCommands?.showUiCommands?.();\n          }}\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    case 'playground':\n      return (\n        <HelpMenuLink\n          href={`https://wkf10640.apps.dynatrace.com/ui/apps/${getAppId()}`}\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    case 'about':\n      return (\n        <HelpMenuButton\n          onSelect={() => {\n            sendIntent(\n              { appId: getAppId() },\n              {\n                recommendedAppId: 'dynatrace.hub',\n                recommendedIntentId: 'view_app_details',\n              },\n            );\n          }}\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    default:\n      return null;\n  }\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type ReactNode, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport {\n  DescriptionIcon,\n  ExternalLinkIcon,\n  FeedbackIcon,\n  GuideIcon,\n  HelpIcon,\n  InformationIcon,\n  KeyboardIcon,\n  PlayIcon,\n  WhatsNewIcon,\n} from '@dynatrace/strato-icons';\nimport { getAppId, getAppVersion } from '@dynatrace-sdk/app-environment';\nimport { sendIntent } from '@dynatrace-sdk/navigation';\n\nimport { Button } from '../../buttons/button/Button.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport { Flex } from '../flex/Flex.js';\n\nconst COMPONENT_NAME = 'HelpMenu';\n\ntype MenuItem = {\n  label: ReactNode;\n  icon: ReactNode;\n  key: keyof HelpMenuProps['entries'];\n};\n\nconst MENU_ITEMS: MenuItem[] = [\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"What's new\" id=\"TY3F/kE6n91t0TL0\" />\n    ),\n    icon: <WhatsNewIcon />,\n    key: 'whatsNew',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"Get started\" id=\"kOQNUENAg02eeaTY\" />\n    ),\n    icon: <GuideIcon />,\n    key: 'getStarted',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"Documentation\" id=\"npzzIhowJGIZhj8d\" />\n    ),\n    icon: <DescriptionIcon />,\n    key: 'documentation',\n  },\n  {\n    label: (\n      <FormattedMessage\n        defaultMessage=\"Keyboard shortcuts\"\n        id=\"JmaVR5qUnuxE3qnb\"\n      />\n    ),\n    icon: <KeyboardIcon />,\n    key: 'keyboardShortcuts',\n  },\n  {\n    label: (\n      <FormattedMessage\n        defaultMessage=\"Try in Playground\"\n        id=\"Nar807M4NJhqMw/T\"\n      />\n    ),\n    icon: <PlayIcon />,\n    key: 'playground',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"Share feedback\" id=\"Ia87HCOLBoxMcV9t\" />\n    ),\n    icon: <FeedbackIcon />,\n    key: 'feedback',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"About this app\" id=\"9/nhbjHpPPAhMbHo\" />\n    ),\n    icon: <InformationIcon />,\n    key: 'about',\n  },\n] as const;\n\nconst HelpMenuFooter = () => {\n  const version = getAppVersion();\n  if (!version) {\n    return null;\n  }\n  return (\n    <Menu.Label>\n      <div\n        style={{\n          maxWidth: 500,\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: 'nowrap',\n        }}\n      >\n        <FormattedMessage\n          defaultMessage=\"Version {version}\"\n          description=\"App version label\"\n          id=\"W2KEm8AIcM8pOixf\"\n          values={{ version }}\n        />\n      </div>\n    </Menu.Label>\n  );\n};\n\nconst HelpMenuLink = ({\n  href,\n  target = '_blank',\n  onSelect,\n  label,\n  icon,\n  ...rest\n}: {\n  href: string;\n  target?: string;\n  onSelect?: () => void;\n  label: ReactNode;\n  icon?: ReactNode;\n}) => {\n  return (\n    <Menu.Link\n      {...rest}\n      onClick={() => onSelect?.()}\n      href={href}\n      target={target}\n    >\n      {icon ? <Menu.Prefix>{icon}</Menu.Prefix> : null}\n      <Flex justifyContent=\"space-between\" width=\"inherit\">\n        {label}\n        <ExternalLinkIcon style={{ flexShrink: 0 }} />\n      </Flex>\n    </Menu.Link>\n  );\n};\n\nconst HelpMenuButton = ({\n  onSelect,\n  label,\n  icon,\n  ...rest\n}: {\n  onSelect: () => void;\n  label: ReactNode;\n  icon?: ReactNode;\n}) => {\n  return (\n    <Menu.Item onSelect={onSelect} {...rest}>\n      {icon ? <Menu.Prefix>{icon}</Menu.Prefix> : null}\n      {label}\n    </Menu.Item>\n  );\n};\n\n/** @public */\nexport type HelpMenuButtonEntry = {\n  onSelect: () => void;\n};\n\n/** @public */\nexport type HelpMenuLinkEntry = {\n  href: string;\n  /** Specify how to open the linked content. */\n  target?: string;\n  onSelect?: () => void;\n};\n\n/**\n * Use the default behavior via app configuration / SDKs\n * @public\n **/\nexport type HelpMenuDefault = 'default';\n\n/** @public */\nexport interface HelpMenuCustomLinkEntry extends HelpMenuLinkEntry {\n  label: string;\n}\n/** @public */\nexport interface HelpMenuCustomItemEntry extends HelpMenuButtonEntry {\n  label: string;\n}\n/** @public */\nexport type HelpMenuChildrenEntry = Array<\n  HelpMenuCustomLinkEntry | HelpMenuCustomItemEntry\n>;\n\n/** @public */\nexport interface HelpMenuProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  entries: {\n    whatsNew?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuDefault;\n    getStarted?:\n      | HelpMenuButtonEntry\n      | HelpMenuLinkEntry\n      | HelpMenuChildrenEntry;\n    documentation?:\n      | HelpMenuButtonEntry\n      | HelpMenuLinkEntry\n      | HelpMenuChildrenEntry;\n    keyboardShortcuts?:\n      | HelpMenuButtonEntry\n      | HelpMenuLinkEntry\n      | HelpMenuDefault;\n    playground?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuDefault;\n    feedback?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuChildrenEntry;\n    about?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuDefault;\n  };\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * A prebuilt menu as entrypoint for app specific help links and actions.\n * @public\n */\nexport const HelpMenu = (props: HelpMenuProps) => {\n  const {\n    entries,\n    onOpenChange,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const intl = useIntl();\n\n  const label = intl.formatMessage({\n    defaultMessage: 'Help',\n    id: 'xHrhU3DP4e0nge7c',\n  });\n\n  const handleOpenChange = (value: boolean) => {\n    setIsOpen(value);\n    onOpenChange?.(value);\n  };\n\n  return (\n    <Menu\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      data-dt-component={COMPONENT_NAME}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n    >\n      <Tooltip text={label}>\n        <Menu.Trigger\n          data-dt-component={COMPONENT_NAME}\n          data-dt-name=\"OpenMenu\"\n        >\n          <Button aria-label={label}>\n            <Button.Prefix>\n              <HelpIcon />\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n      </Tooltip>\n      <Menu.Content>\n        {MENU_ITEMS.map(({ label, key, icon }) => {\n          const entry = entries[key];\n          if (!entry) {\n            return null;\n          }\n\n          if (entry === 'default') {\n            return (\n              <HelpMenuDefaults\n                key={key}\n                entryKey={key}\n                icon={icon}\n                label={label}\n              />\n            );\n          }\n\n          if (Array.isArray(entry)) {\n            return (\n              <Menu.Sub key={key}>\n                <Menu.SubTrigger>\n                  <Menu.Prefix>{icon}</Menu.Prefix>\n                  {label}\n                </Menu.SubTrigger>\n                <Menu.SubContent>\n                  {entry.map((entryChild) => {\n                    if ('href' in entryChild) {\n                      return (\n                        <HelpMenuLink\n                          key={entryChild.label}\n                          label={entryChild.label}\n                          onSelect={entryChild.onSelect}\n                          href={entryChild.href}\n                          target={entryChild.target}\n                        />\n                      );\n                    }\n                    return (\n                      <HelpMenuButton\n                        key={entryChild.label}\n                        label={entryChild.label}\n                        onSelect={entryChild.onSelect}\n                      />\n                    );\n                  })}\n                </Menu.SubContent>\n              </Menu.Sub>\n            );\n          }\n\n          if ('href' in entry) {\n            return (\n              <HelpMenuLink\n                key={key}\n                label={label}\n                icon={icon}\n                onSelect={entry.onSelect}\n                href={entry.href}\n                target={entry.target}\n              />\n            );\n          }\n          return (\n            <HelpMenuButton\n              key={key}\n              label={label}\n              icon={icon}\n              onSelect={entry.onSelect}\n            />\n          );\n        })}\n        {children}\n        <HelpMenuFooter />\n      </Menu.Content>\n    </Menu>\n  );\n};\n\nconst HelpMenuDefaults = (props: {\n  label: ReactNode;\n  entryKey: keyof HelpMenuProps['entries'];\n  icon: ReactNode;\n}) => {\n  switch (props.entryKey) {\n    case 'whatsNew':\n      return (\n        <HelpMenuButton\n          onSelect={() =>\n            sendIntent(\n              {\n                appId: getAppId(),\n                version: getAppVersion(),\n              },\n              {\n                recommendedAppId: 'dynatrace.hub',\n                recommendedIntentId: 'view_app_releases_add_on_intent',\n              },\n            )\n          }\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    case 'keyboardShortcuts':\n      return (\n        <HelpMenuButton\n          onSelect={() => {\n            // This is a workaround to call the keyboard modal for now.\n            // In the future this should be called via an sdk.\n            // It is not yet clear yet in which sdk this will be available.\n            // If it is available this will be replaced.\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (globalThis as any).dtRuntime?.uiCommands?.showUiCommands?.();\n          }}\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    case 'playground':\n      return (\n        <HelpMenuLink\n          href={`https://wkf10640.apps.dynatrace.com/ui/apps/${getAppId()}`}\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    case 'about':\n      return (\n        <HelpMenuButton\n          onSelect={() => {\n            sendIntent(\n              { appId: getAppId() },\n              {\n                recommendedAppId: 'dynatrace.hub',\n                recommendedIntentId: 'view_app_details',\n              },\n            );\n          }}\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    default:\n      return null;\n  }\n};\n"],
+  "mappings": "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",
   "names": ["label"]
 }

package/esm/layouts/index.js

@@ -21,6 +21,15 @@ import { inputGroupClassName } from "./input-group/InputGroup.sty.js";
 import {
   SplitLayout
 } from "./split-layout/SplitLayout.js";
+import {
+  SidebarLayout
+} from "./page-layout/sidebar-layout/SidebarLayout.js";
+import {
+  DetailsLayout
+} from "./page-layout/details-layout/DetailsLayout.js";
+import {
+  PageLayout
+} from "./page-layout/PageLayout.js";
 export {
   AppHeader,
   Logo2 as AppNavLink,
@@ -35,6 +44,9 @@ export {
   Surface,
   TitleBar,
   ActionGroup as _ActionGroup,
+  DetailsLayout as _DetailsLayout,
+  PageLayout as _PageLayout,
+  SidebarLayout as _SidebarLayout,
   SplitLayout as _SplitLayout,
   surfaceBorderRadius as _surfaceBorderRadius,
   useContainerColoring as _useContainerColoring,

package/esm/layouts/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/layouts/index.ts"],
-  "sourcesContent": ["export { Flex, type FlexOwnProps, type FlexProps } from './flex/Flex.js';\nexport { Grid, type GridOwnProps, type GridProps } from './grid/Grid.js';\nexport { Divider } from './divider/Divider.js';\nexport type { DividerProps } from './divider/Divider.js';\nexport {\n  Container,\n  useContainerColoring as _useContainerColoring,\n  type ContainerColoring as _ContainerColoring,\n} from './container/Container.js';\nexport type {\n  ContainerOwnProps,\n  ContainerProps,\n} from './container/Container.js';\nexport type { LayoutSizeCSS } from './types/layout.types.js';\nexport { Surface } from './surface/Surface.js';\nexport type { SurfaceOwnProps, SurfaceProps } from './surface/surface-types.js';\nexport { surfaceBorderRadius as _surfaceBorderRadius } from './surface/variables.sty.js';\nexport { useBreakpoint } from './hooks/useBreakpoint.js';\nexport { AppHeader } from './app-header/AppHeader.js';\nexport type { AppHeaderProps } from './app-header/AppHeader.js';\nexport type {\n  AppHeaderActionButtonOwnProps,\n  AppHeaderActionButtonProps,\n} from './app-header/ActionButton.js';\nexport type { AppHeaderActionItemsProps } from './app-header/ActionItems.js';\nexport type { ActionItemGroupProps } from './app-header/ActionItemGroup.js';\nexport { HelpMenu } from './help-menu/HelpMenu.js';\nexport type {\n  HelpMenuProps,\n  HelpMenuButtonEntry,\n  HelpMenuLinkEntry,\n  HelpMenuChildrenEntry,\n  HelpMenuCustomLinkEntry,\n  HelpMenuCustomItemEntry,\n  HelpMenuDefault,\n} from './help-menu/HelpMenu.js';\nexport type {\n  AppHeaderNavigationProps,\n  AppHeaderNavigationItemOwnProps,\n  AppHeaderNavigationItemProps,\n  // exported with alternate name for backwards compatibility\n  AppHeaderNavigationProps as AppHeaderNavItemsProps,\n} from './app-header/Navigation.js';\nexport type { AppIconProps } from './app-header/app-icon/AppIcon.js';\nexport { Logo, Logo as AppNavLink } from './app-header/Logo.js';\nexport type {\n  AppHeaderLogoProps,\n  AppHeaderLogoOwnProps,\n  // exported with alternate name for backwards compatibility\n  AppHeaderLogoProps as AppNavLinkProps,\n  AppHeaderLogoOwnProps as AppNavLinkOwnProps,\n  AppNavLinkInternalOwnProps, // exported for backwards compatibility\n} from './app-header/Logo.js';\nexport type {\n  ActionButtonOwnProps,\n  ActionButtonProps,\n} from './app-header/action-group/ActionButton.js';\nexport { ActionGroup as _ActionGroup } from './app-header/action-group/ActionGroup.js';\nexport type { ActionGroupProps as _ActionGroupProps } from './app-header/action-group/ActionGroup.js';\nexport type {\n  NavItemProps,\n  NavItemOwnProps,\n} from './app-header/action-group/NavItem.js';\nexport type { GroupProps } from './app-header/action-group/Group.js';\n\nexport type {\n  ControlledDetailViewProps,\n  DetailViewOwnProps,\n  DetailViewProps,\n  UncontrolledDetailViewProps,\n} from './page/DetailView.js';\nexport type { HeaderProps } from './page/Header.js';\nexport type { MainProps } from './page/Main.js';\nexport { Page } from './page/Page.js';\nexport type { PageProps } from './page/Page.js';\nexport { panelSizeUnits } from './page/panel-types.js';\nexport type {\n  PanelSize,\n  PanelSizeUnit,\n  Direction as _Direction,\n} from './page/panel-types.js';\nexport type { PanelControlButtonProps } from './page/PanelControlButton.js';\nexport type {\n  ControlledSidebarProps,\n  SidebarOwnProps,\n  SidebarProps,\n  UncontrolledSidebarProps,\n} from './page/Sidebar.js';\nexport { pagePanels } from './page/page-types.js';\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  DismissiblePagePanels,\n  PagePanelSizes,\n  PanelName,\n  /** @deprecated Use `PanelName` instead. */\n  PanelName as PagePanels,\n  ControlledPagePanelProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PagePanelProps,\n  UncontrolledPagePanelProps,\n} from './page/page-types.js';\n\nexport type { TitleBarActionProps } from './title-bar/Action.js';\nexport type { TitleBarNavigationProps } from './title-bar/Navigation.js';\nexport type { TitleBarPrefixProps } from './title-bar/Prefix.js';\nexport type { TitleBarSubtitleProps } from './title-bar/Subtitle.js';\nexport type { TitleBarSuffixProps } from './title-bar/Suffix.js';\nexport type { TitleBarTitleProps } from './title-bar/Title.js';\nexport { TitleBar } from './title-bar/TitleBar.js';\nexport type { TitleBarProps } from './title-bar/TitleBar.js';\n\nexport { InputGroup, type InputGroupProps } from './input-group/InputGroup.js';\nexport { inputGroupClassName } from './input-group/InputGroup.sty.js';\n\nexport {\n  SplitLayout as _SplitLayout,\n  type ContentProps as _SplitLayoutContentProps,\n  type PanelProps as _SplitLayoutPanelProps,\n  type ResizeHandleProps as _SplitLayoutResizeHandleProps,\n  type RootProps as _SplitLayoutRootProps,\n} from './split-layout/SplitLayout.js';\nexport type { PanelWidth } from './split-layout/width-utils.js';\n"],
-  "mappings": "AAAA,SAAS,YAA+C;AACxD,SAAS,YAA+C;AACxD,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACwB;AAAA,OAEnB;AAMP,SAAS,eAAe;AAExB,SAAgC,2BAA4B;AAC5D,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAQ1B,SAAS,gBAAgB;AAkBzB,SAAS,MAAc,QAARA,aAA0B;AAazC,SAAwB,mBAAoB;AAgB5C,SAAS,YAAY;AAErB,SAAS,sBAAsB;AAa/B,SAAS,kBAAkB;AAoB3B,SAAS,gBAAgB;AAGzB,SAAS,kBAAwC;AACjD,SAAS,2BAA2B;AAEpC;AAAA,EACiB;AAAA,OAKV;",
+  "sourcesContent": ["export { Flex, type FlexOwnProps, type FlexProps } from './flex/Flex.js';\nexport { Grid, type GridOwnProps, type GridProps } from './grid/Grid.js';\nexport { Divider } from './divider/Divider.js';\nexport type { DividerProps } from './divider/Divider.js';\nexport {\n  Container,\n  useContainerColoring as _useContainerColoring,\n  type ContainerColoring as _ContainerColoring,\n} from './container/Container.js';\nexport type {\n  ContainerOwnProps,\n  ContainerProps,\n} from './container/Container.js';\nexport type { LayoutSizeCSS } from './types/layout.types.js';\nexport { Surface } from './surface/Surface.js';\nexport type { SurfaceOwnProps, SurfaceProps } from './surface/surface-types.js';\nexport { surfaceBorderRadius as _surfaceBorderRadius } from './surface/variables.sty.js';\nexport { useBreakpoint } from './hooks/useBreakpoint.js';\nexport { AppHeader } from './app-header/AppHeader.js';\nexport type { AppHeaderProps } from './app-header/AppHeader.js';\nexport type {\n  AppHeaderActionButtonOwnProps,\n  AppHeaderActionButtonProps,\n} from './app-header/ActionButton.js';\nexport type { AppHeaderActionItemsProps } from './app-header/ActionItems.js';\nexport type { ActionItemGroupProps } from './app-header/ActionItemGroup.js';\nexport { HelpMenu } from './help-menu/HelpMenu.js';\nexport type {\n  HelpMenuProps,\n  HelpMenuButtonEntry,\n  HelpMenuLinkEntry,\n  HelpMenuChildrenEntry,\n  HelpMenuCustomLinkEntry,\n  HelpMenuCustomItemEntry,\n  HelpMenuDefault,\n} from './help-menu/HelpMenu.js';\nexport type {\n  AppHeaderNavigationProps,\n  AppHeaderNavigationItemOwnProps,\n  AppHeaderNavigationItemProps,\n  // exported with alternate name for backwards compatibility\n  AppHeaderNavigationProps as AppHeaderNavItemsProps,\n} from './app-header/Navigation.js';\nexport type { AppIconProps } from './app-header/app-icon/AppIcon.js';\nexport { Logo, Logo as AppNavLink } from './app-header/Logo.js';\nexport type {\n  AppHeaderLogoProps,\n  AppHeaderLogoOwnProps,\n  // exported with alternate name for backwards compatibility\n  AppHeaderLogoProps as AppNavLinkProps,\n  AppHeaderLogoOwnProps as AppNavLinkOwnProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AppNavLinkInternalOwnProps, // exported for backwards compatibility\n} from './app-header/Logo.js';\nexport type {\n  ActionButtonOwnProps,\n  ActionButtonProps,\n} from './app-header/action-group/ActionButton.js';\nexport { ActionGroup as _ActionGroup } from './app-header/action-group/ActionGroup.js';\nexport type { ActionGroupProps as _ActionGroupProps } from './app-header/action-group/ActionGroup.js';\nexport type {\n  NavItemProps,\n  NavItemOwnProps,\n} from './app-header/action-group/NavItem.js';\nexport type { GroupProps } from './app-header/action-group/Group.js';\n\nexport type {\n  ControlledDetailViewProps,\n  DetailViewOwnProps,\n  DetailViewProps,\n  UncontrolledDetailViewProps,\n} from './page/DetailView.js';\nexport type { HeaderProps } from './page/Header.js';\nexport type { MainProps } from './page/Main.js';\nexport { Page } from './page/Page.js';\nexport type { PageProps } from './page/Page.js';\nexport { panelSizeUnits } from './page/panel-types.js';\nexport type {\n  PanelSize,\n  PanelSizeUnit,\n  Direction as _Direction,\n} from './page/panel-types.js';\nexport type { PanelControlButtonProps } from './page/PanelControlButton.js';\nexport type {\n  ControlledSidebarProps,\n  SidebarOwnProps,\n  SidebarProps,\n  UncontrolledSidebarProps,\n} from './page/Sidebar.js';\nexport { pagePanels } from './page/page-types.js';\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  DismissiblePagePanels,\n  PagePanelSizes,\n  PanelName,\n  /** @deprecated Use `PanelName` instead. */\n  PanelName as PagePanels,\n  ControlledPagePanelProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PagePanelProps,\n  UncontrolledPagePanelProps,\n} from './page/page-types.js';\n\nexport type { TitleBarActionProps } from './title-bar/Action.js';\nexport type { TitleBarNavigationProps } from './title-bar/Navigation.js';\nexport type { TitleBarPrefixProps } from './title-bar/Prefix.js';\nexport type { TitleBarSubtitleProps } from './title-bar/Subtitle.js';\nexport type { TitleBarSuffixProps } from './title-bar/Suffix.js';\nexport type { TitleBarTitleProps } from './title-bar/Title.js';\nexport { TitleBar } from './title-bar/TitleBar.js';\nexport type { TitleBarProps } from './title-bar/TitleBar.js';\n\nexport { InputGroup, type InputGroupProps } from './input-group/InputGroup.js';\nexport { inputGroupClassName } from './input-group/InputGroup.sty.js';\n\nexport {\n  SplitLayout as _SplitLayout,\n  type ContentProps as _SplitLayoutContentProps,\n  type PanelProps as _SplitLayoutPanelProps,\n  type ResizeHandleProps as _SplitLayoutResizeHandleProps,\n  type RootProps as _SplitLayoutRootProps,\n} from './split-layout/SplitLayout.js';\nexport type { PanelWidth } from './split-layout/width-utils.js';\nexport type { CollapsibleProps as _CollapsibleProps } from './page-layout/shared/collapsible.js';\nexport {\n  SidebarLayout as _SidebarLayout,\n  type LayoutRootProps as _SidebarLayoutRootProps,\n} from './page-layout/sidebar-layout/SidebarLayout.js';\nexport type { SidebarProps as _PageLayoutSidebarProps } from './page-layout/sidebar-layout/slots.js';\nexport {\n  DetailsLayout as _DetailsLayout,\n  type RootProps as _DetailsLayoutRootProps,\n} from './page-layout/details-layout/DetailsLayout.js';\nexport type {\n  DetailsProps as _PageLayoutDetailsProps,\n  DetailsControlBarProps as _PageLayoutDetailsControlBarProps,\n} from './page-layout/details-layout/slots.js';\nexport type { LayoutMode as _DetailsLayoutLayoutMode } from './page-layout/details-layout/DetailsLayoutContext.js';\nexport {\n  PageLayout as _PageLayout,\n  type HeaderProps as _PageLayoutHeaderProps,\n  type RootProps as _PageLayoutRootProps,\n} from './page-layout/PageLayout.js';\nexport type { SubLayoutProps as _PageLayoutSubLayoutProps } from './page-layout/SubLayout.js';\nexport type { ProxyProps as _PageLayoutProxyProps } from './page-layout/shared/slots.js';\n"],
+  "mappings": "AAAA,SAAS,YAA+C;AACxD,SAAS,YAA+C;AACxD,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACwB;AAAA,OAEnB;AAMP,SAAS,eAAe;AAExB,SAAgC,2BAA4B;AAC5D,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAQ1B,SAAS,gBAAgB;AAkBzB,SAAS,MAAc,QAARA,aAA0B;AAczC,SAAwB,mBAAoB;AAgB5C,SAAS,YAAY;AAErB,SAAS,sBAAsB;AAa/B,SAAS,kBAAkB;AAoB3B,SAAS,gBAAgB;AAGzB,SAAS,kBAAwC;AACjD,SAAS,2BAA2B;AAEpC;AAAA,EACiB;AAAA,OAKV;AAGP;AAAA,EACmB;AAAA,OAEZ;AAEP;AAAA,EACmB;AAAA,OAEZ;AAMP;AAAA,EACgB;AAAA,OAGT;",
   "names": ["Logo"]
 }

package/esm/layouts/input-group/InputGroup.css

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

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

@@ -2,7 +2,7 @@ import "../../forms/forms-core/components/form-field/FormField.css";
 import "../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css";
 import "../../forms/forms-core/components/form-field-messages/FormFieldMessages.css";
 import "./InputGroup.css";
-var inputGroup = "_1x4bl8z0-3-1-3";
+var inputGroup = "_1x4bl8z0-3-2-0";
 var inputGroupClassName = "strato-inputgroup";
 export {
   inputGroup,

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-1-3';\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-2-0';\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-1-3 {
+._wapl5d0-3-2-0 {
   grid-area: details;
   flex-direction: row-reverse;
 }
-._wapl5d1-3-1-3 {
+._wapl5d1-3-2-0 {
   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-1-3";
-var details = "_wapl5d0-3-1-3";
+var content = "_wapl5d1-3-2-0";
+var details = "_wapl5d0-3-2-0";
 export {
   content,
   details

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

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

package/esm/layouts/page/Header.css

@@ -1,4 +1,4 @@
-._150dima0-3-1-3 {
+._150dima0-3-2-0 {
   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-1-3";
+var header = "_150dima0-3-2-0";
 export {
   header
 };

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

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

package/esm/layouts/page/Main.css

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

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

@@ -1,8 +1,8 @@
 import "./Main.css";
-var content = "_5zin931-3-1-3";
-var main = "_5zin930-3-1-3";
-var withDetails = "_5zin933-3-1-3";
-var withSidebar = "_5zin932-3-1-3";
+var content = "_5zin931-3-2-0";
+var main = "_5zin930-3-2-0";
+var withDetails = "_5zin933-3-2-0";
+var withSidebar = "_5zin932-3-2-0";
 export {
   content,
   main,

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

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

package/esm/layouts/page/Page.css

@@ -1,4 +1,4 @@
-._1j29czt0-3-1-3 {
+._1j29czt0-3-2-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;

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

@@ -1,5 +1,5 @@
 import "./Page.css";
-var page = "_1j29czt0-3-1-3";
+var page = "_1j29czt0-3-2-0";
 export {
   page
 };

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

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