@dynatrace/strato-components 0.85.60 → 0.85.100

package/core/styles/focusRing.css

@@ -1,88 +1,75 @@
-.z2r50s3 {
+._z2r50s3-0-85-100 {
   outline: none;
 }
-.z2r50s3:focus-visible {
+._z2r50s3-0-85-100:focus-visible {
   outline: none;
 }
-.z2r50s4 {
+._z2r50s4-0-85-100 {
   border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--z2r50s0);
-  background-color: var(--z2r50s2);
-}
-.z2r50s5.z2r50s5 {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--z2r50s1);
-}
-.z2r50s6 {
-  --z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
-  --z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
-  --z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
-}
-.z2r50s7 {
-  --z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
-  --z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
-  --z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
-}
-.z2r50s8 {
-  --z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
-  --z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
-  --z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
-}
-.z2r50s9 {
-  --z2r50s0: var(--dt-colors-border-warning-accent, #805100);
-  --z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
-  --z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
-}
-.z2r50sa {
-  --z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
-  --z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
-  --z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
-}
-.z2r50sb {
-  --z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
-  --z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
-  --z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
-}
-.z2r50sc:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-0-85-100);
+  background-color: var(--_z2r50s2-0-85-100);
+}
+._z2r50s5-0-85-100._z2r50s5-0-85-100 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-0-85-100), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-0-85-100);
+}
+._z2r50s6-0-85-100 {
+  --_z2r50s0-0-85-100: var(--dt-colors-border-neutral-accent, #545587);
+  --_z2r50s1-0-85-100: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --_z2r50s2-0-85-100: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+._z2r50s7-0-85-100 {
+  --_z2r50s0-0-85-100: var(--dt-colors-border-primary-accent, #454cc9);
+  --_z2r50s1-0-85-100: var(--dt-colors-border-primary-default, #ccd3f3);
+  --_z2r50s2-0-85-100: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+._z2r50s8-0-85-100 {
+  --_z2r50s0-0-85-100: var(--dt-colors-border-success-accent, #2c6360);
+  --_z2r50s1-0-85-100: var(--dt-colors-border-success-default, #cad6d7);
+  --_z2r50s2-0-85-100: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+._z2r50s9-0-85-100 {
+  --_z2r50s0-0-85-100: var(--dt-colors-border-warning-accent, #805100);
+  --_z2r50s1-0-85-100: var(--dt-colors-border-warning-default, #f4e5d5);
+  --_z2r50s2-0-85-100: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+._z2r50sa-0-85-100 {
+  --_z2r50s0-0-85-100: var(--dt-colors-border-critical-accent, #b80031);
+  --_z2r50s1-0-85-100: var(--dt-colors-border-critical-default, #f1cdcf);
+  --_z2r50s2-0-85-100: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+._z2r50sb-0-85-100:focus-within {
   outline: none;
-  :focus-visible {
-    outline: none;
-  }
 }
-.z2r50sd:focus-within {
+._z2r50sc-0-85-100:focus-within {
   border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--z2r50s0);
-  background-color: var(--z2r50s2);
-}
-.z2r50se:focus-within {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--z2r50s1);
-}
-.z2r50sf {
-  --z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
-  --z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
-  --z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
-}
-.z2r50sg {
-  --z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
-  --z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
-  --z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
-}
-.z2r50sh {
-  --z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
-  --z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
-  --z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
-}
-.z2r50si {
-  --z2r50s0: var(--dt-colors-border-warning-accent, #805100);
-  --z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
-  --z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
-}
-.z2r50sj {
-  --z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
-  --z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
-  --z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
-}
-.z2r50sk {
-  --z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
-  --z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
-  --z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-0-85-100);
+  background-color: var(--_z2r50s2-0-85-100);
+}
+._z2r50sd-0-85-100:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-0-85-100), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-0-85-100);
+}
+._z2r50se-0-85-100 {
+  --_z2r50s0-0-85-100: var(--dt-colors-border-neutral-accent, #545587);
+  --_z2r50s1-0-85-100: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --_z2r50s2-0-85-100: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+._z2r50sf-0-85-100 {
+  --_z2r50s0-0-85-100: var(--dt-colors-border-primary-accent, #454cc9);
+  --_z2r50s1-0-85-100: var(--dt-colors-border-primary-default, #ccd3f3);
+  --_z2r50s2-0-85-100: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+._z2r50sg-0-85-100 {
+  --_z2r50s0-0-85-100: var(--dt-colors-border-success-accent, #2c6360);
+  --_z2r50s1-0-85-100: var(--dt-colors-border-success-default, #cad6d7);
+  --_z2r50s2-0-85-100: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+._z2r50sh-0-85-100 {
+  --_z2r50s0-0-85-100: var(--dt-colors-border-warning-accent, #805100);
+  --_z2r50s1-0-85-100: var(--dt-colors-border-warning-default, #f4e5d5);
+  --_z2r50s2-0-85-100: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+._z2r50si-0-85-100 {
+  --_z2r50s0-0-85-100: var(--dt-colors-border-critical-accent, #b80031);
+  --_z2r50s1-0-85-100: var(--dt-colors-border-critical-default, #f1cdcf);
+  --_z2r50s2-0-85-100: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
 }

package/core/styles/focusRing.sty.d.ts

@@ -39,11 +39,6 @@ export declare const focusRingCSS: import("@vanilla-extract/recipes").RuntimeFn<
                 [x: string]: string;
             };
         };
-        onAccent: {
-            vars: {
-                [x: string]: string;
-            };
-        };
     };
 }>;
 export declare const focusRingFocusWithinCSS: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -87,10 +82,5 @@ export declare const focusRingFocusWithinCSS: import("@vanilla-extract/recipes")
                 [x: string]: string;
             };
         };
-        onAccent: {
-            vars: {
-                [x: string]: string;
-            };
-        };
     };
 }>;

package/core/styles/focusRing.sty.js

@@ -23,5 +23,5 @@ __export(focusRing_css_exports, {
 module.exports = __toCommonJS(focusRing_css_exports);
 var import_focusRing_css_ts_vanilla = require("./focusRing.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "z2r50s3", variantClassNames: { minimal: { true: "z2r50s4", false: "z2r50s5" }, variant: { neutral: "z2r50s6", primary: "z2r50s7", success: "z2r50s8", warning: "z2r50s9", critical: "z2r50sa", onAccent: "z2r50sb" } }, defaultVariants: {}, compoundVariants: [] });
-var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "z2r50sc", variantClassNames: { minimal: { true: "z2r50sd", false: "z2r50se" }, variant: { neutral: "z2r50sf", primary: "z2r50sg", success: "z2r50sh", warning: "z2r50si", critical: "z2r50sj", onAccent: "z2r50sk" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-0-85-100", variantClassNames: { minimal: { true: "_z2r50s4-0-85-100", false: "_z2r50s5-0-85-100" }, variant: { neutral: "_z2r50s6-0-85-100", primary: "_z2r50s7-0-85-100", success: "_z2r50s8-0-85-100", warning: "_z2r50s9-0-85-100", critical: "_z2r50sa-0-85-100" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-0-85-100", variantClassNames: { minimal: { true: "_z2r50sc-0-85-100", false: "_z2r50sd-0-85-100" }, variant: { neutral: "_z2r50se-0-85-100", primary: "_z2r50sf-0-85-100", success: "_z2r50sg-0-85-100", warning: "_z2r50sh-0-85-100", critical: "_z2r50si-0-85-100" } }, defaultVariants: {}, compoundVariants: [] });

package/core/styles/useFocusRing.d.ts

@@ -1,9 +1,7 @@
 import { FocusEvent } from 'react';
 export type Modality = 'keyboard' | 'pointer' | 'touch' | 'unknown';
 /** @internal */
-export declare const variants: readonly ["neutral", "primary", "success", "warning", "critical", "onAccent"];
-/** @internal */
-export type VariantType = (typeof variants)[number];
+export type VariantType = 'neutral' | 'primary' | 'success' | 'warning' | 'critical';
 /** @internal */
 export type UseFocusRingProps = {
     /**

package/core/styles/useFocusRing.js

@@ -17,21 +17,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useFocusRing_exports = {};
 __export(useFocusRing_exports, {
-  useFocusRing: () => useFocusRing,
-  variants: () => variants
+  useFocusRing: () => useFocusRing
 });
 module.exports = __toCommonJS(useFocusRing_exports);
 var import_react = require("react");
 var import_focusRing_css = require("./focusRing.sty.js");
 var import__ = require("../index.js");
-const variants = [
-  "neutral",
-  "primary",
-  "success",
-  "warning",
-  "critical",
-  "onAccent"
-];
 function useFocusRing(props = {}) {
   const {
     variant = "neutral",

package/core/types/role-variant.d.ts

@@ -1,10 +1,12 @@
 /**
  * Defines role / color variants
  * @public
+ * @deprecated Will be removed.
  */
 export declare const roleVariants: readonly ["neutral", "primary", "success", "warning", "critical", "onAccent"];
 /**
  * Defines the types of role variants
  * @public
+ * @deprecated Will be removed. You can use 'neutral' | 'primary' | 'success' | 'warning' | 'critical' instead.
  */
 export type RoleVariantType = (typeof roleVariants)[number];

package/core/utils/colorUtils.css

@@ -1,80 +1,80 @@
-.k096v44 {
-  --k096v40: var(--dt-colors-text-critical-default, #b80031);
-  --k096v41: var(--dt-colors-icon-critical-default, #b80031);
-  --k096v42: var(--dt-colors-border-critical-default, #f1cdcf);
+._k096v44-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-critical-default, #b80031);
+  --_k096v41-0-85-100: var(--dt-colors-icon-critical-default, #b80031);
+  --_k096v42-0-85-100: var(--dt-colors-border-critical-default, #f1cdcf);
 }
-.k096v45 {
-  --k096v40: var(--dt-colors-text-neutral-default, #2b2a58);
-  --k096v41: var(--dt-colors-icon-neutral-default, #2b2a58);
-  --k096v42: var(--dt-colors-border-neutral-default, #d2d3e1);
+._k096v45-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-neutral-default, #2b2a58);
+  --_k096v41-0-85-100: var(--dt-colors-icon-neutral-default, #2b2a58);
+  --_k096v42-0-85-100: var(--dt-colors-border-neutral-default, #d2d3e1);
 }
-.k096v46 {
-  --k096v40: var(--dt-colors-text-primary-default, #454cc9);
-  --k096v41: var(--dt-colors-icon-primary-default, #454cc9);
-  --k096v42: var(--dt-colors-border-primary-default, #ccd3f3);
+._k096v46-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-primary-default, #454cc9);
+  --_k096v41-0-85-100: var(--dt-colors-icon-primary-default, #454cc9);
+  --_k096v42-0-85-100: var(--dt-colors-border-primary-default, #ccd3f3);
 }
-.k096v47 {
-  --k096v40: var(--dt-colors-text-success-default, #2c6360);
-  --k096v41: var(--dt-colors-icon-success-default, #2c6360);
-  --k096v42: var(--dt-colors-border-success-default, #cad6d7);
+._k096v47-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-success-default, #2c6360);
+  --_k096v41-0-85-100: var(--dt-colors-icon-success-default, #2c6360);
+  --_k096v42-0-85-100: var(--dt-colors-border-success-default, #cad6d7);
 }
-.k096v48 {
-  --k096v40: var(--dt-colors-text-warning-default, #805100);
-  --k096v41: var(--dt-colors-icon-warning-default, #805100);
-  --k096v42: var(--dt-colors-border-warning-default, #f4e5d5);
+._k096v48-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-warning-default, #805100);
+  --_k096v41-0-85-100: var(--dt-colors-icon-warning-default, #805100);
+  --_k096v42-0-85-100: var(--dt-colors-border-warning-default, #f4e5d5);
 }
-.k096v49 {
-  --k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --k096v42: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+._k096v49-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_k096v41-0-85-100: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --_k096v42-0-85-100: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
 }
-.k096v4e {
-  --k096v40: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
-  --k096v41: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
-  --k096v42: var(--dt-colors-border-primary-accent, #454cc9);
+._k096v4e-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --_k096v41-0-85-100: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --_k096v42-0-85-100: var(--dt-colors-border-primary-accent, #454cc9);
 }
-.k096v4f {
-  --k096v40: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
-  --k096v41: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
-  --k096v42: var(--dt-colors-border-success-accent, #2c6360);
+._k096v4f-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --_k096v41-0-85-100: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --_k096v42-0-85-100: var(--dt-colors-border-success-accent, #2c6360);
 }
-.k096v4g {
-  --k096v40: var(--dt-colors-text-warning-on-accent-default, #272025);
-  --k096v41: var(--dt-colors-icon-warning-on-accent-default, #272025);
-  --k096v42: var(--dt-colors-border-warning-accent, #805100);
+._k096v4g-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-warning-on-accent-default, #272025);
+  --_k096v41-0-85-100: var(--dt-colors-icon-warning-on-accent-default, #272025);
+  --_k096v42-0-85-100: var(--dt-colors-border-warning-accent, #805100);
 }
-.k096v4h {
-  --k096v40: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --k096v41: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
-  --k096v42: var(--dt-colors-border-critical-accent, #b80031);
+._k096v4h-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_k096v41-0-85-100: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --_k096v42-0-85-100: var(--dt-colors-border-critical-accent, #b80031);
 }
-.k096v4i {
-  --k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --k096v42: var(--dt-colors-border-neutral-accent, #545587);
+._k096v4i-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_k096v41-0-85-100: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --_k096v42-0-85-100: var(--dt-colors-border-neutral-accent, #545587);
 }
-.k096v4j {
-  --k096v40: var(--dt-colors-text-primary-disabled, #54558780);
-  --k096v41: var(--dt-colors-icon-primary-disabled, #54558780);
-  --k096v42: var(--dt-colors-border-primary-disabled, #d2d3e180);
+._k096v4j-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-primary-disabled, #54558780);
+  --_k096v41-0-85-100: var(--dt-colors-icon-primary-disabled, #54558780);
+  --_k096v42-0-85-100: var(--dt-colors-border-primary-disabled, #d2d3e180);
 }
-.k096v4k {
-  --k096v40: var(--dt-colors-text-success-disabled, #54558780);
-  --k096v41: var(--dt-colors-icon-success-disabled, #54558780);
-  --k096v42: var(--dt-colors-border-success-disabled, #d2d3e180);
+._k096v4k-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-success-disabled, #54558780);
+  --_k096v41-0-85-100: var(--dt-colors-icon-success-disabled, #54558780);
+  --_k096v42-0-85-100: var(--dt-colors-border-success-disabled, #d2d3e180);
 }
-.k096v4l {
-  --k096v40: var(--dt-colors-text-warning-disabled, #54558780);
-  --k096v41: var(--dt-colors-icon-warning-disabled, #54558780);
-  --k096v42: var(--dt-colors-border-warning-disabled, #d2d3e180);
+._k096v4l-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-warning-disabled, #54558780);
+  --_k096v41-0-85-100: var(--dt-colors-icon-warning-disabled, #54558780);
+  --_k096v42-0-85-100: var(--dt-colors-border-warning-disabled, #d2d3e180);
 }
-.k096v4m {
-  --k096v40: var(--dt-colors-text-critical-disabled, #54558780);
-  --k096v41: var(--dt-colors-icon-critical-disabled, #54558780);
-  --k096v42: var(--dt-colors-border-critical-disabled, #d2d3e180);
+._k096v4m-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-critical-disabled, #54558780);
+  --_k096v41-0-85-100: var(--dt-colors-icon-critical-disabled, #54558780);
+  --_k096v42-0-85-100: var(--dt-colors-border-critical-disabled, #d2d3e180);
 }
-.k096v4n {
-  --k096v40: var(--dt-colors-text-neutral-disabled, #54558780);
-  --k096v41: var(--dt-colors-icon-neutral-disabled, #54558780);
-  --k096v42: var(--dt-colors-border-neutral-disabled, #d2d3e180);
+._k096v4n-0-85-100 {
+  --_k096v40-0-85-100: var(--dt-colors-text-neutral-disabled, #54558780);
+  --_k096v41-0-85-100: var(--dt-colors-icon-neutral-disabled, #54558780);
+  --_k096v42-0-85-100: var(--dt-colors-border-neutral-disabled, #d2d3e180);
 }

package/core/utils/colorUtils.sty.js

@@ -23,5 +23,5 @@ __export(colorUtils_css_exports, {
 module.exports = __toCommonJS(colorUtils_css_exports);
 var import_colorUtils_css_ts_vanilla = require("./colorUtils.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "k096v43", variantClassNames: { color: { critical: "k096v44", neutral: "k096v45", primary: "k096v46", success: "k096v47", warning: "k096v48", onAccent: "k096v49" }, variant: { "default": "k096v4a", accent: "k096v4b" }, disabled: { true: "k096v4c", false: "k096v4d" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "k096v4e"], [{ color: "success", variant: "accent" }, "k096v4f"], [{ color: "warning", variant: "accent" }, "k096v4g"], [{ color: "critical", variant: "accent" }, "k096v4h"], [{ color: "neutral", variant: "accent" }, "k096v4i"], [{ color: "primary", disabled: true }, "k096v4j"], [{ color: "success", disabled: true }, "k096v4k"], [{ color: "warning", disabled: true }, "k096v4l"], [{ color: "critical", disabled: true }, "k096v4m"], [{ color: "neutral", disabled: true }, "k096v4n"]] });
-var colorUtilsVars = { text: "var(--k096v40)", icon: "var(--k096v41)", borderColor: "var(--k096v42)" };
+var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-0-85-100", variantClassNames: { color: { critical: "_k096v44-0-85-100", neutral: "_k096v45-0-85-100", primary: "_k096v46-0-85-100", success: "_k096v47-0-85-100", warning: "_k096v48-0-85-100", onAccent: "_k096v49-0-85-100" }, variant: { "default": "_k096v4a-0-85-100", accent: "_k096v4b-0-85-100" }, disabled: { true: "_k096v4c-0-85-100", false: "_k096v4d-0-85-100" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4e-0-85-100"], [{ color: "success", variant: "accent" }, "_k096v4f-0-85-100"], [{ color: "warning", variant: "accent" }, "_k096v4g-0-85-100"], [{ color: "critical", variant: "accent" }, "_k096v4h-0-85-100"], [{ color: "neutral", variant: "accent" }, "_k096v4i-0-85-100"], [{ color: "primary", disabled: true }, "_k096v4j-0-85-100"], [{ color: "success", disabled: true }, "_k096v4k-0-85-100"], [{ color: "warning", disabled: true }, "_k096v4l-0-85-100"], [{ color: "critical", disabled: true }, "_k096v4m-0-85-100"], [{ color: "neutral", disabled: true }, "_k096v4n-0-85-100"]] });
+var colorUtilsVars = { text: "var(--_k096v40-0-85-100)", icon: "var(--_k096v41-0-85-100)", borderColor: "var(--_k096v42-0-85-100)" };

package/core/utils/isBrowser.js

@@ -21,5 +21,7 @@ __export(isBrowser_exports, {
 });
 module.exports = __toCommonJS(isBrowser_exports);
 const isBrowser = (() => {
-  return !!(typeof window !== "undefined" && window.document && window.document.createElement);
+  return !!(typeof window !== "undefined" && window.document && /* eslint-disable-next-line deprecation/deprecation --
+  one overload of createElement is deprecated, apparently our plugin does not get that */
+  window.document.createElement);
 })();

package/esm/buttons/button/Button.css

@@ -1,12 +1,12 @@
-._10kgnsa0 {
+._10kgnsa0-0-85-100 {
   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);
-  color: var(--bx32h0);
+  background: var(--_bx32h3-0-85-100);
+  color: var(--_bx32h0-0-85-100);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -23,46 +23,46 @@
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
 }
-._10kgnsa0:hover {
+._10kgnsa0-0-85-100:hover {
   transition-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
   transition-duration: var(--dt-animations-fade-in-duration-base, 250ms);
 }
-._10kgnsa1 {
+._10kgnsa1-0-85-100 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2 {
+._10kgnsa2-0-85-100 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3 {
+._10kgnsa3-0-85-100 {
   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 {
+._10kgnsa4-0-85-100 {
   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 {
+._10kgnsa5-0-85-100 {
   cursor: not-allowed;
 }
-._10kgnsa6 {
+._10kgnsa6-0-85-100 {
   cursor: not-allowed;
-  background: var(--bx32h2);
+  background: var(--_bx32h2-0-85-100);
 }
-._10kgnsa7 {
+._10kgnsa7-0-85-100 {
   width: 100%;
 }
-._10kgnsa8 {
+._10kgnsa8-0-85-100 {
   width: fit-content;
 }
-._10kgnsa9 {
+._10kgnsa9-0-85-100 {
   position: absolute;
   top: 0;
   left: 0;
@@ -74,19 +74,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3 ._10kgnsaa:not(:has(svg:only-child)) {
+._10kgnsa3-0-85-100 ._10kgnsaa-0-85-100:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4 ._10kgnsaa:not(:has(svg:only-child)) {
+._10kgnsa4-0-85-100 ._10kgnsaa-0-85-100:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsac {
+._10kgnsac-0-85-100 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/esm/buttons/button/Button.sty.js

@@ -2,10 +2,10 @@ import "../../styles/ellipsis.css";
 import "../../styles/field.css";
 import "./Button.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var buttonCSS = _7a468({ defaultClassName: "_10kgnsa0", variantClassNames: { textAlign: { start: "_10kgnsa1", center: "_10kgnsa2" }, size: { condensed: "_10kgnsa3", "default": "_10kgnsa4" }, disabled: { true: "_10kgnsa5" }, readOnly: { true: "_10kgnsa6" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var buttonLabelCSS = _7a468({ defaultClassName: "_10kgnsaa", variantClassNames: { textual: { true: "oqqp1n0", false: "_10kgnsac" } }, defaultVariants: {}, compoundVariants: [] });
-var buttonLoadingCSS = "_10kgnsa9";
-var buttonWidthsCSS = { full: "_10kgnsa7", content: "_10kgnsa8" };
+var buttonCSS = _7a468({ defaultClassName: "_10kgnsa0-0-85-100", variantClassNames: { textAlign: { start: "_10kgnsa1-0-85-100", center: "_10kgnsa2-0-85-100" }, size: { condensed: "_10kgnsa3-0-85-100", "default": "_10kgnsa4-0-85-100" }, disabled: { true: "_10kgnsa5-0-85-100" }, readOnly: { true: "_10kgnsa6-0-85-100" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var buttonLabelCSS = _7a468({ defaultClassName: "_10kgnsaa-0-85-100", variantClassNames: { textual: { true: "_oqqp1n0-0-85-100", false: "_10kgnsac-0-85-100" } }, defaultVariants: {}, compoundVariants: [] });
+var buttonLoadingCSS = "_10kgnsa9-0-85-100";
+var buttonWidthsCSS = { full: "_10kgnsa7-0-85-100", content: "_10kgnsa8-0-85-100" };
 export {
   buttonCSS,
   buttonLabelCSS,

package/esm/buttons/button/Button.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/button/Button.css.ts"],
-  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var buttonCSS = _7a468({defaultClassName:'_10kgnsa0',variantClassNames:{textAlign:{start:'_10kgnsa1',center:'_10kgnsa2'},size:{condensed:'_10kgnsa3','default':'_10kgnsa4'},disabled:{true:'_10kgnsa5'},readOnly:{true:'_10kgnsa6'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var buttonLabelCSS = _7a468({defaultClassName:'_10kgnsaa',variantClassNames:{textual:{true:'oqqp1n0',false:'_10kgnsac'}},defaultVariants:{},compoundVariants:[]});\nexport var buttonLoadingCSS = '_10kgnsa9';\nexport var buttonWidthsCSS = {full:'_10kgnsa7',content:'_10kgnsa8'};"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,aAAY,mBAAkB,EAAC,WAAU,EAAC,OAAM,aAAY,QAAO,YAAW,GAAE,MAAK,EAAC,WAAU,aAAY,WAAU,YAAW,GAAE,UAAS,EAAC,MAAK,YAAW,GAAE,UAAS,EAAC,MAAK,YAAW,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,UAAS,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5T,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,aAAY,mBAAkB,EAAC,SAAQ,EAAC,MAAK,WAAU,OAAM,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAChK,IAAI,mBAAmB;AACvB,IAAI,kBAAkB,EAAC,MAAK,aAAY,SAAQ,YAAW;",
+  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var buttonCSS = _7a468({defaultClassName:'_10kgnsa0-0-85-100',variantClassNames:{textAlign:{start:'_10kgnsa1-0-85-100',center:'_10kgnsa2-0-85-100'},size:{condensed:'_10kgnsa3-0-85-100','default':'_10kgnsa4-0-85-100'},disabled:{true:'_10kgnsa5-0-85-100'},readOnly:{true:'_10kgnsa6-0-85-100'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var buttonLabelCSS = _7a468({defaultClassName:'_10kgnsaa-0-85-100',variantClassNames:{textual:{true:'_oqqp1n0-0-85-100',false:'_10kgnsac-0-85-100'}},defaultVariants:{},compoundVariants:[]});\nexport var buttonLoadingCSS = '_10kgnsa9-0-85-100';\nexport var buttonWidthsCSS = {full:'_10kgnsa7-0-85-100',content:'_10kgnsa8-0-85-100'};"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,sBAAqB,mBAAkB,EAAC,WAAU,EAAC,OAAM,sBAAqB,QAAO,qBAAoB,GAAE,MAAK,EAAC,WAAU,sBAAqB,WAAU,qBAAoB,GAAE,UAAS,EAAC,MAAK,qBAAoB,GAAE,UAAS,EAAC,MAAK,qBAAoB,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,UAAS,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC3X,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,sBAAqB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,qBAAoB,OAAM,qBAAoB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5L,IAAI,mBAAmB;AACvB,IAAI,kBAAkB,EAAC,MAAK,sBAAqB,SAAQ,qBAAoB;",
   "names": []
 }

package/esm/buttons/intent-button/IntentButton.js

@@ -20,8 +20,11 @@ const IntentButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     "data-dtrum-allow": dataDtrumAllow,
     ...remainingProps
   } = props;
-  const label = children?.trim();
-  const ariaLabel = ariaLabelProp || label || intl.formatMessage({
+  let label = children;
+  if (typeof label === "string") {
+    label = label.trim();
+  }
+  const ariaLabel = ariaLabelProp || intl.formatMessage({
     description: "Intent button open label",
     defaultMessage: "Open with",
     id: "JQOGuaGgqJObmSY1"

package/esm/buttons/intent-button/IntentButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/intent-button/IntentButton.tsx"],
-  "sourcesContent": ["import React, { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { OpenWithIcon } from '@dynatrace/strato-icons';\nimport { type IntentPayload } from '@dynatrace-sdk/navigation';\n\nimport { useIntentButton } from './useIntentButton.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { Button, type ButtonOwnProps } from '../button/Button.js';\n\n//#region Typings\n/**\n * Accepted properties for the Button.\n * @public\n */\nexport interface IntentButtonPropsBase\n  extends Omit<ButtonOwnProps, 'loading' | 'type'>,\n    AriaLabelingProps,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** Intent payload passed between apps.*/\n  payload: IntentPayload;\n\n  /** Intended for setting a custom button label. When nothing is set, no label is shown. */\n  children?: string;\n}\n\n/**\n * Merge own props with ID props.\n * Props for recommending an app to receive the intent. Either both properties or none of them needs to be specified.\n * @public\n */\nexport type IntentButtonProps = IntentButtonPropsBase &\n  (\n    | {\n        appId?: never;\n        intentId?: never;\n      }\n    | {\n        /**\n         * ID of the app that will be launched to handle the intent.\n         */\n        appId: string;\n\n        /**\n         * ID of the action that will be passed to the app.\n         */\n        intentId: string;\n      }\n  );\n\n//#endregion\n\n/**\n * The `IntentButton` is a dedicated button component for sending\n * {@link https://developer.dynatrace.com/develop/intents/ | intents}.\n * It takes care of opening the intent dialog. An `IntentButton` only works\n * in the AppShell context.\n * @public\n */\nexport const IntentButton = /* @__PURE__ */ forwardRef<\n  HTMLAnchorElement,\n  IntentButtonProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n  const {\n    children,\n    payload,\n    appId,\n    intentId,\n    disabled,\n    onClick: onClickProp,\n    'aria-label': ariaLabelProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: IntentButtonProps = props;\n\n  const label = children?.trim();\n\n  const ariaLabel =\n    ariaLabelProp ||\n    label ||\n    intl.formatMessage({\n      description: 'Intent button open label',\n      defaultMessage: 'Open with',\n      id: 'JQOGuaGgqJObmSY1',\n    });\n\n  const intentButtonProps = useIntentButton(\n    payload,\n    appId,\n    intentId,\n    onClickProp,\n  );\n\n  // polymorph it back to a button in case it's disabled.\n  // Keep the button focusable if disabled for better screen reader support.\n  if (disabled) {\n    return (\n      <Button\n        disabled\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        aria-label={ariaLabel}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {label}\n        <Button.Suffix>\n          <OpenWithIcon />\n        </Button.Suffix>\n      </Button>\n    );\n  }\n\n  return (\n    <Button\n      as=\"a\"\n      ref={forwardedRef}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-label={ariaLabel ?? label}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...remainingProps}\n      {...intentButtonProps}\n    >\n      {label}\n      <Button.Suffix>\n        <OpenWithIcon />\n      </Button.Suffix>\n    </Button>\n  );\n});\n\n(IntentButton as typeof IntentButton & { displayName: string }).displayName =\n  'IntentButton';\n"],
-  "mappings": "AAAA,OAAO,SAAS,kBAAkB;AAClC,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,uBAAuB;AAMhC,SAAS,cAAmC;AAsDrC,MAAM,eAA+B,2BAG1C,CAAC,OAAO,iBAAiB;AACzB,QAAM,OAAO,QAAQ;AACrB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAuB;AAEvB,QAAM,QAAQ,UAAU,KAAK;AAE7B,QAAM,YACJ,iBACA,SACA,KAAK,cAAc;AAAA,IACjB,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN,CAAC;AAEH,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAIA,MAAI,UAAU;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAQ;AAAA,QACR,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,cAAY;AAAA,QACZ,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEH;AAAA,MACD,oCAAC,OAAO,QAAP,MACC,oCAAC,kBAAa,CAChB;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,KAAK;AAAA,MACL,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,MACX,OAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA;AAAA,IAEH;AAAA,IACD,oCAAC,OAAO,QAAP,MACC,oCAAC,kBAAa,CAChB;AAAA,EACF;AAEJ,CAAC;AAEA,aAA+D,cAC9D;",
+  "sourcesContent": ["import React, { forwardRef, type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { OpenWithIcon } from '@dynatrace/strato-icons';\nimport { type IntentPayload } from '@dynatrace-sdk/navigation';\n\nimport { useIntentButton } from './useIntentButton.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { Button, type ButtonOwnProps } from '../button/Button.js';\n\n//#region Typings\n/**\n * Accepted properties for the Button.\n * @public\n */\nexport interface IntentButtonPropsBase\n  extends Omit<ButtonOwnProps, 'loading' | 'type'>,\n    AriaLabelingProps,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** Intent payload passed between apps.*/\n  payload: IntentPayload;\n\n  /** Intended for setting a custom button label. When nothing is set, no label is shown. */\n  children?: ReactNode;\n}\n\n/**\n * Merge own props with ID props.\n * Props for recommending an app to receive the intent. Either both properties or none of them needs to be specified.\n * @public\n */\nexport type IntentButtonProps = IntentButtonPropsBase &\n  (\n    | {\n        appId?: never;\n        intentId?: never;\n      }\n    | {\n        /**\n         * ID of the app that will be launched to handle the intent.\n         */\n        appId: string;\n\n        /**\n         * ID of the action that will be passed to the app.\n         */\n        intentId: string;\n      }\n  );\n\n//#endregion\n\n/**\n * The `IntentButton` is a dedicated button component for sending\n * {@link https://developer.dynatrace.com/develop/intents/ | intents}.\n * It takes care of opening the intent dialog. An `IntentButton` only works\n * in the AppShell context.\n * @public\n */\nexport const IntentButton = /* @__PURE__ */ forwardRef<\n  HTMLAnchorElement,\n  IntentButtonProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n  const {\n    children,\n    payload,\n    appId,\n    intentId,\n    disabled,\n    onClick: onClickProp,\n    'aria-label': ariaLabelProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: IntentButtonProps = props;\n\n  let label = children;\n  if (typeof label === 'string') {\n    label = label.trim();\n  }\n\n  const ariaLabel =\n    ariaLabelProp ||\n    intl.formatMessage({\n      description: 'Intent button open label',\n      defaultMessage: 'Open with',\n      id: 'JQOGuaGgqJObmSY1',\n    });\n\n  const intentButtonProps = useIntentButton(\n    payload,\n    appId,\n    intentId,\n    onClickProp,\n  );\n\n  // polymorph it back to a button in case it's disabled.\n  // Keep the button focusable if disabled for better screen reader support.\n  if (disabled) {\n    return (\n      <Button\n        disabled\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        aria-label={ariaLabel}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {label}\n        <Button.Suffix>\n          <OpenWithIcon />\n        </Button.Suffix>\n      </Button>\n    );\n  }\n\n  return (\n    <Button\n      as=\"a\"\n      ref={forwardedRef}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-label={ariaLabel ?? label}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...remainingProps}\n      {...intentButtonProps}\n    >\n      {label}\n      <Button.Suffix>\n        <OpenWithIcon />\n      </Button.Suffix>\n    </Button>\n  );\n});\n\n(IntentButton as typeof IntentButton & { displayName: string }).displayName =\n  'IntentButton';\n"],
+  "mappings": "AAAA,OAAO,SAAS,kBAAkC;AAClD,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,uBAAuB;AAMhC,SAAS,cAAmC;AAsDrC,MAAM,eAA+B,2BAG1C,CAAC,OAAO,iBAAiB;AACzB,QAAM,OAAO,QAAQ;AACrB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAuB;AAEvB,MAAI,QAAQ;AACZ,MAAI,OAAO,UAAU,UAAU;AAC7B,YAAQ,MAAM,KAAK;AAAA,EACrB;AAEA,QAAM,YACJ,iBACA,KAAK,cAAc;AAAA,IACjB,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN,CAAC;AAEH,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAIA,MAAI,UAAU;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAQ;AAAA,QACR,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,cAAY;AAAA,QACZ,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEH;AAAA,MACD,oCAAC,OAAO,QAAP,MACC,oCAAC,kBAAa,CAChB;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,KAAK;AAAA,MACL,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,MACX,OAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA;AAAA,IAEH;AAAA,IACD,oCAAC,OAAO,QAAP,MACC,oCAAC,kBAAa,CAChB;AAAA,EACF;AAEJ,CAAC;AAEA,aAA+D,cAC9D;",
   "names": []
 }

package/esm/buttons/intent-button/useIntentButton.js

@@ -13,7 +13,10 @@ function useIntentButton(payload, appId, intentId, onClickProp) {
     [appId, intentId, payload]
   );
   const triggerIntent = useCallback(() => {
-    appId && intentId ? sendIntent(payload, appId, intentId) : sendIntent(payload);
+    appId && intentId ? sendIntent(payload, {
+      recommendedAppId: appId,
+      recommendedIntentId: intentId
+    }) : sendIntent(payload);
   }, [appId, intentId, payload]);
   const onClick = useCallback(
     (event) => {