@dynatrace/strato-components 3.4.1 → 3.5.2

package/filters/filter-field/FilterField.css

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

package/filters/filter-field/FilterField.sty.js

@@ -47,33 +47,34 @@ __export(FilterField_css_exports, {
   wrapper: () => wrapper
 });
 module.exports = __toCommonJS(FilterField_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_FilterField_css_ts_vanilla = require("./FilterField.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var ariaDisabled = "_96tj13o-3-4-1";
-var container = "_96tj13c-3-4-1";
-var disabled = "_96tj13p-3-4-1 _96tj13n-3-4-1 _96tj13o-3-4-1";
-var error = "_96tj1311-3-4-1";
-var errorText = "_96tj13e-3-4-1";
-var errorVars = "_96tj13d-3-4-1";
-var escapedCharacter = "_96tj1310-3-4-1";
-var existsOperator = "_96tj13z-3-4-1";
-var filterIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13f-3-4-1", variantClassNames: { hasError: { true: "_96tj13g-3-4-1" }, disabled: { true: "_96tj13h-3-4-1" } }, defaultVariants: { hasError: false, disabled: false }, compoundVariants: [] });
-var filterKey = "_96tj13v-3-4-1";
-var filterStatement = "_96tj13j-3-4-1 _96tj13i-3-4-1";
-var filterStatementBase = "_96tj13i-3-4-1";
-var filterStatementDeleteButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13r-3-4-1", variantClassNames: { incomplete: { true: "_96tj13s-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var filterStatementDeleteIcon = "_96tj13t-3-4-1";
-var filterStatementDeleteWidget = "_96tj13q-3-4-1";
-var filterValue = "_96tj13w-3-4-1";
-var incompleteFilterStatement = "_96tj13k-3-4-1 _96tj13i-3-4-1";
-var intermediateFilterStatement = "_96tj13l-3-4-1";
-var operator = "_96tj13y-3-4-1";
-var pastedContent = "_96tj13m-3-4-1";
-var postSpotError = "_96tj1314-3-4-1";
-var preSpotError = "_96tj1313-3-4-1";
-var readOnly = "_96tj13n-3-4-1";
-var spotError = "_96tj1312-3-4-1";
-var suggestionHintContainer = "_96tj13u-3-4-1";
-var suggestionsOverlayAnnouncement = "_96tj1315-3-4-1";
-var variable = "_96tj13x-3-4-1";
-var wrapper = "_96tj13b-3-4-1";
+var ariaDisabled = "_96tj13o-3-5-2";
+var container = "_96tj13c-3-5-2";
+var disabled = "_96tj13p-3-5-2 _96tj13n-3-5-2 _96tj13o-3-5-2";
+var error = "_96tj1311-3-5-2";
+var errorText = "_96tj13e-3-5-2";
+var errorVars = "_96tj13d-3-5-2";
+var escapedCharacter = "_96tj1310-3-5-2";
+var existsOperator = "_96tj13z-3-5-2";
+var filterIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13f-3-5-2", variantClassNames: { hasError: { true: "_96tj13g-3-5-2" }, disabled: { true: "_96tj13h-3-5-2" } }, defaultVariants: { hasError: false, disabled: false }, compoundVariants: [] });
+var filterKey = "_96tj13v-3-5-2";
+var filterStatement = "_96tj13j-3-5-2 _96tj13i-3-5-2";
+var filterStatementBase = "_96tj13i-3-5-2";
+var filterStatementDeleteButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13r-3-5-2", variantClassNames: { incomplete: { true: "_96tj13s-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var filterStatementDeleteIcon = "_96tj13t-3-5-2";
+var filterStatementDeleteWidget = "_96tj13q-3-5-2";
+var filterValue = "_96tj13w-3-5-2";
+var incompleteFilterStatement = "_96tj13k-3-5-2 _96tj13i-3-5-2";
+var intermediateFilterStatement = "_96tj13l-3-5-2";
+var operator = "_96tj13y-3-5-2";
+var pastedContent = "_96tj13m-3-5-2";
+var postSpotError = "_96tj1314-3-5-2";
+var preSpotError = "_96tj1313-3-5-2";
+var readOnly = "_96tj13n-3-5-2";
+var spotError = "_96tj1312-3-5-2";
+var suggestionHintContainer = "_96tj13u-3-5-2";
+var suggestionsOverlayAnnouncement = "_96tj1315-3-5-2";
+var variable = "_96tj13x-3-5-2";
+var wrapper = "_96tj13b-3-5-2";

package/filters/filter-field/components/FilterFieldSuffixButtons.css

@@ -1,13 +1,13 @@
-._ck599t0-3-4-1 {
+._ck599t0-3-5-2 {
   position: absolute;
   right: var(--dt-spacings-size-4, 4px);
   top: var(--dt-spacings-size-4, 4px);
   z-index: 1;
   gap: var(--dt-spacings-size-2, 2px);
 }
-._ck599t1-3-4-1 {
+._ck599t1-3-5-2 {
   margin: var(--dt-spacings-size-2, 2px) 0;
 }
-._ck599t2-3-4-1 {
+._ck599t2-3-5-2 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }

package/filters/filter-field/components/FilterFieldSuffixButtons.sty.js

@@ -23,6 +23,6 @@ __export(FilterFieldSuffixButtons_css_exports, {
 });
 module.exports = __toCommonJS(FilterFieldSuffixButtons_css_exports);
 var import_FilterFieldSuffixButtons_css_ts_vanilla = require("./FilterFieldSuffixButtons.css");
-var button = "_ck599t2-3-4-1";
-var divider = "_ck599t1-3-4-1";
-var suffix = "_ck599t0-3-4-1";
+var button = "_ck599t2-3-5-2";
+var divider = "_ck599t1-3-5-2";
+var suffix = "_ck599t0-3-5-2";

package/filters/filter-field/components/FilterStatement.css

@@ -1,4 +1,4 @@
-._ia7amm2-3-4-1 {
+._ia7amm2-3-5-2 {
   overflow-x: hidden;
   overflow-y: auto;
   text-overflow: ellipsis;
@@ -9,51 +9,51 @@
   min-height: 21px;
   white-space: pre;
 }
-._1smjoa1a-3-4-1 ._ia7amm2-3-4-1 {
+._1smjoa1a-3-5-2 ._ia7amm2-3-5-2 {
   line-height: 24px;
   padding-right: 12px;
   white-space: pre-wrap;
 }
-._ia7amm3-3-4-1 {
+._ia7amm3-3-5-2 {
   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);
   text-wrap: nowrap;
 }
-._1smjoa14-3-4-1:hover ._ia7amm3-3-4-1, ._1smjoa14-3-4-1.virtual-focus ._ia7amm3-3-4-1 {
+._1smjoa14-3-5-2:hover ._ia7amm3-3-5-2, ._1smjoa14-3-5-2._9mvxlq0-3-5-2 ._ia7amm3-3-5-2 {
   border-color: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
 }
-._ia7amm0-3-4-1 ._ia7amm3-3-4-1 {
+._ia7amm0-3-5-2 ._ia7amm3-3-5-2 {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   border-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1smjoa1a-3-4-1 ._ia7amm3-3-4-1 {
+._1smjoa1a-3-5-2 ._ia7amm3-3-5-2 {
   text-wrap: wrap;
 }
-._ia7amm0-3-4-1 ._ia7amm4-3-4-1::highlight(filter-field-ecape-characters) {
+._ia7amm0-3-5-2 ._ia7amm4-3-5-2::highlight(filter-field-escape-characters) {
   color: var(--dt-colors-syntax-operators, #8136a9);
 }
-._ia7amm1-3-4-1 ._ia7amm3-3-4-1 * {
+._ia7amm1-3-5-2 ._ia7amm3-3-5-2 * {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._ia7amm1-3-4-1 ._96tj13y-3-4-1 {
+._ia7amm1-3-5-2 ._96tj13y-3-5-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._ia7amm1-3-4-1::highlight(filterfield-suggestions-highlight) {
+._ia7amm1-3-5-2::highlight(filterfield-suggestions-highlight) {
   text-decoration: none;
 }
-._ia7amm3-3-4-1::highlight(filterfield-suggestions-highlight) {
+._ia7amm3-3-5-2::highlight(filterfield-suggestions-highlight) {
   text-decoration: underline;
   text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
   text-underline-offset: 4.2px;
 }
-._ia7amm5-3-4-1 + ._ia7amm6-3-4-1:has(+ ._ia7amm5-3-4-1) {
+._ia7amm5-3-5-2 + ._ia7amm6-3-5-2:has(+ ._ia7amm5-3-5-2) {
   text-decoration: underline;
   text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
   text-underline-offset: 4.2px;
 }
-._1smjoa1a-3-4-1 div:has(._ia7amm2-3-4-1) {
+._1smjoa1a-3-5-2 div:has(._ia7amm2-3-5-2) {
   max-height: 72px;
   padding-right: 0;
 }

package/filters/filter-field/components/FilterStatement.js

@@ -55,7 +55,7 @@ function withNodeRenderer(className) {
     const { node } = props;
     const ref = (0, import_react.useRef)(null);
     const highlight = (0, import_react.useMemo)(
-      () => (0, import_CSSHighlight.getOrCreateNamedHighlight)("filter-field-ecape-characters"),
+      () => (0, import_CSSHighlight.getOrCreateNamedHighlight)("filter-field-escape-characters"),
       []
     );
     (0, import_react.useEffect)(() => {

package/filters/filter-field/components/FilterStatement.sty.js

@@ -25,13 +25,15 @@ __export(FilterStatement_css_exports, {
   whitespace: () => whitespace
 });
 module.exports = __toCommonJS(FilterStatement_css_exports);
+var import_virtualFocus_css_ts_vanilla = require("../../../core/styles/virtualFocus.css");
+var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_FilterField_css_ts_vanilla = require("../FilterField.css");
 var import_SuggestionsOverlay_css_ts_vanilla = require("../suggestions/SuggestionsOverlay.css");
 var import_Suggestion_css_ts_vanilla = require("../suggestions/Suggestion.css");
 var import_FilterStatement_css_ts_vanilla = require("./FilterStatement.css");
-var escapeCharacter = "_ia7amm4-3-4-1";
-var highlight = "_ia7amm5-3-4-1";
-var highlighting = { syntax: "_ia7amm0-3-4-1", minimal: "_ia7amm1-3-4-1" };
-var root = "_ia7amm2-3-4-1 _96tj13c-3-4-1";
-var statement = "_ia7amm3-3-4-1";
-var whitespace = "_ia7amm6-3-4-1";
+var escapeCharacter = "_ia7amm4-3-5-2";
+var highlight = "_ia7amm5-3-5-2";
+var highlighting = { syntax: "_ia7amm0-3-5-2", minimal: "_ia7amm1-3-5-2" };
+var root = "_ia7amm2-3-5-2 _96tj13c-3-5-2";
+var statement = "_ia7amm3-3-5-2";
+var whitespace = "_ia7amm6-3-5-2";