@dynatrace/strato-components 1.5.1 → 1.6.0

package/buttons/button/Button.css

@@ -1,12 +1,12 @@
-._10kgnsa0-1-5-1 {
+._10kgnsa0-1-6-0 {
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: none;
-  background: var(--_bx32h3-1-5-1);
-  color: var(--_bx32h0-1-5-1);
+  background: var(--_bx32h3-1-6-0);
+  color: var(--_bx32h0-1-6-0);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -23,42 +23,42 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: color, background-color, transform;
 }
-._10kgnsa1-1-5-1 {
+._10kgnsa1-1-6-0 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-1-5-1 {
+._10kgnsa2-1-6-0 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-1-5-1 {
+._10kgnsa3-1-6-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   gap: var(--dt-spacings-size-2, 2px);
 }
-._10kgnsa4-1-5-1 {
+._10kgnsa4-1-6-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
   gap: var(--dt-spacings-size-4, 4px);
 }
-._10kgnsa5-1-5-1 {
+._10kgnsa5-1-6-0 {
   cursor: not-allowed;
 }
-._10kgnsa6-1-5-1 {
+._10kgnsa6-1-6-0 {
   cursor: not-allowed;
-  background: var(--_bx32h2-1-5-1);
+  background: var(--_bx32h2-1-6-0);
 }
-._10kgnsa7-1-5-1 {
+._10kgnsa7-1-6-0 {
   width: 100%;
 }
-._10kgnsa8-1-5-1 {
+._10kgnsa8-1-6-0 {
   width: fit-content;
 }
-._10kgnsa9-1-5-1 {
+._10kgnsa9-1-6-0 {
   position: absolute;
   top: 0;
   left: 0;
@@ -70,19 +70,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-1-5-1 ._10kgnsaa-1-5-1:not(:has(svg:only-child)) {
+._10kgnsa3-1-6-0 ._10kgnsaa-1-6-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-1-5-1 ._10kgnsaa-1-5-1:not(:has(svg:only-child)) {
+._10kgnsa4-1-6-0 ._10kgnsaa-1-6-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsac-1-5-1 {
+._10kgnsac-1-6-0 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/buttons/button/Button.d.ts

@@ -1,5 +1,5 @@
 import * as CSS from 'csstype';
-import React, { type ElementType, type MouseEventHandler, type ReactElement, type ReactNode } from 'react';
+import { type ElementType, type MouseEventHandler, type ReactElement, type ReactNode } from 'react';
 import { type AriaDisabledProps, type AriaLabelingProps } from '../../core/types/a11y-props.js';
 import { type DataTestId } from '../../core/types/data-props.js';
 import { type MaskingProps } from '../../core/types/masking-props.js';
@@ -88,8 +88,8 @@ export declare const _Button: <E extends ElementType = 'button'>(props: ButtonPr
  * @public
  */
 export declare const Button: (<E extends ElementType = "button">(props: ButtonProps<E>) => ReactElement | null) & {
-    Suffix: (props: import("./Suffix.js").ButtonSuffixProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Prefix: (props: import("./Prefix.js").ButtonPrefixProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Label: (props: import("./Label.js").ButtonLabelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    Suffix: (props: import("./Suffix.js").ButtonSuffixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    Prefix: (props: import("./Prefix.js").ButtonPrefixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    Label: (props: import("./Label.js").ButtonLabelProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 };
 export {};

package/buttons/button/Button.js

@@ -33,8 +33,9 @@ __export(Button_exports, {
   default: () => getButtonSlots
 });
 module.exports = __toCommonJS(Button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_react_is = require("react-is");
 var import_Button_css = require("./Button.sty.js");
@@ -51,7 +52,7 @@ var import_Grid = require("../../layouts/grid/Grid.js");
 var import_field_css = require("../../styles/field.sty.js");
 function getButtonSlots(children) {
   const slots = {};
-  import_react.default.Children.forEach(children, (child) => {
+  import_react.Children.forEach(children, (child) => {
     if ((0, import_react_is.isElement)(child)) {
       switch (child.type) {
         case import_Suffix.Suffix:
@@ -169,7 +170,7 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
     const intl = (0, import_react_intl.useIntl)();
     const Component = as || "button";
     if (!hasChildren) {
-      return /* @__PURE__ */ import_react.default.createElement(
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         Component,
         {
           ...buttonMergedProps,
@@ -195,7 +196,7 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
         }
       );
     }
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       Component,
       {
         className: (0, import_clsx.default)(
@@ -222,36 +223,48 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
           width: width !== "content" && width !== "full" ? width : void 0,
           ...consumerStyle
         },
-        ...buttonMergedProps
-      },
-      loading && /* @__PURE__ */ import_react.default.createElement("div", { className: import_Button_css.buttonLoadingCSS }, /* @__PURE__ */ import_react.default.createElement(
-        import_ProgressCircle.ProgressCircle,
-        {
-          size: "small",
-          color,
-          "aria-label": intl.formatMessage({
-            defaultMessage: "Loading",
-            id: "cycz+bYG+VH7Of4e",
-            description: "Label for the loading state."
-          })
-        }
-      )),
-      /* @__PURE__ */ import_react.default.createElement(
-        import_Grid.Grid,
-        {
-          gap: size === "default" ? 4 : 2,
-          grid: "auto / auto-flow auto",
-          width: "100%",
-          maxWidth: "100%",
-          alignItems: "center",
-          justifyContent: textAlign === "start" ? "space-between" : "center",
-          style: {
-            visibility: loading ? "hidden" : void 0
-          }
-        },
-        textAlign === "start" ? /* @__PURE__ */ import_react.default.createElement(import_Flex.Flex, { minWidth: 0, gap: size === "default" ? 4 : 2 }, slots.prefix, slots.label, slots.freeform && /* @__PURE__ */ import_react.default.createElement(Button.Label, null, slots.freeform)) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, slots.prefix, slots.label, slots.freeform && /* @__PURE__ */ import_react.default.createElement(Button.Label, null, slots.freeform)),
-        slots.suffix
-      )
+        ...buttonMergedProps,
+        children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_Button_css.buttonLoadingCSS, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ProgressCircle.ProgressCircle,
+            {
+              size: "small",
+              color,
+              "aria-label": intl.formatMessage({
+                defaultMessage: "Loading",
+                id: "cycz+bYG+VH7Of4e",
+                description: "Label for the loading state."
+              })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_Grid.Grid,
+            {
+              gap: size === "default" ? 4 : 2,
+              grid: "auto / auto-flow auto",
+              width: "100%",
+              maxWidth: "100%",
+              alignItems: "center",
+              justifyContent: textAlign === "start" ? "space-between" : "center",
+              style: {
+                visibility: loading ? "hidden" : void 0
+              },
+              children: [
+                textAlign === "start" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { minWidth: 0, gap: size === "default" ? 4 : 2, children: [
+                  slots.prefix,
+                  slots.label,
+                  slots.freeform && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button.Label, { children: slots.freeform })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  slots.prefix,
+                  slots.label,
+                  slots.freeform && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button.Label, { children: slots.freeform })
+                ] }),
+                slots.suffix
+              ]
+            }
+          )
+        ]
+      }
     );
   }
 );

package/buttons/button/Button.sty.js

@@ -28,7 +28,7 @@ var import_ellipsis_css_ts_vanilla = require("../../styles/ellipsis.css");
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Button_css_ts_vanilla = require("./Button.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var buttonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-1-5-1", variantClassNames: { textAlign: { start: "_10kgnsa1-1-5-1", center: "_10kgnsa2-1-5-1" }, size: { condensed: "_10kgnsa3-1-5-1", "default": "_10kgnsa4-1-5-1" }, disabled: { true: "_10kgnsa5-1-5-1" }, readOnly: { true: "_10kgnsa6-1-5-1" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var buttonLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsaa-1-5-1", variantClassNames: { textual: { true: "_oqqp1n0-1-5-1", false: "_10kgnsac-1-5-1" } }, defaultVariants: {}, compoundVariants: [] });
-var buttonLoadingCSS = "_10kgnsa9-1-5-1";
-var buttonWidthsCSS = { full: "_10kgnsa7-1-5-1", content: "_10kgnsa8-1-5-1" };
+var buttonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-1-6-0", variantClassNames: { textAlign: { start: "_10kgnsa1-1-6-0", center: "_10kgnsa2-1-6-0" }, size: { condensed: "_10kgnsa3-1-6-0", "default": "_10kgnsa4-1-6-0" }, disabled: { true: "_10kgnsa5-1-6-0" }, readOnly: { true: "_10kgnsa6-1-6-0" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var buttonLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsaa-1-6-0", variantClassNames: { textual: { true: "_oqqp1n0-1-6-0", false: "_10kgnsac-1-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var buttonLoadingCSS = "_10kgnsa9-1-6-0";
+var buttonWidthsCSS = { full: "_10kgnsa7-1-6-0", content: "_10kgnsa8-1-6-0" };

package/buttons/button/Label.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type DataTestId } from '../../core/types/data-props.js';
 import { type StylingProps } from '../../core/types/styling-props.js';
 /**
@@ -13,4 +13,4 @@ export interface ButtonLabelProps extends StylingProps, DataTestId {
  * Button Label component.
  * @public
  */
-export declare const Label: (props: ButtonLabelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const Label: (props: ButtonLabelProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/buttons/button/Label.js

@@ -31,8 +31,9 @@ __export(Label_exports, {
   Label: () => Label
 });
 module.exports = __toCommonJS(Label_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_Button_css = require("./Button.sty.js");
 var import_is_string_children = require("../../core/utils/_is-string-children.js");
 const Label = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
@@ -43,7 +44,7 @@ const Label = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef)
     "data-testid": dataTestId
   } = props;
   const textual = (0, import_is_string_children.isStringChildren)(children);
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       ref: forwardedRef,
@@ -53,9 +54,9 @@ const Label = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef)
         (0, import_Button_css.buttonLabelCSS)({ textual }),
         consumerClassName
       ),
-      style: consumerStyle
-    },
-    children
+      style: consumerStyle,
+      children
+    }
   );
 });
 Label.displayName = "Button.Label";

package/buttons/button/Prefix.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type DataTestId } from '../../core/types/data-props.js';
 import { type StylingProps } from '../../core/types/styling-props.js';
 /**
@@ -13,4 +13,4 @@ export interface ButtonPrefixProps extends StylingProps, DataTestId {
  * Button Prefix component.
  * @public
  */
-export declare const Prefix: (props: ButtonPrefixProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const Prefix: (props: ButtonPrefixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/buttons/button/Prefix.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,21 +15,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Prefix_exports = {};
 __export(Prefix_exports, {
   Prefix: () => Prefix
 });
 module.exports = __toCommonJS(Prefix_exports);
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_Flex = require("../../layouts/flex/Flex.js");
 const Prefix = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
@@ -40,16 +31,16 @@ const Prefix = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef
     style: consumerStyle,
     "data-testid": dataTestId
   } = props;
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Flex.Flex,
     {
       "data-testid": dataTestId,
       ref: forwardedRef,
       gap: 0,
       className: consumerClassName,
-      style: consumerStyle
-    },
-    children
+      style: consumerStyle,
+      children
+    }
   );
 });
 Prefix.displayName = "Button.Prefix";

package/buttons/button/Suffix.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { type ReactNode } from 'react';
 import { type DataTestId } from '../../core/types/data-props.js';
 import { type StylingProps } from '../../core/types/styling-props.js';
 /**
@@ -7,10 +7,10 @@ import { type StylingProps } from '../../core/types/styling-props.js';
  */
 export interface ButtonSuffixProps extends StylingProps, DataTestId {
     /** Elements to be displayed in the Button Suffix slot. */
-    children: React.ReactNode;
+    children: ReactNode;
 }
 /**
  * Button Suffix component.
  * @public
  */
-export declare const Suffix: (props: ButtonSuffixProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const Suffix: (props: ButtonSuffixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/buttons/button/Suffix.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,21 +15,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Suffix_exports = {};
 __export(Suffix_exports, {
   Suffix: () => Suffix
 });
 module.exports = __toCommonJS(Suffix_exports);
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_Flex = require("../../layouts/flex/Flex.js");
 const Suffix = (0, import_react.forwardRef)(
   (props, forwardedRef) => {
@@ -41,16 +32,16 @@ const Suffix = (0, import_react.forwardRef)(
       style: consumerStyle,
       "data-testid": dataTestId
     } = props;
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Flex.Flex,
       {
         "data-testid": dataTestId,
         gap: 0,
         ref: forwardedRef,
         className: consumerClassName,
-        style: consumerStyle
-      },
-      children
+        style: consumerStyle,
+        children
+      }
     );
   }
 );

package/buttons/intent-button/IntentButton.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type IntentPayload } from '@dynatrace-sdk/navigation';
 import { type AriaLabelingProps } from '../../core/types/a11y-props.js';
 import { type DataTestId } from '../../core/types/data-props.js';
@@ -41,4 +41,4 @@ export type IntentButtonProps = IntentButtonPropsBase & ({
  * in the AppShell context.
  * @public
  */
-export declare const IntentButton: (props: IntentButtonProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+export declare const IntentButton: (props: IntentButtonProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;

package/buttons/intent-button/IntentButton.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,21 +15,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var IntentButton_exports = {};
 __export(IntentButton_exports, {
   IntentButton: () => IntentButton
 });
 module.exports = __toCommonJS(IntentButton_exports);
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_useIntentButton = require("./useIntentButton.js");
@@ -71,7 +62,7 @@ const IntentButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
     onClickProp
   );
   if (disabled) {
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_Button.Button,
       {
         disabled: true,
@@ -82,13 +73,15 @@ const IntentButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
         className: consumerClassName,
         style: consumerStyle,
         readOnly,
-        ...remainingProps
-      },
-      label,
-      /* @__PURE__ */ import_react.default.createElement(import_Button.Button.Suffix, null, /* @__PURE__ */ import_react.default.createElement(import_strato_icons.OpenWithIcon, null))
+        ...remainingProps,
+        children: [
+          label,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Suffix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.OpenWithIcon, {}) })
+        ]
+      }
     );
   }
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Button.Button,
     {
       as: "a",
@@ -101,10 +94,12 @@ const IntentButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
       style: consumerStyle,
       readOnly,
       ...remainingProps,
-      ...intentButtonProps
-    },
-    label,
-    /* @__PURE__ */ import_react.default.createElement(import_Button.Button.Suffix, null, /* @__PURE__ */ import_react.default.createElement(import_strato_icons.OpenWithIcon, null))
+      ...intentButtonProps,
+      children: [
+        label,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Suffix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.OpenWithIcon, {}) })
+      ]
+    }
   );
 });
 IntentButton.displayName = "IntentButton";

package/buttons/intent-button/useIntentButton.d.ts

@@ -1,3 +1,4 @@
+import { type MouseEventHandler as ReactMouseEventHandler, type MouseEvent as ReactMouseEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { type IntentPayload } from '@dynatrace-sdk/navigation';
 /**
  * return shared intent button logic
@@ -5,8 +6,8 @@ import { type IntentPayload } from '@dynatrace-sdk/navigation';
  * @returns intentLink and triggerIntent
  * @internal
  */
-export declare function useIntentButton(payload: IntentPayload, appId?: string, intentId?: string, onClickProp?: React.MouseEventHandler): {
+export declare function useIntentButton(payload: IntentPayload, appId?: string, intentId?: string, onClickProp?: ReactMouseEventHandler): {
     href: string;
-    onClick: (event: React.MouseEvent) => void;
-    onKeyDown: (event: React.KeyboardEvent) => void;
+    onClick: (event: ReactMouseEvent) => void;
+    onKeyDown: (event: ReactKeyboardEvent) => void;
 };