@dynatrace/strato-components 3.8.0 → 3.9.0

package/filters/filter-field/FilterField.css

@@ -1,94 +1,94 @@
-._96tj13b-3-8-0 {
+._96tj13b-3-9-0 {
   max-height: 80px;
 }
-._96tj13c-3-8-0 {
-  --_96tj130-3-8-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_96tj131-3-8-0: var(--dt-colors-syntax-variable, #2754b5);
-  --_96tj132-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj133-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj134-3-8-0: var(--dt-colors-syntax-variable, #2754b5);
-  --_96tj135-3-8-0: var(--dt-colors-syntax-operators, #8136a9);
-  --_96tj136-3-8-0: var(--dt-colors-syntax-operators, #8136a9);
-  --_96tj137-3-8-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) transparent;
-  --_96tj138-3-8-0: transparent;
-  --_96tj13a-3-8-0: transparent;
-  --_96tj139-3-8-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
+._96tj13c-3-9-0 {
+  --_96tj130-3-9-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_96tj131-3-9-0: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj132-3-9-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj133-3-9-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj134-3-9-0: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj135-3-9-0: var(--dt-colors-syntax-operators, #8136a9);
+  --_96tj136-3-9-0: var(--dt-colors-syntax-operators, #8136a9);
+  --_96tj137-3-9-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) transparent;
+  --_96tj138-3-9-0: transparent;
+  --_96tj13a-3-9-0: transparent;
+  --_96tj139-3-9-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
   position: relative;
   width: 100%;
   max-height: inherit;
 }
-._96tj13c-3-8-0::selection {
+._96tj13c-3-9-0::selection {
   background: #fff;
 }
-._96tj13d-3-8-0 {
-  --_96tj137-3-8-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-accent, #bb0731);
-  --_96tj138-3-8-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_96tj13a-3-8-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_96tj139-3-8-0: var(--dt-colors-icon-critical-default, #bb0731);
+._96tj13d-3-9-0 {
+  --_96tj137-3-9-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-accent, #bb0731);
+  --_96tj138-3-9-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_96tj13a-3-9-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_96tj139-3-9-0: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._96tj13e-3-8-0 {
+._96tj13e-3-9-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._96tj13f-3-8-0 {
+._96tj13f-3-9-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
   position: absolute;
   left: var(--dt-spacings-size-6, 6px);
   top: var(--dt-spacings-size-6, 6px);
   z-index: 1;
 }
-._96tj13g-3-8-0 {
+._96tj13g-3-9-0 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._96tj13h-3-8-0 {
+._96tj13h-3-9-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
 }
-._96tj13i-3-8-0 {
+._96tj13i-3-9-0 {
   padding: var(--dt-spacings-size-2, 2px) calc(var(--dt-spacings-size-4, 4px) - var(--dt-borders-width-default, 1px)) 3px;
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   transition: borderRadius var(--dt-timings-base-default, 300ms);
   line-height: 24px;
 }
-._96tj13j-3-8-0 {
-  background-color: var(--_96tj130-3-8-0);
+._96tj13j-3-9-0 {
+  background-color: var(--_96tj130-3-9-0);
   border-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._96tj13j-3-8-0:hover {
+._96tj13j-3-9-0:hover {
   position: relative;
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0 0 var(--dt-borders-radius-field-subdued, 3px);
 }
-._96tj13k-3-8-0:hover {
+._96tj13k-3-9-0:hover {
   position: relative;
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0 0 var(--dt-borders-radius-field-subdued, 3px);
   border-right-width: 0;
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._96tj13l-3-8-0 {
+._96tj13l-3-9-0 {
   line-height: 24px;
 }
-._96tj13m-3-8-0 {
-  --_96tj131-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj134-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj132-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj135-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj133-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+._96tj13m-3-9-0 {
+  --_96tj131-3-9-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj134-3-9-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj132-3-9-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj135-3-9-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj133-3-9-0: var(--dt-colors-text-neutral-default, #2f2f4f);
   line-height: 24px;
 }
-._96tj13n-3-8-0 {
+._96tj13n-3-9-0 {
   cursor: not-allowed;
 }
-._96tj13o-3-8-0 {
-  --_96tj130-3-8-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_96tj131-3-8-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj134-3-8-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj132-3-8-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj135-3-8-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj137-3-8-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-disabled, #dadbe480);
-  --_96tj138-3-8-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-  --_96tj133-3-8-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj13a-3-8-0: var(--dt-colors-border-critical-disabled, #dadbe480);
-}
-._96tj13q-3-8-0 {
+._96tj13o-3-9-0 {
+  --_96tj130-3-9-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_96tj131-3-9-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj134-3-9-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj132-3-9-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj135-3-9-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj137-3-9-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-disabled, #dadbe480);
+  --_96tj138-3-9-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+  --_96tj133-3-9-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj13a-3-9-0: var(--dt-colors-border-critical-disabled, #dadbe480);
+}
+._96tj13q-3-9-0 {
   position: relative;
   opacity: 0;
   font-size: var(--dt-typography-text-base-default-size, 14px);
@@ -97,11 +97,11 @@
   user-select: none;
   transition: none;
 }
-._96tj13q-3-8-0:hover {
+._96tj13q-3-9-0:hover {
   opacity: 1;
   pointer-events: initial;
 }
-._96tj13r-3-8-0 {
+._96tj13r-3-9-0 {
   position: absolute;
   top: calc((var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-default, 1px)) * -1);
   left: var(--dt-spacings-size-4, 4px);
@@ -114,15 +114,15 @@
   border-radius: 0 var(--dt-borders-radius-field-subdued, 3px) var(--dt-borders-radius-field-subdued, 3px) 0;
   line-height: 0;
   cursor: pointer;
-  border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--_96tj130-3-8-0);
-  background-color: var(--_96tj130-3-8-0);
+  border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--_96tj130-3-9-0);
+  background-color: var(--_96tj130-3-9-0);
   box-shadow: -1px 0px 0px 0px var(--dt-colors-background-surface-default, #fff);
 }
-._96tj13r-3-8-0:hover {
+._96tj13r-3-9-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
   border-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._96tj13r-3-8-0:before {
+._96tj13r-3-9-0:before {
   content: "";
   position: absolute;
   left: calc(var(--dt-borders-width-default, 1px) * -1);
@@ -133,225 +133,225 @@
   border-left: none;
   border-radius: 0 calc(var(--dt-borders-radius-field-subdued, 3px) + 3px) calc(var(--dt-borders-radius-field-subdued, 3px) + 3px) 0;
 }
-._96tj13s-3-8-0 {
+._96tj13s-3-9-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
   box-shadow: none;
 }
-._96tj13s-3-8-0:hover {
+._96tj13s-3-9-0:hover {
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._96tj13t-3-8-0 {
+._96tj13t-3-9-0 {
   color: var(--dt-colors-icon-neutral-default, #2f2f4f);
   pointer-events: none;
 }
-._96tj13c-3-8-0.hideDeleteWhileTyping ._96tj13i-3-8-0:hover {
+._96tj13c-3-9-0.hideDeleteWhileTyping ._96tj13i-3-9-0:hover {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._96tj13c-3-8-0.hideDeleteWhileTyping ._96tj13k-3-8-0:hover {
+._96tj13c-3-9-0.hideDeleteWhileTyping ._96tj13k-3-9-0:hover {
   padding-right: calc(var(--dt-spacings-size-4, 4px) - var(--dt-borders-width-default, 1px));
   border-right-width: var(--dt-borders-width-default, 1px);
 }
-._96tj13c-3-8-0:not(.hideDeleteWhileTyping) ._96tj13j-3-8-0:hover ._96tj13q-3-8-0,
-   ._96tj13c-3-8-0:not(.hideDeleteWhileTyping) ._96tj13k-3-8-0:hover ._96tj13q-3-8-0 {
+._96tj13c-3-9-0:not(.hideDeleteWhileTyping) ._96tj13j-3-9-0:hover ._96tj13q-3-9-0,
+   ._96tj13c-3-9-0:not(.hideDeleteWhileTyping) ._96tj13k-3-9-0:hover ._96tj13q-3-9-0 {
   opacity: 1;
   pointer-events: initial;
   transition: opacity var(--dt-timings-base-default, 300ms);
 }
-._96tj13c-3-8-0:not(.hideDeleteWhileTyping) ._96tj13j-3-8-0:has(img + ._96tj13q-3-8-0:hover),
-   ._96tj13c-3-8-0:not(.hideDeleteWhileTyping) ._96tj13k-3-8-0:has(img + ._96tj13q-3-8-0:hover) {
+._96tj13c-3-9-0:not(.hideDeleteWhileTyping) ._96tj13j-3-9-0:has(img + ._96tj13q-3-9-0:hover),
+   ._96tj13c-3-9-0:not(.hideDeleteWhileTyping) ._96tj13k-3-9-0:has(img + ._96tj13q-3-9-0:hover) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0 0 var(--dt-borders-radius-field-subdued, 3px);
-  background-color: var(--_96tj130-3-8-0);
+  background-color: var(--_96tj130-3-9-0);
 }
-._96tj13u-3-8-0 {
-  --_96tj131-3-8-0: var(--dt-colors-syntax-variable, #2754b5);
-  --_96tj132-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj134-3-8-0: var(--dt-colors-syntax-variable, #2754b5);
-  --_96tj135-3-8-0: var(--dt-colors-syntax-operators, #8136a9);
+._96tj13u-3-9-0 {
+  --_96tj131-3-9-0: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj132-3-9-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj134-3-9-0: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj135-3-9-0: var(--dt-colors-syntax-operators, #8136a9);
 }
-._96tj13v-3-8-0 {
-  color: var(--_96tj131-3-8-0);
+._96tj13v-3-9-0 {
+  color: var(--_96tj131-3-9-0);
 }
-._96tj13w-3-8-0 {
-  color: var(--_96tj132-3-8-0);
+._96tj13w-3-9-0 {
+  color: var(--_96tj132-3-9-0);
 }
-._96tj13x-3-8-0 {
-  color: var(--_96tj134-3-8-0);
+._96tj13x-3-9-0 {
+  color: var(--_96tj134-3-9-0);
 }
-._96tj13y-3-8-0 {
-  color: var(--_96tj135-3-8-0);
+._96tj13y-3-9-0 {
+  color: var(--_96tj135-3-9-0);
 }
-._96tj13z-3-8-0 ._96tj13y-3-8-0 {
-  --_96tj135-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+._96tj13z-3-9-0 ._96tj13y-3-9-0 {
+  --_96tj135-3-9-0: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._96tj1310-3-8-0 {
-  color: var(--_96tj136-3-8-0);
+._96tj1310-3-9-0 {
+  color: var(--_96tj136-3-9-0);
 }
-._96tj1311-3-8-0 {
+._96tj1311-3-9-0 {
   position: relative;
   z-index: 0;
 }
-._96tj1311-3-8-0::before {
+._96tj1311-3-9-0::before {
   content: " ";
   position: absolute;
   bottom: calc(var(--dt-spacings-size-4, 4px) * -1);
   width: 100%;
   line-height: 20px;
-  background-color: var(--_96tj138-3-8-0);
+  background-color: var(--_96tj138-3-9-0);
   z-index: -1;
 }
-._96tj1311-3-8-0::after {
+._96tj1311-3-9-0::after {
   content: " ";
   position: absolute;
   bottom: calc(var(--dt-spacings-size-4, 4px) * -1);
   left: 0;
   width: 100%;
-  border-bottom: var(--_96tj137-3-8-0);
+  border-bottom: var(--_96tj137-3-9-0);
   pointer-events: none;
 }
-._96tj1312-3-8-0 {
+._96tj1312-3-9-0 {
   position: relative;
 }
-._96tj1312-3-8-0::after {
+._96tj1312-3-9-0::after {
   content: "";
   position: absolute;
   bottom: calc(var(--dt-spacings-size-4, 4px) * -1);
-  border: var(--dt-spacings-size-4, 4px) solid var(--_96tj13a-3-8-0);
+  border: var(--dt-spacings-size-4, 4px) solid var(--_96tj13a-3-9-0);
   border-left: var(--dt-spacings-size-4, 4px) solid transparent;
   border-right: var(--dt-spacings-size-4, 4px) solid transparent;
   border-top: none;
   z-index: 250;
 }
-._96tj1313-3-8-0::after {
+._96tj1313-3-9-0::after {
   left: 0;
   transform: translateX(-50%);
 }
-._96tj1314-3-8-0::after {
+._96tj1314-3-9-0::after {
   right: 0;
   transform: translateX(50%);
 }
-._96tj13c-3-8-0 .cm-editor {
+._96tj13c-3-9-0 .cm-editor {
   padding: 0;
   padding-inline: var(--dt-spacings-size-28, 28px) var(--dt-spacings-size-32, 32px);
   min-height: 32px;
   max-height: inherit;
   justify-content: center;
 }
-._96tj13c-3-8-0:has([data-suggestion-pin="true"]) .cm-editor {
+._96tj13c-3-9-0:has([data-suggestion-pin="true"]) .cm-editor {
   padding-inline: var(--dt-spacings-size-28, 28px) var(--dt-spacings-size-64, 64px);
 }
-._96tj13p-3-8-0 .cm-editor {
+._96tj13p-3-9-0 .cm-editor {
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
   pointer-events: none;
 }
-._96tj13n-3-8-0 ._96tj13r-3-8-0 {
+._96tj13n-3-9-0 ._96tj13r-3-9-0 {
   display: none;
 }
-._96tj13n-3-8-0 ._96tj13r-3-8-0 ._96tj13s-3-8-0 {
+._96tj13n-3-9-0 ._96tj13r-3-9-0 ._96tj13s-3-9-0 {
   display: none;
 }
-._96tj13n-3-8-0 .cm-cursorLayer {
+._96tj13n-3-9-0 .cm-cursorLayer {
   display: none;
 }
-._96tj13o-3-8-0 .cm-editor {
+._96tj13o-3-9-0 .cm-editor {
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._96tj13c-3-8-0 .cm-editor.cm-focused.cm-focused {
+._96tj13c-3-9-0 .cm-editor.cm-focused.cm-focused {
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-8-0 ._96tj13c-3-8-0 .cm-editor.cm-focused.cm-focused::before {
+._1jgl8s50-3-9-0 ._96tj13c-3-9-0 .cm-editor.cm-focused.cm-focused::before {
   content: none;
 }
-._1jgl8s50-3-8-0 ._96tj13c-3-8-0 .cm-editor.cm-focused.cm-focused {
+._1jgl8s50-3-9-0 ._96tj13c-3-9-0 .cm-editor.cm-focused.cm-focused {
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._96tj13c-3-8-0._96tj13e-3-8-0 .cm-editor.cm-focused.cm-focused {
+._96tj13c-3-9-0._96tj13e-3-9-0 .cm-editor.cm-focused.cm-focused {
   border-color: var(--dt-colors-border-critical-accent, #bb0731);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1jgl8s50-3-8-0 ._96tj13c-3-8-0._96tj13e-3-8-0 .cm-editor.cm-focused.cm-focused {
+._1jgl8s50-3-9-0 ._96tj13c-3-9-0._96tj13e-3-9-0 .cm-editor.cm-focused.cm-focused {
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-critical-accent, #bb0731), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1jgl8s50-3-8-0 ._96tj13c-3-8-0 .cm-editor.cm-editor {
+._1jgl8s50-3-9-0 ._96tj13c-3-9-0 .cm-editor.cm-editor {
   border: none;
 }
-._1jgl8s50-3-8-0 ._96tj13c-3-8-0 .cm-editor {
+._1jgl8s50-3-9-0 ._96tj13c-3-9-0 .cm-editor {
   padding-inline-start: calc(var(--dt-spacings-size-28, 28px) + 1px);
   box-shadow: 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-8-0 ._96tj13c-3-8-0 .cm-editor:hover {
+._1jgl8s50-3-9-0 ._96tj13c-3-9-0 .cm-editor:hover {
   box-shadow: 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-8-0 ._96tj13c-3-8-0 .cm-editor:active {
+._1jgl8s50-3-9-0 ._96tj13c-3-9-0 .cm-editor:active {
   box-shadow: 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-8-0 :is(._96tj13p-3-8-0, ._96tj13n-3-8-0, ._96tj13o-3-8-0) .cm-editor,
-._1jgl8s50-3-8-0 :is(._96tj13p-3-8-0, ._96tj13n-3-8-0, ._96tj13o-3-8-0) .cm-editor:hover,
-._1jgl8s50-3-8-0 :is(._96tj13p-3-8-0, ._96tj13n-3-8-0, ._96tj13o-3-8-0) .cm-editor:active, {
+._1jgl8s50-3-9-0 :is(._96tj13p-3-9-0, ._96tj13n-3-9-0, ._96tj13o-3-9-0) .cm-editor,
+._1jgl8s50-3-9-0 :is(._96tj13p-3-9-0, ._96tj13n-3-9-0, ._96tj13o-3-9-0) .cm-editor:hover,
+._1jgl8s50-3-9-0 :is(._96tj13p-3-9-0, ._96tj13n-3-9-0, ._96tj13o-3-9-0) .cm-editor:active {
   box-shadow: 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-8-0 ._96tj13c-3-8-0._96tj13e-3-8-0 .cm-editor {
+._1jgl8s50-3-9-0 ._96tj13c-3-9-0._96tj13e-3-9-0 .cm-editor {
   box-shadow: 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-8-0 ._96tj13c-3-8-0._96tj13e-3-8-0 .cm-editor:hover {
+._1jgl8s50-3-9-0 ._96tj13c-3-9-0._96tj13e-3-9-0 .cm-editor:hover {
   box-shadow: 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-8-0 ._96tj13c-3-8-0._96tj13e-3-8-0 .cm-editor:active {
+._1jgl8s50-3-9-0 ._96tj13c-3-9-0._96tj13e-3-9-0 .cm-editor:active {
   box-shadow: 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-8-0 ._96tj13e-3-8-0:is(._96tj13p-3-8-0, ._96tj13n-3-8-0, ._96tj13o-3-8-0) .cm-editor,
- ._1jgl8s50-3-8-0 ._96tj13e-3-8-0:is(._96tj13p-3-8-0, ._96tj13n-3-8-0, ._96tj13o-3-8-0) .cm-editor:hover,
- ._1jgl8s50-3-8-0 ._96tj13e-3-8-0:is(._96tj13p-3-8-0, ._96tj13n-3-8-0, ._96tj13o-3-8-0) .cm-editor:active, {
+._1jgl8s50-3-9-0 ._96tj13e-3-9-0:is(._96tj13p-3-9-0, ._96tj13n-3-9-0, ._96tj13o-3-9-0) .cm-editor,
+ ._1jgl8s50-3-9-0 ._96tj13e-3-9-0:is(._96tj13p-3-9-0, ._96tj13n-3-9-0, ._96tj13o-3-9-0) .cm-editor:hover,
+ ._1jgl8s50-3-9-0 ._96tj13e-3-9-0:is(._96tj13p-3-9-0, ._96tj13n-3-9-0, ._96tj13o-3-9-0) .cm-editor:active {
   box-shadow: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._96tj13c-3-8-0 .cm-line.cm-line {
+._96tj13c-3-9-0 .cm-line.cm-line {
   padding-left: 0;
-  color: var(--_96tj133-3-8-0);
+  color: var(--_96tj133-3-9-0);
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
 }
-._96tj13c-3-8-0 .cm-scroller {
+._96tj13c-3-9-0 .cm-scroller {
   display: block !important;
   overflow-x: hidden;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._96tj13c-3-8-0 .cm-cursor {
+._96tj13c-3-9-0 .cm-cursor {
   border-color: var(--dt-colors-text-neutral-default, #2f2f4f);
   margin-left: 0;
 }
-._96tj13c-3-8-0 .cm-selectionLayer {
+._96tj13c-3-9-0 .cm-selectionLayer {
   z-index: unset !important;
   transform: unset !important;
 }
-._96tj13c-3-8-0 .cm-selectionBackground, ._96tj13c-3-8-0 .ͼ2 .cm-selectionBackground {
+._96tj13c-3-9-0 .cm-selectionBackground, ._96tj13c-3-9-0 .ͼ2 .cm-selectionBackground {
   background-image: linear-gradient(var(--dt-colors-background-container-neutral-accent, #5b5c81), var(--dt-colors-background-container-neutral-accent, #5b5c81)) !important;
   mix-blend-mode: difference;
 }
-._96tj13c-3-8-0 .cm-lintRange-error.cm-lintRange-error {
+._96tj13c-3-9-0 .cm-lintRange-error.cm-lintRange-error {
   background-image: none;
 }
-._96tj13c-3-8-0 .cm-lintPoint-error::after {
+._96tj13c-3-9-0 .cm-lintPoint-error::after {
   border: none;
 }
-._96tj13c-3-8-0 .cm-tooltip-autocomplete.cm-tooltip-autocomplete {
+._96tj13c-3-9-0 .cm-tooltip-autocomplete.cm-tooltip-autocomplete {
   left: 0 !important;
   right: 0;
   width: unset;
   max-width: unset;
   transform: translateY(var(--dt-spacings-size-4, 4px));
 }
-._96tj13c-3-8-0 .cm-tooltip-autocomplete.cm-tooltip-autocomplete ul {
+._96tj13c-3-9-0 .cm-tooltip-autocomplete.cm-tooltip-autocomplete ul {
   max-width: unset;
 }
-._96tj13p-3-8-0 .cm-placeholder.cm-placeholder,
- ._96tj13o-3-8-0 .cm-placeholder.cm-placeholder {
+._96tj13p-3-9-0 .cm-placeholder.cm-placeholder,
+ ._96tj13o-3-9-0 .cm-placeholder.cm-placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._96tj13e-3-8-0 .cm-placeholder.cm-placeholder {
+._96tj13e-3-9-0 .cm-placeholder.cm-placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._96tj1315-3-8-0 {
+._96tj1315-3-9-0 {
   position: absolute;
   width: 1px;
   height: 1px;

package/filters/filter-field/FilterField.js

@@ -83,7 +83,6 @@ var import_VisuallyHidden = require("../../core/components/visually-hidden/Visua
 var import_OverlayStacking = require("../../core/contexts/OverlayStacking.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
-var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
 var import_useId = require("../../core/hooks/useId.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_sdk_logger = require("../../core/sdk/sdk-logger.js");
@@ -91,11 +90,9 @@ var import_is_slot = require("../../core/utils/is-slot.js");
 var editorStyles = __toESM(require("../../editors/base-code-editor/BaseCodeEditor.sty.js"));
 var import_FormFieldMessageContextProvider = require("../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js");
 var import_FormFieldMessageBaseItem = require("../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
-var import_useFormFieldMessagesContext = require("../../forms/forms-core/hooks/useFormFieldMessagesContext.js");
+var import_useFormControl = require("../../forms/forms-core/hooks/useFormControl.js");
 var import_useFormFieldValidation = require("../../forms/forms-core/hooks/useFormFieldValidation.js");
-var import_useSyncedFormControlProps = require("../../forms/forms-core/hooks/useSyncedFormControlProps.js");
 var import_formfield_messages_state_reducer = require("../../forms/forms-core/state/formfield-messages-state-reducer.js");
-var import_useInputHint = require("../../forms/hooks/useInputHint.js");
 var import_types = require("../../forms/validation/types.js");
 var import_useCustomMessageEmitter = require("../../forms/validation/useCustomMessageEmitter.js");
 var import_useValidationStateEmitter = require("../../forms/validation/useValidationStateEmitter.js");
@@ -122,6 +119,7 @@ const _FilterField = (0, import_react.forwardRef)(
       id: propId,
       autoSuggestions = false,
       defaultSuggestionsCount: _defaultSuggestionsCount,
+      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
       controlState,
       className: consumerClassName,
       style: consumerStyle,
@@ -160,18 +158,29 @@ const _FilterField = (0, import_react.forwardRef)(
     const numberParser = (0, import_getNumberParser.getNumberParser)();
     const isUserEventComposeRef = (0, import_react.useRef)(false);
     const valuePlaceholderWildcardSelection = (0, import_react.useRef)({ isActive: false });
+    const [hasSyntaxError, setHasSyntaxError] = (0, import_react.useState)(false);
     const {
       id,
       disabled,
       required,
       ariaDisabled,
-      readOnly: _readOnly
-    } = (0, import_useSyncedFormControlProps.useSyncedFormControlProps)({
+      readOnly: _readOnly,
+      hint,
+      showError,
+      inputProps,
+      hintProps,
+      messageDispatch: formFieldMessageContextDispatch,
+      focusHandlers,
+      markTouched
+    } = (0, import_useFormControl.useFormControl)({
       propAriaDisabled,
       propDisabled,
       propId,
       propRequired,
-      propReadOnly
+      propReadOnly,
+      controlState,
+      validationVisibility: "after-blur",
+      hasValidationError: hasSyntaxError
     });
     const readOnly = !!_readOnly;
     const [prevValue, setPrevValue] = (0, import_react.useState)(value);
@@ -256,31 +265,6 @@ const _FilterField = (0, import_react.forwardRef)(
     });
     const { viewDispatch } = (0, import_useErrorAwareViewRef.useErrorAwareViewRef)(editorViewRef);
     const filterFieldLinter = (0, import_useFilterFieldLinting.useFilterFieldLinting)(customTypes);
-    const [hasFormControlError, hint] = (0, import_useFormControlState.useFormControlState)(controlState);
-    const [hasSyntaxError, setHasSyntaxError] = (0, import_react.useState)(false);
-    const {
-      state: formFieldMessageState,
-      dispatch: formFieldMessageContextDispatch
-    } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
-    const [showError, setShowError] = (0, import_react.useState)(false);
-    (0, import_react.useEffect)(() => {
-      if (showError && !hasFormControlError && !hasSyntaxError && !formFieldMessageState.showError) {
-        setShowError(false);
-      }
-      const hasNotFocusInside = !editorViewRef.current?.hasFocus && !internalRootRef.current?.contains(document.activeElement);
-      if (hasNotFocusInside && formFieldMessageState.isTouched && (hasFormControlError || formFieldMessageState.showError || hasSyntaxError)) {
-        setShowError(true);
-      }
-    }, [
-      hasFormControlError,
-      hasSyntaxError,
-      formFieldMessageState.showError,
-      editorViewRef.current?.hasFocus
-    ]);
-    const { inputProps, hintProps } = (0, import_useInputHint.useInputHint)({
-      hint,
-      hasError: showError
-    });
     const isDirtyRef = (0, import_react.useRef)(false);
     const [prevDisabled, setPrevDisabled] = (0, import_react.useState)(disabled);
     if (disabled !== prevDisabled) {
@@ -400,10 +384,7 @@ const _FilterField = (0, import_react.forwardRef)(
         validate: () => {
           isDirtyRef.current = true;
           validate();
-          formFieldMessageContextDispatch?.({
-            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-            payload: { isTouched: true }
-          });
+          markTouched();
           const state2 = getFilterFieldValidationState("manual");
           const validationState = emitValidationState(state2);
           lastEmittedHadErrorsRef.current = validationState.errors.length > 0;
@@ -412,10 +393,7 @@ const _FilterField = (0, import_react.forwardRef)(
         validateAsync: async () => {
           isDirtyRef.current = true;
           validate();
-          formFieldMessageContextDispatch?.({
-            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-            payload: { isTouched: true }
-          });
+          markTouched();
           const state2 = getFilterFieldValidationState("manual");
           const validationState = emitValidationState(state2);
           lastEmittedHadErrorsRef.current = validationState.errors.length > 0;
@@ -430,7 +408,7 @@ const _FilterField = (0, import_react.forwardRef)(
       [
         overlayState,
         validate,
-        formFieldMessageContextDispatch,
+        markTouched,
         filterNamespace,
         saveRecentFilter,
         emitValidationState
@@ -972,15 +950,17 @@ const _FilterField = (0, import_react.forwardRef)(
         flexDirection: "column",
         className: (0, import_clsx.default)(styles.wrapper, consumerClassName),
         style: consumerStyle,
-        onFocus: () => {
+        onMouseMove: () => {
+          setHideDeleteWhileTyping(false);
+        },
+        ...focusHandlers,
+        onFocus: (event) => {
+          focusHandlers.onFocus?.(event);
           formFieldMessageContextDispatch?.({
             type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
             payload: { isTouched: false }
           });
         },
-        onMouseMove: () => {
-          setHideDeleteWhileTyping(false);
-        },
         ...behavioralTrackingProps,
         "data-dt-component": COMPONENT_NAME,
         children: [
@@ -988,7 +968,6 @@ const _FilterField = (0, import_react.forwardRef)(
             "div",
             {
               ...inputProps,
-              "aria-invalid": controlState ? inputProps["aria-invalid"] : hasSyntaxError,
               className: (0, import_clsx.default)(
                 editorStyles.editorContainer({
                   size: "default",
@@ -1230,7 +1209,7 @@ const _FilterField = (0, import_react.forwardRef)(
               },
               onInvalid: (event) => {
                 event.preventDefault();
-                setShowError(true);
+                markTouched();
                 event.currentTarget.focus();
                 onInputBlur();
               },