@dynatrace/strato-components 3.7.0 → 3.7.2

package/esm/filters/segment-selector/parts/Overlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/segment-selector/parts/Overlay.css.ts"],
-  "sourcesContent": ["import './Overlay.css';\nexport var divider = '_bqi6d90-3-7-0';\nexport var fieldSet = '_bqi6d97-3-7-0';\nexport var isAnimating = '_bqi6d94-3-7-0';\nexport var legend = '_bqi6d96-3-7-0';\nexport var link = '_bqi6d95-3-7-0';\nexport var menuLink = '_bqi6d91-3-7-0';\nexport var overlayDefaultWidth = '_bqi6d92-3-7-0';\nexport var scrollContainer = '_bqi6d93-3-7-0';"],
+  "sourcesContent": ["import './Overlay.css';\nexport var divider = '_bqi6d90-3-7-2';\nexport var fieldSet = '_bqi6d97-3-7-2';\nexport var isAnimating = '_bqi6d94-3-7-2';\nexport var legend = '_bqi6d96-3-7-2';\nexport var link = '_bqi6d95-3-7-2';\nexport var menuLink = '_bqi6d91-3-7-2';\nexport var overlayDefaultWidth = '_bqi6d92-3-7-2';\nexport var scrollContainer = '_bqi6d93-3-7-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,cAAc;AAClB,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,WAAW;AACf,IAAI,sBAAsB;AAC1B,IAAI,kBAAkB;",
   "names": []
 }

package/esm/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.css

@@ -1,17 +1,17 @@
-._7mq3is0-3-7-0 {
+._7mq3is0-3-7-2 {
   all: unset;
   padding: 0;
   width: 100%;
   transition: height var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._7mq3is1-3-7-0 {
+._7mq3is1-3-7-2 {
   height: 0;
   opacity: 0;
 }
-._7mq3is2-3-7-0 {
+._7mq3is2-3-7-2 {
   height: auto;
   opacity: 1;
 }
-._7mq3is3-3-7-0 {
+._7mq3is3-3-7-2 {
   all: unset;
 }

package/esm/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.sty.js

@@ -1,8 +1,8 @@
 import "./ShowMorePanel.css";
-var expandableWrapper = "_7mq3is0-3-7-0";
-var expandableWrapperCollapsed = "_7mq3is1-3-7-0";
-var expandableWrapperExpanded = "_7mq3is2-3-7-0";
-var list = "_7mq3is3-3-7-0";
+var expandableWrapper = "_7mq3is0-3-7-2";
+var expandableWrapperCollapsed = "_7mq3is1-3-7-2";
+var expandableWrapperExpanded = "_7mq3is2-3-7-2";
+var list = "_7mq3is3-3-7-2";
 export {
   expandableWrapper,
   expandableWrapperCollapsed,

package/esm/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.css.ts"],
-  "sourcesContent": ["import './ShowMorePanel.css';\nexport var expandableWrapper = '_7mq3is0-3-7-0';\nexport var expandableWrapperCollapsed = '_7mq3is1-3-7-0';\nexport var expandableWrapperExpanded = '_7mq3is2-3-7-0';\nexport var list = '_7mq3is3-3-7-0';"],
+  "sourcesContent": ["import './ShowMorePanel.css';\nexport var expandableWrapper = '_7mq3is0-3-7-2';\nexport var expandableWrapperCollapsed = '_7mq3is1-3-7-2';\nexport var expandableWrapperExpanded = '_7mq3is2-3-7-2';\nexport var list = '_7mq3is3-3-7-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,6BAA6B;AACjC,IAAI,4BAA4B;AAChC,IAAI,OAAO;",
   "names": []
 }

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.css

@@ -1,27 +1,27 @@
-._1oehqvw3-3-7-0 {
+._1oehqvw3-3-7-2 {
   all: unset;
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw4-3-7-0 {
+._1oehqvw4-3-7-2 {
   all: unset;
   display: block;
 }
-._1oehqvw5-3-7-0._1oehqvw5-3-7-0 {
-  color: var(--_1oehqvw2-3-7-0);
+._1oehqvw5-3-7-2._1oehqvw5-3-7-2 {
+  color: var(--_1oehqvw2-3-7-2);
 }
-._1oehqvw6-3-7-0 {
+._1oehqvw6-3-7-2 {
   align-items: center;
   display: inline-block;
   text-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1oehqvw7-3-7-0._1oehqvw7-3-7-0 {
+._1oehqvw7-3-7-2._1oehqvw7-3-7-2 {
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw8-3-7-0::before {
+._1oehqvw8-3-7-2::before {
   content: " ";
   position: absolute;
   display: block;
@@ -32,50 +32,50 @@
   left: 0px;
   transform: translate(4px);
 }
-._1oehqvw9-3-7-0 {
-  --_1oehqvw0-3-7-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1oehqvw1-3-7-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-  --_1oehqvw2-3-7-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+._1oehqvw9-3-7-2 {
+  --_1oehqvw0-3-7-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1oehqvw1-3-7-2: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+  --_1oehqvw2-3-7-2: var(--dt-colors-text-neutral-subdued, #595a7d);
   grid-template-columns: 1fr max-content;
 }
-._1jgl8s50-3-7-0 ._1oehqvw9-3-7-0._1oehqvw9-3-7-0._1oehqvw9-3-7-0 {
+._1jgl8s50-3-7-2 ._1oehqvw9-3-7-2._1oehqvw9-3-7-2._1oehqvw9-3-7-2 {
   gap: 1px;
 }
-._1jgl8s50-3-7-0 ._1oehqvw9-3-7-0 {
-  --_1oehqvw0-3-7-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+._1jgl8s50-3-7-2 ._1oehqvw9-3-7-2 {
+  --_1oehqvw0-3-7-2: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1oehqvwa-3-7-0 {
-  --_1oehqvw0-3-7-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1oehqvw1-3-7-0: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
-  --_1oehqvw2-3-7-0: var(--dt-colors-text-primary-default, #464cce);
+._1oehqvwa-3-7-2 {
+  --_1oehqvw0-3-7-2: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1oehqvw1-3-7-2: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
+  --_1oehqvw2-3-7-2: var(--dt-colors-text-primary-default, #464cce);
 }
-._1jgl8s50-3-7-0 ._1oehqvwa-3-7-0 {
-  --_1oehqvw0-3-7-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+._1jgl8s50-3-7-2 ._1oehqvwa-3-7-2 {
+  --_1oehqvw0-3-7-2: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }
-._1oehqvwb-3-7-0:hover._1oehqvwb-3-7-0:hover, ._1oehqvwb-3-7-0:focus-visible._1oehqvwb-3-7-0:focus-visible {
-  background-color: var(--_1oehqvw1-3-7-0);
+._1oehqvwb-3-7-2:hover._1oehqvwb-3-7-2:hover, ._1oehqvwb-3-7-2:focus-visible._1oehqvwb-3-7-2:focus-visible {
+  background-color: var(--_1oehqvw1-3-7-2);
 }
-._1oehqvwc-3-7-0._1oehqvwc-3-7-0 {
+._1oehqvwc-3-7-2._1oehqvwc-3-7-2 {
   opacity: 0;
-  background-color: var(--_1oehqvw0-3-7-0);
+  background-color: var(--_1oehqvw0-3-7-2);
 }
-._1oehqvwc-3-7-0:hover._1oehqvwc-3-7-0:hover, ._1oehqvwc-3-7-0:focus-visible._1oehqvwc-3-7-0:focus-visible {
-  background-color: var(--_1oehqvw1-3-7-0);
+._1oehqvwc-3-7-2:hover._1oehqvwc-3-7-2:hover, ._1oehqvwc-3-7-2:focus-visible._1oehqvwc-3-7-2:focus-visible {
+  background-color: var(--_1oehqvw1-3-7-2);
 }
-._1oehqvwc-3-7-0:disabled, ._1oehqvwc-3-7-0:disabled:hover._1oehqvwc-3-7-0:disabled:hover {
+._1oehqvwc-3-7-2:disabled, ._1oehqvwc-3-7-2:disabled:hover._1oehqvwc-3-7-2:disabled:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1jgl8s50-3-7-0 ._1oehqvwc-3-7-0._1oehqvwc-3-7-0._1oehqvwc-3-7-0 {
+._1jgl8s50-3-7-2 ._1oehqvwc-3-7-2._1oehqvwc-3-7-2._1oehqvwc-3-7-2 {
   margin-left: var(--dt-spacings-size-0, 0);
 }
-._1oehqvw9-3-7-0:has(button:focus-visible) ._1oehqvwc-3-7-0, ._1oehqvw9-3-7-0:hover ._1oehqvwc-3-7-0 {
+._1oehqvw9-3-7-2:has(button:focus-visible) ._1oehqvwc-3-7-2, ._1oehqvw9-3-7-2:hover ._1oehqvwc-3-7-2 {
   opacity: 1;
 }
-._1oehqvw9-3-7-0:has(._1oehqvwc-3-7-0:focus-visible) ._1oehqvwb-3-7-0, ._1oehqvw9-3-7-0:hover ._1oehqvwb-3-7-0:not(:hover) {
-  background-color: var(--_1oehqvw0-3-7-0);
+._1oehqvw9-3-7-2:has(._1oehqvwc-3-7-2:focus-visible) ._1oehqvwb-3-7-2, ._1oehqvw9-3-7-2:hover ._1oehqvwb-3-7-2:not(:hover) {
+  background-color: var(--_1oehqvw0-3-7-2);
 }
-._1oehqvw9-3-7-0 button, ._1oehqvw9-3-7-0:hover button {
+._1oehqvw9-3-7-2 button, ._1oehqvw9-3-7-2:hover button {
   transition-timing-function: unset;
   transition-duration: 0s;
   transition: none;

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.sty.js

@@ -1,15 +1,15 @@
 import "../../../../core/components/app-root/AppRoot.css";
 import "./SegmentsPresets.css";
-var and = "_1oehqvw5-3-7-0";
-var buttonLabel = "_1oehqvw6-3-7-0";
-var inputGroup = "_1oehqvw9-3-7-0";
-var inputGroupSelected = "_1oehqvwa-3-7-0";
-var list = "_1oehqvw3-3-7-0";
-var listItem = "_1oehqvw4-3-7-0";
-var presetButton = "_1oehqvwb-3-7-0";
-var sectionHeadline = "_1oehqvw7-3-7-0";
-var selectionMark = "_1oehqvw8-3-7-0";
-var suffixButton = "_1oehqvwc-3-7-0";
+var and = "_1oehqvw5-3-7-2";
+var buttonLabel = "_1oehqvw6-3-7-2";
+var inputGroup = "_1oehqvw9-3-7-2";
+var inputGroupSelected = "_1oehqvwa-3-7-2";
+var list = "_1oehqvw3-3-7-2";
+var listItem = "_1oehqvw4-3-7-2";
+var presetButton = "_1oehqvwb-3-7-2";
+var sectionHeadline = "_1oehqvw7-3-7-2";
+var selectionMark = "_1oehqvw8-3-7-2";
+var suffixButton = "_1oehqvwc-3-7-2";
 export {
   and,
   buttonLabel,

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport './SegmentsPresets.css';\nexport var and = '_1oehqvw5-3-7-0';\nexport var buttonLabel = '_1oehqvw6-3-7-0';\nexport var inputGroup = '_1oehqvw9-3-7-0';\nexport var inputGroupSelected = '_1oehqvwa-3-7-0';\nexport var list = '_1oehqvw3-3-7-0';\nexport var listItem = '_1oehqvw4-3-7-0';\nexport var presetButton = '_1oehqvwb-3-7-0';\nexport var sectionHeadline = '_1oehqvw7-3-7-0';\nexport var selectionMark = '_1oehqvw8-3-7-0';\nexport var suffixButton = '_1oehqvwc-3-7-0';"],
+  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport './SegmentsPresets.css';\nexport var and = '_1oehqvw5-3-7-2';\nexport var buttonLabel = '_1oehqvw6-3-7-2';\nexport var inputGroup = '_1oehqvw9-3-7-2';\nexport var inputGroupSelected = '_1oehqvwa-3-7-2';\nexport var list = '_1oehqvw3-3-7-2';\nexport var listItem = '_1oehqvw4-3-7-2';\nexport var presetButton = '_1oehqvwb-3-7-2';\nexport var sectionHeadline = '_1oehqvw7-3-7-2';\nexport var selectionMark = '_1oehqvw8-3-7-2';\nexport var suffixButton = '_1oehqvwc-3-7-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,MAAM;AACV,IAAI,cAAc;AAClB,IAAI,aAAa;AACjB,IAAI,qBAAqB;AACzB,IAAI,OAAO;AACX,IAAI,WAAW;AACf,IAAI,eAAe;AACnB,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,eAAe;",
   "names": []
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelect.css

@@ -1,83 +1,83 @@
-._1fuxi5m0-3-7-0 {
+._1fuxi5m0-3-7-2 {
   grid-area: segment;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m0-3-7-0 {
+._1jgl8s50-3-7-2 ._1fuxi5m0-3-7-2 {
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m0-3-7-0:hover, ._1jgl8s50-3-7-0 ._1fuxi5m0-3-7-0:active, ._1jgl8s50-3-7-0 ._1fuxi5m0-3-7-0:focus-within {
+._1jgl8s50-3-7-2 ._1fuxi5m0-3-7-2:hover, ._1jgl8s50-3-7-2 ._1fuxi5m0-3-7-2:active, ._1jgl8s50-3-7-2 ._1fuxi5m0-3-7-2:focus-within {
   z-index: 1;
 }
-._1fuxi5m2-3-7-0._1fuxi5m2-3-7-0 {
+._1fuxi5m2-3-7-2._1fuxi5m2-3-7-2 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-7-0 {
+._1fuxi5m3-3-7-2 {
   grid-area: variables;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m3-3-7-0 {
+._1jgl8s50-3-7-2 ._1fuxi5m3-3-7-2 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m3-3-7-0:hover, ._1jgl8s50-3-7-0 ._1fuxi5m3-3-7-0:active, ._1jgl8s50-3-7-0 ._1fuxi5m3-3-7-0:focus-within {
+._1jgl8s50-3-7-2 ._1fuxi5m3-3-7-2:hover, ._1jgl8s50-3-7-2 ._1fuxi5m3-3-7-2:active, ._1jgl8s50-3-7-2 ._1fuxi5m3-3-7-2:focus-within {
   z-index: 1;
 }
-._1fuxi5m4-3-7-0 {
+._1fuxi5m4-3-7-2 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m5-3-7-0 {
+._1fuxi5m5-3-7-2 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m5-3-7-0._1fuxi5m5-3-7-0 {
+._1fuxi5m5-3-7-2._1fuxi5m5-3-7-2 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m5-3-7-0 {
+._1jgl8s50-3-7-2 ._1fuxi5m5-3-7-2 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m5-3-7-0:hover, ._1jgl8s50-3-7-0 ._1fuxi5m5-3-7-0:active, ._1jgl8s50-3-7-0 ._1fuxi5m5-3-7-0:focus-within {
+._1jgl8s50-3-7-2 ._1fuxi5m5-3-7-2:hover, ._1jgl8s50-3-7-2 ._1fuxi5m5-3-7-2:active, ._1jgl8s50-3-7-2 ._1fuxi5m5-3-7-2:focus-within {
   z-index: 1;
 }
-._1fuxi5m6-3-7-0 {
+._1fuxi5m6-3-7-2 {
   gap: var(--dt-spacings-size-2, 2px);
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m6-3-7-0 {
+._1jgl8s50-3-7-2 ._1fuxi5m6-3-7-2 {
   gap: var(--dt-spacings-size-0, 0);
 }
-._1fuxi5m7-3-7-0 {
+._1fuxi5m7-3-7-2 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m8-3-7-0 {
+._1fuxi5m8-3-7-2 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m9-3-7-0 {
+._1fuxi5m9-3-7-2 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5ma-3-7-0 {
+._1fuxi5ma-3-7-2 {
   grid-template-areas: "segment segment";
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-7-0 {
+  ._1fuxi5m1-3-7-2 {
     border-bottom-left-radius: 0;
   }
-  ._1jgl8s50-3-7-0 ._1fuxi5m3-3-7-0 {
+  ._1jgl8s50-3-7-2 ._1fuxi5m3-3-7-2 {
     margin-left: 0;
     margin-top: -1px;
   }
-  ._1fuxi5m7-3-7-0 {
+  ._1fuxi5m7-3-7-2 {
     grid-template-areas: "segment segment clear" "variables variables clear";
   }
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m4-3-7-0 {
+  ._1fuxi5m4-3-7-2 {
     border-bottom-left-radius: 0;
   }
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.js

@@ -1,13 +1,13 @@
 import "../../../../core/components/app-root/AppRoot.css";
 import "./SegmentSelect.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearButtonCSS = "_1fuxi5m5-3-7-0";
-var noBorderRadiusRight = "_1fuxi5m2-3-7-0";
-var segmentsSelectCSS = "_1fuxi5m0-3-7-0";
-var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m6-3-7-0", variantClassNames: { layout: { full: "_1fuxi5m7-3-7-0", "full-readonly": "_1fuxi5m8-3-7-0", "no-variables": "_1fuxi5m9-3-7-0", "no-variables-readonly": "_1fuxi5ma-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
-var segmentsSelectTriggerCSS = "_1fuxi5m1-3-7-0";
-var variablesSelectCSS = "_1fuxi5m3-3-7-0";
-var variablesSelectTriggerCSS = "_1fuxi5m4-3-7-0";
+var clearButtonCSS = "_1fuxi5m5-3-7-2";
+var noBorderRadiusRight = "_1fuxi5m2-3-7-2";
+var segmentsSelectCSS = "_1fuxi5m0-3-7-2";
+var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m6-3-7-2", variantClassNames: { layout: { full: "_1fuxi5m7-3-7-2", "full-readonly": "_1fuxi5m8-3-7-2", "no-variables": "_1fuxi5m9-3-7-2", "no-variables-readonly": "_1fuxi5ma-3-7-2" } }, defaultVariants: {}, compoundVariants: [] });
+var segmentsSelectTriggerCSS = "_1fuxi5m1-3-7-2";
+var variablesSelectCSS = "_1fuxi5m3-3-7-2";
+var variablesSelectTriggerCSS = "_1fuxi5m4-3-7-2";
 export {
   clearButtonCSS,
   noBorderRadiusRight,

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelect.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m5-3-7-0';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-7-0';\nexport var segmentsSelectCSS = '_1fuxi5m0-3-7-0';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m6-3-7-0',variantClassNames:{layout:{full:'_1fuxi5m7-3-7-0','full-readonly':'_1fuxi5m8-3-7-0','no-variables':'_1fuxi5m9-3-7-0','no-variables-readonly':'_1fuxi5ma-3-7-0'}},defaultVariants:{},compoundVariants:[]});\nexport var segmentsSelectTriggerCSS = '_1fuxi5m1-3-7-0';\nexport var variablesSelectCSS = '_1fuxi5m3-3-7-0';\nexport var variablesSelectTriggerCSS = '_1fuxi5m4-3-7-0';"],
+  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m5-3-7-2';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-7-2';\nexport var segmentsSelectCSS = '_1fuxi5m0-3-7-2';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m6-3-7-2',variantClassNames:{layout:{full:'_1fuxi5m7-3-7-2','full-readonly':'_1fuxi5m8-3-7-2','no-variables':'_1fuxi5m9-3-7-2','no-variables-readonly':'_1fuxi5ma-3-7-2'}},defaultVariants:{},compoundVariants:[]});\nexport var segmentsSelectTriggerCSS = '_1fuxi5m1-3-7-2';\nexport var variablesSelectCSS = '_1fuxi5m3-3-7-2';\nexport var variablesSelectTriggerCSS = '_1fuxi5m4-3-7-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB;AACrB,IAAI,sBAAsB;AAC1B,IAAI,oBAAoB;AACxB,IAAI,wBAAwB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,iBAAgB,mBAAkB,gBAAe,mBAAkB,yBAAwB,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/Q,IAAI,2BAA2B;AAC/B,IAAI,qBAAqB;AACzB,IAAI,4BAA4B;",
   "names": []
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css

@@ -1,3 +1,3 @@
-._1e5el1o0-3-7-0 {
+._1e5el1o0-3-7-2 {
   max-width: 400px;
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.sty.js

@@ -1,5 +1,5 @@
 import "./SegmentSelectorTrigger.css";
-var trigger = "_1e5el1o0-3-7-0";
+var trigger = "_1e5el1o0-3-7-2";
 export {
   trigger
 };

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css.ts"],
-  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-7-0';"],
+  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-7-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/filters/segment-selector/parts/selectionBar/ValueSelect.js

@@ -43,7 +43,7 @@ const ValueSelect = (props) => {
     forceRefetch
   } = useDql({
     query,
-    maxResultRecords: 1e4,
+    maxResultRecords: 15e3,
     maxResultBytes: 5242880,
     // 5 MB
     dtClientContext

package/esm/filters/segment-selector/parts/selectionBar/ValueSelect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/ValueSelect.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { isArray } from 'lodash-es';\nimport { useContext, useEffect, useMemo, useRef } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport { useDql } from '@dynatrace-sdk/react-hooks';\n\nimport * as styles from './SegmentSelect.sty.js';\nimport { StratoLoggerContext } from '../../../../core/sdk/StratoLoggerContext.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Link } from '../../../../typography/link/Link.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TextEllipsis } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { type CachedSegment } from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport {\n  convertQueryRecordToStoreSegmentVariables,\n  getReadableValue,\n} from '../../utils.js';\nimport { getSegmentHref } from '../segmentManagementHref.js';\n\ntype ValueSelectProps = {\n  readOnly?: boolean;\n  segment: CachedSegment;\n  variables?: string[];\n  triggerClassName?: string;\n};\n\nconst dtClientContext = JSON.stringify({\n  source: 'SegmentSelector',\n  package: '@dynatrace/strato-components',\n});\n\n/**\n * ValueSelect component that allows the selection of variables of the segment\n * @internal\n */\nexport const ValueSelect = (props: ValueSelectProps) => {\n  const { triggerClassName, readOnly, segment, variables = [] } = props;\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { focusedSegmentId, isTouched } = useContext(UISegmentsContext);\n  const { updateUISegment, setArrayIdentifierError } = useSegmentsUIContext();\n  const { dispatch: messagesDispatch } = useFormFieldMessagesContext();\n\n  const intl = useIntl();\n\n  const stratoLogger = useContext(StratoLoggerContext);\n\n  const query =\n    segment?.segment?.variables !== undefined &&\n    segment?.segment?.variables?.type === 'query'\n      ? segment.segment.variables.value\n      : '';\n\n  const {\n    data,\n    isLoading: isDqlLoading,\n    forceRefetch,\n  } = useDql({\n    query,\n    maxResultRecords: 10_000,\n    maxResultBytes: 5_242_880, // 5 MB\n    dtClientContext,\n  });\n  useEffect(() => {\n    if (!isDqlLoading && data?.records?.length === 0) {\n      stratoLogger?.info(\n        'Failed to retrieve segment variables: query returned no records.',\n        null,\n        {\n          query: query.split('|')[0], // log query until first pipe to avoid reporting sensitive data.\n          id: segment?.segment?.id,\n        },\n      );\n    }\n    // only update when the query changed and is not loading, to prevent multiple logs.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [query, isDqlLoading]);\n\n  /** Checks which variables are already selected but no longer available. */\n  const unavailableVariables = useMemo(() => {\n    if (data) {\n      const firstKey = Object.keys(data.records?.[0] ?? {})[0];\n      const dataRecordIds = data.records.map((record) => record?.[firstKey]);\n\n      return variables?.filter((variable) => !dataRecordIds.includes(variable));\n    }\n  }, [data, variables]);\n\n  /** Filters for all unique variable ids and strips duplicates. */\n  const availableVariables = useMemo(() => {\n    if (data?.records) {\n      let hasArrayIdentifier = false;\n      const recordsArray = data?.records\n        .map((singleRow) => {\n          const firstKey = singleRow ? Object.keys(singleRow)[0] : null;\n\n          if (!singleRow || !firstKey) {\n            return null;\n          }\n\n          if (isArray(singleRow[firstKey])) {\n            hasArrayIdentifier = true;\n          }\n\n          return `${singleRow[firstKey]}`;\n        })\n        .filter((value) => value !== 'null' && value !== null);\n\n      /**\n       * The array identifier error can only be detected when the variables are compared to\n       * the fetched data, as for all further usages we flatten the array. Therefore, we need\n       * to handle the error specifically. As the immediate dispatch would lead to a bad state\n       * but we want to avoid to iterate over the variables again, the state update is delayed here.\n       */\n      queueMicrotask(() => {\n        if (hasArrayIdentifier) {\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              variant: 'error',\n              messageType: 'formcontrol',\n              id: 'array-identifier',\n              validityStateKey: 'customError',\n              message: (\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n                />\n              ),\n            },\n          });\n        }\n        setArrayIdentifierError(hasArrayIdentifier, segment.segment.id);\n      });\n\n      return Array.from(new Set(recordsArray));\n    }\n  }, [data]);\n\n  const shouldOpen =\n    focusedSegmentId === segment.segment.id &&\n    variables.length === 0 &&\n    isTouched;\n\n  useEffect(() => {\n    shouldOpen && variableSelectRef.current?.open();\n  }, [shouldOpen]);\n\n  useEffect(() => {\n    // initially\n    !isTouched && variableSelectRef.current?.validate();\n    // we need to validate the select when the variables change\n    // this needs to be properly resolved in the select component,\n    // as this one needs to validate controlled values automatically.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isTouched, JSON.stringify(variables)]);\n\n  return (\n    <Select\n      ref={variableSelectRef}\n      multiple\n      className={styles.variablesSelectCSS}\n      required\n      readOnly={readOnly || segment?.temporarilyApplied}\n      clearable={false}\n      onOpenChange={(isOpen) => {\n        if (query.length > 0 && isOpen) {\n          forceRefetch().catch(() => undefined);\n        }\n      }}\n      value={variables}\n      onChange={(newVariables) => {\n        if (!newVariables || newVariables.length === 0) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: [],\n            },\n          );\n          return;\n        }\n\n        // get all variable values from the actual data\n        const firstKey = Object.keys(data?.records[0] ?? {})[0];\n        const dataEnrichedVariables = newVariables\n          .map((variable) => {\n            return (\n              data?.records.find((singleRow) => {\n                if (isArray(singleRow?.[firstKey])) {\n                  const values = singleRow?.[firstKey].includes(variable);\n                  return values;\n                }\n\n                return singleRow && singleRow[firstKey] === variable;\n              }) ?? null\n            );\n          })\n          .filter((value) => value !== null);\n\n        const segmentVariables = convertQueryRecordToStoreSegmentVariables(\n          dataEnrichedVariables,\n        );\n\n        if (segmentVariables) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: segmentVariables,\n            },\n          );\n        }\n      }}\n      data-dt-name=\"segment-variable-select\"\n    >\n      <Select.Trigger\n        className={clsx(styles.variablesSelectTriggerCSS, triggerClassName)}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsVariableTriggerPlaceholder,\n        )}\n      >\n        {variables?.length > 0 && (\n          <Select.DisplayValue>\n            <TextEllipsis>\n              {variables\n                .map((variable) => getReadableValue(variable, intl))\n                .join(', ')}\n            </TextEllipsis>\n          </Select.DisplayValue>\n        )}\n      </Select.Trigger>\n      <Select.Filter />\n      <Select.Content\n        loading={isDqlLoading}\n        showSelectedOptionsFirst\n        width=\"trigger\"\n      >\n        {!data &&\n          variables?.map((variable) => (\n            <Select.Option\n              key={variable}\n              value={variable}\n              textValue={getReadableValue(variable, intl) ?? undefined}\n            >\n              {getReadableValue(variable, intl)}\n            </Select.Option>\n          ))}\n        {unavailableVariables?.map((unlistedVariable) => (\n          <Select.Option\n            key={unlistedVariable}\n            value={unlistedVariable}\n            textValue={getReadableValue(unlistedVariable, intl) ?? undefined}\n          >\n            <Grid\n              gridTemplateColumns=\"auto auto\"\n              width=\"100%\"\n              alignItems=\"baseline\"\n            >\n              <Text>{getReadableValue(unlistedVariable, intl)}</Text>\n              <Text\n                textStyle=\"small\"\n                style={{\n                  color: Colors.Text.Neutral.Subdued,\n                  textAlign: 'right',\n                  textWrap: 'nowrap',\n                }}\n              >\n                {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)}\n              </Text>\n            </Grid>\n          </Select.Option>\n        ))}\n        {availableVariables?.map((variable) => (\n          <Select.Option\n            key={variable}\n            value={variable}\n            textValue={getReadableValue(variable, intl) ?? undefined}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}{' '}\n            <Text>{getReadableValue(variable, intl)}</Text>\n          </Select.Option>\n        ))}\n        <Select.EmptyState>\n          {data?.records.length ? (\n            <FormattedMessage\n              id=\"nIw/xeiGNJsj+a+5\"\n              defaultMessage=\"No matching values for this segment found.\"\n              description=\"Hint shown when searching for a segment variable that isn't in the list.\"\n            />\n          ) : (\n            <FormattedMessage\n              defaultMessage=\"No values for this segment available. You can manage this segment in {link}.\"\n              id=\"72DlIwYKB9UTEzlA\"\n              description=\"Empty state message if no variables for the segment are available.\"\n              values={{\n                link: (\n                  <Link\n                    href={getSegmentHref(segment.segment.id)}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    <FormattedMessage\n                      defaultMessage=\"settings\"\n                      id=\"u55UYpLvXi//xGEn\"\n                      description=\"Link text to segments app in empty state message if no variables for the segment are available.\"\n                    />\n                  </Link>\n                ),\n              }}\n            />\n          )}\n        </Select.EmptyState>\n      </Select.Content>\n    </Select>\n  );\n};\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { isArray } from 'lodash-es';\nimport { useContext, useEffect, useMemo, useRef } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport { useDql } from '@dynatrace-sdk/react-hooks';\n\nimport * as styles from './SegmentSelect.sty.js';\nimport { StratoLoggerContext } from '../../../../core/sdk/StratoLoggerContext.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Link } from '../../../../typography/link/Link.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TextEllipsis } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { type CachedSegment } from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport {\n  convertQueryRecordToStoreSegmentVariables,\n  getReadableValue,\n} from '../../utils.js';\nimport { getSegmentHref } from '../segmentManagementHref.js';\n\ntype ValueSelectProps = {\n  readOnly?: boolean;\n  segment: CachedSegment;\n  variables?: string[];\n  triggerClassName?: string;\n};\n\nconst dtClientContext = JSON.stringify({\n  source: 'SegmentSelector',\n  package: '@dynatrace/strato-components',\n});\n\n/**\n * ValueSelect component that allows the selection of variables of the segment\n * @internal\n */\nexport const ValueSelect = (props: ValueSelectProps) => {\n  const { triggerClassName, readOnly, segment, variables = [] } = props;\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { focusedSegmentId, isTouched } = useContext(UISegmentsContext);\n  const { updateUISegment, setArrayIdentifierError } = useSegmentsUIContext();\n  const { dispatch: messagesDispatch } = useFormFieldMessagesContext();\n\n  const intl = useIntl();\n\n  const stratoLogger = useContext(StratoLoggerContext);\n\n  const query =\n    segment?.segment?.variables !== undefined &&\n    segment?.segment?.variables?.type === 'query'\n      ? segment.segment.variables.value\n      : '';\n\n  const {\n    data,\n    isLoading: isDqlLoading,\n    forceRefetch,\n  } = useDql({\n    query,\n    maxResultRecords: 15_000,\n    maxResultBytes: 5_242_880, // 5 MB\n    dtClientContext,\n  });\n  useEffect(() => {\n    if (!isDqlLoading && data?.records?.length === 0) {\n      stratoLogger?.info(\n        'Failed to retrieve segment variables: query returned no records.',\n        null,\n        {\n          query: query.split('|')[0], // log query until first pipe to avoid reporting sensitive data.\n          id: segment?.segment?.id,\n        },\n      );\n    }\n    // only update when the query changed and is not loading, to prevent multiple logs.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [query, isDqlLoading]);\n\n  /** Checks which variables are already selected but no longer available. */\n  const unavailableVariables = useMemo(() => {\n    if (data) {\n      const firstKey = Object.keys(data.records?.[0] ?? {})[0];\n      const dataRecordIds = data.records.map((record) => record?.[firstKey]);\n\n      return variables?.filter((variable) => !dataRecordIds.includes(variable));\n    }\n  }, [data, variables]);\n\n  /** Filters for all unique variable ids and strips duplicates. */\n  const availableVariables = useMemo(() => {\n    if (data?.records) {\n      let hasArrayIdentifier = false;\n      const recordsArray = data?.records\n        .map((singleRow) => {\n          const firstKey = singleRow ? Object.keys(singleRow)[0] : null;\n\n          if (!singleRow || !firstKey) {\n            return null;\n          }\n\n          if (isArray(singleRow[firstKey])) {\n            hasArrayIdentifier = true;\n          }\n\n          return `${singleRow[firstKey]}`;\n        })\n        .filter((value) => value !== 'null' && value !== null);\n\n      /**\n       * The array identifier error can only be detected when the variables are compared to\n       * the fetched data, as for all further usages we flatten the array. Therefore, we need\n       * to handle the error specifically. As the immediate dispatch would lead to a bad state\n       * but we want to avoid to iterate over the variables again, the state update is delayed here.\n       */\n      queueMicrotask(() => {\n        if (hasArrayIdentifier) {\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              variant: 'error',\n              messageType: 'formcontrol',\n              id: 'array-identifier',\n              validityStateKey: 'customError',\n              message: (\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n                />\n              ),\n            },\n          });\n        }\n        setArrayIdentifierError(hasArrayIdentifier, segment.segment.id);\n      });\n\n      return Array.from(new Set(recordsArray));\n    }\n  }, [data]);\n\n  const shouldOpen =\n    focusedSegmentId === segment.segment.id &&\n    variables.length === 0 &&\n    isTouched;\n\n  useEffect(() => {\n    shouldOpen && variableSelectRef.current?.open();\n  }, [shouldOpen]);\n\n  useEffect(() => {\n    // initially\n    !isTouched && variableSelectRef.current?.validate();\n    // we need to validate the select when the variables change\n    // this needs to be properly resolved in the select component,\n    // as this one needs to validate controlled values automatically.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isTouched, JSON.stringify(variables)]);\n\n  return (\n    <Select\n      ref={variableSelectRef}\n      multiple\n      className={styles.variablesSelectCSS}\n      required\n      readOnly={readOnly || segment?.temporarilyApplied}\n      clearable={false}\n      onOpenChange={(isOpen) => {\n        if (query.length > 0 && isOpen) {\n          forceRefetch().catch(() => undefined);\n        }\n      }}\n      value={variables}\n      onChange={(newVariables) => {\n        if (!newVariables || newVariables.length === 0) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: [],\n            },\n          );\n          return;\n        }\n\n        // get all variable values from the actual data\n        const firstKey = Object.keys(data?.records[0] ?? {})[0];\n        const dataEnrichedVariables = newVariables\n          .map((variable) => {\n            return (\n              data?.records.find((singleRow) => {\n                if (isArray(singleRow?.[firstKey])) {\n                  const values = singleRow?.[firstKey].includes(variable);\n                  return values;\n                }\n\n                return singleRow && singleRow[firstKey] === variable;\n              }) ?? null\n            );\n          })\n          .filter((value) => value !== null);\n\n        const segmentVariables = convertQueryRecordToStoreSegmentVariables(\n          dataEnrichedVariables,\n        );\n\n        if (segmentVariables) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: segmentVariables,\n            },\n          );\n        }\n      }}\n      data-dt-name=\"segment-variable-select\"\n    >\n      <Select.Trigger\n        className={clsx(styles.variablesSelectTriggerCSS, triggerClassName)}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsVariableTriggerPlaceholder,\n        )}\n      >\n        {variables?.length > 0 && (\n          <Select.DisplayValue>\n            <TextEllipsis>\n              {variables\n                .map((variable) => getReadableValue(variable, intl))\n                .join(', ')}\n            </TextEllipsis>\n          </Select.DisplayValue>\n        )}\n      </Select.Trigger>\n      <Select.Filter />\n      <Select.Content\n        loading={isDqlLoading}\n        showSelectedOptionsFirst\n        width=\"trigger\"\n      >\n        {!data &&\n          variables?.map((variable) => (\n            <Select.Option\n              key={variable}\n              value={variable}\n              textValue={getReadableValue(variable, intl) ?? undefined}\n            >\n              {getReadableValue(variable, intl)}\n            </Select.Option>\n          ))}\n        {unavailableVariables?.map((unlistedVariable) => (\n          <Select.Option\n            key={unlistedVariable}\n            value={unlistedVariable}\n            textValue={getReadableValue(unlistedVariable, intl) ?? undefined}\n          >\n            <Grid\n              gridTemplateColumns=\"auto auto\"\n              width=\"100%\"\n              alignItems=\"baseline\"\n            >\n              <Text>{getReadableValue(unlistedVariable, intl)}</Text>\n              <Text\n                textStyle=\"small\"\n                style={{\n                  color: Colors.Text.Neutral.Subdued,\n                  textAlign: 'right',\n                  textWrap: 'nowrap',\n                }}\n              >\n                {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)}\n              </Text>\n            </Grid>\n          </Select.Option>\n        ))}\n        {availableVariables?.map((variable) => (\n          <Select.Option\n            key={variable}\n            value={variable}\n            textValue={getReadableValue(variable, intl) ?? undefined}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}{' '}\n            <Text>{getReadableValue(variable, intl)}</Text>\n          </Select.Option>\n        ))}\n        <Select.EmptyState>\n          {data?.records.length ? (\n            <FormattedMessage\n              id=\"nIw/xeiGNJsj+a+5\"\n              defaultMessage=\"No matching values for this segment found.\"\n              description=\"Hint shown when searching for a segment variable that isn't in the list.\"\n            />\n          ) : (\n            <FormattedMessage\n              defaultMessage=\"No values for this segment available. You can manage this segment in {link}.\"\n              id=\"72DlIwYKB9UTEzlA\"\n              description=\"Empty state message if no variables for the segment are available.\"\n              values={{\n                link: (\n                  <Link\n                    href={getSegmentHref(segment.segment.id)}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    <FormattedMessage\n                      defaultMessage=\"settings\"\n                      id=\"u55UYpLvXi//xGEn\"\n                      description=\"Link text to segments app in empty state message if no variables for the segment are available.\"\n                    />\n                  </Link>\n                ),\n              }}\n            />\n          )}\n        </Select.EmptyState>\n      </Select.Content>\n    </Select>\n  );\n};\n"],
   "mappings": "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",
   "names": []
 }

package/esm/filters/timeframe-selector/TimeframeSelector.css

@@ -1,8 +1,8 @@
-._1sqhmjg0-3-7-0 {
+._1sqhmjg0-3-7-2 {
   min-width: 0;
   box-sizing: border-box;
 }
-._1sqhmjg1-3-7-0 {
+._1sqhmjg1-3-7-2 {
   display: inline-flex;
   align-self: start;
 }

package/esm/filters/timeframe-selector/TimeframeSelector.sty.js

@@ -1,6 +1,6 @@
 import "./TimeframeSelector.css";
-var displayValueParts = "_1sqhmjg0-3-7-0";
-var root = "_1sqhmjg1-3-7-0";
+var displayValueParts = "_1sqhmjg0-3-7-2";
+var root = "_1sqhmjg1-3-7-2";
 export {
   displayValueParts,
   root

package/esm/filters/timeframe-selector/TimeframeSelector.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelector.css.ts"],
-  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-7-0';\nexport var root = '_1sqhmjg1-3-7-0';"],
+  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-7-2';\nexport var root = '_1sqhmjg1-3-7-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,OAAO;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.css

@@ -1,4 +1,4 @@
-._at2xro0-3-7-0 {
+._at2xro0-3-7-2 {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -7,7 +7,7 @@
   padding: var(--dt-spacings-size-0, 0);
   border: var(--dt-spacings-size-0, 0);
 }
-._at2xro1-3-7-0 {
+._at2xro1-3-7-2 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-8, 8px);
@@ -18,14 +18,14 @@
   width: 100%;
   flex-direction: column;
 }
-._at2xro2-3-7-0 {
+._at2xro2-3-7-2 {
   flex-direction: column;
   flex: 1;
   min-width: var(--dt-spacings-size-0, 0);
   gap: var(--dt-spacings-size-4, 4px);
 }
 @media screen and (min-width: 640px) {
-  ._at2xro1-3-7-0 {
+  ._at2xro1-3-7-2 {
     flex-direction: row;
   }
 }

package/esm/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.sty.js

@@ -1,7 +1,7 @@
 import "./CustomTimeframeSelector.css";
-var fieldset = "_at2xro0-3-7-0";
-var overlayRoot = "_at2xro1-3-7-0";
-var wrapper = "_at2xro2-3-7-0";
+var fieldset = "_at2xro0-3-7-2";
+var overlayRoot = "_at2xro1-3-7-2";
+var wrapper = "_at2xro2-3-7-2";
 export {
   fieldset,
   overlayRoot,

package/esm/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.css.ts"],
-  "sourcesContent": ["import './CustomTimeframeSelector.css';\nexport var fieldset = '_at2xro0-3-7-0';\nexport var overlayRoot = '_at2xro1-3-7-0';\nexport var wrapper = '_at2xro2-3-7-0';"],
+  "sourcesContent": ["import './CustomTimeframeSelector.css';\nexport var fieldset = '_at2xro0-3-7-2';\nexport var overlayRoot = '_at2xro1-3-7-2';\nexport var wrapper = '_at2xro2-3-7-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,cAAc;AAClB,IAAI,UAAU;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.css

@@ -1,4 +1,4 @@
-._14xc6b0-3-7-0 {
+._14xc6b0-3-7-2 {
   background: var(--dt-colors-background-surface-default, #fff);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -9,18 +9,18 @@
   min-height: 0;
   max-width: 100vw;
 }
-._14xc6b1-3-7-0 {
+._14xc6b1-3-7-2 {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
 }
-._14xc6b2-3-7-0 {
+._14xc6b2-3-7-2 {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
   padding: var(--dt-spacings-size-6, 6px);
 }
-._14xc6b3-3-7-0 {
+._14xc6b3-3-7-2 {
   overflow-wrap: break-word;
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.sty.js

@@ -1,8 +1,8 @@
 import "./TimeframeSelectorOverlay.css";
-var footer = "_14xc6b2-3-7-0";
-var hint = "_14xc6b3-3-7-0";
-var scrollContainer = "_14xc6b1-3-7-0";
-var wrapper = "_14xc6b0-3-7-0";
+var footer = "_14xc6b2-3-7-2";
+var hint = "_14xc6b3-3-7-2";
+var scrollContainer = "_14xc6b1-3-7-2";
+var wrapper = "_14xc6b0-3-7-2";
 export {
   footer,
   hint,

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.css.ts"],
-  "sourcesContent": ["import './TimeframeSelectorOverlay.css';\nexport var footer = '_14xc6b2-3-7-0';\nexport var hint = '_14xc6b3-3-7-0';\nexport var scrollContainer = '_14xc6b1-3-7-0';\nexport var wrapper = '_14xc6b0-3-7-0';"],
+  "sourcesContent": ["import './TimeframeSelectorOverlay.css';\nexport var footer = '_14xc6b2-3-7-2';\nexport var hint = '_14xc6b3-3-7-2';\nexport var scrollContainer = '_14xc6b1-3-7-2';\nexport var wrapper = '_14xc6b0-3-7-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,kBAAkB;AACtB,IAAI,UAAU;",
   "names": []
 }