@dynatrace/strato-components 3.3.0 → 3.3.2

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

@@ -1,10 +1,10 @@
-._bqi6d90-3-3-0 {
+._bqi6d90-3-3-2 {
   height: 15px;
   align-self: center;
   margin-right: var(--dt-spacings-size-2, 2px);
   margin-left: var(--dt-spacings-size-8, 8px);
 }
-._bqi6d91-3-3-0._bqi6d91-3-3-0 {
+._bqi6d91-3-3-2._bqi6d91-3-3-2 {
   display: flex;
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
@@ -14,24 +14,24 @@
   text-transform: var(--dt-typography-text-base-emphasized-text-transform, none);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._bqi6d92-3-3-0 {
+._bqi6d92-3-3-2 {
   max-width: 480px;
   min-width: 320px;
   box-sizing: border-box;
   overflow: hidden;
 }
-._bqi6d93-3-3-0 {
+._bqi6d93-3-3-2 {
   max-height: 396px;
   overflow: auto;
   box-sizing: border-box;
 }
-._bqi6d93-3-3-0 ._bqi6d94-3-3-0 {
+._bqi6d93-3-3-2 ._bqi6d94-3-3-2 {
   overflow: hidden;
 }
-._bqi6d95-3-3-0 {
+._bqi6d95-3-3-2 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._bqi6d96-3-3-0._bqi6d96-3-3-0 {
+._bqi6d96-3-3-2._bqi6d96-3-3-2 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
@@ -40,6 +40,6 @@
   text-decoration: var(--dt-typography-text-small-emphasized-text-decoration, none);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._bqi6d97-3-3-0 > fieldset > div {
+._bqi6d97-3-3-2 > fieldset > div {
   gap: var(--dt-spacings-size-8, 8px);
 }

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

@@ -1,12 +1,12 @@
 import "./Overlay.css";
-var divider = "_bqi6d90-3-3-0";
-var fieldSet = "_bqi6d97-3-3-0";
-var isAnimating = "_bqi6d94-3-3-0";
-var legend = "_bqi6d96-3-3-0";
-var link = "_bqi6d95-3-3-0";
-var menuLink = "_bqi6d91-3-3-0";
-var overlayDefaultWidth = "_bqi6d92-3-3-0";
-var scrollContainer = "_bqi6d93-3-3-0";
+var divider = "_bqi6d90-3-3-2";
+var fieldSet = "_bqi6d97-3-3-2";
+var isAnimating = "_bqi6d94-3-3-2";
+var legend = "_bqi6d96-3-3-2";
+var link = "_bqi6d95-3-3-2";
+var menuLink = "_bqi6d91-3-3-2";
+var overlayDefaultWidth = "_bqi6d92-3-3-2";
+var scrollContainer = "_bqi6d93-3-3-2";
 export {
   divider,
   fieldSet,

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-3-0';\nexport var fieldSet = '_bqi6d97-3-3-0';\nexport var isAnimating = '_bqi6d94-3-3-0';\nexport var legend = '_bqi6d96-3-3-0';\nexport var link = '_bqi6d95-3-3-0';\nexport var menuLink = '_bqi6d91-3-3-0';\nexport var overlayDefaultWidth = '_bqi6d92-3-3-0';\nexport var scrollContainer = '_bqi6d93-3-3-0';"],
+  "sourcesContent": ["import './Overlay.css';\nexport var divider = '_bqi6d90-3-3-2';\nexport var fieldSet = '_bqi6d97-3-3-2';\nexport var isAnimating = '_bqi6d94-3-3-2';\nexport var legend = '_bqi6d96-3-3-2';\nexport var link = '_bqi6d95-3-3-2';\nexport var menuLink = '_bqi6d91-3-3-2';\nexport var overlayDefaultWidth = '_bqi6d92-3-3-2';\nexport var scrollContainer = '_bqi6d93-3-3-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-3-0 {
+._7mq3is0-3-3-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-3-0 {
+._7mq3is1-3-3-2 {
   height: 0;
   opacity: 0;
 }
-._7mq3is2-3-3-0 {
+._7mq3is2-3-3-2 {
   height: auto;
   opacity: 1;
 }
-._7mq3is3-3-3-0 {
+._7mq3is3-3-3-2 {
   all: unset;
 }

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

@@ -1,8 +1,8 @@
 import "./ShowMorePanel.css";
-var expandableWrapper = "_7mq3is0-3-3-0";
-var expandableWrapperCollapsed = "_7mq3is1-3-3-0";
-var expandableWrapperExpanded = "_7mq3is2-3-3-0";
-var list = "_7mq3is3-3-3-0";
+var expandableWrapper = "_7mq3is0-3-3-2";
+var expandableWrapperCollapsed = "_7mq3is1-3-3-2";
+var expandableWrapperExpanded = "_7mq3is2-3-3-2";
+var list = "_7mq3is3-3-3-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-3-0';\nexport var expandableWrapperCollapsed = '_7mq3is1-3-3-0';\nexport var expandableWrapperExpanded = '_7mq3is2-3-3-0';\nexport var list = '_7mq3is3-3-3-0';"],
+  "sourcesContent": ["import './ShowMorePanel.css';\nexport var expandableWrapper = '_7mq3is0-3-3-2';\nexport var expandableWrapperCollapsed = '_7mq3is1-3-3-2';\nexport var expandableWrapperExpanded = '_7mq3is2-3-3-2';\nexport var list = '_7mq3is3-3-3-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-3-0 {
+._1oehqvw3-3-3-2 {
   all: unset;
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw4-3-3-0 {
+._1oehqvw4-3-3-2 {
   all: unset;
   display: block;
 }
-._1oehqvw5-3-3-0._1oehqvw5-3-3-0 {
-  color: var(--_1oehqvw2-3-3-0);
+._1oehqvw5-3-3-2._1oehqvw5-3-3-2 {
+  color: var(--_1oehqvw2-3-3-2);
 }
-._1oehqvw6-3-3-0 {
+._1oehqvw6-3-3-2 {
   align-items: center;
   display: inline-block;
   text-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1oehqvw7-3-3-0._1oehqvw7-3-3-0 {
+._1oehqvw7-3-3-2._1oehqvw7-3-3-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-3-0::before {
+._1oehqvw8-3-3-2::before {
   content: " ";
   position: absolute;
   display: block;
@@ -32,38 +32,38 @@
   left: 0px;
   transform: translate(4px);
 }
-._1oehqvw9-3-3-0 {
-  --_1oehqvw0-3-3-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1oehqvw1-3-3-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-  --_1oehqvw2-3-3-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+._1oehqvw9-3-3-2 {
+  --_1oehqvw0-3-3-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1oehqvw1-3-3-2: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+  --_1oehqvw2-3-3-2: var(--dt-colors-text-neutral-subdued, #595a7d);
   grid-template-columns: 1fr max-content;
 }
-._1oehqvwa-3-3-0 {
-  --_1oehqvw0-3-3-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1oehqvw1-3-3-0: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
-  --_1oehqvw2-3-3-0: var(--dt-colors-text-primary-default, #464cce);
+._1oehqvwa-3-3-2 {
+  --_1oehqvw0-3-3-2: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1oehqvw1-3-3-2: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
+  --_1oehqvw2-3-3-2: var(--dt-colors-text-primary-default, #464cce);
 }
-._1oehqvwb-3-3-0:hover._1oehqvwb-3-3-0:hover, ._1oehqvwb-3-3-0:focus-visible._1oehqvwb-3-3-0:focus-visible {
-  background-color: var(--_1oehqvw1-3-3-0);
+._1oehqvwb-3-3-2:hover._1oehqvwb-3-3-2:hover, ._1oehqvwb-3-3-2:focus-visible._1oehqvwb-3-3-2:focus-visible {
+  background-color: var(--_1oehqvw1-3-3-2);
 }
-._1oehqvwc-3-3-0._1oehqvwc-3-3-0 {
+._1oehqvwc-3-3-2._1oehqvwc-3-3-2 {
   opacity: 0;
-  background-color: var(--_1oehqvw0-3-3-0);
+  background-color: var(--_1oehqvw0-3-3-2);
 }
-._1oehqvwc-3-3-0:hover._1oehqvwc-3-3-0:hover, ._1oehqvwc-3-3-0:focus-visible._1oehqvwc-3-3-0:focus-visible {
-  background-color: var(--_1oehqvw1-3-3-0);
+._1oehqvwc-3-3-2:hover._1oehqvwc-3-3-2:hover, ._1oehqvwc-3-3-2:focus-visible._1oehqvwc-3-3-2:focus-visible {
+  background-color: var(--_1oehqvw1-3-3-2);
 }
-._1oehqvwc-3-3-0:disabled, ._1oehqvwc-3-3-0:disabled:hover._1oehqvwc-3-3-0:disabled:hover {
+._1oehqvwc-3-3-2:disabled, ._1oehqvwc-3-3-2:disabled:hover._1oehqvwc-3-3-2:disabled:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1oehqvw9-3-3-0:has(button:focus-visible) ._1oehqvwc-3-3-0, ._1oehqvw9-3-3-0:hover ._1oehqvwc-3-3-0 {
+._1oehqvw9-3-3-2:has(button:focus-visible) ._1oehqvwc-3-3-2, ._1oehqvw9-3-3-2:hover ._1oehqvwc-3-3-2 {
   opacity: 1;
 }
-._1oehqvw9-3-3-0:has(._1oehqvwc-3-3-0:focus-visible) ._1oehqvwb-3-3-0, ._1oehqvw9-3-3-0:hover ._1oehqvwb-3-3-0:not(:hover) {
-  background-color: var(--_1oehqvw0-3-3-0);
+._1oehqvw9-3-3-2:has(._1oehqvwc-3-3-2:focus-visible) ._1oehqvwb-3-3-2, ._1oehqvw9-3-3-2:hover ._1oehqvwb-3-3-2:not(:hover) {
+  background-color: var(--_1oehqvw0-3-3-2);
 }
-._1oehqvw9-3-3-0 button, ._1oehqvw9-3-3-0:hover button {
+._1oehqvw9-3-3-2 button, ._1oehqvw9-3-3-2:hover button {
   transition-timing-function: unset;
   transition-duration: 0s;
   transition: none;

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

@@ -1,14 +1,14 @@
 import "./SegmentsPresets.css";
-var and = "_1oehqvw5-3-3-0";
-var buttonLabel = "_1oehqvw6-3-3-0";
-var inputGroup = "_1oehqvw9-3-3-0";
-var inputGroupSelected = "_1oehqvwa-3-3-0";
-var list = "_1oehqvw3-3-3-0";
-var listItem = "_1oehqvw4-3-3-0";
-var presetButton = "_1oehqvwb-3-3-0";
-var sectionHeadline = "_1oehqvw7-3-3-0";
-var selectionMark = "_1oehqvw8-3-3-0";
-var suffixButton = "_1oehqvwc-3-3-0";
+var and = "_1oehqvw5-3-3-2";
+var buttonLabel = "_1oehqvw6-3-3-2";
+var inputGroup = "_1oehqvw9-3-3-2";
+var inputGroupSelected = "_1oehqvwa-3-3-2";
+var list = "_1oehqvw3-3-3-2";
+var listItem = "_1oehqvw4-3-3-2";
+var presetButton = "_1oehqvwb-3-3-2";
+var sectionHeadline = "_1oehqvw7-3-3-2";
+var selectionMark = "_1oehqvw8-3-3-2";
+var suffixButton = "_1oehqvwc-3-3-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 './SegmentsPresets.css';\nexport var and = '_1oehqvw5-3-3-0';\nexport var buttonLabel = '_1oehqvw6-3-3-0';\nexport var inputGroup = '_1oehqvw9-3-3-0';\nexport var inputGroupSelected = '_1oehqvwa-3-3-0';\nexport var list = '_1oehqvw3-3-3-0';\nexport var listItem = '_1oehqvw4-3-3-0';\nexport var presetButton = '_1oehqvwb-3-3-0';\nexport var sectionHeadline = '_1oehqvw7-3-3-0';\nexport var selectionMark = '_1oehqvw8-3-3-0';\nexport var suffixButton = '_1oehqvwc-3-3-0';"],
+  "sourcesContent": ["import './SegmentsPresets.css';\nexport var and = '_1oehqvw5-3-3-2';\nexport var buttonLabel = '_1oehqvw6-3-3-2';\nexport var inputGroup = '_1oehqvw9-3-3-2';\nexport var inputGroupSelected = '_1oehqvwa-3-3-2';\nexport var list = '_1oehqvw3-3-3-2';\nexport var listItem = '_1oehqvw4-3-3-2';\nexport var presetButton = '_1oehqvwb-3-3-2';\nexport var sectionHeadline = '_1oehqvw7-3-3-2';\nexport var selectionMark = '_1oehqvw8-3-3-2';\nexport var suffixButton = '_1oehqvwc-3-3-2';"],
   "mappings": "AAAA,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,47 +1,47 @@
-._1fuxi5m0-3-3-0 {
+._1fuxi5m0-3-3-2 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m2-3-3-0._1fuxi5m2-3-3-0 {
+._1fuxi5m2-3-3-2._1fuxi5m2-3-3-2 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-3-0 {
+._1fuxi5m3-3-3-2 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m3-3-3-0._1fuxi5m3-3-3-0 {
+._1fuxi5m3-3-3-2._1fuxi5m3-3-3-2 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1fuxi5m4-3-3-0 {
+._1fuxi5m4-3-3-2 {
   gap: 2px;
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1fuxi5m5-3-3-0 {
+._1fuxi5m5-3-3-2 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m6-3-3-0 {
+._1fuxi5m6-3-3-2 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m7-3-3-0 {
+._1fuxi5m7-3-3-2 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5m8-3-3-0 {
+._1fuxi5m8-3-3-2 {
   grid-template-areas: "segment segment";
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m0-3-3-0 {
+  ._1fuxi5m0-3-3-2 {
     border-bottom-left-radius: 0;
   }
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-3-0 {
+  ._1fuxi5m1-3-3-2 {
     border-bottom-left-radius: 0;
   }
-  ._1fuxi5m5-3-3-0 {
+  ._1fuxi5m5-3-3-2 {
     grid-template-areas: "segment segment clear" "variables variables clear";
   }
 }

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

@@ -1,10 +1,10 @@
 import "./SegmentSelect.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearButtonCSS = "_1fuxi5m3-3-3-0";
-var noBorderRadiusRight = "_1fuxi5m2-3-3-0";
-var segmentsSelectCSS = "_1fuxi5m1-3-3-0";
-var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m4-3-3-0", variantClassNames: { layout: { full: "_1fuxi5m5-3-3-0", "full-readonly": "_1fuxi5m6-3-3-0", "no-variables": "_1fuxi5m7-3-3-0", "no-variables-readonly": "_1fuxi5m8-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
-var variablesSelectCSS = "_1fuxi5m0-3-3-0";
+var clearButtonCSS = "_1fuxi5m3-3-3-2";
+var noBorderRadiusRight = "_1fuxi5m2-3-3-2";
+var segmentsSelectCSS = "_1fuxi5m1-3-3-2";
+var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m4-3-3-2", variantClassNames: { layout: { full: "_1fuxi5m5-3-3-2", "full-readonly": "_1fuxi5m6-3-3-2", "no-variables": "_1fuxi5m7-3-3-2", "no-variables-readonly": "_1fuxi5m8-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });
+var variablesSelectCSS = "_1fuxi5m0-3-3-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 './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m3-3-3-0';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-3-0';\nexport var segmentsSelectCSS = '_1fuxi5m1-3-3-0';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m4-3-3-0',variantClassNames:{layout:{full:'_1fuxi5m5-3-3-0','full-readonly':'_1fuxi5m6-3-3-0','no-variables':'_1fuxi5m7-3-3-0','no-variables-readonly':'_1fuxi5m8-3-3-0'}},defaultVariants:{},compoundVariants:[]});\nexport var variablesSelectCSS = '_1fuxi5m0-3-3-0';"],
+  "sourcesContent": ["import './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m3-3-3-2';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-3-2';\nexport var segmentsSelectCSS = '_1fuxi5m1-3-3-2';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m4-3-3-2',variantClassNames:{layout:{full:'_1fuxi5m5-3-3-2','full-readonly':'_1fuxi5m6-3-3-2','no-variables':'_1fuxi5m7-3-3-2','no-variables-readonly':'_1fuxi5m8-3-3-2'}},defaultVariants:{},compoundVariants:[]});\nexport var variablesSelectCSS = '_1fuxi5m0-3-3-2';"],
   "mappings": "AAAA,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,qBAAqB;",
   "names": []
 }

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

@@ -1,3 +1,3 @@
-._1e5el1o0-3-3-0 {
+._1e5el1o0-3-3-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-3-0";
+var trigger = "_1e5el1o0-3-3-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-3-0';"],
+  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-3-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1sqhmjg0-3-3-0 {
+._1sqhmjg0-3-3-2 {
   min-width: 0;
   box-sizing: border-box;
 }

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

@@ -1,5 +1,5 @@
 import "./TimeframeSelector.css";
-var displayValueParts = "_1sqhmjg0-3-3-0";
+var displayValueParts = "_1sqhmjg0-3-3-2";
 export {
   displayValueParts
 };

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-3-0';"],
+  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-3-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._at2xro0-3-3-0 {
+._at2xro0-3-3-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-3-0 {
+._at2xro1-3-3-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-3-0 {
+._at2xro2-3-3-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-3-0 {
+  ._at2xro1-3-3-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-3-0";
-var overlayRoot = "_at2xro1-3-3-0";
-var wrapper = "_at2xro2-3-3-0";
+var fieldset = "_at2xro0-3-3-2";
+var overlayRoot = "_at2xro1-3-3-2";
+var wrapper = "_at2xro2-3-3-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-3-0';\nexport var overlayRoot = '_at2xro1-3-3-0';\nexport var wrapper = '_at2xro2-3-3-0';"],
+  "sourcesContent": ["import './CustomTimeframeSelector.css';\nexport var fieldset = '_at2xro0-3-3-2';\nexport var overlayRoot = '_at2xro1-3-3-2';\nexport var wrapper = '_at2xro2-3-3-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-3-0 {
+._14xc6b0-3-3-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-3-0 {
+._14xc6b1-3-3-2 {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
 }
-._14xc6b2-3-3-0 {
+._14xc6b2-3-3-2 {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
   padding: var(--dt-spacings-size-6, 6px);
 }
-._14xc6b3-3-3-0 {
+._14xc6b3-3-3-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-3-0";
-var hint = "_14xc6b3-3-3-0";
-var scrollContainer = "_14xc6b1-3-3-0";
-var wrapper = "_14xc6b0-3-3-0";
+var footer = "_14xc6b2-3-3-2";
+var hint = "_14xc6b3-3-3-2";
+var scrollContainer = "_14xc6b1-3-3-2";
+var wrapper = "_14xc6b0-3-3-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-3-0';\nexport var hint = '_14xc6b3-3-3-0';\nexport var scrollContainer = '_14xc6b1-3-3-0';\nexport var wrapper = '_14xc6b0-3-3-0';"],
+  "sourcesContent": ["import './TimeframeSelectorOverlay.css';\nexport var footer = '_14xc6b2-3-3-2';\nexport var hint = '_14xc6b3-3-3-2';\nexport var scrollContainer = '_14xc6b1-3-3-2';\nexport var wrapper = '_14xc6b0-3-3-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,kBAAkB;AACtB,IAAI,UAAU;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/presets/PresetItem.js

@@ -45,8 +45,8 @@ const PresetItem = (props) => {
   const setValue = useTimeframeSelectorStore(
     (state2) => state2.setTimeframeSelectorTimeframe
   );
-  const min = useTimeframeSelectorStore((state2) => state2.min?.absoluteDate);
-  const max = useTimeframeSelectorStore((state2) => state2.max?.absoluteDate);
+  const min = useTimeframeSelectorStore((state2) => state2.min?.value);
+  const max = useTimeframeSelectorStore((state2) => state2.max?.value);
   const precision = useTimeframeSelectorStore((state2) => state2.precision);
   const { isRecent } = usePresetItemContext();
   const isSelected = isPresetSelected(value, details, isRecent, precision);

package/esm/filters/timeframe-selector/components/presets/PresetItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/presets/PresetItem.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { HistoryIcon } from '@dynatrace/strato-icons';\n\nimport type { PresetItemVariants } from './Presets.sty.js';\nimport * as styles from './Presets.sty.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { useFocusRing } from '../../../../core/styles/useFocusRing.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport {\n  parseValue,\n  removePrecisionFromTimeValue,\n} from '../../../../forms/forms-core/time/timeParser.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport { usePresetItemContext } from '../../hooks/usePresetItemContext.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport { useTooltipMessages } from '../../hooks/useTooltipMessages.js';\nimport {\n  isPresetSelected,\n  saveRecentTimeframe,\n} from '../../utils/presets-helpers.js';\nimport { isOutsideRange } from '../../utils/timeframe-selection.js';\n\n//#region Typings\n\n/**\n * @public\n */\nexport interface TimeframeSelectorPresetItemProps\n  extends HTMLAttributes<HTMLLIElement>,\n    DataTestId,\n    StylingProps,\n    WithChildren {\n  /** The value of the timeframe preset. */\n  value: {\n    /** Start of the time frame. */\n    from: string;\n    /** End of the time frame. */\n    to: string;\n  };\n}\n//#endregion\n\n/**\n * TimeframeSelector preset item shown inside the presets list of the overlay.\n * @public\n */\nexport const PresetItem = (\n  props: TimeframeSelectorPresetItemProps & {\n    // DEPRECATION: [APPDEV-16622] BREAKING-CHANGE: TimeframeSelector - Remove deprecated `_isSelected` prop.\n    /**\n     * @deprecated - Prop will be removed with the next breaking change cycle.\n     */\n    _isSelected?: boolean;\n  },\n) => {\n  const {\n    children,\n    value,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: TimeframeSelectorPresetItemProps & { _isSelected?: boolean } = props;\n\n  const intl = useIntl();\n  const [openTooltip, setOpenTooltip] = useState(false);\n\n  const { details } = useTimeframeSelectorContext();\n\n  const setValue = useTimeframeSelectorStore(\n    (state) => state.setTimeframeSelectorTimeframe,\n  );\n  const min = useTimeframeSelectorStore((state) => state.min?.absoluteDate);\n  const max = useTimeframeSelectorStore((state) => state.max?.absoluteDate);\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n\n  const { isRecent } = usePresetItemContext();\n\n  const isSelected = isPresetSelected(value, details, isRecent, precision);\n  const isDisabled = isOutsideRange(value, min, max);\n\n  const tooltipId = useId();\n  const tooltipFocusProps = {\n    onFocus: useCallback(\n      () => !isDisabled && setOpenTooltip(true),\n      [isDisabled],\n    ),\n    onBlur: useCallback(() => setOpenTooltip(false), []),\n  };\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: isSelected && !isDisabled ? 'primary' : 'neutral',\n    disabled: isDisabled,\n  });\n\n  let state: NonNullable<PresetItemVariants>['state'] = isSelected\n    ? 'selected'\n    : 'rest';\n  if (isDisabled) {\n    state = 'disabled';\n  }\n\n  const {\n    timeframeDisplayValue,\n    formattedPresetItemValue,\n    tooltipFormattedTimeValueStart,\n    tooltipFormattedTimeValueEnd,\n    isAbsoluteTimeframe,\n    isInvalid,\n  } = useTooltipMessages(value, children);\n\n  /** Handle clicking on the timeframe selector preset item. Uses pointerdown event so that the validation on blur doesn't trigger first. */\n  const handleItemClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    const { from, to } = parseValue(value);\n\n    if (from && to) {\n      const timeframe = {\n        from: removePrecisionFromTimeValue(from, precision) ?? from,\n        to: removePrecisionFromTimeValue(to, precision) ?? to,\n      };\n\n      setValue(timeframe);\n      saveRecentTimeframe(timeframe);\n    }\n  }, [isDisabled, value, precision, setValue]);\n\n  /**\n   * Temporary keydown listener to provide the possibility to select items via keyboard\n   * Will change as soon as we switch to the reusable listbox component.\n   */\n  const handleItemKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      if (\n        event.code === 'Enter' ||\n        event.code === 'NumpadEnter' ||\n        event.code === 'Space'\n      ) {\n        handleItemClick();\n      }\n    },\n    [handleItemClick, isDisabled],\n  );\n\n  const liRef = useRef<HTMLLIElement | null>(null);\n\n  useEffect(() => {\n    if (isSelected) {\n      liRef.current?.scrollIntoView({ block: 'nearest' });\n    }\n    // we don't want to scroll the element into view when isSelected changes, but only on the first render\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (isInvalid) {\n    return null;\n  }\n\n  const tooltipContent = isDisabled ? (\n    <Text textStyle=\"small\">\n      {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.disabledTooltip)}\n    </Text>\n  ) : (\n    <Flex flexDirection=\"column\">\n      <Flex gap={0} flexDirection=\"column\">\n        <Text textStyle=\"base-emphasized\">{timeframeDisplayValue}</Text>\n        <Text textStyle=\"small\">{formattedPresetItemValue}</Text>\n      </Flex>\n      {!isAbsoluteTimeframe && (\n        <Flex gap={0} flexDirection=\"column\">\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueStart}</Text>\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueEnd}</Text>\n        </Flex>\n      )}\n    </Flex>\n  );\n\n  return (\n    <li\n      ref={liRef}\n      role=\"option\"\n      aria-selected={isSelected}\n      aria-disabled={isDisabled}\n      className={clsx([\n        focusClassName,\n        styles.item({\n          state,\n        }),\n        consumerClassName,\n      ])}\n      onPointerDown={handleItemClick}\n      onKeyDown={handleItemKeyDown}\n      data-testid={dataTestId}\n      style={consumerStyle}\n      {...mergeProps(remainingProps, focusProps, tooltipFocusProps)}\n    >\n      <Tooltip\n        id={tooltipId}\n        text={tooltipContent}\n        placement=\"right\"\n        fallbackPlacements={[\n          'right-end',\n          'bottom-end',\n          'bottom',\n          'bottom-start',\n          'left-end',\n          'left',\n          'left-start',\n        ]}\n        open={openTooltip}\n        onOpenChange={setOpenTooltip}\n      >\n        <div\n          className={styles.wrapper({ isSelected, isDisabled })}\n          aria-describedby={tooltipId}\n        >\n          <Grid className={styles.itemContainer}>\n            <Flex alignItems=\"center\" className={styles.displayValueWrapper}>\n              {isRecent && <HistoryIcon className={styles.recentIcon} />}\n              <Text\n                textStyle=\"base-emphasized\"\n                as=\"div\"\n                className={styles.timeframeDisplayValue}\n              >\n                {timeframeDisplayValue}\n              </Text>\n            </Flex>\n            {(!isRecent || !isAbsoluteTimeframe) && (\n              <Text\n                as={Flex}\n                textStyle=\"small\"\n                className={clsx(\n                  styles.mediaQuery,\n                  styles.formattedPresetValue({\n                    state,\n                  }),\n                )}\n              >\n                {formattedPresetItemValue}\n              </Text>\n            )}\n          </Grid>\n        </div>\n      </Tooltip>\n    </li>\n  );\n};\n\nPresetItem.displayName = 'TimeframeSelector.PresetItem';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { HistoryIcon } from '@dynatrace/strato-icons';\n\nimport type { PresetItemVariants } from './Presets.sty.js';\nimport * as styles from './Presets.sty.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { useFocusRing } from '../../../../core/styles/useFocusRing.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport {\n  parseValue,\n  removePrecisionFromTimeValue,\n} from '../../../../forms/forms-core/time/timeParser.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport { usePresetItemContext } from '../../hooks/usePresetItemContext.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport { useTooltipMessages } from '../../hooks/useTooltipMessages.js';\nimport {\n  isPresetSelected,\n  saveRecentTimeframe,\n} from '../../utils/presets-helpers.js';\nimport { isOutsideRange } from '../../utils/timeframe-selection.js';\n\n//#region Typings\n\n/**\n * @public\n */\nexport interface TimeframeSelectorPresetItemProps\n  extends HTMLAttributes<HTMLLIElement>,\n    DataTestId,\n    StylingProps,\n    WithChildren {\n  /** The value of the timeframe preset. */\n  value: {\n    /** Start of the time frame. */\n    from: string;\n    /** End of the time frame. */\n    to: string;\n  };\n}\n//#endregion\n\n/**\n * TimeframeSelector preset item shown inside the presets list of the overlay.\n * @public\n */\nexport const PresetItem = (\n  props: TimeframeSelectorPresetItemProps & {\n    // DEPRECATION: [APPDEV-16622] BREAKING-CHANGE: TimeframeSelector - Remove deprecated `_isSelected` prop.\n    /**\n     * @deprecated - Prop will be removed with the next breaking change cycle.\n     */\n    _isSelected?: boolean;\n  },\n) => {\n  const {\n    children,\n    value,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: TimeframeSelectorPresetItemProps & { _isSelected?: boolean } = props;\n\n  const intl = useIntl();\n  const [openTooltip, setOpenTooltip] = useState(false);\n\n  const { details } = useTimeframeSelectorContext();\n\n  const setValue = useTimeframeSelectorStore(\n    (state) => state.setTimeframeSelectorTimeframe,\n  );\n  const min = useTimeframeSelectorStore((state) => state.min?.value);\n  const max = useTimeframeSelectorStore((state) => state.max?.value);\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n\n  const { isRecent } = usePresetItemContext();\n\n  const isSelected = isPresetSelected(value, details, isRecent, precision);\n  const isDisabled = isOutsideRange(value, min, max);\n\n  const tooltipId = useId();\n  const tooltipFocusProps = {\n    onFocus: useCallback(\n      () => !isDisabled && setOpenTooltip(true),\n      [isDisabled],\n    ),\n    onBlur: useCallback(() => setOpenTooltip(false), []),\n  };\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: isSelected && !isDisabled ? 'primary' : 'neutral',\n    disabled: isDisabled,\n  });\n\n  let state: NonNullable<PresetItemVariants>['state'] = isSelected\n    ? 'selected'\n    : 'rest';\n  if (isDisabled) {\n    state = 'disabled';\n  }\n\n  const {\n    timeframeDisplayValue,\n    formattedPresetItemValue,\n    tooltipFormattedTimeValueStart,\n    tooltipFormattedTimeValueEnd,\n    isAbsoluteTimeframe,\n    isInvalid,\n  } = useTooltipMessages(value, children);\n\n  /** Handle clicking on the timeframe selector preset item. Uses pointerdown event so that the validation on blur doesn't trigger first. */\n  const handleItemClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    const { from, to } = parseValue(value);\n\n    if (from && to) {\n      const timeframe = {\n        from: removePrecisionFromTimeValue(from, precision) ?? from,\n        to: removePrecisionFromTimeValue(to, precision) ?? to,\n      };\n\n      setValue(timeframe);\n      saveRecentTimeframe(timeframe);\n    }\n  }, [isDisabled, value, precision, setValue]);\n\n  /**\n   * Temporary keydown listener to provide the possibility to select items via keyboard\n   * Will change as soon as we switch to the reusable listbox component.\n   */\n  const handleItemKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      if (\n        event.code === 'Enter' ||\n        event.code === 'NumpadEnter' ||\n        event.code === 'Space'\n      ) {\n        handleItemClick();\n      }\n    },\n    [handleItemClick, isDisabled],\n  );\n\n  const liRef = useRef<HTMLLIElement | null>(null);\n\n  useEffect(() => {\n    if (isSelected) {\n      liRef.current?.scrollIntoView({ block: 'nearest' });\n    }\n    // we don't want to scroll the element into view when isSelected changes, but only on the first render\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (isInvalid) {\n    return null;\n  }\n\n  const tooltipContent = isDisabled ? (\n    <Text textStyle=\"small\">\n      {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.disabledTooltip)}\n    </Text>\n  ) : (\n    <Flex flexDirection=\"column\">\n      <Flex gap={0} flexDirection=\"column\">\n        <Text textStyle=\"base-emphasized\">{timeframeDisplayValue}</Text>\n        <Text textStyle=\"small\">{formattedPresetItemValue}</Text>\n      </Flex>\n      {!isAbsoluteTimeframe && (\n        <Flex gap={0} flexDirection=\"column\">\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueStart}</Text>\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueEnd}</Text>\n        </Flex>\n      )}\n    </Flex>\n  );\n\n  return (\n    <li\n      ref={liRef}\n      role=\"option\"\n      aria-selected={isSelected}\n      aria-disabled={isDisabled}\n      className={clsx([\n        focusClassName,\n        styles.item({\n          state,\n        }),\n        consumerClassName,\n      ])}\n      onPointerDown={handleItemClick}\n      onKeyDown={handleItemKeyDown}\n      data-testid={dataTestId}\n      style={consumerStyle}\n      {...mergeProps(remainingProps, focusProps, tooltipFocusProps)}\n    >\n      <Tooltip\n        id={tooltipId}\n        text={tooltipContent}\n        placement=\"right\"\n        fallbackPlacements={[\n          'right-end',\n          'bottom-end',\n          'bottom',\n          'bottom-start',\n          'left-end',\n          'left',\n          'left-start',\n        ]}\n        open={openTooltip}\n        onOpenChange={setOpenTooltip}\n      >\n        <div\n          className={styles.wrapper({ isSelected, isDisabled })}\n          aria-describedby={tooltipId}\n        >\n          <Grid className={styles.itemContainer}>\n            <Flex alignItems=\"center\" className={styles.displayValueWrapper}>\n              {isRecent && <HistoryIcon className={styles.recentIcon} />}\n              <Text\n                textStyle=\"base-emphasized\"\n                as=\"div\"\n                className={styles.timeframeDisplayValue}\n              >\n                {timeframeDisplayValue}\n              </Text>\n            </Flex>\n            {(!isRecent || !isAbsoluteTimeframe) && (\n              <Text\n                as={Flex}\n                textStyle=\"small\"\n                className={clsx(\n                  styles.mediaQuery,\n                  styles.formattedPresetValue({\n                    state,\n                  }),\n                )}\n              >\n                {formattedPresetItemValue}\n              </Text>\n            )}\n          </Grid>\n        </div>\n      </Tooltip>\n    </li>\n  );\n};\n\nPresetItem.displayName = 'TimeframeSelector.PresetItem';\n"],
+  "mappings": "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",
   "names": ["state"]
 }