@dynatrace/strato-components 3.11.1 → 3.11.2

package/esm/forms/text-area/TextArea.css

@@ -1,5 +1,5 @@
-._44rwcl2-3-11-1 {
-  --_44rwcl0-3-11-1: 0px;
+._44rwcl2-3-11-2 {
+  --_44rwcl0-3-11-2: 0px;
   display: inline-flex;
   width: 100%;
   height: 100%;
@@ -11,28 +11,28 @@
   overflow: hidden;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._44rwcl2-3-11-1:focus-within {
-  --_44rwcl0-3-11-1: -2px;
+._44rwcl2-3-11-2:focus-within {
+  --_44rwcl0-3-11-2: -2px;
 }
-._44rwcl2-3-11-1::-webkit-resizer {
+._44rwcl2-3-11-2::-webkit-resizer {
   display: none;
 }
-._44rwcl3-3-11-1 {
+._44rwcl3-3-11-2 {
   width: fit-content;
 }
-._44rwcl4-3-11-1 {
+._44rwcl4-3-11-2 {
   resize: none;
 }
-._44rwcl5-3-11-1 {
+._44rwcl5-3-11-2 {
   resize: both;
 }
-._44rwcl6-3-11-1 {
+._44rwcl6-3-11-2 {
   resize: horizontal;
 }
-._44rwcl7-3-11-1 {
+._44rwcl7-3-11-2 {
   resize: vertical;
 }
-._44rwcl8-3-11-1 {
+._44rwcl8-3-11-2 {
   width: 100%;
   height: 100%;
   appearance: none;
@@ -51,138 +51,138 @@
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  box-shadow: var(--_44rwcl1-3-11-1);
+  box-shadow: var(--_44rwcl1-3-11-2);
 }
-._44rwcl8-3-11-1::placeholder {
+._44rwcl8-3-11-2::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._44rwcl8-3-11-1:hover {
+._44rwcl8-3-11-2:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._44rwcl8-3-11-1:active {
+._44rwcl8-3-11-2:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-11-1 ._44rwcl8-3-11-1 {
-  --_44rwcl1-3-11-1: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-11-2 ._44rwcl8-3-11-2 {
+  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-11-1 ._44rwcl8-3-11-1:hover {
-  --_44rwcl1-3-11-1: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
+._1jgl8s50-3-11-2 ._44rwcl8-3-11-2:hover {
+  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-11-1 ._44rwcl8-3-11-1:active {
-  --_44rwcl1-3-11-1: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
+._1jgl8s50-3-11-2 ._44rwcl8-3-11-2:active {
+  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcl9-3-11-1 {
+._44rwcl9-3-11-2 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcl9-3-11-1::placeholder {
+._44rwcl9-3-11-2::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcl9-3-11-1:hover {
+._44rwcl9-3-11-2:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl9-3-11-1:active {
+._44rwcl9-3-11-2:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-11-1 ._44rwcl9-3-11-1, ._1jgl8s50-3-11-1 ._44rwcl9-3-11-1:hover, ._1jgl8s50-3-11-1 ._44rwcl9-3-11-1:active {
-  --_44rwcl1-3-11-1: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-2 ._44rwcl9-3-11-2, ._1jgl8s50-3-11-2 ._44rwcl9-3-11-2:hover, ._1jgl8s50-3-11-2 ._44rwcl9-3-11-2:active {
+  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcla-3-11-1 {
+._44rwcla-3-11-2 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: default;
 }
-._44rwcla-3-11-1:hover {
+._44rwcla-3-11-2:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcla-3-11-1:active {
+._44rwcla-3-11-2:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-11-1 ._44rwcla-3-11-1, ._1jgl8s50-3-11-1 ._44rwcla-3-11-1:hover, ._1jgl8s50-3-11-1 ._44rwcla-3-11-1:active {
-  --_44rwcl1-3-11-1: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-2 ._44rwcla-3-11-2, ._1jgl8s50-3-11-2 ._44rwcla-3-11-2:hover, ._1jgl8s50-3-11-2 ._44rwcla-3-11-2:active {
+  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwclb-3-11-1 {
+._44rwclb-3-11-2 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-11-1::placeholder {
+._44rwclb-3-11-2::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-11-1:hover {
+._44rwclb-3-11-2:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._44rwclb-3-11-1:active {
+._44rwclb-3-11-2:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1jgl8s50-3-11-1 ._44rwclb-3-11-1 {
-  --_44rwcl1-3-11-1: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-11-2 ._44rwclb-3-11-2 {
+  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-11-1 ._44rwclb-3-11-1:hover {
-  --_44rwcl1-3-11-1: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
+._1jgl8s50-3-11-2 ._44rwclb-3-11-2:hover {
+  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-11-1 ._44rwclb-3-11-1:active {
-  --_44rwcl1-3-11-1: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
+._1jgl8s50-3-11-2 ._44rwclb-3-11-2:active {
+  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwclc-3-11-1 {
+._44rwclc-3-11-2 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwclc-3-11-1::placeholder {
+._44rwclc-3-11-2::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwclc-3-11-1:hover {
+._44rwclc-3-11-2:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwclc-3-11-1:active {
+._44rwclc-3-11-2:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-11-1 ._44rwclc-3-11-1, ._1jgl8s50-3-11-1 ._44rwclc-3-11-1:hover, ._1jgl8s50-3-11-1 ._44rwclc-3-11-1:active {
-  --_44rwcl1-3-11-1: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-2 ._44rwclc-3-11-2, ._1jgl8s50-3-11-2 ._44rwclc-3-11-2:hover, ._1jgl8s50-3-11-2 ._44rwclc-3-11-2:active {
+  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcld-3-11-1 {
+._44rwcld-3-11-2 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-11-1:hover {
+._44rwcld-3-11-2:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-11-1:active {
+._44rwcld-3-11-2:active {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-11-1 ._44rwcld-3-11-1, ._1jgl8s50-3-11-1 ._44rwcld-3-11-1:hover, ._1jgl8s50-3-11-1 ._44rwcld-3-11-1:active {
-  --_44rwcl1-3-11-1: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-2 ._44rwcld-3-11-2, ._1jgl8s50-3-11-2 ._44rwcld-3-11-2:hover, ._1jgl8s50-3-11-2 ._44rwcld-3-11-2:active {
+  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcle-3-11-1 {
+._44rwcle-3-11-2 {
   position: absolute;
   pointer-events: none;
   width: 16px;
   height: 16px;
   bottom: 0;
   right: 0;
-  transform: translateX(var(--_44rwcl0-3-11-1)) translateY(var(--_44rwcl0-3-11-1));
+  transform: translateX(var(--_44rwcl0-3-11-2)) translateY(var(--_44rwcl0-3-11-2));
   transition: transform var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._44rwclf-3-11-1 {
+._44rwclf-3-11-2 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclg-3-11-1 {
+._44rwclg-3-11-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcli-3-11-1 {
+._44rwcli-3-11-2 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
 @supports (-moz-appearance:none) {
-  ._44rwcle-3-11-1 {
+  ._44rwcle-3-11-2 {
     display: none;
   }
 }

package/esm/forms/text-area/TextArea.sty.js

@@ -1,9 +1,9 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./TextArea.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var container = _7a468({ defaultClassName: "_44rwcl2-3-11-1", variantClassNames: { contentWidth: { true: "_44rwcl3-3-11-1" }, resize: { none: "_44rwcl4-3-11-1", both: "_44rwcl5-3-11-1", horizontal: "_44rwcl6-3-11-1", vertical: "_44rwcl7-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeIcon = _7a468({ defaultClassName: "_44rwcle-3-11-1", variantClassNames: { error: { true: "_44rwclf-3-11-1" }, disabled: { true: "_44rwclg-3-11-1" }, readOnly: { true: "_44rwclh-3-11-1" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-11-1"]] });
-var textArea = _7a468({ defaultClassName: "_44rwcl8-3-11-1", variantClassNames: { disabled: { true: "_44rwcl9-3-11-1" }, readOnly: { true: "_44rwcla-3-11-1" }, error: { true: "_44rwclb-3-11-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-11-1"], [{ readOnly: true, error: true }, "_44rwcld-3-11-1"]] });
+var container = _7a468({ defaultClassName: "_44rwcl2-3-11-2", variantClassNames: { contentWidth: { true: "_44rwcl3-3-11-2" }, resize: { none: "_44rwcl4-3-11-2", both: "_44rwcl5-3-11-2", horizontal: "_44rwcl6-3-11-2", vertical: "_44rwcl7-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeIcon = _7a468({ defaultClassName: "_44rwcle-3-11-2", variantClassNames: { error: { true: "_44rwclf-3-11-2" }, disabled: { true: "_44rwclg-3-11-2" }, readOnly: { true: "_44rwclh-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-11-2"]] });
+var textArea = _7a468({ defaultClassName: "_44rwcl8-3-11-2", variantClassNames: { disabled: { true: "_44rwcl9-3-11-2" }, readOnly: { true: "_44rwcla-3-11-2" }, error: { true: "_44rwclb-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-11-2"], [{ readOnly: true, error: true }, "_44rwcld-3-11-2"]] });
 export {
   container,
   resizeIcon,

package/esm/forms/text-area/TextArea.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/text-area/TextArea.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './TextArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'_44rwcl2-3-11-1',variantClassNames:{contentWidth:{true:'_44rwcl3-3-11-1'},resize:{none:'_44rwcl4-3-11-1',both:'_44rwcl5-3-11-1',horizontal:'_44rwcl6-3-11-1',vertical:'_44rwcl7-3-11-1'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeIcon = _7a468({defaultClassName:'_44rwcle-3-11-1',variantClassNames:{error:{true:'_44rwclf-3-11-1'},disabled:{true:'_44rwclg-3-11-1'},readOnly:{true:'_44rwclh-3-11-1'}},defaultVariants:{},compoundVariants:[[{error:true,disabled:true},'_44rwcli-3-11-1']]});\nexport var textArea = _7a468({defaultClassName:'_44rwcl8-3-11-1',variantClassNames:{disabled:{true:'_44rwcl9-3-11-1'},readOnly:{true:'_44rwcla-3-11-1'},error:{true:'_44rwclb-3-11-1'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_44rwclc-3-11-1'],[{readOnly:true,error:true},'_44rwcld-3-11-1']]});"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './TextArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'_44rwcl2-3-11-2',variantClassNames:{contentWidth:{true:'_44rwcl3-3-11-2'},resize:{none:'_44rwcl4-3-11-2',both:'_44rwcl5-3-11-2',horizontal:'_44rwcl6-3-11-2',vertical:'_44rwcl7-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeIcon = _7a468({defaultClassName:'_44rwcle-3-11-2',variantClassNames:{error:{true:'_44rwclf-3-11-2'},disabled:{true:'_44rwclg-3-11-2'},readOnly:{true:'_44rwclh-3-11-2'}},defaultVariants:{},compoundVariants:[[{error:true,disabled:true},'_44rwcli-3-11-2']]});\nexport var textArea = _7a468({defaultClassName:'_44rwcl8-3-11-2',variantClassNames:{disabled:{true:'_44rwcl9-3-11-2'},readOnly:{true:'_44rwcla-3-11-2'},error:{true:'_44rwclb-3-11-2'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_44rwclc-3-11-2'],[{readOnly:true,error:true},'_44rwcld-3-11-2']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,GAAE,QAAO,EAAC,MAAK,mBAAkB,MAAK,mBAAkB,YAAW,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC3Q,IAAI,aAAa,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,MAAK,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACxQ,IAAI,WAAW,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,OAAM,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/toggle-button-group/styles.css

@@ -1,14 +1,14 @@
-._w5wkeh1-3-11-1 {
-  --_w5wkeh0-3-11-1: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
+._w5wkeh1-3-11-2 {
+  --_w5wkeh0-3-11-2: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
 }
-._w5wkeh5-3-11-1:not(._w5wkeh4-3-11-1) {
+._w5wkeh5-3-11-2:not(._w5wkeh4-3-11-2) {
   cursor: not-allowed;
 }
-._w5wkeh6-3-11-1 {
+._w5wkeh6-3-11-2 {
   visibility: hidden;
   height: 0;
 }
-._w5wkeh7-3-11-1 {
+._w5wkeh7-3-11-2 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
   display: inline-flex;
@@ -23,40 +23,40 @@
   overflow: hidden;
   flex-wrap: nowrap;
 }
-._1jgl8s50-3-11-1 ._w5wkeh7-3-11-1 {
+._1jgl8s50-3-11-2 ._w5wkeh7-3-11-2 {
   background-color: var(--dt-colors-background-container-neutral-emphasized, #ebecf0);
 }
-._w5wkeh7-3-11-1._w5wkeh2-3-11-1 {
+._w5wkeh7-3-11-2._w5wkeh2-3-11-2 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh7-3-11-1._w5wkeh5-3-11-1 {
+._w5wkeh7-3-11-2._w5wkeh5-3-11-2 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._w5wkeh7-3-11-1._w5wkeh4-3-11-1 {
+._w5wkeh7-3-11-2._w5wkeh4-3-11-2 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._w5wkeh7-3-11-1._w5wkeh4-3-11-1._w5wkeh2-3-11-1 {
+._w5wkeh7-3-11-2._w5wkeh4-3-11-2._w5wkeh2-3-11-2 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh8-3-11-1 {
+._w5wkeh8-3-11-2 {
   margin-top: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._w5wkeh2-3-11-1:not(._w5wkeh5-3-11-1) ._w5wkeh8-3-11-1 {
+._w5wkeh2-3-11-2:not(._w5wkeh5-3-11-2) ._w5wkeh8-3-11-2 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._w5wkeh9-3-11-1 {
+._w5wkeh9-3-11-2 {
   width: 100%;
 }
-._w5wkeha-3-11-1 {
+._w5wkeha-3-11-2 {
   width: fit-content;
 }
-._w5wkehb-3-11-1 {
+._w5wkehb-3-11-2 {
   min-width: 0;
   width: 100%;
   overflow-x: auto;
@@ -64,36 +64,36 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._w5wkehb-3-11-1::-webkit-scrollbar {
+._w5wkehb-3-11-2::-webkit-scrollbar {
   display: none;
 }
-._w5wkehc-3-11-1 {
+._w5wkehc-3-11-2 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehd-3-11-1 {
+._w5wkehd-3-11-2 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehe-3-11-1 {
+._w5wkehe-3-11-2 {
   -webkit-mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehf-3-11-1 {
+._w5wkehf-3-11-2 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);
 }
-._1jgl8s50-3-11-1 ._w5wkehf-3-11-1:hover:not(._w5wkeh2-3-11-1 ._w5wkehf-3-11-1) {
-  --_bx32h3-3-11-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1jgl8s50-3-11-2 ._w5wkehf-3-11-2:hover:not(._w5wkeh2-3-11-2 ._w5wkehf-3-11-2) {
+  --_bx32h3-3-11-2: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-11-1 ._w5wkehf-3-11-1:active:not(._w5wkeh2-3-11-1 ._w5wkehf-3-11-1) {
-  --_bx32h3-3-11-1: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1jgl8s50-3-11-2 ._w5wkehf-3-11-2:active:not(._w5wkeh2-3-11-2 ._w5wkehf-3-11-2) {
+  --_bx32h3-3-11-2: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._w5wkehg-3-11-1 {
+._w5wkehg-3-11-2 {
   justify-content: center;
   min-width: fit-content;
   width: 100%;
@@ -109,93 +109,93 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   cursor: pointer;
   scroll-margin: var(--dt-spacings-size-64, 64px);
-  box-shadow: var(--_w5wkeh0-3-11-1);
+  box-shadow: var(--_w5wkeh0-3-11-2);
 }
-._w5wkehg-3-11-1:hover {
+._w5wkehg-3-11-2:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._w5wkehg-3-11-1:active {
+._w5wkehg-3-11-2:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-11-1 ._w5wkehg-3-11-1 {
+._1jgl8s50-3-11-2 ._w5wkehg-3-11-2 {
   margin: 0;
   padding: 5px var(--dt-spacings-size-6, 6px);
   border-radius: 5px;
 }
-._w5wkeh2-3-11-1 ._w5wkehg-3-11-1 {
+._w5wkeh2-3-11-2 ._w5wkehg-3-11-2 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh2-3-11-1 ._w5wkehg-3-11-1:hover {
+._w5wkeh2-3-11-2 ._w5wkehg-3-11-2:hover {
   background-color: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
 }
-._w5wkeh2-3-11-1 ._w5wkehg-3-11-1:active {
+._w5wkeh2-3-11-2 ._w5wkehg-3-11-2:active {
   background-color: var(--dt-colors-background-field-critical-default-active, #f5cac9);
 }
-._w5wkehg-3-11-1._w5wkeh3-3-11-1 {
+._w5wkehg-3-11-2._w5wkeh3-3-11-2 {
   cursor: not-allowed;
   background-color: transparent;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._w5wkehg-3-11-1._w5wkeh3-3-11-1:hover {
+._w5wkehg-3-11-2._w5wkeh3-3-11-2:hover {
   background-color: transparent;
 }
-._w5wkehg-3-11-1._w5wkeh3-3-11-1:active {
+._w5wkehg-3-11-2._w5wkeh3-3-11-2:active {
   background-color: transparent;
 }
-._w5wkeh2-3-11-1 ._w5wkehg-3-11-1._w5wkeh3-3-11-1 {
+._w5wkeh2-3-11-2 ._w5wkehg-3-11-2._w5wkeh3-3-11-2 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._w5wkehg-3-11-1._w5wkeh4-3-11-1 {
+._w5wkehg-3-11-2._w5wkeh4-3-11-2 {
   cursor: default;
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._w5wkehg-3-11-1._w5wkeh4-3-11-1:hover {
+._w5wkehg-3-11-2._w5wkeh4-3-11-2:hover {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._w5wkehg-3-11-1._w5wkeh4-3-11-1:active {
+._w5wkehg-3-11-2._w5wkeh4-3-11-2:active {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._w5wkeh2-3-11-1 ._w5wkehg-3-11-1._w5wkeh4-3-11-1 {
+._w5wkeh2-3-11-2 ._w5wkehg-3-11-2._w5wkeh4-3-11-2 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkehg-3-11-1._w5wkeh1-3-11-1 {
+._w5wkehg-3-11-2._w5wkeh1-3-11-2 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-11-1._w5wkeh1-3-11-1:hover {
+._w5wkehg-3-11-2._w5wkeh1-3-11-2:hover {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-11-1._w5wkeh1-3-11-1:active {
+._w5wkehg-3-11-2._w5wkeh1-3-11-2:active {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-11-1._w5wkeh4-3-11-1._w5wkeh1-3-11-1:not(._w5wkeh2-3-11-1 ._w5wkehg-3-11-1) {
+._w5wkehg-3-11-2._w5wkeh4-3-11-2._w5wkeh1-3-11-2:not(._w5wkeh2-3-11-2 ._w5wkehg-3-11-2) {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1jgl8s50-3-11-1 ._w5wkehg-3-11-1._w5wkeh1-3-11-1 {
-  --_w5wkeh0-3-11-1: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-11-2 ._w5wkehg-3-11-2._w5wkeh1-3-11-2 {
+  --_w5wkeh0-3-11-2: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
 }
-._1jgl8s50-3-11-1 ._w5wkehg-3-11-1._w5wkeh1-3-11-1._w5wkeh3-3-11-1 {
-  --_w5wkeh0-3-11-1: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-2 ._w5wkehg-3-11-2._w5wkeh1-3-11-2._w5wkeh3-3-11-2 {
+  --_w5wkeh0-3-11-2: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1jgl8s50-3-11-1 ._w5wkeh2-3-11-1 ._w5wkehg-3-11-1._w5wkeh1-3-11-1 {
-  --_w5wkeh0-3-11-1: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-11-2 ._w5wkeh2-3-11-2 ._w5wkehg-3-11-2._w5wkeh1-3-11-2 {
+  --_w5wkeh0-3-11-2: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
 }
-._1jgl8s50-3-11-1 ._w5wkeh2-3-11-1 ._w5wkehg-3-11-1._w5wkeh1-3-11-1._w5wkeh3-3-11-1 {
-  --_w5wkeh0-3-11-1: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-2 ._w5wkeh2-3-11-2 ._w5wkehg-3-11-2._w5wkeh1-3-11-2._w5wkeh3-3-11-2 {
+  --_w5wkeh0-3-11-2: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._w5wkehg-3-11-1:first-child {
+._w5wkehg-3-11-2:first-child {
   margin-left: 1px;
 }
-._w5wkehg-3-11-1:last-child {
+._w5wkehg-3-11-2:last-child {
   margin-right: 1px;
 }
-._1jgl8s50-3-11-1 ._w5wkehg-3-11-1:first-child {
+._1jgl8s50-3-11-2 ._w5wkehg-3-11-2:first-child {
   margin-left: 0;
 }
-._1jgl8s50-3-11-1 ._w5wkehg-3-11-1:last-child {
+._1jgl8s50-3-11-2 ._w5wkehg-3-11-2:last-child {
   margin-right: 0;
 }
-._w5wkehh-3-11-1 {
+._w5wkehh-3-11-2 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   overflow: hidden;
@@ -203,7 +203,7 @@
   white-space: nowrap;
   max-width: 100%;
 }
-._w5wkehi-3-11-1 {
+._w5wkehi-3-11-2 {
   min-width: 0;
   align-items: center;
 }

package/esm/forms/toggle-button-group/styles.sty.js

@@ -1,21 +1,21 @@
 import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./styles.css";
-var checked = "_w5wkeh1-3-11-1";
-var container = "_w5wkeh7-3-11-1";
-var containerWidths = { full: "_w5wkeh9-3-11-1", content: "_w5wkeha-3-11-1" };
-var disabled = "_w5wkeh3-3-11-1";
-var disabledGroup = "_w5wkeh5-3-11-1";
-var divider = "_w5wkeh8-3-11-1";
-var error = "_w5wkeh2-3-11-1";
-var hidden = "_w5wkeh6-3-11-1";
-var item = "_w5wkehg-3-11-1";
-var readOnly = "_w5wkeh4-3-11-1";
-var scrollButton = "_w5wkehf-3-11-1";
-var scrollContainer = "_w5wkehb-3-11-1";
-var scrollVariants = { both: "_w5wkehc-3-11-1", left: "_w5wkehd-3-11-1", right: "_w5wkehe-3-11-1" };
-var text = "_w5wkehh-3-11-1";
-var textContainer = "_w5wkehi-3-11-1";
+var checked = "_w5wkeh1-3-11-2";
+var container = "_w5wkeh7-3-11-2";
+var containerWidths = { full: "_w5wkeh9-3-11-2", content: "_w5wkeha-3-11-2" };
+var disabled = "_w5wkeh3-3-11-2";
+var disabledGroup = "_w5wkeh5-3-11-2";
+var divider = "_w5wkeh8-3-11-2";
+var error = "_w5wkeh2-3-11-2";
+var hidden = "_w5wkeh6-3-11-2";
+var item = "_w5wkehg-3-11-2";
+var readOnly = "_w5wkeh4-3-11-2";
+var scrollButton = "_w5wkehf-3-11-2";
+var scrollContainer = "_w5wkehb-3-11-2";
+var scrollVariants = { both: "_w5wkehc-3-11-2", left: "_w5wkehd-3-11-2", right: "_w5wkehe-3-11-2" };
+var text = "_w5wkehh-3-11-2";
+var textContainer = "_w5wkehi-3-11-2";
 export {
   checked,
   container,

package/esm/forms/toggle-button-group/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/toggle-button-group/styles.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh1-3-11-1';\nexport var container = '_w5wkeh7-3-11-1';\nexport var containerWidths = {full:'_w5wkeh9-3-11-1',content:'_w5wkeha-3-11-1'};\nexport var disabled = '_w5wkeh3-3-11-1';\nexport var disabledGroup = '_w5wkeh5-3-11-1';\nexport var divider = '_w5wkeh8-3-11-1';\nexport var error = '_w5wkeh2-3-11-1';\nexport var hidden = '_w5wkeh6-3-11-1';\nexport var item = '_w5wkehg-3-11-1';\nexport var readOnly = '_w5wkeh4-3-11-1';\nexport var scrollButton = '_w5wkehf-3-11-1';\nexport var scrollContainer = '_w5wkehb-3-11-1';\nexport var scrollVariants = {both:'_w5wkehc-3-11-1',left:'_w5wkehd-3-11-1',right:'_w5wkehe-3-11-1'};\nexport var text = '_w5wkehh-3-11-1';\nexport var textContainer = '_w5wkehi-3-11-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nexport var checked = '_w5wkeh1-3-11-2';\nexport var container = '_w5wkeh7-3-11-2';\nexport var containerWidths = {full:'_w5wkeh9-3-11-2',content:'_w5wkeha-3-11-2'};\nexport var disabled = '_w5wkeh3-3-11-2';\nexport var disabledGroup = '_w5wkeh5-3-11-2';\nexport var divider = '_w5wkeh8-3-11-2';\nexport var error = '_w5wkeh2-3-11-2';\nexport var hidden = '_w5wkeh6-3-11-2';\nexport var item = '_w5wkehg-3-11-2';\nexport var readOnly = '_w5wkeh4-3-11-2';\nexport var scrollButton = '_w5wkehf-3-11-2';\nexport var scrollContainer = '_w5wkehb-3-11-2';\nexport var scrollVariants = {both:'_w5wkehc-3-11-2',left:'_w5wkehd-3-11-2',right:'_w5wkehe-3-11-2'};\nexport var text = '_w5wkehh-3-11-2';\nexport var textContainer = '_w5wkehi-3-11-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,YAAY;AAChB,IAAI,kBAAkB,EAAC,MAAK,mBAAkB,SAAQ,kBAAiB;AACvE,IAAI,WAAW;AACf,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,WAAW;AACf,IAAI,eAAe;AACnB,IAAI,kBAAkB;AACtB,IAAI,iBAAiB,EAAC,MAAK,mBAAkB,MAAK,mBAAkB,OAAM,kBAAiB;AAC3F,IAAI,OAAO;AACX,IAAI,gBAAgB;",
   "names": []
 }

package/esm/layouts/app-header/ActionButton.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import {
-  forwardRef
+  forwardRef,
+  isValidElement
 } from "react";
-import { isElement } from "react-is";
 import { Button } from "../../buttons/button/Button.js";
 function isAppHeaderActionButton(node) {
-  return node !== void 0 && node !== null && isElement(node) && node.type === ActionButton;
+  return isValidElement(node) && node.type === ActionButton;
 }
 const ActionButton = forwardRef(
   (props, forwardedRef) => /* @__PURE__ */ jsx(Button, { ref: forwardedRef, ...props })

package/esm/layouts/app-header/ActionButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/ActionButton.tsx"],
-  "sourcesContent": ["import {\n  ElementType,\n  forwardRef,\n  type ReactElement,\n  type MouseEventHandler,\n  type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { Button } from '../../buttons/button/Button.js';\nimport type { DataTestId } from '../../core/types/data-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';\n\n/* props of below interface are intentionally unused, to ease the migration to the new AppHeader guideline */\n/**\n * @public\n */\nexport interface AppHeaderActionButtonOwnProps\n  extends StylingProps,\n    DataTestId,\n    WithChildren {\n  /**\n   * Whether the action button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether or not the ActionButton label is shown in the expanded header.\n   * If set to false, the label is hidden and only shows in the collapsed menu.\n   * If set to false and the prefixIcon is undefined, the label will be shown regardless.\n   * @defaultValue true\n   */\n  showLabel?: boolean;\n  /** If set to true, the item will not be moved into the menu in case of insufficient space. */\n  pin?: boolean;\n  /** Icon shown before the text of the ActionButton. */\n  prefixIcon?: ReactElement;\n  /** Whether or not the ActionButton is selected. */\n  isSelected?: boolean;\n  /** Influences the spacings. Condensed is more compact. */\n  density?: 'default' | 'condensed';\n  /** Handler that is called when the ActionButton is interacted with. */\n  onClick?: MouseEventHandler;\n}\n\n/**\n * @public\n */\nexport type AppHeaderActionButtonProps<E extends ElementType> =\n  PolymorphicComponentProps<E, AppHeaderActionButtonOwnProps>;\n\n/**\n * Allows to check if a ReactNode is a AppHeaderActionButton element.\n * @internal\n */\nexport function isAppHeaderActionButton<E extends ElementType>(\n  node: ReactNode,\n): node is ReactElement<AppHeaderActionButtonProps<E>> {\n  return (\n    node !== undefined &&\n    node !== null &&\n    isElement(node) &&\n    node.type === ActionButton\n  );\n}\n\n/**\n * An action button used in `AppHeader.ActionItems`.\n * @public\n */\nexport const ActionButton: <E extends ElementType = 'button'>(\n  props: AppHeaderActionButtonProps<E>,\n) => ReactElement | null = forwardRef(\n  <E extends ElementType>(\n    props: AppHeaderActionButtonProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => <Button ref={forwardedRef} {...props} />,\n);\n(ActionButton as typeof ActionButton & { displayName: string }).displayName =\n  'AppHeader.Button';\n"],
-  "mappings": "AA6EO;AA7EP;AAAA,EAEE;AAAA,OAIK;AACP,SAAS,iBAAiB;AAE1B,SAAS,cAAc;AA+ChB,SAAS,wBACd,MACqD;AACrD,SACE,SAAS,UACT,SAAS,QACT,UAAU,IAAI,KACd,KAAK,SAAS;AAElB;AAMO,MAAM,eAEc;AAAA,EACzB,CACE,OACA,iBACG,oBAAC,UAAO,KAAK,cAAe,GAAG,OAAO;AAC7C;AACC,aAA+D,cAC9D;",
+  "sourcesContent": ["import {\n  ElementType,\n  forwardRef,\n  isValidElement,\n  type ReactElement,\n  type MouseEventHandler,\n  type ReactNode,\n} from 'react';\n\nimport { Button } from '../../buttons/button/Button.js';\nimport type { DataTestId } from '../../core/types/data-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';\n\n/* props of below interface are intentionally unused, to ease the migration to the new AppHeader guideline */\n/**\n * @public\n */\nexport interface AppHeaderActionButtonOwnProps\n  extends StylingProps, DataTestId, WithChildren {\n  /**\n   * Whether the action button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether or not the ActionButton label is shown in the expanded header.\n   * If set to false, the label is hidden and only shows in the collapsed menu.\n   * If set to false and the prefixIcon is undefined, the label will be shown regardless.\n   * @defaultValue true\n   */\n  showLabel?: boolean;\n  /** If set to true, the item will not be moved into the menu in case of insufficient space. */\n  pin?: boolean;\n  /** Icon shown before the text of the ActionButton. */\n  prefixIcon?: ReactElement;\n  /** Whether or not the ActionButton is selected. */\n  isSelected?: boolean;\n  /** Influences the spacings. Condensed is more compact. */\n  density?: 'default' | 'condensed';\n  /** Handler that is called when the ActionButton is interacted with. */\n  onClick?: MouseEventHandler;\n}\n\n/**\n * @public\n */\nexport type AppHeaderActionButtonProps<E extends ElementType> =\n  PolymorphicComponentProps<E, AppHeaderActionButtonOwnProps>;\n\n/**\n * Allows to check if a ReactNode is a AppHeaderActionButton element.\n * @internal\n */\nexport function isAppHeaderActionButton<E extends ElementType>(\n  node: ReactNode,\n): node is ReactElement<AppHeaderActionButtonProps<E>> {\n  return isValidElement(node) && node.type === ActionButton;\n}\n\n/**\n * An action button used in `AppHeader.ActionItems`.\n * @public\n */\nexport const ActionButton: <E extends ElementType = 'button'>(\n  props: AppHeaderActionButtonProps<E>,\n) => ReactElement | null = forwardRef(\n  <E extends ElementType>(\n    props: AppHeaderActionButtonProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => <Button ref={forwardedRef} {...props} />,\n);\n(ActionButton as typeof ActionButton & { displayName: string }).displayName =\n  'AppHeader.Button';\n"],
+  "mappings": "AAsEO;AAtEP;AAAA,EAEE;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,cAAc;AA6ChB,SAAS,wBACd,MACqD;AACrD,SAAO,eAAe,IAAI,KAAK,KAAK,SAAS;AAC/C;AAMO,MAAM,eAEc;AAAA,EACzB,CACE,OACA,iBACG,oBAAC,UAAO,KAAK,cAAe,GAAG,OAAO;AAC7C;AACC,aAA+D,cAC9D;",
   "names": []
 }

package/esm/layouts/app-header/ActionItems.js

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 import {
   forwardRef,
+  isValidElement,
   useMemo,
   useRef,
   Children,
@@ -9,7 +10,6 @@ import {
   cloneElement
 } from "react";
 import { useIntl } from "react-intl";
-import { isElement } from "react-is";
 import { DotMenuIcon } from "@dynatrace/strato-icons";
 import {
   ActionButton,
@@ -29,7 +29,7 @@ function getSlots(children) {
   const custom = [];
   let groupCounter = 0;
   for (const child of Children.toArray(children)) {
-    if (!isElement(child)) {
+    if (!isValidElement(child)) {
       continue;
     }
     if (isSlot(child, ActionItemGroup)) {