@dynatrace/strato-components 3.0.1 → 3.1.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/divider/Divider.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { dividerCSS } from './Divider.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { colorUtilsCSS } from '../../core/utils/colorUtils.sty.js';\n\n// #region Typings\n\n/** @public\n * Divider component props.\n */\nexport interface DividerProps extends StylingProps, DataTestId {\n  /**\n   * Orientation of the Divider component.\n   * @defaultValue 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Control the HTML tag used for rendering the Divider.\n   * @defaultValue 'div'\n   */\n  as?: 'hr' | 'div';\n  /**\n   * Indicate whether the Divider is used inside a Flex component to apply the right styling.\n   * If set to false, make sure to have an explicit width/height style set on a parent HTML tag.\n   * @defaultValue true\n   */\n  flexItem?: boolean;\n  /**\n   * The color of the Divider.\n   * @defaultValue 'neutral'\n   */\n  color?: 'primary' | 'neutral' | 'success' | 'warning' | 'critical';\n  /**\n   * The visual style of the Divider.\n   * @defaultValue 'default'\n   */\n  variant?: 'default' | 'accent';\n}\n// #endregion\n\n/**\n * The `Divider` component visually separates groups of content.\n * @public\n */\nexport const Divider = /* @__PURE__ */ forwardRef<\n  HTMLDivElement | HTMLHRElement,\n  DividerProps\n>((props, ref) => {\n  const {\n    orientation = 'horizontal',\n    flexItem = true,\n    as = 'div',\n    color = 'neutral',\n    variant = 'default',\n    'data-testid': dataTestId,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  const DividerTag = as;\n\n  return (\n    <DividerTag\n      role=\"separator\"\n      aria-orientation={orientation === 'vertical' ? orientation : undefined}\n      // @ts-expect-error ref can't be div and hr here\n      ref={ref}\n      data-testid={dataTestId}\n      className={clsx(\n        colorUtilsCSS({ color, variant }),\n        dividerCSS({ orientation, flexItem }),\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      {...remainingProps}\n    />\n  );\n});\n\n(Divider as typeof Divider & { displayName: string }).displayName = 'Divider';\n"],
-  "mappings": "AAkEI;AAlEJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB;AAyCvB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,eAAe;AAAA,IACf,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,aAAa;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAkB,gBAAgB,aAAa,cAAc;AAAA,MAE7D;AAAA,MACA,eAAa;AAAA,MACb,WAAW;AAAA,QACT,cAAc,EAAE,OAAO,QAAQ,CAAC;AAAA,QAChC,WAAW,EAAE,aAAa,SAAS,CAAC;AAAA,QACpC;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEA,QAAqD,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { dividerCSS } from './Divider.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { colorUtilsCSS } from '../../core/utils/colorUtils.sty.js';\n\nconst COMPONENT_NAME = 'Divider';\n\n// #region Typings\n\n/** @public\n * Divider component props.\n */\nexport interface DividerProps extends StylingProps, DataTestId {\n  /**\n   * Orientation of the Divider component.\n   * @defaultValue 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Control the HTML tag used for rendering the Divider.\n   * @defaultValue 'div'\n   */\n  as?: 'hr' | 'div';\n  /**\n   * Indicate whether the Divider is used inside a Flex component to apply the right styling.\n   * If set to false, make sure to have an explicit width/height style set on a parent HTML tag.\n   * @defaultValue true\n   */\n  flexItem?: boolean;\n  /**\n   * The color of the Divider.\n   * @defaultValue 'neutral'\n   */\n  color?: 'primary' | 'neutral' | 'success' | 'warning' | 'critical';\n  /**\n   * The visual style of the Divider.\n   * @defaultValue 'default'\n   */\n  variant?: 'default' | 'accent';\n}\n// #endregion\n\n/**\n * The `Divider` component visually separates groups of content.\n * @public\n */\nexport const Divider = /* @__PURE__ */ forwardRef<\n  HTMLDivElement | HTMLHRElement,\n  DividerProps\n>((props, ref) => {\n  const {\n    orientation = 'horizontal',\n    flexItem = true,\n    as = 'div',\n    color = 'neutral',\n    variant = 'default',\n    'data-testid': dataTestId,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  const DividerTag = as;\n\n  return (\n    <DividerTag\n      role=\"separator\"\n      aria-orientation={orientation === 'vertical' ? orientation : undefined}\n      // @ts-expect-error ref can't be div and hr here\n      ref={ref}\n      data-testid={dataTestId}\n      className={clsx(\n        colorUtilsCSS({ color, variant }),\n        dividerCSS({ orientation, flexItem }),\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    />\n  );\n});\n\n(Divider as typeof Divider & { displayName: string }).displayName = 'Divider';\n"],
+  "mappings": "AAoEI;AApEJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB;AAE9B,MAAM,iBAAiB;AAyChB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,eAAe;AAAA,IACf,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,aAAa;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAkB,gBAAgB,aAAa,cAAc;AAAA,MAE7D;AAAA,MACA,eAAa;AAAA,MACb,WAAW;AAAA,QACT,cAAc,EAAE,OAAO,QAAQ,CAAC;AAAA,QAChC,WAAW,EAAE,aAAa,SAAS,CAAC;AAAA,QACpC;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,qBAAmB;AAAA;AAAA,EACrB;AAEJ,CAAC;AAEA,QAAqD,cAAc;",
   "names": []
 }

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-0-1", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-0-1", vertical: "_1thxv8m2-3-0-1" }, flexItem: { true: "_1thxv8m3-3-0-1", false: "_1thxv8m4-3-0-1" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-0-1"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-0-1"]] });
+var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-1-0", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-1-0", vertical: "_1thxv8m2-3-1-0" }, flexItem: { true: "_1thxv8m3-3-1-0", false: "_1thxv8m4-3-1-0" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-1-0"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-1-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-0-1',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-0-1',vertical:'_1thxv8m2-3-0-1'},flexItem:{true:'_1thxv8m3-3-0-1',false:'_1thxv8m4-3-0-1'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-0-1'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-0-1']]});"],
+  "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-0',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-1-0',vertical:'_1thxv8m2-3-1-0'},flexItem:{true:'_1thxv8m3-3-1-0',false:'_1thxv8m4-3-1-0'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-1-0'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-1-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/flex/Flex.js

@@ -4,6 +4,7 @@ import { forwardRef } from "react";
 import {
   getFlexStyles
 } from "../../styles/getFlexStyles.js";
+const COMPONENT_NAME = "Flex";
 const Flex = /* @__PURE__ */ forwardRef(
   (props, forwardedRef) => {
     const {
@@ -15,6 +16,7 @@ const Flex = /* @__PURE__ */ forwardRef(
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
+      "data-dt-component": dataDtComponent = COMPONENT_NAME,
       ...remainingProps
     } = props;
     const [flexClassNames, flexStyles, nonFlexStyleProps] = getFlexStyles(
@@ -36,6 +38,7 @@ const Flex = /* @__PURE__ */ forwardRef(
           ...consumerStyle
         },
         ...nonFlexStyleProps,
+        "data-dt-component": dataDtComponent,
         children
       }
     );

package/esm/layouts/flex/Flex.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/flex/Flex.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type ElementType, type ReactElement, forwardRef } from 'react';\n\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport {\n  getFlexStyles,\n  type FlexStyleProps,\n} from '../../styles/getFlexStyles.js';\n\n/**\n * Flex own props.\n * @public\n */\nexport type FlexOwnProps = WithChildren &\n  StylingProps &\n  FlexStyleProps &\n  DataTestId &\n  MaskingProps;\n\n/**\n * Merge own props with others inherited from the underlying element type.\n * @public\n */\nexport type FlexProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  FlexOwnProps\n>;\n\n/**\n * The `Flex` component can be used to layout its children with Flexbox.\n * The component can be customized with flexbox props.\n * @public\n */\nexport const Flex: <E extends ElementType = 'div'>(\n  props: FlexProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: FlexProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      children,\n      id,\n      as,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [flexClassNames, flexStyles, nonFlexStyleProps] = getFlexStyles(\n      remainingProps,\n      { gap: 8 },\n    );\n\n    const Component = as ?? 'div';\n\n    return (\n      <Component\n        ref={forwardedRef}\n        id={id}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(flexClassNames, consumerClassName)}\n        style={{\n          ...flexStyles,\n          ...consumerStyle,\n        }}\n        {...nonFlexStyleProps}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],
-  "mappings": "AAgEM;AAhEN,OAAO,UAAU;AACjB,SAA8C,kBAAkB;AAOhE;AAAA,EACE;AAAA,OAEK;AA0BA,MAAM,OAE8B;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,gBAAgB,YAAY,iBAAiB,IAAI;AAAA,MACtD;AAAA,MACA,EAAE,KAAK,EAAE;AAAA,IACX;AAEA,UAAM,YAAY,MAAM;AAExB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,gBAAgB,iBAAiB;AAAA,QACjD,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type ElementType, forwardRef, type ReactElement } from 'react';\n\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport {\n  type FlexStyleProps,\n  getFlexStyles,\n} from '../../styles/getFlexStyles.js';\n\nconst COMPONENT_NAME = 'Flex';\n\n/**\n * Flex own props.\n * @public\n */\nexport type FlexOwnProps = WithChildren &\n  StylingProps &\n  FlexStyleProps &\n  DataTestId &\n  MaskingProps;\n\n/**\n * Merge own props with others inherited from the underlying element type.\n * @public\n */\nexport type FlexProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  FlexOwnProps\n>;\n\n/**\n * The `Flex` component can be used to layout its children with Flexbox.\n * The component can be customized with flexbox props.\n * @public\n */\nexport const Flex: <E extends ElementType = 'div'>(\n  props: FlexProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: FlexProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      children,\n      id,\n      as,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'data-dt-component': dataDtComponent = COMPONENT_NAME,\n      ...remainingProps\n    } = props;\n\n    const [flexClassNames, flexStyles, nonFlexStyleProps] = getFlexStyles(\n      remainingProps,\n      { gap: 8 },\n    );\n\n    const Component = as ?? 'div';\n\n    return (\n      <Component\n        ref={forwardedRef}\n        id={id}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(flexClassNames, consumerClassName)}\n        style={{\n          ...flexStyles,\n          ...consumerStyle,\n        }}\n        {...nonFlexStyleProps}\n        data-dt-component={dataDtComponent}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],
+  "mappings": "AAmEM;AAnEN,OAAO,UAAU;AACjB,SAA2B,kBAAqC;AAOhE;AAAA,EAEE;AAAA,OACK;AAEP,MAAM,iBAAiB;AA0BhB,MAAM,OAE8B;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,qBAAqB,kBAAkB;AAAA,MACvC,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,gBAAgB,YAAY,iBAAiB,IAAI;AAAA,MACtD;AAAA,MACA,EAAE,KAAK,EAAE;AAAA,IACX;AAEA,UAAM,YAAY,MAAM;AAExB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,gBAAgB,iBAAiB;AAAA,QACjD,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
   "names": []
 }

package/esm/layouts/grid/Grid.js

@@ -4,6 +4,7 @@ import { forwardRef } from "react";
 import {
   getGridStyles
 } from "../../styles/getGridStyles.js";
+const COMPONENT_NAME = "Grid";
 const Grid = /* @__PURE__ */ forwardRef(
   (props, forwardedRef) => {
     const {
@@ -15,6 +16,7 @@ const Grid = /* @__PURE__ */ forwardRef(
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
+      "data-dt-component": dataDtComponent = COMPONENT_NAME,
       ...remainingProps
     } = props;
     const [gridClassNames, gridStyles, nonGridStyleProps] = getGridStyles(
@@ -36,6 +38,7 @@ const Grid = /* @__PURE__ */ forwardRef(
           ...consumerStyle
         },
         ...nonGridStyleProps,
+        "data-dt-component": dataDtComponent,
         children
       }
     );

package/esm/layouts/grid/Grid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/grid/Grid.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type ElementType, type ReactElement, forwardRef } from 'react';\n\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport {\n  type GridStyleProps,\n  getGridStyles,\n} from '../../styles/getGridStyles.js';\n\n/**\n * Defines grid own props.\n * @public\n */\nexport type GridOwnProps = WithChildren &\n  StylingProps &\n  GridStyleProps &\n  DataTestId &\n  MaskingProps;\n\n/**\n * Merge own props with others inherited from the underlying element type.\n * @public\n */\nexport type GridProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  GridOwnProps\n>;\n\n/**\n * The `Grid` component can be used to layout its children with the help of CSS Grid.\n * The component can be customized with CSS grid props.\n * @public\n */\nexport const Grid: <E extends ElementType = 'div'>(\n  props: GridProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: GridProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      children,\n      id,\n      as = 'div',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [gridClassNames, gridStyles, nonGridStyleProps] = getGridStyles(\n      remainingProps,\n      { gap: 8 },\n    );\n\n    const Component = as ?? 'div';\n\n    return (\n      <Component\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        id={id}\n        className={clsx(gridClassNames, consumerClassName)}\n        style={{\n          ...gridStyles,\n          ...consumerStyle,\n        }}\n        {...nonGridStyleProps}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],
-  "mappings": "AAgEM;AAhEN,OAAO,UAAU;AACjB,SAA8C,kBAAkB;AAOhE;AAAA,EAEE;AAAA,OACK;AA0BA,MAAM,OAE8B;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,gBAAgB,YAAY,iBAAiB,IAAI;AAAA,MACtD;AAAA,MACA,EAAE,KAAK,EAAE;AAAA,IACX;AAEA,UAAM,YAAY,MAAM;AAExB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB;AAAA,QACA,WAAW,KAAK,gBAAgB,iBAAiB;AAAA,QACjD,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type ElementType, forwardRef, type ReactElement } from 'react';\n\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport {\n  getGridStyles,\n  type GridStyleProps,\n} from '../../styles/getGridStyles.js';\n\nconst COMPONENT_NAME = 'Grid';\n\n/**\n * Defines grid own props.\n * @public\n */\nexport type GridOwnProps = WithChildren &\n  StylingProps &\n  GridStyleProps &\n  DataTestId &\n  MaskingProps;\n\n/**\n * Merge own props with others inherited from the underlying element type.\n * @public\n */\nexport type GridProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  GridOwnProps\n>;\n\n/**\n * The `Grid` component can be used to layout its children with the help of CSS Grid.\n * The component can be customized with CSS grid props.\n * @public\n */\nexport const Grid: <E extends ElementType = 'div'>(\n  props: GridProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: GridProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      children,\n      id,\n      as = 'div',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'data-dt-component': dataDtComponent = COMPONENT_NAME,\n      ...remainingProps\n    } = props;\n\n    const [gridClassNames, gridStyles, nonGridStyleProps] = getGridStyles(\n      remainingProps,\n      { gap: 8 },\n    );\n\n    const Component = as ?? 'div';\n\n    return (\n      <Component\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        id={id}\n        className={clsx(gridClassNames, consumerClassName)}\n        style={{\n          ...gridStyles,\n          ...consumerStyle,\n        }}\n        {...nonGridStyleProps}\n        data-dt-component={dataDtComponent}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],
+  "mappings": "AAmEM;AAnEN,OAAO,UAAU;AACjB,SAA2B,kBAAqC;AAOhE;AAAA,EACE;AAAA,OAEK;AAEP,MAAM,iBAAiB;AA0BhB,MAAM,OAE8B;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,qBAAqB,kBAAkB;AAAA,MACvC,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,gBAAgB,YAAY,iBAAiB,IAAI;AAAA,MACtD;AAAA,MACA,EAAE,KAAK,EAAE;AAAA,IACX;AAEA,UAAM,YAAY,MAAM;AAExB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB;AAAA,QACA,WAAW,KAAK,gBAAgB,iBAAiB;AAAA,QACjD,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
   "names": []
 }

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

@@ -18,6 +18,7 @@ import { Button } from "../../buttons/button/Button.js";
 import { Menu } from "../../navigation/menu/Menu.js";
 import { Tooltip } from "../../overlays/tooltip/Tooltip.js";
 import { Flex } from "../flex/Flex.js";
+const COMPONENT_NAME = "HelpMenu";
 const MENU_ITEMS = [
   {
     label: /* @__PURE__ */ jsx(FormattedMessage, { defaultMessage: "What's new", id: "TY3F/kE6n91t0TL0" }),
@@ -130,15 +131,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] = useState(false);
   const intl = useIntl();
   const label = intl.formatMessage({
@@ -149,82 +142,90 @@ const HelpMenu = (props) => {
     setIsOpen(value);
     props.onOpenChange?.(value);
   };
-  return /* @__PURE__ */ jsxs(Menu, { open: isOpen, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx(Tooltip, { text: label, children: /* @__PURE__ */ jsx(Menu.Trigger, { 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];
-        if (!entry) {
-          return null;
-        }
-        if (entry === "default") {
-          return /* @__PURE__ */ jsx(
-            HelpMenuDefaults,
-            {
-              entryKey: key,
-              icon,
-              label: label2
-            },
-            key
-          );
-        }
-        if (Array.isArray(entry)) {
-          return /* @__PURE__ */ jsxs(Menu.Sub, { children: [
-            /* @__PURE__ */ jsxs(Menu.SubTrigger, { children: [
-              /* @__PURE__ */ jsx(Menu.Prefix, { children: icon }),
-              label2
-            ] }),
-            /* @__PURE__ */ jsx(Menu.SubContent, { children: entry.map((entryChild) => {
-              if ("href" in entryChild) {
-                return /* @__PURE__ */ jsx(
-                  HelpMenuLink,
-                  {
-                    label: entryChild.label,
-                    onSelect: entryChild.onSelect,
-                    href: entryChild.href,
-                    target: entryChild.target
-                  },
-                  entryChild.label
-                );
-              }
+  return /* @__PURE__ */ jsxs(
+    Menu,
+    {
+      open: isOpen,
+      onOpenChange: handleOpenChange,
+      "data-dt-component": COMPONENT_NAME,
+      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__ */ jsxs(Menu.Content, { children: [
+          MENU_ITEMS.map(({ label: label2, key, icon }) => {
+            const entry = entries[key];
+            if (!entry) {
+              return null;
+            }
+            if (entry === "default") {
               return /* @__PURE__ */ jsx(
-                HelpMenuButton,
+                HelpMenuDefaults,
                 {
-                  label: entryChild.label,
-                  onSelect: entryChild.onSelect
+                  entryKey: key,
+                  icon,
+                  label: label2
                 },
-                entryChild.label
+                key
               );
-            }) })
-          ] }, key);
-        }
-        if ("href" in entry) {
-          return /* @__PURE__ */ jsx(
-            HelpMenuLink,
-            {
-              label: label2,
-              icon,
-              onSelect: entry.onSelect,
-              href: entry.href,
-              target: entry.target
-            },
-            key
-          );
-        }
-        return /* @__PURE__ */ jsx(
-          HelpMenuButton,
-          {
-            label: label2,
-            icon,
-            onSelect: entry.onSelect
-          },
-          key
-        );
-      }),
-      children,
-      /* @__PURE__ */ jsx(HelpMenuFooter, {})
-    ] })
-  ] });
+            }
+            if (Array.isArray(entry)) {
+              return /* @__PURE__ */ jsxs(Menu.Sub, { children: [
+                /* @__PURE__ */ jsxs(Menu.SubTrigger, { children: [
+                  /* @__PURE__ */ jsx(Menu.Prefix, { children: icon }),
+                  label2
+                ] }),
+                /* @__PURE__ */ jsx(Menu.SubContent, { children: entry.map((entryChild) => {
+                  if ("href" in entryChild) {
+                    return /* @__PURE__ */ jsx(
+                      HelpMenuLink,
+                      {
+                        label: entryChild.label,
+                        onSelect: entryChild.onSelect,
+                        href: entryChild.href,
+                        target: entryChild.target
+                      },
+                      entryChild.label
+                    );
+                  }
+                  return /* @__PURE__ */ jsx(
+                    HelpMenuButton,
+                    {
+                      label: entryChild.label,
+                      onSelect: entryChild.onSelect
+                    },
+                    entryChild.label
+                  );
+                }) })
+              ] }, key);
+            }
+            if ("href" in entry) {
+              return /* @__PURE__ */ jsx(
+                HelpMenuLink,
+                {
+                  label: label2,
+                  icon,
+                  onSelect: entry.onSelect,
+                  href: entry.href,
+                  target: entry.target
+                },
+                key
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              HelpMenuButton,
+              {
+                label: label2,
+                icon,
+                onSelect: entry.onSelect
+              },
+              key
+            );
+          }),
+          children,
+          /* @__PURE__ */ jsx(HelpMenuFooter, {})
+        ] })
+      ]
+    }
+  );
 };
 const HelpMenuDefaults = (props) => {
   switch (props.entryKey) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/help-menu/HelpMenu.tsx"],
-  "sourcesContent": ["import { useState, type ReactNode } 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\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    children,\n    // className,\n    // style,\n    // 'data-dtrum-allow': dataDtrumAllow,\n    // 'data-dtrum-mask': dataDtrumMask,\n    // 'data-testid': dataTestId,\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    props.onOpenChange?.(value);\n  };\n\n  return (\n    <Menu open={isOpen} onOpenChange={handleOpenChange}>\n      <Tooltip text={label}>\n        <Menu.Trigger>\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 { 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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",
   "names": ["label"]
 }

package/esm/layouts/hooks/useLayoutStyles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/hooks/useLayoutStyles.tsx"],
-  "sourcesContent": ["import { useLayoutSizeProps } from './useLayoutSizeProps.js';\nimport { useMarginProps } from './useMarginProps.js';\nimport { usePaddingProps } from './usePaddingProps.js';\nimport { SpacingProps } from '../../styles/getSpacingSprinkles.js';\nimport type { SurfaceProps } from '../surface/Surface.js';\nimport type {\n  LayoutStyles,\n  LayoutSizeProps,\n  DefaultStyles,\n} from '../types/layout.types.js';\n\n/**\n * Generates layout styles including padding, margin, and size properties.\n * @internal\n */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport function useLayoutStyles(\n  props: SurfaceProps<any>,\n  defaultStyles: DefaultStyles,\n): LayoutStyles {\n  const {\n    /** Padding props */\n    padding,\n    p,\n    paddingX,\n    px,\n    paddingY,\n    py,\n    paddingTop,\n    pt,\n    paddingRight,\n    pr,\n    paddingBottom,\n    pb,\n    paddingLeft,\n    pl,\n\n    /** Margin props */\n    margin,\n    m,\n    marginX,\n    mx,\n    marginY,\n    my,\n    marginTop,\n    mt,\n    marginRight,\n    mr,\n    marginBottom,\n    mb,\n    marginLeft,\n    ml,\n\n    /** Layout props */\n    width,\n    minWidth,\n    maxWidth,\n    height,\n    minHeight,\n    maxHeight,\n\n    /** filtered remaining props for passing back to component */\n    ...remainingProps\n  } = props;\n\n  const paddingProps: Pick<\n    SpacingProps,\n    | 'padding'\n    | 'p'\n    | 'paddingX'\n    | 'px'\n    | 'paddingY'\n    | 'py'\n    | 'paddingTop'\n    | 'pt'\n    | 'paddingRight'\n    | 'pr'\n    | 'paddingBottom'\n    | 'pb'\n    | 'paddingLeft'\n    | 'pl'\n  > = {\n    padding,\n    p,\n    paddingX,\n    px,\n    paddingY,\n    py,\n    paddingTop,\n    pt,\n    paddingRight,\n    pr,\n    paddingBottom,\n    pb,\n    paddingLeft,\n    pl,\n  };\n\n  const marginProps: Pick<\n    SpacingProps,\n    | 'margin'\n    | 'm'\n    | 'marginX'\n    | 'mx'\n    | 'marginY'\n    | 'my'\n    | 'marginTop'\n    | 'mt'\n    | 'marginRight'\n    | 'mr'\n    | 'marginBottom'\n    | 'mb'\n    | 'marginLeft'\n    | 'ml'\n  > = {\n    margin,\n    m,\n    marginX,\n    mx,\n    marginY,\n    my,\n    marginTop,\n    mt,\n    marginRight,\n    mr,\n    marginBottom,\n    mb,\n    marginLeft,\n    ml,\n  };\n\n  const layoutProps: LayoutSizeProps = {\n    width,\n    minWidth,\n    maxWidth,\n    height,\n    minHeight,\n    maxHeight,\n  };\n\n  const paddingStyles = usePaddingProps(\n    paddingProps,\n    defaultStyles.paddingDefaults,\n  );\n  const marginStyles = useMarginProps(\n    marginProps,\n    defaultStyles.marginDefaults,\n  );\n  const layoutSizeStyles = useLayoutSizeProps(layoutProps);\n\n  return {\n    paddingStyles,\n    marginStyles,\n    layoutSizeStyles,\n    remainingProps,\n  };\n}\n"],
+  "sourcesContent": ["import { useLayoutSizeProps } from './useLayoutSizeProps.js';\nimport { useMarginProps } from './useMarginProps.js';\nimport { usePaddingProps } from './usePaddingProps.js';\nimport { SpacingProps } from '../../styles/getSpacingSprinkles.js';\nimport type { SurfaceProps } from '../surface/surface-types.js';\nimport type {\n  LayoutStyles,\n  LayoutSizeProps,\n  DefaultStyles,\n} from '../types/layout.types.js';\n\n/**\n * Generates layout styles including padding, margin, and size properties.\n * @internal\n */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport function useLayoutStyles(\n  props: SurfaceProps<any>,\n  defaultStyles: DefaultStyles,\n): LayoutStyles {\n  const {\n    /** Padding props */\n    padding,\n    p,\n    paddingX,\n    px,\n    paddingY,\n    py,\n    paddingTop,\n    pt,\n    paddingRight,\n    pr,\n    paddingBottom,\n    pb,\n    paddingLeft,\n    pl,\n\n    /** Margin props */\n    margin,\n    m,\n    marginX,\n    mx,\n    marginY,\n    my,\n    marginTop,\n    mt,\n    marginRight,\n    mr,\n    marginBottom,\n    mb,\n    marginLeft,\n    ml,\n\n    /** Layout props */\n    width,\n    minWidth,\n    maxWidth,\n    height,\n    minHeight,\n    maxHeight,\n\n    /** filtered remaining props for passing back to component */\n    ...remainingProps\n  } = props;\n\n  const paddingProps: Pick<\n    SpacingProps,\n    | 'padding'\n    | 'p'\n    | 'paddingX'\n    | 'px'\n    | 'paddingY'\n    | 'py'\n    | 'paddingTop'\n    | 'pt'\n    | 'paddingRight'\n    | 'pr'\n    | 'paddingBottom'\n    | 'pb'\n    | 'paddingLeft'\n    | 'pl'\n  > = {\n    padding,\n    p,\n    paddingX,\n    px,\n    paddingY,\n    py,\n    paddingTop,\n    pt,\n    paddingRight,\n    pr,\n    paddingBottom,\n    pb,\n    paddingLeft,\n    pl,\n  };\n\n  const marginProps: Pick<\n    SpacingProps,\n    | 'margin'\n    | 'm'\n    | 'marginX'\n    | 'mx'\n    | 'marginY'\n    | 'my'\n    | 'marginTop'\n    | 'mt'\n    | 'marginRight'\n    | 'mr'\n    | 'marginBottom'\n    | 'mb'\n    | 'marginLeft'\n    | 'ml'\n  > = {\n    margin,\n    m,\n    marginX,\n    mx,\n    marginY,\n    my,\n    marginTop,\n    mt,\n    marginRight,\n    mr,\n    marginBottom,\n    mb,\n    marginLeft,\n    ml,\n  };\n\n  const layoutProps: LayoutSizeProps = {\n    width,\n    minWidth,\n    maxWidth,\n    height,\n    minHeight,\n    maxHeight,\n  };\n\n  const paddingStyles = usePaddingProps(\n    paddingProps,\n    defaultStyles.paddingDefaults,\n  );\n  const marginStyles = useMarginProps(\n    marginProps,\n    defaultStyles.marginDefaults,\n  );\n  const layoutSizeStyles = useLayoutSizeProps(layoutProps);\n\n  return {\n    paddingStyles,\n    marginStyles,\n    layoutSizeStyles,\n    remainingProps,\n  };\n}\n"],
   "mappings": "AAAA,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAczB,SAAS,gBACd,OACA,eACc;AACd,QAAM;AAAA;AAAA,IAEJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAGA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,eAgBF;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAgBF;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAA+B;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA,cAAc;AAAA,EAChB;AACA,QAAM,eAAe;AAAA,IACnB;AAAA,IACA,cAAc;AAAA,EAChB;AACA,QAAM,mBAAmB,mBAAmB,WAAW;AAEvD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/layouts/index.js

@@ -18,6 +18,9 @@ import { pagePanels } from "./page/page-types.js";
 import { TitleBar } from "./title-bar/TitleBar.js";
 import { InputGroup } from "./input-group/InputGroup.js";
 import { inputGroupClassName } from "./input-group/InputGroup.sty.js";
+import {
+  SplitLayout
+} from "./split-layout/SplitLayout.js";
 export {
   AppHeader,
   Logo2 as AppNavLink,
@@ -32,6 +35,7 @@ export {
   Surface,
   TitleBar,
   ActionGroup as _ActionGroup,
+  SplitLayout as _SplitLayout,
   surfaceBorderRadius as _surfaceBorderRadius,
   useContainerColoring as _useContainerColoring,
   inputGroupClassName,

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.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"],
-  "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;",
+  "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;",
   "names": ["Logo"]
 }

package/esm/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-0 > .strato-inputgroup:not(:last-child),
+ ._1x4bl8z0-3-1-0 > *: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-0 > .strato-inputgroup:not(:first-child),
+ ._1x4bl8z0-3-1-0 > *: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-0 > ._mvcxum0-3-1-0 {
   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-0:has(> ._mvcxum0-3-1-0 > label):has(> ._mvcxum0-3-1-0 > ._1l9bja60-3-1-0:last-child:not(:empty)) > ._mvcxum0-3-1-0 {
   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-0:has(> ._mvcxum0-3-1-0 > label):not(:has(> ._mvcxum0-3-1-0 > ._1l9bja60-3-1-0:last-child:not(:empty))) > ._mvcxum0-3-1-0 {
   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-0:not(:has(> ._mvcxum0-3-1-0 > label)):has(> ._mvcxum0-3-1-0 > ._1l9bja60-3-1-0:last-child:not(:empty)) > ._mvcxum0-3-1-0 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-0-1 > ._mvcxum0-3-0-1 > label {
+._1x4bl8z0-3-1-0 > ._mvcxum0-3-1-0 > 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-0 > ._mvcxum0-3-1-0:has(> :not(label, ._1l9bja60-3-1-0)) > label {
   width: 0;
   min-width: 100%;
 }
-._1x4bl8z0-3-0-1 > :not(._mvcxum0-3-0-1) {
+._1x4bl8z0-3-1-0 > :not(._mvcxum0-3-1-0) {
   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-0:has(> ._mvcxum0-3-1-0 > label) > :not(._mvcxum0-3-1-0), ._1x4bl8z0-3-1-0:has(> ._mvcxum0-3-1-0 > label) > ._mvcxum0-3-1-0 > :not(label, ._1l9bja60-3-1-0) {
   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-0:has(> ._mvcxum0-3-1-0 > label) > ._mvcxum0-3-1-0 > ._1l9bja60-3-1-0 {
   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-0 > ._mvcxum0-3-1-0:has(> :not(label, ._1l9bja60-3-1-0)) > ._1l9bja60-3-1-0 ._16z6rg14-3-1-0 {
   width: 0;
   flex: 1 1 auto;
 }

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

@@ -12,6 +12,8 @@ const InputGroup = /* @__PURE__ */ forwardRef((inputGroupProps, ref) => {
     "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__ */ jsx(
@@ -28,8 +30,8 @@ const InputGroup = /* @__PURE__ */ forwardRef((inputGroupProps, ref) => {
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      "data-dt-component": COMPONENT_NAME,
       ...remainingProps,
+      "data-dt-component": dataDtComponent,
       children
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/input-group/InputGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type PropsWithChildren } from 'react';\n\nimport * as styles from './InputGroup.sty.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 { Grid } from '../grid/Grid.js';\n\n\nconst COMPONENT_NAME = 'InputGroup';\n\n/**\n * Props for the InputGroup component.\n * @public\n */\nexport interface InputGroupProps\n  extends PropsWithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {}\n\n/**\n * The `InputGroup` component is the outermost layout component of a field\n * component (for example `TextInput`), providing support for grouping.\n * @public\n */\nexport const InputGroup = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  InputGroupProps\n>((inputGroupProps, ref) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = inputGroupProps;\n\n  return (\n    <Grid\n      ref={ref}\n      gridAutoFlow=\"column\"\n      gridAutoRows=\"max-content\"\n      justifyContent=\"start\"\n      columnGap={2}\n      rowGap={4}\n      className={clsx(consumerClassName, styles.inputGroup)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dt-component={COMPONENT_NAME}\n      {...remainingProps}\n    >\n      {children}\n    </Grid>\n  );\n});\n\n(InputGroup as typeof InputGroup & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AA0CI;AA1CJ,OAAO,UAAU;AACjB,SAAS,kBAA0C;AAEnD,YAAY,YAAY;AAIxB,SAAS,YAAY;AAGrB,MAAM,iBAAiB;AAiBhB,MAAM,aAA6B,2BAGxC,CAAC,iBAAiB,QAAQ;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAa;AAAA,MACb,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,WAAW,KAAK,mBAAmB,OAAO,UAAU;AAAA,MACpD,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,qBAAmB;AAAA,MAClB,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type PropsWithChildren } from 'react';\n\nimport * as styles from './InputGroup.sty.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 { Grid } from '../grid/Grid.js';\n\nconst COMPONENT_NAME = 'InputGroup';\n\n/**\n * Props for the InputGroup component.\n * @public\n */\nexport interface InputGroupProps\n  extends PropsWithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {}\n\n/**\n * The `InputGroup` component is the outermost layout component of a field\n * component (for example `TextInput`), providing support for grouping.\n * @public\n */\nexport const InputGroup = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  InputGroupProps\n>((inputGroupProps, ref) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    // @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.\n    'data-dt-component': dataDtComponent = COMPONENT_NAME,\n    ...remainingProps\n  } = inputGroupProps;\n\n  return (\n    <Grid\n      ref={ref}\n      gridAutoFlow=\"column\"\n      gridAutoRows=\"max-content\"\n      justifyContent=\"start\"\n      columnGap={2}\n      rowGap={4}\n      className={clsx(consumerClassName, styles.inputGroup)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...remainingProps}\n      data-dt-component={dataDtComponent}\n    >\n      {children}\n    </Grid>\n  );\n});\n\n(InputGroup as typeof InputGroup & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AA2CI;AA3CJ,OAAO,UAAU;AACjB,SAAS,kBAA0C;AAEnD,YAAY,YAAY;AAIxB,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAiBhB,MAAM,aAA6B,2BAGxC,CAAC,iBAAiB,QAAQ;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA;AAAA,IAEpB,qBAAqB,kBAAkB;AAAA,IACvC,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAa;AAAA,MACb,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,WAAW,KAAK,mBAAmB,OAAO,UAAU;AAAA,MACpD,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
   "names": []
 }

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-0-1";
+var inputGroup = "_1x4bl8z0-3-1-0";
 var inputGroupClassName = "strato-inputgroup";
 export {
   inputGroup,